/* =========================================================
   Dom | One on One Coaching
   Palette: near-black canvas, graphite surfaces, white type,
            a dark crimson used sparingly.

   Forked from the FushiFit (Ty) build and rewritten for a darker,
   Berserk-leaning look: heavier blacks, an ink grain over the
   whole page, sharp corners, a serif display face, and red that
   shows up as a cut rather than a fill. The red is dark enough to
   carry white type, so accent fills take --text, not a dark ink.

   Every translucent accent goes through the -rgb tokens, so a
   retheme is the :root block and nothing else.
   ========================================================= */

:root{
  /* --- canvas --- */
  --bg:         #070708;
  --bg-alt:     #0c0c0e;
  --surface:    #111113;
  --surface-2:  #17171a;
  --line:       rgba(255,255,255,.08);
  --line-2:     rgba(255,255,255,.15);

  /* --- type --- */
  --text:       #ededec;
  --muted:      #9d9d9f;
  --muted-2:    #67676b;

  /* --- red --- */
  --accent-rgb:    170,26,36;
  --accent-hi-rgb: 214,44,56;

  --accent:        #aa1a24;  /* rules, icons, small display type */
  --accent-hi:     #d62c38;  /* hover, eyebrows (5.2:1 on bg) */
  --accent-btn:    #9c1620;  /* button fill, white on it is 7.4:1 */
  --accent-btn-hi: #b51b27;
  --accent-ink:    #ffffff;  /* type sitting ON an accent fill */
  --accent-deep:   #3a0a0e;
  --accent-dim:    rgba(var(--accent-rgb),.10);
  --accent-line:   rgba(var(--accent-rgb),.38);

  /* Shine stops for the roaming highlight on accent text. */
  --accent-mid:    #e2545e;
  --accent-peak:   #f3c9cc;

  /* Form errors. The accent IS red here, so errors get a brighter,
     more orange red than the brand one, plus the icon, so they still
     read as a problem and not as decoration. */
  --warn:          #ff6a5c;

  /* --- fonts --- */
  --display: "Cinzel", "Times New Roman", Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --nav-h: 79px;
  --wrap: 1180px;
  --r:    3px;

  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
  background:var(--bg);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Ink grain over everything. A fixed layer of monochrome noise at a few
   percent, multiplied so it only ever darkens. It is what stops the flat
   blacks reading as a screen and makes them read as paper and ink. Not
   animated: a moving grain repaints the whole viewport every frame. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:998;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.05;
  letter-spacing:.01em;
  margin:0;
  color:var(--text);
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent-btn); color:var(--accent-ink); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1200;
  background:var(--accent-btn); color:var(--accent-ink); padding:12px 20px; font-weight:600;
}
.skip-link:focus{ left:0; }

/* Separator glyph. A small slanted red cut, never a dash or a dot. */
.sep{
  display:inline-block;
  width:7px; height:1.5px;
  margin:0 .55em;
  vertical-align:middle;
  background:var(--accent);
  transform:rotate(-58deg);
  opacity:.9;
}

/* =============== SHARED BITS =============== */

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-hi);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:30px; height:1px;
  background:var(--accent);
  flex:none;
  transform:skewX(-30deg);
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{
  content:"";
  width:30px; height:1px;
  background:var(--accent);
  flex:none;
  transform:skewX(-30deg);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:15px 28px;
  border-radius:var(--r);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease),
             transform .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  text-align:center;
  line-height:1.2;
}
.btn:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:3px; }

.btn--primary{
  background:var(--accent-btn);
  color:var(--accent-ink);
  border-color:rgba(255,255,255,.08);
}
.btn--primary:hover{ background:var(--accent-btn-hi); transform:translateY(-1px); }

.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--line-2);
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--text); }

.btn--lg{ padding:18px 34px; font-size:14.5px; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none; }

.section{ padding:clamp(72px,10vw,128px) 0; position:relative; }
.section--alt{ background:var(--bg-alt); }
/* A hairline between sections, cut short and slanted at the ends so it
   reads as a rule someone drew rather than a CSS border. */
.section--alt::before,
.section--alt::after{
  content:"";
  position:absolute; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}
.section--alt::before{ top:0; }
.section--alt::after{ bottom:0; }

.section__head{ max-width:760px; margin:0 0 56px; }
.section__head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section__title{
  font-size:clamp(30px,4.2vw,50px);
  text-transform:uppercase;
  letter-spacing:.015em;
}
.section__lede{
  color:var(--muted);
  font-size:clamp(17px,1.7vw,19px);
  margin-top:20px;
  max-width:62ch;
}
.section__head--center .section__lede{ margin-left:auto; margin-right:auto; }

/* --- reveal on scroll ---
   .reveal lifts in. .reveal-wipe is for headings: the text is uncovered
   along a slanted edge, left to right, like something being cut open.
   A heading inside a .reveal parent waits for the parent to enter. */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

.reveal-wipe{
  clip-path:polygon(0 0, 0 0, -12% 100%, -12% 100%);
  transition:clip-path .9s cubic-bezier(.65,0,.2,1);
}
.reveal-wipe.is-in,
.reveal.is-in .reveal-wipe{
  clip-path:polygon(0 0, 112% 0, 100% 100%, -12% 100%);
}

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .reveal-wipe{ clip-path:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =============== INTRO ===============
   Self-terminating: the CSS animation hides the overlay on its own at
   3.15s, so a blocked script can never leave a visitor staring at it.

   Timeline: ring draws 0.1 to 1.2s, name settles in at 0.9s, red cut
   through the name at 1.3s, role at 1.5s, ring blooms at 2.3s, fade from
   2.5s. */

.intro{
  position:fixed; inset:0; z-index:999;
  display:grid; place-items:center;
  padding:24px;
  overflow:hidden;
  background:
    radial-gradient(50% 45% at 50% 50%, rgba(var(--accent-rgb),.10), transparent 70%),
    var(--bg);
  animation:introAuto 3.15s linear forwards;
}
.intro.gone{ display:none; }
@keyframes introAuto{
  0%,80%{ opacity:1; }
  100%{ opacity:0; visibility:hidden; pointer-events:none; }
}

.intro__inner{ text-align:center; }

.intro__ring{
  position:relative;
  width:clamp(220px, 44vw, 360px);
  height:clamp(220px, 44vw, 360px);
  margin:0 auto;
  display:grid; place-items:center;
  animation:ringBloom 3.15s linear forwards;
  border-radius:50%;
}
.intro__ring svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform:rotate(-90deg);
  overflow:visible;
}
/* 2 * pi * 92 = 578. The dash is the full circumference, offset to hide
   it, and the offset is animated to zero so the ring draws clockwise from
   the top. */
.intro__arc{
  fill:none;
  stroke:#fff6ef;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:578;
  stroke-dashoffset:578;
  animation:drawRing 1.1s cubic-bezier(.65,0,.2,1) .1s forwards;
}
.intro__arc--soft{
  stroke:rgba(var(--accent-hi-rgb),.7);
  stroke-width:9;
  filter:blur(7px);
}
@keyframes drawRing{ to{ stroke-dashoffset:0; } }

