/*
 * Nithusha Holiday House — the Courtyard House visual world.
 * Hand-written site styles, no build step: served as-is from /public/css/app.css.
 *
 * World: the website is the guesthouse. Limewash walls, night-green shutters,
 * clay-tile hairline beams, one warm flame where the lamp is lit. Hierarchy is
 * light and shade, never boxes and chrome; photography sits in framed openings.
 * Marcellus for the engraved nameplate voice, Rubik for everything else.
 *
 * Every class name that drove behaviour in the previous system is preserved:
 * the nav states, the reveal cascade, the parallax layers, the wizard, and the
 * availability bar all keep the hooks app.js and analytics.js already read.
 */

:root {
    --color-ink: #172019;
    --color-ink-soft: #22302a;
    --color-primary: #23594b;
    --color-primary-dark: #153f35;
    --color-primary-light: #e2ece5;
    --color-wall: #f6f0e3;
    --color-accent: #d0922f;
    --color-accent-dark: #86570f;
    --color-tile: #b25c3e;
    --color-teal: #2f8f7d;

    --color-text: #30362c;
    --color-text-muted: #575f52;
    --color-text-faint: #5b6458;
    --color-border: #e3dbc8;
    --color-bg: #faf6ee;
    --color-bg-alt: #f1ead9;

    --color-success-bg: #e6f2e6;
    --color-success-text: #2f6a3d;
    --color-success-border: #c2e0c4;
    --color-error-bg: #fbece8;
    --color-error-text: #9c3f2e;
    --color-error-border: #f0c9bf;
    --color-warning-bg: #f8efd8;
    --color-warning-text: #83591a;
    --color-warning-border: #ecd6a0;

    --color-room-available-bg: #2e8f6b;
    --color-room-available-border: #1e6b4e;
    --color-room-processing-bg: #cc8a24;
    --color-room-processing-border: #97640f;
    --color-room-booked-bg: #b2573f;
    --color-room-booked-border: #843d2c;

    --glass-border: rgba(38, 48, 42, 0.08);

    --nav-height: 4.5rem;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(46, 40, 24, .05), 0 10px 14px -16px rgba(23, 32, 25, .2);
    --shadow-md: 0 18px 24px -22px rgba(23, 32, 25, .25);
    --shadow-lg: 0 24px 34px -24px rgba(23, 32, 25, .3);
    --shadow-xl: 0 32px 52px -32px rgba(15, 22, 17, .45);
    --container-width: 1180px;
    --container-wide: 1400px;
    --container-narrow: 780px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --font-sans: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: "Marcellus", Georgia, "Times New Roman", serif;

    --scrim-hero: linear-gradient(98deg, rgba(23, 32, 25, .8) 0%, rgba(23, 32, 25, .48) 46%, rgba(23, 32, 25, .1) 78%, rgba(23, 32, 25, .34) 100%), linear-gradient(180deg, rgba(23, 32, 25, .18) 0%, rgba(23, 32, 25, 0) 42%, rgba(23, 32, 25, .9) 100%);
    --scrim-band: linear-gradient(180deg, rgba(23, 32, 25, .7), rgba(23, 32, 25, .82));
    --scrim-soft: linear-gradient(180deg, rgba(23, 32, 25, .14), rgba(23, 32, 25, .82));
}

/* ---------- Per-language type ----------
   Marcellus and Rubik only cover Latin script. Tamil and Sinhala pages get
   their own heading/body pair through the same token swap every rule in this
   file already reads, so retinting a locale never means retouching rules. */
html[lang="ta"] {
    --font-serif: "Catamaran", "Noto Sans Tamil", "Marcellus", Georgia, "Times New Roman", serif;
    --font-sans: "Noto Sans Tamil", "Catamaran", "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[lang="si"] {
    --font-serif: "Abhaya Libre", "Noto Sans Sinhala", "Marcellus", Georgia, "Times New Roman", serif;
    --font-sans: "Noto Sans Sinhala", "Abhaya Libre", "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.65;
    font-size: 16px;
    overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.18; font-family: var(--font-serif); font-weight: 400; letter-spacing: .005em; text-wrap: balance; }
html[lang="ta"] h1, html[lang="ta"] h2, html[lang="ta"] h3, html[lang="ta"] h4,
html[lang="si"] h1, html[lang="si"] h2, html[lang="si"] h3, html[lang="si"] h4 { font-weight: 700; }

/* Small tracked-caps label for form labels, plates and ledgers — the house's
   engraved voice for names and numbers, never a decorative kicker. */
.accent {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
}
p, dl, dt, dd { margin: 0; }
/* Body copy reads as a clean block, edge to edge, rather than a ragged
   right margin — every paragraph justifies by default. Short centered
   taglines (section subtitles, modal copy, anything wrapped in
   .text-center) fall back to inheriting their container's alignment so
   they don't get pulled left on the wrap. */
p { text-align: justify; text-align-last: left; }
html[lang="ta"] p, html[lang="si"] p { text-align: left; } /* Tamil/Sinhala justification can badly over-stretch word spacing */
.section-head.is-centered p,
.experience-card p,
.language-modal-panel p,
.text-center p { text-align: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
iframe { border: 0; }
::selection { background: var(--color-accent); color: #fff; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

body { caret-color: var(--color-primary); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    background: var(--color-wall);
    color: var(--color-ink);
    padding: .6rem 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transition: top .15s ease;
    z-index: 300;
}
.skip-link:focus { top: 1rem; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal-item { opacity: 1; transform: none; transition: none; }
}

/* ---------- Curved section seams ----------
   Straight seams between bands are swapped for a swept line of limewash: a
   wavy SVG divider sits at the top of the LOWER section and carries the
   colour of the section above down across the curve. The host adds .has-wave
   for the position and the extra top padding so a heading rests clear of
   the trough. */
.has-wave { position: relative; }
.has-wave > .section-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.5rem;
    z-index: 1;
    display: block;
    pointer-events: none;
}
.has-wave.photo-band { padding-top: calc(5rem + 2.25rem); }
@media (max-width: 760px) {
    .has-wave > .section-wave { height: 3.5rem; }
    .has-wave.photo-band { padding-top: calc(5rem + 1.75rem); }
}

/* ---------- Layout helpers ---------- */
.page { display: flex; flex-direction: column; min-height: 100vh; padding-top: var(--nav-height); }
.page main { flex: 1; }

.container { max-width: var(--container-width); margin-inline: auto; padding-inline: 1.5rem; }
.container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: 1.5rem; }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: 1.5rem; }

.section { padding-block: 4.75rem; }
.section-xs { padding-block: 1.5rem; }
.section-sm { padding-block: 2.25rem; }
.section-md { padding-block: 3.25rem; }
.section-lg { padding-block: 6.5rem; }
.pb-tight { padding-bottom: 3.25rem; }

