/* ============================================================
   Next Level Partners — Shard in Color design system
   Each component block carries the expected markup in a comment.
   ============================================================ */

/* Self-hosted fonts (Google Fonts latin/latin-ext subsets; Schibsted = variable wght 400-900) */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(assets/fonts/schibsted-grotesk-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(assets/fonts/schibsted-grotesk-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- Tokens (exact — never approximate) ---------- */
:root{
  /* 2026-07-29: --steel removed with the facet panes — its last consumer. */
  --paper:#FAFBFC; --mist:#EAEEF3; --lav:#ECE8F8; --ghost:#C9BCEE;
  --ink:#1E2330; --slate:#5A6273; --hairline:#DCE1E9;
  --blurple:#4720B7; --deep:#2F157A; --night:#241A33;
  --acc:#2563EB;        /* cobalt — devices, underlines, large/bold accents */
  --acc-ink:#1D4ED8;    /* cobalt-deep — small text on any light ground */
  --sans:"Schibsted Grotesk",-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

/* ---------- Base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-size:17px;line-height:1.6;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ghost);color:var(--ink)}

h1,h2,h3{font-weight:800;letter-spacing:-.028em;line-height:1.02;color:var(--ink)}
h3{line-height:1.18}
.h-hero{font-size:clamp(44px,6.2vw,84px)}      /* home hero H1 */
.h-page{font-size:clamp(38px,5vw,64px)}        /* interior page-header H1 — always above .h-big */
h2{font-size:clamp(28px,3.6vw,44px)}           /* section H2 */
.h-big{font-size:clamp(32px,4.2vw,54px)}       /* statement-scale H2 (opp-grids + statement bands) */
.h-side{font-size:clamp(24px,2.8vw,34px)}      /* sidebar H2 (start page) */

p{max-width:70ch}
.lead{font-size:19px;line-height:1.65;color:var(--slate);max-width:62ch}
h2+.lead{margin-top:22px}

/* Content wraps: 1240 / 1440 content boxes per DESIGN.md — max-width includes the 2×32px gutters */
.wrap{max-width:1304px;margin-inline:auto;padding-inline:32px}
/* 2026-08-27: was 1504px — at >=1368px viewports the wide sections' kickers and
   headings started 68px left of every .wrap section's, a jagged left margin
   against the sitewide one-edge alignment law. One content edge everywhere. */
.wrap-wide{max-width:1304px;margin-inline:auto;padding-inline:32px}

/* Section grounds alternate paper and mist; podcast on lav */
.sec{padding:clamp(60px,7.5vw,100px) 0}
.g-paper{background:var(--paper)}
.g-mist{background:var(--mist)}
.g-lav{background:var(--lav)}

/* Split section: kicker+H2 left, prose right.
   <div class="wrap sec-split"><div>kicker+h2</div><div>lead</div></div> */
.sec-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,88px);align-items:start}

/* Ruled editorial split (home · THE OPPORTUNITY): statement-scale H2 left,
   prose right behind a vertical hairline; a top rule separates it from the
   proof bar (both sit on paper — the rule does the work a ground change did).
   <div class="wrap opp-grid"><div>kicker+h2.h-big</div><div class="opp-right">lead</div></div> */
/* Rails/rules that sit on section grounds use ALPHA ink hairlines, not
   var(--hairline): alpha blends over whatever ground it lands on. (Solid
   --hairline stays for borders on white card faces.) */
.opp-grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(36px,5vw,80px);align-items:start;
  border-top:1px solid rgba(30,35,48,.16);padding-top:clamp(40px,5vw,64px);
}
.opp-grid .h-big{max-width:14ch}
.opp-right{border-left:1px solid rgba(30,35,48,.16);padding-left:clamp(24px,3vw,44px);align-self:stretch}

/* ---------- Column-top alignment (2026-08-11, Mason) ----------
   In every two-column pairing where the LEFT column runs kicker + heading and
   the RIGHT runs body text, the heading and the body TOP-ALIGN: the right
   column is padded down by the kicker's rendered height + gap (--kickoff) so
   nothing on the right ever rides higher than the headline. Collapses to 0
   when the grids stack (see the 1000px block). */
:root{--kickoff:40px}
.opp-right,.who-plate>div:last-child,.sec-split>div:last-child{padding-top:var(--kickoff)}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Skip-link landing clearance: #main is focus()-scrolled by the skip link;
   without this the fixed 76px nav covers the top of the landing content. */
main{scroll-margin-top:76px}

/* ---------- Kicker ----------
   Headline family, bold caps — big enough to hold its own against the
   heading below it (2026-07-29: was 12px mono; mono now stays on data only).
   The dash is the site-wide wayfinding tic: a short cobalt stroke that
   draws in (--kd, scaleX from 0) as the kicker reveals. Static/no-JS/
   reduced-motion: dash simply present (var default 1). */
.kicker{
  font-family:var(--sans);font-weight:700;font-size:14px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--acc-ink);
  margin-bottom:22px;
}
.kicker::before{
  content:"";display:inline-block;width:18px;height:2px;background:var(--acc);
  margin-right:12px;vertical-align:.22em;
  transform:scaleX(var(--kd,1));transform-origin:0 50%;
}

/* ---------- The underline device (≤1 per page + home hero) ----------
   <h1>Raise like a <span class="u-mark" data-underline>top raiser.</span></h1>
   Static/no-JS: spec box-shadow. With JS: pseudo-element, scaleX-drawable. */
.u-mark{box-shadow:inset 0 -.14em 0 0 var(--acc);white-space:nowrap}
html.js .u-mark{box-shadow:none;position:relative;z-index:0}
html.js .u-mark::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:.14em;
  background:var(--acc);z-index:-1;
  transform:scaleX(var(--u,1));transform-origin:0 50%;
}

/* ---------- The redline device (max once per page; currently unused —
   its 7/23 home was cut, the device stays in inventory) ----------
   Coaches, not <span class="redline" data-redline>consultants</span>. */
