/* =====================================================================
   Mobility Concepts site styles. Reads every value from tokens.css.
   Order: base, layout primitives, tones, type helpers, buttons,
   skip link, header, page head, footer, reveal, motion, print.
   Block styles (hero, cards, forms, FAQ) are added by later tasks.

   JS hooks (site.js owns the behavior):
   - html.js            set by the inline boot script in <head>
   - html[data-theme]   light | dark, from the theme toggle
   - html[data-text]    112 | 125, from the text-size button
   - html.menu-open     mobile sheet open, locks page scroll
   - .site-header.is-solid  after 24px of scroll
   - .site-header.is-open   mobile sheet open
   - .reveal-ready + [data-reveal].is-in  scroll reveal fallback
   ===================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--night);
  scroll-padding-top: calc(var(--header-h) + var(--space-2));
}
html[data-text="112"] { font-size: 112.5%; }
html[data-text="125"] { font-size: 125%; }
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: var(--w-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: var(--w-display-strong); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
h2 { font-size: var(--step-4); font-weight: var(--w-h2); }
h2.h3 { font-weight: var(--w-display); }
h3 { font-size: var(--step-2); letter-spacing: var(--tr-snug); line-height: 1.2; }
h4 { font-family: var(--font-text); font-size: var(--step-1); font-weight: var(--w-semi); letter-spacing: -0.005em; line-height: var(--lh-snug); }
h5, h6 { font-family: var(--font-text); font-size: var(--step-0); font-weight: var(--w-semi); letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }

p, ul, ol, dl, blockquote, figure { margin: 0; }
p, li, dd, figcaption { text-wrap: pretty; }
ul, ol { padding-inline-start: 1.25em; }
strong, b { font-weight: var(--w-strong); }
small { font-size: var(--step--1); }

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

img, picture, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
svg { flex: none; }
.icon { display: inline-block; vertical-align: middle; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, select, textarea { min-height: var(--tap); }

hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--space-6); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-display); font-weight: var(--w-strong); }

::selection { background: var(--selection-bg); color: var(--selection-text); }

/* Focus: one visible ring, orange on every surface. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
.site-main:focus { outline: none; }

/* ---------- Layout primitives ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container-wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }
.container-text { width: min(100% - 2 * var(--gutter), var(--container-text)); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: var(--section-y-tight); }

.stack > * + * { margin-block-start: var(--stack, var(--space-3)); }
.stack-sm { --stack: var(--space-2); }
.stack-lg { --stack: var(--space-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-2));
}

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-4));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
}
.grid-2, .grid-3 { display: grid; gap: var(--grid-gap, var(--space-4)); grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.split { display: grid; gap: var(--space-6); align-items: center; }
.split-start { align-items: start; }
@media (min-width: 56rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-6), 6vw, var(--space-10)); }
  .split-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .home-events .split-wide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/* Section head: eyebrow, heading, then a short lead. The lead stays
   narrow so the eye drops straight into the content. */
.section-head { display: grid; gap: var(--space-2); margin-bottom: clamp(var(--space-6), 5vw, var(--space-8)); }
.section-head > .eyebrow { margin-bottom: 0; }
.section-head > h2 { max-width: 22ch; }
.section-head > p:not(.eyebrow) { margin-top: var(--space-1); color: var(--text-2); max-width: var(--measure-narrow); font-size: var(--step-1); line-height: var(--lh-snug); }
@media (min-width: 64rem) {
  .section-head-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); align-items: end; column-gap: var(--space-8); }
  .section-head-split > p:not(.eyebrow) { margin: 0; padding-bottom: 0.35em; }
}

.surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-3), 3vw, var(--space-5));
  box-shadow: var(--shadow-1);
}

/* Long-form text: guides, policies, Markdown output. */
.prose { max-width: var(--container-text); }
.prose > * + * { margin-block-start: 1em; }
.prose > h2 { font-size: var(--step-3); margin-block-start: var(--space-7); }
.prose > h3 { margin-block-start: var(--space-5); }
.prose > h2 + *, .prose > h3 + * { margin-block-start: var(--space-2); }
.prose li + li { margin-block-start: 0.4em; }
.prose figure img { width: 100%; height: auto; border-radius: var(--radius-md); }

/* Guides: one readable column, contents list, then sources and related links. */
.guide-meta { color: var(--text-2); font-size: var(--step--1); }
.guide-toc { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface); }
.guide-toc-title { font-size: var(--step-0); margin-block-end: var(--space-1); }
.guide-toc ol { margin: 0; padding-inline-start: 1.25em; }
.guide-toc li + li { margin-block-start: 0.35em; }
.guide-body { max-width: 68ch; }
.guide-aside { border-top: 1px solid var(--line); padding-block-start: var(--space-4); }
.guide-aside > * + * { margin-block-start: var(--space-2); }
.guide-sources, .guide-links { margin: 0; padding-inline-start: 1.25em; }
.guide-sources li + li, .guide-links li + li { margin-block-start: 0.4em; }
.guide-links { list-style: none; padding-inline-start: 0; }
.prose blockquote { border-left: 3px solid var(--accent); padding-left: var(--space-3); color: var(--text-2); }

/* ---------- Tones: light paper sections and deep forest or night ones ---------- */
.tone-paper { background: var(--bg); color: var(--text); }
.tone-paper-2 { background: var(--bg-2); color: var(--text); }

.tone-forest, .tone-night, .site-header, .page-head, .site-footer {
  color-scheme: dark;
  --text: var(--dark-text);
  --text-2: var(--dark-text-2);
  --line: var(--dark-line);
  --line-strong: rgba(238, 243, 234, 0.3);
  --link: var(--lime);
  --link-hover: var(--chalk);
  --accent: var(--orange);
  --focus: var(--dark-focus);
  --surface: rgba(238, 243, 234, 0.05);
  --primary-bg: var(--lime);
  --primary-text: var(--lime-ink);
  --primary-hover-bg: var(--lime-2);
  --primary-hover-text: var(--lime-ink);
  --photo-edge: inset 0 0 0 1px rgba(238, 243, 234, 0.08);
  color: var(--text);
}
.tone-forest { background: var(--forest); }
.tone-night { background: var(--night); }

.tone-lime {
  background: var(--lime);
  --text: var(--lime-ink);
  --text-2: #33410f;
  --line: rgba(20, 32, 0, 0.18);
  --line-strong: rgba(20, 32, 0, 0.4);
  --link: var(--lime-ink);
  --link-hover: var(--night);
  --accent: var(--lime-ink);
  --focus: var(--night);
  color: var(--text);
}

/* ---------- Type helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: var(--w-display-strong);
  font-size: var(--step-6);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
/* Eyebrow: sentence case in the text face with a small dot. Quiet enough
   to sit above every section without competing with the heading. */
.eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 var(--space-2);
  font-family: var(--font-text);
  font-weight: var(--w-semi);
  font-size: var(--step--1);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--accent);
}
.eyebrow::before { content: ""; flex: none; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }
.lede {
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  color: var(--text-2);
  max-width: 42ch;
}
.lede-sm { font-size: var(--step-0); color: var(--text-2); }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  font-weight: var(--w-semi);
  text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: translate var(--dur-fast) var(--ease-out); }
.link-arrow:hover::after { translate: 4px 0; }
.measure { max-width: var(--measure); }
.text-2 { color: var(--text-2); }
.center { text-align: center; margin-inline: auto; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.5rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-weight: var(--w-semi);
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn .icon-arrow { transition: translate var(--dur-base) var(--ease-out); }
.btn:hover .icon-arrow { translate: 3px 0; }

/* Primary: lime on dark tones, forest on paper (tokens.css --primary-*). */
.btn-primary {
  background: var(--primary-bg);
  color: var(--primary-text);
}
.btn-primary:hover { background: var(--primary-hover-bg); color: var(--primary-hover-text); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-secondary:hover {
  color: var(--text);
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.btn-dark { background: var(--night); color: var(--chalk); }
.btn-dark:hover { background: var(--forest); color: var(--chalk); }

.btn-sm { min-height: var(--tap); padding: 0.375rem 1.125rem; font-size: 1rem; }
.btn-lg { min-height: 3.5rem; padding: 0.625rem 1.75rem; font-size: 1.125rem; }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); border-color: var(--line-strong); }

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--lime-ink);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible {
  transform: none;
  color: var(--lime-ink);
  outline: 3px solid var(--night);
  outline-offset: 2px;
}

