/* ============================================================
   KingpinX home page — the HARVEY look.

   Layered LAST, on top of kingpinx.css + kpx-home.css. Nothing in
   those files is edited: this file re-points their tokens and
   restyles components, so removing the one <link> in landing.html
   restores the navy page exactly.

   Source of truth: Kingpin X Brand Guidelines v1.0
   (kingpin/brand-guide.html) and the console's looks/harvey.css —
   the same palette the ZDR and Tradie apps were re-based on.

   The rules it follows:
   · The accent is the INK, not a colour. Blue appears only on links.
   · Pink #FF2D78 is the one signal: the X, the full stop, one point
     of emphasis per view. It never changes between themes.
   · Flat grounds. No gradients, no glows, no washes.
   · Poppins for the wordmark only · Inter for everything you read
     or press · EB Garamond for headings · Space Grotesk for
     technical figures (refs, timestamps, licence numbers).
   · Light only (dark blocks disabled 19 Sep 2026 at Chris's request; flip the
     `@media not all` guards back to prefers-color-scheme:dark to restore).
   ============================================================ */

/* ---------- web-font fallbacks, metric-matched ----------
   While Inter / EB Garamond download, text renders in Arial / Times resized
   to the same advance width and line box, so nothing jumps when the real
   face swaps in (CLS). Values measured 2026-09-15: vertical metrics from the
   served woff2 files (fontTools), width ratio from the site's own copy.
   Inter: upm 2048, ascent 1984, descent 494, width ×1.0676 vs Arial.
   EB Garamond: upm 1000, ascent 1007, descent 298, width ×0.9730 vs Times.
   Poppins 700: upm 1000, ascent 1050, descent 350, gap 100, width ×1.0332 vs Arial Bold.
   Inter 600 ×1.0149 vs Arial Bold · EB Garamond italic ×0.9098 vs Times Italic. */
@font-face{ font-family:'Inter Fallback'; font-weight:100 500; src:local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust:108.05%; ascent-override:89.66%; descent-override:22.32%; line-gap-override:0%; }  /* 106.76 measured avg; 108.05 calibrated so fallback wraps match Inter across all 6 heroes at 390/412px */
@font-face{ font-family:'Inter Fallback'; font-weight:600 900; src:local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  size-adjust:101.49%; ascent-override:95.45%; descent-override:23.77%; line-gap-override:0%; }
@font-face{ font-family:'Poppins Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'), local('Arial');
  size-adjust:103.32%; ascent-override:101.63%; descent-override:33.88%; line-gap-override:9.68%; }
@font-face{ font-family:'EB Garamond Fallback'; font-style:normal; src:local('Times New Roman'), local('TimesNewRomanPSMT'), local('Times');
  size-adjust:97.30%; ascent-override:103.50%; descent-override:30.63%; line-gap-override:0%; }
@font-face{ font-family:'EB Garamond Fallback'; font-style:italic; src:local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Times Italic');
  size-adjust:90.98%; ascent-override:110.68%; descent-override:32.75%; line-gap-override:0%; }

:root{
  color-scheme:light;

  /* Harvey — light */
  --hv-g:#F9FAFB; --hv-s:#FFFFFF; --hv-s2:#F3F4F6; --hv-s3:#E5E7EB; --hv-th:#FAFBFC;
  --hv-ln:#E5E7EB; --hv-ln2:#F3F4F6; --hv-ln3:#EEF0F2;
  --hv-fg:#111827; --hv-fg2:#374151; --hv-fg3:#6B7280; --hv-fg4:#9CA3AF; --hv-fg5:#D1D5DB;
  --hv-prim:rgba(3,7,18,.88); --hv-prim-h:rgba(17,24,39,.96); --hv-prim-fg:#FFFFFF; --hv-link:#0077E6;
  --hv-ok:#047857; --hv-ok-bg:#ECFDF5; --hv-ok-ln:#A7F3D0;
  --hv-shadow:0 -1px 6px rgba(15,23,42,.034),0 4px 9px rgba(15,23,42,.074),inset 0 1px 0 rgba(255,255,255,.85);
  --hv-lift:0 1px 2px rgba(15,23,42,.04),0 18px 44px rgba(15,23,42,.09);
  --hv-plate:.88;
  --hv-focus:rgba(17,24,39,.10);

  /* the old token names, re-pointed so every existing rule and
     inline style lands on the Harvey palette */
  --aqua:var(--hv-fg); --aqua-dark:var(--hv-fg); --aqua-light:var(--hv-link);
  --deep:var(--hv-g); --dark:var(--hv-s); --tertiary:var(--hv-s2);
  --white:var(--hv-fg); --silver:var(--hv-fg2); --mid:var(--hv-fg3);
  --line:var(--hv-ln); --line-soft:var(--hv-ln2);
  --card:var(--hv-s); --card-hover:var(--hv-s);
  --signal:#FF2D78;
}
@media not all /* dark disabled 19 Sep 2026: site is light-only */{
  :root{
    --hv-g:#121211; --hv-s:#1A1A19; --hv-s2:#222221; --hv-s3:#2C2C2A; --hv-th:#1E1E1D;
    --hv-ln:rgba(255,255,255,.10); --hv-ln2:rgba(255,255,255,.06); --hv-ln3:rgba(255,255,255,.08);
    --hv-fg:#ECECEA; --hv-fg2:#C9C9C6; --hv-fg3:#8F8F8B; --hv-fg4:#65655F; --hv-fg5:#3A3A37;
    --hv-prim:#F2F2F0; --hv-prim-h:#FFFFFF; --hv-prim-fg:#121211; --hv-link:#6FB3FF;
    --hv-ok:#34D399; --hv-ok-bg:rgba(16,185,129,.12); --hv-ok-ln:rgba(16,185,129,.3);
    --hv-shadow:0 -1px 6px rgba(0,0,0,.2),0 4px 9px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
    --hv-lift:0 1px 2px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.45);
    --hv-plate:.84;
    --hv-focus:rgba(255,255,255,.12);
  }
}

html{ background:var(--hv-g); }
body{
  background:var(--hv-g); color:var(--hv-fg);
  font-family:'Inter','Inter Fallback',system-ui,-apple-system,sans-serif; font-weight:400; letter-spacing:-.005em;
}
::selection{ background:rgba(255,45,120,.18); }

/* ---------- nav ---------- */
.kpx-nav{
  background:color-mix(in srgb, var(--hv-g) 84%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hv-ln); padding-block:10px;
}
.kpx-nav .brand{ font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; letter-spacing:-.045em; font-size:1.12rem; color:var(--hv-fg); }
.kpx-nav .brand::after{ display:none; }
.kpx-nav .brand b, .kpx-nav .brand .punc{ color:var(--signal); font-weight:700; }
.kpx-nav .links{ gap:2px; }
.kpx-nav .links a{
  font-family:'Inter','Inter Fallback',sans-serif; font-size:13px; font-weight:500; letter-spacing:-.005em; text-transform:none;
  color:var(--hv-fg3); padding:6px 11px; border-radius:999px; border:0;
  transition:color .15s ease, background .15s ease;
}
.kpx-nav .links a:hover{ color:var(--hv-fg); background:var(--hv-s2); }
.kpx-nav .links a.active{ color:var(--hv-fg); background:var(--hv-s3); border:0; padding:6px 11px; }
@media(max-width:860px){
  .kpx-nav .links{ gap:0; }
  .kpx-nav .links a, .kpx-nav .links a.active{ font-size:12.5px; letter-spacing:-.005em; padding:5px 9px; }
}

