/* =========================================================
   Capital Clips — Pre-Sold Pipeline
   Design system: light "paper" canvas + floating rounded
   dark glow panels. SF Pro Display + Apple Garamond.
   Palette: black / white / electric blue.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face{font-family:'SF Pro Display';src:url('assets/fonts/sf-pro-display-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('assets/fonts/sf-pro-display-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('assets/fonts/sf-pro-display-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('assets/fonts/sf-pro-display-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('assets/fonts/sf-pro-display-heavy.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Apple Garamond';src:url('assets/fonts/AppleGaramond-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Apple Garamond';src:url('assets/fonts/AppleGaramond-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Apple Garamond';src:url('assets/fonts/AppleGaramond-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Apple Garamond';src:url('assets/fonts/AppleGaramond-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Apple Garamond';src:url('assets/fonts/AppleGaramond-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --paper:#dcd7ce;          /* white-cement canvas (warm concrete) */
  --paper-edge:#d0cabd;
  --card:#efece5;           /* soft off-white card, lifts off the cement */
  --ink:#16150f;            /* text on light (warm near-black) */
  --ink-2:#585952;          /* muted on light */
  --ink-3:#867f73;
  --line:#cdc7ba;

  --night:#0a0c12;          /* dark panels */
  --night-2:#0d1019;
  --snow:#f4f6fb;           /* text on dark */
  --snow-2:#9aa4b8;         /* muted on dark */
  --hair-d:rgba(255,255,255,.10);

  --blue:#0a6cff;          /* true electric blue (de-purpled) */
  --blue-d:#0a52d8;
  --blue-l:#5aa6ff;        /* clean azure light (was periwinkle) */

  --serif:'Apple Garamond', Georgia, serif;
  --sans:'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius:26px;
  --radius-s:16px;
  --maxw:1180px;
  --edge:clamp(14px,1.4vw,22px);
  --pad:clamp(1.4rem,5vw,5rem);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--blue);color:#fff}

/* ---------- Type helpers ---------- */
.serif-it{font-family:var(--serif);font-style:italic;font-weight:400}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue)}
.on-dark .eyebrow,.eyebrow--dark{color:var(--snow-2)}

/* ---------- Layout shells ---------- */
.section{max-width:var(--maxw);margin-inline:auto;padding:clamp(4.5rem,9vw,8rem) var(--edge)}
.section__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.section__index{font-size:.78rem;font-weight:600;color:var(--ink-3);letter-spacing:.04em}
.section__kicker{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* Floating dark panel (inset, rounded, glowing) */
.panel{position:relative;margin-inline:var(--edge);border-radius:var(--radius);background:var(--night);color:var(--snow);overflow:hidden;isolation:isolate}
.panel--pad{padding:clamp(3.4rem,7vw,6.5rem) var(--pad)}
.panel .glow{position:absolute;z-index:0;border-radius:50%;filter:blur(70px);pointer-events:none}
.panel > *{position:relative;z-index:1}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  z-index:100;width:min(1080px,calc(100% - 28px));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem .65rem .55rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 10px 40px -18px rgba(10,11,16,.4);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s,background .4s;
}
.nav.hide{transform:translateX(-50%) translateY(-140%)}
.nav__logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:-.01em;font-size:1rem}
.nav__logo .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.nav__links{display:flex;gap:.3rem}
.nav__link{padding:.5rem .85rem;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--ink-2);transition:color .25s,background .25s}
.nav__link:hover{color:var(--ink);background:rgba(10,11,16,.05)}
.nav__cta{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.15rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.9rem;font-weight:600;transition:transform .3s,background .3s}
.nav__cta span{transition:transform .3s}
.nav__cta:hover{background:var(--blue)}
.nav__cta:hover span{transform:translateX(3px)}
.nav__burger{display:none;width:42px;height:42px;border-radius:999px;background:var(--ink);position:relative}
.nav__burger span{position:absolute;left:12px;width:18px;height:1.6px;background:#fff;transition:.3s}
.nav__burger span:nth-child(1){top:18px}
.nav__burger span:nth-child(2){top:23px}
.nav__burger.open span:nth-child(1){top:20.5px;transform:rotate(45deg)}
.nav__burger.open span:nth-child(2){top:20.5px;transform:rotate(-45deg)}

/* mobile menu */
.mobilemenu{position:fixed;inset:0;z-index:90;background:var(--night);color:var(--snow);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:2rem var(--edge);
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:.4s cubic-bezier(.16,1,.3,1)}
.mobilemenu.open{opacity:1;visibility:visible;transform:none}
.mobilemenu__link{display:flex;align-items:baseline;gap:1rem;font-size:2rem;font-weight:600;letter-spacing:-.02em;padding:.5rem 0;border-bottom:1px solid var(--hair-d)}
.mobilemenu__link span{font-size:.85rem;color:var(--snow-2);font-weight:500}
.mobilemenu__link--cta{color:var(--blue-l)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;margin:76px var(--edge) 0;border-radius:var(--radius);
  background:var(--night);overflow:hidden;
  min-height:min(94vh,920px);display:flex;align-items:center;isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;object-position:60% center;display:block}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  radial-gradient(135% 130% at 72% 38%,transparent 40%,rgba(4,6,11,.55) 100%),
  linear-gradient(95deg,rgba(7,9,14,.97) 0%,rgba(7,9,14,.9) 26%,rgba(7,9,14,.55) 52%,rgba(7,9,14,.12) 78%,rgba(7,9,14,.32) 100%),
  linear-gradient(0deg,rgba(7,9,14,.7) 0%,rgba(7,9,14,0) 38%)}