/* The bloom at the end: the ring flares red for a beat before the fade. */
@keyframes ringBloom{
  0%,70%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),0); }
  78%{ box-shadow:0 0 60px 6px rgba(var(--accent-rgb),.35), inset 0 0 50px rgba(var(--accent-rgb),.25); }
  100%{ box-shadow:0 0 90px 10px rgba(var(--accent-rgb),.0), inset 0 0 60px rgba(var(--accent-rgb),0); }
}

.intro__name{
  position:relative;
  font-family:var(--display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding-left:.14em;   /* balance the trailing tracking */
  line-height:1;
  font-size:clamp(56px,11vw,112px);
  color:var(--text);
  opacity:0;
  transform:scale(.92);
  animation:nameIn .8s cubic-bezier(.16,.84,.34,1) .9s forwards;
}
@keyframes nameIn{ to{ opacity:1; transform:none; } }

/* A red cut sweeping across the name, left to right, like a blade pass. */
.intro__cut{
  position:absolute;
  left:18%; right:18%;
  top:50%;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-hi) 30%, var(--accent-peak) 50%, var(--accent-hi) 70%, transparent);
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;
  opacity:0;
  animation:cutIn .55s cubic-bezier(.65,0,.2,1) 1.3s forwards, cutOut .4s ease-out 1.85s forwards;
  pointer-events:none;
  mix-blend-mode:screen;
}
@keyframes cutIn{ 0%{ opacity:1; transform:translateY(-50%) scaleX(0); } 100%{ opacity:1; transform:translateY(-50%) scaleX(1); } }
@keyframes cutOut{ to{ opacity:0; } }

.intro__role{
  margin:26px 0 0;
  font-family:var(--sans);
  font-size:clamp(10px,1.3vw,13px);
  font-weight:600;
  letter-spacing:.42em;
  padding-left:.42em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:0;
  animation:riseIn .7s var(--ease) 1.5s forwards;
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .intro{ display:none; }
}

/* =============== NAV =============== */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,7,8,.86);
  backdrop-filter:saturate(120%) blur(14px);
  -webkit-backdrop-filter:saturate(120%) blur(14px);
  border-bottom-color:var(--line);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:var(--nav-h);
}
.brand{
  font-family:var(--display);
  font-weight:900;
  font-size:19px;
  letter-spacing:.2em;
  text-transform:uppercase;
  display:inline-flex; align-items:baseline;
}
/* The mark after the name is a small red diamond, the same shape as the
   rail nodes, rather than a full stop. */
.brand em{
  display:inline-block;
  width:.34em; height:.34em;
  margin-left:.28em;
  background:var(--accent-hi);
  transform:rotate(45deg) translateY(-.08em);
  flex:none;
}
.brand--sm{ font-size:15px; }

.nav__links{ display:flex; align-items:center; gap:32px; }
.nav__links a{
  font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  transition:color .2s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav .btn{ padding:11px 20px; font-size:12.5px; }
/* `.nav__links a` beats `.btn--primary` on specificity and would paint the
   Apply label gray on its own fill. Re-assert the ink. */
.nav__links a.btn--primary{ color:var(--accent-ink); }
.nav__links a.btn--primary:hover{ color:var(--accent-ink); }

.nav__toggle{
  display:none; background:none; border:0; color:var(--text);
  padding:8px; cursor:pointer;
}

@media (max-width:900px){
  .nav__links{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(7,7,8,.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:12px 28px 26px;
    transform:translateY(-12px);
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav__links.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav__links a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:14px; }
  .nav__links .btn{ margin-top:18px; justify-content:center; }
  .nav__toggle{ display:block; }
}

/* =============== SECTION RAIL ===============
   Spine down the left edge with a dot per section. Same mechanics as the
   FushiFit build: the fill is interpolated between dots in main.js, and
   below 1440px the label flashes on section change instead of staying. */

.rail{
  --rail-top: calc(var(--nav-h) + 18px);
  --rail-bottom: 34px;
  --dot: 11px;
  position:fixed;
  left:clamp(10px, 1.1vw, 14px);
  top:0; bottom:0;
  z-index:90;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:var(--rail-top) 0 var(--rail-bottom);
  pointer-events:none;
}
.rail__track{
  position:absolute;
  left:calc(var(--dot) / 2);
  top:calc(var(--rail-top) + var(--dot) / 2);
  bottom:calc(var(--rail-bottom) + var(--dot) / 2);
  width:1px;
  background:var(--line-2);
}
.rail__fill{
  position:absolute; left:0; top:0;
  width:1px; height:0;
  background:var(--accent-hi);
  box-shadow:0 0 8px rgba(var(--accent-rgb),.6);
}
.rail__item{
  position:relative;
  display:flex; align-items:center;
  height:var(--dot);
  cursor:pointer;
  pointer-events:auto;
  width:max-content;
}
.rail__dot{
  flex:none;
  width:var(--dot); height:var(--dot);
  /* A rotated square, not a circle. */
  transform:rotate(45deg) scale(.8);
  border:1px solid var(--line-2);
  background:var(--bg);
  position:relative; z-index:1;
  transition:border-color .3s var(--ease), background .3s var(--ease),
             box-shadow .3s var(--ease), transform .3s var(--ease);
}
.rail__label{
  font-family:var(--sans);
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2);
  white-space:nowrap;
  opacity:0;
  transform:translateX(-4px);
  text-shadow:0 0 6px rgba(7,7,8,.95), 0 0 14px rgba(7,7,8,.85);
  transition:opacity .32s var(--ease), transform .32s var(--ease), color .32s var(--ease);
}
.rail__label::before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:0; height:1px;
  margin-right:0;
  background:var(--accent);
  transition:width .32s var(--ease), margin-right .32s var(--ease);
}
.rail__item:hover .rail__dot{ border-color:var(--accent); transform:rotate(45deg) scale(.95); }
.rail__item:hover .rail__label{ opacity:1; transform:none; color:var(--muted); }
.rail__item:hover .rail__label::before{ width:12px; margin-right:8px; }
.rail__item.is-on .rail__dot{
  border-color:var(--accent-hi);
  background:var(--accent-hi);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16), 0 0 12px rgba(var(--accent-rgb),.55);
}
.rail__item.is-on .rail__label{ opacity:1; transform:none; color:var(--text); }
.rail__item.is-on .rail__label::before{ width:14px; margin-right:9px; }
.rail__item:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:6px; }

@media (max-width:1439px){
  .rail__item.is-on .rail__label{ opacity:0; transform:translateX(-4px); }
  .rail.is-flash .rail__item.is-on .rail__label{ opacity:1; transform:none; }
  .rail__item:hover .rail__label{ opacity:1; transform:none; }
}
@media (max-width:720px){
  .rail{ --dot:9px; --rail-bottom:26px; }
  .rail__label{ font-size:9.5px; letter-spacing:.1em; }
}
@media (prefers-reduced-motion:reduce){
  .rail__dot, .rail__label, .rail__label::before{ transition:none; }
}

