/* Cryo Brothers — site stylesheet
   Built from the v2 design handoff (design tokens + prototype).
   Geometry rule: no border-radius anywhere, no shadows — depth comes from
   layered translucency and hairline borders. Sections stay translucent so
   the fixed fog layer reads through them. */

/* ===== Fonts (self-hosted, extracted from the design bundle; variable where available) ===== */
@font-face{font-family:'Saira';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/saira-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/saira-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/saira-condensed-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/saira-condensed-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/saira-condensed-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/saira-condensed-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('../fonts/ibm-plex-sans-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('../fonts/ibm-plex-sans-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Metric-matched fallbacks: until a woff2 arrives, Arial is scaled to the
   real face's advance width and vertical metrics so the swap does not move
   the header or the hero (measured in Chromium — audit 2026-09-02, PERF-04).
   Overrides are divided by size-adjust because the browser scales them. */
@font-face{font-family:'Saira Fallback';src:local('Arial'),local('Liberation Sans');size-adjust:102.15%;ascent-override:111.6%;descent-override:43.08%;line-gap-override:0%}
@font-face{font-family:'Saira Condensed Fallback';src:local('Arial'),local('Liberation Sans');size-adjust:80.4%;ascent-override:141.79%;descent-override:54.73%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Sans Fallback';src:local('Arial'),local('Liberation Sans');size-adjust:102.58%;ascent-override:100.41%;descent-override:27.3%;line-gap-override:0%}

/* ===== Tokens ===== */
:root{
  color-scheme:dark;
  --navy:#081828;          /* Primary Navy */
  --navy-deep:#050f1a;     /* Deep Navy */
  --navy-mid:#0b1e33;      /* Mid Navy */
  --ice:#20A0E3;           /* Ice Blue accent — never body text */
  --ice-hover:#5cc0f5;
  --steel:#AABCCC;
  --white:#F5F7FA;
  --body:#c3d0dc; --body-2:#9db0c2; --body-3:#8fa2b4; --mut-1:#7e93a6; --mut-2:#6b8397; --mut-3:#3f5468;
  /* --mut-2 / --mut-3: separators and panel interiors only — never body text over fog */
  --hair-16:rgba(170,188,204,.16); --hair-20:rgba(170,188,204,.2); --hair-22:rgba(170,188,204,.22); --hair-25:rgba(170,188,204,.25);
  /* --frost-glow-*: #frost inset vignette only (the one sanctioned box-shadow) */
  --frost-glow-outer:rgba(32,120,180,.34); --frost-glow-inner:rgba(170,220,250,.16);
  --saira:'Saira','Saira Fallback',system-ui,sans-serif;
  --cond:'Saira Condensed','Saira Condensed Fallback','Saira',system-ui,sans-serif;
  --plex:'IBM Plex Sans','IBM Plex Sans Fallback',system-ui,sans-serif;
  --pad-x:clamp(20px,4vw,56px);
  --pad-y:clamp(48px,7vw,104px);
  --fog-opacity:.62;
  --mark-opacity:.07;
  --fog-dur-a:28s;
  --fog-dur-b:38s;
  --head-fog-dur:32s;
  --ease-cine:cubic-bezier(.2,.7,.2,1);
}

@property --ptr-x{syntax:'<percentage>';inherits:true;initial-value:22%}
@property --ptr-y{syntax:'<percentage>';inherits:true;initial-value:18%}
@property --fill-x{syntax:'<percentage>';inherits:true;initial-value:18%}
@property --fill-y{syntax:'<percentage>';inherits:true;initial-value:28%}

*{box-sizing:border-box}
html{overflow-x:clip;scroll-padding-top:88px}
body{margin:0;background:var(--navy-deep);color:var(--white);font-family:var(--plex);overflow-x:clip}
a{color:var(--ice);text-decoration:none}
a:hover{color:var(--ice-hover)}
.nb{white-space:nowrap}
img{max-width:100%}
.atmosphere .fog-a,.atmosphere .fog-b,.head-fog{max-width:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--ice);color:var(--navy)}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

.skip-link{position:fixed;left:-9999px;top:0;z-index:100;background:var(--ice);color:var(--navy);font-family:var(--cond);font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:12px 22px}
.skip-link:focus{left:0;color:var(--navy)}

/* ===== Persistent atmosphere layer ===== */
.atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;isolation:isolate}
.atmosphere .fog-wrap{position:absolute;inset:0}
.atmosphere .fog-a{position:absolute;inset:-18%;width:136%;height:136%;width:136lvw;height:136lvh;object-fit:cover;opacity:var(--fog-opacity);animation:fogA var(--fog-dur-a,28s) linear infinite;will-change:transform}
.atmosphere .fog-b{position:absolute;inset:-20%;width:140%;height:140%;width:140lvw;height:140lvh;object-fit:cover;opacity:calc(var(--fog-opacity)*.42);mix-blend-mode:screen;animation:fogB var(--fog-dur-b,38s) linear infinite;will-change:transform}
.atmosphere .scrim{position:absolute;inset:0;background:
  radial-gradient(48% 42% at var(--ptr-x,22%) var(--ptr-y,18%),rgba(186,226,255,.11) 0%,rgba(32,160,227,.06) 34%,rgba(8,24,40,0) 68%),
  radial-gradient(70% 60% at var(--fill-x,18%) var(--fill-y,28%),rgba(32,160,227,.07) 0%,rgba(8,24,40,0) 62%),
  radial-gradient(120% 90% at 18% 0%,rgba(32,160,227,.11) 0%,rgba(8,24,40,0) 58%),
  linear-gradient(180deg,rgba(5,15,26,.84) 0%,rgba(5,15,26,.40) 42%,rgba(5,15,26,.90) 100%)}
/* Over fog, under copy — same compositing as main. Sibling so fog cannot move it. */
.watermark{position:fixed;inset:0;z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center}
/* A masked div, not an <img>: images were winning mobile LCP at 2.5 s for a
   7 %-opacity decoration (audit 2026-09-02, PERF-02). The mask's alpha is the
   shield silhouette; the white fill reproduces the old invert(1). */
.watermark .mark{width:min(62vw,760px);aspect-ratio:285/360;max-height:84vh;background:var(--white);-webkit-mask:url('../img/watermark-shield.webp') center/contain no-repeat;mask:url('../img/watermark-shield.webp') center/contain no-repeat;opacity:var(--mark-opacity);transform:none;animation:none}
.atmosphere::before{content:'';position:absolute;inset:-10%;pointer-events:none;opacity:0;
  background:radial-gradient(50% 45% at 40% 32%,rgba(186,226,255,.1) 0%,rgba(32,160,227,.05) 40%,rgba(8,24,40,0) 68%)}
.atmosphere::after{content:'';position:absolute;inset:-20%;width:140%;height:140%;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px}
@keyframes fogA{0%{transform:translate3d(-6%,-2%,0)}25%{transform:translate3d(5%,-5%,0)}50%{transform:translate3d(7%,3%,0)}75%{transform:translate3d(-4%,5%,0)}100%{transform:translate3d(-6%,-2%,0)}}
@keyframes fogB{0%{transform:translate3d(7%,3%,0)}25%{transform:translate3d(-5%,5%,0)}50%{transform:translate3d(-7%,-2%,0)}75%{transform:translate3d(4%,-5%,0)}100%{transform:translate3d(7%,3%,0)}}

/* frost vignette — present at rest, deepens with scroll (JS drives opacity) */
#frost{position:fixed;inset:-2px;z-index:3;pointer-events:none;opacity:.16;
  box-shadow:inset 0 0 190px 46px var(--frost-glow-outer),inset 0 0 64px 10px var(--frost-glow-inner)}