/* ---------- panels: flat grounds, one hairline between them ---------- */
.panel{ background:var(--hv-g); }
.panel.alt{ background:var(--hv-s); }
.shot::after{ background:var(--hv-ln); }

/* ---------- photo bands ----------
   A section with .ph carries a full-bleed photograph that follows the
   theme — light by default. The photo runs near full strength; legibility
   comes from treating the COPY, not from fogging the whole picture:

   1. a veil only on the side the headline sits (left), gone by two-thirds
      across — the images were generated with the subject on the right;
   2. copy that must cross the photo (process rails, stats, founders) sits
      on a frosted panel — blur + a translucent ground — the pattern Apple
      and Stripe use for text on imagery;
   3. every text run is measured against the pixels behind it (WCAG 2.2 AA). */
.shot > .shot-img, .shot > .shot-scrim{ display:none; }
.shot.ph > .shot-img{
  display:block; inset:0 !important; height:auto !important; background-size:cover !important;
  opacity:var(--ph-img, .92) !important;
  filter:grayscale(var(--ph-gray, .15)) contrast(.96) brightness(var(--ph-bright, 1.04)) !important;
}
.shot.ph > .shot-scrim{
  display:block; opacity:1;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--hv-g) var(--ph-v0, 92%), transparent) 0%,
    color-mix(in srgb, var(--hv-g) var(--ph-v1, 87%), transparent) 50%,
    color-mix(in srgb, var(--hv-g) var(--ph-v2, 34%), transparent) 72%,
    color-mix(in srgb, var(--hv-g) var(--ph-v3, 6%), transparent) 100%) !important;
}
.shot.ph > .meshfield{ display:none; }
@media not all /* dark disabled 19 Sep 2026: site is light-only */{
  .shot.ph{ --ph-img:.9; --ph-gray:.1; --ph-bright:.9; }
}
@media (max-width:900px){
  .shot.ph > .shot-scrim{ background:color-mix(in srgb, var(--hv-g) var(--ph-vm, 80%), transparent) !important; }
}

/* frosted panels for copy that crosses the photo */
.ph .rail, .ph .statband, .ph .people, .ph .qagrid{
  background:color-mix(in srgb, var(--hv-g) 74%, transparent);
  backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid color-mix(in srgb, var(--hv-s) 60%, transparent);
  border-radius:16px; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.06);
}
@media not all /* dark disabled 19 Sep 2026: site is light-only */{
  .ph .rail, .ph .statband, .ph .people, .ph .qagrid{ border-color:rgba(255,255,255,.08); box-shadow:0 12px 32px rgba(0,0,0,.35); }
}
.ph .rail{ padding:42px 26px 24px; }
.ph .rail::before{ left:32px; right:32px; }
.ph .statband{ padding:22px 24px; }
.ph .people{ padding:40px 26px 24px; }
.ph .people::before{ left:32px; right:32px; }
.ph .qagrid{ padding:22px 24px; }
@media(max-width:760px){
  .ph .rail{ padding:14px 14px 16px; border-radius:14px; }
}
@media(max-width:860px){ .ph .people{ padding:18px 16px; } }
.ph .chain a, .ph .card, .ph .rollout .r, .ph .stat, .ph .standalone, .ph .contact-card{
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.ph .chain a{ background:color-mix(in srgb, var(--hv-s) 90%, transparent); }

/* a photograph that is very slightly alive — one slow drift, not a pan */
@keyframes kx-drift{ from{ transform:scale(1.02) translate3d(0,0,0) } to{ transform:scale(1.09) translate3d(-1.2%,-.8%,0) } }
.shot.ph > .shot-img{ will-change:transform; animation:kx-drift 38s ease-in-out infinite alternate; transform-origin:60% 50%; }
@media (prefers-reduced-motion:reduce){ .shot.ph > .shot-img{ animation:none; transform:none; } }

/* the network still draws itself behind Mesh — in ink, quietly */
.meshfield{ opacity:1; }
.meshfield .lnk{ stroke:var(--hv-fg); stroke-opacity:.09; stroke-width:1; }
.meshfield .nd{ fill:var(--hv-fg4); }
.meshfield .nd.hot{ fill:var(--signal); }

/* ---------- type ---------- */
.kicker{
  font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em;
  color:var(--hv-fg3); padding-left:16px;
}
.kicker::before{ width:6px; height:6px; top:.52em; box-shadow:none; }
.kicker .n{ color:var(--hv-fg); font-variant-numeric:tabular-nums; }

h2.big{
  font-family:'EB Garamond','EB Garamond Fallback',serif; font-weight:500; letter-spacing:-.015em; line-height:1.04;
  color:var(--hv-fg); font-size:clamp(2.3rem,5vw,4.1rem);
}
h2.big .em, .hero-line .em, .claim .em{ font-style:italic; font-weight:400; color:var(--hv-fg); }
h2.big .punc, h2.big .bdot, .hero-line .punc, .claim .punc, .hero-claim .punc{ color:var(--signal); font-weight:inherit; }
h2.big .lo{ color:var(--hv-fg3); font-weight:400; }
h2.big .xp{ font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; letter-spacing:-.045em; color:var(--signal); }

.claim{
  font-family:'EB Garamond','EB Garamond Fallback',serif; font-weight:500; text-transform:none; letter-spacing:-.012em;
  font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.1; color:var(--hv-fg);
}
.claim .pm{ color:var(--hv-fg); }

.big-lede{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:400; color:var(--hv-fg2); font-size:clamp(1rem,1.3vw,1.16rem); line-height:1.62; letter-spacing:-.008em; }
.big-lede b{ color:var(--hv-fg); font-weight:600; }
.note{ color:var(--hv-fg3); }
.note b{ color:var(--hv-fg2); font-weight:600; }

/* product marks: Poppins, ink, the weight contrast is the mark */
.prod-mark{
  font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; letter-spacing:-.045em; color:var(--hv-fg);
  font-size:clamp(1.5rem,3vw,2.3rem); padding-bottom:0; margin-bottom:18px;
}
.prod-mark::after{ display:none; }
.prod-mark b{ font-weight:300; color:var(--hv-fg); }
#zdr .prod-mark b{ font-weight:700; }
#zdr .prod-mark sup, .zdr-mark sup{ color:var(--signal) !important; }
#group-founders .prod-mark b{ font-weight:700; color:var(--signal); }

.zdr-mark{ font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; color:var(--hv-fg); letter-spacing:-.01em; }

/* ---------- hero ---------- */
.kpx-mark{
  font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; letter-spacing:-.045em; line-height:.95;
  font-size:clamp(2.8rem,7.4vw,5.6rem); color:var(--hv-fg);
}
.kpx-mark .x, .kpx-mark .punc{ color:var(--signal); font-weight:700; }
.home-hero .as-wordmark-line{ display:none; }
.hero-line{
  font-family:'EB Garamond','EB Garamond Fallback',serif; font-weight:500; letter-spacing:-.015em; line-height:1.08;
  font-size:clamp(1.8rem,3.9vw,3.3rem); color:var(--hv-fg); max-width:10.94em;   /* was 22ch — em does not change when the font swaps */
}
.hero-claim{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:400; letter-spacing:-.01em; color:var(--hv-fg2); font-size:clamp(1.02rem,1.5vw,1.25rem); max-width:27.76em; }
.hero-claim b{ color:var(--hv-fg); font-weight:600; }

.chain{ gap:14px; }
.chain a{
  background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:12px;
  box-shadow:var(--hv-shadow); backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:22px 22px 18px; gap:8px; min-height:clamp(200px,26vh,272px);
}
.chain a:hover{ border-color:var(--hv-fg5); transform:translateY(-2px); box-shadow:var(--hv-lift); }
.chain a + a::before{ left:-10px; width:7px; height:7px; border-color:var(--hv-fg4); border-width:1.5px 1.5px 0 0; }
.chain .role{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--hv-fg3); }
.chain .nm{ font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; letter-spacing:-.04em; font-size:clamp(1.2rem,1.8vw,1.5rem); color:var(--hv-fg); }
.chain .nm .k{ font-weight:700; color:var(--hv-fg); margin-right:.22em; }
.chain .nm .p{ font-weight:300; color:var(--hv-fg); }
.chain a[href="#zdr"] .nm .p{ font-weight:700; }
.chain .nm sup{ color:var(--signal) !important; }
.chain .nm .dot{ color:var(--signal); }
.chain .nm .a{ color:#2EA3F2; }                       /* AquaSentinel keeps its own mark */
.chain .dsc{ font-size:clamp(.88rem,1vw,.95rem); line-height:1.55; color:var(--hv-fg2); }
.chain .dsc b{ color:var(--hv-fg); font-weight:600; }
.chain .st{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; border-top:1px solid var(--hv-ln2); padding-top:12px; }
.chain .st .live{ color:var(--hv-ok); }
.chain .st .next{ color:var(--hv-fg3); }

.scroll-cue{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--hv-fg3); }

