/* ==========================================================================
   LDS STORAGE: SITE STYLESHEET
   One file, mobile-first. Site-owned (www/site/ is never touched by Imprint
   updates). Tokens first; every colour below comes from a token.

   Contrast (WCAG 2.x, measured 2026-09-28, slate palette):
     ink on slate-50 16.5 · on slate-100 15.4 · on white 17.5
     muted on slate-50 7.1 · on slate-100 6.7 · on white 7.6
     slate-50 on ink 16.5 · slate-400 on ink 7.9 · on ink-2 6.9
     amber on ink 8.7 · ink on amber 8.7 · amber-deep on slate-50 6.7
     error on white 6.5 · success on white 6.2 · field border on white 3.5
   Amber is NEVER text on a light ground (1.9:1). It is a fill, or text on ink.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2-variations"),
       url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 100%;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --ink: #121a24;          /* dark slate: text, dark bands */
  --ink-2: #1c2632;        /* surfaces on dark */
  --ink-3: #334155;        /* illustration bodies (the sea-can row) */
  --muted: #475569;        /* secondary text on light */
  --slate-50: #f6f8fa;     /* page */
  --slate-100: #edf1f5;    /* alternate sections, drawing panels */
  --slate-200: #dfe5ec;    /* hairlines, placeholders */
  --slate-300: #c3cdd8;
  --slate-400: #a3b0bf;    /* secondary text on dark */
  --field-border: #7e8b9b; /* form fields: 3.5:1 on white (WCAG 1.4.11) */
  --paper: #ffffff;
  --blue: #2b66a8;         /* the MEASURING accent: grids, dimension lines, info */
  --blue-deep: #1d4a80;    /* blue text on light (7.9:1 on slate-100) */
  --blue-light: #7fb0e6;   /* blue on dark (7.7:1 on ink) */
  --blue-50: #e8f0f9;
  --amber-50: #fff5d6;
  --amber: #f2a900;
  --amber-2: #ffbf1f;
  --amber-deep: #7a4f00;
  --error: #b3261e;
  --success: #1f6f43;
  --map-land: #eef2f5;     /* the map: ground */
  --map-built: #e2e8ee;    /* built-up land */
  --map-water: #b8cde3;    /* rivers (the river's name is blue-deep: 7.3 on land) */
  --map-edge: #b4c0cd;     /* road edges */
  --map-hwy-edge: #a77400; /* Highway 5's edge, under amber */
  --map-rail: #8b98a9;

  --text: var(--ink);
  --text-muted: var(--muted);
  --bg: var(--slate-50);
  --surface: var(--paper);
  --line: rgb(18 26 36 / 0.12);
  --line-strong: rgb(18 26 36 / 0.22);
  --focus: var(--ink);

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);
  --step-4: clamp(2.25rem, 1.5rem + 3.2vw, 3.875rem);
  --step-5: clamp(2.5rem, 1.55rem + 4.3vw, 4.625rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: clamp(56px, 3.5rem + 3.5vw, 104px);
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1200px;

  --r-s: 4px;
  --r-m: 8px;
  --r-l: 14px;
  --shadow-1: 0 1px 2px rgb(18 26 36 / 0.06), 0 1px 1px rgb(18 26 36 / 0.04);
  --shadow-2: 0 18px 40px -18px rgb(18 26 36 / 0.35), 0 2px 6px rgb(18 26 36 / 0.06);
  --header-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* A dark section re-points the semantic tokens, and everything inside follows. */
.on-dark {
  --text: var(--slate-50);
  --text-muted: var(--slate-400);
  --bg: var(--ink);
  --surface: var(--ink-2);
  --line: rgb(246 248 250 / 0.14);
  --line-strong: rgb(246 248 250 / 0.28);
  --focus: var(--amber);
  color: var(--text);
  background: var(--bg);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, ul, ol, dl, figure, blockquote, h1, h2, h3, h4 { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--amber); color: var(--ink); }

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--slate-50); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-s); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }
.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;
}

/* ---------------------------------------------------------------- layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--alt { background: var(--slate-100); }
.section--paper { background: var(--paper); }
/* Two sections on the same ground in a row get ONE gap between them, not
   both paddings (~200 px of nothing at desktop); the numbered guide above
   the second heading is the divider. */
.section:not(.on-dark, .section--alt, .section--paper) + .section:not(.on-dark, .section--alt, .section--paper) { padding-top: 0; }
.section--tight:not(.on-dark, .section--alt, .section--paper) + .section:not(.on-dark, .section--alt, .section--paper) { padding-top: calc(var(--section) * 0.4); }
.stack > * + * { margin-top: var(--flow, var(--s-4)); }
.section-head { display: grid; gap: var(--s-3); max-width: 720px; margin-bottom: var(--s-7); }
.section-head--split {
  max-width: none; grid-template-columns: 1fr; align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1fr auto; gap: var(--s-6); }
}

/* Sections built from a page body (Lds::renderBody). */
.section > .wrap > * + * { margin-top: var(--s-6); }
.section-title h2 { font-size: var(--step-4); max-width: 20ch; }
.section-title + .section-intro { margin-top: var(--s-4); }
.section-intro { font-size: var(--step-1); line-height: 1.5; color: var(--text-muted); max-width: 60ch; }
.section-intro + * { margin-top: var(--s-7) !important; }
@media (max-width: 599px) { .section-intro + * { margin-top: var(--s-5) !important; } }
.section-more { margin-top: var(--s-6); }
mark.tbd {
  color: inherit; padding: 0 3px; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: repeating-linear-gradient(-45deg, rgb(242 169 0 / .22) 0 6px, rgb(242 169 0 / .08) 6px 12px);
  box-shadow: inset 0 -2px 0 var(--amber);
}

/* ---------------------------------------------------------------- type */
h1, h2, h3, .h1, .h2, .h3 {
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--step-5); }
h2, .h2 { font-size: var(--step-4); }
h3, .h3 { font-size: var(--step-2); font-stretch: 88%; line-height: 1.15; letter-spacing: -0.005em; }
h4 { font-size: var(--step-1); font-weight: 700; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber-deep);
}
.on-dark .eyebrow { color: var(--amber); }
.eyebrow::before {
  content: ""; width: 9px; height: 9px; background: var(--amber); transform: rotate(45deg); flex: none;
}
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--text-muted); max-width: 60ch; text-wrap: pretty; }
.muted { color: var(--text-muted); }