.page{position:relative;z-index:2}

/* ===== Header — lockup plate: same navy + ice fog as the 2026 wordmark =====
   #0a111a is the lockup ground (sampled), not a new global token. */
.site-head{position:sticky;top:0;z-index:40;margin:0;overflow:visible;background:#0a111a;border-bottom:1px solid var(--hair-22)}
.head-atm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.head-fog{position:absolute;inset:-40%;width:180%;height:180%;object-fit:cover;opacity:.72;animation:fogA var(--head-fog-dur,32s) linear infinite;pointer-events:none;will-change:transform;filter:saturate(1.1)}
.head-fog-b{opacity:.42;mix-blend-mode:screen;animation-name:fogB;animation-duration:var(--fog-dur-b,82s);filter:brightness(1.05) saturate(1.2)}
.head-scrim{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(80% 140% at 18% 50%, rgba(92,192,245,.16) 0%, transparent 58%),
  radial-gradient(90% 120% at 86% 0%, rgba(32,160,227,.12) 0%, transparent 52%),
  linear-gradient(180deg, rgba(14,25,38,.38) 0%, rgba(5,15,26,.62) 100%)}
.head-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px clamp(14px,2vw,48px);padding:4px var(--pad-x);transition:padding .25s ease}
/* Shrink is a transform on the lockup only: the header keeps its layout
   height, so scrolling never shifts the page (audit 2026-09-02, PERF-03). */
.site-head .logo{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.site-head .logo .brand-lockup{position:relative;display:block;line-height:0;transform-origin:left center;transition:transform .25s ease}
.site-head.shrunk .logo .brand-lockup{transform:scale(.8)}
.site-head .logo .brandmark{height:clamp(48px,5vw,72px);width:auto;max-width:min(360px,52vw);display:block;object-fit:contain;object-position:left center}
.site-head .logo .brand-tag{position:absolute;left:19%;right:1%;bottom:9%;margin:0;font-family:var(--cond);font-weight:500;font-size:clamp(7.5px,.62vw,9.5px);letter-spacing:.1em;text-transform:uppercase;color:var(--steel);line-height:1.15;text-align:center;white-space:nowrap;pointer-events:none}
.nav-toggle{display:none;align-items:center;gap:9px;background:transparent;border:1px solid rgba(170,188,204,.45);color:var(--white);font-family:var(--cond);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:11px 16px;min-height:44px;cursor:pointer}
.nav-toggle:hover{border-color:var(--ice);color:var(--ice-hover)}
.nav-toggle .bars{display:flex;flex-direction:column;gap:3px}
.nav-toggle .bars i{display:block;width:16px;height:2px;background:currentColor}
.site-nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:10px clamp(12px,1.7vw,30px);white-space:nowrap;font-family:var(--cond);font-weight:500;font-size:clamp(13.5px,1.35vw,18px);letter-spacing:.13em;text-transform:uppercase}
.site-nav a{position:relative;color:var(--white);padding:10px 2px 8px;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--ice-hover)}
.site-nav a.active{color:var(--ice-hover)}
.site-nav a:not(.btn-cta)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ice);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.js:not(.no-motion) .site-nav a:not(.btn-cta)::after{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.site-nav a:not(.btn-cta):hover::after,.site-nav a:not(.btn-cta):focus-visible::after,.site-nav a.active:not(.btn-cta)::after{transform:scaleX(1)}
.site-nav .btn-cta{background:var(--ice);color:var(--navy);font-weight:700;padding:14px 28px;letter-spacing:.16em;white-space:nowrap;border-bottom:none;display:inline-block}
.site-nav .btn-cta:hover{background:var(--ice-hover);color:var(--navy)}
.site-nav{align-self:stretch}
.nav-item{position:relative;display:flex;align-items:center;align-self:stretch}
.nav-item:hover,.nav-item:focus-within{z-index:5}
/* The item spans the header row, so top:100% is the header's bottom edge
   (plus its 4px padding) — the panel hangs below the bar instead of over it. */
.nav-drop{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:min(320px,80vw);flex-direction:column;align-items:stretch;background:rgba(8,24,40,.94);border:1px solid var(--hair-22);padding:6px 0;z-index:6;white-space:normal}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{display:flex}
/* The 4px visual gap is not a hover gap: a transparent bridge, part of .nav-drop
   and so still inside .nav-item:hover, spans it (usability audit 2026-09-04, U01). */
@media (min-width:861px){.nav-drop::before{content:'';position:absolute;left:0;right:0;top:-5px;height:5px}}
.nav-item.nav-closed .nav-drop{display:none} /* Escape (site.js) holds it shut until pointer/focus leaves */
.nav-drop a{display:flex;align-items:center;padding:10px 16px;min-height:44px;border-bottom:none;letter-spacing:.1em}
.nav-drop a::after{display:none}
.nav-drop a:hover,.nav-drop a:focus-visible{background:rgba(32,160,227,.12);color:var(--ice-hover)}
.progress-track{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(170,188,204,.16);pointer-events:none}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--ice),var(--ice-hover));transition:width .1s linear}
@media (max-width:860px){
  .head-in{flex-wrap:wrap}
  /* Lockup + toggle must fit one row with the fallback font too, or the
     header grows a row until the woff2 lands and the page jumps (PERF-04). */
  .site-head .logo .brandmark{height:48px;max-width:min(220px,56vw)}
  .nav-toggle{min-width:96px;justify-content:center}
  .site-head .logo .brand-tag{font-size:7.5px;letter-spacing:.06em}
  .js .nav-toggle{display:inline-flex}
  .js .site-nav{display:none}
  /* no-JS failsafe (see the .js-live block below): a dead toggle would hide the
     whole nav. 8s without site.js and the toggle goes, the nav returns as its
     no-JS row. */
  .js:not(.js-live) .nav-toggle{animation:jsFailsafeOff 0s linear 8s both}
  .js:not(.js-live) .site-nav{animation:jsFailsafeNav 0s linear 8s both}
  /* nothing readable or clickable behind the open menu, whatever the header
     height (ISSUE-013). Scoped to ≤860px on purpose: .open has no desktop
     presentation and the toggle that clears it is gone above 860px, so the
     rule must never reach the desktop layout (usability audit 2026-09-04, U03). */
  .js body:has(.site-nav.open) .page,.js body:has(.site-nav.open) .site-foot{visibility:hidden}
  /* The open menu is taller than a phone viewport and the header is sticky,
     so the menu scrolls inside itself; without this the last links (About,
     Contact, Book a Call) can never be reached (audit 2026-09-02, MA-1).
     The plate keeps nav text ≥4.5:1 over the header fog (MA-2). */
  .js .site-nav.open{display:flex;width:calc(100% + 2 * var(--pad-x));margin:0 calc(-1 * var(--pad-x));flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:8px;padding:6px var(--pad-x) 14px;white-space:normal;height:calc(100vh - 132px);height:calc(100dvh - 132px);overflow-y:auto;overscroll-behavior:contain;background:rgba(8,24,40,.96);border-top:1px solid var(--hair-16)}
  .js .site-nav.open .nav-item{width:100%;flex-direction:column;align-items:stretch}
  .site-nav a{min-height:44px;display:inline-flex;align-items:center}
  .js .site-nav.open .nav-drop{position:static;display:flex;min-width:0;border:none;background:transparent;padding:0 0 8px 14px}
}

.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}
.js-only{display:none}
.js .js-only{display:block}
.svc-noscript{margin:0 var(--pad-x) clamp(18px,2.4vw,28px);max-width:640px;font-size:14.5px;line-height:1.65;color:var(--body-2)}

