/* Hallmark · shape: Feature Stack, five pages · genre: editorial · theme: Ink (by request, carried from v1 deal 1/3, seed sample-local-family-auto-db78·5bc4fa1d·2026-11-11·r0) · job: book (call first, request second) · redesign: full, v1 content and wiring kept
 * hero: Ledge · nav: edge-aligned, elm-leaf logo, links, open-now pill, phone, one action; compact details menu and a sticky call bar on phones · footer: colophon block with address, hours, pages, credits · imagery: photographs (Wikimedia Commons stand-ins for the shop's own, muted) · signature: drop-off times read from the shop's own clock, one tap fills the request · ink: paper
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: P, the photos are library stand-ins and the people are slots until the shop sends its own */
/* waive 22 · ink and greys at zero chroma · a notice board is printed in plain black */
/* waive 68 · the brief asks for team photo slots; four people is the real shape of a small shop, and the slots are labelled for the owner's photos */
/* dismiss F4 · the pressed drop-off time is a pale teal state, not a second filled primary */
/* waive 58 · the brief asks for trust strip, services, steps, reviews, FAQ, map and hours on one home page; each section stays short */
@import url("./tokens.css");
@import url("./base.css");

/* skip link */
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: 10px; }
.skip:focus-visible { top: var(--space-md); }

/* sample ribbon */
.ribbon { background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }
.ribbon .container { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); justify-content: space-between; padding-block: var(--space-xs); }
.ribbon a { color: var(--color-paper); font-weight: 600; }
.ribbon a:hover { text-decoration-color: var(--color-accent-soft); }

/* logo: elm leaf and stacked wordmark */
.logo { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; min-height: 44px; }
.logo__mark { width: 34px; height: 36px; flex: none; }
.logo__mark .leaf { fill: var(--color-ink); }
.logo__mark .vein { fill: none; stroke: var(--color-paper); stroke-width: 1.1; stroke-linecap: round; }
.logo__word { display: grid; line-height: 1; }
.logo__name { font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.03em; }
.logo__sub { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-3xs); }
.logo:hover .logo__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

/* header */
.site-head { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-ink); }
.site-head__row { display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; }
.site-nav { display: flex; gap: var(--space-2xs); margin-right: auto; }
.site-nav a, .menu__panel nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-xs); font-weight: 600; font-size: var(--text-sm); text-decoration: none; border-radius: 8px; }
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.site-head__right { display: flex; align-items: center; gap: var(--space-md); }
.head-phone { font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.head-phone:hover { color: var(--color-accent); }
.menu { display: none; margin-left: auto; position: static; }
.menu summary { list-style: none; min-height: 44px; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--color-ink); }
.menu__panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: var(--space-md); padding: var(--space-md) var(--gutter) var(--space-lg); background: var(--color-paper); box-shadow: var(--shadow-card); }
.menu__panel nav { display: grid; border-top: var(--rule-hair) solid var(--color-ink); }
.menu__panel nav a { font-size: var(--text-md); border-bottom: var(--rule-hair) solid var(--color-rule); border-radius: 0; padding-inline: 0; min-height: 52px; }
.menu__phone { font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.02em; text-decoration: none; }
@media (max-width: 75rem) { .site-head__right .tag { display: none; } }
@media (max-width: 60rem) { .site-nav, .site-head__right { display: none; } .menu { display: block; } }

/* sticky call bar on phones */
.callbar { display: none; }
@media (max-width: 48rem) {
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-xs) var(--gutter) calc(var(--space-xs) + env(safe-area-inset-bottom)); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-ink); }
  body { padding-bottom: 72px; }
}

/* tags */
.tag { display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--color-paper-3); color: var(--color-ink); white-space: nowrap; justify-self: start; }
.tag--in { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.tag--out { background: transparent; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); color: var(--color-muted); }