/* Page prose (what the admin writes). Styled by context, never by class. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--step-3); margin-top: 1.6em; }
.prose h3 { font-size: var(--step-2); margin-top: 1.4em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose a { text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 1.5em; }
.prose ul li + li { margin-top: 0.4em; }
.prose ul li::before {
  content: ""; position: absolute; left: 0.2em; top: 0.62em; width: 7px; height: 7px;
  background: var(--amber); transform: rotate(45deg);
}
.prose ol { padding-left: 1.3em; }
.prose strong { font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; }
.prose blockquote { border-left: 4px solid var(--amber); padding-left: var(--s-4); font-size: var(--step-1); }
.prose img { border-radius: var(--r-m); }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--slate-50); --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; text-decoration: none;
  color: var(--btn-fg); background: var(--btn-bg); border: 2px solid var(--btn-bd); border-radius: var(--r-s);
  cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 20px; height: 20px; flex: none; }
.btn--amber { --btn-bg: var(--amber); --btn-fg: var(--ink); --btn-bd: var(--amber); }
.btn--amber { box-shadow: 0 10px 20px -12px rgb(242 169 0 / 0.95); }
.btn--amber:hover { --btn-bg: var(--amber-2); --btn-bd: var(--amber-2); }
.btn--ink:hover { --btn-bg: var(--ink-3); --btn-bd: var(--ink-3); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bd: var(--text); --btn-bg: rgb(18 26 36 / 0.04); }
.on-dark .btn--ghost:hover { --btn-bg: rgb(246 248 250 / 0.06); }
.btn--lg { min-height: 56px; padding: 14px 26px; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--amber); padding-bottom: 2px;
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform .18s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-top: 3px solid var(--amber);
  border-bottom: 1px solid var(--line);
}
.site-header__bar { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); }
.brand { display: block; flex: none; margin-right: auto; }
.brand img { height: 40px; width: auto; }
@media (min-width: 1000px) { .brand img { height: 46px; } }

.nav { display: none; }
.nav ul { display: flex; gap: 2px; list-style: none; padding: 0; margin: 0; }
.nav a {
  display: block; padding: 10px 12px; border-radius: var(--r-s);
  font-weight: 600; font-size: 0.96875rem; text-decoration: none; color: var(--text);
}
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--amber); border-radius: 0; }
.header-call { display: none; }
@media (min-width: 1000px) {
  .nav { display: block; }
  .header-call { display: inline-flex; }
  .nav-toggle { display: none !important; }
}

.nav-toggle, .header-phone {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--line-strong); border-radius: var(--r-s); background: transparent; cursor: pointer; color: var(--text);
  text-decoration: none;
}
.nav-toggle .icon, .header-phone .icon { width: 24px; height: 24px; }
@media (min-width: 1000px) { .header-phone { display: none; } }
.nav-toggle[aria-expanded="true"] .icon-open, .nav-toggle[aria-expanded="false"] .icon-close { display: none; }

/* Mobile menu panel */
.mobile-nav {
  position: fixed; inset: calc(var(--header-h) + 4px) 0 0 0; z-index: 49; overflow-y: auto;
  background: var(--ink); color: var(--slate-50); padding: var(--s-5) var(--gutter) calc(var(--s-9) + env(safe-area-inset-bottom));
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; padding: 0; margin: 0 0 var(--s-6); }
.mobile-nav li + li { border-top: 1px solid rgb(246 248 250 / 0.12); }
.mobile-nav a:not(.btn) {
  display: flex; justify-content: space-between; align-items: center; padding: 16px 0;
  font-size: 1.5rem; font-weight: 700; font-stretch: 80%; text-decoration: none; color: var(--slate-50);
}
.mobile-nav a[aria-current="page"] { color: var(--amber); }
.mobile-nav .btn { width: 100%; margin-top: var(--s-3); }
/* The menu panel is ink: its ghost button needs light lines, as the action bar's does. */
.mobile-nav .btn--ghost { --btn-fg: var(--slate-50); --btn-bd: rgb(246 248 250 / 0.35); }
.mobile-nav .btn--ghost:hover { --btn-bd: var(--slate-50); --btn-bg: rgb(246 248 250 / 0.06); }
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------- special banner */
.special {
  background: var(--amber); color: var(--ink);
}
.special__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-block: 12px; }
.special__tag {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink); color: var(--amber); padding: 5px 10px; border-radius: 2px;
}
.special__title { font-weight: 800; font-stretch: 85%; font-size: 1.125rem; }
.special__text { font-size: 0.9375rem; }
.special__link { margin-left: auto; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.special__fine { font-size: 0.8125rem; opacity: .85; width: 100%; }

/* ---------------------------------------------------------------- hero (home) */
.hero { padding-block: clamp(32px, 4vw, 48px) clamp(8px, 2vw, 24px); }
@media (max-width: 599px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__title { font-size: clamp(2.375rem, 9.6vw, 2.75rem); }
}
.hero__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 760px) { .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--s-8); } }
.hero__copy { display: grid; gap: var(--s-5); align-content: center; }
.hero__title { font-size: var(--step-5); max-width: 15ch; }
.hero__lede { font-size: var(--step-1); color: var(--text-muted); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__media { position: relative; }
.hero__photo {
  border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--slate-200);
  /* A gold outline offset behind the photo: one shadow the page colour,
     one the gold, a little larger. */
  box-shadow: 16px 16px 0 -2px var(--slate-50), 16px 16px 0 0 var(--amber), var(--shadow-2);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
@media (min-width: 760px) { .hero__photo { aspect-ratio: 1 / 1; margin-bottom: 72px; } }
@media (max-width: 599px) {
  .hero__photo { margin-right: 10px; box-shadow: 10px 10px 0 -2px var(--slate-50), 10px 10px 0 0 var(--amber), var(--shadow-2); }
  .eyebrow--place { letter-spacing: 0.1em; }
}
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 0; list-style: none; }
.hero__trust li {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9375rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 6px;
}
.hero__trust .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--amber); color: var(--ink); stroke-width: 2.5; }
.hero__trust { gap: 8px; }

/* Rates at a glance: the thing nobody else in town shows. */
.glance {
  position: relative; margin: -56px var(--s-4) 0; z-index: 2;
  background: var(--ink); color: var(--slate-50); border-radius: var(--r-m); box-shadow: var(--shadow-2);
  border-top: 4px solid var(--amber);
  padding: var(--s-4) var(--s-5) var(--s-5);
}
@media (min-width: 760px) {
  .glance { position: absolute; left: -56px; bottom: 0; margin: 0; width: min(360px, 72%); }
}
.glance__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.glance__title { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.glance__note { font-size: 0.8125rem; color: var(--slate-400); }
.glance ul { list-style: none; padding: 0; margin: 0; }
.glance li + li { border-top: 1px solid rgb(246 248 250 / 0.12); }
.glance a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s-3);
  padding: 11px 0; text-decoration: none; color: var(--slate-50);
}
.glance a:hover .glance__label { text-decoration: underline; text-underline-offset: 3px; }
.glance__label { font-weight: 600; }
.glance__price { font-weight: 800; font-stretch: 85%; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.glance__price small { font-weight: 500; font-size: 0.8125rem; color: var(--slate-400); margin-right: 4px; }
.glance__price em { font-style: normal; font-weight: 700; font-size: 1rem; color: var(--amber); }

/* ---------------------------------------------------------------- feature strip & grid */
.features { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 1000px) { .features:has(> :nth-child(4):last-child, > :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); } }
/* align-content: a card shorter than its row-mate kept the extra height in
   its title row, so its text sat lower than the next card's. */