.bg-alt { background: var(--color-bg-alt); }
.bg-primary { background: var(--color-primary); color: #fff; }
.bg-sand { background: var(--color-warning-bg); }
.bg-tint { background: var(--color-primary-light); }
/* Woven palmyra grain under the paper ground — a faint lattice, not a grid
   overlay: the thatch of the subject's own world. */
.bg-paper {
    background-color: var(--color-bg);
}

.hairline-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

.text-center { text-align: center; }
.inline-block { display: inline-block; }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-white { color: #fff; }
.text-accent { color: var(--color-accent-dark); }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.font-medium { font-weight: 700; }
.uppercase-none { text-transform: none; }
.btn.uppercase-none { text-transform: none; letter-spacing: 0; }

/* Prose measure: paragraphs and list entries cap at a readable line, so
   wide containers never hand the reader a 100+-character sentence. 38em is
   used rather than ch because the ch unit tracks the glyph of the Latin
   font in use and lands wider than intended on this face. */
main p, main li, main dd, main summary { max-width: 38em; }

.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.75rem; }

.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.75rem; }

.stack { display: flex; flex-direction: column; }
.gap-sm { gap: .5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cluster-center { justify-content: center; }
.cluster-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }

.stack[hidden], .cluster[hidden] { display: none; }

.grid { display: grid; gap: 1.5rem; }
.grid-cards { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
/* One big photo per row on a phone, growing to a max of three across on
   desktop — a modest, ~20px gap throughout so the photos themselves stay
   the point rather than shrinking into a wall of thumbnails. */
.gallery-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }

@media (min-width: 620px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 700px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.order-first { order: -1; }
.stat-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2.5rem; }
.stat { display: flex; align-items: center; gap: .5rem; font-size: 1.9rem; font-weight: 400; color: var(--color-primary); font-family: var(--font-serif); }
.stat i { font-size: .55em; color: var(--color-accent-dark); }
.stat-label { color: var(--color-text-muted); font-family: var(--font-sans); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin-top: .3rem; }

/* ---------- Section headings ----------
   The heading carries the section; under it sits a carved tile rule — a short
   clay-tile beam with a small flame diamond — in place of any kicker label. */
.section-head { max-width: 46rem; }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.85rem, 3.3vw, 2.6rem); margin-top: .5rem; color: var(--color-ink); }
.section-head p { margin-top: .9rem; color: var(--color-text-muted); }

.eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: var(--color-accent-dark);
}

/* A short clay-tile beam broken by a small flame diamond — the quiet divider
   that sits under a section heading like a lintel over an opening. */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.05rem;
    color: var(--color-tile);
}
.ornament::before, .ornament::after {
    content: "";
    width: 3.25rem;
    height: 2px;
    background: currentColor;
    opacity: .55;
}
.ornament::after { background: linear-gradient(90deg, var(--color-tile), var(--color-tile) 60%, transparent); }
.ornament span {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: var(--color-accent);
    flex-shrink: 0;
}
.section-head:not(.is-centered) .ornament { justify-content: flex-start; }
.section-head:not(.is-centered) .ornament::before { display: none; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .82rem 1.55rem;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    border: 1px solid transparent;
    text-align: center;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
    will-change: transform;
}
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 12px 24px -16px rgba(35, 89, 75, .7); }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(35, 89, 75, .6); }
.btn.is-disabled-look { opacity: .45; box-shadow: none; cursor: not-allowed; }
.btn.is-disabled-look:hover { transform: none; box-shadow: none; }
.btn-primary.is-disabled-look:hover { background: var(--color-primary); }
.btn-ink { background: var(--color-ink); color: #fff; }
.btn-ink:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.btn-accent { background: var(--color-accent); color: #241a05; box-shadow: 0 10px 22px -14px rgba(23, 32, 25, .35); }
.btn-accent:hover { background: var(--color-accent-dark); color: #fff; transform: translateY(-2px); }
.btn-outline { background: transparent; border-width: 1.5px; border-color: color-mix(in srgb, var(--color-ink) 45%, transparent); color: var(--color-text); }
.btn-outline:hover { background: var(--color-bg-alt); border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }
.btn-outline-light { background: rgba(255, 255, 255, .12); border-width: 1.5px; border-color: rgba(255, 255, 255, .85); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .28); border-color: #fff; transform: translateY(-2px); }
.btn-outline-dark { background: rgba(23, 32, 25, .04); border-width: 1.5px; border-color: rgba(23, 32, 25, .38); color: var(--color-ink); }
.btn-outline-dark:hover { background: rgba(23, 32, 25, .08); border-color: var(--color-ink); transform: translateY(-2px); }
.btn-light { background: var(--color-wall); color: var(--color-ink); }
.btn-light:hover { background: var(--color-bg-alt); transform: translateY(-2px); }
.btn-sm { padding: .58rem 1.15rem; font-size: .72rem; letter-spacing: .11em; }
.btn-lg { padding: .98rem 2rem; font-size: .78rem; }
.btn-block { display: flex; width: 100%; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:disabled:hover { transform: none; }

/* ---------- Site navigation ----------
   The fascia beam: slim and fixed, brand engraved like a door plate, links as
   a lintel register. Always a solid limewash bar over the photographic hero —
   no transparent strip at any width or scroll state. */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    width: 100%;
    background: var(--color-wall);
    border-bottom: 1px solid var(--glass-border);
    transition: background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.site-nav.is-transparent {
    background: var(--color-wall);
    border-color: var(--color-border);
    color: inherit;
}
.site-nav.is-scrolled {
    background: var(--color-wall);
    border-color: var(--color-border);
    box-shadow: 0 14px 30px -26px rgba(23, 32, 25, .4);
    color: inherit;
}

.nav-inner {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: 1.5rem;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-brand { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
/* The mark is a small shutter-green plate bearing the lit lamp. */
.nav-brand-mark {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-accent);
    font-size: .85rem;
    flex-shrink: 0;
}
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav-brand-name { font-family: var(--font-serif); font-weight: 400; font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.nav-brand-sub { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; color: var(--color-text-muted); white-space: nowrap; }

.nav-menu { display: none; align-items: center; justify-content: center; gap: 1.6rem; flex: 1; min-width: 0; }
.nav-menu a {
    position: relative;
    font-size: .71rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    white-space: nowrap;
    padding-block: .4rem;
    color: var(--color-text-muted);
    transition: color .2s ease;
}
.nav-menu a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -1px;
    height: 2px;
    background: var(--color-accent);
    transition: left .28s var(--ease), right .28s var(--ease);
}
.nav-menu a:hover, .nav-menu a.is-active { color: var(--color-ink); }
.nav-menu a:hover::after, .nav-menu a.is-active::after { left: 0; right: 0; }

.nav-cta { display: none; flex-shrink: 0; }

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 4px;
    background: var(--color-bg-alt);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1rem;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nav-toggle:hover { background: var(--color-primary-light); }

.nav-drawer {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 199;
    width: 100%;
    background: var(--color-wall);
    border-bottom: 1px solid var(--color-border);
    padding: .75rem 1.5rem 1.35rem;
    display: none;
    flex-direction: column;
    gap: .15rem;
    box-shadow: 0 26px 50px -30px rgba(23, 32, 25, .45);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
}
.nav-drawer.is-open { display: flex; animation: nav-drop .28s var(--ease); }
.nav-drawer a {
    color: var(--color-text-muted);
    padding: .8rem 1rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    transition: background-color .15s ease, color .15s ease;
}
.nav-drawer a:hover, .nav-drawer a.is-active { background: var(--color-bg-alt); color: var(--color-ink); }
.nav-drawer .btn { margin-top: .6rem; }

@keyframes nav-drop {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1080px) {
    .nav-menu { display: flex; }
    .nav-cta { display: inline-flex; }
    .nav-toggle { display: none; }
    .nav-drawer { display: none !important; }
}

/* ---------- Language switcher ----------
   A segmented control; each language sits visible as its own pill, in its own
   script, one tap away. */
.lang-switch {
    display: none;
    align-items: center;
    gap: .2rem;
    padding: .2rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.lang-switch-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: .35rem .6rem;
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: 700;
    color: var(--color-text-muted);
    transition: background-color .2s ease, color .2s ease;
}
.lang-switch-option:hover { color: var(--color-ink); }
.lang-switch-option.is-active { background: var(--color-accent); color: #241a05; box-shadow: var(--shadow-sm); }

.lang-switch-drawer {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: .5rem 0 .75rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-pill);
}

@media (min-width: 1080px) {
    .lang-switch:not(.lang-switch-drawer) { display: flex; }
}

/* ---------- First-visit language modal ---------- */
.language-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(23, 32, 25, .6);
}
.language-modal.is-open { display: flex; animation: nav-drop .28s var(--ease); }
.language-modal-panel {
    position: relative;
    width: 100%;
    max-width: 26rem;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    text-align: center;
}
.language-modal-close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text-muted);
    transition: background-color .2s ease, color .2s ease;
}
.language-modal-close:hover { background: var(--color-bg-alt); color: var(--color-ink); }
.language-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: .75rem;
}
.language-modal-options { display: grid; gap: .6rem; margin-top: 1.5rem; }
.language-modal-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color .2s ease, background-color .2s ease;
}
.language-modal-option:hover { border-color: var(--color-accent); background: var(--color-bg-alt); }
.language-modal-option-native { font-family: var(--font-serif); font-size: 1.05rem; color: var(--color-ink); }
.language-modal-option-name { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }

