/* ==========================================================================
   site.css - the design system for Longboat Key Pool Service
   Plain CSS, no framework. One stylesheet for the whole site.

   ART-DIRECTION BRIEF (the decisions this file encodes):
   MOOD: "sunlit coastal luxury" - the calm, expensive stillness of a screened
         lanai pool at a waterfront island home, late-morning light on turquoise
         water. Serene, premium, unhurried; confident, never corporate.
   TYPE: display = Fraunces (a warm, characterful serif) for headings;
         body = Hanken Grotesk (clean, highly readable) for paragraphs.
         Both are web fonts loaded from Google Fonts the fast, flicker-free way
         (preconnect + display=swap; see inc/header.php).
   COLOR: a DOMINANT deep gulf navy-teal for dark sections and headings; warm
         shell/sand light surfaces for most backgrounds; a bright POOL-AQUA
         accent for primary buttons and highlights; a warm SUN-GOLD secondary
         accent for energy; separate text colors for light AND dark backgrounds.
   MOTIFS (the "designed" touches): a soft radial aqua glow behind the hero; a
         faint diagonal "sunlight ripple" stripe on dark sections; soft card
         shadows with a gentle hover lift; a tracked-out gold uppercase eyebrow;
         a full-bleed edge-to-edge hero.

   RESTYLE THE WHOLE SITE from one place: every color, font, space, radius, and
   shadow below is a named token (a CSS custom property on :root). Change the
   token once here and every component that points at it updates at once - e.g.
   edit --color-deep to shift the dominant navy everywhere, or swap --font-display
   to re-type every heading on the site. Nothing hard-codes a raw color; it all
   refers back to these tokens, which is what makes the look consistent and yours.
   ========================================================================== */

/* ==========================================================================
   WEB FONTS (Ch 10, Step 5) - self-hosted, slimmed, and jump-free.

   The brand fonts are now SELF-HOSTED (no third-party request to Google's
   servers) as slimmed variable woff2 files in /assets/fonts, built by
   bin/build-fonts.py (Fraunces keeps its optical-size axis; both are clamped to
   the weights the site uses and subset to Latin).

   font-display: optional - text paints ONCE in the metric-matched fallback and
   the brand font only swaps in if it's already ready, so a font download never
   holds up or shifts the text. Because the fallback below is size-matched, the
   stand-in looks nearly identical, so `optional` costs almost nothing visually
   while giving the most stable paint. The fonts are deliberately NOT preloaded
   (see header.php) so they don't race the hero image for bandwidth.
   ========================================================================== */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 500 700;          /* variable range we instanced */
    font-display: optional;
    src: url("/assets/fonts/fraunces-subset.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400 700;
    font-display: optional;
    src: url("/assets/fonts/hanken-subset.woff2") format("woff2");
}

/* Metric-matched fallbacks: system fonts (no download) sized to occupy the
   EXACT same space as the real fonts, so when the brand font swaps in there is
   zero layout shift. Overrides computed by bin/build-fonts.py's metrics against
   Georgia (for Fraunces) and Arial (for Hanken). */
@font-face {
    font-family: "Fraunces Fallback";
    src: local("Georgia"), local("Times New Roman");
    size-adjust: 98.59%;
    ascent-override: 99.20%;
    descent-override: 25.87%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Hanken Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
    size-adjust: 96.25%;
    ascent-override: 103.89%;
    descent-override: 31.48%;
    line-gap-override: 0%;
}

