/* ==========================================================================
   General Vending — main.css
   Plain CSS, custom properties, no framework. Hand-editable by design.

   HOW TO CHANGE THINGS
   - Brand colors ............ §2 :root
   - Per-vertical accent ...... src/_data/verticals.json  ("accent")
                               (a <style> block in the head reads that file —
                                one line per vertical, nothing to edit here)
   - Type scale ............... §2 :root, --step-*
   - Spacing rhythm ........... §2 :root, --space-*
   ========================================================================== */

/* §1  FONTS — self-hosted Barlow, latin subset, three weights only
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* §2  TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* Brand palette — sampled from the logo */
  --ink: #011026;         /* headings, footer background */
  --steel-deep: #1C3356;  /* nav bar, primary buttons */
  --steel: #5277A4;       /* links, accents            (4.63:1 on white) */
  --ice: #A8C8EC;         /* borders, dividers */
  --wash: #DAEDFA;        /* section backgrounds */

  /* Neutrals */
  --body: #25313F;        /* body text                (13.21:1 on white) */
  --muted: #556376;       /* secondary text            (6.12:1 on white) */
  --surface: #FFFFFF;
  --surface-alt: #F5F9FD;
  --rule: #DCE6F2;

  /* Accent — overridden per vertical by the head <style> block.
     Core pages (home, about, revenue share, contact, service) keep the navy
     spine, so the default accent IS the spine color. */
  --accent: var(--steel-deep);
  --accent-ink: var(--steel-deep);
  --accent-on: #FFFFFF;

  /* Placeholder warning color — deliberately loud */
  --flag: #B4531A;
  --flag-bg: #FFF4EC;
  --flag-rule: #E8A87C;

  /* Type scale */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.42rem);
  --step-2: clamp(1.44rem, 1.30rem + 0.70vw, 1.85rem);
  --step-3: clamp(1.73rem, 1.50rem + 1.15vw, 2.40rem);
  --step-4: clamp(2.07rem, 1.70rem + 1.85vw, 3.12rem);
  --step-5: clamp(2.49rem, 1.90rem + 2.95vw, 4.05rem);

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7rem;

  /* Sticky-bar heights. nav.js overwrites these at runtime with the real
     measured values (ResizeObserver on the header and the section nav), so
     the two bars can never drift apart. These are NO-JS FALLBACKS ONLY, set
     a couple of px generous so a failure leaves a small gap rather than
     clipping the pills. Measured: header 101.5px desktop / 67px mobile. */
  --header-h: 104px;
  --section-nav-h: 0px;

  --measure: 68ch;
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-s: 0 1px 2px rgba(1, 16, 38, 0.06), 0 2px 8px rgba(1, 16, 38, 0.05);
  --shadow-m: 0 2px 4px rgba(1, 16, 38, 0.07), 0 8px 24px rgba(1, 16, 38, 0.09);

  --transition: 160ms ease;
}


/* No-JS fallbacks per breakpoint. With JS these are replaced by measured
   values; :has() scopes the section-nav height to pages that have one. */
@media (max-width: 560px) {
  :root { --header-h: 70px; }
}
body:has(.anchor-nav) { --section-nav-h: 72px; }
@media (max-width: 560px) {
  body:has(.anchor-nav) { --section-nav-h: 112px; }  /* pills wrap to 2 rows */
}

/* §3  RESET
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* §4  TYPOGRAPHY
   ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;               /* deliberate ceiling — see brief §3 */
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); letter-spacing: -0.015em; }
h3 { font-size: var(--step-2); letter-spacing: -0.01em; }
h4 { font-size: var(--step-1); }
h5, h6 { font-size: var(--step-0); }

p, li { text-wrap: pretty; }
p { max-width: var(--measure); }

a { color: var(--steel); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

strong, b { font-weight: 700; }

/* Small label / eyebrow */
.eyebrow {
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--space-2xs);
  display: block;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--body);
  max-width: 58ch;
}

.small { font-size: var(--step--1); color: var(--muted); }

/* §5  LAYOUT
   ------------------------------------------------------------------------ */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); }

main { flex: 1 0 auto; }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--wash { background: var(--wash); }
.section--alt { background: var(--surface-alt); }
.section--ink { background: var(--ink); color: var(--wash); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink a { color: var(--ice); }
.section--ink a:hover { color: #fff; }

.section__head { margin-bottom: var(--space-l); max-width: 62ch; }
.section__head > p { color: var(--muted); }

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-l); }