/* ---------- the process rail ---------- */
.rail::before{ background:var(--hv-ln); }
.rail .st::after{ background:var(--hv-g); border:1.5px solid var(--hv-fg5); width:10px; height:10px; }
.rail .st:hover{ transform:none; }
.rail .st:hover::after{ background:var(--hv-fg); border-color:var(--hv-fg); box-shadow:none; }
.rail .st.hot::after{ background:var(--signal); border-color:var(--signal); box-shadow:none; }
.rail .st .ix{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--hv-fg4); font-variant-numeric:tabular-nums; }
.rail .st.hot .ix{ color:var(--signal); }
.rail .st .ttl{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:-.01em; font-size:clamp(.95rem,1.15vw,1.05rem); color:var(--hv-fg); }
.rail .st.hot .ttl{ color:var(--hv-fg); }
.rail .st .sub{ color:var(--hv-fg3); font-size:.88rem; }
.rail .st .sub b{ color:var(--hv-fg2); }

/* ---------- mocks: white cards, like the console itself ---------- */
.mock{ background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:12px; box-shadow:var(--hv-lift); }
.mock .bar{ background:var(--hv-th); border-bottom:1px solid var(--hv-ln); }
.mock .bar .dots i{ background:var(--hv-fg5); }
.mock .bar .ttl{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--hv-fg3); }
.mock .bar .live{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--hv-ok); }
.mock .bar .live::before{ background:var(--hv-ok); box-shadow:none; }

.console .map{ background:var(--hv-s2); border-color:var(--hv-ln); }
.console .map .grid-l{ stroke:var(--hv-fg); stroke-opacity:.06; }
.console .map .road{ stroke:var(--hv-fg); stroke-opacity:.14; }
.console .map .radius{ fill:var(--hv-fg); fill-opacity:.025; stroke:var(--hv-fg4); stroke-opacity:1; }
.console .map .trade{ fill:var(--hv-fg); filter:none; }
.console .map .job{ filter:none; }
.console .map circle[fill="url(#tradeGlow)"]{ display:none; }
.console .map circle[fill="url(#jobGlow)"]{ opacity:.45; }
.console .map .lbl{ fill:var(--hv-fg3); }
.console .map .lbl.on{ fill:var(--hv-fg); }
.console .map .lbl.hot{ fill:var(--signal); }
.console .feed .fh{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--hv-fg3); }
.jobrow{ background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:8px; }
.jobrow .ref{ color:var(--hv-fg2); }
.jobrow .badge{ font-family:'Inter','Inter Fallback',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.06em; padding:2px 8px; }
.jobrow .badge.acc{ color:var(--hv-ok); background:var(--hv-ok-bg); border:1px solid var(--hv-ok-ln); }
.jobrow .badge.dis{ color:var(--hv-fg2); background:var(--hv-s2); border:1px solid var(--hv-ln); }
.jobrow .badge.new{ color:var(--signal); background:transparent; border:1px solid rgba(255,45,120,.4); }
.jobrow .adr{ color:var(--hv-fg); font-weight:500; }
.jobrow .met{ color:var(--hv-fg3); }

.stackline{ border-top:1px solid var(--hv-ln); }
.chips span{
  font-family:'Inter','Inter Fallback',sans-serif; font-size:12.5px; letter-spacing:-.005em; color:var(--hv-fg2);
  background:var(--hv-s); border:1px solid var(--hv-ln); padding:6px 12px;
}
.chips span b{ color:var(--hv-fg); font-weight:600; }

.deeper{
  font-family:'Inter','Inter Fallback',sans-serif; font-size:13.5px; font-weight:500; letter-spacing:-.005em; text-transform:none;
  color:var(--hv-link); border-bottom:1px solid transparent; padding-bottom:1px;
}
.deeper:hover{ color:var(--hv-link); border-color:var(--hv-link); }

/* the ZDR page stays a white page in both themes — it is a document */
.zdrdoc{ border:1px solid var(--hv-ln); box-shadow:var(--hv-lift); }
.mock-cap{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--hv-fg3); }

.qa::before{ background:var(--hv-g); border:1.5px solid var(--hv-fg5); }
.qa:nth-child(2)::before{ background:var(--signal); border-color:var(--signal); box-shadow:none; }
.qa h4{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; font-size:1rem; letter-spacing:-.01em; color:var(--hv-fg); }
.qa p{ color:var(--hv-fg3); }

