/* Hallmark · shape: Shop Ledger (navy hero split with a working photo, then colour-blocked bands) · genre: editorial · theme: custom · job: book · idea: "A family shop that tells you what is urgent, what can wait and what is fine, before a wrench turns" · vibe: "solid, friendly, established, straight-talking, second generation"
 * paper: oklch(99.2% 0.003 250) · accent: oklch(71% 0.175 52) · display: Bitter · body: Atkinson Hyperlegible · hero: navy block, headline and two actions left, a technician under a lifted car bleeding off the right edge, orange and gold stripe under it · nav: shield logo, links, phone button · footer: navy columns with address, hours, links, credits · imagery: photographs · signature: the three-list inspection, fix today, plan for soon, fine for now
 * axes: light/slab-serif/chromatic-orange · posture: colour-blocked · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V5 · weakest: S, the shop is fictional so its facts are slots; carried specificity with the three-list inspection and the shop's own hours driving the drop-off times */
/* waive 58: the brief requires hero, trust strip, services, steps, reviews, FAQ, map, hours and a closing call on Home, and a full block per service; the words are the shop working content, each screen still carries one idea */
/* answered: palette is the client's own ask (navy, orange or gold, white), so the category-colour rule is overridden by the user's words */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Base ---------- */
body { font-size: var(--text-md); line-height: 1.6; }
h1, h2, h3 { font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.08; color: inherit; }
h2 { font-size: var(--text-section); }
h3 { font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 46ch; }
.section { padding-block: var(--section-gap-s); }
.section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); max-width: 44rem; }
.section-head p { color: var(--color-ink-2); font-size: var(--text-lead); }
.tint { background: var(--color-paper-2); }
.navy { background: var(--color-navy); color: var(--color-on-navy); }
.navy .lead, .navy .section-head p { color: var(--color-on-navy-2); }
.navy :focus-visible { outline-color: var(--color-focus-on-navy); }
.orange { background: var(--color-accent); color: var(--color-accent-ink); }
.orange .section-head p { color: var(--color-accent-ink); }
a:hover { text-decoration-thickness: 2px; }
.skip { min-height: 44px; display: inline-flex; align-items: center; position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-navy); color: var(--color-on-navy); }
.skip:focus-visible { top: var(--space-md); }

/* A fact the shop fills in */
.fill { padding: 0 0.3em; border: 1px dashed currentColor; border-radius: 4px; color: inherit; opacity: 0.85; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 2px solid var(--color-accent); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.navy .btn:focus-visible, .orange .btn:focus-visible { outline-color: var(--color-focus-on-navy); }
.orange .btn:focus-visible { outline-color: var(--color-navy); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: color-mix(in oklab, currentColor 10%, transparent); border-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.textlink:hover { text-decoration-thickness: 3px; }
.textlink:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- Ribbon ---------- */
.ribbon { background: var(--color-gold); color: var(--color-accent-ink); font-size: var(--text-sm); }
.ribbon .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2xs) var(--space-md); padding-block: 0; text-align: center; }
.ribbon a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.ribbon a:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 1px; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 80px; }
.logo { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-navy); text-decoration: none; min-height: 48px; }
.logo:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }
.logo svg { width: 42px; height: 48px; flex: none; }
.logo__words { display: grid; line-height: 1; }
.logo__name { font: 800 1.5rem/1 var(--font-display); letter-spacing: var(--tracking-display); }
.logo__sub { margin-top: var(--space-2xs); font: 700 var(--text-sm)/1 var(--font-body); color: var(--color-accent-ink); }
.logo__sub span { color: var(--color-accent); }
.nav { display: flex; align-items: center; gap: var(--space-2xs); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: 4px; font-weight: 700; color: var(--color-ink); text-decoration: none; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav a:hover { background: var(--color-paper-2); }
.nav a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 0; }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--color-accent); border-radius: 0; }
.header-phone { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-input); background: var(--color-navy); color: var(--color-on-navy); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out); }
.header-phone:hover { background: var(--color-navy-2); }
.header-phone:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.header-phone svg { width: 18px; height: 18px; color: var(--color-gold); }
.menu-btn { display: none; align-items: center; gap: var(--space-xs); min-height: 48px; min-width: 48px; padding: 0 var(--space-sm); border: 2px solid var(--color-navy); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-navy); font-weight: 700; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.menu-btn:hover { background: var(--color-paper-2); }
.menu-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.menu-btn svg { width: 20px; height: 20px; }

