/* Summit Frameworks — main stylesheet
   Brand tokens per brand sheet; dark executive blueprint. */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/corm600.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/cormital600.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/archivo600.woff2) format('woff2')}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/mono400.woff2) format('woff2')}

:root{
  --carbon:#12171B;
  --navy:#16212B;
  --navy-raised:#1B2836;
  --slate:#5D7486;
  --slate-text:#9DB0BE;
  --copper:#B8743C;
  --amber:#C38A3A;
  --rust:#A34E42;
  --pine:#3D6B5C;
  --white:#F7F7F4;
  --mist:#E8ECEF;
  --ink:#16212B;           /* on-scene text over the bright alpine world */
  --ink-muted:#41546B;     /* secondary on-scene text */
  --line:rgba(93,116,134,.22);
  --line-strong:rgba(93,116,134,.42);
  --display:'General Sans',Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Plex Mono','SF Mono',Menlo,monospace;
  --wordmark:'Archivo',sans-serif;
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(6vw 6vw at 78% 10%,rgba(255,253,244,.95),rgba(255,248,224,.45) 45%,transparent 70%),radial-gradient(34vw 28vw at 78% 11%,rgba(255,246,220,.55),transparent 70%)}
html{background:#C9DBEB;scroll-behavior:smooth;max-width:100%;overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:linear-gradient(180deg,#7FA9D2 0%,#A9C6E2 34%,#DCE9F4 68%,#F2F7FB 100%) fixed;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;max-width:100%;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}

.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--copper);color:var(--carbon);padding:10px 18px;font-family:var(--mono);font-size:12px}
.skip:focus{left:0}

/* fixed alpine stage — everything scrolls over it.
   Parallax, not zoom: plates are oversized vertically (top/height overscan)
   and share a single --pan offset set continuously in JS off scroll progress,
   so the alpine world glides slowly upward as you climb — a fraction of the
   content's scroll speed — while sections crossfade. No scale, no zoom. */
.film{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#A9C3DC,#E9F1F8)}
.film-plate{position:absolute;left:0;right:0;top:-11%;height:122%;background-size:cover;background-position:center;opacity:0;will-change:opacity;transform:translate3d(0,var(--pan,0px),0);transition:opacity 1s ease}
.film-plate.is-active{opacity:1}
.film-plate[data-scene="hero"]{background-position:center 46%}
.film-plate[data-scene="pillars"]{background-position:center 48%}
.film-plate[data-scene="method"]{background-position:center 44%}
.film-plate[data-scene="summit"]{background-position:center 50%}
@media(prefers-reduced-motion:reduce){.film-plate{transform:none;transition:none}}
/* blueprint dot-grid — the schematic layer that replaces the mountain once
   it fades out on subpages (see updateSubpageFilm() in main.js). Opacity is
   driven by JS; the slow drift is pure CSS so it costs nothing extra. */
.blueprint-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  background-image:radial-gradient(rgba(93,116,134,.4) 1px,transparent 1.4px);
  background-size:34px 34px;
  animation:blueprintDrift 100s linear infinite}
@keyframes blueprintDrift{0%{background-position:0 0}100%{background-position:136px 102px}}
@media(prefers-reduced-motion:reduce){.blueprint-grid{animation:none}}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(238,244,250,.5) 0%,rgba(238,244,250,.22) 30%,rgba(238,244,250,.06) 55%,rgba(238,244,250,0) 75%),linear-gradient(105deg,rgba(238,244,250,.35) 0%,rgba(238,244,250,.12) 45%,rgba(238,244,250,0) 80%)}
.snow{position:fixed;inset:0;z-index:1;pointer-events:none}
.fog{position:fixed;inset:0;z-index:1;pointer-events:none}
.motes{position:fixed;inset:0;z-index:1;pointer-events:none}
@media(max-width:720px){.scrim{background:rgba(238,244,250,.72)}}

/* Chrome fallback: fixed transformed backgrounds + backdrop blur + canvas
   weather are the combination that made Chrome soft and laggy. Safari keeps
   the richer path; Chrome gets sharp static plates and cheaper glass. */
.chrome-lite .film-plate{transition:opacity .6s ease-out}
.chrome-lite .snow,.chrome-lite .fog{display:none}
.chrome-lite .nav,.chrome-lite .btn-solid,.chrome-lite .btn-ghost,.chrome-lite .btn-hero-pill,.chrome-lite .hero-data,.chrome-lite .pillar,.chrome-lite .doc-mock,.chrome-lite .why-item,.chrome-lite .network-visual,.chrome-lite .testimonial{backdrop-filter:none;-webkit-backdrop-filter:none}
.chrome-lite .nav{background:rgba(247,247,244,.76)}
.chrome-lite .btn-solid,.chrome-lite .btn-ghost,.chrome-lite .btn-hero-pill{background:rgba(247,247,244,.72)}
.chrome-lite .pillar,.chrome-lite .testimonial{background:rgba(22,33,43,.82)}
.chrome-lite .hero .eyebrow,.chrome-lite .hero .lede,.chrome-lite .hero .actions,.chrome-lite .hero-data,.chrome-lite .hero-preview,.chrome-lite .reveal{opacity:1;transform:none;animation:none;transition:none}
.chrome-lite .h-anim .w{opacity:1;transform:none;transition:none}

