/* Petty Auto Repair — Direction B "The Readout", production stylesheet.
   White ground, near-black bands, neutral greys, one signal-amber accent.
   Type: IBM Plex Sans (display/body) + IBM Plex Mono (labels/data), self-hosted.
   Every mechanism is transform/opacity only; reduced motion = resting state;
   content is complete with JavaScript off. */

/* ---------- Fonts (self-hosted, latin subsets, metric-matched fallbacks) ---------- */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/assets/fonts/plex-sans-latin.e2291e842c.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex-mono-400-latin.08949f728d.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/plex-mono-500-latin.01d2854474.woff2") format("woff2");
}
/* Fallbacks sized to Plex's metrics so the swap does not move the layout. */
@font-face {
  font-family: "Plex Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 101.6%; ascent-override: 100.9%; descent-override: 27.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Mono Fallback"; src: local("Courier New"), local("Liberation Mono"), local("Menlo");
  size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%;
}

:root {
  --ink: #0E0F10;
  --ink-2: #2A2C30;
  --mute: #5F646C;      /* 6.4:1 on white */
  --rule: #E3E4E7;
  --surface: #F5F5F6;
  --paper: #FFFFFF;
  --amber: #F5A524;     /* 9.5:1 with ink as text on it */
  --amber-deep: #8F5A04;  /* amber as small text on white: 5.5:1 */
  --on-dark-mute: #A6AAB2; /* 7.9:1 on ink */
  --on-dark-rule: #2E3136;
  --panel: #121315;
  --error: #B3261E;     /* 6.5:1 on white */
  --input-border: #85898F; /* 3.5:1 on white */
  --focus: var(--ink);   /* 19:1 on white; dark bands switch to amber (9:1 on ink) */

  --sans: "IBM Plex Sans", "Plex Sans Fallback", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --header-h: 68px;
  --bar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.a11y-motion { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (max-width: 767px) { body { padding-bottom: var(--bar-h); } }

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
dl, dt, dd { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6.4vw, 4.6rem); letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-2); max-width: 44ch; }
.mono { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0; }
.muted { color: var(--mute); }
.kicker { font-family: var(--mono); font-size: .85rem; color: var(--mute); }
.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;
}
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.band-dark :focus-visible, .site-footer :focus-visible, .call-bar a:not(:first-child):focus-visible { outline-color: var(--amber); }
.btn-primary:focus-visible, .call-bar a:first-child:focus-visible { outline-color: var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--paper); }
.band-dark .btn-primary:focus-visible { box-shadow: 0 0 0 6px var(--amber); }