@media (max-width: 60rem) {
  .header-phone__num { display: none; }
}
@media (max-width: 52rem) {
  .site-header .container { flex-wrap: wrap; min-height: 68px; }
  .logo svg { width: 36px; height: 41px; }
  .logo__name { font-size: 1.3rem; }
  .js .menu-btn { display: inline-flex; }
  .header-phone { display: none; }
  .nav { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--space-sm); }
  .nav a { min-height: 48px; border-top: 1px solid var(--color-rule); padding: 0 var(--space-2xs); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--color-accent); padding-left: var(--space-sm); }
  .js .nav:not(.is-open) { display: none; }
}

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: clamp(520px, 72dvh, 640px); background: var(--color-navy); color: var(--color-on-navy); border-bottom: 10px solid var(--color-accent); box-shadow: 0 4px 0 var(--color-gold); }
.hero__text { display: grid; align-content: center; gap: var(--space-lg); padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.hero h1 { font-size: var(--text-display); max-width: 12ch; }
.hero .lead { color: var(--color-on-navy-2); }
.hero__note { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-on-navy-2); }
.hero__note strong { color: var(--color-gold); }
.hero__photo { position: relative; margin: 0; min-height: 320px; }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__text { padding: var(--space-xl) var(--gutter) var(--space-xl); gap: var(--space-md); }
  .hero__photo { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .hero .actions .btn { flex: 1 1 100%; }
}

/* ---------- Trust strip ---------- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-xl); }
.trust__item { display: grid; gap: var(--space-2xs); align-content: start; padding-top: var(--space-md); border-top: 5px solid var(--color-accent); }
.trust__item:nth-child(even) { border-top-color: var(--color-navy); }
.trust__big { font: 800 var(--text-xl)/1.15 var(--font-display); color: var(--color-navy); }
.trust__small { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 52rem) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); } .trust__big { font-size: var(--text-lg); } }

/* ---------- Signature: the three lists ---------- */
.lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.list { display: grid; grid-template-rows: auto 1fr; background: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.list__head { display: grid; gap: var(--space-2xs); padding: var(--space-lg); }
.list__head h3 { font-size: var(--text-xl); }
.list__head p { font-size: var(--text-sm); }
.list--now .list__head { background: var(--color-accent); color: var(--color-accent-ink); }
.list--soon .list__head { background: var(--color-gold); color: var(--color-accent-ink); }
.list--fine .list__head { background: var(--color-navy); color: var(--color-on-navy); }
.list ul { margin: 0; padding: var(--space-md) var(--space-lg) var(--space-lg); list-style: none; }
.list li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.list li:last-child { border-bottom: 0; }
.lists__note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 52rem) { .lists { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap-columns); border-top: 3px solid var(--color-navy); }
.svc-grid__item { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); }
.svc-grid__item h3 a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--color-navy); }
.svc-grid__item h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.svc-grid__item h3 a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.svc-grid__item p { color: var(--color-ink-2); }
.svc-more { margin-top: var(--space-xl); }
@media (max-width: 60rem) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: 3px solid var(--color-navy); counter-increment: step; }
.steps li::before { content: counter(step); font: 800 var(--text-3xl)/1 var(--font-display); color: var(--color-navy); }
.steps h3 { font-size: var(--text-lg); }
@media (max-width: 60rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); } }
@media (max-width: 40rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.review-slot { margin: 0; display: grid; gap: var(--space-md); align-content: start; min-height: 220px; padding: var(--space-lg); border: 2px dashed var(--color-navy-3); border-radius: var(--radius-card); background: var(--color-navy-2); }
.review-slot__stars { display: flex; gap: var(--space-2xs); color: var(--color-gold); }
.review-slot__stars svg { width: 20px; height: 20px; }
.review-slot blockquote { margin: 0; font: 700 var(--text-lg)/1.35 var(--font-display); }
.review-slot p { font-size: var(--text-sm); color: var(--color-on-navy-2); }
@media (max-width: 52rem) { .reviews { grid-template-columns: minmax(0, 1fr); } .review-slot { min-height: 0; } }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); align-items: start; }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq details:first-child { border-top: 3px solid var(--color-navy); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding: var(--space-sm) 0; font: 700 var(--text-lg)/1.3 var(--font-display); color: var(--color-navy); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font: 800 1.25rem/1 var(--font-body); transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }
@media (max-width: 52rem) { .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* ---------- Visit ---------- */
.visit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-2xl); align-items: start; }
.map-slot { display: grid; place-items: center; aspect-ratio: 16 / 10; border: 2px dashed var(--color-navy-3); border-radius: var(--radius-card); color: var(--color-ink-2); text-align: center; padding: var(--space-lg); background:
  linear-gradient(90deg, transparent 47%, var(--color-paper) 47%, var(--color-paper) 53%, transparent 53%),
  linear-gradient(0deg, transparent 62%, var(--color-paper) 62%, var(--color-paper) 66%, transparent 66%),
  var(--color-paper-3); }