main,.footer,.nav{position:relative;z-index:2}
.alt-hud{position:fixed;right:24px;bottom:20px;z-index:5;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.82);mix-blend-mode:difference;pointer-events:none;font-variant-numeric:tabular-nums}
@media(max-width:900px){.alt-hud{display:none}}
.checkpoints{position:fixed;left:28px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:26px;pointer-events:none}
@media(max-width:900px){.checkpoints{display:none}}
.scene-label{position:static;transform:none;font-family:var(--mono);font-size:10px;letter-spacing:.12em;white-space:nowrap;opacity:0;transition:opacity .4s}
.scene-label.active{opacity:1}
.scene-label.peak{color:var(--copper)}
.scene-label.peak::before{content:"▲";margin-right:8px;font-size:9px}
.scene-label.camp{color:var(--ink-muted)}
.scene-label.camp::before{content:"■";margin-right:8px;font-size:7px;color:var(--copper)}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 44px}
@media(max-width:720px){.wrap{padding:0 22px}}

/* ---------- shared ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--copper);flex:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;text-wrap:balance;line-height:0.95;letter-spacing:-0.045em}
h1 em,h2 em,h3 em{font-style:normal;color:var(--copper)}
h2{font-size:clamp(38px,4.8vw,60px)}
.lede{color:var(--ink-muted);font-size:17px;max-width:54ch}
.actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;align-items:center}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:42px;font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.02em;text-transform:none;cursor:pointer;border-radius:999px;overflow:hidden;isolation:isolate;transition:background .25s,color .25s,border-color .25s,box-shadow .25s,transform .25s}
.btn::before{content:"";position:absolute;inset:1px 1px auto;height:48%;z-index:-1;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.08));opacity:.72;pointer-events:none}
.btn::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:radial-gradient(85% 120% at 20% 0%,rgba(255,255,255,.5),transparent 55%),linear-gradient(135deg,rgba(255,255,255,.22),rgba(247,247,244,.08) 48%,rgba(184,116,60,.18));pointer-events:none}
.btn-solid,.btn-ghost,.btn-hero-pill{background:rgba(247,247,244,.22);color:var(--ink);border:1px solid rgba(255,255,255,.55);padding:12px 22px;backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);box-shadow:0 16px 40px -28px rgba(18,23,27,.6),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-solid:hover,.btn-ghost:hover,.btn-hero-pill:hover{background:rgba(247,247,244,.6);border-color:rgba(255,255,255,.85);color:var(--carbon);box-shadow:0 18px 44px -28px rgba(18,23,27,.68),inset 0 1px 0 rgba(255,255,255,.62);transform:translateY(-1px)}
.btn-sm{min-height:36px;padding:10px 20px;font-size:12px;white-space:nowrap}
@media(max-width:560px){.btn-sm{min-height:34px;padding:9px 12px;font-size:11px;letter-spacing:.02em}.logo b{display:none}}
.btn-lg{min-height:54px;padding:19px 40px;font-size:15px}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.75,.25,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.section-head{margin-bottom:64px;max-width:640px}
.solid{position:relative;width:100%;margin:0 auto;background:linear-gradient(180deg,rgba(242,247,251,.96) 0%,rgba(231,238,245,.96) 55%,rgba(242,247,251,.96) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) 82px,rgba(0,0,0,.72) 178px,#000 280px,#000 calc(100% - 280px),rgba(0,0,0,.72) calc(100% - 178px),rgba(0,0,0,.18) calc(100% - 82px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) 82px,rgba(0,0,0,.72) 178px,#000 280px,#000 calc(100% - 280px),rgba(0,0,0,.72) calc(100% - 178px),rgba(0,0,0,.18) calc(100% - 82px),transparent 100%)}
.solid-full{position:relative;background:linear-gradient(180deg,rgba(242,247,251,.96) 0%,rgba(231,238,245,.96) 55%,rgba(242,247,251,.96) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) 90px,rgba(0,0,0,.72) 190px,#000 300px,#000 calc(100% - 300px),rgba(0,0,0,.72) calc(100% - 190px),rgba(0,0,0,.18) calc(100% - 90px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) 90px,rgba(0,0,0,.72) 190px,#000 300px,#000 calc(100% - 300px),rgba(0,0,0,.72) calc(100% - 190px),rgba(0,0,0,.18) calc(100% - 90px),transparent 100%)}
#network.solid-full{background:linear-gradient(180deg,rgba(242,247,251,.985) 0%,rgba(233,240,247,.985) 55%,rgba(242,247,251,.985) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) 90px,rgba(0,0,0,.72) 190px,#000 300px,#000 calc(100% - 420px),rgba(0,0,0,.72) calc(100% - 240px),rgba(0,0,0,.18) calc(100% - 110px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) 90px,rgba(0,0,0,.72) 190px,#000 300px,#000 calc(100% - 420px),rgba(0,0,0,.72) calc(100% - 240px),rgba(0,0,0,.18) calc(100% - 110px),transparent 100%)}

/* blueprint dot-grid, homepage Method + Frameworks panels only — same motif
   as the subpage blueprint-grid, but as a ::before so it inherits each
   section's own mask-image and feathers in/out at exactly the same edges
   as the panel itself, instead of needing its own separate fade logic.
   isolation:isolate scopes the z-index:-1 pseudo to this section's own
   stacking context (matching how .pillar/.testimonial already do this)
   so it can't be pulled behind unrelated content elsewhere on the page. */
