/* ==========================================================================
   THEME "SIGNAL" — Superintelligence Systems
   Source: S8 (ryanwigley.com) in the nine-site study. High-contrast monochrome,
   one accent, oversized display type against tiny utilitarian labels, strict
   spacing scale. Extended with S3 and S5 for static-first and editorial measure.

   Deliberately NOT the estate's warm-dark-and-gold house style. No serif
   anywhere. Paper-white base. One vermilion accent that reads as a correction
   mark, not decoration.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#fbfaf7;
  --ink:#0d0d0c;
  --ink-2:#3a3935;
  --muted:#8a877e;
  --rule:#dcd9d1;
  --rule-strong:#c4c0b6;
  --accent:#e8420c;   /* SEE THE RULE BELOW BEFORE USING THIS ANYWHERE */

  /* ======================================================================
     THE ACCENT RULE — vermilion marks the checked thing.
     It is never decoration.

     It appears in exactly four roles, and nowhere else:
       1. A verified measurement   — the counters, the 442 and the 5.0
       2. Current position         — the nav underline, the section dot
       3. The exception            — a tick mark, the one flagged item
       4. The action in progress   — button hover, the cursor

     It must NOT be used as: a background fill, a decorative pattern, a
     heading colour, or a border for its own sake. The moment it decorates
     something, it stops meaning anything and becomes just an orange button.
     ====================================================================== */
  --panel:#f2f0ea;

  /* type scale, one ratio of 1.333 (T-17) */
  --t--1:0.75rem; --t-0:0.9375rem; --t-1:1.25rem; --t-2:1.6667rem;
  --t-3:2.2222rem; --t-4:2.963rem; --t-5:3.9506rem; --t-6:5.2675rem; --t-7:7.0233rem;

  /* strict spacing scale. no arbitrary numbers. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* motion scale (T-47) */
  --dur-1:120ms; --dur-2:220ms; --dur-3:420ms; --dur-4:700ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --display:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --measure:62ch;
  --gutter:clamp(20px,4vw,64px);
  --maxw:1320px;
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--t-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.lbl{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.13em;
     text-transform:uppercase;color:var(--muted)}
.lbl.ink{color:var(--ink)}
.lbl.acc{color:var(--accent)}

.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative}

.skip{position:fixed;top:-200px;left:var(--gutter);z-index:200;background:var(--ink);
      color:var(--paper);padding:var(--s3) var(--s5);font-family:var(--mono);
      font-size:var(--t--1);text-transform:uppercase;letter-spacing:.12em}
.skip:focus{top:var(--s4)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(251,250,247,.92);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hdr .shell{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);height:64px}
.brand{display:flex;align-items:baseline;gap:var(--s3)}
.brand .mark{width:20px;height:20px;flex:0 0 auto;transform:translateY(2px)}
.brand .nm{font-family:var(--display);font-weight:700;font-size:var(--t-1);
           letter-spacing:-.03em;line-height:1}
.nav{display:flex;gap:var(--s6);align-items:center}
.nav a{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;
       color:var(--muted);position:relative;padding:var(--s1) 0;
       transition:color var(--dur-2) var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
              background:var(--accent);transition:right var(--dur-3) var(--ease-out)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}

/* ---------- hero ---------- */
.hero{padding:var(--s9) 0 var(--s8);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s7)}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s9)}}

/* EXTREME type-scale contrast (T-42) */
h1.display{font-family:var(--display);font-weight:700;
  font-size:clamp(2.6rem,8.4vw,var(--t-7));line-height:.92;
  letter-spacing:-.045em;text-transform:uppercase;margin:var(--s5) 0 0}
h1.display .thin{font-weight:300;display:block}
h1.display em{font-style:normal;color:var(--accent)}

.sub{max-width:var(--measure);color:var(--ink-2);font-size:var(--t-1);
     margin-top:var(--s6);line-height:1.5}
.sub strong{color:var(--ink);font-weight:600}