.map-slot__pin { display: grid; gap: var(--space-xs); justify-items: center; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.map-slot__pin svg { width: 28px; height: 28px; color: var(--color-accent); }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); text-align: left; font-weight: 400; }
.hours td { text-align: right; font-weight: 700; }
.hours caption { text-align: left; font: 800 var(--text-xl)/1.2 var(--font-display); color: var(--color-navy); padding-bottom: var(--space-sm); }
.visit__info { display: grid; gap: var(--space-lg); }
.visit__info address { font-style: normal; font-size: var(--text-lg); }
.area { padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-gold); border-radius: var(--radius-card); background: var(--color-gold-soft); }
@media (max-width: 52rem) { .visit { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* ---------- Final call ---------- */
.final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.final h2 { max-width: 18ch; }

/* ---------- Inner page heads ---------- */
.page-head { background: var(--color-navy); color: var(--color-on-navy); border-bottom: 10px solid var(--color-accent); box-shadow: 0 4px 0 var(--color-gold); }
.page-head .container { display: grid; gap: var(--space-md); padding-block: var(--space-2xl); }
.page-head h1 { font-size: var(--text-display-s); max-width: 18ch; }
.page-head .lead { color: var(--color-on-navy-2); }
.page-head--photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.page-head--photo .page-head__text { display: grid; gap: var(--space-md); align-content: center; padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.page-head--photo figure { position: relative; margin: 0; min-height: 300px; overflow: hidden; }
.page-head--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 52rem) {
  .page-head .container { padding-block: var(--space-xl); }
  .page-head--photo { grid-template-columns: minmax(0, 1fr); }
  .page-head--photo .page-head__text { padding: var(--space-xl) var(--gutter); }
  .page-head--photo figure { min-height: 0; aspect-ratio: 16 / 9; }
}

/* Jump links */
.jump { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 2px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-navy); font-weight: 700; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.jump a:hover { border-color: var(--color-accent); }
.jump a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Service blocks ---------- */
.svc { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); scroll-margin-top: var(--space-lg); }
.svc:first-of-type { border-top: 3px solid var(--color-navy); }
.svc__intro { display: grid; gap: var(--space-md); align-content: start; }
.svc__intro h2 { font-size: var(--text-2xl); color: var(--color-navy); }
.svc__intro p { color: var(--color-ink-2); }
.svc__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.svc__lists h3 { font-size: var(--text-lg); padding-bottom: var(--space-xs); border-bottom: 3px solid var(--color-accent); margin-bottom: var(--space-xs); }
.svc__lists div:nth-child(2) h3 { border-bottom-color: var(--color-gold); }
.svc__lists ul { margin: 0; padding-left: 1.2em; }
.svc__lists li { padding: var(--space-2xs) 0; }
.svc__lists li::marker { color: var(--color-accent); }
@media (max-width: 52rem) { .svc { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); } }
@media (max-width: 40rem) { .svc__lists { grid-template-columns: minmax(0, 1fr); } }

