/* ============================================================
   Restore Detailing — Anthem, AZ.
   Built from template/detail-site. Shared by index.html and
   book/index.html, so the palette below is the ONLY place theme
   colours live.
   ============================================================ */

:root {
    /* ── Palette: sampled from the client's own badge ──

       The supplied mark (1179x1248 JPEG) was sampled at 160x160. The
       only colours in it are a pure white field (255,255,255 and the
       JPEG neighbours 249-254) and pure black ink (0,0,0 through
       5,5,5). Not one pixel in the file clears saturation 0.01. There
       is no hue to inherit, so this site has no hue — picking one
       would be inventing a brand the client does not have.

       The mark sits on white, so the page goes LIGHT. That was the
       logo's call, not a preference.

       Ramp: the page ground is the logo's field VERBATIM, and cards
       sit a step down from it. White panels floating on grey is the
       other way to build a light site; this one is inset instead, so
       the white the badge was drawn on stays the dominant surface. */
    --bg: #FFFFFF;                 /* the logo's field, verbatim */
    --surface: #F6F6F6;            /* cards and panels, inset one step
                                      from the page ground */
    --surface-alt: #ECECEC;        /* alternating sections and footer */

    --accent: #171717;             /* the logo ink, lifted just off pure
                                      black so hover has somewhere to go */
    --accent-dark: #000000;        /* the ink verbatim, for hover */
    --accent-soft: #2E2E2E;        /* accent ON the page ground: prices,
                                      links, small text. LIGHT site, so
                                      this goes DARKER than --accent,
                                      not lighter. 13.6:1 on --bg. */
    --accent-glow: rgba(23, 23, 23, 0.18);   /* button shadow. The
                                      scaffold's 0.42 is a bruise when
                                      the glow colour is black. */
    --accent-wash: rgba(23, 23, 23, 0.06);   /* icon chip fills */
    --accent-edge: rgba(23, 23, 23, 0.24);   /* tinted panel borders */
    --on-accent: #FFFFFF;          /* white on a near-black accent: 18.1:1 */

    --heading: #111111;            /* 18.9:1 on --bg */
    --text: #454545;               /* 9.7:1 on --bg, 8.5:1 on --surface */
    --muted: #6A6A6A;              /* 5.5:1 on --bg; 4.7:1 on --surface-alt,
                                      which is the worst ground it lands on */
    --line: rgba(17, 17, 17, 0.13);          /* card borders */
    --line-soft: rgba(17, 17, 17, 0.07);     /* section rules */

    /* Overlay ink for the hero gradient and the mobile nav. Deliberately
       NOT --bg: this is a light site, and both of those 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 here. */
    --scrim: 14, 14, 14;

    /* ── Type ── Cormorant Garamond. The badge is an engraved seal: a
       laurel wreath around a high-contrast RD, with letterspaced Roman
       capitals curved around the ring. That is old-style, not
       automotive, so a condensed grotesque would fight it. Cormorant
       carries the same fine serifs and open, calligraphic letterfit at
       display sizes. Unused by any other client — Barlow Condensed,
       Saira Condensed, Sora, Bitter, Fraunces, Great Vibes, Space
       Grotesk, Kanit, Chakra Petch and Playfair Display are all
       spent. ── */
    --font-display: 'Cormorant Garamond', 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.002em;
    --radius: 4px;                    /* near-square: the mark is an
                                         engraved seal, and soft corners
                                         read as a different brand */
}

* { 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; }

