/* ==========================================================================
   SpiralGuard v2. Skeleton: plumfix-bold-trade-poster (structure only, retokenised).
   Black, red and white only: zero-hue inks and greys, one hot red, a text-safe red.
   One condensed display face (Anton) over a quiet grotesque (Archivo).
   ========================================================================== */
:root {
  /* Colour: zero hue only, plus the two reds */
  --ink: #141414;
  --ink-deep: #0d0d0d;
  --paper: #ffffff;
  --mist: #efefef;
  --red: #f3182e;          /* display accents, rules, rings (3:1 large only) */
  --red-text: #c8101f;     /* filled buttons, small red text (5.9:1 with white) */
  --red-press: color-mix(in srgb, var(--red-text) 82%, #000);
  --text: var(--ink);
  --text-muted: #555555;   /* 7.5:1 on white, 6.6:1 on mist */
  --text-inverse: #ffffff;
  --text-inverse-muted: #bdbdbd; /* 10:1 on ink */
  --line: #d6d6d6;
  --line-strong: var(--ink);
  --line-inverse: #3a3a3a;
  --ghost: #262626;        /* the wordmark on ink: keeps the red accent over it above 3:1 */

  /* Type: one value per role */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-ghost: min(47cqi, 43rem);
  --fs-h1: clamp(3.25rem, 1.6rem + 4vw, 5.5rem);
  --fs-h2: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem);
  --fs-index: clamp(2rem, 1.2rem + 2.6vw, 3.75rem); /* always a step below --fs-h2, so the section title leads */
  --fs-sheet: clamp(2rem, 1.2rem + 3.8vw, 4.75rem);
  --fs-price: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --fs-stat: clamp(2.75rem, 2rem + 2.4vw, 4.25rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --lh-display: 0.94;
  --lh-body: 1.6;

  /* Space */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 2.5rem; --s8: 3rem; --s9: 4rem; --s10: 6rem;
  --band-pad: 56px;      /* the coloured-edge band floor: 56 / 64 / 80 (QUALITY-STANDARDS) */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 4rem);
  --container: 1440px;
  --header-h: 72px;
  --sticky-top: calc(var(--header-h) + var(--s7));

  /* Shape: controls 4, panels 2, photos and sheets square (poster register) */
  --radius: 4px;
  --radius-panel: 2px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --speed: 200ms;
  --speed-reveal: 650ms;

  color-scheme: light;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s4));
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: 0.005em;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.accent { color: var(--red); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-muted); max-width: 40ch; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 2000;
  background: var(--paper); color: var(--ink); font-weight: 600;
  padding: var(--s3) var(--s4); border-radius: var(--radius);
}
.skip-link:focus { top: var(--s4); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Bands: the value strip runs ink, paper, ink, mist, ink, paper, footer ink */
.band { padding-block: var(--band-pad); }
@media (min-width: 768px) { :root { --band-pad: 64px; } }
@media (min-width: 1100px) { :root { --band-pad: 80px; } }
.band--paper { background: var(--paper); }
.band--mist { background: var(--mist); }
.band--ink { background: var(--ink); color: var(--text-inverse); }
.band--ink .lead { color: var(--text-inverse-muted); }
.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  margin-bottom: var(--s9);
}
@media (min-width: 960px) {
  .band-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--s8); }
  .band-head .lead { justify-self: end; }
}