/* =============== HERO ===============
   Copy left, Dom's clip bled off the right edge, masked into the page and
   faded top and bottom so the headline can run behind him. Legibility is
   carried by three things together: the mask on the figure, the scrim
   across the section, and the pool of black under the copy. */

.hero{
  position:relative;
  min-height:min(94vh, 960px);
  display:flex;
  align-items:flex-end;
  padding:calc(var(--nav-h) + 24px) 0 clamp(64px,8vh,110px);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(90% 70% at 78% 30%, rgba(var(--accent-rgb),.13), transparent 60%),
    linear-gradient(180deg, #0d0d0f 0%, var(--bg) 70%);
}

.hero__figure{
  position:absolute;
  top:0; right:0; bottom:0;
  /* The clip is portrait 9:16, so it needs less width than Ty's near
     square footage did to fill the height. */
  width:min(52%, 760px);
  margin:0;
  z-index:4;
  pointer-events:none;
  background:url("/assets/video/hero-poster.jpg?v=3") center 10% / cover no-repeat;
  /* Two masks intersected: a long left-to-right ramp so the clip dissolves
     into the copy column, and a vertical one so the top and bottom edges go
     too. Dom's footage is a lit gym with pale walls, so the ramps are far
     longer than they were for the dark studio clip: at 14% alpha a pale
     wall still reads as an edge. */
  -webkit-mask-image:
    linear-gradient(100deg, transparent 8%, rgba(0,0,0,.08) 22%, rgba(0,0,0,.35) 42%, rgba(0,0,0,.8) 62%, #000 78%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 9%, #000 20%, #000 64%, rgba(0,0,0,.55) 82%, transparent 100%);
          mask-image:
    linear-gradient(100deg, transparent 8%, rgba(0,0,0,.08) 22%, rgba(0,0,0,.35) 42%, rgba(0,0,0,.8) 62%, #000 78%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 9%, #000 20%, #000 64%, rgba(0,0,0,.55) 82%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  will-change:transform;
}
.hero__figure video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 10%;
  display:block;
  filter:contrast(1.1) saturate(.7) brightness(.78);
}
.hero__figure::after{
  content:"";
  position:absolute; inset:0;
  background:
    /* vignette: pulls every edge of the clip down toward the page */
    radial-gradient(75% 65% at 55% 45%, transparent 35%, rgba(7,7,8,.62) 100%),
    /* a faint cast of the brand red over the pale gym */
    linear-gradient(180deg, rgba(170,26,36,.10), rgba(170,26,36,.04) 60%, transparent),
    linear-gradient(180deg,
      rgba(7,7,8,.8) 0%,
      rgba(7,7,8,.18) 10%,
      transparent 24%,
      transparent 60%,
      rgba(7,7,8,.55) 84%,
      var(--bg) 100%);
}
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(90deg, rgba(7,7,8,.97) 0%, rgba(7,7,8,.9) 36%, rgba(7,7,8,.35) 58%, transparent 76%),
    linear-gradient(180deg, rgba(7,7,8,.5) 0%, transparent 28%, rgba(7,7,8,.65) 100%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:3; width:100%; }
.hero__grid{ display:block; }
.hero__copy{
  position:relative;
  max-width:min(58%, 660px);
}
.hero__copy::before{
  content:"";
  position:absolute; z-index:-1;
  left:-40px; right:-90px; top:-56px; bottom:-40px;
  background:radial-gradient(74% 78% at 30% 50%,
    rgba(7,7,8,.94) 0%,
    rgba(7,7,8,.76) 48%,
    rgba(7,7,8,.42) 72%,
    transparent 90%);
  pointer-events:none;
}

.hero__title{
  font-size:clamp(38px,5vw,66px);
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1;
}
.hero__title span{ display:block; color:var(--accent-hi); font-size:.72em; margin-top:.18em; }
.hero__title, .hero__title span{ text-wrap:balance; }

.hero__sub{
  color:var(--muted);
  font-size:clamp(17px,1.9vw,20px);
  max-width:36ch;
  margin:28px 0 0;
  line-height:1.62;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; width:fit-content; max-width:100%; }

.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px;
  margin-top:40px;
  max-width:440px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); font-weight:500;
}
/* nowrap: each item is a flex row of text and .sep cuts, and without it a
   narrow screen breaks "Check-Ins" at the hyphen. The row wraps between
   items instead. */
.hero__meta > span{ display:flex; align-items:center; gap:9px; white-space:nowrap; }
.hero__meta > span::before{
  content:""; width:5px; height:5px;
  background:var(--accent); flex:none;
  transform:rotate(45deg);
}

/* Scroll cue. A short line that keeps dropping down its own track. */
.hero__scroll{
  position:absolute; left:50%; bottom:22px; z-index:5;
  width:1px; height:44px;
  transform:translateX(-50%);
  background:var(--line-2);
  overflow:hidden;
}
.hero__scroll span{
  position:absolute; left:0; top:0;
  width:1px; height:18px;
  background:var(--accent-hi);
  animation:cue 1.9s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-20px); }
  100%{ transform:translateY(48px); }
}

@media (max-width:900px){
  .hero{ padding-top:calc(var(--nav-h) + clamp(170px,46vw,290px)); }
  .hero__figure{
    width:100%;
    bottom:auto;
    height:clamp(340px,72vw,500px);
    -webkit-mask-image:
      linear-gradient(180deg, #000 40%, rgba(0,0,0,.4) 70%, transparent 96%),
      linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image:
      linear-gradient(180deg, #000 40%, rgba(0,0,0,.4) 70%, transparent 96%),
      linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-composite:intersect;
  }
  .hero__figure video{ object-position:center 4%; }
  .hero__figure::after{
    background:linear-gradient(180deg,
      rgba(7,7,8,.5) 0%,
      rgba(7,7,8,.1) 22%,
      rgba(7,7,8,.42) 70%,
      var(--bg) 97%);
  }
  .hero__scrim{
    background:linear-gradient(180deg, rgba(7,7,8,.4) 0%, transparent 24%, rgba(7,7,8,.45) 60%, rgba(7,7,8,.9) 100%);
  }
  .hero__copy{ max-width:none; }
  .hero__copy::before{
    left:-28px; right:-28px; top:-140px; bottom:-24px;
    background:linear-gradient(180deg,
      transparent 0,
      rgba(7,7,8,.5) 70px,
      rgba(7,7,8,.9) 140px,
      rgba(7,7,8,.9) 52%,
      transparent 94%);
  }
  .hero__scroll{ display:none; }
}
@media (max-width:720px){
  .hero .eyebrow::before{ display:none; }
  .hero .eyebrow{ font-size:11px; letter-spacing:.14em; }
  .hero__title{ font-size:38px; }
  .hero__actions .btn{ flex:1 1 100%; justify-content:center; }
  .footer__links a{ padding:9px 0; }
}

/* =============== FOLLOW =============== */

.follow{
  padding:clamp(30px,4vw,44px) 0;
  background:
    radial-gradient(58% 130% at 50% 50%, rgba(var(--accent-rgb),.08), transparent 70%),
    var(--bg);
}
.follow__inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:16px 32px;
}
.follow__label{
  margin:0;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-2);
}
.follow__links{ display:flex; flex-wrap:wrap; gap:14px; }
.follow__btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:13px 24px;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  background:var(--surface);
  color:var(--text);
  font-size:15px; font-weight:600; letter-spacing:.01em;
  transition:border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.follow__btn:hover{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.12), var(--surface));
  transform:translateY(-2px);
}
.follow__btn:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:3px; }
.follow__btn svg{ width:19px; height:19px; flex:none; color:var(--accent-hi); }
.follow__net{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2);
  padding-left:12px;
  border-left:1px solid var(--line);
}
@media (max-width:560px){
  .follow__links{ width:100%; flex-direction:column; }
  .follow__btn{ justify-content:center; padding:15px 22px; }
}

