/* ══════════════════════════════════════════════════════════════════════════
   The Reversal — site stylesheet
   Design system: "Modernist" (Claude Design project 228da448-1422-4e1e-8864-
   d56b857fe779), retoned from its stock red to the brand greens. Tokens are
   the source of truth: retune the ramps here and the whole site follows.
   Order: tokens → base → components → page blocks → responsive.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — ground — */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --ink: #201e1d;
  --deep: #0f4020;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-divider-invert: rgb(255 255 255 / 30%);

  /* — accents — */
  --color-accent: #1e7a3b;
  --color-accent-2: #1b5aa8;

  /* Tonal ramps on one shared lightness scale, so the same step of any
     role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #eaf4ec;
  --color-accent-200: #cfe6d5;
  --color-accent-300: #a8d2b3;
  --color-accent-400: #6fb883;
  --color-accent-500: #2f9450;
  --color-accent-600: #1a6b34;
  --color-accent-700: #135527;
  --color-accent-800: #0f4020;
  --color-accent-900: #0c301a;

  --color-accent-2-100: #e9f0f9;
  --color-accent-2-200: #cfdff2;
  --color-accent-2-300: #a9c8e8;
  --color-accent-2-400: #6f9fd4;
  --color-accent-2-500: #2f74c4;
  --color-accent-2-600: #1b5aa8;
  --color-accent-2-700: #164a8a;
  --color-accent-2-800: #123a66;
  --color-accent-2-900: #0e2b4a;

  /* — type — */
  --font-heading: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* — space — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Square corners are load-bearing in this system — keep them at 0. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* ── base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