h2.display{font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(1.7rem,3.6vw,var(--t-4));line-height:1.02;text-transform:uppercase}
h3{font-family:var(--display);font-weight:700;font-size:var(--t-2);
   letter-spacing:-.025em;line-height:1.15}

section{padding:var(--s9) 0;border-bottom:1px solid var(--rule)}
section.tight{padding:var(--s8) 0}
.eyebrow{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.eyebrow .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;flex:0 0 auto}

/* ---------- buttons ---------- */
.btns{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s7)}
.btn{display:inline-flex;align-items:center;gap:var(--s3);font-family:var(--mono);
  font-size:var(--t--1);letter-spacing:.11em;text-transform:uppercase;
  padding:var(--s4) var(--s6);border:1.5px solid var(--ink);background:var(--ink);
  color:var(--paper);transition:background var(--dur-2) var(--ease),
  color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
  transform var(--dur-1) var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn .arw{transition:transform var(--dur-2) var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- index list: a table, not a card grid ---------- */
.index{border-top:1px solid var(--rule-strong);margin-top:var(--s7)}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s5);align-items:baseline;
  padding:var(--s5) 0;border-bottom:1px solid var(--rule);position:relative;
  transition:padding-left var(--dur-3) var(--ease-out)}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--accent);transition:width var(--dur-3) var(--ease-out)}
.row:hover{padding-left:var(--s5)}
.row:hover::before{width:3px}
.row .n{font-family:var(--mono);font-size:var(--t--1);color:var(--muted);letter-spacing:.1em}
.row .t{font-family:var(--display);font-weight:700;font-size:var(--t-2);
        letter-spacing:-.025em;line-height:1.15;display:block}
.row .d{color:var(--muted);font-size:var(--t-0);margin-top:var(--s2);
        max-width:var(--measure);display:block}
.row .go{font-family:var(--mono);font-size:var(--t-1);color:var(--rule-strong);
  transition:color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out)}
.row:hover .go{color:var(--accent);transform:translateX(4px)}
@media (max-width:700px){.row{grid-template-columns:auto 1fr;gap:var(--s4)}.row .go{display:none}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
       border-top:1px solid var(--rule-strong)}
.stat{padding:var(--s6) var(--s5) var(--s6) 0;border-right:1px solid var(--rule)}
.stat:last-child{border-right:none}
.stat .v{font-family:var(--display);font-weight:700;font-size:var(--t-5);
  letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.stat .v .u{font-size:var(--t-2);letter-spacing:-.02em;color:var(--muted)}
.stat .k{color:var(--muted);font-size:var(--t--1);font-family:var(--mono);
  letter-spacing:.09em;text-transform:uppercase;margin-top:var(--s3);line-height:1.5}

/* ---------- pull quote ---------- */
.pull{border-left:3px solid var(--accent);padding:var(--s2) 0 var(--s2) var(--s6);
  font-family:var(--display);font-weight:300;font-size:var(--t-3);line-height:1.24;
  letter-spacing:-.03em;max-width:24ch}
.pull b{font-weight:700}

/* ---------- columns ---------- */
.cols{display:grid;grid-template-columns:1fr;gap:var(--s8)}
@media (min-width:860px){.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s9)}}
.cols.three{grid-template-columns:1fr}
@media (min-width:860px){.cols.three{grid-template-columns:repeat(3,minmax(0,1fr))}}

.tick{list-style:none;display:grid;gap:var(--s4);margin-top:var(--s5)}
.tick li{position:relative;padding-left:var(--s6);color:var(--ink-2)}
.tick li::before{content:"";position:absolute;left:0;top:.7em;width:14px;height:1.5px;
                 background:var(--accent)}