/* =============== TICKER ===============
   Outlined display type in one long line. main.js sets --tx from the
   scroll position, so it slides as the page moves and stops when it stops.
   The span is cloned in script until the track is wider than the viewport
   twice over. */

.ticker{
  overflow:hidden;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-alt);
}
.ticker__track{
  display:flex;
  width:max-content;
  transform:translate3d(var(--tx, 0px), 0, 0);
  will-change:transform;
}
.ticker__track span{
  flex:none;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(34px,6vw,84px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.28);
  padding-right:.4em;
}
.ticker__track .sep{ width:.28em; height:2px; margin:0 .1em; vertical-align:middle; opacity:.9; }
@media (prefers-reduced-motion:reduce){
  .ticker__track{ transform:none; }
}

/* =============== CLIPS =============== */

.clips__grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:14px;
}
.clip{
  position:relative;
  display:block;
  margin:0;
  aspect-ratio:9/16;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  /* Black outline that sharpens on hover, plus the lift. */
  box-shadow:0 0 0 1px rgba(0,0,0,.8);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.clip video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.85) contrast(1.04);
  transition:filter .4s var(--ease), transform .6s var(--ease);
}
.clip::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(7,7,8,.92) 100%);
  pointer-events:none;
}
.clip:hover{ transform:translateY(-4px); border-color:var(--accent-line); }
.clip:hover video{ filter:saturate(1) contrast(1.04); transform:scale(1.03); }
.clip:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:3px; }

/* Speaker toggle. One clip has sound at a time; main.js mutes the rest. */
.clip__sound{
  position:absolute; top:10px; right:10px; z-index:3;
  width:32px; height:32px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r);
  background:rgba(7,7,8,.72) no-repeat center / 16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ededec' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h4l5 4V6L8 10H4z'/%3E%3Cpath d='M17 8l4 8M21 8l-4 8'/%3E%3C/svg%3E");
  cursor:pointer;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.clip__sound:hover{ border-color:var(--accent-hi); }
.clip__sound:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:2px; }
.clip__sound.is-on{
  border-color:var(--accent-hi);
  background-color:rgba(156,22,32,.85);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h4l5 4V6L8 10H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E");
}
.clip__cap{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  display:flex; flex-direction:column; gap:2px;
}
.clip__cap b{
  font-family:var(--display);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
  line-height:1.25;
}
.clip__cap small{ font-size:11px; color:var(--muted); line-height:1.4; }

/* Stagger the grid in. Delays are set from main.js by index. */
.clips__hint{
  margin:22px 0 0;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600;
}

@media (max-width:1100px){
  .clips__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:560px){
  .clips__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .clip__cap{ left:9px; right:9px; bottom:9px; }
}

/* =============== FIT =============== */

.fit__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
}
.fit__card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:36px 32px;
  position:relative;
}
.fit__card--yes{
  border-color:var(--accent-line);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.07), var(--surface) 60%);
}
/* A red cut in the top left corner of the yes card. */
.fit__card--yes::before{
  content:"";
  position:absolute; top:-1px; left:-1px;
  width:38px; height:38px;
  background:linear-gradient(135deg, var(--accent) 0 50%, transparent 50%);
  opacity:.9;
}
.fit__card h3{
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 24px; color:var(--muted-2); font-weight:600;
  font-family:var(--sans);
}
.fit__card--yes h3{ color:var(--accent-hi); }
.fit__list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.fit__list li{
  display:flex; gap:14px; align-items:flex-start;
  color:var(--muted); font-size:16px; line-height:1.55;
}
.fit__list li::before{
  content:""; flex:none; width:18px; height:18px; margin-top:4px;
  border:1.5px solid var(--line-2);
  background:no-repeat center/10px 10px;
}
.fit__card--yes .fit__list li::before{
  border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.6 9 10 3.2' fill='none' stroke='%23d62c38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fit__card--no .fit__list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 3.2 8.8 8.8M8.8 3.2 3.2 8.8' fill='none' stroke='%2367676b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* =============== PILLARS =============== */

.pillars{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.pillar{
  background:var(--bg);
  padding:44px 34px;
  position:relative;
  transition:background .3s var(--ease);
}
.pillar:hover{ background:var(--surface); }
/* Red rule that grows across the top on hover. */
.pillar::before{
  content:"";
  position:absolute; top:0; left:0;
  height:2px; width:0;
  background:var(--accent);
  transition:width .45s var(--ease);
}
.pillar:hover::before{ width:100%; }
.pillar__num{
  font-family:var(--display);
  font-size:13px; font-weight:800; letter-spacing:.16em;
  color:var(--accent-hi);
  display:block; margin-bottom:22px;
}
.pillar h3{
  font-size:clamp(22px,2.4vw,28px);
  text-transform:uppercase;
  margin-bottom:16px;
}
.pillar p{ color:var(--muted); font-size:16px; margin:0; }

@media (max-width:880px){
  .pillars{ grid-template-columns:1fr; }
}

/* =============== TESTIMONIAL CAROUSEL ===============
   A real scroll container that also drifts. main.js clones the set until
   the track fills the viewport, measures one set width into --mq-shift and
   wraps scrollLeft there, so the loop is seamless at any width. */

.tm{
  position:relative;
  margin-top:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:auto;
  padding:5px 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.tm::-webkit-scrollbar{ display:none; }
.tm.is-dragging{ cursor:grabbing; }

.tm__track{ display:flex; gap:20px; width:max-content; }
.tm__set{ display:flex; gap:20px; }

.tm__card{
  flex:none;
  width:clamp(232px, 25vw, 288px);
  display:flex; flex-direction:column;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  padding:0;
  cursor:pointer;
  font:inherit; color:inherit;
  position:relative;
  transition:border-color .28s var(--ease), transform .28s var(--ease);
}
.tm__card:hover{ border-color:var(--accent-line); transform:translateY(-3px); }
.tm.is-dragging .tm__card{ cursor:grabbing; }
.tm__card:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:3px; }

/* Says out loud that the content is invented. Delete with the sample data. */
.tm__flag{
  position:absolute; top:10px; right:10px; z-index:2;
  font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  background:rgba(7,7,8,.8);
  border:1px solid var(--line-2);
  padding:4px 9px;
}
.tm__media{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3;
  border-bottom:1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #1a1a1d, #0e0e10);
}
.tm__media img{ width:100%; height:100%; object-fit:cover; }
.tm__ph{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600; text-align:center; padding:0 14px;
}
.tm__body{ display:flex; flex-direction:column; gap:12px; padding:20px 20px 22px; flex:1; }
.tm__stat{
  font-family:var(--display);
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-hi);
  line-height:1.35;
}
.tm__quote{ color:var(--muted); font-size:14.5px; line-height:1.55; flex:1; }
.tm__who{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600;
  padding-top:12px; border-top:1px solid var(--line);
}
.tm__hint{
  margin:22px 0 0;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600;
}
@media (prefers-reduced-motion:reduce){
  .tm__card:hover{ transform:none; }
}

/* =============== TESTIMONIAL POPUP =============== */

.tmodal{
  width:min(92vw, 520px);
  max-height:min(80vh, 680px);
  padding:0;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  background:var(--surface);
  color:var(--text);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.tmodal::backdrop{
  background:rgba(3,3,4,.8);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
}
.tmodal__inner{ display:flex; flex-direction:column; max-height:inherit; }
.tmodal__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 16px 16px 22px;
  border-bottom:1px solid var(--line);
  flex:none;
}
.tmodal__flag{
  margin:0;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2);
}
.tmodal__x{
  flex:none;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-2); border-radius:var(--r);
  color:var(--muted); cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.tmodal__x:hover{ color:var(--text); border-color:var(--accent); }
