/* ════════════════════════════════════════════════════════════
   CYBERFENCE USA · Flagship v5
   Lane: perimeter-signage utilitarianism, with play.
   Survey linework · condensed signage type (Archivo, wdth axis)
   Navy carries authority · Lime is the fence line · Blue is action
   ════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand (identity-preserved from v3) */
  --navy:        oklch(0.22 0.06 255);
  --navy-raised: oklch(0.27 0.055 255);
  --navy-deep:   oklch(0.15 0.05 255);
  --lime:        oklch(0.93 0.29 130);
  --lime-press:  oklch(0.86 0.27 130);
  --blue:        oklch(0.48 0.19 255);
  --red:         oklch(0.62 0.19 25);
  --amber:       oklch(0.8 0.16 80);

  /* Light surfaces */
  --bg:        oklch(0.995 0.002 255);
  --bg-tint:   oklch(0.965 0.008 255);
  --ink:       oklch(0.22 0.03 255);
  --ink-mid:   oklch(0.33 0.025 255);
  --ink-soft:  oklch(0.42 0.02 255);
  --line:      oklch(0.88 0.01 255);
  --line-mid:  oklch(0.80 0.015 255);

  /* On-dark */
  --od:        oklch(0.985 0.005 255);
  --od-mid:    oklch(0.87 0.025 255);
  --od-soft:   oklch(0.78 0.035 255);
  --od-line:   oklch(1 0 0 / 0.16);
  --od-fill:   oklch(1 0 0 / 0.05);

  /* Type */
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --sect: clamp(4.5rem, 9vw, 7.5rem);
  --gap:  clamp(1.25rem, 3vw, 2rem);

  /* Z scale */
  --z-survey: 30;
  --z-nav: 50;
  --z-toast: 80;
}

/* ── Reset-ish ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
body {
  font-family: var(--f-sans);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
/* Anchor targets clear the fixed nav */
:where(section[id], article[id], [id="top"]) { scroll-margin-top: 5.25rem; }
input, button, textarea, select { font: inherit; }
ul[role], ul.no-marker { list-style: none; padding: 0; }
::selection { background: var(--lime); color: var(--navy-deep); }

a { color: var(--blue); }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.section-dark :focus-visible, .hero :focus-visible, .footer :focus-visible, .nav.at-top :focus-visible,
.svc-verify :focus-visible { outline-color: var(--lime); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--navy-deep); color: var(--od);
  padding: .6em 1.2em; font-weight: 600; border-radius: 0 0 4px 4px;
  transition: top .2s ease-out;
}
.skip-link:focus { top: 0; }

/* ── Layout primitives ──────────────────────────────────── */
.container { max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.container-narrow { max-width: 820px; }
.section { padding-block: var(--sect); }
.section-tinted { background: var(--bg-tint); }
.section-dark {
  background:
    radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1.5px) 0 0 / 30px 30px,
    var(--navy);
  color: var(--od);
  padding-block: var(--sect);
}

/* ── Type system ────────────────────────────────────────── */
h1, h2, h3, h4 { text-wrap: balance; }

/* Section headings: the fence-post system.
   One lime post with a navy cap marks every major heading. */
.post-title {
  font-stretch: 94%;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 0.45em;
}
.post-title::before {
  content: "";
  flex: none;
  width: 0.34em;
  height: 0.86em;
  transform: translateY(0.06em);
  background: var(--lime);
  border-top: 0.2em solid var(--navy);
}
.post-title.on-dark { color: var(--od); }
.post-title.on-dark::before { border-top-color: var(--od); }

.section-lede {
  font-size: 1.1875rem;
  color: var(--ink-mid);
  max-width: 62ch;
  margin-top: 0.9rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
  text-wrap: pretty;
}
.on-dark-lede { color: var(--od-mid); max-width: 62ch; margin-top: 0.9rem; }