.method,#network.solid-full{isolation:isolate}
.method::before,#network.solid-full::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(93,116,134,.4) 1px,transparent 1.4px);
  background-size:34px 34px;
  animation:blueprintDrift 100s linear infinite}
@media(prefers-reduced-motion:reduce){.method::before,#network.solid-full::before{animation:none}}

/* word-by-word headline entrance in solid sections */
.h-anim .w{display:inline-block;opacity:0;transform:translateY(30px) rotate(1.5deg)}
.h-anim.in .w{opacity:1;transform:none;transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.25,1)}
@media(prefers-reduced-motion:reduce){.h-anim .w{opacity:1;transform:none;transition:none}}

/* ---------- nav ---------- */
/* liquid glass pill nav — rollback: git restore -s e7a7da8 css/main.css */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1240px,calc(100% - 40px));z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;height:58px;padding:0 9px 0 26px;background:rgba(247,247,244,.16);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);border:1px solid rgba(255,255,255,.36);border-radius:999px;box-shadow:0 20px 50px -32px rgba(18,23,27,.55),inset 0 1px 0 rgba(255,255,255,.42);transition:background .35s,border-color .35s,box-shadow .35s}
.nav.scrolled{background:rgba(247,247,244,.55);border-color:rgba(255,255,255,.6)}
@media(max-width:720px){.nav{top:10px;width:calc(100% - 20px);padding:0 8px 0 18px}}
.nav .btn{border-radius:999px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--wordmark);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.logo b{font-weight:600;color:rgba(22,33,43,.55)}
.nav-links{display:flex;gap:30px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.nav-links a{position:relative;color:rgba(22,33,43,.68);padding-bottom:3px;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:50%;right:50%;bottom:-2px;height:1px;background:var(--copper);transition:left .28s cubic-bezier(.2,.75,.25,1),right .28s cubic-bezier(.2,.75,.25,1)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{left:0;right:0}
@media(prefers-reduced-motion:reduce){.nav-links a::after{transition:none}}
@media(max-width:900px){.nav-links{display:none}}
.nav-menu-toggle{display:none;min-height:36px;padding:9px 14px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(247,247,244,.28);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.04em;cursor:pointer}
.mobile-nav-panel{position:absolute;top:68px;left:0;right:0;display:grid;gap:4px;padding:12px;background:rgba(247,247,244,.94);border:1px solid rgba(255,255,255,.8);border-radius:22px;box-shadow:0 28px 60px -34px rgba(18,23,27,.65);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.mobile-nav-panel a{padding:12px 14px;border-radius:14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.mobile-nav-panel a:hover,.mobile-nav-panel a:focus-visible{background:rgba(184,116,60,.12);outline:none}
@media(max-width:900px){.nav-menu-toggle{display:inline-flex;align-items:center;justify-content:center}.nav{gap:8px}.nav>.btn{margin-left:auto}}
@media(max-width:440px){.nav-menu-toggle{padding:9px 11px}.nav>.btn{padding-left:12px;padding-right:12px}.nav{padding-left:14px}.logo{gap:8px}}

/* ---------- coming soon ---------- */
.coming-soon-page .coming-soon-main{position:relative;z-index:2}
.coming-soon-page .coming-soon-hero{min-height:72vh;padding-top:calc(var(--nav-h) + 92px);padding-bottom:120px}
.coming-soon-page .coming-soon-hero h1{max-width:780px}
.coming-soon-page .coming-soon-hero .lede{max-width:58ch}
.coming-soon-status-section{padding:72px 0 88px}
.coming-soon-status{display:flex;align-items:flex-start;gap:18px;max-width:620px;border-top:1px solid var(--line-strong);padding-top:24px;color:var(--ink-muted)}
.coming-soon-status-line{width:1px;height:52px;flex:none;background:var(--copper);box-shadow:0 0 20px rgba(184,116,60,.45)}
.coming-soon-status-label{display:block;margin-bottom:8px;color:var(--copper);font:10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.coming-soon-status strong{display:block;font:600 20px/1.15 var(--display);color:var(--ink);letter-spacing:-.02em}
.soon-locked{overflow:hidden}
.coming-soon-overlay{position:fixed;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:120px 44px 64px;background:linear-gradient(180deg,rgba(201,219,235,.48),rgba(232,236,239,.74) 78%,rgba(242,247,251,.92));backdrop-filter:blur(7px) saturate(.9);-webkit-backdrop-filter:blur(7px) saturate(.9)}
.coming-soon-overlay-card{width:min(760px,100%);padding:58px 64px 62px;background:rgba(242,247,251,.82);border:1px solid rgba(255,255,255,.72);box-shadow:0 28px 70px -36px rgba(18,23,27,.42),inset 0 1px 0 rgba(255,255,255,.72)}
.coming-soon-overlay-card h1{max-width:690px;font-size:clamp(48px,6vw,78px);color:var(--ink)}
.coming-soon-overlay-card h1 em{color:var(--copper)}
.coming-soon-overlay-card .lede{max-width:54ch;margin-top:28px}
.coming-soon-overlay-card .actions{margin-top:30px}
@media(max-width:720px){.coming-soon-overlay{padding:110px 22px 32px}.coming-soon-overlay-card{padding:38px 26px 42px}.coming-soon-overlay-card h1{font-size:clamp(42px,12vw,58px)}.coming-soon-overlay-card .actions{align-items:stretch;flex-direction:column}.coming-soon-overlay-card .btn{width:100%}}
@media(max-width:720px){.coming-soon-page .coming-soon-hero{min-height:76vh;padding-top:calc(var(--nav-h) + 64px);padding-bottom:88px}.coming-soon-status-section{padding:72px 0 88px}}

/* ---------- hero ---------- */
@keyframes riseIn{to{opacity:1;transform:none}}
.hero .eyebrow,.hero .lede,.hero .actions,.hero-data{opacity:0;transform:translateY(26px);animation:riseIn .95s cubic-bezier(.2,.7,.2,1) forwards}
.hero .eyebrow{animation-delay:.2s}
.hero .lede{animation-delay:1.15s}
.hero .actions{animation-delay:1.4s}
.hero-data{animation-delay:1.7s}
@media(prefers-reduced-motion:reduce){.hero .eyebrow,.hero .lede,.hero .actions,.hero-data{opacity:1;transform:none;animation:none}}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;position:relative;padding-top:calc(var(--nav-h) + 42px)}
.hero-content{max-width:900px;margin:0 auto;padding:16px 0 0;text-align:center}
.hero-gap{flex:1 1 auto;min-height:88px}
.hero .eyebrow{justify-content:center;margin-bottom:18px}
.hero .eyebrow::before{display:none}
.hero h1{font-family:'General Sans',Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:600;line-height:0.95;letter-spacing:-0.045em;font-size:clamp(50px,6.2vw,84px);margin-bottom:36px;color:var(--ink)}
.hero h1 em{font-style:normal;text-shadow:0 0 34px rgba(247,247,244,.32)}
.hero .lede{position:relative;margin:0 auto;font-size:15px;font-weight:600;line-height:1.45;max-width:64ch;color:rgba(22,33,43,.9);text-shadow:0 1px 14px rgba(247,247,244,.55)}
/* soft legibility wash, not a shape. Sizing the ellipse as a % of this
   pseudo-element's own box (which is much wider than it is tall) meant the
   gradient's fade-to-transparent point fell way outside the visible box in
   the vertical direction — so almost the whole box rendered near-flat at
   peak opacity, with blur only softening the very outer corners, which
   read as a plain rectangle instead of a vignette. A fixed-size ellipse,
   sized independent of the box's own (mismatched) aspect ratio, actually
   fades to nothing well inside the box before the blur takes over. */
.hero .lede::before{content:"";position:absolute;inset:-40px -80px;z-index:-1;background:radial-gradient(ellipse 380px 120px at 50% 50%,rgba(247,247,244,.4),transparent 75%);filter:blur(24px);pointer-events:none}
.hero .actions{justify-content:center;margin-top:26px}
body[data-hero-rail="cards"] .hero-data-legacy{display:none}
body[data-hero-rail="legacy"] .hero-preview{display:none}
/* all 6 cards visible together, cascading by distance from center — NOT a
   one-at-a-time carousel. Depth-based opacity/scale gives the centered
   card hierarchy without ever hiding or clipping its neighbors. */
.hero-preview{position:relative;z-index:3;overflow:hidden;width:100%;max-width:1300px;margin:0 auto;padding:0;opacity:0;transform:translateY(34px);animation:riseIn .95s cubic-bezier(.2,.7,.2,1) 1.75s forwards}
.hero-preview::before,.hero-preview::after{display:none}
.hero-preview-track{display:flex;align-items:flex-start;gap:16px;width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:16px max(40px,calc(50% - 105px)) 64px;cursor:grab;touch-action:pan-y;user-select:none;scroll-snap-type:x mandatory}
.hero-preview-track::-webkit-scrollbar{display:none}
.hero-preview-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.hero-preview-track.is-dragging .preview-card{pointer-events:none}
/* cascading strip — --depth is set continuously in JS (0 at center, rising
   outward). Gentle falloff so every card stays clearly visible; only the
   centered one reads as "in focus". */
.preview-card{position:relative;display:flex;flex:0 0 210px;height:326px;overflow:hidden;border:1px solid rgba(247,247,244,.82);border-radius:16px;background:rgba(18,23,27,.24);color:var(--white);isolation:isolate;opacity:clamp(0,calc(1 - var(--depth,0) * .26),1);transform:translateY(calc(var(--depth,0) * 40px)) scale(clamp(.82,calc(1 - var(--depth,0) * .075),1));box-shadow:0 calc(20px + var(--depth,0) * 6px) 46px -30px rgba(18,23,27,.4),0 4px 14px -8px rgba(18,23,27,.2);z-index:10;transition:border-color .32s,box-shadow .32s;scroll-snap-align:center;scroll-snap-stop:always}
.preview-card.is-active{z-index:20;border-color:rgba(247,247,244,.98);box-shadow:0 30px 64px -34px rgba(18,23,27,.48),0 10px 26px -14px rgba(18,23,27,.26)}
.preview-card:hover{border-color:rgba(255,255,255,.98)}
.preview-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:saturate(.98) contrast(1.04)}
.preview-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,23,27,.3) 0%,rgba(18,23,27,.04) 46%,rgba(18,23,27,.4) 100%)}
.preview-kicker,.preview-title,.preview-meta{position:absolute;left:16px;right:16px;z-index:2;text-shadow:0 2px 16px rgba(0,0,0,.44)}
.preview-kicker{top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,247,244,.82)}
.preview-title{top:34px;font-family:var(--display);font-size:25px;line-height:1.02;color:var(--white)}
.preview-meta{bottom:15px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,247,244,.78)}
.hero-data{position:absolute;left:0;right:0;bottom:0;border-top:1px solid rgba(22,33,43,.3);background:rgba(18,23,27,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-data-row{display:flex;gap:56px;align-items:center;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.datum{display:flex;flex-direction:column;gap:2px}
.d-num{font-family:var(--mono);font-size:22px;color:var(--mist);font-variant-numeric:tabular-nums}
.d-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.datum.coords{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--slate)}
@media(max-width:900px){.datum.coords{display:none}}
@media(max-width:720px){
  .hero{min-height:0;padding-bottom:0}
  .hero-content{padding:110px 0 34px;text-align:center}
  .hero .lede::before{inset:-28px -20px;background:radial-gradient(ellipse 300px 120px at 50% 50%,rgba(247,247,244,.4),transparent 75%)}
  .hero-gap{flex:0 0 auto;min-height:0}
  .hero h1{font-size:clamp(44px,12vw,58px)}
  .hero .lede{font-size:16px;line-height:1.7}
  .hero-preview{margin-top:0;max-width:none}
  .hero-preview-track{gap:10px;padding:12px max(22px,calc(50% - 79px)) 40px}
  .preview-card{flex-basis:158px;height:250px;transform:translateY(calc(var(--depth,0) * 26px)) scale(clamp(.85,calc(1 - var(--depth,0) * .08),1))}
  .preview-title{font-size:22px}
  .hero-data{position:static;margin-top:24px}
  .hero-data-row{gap:20px;flex-direction:column;align-items:flex-start}
}

/* ---------- pillars ---------- */
.pillars{padding:150px 0 130px}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.pillar-grid{grid-template-columns:1fr}}
.pillar{position:relative;isolation:isolate;overflow:hidden;background:rgba(22,33,43,.6);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 54px -34px rgba(18,23,27,.65),inset 0 1px 0 rgba(255,255,255,.1);padding:40px 36px 36px;transition:background .3s,box-shadow .3s}
.pillar::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,rgba(255,255,255,.07) 0%,transparent 40%),radial-gradient(120% 60% at 15% 0%,rgba(184,116,60,.1),transparent 55%);pointer-events:none}
.pillar:hover{background:rgba(27,40,54,.7);box-shadow:0 28px 60px -32px rgba(18,23,27,.72),inset 0 1px 0 rgba(255,255,255,.16)}
.pillar-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pillar-trace rect{fill:none;stroke:var(--copper);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .6s cubic-bezier(.2,.75,.25,1)}
.pillar:hover .pillar-trace rect{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.pillar-trace rect{transition:none}}
.pillar-art{margin-bottom:28px;border:1px solid var(--line);background:rgba(18,23,27,.5)}
.pillar-art svg{display:block}
.pillar-art [pathLength],.doc-svg [pathLength]{stroke-dasharray:100;stroke-dashoffset:100;fill:none}
.pillar h3{font-size:30px;margin-bottom:12px;color:var(--white)}
.pillar p{font-size:14.5px;color:var(--slate-text)}
.pillar-ref{display:block;margin-top:26px;padding-top:16px;border-top:1px dashed var(--line-strong);font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--amber)}
.pillars-cta{display:flex;justify-content:center;margin-top:56px}