/* height:auto is load-bearing: width/height attributes land as presentational
   hints, so without it max-width shrinks the width while the height stays
   pinned at the attribute value and the image stretches. Keeping the attributes
   *and* height:auto is what lets the browser reserve the right box before the
   image loads. Rules that size an image deliberately (.shot > img,
   .portrait img) are more specific and still win. */
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
[id] { scroll-margin-top: 88px; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.skip-link {
  position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-160%);
  padding: 10px 16px; background: var(--color-accent); color: #fff;
  font-weight: var(--font-heading-weight); text-decoration: none;
}
.skip-link:focus { transform: none; color: #fff; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── components ─────────────────────────────────────────────────────────── */

.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); color: #fff; }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-lg { font-size: 15px; padding: 14px 22px; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }
/* On the deep-green ground the secondary button needs an inverted edge. */
.on-deep .btn-secondary { border-color: var(--color-divider-invert); color: #fff; }
.on-deep .btn-secondary:hover { background: rgb(255 255 255 / 12%); color: #fff; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio, .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .check input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider); background: var(--color-bg);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot,
.check input:focus-visible + .box { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.check { align-items: flex-start; gap: 10px; }
.check .box {
  width: 16px; height: 16px; flex: none; margin-top: 3px;
  border: 1.5px solid var(--color-divider); background: var(--color-bg);
}
.check:hover .box { border-color: var(--color-accent); }
.check input:checked + .box {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-bg), inset 0 0 0 6px var(--color-accent);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-200); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table .num { text-align: right; }
.table-scroll { overflow-x: auto; }

/* ── layout primitives ──────────────────────────────────────────────────── */

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.sect { border-top: 2px solid var(--color-divider); padding: 64px 0; }
.sect-flush { border-top: 0; }
.sect-tint { background: var(--color-accent-100); }
.sect-deep { background: var(--deep); color: #fff; border-top: 0; }
.sect-deep a { color: #fff; }
.sect-deep .lbl { color: var(--color-accent-300); }

.lbl {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 20px;
}
.h2 { font-size: 38px; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 14px; }
.h3 { font-size: 26px; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 10px; }
.lede {
  font-size: 17px; line-height: 1.6; max-width: 58ch;
  color: color-mix(in srgb, var(--ink) 78%, transparent); margin: 0;
}
.sect-deep .lede { color: rgb(255 255 255 / 80%); }
.prose { max-width: 66ch; }
.prose p { font-size: 15px; line-height: 1.7; opacity: 0.85; }
.note { font-size: 12px; opacity: 0.6; margin-top: 12px; }
.stack { display: grid; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; }
.row-mt { margin-top: 28px; }

/* The hairline grid the whole system leans on: an outer left edge plus a
   right/bottom edge per cell, so cells tile into a continuous rule. */
.cellgrid { display: grid; gap: 0; border-left: 1px solid var(--color-divider); border-top: 1px solid var(--color-divider); }
.cell { border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); padding: 24px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-mt { margin-top: 36px; }
.cell-stack { display: flex; flex-direction: column; gap: 10px; }
.cell-accent { background: var(--color-accent-100); display: flex; flex-direction: column; justify-content: flex-end; }
.cell-accent p { font-size: 14px; margin: 0 0 12px; color: var(--color-accent-800); }
.cell h4 { margin: 12px 0 6px; }
.cell p { font-size: 13px; opacity: 0.8; margin: 0; }
.cell-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 44px; color: var(--color-accent-300); line-height: 1;
}
.cell-price { font-size: 13px; font-weight: 600; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.split-wide-left { grid-template-columns: 1.2fr 1fr; }
.split-wide-right { grid-template-columns: 1fr 1.2fr; }

/* ── site chrome ────────────────────────────────────────────────────────── */

.topbar { position: sticky; top: 0; z-index: 30; background: var(--color-bg); }
.nav {
  display: flex; align-items: center; gap: 22px;
  padding: var(--space-3) 0;
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  display: flex; align-items: baseline; gap: 8px; margin-right: auto;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; letter-spacing: -0.02em; color: var(--color-text); text-decoration: none;
}
.nav-brand:hover { color: var(--color-text); }
.nav-brand .dot { color: var(--color-accent); }
.nav-brand .by {
  font-family: var(--font-body); font-weight: 400; font-size: 12px;
  letter-spacing: 0.1em; opacity: 0.6;
}
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: inherit; text-decoration: none; font-size: 14px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-accent); }
.nav-links a[aria-current="page"] { font-weight: 600; }
.nav-toggle {
  display: none; align-items: center; gap: 8px; border: 1px solid var(--color-divider);
  background: transparent; cursor: pointer; padding: 7px 12px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px;
  color: var(--color-text);
}

/* ── page blocks ────────────────────────────────────────────────────────── */

/* hero — the split between the pitch and the three hard facts */
.hero { border-top: 2px solid var(--color-divider); }
/* Sub-pages sit directly under the nav's own 2px rule, so they drop theirs. */
.hero-flush { border-top: 0; }
.hero-title-sm { font-size: 46px; max-width: 22ch; }
.hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; }
.hero-main { padding: 56px 40px 56px 0; border-right: 2px solid var(--color-divider); }
.hero-title {
  font-size: 56px; line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 20px; max-width: 20ch;
}
.hero-facts { display: flex; flex-direction: column; }
.fact { padding: 28px 0 28px 40px; border-bottom: 1px solid var(--color-divider); }
.fact:last-child { border-bottom: 0; padding-bottom: 0; }
.fact-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 34px; letter-spacing: -0.02em;
}
.fact-cap { font-size: 13px; opacity: 0.7; }

/* pillar band */
.band { background: var(--deep); color: #fff; }
.band-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.band-item { padding: 26px 28px; border-left: 1px solid var(--color-divider-invert); }
.band-item:first-child { padding-left: 0; border-left: 0; }
.band-item:last-child { padding-right: 0; }
.band-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; letter-spacing: 0.02em;
}
.band-sub { font-size: 13px; opacity: 0.8; margin-top: 4px; }

/* people */
.person { display: flex; gap: 18px; align-items: flex-start; }
.person-photo { width: 96px; height: 120px; flex: none; }
.person h4 { margin: 0 0 4px; }
.person-role { font-size: 12px; color: var(--color-accent-700); margin-bottom: 8px; }

/* The header artwork is 2.4:1. Shown whole on a phone it is ~156px tall and the
   wordmark stops being readable, so below 860px it is cropped to 16:9 anchored
   on the brand lockup — the facility labels it loses are stated as real text in
   the Facilities section anyway. */