.tick li b{color:var(--ink);font-weight:600}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule-strong);margin-top:var(--s6)}
details{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;padding:var(--s5) 0;display:flex;
  justify-content:space-between;gap:var(--s5);align-items:baseline;
  font-family:var(--display);font-weight:700;font-size:var(--t-1);letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary .pm{font-family:var(--mono);color:var(--accent);font-size:var(--t-2);
  transition:transform var(--dur-3) var(--ease-out);line-height:1}
details[open] summary .pm{transform:rotate(45deg)}
details .ans{color:var(--muted);max-width:var(--measure);padding-bottom:var(--s5)}

/* ---------- breadcrumb ---------- */
.crumb{padding-top:var(--s6);display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.crumb a{color:var(--muted);transition:color var(--dur-2) var(--ease)}
.crumb a:hover{color:var(--accent)}
.crumb .sep{color:var(--rule-strong)}

/* ---------- CTA ---------- */
.cta{background:var(--ink);color:var(--paper);padding:var(--s9) 0}
.cta h2{color:var(--paper);max-width:16ch}
.cta p{color:#a8a49a;max-width:52ch;margin-top:var(--s5);font-size:var(--t-1);line-height:1.5}
.cta .eyebrow .lbl{color:#a8a49a}
.cta .btn{background:var(--accent);border-color:var(--accent);color:#fff;margin-top:var(--s7)}
.cta .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:var(--s9) 0 var(--s8)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
       gap:var(--s7);padding-bottom:var(--s7);border-bottom:1px solid var(--rule)}
footer h4{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:var(--s5)}
footer li{list-style:none;margin-bottom:var(--s3)}
footer a{color:var(--ink-2);transition:color var(--dur-2) var(--ease)}
footer a:hover{color:var(--accent)}
.fbase{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  padding-top:var(--s5);color:var(--muted);font-family:var(--mono);font-size:var(--t--1);
  letter-spacing:.06em;text-transform:uppercase}

/* ---------- areas: one distinct entry per city ---------- */
.arealist{border-top:1px solid var(--rule-strong)}
.area{display:grid;grid-template-columns:auto 1fr;gap:var(--s6);align-items:start;
  padding:var(--s7) 0;border-bottom:1px solid var(--rule)}
.area .an{font-family:var(--mono);font-size:var(--t--1);color:var(--muted);
  letter-spacing:.1em;padding-top:var(--s2)}
.acity{font-size:var(--t-3);margin:var(--s2) 0 var(--s4);letter-spacing:-.03em}
.ablurb{color:var(--ink-2);max-width:70ch}
@media (max-width:640px){.area{grid-template-columns:1fr;gap:var(--s2)}.area .an{padding-top:0}}

/* ---------- coverage map (T-09, T-10) ----------
   Accent appears twice here and both are permitted roles: the home node is
   CURRENT POSITION, and a highlighted route is THE ACTION IN PROGRESS. */
.mapfig{margin:0 0 var(--s9)}
.covmap{width:100%;height:auto;display:block;background:var(--panel);
  border:1px solid var(--rule);max-height:640px}
.covmap .grid{stroke:var(--rule);stroke-width:1}
.covmap .lake{fill:var(--rule-strong);opacity:.3}
.covmap .route{stroke:var(--rule-strong);stroke-width:1;stroke-dasharray:3 5;
  transition:stroke var(--dur-2) var(--ease),stroke-width var(--dur-2) var(--ease)}
.covmap .route.on{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:none}
.covmap .node{cursor:pointer;outline:none}
.covmap .node .halo{fill:transparent;transition:fill var(--dur-2) var(--ease)}
.covmap .node .dot{fill:var(--ink);transition:fill var(--dur-2) var(--ease)}
.covmap .node.home .dot{fill:var(--accent)}
.covmap .node .lbl{font-family:var(--mono);font-size:15px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--muted);transition:fill var(--dur-2) var(--ease)}
.covmap .node:hover .dot,.covmap .node:focus-visible .dot{fill:var(--accent)}
.covmap .node:hover .lbl,.covmap .node:focus-visible .lbl{fill:var(--ink)}
.covmap .node:focus-visible .halo{fill:rgba(232,66,12,.12)}
.mapfig figcaption{margin-top:var(--s4)}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s5);
  margin-top:var(--s6)}
.quote{border:1px solid var(--rule);border-left:3px solid var(--accent);
  padding:var(--s6);background:var(--panel);display:flex;flex-direction:column}
/* a quoted client review is the loud one. a factual engagement summary is the
   quiet one. they are different things and must not look alike. */
.quote.review{border-left-color:var(--accent);background:var(--paper);
  grid-column:1/-1;padding:var(--s8)}
.quote.review blockquote{font-size:var(--t-2);line-height:1.4;max-width:60ch}
.quote.summary{border-left-color:var(--rule-strong);background:var(--panel)}
.quote blockquote{font-family:var(--display);font-weight:300;font-size:var(--t-1);
  line-height:1.45;letter-spacing:-.02em;color:var(--ink);flex:1}
.quote figcaption{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:2px}
.quote figcaption b{font-family:var(--display);font-size:var(--t-0);letter-spacing:-.01em}
.quote figcaption span{font-size:13.5px;color:var(--muted)}
.quote .src{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rule-strong);margin-top:var(--s3)}
.quote.review figcaption b{font-size:var(--t-1)}
.quote.review .src{color:var(--accent)}