/* ---------- method ---------- */
.method{padding:210px 0 190px}
.method.solid{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 44px,rgba(0,0,0,.78) 100px,#000 150px,#000 calc(100% - 280px),rgba(0,0,0,.72) calc(100% - 178px),rgba(0,0,0,.18) calc(100% - 82px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 44px,rgba(0,0,0,.78) 100px,#000 150px,#000 calc(100% - 280px),rgba(0,0,0,.72) calc(100% - 178px),rgba(0,0,0,.18) calc(100% - 82px),transparent 100%)}
.method .section-head{margin-left:auto;margin-right:auto;text-align:center}
.method .eyebrow{justify-content:center}
.method .eyebrow::before{display:none}
.method .section-head .lede{margin:26px auto 0}
.step{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center;padding:72px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:none}
.step-flip{direction:rtl}
.step-flip>*{direction:ltr}
@media(max-width:900px){.step,.step-flip{grid-template-columns:1fr;direction:ltr;gap:36px;padding:56px 0}}
.step-idx{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--copper);display:block;margin-bottom:16px}
.step h3{font-size:clamp(34px,3.6vw,46px);margin-bottom:18px}
.step p{color:var(--ink-muted);font-size:15.5px;max-width:46ch}
.step-out{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--amber);border:1px solid rgba(184,116,60,.4);padding:8px 14px}