.text-link {
  font-weight: 600;
  color: var(--blue);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.text-link:hover { color: var(--navy); }
.section-dark .text-link, .svc-verify .text-link { color: var(--lime); }
.section-dark .text-link:hover, .svc-verify .text-link:hover { color: var(--lime-press); }

/* ── Buttons: sign-plate geometry ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 0.85em 1.5em;
  border: 2px solid transparent;
  border-radius: 3px;
  font-weight: 700;
  font-stretch: 92%;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.22,1,.36,1), background-color .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out, opacity .18s ease-out;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-sm { padding: 0.55em 1.1em; font-size: 0.9375rem; }

.btn-lime { background: var(--lime); color: var(--navy-deep); }
.btn-lime:hover:not([disabled]) { background: var(--lime-press); box-shadow: 0 6px 18px oklch(0.93 0.29 130 / 0.28); }

.btn-navy { background: var(--navy); color: var(--od); }
.btn-navy:hover { background: var(--navy-deep); box-shadow: 0 6px 16px oklch(0 0 0 / 0.18); }

.btn-ghost-dark { border-color: var(--od-line); color: var(--od); background: transparent; }
.btn-ghost-dark:hover { border-color: var(--lime); }

.btn-note {
  font-family: var(--f-mono); font-size: 0.7em; font-weight: 500;
  padding: .25em .5em; border: 1px solid currentColor; border-radius: 2px; opacity: .85;
}

/* ── Nav ────────────────────────────────────────────────── */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav);
  transition: background-color .25s ease-out, box-shadow .25s ease-out;
}
.nav.at-top { background: transparent; }
.nav.is-scrolled {
  background: oklch(0.995 0.002 255 / 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px oklch(0 0 0 / 0.06);
}
.nav-inner {
  max-width: 1180px; margin-inline: auto;
  padding: 0.8rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-name {
  font-stretch: 92%; font-weight: 750; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--od);
}
.brand-usa { color: var(--lime); }
.nav.is-scrolled .brand-name { color: var(--navy); }
.nav.is-scrolled .brand-usa { color: var(--blue); }

.nav-inner > nav { margin-inline: auto; }
.nav-links {
  display: flex; gap: clamp(1rem, 2.2vw, 1.8rem);
  list-style: none; padding: 0; margin: 0;
}
.nav-links a {
  text-decoration: none; font-weight: 600; font-size: 1rem;
  color: var(--od-mid);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--lime); }
.nav.is-scrolled .nav-links a { color: var(--ink-mid); }
.nav.is-scrolled .nav-links a:hover { color: var(--blue); }
.nav-links-contact { display: none; }

.nav-actions { display: flex; align-items: center; gap: 1.1rem; }
.nav-actions .btn { white-space: nowrap; }
.nav-phone {
  font-family: var(--f-mono); font-size: 0.9375rem; font-weight: 500;
  color: var(--od-mid); text-decoration: none;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--lime); }
.nav.is-scrolled .nav-phone { color: var(--ink-mid); }
.nav.is-scrolled .nav-phone:hover { color: var(--blue); }

.nav-burger {
  display: none; flex-direction: column; gap: 7px;
  background: none; border: 0; padding: .5rem; cursor: pointer;
}
.nav-burger span {
  width: 26px; height: 2.5px; background: var(--od);
  transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.nav.is-scrolled .nav-burger span { background: var(--navy); }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4.75px) rotate(-45deg); }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  background:
    radial-gradient(oklch(1 0 0 / 0.045) 1px, transparent 1.5px) 0 0 / 30px 30px,
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--od);
  padding-top: clamp(6.5rem, 12vh, 9rem);
}
.hero-inner {
  max-width: 1180px; margin-inline: auto;
  padding: clamp(1rem, 4vh, 3rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-h1 {
  font-stretch: 94%;
  font-weight: 750;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 4.6vw + 0.8rem, 4.6rem);
  line-height: 1.06;
  letter-spacing: 0.008em;
}
.lime-word { font-style: normal; color: var(--lime); }
.hero-sub {
  margin-top: 1.4rem;
  font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  line-height: 1.7;
  color: var(--od-mid);
  max-width: 52ch;
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
.hero-frameworks {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 2.4rem; padding: 0; list-style: none;
}
.hero-frameworks li {
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--od-mid);
  border: 1px solid var(--od-line);
  padding: 0.35em 0.75em; border-radius: 2px;
}

.hero-survey { margin: 0; min-width: 0; }
.hero-survey svg { width: 100%; height: auto; }

/* Survey drawing linework */
.sv-grid path { stroke: oklch(1 0 0 / 0.16); stroke-width: 1.5; fill: none; }
.sv-fence {
  fill: oklch(0.93 0.29 130 / 0.04);
  stroke: var(--lime); stroke-width: 2.5;
  stroke-linejoin: miter;
}
.sv-posts rect { fill: var(--navy-deep); stroke: var(--lime); stroke-width: 2; }
.sv-zone rect { fill: oklch(1 0 0 / 0.04); stroke: oklch(1 0 0 / 0.4); stroke-width: 1.2; }
.sv-label { font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; fill: var(--od); letter-spacing: 0.06em; }
.sv-sublabel { font-family: var(--f-mono); font-size: 9.5px; fill: var(--od-soft); letter-spacing: 0.08em; }
.sv-mini { font-family: var(--f-mono); font-size: 9.5px; fill: var(--od-soft); letter-spacing: 0.08em; }
.sv-threat-line { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.sv-x { stroke: var(--red); stroke-width: 2; fill: none; }
.sv-logged-tick { stroke: var(--lime); stroke-width: 2.25; fill: none; }
.sv-logged { fill: var(--lime); }
.sv-titleblock rect, .sv-titleblock line { stroke: oklch(1 0 0 / 0.35); stroke-width: 1; fill: oklch(0 0 0 / 0.25); }
.sv-tb { font-family: var(--f-mono); font-size: 9px; fill: var(--od-soft); letter-spacing: 0.06em; }
.sv-tb-strong { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; fill: var(--od); letter-spacing: 0.1em; }
.sv-compass path { fill: none; stroke: oklch(1 0 0 / 0.5); stroke-width: 1.5; }

/* Fence-tape divider at hero's foot — the tape slowly crawls */
.fence-divider {
  height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--lime) 0 3px, transparent 3px 34px) 0 100% / 100% 11.5px no-repeat,
    linear-gradient(var(--lime), var(--lime)) 0 0 / 100% 2.5px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .fence-divider { animation: tape-crawl 30s linear infinite; }
}
@keyframes tape-crawl {
  from { background-position: 0 100%, 0 0; }
  to   { background-position: 68px 100%, 0 0; }
}

