/* ============================================================
   Restore Detailing — Anthem, AZ. Built from template/detail-site.
   ============================================================ */

:root {
    /* ── Palette: sampled from the client's logo. ──

       Sampling run over the supplied badge (1179x1248 JPEG): the ONLY
       colours present are a pure white field (255,255,255 and its JPEG
       neighbours 249-254) and pure black ink (0,0,0 through 5,5,5).
       Zero pixels anywhere in the file clear saturation 0.25. There is
       no hue to sample, so there is no hue on this site — inventing one
       would be inventing a brand.

       The mark sits on white, so the page goes LIGHT. The logo decided
       that, not preference. */
    --bg: #F4F4F4;                 /* the logo's white field, dropped one
                                      step so white cards read as cards */
    --surface: #FFFFFF;            /* the logo's field verbatim */
    --surface-alt: #E9E9E9;        /* field darkened, for alternating
                                      sections and the footer */

    --accent: #1A1A1A;             /* the logo ink, lifted just off pure
                                      black so the hover state below has
                                      somewhere to go */
    --accent-dark: #000000;        /* the logo ink verbatim, for hover */
    --accent-soft: #333333;        /* accent ON the page ground: prices,
                                      links, small text. LIGHT site, so
                                      this is darker than --accent, not
                                      lighter. 11.5:1 on --bg. */
    --accent-glow: rgba(26, 26, 26, 0.20);   /* button shadow — a black
                                      glow at the scaffold's 0.42 is a
                                      bruise on a light ground */
    --accent-wash: rgba(26, 26, 26, 0.07);   /* icon chip fills */
    --accent-edge: rgba(26, 26, 26, 0.26);   /* tinted panel borders */
    --on-accent: #FFFFFF;          /* white on a near-black accent: 17.4:1 */

    --heading: #121212;            /* 15.2:1 on --bg */
    --text: #4A4A4A;               /* 8.1:1 on --bg, 8.9:1 on --surface */
    --muted: #666666;              /* 5.2:1 on --bg, 4.7:1 on --surface-alt,
                                      which is the worst ground it lands on */
    --line: rgba(18, 18, 18, 0.14);          /* card borders */
    --line-soft: rgba(18, 18, 18, 0.08);     /* section rules */

    /* Overlay ink for the hero gradient and the mobile nav. NOT --bg
       here: this is a light site, and those two overlays sit under white
       text over a dark photo. Feeding them the page ground would put
       white type on a white scrim. The logo ink is the right source. */
    --scrim: 12, 12, 12;

    /* ── Type ── Playfair Display: the logo is a classical crest — a
       laurel wreath around an engraved RD, with a high-contrast serif
       wordmark curved around the ring. A condensed grotesque would fight
       it. Playfair carries the same vertical stress and hairline serifs
       at heading sizes. Unused by any other client (Barlow Condensed,
       Saira Condensed, Sora, Bitter, Fraunces, Great Vibes, Space
       Grotesk, Outfit and Manrope are all spent). ── */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --display-transform: none;        /* serif — uppercase would wreck it */
    --display-spacing: 0.005em;
    --radius: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg); color: var(--text); line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
/* Global, and load-bearing: source files routinely carry stale
   width/height attributes that distort a CSS-scaled image. */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--heading); line-height: 1.12; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 4px; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 44px); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.display {
    font-family: var(--font-display); font-weight: 700;
    letter-spacing: var(--display-spacing); text-transform: var(--display-transform);
}

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Buttons ── */
.btn {
    display: inline-block; font-weight: 700; font-size: 0.98rem; text-decoration: none; cursor: pointer;
    padding: 15px 30px; border-radius: 8px; border: 2px solid transparent; text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 26px var(--accent-glow); }
