@import url('chrome.css?v=1c873b5f55');   /* SINGLE SOURCE for header, mobile nav, footer, chrome tokens (shared with the homepage) */
/* =============================================================================
   NextGen — shared interior design system (staging)
   Interior page styles ONLY (hero atmosphere, sections, panels, cards, buttons,
   waves, closing). The header / mobile nav / footer / chrome tokens live in
   chrome.css and are imported above so a chrome correction reaches the homepage
   and every interior page at once.
   ============================================================================= */
:root{
  --navy-exec:#001B5A; --navy-deep:#001340; --perf-blue:#2563EB; --blue-soft:#8fb0ff;
  --silver:#C0C6D0; --silver-dim:#8b93a3; --light:#F2F4F7; --slate:#183650;
  --h1:clamp(40px,3.3vw,52px);            /* interior hero — subordinate to the homepage hero (57px) */
  --h-sec:clamp(28px,2.5vw,42px);         /* section headings */
  --h-stage:clamp(24px,2.25vw,37px);      /* stage / sub headings */
  --h-close:clamp(27px,2.65vw,44px);      /* closing */
  --sub:clamp(16px,1.1vw,19px); --body:clamp(16px,1.12vw,20px);
  --eyb:clamp(12px,.84vw,15px); --label:clamp(13px,1.0vw,18px); --kick:clamp(11.5px,.8vw,14px);
  --maxw:1280px; --gutter:clamp(22px,4.2vw,76px); --headclear:clamp(96px,11vh,128px);
  /* shared interior-hero TOP clearance: clears the absolute header (--headclear) + deliberate
     breathing room below it, so every interior hero inherits consistent header clearance */
  --ihero-top:calc(var(--headclear) + clamp(52px,7vh,88px));
  --pad:clamp(48px,5vw,190px); --navx:6px;
  /* supporting atmospheric tones (rgb triples, for rgba() glows over the base navy) — NOT section fills */
  --atmos-slate:24,54,80;   /* #183650 */
  --atmos-steel:40,75,101;  /* #284B65 */
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --glass-text:#e7eefb;
  --lg-bg:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.06) 38%, rgba(0,27,90,.12) 72%, rgba(0,19,64,.20));
  --lg-border:rgba(255,255,255,.28); --lg-highlight:rgba(255,255,255,.5); --lg-shadow:0 12px 38px rgba(0,10,30,.26);
  --lg-blur:blur(18px) saturate(135%); --lg-radius:999px; --lg-transition:200ms cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--navy-deep)}