/* ---------- Hero (the verandah) ----------
   Full-bleed photograph of the house at dusk, headline over its darker left,
   and the availability bar as a stone doorstep riding the bottom edge. */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: min(66vh, 560px);
    margin-top: calc(var(--nav-height) * -1);
    padding-top: calc(var(--nav-height) + 3.5rem);
    padding-bottom: 3rem;
    background-color: var(--color-ink);
    color: #fff;
}
.hero > .container-wide { position: relative; z-index: 2; width: 100%; }

@media (max-width: 760px) {
    .hero {
        min-height: 0;
        padding-top: calc(var(--nav-height) + 2.5rem);
        padding-bottom: 2.25rem;
    }
    .hero h1 { margin-top: .9rem; }
    .hero p { font-size: .92rem; margin-top: .9rem; }
    .hero-actions { gap: .55rem; margin-top: 1.35rem; }
    .hero-actions .btn { flex: 1 1 100%; padding: .8rem 1.2rem; font-size: .7rem; }
}

.hero-media {
    position: absolute;
    inset: -10% 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--scrim-hero);
}
.hero-media-home { background-image: url("../imgs/outside.jpg"); }
.hero-media-rooms { background-image: url("../imgs/room02.jpg"); }
.hero-media-about { background-image: url("../imgs/outdoor.jpg"); }
.hero-media-gallery { background-image: url("../imgs/outdoor.jpg"); }
.hero-media-contact { background-image: url("../imgs/car-park.jpg"); }
.hero-media-booking { background-image: url("../imgs/room01.jpeg"); }

@media (prefers-reduced-motion: reduce) {
    .hero-media { inset: 0; transform: none !important; }
}

.hero-copy { max-width: 44rem; }

.hero h1 {
    margin-top: 1rem;
    font-size: clamp(1.85rem, 4.6vw, 3.3rem);
    font-weight: 400;
    line-height: 1.08;
    color: #fff;
}
html[lang="ta"] .hero h1, html[lang="si"] .hero h1 { font-weight: 700; }
/* The second line of the headline, cut as a gold plate — the only gilding in
   an otherwise quiet type hierarchy. */
.hero-title-script {
    display: block;
    font-weight: 400;
    color: #f0b854;
    letter-spacing: .02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
html[lang="ta"] .hero-title-script, html[lang="si"] .hero-title-script { font-weight: 700; }
.hero p { margin-top: .95rem; max-width: 30rem; color: rgba(255, 255, 255, .86); font-size: .95rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Availability doorstep (home) ----------
   The search slab rests on the hero's hem so the hero keeps its photo as a
   lintel and hands the fold down to the facilities strip. */
.availability-shell {
    position: relative;
    z-index: 5;
    margin-top: -2rem;
}
.availability-shell .availability-bar { margin-top: 0; }
.availability-shell + section { padding-top: 2rem; }
@media (max-width: 760px) {
    .availability-shell { margin-top: -1rem; }
    .availability-shell + section { padding-top: 2rem; }
}

/* ---------- Availability bar (the doorstep) ----------
   The stone ledge the guest steps to first: four carved fields and a flame
   button on a deep night slab, with a warm welcome rule along the top. */
.availability-bar {
    position: relative;
    z-index: 3;
    margin-top: 2.75rem;
    background: var(--color-ink);
    border: 1px solid rgba(240, 233, 218, .18);
    border-radius: 6px;
    padding: 1.05rem;
    display: grid;
    gap: .85rem;
    grid-template-columns: 1fr;
    box-shadow: 0 18px 36px -28px rgba(15, 22, 17, .55);
}
.availability-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 5px 5px 0 0;
    background: var(--color-accent);
}
.availability-bar-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.availability-bar-field label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.availability-bar-field label i { color: inherit; }
.availability-bar-field input,
.availability-bar-field select {
    width: 100%;
    background: rgba(255, 251, 240, .09);
    border: 1px solid rgba(255, 251, 240, .2);
    border-radius: 4px;
    padding: .62rem .78rem;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    transition: border-color .2s ease, background-color .2s ease;
}
.availability-bar-field input:focus,
.availability-bar-field select:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 251, 240, .15);
}
.availability-bar-field select option { color: var(--color-text); }
.availability-bar-field input[type="date"]::-webkit-calendar-picker-indicator,
.availability-bar-field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .65; cursor: pointer; }
.availability-bar .btn { align-self: end; height: 2.8rem; }

.availability-bar-split { display: flex; gap: .4rem; }
.availability-bar-split input { min-width: 0; }
.availability-bar-split input[type="time"] { flex: 0 0 6.4rem; }

/* Below 600px the date and time inputs no longer sit side by side — a fixed
   6.4rem time column got crushed there, clipping the picker's own text. Each
   input drops to its own full-width row instead, so the time has as much
   room as the date. */