/* ---------- Header: transparent over the dark top, solid after scroll ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  isolation: isolate;
  /* Header breakpoints are container queries in rem, so they follow the
     text-size control: at 125% the sheet takes over sooner and nothing overflows. */
  container: header / inline-size;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
/* A soft scrim keeps the transparent header legible over photos. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem;
  z-index: -1;
  background: linear-gradient(rgba(7, 19, 15, 0.6), rgba(7, 19, 15, 0));
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.site-header.is-solid, .site-header.is-open {
  background: rgba(7, 19, 15, 0.94);
  border-bottom-color: var(--dark-line);
}
.site-header.is-solid { -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
/* The open sheet sits on solid night, no blur needed. */
.site-header.is-open { background: var(--night); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.is-solid::before, .site-header.is-open::before { opacity: 0; }

.header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap);
  color: var(--text);
  text-decoration: none;
  flex: none;
}
.brand:hover { color: var(--text); }
.brand-chip {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.brand-chip img { width: 100%; height: auto; }
.brand-word {
  font-family: var(--font-display);
  font-weight: var(--w-strong);
  font-size: 1.125rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; flex: 1; gap: var(--space-2); }
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nav-item { position: relative; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--tap);
  padding: 0 0.875rem;
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: var(--w-medium);
  font-size: 1.0625rem;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-link::-webkit-details-marker { display: none; }
.nav-link::marker { content: ""; }
.nav-link:hover { color: var(--text); background: rgba(238, 243, 234, 0.08); }
.nav-link[aria-current="page"], .nav-link[data-current] { color: var(--lime); }
.nav-link[aria-current="page"]::after, .nav-link[data-current]::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 0.45rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nav-drop .nav-link[data-current]::after { right: 2.1rem; }
.icon-chevron { transition: rotate var(--dur-base) var(--ease-out); }
.nav-drop[open] > .nav-link { background: rgba(238, 243, 234, 0.08); }
.nav-drop[open] .icon-chevron { rotate: 180deg; }

.nav-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  translate: -50% 0;
  z-index: var(--z-menu);
  display: grid;
  gap: var(--space-4);
  min-width: 18rem;
  padding: var(--space-3);
  background: var(--night-2);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.nav-panel-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); min-width: 39rem; left: -0.5rem; translate: none; }
.nav-drop[open] .nav-panel { animation: panel-in var(--dur-base) var(--ease-out); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.nav-col-label {
  margin: 0 0 var(--space-1);
  padding: 0 0.75rem;
  font-family: var(--font-text);
  font-weight: var(--w-semi);
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  color: var(--accent);
}
.nav-col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-col ul.nav-towns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: var(--w-medium);
  text-decoration: none;
  white-space: nowrap;
}
.nav-col a:hover { background: rgba(215, 255, 103, 0.08); color: var(--lime); }
.nav-col a[aria-current="page"] { color: var(--lime); background: rgba(215, 255, 103, 0.06); }
.nav-meta { color: var(--text-2); font-size: var(--step--1); font-weight: var(--w-text); }

.nav-tools { display: flex; align-items: center; gap: 0.375rem; }
.textsize-glyph { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--font-display); font-weight: var(--w-display); line-height: 1; }
.textsize-glyph span:first-child { font-size: 0.875rem; }
.textsize-glyph span:last-child { font-size: 1.1875rem; }

/* Theme icon shows the theme you would switch to. */
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: inline-block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: inline-block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

.nav-sheet-cta { display: none; }

.header-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
/* Always visible: a "Call" pill on phones and laptops, the full number on
   wide screens. Older renters look for the phone first. */
.header-phone {
  display: inline-flex;
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--lime-ink);
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { background: var(--lime-2); color: var(--lime-ink); }
.header-phone .icon { color: currentColor; }
.site-header .header-phone:not(:hover) { color: var(--lime-ink); }
.header-phone .hp-full { display: none; }
/* Next to the lime "Get a quote" button, the call pill steps back to an outline. */
@container header (min-width: 36rem) {
  .header-phone, .site-header .header-phone:not(:hover) { background: transparent; border: 1px solid var(--line-strong); color: var(--text); }
  .header-phone:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: var(--text); }
  .header-phone .icon { color: var(--lime); }
}
@container header (min-width: 84rem) {
  .header-phone { border: 0; }
  .header-phone, .site-header .header-phone:not(:hover) { padding: 0; background: none; color: var(--text); }
  .header-phone:hover { background: none; color: var(--lime); }
  .header-phone .icon { color: var(--lime); }
  .header-phone .hp-full { display: inline; }
  .header-phone .hp-short { display: none; }
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-weight: 600;
}
.menu-bars { position: relative; display: block; width: 1.25rem; height: 0.875rem; }
.menu-bars::before, .menu-bars::after, .menu-bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.menu-bars::before { top: 0; }
.menu-bars span { top: calc(50% - 1px); }
.menu-bars::after { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-bars::before { transform: translateY(0.375rem) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars span { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-bars::after { transform: translateY(-0.375rem) rotate(-45deg); }

/* Narrow headers: the nav becomes a full-height sheet hung from the header. */
@container header (max-width: 71.99rem) {
  .menu-toggle { display: inline-flex; }
  .site-nav { display: none; }

  .js .site-header.is-open .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    background: var(--night);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: sheet-in var(--dur-base) var(--ease-out);
  }

  .site-nav .nav-list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .site-nav .nav-item { border-bottom: 1px solid var(--dark-line); }
  .site-nav .nav-link {
    width: 100%;
    justify-content: space-between;
    min-height: 3.75rem;
    padding: 0 0.25rem;
    border-radius: 0;
    font-family: var(--font-display);
    font-weight: var(--w-display);
    font-size: var(--step-1);
    letter-spacing: var(--tr-snug);
  }
  .site-nav .nav-link:hover, .site-nav .nav-drop[open] > .nav-link { background: transparent; }
  .site-nav .nav-link[aria-current="page"]::after, .site-nav .nav-link[data-current]::after { display: none; }
  .site-nav .nav-link .icon-chevron { width: 20px; height: 20px; }

  .site-nav .nav-panel {
    position: static;
    translate: none;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: 0 0 var(--space-3);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .site-nav .nav-col-label { padding: 0; }
  .site-nav .nav-col a { padding-inline: 0; font-size: var(--step-0); }
  .site-nav .nav-col a:hover, .site-nav .nav-col a[aria-current="page"] { background: transparent; }

  .site-nav .nav-tools { margin-top: var(--space-4); gap: var(--space-2); }
  .site-nav .nav-sheet-cta { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
}
@container header (max-width: 35.99rem) {
  .header-quote { display: none; }
  .header-bar { gap: var(--space-2); }
  .header-actions { gap: 0.5rem; }
  .header-phone, .menu-toggle { padding-inline: 0.875rem; }
}
@container header (max-width: 27rem) {
  .brand-word span { display: none; } /* visual only: the link name stays "Mobility Concepts, home" */
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* No JavaScript: the header scrolls away and the nav shows as a plain list. */
html:not(.js) .site-header { position: absolute; }
@container header (max-width: 71.99rem) {
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .header-bar { flex-wrap: wrap; padding-block: var(--space-2); }
  html:not(.js) .site-nav { display: block; order: 3; flex-basis: 100%; }
  html:not(.js) .site-nav .nav-tools { display: none; }
  html:not(.js) .site-nav .nav-sheet-cta { display: none; }
}

/* ---------- Page head: breadcrumb and h1 on forest ---------- */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(var(--space-6), 6vw, var(--space-9))) 0 clamp(var(--space-7), 7vw, var(--space-9));
  background: var(--forest);
}
.page-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -18%;
  top: -55%;
  width: min(70rem, 95vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 107, 79, 0.55), rgba(13, 44, 34, 0) 62%);
  pointer-events: none;
}
.page-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--dark-line);
}
.page-title { font-size: var(--step-5); max-width: 18ch; }
.page-head .lede { margin-top: var(--space-3); }
.page-head-grid { display: grid; gap: var(--space-6); align-items: center; }
.page-head.has-photo { padding-bottom: 0; }
.page-head.has-photo::after { display: none; }
.page-head-figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-inline: calc(-1 * var(--gutter));
  background: var(--night-2);
}
.page-head-figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--photo-edge); pointer-events: none; }
.page-head-figure picture { display: block; height: 100%; }
/* The head photos are 4:5 portraits with the rider's face near the top
   and the wheels near the bottom, so the frame stays close to 4:5 and
   nothing important is cropped: 5:6 on phones, the full 4:5 on desktop. */
