/* Coaches Corner Consulting — main site.
   Extends the resource-page language in landing/style.css: same ink ground,
   same gold gradient, same Montserrat. A visitor who lands on a keyword
   resource and clicks through should not feel a seam.

   Red is not in this palette. The resource pages allow it in exactly one
   place (the cross on a before-card) and nothing here is a before-card. */

:root{
  --gold:#C8A24B; --gold-deep:#9C7A2E; --gold-light:#F5D98B;
  --grad:linear-gradient(135deg,#F5D98B,#C8A24B 52%,#9C7A2E);
  --cream:#FAF8F3; --ink:#141414; --ink2:#0F0F0F; --ink3:#0C0C0C;
  --font:'Montserrat',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --line:rgba(250,248,243,.10); --line2:rgba(250,248,243,.18);
  --dim:rgba(250,248,243,.62); --faint:rgba(250,248,243,.42);
  --nav-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{margin:0;background:var(--ink);color:var(--cream);
  font:16px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
h1,h2,h3{margin:0}
p{margin:0 0 16px;max-width:68ch}
em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.shell{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:860px}

/* ── ambient ground ─────────────────────────────────────────────── */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 40% at 82% -6%,rgba(200,162,75,.16),transparent 62%),
             radial-gradient(44% 42% at -6% 42%,rgba(155,122,46,.10),transparent 60%)}
body>*{position:relative;z-index:1}

/* ── ascii ground ───────────────────────────────────────────
   The character field, painted by ascii-bg.js. It sits above the ambient
   wash (a ::before pseudo-element, so it paints first) and below every
   real child. The class is what keeps it there: the body>* rule above
   would otherwise lift it into the content layer.

   The vignette is a mask rather than a fade baked into the canvas, so the
   character alphas stay honest and only the edges soften. */

/* The travelling band of light. --wave is the band centre; registering it
   with @property is what makes it interpolatable, and therefore animatable
   at all — a plain custom property would jump between keyframes rather than
   sweep. It inherits so the mask on the child canvas picks it up.

   This runs on its own clock, not on scroll, and costs no shader redraw:
   the mask is composited, the WebGL frame underneath is untouched. */
@property --wave{syntax:"<percentage>";inherits:true;initial-value:50%}
@keyframes cc-wave{from{--wave:-35%}to{--wave:135%}}

/* ── dithered ground ────────────────────────────────────────
   The shader canvas Paper mounts inside this host. Same stacking as the
   grounds before it: above the ambient wash, below every real child. The
   host carries the vignette and the wave animation; the canvas carries the
   band mask, so the two masks multiply by nesting. */
.shader-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;contain:layout paint style;opacity:.09;--wave:50%;
  animation:cc-wave 4s linear infinite;
  -webkit-mask-image:radial-gradient(128% 112% at 50% 46%,#000 58%,transparent 100%);
  mask-image:radial-gradient(128% 112% at 50% 46%,#000 58%,transparent 100%)}
@media(prefers-reduced-motion:reduce){.shader-bg{animation:none}}
.shader-bg canvas{display:block;width:100%;height:100%;
  /* The travelling light band. The host carries the vignette; this carries
     the wave, so the two masks multiply naturally without needing
     mask-composite, which is the part browsers disagree about. --wave is
     the band centre and is written from shader-bg.js on every scroll. */
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.34) calc(var(--wave) - 27%),
    #000 var(--wave),
    rgba(0,0,0,.34) calc(var(--wave) + 27%),
    rgba(0,0,0,.34) 100%);
  mask-image:linear-gradient(180deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.34) calc(var(--wave) - 27%),
    #000 var(--wave),
    rgba(0,0,0,.34) calc(var(--wave) + 27%),
    rgba(0,0,0,.34) 100%)}
