/* ============================================================
   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.
   ============================================================ */

/* ============================================================ FONTS
   Self-hosted latin subsets (assets/fonts), so no render-blocking request to
   Google Fonts. The "Fallback" faces are Arial resized to the real fonts'
   metrics, so text barely moves when the webfont swaps in (CLS). */
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/dm-sans-var.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-mono-400.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-mono-500.woff2) format('woff2')}
@font-face{font-family:'Poppins Fallback';src:local('Arial');size-adjust:116.01%;ascent-override:90.51%;descent-override:30.17%;line-gap-override:8.62%}
@font-face{font-family:'DM Sans Fallback';src:local('Arial');size-adjust:105.81%;ascent-override:93.75%;descent-override:29.3%;line-gap-override:0%}

: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','Poppins Fallback',Arial,sans-serif;
  --f-body:'DM Sans','DM Sans Fallback',Arial,sans-serif;
  --f-mono:'DM Mono',ui-monospace,monospace;

  /* shape system: buttons are pills, cards 16px, inputs/small surfaces 10px */
  --r:16px;
  --r-sm:10px;
  --r-pill:999px;

  /* one easing for every lift/press — heavy, physical, no ease-in-out */
  --ease:cubic-bezier(.32,.72,0,1);
  /* card resting highlight (machined top edge) and hover lift shadow,
     tinted to the carbon ground rather than pure black */
  --edge:inset 0 1px 0 rgba(244,246,242,.045);
  --lift:0 18px 44px -22px rgba(4,10,8,.62);

  --gutter:clamp(20px,5vw,64px);
  --maxw:1480px;
  --bar:76px;
}

*,*::before,*::after{box-sizing:border-box}
picture{display:contents} /* <picture> only swaps in WebP; the <img> inside keeps all the layout */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 20px)}
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
   "Mesh drift", the look of the old WebGL shader rebuilt in pure CSS. Three
   soft glows on a near-black ground, each a carbon tinted toward volt and
   never brighter than the shader's measured peak (#022f22, which keeps
   --faint text above WCAG AA on top of it). No amber: this field is volt only.

     html::before  z-4  deep glow     (carbon + volt  7%)
     html::after   z-3  mid glow      (carbon + volt 14%)
     body::before  z-2  bright glow   (carbon + volt 25%, the shader's ceiling)
     body::after   z-1  film grain, static

   Each glow drifts on its own slow orbit, with the shader's speeds: X and Y
   are separate sine-like loops at slightly different periods (19-33 s), so
   the paths never repeat in step. X runs on the `translate` property and Y on
   `transform`, two independent properties the GPU composites on its own:
   no JavaScript, no repaint, no main-thread work while it moves.
   Glows are 150vmin wide and travel up to 49vmin from the centre of the
   screen, matching the shader's blob size and range. Reduced motion freezes
   them (global rule further down). */
html{background:#020403} /* the shader's contrast boost pushed its darks to near-black */
html::before,html::after,body::before,body::after{content:"";position:fixed;pointer-events:none}

html::before,html::after,body::before{
  left:50%;top:50%;width:150vmin;height:150vmin;margin:-75vmin 0 0 -75vmin;
  border-radius:50%;will-change:transform;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;
}
html::before{
  z-index:-4;
  background:radial-gradient(closest-side,rgb(6,23,18) 0%,rgba(6,23,18,.74) 30%,rgba(6,23,18,.43) 50%,rgba(6,23,18,.17) 70%,rgba(6,23,18,.04) 90%,transparent 100%);
  animation-name:mesh-x,mesh-y;animation-duration:15.3s,16.4s;animation-delay:-4s,-11s;
}
html::after{
  z-index:-3;
  background:radial-gradient(closest-side,rgb(4,33,25) 0%,rgba(4,33,25,.74) 30%,rgba(4,33,25,.43) 50%,rgba(4,33,25,.17) 70%,rgba(4,33,25,.04) 90%,transparent 100%);
  animation-name:mesh-x,mesh-y;animation-duration:12.2s,12.1s;animation-delay:-9s,-2s;
}
body::before{
  z-index:-2;
  background:radial-gradient(closest-side,rgb(2,47,34) 0%,rgba(2,47,34,.74) 30%,rgba(2,47,34,.43) 50%,rgba(2,47,34,.17) 70%,rgba(2,47,34,.04) 90%,transparent 100%);
  animation-name:mesh-x-r,mesh-y-r;animation-duration:10.2s,9.6s;animation-delay:-3s,-7s;
}

body::after{
  z-index:-1;inset:0;
  opacity:.08;
  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;
}

/* WebGL "Mesh drift" (symtry-shader.js). On desktop the script adds a canvas
   and sets .has-shader on <html> only after WebGL fully succeeds; the CSS
   layers above then switch off, so only one field is ever on screen. No WebGL,
   a failed compile or a lost context leaves the CSS field in place. */
.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}

/* One half-swing each; `alternate` plus ease-in-out makes a sine-like loop.
   The -r pair runs the opposite way so the brightest glow crosses the others. */
@keyframes mesh-x  {from{translate:-49vmin 0} to{translate:49vmin 0}}
@keyframes mesh-y  {from{transform:translateY(-49vmin)} to{transform:translateY(49vmin)}}
@keyframes mesh-x-r{from{translate:49vmin 0} to{translate:-49vmin 0}}
@keyframes mesh-y-r{from{transform:translateY(49vmin)} to{transform:translateY(-49vmin)}}

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}
::selection{background:var(--volt);color:var(--on-volt)}