/* buttons, eight states */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; background: var(--color-paper-2); color: var(--color-ink); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { border-color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }
.btn--sm { min-height: 44px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.btn[data-busy] { opacity: 0.7; cursor: progress; }
.text-link { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.text-link:hover, main p a:hover { color: var(--color-accent); }

/* photographs */
.photo { margin: 0; border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; aspect-ratio: 4 / 3; }
.photo--band { aspect-ratio: 21 / 8; }
@media (max-width: 40rem) { .photo--band { aspect-ratio: 4 / 3; } }
.slot-label { position: absolute; inset: auto var(--space-md) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* hero: Ledge */
.hero { display: grid; grid-template-rows: minmax(260px, 1fr) auto; min-height: calc(100svh - 112px); }
.hero__field { margin: var(--space-md) auto 0; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.hero__ledge { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; padding-block: var(--space-xl); }
.hero h1 { max-width: 13ch; }
.hero__side { display: grid; gap: var(--space-lg); justify-items: start; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
@media (max-width: 52rem) { .hero__ledge { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg); } .hero { min-height: auto; grid-template-rows: 260px auto; } }

section { padding-block: var(--section-gap-s); }
.band { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); align-content: start; }
.section-head p { color: var(--color-ink-2); max-width: 46ch; }
.section-head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md); }
.section-head--row > div { display: grid; gap: var(--space-sm); }
.h-title { font-size: var(--text-title); }

/* page heads (inner pages) */
.page-head { padding-block: var(--space-2xl) var(--space-xl); }
.page-head--tight { padding-bottom: var(--space-lg); }
.page-head__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.page-head h1 { font-size: var(--text-display-s); max-width: 16ch; }
.page-head .lead { color: var(--color-ink-2); }
@media (max-width: 52rem) { .page-head__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .page-head { padding-block: var(--space-xl) var(--space-lg); } }

/* trust strip */
.trust-wrap { padding-block: 0; }
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: var(--rule-hair) solid var(--color-ink); }
.trust li { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; }
.trust li + li { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-lg); }
.trust li > span:last-child { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 28ch; }
.trust__fig { font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.03em; line-height: 1.1; }
.trust__fig--slot { color: var(--color-muted); font-size: var(--text-xl); }
@media (max-width: 52rem) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust li:nth-child(3) { border-left: 0; padding-left: 0; }
  .trust li:nth-child(n+3) { border-top: var(--rule-hair) solid var(--color-rule); }
  .trust li { padding-right: var(--space-sm); }
  .trust li + li { padding-left: var(--space-md); }
  .trust li:nth-child(3) { padding-left: 0; }
}
.badge-slot { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) dashed var(--color-muted); border-radius: 10px; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); justify-self: start; text-align: center; }