/* ============ MOTION (T-21 T-24 T-40 T-41 T-45 T-47 T-48 P-23) ============ */

/* scroll reveal. restrained translate only, no scale, no blur. */
[data-reveal]{opacity:0;transform:translateY(14px)}
body.js [data-reveal]{transition:opacity var(--dur-4) var(--ease-out),
  transform var(--dur-4) var(--ease-out);transition-delay:var(--d,0ms)}
body.js [data-reveal].in{opacity:1;transform:none}
body:not(.js) [data-reveal]{opacity:1;transform:none}

/* continuous marquee. pauses on hover, and can be paused globally. */
.marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:var(--s5) 0;background:var(--panel)}
.marquee .track{display:flex;gap:var(--s8);width:max-content;
  animation:slide 42s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee .item{font-family:var(--display);font-weight:700;font-size:var(--t-2);
  letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;gap:var(--s8)}
.marquee .item::after{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* custom cursor state machine (T-40)
   Rebuilt. Two elements, not one:
     .dot  follows the pointer EXACTLY, so precision is never lost
     .ring follows with a lerp, so movement reads as smooth
   One lerped element was the bug. It made clicking feel disconnected. */
.cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:150;
  will-change:transform;opacity:0;transition:opacity var(--dur-2) var(--ease)}
.cursor.on{opacity:1}
.cursor .dot,.cursor .ring{position:absolute;border-radius:50%;
  transform:translate(-50%,-50%);left:0;top:0}
.cursor .dot{width:5px;height:5px;background:var(--accent)}
.cursor .ring{width:30px;height:30px;border:1px solid var(--accent);
  transition:width var(--dur-2) var(--ease),height var(--dur-2) var(--ease),
  border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.cursor.grow .ring{width:56px;height:56px;border-color:var(--accent);
  background:rgba(232,66,12,.10)}
.cursor.grow .dot{opacity:0}
.cursor.down .ring{width:22px;height:22px;background:rgba(232,66,12,.22)}
.cursor .txt{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;opacity:0;transition:opacity var(--dur-2) var(--ease)}
.cursor.grow .txt{opacity:1}
@media (hover:hover) and (pointer:fine){
  body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor summary,
  body.has-cursor input,body.has-cursor textarea,body.has-cursor select{cursor:none}
}

/* shared-element page transition (T-41). Chrome, Edge and Safari 18+. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out var(--dur-3) var(--ease) both}
::view-transition-new(root){animation:vt-in var(--dur-3) var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
.brand .nm{view-transition-name:brand}

/* scroll-scrubbed rule (T-45) */
.scrub{height:2px;background:var(--rule);position:relative;overflow:hidden;margin-top:var(--s6)}
.scrub i{position:absolute;inset:0;background:var(--accent);transform-origin:left center;
  transform:scaleX(var(--p,0));transition:transform 80ms linear}

/* media slot. works with no image: the pattern IS the design. */
.media{position:relative;overflow:hidden;background:var(--panel);
  border:1px solid var(--rule);aspect-ratio:var(--ar,16/9)}
.media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.12);
  transition:filter var(--dur-4) var(--ease),transform var(--dur-4) var(--ease-out)}
