:root {
    --gold: #ffc627;
    --gold-deep: #f5b700;
    --gold-soft: #f8e08e;
    --gold-pale: #fbeec2;
    --cream: #fdf5e7;
    --ink: #000000;
    --charcoal: #2b2b2b;
    --stone: #a99c9c;
    --stone-dark: #7d7373;
    --grey-muted: #6e6e6e;
    --grey-back: #6f6f6f;
    --red-alert: #d81f26;
    --gold-rgb: 255, 198, 39;
    --ink-rgb: 0, 0, 0;
    --stone-rgb: 169, 156, 156;
    --white-rgb: 255, 255, 255;

    /* Booking steps: a quiet warm neutral, leaving gold to mark the current step
     * and the button that moves forward. */
    --rsv-canvas: #f6f4ef;
    --rsv-tint: #f8f6f1;
    --rsv-line: #e8e3d8;
    --rsv-radius: 10px;
    --rsv-past: #f1eee8;
    --rsv-blocked: #d6cfc2;





    --font-ust: 'Poppins', sans-serif;
    --font-serif: var(--font-ust);
    --font-sans: var(--font-ust);




    --bs-body-bg: var(--cream);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--font-serif);
    --bs-primary: var(--gold);
    --bs-primary-rgb: var(--gold-rgb);

    
    

    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
}






.form-control,
.form-select {
    background-color: #fff;
    border-color: var(--ink);
    border-radius: 0;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gold-deep);
    box-shadow: none;
}

.btn:focus,
.btn:focus-visible {
    box-shadow: none;
}

.form-check-input {
    /* Bootstrap's check box inherits --bs-body-bg too, so it needs the same
     * white as the text fields above. */
    background-color: #fff;
    border: 1px solid var(--ink);
}

.form-check-input:checked {
    background-color: var(--ink);
    border-color: var(--ink);
}

.form-check-input:focus {
    border-color: var(--ink);
    box-shadow: none;
}

/* ------------------------------------------------------------- base */
img {
    max-width: 100%;
}

/* A thin gold bar on black, so the page edge carries the brand instead of the
 * default grey. Firefox takes the two-value shorthand; WebKit and Chromium
 * need the pseudo-elements, and ignore scrollbar-width entirely. The swipe
 * rails hide their own scrollbars further down and are unaffected. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--ink);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ink);
}

::-webkit-scrollbar-thumb {
    background: var(--gold);
    border: 2px solid var(--ink);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-deep);
}

::-webkit-scrollbar-corner {
    background: var(--ink);
}

/* ------------------------------------------------------------ helpers */
.ff-sans {
    font-family: var(--font-sans);
}

.ff-serif {
    font-family: var(--font-serif);
}

.cursor-pointer {
    cursor: pointer;
}

/* Custom-colour utilities. The old build generated a full set from a Sass
 * colour map; only the ones the markup actually uses are written out here.
 * (The generated .hover-bg-* set went with it — nothing referenced them.) */
.text-gold {
    color: var(--gold) !important;
}

.text-ink {
    color: var(--ink) !important;
}

.text-muted-grey {
    color: var(--grey-muted) !important;
}

.text-alert-red {
    color: var(--red-alert) !important;
}

.bg-gold {
    background-color: var(--gold) !important;
}

.bg-ink {
    background-color: var(--ink) !important;
}

.bg-charcoal {
    background-color: var(--charcoal) !important;
}

.bg-stone {
    background-color: var(--stone) !important;
}

.bg-stone-dark {
    background-color: var(--stone-dark) !important;
}

.border-stone {
    border-color: var(--stone) !important;
}

/* --------------------------------------------------------------- shell
 * Reading indicator: a black rule that fills gold as the page is scrolled. */
.top-rule {
    position: sticky;
    top: 0;
    z-index: 40; /* above the nav, which sits at 30 */
    height: 6px;
    background-color: var(--ink);
}

.top-rule__fill {
    height: 100%;
    background-color: var(--gold);
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left center;
}

.page-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--cream);
    overflow-x: clip; /* backstop: nothing should widen the page on a phone */
}

.page-body {
    position: relative;
    flex: 1 1 auto;
}

.shell-wide {
    max-width: 1440px;
    margin-inline: auto;
}

/* ----------------------------------------------------------- top nav */
.site-nav {
    position: relative;
    z-index: 30;
    background-color: var(--ink);
}

.site-nav--overlay {
    position: absolute;
    inset: 0 0 auto 0;
    background-color: transparent;
}

/* The reservation flow keeps the bar low so the stepper leads the page. */
.site-nav--compact > div {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.site-nav--compact .nav-1611--back {
    font-size: 0.9375rem;
}

/* Booking steps keep the site's black bar: the logo reads in its own colours,
 * and "Back to Home" takes the usual gold hover from .nav-1611. */

.nav-1611 {
    position: relative;
    display: inline-block;
    padding-bottom: 0.35rem;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.nav-1611::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.nav-1611:hover {
    color: var(--gold);
}

.nav-1611:hover::after {
    opacity: 0.6;
}

.nav-1611.is-active::after {
    opacity: 1;
}

/* Reservation is the primary action, so it carries the gold block instead of
 * sitting as a third equal link. */
.nav-1611--cta {
    padding: 0.5rem 1.5rem;
    background-color: var(--gold);
    color: var(--ink);
    letter-spacing: 0.06em;
}

.nav-1611--cta::after {
    display: none;
}

.nav-1611--cta:hover {
    background-color: var(--gold-deep);
    color: var(--ink);
}

.nav-1611--cta.is-active {
    box-shadow: inset 0 0 0 2px var(--ink);
}

.nav-1611--back {
    padding-bottom: 0;
}

.nav-1611--back::after {
    display: none;
}

.nav-mobile-cta {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem !important;
    background-color: var(--gold);
    color: var(--ink);
    text-align: center;
}

/* --------------------------------------------------------------- logo */
.logo-word {
    line-height: 1;
}

.logo-word .logo-hotel {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.logo-word .logo-num {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1;
}

.logo-word .logo-sub {
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.16em;
}

.logo-sm .logo-hotel { font-size: 1.125rem; }
.logo-sm .logo-num { font-size: 1.5rem; }
.logo-sm .logo-sub { font-size: 0.375rem; }
.logo-sm .logo-mark { width: 2rem; height: 2rem; }

.logo-md .logo-hotel { font-size: 1.5rem; }
.logo-md .logo-num { font-size: 2.25rem; }
.logo-md .logo-sub { font-size: 0.4375rem; }
.logo-md .logo-mark { width: 2.75rem; height: 2.75rem; }

/* Real logo artwork: height is fixed per size, width follows the aspect ratio.
 * max-width keeps the wide lockups from crowding the nav on narrow screens. */
.logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.logo-img.logo-sm { height: 2.25rem; }  /* over the hero on Home and Rooms */
.logo-img.logo-md { height: 2.75rem; }  /* footer */
.logo-img.logo-lg { height: 4.5rem; }   /* solid navbar */

.ust-logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 3.5rem;
    object-fit: contain;
}

/* -------------------------------------------------------------- hero
 * --hero-image is supplied by HeroBackdrop so the URL picks up the app's base
 * path; it falls back to `none` and the teal-to-gold gradient shows instead.
 *
 * The photo already carries that colour treatment, so the top layer is only a
 * neutral scrim for text contrast — tinting again would muddy it. */
.hero-backdrop {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.34) 45%, rgba(0, 0, 0, 0.5) 100%),
        var(--hero-image, none),
        linear-gradient(100deg, #0d3b3b 0%, #1f5f4f 40%, #b9ad5c 100%);
}

.hero-home { height: 520px; }
.hero-rooms {
    height: clamp(30rem, 66vh, 40rem);
    animation: rooms-hero-zoom 2.4s ease-out both;
}

@keyframes rooms-hero-zoom {
    from { transform: scale(1.08); }
    to { transform: none; }
}

/* Rooms hero: photos stacked and cross-faded by app.js. The colours are only
 * seen on a slide whose photo has not been added yet. */
.hero-slides {
    position: relative;
    width: 100%;
    background-color: #0d0c09;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1.5rem;
    background: linear-gradient(100deg, #0d3b3b 0%, #1f5f4f 40%, #b9ad5c 100%);
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.hero-slide:nth-child(2) { background: linear-gradient(100deg, #1f2a44 0%, #3a4a6b 50%, #8a8fa8 100%); }
.hero-slide:nth-child(3) { background: linear-gradient(100deg, #3b1f12 0%, #6b4426 50%, #b98a4f 100%); }
.hero-slide:nth-child(4) { background: linear-gradient(100deg, #24301c 0%, #4d5f37 50%, #a3a56a 100%); }

.hero-slide.is-active {
    opacity: 1;
}

.hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Same scrim as .hero-backdrop, laid over the photo for text contrast. */
.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.34) 45%, rgba(0, 0, 0, 0.5) 100%);
}

.hero-slide__label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--white-rgb), 0.7);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem 0;
}

.hero-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.75rem;
}

.hero-title {
    max-width: 44rem;
    margin-bottom: 0;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hero-title--page {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    letter-spacing: -0.01em;
}

.hero-rule {
    display: block;
    width: 3.5rem;
    height: 3px;
    margin: 1.25rem auto 0;
    background-color: var(--gold);
}

.hero-sub {
    max-width: 34rem;
    margin: 1.25rem auto 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(var(--white-rgb), 0.92);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* Quick house facts under the Rooms page title, as frosted tiles. */
.hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: min(100%, 44rem);
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .hero-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hero-facts li {
    padding: 0.625rem 0.5rem;
    border: 1px solid rgba(var(--white-rgb), 0.2);
    border-radius: 10px;
    background-color: rgba(var(--ink-rgb), 0.35);
    backdrop-filter: blur(8px);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(var(--white-rgb), 0.88);
}

.hero-facts strong {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gold);
}

/* The lone call to action anchors the hero to the band below. */
.hero-cta {
    margin-top: 2rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.hero-link {
    margin-top: 0.5rem;
    padding-block: 0.75rem; /* a 44px target, with the underline kept close to the words */
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(var(--white-rgb), 0.5);
    text-underline-offset: 0.3em;
}

.hero-link:hover {
    color: var(--gold);
    text-decoration-color: var(--gold);
}

/* ------------------------------------------------------------ stepper
 * Distinct from the segmented-connector pattern common to booking wizards:
 * a single track runs behind the markers and fills with gold to show how far
 * you have got. Finished steps invert to solid black with a gold check.
 * Header band of the reservation card. */
.stepper-wrap {
    overflow-x: auto;
    padding: 1.5rem 1rem 1.25rem;
    background-color: #fff;
    border-bottom: 1px solid var(--rsv-line);
}

.stepper {
    --node-w: 108px;
    --marker: 42px;

    position: relative;
    display: flex;
    justify-content: space-between;
    min-width: 29rem; /* 4 nodes plus gaps; below this the wrap scrolls */
    max-width: 36rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .stepper {
        --marker: 50px;
    }
}

/* Unfilled track, spanning first marker centre to last. */
.stepper::before,
.stepper::after {
    content: '';
    position: absolute;
    top: calc(var(--marker) / 2 - 1px);
    left: calc(var(--node-w) / 2);
    height: 2px;
}

.stepper::before {
    right: calc(var(--node-w) / 2);
    background-color: var(--rsv-line);
}

/* Filled portion, driven by --stepper-progress (0 to 1) from the component. */
.stepper::after {
    width: calc((100% - var(--node-w)) * var(--stepper-progress, 0));
    background-color: var(--gold);
    transition: width 0.35s ease-out;
}

.stepper__item {
    flex: 0 0 var(--node-w);
}

.stepper__node {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

/* Completed steps go back to that step. */
.stepper__node--link {
    cursor: pointer;
}

.stepper__node--link:hover .stepper__marker {
    transform: translateY(-2px);
}

.stepper__node--link:hover .stepper__label {
    color: var(--ink);
}

.stepper__marker {
    position: relative; /* sits above the track */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--marker);
    height: var(--marker);
    margin-inline: auto;
    border-radius: 50%;
    border: 2px solid var(--rsv-line);
    background-color: #fff;
    transition:
        transform 0.15s ease-out,
        background-color 0.15s ease-out,
        border-color 0.15s ease-out;
}

.stepper__marker svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--stone);
}

@media (min-width: 768px) {
    .stepper__marker svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Done: inverted — solid black marker, gold check. */
.stepper__item--done .stepper__marker {
    border-color: var(--ink);
    background-color: var(--ink);
}

.stepper__item--done .stepper__marker svg {
    color: var(--gold);
}

/* Current: solid gold with a soft halo. */
.stepper__item--active .stepper__marker {
    border-color: var(--gold);
    background-color: var(--gold);
    box-shadow: 0 0 0 5px rgba(var(--gold-rgb), 0.22);
}

.stepper__item--active .stepper__marker svg {
    color: var(--ink);
}

.stepper__label {
    display: block;
    min-height: 2.5em; /* two lines, so all four markers stay level */
    margin-top: 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--grey-muted);
}

@media (min-width: 768px) {
    .stepper__label {
        font-size: 0.6875rem;
    }
}

.stepper__item--done .stepper__label {
    color: var(--ink);
}

.stepper__item--active .stepper__label {
    color: var(--ink);
}

/* ------------------------------------------------- reservation frame
 * Stepper bar and content share one surface, so the step rail reads as the
 * header of the panel it belongs to rather than floating above it. */
.booking-flow .page-shell {
    background-color: var(--rsv-canvas);
}

.reservation-shell {
    max-width: 1320px;
    margin-inline: auto;
    background-color: #fff;
    border: 1px solid var(--rsv-line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(var(--ink-rgb), 0.05);
    overflow: clip; /* unlike hidden, this leaves the sticky summary card working */
}

.reservation-frame {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem 1.25rem;
}

@media (min-width: 768px) {
    .reservation-frame {
        padding: 2.25rem 2.5rem 2.5rem;
    }
}

@media (min-width: 992px) {
    .reservation-frame {
        flex-direction: row;
        align-items: flex-start;
        gap: 2.5rem;
    }
}

.reservation-frame .reservation-panel {
    flex: 1 1 auto;
    min-width: 0;
}

/* The error page sits straight in the shell, with no frame to pad it. */
.reservation-shell > .reservation-panel {
    padding-inline: 1.5rem;
}

.reservation-heading {
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .reservation-heading {
        font-size: 1.3125rem;
    }
}

.reservation-intro {
    max-width: 30rem;
    margin: 0.75rem auto 0;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.6;
}

#confirm-button {
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Left-aligned on the steps, where the heading sits beside the summary card. */
.reservation-frame .reservation-heading {
    text-align: left;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
}

.reservation-frame .reservation-intro {
    max-width: 40rem;
    margin-left: 0;
    text-align: left;
    color: var(--grey-muted);
}

.reservation-shell .form-control,
.reservation-shell .form-select {
    border-color: var(--rsv-line);
    border-radius: 6px;
}

.reservation-shell .form-control:focus,
.reservation-shell .form-select:focus {
    border-color: var(--gold-deep);
}

/* A quiet way back: only the Next button should look like a button. */
.reservation-frame .btn-back {
    padding-left: 0;
    background-color: transparent;
    color: var(--grey-muted);
}

.reservation-frame .btn-back:hover,
.reservation-frame .btn-back:focus-visible,
.reservation-frame .btn-back:active {
    border-color: transparent;
    background-color: transparent;
    color: var(--ink);
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--grey-back);
    color: #fff;
    padding: 0.375rem 0.875rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.btn-back:hover {
    background-color: var(--charcoal);
    color: #fff;
}

/* The old build generated this variant from the Sass colour map, which is what
 * gave the button its gold border — most visible when it is disabled and the
 * fill drops to 40%, leaving a solid gold ring. Bootstrap 5.3 expresses a
 * variant as these custom properties, so they are written out here; the
 * declarations below them are the overrides the stylesheet always carried.
 * The shades are Bootstrap's own: 15% for hover, 20%/25% for active. */
.btn-gold {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: #d9a821;
    --bs-btn-hover-border-color: #cc9e1f;
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: #cc9e1f;
    --bs-btn-active-border-color: #bf951d;
    --bs-btn-disabled-color: var(--ink);
    --bs-btn-disabled-bg: var(--gold);
    --bs-btn-disabled-border-color: var(--gold);

    background-color: var(--gold);
    color: var(--ink);
    font-weight: 700;
}

.btn-gold:hover {
    background-color: var(--gold-deep);
    color: var(--ink);
}

.btn-gold:disabled {
    background-color: rgba(var(--gold-rgb), 0.4);
    color: var(--ink);
}

/* ------------------------------------------------------ booking rail */
.booking-summary {
    background-color: var(--ink);
    padding: 2rem 1.75rem;
    border-top: 3px solid var(--gold); /* ties the rail to the gold in the stepper */
}

@media (min-width: 992px) {
    .booking-summary {
        width: 430px;
        flex-shrink: 0;
    }
}

.booking-summary__title {
    border-bottom: 2px solid rgba(var(--white-rgb), 0.85);
    padding-bottom: 0.625rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
}

.booking-summary__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--white-rgb), 0.75);
}