.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(38px,4.6vw,62px)/1.06 var(--f-display);letter-spacing:-.022em}
.h1{font:600 clamp(28px,3.4vw,44px)/1.12 var(--f-display);letter-spacing:-.012em}
.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 30px;border-radius:var(--r-pill);font:600 16px/1.2 var(--f-body);border:1px solid transparent;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .35s var(--ease),box-shadow .35s var(--ease);text-align:center}
.btn--primary{background:var(--volt);color:var(--on-volt);box-shadow:0 10px 28px -16px rgba(0,229,160,.35)}
.btn--primary:hover{background:var(--volt-lit);transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(0,229,160,.45)}
.btn--ghost{border-color:var(--seam-lit);color:var(--bone);font-weight:500;box-shadow:var(--edge)}
.btn--ghost:hover{border-color:var(--volt-brd);background:var(--machined);transform:translateY(-2px)}
.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(78px,9vw,132px)}
.section__head{display:flex;flex-direction:column;gap:18px;max-width:64ch}

/* Hidden state lives only on .rv-wait, which symtry.js adds to blocks that
   start BELOW the first screen. Anything on screen at load is never hidden,
   so it paints immediately (FCP/LCP don't wait for scripts). No JS or a
   script error => everything renders plain. */
.rv{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-rv .rv.rv-wait{opacity:0;transform:translateY(22px)}

/* ============================================================ 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.
   Keep this backdrop-filter to blur() alone; a second function such as
   saturate() is known to be unstable over animated full-screen backgrounds.
   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;white-space:nowrap;transition:color .18s ease,border-color .18s ease}
/* Full-size links need ~1345px. Down to 1261px they run tighter; below that the
   burger takes over (see the 1260px block). Two-line links were the alternative. */
@media(max-width:1400px){.nav__links{gap:18px}.nav__links a{font-size:14.5px}}
.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:1260px){
  .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{max-height:calc(100dvh - var(--bar));overflow-y:auto;overscroll-behavior:contain}
.mobilemenu__h{margin:22px 0 2px;font:500 11.5px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.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}}
/* Reserve the scan form's height in our wrapper. GoHighLevel's script hides
   its iframe until the form has loaded (the wrapper is 0px tall for about a
   second), then shows it at 1003px, or about 1050px on narrow screens.
   Holding that space up front keeps the page below from jumping (CLS). */