.grid { display: grid; gap: var(--space-m); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.split {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
}

/* §6  SKIP LINK + FOCUS
   ------------------------------------------------------------------------ */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: var(--space-xs) var(--space-m);
  font-weight: 500;
}
.skip:focus { left: var(--space-s); top: var(--space-s); }

:focus-visible {
  outline: 3px solid var(--steel);
  outline-offset: 2px;
  border-radius: 2px;
}
.section--ink :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--ice); }

/* §7  HEADER / NAV
   ------------------------------------------------------------------------ */
/* The header is the functional layer: a dark glass bar over the content
   (HIG › Materials — regular glass, monochrome labels, one accent). On pages
   with a full-bleed stage (.has-stage) it starts clear over the image and
   gains its material once the page scrolls (.is-raised, set by nav.js). */
.site-header {
  background: rgba(1, 16, 38, 0.9);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid var(--accent);
  transition: background-color 240ms ease, border-color 240ms ease;
}
.has-stage .site-header:not(.is-raised):not([data-nav-open="true"]) {
  background: linear-gradient(180deg, rgba(1, 16, 38, 0.55), rgba(1, 16, 38, 0));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 72px;
  padding-block: var(--space-2xs);
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; }
.brand__lockup { width: 200px; height: auto; }
.brand__mark { width: 46px; }

/* Toggle the <picture> wrappers, not the inner <img>. Hiding the img alone
   left the picture element with a zero-size block box that still consumed
   flex gap — and `.brand img` (0-1-1) outranked `.brand__mark` (0-1-0), so
   the mark stayed visible on desktop. */
.brand__pic--mark { display: none; }
.brand__pic--lockup { display: block; }

/* On narrow screens swap the horizontal lockup for the square chrome mark */
@media (max-width: 900px) {
  .brand__pic--lockup { display: none; }
  .brand__pic--mark { display: block; }
}

/* Phone — visually prominent on every page, per brief §6 */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 700;
  font-size: var(--step-1);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.header-phone:hover, .header-phone:focus { color: var(--ice); }
.header-phone svg { flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  font-weight: 500;
  align-items: center;
  gap: 0.5rem;
}

.nav { display: flex; align-items: center; gap: var(--space-xs); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link {
  display: block;
  padding: 0.55rem 0.7rem;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav__link:hover, .nav__link:focus { background: rgba(255, 255, 255, 0.12); color: #fff; }
.nav__link[aria-current="page"] { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Verticals dropdown — all nine at equal weight */
.nav__group { position: relative; }
.nav__trigger {
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 560px;
  background: #fff;
  color: var(--body);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-m);
  padding: var(--space-s);
  display: none;
}
.nav__group[data-open="true"] .nav__panel { display: block; }

.nav__panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__panel a {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step--1);
}
.nav__panel a:hover, .nav__panel a:focus { background: var(--wash); }
.nav__swatch {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; background: var(--sw, var(--steel));
}

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--steel-deep);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: var(--space-s) 1.25rem var(--space-m);
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .site-header[data-nav-open="true"] .nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 0.7rem 0.6rem; font-size: var(--step-0); }
  .nav__group { position: static; }
  .nav__panel {
    position: static; min-width: 0; display: block;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 0 var(--space-s);
  }
  .nav__trigger { display: none; }
  .nav__panel-grid { grid-template-columns: 1fr; }
  .nav__panel a { color: var(--ice); }
  .nav__panel a:hover, .nav__panel a:focus { background: rgba(255, 255, 255, 0.12); color: #fff; }
  .nav__panel-heading { color: rgba(255,255,255,.6); }
}

.nav__panel-heading {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.3rem 0.7rem var(--space-2xs);
}

/* Separates the equipment pages from the venue pages inside the one panel. */
.nav__panel-heading--divided {
  margin-top: var(--space-2xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--rule);
}
@media (max-width: 1100px) {
  .nav__panel-heading--divided { border-top-color: rgba(255, 255, 255, 0.22); }
}

/* Small phones. NOTE: these were verified by reading the cascade, not by
   rendering — headless Chrome on Windows clamps the viewport to ~484px and
   crops the screenshot, so widths below that could not be visually checked.
   Placed AFTER the .nav-toggle base rules so they actually win. */
