/* =========================================================
   Kingery Plumbing LLC
   Palette sampled from the logo artwork: #186CB5 / #F5D11B / #012353
   ========================================================= */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/archivo-var.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('fonts/archivo-var-italic.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url('fonts/ibm-plex-sans-var.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:100 700;font-display:swap;
  src:url('fonts/ibm-plex-sans-var-italic.woff2') format('woff2');}

:root{
  --blue:#186CB5;  --blue-deep:#125291;
  --navy:#012353;  --navy-soft:#0A3164;
  --yellow:#F5D11B; --yellow-deep:#C9A70E;
  --ink:#10192B;   --ink-soft:#3D4A5E;
  --line:#D8E0EA;  --wash:#EFF4F9;  --paper:#fff;
  --card:#fff;                       /* raised surface: tiles, stat cells, town cells */
  --hdr-bg:rgba(255,255,255,.96);
  --ft-bg:#01193B;
  --chip-bg:#E8F1FA;                 /* soft plate behind a service icon */
  --grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M52 0H0v52' fill='none' stroke='%23186CB5' stroke-opacity='.075' stroke-width='1'/%3E%3C/svg%3E");

  --disp:'Archivo',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  color-scheme:light dark;

  --wrap:1140px;
  --pad:clamp(76px,9vw,124px);
  --hdr-h:68px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink-soft);
  font-family:var(--body);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-family:var(--disp);color:var(--ink);margin:0;line-height:1.12;letter-spacing:-.015em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
.hero :focus-visible,.cta :focus-visible,.ft :focus-visible,.vans :focus-visible{outline-color:var(--yellow)}

.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:#fff;
  padding:11px 18px;border-radius:8px;font-weight:600;text-decoration:none;transition:top .18s}
.skip:focus{top:12px}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--yellow);flex:none;border-radius:2px}
.eyebrow--on-dark{color:var(--yellow)}
.eyebrow--on-dark::before{background:var(--yellow)}

.sec{padding-block:var(--pad)}
.sec--wash{background:var(--wash);border-block:1px solid var(--line)}
/* faint drafting grid: a trade-drawing cue, kept low enough not to muddy body copy */
.sec--grid{background-color:var(--paper);
  background-image:var(--grid)}
.sec__h2{font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:800;margin-bottom:.5em}
.sec__lede{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;max-width:48ch;margin-bottom:2.6em}

/* ---------- buttons ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border-radius:10px;border:2px solid transparent;
  font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s,border-color .18s,color .18s,transform .1s;
}
.btn .ic{width:20px;height:20px;flex:none;fill:currentColor;transition:transform .18s}
.btn__lbl{position:relative;z-index:2;white-space:nowrap}
.btn--sm{min-height:44px;padding:0 16px;font-size:.95rem;border-radius:9px}

.btn--call{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.btn--call:hover{background:#FFE04A;border-color:#FFE04A}
.btn--call:hover .ic{transform:translateX(2px)}
.btn--call:active{transform:scale(.97)}

.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn--ghost:active{transform:scale(.97)}

/* miniature "charge" replay of the hero motif, on press */
.btn::after{content:"";position:absolute;inset:0;z-index:1;transform:translateX(-101%);
  background:linear-gradient(90deg,var(--blue) 0 72%,var(--yellow) 72% 100%);opacity:0}
.btn.is-charging::after{animation:btn-charge .55s cubic-bezier(.4,0,.2,1) forwards}
.btn.is-charging .btn__lbl,.btn.is-charging .ic{color:#fff;position:relative;z-index:2}
@keyframes btn-charge{
  0%{transform:translateX(-101%);opacity:1}
  70%{transform:translateX(0);opacity:1}
  100%{transform:translateX(0);opacity:0}
}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:transparent;transition:background-color .25s,box-shadow .25s,border-color .25s;
  border-bottom:1px solid transparent}
.hdr.is-stuck{background:var(--hdr-bg);backdrop-filter:saturate(140%) blur(8px);
  border-bottom-color:var(--line);box-shadow:0 4px 20px -12px rgba(1,35,83,.4)}
