/* =====================================================================
   SOMETHING NEW — 2026 SITE
   Locked visual world (do not drift without Ross's sign-off):
     material  Bodi Liquid Glass
     hero      effects-board World 1, ported verbatim (.world.w1 block)
     stat bar  Blue Sense anatomy
     type      Switzer, weight carries emphasis, never a second family
     blue      #2453FF / #1E40AF ("True")
     motion    cubic-bezier(.22,1,.36,1), transform + opacity only.
               NEVER animate width/height/padding/margin/border-radius.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root{
  --ink:#0A0F1E;
  --muted:#525C70;
  --accent:#2453FF;
  --accent-strong:#1E40AF;
  --on-accent:#FFFFFF;
  --border:rgba(10,15,30,.12);
  --border-strong:rgba(10,15,30,.24);

  --card-bg:linear-gradient(160deg, rgba(159,193,255,.55), rgba(87,122,222,.32));
  --card-ink:rgba(15,25,55,.55);
  --card-border:rgba(255,255,255,.55);

  --ground:linear-gradient(160deg,#EAF0FC 0%, #F7FAFF 48%, #ECF2FD 100%);

  /* dark band (World 2 aurora), used by How we think + The audit */
  --dark:#070B18;
  --dark-ink:#F2F6FF;
  --dark-muted:#98A3BC;
  --dark-border:rgba(255,255,255,.12);

  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.7s;
  --shell:1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.shell{ max-width:var(--shell); margin:0 auto; padding:0 20px; }

/* ---------------------------------------------------------------
   2. GLASS PRIMITIVE (Bodi liquid glass)
   The light variant is the hero's approved glass, unchanged.
   The --edge variant adds Bodi's masked gradient border: bright at
   the top AND bottom, transparent through the middle. Used on dark.
   --------------------------------------------------------------- */
.glass{
  position:relative;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.8);
}
.glass-dark{
  position:relative;
  background:rgba(255,255,255,.05);
  background-blend-mode:luminosity;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.4);
}
/* masked 1.4px gradient border, bright top and bottom only */
.glass-dark::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.65) 0%,
    rgba(255,255,255,.06) 32%,
    rgba(255,255,255,.06) 68%,
    rgba(255,255,255,.42) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:rgba(255,255,255,.86); }
  .glass-dark{ background:rgba(255,255,255,.09); }
}

/* ---------------------------------------------------------------
   3. TYPE SCALE (Precision: weight carries emphasis)
   --------------------------------------------------------------- */
.h1{ font-size:clamp(34px,4.2vw,54px); font-weight:700; letter-spacing:-0.03em; line-height:1.03; }
.h2{ font-size:clamp(28px,3.3vw,42px); font-weight:700; letter-spacing:-0.03em; line-height:1.08; }
.h3{ font-size:clamp(19px,1.6vw,23px); font-weight:700; letter-spacing:-0.02em; line-height:1.2; }
.payoff{ font-style:normal; font-weight:800; color:var(--accent-strong); }
.sub{ font-size:16px; font-weight:400; line-height:1.6; color:var(--muted); max-width:50ch; }
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent-strong); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:20px; height:1.5px; background:var(--accent); display:inline-block; flex:0 0 auto; }
.lede{ font-size:16.5px; line-height:1.65; color:var(--muted); }

.section{ padding:104px 0; position:relative; }
.section-head{ max-width:760px; margin-bottom:52px; }
.section-head .h2{ margin-bottom:16px; }

/* ---------------------------------------------------------------
   4. BUTTONS (21st.dev / MagicUI ShinyButton anatomy: rounded, 1px
   border, backdrop blur, shadow on hover only, no inset top line)
   --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:13.5px; font-weight:500; letter-spacing:.01em;
  padding:12px 24px; border-radius:10px; white-space:nowrap;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:none;
  transition:box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.btn.primary{ background:rgba(30,64,175,.92); border:1px solid rgba(30,64,175,.92); color:#fff; }
.btn.primary:hover{ background:var(--accent-strong); box-shadow:0 6px 18px rgba(10,15,30,.10); }
.btn.secondary{ background:rgba(255,255,255,.45); border:1px solid rgba(10,15,30,.12); color:var(--ink); }
.btn.secondary:hover{ background:rgba(255,255,255,.72); border-color:rgba(10,15,30,.20); box-shadow:0 6px 18px rgba(10,15,30,.10); }
.btn.ondark{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff; }
.btn.ondark:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34); }
.btn.lg{ padding:15px 30px; font-size:14.5px; }

/* text link with a light bar that draws in */
.tlink{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--accent-strong);
}
.tlink::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink .arw{ transition:transform .45s var(--ease); }
.tlink:hover .arw{ transform:translateX(4px); }

/* ---------------------------------------------------------------
   5. NAVIGATION
   Composite of four 21st.dev patterns, all transform/opacity only:
     · Limelight Nav / Tubelight Navbar — a FIXED-WIDTH lamp that
       translateX-es to the hovered (or current) item. Fixed width is
       the whole point: no width animation, no radius distortion.
     · Text Roll (Cnippet) — two stacked label copies, one rolls out
       as the other rolls in.
     · Glassmorphism Navigation — the glass shell (ours, already locked).
     · Resizable Navbar (Aceternity) — condenses on scroll. Ours does it
       with paint-only properties plus a translateY, never padding.
   --------------------------------------------------------------- */
.navbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:20px 20px 0;
  pointer-events:none;
}
.nav{
  pointer-events:auto;
  position:relative;
  max-width:var(--shell); margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.8);
  transition:background .5s var(--ease), box-shadow .5s var(--ease),
             border-color .5s var(--ease), transform .5s var(--ease);
}
/* condensed state: paint-only + a lift. No padding animation. */
.navbar.is-stuck .nav{
  background:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 14px 34px rgba(10,15,30,.13), inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-6px);
}
/* cursor sheen inside the glass — same light language as the ad cards */
.nav::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(36,83,255,.10), transparent 70%);
  opacity:0; transition:opacity .45s var(--ease);
}
.nav:hover::after{ opacity:1; }

.logo{ font-weight:700; font-size:16.5px; letter-spacing:-0.01em; color:var(--ink); position:relative; z-index:2; }
.logo .dot{ color:var(--accent); }

.navlinks{ position:relative; display:flex; align-items:center; gap:2px; z-index:2; }