/* --- Design tokens: define the brand once, reuse everywhere ---------------- */
:root {
    /* COLOR - layered palette -------------------------------------------- */
    /* Dominant: deep gulf navy-teal (dark sections, headings) */
    --color-deep: #0a2f45;
    --color-deep-2: #0e3f5c;        /* a step lighter, for gradients */

    /* Pool water mid-tones */
    --color-water: #1587a6;
    --color-water-deep: #0f6d88;

    /* Accents */
    --color-aqua: #2fc4d8;          /* bright pool aqua - PRIMARY buttons/highlights */
    --color-aqua-strong: #17a7bd;   /* hover state for aqua */
    --color-gold: #e0a94e;          /* warm sun gold - SECONDARY accent, eyebrow */
    --color-gold-strong: #cf9636;

    /* Light surfaces (most backgrounds) */
    --color-shell: #f6f2ea;         /* warm shell/sand off-white */
    --color-shell-2: #efe9dd;       /* a touch deeper, for alternating bands */
    --color-white: #ffffff;

    /* Text - separate colors for LIGHT vs DARK backgrounds */
    --color-ink: #14313f;           /* primary text on light surfaces */
    --color-muted: #566873;         /* secondary text on light surfaces */
    --color-cream: #eef4f5;         /* primary text on dark surfaces */
    --color-cream-muted: rgba(238, 244, 245, 0.78); /* secondary on dark */

    /* Hairlines / borders */
    --border-light: #e2dccf;        /* on light surfaces */
    --border-dark: rgba(255, 255, 255, 0.14); /* on dark surfaces */

    /* TYPE ---------------------------------------------------------------- */
    /* The metric-matched fallback ("… Fallback") sits right after the brand font
       so text paints instantly in the size-matched stand-in and swaps with zero
       layout shift. Then the usual system stack for anyone missing both. */
    --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body: "Hanken Grotesk", "Hanken Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Fluid type scale (clamp: shrinks on phones, grows on desktops).
       The h1/h2 floors are kept modest so long words never overflow a 360px
       phone; they still grow large and expressive on desktop. */
    --step-h1: clamp(1.85rem, 1.1rem + 3.6vw, 3.75rem);
    --step-h2: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
    --step-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.55rem);
    --step-body: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
    --line-body: 1.7;
    --measure: 68ch;                /* readable max line width */

    /* SPACING - an 8px-based scale --------------------------------------- */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 96px;

    /* DEPTH & SHAPE ------------------------------------------------------- */
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 2px rgba(10, 47, 69, 0.06), 0 2px 6px rgba(10, 47, 69, 0.06);
    --shadow-md: 0 6px 18px rgba(10, 47, 69, 0.10), 0 2px 6px rgba(10, 47, 69, 0.06);
    --shadow-lg: 0 18px 40px rgba(10, 47, 69, 0.18);

    /* MOTION -------------------------------------------------------------- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --speed: 180ms;

    /* LAYOUT -------------------------------------------------------------- */
    --container-max: 1160px;
}

/* --- Reset-ish base -------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step-body);
    color: var(--color-ink);
    background: var(--color-shell);
    line-height: var(--line-body);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-deep);
    margin: 0 0 var(--space-sm);
    font-optical-sizing: auto;
    overflow-wrap: break-word;   /* never let a long word overflow its container */
}

h1 { font-size: var(--step-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--step-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--step-h3); }

p { margin: 0 0 var(--space-sm); }

a {
    color: var(--color-water-deep);
    text-underline-offset: 2px;
}
a:hover { color: var(--color-aqua-strong); }

:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
}

/* ==========================================================================
   COMPONENT KIT - reusable building blocks, all built from the tokens above.
   ========================================================================== */

/* --- Container: centers content, pads the sides on small screens ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}
/* A narrower reading column for long-form prose (location-page body copy, Ch 17):
   keeps line length comfortable for the multi-paragraph "local know-how" sections. */
.container.narrow { max-width: 70ch; }
/* A slightly larger lead paragraph for a location page's intro. */
.lede-lg { font-size: 1.15rem; line-height: 1.7; }
/* A compact hero for index/listing pages (the /locations index) - the standard
   hero without the full-height media split. */
.hero--compact { padding-block: var(--space-xl); }

/* --- Eyebrow: a small tracked-out uppercase gold label above headings ----- */
.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Deep gold that clears 4.5:1 on the light section backgrounds (the bright
       --color-gold is kept for dark sections + the photo hero, below). */
    color: #8a5e0f;
    margin: 0 0 var(--space-xs);
}
.section--dark .eyebrow,
.hero .eyebrow { color: var(--color-gold); }

/* --- Homepage showcase hero: a big full-bleed photo with the message overlaid.
       Deliberately different from the split hero on inner pages, and built to
       show off an upscale pool. --------------------------------------------------- */
.hero-showcase {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-deep);
}
.hero-showcase__bg { position: absolute; inset: 0; z-index: 0; }
.hero-showcase__bg picture { display: block; width: 100%; height: 100%; }
.hero-showcase__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}
.hero-showcase__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(6,26,45,0.08) 0%, rgba(6,26,45,0.36) 46%, rgba(6,26,45,0.92) 100%),
        linear-gradient(90deg, rgba(6,26,45,0.58) 0%, rgba(6,26,45,0.12) 58%);
}
.hero-showcase__inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding-block: clamp(3rem, 8vh, 6rem) clamp(2.5rem, 6vh, 4.5rem);
    color: #fff;
}
.eyebrow--on-photo { color: var(--color-deep); text-shadow: 0 1px 8px rgba(255,255,255,0.45); }