.hero__glow{position:absolute;z-index:1;width:54vw;height:54vw;max-width:680px;max-height:680px;
  right:-14%;top:-16%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at center,rgba(10,108,255,.2),rgba(10,108,255,.05) 44%,transparent 66%);
  filter:blur(26px)}
.hero__inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin-inline:auto;padding:clamp(2.2rem,5vw,4rem) var(--pad)}
.hero__eyebrow{color:var(--snow-2)}
.hero__eyebrow::before{background:var(--blue-l);box-shadow:0 0 12px var(--blue-l)}
.hero h1{
  margin:1.2rem 0 1.4rem;color:var(--snow);
  font-weight:700;font-size:clamp(2.7rem,6.6vw,6rem);line-height:.98;letter-spacing:-.035em;
  max-width:16ch;
}
.hero h1 .row{display:block;overflow:hidden;padding:.04em 0 .18em;margin-bottom:-.18em}
.hero h1 .row > span{display:inline-block}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.hero h1 .accent{color:var(--blue-l);margin-left:.08em;padding-right:.06em;text-shadow:0 0 38px rgba(90,166,255,.35)}
.hero__lede{max-width:46ch;color:#c7cdd9;font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.6;font-weight:400}
.hero__lede .serif-it{color:#e7ebf3}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* hero bottom stat strip */
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(2.4rem,5vw,3.6rem);
  padding-top:1.6rem;border-top:1px solid var(--hair-d);max-width:760px}
.hstat__n{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:-.02em;color:var(--snow);display:flex;align-items:baseline}
.hstat__n .u{font-size:.6em;font-weight:600;margin-left:.06em;color:var(--blue-l)}
.hstat__l{margin-top:.35rem;font-size:.8rem;color:var(--snow-2);line-height:1.35;max-width:18ch}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;font-weight:600;font-size:.98rem;
  padding:.92rem 1.5rem;transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,color .3s,box-shadow .3s;white-space:nowrap}
.btn .arr{transition:transform .3s}
.btn:hover .arr{transform:translateX(4px)}
.btn--solid{background:linear-gradient(180deg,#3a8bff,var(--blue));color:#fff;box-shadow:0 14px 40px -14px rgba(10,108,255,.85),inset 0 1px 0 rgba(255,255,255,.28)}
.btn--solid:hover{background:linear-gradient(180deg,var(--blue),var(--blue-d));transform:translateY(-2px);box-shadow:0 20px 50px -14px rgba(10,108,255,.92),inset 0 1px 0 rgba(255,255,255,.28)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 14px 36px -16px rgba(0,0,0,.5)}
.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--snow)}
.btn--ghost:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--blue);transform:translateY(-2px)}
.btn--xl{padding:1.15rem 2rem;font-size:1.08rem}

/* ============================================================
   TRUST (light)
   ============================================================ */
.trust{max-width:var(--maxw);margin:clamp(2.6rem,5vw,4rem) auto 0;padding:0 var(--edge);
  display:flex;align-items:center;justify-content:center;gap:1.1rem;flex-wrap:wrap;text-align:center}
.trust__avatars{display:flex}
.trust__avatars span{width:38px;height:38px;border-radius:50%;background-size:cover;background-position:center;
  border:2px solid var(--paper);margin-left:-12px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.trust__avatars span:first-child{margin-left:0}
.trust p{font-size:.98rem;color:var(--ink-2);max-width:60ch}
.trust p strong{color:var(--ink);font-weight:600}

/* ============================================================
   PROBLEM (light editorial)
   ============================================================ */
.statement{font-weight:600;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.028em;max-width:20ch}
.statement .dim{color:var(--ink-3)}
.problem__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(2.4rem,4vw,3.4rem);align-items:start}
.problem__copy{font-size:1.12rem;line-height:1.62;color:var(--ink-2);max-width:48ch}
.problem__list{list-style:none;display:flex;flex-direction:column}
.problem__list li{display:flex;gap:1rem;padding:1.05rem 0;border-top:1px solid var(--line);font-size:1.02rem;color:var(--ink)}
.problem__list li:last-child{border-bottom:1px solid var(--line)}
.problem__list li span{color:var(--blue);font-weight:600;font-size:.85rem;min-width:1.4rem}

/* ============================================================
   MANIFESTO (dark glow panel)
   ============================================================ */