.ascii-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;contain:layout paint style;
  -webkit-mask-image:radial-gradient(118% 100% at 50% 45%,#000 42%,transparent 96%);
  mask-image:radial-gradient(118% 100% at 50% 45%,#000 42%,transparent 96%)}

/* ── nav ────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:60;background:rgba(20,20,20,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .shell{display:flex;align-items:center;gap:12px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;
  letter-spacing:.02em;color:var(--cream);font-size:15px}
.brand img{height:40px;width:auto}
.brand span{color:var(--gold)}
.nav{display:flex;gap:26px;margin-left:38px}
.nav a{color:var(--dim);font-size:14.5px;font-weight:500;position:relative;
  transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--cream)}
.nav a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:-6px;
  height:1.5px;background:var(--grad)}
.sp{flex:1}
.navcta{display:flex;align-items:center;gap:10px}

/* ── buttons ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--grad);color:#0F0F0F;font-weight:700;font-size:14.5px;
  padding:13px 26px;border-radius:999px;white-space:nowrap;border:0;cursor:pointer;
  position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;
  font-family:var(--font)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(200,162,75,.30)}
.btn::after{content:'';position:absolute;top:0;left:-135%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .6s ease}
.btn:hover::after{left:175%}
.btn-sm{padding:10px 20px;font-size:13.5px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line2);color:var(--cream);background:none;font-weight:600;
  padding:13px 26px;border-radius:999px;font-size:14.5px;white-space:nowrap;
  transition:border-color .2s,background .2s;font-family:var(--font);cursor:pointer}
.btn-ghost:hover{border-color:var(--gold-deep);background:rgba(250,248,243,.04)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}

/* ── shared section furniture ───────────────────────────────────── */
.section{padding:76px 0;border-bottom:1px solid var(--line)}
.section.tight{padding:52px 0}
.eyebrow{display:inline-block;font:600 10.5px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--line2);
  padding:8px 13px;border-radius:999px;margin-bottom:22px}
.slabel{font:600 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:15px}
h1{font-size:clamp(36px,5.6vw,62px);line-height:1.05;letter-spacing:-.022em;
  font-weight:800;margin-bottom:20px;max-width:15ch}
h2{font-size:clamp(27px,3.6vw,40px);line-height:1.14;letter-spacing:-.018em;
  font-weight:800;margin-bottom:16px;max-width:20ch}
h3{font-size:19px;font-weight:700;margin-bottom:9px}
.sub{font-size:19px;line-height:1.6;color:var(--dim);max-width:58ch}
.sub strong{color:var(--cream);font-weight:600}
.lead{font-size:17.5px;color:var(--dim);max-width:66ch;margin-bottom:30px}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{padding:86px 0 62px;border-bottom:1px solid var(--line)}
.qual{display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font:600 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint)}
.qual::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px rgba(200,162,75,.18)}

/* ── stat bar ───────────────────────────────────────────────────── */
.stats{display:flex;flex-wrap:wrap;gap:44px;margin-top:44px;padding-top:30px;
  border-top:1px solid var(--line)}
.stats b{display:block;font-size:31px;font-weight:800;line-height:1.1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.stats span{font:600 10px/1.6 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}

/* ── client logo strip ──────────────────────────────────────────── */
.strip{padding:34px 0;border-bottom:1px solid var(--line);overflow:hidden}
.strip-k{text-align:center;font:600 10px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:26px}
/* marquee lives in the scroll-craft section at the end of this file */

/* ── card grids ─────────────────────────────────────────────────── */
.grid{display:grid;gap:16px;margin-top:34px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line);border-radius:14px;padding:28px;
  background:rgba(250,248,243,.02);transition:border-color .3s,transform .3s,background .3s}
.card:hover{border-color:rgba(200,162,75,.42);transform:translateY(-3px);
  background:rgba(250,248,243,.035)}
.card p{color:var(--dim);font-size:15.5px;margin:0}
.card .k{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;display:block}

/* offer card — larger, with a list and its own cta */
.offer{border:1px solid var(--line);border-radius:16px;padding:34px 30px;
  background:rgba(250,248,243,.02);display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s}
.offer:hover{border-color:rgba(200,162,75,.45);transform:translateY(-3px)}
.offer h3{font-size:22px;margin-bottom:10px}
.offer .oi{color:var(--dim);font-size:15.5px;margin-bottom:20px}
.offer ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.offer li{position:relative;padding-left:24px;margin-bottom:11px;font-size:14.8px;
  color:var(--dim)}
.offer li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--grad)}
.offer .go{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;gap:8px;align-items:center;
  transition:gap .22s}
.offer:hover .go{gap:14px}