@media (max-width: 600px) {
    .availability-bar-split { flex-direction: column; gap: .5rem; }
    .availability-bar-split input[type="time"] { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 480px) {
    .availability-bar { gap: .65rem; padding: .9rem; }
    .availability-bar-field input,
    .availability-bar-field select { padding: .5rem .65rem; font-size: .85rem; }
    .availability-bar .btn { height: 2.6rem; }
}

@media (min-width: 481px) {
    .availability-bar { grid-template-columns: 1fr 1fr; align-items: end; }
}
@media (min-width: 760px) {
    .availability-bar { padding: 1.2rem 1.3rem; gap: 1rem 1.25rem; }
    /* The mobile sizing (built for a thumb) reads as oversized once there's
       a mouse and more room either side — a smaller, tidier control here. */
    .availability-bar-field input,
    .availability-bar-field select { padding: .5rem .65rem; font-size: .82rem; }
    .availability-bar .btn { height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .availability-bar { animation: none; }
}

/* ---------- Page header (inner pages: the verandah) ----------
   The compact photographic counterpart to the hero — same dusk scrim, a third
   of the height. The page title carries the announcement; crumbs give trail. */
.page-header {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 21rem;
    margin-top: calc(var(--nav-height) * -1);
    padding-top: calc(var(--nav-height) + 2.5rem);
    padding-bottom: 2.75rem;
    background-color: var(--color-ink);
    color: #fff;
}
.page-header > .container, .page-header > .container-narrow { position: relative; z-index: 2; width: 100%; }
.page-header h1 { margin-top: .35rem; font-size: clamp(2rem, 4.2vw, 3rem); color: #fff; }
.page-header p { max-width: 40rem; margin-top: .9rem; color: rgba(255, 255, 255, .84); }
.page-header p a { color: #f0b854; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.page-header p a:hover { color: #fff; }
.page-header h1, .page-header p { animation: hero-rise .8s var(--ease-out) both; }
.page-header h1 { animation-delay: .45s; }
.page-header p { animation-delay: .55s; }
@media (prefers-reduced-motion: reduce) {
    .page-header h1, .page-header p { animation: none; }
}

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.5rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .6); }
.crumbs a:hover { color: #fff; }
.crumbs i { font-size: .55rem; opacity: .6; }

/* ---------- Facility cards ----------
   Four independent cards rather than one shared strip: each convenience
   gets its own lifted surface, a circular badge that fills in on hover, and
   room to breathe — reading as four small invitations instead of one bulky
   bar sharing a single background. */
.facility-cards {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 560px) {
    .facility-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .facility-cards { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.facility-card {
    position: relative;
    padding: 2.1rem 1.6rem;
    text-align: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.facility-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--color-primary-light), transparent 60%);
    opacity: 0;
    transition: opacity .35s var(--ease);
}
.facility-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}
.facility-card:hover::before { opacity: 1; }
.facility-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-inline: auto;
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 1.2rem;
    transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.facility-card:hover .facility-icon { background: var(--color-accent); color: #fff; transform: scale(1.08) rotate(-4deg); }
.facility-card h3 { position: relative; z-index: 1; margin-top: 1.1rem; font-family: var(--font-sans); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--color-ink); }
.facility-card p { position: relative; z-index: 1; margin-top: .4rem; font-size: .86rem; color: var(--color-text-muted); }

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: var(--color-primary);
    font-size: 1.05rem;
}
.icon-badge-sm { width: 2.35rem; height: 2.35rem; font-size: .9rem; }
.icon-badge-lg { width: 4rem; height: 4rem; font-size: 1.5rem; }
.icon-badge-accent { color: var(--color-accent-dark); }
.icon-badge-success { color: var(--color-success-text); }
.about-love-icon { color: var(--color-accent-dark); font-size: 1.5rem; line-height: 1; }

/* ---------- Opening cards (rooms, offers) ----------
   A room is an opening in the wall: a lintel, a window with green shutters
   that draw aside on hover, and a plate beneath carrying name and rate. */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* A lintel is the painted squared-off top stroke of a window — as a pseudo
   bar rather than a border so it never collides with the rounded corners. */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1;
    background: var(--color-primary);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card:hover::before { background: var(--color-accent); }
.card-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-ink); }
.card-photo .photo-placeholder, .card-photo .photo-cover { transition: transform .6s var(--ease); }
.card:hover .card-photo .photo-placeholder, .card:hover .card-photo .photo-cover { transform: scale(1.06); }

.card-pad { padding: 1.6rem; }
.h-fit { height: fit-content; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.card-eyebrow { font-family: var(--font-sans); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent-dark); }
.card-title { margin-top: .5rem; font-size: 1.3rem; color: var(--color-ink); }
.card-meta { margin-top: .75rem; font-size: .82rem; color: var(--color-text-muted); }
.card-meta li + li { margin-top: .3rem; }
.card-meta i { color: var(--color-primary); width: 1rem; text-align: center; margin-right: .2rem; }
.card-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}
.card-footer .price { display: block; }
.card-footer .cluster { flex-wrap: nowrap; gap: .6rem; }
.card-footer .cluster .btn { flex: 1; }

.card-tag {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid transparent;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: 0 2px 8px rgba(23, 32, 25, .28);
}
/* White plate, coloured ink, and a matching border — legible on any photo
   regardless of how bright or busy it is, unlike a translucent dark pill. */
.card-tag-available { color: var(--color-success-text); border-color: var(--color-success-border); }
.card-tag-soldout { color: var(--color-error-text); border-color: var(--color-error-border); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: .7rem; font-weight: 600; color: var(--color-text-muted); }
.chip i { color: var(--color-accent-dark); font-size: .8em; }

.price { font-size: 1.3rem; font-weight: 400; color: var(--color-primary); font-family: var(--font-serif); }
.price small { font-weight: 600; font-size: .72rem; color: var(--color-text-muted); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .12em; }
.price-label { display: block; font-family: var(--font-sans); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--color-text-muted); margin-bottom: .15rem; }
.price-lg { font-size: 1.9rem; }

/* ---------- Photo placeholder ----------
   A designed state for the spots with no real shot yet: a shutter-green panel
   under a faint woven lattice, with the lamp glyph waiting in the middle. */
.photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #fff;
    background: radial-gradient(120% 120% at 50% 20%, rgba(247, 240, 227, .12) 0%, rgba(247, 240, 227, 0) 62%), var(--color-primary);
}
.photo-placeholder i { font-size: 1.75rem; opacity: .85; color: var(--color-accent); }
.photo-placeholder span {
    padding-inline: .75rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    opacity: .95;
}

.photo-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-portrait { aspect-ratio: 4 / 5; }
.rounded { border-radius: 6px; overflow: hidden; }
.rounded-lg { border-radius: var(--radius-lg); overflow: hidden; }

/* A photo with a soft tile frame offset behind it — the picture propped
   against the wall. */
.framed-photo { position: relative; }
.framed-photo::before {
    content: "";
    position: absolute;
    inset: 1.5rem -1.5rem -1.5rem 1.5rem;
    border: 1px solid var(--color-tile);
    border-radius: 6px;
    opacity: .5;
    z-index: 0;
}
.framed-photo > * { position: relative; z-index: 1; }
@media (max-width: 700px) {
    .framed-photo::before { display: none; }
}

/* ---------- Experiences (verandah windows) ----------
   Photo windows onto Jaffna, each with a small lamp badge on the sill. */
.experience-card { display: flex; flex-direction: column; text-align: center; }