.page-head-figure:not(.is-video) { aspect-ratio: 5 / 6; }
.page-head-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* Video head (the scooter page): a 16:9 frame in the video's own green. */
.page-head-figure.is-video { aspect-ratio: 16 / 9; background: var(--video-green); }
.page-head-figure.is-video .loop-video { height: 100%; aspect-ratio: auto; }
@media (min-width: 56rem) {
  .page-head.has-photo { padding-top: calc(var(--header-h) + var(--space-5)); }
  .page-head.has-photo .page-head-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: end; }
  .page-head.has-photo .page-head-copy { align-self: center; padding-block: var(--space-5) clamp(var(--space-6), 5vw, var(--space-8)); }
  .page-head-figure {
    width: auto;
    margin: 0 calc(-1 * var(--bleed)) 0 0;
    justify-self: end;
    border-radius: var(--radius-xl) 0 0 0;
  }
  .page-head-figure:not(.is-video) {
    aspect-ratio: 4 / 5;
    height: min(40rem, calc(100svh - var(--header-h) - var(--space-5)));
  }
  .page-head.has-video .page-head-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .page-head-figure.is-video { width: calc(100% + var(--bleed)); justify-self: stretch; }
  .page-head.has-photo .page-title { font-size: var(--step-5); }
}

.crumbs { margin-block: calc(-1 * var(--space-1)) var(--space-3); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-inline: 0.5rem; color: var(--text-2); opacity: 0.7; }
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  color: var(--text-2);
  text-decoration: none;
}
.crumbs a:hover { color: var(--lime); text-decoration: underline; }
.crumbs a[aria-current="page"] { color: var(--text); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--night);
  padding: clamp(var(--space-7), 8vw, var(--space-9)) 0 var(--space-5);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: clamp(var(--space-6), 6vw, var(--space-8));
  border-bottom: 1px solid var(--dark-line);
}
.footer-phone {
  display: inline-block;
  /* The phone number is the signature of the footer. It scales past
     --step-6 on wide screens and stays on one line at 320px. */
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(2rem, 0.9rem + 6vw, 5.5rem);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 0.95;
  letter-spacing: var(--tr-display);
  color: var(--lime);
  text-decoration: none;
  white-space: nowrap;
  /* 48px tap target at the smallest size; padding, not line-height, so the
     tight display leading stays. */
  padding-block: 0.4rem;
}
.footer-phone:hover { color: var(--chalk); }
a.tnum[href^="tel:"] { display: inline-flex; align-items: center; min-height: 48px; }
.footer-area { margin-top: var(--space-3); color: var(--text-2); max-width: 40ch; }
.footer-title {
  margin-bottom: var(--space-2);
  font-size: var(--step-2);
  font-weight: var(--w-h2);
  letter-spacing: var(--tr-snug);
  color: var(--text);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
  padding-block: clamp(var(--space-6), 6vw, var(--space-8));
}
@media (min-width: 56rem) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); }
}
.footer-brand p { margin-top: var(--space-3); color: var(--text-2); max-width: 32ch; }
.footer-nav {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.footer-label {
  margin-bottom: var(--space-1);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  letter-spacing: 0.01em;
  color: var(--text-2);
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col a, .footer-base a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text);
  text-decoration: none;
}
.footer-col a:hover, .footer-base a:hover { color: var(--lime); text-decoration: underline; }
.footer-col a[aria-current="page"] { color: var(--lime); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--dark-line);
  font-size: var(--step--1);
  color: var(--text-2);
}
.footer-base ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: 0; padding: 0; list-style: none; }
.footer-base a { color: var(--text-2); }

/* ---------- Scroll reveal ---------- */
/* Motion only, never transparency: a block caught mid-entrance by a fast
   scroll, a capture or a slow device is still fully readable. */
@keyframes reveal {
  from { translate: 0 var(--reveal-y); }
  to { translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }
  }
  /* Fallback: site.js adds .reveal-ready to <html> and .is-in as items enter.
     If site.js never runs, nothing is hidden. */
  @supports not (animation-timeline: view()) {
    .reveal-ready [data-reveal] {
      translate: 0 var(--reveal-y);
      transition: translate var(--dur-slow) var(--ease-out);
    }
    .reveal-ready [data-reveal].is-in { translate: 0 0; }
  }
}

/* ---------- Reduced motion: everything settles at once ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; translate: none !important; animation: none !important; }
}

/* ---------- Windows high contrast ---------- */
@media (forced-colors: active) {
  .btn, .icon-btn, .menu-toggle { border: 2px solid ButtonText; }
  .nav-panel { border: 1px solid CanvasText; }
  :focus-visible { outline-color: Highlight; }
  .brand-chip { forced-color-adjust: none; }
}