.redline{text-decoration:line-through;text-decoration-color:var(--acc);text-decoration-thickness:3px}
html.js .redline{text-decoration:none;position:relative}
html.js .redline::after{
  content:"";position:absolute;left:-.04em;right:-.04em;top:calc(52% - 1px);height:3px;
  background:var(--acc);transform:scaleX(var(--rl,1));transform-origin:0 50%;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;background:var(--blurple);color:#fff;
  font-weight:700;font-size:16px;line-height:1;text-decoration:none;
  padding:17px 28px;border:0;cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:transform .18s ease,background-color .18s ease,clip-path .18s ease;
}
/* Facet response: the corner cuts deepen on hover (8px -> 12px), both directions smooth */
.btn:hover{
  transform:translateY(-2px);background:var(--deep);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.btn-inverse{background:#fff;color:var(--deep)}
.btn-inverse:hover{background:#fff;color:var(--deep)}
.btn-nav{padding:12px 20px}

:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.band-cta :focus-visible{outline-color:#fff}
.footer :focus-visible{outline-color:var(--ghost)}
/* Clipped buttons: the offset outline is cut away by the corner-cut clip-path,
   so focus renders as an inset ring instead. The white ring carries the
   contrast; the inner deep ring separates it from the fill (cobalt never
   enters purple contexts). */
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--deep)}
/* On the purple CTA band the white button's ring goes deep — cobalt never enters purple contexts */
.band-cta .btn:focus-visible{box-shadow:inset 0 0 0 2px var(--deep)}
main:focus{outline:none}

/* Skip link — first element in <body> */
.skip{
  position:fixed;top:12px;left:12px;z-index:200;
  background:var(--paper);color:var(--ink);font-weight:700;font-size:15px;
  padding:12px 18px;border:1px solid var(--hairline);text-decoration:none;
  transform:translateY(-300%);
}
.skip:focus{transform:none}

/* ---------- Nav ----------
   <header class="nav" data-nav><div class="wrap nav-inner">
     <a class="nav-logo" href="index.html"><img src="assets/logo-dark.png" alt="Next Level Partners"></a>
     <nav class="nav-links" aria-label="Primary">…links, aria-current="page" on current, .btn .btn-nav on Start</nav>
     <button class="nav-burger" data-menu-toggle aria-expanded="false" aria-controls="site-menu" aria-label="Open menu"><span></span><span></span><span></span></button>
   </div></header>
   <div class="menu" id="site-menu" data-menu hidden><nav class="wrap menu-links" aria-label="Menu">…</nav></div>
   Home only: transparent over the hero veil (class="nav"). EVERY other page
   (interior headers, start, thanks, 404): class="nav nav-solid" — paper ground. */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;background:transparent;transition:background-color .25s ease,box-shadow .25s ease}
.nav-solid{background:var(--paper);box-shadow:0 1px 0 var(--hairline)}
.nav.is-stuck,.nav.menu-open{background:rgba(250,251,252,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav.is-stuck{box-shadow:0 1px 0 var(--hairline)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav-logo{display:block}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a:not(.btn){font-weight:500;font-size:16px;text-decoration:none;color:var(--ink)}
.nav-links a:not(.btn){position:relative;padding:4px 0}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--acc);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .25s ease;
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after,
.nav-links a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}

.nav-burger{display:none;width:44px;height:44px;position:relative;z-index:80;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.menu-open .nav-burger span:nth-child(2){opacity:0}
.nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:60;background:var(--paper);overflow-y:auto}
.menu[hidden]{display:none}
.menu-links{display:flex;flex-direction:column;padding-top:120px;padding-bottom:56px;opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease}
.menu.open .menu-links{opacity:1;transform:none}
/* Direct children only — the .menu-meta row nests its own small anchors
   inside this nav and must not inherit the statement size. */
.menu-links > a:not(.btn){
  font-weight:800;font-size:clamp(32px,9vw,44px);letter-spacing:-.028em;line-height:1.1;
  color:var(--ink);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--hairline);
}
.menu-links > a:not(.btn):hover,.menu-links > a:not(.btn)[aria-current="page"]{color:var(--acc-ink)}
.menu-links .btn{margin-top:36px;align-self:flex-start}
/* Secondary row at the menu's foot — uses the tail of the overlay so the
   open menu doesn't end in a third of a screen of nothing. */
.menu-meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:56px;padding-top:22px;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:13px;max-width:none}
.menu-meta a{color:var(--slate);text-decoration:none;font-size:13px;font-weight:500}
.menu-meta a:hover{color:var(--acc-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- Home hero ----------
   <section class="hero" data-hero>
     <div class="hero-media" aria-hidden="true"><div class="hero-img" style="background-image:url(assets/img/hero-facade.jpg)"></div><div class="hero-veil"></div></div>
     <div class="wrap hero-content"> kicker · h1.h-hero[data-rise] · .hero-sub[data-hero-follow] · .hero-cta[data-hero-follow] </div>
   </section> */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;
  clip-path:polygon(0 0,100% 0,100% 94%,0 100%);
  background:var(--paper);
}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.84) brightness(1.04) contrast(.95);
}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(250,251,252,.95) 0%,rgba(250,251,252,.88) 30%,rgba(250,251,252,.4) 55%,rgba(250,251,252,0) 72%);
}
.hero-beam{ /* injected by site.js — the once-only refraction sweep.
  Ghost-tinted so it reads against the bright facade instead of vanishing
  into the photo's own highlights. */
  position:absolute;top:-10%;left:0;width:18%;height:120%;
  background:linear-gradient(104deg,rgba(201,188,238,.85),rgba(201,188,238,0));
  filter:blur(9px);opacity:.55;pointer-events:none;
}
/* The refraction thread: the ONE violet beam, along the hero's cut edge.
   Lit gradient — brightest toward the facade's refraction, never flat. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(201,188,238,.35),rgba(201,188,238,1) 45%,rgba(255,255,255,.85) 78%,rgba(201,188,238,1));
  clip-path:polygon(0 100%,100% 94%,100% calc(94% - 5px),0 calc(100% - 5px));
}
.hero-content{position:relative;width:100%;padding-top:140px;padding-bottom:130px}
.hero-content .h-hero{max-width:20ch}
.hero-sub{font-size:19px;line-height:1.6;color:var(--slate);max-width:34em;margin-top:30px}
.hero-cta{margin-top:38px}

/* ---------- Interior page header ----------
   Pairs with class="nav nav-solid" (margin-top clears the fixed nav).
   Band = spec height; grows only if plate content demands (never clips).
   <section class="ph" data-header>
     <div class="ph-media" aria-hidden="true"><div class="ph-img" style="background-image:url(assets/img/header-….jpg)"></div><div class="ph-veil"></div></div>
     <div class="wrap"><div class="ph-plate"><p class="kicker">…</p><h1 class="h-page" data-rise>…</h1></div></div>
   </section> */
.ph{
  position:relative;display:flex;align-items:flex-end;
  margin-top:76px;min-height:clamp(260px,32vw,340px);
  clip-path:polygon(0 0,100% 0,100% 88%,0 100%);
  background:var(--paper);
}
.ph-media{position:absolute;inset:0;overflow:hidden}
.ph-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.84) brightness(1.04) contrast(.95);
}
.ph-veil{
  position:absolute;inset:0;
  /* 2026-08-27: mid/upper stops deepened to the mobile veil's values — the
     Strategy kicker measured 2.92:1 over the lattice photo's raw mid-grays. */
  background:linear-gradient(to top,rgba(250,251,252,.95),rgba(250,251,252,.85) 55%,rgba(250,251,252,.5) 85%,rgba(250,251,252,.15));
}
/* The refraction thread along the header's cut edge (same lit gradient as the hero's) */
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(201,188,238,.35),rgba(201,188,238,1) 45%,rgba(255,255,255,.85) 78%,rgba(201,188,238,1));
  clip-path:polygon(0 100%,100% 88%,100% calc(88% - 5px),0 calc(100% - 5px));
}
.ph>.wrap{position:relative;width:100%}
.ph-plate{position:relative;margin-top:clamp(24px,3vw,48px);margin-bottom:clamp(58px,6vw,74px);padding-top:20px;max-width:880px}
.ph-plate::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--ink);
  transform:scaleX(var(--plate,1));transform-origin:0 50%;
}
.ph-plate .kicker{margin-bottom:14px}
.ph-sub{font-size:18px;color:var(--slate);max-width:52ch;margin-top:16px}