.site-art { width: 100%; }
@media (max-width: 860px) {
  .site-art { aspect-ratio: 16 / 9; object-fit: cover; object-position: left center; }
}

/* founders — a passport-size portrait beside the name, then the prose.
   Fixed 180×180 at every breakpoint: both founders print identically and the
   photo never grows with the column. For a true passport crop (35×45mm)
   change height to 232px and object-position to `center 12%`. */
.founder-head { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 28px; }
.portrait {
  position: relative; width: 180px; height: 180px; flex: none; overflow: hidden;
  background: var(--color-accent-100); border: 1px solid var(--color-divider);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.creds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.creds li { position: relative; padding-left: 18px; opacity: 0.85; }
.creds li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 1px; background: var(--color-accent);
}
.pullquote {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 24px; line-height: 1.35; margin: 0;
  padding-left: 20px; border-left: 2px solid var(--color-accent);
}
.pullquote cite {
  display: block; margin-top: 10px; font-family: var(--font-body);
  font-size: 12px; font-style: normal; opacity: 0.65;
}
.name-role { font-size: 13px; color: var(--color-accent-700); margin: 0 0 18px; }
.founder-mail { margin: 16px 0 0; font-size: 13px; }
.founder-mail a { text-decoration: none; border-bottom: 1px solid var(--color-accent-300); }
.founder-mail a:hover { border-bottom-color: var(--color-accent); }

/* photo slots — drop a real <img> inside and it covers the placeholder */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 32px; }
.shot {
  position: relative; aspect-ratio: 4 / 3; min-width: 0; overflow: hidden;
  display: grid; place-items: center; padding: 16px; text-align: center;
  background: var(--color-accent-100); border: 1px solid var(--color-divider);
}
.shot > span {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot-tall { aspect-ratio: 3 / 4; }
.shot-wide { aspect-ratio: 16 / 9; }

/* quotes */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 24px; border-top: 1px solid var(--color-divider-invert); }
.quote { padding: 32px; border-right: 1px solid var(--color-divider-invert); }
.quote:first-child { padding-left: 0; }
.quote:last-child { padding-right: 0; border-right: 0; }
.quote p {
  font-size: 20px; line-height: 1.4; font-family: var(--font-heading);
  font-weight: 400; margin: 0 0 16px;
}
.quote-by { font-size: 12px; opacity: 0.7; }

/* definition rows — "how to reach", "good to know" */
.deflist { display: grid; gap: 0; border-top: 1px solid var(--color-divider); margin-top: 28px; }
.defrow {
  display: grid; grid-template-columns: 170px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--color-divider);
}
.defrow dt, .def-key {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6;
}
.defrow dd, .def-val { font-size: 14px; margin: 0; }