/* ── Photo band (optional) ── */
.band {
    position: relative; text-align: center; color: #fff;
    padding: clamp(4rem, 11vw, 6.2rem) clamp(20px, 5vw, 44px);
    background: linear-gradient(rgba(var(--scrim), 0.80), rgba(var(--scrim), 0.88)), url('/assets/band.webp') center / cover no-repeat;
}
.band h2 { color: #fff; font-size: clamp(1.8rem, 5.5vw, 2.6rem); margin-bottom: 0.8rem; text-wrap: balance; }
.band p { color: rgba(255,255,255,0.82); max-width: 52ch; margin: 0 auto 1.9rem; }

/* ── 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); } } }

/* ════════════════════════════════════════════════════════════
   Corrections for a LIGHT page and an achromatic mark

   Everything above was written against a dark ground and a coloured
   accent. This brand has neither: the accent IS the ink, and the page
   IS the logo's white field. Each rule below is a place where the
   shared sheet would otherwise put white on white, black on black, or
   the one stray hue on a site that has none. No colour is chosen here
   that was not already sampled from the badge.
   ════════════════════════════════════════════════════════════ */

/* 1. The mark is black ink on transparent, and the header floats over a
      dark garage photo until it goes solid. Unfiltered it simply
      disappears up there. invert(1) on pure black is pure white, so the
      client's own artwork carries both states without a second file. */
.header .brand img {
    filter: invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
    transition: filter 0.3s ease;
}
.header.scrolled .brand img { filter: none; }
/* The booking page's header is solid white from 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 10px 36px rgba(0, 0, 0, 0.5)); }

/* 2. The hero emphasis is --accent-soft, which here is near-black and
      vanishes into the photo. There is no second brand colour to reach
      for, so the emphasis is carried by Cormorant's italic instead of
      by hue. */
.hero h1 em { font-style: italic; color: #fff; }

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

/* 4. A 3px black bar under every section title is heavy on white and
      wrong beneath an old-style serif. A hairline, run wider, reads as
      the engraved rule the badge is already using. */
.title-rule { width: 112px; height: 1px; margin: 1.3rem auto; opacity: 0.55; }

/* 5. The primary button is the logo ink — correct everywhere on this
      white page EXCEPT the hero, where a near-black fill lands on a
      near-black garage shot and disappears. There it flips: white
      fill, ink label. Same button, opposite ground. */
.hero .btn-primary {
    background: #fff; color: #111111;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
}
.hero .btn-primary:hover {
    background: #fff; color: #000;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.52);
}

/* 6. The scaffold's review stars are gold (#f0a500). On a site sampled
      from a mark with no hue in it, five gold stars would be the only
      colour on the page — and they sit above a prompt for reviews that
      do not exist yet, where gold reads as a rating already earned. */
.review-cta .stars { color: var(--accent-soft); opacity: 0.45; }

/* ── Cormorant sizing ──
   The scaffold's clamps were set for a condensed grotesque. Cormorant
   has a small x-height and fine strokes, so the same numbers come out
   noticeably quieter; display sizes go up and headings sit at 600
   rather than 700, where the hairlines stay open. */
.display, h1, h2, h3 { font-weight: 600; }
.hero h1 { font-size: clamp(2.5rem, 8.2vw, 4.3rem); line-height: 1.06; }
.section-title { font-size: clamp(2.2rem, 6.8vw, 3.3rem); }
.pkg h3 { font-size: 1.85rem; }
.pkg .price { font-size: 2.5rem; font-weight: 600; }
.band h2 { font-size: clamp(2.1rem, 6.2vw, 3.1rem); }
.book-hero h1 { font-size: clamp(2.4rem, 7.5vw, 3.6rem); }
.review-cta h3, .step h3 { font-family: var(--font-display); font-size: 1.45rem; }
.why h3 { font-family: var(--font-display); font-size: 1.4rem; }
/* The add-on price is display type at 1.15rem, and Cormorant's old-style
   figures sit low and fine at that size — next to a bold sans label it
   stops reading as the number. */
.addon .row b { font-size: 1.45rem; }
/* .c-item h3 is deliberately NOT promoted here. It is a 0.72rem uppercase
   label sitting above the value it introduces, not a heading; setting it
   in display type at heading size makes it shout over the phone number
   underneath it. */

/* 7. --radius is 4px for an engraved, near-square feel, but the button
      and the nav pill carry their own hardcoded 8px. */
.btn { border-radius: 3px; }
.nav-call { border-radius: 3px; }
/* The why icons echo the seal instead of the card corners. */
.why .ic { border-radius: 50%; }

/* 8. The badge is circular, so it wants a much smaller box than the
      clamps the scaffold set for wide wordmarks. */
.brand img { width: clamp(50px, 6.5vw, 62px); }
.hero-logo { width: clamp(144px, 25vw, 200px); }
footer .flogo { width: 124px; }

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

/* 9. The hero's secondary button is a --line border around --heading text.
      Both are near-black here, so on the garage photo the button is a
      rectangle of nothing — the label included. The scaffold already has
      .btn-on-photo for this case; the hero ghost needs the same treatment
      without changing the markup. */
.hero .btn-ghost { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.hero .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff; color: #fff;
}

/* 10. Same fault on the nav call pill: its fill is --accent, which is the
      ink, so while the header is transparent over the photo the pill
      vanishes and only the number survives. Outlining it there keeps it
      reading as a button; inset shadow rather than a border so the box
      does not resize on scroll. The solid header restores the fill. */
.header--invert:not(.scrolled) .nav-call {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
}

/* 11. Third instance of the same fault, and the last one: the band's CTA
       is --accent on a dark photo band, so a near-black button lands on a
       near-black ground. Same flip as the hero. */
.band .btn-primary {
    background: #fff; color: #111111;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
}
.band .btn-primary:hover {
    background: #fff; color: #000;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.52);
}

/* 12. The outline in rule 10 keys off :not(.scrolled), which is true on the
       home page only while the header floats over the photo. The booking
       page's header is solid white from first paint and never gets
       .scrolled, so that rule would strip the pill's fill and leave a white
       outline and white label on a white bar. Restore the fill there. */
.is-booking .header--invert .nav-call {
    background: var(--accent);
    box-shadow: none;
}