/* services: ruled list */
.ruled { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.ruled li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 8.5rem; gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ruled li > .tag { justify-self: end; }
.ruled h3 { font-size: var(--text-title); }
.ruled h3 a { text-decoration: none; }
.ruled h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.ruled p { color: var(--color-ink-2); }
@media (max-width: 40rem) { .ruled li { grid-template-columns: minmax(0, 1fr) auto; } .ruled p { grid-column: 1 / -1; grid-row: 2; } }
.ruled li:not(:has(.tag)) p { grid-column: 2 / -1; }
@media (max-width: 40rem) { .ruled li:not(:has(.tag)) h3 { grid-column: 1 / -1; } .ruled li:not(:has(.tag)) p { grid-column: 1 / -1; } }

/* how it works: steps as a notice */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.steps li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); }
.steps__n { font-weight: 700; font-size: var(--text-display-s); letter-spacing: var(--tracking-display); line-height: 1; }
.steps p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); } }
@media (max-width: 30rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* reviews slot */
.reviews__well { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.reviews__well .section-head { margin-bottom: 0; }
@media (max-width: 52rem) { .reviews__well { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg) var(--space-md); } }
.reviews__figure { font-weight: 700; font-size: var(--text-display-s); letter-spacing: var(--tracking-display); line-height: 1; color: var(--color-muted); }
.reviews__rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.reviews__rows li { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }

/* split: photo beside text */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; }
.split--tall { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split--tall .photo { aspect-ratio: 4 / 5; }
.split--text { align-items: start; }
.split__text { display: grid; gap: var(--space-md); justify-items: start; }
.split__text p { color: var(--color-ink-2); }
@media (max-width: 52rem) { .split, .split--tall { grid-template-columns: minmax(0, 1fr); } .split--tall .photo { aspect-ratio: 4 / 3; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); }
@media (max-width: 52rem) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.faq { border-top: var(--rule-hair) solid var(--color-ink); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 64px; padding-block: var(--space-sm); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: var(--text-xl); line-height: 1; transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.faq details p { padding-bottom: var(--space-md); color: var(--color-ink-2); }

/* hours and directions */
.find-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
@media (max-width: 52rem) { .find-grid { grid-template-columns: minmax(0, 1fr); } }
.timetable { width: 100%; border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-ink); }
.timetable th, .timetable td { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; font-weight: 400; }
.timetable td { text-align: right; font-variant-numeric: tabular-nums; }
.timetable tr[aria-current="date"] th, .timetable tr[aria-current="date"] td { font-weight: 700; color: var(--color-ink); }
.find { display: grid; gap: var(--space-md); }
.find address { font-style: normal; font-size: var(--text-lead); line-height: 1.45; }
.note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.note--top { margin-top: 0; }

/* drawn map stand-in */
.map { margin: 0; display: grid; gap: var(--space-xs); }
.map svg { width: 100%; height: auto; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.map__minor path { stroke: var(--color-rule); stroke-width: 10; fill: none; }
.map__road path { stroke: var(--color-paper-3); stroke-width: 22; fill: none; }
.map__road path + path { stroke: var(--color-rule); }
.map__lot { fill: var(--color-paper-2); stroke: var(--color-ink); stroke-width: 1; }
.map__pin { fill: var(--color-ink); stroke: var(--color-paper); stroke-width: 3; }
.map__label { font-family: var(--font-body); font-size: 12px; fill: var(--color-muted); }
.map__label--strong { font-weight: 700; font-size: 13px; fill: var(--color-ink); }
.map figcaption { font-size: var(--text-sm); color: var(--color-muted); }

/* final call to action */
.cta { border-top: var(--rule-hair) solid var(--color-ink); }
.cta__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.cta__side { display: grid; gap: var(--space-md); justify-items: start; }
.cta__phone { font-weight: 700; font-size: var(--text-section); letter-spacing: var(--tracking-display); line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cta__phone:hover { color: var(--color-accent); }
@media (max-width: 52rem) { .cta__row { grid-template-columns: minmax(0, 1fr); } }

/* services page */
.svc-wrap { padding-top: var(--space-2xl); }
.svc-list { border-top: var(--rule-hair) solid var(--color-ink); }
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: 96px; }
.svc__head { display: grid; gap: var(--space-sm); justify-items: start; align-content: start; }
.svc__head h2 { font-size: var(--text-2xl); }
.svc__head p { color: var(--color-ink-2); }
.svc__h { font-size: var(--text-md); letter-spacing: -0.01em; margin-bottom: var(--space-xs); }
.svc ul { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.svc ul li { padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); }
@media (max-width: 60rem) { .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .svc__head { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .svc { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* about page */
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.team li { display: grid; gap: var(--space-2xs); align-content: start; }
.team__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-sm); }
.team h3 { font-size: var(--text-lg); letter-spacing: -0.02em; color: var(--color-muted); }
.team__role { font-weight: 600; }
.team li p:last-child { color: var(--color-ink-2); font-size: var(--text-sm); }
@media (max-width: 60rem) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); } }
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.badges .badge-slot { min-height: 112px; justify-self: stretch; }
@media (max-width: 52rem) { .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.warranty { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.warranty h2 { font-size: var(--text-2xl); }
.warranty__fig { margin-top: var(--space-lg); font-weight: 700; font-size: var(--text-display-s); letter-spacing: var(--tracking-display); line-height: 1; }
@media (max-width: 52rem) { .warranty { grid-template-columns: minmax(0, 1fr); } }
.terms { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.terms div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.terms dt { font-weight: 600; }
.terms dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 40rem) { .terms div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } }

/* request: times + form */
.request { padding-top: var(--space-lg); }
.request__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
@media (max-width: 52rem) { .request__grid { grid-template-columns: minmax(0, 1fr); } }
.times { display: grid; gap: var(--space-xs); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-md); }
.slot-btn { display: grid; gap: var(--space-3xs); justify-items: start; min-height: 64px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; background: var(--color-paper); color: var(--color-ink); text-align: left; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.slot-btn span { font-size: var(--text-sm); color: var(--color-muted); }
.slot-btn strong { font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; }
.slot-btn:hover { border-color: var(--color-ink); }
.slot-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.slot-btn:active { transform: translateY(1px); }
.slot-btn[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.slot-btn[aria-pressed="true"] span { color: var(--color-accent-soft-ink); }
.side-hours { margin-top: var(--space-2xl); display: grid; gap: var(--space-md); }
@media (max-width: 52rem) { .side-hours { display: none; } }

.form { display: grid; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.band .form { background: var(--color-paper); }
@media (max-width: 40rem) { .form { padding: var(--space-lg) var(--space-md); } }
fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-sm); min-width: 0; }
legend { font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; margin-bottom: var(--space-xs); padding: 0; }
.fields { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field--full { grid-column: 1 / -1; }
@media (max-width: 40rem) { .fields, .fields--3 { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: var(--space-2xs); min-width: 0; align-content: start; }
.field label { font-size: var(--text-sm); color: var(--color-ink-2); }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: 10px; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; transition: border-color var(--dur-micro) var(--ease-out); }
.field textarea { min-height: 112px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-ink); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline-color: var(--color-focus); transition: none; }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field input:disabled { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; }
.field__err { font-size: var(--text-sm); color: var(--color-error); }
.field__err:empty { display: none; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); align-items: start; font-size: var(--text-sm); color: var(--color-ink-2); min-height: 44px; }
.check input { width: 22px; height: 22px; margin: var(--space-3xs) 0 0; accent-color: var(--color-ink); flex: none; }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.check .field__err { grid-column: 2; }
.picked { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-soft-ink); }
.picked:empty { display: none; }
.form__help { min-height: 1lh; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.form__help[data-state="error"] { color: var(--color-error); }
.form__done { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg); border-radius: 10px; background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.form__done h3 { color: var(--color-accent-soft-ink); }
.form__done:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* footer: colophon block */
.footer { border-top: var(--rule-hair) solid var(--color-ink); padding-block: var(--space-2xl) var(--space-xl); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--gap-columns); }
@media (max-width: 52rem) { .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }
.footer__brand { display: grid; gap: var(--space-sm); justify-items: start; }
.footer address { font-style: normal; color: var(--color-ink-2); }
.footer__phone { font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.02em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer__phone:hover { color: var(--color-accent); }
.footer__h { font-size: var(--text-md); letter-spacing: -0.01em; margin-bottom: var(--space-sm); }
.footer__grid p { color: var(--color-ink-2); }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__links a:hover, .footer__fine a:hover { color: var(--color-accent); }
.footer__fine { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-sm); }
.footer__fine p { max-width: 75ch; color: var(--color-muted); font-size: var(--text-sm); }
.footer__fine a { color: var(--color-ink-2); }