/* Frosted horizontal "call me back" bar - lives INSIDE the hero (SSM-style glass,
   long layout). Transparent so the photo shows through; readable via blur + border. */
.hero-callback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    max-width: 640px;
    margin-top: 1.7rem;
    padding: 0.75rem 0.8rem;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.34);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 10px 34px rgba(6,26,45,0.3);
}
.hero-callback__label {
    flex: 1 0 100%;
    margin: 0 0 0.1rem;
    color: #fff;
    font-weight: 700;
    font-size: 0.98rem;
    text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.hero-callback input {
    flex: 1 1 8.5rem;
    min-width: 0;
    padding: 0.62rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 9px;
    background: rgba(255,255,255,0.94);
    color: var(--color-ink);
    font: inherit;
}
.hero-callback input::placeholder { color: #5f7078; }
.hero-callback input:focus-visible { outline: 2px solid var(--color-aqua); outline-offset: 2px; }
.hero-callback .btn { flex: 0 0 auto; white-space: nowrap; }
.hero-callback__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hero-showcase__title {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.4rem, 5.2vw, 4rem);
    line-height: 1.04;
    margin: 0.4rem 0 0;
    text-shadow: 0 2px 26px rgba(0,0,0,0.4);
}
.hero-showcase__lede {
    color: rgba(255,255,255,0.92);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.55;
    max-width: 46ch;
    margin: 1.1rem 0 0;
    text-shadow: 0 1px 16px rgba(0,0,0,0.35);
}
.hero-showcase .btn-row { margin-top: 1.9rem; }
.hero-showcase__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.7rem;
    list-style: none;
    margin: 1.9rem 0 0;
    padding: 0;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    font-size: 0.95rem;
}
.hero-showcase__trust li { position: relative; padding-left: 1.45rem; }
.hero-showcase__trust li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-aqua);
    font-weight: 800;
}
/* Ghost button - outlined white, for use over a dark photo hero. */
.btn--ghost {
    background: rgba(255,255,255,0.10);
    color: #fff;
    border-color: rgba(255,255,255,0.72);
}
.btn--ghost:hover {
    background: #fff;
    color: var(--color-deep);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
@media (max-width: 760px) {
    /* Hybrid mobile hero: headline sits OVER the pool band (top), and the lede +
       CTAs + callback sit below it on the navy. Full pool shows; text on photo. */
    .hero-showcase { display: block; min-height: 0; position: relative; }
    .hero-showcase__bg { position: relative; inset: auto; height: 54vh; }
    .hero-showcase__img { position: absolute; inset: 0; object-position: center 55%; transform: none; }
    .hero-showcase__scrim {
        display: block; top: 0; height: 54vh;
        background: linear-gradient(180deg, rgba(6,26,45,0) 42%, rgba(6,26,45,0.72) 100%);
    }
    .hero-showcase__inner { position: static; max-width: none; padding: 0; }
    .hero-showcase__head {
        position: absolute; top: 0; left: 0; right: 0; height: 54vh; z-index: 3;
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 1.25rem;
    }
    .hero-showcase__head .eyebrow--on-photo { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
    .hero-showcase__head .hero-showcase__title { text-shadow: 0 2px 18px rgba(0,0,0,0.55); }
    .hero-showcase__body {
        position: relative; z-index: 2;
        background: var(--color-deep);
        padding: 1.5rem 1.25rem 2rem;
    }
    .hero-showcase__body .hero-showcase__lede { text-shadow: none; }
    .hero-callback {
        flex-direction: column; align-items: stretch; max-width: none;
        background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2);
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .hero-callback input, .hero-callback .btn { width: 100%; }
}

/* --- Section rhythm: consistent vertical spacing; light + dark variants ---- */
.section {
    padding-block: var(--space-2xl);
}
.section__intro {
    max-width: var(--measure);
    margin-bottom: var(--space-lg);
}
.section--tint { background: var(--color-shell-2); }

/* Dark section: pine-deep gulf navy background, cream text, ripple texture. */
.section--dark {
    position: relative;
    background: var(--color-deep);
    color: var(--color-cream);
    overflow: hidden;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--color-white); }
.section--dark p { color: var(--color-cream-muted); }
/* Plain text links on dark bands go aqua - but NOT buttons, which keep their own
   dark-on-bright text (a .btn here was being forced to aqua → invisible). */
.section--dark a:not(.btn) { color: var(--color-aqua); }

/* --- Signature motif: faint diagonal "sunlight ripple" stripe texture ------ */
.ripple::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.035) 0,
        rgba(255, 255, 255, 0.035) 2px,
        transparent 2px,
        transparent 22px
    );
}
.ripple > * { position: relative; z-index: 1; }