/* ==========================================================================
   REVEAL (hidden only once script.js has run; see the swap at its end)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--speed-reveal) var(--ease), transform var(--speed-reveal) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.js-swap .reveal { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity 1ms; }
}

/* ==========================================================================
   BUTTON: one shape, one hover
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 0 var(--s6);
  border: 0; border-radius: var(--radius);
  font: 600 var(--fs-body)/1 var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--speed) var(--ease);
}
.btn--red { background: var(--red-text); color: var(--text-inverse); }
.btn--red:hover { background: var(--red-press); }
.btn--red:active { background: var(--red-press); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.7; cursor: progress; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  color: var(--text-inverse);
  border-bottom: 1px solid transparent;
  transition: border-color var(--speed) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line-inverse); }
.header-bar {
  display: flex; align-items: center; gap: var(--s6);
  min-height: var(--header-h);
}
.logo { display: block; flex: none; padding-block: var(--s2); }
.logo img { height: 48px; width: auto; }
.nav-links { display: flex; gap: var(--s4); margin-left: auto; }
.nav-links a {
  font-weight: 500; font-size: var(--fs-sm); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding-inline: var(--s2);
  white-space: nowrap;
  background: linear-gradient(var(--red), var(--red)) center bottom 8px / 0 2px no-repeat;
  transition: background-size var(--speed) var(--ease);
}
.nav-links a:hover { background-size: calc(100% - var(--s4)) 2px; }
.header-cta { min-height: 44px; padding-inline: var(--s5); font-size: var(--fs-sm); }
.nav-toggle {
  display: none;
  width: 44px; height: 44px; margin-right: calc(var(--s2) * -1);
  border: 0; border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer;
  place-content: center; gap: 6px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease); }

.header-bar.is-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header-bar.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.header-bar.is-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 899px) {
  :root { --header-h: 64px; }
  .logo img { height: 40px; }
  .header-bar { gap: var(--s3); }
  .header-cta { margin-left: auto; padding-inline: var(--s4); }
  .js .nav-toggle { display: grid; }
  .js .nav-links {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; gap: 0; margin: 0;
    padding: var(--s4) var(--gutter) var(--s6);
    background: var(--ink); border-bottom: 1px solid var(--line-inverse);
    display: none;
  }
  .js .header-bar.is-open .nav-links { display: flex; }
  .js .nav-links a {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: 2.25rem; line-height: 1.1; padding: var(--s3) 0;
    justify-content: flex-start;
    border-top: 1px solid var(--line-inverse); background: none;
  }
  .js .nav-links a:hover { color: var(--red); }
  /* No JS: the links wrap onto a second row instead of hiding behind a dead button */
  .no-js .header-bar { flex-wrap: wrap; }
  .no-js .nav-links { order: 3; width: 100%; margin: 0; gap: var(--s5); padding-bottom: var(--s3); }
}
@media (max-width: 379px) {
  .header-cta { padding-inline: var(--s3); }
}

/* ==========================================================================
   HERO: ghost wordmark behind the photo plate
   ========================================================================== */
.hero {
  position: relative;
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink);
  color: var(--text-inverse);
  overflow: clip;
  padding-top: 27cqi;
  padding-bottom: var(--s8);
}
/* The word fills the content width at every size: Anton's HELIX is 1.9 em wide */
.hero-ghost {
  position: absolute; inset: 1.5cqi 0 auto 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-ghost);
  line-height: 0.8;
  color: var(--ghost);
  text-align: center;
  user-select: none;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s8);
}
.hero h1 { font-size: var(--fs-h1); max-width: 17ch; }
.hero-lead { margin-top: var(--s5); font-size: var(--fs-lead); line-height: 1.55; color: var(--text-inverse-muted); max-width: 44ch; text-wrap: pretty; }
.hero-copy .hero-link { margin-top: var(--s6); }
.hero-plate { position: relative; }
.hero-plate img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 52% 55%;
}
.proof {
  position: absolute; right: var(--s4); bottom: calc(var(--s6) * -1);
  width: min(18.5rem, 80%);
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-panel);
  padding: var(--s4) var(--s5) var(--s5);
  border-top: 4px solid var(--red);
}
.proof-row { display: grid; grid-template-columns: 4rem 1fr; align-items: baseline; gap: var(--s3); }
.proof-row + .proof-row { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.proof dt { font-size: var(--fs-sm); color: var(--text-muted); }
.proof dd { font-weight: 600; }
.proof-figure { font-family: var(--font-display); font-weight: 400; font-size: 3.25rem; line-height: 1; margin-right: var(--s1); }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: settle var(--speed-reveal) var(--ease) both; }
  .hero-copy > .hero-lead { animation-delay: 80ms; }
  .hero-copy > .btn { animation-delay: 160ms; }
  .proof { animation: settle var(--speed-reveal) var(--ease) 240ms both; }
}
@keyframes settle { from { transform: translateY(14px); } }

