/* =========================================================
   Auto Star Service Center
   Palette: shop-floor charcoal, warning gold, clean paper
   Display: Barlow Condensed (signage / stencil register)
   Body:    Inter
   ========================================================= */

:root {

    /* Motion. Matches admin.css — the two files load independently and
       neither can rely on the other defining these. */
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-inout:  cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    /* Durations.
       
       Three, not twelve. .12s, .14s, .15s and .16s were all doing the
       same job — hover feedback on cards and inputs — and 20ms is not a
       difference anybody can see. The point of naming them is that the
       next person adding a component picks one of three instead of
       inventing a thirteenth. */
    --dur-fast: 120ms;   /* hover, focus, press */
    --dur-base: 180ms;   /* menus, panels, icons */
    --dur-slow: 300ms;   /* drawers, sidebar, progress */
    --ink:        #14161a;
    --ink-2:      #1e2228;
    --ink-3:      #2b3038;
    --paper:      #ffffff;
    --paper-2:    #f4f5f7;
    --line:       #dfe2e7;
    --gold:       #e8b21a;
    --gold-dark:  #b88a0c;
    --text:       #2c3138;
    --text-muted: #676f7a;

    --wrap: 1180px;
    --radius: 4px;
    --shadow: 0 1px 2px rgba(20, 22, 26, .06), 0 8px 24px rgba(20, 22, 26, .06);

    --display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--text);
    background: var(--paper);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-dark); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.sr-only, .skip:not(:focus) {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
    position: absolute; z-index: 100; top: .5rem; left: .5rem;
    background: var(--gold); color: var(--ink); padding: .6rem 1rem; font-weight: 600;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.005em;
    color: var(--ink);
    margin: 0 0 .5em;
    text-transform: uppercase;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.35rem; }

.eyebrow {
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin: 0 0 .6rem;
}
.lede { font-size: 1.15rem; color: var(--text-muted); max-width: 62ch; }
.muted { color: var(--text-muted); }
.small { font-size: .9rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--display); font-size: 1.05rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
    padding: .75rem 1.4rem; border: 2px solid transparent; border-radius: var(--radius);
    cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: .95rem 1.9rem; font-size: 1.15rem; }
.btn--block { display: flex; width: 100%; margin-bottom: .6rem; }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-dark); color: var(--ink); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-3); color: #fff; }
.btn--ghost { border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: rgba(232, 178, 26, .14); }