/* --- Buttons --------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 28px;
    min-height: 50px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                background var(--speed) var(--ease),
                color var(--speed) var(--ease);
}

/* Primary: filled aqua with a subtle lift on hover */
.btn--primary {
    background: var(--color-aqua);
    color: var(--color-deep);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
    background: var(--color-aqua-strong);
    color: var(--color-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Gold call variant - used for the tap-to-call action */
.btn--gold {
    background: var(--color-gold);
    color: var(--color-deep);
    box-shadow: var(--shadow-sm);
}
.btn--gold:hover {
    background: var(--color-gold-strong);
    color: var(--color-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Secondary: outlined */
.btn--outline {
    background: transparent;
    color: var(--color-deep);
    border-color: var(--color-deep);
}
.btn--outline:hover {
    background: var(--color-deep);
    color: var(--color-white);
    transform: translateY(-2px);
}
/* Outlined button sitting on a dark background */
.section--dark .btn--outline,
.hero .btn--outline {
    color: var(--color-cream);
    border-color: rgba(255, 255, 255, 0.5);
}
.section--dark .btn--outline:hover,
.hero .btn--outline:hover {
    background: var(--color-white);
    color: var(--color-deep);
    border-color: var(--color-white);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* --- Call-me-back band (homepage, directly under the hero) ----------------- */
/* Deep-navy band so it separates cleanly from the light section below. White
   title, muted-light sub, gold eyebrow, aqua primary button, full-size white
   inputs. Stacks full-width on phones. */
.callback {
    background: var(--color-deep);
}
.callback__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem 2.5rem;
    align-items: center;
    padding-block: 1.5rem;
}
.callback__pitch {
    max-width: 44ch;
}
.callback__pitch .eyebrow {
    color: var(--color-gold);
}
.callback__title {
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    margin: .2rem 0 .15rem;
}
.callback__sub {
    color: var(--color-cream-muted);
    font-size: .95rem;
    margin: 0;
}
.callback__form {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.callback__form input {
    padding: .62rem .85rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: var(--color-ink);
    min-width: 11rem;
}
.callback__form input::placeholder {
    color: #8aa0a8;
}
.callback__form input:focus-visible {
    outline: 2px solid var(--color-aqua);
    outline-offset: 2px;
}
.callback__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
@media (max-width: 760px) {
    .callback__inner { grid-template-columns: 1fr; gap: .9rem; }
    .callback__form { flex-direction: column; align-items: stretch; }
    .callback__form input,
    .callback__form .btn { width: 100%; }
}

/* --- Cards ----------------------------------------------------------------- */
.card {
    background: var(--color-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* Media-topped card variant: image across the top, text below */
.card--media {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card--media .card__media {
    aspect-ratio: 3 / 2;
    background: var(--color-shell-2);
}
.card--media .card__media img { width: 100%; height: 100%; object-fit: cover; }
.card--media .card__body {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.card--media .card__body h3 { margin-bottom: var(--space-xs); }
.card__link {
    margin-top: auto;
    padding-top: var(--space-sm);
    font-weight: 700;
    text-decoration: none;
    color: var(--color-water-deep);
}
.card__link:hover { color: var(--color-aqua-strong); }
.card__link::after { content: " \2192"; }

/* --- Card row: wraps responsively AND centers a short last row ------------- */
/* Uses flexbox with justify-content:center. Cards are flex-grow:0 with a fixed
   basis so a lone card in the last row has real free space on BOTH sides for
   centering (flex-grow:1 would let it stretch and eat the space - see Ch 7). */
.card-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}
.card-row > .card {
    flex: 0 1 340px;   /* grow 0 → short last row centers instead of stretching */
    min-width: 0;
}

/* --- Feature list (trust points, "what we stand for") --------------------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
}
.feature h3 { font-size: var(--step-h3); margin-bottom: var(--space-xs); }

/* --- Numbered steps ("how it works") -------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
    counter-reset: step;
}
.step { position: relative; padding-top: 4px; }
.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--color-aqua);
    color: var(--color-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

/* --- Service-area link strip: a tidy row of town buttons ------------------- */
.town-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.town-strip a {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--color-white);
    border: 1px solid var(--border-light);
    color: var(--color-deep);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.town-strip a:hover {
    background: var(--color-aqua);
    color: var(--color-deep);
    transform: translateY(-2px);
}
.section--dark .town-strip a {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-dark);
    color: var(--color-cream);
}
.section--dark .town-strip a:hover { background: var(--color-aqua); color: var(--color-deep); }

/* --- FAQ (answer-first accordion, works without JS) ----------------------- */
.faq { max-width: var(--measure); }
.faq__item {
    border-bottom: 1px solid var(--border-light);
    padding: var(--space-sm) 0;
}
.faq__item > summary {
    font-family: var(--font-display);
    font-size: var(--step-h3);
    font-weight: 600;
    color: var(--color-deep);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    align-items: baseline;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
    content: "+";
    color: var(--color-gold-strong);
    font-family: var(--font-body);
    font-weight: 700;
}
.faq__item[open] > summary::after { content: "-"; }
.faq__item > p { margin: var(--space-sm) 0 0; color: var(--color-muted); }

/* --- Prose helper for long-form content ----------------------------------- */
/* Center the readable column so a prose-only page (pricing, about) reads as an
   intentional article, not text pinned to the left with the right half empty. */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose h3 { margin-top: var(--space-lg); }
.included {
    margin: var(--space-sm) 0 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-shell-2);
    border-left: 4px solid var(--color-aqua);
    border-radius: var(--radius-sm);
}
.included strong { color: var(--color-deep); }

/* ==========================================================================
   SITE HEADER - two-tier: a slim utility bar above the main nav row.
   ========================================================================== */
.site-header { position: relative; background: var(--color-deep); color: var(--color-white); }

/* Tier 1: utility bar (phone + trust note) */
.utility-bar {
    background: var(--color-deep-2);
    border-bottom: 1px solid var(--border-dark);
    font-size: 0.85rem;
}
.utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 40px;
    padding-block: 6px;
}
.utility-bar__note { color: var(--color-cream-muted); }
.utility-bar__phone {
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.utility-bar__phone:hover { color: var(--color-aqua); }

/* Tier 2: main nav row */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 74px;
}
.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    text-decoration: none;
}
.site-header__brand img { height: 40px; width: auto; }
.site-header__brand .brand-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.1px;
    line-height: 1.05;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.site-nav a {
    color: var(--color-white);
    text-decoration: none;
    font-weight: 600;
}
.site-nav a:hover { color: var(--color-aqua); }
.site-nav__cta {
    background: var(--color-aqua);
    color: var(--color-deep) !important;
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    transition: background var(--speed) var(--ease);
}
.site-nav__cta:hover { background: var(--color-aqua-strong); color: var(--color-deep) !important; }

/* Hamburger toggle - hidden on desktop */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.nav-toggle__bar { display: block; width: 26px; height: 3px; background: var(--color-white); border-radius: 2px; }

/* ==========================================================================
   HERO - full-bleed, two-column, with the aqua glow + ripple motif.
   ========================================================================== */
.hero {
    position: relative;
    background:
        radial-gradient(1200px 520px at 78% 8%, rgba(47, 196, 216, 0.28), transparent 60%),
        linear-gradient(158deg, var(--color-deep), var(--color-water-deep));
    color: var(--color-cream);
    overflow: hidden;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-2xl);
    padding-block: var(--space-2xl);
}
.hero__title { color: var(--color-white); margin-bottom: var(--space-sm); }
.hero__lede {
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
    color: var(--color-cream-muted);
    max-width: 46ch;
    margin-bottom: var(--space-lg);
}
.hero__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-dark);
    list-style: none;
    padding-left: 0;
}
.hero__trust li {
    font-weight: 600;
    color: var(--color-cream);
    display: flex;
    align-items: center;
    gap: 8px;
}
.hero__trust li::before {
    content: "";
    width: 10px; height: 10px;
    border-radius: 999px;
    background: var(--color-gold);
    flex: 0 0 auto;
}

/* ==========================================================================
   PAGE HERO - a compact hero for interior pages (services, about, legal).
   ========================================================================== */
.page-hero {
    position: relative;
    background:
        radial-gradient(900px 400px at 85% 0%, rgba(47, 196, 216, 0.22), transparent 60%),
        linear-gradient(158deg, var(--color-deep), var(--color-water-deep));
    color: var(--color-cream);
    overflow: hidden;
    padding-block: var(--space-2xl);
}
.page-hero__inner { max-width: var(--measure); }
.page-hero h1 { color: var(--color-white); }
.page-hero p { color: var(--color-cream-muted); font-size: 1.15rem; margin-bottom: 0; }

/* Compact page-hero for the dedicated FORM pages (contact, request a quote): a
   slim header so the form itself sits at/near the top of the fold on mobile
   instead of being pushed a full screen down. Same look, less vertical air. */
.page-hero--compact { padding-block: var(--space-lg); }
.page-hero--compact .page-hero__inner { max-width: 52ch; }
.page-hero--compact h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem); }
.page-hero--compact p { font-size: 1.05rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    background: var(--color-ink);
    color: var(--color-cream-muted);
    padding-block: var(--space-xl) var(--space-lg);
}
.site-footer a { color: var(--color-aqua); text-decoration: none; }
.site-footer a:hover { color: var(--color-white); }
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-dark);
}
.site-footer__brand { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--color-white); margin: 0 0 var(--space-xs); }
.site-footer h3 { color: var(--color-white); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-sm); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 8px; }
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-top: var(--space-lg);
    font-size: 0.85rem;
}
.site-footer__legal a { color: var(--color-cream-muted); margin-right: var(--space-md); }
.site-footer__colophon { flex-basis: 100%; margin: 0; color: var(--color-cream-muted); }
/* Muted, but must still clear 4.5:1 on the dark footer (a11y). */
.site-footer__admin { color: #94a4ab; }
.site-footer__admin a { color: #94a4ab; }

/* ==========================================================================
   404
   ========================================================================== */
.notfound { text-align: center; padding-block: var(--space-2xl); }
.notfound .btn-row { justify-content: center; }

/* ==========================================================================
   CONTACT FORM (Ch 9) - the form + its side panel.
   ========================================================================== */
.contact-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

/* The form card */
.contact-form {
    background: var(--color-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
}

.form-field { margin-bottom: var(--space-md); }
.form-field label,
.form-consent__label > span { font-weight: 600; color: var(--color-deep); }
.form-field label { display: block; margin-bottom: var(--space-xs); }

.form-field input,
.form-field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-ink);
    background: var(--color-shell);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.form-field textarea { resize: vertical; min-height: 130px; }

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-aqua);
    box-shadow: 0 0 0 3px rgba(47, 196, 216, 0.22);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
    border-color: #c0392b;
    background: #fdf3f2;
}
.form-field__error {
    margin: var(--space-xs) 0 0;
    color: #c0392b;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Top-of-form banner (validation summary / Turnstile retry) */
.form-error-banner {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: #fdf3f2;
    border-left: 4px solid #c0392b;
    border-radius: var(--radius-sm);
    color: #7d2a20;
    font-weight: 600;
}

/* Honeypot - kept OFF-SCREEN (not display:none, which some bots skip). */
.hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* SMS-consent opt-in */
.form-consent { margin-bottom: var(--space-md); }
.form-consent__label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
}
.form-consent__label input { margin-top: 4px; }
.form-consent__label > span {
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-muted);
}