/* ---------- AquaSentinel: its own mark, on the Harvey ground ---------- */
.as-wordmark .wm-aqua{ color:#2EA3F2; }
.as-wordmark .wm-sentinel{ color:var(--hv-fg); }
.as-wordmark .wm-drop{ filter:none; }
.as-wordmark-line{
  box-shadow:none;
  background:linear-gradient(90deg,transparent 0%,#1A8CD8 25%,#2EA3F2 50%,#FF2D78 80%,transparent 100%);
}
@media not all /* dark disabled 19 Sep 2026: site is light-only */{
  .as-wordmark-line{ background:linear-gradient(90deg,transparent 0%,#2EA3F2 25%,#5BB8F5 50%,#FF2D78 80%,transparent 100%); }
}

.specs .sp{ background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:12px; }
.specs .sp .v{ color:var(--hv-fg); font-weight:500; }
.specs .sp .k{ color:var(--hv-fg3); letter-spacing:0; }
.installs .i{ background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:12px; }
.installs .i .dot{ background:var(--hv-fg4); box-shadow:none; width:7px; height:7px; margin-top:7px; }
.installs .i .n{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:-.01em; color:var(--hv-fg); }
.installs .i .d{ color:var(--hv-fg3); }
.sensor-spin{ opacity:.10; }

.phone{ background:#1A1A19; border:1px solid var(--hv-ln); box-shadow:var(--hv-lift); }
.phone .scr{ background:var(--hv-g); border:0; }
.phone .notch{ background:var(--hv-fg5); }
.phone .status{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; color:var(--hv-fg3); letter-spacing:0; }
.alertcard{ background:rgba(255,45,120,.06); border:1px solid rgba(255,45,120,.35); border-radius:12px; }
.alertcard .ah{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:.1em; }
.alertcard .ah::before{ box-shadow:none; }
.alertcard .at{ font-family:'Inter','Inter Fallback',sans-serif; color:var(--hv-fg); }
.alertcard .ab{ color:var(--hv-fg2); }
.phone .step{ background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:10px; color:var(--hv-fg3); }
.phone .step .k{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; color:var(--hv-fg4); font-variant-numeric:tabular-nums; }
.phone .step b{ color:var(--hv-fg); }
.phone .done{ background:var(--hv-ok-bg); border-color:var(--hv-ok-ln); }
.phone .done .k{ color:var(--hv-ok); }

/* ---------- numbers ---------- */
.statband .s{ border-left:1px solid var(--hv-ln); }
.statband .s .n{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:-.03em; color:var(--hv-fg); font-variant-numeric:tabular-nums; }
.statband .s .l{ color:var(--hv-fg3); }

/* ---------- founders ---------- */
.whoami{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--hv-fg3); }
.people::before{ background:var(--hv-ln); }
.person::after{ background:var(--hv-g); border:1.5px solid var(--hv-fg5); width:10px; height:10px; }
.person:nth-child(2)::after{ background:var(--signal); border-color:var(--signal); box-shadow:none; }
.person .nm{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:-.015em; color:var(--hv-fg); }
.person .role{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--hv-fg3); }
.person p{ color:var(--hv-fg2); }
.person .lic{ color:var(--hv-fg4); border-top:1px solid var(--hv-ln); }

/* ---------- join ---------- */
.joinbox{ background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:16px; box-shadow:var(--hv-shadow); }
.joincols h4{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--hv-fg3); }
.joincols li{ color:var(--hv-fg2); }
.joincols li::before{ color:var(--hv-fg4); }
.joincols li b{ color:var(--hv-fg); }

/* ---------- buttons: ink pills ---------- */
.btn{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:500; font-size:14px; letter-spacing:-.005em; border-radius:999px; padding:11px 20px; }
.btn-primary{ background:var(--hv-prim); color:var(--hv-prim-fg); box-shadow:none; }
.btn-primary:hover{ background:var(--hv-prim-h); transform:none; box-shadow:var(--hv-shadow); }
.btn-ghost{ background:var(--hv-s); border:1px solid var(--hv-ln); color:var(--hv-fg); }
.btn-ghost:hover{ border-color:var(--hv-fg5); color:var(--hv-fg); background:var(--hv-s2); }

/* ---------- contact ---------- */
#contact{ border-top:1px solid var(--hv-ln); }
.enq label{ background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:12px; }
.enq label:hover{ border-color:var(--hv-fg5); }
.enq label:has(input:checked){ border-color:var(--hv-fg); background:var(--hv-s); box-shadow:0 0 0 1px var(--hv-fg); }
.enq label:has(input:focus-visible){ outline-color:var(--hv-link); }
.enq .t{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:-.01em; color:var(--hv-fg); }
.enq input[type=radio]:checked + .t{ color:var(--hv-fg); }
.enq .d{ color:var(--hv-fg3); }
.field label{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--hv-fg3); }
.field input, .field textarea{
  font-family:'Inter','Inter Fallback',sans-serif; font-weight:400; font-size:14px; color:var(--hv-fg);
  background:var(--hv-g); border:1px solid var(--hv-ln); border-radius:8px;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--hv-fg4); }
.field input:focus, .field textarea:focus{ border-color:var(--hv-fg4); background:var(--hv-s); box-shadow:0 0 0 3px var(--hv-focus); }

/* ---------- footer ---------- */
.kpx-footer{ background:var(--hv-g); border-top:1px solid var(--hv-ln); }
.kpx-footer .fbrand{ font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; letter-spacing:-.045em; color:var(--hv-fg); }
.kpx-footer .fbrand b, .kpx-footer .fbrand .punc{ color:var(--signal); }
.kpx-footer .fsub{ color:var(--hv-fg3); }
.kpx-footer .fcontact{ color:var(--hv-fg2); }
.kpx-footer .fcontact b{ font-family:'Inter','Inter Fallback',sans-serif; color:var(--hv-fg); }
.kpx-footer .fcontact a{ color:var(--hv-link); }
.kpx-footer .fcontact a:hover{ color:var(--hv-fg); }
.kpx-footer .fnav a{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--hv-fg3); }
.kpx-footer .fnav a:hover{ color:var(--hv-fg); }

/* ---------- panel fit: keep the shrink-to-fit steps for short laptops ---------- */
@media (max-height:960px) and (min-width:901px){
  h2.big{ font-size:clamp(2rem,5vh,3.5rem); }
  .claim{ font-size:clamp(1.45rem,3.2vh,2.2rem); }
  .kpx-mark{ font-size:clamp(2.5rem,6.6vh,4.8rem); }
  .hero-line{ font-size:clamp(1.55rem,3.9vh,2.8rem); }
  .prod-mark{ font-size:clamp(1.4rem,3.4vh,2.1rem); margin-bottom:14px; }
  .chain a{ padding:18px 18px 14px; min-height:clamp(180px,24vh,250px); }
  .btn{ padding:10px 18px; }
}
@media (max-height:750px) and (min-width:901px){
  h2.big{ font-size:clamp(1.8rem,4.6vh,2.7rem); }
}
@media(max-width:640px){
  .kpx-mark{ font-size:clamp(2.6rem,12vw,3.6rem); }
  .hero-line{ font-size:clamp(1.6rem,7.6vw,2.2rem); max-width:none; }
  .claim{ font-size:1.55rem; }
  h2.big{ font-size:clamp(2rem,9vw,2.7rem); }
}

/* the wordmark inside a heading is still the wordmark: Poppins, whole */
h2.big .kpx-inline{ font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; letter-spacing:-.045em; font-size:.86em; }

/* the Mesh network backdrop sits under the rail's copy — keep it faint */
.meshfield{ opacity:.6; }
.meshfield .nd{ fill:var(--hv-fg5); }
.meshfield .nd.hot{ fill-opacity:.55; }


/* ============================================================
   Deep pages — mesh.html, er.html, zdr.html, aquasentinel.html,
   group.html. Same tokens; these are the kingpinx.css components
   the landing page does not use.
   ============================================================ */
.hero::before, .section.amb::before{ display:none; }
.hero{ background:var(--hv-g); }
.section{ background:var(--hv-g); border-top:1px solid var(--hv-ln); }
.section.alt{ background:var(--hv-s); }
.hero.ph{ min-height:min(100svh,920px); }

.kpx-nav .links a.on{ color:var(--hv-fg); background:var(--hv-s3); border:0; padding:6px 11px; }
.kpx-nav .links a.cta, .kpx-nav .links a.cta.active{
  color:var(--hv-prim-fg); background:var(--hv-prim); border:0; padding:6px 13px; margin-left:6px;
}
.kpx-nav .links a.cta:hover{ background:var(--hv-prim-h); color:var(--hv-prim-fg); }