@media (max-width: 560px) {
  .site-header__bar { gap: var(--space-2xs); min-height: 64px; }
  .header-phone { font-size: var(--step-0); letter-spacing: 0; }
  .nav-toggle { padding: 0.45rem 0.6rem; }
  .brand__mark { width: 40px; }
}
@media (max-width: 380px) {
  .nav-toggle span { display: none; }   /* icon-only menu button */
  .nav-toggle { padding: 0.5rem; }
}

/* §8  BUTTONS
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 44px;               /* HIG › Accessibility: 44 x 44 minimum target */
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.03em;
  text-decoration: none;
  text-align: center;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--steel-deep); color: #fff; border-color: var(--steel-deep); }
.btn--primary:hover, .btn--primary:focus { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--accent { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
.btn--accent:hover, .btn--accent:focus { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--accent-on); }

.btn--ghost { background: transparent; color: var(--steel-deep); border-color: var(--ice); }
.btn--ghost:hover, .btn--ghost:focus { border-color: var(--steel-deep); background: var(--wash); color: var(--ink); }

.btn--on-ink { background: #fff; color: var(--ink); border-color: #fff; }
.btn--on-ink:hover, .btn--on-ink:focus { background: var(--ice); border-color: var(--ice); color: var(--ink); }

/* Secondary action over imagery or ink: clear glass, white label */
.btn--glass {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn--glass:hover, .btn--glass:focus { background: rgba(255, 255, 255, 0.16); border-color: #fff; color: #fff; }

.btn--lg { padding: 0.95rem 1.9rem; font-size: var(--step-0); min-height: 52px; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

/* §9  HERO
   ------------------------------------------------------------------------ */
.hero {
  background:
    linear-gradient(180deg, rgba(1, 16, 38, 0) 0%, rgba(1, 16, 38, 0.04) 100%),
    var(--surface);
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 38%, transparent 100%);
}
.hero__inner { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.15fr 1fr; } }

.hero h1 { margin-bottom: var(--space-m); }
.hero .lede { margin-bottom: var(--space-l); }

.hero--vertical { background: var(--wash); }
.hero--compact { padding-block: var(--space-xl) var(--space-l); }
.hero--compact .hero__inner { grid-template-columns: 1fr; }

/* §10  CARDS
   ------------------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  transition: border-color var(--transition), box-shadow var(--transition),
    transform var(--transition);
}
.card h3 { font-size: var(--step-1); }
.card p { color: var(--muted); font-size: var(--step-0); max-width: none; }

a.card { text-decoration: none; color: inherit; }
a.card:hover, a.card:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-m);
  transform: translateY(-2px);
}
a.card:hover h3 { color: var(--accent-ink); }

.card__more {
  margin-top: auto;
  padding-top: var(--space-2xs);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--accent-ink);
}

/* Vertical card gets its own accent stripe, set inline from the data */
.card--vertical { border-top: 3px solid var(--sw, var(--accent)); }

/* §11  FEATURE / DRIVER LISTS
   ------------------------------------------------------------------------ */
.drivers { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); }
.driver {
  border-left: 3px solid var(--accent);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-s);
}
.driver__name { font-weight: 700; color: var(--ink); display: block; }
.driver__detail { color: var(--muted); }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.ticks li { padding-left: 1.9rem; position: relative; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 1.05rem; height: 0.55rem;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

.numbered { list-style: none; padding: 0; margin: 0; counter-reset: n; display: grid; gap: var(--space-m); }
.numbered > li { counter-increment: n; padding-left: 3.25rem; position: relative; }
.numbered > li::before {
  content: counter(n);
  position: absolute; left: 0; top: -0.15em;
  width: 2.35rem; height: 2.35rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-on);
  font-weight: 700; font-size: var(--step-0);
}

/* §12  TABLES (revenue share)
   ------------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
table { border-collapse: collapse; width: 100%; min-width: 560px; background: #fff; }
caption { text-align: left; padding: var(--space-s) var(--space-m); font-weight: 500; color: var(--muted); font-size: var(--step--1); }
th, td { text-align: left; padding: 0.85rem var(--space-m); border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { background: var(--wash); color: var(--ink); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.05em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--ink); }

/* §13  PLACEHOLDERS  — visible, machine-findable, trivially removable
   ------------------------------------------------------------------------ */
.placeholder {
  --ph-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--space-m);
  border: 2px dashed var(--flag-rule);
  border-radius: var(--radius-lg);
  background: var(--flag-bg);
  color: var(--flag);
  font-size: var(--step--1);
  line-height: 1.45;
}

