/* ============================================================
   Apex Integrations — detailing site stylesheet
   Shared by index.html and book/index.html. Both pages link it,
   so the palette below is the ONLY place theme colours live.

   Token names are deliberately theme-agnostic (--bg, --surface,
   --heading) rather than colour-specific (--blue, --silver), so the
   same sheet drives a dark site like Rylan's and a light one like
   Detailing for Chew without renaming anything.

   Fill the :root block from the client's logo. See
   .claude/skills/detail-mockup/SKILL.md for how to sample it.
   ============================================================ */

:root {
    /* ── Palette: sampled from the Heape Detailing Co. badge ──
       The mark is a steel-grey ring around a deep navy field, with the
       boat and wordmark knocked out in white. The logo carries its own
       dark ground, so the site is dark-themed. */
    --bg: #0c1014;                 /* page ground — the near-black the badge sits on (12,16,20) */
    --surface: #0a1a3c;            /* cards, panels — the badge navy (8,26,66), a hair lifted */
    --surface-alt: #080f1e;        /* alternating sections, footer — ground pulled toward the navy */

    --accent: #1f53c1;             /* badge navy's hue (221°) raised to L44% so it works as a button */
    --accent-dark: #19439c;        /* same hue, ~15% darker, for hover */
    --accent-soft: #7fb0f2;        /* same hue at L72% — 8.5:1 on --bg, for prices and links */
    --accent-glow: rgba(31, 83, 193, 0.42);   /* button shadow */
    --accent-wash: rgba(31, 83, 193, 0.18);   /* icon chip fills */
    --accent-edge: rgba(31, 83, 193, 0.34);   /* tinted panel borders */
    --on-accent: #ffffff;          /* the badge's own knockout white; accent is dark enough for it */

    --heading: #eef2f8;            /* the wordmark white, warmed off pure #fff */
    --text: #a2adba;               /* the ring grey (87,96,107) lifted to read on the dark ground */
    --muted: #79858f;              /* the ring grey itself, lifted just past 4.5:1 */
    --line: rgba(226, 233, 243, 0.12);        /* card borders */
    --line-soft: rgba(226, 233, 243, 0.07);   /* section rules */

    /* Overlay ink for the hero gradient — the page ground as raw channels. */
    --scrim: 12, 16, 20;

    /* ── Type ── Oswald: a rigid, tall condensed grotesque that echoes the
       italic block wordmark on the badge without copying it. Unused by any
       other client site. Body stays Inter. ── */
    --font-display: 'Oswald', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --display-transform: uppercase;
    --display-spacing: 0.035em;
    --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(58px, 8vw, 72px); 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 ──
   Modelled on North Georgia Shine, which is the look Owen wants: the brand
   mark IS the hero, big and full-bleed, with a short slogan under it and
   nothing else. No headline sentence, no paragraph. A wall of marketing copy
   over a photo is what makes these read as generic; a confident wordmark and
   five words does not.

   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: 100vh; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 120px clamp(20px, 5vw, 44px) 80px;
    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: 860px; }

/* Roughly half the viewport width, as on NGS. A wide wordmark carries this
   easily; a small round badge will not — check it rendered and pull the
   maximum down if the logo is a compact mark rather than a wordmark. */
.hero-logo {
    width: clamp(210px, 34vw, 330px); margin: 0 auto 1.4rem;
    filter: drop-shadow(0 12px 40px rgba(0,0,0,0.7));
}

/* The slogan, not a headline. Short, spaced, in the brand's own voice. */
.hero h1.hero-slogan {
    color: #fff; font-weight: 700;
    font-size: clamp(0.95rem, 2.5vw, 1.45rem);
    letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5;
    margin: 0 auto 2rem; max-width: 26ch; text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
}
.hero h1.hero-slogan em { font-style: normal; color: var(--accent-soft); }

/* Kept for a site whose logo is wordless and needs the name set in type. */
.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);
}

/* Side by side at every width — NGS keeps them compact and paired rather than
   stacking into two full-width slabs on a phone. */
.hero-cta { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { padding: 13px 26px; font-size: 0.94rem; }
@media (max-width: 560px) {
    .hero-cta .btn { display: inline-block; width: auto; padding: 12px 20px; font-size: 0.88rem; }
}
.hero-sub { margin-top: 1.6rem; 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: 128px; 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); } } }