/* ============================================================================
   AEOptim — site.css  ·  the locked design system (edit here, once, site-wide)
   Tokens · type · spacing · buttons · nav · drawer · footer · motion ·
   the ring/aurora motif · forms · homepage sections.
   ========================================================================== */

/* ---- tokens (COLORS live in /assets/tokens.css — the global lock) ---------- */
:root{
  --sec-y:clamp(48px,8vw,88px);
  --sec-y-lg:clamp(60px,10vw,112px);
  --sec-y-sm:clamp(24px,4vw,48px);
  --sec-y-hero:clamp(52px,10vw,116px);
  --wrap:1360px;
  --pad:clamp(20px,5vw,40px);
  /* BLOCK RHYTHM (locked 2026-07-19). The vertical scale every page snaps to:
     the gap under a section header, between stacked blocks, and inside big
     grids. Clamped so a 375px phone breathes at roughly 60 percent of the
     desktop value instead of shipping desktop gaps to a hand. Page-scoped
     CSS must use these, never a raw px value above 20px. */
  --blk-sm:clamp(18px,3vw,24px);
  --blk:clamp(24px,3.6vw,34px);
  --blk-lg:clamp(28px,4.2vw,40px);
  --blk-xl:clamp(32px,5vw,48px);
  --gap-lg:clamp(16px,2.6vw,24px);
  --gap-xl:clamp(20px,3.4vw,32px);
  --gap-2xl:clamp(24px,4vw,40px);
  --r:16px; --r-lg:22px; --r-sm:12px;
  --ease:cubic-bezier(.4,0,.2,1);
  /* OUTFIT locked site-wide 2026-07-19 (var names are historic: --sora = display, --inter = body).
     NO monospace role — consultancy theme, not a data theme. */
  --sora:'Outfit',system-ui,sans-serif;
  --inter:'Outfit',system-ui,-apple-system,sans-serif;
  --gap-head:clamp(32px,4.5vw,44px);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- reset / base ---------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--inter);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(173,82,54,.18)}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
p,li{text-wrap:pretty}

/* ---- layout ---------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--sec-y) 0;position:relative;overflow:hidden}
.section>.wrap{position:relative;z-index:1}
/* film grain: one quiet texture over every band, so the aurora never reads as a bare glow */
.section::after,.ft::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--noise);background-size:120px 120px;opacity:.05;z-index:0}
.section[data-theme="light"]::after{opacity:.03}
.section--lg{padding:var(--sec-y-lg) 0}
.section--sm{padding:var(--sec-y-sm) 0}
[data-theme="dark"]{background:var(--ink);color:rgba(255,255,255,.82)}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3{color:#fff}
[data-theme="light"]{background:var(--bg);color:var(--slate)}
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3{color:var(--ink)}
.sec--white{background:var(--white)}

/* ---- type ------------------------------------------------------------------ */
h1,h2,h3{font-family:var(--sora);font-weight:700;letter-spacing:-.018em;line-height:1.1;text-wrap:balance}
.h1{font-size:clamp(30px,5.2vw,56px);line-height:1.06;letter-spacing:-.022em}
.h2{font-size:clamp(26px,3.8vw,40px);line-height:1.12}
.h3{font-size:clamp(19px,2.2vw,23px);line-height:1.2}
h1 em,h2 em,.h1 em,.h2 em{font-style:normal;color:var(--royal)}
[data-theme="dark"] h1 em,[data-theme="dark"] h2 em,[data-theme="dark"] .h1 em,[data-theme="dark"] .h2 em{color:var(--royal-lt)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--royal)}
[data-theme="dark"] .eyebrow{color:var(--royal-lt)}
.lead{font-size:clamp(16px,1.7vw,18px);line-height:1.62;max-width:60ch;text-wrap:pretty}
.sec-head{max-width:none}
.sec-head h2{margin-top:12px}
.sec-head .lead{margin-top:14px}
.sec-head--center{text-align:center;max-width:640px;margin:0 auto}
.sec-head--center .lead{margin-left:auto;margin-right:auto}

/* ---- breadcrumb (shared) -------------------------------------------------- 
   One component for every interior page. Thirty two specialty pages each had
   their own copy of this under a private prefix, which is exactly how a system
   drifts. Wraps on a phone instead of pushing the page sideways. */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12.5px;line-height:1.5;color:var(--slate);margin-bottom:18px}
.crumb a{color:var(--slate)}
.crumb a:hover{color:var(--royal)}
.crumb span[aria-hidden]{opacity:.5}
[data-theme="dark"] .crumb{color:rgba(255,255,255,.5)}
[data-theme="dark"] .crumb a{color:rgba(255,255,255,.65)}
[data-theme="dark"] .crumb a:hover{color:var(--royal-lt)}

/* ---- buttons --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sora);font-weight:600;font-size:15px;line-height:1;min-height:46px;padding:14px 26px;border:1.5px solid transparent;border-radius:var(--r-sm);transition:transform .12s var(--ease),background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.btn--royal{background:var(--royal);color:#fff}
.btn--royal:hover{background:var(--royal-dark);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(173,82,54,.6)}
.btn--ghost{background:transparent;border-color:var(--royal);color:var(--royal)}
.btn--ghost:hover{background:var(--royal);color:#fff;transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.btn--lg{min-height:52px;padding:16px 32px;font-size:16px}
.btn--sm{min-height:38px;padding:9px 18px;font-size:14px}
.btn--block{width:100%}
.arrow{transition:transform .16s var(--ease)}
.btn:hover .arrow,a.lnk:hover .arrow{transform:translateX(3px)}
.lnk{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--royal)}
[data-theme="dark"] .lnk{color:var(--royal-lt)}
.lnk:hover{text-decoration:underline;text-underline-offset:3px}
/* enterprise a11y: a visible, on-brand focus ring everywhere */
a:focus-visible,button:focus-visible{outline:2px solid var(--royal);outline-offset:2px}
[data-theme="dark"] a:focus-visible,[data-theme="dark"] button:focus-visible,.nav a:focus-visible,.nav button:focus-visible,.ft a:focus-visible{outline-color:var(--royal-lt)}