.doc-mock{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;background:rgba(18,23,27,.9);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgba(255,255,255,.12);box-shadow:0 28px 58px -32px rgba(18,23,27,.65),inset 0 1px 0 rgba(255,255,255,.1);transition:background .3s,box-shadow .3s}
.doc-mock::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,rgba(255,255,255,.07) 0%,transparent 40%),radial-gradient(120% 60% at 15% 0%,rgba(184,116,60,.1),transparent 55%);pointer-events:none}
.doc-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--slate)}
.doc-svg{display:block;padding:10px;background-image:linear-gradient(rgba(93,116,134,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(93,116,134,.07) 1px,transparent 1px);background-size:20px 20px}
.move-flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:28px;background-image:linear-gradient(rgba(93,116,134,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(93,116,134,.07) 1px,transparent 1px);background-size:20px 20px}
.move-flow li{min-height:150px;padding:24px 18px;background:rgba(18,23,27,.58);border:1px solid rgba(93,116,134,.28)}
.move-state{display:block;margin-bottom:34px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
.move-flow strong{display:block;margin-bottom:10px;font-family:var(--display);font-size:24px;line-height:1;color:var(--white)}
.move-flow small{display:block;font-size:12px;line-height:1.5;color:var(--slate-text)}
@media(max-width:720px){.move-flow{grid-template-columns:1fr 1fr;padding:18px}.move-flow li{min-height:130px}}
.chip-pine{display:inline-flex;align-items:center;gap:7px;color:var(--mist);font-size:9px}
.chip-pine::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 7px 1px rgba(74,222,128,.75);flex:none}


/* ---------- why ---------- */
.why{padding:150px 0}
.why-statement{max-width:20ch;margin-bottom:26px}
.why .lede{margin-bottom:56px}
.proof-stats{display:flex;gap:56px;flex-wrap:wrap;margin-bottom:56px}
.proof-stat{display:flex;flex-direction:column;gap:6px;max-width:230px}
.p-num{font-family:var(--mono);font-size:38px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.p-lbl{font-size:13px;color:var(--ink-muted);line-height:1.45}
.p-src{display:block;margin-top:8px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--rust);opacity:.8}
@media(max-width:720px){.proof-stats{gap:32px}}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}}
.why-item{background:rgba(22,33,43,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:36px 32px}
.w-idx{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--rust)}
.why-item h4{font-size:26px;margin:14px 0 10px;color:var(--white)}
.why-item p{font-size:14px;color:var(--slate-text)}