.placeholder__label {
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.placeholder__what { font-weight: 500; color: #7A3610; font-size: var(--step-0); }
.placeholder__detail { color: var(--flag); opacity: 0.85; }

.placeholder--img {
  aspect-ratio: var(--ph-ratio);
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}

.placeholder--blocking {
  border-color: var(--flag);
  border-style: solid;
  border-width: 2px;
  box-shadow: inset 0 0 0 2px var(--flag-bg), inset 0 0 0 4px var(--flag-rule);
}
.placeholder--inline { display: inline-flex; padding: 0.15rem 0.5rem; border-width: 1px; border-radius: var(--radius); }

/* §14  FORMS
   ------------------------------------------------------------------------ */
.form { display: grid; gap: var(--space-m); max-width: 660px; }
.form--wide { max-width: none; }

.field { display: grid; gap: 0.35rem; }
.field > label { font-weight: 500; color: var(--ink); }
.field__hint { font-size: var(--step--1); color: var(--muted); }
.req { color: var(--flag); font-weight: 700; }
.optional { color: var(--muted); font-weight: 400; font-size: var(--step--1); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ice);
  border-radius: var(--radius);
  background: #fff;
  color: var(--body);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgba(82, 119, 164, 0.18);
  outline: none;
}
textarea { min-height: 8rem; resize: vertical; }

fieldset { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-m); }
legend { font-weight: 700; color: var(--ink); padding-inline: var(--space-2xs); }

.field-row { display: grid; gap: var(--space-m); }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.checks { display: grid; gap: var(--space-xs); }
.check { display: flex; align-items: flex-start; gap: var(--space-2xs); font-weight: 400; }
.check input { margin-top: 0.35em; width: 1.05rem; height: 1.05rem; accent-color: var(--steel-deep); flex-shrink: 0; }

.form__note {
  background: var(--wash);
  border-left: 3px solid var(--steel);
  padding: var(--space-s) var(--space-m);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--body);
  max-width: 660px;
}
.form__note p { max-width: none; }

/* Honeypot — off-screen, never focusable by keyboard */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* §15  SERVICE PWA
   ------------------------------------------------------------------------ */
.svc { --accent: var(--steel-deep); }
.svc-shell { padding-block: var(--space-l) var(--space-2xl); }

.fault-grid { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.fault {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  text-align: left;
  padding: var(--space-m);
  min-height: 72px;
  border: 2px solid var(--ice);
  border-radius: var(--radius-lg);
  background: #fff;
  font-weight: 500;
  color: var(--ink);
  transition: border-color var(--transition), background var(--transition);
}
.fault:hover, .fault:focus-visible { border-color: var(--steel); background: var(--wash); }
.fault[aria-pressed="true"] { border-color: var(--steel-deep); background: var(--steel-deep); color: #fff; }
.fault[aria-pressed="true"] .fault__icon { background: rgba(255,255,255,.18); color: #fff; }

.fault__icon {
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--wash);
  color: var(--steel-deep);
}

.svc-status {
  display: flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--step--1); font-weight: 500;
  padding: 0.35rem 0.7rem; border-radius: 100px;
  background: var(--wash); color: var(--steel-deep);
  width: fit-content;
}
.svc-status__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #1F8A4C; }
.svc-status[data-state="offline"] { background: var(--flag-bg); color: var(--flag); }
.svc-status[data-state="offline"] .svc-status__dot { background: var(--flag); }

.svc-confirm {
  border: 1px solid var(--ice);
  border-left: 4px solid #1F8A4C;
  background: var(--wash);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-m);
}
.svc-confirm h2 { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
.svc-confirm[data-urgency="urgent"] { border-left-color: var(--flag); }

.saved-note {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-s); flex-wrap: wrap;
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--space-xs) var(--space-s);
  font-size: var(--step--1); color: var(--muted);
}
.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--steel); text-decoration: underline;
  font-size: inherit; font-weight: 500;
}

/* §16  FOOTER
   ------------------------------------------------------------------------ */