.btn-primary:hover { transform: translateY(-2px); background: var(--accent-dark); box-shadow: 0 12px 32px var(--accent-glow); }
.btn-ghost { border-color: var(--line); color: var(--heading); }
.btn-ghost:hover { border-color: var(--accent-soft); color: var(--accent-soft); }
.btn-outline { border-color: var(--accent); color: var(--accent-soft); }
.btn-outline:hover { background: var(--accent); color: var(--on-accent); }
/* On a photo or dark band, regardless of page theme */
.btn-on-photo { border-color: rgba(255,255,255,0.8); color: #fff; }
.btn-on-photo:hover { background: rgba(255,255,255,0.15); }
@media (max-width: 560px) { .btn { display: block; width: 100%; padding: 17px 24px; } }

/* ── Header ──
   Transparent over the hero, solid once scrolled. The starting border is
   `transparent`, never `none`: with no start colour the browser
   interpolates border-color from currentColor and flashes a bright
   hairline for a frame on the first scroll. */
.header {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem clamp(18px, 3vw, 48px);
    transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
    border-bottom: 1px solid transparent;
}
.header.scrolled {
    background: rgba(var(--scrim), 0.9);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line-soft);
    padding: 0.5rem clamp(18px, 3vw, 48px);
}
/* A light site needs light text over the hero photo and dark text once the
   header goes solid. Add class="header header--invert" to switch it on. */
.header--invert .brand b, .header--invert .nav-menu a { color: #fff; }
.header--invert .hamburger span { background: #fff; }
.header--invert.scrolled { background: rgba(255,255,255,0.97); }
.header--invert.scrolled .brand b, .header--invert.scrolled .nav-menu a { color: var(--heading); }
.header--invert.scrolled .hamburger span { background: var(--heading); }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Logo width is per-client and needs eyes on it — a wide wordmark and a
   round badge want very different numbers. Override in the page. */
.brand img { width: clamp(84px, 13vw, 104px); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45)); }
.brand .mark { width: 42px; height: 42px; flex: none; }
.brand b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; line-height: 1.15; color: var(--heading); }
.brand b small { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; opacity: 0.8; }

.nav-menu { display: flex; gap: 1.7rem; align-items: center; }
.nav-menu a { color: var(--heading); text-decoration: none; font-weight: 600; font-size: 0.93rem; }
.nav-menu a:hover { color: var(--accent-soft); }
.nav-call { background: var(--accent); color: var(--on-accent) !important; font-weight: 700; padding: 10px 18px; border-radius: 8px; }
.nav-call:hover { filter: brightness(1.12); }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.hamburger span { width: 25px; height: 2.5px; background: var(--heading); border-radius: 2px; }
.mobile-nav { position: fixed; inset: 0; z-index: 99; display: none; background: rgba(var(--scrim), 0.98); padding: 6rem 2rem 2rem; }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.4rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
.mobile-nav a.is-call { color: var(--accent-soft); }
@media (max-width: 880px) {
    .nav-menu { display: none; }
    .hamburger { display: flex; }
}

/* ── Hero ──
   Overlay alphas are capped deliberately. Past roughly 0.55 at the top the
   vehicle in the photo stops being visible, which defeats the point of
   having a photo. Darken the image itself before raising these. */