/* ---------- Ground wedge painters ----------
   .above-mist|paper|lav + .below-mist|paper|lav set the colors an angled cut
   reveals — used by .band-state (its only consumer since the seams were
   removed 2026-07-29). */
.above-mist{--above:var(--mist)} .above-paper{--above:var(--paper)} .above-lav{--above:var(--lav)}
.below-mist{--below:var(--mist)} .below-paper{--below:var(--paper)} .below-lav{--below:var(--lav)}
/* Deep wedge: for a statement band that runs straight into the purple CTA
   band — the exposed sliver joins the purple family instead of flashing
   paper-white between two dark grounds. */
.above-deep{--above:var(--deep)} .below-deep{--below:var(--deep)}

/* ---------- Proof figures (The Raise · THE DATA, purple-owned) ----------
   <div class="proof-grid data-proof" data-reveal-children>
     <div class="stat"><span class="stat-n" data-counter>70+</span><span class="stat-l">raises</span></div> ×3
   </div> */
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:space-between;gap:32px}
.stat{padding:8px 0 8px 40px}
.stat:first-child{padding-left:0}
.stat+.stat{border-left:1px solid var(--hairline)}
.stat-n{
  display:block;font-weight:800;font-size:clamp(40px,6vw,72px);line-height:1;
  letter-spacing:-.02em;color:var(--blurple);white-space:nowrap;
}
/* Stat settle tick: ghost (proof is purple-owned — never cobalt here).
   Draws in (--tick, scaleX) when the counter lands; static fallback = drawn. */
.stat-n::after{
  content:"";display:block;width:28px;height:3px;background:var(--ghost);
  margin-top:12px;transform:scaleX(var(--tick,1));transform-origin:0 50%;
}
.stat-l{display:block;margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--slate)}

/* ---------- Numbered moves (home · WHAT WE DO) ----------
   Notched white cards on mist, stepped DOWN the page (desktop) so the three
   moves read as a descent toward the term sheet — echoes the journey stack.
   <ol class="moves-cards" data-reveal-steps>
     <li class="card card-cut"><span class="move-n" aria-hidden="true">01</span><h3>…</h3><p>…</p></li>×3 */
.moves-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;align-items:start}
.moves-cards li.card{padding:34px 32px 38px}
.move-n{display:block;font-family:var(--mono);font-weight:500;font-size:26px;color:var(--acc);margin-bottom:20px}
.moves-cards h3{font-size:22px;max-width:16ch;margin-top:0}
@media (min-width:1000px){
  .moves-cards li:nth-child(2){margin-top:40px}
  .moves-cards li:nth-child(3){margin-top:80px}
}

/* Quiet mono evidence row */
.evidence{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:13px;letter-spacing:.3px;color:var(--slate);
  max-width:none;
}
.evidence::before{content:"";display:inline-block;width:18px;height:3px;background:var(--acc);margin-right:14px;vertical-align:middle}

/* ---------- Statement band (the ONE type-only angled band per page) ----------
   Since the 7/27 third pass this is the page's DARK moment. The wedge painters
   (.above-mist|paper|lav + .below-mist|paper|lav) set the colors the angled
   cuts reveal.
   <div class="band-state above-mist below-paper">
     <div class="bs-inner"><div class="wrap" data-reveal-children>kicker · h2.h-big · .lead · .evidence</div></div>
   </div> */
.band-state{background:linear-gradient(to bottom,var(--above,var(--paper)) 50%,var(--below,var(--paper)) 50%)}
/* 2026-07-27 third pass: the statement band is the page's DARK moment —
   deep -> night, white statement type, ghost accents, ghost beams along
   both cut edges. */
.bs-inner{
  --bst:clamp(26px,3vw,44px);
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--deep),var(--night));
  clip-path:polygon(0 var(--bst),100% 0,100% calc(100% - var(--bst)),0 100%);
  padding:clamp(72px,8.5vw,112px) 0;
}
/* Facet cluster — light through the facade, composed in the band's right
   half so the dark moment reads built, not vacant. Three slats at the one
   site lean, each with a lit left edge. First child of .bs-inner. */