.media:hover img{filter:grayscale(0) contrast(1.05);transform:scale(1.015)}
.media .ph{position:absolute;inset:0}
.media .tag{position:absolute;left:var(--s4);bottom:var(--s4);z-index:2;
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);padding:var(--s2) var(--s3)}

/* eight generated hero patterns. one per surface. */
.ph-grid{background-image:linear-gradient(var(--rule) 1px,transparent 1px),
  linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:38px 38px}
.ph-diag{background-image:repeating-linear-gradient(45deg,var(--ink) 0 1px,
  transparent 1px 13px);opacity:.5}
.ph-hlines{background-image:repeating-linear-gradient(0deg,var(--ink) 0 1px,
  transparent 1px 9px);opacity:.4}
.ph-dots{background-image:radial-gradient(var(--ink) 1.2px,transparent 1.2px);
  background-size:22px 22px;opacity:.35}
.ph-block{background:linear-gradient(135deg,var(--ink) 0 38%,transparent 38%),
  linear-gradient(315deg,var(--rule-strong) 0 22%,transparent 22%),var(--panel)}
.ph-arc{background:radial-gradient(circle at 28% 118%,var(--ink) 0 44%,transparent 44.5%),
  radial-gradient(circle at 78% -18%,var(--rule-strong) 0 32%,transparent 32.5%),var(--panel)}
.ph-noise{background:repeating-conic-gradient(from 0deg at 50% 50%,var(--ink) 0deg 2deg,
  transparent 2deg 6deg);opacity:.5}
.ph-bars{background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 26px),
  repeating-linear-gradient(0deg,transparent 0 40px,var(--rule-strong) 40px 42px);opacity:.45}
.ph-rake{background:linear-gradient(104deg,transparent 0 46%,var(--ink) 46% 47.4%,
  transparent 47.4% 58%,var(--rule-strong) 58% 58.9%,transparent 58.9%),var(--panel)}
/* every hero pattern is monochrome. the accent is reserved for meaning. */
.ph-stripe{background:repeating-linear-gradient(-60deg,var(--ink) 0 3px,transparent 3px 18px,
  var(--rule-strong) 18px 21px,transparent 21px 54px);opacity:.4}
.ph-wedge{background:linear-gradient(160deg,transparent 0 54%,var(--ink) 54% 100%),
  linear-gradient(20deg,transparent 0 72%,var(--rule-strong) 72% 100%),var(--panel)}
.ph-cross{background-image:linear-gradient(var(--ink) 1.5px,transparent 1.5px),
  linear-gradient(90deg,var(--ink) 1.5px,transparent 1.5px);background-size:64px 64px;
  background-position:center;opacity:.42}
.ph-wave{background:repeating-radial-gradient(circle at 0% 100%,transparent 0 26px,
  var(--ink) 26px 27px,transparent 27px 52px);opacity:.35}

/* motion pause control (T-48) */
.pause{position:fixed;right:var(--s4);bottom:var(--s4);z-index:120;display:none;
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:0;padding:var(--s3) var(--s4);cursor:pointer}
.pause.show{display:block}
.pause:hover{background:var(--accent)}

/* P-23. reduced motion is a full rendering mode, not a patch. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee .track{animation:none}
  [data-reveal]{opacity:1!important;transform:none!important}
  .cursor{display:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
body.motion-off .marquee .track{animation-play-state:paused}
body.motion-off [data-reveal]{opacity:1;transform:none}

@media (max-width:700px){
  .hdr .shell{height:56px}
  .nav{gap:var(--s5)}
  .nav a{font-size:10px}
  .stat{border-right:none;border-bottom:1px solid var(--rule);padding-right:0}
}