/* ---- motion: one reveal + reduced-motion ----------------------------------- */
.fi{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.fi.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ---- the AEOptim motif: aurora + thinking dots + ring ---------------------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora span{position:absolute;border-radius:50%;opacity:.5}
.aurora .a1{width:52vmax;height:52vmax;left:2%;top:-16%;background:radial-gradient(closest-side,rgba(173,82,54,.16),rgba(173,82,54,.06) 45%,transparent 74%);animation:drift1 28s ease-in-out infinite}
.aurora .a2{width:44vmax;height:44vmax;right:-14%;top:-8%;background:radial-gradient(closest-side,rgba(217,142,50,.10),rgba(217,142,50,.04) 45%,transparent 74%);animation:drift2 34s ease-in-out infinite}
.aurora .a3{width:56vmax;height:56vmax;left:26%;bottom:-28%;background:radial-gradient(closest-side,rgba(173,82,54,.1),transparent 70%);animation:drift3 32s ease-in-out infinite}
[data-theme="light"] .aurora .a3{background:radial-gradient(closest-side,rgba(246,234,223,.9),rgba(246,234,223,.4) 45%,transparent 74%)}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vmax,5vmax) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vmax,-6vmax) scale(1.1)}}
/* the three thinking dots — a functional "AI mulling" motif */
.dots3{display:inline-flex;gap:6px;align-items:center}
.dots3 i{width:7px;height:7px;border-radius:50%;background:var(--royal);display:inline-block;animation:think 1.8s ease-in-out infinite}
.dots3 i:nth-child(2){animation-delay:.22s}.dots3 i:nth-child(3){animation-delay:.44s}
[data-theme="dark"] .dots3 i{background:var(--royal-lt)}
@keyframes think{0%,60%,100%{opacity:.35;transform:scale(1)}30%{opacity:1;transform:scale(1.35)}}
.pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--royal);flex:0 0 auto}
[data-theme="dark"] .pulse{background:var(--royal-lt)}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.4);opacity:0}}
/* background O's: the brand ring drifting at the edges (moving) or resting (static) */
.bg-ring{position:absolute;border-radius:50%;pointer-events:none;opacity:0;z-index:0}
.bg-ring--line{border:2px solid rgba(224,168,127,.11)}
.bg-ring--grad{background:radial-gradient(closest-side,rgba(173,82,54,.11),transparent 72%)}
.bg-ring--static{opacity:1}
.bg-ring[data-f="1"]{animation:ringIn 1.2s ease .4s forwards,ringF1 9s ease-in-out 1.6s infinite}
.bg-ring[data-f="2"]{animation:ringIn 1.2s ease .7s forwards,ringF2 12s ease-in-out 1.9s infinite}
.bg-ring[data-f="3"]{animation:ringIn 1.2s ease .9s forwards,ringF1 13s ease-in-out 2.1s infinite reverse}
@keyframes ringIn{to{opacity:1}}
@keyframes ringF1{0%,100%{transform:translate(0,0)}25%{transform:translate(14px,-18px)}55%{transform:translate(-10px,-12px)}80%{transform:translate(16px,8px)}}
@keyframes ringF2{0%,100%{transform:translate(0,0)}30%{transform:translate(-16px,14px)}60%{transform:translate(12px,-16px)}80%{transform:translate(-8px,8px)}}
/* the ghost O: the full mark (ring + thinking dots) resting behind a section */
.bg-o{position:absolute;pointer-events:none;z-index:0}
.bg-o svg{width:100%;height:auto;display:block}
.bg-o .od{animation:oDot 3.2s ease-in-out infinite;fill-opacity:.18}
.bg-o .od.m{animation-delay:.35s}
.bg-o .od.l{animation-delay:.7s}
@keyframes oDot{0%,45%,100%{fill-opacity:.18}15%{fill-opacity:.42}}
.bg-o--final{width:min(38vw,430px);right:-3%;top:50%;transform:translateY(-50%)}
.bg-o--why{width:260px;left:-70px;bottom:-70px}
@media (max-width:900px){.bg-o{display:none}}

/* the O field: faint outline marks drifting behind every band (the WE-diamonds
   pattern, brand-O edition). site.js injects .bgo-f as each section's first
   child; isolation makes z-index:-1 paint above the section's own background
   but below ALL content, positioned or not. */