/* ---------- About ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.story__text { display: grid; gap: var(--space-md); }
.story__text p { color: var(--color-ink-2); font-size: var(--text-lead); }
.photo { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius-card); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.team li { display: grid; gap: var(--space-xs); }
.slot { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: var(--space-md); border: 2px dashed var(--color-navy-3); border-radius: var(--radius-card); background: var(--color-paper-3); color: var(--color-ink-2); text-align: center; font-size: var(--text-sm); }
.slot svg { width: 40px; height: 40px; color: var(--color-navy-3); margin-inline: auto; margin-bottom: var(--space-xs); }
.team strong { font: 800 var(--text-lg)/1.2 var(--font-display); color: var(--color-navy); }
.team span { color: var(--color-muted); font-size: var(--text-sm); }
.certs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.badge-slot { display: grid; place-items: center; gap: var(--space-xs); min-height: 150px; padding: var(--space-md); border: 2px dashed var(--color-on-navy-2); border-radius: var(--radius-card); text-align: center; color: var(--color-on-navy); }
.badge-slot svg { width: 40px; height: 46px; color: var(--color-gold); }
.warranty { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: start; }
.warranty__card { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-gold-soft); border-top: 8px solid var(--color-gold); }
.warranty__big { font: 800 var(--text-3xl)/1.05 var(--font-display); color: var(--color-navy); }
.warranty ul { margin: 0; padding-left: 1.2em; }
.warranty li { padding: var(--space-2xs) 0; }
@media (max-width: 60rem) { .team, .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 52rem) { .story, .warranty { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* ---------- Fleet ---------- */
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
.perk { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.perk__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-card); background: var(--color-navy); color: var(--color-gold); }
.perk__mark svg { width: 28px; height: 28px; }
.perk h3 { margin-bottom: var(--space-2xs); color: var(--color-navy); }
.perk p { color: var(--color-ink-2); }
@media (max-width: 52rem) { .perks { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Forms ---------- */
.form-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-2xl); align-items: start; }
.form-aside { display: grid; gap: var(--space-lg); position: sticky; top: var(--space-lg); }
.callbox { display: grid; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-navy); color: var(--color-on-navy); }
.callbox p { color: var(--color-on-navy-2); }
.callbox .btn:focus-visible { outline-color: var(--color-focus-on-navy); }
.form { display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); border-top: 6px solid var(--color-accent); box-shadow: 0 1px 3px var(--color-shadow); }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend { padding: 0; font: 800 var(--text-xl)/1.2 var(--font-display); color: var(--color-navy); margin-bottom: var(--space-md); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); align-content: start; }
.field + .field { margin-top: 0; }
.stack { display: grid; gap: var(--space-md); }
.field label, .label { font-weight: 700; color: var(--color-ink); }
.field .opt { font-weight: 400; color: var(--color-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: var(--space-sm) var(--space-md); border: 2px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 3px solid transparent; outline-offset: 1px; transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); border-color: var(--color-focus); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.hint { font-size: var(--text-sm); color: var(--color-muted); }
.error { min-height: 0; font-size: var(--text-sm); font-weight: 700; color: var(--color-error); }
.error:empty { display: none; }
.check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.check input { width: 24px; height: 24px; margin: var(--space-3xs) 0 0; accent-color: var(--color-navy); }
.check input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.form-status { font-weight: 700; }
.form-status:empty { display: none; }
.form-status.is-error { padding: var(--space-md); border: 1px solid var(--color-error); border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-error) 8%, var(--color-paper)); color: var(--color-error); }