.hero {
    position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 130px clamp(20px, 5vw, 44px) 90px;
    background:
        linear-gradient(180deg, rgba(var(--scrim), 0.55) 0%, rgba(var(--scrim), 0.42) 40%, rgba(var(--scrim), 0.92) 100%),
        url('/assets/hero-bg.webp') center 30% / cover no-repeat;
}
.hero-content { position: relative; max-width: 820px; }
.hero-logo { width: clamp(168px, 34vw, 250px); margin: 0 auto 1.5rem; filter: drop-shadow(0 12px 36px rgba(0,0,0,0.7)); }
.hero-kicker {
    display: inline-block; color: rgba(255,255,255,0.85); font-weight: 700; font-size: 0.82rem;
    letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.hero h1 {
    color: #fff; font-size: clamp(2.1rem, 7vw, 3.6rem); margin-bottom: 1rem; text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0,0,0,0.7);
}
.hero h1 em { font-style: normal; color: var(--accent-soft); }
.hero p.lede {
    color: rgba(255,255,255,0.85); font-size: clamp(1.02rem, 2.6vw, 1.18rem);
    max-width: 48ch; margin: 0 auto 2.2rem; text-shadow: 0 1px 14px rgba(0,0,0,0.7);
}
.hero-cta { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; max-width: 440px; margin: 0 auto; }
@media (max-width: 560px) { .hero-cta { flex-direction: column; } }
.hero-sub { margin-top: 1.7rem; color: rgba(255,255,255,0.68); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }

/* ── Stats band (optional) ── */
.stats { background: var(--surface-alt); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.stats-wrap { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { text-align: center; padding: 1.7rem 1rem; }
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat b { display: block; font-family: var(--font-display); color: var(--accent-soft); font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; line-height: 1; }
.stat span { font-size: 0.74rem; color: var(--muted); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 760px) {
    .stats-wrap { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

/* ── Sections ── */
.section { padding: clamp(3.4rem, 9vw, 5.6rem) 0; }
.section.alt { background: var(--surface-alt); }
.section-title { text-align: center; font-size: clamp(1.9rem, 6vw, 2.8rem); }
.title-rule { width: 68px; height: 3px; border: 0; background: var(--accent); margin: 1.1rem auto; }
.section-sub { text-align: center; color: var(--muted); max-width: 60ch; margin: 0 auto 2.8rem; font-size: 1rem; }
/* A second title inside one section (size guide, add-ons) */
.subhead { margin-top: 3.8rem; }

/* ── Package cards ── */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.pkg {
    background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); overflow: hidden;
    display: flex; flex-direction: column; position: relative;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pkg:hover { transform: translateY(-5px); border-color: var(--accent-edge); box-shadow: 0 20px 44px rgba(0,0,0,0.22); }
.pkg--popular { border-color: var(--accent); box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
.pkg .flag {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
    background: var(--accent); color: var(--on-accent); font-size: 0.64rem; font-weight: 800;
    letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
}
.pkg-img { aspect-ratio: 16 / 10.5; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.pkg-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pkg:hover .pkg-img img { transform: scale(1.05); }
.pkg-body { padding: 1.6rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.pkg h3 { font-family: var(--font-display); font-size: 1.5rem; text-transform: var(--display-transform); margin-bottom: 0.3rem; }
.pkg .desc { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.1rem; }
.pkg .price { font-family: var(--font-display); font-weight: 700; color: var(--accent-soft); font-size: 2.1rem; line-height: 1; }
.pkg .price small { display: block; font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; color: var(--muted); margin-top: 0.4rem; text-transform: uppercase; letter-spacing: 0.1em; }
.pkg .tiers { font-size: 0.83rem; color: var(--muted); margin: 0.55rem 0 1.3rem; }
.pkg ul { list-style: none; margin-bottom: 1.6rem; }
.pkg ul li { position: relative; padding: 0.24rem 0 0.24rem 1.6rem; font-size: 0.92rem; }
.pkg ul li::before { content: '✓'; position: absolute; left: 0; top: 0.24rem; color: var(--accent); font-weight: 800; }
.pkg .btn { margin-top: auto; }

/* ── Size guide + add-ons ── */
.sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.size { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.size h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-soft); margin-bottom: 0.5rem; }
.size p { color: var(--heading); font-size: 0.94rem; margin-bottom: 0.45rem; }
.size span { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.6; }

.addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.addon { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) - 1px); padding: 1.1rem 1.3rem; }
.addon .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.3rem; }
.addon .row span { color: var(--heading); font-weight: 700; font-size: 0.96rem; }
.addon .row b { font-family: var(--font-display); color: var(--accent-soft); font-size: 1.15rem; white-space: nowrap; }
.addon small { color: var(--muted); font-size: 0.85rem; line-height: 1.55; }

/* Placeholder-pricing disclosure. Every mockup carries one. */
.price-note {
    max-width: 700px; margin: 2.3rem auto 0; text-align: center;
    background: var(--accent-wash); border: 1px solid var(--accent-edge);
    border-radius: var(--radius); padding: 1rem 1.4rem; font-size: 0.92rem; color: var(--heading);
}
.price-note b { color: var(--accent-soft); }

/* ── Why grid ── 4 across on desktop, 2, then 1. Never 3-and-1. */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.why-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1060px) { .why-grid, .why-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why-grid, .why-grid--three { grid-template-columns: 1fr; } }
.why { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 1.7rem 1.5rem; }
.why .ic { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-soft); margin-bottom: 0.95rem; }
.why .ic svg { width: 23px; height: 23px; }
.why h3 { font-size: 1.04rem; margin-bottom: 0.35rem; }
.why p { color: var(--muted); font-size: 0.91rem; }

/* The photo band is not used on this site — the section was dropped, and
   its stylesheet block and band.webp went with it. */

/* ── Process steps (optional) ── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; position: relative; }
.step::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em;
    color: var(--accent-soft); display: block; margin-bottom: 0.7rem;
}
.step h3 { font-size: 1.04rem; margin-bottom: 0.35rem; }
.step p { color: var(--muted); font-size: 0.91rem; }

/* ── Work gallery (optional) ── */
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.work-tile { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); }
.work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.work-tile:hover img { transform: scale(1.04); }

/* ── Service-area chips ── */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; max-width: 840px; margin: 0 auto; }
.chips span {
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: 9px 20px 9px 16px; font-weight: 600; font-size: 0.92rem; color: var(--heading);
}
.chips span::before { content: '✓  '; color: var(--accent); font-weight: 800; }
.areas-note { text-align: center; color: var(--muted); font-size: 0.87rem; margin-top: 1.3rem; }