/* ---------- network ---------- */
.network{padding:340px 0}
.network-grid{display:grid;grid-template-columns:6fr 5fr;gap:72px;align-items:center}
@media(max-width:900px){.network-grid{grid-template-columns:1fr;gap:40px}}
.network-copy .lede{margin:22px 0 36px}
.network-visual{border:1px solid var(--line);border-radius:16px;background:rgba(18,23,27,.9);background-image:linear-gradient(rgba(93,116,134,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(93,116,134,.07) 1px,transparent 1px);background-size:20px 20px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:28px;box-shadow:0 30px 60px -36px rgba(18,23,27,.4);transition:box-shadow .8s ease}
.network-visual svg{display:block}
.net-node-outline{transition:stroke .3s ease;filter:brightness(calc(1 + var(--glow, 0) * 1.6))}
.net-node-outline.active{stroke:#C38A3A}
.net-node-fill{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);filter:brightness(calc(1 + var(--glow, 0) * 1.6))}
.net-node-fill.active{opacity:1;transform:scale(1)}
.net-line{stroke-dasharray:100;stroke-dashoffset:100}
.net-label{transition:fill .3s ease}
.net-label.active{fill:#C38A3A}
@media(prefers-reduced-motion:reduce){.net-node-fill,.net-line,.net-node-outline,.net-node-fill{transition:none}}
@media(prefers-reduced-motion:reduce){.network-visual{transition:none}}

/* ---------- testimonials ---------- */
.testimonials{padding:150px 0}
.testimonials .lede{margin-top:22px}
.testimonial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.testimonial-grid{grid-template-columns:1fr}}
.testimonial{position:relative;isolation:isolate;overflow:hidden;background:rgba(22,33,43,.6);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgba(255,255,255,.12);padding:36px 36px 32px;transition:background .3s,box-shadow .3s}
.testimonial::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,rgba(255,255,255,.06) 0%,transparent 40%);pointer-events:none}
.testimonial:hover{background:rgba(27,40,54,.7);box-shadow:0 24px 54px -34px rgba(18,23,27,.65)}
.testimonial p{color:var(--slate-text);font-size:15px;line-height:1.65}
.testimonial .t-name{display:block;margin-top:22px;padding-top:16px;border-top:1px dashed var(--line-strong);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.testimonial-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.testimonial-trace rect{fill:none;stroke:var(--copper);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .6s cubic-bezier(.2,.75,.25,1)}
.testimonial:hover .testimonial-trace rect{stroke-dashoffset:0}
@media(hover:none){.testimonial.in-view .testimonial-trace rect{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.testimonial-trace rect{transition:none}}

/* ---------- final ---------- */
.final{min-height:88vh;display:flex;align-items:center;padding:140px 0;text-align:left}
.final h2{font-size:clamp(44px,5.6vw,72px)}
.final .lede{margin-top:26px}

/* ---------- footer ---------- */
.footer{background:linear-gradient(180deg,rgba(242,247,251,0) 0%,rgba(242,247,251,.55) 10%,rgba(242,247,251,.85) 26%,rgba(242,247,251,.96) 46%,rgba(242,247,251,.96) 100%)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-top:64px;padding-bottom:72px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:36px}}
.foot-brand .logo{color:var(--ink)}
.foot-brand .logo b{color:var(--ink-muted)}
.foot-brand p{margin-top:18px;font-size:13px;color:var(--ink);font-weight:600;line-height:1.8}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);font-weight:400;margin-bottom:6px}
.foot-col a{font-size:13px;color:var(--ink);font-weight:600;transition:color .2s}
.foot-col a:hover{color:var(--copper)}
.foot-meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink);font-weight:600;line-height:2}