.manifesto-wrap{margin-top:clamp(1rem,2vw,1.5rem)}
.manifesto{text-align:center}
.manifesto .glow{width:680px;height:680px;left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(10,108,255,.3),transparent 64%)}
.manifesto .eyebrow{color:var(--snow-2);justify-content:center;margin-bottom:1.6rem}
.manifesto h2{font-weight:600;font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.08;letter-spacing:-.028em;max-width:18ch;margin-inline:auto;color:var(--snow)}
.manifesto h2 .accent{color:var(--blue-l)}
.manifesto__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem;max-width:760px;margin:2.8rem auto 0;text-align:left}
.manifesto__cols p{color:#c2c9d6;font-size:1.04rem;line-height:1.6}
.manifesto__cols strong{color:#fff;font-weight:600}

/* ============================================================
   FEATURE BAND (image panel)
   ============================================================ */
.featband{margin:var(--edge) var(--edge) 0;border-radius:var(--radius);overflow:hidden;position:relative;
  min-height:min(78vh,720px);display:flex;align-items:flex-end;isolation:isolate}
.featband img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;z-index:0;will-change:transform}
.featband__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(7,9,14,.92) 4%,rgba(7,9,14,.35) 48%,rgba(7,9,14,.5) 100%)}
.featband .glow{width:520px;height:520px;right:8%;top:14%;background:radial-gradient(circle,rgba(10,108,255,.32),transparent 66%)}
.featband__in{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin-inline:auto;padding:clamp(2.4rem,5vw,4.5rem) var(--pad);color:var(--snow)}
.featband__in .eyebrow{color:var(--snow-2);margin-bottom:1.2rem}
.featband__in h2{font-weight:600;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.028em;max-width:18ch}
.featband__in h2 .serif-it{color:var(--blue-l)}
.featband__chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.featband__chips span{padding:.5rem 1rem;border-radius:999px;font-size:.86rem;font-weight:500;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px)}

/* ============================================================
   SHOWREEL (dark panel)
   ============================================================ */
.showreel{margin:var(--edge) var(--edge) 0;border-radius:var(--radius);background:var(--night);color:var(--snow);overflow:hidden;padding:clamp(3rem,6vw,5rem) 0;position:relative;isolation:isolate}
.showreel .glow{width:600px;height:600px;left:-8%;bottom:-30%;background:radial-gradient(circle,rgba(10,108,255,.18),transparent 66%)}
.showreel__head{max-width:var(--maxw);margin:0 auto clamp(2rem,4vw,3rem);padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;position:relative;z-index:1}
.showreel__title{font-weight:600;font-size:clamp(1.7rem,3.4vw,2.7rem);letter-spacing:-.026em;max-width:18ch}
.showreel__title em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue-l)}
.showreel__head .eyebrow{color:var(--snow-2)}
.showreel__body{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1;display:grid;gap:clamp(2.4rem,4.5vw,3.6rem)}
.reelgroup{display:grid;gap:clamp(1.1rem,2vw,1.6rem)}
.reelgroup__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--hair-d)}
.reelgroup__lead{display:inline-flex;align-items:center;gap:.75rem}
.reelgroup__ava{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--night);border:1.5px solid var(--hair-d);box-shadow:0 2px 10px -4px rgba(10,11,16,.5)}
.reelgroup__no{font-family:var(--mono,ui-monospace,monospace);font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--blue-l);font-variant-numeric:tabular-nums}
.reelgroup__name{font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:-.024em}
.reelgroup__niche{font-size:.82rem;font-weight:500;letter-spacing:.01em;color:var(--snow-2)}
.reelgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.6rem)}
.reelgrid--two{grid-template-columns:repeat(2,1fr)}
.reel__tag{position:absolute;left:16px;top:16px;z-index:2;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:#0a0b10;background:var(--blue-l);padding:.32rem .66rem;border-radius:100px;box-shadow:0 6px 18px -6px rgba(10,108,255,.7)}
.reel{display:block;width:100%;text-align:left;padding:0;border:0;background:none;color:inherit;cursor:pointer;font:inherit}
.reel__thumb{display:block;position:relative;aspect-ratio:16/9;border-radius:18px;background-size:cover;background-position:center;overflow:hidden;border:1px solid var(--hair-d)}
.reel__thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,9,14,.62),rgba(7,9,14,.05) 52%);transition:background .4s}
.reel__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);z-index:2;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.94);color:#0a0b10;display:grid;place-items:center;box-shadow:0 14px 40px -10px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.16,1,.3,1),background .3s}
.reel__play svg{width:24px;height:24px;margin-left:3px}
.reel--feature .reel__thumb{aspect-ratio:21/9}
.reel--feature .reel__play{width:78px;height:78px}
.reel--feature .reel__play svg{width:30px;height:30px}
.reel__chan{position:absolute;left:16px;top:16px;z-index:2;font-size:.78rem;font-weight:600;letter-spacing:-.01em;background:rgba(7,9,14,.55);backdrop-filter:blur(8px);padding:.34rem .7rem;border-radius:100px;border:1px solid rgba(255,255,255,.14)}
.reel__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.2rem,2.4vw,1.9rem)}
.reel__cap h4{font-size:clamp(1.15rem,2vw,1.75rem);font-weight:600;letter-spacing:-.022em;max-width:20ch}
.reel__cap span{display:block;margin-top:.4rem;font-size:.9rem;color:var(--snow-2)}
.reel__meta{padding:.95rem .1rem 0}
.reel__meta h4{font-size:1.04rem;font-weight:600;letter-spacing:-.014em}
.reel__meta span{font-size:.84rem;color:var(--blue-l);font-weight:500}

/* ---- Video lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(5,6,10,.82);backdrop-filter:blur(10px)}
.lightbox__inner{position:relative;width:min(1100px,100%);transform:scale(.96) translateY(8px);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.lightbox.open .lightbox__inner{transform:none}
.lightbox__frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 40px 120px -30px rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.1)}
.lightbox__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox__close{position:absolute;top:-14px;right:-14px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(20,22,30,.9);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .3s,background .3s}
.lightbox__close svg{width:20px;height:20px}
.lightbox__close:hover{transform:rotate(90deg) scale(1.05);background:var(--blue)}
@media(max-width:560px){.lightbox__close{top:-50px;right:0}}

/* ============================================================
   DELIVERABLES (light list)
   ============================================================ */
