/* ==========================================================================
   FEATURE GUIDE LAYOUT — loaded only by guides built with layout:"feature"
   (tools/generate-pages.js → featureGuidePage). Uses the main.css tokens;
   nothing here touches the older guide pages.
   ========================================================================== */
.guide--feature{
  --col:43rem;                 /* reading measure (~70 characters) */
  --wide:1120px;               /* hero + process breakout */
  --gf-text:#57544f;           /* body copy: 6.6:1 on paper */
  --gf-gold:#7a5f33;           /* gold for small text and links: 5.4:1 on paper */
  max-width:var(--wide);margin:0 auto;
}
.guide--feature > nav,.gf-head,.gf-lead,.gf-more{max-width:var(--col);margin-inline:auto}

/* ---------- breadcrumb ---------- */
.gf-crumb ol{display:flex;align-items:center;gap:.65rem;list-style:none;margin:0;padding:0;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.gf-crumb li{display:flex;align-items:center;gap:.65rem;flex:none}
.gf-crumb li + li::before{content:"/";flex:none;color:var(--gold)}
.gf-crumb li[aria-current]{flex:1 1 auto;min-width:0}
.gf-crumb li[aria-current] span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gf-crumb a{transition:color .3s var(--ease-lux)}
.gf-crumb a:hover{color:var(--gf-gold)}

/* ---------- header ---------- */
.gf-head{margin-top:clamp(1.8rem,3.6vw,2.6rem)}
.gf-eyebrow{color:var(--gf-gold)}
.gf-dot{margin-inline:.7rem;color:var(--gold)}
.gf-title{font-family:var(--font-display);font-weight:500;font-size:clamp(2.1rem,4.4vw,3.35rem);
  line-height:1.08;letter-spacing:-.005em;margin-top:1rem;text-wrap:balance}
.gf-standfirst{font-family:var(--font-display);font-size:clamp(1.22rem,1.9vw,1.5rem);line-height:1.45;
  color:#45423d;margin-top:1.15rem;max-width:36em;text-wrap:pretty}
.gf-meta{margin-top:1.6rem;padding-top:1.05rem;border-top:1px solid var(--line);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.gf-meta time{color:var(--ink)}
.gf-byline{margin-top:.4rem;font-size:.86rem;font-style:italic;color:var(--grey)}

/* ---------- hero (16:9, 4:3 crop on phones via <picture>) ---------- */
.gf-hero{margin:clamp(2rem,4vw,2.8rem) 0 0}
.gf-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#1c1c1c}
.gf-hero figcaption{margin-top:.75rem;font-size:.8rem;line-height:1.55;color:var(--grey)}

/* ---------- body copy ---------- */
.gf-body{margin-top:clamp(2.2rem,4.6vw,3.4rem)}
.gf-body p{color:var(--gf-text);font-size:1rem;line-height:1.9}
.gf-body p + p{margin-top:1rem}
.gf-body p strong{color:var(--ink);font-weight:500}
.gf-body p a,.gf-body .guide__inline-links a,.gf-contact a{color:var(--gf-gold);border-bottom:1px solid rgba(122,95,51,.4);
  transition:border-color .3s var(--ease-lux)}
.gf-body p a:hover,.gf-body .guide__inline-links a:hover,.gf-contact a:hover{border-bottom-color:var(--gf-gold)}
.gf-lead p{font-size:1.08rem;color:#4a4742}
/* editorial drop cap on the opening paragraph (Latin only — it would break Arabic joining) */
html:not([lang="ar"]) .gf-lead p:first-child::first-letter{
  float:inline-start;font-family:var(--font-display);font-weight:500;font-size:4.15em;line-height:.8;
  padding:.1em .1em 0 0;color:var(--ink)}

.gf-section{margin-top:clamp(2.6rem,5vw,3.6rem)}
.gf-section > *{max-width:var(--col);margin-inline:auto}
.gf-section h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.55rem,2.4vw,1.95rem);
  line-height:1.2;margin-bottom:1rem;text-wrap:balance;scroll-margin-top:110px}
.gf-body .guide__inline-links{margin-top:1.3rem;font-size:.95rem}

/* ---------- headline figures ---------- */
.gf-stats{margin-bottom:1.6rem}
.gf-stats__grid{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.gf-stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.55rem;padding:1.35rem 1.4rem 1.4rem 0}
.gf-stat + .gf-stat{border-inline-start:1px solid var(--line);padding-inline:1.6rem 0}
.gf-stat dd{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.95rem,3.4vw,2.6rem);
  line-height:1;color:var(--ink);font-variant-numeric:lining-nums}
.gf-stat dt{font-size:.8rem;line-height:1.55;color:var(--grey);max-width:30ch}
.gf-stats__note{margin-top:.75rem;font-size:.76rem;line-height:1.6;font-style:italic;color:var(--grey)}

/* ---------- process: a row of numbered steps ---------- */
.gf-section > .gf-process{max-width:var(--wide);margin:2.2rem auto 0}
.gf-process{--d:2.6rem;background:var(--paper-warm);border:1px solid var(--line);
  padding:1.6rem clamp(.8rem,2.2vw,1.8rem) 1.8rem}
.gf-kicker{text-align:center;font-size:.68rem !important;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gf-gold) !important;line-height:1.5 !important;margin-bottom:1.3rem;font-weight:500}
.gf-process__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
.gf-process__list li{position:relative;display:flex;flex-direction:column;align-items:center;gap:.75rem;
  text-align:center;padding:0 .25rem}