/* Service picker - the checkbox list on the request-service (quote) form.
   A clean checkbox-left / label-right row, distinct from the single full-width
   SMS-consent block above. */
.service-picker { border: 0; padding: 0; margin: 0 0 var(--space-md); }
.service-picker > legend {
    font-weight: 600;
    color: var(--color-deep);
    margin-bottom: var(--space-xs);
    padding: 0;
}
.service-picker__option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 400;
    color: var(--color-ink);
    cursor: pointer;
}
.service-picker__option input { flex: 0 0 auto; margin: 0; }

/* Cloudflare Turnstile widget spacing */
.cf-turnstile { margin-bottom: var(--space-md); }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}
.form-actions__or { color: var(--color-muted); font-size: 0.95rem; }

/* Ch 25 (conversion): trust + risk-reversal + response-time promise, sitting
   right under the button - the half-second where the hesitation lives. */
.form-reassure {
    margin-top: var(--space-sm);
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.form-response {
    margin-top: 4px;
    margin-bottom: 0;
    color: var(--color-water-deep);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
}

/* The success state that replaces the form */
.form-thankyou {
    background: var(--color-white);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--color-aqua);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
}
.form-thankyou h2 { margin-top: 0; }

/* Side panel */
.contact-aside {
    background: var(--color-shell-2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}
.contact-aside h2 { font-size: var(--step-h3); }
.contact-aside__line { margin-bottom: var(--space-md); }
.contact-aside__line strong {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-water-deep);
    margin-bottom: 2px;
}
.contact-aside__note {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* ==========================================================================
   STICKY MOBILE CALL BAR (Ch 10) - phones only; hidden on ≥761px in the media
   query below. Fixed to the bottom so Call + Quote are always one thumb-tap away.
   ========================================================================== */
.mobile-cta {
    display: none; /* shown only at phone width (see media query) */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    gap: var(--space-xs);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--color-deep);
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 -6px 18px rgba(10, 47, 69, 0.22);
    /* iOS Safari: promote to its own layer so a fixed bar doesn't detach or
       flicker while the page scrolls behind it. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.mobile-cta a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;              /* > 44px thumb-tap minimum */
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    line-height: 1;
}
.mobile-cta__call  { background: var(--color-gold); color: var(--color-deep); }
.mobile-cta__quote { background: var(--color-aqua); color: var(--color-deep); }