.worklist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.workrow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1.4rem;
  padding:clamp(1.2rem,2.4vw,1.7rem) .4rem;border-bottom:1px solid var(--line);transition:padding .35s,background .35s}
.workrow__no{font-size:.82rem;font-weight:600;color:var(--ink-3)}
.workrow__title{font-size:clamp(1.4rem,2.9vw,2.05rem);font-weight:700;letter-spacing:-.025em}
.workrow__meta{font-size:.9rem;color:var(--ink-2);text-align:right}
.workrow__arrow{font-size:1.1rem;color:var(--ink-3);transition:transform .35s,color .35s}
.workrow:hover{background:var(--card);padding-left:1.2rem;padding-right:1.2rem;border-radius:14px}
.workrow:hover .workrow__arrow{color:var(--blue);transform:translateX(5px)}
.workrow:hover .workrow__title{color:var(--blue)}

/* ============================================================
   PROCESS (light card grid)
   ============================================================ */
.process__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem)}
.phase{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .45s}
.phase:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(10,11,16,.4)}
.phase__media{display:block;position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;overflow:hidden}
.phase__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,9,14,.45),transparent 55%)}
.phase__media{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.phase:hover .phase__media{transform:scale(1.05)}
.phase__badge{position:absolute;left:14px;top:14px;z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:.82rem;font-weight:700;letter-spacing:-.01em;
  background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 6px 18px -6px rgba(10,11,16,.5);backdrop-filter:blur(6px)}
.phase__body{padding:1.6rem 1.5rem 1.7rem;position:relative;z-index:1}
.phase__no{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.phase__h{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;margin:.55rem 0 .55rem}
.phase p{font-size:.96rem;line-height:1.55;color:var(--ink-2)}
.phase--accent{background:var(--night);border-color:transparent;color:var(--snow)}
.phase--accent .phase__badge{background:var(--blue);color:#fff;box-shadow:0 6px 20px -4px rgba(10,108,255,.8)}
.phase--accent .phase__h{color:#fff}
.phase--accent p{color:#c2c9d6}
.phase--accent .phase__no{color:var(--blue-l)}
.phase--accent .phase__media::after{background:linear-gradient(0deg,rgba(10,12,18,.7),transparent 55%)}

/* pricing trust row */
.pricing__trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 2rem;
  margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.pricing__trust li{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:500;color:var(--ink-2)}
.pricing__trust li::before{content:"";width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
  box-shadow:0 0 0 4px rgba(10,108,255,.12)}

/* ============================================================
   WHY (light cards)
   ============================================================ */
.why__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.6vw,1.3rem)}
.why__card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:2rem 1.8rem;transition:transform .4s,box-shadow .4s}
.why__card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(10,11,16,.3)}
.why__no{font-size:.8rem;font-weight:600;color:var(--blue)}
.why__card h3{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;margin:.6rem 0 .55rem}
.why__card p{font-size:.98rem;line-height:1.55;color:var(--ink-2)}

/* ============================================================
   PROOF (dark glow panel)
   ============================================================ */
.proof{margin:var(--edge) var(--edge) 0}
.proof .glow{width:640px;height:640px;right:-10%;top:-18%;background:radial-gradient(circle,rgba(10,108,255,.24),transparent 66%)}
.proof .section__kicker,.proof .section__index{color:var(--snow-2)}
.proof__statement{font-weight:600;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.026em;max-width:24ch;color:var(--snow)}
.proof__statement .hl{color:var(--blue-l)}
.proof__top{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:center;margin-top:1.2rem}
.proof__imgs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:.8rem}
.proof__img{border-radius:14px;background-size:cover;background-position:center;border:1px solid var(--hair-d)}
.proof__img--big{grid-column:1 / -1;aspect-ratio:16/9}
.proof__img--s{aspect-ratio:1/1}
.tquote{display:flex;gap:1.3rem;align-items:flex-start;margin-top:clamp(2.6rem,5vw,4rem);padding-top:clamp(2.2rem,4vw,3rem);border-top:1px solid var(--hair-d);max-width:880px}
.tquote__pic{width:64px;height:64px;border-radius:50%;background-size:cover;background-position:center;flex:0 0 auto;border:1px solid var(--hair-d)}
.tquote__txt{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.38;color:#eef1f7}
.tquote__who{display:block;margin-top:1rem;font-family:var(--sans);font-style:normal;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--snow-2)}
.proof__metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:clamp(2.6rem,5vw,3.6rem);padding-top:2rem;border-top:1px solid var(--hair-d)}
.pmetric__num{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.02em;color:var(--snow);display:flex;align-items:baseline}
.pmetric__num i{font-style:normal;font-size:.55em;font-weight:600;color:var(--blue-l);margin-left:.08em}
.pmetric__lab{margin-top:.4rem;font-size:.82rem;color:var(--snow-2);line-height:1.4;max-width:20ch}

/* ============================================================
   PRICING (light)
   ============================================================ */
.pricing__title{font-weight:600;font-size:clamp(1.9rem,4.4vw,3.4rem);letter-spacing:-.028em;line-height:1.05;margin-bottom:clamp(2rem,4vw,3rem)}
.pricing__title .serif-it{color:var(--blue)}

