/* ==========================================================================
   wint.win — Win Twin
   Navy blueprint. One stylesheet. Bump ?v= in index.html when this changes.
   Token rule: every token has a [data-theme="light"] counterpart, so light
   mode is the same design in different light — not a second design.
   ========================================================================== */

/* ---------- DARK (default) : deep navy blueprint ---------- */
:root {
  --navy: #133461;              /* sampled from the logo */

  --bg:         #0b1a2e;
  --bg-alt:     #0e2039;
  --surface:    #12274a;
  --surface-2:  #16305a;
  --line:       #1e3c66;
  --steel:      #4a6c9b;
  --ink:        #e8edf3;
  --ink-dim:    #a8bdd6;
  --muted:      #7e99bb;
  --signal:     #4e9dea;

  /* Own tokens, never reuses of --ink / --bg. The pairing inverts between
     modes and --ink is near-white here; using it as a button fill would
     produce white text on a white pill. */
  --btn-bg:     #4e9dea;
  --btn-fg:     #07141f;
  --btn-hover:  #6fb2f2;
  --ghost-fg:   #cfe0f5;
  --ghost-line: #3a5f92;

  --danger:     #f0937b;        /* per-mode: light-mode red is unreadable here */
  --ok:         #6fd7a8;
  --focus:      #7cc0ff;

  --seal-shadow: 0 0 44px rgba(78,157,234,.22);
  --card-shadow: 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -28px rgba(0,0,0,.9);
  --grid-ink:    rgba(120,165,220,.075);
  --hdr-bg:      color-mix(in srgb, var(--bg) 86%, transparent);
  --seal-invert: 0;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1160px;
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- LIGHT : the same blueprint on paper ---------- */
:root[data-theme="light"] {
  --bg:         #f7f9fc;
  --bg-alt:     #eaeff7;
  --surface:    #ffffff;
  --surface-2:  #f2f6fb;
  --line:       #d2dceb;
  --steel:      #8ea6c4;
  --ink:        #10233f;
  --ink-dim:    #3d5b86;
  --muted:      #5d7a9f;
  --signal:     #1f6fc4;

  --btn-bg:     #133461;
  --btn-fg:     #ffffff;
  --btn-hover:  #1c4a86;
  --ghost-fg:   #133461;
  --ghost-line: #b9c9de;

  --danger:     #a2432f;
  --ok:         #1d7a4f;
  --focus:      #1f6fc4;

  --seal-shadow: 0 10px 30px -18px rgba(19,52,97,.45);
  --card-shadow: 0 1px 0 rgba(19,52,97,.03), 0 16px 34px -28px rgba(19,52,97,.45);
  --grid-ink:    rgba(19,52,97,.055);
  --hdr-bg:      color-mix(in srgb, var(--bg) 88%, transparent);
  --seal-invert: 0;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  :root                   { --hdr-bg: #0b1a2e; }
  :root[data-theme="light"] { --hdr-bg: #f7f9fc; }
}

/* ========================= base ========================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--signal); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--signal); color: var(--btn-fg); }

h1,h2,h3,h4 { line-height: 1.15; letter-spacing: -.02em; margin: 0; font-weight: 700; }
.h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); letter-spacing: -.035em; }
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: .5rem; }

.kicker {
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--steel); margin: 0 0 1rem;
}
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* ========================= INTRO ========================= */
.intro {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg);
  overflow: hidden;
}
.intro.done { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.intro.gone { display: none; }

.intro-grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0;
  animation: gridIn .8s var(--ease) .08s forwards;
}
@keyframes gridIn { to { opacity: 1; } }

.intro-stage {
  position: relative;
  display: grid; place-items: center;
  width: min(78vmin, 560px); aspect-ratio: 1;
}

/* --- converging rings: the Loony-Tunes iris drawn as instrumentation --- */
.rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rings .r {
  transform-origin: 300px 300px;
  opacity: 0;
  animation: ringIn .85s var(--ease) forwards;
}
.r1 { animation-delay: .15s; } .r2 { animation-delay: .33s; }
.r3 { animation-delay: .51s; } .r4 { animation-delay: .69s; }
@keyframes ringIn {
  from { transform: scale(1.9); opacity: 0; }
  60%  { opacity: .95; }
  to   { transform: scale(1);   opacity: .5; }
}
.ticks { opacity: 0; animation: ringIn .6s var(--ease) .85s forwards; }
.sweep {
  transform-origin: 300px 300px;
  stroke-dasharray: 1659;               /* 2πr, r=264 */
  stroke-dashoffset: 1659;
  opacity: .9;
  animation: sweep 1.4s var(--ease) .65s forwards;
}
@keyframes sweep {
  from { stroke-dashoffset: 1659; transform: rotate(-90deg); }
  to   { stroke-dashoffset: 0;    transform: rotate(270deg); }
}

/* --- the logo is the centre point: it stamps in --- */
.seal-wrap { position: relative; width: 46%; }
.seal {
  width: 100%; height: auto;
  filter: drop-shadow(var(--seal-shadow));
  opacity: 0;
  transform: scale(2.4) rotate(-14deg);
  animation: stamp .9s var(--ease) .92s forwards;
}
@keyframes stamp {
  0%   { opacity: 0; transform: scale(2.4) rotate(-14deg); }
  55%  { opacity: 1; }
  78%  { transform: scale(.94) rotate(2deg); }   /* overshoot — the punch */
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* --- ™ lands last, once the seal has settled --- */
.tm {
  position: absolute; top: 3%; right: -3%;
  font: 700 clamp(15px, 3.2vmin, 30px)/1 var(--sans);
  color: var(--signal);
  opacity: 0; transform: scale(.2) translateY(6px);
  animation: tmIn .55s var(--ease) 2.15s forwards;
}
@keyframes tmIn {
  0%   { opacity: 0; transform: scale(.2) translateY(6px); }
  65%  { opacity: 1; transform: scale(1.28) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.intro-type { position: absolute; bottom: -3.4rem; text-align: center; width: 100%; }
.intro-word {
  font-size: clamp(1.5rem, 4.4vmin, 2.5rem); letter-spacing: .16em;
  color: var(--ink);
  opacity: 0; animation: fadeUp .65s var(--ease) 1.72s forwards;
}
.intro-word .dot { color: var(--signal); }
.intro-sub {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  margin: .55rem 0 0;
  font: 600 .68rem/1 var(--mono); letter-spacing: .24em;
  color: var(--steel);
  opacity: 0; animation: fadeUp .65s var(--ease) 1.9s forwards;
}
.intro-sub i { width: 26px; height: 1px; background: var(--steel); display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.skip {
  position: absolute; bottom: 1.6rem; right: 1.6rem;
  background: none; border: 1px solid var(--line); color: var(--muted);
  font: 500 .74rem/1 var(--mono); letter-spacing: .07em;
  padding: .5rem .8rem; border-radius: 5px; cursor: pointer;
  opacity: 0; animation: fadeUp .5s ease .8s forwards;
  transition: color .2s, border-color .2s;
}
.skip:hover { color: var(--ink); border-color: var(--steel); }
.skip kbd {
  font: inherit; border: 1px solid currentColor; border-radius: 3px;
  padding: 0 .3em; margin-left: .4em; opacity: .75;
}

/* ========================= SITE ========================= */
.site { opacity: 0; }
.site.in { animation: siteIn .6s ease forwards; }
/* Pages without the intro are visible immediately — nothing to wait for. */
.site.no-intro { opacity: 1; animation: none; }
.site.no-intro .rule { transform: scaleX(1); animation: none; }
@keyframes siteIn { to { opacity: 1; } }

/* --- the dual borders: they expand outward from centre --- */
.rule {
  position: fixed; left: 0; right: 0; height: 2px; z-index: 200;
  background: linear-gradient(90deg,
    transparent, var(--steel) 12%, var(--signal) 50%, var(--steel) 88%, transparent);
  transform: scaleX(0); transform-origin: 50% 50%;
}
.rule-top { top: 0; }
.rule-bottom { bottom: 0; }
.site.in .rule { animation: expand .9s var(--ease) .1s forwards; }
@keyframes expand { to { transform: scaleX(1); } }

.hdr {
  position: sticky; top: 2px; z-index: 150;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1rem, 4vw, 2.4rem);
  background: var(--hdr-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  color: var(--ink); text-decoration: none;
  font: 700 1rem/1 var(--sans); letter-spacing: .06em;
}
.brand img { width: 34px; height: 34px; }
.brand-dot { color: var(--signal); }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.7rem); }
.nav a {
  color: var(--ink-dim); text-decoration: none; font-size: .92rem; font-weight: 500;
  position: relative; padding: .25rem 0; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--signal); transition: width .25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }
.nav .nav-cta {
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 650;
  padding: .48rem 1rem; border-radius: 5px;
}
.nav .nav-cta:hover { background: var(--btn-hover); color: var(--btn-fg); }
.nav .nav-cta::after { display: none; }

.theme {
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--ink-dim);
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .2s, color .2s;
}
.theme:hover { border-color: var(--steel); color: var(--ink); }
.theme svg { width: 17px; height: 17px; }

/* ---------- hero ---------- */
.hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 4vw, 2.4rem) clamp(2.5rem, 6vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-copy { min-width: 0; }
.hero-seal { display: grid; place-items: center; min-width: 0; }
.hero-seal {
  position: relative; display: grid; place-items: center;
  /* One knob for all three layers, so the glow can never outgrow the mark.
     Overridden at the mobile breakpoint alongside the image width. */
  --seal-w: min(100%, 400px);
  --ring-scale: 1.34;
}

/* The mark itself does not move. Everything that animates sits BEHIND it. */
.hero-seal img {
  position: relative; z-index: 1;
  width: var(--seal-w); height: auto;
  filter: drop-shadow(var(--seal-shadow));
}

/* --- Hero instrumentation rings ------------------------------------
   Deliberately the same visual language as the intro (§4.1): hairline
   strokes, quadrant ticks, one travelling sweep. This replaced an earlier
   soft radial glow, which read as a blur rather than as engineering.
   The mark itself stays static; only these layers move.               */
.hero-rings {
  position: absolute; z-index: 0;
  width: calc(var(--seal-w) * var(--ring-scale));
  aspect-ratio: 1; overflow: visible; pointer-events: none;
}
.hero-rings .hr {
  transform-origin: 300px 300px;
  animation: hrBreathe 3.6s ease-in-out infinite;
}
/* Staggered, so the breath radiates outward rather than three rings
   twitching in unison. */
.hr1 { animation-delay: 0s;    }
.hr2 { animation-delay: -.45s; }
.hr3 { animation-delay: -.90s; }
@keyframes hrBreathe {
  0%, 100% { transform: scale(.975); opacity: .22; }
  50%      { transform: scale(1.025); opacity: .58; }
}

.hr-ticks { opacity: .34; }

/* One hairline arc travelling round, like the intro sweep but endless. */
.hr-sweep {
  transform-origin: 300px 300px;
  stroke-dasharray: 150 1572;        /* short arc on a 2*pi*r = 1721 path */
  opacity: .75;
  animation: hrSweep 7s linear infinite;
}
@keyframes hrSweep {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}

/* A single hairline expanding out of the mark and fading — the pulse. */
.hr-echo {
  transform-origin: 300px 300px;
  animation: hrEcho 3.6s cubic-bezier(.2,.55,.3,1) infinite;
}
@keyframes hrEcho {
  0%   { transform: scale(.86); opacity: 0; }
  12%  { opacity: .85; }
  100% { transform: scale(1.42); opacity: 0; }
}
}
}
}
.hero .stats { grid-column: 1 / -1; }
.eyebrow {
  display: flex; align-items: center; gap: .75rem; margin: 0 0 1.3rem;
  font: 600 .7rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--steel);
}
.eyebrow i { width: 28px; height: 1px; background: var(--steel); display: block; }
.eyebrow i:last-child { flex: 1; max-width: 220px; }
.lede {
  max-width: 62ch; margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.16rem); color: var(--ink-dim);
}
.lede strong { color: var(--ink); font-weight: 650; }
.cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

