/* sections.css — layout for each block */

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;
  display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.18);will-change:transform;
  filter:brightness(.66) contrast(1.06) saturate(1.04)}
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,12,.62) 0%,rgba(11,11,12,.12) 34%,rgba(11,11,12,.92) 100%),
    linear-gradient(96deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.28) 46%,rgba(11,11,12,0) 78%)}
.hero__inner{position:relative;padding:0 var(--pad) clamp(56px,10vh,110px);max-width:1400px}
.hero__inner .eyebrow{margin-bottom:clamp(18px,3vh,30px)}
.hero__sub{margin-top:clamp(20px,3vh,34px);max-width:34ch;
  font-size:clamp(1rem,1.5vw,1.22rem);color:var(--bone-dim)}
.hero__cue{position:absolute;right:var(--pad);bottom:clamp(56px,10vh,110px);
  display:flex;align-items:center;gap:12px;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-dim)}
.hero__cue span{display:block;width:46px;height:1px;background:var(--bone-faint);position:relative;overflow:hidden}
.hero__cue span::after{content:"";position:absolute;inset:0;background:var(--clay);
  animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- INTRO ---------- */
.intro{padding:clamp(90px,16vh,170px) var(--pad)}
.intro__lede{font-family:var(--serif);
  font-size:clamp(1.35rem,2.4vw,2.05rem);line-height:1.34;letter-spacing:-.005em;
  max-width:30ch}
@media (min-width:900px){
  .intro__lede{margin-left:auto;margin-right:0;max-width:34ch}
}
.intro__lede .ln{display:inline-block;overflow:hidden;vertical-align:bottom}
.intro__lede .ln > i{display:inline-block;font-style:inherit;
  transform:translateY(105%);transition:transform 1s var(--ease)}
.intro__lede .ln.is-in > i{transform:none}

/* ---------- PINNED CHAPTERS ---------- */
.chapters{position:relative;background:var(--ink-2)}
.chapters__track{height:520vh}
.chapters__sticky{position:sticky;top:0;height:100svh;overflow:hidden}

/* own stacking context so the frames layer among themselves, under the scrim */
.chapters__stage{position:absolute;inset:0;z-index:0}
.chap{position:absolute;inset:0;margin:0;opacity:0;will-change:opacity,transform}
.chap img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.78) contrast(1.06) saturate(1.02)}
.chap:first-child{opacity:1}
.chapters__sticky::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(94deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.5) 38%,rgba(11,11,12,.06) 82%)}

.chapters__copy{position:absolute;left:var(--pad);bottom:clamp(64px,12vh,120px);
  z-index:2;width:min(430px,74vw);height:clamp(200px,26vh,260px)}
/* the outgoing block leaves before the incoming one lands, so titles never overlap */
.chapcopy{position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .22s linear,transform .22s var(--ease);pointer-events:none}
.chapcopy.is-active{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .45s var(--ease) .16s,transform .55s var(--ease) .16s}
.chapcopy__no{display:block;font-size:.66rem;letter-spacing:.3em;color:var(--clay);margin-bottom:14px}
.chapcopy h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.04;margin-bottom:14px}
.chapcopy p{color:var(--bone-dim);max-width:30ch}

.chapters__rail{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;gap:18px;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.chapters__rail li{display:flex;align-items:center;gap:12px;transition:color .4s}
.chapters__rail li i{display:block;width:22px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.chapters__rail li.is-active{color:var(--bone)}
.chapters__rail li.is-active i{width:52px;background:var(--clay)}
@media (max-width:720px){
  .chapters__rail{display:none}
  .chapters__sticky::after{background:linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,.9) 78%)}
  .chapters__copy{width:auto;right:var(--pad)}
}

/* ---------- PROOF ---------- */
.proof{padding:clamp(100px,18vh,200px) var(--pad);text-align:center}
.proof__grid{display:grid;gap:clamp(30px,5vw,60px);margin:clamp(40px,7vh,72px) 0;
  grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.proof__grid{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.8rem,7vw,5rem);line-height:1;letter-spacing:-.02em}
.stat span{display:block;margin-top:10px;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-dim)}
.proof__note{max-width:52ch;margin:0 auto;color:var(--bone-dim)}

/* ---------- SPLIT PANELS ---------- */
.panels{padding:0 var(--pad) clamp(40px,8vh,90px);display:grid;gap:clamp(60px,10vh,140px)}
.panel{display:grid;gap:clamp(26px,4vw,64px);align-items:center}
@media (min-width:900px){
  .panel{grid-template-columns:1.15fr .85fr}
  .panel--flip .panel__media{order:2}
}
.panel__media{margin:0;overflow:hidden;border-radius:2px}
.panel__media img{width:100%;height:clamp(300px,58vh,660px);object-fit:cover;
  transform:scale(1.14);will-change:transform}
.panel__body .eyebrow{margin-bottom:18px}
.panel__body h3{margin-bottom:16px}
.panel__body p{color:var(--bone-dim);max-width:38ch}

/* ---------- HORIZONTAL RAIL ---------- */
.rail{padding:clamp(90px,15vh,170px) 0;overflow:hidden}
.rail__head{padding:0 var(--pad);margin-bottom:clamp(30px,5vh,56px)}
.rail__head .eyebrow{margin-bottom:14px}
.rail__viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail__viewport::-webkit-scrollbar{display:none}
.rail__track{display:flex;gap:clamp(14px,2vw,26px);padding:0 var(--pad);width:max-content;
  will-change:transform}
.card{margin:0;width:clamp(230px,32vw,400px);flex:0 0 auto}
.card img{width:100%;height:clamp(300px,46vh,520px);object-fit:cover;border-radius:2px}
.card figcaption{margin-top:14px;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-dim)}

/* ---------- CTA ---------- */
.cta{position:relative;min-height:88svh;display:flex;align-items:center;overflow:hidden}
.cta__media{position:absolute;inset:-12% 0}
.cta__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.cta::after{content:"";position:absolute;inset:0;background:rgba(11,11,12,.66)}
.cta__inner{position:relative;z-index:2;padding:clamp(70px,12vh,130px) var(--pad);max-width:1100px}
.cta__inner > p{margin-top:22px;color:var(--bone-dim);max-width:32ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,5vh,48px)}


/* ---------- ENQUIRE ----------
   The shared form, tinted to this page. Structure lives in leadform.css. */
.lead{
  --lf-bg     : var(--bone);
  --lf-fg     : var(--ink);
  --lf-accent : var(--clay);
  --lf-line   : rgba(11,11,12,.18);
  --lf-muted  : rgba(11,11,12,.60);
}
.lead__btn{color:var(--bone)}