body{font-family:var(--font);background:transparent;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
/* Shared composed navy ATMOSPHERE — a FIXED stage behind all interior content, so the continuous
   navy is never flat/dead: chapters scroll OVER a stable, composed surface (the frozen homepage's
   viewport-framed feel, achieved without pinning reading content). This replaces the per-section
   clipped radials (which left hard glow edges at section boundaries). Light sections paint opaque
   over it; the footer keeps its own solid navy. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(58% 44% at 84% 4%, rgba(var(--atmos-steel),.55), rgba(var(--atmos-steel),0) 60%),
  radial-gradient(54% 46% at 2% 30%, rgba(var(--atmos-slate),.42), rgba(var(--atmos-slate),0) 64%),
  radial-gradient(70% 42% at 56% 104%, rgba(37,99,235,.16), rgba(37,99,235,0) 60%)}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy-deep);padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:12px;top:12px}
/* header / mobile nav / footer live in chrome.css (imported at top) */

/* ---------- buttons (glass, from homepage) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:clamp(14px,1.2vw,20px);min-height:54px;padding:0 clamp(26px,1.9vw,34px);border-radius:var(--lg-radius);font-family:inherit;font-weight:600;font-size:clamp(15px,1.05vw,18px);letter-spacing:.02em;text-decoration:none;cursor:pointer;color:#fff;background:linear-gradient(135deg,rgba(0,27,90,.60),rgba(0,19,64,.82) 55%,rgba(0,15,52,.90));border:1px solid rgba(47,107,255,.55);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 22px rgba(0,10,40,.30),0 18px 50px rgba(0,19,64,.42);overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(140,175,255,.26),rgba(140,175,255,0) 46%)}
.btn>*{position:relative;z-index:1}
.btn .arw{display:inline-flex;align-items:center;line-height:1;font-size:1.4em;font-weight:800;color:#8fb0ff;transition:transform var(--lg-transition),color var(--lg-transition)}
.btn:hover .arw{transform:translateX(8px);color:#fff}
.btn:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px}
.btn--light{background:#fff;border-color:rgba(0,27,90,.12);color:var(--navy-deep);box-shadow:0 12px 30px -12px rgba(0,10,40,.4)}
.btn--light .arw{color:var(--perf-blue)}
.btn--light:hover .arw{color:var(--navy-deep)}
/* quiet secondary text link */
.tlink{display:inline-flex;align-items:center;gap:.5em;color:var(--blue-soft);text-decoration:none;font-size:var(--label);font-weight:600;border-bottom:1px solid rgba(143,176,255,.4);padding-bottom:3px;transition:color var(--lg-transition)}
.tlink:hover{color:#fff}
.tlink:focus-visible{outline:2px solid var(--perf-blue);outline-offset:3px;border-radius:3px}
.sec--light .tlink{color:var(--perf-blue);border-color:rgba(37,99,235,.4)}
.sec--light .tlink:hover{color:var(--navy-deep)}

/* ---------- interior hero (navy atmosphere; header floats over it) ---------- */
/* Hero is transparent — it sits on the shared fixed atmosphere (no per-hero clipped glow that would
   leave a hard edge at the hero's bottom). overflow:hidden retained for the split portrait image. */
.ihero{position:relative;overflow:hidden;background:transparent;color:#fff}
.ihero .wrap{position:relative;z-index:2;padding-top:var(--ihero-top, calc(clamp(96px,11vh,128px) + clamp(52px,7vh,88px)));padding-bottom:clamp(38px,5vh,64px)}
/* smaller header clearance on phones / short viewports (avoid an over-tall interior hero) */
@media (max-width:820px){ :root{--ihero-top:calc(var(--headclear) + clamp(22px,4.5vh,44px))} }
.ihero--split .ihero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,60px);align-items:center}
.ihero-content{max-width:56ch;min-width:0}
.breadcrumb{font-size:var(--kick);color:var(--silver);letter-spacing:.02em;margin-bottom:16px}
.breadcrumb a{color:var(--silver);text-decoration:none}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{opacity:.5;margin:0 8px}
.eyebrow{font-size:var(--eyb);letter-spacing:.28em;text-transform:uppercase;color:var(--perf-blue);font-weight:700}
.ihero .eyebrow{color:#7fa8e6}
h1,.h1{font-size:var(--h1);line-height:1.06;font-weight:800;letter-spacing:-.02em;color:#fff;margin:.28em 0 0}
.h1 .lt,h1 .lt{color:var(--blue-soft)}
.ihero-sub{font-size:var(--sub);line-height:1.55;color:#dbe4f2;margin:clamp(16px,1.8vh,24px) 0 0;max-width:52ch}
.ihero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vh,40px)}

/* ---------- sections ----------
   Dark sections are TRANSPARENT so the body's single continuous navy shows through
   every neighbouring dark section — no rectangular navy-to-navy seams. Depth comes
   from feathered radial illumination (rgba → 0 before the edges), never an opaque
   fill or a gradient that restarts at a boundary. Only .sec--light paints. */
.sec{position:relative;background:transparent;color:#fff}
/* Tightened inter-chapter rhythm: the gap between chapters is a SHORT composed breath on the fixed
   atmosphere, not a cavernous dead band — while keeping ample intra-chapter reading space. */
.sec>.wrap{padding-top:clamp(40px,5.4vh,80px);padding-bottom:clamp(40px,5.4vh,80px);position:relative;z-index:1}
/* navy2 no longer paints its own clipped radial — the shared fixed atmosphere composes every dark
   chapter uniformly (kept as a hook for any future per-section accent). */
.sec--navy2{background:transparent}
.sec--light{background:var(--light);color:var(--navy-deep);overflow:hidden}
.sec-head{max-width:60ch}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
h2,.h2{font-size:var(--h-sec);line-height:1.14;font-weight:700;letter-spacing:-.02em;color:#fff;margin:.32em 0 0}
.sec--light h2,.sec--light .h2{color:var(--navy-deep)}
.h2 .lt,h2 .lt{color:var(--blue-soft)}
.sec--light .h2 .lt,.sec--light h2 .lt{color:var(--perf-blue)}
h3{font-size:var(--h-stage);line-height:1.16;font-weight:700;letter-spacing:-.015em;color:#fff}
.sec--light h3{color:var(--navy-deep)}
.lead{font-size:var(--body);line-height:1.55;color:#c9d3e6;margin-top:clamp(14px,1.6vw,22px);max-width:64ch}
.sec--light .lead{color:#48546b}
.prose{max-width:70ch}
.prose p{font-size:var(--sub);line-height:1.65;color:#c9d3e6;margin-top:1em}
.sec--light .prose p{color:#41506a}

/* pale report surface (from Clarity / Solutions panels) */
.panel{background:var(--light);color:var(--navy-deep);border-radius:16px;padding:clamp(24px,2.6vw,40px)}
.panel--navy{background:linear-gradient(180deg,rgba(18,36,70,.6),rgba(12,26,52,.6));color:#fff;border:1px solid rgba(120,150,205,.18)}
.panel .p-eyb{font-size:var(--kick);letter-spacing:.2em;text-transform:uppercase;color:var(--perf-blue);font-weight:700}
.panel h3{color:var(--navy-deep)}
.panel .p-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(0,27,90,.1)}
.panel .p-row:first-of-type{border-top:0}
.panel .p-row .k{flex:0 0 42%;font-weight:600;color:var(--navy-deep);font-size:var(--label)}
.panel .p-row .v{flex:1;color:#41506a;font-size:var(--label);line-height:1.5}

/* grids + cards */
.grid{display:grid;gap:clamp(16px,1.8vw,26px)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* left intro beside a content group (breaks the repetitive centered-stack rhythm) */
.split2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:899px){ .split2{grid-template-columns:1fr;gap:clamp(16px,4vw,24px)} } /* phones: heading above the cards (was squeezed into two narrow columns) */
/* compact editorial list (industry / fit lists — not another card grid) */
.taglist{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,2vw,26px)}
.taglist a,.taglist span{display:inline-flex;align-items:center;font-size:var(--label);font-weight:600;color:#c9d3e6;background:rgba(255,255,255,.05);border:1px solid rgba(120,150,205,.2);border-radius:999px;padding:9px 16px;text-decoration:none;transition:border-color var(--lg-transition),color var(--lg-transition),transform var(--lg-transition)}
.taglist a:hover{border-color:var(--perf-blue);color:#fff;transform:translateY(-2px)}
.taglist a:focus-visible{outline:2px solid var(--perf-blue);outline-offset:3px}
.sec--light .taglist a,.sec--light .taglist span{color:var(--navy-deep);background:#fff;border-color:#e2e7f0}
.card{background:linear-gradient(180deg,rgba(18,36,70,.5),rgba(12,26,52,.5));border:1px solid rgba(120,150,205,.16);border-radius:14px;padding:clamp(18px,1.6vw,24px);min-width:0}
.card .c-ic{color:var(--blue-soft);margin-bottom:12px;line-height:0}
.card .c-ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3,.card h4{font-size:clamp(16px,1.15vw,19px);font-weight:600;color:#fff;line-height:1.25;margin:0}
.card p{margin:.5em 0 0;color:#93a3bf;font-size:var(--label);line-height:1.5}
.card .qn{display:block;font-size:var(--kick);letter-spacing:.14em;text-transform:uppercase;color:var(--perf-blue);font-weight:700;margin-bottom:.5em}
a.card{display:block;text-decoration:none;transition:transform var(--lg-transition),border-color var(--lg-transition)}
a.card:hover{transform:translateY(-3px);border-color:rgba(47,107,255,.45)}
a.card:focus-visible{outline:2px solid var(--perf-blue);outline-offset:3px}
.sec--light .card{background:#fff;border-color:#e2e7f0}
.sec--light .card h3,.sec--light .card h4{color:var(--navy-deep)}
.sec--light .card p{color:#5b6b88}

/* editorial checklist */
.checks{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:14px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:var(--label);line-height:1.45;color:#c9d3e6}
.sec--light .checks li{color:#41506a}
.checks li svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px;stroke:var(--perf-blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- wave transition (from homepage; curve-following blur feather) ---------- */
.wave{position:absolute;left:0;right:0;z-index:0;pointer-events:none;line-height:0}
.wave svg{display:block;width:100%;height:100%;overflow:visible}
.wave-top{top:0;height:clamp(150px,20vh,260px)}
.wave-bot{bottom:0;height:clamp(150px,20vh,260px)}
/* Shared light chapters use the normal chapter rhythm (the extra-tall 18vh padding belongs to the
   How It Works wave-diffused result, which is page-scoped as .hiw-result — not this shared class). */
.sec--light>.wrap{position:relative;z-index:1;padding-top:clamp(52px,7vh,96px);padding-bottom:clamp(52px,7vh,96px)}
@media (max-width:820px){.wave-top,.wave-bot{height:clamp(90px,13vh,140px)}}
/* Flowing (non-scene) light sections: the navy-to-light wave must COMPLETE before the first heading settles
   (owner 2026-10-02) — content starts below the wave instead of inside it. Scenes hide the wave entirely. */
.sec--light:not(.scene)>.wrap{padding-top:clamp(128px,17vh,226px)}
@media (max-width:820px){.sec--light:not(.scene)>.wrap{padding-top:clamp(84px,11.5vh,124px)}}

/* ---------- closing (navy atmosphere, no photo/water) ---------- */
.closing{position:relative;overflow:hidden;background:transparent;color:#fff;text-align:center}
.closing::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(90% 110% at 50% 96%, rgba(37,99,235,.26), rgba(37,99,235,0) 62%)}
/* Owner 2026-10-02 (footer hard edge): the closing's lower glow and the fixed page lighting both ended abruptly
   at the solid footer. The bottom of the closing now tapers smoothly into the footer's exact navy (background
   only - the text is untouched), so the page flows into the footer with no visible strip or edge. */
.closing::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,19,64,0) 0%, rgba(0,19,64,.55) 45%, var(--navy-deep) 100%)}
.closing .wrap{position:relative;z-index:1;padding-top:clamp(64px,9vh,110px);padding-bottom:clamp(64px,9vh,110px)}
.closing .k{color:var(--blue-soft)}
.closing h2{max-width:22ch;margin:.34em auto 0;font-size:var(--h-close);line-height:1.14;font-weight:700;color:#fff}
.closing .lead{margin:clamp(14px,2vh,22px) auto 0;color:#d3dcec;max-width:52ch}
.closing .ctawrap{margin-top:clamp(26px,3.4vh,40px);display:flex;justify-content:center}

/* footer lives in chrome.css (imported at top) */

/* ---------- shared motion presets (gated by html.motion, added by chrome.js only
   when motion is allowed → if JS fails OR reduced-motion, content is visible with no
   transform). Entrances play once per visit; settled content stays put. ---------- */
.anim{}
html.motion .anim{opacity:0;transform:translateY(14px);transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1)}
html.motion .anim-doc{transform:translateY(20px);transition:opacity .46s cubic-bezier(.22,1,.36,1),transform .46s cubic-bezier(.22,1,.36,1)}
html.motion .anim.in{opacity:1;transform:none}

/* (How It Works process styles are page-scoped in how-it-works.html as .hiw-stage etc.) */

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ihero--split .ihero-grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:1fr}
}
/* chrome responsive (navcap/login/toggle/footer cols) lives in chrome.css */
@media (max-width:560px){
  .cols-2,.cols-4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.motion .anim{opacity:1;transform:none;transition:none}
  .btn .arw,a.card,.btn,.pstage .snum,.pstage h3,.pstage p{transition:none}
}

/* =============================================================================
   INTERIOR MODERNIZATION (2026-09-25) — carry the FROZEN homepage motion language.
   All interior-only (site.css is not loaded by the homepage), so the frozen
   homepage cannot be affected.
   ============================================================================= */
/* Fixed, persistent header across the whole interior page (chrome.css keeps .topnav
   absolute for compatibility; the homepage overrides inline — it does not load site.css).
   z-index above sections; safe-area aware, matching the homepage header. */
.topnav{position:fixed;z-index:60;
  padding-top:calc(clamp(22px,1.8vw,40px) + env(safe-area-inset-top,0px));
  transition:background .32s ease, backdrop-filter .32s ease}
/* Liquid-glass backdrop once scrolled off the hero top: a frosted navy bar so content
   scrolls cleanly BEHIND the header and the lockup + nav stay legible over BOTH the navy
   sections and the light surfaces (contrast). Transparent at the very top (over the hero),
   matching the homepage hero. */
/* HEADER — match the APPROVED, frozen homepage exactly: NOT a heavy navy bar (that reads as a band on
   dark scenes and muddies the white scenes). A whisper of tint + per-element liquid-glass CHIPS that appear
   only over LIGHT surfaces. Over dark scenes the header is fully transparent (no bar, no chips), like the
   homepage's dark chapters. (Homepage defines these inline; interior mirrors them here — homepage untouched.) */
.topnav.docked{background:linear-gradient(180deg, rgba(4,18,52,.14), rgba(4,18,52,.05) 60%, rgba(4,18,52,0));transition:background .35s ease}
/* Natural-scroll pages (document pages, Contact, and the stacked fallback of scene pages): once the header
   docks, a soft frosted layer sits behind it so copy scrolling underneath blurs out instead of competing
   with the navigation labels. Not a navy bar: a light tint, a blur, and a feathered lower edge. Pinned
   scene pages never need it (nothing scrolls under the header there). */
html:not(.scenes-on) .topnav::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 30px);z-index:-1;
  pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:linear-gradient(180deg,rgba(0,19,64,.30),rgba(0,19,64,.14) 70%,rgba(0,19,64,0));
  -webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%);
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent)}
html:not(.scenes-on) .topnav.docked::before{opacity:1}
/* scene pages over a DARK scene: header stays completely clean */
html.scenes-on:not(.scene-light) .topnav.docked{background:transparent}
/* the lockup's own liquid-glass pill (via ::before/::after so there is no layout shift) */
.lockup{position:relative}
.lockup>*{position:relative;z-index:1}
.lockup::before{content:"";position:absolute;inset:-11px -20px;border-radius:var(--lg-radius);z-index:0;opacity:0;transition:opacity .4s ease;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,27,90,.60),rgba(0,19,64,.82) 55%,rgba(0,15,52,.90));
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -10px 22px rgba(0,10,40,.26),0 14px 40px rgba(0,19,64,.30)}
.lockup::after{content:"";position:absolute;inset:-11px -20px;border-radius:var(--lg-radius);z-index:0;opacity:0;transition:opacity .4s ease;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 44%)}
/* chips fade in over LIGHT surfaces only: document pages when docked; scene pages only when the active scene is light */
html:not(.scenes-on) .topnav.docked .lockup::before, html:not(.scenes-on) .topnav.docked .lockup::after,
html.scene-light .topnav.docked .lockup::before, html.scene-light .topnav.docked .lockup::after{opacity:1}
html:not(.scenes-on) .topnav.docked .navcap, html:not(.scenes-on) .topnav.docked .login, html:not(.scenes-on) .topnav.docked .navtoggle,
html.scene-light .topnav.docked .navcap, html.scene-light .topnav.docked .login, html.scene-light .topnav.docked .navtoggle{
  background:linear-gradient(135deg,rgba(0,27,90,.58),rgba(0,19,64,.80) 55%,rgba(0,15,52,.88));border-color:rgba(255,255,255,.24)}

/* Hero ANCHOR rule — measured on the FROZEN homepage: hero H1 left == --pad at every width, so it
   sits exactly under the fixed lockup on tablet/desktop (Δ0 @ 768/1440) and lands at 48px on mobile
   where the lockup tightens to 16px (the intended Δ32). The interior hero is full-width and left-
   anchored to --pad; NO mobile gutter override — that would break the match with the frozen homepage. */
.ihero>.wrap{max-width:none;margin:0;padding-left:var(--pad);padding-right:var(--pad)}

/* Page-entry: the destination hero composes IN PLACE on load (direct load, browser Back,
   or link click) — no blank loading screen, no navigation delay. Gated by html.motion, so
   reduced-motion / no-JS shows everything immediately. */
html.motion .ihero .ihero-content>*{opacity:0;transform:translateY(18px)}
html.motion .ihero.entered .ihero-content>*{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1)}
html.motion .ihero.entered .ihero-content>*:nth-child(2){transition-delay:.07s}
html.motion .ihero.entered .ihero-content>*:nth-child(3){transition-delay:.14s}
html.motion .ihero.entered .ihero-content>*:nth-child(4){transition-delay:.21s}
html.motion .ihero.entered .ihero-content>*:nth-child(5){transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  html.motion .ihero .ihero-content>*{opacity:1;transform:none;transition:none}
}

/* ============================ CONTRAST / READABILITY PASS (owner audit 2026-09-24) ============================
   Bring all text to >=4.5:1 (small) / >=3:1 (large) against the RENDERED surface. Interior-only (site.css);
   the frozen homepage links chrome.css only and is untouched. */
/* Eyebrows + Q-numbers on NAVY: perf-blue (#2563EB) is only 3.48:1 on navy-deep -> use the lighter hero
   blue (#7fa8e6 = 5.4:1). Light surfaces keep perf-blue (5.4:1 on #F2F4F7). */
.eyebrow{color:#7fa8e6}
.sec--light .eyebrow{color:var(--perf-blue)}
.card .qn{color:#8fb0ff}
.sec--light .card .qn{color:var(--perf-blue)}
/* DARK panels (.panel--navy): the matcher rows / eyebrow inherited the LIGHT-panel dark colors and were
   near-invisible on the dark card — relight them. */
.panel--navy .p-eyb{color:#8fb0ff}
.panel--navy h3{color:#fff}
.panel--navy .p-row .k{color:#fff}
.panel--navy .p-row .v{color:#c9d3e6}
/* LIGHT panels (.panel, not navy): checklists inherited the navy-context light color (#c9d3e6) and were
   near-invisible on the light card — darken to the light-surface body color. */
.panel:not(.panel--navy) .checks li{color:#41506a}
/* Focus-visible for the remaining link types (breadcrumb, prose, HIW support) — consistent keyboard
   affordance instead of the UA default. All major controls already have focus-visible above. */
.breadcrumb a:focus-visible,.prose a:focus-visible,.hiw-support-links a:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px;border-radius:3px}
/* Illustrative snapshot inside a solution "engagement at a glance" panel — preserves the original
   sample-output figures, clearly labelled (owner directive: keep the specific numbers, labelled). */
.p-figs{display:flex;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(0,27,90,.1)}
.p-figs .pf{flex:1;min-width:0}
.p-figs .pf b{display:block;font-size:clamp(17px,1.4vw,21px);font-weight:800;color:var(--navy-deep);line-height:1.05}
.p-figs .pf span{display:block;font-size:var(--kick);color:#5b6b88;margin-top:3px;line-height:1.2}
.p-figs-note{font-size:var(--kick);color:#5b6b88;margin-top:9px}

/* ---- About section navigation (owner 2026-10-02): the three About pages — company, founder, methodology —
   are linked from the top of each, so a visitor arriving on any of them sees the other two at once. ---- */
.secnav{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:clamp(22px,2.8vh,34px)}
.ihero--centered .secnav{justify-content:center}
.secnav a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(143,176,255,.32);background:rgba(18,36,70,.45);color:#e6eefc;text-decoration:none;font-size:var(--label);font-weight:600;transition:background var(--lg-transition),border-color var(--lg-transition)}
.secnav a:hover{background:rgba(37,99,235,.28);border-color:rgba(143,176,255,.6);color:#fff}
.secnav a:focus-visible{outline:2px solid var(--perf-blue);outline-offset:3px}
.secnav a[aria-current="page"]{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.92);color:var(--navy-deep)}
.secnav img{width:30px;height:30px;border-radius:50%;object-fit:cover;margin-left:-10px;border:1px solid rgba(255,255,255,.5)}
@media (max-width:520px){ .secnav a{padding:0 14px;font-size:14px} .secnav img{width:26px;height:26px;margin-left:-8px} }