.btn {
  display: inline-block; padding: .82rem 1.7rem; border-radius: 6px;
  font: 650 .95rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .18s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--btn-bg); color: var(--btn-fg); }
.btn-solid:hover { background: var(--btn-hover); color: var(--btn-fg); }
.btn-ghost { color: var(--ghost-fg); border-color: var(--ghost-line); background: transparent; }
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.stats {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.4rem);
  margin: 3.2rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line);
}
.stats dt { font: 500 .74rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stats dd { margin: .4rem 0 0; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; color: var(--signal); letter-spacing: -.03em; }

/* ---------- bands ---------- */
.band {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(3.2rem, 7vw, 5.5rem) clamp(1.2rem, 4vw, 2.4rem);
  border-top: 1px solid var(--line);
}
/* Full-bleed background, but the CONTENT column still lines up with .band.
   Done with padding rather than per-child auto margins: any child that sets
   a `margin: x 0 y` shorthand (.kicker, .band-lede) wipes out auto margins
   and slams itself to the padding edge. Padding can't be clobbered that way. */
.band-alt {
  max-width: none;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding-left:  max(clamp(1.2rem, 4vw, 2.4rem), calc((100% - var(--wrap)) / 2));
  padding-right: max(clamp(1.2rem, 4vw, 2.4rem), calc((100% - var(--wrap)) / 2));
}
.band-alt > * { max-width: none; margin-left: 0; margin-right: 0; }
.band-lede { max-width: 60ch; color: var(--ink-dim); margin: .9rem 0 0; }

/* method */
.method { list-style: none; counter-reset: none; margin: 2.6rem 0 0; padding: 0;
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.method li { position: relative; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.method .n { font: 600 .72rem/1 var(--mono); letter-spacing: .14em; color: var(--signal); }
.method h4 { margin: .7rem 0 .5rem; font-size: 1.06rem; }
.method p { margin: 0; font-size: .95rem; color: var(--muted); }

/* cards */
.cards { margin-top: 2.6rem; display: grid; gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 1.7rem 1.6rem; box-shadow: var(--card-shadow);
  transition: border-color .22s, transform .22s var(--ease);
}
.card:hover { border-color: var(--steel); transform: translateY(-3px); }
.ico { width: 26px; height: 26px; color: var(--signal); margin-bottom: 1rem; }
.card h4 { font-size: 1.1rem; margin-bottom: .55rem; }
.card p { margin: 0 0 1rem; font-size: .93rem; color: var(--muted); }
.card ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); padding-top: .9rem; }
.card li { font: 500 .84rem/1.9 var(--mono); color: var(--ink-dim); }
.card li::before { content: "▸ "; color: var(--steel); }

/* john */
.john { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); grid-template-columns: minmax(190px, 260px) 1fr; align-items: start; }
.john-photo { position: relative; text-align: center; }
.john-photo img {
  width: 100%; height: auto; display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  filter: saturate(.92);
}
.john-badge {
  display: inline-block; margin-top: 1rem;
  font: 600 .68rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--signal); border: 1px solid var(--ghost-line); border-radius: 20px; padding: .42rem .95rem;
}
.john-role { margin: .35rem 0 1.3rem; font: 500 .82rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.john-body p { color: var(--ink-dim); margin: 0 0 1.1rem; }
.tags { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.tags li {
  font: 500 .8rem/1 var(--mono); color: var(--ink-dim);
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 4px; padding: .48rem .8rem;
}

/* ---------- contact ---------- */
.contact-grid { margin-top: 2.6rem; display: grid; gap: 2rem; grid-template-columns: 1.35fr 1fr; align-items: start; }
.form { display: grid; gap: 1.1rem; }
.row { display: grid; gap: .45rem; }
.row label { font: 600 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.row input, .row textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: .78rem .95rem;
  transition: border-color .2s, background .2s;
}
.row textarea { resize: vertical; min-height: 150px; }
.row input::placeholder, .row textarea::placeholder { color: var(--muted); opacity: .8; }
.row input:focus, .row textarea:focus { outline: none; border-color: var(--signal); background: var(--surface-2); }
.row.bad input, .row.bad textarea { border-color: var(--danger); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.status { margin: 0; min-height: 1.3rem; font: 500 .9rem/1.5 var(--sans); }
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }

.aside { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 1.7rem 1.6rem; box-shadow: var(--card-shadow); }
.aside h4 { font-size: .96rem; margin-bottom: .4rem; }
.aside p { font-size: .9rem; margin: 0 0 1rem; }
.aside hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.chip {
  display: inline-block; font: 600 .88rem/1 var(--mono);
  color: var(--signal); text-decoration: none;
  border: 1px solid var(--ghost-line); border-radius: 6px; padding: .65rem 1rem;
  transition: border-color .2s, background .2s;
}
.chip:hover { border-color: var(--signal); background: var(--surface-2); }
.next { margin: 0; padding-left: 1.15rem; }
.next li { font-size: .88rem; color: var(--muted); margin-bottom: .6rem; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line); background: var(--bg-alt); margin-bottom: 2px; }
.ftr-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: 2rem clamp(1.2rem, 4vw, 2.4rem) 2.4rem;
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; align-items: baseline;
}
.ftr p { margin: 0; font-size: .87rem; color: var(--muted); }
.ftr strong { color: var(--ink-dim); letter-spacing: .05em; }
.ftr .mono { font-size: .78rem; letter-spacing: .04em; }