.hero #scan{min-height:1003px}
@media(max-width:980px){.hero #scan{min-height:1050px}}

.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 .h-display{margin-bottom:24px}
.hero .h-display .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}

.form__err{margin-top:14px;font:400 14.5px/1.5 var(--f-body);color:var(--amber);border-left:2px solid var(--amber);padding-left:10px}
.form .btn[disabled]{opacity:.6;cursor:progress;transform: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)}
.foot__social{display:flex;gap:12px;margin-top:22px}
.foot__social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--seam-lit);border-radius:50%;color:var(--muted);transition:color .2s ease,border-color .2s ease,background .2s ease}
.foot__social a:hover{color:var(--volt);border-color:var(--volt-brd);background:var(--volt-dim)}
.foot__brand .foot__social svg{width:18px;height:18px;margin:0;fill:currentColor}

/* 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;height:auto;max-width:100%}

/* ============================================================ ROUTER */
.router__grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:42px}
.seg{position:relative;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)}
/* Stretched-link overlay only inside a .seg card. Unscoped, the same link used
   as a plain arrow (home founder strip, about bios) has no positioned ancestor
   once its .rv reveal finishes, so inset:0 covered the top of the page. */
.seg .seg__go::after{content:"";position:absolute;inset:0}
.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: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: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: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: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:none;overflow:visible}
.js-faq .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;overflow:clip;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}
/* GoHighLevel sets scrolling="yes" on the calendar once it loads; its details form is a few px wider than the frame, which showed an inner horizontal scrollbar. */
iframe[id$="_symtry_booking"]{overflow:hidden !important;max-width:100%}
.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)}
/* Whole card is the mailto link: same hover as .btn--ghost, arrow nudges like .seg__go. */
.tel{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border:1px solid var(--seam-lit);border-radius:var(--r);color:inherit;transition:border-color .22s ease,background .22s ease}
.tel:hover{border-color:var(--volt-brd);background:var(--machined)}
.tel__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tel .n{font:600 clamp(16px,4.6vw,26px)/1.1 var(--f-display);color:var(--bone);letter-spacing:-.01em;overflow-wrap:anywhere}
.tel .arw{font:600 22px/1 var(--f-body);color:var(--volt);transition:transform .2s ease}
.tel:hover .arw{transform:translateX(4px)}
@media(max-width:560px){.tel{padding:18px 20px}}

/* ============================================================ DONE (thank-you.html)
   One centred card: tick, headline, one line, two buttons. The tick draws in
   once; reduced-motion gets it already drawn. */
.done{padding-block:clamp(56px,9vw,120px)}
.done__card{margin-inline:auto;max-width:560px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.done__card .lede{max-width:none}
.done__ico{width:84px;height:84px;border-radius:50%;background:var(--volt-dim);border:1px solid var(--volt-brd);display:grid;place-items:center;color:var(--volt);margin-bottom:6px}
.done__ico svg{width:46px;height:46px}
.done__ico .tick{stroke-dasharray:40;stroke-dashoffset:40;animation:done-tick .5s .3s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes done-tick{to{stroke-dashoffset:0}}
.done__acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px}
@media(max-width:480px){.done__acts{flex-direction:column;align-items:stretch;width:100%}}
@media(prefers-reduced-motion:reduce){.done__ico .tick{animation:none;stroke-dashoffset:0}}

/* ============================================================ FOOT */
.foot{border-top:1px solid var(--seam);padding-block:52px 34px}
.foot__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.75fr));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,.foot__col .foot__h{margin:0;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;padding-inline:12px;font-size:15px}
@media(max-width:720px){
  .dock{display:flex}
  body{padding-bottom:88px}
}


/* ============================================================ 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: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 */
/* ============================================================ CARD GRIDS
   Three-card rows (reasons, committee, quotes, plans, pod) and the four-cell
   terms strip use explicit columns, same reason as .doing above: auto-fit
   dropped to two columns across the tablet range and stranded the last card
   at half width. Two columns from 620px, with an odd last card spanning the
   row; three (terms: four) from 980px. */
