/* ============================================================ SYMTRY PARTNERS — homepage V2 (standalone) Built around the buyer, not the service list. Colors + faces from symtry-design-kit/tokens/brand.css. Held: 90/7/3 · volt is a line/number/word, never a wash · no gradients in UI surfaces (the one exception is the fixed ambient field behind the page — see AMBIENT FIELD below) · volt & amber never adjacent · packaged logo SVG only LEGIBILITY PASS (economic buyer is 45–70, per ICP brief §05): body 17px (matches the brand playbook's own reference page), micro-labels 12px not 10px, muted text lifted for contrast, controls min 52px tall, nothing important behind a hover. ============================================================ */ :root{ --carbon:#0C0E0D; --graphite:#151816; --machined:#1D211E; --seam:#2B302C; --seam-lit:#3A413B; --volt:#00E5A0; --volt-dim:rgba(0,229,160,.10); --volt-brd:rgba(0,229,160,.28); --amber:#FFB84D; --alert:#FF5C5C; /* reserved: form validation, once #scanform is wired */ /* ink that sits ON a volt fill — the only dark that clears 11:1 on volt */ --on-volt:#04120C; --volt-lit:#25F0B2; /* volt, one step up: primary-button hover only */ /* carbon at alpha, for the blurred bars that float over the page */ --bar-bg:rgba(12,14,13,.86); --bar-bg-solid:rgba(12,14,13,.96); --bar-bg-glass:rgba(12,14,13,.67); /* scrolled nav — 33% see-through; see the glass note */ --bone:#F4F6F2; --text:#D2D9D1; /* lifted from #C7CFC6 */ --muted:#9DA89E; /* lifted from #8B968C — small text needs the headroom */ --faint:#8B968C; /* original muted, now only for incidental metadata */ --f-display:'Poppins',Arial,sans-serif; --f-body:'DM Sans',Arial,sans-serif; --f-mono:'DM Mono',ui-monospace,monospace; --r:12px; --r-sm:8px; --r-pill:999px; --gutter:clamp(20px,5vw,64px); --maxw:1480px; --bar:76px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 20px);background:var(--carbon)} body{margin:0;background:transparent;color:var(--text);font:400 17px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden} /* ============================================================ AMBIENT FIELD Four fixed layers behind every page, in the Symtry palette only. The two accents are now their own layers so they can drift independently and the gradient actually moves instead of the whole mesh sliding as one plate. Because they need four pseudo-elements, the ground and the volt blob hang off and the amber blob and grain off — no page markup, so every page gets it. html::before z-4 ground: graphite core, vignette, deep top-left corner html::after z-3 volt blob, drifts inside the bottom-left quadrant body::before z-2 amber blob, drifts inside the top-right quadrant body::after z-1 film grain, static The two blobs are bounded to opposite diagonals for the whole cycle, so volt and amber never meet, and each peaks at .075 alpha — volt stays a light on carbon, not a wash. All motion is transform-only (composited, no repaint); the reduced-motion block below stops every one of them. */ html::before,html::after,/* WebGL "Mesh drift" field (symtry-shader.js). The script sets .has-shader on only after the context, both shaders and the program all succeed, so no WebGL, a failed compile, or a lost context leaves the CSS field above as the fallback. When it is on, the four CSS layers switch off — the shader carries the ground, the drift and its own grain, so only one field is ever on screen. Same negative z-index band, still behind every element. */ .shaderbg{position:fixed;inset:0;z-index:-5;display:block;width:100%;height:100%;pointer-events:none} html.has-shader::before,html.has-shader::after, html.has-shader body::before,html.has-shader body::after{display:none} body::before,body::after{content:"";position:fixed;pointer-events:none} html::before{ z-index:-4;inset:-20%; background-image: radial-gradient(120% 100% at 50% 46%,transparent 34%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.66) 100%), radial-gradient(90% 76% at 4% 0%,rgba(0,0,0,.70) 0%,rgba(0,0,0,.26) 40%,transparent 70%), radial-gradient(96% 86% at 56% 46%,#121614 0%,var(--carbon) 58%,#070908 100%); animation:fieldbreathe 72s ease-in-out infinite alternate; } html::after{ z-index:-3; width:82vmax;height:82vmax;left:-30vmax;bottom:-34vmax;border-radius:50%; background:radial-gradient(circle,rgba(0,229,160,.075) 0%,rgba(0,229,160,.024) 40%,transparent 66%); animation:driftvolt 34s ease-in-out infinite alternate; } body::before{ z-index:-2; width:76vmax;height:76vmax;right:-28vmax;top:-32vmax;border-radius:50%; background:radial-gradient(circle,rgba(255,184,77,.075) 0%,rgba(255,184,77,.024) 40%,transparent 64%); animation:driftamber 44s ease-in-out infinite alternate; } body::after{ z-index:-1;inset:0; opacity:.13; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.957 0 0 0 0 0.965 0 0 0 0 0.949 0.34 0.34 0.34 0 -0.19'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; } @keyframes driftvolt{ 0% {transform:translate3d(0,0,0) scale(1)} 30% {transform:translate3d(11vmax,-6vmax,0) scale(1.14)} 65% {transform:translate3d(4vmax,-13vmax,0) scale(.94)} 100%{transform:translate3d(14vmax,-3vmax,0) scale(1.08)} } @keyframes driftamber{ 0% {transform:translate3d(0,0,0) scale(1)} 35% {transform:translate3d(-10vmax,8vmax,0) scale(1.12)} 70% {transform:translate3d(-3vmax,15vmax,0) scale(.92)} 100%{transform:translate3d(-13vmax,5vmax,0) scale(1.06)} } @keyframes fieldbreathe{ 0% {transform:translate3d(0,0,0) scale(1)} 50% {transform:translate3d(1.5%,-1.5%,0) scale(1.05)} 100%{transform:translate3d(-1.5%,1.5%,0) scale(1.02)} } h1,h2,h3,h4{margin:0;color:var(--bone);text-wrap:balance} p{margin:0} a{color:var(--volt);text-decoration:none} img,svg{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:4px} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .skip{position:absolute;left:-9999px} .skip:focus{left:var(--gutter);top:10px;z-index:200;background:var(--volt);color:var(--on-volt);padding:12px 18px;border-radius:var(--r-sm);font-weight:600} /* --- type roles --- */ .label{font:500 12px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0} .label--volt{color:var(--volt)} .label--amber{color:var(--amber)} .h-display{font:600 clamp(36px,4.3vw,58px)/1.08 var(--f-display);letter-spacing:-.012em} .h1{font:600 clamp(28px,3.3vw,42px)/1.14 var(--f-display);letter-spacing:-.005em} .h2{font:600 clamp(21px,2vw,26px)/1.3 var(--f-display)} .h3{font:600 18px/1.4 var(--f-body);color:var(--bone)} .lede{font:300 clamp(17px,1.45vw,20px)/1.65 var(--f-body);color:var(--text);max-width:60ch} .small{font:400 15px/1.6 var(--f-body);color:var(--muted)} .fine{font:400 13.5px/1.6 var(--f-body);color:var(--faint)} /* --- controls: min 52px tall, real tap targets --- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:var(--r-sm);font:600 16px/1.2 var(--f-body);border:1px solid transparent;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;text-align:center} .btn--primary{background:var(--volt);color:var(--on-volt)} .btn--primary:hover{background:var(--volt-lit);transform:translateY(-1px)} .btn--ghost{border-color:var(--seam-lit);color:var(--bone);font-weight:500} .btn--ghost:hover{border-color:var(--volt-brd);background:var(--machined)} .btn--sm{min-height:46px;padding:11px 20px;font-size:15px} .btn--block{width:100%} .rule{height:1px;background:var(--seam);border:0;margin:0} .section{padding-block:clamp(68px,8vw,112px)} .section__head{display:flex;flex-direction:column;gap:18px;max-width:64ch} /* Hidden state lives only under .js-rv, which script sets after confirming IntersectionObserver. No JS or a script error => everything renders plain. */ .rv{transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} .js-rv .rv{opacity:0;transform:translateY(16px)} .js-rv .rv.is-in{opacity:1;transform:none} /* ============================================================ NAV */ /* The bar carries one constant blur in both states, so scrolling changes only how much carbon sits in front of it — a blur that animated between values would visibly step. Do NOT add saturate() (or any second function) to this backdrop-filter. A `blur(20px) saturate(150%)` backdrop over the WebGL canvas in symtry-shader.js reliably killed the GPU process and blanked the page; blur() alone over the same canvas is stable. It was there to stop the volt behind the glass washing to grey, which costs nothing visible here because the field under the bar is near-black anyway. The top hairline and the drop shadow are box-shadows, not a gradient: UI surfaces here stay flat, and the ambient field is the only gradient. --bar-bg-glass is .67 (33% see-through) because of what scrolls UNDER the bar, not because of how it looks over the ambient field. Worst case is the client logo bar: 15 bone-white marks pass directly beneath it. Contrast of a nav link against the bar, assuming the backdrop under it is entirely that colour: alpha under bone under volt under amber .55 3.18 4.30 4.41 all fail .67 4.76 6.13 6.20 lowest that passes .76 6.61 7.96 8.00 Over a genuinely dark section the measured backdrop is #1b1d1b and a link reads 11.78, so this cap only ever binds while something bright is passing under. Lower the alpha and the logo bar is what breaks first. */ .nav{position:sticky;top:0;z-index:80;height:var(--bar);display:flex;align-items:center;background:var(--bar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease} .nav.is-stuck{border-bottom-color:var(--seam-lit);background:var(--bar-bg-glass);box-shadow:inset 0 1px 0 rgba(244,246,242,.06),0 10px 30px -12px rgba(0,0,0,.65)} /* No backdrop-filter (older Firefox, blur disabled): fall back to the opaque bar rather than leaving nav text over unblurred page content. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav.is-stuck{background:var(--bar-bg-solid);box-shadow:none} } .nav__inner{display:flex;align-items:center;gap:30px;width:100%} .nav__logo{display:flex;align-items:center;flex:0 0 auto} .nav__logo svg{height:27px;width:auto} .nav__links{display:flex;align-items:center;gap:26px;margin-inline:auto} .nav__links a{font:400 15.5px/1 var(--f-body);color:var(--text);padding-block:8px;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease} .nav__links a:hover{color:var(--bone);border-bottom-color:var(--volt)} .nav__cta{display:flex;align-items:center;gap:14px;flex:0 0 auto} .nav__tel{display:flex;flex-direction:column;gap:2px;text-align:right} .nav__tel .n{font:500 15.5px/1 var(--f-body);color:var(--bone)} .nav__tel .l{font:400 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .nav__burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;border:1px solid var(--seam-lit);border-radius:var(--r-sm);margin-left:auto} .nav__burger span{display:block;width:18px;height:1.5px;background:var(--bone);box-shadow:0 -6px 0 var(--bone),0 6px 0 var(--bone)} @media(max-width:1080px){ .nav__links,.nav__tel{display:none} .nav__burger{display:flex} .nav__cta{margin-left:14px} } @media(max-width:620px){.nav__cta{display:none}} .mobilemenu{position:fixed;inset:var(--bar) 0 auto 0;z-index:79;background:var(--graphite);border-bottom:1px solid var(--seam);padding:6px var(--gutter) 26px;display:none;flex-direction:column} .mobilemenu.is-open{display:flex} .mobilemenu a{padding:17px 0;border-bottom:1px solid var(--seam);font:400 17px/1.3 var(--f-body);color:var(--text)} /* ============================================================ HERO */ .hero{position:relative;overflow:hidden;padding-block:clamp(48px,6vw,84px) clamp(48px,6vw,76px)} .hero__glow{position:absolute;pointer-events:none;width:1000px;height:1000px;left:-240px;top:-480px;background:radial-gradient(circle,rgba(0,229,160,.08) 0%,rgba(0,229,160,0) 62%)} .hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(34px,4.5vw,68px);align-items:start} @media(max-width:980px){.hero__inner{grid-template-columns:1fr}} .hero__eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px} .hero__eyebrow .sep{width:4px;height:4px;border-radius:50%;background:var(--seam-lit)} .hero h1{margin-bottom:24px} .hero h1 .accent{color:var(--bone);border-bottom:3px solid var(--volt);padding-bottom:2px} .hero__trust{margin-top:30px;padding-top:26px;border-top:1px solid var(--seam)} .hero__trust ul{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px} .hero__trust li{list-style:none;display:flex;align-items:center;gap:11px;font:400 15px/1.4 var(--f-body);color:var(--text)} .hero__trust .tick{flex:0 0 auto;width:11px;height:6px;border-left:2px solid var(--volt);border-bottom:2px solid var(--volt);transform:rotate(-45deg);margin-top:-2px} /* --- the offer card: the page's primary conversion surface --- */ .offer{border:1px solid var(--volt-brd);border-radius:var(--r);background:var(--graphite);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:18px} .offer__head{display:flex;flex-direction:column;gap:10px} .offer__what{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px} .offer__what li{font:400 15.5px/1.5 var(--f-body);color:var(--text);padding-left:24px;position:relative} .offer__what li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;border-left:2px solid var(--volt);border-bottom:2px solid var(--volt);transform:rotate(-45deg)} .field{display:flex;flex-direction:column;gap:8px} .field label{font:500 14px/1.3 var(--f-body);color:var(--bone)} .field input,.field select{ width:100%;min-height:54px;padding:14px 16px; background:var(--machined);color:var(--bone); border:1px solid var(--seam-lit);border-radius:var(--r-sm); font:400 17px/1.3 var(--f-body); } .field input::placeholder{color:var(--faint)} .field input:focus,.field select:focus{outline:2px solid var(--volt);outline-offset:1px;border-color:var(--volt)} .form__rows{display:flex;flex-direction:column;gap:16px} .form__note{display:flex;gap:10px;align-items:stretch;margin-top:16px} .form__note .bar{width:2px;background:var(--volt);border-radius:2px;flex:0 0 auto} .formdone{display:none;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--volt-brd);border-radius:var(--r-sm);background:var(--volt-dim)} .formdone.is-on{display:flex} .form.is-off{display:none} /* ============================================================ CLIENT BAR */ .clients{border-block:1px solid var(--seam);padding-block:26px} .clients__inner{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,54px);flex-wrap:wrap} .clients__lbl{font:500 12px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .clients__name{font:600 17px/1 var(--f-display);color:var(--text);letter-spacing:.01em} /* Real brand vectors, all filled #f4f3ef. Two axes do the optical normalising: a shared height, and a max-width that pulls the very wide wordmarks (NorthShore, Fennocasa, LOGO Brands) back down. object-fit keeps the aspect ratio while both caps apply, so no per-logo constants are needed. */ img.clients__name{height:38px;width:auto;max-width:150px;object-fit:contain;display:block;opacity:.92} /* client logo on a case-study page header */ .cs__logo{height:36px;width:auto;display:block;margin-bottom:6px;opacity:.92;align-self:flex-start} /* certified-partner badges (footer) — third-party marks run mono so they sit inside the palette instead of fighting it */ .foot__partners{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:24px} .foot__partners img{height:44px;width:auto;opacity:.65;filter:grayscale(1) brightness(1.7);transition:opacity .25s ease,filter .25s ease} .foot__partners img:hover{opacity:1;filter:grayscale(0) brightness(1.1)} /* case-study product figure */ .cs__figure{margin:26px 0 0;border:1px solid var(--seam);border-radius:var(--r);background:var(--graphite);padding:28px;display:flex;justify-content:center} .cs__figure img{max-height:340px;width:auto;max-width:100%} /* ============================================================ ROUTER */ .router__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:18px;margin-top:42px} .seg{border:1px solid var(--seam);border-radius:var(--r);background:var(--graphite);padding:28px 26px;display:flex;flex-direction:column;gap:16px;transition:border-color .22s ease,background .22s ease} .seg:hover{border-color:var(--volt-brd);background:var(--machined)} .seg__voc{border-left:3px solid var(--volt);padding-left:18px;font:300 18px/1.55 var(--f-body);color:var(--bone)} .seg__lead{font:400 15.5px/1.6 var(--f-body);color:var(--muted);flex:1} .seg__go{display:inline-flex;align-items:center;gap:9px;font:600 15.5px/1 var(--f-body);color:var(--volt)} .seg__go .arw{transition:transform .2s ease} .seg:hover .seg__go .arw{transform:translateX(4px)} /* ============================================================ WHAT WE DO Column counts are fixed to 1 / 2 / 4 — all divide 8 evenly, so the grid never ends on an orphan cell the way auto-fit's 3-across did. */ .doing{display:grid;grid-template-columns:1fr;gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden;margin-top:42px} @media(min-width:620px){.doing{grid-template-columns:repeat(2,1fr)}} @media(min-width:1020px){.doing{grid-template-columns:repeat(4,1fr)}} .do{background:var(--graphite);padding:28px 24px;display:flex;flex-direction:column;gap:12px} .do__n{display:flex;align-items:center;gap:12px} .do__bars{display:flex;flex-direction:column;gap:3px;flex:0 0 auto} .do__bars i{display:block;width:22px;height:5px;border-radius:3px;background:var(--seam-lit)} .do__bars i:first-child{background:var(--volt)} .do p{font:400 15.5px/1.6 var(--f-body);color:var(--muted)} /* ============================================================ REPORT PREVIEW */ .report{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(30px,4.5vw,64px);align-items:center;margin-top:42px} @media(max-width:900px){.report{grid-template-columns:1fr}} .panel{border:1px solid var(--seam);border-radius:var(--r);background:var(--graphite);overflow:hidden} .panel__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:1px solid var(--seam)} .stat{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:18px 20px;border-bottom:1px solid var(--seam)} .stat:last-child{border-bottom:0} /* The scan panel is the diagnosis — every number in it is a finding, so the whole card reads amber. It used to alternate volt and amber down one column, which put the two accents directly adjacent. Volt belongs to the after-state list below it, one card away. */ .stat__n{font:600 30px/1 var(--f-display);color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:-.02em;min-width:88px} .stat__t{font:400 15.5px/1.5 var(--f-body);color:var(--text)} .stat__t b{display:block;color:var(--bone);font-weight:500;margin-bottom:2px} .offerlist{border:1px solid var(--seam);border-radius:var(--r);background:var(--graphite);overflow:hidden;margin-top:20px} .orow{display:grid;grid-template-columns:32px 1fr auto;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--seam)} .orow:last-child{border-bottom:0} .orow__r{font:500 13px/1 var(--f-mono);color:var(--faint);text-align:center} .orow__n{font:400 15.5px/1.35 var(--f-body);color:var(--text)} .orow__s{font:400 13.5px/1.4 var(--f-body);color:var(--faint);margin-top:3px} .orow__p{font:500 15.5px/1 var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums} .orow--win{background:var(--volt-dim);border-left:3px solid var(--volt);padding-left:15px} .orow--win .orow__r,.orow--win .orow__n,.orow--win .orow__p{color:var(--bone)} .orow--win .orow__p{font-weight:600} .orow--out .orow__p{color:var(--faint)} /* was amber, two rows under the volt win row */ /* ============================================================ COMMITTEE */ .committee{display:grid;grid-template-columns:repeat(auto-fit,minmax(284px,1fr));gap:18px;margin-top:42px} .who{border:1px solid var(--seam);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:15px;background:var(--graphite)} .who__q{font:300 17px/1.55 var(--f-body);color:var(--bone);font-style:italic} .who ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .who li{font:400 15.5px/1.55 var(--f-body);color:var(--muted);padding-left:22px;position:relative} .who li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--volt);border-radius:2px} .who li b{color:var(--bone);font-weight:500} /* ============================================================ FIT */ .fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:40px;align-items:start} .fitcard{border:1px solid var(--seam);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:16px} .fitcard--yes{background:var(--graphite)} .fitcard--no{background:transparent;border-style:dashed} .fitcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px} .fitcard li{font:400 15.5px/1.55 var(--f-body);color:var(--muted);padding-left:24px;position:relative} .fitcard--yes li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:6px;border-left:2px solid var(--volt);border-bottom:2px solid var(--volt);transform:rotate(-45deg)} .fitcard--no li::before{content:"";position:absolute;left:0;top:12px;width:10px;height:2px;background:var(--faint);border-radius:2px} .fitcard li b{color:var(--bone);font-weight:500} .numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden;margin-top:34px} .num{background:var(--graphite);padding:24px 22px;display:flex;flex-direction:column;gap:8px} .num .n{font:600 30px/1 var(--f-display);color:var(--bone);font-variant-numeric:tabular-nums;letter-spacing:-.015em} .num .n em{font-style:normal;color:var(--volt)} /* ============================================================ PRICING */ .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:44px;align-items:start} .plan{border:1px solid var(--seam);border-radius:var(--r);background:var(--graphite);padding:32px 28px;display:flex;flex-direction:column;gap:17px;position:relative} .plan--feature{border-color:var(--volt-brd)} .plan__flag{position:absolute;top:-1px;right:24px;transform:translateY(-50%);background:var(--volt);color:var(--on-volt);border-radius:var(--r-pill);padding:6px 14px;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase} .plan__price{display:flex;align-items:baseline;gap:7px} .plan__price .n{font:600 36px/1 var(--f-display);color:var(--bone);font-variant-numeric:tabular-nums;letter-spacing:-.015em} .plan__price .per{font:400 16px/1 var(--f-body);color:var(--muted)} .plan__pitch{font:300 16px/1.6 var(--f-body);color:var(--text)} .plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;flex:1} .plan li{font:400 15.5px/1.5 var(--f-body);color:var(--muted);padding-left:24px;position:relative} .plan li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:6px;border-left:2px solid var(--volt);border-bottom:2px solid var(--volt);transform:rotate(-45deg)} .terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden;margin-top:20px} .term{background:var(--carbon);padding:24px 22px;display:flex;flex-direction:column;gap:10px} .term p{font:400 15.5px/1.55 var(--f-body);color:var(--muted)} .term p b{color:var(--bone);font-weight:500} /* ============================================================ QUOTES */ .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:42px} .quote{border:1px solid var(--seam);border-radius:var(--r);background:var(--graphite);padding:26px 24px;display:flex;flex-direction:column;gap:16px;margin:0} .quote__mark{width:24px;height:3px;background:var(--volt);border-radius:2px} .quote p{font:300 16.5px/1.65 var(--f-body);color:var(--text);flex:1} .quote__who{padding-top:16px;border-top:1px solid var(--seam)} .quote__who .n{font:500 15.5px/1.3 var(--f-body);color:var(--bone)} .quote__who .r{font:400 13.5px/1.4 var(--f-body);color:var(--faint);margin-top:3px} /* ============================================================ FAQ */ .faq{margin-top:40px;border-top:1px solid var(--seam)} .faq__item{border-bottom:1px solid var(--seam)} .faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:20px 0;text-align:left;font:500 18px/1.45 var(--f-body);color:var(--bone);transition:color .18s ease} .faq__q:hover{color:var(--volt)} .faq__ico{flex:0 0 auto;width:16px;height:16px;position:relative} .faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--volt);border-radius:1px;transition:transform .28s cubic-bezier(.2,.6,.2,1),opacity .28s ease} .faq__ico::before{left:0;top:7px;width:16px;height:2px} .faq__ico::after{left:7px;top:0;width:2px;height:16px} .faq__item.is-open .faq__ico::after{transform:scaleY(0);opacity:0} .faq__a{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.6,.2,1)} .faq__a p{padding:0 clamp(0px,7vw,110px) 24px 0;font:300 16.5px/1.7 var(--f-body);color:var(--muted);max-width:70ch} /* ============================================================ BOOK */ .book{position:relative;overflow:hidden;border-top:1px solid var(--seam);padding-block:clamp(68px,8vw,110px)} .book__glow{position:absolute;pointer-events:none;width:900px;height:900px;left:50%;bottom:-600px;transform:translateX(-50%);background:radial-gradient(circle,rgba(0,229,160,.07) 0%,rgba(0,229,160,0) 62%)} .book__inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4.5vw,60px);align-items:start} @media(max-width:900px){.book__inner{grid-template-columns:1fr}} .sched{border:1px dashed var(--seam-lit);border-radius:var(--r);background:var(--graphite);min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:36px;text-align:center} .sched__ico{width:46px;height:46px;border:2px solid var(--volt);border-radius:var(--r-sm);position:relative} .sched__ico::before{content:"";position:absolute;left:-2px;right:-2px;top:9px;height:2px;background:var(--volt)} .book__or{display:flex;align-items:center;gap:14px;margin-block:22px} .book__or .ln{flex:1;height:1px;background:var(--seam)} .tel{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border:1px solid var(--seam);border-radius:var(--r)} .tel .n{font:600 26px/1.1 var(--f-display);color:var(--bone);letter-spacing:-.01em} /* ============================================================ FOOT */ .foot{border-top:1px solid var(--seam);padding-block:52px 34px} .foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.8fr));gap:36px} @media(max-width:860px){.foot__top{grid-template-columns:1fr 1fr}} @media(max-width:560px){.foot__top{grid-template-columns:1fr}} .foot__brand svg{height:25px;width:auto;margin-bottom:18px} .foot__brand p{font:300 15.5px/1.65 var(--f-body);color:var(--muted);max-width:42ch} .foot__col h4{font:500 12px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:16px} .foot__col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .foot__col a{font:400 15.5px/1.3 var(--f-body);color:var(--text)} .foot__col a:hover{color:var(--volt)} .foot__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--seam)} .foot__bar p{font:400 13.5px/1.5 var(--f-body);color:var(--faint)} /* ============================================================ MOBILE STICKY CTA */ .dock{position:fixed;left:0;right:0;bottom:0;z-index:78;display:none;gap:10px;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:var(--bar-bg-solid);backdrop-filter:blur(14px);border-top:1px solid var(--seam)} .dock .btn{flex:1;min-height:54px} @media(max-width:720px){ .dock{display:flex} body{padding-bottom:88px} } /* wireframe disclosure */ .disclose{border:1px dashed var(--seam-lit);border-radius:var(--r);padding:20px 22px;margin-top:32px;display:flex;gap:16px;align-items:stretch} .disclose__key{width:3px;background:var(--amber);border-radius:2px;flex:0 0 auto} .disclose p{font:400 14.5px/1.65 var(--f-body);color:var(--muted)} .disclose b{color:var(--amber);font-weight:500} /* ============================================================ FOUNDER STRIP (home) Deliberately quiet: it sits below the argument, above the booking ask, and never competes with the scan CTA. Volt appears once, as the eyebrow. */ .founder{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:start} @media(max-width:900px){.founder{grid-template-columns:1fr}} .founder__card{border:1px solid var(--seam);border-left:3px solid var(--volt);border-radius:var(--r);background:var(--graphite);padding:26px 24px} .founder__n{font:600 22px/1.2 var(--f-display);color:var(--bone);margin-top:12px} /* ============================================================ BIO PAGE */ .bio{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(30px,4.5vw,64px);align-items:start} @media(max-width:940px){.bio{grid-template-columns:1fr}} .bio__body p{font:400 17px/1.75 var(--f-body);color:var(--text);max-width:64ch} .bio__body p + p{margin-top:22px} .bio__body p b{color:var(--bone);font-weight:500} /* Portrait frame. Dashed until a real image is dropped in — an empty solid box reads as a broken asset, a dashed one reads as a slot. */ .bio__portrait{border:1px dashed var(--seam-lit);border-radius:var(--r);background:var(--graphite);aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;text-align:center;overflow:hidden} .bio__portrait img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);display:block} /* Once a real portrait is in, drop the dashed slot styling. */ .bio__portrait--filled{border:1px solid var(--seam);padding:0;gap:0} .bio__aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(var(--bar) + 24px)} @media(max-width:940px){.bio__aside{position:static}} .creed{margin:34px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--seam);padding-top:28px} .creed li{font:400 16px/1.6 var(--f-body);color:var(--muted);padding-left:24px;position:relative;max-width:62ch} .creed li::before{content:"";position:absolute;left:0;top:10px;width:11px;height:2px;background:var(--volt);border-radius:2px} .creed li b{color:var(--bone);font-weight:500} .bio__out{margin-top:34px;padding-top:26px;border-top:1px solid var(--seam)} /* ============================================================ 90-DAY PLAN A spine, not a wash: volt appears as the rail and the phase numerals only. */ .plan{margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--seam)} .plan__row{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,3vw,44px);padding:clamp(26px,3vw,38px) 0;border-bottom:1px solid var(--seam);position:relative} .plan__row::before{content:"";position:absolute;left:0;top:clamp(26px,3vw,38px);width:2px;height:26px;background:var(--volt);border-radius:2px} @media(max-width:900px){ .plan__row{grid-template-columns:1fr;gap:14px;padding-left:20px} .plan__row::before{top:clamp(26px,3vw,38px)} } .plan__wk{padding-left:20px} @media(max-width:900px){.plan__wk{padding-left:0}} .plan__wk .n{font:500 15px/1 var(--f-mono);color:var(--volt);letter-spacing:.04em} .plan__wk .p{font:400 13px/1.5 var(--f-body);color:var(--dim);margin-top:8px} .plan__main h3{font:600 20px/1.3 var(--f-display);color:var(--bone)} .plan__main p{font:400 16px/1.7 var(--f-body);color:var(--muted);margin-top:10px;max-width:52ch} .plan__out{border-left:1px solid var(--seam);padding-left:clamp(18px,2vw,26px)} @media(max-width:900px){.plan__out{border-left:0;padding-left:0;border-top:1px solid var(--seam);padding-top:16px}} .plan__out .label{margin-bottom:10px} .plan__out p{font:400 15px/1.65 var(--f-body);color:var(--text)} .plan__note{margin-top:28px;font:400 15px/1.7 var(--f-body);color:var(--dim);max-width:70ch} .plan__note b{color:var(--bone);font-weight:500} /* ============================================================ POD BLOCK */ .pod{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(30px,3.5vw,44px)} .pod__c{border:1px solid var(--seam);border-radius:var(--r);background:var(--graphite);padding:24px 22px} .pod__c h3{font:600 17px/1.3 var(--f-display);color:var(--bone);margin-top:12px} .pod__c p{font:400 15px/1.65 var(--f-body);color:var(--muted);margin-top:10px} .pod__note{margin-top:26px;font:400 15px/1.7 var(--f-body);color:var(--dim);max-width:74ch} .pod__note b{color:var(--bone);font-weight:500} /* ============================================================ CASE STUDIES */ .cs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.2vw,26px);margin-top:clamp(32px,4vw,48px)} .cs__card{border:1px solid var(--seam);border-radius:var(--r);background:var(--graphite);padding:28px 26px;display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:border-color .2s ease,transform .2s ease} .cs__card:hover{border-color:var(--seam-lit);transform:translateY(-2px)} .cs__card h3{font:600 21px/1.28 var(--f-display);color:var(--bone)} .cs__card p{font:400 15.5px/1.65 var(--f-body);color:var(--muted);flex:1} .cs__stat{display:flex;gap:22px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--seam)} .cs__stat div .n{font:600 24px/1 var(--f-display);color:var(--volt)} .cs__stat div .l{font:400 12.5px/1.4 var(--f-body);color:var(--faint);margin-top:5px} /* Case study body: strict situation / work / result spine. */ .cs__body{max-width:66ch;margin-top:clamp(36px,4.5vw,56px)} .cs__blk{padding-top:clamp(26px,3vw,38px);margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--seam)} .cs__blk:first-child{border-top:0;margin-top:0;padding-top:0} .cs__blk h2{font:600 24px/1.3 var(--f-display);color:var(--bone);margin-top:12px} .cs__blk p{font:400 17px/1.75 var(--f-body);color:var(--text);margin-top:16px} .cs__blk ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px} .cs__blk li{font:400 16px/1.65 var(--f-body);color:var(--muted);padding-left:24px;position:relative} .cs__blk li::before{content:"";position:absolute;left:0;top:10px;width:11px;height:2px;background:var(--volt);border-radius:2px} .cs__meta{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-top:26px;padding:20px 0;border-top:1px solid var(--seam);border-bottom:1px solid var(--seam)} .cs__meta div .l{font:500 11px/1 var(--f-mono);color:var(--faint);letter-spacing:.1em;text-transform:uppercase} .cs__meta div .v{font:400 15px/1.4 var(--f-body);color:var(--text);margin-top:8px} /* ============================================================ MOTION LAYER Styles for symtry-motion.js (GSAP). Everything here is inert without the script: marquee classes are only added by JS, .has-spot only paints on hover. Volt stays a line / a glow at ≤.08 alpha. */ /* scrollspy: current section gets the same underline as hover */ .nav__links a.is-cur{color:var(--bone);border-bottom-color:var(--volt)} /* split words (hero h1, founder statement) */ .w{display:inline-block;will-change:transform} /* client marquee */ .clients__inner.is-marquee{flex-wrap:nowrap;justify-content:flex-start} .clients__inner.is-marquee .clients__lbl{flex:0 0 auto} .clients__view{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .clients__track{display:flex;width:max-content} .clients__set{display:flex;align-items:center;gap:clamp(20px,4vw,54px);padding-right:clamp(20px,4vw,54px);flex:0 0 auto} .clients__set .clients__name{white-space:nowrap} /* cursor spotlight — same radial glow the hero already uses, following the pointer */ .has-spot{position:relative} .has-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(0,229,160,.07),transparent 70%)} .has-spot:hover::after{opacity:1} /* hover lift + press feedback */ .quote,.who,.pod__c,.fitcard,.plans .plan{transition:transform .25s ease,border-color .25s ease} .quote:hover,.who:hover,.pod__c:hover,.fitcard:hover,.plans .plan:hover{transform:translateY(-2px);border-color:var(--seam-lit)} .plans .plan--feature:hover{border-color:var(--volt-brd)} .btn:active{transform:translateY(1px)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} html{scroll-behavior:auto} .js-rv .rv{opacity:1;transform:none} }