.experience-media-frame { position: relative; }
.experience-media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}
.experience-media .photo-cover, .experience-media .photo-placeholder { transition: transform .6s var(--ease); }
.experience-card:hover .photo-cover, .experience-card:hover .photo-placeholder { transform: scale(1.06); }
.experience-media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-soft); }
.experience-icon {
    position: absolute;
    left: 50%;
    bottom: -1.4rem;
    transform: translateX(-50%);
    z-index: 2;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-wall);
    color: var(--color-accent-dark);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}
.experience-card h3 { margin-top: 2.35rem; font-family: var(--font-sans); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.experience-card p { margin-top: .5rem; font-size: .84rem; color: var(--color-text-muted); }

/* ---------- Guestbook (reviews) ----------
   Signed pages of a ledger, not floating cards: a lined head rule, the quote
   in the house serif, and the guest's initials like a signature. */
.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.1rem 1.7rem 1.7rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.review-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-tile);
}
.review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.review-quote-mark {
    position: absolute;
    top: 1rem;
    left: 1.4rem;
    font-family: var(--font-serif);
    font-size: 3.4rem;
    line-height: 1;
    color: var(--color-accent);
    opacity: .3;
}
.review-stars { color: var(--color-accent); font-size: .78rem; letter-spacing: .18rem; }
.review-card p { position: relative; color: var(--color-text); font-size: .94rem; }
.review-meta { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.review-avatar {
    width: 2.5rem;
    height: 2.5rem;
    padding-top: .15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-accent-dark);
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.review-name { font-weight: 700; font-size: .88rem; line-height: 1.2; }
.review-source { font-size: .72rem; color: var(--color-text-muted); }

/* ---------- Sliders (guest reviews, Your Days in Jaffna) ----------
   A native horizontal scroll-snap track rather than a JS carousel plugin —
   touch swipe already works on it for free. app.js layers autoplay on top
   (paused the moment a pointer or focus lands on the slider) and the two
   arrow buttons give an explicit, always-visible manual control. */
.slider { position: relative; }
.slider-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: .3rem 1rem;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-item { scroll-snap-align: start; flex: 0 0 auto; }
.experience-slider-track .slider-item { width: min(280px, 78vw); }
.review-slider-track .slider-item { width: min(360px, 85vw); }

.slider-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 3;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.slider-btn:hover { background: var(--color-bg-alt); transform: translateY(-50%) scale(1.07); }
.slider-btn-prev { left: -.9rem; }
.slider-btn-next { right: -.9rem; }
@media (max-width: 900px) {
    .slider-btn { width: 2.2rem; height: 2.2rem; }
    .slider-btn-prev { left: -.3rem; }
    .slider-btn-next { right: -.3rem; }
}
@media (max-width: 560px) {
    /* Touch swipe already covers mobile — arrows this close to the cards'
       own edge would sit on top of the content instead of beside it. */
    .slider-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .slider-track { scroll-behavior: auto; }
}

/* ---------- Photographic bands (courtyard wall, closing CTA) ---------- */
.photo-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-ink);
    color: #fff;
    padding-block: 5rem 2.5rem;
}
.photo-band > .container, .photo-band > .container-wide { position: relative; z-index: 2; }
.photo-band-media {
    position: absolute;
    inset: -10% 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform;
}
.photo-band-media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-band); }
.photo-band-media-rating { background-image: url("../imgs/room02.jpg"); }
.photo-band-media-cta { background-image: url("../imgs/outdoor.jpg"); }
.photo-band h2 { color: #fff; font-size: clamp(1.9rem, 3.5vw, 2.7rem); }
.photo-band p { color: rgba(255, 255, 255, .84); }
@media (prefers-reduced-motion: reduce) {
    .photo-band-media { inset: 0; transform: none !important; }
}

/* The rating wall: the score cut as a gilded figure, the pull-quote engraved
   beside it — proof the guests actually wrote, not a dashboard hero-metric. */
.rating-band { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .rating-band { grid-template-columns: auto 1fr; gap: 4rem; } }
.rating-figure {
    font-family: var(--font-serif);
    font-size: clamp(3.6rem, 9vw, 5.5rem);
    font-weight: 400;
    line-height: 1;
    color: var(--color-accent);
}
.rating-caption {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .78);
    margin-top: .6rem;
}
.rating-caption::after { content: ""; width: 2rem; height: 2px; background: var(--color-tile); }
.rating-quote { font-family: var(--font-serif); font-size: clamp(1.3rem, 2.7vw, 1.9rem); font-weight: 400; line-height: 1.35; color: #fff; }
.rating-attribution { margin-top: 1.1rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: rgba(255, 255, 255, .7); }
.rating-attribution strong { color: var(--color-accent); font-weight: 700; }

/* ---------- Panels (contained sections) ---------- */
.panel { border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 3rem); position: relative; overflow: hidden; }
.panel-dark { background: radial-gradient(140% 160% at 100% 0%, #2c5a4a 0%, var(--color-ink) 68%); color: #fff; }
.panel-sand { background: linear-gradient(135deg, #fdf9ef, #f3e6c8); border: 1px solid var(--color-warning-border); }
.panel-outline { border: 1px solid var(--color-border); background: var(--color-bg); box-shadow: var(--shadow-sm); }

/* ---------- Offer banner ---------- */
.offer-banner .kicker { font-family: var(--font-sans); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; color: var(--color-accent-dark); }
.offer-banner .kicker i { margin-right: .4rem; }
.offer-banner h3 { font-size: 1.45rem; margin-top: .45rem; color: var(--color-ink); }
.offer-banner p { margin-top: .5rem; font-size: .9rem; color: var(--color-text-muted); max-width: 38em; }

/* ---------- Room detail page ---------- */
.room-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: .75rem; }
.room-gallery-main { grid-row: span 2; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
.room-gallery-side { aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; }
@media (max-width: 600px) {
    .room-gallery { grid-template-columns: 1fr; }
    .room-gallery-main { grid-row: auto; aspect-ratio: 16 / 9; }
}

.room-layout { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
    .room-layout { grid-template-columns: 1.9fr 1fr; }
}

.room-aside { position: sticky; top: calc(var(--nav-height) + 1.5rem); }
@media (max-width: 899px) {
    .room-aside { position: static; }
}

.contact-details > div + div { margin-top: 1.5rem; }
.detail-row { display: flex; gap: 1rem; align-items: flex-start; }
.detail-row .icon-badge { flex-shrink: 0; }

.map-embed { border: 1px solid var(--color-border); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; box-shadow: var(--shadow-sm); }
.map-embed iframe { width: 100%; height: 100%; }
@media (min-width: 900px) { .map-embed { aspect-ratio: auto; min-height: 420px; } }

.room-facts {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    padding: 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-alt);
}
.room-facts::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
}
@media (min-width: 600px) {
    .room-facts { grid-template-columns: repeat(3, 1fr); }
}
.room-facts dt { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--color-text-muted); }
.room-facts dt i { margin-right: .4rem; color: var(--color-accent-dark); }
.room-facts dd { margin-top: .35rem; font-weight: 700; }

.amenity-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; font-size: .875rem; }
.amenity-list li { display: flex; align-items: center; gap: .65rem; }
.amenity-list li i { color: var(--color-accent-dark); font-size: .9em; }
@media (min-width: 600px) {
    .amenity-list { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Gallery ---------- */
.gallery-tile { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--color-border); }
.gallery-tile .photo-cover, .gallery-tile .photo-placeholder { transition: transform .6s var(--ease); }
.gallery-tile:hover .photo-cover, .gallery-tile:hover .photo-placeholder { transform: scale(1.07); }
/* ---------- Interactive booking wizard ---------- */
.booking-wizard { position: relative; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.35rem, 3vw, 2.25rem); }
.booking-wizard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-primary); }