.bs-facets{position:absolute;top:0;bottom:0;right:0;width:42%;pointer-events:none}
.bs-facets i{position:absolute;top:-12%;bottom:-12%;transform:skewX(-14deg);transform-origin:0 0}
.bs-facets i:nth-child(1){right:34%;width:17%;background:linear-gradient(180deg,rgba(201,188,238,.16),rgba(201,188,238,.04));border-left:2px solid rgba(201,188,238,.42)}
.bs-facets i:nth-child(2){right:14%;width:12%;background:linear-gradient(180deg,rgba(71,32,183,.6),rgba(71,32,183,.2));border-left:2px solid rgba(201,188,238,.62)}
.bs-facets i:nth-child(3){right:-9%;width:16%;background:linear-gradient(180deg,rgba(201,188,238,.12),rgba(201,188,238,.03));border-left:2px solid rgba(201,188,238,.32)}
@media (max-width:1000px){.bs-facets{display:none}}
.bs-inner::before,.bs-inner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(201,188,238,.3),rgba(201,188,238,.95) 55%,rgba(255,255,255,.7) 82%,rgba(201,188,238,.95))}
.bs-inner::before{clip-path:polygon(0 var(--bst),100% 0,100% 5px,0 calc(var(--bst) + 5px))}
.bs-inner::after{clip-path:polygon(0 100%,100% calc(100% - var(--bst)),100% calc(100% - var(--bst) - 5px),0 calc(100% - 5px))}
.bs-inner>.wrap{position:relative}
.bs-inner h2{color:#fff}
.bs-inner .h-big{max-width:15ch}
/* Two-clause statement headlines break on their own <br> instead of the
   15ch cap ragging them into four uneven lines. */
.bs-inner .h-big.h-bw{max-width:28ch}
.bs-inner .lead{margin-top:30px;color:#D8CFF2}
.bs-inner .kicker{color:var(--ghost)}
.bs-inner .kicker::before{background:var(--ghost)}
.bs-inner .evidence{color:#C6C0D4;border-top-color:rgba(201,188,238,.28);max-width:62ch}
.bs-inner .evidence::before{background:var(--ghost)}
/* Statement band sitting directly above the CTA band (Strategy): the bottom
   edge runs FLAT into the purple — no bottom cut, no bottom beam, no wedge
   sliver flashing a third color between two dark bands (Mason 2026-07-29).
   Two color bands meeting in a straight line, exactly like CTA meets footer. */
.bs-flush-b .bs-inner{clip-path:polygon(0 var(--bst),100% 0,100% 100%,0 100%)}
.bs-flush-b .bs-inner::after{display:none}

/* ---------- Framed plate (home · WHO WE WORK WITH) ----------
   A mist inset on paper — hairline frame, corner notch — instead of another
   full-bleed ground change.
   <div class="wrap-wide"><div class="who-plate" data-reveal><div>h2</div><div>lead</div></div></div> */
.who-plate{
  background:var(--mist);border:1px solid var(--hairline);
  padding:clamp(44px,5.5vw,76px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,5vw,80px);align-items:start;
}

/* ---------- White plate variant (home · THE GAP) ----------
   The framed-plate architecture with a white face on a mist ground — reads as
   "the room": one enclosed, quieter space on the page.
   <div class="who-plate plate-white" data-reveal><div>kicker</div><div>h2 + lead</div></div> */
.plate-white{background:#fff}

/* ---------- Linked cards (home · THE THREE LINES) ----------
   The stepped notched cards keep their li.card structure (reveal/notch
   gestures key off it); the h3's anchor stretches over the whole card.
   <li class="card card-cut">
     <span class="move-n">01</span>
     <h3><a class="card-linka" href="strategy.html">Strategy</a></h3>
     <p>…</p><span class="card-more" aria-hidden="true">More on strategy</span></li> */
.card-linka{text-decoration:none;color:inherit}
.card-linka::after{content:"";position:absolute;inset:0}
.card:focus-within{border-color:var(--ink)}
.card-more{
  display:inline-block;margin-top:22px;
  font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc-ink);
}
.card-more::after{content:"";display:inline-block;width:16px;height:2px;background:var(--acc);
  margin-left:10px;vertical-align:.28em;transition:width .18s ease}
.card:hover .card-more::after{width:26px}

/* ---------- Client testimonials (home · CLIENTS, IN THEIR WORDS) ----------
   The two live-site quotes (Mason 2026-07-29: use the current website's
   quotes). Cobalt top rule marks each block per the testimonial spec.
   <div class="testis" data-reveal-children>
     <figure class="testi"><blockquote><p>“…”</p></blockquote><figcaption>Name, Title, Co</figcaption></figure> ×2 */
/* ---------- Quote carousel (Home · CLIENTS, IN THEIR WORDS; 2026-08-11 —
   Mason: testimonials must not run a full-screen block) ----------
   One white notched card; quotes stack in the same grid cell and the
   slideshow rotates through them on its own (no controls, no counter).
   JS fits each quote's type size so every quote fills the same block
   height. No-JS and reduced-motion: quotes stack with a hairline. */
.qcar{position:relative;background:#fff;border:1px solid var(--hairline);max-width:980px;margin-top:34px;
  padding:clamp(30px,4vw,46px) clamp(28px,4vw,52px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.qcar-track{display:grid}
/* 2026-08-27: slideshow state keys on .qcar-live (set by quotesInit), NOT
   html.js — html.js is now added pre-paint by an inline head script, so it no
   longer proves site.js actually ran. If JS dies, quotes stack visible. */
.qcar-live .qcar-item{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.qcar-live .qcar-item.on{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.qcar-item blockquote p{font-weight:600;font-size:var(--qfs,clamp(17px,1.9vw,20.5px));line-height:1.5;letter-spacing:-.008em;color:var(--ink)}
.qcar-item figcaption{margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--slate)}
.qcar:not(.qcar-live) .qcar-item+.qcar-item{margin-top:28px;border-top:1px solid var(--hairline);padding-top:28px}
@media (prefers-reduced-motion:reduce){.qcar-live .qcar-item{transition:none}}

.testis{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,72px);margin-top:48px}
.testi{position:relative;padding-top:26px}
.testi::before{content:"";position:absolute;top:0;left:0;width:56px;height:3px;background:var(--acc)}
.testi blockquote p{
  font-weight:700;font-size:clamp(20px,2.2vw,27px);line-height:1.4;letter-spacing:-.012em;
  color:var(--ink);max-width:none;
}
.testi figcaption{margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--slate)}
@media (max-width:1000px){.testis{grid-template-columns:1fr;gap:44px}}

/* ---------- Data band (The Raise · THE DATA) ----------
   The claim + purple-owned proof figures. (FROM THE RESEARCH and the
   flush-section/data-divide shelf that joined them were cut 2026-07-29 —
   Ben was skeptical of the research list; Mason removed it.) */
.data-proof{margin-top:44px}
/* Two-figure variant (2026-08-11, Ben: 70+ raises as advisors / $200M+ raised
   as principals — the as-principals split kills the under-$3M-average read
   that got $200mm cut on 7/31). */
.proof-2{grid-template-columns:repeat(2,minmax(0,auto));justify-content:start;column-gap:clamp(64px,9vw,150px)}

/* ---------- Journey grid (The Raise) ----------
   Four stage cards in a 2x2 at desktop — dense faces instead of full-width
   slabs that ran 60% empty. Each carries an oversized ghost stage numeral
   top-right so the width is spoken for.
   <ol class="journey" data-reveal-steps>
     <li class="jstep"><span class="jghost" aria-hidden="true">01</span>
       <p class="jmeta"><span class="jn" aria-hidden="true">01</span><span class="jstage">12-18 months out</span></p><h3>…</h3><p>…</p></li>
     …step 4 adds class "jstep-resolve"
   </ol> */
.journey{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
/* --notch drives the cut-in gesture: JS animates 0 -> 12px after the card
   lands. Default (no-JS, reduced motion) = already cut. */
.jstep{position:relative;background:#fff;border:1px solid var(--hairline);padding:30px 34px 34px;transition:border-color .2s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--notch,12px)),calc(100% - var(--notch,12px)) 100%,0 100%)}
.jstep::after{content:"";position:absolute;width:17px;height:1px;background:var(--hairline);right:-2.5px;bottom:5.5px;transform:rotate(-45deg);transition:background-color .2s ease}
.jstep:hover{border-color:var(--ink)}
.jstep:hover::after{background:var(--ink)}
.jghost{position:absolute;right:26px;top:22px;font-family:var(--mono);font-weight:500;font-size:clamp(44px,4.5vw,64px);line-height:1;color:var(--lav);pointer-events:none;user-select:none}
.jstep-resolve .jghost{color:var(--ghost);opacity:.55}
.jmeta{display:flex;align-items:baseline;gap:18px}
.jn{font-family:var(--mono);font-weight:500;font-size:15px;color:var(--acc-ink)}
.jstage{font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate)}
.jstep h3{margin-top:16px;font-size:clamp(20px,2.2vw,26px)}
.jstep p+h3{margin-top:16px}
.jstep h3+p{color:var(--slate);margin-top:10px}
.jstep-resolve{border-left:3px solid var(--blurple)}
.jstep-resolve:hover{border-color:var(--ink);border-left-color:var(--blurple)}
.jstep-resolve .jn{color:var(--blurple)}
@media (max-width:1000px){
  .journey{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  .jghost{font-size:38px;right:18px;top:16px}
}

/* ---------- Cards (home three lines via .moves-cards, promises 2-up) ----------
   <div class="cards cards-2" data-reveal-steps>
     <article class="card"><h3>…</h3><p>…</p></article> ×2 */
.cards{display:grid;gap:24px;margin-top:48px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:#fff;border:1px solid var(--hairline);padding:30px 28px;transition:border-color .2s ease}
.card:hover{border-color:var(--ink)}
.card-cut{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--notch,12px)),calc(100% - var(--notch,12px)) 100%,0 100%)}
.card-cut::after{content:"";position:absolute;width:17px;height:1px;background:var(--hairline);right:-2.5px;bottom:5.5px;transform:rotate(-45deg);transition:background-color .2s ease}
.card-cut:hover::after{background:var(--ink)}
/* Scoped to .cards so the moves-cards h3 spec (22px, flush to the numeral)
   isn't silently overridden by source order. */
.cards .card h3{font-size:21px;margin-top:14px}
.card p{color:var(--slate);margin-top:12px}

/* ---------- Pattern list (numbered mono rail, 6-7 items) ----------
   <ol class="pattern" data-reveal-children><li>…</li>×6</ol>
   An odd trailing item spans both columns so it never dangles half-width. */
.pattern{counter-reset:pat;display:grid;grid-template-columns:1fr 1fr;gap:0 72px;margin-top:48px}
.pattern li{counter-increment:pat;position:relative;border-top:1px solid rgba(30,35,48,.16);padding:24px 0 24px 64px;color:var(--slate);font-size:16.5px}
.pattern li::before{content:"0" counter(pat);position:absolute;left:0;top:30px;font-family:var(--mono);font-weight:500;font-size:15px;color:var(--acc-ink)}
.pattern li:nth-child(odd):last-child{grid-column:1/-1}

/* Playbook variant (The Raise · THE PLAYBOOK, 2026-08-11): the numbered
   rail with a bold ink lead line per item — the playbook element — then the
   slate one-liner. <ol class="pattern codes"><li><b>The pre-heat.</b>…</li>×6
   The mono numeral re-anchors to the bold lead line (the base .pattern
   top:30px was tuned to its own 24px padding; 2026-08-11 alignment pass). */
.codes li{padding-top:22px;padding-bottom:26px}
.codes li::before{top:25px}
.codes li b{display:block;font-weight:700;font-size:17.5px;letter-spacing:-.012em;color:var(--ink);margin-bottom:5px}

/* Decode list (Strategy · THE DIAGNOSIS, 2026-08-11 — replaces the seven-places
   scope list per Ben): the investor's words, then what they usually mean.
   <ul class="decode"><li><b>"Too early."</b><p>…</p></li>×5 — odd trailing item
   spans both columns like .pattern. */
.decode{display:grid;grid-template-columns:1fr 1fr;gap:0 72px;margin-top:48px}
.decode li{border-top:1px solid rgba(30,35,48,.16);padding:26px 0 30px}
.decode li b{display:block;font-weight:700;font-size:clamp(18px,2vw,21px);letter-spacing:-.014em;color:var(--ink)}
.decode li p{color:var(--slate);font-size:16.5px;margin-top:10px;max-width:52ch}
.decode li:nth-child(odd):last-child{grid-column:1/-1}

/* Moments list (Coaching · WHEN TO CALL, 2026-08-11): unnumbered two-column
   statements — the weeks a CEO recognizes. Deliberately not another numbered
   rail (the page already runs .pattern under WHAT WE WORK ON), but it keeps
   the two-column rhythm so the section doesn't run half-vacant. */
.moments{display:grid;grid-template-columns:1fr 1fr;gap:0 72px;margin-top:48px}
.moments li{border-top:1px solid rgba(30,35,48,.16);padding:24px 0;font-weight:500;font-size:clamp(17px,1.9vw,20px);letter-spacing:-.012em;line-height:1.4;color:var(--ink)}

/* ---------- Partners (Who We Are) ----------
   <article class="partner">
     <img src="assets/ben.jpg" alt="Ben Elowitz">
     <div><h3 class="p-name">Ben Elowitz</h3><p class="p-role">Managing Partner</p>
       <ul class="chips"><li class="chip">…</li></ul><p class="p-bio">…</p><p><a class="link-fwd" …>LinkedIn</a></p></div>
   </article>
   NOTE: partner photos live at assets/ben.jpg and assets/dennis.jpg (site/assets root, not img/). */
.partner{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:48px}
.partner+.partner{margin-top:72px}
.partner img{width:100%;border:1px solid var(--hairline)}
.p-name{font-size:clamp(24px,2.6vw,32px)}
.p-role{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate);margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{
  font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.3px;color:var(--deep);
  background:var(--paper);border:1px solid var(--hairline);padding:7px 12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}
.p-bio{color:var(--slate);margin-top:22px;max-width:64ch}
.p-bio+p{margin-top:18px}

/* (The hero quote band + .quote/.q-glyph statement testimonial were removed
   2026-07-29 — one quote moment per page; Home's is CLIENTS, IN THEIR WORDS.) */

/* Single-quote variant (2026-07-31 — the weaker second quote was cut per Ben;
   one strong quote runs wide instead of half a two-up grid). */
.testis-one{grid-template-columns:minmax(0,1fr);max-width:920px}

/* ---------- Home partners intro (2026-07-31, Ben: a concise who-we-are on Home) ----------
   <div class="wrap duo-sec"><div class="duo-photos" data-reveal>
     <figure class="p-photo"><img src="assets/ben.jpg" …><figcaption>Ben Elowitz</figcaption></figure> ×2
   </div><div data-reveal>kicker · h2 · lead · link-fwd</div></div> */
.duo-sec{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,88px);align-items:center}
.duo-photos{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.duo-photos img{width:100%;border:1px solid var(--hairline)}
.duo-photos figcaption{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--slate)}
@media (max-width:1000px){.duo-sec{grid-template-columns:1fr;gap:36px}}

/* ---------- Podcast band (lav) ----------
   Home runs the SHOWCASE build (2026-07-29, per Mason: The Raiser's Edge
   is a standout): masthead head row, a full-width code-drawn waveform (the
   research, out loud — the one graphic that IS the thing it decorates),
   then wide episode rows. Who We Are keeps the smaller .sec-split version.
   <section class="sec g-lav"><div class="wrap">
     <div class="pod-head" data-reveal-children><div>kicker · h2.h-big</div><p class="pod-line">…</p></div>
     <div class="podwave" aria-hidden="true" data-reveal><svg…></div>
     <div class="eplist eplist-wide" data-reveal-children> EPISODES markers + <a class="ep" …><span class="ep-n">Ep. 13</span><span class="ep-t">…</span><span class="ep-w">with …</span><span class="ep-d">Jul 2026</span></a> </div>
     <p class="pod-listen" data-reveal>a.link-fwd</p>
   </div></section> */
.pod-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start}
.pod-head .h-big{max-width:none}
.pod-line{color:var(--slate);font-size:18px;line-height:1.6;max-width:36ch;padding-top:var(--kickoff)}
.podwave{margin-top:clamp(32px,4.5vw,52px)}
.podwave svg{display:block;width:100%;height:64px}
.eplist-wide{margin-top:clamp(32px,4.5vw,52px)}
.eplist-wide .ep{padding:24px 0}
.eplist-wide .ep-t{font-size:20px}
.pod-listen{margin-top:30px}
.eplist{border-bottom:1px solid rgba(30,35,48,.15)}
.ep{
  position:relative; /* anchors the bevel-glint ::before */
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n t d" "n w d";
  column-gap:22px;align-items:baseline;padding:20px 0;
  border-top:1px solid rgba(30,35,48,.15);text-decoration:none;
}
.ep-n{grid-area:n;font-family:var(--mono);font-weight:500;font-size:12px;color:var(--acc-ink);min-width:52px}
.ep-n::before{content:"";display:inline-block;width:10px;height:2px;background:var(--acc);margin-right:8px;vertical-align:.28em}
.ep-t{grid-area:t;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink);transition:color .15s ease}
.ep-w{grid-area:w;font-size:16px;color:var(--slate);margin-top:4px}
.ep-d{grid-area:d;font-family:var(--mono);font-size:12px;color:var(--slate)}
.ep:hover .ep-t{color:var(--acc-ink)}

/* ---------- The data and the inside track (2026-07-31, Ben's rework) ----------
   The lav band's head stays (kicker · h2 · line), then a two-pane switcher:
   <div class="dt-tabs" role="tablist" data-tabs aria-label="…">
     <button class="dt-tab" id="tab-podcast" role="tab" aria-selected="true" aria-controls="pane-podcast">The Podcast</button> ×2
   </div>
   <div class="dt-pane" id="pane-podcast" role="tabpanel" aria-labelledby="tab-podcast">…</div> ×2
   JS drives hidden/aria-selected; no-JS hides the tablist and stacks both
   panes (each pane's own h3 identifies it). Panes carry no reveal attrs —
   hidden panes must never hold a scroll tween. */
.dt-tabs{display:flex;gap:6px;margin-top:44px;border-bottom:1px solid rgba(30,35,48,.18);max-width:none}
.dt-tab{font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--slate);padding:12px 18px 14px;position:relative;transition:color .15s ease}
.dt-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s ease}
.dt-tab:hover{color:var(--ink)}
.dt-tab[aria-selected="true"]{color:var(--ink)}
.dt-tab[aria-selected="true"]::after{transform:scaleX(1)}
html:not(.js) .dt-tabs{display:none}
.dt-pane{margin-top:38px}
.dt-pane[hidden]{display:none}
html:not(.js) .dt-pane+.dt-pane{margin-top:64px;border-top:1px solid rgba(30,35,48,.15);padding-top:44px}
.dt-pane h3{font-size:clamp(22px,2.4vw,28px)}
.dt-pane h3+.lead{margin-top:14px}
.dt-pane .podwave{margin-top:28px}
.dt-pane .podwave svg{height:40px}