/* ========================= responsive ========================= */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-seal { order: -1; }
  /* Smaller mark and a tighter ring spread, or the outer ring reaches
     past the viewport edge on a phone. */
  .hero-seal { --seal-w: min(62%, 230px); --ring-scale: 1.22; }
  .contact-grid { grid-template-columns: 1fr; }
  .john { grid-template-columns: 1fr; }
  .john-photo { max-width: 190px; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .hdr { flex-wrap: wrap; gap: .75rem 1rem; padding-top: .7rem; padding-bottom: .7rem; }
  .nav { order: 3; width: 100%; margin-left: 0; gap: .45rem .9rem; flex-wrap: wrap; justify-content: flex-start; }
  .nav a { font-size: .84rem; }
  .nav .nav-cta { margin-left: auto; padding: .42rem .8rem; }
  .theme { margin-left: auto; }
  .cta .btn { flex: 1 1 100%; text-align: center; }
  .stats { gap: 1.4rem 2.2rem; }
  .stats > div { flex: 1 1 40%; }
  .intro-type { bottom: -2.8rem; }
  .skip { right: 50%; transform: translateX(50%); bottom: 1.2rem; }
}

/* ========================= reduced motion =========================
   Deliberately minimal. The site owner asked for the full intro and the full
   decorative motion for every visitor, including those whose OS requests
   reduced motion, so none of it is suppressed here. What keeps that workable
   is that the intro is escapable four ways (click, Esc/Enter/Space, the Skip
   button, and a 6s backstop) — see main.js §1. Smooth scrolling is still
   turned off, because that one hijacks a deliberate user action rather than
   playing once on arrival. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- colophon / build-notes post ---------- */