.tmodal__x:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:2px; }
.tmodal__body{ padding:24px 22px 28px; overflow-y:auto; }
.tmodal__body p{ color:var(--muted); font-size:15px; line-height:1.65; }
.tmodal__stat{
  margin:0 0 16px;
  font-family:var(--display);
  font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-hi) !important;
}
.tmodal__shots{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 20px; }
.tmodal__shots figure{ margin:0; display:flex; flex-direction:column; gap:8px; }
.tmodal__shots figure > span{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/5;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #1a1a1d, #0e0e10);
}
.tmodal__shots figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--line); }
.tmodal__shots figcaption{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600; text-align:center;
}
.tmodal__quote{
  margin:0 0 18px;
  font-family:var(--display);
  font-size:17px; font-weight:700; line-height:1.4;
  color:var(--text) !important;
}
.tmodal__who{
  margin:20px 0 0 !important;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2) !important; font-weight:600;
}
@media (max-width:480px){
  .tmodal{ width:94vw; }
  .tmodal__body{ padding:20px 18px 24px; }
}

/* =============== ABOUT =============== */

.about__grid{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
@media (max-width:860px){ .about__grid{ grid-template-columns:1fr; } }

.about__media{ position:relative; max-width:380px; }
.about__shot{
  margin:0;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  overflow:hidden;
  background:linear-gradient(160deg, #1a1a1d, #0e0e10);
  position:relative;
  /* Offset red frame behind the photo. */
  box-shadow:12px 12px 0 -1px var(--bg), 12px 12px 0 0 var(--accent-deep);
}
.about__shot img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  filter:saturate(.8) contrast(1.05);
}
.about__shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(7,7,8,.55));
  pointer-events:none;
}
.about__tag{
  position:absolute; left:-1px; bottom:22px;
  display:inline-flex; align-items:center;
  padding:8px 14px;
  background:var(--bg);
  border:1px solid var(--line-2);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text);
}
@media (max-width:860px){ .about__media{ max-width:300px; } }

.about__body .section__title{ margin-bottom:24px; }
.about__body p{ color:var(--muted); font-size:17px; }
.about__pull{
  margin:28px 0 0;
  padding:22px 0 0 20px;
  border-top:1px solid var(--line);
  border-left:2px solid var(--accent);
  font-family:var(--display);
  font-size:clamp(18px,2vw,22px);
  font-weight:700;
  line-height:1.35;
  color:var(--text) !important;
}

/* =============== PROCESS =============== */

.steps{ display:grid; gap:0; }
.step{
  position:relative;
  display:grid;
  grid-template-columns:34px 1fr;
  column-gap:clamp(16px,2.2vw,26px);
  padding-bottom:clamp(30px,3.6vw,42px);
  align-items:start;
}
.step:last-child{ padding-bottom:0; }
.step::before{
  content:"";
  position:absolute;
  left:16px; top:38px; bottom:0;
  width:1px;
  background:var(--line-2);
}
.step:last-child::before{ display:none; }
.step__num{
  width:34px; height:34px;
  border:1px solid var(--accent-line);
  background:var(--accent-dim);
  color:var(--accent-hi);
  font-family:var(--display);
  font-size:12px; font-weight:800; letter-spacing:.04em;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
/* Red cut in the top left corner of each node. */
.step__num::before{
  content:"";
  position:absolute; top:-1px; left:-1px;
  width:9px; height:9px;
  background:linear-gradient(135deg, var(--accent) 0 50%, transparent 50%);
}
.step h3{
  font-size:clamp(18px,2vw,22px);
  text-transform:uppercase;
  margin:6px 0 10px;
}
.step p{ color:var(--muted); font-size:16px; margin:0; max-width:62ch; }
.step__tag{
  display:inline-block; margin-top:14px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--accent-hi);
  background:var(--accent-dim);
  border:1px solid var(--accent-line);
  padding:5px 13px;
}
@media (max-width:560px){
  .step{ grid-template-columns:28px 1fr; column-gap:14px; }
  .step::before{ left:13px; top:32px; }
  .step__num{ width:28px; height:28px; }
  .step h3{ margin-top:2px; }
}

/* =============== FINAL CTA: THE ECLIPSE ===============
   Layers, back to front: the sky (maroon gradient plus two drifting smoke
   layers tinted red), the disc with its white-hot ring and red corona, the
   copy inside the disc, the beam dropping from the ring, then the ground
   with the flare, the crowd and the ridge.

   --ring is the disc diameter. It is never smaller than 560px, so on a
   phone the ring runs off both sides and only the top and bottom arcs
   show, which still reads as the eclipse and keeps the copy inside the
   dark centre at every width. The section clips the overflow. */

.cta{
  --ring: clamp(560px, 46vw, 590px);
  --ground: clamp(200px, 22vw, 290px);
  position:relative;
  padding:clamp(60px,8vw,96px) 0 0;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(140,22,30,.42), transparent 70%),
    radial-gradient(120% 60% at 50% 100%, rgba(120,16,24,.55), transparent 60%),
    linear-gradient(180deg, var(--bg-alt) 0%, #150708 55%, #1b0608 100%);
  border-top:1px solid var(--line);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}