/* ── Fact rail: a crawling ticker of practice facts ─────── */
.fact-rail { background: var(--lime); overflow: hidden; }
.fact-track { display: flex; width: max-content; }
.fact-rail ul {
  list-style: none;
  display: flex; flex: none;
  margin: 0; padding: 0.85rem 0;
}
.fact-rail li {
  display: flex; align-items: center; flex: none;
  font-family: var(--f-mono);
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--navy-deep);
  white-space: nowrap;
}
.fact-rail li::after {
  content: ""; width: 7px; height: 7px; flex: none;
  background: var(--navy-deep);
  margin-inline: 2.2rem;
}
@media (prefers-reduced-motion: no-preference) {
  .fact-track { animation: rail-crawl 32s linear infinite; }
  .fact-rail:hover .fact-track { animation-play-state: paused; }
}
@keyframes rail-crawl { to { transform: translateX(-50%); } }

/* ── Services: the signature check ──────────────────────── */
.svc-verify {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  background:
    radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1.5px) 0 0 / 30px 30px,
    var(--navy);
  color: var(--od);
  border: 3px solid var(--lime);
  border-radius: 6px;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
.svc-verify-tag {
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime);
}
.svc-verify h3 {
  font-stretch: 94%; font-weight: 750; text-transform: uppercase;
  font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1;
  margin-top: 0.6rem; color: var(--od);
}
.svc-verify-body {
  margin-top: 1.1rem; color: var(--od-mid); max-width: 54ch; text-wrap: pretty;
}
.svc-verify-body strong { color: var(--od); }
.svc-verify-points { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: 0.7rem; }
.svc-verify-points li { position: relative; padding-left: 1.5rem; color: var(--od-mid); }
.svc-verify-points li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 9px; height: 9px; background: var(--lime);
}
.svc-verify-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

/* The animated audit clipboard */
.svc-verify-panel {
  background: oklch(0 0 0 / 0.28);
  border: 1px solid var(--od-line);
  border-radius: 4px;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  font-family: var(--f-mono);
  cursor: pointer;
  user-select: none;
}
.audit-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; color: var(--od-soft);
  border-bottom: 1px solid var(--od-line);
  padding-bottom: 0.8rem; margin-bottom: 1rem;
}
.audit-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.audit-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px dashed oklch(1 0 0 / 0.22);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
}
.audit-claim { font-size: 0.9rem; color: var(--od); line-height: 1.45; }
.audit-q { display: block; font-size: 0.66rem; letter-spacing: 0.14em; color: var(--od-soft); }
.audit-stamp {
  flex: none;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border: 2px solid currentColor; border-radius: 2px;
  padding: 0.28em 0.55em;
  rotate: -4deg;
  white-space: nowrap;
}
.audit-stamp.is-pass { color: var(--lime); }
.audit-stamp.is-fail { color: oklch(0.72 0.19 25); }
.audit-stamp.is-warn { color: var(--amber); }
.audit-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem;
  margin-top: 1rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; color: var(--od-soft);
}
.audit-replay { color: var(--lime); }