.booking-summary__field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #fff;
    padding: 0.5rem 0.875rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.booking-summary__field.is-empty {
    color: rgba(var(--ink-rgb), 0.35);
    font-weight: 400;
}

/* Nights read as a small gold caption tucked under the two date fields. */
.stay-badge {
    margin: 0.625rem 0 0;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

.summary-count {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(var(--white-rgb), 0.55);
}

/* Empty state replaces the old flat grey slab: a dashed well with a hint. */
.booking-summary__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 150px;
    padding: 1.5rem 1.25rem;
    border: 1px dashed rgba(var(--white-rgb), 0.28);
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(var(--white-rgb), 0.5);
}

.booking-summary__empty-icon {
    width: 2rem;
    height: 2rem;
    color: rgba(var(--white-rgb), 0.35);
}

.booking-summary__rooms {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0.875rem;
    min-height: 150px;
    background-color: #fff;
}

.room-line {
    padding-block: 0.625rem;
}

.room-line + .room-line {
    border-top: 1px dashed rgba(var(--ink-rgb), 0.25);
}

.room-line__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink);
}

.room-line__price {
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--ink);
}

.room-line__meta {
    font-size: 0.6875rem;
    color: var(--grey-muted);
}

.room-line__remove {
    border: 0;
    background: none;
    padding: 0;
    font-size: 0.6875rem;
    color: var(--grey-muted);
    text-decoration: underline;
}

.room-line__remove:hover {
    color: var(--red-alert);
}

/* Total sits in its own banded block so the figure never collides with its label. */
.summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--white-rgb), 0.25);
}

.summary-total__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--white-rgb), 0.7);
}

.summary-total__note {
    margin: 0.5rem 0 0;
    text-align: right;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    color: rgba(var(--white-rgb), 0.55);
}

.summary-total__amount {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--gold);
}

/* ---------------------------------------------------------- calendar */
.calendar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--rsv-tint);
    border-radius: 8px 8px 0 0;
    padding: 0.625rem 1rem;
}

.calendar__head h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.calendar__head button {
    border: 0;
    background: none;
    color: var(--ink);
    padding: 0.25rem;
    line-height: 0;
}

.calendar__head button:hover {
    color: var(--gold-deep);
}

.calendar__head button.is-hidden {
    visibility: hidden;
}

.calendar__weekdays,
.calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar__weekdays {
    background-color: #fff;
    color: var(--grey-muted);
}

.calendar__weekdays span {
    padding-block: 0.375rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.calendar__cell {
    height: 46px;
    border: 1px solid #fff;
    background-color: #fafafa;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    text-align: right;
    vertical-align: top;
    padding: 0.25rem 0.375rem 0;
    color: var(--ink);
}

.calendar__cell:not(:disabled):hover {
    background-color: var(--gold-pale);
    cursor: pointer;
}

.calendar__cell--blank,
.calendar__cell--past {
    background-color: var(--rsv-past);
    color: rgba(var(--ink-rgb), 0.45);
}

.calendar__cell--blocked {
    background-color: var(--rsv-blocked);
    color: rgba(var(--ink-rgb), 0.6);
}

.calendar__cell--selected {
    background-color: var(--gold);
    color: var(--ink);
}

.calendar__cell:disabled {
    cursor: not-allowed;
}

/* Hovering an unavailable day names the cart rooms booked that night. A plain
 * title tooltip would not show on a disabled button in every browser. */
.calendar__cell[data-note] {
    position: relative;
}

.calendar__cell[data-note]:hover::after {
    content: attr(data-note);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    width: max-content;
    max-width: 14rem;
    padding: 0.375rem 0.625rem;
    background-color: var(--ink);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    pointer-events: none;
}

/* Edge columns: keep the tooltip inside the calendar. */
.calendar__grid > :nth-child(7n + 1)[data-note]:hover::after {
    left: 0;
    transform: none;
}

.calendar__grid > :nth-child(7n)[data-note]:hover::after {
    left: auto;
    right: 0;
    transform: none;
}

.legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    border-radius: 3px;
}

/* The swatches sit on the .bg-stone helpers; these keep them matching the cells. */
.legend-swatch.bg-stone {
    background-color: var(--rsv-past) !important;
}

.legend-swatch.bg-stone-dark {
    background-color: var(--rsv-blocked) !important;
}

/* ------------------------------------------------------ placeholders */
.placeholder-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--ink-rgb), 0.7);
    background-color: #fff;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--stone);
    text-align: center;
}

.placeholder-frame--dark {
    border-color: rgba(var(--white-rgb), 0.3);
}

/* Inside the booking steps a missing photo is a soft tile, not an outlined box. */
.reservation-shell .placeholder-frame {
    border: 0;
    border-radius: var(--rsv-radius);
    background-color: var(--rsv-tint);
    color: var(--stone-dark);
}

/* ------------------------------------------- room type cards + unit picker */
.room-type-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid var(--rsv-line);
    border-radius: var(--rsv-radius);
    transition:
        border-color 0.2s ease-out,
        box-shadow 0.2s ease-out;
}

.room-type-card:hover {
    border-color: #d8d1c2;
    box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.08);
}

.room-type-card:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
}

.room-type-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--rsv-tint);
}

.reservation-shell .room-type-card__media .room-photo,
.reservation-shell .room-type-card__media .placeholder-frame {
    height: 100%;
    border-radius: 0;
}

.room-type-card__media .room-photo {
    transition: transform 0.3s ease-out;
}

.room-type-card:hover .room-photo {
    transform: scale(1.03);
}

.room-type-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1rem 1.125rem;
}

.room-type-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.room-type-card__name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.room-type-card__price {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.room-type-card__price small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--grey-muted);
}

.room-type-card__meta {
    margin-top: 0.25rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--grey-muted);
}

.room-type-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.875rem;
}

.room-type-card__stock {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--grey-muted);
}

.room-type-card__stock::before {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background-color: #3f9a5a;
}

.room-type-card__stock.is-out {
    color: var(--red-alert);
}

.room-type-card__stock.is-out::before {
    background-color: var(--red-alert);
}

.room-type-card__cta {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.room-type-card__cta span {
    display: inline-block;
    transition: transform 0.2s ease-out;
}

.room-type-card:hover .room-type-card__cta span {
    transform: translateX(3px);
}

.type-facts {
    margin: 0;
}

.type-facts__row {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 0.5rem;
    padding: 0.4375rem 0;
    border-top: 1px solid var(--rsv-line);
}

.type-facts__row dt {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey-muted);
}

.type-facts__row dd {
    margin: 0;
    font-size: 0.75rem;
    color: var(--ink);
}

.unit-list__heading {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.unit-list__note {
    font-size: 0.75rem;
    color: var(--grey-muted);
    margin-bottom: 0.75rem;
}

.unit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .unit-list {
        grid-template-columns: 1fr 1fr;
    }
}

.unit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--rsv-line);
    border-radius: 8px;
}

.unit-row.is-occupied {
    background-color: var(--rsv-tint);
    color: var(--grey-muted);
}

.unit-row.is-added {
    border-color: var(--gold);
    background-color: rgba(var(--gold-rgb), 0.12);
}

.unit-row__number {
    font-size: 0.8125rem;
    font-weight: 700;
}

.unit-row__view {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    color: var(--grey-muted);
}

.unit-row__tag {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-muted);
}

.unit-row__tag.is-added {
    color: #2f7a43;
}

.room-photo {
    display: block;
    width: 100%;
    object-fit: cover;
    border: 1px solid rgba(var(--ink-rgb), 0.7);
}

.reservation-shell .room-photo {
    border: 0;
    border-radius: var(--rsv-radius);
}

/* Room-type rail beside the detail panel. The active type carries a gold frame
 * rather than a grey fill, so it still reads once real photography lands. */
.type-rail {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
}

@media (min-width: 768px) {
    .type-rail {
        flex-direction: column;
        overflow-x: visible;
    }
}

.type-thumb {
    flex: 0 0 auto;
    width: 132px;
    padding: 0;
    overflow: hidden;
    text-align: left;
    background-color: #fff;
    border: 1px solid var(--rsv-line);
    border-radius: 8px;
    transition:
        border-color 0.15s ease-out,
        box-shadow 0.15s ease-out;
}

@media (min-width: 768px) {
    .type-thumb {
        width: 100%;
    }
}

.type-thumb:hover {
    border-color: #d8d1c2;
}

.type-thumb.is-active {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}

