/* ============================================================
   Candlewood Place — Design System
   Charcoal #2E3135 · Gold #C8A96A · White · Light Grey #E6E6E6
   Playfair Display (headings) · Montserrat (body) · 8px grid
   ============================================================ */

:root {
    --charcoal: #2E3135;
    --charcoal-soft: #3a3e43;
    --gold: #C8A96A;
    --gold-dark: #b2924f;
    --white: #FFFFFF;
    --grey: #E6E6E6;
    --grey-mid: #9a9ea3;
    --ink: #2E3135;
    --paper: #fbfaf8;

    --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
    --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

    --radius: 10px;
    --radius-lg: 18px;
    --shadow: 0 6px 24px rgba(46, 49, 53, 0.10);
    --shadow-lg: 0 18px 48px rgba(46, 49, 53, 0.16);
    --maxw: 1180px;
    --font-head: 'Playfair Display', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.18;
    color: var(--charcoal);
    margin: 0 0 var(--s2);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

p { margin: 0 0 var(--s2); }

a { color: var(--gold-dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold); }

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

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s3); }

.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--gold);
    color: var(--charcoal); padding: var(--s1) var(--s2); z-index: 200;
}
.skip-link:focus { left: var(--s2); top: var(--s2); }

/* ---------- Eyebrow / section headers ---------- */
.eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--gold-dark);
    margin-bottom: var(--s1);
}
.section { padding: var(--s7) 0; }
.section--tight { padding: var(--s5) 0; }
.section-head { max-width: 680px; margin-bottom: var(--s5); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lead { font-size: 1.15rem; color: #55585c; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .03em;
    padding: 14px 30px;
    border-radius: 50px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .22s ease;
    text-align: center;
}
.btn-primary { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); transform: translateY(-2px); }
.btn-secondary { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-secondary:hover { background: var(--charcoal); color: var(--white); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: var(--white); color: var(--charcoal); }
.btn-lg { padding: 17px 40px; font-size: 1rem; }

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(251,250,248,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--grey);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
/* Let the wide logo lockup scale down rather than shove the nav (or the
   hamburger) off the row — object-fit keeps its aspect while it shrinks. */
.brand { flex: 0 1 auto; min-width: 0; margin-right: var(--s3); }
.brand-logo { height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.site-nav { display: flex; align-items: center; gap: var(--s2); }
.site-nav a {
    font-size: .86rem; font-weight: 500; color: var(--charcoal); letter-spacing: .02em;
    position: relative; white-space: nowrap;
}
.site-nav a:not(.btn)::after {
    content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
    background: var(--gold); transition: width .25s;
}
.site-nav a:not(.btn):hover::after,
.site-nav a[aria-current="page"]::after { width: 100%; }
.site-nav a[aria-current="page"] { color: var(--gold-dark); }
.nav-cta { color: var(--charcoal) !important; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 26px; height: 2px; background: var(--charcoal); transition: .3s; }

/* Hand the nav to the hamburger before the links crowd the wide logo lockup. */
@media (max-width: 1024px) {
    .guide-grid { grid-template-columns: repeat(2, 1fr); }
    .nav-toggle { display: flex; }
    .site-nav {
        position: fixed; inset: 80px 0 auto 0; background: var(--paper);
        flex-direction: column; align-items: flex-start; gap: 0; padding: var(--s2) var(--s3);
        border-bottom: 1px solid var(--grey); box-shadow: var(--shadow); transform: translateY(-120%);
        max-height: calc(100vh - 80px); overflow-y: auto;
        /* translateY alone can leave the panel peeking on short viewports, so
           take it out of the flow entirely once the slide-up finishes. */
        visibility: hidden; transition: transform .3s, visibility 0s .3s;
    }
    .site-nav.open { transform: translateY(0); visibility: visible; transition: transform .3s, visibility 0s 0s; }
    .site-nav a { width: 100%; padding: 12px 0; }
    .nav-cta { margin-top: var(--s1); }
}

/* ---------- Hero ---------- */
.hero {
    position: relative; min-height: 86vh; display: flex; align-items: center;
    color: var(--white); background: var(--charcoal); overflow: hidden;
}
/* The hero photograph sits in the markup (not as a background) so the browser
   can preload it and pick the right source — it is decorative, alt="". */
.hero-media { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; }
/* Charcoal wash keeps the headline legible over the photograph. */
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg, rgba(46,49,53,.94) 0%, rgba(46,49,53,.78) 42%, rgba(46,49,53,.34) 100%);
}
@media (max-width: 900px) {
    .hero::before {
        background: linear-gradient(165deg, rgba(46,49,53,.92) 0%, rgba(46,49,53,.78) 55%, rgba(46,49,53,.62) 100%);
    }
}
.hero-content { position: relative; z-index: 2; max-width: 760px; }
.hero h1 { color: var(--white); }
.hero .eyebrow { color: var(--gold); }
.hero-tag { font-family: var(--font-head); font-style: italic; font-size: 1.4rem; color: var(--gold); margin-bottom: var(--s2); }
.hero-lead { font-size: 1.2rem; color: rgba(255,255,255,.88); max-width: 560px; margin-bottom: var(--s4); }
.hero-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--s3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--white); border-radius: var(--radius-lg); padding: var(--s4);
    box-shadow: var(--shadow); border: 1px solid #efece6; transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card .icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(200,169,106,.14); color: var(--gold-dark); margin-bottom: var(--s3);
    transition: background .25s, color .25s;
}
.card:hover .icon { background: var(--gold); color: var(--charcoal); }
/* Inline SVG icons inherit colour from .icon and scale with it. */
.ico { width: 26px; height: 26px; display: block; }
.band-dark .card .icon { background: rgba(200,169,106,.18); color: var(--gold); }
.card h3 { margin-bottom: var(--s1); }
.card p { color: #5a5d61; margin: 0; font-size: .96rem; }

/* feature list */
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1) var(--s3); }
.feature-list li { padding-left: 28px; position: relative; color: #45484c; }
.feature-list li::before {
    content: '✦'; position: absolute; left: 0; color: var(--gold); font-size: .9rem;
}

/* split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.split--media { min-height: 420px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* ---------- Photography ---------- */
/* <picture class="media"> wrappers behave as the image box themselves. */
.media {
    display: block; overflow: hidden; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); background: var(--grey);
}
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Fixed-ratio media boxes for split sections and cards. */
.media--tall  { aspect-ratio: 3 / 4; max-height: 620px; }
.media--card  { aspect-ratio: 4 / 3; border-radius: var(--radius); box-shadow: none; }
.card > .media { margin-bottom: var(--s3); }
.media--wide  { aspect-ratio: 16 / 10; }