.hdr__in{display:flex;align-items:center;gap:16px;min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:44px}
.brand__mark{width:38px;height:38px;object-fit:contain}
.brand__txt{display:flex;flex-direction:column;line-height:1;font-family:var(--disp)}
.brand__txt b{font-size:1.12rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.brand__txt span{font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:3px}
.hdr.is-stuck .brand__txt b{color:var(--navy)}
.hdr.is-stuck .brand__txt span{color:var(--blue)}

.nav{display:none;gap:26px}
.nav a{position:relative;font-weight:500;font-size:.98rem;color:rgba(255,255,255,.88);text-decoration:none;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .22s}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.hdr.is-stuck .nav a{color:var(--ink-soft)}
.hdr.is-stuck .nav a:hover{color:var(--navy)}

.hdr__act{display:flex;align-items:center;gap:10px}
.hdr .btn--call{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}

.burger{display:grid;place-content:center;gap:5px;width:44px;height:44px;border:0;border-radius:9px;
  background:rgba(255,255,255,.12);cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .22s,opacity .18s}
.hdr.is-stuck .burger{background:var(--wash)}
.hdr.is-stuck .burger span{background:var(--navy)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:rgba(255,255,255,.82);overflow:hidden;
  margin-top:calc(var(--hdr-h) * -1);padding-top:calc(var(--hdr-h) + clamp(48px,8vw,92px));
  padding-bottom:max(84px,calc(9.375vw + 38px))}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 38%;z-index:0}
/* Two stacked scrims. The first keeps the headline column at >=88% navy so white
   type holds its contrast over the photograph; the second sinks the bottom edge
   into navy so the pipe run and the next section meet a solid ground. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(1,35,83,.97) 0%,rgba(1,35,83,.93) 34%,rgba(1,35,83,.66) 64%,rgba(1,35,83,.48) 100%),
    linear-gradient(to bottom,rgba(1,35,83,.62) 0%,rgba(1,35,83,.18) 26%,rgba(1,35,83,.88) 88%,var(--navy) 100%)}
.hero__in{position:relative;z-index:3}

.pipe{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;
  aspect-ratio:1600/150;z-index:2;opacity:.95;pointer-events:none}
.pipe path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pipe__empty{stroke:var(--navy-soft);stroke-width:18}
.pipe__water{stroke:var(--blue);stroke-width:18}
.pipe__edge{stroke:var(--yellow);stroke-width:18;stroke-dasharray:40 1000;stroke-dashoffset:-1000}
.pipe__collars line{stroke:var(--yellow);stroke-width:8;stroke-linecap:round}

.hero__h1{font-size:clamp(2.6rem,6.4vw,4.7rem);font-weight:800;line-height:1.03;letter-spacing:-.022em;
  color:#fff;max-width:16ch;margin-bottom:.34em}
.hero__h1 em{font-style:italic;color:var(--yellow)}
.rv{display:block;overflow:hidden;padding-bottom:.04em}
.rv__i{display:block}

.hero__lede{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.62;max-width:50ch;margin-bottom:1.7em;color:rgba(255,255,255,.8)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.8em}
/* ---------- at a glance ---------- */
.stats{background:var(--card);border-top:4px solid var(--yellow);
  border-bottom:1px solid var(--line)}
.stats__in{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.stats li{background:var(--card);padding:26px 18px;text-align:center}
.stats b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,4.4vw,2.6rem);
  line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stats b i{font-style:normal;color:var(--yellow-deep);margin-left:.06em}
.stats span{display:block;margin-top:8px;font-size:.9rem;line-height:1.4;color:var(--ink-soft)}

/* load-time animation: applied only when JS confirms first paint,
   so the no-JS/no-class default is already the finished state */