/* ── process timeline ───────────────────────────────────────────── */
.steps{margin-top:34px;display:grid;gap:0;border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.step{display:grid;grid-template-columns:78px 1fr;gap:22px;padding:26px 28px;
  border-bottom:1px solid var(--line);transition:background .3s}
.step:last-child{border-bottom:0}
.step:hover{background:rgba(250,248,243,.028)}
.step .n{font:800 30px/1 var(--font);background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{margin-bottom:7px}
.step p{margin:0;color:var(--dim);font-size:15.3px}

/* ── testimonial video cards ────────────────────────────────────── */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.vid{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--ink3);transition:border-color .3s,transform .3s}
.vid:hover{border-color:rgba(200,162,75,.45);transform:translateY(-3px)}
.vid .frame{position:relative;aspect-ratio:4/5;background:#000;cursor:pointer;
  overflow:hidden}
.vid .frame img,.vid .frame video{width:100%;height:100%;object-fit:cover;display:block}
.vid .frame video{position:absolute;inset:0}
.vid .play{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.55));
  transition:background .3s}
.vid .frame:hover .play{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.vid .play i{width:56px;height:56px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-style:normal;
  box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .25s}
.vid .frame:hover .play i{transform:scale(1.09)}
.vid .play i::after{content:'';border-left:15px solid #0F0F0F;
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  margin-left:4px}
.vid .who{padding:17px 19px;border-top:1px solid var(--line)}
.vid .who b{display:block;font-size:15.5px;font-weight:700}
.vid .who span{font:600 10.5px/1.6 var(--mono);letter-spacing:.1em;color:var(--faint)}
.vid .who em{float:right;font:600 10.5px/1.6 var(--mono);letter-spacing:.08em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}

/* ── proof screenshots ──────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--ink3);transition:border-color .3s,transform .3s}
.shot:hover{border-color:rgba(200,162,75,.42);transform:translateY(-3px)}
.shot img{width:100%;height:auto}

/* ── form ───────────────────────────────────────────────────────── */
.formwrap{border:1px solid rgba(200,162,75,.36);border-radius:16px;padding:14px;
  background:rgba(250,248,243,.02);max-width:860px;
  transition:border-color .3s,box-shadow .3s}
.formwrap:hover{border-color:rgba(200,162,75,.55);
  box-shadow:0 18px 46px rgba(0,0,0,.3),0 0 34px rgba(200,162,75,.07)}
.formwrap iframe{width:100%!important;display:block;border:0;border-radius:11px}
/* GHL's embed script resizes the iframe as the survey advances between steps;
   a fixed height here would crop later questions. */
.formwrap{min-height:0;overflow:visible}

/* ── faq ────────────────────────────────────────────────────────── */
.faq{margin-top:26px;max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:19px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-weight:400;font-size:21px;
  transition:transform .25s}
.faq details[open] summary::after{content:"–"}
.faq p{margin:13px 0 0;color:var(--dim);font-size:15.5px}

/* ── cta panel ──────────────────────────────────────────────────── */
.cta{padding:74px 0}
.ctapanel{background:var(--grad);color:#0F0F0F;border-radius:20px;padding:56px 48px;
  position:relative;overflow:hidden}
.ctapanel .slabel{color:rgba(15,15,15,.6)}
.ctapanel h2{color:#0F0F0F;max-width:18ch}
.ctapanel h2 em{background:none;-webkit-text-fill-color:#0F0F0F;color:#0F0F0F;
  text-decoration:underline;text-underline-offset:6px}
.ctapanel p{color:rgba(15,15,15,.76);max-width:54ch;margin-bottom:28px;font-size:17px}
.ctapanel .btn{background:#0F0F0F;color:var(--gold-light)}
.ctapanel .btn:hover{box-shadow:0 10px 26px rgba(0,0,0,.3)}
.ctapanel .qual{color:rgba(15,15,15,.6)}
.ctapanel .qual::before{background:#0F0F0F;box-shadow:0 0 0 3px rgba(15,15,15,.14)}

/* ── footer ─────────────────────────────────────────────────────── */
footer{padding:52px 0 66px;color:var(--faint);font-size:13.5px}
footer .cols{display:flex;flex-wrap:wrap;gap:46px;justify-content:space-between;
  padding-bottom:34px;border-bottom:1px solid var(--line);margin-bottom:26px}
footer h4{font:600 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);margin:0 0 15px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:9px}
footer li a{color:var(--dim);transition:color .2s}
footer li a:hover{color:var(--cream)}
footer .base{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  align-items:center;font:600 11px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase}

/* ── reveal ─────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1),transform .7s cubic-bezier(.16,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:5px}

/* ── responsive ─────────────────────────────────────────────────── */
@media(max-width:940px){
  .g3,.vids,.shots{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
}
@media(max-width:680px){
  .g2,.g3,.vids,.shots{grid-template-columns:1fr}
  .hero{padding:56px 0 46px}
  .section{padding:54px 0}
  .stats{gap:28px}
  .stats b{font-size:26px}
  .ctapanel{padding:38px 24px}
  .step{grid-template-columns:1fr;gap:8px;padding:22px}
  .brand img{height:30px}
  footer .cols{gap:30px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ════════════════════════════════════════════════════════════════════
   Scroll craft. Everything below is motion that responds to the reader
   rather than playing at them, and every piece degrades to a readable
   static page if it is switched off at the bottom of this file.
   ════════════════════════════════════════════════════════════════════ */

/* ── nav scroll progress ────────────────────────────────────────── */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform}
.topbar{transition:background .4s ease,box-shadow .4s ease}
.topbar.stuck{background:rgba(15,15,15,.93);box-shadow:0 10px 34px rgba(0,0,0,.34)}

/* ── hero headline, revealed by word ────────────────────────────── */
/* Word masks ship in the HTML from the build, so this animates on the first
   frame with no script involved. padding/margin pair keeps descenders (the g
   in "coaching") from being clipped by the mask. */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.12em;margin-bottom:-.12em}
.w > span{display:inline-block;
  animation:wordin .58s cubic-bezier(.16,.85,.3,1) both;
  animation-delay:calc(var(--w,0)*32ms)}
@keyframes wordin{from{transform:translateY(105%)}to{transform:none}}

/* Each word animates with a transform, which paints it as its own layer. A
   background-clip:text gradient on an ancestor <em> never reaches those
   glyphs — the mask comes out empty and the words render invisible. Paint
   the gradient on the spans that actually carry the text instead. */
h1 em{background:none;color:inherit}
h1 em .w > span{background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}

/* ── staggered groups ───────────────────────────────────────────── */
.stagger > *{opacity:0;transform:translateY(20px);
  transition:opacity .72s cubic-bezier(.16,.8,.3,1),transform .72s cubic-bezier(.16,.8,.3,1);
  transition-delay:calc(var(--i,0)*72ms)}
.stagger.in > *{opacity:1;transform:none}

/* ── cards track the pointer ────────────────────────────────────── */
.card,.offer,.vid,.shot{position:relative;isolation:isolate}
.card::before,.offer::before,.vid::before{content:'';position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    rgba(200,162,75,.16),transparent 68%)}
.card:hover::before,.offer:hover::before,.vid:hover::before{opacity:1}

/* ── process steps light up as they pass ────────────────────────── */
.step{position:relative}
.step::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--grad);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s cubic-bezier(.16,.8,.3,1)}
.step.on::before{transform:scaleY(1)}
.step .n{transition:opacity .45s ease,filter .45s ease;opacity:.4}
.step.on .n{opacity:1}
.step.on{background:rgba(250,248,243,.03)}

/* ── stat counters ──────────────────────────────────────────────── */
.stats b{font-variant-numeric:tabular-nums}

/* ── logo marquee, rebuilt ──────────────────────────────────────────
   Two identical sets side by side. The track is translated by half its
   own width MINUS half the gap that sits between the sets — without
   that correction the loop restarts a half-gap out of step and visibly
   stutters once per cycle. Speed is nudged by scroll velocity, so the
   strip feels attached to the page rather than looping past it. */
.strip{--gap:66px}
.marquee{display:flex;gap:var(--gap);width:max-content;
  animation:slide 42s linear infinite;
  animation-play-state:var(--play,running);will-change:transform}
.mq-set{display:flex;gap:var(--gap);align-items:center;
  list-style:none;margin:0;padding:0}
.mq-set li{display:flex;align-items:center;justify-content:center;height:46px}
.mq-set img{height:auto;width:auto;max-height:46px;max-width:172px;
  object-fit:contain;opacity:.46;transition:opacity .32s ease,transform .32s ease;
  filter:none}
.mq-set li:hover img{opacity:1;transform:scale(1.06)}
.strip:hover .marquee{--play:paused}
@keyframes slide{to{transform:translateX(calc(-50% - (var(--gap) / 2)))}}

/* ── testimonial card meta ──────────────────────────────────────── */
.vid .who em{float:none;display:block;margin-top:3px;font:600 10.5px/1.5 var(--mono);
  letter-spacing:.08em;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.vid .who .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}

/* ── ambient parallax ───────────────────────────────────────────── */
body::before{transform:translate3d(0,var(--par,0px),0);will-change:transform}

@media(prefers-reduced-motion:reduce){
  .marquee{animation:none;gap:calc(var(--gap) * .8)}
  .mq-set:nth-child(2){display:none}
  .stagger > *{opacity:1;transform:none;transition:none}
  .w > span{animation:none;transform:none}
  .progress{display:none}
  body::before{transform:none}
}

/* ════════════════════════════════════════════════════════════════════
   Pinned build sequence
   Four viewports of scroll spent inside one sticky stage. The height of
   .pin is what buys the scroll distance; the stage itself never moves.
   ════════════════════════════════════════════════════════════════════ */
.pin{height:440vh;position:relative;border-bottom:1px solid var(--line)}
.pin-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;
  overflow:hidden}