.type-thumb__photo {
    height: 56px;
    border: 0;
}

.reservation-shell .type-thumb .room-photo,
.reservation-shell .type-thumb .placeholder-frame {
    border-radius: 0;
}

.type-thumb__label {
    display: block;
    padding: 0.375rem 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

/* ------------------------------------------------------------ forms
 * A fixed label height keeps every input in a row on the same baseline, even
 * when one label is long enough to wrap. */
.field-label {
    display: block;
    min-height: 1.4rem;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4rem;
    color: var(--ink);
}

.form-section + .form-section {
    margin-top: 1.75rem;
}

/* Side by side the two line up; stacked on a phone, the row gutter spaces them. */
.row > .form-section + .form-section {
    margin-top: var(--bs-gutter-y);
}

.form-section__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.15);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-muted);
}

.form-section__title span {
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    font-style: italic;
    color: rgba(var(--ink-rgb), 0.45);
}

.form-control,
.form-select {
    font-family: var(--font-serif);
    font-size: 0.8125rem;
}

/* Guest details row.
 *
 * Salutation holds short fixed values, so it keeps a fixed width that fits
 * the longest one, "Rev. Fr.", and can never clip it. The three names share
 * whatever is left and wrap onto a new line before they would shrink below a
 * readable width.
 *
 * Sized by content rather than by breakpoint on purpose: from 992px the booking
 * summary sits beside the form, which makes the form narrower on a small laptop
 * than on a tablet, so viewport-based columns squeezed these fields exactly
 * where there was least room. */
.guest-details-row > .guest-field--salutation {
    flex: 0 0 auto;
    width: 7.5rem;
}

.guest-details-row > .guest-field--name {
    flex: 1 1 0;
    width: auto;
    min-width: 10rem;
}

@media (min-width: 576px) {
    .guest-details-row > .guest-field--name {
        min-width: 11.5rem;
    }
}

/* The invisible full-size picker target must anchor to the input itself.
 * Without this it resolves against the nearest positioned ancestor, covering
 * the whole hero and pushing a horizontal scrollbar onto the page. */
.date-field {
    position: relative;
}

.date-field::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Both cards fill the row height and push their button to the bottom, so the
 * two Select buttons line up however long the copy runs. */
.tac-option {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    height: 100%;
    border-radius: var(--rsv-radius);
}

.tac-option--on {
    background-color: rgba(var(--gold-rgb), 0.12);
    border: 1px solid var(--gold);
}

.tac-option--off {
    background-color: #fff;
    border: 1px solid var(--rsv-line);
}

.tac-option__label {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.tac-option__heading {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.tac-option__body {
    flex: 1 1 auto;
    font-size: 0.8125rem;
    line-height: 1.65;
    margin-bottom: 0;
}

/* Chosen card gets a solid button; the other stays outlined. */
.tac-option__button {
    align-self: flex-start;
    margin-top: 1.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid #d8d1c2;
    border-radius: 6px;
    background-color: #fff;
    color: var(--ink);
}

.tac-option__button:hover {
    background-color: rgba(var(--ink-rgb), 0.08);
    color: var(--ink);
}

.tac-option__button.is-selected {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

.tac-option__button.is-selected:hover {
    background-color: var(--gold-deep);
    border-color: var(--gold-deep);
    color: var(--ink);
}

/* ----------------------------------------------------------- footer
 * The gap above the footer is set in exactly two places: `.page-bottom` on the
 * last block of each page, and this padding-top. 3rem + 3rem on every route. */
.page-bottom {
    padding-bottom: 3rem;
}

.site-footer {
    background-color: var(--ink);
    padding: 3rem 1.5rem 2.25rem;
}

@media (min-width: 768px) {
    .site-footer {
        padding: 3rem 2.5rem 2.25rem;
    }
}

.footer-heading {
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.125rem;
    color: var(--gold);
}

.footer-text {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.6;
    color: #fff;
}

/* All three columns share one top edge and one heading-to-content gap. */
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
}

/* A fixed icon column means every line of contact text starts at the same x,
 * whatever shape the icon is. */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-contact li {
    display: grid;
    grid-template-columns: 1.0625rem 1fr;
    align-items: start;
    column-gap: 1rem;
}

.footer-contact svg {
    margin-top: 0.125rem;
    color: #fff;
}

/* Keeps the About copy on a comfortable measure instead of one long ragged block. */
.footer-about-text {
    max-width: 34rem;
}

.footer-bar {
    background-color: var(--gold);
    padding: 1.125rem 1.5rem;
}

@media (min-width: 768px) {
    .footer-bar {
        padding: 1.125rem 2.5rem;
    }
}

.footer-bar p {
    margin: 0;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--charcoal);
}

/* -------------------------------------------------------- room cards */
.room-tile {
    border: 1px solid var(--ink);
    background: none;
    padding: 0;
    text-align: left;
    width: 100%;
}

/* Rooms page listing. The wrapper owns the gap below the section intro; the
 * rows own the rhythm between themselves. */
.room-list {
    margin-top: 3.25rem;
}

.room-row {
    padding-block: 2.25rem;
}

/* Only the top is reset — the last row still needs its bottom padding to
 * clear the "Every Rate Includes" divider that follows. */
.room-row:first-child {
    padding-top: 0;
}

.room-row + .room-row {
    border-top: 1px solid rgba(var(--white-rgb), 0.2);
}

.amenity-chip {
    border: 1px solid rgba(var(--ink-rgb), 0.4);
    padding: 0.25rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(var(--ink-rgb), 0.8);
}

.amenity-chip--dark {
    border-color: rgba(var(--white-rgb), 0.4);
    color: rgba(var(--white-rgb), 0.8);
}

.section-rule {
    width: fit-content;
    margin-inline: auto;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 0.25rem;
    letter-spacing: 0.35em;
}

/* ------------------------------------------------------------ home page
 * One spacing scale for the whole page: 2.5rem between a divider and the
 * content either side of it, 2rem below every heading block, 1rem inside cards.
 * Longhand only: the `padding` shorthand would reset the bottom value that
 * .page-bottom sets, and this rule wins on source order. */
.home-wrap {
    padding-top: 1.5rem;
    padding-inline: 1rem;
}

@media (min-width: 768px) {
    .home-wrap {
        padding-top: 2rem;
        padding-inline: 1.5rem;
    }
}

.home-card {
    max-width: 1360px;
    margin-inline: auto;
    background-color: #fff;
    padding: 2.5rem 1.5rem;
}

@media (min-width: 768px) {
    .home-card {
        padding: 3.25rem 3rem;
    }
}

.home-section + .home-section {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(var(--ink-rgb), 0.12);
}

/* The whole heading group carries one bottom margin, so sections with and
 * without a subhead start their content at the same distance. */
.home-heading-block {
    text-align: center;
    margin-bottom: 2rem;
}

.home-heading {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.625rem;
}

.home-heading__rule {
    width: 3.5rem;
    height: 3px;
    margin: 0 auto;
    background-color: var(--gold);
}

.home-heading__sub {
    max-width: 40rem;
    margin: 1rem auto 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--grey-muted);
}

.home-section__footer {
    margin-top: 2rem;
    text-align: center;
}

/* ------------------------------------------------------ booking policies
 * Beside the heading from a laptop up. Every row starts open and folds when
 * tapped; grid-template-rows animates the panel to its own height, whatever
 * the length of the text. */
@media (min-width: 992px) {
    .policy-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
        column-gap: 4rem;
        align-items: start;
    }

    .policy-layout .home-heading-block {
        margin-bottom: 0;
        text-align: left;
    }

    .policy-layout .home-heading__rule,
    .policy-layout .home-heading__sub {
        margin-left: 0;
    }
}

.policies {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rsv-line);
    list-style: none;
}

.policy {
    border-bottom: 1px solid var(--rsv-line);
}

.policy__heading {
    margin: 0;
}

.policy__toggle {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-height: 4rem;
    padding: 0.875rem 0.25rem;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: 600;
    text-align: left;
    transition: color 0.2s ease-out;
}

.policy__toggle:hover,
.policy__toggle[aria-expanded="true"] {
    color: #7a5600;
}

.policy__toggle:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
}

.policy__icon {
    flex-shrink: 0;
    color: #7a5600;
}

.policy__title {
    flex: 1 1 auto;
}

/* A plus whose upright bar turns flat, leaving a minus, when the row opens. */
.policy__mark {
    position: relative;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.policy__mark::before,
.policy__mark::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transition: transform 0.3s ease-out;
}

.policy__mark::after {
    transform: rotate(90deg);
}

.policy__toggle[aria-expanded="true"] .policy__mark::after {
    transform: rotate(0deg);
}

.policy__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.35s ease-out, visibility 0.35s;
}

.policy__heading:has([aria-expanded="true"]) + .policy__panel {
    grid-template-rows: 1fr;
    visibility: visible;
}

.policy__points {
    display: grid;
    gap: 0.5rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.policy__points li {
    position: relative;
    margin-left: 2.25rem;
    padding-left: 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #444;
}

.policy__points li:last-child {
    margin-bottom: 1.25rem;
}

.policy__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background-color: var(--gold-deep);
}

/* ----------------------------------------------------------- room cards */
.room-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--rsv-line);
    border-radius: var(--rsv-radius);
    background-color: #fff;
    text-decoration: none;
    color: inherit;
    transition:
        transform 0.3s ease-out,
        box-shadow 0.3s ease-out,
        border-color 0.3s ease-out;
}

.room-card:hover {
    transform: translateY(-4px);
    border-color: #d8d1c2;
    box-shadow: 0 14px 28px rgba(var(--ink-rgb), 0.09);
    color: inherit;
}

.room-card__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--rsv-tint);
}

.room-card__media .room-photo,
.room-card__media .placeholder-frame {
    height: 100%;
    border: 0;
}

.room-card__media .placeholder-frame {
    background-color: var(--rsv-tint);
    color: var(--stone-dark);
}

.room-card__media .room-photo {
    transition: transform 0.5s ease-out;
}

.room-card:hover .room-photo {
    transform: scale(1.04);
}

/* The body grows to fill the card, so the price lines up across a row even
 * when a room's name or details wrap. */
.room-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1rem 1.125rem 1.125rem;
}

.room-card__name {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.room-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.5rem;
    margin-top: 0.25rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--grey-muted);
}

.room-card__specs span + span::before {
    content: '\00b7';
    margin-right: 0.5rem;
}

.room-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin-top: auto;
    padding-top: 0.875rem;
}

.room-card__price {
    font-size: 1.0625rem;
    font-weight: 600;
    white-space: nowrap;
}

.room-card__price small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--grey-muted);
}