/* ---------- conversion pages ---------- */
.detail-hero{min-height:76vh}
.intake-hero{min-height:56vh;padding-bottom:54px}
.detail-hero .lede{max-width:64ch}
.detail-hero .actions{align-items:center}
.detail-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.detail-card{position:relative;isolation:isolate;overflow:hidden;padding:38px 34px;background:rgba(22,33,43,.76);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.detail-card .card-kicker{margin-bottom:16px}
.detail-card h3{font-size:clamp(28px,3vw,40px);color:var(--white);margin-bottom:16px}
.detail-card p,.detail-card li{font-size:14px;color:var(--slate-text)}
.detail-card ul,.scope-list{list-style:none;display:grid;gap:10px;margin-top:22px}
.detail-card li::before,.scope-list li::before{content:"\2192";color:var(--copper);margin-right:10px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:process}
.process-step{counter-increment:process;padding-top:22px;border-top:1px solid var(--line-strong)}
.process-step::before{content:"0" counter(process);display:block;margin-bottom:20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--copper)}
.process-step h3{font-size:28px;margin-bottom:12px}
.process-step p{font-size:14px;color:var(--ink-muted)}
.offer-lockup{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:42px;padding-top:30px;border-top:1px solid var(--line-strong)}
.offer-price{font-family:var(--display);font-size:clamp(58px,8vw,104px);font-weight:600;line-height:.8;letter-spacing:-.06em;color:var(--ink)}
.offer-price small{display:block;margin-top:18px;font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.faq-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.faq-list details{background:rgba(242,247,251,.9);padding:24px 28px}
.faq-list summary{cursor:pointer;font-weight:600;color:var(--ink)}
.faq-list details p{max-width:68ch;margin-top:14px;color:var(--ink-muted);font-size:14px}
.intake-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:56px;align-items:start}
.intake-form{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:36px;background:rgba(242,247,251,.92);border:1px solid rgba(255,255,255,.7);box-shadow:0 26px 60px -42px rgba(18,23,27,.6)}
.form-field{display:grid;gap:8px}
.form-field.full{grid-column:1/-1}
.form-field label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid var(--line-strong);border-radius:0;background:rgba(255,255,255,.74);color:var(--ink);font:inherit;padding:13px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.form-field textarea{min-height:150px;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--copper);box-shadow:0 0 0 3px rgba(184,116,60,.14)}
.form-help{font-size:12px;color:var(--ink-muted)}
.form-help a{color:var(--copper);text-decoration:underline;text-underline-offset:3px}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.contact-panel{padding:30px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.contact-panel h2{font-size:34px;margin-bottom:18px}
.contact-panel p{font-size:14px;color:var(--ink-muted);margin-bottom:18px}
.contact-panel a{color:var(--copper);font-weight:600}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr 1fr}.intake-layout{grid-template-columns:1fr}.offer-lockup{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.process-grid,.intake-form{grid-template-columns:1fr}.form-field.full,.form-actions{grid-column:1}.intake-form{padding:26px 22px}.detail-card{padding:30px 24px}}

/* ---------- starter subpages ---------- */
.subpage .film-plate{opacity:0}
.subpage .film-plate.is-active{opacity:1}
.subpage main{overflow:hidden}
.page-hero{min-height:72vh;display:flex;align-items:center;padding:calc(var(--nav-h) + 86px) 0 110px;text-align:left}
.page-hero .wrap{max-width:1100px}
.page-hero .eyebrow::before{display:block}
.page-hero h1{max-width:950px;font-size:clamp(48px,6vw,82px);color:var(--ink);margin-bottom:28px}
.page-hero .lede{max-width:58ch;color:rgba(22,33,43,.86);font-weight:600;text-shadow:0 1px 14px rgba(247,247,244,.45)}
.page-section{padding:140px 0}
.page-section .section-head .lede{margin-top:22px}
.work-grid,.article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.work-card,.article-card,.featured-article{position:relative;isolation:isolate;overflow:hidden;background:rgba(22,33,43,.72);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 54px -34px rgba(18,23,27,.65),inset 0 1px 0 rgba(255,255,255,.1);padding:34px;transition:background .3s,box-shadow .3s}
.work-card::before,.article-card::before,.featured-article::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,rgba(255,255,255,.07) 0%,transparent 40%),radial-gradient(120% 60% at 15% 0%,rgba(184,116,60,.1),transparent 55%);pointer-events:none}
.work-card:hover,.article-card:hover,.featured-article:hover{background:rgba(27,40,54,.78);box-shadow:0 28px 60px -32px rgba(18,23,27,.72),inset 0 1px 0 rgba(255,255,255,.16)}
.card-kicker,.card-status{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.work-card h3,.article-card h3{font-size:clamp(28px,3vw,38px);margin:16px 0 14px;color:var(--white)}
.work-card p,.article-card p{font-size:14.5px;color:var(--slate-text);max-width:54ch}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.tag-row span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mist);border:1px solid rgba(184,116,60,.38);background:rgba(18,23,27,.28);padding:7px 10px;border-radius:999px}
.card-status{margin-top:28px;padding-top:16px;border-top:1px dashed var(--line-strong);color:var(--slate-text)}
.featured-article{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;min-height:330px}
.featured-article h2{max-width:760px;color:var(--white);font-size:clamp(38px,4.8vw,64px);margin:18px 0 20px}
.featured-article .lede{color:var(--slate-text)}
.page-final{min-height:68vh}
.chrome-lite .work-card,.chrome-lite .article-card,.chrome-lite .featured-article{background:rgba(22,33,43,.86)}
@media(max-width:900px){
  .page-hero{min-height:auto;padding:150px 0 84px}
  .work-grid,.article-grid,.featured-article{grid-template-columns:1fr}
}
@media(max-width:720px){
  .page-section{padding:100px 0}
  .page-hero h1{font-size:clamp(44px,12vw,58px)}
  .work-card,.article-card,.featured-article{padding:28px 24px}
  .intake-hero{padding:118px 0 44px}
}