/* ===== Buttons ===== */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;white-space:nowrap;font-family:var(--cond);font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.btn-solid{background:var(--ice);color:var(--navy);padding:17px clamp(22px,3vw,36px);display:inline-block}
.btn-solid:hover{background:var(--ice-hover);color:var(--navy)}
.btn-ghost{border:1px solid var(--steel);color:var(--white);padding:17px clamp(22px,3vw,36px);display:inline-block}
.btn-ghost:hover{border-color:var(--ice);color:var(--ice-hover)}
.js:not(.no-motion) .btn-solid,.js:not(.no-motion) .btn-ghost,.js:not(.no-motion) .site-nav .btn-cta,.js:not(.no-motion) .cta-band .btn-navy{transition:transform .18s cubic-bezier(.2,.7,.2,1),background .2s ease,border-color .2s ease,color .2s ease}
.btn-row.small{font-size:13.5px}
.btn-row.small .btn-solid,.btn-row.small .btn-ghost{padding:16px clamp(20px,2.6vw,32px)}

/* ===== Type helpers ===== */
.eyebrow{font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ice-hover);margin:0 0 12px}
.eyebrow-chip{display:inline-block;max-width:100%;font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice-hover);border:1px solid rgba(32,160,227,.45);padding:8px 15px;margin-bottom:clamp(12px,2vw,22px);line-height:1.55;white-space:normal}
.eyebrow-chip a{color:var(--ice-hover)}
.eyebrow-chip a:hover,.eyebrow-chip a:focus-visible{color:var(--ice-hover);text-decoration:underline}
/* Display clamp is fold-intentional: the brand handoff's 8.2vw/104px pushed
   CALL_DEF past a 1440×900 first viewport. These values (display 34px/6.2vw/
   88px, page-h1 30px/5.6vw/78px, section h2 26px/4vw/50px) are the canonical
   scale recorded in CLAUDE §2 since 2026-09-02; the max must not rise. */
.display{margin:0;font-family:var(--saira);font-weight:800;font-size:clamp(34px,6.2vw,88px);line-height:.98;letter-spacing:-.02em;width:100%;max-width:100%;overflow-wrap:anywhere;text-wrap:balance}
.page-h1{margin:0;font-family:var(--saira);font-weight:800;font-size:clamp(30px,5.6vw,78px);line-height:1.05;letter-spacing:-.015em;width:100%;max-width:100%;overflow-wrap:anywhere;text-wrap:balance}
.lead{max-width:640px;font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:var(--body)}
.sub-lead{max-width:620px;font-size:clamp(15px,1.4vw,18px);line-height:1.65;color:var(--body)}
.about-hero{text-align:center}
.about-hero .accent-rule{margin-inline:auto}
.about-hero .sub-lead,
.about-hero .sig-h2,
.about-hero .faq-h2,
.about-hero .detail-sum,
.about-hero .call-def,
.about-hero .nvm-lead,
.about-hero .wait-line,
.about-hero .opp-foot,
.about-hero .nvm-foot,
.about-hero .faq-sub,
.about-hero .wait-cols,
.about-hero .lead,
.about-hero .steps{margin-inline:auto}
.about-hero .btn-row,
.about-hero .field-chips,
.about-hero .detail-head,
.about-hero .sec-head-row,
.about-hero .meta-strip,
.about-hero .crumbs{justify-content:center}
.about-hero .sec-head-row > div{flex:1 1 100%}
.about-hero .sec-head-row .link-fwd{margin-inline:auto}
.about-hero .detail-head{flex-direction:column;align-items:center;gap:clamp(8px,1.2vw,14px)}
.about-hero .detail-head h1{text-align:center}
.about-hero.faq-sec{grid-template-columns:1fr;justify-items:center}
.about-hero.faq-sec .faq-head,
.about-hero.faq-sec .faq{width:min(100%,820px)}
.about-hero.faq-sec .faq{text-align:left;margin-inline:auto}
.hero.about-hero{align-items:center}
.hero.about-hero .hero-inner{width:100%}
.hero.about-hero .lead{margin-block:clamp(14px,2vw,20px) 0;margin-inline:auto}
.hero.about-hero .scroll-cue{justify-content:center}
@media (max-width:860px){
  .hero.about-hero .btn-row{flex-direction:column;align-items:center;white-space:normal;padding-bottom:56px}
}
/* Card interiors stay left so lists remain scannable; only the lockup centers. */
.about-hero .svc-card,
.about-hero .svc-card-home,
.about-hero .mstep,
.about-hero .panel,
.about-hero .contact-panel,
.about-hero .nvm-card,
.about-hero .signal,
.about-hero .dont-grid,
.about-hero .tile-grid,
.about-hero .steps,
.about-hero .step,
.about-hero .opp-foot,
.about-hero .nvm-foot,
.about-hero .wait-cols,
.about-hero .picker,
.about-hero .faq,
.about-hero .legal,
.about-hero .lg-block{text-align:left}
.about-hero .nvm-card .btn-row{justify-content:flex-start}
.about-hero .steps{max-width:820px}

/* accent rule — the brand's 4px signature bar (cinematic: draws in on reveal) */
.accent-rule{height:4px;width:120px;margin:clamp(16px,2.4vw,24px) 0 0;background:linear-gradient(90deg,#20A0E3 0%,#20A0E3 32%,#AABCCC 32%,#AABCCC 44%,#081828 44%);transform-origin:left center}
.js .accent-rule{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s}
.js .accent-rule.drawn,.no-motion .accent-rule{transform:scaleX(1)}

/* ===== Sections ===== */
.section{padding:var(--pad-y) var(--pad-x)}
.bg-a55{background:rgba(8,24,40,.55)}
.bg-a66{background:rgba(8,24,40,.66)}
.bg-b62{background:rgba(11,30,51,.62)}
.bg-b7{background:rgba(11,30,51,.7)}
.bg-b72{background:rgba(11,30,51,.72)}
.bt-hair{border-top:1px solid var(--hair-16)}

/* ===== Hero =====
   First paint must already show the offer. Atmosphere is the fog plate;
   type is never opacity:0 waiting on JS. */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:clamp(24px,3.8vw,48px) var(--pad-x) clamp(20px,3vw,40px)}
@media (min-width:861px){.hero{min-height:min(72vh,680px)}}
.hero-inner{max-width:100%}
.hero .lead{margin-block:clamp(14px,2vw,20px) 0}
.hero .btn-row{margin-top:clamp(16px,2.4vw,26px)}
.hero-ask{margin:clamp(14px,2vw,22px) 0 0}
.hero-chips{margin-top:12px}
.hero-chips a.all-symptoms{color:var(--steel)}
@media (max-width:860px){
  .hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero-chips a{display:flex;align-items:center;text-align:center;justify-content:center;padding:10px 8px;letter-spacing:.08em}
  .hero-chips a:last-child{grid-column:1 / -1}
}
.scroll-cue{margin-top:clamp(20px,3.4vw,36px);display:flex;align-items:center;gap:14px;font-family:var(--cond);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel);transition:opacity .5s ease}
.scroll-cue.gone{opacity:0}
@media (max-width:860px){.scroll-cue{display:none}}
.scroll-cue i{display:inline-block;width:1px;height:34px;background:linear-gradient(180deg,var(--ice),transparent);animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:.9}70%{transform:translateY(10px);opacity:.2}100%{transform:translateY(0);opacity:.9}}