@media (max-width: 959px) {
  .hero { padding-bottom: var(--s10); }
  .hero-plate img { aspect-ratio: 1 / 1; object-position: 58% 50%; }
  .proof { bottom: calc(var(--s9) * -1); }
}
@media (min-width: 600px) and (max-width: 959px) {
  .hero-plate img { aspect-ratio: 16 / 10; }
}
@media (min-width: 960px) {
  .hero { min-height: calc(100svh - var(--header-h)); padding-top: 20cqi; }
  .hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }
  .hero-plate img { aspect-ratio: 5 / 4; }
  .proof { right: auto; left: calc(var(--s8) * -1); bottom: var(--s6); }
}

/* ==========================================================================
   ABOUT: statement + photo + three numerals
   ========================================================================== */
.statement { font-size: var(--fs-h2); max-width: 20ch; }
.about-grid {
  display: grid;
  gap: var(--s7);
  margin-top: var(--s8);
}
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-copy { display: grid; align-content: space-between; gap: var(--s7); }
.about-copy .lead { color: var(--text); }
.stats { display: grid; }
.stat { padding-block: var(--s5); border-top: 1px solid var(--line-strong); display: grid; gap: var(--s2); }
.stat:last-child { padding-bottom: 0; }
.stat-figure { font-family: var(--font-display); font-size: var(--fs-stat); line-height: 1; text-transform: none; }
.stat dd { color: var(--text-muted); }
@media (min-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s9); margin-top: var(--s9); }
  .about-photo img { height: 100%; aspect-ratio: auto; min-height: 26rem; }
  .statement { max-width: 22ch; }
}

/* ==========================================================================
   APPLICATIONS: the big-type index
   ========================================================================== */
.index { border-bottom: 1px solid var(--line-inverse); }
.index-row { position: relative; border-top: 1px solid var(--line-inverse); transition: border-color var(--speed) var(--ease); }
/* The open row is marked by a red rule and a red minus; the name stays white so the title keeps the red */
.index-row[open] { border-top-color: var(--red); }
.index-row summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding-block: var(--s5);
  cursor: pointer; list-style: none;
}
.index-row summary::-webkit-details-marker { display: none; }
.index-name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--fs-index); line-height: 1;
  transition: color var(--speed) var(--ease);
}
@media (hover: hover) { .index-row summary:hover .index-name { color: var(--red); } }
.index-row summary:focus-visible { outline-offset: -3px; }

/* The open-and-close mark: a plus that folds into a minus, drawn in CSS */
.index-mark {
  position: relative; flex: none;
  width: 2rem; height: 2rem;
}
.index-mark::before, .index-mark::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 100%; height: 3px; background: currentColor;
  transition: transform var(--speed) var(--ease);
}
.index-mark::after { transform: rotate(90deg); }
details[open] > summary .index-mark::after { transform: rotate(0deg); }
.index-row[open] .index-mark { color: var(--red); }

.index-body {
  display: grid; justify-items: start; gap: var(--s5);
  padding-bottom: var(--s6);
}
.index-body p { color: var(--text-inverse); font-size: var(--fs-lead); line-height: 1.55; max-width: 48ch; }
.line-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; text-decoration: none;
  border-bottom: 3px solid var(--red);
  transition: color var(--speed) var(--ease);
}
@media (hover: hover) { .line-link:hover { color: var(--red); } }

/* Desktop: the open row becomes two columns, name left and its text right on the same line,
   so nothing floats in an empty half. Browsers without ::details-content keep the stacked form. */