.room-card__cta {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.room-card__cta span {
    display: inline-block;
    transition: transform 0.2s ease-out;
}

.room-card:hover .room-card__cta span {
    transform: translateX(3px);
}

/* --------------------------------------------------------- what we offer
 * Three reasons to stay, side by side from a tablet up: a photo, a title and
 * a few lines, left-aligned like the rest of the page. */
.offers {
    display: grid;
    gap: 2rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .offers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.offer__media {
    overflow: hidden;
    border: 1px solid rgba(var(--ink-rgb), 0.75);
}

.offer__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 0;
}

/* A missing photo becomes a .placeholder-frame that keeps the offer__photo
 * class; keep it a flex box so its label stays centred, not pinned to the top. */
.placeholder-frame.offer__photo {
    display: flex;
}

.offer__title {
    margin: 1rem 0 0.375rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

.offer__body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #444;
}

.offer__link,
.find-us__link {
    display: inline-block;
    margin-top: 0.75rem;
    padding-block: 0.5rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.offer__link:hover,
.find-us__link:hover,
.find-us__phone:hover {
    color: #7a5600;
}

/* ------------------------------------------------------------ finding us */
.find-us {
    display: grid;
    gap: 1.5rem 2.5rem;
}

@media (min-width: 768px) {
    .find-us {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.find-us__title {
    margin: 0 0 0.375rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
}

.find-us__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #444;
}

.find-us__phone {
    font-weight: 700;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

/* -------------------------------------------------------- page entrance
 * Runs on mount, so these replay each time Home or Rooms is opened. Used on
 * those two pages only — the reservation steps stay still so the form never
 * shifts underfoot. */
@keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes page-rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.anim-fade {
    animation: page-fade-in 0.6s ease-out both;
}

.anim-rise {
    animation: page-rise-in 0.6s ease-out 0.1s both;
}

.anim-rise-late {
    animation: page-rise-in 0.6s ease-out 0.22s both;
}

/* Reservation steps get a shorter, shallower version. It replays on every step,
 * so the movement stays small enough that the form never feels like it jumps. */
@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.anim-panel {
    animation: panel-in 0.35s ease-out both;
}

.anim-panel--delay {
    animation-delay: 0.09s;
}

@media (prefers-reduced-motion: reduce) {
    .anim-fade,
    .anim-rise,
    .anim-rise-late,
    .anim-panel {
        animation: none;
    }
}

/* ----------------------------------------------------------- scroll reveal */
/* --reveal-delay staggers a row of items so they arrive one after another. */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.7s ease-out var(--reveal-delay, 0s),
        transform 0.7s ease-out var(--reveal-delay, 0s);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .offer-photo,
    .offer-media__frame {
        transition: none;
    }

    .offer-media:hover .offer-photo {
        transform: none;
    }
}

/* =====================================================================
 * Tablet and phone
 *
 * The desktop rules above are the baseline; these scale the fixed pixel
 * sizes down so nothing overflows a narrow viewport. Bootstrap's grid
 * already stacks the columns — what needed work was the hand-built parts:
 * the hero, stepper, calendar cells and the overhanging offer badges.
 *
 * Bootstrap's breakpoints, written out: down(lg) is < 992px, down(md) is
 * < 768px and down(sm) is < 576px.
 * ===================================================================== */

/* ---------------------------------------------------- tablet (< 992px) */
@media (max-width: 991.98px) {
    .booking-summary {
        padding: 1.75rem 1.5rem;
    }

    .reservation-shell {
        max-width: 46rem;
    }

    .offer-photo {
        height: 260px;
    }
}

/* ----------------------------------------------- small tablet (< 768px) */
@media (max-width: 767.98px) {
    .hero-overlay {
        padding: 4.5rem 1rem 1.5rem;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-eyebrow {
        letter-spacing: 0.16em;
    }

    .hero-cta {
        margin-top: 1.5rem;
    }

    .hero-sub {
        font-size: 0.8125rem;
    }

    /* The badge overhangs the photo on desktop; on a phone that would push
     * past the viewport, so it tucks into the corner instead. */
    .offer-media--left .offer-number,
    .offer-media--right .offer-number {
        top: auto;
        right: 0.75rem;
        left: auto;
        bottom: 0.75rem;
        transform: none;
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.9375rem;
        box-shadow: 0 0 0 3px rgba(var(--white-rgb), 0.9);
    }

    .offer-photo {
        height: 220px;
    }

    .offer-title {
        font-size: 1.125rem;
    }

    .home-card {
        padding: 1.75rem 1rem;
    }

    .home-wrap {
        padding-top: 1rem;
        padding-inline: 0.75rem;
    }

    .home-heading {
        font-size: 1.25rem;
    }

    .btn-back {
        padding: 0.375rem 0.75rem;
        font-size: 0.6875rem;
    }

    .tac-option {
        padding: 1.25rem;
    }

    .tac-option__label {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }

    .site-footer {
        padding: 2.5rem 1rem 1.75rem;
    }

    .footer-heading {
        font-size: 1.25rem;
    }

    .footer-bar {
        padding: 1rem;
    }

    .logo-img.logo-lg {
        height: 2.75rem;
    }

    .ust-logo-img {
        height: 2.75rem;
    }

    .nav-1611 {
        font-size: 0.9375rem;
    }

    .unit-row {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .type-thumb {
        width: 116px;
    }
}

/* ------------------------------------------------------ phone (< 576px) */
@media (max-width: 575.98px) {
    /* Four steps have to fit ~360px without scrolling the rail. */
    .stepper {
        --node-w: 76px;
        --marker: 42px;

        min-width: 0;
    }

    .stepper__marker svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .stepper__item--active .stepper__marker {
        border-width: 2px;
        box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.25);
    }

    .stepper__label {
        min-height: 3.9em; /* labels take three lines at this width */
        margin-top: 0.5rem;
        font-size: 0.5rem;
        letter-spacing: 0.06em;
    }

    /* Calendar: shorter cells so a full month fits the screen width. */
    .calendar__cell {
        height: 38px;
        padding: 0.1875rem 0.25rem 0;
    }

    .calendar__head {
        padding: 0.375rem 0.625rem;
    }

    .calendar__head h3 {
        font-size: 0.9375rem;
    }

    .calendar__weekdays span {
        font-size: 0.5rem;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .booking-summary {
        padding: 1.5rem 1.125rem;
    }

    .booking-summary__title {
        font-size: 1.25rem;
    }

    .summary-total__amount {
        font-size: 1.375rem;
    }

    .reservation-heading {
        font-size: 1.0625rem;
    }

    .logo-img.logo-lg,
    .logo-img.logo-md {
        height: 2.25rem;
    }

    .type-thumb {
        width: 104px;
    }

    .offer-photo {
        height: 190px;
    }

    .home-heading__sub,
    .reservation-intro {
        font-size: 0.75rem;
    }
}

/* ------------------------------------------------------------ sweetalert
 * SweetAlert ships rounded corners, its own font and its own buttons. The
 * dialogs should read as part of the site, so the shell is restyled to a
 * square white panel with the site's gold rule along the top; the buttons are
 * real .btn-gold / .btn-outline-dark, set in static/js/app.js.
 *
 * Its default spacing is built for a far larger title and an 80px icon: a tall
 * gap above the icon, text inset again inside its own container, and a margin
 * on every button. All of it is reset to one rhythm — even padding round the
 * panel, then icon, title, text and buttons a fixed step apart. Selectors
 * carry .swal2-popup as well as our class so they outrank SweetAlert's own
 * rules, whose stylesheet is injected at runtime. */
.swal-1611-backdrop.swal2-backdrop-show {
    background: rgba(var(--ink-rgb), 0.55);
}

.swal2-popup.swal-1611 {
    width: min(28rem, calc(100vw - 2rem));
    padding: 2rem 2rem 1.75rem;
    border: 0;
    border-top: 4px solid var(--gold);
    border-radius: 0;
    background-color: #fff;
    box-shadow: 0 1.5rem 3rem rgba(var(--ink-rgb), 0.3);
    font-family: var(--font-serif);
}

/* The icon is drawn in em, so one font-size scales every part of it together:
 * at 0.6rem it renders about 50px across, instead of SweetAlert's 88px. */
.swal2-popup.swal-1611 .swal-1611__icon {
    margin: 0 auto 1rem;
    font-size: 0.6rem;
}

/* Question and info are neutral prompts, so they take the brand gold rather
 * than SweetAlert's blue-grey; success and error keep their meaning colours. */
.swal2-popup.swal-1611 .swal2-icon.swal2-question,
.swal2-popup.swal-1611 .swal2-icon.swal2-info {
    border-color: var(--gold-deep);
    color: var(--gold-deep);
}

.swal2-popup.swal-1611 .swal-1611__title {
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

.swal2-popup.swal-1611 .swal-1611__body {
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--charcoal);
    overflow-wrap: anywhere;
}

.swal2-popup.swal-1611 .swal-1611__actions {
    width: 100%;
    margin: 1.5rem 0 0;
    padding: 0;
    gap: 0.625rem;
}

.swal2-popup.swal-1611 .swal-1611__actions .btn {
    flex: 1 1 0;
    min-width: 7.5rem;
    margin: 0;
}

/* Booking figures as a small receipt: label left, value right, the amount
 * set apart below a rule so it is the first thing read. */
.swal-1611__summary {
    margin: 0.25rem 0 0;
    padding: 0.25rem 1rem;
    border: 1px solid rgba(var(--ink-rgb), 0.12);
    background-color: rgba(var(--white-rgb), 0.7);
    text-align: left;
    font-family: var(--font-sans);
}

.swal-1611__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
}

.swal-1611__row span {
    color: var(--grey-muted);
}

.swal-1611__row strong {
    color: var(--ink);
    text-align: right;
}

.swal-1611__row--total {
    border-top: 1px dashed rgba(var(--ink-rgb), 0.2);
}

.swal-1611__row--total strong {
    font-size: 1rem;
}

.swal-1611__note {
    margin: 0.875rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--grey-muted);
}

/* On a phone two buttons do not fit side by side, and left to wrap they stack
 * at two different widths. Stack them on purpose instead: full width, with the
 * confirming action on top. reverseButtons puts cancel first in the markup, so
 * it is column-reverse that brings confirm to the top. */
@media (max-width: 575.98px) {
    .swal2-popup.swal-1611 .swal-1611__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .swal2-popup.swal-1611 .swal-1611__actions .btn {
        width: 100%;
    }
}

/* Left-aligned because these are read item by item, not as a sentence. */
.swal-1611__list {
    margin: 0;
    padding-left: 1.25rem;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.75rem;
}

.swal-1611__list li + li {
    margin-top: 0.25rem;
}

/* ------------------------------------------------------- booking submitted
 * Where a guest lands once the request is saved. It answers what they want to
 * know, in the order they want it: did it go through, what did I ask for, and
 * what happens next. There is no reference number — with no guest login there
 * is nothing to look one up with — so the email the hotel will send is the
 * part given weight. */
.booking-done {
    max-width: 38rem;
    overflow: hidden;
    border: 1px solid var(--rsv-line);
    border-radius: var(--rsv-radius);
    background-color: #fff;
}

.booking-done__header {
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--rsv-line);
}

/* Drawn like a finished step in the stepper above: black disc, gold tick. */
.booking-done__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.875rem;
    border-radius: 50%;
    background-color: var(--ink);
    color: var(--gold);
    font-size: 1.5rem;
}

.booking-done__title {
    margin: 0 0 0.375rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
}

.booking-done__lead {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--charcoal);
}

.booking-done__stay {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.15);
}

.booking-done__stay dt {
    margin-bottom: 0.25rem;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-muted);
}

.booking-done__stay dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
}

.booking-done__rooms {
    grid-column: 1 / -1;
}

.booking-done__email {
    display: flex;
    gap: 0.875rem;
    margin: 1.5rem;
    padding: 1rem 1.125rem;
    border-left: 4px solid var(--gold);
    background-color: var(--gold-pale);
}

.booking-done__email-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
    font-size: 1.125rem;
    color: var(--ink);
}

.booking-done__email-title {
    margin: 0 0 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
}

.booking-done__email-title a {
    color: inherit;
    text-underline-offset: 2px;
}

.booking-done__email-body {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--ink);
}

/* A guest's own address can be long enough to push past a phone's width, so
 * it may break anywhere rather than overflow the panel. */
.booking-done__email-body strong {
    overflow-wrap: anywhere;
}

.booking-done__actions {
    padding: 0 1.5rem 1.75rem;
    text-align: center;
}

@media (max-width: 575.98px) {
    .booking-done__stay {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------ booking review
 * The last check before a guest confirms. Grouped the way the form collected
 * it — who, when, which rooms, what was attached — with each label sitting
 * directly above its value rather than at the far side of the card from it,
 * so a wide screen does not leave the eye crossing empty space to pair them.
 * The total closes the card in the black and gold of the booking summary. */
.booking-review {
    max-width: 42rem;
    overflow: hidden;
    border: 1px solid var(--rsv-line);
    border-radius: var(--rsv-radius);
    background-color: #fff;
}

.booking-review__header {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--rsv-line);
    background-color: var(--rsv-tint);
}

.booking-review__title {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
}

.booking-review__intro {
    margin: 0;
    font-size: 0.75rem;
    color: var(--grey-muted);
}

.booking-review__section {
    padding: 1.25rem 1.75rem;
}

.booking-review__section + .booking-review__section {
    border-top: 1px solid var(--rsv-line);
}

.booking-review__section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
}

/* Pinned size: the document icon takes a pixel size prop and the others
 * inherit font-size, so without this they render at different sizes. */
.booking-review__section-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--gold-deep);
}

/* Six tracks so a row can hold three thirds or two halves. */
.booking-review__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.booking-review__item {
    grid-column: span 2;
    min-width: 0;
}

.booking-review__item--md {
    grid-column: span 3;
}

.booking-review__item--full {
    grid-column: 1 / -1;
}

.booking-review__item dt {
    margin-bottom: 0.25rem;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey-muted);
}

.booking-review__item dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* Quieter than a real value, so a skipped optional field reads as skipped. */
.booking-review__item dd.is-empty {
    font-weight: 400;
    font-style: italic;
    color: var(--stone-dark);
}

.booking-review__empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--grey-muted);
}

.booking-review__rooms {
    margin: 0;
    padding: 0;
    list-style: none;
}

.booking-review__room {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
}

.booking-review__room:first-child {
    padding-top: 0;
}

.booking-review__room:last-child {
    padding-bottom: 0;
}

.booking-review__room + .booking-review__room {
    border-top: 1px dashed rgba(var(--ink-rgb), 0.15);
}

.booking-review__room-name {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ink);
}

.booking-review__room-name strong {
    margin-right: 0.375rem;
}

.booking-review__room-view {
    margin: 0.125rem 0 0;
    font-size: 0.6875rem;
    color: var(--grey-muted);
}

.booking-review__room-rate {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ink);
}

.booking-review__room-rate span {
    font-weight: 400;
    color: var(--grey-muted);
}