/* Failsafe: if site.js never executes (blocked, failed fetch), the inline head
   script still added .js — so nothing may stay hidden or dead behind .js alone.
   site.js adds .js-live as its first statement, which disarms all of this.
   Until then: reveal content is never CSS-hidden (site.js hides it inline, so a
   dead script hides nothing), and after an 8s
   grace the delayed 0s keyframes return each JS-dependent control to its no-JS
   presentation (usability audit 2026-09-04, U04).
   Why a delay rather than gating on .js-live directly: site.js is deferred, so
   a cold-cache first paint can land before it runs; gating the mobile toggle or
   the picker on .js-live would flash the no-JS layout on every normal load.
   A delayed keyframe costs nothing on a normal load — site.js arrives long
   before 8s and the selector stops matching — and only fires when the script
   really failed. 8s, not less: on a throttled cold mobile load deferred
   site.js can execute after 3s, and a failsafe that fires first would swap
   the header toggle for the nav row and back — a sticky-header layout shift
   counted in CLS (code review 2026-09-08). display is a discrete keyframe property (Chrome 116+, Safari
   17.4+, Firefox 129+); older engines ignore those keyframes and keep today's
   behaviour, never worse. */
@keyframes ruleIn{to{transform:scaleX(1)}}
@keyframes jsFailsafeOff{to{display:none}}
@keyframes jsFailsafeNav{to{display:flex}}
.js:not(.js-live) .accent-rule{animation:ruleIn .9s cubic-bezier(.2,.7,.2,1) 3s both}
.js:not(.js-live) [data-reveal]{opacity:1;transform:none}
.js:not(.js-live) .js-only{animation:jsFailsafeOff 0s linear 8s both}

/* Scroll-reveal transition (PERF-07): site.js toggles .revealing; no el.style.transition */
.js:not(.no-motion) [data-reveal].revealing{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}

/* ===== Differentiator strip ===== */
.diff-strip{display:grid;grid-template-columns:1fr;background:rgba(8,24,40,.6);border-top:1px solid var(--hair-20);border-bottom:1px solid var(--hair-20)}
@media (min-width:861px){.diff-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.diff-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.diff-strip>div{position:relative;padding:clamp(22px,3vw,30px) clamp(20px,2.5vw,40px);border-right:1px solid rgba(170,188,204,.13);text-align:center}
.diff-strip>div:last-child{border-right:none}
.diff-strip>div::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ice);transform:scaleY(0);transform-origin:top center;pointer-events:none}
.js:not(.no-motion) .diff-strip>div::before{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.diff-strip>div:hover::before{transform:scaleY(1)}
.diff-strip .hd{margin:0;font-family:var(--saira);font-weight:700;font-size:16px;color:var(--white)}
.diff-strip span{display:block;font-size:13.5px;color:var(--body-3);margin-top:6px;line-height:1.55}
.diff-strip span a{color:var(--ice-hover)}

/* ===== Home services rows ===== */
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:clamp(28px,4vw,46px)}
.sec-head-row > div{flex:1 1 min(100%,36rem);min-width:0}
.sec-head-row h2{margin:0;font-family:var(--saira);font-weight:800;font-size:clamp(26px,4vw,50px);line-height:1.08;width:100%;max-width:100%;overflow-wrap:anywhere;text-wrap:balance}
.sec-head-row .head-links{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.link-fwd{font-family:var(--cond);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ice-hover);white-space:nowrap}
.link-fwd [aria-hidden]{display:inline-block}
.js:not(.no-motion) .link-fwd [aria-hidden]{transition:transform .2s ease}
.link-fwd:hover [aria-hidden],.link-fwd:focus-visible [aria-hidden]{transform:translateX(4px)}
.btn-row .link-fwd{align-self:center;padding:17px 4px}
.js:not(.no-motion) .svc-row::before{transition:transform .35s cubic-bezier(.2,.7,.2,1)}