/* Four-up teaser strip linking through to the gallery. */
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.photo-strip-item {
    position: relative; display: block; overflow: hidden; border-radius: var(--radius);
    aspect-ratio: 3 / 4; background: var(--grey);
}
.photo-strip-item picture, .photo-strip-item img { display: block; width: 100%; height: 100%; }
.photo-strip-item img { object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.photo-strip-item:hover img { transform: scale(1.05); }
.photo-strip-item .cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s2) var(--s2);
    background: linear-gradient(transparent, rgba(46,49,53,.82));
    color: var(--white); font-family: var(--font-head); font-style: italic; font-size: .96rem;
}

/* media placeholder (kept for any section still awaiting photography) */
.ph {
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(200,169,106,.25), rgba(46,49,53,.85)),
        repeating-linear-gradient(45deg, #2E3135, #2E3135 18px, #34383d 18px, #34383d 36px);
    display: grid; place-items: center; color: rgba(255,255,255,.55);
    font-family: var(--font-head); font-style: italic; letter-spacing: .04em; min-height: 220px;
}
.ph--tall { min-height: 420px; }

/* dark band */
.band-dark { background: var(--charcoal); color: var(--white); }
.band-dark h2, .band-dark h3 { color: var(--white); }
.band-dark .eyebrow { color: var(--gold); }
.band-dark .feature-list li { color: rgba(255,255,255,.82); }
.band-dark p { color: rgba(255,255,255,.8); }
.band-dark p { color: rgba(255,255,255,.8); }

.band-gold { background: linear-gradient(120deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--charcoal); }
.band-gold h2 { color: var(--charcoal); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); text-align: center; }
.stat .num { font-family: var(--font-head); font-size: 2.6rem; color: var(--gold); line-height: 1; }
.stat .label { font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.75); margin-top: var(--s1); }