/* --- smoke --- */
.cta__sky{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.cta__sky i{
  position:absolute;
  top:-40%; left:-40%; width:180%; height:180%;
  background-repeat:repeat;
  mix-blend-mode:screen;
  /* The noise is grayscale; this turns it the colour of the sky. */
  filter:sepia(1) saturate(5) hue-rotate(-52deg) brightness(.42) contrast(1.15);
  will-change:transform;
}
.cta__sky i:nth-child(1){
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%27800%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0035%200.0055%27%20numOctaves%3D%274%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27800%27%20height%3D%27800%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E");
  background-size:900px 900px;
  opacity:.42;
  animation:skyA 60s ease-in-out infinite alternate;
}
.cta__sky i:nth-child(2){
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%27800%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0022%200.0034%27%20numOctaves%3D%273%27%20seed%3D%2723%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27800%27%20height%3D%27800%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E");
  background-size:1300px 1300px;
  opacity:.3;
  animation:skyB 85s ease-in-out infinite alternate;
}
@keyframes skyA{
  from{ transform:translate3d(-6%, 3%, 0) scale(1.05); }
  to  { transform:translate3d(7%, -5%, 0) scale(1.25); }
}
@keyframes skyB{
  from{ transform:translate3d(6%, -3%, 0) scale(1.2); }
  to  { transform:translate3d(-5%, 5%, 0) scale(1.02); }
}

/* --- the disc and its ring --- */
.cta__scene{
  position:relative; z-index:2;
  width:var(--ring);
  /* The scene is the disc's box. Without an explicit height it would size
     to the copy and the ring would hang below it over the beam. */
  height:var(--ring);
  /* Centred by arithmetic, not auto margins: auto margins left-align a box
     wider than its container, which pushed the disc off centre on phones
     where the ring is wider than the screen. */
  margin:0 0 0 calc(50% - var(--ring) / 2);
  max-width:none;
  display:grid;
  place-items:center;
}
.cta__eclipse{
  position:absolute; inset:0;
  width:var(--ring); height:var(--ring);
  border-radius:50%;
  /* The disc is darker than the sky behind it, with a faint lift at the
     centre, which is what makes it read as a body in front of the light
     and not a hole. */
  background:radial-gradient(circle at 50% 45%, #0d0909 0%, #070506 60%, #050405 100%);
  box-shadow:
    0 0 0 2.5px #fff6ef,                              /* white-hot ring */
    0 0 6px 3px rgba(255,236,224,.95),                /* heat on the ring */
    0 0 22px 8px rgba(255,120,80,.65),                /* inner corona */
    0 0 70px 22px rgba(214,44,56,.42),                /* red corona */
    0 0 180px 60px rgba(150,20,30,.32),               /* sky bleed */
    inset 0 0 18px 2px rgba(255,200,180,.35),         /* light leaking in */
    inset 0 0 60px 10px rgba(120,20,30,.25);
  animation:eclipseBreathe 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes eclipseBreathe{
  0%,100%{ box-shadow:
    0 0 0 2.5px #fff6ef, 0 0 6px 3px rgba(255,236,224,.95), 0 0 22px 8px rgba(255,120,80,.6),
    0 0 70px 22px rgba(214,44,56,.38), 0 0 180px 60px rgba(150,20,30,.28),
    inset 0 0 18px 2px rgba(255,200,180,.32), inset 0 0 60px 10px rgba(120,20,30,.22); }
  50%{ box-shadow:
    0 0 0 2.5px #fff6ef, 0 0 8px 4px rgba(255,236,224,1), 0 0 30px 10px rgba(255,120,80,.72),
    0 0 90px 28px rgba(214,44,56,.48), 0 0 220px 70px rgba(150,20,30,.36),
    inset 0 0 22px 3px rgba(255,200,180,.4), inset 0 0 70px 12px rgba(120,20,30,.28); }
}

/* Copy inside the disc. Capped so it never reaches the ring on a phone. */
.cta__inner{
  position:relative; z-index:3;
  width:min(calc(100vw - 56px), calc(var(--ring) - 120px));
  padding:0;
}
.cta__title{
  font-size:clamp(30px,3.6vw,44px);
  text-transform:uppercase;
  max-width:14ch; margin:0 auto;
}
.cta__sub{ color:var(--muted); font-size:clamp(16px,1.8vw,18px); max-width:44ch; margin:22px auto 0; }
.cta__actions{ margin-top:34px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
/* Narrow on purpose: it sits low in the disc where the circle has pulled
   in, so it wraps to two lines rather than reaching the ring. */
.cta__note{ margin:22px auto 0; max-width:250px; line-height:1.9; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }

/* --- the beam ---
   Drops from the bottom edge of the ring to the ground. A hot white core,
   a red body, and a wide soft glow. Sits BEHIND the ground layer so the
   crowd stands in front of it. */
.cta__beam{
  position:absolute;
  left:50%; top:calc(100% - 2px);
  width:80px;
  height:calc(var(--ground) + 8px);
  transform:translateX(-50%);
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(214,44,56,.10) 25%,
    rgba(255,120,90,.45) 44%,
    rgba(255,245,238,.95) 49%,
    rgba(255,245,238,.95) 51%,
    rgba(255,120,90,.45) 56%,
    rgba(214,44,56,.10) 75%,
    transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,.7) 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,.7) 100%);
  animation:beamFlicker 5s ease-in-out infinite;
}
.cta__beam::before{
  content:"";
  position:absolute; inset:0 -60px;
  background:linear-gradient(90deg, transparent, rgba(214,44,56,.22) 50%, transparent);
  filter:blur(14px);
}
@keyframes beamFlicker{
  0%,100%{ opacity:.92; }
  40%{ opacity:1; }
  70%{ opacity:.86; }
}

/* --- the ground --- */
.cta__ground{
  position:relative; z-index:4;
  height:var(--ground);
  margin-top:0;
  pointer-events:none;
}
.cta__ground i{ position:absolute; display:block; }
/* Where the beam lands. */
.cta__flare{
  left:50%; bottom:34%;
  width:min(70vw, 520px); height:120px;
  transform:translate(-50%, 50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,160,130,.55), rgba(214,44,56,.28) 35%, transparent 70%);
  filter:blur(6px);
}
/* The crowd: one SVG tile of figures, repeated along the horizon. Painted
   near black so they only show where the glow is behind them. */