.eyebrow{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--hv-fg3); }
.eyebrow::before{ width:6px; height:6px; box-shadow:none; }
h1.as-title{
  font-family:'EB Garamond','EB Garamond Fallback',serif; font-weight:500; letter-spacing:-.015em; line-height:1.04;
  font-size:clamp(2.6rem,6vw,4.6rem); color:var(--hv-fg); max-width:8.95em;   /* was 18ch */
}
h1.as-title .em, h2.sec .em{ font-style:italic; font-weight:400; color:var(--hv-fg); }
h1.as-title .punc, h2.sec .punc{ color:var(--signal); }
h2.sec{ font-family:'EB Garamond','EB Garamond Fallback',serif; font-weight:500; letter-spacing:-.012em; line-height:1.08;
  font-size:clamp(1.9rem,3.4vw,2.8rem); color:var(--hv-fg); margin-bottom:14px; }
h2.sec canvas.kp-globe{ vertical-align:-.08em; }
.sec-sub{ font-family:'Inter','Inter Fallback',sans-serif; color:var(--hv-fg3); }
.sec-sub b, .lede b{ color:var(--hv-fg); font-weight:600; }
.lede{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:400; letter-spacing:-.008em; color:var(--hv-fg2); font-size:clamp(1.02rem,1.45vw,1.2rem); line-height:1.62; }

.mesh-mark, .er-mark{ font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; letter-spacing:-.02em; color:var(--hv-fg); }
.as-mark{ font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; color:var(--hv-fg); }
.as-mark .a{ color:#2EA3F2; }
.kp-word .m{ color:var(--hv-fg); }

.card{ background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:12px; box-shadow:var(--hv-shadow); }
.card:hover{ border-color:var(--hv-fg5); background:var(--hv-s); }
.card h3{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:-.01em; font-size:1.02rem; color:var(--hv-fg); }
.card p{ color:var(--hv-fg3); }
.card .num{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--hv-fg4); }
a.card:hover{ box-shadow:var(--hv-lift); transform:translateY(-2px); }
a.card .go{ font-family:'Inter','Inter Fallback',sans-serif; color:var(--hv-link); }

.checks li{ color:var(--hv-fg2); }
.checks li::before{ color:var(--hv-fg); font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; }
.checks li b{ color:var(--hv-fg); }

.steps li{ border-bottom:1px solid var(--hv-ln); }
.steps li::before{ font-family:'Inter','Inter Fallback',sans-serif; font-size:1rem; font-weight:600; color:var(--hv-fg4); font-variant-numeric:tabular-nums; }
.steps li h4{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:-.01em; color:var(--hv-fg); }
.steps li p{ color:var(--hv-fg3); }

.stat{ background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:12px; }
.stat .n{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:-.03em; color:var(--hv-fg); font-variant-numeric:tabular-nums; }
.stat .l{ color:var(--hv-fg3); }

.timeline li{ border-bottom:1px solid var(--hv-ln); }
.timeline .t{ color:var(--hv-fg3); font-variant-numeric:tabular-nums; }
.timeline .d{ color:var(--hv-fg2); }
.timeline .d b{ color:var(--hv-fg); }
.timeline li.hot .t{ color:var(--signal); }

.rollout .r{ background:var(--hv-s); border:1px solid var(--hv-ln); border-radius:12px; }
.rollout .r .num{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:.1em; color:var(--hv-fg4); }
.rollout .r .nm{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; color:var(--hv-fg); }
.rollout .r .st{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; letter-spacing:.08em; }
.rollout .r .st.live{ color:var(--hv-ok); background:var(--hv-ok-bg); border:1px solid var(--hv-ok-ln); }
.rollout .r .st.next{ color:var(--signal); border:1px solid rgba(255,45,120,.4); }

/* page-local components */
.tagline{ font-family:'Inter','Inter Fallback',sans-serif !important; font-weight:600; letter-spacing:.14em !important; color:var(--hv-fg3) !important; }
.standalone{ border-radius:12px !important; }
.standalone .tag{ font-family:'Inter','Inter Fallback',sans-serif !important; font-weight:600; letter-spacing:.12em !important; }
.founder .role{ font-family:'Inter','Inter Fallback',sans-serif !important; font-size:11px !important; font-weight:600; letter-spacing:.1em !important; color:var(--hv-fg3) !important; }
.founder .lic{ color:var(--hv-fg4) !important; }
.contact-card{ background:var(--hv-s) !important; border:1px solid var(--hv-ln) !important; border-radius:12px !important; box-shadow:var(--hv-shadow); }
.contact-card .name{ font-family:'Inter','Inter Fallback',sans-serif !important; letter-spacing:-.01em; color:var(--hv-fg); }
.contact-card .role{ color:var(--hv-fg3) !important; }
.contact-card a{ color:var(--hv-link) !important; }
.contact-card .row .k{ font-family:'Inter','Inter Fallback',sans-serif !important; font-weight:600; letter-spacing:.1em !important; color:var(--hv-fg4) !important; }

/* product names inside an ink button take the button's colour */
.btn-primary .mesh-mark, .btn-primary .er-mark, .btn-primary .zdr-mark, .btn-primary .as-mark{ color:inherit; }
h2.sec .zdr-mark{ font-size:.82em; }

/* Deep pages load kpx-home.css, whose mandatory scroll-snap has no
   panels to stop on there — only the footer — so the browser opened
   those pages scrolled to the bottom. Snap only where panels exist. */
html:not(:has(.panel)){ scroll-snap-type:none; }


/* eyebrows were a flex row, so an inline product mark split the line
   into gapped chunks ("KINGPIN   MESH   · DISPATCH") — run it as text */
.eyebrow{ display:block; position:relative; padding-left:16px; line-height:1.6; }
.eyebrow::before{ position:absolute; left:0; top:.55em; }
.eyebrow .mesh-mark, .eyebrow .er-mark, .eyebrow .zdr-mark, .eyebrow .as-mark{ font-family:inherit; letter-spacing:inherit; font-weight:700; }
.eyebrow .zdr-mark sup{ display:none; }


/* Contrast (WCAG 2.2 AA, measured over the photo bands): small text never
   uses the dim token — --hv-fg4 is 2.5:1 on white. Figures and licence
   numbers step up to --hv-fg3 (4.8:1). Brand marks (pink ™ and full
   stop, the aqua in aquasentinel) are logotype and exempt. */
