/* ============================================================
   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 Nemo's badge (assets/logo.png) ──
       The mark is a circular badge on its own near-black field, so this
       site goes dark-themed. Every value below traces to a pixel in it. */
    --bg: #0B0E13;                 /* logo's dark field #121418, taken two
                                      steps darker so the round badge still
                                      reads as a badge against the page */
    --surface: #151A22;            /* cards, panels — the field lifted */
    --surface-alt: #0F131A;        /* alternating sections, footer */

    --accent: #B9F44E;             /* the lime disc behind the fish, #B9F44E */
    --accent-dark: #9AD52F;        /* same hue ~15% darker, for hover */
    --accent-soft: #CCF884;        /* accent ON the dark ground: links, prices,
                                      small text. Lighter than --accent, as a
                                      dark site needs. ~15:1 on --bg. */
    --accent-glow: rgba(185, 244, 78, 0.30);   /* button shadow */
    --accent-wash: rgba(185, 244, 78, 0.12);   /* icon chip fills */
    --accent-edge: rgba(185, 244, 78, 0.28);   /* tinted panel borders */
    --on-accent: #0E1305;          /* dark ink — the lime is light (L 63%),
                                      so white text on it is unreadable */

    /* Second mark colour: the bubbles and water, #60D0F7. Used sparingly —
       the "Most Popular" flag and the hero slogan's accent word — so the
       page isn't wall-to-wall lime. */
    --aqua: #60D0F7;
    --aqua-ink: #04222E;

    --heading: #E9EFE1;            /* h1–h3, a hair warm-green off the mark */
    --text: #9EA9A2;               /* body copy */
    --muted: #737E80;              /* captions, labels, sub-copy */
    --line: rgba(233, 239, 225, 0.12);        /* card borders */
    --line-soft: rgba(233, 239, 225, 0.07);   /* section rules */

    /* Overlay ink for hero and band gradients — --bg as raw channels. */
    --scrim: 11, 14, 19;

    /* ── Type ──
       Rubik: a geometric sans with softly rounded corners, which is what the
       badge's own "Nemo's Auto Detailing" wordmark is doing. Not used by any
       other client. Transform left at `none` to match that wordmark's
       title case — uppercase turns a friendly mascot brand shouty. */
    --font-display: 'Rubik', 'Inter', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --display-transform: none;
    --display-spacing: -0.012em;
    --radius: 12px;
}

* { 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 ──
   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(240px, 50vw, 480px); margin: 0 auto 1.1rem;
    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: 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); } } }


/* ── Nemo's: mark-specific sizing and the aqua second colour ──
   The logo is a round badge, not a wide wordmark, so the scaffold's widths
   (built for a wordmark) make it a giant disc. Pulled down at all three
   placements after looking at it rendered. */
.brand img { width: clamp(60px, 9vw, 74px); }
.hero-logo { width: clamp(210px, 34vw, 330px); }
footer .flogo { width: 132px; }

/* The fish and bubbles are the mark's other half; letting aqua carry the
   "Most Popular" flag and the slogan's accent word keeps the lime from
   becoming the only colour on the page. */
.pkg .flag { background: var(--aqua); color: var(--aqua-ink); }
.hero h1.hero-slogan em { color: var(--aqua); }
.step::before { color: var(--aqua); }