/* ---------- Print ---------- */
@media print {
  @page { margin: 1.5cm; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 12pt; line-height: 1.45; }
  .skip-link, .site-header, .nav-sheet-cta, .footer-top .btn, .footer-nav, .footer-brand .brand-chip,
  .btn-secondary, [data-no-print] { display: none !important; }
  .page-head, .tone-forest, .tone-night, .tone-lime, .tone-paper-2, .site-footer {
    background: none !important;
    --text: #000;
    --text-2: #333;
    --line: #999;
    --link: #000;
    --accent: #000;
    color: #000 !important;
  }
  .page-head { padding: 0 0 1rem; }
  .page-head::before, .page-head::after { display: none; }
  .section { padding-block: 1rem; }
  .footer-phone { color: #000 !important; font-size: 20pt; }
  a { color: #000 !important; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  h1, h2, h3, h4 { break-after: avoid; }
  img, figure, table, .surface { break-inside: avoid; }
  [data-reveal] { opacity: 1 !important; translate: none !important; animation: none !important; }
}

/* ========== Blocks (web/src/blocks.mjs) ==========================
   One section per block. Tokens only, no new colors: scrims reuse
   night (7, 19, 15) and the forest-3 glow (31, 107, 79). Lime and
   orange appear as text only on dark surfaces; on paper the accent
   is orange-ink and links are forest-3.
   ================================================================ */

/* ---------- Block: hero ---------- */
/* Three layouts, picked in blocks.mjs from the photo's shape:
   .hero-stage  landscape photo: headline on night, photo as a wide band
                that overlaps the next section, heads and all.
   .hero-split  portrait photo: copy left, framed photo right.
   .hero-plain  no photo: the forest page-head look.
   Every hero brings the page h1 and clears the fixed header itself. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(var(--space-6), 7vw, var(--space-10))) 0 clamp(var(--space-7), 7vw, var(--space-9));
  background: var(--night);
}
/* A low forest glow, top right: the only ornament. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -20%;
  top: -60%;
  width: min(72rem, 100vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 107, 79, 0.5), rgba(13, 44, 34, 0) 62%);
  pointer-events: none;
}
.hero-plain { background: var(--forest); }
.hero-title {
  max-width: 17ch;
  font-size: var(--step-6);
  font-weight: var(--w-display-strong);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.hero .eyebrow { margin-bottom: var(--space-3); }
.hero-lede { margin-top: var(--space-3); max-width: 40ch; color: var(--text-2); }
.hero-actions { margin-top: clamp(var(--space-4), 3vw, var(--space-5)); --cluster-gap: var(--space-2); }
.hero-media { display: block; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure { position: relative; overflow: hidden; background: var(--night-2); }
.hero-figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--photo-edge); pointer-events: none; }
/* Optional hero video (hero({ video })): the loop video fills the frame. */
.hero-figure.has-video .loop-video { position: absolute; inset: 0; aspect-ratio: auto; }

/* Stage: the headline takes the full width, lede and actions share a row
   under a hairline, the photo runs below and overlaps the next section. */
.hero-stage {
  --overlap: clamp(4rem, 9vw, 9rem);
  padding-bottom: 0;
  background: linear-gradient(var(--night) 0 calc(100% - var(--overlap)), var(--bg) 0);
}
.hero-stage .hero-title { max-width: 20ch; }
.hero-stage .hero-aside {
  display: grid;
  gap: var(--space-4);
  margin-top: clamp(var(--space-5), 4vw, var(--space-7));
  padding-top: clamp(var(--space-4), 3vw, var(--space-5));
  border-top: 1px solid var(--dark-line);
}
.hero-stage .hero-lede { margin: 0; }
.hero-stage .hero-actions { margin: 0; }
@media (min-width: 56rem) {
  .hero-stage .hero-aside { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-8); }
}
.hero-stage .hero-figure {
  width: min(100% - 2 * var(--gutter), var(--container-wide) - 2 * var(--space-6));
  margin: clamp(var(--space-6), 5vw, var(--space-8)) auto 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.hero-stage .hero-media img { object-position: center 35%; }
@media (min-width: 40rem) { .hero-stage .hero-figure { aspect-ratio: 2 / 1; } }
@media (min-width: 64rem) { .hero-stage .hero-figure { aspect-ratio: 12 / 5; border-radius: var(--radius-xl); } }

/* Split: copy left, the photo bleeding off the right edge and sitting on
   the bottom of the band. Phones: copy, then the photo edge to edge.
   --bleed is the distance from the container edge to the viewport edge. */
.hero-split, .page-head.has-photo { --bleed: calc((100vw - min(100vw - 2 * var(--gutter), var(--container))) / 2); }
.hero-split { padding-bottom: 0; }
.hero-grid { display: grid; gap: var(--space-6); align-items: center; }
.hero-split .hero-title { font-size: var(--step-5); max-width: 15ch; }
.hero-split .hero-figure { aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--gutter)); }
.hero-split .hero-media img { object-position: center 30%; }
.hero-split .hero-figure.hero-focus-face { aspect-ratio: 1 / 1; }
.hero-split .hero-focus-face .hero-media img { object-position: 40% 8%; }
@media (min-width: 56rem) {
  .hero-split { padding-top: calc(var(--header-h) + var(--space-5)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: end; }
  .hero-split .hero-copy { align-self: center; padding-block: var(--space-6) clamp(var(--space-7), 6vw, var(--space-9)); }
  .hero-split .hero-figure,
  .hero-split .hero-figure.hero-focus-face {
    aspect-ratio: 4 / 5;
    max-height: min(52rem, calc(100svh - var(--header-h) - var(--space-5)));
    width: calc(100% + var(--bleed));
    margin: 0 calc(-1 * var(--bleed)) 0 0;
    border-radius: var(--radius-xl) 0 0 0;
  }
  .hero-split .hero-focus-face .hero-media img { object-position: 40% 20%; }
}

/* ---------- Block: doors ---------- */
/* Three photo tiles. The whole tile is the link (the title link stretches
   over it). The caption band is a near-solid night panel, so the chalk
   text keeps its contrast over any photo. */
.door-list { margin: 0; padding: 0; list-style: none; --grid-gap: clamp(var(--space-2), 1.6vw, var(--space-3)); }
@media (min-width: 48rem) and (max-width: 63.99rem) { .door-list { grid-template-columns: 1fr; } }
.door {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--night);
  color: var(--chalk);
}
@media (min-width: 40rem) and (max-width: 63.99rem) { .door { aspect-ratio: 16 / 9; } }
@media (min-width: 64rem) { .door { aspect-ratio: 4 / 5; } }
.door-media { position: absolute; inset: 0; z-index: -1; display: block; }
.door-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: scale var(--dur-slow) var(--ease-out); }
.door-band {
  display: grid;
  gap: 0.375rem;
  padding: calc(var(--space-6) + var(--space-1)) clamp(var(--space-3), 2.4vw, var(--space-4)) clamp(var(--space-3), 2.4vw, var(--space-4));
  background: linear-gradient(to top, rgba(7, 19, 15, 0.92) 0, rgba(7, 19, 15, 0.92) calc(100% - var(--space-6)), rgba(7, 19, 15, 0) 100%);
}
.door-title { font-size: var(--step-2); font-weight: var(--w-display); }
.door-title a { color: var(--chalk); text-decoration: none; }
.door-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.door-title a:focus-visible { outline: none; }
.door-title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-lg); }
.door-text { color: var(--chalk-2); font-size: 1rem; line-height: 1.5; max-width: 36ch; }
.door-cue { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem; font-weight: var(--w-semi); font-size: 1rem; color: var(--lime); }
.door-cue .icon-arrow { width: 1.125rem; height: 1.125rem; transition: translate var(--dur-base) var(--ease-out); }
.door:hover .door-cue { text-decoration: underline; text-underline-offset: 0.2em; }
.door:hover .icon-arrow { translate: 3px 0; }
/* Phones: photo on top, the caption band solid underneath, so nothing in
   the photo hides behind the text. */
@media (max-width: 39.99rem) {
  .door { aspect-ratio: auto; }
  .door-media { position: relative; z-index: 0; aspect-ratio: 16 / 10; }
  .door-band { padding-top: var(--space-3); background: var(--night); }
}

/* ---------- Block: proof strip ---------- */
.proof-list {
  display: grid;
  gap: var(--space-6) var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.proof-item { display: grid; gap: var(--space-3); align-content: start; }
.proof-item blockquote { margin: 0; }
.proof-item blockquote p {
  font-family: var(--font-display);
  font-weight: var(--w-strong);
  font-size: var(--step-2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}
.proof-item blockquote p::before { content: "\201C"; color: var(--accent); }
.proof-item blockquote p::after { content: "\201D"; color: var(--accent); }
.proof-item figcaption { color: var(--text-2); }

/* ---------- Block: next event card ---------- */
/* A forest card (tone-forest on the element) that can sit on any section. */
.next-event {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: clamp(var(--space-5), 4.5vw, var(--space-7));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
}
.next-event::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -30%;
  bottom: -70%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 107, 79, 0.65), rgba(13, 44, 34, 0) 65%);
  pointer-events: none;
}
.next-event-main { display: grid; gap: var(--space-2); justify-items: start; }
.next-event .eyebrow { margin: 0 0 var(--space-2); }
.next-event-name { font-size: var(--step-4); max-width: 16ch; }
.next-event-when {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  color: var(--lime);
}
.next-event-where { color: var(--text-2); max-width: 40ch; padding-top: var(--space-2); border-top: 1px solid var(--line); width: 100%; }
.next-event-link { margin-top: var(--space-3); }

/* State Fair extras: the map thumbnail beside the event, the gate badges
   in a row under both. The extra wrapper is display: contents, so its two
   parts sit on the card's own grid. */