/* Guest-first episode rows (2026-08-11 rework, Ben: episode number as the
   header that defines each row, title conjoined into the guest name, a value
   line instead of a bare title, and an unmissable click-to-listen affordance):
   <a class="epg" href="…episode…" target="_blank" rel="noopener">
     <span class="epg-no">Ep. 13 · Jul 2026</span>
     <img class="epg-img" src="assets/img/guest-….jpg" width="76" height="76" alt="">
     <span class="epg-main">
       <span class="epg-line"><span class="epg-name">Sujal Patel</span> <span class="epg-t">on …title…</span></span>
       <span class="epg-cred">$500M+ raised · Nautilus Bio, Isilon</span>
       <span class="epg-desc">What you'll get out of the episode.</span>
     </span>
     <span class="epg-play" aria-hidden="true"><svg…triangle…/><span>Listen</span></span>
   </a> */
/* The full catalog scrolls in place (2026-08-11, Mason: all episodes visible
   by scrolling, not just the latest). Height cuts a row mid-face so the
   scrollability is self-evident; thin native scrollbar; keyboard-scrollable
   region. */
.epg-count{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:30px}
.epg-list{margin-top:12px;border-bottom:1px solid rgba(30,35,48,.15);max-height:620px;overflow-y:auto;padding-right:16px;scrollbar-width:thin;scrollbar-color:rgba(30,35,48,.35) transparent}
.epg-list:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.epg{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 26px;align-items:center;padding:20px 0 24px;border-top:1px solid rgba(30,35,48,.15);text-decoration:none}
.epg-no{grid-column:1/-1;font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-ink)}
.epg-no::before{content:"";display:inline-block;width:12px;height:2px;background:var(--acc);vertical-align:4px;margin-right:10px}
.epg-img{width:76px;height:76px;object-fit:cover;border:1px solid var(--hairline);align-self:start}
.epg-main{display:block}
.epg-line{display:block;line-height:1.35}
.epg-name{font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink);transition:color .15s ease}
.epg-t{font-weight:500;font-size:17px;color:var(--slate)}
.epg-cred{display:block;font-family:var(--mono);font-size:12.5px;color:var(--slate);margin-top:6px}
.epg-desc{display:block;font-size:15.5px;line-height:1.55;color:var(--slate);margin-top:10px;max-width:64ch}
.epg-play{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;color:var(--acc-ink);white-space:nowrap}
.epg-play svg{display:block;width:11px;height:12px;fill:var(--acc)}
.epg-play>span{box-shadow:inset 0 -2px 0 0 transparent;transition:box-shadow .15s ease;padding-bottom:2px}
.epg:hover .epg-name{color:var(--acc-ink)}
.epg:hover .epg-play>span{box-shadow:inset 0 -2px 0 0 var(--acc)}
@media (max-width:760px){
  .epg{grid-template-columns:auto minmax(0,1fr);row-gap:12px}
  .epg-play{grid-column:2}
}