/* ---- Division of labour (What we do / What you do) ---- */
.handles__title{font-weight:600;font-size:clamp(1.9rem,4.4vw,3.4rem);letter-spacing:-.028em;line-height:1.05;margin-bottom:clamp(1.8rem,3.4vw,2.6rem)}
.handles__title .serif-it{color:var(--blue)}
.handles__grid{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(1.4rem,2.6vw,2.4rem);align-items:start}
.handles__lead{display:flex;gap:1.3rem;align-items:flex-start;margin-bottom:1.4rem}
.handles__count{flex:0 0 auto;display:inline-flex;flex-direction:column;line-height:.85;font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);letter-spacing:-.04em;color:var(--ink)}
.handles__count small{font-size:.22em;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:.7em}
.handles__lead h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.35rem}
.handles__lead p{color:var(--ink-2);font-size:.96rem;line-height:1.55;max-width:48ch}

.dowe{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.dowe__row{list-style:none;display:flex;align-items:center;gap:1rem;padding:1.15rem .4rem;border-bottom:1px solid var(--line);transition:padding .35s,background .35s,color .25s}
.dowe__no{font-size:.82rem;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;flex:0 0 auto}
.dowe__name{font-size:clamp(1.2rem,2.3vw,1.55rem);font-weight:700;letter-spacing:-.02em;color:var(--ink);flex:1}
.dowe__tasks{font-size:.82rem;color:var(--ink-3);font-weight:500;flex:0 0 auto}
.dowe__row:hover{background:var(--card);padding-left:1.1rem;padding-right:1.1rem;border-radius:14px}
.dowe__row:hover .dowe__name{color:var(--blue)}

.handles__you{position:sticky;top:6rem}
.handles__youcard{background:var(--night);color:var(--snow);border-radius:22px;padding:clamp(1.9rem,3vw,2.5rem);position:relative;overflow:hidden;isolation:isolate;box-shadow:0 22px 60px -30px rgba(10,108,255,.5)}
.handles__count--you{color:var(--snow);font-size:clamp(3rem,6vw,4.4rem)}
.handles__count--you small{color:var(--blue-l)}
.handles__youcard h3{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;margin:.9rem 0 .5rem}
.handles__youcard p{color:#c2c9d6;font-size:1rem;line-height:1.55}
.handles__youline{color:var(--snow);font-weight:500;margin-top:.85rem;padding-top:.9rem;border-top:1px solid var(--hair-d)}
.handles__cta{margin-top:1.5rem;width:100%;justify-content:center}
@media(max-width:900px){
  .handles__grid{grid-template-columns:1fr;gap:1.6rem}
  .handles__you{position:static}
}
.pricing__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.6rem)}
.plan{border-radius:22px;padding:clamp(1.8rem,3vw,2.6rem);border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column}
.plan__tag{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.plan__name{font-size:1.7rem;font-weight:600;letter-spacing:-.02em;margin:.5rem 0 1rem}
.plan__price{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.5rem}
.plan__amount{font-size:clamp(2.2rem,4vw,2.9rem);font-weight:700;letter-spacing:-.03em}
.plan__per{font-size:.95rem;color:var(--ink-2)}
.plan__desc{color:var(--ink-2);font-size:.98rem;line-height:1.5;margin-bottom:1.4rem}
.plan__list{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.8rem;flex:1}
.plan__list li{position:relative;padding-left:1.6rem;font-size:.96rem;color:var(--ink)}
.plan__list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px rgba(10,108,255,.5)}
.plan__cta{justify-content:center}
.plan--feature{background:var(--night);border-color:transparent;color:var(--snow);position:relative;overflow:hidden;isolation:isolate}
.plan--feature .glow{position:absolute;width:380px;height:380px;right:-20%;top:-30%;border-radius:50%;filter:blur(60px);background:radial-gradient(circle,rgba(10,108,255,.35),transparent 66%);z-index:0}
.plan--feature > *{position:relative;z-index:1}
.plan--feature .plan__tag{color:var(--blue-l)}
.plan--feature .plan__per{color:var(--snow-2)}
.plan--feature .plan__desc{color:#c2c9d6}
.plan--feature .plan__list li{color:#eef1f7}

/* ============================================================
   GUARANTEE (dark glow panel) — signature
   ============================================================ */
.guarantee{margin:var(--edge) var(--edge) 0;text-align:center}
.guarantee .glow{width:760px;height:760px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(10,108,255,.36),transparent 62%)}
.guarantee .eyebrow{color:var(--snow-2);justify-content:center;margin-bottom:1.5rem}
.guarantee h2{font-weight:600;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.03em;max-width:18ch;margin-inline:auto;color:var(--snow)}
.guarantee h2 .accent{color:var(--blue-l)}
.guarantee p{max-width:60ch;margin:1.5rem auto 0;color:#c2c9d6;font-size:1.06rem;line-height:1.6}
.guarantee p strong{color:#fff;font-weight:600}

/* ============================================================
   FAQ (light)
   ============================================================ */
.faq__list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.2rem,2.2vw,1.6rem) .2rem;text-align:left;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:600;letter-spacing:-.015em}
.faq__icon{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:1.1rem;color:var(--blue);transition:transform .35s,background .35s,color .35s}
.faq__item.open .faq__icon{transform:rotate(45deg);background:var(--blue);color:#fff;border-color:var(--blue)}
.faq__a{overflow:hidden;height:0;opacity:0;transition:height .4s cubic-bezier(.16,1,.3,1),opacity .35s}
.faq__a p{padding:0 .2rem 1.5rem;max-width:64ch;color:var(--ink-2);font-size:1.02rem;line-height:1.6}

/* ============================================================
   CTA (dark glow panel)
   ============================================================ */
.cta{margin:var(--edge);text-align:center}
.cta .glow{width:820px;height:820px;left:50%;bottom:-46%;transform:translateX(-50%);background:radial-gradient(circle,rgba(10,108,255,.34),transparent 62%)}
.cta .eyebrow{color:var(--snow-2);justify-content:center;margin-bottom:1.4rem}
.cta h2{font-weight:700;font-size:clamp(2.6rem,7vw,5.6rem);line-height:.98;letter-spacing:-.035em;color:var(--snow)}
.cta h2 .accent{color:var(--blue-l);font-family:var(--serif);font-style:italic;font-weight:400}
.cta__p{max-width:48ch;margin:1.5rem auto 2.2rem;color:#c2c9d6;font-size:1.1rem;line-height:1.55}
.cta__sub{margin-top:1.4rem;font-size:.85rem;color:var(--snow-2);letter-spacing:.03em}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{margin:var(--edge);background:var(--night);color:var(--snow);border-radius:var(--radius);padding:clamp(2.6rem,5vw,4rem) var(--pad) 1.8rem}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid var(--hair-d)}
.footer__logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.1rem}
.footer__logo .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.footer__col--brand p{margin-top:1rem;color:var(--snow-2);font-size:.95rem;line-height:1.55;max-width:34ch}
.footer__label{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--snow-2);margin-bottom:1rem}
.footer__col a{display:block;color:#d3d8e2;font-size:.95rem;padding:.3rem 0;transition:color .25s}
.footer__col a:hover{color:var(--blue-l)}
.footer__meta{display:block;color:var(--snow-2);font-size:.9rem;padding:.3rem 0}
.footer__base{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.6rem;flex-wrap:wrap}
.footer__base span{font-size:.82rem;color:var(--snow-2)}
.footer__base-mono{letter-spacing:.1em}

/* ============================================================
   CONFIRMATION PAGE (confirmed.html)
   ============================================================ */
.confirm{margin-top:calc(var(--edge) + 4.5rem);text-align:center}
.confirm .glow{width:820px;height:820px;left:50%;top:-30%;transform:translateX(-50%);background:radial-gradient(circle,rgba(10,108,255,.34),transparent 62%)}
.confirm__inner{max-width:760px;margin-inline:auto}
.confirm__badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px;
  background:rgba(10,108,255,.16);border:1px solid rgba(90,166,255,.4);color:var(--snow);
  font-size:.85rem;font-weight:600;letter-spacing:.02em;margin-bottom:1.8rem}