/* Three fixed stops on a line, not stretchy pills — a shape that holds up
   at any width instead of one tab quietly losing its label on a phone. */
.wizard-steps { display: flex; align-items: flex-start; margin-bottom: 2.25rem; }
.wizard-step-tab {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    color: var(--color-text-faint);
    text-align: center;
    transition: color .25s ease;
}
/* The connecting line: laid behind the circle (z-index 0) on every tab but
   the first, running from the previous circle's centre to this one's. */
.wizard-step-tab:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.wizard-step-tab.is-active::before,
.wizard-step-tab.is-done::before { background: var(--color-accent); }
.wizard-step-circle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    color: var(--color-text-faint);
    font-family: var(--font-serif);
    font-size: .85rem;
    flex-shrink: 0;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
/* Fixed dark text, no background — the active/done colour treatment below
   is for the circle only, so the label underneath always stays legible
   instead of turning white on nothing. */
.wizard-step-tab-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text);
}
.wizard-step-tab.is-active .wizard-step-circle { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.wizard-step-tab.is-done { color: var(--color-text); }
.wizard-step-tab.is-done .wizard-step-circle { background: var(--color-accent); border-color: var(--color-accent); color: #241a05; }

@media (max-width: 460px) {
    .wizard-step-circle { width: 1.9rem; height: 1.9rem; font-size: .78rem; }
    .wizard-step-tab-label { font-size: .58rem; letter-spacing: .04em; }
    .wizard-step-tab:not(:first-child)::before { top: .95rem; }
}

.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; animation: wizard-fade .28s ease; }
@keyframes wizard-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Room status grid ---------- */
.search-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .9rem 1.15rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-alt);
}
.search-summary[hidden] { display: none; }
.search-summary-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .85rem; font-weight: 700; }
.search-summary-facts i { color: var(--color-accent-dark); margin-right: .3rem; }

.room-status-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.5rem; font-size: .75rem; font-weight: 700; color: var(--color-text-muted); }
.room-status-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.room-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 4px; }
.room-swatch.is-available, .room-status-square.is-available { background: var(--color-room-available-bg); border: 1px solid var(--color-room-available-border); }
.room-swatch.is-processing, .room-status-square.is-processing { background: var(--color-room-processing-bg); border: 1px solid var(--color-room-processing-border); }
.room-swatch.is-booked, .room-status-square.is-booked { background: var(--color-room-booked-bg); border: 1px solid var(--color-room-booked-border); }

.room-status-group + .room-status-group { margin-top: 1.75rem; }
.room-status-group-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; color: var(--color-text-muted); margin-bottom: .75rem; }
.room-status-grid { display: flex; flex-wrap: wrap; gap: .65rem; }

.room-status-square {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    font: inherit;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.room-status-square .room-status-number { font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; color: #fff; }
.room-status-square .room-status-price { font-size: .72rem; font-weight: 600; color: rgba(255, 255, 255, .8); }
.room-status-square.is-available:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.room-status-square.is-available.is-suggested { border-color: var(--color-accent-dark); }
.room-status-square.is-processing,
.room-status-square.is-booked {
    cursor: not-allowed;
    opacity: .9;
}
.room-swatch.is-selected { background: var(--color-accent); border: 1px solid var(--color-accent-dark); }
.room-status-square.is-selected {
    background: var(--color-accent);
    border-color: var(--color-accent-dark);
}
.room-status-square.is-selected .room-status-number,
.room-status-square.is-selected .room-status-price {
    color: var(--color-ink);
}

/* ---------- Room type picker ---------- */
.room-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.room-type-card {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem;
    background: var(--color-bg);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.room-type-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-primary); }
.room-type-card.is-selected { border-color: var(--color-accent-dark); }
.room-type-card.is-selected::before { background: var(--color-accent); }
.room-type-card.is-suggested { border-color: var(--color-accent-dark); }
.room-type-card.is-soldout { opacity: .65; }
.room-type-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-family: var(--font-serif); }
.room-type-card-price { font-size: .8rem; font-weight: 700; color: var(--color-accent-dark); white-space: nowrap; }
.room-type-card-meta { margin-top: .35rem; }
.room-type-card-controls { display: flex; align-items: center; margin-top: .85rem; }

.room-type-stepper {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
    padding: .2rem;
}
.room-type-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-primary);
    font-size: .8rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.room-type-stepper-btn:hover:not(.is-disabled-look) { background: var(--color-accent); color: #241a05; transform: translateY(-1px); }
.room-type-stepper-btn.is-disabled-look { opacity: .4; cursor: not-allowed; box-shadow: none; color: var(--color-text-faint); }
.room-type-stepper-count {
    min-width: 2.4rem;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-ink);
}
.room-type-card-subtotal {
    margin-top: .65rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}
.room-type-card-subtotal[hidden] { display: none; }

.combo-summary {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.1rem;
    border-radius: 4px;
    font-size: .85rem;
    font-weight: 700;
    background: var(--color-bg-alt);
    color: var(--color-text);
    margin-bottom: 1.5rem;
}
.combo-summary[hidden] { display: none; }
.combo-summary.is-complete { background: var(--color-success-bg); color: var(--color-success-text); }
.combo-summary.is-error { background: var(--color-error-bg); color: var(--color-error-text); }

/* ---------- Toasts ---------- */
.toast-container {
    position: fixed;
    z-index: 90;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: .6rem;
    width: min(92vw, 26rem);
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1.15rem;
    border-radius: 4px;
    background: var(--color-ink);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 16px 32px -12px rgba(23, 32, 25, .5);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    pointer-events: auto;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-leaving { opacity: 0; transform: translateY(-6px); }
.toast i { flex: none; color: var(--color-accent); }
.toast.is-error { background: var(--color-error-text); }
.toast.is-error i { color: #fff; }
.toast.is-info { background: var(--color-primary); }
.toast.is-info i { color: var(--color-accent); }
@media (max-width: 640px) {
    .toast-container { width: calc(100vw - 2rem); bottom: 1rem; }
}

.pricing-summary {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-primary-light);
}
.pricing-summary[hidden] { display: none; }
.pricing-summary-title {
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--color-primary);
}
.pricing-summary-title i { margin-right: .4rem; color: var(--color-accent-dark); }
.pricing-summary-lines { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.pricing-summary-lines li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem 1rem;
    font-size: .85rem;
    color: var(--color-text);
}
.pricing-summary-lines li > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; min-width: 0; flex: 1 1 auto; }
.pricing-summary-lines li strong { font-family: var(--font-serif); color: var(--color-primary); white-space: nowrap; }
.pricing-summary-amount {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: .4rem;
    margin-left: auto;
}
.pricing-summary-original {
    color: var(--color-text-muted);
    text-decoration: line-through;
    opacity: .7;
    font-size: .82rem;
    white-space: nowrap;
}
.pricing-summary-offer-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-sans);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.pricing-summary-savings {
    margin-top: .6rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-accent-dark);
}
.pricing-summary-savings[hidden] { display: none; }
.pricing-summary-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem 1rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(35, 89, 75, .2);
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-primary);
}
.pricing-summary-total strong { font-family: var(--font-serif); font-size: 1.25rem; white-space: nowrap; }
.pricing-summary-note { margin-top: .5rem; }