.cta__crowd{
  left:0; right:0; bottom:33%;
  height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cg fill='%23060405'%3E%3Ccircle cx='8' cy='8' r='2.2'/%3E%3Crect x='5.6' y='10' width='4.8' height='12' rx='1.4'/%3E%3Ccircle cx='23' cy='5' r='2.4'/%3E%3Crect x='20.2' y='7.4' width='5.6' height='14.6' rx='1.6'/%3E%3Ccircle cx='34' cy='9.5' r='2'/%3E%3Crect x='31.9' y='11.4' width='4.2' height='10.6' rx='1.3'/%3E%3Ccircle cx='52' cy='6' r='2.3'/%3E%3Crect x='49.4' y='8.3' width='5.2' height='13.7' rx='1.5'/%3E%3Ccircle cx='61' cy='10' r='1.9'/%3E%3Crect x='59' y='11.8' width='4' height='10.2' rx='1.2'/%3E%3Ccircle cx='79' cy='7' r='2.2'/%3E%3Crect x='76.6' y='9.1' width='4.8' height='12.9' rx='1.4'/%3E%3Ccircle cx='91' cy='4.5' r='2.5'/%3E%3Crect x='88.2' y='7' width='5.6' height='15' rx='1.6'/%3E%3Ccircle cx='109' cy='8.5' r='2.1'/%3E%3Crect x='106.7' y='10.4' width='4.6' height='11.6' rx='1.4'/%3E%3C/g%3E%3C/svg%3E") repeat-x center bottom / 120px 22px;
}
/* The ridge: a low jagged horizon the crowd stands on, then solid ground. */
.cta__ridge{
  left:0; right:0; bottom:0;
  height:34%;
  background:#050405;
}
.cta__ridge::before{
  content:"";
  position:absolute; left:0; right:0; bottom:100%;
  height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='18' viewBox='0 0 400 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18 L0 12 L30 9 L55 13 L80 6 L120 11 L150 8 L190 14 L230 7 L260 12 L300 5 L340 11 L370 9 L400 13 L400 18 Z' fill='%23050405'/%3E%3C/svg%3E") repeat-x center bottom / 400px 18px;
}

@media (max-width:720px){
  .cta{ --ring:560px; --ground:190px; }
  .cta__title{ font-size:30px; }
}

@media (prefers-reduced-motion:reduce){
  .cta__sky i, .cta__eclipse, .cta__beam{ animation:none; }
}

/* =============== FOOTER =============== */

.footer{
  border-top:1px solid var(--line);
  padding:52px 0 44px;
  background:var(--bg);
}
.footer__inner{
  display:flex; flex-wrap:wrap; gap:24px 40px;
  align-items:center; justify-content:space-between;
}
.footer__brand{ display:flex; flex-direction:column; gap:10px; }
.credit{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2);
  border-bottom:1px solid var(--line-2);
  padding-bottom:2px;
  width:fit-content;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.credit:hover{ color:var(--text); border-color:var(--text); }
.footer__links{ display:flex; flex-wrap:wrap; gap:14px 28px; }
.footer__links a{
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); transition:color .2s var(--ease);
}
.footer__links a:hover{ color:var(--accent-hi); }
.footer__fine{ font-size:12px; color:var(--muted-2); letter-spacing:.04em; }

/* =========================================================
   APPLICATION: popup on index.html, full page on apply.html
   ========================================================= */

.amodal{
  width:min(94vw, 760px);
  max-height:min(90vh, 900px);
  padding:0;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.amodal::backdrop{
  background:rgba(3,3,4,.84);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
}
.amodal[open]{ animation:amodalIn .35s var(--ease); }
@keyframes amodalIn{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to{ opacity:1; transform:none; }
}
.amodal__inner{ display:flex; flex-direction:column; max-height:inherit; }
.amodal__bar{
  display:flex; align-items:center; gap:18px;
  padding:14px 14px 14px 24px;
  flex:none;
  background:var(--surface);
}
.amodal__bar .apply__count{ flex:1; text-align:right; }
.amodal__body{
  padding:clamp(28px,5vw,48px) clamp(22px,5vw,56px) clamp(32px,5vw,52px);
  overflow-y:auto;
  background:
    radial-gradient(80% 50% at 50% -10%, rgba(var(--accent-rgb),.10), transparent 60%),
    var(--bg);
}
@media (max-width:560px){
  .amodal{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .amodal[open]{ animation:none; }
  .amodal__inner{ max-height:100dvh; height:100dvh; }
}

/* Standalone page (apply.html) */
.apply-page{
  min-height:100vh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(var(--accent-rgb),.10), transparent 60%),
    var(--bg);
}
.apply__bar{
  position:sticky; top:0; z-index:20;
  background:rgba(7,7,8,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.apply__bar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; height:68px;
}
.apply__count{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600;
}
.apply__progress{
  height:2px; background:var(--line); position:relative; overflow:hidden; flex:none;
}
.apply__progress i{
  position:absolute; inset:0 auto 0 0;
  background:var(--accent-hi);
  width:0%;
  transition:width .45s var(--ease);
}
.apply__main{
  flex:1;
  display:flex; align-items:center;
  padding:clamp(40px,8vh,88px) 0;
}
.apply__shell{ width:100%; max-width:720px; margin:0 auto; padding:0 28px; }

.q{ display:none; }
.q.is-active{ display:block; animation:qin .45s var(--ease); }
@keyframes qin{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .q.is-active{ animation:none; } }

.q__index{
  font-family:var(--display);
  font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-hi); margin-bottom:18px; display:block;
}
.q__title{
  font-size:clamp(24px,3.4vw,36px);
  line-height:1.15;
  margin-bottom:14px;
  text-transform:none;
  letter-spacing:0;
}
.q__help{ color:var(--muted); font-size:16px; margin:0 0 30px; max-width:56ch; }

.field{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  padding:16px 18px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
  -webkit-appearance:none;
  appearance:none;
}
.field::placeholder{ color:var(--muted-2); }
.field:focus{ outline:none; border-color:var(--accent-hi); background:var(--surface); }
textarea.field{ min-height:150px; resize:vertical; }

.group{ display:grid; gap:18px; }
.group__row{ display:block; }
.group__label{
  display:block;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:9px;
}
.group__row:focus-within .group__label{ color:var(--accent-hi); }

.choices{ display:grid; gap:12px; }
.choice{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--surface-2);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  padding:18px 20px;
  cursor:pointer;
  position:relative;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.choice:hover{ background:var(--surface); transform:translateY(-1px); }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice__dot{
  flex:none; width:18px; height:18px; margin:3px 2px 0 0;
  border:1.5px solid var(--line-2);
  position:relative;
  transform:rotate(45deg);
  transition:border-color .2s var(--ease);
}
.choice__dot::after{
  content:""; position:absolute; inset:4px;
  background:var(--accent-hi);
  transform:scale(0); transition:transform .2s var(--ease);
}
.choice__text b{
  display:block;
  font-family:var(--sans);
  font-size:16.5px; font-weight:600; letter-spacing:-.01em;
  margin-bottom:4px;
}
.choice__text small{ color:var(--muted); font-size:14px; line-height:1.5; display:block; }
.choice--check .choice__dot{ transform:none; }
.choice--check .choice__dot::after{
  inset:0;
  background:no-repeat center/11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.6 8.9 10 3.1' fill='none' stroke='%23d62c38' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choice:has(input:checked){
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.10), var(--surface));
}
.choice:has(input:checked) .choice__dot{ border-color:var(--accent-hi); }
.choice:has(input:checked) .choice__dot::after{ transform:scale(1); }
.choice:focus-within{ outline:2px solid var(--accent-hi); outline-offset:3px; }