.confirm__badge svg{width:16px;height:16px;color:var(--blue-l)}
.confirm__title{font-weight:700;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;letter-spacing:-.035em;color:var(--snow)}
.confirm__title .accent{color:var(--blue-l);font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.confirm__lede{max-width:56ch;margin:1.6rem auto 2.2rem;color:#c2c9d6;font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.6}
.confirm__actions{display:flex;justify-content:center;gap:1rem}
.confirm__meta{margin-top:1.6rem;font-size:.85rem;color:var(--snow-2);letter-spacing:.02em}

.nextgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.nextcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:clamp(1.5rem,2.6vw,2.1rem);transition:transform .35s,box-shadow .35s}
.nextcard:hover{transform:translateY(-4px);box-shadow:0 22px 50px -34px rgba(10,11,16,.55)}
.nextcard__no{display:inline-block;font-size:.82rem;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;margin-bottom:1.1rem}
.nextcard h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.5rem}
.nextcard p{color:var(--ink-2);font-size:.98rem;line-height:1.6}

.prep__title,.warm__title{font-weight:700;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.04;letter-spacing:-.03em;margin-bottom:2.2rem;max-width:20ch}
.preplist{list-style:none;display:flex;flex-direction:column;gap:.2rem;border-top:1px solid var(--line)}
.preprow{display:flex;align-items:center;gap:1rem;padding:1.15rem .3rem;border-bottom:1px solid var(--line)}
.preprow__ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:rgba(10,108,255,.12);display:inline-flex;align-items:center;justify-content:center}
.preprow__ic svg{width:16px;height:16px;color:var(--blue)}
.preprow__txt{font-size:clamp(1rem,1.8vw,1.2rem);color:var(--ink-2);line-height:1.5}
.preprow__txt strong{color:var(--ink);font-weight:600}

.warm__lede{max-width:60ch;color:var(--ink-2);font-size:1.02rem;line-height:1.6;margin:-1.4rem 0 2.2rem}
.warmgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,1.8vw,1.3rem)}
.warmcard{display:flex;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:1rem 1.15rem;transition:transform .35s,box-shadow .35s,border-color .35s}
.warmcard:hover{transform:translateY(-3px);box-shadow:0 20px 46px -32px rgba(10,11,16,.5);border-color:var(--blue)}
.warmcard__ava{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--night);border:1.5px solid var(--line)}
.warmcard__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem}
.warmcard__name{font-size:.8rem;font-weight:600;color:var(--blue)}
.warmcard__title{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.warmcard__play{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .3s,transform .3s}
.warmcard__play svg{width:16px;height:16px;margin-left:1px}
.warmcard:hover .warmcard__play{background:var(--blue);transform:scale(1.06)}

.reschedule{padding-top:0}
.reschedulecard{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3vw,2.6rem)}
.reschedulecard h3{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.35rem}
.reschedulecard p{color:var(--ink-2);font-size:.98rem;line-height:1.55;max-width:52ch}