@media (min-width: 960px) {
  .index-row summary { padding-block: var(--s6); }
  .index-mark { width: 2.5rem; height: 2.5rem; }
  @supports selector(::details-content) {
    .index-row[open] {
      display: grid;
      grid-template-columns: minmax(max-content, 5fr) minmax(0, 7fr);
      column-gap: var(--s8);
      align-items: start;
    }
    .index-row[open]::details-content { display: contents; }
    .index-row[open] summary { justify-content: flex-start; }
    /* The minus keeps the row's right edge, where the plus sat while closed */
    .index-row[open] .index-mark { position: absolute; right: 0; top: var(--s6); margin-top: calc((var(--fs-index) - 2.5rem) / 2); }
    .index-row[open] .index-body { padding-block: var(--s6) var(--s6); padding-right: calc(2.5rem + var(--s6)); }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .index-row[open] .index-body { animation: body-in 360ms var(--ease) both; }
}
@keyframes body-in { from { opacity: 0; transform: translateY(-8px); } }

/* ==========================================================================
   WHY: sticky title + sticky sheet stack (no JS)
   ========================================================================== */
.why-grid { display: grid; gap: var(--s8); }
.why-head .lead { margin-top: var(--s5); }
/* --step is one sheet's title row: padding-top, the title, a little air. Each sheet pins one
   step lower than the one before, so every earlier title stays whole above the sheet on top.
   The bottom margins make all four release together at the end, so the stack never folds. */
.sheets {
  container-type: inline-size;
  display: grid;
  gap: var(--s9);
}
/* A spacer after the last sheet: the full stack holds on screen for a while before it leaves */
.sheets::after { content: ""; height: var(--dwell, 22vh); margin-top: calc(var(--s9) * -1); }
/* Every sheet is the same height (one value per breakpoint), so the bottom margins
   release all four at the same moment and the stack holds its shape as it leaves. */
.sheet {
  /* The title size fits the longest title ("Sun and temperature", 8.7em of Anton) on one line */
  --pad: var(--s6);
  --title: min(var(--fs-sheet), calc((100cqi - var(--pad) * 2) / 8.9));
  --step: calc(var(--title) * 0.94 + var(--s5) + var(--s4));
  position: sticky;
  top: calc(var(--sticky-top) + var(--i) * var(--step));
  margin-bottom: calc((3 - var(--i)) * var(--step));
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s5);
  height: var(--sheet-h, 16rem);
  padding: var(--s5) var(--pad) var(--pad);
  background: var(--paper);
  border-top: 4px solid var(--red);
  overflow: hidden;
}
.sheet h3 { font-size: var(--title); white-space: nowrap; }
.sheet p { align-self: end; font-size: var(--fs-lead); line-height: 1.5; max-width: 32ch; }
.sheet--ink { background: var(--ink); color: var(--text-inverse); border-color: var(--ink); border-top-color: var(--red); }
.sheet--ink p { color: var(--text-inverse-muted); }
/* The photo sheet: the tractor fills it under a flat 62% black veil (no gradient),
   which keeps white body text above 4.5:1 over the brightest part of the sky */
.sheet--photo { color: var(--text-inverse); border-color: var(--ink); border-top-color: var(--red); background: var(--ink); }
.sheet--photo img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
}
.sheet--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, #000 62%, transparent); }
@media (min-width: 960px) {
  .why-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s9); align-items: start; }
  .why-head { position: sticky; top: var(--sticky-top); }
  .sheets { gap: 14vh; --sheet-h: 17rem; --dwell: 8vh; }
  .sheet { --pad: var(--s7); }
}
@media (min-width: 960px) and (max-height: 820px) {
  .sheets { --sheet-h: 15rem; }
}
@media (max-width: 959px) {
  .sheet { top: calc(var(--header-h) + var(--s4) + var(--i) * var(--step)); }
  .sheets { gap: 10vh; --sheet-h: 12.5rem; }
}