/* ── Reviews ──
   A review PROMPT, not testimonials. Never invent a quote: use this until
   the client supplies real reviews with a real Google link. */
.review-cta {
    max-width: 620px; margin: 0 auto; text-align: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); padding: 2.2rem 1.8rem;
}
.review-cta .stars { color: #f0a500; font-size: 1.5rem; letter-spacing: 0.16em; margin-bottom: 0.8rem; }
.review-cta h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.review-cta p { color: var(--muted); font-size: 0.94rem; margin-bottom: 1.4rem; }
.review-cta .pending { margin: 1rem 0 0; font-size: 0.8rem; }

/* ── FAQ ── */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) - 1px); padding: 1.05rem 1.3rem; margin-bottom: 11px; }
.faq summary {
    color: var(--heading); font-weight: 700; cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.99rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent-soft); font-size: 1.4rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--muted); font-size: 0.94rem; margin-top: 0.75rem; }
.faq p a { color: var(--accent-soft); font-weight: 600; text-decoration: none; }

/* ── Contact ── */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; }
.c-item { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 1px); padding: 1.9rem 1.4rem; text-align: center; }
.c-item .ic { width: 46px; height: 46px; margin: 0 auto 0.9rem; border-radius: 50%; background: var(--accent-wash); color: var(--accent-soft); display: grid; place-items: center; }
.c-item .ic svg { width: 22px; height: 22px; }
.c-item h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 0.5rem; }
.c-item p { color: var(--heading); font-weight: 700; font-size: 1.04rem; }
.c-item p.is-email { font-size: 0.94rem; word-break: break-all; }
.c-item p a { text-decoration: none; }
.c-item p a:hover { color: var(--accent-soft); }
.c-item small { display: block; color: var(--muted); font-weight: 500; font-size: 0.82rem; margin-top: 0.3rem; }
.contact-cta { text-align: center; margin-top: 2.4rem; }
.contact-cta .btn { margin: 0 6px 10px; }

/* ── Footer ── */
footer { background: var(--surface-alt); border-top: 1px solid var(--line-soft); padding: 3rem 0 1.6rem; text-align: center; }
footer .flogo { width: 190px; margin: 0 auto 1.1rem; }
footer .info { color: var(--muted); font-size: 0.92rem; line-height: 1.9; }
footer .info a { color: var(--text); text-decoration: none; }
footer .info a:hover { color: var(--accent-soft); }
footer .copy { margin-top: 1.9rem; padding-top: 1.3rem; border-top: 1px solid var(--line-soft); font-size: 0.79rem; color: var(--muted); max-width: 680px; margin-left: auto; margin-right: auto; }

/* Social icons. Drop the whole row when the client has no accounts —
   never link a placeholder profile. */
.social-row { display: flex; justify-content: center; gap: 0.7rem; margin: 1.3rem 0 0; }
.social-row a {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-wash); color: var(--accent-soft); border: 1px solid var(--line);
    transition: background 0.2s ease, color 0.2s ease;
}
.social-row a:hover { background: var(--accent); color: var(--on-accent); }
.social-row svg { width: 19px; height: 19px; }

/* ── Booking page ──
   Only book/index.html uses these; kept here so there is one stylesheet.
   The calendar is the page, so its header starts solid rather than
   waiting on a scroll. */
.is-booking .header {
    background: rgba(var(--scrim), 0.92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line-soft);
}
.is-booking .header--invert { background: rgba(255,255,255,0.97); }
.is-booking .header--invert .brand b, .is-booking .header--invert .nav-menu a { color: var(--heading); }
.is-booking .header--invert .hamburger span { background: var(--heading); }