.go .pipe__water{animation:charge 1.15s cubic-bezier(.32,.06,.2,1) .1s backwards}
.go .pipe__edge{animation:charge-edge 1.15s cubic-bezier(.32,.06,.2,1) .1s backwards}
.go .pipe__collars line{animation:collar .3s ease-out var(--d,0ms) backwards}
.go .rv__i{animation:rise .78s cubic-bezier(.22,.68,.28,1) .95s backwards}
.go .rv__i--2{animation-delay:1.07s}
.go .hero__lede{animation:fade .6s ease-out 1.15s backwards}
.go .hero__cta{animation:fade .6s ease-out 1.26s backwards}

@keyframes charge{from{stroke-dasharray:1000;stroke-dashoffset:1000}
                  to{stroke-dasharray:1000;stroke-dashoffset:0}}
@keyframes charge-edge{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
@keyframes collar{from{stroke:var(--navy-soft)}to{stroke:var(--yellow)}}
@keyframes rise{from{transform:translateY(104%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- services ---------- */
.grid{display:grid;gap:14px;grid-template-columns:1fr}
.tile{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:2px 2px 2px var(--r);padding:24px 22px 22px;
  transition:transform .2s,border-color .2s,box-shadow .2s}
.tile:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 12px 28px -20px rgba(1,35,83,.55)}
.tile__ic{width:46px;height:46px;padding:11px;box-sizing:border-box;border-radius:13px;
  background:var(--chip-bg);color:var(--blue);fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px;
  transition:background-color .2s,color .2s}
.tile:hover .tile__ic{background:var(--blue);color:#fff}
.tile h3{font-size:1.15rem;font-weight:700;letter-spacing:-.005em}
.rule{display:block;width:24px;height:3px;background:var(--yellow);border-radius:2px;margin:10px 0 12px;
  transition:width .28s cubic-bezier(.4,0,.2,1)}
.tile:hover .rule{width:100%}
.tile p{font-size:.96rem;line-height:1.62;margin:0}
.tile--ask{background:var(--navy);border-color:var(--navy)}
.tile--ask h3{color:#fff}
.tile--ask p{color:rgba(255,255,255,.76)}
.tile--ask:hover{border-color:var(--yellow)}
.tile__lnk{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:44px;
  font-family:var(--disp);font-weight:700;color:var(--yellow);text-decoration:none}
.tile__lnk span{transition:transform .2s}
.tile__lnk:hover span{transform:translateX(4px)}

/* ---------- why ---------- */
.why{display:grid;gap:clamp(36px,5vw,72px);grid-template-columns:1fr}
.why__lead p{max-width:52ch}
.why__quote{font-family:var(--disp);font-style:italic;font-weight:600;font-size:1.35rem;
  color:var(--ink);border-left:3px solid var(--yellow);padding-left:18px;margin-top:1.6em}
.why__list li{border-top:1px solid var(--line);padding:22px 0 20px;position:relative;transition:color .2s}
.why__list li::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:3px;background:var(--yellow);
  transition:width .3s cubic-bezier(.4,0,.2,1)}
.why__list li:hover::before{width:100%}
.why__list li:last-child{border-bottom:1px solid var(--line)}
.why__list h3{font-size:1.08rem;font-weight:700;margin-bottom:5px}
.why__list p{margin:0;font-size:.97rem;line-height:1.6}

/* ---------- van band ---------- */
.vans{position:relative;background:var(--navy)}
.vans img{width:100%;height:clamp(260px,40vw,440px);object-fit:cover;object-position:center 34%;opacity:.92}
.vans__cap{position:absolute;inset:auto 0 0 0;padding:clamp(30px,5vw,54px) 0;
  background:linear-gradient(to top,rgba(1,35,83,.95) 10%,rgba(1,35,83,.74) 55%,transparent 100%)}
.vans__cap h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;color:#fff;margin-bottom:.35em}
.vans__cap p{color:rgba(255,255,255,.82);max-width:44ch;margin:0;font-size:1rem}

/* ---------- service area ---------- */
.area{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:2px 2px 2px var(--r);overflow:hidden;margin-bottom:1.8em}
.area li{display:flex;align-items:center;gap:12px;background:var(--card);padding:22px 20px;
  font-family:var(--disp);font-weight:700;font-size:1.08rem;color:var(--ink)}
.area .ic{width:22px;height:22px;flex:none;color:var(--blue);fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.area__note{max-width:56ch;font-size:1rem}

/* ---------- final CTA ---------- */
.cta{background:var(--navy);color:rgba(255,255,255,.8);padding-block:var(--pad);text-align:center}
.cta__in{display:flex;flex-direction:column;align-items:center}
.cta .eyebrow{justify-content:center}
.cta__h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;color:#fff;margin-bottom:.3em}
.cta__num{display:inline-block;font-family:var(--disp);font-weight:800;font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,7vw,3.4rem);letter-spacing:-.02em;color:var(--yellow);text-decoration:none;
  padding:6px 4px;margin-bottom:.5em;transition:color .18s}
.cta__num:hover{color:#FFE04A;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:26px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;cursor:pointer;
  background:var(--navy-soft);border:1px solid rgba(255,255,255,.18);border-radius:999px;
  color:rgba(255,255,255,.9);font-family:var(--body);font-size:.95rem;
  transition:border-color .18s,background-color .18s;max-width:100%}
.chip:hover{border-color:var(--yellow);background:#0D3A73}
.chip .ic{width:18px;height:18px;flex:none;color:var(--yellow);fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta__hours{margin:22px 0 0;font-size:.88rem;color:rgba(255,255,255,.55)}

/* ---------- footer ---------- */
.ft{background:var(--ft-bg);color:rgba(255,255,255,.66);padding-top:clamp(46px,6vw,70px);font-size:.95rem}
.ft__in{display:grid;gap:32px;grid-template-columns:1fr;padding-bottom:40px}
.ft h3{font-family:var(--disp);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:12px}
.ft p{margin:0;line-height:1.8}
.ft a{color:rgba(255,255,255,.82);text-decoration:none}
.ft a:hover{color:var(--yellow);text-decoration:underline}
.ft__brand img{width:64px;height:64px;margin-bottom:14px}
.ft__tag{font-family:var(--disp);font-style:italic;font-weight:600;color:rgba(255,255,255,.78);max-width:26ch}
.ft__base{border-top:1px solid rgba(255,255,255,.1);padding-block:14px;font-size:.85rem;
  color:rgba(255,255,255,.45);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:2px 24px}
.ft__base p{margin:0}
.ft__by{display:flex;align-items:center;gap:.35em;min-height:44px}
.ft__by a{color:rgba(255,255,255,.72);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.24);padding-bottom:1px;transition:color .18s,border-color .18s}
.ft__by a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}

/* =========================================================
   Responsive: mobile-first upward
   ========================================================= */
@media (min-width:560px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .ft__in{grid-template-columns:repeat(2,1fr);gap:36px}
}
@media (min-width:900px){
  :root{--hdr-h:80px}
  .nav{display:flex}
  .burger{display:none}
  .u-sm-hide{display:inline}
  .grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .area{grid-template-columns:repeat(4,1fr)}
  .stats__in{grid-template-columns:repeat(4,1fr)}
  .why{grid-template-columns:1fr 1fr;align-items:start;gap:72px}
  .ft__in{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
  .brand__mark{width:44px;height:44px}
}
@media (max-width:899px){
  /* narrow screens put the type over the middle of the frame, so flatten the
     side-to-side scrim into a straight top-down one */
  .hero::before{background:
    linear-gradient(to bottom,rgba(1,35,83,.90) 0%,rgba(1,35,83,.80) 40%,rgba(1,35,83,.92) 82%,var(--navy) 100%)}
  .hero__bg{object-position:center 42%}
}
@media (max-width:620px){
  .brand__txt span{display:none}
  .brand__txt b{font-size:1.02rem}
  .hdr .btn--sm{font-size:.86rem;padding:0 14px;gap:8px}
  .hdr__in{gap:10px}
}
@media (max-width:899px){
  .u-sm-hide{display:none}
  /* mobile drawer: the call button deliberately stays outside it */
  .nav{position:fixed;inset:0 0 0 auto;width:min(84vw,320px);z-index:150;
    flex-direction:column;gap:4px;justify-content:flex-start;
    background:var(--navy);padding:calc(var(--hdr-h) + 20px) 26px 26px;
    transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:-20px 0 50px -30px rgba(0,0,0,.9)}
  .nav.is-open{display:flex;transform:translateX(0)}
  .nav a{color:#fff;font-family:var(--disp);font-weight:700;font-size:1.22rem;padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.1)}
  .nav a::after{bottom:-1px}
  body.is-locked{overflow:hidden}
  .scrim{position:fixed;inset:0;z-index:140;background:rgba(1,15,35,.55);border:0;padding:0;cursor:pointer}
}
@media (min-width:1100px){
  .hero__h1{max-width:14ch}
}

/* =========================================================
   Reduced motion: every effect collapses to its end state
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .go .pipe__water,.go .pipe__edge,.go .pipe__collars line,
  .go .rv__i,.go .hero__lede,.go .hero__cta{animation:none}
  .pipe__water{stroke-dashoffset:0}
  .pipe__edge{stroke-dashoffset:-1000}
  .btn.is-charging::after{animation:none;opacity:0}
}

/* =========================================================
   Dark theme: a curated one, not the browser's guess.
   Chrome's Auto Dark Theme inverts any page that declares no colour scheme,
   which turned the brand yellow to brown and the white cards to grey. The
   `color-scheme` declaration above stops that; this block does the job
   properly. The brand is already navy-grounded, so the palette drops rather
   than inverts: the page ground goes darker than the navy bands, the surfaces
   lift above it, and the yellow is left untouched because it is the brand and
   it reads better on dark than it ever did on white.
   ========================================================= */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0A1826;                 /* page ground, below everything */
    --card:#12283F;                  /* raised surfaces lift off it */
    --wash:#0E2135;
    --line:#20405F;
    --ink:#ECF2F8;
    --ink-soft:#A9BED2;
    --navy:#0A2A52;                  /* bands sit above the page, not below */
    --navy-soft:#14406E;
    --blue:#5AA5E4;                  /* #186CB5 only clears 2.6:1 on this ground */
    --blue-deep:#3F8ECF;
    --yellow-deep:var(--yellow);     /* the darkened gold is a light-mode fix only */
    --hdr-bg:rgba(10,24,38,.95);
    --ft-bg:#061220;
    --chip-bg:#16324F;
    --grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M52 0H0v52' fill='none' stroke='%236FB2E8' stroke-opacity='.10' stroke-width='1'/%3E%3C/svg%3E");
  }
  /* the hero scrim sits over a photograph and is dark in both themes, but the
     tail has to land on whatever the page ground now is */
  .hero::before{background:
    linear-gradient(100deg,rgba(6,17,30,.97) 0%,rgba(6,17,30,.93) 34%,rgba(6,17,30,.68) 64%,rgba(6,17,30,.50) 100%),
    linear-gradient(to bottom,rgba(6,17,30,.62) 0%,rgba(6,17,30,.20) 26%,rgba(6,17,30,.90) 88%,var(--paper) 100%)}
  .hero{background:#061120}
  .pipe__empty{stroke:#16324F}
  .tile:hover{box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
  .stats{border-bottom-color:var(--line)}
  .chip:hover{background:#1A3D63}
  .hdr.is-stuck{box-shadow:0 4px 22px -14px rgba(0,0,0,.9)}
  .vans img{opacity:.82}
  /* the stuck header inverts: navy-on-white marks become light-on-dark */
  .hdr.is-stuck .brand__txt b{color:var(--ink)}
  .hdr.is-stuck .burger span{background:var(--ink)}
  .hdr.is-stuck .burger{background:var(--card)}
  .hdr.is-stuck .nav a:hover{color:var(--ink)}
  .hero__bg{opacity:.9}
}
@media (max-width:899px) and (prefers-color-scheme:dark){
  .hero::before{background:
    linear-gradient(to bottom,rgba(6,17,30,.90) 0%,rgba(6,17,30,.82) 40%,rgba(6,17,30,.93) 82%,var(--paper) 100%)}
}