/*
 * Theme "boulevard" (spec file 15) — classic American town-car / livery.
 * Written 100% from scratch: it shares no markup, layout or CSS with any other
 * theme. Only the contract's interactive-island LOGIC is reused (contact-form
 * submit, Leaflet init, lightbox), and those are re-skinned here.
 *
 * The tell: a thin TOP UTILITY BAR above a serif masthead, a navy / warm-cream
 * / brass livery, double "pinstripe" rules dividing framed rectilinear blocks,
 * and a crest/badge. Old-style serif (Fraunces) over an American grotesque
 * (Archivo). Dark = midnight navy; light = warm cream. No JS beyond the
 * shared islands.
 */

/* ================================================================== */
/* Tokens                                                             */
/* ================================================================== */

:root
{
    --bound: 75rem;
    --gutter: clamp(1.15rem, 4.5vw, 3.5rem);
    --band-space: clamp(3.75rem, 8vw, 7.5rem);
    --radius: 3px;

    --font-display: "Fraunces Variable", Georgia, "Times New Roman", serif;
    --font-body: "Archivo Variable", "Archivo", ui-sans-serif, system-ui, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* heading_style = display → a dressier high-contrast face */
body[data-headings="display"]
{
    --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
}

body
{
    /* Driver-picked, injected inline as --primary-color (any hue) */
    --primary: var(--primary-color, #b1342f);
    --primary-soft: color-mix(in oklab, var(--primary), white 22%);
    --primary-strong: color-mix(in oklab, var(--primary), black 26%);
    --primary-wash: color-mix(in oklab, var(--primary), transparent 90%);

    /* Readable ink ON the primary fill (auto black/white by lightness) */
    --on-primary: oklch(from var(--primary) clamp(0, (0.64 - l) * 1000, 1) 0.02 h);

    /* The "company colour" used with authority on cream/navy */
    --accent: var(--primary);

    /* ---- LIGHT (default appearance): warm cream letterhead ---- */
    --base: #fbf8f1;          /* page — warm cream */
    --panel: #ffffff;         /* raised card */
    --panel-2: #f4efe3;       /* inset / alt band */
    --ink: #1a2233;           /* deep navy-charcoal, never pure black */
    --muted: #5c6577;
    --hair: #e6dfce;          /* warm hairline */
    --hair-strong: #d6ccb4;

    /* Navy: deep bands, topbar, footer */
    --navy: #14203a;
    --navy-2: #1c2a48;
    --on-navy: #f3f0e6;
    --navy-muted: #aab2c6;
    --navy-hair: rgb(255 255 255 / 0.14);

    /* Brass livery trim. --brass = decorative; --brass-ink = text-safe on cream */
    --brass: #c19a3f;
    --brass-ink: #9a7a28;

    --shadow: 0 22px 44px -28px rgb(20 32 58 / 0.32), 0 4px 12px -8px rgb(20 32 58 / 0.18);
}

body[data-dark-mode="true"]
{
    /* ---- DARK: midnight navy, warm-glowing brass ---- */
    --base: #0f1626;
    --panel: #16203a;
    --panel-2: #1c2848;
    --ink: #f3f0e6;
    --muted: #aab2c6;
    --hair: rgb(255 255 255 / 0.12);
    --hair-strong: rgb(255 255 255 / 0.22);

    --navy: #0a1120;          /* deepest — topbar / footer */
    --navy-2: #111c33;
    --on-navy: #f3f0e6;
    --navy-muted: #aab2c6;
    --navy-hair: rgb(255 255 255 / 0.12);

    --brass: #d2ad55;
    --brass-ink: #d8b766;

    --primary-wash: color-mix(in oklab, var(--primary), transparent 84%);

    --shadow: 0 26px 52px -28px rgb(0 0 0 / 0.7), 0 6px 16px -10px rgb(0 0 0 / 0.55);
}

/* badge_motif = off → the decorative crest disappears site-wide */
body[data-badge="false"] .crest { display: none; }

/* ================================================================== */
/* Base                                                               */
/* ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Chromium ignores var() inside ::-webkit-scrollbar pseudo-elements (falls back
   to a default grey bar), so thumb colors are LITERAL. color-scheme pins the
   native fallback to the site's own mode. */
:root { color-scheme: light; }
:root:has(body[data-dark-mode="true"]) { color-scheme: dark; }

html
{
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(15 22 38 / 0.34) transparent;
}
html:has(body[data-dark-mode="true"]) { scrollbar-color: rgb(255 255 255 / 0.24) transparent; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb
{
    background-color: rgb(15 22 38 / 0.34);
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(15 22 38 / 0.55); }

:root:has(body[data-dark-mode="true"])::-webkit-scrollbar-thumb,
:root:has(body[data-dark-mode="true"]) ::-webkit-scrollbar-thumb
{
    background-color: rgb(255 255 255 / 0.24);
}
:root:has(body[data-dark-mode="true"])::-webkit-scrollbar-thumb:hover,
:root:has(body[data-dark-mode="true"]) ::-webkit-scrollbar-thumb:hover
{
    background-color: rgb(255 255 255 / 0.42);
}

body
{
    margin: 0;
    background-color: var(--base);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4
{
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: 0.002em;
    text-wrap: balance;
    margin: 0;
    overflow-wrap: break-word;
    color: var(--ink);
}

h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img { display: block; }

:focus-visible
{
    outline: 2px solid var(--brass-ink);
    outline-offset: 2px;
}

.skip
{
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 0.7rem 1.2rem;
    background-color: var(--navy);
    color: var(--on-navy);
    font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ================================================================== */
/* Primitives                                                         */
/* ================================================================== */

.bound
{
    width: 100%;
    max-width: var(--bound);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.band { padding-block: var(--band-space); }
.band-alt { background-color: var(--panel-2); }

/* Deep navy band (hero alt, get-in-touch, page heads) */
.band-navy
{
    background-color: var(--navy);
    color: var(--on-navy);
}
.band-navy h1, .band-navy h2, .band-navy h3 { color: var(--on-navy); }

/* The signature double "pinstripe" rule */
.rule
{
    width: 58px;
    height: 5px;
    margin: 1.1rem 0 1.4rem;
    background:
        linear-gradient(var(--brass), var(--brass)) top / 100% 2px no-repeat,
        linear-gradient(var(--brass), var(--brass)) bottom / 100% 1px no-repeat;
}
.rule-center { margin-inline: auto; }
.band-navy .rule { --brass: var(--brass); }

/* Engraved kicker / super-title */
.kicker
{
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-ink);
    margin: 0;
}
.kicker::before
{
    content: "";
    width: 1.4rem;
    height: 0;
    border-top: 1px solid var(--brass);
}
.band-navy .kicker { color: var(--brass); }

/* Section head block */
.head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.head-intro { color: var(--muted); font-size: 1.08rem; max-width: 56ch; margin-top: 0.4rem; }
.band-navy .head-intro { color: var(--navy-muted); }

/* ================================================================== */
/* Buttons                                                            */
/* ================================================================== */

.btn-solid,
.btn-ghost
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.btn-solid
{
    background-color: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
}
.btn-solid:hover { background-color: var(--primary-strong); border-color: var(--primary-strong); }
.btn-solid:active { transform: translateY(1px); }

.btn-ghost
{
    background-color: transparent;
    color: var(--ink);
    border: 1px solid var(--hair-strong);
}
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-ink); }
/* Ghost button on any dark surface (navy bands, topbar, full-bleed hero over a
   scrimmed photo) needs light text + light border, never the dark --ink. */
.band-navy .btn-ghost, .topbar .btn-ghost, .hero-fb .btn-ghost, .hero-plate .btn-ghost, .panel .btn-ghost { color: var(--on-navy); border-color: var(--navy-hair); }
.band-navy .btn-ghost:hover, .hero-fb .btn-ghost:hover, .hero-plate .btn-ghost:hover, .panel .btn-ghost:hover { border-color: var(--brass); color: var(--brass); }

/* Inline "Découvrir →" brass underline link */
.link-brass
{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-image: linear-gradient(var(--brass), var(--brass));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: background-size 0.3s var(--ease);
}
.link-brass:hover { background-size: 100% 1px; }
.band-navy .link-brass { color: var(--brass); }

/* ================================================================== */
/* Top utility bar (signature)                                        */
/* ================================================================== */

.topbar
{
    background-color: var(--navy);
    color: var(--on-navy);
    border-bottom: 1px solid var(--brass);
    font-size: 0.82rem;
}
body[data-topbar="primary"] .topbar
{
    background-color: var(--primary);
    color: var(--on-primary);
    border-bottom-color: color-mix(in oklab, var(--on-primary), transparent 70%);
}

.topbar-inner
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.6rem;
    padding-block: 0.35rem;
}

.topbar-contact { display: flex; align-items: center; gap: 1.6rem; min-width: 0; }
.topbar-phone, .topbar-email
{
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-phone { font-weight: 700; letter-spacing: 0.02em; }
.topbar-phone:hover, .topbar-email:hover { color: var(--brass); }
body[data-topbar="primary"] .topbar-phone:hover,
body[data-topbar="primary"] .topbar-email:hover { color: var(--on-primary); opacity: 0.82; }
.topbar-ico { color: var(--brass); font-size: 0.95em; }
body[data-topbar="primary"] .topbar-ico { color: var(--on-primary); }

.topbar-end { display: flex; align-items: center; gap: 1.2rem; }
.topbar-social { display: flex; gap: 0.9rem; list-style: none; margin: 0; padding: 0; }
.topbar-social a { color: inherit; font-weight: 500; }
.topbar-social a:hover { color: var(--brass); }

.topbar-lang { display: flex; gap: 0.5rem; font-weight: 600; letter-spacing: 0.06em; }
.topbar-lang span[aria-current] { color: var(--brass); }
body[data-topbar="primary"] .topbar-lang span[aria-current] { color: var(--on-primary); text-decoration: underline; }
.topbar-lang a { color: inherit; opacity: 0.78; }
.topbar-lang a:hover { opacity: 1; color: var(--brass); }

/* ================================================================== */
/* Masthead                                                           */
/* ================================================================== */

.masthead
{
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: color-mix(in oklab, var(--base), transparent 6%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hair);
}

.masthead-bar
{
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    min-height: 4.6rem;
    transition: min-height 0.25s var(--ease);
}

.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand img.brand-logo { max-height: 2.7rem; width: auto; }

.brand-lockup { display: inline-flex; align-items: center; gap: 0.8rem; }
.brand-word
{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: 0.01em;
}

.deck { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); }
.deck-link
{
    position: relative;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    padding-block: 0.4rem;
}
.deck-link::after
{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background-color: var(--brass);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
}
.deck-link:hover, .deck-link[aria-current] { color: var(--ink); }
.deck-link:hover::after, .deck-link[aria-current]::after { transform: scaleX(1); }

.masthead-end { display: flex; align-items: center; gap: 0.9rem; }
.masthead-cta { padding: 0.7rem 1.3rem; font-size: 0.78rem; }

/* ================================================================== */
/* Crest / badge                                                      */
/* ================================================================== */

.crest
{
    display: inline-grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    flex: none;
}
.crest-ring
{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 1px solid var(--brass);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--base);
    outline: 1px solid var(--brass);
    outline-offset: -4px;
}
.crest-initials
{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--brass-ink);
}
.colophon .crest-ring { box-shadow: inset 0 0 0 3px var(--navy); }
.colophon .crest-initials { color: var(--brass); }