.booking-review__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.75rem;
    border-top: 1px solid var(--rsv-line);
    background-color: var(--rsv-tint);
    color: var(--ink);
}

.booking-review__total-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.booking-review__total-note {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: var(--grey-muted);
}

.booking-review__total-amount {
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--ink);
}

/* Under the Confirm button: the steps a guest can expect after submitting. */
.booking-next {
    max-width: 42rem;
    padding: 1rem 1.25rem;
    border-radius: var(--rsv-radius);
    background-color: var(--rsv-tint);
}

.booking-next__title {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.booking-next__steps {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--grey-muted);
}

.booking-next__steps li + li {
    margin-top: 0.25rem;
}

@media (max-width: 575.98px) {
    .booking-review__header,
    .booking-review__section,
    .booking-review__total {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    /* Two tracks: short values pair up, anything long gets the full row. */
    .booking-review__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-review__item {
        grid-column: span 1;
    }

    .booking-review__item--md,
    .booking-review__item--full {
        grid-column: 1 / -1;
    }
}


.form-hint {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--grey-muted);
}

.form-hint-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-top: 0.375rem;
}

.form-section__title .form-section__required {
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red-alert);
}

/* Nothing attached yet: the whole panel is the button. */
.loi-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 1.5rem 1rem;
    border: 1px dashed rgba(var(--ink-rgb), 0.45);
    background-color: #fff;
    color: var(--ink);
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.loi-drop:hover,
.loi-drop:focus-visible {
    border-color: var(--gold-deep);
    background-color: var(--gold-pale);
    outline: none;
}

.loi-drop.is-invalid {
    border-color: var(--red-alert);
}

.loi-drop__icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.25rem;
    color: var(--gold-deep);
}

.loi-drop__title {
    font-size: 0.875rem;
    font-weight: 700;
}

.loi-drop__hint {
    font-size: 0.6875rem;
    color: var(--grey-muted);
}

/* A file is attached: name and size, with what can be done to it. */
.loi-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ink);
    background-color: #fff;
}

.loi-file__icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--gold-deep);
}

.loi-file__meta {
    flex: 1 1 12rem;
    min-width: 0;
}

.loi-file__name {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    color: var(--ink);
}

.loi-file__detail {
    margin: 0.125rem 0 0;
    font-size: 0.6875rem;
    color: var(--grey-muted);
}

.loi-file__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.loi-file__remove {
    color: var(--red-alert);
    text-decoration: underline;
}

.loi-preview {
    margin-top: 0.75rem;
    border: 1px solid var(--ink);
    background-color: var(--charcoal);
}

.loi-preview__frame {
    display: block;
    width: 100%;
    height: 34rem;
    border: 0;
}

.loi-preview__fallback {
    margin: 0;
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(var(--ink-rgb), 0.15);
    background-color: #fff;
    font-size: 0.6875rem;
    color: var(--grey-muted);
}

.loi-preview__fallback a {
    font-weight: 600;
    color: var(--ink);
}

.guest-form-note {
    margin: 1.75rem 0 0;
    padding: 0.875rem 1rem;
    border-left: 4px solid var(--gold);
    background-color: var(--gold-pale);
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--ink);
}

/* The agreement sits beside the button it has to come before. */
.guest-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--ink-rgb), 0.15);
}

.agree-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.agree-check .form-check-input {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.0625rem 0 0;
}

.agree-check label {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
}

@media (max-width: 575.98px) {
    .loi-preview__frame {
        height: 26rem;
    }

    .guest-form-footer .btn {
        width: 100%;
    }
}

/* ================================================= server-rendered additions
 * The React build drove a few controls with component state; here they are
 * links, forms and Bootstrap's collapse instead. These rules give the
 * elements that changed tag the same look the originals had.
 */

/* Bootstrap now arrives from its WebJar (see layouts/guest.html), so the
 * @import that used to sit at the top of this file is gone. */

/* Phone-menu toggler: Bootstrap flips aria-expanded; the icon follows. */
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; }
.nav-toggle svg { display: block; }

/* The summary rail's NEXT is a link; Bootstrap's .disabled stands in for :disabled. */
.btn-gold.disabled {
    background-color: rgba(var(--gold-rgb), 0.4);
    color: var(--ink);
    opacity: 1;
}

/* Room type cards and the type rail are links rather than buttons. */
.room-type-card,
.room-type-card:hover,
.type-thumb,
.type-thumb:hover {
    color: inherit;
    text-decoration: none;
}

.room-type-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* The done steps in the stepper are links too. */
.stepper__node--link,
.stepper__node--link:hover {
    color: inherit;
    text-decoration: none;
}

/* Calendar arrows sit inside GET forms; the forms must not add height. */
.calendar__head form {
    display: flex;
    margin: 0;
}

/* TAC option: a hidden radio drives the card, its label is the button. */
.tac-option__button {
    cursor: pointer;
    margin-bottom: 0;
}

/* "Remove" in the summary rail is a one-button form. */
.room-line form {
    display: inline;
    margin: 0;
}

/* "+ Book this room" likewise. */
.unit-row form {
    margin: 0;
}

/* Bootstrap 5 no longer ships a [hidden] rule, and its display utilities are
 * !important, so anything hidden by attribute must win explicitly. */
[hidden] {
    display: none !important;
}

/* ------------------------------------------------ step 1: the room picker
 * Choosing a room is the whole job of this step, so the available rooms get a
 * panel of their own with a live count. The rate inclusions are the same
 * fifteen lines on every room type, so they fold away underneath instead of
 * carrying more ink than the one action on the page.
 */
.unit-panel {
    overflow: hidden;
    border: 1px solid var(--rsv-line);
    border-radius: var(--rsv-radius);
    background-color: #fff;
}

.unit-panel__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--rsv-tint);
    border-bottom: 1px solid var(--rsv-line);
}

.unit-panel__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
}

.unit-panel__count {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--grey-muted);
}

.unit-panel__count.is-out {
    color: var(--red-alert);
}

.unit-panel__body {
    padding: 1rem;
}

/* Roomier rows than the old flat list: the room number is what is being
 * chosen, so it reads at body size rather than as a caption. */
.unit-panel .unit-list {
    gap: 0.75rem;
}

.unit-panel .unit-row {
    padding: 0.875rem 1rem;
    transition:
        border-color 0.15s ease-out,
        box-shadow 0.15s ease-out;
}

.unit-panel .unit-row.is-open:hover {
    border-color: #d8d1c2;
    box-shadow: 0 6px 16px rgba(var(--ink-rgb), 0.06);
}

/* "Room 508" is the label being chosen and must never break across two lines;
 * the view underneath is free to wrap, and min-width lets it. */
.unit-panel .unit-row__number {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.unit-panel .unit-row > div {
    min-width: 0;
}

.unit-panel .unit-row__view {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
}

/* Outlined until hovered, so a list of rooms is not a stack of gold blocks. */
.btn-gold.unit-row__book {
    padding: 0.5rem 1rem;
    background-color: #fff;
    border-color: #d8d1c2;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.btn-gold.unit-row__book:hover {
    background-color: var(--gold);
    border-color: var(--gold);
}

/* ---------------------------------------------- rate inclusions, folded
 * A plain <details>: no script, and it keeps the chips one click away. */
.rate-includes {
    border: 1px solid var(--rsv-line);
    border-radius: var(--rsv-radius);
    background-color: #fff;
}

.rate-includes__summary {
    display: flex;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    list-style: none;
}

/* The default disclosure triangle, in both engines, replaced by the +/- below. */
.rate-includes__summary::-webkit-details-marker {
    display: none;
}

.rate-includes__summary::after {
    content: '+';
    margin-left: 0.5rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--grey-muted);
}

.rate-includes[open] .rate-includes__summary::after {
    content: '\2212'; /* minus, which lines up with the + it replaces */
}

.rate-includes__summary span {
    margin-left: auto;
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--grey-muted);
}

.rate-includes__body {
    padding: 0 1rem 1rem;
}

.rate-includes .amenity-chip {
    border-color: var(--rsv-line);
    border-radius: 999px;
    background-color: var(--rsv-tint);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}


/* ------------------------------------------------ rooms page, light list
 * The room list used to sit on charcoal (#2b2b2b). Long stretches of light
 * text on a dark ground cause halation and eye strain, which older guests
 * feel most, so the list now sits on a warm off-white. Pure white is kept
 * for the cards only, so glare stays low. Brand gold (#ffc627) is unreadable
 * on a light ground (1.4:1), so text uses a deeper gold. Measured on #f7f4ec:
 *   text #2b2b2b 12.9:1, muted #595959 6.4:1, deep gold #7a5600 6.1:1
 */
.rooms-light {
    --rl-bg: var(--rsv-canvas);
    --rl-card: #ffffff;
    --rl-text: #2b2b2b;
    --rl-muted: #595959;
    --rl-gold-text: #7a5600;
    --rl-gold-tint: #fbf3dc;
    --rl-photo-bg: #23211d;
    --rl-line: var(--rsv-line);
    background-color: var(--rl-bg);
    color: var(--rl-text);
    padding-top: 4rem;
}

/* intro */
.rooms-intro {
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
}

.rooms-eyebrow {
    margin: 0 0 0.375rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rl-gold-text);
}

.rooms-intro__title {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--rl-text);
}

.rooms-intro__lead {
    margin: 0.625rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    text-wrap: balance;
    color: var(--rl-muted);
}

/* filter bar: stays under the top rule while the list scrolls */
.room-filter {
    position: sticky;
    top: 6px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 2.5rem;
    padding: 0.5rem;
    border: 1px solid var(--rl-line);
    border-radius: 14px;
    background-color: rgba(var(--white-rgb), 0.88);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(var(--ink-rgb), 0.06);
}

.room-filter__group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.room-filter__btn {
    padding: 0.4375rem 1rem;
    border: 0;
    border-radius: 8px;
    background: none;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rl-muted);
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.room-filter__btn:hover {
    background-color: var(--rsv-tint);
    color: var(--ink);
}

.room-filter__btn.is-active {
    background-color: var(--ink);
    color: var(--gold);
}

.room-filter__count {
    margin: 0;
    padding-inline: 0.625rem;
    font-size: 0.8125rem;
    color: var(--rl-muted);
}

/* room cards
 * One wide card per type, the photo much the larger half and swapping sides
 * down the page. The photo wipes open as the card scrolls in. Gold is kept for
 * the booking button so it is the only loud thing on the card. */
.rooms-light .room-list {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.rl-card {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--rl-card);
    box-shadow: 0 20px 44px -28px rgba(60, 45, 10, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
    .rl-card {
        transition: box-shadow 0.3s ease, opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .rl-card:hover {
        box-shadow: 0 30px 56px -26px rgba(60, 45, 10, 0.5);
    }
    .rl-card__media {
        transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.18, 1) 0.1s;
    }
    .rl-card.reveal:not(.is-visible) .rl-card__media {
        clip-path: inset(0 100% 0 0);
    }
    .rl-card.is-flipped.reveal:not(.is-visible) .rl-card__media {
        clip-path: inset(0 0 0 100%);
    }
    .rl-card__media .room-photo {
        transition: transform 0.7s ease-out;
    }
    .rl-card:hover .room-photo {
        transform: scale(1.05);
    }
}

.rl-card__media {
    position: relative;
    min-height: 26rem;
    overflow: hidden;
    background-color: var(--rl-photo-bg);
}

.rl-card__media .room-photo,
.rl-card__media .placeholder-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border: 0;
}

/* Until the photography arrives: the same deep colours as the room views. */
.rooms-light .placeholder-frame,
.room-modal .placeholder-frame {
    padding: 2rem;
    background-color: var(--rl-photo-bg);
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 600;
}

.rooms-light .rl-card .placeholder-frame {
    background: linear-gradient(135deg, #1b1505, #4a3808 55%, #0d0a02);
    color: rgba(var(--white-rgb), 0.6);
}

.rooms-light .rl-card:nth-child(3n + 2) .placeholder-frame {
    background: linear-gradient(135deg, #07211c, #14493d 55%, #04120f);
}

.rooms-light .rl-card:nth-child(3n) .placeholder-frame {
    background: linear-gradient(135deg, #0a1826, #1c3f5c 55%, #050d15);
}

.rl-card__tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background-color: var(--gold);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink);
}

.rl-card__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.25rem;
}

/* The details as chips, quicker to take in than a table. */
.rl-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rl-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    background-color: var(--rsv-tint);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rl-text);
}

.rl-facts svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--rl-gold-text);
}

.rl-card__numbers {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rl-muted);
}

.rl-card__kicker {
    margin: 0 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rl-gold-text);
}

.rl-card__name {
    margin: 0;
    font-size: clamp(1.625rem, 2.8vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--rl-text);
}

.rl-card__blurb {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--rl-muted);
}