/* ---------- interactive polish: spotlight + shine (site-wide) ---------- */
/* cursor-follow spotlight: a soft copper glow tracks the pointer across each
   card, painted above the card's own fill but beneath its content (negative
   z-index inside each card's isolate context). --mx/--my set in JS. */
.testimonial,.why-item,.work-card,.article-card,.featured-article,.detail-card{--mx:50%;--my:50%}
.why-item{position:relative;isolation:isolate;overflow:hidden}
.testimonial::after,.why-item::after,.work-card::after,.article-card::after,.featured-article::after,.detail-card::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(184,116,60,.22),rgba(184,116,60,.07) 40%,transparent 66%)}
.testimonial:hover::after,.why-item:hover::after,.work-card:hover::after,.article-card:hover::after,.featured-article:hover::after,.detail-card:hover::after{opacity:1}
@media(hover:none){.testimonial::after,.why-item::after,.work-card::after,.article-card::after,.featured-article::after,.detail-card::after{display:none}}

/* Services opens and works entirely in the alpine world. The global solid
   panel remains available for later sections, but the primary work grid
   breathes over the landscape instead of collapsing into a white block. */
.services-work{position:relative;background:transparent;-webkit-mask-image:none;mask-image:none}
.services-work::before{content:"";position:absolute;inset:6% 0;z-index:-1;pointer-events:none;background:radial-gradient(55% 45% at 50% 42%,rgba(232,236,239,.22),transparent 72%)}
.services-work .detail-card{transition:transform .35s cubic-bezier(.2,.75,.25,1),background .3s,border-color .3s,box-shadow .3s}
.services-work .detail-card:hover{transform:translateY(-6px);background:rgba(22,33,43,.84);border-color:rgba(184,116,60,.42);box-shadow:0 30px 60px -38px rgba(18,23,27,.75),inset 0 1px 0 rgba(255,255,255,.12)}
@media(hover:none),(prefers-reduced-motion:reduce){.services-work .detail-card:hover{transform:none}}
.services-page .page-hero{padding-bottom:46px}
.services-page .services-work{padding-top:84px}

/* ---------- about + privacy ---------- */
.about-origin .section-head{max-width:820px}
.legal-hero{min-height:58vh}
.legal-copy{max-width:850px;padding-top:40px;padding-bottom:80px}
.legal-copy h2{font-size:clamp(30px,3.5vw,44px);margin:48px 0 14px}
.legal-copy h2:first-child{margin-top:0}
.legal-copy p{max-width:72ch;color:var(--ink-muted);font-size:16px}
.legal-copy a{color:var(--copper);text-decoration:underline;text-underline-offset:3px}
@media(max-width:720px){.services-page .page-hero{padding-bottom:24px}.services-page .services-work{padding-top:62px}.legal-hero{padding-bottom:50px}.legal-copy{padding-top:10px}}

/* shine sweep: a diagonal light bar slides across a button on hover; primary
   CTAs also catch a slow periodic glint at rest. Injected span (.btn-shine)
   so it never collides with the two glass pseudo-elements buttons already use. */
.btn-shine{position:absolute;top:0;bottom:0;left:0;width:55%;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.55) 50%,transparent 78%);
  transform:translateX(-170%) skewX(-18deg);opacity:0}
.btn:hover .btn-shine{animation:btnShine .8s cubic-bezier(.4,0,.2,1)}
.btn-solid .btn-shine,.btn-hero-pill .btn-shine{animation:btnShimmer 6s ease-in-out 2s infinite}
.btn-solid:hover .btn-shine,.btn-hero-pill:hover .btn-shine{animation:btnShine .8s cubic-bezier(.4,0,.2,1)}
@keyframes btnShine{0%{transform:translateX(-170%) skewX(-18deg);opacity:0}14%{opacity:.85}100%{transform:translateX(240%) skewX(-18deg);opacity:0}}
@keyframes btnShimmer{0%,88%{transform:translateX(-170%) skewX(-18deg);opacity:0}92%{opacity:.6}100%{transform:translateX(240%) skewX(-18deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.btn-shine{display:none}}