/* ── Services: the standing four ────────────────────────── */
.svc-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--gap);
  align-items: stretch;
}
.svc-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
  border: 1.5px solid var(--line-mid);
  border-radius: 4px;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--bg);
  transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease-out, box-shadow .25s ease-out;
}
.svc-card:hover {
  transform: translateY(-5px);
  border-color: var(--navy);
  box-shadow: 0 16px 34px oklch(0.22 0.06 255 / 0.12);
}
.svc-num {
  position: absolute; top: 1.1rem; right: 1.2rem;
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--ink-soft);
}
.svc-ico {
  width: 78px; height: 78px;
  display: grid; place-items: center;
  background: var(--bg-tint);
  border: 1.5px solid var(--line-mid);
  border-radius: 4px;
  transition: background-color .25s ease-out, border-color .25s ease-out;
}
.svc-card:hover .svc-ico { background: oklch(0.93 0.29 130 / 0.18); border-color: var(--navy); }
.svc-ico svg { width: 50px; height: 50px; overflow: visible; }
.svc-card h3 { font-stretch: 96%; font-weight: 750; font-size: 1.35rem; line-height: 1.25; padding-right: 2rem; }
.svc-card p { color: var(--ink-mid); font-size: 1.0625rem; text-wrap: pretty; }
.svc-card .text-link { margin-top: auto; }

/* Icon linework + motion */
.ico-line { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-faint { opacity: 0.3; }
.ico-dot { fill: var(--navy); }
.ico-sweep { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; }
.radar-sweep { transform-box: view-box; transform-origin: 50% 50%; animation: ico-spin 4s linear infinite; }
.radar-blip { fill: var(--blue); animation: ico-blip 4s linear infinite; }
.ico-clip { fill: var(--lime); stroke: var(--navy); stroke-width: 2; }
.ico-tick { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 0; animation: ico-tickdraw 5.4s ease-in-out infinite; }
.ico-tick.t2 { animation-delay: 0.55s; }
.ico-tick.t3 { animation-delay: 1.1s; }
.ico-lockbody { fill: var(--lime); stroke: var(--navy); stroke-width: 2; }
.ico-shackle { animation: ico-lockup 3.8s cubic-bezier(.34,1.56,.64,1) infinite; }
.ico-ping { fill: none; stroke: var(--blue); stroke-width: 2; transform-box: view-box; transform-origin: 50% 50%; animation: ico-ping 2.8s ease-out infinite; }
.ico-bullseye { fill: var(--blue); }

@keyframes ico-spin { to { transform: rotate(1turn); } }
@keyframes ico-blip {
  0%, 10% { opacity: 0; }
  14%, 55% { opacity: 1; }
  72%, 100% { opacity: 0; }
}
@keyframes ico-tickdraw {
  0% { stroke-dashoffset: 14; }
  14% { stroke-dashoffset: 0; }
  70% { stroke-dashoffset: 0; }
  84%, 100% { stroke-dashoffset: 14; }
}
@keyframes ico-lockup {
  0%, 16% { transform: translateY(-3px); }
  30%, 100% { transform: translateY(0); }
}
@keyframes ico-ping {
  0% { transform: scale(0.32); opacity: 0.9; }
  70% { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* ── Exposure check ─────────────────────────────────────── */
.ec-panel {
  background: var(--navy-raised);
  border: 1px solid var(--od-line);
  border-radius: 6px;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 920px;
}
.ec-q { border: 0; padding: 0; margin: 0 0 1.9rem; }
.ec-q legend {
  font-weight: 600; font-size: 1.0625rem; color: var(--od);
  margin-bottom: 0.8rem; padding: 0;
  display: flex; align-items: baseline; gap: 0.7em;
}
.ec-step {
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 600;
  color: var(--lime); letter-spacing: 0.1em;
}
.ec-opts { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.ec-opts label { position: relative; cursor: pointer; }
.ec-opts input {
  position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; cursor: pointer;
}
.ec-opts span {
  display: inline-block;
  padding: 0.5em 1.05em;
  border: 1.5px solid oklch(1 0 0 / 0.3);
  border-radius: 3px;
  color: var(--od-mid);
  font-size: 1rem; font-weight: 500;
  transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
.ec-opts label:hover span { border-color: var(--lime); color: var(--od); }
.ec-opts input:checked + span {
  background: var(--lime); border-color: var(--lime);
  color: var(--navy-deep); font-weight: 600;
}
.ec-opts input:focus-visible + span { outline: 2.5px solid var(--lime); outline-offset: 3px; }

.ec-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ec-hint { font-size: 0.9rem; color: var(--od-soft); }

.ec-result { border-top: 1.5px solid var(--od-line); margin-top: 2.25rem; padding-top: 2.25rem; }
.ec-result-tag {
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime);
}
.ec-result-title {
  font-stretch: 94%; font-weight: 750; text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.12;
  margin-top: 0.5rem; color: var(--od);
}
.ec-result-lines { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.6rem; }
.ec-result-lines li { position: relative; padding-left: 1.6rem; color: var(--od-mid); }
.ec-result-lines li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 9px; height: 9px; background: var(--lime);
}
.ec-result-rec {
  border: 1.5px solid var(--lime); border-radius: 4px;
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  color: var(--od);
}
.ec-result-rec strong { color: var(--lime); }
.ec-result-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.ec-disclaimer { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--od-soft); max-width: 68ch; }

/* ── Packages ───────────────────────────────────────────── */
.pkg-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: start;
}
.pkg-group-title {
  font-stretch: 96%; font-weight: 750; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: 0.02em;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 2.5px solid var(--navy);
}
.pkg-count { font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.1em; }
.pkg-list { list-style: none; padding: 0; margin: 0; }
.pkg-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.9rem;
  row-gap: 0.05rem;
  align-items: center;
  padding: 0.8rem 0.5rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background-color .15s ease-out;
}
.pkg-item:hover { background: var(--bg); }
.pkg-name { font-weight: 700; color: var(--navy); line-height: 1.35; }
.pkg-item:hover .pkg-name { color: var(--blue); }
.pkg-arrow {
  grid-column: 2; grid-row: 1 / 3;
  font-family: var(--f-mono); font-weight: 600; color: var(--line-mid);
  transition: transform .18s cubic-bezier(.22,1,.36,1), color .18s ease-out;
}
.pkg-item:hover .pkg-arrow { transform: translateX(5px); color: var(--blue); }
.pkg-desc { grid-column: 1; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
/* Price figure inside a package row — mono, dark, never wraps mid-figure */
.pkg-price { font-family: var(--f-mono); font-weight: 600; color: var(--navy); white-space: nowrap; }
.pkg-flag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--navy); color: var(--od);
  border-radius: 2px;
  padding: 0.22em 0.5em;
  margin-left: 0.45em;
  transform: translateY(-0.15em);
}
.pkg-flag-lime { background: var(--lime); color: var(--navy-deep); }
.table-fine { margin-top: clamp(2rem, 4vw, 2.75rem); font-size: 0.9375rem; color: var(--ink-soft); max-width: 75ch; }