.feature { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); align-items: start; align-content: start; }
.feature__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-s);
  background: var(--ink); color: var(--amber); grid-row: span 2;
}
.on-dark .feature__icon { background: var(--amber); color: var(--ink); }
.on-dark .feature { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.feature__icon .icon { width: 26px; height: 26px; }
.feature__title { font-size: 1.125rem; font-weight: 800; font-stretch: 88%; line-height: 1.2; }
.feature__text { font-size: 0.96875rem; color: var(--text-muted); }

/* ---------------------------------------------------------------- offer cards (what we store) */
.offers { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.offer {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--s-5); text-decoration: none; color: var(--text);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.offer:hover { border-color: var(--ink); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.offer__art { background: var(--slate-100); border-radius: var(--r-s); padding: var(--s-4) var(--s-4) 0; height: 112px; display: grid; align-items: end; }
.offer__art .ill { width: 100%; height: 100%; }
.offer__title { font-size: var(--step-2); font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.offer__sizes { margin-top: 6px; color: var(--text-muted); font-size: 0.9375rem; }
.offer__sizes span { white-space: nowrap; }
.offer__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.offer__from { font-size: 0.875rem; color: var(--text-muted); }
.offer__from strong { display: block; font-size: 1.5rem; font-weight: 800; font-stretch: 85%; color: var(--text); font-variant-numeric: tabular-nums; }
.offer__from strong span { font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); }
.offer__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--amber); color: var(--ink); flex: none; }
.offer__go .icon { width: 20px; height: 20px; }
/* Phones: two small cards a row; the rates page has the detail. */
@media (max-width: 599px) {
  .offers { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .offer { padding: var(--s-3); gap: var(--s-2); }
  .offer__art { height: 72px; padding: 10px 10px 0; }
  .offer__title { font-size: 1.125rem; }
  .offer__sizes { display: none; }
  .offer__from { font-size: 0.8125rem; }
  .offer__from strong { font-size: 1.25rem; }
  .offer__go { width: 32px; height: 32px; }
  .offer__go .icon { width: 16px; height: 16px; }
}

/* ---------------------------------------------------------------- illustrations */
.ill { width: 100%; height: auto; overflow: visible; }
.ill--fit { overflow: hidden; }
.ill .ill-ground { stroke: var(--ink); stroke-width: 1.2; }
.ill .ill-fill { fill: var(--ink-3); }
.ill .ill-accent { fill: var(--amber); }
.ill .ill-line { fill: none; stroke: var(--slate-50); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ill .ill-frame { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ill .ill-rib { fill: none; stroke: #26303e; stroke-width: 1; }
.ill .ill-wheel { fill: var(--ink); stroke: var(--slate-50); stroke-width: 1; }
.ill .ill-plot { fill: var(--slate-200); stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; }

/* ---------------------------------------------------------------- photo band */
.photos { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (max-width: 719px) {
  .photos { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .photos > :first-child { grid-column: 1 / -1; }
  .photos > :not(:first-child) img { aspect-ratio: 1 / 1; }
}
@media (min-width: 720px) { .photos { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; } .photos > :first-child { grid-row: span 2; } }
.photos figure { border-radius: var(--r-m); overflow: hidden; background: var(--slate-200); }
.photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.photos img.is-portrait { object-position: 50% 18%; }
@media (min-width: 720px) { .photos > :first-child img { aspect-ratio: auto; } }
/* "Open images full size on click" (the gallery's Display settings) wraps each
   photo in a link. The figure clips, so the global focus ring (drawn outside)
   would vanish: this one is inset, white inside ink, visible on any photo. */
.photos a { display: block; height: 100%; cursor: zoom-in; }
.photos a:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.photos a:focus-visible img { outline: 3px solid var(--paper); outline-offset: -3px; }

/* The photo viewer (www/site/js/lightbox.js): the photo over the page, its alt
   text as the caption, previous / next and close. The dialog fills the screen
   and is its own dark backdrop, so a tap on the dark area closes it. Sideways
   drags are left to the script (a swipe); pinch-zoom still works. */
.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: var(--s-8) var(--s-4) var(--s-5); border: 0; background: rgb(12 17 24 / 0.95); color: var(--slate-50);
  touch-action: pan-y pinch-zoom; overscroll-behavior: contain;
}
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: var(--s-3); }
.lightbox::backdrop { background: transparent; }
.lightbox__figure { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: var(--s-3); min-height: 0; height: 100%; }
.lightbox__img { max-width: min(100%, 1600px); max-height: 100%; min-height: 0; width: auto; height: auto; object-fit: contain; align-self: center; border-radius: var(--r-s); -webkit-user-drag: none; user-select: none; }   /* a drag is a swipe, not a native image drag */
.lightbox__caption { max-width: 60ch; text-align: center; font-size: 0.9375rem; line-height: 1.5; color: var(--slate-300); }
.lightbox__count { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--slate-400); }
.lightbox__btn {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid rgb(246 248 250 / 0.35); border-radius: 50%; background: rgb(18 26 36 / 0.8); color: var(--slate-50); cursor: pointer;
}
.lightbox__btn:hover { border-color: var(--slate-50); }
.lightbox__btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.lightbox__btn[hidden] { display: none; }
.lightbox__close { top: var(--s-4); right: var(--s-4); }
.lightbox__prev, .lightbox__next { top: 50%; translate: 0 -50%; }
.lightbox__prev { left: var(--s-4); }
.lightbox__next { right: var(--s-4); }
.lightbox__prev .icon { rotate: 180deg; }
@media (max-width: 599px) {
  .lightbox { padding-bottom: calc(var(--s-5) + 56px); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--s-4); translate: none; }
}
html.has-lightbox { overflow: hidden; }

/* ---------------------------------------------------------------- split (prose + media) */
.split { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-9); } }
.split__media { position: sticky; top: calc(var(--header-h) + var(--s-5)); }

/* A numbered list in page prose reads as steps ("How renting works"): cards
   on a dashed route, each step's number in the logo's diamond on the route. */
.section .prose ol {
  list-style: none; counter-reset: step; padding: 52px 0 0; position: relative;
  display: grid; gap: var(--s-4);
}
.section .prose:has(ol) { max-width: none; }
.section .prose ol::before {
  content: ""; position: absolute; top: 17px; left: 18px; right: 0;
  border-top: 2px dashed var(--amber);
}
.section .prose ol li {
  counter-increment: step; position: relative; padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
}
.section .prose ol li::before {
  content: counter(step); position: absolute; left: 0; top: -52px;
  display: grid; place-items: center; width: 36px; height: 36px;
  background: var(--amber); color: var(--ink); font-weight: 800;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
@media (min-width: 700px) {
  .section .prose ol { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .section .prose ol { padding: 0 0 0 52px; }
  .section .prose ol::before { top: 18px; bottom: 24px; left: 17px; right: auto; border-top: 0; border-left: 2px dashed var(--amber); }
  .section .prose ol li::before { top: var(--s-5); left: -52px; }
}

/* ---------------------------------------------------------------- reviews */
.reviews { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.review { background: var(--surface); border-radius: var(--r-m); padding: var(--s-5); border: 1px solid var(--line); display: grid; gap: var(--s-3); }
.review__stars { display: flex; gap: 2px; color: var(--amber-deep); }
.on-dark .review__stars { color: var(--amber); }
.review__stars .icon { width: 18px; height: 18px; fill: currentColor; }
.review__quote { font-size: var(--step-1); line-height: 1.45; }
.review__who { font-weight: 700; }
.review__who span { font-weight: 400; color: var(--text-muted); }

/* ---------------------------------------------------------------- FAQ */
.faq-list { display: grid; gap: var(--s-2); }
.faq {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
}
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); font-weight: 700; font-size: 1.0625rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.faq[open] summary .icon { transform: rotate(180deg); }
.faq[open] { border-color: var(--line-strong); box-shadow: inset 4px 0 0 var(--amber); }
.faq summary .icon { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--slate-100); }
.faq[open] summary .icon { background: var(--amber); color: var(--ink); }
.faq summary:hover { color: var(--blue-deep); }
.faq__a { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); }
.faq__a > * + * { margin-top: .8em; }
.faq-topic + .faq-topic { margin-top: var(--s-7); }
.faq-topic__title { font-size: var(--step-2); margin-bottom: var(--s-4); }

/* ---------------------------------------------------------------- CTA band */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner { display: grid; gap: var(--s-6); padding-block: var(--section); }
@media (min-width: 720px) { .cta-band__inner { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.cta-band h2 { font-size: var(--step-4); max-width: 16ch; }
.cta-band__actions { display: grid; gap: var(--s-3); }
/* A phone number as a card (the CTA band, the Request page): which line
   it is FIRST, at reading size, then the number. */
.phone-card {
  display: flex; align-items: center; gap: var(--s-4); text-decoration: none; color: var(--slate-50);
  padding: var(--s-4) var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-m);
  background: var(--ink);
}
.phone-card:hover { border-color: var(--amber); }
.phone-card .icon { width: 28px; height: 28px; color: var(--amber); flex: none; }
.phone-card__line { display: grid; gap: 2px; }
.phone-card__which { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--amber); }
.phone-card__number { font-size: 1.625rem; font-weight: 800; font-stretch: 85%; line-height: 1.15; color: var(--slate-50); font-variant-numeric: tabular-nums; }
.cta-band__inner { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- page hero (inner pages) */
.page-hero { padding-block: clamp(32px, 5vw, 72px) clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.page-hero__inner { display: grid; gap: var(--s-4); }
.page-hero h1 { font-size: var(--step-5); max-width: 18ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: var(--text-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--slate-200); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }

/* ---------------------------------------------------------------- rates */
.rate-group + .rate-group { margin-top: var(--s-8); }
.rate-group__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.rate-group__head::after { content: ""; flex: 1; border-top: 1px solid var(--line-strong); }
.rate-group__head :is(h2, h3) { font-size: var(--step-3); font-stretch: 78%; }   /* h2 in a page's opening section */
.rate-group__head .icon {
  width: 52px; height: 52px; padding: 14px; flex: none; color: var(--ink); background: var(--amber);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.rate-list { display: grid; gap: var(--s-3); }
.rate {
  display: grid; gap: var(--s-4); align-items: center;
  grid-template-columns: 1fr; padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.rate:hover { border-color: var(--line-strong); box-shadow: inset 4px 0 0 var(--amber), var(--shadow-2); }
@media (min-width: 760px) {
  .rate {
    grid-template-columns: 170px minmax(0, 1fr) auto; column-gap: var(--s-6); row-gap: var(--s-2);
    grid-template-areas: "art head price" "art details price";
  }
  .rate__head { align-self: end; }
  .rate__details { align-self: start; }
}
.rate__art { grid-area: art; }
.rate__head { grid-area: head; }
.rate__details { grid-area: details; }
.rate__price { grid-area: price; }
.rate__art { background: var(--slate-100); border-radius: var(--r-s); padding: 12px 12px 0; height: 96px; display: grid; align-items: end; }
.rate__art .ill { width: 100%; height: 100%; }
.rate__size { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-deep); }
.rate__title { font-size: var(--step-2); font-weight: 800; font-stretch: 85%; line-height: 1.1; margin-top: 2px; letter-spacing: 0; text-wrap: wrap; }   /* the same as an h3 or an h4 */
.rate__summary { color: var(--text-muted); margin-top: var(--s-2); font-size: 0.96875rem; }
.rate__facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: var(--s-3); padding: 0; list-style: none; font-size: 0.875rem; }
.rate__facts li { display: inline-flex; align-items: center; gap: 6px; }
.rate__facts .icon { width: 16px; height: 16px; color: var(--success); }
.rate__price { text-align: left; display: grid; gap: var(--s-2); justify-items: start; min-width: 180px; }
@media (min-width: 760px) { .rate__price { justify-items: end; text-align: right; } }
.rate__amount { font-size: 2rem; font-weight: 800; font-stretch: 80%; line-height: 1; font-variant-numeric: tabular-nums; }
.rate__amount span { font-size: 1rem; font-weight: 600; color: var(--text-muted); }
.rate__annual { font-size: 0.875rem; color: var(--text-muted); }
.rate__note { font-weight: 700; }
/* Phones: AFTER the base .rate__* rules, which have the same specificity. */
@media (max-width: 759px) {
  .rate {
    grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art head" "details details" "price price";
    gap: var(--s-3) var(--s-4); padding: var(--s-4);
  }
  .rate__art { height: 68px; padding: 8px 8px 0; }
  .rate__title { font-size: 1.25rem; }
  .rate__size { font-size: 0.75rem; letter-spacing: 0.1em; text-wrap: balance; }
  .rate__summary { margin-top: 0; }
  .rate__price {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3);
    min-width: 0; border-top: 1px solid var(--line); padding-top: var(--s-3);
  }
  .rate__price .btn { min-height: 44px; padding: 10px 16px; }
  .rate__amount { font-size: 1.75rem; }
}
.pill {
  display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 2px; background: var(--slate-100); color: var(--ink);
}
.pill--limited { background: var(--amber); }
.pill--waitlist { background: var(--ink); color: var(--amber); }

.rates-notes { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: var(--s-7); }
.note-card { background: var(--slate-100); border-radius: var(--r-m); padding: var(--s-5); display: grid; gap: var(--s-2); }
.note-card .icon { width: 26px; height: 26px; color: var(--amber-deep); }
.note-card h3 { font-size: 1.125rem; }
.note-card p { font-size: 0.9375rem; color: var(--text-muted); }

/* ---------------------------------------------------------------- size guide */
.size-scale { display: grid; gap: var(--s-4); }
.size-item {
  display: grid; gap: var(--s-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: var(--s-5);
}
@media (min-width: 720px) { .size-item { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; } }
.size-item__art { background: var(--slate-100); border-radius: var(--r-s); padding: var(--s-4) var(--s-4) var(--s-3); }
/* The labelled scale figure: drawing, dimension line under the object, caption. */
.scale-fig { margin: 0; display: grid; gap: var(--s-2); }
.scale { position: relative; padding-bottom: 26px; }
.dim {
  position: absolute; left: var(--x); width: var(--w); bottom: 2px; height: 16px;
  border-inline: 1.5px solid var(--blue);
}
.dim::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1.5px solid var(--blue); }
.dim span {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 0 6px;
  background: var(--slate-100); font-size: 0.8125rem; font-weight: 700; line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--blue-deep);
}
.scale-fig figcaption { font-size: 0.9375rem; font-weight: 600; color: var(--text); text-align: center; }
.size-item h3 { font-size: var(--step-2); }
@media (max-width: 599px) {
  .size-item { padding: var(--s-3); gap: var(--s-3); }
  .size-item__art { padding: 12px 10px 10px; }
  .size-item > div:last-child { padding: 0 var(--s-2) var(--s-2); }
}
.size-item__fits { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: 6px; }
.size-item__fits li { position: relative; padding-left: 1.4em; text-wrap: pretty; }
.size-item__fits li::before { content: ""; position: absolute; left: .15em; top: .6em; width: 7px; height: 7px; background: var(--amber); transform: rotate(45deg); }
.scale-note {
  display: inline-flex; gap: var(--s-2); align-items: center; font-size: 0.875rem; font-weight: 600;
  color: var(--blue-deep); background: var(--blue-50); border-radius: 999px; padding: 6px 14px 6px 10px;
}
.scale-note .icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- contact */
.contact-grid { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(20px, 3vw, 40px); }
.info-list { display: grid; gap: var(--s-5); }
.info { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-4); align-content: start; }  /* stretched beside a taller cell, its rows stay packed */
.info > .icon { width: 24px; height: 24px; color: var(--amber-deep); grid-row: span 2; margin-top: 2px; }
.on-dark .info > .icon { color: var(--amber); }
/* The label names the row at reading size ("Office", "Yard access"): a
   small spaced-out caption read like a footnote beside the value. */