/* ==========================================================================
   PRODUCTS: the spec sheet (three columns sharing their rules, not three cards)
   ========================================================================== */
.spec {
  display: grid;
  border-top: 4px solid var(--red);
}
.spec-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
  padding-block: var(--s7);
  border-bottom: 1px solid var(--line-inverse);
}
.spec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.spec-size { width: 7rem; height: 7rem; }
.spec-ref { fill: none; stroke: var(--line-inverse); stroke-width: 1; stroke-dasharray: 2 3; }
.spec-ring { fill: none; stroke: var(--red); stroke-width: 4; }
.spec-flag { font-weight: 600; font-size: var(--fs-sm); color: var(--text-inverse); border-bottom: 3px solid var(--red); padding-bottom: var(--s1); }
.spec-col h3 { margin-top: var(--s6); }
.spec-code { margin-top: var(--s2); color: var(--text-inverse-muted); font-size: var(--fs-sm); }
.spec-price {
  margin-top: var(--s5);
  font-family: var(--font-display); font-size: var(--fs-price); line-height: 0.9;
}
.spec-price span { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; color: var(--text-inverse-muted); margin-left: var(--s2); }
.spec-bulk { margin-top: var(--s6); align-self: start; }
.spec-bulk div {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding-block: var(--s3);
  border-top: 1px solid var(--line-inverse);
}
.spec-bulk dt { color: var(--text-inverse-muted); }
.spec-bulk dd { font-weight: 600; }
.spec-btn { margin-top: var(--s6); align-self: end; justify-self: start; }
@media (max-width: 899px) {
  .spec-col { grid-template-rows: none; grid-row: auto; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); }
  .spec-top { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; }
  .spec-size { width: 5.5rem; height: 5.5rem; }
  .spec-col h3 { grid-column: 1; margin-top: 0; }
  .spec-code, .spec-price { grid-column: 1; }
  .spec-bulk, .spec-btn { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line-inverse); }
  .spec-col { padding: var(--s7) var(--s7) var(--s7); border-bottom: 0; }
  .spec-col:first-child { padding-left: 0; }
  .spec-col:last-child { padding-right: 0; }
  .spec-col + .spec-col { border-left: 1px solid var(--line-inverse); }
}

/* ==========================================================================
   FAQ: title block left, questions right
   ========================================================================== */
.faq-grid { display: grid; gap: var(--s8); }
.faq-head .lead { margin-top: var(--s5); }
.faq-head .lead a { color: var(--text); font-weight: 600; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.faq-list { border-bottom: 1px solid var(--line-strong); }
.faq-q { border-top: 1px solid var(--line-strong); }
.faq-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  min-height: 44px; padding-block: var(--s5);
  font-weight: 600; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.3;
  cursor: pointer; list-style: none;
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary .index-mark { width: 1.25rem; height: 1.25rem; }
.faq-q summary .index-mark::before, .faq-q summary .index-mark::after { height: 2px; }
.faq-q[open] summary .index-mark { color: var(--red-text); }
.faq-q p { padding-bottom: var(--s5); color: var(--text-muted); max-width: 60ch; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s9); align-items: start; }
  .faq-head { position: sticky; top: var(--sticky-top); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ink-deep); color: var(--text-inverse); padding-top: var(--band-pad); }
.footer-grid { display: grid; gap: var(--s8); }
.footer-brand .logo img { height: 64px; }
.footer-brand p { margin-top: var(--s5); color: var(--text-inverse-muted); max-width: 34ch; font-size: var(--fs-sm); }
.footer-col h2 { font-size: 1.75rem; letter-spacing: 0.02em; margin-bottom: var(--s4); }
.footer-col li { color: var(--text-inverse-muted); }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--text-inverse); text-decoration: none; }
.footer-col a:hover { color: var(--red); }
.footer-col li:not(:has(a)) { padding-block: var(--s3); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s6);
  margin-top: var(--s9); padding-block: var(--s6);
  border-top: 1px solid var(--line-inverse);
  color: var(--text-inverse-muted); font-size: var(--fs-sm);
}
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; }
.footer-col:last-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-col:last-child { grid-column: auto; }
}
@media (min-width: 1100px) {
  .footer-grid { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.4fr)); }
  .footer-brand { grid-column: auto; }
}