/* ── Posted sign (founding clients) ─────────────────────── */
.founding .container { display: grid; place-items: center; }
.posted-sign {
  position: relative;
  max-width: 760px;
  text-align: center;
  background: var(--navy-raised);
  border: 3px solid var(--lime);
  border-radius: 4px;
  padding: clamp(2.25rem, 6vw, 3.75rem) clamp(1.5rem, 5vw, 3.5rem);
  transition: rotate .35s cubic-bezier(.34,1.56,.64,1);
}
.posted-sign:hover { rotate: -0.4deg; }
.sign-bolt {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, oklch(0.9 0.01 255), oklch(0.55 0.02 255) 70%);
}
.sign-bolt.tl { top: 12px; left: 12px; }
.sign-bolt.tr { top: 12px; right: 12px; }
.sign-bolt.bl { bottom: 12px; left: 12px; }
.sign-bolt.br { bottom: 12px; right: 12px; }
.sign-notice {
  font-family: var(--f-mono); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime);
}
.sign-title {
  font-stretch: 94%; font-weight: 750; text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.06;
  margin-top: 0.6rem; color: var(--od);
}
.sign-body {
  margin: 1.4rem auto 1.9rem; max-width: 58ch;
  color: var(--od-mid); text-wrap: pretty;
}
.sign-body strong { color: var(--od); }
.sign-fine { margin-top: 1.1rem; font-size: 0.9375rem; color: var(--od-soft); }

/* ── About ──────────────────────────────────────────────── */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.about-text p { margin-bottom: 1.1rem; color: var(--ink-mid); max-width: 60ch; text-wrap: pretty; }
.about-text .post-title { margin-bottom: 1.4rem; }
.about-text strong { color: var(--ink); }
.about-certs {
  list-style: none; padding: 0; margin: 1.5rem 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.about-certs li {
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.06em;
  border: 1.5px solid var(--navy); color: var(--navy);
  padding: 0.35em 0.8em; border-radius: 2px;
}
/* Verified certification: the one badge we can stand behind — filled, not outlined */
.about-certs li.cert-verified {
  background: var(--lime); color: var(--navy-deep);
  border-color: var(--navy-deep);
}
.about-experienced {
  margin-top: -0.75rem; font-size: 0.9375rem; color: var(--ink-soft);
}
/* Short credibility line under the hero sub */
.hero-cred {
  font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--navy); margin-top: 1.2rem;
  display: flex; align-items: center; gap: 0.55rem;
}
.hero-cred::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--lime); border: 1.5px solid var(--navy);
}
/* Credibility line in the dark footer — lime for contrast */
.footer-cred {
  margin-top: 0.6rem; font-family: var(--f-mono);
  font-size: 0.75rem; letter-spacing: 0.04em; color: var(--lime);
}
/* Differentiator lede at the packages section */
.pkg-diff { margin-top: 0.6rem; color: var(--ink-soft); }

