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

:root {
    --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 .12s ease, background .12s ease, color .12s ease;
}
.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 .15s ease, border-color .15s ease;
}
.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 {
        display: none; order: 4; width: 100%; padding-bottom: 1rem;
    }
    .nav[data-open="true"] { display: block; }
    .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 .14s ease, transform .14s ease, box-shadow .14s ease;
}
.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 .14s ease;
}
.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 .18s ease, color .18s ease;
}
.card__icon { transition: background .18s ease, color .18s ease; }

/* 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 .16s ease, transform .16s ease, box-shadow .16s ease;
}
.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 .16s ease;
}
.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 .15s ease, border-color .15s ease;
}
.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 .35s ease; }
.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 .12s ease, background .12s ease;
}
.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); transition: all .12s ease;
}
.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(1rem, 2.5vw, 2rem);
    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(.7rem, 1.6vw, 1.4rem);
    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; }

/* 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. Earlier than before, on purpose —
   a cramped row of nine links is worse than a menu button. */
@media (max-width: 1100px) {
    .nav-toggle { display: block; order: 3; }
    .site-header__inner { flex-wrap: wrap; }

    .nav {
        order: 4;
        flex-basis: 100%;
        display: none;
        padding-bottom: 1rem;
    }
    .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; }
}

@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 .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.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 .2s ease, opacity .2s ease;
    pointer-events: none;
}
.pageload.is-active { opacity: 1; }
.pageload.is-done { width: 100% !important; opacity: 0; transition: width .1s ease, opacity .35s ease .1s; }

@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 .26s 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 .22s ease, visibility .22s;
        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 .18s ease;
}
.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; }