.site-footer {
  background: var(--ink);
  color: var(--ice);
  padding-block: var(--space-xl) var(--space-l);
  margin-top: auto;
}
.site-footer a { color: var(--ice); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus { color: #fff; text-decoration: underline; }

.footer-top {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-l);
  border-bottom: 1px solid rgba(168, 200, 236, 0.22);
}
@media (min-width: 780px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

.footer-brand img { width: 260px; margin-bottom: var(--space-s); }
.footer-brand picture { display: block; margin-bottom: var(--space-s); }
.footer-logo { width: 260px; height: auto; }
.footer-tagline {
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ice); font-size: var(--step--1);
}

.footer-col h2 {
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
  margin-bottom: var(--space-xs);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }

.footer-phone { font-size: var(--step-2); font-weight: 700; color: #fff; text-decoration: none; display: inline-block; }
.footer-phone:hover { color: var(--ice); }

.footer-offices { display: grid; gap: var(--space-s); }
address { font-style: normal; }

.footer-bottom {
  padding-top: var(--space-m);
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m);
  align-items: center; justify-content: space-between;
  font-size: var(--step--1); color: rgba(255, 255, 255, 0.62);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.78); }

.brand-strip { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.brand-strip a, .brand-strip span { font-weight: 500; }

/* §17  PROSE (articles)
   ------------------------------------------------------------------------ */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-m); }
.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-l); }
.prose ul, .prose ol { padding-left: 1.35rem; display: grid; gap: var(--space-2xs); }
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-m);
  color: var(--muted);
  font-size: var(--step-1);
}
.prose code {
  background: var(--wash); padding: 0.12em 0.35em;
  border-radius: 3px; font-size: 0.9em;
}
.prose img { border-radius: var(--radius-lg); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--space-xl); }

.article-meta { color: var(--muted); font-size: var(--step--1); display: flex; gap: var(--space-s); flex-wrap: wrap; }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; padding: 0; margin: 0; }
.tag {
  display: inline-block; padding: 0.2rem 0.6rem;
  background: var(--wash); color: var(--steel-deep);
  border-radius: 100px; font-size: var(--step--1); font-weight: 500;
  text-decoration: none;
}
.tag:hover { background: var(--ice); color: var(--ink); }

.empty-state {
  border: 1px dashed var(--ice);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  color: var(--muted);
  background: var(--surface-alt);
}

/* §18  TESTIMONIALS — framework ships dormant, renders nothing until real
   quotes exist. See src/_data/testimonials.json
   ------------------------------------------------------------------------ */
.testimonials { display: grid; gap: var(--space-m); }
.testimonial {
  background: #fff; border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-m) var(--space-l);
}
.testimonial blockquote { font-size: var(--step-1); color: var(--ink); }
.testimonial figcaption { margin-top: var(--space-s); color: var(--muted); font-size: var(--step--1); font-weight: 500; }

/* §19  MISC
   ------------------------------------------------------------------------ */
.callout {
  background: var(--wash);
  border-radius: var(--radius-lg);
  padding: var(--space-l);
  border-left: 4px solid var(--accent);
}
.callout p { max-width: none; }
.callout h3 { margin-bottom: var(--space-2xs); }