/* spec list */
.room-specs {
    margin: 0;
    border-top: 1px solid var(--rl-line);
}

.room-spec {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
    padding-block: 0.625rem;
    border-bottom: 1px solid var(--rl-line);
}

.room-spec dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rl-muted);
}

.room-spec dd {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--rl-text);
}

/* price and booking */
.rl-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--rl-line);
}

.rl-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    line-height: 1.1;
}

.rl-card__amount {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--rl-text);
}

.rl-card__per {
    font-size: 0.875rem;
    color: var(--rl-muted);
}

.rl-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.rl-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
    .rl-card__cta svg { transition: transform 0.2s ease; }
    .rl-card__cta:hover svg { transform: translateX(3px); }
}

/* Button text stays near-black on gold (13:1), whatever link colour is inherited. */
.rl-card__cta,
.rl-card__cta:hover,
.rl-card__cta:focus {
    color: #1a1a1a !important;
}

/* "View Details": a quiet text link beside the gold button. */
.rl-card__details {
    padding: 0.8125rem 0.25rem;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--rl-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.375em;
}

.rl-card__details:hover,
.rl-card__details:active {
    background-color: transparent;
    color: var(--rl-gold-text);
}

.rl-card__details:focus-visible {
    color: var(--rl-text);
    outline: 2px solid var(--rl-gold-text);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .rl-card.is-flipped { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
    .rl-card.is-flipped .rl-card__media { order: 2; }
}

@media (max-width: 767.98px) {
    .rooms-light { padding-top: 3rem; }
    .rl-card { grid-template-columns: 1fr; }
    .rl-card__media { min-height: 15rem; }
    .rl-card__body { padding: 1.5rem 1.25rem; }
    .room-filter__count { display: none; }
    /* The four buttons share the bar evenly and shrink with it; below ~340px
     * the row scrolls sideways rather than pushing "3+ Guests" off the edge. */
    .room-filter__group {
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .room-filter__group::-webkit-scrollbar { display: none; }
    .room-filter__btn {
        flex: 1 0 auto;
        min-height: 2.5rem;
        padding-inline: 0.5rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    /* Booking button full width, with "View Details" under it on the left. */
    .rl-card__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        width: 100%;
    }
    .rl-card__cta { justify-content: center; }
    .rl-card__details { order: 2; align-self: flex-start; }

    /* The long eyebrow breaks into two even lines, not one word on its own. */
    .hero-overlay .hero-eyebrow {
        max-width: 22rem;
        letter-spacing: 0.12em;
        text-wrap: balance;
    }

    /* Rooms hero: shorter, so the words and facts fill it instead of floating
     * in empty dark space, and the title keeps its weight over the tiles. */
    .hero-rooms {
        height: clamp(23rem, 58vh, 28rem);
        height: clamp(23rem, 58svh, 28rem);
    }

    .hero-title.hero-title--page {
        font-size: clamp(2.125rem, 9.5vw, 2.75rem);
    }

    .hero-title--page + .hero-rule {
        margin-top: 1rem;
    }

    /* The four facts as one frosted strip with hair lines between them,
     * rather than four heavy tiles. */
    .hero-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1px;
        width: 100%;
        max-width: 30rem;
        margin-top: 1.5rem;
        overflow: hidden;
        border: 1px solid rgba(var(--white-rgb), 0.18);
        border-radius: 12px;
        background-color: rgba(var(--white-rgb), 0.14);
        backdrop-filter: blur(8px);
    }

    .hero-facts li {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* numbers stay level when one label wraps */
        padding: 0.625rem 0.25rem;
        border: 0;
        border-radius: 0;
        background-color: rgba(var(--ink-rgb), 0.55);
        backdrop-filter: none;
        font-size: 0.6875rem;
        line-height: 1.25;
        text-wrap: balance;
    }

    .hero-facts strong {
        margin-bottom: 0.125rem;
        font-size: 1.25rem;
    }

    /* The "photo coming" label would sit under the facts strip; the slide's
     * colour is enough of a placeholder at this size. */
    .hero-rooms .hero-slide__label {
        display: none;
    }
}

@media (max-width: 359.98px) {
    .room-filter__btn { font-size: 0.75rem; padding-inline: 0.375rem; }
    .rl-card__amount { font-size: 1.5rem; }
}

/* ------------------------------------------------ rooms: details modal
 * Lives outside .rooms-light (see rooms.html), so it carries the same
 * light-surface tokens itself. */
.room-modal {
    --rl-bg: #f7f4ec;
    --rl-card: #ffffff;
    --rl-text: #2b2b2b;
    --rl-muted: #595959;
    --rl-gold-text: #7a5600;
    --rl-gold-tint: #fbf3dc;
    --rl-photo-bg: #23211d;
    --rl-line: rgba(43, 43, 43, 0.1);
    color: var(--rl-text);
}

.room-modal .modal-content {
    border: 0;
    border-radius: 0;
    background-color: var(--rl-card);
}

.room-modal__header {
    align-items: flex-start;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--rl-line);
}

.room-modal__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--rl-text);
}

.room-modal__body {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 1.75rem;
}

/* One large photo, two stacked beside it. */
.room-modal__gallery {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, 190px);
    gap: 0.5rem;
}

.room-modal__shot {
    position: relative;
    overflow: hidden;
    background-color: var(--rl-gold-tint);
}

.room-modal__shot--main {
    grid-row: 1 / span 2;
}

.room-modal__shot .room-photo,
.room-modal__shot .placeholder-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border: 0;
}

.room-modal__info {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 2rem;
}

.room-modal__main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.room-modal__notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--rl-muted);
}

.room-modal__notes li + li::before {
    content: "·";
    margin-right: 1rem;
}

.room-modal__incl {
    padding: 1.25rem 1.25rem 0.5rem;
    background-color: var(--rl-bg);
    border: 1px solid var(--rl-line);
}

.room-modal__incl-title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--rl-text);
}

.room-modal__incl-group {
    margin-bottom: 1rem;
}

.room-modal__incl .incl__group-title {
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
}

.room-modal__incl-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #444;
}

.room-modal__incl-list li + li {
    margin-top: 0.25rem;
}

.room-modal__footer {
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--rl-line);
}

.room-modal__footer > * {
    margin: 0;
}

.room-modal .rl-card__cta,
.room-modal .rl-card__cta:hover,
.room-modal .rl-card__cta:focus {
    color: #1a1a1a !important;
}

@media (max-width: 991.98px) {
    .room-modal__info { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .room-modal__header,
    .room-modal__body,
    .room-modal__footer { padding-inline: 1rem; }
    .room-modal__gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 200px 120px;
    }
    .room-modal__shot--main {
        grid-row: auto;
        grid-column: 1 / -1;
    }
    .room-modal__footer { flex-direction: column; align-items: stretch; }
    .room-modal__footer .rl-card__price { align-items: baseline; }
    .room-modal__footer .rl-card__cta { justify-content: center; }
}

/* ---------------------------------------------- "Your Reservation" card
 * Replaces the black booking rail on the reservation steps. A light card
 * with dividers between sections: dates, rooms, an optional "Add room",
 * the amount, and the step's Next button. All classes are prefixed rsv- so
 * nothing here can leak into other components.
 */
.booking-summary.booking-summary--card {
    align-self: flex-start;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid var(--rsv-line);
    border-radius: var(--rsv-radius);
    box-shadow: 0 6px 20px rgba(var(--ink-rgb), 0.05);
    color: var(--charcoal);
    font-family: var(--font-sans);
}

/* Stays in view while a long room list or form scrolls beside it. */
@media (min-width: 992px) {
    .booking-summary.booking-summary--card {
        position: sticky;
        top: 1.5rem;
        width: 360px;
    }
}

.rsv-section {
    padding: 1.25rem 1.5rem;
}

.rsv-section + .rsv-section {
    border-top: 1px solid var(--rsv-line);
}

.rsv-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
}

/* dates row: icon, check-in, arrow, check-out, pencil */
.rsv-dates {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.rsv-dates__icon {
    flex-shrink: 0;
    align-self: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--stone-dark);
}

.rsv-dates__arrow {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--stone);
}

.rsv-date {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.rsv-date__label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grey-muted);
}

.rsv-date__value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}

.rsv-date__value.is-empty {
    font-weight: 400;
    color: var(--grey-muted);
}

.rsv-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--grey-muted);
    text-decoration: none;
}

.rsv-edit svg {
    width: 0.875rem;
    height: 0.875rem;
}

.rsv-edit:hover,
.rsv-edit:focus-visible {
    background-color: var(--rsv-tint);
    color: var(--ink);
}

.rsv-nights {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.875rem 0 0;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background-color: rgba(var(--gold-rgb), 0.2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5a4300;
}

/* rooms box */
.rsv-box {
    padding: 1rem;
    border-radius: 8px;
    background-color: var(--rsv-tint);
}

.rsv-box__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.rsv-box__icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--stone-dark);
}

.rsv-box__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
}

.rsv-box__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    margin-left: auto;
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--gold);
    font-size: 0.75rem;
    font-weight: 700;
    color: #1a1a1a;
}

.rsv-empty {
    margin: 0.625rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--grey-muted);
}

.rsv-rooms {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.rsv-room {
    padding: 0.75rem 0;
}

.rsv-room + .rsv-room {
    border-top: 1px solid var(--rsv-line);
}

.rsv-room:last-child {
    padding-bottom: 0;
}

.rsv-room__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.rsv-room__row + .rsv-room__row {
    margin-top: 0.25rem;
}

.rsv-room__name,
.rsv-room__price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
}

.rsv-room__price {
    white-space: nowrap;
}

.rsv-room__meta {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--grey-muted);
}

.rsv-room__remove-form {
    margin: 0;
    flex-shrink: 0;
}

.rsv-room__remove {
    padding: 0.125rem 0;
    border: 0;
    background: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--grey-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.rsv-room__remove:hover {
    color: var(--red-alert);
}

/* add room */
.rsv-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #d8d1c2;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.rsv-add svg {
    width: 0.875rem;
    height: 0.875rem;
}

.rsv-add:hover,
.rsv-add:focus-visible {
    border-color: var(--gold);
    background-color: rgba(var(--gold-rgb), 0.12);
    color: var(--ink);
}

/* amount */
.rsv-total__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.rsv-total__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--grey-muted);
}

.rsv-total__amount {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.rsv-total__note {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: var(--grey-muted);
}

/* next step: the one gold button on the page */
.rsv-next {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background-color: var(--gold);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.15s ease-out;
}

.rsv-next:hover,
.rsv-next:focus-visible {
    background-color: var(--gold-deep);
    color: var(--ink);
}

.rsv-next.is-disabled {
    background-color: #ecebe6;
    color: var(--grey-muted);
    pointer-events: none;
    cursor: default;
}

@media (max-width: 575.98px) {
    .rsv-section { padding: 1.125rem 1.25rem; }
    .rsv-dates__icon { display: none; }
}

/* ------------------------------------------- every rate includes (rooms)
 * The page's closing band: four short groups, then the way on to booking.
 */
.incl {
    padding: 4rem 1rem;
    background-color: #fff;
    border-bottom: 3px solid var(--gold);
    color: var(--ink);
}

.incl__inner {
    max-width: 1200px;
    margin-inline: auto;
}

.incl__head {
    text-align: center;
    margin-bottom: 2.25rem;
}

.incl__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #7a5600;
}

.incl__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 600;
    color: var(--ink);
}

.incl__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.incl__group {
    padding: 1.25rem 1.375rem 1.5rem;
    border: 1px solid var(--rsv-line);
    border-radius: 12px;
    background-color: var(--rsv-tint);
}

.incl__group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.875rem;
    font-size: 1rem;
    font-weight: 600;
    color: #2b2b2b;
}

.incl__group-icon {
    flex-shrink: 0;
    color: #7a5600;
}

.incl__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.incl__list li {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #444;
}

.incl__list li + li {
    margin-top: 0.5rem;
}

.incl__notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    color: #555;
}

.incl__notes li {
    padding: 0 1.25rem;
}

.incl__notes li + li {
    border-left: 1px solid var(--rsv-blocked);
}

.incl__cta {
    margin-top: 2rem;
    text-align: center;
}

@media (max-width: 991.98px) {
    .incl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .incl__grid { grid-template-columns: 1fr; }
    .incl__notes { flex-direction: column; align-items: center; gap: 0.375rem; }
    .incl__notes li + li { border-left: 0; }
}

/* ------------------------------------------------ home: room carousel
 * Every room type in one sideways track: three cards per view from lg,
 * two from md, one (with a peek of the next) on a phone. The track is a
 * real scroll box with snap, so touch swiping works with no script;
 * app.js adds the 8-second advance, the arrows and the dots.
 */
