/* ===================================================
   NIVASANA COLLECTION – BRAND HOMEPAGE  |  styles.css
   =================================================== */

:root {
    --gold:        #B8964D;
    --gold-dark:   #8e6f31;
    /* The brand site's primary button colour is near-black (gold is the accent);
       the child property sheets override --brand with their own colour. Defining
       it here makes the shared mobile booking FAB / modal — which use
       var(--brand, …) — match the desktop buttons instead of falling back to
       gold. The homepage modal is re-themed light below so the dark button stays
       readable. */
    --brand:       #111;
    --brand-dark:  #333;
    --cream:       #F1ECE3;
    --cream-light: #F8F4ED;
    --ink:         #1a1a1a;
    --muted:       #666;
    --border:      #e2dfd8;
    /* ---- Shared page layout: one content width + one side gutter for every
       section (navbar, hero, cards, offers, contact, footer) so the left/right
       margins line up with the property sites. Box is 1180 incl. 2×40 gutter,
       giving a ~1100px content area. Gutter shrinks on mobile (see @media). */
    --page-max:    1180px;
    --page-gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Raleway', sans-serif;
    color: var(--ink);
    line-height: 1.65;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* ---- Accessibility helpers ---- */
/* Visually hidden but available to screen readers (e.g. page <h1>). */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Visible keyboard focus for interactive elements (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand, var(--gold, #B8964D));
    outline-offset: 2px;
    border-radius: 2px;
}


/* ===================================================
   MAIN NAVIGATION
   =================================================== */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--cream);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--page-gutter);
    height: 80px;
    max-width: var(--page-max);
    margin: 0 auto;
}

.nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-logo-img {
    height: 32px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-links a {
    font-size: 13px;
    font-weight: 500;
    color: #2d2d2d;
    transition: color 0.2s;
}

.nav-links a:hover { color: var(--gold-dark); }
.nav-links .arrow { font-size: 8px; vertical-align: middle; margin-left: 2px; }

/* Desktop dropdown */
.has-dropdown { position: relative; }

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    border: 1px solid #e2dfd8;
    border-radius: 4px;
    padding: 6px 0;
    min-width: 240px;
    z-index: 1001;
    margin-top: 0;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 11px 22px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: #2d2d2d;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.dropdown-menu li a:hover {
    background: var(--cream-light);
    color: var(--gold-dark);
}