.cta-band { background: var(--ink); color: var(--wash); padding-block: var(--space-xl); }
.cta-band h2 { color: #fff; margin-bottom: var(--space-xs); }
.cta-band p { color: var(--ice); max-width: 60ch; margin-bottom: var(--space-l); }

.crosslinks { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.pill {
  display: inline-block; padding: 0.25rem 0.7rem;
  border: 1px solid var(--ice); border-radius: 100px;
  font-size: var(--step--1); font-weight: 500; color: var(--steel-deep);
  background: #fff;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Sticky section nav -------------------------------------------------
   Two stacked sticky bars. The offset MUST come from --header-h, which
   nav.js measures off the real header with a ResizeObserver. A hardcoded
   value cannot work: the header is 101.5px at desktop and 67px at mobile,
   so any constant clips the pills at one width and leaves a gap at the other.
   The values in :root (§2) are no-JS fallbacks only.
   ----------------------------------------------------------------------- */
.anchor-nav {
  position: sticky;
  top: var(--header-h);
  /* Strictly below .site-header (z-index 100) so any sub-pixel rounding
     hides the bar's background under the header, never the pills. */
  z-index: 40;
  /* Solid, full-height. Content scrolling underneath must never show
     through behind the pills. */
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.anchor-nav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  /* Clear space above and below the pills — they never sit flush. */
  padding-block: var(--space-s);
}

.anchor-nav a {
  padding: 0.3rem 0.7rem; border-radius: 100px;
  font-size: var(--step--1); font-weight: 500; text-decoration: none;
  color: var(--steel-deep); border: 1px solid var(--rule);
  background: var(--surface);
}
.anchor-nav a:hover { background: var(--wash); border-color: var(--ice); }

/* Jump targets must clear BOTH sticky bars. --section-nav-h is 0 on pages
   with no section nav, so those get header + 1rem. */
[id] {
  scroll-margin-top: calc(var(--header-h) + var(--section-nav-h) + 1rem);
}

/* §19b  ART DIRECTION — "after dark"
   Dark full-bleed stages in --ink, reading sections on --wash and white,
   hairline rules instead of boxed cards. Images come from imagery.json via
   {% photo %}; text over an image always sits on that image's --scrim, whose
   stops validate.py checks against the real pixels for WCAG AA.
   ------------------------------------------------------------------------ */
.display {
  font-size: clamp(2.6rem, 1.35rem + 4.3vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 13ch;
}

.eyebrow--rule { display: flex; align-items: center; gap: 0.75rem; letter-spacing: 0.16em; }
.eyebrow--rule::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; flex-shrink: 0; }

/* -- dark sections: ink and steel -- */
.section--ink, .section--steel { color: rgba(218, 237, 250, 0.86); }
.section--steel { background: var(--steel-deep); }
.section--ink h2, .section--ink h3,
.section--steel h2, .section--steel h3 { color: #fff; }
.section--ink .eyebrow, .section--steel .eyebrow { color: var(--ice); }
.section--steel a { color: var(--ice); }
.section--steel :focus-visible { outline-color: var(--ice); }

.section { overflow-x: clip; }
@media (max-width: 759px) { .section { padding-block: var(--space-xl); } .cta-band { padding-block: var(--space-2xl); } }
.section h2 + p, .section h2 + .lede, .section .lede + p, .section p + p { margin-top: var(--space-s); }
.split h2 { margin-block: var(--space-s); }
.section .btn-row, .ticks { margin-top: var(--space-l); }

/* -- lead-in: the section's statement -- */
.lead-in { max-width: 46rem; margin-bottom: var(--space-xl); }
.lead-in h2 { font-size: var(--step-4); letter-spacing: -0.025em; margin-bottom: var(--space-s); }
.lead-in p { font-size: var(--step-1); line-height: 1.5; }
.lead-in--split { max-width: none; display: grid; gap: var(--space-m); align-items: end; }
@media (min-width: 900px) { .lead-in--split { grid-template-columns: 1.2fr 1fr; } .lead-in--split h2 { margin-bottom: 0; } }

/* -- stage: the full-bleed hero -- */
.stage {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  min-height: min(100svh, 62rem);
  display: grid;
  align-items: end;
}
.stage__media { position: absolute; inset: 0; z-index: -2; }
.stage__media img, .band__media img { width: 100%; height: 100%; object-fit: cover; }
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--scrim), linear-gradient(0deg, var(--ink) 0, rgba(1, 16, 38, 0) 28%);
}
.stage__inner { padding-block: var(--space-3xl) clamp(3.5rem, 9vh, 6.5rem); }
.stage__copy { max-width: 36rem; }
.stage h1 { color: #fff; margin-block: var(--space-m) var(--space-m); }
.stage .eyebrow { color: var(--ice); }
.stage .lede { color: rgba(255, 255, 255, 0.86); }
.stage .btn-row { margin-top: var(--space-l); }
.stage__meta { margin-top: var(--space-l); font-size: var(--step--1); color: var(--ice); letter-spacing: 0.02em; }
.stage :focus-visible { outline-color: var(--ice); }

/* -- band: full-width image with copy on its shadow side -- */
.band {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.86);
  min-height: clamp(32rem, 72vh, 48rem);
  display: grid;
  align-items: center;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.band__inner { padding-block: var(--space-3xl); }
.band__copy { max-width: 34rem; }
.band h2 { color: #fff; font-size: var(--step-4); letter-spacing: -0.025em; margin-block: var(--space-s); }
.band .eyebrow { color: var(--ice); }
.band :focus-visible { outline-color: var(--ice); }
.link-pair { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); margin-top: var(--space-l); }

/* Below 760px the copy leaves the image: the image becomes an art-directed
   band (mobile crop from imagery.json) and the text sits on solid ink. */
@media (max-width: 759px) {
  .stage, .band { display: block; min-height: 0; }
  .stage__media, .band__media { position: relative; inset: auto; z-index: auto; display: block; }
  .stage__media img { height: auto; }
  .band__media { aspect-ratio: 16 / 11; }
  .stage__media::after, .band__media::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
    background: linear-gradient(0deg, var(--ink), rgba(1, 16, 38, 0));
  }
  .stage__media { margin-top: calc(-1 * var(--header-h)); }
  .stage { padding-top: var(--header-h); }
  .stage::before, .band::before { display: none; }
  .stage__inner { padding-block: 0 var(--space-xl); }
  .stage__copy .display { margin-top: var(--space-s); }
  .band__inner { padding-block: var(--space-s) var(--space-2xl); }
  .band__media img { object-position: 62% 50% !important; }
}

/* -- ruled columns (replaces boxed cards) -- */
.ruled { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-l) var(--space-xl); counter-reset: r; }
@media (min-width: 860px) { .ruled--3 { grid-template-columns: repeat(3, 1fr); } }
.ruled > li { counter-increment: r; border-top: 1px solid rgba(168, 200, 236, 0.28); padding-top: var(--space-m); }
.ruled > li::before {
  content: counter(r, decimal-leading-zero);
  display: block; margin-bottom: var(--space-m);
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.14em; color: var(--ice);
}
.ruled h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.ruled p { max-width: 40ch; }

/* -- text link with arrow, 44px tall target -- */
.more {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  font-weight: 500; letter-spacing: 0.02em; text-decoration: none;
  color: var(--accent-ink);
}
.more::after { content: "\2192"; transition: transform var(--transition); }
.more:hover::after, .more:focus-visible::after { transform: translateX(4px); }
.section--ink .more, .section--steel .more, .more--on-ink { color: var(--ice); }
.more--on-ink:hover, .section--ink .more:hover { color: #fff; }

/* -- feature: copy with an image that runs off the page edge -- */
.feature { display: grid; gap: var(--space-xl); align-items: center; }
.feature__media { margin: 0; }
.feature__copy h2 { font-size: var(--step-4); letter-spacing: -0.025em; margin-block: var(--space-s) var(--space-m); }
.feature__copy p + p, .band__copy p + p, .lead-in p + p { margin-top: var(--space-s); }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); }
  .feature__media { margin-right: calc((100vw - min(100vw - 2.5rem, var(--wrap))) / -2); }
  .feature__media .frame img { border-radius: 10px 0 0 10px; }
}