.about-meta { display: grid; gap: 0.4rem; }
.about-loc { font-size: 0.9375rem; color: var(--ink-soft); }
.about-photo-frame {
  border: 1.5px solid var(--line-mid); border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bg-tint);
  display: grid; justify-items: center; gap: 1rem;
}
.about-photo-frame img { width: min(100%, 300px); height: auto; }
.about-photo-note { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--ink-soft); letter-spacing: 0.04em; }

/* ── Contact + scheduler ────────────────────────────────── */
.sched-panel {
  background: var(--navy-raised);
  border: 1px solid var(--od-line);
  border-radius: 6px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.sched-tag {
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime);
}
.sched-title {
  font-stretch: 94%; font-weight: 750; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12;
  margin-top: 0.4rem; color: var(--od);
}
/* Real booking panel (links out to Microsoft Bookings) */
.sched-intro {
  margin-top: 1.4rem; max-width: 54ch;
  font-size: 1.05rem; line-height: 1.6; color: var(--od-mid);
}
.sched-book { margin-top: 1.7rem; font-size: 1.05rem; padding: 0.9em 1.5em; }

.sched-flow { margin-top: 1.9rem; }
.sched-flow[hidden] { display: none; }

/* The big wall calendar: a paper sheet bolted to the panel */
.sched-cal {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  border-radius: 4px;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 18px 44px oklch(0 0 0 / 0.32);
}
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.cal-month {
  font-stretch: 94%; font-weight: 750; text-transform: uppercase;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: 0.015em;
  color: var(--navy);
}
.cal-nav {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--bg); border: 1.5px solid var(--line-mid); border-radius: 3px;
  font-family: var(--f-mono); font-size: 1.05rem; color: var(--navy);
  cursor: pointer;
  transition: border-color .15s ease-out, background-color .15s ease-out, transform .15s cubic-bezier(.22,1,.36,1);
}
.cal-nav:hover:not([disabled]) { border-color: var(--navy); background: var(--bg-tint); transform: translateY(-1.5px); }
.cal-nav[disabled] { opacity: 0.3; cursor: not-allowed; }
.cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-dows span {
  font-family: var(--f-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  text-align: center; padding-block: 0.35rem;
  border-bottom: 2.5px solid var(--navy);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day {
  position: relative;
  min-height: clamp(48px, 7vw, 76px);
  border: 1.5px solid var(--line); border-radius: 3px;
  background: var(--bg);
  padding: 0.4rem 0.5rem;
  font-family: var(--f-mono);
  text-align: left;
  overflow: hidden;
}
.cal-num { font-size: 1rem; font-weight: 600; color: var(--ink-soft); line-height: 1; display: block; }
.cal-day.is-blank { border-color: transparent; background: transparent; }
.cal-day.is-far { background: var(--bg-tint); }
.cal-day.is-past {
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, oklch(0.92 0.008 255 / 0.8) 5px 6.5px),
    var(--bg-tint);
}
.cal-day.is-weekend::before, .cal-day.is-weekend::after {
  content: ""; position: absolute; left: 16%; right: 16%; top: 50%; height: 1.5px;
  background: var(--line-mid);
}
.cal-day.is-weekend::before { transform: rotate(24deg); }
.cal-day.is-weekend::after { transform: rotate(-24deg); }
button.cal-day {
  cursor: pointer;
  transition: transform .15s cubic-bezier(.22,1,.36,1), border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
.cal-day.is-open { border-color: var(--line-mid); }
.cal-day.is-open .cal-num { color: var(--navy); }
.cal-day.is-open::after {
  content: ""; position: absolute; right: 0.5rem; bottom: 0.45rem;
  width: 9px; height: 9px;
  background: var(--lime);
  outline: 1.5px solid var(--navy); outline-offset: -1.5px;
}
button.cal-day:hover {
  transform: translateY(-2.5px);
  border-color: var(--navy);
  background: oklch(0.93 0.29 130 / 0.14);
  box-shadow: 0 8px 18px oklch(0.22 0.06 255 / 0.14);
}
.cal-day.is-selected, button.cal-day.is-selected:hover { background: var(--lime); border-color: var(--navy); }
.cal-day.is-selected .cal-num { color: var(--navy-deep); }
.cal-day.is-selected::after { background: var(--navy); }
.cal-tag {
  position: absolute; top: 0.45rem; right: 0.5rem;
  font-size: 0.55rem; font-weight: 600; letter-spacing: 0.14em; color: var(--blue);
}
.cal-legend {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 1rem;
  font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.cal-key { width: 12px; height: 12px; flex: none; }
.cal-key-open { background: var(--lime); outline: 1.5px solid var(--navy); outline-offset: -1.5px; }
.cal-key-x {
  background:
    linear-gradient(45deg, transparent 43%, var(--line-mid) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--line-mid) 43% 57%, transparent 57%);
  margin-left: 1.1rem;
}

/* Time tray under the calendar */
.cal-tray { margin-top: 1.6rem; border-top: 1px solid var(--od-line); padding-top: 1.5rem; }
.cal-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sched-label {
  font-family: var(--f-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--od);
  margin-bottom: 0.9rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.sched-tz { color: var(--od-soft); font-weight: 500; letter-spacing: 0.08em; font-size: 0.72rem; }
.cal-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.slot-btn {
  background: oklch(1 0 0 / 0.05);
  border: 1.5px solid oklch(1 0 0 / 0.28);
  border-radius: 3px;
  color: var(--od-mid);
  font-family: var(--f-mono);
  padding: 0.5em 0.35em;
  cursor: pointer;
  display: grid; justify-items: center; gap: 0.1rem;
  transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out, transform .15s cubic-bezier(.22,1,.36,1);
}
.slot-btn:hover { border-color: var(--lime); color: var(--od); transform: translateY(-1.5px); }
.slot-btn.is-selected, .slot-btn.is-selected:hover {
  background: var(--lime); border-color: var(--lime); color: var(--navy-deep);
}
.slot-time { font-size: 0.92rem; font-weight: 500; padding-block: 0.62em; }
.sched-summary {
  border: 1.5px dashed var(--od-line);
  border-radius: 3px;
  padding: 0.9rem 1.1rem;
  font-family: var(--f-mono); font-size: 0.95rem; line-height: 1.6;
  color: var(--od-soft);
  flex: 1 1 240px; min-width: 0;
}
.sched-summary.is-set { border-style: solid; border-color: var(--lime); color: var(--od); }
.sched-confirm { flex: none; }
.sched-note { font-size: 0.875rem; color: var(--od-soft); margin-top: 0.9rem; }

.sched-done {
  display: grid; justify-items: center; gap: 0.9rem;
  text-align: center;
  border: 2.5px solid var(--lime); border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: 1.9rem;
}
.sched-done[hidden] { display: none; }
.sched-done-stamp {
  font-family: var(--f-mono); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lime); border: 2px solid var(--lime); border-radius: 2px;
  padding: 0.3em 0.7em;
  rotate: -3deg;
}
.sched-done-when {
  font-stretch: 94%; font-weight: 750; text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; color: var(--od);
}
.sched-done-copy { color: var(--od-mid); max-width: 48ch; }

.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-h3 {
  font-stretch: 96%; font-weight: 750; font-size: 1.3rem;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--od);
}
.contact-sub { margin-top: 0.7rem; color: var(--od-mid); max-width: 44ch; text-wrap: pretty; }
.contact-details { display: grid; gap: 1.4rem; margin-top: 2rem; }
.contact-details dt {
  font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--od-soft);
}
.contact-details dd { margin: 0.2rem 0 0; font-size: 1.0625rem; color: var(--od); }
.contact-details a { color: var(--od); text-decoration-color: var(--lime); text-underline-offset: 4px; }
.contact-details a:hover { color: var(--lime); }