.skip {
  position: absolute; left: var(--gutter); top: -80px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 16px; font-weight: 500; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
.skip:focus { top: 8px; outline-color: var(--amber); }
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: 6px;
  font: 500 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; text-align: center;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  transition: transform 160ms var(--ease-out), background 160ms, color 160ms;
}
.btn:hover { background: var(--surface); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.btn-primary:hover { background: #FFB43A; border-color: #FFB43A; }
.btn-ghost { border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); background: var(--paper); }
.btn-wide { min-width: 260px; }
.band-dark .btn { border-color: #fff; color: #fff; background: transparent; }
.band-dark .btn:hover { background: #1A1C1F; }
.band-dark .btn-ghost { border-color: var(--on-dark-mute); }
.band-dark .btn-primary { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.band-dark .btn-primary:hover { background: #FFB43A; border-color: #FFB43A; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn[disabled] { opacity: .7; cursor: progress; }

.link { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; min-height: 44px; }
.link-arrow::after { content: "→"; transition: transform 200ms var(--ease-out); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-arrow:hover::after { transform: translateX(4px); }
.after-list { margin-top: 20px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header > .wrap { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.brand img { width: auto; height: 44px; }
.brand-name { font-weight: 600; letter-spacing: -0.01em; font-size: 1.05rem; line-height: 1.1; }
.brand-name small { display: block; font-family: var(--mono); font-weight: 400; font-size: .72rem; color: var(--mute); margin-top: 2px; }
.nav { display: none; margin-left: 8px; }
.nav > ul { display: flex; gap: 2px; list-style: none; align-items: center; }
.nav a, .nav-disclosure {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  font: 500 .95rem/1 var(--sans); text-decoration: none; color: var(--ink-2); border-radius: 4px; background: none; border: 0; cursor: pointer;
}
.nav a:hover, .nav a[aria-current="page"], .nav-disclosure:hover, .nav-disclosure[aria-expanded="true"], .nav-disclosure[aria-current="true"] { color: var(--ink); background: var(--surface); }
.nav a[aria-current="page"], .nav-disclosure[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--amber); }
.nav-disclosure svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.nav-disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-group { position: relative; }
.nav-menu {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); min-width: 300px; list-style: none;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 8px;
  box-shadow: 0 12px 32px rgba(14,15,16,.12);
}
.nav-menu.is-open { display: block; }
.nav-menu a { display: flex; gap: 12px; align-items: center; width: 100%; padding: 0 12px; min-height: 48px; }
.nav-menu .mono { color: var(--amber-deep); width: 2.4ch; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px;
  font-family: var(--mono); font-size: .85rem; font-weight: 500; text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 4px;
}
.lang:hover { border-color: var(--ink); color: var(--ink); }
.header-call { display: none; }
@media (max-width: 479px) {
  .site-header > .wrap { gap: 10px; }
  .brand { gap: 8px; }
  .brand img { height: 38px; }
  .brand-name { font-size: .92rem; }
  .brand-name small { display: none; }
}
.nav-toggle, .a11y-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; padding: 0;
  background: none; border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; color: var(--ink);
}
.nav-toggle:hover, .a11y-toggle:hover, .a11y-toggle[aria-expanded="true"] { border-color: var(--ink); }
.nav-toggle svg, .a11y-toggle svg { width: 22px; height: 22px; }
.nav-toggle .ic-close { display: none; }
.nav-toggle[aria-expanded="true"] .ic-open { display: none; }
.nav-toggle[aria-expanded="true"] .ic-close { display: block; }
.mobile-nav { border-top: 1px solid var(--rule); background: var(--paper); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.mobile-nav .wrap { padding-bottom: 16px; }
.mobile-nav-head { color: var(--mute); margin: 14px 0 2px; }
.mobile-nav ul { list-style: none; }
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px; min-width: 44px;
  padding: 0 4px; text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid var(--rule);
}
.mobile-nav li:last-child a { border-bottom: 0; }
.mobile-nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--amber); padding-left: 10px; }
.mobile-nav .mono { color: var(--mute); }
.mobile-nav-call { width: 100%; margin-top: 14px; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .nav-toggle, .mobile-nav { display: none !important; }
  .header-call { display: inline-flex; min-height: 44px; }
}

/* ---------- Accessibility panel ---------- */
.a11y-panel { border-top: 1px solid var(--rule); background: var(--surface); }
.a11y-panel .wrap { padding: 18px 0 20px; display: grid; gap: 14px; }
.a11y-head h2 { font-size: 1.15rem; }
.a11y-head p { margin: 4px 0 0; }
.a11y-options { display: grid; gap: 8px; }
.a11y-opt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; cursor: pointer; font-weight: 500; }
.a11y-opt input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex: none; }
.a11y-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (min-width: 700px) { .a11y-options { grid-template-columns: repeat(4, 1fr); } .a11y-panel .wrap { grid-template-columns: 1fr; } }

/* Widget states (persisted in localStorage; applied by the inline boot script before paint) */
html.a11y-text { font-size: 118%; }
html.a11y-text body { font-size: 1.1rem; }
html.a11y-underline a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-contrast { --ink: #000; --ink-2: #000; --mute: #2B2E33; --rule: #6B6F76; --surface: #FFFFFF; --amber-deep: #5A3800; --on-dark-mute: #E6E7EA; --on-dark-rule: #8A8F97; --panel: #000; --input-border: #000; }
html.a11y-contrast .btn, html.a11y-contrast .lang, html.a11y-contrast .nav-toggle, html.a11y-contrast .a11y-toggle { border-width: 2px; }
html.a11y-contrast .site-header { background: #fff; backdrop-filter: none; }
html.a11y-contrast .bay, html.a11y-contrast .bays, html.a11y-contrast .ticket, html.a11y-contrast .process-grid, html.a11y-contrast .expect, html.a11y-contrast .a11y-opt { border-color: #000; }

/* ---------- Bands ---------- */
.band { padding: clamp(56px, 9vw, 120px) 0; }
.band-top-rule { border-top: 1px solid var(--rule); padding-top: clamp(40px, 6vw, 72px); }
.band-dark { background: var(--ink); color: #fff; }
.band-dark .muted, .band-dark .kicker { color: var(--on-dark-mute); }
.band-dark .lede { color: #E6E7EA; }
.band-surface { background: var(--surface); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 64px); max-width: 60ch; }
.section-head-tight { margin-bottom: 0; }
.section-head .kicker { font-family: var(--mono); font-size: .85rem; color: var(--mute); }
.band-dark .section-head .kicker { color: var(--on-dark-mute); }

/* ---------- Text reveal mask ---------- */
.reveal .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.reveal .inner { display: block; transform: translateY(110%); will-change: transform; }
.reveal.is-in .inner { transform: translateY(0); transition: transform 700ms var(--ease-out); }
.reveal .hl { font-style: normal; position: relative; white-space: nowrap; }
.reveal .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .09em;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
}
.reveal.is-in .hl::after, .reveal.is-done .hl::after { transform: scaleX(1); transition: transform 600ms var(--ease-out) 500ms; }
.no-js .reveal .hl::after, .is-reduced .reveal .hl::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal .inner { transform: none !important; transition: none !important; }
  .reveal .hl::after { transform: scaleX(1) !important; transition: none !important; }
}
html.a11y-motion .reveal .inner { transform: none !important; transition: none !important; }
html.a11y-motion .reveal .hl::after { transform: scaleX(1) !important; transition: none !important; }

/* ---------- Hero ---------- */
.hero { padding: clamp(28px, 5vw, 72px) 0 clamp(40px, 6vw, 88px); }
.hero .wrap { display: grid; gap: 32px; align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero-tag { font-family: var(--mono); font-size: .82rem; color: var(--mute); display: flex; gap: 4px 0; flex-wrap: wrap; }
.hero-tag span + span::before { content: "/"; color: var(--amber-deep); margin: 0 12px; }
.hero h1 { max-width: 12ch; }
.hero .lede { max-width: 46ch; }
.hero-actions, .page-hero .actions { display: grid; gap: 10px; }
.hero-actions .btn, .page-hero .actions .btn { width: 100%; }
.hours-line {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-family: var(--mono); font-size: .85rem; color: var(--ink-2); padding-top: 4px; margin: 0;
}
.band-dark .hours-line { color: #E6E7EA; }
.hours-line .status { display: inline-flex; align-items: center; gap: 8px; }
.hours-line .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.hours-line .status.is-closed::before { background: var(--mute); }
.hero-media { position: relative; border-radius: 8px; overflow: hidden; background: var(--ink); }
.hero-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-media figcaption {
  position: absolute; left: 14px; bottom: 12px; right: 14px; display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: .72rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.hero-media figcaption span { background: rgba(14,15,16,.72); padding: 4px 8px; border-radius: 3px; }
@media (min-width: 768px) {
  .hero-actions, .page-hero .actions { grid-template-columns: repeat(3, auto); justify-content: start; }
  .hero-actions .btn, .page-hero .actions .btn { width: auto; }
}
@media (min-width: 1024px) {
  .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
  .hero { padding-top: clamp(40px, 6vw, 96px); }
  .hero-media img { aspect-ratio: 4 / 3; }
}

/* ---------- Readout (code to words) and dark panels ---------- */
.readout .wrap { display: grid; gap: 36px; }
.readout-panel {
  border: 1px solid var(--on-dark-rule); border-radius: 8px; padding: clamp(20px, 3vw, 32px);
  font-family: var(--mono); display: grid; gap: 18px; background: var(--panel);
}
.readout-panel .ph { display: flex; justify-content: space-between; font-size: .78rem; color: var(--on-dark-mute); margin: 0; }
.readout-line { display: grid; gap: 6px; align-items: baseline; margin: 0; }
.readout-line .code { font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--amber); min-height: 1em; }
.readout-line .arrow { color: var(--on-dark-mute); font-size: 1.1rem; }
/* min-height reserves the longest example ("Falla de encendido aleatoria o en
   varios cilindros") which wraps to three lines in this panel at every width
   from 320 px up (measured in Chromium), plus the cursor's descent, so the
   readout cycle never shifts the layout below it. */
.readout-line .words { font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1.2; color: #fff; min-height: 3.75em; }
.readout-line .words .cursor { display: inline-block; width: .55em; height: 1em; background: var(--amber); vertical-align: -0.15em; margin-left: 4px; opacity: 0; }
.readout-line.is-typing .words .cursor { opacity: 1; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.readout-list { list-style: none; display: grid; gap: 8px; font-size: .8rem; color: var(--on-dark-mute); border-top: 1px solid var(--on-dark-rule); padding-top: 14px; }
.readout-list li { display: grid; grid-template-columns: 5.5ch 1fr; gap: 12px; }
.readout-list li.is-active { color: #fff; }
.readout-list .c { color: var(--amber); }
.readout-copy { display: grid; gap: 18px; align-content: start; }
.readout-copy .note { font-size: .9rem; color: var(--on-dark-mute); }
.readout-note { font-size: .78rem; color: var(--on-dark-mute); margin: 0; border-top: 1px solid var(--on-dark-rule); padding-top: 14px; }
.symptom-list, .stat-list { display: grid; gap: 14px; }
.symptom-list div { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--on-dark-rule); }
.symptom-list div:last-child { border-bottom: 0; }
.symptom-list dt { color: var(--amber); font-size: 1rem; }
.symptom-list dd { color: #E6E7EA; font-size: .85rem; }
.stat-list div { display: grid; gap: 4px; }
.stat-list dd { color: var(--amber); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; order: -1; }
.stat-list dt { color: #E6E7EA; font-size: .85rem; }
@media (min-width: 640px) { .symptom-list div { grid-template-columns: 1fr 1fr; gap: 16px; } .stat-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
  .readout .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { .readout-line .words .cursor { animation: none; } }
html.a11y-motion .readout-line .words .cursor { animation: none; }

/* ---------- Services: the four bays ----------
   Direction C's expand-on-hover bays in B's skin. One <picture> per bay.
   Base rules = the stacked accordion (phones, and every width without JS:
   all four open, links working). At >= 880px with JS the four bays sit side
   by side; the active one grows flex 1 -> 4 over 500 ms, its photo settles
   from scale 1.08 to 1, the name swings from a vertical door-spine to
   horizontal and lifts above the text by --lift (measured by site.js,
   146px fallback), and a 2px amber track line draws under the name. The
   row has a fixed height so opening a bay never shifts the page. */
.bays { list-style: none; border-top: 1px solid var(--rule); }
.bay { position: relative; border-bottom: 1px solid var(--rule); }
.bay-head { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; line-height: inherit; text-wrap: auto; }
.bay-toggle {
  display: flex; width: 100%; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0;
  background: none; border: 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.bay-num { color: var(--mute); width: 2.6ch; font-variant-numeric: tabular-nums; flex: none; }
.bay-name { position: relative; font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
/* the track line: draws under the open bay's name like the track a door runs on */
.bay-name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--amber);
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out) 120ms;
}
.bay.is-active .bay-name::after { transform: scaleX(1); }
.bay-toggle::after {
  content: ""; margin-left: auto; margin-right: 6px; width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform 300ms var(--ease-out);
}
.bay.is-active .bay-toggle::after { transform: rotate(-135deg); }
.bay-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease-out); }
.bay.is-active .bay-body { grid-template-rows: 1fr; }
.bay-body-inner { overflow: hidden; min-height: 0; display: grid; gap: 14px; }
.bay-body-inner > :last-child { margin-bottom: 22px; }
.bay-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--ink); }
.bay-media picture, .bay-media img { width: 100%; height: 100%; }
.bay-media img { object-fit: cover; }
.bay-media.pos-low img { object-position: 50% 68%; }
.bay-text { display: grid; gap: 10px; }
.bay-desc { margin: 0; color: var(--ink-2); }
.bay-link { justify-self: start; }
.bay-note { margin: 0; font-size: .75rem; color: var(--mute); }
.no-js .bay-body { grid-template-rows: 1fr; }
.no-js .bay-toggle { cursor: default; }
.no-js .bay-toggle::after { display: none; }
.no-js .bay-name::after { transform: scaleX(1); }

@media (min-width: 880px) {
  html:not(.no-js) .bays { display: flex; gap: 8px; height: clamp(480px, 72vh, 760px); container-type: inline-size; border-top: 0; }
  html:not(.no-js) .bay {
    flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 8px; border-bottom: 0; isolation: isolate;
    background: var(--ink); color: #fff;
    transition: flex-grow 500ms cubic-bezier(.22, 1, .36, 1);
  }
  html:not(.no-js) .bay.is-active { flex-grow: 4; }
  /* the body fills the bay: photo under everything, text at the bottom-left */
  html:not(.no-js) .bay-body { position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none; }
  html:not(.no-js) .bay-body-inner { display: block; overflow: visible; }
  html:not(.no-js) .bay-body-inner > :last-child { margin-bottom: 0; }
  html:not(.no-js) .bay-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
  html:not(.no-js) .bay-media img {
    transform: scale(1.08); opacity: .86;
    transition: transform 600ms cubic-bezier(.22, 1, .36, 1), opacity 300ms;
  }
  html:not(.no-js) .bay.is-active .bay-media img { transform: scale(1); opacity: 1; }
  /* legibility scrim for the white text on the photo */
  html:not(.no-js) .bay-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(14,15,16,.84) 0%, rgba(14,15,16,.36) 48%, rgba(14,15,16,.12) 100%);
  }
  /* text is sized to the OPEN bay's inner width (4/7 of the row minus gaps and padding) so the
     copy wraps the same open or closed and the measured lift holds before a bay ever opens */
  html:not(.no-js) .bay-text {
    position: absolute; left: 22px; bottom: 22px; z-index: 2;
    width: min(46ch, calc((100cqw - 24px) * 4 / 7 - 44px));
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity 300ms, transform 420ms cubic-bezier(.22, 1, .36, 1);
  }
  html:not(.no-js) .bay.is-active .bay-text { opacity: 1; transform: none; transition-delay: 140ms; pointer-events: auto; }
  /* stretched link: the whole open bay goes to the service page. Oversized and
     clipped by the bay's overflow; ::after is the link-arrow glyph, so ::before. */
  html:not(.no-js) .bay-link { color: #fff; }
  html:not(.no-js) .bay-link::before { content: ""; position: absolute; inset: -100vh -100vw; z-index: 3; }
  html:not(.no-js) .bay-desc { color: #fff; font-size: 1rem; line-height: 1.5; max-width: 42ch; }
  html:not(.no-js) .bay-note { color: var(--on-dark-mute); }
  /* the heading + button cover the bay for focus and the label hit areas; the
     rest of the surface passes pointer events through to the bay / the link */
  html:not(.no-js) .bay-head { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  html:not(.no-js) .bay-toggle { position: absolute; inset: 0; width: 100%; height: 100%; display: block; min-height: 0; padding: 0; pointer-events: none; }
  html:not(.no-js) .bay-toggle::after { content: none; }
  html:not(.no-js) .bay-toggle:focus-visible { outline: 3px solid var(--amber); outline-offset: -5px; border-radius: 8px; }
  html:not(.no-js) .bay-num {
    position: absolute; top: 22px; left: 22px; width: auto; color: #fff; opacity: .85; pointer-events: auto;
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
  }
  html:not(.no-js) .bay.is-active .bay-num { transform: translateY(-6px); }
  html:not(.no-js) .bay-name {
    position: absolute; left: 22px; bottom: 22px; font-size: clamp(1.25rem, 1.6vw, 1.75rem); line-height: 1; white-space: nowrap; pointer-events: auto;
    transform-origin: left bottom; transform: translateX(1.05em) rotate(-90deg);
    transition: transform 500ms cubic-bezier(.22, 1, .36, 1);
  }
  html:not(.no-js) .bay.is-active .bay-name { transform: translateY(calc(-1 * var(--lift, 146px))); }
  html:not(.no-js) .bay-name::after { bottom: -10px; }
}

/* ---------- Scroll-beam rail (service pages: "What the car is telling you") ----------
   B's home timeline mechanism, moved here. p = how far the viewport's 60% line
   has travelled through the list; the beam is scaleY(p) from the top and each
   dot lights as the beam tip passes it. No JS / reduced motion: beam full, dots lit. */
.timeline { position: relative; }
.tl-rail { position: absolute; top: 6px; bottom: 6px; left: 7px; width: 2px; background: var(--rule); }
.tl-beam {
  position: absolute; inset: 0; transform-origin: top; transform: scaleY(var(--p, 0));
  background: linear-gradient(to top, var(--amber) 0%, var(--amber) 70%, transparent 100%);
}
.no-js .tl-beam, .is-reduced .tl-beam { transform: scaleY(1); background: var(--amber); }
.tl-signs .tl-list { gap: 18px; }
.tl-signs .tl-row { position: relative; padding-left: 32px; }
.tl-dot {
  position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule); transition: border-color 300ms, background 300ms;
}
.tl-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--rule); transition: background 300ms; }
.tl-row.is-on .tl-dot, .no-js .tl-dot, .is-reduced .tl-dot { border-color: var(--amber); }
.tl-row.is-on .tl-dot::after, .no-js .tl-dot::after, .is-reduced .tl-dot::after { background: var(--amber); }

/* ---------- Scroll velocity marquee ---------- */
.marquee { padding: 18px 0; border-top: 1px solid var(--on-dark-rule); border-bottom: 1px solid var(--on-dark-rule); overflow: hidden; }
.mq-row { display: flex; white-space: nowrap; overflow: hidden; }
.mq-row + .mq-row { margin-top: 10px; }
.mq-track { display: inline-flex; flex: none; will-change: transform; }
.mq-unit { display: inline-flex; align-items: center; flex: none; }
.mq-unit span {
  font-family: var(--mono); font-size: clamp(1rem, 2.4vw, 1.5rem); color: #fff; padding: 0 22px;
  display: inline-flex; align-items: center; gap: 22px;
}
.mq-unit span::after { content: ""; width: 6px; height: 6px; background: var(--amber); border-radius: 50%; }
.mq-row:nth-child(2) .mq-unit span { color: var(--on-dark-mute); }

/* ---------- How a repair works here: scroll-stacking tickets ----------
   Direction C's mechanism in B's skin. Each ticket is sticky with an offset
   that grows 22px per card, so later tickets climb over earlier ones. A
   covered ticket scales down (to 0.94) and its SURFACE tints to --surface via
   a ::before layer that sits BEHIND the text (z-index 0 vs 1), so ink text
   stays at 14:1+ at every overlap state. Resting state: all four cards stacked
   with their peek strips visible; no JS / reduced motion: a plain list. */
.process .section-head { margin-bottom: clamp(24px, 4vw, 40px); }
.stack { list-style: none; display: grid; gap: 18px; padding-bottom: clamp(24px, 6vw, 80px); }
.ticket {
  position: sticky; top: calc(var(--header-h) + 16px + var(--i, 0) * 22px);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  padding: clamp(20px, 3vw, 36px);
  transform: scale(var(--s, 1)); transform-origin: 50% 0;
  box-shadow: 0 1px 0 rgba(14,15,16,.03), 0 -8px 24px rgba(14,15,16,.06);
  display: grid; gap: 14px; min-height: 230px; align-content: start; overflow: hidden;
}
.ticket::before { content: ""; position: absolute; inset: 0; background: var(--surface); opacity: var(--dim, 0); z-index: 0; pointer-events: none; }
.ticket > * { position: relative; z-index: 1; }
.ticket[data-i="1"] { --i: 1; } .ticket[data-i="2"] { --i: 2; } .ticket[data-i="3"] { --i: 3; }
.ticket-head .n { font-family: var(--mono); font-size: .85rem; color: var(--amber-deep); }
.ticket-body { display: grid; gap: 10px; }
.ticket h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; max-width: 24ch; }
.ticket p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.ticket .cite { font-size: .78rem; color: var(--mute); }
@media (min-width: 880px) {
  .ticket { grid-template-columns: 140px 1fr; gap: 24px; min-height: 250px; }
}
.process-note { margin-top: 8px; font-size: .9rem; color: var(--mute); max-width: 70ch; }
.process-media { margin-top: clamp(32px, 5vw, 56px); border-radius: 8px; overflow: hidden; }
.process-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.process-media figcaption { font-family: var(--mono); font-size: .75rem; color: var(--mute); padding: 10px 0 0; }
.no-js .ticket, .is-reduced .ticket, html.a11y-motion .ticket { position: relative; top: auto; transform: none !important; }
.no-js .ticket::before, .is-reduced .ticket::before, html.a11y-motion .ticket::before { opacity: 0 !important; }
.no-js .stack, .is-reduced .stack, html.a11y-motion .stack { padding-bottom: 0; }

/* ---------- Location ---------- */
.location .wrap { display: grid; gap: 40px; }
.loc-card { display: grid; gap: 20px; }
.loc-address { font-size: clamp(1.4rem, 2.8vw, 2rem); letter-spacing: -0.02em; line-height: 1.2; font-weight: 500; font-style: normal; }
.loc-address .mono { display: block; color: var(--on-dark-mute); margin-top: 8px; font-size: .85rem; }
.hours { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .9rem; }
.hours th, .hours td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--on-dark-rule); font-weight: 400; }
.hours th { color: var(--on-dark-mute); width: 45%; }
.hours tr.is-today td, .hours tr.is-today th { color: var(--amber); }
.hours caption { text-align: left; font-family: var(--mono); font-size: .8rem; color: var(--on-dark-mute); padding-bottom: 8px; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.loc-note { font-size: .9rem; color: var(--on-dark-mute); }
@media (min-width: 900px) { .location .wrap { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }

/* ---------- Quote section and form ---------- */
.quote .wrap { display: grid; gap: 40px; }
.quote-cta { display: grid; gap: 8px; align-content: start; }
.quote-cta .btn { justify-self: start; }
.form { display: grid; gap: 18px; }
.form-help { font-size: .9rem; color: var(--mute); margin: 0; }
.form-noscript { border: 2px solid var(--ink); border-radius: 8px; padding: 14px 18px; background: var(--surface); font-weight: 500; margin: 0 0 18px; }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 500; font-size: .95rem; padding: 0; }
.field .req { font-weight: 400; color: var(--mute); font-size: .85rem; }
.field .hint { font-size: .85rem; color: var(--mute); margin: 0; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--ink);
  border: 1.5px solid var(--input-border); border-radius: 6px; background: var(--paper);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--error); border-width: 2px; }