.rail .st .ix, .person .lic, .founder .lic, .steps li::before, .card .num, .rollout .r .num,
.phone .step .k, .contact-card .row .k{ color:var(--hv-fg3) !important; }
.ph .rail .st .sub, .ph .note, .ph .statband .s .l, .ph .person .role, .ph .kicker, .ph .eyebrow,
.ph .scroll-cue, .ph .big-lede[style*="--mid"], .ph .lede[style*="--mid"]{ color:var(--hv-fg2) !important; }
.ph .rail .st .ix, .ph .person .lic, .ph .whoami, .ph .tagline{ color:var(--hv-fg2) !important; }
@media all /* light always on, 19 Sep 2026 */{
  .ph{ --hv-link:#004C9E; --aqua-light:#004C9E; }   /* 4.5:1 holds over the veil; #0077E6 only clears it on flat white */
}


/* ---------- hero: a preview of each business, not four grey tiles ---------- */
.chain a{ overflow:hidden; }
.chain .thumb{
  display:block; margin:-22px -22px 6px; height:clamp(64px,9vh,104px);
  background-size:cover; background-position:center; filter:grayscale(.1) contrast(.98);
  border-bottom:1px solid var(--hv-ln); transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.chain a:hover .thumb{ transform:scale(1.05); filter:none; }
.chain a[href="#aquasentinel"] .thumb{ background-position:70% center; }
@media (max-height:960px) and (min-width:901px){ .chain .thumb{ margin:-18px -18px 4px; height:clamp(56px,8vh,86px); } }
.hero-line{ font-size:clamp(1.9rem,4.4vw,3.7rem); max-width:10.45em; }
@media (max-height:960px) and (min-width:901px){ .hero-line{ font-size:clamp(1.6rem,4.3vh,3rem); } }
.kpx-mark{ font-size:clamp(2.4rem,6vw,4.6rem); }
@media (max-height:960px) and (min-width:901px){ .kpx-mark{ font-size:clamp(2.2rem,5.6vh,4rem); } }
@media (prefers-reduced-motion:reduce){ .chain .thumb{ transition:none; } }


/* ---------- photographs: AVIF → WebP → JPEG, a smaller file on phones ----------
   Set here rather than inline so the browser can pick format and size.
   Each page preloads its own hero in the <head>. */
.kx-bg-hero{ background-image:url(../images/kx-hero.jpg); background-image:image-set(url(../images/kx-hero.avif) type("image/avif"), url(../images/kx-hero.webp) type("image/webp"), url(../images/kx-hero.jpg) type("image/jpeg")); }
.kx-bg-mesh{ background-image:url(../images/kx-mesh.jpg); background-image:image-set(url(../images/kx-mesh.avif) type("image/avif"), url(../images/kx-mesh.webp) type("image/webp"), url(../images/kx-mesh.jpg) type("image/jpeg")); }
.kx-bg-er{ background-image:url(../images/kx-er.jpg); background-image:image-set(url(../images/kx-er.avif) type("image/avif"), url(../images/kx-er.webp) type("image/webp"), url(../images/kx-er.jpg) type("image/jpeg")); }
.kx-bg-zdr{ background-image:url(../images/kx-zdr.jpg); background-image:image-set(url(../images/kx-zdr.avif) type("image/avif"), url(../images/kx-zdr.webp) type("image/webp"), url(../images/kx-zdr.jpg) type("image/jpeg")); }
.kx-bg-aqua{ background-image:url(../images/kx-aqua.jpg); background-image:image-set(url(../images/kx-aqua.avif) type("image/avif"), url(../images/kx-aqua.webp) type("image/webp"), url(../images/kx-aqua.jpg) type("image/jpeg")); }
.kx-bg-storm{ background-image:url(../images/kx-storm.jpg); background-image:image-set(url(../images/kx-storm.avif) type("image/avif"), url(../images/kx-storm.webp) type("image/webp"), url(../images/kx-storm.jpg) type("image/jpeg")); }
.kx-bg-site{ background-image:url(../images/kx-site.jpg); background-image:image-set(url(../images/kx-site.avif) type("image/avif"), url(../images/kx-site.webp) type("image/webp"), url(../images/kx-site.jpg) type("image/jpeg")); }
.kx-bg-damage{ background-image:url(../images/kx-damage.jpg); background-image:image-set(url(../images/kx-damage.avif) type("image/avif"), url(../images/kx-damage.webp) type("image/webp"), url(../images/kx-damage.jpg) type("image/jpeg")); }
.kx-bg-capture{ background-image:url(../images/kx-capture.jpg); background-image:image-set(url(../images/kx-capture.avif) type("image/avif"), url(../images/kx-capture.webp) type("image/webp"), url(../images/kx-capture.jpg) type("image/jpeg")); }
@media (max-width:900px){
  .kx-bg-hero{ background-image:url(../images/kx-hero-1080.jpg); background-image:image-set(url(../images/kx-hero-1080.avif) type("image/avif"), url(../images/kx-hero-1080.webp) type("image/webp"), url(../images/kx-hero-1080.jpg) type("image/jpeg")); }
  .kx-bg-mesh{ background-image:url(../images/kx-mesh-1080.jpg); background-image:image-set(url(../images/kx-mesh-1080.avif) type("image/avif"), url(../images/kx-mesh-1080.webp) type("image/webp"), url(../images/kx-mesh-1080.jpg) type("image/jpeg")); }
  .kx-bg-er{ background-image:url(../images/kx-er-1080.jpg); background-image:image-set(url(../images/kx-er-1080.avif) type("image/avif"), url(../images/kx-er-1080.webp) type("image/webp"), url(../images/kx-er-1080.jpg) type("image/jpeg")); }
  .kx-bg-zdr{ background-image:url(../images/kx-zdr-1080.jpg); background-image:image-set(url(../images/kx-zdr-1080.avif) type("image/avif"), url(../images/kx-zdr-1080.webp) type("image/webp"), url(../images/kx-zdr-1080.jpg) type("image/jpeg")); }
  .kx-bg-aqua{ background-image:url(../images/kx-aqua-1080.jpg); background-image:image-set(url(../images/kx-aqua-1080.avif) type("image/avif"), url(../images/kx-aqua-1080.webp) type("image/webp"), url(../images/kx-aqua-1080.jpg) type("image/jpeg")); }
  .kx-bg-storm{ background-image:url(../images/kx-storm-1080.jpg); background-image:image-set(url(../images/kx-storm-1080.avif) type("image/avif"), url(../images/kx-storm-1080.webp) type("image/webp"), url(../images/kx-storm-1080.jpg) type("image/jpeg")); }
  .kx-bg-site{ background-image:url(../images/kx-site-1080.jpg); background-image:image-set(url(../images/kx-site-1080.avif) type("image/avif"), url(../images/kx-site-1080.webp) type("image/webp"), url(../images/kx-site-1080.jpg) type("image/jpeg")); }
  .kx-bg-damage{ background-image:url(../images/kx-damage-1080.jpg); background-image:image-set(url(../images/kx-damage-1080.avif) type("image/avif"), url(../images/kx-damage-1080.webp) type("image/webp"), url(../images/kx-damage-1080.jpg) type("image/jpeg")); }
  .kx-bg-capture{ background-image:url(../images/kx-capture-1080.jpg); background-image:image-set(url(../images/kx-capture-1080.avif) type("image/avif"), url(../images/kx-capture-1080.webp) type("image/webp"), url(../images/kx-capture-1080.jpg) type("image/jpeg")); }
}
.kx-thumb-mesh{ background-image:url(../images/kx-mesh-1080.jpg); background-image:image-set(url(../images/kx-mesh-560.webp) type("image/webp"), url(../images/kx-mesh-1080.jpg) type("image/jpeg")); }
.kx-thumb-er{ background-image:url(../images/kx-er-1080.jpg); background-image:image-set(url(../images/kx-er-560.webp) type("image/webp"), url(../images/kx-er-1080.jpg) type("image/jpeg")); }
.kx-thumb-zdr{ background-image:url(../images/kx-zdr-1080.jpg); background-image:image-set(url(../images/kx-zdr-560.webp) type("image/webp"), url(../images/kx-zdr-1080.jpg) type("image/jpeg")); }
.kx-thumb-aqua{ background-image:url(../images/kx-aqua-1080.jpg); background-image:image-set(url(../images/kx-aqua-560.webp) type("image/webp"), url(../images/kx-aqua-1080.jpg) type("image/jpeg")); }

/* ---------- accessibility ----------
   Headings no longer skip a level (h2 → h3), so the step / Q&A / checklist
   titles that were h4 are h3 — styled identically. Links inside running
   text are underlined, not colour-only (WCAG 1.4.1). */
.steps li h3{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; font-size:1rem; letter-spacing:-.01em; color:var(--hv-fg); margin-bottom:4px; }
.qa h3{ font-family:'Inter','Inter Fallback',sans-serif; font-weight:600; font-size:1rem; letter-spacing:-.01em; color:var(--hv-fg); margin-bottom:7px; line-height:1.25; }
.joincols h3{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--hv-fg3); margin-bottom:12px; }
.kpx-footer .fcontact a, .lede a, .sec-sub a, .big-lede a, .note a{
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
}
.kpx-footer .fcontact a:hover, .lede a:hover, .sec-sub a:hover{ text-decoration-color:currentColor; }
:where(a, button, input, textarea, label, [tabindex]):focus-visible{
  outline:2px solid var(--hv-link); outline-offset:3px; border-radius:6px;
}


.btn .as-mark .a{ color:inherit; }   /* a logotype inside a button label must still read */
.kpx-footer .fcontact a, .lede a, .sec-sub a, .big-lede a, .note a{ text-decoration-line:underline !important; }
/* Phones: heroes start at the top. A vertically centred hero moves as a
   whole whenever its content height changes by a pixel (font swap), which
   Lighthouse scores as layout shift. */
@media (max-width:900px){
  .hero{ justify-content:flex-start; padding-top:clamp(96px,14vh,128px); }
}
/* phones: the nav row scrolls sideways — fade its right edge so that reads as "more" */
@media (max-width:860px){
  .kpx-nav .links{ -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent); padding-right:28px; }
}