/* ===== Industries / How it runs ===== */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;border:1px solid var(--hair-20)}
.tile-grid>*{outline:1px solid var(--hair-20)}
.tile-grid>*{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(8,24,40,.7);padding:20px 22px;font-family:var(--cond);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--white);transition:background .2s ease,color .2s ease}
.tile-grid .tile-lbl{min-width:0;flex:1 1 auto;line-height:1.25;text-wrap:balance}
.tile-grid>a{position:relative}
.tile-grid>a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ice);transform:scaleY(0);transform-origin:top center;pointer-events:none}
.js:not(.no-motion) .tile-grid>a::before{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tile-grid>a:hover::before,.tile-grid>a:focus-visible::before{transform:scaleY(1)}
.tile-grid>a:hover{background:rgba(32,160,227,.14);color:var(--white)}
.tile-grid .go{color:var(--ice);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.tile-grid>a:hover .go,.tile-grid>a:focus-visible .go{opacity:1;transform:none}
.opp-foot{margin:clamp(22px,3vw,32px) 0 0;max-width:760px;padding-left:clamp(14px,2vw,20px);border-left:3px solid var(--ice);font-size:14.5px;line-height:1.7;color:var(--body-2)}
.field-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(14px,2vw,20px)}
.field-chips a{position:relative;display:inline-flex;align-items:center;font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;min-height:44px;border:1px solid rgba(170,188,204,.35);color:var(--body);transition:border-color .2s ease,color .2s ease}
.field-chips a:hover{border-color:var(--ice);color:var(--ice-hover)}
.field-chips a::after{content:'';position:absolute;left:8px;right:8px;bottom:2px;height:3px;background:var(--ice);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.js:not(.no-motion) .field-chips a::after{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.field-chips a:hover::after,.field-chips a:focus-visible::after{transform:scaleX(1)}
.steps{display:flex;flex-direction:column;gap:2px}
.step{display:flex;gap:18px;background:rgba(8,24,40,.6);padding:22px 24px}
.step .n{font-family:var(--saira);font-weight:800;font-size:26px;color:var(--ice);line-height:1}
.step h3{margin:0 0 5px;font-family:var(--saira);font-weight:700;font-size:17px}
.step p{margin:0;font-size:14px;color:var(--body-2);line-height:1.6}

/* ===== Hairline card grids =====
   The lattice is drawn by per-cell outlines meeting in the 2px gap, NOT by a
   painted container background — a background would render orphan grid tracks
   (partial last rows) as bright empty slabs that read as broken cards. */
.grid-2px{display:grid;gap:2px;align-items:stretch}
.grid-2px>*{outline:1px solid var(--hair-16)}
.grid-2px.bordered{border:1px solid var(--hair-16)}
/* The lattice outline above would otherwise replace the global focus ring on
   card links (same specificity, later in the sheet) — WCAG 2.4.7. */
.grid-2px>:focus-visible,.tile-grid>:focus-visible{outline:2px solid var(--ice);outline-offset:3px;z-index:1}
.cols-330{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.cols-400{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.cols-290{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.cols-280{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.cols-260{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.cols-300{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
/* Orphan-row control (audit 2026-09-02, MA-10): explicit column counts where
   auto-fit would strand one cell; prime counts drop the container border so
   the short last row shows per-cell outlines only, never an empty track. */
@media (min-width:1000px){
  .tile-grid.n6{grid-template-columns:repeat(3,1fr)}
  .tile-grid.n10{grid-template-columns:repeat(5,1fr)}
  .grid-2px.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-2px.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:861px) and (max-width:1299px){.grid-2px.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1300px){.grid-2px.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:861px) and (max-width:1499px){.grid-2px.n10{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1500px){.grid-2px.n10{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:861px){.grid-2px.n2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:861px) and (max-width:1299px){.grid-2px.n5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1300px){.grid-2px.n5{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:861px) and (max-width:1299px){
  .grid-2px.n5 > :last-child:nth-child(odd){grid-column:1 / -1;max-width:calc((100% - 2px) / 2);width:100%;margin-inline:auto}
}
@media (min-width:861px){.grid-2px.nvm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid-2px.n5.bordered,.grid-2px.n7.bordered{border:0}

/* ===== Services index cards ===== */
.svc-card{display:flex;flex-direction:column;height:100%;background:rgba(8,24,40,.72);padding:clamp(26px,3vw,36px);color:var(--white);transition:background .2s ease}
.svc-card:hover{background:rgba(32,160,227,.1);color:var(--white)}
.svc-card .n{font-family:var(--cond);font-size:12px;letter-spacing:.2em;color:var(--ice-hover);margin-bottom:14px}
.svc-card .t{margin:0 0 12px;font-family:var(--saira);font-weight:700;font-size:23px}
.svc-card .d{font-size:14.5px;line-height:1.65;color:var(--body-2);margin-bottom:18px}
.svc-card .lbl{font-family:var(--cond);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--body-3);margin:0 0 8px}
.svc-card ul{margin:0;padding:0;list-style:none}
.svc-card ul li{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid rgba(170,188,204,.12);font-size:13.5px;line-height:1.5;color:var(--steel)}
.svc-card ul li::before{content:'\B7';color:var(--ice);flex:0 0 auto}
.svc-card .fwd{margin-top:auto;padding-top:20px;font-family:var(--cond);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ice-hover)}

/* engagement models */

/* ===== Service detail ===== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 clamp(16px,2.2vw,24px);font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.crumbs a{position:relative;color:var(--steel)}
.crumbs a:hover{color:var(--ice-hover)}
.crumbs a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ice);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.js:not(.no-motion) .crumbs a::after{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.crumbs a:hover::after,.crumbs a:focus-visible::after{transform:scaleX(1)}
.crumbs .sep{color:var(--mut-3)}
.crumbs [aria-current="page"]{color:var(--body)}
.detail-head{display:flex;align-items:baseline;gap:clamp(14px,2vw,24px);flex-wrap:wrap}
.detail-head .num{font-family:var(--saira);font-weight:800;font-size:clamp(30px,5vw,58px);color:var(--ice);line-height:1}
.detail-head h1{margin:0;font-family:var(--saira);font-weight:800;font-size:clamp(32px,5.6vw,70px);line-height:1;letter-spacing:-.015em;max-width:880px}
.detail-sum{margin:clamp(18px,2.4vw,28px) 0 0;max-width:680px;font-size:clamp(15px,1.5vw,19px);line-height:1.65;color:var(--body)}
.detail-head-wrap .btn-row{margin-top:clamp(24px,3vw,36px)}
.panel{display:flex;flex-direction:column;height:100%;background:rgba(8,24,40,.74);padding:clamp(24px,3vw,34px)}
.panel.deep{background:rgba(11,30,51,.8)}
.panel .lbl{margin:0 0 16px;font-family:var(--cond);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ice-hover)}
.panel ul{margin:0;padding:0;list-style:none}
.panel ul li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid rgba(170,188,204,.14);font-size:14.5px;line-height:1.55;color:var(--body)}
.panel ul li::before{content:'·';color:var(--ice);flex:0 0 auto}
.panel .f-lbl{font-family:var(--cond);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--body-3);margin-bottom:6px}
.panel .f-val{font-size:14.5px;line-height:1.6;color:var(--white);margin-bottom:18px}
.panel .f-val:last-child{margin-bottom:0}
.method h2{margin:0 auto clamp(24px,3vw,36px);font-family:var(--saira);font-weight:800;font-size:clamp(24px,3.6vw,40px);line-height:1.08;max-width:620px}
.mstep{display:flex;flex-direction:column;height:100%;background:rgba(8,24,40,.72);padding:clamp(24px,3vw,32px);border-top:3px solid transparent;transition:background .25s ease,border-color .25s ease,opacity .25s ease}
.mstep .n{font-family:var(--saira);font-weight:800;font-size:28px;color:var(--ice);line-height:1;margin-bottom:12px}
.mstep h3{margin:0 0 8px;font-family:var(--saira);font-weight:700;font-size:18px}
.mstep p{margin:0;font-size:14px;line-height:1.65;color:var(--body-2)}
.mstep .link-fwd{margin-top:auto;padding-top:16px;align-self:flex-start;min-width:0;max-width:100%;white-space:normal}
.mstep.matched{border-top-color:var(--ice);background:rgba(32,160,227,.14);animation:matchFlash .55s ease}
.mstep.dimmed .n{color:var(--steel)} /* no opacity dim — see .svc-card.dimmed (U05) */
.pn-card{display:flex;flex-direction:column;justify-content:center;height:100%;background:rgba(8,24,40,.72);padding:clamp(22px,3vw,30px);color:var(--white);transition:background .2s ease}
.pn-card:hover{background:rgba(32,160,227,.1);color:var(--white)}
.pn-card.next{text-align:right}
.pn-card .lbl{font-family:var(--cond);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--body-3);margin-bottom:10px}
.pn-card .t{font-family:var(--saira);font-weight:700;font-size:19px;line-height:1.2}

/* ===== "What we don't do" (services index) ===== */
.dont-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.dont-grid>div{border:1px solid var(--hair-25);padding:20px 22px;font-size:14px;line-height:1.6;color:var(--body-2)}

/* ===== Contact ===== */
.contact-panel{display:flex;flex-direction:column;height:100%;background:rgba(8,24,40,.72);padding:clamp(26px,3vw,36px)}
.contact-panel .lbl{margin:0 0 14px;font-family:var(--cond);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ice-hover)}
.contact-panel .direct{display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.5}
.contact-panel .direct .book{color:var(--white);font-family:var(--saira);font-weight:700;font-size:22px}
.contact-panel .direct .mail{color:var(--body);word-break:break-word}
.contact-panel ul{margin:0;padding:0;list-style:none}
.contact-panel ul li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid rgba(170,188,204,.14);font-size:14px;line-height:1.55;color:var(--body)}
.contact-panel ul li::before{content:'\B7';color:var(--ice);flex:0 0 auto}
.contact-panel .resp{font-size:14px;line-height:1.75;color:var(--steel)}

/* Inline links inside running prose need more than colour to be identifiable
   (WCAG 1.4.1). Nav, buttons, cards and chips are excluded — they are already
   distinguishable by position and shape. */
.lg-block a,.picker-answer a,.diff-strip span a,.contact-panel .resp a,
.contact-panel .conf a,.opp-foot a,.faq .a a,.faq-head .faq-sub a,.nvm-foot a,
.post-body a,.call-def a,#about .nvm-card p a{color:var(--ice-hover);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

/* ===== Legal / trust pages ===== */
.legal{max-width:760px;margin-inline:auto}
.lg-block{padding:clamp(22px,3vw,30px) 0;border-top:1px solid var(--hair-20)}
.lg-block:first-child{border-top:none;padding-top:0}
.lg-block h2{margin:0 0 12px;font-family:var(--saira);font-weight:700;font-size:clamp(19px,2.2vw,24px);line-height:1.2}
.lg-block p{margin:0 0 12px;font-size:15.5px;line-height:1.75;color:var(--body)}
.lg-block p:last-child{margin-bottom:0}
.lg-block ul{margin:0 0 12px;padding:0;list-style:none}
.lg-block ul li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(170,188,204,.14);font-size:15px;line-height:1.65;color:var(--body)}
.lg-block ul li::before{content:'\B7';color:var(--ice);flex:0 0 auto}
.lg-block ul li b{color:var(--white);font-weight:600}
.contact-panel .conf{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(170,188,204,.14);font-size:13px;line-height:1.6;color:var(--steel)}

/* ===== CTA band ===== */
.cta-band{position:relative;padding:clamp(48px,7vw,88px) var(--pad-x);background:var(--ice);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(24px,4vw,36px)}
.cta-band::after{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:55%;
  background:linear-gradient(105deg,transparent,rgba(245,247,250,.0) 36%,rgba(245,247,250,.22) 50%,rgba(245,247,250,.0) 64%,transparent);
  transform:translateX(-180%) skewX(-10deg);pointer-events:none}
.cta-band:hover::after{transform:translateX(300%) skewX(-10deg);transition:transform 1s ease}
.cta-band > div{display:flex;flex-direction:column;align-items:center}
.cta-band h2{margin:0;font-family:var(--saira);font-weight:800;font-size:clamp(26px,4vw,44px);line-height:1.06;max-width:680px}
.cta-band .sub{margin-top:14px;font-size:clamp(15px,1.4vw,17px);color:var(--navy)}
.cta-band .sub a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.cta-band .sub a:hover{color:var(--navy-mid)}
.cta-band .btn-navy{display:inline-block;background:var(--navy);color:var(--white);font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.18em;text-transform:uppercase;padding:20px clamp(26px,3vw,42px);white-space:nowrap}
.cta-band .btn-navy:hover{background:var(--navy-mid);color:var(--ice)}
.cta-band a:focus-visible{outline-color:var(--navy)}

.call-def{margin:clamp(12px,1.6vw,16px) 0 0;max-width:520px;font-size:14px;line-height:1.6;color:var(--body-2)}
.cta-band .call-def-band{margin-top:10px;font-size:14px;line-height:1.6;max-width:560px;opacity:.9}

/* ===== Footer ===== */
.site-foot{position:relative;z-index:2;background:rgba(5,15,26,.9);padding:clamp(40px,5vw,56px) var(--pad-x) clamp(20px,3vw,28px);display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(28px,5vw,56px);flex-wrap:wrap;border-top:1px solid rgba(170,188,204,.14)}
.site-foot .logo img{height:clamp(34px,4.3vw,52px);width:auto;display:block;margin-bottom:18px}
.site-foot .tag{font-size:13.5px;color:var(--body-3);line-height:1.75;max-width:340px}
.foot-cols{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);font-size:14px}
.foot-cols .col{display:flex;flex-direction:column;gap:9px}
.foot-cols .hd{font-family:var(--cond);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-1);margin-bottom:3px}
.foot-cols a{position:relative;color:var(--body);padding:3px 0}
.foot-cols a:hover{color:var(--ice-hover)}
.foot-cols a::after{content:'';position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--ice);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.js:not(.no-motion) .foot-cols a::after{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.foot-cols a:hover::after,.foot-cols a:focus-visible::after{transform:scaleX(1)}
.foot-cols a.site{color:var(--ice)}
.foot-cols .mail{word-break:break-word}
.foot-how{width:100%;padding-top:clamp(20px,3vw,26px);margin-top:clamp(8px,1.5vw,14px);border-top:1px solid rgba(170,188,204,.12)}
.foot-how .hd{font-family:var(--cond);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ice-hover);margin-bottom:8px}
.foot-how p{margin:0;max-width:820px;font-size:13px;line-height:1.7;color:var(--body-3)}
.foot-bar{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;padding-top:clamp(20px,3vw,28px);padding-bottom:64px;border-top:1px solid rgba(170,188,204,.12);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut-1);font-family:var(--cond)}
.foot-legal{display:flex;gap:20px}
.foot-legal a{color:var(--steel)}
.foot-legal a:hover{color:var(--ice-hover)}

/* ===== 404 ===== */

/* ===== Cross-page fade (View Transitions API). Scan-wipe was tried and
   pulled the pause/reload path into a clip-path zoom — keep the original fade. ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .34s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ===== Meta strip (services head, post meta) =====
   These sit directly over the drifting fog with no panel behind them, so they
   use --steel / --ice-hover rather than the muted tokens: the fog's bright
   patches would otherwise pull the muted colors below 4.5:1. */
.meta-strip{display:flex;flex-wrap:wrap;gap:10px clamp(18px,3vw,34px);margin-top:clamp(22px,3vw,34px);font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.meta-strip .sep{color:var(--mut-3)}
.meta-strip .cat{color:var(--ice-hover)}
.meta-strip.post-meta{margin:0 0 clamp(16px,2vw,22px)}

/* ===== Symptom picker (services index) ===== */
.picker{background:rgba(11,30,51,.74);border:1px solid var(--hair-20);border-top:3px solid var(--ice);padding:clamp(24px,3.2vw,38px)}
.picker-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:clamp(18px,2.4vw,26px)}
.picker-head h2{margin:0;font-family:var(--saira);font-weight:800;font-size:clamp(22px,3.2vw,34px);line-height:1.1;max-width:640px}
.picker-clear{font-family:var(--cond);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 16px;min-height:44px;cursor:pointer;background:transparent;border:1px solid rgba(170,188,204,.35);color:var(--body-3);transition:border-color .2s ease,color .2s ease}
.picker-clear:hover{border-color:var(--ice);color:var(--ice-hover)}
.picker-clear:disabled{opacity:.35;pointer-events:none}
.picker-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip-btn{font-family:var(--cond);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:11px 16px;min-height:44px;cursor:pointer;background:transparent;border:1px solid rgba(170,188,204,.35);color:var(--body);transition:border-color .2s ease,color .2s ease,background .2s ease;text-align:left;line-height:1.3}
.chip-btn:hover{border-color:var(--ice);color:var(--white)}
.chip-btn[aria-pressed="true"]{border-color:var(--ice);background:var(--ice);color:var(--navy);font-weight:700;animation:chipLock .45s cubic-bezier(.2,.7,.2,1)}
@keyframes chipLock{0%{transform:scale(.97)}100%{transform:none}}
@media (max-width:560px){.chip-btn{font-size:11.5px;padding:8px 12px;letter-spacing:.06em}}
.picker-answer{margin-top:clamp(18px,2.4vw,26px);padding-top:clamp(16px,2vw,22px);border-top:1px solid rgba(170,188,204,.18);font-size:14.5px;line-height:1.6;color:var(--white)}
.picker-answer.muted{color:var(--mut-1)}

/* card match states driven by the picker */
.svc-card{border-top:3px solid transparent;transition:background .25s ease,border-color .25s ease,opacity .25s ease}
.svc-card .card-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.svc-card .card-top .n{margin:0}
.svc-card .match-badge{display:none;font-family:var(--cond);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);background:var(--ice);padding:5px 10px}
.svc-card.matched{border-top-color:var(--ice);background:rgba(32,160,227,.14);animation:matchFlash .55s ease}
.svc-card.matched .match-badge{display:inline-block}
/* Unmatched cards must not fade: opacity dimmed their body text below 4.5:1 while
   they stayed live links (usability audit 2026-09-04, U05). The copy keeps full
   contrast; only the ice accents go quiet (--steel is sanctioned microcopy over fog). */
.svc-card.dimmed .n,.svc-card.dimmed ul li::before,.svc-card.dimmed .fwd{color:var(--steel)}
/* the match owns the lattice line as well as the top bar and badge; the
   :focus-visible ring is the same ice, so a focused match loses nothing */
.grid-2px>.matched{outline-color:var(--ice)}
@keyframes matchFlash{from{background:rgba(32,160,227,.28)}to{background:rgba(32,160,227,.14)}}

/* ghost numerals (home + services cards) */
.ghost{position:absolute;right:-8px;bottom:-26px;font-family:var(--saira);font-weight:800;font-size:130px;line-height:1;color:var(--white);opacity:.035;pointer-events:none}
.js .svc-card .ghost,.js .svc-card-home .ghost{transform:translateY(18px);transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .2s}
.js .svc-card.in .ghost,.js .svc-card-home.in .ghost{transform:none}
.svc-card{position:relative;overflow:hidden}
.svc-card > *{position:relative}
.svc-card > .ghost{position:absolute}

/* ===== Home service cards (v2.1: rows -> cards) ===== */
.cols-320{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.svc-card-home{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;background:rgba(8,24,40,.7);padding:clamp(30px,3.4vw,40px) clamp(26px,3vw,34px);color:var(--white);transition:background .22s ease}
.svc-card-home:hover{background:rgba(15,41,66,.9);color:var(--white)}
.svc-card-home > *{position:relative}
.svc-card-home .ghost{position:absolute;right:-6px;bottom:-24px;font-size:120px;opacity:.03}
.svc-card-home .n{display:block;font-family:var(--cond);font-weight:500;font-size:12.5px;letter-spacing:.2em;color:var(--ice-hover);margin-bottom:16px}
.svc-card-home .t{margin:0 0 12px;font-family:var(--saira);font-weight:700;font-size:clamp(21px,2.1vw,25px);line-height:1.2}
.svc-card-home .d{display:block;font-size:15.5px;line-height:1.7;color:var(--body-2)}
.svc-card-home .called{display:block;margin-top:16px;font-size:14px;line-height:1.55;color:var(--body)}
.svc-card-home .lbl{font-family:var(--cond);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--body-3);margin:18px 0 8px}
.svc-card-home ul{margin:0;padding:0;list-style:none}
.svc-card-home ul li{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid rgba(170,188,204,.12);font-size:13.5px;line-height:1.5;color:var(--steel)}
.svc-card-home ul li::before{content:'\B7';color:var(--ice);flex:0 0 auto}
.svc-card-home .fwd{display:block;margin-top:auto;padding-top:22px;font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ice-hover)}

/* ===== Blog: home teasers ===== */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px}
.post-card{display:block;position:relative;overflow:hidden;border:1px solid var(--hair-22);padding:28px 26px;color:var(--white);transition:border-color .2s ease,transform .2s ease}
.post-card:hover{border-color:var(--ice);transform:translateY(-3px);color:var(--white)}
.post-card .meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--cond);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--body-3);margin-bottom:12px}
.post-card .meta .cat{color:var(--ice-hover)}
.post-card .meta .sep{color:var(--mut-3)}
.post-card .t{margin:0 0 10px;font-family:var(--saira);font-weight:700;font-size:20px;line-height:1.22}
.post-card .x{display:block;font-size:14px;line-height:1.6;color:var(--body-3)}