.link-arrow {
    font-family: var(--display); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; text-decoration: none; color: var(--gold-dark);
}
.link-arrow::after { content: " →"; }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--ink); color: #c9ced6; font-size: .85rem; }
.topbar__inner {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; min-height: 40px; flex-wrap: wrap;
}
.topbar__addr { color: #c9ced6; text-decoration: none; }
.topbar__addr:hover { color: var(--gold); }

.status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.status--open { color: #6ee7a8; }
.status--open .status__dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); }
.status--closed { color: #9aa2ad; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }

.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.brand__star { color: var(--gold); font-size: 2rem; line-height: 1; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text strong {
    font-family: var(--display); font-size: 1.55rem; letter-spacing: .04em; color: var(--ink);
}
.brand__text small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav a {
    font-family: var(--display); font-size: 1.05rem; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--ink);
    padding: .3rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }

.nav-toggle { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block; width: 24px; height: 2px; background: var(--ink); content: "";
}
.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after { transform: translateY(5px); }

/* ---------- Hero ---------- */
.hero {
    background:
        linear-gradient(180deg, rgba(20,22,26,.94), rgba(20,22,26,.88)),
        repeating-linear-gradient(135deg, #1e2228 0 22px, #191c21 22px 44px);
    color: #fff; padding: clamp(3.5rem, 9vw, 6.5rem) 0;
}
.hero h1 { color: #fff; max-width: 18ch; }
.hero .lede { color: #cfd4db; }
.hero .eyebrow { color: var(--gold); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 2.5rem; }
.hero__actions .btn--ghost { color: #fff; }
.hero__proof {
    display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255,255,255,.14); color: #b9c0c9; font-size: .95rem;
}
.hero__proof li::before { content: "★ "; color: var(--gold); }

.page-hero { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 3rem 0 2.5rem; }
.crumbs { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }
.crumbs a { color: var(--text-muted); }
.crumbs span[aria-hidden] { margin: 0 .4rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section--alt { background: var(--paper-2); }
.section__title { margin-bottom: .4rem; }
.section__lede { max-width: 60ch; color: var(--text-muted); margin-bottom: 2.5rem; }

.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.6rem; transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow); border-color: var(--gold); }
.card__icon { font-size: 1.6rem; color: var(--gold); display: block; margin-bottom: .6rem; }
.card h2, .card h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.card h2 a, .card h3 a { text-decoration: none; }
.card p { margin: 0 0 1rem; color: var(--text-muted); font-size: .96rem; }
.card time { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark); }

.split { display: grid; gap: 3rem; grid-template-columns: 1.1fr .9fr; align-items: start; }
.stats { display: grid; gap: 1rem; }
.stat {
    background: var(--paper); border-left: 4px solid var(--gold);
    padding: 1.1rem 1.3rem; box-shadow: var(--shadow);
}
.stat strong {
    display: block; font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--ink);
}
.stat span { font-size: .92rem; color: var(--text-muted); }

.marques { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.marque { border-top: 3px solid var(--ink); padding-top: 1.1rem; }
.marque h3 { color: var(--gold-dark); }
.marque__list {
    font-family: var(--display); letter-spacing: .08em; text-transform: uppercase;
    font-size: .95rem; color: var(--text-muted);
}

/* ---------- Prose ---------- */
.prose { max-width: 72ch; }
.prose--narrow { max-width: 66ch; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .45rem; }
.prose blockquote {
    margin: 1.8rem 0; padding: .2rem 0 .2rem 1.3rem;
    border-left: 4px solid var(--gold); color: var(--text-muted); font-style: italic;
}

/* ---------- Service / contact layouts ---------- */
.service-layout, .contact-layout { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.sidebar { display: grid; gap: 1.25rem; position: sticky; top: 100px; }
.sidebar__box { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.sidebar__box h2 { font-size: 1.3rem; }
.sidebar__box h3 { font-size: 1.05rem; margin-top: 1.2rem; }

/* ---------- Forms ---------- */
.form { max-width: 640px; }
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    width: 100%; font: inherit; font-size: 1rem; padding: .7rem .85rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(232,178,26,.25); }
textarea { resize: vertical; }
.field__error { color: #b91c1c; font-size: .88rem; margin: .35rem 0 0; }
.hp { position: absolute; left: -9999px; }

.notice { padding: .9rem 1.1rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.notice--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.notice--bad { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.empty { color: var(--text-muted); }

.map-band iframe { width: 100%; height: 380px; border: 0; display: block; filter: grayscale(.25); }

/* ---------- CTA band + footer ---------- */
.band { background: var(--gold); color: var(--ink); padding: 2.75rem 0; }
.band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.band h2 { margin-bottom: .25rem; }
.band p { margin: 0; }
.band__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.band .btn--gold { background: var(--ink); color: #fff; }
.band .btn--gold:hover { background: var(--ink-3); }

.site-footer { background: var(--ink); color: #aeb5bf; padding: 3.5rem 0 1.5rem; font-size: .94rem; }
.site-footer h3 {
    color: #fff; font-size: 1.05rem; letter-spacing: .1em; margin-bottom: .9rem;
}
.site-footer a { color: #aeb5bf; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.brand--footer .brand__text strong { color: #fff; }
.footer-links, .social { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links--wide { columns: 2; }
.social { display: flex; gap: 1rem; margin-top: 1rem; }
.footer-nap { font-style: normal; line-height: 1.7; }
.footer-bottom {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.1);
    font-size: .85rem;
}
.footer-bottom p { margin: 0; }

/* Mobile sticky call bar — hidden on desktop where the header CTA is visible */


/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .split, .service-layout, .contact-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    /* Nav rules for this breakpoint were superseded by the drawer at
       1100px further down; keeping a second, contradictory set here is
       how the toggle ended up keyed on an attribute nothing reads. */
    .nav ul { flex-direction: column; gap: .2rem; }
    .nav a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--line); }
    .site-header__inner { flex-wrap: wrap; }
    .field-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Hero images (set from the admin panel) ---------- */
.page-hero--image {
    background-size: cover;
    background-position: center;
    color: #fff;
    border-bottom: 0;
}
.page-hero--image h1 { color: #fff; }
.page-hero--image .lede { color: #d6dae0; }
.page-hero--image .crumbs,
.page-hero--image .crumbs a,
.page-hero--image .muted { color: #b9c0c9; }
.page-hero--image .eyebrow { color: var(--gold); }
/* The gold border under the current crumb disappears against a photo. */
.page-hero--image .crumbs a:hover { color: #fff; }

.post-image { margin-top: 2.5rem; }
.post-image img { width: 100%; border-radius: var(--radius); }

.prose img { border-radius: var(--radius); margin: 1.5rem 0; }

/* =====================================================================
   Content blocks (built in the admin block editor)
   ===================================================================== */

.align-center { text-align: center; }
.align-right  { text-align: right; }

.block-image { margin: 2rem 0; }
.block-image img { width: 100%; border-radius: var(--radius); }
.block-image figcaption { margin-top: .6rem; font-size: .9rem; color: var(--text-muted); }
.block-image--wide { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.block-image--wide img { border-radius: 0; }

.block-split {
    display: grid; gap: 2.5rem; align-items: center;
    grid-template-columns: 1fr 1fr; margin: 3rem 0;
}
.block-split--flip .block-split__media { order: 2; }
.block-split__media img { width: 100%; border-radius: var(--radius); }
.block-split__body h2 { margin-bottom: .6rem; }

.block-features {
    display: grid; gap: 1.25rem; margin: 2.5rem 0;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.block-feature {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.5rem;
}
.block-feature__icon { display: block; font-size: 1.6rem; color: var(--gold); margin-bottom: .5rem; }
.block-feature h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.block-feature p { margin: 0; color: var(--text-muted); font-size: .95rem; }

.block-list { list-style: none; padding: 0; margin: 1.75rem 0; }
.block-list li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.block-list li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: var(--gold-dark); font-weight: 700;
}

.block-faq { margin: 2rem 0; border-top: 1px solid var(--line); }
.block-faq__item { border-bottom: 1px solid var(--line); }
.block-faq__item summary {
    cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; position: relative;
    font-family: var(--display); font-size: 1.2rem; text-transform: uppercase;
    letter-spacing: .01em; list-style: none;
}
.block-faq__item summary::-webkit-details-marker { display: none; }
.block-faq__item summary::after {
    content: "+"; position: absolute; right: .3rem; top: 50%;
    transform: translateY(-50%); color: var(--gold-dark); font-size: 1.4rem;
}
.block-faq__item[open] summary::after { content: "−"; }
.block-faq__answer { padding-bottom: 1.2rem; color: var(--text-muted); }
.block-faq__answer p:first-child { margin-top: 0; }

.block-quote {
    margin: 2.5rem 0; padding: .2rem 0 .2rem 1.5rem;
    border-left: 4px solid var(--gold);
}
.block-quote p { font-size: 1.2rem; font-style: italic; color: var(--text); margin: 0 0 .5rem; }
.block-quote cite {
    font-style: normal; font-family: var(--display); letter-spacing: .06em;
    text-transform: uppercase; font-size: .95rem; color: var(--text-muted);
}

.block-button { margin: 1.75rem 0; }

.block-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    flex-wrap: wrap; background: var(--ink); color: #fff;
    padding: 2rem 2.25rem; border-radius: var(--radius); margin: 2.5rem 0;
}
.block-cta h2 { color: #fff; margin-bottom: .3rem; }
.block-cta p { margin: 0; color: #c9ced6; }
.block-cta .block-button { margin: 0; }

.block-gallery {
    display: grid; gap: .8rem; margin: 2.5rem 0;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.block-gallery figure { margin: 0; }
.block-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

.block-spacer--small  { height: 1.5rem; }
.block-spacer--medium { height: 3rem; }
.block-spacer--large  { height: 5rem; }

@media (max-width: 760px) {
    .block-split { grid-template-columns: 1fr; gap: 1.5rem; }
    .block-split--flip .block-split__media { order: 0; }
    .block-cta { flex-direction: column; align-items: flex-start; }
    .block-image--wide { margin-inline: 0; max-width: 100%; }
    .block-image--wide img { border-radius: var(--radius); }
}

/* =====================================================================
   Section bands — colours come from inline styles set in the designer.
   These rules only handle contrast and layout, never the background.
   ===================================================================== */

.sec { position: relative; }
.sec__inner { position: relative; width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.sec__inner--narrow { max-width: 720px; }
.sec__inner--wide   { max-width: 1400px; }
.sec__inner--full   { max-width: none; width: 100%; }

/* Light text on dark or photographic backgrounds. */
.sec--light { color: #cfd4db; }
.sec--light h1, .sec--light h2, .sec--light h3, .sec--light h4 { color: #fff; }
.sec--light .eyebrow { color: var(--gold); }
.sec--light .lede, .sec--light .section__lede { color: #cfd4db; }
.sec--light .btn--ghost { color: #fff; border-color: currentColor; }
.sec--light .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.sec--light .card h3 a, .sec--light .card p { color: #e7eaee; }
.sec--light .stat { background: rgba(255,255,255,.06); }
.sec--light .stat strong { color: #fff; }
.sec--light .stat span { color: #c3c9d1; }
.sec--light .marque { border-top-color: rgba(255,255,255,.25); }
.sec--light .marque h3 { color: var(--gold); }
.sec--light a { color: inherit; }

.sec--darktext .btn--ghost { color: var(--ink); }

.sec--align-center { text-align: center; }
.sec--align-center .hero__actions,
.sec--align-center .block-button { justify-content: center; display: flex; }
.sec--align-center .section__lede,
.sec--align-center .lede { margin-inline: auto; }
.sec--align-right { text-align: right; }

.sec.hero h1 { max-width: 18ch; }
.sec--align-center.hero h1 { max-width: 22ch; margin-inline: auto; }
.sec.hero .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 2.5rem; }
.sec.hero .hero__proof {
    display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 1.5rem 0 0;
    border-top: 1px solid rgba(128,128,128,.25); font-size: .95rem;
}
.sec.hero .hero__proof li::before { content: "\2605 "; color: var(--gold); }
.sec.band .band__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap; margin: 0;
}
.sec.band h2 { margin-bottom: .25rem; }
.sec.band p { margin: 0; }
.sec.band .band__actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* =====================================================================
   Service-area pages + map facade
   ===================================================================== */

.area-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.area {
    display: flex; flex-direction: column; gap: .2rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem 1.15rem; text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.area:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.area strong { font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.area span { font-size: .87rem; color: var(--text-muted); }

.loc-layout { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.loc-lead { font-size: 1.12rem; color: var(--text); border-left: 4px solid var(--gold); padding-left: 1.1rem; }
.loc-facts { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0 0 1.2rem; font-size: .93rem; }
.loc-facts dt { color: var(--text-muted); }
.loc-facts dd { margin: 0; font-weight: 600; }

/* ---- Map facade: no third-party JS until someone asks for it ---- */
.map { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map, .map iframe { height: 380px; width: 100%; display: block; }
.map iframe { border: 0; }
.map__facade {
    width: 100%; height: 100%; border: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    background:
        linear-gradient(rgba(20,22,26,.04), rgba(20,22,26,.04)),
        repeating-linear-gradient(0deg, var(--paper-2) 0 38px, var(--paper) 38px 39px),
        repeating-linear-gradient(90deg, var(--paper-2) 0 52px, var(--paper) 52px 53px);
    font-family: var(--body); color: var(--text);
    transition: filter var(--dur-fast) var(--ease-out);
}
.map__facade:hover { filter: brightness(.98); }
.map__pin { font-size: 2rem; line-height: 1; }
.map__label { font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.map__addr { font-size: .92rem; color: var(--text-muted); }
.map__cta {
    margin-top: .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--gold-dark);
    border: 1px solid currentColor; border-radius: 999px; padding: .35rem .9rem;
}
.map__links { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

@media (max-width: 960px) {
    .loc-layout { grid-template-columns: 1fr; }
    .map, .map iframe { height: 300px; }
}

/* ---------- Customer quotes ---------- */
.reviews__head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.reviews__score { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--ink); }
.reviews__stars { color: var(--gold); font-size: 1.2rem; letter-spacing: .1em; }
.reviews__count { color: var(--text-muted); font-size: .95rem; }
.reviews__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.review {
    margin: 0; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.6rem 1.5rem;
}
.review p { margin: 0 0 .8rem; color: var(--text); }
.review cite {
    font-style: normal; font-size: .82rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted);
}

/* ---------- Legal pages: unfinished clauses must be impossible to miss ---------- */
.prose .placeholder {
    background: rgba(232, 178, 26, .12);
    border-left: 4px solid var(--gold);
    padding: .9rem 1.1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: .95rem;
}
.prose .placeholder strong { color: var(--gold-dark); }

/* ---------- Footer map: on every page, but paid for on none ---------- */
.footer-map { background: var(--paper-2); padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line); }
.footer-map__inner { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
.footer-map__text h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .5rem; }
.footer-map__text p:last-child { margin-bottom: 0; }
.map--compact, .map--compact iframe { height: 260px; }
.map--compact .map__pin { font-size: 1.5rem; }
.map--compact .map__label { font-size: 1.1rem; }
.map__links--compact { margin-top: .8rem; }

@media (max-width: 860px) {
    .footer-map__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .map--compact, .map--compact iframe { height: 220px; }
}

/* ---------- Long-form service copy ---------- */
.prose h2 { margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul li, .prose ol li { margin-bottom: .6rem; }
.prose ul li strong, .prose ol li strong { color: var(--ink); }
.prose > p:first-of-type { font-size: 1.1rem; color: var(--text); }


/* =====================================================================
   Icons and service cards
   Emoji were replaced with stroke SVG. They inherit currentColor, so the
   accent follows whichever theme is active instead of fighting it.
   ===================================================================== */

.icon { display: block; }
.icon-text { font-size: 1.5rem; line-height: 1; }

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    color: var(--gold-dark);
    margin-bottom: 1.15rem;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .card__icon { background: rgba(232, 178, 26, .14); }
}

.block-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    color: var(--gold-dark);
    margin-bottom: 1rem;
    font-size: inherit;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .block-feature__icon { background: rgba(232, 178, 26, .14); }
}

/* Cards: more air, a clearer read, and a hover that suggests depth
   rather than shouting about it. */
.cards { gap: 1.35rem; }
.card {
    padding: 1.85rem 1.75rem;
    display: flex;
    flex-direction: column;
}
.card h2, .card h3 { margin-bottom: .55rem; line-height: 1.2; }
.card p { flex: 1 1 auto; margin-bottom: 1.15rem; line-height: 1.6; }
.card .link-arrow { align-self: flex-start; }
.card:hover .card__icon {
    background: var(--gold);
    color: var(--ink);
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.card__icon { transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }

/* Iframe sits flush inside the rounded container. */
.map iframe { border: 0; display: block; width: 100%; height: 100%; }

/* =====================================================================
   Blog
   ===================================================================== */

.feature-post {
    display: block; text-decoration: none;
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: 2rem;
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.feature-post:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.feature-post__tag {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gold-dark); margin-bottom: .8rem;
}
.feature-post h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: .7rem; }
.feature-post p { color: var(--text-muted); max-width: 60ch; margin-bottom: 1.2rem; font-size: 1.05rem; }
.feature-post__meta { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; font-size: .88rem; color: var(--text-muted); }

.post-card time { display: block; margin-bottom: .5rem; }
.post-grid { margin-top: 0; }

.page-hero--post h1 { max-width: 22ch; }
.post-meta { color: var(--text-muted); font-size: .92rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.post-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}
.post-cta h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom: .3rem; }
.post-cta p { margin: 0; color: var(--text-muted); }
.post-cta__actions { display: flex; gap: .7rem; flex-wrap: wrap; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.post-nav__link {
    display: block; text-decoration: none; padding: 1.1rem 1.3rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease-out);
}
.post-nav__link:hover { border-color: var(--gold); }
.post-nav__link span { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .25rem; }
.post-nav__link strong { color: var(--ink); font-size: 1rem; line-height: 1.3; }
.post-nav__link--next { text-align: right; }

.prose--narrow h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.prose--narrow blockquote { font-size: 1.1rem; }

@media (max-width: 700px) {
    .post-nav { grid-template-columns: 1fr; }
    .post-nav__link--next { text-align: left; }
    .post-cta { flex-direction: column; align-items: flex-start; }
}


/* =====================================================================
   Image logo

   Height is driven by --logo-h, set per-instance from the admin setting.
   The header bar sizes itself from the same variable rather than a fixed
   min-height, so raising the logo size does not crop it or leave it
   floating in a bar built for a wordmark.
   ===================================================================== */

.brand--image { gap: 0; }
.brand--image .brand__star,
.brand--image .brand__text { display: none; }

.brand__logo {
    display: block;
    height: var(--logo-h, 48px);
    width: auto;
    max-width: min(420px, 46vw);
    object-fit: contain;
}

/* The header grows with the logo. 22px of breathing room above and below
   keeps it from touching the edges at any size. */
.site-header__inner {
    min-height: max(76px, calc(var(--logo-h, 48px) + 44px));
}

@media (max-width: 760px) {
    .brand__logo { max-width: min(230px, 52vw); height: min(var(--logo-h, 48px), 46px); }
    .site-header__inner { min-height: auto; padding: .7rem 0; }
}

/* ---------- Site photo slots ---------- */
.sidebar__photo { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.sidebar__photo img { width: 100%; height: 200px; object-fit: cover; display: block; }
.sidebar__photo figcaption { padding: .6rem .9rem; font-size: .85rem; color: var(--text-muted); background: var(--paper); }
.shop-photo { margin-bottom: 2rem; }
.shop-photo img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); }

/* =====================================================================
   Photo slots and their admin-only placeholders
   ===================================================================== */

.slot-photo { margin: 0; border-radius: var(--radius); overflow: hidden; }
.slot-photo img { width: 100%; display: block; object-fit: cover; }
.slot-photo figcaption { padding: .7rem .95rem; font-size: .88rem; color: var(--text-muted); background: var(--paper-2); }

.photo-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem; text-align: center; text-decoration: none;
    min-height: 220px; padding: 1.5rem;
    border: 2px dashed var(--gold); border-radius: var(--radius);
    background: repeating-linear-gradient(45deg,
        rgba(232,178,26,.05) 0 12px, transparent 12px 24px);
    color: var(--text-muted);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.photo-empty:hover { background: rgba(232,178,26,.12); border-color: var(--gold-dark); color: var(--text); }
.photo-empty__icon { font-size: 1.8rem; color: var(--gold-dark); line-height: 1; }
.photo-empty__label {
    font-family: var(--display); font-size: 1.1rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink);
}
.photo-empty__hint { font-size: .85rem; max-width: 40ch; line-height: 1.45; }
.photo-empty__cta {
    margin-top: .4rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gold-dark); border: 1px solid currentColor; border-radius: 999px; padding: .25rem .7rem;
}

.photo-band { padding: 0 0 clamp(2.5rem, 6vw, 4rem); }
.photo-pair { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.slot-photo--tall img { height: 380px; }
.slot-photo--wide img { height: 420px; }
.slot-photo--side img { height: 300px; }

@media (max-width: 760px) {
    .photo-pair { grid-template-columns: 1fr; }
    .slot-photo--tall img, .slot-photo--wide img { height: 240px; }
}

/* Signed-in strip. Never rendered for a visitor. */
.admin-strip {
    background: var(--ink); color: var(--gold);
    font-family: var(--body); font-size: .82rem;
    padding: .5rem 1rem; text-align: center;
}
.admin-strip a { color: #fff; margin-left: .5rem; }

/* =====================================================================
   Gallery
   ===================================================================== */

.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gallery__item { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gallery__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__open img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.gallery__item:hover .gallery__open img { transform: scale(1.03); }
.gallery__item figcaption { padding: .85rem 1rem; font-size: .9rem; color: var(--text-muted); }
.gallery__item figcaption strong { display: block; color: var(--ink); font-size: .95rem; margin-bottom: .15rem; }

.lightbox {
    position: fixed; inset: 0; z-index: 90; background: rgba(10, 11, 13, .93);
    display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 90vw; max-height: 88vh; text-align: center; }
.lightbox__figure img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius); }
.lightbox__figure figcaption { color: #d7dbe2; margin-top: .9rem; font-size: .95rem; }
.lightbox__close, .lightbox__nav {
    position: absolute; background: rgba(255,255,255,.1); border: 0; color: #fff;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.6rem; line-height: 1;
}
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__nav--prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.22); }

@media (max-width: 600px) {
    .lightbox { padding: 1rem; }
    .lightbox__nav { width: 40px; height: 40px; }
}

/* ---------- Online booking ---------- */
.booking-frame {
    border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; background: var(--paper);
}
.booking-frame iframe { width: 100%; height: 760px; border: 0; display: block; }
.booking-note { margin-top: 1rem; }
.booking-services { columns: 2; }

@media (max-width: 760px) {
    .booking-frame iframe { height: 620px; }
    .booking-services { columns: 1; }
    .header-book { display: none; }
}

/* =====================================================================
   Booking form
   ===================================================================== */

.booking-form { max-width: 760px; }
/* Fieldsets carry an implicit min-inline-size of min-content, so they
   refuse to shrink below the widest row inside them. The result is that
   flex children stop wrapping and overflow sideways instead. Resetting
   min-width is the standard fix and has to be on the fieldset itself. */
fieldset { min-width: 0; }

.step {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0 1.5rem 1.5rem; margin: 0 0 1.5rem;
    min-width: 0;
}
.step legend {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--display); font-size: 1.3rem; text-transform: uppercase;
    letter-spacing: .02em; color: var(--ink); padding: 0 .6rem;
}
.step__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--gold); color: var(--ink); font-size: .95rem;
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.chip { margin: 0; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
    display: inline-block; padding: .55rem 1rem; border: 1px solid var(--line);
    border-radius: 999px; font-size: .93rem; background: var(--paper);
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.chip:hover span { border-color: var(--gold); }
.chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.chip--slot span { border-radius: var(--radius); }
.chip.is-full span { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.chip.is-last span { border-color: var(--gold); }

.daystrip {
    display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 .8rem;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    /* The strip is the one thing allowed to scroll sideways, and it needs
       an explicit min-width of 0 so it does that rather than stretching
       its parent. */
    min-width: 0;
    max-width: 100%;
}
.daystrip .day { scroll-snap-align: start; }
.day { margin: 0; cursor: pointer; flex: 0 0 auto; }
.day input { position: absolute; opacity: 0; width: 0; height: 0; }
.day__box {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    width: 64px; padding: .6rem .3rem; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--paper);
    /* Named rather than `all`. Only these three change on hover or when
       checked, and `all` also transitions width, padding and font-size —
       so a reflow anywhere near this control animates the box for no
       reason. */
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.day:hover .day__box { border-color: var(--gold); }
.day input:checked + .day__box { background: var(--ink); border-color: var(--ink); color: #fff; }
.day__wd { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.day__d { font-family: var(--display); font-size: 1.4rem; line-height: 1; }
.day__m { font-size: .7rem; text-transform: uppercase; opacity: .75; }

.slotset {
    /* Ten hourly slots rather than four windows, so a grid rather than a
       wrapping row — even columns read as a timetable instead of a
       ragged block. */
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    min-width: 0;
}
.slotset .chip { max-width: 100%; }
.slotset .chip span {
    display: block;
    text-align: center;
    padding: .7rem .5rem;
    font-size: .95rem;
    white-space: nowrap;
}
.chip--slot.is-last span { border-color: var(--gold); border-width: 2px; }

@media (max-width: 480px) {
    .slotset { grid-template-columns: repeat(3, 1fr); }
    .slotset .chip span { font-size: .86rem; padding: .75rem .2rem; }
}

/* The hidden attribute must win.
   The browser's own stylesheet sets [hidden] { display: none }, but any
   author rule that sets display beats it — so .slotset { display: flex }
   silently un-hid every day's slots at once. This is a global safety net
   rather than a one-off fix, because the same trap applies to every
   element on the site that toggles hidden. */
[hidden] { display: none !important; }
.field-row--3 { grid-template-columns: 90px 1fr 1fr; }

.booked {
    max-width: 620px; background: var(--paper-2); border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0; padding: 2rem 2.25rem;
}
.booked__ref { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.booked h2 { margin: .3rem 0 .6rem; }

@media (max-width: 640px) {
    .field-row--3 { grid-template-columns: 1fr; }
    .step { padding: 0 1rem 1.25rem; }
}

/* =====================================================================
   Booking modal
   ===================================================================== */

.bookmodal {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(10, 11, 13, .6);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.bookmodal[hidden] { display: none; }
.bookmodal__panel {
    background: var(--paper); border-radius: var(--radius);
    width: min(900px, 100%); height: min(90vh, 940px);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}
.bookmodal__bar {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 1.2rem; border-bottom: 1px solid var(--line);
    background: var(--paper-2);
}
.bookmodal__bar strong { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; }
.bookmodal__call { margin-left: auto; font-size: .88rem; }
.bookmodal__close {
    background: none; border: 0; font-size: 1.7rem; line-height: 1;
    cursor: pointer; color: var(--text-muted); padding: 0 .2rem;
}
.bookmodal__close:hover { color: var(--ink); }
.bookmodal iframe { flex: 1; width: 100%; border: 0; display: block; }

@media (max-width: 640px) {
    .bookmodal { padding: 0; }
    .bookmodal__panel { width: 100%; height: 100%; border-radius: 0; }
    .bookmodal__call { display: none; }
}

/* =====================================================================
   Review request page
   ===================================================================== */

.rev { max-width: 820px; }
.rev h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.rev-cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; margin-top: 2rem; align-items: start; }
.rev-card {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.75rem;
}
.rev-card--primary { background: var(--paper-2); border-color: var(--gold); }
/* At the check-in stage the private card comes first. */
.rev-cards--flip .rev-card:first-child { order: 2; }
.rev-cards--flip .rev-card:last-child { order: 1; }
.rev-card h2 { font-size: 1.35rem; margin-bottom: .6rem; }
.rev-card p { color: var(--text-muted); }
.rev-card .form { margin-top: 1rem; }
.rev-foot { margin-top: 2rem; }

@media (max-width: 760px) {
    .rev-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   Customer portal
   ===================================================================== */

.portal-narrow { max-width: 480px; }
.portal-grid { display: grid; gap: 3rem; grid-template-columns: minmax(0,1fr) 340px; align-items: start; }
.code-input { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-family: var(--display); }

.points-card {
    background: var(--ink); color: #fff; border-radius: var(--radius);
    padding: 1.75rem; margin-bottom: 2rem; text-align: center;
}
.points-card__label { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.points-card__n { display: block; font-family: var(--display); font-size: 3.4rem; line-height: 1.05; color: var(--gold); }
.points-card .muted { color: rgba(255,255,255,.7); display: block; }
.points-card__rate {
    display: block; margin-top: .9rem; padding-top: .9rem;
    border-top: 1px solid rgba(255,255,255,.15);
    font-size: .82rem; color: rgba(255,255,255,.75); line-height: 1.5;
}

.rewards { display: grid; gap: .8rem; margin-bottom: 2rem; }
.reward {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.reward.is-ready { border-color: var(--gold); background: var(--paper-2); }
.reward strong { display: block; }
.reward__action { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.reward__cost { font-family: var(--display); font-size: 1.1rem; }

.reward-open { background: var(--paper-2); border-left: 4px solid var(--gold); padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.reward-code { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.reward-code code { font-size: 1.3rem; letter-spacing: .12em; background: var(--ink); color: var(--gold); padding: .3rem .7rem; border-radius: 4px; }

.portal-table { width: 100%; border-collapse: collapse; }
.portal-table td { padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.portal-table td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.portal-table .is-pos { color: #05603a; }
.portal-table .is-neg { color: #b42318; }

@media (max-width: 900px) { .portal-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Header — consolidated

   The problem this solves: nine nav items plus three actions were being
   squeezed into one row, so "Service Area" and the phone number wrapped
   onto two lines from about 1400px down, while the mobile menu did not
   appear until 760px. That gap is where the header looked broken.

   Two changes. Nothing wraps — ever. And the mobile menu now appears at
   1100px, before things get tight, rather than long after.
   ===================================================================== */

.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.8vw, 1.5rem);
    min-height: max(76px, calc(var(--logo-h, 48px) + 44px));
}

.brand { flex: 0 0 auto; }

/* The nav takes the space that is left and never wraps. */
.nav { flex: 1 1 auto; min-width: 0; }
.nav ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: clamp(.55rem, 1.1vw, 1rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav li { flex: 0 0 auto; }
.nav a { white-space: nowrap; }

/* Actions never shrink and never wrap. */
.header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}
.header-actions .btn { white-space: nowrap; }

.header-account {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding: .2rem 0;
}
.header-account::before {
    content: "";
    width: 16px; height: 16px; flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--icon-user) center / contain no-repeat;
    mask: var(--icon-user) center / contain no-repeat;
}
.header-account:hover { border-bottom-color: var(--gold); }

:root {
    /* A star, not a person: the link goes to rewards rather than a
       settings page, and the icon should say which. */
    --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9Z'/%3E%3C/svg%3E");
}

.header-book { padding: .5rem 1.05rem; }
.header-cta  { padding: .55rem 1.15rem; }

/* ---- Primary-nav "More" dropdown (desktop) ---- */
.nav .has-dropdown { position: relative; }
.nav .dropdown-toggle {
    font-family: var(--display); font-size: 1.05rem; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
    background: none; border: 0; border-bottom: 2px solid transparent;
    padding: .3rem 0; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: .35rem;
}
.nav .dropdown-toggle::after {
    content: ""; width: .42em; height: .42em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); opacity: .65;
}
.nav .has-dropdown:hover .dropdown-toggle,
.nav .has-dropdown:focus-within .dropdown-toggle { border-bottom-color: var(--gold); }
.nav .dropdown {
    position: absolute; top: calc(100% + .3rem); left: 0; min-width: 210px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.13);
    padding: .4rem; margin: 0; list-style: none; display: none; z-index: 60;
}
.nav .has-dropdown:hover > .dropdown,
.nav .has-dropdown:focus-within > .dropdown { display: block; }
.nav .dropdown li { display: block; }
.nav .dropdown a {
    display: block; padding: .55rem .8rem; border-radius: 7px; border-bottom: 0;
    font-size: .8rem; letter-spacing: .05em; white-space: nowrap; opacity: 1;
}
.nav .dropdown a:hover,
.nav .dropdown a[aria-current="page"] { background: rgba(0,0,0,.055); border-bottom: 0; }

/* Below 1300px the account label goes, leaving the icon. */
@media (max-width: 1300px) {
    .header-account { font-size: 0; gap: 0; }
    .header-account::before { width: 19px; height: 19px; }
}

/* Below 1100px the nav collapses to the menu button. The secondary links
   now sit inside the "More" dropdown, so the top row is short again and
   this stays at the original width. */
@media (max-width: 1100px) {
    .nav-toggle { display: block; order: 3; }
    .nav.is-open { display: block; }
    .nav ul { flex-direction: column; justify-content: flex-start; gap: 0; }
    .nav a {
        display: block;
        padding: .8rem 0;
        border-bottom: 1px solid var(--line);
        font-size: 1rem;
    }
    .header-actions { margin-left: auto; }

    /* The dropdown becomes an always-open, indented group in the menu. */
    .nav .has-dropdown { position: static; }
    .nav .dropdown-toggle {
        display: flex; width: 100%; align-items: center;
        padding: .8rem 0; font-size: 1rem;
        border-bottom: 1px solid var(--line);
    }
    .nav .dropdown-toggle::after { display: none; }
    .nav .dropdown {
        position: static; display: block;
        border: 0; box-shadow: none; border-radius: 0;
        background: none; min-width: 0; padding: 0 0 .3rem .9rem;
    }
    .nav .dropdown a { font-size: 1rem; padding: .7rem 0; border-radius: 0; }
}

@media (max-width: 620px) {
    .header-book { display: none; }
    .header-cta { padding: .5rem .9rem; font-size: .9rem; }
    .site-header__inner { min-height: auto; padding: .65rem 0; gap: .75rem; }
}

/* The inventory link goes to a different site; a small mark says so
   without needing the word "external". */
.nav__external::after {
    content: "↗";
    font-size: .75em;
    margin-left: .15rem;
    opacity: .6;
}
@media (max-width: 1100px) { .nav__external::after { opacity: .5; } }

/* =====================================================================
   Promotions
   ===================================================================== */

.promos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.promo {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.promo:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
.promo--featured { border-color: var(--gold); }
.promo__media { display: block; }
.promo__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.promo__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.promo__badge {
    align-self: flex-start; background: var(--gold); color: var(--ink);
    font-family: var(--display); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
    padding: .25rem .7rem; border-radius: 999px; margin-bottom: .8rem;
}
.promo h3 { font-size: 1.3rem; margin-bottom: .5rem; line-height: 1.2; }
.promo h3 a { text-decoration: none; color: var(--ink); }
.promo p { color: var(--text-muted); flex: 1; margin-bottom: 1rem; }
.promo__code {
    font-size: .88rem; background: var(--paper-2); padding: .5rem .75rem;
    border-radius: var(--radius); margin-bottom: 1rem; flex: 0 0 auto;
}
.promo__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.promo__ends { font-size: .82rem; color: var(--text-muted); }
.promos__more { margin-top: 1.75rem; }
.promos--portal { margin-bottom: 2rem; }

/* =====================================================================
   Phone experience

   The aim is that the site behaves like an app rather than a shrunk
   desktop page: one fixed pair of actions always reachable with a thumb,
   nothing hidden behind a scroll, and safe-area padding so nothing sits
   under the home indicator.
   ===================================================================== */

/* ---------- Sticky action bar ---------- */
.actionbar { display: none; }

@media (max-width: 860px) {
    .actionbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--line);
        /* Clears the iPhone home indicator. Falls back to 0 elsewhere. */
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
    }

    .actionbar__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        /* 56px of target. Anything under 44 gets mis-tapped. */
        min-height: 56px;
        padding: .85rem .5rem;
        font-family: var(--display);
        font-size: 1.05rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .actionbar__btn--call { background: var(--ink); color: #fff; }
    .actionbar__btn--book { background: var(--gold); color: var(--ink); }
    .actionbar__btn:active { filter: brightness(.9); }

    .actionbar__icon { width: 20px; height: 20px; flex: 0 0 auto; }
    .actionbar__icon svg { width: 100%; height: 100%; display: block; }

    /* Nothing at the foot of the page hides under the bar. */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
    .site-footer { padding-bottom: 2rem; }
}

/* ---------- App-like handling ---------- */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 860px) {
    /* Momentum scrolling inside anything that scrolls sideways. */
    .daystrip, .table-wrap, .booking-services { -webkit-overflow-scrolling: touch; }

    /* Removes the grey flash on tap without removing focus outlines. */
    a, button { -webkit-tap-highlight-color: rgba(232, 178, 26, .18); }

    /* Forms sized so iOS does not zoom the page on focus. Anything under
       16px triggers it, and the zoom never fully undoes itself. */
    input, select, textarea { font-size: 16px; }
}

/* ---------- Page loading bar ---------- */
.pageload {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--gold);
    z-index: 100;
    opacity: 0;
    transition: width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
    pointer-events: none;
}
.pageload.is-active { opacity: 1; }
.pageload.is-done { width: 100% !important; opacity: 0; transition: width var(--dur-fast) var(--ease-out), opacity var(--dur-slow) var(--ease-out) var(--dur-fast); }

@media (prefers-reduced-motion: reduce) {
    .pageload { transition: none; }
}

/* ---------- Mobile menu as a drawer ----------
   The old behaviour pushed the page down, so opening the menu moved
   whatever the person was reading. A drawer over the top leaves the page
   where it was, which is what every app does and what people expect. */
@media (max-width: 1100px) {
    .nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(320px, 84vw);
        max-width: 100%;
        background: var(--paper);
        box-shadow: -8px 0 32px rgba(0, 0, 0, .18);
        padding: 5rem 1.5rem 2rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--dur-slow) cubic-bezier(.2, .7, .3, 1);
        display: block;
        z-index: 70;
    }
    .nav.is-open { transform: translateX(0); }

    .site-header__inner { flex-wrap: nowrap; }

    .nav-toggle {
        display: block;
        order: 3;
        position: relative;
        z-index: 80;
        min-width: 44px;
        min-height: 44px;
    }

    .nav-scrim {
        position: fixed;
        inset: 0;
        background: rgba(10, 11, 13, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
        z-index: 35;
    }
    .nav-scrim.is-open { opacity: 1; visibility: visible; }

    body.nav-locked { overflow: hidden; }

    .nav a { font-size: 1.1rem; padding: .95rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    .nav { transition: none; }
}

/* =====================================================================
   Stacking order, written down in one place.

   The mobile menu was unclickable because .site-header sets z-index and
   therefore creates a stacking context — the drawer lives inside it, so
   no z-index on the drawer itself could lift it above a scrim that is a
   direct child of body. The fix is not a bigger number on the drawer; it
   is putting the scrim below the header.

     30  bottom action bar
     35  drawer scrim        (over the page, under the header)
     50  header + drawer     (one context; drawer cannot escape it)
     90  lightbox
     95  booking modal
    100  loading bar, skip link

   Anything added later belongs on this list.
   ===================================================================== */

/* Hero actions: call first, book beside it. On a phone they stack so
   neither ends up a thin strip. */
.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin: 0; }
.page-hero--image .hero-actions .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.page-hero--image .hero-actions .btn--ghost:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 560px) {
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { text-align: center; }
}

/* =====================================================================
   Repair stories
   ===================================================================== */

.stories { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.story-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.story-card a { display: block; padding: 1.6rem; text-decoration: none; color: inherit; height: 100%; }
.story-card:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.story-card__vehicle {
    display: block; font-family: var(--display); font-size: .82rem;
    text-transform: uppercase; letter-spacing: .08em; color: var(--gold-dark); margin-bottom: .5rem;
}
.story-card h2 { font-size: 1.25rem; line-height: 1.25; margin-bottom: .6rem; }
.story-card__symptom { color: var(--text-muted); font-size: .95rem; margin-bottom: 1rem; }
.story-card__more { font-size: .88rem; color: var(--gold-dark); font-weight: 600; }

.story-takeaway {
    border-left: 4px solid var(--gold); background: var(--paper-2);
    padding: 1.1rem 1.4rem; margin: 2rem 0; font-size: 1.05rem; font-style: normal;
}

/* =====================================================================
   FAQs and town links
   ===================================================================== */

.faqs { margin: 3rem 0; }
.faqs h2 { margin-bottom: 1.25rem; }
.faq {
    border-bottom: 1px solid var(--line);
    padding: 1.1rem 0;
}
.faq summary {
    cursor: pointer; font-family: var(--display); font-size: 1.12rem;
    list-style: none; display: flex; justify-content: space-between; gap: 1rem;
    align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; flex: 0 0 auto; font-size: 1.4rem; line-height: 1;
    color: var(--gold-dark); transition: transform var(--dur-base) var(--ease-out);
}
.faq[open] summary::after { content: "−"; }
.faq__a { padding-top: .8rem; color: var(--text-muted); }
.faq__a p { margin-bottom: .8rem; }
.faq__a p:last-child { margin-bottom: 0; }

.towns { margin: 3rem 0; }
.towns__list {
    display: flex; flex-wrap: wrap; gap: .5rem; list-style: none;
    margin: 1.25rem 0; padding: 0;
}
.towns__list a {
    display: inline-block; padding: .4rem .85rem;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: .88rem; text-decoration: none; color: var(--text);
}
.towns__list a:hover { border-color: var(--gold); color: var(--gold-dark); }

/* ---------- Article to service call-out ---------- */
.post-service {
    background: var(--paper-2); border-left: 4px solid var(--gold);
    padding: 1.75rem; border-radius: var(--radius); margin: 3rem 0;
}
.post-service__eyebrow {
    font-family: var(--display); font-size: .78rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gold-dark); margin-bottom: .4rem;
}
.post-service h2 { font-size: 1.4rem; margin-bottom: .6rem; }
.post-service__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.25rem 0 .75rem; }

.related-reading { margin: 3rem 0; }
.related-reading ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.related-reading li {
    padding: .9rem 0; border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; gap: .2rem;
}
.related-reading li a { font-family: var(--display); font-size: 1.05rem; }
.related-reading li .muted { font-size: .9rem; }

/* =====================================================================
   Inspection, customer side

   Flagged items first and large. The photograph is the product — a shot
   of a 2mm pad does the persuading, and it is also what makes this
   honest rather than a sales tool.
   ===================================================================== */

.dvi-public { max-width: 720px; }
.dvi-clear {
    background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--radius);
    padding: 2rem; text-align: center; margin: 2rem 0;
}
.dvi-clear h2 { color: #15803d; margin-bottom: .5rem; }

.dvi-card {
    border: 1px solid var(--line); border-left: 5px solid var(--line);
    border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; background: var(--paper);
}
.dvi-card--urgent    { border-left-color: #dc2626; }
.dvi-card--attention { border-left-color: #f59e0b; }
.dvi-card__head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .75rem; }
.dvi-card h3 { font-size: 1.25rem; margin: 0; }
.dvi-tag {
    font-size: .74rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px;
    white-space: nowrap; text-transform: uppercase; letter-spacing: .04em;
}
.dvi-tag--urgent    { background: #fef2f2; color: #b91c1c; }
.dvi-tag--attention { background: #fffbeb; color: #b45309; }
.dvi-measure-out { font-size: .95rem; margin-bottom: .5rem; }

.dvi-shots { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 1rem; }
.dvi-shots img { width: 100%; border-radius: var(--radius); display: block; }

.dvi-cta { background: var(--paper-2); border-radius: var(--radius); padding: 2rem; margin: 2.5rem 0; }
.dvi-cta h2 { margin-bottom: .5rem; }

.dvi-all { margin: 2rem 0; }
.dvi-all summary { cursor: pointer; font-family: var(--display); font-size: 1.05rem; padding: .75rem 0; }
.dvi-all h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin: 1.25rem 0 .5rem; }
.dvi-list { list-style: none; margin: 0; padding: 0; }
.dvi-list li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.dvi-list .muted { margin-left: auto; font-size: .85rem; }
.dvi-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dvi-dot--good      { background: #16a34a; }
.dvi-dot--attention { background: #f59e0b; }
.dvi-dot--urgent    { background: #dc2626; }
.dvi-dot--unchecked { background: #cbd5e1; }

/* ---------- Customer estimate ---------- */
.est { max-width: 720px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.est__head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
.est__head h1 { font-size: 1.3rem; margin: 0 0 .25rem; }
.est__head p { margin: 0; font-size: .85rem; color: #6b7280; line-height: 1.6; }
.est__for { padding: 1.25rem 0; }
.est__for h2 { font-size: 1.15rem; margin: 0 0 .2rem; }

.est__done { background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 1.1rem; margin-bottom: 1.25rem; }
.est__done h1, .est__done h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: #15803d; }
.est__done p { margin: 0 0 .4rem; font-size: .9rem; }

.est__all { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }

.est-job { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: .9rem; overflow: hidden; }
.est-job header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
                  padding: .8rem 1rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.est-job header h3 { margin: 0; font-size: 1rem; }
.est-job header strong { font-size: 1.05rem; white-space: nowrap; }
.est-job__why { padding: .7rem 1rem 0; margin: 0; font-size: .88rem; color: #4b5563; line-height: 1.55; }
.est-job--declined { opacity: .6; }

.est-table { width: 100%; border-collapse: collapse; margin: .7rem 0 0; font-size: .86rem; }
.est-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
                color: #6b7280; padding: .35rem 1rem; border-bottom: 1px solid #f3f4f6; }
.est-table td { padding: .4rem 1rem; border-bottom: 1px solid #f3f4f6; }
.est-table .num { text-align: right; }

.est-job__choose { display: flex; gap: .5rem; padding: .8rem 1rem; background: #f9fafb; border-top: 1px solid #e5e7eb; }
.est-job__choose label { flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
                        border: 2px solid #e5e7eb; border-radius: 6px; padding: .65rem; cursor: pointer;
                        font-weight: 600; font-size: .9rem; }
.est-job__choose label:has(input:checked) { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.est-job__choose label:has(input[value="declined"]:checked) { border-color: #dc2626; background: #fef2f2; color: #b91c1c; }

.est-job__state { margin: 0; padding: .7rem 1rem; font-weight: 600; font-size: .88rem; }
.est-job__state--approved { background: #f0fdf4; color: #15803d; }
.est-job__state--declined { background: #fef2f2; color: #b91c1c; }

.est__total { display: flex; justify-content: space-between; align-items: baseline;
              padding: 1rem; background: #14161a; color: #fff; border-radius: 8px; margin: 1.25rem 0; }
.est__total strong { font-size: 1.5rem; }

.est__terms { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; margin-bottom: 1.25rem; }
.est__terms h3 { margin: 0 0 .5rem; font-size: .95rem; }
.est__terms p { margin: 0; font-size: .82rem; color: #4b5563; line-height: 1.65; }

.est__sign h3 { margin: 0 0 .3rem; font-size: 1rem; }
.est__sign canvas { width: 100%; height: 180px; border: 2px dashed #d1d5db; border-radius: 8px;
                    background: #fff; touch-action: none; display: block; margin: .6rem 0 .5rem; }
.est__sign label { display: block; margin-top: .9rem; font-weight: 600; font-size: .88rem; }
.est__sign input[type="text"] { width: 100%; padding: .65rem; border: 1px solid #d1d5db; border-radius: 6px;
                                font-size: 1rem; margin-top: .3rem; }
.est__submit { width: 100%; margin-top: 1.1rem; padding: .9rem; font-size: 1rem; font-weight: 700;
               background: #16a34a; color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
.est__submit:hover { background: #15803d; }

@media (max-width: 520px) {
    .est__head { flex-direction: column; }
    .est-job__choose { flex-direction: column; }
}


/* The scrim's open state is already defined inside the drawer's media
   query; only the scroll lock is new. */
body.nav-locked { overflow: hidden; }

/* The answered estimate, folded. It is reference now — what they agreed
   to, kept available — rather than a decision still to make. */
.est__after { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 1rem; }
.est__after > summary { padding: .8rem 1rem; cursor: pointer; font-weight: 600;
                        font-size: .95rem; }
.est__after > summary:hover { background: #f9fafb; }
.est__after > .est-job { margin: 0 1rem .9rem; }

/* .btn-sm lives in brand.css, which the bare layout does not load — so the
   buttons on the estimate a customer signs ("Approve everything", "Clear")
   were rendering as unstyled browser defaults on the one page that has to
   look like it belongs to the shop. Defined here to the same scale as .btn,
   which this layout does have. */
.btn-sm {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font-family: var(--display); font-size: .85rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
    padding: .5rem .9rem; border: 1px solid var(--line, #d8dbe0);
    border-radius: var(--radius); background: #fff; color: var(--ink, #14161a);
    cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-sm:hover { background: #f4f5f7; border-color: var(--gold, #d6a83c); }
.btn-sm:active { transform: translateY(1px); }
.btn-sm:focus-visible { outline: 2px solid var(--gold, #d6a83c); outline-offset: 2px; }
/* On a phone, where most of these get signed. */
@media (pointer: coarse) { .btn-sm { min-height: 44px; padding: .6rem 1rem; } }

/* ---------------------------------------------------------------------
   Job status page

   Opened on a phone, usually one-handed, usually to answer one question.
   So the answer is a sentence at the top in plain language, and the track
   underneath is for anyone who wants the detail. Nothing to log into and
   nothing to work out.
   --------------------------------------------------------------------- */
.stat { max-width: 34rem; margin: 0 auto; padding: 1.5rem 1.1rem 3rem; }
.stat__head { margin-bottom: 1.2rem; }
.stat__shop { margin: 0 0 .2rem; font-size: .78rem; text-transform: uppercase;
              letter-spacing: .1em; color: #6b7280; font-weight: 700; }
.stat__head h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.stat__ref { margin: .25rem 0 0; font-size: .88rem; color: #6b7280; }
/* The sentence the page exists for. Set larger than the detail below it
   because most people read this and close the tab. */
.stat__now { margin: 0 0 1.2rem; padding: 1rem 1.1rem; font-size: 1.05rem; line-height: 1.5;
             background: #f9fafb; border-left: 3px solid var(--gold, #d6a83c);
             border-radius: 0 8px 8px 0; }
.stat__cta { margin: 0 0 1.4rem; }
.stat__cta .btn { width: 100%; }

.track { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.track__step { display: grid; grid-template-columns: 22px 1fr auto; gap: .1rem .7rem;
               align-items: start; padding: 0 0 1.1rem; position: relative; }
/* The line joins the dots and stops at the last one. */
.track__step:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 18px;
                                        bottom: -2px; width: 2px; background: #e5e7eb; }
.track__step.is-done:not(:last-child)::before { background: #16a34a; }
.track__dot { width: 12px; height: 12px; margin: 4px 5px; border-radius: 50%;
              background: #fff; border: 2px solid #d1d5db; }
.track__step.is-done .track__dot { background: #16a34a; border-color: #16a34a; }
.track__step.is-now .track__dot { box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.track__label { font-size: .95rem; color: #6b7280; }
.track__step.is-done .track__label { color: #111827; }
.track__step.is-now .track__label { font-weight: 700; }
.track__when { font-size: .82rem; color: #6b7280; text-align: right; white-space: nowrap; }

.stat__work { margin-bottom: 1.4rem; }
.stat__work h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em;
                 color: #6b7280; margin: 0 0 .5rem; }
.stat__work ul { list-style: none; margin: 0; padding: 0; }
.stat__work li { display: flex; justify-content: space-between; gap: 1rem;
                 padding: .6rem 0; border-bottom: 1px solid #f3f4f6; font-size: .95rem; }
.stat__tick { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
              color: #16a34a; font-weight: 700; }
.stat__call { margin: 0; font-size: .9rem; color: #6b7280; }

/* ---------------------------------------------------------------------
   SMS consent checkbox

   Sits under the phone field on the booking and contact forms. The label
   is long by necessity — every clause in it is one a carrier checks for —
   so it is set at a readable size rather than shrunk to look tidy.
   --------------------------------------------------------------------- */
.field--check { margin-top: .25rem; }
.check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
         font-size: .92rem; line-height: 1.5; color: #374151; }
.check input[type="checkbox"] { width: 18px; height: 18px; margin: .15rem 0 0;
                                flex: none; accent-color: var(--gold, #d6a83c); cursor: pointer; }
.check a { color: inherit; text-decoration: underline; }
.check a:hover { color: var(--gold-dark, #b88a0c); }
/* Big enough to hit on a phone, which is where most bookings happen. */
@media (pointer: coarse) {
    .check input[type="checkbox"] { width: 22px; height: 22px; }
}

/* ---------------------------------------------------------------------
   The consent label, weighted so the important sentence is the one that
   looks important.
   ---------------------------------------------------------------------
   .check is a <label>, so it inherited the global label rule at 600 and
   set the entire disclosure in bold. The <strong> around "Optional —
   leave this unchecked and we'll call you instead" then had nothing to
   contrast against and disappeared into the block.

   That sentence is the whole answer to the carrier's objection, and a
   reviewer decides in a glance at a screenshot. Body text goes back to
   normal weight so the emphasis lands where it was meant to.
   --------------------------------------------------------------------- */
.check { font-weight: 400; }
.check strong { font-weight: 700; color: var(--ink, #111827); }

/* ---------------------------------------------------------------------
   Customer inspection — the shape of it, before the detail
   --------------------------------------------------------------------- */
.dvi-tally { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none;
             margin: 0 0 1.75rem; padding: 0; }
.dvi-tally li { display: flex; align-items: baseline; gap: .4rem;
                padding: .5rem .85rem; border-radius: 999px;
                font-size: .92rem; background: #f3f4f6; color: #374151; }
.dvi-tally strong { font-size: 1.05rem; }
.dvi-tally--urgent    { background: #fdeceb; color: #91231a; }
.dvi-tally--attention { background: #fdf4e3; color: #8a5a06; }
.dvi-tally--good      { background: #edf7ee; color: #1f6b2c; }

/* Section headings, so "needs doing now" is visibly not the same
   statement as "needs doing soon". */
.dvi-head { margin: 2rem 0 .9rem; font-size: 1.15rem; }
.dvi-head--urgent    { color: #91231a; }
.dvi-head--attention { color: #8a5a06; }
.dvi-head:first-of-type { margin-top: 0; }

/* Where on the car it was. Ordering by severity loses the category
   headings the old grouping gave for free, and "Front pads" reads
   better with "Brakes" next to it. */
.dvi-where { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
             color: #6b7280; white-space: nowrap; }

/* Not-applicable checkpoints on the customer's copy. Hollow, so it does
   not read as a tick at a glance. */
.dvi-dot--na { background: transparent; border: 2px solid #cbd5e1; }

/* The full list on the customer's copy: every checkpoint, with what was
   measured and seen, rather than a bare list of names. */
.dvi-all { margin-top: 2.5rem; }
.dvi-list { list-style: none; margin: .5rem 0 1.75rem; padding: 0; }
.dvi-list li { display: flex; gap: .7rem; align-items: flex-start;
               padding: .6rem 0; border-bottom: 1px solid #eef0f3; }
.dvi-list li:last-child { border-bottom: 0; }
.dvi-list__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.dvi-list__found { font-weight: 600; }
.dvi-list__note { color: #4b5563; }
.dvi-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; margin-top: .35rem; }
.dvi-shots--small img { max-width: 92px; border-radius: 6px; }

/* Download, at the top of the inspection.
   Sits beside the heading on a wide screen and drops under it on a
   phone, rather than pushing the vehicle name off the first line. */
.dvi-top { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
           align-items: flex-start; justify-content: space-between; }
.dvi-top h1 { margin-bottom: 0; }
.dvi-save {
    flex: none; margin-top: .35rem;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border: 1px solid #d7dbe0; border-radius: 999px;
    font-size: .88rem; font-weight: 600; text-decoration: none; color: #374151;
    background: #fff; white-space: nowrap;
}
.dvi-save:hover { border-color: var(--gold, #d6a83c); color: #111827; }
.dvi-save::before { content: '⤓'; font-size: 1rem; line-height: 1; }

.dvi-save-foot { margin: 2rem 0 1rem; }

@media (max-width: 560px) {
    /* Full width under the heading: a pill floating beside a wrapped
       vehicle name reads as an afterthought. */
    .dvi-top { flex-direction: column; }
    .dvi-save { width: 100%; justify-content: center; }
}

/* OBD code lookup */
.obd-search { display: flex; gap: .5rem; max-width: 30rem; margin-top: 1.25rem; }
.obd-search input { flex: 1; padding: .75rem .9rem; font-size: 1.1rem; letter-spacing: .05em;
                    text-transform: uppercase; border: 1px solid var(--line, #d7dbe0); border-radius: 8px; }
.obd-list { list-style: none; margin: 1rem 0 2rem; padding: 0; display: grid;
            grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .5rem; }
.obd-list a { display: flex; gap: .7rem; align-items: baseline; padding: .7rem .9rem;
              border: 1px solid var(--line, #d7dbe0); border-radius: 8px; background: #fff;
              text-decoration: none; color: inherit; }
.obd-list a:hover { border-color: var(--gold, #d6a83c); }
.obd-list strong { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.obd-list span { font-size: .85rem; color: var(--muted, #667085); }
.obd-list--compact a { padding: .5rem .7rem; }

/* Dashboard warning lights */
.light-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; }
.light-dot--red   { background: #dc2626; }
.light-dot--amber { background: #f59e0b; }
.light-dot--green { background: #16a34a; }
.light-dot--blue  { background: #2563eb; }
.card--urgent { border-color: #dc2626; }
.card--urgent .card__flag { background: #fdeceb; color: #91231a; }

/* Used car checklist */
.checklist__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.checklist__count { font-size: .85rem; color: var(--muted, #667085); }
.checklist__section { margin: 2rem 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid var(--line, #d7dbe0); }
.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
         padding: .8rem .9rem; margin-bottom: .5rem; border: 1px solid var(--line, #d7dbe0);
         border-radius: 10px; background: #fff; cursor: pointer; }
.check input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; flex: none; }
.check__body strong { display: block; }
.check__detail { display: block; margin-top: .2rem; font-size: .88rem; color: #4b5563; }
.check__flag { display: block; margin-top: .35rem; padding: .35rem .5rem; border-radius: 6px;
               background: #fdeceb; color: #91231a; font-size: .82rem; }
.check.is-done { background: #f6f8f6; border-color: #cfe0d2; }
.check.is-done .check__body strong { text-decoration: line-through; color: #6b7280; }

@media print {
    /* Printed to be carried round a car, so anything that is not a
       check is wasted paper. */
    .no-print, header, footer, .topbar, .section--tint { display: none !important; }
    .check { break-inside: avoid; border-color: #999; margin-bottom: .25rem; padding: .4rem .5rem; }
    .check__flag { background: none; color: #000; border-left: 3px solid #999; border-radius: 0; }
    .checklist__section { break-after: avoid; }
}

/* What's that noise */
.noise-pick { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.noise-pick label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
.noise-pick select { padding: .65rem .8rem; font-size: 1rem; border: 1px solid var(--line, #d7dbe0);
                     border-radius: 8px; background: #fff; min-width: 14rem; }
.noise-count { margin-bottom: 1rem; font-size: .85rem; }
.noise-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .6rem; }
.noise { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem;
         border: 1px solid var(--line, #d7dbe0); border-radius: 10px; background: #fff;
         text-decoration: none; color: inherit; }
.noise:hover { border-color: var(--gold, #d6a83c); }
.noise__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.noise__flag { padding: .1rem .5rem; border-radius: 999px; background: #fdeceb; color: #91231a;
               font-size: .7rem; font-weight: 600; }
.noise__cause { font-size: .85rem; color: var(--muted, #667085); }
.noise-summary { padding: .9rem 1.1rem; margin-bottom: 1.25rem; border-left: 3px solid var(--gold, #d6a83c);
                 background: #fbfaf7; }
.noise-summary p { margin: 0 0 .4rem; }
.noise-summary p:last-child { margin-bottom: 0; }

/* "View all services" under the home page grid */
.cards__more { margin-top: 1.5rem; text-align: center; }

/* Driver Help Center */
.hub__eyebrow { margin: 0 0 .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
                text-transform: uppercase; color: var(--gold, #d6a83c); }
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .75rem; }
.hub__tool { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
             padding: 1.1rem 1.2rem; border: 1px solid var(--line, #d7dbe0); border-radius: 12px;
             background: #fff; text-decoration: none; color: inherit; }
.hub__tool:hover { border-color: var(--gold, #d6a83c); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
/* The same tinted tile the home page service cards use, so the two
   pages read as one site. Slightly smaller because these sit beside the
   text rather than above it. */
.hub__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    color: var(--gold-dark);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .hub__icon { background: rgba(232, 178, 26, .14); }
}
.hub__icon svg { width: 26px; height: 26px; }
.hub__body strong { display: block; font-size: 1.02rem; }
.hub__blurb { display: block; margin-top: .25rem; font-size: .87rem; color: var(--muted, #667085); }
.hub__count { display: inline-block; margin-top: .5rem; padding: .1rem .5rem; border-radius: 999px;
              background: #f3f4f6; color: #4b5563; font-size: .72rem; font-weight: 600; }

/* Customer recommendations page */
.rec-list { display: grid; gap: .75rem; margin: 1.5rem 0; }
.rec { padding: 1rem 1.1rem; border: 1px solid var(--line, #d7dbe0); border-left-width: 4px;
       border-radius: 10px; background: #fff; }
.rec--now     { border-left-color: #dc2626; }
.rec--soon    { border-left-color: #f59e0b; }
.rec--monitor { border-left-color: #9ca3af; }
.rec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.rec__head strong { flex: 1 1 12rem; font-size: 1.02rem; }
.rec__flag { width: 100%; font-size: .7rem; font-weight: 700; letter-spacing: .05em;
             text-transform: uppercase; color: var(--muted, #667085); }
.rec--now .rec__flag { color: #b42318; }
.rec__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.rec__note { margin: .45rem 0 0; font-size: .9rem; color: #4b5563; }
.rec__meta { margin: .45rem 0 0; font-size: .8rem; color: var(--muted, #667085); }
.rec__total { margin: 1.25rem 0; padding-top: .8rem; border-top: 1px solid var(--line, #d7dbe0); }
.rec__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 .75rem; }

/* Estimate cost breakdown shown to the customer before they approve. */
.est__breakdown { border: 1px solid #e5e7eb; border-radius: 8px; padding: .35rem 1rem; margin: 1.25rem 0; }
.est__line { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: .92rem; border-bottom: 1px solid #f1f2f4; }
.est__line:last-child { border-bottom: 0; }
.est__line--grand { font-weight: 700; font-size: 1.08rem; border-top: 2px solid #14161a; border-bottom: 0; margin-top: .25rem; padding-top: .65rem; }
.est__newhead { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }

/* ── "Now hiring" banner ──────────────────────────────────────────────
   Site-wide strip above the topbar while the careers page is published.
   A pulsing dot plus a slow sheen sweep pull the eye; both stop under
   prefers-reduced-motion. Toggled by (un)publishing /careers. */
.hiring-bar {
    display: block;
    background: linear-gradient(90deg, var(--ink) 0%, var(--ink-3) 50%, var(--ink) 100%);
    color: #fff;
    text-decoration: none;
    border-bottom: 2px solid var(--gold);
    position: relative;
    overflow: hidden;
}
.hiring-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .5rem 1rem;
    font-size: .92rem;
    flex-wrap: wrap;
    text-align: center;
}
.hiring-bar__text { color: #eef0f3; }
.hiring-bar__text strong { color: var(--gold); }
.hiring-bar__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    flex: none;
    animation: hiring-pulse 1.6s ease-out infinite;
}
.hiring-bar__cta {
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    padding: .18rem .7rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: background var(--dur-base) ease, transform var(--dur-base) ease;
}
.hiring-bar:hover .hiring-bar__cta { background: #fff; transform: translateY(-1px); }
.hiring-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: hiring-sheen 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes hiring-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(232, 178, 26, .6); }
    70%  { box-shadow: 0 0 0 8px rgba(232, 178, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 178, 26, 0); }
}
@keyframes hiring-sheen {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}
@media (max-width: 640px) {
    .hiring-bar__inner { font-size: .82rem; gap: .45rem; padding: .45rem .75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hiring-bar__dot { animation: none; }
    .hiring-bar::after { display: none; }
}

/* ── Promo ribbon (top current special, under the header) ─────────────
   Rendered by header.php from the live featured promotion, so it appears
   and clears itself on the promo's own dates. Gold, to contrast with the
   dark "now hiring" strip at the very top. */
.promo-bar {
    display: block;
    background: var(--gold);
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-dark);
}
.promo-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .5rem 1rem;
    font-size: .95rem;
    flex-wrap: wrap;
    text-align: center;
}
.promo-bar__badge {
    background: var(--ink);
    color: var(--gold);
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .15rem .55rem;
    border-radius: 999px;
    flex: none;
}
.promo-bar__text { font-weight: 600; }
.promo-bar__text strong { font-weight: 800; }
.promo-bar__cta {
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid rgba(20, 22, 26, .35);
    transition: border-color var(--dur-base) ease;
}
.promo-bar:hover .promo-bar__cta { border-color: var(--ink); }
@media (max-width: 640px) {
    .promo-bar__inner { font-size: .85rem; gap: .4rem; padding: .45rem .7rem; }
}

/* ── Reviews / testimonials page ──────────────────────────────────────── */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.review-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 1.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.review-card__stars {
    color: var(--gold);
    letter-spacing: 2px;
    font-size: 1.05rem;
    line-height: 1;
}
.review-card__body {
    margin: 0;
    font-size: .98rem;
    line-height: 1.55;
    color: var(--text);
}
.review-card__who {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: .4rem;
}
.review-card__who strong { color: var(--ink); }
.review-card__src { font-size: .82rem; color: var(--text-muted); }
.reviews-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: 1.75rem;
}

/* Booking slot chips: keep the availability note on its own line under the
   time so the label never overflows a narrow column (was clipping "1 left"). */
.slotset { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.slotset .chip span { padding: .55rem .4rem; line-height: 1.25; }
.slotset .chip span small {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
}
.chip--slot.is-full span small,
.slotset .chip input:checked ~ span small { color: inherit; opacity: .8; }

/* =====================================================================
   Motion layer (added 2026-09-03).

   The JavaScript in site.js already ships the hard part: an
   IntersectionObserver that adds .is-in to sections and cards as they
   enter, .has-reveal on <html> so the initial hidden state only exists
   when JS is running, and .is-scrolled on the header past the top. None
   of it did anything because the stylesheet never implemented the hooks.
   This block does — and nothing here changes layout, only how it arrives.

   Progressive enhancement: the hidden state is scoped to .has-reveal,
   which the script adds ONLY when JS runs and reduced-motion is off. With
   JS disabled, or for reduced-motion users (the script bails), everything
   is visible at its normal position. The global reduced-motion guard at
   the top of this file already flattens durations as a second net.
   ===================================================================== */

/* ---- Reveal on scroll ---------------------------------------------- */
.has-reveal .section,
.has-reveal .sec,
.has-reveal .block-split,
.has-reveal .cards > *,
.has-reveal .marques > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    will-change: opacity, transform;
}
.has-reveal .is-in {
    opacity: 1;
    transform: none;
}
/* A section reveals as one block; the cards and marque columns inside it
   cascade so a row of three arrives left-to-right instead of all at once.
   The observer watches each child on its own, so this is a pure delay. */
.has-reveal .cards > *:nth-child(2),
.has-reveal .marques > *:nth-child(2)  { transition-delay: 70ms; }
.has-reveal .cards > *:nth-child(3),
.has-reveal .marques > *:nth-child(3)  { transition-delay: 140ms; }
.has-reveal .cards > *:nth-child(4)     { transition-delay: 210ms; }
.has-reveal .cards > *:nth-child(5)     { transition-delay: 280ms; }
.has-reveal .cards > *:nth-child(6)     { transition-delay: 350ms; }

/* Belt and braces: if a reveal target is somehow never observed (JS error
   after adding .has-reveal), don't leave content stranded invisible. */
@media (prefers-reduced-motion: reduce) {
    .has-reveal .section,
    .has-reveal .sec,
    .has-reveal .block-split,
    .has-reveal .cards > *,
    .has-reveal .marques > * { opacity: 1; transform: none; }
}

/* ---- Header gains depth once you scroll ---------------------------- */
.site-header {
    transition: box-shadow var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
    box-shadow: 0 6px 22px rgba(20, 22, 26, .10);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
}

/* ---- Card hover: lift, don't just outline -------------------------- */
.card {
    transition: box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(20,22,26,.06), 0 14px 34px rgba(20,22,26,.12);
}
.card__icon { transition: transform var(--dur-base) var(--ease-out); }
.card:hover .card__icon { transform: scale(1.12) rotate(-4deg); }

/* Stat blocks get the same quiet lift. */
.stat { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.stat:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,22,26,.10); }

/* ---- Buttons: primary/dark buttons feel pressable ------------------ */
.btn--gold, .btn--dark {
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.btn--gold:hover  { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(184,138,12,.34); }
.btn--dark:hover  { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,22,26,.26); }
.btn--gold:active, .btn--dark:active { transform: translateY(0); box-shadow: none; }

/* ---- The arrow on "Learn more" nudges on hover -------------------- */
.link-arrow::after {
    display: inline-block;
    transition: transform var(--dur-base) var(--ease-out);
}
.link-arrow:hover::after,
.card:hover .link-arrow::after { transform: translateX(5px); }

/* ---- Nav dropdown fades in instead of snapping -------------------- */
.nav .has-dropdown:hover > .dropdown,
.nav .has-dropdown:focus-within > .dropdown {
    animation: dropdown-in var(--dur-base) var(--ease-out) both;
}
@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Hero: a one-time staggered entrance on load ------------------ */
.hero .eyebrow,
.hero h1,
.hero .lede,
.hero__actions,
.hero__proof {
    animation: hero-in 640ms var(--ease-out) both;
}
.hero h1          { animation-delay: 80ms; }
.hero .lede       { animation-delay: 160ms; }
.hero__actions    { animation-delay: 240ms; }
.hero__proof      { animation-delay: 320ms; }
@keyframes hero-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero .eyebrow, .hero h1, .hero .lede, .hero__actions, .hero__proof {
        animation: none;
    }
}

/* ---- The "open now" dot gets a soft live pulse -------------------- */
.status--open .status__dot { animation: status-pulse 2.4s var(--ease-inout) infinite; }
@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); }
    50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, .06); }
}

/* ── Driver Help: grouped hub, standardized urgency, safety note ────────── */
/* Added Phase 1 (foundation). All classes are namespaced (hub-group / urgency
   / dh-disclaimer) so nothing here overrides existing rules. */
.hub-group { margin: 0 0 2.25rem; }
.hub-group:last-of-type { margin-bottom: 0; }
.hub-group__title {
    font-size: 1.15rem;
    margin: 0 0 .9rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.dh-disclaimer {
    margin: 1.75rem 0 0;
    padding: .9rem 1.1rem;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--text-muted);
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
}
.dh-disclaimer strong { color: var(--ink); }
.dh-disclaimer--compact { font-size: .82rem; padding: .6rem .8rem; margin-top: 1rem; }

/* Standardized urgency badge — one colour + shape per tier, everywhere. */
.urgency {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
}
.urgency__dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--urg, #b7791f);
    flex: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--urg, #b7791f) 20%, transparent);
}
.urgency--stop    { --urg: #c0392b; color: #c0392b; }
.urgency--caution { --urg: #b7791f; }
.urgency--ok      { --urg: #1e8e4e; }

/* ── Can I Drive It? — guided safety assessment (Phase 2) ───────────────── */
/* Namespaced .cid* so nothing here overrides existing rules. Mobile-first;
   large tap targets; text labels on every urgency state so nothing depends
   on colour alone. */
.cid { margin: 1.25rem 0 0; }

.cid__bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.cid__back, .cid__restart {
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .5rem .8rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    min-height: 40px;
}
.cid__back:hover, .cid__restart:hover { background: var(--paper); }
.cid__restart { margin-left: auto; color: var(--text-muted); }
.cid__progress {
    flex: 1;
    height: 6px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
}
.cid__progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--gold);
    transition: width .25s ease;
}

.cid__q { font-size: 1.3rem; margin: 0 0 .35rem; outline: none; }
.cid__q-sub { margin: 0 0 1rem; color: var(--text-muted); font-size: .95rem; }

.cid__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .7rem;
    margin: 1rem 0 0;
}
.cid__card {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-align: left;
    padding: .95rem 1rem;
    min-height: 56px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, transform .05s ease;
}
.cid__card:hover { border-color: var(--gold); }
.cid__card:active { transform: translateY(1px); }
.cid__card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cid__card-ico { color: var(--gold); flex: none; display: inline-flex; }
.cid__card-label { line-height: 1.25; }
.cid__card--opt.is-on {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, var(--paper));
    box-shadow: inset 0 0 0 1px var(--gold);
}
.cid__actions { margin-top: 1.1rem; }
.cid__continue { min-height: 46px; }

.cid__links, .cid__list { margin: .5rem 0 0; padding-left: 1.2rem; }
.cid__list li, .cid__links li { margin: .3rem 0; line-height: 1.5; }

/* ---- result ---- */
.cid-result {
    margin-top: .5rem;
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    border-top: 5px solid var(--cid-accent, #b7791f);
}
.cid-result--stop    { --cid-accent: #c0392b; }
.cid-result--caution { --cid-accent: #b7791f; }
.cid-result--ok      { --cid-accent: #1e8e4e; }

.cid-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
    color: #fff;
    background: var(--cid-accent, #b7791f);
    outline: none;
}
.cid-badge--caution { color: #1a1300; }
.cid-badge__dot { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; flex: none; }
.cid-badge:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.cid-result__headline { font-size: 1.1rem; font-weight: 600; margin: 1rem 0 .5rem; color: var(--ink); }
.cid-result__h { font-size: 1rem; margin: 1.3rem 0 .2rem; color: var(--ink); }
.cid-result__hint { font-size: .85rem; color: var(--text-muted); margin: .4rem 0 0; }

.cid-cta {
    margin: 1.5rem 0 0;
    padding: 1.1rem 1.2rem;
    background: var(--bg, #14161a);
    color: #fff;
    border-radius: var(--radius);
}
.cid-cta p { margin: 0 0 .9rem; }
.cid-cta__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.cid__cta-btn { min-height: 48px; display: inline-flex; align-items: center; }

.cid-result__foot { margin-top: 1.4rem; }
.cid__restart-inline {
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    padding: .6rem 1rem; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; min-height: 44px;
}
.cid__restart-inline:hover { background: var(--paper); }

@media (max-width: 480px) {
    .cid__grid { grid-template-columns: 1fr 1fr; }
    .cid-cta__btns .btn { width: 100%; justify-content: center; }
}

/* ── Car Won't Start — additions to the shared assessment UI (Phase 3) ──── */
/* Wide symptom cards carry a label + a short description. */
.cid__card--wide { align-items: flex-start; }
.cid__card-text { display: flex; flex-direction: column; gap: .15rem; }
.cid__card-desc { font-weight: 400; font-size: .82rem; color: var(--text-muted); line-height: 1.35; }

/* Optional vehicle details. */
.cid-vehicle {
    margin: 1.5rem 0 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    padding: .4rem .9rem;
}
.cid-vehicle > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink);
    padding: .55rem 0;
    list-style: revert;
}
.cid-vehicle__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .7rem;
    margin: .6rem 0 .3rem;
}
.cid-vehicle__grid label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
}
.cid-vehicle__grid input {
    font: inherit;
    padding: .55rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-input, #fff);
    color: var(--ink);
    min-height: 42px;
}
.cid-vehicle__grid input:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.cid-vehicle__note { font-size: .78rem; color: var(--text-muted); margin: .2rem 0 .5rem; }

.cid-result__veh {
    margin: .75rem 0 0;
    padding: .6rem .8rem;
    background: color-mix(in srgb, var(--gold) 10%, var(--paper));
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--ink);
}

/* ── Driver Help diagnose pages — static content prose (Phase 4) ───────── */
.dh-prose { max-width: 760px; }
.dh-prose h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; color: var(--ink); }
.dh-prose h2:first-child { margin-top: 0; }
.dh-prose p { line-height: 1.6; margin: 0 0 .8rem; }
.dh-prose .block-list { margin: 0 0 1rem; padding-left: 1.1rem; }
.dh-prose .block-list li { margin: .3rem 0; line-height: 1.5; }

/* ── Dashboard Warning Lights — searchable directory (Phase 5) ─────────── */
.wl-tools { margin: 0 0 1.5rem; }
.wl-search { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper); padding: .1rem .8rem; max-width: 460px; }
.wl-search__icon { color: var(--text-muted); display: flex; flex: none; }
.wl-search input { flex: 1; border: 0; background: transparent; font: inherit; color: var(--ink); padding: .7rem 0; min-height: 44px; }
.wl-search input:focus { outline: none; }
.wl-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); }
.wl-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.wl-chip { font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
    padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--text); min-height: 38px; }
.wl-chip:hover { border-color: var(--gold); }
.wl-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.wl-chip--sev.is-on.wl-chip--stop { background: #c0392b; border-color: #c0392b; }
.wl-chip--sev.is-on.wl-chip--caution { background: #b7791f; border-color: #b7791f; }
.wl-chip--sev.is-on.wl-chip--ok { background: #1e8e4e; border-color: #1e8e4e; }
.wl-chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; margin: 1.5rem 0; }
.wl-card { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.wl-card:hover { border-color: var(--gold); transform: translateY(-1px); transition: transform .1s ease, border-color .1s ease; }
.wl-card__body { display: flex; flex-direction: column; gap: .2rem; }
.wl-card__title { font-size: 1rem; line-height: 1.25; }
.wl-card__desc { font-size: .82rem; color: var(--text-muted); line-height: 1.35; }
.wl-card__sev { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-top: .25rem; }
.wl-card__sev--stop { color: #c0392b; }
.wl-card__sev--caution { color: #b7791f; }
.wl-card__sev--ok { color: #1e8e4e; }
.wl-empty { margin: 1.5rem 0; padding: 1.1rem 1.2rem; background: var(--paper); border: 1px solid var(--line);
    border-left: 3px solid var(--gold); border-radius: var(--radius); color: var(--text); line-height: 1.55; }

.light-dot { width: .9rem; height: .9rem; border-radius: 50%; flex: none; margin-top: .2rem; border: 1px solid rgba(0,0,0,.15); }
.light-dot--red { background: #c0392b; }
.light-dot--amber { background: #e8a91a; }
.light-dot--green { background: #1e8e4e; }
.light-dot--blue { background: #2f6fed; }

/* Detail severity badge (text, never colour alone) */
.wl-badge { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .95rem;
    padding: .5rem .9rem; border-radius: 999px; margin: .3rem 0; letter-spacing: .02em; }
.wl-badge__dot { width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; flex: none; }
.wl-badge--stop { background: #fbe9e7; color: #c0392b; }
.wl-badge--caution { background: #fdf3e0; color: #a56b12; }
.wl-badge--ok { background: #e7f5ec; color: #1e7a44; }

.wl-codebox { margin: 1.5rem 0; padding: 1.1rem 1.2rem; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); }
.wl-codebox h2 { margin-top: 0; }

/* ── Check Engine Code directory (Phase 6) — reuses .wl-* directory styles ─ */
.obd-card { align-items: center; }
.obd-card__code { font-weight: 800; font-size: 1.05rem; letter-spacing: .01em; color: var(--ink);
    background: var(--bg, #f4f5f7); border: 1px solid var(--line); border-radius: 8px;
    padding: .35rem .5rem; flex: none; min-width: 4.2rem; text-align: center; }
.obd-card .wl-card__title { font-size: .92rem; font-weight: 600; }

/* ── Driver Help related-content graph blocks (Phase 7) ───────────────── */
.dh-related h2 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }
.dh-related h2:first-child { margin-top: 0; }
.dh-related .obd-list--compact { margin: 0 0 .6rem; }
.dh-related .cid__links { margin: 0 0 .6rem; }

/* ── Phase 8: "What to check next" ordered checklist ──────────────────── */
.dh-next { margin: 0 0 1rem; padding-left: 1.3rem; }
.dh-next li { margin: .5rem 0; line-height: 1.55; }
.dh-next li a { font-weight: 600; white-space: nowrap; }

/* ── Battery & Electrical hub (Phase 9) ───────────────────────────────── */
.battery-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem 2rem; margin: 1rem 0 1.5rem; }
.battery-hub__col h2 { font-size: 1.02rem; margin: 0 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.battery-hub__col .cid__links { margin: 0; }
.battery-hub__lead { font-weight: 700; }

/* A gold button on a dark band should stay gold (pops), not repaint to ink */
.sec--light .btn--gold{background:var(--gold);color:var(--ink)}
.sec--light .btn--gold:hover{background:var(--gold-dark);color:var(--ink)}

.est-job__share { margin: .35rem 1rem 0; font-size: .8rem; font-weight: 600; color: #0f5c40; }