.info__label { font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--amber-deep); }
.on-dark .info__label { color: var(--amber); }
.info__value { font-weight: 600; font-size: 1.0625rem; }
.info__value--phone { font-size: 1.3125rem; font-weight: 800; font-stretch: 88%; font-variant-numeric: tabular-nums; line-height: 1.25; }
.info__value--lead { font-weight: 400; }            /* Yard access: only its first sentence (Lds::lead) */
.info__value--lead strong { font-weight: 600; }     /* keeps the weight of every other value */
.info__value a { text-decoration: none; }
.info__value a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Hours: each day above its hours, as the contact panel sets a label above
   its value. Side by side, a narrow column broke them ("By / appointment"). */
.hours { display: grid; gap: 0; font-weight: 500; }
.hours dt { color: var(--text-muted); }
.hours dd { margin: 0 0 var(--s-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.hours dd:last-child { margin-bottom: 0; }

/* Imprint's form markup (Shortcode::renderForm). */
.imprint-form__fields { display: grid; gap: var(--s-4) var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.imprint-form__field { grid-column: 1 / -1; display: grid; gap: 6px; align-content: start; }
@media (min-width: 600px) { .imprint-form__field--half { grid-column: span 1; } }
.imprint-form__label { font-weight: 700; font-size: 0.9375rem; }
.imprint-form__required { color: var(--error); }
.imprint-form__input {
  width: 100%; min-height: 50px; padding: 12px 14px; font-size: 1rem;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--field-border); border-radius: var(--r-s);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.imprint-form__input:hover { border-color: var(--muted); }
.imprint-form__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(242 169 0 / 0.55); }
.imprint-form__input:user-invalid { border-color: var(--error); }
.imprint-form__textarea { min-height: 130px; resize: vertical; }
.imprint-form__select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.imprint-form__help { font-size: 0.9375rem; line-height: 1.45; color: var(--text-muted); }
.imprint-form__actions { margin-top: var(--s-5); }
.imprint-form__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 14px 26px; font-weight: 800; font-size: 1.0625rem;
  background: var(--amber); color: var(--ink); border: 2px solid var(--amber); border-radius: var(--r-s); cursor: pointer;
  transition: background-color .18s var(--ease);
}
.imprint-form__submit:hover { background: var(--amber-2); border-color: var(--amber-2); }
.imprint-form__submit:disabled { opacity: .7; cursor: progress; }
@media (min-width: 600px) { .imprint-form__submit { width: auto; } }
.imprint-form__alert { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-s); font-weight: 600; }
.imprint-form__alert--success { background: #e6f2eb; color: var(--success); border: 1px solid #b7d9c4; }
.imprint-form__alert--error { background: #fbeceb; color: var(--error); border: 1px solid #f0c3bf; }
.imprint-form__error { color: var(--error); font-size: 0.875rem; font-weight: 600; }
/* Conditional logic hides a field with the `hidden` attribute, which the
   `display: grid` above would otherwise beat (it did: hidden fields stayed). */
.imprint-form [hidden] { display: none !important; }

/* Parts of a long form: a numbered heading and a rule, like the site's own
   section guides. A part that logic hides is not rendered, so it is not
   counted, and the numbers stay in sequence. */
.imprint-form__fields { counter-reset: part; }
.imprint-form__section { display: grid; gap: 4px; padding-top: var(--s-5); margin-top: var(--s-3); border-top: 1px solid var(--line); }
.imprint-form__field:first-child .imprint-form__section { padding-top: 0; margin-top: 0; border-top: 0; }
.imprint-form__section-title {
  counter-increment: part; display: flex; align-items: baseline; gap: 12px;
  font-size: var(--step-2); font-stretch: 85%; line-height: 1.15;
}
.imprint-form__section-title::before {
  content: counter(part, decimal-leading-zero); font-size: 0.8125rem; font-weight: 800; font-stretch: 100%;
  letter-spacing: 0.1em; color: var(--amber-deep); font-variant-numeric: tabular-nums;
}
.imprint-form__section-text { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
/* The explanation of a choice or a set of rows reads BEFORE the boxes. */
.imprint-form__field:has(> .imprint-form__choices, > .imprint-form__repeater) > .imprint-form__label { order: -2; }
.imprint-form__field:has(> .imprint-form__choices, > .imprint-form__repeater) > .imprint-form__help { order: -1; }

/* Choices: a box you can hit anywhere, 48 px tall at least. Radios sit in a
   row of pills; the Rates a visitor can tick are tiles with the price. */
.imprint-form__choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.imprint-form__choice {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px 10px 14px;
  background: var(--paper); border: 1.5px solid var(--field-border); border-radius: var(--r-s);
  font-weight: 600; line-height: 1.3; cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.imprint-form__choice:hover { border-color: var(--ink); }
.imprint-form__choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.imprint-form__choice:has(input:checked) { border-color: var(--ink); background: var(--amber-50); box-shadow: inset 0 0 0 1px var(--ink); }
.imprint-form__choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.imprint-form__choice:has(input:disabled) { opacity: .6; cursor: not-allowed; }
/* Phones: a set of radio pills wraps raggedly ("Email me" alone on a second
   row), so every choice becomes a full-width row instead. */
@media (max-width: 599px) { .imprint-form__choices { display: grid; } }
.imprint-form__choices:has(.pick) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.imprint-form__choices:has(.pick) .imprint-form__choice { align-items: center; padding: 12px 14px; }
.pick { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.pick .icon { grid-row: span 2; width: 30px; height: 30px; color: var(--amber-deep); }
.pick__name { font-weight: 700; }
.pick__price { font-weight: 500; font-size: 0.9375rem; color: var(--text-muted); }

/* Repeating rows (one per vehicle): each row a tray, its boxes labelled
   ABOVE like every other field (Imprint prints the label after the box). */
.imprint-form__repeater { display: grid; gap: var(--s-3); justify-items: start; }
.imprint-form__rep-rows { display: grid; gap: var(--s-3); width: 100%; }
.imprint-form__rep-row {
  display: grid; gap: var(--s-3); padding: var(--s-4); position: relative;
  background: var(--slate-50); border: 1px solid var(--line); border-radius: var(--r-m);
}
.imprint-form__rep-cell { display: grid; gap: 4px; }
.imprint-form__part-label { order: -1; font-size: 0.9375rem; font-weight: 600; }
.imprint-form__rep-kill {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; justify-self: end;
  background: none; border: 1.5px solid var(--line-strong); border-radius: var(--r-s);
  font-size: 1.5rem; line-height: 1; color: var(--text-muted); cursor: pointer;
}
.imprint-form__rep-kill:hover { border-color: var(--error); color: var(--error); }
.imprint-form__rep-add {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  background: none; border: 1.5px dashed var(--field-border); border-radius: var(--r-s);
  font-weight: 700; cursor: pointer;
}
.imprint-form__rep-add::before { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--amber-deep); }
.imprint-form__rep-add:hover { border-style: solid; border-color: var(--ink); }
@media (min-width: 600px) {
  .imprint-form__rep-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr) minmax(0, 1.6fr) auto; align-items: end; }
}

/* ---------------------------------------------------------------- map */
/* [map]: the yard drawn from OpenStreetMap data (tools/brand/build-map.py),
   panned and zoomed by js/map.js. --k is map units per screen pixel, so
   calc(var(--k) * 2px) is two pixels at any zoom; the max() floors keep a
   road or river no thinner than it really is up close (10 m to the unit). */
.map { margin: 0; display: grid; gap: var(--s-3); }
/* The controls' display: grid/flex would beat the hidden attribute: without
   the script they must stay hidden, and the touch button off a touch screen. */
.map [hidden] { display: none; }
.map__frame {
  position: relative; aspect-ratio: 16 / 9; max-height: 74vh; min-height: 320px;
  background: var(--map-land); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;
}
@media (max-width: 599px) { .map__frame { aspect-ratio: 4 / 5; } }
.map__svg { display: block; width: 100%; height: 100%; cursor: grab; user-select: none; -webkit-user-select: none; }
.map__frame.is-grabbing .map__svg { cursor: grabbing; }
.map__frame.is-touch .map__svg { touch-action: none; }
.map__frame.is-touch { box-shadow: inset 0 0 0 3px var(--amber); }

.map__land { fill: var(--map-land); }
.map__built { fill: var(--map-built); }
.map__river, .map__river2, .map__stream, .map__rail, .map__edge, .map__fill { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map__river { stroke: var(--map-water); stroke-width: max(19px, calc(var(--k) * 2.5px)); }
.map__river2 { stroke: var(--map-water); stroke-width: max(5px, calc(var(--k) * 2px)); }
.map__stream { stroke: var(--map-water); stroke-width: calc(var(--k) * 1.5px); }
.map__rail { stroke: var(--map-rail); stroke-width: calc(var(--k) * 1.5px); stroke-dasharray: calc(var(--k) * 6px) calc(var(--k) * 3px); stroke-linecap: butt; }
.map__edge--minor { stroke: var(--map-edge); stroke-width: max(1.9px, calc(var(--k) * 4.5px)); }
.map__fill--minor { stroke: var(--paper); stroke-width: max(1.3px, calc(var(--k) * 3px)); }
.map__edge--main { stroke: var(--map-edge); stroke-width: max(2.4px, calc(var(--k) * 6px)); }
.map__fill--main { stroke: var(--paper); stroke-width: max(1.7px, calc(var(--k) * 4px)); }
.map__edge--hwy { stroke: var(--map-hwy-edge); stroke-width: max(3.4px, calc(var(--k) * 7.5px)); }
.map__fill--hwy { stroke: var(--amber); stroke-width: max(2.6px, calc(var(--k) * 5px)); }

/* Labels are drawn in screen pixels: their transform ends in scale(k). */
.map__lbl text { font-family: var(--font); paint-order: stroke; stroke: var(--map-land); stroke-width: 3.5px; stroke-linejoin: round; }
.lbl--town circle { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5px; }
.lbl--town text { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; word-spacing: 0.2em; text-transform: uppercase; fill: var(--ink); }
.lbl--big text { font-size: 14px; }
.lbl--road text { font-size: 11.5px; font-weight: 600; font-stretch: 85%; fill: var(--muted); }
.lbl--water text { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; fill: var(--blue-deep); }
.lbl--dir text { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--amber-deep); }
.lbl--shield rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5px; }
.lbl--shield text { font-size: 11px; font-weight: 800; fill: var(--ink); stroke: none; }
.map__pin-shape { fill: var(--amber); stroke: var(--ink); stroke-width: 2px; stroke-linejoin: round; }
.map__pin-core { fill: var(--ink); }
.map__pin-name { font-size: 15px; font-weight: 800; fill: var(--ink); }
.map__pin-street { font-size: 12px; font-weight: 600; fill: var(--muted); }
.map__pin.is-flipped text { text-anchor: end; transform: translateX(-34px); }

/* Detail by zoom: an element with data-l shows only at the levels it names. */
.map__svg[data-lod="r"] [data-l]:not([data-l*="r"]),
.map__svg[data-lod="a"] [data-l]:not([data-l*="a"]),
.map__svg[data-lod="t"] [data-l]:not([data-l*="t"]) { display: none; }

.map__zoom {
  position: absolute; top: var(--s-3); right: var(--s-3); display: grid; gap: 1px;
  background: var(--line-strong); border-radius: var(--r-s); overflow: hidden; box-shadow: var(--shadow-1);
}
.map__btn {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-3);
  border: 0; background: var(--paper); color: var(--ink); font: 700 0.9375rem/1 var(--font); cursor: pointer;
}
.map__btn:hover { background: var(--slate-100); }
.map__btn .icon { width: 20px; height: 20px; }
.map__touch { position: absolute; right: var(--s-3); bottom: var(--s-3); border-radius: var(--r-s); box-shadow: var(--shadow-1); }
.map__touch[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.map__hint {
  position: absolute; left: var(--s-3); top: var(--s-3); max-width: calc(100% - 88px); margin: 0;
  padding: var(--s-2) var(--s-3); background: var(--ink); color: var(--paper); border-radius: var(--r-s);
  font-size: 0.875rem; pointer-events: none;
}
.map__bar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; }
.map__views { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.map__view {
  min-height: 44px; padding: var(--s-2) var(--s-4); border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 600 0.9375rem/1.2 var(--font); cursor: pointer;
}
.map__view:hover { border-color: var(--ink); }
.map__view[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.map__lbl.is-clash { visibility: hidden; }
@media (max-width: 599px) {
  .map__views { flex-wrap: nowrap; width: 100%; }
  .map__view { flex: 1 1 auto; padding-inline: var(--s-2); font-size: 0.875rem; }
  .map__go { width: 100%; justify-content: center; }
}
.map__credit { font-size: 0.8125rem; color: var(--text-muted); }
.map__credit a { color: inherit; }

/* ---------------------------------------------------------------- request page */
.request-grid { display: grid; gap: var(--s-6); }
.request-grid__side { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 600px) and (max-width: 999px) { .request-grid__side { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .request-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-7); align-items: start; }
}
/* Kept in view beside the long form, where the screen is tall enough to show all of it. */
@media (min-width: 1000px) and (min-height: 820px) {
  .request-grid__side { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.request-grid__side .panel { padding: var(--s-5); }
.request-talk { display: grid; gap: var(--s-3); align-content: start; }
.request-talk__title { font-size: 1.125rem; font-weight: 800; }
.request-talk .phone-card { padding: var(--s-3) var(--s-4); }
.request-talk .phone-card__number { font-size: 1.375rem; }
.request-next > :first-child { margin-top: 0; }
.request-next h2, .request-next h3 { font-size: var(--step-2); margin-bottom: var(--s-4); }
/* "What happens next" is a narrow column: its steps always run down, never across. */
.section .prose.request-next ol { grid-template-columns: 1fr; padding: 0 0 0 48px; gap: var(--s-3); }
.section .prose.request-next ol::before { top: 18px; bottom: 24px; left: 15px; right: auto; border-top: 0; border-left: 2px dashed var(--amber); }
.section .prose.request-next ol li { padding: 5px 0 0; background: none; border: 0; border-radius: 0; }
.section .prose.request-next ol li::before { top: 0; left: -48px; width: 32px; height: 32px; }

/* Contact: the way to the Request page, above the short form. */
.contact-grid__main { display: grid; gap: var(--s-5); align-content: start; }
.panel__title { font-size: var(--step-3); margin-bottom: var(--s-5); }
.switch-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5); color: var(--ink); text-decoration: none;
  background: var(--amber-50); border: 1px solid rgb(242 169 0 / 0.55); border-left: 5px solid var(--amber); border-radius: var(--r-m);
}
.switch-card > .icon { width: 28px; height: 28px; color: var(--amber-deep); }
.switch-card__text strong { display: block; font-size: 1.125rem; }
.switch-card__go {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; border-bottom: 2px solid var(--amber); padding-bottom: 2px;
}
.switch-card__go .icon { width: 18px; height: 18px; transition: transform .18s var(--ease); }
.switch-card:hover { border-color: var(--amber); }
.switch-card:hover .switch-card__go .icon { transform: translateX(3px); }
@media (min-width: 600px) { .switch-card { grid-template-columns: auto minmax(0, 1fr) auto; } .switch-card__go { grid-column: auto; } }

/* Size guide: the request button beside "See the rate". */
.size-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: var(--slate-50); padding-block: var(--s-8) calc(var(--s-6) + 76px); }
@media (min-width: 1000px) { .site-footer { padding-bottom: var(--s-6); } }
.footer-grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1.25fr 0.75fr; gap: var(--s-6); } }
.footer-brand img { height: 52px; width: auto; }
.footer-brand p { margin-top: var(--s-4); color: var(--slate-400); max-width: 34ch; font-size: 0.9375rem; }
.footer-col h2 { font-size: 0.875rem; font-weight: 800; font-stretch: 100%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-bottom: var(--s-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--slate-50); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* "Office 250-573-4232": the label beside its value at reading size, in a
   column of its own so the numbers line up. */
.footer-contact { display: grid; gap: 10px; margin: 0; }
.footer-contact > div { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.footer-contact dt { font-weight: 600; color: var(--slate-300); }
.footer-contact dd { margin: 0; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.footer-sub { margin: var(--s-5) 0 var(--s-2); font-size: 1rem; font-weight: 700; font-stretch: 100%; color: var(--amber); }
@media (max-width: 899px) {
  .site-footer { padding-top: var(--s-7); }
  .footer-grid { gap: var(--s-6); }
  .footer-col h2 { margin-bottom: var(--s-3); }
  .footer-col--explore ul { display: flex; flex-wrap: wrap; gap: 10px 22px; }
  .footer-base { margin-top: var(--s-6); }
}
.footer-hours { margin-top: 0; }
.footer-col .hours dt { color: var(--slate-300); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid rgb(246 248 250 / 0.14);
  font-size: 0.875rem; color: var(--slate-400);
}
.footer-base a { color: var(--slate-400); }
.footer-credit { margin-left: auto; }
.footer-credit a { color: var(--slate-300); text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--amber); }
@media (max-width: 599px) { .footer-credit { margin-left: 0; flex-basis: 100%; } }

/* ---------------------------------------------------------------- mobile action bar */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgb(18 26 36 / 0.96); border-top: 1px solid rgb(246 248 250 / 0.12);
}
.action-bar .btn { min-height: 50px; padding-inline: 12px; }
.action-bar:has(> .btn:only-child) { grid-template-columns: 1fr; }
.action-bar .btn--ghost { --btn-fg: var(--slate-50); --btn-bd: rgb(246 248 250 / 0.35); }
.action-bar .btn--ghost:hover { --btn-bd: var(--slate-50); }
@media (min-width: 1000px) { .action-bar { display: none; } }

/* ---------------------------------------------------------------- 404 */
.notfound { padding-block: var(--section); text-align: left; }
.notfound .lede { margin-top: var(--s-4); }
.notfound .hero__actions { margin-top: var(--s-6); }
.notfound .ill { max-width: 520px; margin-top: var(--s-6); }

/* ================================================================ texture & guides
   All drawn by CSS: no image files. */

/* A site plan's grid behind the heroes and the CTA band: a hairline every
   24 px and a stronger one every fifth (the Size Guide's 5 ft squares, at
   page scale), faded in from the right so it never sits behind the words.
   Vertical lines run through the page centre, so at desktop the strong ones
   land on the content column's edges (600 px = 5 x 120); horizontal ones
   count up from the bottom edge. Straight 1 px lines stay crisp at any zoom;
   the contour map it replaces read as wobbly (Jackson, 2026-09-28). */
.hero, .page-hero, .cta-band, .site-footer { position: relative; isolation: isolate; }
/* Decorations may hang off the edge; the page must never scroll sideways. */
.page-hero, .site-footer { overflow: hidden; }
.hero::before, .page-hero::before, .cta-band::before {
  --minor: rgb(18 26 36 / 0.045); --major: rgb(18 26 36 / 0.075);
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(0deg, var(--major) 1px, transparent 1px),
    linear-gradient(90deg, var(--major) 1px, transparent 1px),
    linear-gradient(0deg, var(--minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: 0 100%, calc(50% + 60px) 0, 0 100%, calc(50% + 12px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 85%);
          mask-image: linear-gradient(90deg, transparent 30%, #000 85%);
}
.cta-band::before { --minor: rgb(246 248 250 / 0.03); --major: rgb(246 248 250 / 0.06); }
/* Phones: the words span the screen, so the grid keeps to the top corner. */
@media (max-width: 599px) {
  .hero::before, .page-hero::before, .cta-band::before {
    -webkit-mask-image: linear-gradient(200deg, #000 0, transparent 45%);
            mask-image: linear-gradient(200deg, #000 0, transparent 45%);
  }
}

/* The logo's diamond, large and faint, off the right edge: a 2 px SVG stroke
   (vector-effect keeps it 2 px at any size), so every edge is the same
   weight. It was a clip-path band inset 2.2% across but 6% down, which made
   it about three times thicker at its top and bottom points than at its
   sides. The logo's own ring is built correctly (see build-logo.py ring()). */
.page-hero::after, .cta-band::after {
  content: ""; position: absolute; top: 50%; aspect-ratio: 3.7 / 1; translate: 0 -50%; pointer-events: none;
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 370 100' preserveAspectRatio='none'%3E%3Cpath d='M8 50 185 2.2 362 50 185 97.8Z' fill='none' stroke='%23000' stroke-width='2' stroke-miterlimit='8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 370 100' preserveAspectRatio='none'%3E%3Cpath d='M8 50 185 2.2 362 50 185 97.8Z' fill='none' stroke='%23000' stroke-width='2' stroke-miterlimit='8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.page-hero::after { z-index: -1; right: -8%; width: min(48%, 640px); opacity: 0.6; }
.cta-band::after { z-index: 0; right: -18%; width: 62%; opacity: 0.4; }
@media (max-width: 699px) { .page-hero::after, .cta-band::after { display: none; } }

/* Home: a full-height gold cut-in down the left edge of the hero, filling
   the empty margin beside the words where the screen is wide enough to have
   one (Jackson: solid, bold, "a full-height cut-in"; a floating diamond was
   tried first and dropped). The band is widest at the top and slants in
   toward the bottom-left, and a 2 px gold line runs parallel to its edge,
   16 px out, the way the hero photo's gold frame sits off the photo.
   Its top stops 56 px short of the words and its width follows the margin,
   up to 440 px. */
.hero__cut { display: none; }
@media (min-width: 1500px) {
  /* The box is the band plus the line: its width is the margin less 56 px
     (at most 440), plus 18. Inside it, 100% - 18px is the band's top width. */
  .hero__cut {
    display: block; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; pointer-events: none;
    width: calc(min(440px, (100% - var(--container)) / 2 - 56px) + 18px);
  }
  .hero__cut::before, .hero__cut::after { content: ""; position: absolute; inset: 0; background: var(--amber); }
  .hero__cut::before { clip-path: polygon(0 0, calc(100% - 18px) 0, calc((100% - 18px) * 0.45) 100%, 0 100%); }
  .hero__cut::after {
    clip-path: polygon(calc(100% - 2px) 0, 100% 0,
                       calc((100% - 18px) * 0.45 + 18px) 100%, calc((100% - 18px) * 0.45 + 16px) 100%);
  }
}

/* The features band: a sea-can wall, corrugated, fading out top and bottom. */
.section--ribbed {
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, var(--ink) 0, transparent 22%, transparent 78%, var(--ink) 100%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.035) 0 2px, transparent 2px 7px, rgb(0 0 0 / 0.22) 7px 9px, transparent 9px 16px);
}

/* Drawing panels: a faint blueprint dot grid. */
.offer__art, .rate__art {
  background-image: radial-gradient(rgb(43 102 168 / 0.2) 1px, transparent 1.3px);
  background-size: 12px 12px; background-position: 6px 6px;
}

/* The Size Guide's scale grid is REAL: squares of 5 ft. The drawing's width
   is 160 units = 100cqw of .scale, so 5 ft (17.5 units) = 10.9375cqw. Each
   drawing is centred, and its grid starts at the object's left end (--gx,
   from LdsIcon::scaleFigure) so the object's length counts in squares; the
   lines sit on the ground (y=50 units = 31.25cqw; 31.25 mod 10.9375 = 9.375cqw). */
.scale { container-type: inline-size; }
.scale::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 160 / 56; pointer-events: none;
  background-image:
    linear-gradient(rgb(43 102 168 / 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgb(43 102 168 / 0.16) 1px, transparent 1px);
  background-size: 10.9375cqw 10.9375cqw;
  background-position: var(--gx, 10cqw) 9.375cqw;
}
.scale .ill { position: relative; }

/* A numbered guide above each section's heading: gold diamond, hairline,
   section number. Numbers come from a CSS counter, not from the content. */
main { counter-reset: sec; }
.section-title {
  counter-increment: sec; position: relative; padding-top: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0 12 6 6 12 0 6z' fill='%23f2a900'/%3E%3C/svg%3E") 0 1px / 12px 12px no-repeat;
}
.section-title::before {
  content: counter(sec, decimal-leading-zero); position: absolute; top: 0; right: 0;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; line-height: 14px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.section-title::after {
  content: ""; position: absolute; top: 7px; left: 22px; right: 36px; border-top: 1px solid var(--line-strong);
}

/* Lists in page prose: short notes, laid out as cards. */
.section .prose ul { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.section .prose:has(> ul) { max-width: none; }
.section .prose:has(> ul) > :not(ul) { max-width: 68ch; }
.section .prose ul li {
  margin: 0; padding: var(--s-4) var(--s-4) var(--s-4) 40px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
}
.section .prose ul li + li { margin-top: 0; }
.section .prose ul li::before { left: 18px; top: 1.45em; }

/* Offer cards: a gold bar grows along the top on hover. */
.offer { overflow: hidden; }
.offer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--amber);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.offer:hover::before { transform: scaleX(1); }

/* The footer: a hazard stripe along its top edge (a yard's own marking), and
   hairlines between its columns. */
.site-footer::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--amber) 0 10px, var(--ink) 10px 20px);
}
@media (min-width: 900px) {
  .footer-col { border-left: 1px solid rgb(246 248 250 / 0.1); padding-left: var(--s-5); }
}

/* Photos: a crisp inner edge. */
.photos figure { position: relative; }
.photos figure::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(18 26 36 / 0.08);
}

/* ---------------------------------------------------------------- service area */
/* "Barriere, BC · Serving Kamloops & the North Thompson". Whether it fits
   on one line depends on the hero COLUMN, not the screen, so a container
   query decides: one line with the dot when the column is wide enough,
   otherwise the service area on its own line under the town, no dot. */
.hero__copy { container-type: inline-size; }
.eyebrow--place { flex-wrap: wrap; row-gap: 4px; }
.eyebrow__town { white-space: nowrap; }
.eyebrow__more { color: var(--text-muted); text-wrap: balance; flex-basis: 100%; padding-left: 19px; }
@container (min-width: 540px) {
  .eyebrow__more { flex-basis: auto; padding-left: 0; }
  .eyebrow__more::before { content: "\00B7"; margin: 0 9px 0 -1px; color: var(--amber-deep); }
}
.info__note { display: block; font-weight: 500; font-size: 0.875rem; color: var(--text-muted); }

/* [areas]: the stretch of highway the yard serves. The road is a slate strip
   with a dashed gold centre line; stops sit on it; the yard's own town is the
   logo's diamond with the business name on a tag above. */
.route { padding-block: var(--s-4) var(--s-2); }
.section:has(.route) { padding-bottom: calc(var(--section) * 0.55); }
.route__stops { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.route__stops::before {
  content: ""; position: absolute; left: 0; right: 0; top: 46px; height: 10px; border-radius: 5px; background: var(--ink-3);
}
.route__stops::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: 50px; border-top: 2px dashed var(--amber);
}
.route__stop { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; text-align: center; gap: 10px; padding-top: 40px; }
.route__pin { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink-3); }
.route__name { font-weight: 700; font-size: 0.9375rem; line-height: 1.25; }
.route__stop.is-here .route__pin {
  width: 34px; height: 34px; margin-top: -6px; border: 0; border-radius: 0; background: var(--amber);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.route__stop.is-here .route__name { font-size: 1.125rem; font-weight: 800; }
.route__tag {
  position: absolute; top: 0; left: 50%; translate: -50% 0; white-space: nowrap;
  background: var(--ink); color: var(--amber); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 9px; border-radius: 2px;
}
@media (max-width: 759px) {
  .route { padding: 0; }
  .route__stops {
    grid-auto-flow: row; grid-auto-columns: auto; gap: 0; padding: 6px 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  }
  /* The line runs pin-centre to pin-centre: row padding 16 + half the 26 px pin column = 29. */
  .route__stops::before {
    left: 27.5px; right: auto; top: 28px; bottom: 28px; width: 3px; height: auto; border-radius: 2px; background: var(--slate-300);
  }
  .route__stops::after { content: none; }
  .route__stop {
    grid-template-columns: 26px minmax(0, 1fr) auto; justify-items: start; align-items: center; align-content: center;
    text-align: left; gap: 0 14px; padding: 0 16px; min-height: 44px;
    z-index: auto;   /* so the line (below) can pass over the highlighted row */
  }
  .route__stops::before { z-index: 1; }
  .route__pin { justify-self: center; width: 14px; height: 14px; border-width: 3px; position: relative; z-index: 2; }
  .route__name { font-weight: 600; font-size: 1rem; }
  .route__stop.is-here { background: var(--amber-50); min-height: 56px; margin: 4px 0; }
  .route__stop.is-here .route__pin { width: 24px; height: 24px; margin-top: 0; }
  .route__stop.is-here .route__name { font-size: 1.125rem; }
  .route__tag { position: static; translate: none; grid-column: 3; justify-self: end; }
}

/* ================================================================ tablet tier
   600-999 px: two columns where the content allows, instead of snapping from
   the desktop layout straight to one column. (The breakpoints above that
   split layouts were lowered for the same reason: hero 760, steps 700,
   CTA band 720, size guide 720.) */
@media (min-width: 600px) and (max-width: 999px) {
  /* Header: room for the full call button beside the menu. */
  .header-call { display: inline-flex; }
  .header-phone { display: none; }
  .header-call { min-height: 44px; padding: 10px 16px; }
  /* Contact details: two columns inside the panel. */
  .contact-grid .info-list { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
}
@media (min-width: 760px) and (max-width: 959px) {
  .hero__grid { gap: var(--s-6); }
  .hero__title { font-size: clamp(2.25rem, 1.1rem + 2.7vw, 2.875rem); }
  .hero__lede { font-size: 1.0625rem; }
  .hero__actions .btn--lg { min-height: 50px; padding: 12px 18px; font-size: 1rem; }
  .glance { left: -24px; width: min(320px, 88%); }
}
@media (min-width: 720px) and (max-width: 899px) {
  .cta-band__inner { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .size-item { gap: var(--s-5); }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* Footer: logo beside its line; Visit | Talk to us; links across. */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .footer-brand, .footer-col--explore { grid-column: 1 / -1; }
  .footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-5); }
  .footer-brand p { margin-top: 0; }
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}