/* ===== Blog index ===== */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,34px)}
.js .blog-filters{display:flex}
.chip-btn.filter{font-size:12.5px;letter-spacing:.16em;white-space:nowrap;padding:10px 18px;text-align:center}
.post-rows{display:flex;flex-direction:column;border-top:1px solid var(--hair-22)}
.post-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;gap:clamp(14px,3vw,40px);align-items:baseline;padding:clamp(22px,2.8vw,32px) clamp(6px,1vw,14px);border-bottom:1px solid var(--hair-22);color:var(--white);transition:background .2s ease,padding-left .2s ease}
.post-row:hover{background:rgba(32,160,227,.09);padding-left:26px;color:var(--white)}
.post-row.hidden{display:none}
.post-row .pmeta{font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;line-height:1.9}
.post-row .pmeta .cat{display:block;color:var(--ice-hover)}
.post-row .t{margin:0 0 8px;font-family:var(--saira);font-weight:700;font-size:clamp(19px,2.2vw,26px);line-height:1.18}
.post-row .x{display:block;font-size:14.5px;line-height:1.6;color:var(--body-2);max-width:640px}
.post-row .prt{align-self:center;font-family:var(--cond);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);white-space:nowrap}
@media (max-width:560px){.post-row{grid-template-columns:1fr;gap:8px}.post-row .prt{align-self:start}}