.btn-header-book {
    display: inline-flex;
    align-items: center;
    height: 42px;
    background: #111;
    color: #fff;
    padding: 0 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 4px;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-header-book:hover { background: #333; }


/* ===================================================
   HERO SECTION
   =================================================== */
.hero-section {
    background: var(--cream);
    padding: 0 0 32px;
    position: relative;
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.hero-section .search-widget-wrap {
    margin-top: auto;
    flex-shrink: 0;          /* form keeps its height — never pushed below the fold */
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: var(--page-max);
    width: 100%;
    margin: 0 auto;
    padding: 60px var(--page-gutter) 50px;
    flex: 1 1 0;             /* take only leftover space (basis 0) so the form is never pushed down */
    min-height: 0;           /* allow the hero content to shrink so the form stays visible */
    overflow: hidden;        /* clip the image instead of forcing the section taller */
    box-sizing: border-box;
}

.hero-text {
    align-self: center;
}

.hero-text h1 {
    font-family: 'Raleway', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    letter-spacing: normal;
    text-transform: uppercase;
}

.hero-image {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ===================================================
   SEARCH WIDGET
   =================================================== */
.search-widget-wrap {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

/* While a date / Rooms & Guests popup is open, lift the whole booking widget
   above the sticky header so the popup is never clipped or hidden on scroll. */
.search-widget-wrap.bb-elevated {
    position: relative;
    z-index: 1100;
}

.brand-booking {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: rgba(241, 236, 227, 0.88);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    margin-top: 8px;
}

.bb-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.15fr;
    gap: 16px;
    align-items: flex-start;
}

.bb-field,
.bb-action {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Both rows share the main row's columns, pinned to explicit grid lines.
   Place occupies the Check In + Check Out columns (1–2) → ends level with
   Check Out. Hotel stretches across the Rooms & Guests, Promo Code and
   Book Now columns (3–5) → its right edge lines up with the Book Now button
   below it. */
.bb-row-top .bb-field:nth-of-type(1) { grid-column: 1 / 3; }
.bb-row-top .bb-field:nth-of-type(2) { grid-column: 3 / 5; }
/* Book Now / nightly-rate cell sits in the last column (5). A persistent
   Book Now is added to the top row so the compact default form reads
   Place | Hotel | Book Now. */
.bb-row .bb-action { grid-column: 5 / -1; }
/* Bottom-align the top-row Book Now so it sits level with the Place / Hotel
   inputs, which have a label above them. */
.bb-row-top .bb-action { align-self: end; }

/* Book Now lives in the top row while the form is compact. Once the extra
   fields are revealed (and the form isn't collapsed) it swaps to the bottom
   row's last column, sliding/fading in alongside the other secondary fields. */
.bb-row-extra .bb-action { align-self: end; }
.bb-action-bottom { display: none; }
.brand-booking.bb-revealed:not(.is-collapsed) .bb-action-top { display: none; }
.brand-booking.bb-revealed:not(.is-collapsed) .bb-action-bottom { display: flex; }

/* Grid (not flex) so the secondary row shares the top row's columns and
   stays aligned. Its visibility is gated by the progressive-reveal rules
   below — only Place + Hotel show until both are chosen. */
.bb-row-extra { display: grid; }
.bb-footer    { display: grid; }

/* Collapsing hides only the date/guest/promo inputs — Book Now stays. */
.brand-booking.is-collapsed .bb-row-extra .bb-field { display: none; }

/* --- Progressive reveal: show only Place + Hotel until both are chosen --- */
/* Pre-JS guard: keep the secondary fields hidden so the full form never
   flashes before the reveal logic is wired up. */
.brand-booking:not(.bb-ready) .bb-row-extra,
.brand-booking:not(.bb-ready) .bb-footer { display: none; }

/* Smoothly slide the secondary fields open/closed by animating an explicit
   height (set from the content's measured height in booking-form.js). Height
   is animated instead of `grid-template-rows: 0fr → 1fr` because the fr-unit
   transition is not honoured on several mobile browsers, where the form snaps
   open instantly instead of sliding. */
.bb-extra-wrap {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
.bb-extra-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.brand-booking.bb-revealed .bb-extra-wrap {
    opacity: 1;
}
/* Once fully open, let the date / guests popups spill outside the wrapper. */
.bb-extra-wrap.is-open { overflow: visible; }
/* Instant open (no animation) for property pages on first paint. */
.brand-booking.bb-no-anim .bb-extra-wrap { transition: none; }

.bb-field label,
.bb-price {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #2d2d2d;
    margin-bottom: 5px;
    min-height: 15px;
    cursor: pointer;
}

.bb-price {
    font-size: 11px;
    color: #5a554c;
    text-align: left;
    white-space: nowrap;
    cursor: default;
}

.bb-control {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bb-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--gold-dark);
    pointer-events: none;
}

.bb-chevron {
    position: absolute;
    right: 13px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    color: var(--gold-dark);
    pointer-events: none;
}

.bb-control select {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: 'Raleway', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    outline: none;
    padding: 0 32px 0 38px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bb-control select:invalid,
.bb-control select option[value=""] { color: var(--muted); }

.bb-control select option { color: var(--ink); }

.bb-control input.bb-text {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: 'Raleway', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    outline: none;
    padding: 0 12px 0 38px;
    cursor: pointer;
}

.bb-control input.bb-text::placeholder { color: var(--muted); font-weight: 500; }
.bb-control input#sf-promo { cursor: text; }

.bb-control.bb-error { box-shadow: 0 0 0 1.5px #8B1A1A; }

/* ---- Rooms & Guests popup ---- */
.bb-guests-field { position: relative; }

.bb-guests-trigger {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: 'Raleway', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    text-align: left;
    outline: none;
    padding: 0 32px 0 38px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guests-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    width: 330px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20);
    font-family: 'Raleway', sans-serif;
    overflow: hidden;
}

.guests-popup[hidden] { display: none; }

/* When a popup can't fit below its field, booking-form.js flips it above so it
   stays fully inside the viewport on short screens. */
.guests-popup.bb-flip-up {
    top: auto;
    bottom: calc(100% + 6px);
}
.date-picker-popup.bb-flip-up {
    top: auto;
    bottom: calc(100% + 10px);
}

.gp-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    padding: 13px 16px;
    border-bottom: 1px solid #ececec;
}

.gp-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

.gp-total-label { font-size: 13px; color: #4a4a4a; }

.gp-room {
    padding: 12px 16px 14px;
    background: #f7f7f7;
    border-top: 1px solid #ececec;
}

.gp-room-title {
    font-size: 12px;
    font-weight: 600;
    color: #111;
    margin-bottom: 10px;
}

.gp-guest-row { display: flex; gap: 18px; }
.gp-guest { flex: 1; min-width: 0; }
.gp-ages { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.gp-age-field { display: flex; flex-direction: column; gap: 4px; }
.gp-age-label { font-size: 11px; color: var(--muted, #666); }
.gp-age { padding: 6px 8px; border: 1px solid var(--border, #e2dfd8); border-radius: 4px; font: inherit; font-size: 13px; background: #fff; color: var(--ink, #1a1a1a); }

.gp-guest-label {
    display: block;
    font-size: 12px;
    color: #555;
    margin-bottom: 7px;
}

.gp-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.gp-step {
    width: 30px;
    height: 30px;
    border: none;
    background: #f1f1f1;
    color: #333;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.gp-step:hover { background: #e4e4e4; }

.gp-num {
    min-width: 36px;
    padding: 0 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.gp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-top: 1px solid #ececec;
}

.gp-add {
    border: none;
    background: none;
    color: #111;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.gp-add:hover { text-decoration: underline; }

.gp-done {
    border: none;
    background: #111;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 9px 28px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.gp-done:hover { background: #333; }

.bb-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background: #111;
    color: #fff;
    border: none;
    padding: 0 28px;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.bb-book-btn:hover { background: #333; }

/* ---- Homepage mobile booking modal: light theme matching the desktop form.
   booking-form.js injects a shared DARK modal card (great for the property
   pages, whose buttons are coloured). On the brand homepage the Book Now button
   is near-black (#111), which would vanish on a dark card — so re-theme the card
   light here. These rules live in styles.css (homepage only) and use a `body`
   prefix to outrank the injected dark-theme rules, which load after this sheet. */
body .bb-modal-card { background: var(--cream); }
body .bb-modal-close { background: rgba(0, 0, 0, 0.08); color: #1a1a1a; }
body .bb-modal-close:hover { background: rgba(0, 0, 0, 0.16); }
body .bb-modal .bb-field label,
body .bb-modal .bb-price,
body .bb-modal .bb-toggle,
body .bb-modal .bb-toggle-text { color: #2d2d2d; }
body .bb-modal .bb-sublink { color: var(--gold-dark); }

.bb-sublink {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    margin-top: 8px;
    align-self: flex-start;
    transition: color 0.2s;
}

.bb-sublink:hover { color: var(--gold-dark); text-decoration: underline; }

/* Footer row: shares the row grid so each item sits under its field
   (toggle under Place · "Why Book Direct?" under Hotel · "Manage Booking" under Book Now) */
.bb-footer {
    grid-template-columns: repeat(4, 1fr) 1.15fr;
    gap: 22px;
    align-items: center;
    margin-top: 2px;
}

.bb-footer .bb-toggle { grid-column: 1; justify-self: start; }
.bb-footer .bb-why    { grid-column: 3; justify-self: start; }
.bb-footer .bb-manage { grid-column: 5; justify-self: start; }

/* The Why Book Direct? / Manage Booking links stay visible at all times,
   including the compact default phase. The Show More / Less toggle only has
   something to act on once the secondary fields are revealed, so keep just the
   toggle hidden until then. */
.brand-booking:not(.bb-revealed):not(.bb-user-collapsed) .bb-toggle { visibility: hidden; }

/* In the compact phase the wrapped date/guest fields are empty, so the doubled
   flex gap around that wrapper leaves too much space above the links. Pull the
   footer up so the links sit just below Place / Hotel. */
.brand-booking:not(.bb-revealed) .bb-footer,
.brand-booking.is-collapsed .bb-footer { margin-top: -12px; }

.bb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.2s;
}

.bb-toggle:hover { color: var(--gold-dark); }

.bb-toggle-sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
}

.bb-footer .bb-sublink { margin-top: 0; align-self: center; }


/* ===================================================
   INLINE DATE PICKER (used inside booking bar)
   =================================================== */
.date-picker-popup {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: -18px;
    width: 300px;
    background: #fff;
    border: 1px solid #e2dfd8;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    padding: 20px;
    font-family: 'Raleway', sans-serif;
}

.dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0eee8;
}

.dp-month {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #222;
    text-transform: uppercase;
}

.dp-nav {
    background: none;
    border: none;
    font-size: 16px;
    color: #888;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
}

.dp-nav:hover { background: #f5f2eb; color: #111; }

.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.dp-day-name {
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    color: #b8b1a0;
    padding: 6px 0 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dp-day {
    background: none;
    border: none;
    font-size: 12.5px;
    color: #333;
    cursor: pointer;
    padding: 9px 0;
    text-align: center;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.dp-day:hover:not([disabled]) { background: #f5f2eb; }

.dp-day.dp-sel {
    background: #111;
    color: #fff;
}

.dp-day.dp-past {
    color: #ccc;
    cursor: not-allowed;
}


/* ===================================================
   SECTION TAGLINE
   =================================================== */
.section-tagline {
    max-width: var(--page-max);
    margin: 24px auto 16px;
    padding: 0 var(--page-gutter);
    font-size: 13px;
    font-weight: 600;
    color: #222;
    letter-spacing: 0.2px;
}

/* When the tagline is nested inside a section, it gets the .card-tag style:
   small, uppercase, wide letter-spacing — to match "CULINARY JOURNEYS". */
.offers-section > .section-tagline,
.contact-section > .section-tagline {
    margin: 0 auto 8px;
    padding: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold);
}


/* ===================================================
   CARDS GRID
   =================================================== */
.cards-grid {
    max-width: var(--page-max);
    margin: 0 auto 22px;
    padding: 0 var(--page-gutter);
    display: grid;
    gap: 22px;
}

.cards-grid.two-up {
    grid-template-columns: 1fr 1fr;
}

.cards-grid.one-up {
    grid-template-columns: 1fr;
}

.brand-card {
    position: relative;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    color: #fff;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.brand-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.brand-card:hover img {
    transform: scale(1.04);
}

.brand-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 35%,
        rgba(0,0,0,0.55) 100%
    );
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 26px 30px;
    z-index: 2;
}

.card-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
    color: #fff;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.card-overlay h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    letter-spacing: normal;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.brand-card.wide .card-overlay h3 {
    font-size: 32px;
}

.card-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.92);
    margin-top: 6px;
    font-weight: 400;
}


/* ===================================================
   OFFERS SECTION
   =================================================== */
.offers-section {
    padding: 40px var(--page-gutter);
    background: var(--cream-light);
    text-align: center;
}

.offers-heading {
    font-family: 'Raleway', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: uppercase;
    margin: 0 0 28px;
}

.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    /* Section already supplies the side gutter, so this inner grid is the
       content width (page box minus both gutters) — aligns with nav/cards. */
    max-width: calc(var(--page-max) - 2 * var(--page-gutter));
    margin: 0 auto;
}

.offer-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: left;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.offer-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1ece3;
}

.offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.offer-card:hover .offer-image img { transform: scale(1.04); }

.offer-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.offer-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--gold);
}

.offer-body h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: normal;
    text-transform: uppercase;
}

.offer-body p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
}

/* ===================================================
   CONTACT SECTION
   =================================================== */
.contact-section {
    padding: 40px var(--page-gutter);
    background: #fff;
    text-align: center;
}

.contact-heading {
    font-family: 'Raleway', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: uppercase;
    margin: 0 0 28px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    /* Section supplies the side gutter; inner grid matches the content width. */
    max-width: calc(var(--page-max) - 2 * var(--page-gutter));
    margin: 0 auto;
}

.contact-card {
    background: var(--cream-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: left;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    overflow: hidden;
    min-height: 460px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

.contact-image {
    overflow: hidden;
    background: #f1ece3;
    height: 100%;
}

.contact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.contact-card:hover .contact-image img { transform: scale(1.04); }

.contact-body {
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
}

.contact-property-name {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: normal;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.contact-region {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 22px;
}

.contact-address {
    font-style: normal;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-list li {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: baseline;
    gap: 14px;
}

.contact-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #888;
}

.contact-list a {
    font-size: 13.5px;
    color: var(--ink);
    transition: color 0.2s;
}

.contact-list a:hover { color: var(--gold); }

.contact-cta {
    margin-top: auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--gold);
    transition: color 0.2s;
}

.contact-cta:hover { color: var(--gold-dark); }


/* ===================================================
   FOOTER
   =================================================== */
.main-footer {
    background: #f1ece3;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.footer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 20px var(--page-gutter) 18px;
}

.footer-collection { text-align: left; }

.footer-collection h4 {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #888;
    margin-bottom: 8px;
}

.footer-collection a {
    display: block;
    font-size: 12px;
    color: #555;
    margin: 4px 0;
    transition: color 0.2s;
}

.footer-collection a:hover { color: var(--ink); }

.footer-policy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.footer-policy a {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    color: #444;
    transition: color 0.2s;
}

.footer-policy a:hover { color: var(--ink); }

/* ---- "OUR POLICY" property picker ---- */
.policy-picker { position: relative; }

.policy-picker-toggle {
    /* match the look of the sibling .footer-policy links */
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    color: #444;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s;
}

.policy-picker-toggle:hover,
.policy-picker-toggle[aria-expanded="true"] { color: var(--ink); }

.policy-picker-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 20;
}

.policy-picker-menu[hidden] { display: none; }

.policy-picker-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 2px;
}

.policy-picker-menu a {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: #555;
    text-align: left;
    transition: color 0.2s;
}

.policy-picker-menu a:hover { color: var(--ink); }

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

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 12px var(--page-gutter);
}

.footer-bottom p {
    font-size: 10.5px;
    color: #777;
}

.footer-social {
    display: flex;
    gap: 14px;
}

.social-icon {
    color: #888;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.social-icon:hover { color: var(--ink); }


/* ===================================================
   HAMBURGER / MOBILE NAV
   =================================================== */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: 12px;
}

.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #111;
    border-radius: 4px;
    transition: transform 0.25s, opacity 0.25s;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--cream);
    z-index: 998;
    padding: 20px 24px 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.mobile-nav.open { display: block; }

.mobile-nav ul { margin-bottom: 20px; }

.mobile-nav ul li { border-bottom: 1px solid #d9d3c5; }

.mobile-nav ul li a {
    display: block;
    padding: 14px 0;
    font-size: 13px;
    font-weight: 500;
    color: #2d2d2d;
}

.mobile-group-label {
    padding: 14px 0 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #999;
    text-transform: uppercase;
}

.mobile-sub-item a {
    padding-left: 14px !important;
    font-size: 12.5px !important;
}

.btn-mobile-book {
    display: block;
    width: 100%;
    text-align: center;
    background: #111;
    color: #fff;
    padding: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 4px;
    margin-top: 8px;
}


/* ===================================================
   RESPONSIVE — TABLET (≤ 1100px)
   =================================================== */
@media (max-width: 1100px) {
    /* Narrow the shared side gutter so every section tracks it together */
    :root                   { --page-gutter: 36px; }

    .hero-grid              { gap: 40px; padding: 50px var(--page-gutter) 40px; }
    .hero-text h1           { font-size: 40px; }

    .bb-row                 { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
    .bb-row-top .bb-field:nth-of-type(1),
    .bb-row-top .bb-field:nth-of-type(2) { grid-column: auto; }
    .bb-row .bb-action { grid-column: 1 / -1; align-self: auto; }
    .bb-book-btn            { width: 100%; }
    .bb-footer              { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
    .bb-footer .bb-toggle,
    .bb-footer .bb-why,
    .bb-footer .bb-manage   { grid-column: auto; }
    .bb-footer .bb-manage   { margin-left: auto; }

    .card-overlay h3        { font-size: 22px; }
    .brand-card.wide .card-overlay h3 { font-size: 26px; }

    .offers-section         { padding: 40px var(--page-gutter); }
    .offers-heading         { font-size: 28px; margin-bottom: 24px; }
    .offers-grid            { grid-template-columns: 1fr 1fr; gap: 24px; }

    .contact-section        { padding: 40px var(--page-gutter); }
    .contact-heading        { font-size: 28px; margin-bottom: 24px; }
    .contact-grid           { grid-template-columns: 1fr; gap: 24px; max-width: 760px; }
    .contact-card           { min-height: 380px; }
    .contact-body           { padding: 28px 28px 26px; }
}


/* ===================================================
   RESPONSIVE — MOBILE (≤ 768px)
   =================================================== */
@media (max-width: 768px) {
    /* Shared side gutter shrinks for phones — every section follows */
    :root                   { --page-gutter: 20px; }

    .main-nav               { height: 64px; }
    .nav-links,
    .btn-header-book        { display: none; }
    .nav-hamburger          { display: flex; }
    .mobile-nav             { top: 64px; }

    /* Navbar stays at the top; the hero image sits directly beneath it as a
       full-bleed banner, with the heading below. Drop the full-viewport
       min-height that otherwise left large empty gaps above/below the content. */
    .hero-section           { padding: 0 0 16px; min-height: 0; }
    /* The section is no longer full-height, so the grid must size to its content.
       Otherwise the base flex:1 1 0 + min-height:0 + overflow:hidden collapse it
       to 0px and clip the hero image + heading away (blank top on mobile). */
    .hero-grid              { grid-template-columns: 1fr; gap: 0; padding: 0; align-content: start;
                              flex: 0 0 auto; min-height: auto; overflow: visible; }
    .hero-image             { order: -1; width: 100%; border-radius: 0; box-shadow: none; }
    .hero-image img         { aspect-ratio: auto; height: 280px; }
    .hero-text              { padding: 18px var(--page-gutter) 0; }
    .hero-text h1           { font-size: 28px; }

    .brand-booking          { gap: 14px; margin-top: 4px; padding: 18px; }
    .bb-row                 { grid-template-columns: 1fr; gap: 14px; }
    .bb-row-top .bb-field:nth-of-type(1),
    .bb-row-top .bb-field:nth-of-type(2),
    .bb-row .bb-action { grid-column: auto; }
    .bb-book-btn            { width: 100%; }
    .bb-footer              { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .bb-footer .bb-manage   { margin-left: 0; }

    .section-tagline        { margin: 28px auto 14px; font-size: 14.5px; }

    .cards-grid             { gap: 16px; }
    .cards-grid.two-up      { grid-template-columns: 1fr; }
    .card-overlay           { padding: 20px 22px; }
    .card-overlay h3        { font-size: 21px; }
    .brand-card.wide .card-overlay h3 { font-size: 23px; }

    .offers-section         { padding: 36px var(--page-gutter); }
    .offers-heading         { font-size: 25px; margin-bottom: 22px; }
    .offers-grid            { grid-template-columns: 1fr; gap: 20px; }
    .offer-body             { padding: 18px 20px 22px; }
    .offer-body h3          { font-size: 21px; }
    .offer-body p           { font-size: 15px; }

    .contact-section        { padding: 36px var(--page-gutter); }
    .contact-heading        { font-size: 25px; margin-bottom: 22px; }
    .contact-grid           { grid-template-columns: 1fr; gap: 18px; max-width: none; }
    .contact-card           { grid-template-columns: 1fr; min-height: 0; }
    .contact-image          { aspect-ratio: 16 / 10; height: auto; }
    .contact-body           { padding: 22px 22px 24px; }
    .contact-property-name  { font-size: 23px; }
    .contact-address        { font-size: 15px; }
    .contact-list a         { font-size: 15px; }

    .footer-main            { flex-direction: column; gap: 18px; padding: 20px var(--page-gutter) 16px; }
    .footer-policy          { align-items: flex-start; gap: 10px; }
    .policy-picker-menu     { right: auto; left: 0; }
    .footer-bottom-inner    { flex-direction: column; gap: 10px; padding: 12px var(--page-gutter); text-align: center; }

    /* ---- Mobile legibility: bump up body copy, navigation, labels and the
       booking-form text so nothing reads smaller than it does on desktop.
       Large display headings keep their own (reduced) mobile sizes above. ---- */
    body                    { font-size: 16px; }

    /* Primary navigation drawer */
    .mobile-nav ul li a     { font-size: 16px; }
    .mobile-sub-item a      { font-size: 15px !important; }
    .mobile-group-label     { font-size: 11.5px; }
    .btn-mobile-book        { font-size: 13px; }

    /* Cards — strengthen the scrim and add text-shadows so white overlay
       text stays legible over bright images on small screens. */
    .brand-card::after {
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0.15) 38%,
            rgba(0,0,0,0.78) 100%
        );
    }
    .card-tag               { font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
    .card-overlay h3        { text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
    .card-desc              { font-size: 15px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

    /* Offers */
    .offer-tag              { font-size: 11px; }

    /* Contact */
    .contact-region         { font-size: 12px; }
    .contact-label          { font-size: 11px; }
    .contact-cta            { font-size: 12px; }

    /* Footer */
    .footer-collection h4   { font-size: 11px; }
    .footer-collection a    { font-size: 14.5px; }
    .footer-policy a,
    .policy-picker-toggle   { font-size: 12px; }
    .policy-picker-menu a   { font-size: 14px; }
    .footer-bottom p        { font-size: 13px; }

    /* Booking form (homepage widget + mobile modal). A native <select> renders
       slightly larger than a text input at the same px, so the dropdowns are
       dropped 1px to read the same size as the date/promo placeholders. The
       text inputs stay at 16px to avoid iOS zoom-on-focus. */
    .bb-field label,
    .bb-price               { font-size: 13px; }
    .bb-control input.bb-text { font-size: 16px; }
    .bb-guests-trigger      { font-size: 16px; }
    .bb-control select      { font-size: 15px; }
    /* Taller control on mobile so the 16px text sits vertically centred with the
       (top:50%) field icon, and gives a comfortable touch target. */
    .bb-control             { height: 46px; }
    .bb-toggle,
    .bb-toggle-text,
    .bb-sublink             { font-size: 13px; }
    .gp-title               { font-size: 15px; }
    .gp-total-label,
    .gp-guest-label,
    .gp-room-title          { font-size: 14px; }
    .gp-num                 { font-size: 15px; }
    .gp-add,
    .gp-done                { font-size: 14px; }
}


/* ===================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   =================================================== */
@media (max-width: 480px) {
    .hero-text h1           { font-size: 24px; }
    .hero-image img         { height: 240px; }
    .nav-logo-img           { height: 26px; }
    .card-overlay h3        { font-size: 17px; }
    .brand-card.wide .card-overlay h3 { font-size: 19px; }
}


/* ===================================================
   RESPONSIVE — SHORT VIEWPORTS (laptops / small windows)
   Compress the hero text & spacing so the booking form
   stays within the first screen without scrolling.
   =================================================== */
@media (min-width: 769px) and (max-height: 760px) {
    .hero-grid              { padding: 34px var(--page-gutter) 28px; gap: 40px; }
    .hero-text h1           { font-size: 38px; }
}

@media (min-width: 769px) and (max-height: 640px) {
    .hero-grid              { padding: 22px var(--page-gutter) 18px; gap: 28px; }
    .hero-text h1           { font-size: 30px; }
}


/* ===================================================
   PHOTO GALLERY MODAL
   =================================================== */
.js-open-gallery { cursor: pointer; }

.gallery-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 60px 80px;
    box-sizing: border-box;
}

.gallery-modal.is-open {
    display: flex;
}

.gallery-stage {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.gallery-image {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    display: block;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gallery-image.is-loaded {
    opacity: 1;
}

.gallery-caption {
    color: #f0ece2;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    letter-spacing: 1px;
    margin-top: 18px;
    text-align: center;
    font-style: italic;
}

.gallery-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 12px;
    font-family: inherit;
    transition: opacity 0.2s;
    opacity: 0.85;
}

.gallery-close:hover { opacity: 1; }

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    font-family: inherit;
}

.gallery-nav:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.5);
}

.gallery-prev { left: 28px; }
.gallery-next { right: 28px; }

.gallery-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 600;
}

body.gallery-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .gallery-modal     { padding: 50px 16px; }
    .gallery-image     { max-height: 70vh; }
    .gallery-nav       { width: 42px; height: 42px; }
    .gallery-nav svg   { width: 22px; height: 22px; }
    .gallery-prev      { left: 10px; }
    .gallery-next      { right: 10px; }
    .gallery-close     { top: 12px; right: 14px; font-size: 30px; }
    .gallery-caption   { font-size: 13px; margin-top: 12px; }
    .gallery-counter   { bottom: 14px; font-size: 10px; letter-spacing: 2px; }
}


/* ===================================================
   SCROLL-REVEAL ANIMATIONS
   Paired with scroll-reveal.js. Initial hidden state is
   gated by html.reveal-on (added in <head> before paint)
   so there is no flash of unstyled content. ".rv-done" is
   added once the entrance finishes, releasing the element
   back to its natural styles (hover transitions, etc.).
   =================================================== */
html.reveal-on :is(
    .hero-image, .brand-card, .section-banner, .room-detail-gallery,
    .hero-text h1, .brand-booking, .section-tagline, .offers-heading,
    .contact-heading, .hero-content, .booking-bar, .info-row,
    .hotel-description, .section-title, .fac-left, .fac-topic,
    .two-col-fd .col, .three-col .col, .loc-address-col, .loc-details-col,
    .transport-item, .rooms-intro, .room-detail-info,
    .footer-collection, .footer-policy,
    .offer-card, .contact-card
):not(.rv-done) {
    opacity: 0;
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s ease;
    transition-delay: var(--rv-delay, 0s);
    will-change: opacity, transform;
}

/* RISE — text & content blocks fade up with a clearing blur */
html.reveal-on :is(
    .hero-text h1, .brand-booking, .section-tagline, .offers-heading,
    .contact-heading, .hero-content, .booking-bar, .info-row,
    .hotel-description, .section-title, .fac-left, .fac-topic,
    .two-col-fd .col, .three-col .col, .loc-address-col, .loc-details-col,
    .transport-item, .rooms-intro, .room-detail-info,
    .footer-collection, .footer-policy
):not(.rv-done) {
    transform: translateY(38px);
    filter: blur(3px);
}

/* SOFT — fade only (these cards already lift on hover) */
html.reveal-on :is(.offer-card, .contact-card):not(.rv-done) {
    filter: blur(2px);
}

/* ZOOM — feature imagery settles in from a slight scale */
html.reveal-on :is(
    .hero-image, .brand-card, .section-banner, .room-detail-gallery
):not(.rv-done) {
    transform: scale(1.06);
}

/* Revealed states */
html.reveal-on :is(
    .hero-image, .brand-card, .section-banner, .room-detail-gallery,
    .hero-text h1, .brand-booking, .section-tagline, .offers-heading,
    .contact-heading, .hero-content, .booking-bar, .info-row,
    .hotel-description, .section-title, .fac-left, .fac-topic,
    .two-col-fd .col, .three-col .col, .loc-address-col, .loc-details-col,
    .transport-item, .rooms-intro, .room-detail-info,
    .footer-collection, .footer-policy
):not(.rv-done).is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
}

html.reveal-on :is(.offer-card, .contact-card):not(.rv-done).is-revealed {
    opacity: 1;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    html.reveal-on :is(
        .hero-image, .brand-card, .section-banner, .room-detail-gallery,
        .hero-text h1, .brand-booking, .section-tagline, .offers-heading,
        .contact-heading, .hero-content, .booking-bar, .info-row,
        .hotel-description, .section-title, .fac-left, .fac-topic,
        .two-col-fd .col, .three-col .col, .loc-address-col, .loc-details-col,
        .transport-item, .rooms-intro, .room-detail-info,
        .footer-collection, .footer-policy, .offer-card, .contact-card
    ) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


/* ===================================================
   BACK TO TOP BUTTON
   =================================================== */
.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1.5px solid #111;
    border-radius: 50%;
    background: transparent;
    color: #111;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease,
                background 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, visibility 0.25s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover { background: #111; color: #fff; border-color: #111; }

.back-to-top svg { display: block; }

@media (max-width: 640px) {
    /* Filled (solid) on mobile rather than the outlined desktop style. */
    .back-to-top {
        right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 42px; height: 42px;
        background: #111; color: #fff; border-color: #111;
    }
}


/* ===================================================
   SECTION SPACING — brand standard gap between major
   sections. Hero is treated as one block; the stacked
   image-card rows stay tightly grouped as a single collage.
   =================================================== */
.section-tagline { margin-top: 24px; }

.offers-section,
.main-footer { margin-top: 24px; }

/* Contact sits right after Offers — its own padding already provides the
   gap, so no extra top margin (keeps the space above "Get in touch" tight). */
.contact-section { margin-top: 0; }