.room-carousel__track {
    --carousel-gap: 1.25rem;
    display: flex;
    gap: var(--carousel-gap);
    margin: 0;
    /* Room for the hover lift and shadow inside the scroll box. */
    padding: 0.375rem 0 0.75rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.room-carousel__track::-webkit-scrollbar {
    display: none;
}

.room-carousel__slide {
    flex: 0 0 min(85%, 22rem);
    min-width: 0;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .room-carousel__slide {
        flex-basis: calc((100% - var(--carousel-gap)) / 2);
    }
}

@media (min-width: 992px) {
    .room-carousel__slide {
        flex-basis: calc((100% - 2 * var(--carousel-gap)) / 3);
    }
}

.room-carousel__slide > .room-card {
    height: 100%;
}

/* Controls: quiet arrows and page bars, matching the room views above. */
.room-carousel__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.room-carousel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid #d8d1c2;
    border-radius: 50%;
    background-color: #fff;
    color: var(--ink);
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.room-carousel__btn:hover,
.room-carousel__btn:focus-visible {
    border-color: var(--gold);
    background-color: var(--gold);
    color: var(--ink);
}

.room-carousel__dots {
    display: flex;
    gap: 0.25rem;
}

/* The bar is thin; the padding makes the target big enough for a finger. */
.room-carousel__dot {
    width: 2rem;
    padding: 1.3125rem 0;
    border: 0;
    background: none;
}

.room-carousel__dot::before {
    content: "";
    display: block;
    height: 3px;
    background-color: var(--rsv-line);
    transition: background-color 0.3s ease-out;
}

.room-carousel__dot.is-active::before {
    background-color: var(--gold);
}

.room-carousel__all {
    padding: 0.5625rem 1.5rem;
    border-color: #d8d1c2;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Before app.js runs (or without it) there is nothing to drive, and when
 * every card already fits in view there is nowhere to go. */
.room-carousel:not(.is-ready) .room-carousel__controls,
.room-carousel.is-single .room-carousel__controls {
    display: none;
}

/* The hover lift would be clipped by the scroll box on touch screens,
 * which have no hover anyway. */
@media (hover: none) {
    .room-carousel .room-card:hover {
        transform: none;
    }
}

/* ------------------------------------------- footer: links + phone layout
 * Contact lines are now links (map, dial, email) or plain rows (hours); the
 * grid that lined the icons up moved from the <li> to the row inside it.
 * Desktop looks as before apart from a hover state on the links.
 */
.footer-contact li {
    display: block;
}

.footer-contact__row {
    display: grid;
    grid-template-columns: 1.0625rem 1fr;
    align-items: start;
    column-gap: 1rem;
    color: #fff;
    text-decoration: none;
}

.footer-contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
    color: #fff;
}

.footer-contact svg {
    margin-top: 0;
}

a.footer-contact__row:hover .footer-text,
a.footer-contact__row:focus-visible .footer-text {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-bar__line {
    display: inline;
}

/* Tablet keeps the three columns, scaled down so the footer sits quieter than
 * the page above it. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .site-footer {
        padding: 2rem 2.5rem 1.5rem;
    }

    .site-footer .row {
        --bs-gutter-x: 2rem;
    }

    .footer-brand {
        gap: 0.75rem;
    }

    .footer-brand .logo-img.logo-md,
    .footer-brand .ust-logo-img {
        height: 2.25rem;
    }

    .footer-heading {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .footer-contact {
        gap: 0.625rem;
    }

    .footer-contact__row {
        column-gap: 0.625rem;
    }

    .footer-about-text {
        text-align: justify;
        hyphens: auto;
    }

    .footer-bar {
        padding: 0.75rem 2.5rem;
    }

    /* Small enough that copyright and credit together fill two lines at most. */
    .footer-bar p {
        font-size: 0.6875rem;
        line-height: 1.5;
    }
}

@media (max-width: 767.98px) {
    .site-footer {
        padding: 2rem 1.25rem 1.5rem;
    }

    /* Logos side by side as a masthead, ruled off from the information below.
     * min-width lets them share a narrow phone instead of overflowing it. */
    .footer-brand {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid rgba(var(--white-rgb), 0.14);
    }

    .footer-brand .logo-img.logo-md,
    .footer-brand .ust-logo-img {
        height: 2.25rem;
        min-width: 0;
    }

    .footer-heading {
        font-size: 1rem;
        margin-bottom: 0.625rem;
    }

    /* A step below the body copy, but above the 12px that is hard to read on a
     * phone. */
    .footer-text {
        font-size: 0.8125rem;
        line-height: 1.6;
    }

    .footer-contact {
        gap: 0.125rem;
    }

    /* Each line is a full-width touch target (at least 44px tall) with the
     * icon in a gold disc, so it reads as something to tap. */
    .footer-contact__row {
        grid-template-columns: 2rem 1fr;
        align-items: center;
        column-gap: 0.75rem;
        min-height: 2.75rem;
        margin-inline: -0.5rem;
        padding: 0.25rem 0.5rem;
        border-radius: 8px;
    }

    a.footer-contact__row:active {
        background-color: rgba(var(--white-rgb), 0.08);
    }

    .footer-contact__icon {
        width: 2rem;
        height: 2rem;
        margin-top: 0;
        border-radius: 50%;
        background-color: rgba(var(--gold-rgb), 0.16);
        color: var(--gold);
    }

    /* Drawn on the heading, not the column, so it spans the same width as the
     * rule under the logos (the column itself includes the gutter). */
    .footer-col + .footer-col > .footer-heading {
        border-top: 1px solid rgba(var(--white-rgb), 0.14);
        padding-top: 1.25rem;
    }

    /* Hyphens close the wide word gaps justifying leaves in a narrow column. */
    .footer-about-text {
        color: rgba(var(--white-rgb), 0.85);
        text-align: justify;
        hyphens: auto;
    }

    .footer-bar {
        padding: 0.75rem 1rem;
    }

    .footer-bar p {
        font-size: 0.6875rem;
        line-height: 1.5;
    }

    /* Copyright and credit cannot share two lines this narrow, so the bar keeps
     * the copyright; the credit shows from tablet width up. */
    .footer-bar__line--small {
        display: none;
    }
}

/* =====================================================================
 * Home: friendlier for every reader
 *
 * Many guests are alumni and visiting family, often older readers. So the
 * motion here is slow, small and one-off (nothing loops, slides on its own
 * or moves while being read), the type is larger than elsewhere, and every
 * action is a big labelled button. prefers-reduced-motion turns all of it
 * off at the end of this block.
 * ===================================================================== */

/* Larger reading sizes for the home page's small print. */
.home-heading__sub {
    font-size: 1rem;
}

/* Hero photo: settles from a slight zoom over one long, single pass. */
.hero-section {
    overflow: hidden;
}

.hero-home {
    animation: hero-settle 18s ease-out both;
}

@keyframes hero-settle {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

/* Below desktop the words sit bottom-left on a scrim that deepens towards the
 * facts band, which leaves the building clear above them. The height follows
 * the screen; svh ignores the browser's collapsing address bar. Only the home
 * hero is restyled here: the Rooms page shares .hero-overlay. */
@media (max-width: 991.98px) {
    .hero-home {
        height: clamp(24rem, 70vh, 44rem);
        height: clamp(24rem, 70svh, 44rem);
        background-image:
            linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 32%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0.72) 100%),
            var(--hero-image, none),
            linear-gradient(100deg, #0d3b3b 0%, #1f5f4f 40%, #b9ad5c 100%);
    }

    .hero-home + .hero-overlay {
        flex-flow: row wrap;
        align-items: center;
        align-content: flex-end;
        justify-content: flex-start;
        column-gap: 2rem;
        padding: 5rem 2.5rem 2rem;
        text-align: left;
    }

    .hero-home + .hero-overlay .hero-eyebrow,
    .hero-home + .hero-overlay .hero-title {
        flex: 0 0 100%;
    }

    .hero-home + .hero-overlay .hero-eyebrow {
        letter-spacing: 0.18em;
    }

    .hero-home + .hero-overlay .hero-sub {
        flex: 0 0 100%;
        max-width: 34rem;
        margin: 0.75rem 0 0;
        text-align: left;
    }

    .hero-home + .hero-overlay .hero-title {
        max-width: none;
        font-size: 2.75rem;
        text-wrap: balance;
    }

    .hero-home + .hero-overlay .hero-cta {
        margin-top: 1.5rem;
    }

    /* An underline rather than a border, so the tap target can grow to 44px
     * without pushing the line away from the words. */
    .hero-home + .hero-overlay .hero-link {
        margin-top: 1.5rem;
        padding-block: 0.75rem;
        border-bottom: 0;
        text-decoration: underline;
        text-underline-offset: 0.3em;
    }
}

@media (max-width: 767.98px) {
    /* Leaves the gold price showing above the fold. */
    .hero-home {
        height: clamp(24rem, calc(100vh - 4.375rem), 42rem);
        height: clamp(24rem, calc(100svh - 4.375rem), 42rem);
    }

    .hero-home + .hero-overlay {
        padding: 5rem 1.25rem 0.75rem;
    }

    .hero-home + .hero-overlay .hero-eyebrow {
        letter-spacing: 0.14em;
    }

    .hero-home + .hero-overlay .hero-sub {
        font-size: 0.875rem;
    }

    .hero-home + .hero-overlay .hero-title {
        font-size: clamp(1.875rem, 8.5vw, 2.5rem);
    }

    .hero-home + .hero-overlay .hero-cta {
        flex: 0 0 100%;
        margin-top: 1.25rem;
    }

    .hero-home + .hero-overlay .hero-link {
        margin-top: 0.25rem;
        margin-inline: auto;
    }
}

/* ------------------------------------------------------- at a glance
 * The reasons to book, right under the hero: type and hair lines only, with the
 * price on brand gold to draw the eye. The hair lines are the band's background
 * showing through the grid gap, so they follow any number of columns. */
.glance {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--rsv-line);
    border-bottom: 1px solid var(--rsv-line);
}

@media (min-width: 576px) {
    .glance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .glance {
        grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
    }
}

.glance__item {
    padding: 1.125rem 1.25rem;
    background-color: #fff;
}

@media (min-width: 992px) {
    .glance__item {
        padding: 1.75rem 2rem;
    }
}

.glance__item--lead {
    background-color: var(--gold);
}

.glance__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

.glance__item--lead .glance__title {
    font-size: 1.375rem;
}

.glance__text {
    max-width: 22rem;
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--charcoal);
}

.glance__item--lead .glance__text {
    color: var(--ink);
}

/* ------------------------------------------------------- how to book
 * A journey rather than a row of boxes: numbered markers joined by a gold line,
 * down the left on a phone or tablet and across from a laptop up. The line is
 * one segment per step, running on to the next marker, so it fits any height of
 * text. These rules are the finished state; the block after them plays it in. */
.book-steps {
    --marker: 3.25rem;
    --steps-gap: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--steps-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.book-step {
    position: relative;
    display: grid;
    grid-template-columns: var(--marker) minmax(0, 1fr);
    align-content: start; /* or the shorter steps stretch and their titles drop out of line */
    column-gap: 1.25rem;
}

.book-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: var(--marker);
    bottom: calc(var(--steps-gap) * -1);
    left: calc(var(--marker) / 2 - 1px);
    width: 2px;
    background-color: var(--gold-deep);
    transform-origin: top center;
}

.book-step__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--marker);
    height: var(--marker);
    border-radius: 50%;
    background-color: var(--gold);
    color: var(--ink);
    font-size: 1.375rem;
    font-weight: 700;
}

.book-step__body {
    padding-top: 0.5rem;
}

.book-step__title {
    margin: 0 0 0.375rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
}

.book-step__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #444;
}

@media (min-width: 992px) {
    .book-steps {
        --steps-gap: 1.5rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .book-step {
        grid-template-columns: minmax(0, 1fr);
    }

    .book-step:not(:last-child)::after {
        top: calc(var(--marker) / 2 - 1px);
        right: calc(var(--steps-gap) * -1);
        bottom: auto;
        left: var(--marker);
        width: auto;
        height: 2px;
        transform-origin: center left;
    }

    .book-step__body {
        padding-top: 1rem;
    }
}

/* Plays once as the steps scroll in: each marker lights up, its words arrive,
 * and the line runs on to the next. About three seconds end to end, and nothing
 * moves again after that. */
@media (prefers-reduced-motion: no-preference) {
    .book-step__marker {
        transition:
            background-color 0.4s ease-out calc(var(--step) * 0.7s),
            color 0.4s ease-out calc(var(--step) * 0.7s),
            transform 0.4s ease-out calc(var(--step) * 0.7s);
    }

    .book-step__body {
        transition:
            opacity 0.5s ease-out calc(var(--step) * 0.7s + 0.1s),
            transform 0.5s ease-out calc(var(--step) * 0.7s + 0.1s);
    }

    .book-step:not(:last-child)::after {
        transition: transform 0.5s ease-in-out calc(var(--step) * 0.7s + 0.25s);
    }

    .book-steps:not(.is-visible) .book-step__marker {
        background-color: var(--rsv-line);
        color: var(--grey-muted);
        transform: scale(0.85);
    }

    .book-steps:not(.is-visible) .book-step__body {
        opacity: 0;
        transform: translateY(10px);
    }

    .book-steps:not(.is-visible) .book-step:not(:last-child)::after {
        transform: scaleY(0);
    }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
    .book-steps:not(.is-visible) .book-step:not(:last-child)::after {
        transform: scaleX(0);
    }
}

.book-steps__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.75rem;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* ------------------------------------------------ home: virtual assistant
 * What the chatbot is for on the left, its opening questions on the right.
 * A dark band so it reads as its own thing between the light sections. */
.assistant-band {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 2rem 3rem;
    align-items: center;
    padding: 2.75rem 3rem;
    border-radius: 16px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 198, 39, 0.16) 0%, rgba(255, 198, 39, 0) 55%),
        #111;
    color: #fff;
}