/* ==========================================================================
   MOBILE - the menu collapses into a tappable hamburger, never vanishing.
   ========================================================================== */
@media (max-width: 860px) {
    .hero__inner { grid-template-columns: 1fr; gap: var(--space-lg); padding-block: var(--space-xl); }
    .hero__media { order: -1; }   /* image on top when stacked */
    /* Compact footer on narrow screens: brand across the top, the two link lists
       side by side underneath - not one tall single-column stack. */
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-lg); }
    .site-footer__grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .nav-toggle { display: flex; }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-deep);
        padding: var(--space-xs) var(--space-md) var(--space-md);
        box-shadow: var(--shadow-lg);
        z-index: 50;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 14px 4px; border-bottom: 1px solid var(--border-dark); }
    .site-nav__cta { text-align: center; margin-top: var(--space-sm); border-bottom: 0 !important; }

    .utility-bar__note { display: none; }
    .utility-bar__inner { justify-content: center; }

    .section { padding-block: var(--space-xl); }
    /* keep the two link lists side by side even on phones (brand still spans full,
       set in the 860px block above) - a single 1fr stack made the footer 1.5 screens tall. */

    /* Contact: stack the form above the side panel on phones. */
    .contact-layout { grid-template-columns: 1fr; gap: var(--space-lg); }
    .contact-form, .contact-aside, .form-thankyou { padding: var(--space-md); }

    /* Show the sticky call bar on phones, and reserve room at the bottom of the
       page so it never covers the last of the footer. ~72px bar + safe area. */
    .mobile-cta { display: flex; }
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    .card:hover, .btn:hover, .town-strip a:hover { transform: none; }
}