/* ================================================================== */
/* Mobile panel menu + toggle                                         */
/* ================================================================== */

.masthead-end .mobile-menu-toggle
{
    display: none;
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
}

.panel
{
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 3rem);
    padding-block: 6rem 3rem;
    background-color: var(--navy);
    color: var(--on-navy);
}
body.menu-open .panel { display: flex; }
body.menu-open { overflow: hidden; }
body.menu-open .dock { display: none; }

.panel-nav { display: flex; flex-direction: column; }
.panel-link
{
    padding-block: clamp(0.5rem, 1.6vw, 0.9rem);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 9vw, 3.2rem);
    line-height: 1.1;
    color: var(--on-navy);
    border-bottom: 1px solid var(--navy-hair);
    transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}
.panel-link:hover, .panel-link[aria-current] { color: var(--brass); padding-left: 0.6rem; }

.panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem; }
.panel-actions { display: flex; gap: 0.7rem; }
.panel-lang { display: flex; gap: 0.6rem; font-weight: 600; }
.panel-lang span[aria-current] { color: var(--brass); }
.panel-lang a { opacity: 0.8; }

/* ================================================================== */
/* Footer colophon                                                    */
/* ================================================================== */

.colophon
{
    background-color: var(--navy);
    color: var(--navy-muted);
    margin-top: var(--band-space);
    border-top: 3px double var(--brass);
}
.colophon-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 2.4rem;
    padding-block: clamp(3rem, 6vw, 4.5rem) 2.2rem;
}
.colophon-brand { grid-column: 1 / -1; }
@media (min-width: 760px) { .colophon-brand { grid-column: auto; } }