/* The same small gold label the hero and room cards use above a heading. */
.assistant-band__eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.assistant-band__title {
    margin: 0.5rem 0 0.625rem;
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
    color: #fff;
}

.assistant-band__lead {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(var(--white-rgb), 0.82);
}

.assistant-band__topics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.assistant-band__topics li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: rgba(var(--white-rgb), 0.9);
}

.assistant-band__topics svg {
    flex: none;
    margin-top: 0.125rem;
    color: var(--gold);
}

.assistant-band__note {
    margin: 1.5rem 0 0;
    font-size: 0.8125rem;
    color: rgba(var(--white-rgb), 0.6);
}

.assistant-band__card {
    padding: 1.5rem;
    border: 1px solid rgba(var(--white-rgb), 0.12);
    border-radius: 14px;
    background-color: rgba(var(--white-rgb), 0.05);
}

.assistant-band__try {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--white-rgb), 0.6);
}

.assistant-band__questions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.assistant-band__q {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(var(--white-rgb), 0.16);
    border-radius: 999px;
    background-color: rgba(var(--white-rgb), 0.06);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.assistant-band__q:hover,
.assistant-band__q:focus-visible {
    color: #fff;
}

.assistant-band__q svg {
    flex: none;
    color: var(--gold);
}

.assistant-band__q:hover,
.assistant-band__q:focus-visible {
    border-color: var(--gold);
    background-color: rgba(255, 198, 39, 0.12);
}

.assistant-band__q:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.assistant-band__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    color: #1a1a1a !important;
}

.assistant-band__opens {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    text-align: center;
    color: rgba(var(--white-rgb), 0.55);
}

@media (max-width: 991.98px) {
    .assistant-band {
        grid-template-columns: 1fr;
        padding: 2.25rem 2rem;
    }
}

@media (max-width: 575.98px) {
    .assistant-band {
        padding: 1.75rem 1.25rem;
        border-radius: 12px;
    }
    .assistant-band__topics { grid-template-columns: 1fr; }
    .assistant-band__card { padding: 1.125rem; }
}

/* ------------------------------------------------------ help strip */
.help-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    max-width: 1360px;
    margin: 1.5rem auto 0;
    padding: 2rem 1.5rem;
    background-color: var(--gold-pale);
    border-top: 4px solid var(--gold);
    color: var(--ink);
}

@media (min-width: 768px) {
    .help-strip {
        padding: 2.25rem 3rem;
    }
}

.help-strip__title {
    margin: 0 0 0.375rem;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--ink);
}

.help-strip__lead {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--charcoal);
}

.help-strip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.help-strip__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 3.25rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--ink);
    border-radius: 0;
    background-color: transparent;
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 700;
}

.help-strip__btn:hover,
.help-strip__btn:focus-visible {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.help-strip__btn--call {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

.help-strip__btn--call:hover,
.help-strip__btn--call:focus-visible {
    background-color: var(--gold-deep);
    border-color: var(--gold-deep);
    color: var(--ink);
}

@media (max-width: 575.98px) {
    .help-strip__actions,
    .help-strip__btn { width: 100%; }
    .help-strip__btn { justify-content: center; }
}

/* ---------------------------------------------------- sticky book now
 * On a phone the nav's Book Now sits in the menu, so a bar at the foot of the
 * screen keeps it in reach once the hero has gone. Back to top sits above it. */
.sticky-book {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background-color: var(--gold);
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 -6px 18px rgba(var(--ink-rgb), 0.12);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}

.sticky-book[hidden] {
    display: none;
}

.sticky-book.is-shown {
    transform: none;
}

.sticky-book:hover,
.sticky-book:focus-visible {
    background-color: var(--gold-deep);
    color: var(--ink);
}

@media (min-width: 768px) {
    .sticky-book {
        display: none;
    }
}

@media (max-width: 767.98px) {
    body:has(.sticky-book.is-shown) .back-to-top {
        bottom: 4.5rem;
    }
}

/* ----------------------------------------------------- back to top */
.back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.625rem 1.125rem;
    border: 2px solid var(--gold);
    border-radius: 999px;
    background-color: var(--ink);
    color: var(--gold);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(var(--ink-rgb), 0.25);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.back-to-top[hidden] {
    display: none;
}

.back-to-top.is-shown {
    opacity: 1;
    transform: none;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background-color: var(--gold);
    color: var(--ink);
}

@media (min-width: 768px) {
    .back-to-top { right: 1.5rem; bottom: 1.5rem; }
}

/* Back to top moves focus to <main> so keyboard users restart at the top;
 * the page itself needs no focus ring for that. */
main[tabindex="-1"]:focus {
    outline: none;
}

/* ------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-home,
    .hero-rooms { animation: none; }
    .hero-slide { transition: none; }
    .policy__panel,
    .policy__mark::before,
    .policy__mark::after { transition: none; }
    .room-card,
    .room-type-card .room-photo,
    .back-to-top { transition: none; }
    .room-card:hover,
    .room-type-card:hover .room-photo { transform: none; }
}

/* --------------------------------------------------- home: room views
 * Slides sit on top of each other; the incoming one wipes across the outgoing
 * one, which drifts the other way so the two feel like they have depth. The
 * inactive transform is the start of a slow camera move, so a slide never
 * lands on a still photo. When no photo has been uploaded yet, the slide's own
 * colour shows through instead. */
.view-show {
    --view-wipe: 0.9s;
    --view-ease: cubic-bezier(0.77, 0, 0.18, 1);

    max-width: 1360px;
    margin: 0 auto;
}

.view-show__stage {
    position: relative;
    height: clamp(30rem, 46vw, 40rem);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--ink);
}

.view-show__slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
    overflow: hidden;
    background: linear-gradient(135deg, #6b5518, #b08a2e 55%, #7a6120);
}

.view-show__slide:nth-of-type(3n + 2) {
    background: linear-gradient(135deg, #1f5f4f, #3f8a76 55%, #24604f);
}

.view-show__slide:nth-of-type(3n) {
    background: linear-gradient(135deg, #2b5472, #4f86ad 55%, #2f5a7a);
}

.view-show__slide.is-active,
.view-show__slide.is-leaving {
    visibility: visible;
}

.view-show__slide.is-active {
    z-index: 2;
}

.view-show__slide.is-leaving {
    z-index: 1;
}

.view-show__slide.is-entering-next {
    animation: view-wipe-next var(--view-wipe) var(--view-ease) both;
}

.view-show__slide.is-entering-prev {
    animation: view-wipe-prev var(--view-wipe) var(--view-ease) both;
}

@keyframes view-wipe-next {
    from { clip-path: inset(0 0 0 100%); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes view-wipe-prev {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

.view-show__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem 12rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-align: center;
    text-transform: uppercase;
    color: rgba(var(--white-rgb), 0.55);
}

.view-show__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.14);
}

.view-show__slide.is-active .view-show__photo {
    transform: scale(1);
    transition: transform 9s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.view-show__slide.is-leaving-next .view-show__photo {
    transform: scale(1.04) translateX(-7%);
    transition: transform var(--view-wipe) var(--view-ease);
}

.view-show__slide.is-leaving-prev .view-show__photo {
    transform: scale(1.04) translateX(7%);
    transition: transform var(--view-wipe) var(--view-ease);
}

.view-show__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(var(--ink-rgb), 0.82), rgba(var(--ink-rgb), 0.15) 55%, rgba(var(--ink-rgb), 0.3)),
        linear-gradient(to right, rgba(var(--ink-rgb), 0.45), transparent 60%);
}

/* The words arrive one after another, once the wipe is well under way. */
.view-show__copy {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    max-width: 40rem;
    padding: 1.5rem 1.5rem 5rem;
    color: #fff;
}

@media (min-width: 768px) {
    .view-show__copy {
        padding: 3rem;
    }
}

.view-show__copy > * {
    opacity: 0;
    transform: translateY(1.5rem);
}

.view-show__slide.is-active .view-show__copy > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.view-show__slide.is-active .view-show__copy > :nth-child(1) { transition-delay: 0.35s; }
.view-show__slide.is-active .view-show__copy > :nth-child(2) { transition-delay: 0.45s; }
.view-show__slide.is-active .view-show__copy > :nth-child(3) { transition-delay: 0.55s; }
.view-show__slide.is-active .view-show__copy > :nth-child(4) { transition-delay: 0.65s; }

.view-show__eyebrow {
    margin: 0 0 0.375rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.view-show__name {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.view-show__text {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(var(--white-rgb), 0.9);
}

.view-show__rooms {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: rgba(var(--white-rgb), 0.7);
}

/* "Next": a window onto the following slide, with its timer along the bottom. */
.view-show__peek {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 15rem;
    max-width: calc(100% - 2.5rem);
    padding: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(var(--white-rgb), 0.25);
    background-color: rgba(var(--ink-rgb), 0.45);
    backdrop-filter: blur(10px);
    color: #fff;
    text-align: left;
    opacity: 0;
    transform: translateX(1.5rem);
    transition: background-color 0.2s ease-out;
}

.view-show__slide.is-active .view-show__peek {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease-out 0.6s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s, background-color 0.2s ease-out;
}

.view-show__peek:hover,
.view-show__peek:focus-visible {
    background-color: rgba(var(--ink-rgb), 0.7);
}

.view-show__peek-frame {
    flex: none;
    width: 4.5rem;
    height: 3.25rem;
    overflow: hidden;
    background: linear-gradient(135deg, #4a3808, #14493d);
}

.view-show__peek-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-out;
}

.view-show__peek:hover .view-show__peek-frame img {
    transform: scale(1.1);
}

.view-show__peek-text {
    min-width: 0;
    line-height: 1.3;
}

.view-show__peek-text small {
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}

.view-show__peek-text strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
}

.view-show__timer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
}

.view-show__slide.is-active .view-show__timer {
    animation: view-timer 7s linear 0.9s forwards;
}

.view-show.is-held .view-show__timer {
    animation-play-state: paused !important;
}

@keyframes view-timer {
    to { transform: scaleX(1); }
}

.view-show__controls {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.view-show__dots {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.5rem;
}

/* The bar is thin; the padding makes the target big enough for a thumb. */
.view-show__dot {
    width: 2rem;
    padding: 1.3125rem 0;
    border: 0;
    background: none;
}

.view-show__dot::before {
    content: '';
    display: block;
    height: 3px;
    background-color: rgba(var(--white-rgb), 0.4);
    transition: background-color 0.2s ease-out;
}

.view-show__dot:hover::before {
    background-color: #fff;
}

.view-show__dot.is-active::before {
    background-color: var(--gold);
}

.view-show__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(var(--white-rgb), 0.35);
    background-color: rgba(var(--ink-rgb), 0.35);
    color: #fff;
    transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.view-show__arrow:hover,
.view-show__arrow:focus-visible {
    border-color: var(--gold);
    background-color: var(--gold);
    color: var(--ink);
}

.view-show button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .view-show__peek {
        top: 0.75rem;
        right: 0.75rem;
        width: 12.5rem;
    }

    .view-show__peek-frame {
        width: 3.25rem;
        height: 2.5rem;
    }

    .view-show__dot {
        width: 1.5rem;
    }

    .view-show__text {
        font-size: 0.9375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .view-show__slide.is-entering-next,
    .view-show__slide.is-entering-prev,
    .view-show__slide.is-active .view-show__timer {
        animation: none;
    }

    .view-show__photo,
    .view-show__slide.is-active .view-show__photo {
        transform: none;
        transition: none;
    }

    .view-show__copy > *,
    .view-show__peek,
    .view-show__slide.is-active .view-show__copy > *,
    .view-show__slide.is-active .view-show__peek {
        opacity: 1;
        transform: none;
        transition: none;
    }
}