.pin-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:54px;align-items:center;width:100%}

/* copy column: all four steps stacked, only the live one visible */
.pin-copy{position:relative}
.pin-steps{position:relative;min-height:250px}
.pin-step{position:absolute;inset:0;opacity:0;transform:translateY(26px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,.8,.3,1);
  pointer-events:none}
.pin-step.on{opacity:1;transform:none;pointer-events:auto}
.pin-step h2{font-size:clamp(28px,3.7vw,46px);margin-bottom:16px;max-width:15ch}
.pin-step p{font-size:17.5px;color:var(--dim);max-width:44ch;margin:0}

/* progress rail: four ticks, filled to the live step */
.pin-rail{display:flex;gap:8px;margin-top:38px}
.pin-rail i{width:52px;height:3px;border-radius:2px;background:var(--line2);
  position:relative;overflow:hidden}
.pin-rail i::after{content:'';position:absolute;inset:0;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s ease}
.pin-rail i.on::after{transform:scaleX(1)}

/* the stage */
.pin-vis{position:relative}
.pin-vis svg{width:100%;height:auto;display:block;overflow:visible}
.edge{stroke-dasharray:1;stroke-dashoffset:1}
.node{opacity:0;transform-box:fill-box;transform-origin:50% 50%;
  transform:scale(.9);
  transition:opacity .45s ease,transform .55s cubic-bezier(.16,.85,.3,1)}