/* ---------- Tables (rates) ---------- */
.rate-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.rate-table th, .rate-table td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--grey); }
.rate-table th { background: var(--charcoal); color: var(--white); font-weight: 500; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.rate-table tbody tr:last-child td { border-bottom: none; }
.rate-table .price { font-family: var(--font-head); color: var(--gold-dark); font-size: 1.15rem; }
.badge { display: inline-block; background: rgba(200,169,106,.16); color: var(--gold-dark); padding: 3px 12px; border-radius: 50px; font-size: .78rem; font-weight: 600; }

/* ---------- Forms ---------- */
.form-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--shadow); }
.field { margin-bottom: var(--s3); }
.field label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--charcoal); margin-bottom: var(--s1); }
.field input, .field select, .field textarea {
    width: 100%; padding: 13px 16px; border: 1.5px solid var(--grey); border-radius: var(--radius);
    font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff; transition: border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.help { font-size: .82rem; color: var(--grey-mid); margin-top: 4px; }

.alert { padding: var(--s2) var(--s3); border-radius: var(--radius); margin-bottom: var(--s3); font-size: .95rem; }
.alert-success { background: #e8f3ea; color: #2f6b3c; border: 1px solid #b8ddc1; }
.alert-error { background: #fbeaea; color: #9a3535; border: 1px solid #eebcbc; }
.alert-info { background: rgba(200,169,106,.12); color: var(--gold-dark); border: 1px solid rgba(200,169,106,.4); }

/* ---------- Quote breakdown ---------- */
.quote-box { background: var(--paper); border: 1px solid var(--grey); border-radius: var(--radius-lg); padding: var(--s3); }
.quote-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: .92rem; color: #5a5d61; }
.quote-line.total { border-top: 2px solid var(--charcoal); margin-top: var(--s1); padding-top: var(--s2); font-family: var(--font-head); font-size: 1.35rem; color: var(--charcoal); }
.quote-line.discount { color: #2f6b3c; }
.quote-nights { max-height: 180px; overflow-y: auto; margin: var(--s1) 0; }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.gallery-grid .ph { min-height: 240px; }
.gallery-grid .ph.span-2 { grid-column: span 2; }

/* Filter pills */
.gallery-filters { display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: center; margin-bottom: var(--s4); }
.gallery-filter {
    border: 1px solid var(--grey); background: var(--white); color: #5a5d61;
    font-family: var(--font-body); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
    padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: .2s;
}
.gallery-filter:hover { border-color: var(--gold); color: var(--charcoal); }
.gallery-filter[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }

/* Photo tiles */
.gallery-item {
    position: relative; margin: 0; padding: 0; overflow: hidden; border-radius: var(--radius);
    aspect-ratio: 4 / 3; background: var(--grey); cursor: zoom-in; border: 0; display: block; width: 100%;
}
.gallery-item.span-2 { grid-column: span 2; aspect-ratio: 8 / 3; }
.gallery-item picture, .gallery-item img { display: block; width: 100%; height: 100%; }
.gallery-item img { object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.05); }
.gallery-item figcaption, .gallery-item .cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: var(--s4) var(--s2) var(--s2);
    background: linear-gradient(transparent, rgba(46,49,53,.82));
    color: var(--white); font-family: var(--font-head); font-style: italic; font-size: 1.02rem;
    text-align: left; opacity: 0; transform: translateY(8px); transition: .3s;
}
.gallery-item:hover .cap, .gallery-item:focus-visible .cap { opacity: 1; transform: translateY(0); }
.gallery-item[hidden] { display: none; }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 100; display: none;
    background: rgba(22,24,26,.94); padding: var(--s3);
    align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(1180px, 94vw); max-height: 84vh; border-radius: var(--radius); display: block; }
.lightbox-caption {
    position: absolute; left: 0; right: 0; bottom: var(--s3); text-align: center;
    color: rgba(255,255,255,.86); font-family: var(--font-head); font-style: italic;
}
.lightbox-btn {
    position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
    color: var(--white); width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    font-size: 1.5rem; line-height: 1; display: grid; place-items: center; transition: .2s;
}
.lightbox-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.lightbox-close { top: var(--s3); right: var(--s3); }
.lightbox-prev  { left: var(--s2); }
.lightbox-next  { right: var(--s2); }
body.lightbox-open { overflow: hidden; }

/* Weekday picker (admin) */
.day-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.day-toggle { position: relative; cursor: pointer; }
.day-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.day-toggle span {
    display: inline-block; padding: 8px 12px; border: 1px solid var(--grey);
    border-radius: 8px; font-size: .82rem; background: var(--white); transition: .18s;
}
.day-toggle input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--charcoal); font-weight: 600; }
.day-toggle input:focus-visible + span { outline: 2px solid var(--gold-dark); outline-offset: 2px; }

/* ---------- Rates ---------- */
.rate-headline { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-bottom: var(--s2); }
.rate-headline:only-child { grid-template-columns: 1fr; }
.rate-headline-item {
    background: var(--white); border: 1px solid #efece6; border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: var(--s4); text-align: center;
}
.rate-figure { font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 3rem); color: var(--gold-dark); line-height: 1; }
.rate-headline-item .help { margin: var(--s1) 0 0; }
/* "From" and "/night" belong to the price but must not compete with it, so
   they ride at the figure's baseline in the body font at half its size. */
.rate-from, .rate-per {
    font-family: var(--font-body); font-size: .38em; font-weight: 600;
    color: var(--grey-mid); letter-spacing: .02em;
}
.rate-from { margin-right: .35em; }
.rate-per  { margin-left: .1em; }

/* What the headline figure actually buys. Directly under the prices, because
   the reader deciding whether this is affordable is looking at them and
   nowhere else. */
.rate-terms {
    margin: var(--s2) 0 var(--s1);
    font-size: .95rem; font-weight: 500; color: var(--charcoal);
}

/* Direct-booking callout on the discounts table */
.direct-note {
    border-left: 3px solid var(--gold); background: rgba(200,169,106,.10);
    padding: var(--s2) var(--s3); border-radius: 0 var(--radius) var(--radius) 0; margin-top: var(--s2);
}
.direct-note p { margin: 0; color: #45484c; }

/* Weekend nights are flagged in the live quote breakdown */
.night-tag {
    display: inline-block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(200,169,106,.18); color: var(--gold-dark);
    padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}

/* ---------- Local guide ---------- */
.card--compact { padding: var(--s3); text-align: center; }
.card--compact .icon { margin: 0 auto var(--s2); }
.card--compact h3 { font-size: 1.5rem; color: var(--gold-dark); margin-bottom: 4px; }
.card--compact p { font-size: .86rem; }

.guide-tabs {
    display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: center;
    margin-bottom: var(--s4);
}
.guide-tab {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--white); border: 1px solid var(--grey); border-radius: 999px;
    padding: 10px 18px; cursor: pointer; transition: .2s;
    font-family: var(--font-body); font-size: .84rem; font-weight: 600; color: #5a5d61;
}
.guide-tab .ico { width: 18px; height: 18px; }
.guide-tab:hover { border-color: var(--gold); color: var(--charcoal); }
.guide-tab.active { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.guide-tab.active .ico { color: var(--gold); }
.guide-tab:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }

.guide-panel { display: none; }
.guide-panel.active { display: block; }
.guide-intro {
    max-width: 720px; margin: 0 auto var(--s4); text-align: center; color: #55585c; font-size: 1.05rem;
}
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }

.place {
    background: var(--white); border: 1px solid #efece6; border-radius: var(--radius-lg);
    padding: var(--s3); box-shadow: var(--shadow); display: flex; flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}
.place:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.place-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.place-head h3 { font-size: 1.1rem; margin: 0 0 var(--s1); }
.place-dist {
    flex: 0 0 auto; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
    color: var(--gold-dark); background: rgba(200,169,106,.14);
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.place p { font-size: .92rem; color: #5a5d61; flex: 1 1 auto; }
.place-links { display: flex; gap: var(--s2); margin-top: var(--s1); }
.place-links a {
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--gold-dark); border-bottom: 1px solid transparent; transition: .2s;
}
.place-links a:hover { border-bottom-color: var(--gold); }

/* ---------- Stars & reviews ---------- */
.stars { display: inline-block; line-height: 0; }
.stars svg { width: 110px; height: 22px; display: block; }
.stars .stars-track { color: #e3ded4; }
.stars .stars-fill  { color: var(--gold); }
.stars--sm svg { width: 82px; height: 16px; }
.stars--lg svg { width: 160px; height: 32px; }

.home-rating { display: flex; align-items: center; justify-content: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.home-rating span { font-size: .95rem; color: #55585c; }
.home-rating strong { color: var(--charcoal); }
.hero-rating { display: flex; flex-direction: column; align-items: center; gap: var(--s1); margin-top: var(--s2); }
.hero-rating p { color: rgba(255,255,255,.86); margin: 0; }
.hero-rating strong { color: var(--gold); font-size: 1.15rem; }

.review-list { display: grid; gap: var(--s3); }
.review {
    background: var(--white); border: 1px solid #efece6; border-radius: var(--radius-lg);
    padding: var(--s4); box-shadow: var(--shadow);
}
.review--featured { border-color: rgba(200,169,106,.55); box-shadow: var(--shadow-lg); }
.review-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.review-badge {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold-dark); background: rgba(200,169,106,.16); padding: 3px 10px; border-radius: 999px;
}
.review-title { font-size: 1.25rem; margin-bottom: var(--s1); }
.review-body {
    margin: 0 0 var(--s3); padding: 0; border: 0; color: #45484c;
    font-size: 1.02rem; line-height: 1.7;
}
.review-foot { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.review-author { font-family: var(--font-head); font-size: 1.02rem; color: var(--charcoal); }
.review-meta { font-size: .86rem; color: var(--grey-mid); }

.empty-state {
    text-align: center; padding: var(--s6) var(--s3);
    border: 1px dashed var(--grey); border-radius: var(--radius-lg); background: var(--white);
}

/* Star picker (admin) — reversed row so CSS sibling hover fills leftwards. */
.star-picker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.star-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-picker label { cursor: pointer; color: #ddd6c8; transition: color .15s; }
.star-picker label svg { width: 30px; height: 30px; display: block; }
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label { color: var(--gold); }
.star-picker input:focus-visible + label { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.inline-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; text-transform: none; }
.inline-check input { width: 18px; height: 18px; accent-color: var(--gold-dark); }

/* ---------- Trust badges ---------- */
.trust-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
    margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--grey);
}
.trust-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px; border: 1px solid var(--grey); border-radius: var(--radius);
    background: var(--white); color: #5a5d61; font-size: .8rem; line-height: 1.35;
    flex: 1 1 240px; transition: border-color .2s, box-shadow .2s;
}
a.trust-badge:hover { border-color: var(--gold); box-shadow: var(--shadow); color: #45484c; }
.trust-badge img { flex: 0 0 auto; height: 26px; width: auto; }
.trust-icon { flex: 0 0 auto; color: var(--gold-dark); display: grid; place-items: center; }
.trust-icon .ico { width: 24px; height: 24px; }

/* ---------- Guest portal ---------- */
.otp-input {
    font-size: 1.6rem; letter-spacing: .5em; text-align: center;
    font-family: var(--font-body); font-weight: 600;
}

/* Arrival / departure windows */
.times-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-bottom: var(--s4); }
.times-item {
    background: var(--charcoal); color: var(--white); border-radius: var(--radius-lg);
    padding: var(--s4); text-align: center;
}
.times-item .icon {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(200,169,106,.18); color: var(--gold); margin: 0 auto var(--s2);
}
.times-item .eyebrow { color: var(--gold); }
.times-figure {
    font-family: var(--font-head); font-size: clamp(1.8rem, 3.6vw, 2.4rem);
    color: var(--white); line-height: 1.1;
}
.times-item .help { color: rgba(255,255,255,.7); margin: var(--s1) 0 0; }

/* Access codes */
.codes-card {
    background: var(--white); border: 1px solid #efece6; border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: var(--s4);
}
.codes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-top: var(--s3); }
.code-box {
    border: 2px dashed rgba(200,169,106,.5); border-radius: var(--radius);
    background: rgba(200,169,106,.07); padding: var(--s3); text-align: center;
}
.code-value {
    font-family: var(--font-body); font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 600;
    letter-spacing: .18em; color: var(--charcoal); line-height: 1.2;
}
.code-box .help { margin: var(--s1) 0 0; }

.arrival-steps { padding-left: 0; margin: var(--s2) 0 var(--s3); list-style: none; counter-reset: step; }
.arrival-steps li {
    counter-increment: step; position: relative; padding: 0 0 var(--s3) var(--s5);
    color: #45484c; border-left: 1px solid var(--grey); margin-left: 14px;
}
.arrival-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.arrival-steps li::before {
    content: counter(step); position: absolute; left: -14px; top: -2px;
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gold); color: var(--charcoal); font-size: .8rem; font-weight: 700;
}
.btn-ghost { background: transparent; color: #5a5d61; border-color: var(--grey); }
.btn-ghost:hover { background: var(--grey); color: var(--charcoal); }

/* ---------- Receipt ---------- */
.receipt-body { background: #eceae6; }
.receipt-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    max-width: 820px; margin: var(--s3) auto 0; padding: 0 var(--s3);
}
.receipt {
    max-width: 820px; margin: var(--s3) auto var(--s6); background: var(--white);
    padding: var(--s6); box-shadow: var(--shadow-lg); border-radius: var(--radius);
}
.receipt-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
    padding-bottom: var(--s3); border-bottom: 2px solid var(--charcoal);
}
.receipt-logo { height: 46px; width: auto; }
.receipt-meta { text-align: right; }
.receipt-meta h1 { font-size: 1.9rem; margin: 0 0 4px; }
.receipt-meta p { margin: 0; font-size: .9rem; color: #5a5d61; }
.receipt-status {
    display: inline-block; margin: var(--s3) 0; padding: 6px 16px; border-radius: 999px;
    font-size: .76rem; font-weight: 700; letter-spacing: .16em;
}
.receipt-status.is-paid { background: #e8f3ea; color: #2f6b3c; }
.receipt-status.is-due  { background: #fff3d6; color: #9a6b00; }
.receipt-parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-bottom: var(--s4); }
.receipt h2 {
    font-family: var(--font-body); font-size: .76rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold-dark); margin: var(--s4) 0 var(--s1);
}
.receipt-parties h2 { margin-top: 0; }
.receipt-parties p { font-size: .92rem; line-height: 1.7; margin: 0; }
.receipt-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.receipt-table th, .receipt-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid #f0ede7; }
.receipt-table th { font-weight: 600; color: #45484c; width: 42%; }
.receipt-table td.num, .receipt-table th.num { text-align: right; }
.receipt-table--lines th { width: auto; }
.receipt-tag {
    display: inline-block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
    background: rgba(200,169,106,.16); color: var(--gold-dark); padding: 1px 7px;
    border-radius: 999px; margin-left: 6px;
}
.receipt-totals th { width: 70%; }
.receipt-totals .is-discount td, .receipt-totals .is-discount th { color: #2f6b3c; }
.receipt-totals .is-total th, .receipt-totals .is-total td {
    font-size: 1.15rem; font-weight: 700; color: var(--charcoal);
    border-top: 2px solid var(--charcoal); border-bottom: none; padding-top: var(--s2);
}
.receipt-foot { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--grey); }
.receipt-foot p:first-child { font-family: var(--font-head); font-size: 1.1rem; font-style: italic; }

@media print {
    .no-print, .site-header, .site-footer { display: none !important; }
    .receipt-body { background: #fff; }
    .receipt {
        margin: 0; padding: 0; box-shadow: none; border-radius: 0; max-width: none;
    }
    a[href]::after { content: ''; }   /* no printed URLs cluttering the page */
    .receipt-table { page-break-inside: avoid; }
}

/* ---------- Legal documents ---------- */
.legal-block {
    background: var(--white); border: 1px solid #efece6; border-radius: var(--radius-lg);
    margin-bottom: var(--s2); overflow: hidden;
}
.legal-block > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    padding: var(--s3) var(--s4); cursor: pointer; list-style: none; transition: background .2s;
}
.legal-block > summary::-webkit-details-marker { display: none; }
.legal-block > summary:hover { background: #fdfcfa; }
.legal-block > summary strong { display: block; font-family: var(--font-head); font-size: 1.15rem; }
.legal-sub { display: block; font-size: .9rem; color: #6b6e72; margin-top: 2px; }
.legal-chev { color: var(--gold-dark); transition: transform .25s; font-size: 1.1rem; }
.legal-block[open] .legal-chev { transform: rotate(180deg); }
.legal-body { padding: 0 var(--s4) var(--s4); border-top: 1px solid #f2efe9; }
.legal-intro { padding-top: var(--s3); color: #55585c; }
.legal-doc h3 {
    font-family: var(--font-body); font-size: .82rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: var(--gold-dark); margin: var(--s4) 0 var(--s1);
}
.legal-doc p, .legal-doc li { font-size: .94rem; color: #45484c; }
.legal-doc ul { padding-left: var(--s3); margin: 0 0 var(--s2); }
.legal-doc li { margin-bottom: 4px; }

/* ---------- Terms gate on the booking form ---------- */
.terms-gate {
    border: 1px solid var(--grey); border-radius: var(--radius);
    background: #fdfcfa; padding: var(--s2) var(--s3); margin: var(--s3) 0;
}
.terms-check { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; }
.terms-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--gold-dark); flex: 0 0 auto; }
.terms-check > span { font-size: .92rem; color: #45484c; line-height: 1.55; }
.linklike {
    background: none; border: none; padding: 0; font: inherit; color: var(--gold-dark);
    text-decoration: underline; cursor: pointer;
}
.linklike:hover { color: var(--gold); }

/* ---------- Modal ---------- */
.modal {
    position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center;
    background: rgba(22,24,26,.72); padding: var(--s3);
}
.modal[hidden] { display: none; }
.modal-card {
    background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: min(860px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s3) var(--s4); border-bottom: 1px solid var(--grey); background: var(--white);
    flex: 0 0 auto;
}
.modal-head h2 { margin: 0; font-size: 1.4rem; }
.modal-close {
    background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer;
    color: var(--grey-mid); padding: 0 4px;
}
.modal-close:hover { color: var(--charcoal); }
.modal-tabs {
    display: flex; gap: 4px; padding: var(--s2) var(--s4) 0; background: var(--white);
    border-bottom: 1px solid var(--grey); overflow-x: auto; flex: 0 0 auto;
    scrollbar-width: none;
}
.modal-tabs::-webkit-scrollbar { display: none; }
.modal-tab {
    background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
    font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: #6b6e72;
    padding: 10px 12px; white-space: nowrap; transition: .2s;
}
.modal-tab:hover { color: var(--charcoal); }
.modal-tab.active { color: var(--charcoal); border-bottom-color: var(--gold); }
.modal-body { overflow-y: auto; padding: 0 var(--s4) var(--s3); flex: 1 1 auto; min-height: 0; }
.modal-pane { display: none; }
.modal-pane.active { display: block; }
.modal-doc-title { font-family: var(--font-head); font-size: 1.25rem; margin: var(--s3) 0 0; }
.modal-foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap;
    padding: var(--s3) var(--s4); border-top: 1px solid var(--grey); background: var(--white);
    flex: 0 0 auto;
}
.modal-foot .help { margin: 0; }
.modal-actions { display: flex; gap: var(--s1); }
.modal-actions .btn { padding: 11px 24px; font-size: .88rem; }
body.modal-open { overflow: hidden; }

/* ---------- Site map ---------- */
.sitemap-list { list-style: none; padding: 0; margin: var(--s2) 0 0; }
.sitemap-list li { padding: var(--s1) 0; border-top: 1px solid #f0ede7; }
.sitemap-list li:first-child { border-top: 0; }
.sitemap-list a { font-weight: 600; display: block; color: var(--charcoal); }
.sitemap-list a:hover { color: var(--gold-dark); }
.sitemap-list span { display: block; font-size: .9rem; color: #6b6e72; }

/* ---------- Event / guide items ---------- */
.timeline-item { display: grid; grid-template-columns: 120px 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--grey); }
.timeline-item .when { font-family: var(--font-head); color: var(--gold-dark); font-size: 1.1rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: rgba(255,255,255,.78); margin-top: var(--s8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s4); padding: var(--s7) var(--s3) var(--s5); }
.footer-logo { height: 40px; margin-bottom: var(--s2); }
.footer-tag { font-family: var(--font-head); font-style: italic; color: var(--gold); }
.footer-muted { font-size: .9rem; color: rgba(255,255,255,.62); }
.footer-col h4,
.footer-col .footer-heading { color: var(--white); font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: var(--s2); }
.footer-col a { display: block; color: rgba(255,255,255,.72); font-size: .92rem; padding: 4px 0; }
.footer-col a:hover { color: var(--gold); }
.footer-col .btn { margin-top: var(--s2); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: var(--s2) 0; font-size: .82rem; color: rgba(255,255,255,.5); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero { background: var(--charcoal); color: var(--white); padding: var(--s7) 0 var(--s6); text-align: center; }
.page-hero h1 { color: var(--white); }
.page-hero .eyebrow { color: var(--gold); }
.page-hero p { color: rgba(255,255,255,.8); max-width: 620px; margin: 0 auto; }

/* ---------- Sign-in ---------- */
/* A rule with the word on it, rather than two buttons stacked and the reader
   left to work out whether they are alternatives or steps. */
.login-or {
    display: flex; align-items: center; gap: var(--s2);
    margin: var(--s3) 0; color: var(--grey-mid);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
}
.login-or::before, .login-or::after {
    content: ''; flex: 1; height: 1px; background: var(--grey);
}
.login-google {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.login-google svg { flex: 0 0 auto; }

/* ---------- Application header (shared by /admin and /ops) ---------- */
/*
   One header for both halves of the building. They were two different shells
   with two different ideas about where you are and who you are signed in as,
   which made moving between them feel like moving between two products.

   Height is a variable because things stick underneath it — the checklist
   progress bar and its section headings — and they have to know how far down
   to start. One number to change rather than three that drift apart.
 */
:root { --app-top-h: 52px; }

.app-top {
    /* Above the ops rail, which hangs below it and is z-index 30. The header
       is a stacking context, so this is also what keeps the identity panel
       clear of the nav rather than tucked behind it. */
    position: sticky; top: 0; z-index: 40;
    background: var(--charcoal); color: #fff;
    padding: 10px var(--s2) 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    box-shadow: 0 2px 12px rgba(46, 49, 53, .18);
}
.app-top-row { display: flex; align-items: center; gap: var(--s2); }
/* Logo hard left, everything else pushed to the right, so the identity button
   lands under the same thumb on every page whether or not a status pill is
   sitting between them. */
.app-top-row .app-brand { margin-right: auto; min-width: 0; }
.app-brand img {
    height: 30px; width: auto; max-width: 100%;
    display: block; object-fit: contain; object-position: left center;
}
/*
   The page name, for screen readers only.

   It used to print under the logo, which made the bar two lines tall and said
   a second time what the highlighted nav tab already says. Every page keeps
   exactly one h1 in the document — take the element away and a screen reader
   arrives on a page with no heading at all, which is a real loss for the sake
   of a line of chrome nobody was reading.
 */
.app-title {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

/*
   The identity menu.

   Signing out used to live at the bottom of the page, which on a checklist
   meant scrolling past forty items to reach it. It is now in the header, in
   the same spot on every page and in both halves of the site, above the fold
   on the smallest phone.

   The panel is absolutely positioned so opening it never shoves the page down
   under a thumb already on its way somewhere else. .app-top sets no overflow,
   so nothing clips it.
 */
.app-top .identity { margin-top: 0; flex: 0 0 auto; }
.app-top .identity > summary { padding: 6px 10px; max-width: 48vw; }
.app-top .identity-name { font-size: .82rem; font-weight: 600; color: #fff; }
.app-top .identity-role { font-size: .68rem; }
.app-top .identity-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    min-width: 176px; padding: 6px;
    background: #fff; border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(46, 49, 53, .3);
}
.app-top .identity-menu a {
    display: flex; align-items: center; min-height: 44px;
    padding: 0 14px; border-radius: 8px;
    color: var(--ink); font-size: .92rem; text-decoration: none;
}
.app-top .identity-menu a:hover,
.app-top .identity-menu a:focus-visible { background: var(--paper); }

@media (min-width: 900px) {
    .app-top { padding-left: var(--s4); padding-right: var(--s4); }
}

/* Nobody wants a sticky black bar in a printed inspection record. */
@media print {
    .app-top .identity { display: none; }
    .app-top { position: static; background: none; color: var(--ink); box-shadow: none; }
    .app-title { color: var(--ink); }
}

/* ---------- Admin ---------- */
/* The header sits above the shell now, so the shell only owns what is left of
   the viewport — 100vh here would push the page down by the height of the bar. */
.admin-shell {
    display: grid; grid-template-columns: 240px 1fr;
    min-height: calc(100vh - var(--app-top-h));
}
.admin-side { background: var(--charcoal); color: #fff; padding: var(--s3); }
.admin-side .brand-logo { height: 30px; margin-bottom: var(--s4); }
.admin-side a { display: block; color: rgba(255,255,255,.75); padding: 10px 12px; border-radius: 8px; font-size: .92rem; margin-bottom: 4px; }
.admin-side a:hover, .admin-side a.active { background: rgba(200,169,106,.18); color: var(--gold); }
.admin-main { padding: var(--s5); background: var(--paper); }
.admin-card { background: #fff; border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow); margin-bottom: var(--s3); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--grey); font-size: .9rem; }
.data-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-mid); }
.status-pill { padding: 3px 12px; border-radius: 50px; font-size: .76rem; font-weight: 600; }
.status-pending { background: #fff3d6; color: #9a6b00; }
.status-confirmed { background: #e8f3ea; color: #2f6b3c; }
.status-awaiting_payment { background: #e7eefc; color: #2a4c8f; }
.status-expired { background: #f0eeea; color: #7a7671; }
.status-declined, .status-cancelled { background: #f1f1f1; color: #777; }
.btn-sm { padding: 7px 16px; font-size: .8rem; }
.inline-form { display: inline; }

/* ---------- Signed-in identity ---------- */
/* One dropdown, both shells, so /admin/ and /ops/ can never disagree about who
   you are or how you leave. It is a <details> because neither shell ships a
   line of layout JavaScript, and a menu that appears only once a script has
   loaded is a menu that is sometimes not there at all.
   The caret flips with the open state: the state is never colour alone. Both
   shells put this on a dark ground, so the base colours assume one. */
.identity { position: relative; margin-top: var(--s2); }
.identity > summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 12px; border-radius: 8px; list-style: none;
    color: rgba(255,255,255,.75); font-size: .92rem;
}
.identity > summary::-webkit-details-marker { display: none; }
.identity > summary::after { content: '▾'; margin-left: auto; font-size: .7rem; }
.identity[open] > summary::after { content: '▴'; }
.identity > summary:hover,
.identity[open] > summary { background: rgba(200,169,106,.18); color: var(--gold); }
/* The focus ring is the whole reason this is reachable without a mouse; it must
   survive whatever the summary is sitting on. */
.identity > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.identity-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.identity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-role { font-size: .74rem; color: rgba(255,255,255,.55); }
.identity-menu a { display: block; }
/* Both shells now float the panel from the header, so the sidebar variant of
   it is gone. The class survives only to tell the two apart if they ever need
   to differ again. */

/* ---------- Message history ---------- */
.channel-choice { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.chan-pill { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.chan-sms { background: #eef2f7; color: #3d5878; }
.chan-email { background: #f5eee0; color: #8a6d2f; }
/* The full body is collapsed by default: an HTML email runs to hundreds of
   words and would bury the rest of the table. */
.msg-body { white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; padding: 10px 12px; background: var(--paper); border-radius: 6px; font-family: inherit; font-size: .82rem; line-height: 1.5; max-height: 320px; overflow-y: auto; }

/* ---------- Booked-until notice (floats over the home page) ---------- */
/* Sits above the sticky header (z-index 100) but below the terms modal (150),
   so nothing it might cover is ever something a guest is mid-way through. */
.booked-note {
    /* Right, and clear of the floor: the reCAPTCHA badge sits in the
       bottom-right corner of every page, so the notice rides just above it
       rather than under it — and stays off the hero's buttons on the left. */
    position: fixed; right: var(--s3); bottom: 88px; z-index: 120;
    width: min(360px, calc(100vw - var(--s3) * 2));
    background: var(--charcoal); color: var(--white);
    border-radius: var(--radius-lg); border-top: 3px solid var(--gold);
    padding: var(--s3) var(--s3) var(--s2);
    box-shadow: var(--shadow-lg);
}
.booked-note--in { animation: booked-note-in .45s cubic-bezier(.2, .8, .3, 1) both; }
.booked-note--out { opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; }
.booked-note__eyebrow {
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .22em; color: var(--gold); margin: 0 0 6px;
}
.booked-note__title { font-family: var(--font-head); font-size: 1.25rem; line-height: 1.25; margin: 0 0 var(--s1); }
.booked-note__body { font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 var(--s2); }
.booked-note__link { display: inline-block; font-size: .86rem; font-weight: 600; color: var(--gold); margin-bottom: var(--s1); }
.booked-note__link:hover { color: var(--white); }
.booked-note__close {
    position: absolute; top: 6px; right: 10px;
    background: none; border: 0; cursor: pointer; padding: 4px 8px;
    font-size: 1.5rem; line-height: 1; color: rgba(255,255,255,.55);
}
.booked-note__close:hover { color: var(--white); }
@keyframes booked-note-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .booked-note--in { animation: none; }
    .booked-note--out { transition: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .split, .footer-grid { grid-template-columns: 1fr; gap: var(--s4); }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .admin-shell { grid-template-columns: 1fr; }
    /* The sidebar becomes a wrapping row of links. The logo and the identity
       menu both left it for the header, so there is nothing else in here. */
    .admin-side { display: flex; flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 760px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s1); }
    .photo-strip { grid-template-columns: repeat(2, 1fr); }
    .guide-grid { grid-template-columns: 1fr; }
    .guide-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .guide-tabs::-webkit-scrollbar { display: none; }
    .guide-tab { white-space: nowrap; }
    .review { padding: var(--s3); }
    .times-band, .codes-grid, .receipt-parties { grid-template-columns: 1fr; }
    .receipt { padding: var(--s3); }
    .receipt-head { flex-direction: column; }
    .receipt-meta { text-align: left; }
    .modal { padding: 0; }
    .modal-card { max-height: 100vh; height: 100%; border-radius: 0; width: 100%; }
    .modal-head, .modal-tabs, .modal-body, .modal-foot { padding-left: var(--s3); padding-right: var(--s3); }
    .modal-foot { flex-direction: column; align-items: stretch; }
    .modal-actions { justify-content: stretch; }
    .modal-actions .btn { flex: 1; }
    .legal-block > summary, .legal-body { padding-left: var(--s3); padding-right: var(--s3); }
    .gallery-grid .ph.span-2 { grid-column: span 1; }
    .gallery-item.span-2 { grid-column: span 2; aspect-ratio: 16 / 9; }
    .gallery-item .cap { opacity: 1; transform: none; font-size: .88rem; }
    .media--tall { aspect-ratio: 4 / 3; max-height: none; }
    .lightbox-prev, .lightbox-next { bottom: var(--s5); top: auto; }
    .field-row { grid-template-columns: 1fr; }
    .feature-list { grid-template-columns: 1fr; }
    /* A bottom bar on a phone: a floating card in the corner either covers
       the content or shrinks to nothing on a narrow screen. */
    .booked-note { left: var(--s2); right: var(--s2); width: auto; }
    .timeline-item { grid-template-columns: 1fr; }
    .section { padding: var(--s5) 0; }
}