/* the lamp: fixed width, only ever translated */
.limelight{
  position:absolute; left:0; bottom:-9px; width:34px; height:2px;
  border-radius:2px; background:var(--accent);
  transform:translateX(var(--lx,0)) translateZ(0);
  opacity:0;
  transition:transform .55s var(--ease), opacity .35s var(--ease);
  pointer-events:none;
}
/* the spill of light above the lamp */
.limelight::before{
  content:""; position:absolute; left:50%; bottom:0;
  width:118px; height:44px; transform:translateX(-50%);
  background:radial-gradient(ellipse at bottom, rgba(36,83,255,.28), transparent 72%);
  pointer-events:none;
}
.navlinks.is-lit .limelight{ opacity:1; }

.navlink{
  position:relative; z-index:1;
  padding:9px 14px; border-radius:999px;
  font-size:13.5px; font-weight:500; color:var(--muted);
  transition:color .4s var(--ease);
}
.navlink:hover,
.navlink.is-current{ color:var(--ink); }
/* per-link glass pill: its own element, so opacity alone animates */
.navlink::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0; transition:opacity .4s var(--ease);
}
.navlink:hover::before{ opacity:1; }

/* Text Roll */
.roll{ display:block; position:relative; overflow:hidden; }
.roll span{ display:block; transition:transform .5s var(--ease); }
.roll .b{ position:absolute; inset:0; transform:translateY(105%); }
.navlink:hover .roll .a{ transform:translateY(-105%); }
.navlink:hover .roll .b{ transform:translateY(0); }

.nav-cta{ position:relative; z-index:2; }

/* mobile sheet */
.burger{ display:none; position:relative; z-index:2; width:40px; height:40px; border-radius:12px; align-items:center; justify-content:center; }
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:transform .45s var(--ease), opacity .3s var(--ease); }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:transform .45s var(--ease); }
.burger span::before{ transform:translateY(-6px); }
.burger span::after{ transform:translateY(6px); }
.is-open .burger span{ transform:rotate(45deg); }
.is-open .burger span::before{ transform:translateY(0) rotate(-90deg); }
.is-open .burger span::after{ transform:translateY(0); opacity:0; }

.sheet{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:rgba(240,245,255,.72);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  opacity:0; transition:opacity .5s var(--ease);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 34px;
}
.is-open .sheet{ opacity:1; pointer-events:auto; }
.sheet a{
  font-size:32px; font-weight:700; letter-spacing:-0.03em; padding:10px 0;
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:calc(var(--i) * 60ms);
}
.is-open .sheet a{ opacity:1; transform:none; }

@media (max-width:900px){
  .navlinks, .nav-cta{ display:none; }
  .burger{ display:flex; }
}

/* ---------------------------------------------------------------
   6. SCROLL REVEAL (shared)
   --------------------------------------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
[data-reveal].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   7. HERO — effects-board WORLD 1, ported verbatim.
   Everything between the two W1 markers is the approved hero. Do not
   edit in place; append overrides below the closing marker instead.
   ===================================================================== */
/* ---- W1 START ---- */
.world{ position:relative; overflow:hidden; background:var(--ground); color:var(--ink); }
.w1{
  --ink:#0A0F1E; --muted:#525C70; --accent:#2453FF; --accent-strong:#1E40AF; --on-accent:#FFFFFF;
  --border:rgba(10,15,30,.12); --border-strong:rgba(10,15,30,.24);
  --card-bg:linear-gradient(160deg, rgba(159,193,255,.55), rgba(87,122,222,.32));
  --card-ink:rgba(15,25,55,.55); --card-border:rgba(255,255,255,.55);
  background:linear-gradient(160deg,#EAF0FC 0%, #F7FAFF 48%, #ECF2FD 100%);
  padding-bottom:70px;
}
.w1-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.w1-blobs .blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.6; }
.w1-blobs .b1{ width:560px; height:560px; left:-140px; top:-160px; background:radial-gradient(circle,#9CC0FF,transparent 70%); animation:w1drift1 46s ease-in-out infinite alternate; }
.w1-blobs .b2{ width:620px; height:620px; right:-180px; top:20px; background:radial-gradient(circle,#5B7EFF,transparent 70%); animation:w1drift2 58s ease-in-out infinite alternate; }
.w1-blobs .b3{ width:480px; height:480px; left:28%; bottom:-240px; background:radial-gradient(circle,#C9DBFF,transparent 70%); animation:w1drift3 40s ease-in-out infinite alternate; }
@keyframes w1drift1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(60px,40px) scale(1.15); } }
@keyframes w1drift2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-50px,60px) scale(1.1); } }
@keyframes w1drift3{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(40px,-30px) scale(1.2); } }
@media (prefers-reduced-motion: reduce){ .w1-blobs .blob{ animation:none !important; } }