/* --- Breadcrumb trail (Ch 11) - visible + mirrored in BreadcrumbList schema - */
.breadcrumb {
    background: var(--color-shell-2);
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9rem;
}
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    list-style: none;
    margin: 0;
    padding-block: var(--space-xs);
}
.breadcrumb__item { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); }
.breadcrumb__item + .breadcrumb__item::before {
    content: "›";
    color: var(--color-muted);
    opacity: 0.6;
}
.breadcrumb__item a { color: var(--color-water-deep); text-decoration: none; }
.breadcrumb__item a:hover { text-decoration: underline; }
.breadcrumb__item [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* --- "Last reviewed by …" authorship byline (Ch 12) ------------------------ */
.reviewed-by {
    margin-top: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
    font-size: 0.9rem;
    color: var(--color-muted);
}
.section--dark .reviewed-by,
.ripple .reviewed-by { color: var(--color-cream-muted); border-top-color: var(--border-dark); }
.reviewed-by a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* --- Blog post body (Ch 18) ---------------------------------------------- */
.post-body { max-width: 70ch; }
.post-body h2 { font-size: var(--step-h2, 1.5rem); margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.post-body h3 { font-size: var(--step-h3, 1.2rem); margin-top: var(--space-md); margin-bottom: var(--space-xs); }
.post-body p { margin-bottom: var(--space-md); }
.post-body ul, .post-body ol { margin: 0 0 var(--space-md) 1.2rem; }
.post-body li { margin-bottom: var(--space-xs); }
.post-body a { color: var(--color-accent, #0a6a8a); text-underline-offset: 2px; }
.post-body .table-wrap { overflow-x: auto; margin: 0 0 var(--space-md); }
.post-body table { width: 100%; border-collapse: collapse; }
.post-body th, .post-body td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border, #dfe6ea); }
.post-body th { font-weight: 700; }
.post-hero img { width: 100%; height: auto; display: block; }
.post-cta { font-size: 1.05rem; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   AUTOBLOG MODULE MARKUP - the factory autoblog module self-renders /blog, /blog/{slug}, and
   /blog/category/{slug} through this archetype's chrome using its OWN class names (.cards, .blog-cat,
   .blog-hero, .blog-body, .rss-pill, .section__head, .meta, …). Longboat previously shipped a bespoke
   inc/blog-hook.php renderer; that was removed so new AI posts get their images from the module's
   image pipeline. These rules dress the module markup in Longboat's palette so the blog stays on-brand.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Neutral light band + narrow reading column the module's blog_page() wrapper uses. */
.section--light { background: transparent; }
.container--narrow { max-width: 70ch; }

/* One-line intro lede under the blog H1 (module blog_index_intro). */
.lede { font-size: 1.15rem; line-height: 1.7; color: var(--color-muted); max-width: var(--measure); }

/* Blog index / category head (module uses .section__head, mirrors this site's .section__intro). */
.section__head { max-width: var(--measure); margin-bottom: var(--space-lg); }
.section__head h1 { margin-bottom: var(--space-xs); }

/* Post-card grid (module blog_card_row → <div class="cards town-cards">). Flexbox + centered orphan
   rows to match this site's .card-row behavior (short last row centers instead of stretching). */
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}
.cards > .card { flex: 0 1 340px; min-width: 0; }
.card__media picture { display: contents; }

/* Card meta line + category label. */
.meta { color: var(--color-muted); font-size: .85rem; margin-bottom: var(--space-xs); }
.meta a { color: inherit; font-weight: 600; }
.blog-cat {
    display: inline-block;
    margin-bottom: var(--space-xs);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-gold-strong);
    text-decoration: none;
}
.blog-cat:hover { text-decoration: underline; }
.cards .card__body h3 { margin-bottom: var(--space-xs); }
.cards .card__body h3 a { color: var(--color-deep); text-decoration: none; }
.cards .card__body h3 a:hover { color: var(--color-water-deep); }
/* The module's "Read more →" card link already carries its own arrow glyph; suppress the site's
   .card__link::after so blog cards don't render a double arrow. */
.blog .card__link::after { content: none; }

/* RSS pill on the blog index head. */
.rss-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: var(--space-sm);
    padding: .4rem .85rem;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-deep);
    text-decoration: none;
}
.rss-pill:hover { border-color: var(--color-gold); color: var(--color-gold-strong); }
.rss-pill svg { width: 14px; height: 14px; color: var(--color-gold-strong); }