/* ---------- the lockup (Brand Guidelines v1.0, "the one asset nobody may improvise on")
   Kingpin ink Poppins 700 · X in signal pink, always · globe between the words
   at 0.62em · Mesh ink Light 300 · ™ pink 0.42em top-aligned · full stop pink.
   Below the 120px minimum (eyebrows, running copy) the guide says use KingpinX
   alone — so small labels stay plain and pink is kept to one mark per view. */
.xp{ font-style:normal; font-weight:700; color:var(--signal); }
.tm{ color:var(--signal); font-size:.42em; vertical-align:super; font-weight:500; letter-spacing:0; }
.prod-mark .tm, .chain .nm .tm{ font-size:.34em; }
canvas.kp-globe{ width:.62em; height:.62em; vertical-align:-.02em; margin:0 .14em; }
.chain .nm canvas.kp-globe{ margin:0 .12em; }
.prod-inline{ font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; letter-spacing:-.045em; color:var(--hv-fg); }
.prod-inline b{ font-weight:300; }
h2.sec .prod-inline{ font-size:.86em; }
.prod-mark .punc{ color:var(--signal); font-weight:700; }
.chain .nm .wm-drop{ display:inline-block; width:.42em; height:.56em; margin:0 .05em; transform:translateY(.04em); }
.chain .nm .wm-drop svg{ width:100%; height:100%; display:block; }

/* ---------- contrast on the flat sections (axe / Lighthouse findings) ----------
   Harvey's link blue #0077E6 is 4.2:1 on the #F9FAFB ground — under AA for body
   text. Light theme uses a deeper blue; dark theme keeps #6FB3FF (already AA).
   "Aqua" set in running copy takes the console's own light-theme text blue
   (#1279C2). The wordmark lockups keep brand #2EA3F2 — logotype, exempt. */