.colophon-word
{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--on-navy);
    margin: 0.9rem 0 0.4rem;
}
.colophon-line { color: var(--navy-muted); max-width: 28ch; }

.colophon-head
{
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    margin: 0 0 1.1rem;
}
.colophon-col ul { list-style: none; margin: 0; padding: 0; }
.colophon-col li { margin-bottom: 0.55rem; }
.colophon a { color: var(--navy-muted); }
.colophon a:hover { color: var(--on-navy); }
.colophon address { font-style: normal; }
.colophon address p { margin-bottom: 0.55rem; }
.colophon-addr { white-space: pre-line; }
.colophon-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }

.colophon-base
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.3rem;
    border-top: 1px solid var(--navy-hair);
}
.colophon-lang { display: flex; gap: 0.6rem; font-weight: 600; font-size: 0.82rem; }
.colophon-lang span[aria-current] { color: var(--brass); }
.colophon-credit { font-size: 0.8rem; }

/* ================================================================== */
/* Mobile bottom dock                                                 */
/* ================================================================== */

.dock { display: none; }

/* ================================================================== */
/* Reveal motion                                                      */
/* ================================================================== */

/* Hidden state exists ONLY when JS is present (html.js set in <head>) and the
   visitor accepts motion — no-JS / reduced-motion users get instant content. */