.gf-process__list li::after{content:"";position:absolute;top:calc(var(--d) / 2);height:1px;background:var(--gold);
  inset-inline-start:calc(50% + var(--d) / 2 + .3rem);width:calc(100% - var(--d) - .6rem)}
.gf-process__list li:last-child::after{display:none}
.gf-process__n{position:relative;z-index:1;width:var(--d);height:var(--d);flex:none;display:grid;place-items:center;
  border:1px solid var(--gold);border-radius:50%;background:var(--paper);
  font-family:var(--font-display);font-size:1.02rem;color:var(--gf-gold);font-variant-numeric:lining-nums}
.gf-process__list li:last-child .gf-process__n{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gf-process__t{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.45;color:var(--ink)}

/* ---------- buyer groups ---------- */
.gf-groups{display:grid;grid-template-columns:1fr 1fr;margin-top:1.9rem;border:1px solid var(--line);background:var(--white)}
.gf-groups__col{padding:1.45rem 1.6rem 1.1rem}
.gf-groups__col + .gf-groups__col{border-inline-start:1px solid var(--line)}
.gf-body .gf-groups__h{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  line-height:1.5;color:var(--gf-gold);margin-bottom:.5rem}
.gf-groups ul{list-style:none;margin:0;padding:0}
.gf-groups li{display:flex;align-items:baseline;gap:.75rem;padding:.62rem 0;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:1.16rem;line-height:1.3;color:var(--ink)}
.gf-groups li:last-child{border-bottom:0}
.gf-groups li::before{content:"";flex:none;width:.8rem;height:1px;background:var(--gold);transform:translateY(-.3em)}

/* ---------- photographs ---------- */
.gf-figure{margin:2rem auto 0}
.gf-figure img{display:block;width:100%;height:auto;background:var(--paper-warm)}
.gf-figure figcaption{margin-top:.7rem;font-size:.8rem;line-height:1.55;color:var(--grey)}
.gf-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.gf-pair .gf-figure{margin:0}
.gf-pair img{aspect-ratio:4/3;object-fit:cover}
.gf-body .gf-figure + p,.gf-body .gf-pair + p,.gf-body .gf-stats + p{margin-top:1.6rem}

/* ---------- closing enquiry panel ---------- */
.gf-section.gf-cta{max-width:var(--col);margin-inline:auto;background:var(--paper-warm);border:1px solid var(--line);border-top:2px solid var(--gold);
  padding:clamp(1.7rem,4vw,2.7rem) clamp(1.4rem,4vw,2.7rem);margin-top:clamp(3rem,6vw,4.4rem)}
.gf-section.gf-cta > *{max-width:none}
.gf-cta h2{font-size:clamp(1.55rem,2.8vw,2.05rem);max-width:24ch}
.gf-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.7rem !important}
.gf-contact__wa{white-space:nowrap}
.gf-contact{margin-top:1.3rem !important;font-size:.92rem !important;line-height:1.8 !important}