@media all /* light always on, 19 Sep 2026 */{
  :root{ --hv-link:#0062C4; --aqua-light:#0062C4; }
  .as-mark .a{ color:#1279C2; }
  .alertcard .ah{ color:#C4004F; }
  .alertcard .ah::before{ background:#C4004F; }
  /* pink carrying INFORMATION (a timestamp, a status) is not logotype and must
     meet AA; the marks keep brand #FF2D78 */
  .timeline li.hot .t, .rollout .r .st.next, .chain .st .next, .jprod .tagx.next,
  .joincols h3, .standalone .tag, .report .blk .bt{ color:#C4004F; }
  .rollout .r .st.next{ border-color:rgba(196,0,79,.45); }
}

/* ZDR page-one replica: the lockup leads from the left (the business identity
   block that sat there has been removed) */
.zdrdoc .zd-head{ justify-content:flex-start; }
.zdrdoc .zd-lock{ text-align:left; }
.zdrdoc .zd-brand{ justify-content:flex-start; }
.zdrdoc .zd-brand .xp{ color:var(--signal); font-style:normal; font-weight:700; }
.zdrdoc .zd-brand{ gap:10px; }
.zdrdoc .zd-brand .zd-k{ white-space:nowrap; }   /* KingpinX is one word — no flex gap inside it */

/* ══════════ Brad's brief, 2026-09-16: a building company with tech behind it ══════════ */

/* Trust strip under the nav — the licence numbers a builder's site puts above
   the fold (item 12). Sticky under the nav on desktop, scrollable on a phone. */
.trustbar{ position:fixed; top:57px; left:0; right:0; z-index:49;
  background:color-mix(in srgb, var(--hv-s) 92%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hv-ln); }
.trustbar .tb-in{ max-width:1340px; margin:0 auto; padding:7px clamp(20px,5vw,80px);
  display:flex; gap:clamp(12px,2.4vw,30px); flex-wrap:wrap; align-items:center;
  font-family:'Inter','Inter Fallback',sans-serif; font-size:11.5px; letter-spacing:.02em; color:var(--hv-fg3); }
.trustbar .tb-in span{ white-space:nowrap; }
.trustbar .tb-in b{ color:var(--hv-fg); font-weight:600; }
/* Snap lands each panel flush at the top of the screen (2026-09-17). The 92px
   margin that used to live here also offset every SNAP, so each stop showed the
   last 92px of the panel above and cut 92px off the bottom of the current one.
   Panels now clear the fixed nav + trust strip with their own padding instead. */
.panel{ scroll-margin-top:0; }
@media (min-width:901px){
  .panel{ padding-top:clamp(108px,13vh,128px); }
  /* the slim AquaSentinel band is still a page of its own, so snapping never
     parks on a strip with half of the next panel under it */
  html .panel.slim{ min-height:100svh; }
}
@media (max-width:860px){
  .trustbar{ top:47px; }
  .trustbar .tb-in{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; font-size:11px; gap:14px;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent); mask-image:linear-gradient(90deg,#000 86%,transparent); }
  .trustbar .tb-in::-webkit-scrollbar{ display:none; }
}
#top{ padding-top:clamp(112px,15vh,150px); }

/* The hook a trade reads before anything else */
.hero-hook{ font-family:'Inter','Inter Fallback',sans-serif; font-size:clamp(.98rem,1.25vw,1.1rem); line-height:1.6;
  color:var(--hv-fg2); max-width:52ch; margin:14px 0 0; }
.hero-hook b{ color:var(--hv-fg); font-weight:600; }
.home-hero .cta-row{ margin-top:clamp(18px,2.6vh,28px); }

/* The four businesses as one quiet line, not four product tiles (item 3) */
.chainstrip{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,3.4vh,40px); }
.chainstrip a{ flex:1 1 200px; display:flex; flex-direction:column; gap:3px; text-decoration:none;
  background:color-mix(in srgb, var(--hv-s) 90%, transparent); border:1px solid var(--hv-ln); border-radius:12px;
  padding:12px 14px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:border-color .2s ease; }
.chainstrip a:hover{ border-color:var(--hv-fg5); }
.chainstrip b{ font-family:'Poppins','Poppins Fallback',sans-serif; font-weight:700; letter-spacing:-.04em;
  font-size:clamp(.95rem,1.15vw,1.08rem); color:var(--hv-fg); }
.chainstrip b .a{ color:#2EA3F2; }
.chainstrip span{ font-size:12.5px; color:var(--hv-fg2); }
.chainstrip i{ font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.1em; margin-top:4px; }
.chainstrip i.live{ color:var(--hv-ok); }
.chainstrip i.next{ color:var(--hv-fg2); }
@media(max-width:640px){ .chainstrip a{ flex:1 1 100%; } }

/* Licences as visible trust marks, not small print (item 4) */
.licstrip{ display:flex; flex-wrap:wrap; gap:8px; margin:clamp(16px,2.4vh,26px) 0 0; }
.licstrip span{ font-family:'Inter','Inter Fallback',sans-serif; font-size:12px; color:var(--hv-fg2);
  background:color-mix(in srgb, var(--hv-s) 88%, transparent); border:1px solid var(--hv-ln); border-radius:999px;
  padding:6px 13px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); white-space:nowrap; }
.licstrip span b{ color:var(--hv-fg); font-weight:600; }

/* ER: credentials before the process diagram (item 8) */
.credstrip{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(14px,2.2vh,22px); }
.credstrip span{ position:relative; font-family:'Inter','Inter Fallback',sans-serif; font-size:12.5px; color:var(--hv-fg2);
  padding-left:20px; margin-right:12px; }
.credstrip span::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--hv-fg); font-weight:600; }

/* AquaSentinel, deliberately slim (item 10) */
.panel.slim{ min-height:0; padding-top:clamp(56px,9vh,90px); padding-bottom:clamp(48px,8vh,84px); }
.aqua-slim{ display:flex; gap:clamp(20px,4vw,56px); align-items:flex-end; flex-wrap:wrap; }
.aqua-slim > div:first-child{ flex:1 1 520px; }
.aqua-side{ display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  background:color-mix(in srgb, var(--hv-g) 82%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid color-mix(in srgb, var(--hv-s) 60%, transparent); border-radius:14px; padding:14px 18px; }
.aqua-side .st{ font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; }
.aqua-side .st .next{ color:var(--hv-fg2); }
.aqua-side .deeper{ margin-top:0; }

/* Join: the deal in four lines, before the six-step process */
.deal{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.8vw,22px);
  margin-top:clamp(18px,2.8vh,30px); }
@media(max-width:900px){ .deal{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .deal{ grid-template-columns:1fr; } }
.deal .d{ border-top:1px solid var(--hv-ln); padding-top:12px; }
.deal .k{ display:block; font-family:'Inter','Inter Fallback',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--hv-fg3); margin-bottom:6px; }
.deal p{ font-size:14px; line-height:1.5; color:var(--hv-fg2); }
.deal b{ color:var(--hv-fg); font-weight:600; }

/* ---------- Brad review 2026-09-17: the KingpinX mark reads first ---------- */
.kpx-mark.kpx-mark-lg{ font-size:clamp(3.8rem,10.4vw,8rem); margin-bottom:clamp(8px,1.4vh,16px); }
@media (max-height:960px) and (min-width:901px){ .kpx-mark.kpx-mark-lg{ font-size:clamp(3.2rem,9vh,6.4rem); } }
@media (max-width:900px){ .kpx-mark.kpx-mark-lg{ font-size:clamp(3.4rem,17vw,5.2rem); } }
.hero-what{
  font-family:'EB Garamond','EB Garamond Fallback',serif; font-weight:500; letter-spacing:-.015em; line-height:1.1;
  font-size:clamp(1.7rem,3.4vw,2.9rem); color:var(--hv-fg); max-width:17em; text-wrap:balance; margin:0 0 clamp(10px,1.6vh,18px);
}
.hero-what .em{ font-style:italic; font-weight:400; }
.hero-what .punc{ color:var(--signal); }
.hero-built{ font-family:'Inter','Inter Fallback',sans-serif; color:var(--hv-fg2); font-size:clamp(.95rem,1.3vw,1.1rem); max-width:34em; margin:0 0 clamp(12px,2vh,22px); }
.hero-built b{ color:var(--hv-fg); font-weight:600; }
.prod-mark.prod-mark-lg{ font-size:clamp(2.6rem,5.4vw,4.2rem); }
@media (max-height:960px) and (min-width:901px){ .prod-mark.prod-mark-lg{ font-size:clamp(2.3rem,6vh,3.6rem); } }

/* short laptops (≤840px tall): hold every panel to one screen so snap stays flush */
@media (max-height:840px) and (min-width:901px){
  .panel{ padding-top:98px; padding-bottom:16px; }
  #top{ padding-top:104px; }
  #group-founders .prod-mark.prod-mark-lg{ font-size:2.1rem; margin-bottom:6px; }
  #group-founders h2.big{ font-size:1.8rem; margin-bottom:8px; }
  #group-founders .big-lede{ font-size:.95rem; line-height:1.48; }
  #group-founders .licstrip{ margin-top:10px; }
  #group-founders .whoami{ margin-top:10px; margin-bottom:6px; }
  #group-founders .person p{ font-size:.84rem; line-height:1.45; }
  #zdr-report .zdrdoc{ max-height:520px; }
  #zdr-report .qa p{ font-size:.86rem; line-height:1.45; }
  #zdr-report .chips{ margin-top:12px !important; }
  #join .sec-head{ margin-bottom:12px; }
  #join .deal, #join .rail{ margin-top:10px; }
  #join .joinbox{ margin-top:12px; padding-top:14px; padding-bottom:14px; }
  #join .joinbox .cta-row{ margin-top:14px !important; }
  #group-founders .people{ margin-top:6px; }
  #group-founders .person{ padding-top:10px; padding-bottom:10px; }
  #group-founders .person .nm{ font-size:1.25rem; }
  #group-founders .big-lede + .big-lede{ margin-top:6px; }
  #join .big-lede{ font-size:.95rem; }
  #join .rail .sub, #join .deal p{ font-size:.82rem; line-height:1.4; }
  #er .rail .sub{ font-size:.84rem; line-height:1.42; }
}
@media (max-height:740px) and (min-width:901px){
  #group-founders .prod-mark.prod-mark-lg{ font-size:1.8rem; margin-bottom:2px; }
  #group-founders h2.big{ font-size:1.6rem; }
  #group-founders .big-lede{ font-size:.9rem !important; line-height:1.42; }
  #group-founders h2.big{ margin-top:6px; }
  #group-founders .licstrip span{ padding-top:4px; padding-bottom:4px; font-size:.74rem; }
  #group-founders .person p{ font-size:.8rem; line-height:1.4; margin-top:4px; }
  #group-founders .person .role{ margin-top:2px; }
}