/* Drop-off times */
.dropoff { display: grid; gap: var(--space-md); }
.dropoff__day { display: grid; gap: var(--space-xs); }
.dropoff__day-name { font-weight: 700; color: var(--color-ink-2); font-size: var(--text-sm); }
.dropoff__times { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip label { display: inline-flex; align-items: center; min-height: 46px; padding: 0 var(--space-md); border: 2px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-navy); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.chip label:hover { border-color: var(--color-navy-3); }
.chip input:checked + label { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-navy); }
.chip input:focus-visible + label { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.dropoff__tz { font-size: var(--text-sm); color: var(--color-muted); }

/* Success state */
.success { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); border-top: 6px solid var(--color-success); box-shadow: 0 1px 3px var(--color-shadow); }
.success h2 { font-size: var(--text-2xl); color: var(--color-navy); }
.success p { color: var(--color-ink-2); }
.success .honest { padding: var(--space-md); border: 1px solid var(--color-gold); border-radius: var(--radius-card); background: var(--color-gold-soft); color: var(--color-ink); }
.success:focus { outline: none; }
.success:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 60rem) { .form-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .form-aside { position: static; } }
@media (max-width: 40rem) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .form, .success { padding: var(--space-lg) var(--space-md); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-navy-deep); color: var(--color-on-navy-2); font-size: var(--text-sm); border-top: 6px solid var(--color-accent); }
.site-footer .container { padding-block: var(--space-2xl) var(--space-xl); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.site-footer h2 { font-size: var(--text-lg); color: var(--color-on-navy); margin-bottom: var(--space-sm); letter-spacing: 0; }
.site-footer address { font-style: normal; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-navy); }
.site-footer a:focus-visible { outline: 3px solid var(--color-focus-on-navy); outline-offset: 1px; }
.site-footer .logo { color: var(--color-on-navy); }
.site-footer .logo__sub { color: var(--color-on-navy-2); }
.footer-hours { display: grid; grid-template-columns: auto auto; justify-content: start; gap: var(--space-2xs) var(--space-md); margin: 0; font-variant-numeric: tabular-nums; }
.footer-hours dt { color: var(--color-on-navy-2); }
.footer-hours dd { margin: 0; color: var(--color-on-navy); }
.footer-base { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-navy-3); }
.footer-base p { max-width: none; }
.footer-base .credits a { display: inline; min-height: 0; }
@media (max-width: 60rem) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Phone bottom bar ---------- */
.callbar { display: none; }
@media (max-width: 52rem) {
  body { padding-bottom: 76px; }
  .callbar { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); padding: var(--space-xs) var(--space-xs) max(var(--space-xs), env(safe-area-inset-bottom)); background: var(--color-navy); box-shadow: 0 -2px 10px var(--color-shadow); }
  .callbar .btn { min-height: 56px; padding: 0 var(--space-sm); }
  .callbar .btn:focus-visible { outline-color: var(--color-focus-on-navy); }
  .callbar .btn--ghost { color: var(--color-on-navy); }
}

/* ---------- Logo parts ---------- */
.logo-band { fill: var(--color-accent); }
.logo-band2 { fill: var(--color-gold); }
.logo-r { fill: var(--color-paper); font: 800 20px var(--font-display); }
.site-footer .logo-r { fill: var(--color-navy-deep); }
.header-phone__short { display: none; }
@media (max-width: 60rem) { .header-phone__short { display: inline; } }
.page-head--photo .zoom img { transform: scale(1.7); transform-origin: 66% 72%; }