/* Listen/subscribe row — Substack leads, the platforms follow */
.pod-links{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline;margin-top:30px;max-width:none}
.pod-links a:not(.link-fwd){font-weight:500;font-size:15px;color:var(--slate);text-decoration:underline;text-underline-offset:3px;transition:color .15s ease}
.pod-links a:not(.link-fwd):hover{color:var(--acc-ink)}

/* Forward text link */
.link-fwd{
  font-weight:700;font-size:16px;color:var(--acc-ink);text-decoration:none;
  border-bottom:2px solid var(--acc);padding-bottom:2px;transition:color .15s ease;
}
.link-fwd:hover{color:var(--ink)}

/* Inline text link (e.g. thanks-page note) */
.note-link{color:var(--acc-ink);text-decoration:underline;text-underline-offset:3px}
.note-link:hover{color:var(--ink)}

/* ---------- Closing CTA band (the ONE full-purple moment) ----------
   <section class="band-cta"><div class="wrap" data-reveal-children>
     <h2>…</h2>[<p class="cta-sub">…</p>]<p class="cta-act"><a class="btn btn-inverse" href="start.html">Start the conversation</a></p>
   </div></section> */
.band-cta{background:linear-gradient(120deg,var(--blurple),var(--deep));padding:clamp(76px,10vw,124px) 0}
.band-cta h2{color:#fff;max-width:22ch}
.cta-sub{color:#D8CFF2;font-size:19px;margin-top:18px}
.cta-act{margin-top:38px}

/* ---------- Intake form (Start) ----------
   <form class="form" name="start" method="POST" data-netlify="true" netlify-honeypot="bot-field" action="/thanks.html">
     hidden form-name input · <p class="hp"><label>…<input name="bot-field"></label></p>
     <div class="field"><label for=…>…</label><input|select|textarea …></div>
     selects may pair inside <div class="form-row">. Submit: <button class="btn">Send it</button>
     under form: <p class="form-note">This goes to the partners, not a funnel.</p> */
.form .field{margin-top:24px}
.form .field:first-of-type{margin-top:0}
.form label{display:block;font-weight:700;font-size:15px;color:var(--ink);margin-bottom:9px}
.form input[type="text"],.form input[type="email"],.form select,.form textarea{
  width:100%;background:#fff;border:1px solid #7A8294;color:var(--ink);
  font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.4;padding:13px 14px;
}
.form select{
  appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6273' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.form textarea{resize:vertical;min-height:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.form .form-row{margin-top:24px}
.form .form-row .field{margin-top:0}
.form .btn{margin-top:30px}
.form-note{margin-top:20px;font-family:var(--mono);font-size:13px;color:var(--slate)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Start page two-column ≥900px. The next-steps column is a bounded white
   card (notched, like every card face) so its shorter height reads as a
   deliberate object instead of a list dead-ending in open ground. */
.start-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:clamp(48px,7vw,104px);align-items:start}
.start-next{
  background:#fff;border:1px solid var(--hairline);padding:34px 38px 40px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.start-next .next{margin-top:30px}

/* ---------- Numbered steps (Start · WHAT HAPPENS NEXT) ----------
   <ol class="next"><li><span class="next-n" aria-hidden="true">01</span><h3>…</h3><p>…</p></li></ol> */
.next li{position:relative;border-top:1px solid rgba(30,35,48,.16);padding:26px 0 26px 62px}
.next li:last-child{border-bottom:1px solid rgba(30,35,48,.16)}
.next-n{position:absolute;left:0;top:29px;font-family:var(--mono);font-weight:500;font-size:15px;color:var(--acc-ink)}
.next h3{font-size:19px}
.next p{color:var(--slate);margin-top:8px}

/* Three-across variant (Strategy · HOW IT WORKS, The Raise · THE METHOD):
   heading runs full width above, the three steps rank side by side — no
   heading orphaned in an empty column.
   <h2 class="h-dash">…</h2><ol class="next steps-3" data-reveal-children>…×3</ol> */
.steps-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(28px,4vw,56px);margin-top:48px}
.steps-3 li:last-child{border-bottom:0}
@media (max-width:1000px){
  .steps-3{grid-template-columns:1fr;gap:0}
  .steps-3 li:last-child{border-bottom:1px solid rgba(30,35,48,.16)}
}

/* ---------- Plain statement pages (thanks, 404) ----------
   Branded like the rest of the site: kicker + cobalt-underlined H1 + lead
   on mist, "Back to the site" as a button.
   <main id="main" class="plain g-mist">
     <div class="wrap"><p class="kicker">…</p><h1 class="h-page">…</h1><p class="lead">…</p>…</div></main> */
.plain{position:relative;overflow-x:clip;padding:calc(76px + clamp(64px,9vh,110px)) 0 clamp(72px,10vh,120px);min-height:64vh}
.plain>.wrap{position:relative}
.plain h1{max-width:18ch}
.plain .lead{margin-top:26px}
.plain .cta-act,.plain .plain-act{margin-top:38px}
.plain .form-note{margin-top:30px}
@media (max-width:1000px){.plain{min-height:0}}

/* ---------- Footer (night) ----------
   <footer class="footer"><div class="wrap footer-grid">
     <div class="f-brand"><img class="f-logo" src="assets/logo-white.png" alt="Next Level Partners"><p class="f-line">…</p></div>
     <div class="f-col"><p class="f-h">Company</p><ul>…</ul></div> ×3
   </div><div class="wrap"><p class="f-base">© 2026 Next Level Partners</p></div></footer> */
.footer{background:var(--night);padding:clamp(64px,8vw,96px) 0 0}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1.1fr 1.3fr;gap:48px}
.f-logo{height:30px;width:auto}
.f-line{margin-top:22px;color:#C6C0D4;font-size:16px;line-height:1.6;max-width:30ch}
.f-h{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:#9B8FC4;margin-bottom:18px}
.f-col li{margin:12px 0}
.f-col a{color:#C6C0D4;font-size:16px;text-decoration:none;transition:color .15s ease}
.f-col a:hover{color:var(--ghost);text-decoration:underline;text-underline-offset:3px}
.f-base{
  margin-top:clamp(48px,6vw,72px);border-top:1px solid rgba(201,188,238,.16);
  padding:24px 0;font-family:var(--mono);font-size:12.5px;color:#9182B8;
  max-width:none;
}

/* ============================================================
   Refraction system (2026-07-29 quiet-grounds pass)
   The angled cut lives in exactly TWO meaningful places — the hero/header
   image edge and the dark statement band — both carrying the violet thread.
   Every other ground change is FLAT. The 7/27-7/28 tint panes and angled
   seams were removed 2026-07-29 per Mason: decorative separations with no
   meaning, and the pane edges crossed body text at mid viewport widths.
   ============================================================ */
.sec{position:relative;overflow-x:clip}
.sec>.wrap,.sec>.wrap-wide{position:relative}

/* Corner tick — cobalt registration mark on framed plates and photos */
.who-plate{position:relative}
.who-plate::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-top:2px solid var(--acc);border-left:2px solid var(--acc)}
.p-photo{position:relative;overflow:hidden}
.p-photo::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-top:2px solid var(--acc);border-left:2px solid var(--acc);z-index:1}

/* Bare-H2 dash — the kicker's cobalt dash for sections whose heading
   runs without a kicker line */
.h-dash::before{content:"";display:block;width:26px;height:3px;background:var(--acc);margin-bottom:18px}

/* (statement-band hairline + edge beams live in the .bs-inner block above) */

/* Closing CTA facets — two parallelograms through the purple gradient at
   the one site lean: a deep slab and, riding its edge, a narrow ghost slat
   with a lit seam — so the loudest band reads composed, not vacant.
   (band's overflow:clip trims both) */
.band-cta{position:relative;overflow:clip}
.band-cta::before{
  content:"";position:absolute;top:0;bottom:0;right:-160px;width:calc(44% + 160px);
  background:var(--night);opacity:.42;pointer-events:none;
  transform:skewX(-14deg);transform-origin:0 0;
}
.band-cta::after{
  content:"";position:absolute;top:0;bottom:0;right:calc(44% - 84px);width:84px;
  background:linear-gradient(180deg,rgba(201,188,238,.34),rgba(201,188,238,.08));
  border-left:2px solid rgba(201,188,238,.6);
  pointer-events:none;transform:skewX(-14deg);transform-origin:0 0;
}
.band-cta>.wrap{position:relative}

@media (max-width:760px){
  .band-cta::before{width:calc(60% + 160px)}
  .band-cta::after{display:none}
}

/* ---------- Motion support ---------- */
.rise-mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.rise-line{display:block}

/* Bevel glint (hover, pointer devices, motion viewers only): a 2px light
   sweep along the TOP edge — it lives on the border line, never behind text.
   Runs once per mouseenter (the animation restarts on re-hover). */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card::before,.jstep::before,.ep::before{
    content:"";position:absolute;top:-1px;left:0;right:0;height:2px;pointer-events:none;
    background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 35%,var(--ghost) 65%,rgba(201,188,238,0) 100%);
    background-repeat:no-repeat;background-size:36% 100%;background-position-x:-80%;
    opacity:0;
  }
  .card:hover::before,.jstep:hover::before,.ep:hover::before{
    animation:glint .45s ease-out;
  }
}
@keyframes glint{
  0%{opacity:1;background-position-x:-80%}
  85%{opacity:1}
  100%{opacity:0;background-position-x:180%}
}

/* Resolve border draw (journey step 04): motion viewers paint the blurple
   left border as a background gradient whose height scales with --rz, so it
   can draw in (top -> bottom) at the notch-cut moment.
   Static/no-JS/reduced-motion keep the plain border-left. */
@media (prefers-reduced-motion:no-preference){
  html.js .jstep-resolve{
    border-left-color:transparent;
    background-image:linear-gradient(var(--blurple),var(--blurple));
    background-origin:border-box;background-clip:border-box;
    background-repeat:no-repeat;background-position:0 0;
    background-size:3px calc(var(--rz,1)*100%);
  }
}

/* Hidden-before-animation states: scoped to html.js AND motion-preferring
   viewers only. site.js reveals these (watchdog-backed).
   2026-08-27: html.js is now set by a pre-paint inline head script (was set by
   site.js, which on a slow connection arrived AFTER first paint and made
   already-visible hero text vanish until the tween restored it). The nl-safety
   animation is the last-resort net: if site.js never runs the reveal, the type
   fades itself in ~2.2s after the class lands. fill:forwards outranks GSAP's
   inline opacity, which is fine — both end at 1. */
@media (prefers-reduced-motion:no-preference){
  html.js [data-rise]{opacity:0;animation:nl-safety .35s ease 2.2s forwards}
  html.js [data-hero-follow]{opacity:0;animation:nl-safety .35s ease 2.4s forwards}
  @keyframes nl-safety{to{opacity:1}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .sec-split,.pod-head{grid-template-columns:1fr;gap:36px}
  /* Stacked columns: the kicker offset is desktop-only */
  .opp-right,.who-plate>div:last-child,.sec-split>div:last-child,.pod-head .pod-line{padding-top:0}
  .podwave svg{height:48px}
  .opp-grid,.who-plate{grid-template-columns:1fr;gap:36px}
  .opp-right{border-left:0;padding-left:0}
  .moves-cards{grid-template-columns:1fr;gap:20px}
  /* Footer: Brand spans the full first row; the three link columns share the
     second (2026-08-27 — the old 1fr 1fr left an empty cell beside Contact). */
  .footer-grid{grid-template-columns:repeat(3,1fr);gap:40px}
  .f-brand{grid-column:1/-1}
  .pattern,.decode,.moments{grid-template-columns:1fr}
  /* Below desktop the hero sub wraps wide across the image — deepen the veil
     so its lighter text never sits on raw glass (mirrors the .ph-veil rule). */
  .hero-veil{background:linear-gradient(104deg,rgba(250,251,252,.96) 0%,rgba(250,251,252,.9) 40%,rgba(250,251,252,.76) 62%,rgba(250,251,252,.48) 82%,rgba(250,251,252,.2) 100%)}
}
/* Partners keep the photo-beside-bio grid down to 641px — a smaller photo
   column at tablet keeps the bio readable; below that the stack's photo
   fills its column edge to edge, so no orphaned gap either way. */
@media (max-width:1000px){
  .partner{grid-template-columns:minmax(220px,300px) minmax(0,1fr)}
}
@media (max-width:640px){
  .partner{grid-template-columns:1fr}
}
/* Start page: the two-column contract is ≥900px (DESIGN.md) — it gets its own breakpoint. */
@media (max-width:899px){
  .start-grid{grid-template-columns:1fr;gap:36px}
}
/* In the narrow two-column window the paired selects can't hold their longest
   option ("Raise in 12+ months") side by side — stack them. */
@media (min-width:900px) and (max-width:1080px){
  .start-grid .form-row{grid-template-columns:1fr}
  .start-grid .form-row .field+.field{margin-top:24px}
}
/* 2026-08-27: burger breakpoint raised 760→899. Seven nav items (Podcast added
   8/26) need ~900px — at 761-899 "The Raise"/"Who We Are" wrapped to two lines
   and the Talk-to-us button stacked. Only the nav swap lives here; everything
   else mobile stays in the 760 block below. */
@media (max-width:899px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media (max-width:760px){
  /* The plate fills most of the header band on small screens — deepen the veil
     so the kicker and H1 never sit on raw glass. */
  .h-page{text-wrap:balance}
  .ph-veil{background:linear-gradient(to top,rgba(250,251,252,.95),rgba(250,251,252,.85) 55%,rgba(250,251,252,.5) 85%,rgba(250,251,252,.18))}
  .hero-content{padding-top:120px;padding-bottom:110px}
  .proof-grid{grid-template-columns:1fr}
  .stat{padding:22px 0}
  .stat+.stat{border-left:0;border-top:1px solid var(--hairline)}
  .cards-2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .form .form-row .field+.field{margin-top:24px}
  .jstep{padding:26px 24px}
  .ep{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n t" "n w" "n d"}
  .ep-d{margin-top:8px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
}

/* (The internal review-marks system — .note-internal + .ph-decide — was
   removed 2026-07-29 per Mason: all marks off the site. Open questions are
   tracked in ..\NOTES.md + ..\COPY.md, never on-page. The site is fully
   client-clean again.) */

/* Raiser's Edge page (2026-08-26): the podcast's waveform carries the header media slot
   (no photo -- the wave IS the page's content image), and the full episode list runs open. */
.ph-wave{position:absolute;inset:0;background:linear-gradient(180deg,var(--lav),var(--paper))}
.ph-wave svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:72%;opacity:.45}
.epg-open{max-height:none;overflow:visible;padding-right:0}
.epg-short{max-height:none;overflow:visible;padding-right:0}
.pod-links-sub{margin-top:16px}

/* Privacy / legal page (2026-09-01) */
.eff-date{margin-top:20px;font-family:var(--mono);font-size:12.5px;color:var(--slate)}
.legal{max-width:70ch;margin-top:18px}
.legal h2{font-size:20px;letter-spacing:-.012em;margin-top:36px}
.legal p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--slate)}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--acc)}
.f-base a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.f-base a:hover{color:#fff}