.field .error { font-size: .85rem; color: var(--error); margin: 0; font-weight: 500; }
.form-row { display: grid; gap: 18px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.radios { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.radios label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 400; }
.radios input { width: 20px; height: 20px; min-height: 0; accent-color: var(--ink); margin: 0; }
/* WhatsApp composer: with JS the structured fields show and the raw `text`
   box (the only named control, what the GET actually sends) is hidden; the
   boot script removes .no-js before first paint, so neither state flashes.
   Without JS the composed fields are useless (no name=) and stay hidden. */
.composed { display: grid; gap: 18px; }
html.no-js .form .composed { display: none; }
html:not(.no-js) .form .field-text { display: none; }
.form-foot { display: grid; gap: 14px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form-actions .btn { min-width: 200px; }
.form-status { font-weight: 500; margin: 0; }
.form-foot .consent { font-size: .85rem; color: var(--mute); margin: 0; }
.form-foot .consent a { font-weight: 500; }
.form-summary { border: 2px solid var(--error); border-radius: 8px; padding: 14px 18px; background: #FFF4F3; display: grid; gap: 8px; }
.form-summary p { margin: 0; color: var(--error); }
.form-summary ul { list-style: none; display: grid; gap: 4px; }
.form-summary a { color: var(--error); font-weight: 500; display: inline-flex; min-height: 32px; align-items: center; }
.quote-aside { display: grid; gap: 18px; align-content: start; }
.quote-aside .contact-list { list-style: none; display: grid; gap: 12px; }
.quote-aside .contact-list li { display: grid; gap: 0; }
.quote-aside .contact-list a { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font-weight: 500; text-decoration: none; }
.quote-aside .contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.quote-aside .contact-list .mono { color: var(--mute); }
.band-dark .quote-aside .contact-list .mono, .band-dark .quote-aside .muted { color: var(--on-dark-mute); }
.quote-aside svg { width: 20px; height: 20px; flex: none; }
@media (min-width: 700px) { .form-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .quote .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: start; } }

/* ---------- FAQ ---------- */
.faq-list { display: grid; border-top: 1px solid var(--rule); max-width: 80ch; }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: 56px; padding: 14px 0; font-weight: 500; font-size: 1.08rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--mono); font-size: 1.4rem; color: var(--mute); flex: none; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { color: var(--ink-2); padding-bottom: 18px; max-width: 70ch; }
.faq-group { display: grid; gap: 24px; }
@media (min-width: 900px) { .faq-group { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; } .faq-group h2 { position: sticky; top: 96px; } }

/* ---------- Closing CTA ---------- */
.closing .wrap { display: grid; gap: 24px; }
.closing h2 { max-width: 20ch; }
.closing .actions, .status-page .actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #fff; border-top: 1px solid var(--on-dark-rule); padding: 48px 0 28px; }
.site-footer .cols { display: grid; gap: 32px; }
.footer-h { font-family: var(--mono); font-weight: 400; font-size: .8rem; color: var(--on-dark-mute); margin-bottom: 12px; letter-spacing: 0; }
.site-footer ul { list-style: none; display: grid; gap: 4px; }
.site-footer a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer a[aria-current="page"] { color: var(--amber); }
.site-footer address { font-style: normal; line-height: 1.6; }
.footer-address { margin-top: 14px; }
.site-footer .brand img { height: 56px; }
.site-footer .legal {
  margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--on-dark-rule);
  display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: .78rem; color: var(--on-dark-mute);
}
.site-footer .legal nav { display: flex; flex-wrap: wrap; gap: 0 4px; }
.site-footer .legal a { min-height: 44px; padding: 0 8px; }
.site-footer .legal a:first-child { padding-left: 0; }
.site-footer .credit { margin-top: 6px; font-family: var(--mono); font-size: .74rem; color: var(--on-dark-mute); }
.site-footer .credit a { min-height: 44px; color: var(--on-dark-mute); }
@media (min-width: 700px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- Mobile sticky bar (not dismissable) ---------- */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--on-dark-rule);
  border-top: 1px solid var(--on-dark-rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.call-bar a {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; font-size: 1rem;
}
.call-bar a:first-child { background: var(--amber); color: var(--ink); }
.call-bar svg { width: 20px; height: 20px; }
@media (min-width: 768px) { .call-bar { display: none; } }

/* ---------- Inner pages ---------- */
.crumbs { font-family: var(--mono); font-size: .8rem; color: var(--mute); padding: 6px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 4px; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--mute); }
.crumbs a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; margin-left: -6px; }
.crumbs a:hover { text-decoration: underline; }
.page-hero { padding: clamp(12px, 3vw, 40px) 0 clamp(40px, 6vw, 80px); }
.page-hero .wrap { display: grid; gap: 28px; }
.page-hero h1 { max-width: 16ch; font-size: clamp(2.1rem, 5.6vw, 4rem); }
.page-hero .media { border-radius: 8px; overflow: hidden; }
.page-hero .media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.page-hero .media.ar-4-5 img { aspect-ratio: 4 / 5; }
.page-hero .media.ar-16-9 img { aspect-ratio: 16 / 9; }
.page-hero figcaption { font-family: var(--mono); font-size: .75rem; color: var(--mute); padding-top: 8px; }
.two-col { display: grid; gap: 40px; }
.list-plain { list-style: none; display: grid; gap: 12px; }
.list-plain li { display: grid; grid-template-columns: 2.6ch 1fr; gap: 14px; align-items: start; }
.list-plain .n { font-family: var(--mono); font-size: .85rem; color: var(--amber-deep); padding-top: .25em; }
.list-plain strong { font-weight: 500; }
.urgent { font-family: var(--mono); font-size: .75rem; color: var(--ink); background: var(--amber); padding: 1px 6px; border-radius: 3px; margin-left: 6px; white-space: nowrap; }
.expect { border: 1px solid var(--rule); border-radius: 8px; padding: 22px; display: grid; gap: 10px; background: var(--surface); margin-top: 28px; }
.expect p { margin: 0; }
.expect .mono { color: var(--mute); }
@media (min-width: 900px) {
  .page-hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
  .page-hero .media.ar-4-5 img { aspect-ratio: 4 / 5; }
  .page-hero .media.ar-16-9 img { aspect-ratio: 4 / 3; }
  .two-col { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* Pad wear scale (brake page) */
.scale-wrap { display: grid; gap: 32px; }
.scale { display: grid; gap: 14px; font-family: var(--mono); font-size: .85rem; border: 1px solid var(--on-dark-rule); border-radius: 8px; padding: clamp(20px, 3vw, 32px); background: var(--panel); }
.scale .ph { display: flex; justify-content: space-between; color: var(--on-dark-mute); font-size: .78rem; margin: 0; }
.scale-bar { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(to right, #3A3D42, #E6E7EA); margin: 26px 0 6px; }
.scale-bar .mark { position: absolute; top: -8px; width: 3px; height: 30px; background: var(--amber); border-radius: 2px; }
.scale-bar .mark-replace { left: 28%; }
.scale-bar .mark-end { left: 92%; }
.scale-bar .mark span { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--amber); font-size: .78rem; }
.scale-bar .mark-end span { left: auto; right: 0; transform: none; }
.scale-labels { display: flex; justify-content: space-between; color: var(--on-dark-mute); }
.scale-note { color: #E6E7EA; font-family: var(--sans); font-size: .95rem; margin: 0; }
@media (min-width: 900px) { .scale-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } }

/* Dorchester */
.place-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; align-self: start; }
.place-grid li { background: var(--paper); padding: 16px 18px; display: grid; gap: 4px; font-weight: 500; }
.place-grid .n { color: var(--amber-deep); }
.service-grid { list-style: none; display: grid; gap: 14px; }
.service-grid a { display: grid; gap: 6px; padding: 22px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); text-decoration: none; min-height: 44px; transition: border-color 160ms; }
.service-grid a:hover { border-color: var(--ink); }
.service-grid strong { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.015em; }
.service-grid span:last-child { color: var(--ink-2); font-size: .95rem; }
.service-grid .n { color: var(--amber-deep); }
@media (min-width: 700px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(4, 1fr); } }

