/* ════════════════════════════════════════════════════════════
   V5 — REVISION 9
   Section labels become the hook · hero content sits lower ·
   headline eased down again · restored path-card hierarchy
   (No palette, type-family or layout-system changes.)
   ════════════════════════════════════════════════════════════ */

/* ---------- 1. section labels: the first thing you read ---------- */
.eyebrow{
  font-size:1.05rem;
  letter-spacing:.3em;
  font-weight:600;
  color:rgba(11,20,32,.78);
  gap:20px;
  margin-bottom:clamp(1.3rem,2.6vw,2.1rem);
}
.eyebrow::before{width:56px;height:2px;background:var(--gold);opacity:1}
.on-dark .eyebrow,.ba2 .eyebrow{color:rgba(245,242,234,.92)}
.on-dark .eyebrow::before,.ba2 .eyebrow::before{background:var(--gold-2)}
/* the crumb sits above a label — keep it quiet by comparison */
.crumb{font-size:.74rem;letter-spacing:.18em;color:rgba(11,20,32,.45)}

/* hero eyebrow — the primary hook, ahead of the headline */
.hero-cine .eyebrow{
  font-size:clamp(1.05rem,.86rem + .55vw,1.32rem);
  letter-spacing:.34em;
  font-weight:600;
  color:#FCFAF4;
  margin-bottom:clamp(1.1rem,2vh,1.6rem);
  text-shadow:0 0 34px rgba(201,165,92,.6),0 0 12px rgba(201,165,92,.35),0 2px 14px rgba(11,20,32,.7);
}
.hero-cine .eyebrow::before{
  width:64px;height:2px;background:var(--gold-2);
  box-shadow:0 0 16px rgba(201,165,92,.85);
}

/* ---------- 2. hero: content lower, headline calmer ---------- */
.hero-cine .hero-inner{padding-bottom:clamp(1.4rem,3vh,2.2rem)}
.hero-cine h1{font-size:clamp(1.95rem,1.25rem + 2.6vw,3.35rem);line-height:1.08}
.hero-cine .hero-sub{
  max-width:552px;line-height:1.8;
  margin-top:clamp(1.1rem,2.2vh,1.6rem);
}
.hero-cine .hero-cta{margin-top:clamp(1.7rem,3.2vh,2.4rem)}
.hero-copy{width:min(552px,46vw)}
@media (max-width:900px){
  .hero-cine .hero-inner{padding-bottom:clamp(1.8rem,4vh,2.6rem)}
  .hero-copy{width:100%;max-width:552px}
}

/* ---------- 3. supporting micro-labels, one step up ---------- */
.svc-panel .svc-eyebrow{font-size:.82rem;letter-spacing:.22em;font-weight:500}
.plan-inc .t{font-size:.78rem;letter-spacing:.22em;color:rgba(11,20,32,.62)}
.plan-feat .plan-inc .t{color:rgba(245,242,234,.74)}
.path-card .pc-day{font-size:.8rem;letter-spacing:.22em;font-weight:500}
.audit-panel .ap-ref,.form-head .ref{font-size:.74rem;letter-spacing:.2em}
.svc-count{font-size:.8rem;color:rgba(245,242,234,.75)}
.band-cap,.coord{font-size:.72rem;letter-spacing:.24em}
.iw-sig{font-size:.95rem}
.plan-badge{font-size:.68rem;letter-spacing:.22em;padding:.6em 1.5em}

/* ---------- 4. How we work: page title + card hierarchy ---------- */
.page-hero .eyebrow{font-size:clamp(1.05rem,.9rem + .5vw,1.28rem);letter-spacing:.32em;color:rgba(11,20,32,.82)}
.page-hero h1{margin-top:.3rem}
/* the four phase cards read as a timeline, not a text stack */
.path-card{
  padding-top:clamp(7.5rem,12vh,9rem);
  box-shadow:0 40px 90px -60px rgba(11,20,32,.45);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease);
}
.path-card:hover{
  transform:translateY(-8px);
  box-shadow:0 60px 120px -60px rgba(11,20,32,.55);
  border-color:rgba(165,129,60,.42);
}
.path-card.is-final:hover{border-color:rgba(201,165,92,.55)}
.path-card h3{font-size:clamp(1.4rem,1.15rem + 1.1vw,1.95rem);margin-top:.15rem}
.path-card p{font-size:.99rem;line-height:1.65}
.path-card .pc-num{font-size:clamp(7.5rem,11vw,12rem)}
/* each card rises into view as the track scrubs past */
.path-card.rv{opacity:0;transform:translateY(38px)}
.path-card.rv.is-in{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .85s var(--ease)}
.path-card.rv.is-in:hover{transform:translateY(-8px)}
@media (max-width:900px){
  .path-card{padding-top:6.5rem;min-height:0}
}

/* ---------- 5. hierarchy: body copy stops competing ---------- */
.lede{color:var(--steel)}
.on-dark .lede,.ba2 .lede{color:rgba(245,242,234,.66)}
.hero-sub{font-weight:400}
.sec-head{margin-bottom:clamp(2.6rem,5vw,4.4rem)}
.sec-head .h-sec{margin-top:.1rem}

/* ---------- 6. hero: the ticker moved to the seam, so the copy drops ---------- */
.hero-cine{padding-bottom:0}
/* clears the sheet's 40px overlap with room to spare */
.hero-cine .hero-inner{padding-bottom:clamp(3.4rem,7.5vh,5rem)}
/* the ticker now opens the ivory sheet, riding the seam it always visually sat on */
.statement-v2 > .marquee{
  position:relative;z-index:1;
  margin-bottom:clamp(2.6rem,5.5vw,4.4rem);
  border-top:0;
}
.statement-v2 > .marquee .marquee-item{color:rgba(11,20,32,.5)}

/* the cue no longer crowds the CTA now that the copy sits right */
.scroll-cue{left:var(--gutter);transform:none;bottom:38px;align-items:flex-start}
@media (max-width:900px){.scroll-cue{display:none}}

/* ---------- 7. two-line paragraph → the block drops further still ---------- */
.hero-cine .hero-inner{padding-bottom:clamp(3rem,6.5vh,4.4rem)}

/* ---------- 8. mobile refinements found in the page audit ---------- */
@media (max-width:640px){
  /* the hook stays a hook, but two lines instead of three */
  .hero-cine .eyebrow{font-size:.86rem;letter-spacing:.16em;gap:12px}
  .hero-cine .eyebrow::before{width:34px}
  /* the phase artwork was grazing the day label at 390px */
  .path-card{padding-top:8rem}
  .pc-art{width:min(118px,36%);top:1.5rem;left:1.5rem}
}