@media(min-width:620px){
  .router__grid,.committee,.quotes,.plans,.pod,.terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .router__grid>:nth-child(odd):last-child,
  .committee>:nth-child(odd):last-child,
  .quotes>:nth-child(odd):last-child,
  .plans>:nth-child(odd):last-child,
  .pod>:nth-child(odd):last-child{grid-column:1/-1}
}
@media(min-width:980px){
  .router__grid,.committee,.quotes,.plans,.pod{grid-template-columns:repeat(3,minmax(0,1fr))}
  .terms{grid-template-columns:repeat(4,minmax(0,1fr))}
  .router__grid>:nth-child(odd):last-child,
  .committee>:nth-child(odd):last-child,
  .quotes>:nth-child(odd):last-child,
  .plans>:nth-child(odd):last-child,
  .pod>:nth-child(odd):last-child{grid-column:auto}
}

.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{position:relative;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 .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.cs__card:hover{border-color:var(--seam-lit);transform:translateY(-3px);box-shadow:var(--edge),var(--lift)}
.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}
.cs__go{display:inline-flex;align-items:center;gap:9px;font:600 15px/1 var(--f-body);color:var(--volt);margin-top:4px}
.cs__go::after{content:"";position:absolute;inset:0}
.cs__go .arw{transition:transform .2s ease}
.cs__card:hover .cs__go .arw{transform:translateX(4px)}

/* 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 headline, 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}
/* Reduced motion: no loop, so show the logos once, wrapped and centred. */
@media(prefers-reduced-motion:reduce){
  .clients__track{width:auto}
  .clients__set[aria-hidden]{display:none}
  .clients__set{flex-wrap:wrap;justify-content:center;padding-right:0;row-gap:18px}
}
.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__track.is-running{animation:marquee 26s linear infinite;will-change:transform}
.clients__view:hover .clients__track{animation-play-state:paused}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.clients__track.is-running{animation:none}}
.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;overflow:clip;overflow-clip-margin:4px}
.has-spot::after{content:"";position:absolute;left:0;top:0;width:440px;height:440px;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(circle,rgba(0,229,160,.07),transparent 70%);transform:translate3d(calc(var(--mx,50%) - 220px),calc(var(--my,50%) - 220px),0)}
.has-spot:hover::after{opacity:1}

/* machined top edge on every raised surface — reads as a physical bevel */
.seg,.quote,.who,.pod__c,.fitcard--yes,.plans .plan,.cs__card,.panel,.offerlist,.founder__card,.tel{box-shadow:var(--edge)}

/* hover lift + press feedback */
.quote,.who,.pod__c,.fitcard,.plans .plan{transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.quote:hover,.who:hover,.pod__c:hover,.fitcard:hover,.plans .plan:hover{transform:translateY(-3px);border-color:var(--seam-lit);box-shadow:var(--edge),var(--lift)}
.plans .plan--feature:hover{border-color:var(--volt-brd)}
.btn:active{transform:translateY(0) scale(.98)}

@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.rv-wait{opacity:1;transform:none}
}


/* ============================================================ SERVICES DROPDOWN
   Opens on hover or focus for pointer users and on click (symtry.js toggles
   .is-open) for touch and keyboard. Below 1260px the burger menu takes over. */