/* ==========================================================================
   QUOTE MODAL
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: var(--s4);
  background: color-mix(in srgb, #000 70%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
/* No JS: the quote links target the overlay, so it still opens; Close is a link to the top */
.no-js .modal-overlay:target { opacity: 1; visibility: visible; }
.no-js .modal-overlay:target .modal { transform: none; }
.modal {
  position: relative;
  width: 100%; max-width: 640px; max-height: calc(100dvh - 2rem);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-panel);
  border-top: 4px solid var(--red);
  padding: var(--s7) var(--s7) var(--s6);
  transform: translateY(16px);
  transition: transform var(--speed) var(--ease);
}
.modal-overlay.is-open .modal { transform: none; }
@media (prefers-reduced-motion: reduce) { .modal { transform: none; } }
.modal:focus { outline: none; }
.modal-close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 44px; height: 44px; border: 0; border-radius: var(--radius);
  background: transparent; cursor: pointer; color: var(--ink);
  display: block;
}
.modal-close::before, .modal-close::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 20px; height: 2px; background: currentColor; transform: rotate(45deg);
}
.modal-close::after { transform: rotate(-45deg); }
.modal-close:hover { background: var(--mist); }
.contact-form h2 { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); padding-right: var(--s8); }
.modal-intro { margin-top: var(--s3); color: var(--text-muted); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: grid; gap: 0 var(--s4); }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { margin-top: var(--s4); display: grid; gap: var(--s2); }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field .optional { font-weight: 400; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; min-height: 48px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid #8a8a8a; border-radius: var(--radius);
  padding: var(--s3) var(--s4);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6b6b6b; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--ink); }
.contact-form form .btn { margin-top: var(--s5); }
.form-error { margin-top: var(--s4); color: var(--red-text); font-weight: 600; }
.form-note { margin-top: var(--s4); font-size: var(--fs-sm); color: var(--text-muted); }
.form-note a { color: var(--ink); font-weight: 600; }
.form-success { padding-block: var(--s6); }
.form-success h3 { font-size: var(--fs-h3); }
.form-success p { margin-top: var(--s3); color: var(--text-muted); }
body.modal-open { overflow: hidden; }
@media (max-width: 559px) {
  .modal { padding: var(--s6) var(--s5) var(--s5); }
}

/* ==========================================================================
   INNER PAGES: privacy, terms, 404. The home page's ink masthead, then one
   readable text column on white. Same type scale and links as the home page.
   ========================================================================== */
.page-head { padding-top: calc(var(--band-pad) + var(--s4)); }
.page-head h1 { font-size: var(--fs-h1); margin-top: var(--s4); }
.page-head .lead { margin-top: var(--s5); max-width: 52ch; }
.crumb { font-size: var(--fs-sm); color: var(--text-inverse-muted); }
.crumb a { color: var(--text-inverse); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .crumb a:hover { color: var(--red); } }
/* The column starts on the same line as the masthead title, never centred in the page */
.prose > * { max-width: 68ch; }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s8); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: var(--s4); color: var(--text); }
.prose ul { list-style: disc; padding-left: 1.25em; display: grid; gap: var(--s2); }
.prose li::marker { color: var(--red-text); }
.prose a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .prose a:hover { color: var(--red-press); } }
.prose .btn, .prose .line-link { text-decoration: none; }
.prose .btn--red { color: var(--text-inverse); }
.prose .line-link { color: var(--ink); }
.notfound-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); margin-top: var(--s6); }
.prose a[href^="tel:"] { white-space: nowrap; }
.footer-bottom a { color: var(--text-inverse); text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--red); }