.next-event.has-extra { grid-template-columns: minmax(0, 1fr) clamp(6.5rem, 26%, 10.5rem); grid-template-areas: "main map" "gates gates"; column-gap: var(--space-4); align-items: start; }
.next-event.has-extra .next-event-main { grid-area: main; }
.next-event-extra { display: contents; }
.next-event-gates { grid-area: gates; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.next-event-map { grid-area: map; }
.next-event-extra[hidden] { display: none; }
.next-event-gates { display: grid; gap: var(--space-2); width: 100%; }
.next-event-gates-title { font-weight: var(--w-semi); font-size: 1rem; color: var(--text); }
.next-event-gates-note { color: var(--text-2); font-size: 1rem; max-width: 46ch; }
.gate-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.gate-badge {
  display: grid;
  place-items: center;
  align-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  line-height: 1;
}
.gate-badge-label { font-size: 0.875rem; font-weight: var(--w-semi); color: var(--text-2); }
.gate-badge-num { margin-top: 0.2rem; font-family: var(--font-display); font-weight: var(--w-display-strong); font-size: var(--step-2); }
.gate-badge.is-main { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.gate-badge.is-main .gate-badge-label { color: var(--lime-ink); }
.next-event-map { display: grid; gap: 0.5rem; color: var(--text); text-decoration: none; border-radius: var(--radius-sm); }
.next-event-map-frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-2); }
.next-event-map-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; transition: scale var(--dur-slow) var(--ease-out); }
.next-event-map-label { display: inline-flex; align-items: center; gap: 0.25rem; min-height: var(--tap); font-weight: var(--w-semi); font-size: 1rem; color: var(--lime); }
.next-event-map:hover .next-event-map-label { text-decoration: underline; }
/* Phones: one column. The map becomes a small row under the gates. */
@media (max-width: 35.99rem) {
  .next-event.has-extra { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "gates" "map"; }
  .next-event-map { grid-template-columns: 4.5rem auto; align-items: center; justify-content: start; column-gap: var(--space-2); margin-top: var(--space-3); }
  .gate-badge { width: 3.4rem; height: 3.4rem; }
}

/* ---------- Block: FAQ ---------- */
/* details rows with 64px summaries and a plus that turns into a cross. */
.faq { display: grid; gap: clamp(var(--space-6), 5vw, var(--space-8)); }
.faq-topic { font-size: var(--step-2); margin-bottom: var(--space-2); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 4.5rem;
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  list-style: none;
  cursor: pointer;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:focus-visible { outline-offset: 2px; border-radius: var(--radius-xs); }
.faq-item .icon-plus {
  box-sizing: content-box;
  padding: 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: rotate var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.faq-item > summary:hover .icon-plus { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-text); }
.faq-a { color: var(--text-2); }
.faq-item[open] .icon-plus { rotate: 45deg; }
.faq-a { max-width: var(--measure); padding-bottom: var(--space-4); }
@media (min-width: 40rem) { .faq-a { padding-right: calc(var(--tap) + var(--space-3)); } }
.faq-a p + p { margin-top: 0.75em; }

/* ---------- Block: quote form ---------- */
/* Large labelled fields. Inputs are 56px tall, choices are whole-row
   targets, input borders keep 3:1 against the surface. */
.quote-form { position: relative; display: grid; gap: var(--space-5); }
.form-grid { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .field-wide { grid-column: 1 / -1; }
}
.quote-form .field { display: grid; gap: 0.5rem; align-content: start; min-width: 0; margin: 0; }
.quote-form .field > label,
.quote-form legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0;
  font-weight: var(--w-strong);
  line-height: var(--lh-snug);
}
.quote-form legend { margin-bottom: 0.75rem; }
.field-tag { font-size: var(--step--1); font-weight: var(--w-medium); color: var(--text-2); }
.field-hint { margin-top: -0.25rem; font-size: 1rem; color: var(--text-2); }
.quote-form input[type="text"],
.quote-form input[type="tel"],
.quote-form input[type="email"],
.quote-form textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid color-mix(in srgb, var(--text) 55%, transparent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--step-0);
  line-height: var(--lh-snug);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.quote-form textarea { min-height: 8.5rem; resize: vertical; }
.quote-form input:hover, .quote-form textarea:hover { border-color: var(--text-2); }
.quote-form input:focus-visible, .quote-form textarea:focus-visible { border-color: var(--text); outline-offset: 2px; }
.quote-form input:user-invalid, .quote-form textarea:user-invalid { border-color: var(--accent); }

.quote-form fieldset.choices { min-width: 0; padding: 0; border: 0; }
.choice-grid { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.choice {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.5rem;
  padding: 0.625rem 1rem;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--text-2); }
.choice input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--link);
  cursor: pointer;
}
.choice input:focus-visible { outline: none; }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice:has(input:checked) { border-color: var(--link); background: color-mix(in srgb, var(--link) 9%, var(--surface)); }
.consent .choice { align-items: flex-start; font-weight: var(--w-text); }
.consent .choice input { margin-top: 0.1rem; }

/* Honeypot: the visually-hidden pattern for sighted visitors, aria-hidden
   on the wrapper for screen readers, tabindex -1 on the input. Not
   display:none, so bots that skip hidden fields still fill it. It is
   clipped inside .quote-form (position: relative), never pushed off
   screen, so it cannot cause horizontal scroll. */
.hp-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.form-alt { color: var(--text-2); }
.form-note,
.form-status {
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font-weight: var(--w-medium);
}
.form-status:empty { display: none; }

/* Error summary and per-field errors. quote.js unhides and fills them. */
.quote-errors {
  padding: var(--space-3);
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.quote-errors:focus-visible { outline-offset: 3px; }
.quote-errors ul { margin-top: var(--space-1); }
.quote-errors a { color: var(--text); font-weight: var(--w-strong); }
.field-error { font-size: 1rem; font-weight: var(--w-strong); color: var(--accent); }
.quote-form [aria-invalid="true"] { border-color: var(--accent); }
[hidden].quote-errors, [hidden].field-error { display: none; }

/* ---------- Block: CTA band ---------- */
/* A contained forest panel on the page background, lime on dark only. */
.cta-band-inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 6vw, var(--space-9)) clamp(var(--space-4), 6vw, var(--space-9));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
}
.cta-band-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -15%;
  top: -80%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 107, 79, 0.6), rgba(13, 44, 34, 0) 65%);
  pointer-events: none;
}
.cta-band-copy { flex: 1 1 26rem; }
.cta-band-copy h2 { font-size: var(--step-5); max-width: 14ch; }
.cta-band-copy p { margin-top: var(--space-3); font-size: var(--step-1); line-height: var(--lh-snug); color: var(--text-2); max-width: 34ch; }
.cta-band-actions { --cluster-gap: var(--space-2); }

/* ---------- Block: cards ---------- */
/* With a photo, a card is an editorial tile: the framed photo, then the
   caption on the page itself. Without one, it is a quiet surface box. */
.cards { margin: 0; padding: 0; list-style: none; --grid-gap: clamp(var(--space-4), 3vw, var(--space-5)); }
@media (min-width: 64rem) { .cards[data-n="2"], .cards[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
}
.card:not(:has(.card-media)) {
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card-media { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-2); }
.card-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--photo-edge); pointer-events: none; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); }
.card-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); padding: clamp(var(--space-3), 2.5vw, var(--space-4)); }
.card:has(.card-media) .card-body { padding: var(--space-3) 0 0; }
.card-eyebrow {
  font-family: var(--font-text);
  font-weight: var(--w-semi);
  font-size: var(--step--1);
  color: var(--accent);
}
.card-title { font-size: var(--step-2); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.card-title a { color: var(--text); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-title a:focus-visible { outline: none; }
.card-title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-lg); }
.card-text { color: var(--text-2); max-width: 38ch; }
/* The whole card is the link (the title link stretches over it). The cue
   is a plain text affordance, not a second target. */
.card-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: var(--space-1);
  font-size: 1rem;
  font-weight: var(--w-semi);
  color: var(--link);
}
.card-cue .icon-arrow { width: 1.125rem; height: 1.125rem; transition: translate var(--dur-base) var(--ease-out); }
.card.is-link:not(:has(.card-media)):hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.card.is-link:hover .card-cue { text-decoration: underline; text-underline-offset: 0.2em; }
.card.is-link:hover .icon-arrow { translate: 2px 0; }
@media (min-width: 64rem) {
  .cards:has(.card-media) { --grid-gap: var(--space-3); }
  .card-media { aspect-ratio: 4 / 5; }
}
/* Detail: photos lean in on hover, only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .card.is-link:hover .card-media img,
  .door:hover .door-media img,
  .next-event-map:hover img { scale: 1.03; }
}

/* ---------- Blocks: high contrast and print ---------- */
@media (forced-colors: active) {
  .door-list, .card, .choice, .next-event, .form-card, .cta-band-inner, .quote-form input, .quote-form textarea { border: 2px solid CanvasText; }
  .hero-figure::after { box-shadow: none; }
}
@media print {
  .hero { min-height: 0 !important; padding: 0 0 1rem; background: none !important; color: black; }
  .hero-media, .hero::after, .hero::before, .next-event::before, .hp-field, .cta-band, .door-cue, .card-cue, .form-actions .btn { display: none !important; }
  .next-event { border: 1px solid gray; --text: black; --text-2: black; color: black; background: none !important; }
  .next-event-when { color: black; }
}