/* ============================================================
   REVEAL (JS-driven)
   ============================================================ */
[data-reveal],[data-reveal-lines]{will-change:transform,opacity}
.reveal-line{display:block;overflow:hidden;padding-bottom:.08em}
.reveal-line__inner{display:block}

/* ============================================================
   MOTION LAYER
   ============================================================ */
/* scroll progress bar */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue),var(--blue-l));box-shadow:0 0 14px rgba(10,108,255,.7);pointer-events:none}

/* breathing / drifting glows for life on dark panels */
@keyframes glowBreathe{0%,100%{opacity:.85;transform:translate3d(0,0,0) scale(1)}50%{opacity:1;transform:translate3d(0,-2.2%,0) scale(1.08)}}
.glow{animation:glowBreathe 9s ease-in-out infinite}
.manifesto .glow,.guarantee .glow,.cta .glow{animation-duration:11s}
.hero__glow{animation:glowBreathe 10s ease-in-out infinite;will-change:transform,opacity}

/* hero glow follows pointer (JS sets --gx/--gy via independent translate so it
   composites with the breathing transform animation) */
.hero__glow{translate:var(--gx,0px) var(--gy,0px)}

/* magnetic elements */
[data-magnetic]{will-change:transform}

/* parallax targets */
[data-parallax]{will-change:transform}

/* sheen sweep on primary buttons */
.btn--solid,.btn--light{position:relative;overflow:hidden;isolation:isolate}
.btn--solid::after,.btn--light::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.btn--light::after{background:linear-gradient(110deg,transparent 30%,rgba(10,108,255,.18) 50%,transparent 70%)}
.btn--solid:hover::after,.btn--light:hover::after{transform:translateX(130%)}

/* image / card mask reveal */
[data-mask]{clip-path:inset(0 0 100% 0);will-change:clip-path}

/* active nav link pill */
.nav__link.active{color:var(--ink);background:rgba(10,108,255,.1)}
.nav__link.active::after{content:"";display:inline-block}

/* reel hover lift */
.reel{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.reel__thumb{transition:border-color .4s,box-shadow .45s}
.reel:hover{transform:translateY(-6px)}
.reel:hover .reel__thumb{border-color:rgba(106,161,255,.55);box-shadow:0 26px 60px -24px rgba(10,108,255,.65)}
.reel:hover .reel__thumb::after{background:linear-gradient(0deg,rgba(7,9,14,.5),rgba(10,108,255,.12) 60%)}
.reel:hover .reel__play{transform:translate(-50%,-50%) scale(1.1);background:#fff}
.reel:focus-visible{outline:none}
.reel:focus-visible .reel__thumb{border-color:var(--blue-l);box-shadow:0 0 0 3px rgba(106,161,255,.5)}

/* chip + list micro-interactions */
.featband__chips span{transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.featband__chips span:hover{transform:translateY(-3px);background:rgba(106,161,255,.18);border-color:rgba(106,161,255,.5)}
.problem__list li{transition:padding-left .35s,color .3s}
.problem__list li:hover{padding-left:.7rem;color:var(--blue)}

/* plan + why + phase lift already exist; add glow accent on feature plan */
.plan--feature .glow{animation:glowBreathe 8s ease-in-out infinite}

/* ============================================================
   POLISH LAYER — texture, spotlight, cue, focus, micro
   ============================================================ */
/* cinematic film grain — barely-there texture for premium depth */
.grain{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* cursor-following spotlight on cards (creative + premium movement) */
[data-spotlight]{isolation:isolate}
[data-spotlight] > *{position:relative;z-index:1}
[data-spotlight]::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;opacity:0;
  transition:opacity .45s ease;pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(10,108,255,.10),transparent 62%)}
[data-spotlight]:hover::before{opacity:1}
.phase--accent[data-spotlight]::before,.plan--feature[data-spotlight]::before{
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(106,161,255,.20),transparent 62%)}
.phase[data-spotlight]:hover,.why__card[data-spotlight]:hover,.plan[data-spotlight]:hover{
  border-color:rgba(10,108,255,.4)}

/* phase badge subtle lift on hover */
.phase__badge{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.phase:hover .phase__badge{transform:scale(1.08)}

/* workrow index + ghost movement */
.workrow__no{transition:color .35s,transform .35s}
.workrow:hover .workrow__no{color:var(--blue);transform:translateX(3px)}

/* hero scroll cue */
.hero__cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--snow-2);
  font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  transition:opacity .5s ease}
.hero__cue-line{width:1px;height:42px;background:linear-gradient(var(--blue-l),transparent);position:relative;overflow:hidden}
.hero__cue-line::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;
  background:var(--blue-l);animation:cueRun 1.8s cubic-bezier(.7,0,.3,1) infinite}
@keyframes cueRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}

/* nav CTA glow on hover */
.nav__cta{box-shadow:0 0 0 0 rgba(10,108,255,0)}
.nav__cta:hover{box-shadow:0 12px 32px -12px rgba(10,108,255,.8)}
.nav__logo .dot{transition:transform .4s,box-shadow .4s}
.nav__logo:hover .dot{transform:scale(1.25);box-shadow:0 0 18px var(--blue)}