/* ===== Blog post page ===== */
.post-h1{margin:0;font-family:var(--saira);font-weight:800;font-size:clamp(30px,5.2vw,64px);line-height:1.02;letter-spacing:-.015em;max-width:900px}
.post-lead{margin:clamp(18px,2.4vw,26px) 0 0;max-width:680px;font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:var(--body)}
.post-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(28px,4vw,56px);align-items:start;max-width:1400px}
.post-body{max-width:720px}
.post-body p{font-size:clamp(15px,1.5vw,17px);line-height:1.75;color:var(--body);margin:0 0 16px}
.post-body h2{font-family:var(--saira);font-weight:700;font-size:clamp(19px,2.2vw,26px);line-height:1.2;color:var(--white);margin:clamp(28px,3.4vw,40px) 0 12px}
.takeaways{background:rgba(11,30,51,.76);border:1px solid var(--hair-20);border-top:3px solid var(--ice);padding:clamp(24px,3vw,32px);position:sticky;top:120px}
.takeaways .lbl{margin:0 0 14px;font-family:var(--cond);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ice-hover)}
.takeaways ul{margin:0;padding:0;list-style:none}
.takeaways ul li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid rgba(170,188,204,.14);font-size:14px;line-height:1.55;color:var(--body)}
.takeaways ul li::before{content:'\B7';color:var(--ice);flex:0 0 auto}
.takeaways .rel-lead{margin-top:22px;font-size:13.5px;line-height:1.65;color:var(--body-3)}
.takeaways .rel-link{display:inline-block;margin-top:14px;font-family:var(--cond);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ice-hover)}

/* ===== "Now, or maybe" — the hire-now vs train-for-maybe argument ===== */
.nvm-lead{max-width:680px;margin:0 0 clamp(26px,3.4vw,38px);font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:var(--body)}
h2.nvm-lead{font-family:var(--plex);font-weight:400}
#about .nvm-lead{margin-inline:auto;text-align:center}
#about > .grid-2px:not(.equal-cards){max-width:52rem;margin-inline:auto}
#about .nvm-card .k{font-size:clamp(16px,1.6vw,20px);letter-spacing:.14em}
#about .nvm-foot{margin-inline:auto}
#about > .eyebrow{text-align:center}
#about .dont-grid{margin-inline:auto}
#about .btn-row{justify-content:center}
.nvm-grid{margin-bottom:clamp(24px,3vw,34px)}
.nvm-card{position:relative;display:flex;flex-direction:column;height:100%;background:rgba(8,24,40,.72);padding:clamp(26px,3vw,36px);border-top:3px solid transparent}
.nvm-card.pick{background:rgba(11,30,51,.82);border-top:3px solid var(--ice)}
@media (min-width:861px){.equal-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.equal-cards{grid-template-columns:1fr}}
/* About seat + Now-or-maybe: beat .cols-* auto-fit so three cards stay one
   row from the site 861px desktop cut, not only from the 1000px n3 cut.
   The four "What we will not do" cells use the same cut so they do not
   wrap 3+1 inside the old 52rem cap. */