/* ========== pages: rentals (web/src/pages/home.mjs, rentals.mjs) ========== */
/* Numbered steps: three across on wide screens, a hairline above each. */
.steps { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-5), 4vw, var(--space-8)); } }
.step { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--line-strong); }
.step-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-5);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--link);
}
.step-title { font-size: var(--step-2); margin-top: var(--space-2); }
.step p { color: var(--text-2); max-width: 34ch; }

/* The three steps as one compact line (home close). */
.step-line-wrap { padding-block: var(--space-2); border-block: 1px solid var(--line); }
.step-line-title { font-weight: var(--w-semi); font-size: 1rem; color: var(--text-2); margin-bottom: var(--space-1); }
.step-line { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; }
.step-line li { display: inline-flex; align-items: center; gap: 0.625rem; font-weight: var(--w-medium); }
.step-line-num {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary-text);
  font-size: 0.875rem;
  font-weight: var(--w-strong);
}

/* Town and equipment links as large pills: 48px targets. */
.link-pills { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.link-pills a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-weight: var(--w-medium);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.link-pills a:hover { border-color: var(--text); }
.link-pills a[aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Town index: one row per town, the whole row a link. */
.town-index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.town-index li { border-bottom: 1px solid var(--line); }
.town-index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name go" "note go";
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.town-name { grid-area: name; font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--step-2); letter-spacing: var(--tr-snug); line-height: 1.2; }
.town-note { grid-area: note; margin-top: 0.25rem; color: var(--text-2); }
.town-go {
  grid-area: go;
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--link);
}
.town-go .icon-arrow { transition: translate var(--dur-base) var(--ease-out); }
.town-index a:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.town-index a:hover .icon-arrow { translate: 4px 0; }
.town-index a:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm); }
@media (min-width: 48rem) {
  .town-index a {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) auto;
    grid-template-areas: "name note go";
    padding: var(--space-3) var(--space-2);
  }
  .town-note { margin: 0; }
}

/* Facts: a ticked list (equipment rules) and a definition list (town). */
.fact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.fact-list li { position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-5); border-bottom: 1px solid var(--line); max-width: var(--measure-narrow); }
.fact-list li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: calc(var(--space-2) + 0.5em);
  width: 0.75rem;
  height: 0.375rem;
  border-left: 2px solid var(--link);
  border-bottom: 2px solid var(--link);
  rotate: -45deg;
}
.facts { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; }
.facts > div { display: grid; gap: 0.25rem; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt { font-weight: var(--w-semi); font-size: var(--step--1); color: var(--accent); }
.facts dd { margin: 0; }
.town-facts h3 { font-size: var(--step-2); }

.h3 { font-size: var(--step-2); letter-spacing: var(--tr-snug); }
.home-towns {
  display: grid;
  gap: var(--space-3);
  margin-top: clamp(var(--space-7), 6vw, var(--space-9));
  padding-top: clamp(var(--space-5), 4vw, var(--space-6));
  border-top: 1px solid var(--line);
}
.home-towns h3 { font-size: var(--step-2); }
@media (min-width: 64rem) {
  .home-towns { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); align-items: start; column-gap: var(--space-8); }
  .home-towns h3 { grid-row: span 2; max-width: 16ch; }
}
.unsure-aside { background: var(--surface); }
@media (min-width: 56rem) {
  .unsure-aside { margin-top: var(--space-6); }
}

/* FAQ sections: heading left (sticky on wide screens), answers right. */
.faq-layout { display: grid; gap: var(--space-6); }
.faq-head h2 { max-width: 14ch; }
@media (min-width: 64rem) {
  .faq-layout { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); column-gap: var(--space-9); align-items: start; }
  .faq-head { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* Quote form on a raised card. */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  box-shadow: var(--shadow-2);
}
@media (min-width: 56rem) {
  .quote-section .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .quote-section .split > .stack { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* An editorial photo with a fixed crop, so nothing shifts on load. */
.photo-frame { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-2); }
.photo-frame picture { display: block; height: 100%; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Crew portraits: a staggered three-column mosaic. */
.crew-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.4vw, var(--space-3));
  margin: 0;
  padding: 0;
  list-style: none;
}
.crew-mosaic li:nth-child(3n + 2) { translate: 0 var(--space-4); }
.crew-portrait { position: relative; margin: 0; aspect-ratio: 5 / 6; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-2); }
.crew-portrait::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--photo-edge); pointer-events: none; }
.crew-portrait picture { display: block; height: 100%; }
.crew-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
@media (min-width: 56rem) {
  .split-crew { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

@media print {
  .link-pills a { border: 0; padding: 0; min-height: 0; }
  .photo-frame, .crew-mosaic, .page-head-figure, .hero-figure, .town-go { display: none; }
  .form-card { border: 0; padding: 0; box-shadow: none; }
}

/* Phones: photo cards turn into compact rows (photo left, caption right),
   so three equipment tiles fit in about one screen instead of three. */
@media (max-width: 39.99rem) {
  .cards { --grid-gap: var(--space-3); }
  .card:has(.card-media) { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
  .card:has(.card-media) .card-media { flex: 0 0 38%; aspect-ratio: 1; border-radius: var(--radius-md); }
  .card:has(.card-media) .card-body { padding: 0; }
  .card:has(.card-media) .card-title { font-size: var(--step-1); }
  .card:has(.card-media) .card-text { font-size: 1rem; }
  .card:has(.card-media) .card-cue { min-height: var(--tap); padding-top: 0; }
}

/* ========== Hero headline build (site.js) ==========================
   The h1 is visible from first paint and never hidden or faded. site.js
   wraps each word in .hw (layout-neutral) and adds html.hero-build. Only
   when site.js runs early (before first paint is likely), it also adds
   html.hero-rise: a transform-only rise, word by word, done by 780ms.
   No decorative underline: the lime accent lives on the phone number.
   Nothing runs under prefers-reduced-motion. The hero image is untouched. */
.hero-title .hw { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-rise .hero-title .hw {
    animation: hero-word 420ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * var(--stagger, 40ms));
  }
}
@keyframes hero-word {
  from { translate: 0 0.22em; }
  to { translate: 0 0; }
}

/* ========== pages: events, partners, company ======================= */
/* Event index: one row per event. Dates, name and city, summary, arrow. */
.event-index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.event-index li { border-bottom: 1px solid var(--line); }
.event-index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "when go" "name go" "summary go";
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 0.25rem;
  padding: var(--space-3) var(--space-1);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.event-when { grid-area: when; font-size: var(--step--1); font-weight: var(--w-semi); color: var(--accent); }
.event-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--step-2); letter-spacing: var(--tr-snug); line-height: 1.2; }
.event-city { font-family: var(--font-text); font-weight: var(--w-medium); font-size: var(--step--1); letter-spacing: 0; color: var(--text-2); }
.event-summary { grid-area: summary; color: var(--text-2); max-width: 60ch; }
.event-index .town-go { grid-area: go; }
.event-index a:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.event-index a:hover .icon-arrow { translate: 4px 0; }
.event-index a:focus-visible { outline-offset: -3px; border-radius: var(--radius-sm); }
@media (min-width: 56rem) {
  .event-index a {
    grid-template-columns: 12rem minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
    grid-template-areas: "when name summary go";
    column-gap: var(--space-5);
    padding: var(--space-4) var(--space-2);
  }
  .event-name { flex-direction: column; gap: 0.25rem; }
}