.node.on{opacity:1;transform:none}
.node rect,.node circle{fill:rgba(250,248,243,.03);stroke:rgba(200,162,75,.55);
  stroke-width:1.5;transition:fill .4s ease,stroke .4s ease}
.node.on rect,.node.on circle{fill:rgba(200,162,75,.07)}
.node.hot rect,.node.hot circle{fill:rgba(200,162,75,.16);stroke:var(--gold-light)}
.node text{fill:var(--cream);font:600 12.5px/1 var(--mono);letter-spacing:.14em;
  text-anchor:middle;dominant-baseline:middle}
.node.hub text{font:800 26px/1 var(--font);letter-spacing:.04em;
  fill:var(--gold-light)}
.node.hub text.sm{font:600 9.5px/1 var(--mono);letter-spacing:.22em;
  fill:var(--faint)}
.node.hub circle{filter:url(#glow)}
.pulse{opacity:0;transition:opacity .4s ease}
.pulse.on{opacity:.95}

/* ── full-width statement ───────────────────────────────────────────
   One line, very large, scaled and lifted by its own distance from the
   centre of the viewport. Apple uses these as punctuation between
   product sections; the job here is the same. */
.statement{padding:22vh 0;text-align:center;border-bottom:1px solid var(--line);
  overflow:hidden}
.statement h2{font-size:clamp(34px,7vw,88px);line-height:1.02;letter-spacing:-.03em;
  max-width:none;margin:0 auto;max-inline-size:16ch;
  transform:scale(var(--s,1)) translateY(var(--ty,0px));
  opacity:var(--o,1);will-change:transform}
.statement .sm{display:block;margin-top:26px;font:600 11px/1 var(--mono);
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}

@media(max-width:940px){
  .pin{height:auto}
  .pin-stage{position:static;height:auto;padding:64px 0}
  .pin-grid{grid-template-columns:1fr;gap:38px}
  .pin-steps{position:static;min-height:0}
  .pin-step{position:static;opacity:1;transform:none;margin-bottom:34px}
  .pin-rail{display:none}
  .edge{stroke-dashoffset:0}
  .node{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .pin{height:auto}
  .pin-stage{position:static;height:auto;padding:56px 0}
  .pin-step{position:static;opacity:1;transform:none;margin-bottom:30px}
  .pin-steps{position:static;min-height:0}
  .edge{stroke-dashoffset:0}
  .node{opacity:1;transform:none}
  .statement h2{transform:none;opacity:1}
}