/* ---------- Hold banner ---------- */
.hold-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    background: var(--color-primary-light);
    border: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.hold-banner-room { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--color-primary); }
.hold-banner-dates { font-size: .8rem; color: var(--color-text-muted); margin-top: .2rem; }
.hold-banner-timer {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-accent-dark);
    font-variant-numeric: tabular-nums;
}
.hold-banner.is-expiring .hold-banner-timer { color: var(--color-error-text); }

.availability-status {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.1rem;
    border-radius: 4px;
    font-size: .85rem;
    font-weight: 700;
}
.availability-status[hidden] {
    display: none;
}
.availability-status.is-checking { background: var(--color-bg-alt); color: var(--color-text-muted); }
.availability-status.is-available { background: var(--color-success-bg); color: var(--color-success-text); }
.availability-status.is-unavailable { background: var(--color-error-bg); color: var(--color-error-text); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1.35rem; }
.form-group label { display: block; margin-bottom: .45rem; font-family: var(--font-sans); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.form-group label i { margin-right: .4rem; color: var(--color-accent-dark); }
.hint { color: var(--color-text-faint); font-weight: 500; text-transform: none; letter-spacing: 0; }

.form-group-narrow { max-width: 12rem; }

.form-control {
    width: 100%;
    padding: .78rem .95rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-alt);
    font-size: .92rem;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg);
    box-shadow: 0 0 0 4px rgba(35, 89, 75, .13);
}
textarea.form-control { resize: vertical; }

.form-row { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
    .form-row-2 { grid-template-columns: 1fr 1fr; }
    .form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.form-row[hidden] { display: none; }

.form-group-split { display: flex; gap: .5rem; }
.form-group-split .form-control { min-width: 0; }
.form-group-split input[type="time"] { flex: 0 0 7.2rem; }
@media (max-width: 420px) {
    .form-group-split { flex-direction: column; }
    .form-group-split input[type="time"] { flex: 1; }
}

.field-with-action { position: relative; }
.field-with-action .form-control { padding-right: 3rem; }
.field-action {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, background-color .15s ease;
}
.field-action:hover { color: var(--color-primary); background: var(--color-primary-light); }

/* ---------- Alerts ---------- */
.alert { padding: 1rem 1.25rem; font-size: .875rem; }
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); border-bottom: 1px solid var(--color-success-border); }
.alert-error { background: var(--color-error-bg); color: var(--color-error-text); border-bottom: 1px solid var(--color-error-border); }
.alert-error ul { margin-top: .35rem; padding-left: 1.1rem; list-style: disc; }
.alert-note {
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-radius: 6px;
    font-size: .875rem;
}

/* ---------- FAQ accordion ---------- */
.faq-item {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.15rem 1.35rem;
    background: var(--color-bg);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.faq-item + .faq-item { margin-top: .7rem; }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .icon-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-accent-dark);
    transition: transform .3s var(--ease), background-color .3s ease, color .3s ease;
    flex-shrink: 0;
    font-size: .7rem;
}
.faq-item[open] .icon-plus { transform: rotate(135deg); background: var(--color-accent); color: #241a05; }
.faq-item p { margin-top: .9rem; font-size: .9rem; color: var(--color-text-muted); }

/* ---------- Content / legal pages ---------- */
.content-block + .content-block { margin-top: 2rem; }
.content-block h2 { font-size: 1.25rem; }
.content-block p, .content-block ul { margin-top: .55rem; font-size: .9rem; color: var(--color-text-muted); line-height: 1.8; }
.content-block ul { list-style: disc; padding-left: 1.25rem; }
.content-block ul li + li { margin-top: .3rem; }

/* ---------- Footer (the courtyard at night) ---------- */
.site-footer { background: var(--color-ink); color: rgba(255, 255, 255, .68); }
.footer-grid {
    display: grid;
    gap: 2.75rem;
    padding-block: 4.5rem 3rem;
    grid-template-columns: 1fr;
}
@media (min-width: 700px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
    .footer-grid { grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; gap: 3rem; }
}

.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-brand-mark {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-accent);
    font-size: .95rem;
    flex-shrink: 0;
}
.footer-brand-name { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400; color: #fff; line-height: 1.2; text-transform: uppercase; letter-spacing: .05em; }
.footer-brand-sub { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .28em; color: var(--color-accent); }
.footer-blurb { margin-top: 1.25rem; font-size: .875rem; max-width: 24rem; }

.footer-heading {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #fff;
}
.footer-links { margin-top: 1.1rem; font-size: .875rem; }
.footer-links li + li { margin-top: .65rem; }
.footer-links a { transition: color .2s ease, transform .2s ease; display: inline-block; }
.footer-links a:hover { color: var(--color-accent); transform: translateX(.25rem); }
.footer-links i { color: var(--color-accent); margin-right: .6rem; width: 1rem; text-align: center; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .09); }
.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.35rem;
    font-size: .74rem;
    color: rgba(255, 255, 255, .45);
}
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom-links a:hover { color: var(--color-accent); }

.social-links { display: flex; gap: .6rem; margin-top: 1.25rem; }
.social-links a {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.social-links a:hover { background: var(--color-accent); color: var(--color-ink); transform: translateY(-3px); }

.contact-icon-list { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.1rem; font-size: .875rem; }
.contact-icon-list li { display: flex; align-items: flex-start; gap: .7rem; }
.contact-icon-list i { width: 1.1rem; text-align: center; color: var(--color-accent); margin-top: .25rem; }
.contact-icon-list a:hover { color: var(--color-accent); }

.footer-hours li { display: flex; flex-direction: column; }
.footer-hours li + li { margin-top: .8rem; }
.footer-hours dt { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #fff; }
.footer-hours dd { font-size: .84rem; }

/* ---------- Staff login ---------- */
.auth-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 900px) {
    .auth-shell { grid-template-columns: 1.1fr 1fr; }
}

.auth-visual {
    position: relative;
    isolation: isolate;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    color: #fff;
    background-color: var(--color-ink);
    overflow: hidden;
}
@media (min-width: 900px) { .auth-visual { display: flex; } }
.auth-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../imgs/outdoor.jpg");
    background-size: cover;
    background-position: center;
    z-index: -2;
}
.auth-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(23, 32, 25, .84), rgba(35, 89, 75, .74));
    z-index: -1;
}
.auth-visual-brand { display: flex; align-items: center; gap: .75rem; }
.auth-visual-brand .footer-brand-mark { font-size: inherit; }
.auth-visual h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); color: #fff; max-width: 20rem; }
.auth-visual p { margin-top: 1rem; color: rgba(255, 255, 255, .78); font-size: .92rem; max-width: 24rem; }
.auth-visual-foot { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: rgba(255, 255, 255, .55); }

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--color-bg);
    background-image:
        repeating-linear-gradient(45deg, rgba(31, 89, 75, .04) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(-45deg, rgba(31, 89, 75, .04) 0 1px, transparent 1px 14px);
}
.auth-card { width: 100%; max-width: 26rem; }
.auth-card-head { margin-bottom: 2rem; }
.auth-card-head h1 { font-size: 1.85rem; margin-top: .6rem; }
.auth-card-head p { margin-top: .5rem; color: var(--color-text-muted); font-size: .9rem; }
.auth-mobile-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 2rem; }
@media (min-width: 900px) { .auth-mobile-brand { display: none; } }
.auth-foot { margin-top: 1.75rem; text-align: center; font-size: .78rem; color: var(--color-text-muted); }
.auth-foot a { color: var(--color-primary); font-weight: 700; }