/* Event facts: a hairline strip under the page head. */
.event-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.event-facts > div { display: grid; gap: 0.375rem; align-content: start; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--line); }
.event-facts dt { font-size: var(--step--1); font-weight: var(--w-semi); color: var(--accent); }
.event-facts dd { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--step-1); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); }
@media (min-width: 64rem) {
  .event-facts > div + div { padding-left: var(--space-4); border-left: 1px solid var(--line); }
  .event-facts > div { border-bottom: 0; padding-bottom: 0; }
}
.event-facts-band { padding-bottom: 0; }
.event-facts a { white-space: nowrap; }

/* Two ticked lists side by side. */
.two-lists { --grid-gap: clamp(var(--space-5), 5vw, var(--space-8)); }
@media (min-width: 48rem) { .two-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.two-lists .h3 { margin-bottom: var(--space-1); }

/* Status panel: a contained forest strip with one action. */
.status-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
}
.status-panel .stack { flex: 1 1 24rem; }

/* State Fair recap: four figures on a hairline row. Counts of days, gates
   and equipment only, never revenue or rentals. */
.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); margin: 0; }
@media (min-width: 56rem) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }
.stat { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--line-strong); }
.stat dd { display: contents; }
.stat-num { order: 1; }
.stat dt { order: 2; margin-top: var(--space-1); font-weight: var(--w-semi); color: var(--text); }
.stat-text { order: 3; }
.stat-num { font-family: var(--font-display); font-weight: 300; font-size: var(--step-6); line-height: 1; letter-spacing: -0.04em; color: var(--link); }
.stat-text { color: var(--text-2); font-size: 1rem; max-width: 28ch; }
.stat-cta { margin-top: clamp(var(--space-6), 5vw, var(--space-8)); }

/* Gates: numbered rows, the main tent picked out. */
.gate-list { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.gate-list li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  padding: 0.75rem var(--space-2) 0.75rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text-2);
}
.gate-copy strong { display: block; color: var(--text); font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--tr-snug); }
.gate-num {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--step-1);
}
.gate-list li.is-main { border-color: var(--primary-bg); box-shadow: var(--shadow-1); }
.gate-list li.is-main .gate-num { background: var(--primary-bg); color: var(--primary-text); }
.gate-list li.is-remote { background: transparent; border-style: dashed; }

.notice {
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  max-width: var(--measure);
}

/* Fair map: a framed figure. On the map page, map left and gates right. */
.map-frame { margin: 0; }
.map-frame img { width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-2); }
.map-frame a { display: block; border-radius: var(--radius-lg); }
.map-frame figcaption { margin-top: var(--space-2); color: var(--text-2); font-size: 1rem; max-width: 52ch; }
.map-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 56rem) {
  .map-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(var(--space-6), 6vw, var(--space-9)); }
  .map-side { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
  .fair-where { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* Definition list on a dark tone. */
.facts-dark { margin: 0; }
.facts-dark dd { font-size: var(--step-1); line-height: var(--lh-snug); }

/* Partners: four steps, two by two, then four across. */
@media (min-width: 40rem) { .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } }
@media (min-width: 72rem) { .steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Pickup guide: a sticky aside and numbered sections. */
.guide-layout { display: grid; gap: var(--space-6); }
@media (min-width: 56rem) {
  .guide-layout { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); column-gap: var(--space-9); align-items: start; }
  .guide-aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
.guide-steps { display: grid; gap: 0; }
.guide-step { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); padding-block: var(--space-5); border-top: 1px solid var(--line-strong); }
.guide-step:first-child { padding-top: 0; border-top: 0; }
.guide-step .step-num { grid-row: span 3; font-size: var(--step-4); }
.guide-step > :not(.step-num) { grid-column: 2; }
.guide-list { margin: 0; padding-left: 1.1em; display: grid; gap: 0.5rem; max-width: var(--measure); }
.guide-list li::marker { color: var(--link); }
@media (max-width: 39.99rem) {
  .guide-step { grid-template-columns: 1fr; }
  .guide-step .step-num { grid-row: auto; }
  .guide-step > :not(.step-num) { grid-column: 1; }
}

/* About: logo panel and the full crew grid. */
.logo-panel { margin: 0; display: grid; place-items: center; padding: clamp(var(--space-5), 6vw, var(--space-8)); background: var(--surface); }
.logo-panel img { width: min(100%, 28rem); height: auto; }
.crew-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.5rem, 1.4vw, var(--space-3)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .crew-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .crew-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Contact: the number, large. */
.contact-phone {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--step-4);
  letter-spacing: var(--tr-heading);
  color: var(--text);
  text-decoration: none;
}
.contact-phone:hover { color: var(--link); }

/* Quote form success (quote.js). */
.form-status.is-success { display: grid; gap: 0.25rem; border-left-color: var(--link); font-weight: var(--w-text); }
.form-status.is-success strong { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--step-1); }

@media print {
  .site-header, .site-footer, [data-print], .guide-aside .link-arrow, .stat-cta { display: none !important; }
  .map-layout, .guide-layout { display: block; }
  .map-frame img { box-shadow: none; }
  .gate-list li { break-inside: avoid; }
}

/* ---------- Loop video (lib/video.mjs, site.js initLoopVideos) ----------
   The poster shows until site.js attaches the sources; reduced-motion and
   Save-Data visitors only ever see the poster. --video-green (tokens.css)
   is sampled from the animation's background, so the frame has no edge. */
.loop-video { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--video-green); }
.loop-video-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.loop-video-toggle {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(238, 243, 234, 0.4);
  border-radius: 50%;
  background: rgba(1, 20, 15, 0.7);
  color: var(--chalk);
  cursor: pointer;
}
.loop-video-toggle:hover { background: rgba(1, 20, 15, 0.92); }
.loop-video-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.loop-video-toggle[hidden] { display: none; }
.loop-video-icon-play, .loop-video.is-paused .loop-video-icon-pause { display: none; }
.loop-video.is-paused .loop-video-icon-play { display: block; }

/* ---------- Block: scooter showpiece ----------
   Full-bleed band in the video's own green. The video's edges fade into
   the band, so there is no box. Copy beside it on desktop, above on phones. */
.showpiece { background: var(--video-green); padding-block: clamp(var(--space-7), 7vw, var(--space-9)); overflow: hidden; }
.showpiece-grid { display: grid; gap: var(--space-5); align-items: center; }
.showpiece-copy h2 { max-width: 14ch; }
.showpiece-video { margin-inline: calc(-1 * var(--gutter)); background: transparent; }
.showpiece-video .loop-video-media {
  -webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent), linear-gradient(to bottom, transparent, black 9%, black 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent), linear-gradient(to bottom, transparent, black 9%, black 91%, transparent);
  mask-composite: intersect;
}
@media (min-width: 56rem) {
  .showpiece-grid { grid-template-columns: minmax(15rem, 0.75fr) minmax(0, 2fr); column-gap: clamp(var(--space-5), 3vw, var(--space-7)); }
  .showpiece-video { margin-inline: 0 calc(-1 * var(--gutter)); }
}
@media print {
  .showpiece, .loop-video-toggle { display: none !important; }
}

/* ---------- Block: Hitchpost on /partners/ (pages/partners.mjs) ----------
   A sample gate record on a forest panel beside the organizer features.
   The record is fully written in the markup. With motion welcome, site.js
   (initRecord) lets its lines write in one after another as it comes into
   view. Without JS or under reduced motion it is simply there. */