/* About */
.about-list { list-style: none; display: grid; gap: clamp(32px, 5vw, 64px); max-width: 72ch; }
.about-list li { display: grid; gap: 12px; }
.about-list h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.about-list p { margin: 0; color: var(--ink-2); font-size: 1.05rem; }
.about-list .link-arrow { justify-self: start; }

/* Contact */
.page-hero-plain .wrap { align-items: start; }
.contact-details { display: grid; gap: 18px; align-content: start; border: 1px solid var(--rule); border-radius: 8px; padding: 22px; background: var(--surface); }
.contact-details .hours th, .contact-details .hours td { border-bottom-color: var(--rule); }
.contact-details .hours th, .contact-details .hours caption { color: var(--mute); }
.contact-details .hours tr.is-today td, .contact-details .hours tr.is-today th { color: var(--amber-deep); }
.detail-list { display: grid; gap: 12px; }
.detail-list div { display: grid; gap: 2px; }
.detail-list dt { font-family: var(--mono); font-size: .78rem; color: var(--mute); }
.detail-list dd a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; }
.detail-list dd a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Legal pages */
.legal-wrap { max-width: 72ch; display: grid; gap: 28px; }
.legal-head { display: grid; gap: 10px; }
.legal-head h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.legal-head .lede { margin: 6px 0 0; }
.legal-wrap section { display: grid; gap: 10px; }
.legal-wrap h2 { font-size: 1.4rem; }
.legal-wrap p { margin: 0; color: var(--ink-2); }

/* 404 status page */
.status-page .wrap { display: grid; gap: 18px; max-width: 64ch; }
.status-page h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
.status-page .lede { margin: 0; }
.status-alt { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rule); display: grid; gap: 12px; }
.status-alt h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.status-alt p { margin: 0; color: var(--ink-2); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  /* bays still switch, instantly: no photo scale, no staggered delays */
  .bay-media img { transform: none !important; opacity: 1 !important; }
  .bay-text, .bay-name::after { transition-delay: 0ms !important; }
}
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
html.a11y-motion .bay-media img { transform: none !important; opacity: 1 !important; }
html.a11y-motion .bay-text, html.a11y-motion .bay-name::after { transition-delay: 0ms !important; }
html.a11y-motion .tl-beam { transform: scaleY(1) !important; background: var(--amber); }
html.a11y-motion .tl-dot { border-color: var(--amber); }
html.a11y-motion .tl-dot::after { background: var(--amber); }
html.a11y-motion .mq-track { transform: none !important; }