.q__error{
  margin-top:14px;
  font-size:14px; color:var(--warn);
  display:none;
  padding-left:20px;
  position:relative;
}
.q__error::before{
  content:"!";
  position:absolute; left:0; top:2px;
  width:14px; height:14px;
  border:1.5px solid var(--warn);
  border-radius:50%;
  font-size:10px; font-weight:700; line-height:12px; text-align:center;
}
.q__error.is-on{ display:block; }

.q__nav{
  display:flex; align-items:center; gap:14px;
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.q__nav .spacer{ flex:1; }
.q__hint{ font-size:12px; color:var(--muted-2); letter-spacing:.04em; }
@media (max-width:560px){
  .q__hint{ display:none; }
  .q__nav{ flex-wrap:wrap; gap:12px; }
  .q__nav .spacer{ display:none; }
  .q__nav .btn{ flex:1 1 100%; order:-1; justify-content:center; }
  .q__nav .back-link{ flex:0 0 auto; }
}
.back-link{
  background:none; border:0; cursor:pointer;
  color:var(--muted-2); font-family:var(--sans); font-size:14px;
  padding:8px 4px;
  transition:color .2s var(--ease);
}
.back-link:hover{ color:var(--text); }

.done{ display:none; text-align:center; }
.done.is-active{ display:block; animation:qin .5s var(--ease); }
.done__mark{
  width:64px; height:64px; margin:0 auto 28px;
  border:1.5px solid var(--accent-hi);
  background:var(--accent-dim);
  color:var(--accent-hi);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(45deg);
}
.done__mark svg{ transform:rotate(-45deg); }
.done__title{ font-size:clamp(28px,4vw,42px); text-transform:uppercase; margin-bottom:18px; }
.done__body{ color:var(--muted); font-size:17px; max-width:52ch; margin:0 auto; }
.done__actions{ margin-top:34px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.done__fallback{
  margin:22px auto 0;
  max-width:52ch;
  padding:14px 18px;
  border:1px solid var(--line-2);
  background:var(--surface);
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
}
.done__fallback a{ color:var(--accent-hi); text-decoration:underline; }
.done__panel{
  margin-top:44px;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  padding:28px 26px;
}
.done__panel h3{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  font-family:var(--sans); color:var(--muted-2); font-weight:600;
  margin-bottom:18px;
}
.done__panel ol{ margin:0; padding-left:20px; color:var(--muted); font-size:15px; display:grid; gap:10px; }

.handoff{
  display:none;
  margin-top:44px; text-align:left;
  background:var(--surface);
  border:1px dashed var(--accent-line);
  padding:26px;
}
.handoff.is-on{ display:block; }
.handoff__tag{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-hi); font-weight:700; margin-bottom:16px;
}
.handoff__score{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:800;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 16px; margin-bottom:20px;
}
.handoff__score[data-tier="hot"]{ background:var(--accent-btn); color:var(--accent-ink); }
.handoff__score[data-tier="qualified"]{ background:var(--accent-dim); color:var(--accent-hi); border:1px solid var(--accent-line); }
.handoff__score[data-tier="nurture"]{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line-2); }
.handoff__score[data-tier="declined"]{ background:var(--surface-2); color:var(--muted-2); border:1px solid var(--line); }
.handoff pre{
  margin:0; white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px; line-height:1.65; color:var(--muted);
  background:var(--bg); border:1px solid var(--line);
  padding:18px; max-height:340px; overflow:auto;
}

/* =========================================================
   SHINE
   Kept quiet. A slow highlight roaming the eyebrows and the
   brand mark, a sweep on the follow pills, and a faint bloom
   under the primary buttons. No `filter` on anything that uses
   background-clip:text: WebKit drops the clip and paints the
   whole gradient as a block behind the type.
   ========================================================= */

@keyframes accentRoam{
  0%   { background-position:   0% 50%; }
  25%  { background-position:  65%  8%; }
  50%  { background-position: 100% 55%; }
  75%  { background-position:  35% 95%; }
  100% { background-position:   0% 50%; }
}
@keyframes pillSweep{
  0%   { transform:translateX(-170%); }
  100% { transform:translateX(330%); }
}
@keyframes ctaGlow{
  0%,100% { box-shadow:0 0 0 0 rgba(var(--accent-hi-rgb),0); }
  50%     { box-shadow:0 0 26px 1px rgba(var(--accent-hi-rgb),.22); }
}

@supports (-webkit-background-clip:text) or (background-clip:text){
  .eyebrow,
  .follow__label{
    background-image:linear-gradient(115deg,
      var(--accent-hi) 0%, var(--accent-hi) 34%,
      var(--accent-mid) 44%, var(--accent-peak) 50%, var(--accent-mid) 56%,
      var(--accent-hi) 66%, var(--accent-hi) 100%);
    background-size:300% 300%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    animation:accentRoam 5.2s ease-in-out infinite;
  }
  .follow__label{
    background-image:linear-gradient(115deg,
      var(--muted-2) 0%, var(--muted-2) 34%,
      var(--muted) 44%, var(--text) 50%, var(--muted) 56%,
      var(--muted-2) 66%, var(--muted-2) 100%);
  }
  .brand em{
    background-image:linear-gradient(115deg,
      var(--accent-hi) 0%, var(--accent-hi) 36%,
      var(--accent-mid) 46%, var(--accent-peak) 50%, var(--accent-mid) 54%,
      var(--accent-hi) 64%, var(--accent-hi) 100%);
    background-size:300% 300%;
    animation:accentRoam 5.2s ease-in-out infinite;
  }
  /* The eyebrow's slanted rule is a pseudo element with its own background,
     which background-clip:text would swallow. Keep it painted. */
  .eyebrow::before,
  .eyebrow::after{ background:var(--accent); }
  /* And the separator inside the hero eyebrow. */
  .eyebrow .sep{ background:var(--accent); }
}

.follow__btn,
.step__tag{ position:relative; overflow:hidden; }
.follow__btn::after,
.step__tag::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width:44%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.10), transparent);
  transform:translateX(-170%);
  pointer-events:none;
  animation:pillSweep 5.2s linear infinite;
}
.follow__btn:nth-child(2)::after{ animation-delay:.9s; }
.step__tag::after{ animation-delay:.5s; }

.btn--primary{ animation:ctaGlow 3.4s ease-in-out infinite; }
.btn--primary:hover{
  animation-play-state:paused;
  box-shadow:0 0 26px 1px rgba(var(--accent-hi-rgb),.3);
}

@media (prefers-reduced-motion:reduce){
  .eyebrow, .follow__label, .brand em, .btn--primary, .cta__eclipse, .hero__scroll span{
    animation:none;
    background-position:0 0;
  }
  .follow__btn::after,
  .step__tag::after{ display:none; }
}