.hp-grid { display: grid; gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: start; }
.hp-record { margin: 0; display: grid; gap: var(--space-2); }
.hp-record-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-3), 3vw, var(--space-5));
  box-shadow: var(--shadow-3);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(215, 255, 103, 0.09), transparent 60%),
    var(--forest);
}
.hp-record-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--line);
}
.hp-record-title { margin: 0; font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--step-1); letter-spacing: var(--tr-snug); }
.hp-record-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(241, 154, 62, 0.45);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: var(--w-semi);
  color: var(--orange);
}
.hp-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }
.hp-record-lines { margin: 0; padding: 0; list-style: none; counter-reset: hp; }
.hp-line {
  counter-increment: hp;
  display: grid;
  grid-template-columns: 1.5rem 3.25rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.hp-line:last-child { border-bottom: 0; padding-bottom: 0; }
.hp-line::before { content: counter(hp); font-size: var(--step--1); color: var(--text-2); font-variant-numeric: tabular-nums; }
.hp-time { font-size: var(--step--1); font-weight: var(--w-semi); color: var(--lime); }
.hp-entry { display: grid; gap: 0.125rem; }
.hp-unit { font-weight: var(--w-medium); }
.hp-detail { color: var(--text-2); font-size: var(--step--1); }
.hp-line.is-fix .hp-unit { color: var(--orange); }
.hp-line.is-close { margin-top: var(--space-1); border-top: 1px dashed var(--line-strong); }
.hp-line.is-close .hp-detail { color: var(--lime); font-weight: var(--w-semi); }
.hp-record-cap { font-size: var(--step--1); color: var(--text-2); }
.hp-record-cap strong { color: var(--text); }

.hp-copy { display: grid; gap: var(--space-5); }
.hp-lede { margin: 0; font-family: var(--font-display); font-size: var(--step-2); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); font-weight: var(--w-h2); max-width: 26ch; }
.hp-features { display: grid; gap: var(--space-4) var(--space-5); margin: 0; padding: 0; list-style: none; }
.hp-features li { padding-top: var(--space-2); border-top: 1px solid var(--line-strong); }
.hp-feature-title { font-size: var(--step-0); font-weight: var(--w-semi); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); margin: 0 0 0.375rem; }
.hp-features p { margin: 0; color: var(--text-2); font-size: var(--step--1); line-height: 1.55; }
.hp-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; }
.hp-maker { margin: calc(-1 * var(--space-4)) 0 0; font-size: var(--step--1); color: var(--text-2); }

@media (min-width: 40rem) {
  .hp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .hp-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .hp-record { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

@media (prefers-reduced-motion: no-preference) {
  .hp-dot { animation: hp-pulse 2.4s var(--ease-in-out) infinite; }
  /* site.js arms the record only after the visitor scrolls while it is
     still below the fold, so a capture or a page that never scrolls always
     shows every line. It writes in once when it comes into view. */
  .hp-record.is-armed .hp-line { opacity: 0; translate: 0 0.5rem; }
  .hp-record.is-live .hp-line { animation: hp-write 520ms var(--ease-out) both; }
  .hp-record.is-live .hp-line:nth-child(2) { animation-delay: 450ms; }
  .hp-record.is-live .hp-line:nth-child(3) { animation-delay: 900ms; }
  .hp-record.is-live .hp-line:nth-child(4) { animation-delay: 1350ms; }
  .hp-record.is-live .hp-line:nth-child(5) { animation-delay: 1800ms; }
  .hp-record.is-live .hp-line:nth-child(6) { animation-delay: 2400ms; }
}
@keyframes hp-write {
  from { opacity: 0; translate: 0 0.5rem; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241, 154, 62, 0.55); }
  50% { box-shadow: 0 0 0 0.375rem rgba(241, 154, 62, 0); }
}
@media print {
  .hp-record-panel { box-shadow: none; }
  .hp-line { animation: none !important; opacity: 1 !important; translate: none !important; }
}

/* ---------- Leadership team (About) and Gabe Key profile ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) clamp(0.75rem, 2vw, var(--space-4));
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 48rem) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .team-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.team-card { display: grid; gap: var(--space-2); align-content: start; }
.team-portrait {
  position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--bg-2);
}
.team-portrait::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--photo-edge); pointer-events: none; }
.team-portrait picture { display: block; height: 100%; }
.team-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 600ms var(--ease-out, ease-out); }
.team-card:hover .team-portrait img { transform: scale(1.04); }
.team-text { display: grid; gap: 0.25rem; }
.team-name { margin: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--w-strong); letter-spacing: -0.01em; }
.team-name a { color: inherit; text-decoration: none; }
.team-name a::after { content: " \2192"; color: var(--accent, var(--lime)); }
.team-name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.team-role { margin: 0; color: var(--lime); font-size: 0.875rem; font-weight: var(--w-semi); letter-spacing: 0.08em; text-transform: uppercase; }
.team-line { margin: 0; color: var(--text-2); font-size: 1rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .team-portrait img { transition: none; } .team-card:hover .team-portrait img { transform: none; } }

.profile .split-start { align-items: center; }
.profile-portrait { max-width: 28rem; width: 100%; }
.profile-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; list-style: none; }
.profile-links a { display: inline-flex; min-height: 48px; align-items: center; }

/* ---------- Home: East Coast band for organizers ---------- */
.coast-band .split-wide { align-items: center; }
.coast-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.coast-list li {
  display: grid; gap: 0.25rem; padding: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--lime) 5%, transparent);
}
.coast-list strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: var(--w-strong); }
.coast-list span { color: var(--text-2); }
.profile { padding-block-start: calc(var(--header-h) + var(--space-6)); }

/* ---------- Fleet facts (home organizer band, /partners/) ---------- */
.fact-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3); margin: 0; padding: 0; list-style: none;
}
.fact-row li { display: grid; gap: 0.25rem; padding-block-start: var(--space-2); border-top: 2px solid var(--lime); }
.fact-n { font-family: var(--font-display); font-size: var(--step-6); font-weight: var(--w-strong); line-height: 1; letter-spacing: -0.03em; color: var(--lime); }
.fact-l { color: var(--text-2); font-size: 1rem; line-height: 1.4; max-width: 18ch; }
@media (max-width: 40rem) {
  .fact-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .fact-row li { grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: var(--space-2); }
  .fact-n { font-size: var(--step-5); }
}
.stack-lg { display: grid; gap: var(--space-6); }
.coast-list { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.coast-list strong { display: block; }

/* Home: the next-event card sits beside copy that starts at the top. */
.home-events .split-wide { align-items: start; }

/* /partners/: the named partnerships contact. */
.partner-contact .split-start { align-items: center; }
.partner-contact-photo { max-width: 22rem; width: 100%; }

/* ---------- Readability pass (audit 2026-10-27) ----------
   Paragraph-length text never drops below the body size's lower end: older
   renters read these lines. Labels stay small; sentences do not. */
.hp-features p, .team-line, .stat-text, .card:has(.card-media) .card-text { font-size: 1.0625rem; line-height: 1.55; }
.fact-l { font-size: 1.0625rem; max-width: 22ch; }
.team-role { font-size: 0.9375rem; }
/* Split section heads: the paragraph sits on the heading's baseline, not
   floating in the middle of a two-line h2. */
.section-head-split { align-items: end; }
/* Guides: the article column starts on the same left edge as the page title
   above it, instead of floating centered under a left-aligned heading. */
.section.guide > .container-text { width: min(100% - 2 * var(--gutter), var(--container)); }
.section.guide > .container-text > * { max-width: min(100%, 68ch); }
.section.guide .guide-meta { margin-bottom: calc(-1 * var(--space-3)); }
/* About: fleet facts in a forest panel beside the story. */
.about-facts { display: grid; gap: var(--space-3); padding: clamp(var(--space-4), 4vw, var(--space-6)); border-radius: var(--radius-xl); }
.about-facts .fact-row { grid-template-columns: 1fr; gap: var(--space-4); }
.about-facts .fact-row li { grid-template-columns: 7rem 1fr; align-items: baseline; gap: var(--space-3); }
.about-facts .fact-n { font-size: var(--step-5); }
/* Town pages: local places. */
.place-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.place-list li { display: grid; gap: 0.375rem; align-content: start; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.place-name { margin: 0; font-size: var(--step-1); }
.place-list p { margin: 0; color: var(--text-2); font-size: 1.0625rem; line-height: 1.5; }
.place-transit { margin-top: var(--space-4); color: var(--text-2); }