.section{isolation:isolate}
.s3{overflow:hidden;isolation:isolate}
.bgo-f{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
/* the mark is the true lockup O: solid 9.3 ring + filled grey dots, upright,
   ghosted by color alpha. Sections sit still (the marks break the bands
   apart); only hero fields drift. */
.bgo-m{position:absolute;opacity:0;animation:bgoIn 1.4s ease forwards}
.bgo-m[data-f="2"]{animation-delay:.3s}
.bgo-m[data-f="3"]{animation-delay:.55s}
.bgo-m--drift{animation:bgoIn 1.4s ease forwards,bgoF1 15s ease-in-out 1.6s infinite}
.bgo-m--drift[data-f="2"]{animation:bgoIn 1.4s ease .3s forwards,bgoF2 17s ease-in-out 2.1s infinite}
.bgo-m--drift[data-f="3"]{animation:bgoIn 1.4s ease .55s forwards,bgoF1 19s ease-in-out 2.4s infinite reverse}
.bgo-m svg{width:100%;height:auto;display:block;overflow:visible}
.bgo-m .bgo-ring{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:9.3}
.bgo-m .bgo-dot{fill:var(--bgo-dot,currentColor)}
@keyframes bgoIn{to{opacity:1}}
@keyframes bgoF1{0%,100%{translate:0 0}25%{translate:16px -20px}55%{translate:-12px -14px}80%{translate:18px 10px}}
@keyframes bgoF2{0%,100%{translate:0 0}30%{translate:-18px 16px}60%{translate:14px -18px}80%{translate:-10px 10px}}
@media (prefers-reduced-motion:reduce){.bgo-m{animation:bgoIn .01s forwards}}
/* Kenny wants the ghost marks on phones too. They stay, scaled down so they
   read as texture rather than clutter. `scale` is free here: the tilt uses
   `rotate` and the drift uses `translate`, both independent properties. */
@media (max-width:700px){.bgo-m{scale:.58}}

/* ============================================================================
   NAV
   ========================================================================== */
.nav{position:sticky;top:0;z-index:900;background:var(--ink);transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);border-bottom:1px solid rgba(255,255,255,.06)}
.nav--light{background:var(--bg);border-bottom-color:var(--line);box-shadow:0 4px 20px -18px rgba(42,30,23,.5)}
.nav__inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:66px;display:flex;align-items:center;gap:18px}
/* lockup */
.lk{display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
/* 27px, not 22. Dropping the header tagline cost the lockup its second line
   and about a third of its presence in the 66px bar; this puts it back to
   ~44% of the bar height without reinstating the tagline. The O-mark is
   sized in em, so the locked geometry scales with it untouched. */
.lk__wm{display:inline-block;white-space:nowrap;font-family:var(--sora);font-weight:600;font-size:27px;letter-spacing:-.015em;line-height:1}
/* Vertical centring in the bar. At line-height:1 the lockup's painted ink (caps,
   the O-mark, the "p" descender) sits low of the box centre, so the lockup reads
   below the menu/CTA. Pixel-measured: the ink centre needs to move up ~6px from
   the line-box centre. -4px puts equal space above and below the ink inside the
   pill. Bar-height independent, so it holds in the 66px default and the 56px
   is-stuck pill alike. Nav-scoped: the footer lockup (.ft__wm) is untouched. */
.nav .lk__wm{transform:translateY(-4px)}
.lk__word{color:#fff;transition:color .35s var(--ease)}
.nav--light .lk__word{color:var(--ink)}
/* the O mark: same metrics as the splash lockup — full letter height */
.lk__mark{display:inline-block;height:1em;width:.8125em;vertical-align:-0.036em;margin:0 .04em}
/* the O mark: ring follows the accent for the surface, dots follow the ink */
.nav .lk__mark path{stroke:var(--royal-lt)}
.nav .lk__mark circle{fill:rgba(255,255,255,.85)}
.nav--light .lk__mark path{stroke:var(--royal)}
.nav--light .lk__mark circle{fill:#232323}
.lk__tag{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--royal-lt);transition:color .35s var(--ease)}
.nav--light .lk__tag{color:var(--royal)}
/* menu */
.nav__menu{display:flex;align-items:center;gap:6px;margin-left:12px}
.nav__link{position:relative;display:inline-flex;align-items:center;gap:5px;padding:9px 12px;font-size:14px;font-weight:500;color:rgba(255,255,255,.82);background:none;border:none;border-radius:8px;transition:color .16s var(--ease),background .16s var(--ease)}
.nav--light .nav__link{color:var(--slate)}
.nav__link:hover{color:#fff}
.nav--light .nav__link:hover{color:var(--ink);background:rgba(173,82,54,.06)}
.nav__chev{width:14px;height:14px;transition:transform .2s var(--ease)}
.nav__item--drop{position:relative}
.nav__item--drop:hover .nav__chev,.nav__trigger[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__drop{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:var(--navy-2);border:1px solid rgba(224,168,127,.18);border-radius:14px;padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
.nav--light .nav__drop{background:#fff;border-color:var(--line);box-shadow:0 24px 60px -28px rgba(42,30,23,.35)}
.nav__item--drop:hover .nav__drop,.nav__item--drop:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateY(0)}
/* the hover bridge: the panel sits 8px below the trigger, so without this the
   pointer crosses unhoverable space and the menu closes on the way down. The
   bridge is part of the panel (a descendant of .nav__item--drop), so hovering
   it keeps the item hovered. It inherits visibility:hidden when the panel is
   closed, so it never intercepts anything while the menu is shut. It is
   absolutely positioned, so it is out of flow and never becomes a grid item
   in the mega panel; the negative insets are measured from the padding box,
   which is why they overshoot the panel's own padding. */
/* hover bridge: the panel sits 8px below its trigger, but the Products panel
   also carries an entry translateY, so the real measured gap is 16px. Size
   the bridge to cover the larger case, or the pointer crosses dead space
   and the menu closes on the way down. Verified empirically, not derived. */
.nav__drop::before{content:"";position:absolute;left:-24px;right:-24px;top:-22px;height:22px}
.nav__drop a{display:block;padding:11px 13px;border-radius:9px;transition:background .14s var(--ease)}
.nav__drop a:hover{background:rgba(173,82,54,.08)}
.nav--light .nav__drop a:hover{background:rgba(173,82,54,.06)}
.nav__drop strong{display:block;font-family:var(--sora);font-weight:600;font-size:14.5px;color:#fff}
.nav--light .nav__drop strong{color:var(--ink)}
.nav__drop small{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.55)}
.nav--light .nav__drop small{color:var(--slate)}
.nav__actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav__cta{border-color:rgba(255,255,255,.34);color:#fff}
.nav__cta:hover{background:#fff;color:var(--ink);border-color:#fff}
.nav--light .nav__cta{border-color:var(--royal);color:var(--royal)}
.nav--light .nav__cta:hover{background:var(--royal);color:#fff}
.nav__burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;border-radius:9px}
.nav__burger span{display:block;height:2px;width:22px;margin:0 auto;background:#fff;border-radius:2px;transition:transform .24s var(--ease),opacity .18s var(--ease)}
.nav--light .nav__burger span{background:var(--ink)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:920px){.nav__menu{display:none}.nav__cta{display:none}.nav__burger{display:flex}}

/* ---- drawer (mobile menu, rebuilt 2026-07-19) ------------------------------
   Products with prices, Who-it's-for as three native <details> groups covering
   all 32 specialty pages, Company rows, the CTA and the contact line. No JS
   beyond the open/close controller: the groups are <details>/<summary>. */
/* Opaque the moment it is not [hidden]. It must NEVER be transparent while
   still interactive: a fade-in that fails to run leaves an invisible layer
   over the whole page that swallows every tap. Only closing animates, and
   closing drops pointer-events on the same synchronous frame. */
.drawer{position:fixed;inset:0;z-index:940;background:linear-gradient(160deg,var(--ink),var(--navy-2));padding:calc(66px + var(--blk-sm)) var(--pad) var(--blk-xl);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer--closing{opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
.drawer[hidden]{display:none}
.drawer__inner{display:flex;flex-direction:column;max-width:420px;margin:0 auto;padding-bottom:var(--blk)}
.drawer__eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--royal-lt);margin:var(--blk) 0 2px}
.drawer__inner>.drawer__eyebrow:first-child{margin-top:0}
/* a top-level row: >=52px of tap target, label left, price or note right */
.drawer__link{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:12px 0;font-family:var(--sora);font-weight:600;font-size:17px;line-height:1.3;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer__price{flex:0 0 auto;font-family:var(--sora);font-weight:500;font-size:13px;color:var(--royal-lt);font-variant-numeric:tabular-nums}
/* a collapsible industry group */
.drawer__grp{border-bottom:1px solid rgba(255,255,255,.08)}
.drawer__grp>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:12px 0;font-family:var(--sora);font-weight:600;font-size:17px;line-height:1.3;color:#fff;cursor:pointer;list-style:none}
.drawer__grp>summary::-webkit-details-marker{display:none}
.drawer__grp>summary::marker{content:""}
.drawer__grp>summary:focus-visible{outline:2px solid var(--royal-lt);outline-offset:3px;border-radius:6px}
.drawer__caret{flex:0 0 auto;width:16px;height:16px;color:var(--royal-lt);transition:transform .2s var(--ease)}
.drawer__grp[open] .drawer__caret{transform:rotate(180deg)}
/* the specialty list: a clay rail down the left, 44px rows */
.drawer__sub{display:flex;flex-direction:column;padding-bottom:14px}
.drawer__sub a{display:flex;align-items:center;min-height:44px;padding:8px 0 8px 16px;font-size:15px;line-height:1.35;color:rgba(255,255,255,.72);border-left:1.5px solid rgba(224,168,127,.28)}
.drawer__sub a.is-hub{color:var(--royal-lt);font-weight:600}
.drawer__cta{margin-top:var(--blk);width:100%}
.drawer__mail{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:var(--blk-sm);text-align:center;color:var(--royal-lt);font-weight:500}
@media (prefers-reduced-motion:reduce){.drawer--closing{transition:none}.drawer__caret{transition:none}}

/* ============================================================================
   FOOTER
   ========================================================================== */
.ft{position:relative;overflow:hidden;background:var(--ink);color:rgba(255,255,255,.6);padding:64px 0 34px;border-top:1px solid rgba(255,255,255,.07)}
.ft__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.ft__lk{display:inline-flex;flex-direction:column;gap:3px;margin-bottom:38px}
.ft__wm{display:inline-block;white-space:nowrap;font-family:var(--sora);font-weight:600;font-size:22px;line-height:1;color:rgba(255,255,255,.55);transition:color .2s var(--ease)}
/* all grey, O included: the mark inherits the lockup color (size from .lk__mark) */
.ft__wm .lk__mark path{stroke:currentColor}
.ft__wm .lk__mark circle{fill:currentColor}
.ft__wm .lk__word{color:inherit}
.ft__tag{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);transition:color .2s var(--ease)}
/* rollover: the whole lockup (words + O + tag) goes to the blue, click scrolls to top */
.ft__lk:hover .ft__wm{color:var(--royal-lt)}
.ft__lk:hover .ft__tag{color:var(--royal-lt)}
.ft__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
/* column heading: identical whether it is a <div> or an <a>. The second
   selector carries the specificity (0,2,1) it needs to beat `.ft__col a`
   (0,1,1) below, which used to dim and enlarge the one linked heading. */
.ft__h,.ft__col a.ft__h{display:block;padding:0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:14px}
/* a second section header inside the first column ("Company") — same weight as
   the other column heads, with room above it to separate from the list before */
.ft__h--gap{margin-top:30px}
.ft__col a{display:block;padding:5px 0;font-size:14px;color:rgba(255,255,255,.6);transition:color .14s var(--ease)}
.ft__col a:hover{color:var(--royal-lt)}
/* a linked heading still needs its own hover: (0,2,2) beats the (0,2,1) above */
.ft__col a.ft__h:hover{color:var(--royal-lt)}
.ft__bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45)}
@media (max-width:720px){.ft__grid{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:420px){.ft__bottom{flex-direction:column;gap:6px}}

/* ============================================================================
   FORMS (shared: the embedded check, future contact/order)
   ========================================================================== */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field label .opt{font-weight:500;color:var(--slate);font-size:12px}
.field .hint{font-size:12px;color:var(--slate);margin-top:6px;line-height:1.45}
.ctl,.field input,.field select{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;outline:none;transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)}
.field input::placeholder{color:var(--slate-lt)}
.field input:hover,.field select:hover{border-color:#c4cef0}
.field input:focus,.field select:focus{border-color:var(--royal);background:#fff;box-shadow:0 0 0 4px rgba(173,82,54,.12)}
.field select,.wz__f select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23AD5236' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.field select,.wz__f select:disabled{opacity:.55;cursor:not-allowed;background-image:none}
.field select,.wz__f select.placeholder{color:var(--slate-lt)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:440px){.row2{grid-template-columns:1fr}}
.loc{position:relative}
.loc svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none}
.loc input{padding-left:38px}
.cf-turnstile{min-height:65px;margin-top:6px}
.err{display:none;margin-top:14px;padding:11px 14px;border-radius:10px;background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad-text);font-size:13.5px;font-weight:500}
.err.show{display:block}
.go{margin-top:18px;width:100%;font-family:var(--sora);font-weight:600;font-size:16px;color:#fff;background:var(--royal);border:none;border-radius:12px;padding:15px;transition:background .16s var(--ease),transform .06s var(--ease)}
.go:hover{background:var(--royal-dark)}.go:active{transform:translateY(1px)}
.go.busy{opacity:.78;cursor:progress}
.go.busy::after{content:"";display:inline-block;width:14px;height:14px;margin-left:9px;vertical-align:-2px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Google Places dropdown (body-appended) */
/* custom select: the native <select> opens the OS list, which cannot be styled
   to match the city autocomplete. This enhances a <select> into a trigger + a
   styled panel that reads like the Places dropdown. The native element stays
   in the DOM for its value; JS mirrors it. */
.cs{position:relative}
.cs__native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.cs__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:inherit;font-size:15px;
  color:var(--ink);text-align:left;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)}
.cs__btn:hover{border-color:var(--royal-lt)}
.cs__btn[aria-expanded="true"]{border-color:var(--royal);background:#fff;box-shadow:0 0 0 4px rgba(173,82,54,.12)}
.cs__btn:disabled{opacity:.55;cursor:not-allowed}
.cs__btn--ph .cs__lbl{color:var(--slate-lt)}
.cs__lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs__chev{flex:0 0 auto;width:14px;height:14px;background-repeat:no-repeat;background-position:center;transition:transform .18s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23AD5236' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
.cs__btn[aria-expanded="true"] .cs__chev{transform:rotate(180deg)}
.cs__panel{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:2000;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px -16px rgba(42,30,23,.35);padding:6px;max-height:288px;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:csIn .14s var(--ease)}
@keyframes csIn{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.cs__panel{animation:none}}
.cs__opt{padding:10px 12px;border-radius:8px;font-size:15px;line-height:1.4;color:var(--ink);cursor:pointer}
.cs__opt:hover,.cs__opt.cs__opt--on{background:var(--tint)}
.cs__opt.cs__opt--on{font-weight:600}

/* cookie consent — a square brown box in the corner with a white border
   (Kenny 2026-07-20), not the rounded WE bar. Bottom-left so it clears the
   footer's back-to-top and any right-side chrome. */
/* "Prefer to talk first" button under the free-check card — opens the scheduler */
.hero__card-call{margin-top:12px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 16px;background:none;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--slate);transition:border-color .15s var(--ease),color .15s var(--ease)}
.hero__card-call:hover{border-color:var(--royal);color:var(--ink)}
.hero__card-call b{color:var(--royal);font-weight:700}

/* ---- Nav search icon (replaces the header CTA); mirrors .nav__cta theming ---- */
.nav__search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;color:#fff;cursor:pointer;transition:color .16s var(--ease)}
.nav__search svg{width:20px;height:20px}
.nav__search:hover{color:var(--royal-lt)}
.nav--light .nav__search{color:var(--slate)}
.nav--light .nav__search:hover{color:var(--royal)}

/* ---- Site search: command-palette modal (Cmd/Ctrl+K) ---- */
.search{position:fixed;inset:0;z-index:3200;display:none;justify-content:center;align-items:flex-start;padding:12vh 20px 20px}
.search.is-open{display:flex}
.search__bg{position:absolute;inset:0;background:rgba(24,15,10,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer}
.search__panel{position:relative;z-index:1;width:min(600px,100%);max-height:70vh;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(24,15,10,.4);animation:searchIn .18s var(--ease)}
@keyframes searchIn{from{opacity:0;transform:translateY(-8px)}}
.search__bar{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.search__ic{width:20px;height:20px;color:var(--slate-lt);flex-shrink:0}
.search__input{flex:1;border:0;outline:0;background:none;font-family:var(--sora);font-size:17px;color:var(--ink);min-width:0}
.search__input::placeholder{color:var(--slate-lt)}
.search__x{flex-shrink:0;width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--slate-lt);transition:background .15s var(--ease),color .15s var(--ease)}
.search__x:hover{background:var(--tint,#F6EADF);color:var(--ink)}
.search__x svg{width:16px;height:16px}
.search__results{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1}
.search__opt{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;text-decoration:none}
.search__opt[aria-selected="true"],.search__opt:hover{background:var(--tint,#F6EADF)}
.search__opt__main{min-width:0;flex:1}
/* title + description are block-level so they STACK and truncate (inline spans
   ignore text-overflow); description clamps to two lines. */
.search__opt__t{display:block;font-family:var(--sora);font-weight:600;font-size:14.5px;line-height:1.35;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search__opt__d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--slate);overflow:hidden}
.search__cat{flex-shrink:0;margin-top:1px;font-family:var(--sora);font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--royal);background:rgba(173,82,54,.08);border-radius:999px;padding:3px 9px}
.search__empty{padding:26px 18px;text-align:center;font-size:14px;color:var(--slate)}
.search__mark{background:rgba(224,168,127,.45);border-radius:3px}
@media(max-width:560px){.search{padding:0}.search__panel{width:100%;height:100%;max-height:none;border-radius:0;border:0}}

/* ---- Tags: chip strip above the footer + /tags hub listings ---- */
.tagstrip{background:var(--navy-2,#241912);border-top:1px solid rgba(255,255,255,.08)}
.tagstrip__in{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-top:20px;padding-bottom:20px}
.tagstrip__l{font-family:var(--sora);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-right:4px}
.tag-chip{display:inline-flex;align-items:center;font-family:var(--sora);font-weight:600;font-size:12.5px;color:var(--slate);background:var(--tint,#F6EADF);border:1px solid var(--line);border-radius:999px;padding:5px 13px;text-decoration:none;transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease)}
.tag-chip:hover{border-color:var(--royal);color:var(--royal)}
.tag-chip--v{color:var(--royal);background:rgba(173,82,54,.08);border-color:rgba(173,82,54,.2)}
.tag-chip__n{margin-left:6px;font-weight:500;opacity:.55}
.tagstrip .tag-chip{color:rgba(255,255,255,.82);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.tagstrip .tag-chip:hover{color:#fff;border-color:var(--royal-lt)}
.tagstrip .tag-chip--v{color:var(--royal-lt);background:rgba(224,168,127,.12);border-color:rgba(224,168,127,.32)}
.taghero__back{margin-bottom:14px}
.taghero__back a{font-family:var(--sora);font-weight:600;font-size:13px;color:var(--royal-lt);text-decoration:none}
.taglist{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:760px}
.taglist__i{position:relative}
.taglist__i>a{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 132px 18px 20px;text-decoration:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.taglist__i>a:hover{border-color:var(--royal-lt);box-shadow:0 14px 34px -22px rgba(42,30,23,.45)}
.taglist__t{display:block;font-family:var(--sora);font-weight:700;font-size:16px;color:var(--ink)}
.taglist__d{display:block;margin-top:5px;font-size:13.5px;line-height:1.55;color:var(--slate)}
.taglist__i .tag-chip--v{position:absolute;top:16px;right:16px}
.taggroups{max-width:760px}
.taggroup{margin-top:28px}
.taggroup:first-child{margin-top:0}
.taggroup__h{font-family:var(--sora);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--royal);margin-bottom:13px}
.taggroup__row{display:flex;flex-wrap:wrap;gap:10px}

/* ---- Scheduler lightbox (Calendly) — ported from Web Everything, clay/sand ---- */
.sched{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:24px}
.sched.is-open{display:flex}
.sched__bg{position:absolute;inset:0;background:rgba(24,15,10,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer}
.sched__sheet{position:relative;z-index:1;width:min(760px,100%);max-height:calc(100vh - 48px);max-height:calc(100svh - 48px);display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(24,15,10,.5);animation:schedIn .3s cubic-bezier(.22,.61,.36,1)}
@keyframes schedIn{from{opacity:0;transform:translateY(12px)}}
.sched__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 8px 22px}
.sched__title{margin:0;font-family:var(--sora);font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.sched__close{width:36px;height:36px;border-radius:50%;background:var(--tint,#F6EADF);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .15s var(--ease);flex-shrink:0}
.sched__close:hover{background:var(--line)}
.sched__note{margin:0;padding:0 22px 10px;font-size:13px;line-height:1.5;color:var(--slate)}
.sched__body{flex:1;min-height:440px;background:var(--bg)}
.sched__body iframe{display:block;width:100%;height:100%;min-height:440px;border:0}
.sched__loading{margin:0;padding:44px 20px;text-align:center;font-size:14px;color:var(--slate)}
.sched__fallback{margin:0;padding:11px 22px 15px;font-size:12px;color:var(--slate-lt)}
.sched__fallback a{color:var(--royal);font-weight:600}
@media (max-width:760px){.sched{padding:0}.sched__sheet{width:100%;height:100%;max-height:none;border-radius:0}}

.aeo-consent{position:fixed;left:20px;bottom:20px;z-index:2500;width:min(360px,calc(100vw - 40px));
  background:var(--ink);color:#fff;border:1.5px solid #fff;padding:18px 20px;
  box-shadow:0 22px 55px rgba(0,0,0,.5);animation:aeoConsentIn .25s var(--ease)}
@keyframes aeoConsentIn{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.aeo-consent{animation:none}}
.aeo-consent__text{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.8)}
.aeo-consent__text a{color:var(--royal-lt);text-decoration:underline;text-underline-offset:2px}
.aeo-consent__actions{display:flex;gap:10px;margin-top:14px}
.aeo-consent__btn{flex:1;min-height:40px;font-family:var(--sora);font-weight:600;font-size:13px;
  border:1.5px solid;border-radius:0;cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.aeo-consent__btn--accept{background:var(--royal);border-color:var(--royal);color:#fff}
.aeo-consent__btn--accept:hover{background:var(--royal-dark);border-color:var(--royal-dark)}
.aeo-consent__btn--decline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.aeo-consent__btn--decline:hover{border-color:#fff}
@media (max-width:480px){.aeo-consent{left:12px;right:12px;bottom:12px;width:auto}}

.pac-container{z-index:2000;border-radius:10px;margin-top:2px;box-shadow:0 12px 30px -12px rgba(42,30,23,.35);border:1px solid var(--line)}
.pac-container img{max-width:none}
.pac-item{padding:7px 12px;font-size:14px;cursor:pointer}
.pac-item:hover{background:var(--tint)}
.pac-item-query{font-size:14px}

/* ============================================================================
   HOMEPAGE SECTIONS  (each block is self-contained + liftable)
   ========================================================================== */

/* ---- 1 · HERO -------------------------------------------------------------- */
.hero{padding:var(--sec-y-hero) 0 var(--sec-y)}
/* .page-hero: first dark section on interior pages. The nav is fixed and
   transparent, so below ~760px the section must clear the lockup itself. */
@media (max-width:760px){.hero,.page-hero{padding-top:96px}}
/* The band under a hero was adding its own full top padding on top of the
   hero's bottom padding, so the seam read as dead space on a phone. Kenny
   called this out on the homepage; the same rule applies to every interior
   page so the whole site breaks the same way. */
@media (max-width:700px){.page-hero + .section{padding-top:var(--blk)}}
.hero .wrap{position:relative;z-index:1}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,4vw,56px);align-items:center}
.hero__eyebrow{margin-bottom:20px}
.hero__title{font-size:clamp(31px,5vw,56px);font-weight:700;line-height:1.07;letter-spacing:-.022em}
.hero__sub{margin-top:18px;font-size:clamp(15.5px,1.7vw,18px);line-height:1.6;color:rgba(255,255,255,.72);max-width:52ch}
.hero__cta{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero__alt{margin-top:16px;font-size:14px;color:rgba(255,255,255,.6)}
.hero__alt a{color:var(--royal-lt);font-weight:600}
/* the embedded check card */
.hero__card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.hero__card-hd{margin-bottom:18px}
.hero__card-eye{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--royal)}
.hero__card-h{font-family:var(--sora);font-weight:700;font-size:20px;color:var(--ink);margin-top:6px;line-height:1.2}
.hero__card-note{text-align:center;margin-top:14px;font-size:12px;color:var(--slate)}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;gap:34px}.hero__sub{max-width:none}}

/* ---- 2 · HANDOFF BANNER ---------------------------------------------------- */
.handoff{display:block;background:linear-gradient(100deg,var(--royal),var(--royal-dark));color:#fff}
.handoff .wrap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px;text-align:center}
.handoff__tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.handoff__msg{font-size:clamp(15px,1.7vw,17px);font-weight:500}
.handoff__lnk{display:inline-flex;align-items:center;gap:7px;font-family:var(--sora);font-weight:600;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.5)}
.handoff__lnk:hover{border-color:#fff}

/* ---- 3 · LADDER ------------------------------------------------------------ */
.ladder__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:var(--gap-head)}
@media (max-width:760px){.ladder__grid{grid-template-columns:1fr}}
.lad{position:relative;background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:28px 26px;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.lad:hover{transform:translateY(-3px);border-color:rgba(224,168,127,.4);box-shadow:0 24px 50px -30px rgba(0,0,0,.7)}
.lad--front{border-color:var(--royal);background:linear-gradient(165deg,rgba(173,82,54,.16),var(--navy-2))}
.lad__price{font-family:var(--sora);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--royal-lt)}
.lad__h{font-family:var(--sora);font-weight:700;font-size:21px;color:#fff;margin-top:6px}
.lad__p{margin-top:10px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.68)}
.lad__list{margin:16px 0 20px;list-style:none;display:flex;flex-direction:column;gap:9px}
.lad__list li{position:relative;padding-left:22px;font-size:14px;color:rgba(255,255,255,.8);line-height:1.5}
/* list marker = the brand O-ring (diamonds retired 2026-07-19) */
.lad__list li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;border:2.2px solid var(--royal-lt)}

/* ---- 4 · THE SPLIT --------------------------------------------------------- */
.split{border-top:1px solid rgba(255,255,255,.05)}
.split__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:14px}
@media (max-width:860px){.split__grid{grid-template-columns:1fr;gap:32px}}
.split__p{margin-top:16px;font-size:15.5px;line-height:1.66;color:rgba(255,255,255,.74)}
.split__p+.split__p{margin-top:12px}
.split-dia{width:100%;height:auto;border:1px solid rgba(255,255,255,.1);border-radius:var(--r);background:var(--navy-2);padding:22px}

/* ---- 5 · WHY NOW (stats) --------------------------------------------------- */
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--gap-head)}
@media (max-width:760px){.stats__grid{grid-template-columns:1fr}}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
/* light-card depth: one soft layered shadow across every white card */
.stat,.step,.kit__cell,.ind,.diff__col{box-shadow:0 1px 2px rgba(42,30,23,.03),0 12px 30px -24px rgba(42,30,23,.16)}
.stat__n{font-family:var(--sora);font-weight:700;font-size:clamp(34px,5vw,46px);color:var(--royal);line-height:1;letter-spacing:-.02em}
.stat__n sup{font-size:.42em;font-weight:600;top:-1.1em;margin-left:2px}
.stat__n sup a{color:var(--slate)}
.stat__t{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.stat__src{margin-top:10px;font-size:11.5px;color:var(--slate)}
.stats__foot{margin-top:26px;font-size:14px;color:var(--slate);max-width:64ch}
.cites{margin-top:22px;font-size:11.5px;line-height:1.5;color:var(--slate-lt)}
.cites a{color:var(--slate);text-decoration:underline;text-underline-offset:2px}

/* ---- 6 · ENGINES STRIP ----------------------------------------------------- */
.engines-strip{border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.engines-strip .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.engines-strip__label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.engines-strip__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px}
.engines-strip__row span{font-family:var(--sora);font-weight:600;font-size:clamp(15px,2vw,19px);color:rgba(255,255,255,.9)}

/* ---- 7 · HOW IT WORKS ------------------------------------------------------ */
.how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:var(--gap-head)}
@media (max-width:820px){.how__grid{grid-template-columns:1fr}}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;position:relative}
.step__n{font-family:var(--sora);font-weight:600;font-size:12px;color:var(--royal);letter-spacing:.06em}
.step__ico{margin-top:14px;width:44px;height:44px;border-radius:12px;background:var(--tint);display:flex;align-items:center;justify-content:center}
.step__h{font-family:var(--sora);font-weight:700;font-size:19px;color:var(--ink);margin-top:16px}
.step__p{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--slate)}

/* ---- 8 · KIT (bento) ------------------------------------------------------- */
.kit__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:1fr;gap:16px;margin-top:var(--gap-head)}
.kit__cell{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.kit__cell--lead{grid-row:span 2;background:linear-gradient(165deg,var(--ink),var(--navy-2));color:#fff;display:flex;flex-direction:column}
.kit__cell--lead .kit__h{color:#fff}
.kit__cell--lead .kit__p{color:rgba(255,255,255,.72)}
.kit__eye{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--royal)}
.kit__cell--lead .kit__eye{color:var(--royal-lt)}
.kit__h{font-family:var(--sora);font-weight:700;font-size:19px;color:var(--ink);margin-top:10px;line-height:1.22}
.kit__p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--slate)}
.kit__meta{margin-top:auto;padding-top:18px;font-family:var(--sora);font-weight:500;font-size:12px;letter-spacing:.03em;color:var(--royal-lt)}
.kit__cta{margin-top:28px;display:flex;justify-content:center}
@media (max-width:820px){.kit__grid{grid-template-columns:1fr 1fr}.kit__cell--lead{grid-column:span 2;grid-row:auto}}
@media (max-width:520px){.kit__grid{grid-template-columns:1fr}.kit__cell--lead{grid-column:auto}}

/* ---- 9 · INDUSTRIES -------------------------------------------------------- */
.ind__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--gap-head)}
@media (max-width:820px){.ind__grid{grid-template-columns:1fr}}
.ind{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.ind__h{font-family:var(--sora);font-weight:700;font-size:20px;color:var(--ink)}
.ind__p{margin-top:8px;font-size:14px;color:var(--slate);line-height:1.55}
.ind__tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.ind__tags span{font-size:12.5px;color:var(--ink);background:var(--tint);border-radius:999px;padding:5px 12px}

/* ---- 10 · DIFFERENT (compare) ---------------------------------------------- */
.diff__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:var(--gap-head)}
@media (max-width:680px){.diff__cols{grid-template-columns:1fr}}
.diff__col{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.diff__col--no{background:var(--bg)}
.diff__ch{font-family:var(--sora);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:16px}
.diff__list{list-style:none;display:flex;flex-direction:column;gap:12px}
.diff__list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.diff__list li::before{position:absolute;left:0;top:0;font-weight:700}
.diff__col--is li::before{content:"";width:9px;height:9px;border-radius:50%;border:2.2px solid var(--royal);top:5px}
.diff__col--no li{color:var(--slate)}
.diff__col--no li::before{content:"×";color:var(--bad);font-size:15px;top:-1px}
.diff__foot{margin-top:26px;font-size:15px;line-height:1.6;color:var(--ink);max-width:60ch}

/* ---- 11 · FAQ -------------------------------------------------------------- */
.faq{max-width:780px;margin:var(--gap-head) auto 0}
.faq__item{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}
/* native open/close animation where supported; graceful no-op elsewhere */
.faq__item::details-content{height:0;overflow:clip;transition:height .32s var(--ease),content-visibility .32s allow-discrete}
.faq__item[open]::details-content{height:auto}
@media (prefers-reduced-motion:reduce){.faq__item::details-content{transition:none}}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-family:var(--sora);font-weight:600;font-size:clamp(16px,1.9vw,18px);color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"";flex:0 0 auto;width:12px;height:12px;border-right:2px solid var(--royal);border-bottom:2px solid var(--royal);transform:rotate(45deg);transition:transform .2s var(--ease)}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 0 22px;font-size:15px;line-height:1.66;color:var(--slate);max-width:64ch}
.faq__a a{color:var(--royal);font-weight:600}

/* ---- 12 · FINAL CTA -------------------------------------------------------- */
.final{text-align:center;padding:var(--sec-y-lg) 0 var(--sec-y)}
/* The closing CTA sits on the late-night photograph under the house scrim.
   Set as a background so every .final band on the site picks it up without
   markup, and so the O field and aurora still paint above it. */
.final,.f3{background-color:var(--ink);background-image:linear-gradient(112deg,rgba(24,16,10,.94) 24%,rgba(24,16,10,.78) 56%,rgba(173,82,54,.38)),url("/assets/img/patient-asking-late-night-1800.jpg");background-size:cover;background-position:center 38%}
@supports (background-image:image-set(url("x.avif") type("image/avif"))){
  .final,.f3{background-image:linear-gradient(112deg,rgba(24,16,10,.94) 24%,rgba(24,16,10,.78) 56%,rgba(173,82,54,.38)),image-set(url("/assets/img/patient-asking-late-night-1800.avif") type("image/avif"),url("/assets/img/patient-asking-late-night-1800.jpg") type("image/jpeg"))}
}
.final .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.final__marks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;margin-bottom:30px}
.final__marks span{font-family:var(--sora);font-weight:600;font-size:15px;color:rgba(255,255,255,.75)}
.final__h{font-size:clamp(30px,4.6vw,48px);max-width:18ch}
.final__p{margin-top:16px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.72);max-width:52ch}
.final__cta{margin-top:30px}
.final__alt{margin-top:16px;font-size:14px;color:rgba(255,255,255,.6)}
.final__alt a{color:var(--royal-lt);font-weight:600}

/* ---- 13 · CONTACT ---------------------------------------------------------- */
.contact{border-top:1px solid rgba(255,255,255,.06);padding:var(--sec-y-sm) 0}
.contact .wrap{text-align:center;max-width:640px}
.contact__p{margin-top:14px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.72)}
.contact__mail{display:inline-block;margin-top:24px;font-family:var(--sora);font-weight:700;font-size:clamp(18px,2.4vw,24px);color:#fff;border-bottom:2px solid var(--royal-lt);padding-bottom:2px}
.contact__mail:hover{color:var(--royal-lt)}
.contact__cta{margin-top:28px}

/* ---- reduced motion -------------------------------------------------------- */
/* ---- the engine strip (shared partial: engines.html — real marks, monochrome) */
.eng{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:26px 44px}
.eng__mark{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;flex:0 0 auto}
.eng__mark svg{height:30px;width:30px;opacity:.92}
.eng__mark span{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);text-align:center;line-height:1.4;max-width:110px}
.final .eng{margin-bottom:38px}
@media (max-width:640px){.eng{gap:20px 26px}.eng__mark svg{height:24px;width:24px}.eng__mark span{font-size:9.5px;letter-spacing:.1em}}

/* ---- Google Places dropdown (body-appended by Maps; style it to the brand) --- */
.pac-container{z-index:99999;border-radius:12px;margin-top:5px;border:1px solid var(--line);background:var(--white);box-shadow:0 14px 44px -14px rgba(42,30,23,.4);font-family:var(--inter)}
.pac-container img{max-width:none}
.pac-item{padding:9px 14px;font-size:14px;color:var(--ink);cursor:pointer;border-top:1px solid #eef1f9}
.pac-item:first-child{border-top:none}
.pac-item:hover,.pac-item-selected{background:var(--tint)}
.pac-item-query{font-size:14px;color:var(--ink)}
.pac-matched{font-weight:600}
.pac-icon{display:none}

/* ---- solo hero (the standalone check page): one centered column, same card --- */
.hero--solo .hero__grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:34px}
.hero--solo .hero__copy{max-width:660px}
.hero--solo .hero__sub{margin-left:auto;margin-right:auto}
.hero--solo .hero__card{width:min(560px,100%);text-align:left}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fi{opacity:1;transform:none;transition:none}
  .aurora span,.dots3 i,.pulse::after{animation:none}
  .bg-ring[data-f],.bg-o .od{animation:none}
  .bg-ring{opacity:1}
  .btn:hover,.lad:hover,.step:hover{transform:none}
}

/* ============================================================================
   NAV 2.0 (2026-07-19): the auto-hiding pill, DARK ALWAYS (no light switching),
   promoted from the index to shared chrome. Plus the Who-it's-for mega menu.
   ========================================================================== */
/* z-index 960 puts the pill above the open drawer (940), so the burger stays
   visible and tappable as the close control. The skip link (1000) still wins. */
.nav{position:fixed;top:0;left:0;right:0;z-index:960;background:transparent;border-bottom:none;box-shadow:none;transition:transform .38s var(--ease)}
.nav__inner{transition:height .32s var(--ease),max-width .32s var(--ease),margin .32s var(--ease),padding .32s var(--ease),background .3s var(--ease),border-radius .32s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);border:1px solid transparent}
.nav.is-stuck{padding-top:11px}
.nav.is-stuck .nav__inner{height:56px;max-width:min(var(--wrap),calc(100% - 28px));margin:0 auto;padding-left:20px;padding-right:9px;border-radius:999px;background:rgba(38,27,20,.94);border-color:rgba(224,168,127,.2);box-shadow:0 18px 50px -22px rgba(0,0,0,.72)}
.nav.is-stuck .lk__tag{opacity:0;height:0;overflow:hidden}
.nav.is-stuck .nav__cta{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;padding:8px 16px}
.nav.is-stuck .nav__cta:hover{background:rgba(255,255,255,.08);border-color:#fff}
.nav.is-hidden{transform:translateY(-125%)}
.nav:focus-within{transform:none}
@media (prefers-reduced-motion:reduce){.nav,.nav__inner{transition:none}.nav.is-hidden{transform:none}}

/* the mega menu */
.nav__item--mega{position:relative}
/* Centered under its trigger and clamped so it can never run off screen.
   The trigger sits roughly 557px left of the nav content box's right edge, so
   a panel of width W centered on it starts at about (100vw - 557 - W/2). The
   `200vw - 1300px` term is that inequality solved for W: below ~1000px the
   panel narrows instead of overflowing, and it holds a ~50px viewport margin.
   Above 1000px the 700px cap binds and the term is inert.
   Centering uses the independent `translate` property, not `transform`, so it
   composes with the open/close translateY on `.nav__drop` instead of losing
   to it (that hover rule is (0,2,0) and would otherwise win). */
.nav__drop--mega{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 30px;width:min(700px,calc(200vw - 1300px),calc(100vw - 40px));left:50%;right:auto;translate:-50% 0;padding:22px 26px}
.nav__item--mega:hover .nav__drop--mega,.nav__item--mega:focus-within .nav__drop--mega{display:grid}
.mega__col{display:flex;flex-direction:column;gap:1px;min-width:0}
.mega__h{display:flex;align-items:center;gap:8px;font-family:var(--sora);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--royal-lt);margin-bottom:8px;white-space:nowrap}
.mega__ring{flex:0 0 auto;width:10px;height:10px;border-radius:50%;border:2.4px solid currentColor}
.nav__drop--mega a{display:block;padding:5px 8px;border-radius:7px;font-size:13.5px;color:rgba(255,255,255,.8);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__drop--mega a:hover{background:rgba(255,255,255,.07);color:#fff}
/* the same fight the footer heading was losing: "Medical practices" is the one
   column heading that is a link, so `.nav__drop--mega a` (0,2,1) was beating
   `.mega__h` (0,1,0). These two restate the heading at (0,3,1) and (0,3,2). */
.nav__drop--mega a.mega__h{display:flex;padding:0;font-size:12px;color:var(--royal-lt)}
.nav__drop--mega a.mega__h:hover{background:transparent;color:#fff}

/* ---- menu tie-up (2026-07-19): right-aligned menu, steady CTA, symmetric pill -- */
.nav__menu{margin-left:auto}
.nav__actions{margin-left:10px}
.nav .btn:hover,.nav__cta:hover{transform:none}
.nav.is-stuck .nav__inner{padding-right:20px}
/* (the old right-anchor override lived here; the mega panel centers now: see
   the .nav__drop--mega rule above) */

/* ---- footer 2.0: 4 columns + legal row ------------------------------------- */
.ft__p{margin-top:10px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.55);max-width:30ch}
.ft__legal{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:18px;margin-top:26px;border-top:1px solid rgba(255,255,255,.08)}
.ft__legal a{font-size:12.5px;color:rgba(255,255,255,.45);transition:color .16s}
.ft__legal a:hover{color:rgba(255,255,255,.8)}

/* ---- tie-up round 2 (2026-07-19): Cloudflare width, smaller nav CTA,
   footer submenus + one-line legal, O-mark horizontal lock ---------------- */
.nav__cta{min-height:34px;padding:8px 15px;font-size:13.5px}
.nav.is-stuck .nav__cta{padding:7px 14px}
/* the O-mark horizontal lock: optical margins tuned at hero scale (see BRAND-LOCK) */
.lk__mark{margin:0 .028em 0 .052em}
/* footer: who-it's-for submenus */
.ft__subh{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42);margin:12px 0 4px}
.ft__col a.ft__sm{font-size:13px;padding:3.5px 0;color:rgba(255,255,255,.55)}
.ft__col a.ft__sm:hover{color:var(--royal-lt)}
/* footer: contact lines */
.ft__line{display:block;padding:5px 0;font-size:14px;color:rgba(255,255,255,.7)}
a.ft__line:hover{color:var(--royal-lt)}
/* footer: ONE rule above a single combined row: © left, legal right */
.ft__bottom{align-items:center}
.ft__bottom .ft__legal2{display:flex;flex-wrap:wrap;gap:6px 20px;margin-left:auto;padding:0;border:none;margin-top:0}
/* At 375px the four links fit 3-up and orphan "Accessibility" on its own line,
   which reads as broken rather than wrapped. Two even columns instead. */
@media (max-width:560px){.ft__legal2{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;width:100%;margin-left:0;justify-items:center}}
.ft__bottom .ft__legal2 a{font-size:12.5px;color:rgba(255,255,255,.45)}
.ft__bottom .ft__legal2 a:hover{color:rgba(255,255,255,.8)}
/* footer grid: five columns at the Cloudflare width, stacking down */
.ft__grid{grid-template-columns:1.35fr 1fr 1fr 1fr 1.15fr;gap:28px}
@media (max-width:1080px){.ft__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.ft__grid{grid-template-columns:1fr 1fr}}
.nav__link,.nav__cta{white-space:nowrap}
@media (max-width:920px){.nav__actions{margin-left:auto}}

/* ============================================================================
   MOBILE RHYTHM (locked 2026-07-19)
   Phones read a page as one column, so the vertical scale has to shrink with
   it. The --blk-* tokens carry most of this; these rules cover the shared
   primitives every page builds its bands out of, so spacing stays consistent
   site-wide no matter which page you land on.
   ========================================================================== */
@media (max-width:700px){
  /* the section header stack: eyebrow, h2, lead */
  .eyebrow{font-size:11.5px;letter-spacing:.12em}
  .lead{margin-top:12px}
  .h2{line-height:1.16}
  /* a lede centered under a header should not run edge to edge */
  .lead,.final__p{max-width:38ch}
  /* stacked heroes: the copy column keeps its own breathing room */
  .page-hero .btn{width:auto}
  /* Decorative motifs stay LEFT aligned when they stack, sharing the left edge
     with the copy above them (Kenny 2026-07-19). Do not centre them. */
  .page-hero svg:not([class*="__"]):not(.lk__mark):not(.nav__chev),
  .section > .wrap > svg{display:block;margin-inline:0}
  /* FAQ rows tighten up */
  .faq__item summary{font-size:15px;line-height:1.45}
}
@media (max-width:440px){
  .lead,.final__p{max-width:34ch}
}