/* ---------- Misc ---------- */
.badge {
    display: inline-block;
    padding: .35rem .8rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.list-plain li { padding: .9rem 1.1rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-tile); border-radius: 4px; background: var(--color-bg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; font-size: .85rem; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.list-plain li > span { min-width: 0; }
.list-plain li:hover { border-color: var(--color-accent); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.list-plain li + li { margin-top: .55rem; }
.list-plain li i { color: var(--color-accent-dark); margin-right: .65rem; }

/* ---------- Icon helpers ---------- */
.alert-note i { color: var(--color-warning-text); margin-right: .5rem; }
.link-arrow { display: inline-flex; align-items: center; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.link-arrow i { margin-left: .5rem; font-size: .8em; transition: transform .25s var(--ease); }
.link-arrow:hover i { transform: translateX(4px); }
.link-arrow.link-arrow-left i { margin-left: 0; margin-right: .5rem; }
.link-arrow.link-arrow-left:hover i { transform: translateX(-4px); }

/* ---------- "Coming soon" preview page ---------- */
.preview-shell {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: radial-gradient(circle at 50% 0%, var(--color-ink-soft) 0%, var(--color-ink) 70%);
    text-align: center;
}
.preview-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
}

.preview-floaters { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.preview-floater { position: absolute; color: var(--color-accent); opacity: .24; animation: preview-float ease-in-out infinite; }
.preview-floater.is-teal { color: var(--color-teal); }
.preview-floater.is-white { color: #fff; opacity: .16; }

.preview-floater-1 { top: 13%; left: 8%; font-size: 2.1rem; animation-duration: 9s; }
.preview-floater-2 { top: 20%; right: 10%; font-size: 1.5rem; animation-duration: 7s; animation-delay: .6s; }
.preview-floater-3 { top: 66%; left: 12%; font-size: 1.7rem; animation-duration: 10s; animation-delay: 1.2s; }
.preview-floater-4 { bottom: 12%; right: 9%; font-size: 2.3rem; animation-duration: 8.5s; animation-delay: .3s; }
.preview-floater-5 { top: 44%; left: 5%; font-size: 1.2rem; animation-duration: 6.5s; animation-delay: 1.8s; }
.preview-floater-6 { top: 9%; left: 47%; font-size: 1.3rem; animation-duration: 7.5s; animation-delay: 2.2s; }
.preview-floater-7 { bottom: 18%; left: 42%; font-size: 1.6rem; animation-duration: 9.5s; animation-delay: .9s; }
.preview-floater-8 { top: 58%; right: 15%; font-size: 1.9rem; animation-duration: 8s; animation-delay: 1.5s; }

@keyframes preview-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-22px) rotate(8deg); }
}

@media (max-width: 640px) {
    .preview-floater-5, .preview-floater-6, .preview-floater-7 { display: none; }
}

.preview-card {
    position: relative;
    z-index: 1;
    max-width: 30rem;
    animation: preview-card-in .8s var(--ease-out) both;
}
@keyframes preview-card-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.preview-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .9rem;
    border-radius: var(--radius-pill);
    background: rgba(208, 146, 47, .14);
    border: 1px solid rgba(208, 146, 47, .4);
    color: var(--color-accent);
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.preview-mark {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    margin-inline: auto;
    margin-top: 1.75rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-accent);
    font-size: 1.4rem;
}
.preview-mark::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 10px;
    border: 1px solid rgba(208, 146, 47, .35);
    animation: preview-pulse 2.6s ease-out infinite;
}
@keyframes preview-pulse {
    0% { transform: scale(.85); opacity: .8; }
    100% { transform: scale(1.35); opacity: 0; }
}

.preview-eyebrow { display: block; margin-top: 1.25rem; color: var(--color-accent); }
.preview-card h1 {
    margin-top: .75rem;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    color: #fff;
}
.preview-card p { margin-top: 1rem; color: rgba(255, 255, 255, .74); font-size: .95rem; }

.preview-tester-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 2.25rem;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .9);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}
.preview-tester-link:hover { color: var(--color-accent); border-color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
    .preview-floater, .preview-mark::before, .preview-card { animation: none !important; }
}

/* ---------- Modal ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(23, 32, 25, .62);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
.modal {
    width: 100%;
    max-width: 24rem;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 2rem;
    text-align: left;
    position: relative;
    transform: scale(.96) translateY(10px);
    transition: transform .25s var(--ease-out);
}
.modal-backdrop.is-open .modal { transform: scale(1) translateY(0); }
.modal-mark {
    width: 2.85rem;
    height: 2.85rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 1.05rem;
}
.modal-close {
    position: absolute;
    top: .9rem;
    right: .9rem;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, background-color .15s ease;
}
.modal-close:hover { color: var(--color-text); background: var(--color-bg-alt); }
.modal h2 { font-size: 1.2rem; }
.modal p { margin-top: .5rem; color: var(--color-text-muted); font-size: .85rem; }
.modal-alert { border-radius: 4px; border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .modal, .modal-backdrop { transition: none; }
}

/* ---------- WhatsApp bubble ---------- */
.whatsapp-bubble {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 250;
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: var(--shadow-lg);
    transition: transform .2s var(--ease-out), box-shadow .2s ease;
    animation: whatsapp-bubble-in .4s var(--ease-out);
}
.whatsapp-bubble:hover,
.whatsapp-bubble:focus-visible {
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-xl);
}

@keyframes whatsapp-bubble-in {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 640px) {
    .whatsapp-bubble {
        right: 1rem;
        bottom: 1rem;
        width: 3.1rem;
        height: 3.1rem;
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-bubble { animation: none; transition: none; }
}

/* ---------- The lit lamp ----------
   A warm threshold glow used for the closing CTA section and the footer's
   welcome rule — the single authored moment of light on the whole page. */
.lamp-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #f6d188 0%, var(--color-accent) 62%, var(--color-accent-dark) 100%);
    color: #241a05;
    font-size: 1.3rem;
    box-shadow: 0 8px 22px -12px rgba(23, 32, 25, .4);
    margin-bottom: 1.25rem;
}