.post { max-width: 68ch; }
.post-meta {
  margin: .5rem 0 1.6rem;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel);
}
.post-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.14rem); color: var(--ink);
  border-left: 2px solid var(--signal); padding-left: 1.1rem; margin: 0 0 2rem;
}
.post h4 {
  margin: 2rem 0 .6rem; font-size: 1.04rem; color: var(--ink);
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.post p { margin: 0 0 1.1rem; color: var(--ink-dim); }
.post .mono { color: var(--signal); font-size: .92em; }

.post-facts {
  margin-top: 2.4rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 1.5rem 1.6rem; box-shadow: var(--card-shadow);
}
.post-facts h4 { margin: 0 0 1rem; padding: 0; border: 0; font-size: .78rem;
  font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.post-facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.post-facts li {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  font: 500 .86rem/1.6 var(--mono); color: var(--ink-dim);
  padding-bottom: .55rem; border-bottom: 1px solid var(--line);
}
.post-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.post-facts li span { min-width: 118px; color: var(--muted); }


/* ---------- standards in progress ----------
   No certification badge is shown. ISO's logo may not be used by anyone
   outside ISO, and a certification body's mark is licensed only during
   active certification — never while an audit is in progress. Naming the
   standard in plain text is always permitted, so that is all this does. */
.certs { grid-column: 1 / -1; margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.certs-head { margin-bottom: 1.2rem; }
.certs-head h3 {
  font: 600 .74rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel); margin: 0 0 .6rem;
}
.certs-note { margin: 0; max-width: 62ch; font-size: .87rem; color: var(--muted); }
.cert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.cert {
  display: flex; align-items: center; gap: .8rem; flex: 1 1 240px;
  border: 1px dashed var(--ghost-line); border-radius: 7px;
  padding: .75rem .95rem; background: var(--surface);
}
.cert-ring { width: 26px; height: 26px; flex: none; transform: rotate(-90deg); }
.cert-ring circle { fill: none; stroke-width: 3; }
.ring-bg { stroke: var(--line); }
.ring-fg {
  stroke: var(--signal); stroke-linecap: round;
  stroke-dasharray: 94.2;              /* 2*pi*r, r=15 */
  stroke-dashoffset: 61;               /* ~35% of the way round */
  /* The arc travels clockwise, so the status reads as work in progress
     rather than a fixed percentage. The parent SVG is already rotated
     -90deg for the start position, so this rotates the arc itself. */
  transform-origin: 18px 18px;
  animation: certSpin 2.6s linear infinite;
}
@keyframes certSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Offset so the three do not turn in lockstep. Negative, so they start
   already mid-rotation instead of stalling on frame one. */
.cert:nth-child(2) .ring-fg { animation-delay: -.85s; }
.cert:nth-child(3) .ring-fg { animation-delay: -1.7s; }
.cert-body { display: grid; gap: .1rem; min-width: 0; }
.cert-name { font: 650 .88rem/1.2 var(--sans); color: var(--ink); }
.cert-desc { font-size: .8rem; color: var(--muted); }
.cert-state {
  font: 600 .63rem/1.3 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: var(--signal); margin-top: .2rem;
}
@media (max-width: 680px) { .cert { flex: 1 1 100%; } }


/* ---------- trademark mark beside the wordmark ---------- */
.tm-mark {
  font-size: .52em; font-weight: 600; line-height: 1;
  vertical-align: super; margin-left: .12em;
  color: var(--steel); letter-spacing: 0;
}
.brand .tm-mark { color: var(--signal); opacity: .85; }

.ftr-link {
  display: inline-block; margin-left: .85rem; padding-left: .85rem;
  border-left: 1px solid var(--line);
  color: var(--signal); text-decoration: none; font-family: var(--mono);
}
.ftr-link:hover { text-decoration: underline; }

/* ---------- disclosure page ---------- */
.doc { max-width: 74ch; margin: 0 auto; padding: clamp(2.5rem,6vw,4.5rem) clamp(1.2rem,4vw,2.4rem) 4rem; }
.doc-back { display: inline-block; margin-bottom: 2rem; font: 500 .84rem/1 var(--mono); color: var(--signal); text-decoration: none; }
.doc-back:hover { text-decoration: underline; }
.doc h1 { font-size: clamp(2rem,4.5vw,2.9rem); margin-bottom: .6rem; }
.doc-sub { color: var(--muted); font-size: .95rem; margin: 0 0 2.5rem; }
.doc h2 {
  font-size: 1.2rem; margin: 2.6rem 0 .8rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.doc h3 { font-size: .98rem; margin: 1.6rem 0 .5rem; color: var(--ink); }
.doc p, .doc li { color: var(--ink-dim); }
.doc p { margin: 0 0 1rem; }
.doc ul, .doc ol { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.doc li { margin-bottom: .45rem; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: .89rem; }
.doc th, .doc td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font: 600 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.doc td { color: var(--ink-dim); }
.doc td:first-child { color: var(--ink); font-weight: 600; width: 38%; }
.doc-wrap { overflow-x: auto; }
.doc-note {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--signal);
  border-radius: 0 8px 8px 0; padding: 1.2rem 1.3rem; margin: 0 0 1.4rem;
}
.doc-note p:last-child { margin-bottom: 0; }

/* ---------- 404 ---------- */
.err {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(3rem,8vw,6rem) clamp(1.2rem,4vw,2.4rem) 4rem;
  min-height: 58vh;
}
.err-code {
  font-size: .74rem; letter-spacing: .2em; color: var(--steel); margin: 0 0 1.6rem;
}
.err-slot { min-height: 20rem; }
.err-card[hidden] { display: none; }
.err-card.in { animation: errIn .45s var(--ease) both; }
@keyframes errIn { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.err-lede { max-width: 58ch; margin: 1.4rem 0 0; font-size: clamp(1rem,1.6vw,1.14rem); color: var(--ink-dim); }
.err-stats { margin-top: 2.4rem; }
.err-aside { margin: 1.6rem 0 0; font-size: .87rem; color: var(--muted); }
.err-log {
  margin: 1.8rem 0 0; max-width: 46ch;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 1.1rem 1.2rem; display: grid; gap: .38rem;
  font-size: .84rem; color: var(--muted);
}
.err-log span:nth-child(odd) { color: var(--ink-dim); }
.err-path { color: var(--signal); }
.err-ok { color: var(--ok) !important; }
.err-cta { margin-top: 2.6rem; }
.err-reroll {
  margin-top: 1.8rem; background: none; border: 0; cursor: pointer;
  font-size: .82rem; letter-spacing: .06em; color: var(--muted);
  padding: .4rem 0; border-bottom: 1px dashed var(--ghost-line);
  transition: color .2s, border-color .2s;
}
.err-reroll:hover { color: var(--signal); border-color: var(--signal); }

/* ---------- service-area map ---------- */
.map {
  /* max-width must match .band-alt > * (same specificity, and this rule comes
     later) or the map breaks out of the content column on wide screens. */
  margin: 2.4rem 0 0; position: relative;
  width: 100%; max-width: 100%;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--surface); box-shadow: var(--card-shadow);
  aspect-ratio: 16 / 9;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 680px) { .map { aspect-ratio: 3 / 4; } }



/* ---------- stat counters ---------- */
.stats dd { font-variant-numeric: tabular-nums; transition: color .3s ease; }
.stats dd.counted { animation: countPop .35s var(--ease); }
@keyframes countPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}