@media (min-width:861px){
  .grid-2px.equal-cards,
  .nvm .nvm-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  #about .dont-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
}
@media (max-width:860px){
  .grid-2px.equal-cards,
  .nvm .nvm-grid,
  #about .dont-grid{grid-template-columns:1fr}
}
.equal-cards .nvm-card,
.equal-cards .nvm-card.pick{
  background:rgba(11,30,51,.82);
  border-top:none;
}
.equal-cards .nvm-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--ice);pointer-events:none;z-index:1;
}
.equal-cards .nvm-card .k,.equal-cards .nvm-card.pick .k{color:var(--ice-hover)}
.equal-cards .nvm-card p,.equal-cards .nvm-card.pick p{color:var(--body)}
.equal-cards .nvm-card::after,
.equal-cards .nvm-card:hover::after{display:none}
.nvm-card .k{margin:0 0 14px;font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.nvm-card.pick .k{color:var(--ice-hover)}
.nvm-card p{margin:0;font-size:15px;line-height:1.72;color:var(--body-2)}
.nvm-card p + p{margin-top:14px}
.nvm-card.pick p{color:var(--body)}
.nvm-card .btn-row{margin-top:auto;padding-top:20px}
.nvm-card .call-def{max-width:none}
.nvm-foot{margin:0;max-width:760px;padding-left:clamp(14px,2vw,20px);border-left:3px solid var(--ice);font-size:clamp(15px,1.5vw,18px);line-height:1.65;color:var(--white)}

/* service-detail variant: one plant-specific cost-of-waiting argument */
.nvm-svc{border-left:3px solid var(--ice);background:rgba(11,30,51,.6)}
.nvm-svc .nvm-grid{margin-top:clamp(8px,1.2vw,14px)}
.wait-line{margin:0 0 clamp(20px,2.6vw,30px);width:100%;max-width:100%;font-family:var(--saira);font-weight:800;font-size:clamp(24px,3.6vw,42px);line-height:1.1;letter-spacing:-.01em;color:var(--white);overflow-wrap:anywhere;text-wrap:balance}
.wait-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(20px,3vw,44px);max-width:1100px;margin-inline:auto}
.wait-cols p{margin:0;font-size:clamp(14.5px,1.45vw,17px);line-height:1.75;color:var(--body)}

/* ===== Outcome signals (service detail) ===== */
.sig-h2,.faq-h2{margin:0;font-family:var(--saira);font-weight:800;font-size:clamp(24px,3.6vw,40px);line-height:1.08;max-width:620px}
.signal{display:flex;flex-direction:column;height:100%;background:rgba(8,24,40,.72);padding:clamp(24px,3vw,32px)}
.signal .n{font-family:var(--saira);font-weight:800;font-size:26px;color:var(--ice);line-height:1;margin-bottom:12px}
.signal p{margin:0;font-size:14.5px;line-height:1.7;color:var(--body)}

/* ===== FAQ (native <details>, works without JS) ===== */
.faq-sec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(22px,4vw,64px);align-items:start}
.faq-head .faq-sub{margin:clamp(16px,2vw,22px) 0 0;max-width:340px;font-size:14.5px;line-height:1.7;color:var(--body-2)}
.faq{max-width:820px}
.faq details{position:relative;border-bottom:1px solid var(--hair-22)}
.faq details:first-child{border-top:1px solid var(--hair-22)}
.faq details::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ice);transform:scaleY(0);transform-origin:top center;pointer-events:none}
.js:not(.no-motion) .faq details::before{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.faq details:hover::before,.faq details[open]::before{transform:scaleY(1)}
.faq summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:24px;cursor:pointer;padding:clamp(18px,2.2vw,24px) 2px;font-family:var(--saira);font-weight:700;font-size:clamp(16px,1.7vw,20px);line-height:1.3;color:var(--white)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--saira);font-weight:700;font-size:24px;line-height:1;color:var(--ice);flex:0 0 auto}
.faq details[open] summary::after{content:'\2212'}
.faq summary:hover{color:var(--ice-hover)}
.faq .a{padding:0 2px clamp(18px,2.2vw,26px);max-width:760px}
.faq details[open] .a{animation:faqOpen .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq .a p{margin:0;font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.75;color:var(--body)}

/* ice-glint sweep on card / panel hover */
.svc-card::after,.svc-card-home::after,.post-card::after,
.nvm-card::after,.mstep::after,.panel::after,.contact-panel::after,.pn-card::after{content:'';position:absolute;top:-10%;bottom:-10%;left:0;width:55%;
  background:linear-gradient(105deg,transparent,rgba(180,225,255,.06) 42%,rgba(200,235,255,.13) 50%,rgba(180,225,255,.06) 58%,transparent);
  transform:translateX(-180%) skewX(-10deg);pointer-events:none}
.svc-card:hover::after,.svc-card-home:hover::after,.post-card:hover::after,
.nvm-card:hover::after,.mstep:hover::after,.panel:hover::after,.contact-panel:hover::after,.pn-card:hover::after{transform:translateX(300%) skewX(-10deg);transition:transform .8s ease}
.nvm-card,.mstep,.panel,.contact-panel,.pn-card{position:relative}
.no-motion .svc-card::after,.no-motion .svc-card-home::after,.no-motion .post-card::after,
.no-motion .nvm-card::after,.no-motion .mstep::after,.no-motion .panel::after,.no-motion .contact-panel::after,.no-motion .pn-card::after,
.no-motion .cta-band::after,.no-motion .field-chips a::after{display:none}

/* OS reduced-motion class kill — site.js adds .no-motion when the visitor's
   OS asks for reduced motion. The media query below is the CSS-only path. */
.no-motion *{animation:none!important;transition:none!important}
.no-motion .atmosphere::before,.no-motion .atmosphere::after{animation:none!important}
html.no-motion::view-transition-group(*),html.no-motion::view-transition-old(*),html.no-motion::view-transition-new(*){animation:none!important}
.no-motion [data-reveal]{opacity:1!important;transform:none!important}
.no-motion .svc-card .ghost,.no-motion .svc-card-home .ghost{transform:none!important}

/* Reduced motion: stop fog and UI chrome. There is no on-page Play override. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .atmosphere::before,.atmosphere::after{animation:none!important}
  html::view-transition-group(*),html::view-transition-old(*),html::view-transition-new(*){animation:none!important}
  .js .accent-rule{opacity:1;transform:none}
  .js .svc-card .ghost,.js .svc-card-home .ghost{transform:none}
  /* the no-JS failsafes are 0s state switches, not motion: re-arm them over the kill above */
  html.js:not(.js-live) .js-only{animation:jsFailsafeOff 0s linear 8s both!important}
}
@media (prefers-reduced-motion:reduce) and (max-width:860px){
  html.js:not(.js-live) .nav-toggle{animation:jsFailsafeOff 0s linear 8s both!important}
  html.js:not(.js-live) .site-nav{animation:jsFailsafeNav 0s linear 8s both!important}
}

/* Windows High Contrast / forced-colors: drop atmosphere paint, keep hairlines */
@media (forced-colors: active){
  .atmosphere,.watermark,#frost,.head-fog,.atmosphere::after{display:none}
  .site-head,.chip-btn,.nav-toggle,.btn-solid,.btn-ghost,.btn-navy,.btn-cta,.svc-card,.svc-card-home,.panel,.nvm-card,.mstep,.signal,.pn-card,.step,.contact-panel,.tile-grid>a,.picker-clear,.cta-band,.field-chips a,.picker,.nav-drop{
    border:1px solid CanvasText;
  }
  .chip-btn[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .svc-card.matched,.mstep.matched{outline:3px solid Highlight}
}

/* ===== Print: drop the atmosphere, print black on white ===== */
@media print{
  .atmosphere,.watermark,#frost,.head-atm,.progress-track,.nav-toggle,.site-nav,.scroll-cue,.skip-link{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .site-head{position:static;background:#fff!important;border-bottom:1px solid #000;backdrop-filter:none;-webkit-backdrop-filter:none}
  *{background:transparent!important;color:#000!important;outline-color:#888!important;border-color:#888!important;text-shadow:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
  [data-reveal]{opacity:1!important;transform:none!important}
  /* a menu left open on a phone must not print a blank page (U03) */
  .page,.site-foot{visibility:visible!important}
  .cta-band{border:1px solid #888}
}