.contact-form { display: grid; gap: 1.2rem; }
.contact-form .contact-h3 { margin-bottom: 0.2rem; }
/* Embedded Microsoft Form — white card so the Forms UI sits cleanly on the dark section */
.contact-form-embed { display: grid; gap: 1.1rem; }
.ms-form-frame {
  background: #fff;
  border: 1px solid var(--od-line);
  border-radius: 6px;
  overflow: hidden;
  height: 620px;
}
.ms-form-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-field { display: grid; gap: 0.4rem; }
.form-field label { font-weight: 600; font-size: 0.9375rem; color: var(--od); }
.form-field input, .form-field select, .form-field textarea {
  background: oklch(1 0 0 / 0.06);
  border: 1.5px solid oklch(1 0 0 / 0.28);
  border-radius: 3px;
  color: var(--od);
  padding: 0.7em 0.9em;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.form-field ::placeholder { color: oklch(1 0 0 / 0.62); }
.form-field select { appearance: auto; }
.form-field select option { color: var(--ink); background: var(--bg); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--lime);
  background: oklch(1 0 0 / 0.09);
}
.form-field input.is-invalid, .form-field select.is-invalid, .form-field textarea.is-invalid {
  border-color: var(--red);
}
.form-submit { justify-self: start; }
.form-note { font-size: 0.9375rem; color: var(--od-soft); max-width: 52ch; }