/* nav active underline grow */
.nav__link{position:relative}
.nav__link::after{content:"";position:absolute;left:50%;bottom:.28rem;width:0;height:1.5px;border-radius:2px;
  background:var(--blue);transform:translateX(-50%);transition:width .35s cubic-bezier(.16,1,.3,1)}
.nav__link.active::after{width:42%}

/* proof imagery hover zoom */
.proof__img{transition:transform .7s cubic-bezier(.16,1,.3,1),border-color .4s}
.proof__img:hover{transform:scale(1.035);border-color:rgba(106,161,255,.45)}

/* accessible focus rings (premium clarity) */
a:focus-visible,button:focus-visible,.btn:focus-visible,.faq__q:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}

/* eyebrow dot pulse */
@keyframes dotPulse{0%,100%{box-shadow:0 0 8px var(--blue);opacity:.9}50%{box-shadow:0 0 16px var(--blue);opacity:1}}
.eyebrow::before{animation:dotPulse 3.2s ease-in-out infinite}

/* ============================================================
   PREMIUM UPGRADES — tactile card depth, accents, badges
   ============================================================ */
/* resting elevation so cards float off the paper (premium tactility) */
.phase,.why__card{position:relative;box-shadow:0 1px 2px rgba(10,11,16,.04),0 12px 32px -24px rgba(10,11,16,.4)}
.why__card{overflow:hidden}
.phase:hover,.why__card:hover{box-shadow:0 1px 2px rgba(10,11,16,.05),0 38px 72px -34px rgba(10,108,255,.3)}
.plan{box-shadow:0 1px 2px rgba(10,11,16,.04),0 14px 42px -30px rgba(10,11,16,.32);
  transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s,border-color .42s}
.plan:hover{transform:translateY(-5px);border-color:rgba(10,108,255,.35);box-shadow:0 32px 66px -34px rgba(10,108,255,.3)}
.plan--feature{box-shadow:0 22px 60px -30px rgba(10,108,255,.5)}
.plan--feature:hover{box-shadow:0 40px 84px -34px rgba(10,108,255,.62)}

/* animated blue top-accent line on light cards (draws in on hover) */
.phase::after,.why__card::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;z-index:4;
  background:linear-gradient(90deg,var(--blue),var(--blue-l));transition:width .55s cubic-bezier(.16,1,.3,1)}
.phase:hover::after,.why__card:hover::after{width:100%}

/* "Most aligned" badge on the feature plan */
.plan{position:relative}
.plan__badge{position:absolute;top:clamp(1.4rem,2.4vw,2rem);right:clamp(1.4rem,2.4vw,2rem);z-index:2;
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:.42rem .8rem;border-radius:999px;color:#fff;
  background:linear-gradient(180deg,#3a8bff,var(--blue));
  box-shadow:0 8px 22px -8px rgba(10,108,255,.85),inset 0 1px 0 rgba(255,255,255,.3)}

/* deliverables rows — premium lift + drawn accent bar */
.workrow{position:relative;border-radius:14px}
.workrow::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2.5px;height:0;border-radius:2px;background:linear-gradient(var(--blue),var(--blue-l));
  transition:height .45s cubic-bezier(.16,1,.3,1)}
.workrow:hover{box-shadow:0 20px 48px -30px rgba(10,11,16,.5)}
.workrow:hover::before{height:58%}
.workrow__no{font-variant-numeric:tabular-nums}
.workrow:hover .workrow__title{color:var(--ink)}

/* section index numerals — premium monospaced feel + blue tick */
.section__index{font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:.5rem}

/* lit top edge on dark panels — refined glass definition */
.panel::after,.hero::after,.featband::after,.showreel::after,.footer::after{content:"";
  position:absolute;left:0;right:0;top:0;height:1px;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 50%,transparent)}
.footer{position:relative}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .problem__grid,.manifesto__cols,.proof__top,.pricing__grid,.footer__grid{grid-template-columns:1fr}
  .process__grid,.why__grid{grid-template-columns:1fr 1fr}
  .proof__metrics{grid-template-columns:1fr 1fr}
  .hero__stats{grid-template-columns:1fr 1fr;gap:1.4rem}
  .footer__grid{gap:1.6rem}
  .nav__links{display:none}
}
@media (max-width:640px){
  :root{--radius:20px}
  .nav__cta{display:none}
  .nav__burger{display:block}
  .hero{margin-top:70px;min-height:auto;padding:5.5rem 0 2.5rem}
  .hero__media img{object-position:68% center}
  .process__grid,.why__grid,.proof__imgs{grid-template-columns:1fr}
  .proof__metrics{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
  .hero__stats{grid-template-columns:1fr 1fr}
  .workrow{grid-template-columns:auto 1fr auto;gap:.9rem}
  .workrow__meta{display:none}
  .confirm__actions{flex-direction:column;align-items:stretch}
  .nextgrid,.warmgrid{grid-template-columns:1fr}
  .reschedulecard{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .showreel__head{flex-direction:column;align-items:flex-start}
  .reelgrid,.reelgrid--two{grid-template-columns:1fr}
  .reelgroup__head{flex-direction:column;align-items:flex-start;gap:.3rem}
  .reel--feature .reel__thumb{aspect-ratio:16/10}
  .tquote{flex-direction:column;gap:1rem}
  .hero__cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__cue{display:none}
}