/* Single post: hero + body + CTA (module uses .blog-hero/.blog-body/.blog-cta). */
.blog-hero { margin: var(--space-md) 0; border-radius: 12px; overflow: hidden; }
.blog-hero picture { display: contents; }
.blog-hero img { width: 100%; height: auto; display: block; }
.blog-body { max-width: 70ch; }
.blog-body h2 { font-size: var(--step-h2, 1.5rem); margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.blog-body h3 { font-size: var(--step-h3, 1.2rem); margin-top: var(--space-md); margin-bottom: var(--space-xs); }
.blog-body p { margin-bottom: var(--space-md); }
.blog-body ul, .blog-body ol { margin: 0 0 var(--space-md) 1.2rem; }
.blog-body li { margin-bottom: var(--space-xs); }
.blog-body a { color: var(--color-water-deep); text-underline-offset: 2px; }
.blog-body .table-wrap { overflow-x: auto; margin: 0 0 var(--space-md); }
.blog-body table { width: 100%; border-collapse: collapse; }
.blog-body th, .blog-body td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border-light); }
.blog-body th { font-weight: 700; }
.blog-cta { margin-top: var(--space-lg); }

/* "About this blog" prose band below the index grid (module blog_index_about_band). */
.blog-about { max-width: 820px; }
.blog-about h2 { margin-top: var(--space-lg); }
.blog-about h2:first-of-type { margin-top: var(--space-md); }
.blog-about p { margin-bottom: var(--space-md); }
.prose__list { margin: var(--space-sm) 0 var(--space-md) 1.2rem; }
.prose__list li { margin-bottom: var(--space-xs); }

/* Category filter chips (only rendered where a site defines blog_categories_nav; on-brand regardless). */
.area-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.area-chips a {
    display: inline-block;
    padding: .4rem .9rem;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--color-deep);
    text-decoration: none;
}
.area-chips a:hover { border-color: var(--color-gold); color: var(--color-gold-strong); }
.area-chips .chip--active { background: var(--color-gold); border-color: var(--color-gold); color: #1c1206; }