@media (prefers-reduced-motion: no-preference)
{
    html.js .reveal
    {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
        transition-delay: calc(var(--reveal-index, 0) * 70ms);
    }
    html.js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ================================================================== */
/* Picture / figures                                                  */
/* ================================================================== */

.framed
{
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--panel-2);
}
.framed-brass { border-color: var(--brass); }

/* Picture wraps <img> in a <picture>; make that wrapper fill the sized box so
   every image renders at the box's fixed size regardless of its intrinsic size. */
.framed picture, .media picture { display: block; width: 100%; height: 100%; }
.framed img, .media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* navy_duotone banner treatment */
body[data-duotone="true"] .duotone img
{
    filter: grayscale(1) contrast(1.05) brightness(0.95) sepia(0.35) hue-rotate(178deg) saturate(1.4);
}

/* ================================================================== */
/* HERO                                                               */
/* ================================================================== */

.hero { position: relative; }

/* full-bleed variant */
.hero-fb
{
    position: relative;
    min-height: clamp(30rem, 78vh, 46rem);
    display: flex;
    align-items: flex-end;
    color: var(--on-navy);
    overflow: hidden;
}
.hero-fb .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-fb .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-fb::after
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgb(10 17 32 / 0.25) 0%, rgb(10 17 32 / 0.55) 55%, rgb(10 17 32 / 0.85) 100%);
}
.hero-inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 6rem); }
.hero-fb .hero-inner { color: var(--on-navy); }
.hero-fb .kicker { color: var(--brass); }