/* -- index list: every location type, hairline rows -- */
.index-list { list-style: none; padding: 0; margin: 0; display: grid; }
@media (min-width: 860px) { .index-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); } }
.index-list li { border-top: 1px solid rgba(168, 200, 236, 0.24); }
.index-list a {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.25rem var(--space-s);
  align-items: baseline; padding: var(--space-m) 0; text-decoration: none; color: inherit;
}
.index-list a::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sw); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  grid-row: 1; align-self: center;
}
.index-list a::after {
  content: "\2192"; grid-column: 3; grid-row: 1; color: var(--ice);
  transition: transform var(--transition);
}
.index-list__name { grid-column: 2; font-weight: 700; font-size: var(--step-1); color: #fff; }
.index-list__lede { grid-column: 2; font-size: var(--step--1); color: rgba(218, 237, 250, 0.78); max-width: 52ch; }
.index-list a:hover::after, .index-list a:focus-visible::after { transform: translateX(5px); color: #fff; }
.index-list a:hover .index-list__name { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.index-list__heading {
  margin: var(--space-xl) 0 var(--space-xs); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice);
}

/* -- kit: what we operate, icon columns divided by hairlines -- */
.kit { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-l); }
@media (min-width: 700px) { .kit { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) {
  .kit { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .kit > li { padding: 0 var(--space-l); border-left: 1px solid var(--rule); }
  .kit > li:first-child { padding-left: 0; border-left: 0; }
}
.kit__icon { display: block; width: 48px; height: 48px; color: var(--steel-deep); margin-bottom: var(--space-m); }
.kit h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.kit p { color: var(--muted); }
.kit__note { margin-top: var(--space-xl); color: var(--muted); }

/* -- facts: definition list with hairlines -- */
.facts { display: grid; gap: var(--space-l); margin: 0; }
.facts > div { border-top: 1px solid var(--ice); padding-top: var(--space-s); }
.facts dt { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-deep); margin-bottom: var(--space-xs); }
.facts dd { margin: 0 0 var(--space-xs); color: var(--body); }

/* -- CTA band: the closing statement -- */
.cta-band {
  background:
    radial-gradient(60rem 30rem at 85% 120%, rgba(82, 119, 164, 0.35), rgba(1, 16, 38, 0) 70%),
    var(--ink);
  padding-block: var(--space-3xl);
}
.cta-band h2 { font-size: var(--step-5); letter-spacing: -0.03em; }
.cta-band p { font-size: var(--step-1); }

/* -- page stage: the vertical pages' opening, a little shorter than home -- */
.stage--page { min-height: min(86svh, 52rem); }
.stage--page .display { font-size: clamp(2.4rem, 1.35rem + 3.3vw, 4.25rem); max-width: 15ch; }
.stage .eyebrow--rule::before { background: var(--accent); height: 2px; }
.has-stage.v-hotels .stage .eyebrow--rule::before, .p-home .stage .eyebrow--rule::before { background: currentColor; height: 1px; }

/* Illustrated stage (ATM): copy and drawing side by side, nothing laid over
   the drawing. Same ink ground as the photographic stages. */
.stage--illus {
  background: radial-gradient(50rem 30rem at 80% 55%, rgba(82, 119, 164, 0.28), rgba(1, 16, 38, 0) 70%), var(--ink);
  min-height: 0;
}
.stage__split { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 960px) { .stage__split { grid-template-columns: 0.95fr 1.05fr; } }
@media (max-width: 759px) { .stage--illus .stage__inner { padding-top: var(--space-2xl); } }

/* -- illustrations (inline SVG from imagery.json) -- */
.illus { margin: 0; }
.illus svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.stage__illus svg, .hero__illus svg { border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }

/* -- photo frames in content: natural aspect, soft corners -- */
.frame { margin: 0; display: block; }
.frame img { width: 100%; height: auto; border-radius: 10px; }

/* -- compact page heroes (about, contact, service, articles, legal) on ink -- */
.hero {
  background: radial-gradient(60rem 26rem at 90% 0%, rgba(82, 119, 164, 0.3), rgba(1, 16, 38, 0) 70%), var(--ink);
  color: rgba(218, 237, 250, 0.86);
  border-bottom: 0;
  padding-block: var(--space-3xl) var(--space-2xl);
}
.hero::before { display: none; }
.hero h1 { color: #fff; font-size: var(--step-5); letter-spacing: -0.03em; line-height: 1.04; }
.hero .eyebrow { color: var(--ice); display: flex; align-items: center; gap: 0.75rem; letter-spacing: 0.16em; }
.hero .eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; }
.hero .lede { color: rgba(255, 255, 255, 0.86); }
.hero a:not(.btn):not(.tag) { color: var(--ice); }
.hero .article-meta { color: var(--ice); }
.hero :focus-visible { outline-color: var(--ice); }
.hero--illus .hero__inner { align-items: center; }
@media (max-width: 759px) { .hero { padding-block: var(--space-2xl) var(--space-xl); } }

/* -- cards: flatter, hairline, no lift -- */
.card { border-radius: 10px; }
a.card:hover, a.card:focus-within { transform: none; box-shadow: none; }

/* -- reliability on ink (vertical pages) -- */
.section--ink .ticks li::before { border-color: var(--ice); }
.section--ink .ticks strong { color: #fff; }

/* -- restrained entrance motion (nav.js adds .can-reveal; off for Reduce Motion) -- */
.can-reveal .rv { opacity: 0; transform: translateY(10px); transition: opacity 520ms ease, transform 520ms cubic-bezier(.2, .7, .2, 1); }
.can-reveal .rv.is-in { opacity: 1; transform: none; }

/* §20  REDUCED MOTION
   ------------------------------------------------------------------------ */
@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;
    scroll-behavior: auto !important;
  }
  .btn:hover, a.card:hover { transform: none; }
  .can-reveal .rv { opacity: 1; transform: none; }
}

/* §21  PRINT
   ------------------------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .cta-band, .nav, .anchor-nav { display: none !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .placeholder { border: 1px solid #000; }
}