/* FAQ — bordered two-column grid on wide screens */
.faqgrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  margin-top: 24px; border-top: 1px solid var(--color-divider);
}
.faqgrid > div {
  padding: 24px 40px 24px 0; border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.faqgrid > div:nth-child(even) { padding: 24px 0 24px 40px; border-right: 0; }
.faqgrid > div:nth-last-child(-n+2) { border-bottom: 0; }
.faqgrid h4 { margin: 0 0 8px; }
.faqgrid p { font-size: 14px; opacity: 0.8; margin: 0; }

/* footer */
.footer { background: var(--deep); color: #fff; padding: 56px 0 28px; }
.footer a { color: #fff; }
.footer-claim {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; max-width: 24ch;
}
.footer-rule { height: 2px; background: rgb(255 255 255 / 35%); margin: 36px 0 24px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; font-size: 13px; }
.footer-cols h5 { font-weight: 600; margin: 0 0 6px; font-size: 13px; letter-spacing: 0; }
.footer-cols p, .footer-cols ul { opacity: 0.75; margin: 0; }
.footer-cols ul { list-style: none; padding: 0; display: grid; gap: 4px; }
/* Bottom social bar — a tinted band between the page and the footer, carrying
   each platform's own mark in its own colour. Instagram is the official
   gradient glyph as a raster (a gradient cannot be recoloured from currentColor);
   Facebook and YouTube are their official shapes in brand blue and red, drawn
   over a white plate so the knocked-out letterform reads white, not tinted. */
.socialbar { border-top: 2px solid var(--color-divider); background: var(--color-accent-100); }
.socialbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; padding-block: 20px;
}
.socialbar-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.socialbar-icons { display: flex; align-items: center; gap: 16px; }
.socialbar-icons a, .socialbar-icons span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; line-height: 0; border-radius: 2px;
}
.socialbar-icons a:hover { opacity: 0.78; }
.socialbar-icons a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.socialbar-icons svg, .socialbar-icons img { display: block; }
/* Optically sized, not box-sized. Instagram is the reference: its glyph is an
   outline with a light interior, while Facebook's blue disc and YouTube's red
   block are solid, so at equal size those two read noticeably heavier. Both are
   pulled back until the three carry the same weight. Re-check all three
   together if you change one. */
.i-ig { width: 26px; height: 26px; }
.i-fb { width: 23px; height: 23px; }
.i-yt { width: 27px; height: 27px; }
@media (max-width: 560px) {
  .socialbar .wrap { justify-content: center; text-align: center; }
}

/* Unfilled business terms on the legal pages. Deliberately loud: these are
   contractual numbers only the business can set, and nothing should go live
   with one still showing. */
.todo {
  background: #fff3cd; color: #6b4f00; border-bottom: 1px solid #d9a400;
  padding: 0 4px; font-weight: 600; font-size: 0.95em;
}
.legal-note {
  border-left: 3px solid var(--color-accent); background: var(--color-accent-100);
  padding: 16px 20px; margin: 0 0 32px; font-size: 14px;
}
.legal-note p { margin: 0; }
.legal h3 { font-size: 20px; margin: 32px 0 8px; }
.legal h3:first-of-type { margin-top: 0; }
.legal p, .legal li { font-size: 15px; line-height: 1.7; opacity: 0.9; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px; }

.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--color-divider-invert);
  font-size: 12px; opacity: 0.7;
}

/* ── responsive ─────────────────────────────────────────────────────────── */

/* Nine nav links + the CTA stop fitting below this, so collapse to the burger. */
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-divider);
    box-shadow: var(--shadow-md);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 14px 32px; border-top: 1px solid var(--color-divider); }
  .nav-links .btn { margin: 14px 32px 18px; justify-content: center; }
  .nav { position: relative; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .h2 { font-size: 28px; }
  .sect { padding: 40px 0; }
  .wrap { padding: 0 20px; }
  .hero-grid, .split, .split-wide-left, .split-wide-right { grid-template-columns: 1fr; gap: 0; }
  .hero-main { padding: 36px 0 28px; border-right: 0; border-bottom: 2px solid var(--color-divider); }
  .hero-title { font-size: 38px; }
  .split { gap: 36px; }
  .fact { padding-left: 0; }
  .fact:last-child { padding-bottom: 28px; }
  .band-grid, .quotes { grid-template-columns: 1fr; }
  .band-item, .quote { padding: 20px 0; border-left: 0; border-right: 0; border-top: 1px solid var(--color-divider-invert); }
  .band-item:first-child, .quote:first-child { border-top: 0; }
  .cols-3, .cols-4, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faqgrid { grid-template-columns: 1fr; }
  .faqgrid > div, .faqgrid > div:nth-child(even) {
    padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--color-divider);
  }
  .faqgrid > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-divider); }
  .faqgrid > div:last-child { border-bottom: 0; }
  .footer-claim { font-size: 30px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .defrow { grid-template-columns: 1fr; gap: 4px; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .cols-2, .cols-3, .cols-4, .gallery, .footer-cols { grid-template-columns: 1fr; }
  .hero-title { font-size: 32px; }
  .person { flex-direction: column; gap: 12px; }
  .founder-head { flex-direction: column; gap: 18px; }
  /* .portrait keeps its fixed 180×180 here — it is a passport photo, not a banner. */
}

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

@media print {
  .topbar, .skip-link, .btn { display: none !important; }
  body { background: #fff; }
  .sect { break-inside: avoid; }
}