.navdd{position:relative}
.navdd__btn{display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-bottom:1px solid transparent;padding:8px 0;font:400 15.5px/1 var(--f-body);color:var(--text);cursor:pointer;transition:color .18s ease,border-color .18s ease}
@media(max-width:1400px){.navdd__btn{font-size:14.5px}}
.navdd__btn:hover,.navdd.is-open .navdd__btn{color:var(--bone);border-bottom-color:var(--volt)}
.navdd__chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.navdd.is-open .navdd__chev{transform:translateY(1px) rotate(225deg)}
.navdd__menu{position:absolute;top:calc(100% + 16px);left:-20px;min-width:250px;display:none;flex-direction:column;padding:8px;background:var(--graphite);border:1px solid var(--seam-lit);border-radius:var(--r-sm);box-shadow:var(--edge),0 24px 50px -20px rgba(0,0,0,.7)}
.navdd__menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.navdd.is-open .navdd__menu{display:flex}
/* JS keeps hover, keyboard and aria-expanded in sync. */
.nav__links .navdd__menu a{padding:11px 14px;border-radius:8px;border-bottom:0;font-size:15px}
.nav__links .navdd__menu a:hover,.nav__links .navdd__menu a:focus-visible{background:var(--machined);color:var(--volt)}

/* ============================================================ SERVICE PAGES
   Generated by tools/build-pages.py: the home hero on top, the blog article
   body (blog.css) underneath, and the booking band to close. */
.svc .crumbs{margin-bottom:22px}
.svc .svc__h1{font-size:clamp(32px,4vw,54px)}
.svc .lede+.lede{margin-top:16px}
.svc__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__inner--solo{grid-template-columns:minmax(0,880px)}
.svc__body{padding-top:clamp(20px,3vw,40px)}
.svc__body .pgrid{margin-top:0}
.svc__body .pbody>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.book .lede+.lede{margin-top:14px}

/* ============================================================ HOW WE GET PAID (home) */
.paid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:start}
@media(max-width:900px){.paid{grid-template-columns:1fr}}
.paid__body p{font:400 17px/1.75 var(--f-body);color:var(--text)}
.paid__body p+p{margin-top:16px}
.paid__body .paid__line{font:600 clamp(19px,1.7vw,22px)/1.4 var(--f-display);color:var(--bone);border-left:3px solid var(--volt);padding-left:16px;margin-top:24px}
.paid__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.do__go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font:600 14.5px/1.3 var(--f-body);color:var(--volt)}
.do__go+.do__go{margin-top:0}

/* ============================================================ MOTION
   No animation library: the hero entrance is CSS keyframes and the scroll
   effects are classes symtry-motion.js toggles from an IntersectionObserver.
   The hero headline and lede only slide (never start invisible) because they
   are the Largest Contentful Paint. */
@keyframes mo-rise{from{transform:translateY(22px)}}
@keyframes mo-in{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:no-preference){
  .hero__eyebrow{animation:mo-in .5s var(--ease) .05s both}
  .hero .h-display{animation:mo-rise .8s var(--ease) .12s both}
  .hero .lede{animation:mo-rise .7s var(--ease) .26s both}
  .hero__trust,.hero .svc__acts{animation:mo-in .6s var(--ease) .4s both}
}
.mo-rows .stat{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.mo-rows.is-shown .stat{opacity:1;transform:none}
.mo-words .fw{opacity:.14;transition:opacity .5s ease}
.mo-words.is-shown .fw{opacity:1}
.mo-zoom{transform:scale(1.08);transition:transform 1.4s var(--ease)}
.mo-zoom.is-shown{transform:none}

/* Skip painting long offscreen sections while preserving searchable content. */
@supports (content-visibility:auto){
  main > .section ~ .section, main > .hero ~ .section{content-visibility:auto;contain-intrinsic-size:auto 800px}
}
@media print{main > .section{content-visibility:visible!important;contain-intrinsic-size:none}}

/* Keep the ambient look on small screens without oversized animated layers. */
@media(max-width:899px),(pointer:coarse){
  html::before,html::after,body::before{animation:none;will-change:auto}
}
html.ambient-paused::before,html.ambient-paused::after,html.ambient-paused body::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  html::before,html::after,body::before{animation:none!important;will-change:auto}
  .has-spot::after{transform:translate3d(calc(50% - 220px),0,0);transition:none}
}
.shaderbg[hidden]{display:none}