.book-hero { text-align: center; padding: 124px clamp(20px,5vw,44px) 2.6rem; border-bottom: 1px solid var(--line-soft); }
.book-hero h1 { font-size: clamp(2rem, 6.5vw, 3rem); margin-bottom: 0.8rem; }
.book-hero p { color: var(--muted); max-width: 54ch; margin: 0 auto; }
.book-hero p a { color: var(--accent-soft); font-weight: 700; text-decoration: none; }
.book-body { background: var(--surface-alt); padding: 2.4rem 0 3.4rem; }
.booking-wrap { max-width: 1000px; margin: 0 auto; position: relative; border-radius: calc(var(--radius) + 2px); overflow: hidden; border: 1px solid var(--line); }
.booking-frame {
    display: block; width: 100%; height: calc(100vh - 150px); min-height: 700px; border: 0;
    /* the embedded calendar is third-party and paints on white — match it
       so a dark site doesn't flash its own ground first */
    background: #fff; position: relative; z-index: 1;
}
.booking-loading {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.9rem; background: #fff; color: #667; text-align: center; padding: 1rem;
}
.booking-loading .spin {
    width: 38px; height: 38px; border-radius: 50%;
    border: 3px solid var(--accent-wash); border-top-color: var(--accent);
    animation: bspin 0.8s linear infinite;
}
@keyframes bspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .booking-loading .spin { animation: none; } }
.booking-fallback { text-align: center; margin-top: 1.2rem; color: var(--muted); font-size: 0.92rem; }
.booking-fallback a { color: var(--accent-soft); font-weight: 700; text-decoration: none; }
.booking-fallback .note { font-size: 0.82rem; opacity: 0.75; }
@media (max-width: 768px) { .booking-frame { height: calc(100vh - 120px); min-height: 560px; } }
@supports (height: 100dvh) { @media (max-width: 768px) { .booking-frame { height: calc(100dvh - 120px); } } }

/* ════════════════════════════════════════════════════════════
   Light-theme corrections

   The component rules above were written against a dark page ground.
   Five of them inverte on a light site — each one below is a place
   where the shared sheet would otherwise put white on white or black
   on black. Nothing here changes a colour choice; it only re-points a
   rule at the right side of the theme.
   ════════════════════════════════════════════════════════════ */

/* 1. The logo is black ink on transparent, and the header sits over a
      dark hero photo until it goes solid. Unfiltered, the mark simply
      vanishes up there. invert(1) on pure black gives pure white, so
      the client's own artwork carries both states with no second file. */
.header .brand img {
    filter: invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
    transition: filter 0.3s ease;
}
.header.scrolled .brand img { filter: none; }
/* The booking page's header is solid white from the first paint and
   never gets .scrolled, so it needs the un-inverted mark immediately. */
.is-booking .header .brand img { filter: none; }

.hero-logo { filter: invert(1) drop-shadow(0 12px 40px rgba(0, 0, 0, 0.55)); }

/* 2. The hero emphasis is --accent-soft, which on this site is near
      black — invisible against the photo. There is no second brand
      colour to reach for, so the emphasis is carried by Playfair's
      italic instead of by hue. */
.hero h1 em { font-style: italic; color: #fff; }

/* 3. The mobile nav paints on --scrim (the logo ink), so its call link
      needs a light tone, not --accent-soft. */
.mobile-nav a.is-call { color: #fff; }

/* 4. A 3px black rule under every section title is heavy on white, and
      wrong under a serif. Thinner and wider reads as an engraved line,
      which is what the crest is doing. */
.title-rule { width: 88px; height: 2px; }

/* 5. Same reasoning on the card top-edge. */
.why, .step { border-top-width: 2px; }
.step { border-top: 2px solid var(--accent); }

/* Playfair's hairlines need a touch more room at display sizes than the
   scaffold's condensed default assumed. */
.hero h1 { letter-spacing: -0.01em; }
.section-title { letter-spacing: -0.005em; }

/* The badge is circular, so it wants a smaller box than the wide
   wordmarks the scaffold's clamps were set for. */
.brand img { width: clamp(52px, 7vw, 64px); }
.hero-logo { width: clamp(150px, 26vw, 210px); }
footer .flogo { width: 132px; }

/* 6. The primary button is the logo ink, which is the right colour
      everywhere on this light page EXCEPT the one place it lands on the
      dark hero photo, where a near-black fill on a near-black garage
      shot is effectively invisible. On the photo it flips: white fill,
      ink label. Same button, opposite ground. */
.hero .btn-primary {
    background: #fff; color: #121212;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}
.hero .btn-primary:hover {
    background: #fff; color: #000;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}

/* Keeps the phone number off a line break on narrow screens. */
.nb { white-space: nowrap; }