/* ---------- continue reading ---------- */
.gf-more{margin-top:clamp(3rem,6vw,4.4rem);padding-top:2rem;border-top:1px solid var(--line)}
.gf-more h2{font-family:var(--font-display);font-weight:500;font-size:1.6rem;line-height:1.2}
.gf-more__cards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.3rem}
.gf-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  transition:border-color .35s var(--ease-lux),transform .35s var(--ease-lux)}
.gf-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.gf-card__fig{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-warm)}
.gf-card__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-lux)}
.gf-card:hover .gf-card__fig img{transform:scale(1.04)}
.gf-card__cat{margin:1.1rem 1.25rem 0;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gf-gold)}
.gf-card__t{margin:.45rem 1.25rem 1rem;font-family:var(--font-display);font-size:1.22rem;line-height:1.25;color:var(--ink)}
.gf-card .text-link{margin:auto 1.25rem 1.25rem;align-self:flex-start;color:var(--gf-gold)}
.gf-more__links{list-style:none;display:flex;flex-wrap:wrap;gap:.65rem 1.7rem;margin:1.7rem 0 0;padding:0}
.gf-more__links a{font-size:.93rem;color:var(--gf-gold);border-bottom:1px solid transparent;transition:border-color .3s var(--ease-lux)}
.gf-more__links a:hover{border-bottom-color:var(--gold)}

/* ---------- tablet: process in two rows of four ---------- */
@media (max-width:960px){
  .gf-process__list{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.6rem}
  .gf-process__list li:nth-child(4n)::after{display:none}
}
/* ---------- phones ---------- */
@media (max-width:640px){
  .gf-hero img{aspect-ratio:4/3}
  .gf-crumb ol{font-size:.62rem;letter-spacing:.18em}
  .gf-process{--d:2.3rem;padding:1.4rem 1.2rem 1.2rem}
  .gf-kicker{text-align:start}
  .gf-process__list{grid-template-columns:1fr;row-gap:0}
  .gf-process__list li{flex-direction:row;text-align:start;gap:1rem;padding:.45rem 0}
  .gf-process__list li::after,.gf-process__list li:nth-child(4n)::after{display:block;top:calc(.45rem + var(--d));
    inset-inline-start:calc(var(--d) / 2);width:1px;height:.9rem}
  .gf-process__list li:last-child::after{display:none}
  .gf-process__t{font-size:.74rem}
  .gf-groups{grid-template-columns:1fr}
  .gf-groups__col + .gf-groups__col{border-inline-start:0;border-top:1px solid var(--line)}
  .gf-groups__col{padding:1.25rem 1.2rem .9rem}
  .gf-actions .btn{width:100%}
  .gf-more__links{flex-direction:column;gap:.85rem}
}
@media (max-width:560px){
  .gf-stats__grid{grid-template-columns:1fr}
  .gf-stat{padding:1.15rem 0}
  .gf-stat + .gf-stat{border-inline-start:0;border-top:1px solid var(--line);padding-inline:0}
  .gf-pair,.gf-more__cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .gf-card,.gf-card__fig img{transition:none}
  .gf-card:hover,.gf-card:hover .gf-card__fig img{transform:none}
}