.hero-title { font-size: clamp(2.6rem, 6.5vw, 5rem); max-width: 16ch; }
.hero-fb .hero-title { color: var(--on-navy); }
.hero-text { font-size: 1.2rem; max-width: 46ch; margin-top: 1rem; }
.hero-fb .hero-text { color: rgb(243 240 230 / 0.9); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }

@media (prefers-reduced-motion: no-preference)
{
    .hero-fb .hero-media img { animation: bv-kenburns 26s ease-out both; }
    @keyframes bv-kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
}

/* plate variant — framed navy panel, no big photo */
.hero-plate { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.hero-plate-card
{
    position: relative;
    background-color: var(--navy);
    color: var(--on-navy);
    border: 1px solid var(--brass);
    border-radius: var(--radius);
    padding: clamp(2.5rem, 6vw, 5rem);
    box-shadow: var(--shadow);
}
.hero-plate-card::before
{
    content: "";
    position: absolute;
    inset: 0.5rem;
    border: 1px solid var(--navy-hair);
    border-radius: 1px;
    pointer-events: none;
}
.hero-plate .crest { width: 3.4rem; height: 3.4rem; margin-bottom: 1.4rem; }
.hero-plate .crest-ring { box-shadow: inset 0 0 0 3px var(--navy); }
.hero-plate .crest-initials { color: var(--brass); }
.hero-plate .hero-title, .hero-plate h1 { color: var(--on-navy); }
.hero-plate .kicker { color: var(--brass); }
.hero-plate .hero-text { color: rgb(243 240 230 / 0.88); }

/* ================================================================== */
/* SERVICES                                                           */
/* ================================================================== */

.cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }

.svc-card
{
    display: flex;
    flex-direction: column;
    background-color: var(--panel);
    border: 1px solid var(--hair);
    border-top: 2px solid var(--brass);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Both the photo box and the no-photo monogram are pinned to one fixed ratio
   (flex:none + min-height:0 stop a tall image or glyph from growing the box),
   so every service card's media is exactly the same size. */
.svc-media, .svc-monogram { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
.svc-media { background-color: var(--panel-2); }
.svc-monogram
{
    display: grid;
    place-items: center;
    background-color: var(--navy);
    color: var(--brass);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
}
.svc-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.svc-name { font-size: 1.35rem; }
.svc-pres { color: var(--muted); font-size: 0.96rem; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 0.8rem; }
.price-plate
{
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--ink);
}

/* ================================================================== */
/* ABOUT                                                              */
/* ================================================================== */

.about-grid { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 880px) { .about-grid { grid-template-columns: 0.9fr 1.1fr; } }
.about-portrait { aspect-ratio: 4 / 5; }
.about-body { font-size: 1.1rem; }
.about-body p { color: var(--muted); }
.about-body p:first-of-type { color: var(--ink); font-size: 1.18rem; }

/* ================================================================== */
/* FLEET                                                              */
/* ================================================================== */

.fleet-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.fleet-card
{
    background-color: var(--panel);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    overflow: hidden;
}
.fleet-media { position: relative; aspect-ratio: 3 / 2; background-color: var(--panel-2); }
.fleet-media .svc-monogram { aspect-ratio: auto; height: 100%; }
.fleet-plate
{
    position: absolute;
    left: 0; bottom: 0;
    background-color: var(--navy);
    color: var(--on-navy);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.45rem 1rem;
    border-top-right-radius: var(--radius);
    border-top: 2px solid var(--brass);
}
.fleet-body { padding: 1.1rem 1.3rem 1.4rem; }
.fleet-seats { color: var(--brass-ink); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.fleet-pres { color: var(--muted); margin-top: 0.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.chip
{
    padding: 0.28rem 0.66rem;
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* ================================================================== */
/* KEYLIGHTS                                                          */
/* ================================================================== */

.stats { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.stat
{
    background-color: color-mix(in oklab, var(--on-navy), transparent 92%);
    border: 1px solid var(--navy-hair);
    border-top: 2px solid var(--brass);
    border-radius: var(--radius);
    padding: 1.8rem 1.6rem;
    text-align: center;
}
.stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; color: var(--on-navy); font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: 0.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-muted); }

/* ================================================================== */
/* FEEDBACKS                                                          */
/* ================================================================== */

.quotes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.quote
{
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--panel);
    border: 1px solid var(--hair);
    border-top: 2px solid var(--brass);
    border-radius: var(--radius);
    padding: 2.6rem 1.5rem 1.5rem;
}
.quote::before
{
    content: "\201C";
    position: absolute;
    top: 0.1rem; left: 1rem;
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 1;
    color: var(--brass);
    opacity: 0.5;
}
.quote-stars { color: var(--brass); letter-spacing: 0.15em; font-size: 0.9rem; }
.quote-text { margin: 0.7rem 0 1rem; color: var(--ink); }
.quote-meta { margin-top: auto; display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.84rem; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 0.8rem; }
.quote-name { font-weight: 700; color: var(--ink); }

/* ================================================================== */
/* GALLERY (lightbox island re-skinned)                               */
/* ================================================================== */

.gallery-grid
{
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.gallery-item
{
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    background: none;
    padding: 0;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.gallery-item:hover { border-color: var(--brass); }
.gallery-item:hover img { transform: scale(1.06); }

/* Lightbox <dialog> — boulevard-skinned (the island only provides behaviour) */
.gallery-lightbox
{
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
}
.gallery-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.gallery-lightbox::backdrop { background: rgb(10 17 32 / 0.94); }
.gallery-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border: 1px solid var(--brass); }
.gallery-lightbox button
{
    position: fixed;
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    background-color: var(--navy);
    color: var(--brass);
    border: 1px solid var(--brass);
    border-radius: var(--radius);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.gallery-lightbox button:hover { background-color: var(--brass); color: var(--navy); }
.gallery-lightbox .gallery-lightbox-previous { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.gallery-lightbox .gallery-lightbox-next { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.gallery-lightbox .gallery-lightbox-close { top: 1.4rem; right: 1.2rem; }

/* ================================================================== */
/* FAQ (<details>)                                                    */
/* ================================================================== */

.faq-list { max-width: 52rem; }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-item:first-child { border-top: 1px solid var(--hair); }
.faq-q
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.18rem;
    color: var(--ink);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; color: var(--brass-ink); font-family: var(--font-body); font-size: 1.4rem; line-height: 1; transition: transform 0.2s var(--ease); }
.faq-item[open] .faq-q::after { content: "\2013"; }
.faq-a { padding: 0 0 1.2rem; color: var(--muted); max-width: 64ch; }

/* ================================================================== */
/* NEWS                                                               */
/* ================================================================== */

.news-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.news-card { display: flex; flex-direction: column; background-color: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.news-media, .news-monogram { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
.news-media { background-color: var(--panel-2); }
.news-monogram
{
    display: grid;
    place-items: center;
    background-color: var(--navy);
    color: var(--brass);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
}
.news-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.news-date { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-ink); }
.news-title { font-size: 1.25rem; }
.news-sub { color: var(--muted); font-size: 0.95rem; }
.news-card .link-brass { margin-top: auto; padding-top: 0.6rem; }

/* ================================================================== */
/* AREAS                                                              */
/* ================================================================== */

.areas-list { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.area-link
{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.area-link::before { content: "\2192"; color: var(--brass-ink); }
.area-link:hover { border-color: var(--brass); color: var(--brass-ink); }
.areas-note { color: var(--muted); margin-top: 1rem; font-size: 0.9rem; }

/* ================================================================== */
/* GET IN TOUCH                                                       */
/* ================================================================== */

.cta-band { text-align: center; }
.cta-band .head { margin-inline: auto; }
.cta-title { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--on-navy); }
.cta-band .btn-solid { margin-top: 1.6rem; }

/* ================================================================== */
/* Generic page heads (interior pages)                                */
/* ================================================================== */

.page-head { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.page-head h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
.page-head.band-navy { color: var(--on-navy); }

.prose { max-width: 42rem; font-size: 1.08rem; }
.prose p { color: var(--ink); }
.prose-muted p { color: var(--muted); }

/* ================================================================== */
/* SERVICE / NEWS DETAIL                                              */
/* ================================================================== */

.detail-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 920px) { .detail-grid { grid-template-columns: 1.6fr 1fr; } }

.detail-hero { aspect-ratio: 21 / 9; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.detail-lead { font-size: 1.2rem; color: var(--ink); margin-bottom: 1rem; }
.detail-body p { color: var(--muted); margin-bottom: 1rem; }

.facts
{
    background-color: var(--panel);
    border: 1px solid var(--hair);
    border-top: 2px solid var(--brass);
    border-radius: var(--radius);
    padding: 1.5rem;
}
@media (min-width: 920px) { .facts { position: sticky; top: 6.5rem; } }
.facts-price { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--ink); margin-bottom: 0.4rem; }
.facts-duration { color: var(--muted); font-weight: 600; margin-bottom: 1rem; }
.facts-dt { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 0.5rem; }
.facts-options { padding-top: 0.8rem; border-top: 1px solid var(--hair); }
.facts-actions { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.2rem; }
.facts-actions .btn-solid, .facts-actions .btn-ghost { width: 100%; }

.cross { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin-top: 1.2rem; }
.cross-card { border: 1px solid var(--hair); border-left: 2px solid var(--brass); border-radius: var(--radius); padding: 1rem 1.2rem; background-color: var(--panel); transition: transform 0.2s var(--ease); }
.cross-card:hover { transform: translateX(3px); }
.cross-card h3 { font-size: 1.1rem; }

/* zig-zag services index */
.zig { display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 4rem); }
.zig-row { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 820px)
{
    .zig-row { grid-template-columns: 1fr 1fr; }
    .zig-row:nth-child(even) .zig-media { order: 2; }
}
.zig-media { aspect-ratio: 16 / 10; }

/* ================================================================== */
/* CONTACT — bespoke "dispatch desk" + skinned form + map             */
/* ================================================================== */

.contact-wrap { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .contact-wrap { grid-template-columns: 0.85fr 1.15fr; } }

.dispatch
{
    background-color: var(--navy);
    color: var(--on-navy);
    border: 1px solid var(--brass);
    border-radius: var(--radius);
    padding: clamp(1.6rem, 3vw, 2.4rem);
}
.dispatch .kicker { color: var(--brass); }
.dispatch-dl { margin: 1rem 0 0; }
.dispatch-line { padding-block: 0.95rem; border-bottom: 1px solid var(--navy-hair); }
.dispatch-line:last-child { border-bottom: 0; }
.dispatch-line dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.dispatch-line dd { margin: 0.25rem 0 0; font-size: 1.15rem; font-weight: 600; color: var(--on-navy); }
.dispatch-line dd a { color: inherit; }
.dispatch-line dd a:hover { color: var(--brass); }
.dispatch-addr { font-weight: 400; font-size: 1rem; color: var(--navy-muted); white-space: pre-line; }
.dispatch-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }
.dispatch-social a { color: var(--navy-muted); font-weight: 600; font-size: 0.86rem; }
.dispatch-social a:hover { color: var(--brass); }

.contact-form-block { margin-top: 0; }
.contact-form-heading { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin-bottom: 0.3rem; }
.contact-form-sub { color: var(--muted); margin-bottom: 1.4rem; }

/* the shared form island, boulevard-skinned: label-over-field, ruled inputs */
.contact-form p { margin: 0 0 1.1rem; }
.contact-form label
{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brass-ink);
}
.contact-form input,
.contact-form textarea
{
    width: 100%;
    padding: 0.8rem 0.9rem;
    background-color: var(--panel);
    border: 1px solid var(--hair-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-form textarea { min-height: 9rem; max-height: 22rem; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus
{
    outline: none;
    border-color: var(--brass);
    box-shadow: inset 0 -2px 0 var(--brass);
}
.contact-form button[type="submit"]
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.8rem;
    background-color: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s var(--ease);
}
.contact-form button[type="submit"]:hover { background-color: var(--primary-strong); }
.contact-form button[type="submit"]:disabled { opacity: 0.55; cursor: default; }
.contact-form-status:not(:empty)
{
    margin-top: 0.4rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--brass);
    background-color: var(--panel-2);
    font-size: 0.92rem;
    color: var(--ink);
}

/* the shared Leaflet island, boulevard-skinned: navy-cartography + brass frame */
.contact-map { margin-top: clamp(2rem, 4vw, 3rem); }
.map-island
{
    border: 1px solid var(--brass);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.map-island-placeholder { background-color: var(--navy); min-height: 420px; }
.map-island-container { height: 460px; }
.map-island-container .leaflet-tile
{
    filter: grayscale(0.4) contrast(0.92) brightness(0.96) sepia(0.32) hue-rotate(178deg) saturate(1.35);
}
body[data-dark-mode="true"] .map-island-container .leaflet-tile
{
    filter: invert(0.92) grayscale(0.5) contrast(0.9) brightness(0.95) hue-rotate(185deg) saturate(0.85);
}
.map-island .leaflet-interactive
{
    stroke: var(--brass);
    fill: var(--primary);
    fill-opacity: 0.45;
}
.map-island .leaflet-control-zoom a
{
    background-color: var(--navy);
    color: var(--brass);
    border: 1px solid var(--brass);
    border-radius: 0;
}
.map-island .leaflet-control-attribution
{
    background-color: color-mix(in oklab, var(--navy), transparent 15%);
    color: var(--navy-muted);
}
.map-island .leaflet-control-attribution a { color: var(--brass); }

/* ================================================================== */
/* BOOKING                                                            */
/* ================================================================== */

/* No frame: the embedded booking module is transparent and blends into the
   page (the brass-framed page-head above already sets the context). */
.booking-frame
{
    border: 0;
    background: transparent;
    box-shadow: none;
}
#privtc-booking-module { width: 100%; border: 0; display: block; }

/* ================================================================== */
/* LEGAL                                                              */
/* ================================================================== */

.legal { max-width: 46rem; }
.legal h2 { font-size: 1.4rem; margin: 2.2rem 0 0.8rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--muted); margin-bottom: 0.9rem; }
.legal-section + .legal-section { border-top: 1px solid var(--hair); padding-top: 1.6rem; margin-top: 1.6rem; }

/* ================================================================== */
/* 404                                                                */
/* ================================================================== */

.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.notfound .crest { width: 4rem; height: 4rem; margin-inline: auto; margin-bottom: 1.4rem; }
.notfound-code { font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 18vw, 11rem); line-height: 0.9; color: var(--brass-ink); }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.6rem; }

/* ================================================================== */
/* Responsive                                                         */
/* ================================================================== */

@media (max-width: 900px)
{
    .deck { display: none; }
    .masthead-cta { display: none; }
    .masthead-end .mobile-menu-toggle { display: inline-block; }

    /* topbar collapses to just the click-to-call phone on mobile */
    .topbar-email, .topbar-social, .topbar-lang { display: none; }

    .dock
    {
        display: flex;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 90;
        background-color: var(--navy);
        border-top: 2px solid var(--brass);
    }
    .dock a
    {
        flex: 1;
        padding: 0.95rem;
        text-align: center;
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 0.84rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
    .dock-call { color: var(--on-navy); }
    .dock-book { background-color: var(--primary); color: var(--on-primary); }

    .colophon { margin-bottom: 3.4rem; }
}

@media (max-width: 460px)
{
    .topbar-inner { justify-content: space-between; }
}