/* ── Footer ─────────────────────────────────────────────── */
.footer {
  background: var(--navy-deep);
  color: var(--od-mid);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--gap);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--od-line);
}
.footer-brand p { margin-top: 1rem; font-size: 1rem; max-width: 32ch; }
.footer h3 {
  font-stretch: 96%; font-weight: 750; font-size: 0.9375rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--od); margin-bottom: 0.9rem;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.footer a { color: var(--od-mid); text-decoration: none; font-size: 1rem; }
.footer a:hover { color: var(--lime); }
.footer-chips { display: flex !important; flex-wrap: wrap; gap: 0.45rem; }
.footer-chips li {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.05em;
  border: 1px solid var(--od-line); padding: 0.3em 0.65em; border-radius: 2px;
}
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: 0.9375rem;
}
.footer-bottom a { color: var(--od-mid); }
.footer-bottom a:hover { color: var(--lime); }

/* ── Survey progress line (desktop) ─────────────────────── */
.survey-line {
  position: fixed; left: 14px; top: 0; bottom: 0; width: 2px;
  background: oklch(0.5 0.02 255 / 0.18);
  z-index: var(--z-survey);
}
.survey-line-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: var(--lime);
}
.survey-tick {
  position: absolute; left: -4px; width: 10px; height: 10px;
  background: var(--bg); border: 2px solid var(--line-mid);
}
.survey-tick.is-passed { background: var(--lime); border-color: var(--navy); }
@media (max-width: 1279px) { .survey-line { display: none; } }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-toast);
  background: var(--navy-deep); color: var(--od);
  border: 2px solid var(--lime); border-radius: 4px;
  padding: 0.9rem 1.4rem; max-width: 380px;
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.35);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1240px) {
  .nav-phone { display: none; }
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-survey { max-width: 620px; }
  .svc-verify { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { order: -1; }
  .about-photo-frame { max-width: 420px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
}
@media (max-width: 1060px) {
  .nav-links {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 1.6rem;
    background: var(--navy-deep);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease-out, visibility .25s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; }
  .nav-links a { font-size: 1.4rem; color: var(--od) !important; font-stretch: 88%; font-weight: 700; }
  .nav-links-contact { display: block; }
  .nav-burger { display: flex; }
  .nav.menu-open { background: var(--navy-deep); box-shadow: none; }
  .nav.menu-open .brand-name { color: var(--od); }
  .nav.menu-open .brand-usa { color: var(--lime); }
  .nav.menu-open .nav-burger span { background: var(--od); }
  .nav-actions .btn { display: none; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .cal-grid, .cal-dows { gap: 4px; }
  .cal-day { min-height: 46px; padding: 0.3rem 0.35rem; }
  .cal-num { font-size: 0.85rem; }
  .cal-tag { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .audit-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ── Legal pages (privacy / terms) ──────────────────────── */
.legal-topbar {
  border-bottom: 1px solid var(--line-mid);
  padding: 1.1rem 0;
}
.legal-topbar .container {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.legal-back { font-family: var(--f-mono); font-size: 0.85rem; color: var(--ink-soft); }
.legal-back:hover { color: var(--navy); }
.legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.legal .container { max-width: 760px; }
.legal-eyebrow {
  font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 0.6rem;
}
.legal h1 {
  font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.08; color: var(--navy);
  font-stretch: 90%; margin-bottom: 0.5rem;
}
.legal .legal-updated { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 2.5rem; }
.legal h2 {
  font-size: 1.35rem; color: var(--navy); margin: 2.4rem 0 0.7rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line-mid);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p, .legal li { font-size: 1.02rem; line-height: 1.7; color: var(--ink); }
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1rem 1.2rem; display: grid; gap: 0.45rem; }
.legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--navy); }
.legal-note {
  margin-top: 2.5rem; padding: 1rem 1.2rem; border-left: 3px solid var(--lime);
  background: var(--bg-tint); font-size: 0.95rem; color: var(--ink-soft);
}

/* ── Motion guards ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}