.hero{ position:relative; z-index:1; max-width:var(--shell); margin:0 auto; padding:150px 20px 46px; display:grid; grid-template-columns:1.7fr 1fr; gap:56px; align-items:center; }
.hero > *{ min-width:0; }
.w1 .h1{ margin-bottom:20px; color:var(--ink); }
.w1 .sub{ margin-bottom:26px; }
.ctas{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* ad columns: the locked signature object */
.adcols{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; height:400px; overflow:hidden; border-radius:16px; }
.adcol{ overflow:hidden; min-width:0; }
.adtrack{ display:flex; flex-direction:column; gap:10px; will-change:transform; }
.adcol:nth-child(1) .adtrack{ animation:colDown 26s linear infinite; }
.adcol:nth-child(2) .adtrack{ animation:colUp 32s linear infinite; }
.adcol:nth-child(3) .adtrack{ animation:colDown 29s linear infinite; }
.adcols:hover .adtrack{ animation-play-state:paused; }
@keyframes colDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
@keyframes colUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
.adcard{
  width:100%; aspect-ratio:9/16; flex:0 0 auto; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; letter-spacing:0.07em;
  background:var(--card-bg); color:var(--card-ink); border:1px solid var(--card-border);
}
@media (prefers-reduced-motion: reduce){ .adtrack{ animation:none !important; } }

/* ad-card edge lights as the cursor passes. Dark navy so it reads on a
   pale card. BORDER ONLY: an inset shadow bands badly on a narrow card. */
.adcard{
  position:relative; --edge:0;
  border-width:1.5px;
  border-color:rgba(10,15,30, calc(.08 + var(--edge) * .52));
  transition:border-color .35s var(--ease);
}
.adcard.is-hot,
.adcard:hover{
  border-color:rgba(10,15,30,.88);
  z-index:2;
  /* NO scale: the card is exactly its column's width and the column
     clips, so any growth cuts the left and right borders off. */
}
@media (prefers-reduced-motion: reduce){ .adcard{ transition:none; } }

/* Bottom bar: Blue Sense anatomy — label / number / denominator, thin
   dividers between cells only, no horizontal rules. */
.stat-row{ position:relative; z-index:2; max-width:var(--shell); margin:0 auto; padding:30px 20px 8px; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat-cell{ padding:0 28px; border-left:1px solid rgba(10,15,30,.12); min-width:0; }
.stat-cell:first-child{ padding-left:0; border-left:none; }
.stat-label{ font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#4A5670; margin-bottom:10px; line-height:1.4; }
/* Between the 2-column breakpoint and the full shell, the cells get narrow
   enough that the longest label wraps to two lines while the other three
   stay on one, which drops that cell's number out of line with the rest.
   Reserve two lines across the band so the four numbers stay on one axis. */
@media (min-width:641px) and (max-width:1200px){
  .stat-label{ min-height:28px; }
}
.stat-num{ font-size:30px; font-weight:800; letter-spacing:-0.02em; color:#0A0F1E; line-height:1.05; }
.stat-num em{ font-style:normal; font-weight:800; color:#1E40AF; }
.stat-denom{ font-size:10.5px; font-weight:500; color:#6B7488; margin-top:10px; line-height:1.35; }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:32px; padding-top:128px; }
  .adcols{ height:300px; }
}
@media (max-width:640px){
  .stat-grid{ grid-template-columns:1fr 1fr; row-gap:22px; }
  .stat-cell:nth-child(odd){ padding-left:0; border-left:none; }
  .stat-cell:nth-child(n+3){ padding-top:18px; }
}
@media (max-width:480px){ .adcols{ height:250px; } }
/* ---- W1 END ---- */

/* ---------------------------------------------------------------
   8. MARQUEE (shared by Trusted by + Winning at scale)
   --------------------------------------------------------------- */
.marquee{
  position:relative; overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.mtrack{ display:flex; gap:var(--gap,18px); width:max-content; will-change:transform; }
.mtrack.left{ animation:mLeft var(--speed,60s) linear infinite; }
.mtrack.right{ animation:mRight var(--speed,60s) linear infinite; }
.marquee:hover .mtrack{ animation-play-state:paused; }
@keyframes mLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes mRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .mtrack{ animation:none !important; } }

/* ---------------------------------------------------------------
   9. §2 TRUSTED BY
   Per the wireframe: TWO staggered logo lines running in opposite
   directions, constrained to 70% width, with a 12%/88% edge fade. The
   second line is offset 56px so the two never line up vertically.
   --------------------------------------------------------------- */
.trusted{ padding:96px 0 88px; }
.trusted .claim{ font-size:clamp(24px,2.7vw,34px); font-weight:700; letter-spacing:-0.03em; line-height:1.15; max-width:19ch; margin-bottom:44px; }
.trusted .claim em{ font-style:normal; color:var(--muted); }

.logo-marquee-wrap{
  max-width:70%; margin:0 auto 52px;
  display:flex; flex-direction:column; gap:14px;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.logo-line{ overflow:hidden; }
.logo-track{ display:flex; align-items:center; width:max-content; will-change:transform; }
.logo-track--a{ animation:mLeft 60s linear infinite; }
.logo-track--b{ animation:mRight 80s linear infinite; }
.logo-line--b .logo-track{ margin-left:56px; }
.logo-marquee-wrap:hover .logo-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .logo-track{ animation:none !important; } }

.logo-cell{
  flex:0 0 auto; width:150px; height:64px;
  display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:700; letter-spacing:.02em; color:rgba(10,15,30,.42);
  transition:color .45s var(--ease);
}
.logo-cell:hover{ color:var(--ink); }

/* testimonial cards: quote on top, footer pinned to the bottom behind a
   hairline, so the three cards align no matter how long the quotes run */
.testi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testi-card{ padding:26px; display:flex; flex-direction:column; gap:20px; }
.testi-quote{ font-size:15px; line-height:1.55; color:var(--ink); margin:0; }
.testi-foot{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:12px; font-size:13px; font-weight:700;
}
.testi-logo{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-width:56px; height:26px; padding:0 8px; border-radius:6px;
  background:rgba(10,15,30,.05); border:1px solid var(--border);
  font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--muted);
}
.testi-role{ display:block; font-weight:400; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
@media (max-width:1000px){ .logo-marquee-wrap{ max-width:88%; } .testi-row{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------
   10. §3 WINNING AT SCALE
   Row 1 = 9:16 ads. Row 2 = landing pages in a browser frame,
   ALTERNATING with square offer-test cards, per the wireframe.
   --------------------------------------------------------------- */
.marquee-row{ padding:8px 0; }
.work-card{
  flex:0 0 auto; width:140px; aspect-ratio:9/16; border-radius:10px;
  background:var(--card-bg); border:1px solid var(--card-border);
  display:flex; align-items:flex-end; padding:10px;
  font-size:9.5px; font-weight:700; letter-spacing:.07em; color:var(--card-ink);
  /* same proximity edge-light as the hero: one light system, one page */
  --edge:0; border-width:1.5px;
  border-color:rgba(10,15,30, calc(.08 + var(--edge) * .52));
  transition:border-color .35s var(--ease);
}
.work-card.is-hot,.work-card:hover{ border-color:rgba(10,15,30,.88); }

.work-square{
  flex:0 0 auto; width:160px; aspect-ratio:1; border-radius:10px;
  background:var(--card-bg); border:1.5px solid var(--card-border);
  display:flex; align-items:flex-end; padding:12px;
  font-size:9.5px; font-weight:700; letter-spacing:.07em; color:var(--card-ink);
  --edge:0; border-color:rgba(10,15,30, calc(.08 + var(--edge) * .52));
  transition:border-color .35s var(--ease);
}
.work-square.is-hot,.work-square:hover{ border-color:rgba(10,15,30,.88); }

.browser-frame{
  flex:0 0 auto; width:220px; border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.5); border:1.5px solid var(--card-border);
  --edge:0; border-color:rgba(10,15,30, calc(.08 + var(--edge) * .52));
  transition:border-color .35s var(--ease);
}
.browser-frame.is-hot,.browser-frame:hover{ border-color:rgba(10,15,30,.88); }
.browser-chrome{ display:flex; gap:5px; padding:7px 9px; background:rgba(10,15,30,.05); border-bottom:1px solid var(--border); }
.browser-chrome span{ width:7px; height:7px; border-radius:50%; background:rgba(10,15,30,.18); }
.browser-body{
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  background:var(--card-bg);
  font-size:9.5px; font-weight:700; letter-spacing:.07em; color:var(--card-ink);
}

/* ---------------------------------------------------------------
   11. §4 HOW WE THINK — dark aurora band (World 2)
   --------------------------------------------------------------- */
.band-dark{
  position:relative; overflow:hidden;
  background:var(--dark); color:var(--dark-ink);
  padding:112px 0 118px;
}
.aurora{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; }
.aurora i{ position:absolute; border-radius:50%; filter:blur(110px); display:block; }
.aurora .a1{ width:620px; height:620px; left:-160px; top:-180px; background:radial-gradient(circle,#2453FF,transparent 70%); animation:w1drift1 52s ease-in-out infinite alternate; }
.aurora .a2{ width:560px; height:560px; right:-140px; top:40px; background:radial-gradient(circle,#7C3AED,transparent 70%); animation:w1drift2 64s ease-in-out infinite alternate; }
.aurora .a3{ width:520px; height:520px; left:36%; bottom:-260px; background:radial-gradient(circle,#0EA5E9,transparent 70%); animation:w1drift3 46s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce){ .aurora i{ animation:none !important; } }
.band-dark > .shell{ position:relative; z-index:1; }
.band-dark .eyebrow{ color:#8FB0FF; }
.band-dark .eyebrow::before{ background:#8FB0FF; }
.band-dark .lede{ color:var(--dark-muted); }

.thesis{ display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:end; margin-bottom:64px; }
.thesis .h2{ max-width:16ch; }
.thesis .h2 .soft{ color:var(--dark-muted); font-weight:700; }

.principles{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.principle{
  position:relative; overflow:hidden;
  padding:28px 24px 26px; border-radius:20px;
  background:#FFFFFF; color:var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.principle:hover{ transform:translateY(-6px); box-shadow:0 34px 74px rgba(0,0,0,.42); }
/* Wireframe geometry: ghost 56px at top:-6px (a deliberate, shallow
   overhang, not the half-clipped 64px I had), then the [ICON] tile,
   then label, then body. */
.principle .ghost{
  position:absolute; right:14px; top:-6px;
  font-size:56px; line-height:1; font-weight:800; letter-spacing:-0.04em;
  color:rgba(10,15,30,.055); pointer-events:none; z-index:0;
}
.hwt-icon{
  position:relative; z-index:1;
  width:36px; height:36px; border-radius:9px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(36,83,255,.08); border:1px solid rgba(36,83,255,.18);
  font-size:8.5px; font-weight:700; letter-spacing:.04em; color:var(--accent-strong);
}
.principle h3{ font-size:16.5px; font-weight:700; letter-spacing:-0.02em; margin-bottom:10px; position:relative; }
.principle p{ font-size:13.5px; line-height:1.55; color:var(--muted); position:relative; }
@media (max-width:1000px){ .principles{ grid-template-columns:1fr 1fr; } .thesis{ grid-template-columns:1fr; gap:26px; align-items:start; } }
@media (max-width:560px){ .principles{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------
   12. §5 SERVICES — Trifecta venn + accordion with media swap
   --------------------------------------------------------------- */
.trifecta{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:76px; }
.venn{ position:relative; height:290px; }
.venn i{
  position:absolute; width:186px; height:186px; border-radius:50%; display:block;
  border:1.5px solid rgba(36,83,255,.32);
  background:radial-gradient(circle at 32% 28%, rgba(159,193,255,.42), rgba(87,122,222,.16));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .8s var(--ease), border-color .6s var(--ease);
}
.venn .v1{ left:50%; top:0; margin-left:-93px; }
.venn .v2{ left:50%; bottom:6px; margin-left:-176px; }
.venn .v3{ left:50%; bottom:6px; margin-left:-10px; }
.venn:hover .v1{ transform:translateY(-10px); }
.venn:hover .v2{ transform:translate(-10px,8px); }
.venn:hover .v3{ transform:translate(10px,8px); }
.venn:hover i{ border-color:rgba(36,83,255,.55); }
.venn b{
  position:absolute; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-strong); z-index:2;
}
.venn .l1{ left:50%; top:44px; transform:translateX(-50%); }
.venn .l2{ left:50%; bottom:64px; transform:translateX(-134px); }
.venn .l3{ left:50%; bottom:64px; transform:translateX(48px); }
.venn .core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); z-index:3; text-align:center; line-height:1.4;
}

.svc{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start; }
.svc-list{ border-top:1px solid var(--border); }
.svc-row{ border-bottom:1px solid var(--border); }
.svc-btn{
  width:100%; display:flex; align-items:flex-start; gap:18px; text-align:left;
  padding:24px 0; transition:opacity .4s var(--ease);
}
.svc-num{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--accent-strong); flex:0 0 auto; width:24px; padding-top:9px; }
/* Row hierarchy per COPY.md §6: service NAME is the big line, the simple
   descriptor is the small sub-line under it, both visible when closed. */
.svc-head{ flex:1 1 auto; display:flex; flex-direction:column; gap:5px; min-width:0; }
.svc-name{ font-size:23px; font-weight:700; letter-spacing:-0.02em; transition:color .4s var(--ease); }
.svc-desc{ font-size:13.5px; font-weight:400; line-height:1.45; color:var(--muted); }
.svc-row.is-open .svc-name{ color:var(--accent-strong); }
.svc-sign{ position:relative; width:12px; height:12px; flex:0 0 auto; align-self:center; margin-top:6px; }
.svc-sign::before,.svc-sign::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--ink); transition:transform .5s var(--ease); }
.svc-sign::before{ width:12px; height:1.5px; }
.svc-sign::after{ width:1.5px; height:12px; }
.svc-row.is-open .svc-sign::after,
.faq-row.is-open .svc-sign::after{ transform:scaleY(0); }
/* Accordion panels use the grid 0fr -> 1fr technique rather than an
   animated height. Both touch layout, so this is not a perf win: it is a
   correctness win. Height needs JS to measure the content in px, which
   then goes stale on resize and again when the webfont swaps in and
   reflows the text. 0fr -> 1fr is self-sizing, so there is nothing to
   measure and nothing to keep in sync. */
.svc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); }
.svc-panel > *{ overflow:hidden; min-height:0; }
.svc-row.is-open .svc-panel{ grid-template-rows:1fr; }
/* The collapsing grid child must carry NO vertical padding: 0fr zeroes the
   content box but padding survives it, so a "closed" panel would still be
   24px tall. Horizontal padding is fine (it never adds height); the bottom
   gap becomes a margin on the last inner element, which the child's own
   overflow:hidden clips away to nothing when collapsed. */
.svc-panel-in{ padding:0 0 0 42px; }
.svc-panel-in > :last-child{ margin-bottom:24px; }
.svc-panel p{ font-size:14.5px; line-height:1.6; color:var(--muted); margin-bottom:14px; max-width:46ch; }
.svc-panel ul{ display:flex; flex-wrap:wrap; gap:8px; }
.svc-panel li{
  font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--accent-strong);
  padding:5px 11px; border-radius:999px;
  background:rgba(36,83,255,.07); border:1px solid rgba(36,83,255,.16);
}

.svc-media{ position:relative; height:620px; border-radius:20px; overflow:hidden; }
.svc-shot{
  position:absolute; inset:0; padding:20px;
  display:flex; flex-direction:column; gap:12px;
  opacity:0; transform:translateY(12px) scale(.985);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.svc-shot.is-on{ opacity:1; transform:none; }
.svc-shot .cap{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.shot-grid{ flex:1 1 auto; display:grid; gap:10px; min-height:0; }
.shot-grid.g3{ grid-template-columns:repeat(3,1fr); }
.shot-grid.g2{ grid-template-columns:repeat(2,1fr); }
.shot-grid.g1{ grid-template-columns:1fr; }

/* Layouts sized to what is actually in the image. The old g2/g3 forced
   every service into the same square-ish cells, so a 2.9:1 dashboard or a
   9:16 ad got cropped to fit. These match the artwork instead:
     one     a single full-bleed panel
     stack2  two wide panels stacked (charts, dashboards)
     stack3  three wide panels stacked
     row4    four portraits across (9:16 ad creative)
     quad    2x2 of equal-ratio panels
     split   two columns, left twice the right */
.shot-grid.one{ grid-template-columns:1fr; }
.shot-grid.stack2{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
.shot-grid.stack3{ grid-template-columns:1fr; grid-template-rows:repeat(3,1fr); }
.shot-grid.row4{ grid-template-columns:repeat(4,1fr); }
.shot-grid.quad{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.shot-grid.split{ grid-template-columns:2fr 1fr; }
.shot-grid .span2{ grid-column:span 2; }
.tile{
  border-radius:10px; background:var(--card-bg); border:1px solid var(--card-border);
  display:flex; align-items:flex-end; padding:9px; min-height:0;
  font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--card-ink);
}
.tile.rows{ display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:9px; padding:20px; }
.tile .bar{ height:7px; border-radius:4px; background:rgba(30,64,175,.28); }
.tile .bar:nth-child(3n+1){ width:92%; }
.tile .bar:nth-child(3n+2){ width:64%; }
.tile .bar:nth-child(3n+3){ width:78%; }
.tile .bar:first-child{ width:44%; height:10px; background:rgba(30,64,175,.42); margin-bottom:6px; }
@media (max-width:1000px){ .trifecta{ grid-template-columns:1fr; gap:40px; } .svc{ grid-template-columns:1fr; } .svc-media{ height:320px; order:-1; } }

/* ---------------------------------------------------------------
   13. §6 CASE STUDIES
   Per the wireframe: a DARK band, and each client is a full rounded
   card (not a rule-separated row), 2 columns, copy left, a spread of
   real creative right.
   --------------------------------------------------------------- */
.cases{ padding:104px 0 112px; }
.case-rows{ display:flex; flex-direction:column; gap:24px; }
.case-row{
  border-radius:16px; padding:40px;
  display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
  transition:border-color .55s var(--ease), transform .55s var(--ease);
}
.case-row:hover{ border-color:rgba(255,255,255,.20); transform:translateY(-4px); }
.case-num{ font-size:13px; font-weight:700; letter-spacing:.1em; color:#8FB0FF; margin-bottom:14px; }
.case-logo{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:120px; height:34px; padding:0 12px; margin-bottom:18px; border-radius:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#B9C6E2;
}
.case-h3{ font-size:clamp(20px,2.4vw,28px); font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:#fff; margin-bottom:12px; }
.case-h3 em{ font-style:normal; color:#8FB0FF; }
.case-context{ font-size:14px; line-height:1.55; color:var(--dark-muted); margin-bottom:20px; max-width:46ch; }

.slack-bubble{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:10px; padding:16px 18px; margin-bottom:20px; max-width:420px;
}
.slack-head{ display:flex; align-items:center; gap:8px; }
.slack-avatar{ width:26px; height:26px; border-radius:7px; flex:0 0 auto; background:linear-gradient(140deg,#4A154B,#8B4C8C); }
.slack-who{ font-size:12.5px; font-weight:700; color:#E7EDFB; }
.slack-time{ font-size:10.5px; font-weight:500; color:#7C89A6; margin-left:5px; }
.slack-msg{ font-size:13.5px; line-height:1.5; color:#DDE5F5; margin-top:9px; }
.slack-reacts{ display:flex; gap:6px; margin-top:11px; }
.slack-reacts span{
  font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:rgba(36,83,255,.16); border:1px solid rgba(143,176,255,.24); color:#C3D3FF;
}
.case-link{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:#8FB0FF; }
.case-link .arw{ transition:transform .45s var(--ease); }
.case-link:hover .arw{ transform:translateX(4px); }

/* three pieces of real creative, fanned across the card */
.case-media{ position:relative; height:360px; }
.case-card{
  position:absolute; width:180px; aspect-ratio:9/16; border-radius:10px;
  display:flex; align-items:flex-end; padding:10px;
  font-size:9.5px; font-weight:700; letter-spacing:.07em; color:#9DB0D8;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
  transition:transform .65s var(--ease), border-color .5s var(--ease);
}
.case-card--a{ left:2%;  top:24px; transform:rotate(-5deg); z-index:1; }
.case-card--b{ left:32%; top:0;    transform:rotate(2deg);  z-index:2; }
.case-card--c{ left:62%; top:36px; transform:rotate(6deg);  z-index:3; }
/* every row uses the same fan as the first: a -5, b +2, c +6. The old
   per-row overrides made each case study lean a different way. */
.case-row:hover .case-card{ border-color:rgba(255,255,255,.34); }
.case-row:hover .case-card--a{ transform:rotate(-8deg) translate(-10px,-6px); }
.case-row:hover .case-card--c{ transform:rotate(9deg) translate(10px,-6px); }

@media (max-width:1000px){
  .case-row{ grid-template-columns:1fr; gap:28px; padding:28px; }
  .case-media{ height:300px; }
  .case-card{ width:140px; }
}

/* ---------------------------------------------------------------
   14. §7 IDEAL PARTNER
   --------------------------------------------------------------- */
/* split head: headline left, body right (also used by §7) */
.head-split{ max-width:none; display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:end; }
@media (max-width:900px){ .head-split{ grid-template-columns:1fr; gap:22px; align-items:start; } }

.qual{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); border-radius:20px; overflow:hidden; }
.qual > div{
  padding:30px 26px 28px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.4); transition:background .5s var(--ease);
}
.qual > div:nth-child(3n){ border-right:none; }
.qual > div:nth-child(n+4){ border-bottom:none; }
.qual > div:nth-child(even){ background:rgba(255,255,255,.66); }
.qual > div:hover{ background:#fff; }
.tick{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:rgba(36,83,255,.10); border:1px solid rgba(36,83,255,.24);
  color:var(--accent-strong); font-size:11px; font-weight:800; margin-bottom:14px;
}
.qual h3{ font-size:15.5px; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; }
.qual p{ font-size:13.5px; line-height:1.55; color:var(--muted); }

.terms{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:26px; }
.term{ padding:20px 20px 18px; border-radius:16px; }
.term .k{ font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.term .v{ font-size:16px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); }

.disq{ margin-top:26px; padding:24px 26px; border-radius:16px; border:1px dashed rgba(10,15,30,.2); background:rgba(255,255,255,.36); }
.disq p{ font-size:14.5px; line-height:1.6; color:var(--muted); max-width:70ch; }
.disq strong{ color:var(--ink); font-weight:700; }
@media (max-width:1000px){ .qual{ grid-template-columns:1fr 1fr; } .qual > div{ border-right:1px solid var(--border); border-bottom:1px solid var(--border); } .qual > div:nth-child(even){ border-right:none; } .terms{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .qual{ grid-template-columns:1fr; } .qual > div{ border-right:none; } .terms{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------
   15. §8 THE AUDIT — dark band, glass form (Blue Sense field set)
   --------------------------------------------------------------- */
.audit{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.audit .h2{ color:#fff; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.chips span{
  font-size:11.5px; font-weight:600; padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#D9E3FF;
}
.form{ padding:30px 28px 26px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#9DAAC6; margin-bottom:7px; }
.field input,.field select{
  width:100%; font:inherit; font-size:14px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:10px; padding:12px 14px;
  transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.field input::placeholder{ color:#6F7C99; }
.field select option{ background:#101827; color:#fff; }
.field input:focus,.field select:focus{
  outline:none; border-color:rgba(36,83,255,.7); background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(36,83,255,.18);
}
.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form .btn{ width:100%; margin-top:8px; }
.micro{ font-size:11.5px; line-height:1.5; color:#8593B0; margin-top:14px; }
@media (max-width:900px){ .audit{ grid-template-columns:1fr; gap:36px; } .two{ grid-template-columns:1fr; } }

/* form states: inline errors, submit status, and the post-submit panel */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Collapsed with grid-template-rows 0fr <-> 1fr, per the motion contract
   in site.js: never animate max-height. It is also self-sizing, so a
   two-line message cannot clip the way a guessed max-height would. The
   inner span is created by site.js when the message is set. */
.field-err{
  display:grid; grid-template-rows:0fr;
  font-size:11.5px; line-height:1.4; color:#FCA5A5;
  margin-top:6px; opacity:0;
  transition:grid-template-rows .4s var(--ease), opacity .4s var(--ease);
}
.field-err > span{ overflow:hidden; min-height:0; }
.field.is-bad .field-err{ grid-template-rows:1fr; opacity:1; }
.field.is-bad input,.field.is-bad select{ border-color:rgba(248,113,113,.6); }
.form-status{
  display:grid; grid-template-rows:0fr;
  font-size:12.5px; line-height:1.5; color:#9DAAC6; margin-top:12px; opacity:0;
  transition:grid-template-rows .4s var(--ease), opacity .4s var(--ease);
}
.form-status > span{ overflow:hidden; min-height:0; }
.form-status.is-on{ grid-template-rows:1fr; opacity:1; }
.form-status.is-bad{ color:#FCA5A5; }
.form.is-sending{ opacity:.6; pointer-events:none; }
.form-done{ padding:38px 30px 32px; }
.form-done h3{ font-size:22px; font-weight:800; letter-spacing:-0.03em; color:#fff; margin-bottom:14px; }
.form-done p{ font-size:14.5px; line-height:1.65; color:#9DAAC6; margin-bottom:24px; }
.form-done .btn{ width:100%; }

/* ---------------------------------------------------------------
   16. §9 FAQ
   --------------------------------------------------------------- */
.faq{ max-width:860px; margin:0 auto; border-top:1px solid var(--border); }
.faq-row{ border-bottom:1px solid var(--border); }
.faq-btn{ width:100%; display:flex; align-items:center; gap:20px; text-align:left; padding:24px 0; }
.faq-q{ flex:1 1 auto; font-size:17.5px; font-weight:700; letter-spacing:-0.02em; transition:color .4s var(--ease); }
.faq-row.is-open .faq-q{ color:var(--accent-strong); }
.faq-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); }
.faq-panel > *{ overflow:hidden; min-height:0; }
.faq-row.is-open .faq-panel{ grid-template-rows:1fr; }
.faq-panel-in{ padding:0; }
.faq-panel p{ font-size:14.5px; line-height:1.65; color:var(--muted); max-width:66ch; margin-bottom:24px; }

/* ---------------------------------------------------------------
   17. §10 FOOTER
   --------------------------------------------------------------- */
.foot{ background:var(--dark); color:var(--dark-ink); padding:82px 0 34px; }
.foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; border-bottom:1px solid var(--dark-border); }
.foot .tag{ font-size:17px; font-weight:700; letter-spacing:-0.02em; line-height:1.35; max-width:24ch; margin-bottom:20px; }
.foot h4{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7C89A6; margin-bottom:16px; }
.foot li{ margin-bottom:10px; }
.foot li a{ font-size:13.5px; color:var(--dark-muted); transition:color .4s var(--ease); }
.foot li a:hover{ color:#fff; }
.foot-bot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:24px; font-size:12px; color:#6F7C99; }
@media (max-width:900px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-top{ grid-template-columns:1fr; } }

/* placeholder flag — every slot Ross still owes us */
.todo{ color:#B45309; font-weight:700; }
.band-dark .todo,.foot .todo{ color:#FBBF24; }

/* =====================================================================
   18. SUBPAGES (audit, work index, case study detail)
   Same locked world: glass material, Switzer, the blue, the one easing.
   Subpages get a compact hero instead of the homepage's ad columns.
   ===================================================================== */
.page-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#EAF0FC 0%, #F7FAFF 48%, #ECF2FD 100%);
  padding:168px 0 76px;
}
.page-hero .shell{ position:relative; z-index:1; }
/* wider than the homepage h1: subpage heroes have no ad columns beside
   them, so a 17ch measure stacks three deep against empty space */
.page-hero .h1{ max-width:24ch; margin-bottom:20px; }
.page-hero .sub{ max-width:56ch; }
.page-hero.on-dark{ background:var(--dark); color:var(--dark-ink); }
.page-hero.on-dark .h1{ color:#fff; }
.page-hero.on-dark .sub, .page-hero.on-dark .lede{ color:var(--dark-muted); }
.page-hero.on-dark .eyebrow{ color:#8FB0FF; }
.page-hero.on-dark .eyebrow::before{ background:#8FB0FF; }

.crumb{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:26px; }
.crumb .arw{ display:inline-block; transition:transform .45s var(--ease); }
.crumb:hover .arw{ transform:translateX(-4px); }
.on-dark .crumb{ color:var(--dark-muted); }
.on-dark .crumb:hover{ color:#fff; }

/* ---- audit page ---- */
.aud-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.aud-card{ padding:30px 26px 28px; border-radius:20px; }
.aud-card .n{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--accent-strong); margin-bottom:14px; }
.aud-card h3{ font-size:17px; font-weight:700; letter-spacing:-0.02em; margin-bottom:10px; }
.aud-card p{ font-size:13.5px; line-height:1.55; color:var(--muted); }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.step{ position:relative; padding-top:26px; border-top:1.5px solid var(--border); }
.step::before{
  counter-increment:step; content:"0" counter(step);
  position:absolute; top:-11px; left:0; padding-right:12px;
  background:var(--ground);
  font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--accent-strong);
}
.band-dark .step{ border-top-color:rgba(255,255,255,.16); }
.band-dark .step::before{ background:var(--dark); color:#8FB0FF; }
.step h3{ font-size:15.5px; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; }
.step p{ font-size:13.5px; line-height:1.55; color:var(--muted); }
.band-dark .step p{ color:var(--dark-muted); }

.gets{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.get{ display:flex; gap:14px; padding:22px 24px; border-radius:16px; }
.get .tick{ margin-bottom:0; }
.get h3{ font-size:15px; font-weight:700; letter-spacing:-0.02em; margin-bottom:6px; }
.get p{ font-size:13.5px; line-height:1.55; color:var(--muted); }

@media (max-width:1000px){ .aud-grid{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr 1fr; } .gets{ grid-template-columns:1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ---- work index ----
   Metrics are the anchor, not a footnote: same scale as the case-detail
   stat tiles. The client's own words sit inside the block next to their
   numbers, and the media side alternates so three studies read as an
   editorial run rather than three copies of one card. */
.work-list{ display:flex; flex-direction:column; gap:28px; }
.work-card-lg{
  display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center;
  padding:44px; border-radius:20px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px rgba(10,15,30,.10);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.work-card-lg:hover{ transform:translateY(-4px); box-shadow:0 30px 66px rgba(10,15,30,.14); border-color:rgba(255,255,255,.95); }
.work-card-lg:nth-child(even) .case-copy{ order:2; }
.work-card-lg:nth-child(even) .case-media{ order:1; }

.work-card-lg .case-h3{ color:var(--ink); font-size:clamp(22px,2.3vw,30px); margin-bottom:14px; }
.work-card-lg .case-h3 em,
.work-card-lg .case-h3 .payoff{ color:var(--accent-strong); }
.work-card-lg .case-context{ color:var(--muted); margin-bottom:26px; }

/* the numbers, at the same weight they carry on the detail page */
.wc-metrics{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:22px 0; margin-bottom:24px;
}
.wc-metrics > div{ padding:0 22px; border-left:1px solid var(--border); min-width:0; }
.wc-metrics > div:first-child{ padding-left:0; border-left:none; }
.wm-k{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.wm-v{ display:block; font-size:clamp(17px,1.7vw,22px); font-weight:800; letter-spacing:-0.02em; color:var(--ink); line-height:1.1; }
.wm-v em{ font-style:normal; color:var(--accent-strong); }

/* client voice, inside the block, next to their numbers */
.wc-quote{
  border-left:2px solid rgba(36,83,255,.3); padding-left:18px; margin-bottom:24px;
}
.wc-quote p{ font-size:14.5px; line-height:1.6; color:var(--ink); margin-bottom:8px; }
.wc-quote cite{ font-style:normal; font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--muted); }

/* .case-card and .case-link are defined for the DARK case-studies band.
   On the light index they need the light-ground treatment or the fan
   renders white-on-white and the link nearly disappears. */
.work-card-lg .case-card{
  background:var(--card-bg); border:1.5px solid var(--card-border); color:var(--card-ink);
  box-shadow:0 14px 32px rgba(10,15,30,.12);
}
.work-card-lg:hover .case-card{ border-color:rgba(10,15,30,.5); }
.work-card-lg .case-link{ color:var(--accent-strong); }

@media (max-width:1000px){
  .work-card-lg{ grid-template-columns:1fr; gap:30px; padding:28px; }
  .work-card-lg:nth-child(even) .case-copy{ order:0; }
  .work-card-lg:nth-child(even) .case-media{ order:0; }
  .wc-metrics{ grid-template-columns:1fr; row-gap:18px; }
  .wc-metrics > div{ padding-left:0; border-left:none; }
}

/* ---- case study detail ---- */
.cs-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:40px; }
.cs-stat{ padding:0 28px; border-left:1px solid rgba(255,255,255,.16); }
.cs-stat:first-child{ padding-left:0; border-left:none; }
.cs-stat .k{ font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7C89A6; margin-bottom:10px; }
.cs-stat .v{ font-size:28px; font-weight:800; letter-spacing:-0.02em; color:#fff; line-height:1.05; }
.cs-stat .v em{ font-style:normal; color:#8FB0FF; }
.cs-stat .d{ font-size:10.5px; font-weight:500; color:#7C89A6; margin-top:10px; line-height:1.35; }
@media (max-width:760px){ .cs-stats{ grid-template-columns:1fr 1fr; row-gap:24px; } .cs-stat:nth-child(odd){ padding-left:0; border-left:none; } }

.cs-body{ display:grid; grid-template-columns:200px 1fr; gap:44px; align-items:start; }
.cs-body + .cs-body{ margin-top:56px; padding-top:56px; border-top:1px solid var(--border); }
.cs-body h2{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-strong); padding-top:4px; }
.cs-body p{ font-size:16px; line-height:1.7; color:var(--muted); max-width:62ch; }
.cs-body p + p{ margin-top:16px; }
.cs-body strong{ color:var(--ink); font-weight:700; }
@media (max-width:860px){ .cs-body{ grid-template-columns:1fr; gap:16px; } }

.cs-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:26px; }
.cs-shot{
  aspect-ratio:9/16; border-radius:12px; display:flex; align-items:flex-end; padding:12px;
  background:var(--card-bg); border:1.5px solid var(--card-border);
  font-size:9.5px; font-weight:700; letter-spacing:.07em; color:var(--card-ink);
  --edge:0; border-color:rgba(10,15,30, calc(.08 + var(--edge) * .52));
  transition:border-color .35s var(--ease);
}
.cs-shot.is-hot,.cs-shot:hover{ border-color:rgba(10,15,30,.88); }
@media (max-width:760px){ .cs-gallery{ grid-template-columns:1fr 1fr; } }

.permission{
  margin-top:44px; padding:20px 24px; border-radius:14px;
  border:1px dashed rgba(10,15,30,.2); background:rgba(255,255,255,.36);
  font-size:13px; line-height:1.55; color:var(--muted);
}

.cta-strip{ text-align:center; }
.cta-strip .h2{ margin-bottom:16px; }
.cta-strip .lede{ max-width:52ch; margin:0 auto 28px; }

/* ---------------------------------------------------------------
   19. NAV OVER A DARK HERO
   The glass nav is tuned for a light page: rgba(255,255,255,.55) over
   a dark hero reads as an opaque grey slab, not glass. Case-study
   pages open on a dark hero and scroll into light content, so the nav
   swaps material based on what is actually behind it.
   --------------------------------------------------------------- */
.navbar.over-dark .nav{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 20px 50px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14);
}
.navbar.over-dark .logo{ color:#fff; }
.navbar.over-dark .navlink{ color:#A9B6D4; }
.navbar.over-dark .navlink:hover,
.navbar.over-dark .navlink.is-current{ color:#fff; }
.navbar.over-dark .navlink::before{ background:rgba(255,255,255,.10); box-shadow:none; }
.navbar.over-dark .nav::after{
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(143,176,255,.16), transparent 70%);
}
.navbar.over-dark .burger span,
.navbar.over-dark .burger span::before,
.navbar.over-dark .burger span::after{ background:#fff; }

/* ---------------------------------------------------------------
   20. CASE STUDY FURNITURE (structure adapted from Blue Sense's
   case-study spine; copy and material are ours)
     · meta strip carrying industry / window / channels, plus the
       CONSTRAINT as a tag, which is the thing they do not do
     · "The point": the generalisable lesson, pulled out at the end
     · "More outcomes": related studies with the metric in the card
   --------------------------------------------------------------- */
.meta-strip{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.meta-strip span{
  font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:6px 12px; border-radius:999px;
  background:rgba(10,15,30,.05); border:1px solid var(--border); color:var(--muted);
}
.on-dark .meta-strip span{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#B9C6E2; }
.meta-strip .constraint-tag{
  background:rgba(36,83,255,.10); border-color:rgba(36,83,255,.26); color:var(--accent-strong); font-weight:700;
}
.on-dark .meta-strip .constraint-tag{
  background:rgba(143,176,255,.14); border-color:rgba(143,176,255,.34); color:#B9CCFF;
}

.the-point{
  margin-top:56px; padding:36px 40px; border-radius:20px;
  background:rgba(36,83,255,.05); border:1px solid rgba(36,83,255,.16);
}
.tp-k{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:16px; }
.tp-h{ font-size:clamp(19px,2vw,25px); font-weight:800; letter-spacing:-0.02em; line-height:1.25; margin-bottom:12px; max-width:30ch; }
.tp-b{ font-size:15px; line-height:1.65; color:var(--muted); max-width:62ch; }

.more-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.more-card{
  display:block; padding:28px 30px; border-radius:16px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.more-card:hover{ transform:translateY(-4px); box-shadow:0 24px 54px rgba(10,15,30,.12); border-color:rgba(255,255,255,.95); }
.more-k{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:12px; }
.more-t{ font-size:19px; font-weight:800; letter-spacing:-0.02em; margin-bottom:8px; }
.more-d{ font-size:14px; line-height:1.5; color:var(--muted); margin-bottom:14px; }
.more-m{ font-size:11.5px; font-weight:600; color:var(--muted); opacity:.8; }

/* metric-row styles live with the work index above; do not redefine here */

@media (max-width:860px){
  .more-grid{ grid-template-columns:1fr; }
  .the-point{ padding:26px 24px; }
}

/* The payoff blue is tuned for the light ground. On a dark band it drops
   to 2.25:1 against #070B18, which fails WCAG AA for large text. Same
   role, lighter tone, on every dark surface. */
.on-dark .payoff,
.band-dark .payoff,
.page-hero.on-dark .payoff{ color:#8FB0FF; }