/* style.css */
:root {
    --primary-font: 'Playfair Display', serif;
    --secondary-font: 'Lato', sans-serif;
    --text-dark: #333;
    --text-light: #f8f5f0;
    --bg-light: #f8f5f0; 
    --bg-awards: #a68963; /* Brownish background for awards */
    --gold-accent: #B08D57;
    --dark-overlay: rgba(0, 0, 0, 0.5);
    --header-height: 80px; /* Adjust as needed */
    /* page gutters — same values as jagritidham.com/vrindavan-staycation/ */
    --wrap-max: 1320px;
    --gut: clamp(18px, 4.5vw, 64px);
    /* every flute ornament on the site is this wide - see .section-motif, .gita-flute, .st-motif,
       .bk-motif and the footer's .ft-motif, which all read it */
    --flute-w: 160px;
}
@media (max-width: 991px) {
    :root { --flute-w: 140px; }
}
@media (max-width: 575px) {
    :root { --flute-w: 120px; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--secondary-font);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: #fff; 
}

.container {
    width: min(var(--wrap-max), 100% - var(--gut) * 2);
    max-width: none;
    margin: 0 auto;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font);
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1rem;
    color: #555;
}

.section-padding {
    padding: 10px 0;
}

.bg-beige {
    background-color: var(--bg-light);
}

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

/* Krishna's flute + peacock feather (img/flute-motif.webp, transparent) — the ornament that
   replaces the star row above the homepage story heading. Centred with the text on phones. */
.section-motif {
    display: block;
    width: var(--flute-w);
    max-width: 100%;
    height: auto;
    margin-bottom: 4px; /* the tassels already hang low; keep the tagline close */
}
.text-center .section-motif { margin-left: auto; margin-right: auto; } /* centred sections */
.awards-section .section-motif { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); } /* lifts the brown flute off the tan band */
@media (max-width: 768px) {
    .two-column-layout .section-motif { margin-left: auto; margin-right: auto; }
}

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

	/* Header */
/* ==========================================================================
   Site header — logo | centred menu | call · WhatsApp · BOOK NOW
   Palette: theme gold #B08D57 (hover text #8A6D3B, 4.85:1 on white),
            brand amber #D4A24C for the CTA (black text on amber, never white),
            WhatsApp teal #128C7E on a pale green tint, royal blue #203F99 focus ring,
            warm hairlines #ebe5da / #e3dccf.
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: block;
    height: var(--header-height);
    padding: 0;
    background-color: #fff;
    border-bottom: 1px solid #ebe5da;
    box-shadow: 0 8px 24px -16px rgba(30, 20, 5, 0.35);
}
/* hairline of gold along the top edge */
.site-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, #c9ad7c, var(--gold-accent) 40%, var(--gold-accent) 60%, #c9ad7c);
    pointer-events: none;
}
.site-header a,
.site-header button { -webkit-tap-highlight-color: transparent; }

/* ---- the bar: three zones, menu on the page centre line ------------------ */
.site-header .hdr-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 20px;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0 clamp(16px, 2.5vw, 48px);
}
.site-header .hdr-logo    { justify-self: start; }
.site-header .hdr-nav     { justify-self: center; display: flex; align-items: center; min-width: 0; }
.site-header .hdr-actions { justify-self: end; }

/* ---- logo ---------------------------------------------------------------- */
.site-header .hdr-logo {
    display: flex;
    align-items: center;
    line-height: 0;
}
.site-header .hdr-logo a {
    display: block;
    line-height: 0;
    border-radius: 3px;
    flex: 0 0 auto;   /* the link is the flex item: without this the bar's grid squashed the logo 9% at 1280-1297 */
}
.site-header .hdr-logo img {
    display: block;
    height: 52px;
    width: auto;
    flex: 0 0 auto;
}

/* ---- strapline beside the logo ------------------------------------------- */
.site-header .hdr-logo { gap: 14px; }
.site-header .hdr-tagline {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding-left: 14px;
    border-left: 1px solid #e3dccf;
    font-family: var(--secondary-font);
    font-size: 0.63rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8A6D3B;
    white-space: nowrap;
}
.site-header .hdr-tagline span:last-child { color: #9c8259; }
/* tablet (hamburger layout): the bar is nearly empty beside the logo, so bring it back on one line */
@media (min-width: 769px) and (max-width: 992px) {
    /* the hide rule for <=1279 sits later in the file, so this one needs the extra specificity */
    .site-header .hdr-logo .hdr-tagline {
        display: block;
        white-space: nowrap;
        font-size: 0.6rem;
        letter-spacing: 1.2px;
    }
    .site-header .hdr-logo .hdr-tagline span + span::before { content: ' '; }
    .site-header .hdr-logo .hdr-tagline span { display: inline; }
}
/* ---- menu ---------------------------------------------------------------- */
.site-header .nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-header .nav-links > li {
    margin: 0;
}
.site-header .nav-links > li > a {
    position: relative;
    display: inline-block;
    padding: 10px 10px;   /* 12px until the menu grew to eight items (2026-09-25) */
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.76rem;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}
/* VIRTUAL TOUR: present but not yet live. No href, so it cannot navigate; the tip
   appears on hover and on keyboard focus. ::after here is the underline, so the tip
   is a real <span> - which assistive tech also reads, unlike generated content. */
/* FAQs keeps its small s inside the all-caps menu */
.site-header .nav-lc { text-transform: none; }
.site-header .nav-soon { cursor: default; outline-offset: 3px; }
.site-header .nav-soon:hover { color: #8A6D3B; }
.site-header .nav-links > li > a.nav-soon::after { display: none; }

.site-header .nav-soon-tip {
    position: absolute;
    left: 50%;
    top: calc(100% - 2px);
    z-index: 5;
    padding: 5px 10px;
    border: 1px solid #e6dcc8;
    border-radius: 3px;
    background: #fffaf2;
    box-shadow: 0 8px 18px -10px rgba(74, 49, 12, 0.55);
    color: #8A6D3B;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -4px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
/* :focus, not :focus-visible - a visitor who CLICKS this expecting a tour gets
   nothing back otherwise. Click and keyboard both surface the reason. */
.site-header .nav-soon:hover .nav-soon-tip,
.site-header .nav-soon:focus .nav-soon-tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* gold underline that grows from the centre */
.site-header .nav-links > li > a::after {
    content: '';
    display: block;
    position: absolute;
    left: 10px;
    right: auto;
    bottom: 4px;
    width: calc(100% - 20px);
    height: 1px;
    margin: 0;
    background: var(--gold-accent);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform 0.3s ease;
}
.site-header .nav-links > li > a:hover,
.site-header .nav-links > li > a.active,
.site-header .nav-links > li > a[aria-current="page"] {
    color: #8A6D3B;
}
.site-header .nav-links > li > a:hover::after,
.site-header .nav-links > li > a.active::after,
.site-header .nav-links > li > a[aria-current="page"]::after {
    left: 10px;
    right: auto;
    width: calc(100% - 20px);
    transform: scaleX(1);
}
/* the hamburger only exists below 993px */
.site-header .nav-toggle { display: none; }

/* items that only exist for the phone panel */
.site-header .nav-links > li.nav-extra { display: none; }
.site-header .nav-links > li.nav-extra > a::after { display: none; }

/* ---- right cluster: | call · WhatsApp · BOOK NOW -------------------------- */
/* a hairline on the LEFT of the cluster marks where the menu ends and the contacts begin */
.site-header .hdr-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 14px;
    border-left: 1px solid #e3dccf;
}
/* call: an icon disc at every width since 2026-09-26 (the number itself made the cluster 130px
   wider than the menu could spare; the aria-label still reads the number out). Tinted cream and
   gold, quiet like the WhatsApp disc, so BOOK NOW stays the only saturated shape in the bar. */
.site-header .hdr-call-num { display: none; }
.site-header .hdr-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e3d8c3;
    border-radius: 50%;
    background: #F7F2E8;
    color: #8A6D3B;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.site-header .hdr-call i { font-size: 0.95rem; color: #8A6D3B; transition: color 0.25s ease; }
.site-header .hdr-call:hover {
    border-color: var(--gold-accent);
    background: var(--gold-accent);
    transform: translateY(-1px);
}
.site-header .hdr-call:hover i { color: #fff; }

/* WhatsApp: quiet tinted disc so BOOK NOW is the only saturated shape in the bar */
.site-header .hdr-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #cfe7d8;
    border-radius: 50%;
    background: #EAF6EE;
    color: #128C7E;
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.site-header .hdr-wa:hover {
    background: #128C7E;
    border-color: #128C7E;
    color: #fff;
    transform: translateY(-1px);
}

/* BOOK NOW: the enquiry stripe's Check Availability pill (.cb-btn-primary), at header size.
   Brand amber, black label, letterpress relief; on hover it deepens to amber-dark and a gold
   ring opens around it. It never flips to another colour - amber is the brand CTA rule. */
.site-header .btn-book {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background-color: #D4A24C;
    color: #111;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 1.6px;
    /* balances the trailing letter-space so the label sits optically centred */
    text-indent: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255, 249, 233, 0.7),
        0 1px 2px rgba(74, 49, 12, 0.18),
        0 10px 20px -12px rgba(74, 49, 12, 0.5);
    transition: background-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}
/* the ring: gold hairline just outside the pill, closed until hover */
.site-header .btn-book::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(176, 141, 87, 0.75);
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.site-header .btn-book:hover,
.site-header .btn-book:focus-visible {
    background-color: #C8933C;
    color: #111;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 249, 233, 0.7),
        0 3px 6px rgba(74, 49, 12, 0.2),
        0 16px 28px -12px rgba(200, 147, 60, 0.75);
}
.site-header .btn-book:hover::after,
.site-header .btn-book:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}
.site-header .btn-book:active { transform: translateY(0); }

/* gold focus ring rather than the header's royal blue, so the amber pill is not
   outlined in a colour it shares with nothing else on the page */
.site-header .btn-book:focus-visible {
    outline: 2px solid #96713F;
    outline-offset: 6px;
}
.site-header .btn-book:focus:not(:focus-visible) { outline: none; }

/* ---- focus ---------------------------------------------------------------- */
.site-header a:focus-visible,
.site-header .nav-toggle:focus-visible {
    outline: 2px solid #203F99;
    outline-offset: 3px;
}
.site-header a:focus:not(:focus-visible),
.site-header .nav-toggle:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   1280-1439: a touch tighter so nothing wraps
   ========================================================================== */
@media (max-width: 1439px) {
    .site-header .hdr-bar { column-gap: 12px; }
    .site-header .nav-links > li > a { padding: 10px 9px; font-size: 0.7rem; letter-spacing: 0.7px; }
    .site-header .nav-links > li > a::after,
    .site-header .nav-links > li > a:hover::after,
    .site-header .nav-links > li > a.active::after,
    .site-header .nav-links > li > a[aria-current="page"]::after { left: 9px; width: calc(100% - 18px); }
    .site-header .hdr-actions { gap: 8px; }
    .site-header .hdr-call { width: 36px; height: 36px; }
    .site-header .hdr-call i { font-size: 0.9rem; }
    .site-header .hdr-wa { width: 36px; height: 36px; font-size: 1.1rem; }
    .site-header .btn-book { height: 38px; padding: 0 15px; letter-spacing: 1.2px; text-indent: 1.2px; font-size: 0.68rem; }
    .site-header .hdr-logo img { height: 48px; }
}

/* ==========================================================================
   993-1279: still one row (the call disc is now the rule at every width, see above)
   ========================================================================== */
@media (max-width: 1279px) {
    .site-header .hdr-actions { gap: 10px; }
}
@media (max-width: 1199px) {
    /* guard: the menu can never be pushed into the actions, whatever the font fallback */
    .site-header .hdr-bar { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; }
    .site-header .nav-links > li > a { padding: 10px 8px; font-size: 0.68rem; letter-spacing: 0.6px; }
    .site-header .nav-links > li > a::after,
    .site-header .nav-links > li > a:hover::after,
    .site-header .nav-links > li > a.active::after,
    .site-header .nav-links > li > a[aria-current="page"]::after { left: 8px; width: calc(100% - 16px); }
    .site-header .btn-book { padding: 0 16px; font-size: 0.68rem; letter-spacing: 1.2px; text-indent: 1.2px; }
    .site-header .hdr-logo img { height: 46px; }
}

/* ==========================================================================
   <=992: hamburger + panel (menu, call, WhatsApp, BOOK NOW)
   ========================================================================== */
@media (max-width: 992px) {
    .site-header .hdr-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: 0;
    }
    .site-header .hdr-logo    { order: 1; }
    .site-header .hdr-actions { order: 2; margin-left: auto; gap: 8px; }
    .site-header .hdr-nav     { order: 3; margin-left: 4px; }
    .site-header .hdr-logo img { height: 48px; }

    /* only BOOK NOW stays in the bar; call & WhatsApp move into the panel */
    .site-header .hdr-call,
    .site-header .hdr-wa { display: none; }
    .site-header .hdr-actions { padding-left: 0; border-left: 0; }
    .site-header .btn-book { height: 44px; padding: 0 16px; font-size: 0.68rem; letter-spacing: 1.2px; text-indent: 1.2px; }

    /* hamburger */
    .site-header .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        cursor: pointer;
    }
    .site-header .hamburger,
    .site-header .hamburger::before,
    .site-header .hamburger::after {
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background-color: var(--text-dark);
    }
    .site-header .hamburger { display: block; position: relative; transition: background-color 0.2s ease-in-out; }
    .site-header .hamburger::before,
    .site-header .hamburger::after {
        content: '';
        position: absolute;
        left: 0;
        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    }
    .site-header .hamburger::before { top: -7px; }
    .site-header .hamburger::after  { top: 7px; }
    .site-header .nav-toggle.active .hamburger { background-color: transparent; }
    .site-header .nav-toggle.active .hamburger::before { top: 0; transform: rotate(45deg); }
    .site-header .nav-toggle.active .hamburger::after  { top: 0; transform: rotate(-45deg); }

    /* the panel */
    .site-header .nav-links {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 0 0 22px;
        background-color: #fff;
        border-top: 1px solid #ebe5da;
        box-shadow: 0 24px 32px -20px rgba(30, 20, 5, 0.35);
    }
    .site-header .nav-links.active { display: flex; }
    .site-header .nav-links > li {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    /* menu rows: 46px tall, hairline between rows */
    .site-header .nav-links > li:not(.nav-extra) { border-bottom: 1px solid #f1ede5; }
    .site-header .nav-links > li > a {
        display: block;
        padding: 16px 20px;
        font-size: 0.82rem;
        line-height: 1.1;
        letter-spacing: 1.8px;
    }
    .site-header .nav-links > li > a::after { display: none; }
    .site-header .nav-links > li > a:hover { background: #faf6ee; }

    /* no hover on a phone: the tip sits beside the label permanently */
    .site-header .nav-soon-tip {
        position: static;
        display: inline-block;
        margin-left: 10px;
        padding: 4px 8px;
        opacity: 1;
        transform: none;
        box-shadow: none;
        vertical-align: 1px;
    }

    /* extras */
    .site-header .nav-links > li.nav-extra { display: block; }
    .site-header .nav-links > li.nav-extra-contact {
        display: flex;
        gap: 10px;
        margin-top: 8px;
        padding: 16px 20px 0;
    }
    .site-header .nav-links > li.nav-extra-contact > a {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        height: 46px;
        padding: 0 12px;
        border: 1px solid #d9cfbd;
        border-radius: 999px;
        background: #fff;
        font-size: 0.78rem;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.4px;
        text-transform: none;
        color: var(--text-dark);
    }
    .site-header .nav-links > li.nav-extra-contact > a:hover { border-color: var(--gold-accent); background: #faf6ee; }
    .site-header .nav-links > li.nav-extra-contact > a i { font-size: 1rem; }
    .site-header .nav-links > li.nav-extra-contact > a.nav-extra-call i { color: var(--gold-accent); }
    .site-header .nav-links > li.nav-extra-contact > a.nav-extra-wa i { color: #128C7E; font-size: 1.2rem; }

    .site-header .nav-links > li.nav-extra-book { padding: 10px 20px 0; }
    .site-header .nav-links > li.nav-extra-book > a.btn-book {
        display: flex;
        width: 100%;
        height: 50px;
        padding: 0 20px;
        font-size: 0.78rem;
        letter-spacing: 2px;
        text-indent: 2px;
        /* the panel's own link colour (#333) otherwise beats the pill's black label */
        color: #111;
    }
}

/* ==========================================================================
   <=480: phone
   ========================================================================== */
@media (max-width: 480px) {
    .site-header .hdr-bar { padding: 0 16px; }
    .site-header .hdr-logo img { height: 44px; }
    .site-header .hdr-actions { gap: 6px; }
    .site-header .btn-book { height: 44px; padding: 0 14px; font-size: 0.64rem; letter-spacing: 1.1px; text-indent: 1.1px; }
    .site-header .nav-toggle { margin-right: -10px; }
    .site-header .nav-links > li > a { padding: 15px 16px; }
    .site-header .nav-links > li.nav-extra-contact { padding: 14px 16px 0; }
    .site-header .nav-links > li.nav-extra-book { padding: 10px 16px 0; }
}

/* ---- strapline, stacked ---------------------------------------------------
   Where there is no room beside the wordmark — phones, and 993-1279 where the full menu is still
   in the bar — the strapline sits under the logo as a lockup. Kept down here so it out-orders the
   logo-height rules above; the base rules are up with the logo. */
@media (max-width: 768px), (min-width: 993px) and (max-width: 1279px) {
    .site-header .hdr-logo {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .site-header .hdr-logo img { height: 42px; }
    .site-header .hdr-logo .hdr-tagline {
        display: block;
        padding: 0;
        border-left: 0;
        /* 0.5rem (8px) read as a smudge under the wordmark; 0.58rem is the smallest that stays
           legible on a phone and still clears the BOOK NOW cluster at 320px (measured 2026-09-25) */
        font-size: 0.58rem;
        line-height: 1.35;
        letter-spacing: 0.9px;
    }
    .site-header .hdr-logo .hdr-tagline span { display: block; }
}
@media (max-width: 480px) {
    .site-header .hdr-logo { gap: 5px; }
    .site-header .hdr-logo .hdr-tagline { font-size: 0.56rem; letter-spacing: 0.7px; }
}

/* ---- motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .site-header *,
    .site-header *::before,
    .site-header *::after { transition: none !important; }
}

/* Hero Section */
.hero-section {
    height: calc(100vh - var(--header-height));
    min-height: 550px; /* Or adjust as needed */
    color: var(--text-light);
    display: flex; /* Keep this for alignment if needed, but slides are absolute */
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative; /* Crucial for absolute positioning of slides and nav */
    overflow: hidden; /* Prevent content spill from hidden slides */
}

.hero-slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind reservation, indicators, nav buttons */
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    display: flex; /* To center hero-content within the slide */
    align-items: center;
    justify-content: center;
    z-index: 1; /* Base z-index for slides */
}

.hero-slide::before { /* Dark overlay for each slide */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--dark-overlay);
    z-index: 1; /* Below slide content */
}

/* Banner video: fills the slide beneath the ::before overlay (z 1) and the content (z 2) */
.hero-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2; /* Active slide on top */
}

/* Ensure hero-content is above the slide's ::before overlay */
.hero-slide .hero-content {
    position: relative;
    z-index: 2; /* Above the ::before pseudo-element */
    color: var(--text-light); /* Ensure text is light by default */
}

/* Styling for content within each slide, ensuring it's light */
.hero-slide .hero-content .hero-subtitle,
.hero-slide .hero-content .hero-title,
.hero-slide .hero-content .ministry-logo p {
    color: var(--text-light);
}

.hero-slide .hero-content .ministry-logo img {
    filter: brightness(0) invert(1); /* Keep emblem white */
}

/* Banner BOOK NOW: the header's brand-amber pill, grown up for the hero.
   Amber #D4A24C with a black label (the brand CTA rule), 54px tall, a cream
   highlight along the crown and a soft warm shadow so it lifts off the film.
   Hover: deeper amber, 1px lift, amber-tinted glow and a hairline ring 5px
   outside the pill. Geometry never changes on hover, so nothing else moves. */
.hero-slide .hero-content .btn-primary {
    /* the anchor was display:inline, so the centred hero block sat on a
       body line box (16px x 1.6). The negative margins keep the taller pill
       layout-neutral: change --hero-line if body line-height ever changes. */
    --hero-line: 1.6rem;
    --pill-h: 54px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--pill-h);
    padding: 0 38px;
    vertical-align: top;
    margin: calc((var(--hero-line) - var(--pill-h)) / 2) 0;
    border: 0;
    border-radius: 999px;
    background-color: #D4A24C;
    color: #111;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1;
    letter-spacing: 2.5px;
    text-indent: 2.5px; /* balances the trailing letter-space so the word sits dead centre */
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 230, 0.62),
        0 2px 4px rgba(60, 38, 4, 0.18),
        0 12px 24px -12px rgba(60, 38, 4, 0.5);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, translate 0.3s ease;
}
/* hairline ring, 5px outside the pill, only on hover / focus */
.hero-slide .hero-content .btn-primary::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero-slide .hero-content .btn-primary:hover {
    background-color: #C8933C;
    color: #111;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 230, 0.62),
        0 3px 6px rgba(60, 38, 4, 0.22),
        0 14px 28px -10px rgba(212, 162, 76, 0.55);
}
.hero-slide .hero-content .btn-primary:hover::after,
.hero-slide .hero-content .btn-primary:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}
.hero-slide .hero-content .btn-primary:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 246, 224, 0.3),
        0 1px 2px rgba(60, 38, 4, 0.2),
        0 10px 20px -12px rgba(60, 38, 4, 0.6);
}
/* keyboard focus: dark hug + white ring, reads on bright and dark frames */
.hero-slide .hero-content .btn-primary:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 230, 0.62),
        0 0 0 3px rgba(17, 17, 17, 0.6),
        0 12px 24px -12px rgba(60, 38, 4, 0.5);
}
.hero-slide .hero-content .btn-primary:focus:not(:focus-visible) { outline: none; }
@media (max-width: 768px) {
    .hero-slide .hero-content .btn-primary {
        --pill-h: 52px;
        padding: 0 34px;
        font-size: 0.8rem;
        letter-spacing: 2.2px;
        text-indent: 2.2px;
    }
}
@media (hover: none) {
    .hero-slide .hero-content .btn-primary:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide .hero-content .btn-primary,
    .hero-slide .hero-content .btn-primary::after { transition: none; }
    .hero-slide .hero-content .btn-primary:hover { transform: none; }
    .hero-slide .hero-content .btn-primary::after { transform: none; }
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10; /* Ensure they are on top */
    transition: background-color 0.3s ease;
}
.slider-nav:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
.slider-nav.prev {
    left: 20px;
}
.slider-nav.next {
    right: 20px;
}

/* Reservation rail - anchored by its MIDPOINT, not by an edge.
   The rail is one rotated box: its LAYOUT WIDTH becomes its ON-SCREEN HEIGHT.
   transform-origin:left top pinned its bottom edge and let it grow upward, so
   every contact added to the row pushed the top edge higher - adding the
   WhatsApp number took it 296px -> 506px and it began clipping under the
   sticky header on 768px-tall laptops.

   Rotating about the box's own centre and pulling back by translate(-50%,-50%)
   makes the anchor the rail's midpoint: a box of layout width L, height H lands
   at x in [left - H/2, left + H/2], y in [top - L/2, top + L/2]. L spends itself
   equally up and down and cancels out of the top-edge equation, so

        clearance above = clearance below = (vh - header - L) / 2

   and the rail fits whenever L <= vh - header. Growth can no longer clip it.

   --rail-disc MUST match the real disc size: the rotated rail is exactly that
   wide, so left = inset + disc/2 is what keeps the visible left edge on
   --rail-inset. Change one, change the other. */
.hero-reservation {
    --rail-inset: 30px;   /* where the rail's visible LEFT EDGE sits */
    --rail-disc: 35px;    /* icon disc - also the rail's on-screen width */
    --rail-gap: 15px;
    position: absolute;
    left: calc(var(--rail-inset) + var(--rail-disc) / 2);
    top: calc(50vh - (var(--header-height) / 2));
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: 50% 50%;
    z-index: 10;
}
.hero-reservation .reservation-content {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--rail-gap);
}
.hero-reservation .reservation-text {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.hero-reservation .phone-number {
    font-size: 1.1rem;
    font-weight: bold;
}
.hero-reservation .phone-icon-container {
    border: 1px solid var(--text-light);
    border-radius: 50%;
    width: var(--rail-disc);
    height: var(--rail-disc);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
}
.hero-reservation .phone-icon-container i { font-size: 1rem; }

/* each channel is one target: number + disc travel together. row-reverse matches the
   parent so, once the rail is rotated, every icon sits directly under its own number. */
.hero-reservation .res-link {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--rail-gap);
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease;
}
.hero-reservation .res-link .phone-icon-container {
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.hero-reservation .res-link:hover,
.hero-reservation .res-link:focus-visible { color: #F3DFAE; }
.hero-reservation .res-link:hover .phone-icon-container,
.hero-reservation .res-link:focus-visible .phone-icon-container {
    border-color: #F3DFAE;
    background-color: rgba(243, 223, 174, 0.16);
}
/* the rail is rotated, so a default focus ring would be drawn sideways and clipped;
   this one rides with the rotation because it is on the rotated element's child */
.hero-reservation .res-link:focus-visible {
    outline: 2px solid #F3DFAE;
    outline-offset: 5px;
}
.hero-reservation .res-link:focus:not(:focus-visible) { outline: none; }

/* a little more air between the two channels than within a pair */
.hero-reservation .res-wa { margin-right: 6px; }

.hero-content { z-index: 2; }
.hero-subtitle {
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    text-transform: none; /* "Stay. Experience. Belong." keeps its own case */
    font-weight: 700;
    color: var(--text-light);
}
.hero-title {
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--text-light);
    font-weight: normal;
	margin-bottom: 310px;
}
/* Banner title "स्वागतम् | SWĀGATAM": Playfair has no Devanagari, so the Sanskrit word
   gets its own webfont (loaded in index.php); the pipe is a light hairline separator. */
.hero-title .hero-title-dev { font-family: 'Tiro Devanagari Hindi', var(--primary-font); font-weight: 400; }
.hero-title .hero-title-sep { margin: 0 0.3em 0 0.4em; opacity: 0.6; } /* a touch more room for the halant tail on the left */
.ministry-logo { margin: 0 auto 2rem auto; }
.ministry-logo img {
    height: 60px;
    margin-bottom: 0.5rem;
    filter: brightness(0) invert(1);
}
.ministry-logo p { font-size: 0.8rem; line-height: 1.3; margin: 0; color: var(--text-light); }

.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    letter-spacing: 1px;
    font-family: var(--secondary-font);
}
.btn-primary {
    background-color: var(--text-light);
    color: var(--text-dark);
    font-size: 0.9rem;
}
.btn-primary:hover {
    background-color: var(--gold-accent);
    color: var(--text-light);
}

.hero-carousel-indicators {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
	z-index: 10;
}

.hero-carousel-indicators span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 8px 0;
    cursor: pointer;
}

.hero-carousel-indicators span.active { background-color: var(--text-light); }

/* Two Column Layout (About, Founders) */
.two-column-layout {
    display: flex;
    align-items: center;
    gap: 40px;
}
.two-column-layout .column-image,
.two-column-layout .column-text { flex: 1; }
/* Homepage story photos: both sit in the same square frame (the night-path photo is
   square; the sunset photo is cropped to match) with softly rounded corners. */
.about-section .column-image img,
.founders-section .column-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
}
.column-text .section-tagline {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
}
.column-text h2 { font-size: 2.8rem; }
/* A sentence-style tagline (homepage story): keeps its own case, no tracking */
.section-tagline.section-tagline-sentence { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.95rem; }
.link-styled {
    display: inline-block;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: bold;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--gold-accent);
    margin-right: 20px;
    margin-top: 10px;
    transition: color 0.3s, border-color 0.3s;
}
.link-styled:hover { color: var(--gold-accent); }
.link-styled.link-subtle {
    border-bottom: none;
    color: #777;
    font-weight: normal;
}
.link-styled.link-subtle:hover { color: var(--gold-accent); text-decoration: underline; }

/* Quote Section */
.quote-text {
    font-family: var(--primary-font);
    font-size: 1.2rem;
    font-style: italic;
    text-align: center;
    color: #555;
    line-height: 1.8;
    /*max-width: 800px;*/
    margin: 0 auto;
}
.quote-text strong { color: var(--text-dark); }

/* Suites Section 
.suites-section h2 { margin-bottom: 0.5rem; }
.suites-description { max-width: 600px; margin: 0 auto 30px auto; }*/

.suites-carousel-container {
    position: relative; /* For positioning nav buttons */
    margin: 0 auto;
    max-width: 100%; /* Or specific max-width if needed */
}

.suites-carousel-viewport {
    overflow: hidden;
    width: 100%; /* Adjust if you want padding on sides of viewport */
}

.suites-grid {
    /* Remove grid-template-columns and gap from grid setup */
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    /* gap: 30px; */

    display: flex; /* Key for horizontal layout */
    transition: transform 0.5s ease-in-out; /* Animation for sliding */
    /* No wrap, all cards in one line */
}

.suite-card {
    position: relative;
    overflow: visible; /* CHANGE: Allow hover details to overflow if absolutely necessary, but try to avoid it */
    flex: 0 0 100%; 
    max-width: 100%;
    padding: 0 10px; 
    box-sizing: border-box;
    display: flex; /* ADD: To help with aspect ratio container */
    flex-direction: column; /* ADD */
}

.suite-card-image-container {
    position: relative;
    width: 100%;
    /* OLD VALUE: padding-top: 75%; Example: 4:3 aspect ratio */
    padding-top: 100%; /* NEW VALUE: Example for a square image (1:1 ratio). Adjust this! */
    overflow: hidden;
    border-radius: 3px;
	height:470px;
}

.suite-card img {
    position: absolute; /* Position image within the aspect ratio container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   /* Make image fill the container */
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

/* Carousel Navigation Buttons */
.suite-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}
.suite-carousel-nav:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.suite-carousel-nav.prev {
    left: -15px; /* Adjust position */
}
.suite-carousel-nav.next {
    right: -15px; /* Adjust position */
}

/* Hide nav buttons if they go outside the main page container on smaller screens */
@media (max-width: 400px) { /* Example breakpoint */
    .suite-carousel-nav.prev { left: 5px; }
    .suite-carousel-nav.next { right: 5px; }
}

/* Carousel Dots */
.suites-carousel-dots {
    text-align: center;
    margin-top: 25px;
}
.suites-carousel-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.suites-carousel-dots .dot.active {
    background-color: var(--gold-accent);
}

/* Adjustments for larger screens to show more cards (Optional) */
@media (min-width: 768px) {
    .suite-card {
        /* Show 2 cards */
        /* flex: 0 0 50%; */
        /* max-width: 50%; */
    }
}
@media (min-width: 1024px) {
    .suite-card {
        /* Show 3 cards, this makes it look like the original static grid but now it's a carousel if there are more */
         flex: 0 0 calc(100% / 3);
         max-width: calc(100% / 3);
		 height:470px;
    }
    /* If showing 3 cards, adjust nav button positions if they look off */
    .suite-carousel-nav.prev {
        left: -20px;
    }
    .suite-carousel-nav.next {
        right: -20px;
    }
}

@media (max-width: 768px) {
    .suite-card-info-overlay h3 {
        font-size: 1.4rem;
    }
    .suite-hover-details li {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
    .suite-card:hover .suite-hover-details {
        max-height: 120px; /* Adjust for smaller screens */
    }
}

.suite-card:hover img {
    transform: scale(1.05);
}

/* Overlay for Title and Hover Details */
.suite-card-info-overlay {
    position: absolute;
    bottom: 0; /* Anchor to the bottom of the image container */
    left: 0;
    right: 0;
    color: white;
    z-index: 2;
    pointer-events: none;
    padding: 15px; /* Add some padding inside the overlay */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%); /* Gradient for readability */
    border-bottom-left-radius: 3px; /* Match image container radius */
    border-bottom-right-radius: 3px; /* Match image container radius */
}

.suite-card-info-overlay h3 {
    font-family: var(--primary-font);
    font-size: 1.6rem; /* Slightly adjust */
    font-weight: bold;
    color: white;
    /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); Removed, using gradient instead */
    margin-bottom: 8px;
    line-height: 1.2;
    pointer-events: auto;
}

.suite-hover-details {
    opacity: 0;
    max-height: 0;
    overflow: hidden; /* Keep this for the animation itself */
    transition: opacity 0.4s ease, max-height 0.4s ease, transform 0.4s ease;
    transform: translateY(5px);
    pointer-events: auto;
    margin-top: 5px; /* Space between title and details */
}

.suite-card:hover .suite-hover-details {
    opacity: 1;
    max-height: 150px; /* Adjust based on how much content you expect. Needs to fit */
    transform: translateY(0);
}

.suite-hover-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Allow wrapping of tags */
    flex-wrap: wrap; /* Allow tags to wrap */
    gap: 5px; /* Space between tags */
}

.suite-hover-details li {
    font-family: var(--secondary-font);
    font-size: 0.7rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.65);
    padding: 3px 8px;
    margin-bottom: 0; /* Handled by gap */
    border-radius: 3px;
    /* display: inline-block; -- Replaced by flex */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* MODIFIED: Book Now Button Styling - Ensure it's top right */
.suite-card-book-now {
    position: absolute;
    top: 15px; /* Position from the top */
    right: 0;  /* Align to the right */
    
    /* NEW: Always visible style */
    background-color: rgba(176, 141, 87, 0.35); /* Gold accent: #B08D57 with alpha for transparency */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Subtle light border */
    transform: skew(-25deg) translateX(-10px); /* Positioned correctly and skewed */
    opacity: 1; /* Always visible */
    
    transform-origin: top right; /* Skew from top right */
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; /* Smooth transition for hover */
    z-index: 3; /* Above info overlay if they overlap */
    /* padding: 1px 0; Remove if btn-book-now-text padding is enough */
}

/* Optional: Subtle hover effect for the always-visible button */
.suite-card:hover .suite-card-book-now {
    background-color: rgba(176, 141, 87, 0.55); /* Slightly more opaque on hover */
    border-color: rgba(255, 255, 255, 0.8);
    /* The transform and opacity no longer need to change on hover for visibility */
}

.btn-book-now-text { /* Text within the skewed button */
    display: block;
    color: white;
    font-family: var(--secondary-font);
    font-weight: bold;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    padding: 6px 18px; /* Adjusted padding for better look */
    transform: skew(25deg); /* Counter-skew the text */
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Subtle shadow for readability */
}

.carousel-dot { margin-top: 20px; text-align: center; }
.carousel-dot span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
}
.carousel-dot span.active { background-color: var(--gold-accent); }

/* Awards Section */
.awards-section {
    background-color: var(--bg-awards);
    color: var(--text-light);
}
/* Highlights band header: sub-title and intro under "Bhakti • Shanti • Atithya" */
.awards-section .awards-subtitle {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.3px;
    margin: 6px 0 12px;
}
.awards-section .awards-intro {
    /* Uncapped, by the owner's decision. Fits one 1171px line at >=1440.
       balance removed - it pulls the block in, which is the opposite of the
       intent. "come together." is bound with a non-breaking space in the
       markup: without it "together." strands alone at ~1280px. */
    max-width: none;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.7;
}
.awards-section p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}

.awards-grid {
    display: flex; /* Default for desktop: side-by-side */
    gap: 40px;
    align-items: flex-start; /* Or 'center' if you want columns to vertically align based on their center */
}

.award-column {
    flex: 1; /* Each column takes equal space on desktop */
    display: flex; /* Enable flex for centering items within the column */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Ensures text is centered if not already by parent */
}

/* This rule ensures images within the column are also centered if they have margins */
.award-column img.award-logo {
    margin-left: auto;
    margin-right: auto;
    /* max-height and margin-bottom are already set, which is good */
}

@media (max-width: 992px) { /* Adjust breakpoint as needed, 768px might be more common for stacking */
    .awards-grid {
        flex-direction: column; /* Stack columns vertically */
        align-items: center;    /* Center the columns themselves if they don't take full width */
        gap: 30px; /* Adjust gap for vertical stacking */
    }
	
	.award-column {
        /* flex: 1; might not be needed if they stack and take full width or are centered */
        width: 100%; /* Optional: make each column take full width of its container */
        max-width: 500px; /* Optional: constrain width of stacked columns for better readability */
        /* display: flex, flex-direction: column, align-items: center are already set and are good for stacked view too */
    }
    .award-column.award-column-left,
    .award-column.award-column-right {
         margin-bottom: 20px; /* Add some space between stacked columns */
    }
    .award-column:last-child {
        margin-bottom: 0; /* No margin for the last stacked column */
    }
}

.et-logo { max-height: 40px; }
.outlook-award { margin-top: 20px; } /* Space above this specific award */
.outlook-logo { max-height: 80px; }
.ministry-logo-color { max-height: 70px; }
.tripadvisor-logo { max-height: 100px; margin-top: 20px; }
.award-logo { max-height: 100px; margin-bottom: 10px; object-fit: contain; }
.et-logo { max-height: 100px; }
.outlook-award { margin-top: 20px; }
.outlook-logo { max-height: 100px; }
.ministry-logo-color { max-height: 100px; } /* Assumes color version needs no filter */
.tripadvisor-logo { max-height: 100px; margin-top: 20px; }

/* Media Section */
.media-section h2 { margin-bottom: 30px; }
/* ---- "Why Vrindavan Staycation" highlights (in the awards band) ---- */
.highlight-item p strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--primary-font);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}
@media (max-width: 992px) {
    .highlights-grid { flex-wrap: wrap; }
    .highlight-item { flex: 1 1 calc(50% - 15px); margin-bottom: 20px; }
}
@media (max-width: 560px) {
    .highlight-item { flex: 1 1 100%; }
}

/* ---- Temples nearby (in the media band) ---- */

.media-logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    align-items: center;
}
.media-logos-grid img {
    max-height: 70px;
    width: 105px;
    margin: 0 auto;
    object-fit: contain;
    filter: grayscale(1) contrast(0%) brightness(0.5); /* Dark grey logos */
    opacity: 0.8;
}

/* Instagram Section */

/* Footer */
footer {
    background-color: var(--text-dark);
    color: #ccc;
    padding: 30px 0;
}
footer p { margin: 0; font-size: 0.9rem; color: #ccc;}

/* --- Responsive --- */
@media (max-width: 992px) { /* Tablet */
    /* header/nav tablet rules now live in the site-header block above */

    .hero-title { font-size: 2.5rem; }
    /* the literal disc size must NOT stay here: it would leave --rail-disc at
       35px and drift the rail 2.5px off its gutter */
    .hero-reservation { --rail-inset: 10px; --rail-disc: 30px; }
    .hero-reservation .phone-number { font-size: 0.9rem; }
    .hero-reservation .phone-icon-container i { font-size: 0.9rem; }

    .column-text h2 { font-size: 2.2rem; }
}

/* Short-viewport guards for the rail. It fits while L <= vh - header, so these
   shorten L as the window gets short. Two chained max-height queries plus the
   default - no min/max pair, so there is no hole at a boundary. */
@media (max-height: 640px) {
    .hero-reservation { --rail-disc: 30px; --rail-gap: 10px; }
    .hero-reservation .phone-number { font-size: 0.9rem; }
    .hero-reservation .phone-icon-container i { font-size: 0.9rem; }
}
@media (max-height: 520px) {
    /* last thing to go: both NUMBERS and both discs survive */
    .hero-reservation .reservation-text { display: none; }
}

@media (max-width: 768px) { /* Mobile */
    .hero-section { padding: 20px; min-height: 450px; }
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 0.8rem; }
    .hero-reservation { display: none; } /* Hide for simplicity on small mobile */
    .hero-carousel-indicators {
        bottom: 20px; top: auto; left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
    }
    .hero-carousel-indicators span { margin: 0 8px; }

    .two-column-layout { flex-direction: column; text-align: center; }
    .two-column-layout.reverse-columns-on-mobile { flex-direction: column-reverse; }
    .two-column-layout .column-image { margin-bottom: 20px; }
    .two-column-layout.reverse-columns-on-mobile .column-image { margin-bottom: 0; margin-top: 20px; }
    
    .quote-text { font-size: 1.2rem; }
    .suites-grid { grid-template-columns: 1fr; }
    .suite-card img { height: 470px; }
    .suite-card-overlay { transform: skew(-25deg) translateX(-10px); opacity: 1;} /* Always visible on mobile, or adjust */

    .awards-grid { flex-direction: column; gap: 30px; }
    .media-logos-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; }
    .media-logos-grid img { max-height: 30px; }
}

@media (max-width: 480px) {
    h2 { font-size: 1.8rem; }
    .column-text h2 { font-size: 2rem; }
    .hero-title { font-size: 1.8rem; }
    .media-logos-grid { grid-template-columns: repeat(2, 1fr); }
}

/* style.css */

/* ========= STYLES FOR NEW SECTIONS ========= */

/* General Helper Classes (if not already defined) */
.section-padding-small {
    padding: 30px 0;
}
.bg-brown-light {
    background-color: #A68963; /* Example light brown from image - var(--bg-awards) */
    color: #f8f5f0; /* Light text on this background */
}
.bg-brown-light .section-tagline,
.bg-brown-light h2,
.bg-brown-light h4,
.bg-brown-light p,
.bg-brown-light .link-styled {
    color: #f8f5f0;
}
.bg-brown-light .link-styled.link-subtle {
    color: #e0d8cc; /* Slightly different for subtlety */
}

.section-main-title {
    font-family: var(--primary-font);
    font-size: 2.8rem;
    font-weight: normal;
    color: var(--text-dark);
    margin-bottom: 10px;
}
.bg-brown-light .section-main-title { /* If title is on dark bg */
    color: var(--text-light);
}

/* Taglines should be consistent */
.section-tagline {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.text-gold {
    color: var(--gold-accent) !important; /* Example: #B08D57 */
}

/* Star ratings if gold color desired */

/* --- Foundation Hero Section --- */

/* Example if you want a slight overlay on each sub-banner item for text
.sub-banner-item::before {
    content: '';
    position: absolute;
    top:0; left:0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.2);
}
.sub-banner-item span { position: relative; z-index: 1; }
*/

/* bg-brown-light defined in helpers */

/* style.css */
/* (Continued from PART 3A) */

/* --- Project Priceless Section --- */
/* Uses .two-column-layout, .column-image, .column-text, .section-tagline, .star-rating, .link-styled
   which are assumed to be defined from previous website parts or a global stylesheet.
   If not, here are basic versions:
*/
.two-column-layout {
    display: flex;
    align-items: center;
    gap: 40px;
}
.two-column-layout .column-image,
.two-column-layout .column-text {
    flex: 1;
}
.column-text h2 { /* Assuming h2 is used for section titles within column-text */
    font-size: 2.5rem; /* Or your standard h2 size */
    margin-bottom: 1rem;
    font-family: var(--primary-font);
}
.link-styled {
    display: inline-block;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: bold;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--gold-accent);
    margin-right: 20px;
    margin-top: 10px;
    transition: color 0.3s, border-color 0.3s;
}
.link-styled:hover { color: var(--gold-accent); }
.link-styled.link-subtle {
    border-bottom: none;
    color: #777;
    font-weight: normal;
}
.link-styled.link-subtle:hover { color: var(--gold-accent); text-decoration: underline; }

/* Responsive for two-column */
@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column;
        text-align: center;
    }
    .two-column-layout.reverse-columns-on-mobile {
        flex-direction: column-reverse;
    }
    .two-column-layout .column-image {
        margin-bottom: 30px;
    }
    .two-column-layout.reverse-columns-on-mobile .column-image {
        margin-bottom: 0;
        margin-top: 30px;
    }
    .column-text h2 {
        font-size: 2rem;
    }
}
/* End of assumed global styles for two-column */

/* --- Quote Section Alt --- */
.quote-section-alt { /* Assuming bg-beige is defined for background */
    /* padding from .section-padding */
}
.quote-text-alt {
    font-family: var(--primary-font);
    font-size: 1.6rem;
    font-style: italic;
    color: #555; /* Darker text on beige */
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}
.quote-text-alt strong {
    color: var(--text-dark);
    font-weight: bold; /* Ensure strong is bold */
}
@media (max-width: 768px) {
    .quote-text-alt {
        font-size: 1.3rem;
    }
}

/* --- Responsible Tourism Section --- */
/* Uses existing .two-column-layout styles */

/* --- Experiences Section --- */
    .experiences {
      display: flex;
      width: min(var(--wrap-max), 100% - var(--gut) * 2);
      margin: 0 auto;
      padding: 30px 0;
      box-sizing: border-box;
      gap: 20px;
    }

    .experiences-content-column {
      width: 40%;
      padding: 20px 20px 20px 0;
      box-sizing: border-box;
    }

    .experiences-slider-column {
      width: 60%;
      position: relative;
    }

    .slider-wrapper {
      overflow: hidden;
      width: 100%;
    }

    /* the slides carry a 10px margin: pull the viewport out by the same amount so the first and last
       slide sit on the gutter line rather than 10px inside it */
    @media (min-width: 1024px) {
      /* pull the TRACK, not the viewport: the slides still line up with the gutter, but the clip edge
         stays on the column line so nothing paints past it mid-transition */
      .experiences .slider-track { margin: 0 -10px; }
    }

    .slider-track {
      display: flex;
      transition: transform 0.6s ease-in-out;
    }

    .slide {
      background: #fff;
      color: #000;
      border-radius: 10px;
      margin: 10px;
      flex: 0 0 calc(50% - 20px);
      box-sizing: border-box;
      padding: 15px;
    }

    .slide img {
      width: 100%;
      /* 4:3 suits the temple sources (all 1200x900); the amenity copy of this slider mixes 4:3, 16:9
         and 3:2, so those are centre-cropped to match */
      aspect-ratio: 4 / 3;
      height: auto;
      object-fit: cover;
      border-radius: 6px;
    }
    /* portrait sources in the 4:3 frame: each such <img> carries its own crop anchor as
       style="--slide-pos: 50% N%" (Banke Bihari 20%; Madan Mohan 0% keeps the finial; Rangaji 0% keeps the gopuram's crown; the Kesav Deo slide's landscape 25% to keep the spire; Radha Raman's portrait gateway 5% from the top keeps the three domes and the nameplate; the Amiya Nimai Mahaprabhu deity 0% keeps the crown and face; the Radhavallabh close-up 30% centres the face and flute; Keshi Ghat's landscape 65% from the left keeps the temple spire; the Devraha Baba ashram's wide frame 25% keeps the pavilion and its reflection; the Dwarkadheesh slide's wide photo 35% keeps the flagged main spire and the hall; the amenities buggy portrait 55% down keeps the sun and the whole cab; Chaar Dham's portrait aerial 15% from the top keeps the trident and the Shiva figure) */
    .slide img.slide-img-pos { object-position: var(--slide-pos, 50% 50%); }

    .slider-dots {
      text-align: center;
      margin-top: 15px;
    }

    .slider-dots span {
      display: inline-block;
      width: 12px;
      height: 12px;
      /* the dots are the only control - no arrows, no swipe - so pad the hit box out to 24px with
         transparent space while the dot itself stays 12px (content-box, or the global
         border-box rule would eat the dot instead of growing the target) */
      box-sizing: content-box;
      margin: 4px;
      padding: 6px;
      background-clip: content-box;
      /* background-color, not the shorthand: `background:` resets background-clip */
      background-color: #efe7add9;
      border-radius: 50%;
      cursor: pointer;
    }

    .slider-dots span.active {
      background-color: #cfbd2cd9;
    }

    /* Responsive for Mobile & Tablet. 1023 (was 900 until the 2026-09-25 audit): in the two-up column
       between 901 and 1023 the cards were 236-270px wide and the temple titles broke one word per
       line. script.js reads the same number from window.innerWidth, which is what a media query
       measures - $(window).width() excludes the scrollbar and left a 15px band where the CSS and the
       JS disagreed. */
    @media (max-width: 1023px) {
      .experiences {
        flex-direction: column;
        padding: 20px 0;
      }

      .experiences-content-column,
      .experiences-slider-column {
        width: 100%;
        max-width: 100%;
        padding: 0;
      }

      .experiences-content-column {
        margin-bottom: 30px;
      }

      .slider-track {
        flex-wrap: nowrap;
      }

      /* scoped to .experiences on 2026-09-25: the amenities slider in the highlights band shares
         the .slide class but keeps two cards per view on tablets */
      .experiences .slide {
        flex: 0 0 100% !important;
        margin: 10px 0;
      }

      .slider-wrapper {
        overflow: hidden;
      }
    }

/* --- Read Our Blog Bar --- */
.read-blog-bar {
    /* bg-brown-light assumed */
    padding: 20px 0;
}
.read-blog-bar .container {
    display: flex;
    justify-content: flex-end; /* Align button to the right */
}
.read-blog-bar .btn-dark { /* Assuming .btn.btn-dark exists */
    background-color: var(--text-dark);
    color: var(--text-light);
    border: 1px solid var(--text-dark);
    padding: 10px 25px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-radius: 0;
}
.read-blog-bar .btn-dark:hover {
    background-color: var(--gold-accent);
    border-color: var(--gold-accent);
    color: var(--text-light);
}

/* enquiry bar (was the blog bar) */
.cta-bar { padding: 22px 0; }
.cta-bar .container { justify-content: space-between; align-items: center; gap: 24px; }
.cta-bar-text { margin: 0; color: var(--text-light); font-size: 0.95rem; line-height: 1.6; max-width: 640px; }
.cta-bar-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cta-bar .btn-dark { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; }
.cta-bar .btn-outline-light {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 0; background: transparent;
    color: var(--text-light); text-transform: uppercase; font-weight: bold; font-size: 0.9rem; letter-spacing: 0.5px;
}
.cta-bar .btn-outline-light i { font-size: 1.15rem; }
.cta-bar .btn-outline-light:hover { background: #fff; color: var(--text-dark); border-color: #fff; }
@media (max-width: 768px) {
    .cta-bar .container { flex-direction: column; text-align: center; }
    .cta-bar-actions { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 768px) {
    .read-blog-bar .container {
        justify-content: center; /* Center button on mobile */
    }
}

/* style.css */
/* (Continued from PART 3B) */

/* --- Heritage Section --- */
/* Uses existing .two-column-layout styles */
/* Any specific overrides or additional styling for this section's content can go here if needed */

/* --- Itineraries Section --- */
/* Uses existing .two-column-layout styles and .bg-beige */
/* Any specific overrides or additional styling for this section's content can go here if needed */

/* --- Hotel Facilities Section --- */
/* section-padding is assumed for overall padding */
.hotel-facilities-section .section-tagline {
    /* Uses global .section-tagline */
}
.hotel-facilities-section .section-title-dark {
    font-family: var(--primary-font);
    font-size: 2.5rem;
    color: var(--text-dark);
    /* 36px: the gold rule that sat here until 2026-09-28 carried 22px of the gap below the
       heading; without it the intro sentence crowded up to 14px (the rooms heading keeps 39px) */
    margin-bottom: 36px;
}
/* Intro line under "Sukham • Suvidha • Seva" */
.hotel-facilities-section .facilities-intro {
    max-width: 760px;
    margin: 0 auto 40px;
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
}

/* Ensure Font Awesome icons are displayed correctly if used globally */
.fas {
    /* Default Font Awesome styling should handle it, but you can add specifics if needed */
}

.slider-dots {
    margin-top: 15px; /* Adjust as needed */
    /* text-align: center; is already on the div */
}

/* Styling for individual dots (can be shared) */
.slider-dots .dot {
    display: inline-block;
    width: 8px;   /* Slightly smaller for sub-banners perhaps */
    height: 8px;
    background-color: rgba(255, 255, 255, 0.5); /* Assuming white/light dots for foundation hero */
    border-radius: 50%;
    margin: 0 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.slider-dots .dot.active {
    background-color: white; /* Active dot color */
    transform: scale(1.25);
}

/* style.css (Experiences Slider Track & Dots) */

/* ========= CORE VALUES SECTION STYLES ========= */

.core-values-section {
    /* Uses .section-padding for overall spacing */
    /* background-color: #fff; /* Or whatever your page default is */
}

.core-values-header {
    margin-bottom: 50px;
}

/* the intro sentence under the title: hold it to a readable measure instead of letting it run the
   full width of the wrap (the tagline above it is also a <p>, hence the :not()) */
.core-values-header > p:not(.section-tagline) {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.core-values-header .section-tagline {
    /* Uses global .section-tagline styles */
    color: #888; /* Slightly muted tagline */
    margin-bottom: 5px;
}

.core-values-header .section-main-title {
    /* Uses global .section-main-title styles */
    color: var(--text-dark);
}

.core-value-item {
    display: flex;
    align-items: stretch; /* Make text and image columns of equal height */
    /* margin-bottom: 40px; */ /* REMOVED this line to make items flush */
    background-color: var(--bg-beige); /* This now effectively becomes the background for text columns only if image is full height */
}

.core-value-item:last-child {
    margin-bottom: 0;
}

.core-value-text-content {
    flex: 1 1 55%; /* Text content takes slightly more space */
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center text if image is taller */
    box-sizing: border-box;
}

.core-value-image-content {
    flex: 1 1 56%; /* Image content */
    min-height: 300px; /* Minimum height for the image area */
    overflow: hidden; /* To ensure image covers well if using object-fit */
}

.core-value-image-content img {
    width: 100%;
    height: 100%;
    /* the photo's own aspect sets the row height here, so a portrait source made an 840px row around
       200px of text; cap it and let object-fit do the cropping instead */
    max-height: 500px;
    object-fit: cover; /* Cover the area, cropping if necessary */
    display: block;
}

/* Reversed layout for items with image on the left */
.core-value-item.item-layout-reverse {
    flex-direction: row-reverse;
}

.core-value-subtitle {
    font-size: 0.8rem;
    color: #777; /* Subtitle color */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-weight: 600;
}

.core-value-text-content h3 {
    font-family: var(--primary-font);
    font-size: 2rem; /* Or your standard h3 size */
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.3;
}

.core-value-text-content p {
    font-family: var(--secondary-font);
    color: #555; /* Paragraph text color */
    line-height: 1.7;
    margin-bottom: 25px;
}
.core-value-text-content p:last-of-type {
    margin-bottom: 30px; /* More space before button */
}

.btn-brown { /* New button style */
    background-color: #a88864; /* Brownish color from image */
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-radius: 0; /* Square buttons as per image */
    border: none;
    align-self: flex-start; /* Align button to the start of the flex container (text content) */
    transition: background-color 0.3s ease;
}

.btn-brown:hover {
    background-color: #8e7354; /* Darker brown on hover */
}

/* --- Responsive for Core Values Section --- */
@media (max-width: 991px) { /* Tablet */
    .core-value-text-content {
        padding: 30px 35px;
        flex-basis: 50%;
    }
    .core-value-image-content {
        flex-basis: 50%;
    }
    .core-value-text-content h3 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) { /* Mobile */
    .core-value-item,
    .core-value-item.item-layout-reverse {
        flex-direction: column; /* Stack text and image vertically */
    }

    .core-value-text-content {
        padding: 30px 20px;
        order: 2; /* Text content appears below image on mobile */
    }
    .core-value-item.item-layout-reverse .core-value-text-content {
        order: 2; /* Consistent order: image always first on mobile */
    }

    .core-value-image-content {
        min-height: 250px; /* Adjust image height for mobile */
        order: 1; /* Image content appears first on mobile */
    }

    .core-value-text-content h3 {
        font-size: 1.6rem;
    }

    .btn-brown {
        align-self: center; /* Center button on mobile */
    }
}

/* ========= CHECK AVAILABILITY SECTION STYLES ========= */
/* ========= CHECK AVAILABILITY SECTION STYLES - BACKGROUND REVISION ========= */

/* The menu is all in-page anchors now, so every jump target must clear the sticky
   header - otherwise the section heading lands underneath it. */
#about,
#rooms,
#facilities,
#highlights,
#experiences,
#voices,
#faq,
#booking,
#contact {
    scroll-margin-top: var(--header-height);
}

/* booking form extras */
.form-note { font-size: 0.85rem; color: #666; margin: -6px 0 18px; line-height: 1.6; }
.booking-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 3px; font-family: var(--secondary-font); font-size: 0.95rem; resize: vertical; background: #fff; }
.booking-form input[type="date"] { min-height: 42px; }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 12px 0 0; font-size: 0.9rem; line-height: 1.5; min-height: 1.4em; }
.form-status.is-ok { color: #2e6b3f; }
.form-status.is-error { color: #a33a2a; }

.check-availability-section {
    display: flex;
    min-height: 70vh;
    background-image: url('img/booking-bg-temple-bus.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Optional: for a parallax-like effect */
    position: relative; /* For a potential overall overlay if needed */
}

/* Optional: If you want an overlay over the ENTIRE section background image */
/*
.check-availability-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Adjust overlay darkness */
/*    z-index: 0; /* Behind column content */
/*}
*/

/* ... (.star-rating, h2, .reservation-info, .toll-free-note, .award-badge-booking styles remain same) ... */
.reservation-info { display: flex; align-items: center; margin-bottom: 15px; }
.reservation-info i { font-size: 2.5rem; margin-right: 15px; color: white; }
.reservation-info div span { display: block; font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-bottom: 2px; }
.reservation-info div p { font-size: 1.3rem; font-weight: bold; color: white; margin: 0; line-height: 1; }

/* ... (.booking-form-container, .form-section-tagline, h3, .booking-form, etc. styles remain same) ... */
.form-section-tagline { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; font-weight: 600; }
.booking-form .form-group { margin-bottom: 20px; }
.booking-form label { display: block; font-size: 0.85rem; color: #555; margin-bottom: 6px; font-weight: 500; }
.booking-form input[type="text"], .booking-form input[type="email"], .booking-form input[type="tel"], .booking-form input[type="number"], .booking-form select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; background-color: white; border-radius: 3px; box-sizing: border-box; font-family: var(--secondary-font); font-size: 0.95rem; color: var(--text-dark); }
.form-group-row { display: flex; gap: 20px; margin-bottom: 20px; }
.form-group-row .form-group { flex: 1; margin-bottom: 0; }
.form-group-row:last-of-type { margin-bottom: 30px; }
.btn-full-width { width: 100%; padding: 15px 20px !important; font-size: 0.9rem !important; }

/* --- Responsive for Check Availability Section --- */
@media (max-width: 991px) { /* Tablet and below */
    .check-availability-section {
        flex-direction: column;
        background-attachment: scroll; /* Parallax might not work well when stacked */
    }

    
    }

/* @media (max-width: 480px) { ... (existing mobile form input stacking if needed) ... } */
@media (max-width: 480px) { 
    .form-group-row { flex-direction: column; gap: 20px; }
        .reservation-info div p { font-size: 1.1rem; }
}

/* --- Suites Hero Section  Suite page start--- */
/* --- Suites Hero Section --- */
.suites-hero-section {
    position: relative;
    background-size: cover;
    background-position: center center; /* Ensure center focus */
    min-height: 55vh; /* Adjust height to your liking */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.suites-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.50); /* Slightly increased overlay for better contrast */
    z-index: 1;
}

.suites-hero-content {
    position: relative;
    z-index: 2;
    padding: 30px 0;
}

.suites-hero-tagline {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.suites-hero-title {
    font-family: var(--primary-font);
    font-size: 3.5rem; /* Adjust title size */
    font-weight: 700; /* Bolder title */
    color: white;
    line-height: 1.1;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Subtle shadow for depth */
}

/* --- Suite Detail Section --- */
.suite-detail-section {
    background-color: #ffffff; /* White background for content area */
}

.suite-item {
    display: flex;
    align-items: center;
    gap: 50px; /* Increased gap between text and image */
    margin-bottom: 2px; /* Increased space between suite items */
}
.suite-item:last-child {
    margin-bottom: 0;
}

.suite-item-text {
    flex: 1 1 48%; /* Adjust flex-basis if needed */
    box-sizing: border-box;
}

.suite-item-text h2 {
    font-family: var(--primary-font);
    font-size: 1.2rem; /* Suite name size */
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 700; /* Bolder suite name */
}

.suite-item-text > p { /* The main description paragraph */
    font-family: var(--secondary-font);
    color: #555;
    line-height: 1.7;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.suite-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* Adjust minmax for feature width */
    gap: 15px 12px; /* Row and column gap */
    margin-bottom: 35px;
}

.suite-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--secondary-font);
    font-size: 0.9rem;
    color: #444;
}

.feature-icon { /* Styling for Font Awesome <i> tags */
    font-size: 1.5rem;  /* Font Awesome icon size */
    color: var(--gold-accent); /* Icon color */
    width: 28px;        /* Fixed width for alignment */
    text-align: center; /* Center icon */
    line-height: 1;
}

.suite-item-image {
    flex: 1 1 52%; /* Adjust flex-basis if needed */
    min-height: 400px; /* Ensure image area has good height */
    max-height: 500px; /* Max height to prevent overly tall images */
    overflow: hidden;
    border-radius: 3px; /* Optional slight rounding */
}

.suite-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area well */
    display: block;
    transition: transform 0.4s ease-out;
}
.suite-item-image:hover img {
    transform: scale(1.03); /* Subtle zoom on image hover */
}

/* For alternating layout */
.suite-item.suite-item-reverse {
    flex-direction: row-reverse;
}
/* No specific padding adjustments needed for reversed text if gap handles it */

.suite-book-button {
    /* Uses .btn and .btn-brown from global styles */
    margin-top: 15px; /* Space above the button */
    padding: 12px 30px; /* Make button slightly larger */
    font-size: 0.9rem;
}

/* --- Responsive for Suites Page --- */
@media (max-width: 991px) { /* Tablet */
    .suites-hero-title {
        font-size: 2.8rem;
    }
    .suite-item {
        gap: 30px; /* Reduced gap for tablet */
    }
    .suite-item-text h2 {
        font-size: 1.9rem;
    }
    .suite-features-grid {
        grid-template-columns: repeat(2, 1fr); /* Force 2 columns for features on tablet */
    }
    .suite-item-image {
        min-height: 350px;
    }
}

@media (max-width: 767px) { /* Mobile */
    .suites-hero-section {
        min-height: 45vh;
    }
    .suites-hero-title {
        font-size: 2.2rem;
    }

    .suite-item,
    .suite-item.suite-item-reverse { /* Apply to both normal and reversed items */
        flex-direction: column !important; /* Force stacking */
        gap: 0; /* Remove gap if image and text should touch or have specific margins */
        margin-bottom: 40px; /* Adjust space between stacked suite items */
    }

    .suite-item-text {
        order: 2; /* Text content comes AFTER the image */
        padding: 25px 15px; /* Adjust padding for text block on mobile */
        text-align: center; /* Center text content if desired */
        /* background-color: var(--bg-beige); /* If you want a distinct bg for text on mobile */
    }
    /* No need for specific .suite-item.suite-item-reverse .suite-item-text adjustments here
       as 'order' will handle it for both. */

    .suite-item-text h2 {
        font-size: 1.7rem;
        /* text-align: center; /* Already centered by parent if that's the style */
    }
    .suite-item-text > p {
        text-align: left; /* Or 'center' or 'justify' as preferred */
        font-size: 0.9rem;
        margin-bottom: 25px;
    }

    .suite-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* More flexible for features on mobile */
        /* Or keep repeat(2, 1fr) if you prefer strict 2 columns */
        gap: 15px 10px;
        margin-bottom: 25px;
        /* justify-items: center; /* If you want features centered in their grid cells */
    }
     .suite-feature {
        /* justify-content: center; /* If feature content should be centered */
    }

    .suite-item-image {
        order: 1; /* Image content comes BEFORE the text */
        min-height: 250px; /* Adjust image height for mobile */
        max-height: 320px;
        width: 100%; /* Ensure image takes full width of the stacked column */
        /* border-radius: 0; /* Remove radius if it's part of a continuous block */
    }
    .suite-item-image img {
        /* border-top-left-radius: 3px; /* Example if item has radius */
        /* border-top-right-radius: 3px; */
        /* border-bottom-left-radius: 0; /* No bottom radius if text below */
        /* border-bottom-right-radius: 0; */
    }

    .suite-book-button {
        display: block;
        width: fit-content;
        margin: 0 auto; /* Center the button */
        text-align: center;
    }
}

/* ========= RESTAURANT SECTION STYLES ========= */

.restaurant-section {
    background-color: #fff; /* Or your desired background, e.g., var(--bg-beige) */
    /* Uses .section-padding for overall spacing */
}

.restaurant-content {
    max-width: 760px; /* Constrain the width of the content for readability */
    /* left-aligned copy, so anchor the block to the page's gutter line rather than floating it in the
       middle of the wrap with nothing above or below sharing its edge */
    margin: 0;
}

.restaurant-content .section-tagline {
    /* Uses global .section-tagline styles */
    color: #888;
    margin-bottom: 5px;
}

.restaurant-content .section-main-title {
    /* Uses global .section-main-title styles */
    color: var(--text-dark);
    margin-bottom: 30px; /* Space after main title */
}

.restaurant-timings-title {
    font-family: var(--secondary-font); /* Or var(--primary-font) if you prefer */
    font-size: 1.3rem;
    color: var(--text-dark);
    font-weight: 600; /* Bolder for this subtitle */
    margin-bottom: 20px;
}

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

.restaurant-timings-list li {
    display: flex;
    align-items: center; /* Vertically align icon and text */
    margin-bottom: 15px; /* Space between timing items */
    font-family: var(--secondary-font);
    font-size: 1rem;
    color: #555; /* Text color for timings */
}

.timing-icon {
    font-size: 1.1rem; /* Clock icon size */
    color: #777;    /* Clock icon color, can be var(--gold-accent) too */
    margin-right: 12px; /* Space between icon and text */
    width: 20px; /* Give icon a fixed width for alignment */
    text-align: center; /* Center icon if it has fixed width */
}

.restaurant-timings-list li span {
    flex-grow: 1; /* Allow text to take remaining space */
}

/* Optional styles for added description or button */
.restaurant-content > .btn { display: inline-block; margin-top: 22px; }
.restaurant-section.section-padding { padding-bottom: 80px; }
.restaurant-description {
    margin-top: 30px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}
/* .restaurant-content .btn-brown { margin-top: 25px; } /* If you add a button */

/* --- Responsive for Restaurant Section --- */
@media (max-width: 767px) { /* Mobile */
    .restaurant-content .section-main-title {
        font-size: 2.2rem; /* Adjust title size for mobile */
    }
    .restaurant-timings-title {
        font-size: 1.15rem;
    }
    .restaurant-timings-list li {
        font-size: 0.9rem; /* Adjust timing text size */
    }
    .timing-icon {
        font-size: 1rem;
    }
}

/* --- Itinerary Hero Slider Section --- */
.itinerary-hero-slider-section {
    position: relative;
    height: 50vh; /* Slider height is half the viewport height */
    /* Or slightly less: height: calc(50vh - 40px); /* If header is approx 80px, this gives space */
    min-height: 300px; /* Minimum height for smaller screens */
    max-height: 450px; /* Maximum height to prevent it from becoming too tall on large screens */
    overflow: hidden;
    background-color: #f0f0f0; /* Fallback background if images are loading */
}

.itinerary-hero-slider-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.itinerary-hero-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.7s ease-in-out;
    will-change: transform;
    /* Width set by JS */
}

.itinerary-hero-slide {
    flex: 0 0 auto; /* the script sets each slide to the viewport width; 100% here would mean 100% of the whole track */
    width: 100%;
    height: 100%;
    background-size: cover; /* Cover the area */
    background-position: center center;
    background-repeat: no-repeat;
}

.itinerary-hero-slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    /* Uses global .slider-dots .dot styles for appearance */
}
/* Ensure .slider-dots .dot and .dot.active are defined globally or copy them here */
/* Example if not global:
.slider-dots .dot { display: inline-block; width: 10px; height: 10px; background-color: rgba(255,255,255,0.5); border-radius: 50%; margin: 0 5px; cursor: pointer; transition: background-color 0.3s ease; }
.slider-dots .dot.active { background-color: white; }
*/

/* --- Itinerary Accordion Section --- */
.itinerary-accordion-section {
    background-color: var(--bg-beige); /* Light beige background */
}

.itinerary-header-content {
    max-width: 800px;
    margin: 0 auto 50px auto; /* Center header content and add space below */
    text-align: left; /* As per image */
}

.itinerary-header-content .section-main-title {
    font-size: 2.8rem; /* "Itinerary" title */
    margin-bottom: 15px;
    color: var(--text-dark);
}

.itinerary-intro-text {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 25px;
}

.itinerary-know-more {
    font-family: var(--secondary-font);
    font-size: 0.9rem;
    color: #444;
}
.itinerary-know-more span {
    display: block;
    font-weight: 600;
    margin-bottom: 3px;
    border-bottom: 1px solid #ccc; /* Underline for "Know More" */
    padding-bottom: 3px;
    width: fit-content; /* Underline only under text */
}
.itinerary-know-more a {
    color: #444;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.itinerary-know-more a:hover {
    color: var(--gold-accent);
}
.itinerary-know-more i {
    margin-right: 8px;
    color: var(--gold-accent); /* Phone icon color */
}

.itinerary-accordion {
    max-width: 800px; /* Match header content width */
    margin: 0 auto;
}

.accordion-item {
    background-color: #ffffff; /* White background for each accordion item */
    margin-bottom: 10px; /* Space between accordion items */
    border: 1px solid #eaeaea;
    border-radius: 3px;
    overflow: hidden; /* To contain content nicely */
}
.accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-header {
    background-color: transparent; /* Or #f9f9f9 for a very slight off-white */
    border: none;
    /* border-bottom: 1px solid #eaeaea; /* Separator line if content is directly below */
    padding: 18px 25px;
    width: 100%;
    text-align: left;
    font-family: var(--primary-font); /* Or secondary for a less decorative look */
    font-size: 1.25rem;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600; /* Slightly bolder header */
}
.accordion-item.active .accordion-header {
    /* Optional: style for active header */
    /* background-color: #f0f0f0; */
}

.accordion-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    transition: transform 0.3s ease;
}
.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    background-color: #777; /* Icon color */
    transition: background-color 0.3s ease;
}
.accordion-icon::before { /* Horizontal line */
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
}
.accordion-icon::after { /* Vertical line (for plus) */
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
}
.accordion-item.active .accordion-icon::after {
    transform: rotate(90deg); /* Hides vertical line to form minus */
}
.accordion-item.active .accordion-icon::before,
.accordion-item.active .accordion-icon::after {
    /* background-color: var(--gold-accent); /* Optional: change icon color when active */
}

.accordion-content {
    padding: 0px 25px 20px 25px; /* Top padding is 0 if header has bottom border */
    /* display: none; /* Hidden by default - JS will handle this */
    background-color: #ffffff;
    font-family: var(--secondary-font);
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}
.accordion-content ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 15px;
    margin-bottom: 0;
}
.accordion-content li {
    margin-bottom: 10px;
}
.accordion-content p:first-child {
    margin-top: 15px; /* Space if content starts with a paragraph */
}

/* --- Responsive for Itinerary Page --- */
@media (max-width: 767px) { /* Mobile */
    .itinerary-hero-slider-section {
        height: 40vh; /* Adjust hero height for mobile */
        min-height: 250px;
        max-height: 350px;
    }
    .itinerary-header-content .section-main-title {
        font-size: 2.2rem;
    }
    .itinerary-intro-text {
        font-size: 0.9rem;
    }
    .accordion-header {
        font-size: 1.1rem;
        padding: 15px 20px;
    }
    .accordion-content {
        padding: 0px 20px 15px 20px;
        font-size: 0.9rem;
    }
}

/* ===== Highlights: "Bhakti • Shanti • Atithya" (panel winner: cards) ===== */
/* =====================================================================
   "Bhakti • Shanti • Atithya" — JEWEL CARDS
   Seven frosted cream-glass cards on the tan band, each with a gold-ringed
   medallion. 4 + 3 (second row centred) on desktop, 3 + 3 + one wide seventh
   on tablet, 2 + 2 + 2 + a centred seventh on small tablets, and a single
   column of compact icon-left cards on phones.
   Hover: card lifts 4px, the ring fills gold, the icon turns cream.
   Every rule is scoped under .hl-section; every class is prefixed hl-.
   ===================================================================== */

/* ---- the band itself: keep the tan, add a soft glow for the glass to sit on ---- */
.hl-section.section-padding { padding: 56px 0 70px; }
.hl-section {
    position: relative;
    background-image:
        radial-gradient(ellipse 70% 48% at 50% 0%,   rgba(255, 242, 215, 0.19), rgba(255, 242, 215, 0) 72%),
        radial-gradient(ellipse 90% 55% at 50% 100%, rgba(66, 42, 18, 0.18),    rgba(66, 42, 18, 0) 72%);
}
/* ---- closing the band: a fading gold rule and gem at the foot to finish it ---- */
.hl-section::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: min(520px, 72%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        rgba(243, 223, 174, 0) 0%,
        rgba(243, 223, 174, 0.8) 32%,
        rgba(243, 223, 174, 0.8) 68%,
        rgba(243, 223, 174, 0) 100%);
    pointer-events: none;
}
.hl-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    transform: rotate(45deg);
    border: 1px solid rgba(243, 223, 174, 0.8);
    background: rgba(255, 250, 240, 0.25);
    pointer-events: none;
}

.hl-section .hl-head { margin-bottom: 46px; }
/* 39px under the heading: the gold rule that sat there until 2026-09-28 made up that gap
   (16 above it, 22 below); the subtitle keeps the same distance now the rule has gone */
.hl-section .hl-head h2 { margin-bottom: 39px; }


/* ---- grid: 8 tracks, each card spans 2; the 5th starts on track 2 so 5-6-7 sit centred ---- */
.hl-section .hl-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
}
.hl-section .hl-item { grid-column: span 2; }
.hl-section .hl-item:nth-child(5) { grid-column: 2 / span 2; }

/* ---- the card: frosted cream glass, hairline gold edge, gentle radius ---- */
.hl-section .hl-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 18px 30px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.17) 0%, rgba(255, 250, 240, 0.09) 100%);
    border: 1px solid rgba(255, 232, 190, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 12px 28px -20px rgba(50, 30, 10, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    isolation: isolate;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform;
}
/* a light wash that fades in under the content when the card lifts */
.hl-section .hl-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.12) 0%, rgba(255, 250, 240, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.hl-section .hl-item:hover::before { opacity: 1; }
.hl-section .hl-item:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 236, 200, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 22px 36px -18px rgba(50, 30, 10, 0.62);
}

/* ---- medallion: pale-gold ring, thin outer halo ring, pale-gold glyph ---- */
.hl-section .hl-medal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 50%;
    border: 1px solid rgba(243, 223, 174, 0.9);
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.18), rgba(255, 250, 240, 0.10));
    color: #f3dfae;
    font-size: 1.55rem;
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.hl-section .hl-medal::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(243, 223, 174, 0.5);
    transition: inset 0.3s ease, border-color 0.3s ease;
}
.hl-section .hl-medal i { display: block; }
.hl-section .hl-item:hover .hl-medal {
    background-color: #b8925a;
    background-image: linear-gradient(145deg, #dcbe84 0%, #b8925a 58%, #a3804a 100%);
    color: #fffaf0;
    border-color: rgba(255, 245, 225, 0.95);
    box-shadow:
        0 0 0 6px rgba(255, 236, 190, 0.14),
        0 10px 18px -8px rgba(60, 35, 10, 0.6);
}
.hl-section .hl-item:hover .hl-medal::after {
    inset: -9px;
    border-color: rgba(255, 240, 205, 0.7);
}

/* ---- type ---- */
.hl-section .hl-kicker {
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    line-height: 1.4;
    color: #f7e5ba;
    margin: 22px 0 8px;
}
.hl-section .hl-title {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 1.22rem;
    line-height: 1.3;
    color: var(--text-light);
    margin: 0 0 10px;
    text-wrap: balance;
}
.hl-section .hl-nb { white-space: nowrap; }
.hl-section .hl-text {
    font-size: 0.9rem;
    line-height: 1.62;
    color: #fffaf2;
    margin: 0;
    text-wrap: pretty;
}


/* ---- shared row layout: medallion left, copy right (wide seventh on tablet, every card on phones) ---- */
.hl-section .hl-item-body { min-width: 0; }

/* ---- tablet (880–1179): three per row, the seventh becomes one wide card ---- */
@media (max-width: 1179px) {
    .hl-section .hl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .hl-section .hl-item { grid-column: auto; padding: 30px 20px 28px; }
    .hl-section .hl-item:nth-child(5) { grid-column: auto; }
    .hl-section .hl-item:nth-child(7) {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: left;
        gap: 26px;
        padding: 28px 36px;
    }
    .hl-section .hl-item:nth-child(7) .hl-item-body { max-width: 640px; }
    .hl-section .hl-item:nth-child(7) .hl-kicker { margin-top: 0; }
    .hl-section .hl-item:nth-child(7) .hl-text { max-width: 560px; }
}

/* ---- small tablet (641–879): two per row, the seventh centred ---- */
@media (max-width: 879px) {
    .hl-section .hl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .hl-section .hl-item { grid-column: span 2; padding: 28px 22px 26px; }
    .hl-section .hl-item:nth-child(5) { grid-column: span 2; }
    .hl-section .hl-item:nth-child(7) {
        grid-column: 2 / span 2;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        padding: 28px 22px 26px;
    }
    .hl-section .hl-item:nth-child(7) .hl-item-body { max-width: none; }
    .hl-section .hl-item:nth-child(7) .hl-kicker { margin-top: 22px; }
    .hl-section .hl-item:nth-child(7) .hl-text { max-width: none; }
}

/* ---- phone (≤ 640): one column, compact icon-left cards ---- */
@media (max-width: 640px) {
    .hl-section.section-padding { padding: 44px 0 56px; }
    .hl-section .hl-head { margin-bottom: 34px; }
    .hl-section .hl-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hl-section .hl-item,
    .hl-section .hl-item:nth-child(5),
    .hl-section .hl-item:nth-child(7) {
        grid-column: auto;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        gap: 18px;
        padding: 22px 20px 22px 18px;
        border-radius: 10px;
    }
    .hl-section .hl-item:nth-child(7) .hl-item-body { max-width: none; }
    .hl-section .hl-item:nth-child(7) .hl-text { max-width: none; }
    .hl-section .hl-item:nth-child(7) .hl-kicker { margin-top: 0; }
    .hl-section .hl-medal { width: 54px; height: 54px; flex-basis: 54px; font-size: 1.3rem; margin-top: 2px; }
    .hl-section .hl-medal::after { inset: -5px; }
    .hl-section .hl-item:hover { transform: none; }
    .hl-section .hl-kicker { margin: 0 0 5px; font-size: 0.68rem; letter-spacing: 1.6px; }
    .hl-section .hl-title { font-size: 1.12rem; margin-bottom: 7px; }
    .hl-section .hl-text { font-size: 0.88rem; line-height: 1.55; }
}
@media (max-width: 360px) {
    .hl-section .hl-nb { white-space: normal; }
}

/* ============================================================
   Amenities — "Arched Niches"
   Each amenity sits in a temple-niche card: hairline arch on top,
   icon floating in the arch head, title + line on a cream shelf.
   ============================================================ */

.am-section {
    --am-gold: #B08D57;
    --am-gold-deep: #96733d;
    --am-gold-soft: rgba(176, 141, 87, .32);
    --am-cream: #f8f5f0;
    --am-line: #e9e2d6;
    --am-ink: #2f2b26;
    background: #fff;
}

/* SUKHAM BHAVATU: matched to the ATITHI tagline (.ad-section .section-tagline).
   Without this it falls back to the generic .section-tagline - 0.8rem/600/1px/#777. */
.am-section .section-tagline {
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    font-weight: 700;
    color: #a38a60;
    margin-bottom: 0.55rem;
}


.am-section .facilities-intro {
    /* Uncapped, matching the ATITHI intro, by the owner's decision. At 118
       characters this sentence fits on ONE 807px line in a 1312px container -
       it is too short to reach the edges, so "full width" here means uncapped
       rather than edge-to-edge. balance removed for the same reason it was
       removed there: it pulls the block in. */
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* ---- grid ------------------------------------------------- */
.am-section .am-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 30px 26px;
    margin-top: 48px;
}

/* ---- card / niche ----------------------------------------- */
.am-section .am-card {
    position: relative;
    flex: 1 1 250px;
    /* four cards plus their 26px gaps have to be able to span the full wrap, or the centred row
       floats inside the gutter line the rest of the page sits on */
    max-width: 320px;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #fff;
    border: 1px solid var(--am-line);
    border-radius: 50% 50% 10px 10px / 134px 134px 10px 10px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* between about 880 and 1190px the eight cards run 3+3+2 and flex-grow made the last two wider
   than the rest (320 vs 284): take the width from the row instead (audit 2026-09-25) */
@media (min-width: 880px) and (max-width: 1190px) {
    .am-section .am-card { flex: 0 1 calc((100% - 52px) / 3); max-width: none; }
}

/* arch head — holds the icon */
.am-section .am-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 154px;
    flex: 0 0 154px;
    padding-top: 12px;
    color: #a9895a;
    background: radial-gradient(112% 82% at 50% 44%, #fdfbf6 0%, #fff 72%);
    transition: color .3s ease;
}

/* inner hairline arch (the niche within the niche) */
.am-section .am-head::before {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    top: 11px;
    bottom: 0;
    border: 1px solid var(--am-gold-soft);
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 124px 124px 0 0;
    transition: border-color .3s ease, box-shadow .3s ease;
    pointer-events: none;
    /* fade the two verticals out before the shelf so the hairline never ends in a stub */
    -webkit-mask-image: linear-gradient(to bottom, #000 0 62%, rgba(0, 0, 0, 0) 97%);
    mask-image: linear-gradient(to bottom, #000 0 62%, rgba(0, 0, 0, 0) 97%);
}

/* the glow that wakes up behind the icon */
.am-section .am-head::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 83px;
    width: 208px;
    height: 208px;
    margin: -104px 0 0 -104px;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgba(176, 141, 87, .34), rgba(176, 141, 87, .13) 52%, rgba(176, 141, 87, 0) 78%);
    opacity: 0;
    transform: scale(.62);
    transition: opacity .3s ease, transform .35s ease;
    pointer-events: none;
}

/* keystone lozenge at the crown of the arch */
.am-section .am-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 22px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border: 1px solid var(--am-gold-soft);
    background: transparent;
    transform: rotate(45deg);
    transition: background-color .3s ease, border-color .3s ease;
    pointer-events: none;
    z-index: 2;
}

.am-section .am-icon {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    display: block;
    transition: transform .3s ease;
}

/* ---- cream shelf ------------------------------------------ */
.am-section .am-body {
    flex: 1 1 auto;
    background: var(--am-cream);
    border-top: 1px solid #efe8dc;
    padding: 24px 22px 28px;
    transition: background-color .3s ease;
}

.am-section .am-title {
    font-family: var(--primary-font, 'Playfair Display', serif);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--am-ink);
    margin: 0 0 14px;
    padding-bottom: 12px;
    position: relative;
}

.am-section .am-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 22px;
    height: 1px;
    margin-left: -11px;
    background: var(--am-gold);
    opacity: .45;
    transition: width .3s ease, margin-left .3s ease, opacity .3s ease;
}

/* "Wellness at Your Doorstep" links out to Jivagram. The link keeps the heading's face and ink
   (no default blue, no underline: the card's own gold rule and body tint already answer hover and
   keyboard focus via :focus-within); the ink warms to deep gold on hover, and a small up-right
   arrow, drawn inline like the card icons, says it leaves the page. */
.am-section .am-title a.am-title-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: .32em;
    border-radius: 2px;
    transition: color .25s ease;
}
.am-section .am-title a.am-title-link:hover,
.am-section .am-title a.am-title-link:focus-visible { color: var(--am-gold-deep); }
.am-section .am-title a.am-title-link:focus-visible { outline: 2px solid var(--am-gold); outline-offset: 4px; }
.am-section .am-title .am-title-ext {
    width: .58em;
    height: .58em;
    flex: 0 0 auto;
    align-self: center;
    opacity: .6;
    transition: opacity .25s ease, transform .25s ease;
}
.am-section .am-title a.am-title-link:hover .am-title-ext,
.am-section .am-title a.am-title-link:focus-visible .am-title-ext { opacity: 1; transform: translate(1px, -1px); }
@media (prefers-reduced-motion: reduce) {
    .am-section .am-title a.am-title-link,
    .am-section .am-title .am-title-ext { transition: none; }
    .am-section .am-title a.am-title-link:hover .am-title-ext { transform: none; }
}

.am-section .am-line {
    font-size: .875rem;
    line-height: 1.65;
    color: #5f584f;
    margin: 0;
}

/* ---- hover ------------------------------------------------ */
.am-section .am-card:hover,
.am-section .am-card:focus-within {
    transform: translateY(-6px);
    border-color: var(--am-gold);
    box-shadow: 0 22px 40px -22px rgba(88, 62, 26, .45);
}

.am-section .am-card:hover .am-head::before,
.am-section .am-card:focus-within .am-head::before {
    border-color: var(--am-gold);
}

.am-section .am-card:hover .am-head::after,
.am-section .am-card:focus-within .am-head::after {
    opacity: 1;
    transform: scale(1);
}

.am-section .am-card:hover .am-head,
.am-section .am-card:focus-within .am-head {
    color: var(--am-gold-deep);
}

.am-section .am-card:hover .am-icon,
.am-section .am-card:focus-within .am-icon {
    transform: translateY(-3px);
}

.am-section .am-card:hover::before,
.am-section .am-card:focus-within::before {
    background: var(--am-gold);
    border-color: var(--am-gold);
}

.am-section .am-card:hover .am-title::after,
.am-section .am-card:focus-within .am-title::after {
    width: 56px;
    margin-left: -28px;
    opacity: 1;
}

.am-section .am-card:hover .am-body,
.am-section .am-card:focus-within .am-body {
    background: #f6f1e8;
}

/* ---- responsive ------------------------------------------- */
@media (max-width: 767px) {
    .am-section .am-grid {
        gap: 26px 20px;
        margin-top: 38px;
    }

    .am-section .am-head {
        height: 140px;
        flex-basis: 140px;
    }

    .am-section .am-head::after {
        top: 76px;
    }

    .am-section .am-icon {
        width: 54px;
        height: 54px;
    }

    .am-section .am-card {
        border-radius: 50% 50% 10px 10px / 120px 120px 10px 10px;
    }

    .am-section .am-head::before {
        border-radius: 50% 50% 0 0 / 110px 110px 0 0;
    }

    .am-section .am-body {
        padding: 22px 20px 26px;
    }
}

/* ===== Booking section (panel winner: card) ===== */
/* ===== Booking: FLOATING CARD =====================================================
   One photographic band (dark, warm overlay) carries the invitation on the left;
   the enquiry form is lifted onto a floating cream card with a hairline gold border
   and a deep soft shadow. Everything is scoped under .bk-section.
   ================================================================================= */

.bk-section {
    --bk-gold: #B08D57;
    --bk-amber: #D4A24C;
    --bk-ink: #33291c;
    --bk-field: #FFFDF8;
    --bk-cal: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08D57' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='3.2' y='5' width='17.6' height='16' rx='2.6'/%3E%3Cpath d='M3.2 10.2h17.6M8 3.2v3.6M16 3.2v3.6'/%3E%3C/svg%3E");
    --bk-guest: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08D57' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.2' r='3.5'/%3E%3Cpath d='M4.8 20.4c0-4 3.2-6.2 7.2-6.2s7.2 2.2 7.2 6.2'/%3E%3C/svg%3E");
    --bk-bed: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08D57' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19V6.5M3 12.2h18V19M3 19h18M21 19v-1.2'/%3E%3Crect x='6.2' y='8.9' width='5.2' height='3.3' rx='1.6'/%3E%3C/svg%3E");

    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    padding: clamp(48px, 5.6vw, 88px) 0;
    background: #f2e4bc;            /* the watercolour's paper; also cancels the old background-image shorthand */
    background-attachment: scroll;  /* the old `fixed` is broken on iOS Safari */
}

/* ---- the photographic band -------------------------------------------------- */
.bk-section .bk-band {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('img/booking-bg-temple-bus.webp');
    background-size: cover;
    /* the composite is 1.41:1 against a ~1.32:1 section, so the width overflows a little; right-
       aligning slides the temple left so the bus lands in the gap between the invitation and the
       card instead of under the card. Top-aligned so the spire tips survive on wide screens,
       where the height overflows instead. */
    background-position: 100% 0%;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
@media (max-width: 991px) {
    /* the card stacks under the invitation on phones: use the taller crop */
    .bk-section .bk-band { background-image: url('img/booking-bg-temple-bus-mob.webp'); background-position: center top; }
}
/* the photo is fetched only as the visitor nears the booking card: script.js removes bk-wait then (page weight,
   14 Oct 2026); until then - and without JavaScript - the band shows the paper colour of .bk-section */
.bk-section.bk-wait .bk-band { background-image: none; }
.bk-section .bk-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        
        /* light wash: the invitation sits at the top on phones and tablets */
        radial-gradient(95% 42% at 50% 13%, rgba(255, 251, 242, 0.78) 0%, rgba(255, 251, 242, 0.30) 60%, rgba(255, 251, 242, 0) 100%),
        linear-gradient(180deg, rgba(255, 251, 242, 0.34) 0%, rgba(255, 251, 242, 0.12) 42%, rgba(255, 251, 242, 0) 62%);
}

.bk-section .bk-inner {
    position: relative;
    z-index: 2;
    width: min(var(--wrap-max), 100% - var(--gut) * 2);
    margin: 0 auto;
    padding: 0;
    display: grid;
    gap: clamp(34px, 5vw, 56px);
    align-items: center;
    box-sizing: border-box;
}

/* ================================ left: the invitation ========================= */
.bk-section .bk-invite {
    max-width: 580px;              /* 540 -> 580 so the heading's first line clears at 38px (see h2) */
    margin: 0 auto;
    text-align: center;
    color: var(--bk-ink);          /* ink on the pale watercolour (was white on the night photo) */
}
.bk-section .bk-stars {
    color: var(--bk-amber);
    font-size: 0.82rem;
    letter-spacing: 6px;
    margin: 0 0 18px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.bk-section .bk-invite h2 {
    font-family: var(--primary-font);
    font-weight: 700;
    color: var(--bk-ink);
    /* Two lines by the owner's decision: "Book Your Vrindavan Staycation" / "at Krishna Bhumi."
       (a <br> forces the break). The first line measures 14.82em in Playfair 700 (+6px of
       tracking), so the size is set from the column it has to fit, with ~2% to spare: single
       column below 1000px the column is the viewport minus its gutters (354px at 390 -> 22.8px,
       284px at 320 -> 18.5px); two columns from 1000px the invitation is ~0.5vw - 70px wide
       (430px at 1000 -> 27.5px) up to its 580px cap, which the 38px ceiling needs (569px). The
       old clamp(1.85rem, 3.6vw, 3rem) put the line at 717px on desktop, three lines deep. */
    font-size: min(2.375rem, 6.1vw - 1px);
    line-height: 1.16;
    letter-spacing: 0.2px;
    margin: 0 0 20px;
    /* a paper-coloured glow, not a dark shadow: it lifts the letters off the busy collage */
    text-shadow: 0 1px 16px rgba(255, 251, 242, 0.9);
}
@media (min-width: 1000px) {
    .bk-section .bk-invite h2 { font-size: min(2.375rem, 3.3vw - 5.5px); }
}
.bk-section .bk-hairline {
    display: block;
    width: 64px;
    height: 1px;
    margin: 0 auto 26px;
    background: linear-gradient(90deg, rgba(212, 162, 76, 0.15), var(--bk-amber), rgba(212, 162, 76, 0.15));
}

/* the two channels sit side by side and wrap to a stack when the column narrows */
.bk-section .bk-reserve-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px clamp(18px, 2.2vw, 30px);
    margin: 0 0 22px;
}
.bk-section .bk-reserve {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    text-align: left;
    text-decoration: none;
}
.bk-section .bk-reserve-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(176, 141, 87, 0.6);
    background: rgba(255, 253, 248, 0.78);
    box-shadow: 0 6px 16px -10px rgba(51, 41, 28, 0.45);
}
.bk-section .bk-reserve-icon i {
    font-size: 1rem;
    color: #8A6D3B;
    margin: 0;
    transition: color 0.25s ease;
}
.bk-section .bk-reserve > div span {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: rgba(51, 41, 28, 0.68);
    margin-bottom: 4px;
}
.bk-section .bk-reserve > div p {
    margin: 0;
    font-family: var(--secondary-font);
    /* 1.42rem when this was the only block; two of them have to share a ~540px column */
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.6px;
    color: var(--bk-ink);
}
/* the whole block is the link now, so the number carries the rule and the hover
   lifts the disc with it */
.bk-section a.bk-reserve > div p {
    display: inline-block;
    border-bottom: 1px solid rgba(212, 162, 76, 0.55);
    padding-bottom: 2px;
    transition: border-color 0.25s ease, color 0.25s ease;
}
.bk-section a.bk-reserve .bk-reserve-icon {
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.bk-section a.bk-reserve:hover > div p,
.bk-section a.bk-reserve:focus-visible > div p { color: #8A6D3B; border-bottom-color: var(--bk-amber); }
.bk-section a.bk-reserve:hover .bk-reserve-icon,
.bk-section a.bk-reserve:focus-visible .bk-reserve-icon {
    border-color: var(--bk-amber);
    background: var(--bk-amber);
}
.bk-section a.bk-reserve:hover .bk-reserve-icon i,
.bk-section a.bk-reserve:focus-visible .bk-reserve-icon i { color: #fff; }
.bk-section a.bk-reserve:focus-visible { outline: 2px solid var(--bk-amber); outline-offset: 6px; border-radius: 4px; }
.bk-section a.bk-reserve:focus:not(:focus-visible) { outline: none; }

/* ================================ right: the floating card ===================== */
.bk-section .bk-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: clamp(26px, 3.6vw, 40px) clamp(20px, 3.2vw, 38px) clamp(22px, 2.6vw, 28px);
    border: 1px solid rgba(176, 141, 87, 0.5);
    border-radius: 26px;
    background: linear-gradient(168deg, #FEFCF8 0%, #FAF5EC 54%, #F5EEE1 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 8px rgba(24, 15, 4, 0.22),
        0 34px 60px -28px rgba(12, 7, 2, 0.85),
        0 70px 120px -70px rgba(0, 0, 0, 0.9);
}
.bk-section .bk-card::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(176, 141, 87, 0.2);
    border-radius: 20px;
    pointer-events: none;
}

.bk-section .bk-card-head { text-align: center; margin-bottom: 20px; }
.bk-section .bk-motif {
    width: var(--flute-w);
    max-width: 56%;
    height: auto;
    margin: 0 auto 8px;
    opacity: 0.95;
}
.bk-section .bk-eyebrow {
    font-family: var(--secondary-font);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: var(--bk-gold);
    margin: 0 0 8px;
}
.bk-section .bk-card-title {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.6vw, 2.1rem);
    line-height: 1.15;
    color: #2e2517;
    margin: 0 0 14px;
}
.bk-section .bk-rule {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0 0 14px;
    background: linear-gradient(90deg, rgba(176, 141, 87, 0) 0%, rgba(176, 141, 87, 0.5) 22%, rgba(176, 141, 87, 0.5) 78%, rgba(176, 141, 87, 0) 100%);
}

/* ---- fields ------------------------------------------------------------------- */
.bk-section .booking-form { margin: 0; }
.bk-section .booking-form .form-group { margin: 0 0 13px; min-width: 0; }
.bk-section .bk-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
}
/* grid items default to min-width:auto, which lets a form control's intrinsic
   width blow the column open — every field must be allowed to shrink. */
.bk-section .bk-row > * { min-width: 0; }
.bk-section .booking-form input,
.bk-section .booking-form textarea { min-width: 0; }

.bk-section .booking-form label {
    display: block;
    font-family: var(--secondary-font);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.9px;
    text-transform: uppercase;
    color: #6E6048;
    margin: 0 0 7px;
}

.bk-section .booking-form input[type="text"],
.bk-section .booking-form input[type="email"],
.bk-section .booking-form input[type="tel"],
.bk-section .booking-form input[type="number"],
.bk-section .booking-form input[type="date"],
.bk-section .booking-form textarea {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    min-height: 52px;
    padding: 0 16px;
    font-family: var(--secondary-font);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--bk-ink);
    background-color: var(--bk-field);
    background-repeat: no-repeat;
    border: 1px solid rgba(139, 110, 66, 0.3);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(90, 66, 30, 0.06);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}
.bk-section .booking-form textarea {
    height: auto;
    min-height: 88px;
    padding: 13px 16px;
    line-height: 1.6;
    resize: vertical;
}
.bk-section .booking-form input::placeholder,
.bk-section .booking-form textarea::placeholder { color: #A99A84; opacity: 1; }

.bk-section .booking-form input:hover,
.bk-section .booking-form textarea:hover { border-color: rgba(139, 110, 66, 0.5); }

.bk-section .booking-form input:focus,
.bk-section .booking-form textarea:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--bk-gold);
    box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.28), inset 0 1px 2px rgba(90, 66, 30, 0.05);
}
/* keyboard users get the same, unmistakable gold ring */
.bk-section .booking-form input:focus-visible,
.bk-section .booking-form textarea:focus-visible,
.bk-section .bk-cta:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* ---- native date inputs, made deliberate --------------------------------------- */
.bk-section .booking-form input[type="date"] {
    position: relative;
    padding-right: 44px;
    background-image: var(--bk-cal);
    background-position: right 15px center;
    background-size: 17px 17px;
}
.bk-section .booking-form input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    opacity: 0;           /* the gold icon above is the affordance */
    cursor: pointer;
}
.bk-section .booking-form input[type="date"]::-webkit-datetime-edit { padding: 0; color: #6F6250; }
.bk-section .booking-form input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.bk-section .booking-form input[type="date"]::-webkit-datetime-edit-text { padding: 0 2px; color: #A99A84; }
.bk-section .booking-form input[type="date"]:focus::-webkit-datetime-edit { color: var(--bk-ink); }

/* ---- native number inputs ------------------------------------------------------ */
.bk-section .booking-form input[type="number"] {
    -moz-appearance: textfield;
    padding-right: 44px;
    background-position: right 15px center;
    background-size: 17px 17px;
}
.bk-section .booking-form input[type="number"]::-webkit-outer-spin-button,
.bk-section .booking-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.bk-section .booking-form input#adults { background-image: var(--bk-guest); }
.bk-section .booking-form input#rooms { background-image: var(--bk-bed); }

/* honeypot stays off screen exactly as before */
.bk-section .booking-form .hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: 0;
}

/* ---- the CTA -------------------------------------------------------------------- */
.bk-section .bk-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    margin: 20px 0 0;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background-color: var(--bk-amber);
    color: #111;
    font-family: var(--secondary-font);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2.5px;
    text-indent: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 230, 0.62),
        0 2px 4px rgba(60, 38, 4, 0.18),
        0 12px 24px -12px rgba(60, 38, 4, 0.5);
    transition: background-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}
.bk-section .bk-cta::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(190, 142, 58, 0.75);
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.bk-section .bk-cta:hover {
    background-color: #CE9740;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 250, 236, 0.75),
        0 4px 10px rgba(60, 38, 4, 0.24),
        0 16px 30px -10px rgba(203, 148, 56, 0.72),
        0 26px 52px -16px rgba(212, 162, 76, 0.6);
}
.bk-section .bk-cta:hover::after,
.bk-section .bk-cta:focus-visible::after { opacity: 1; transform: scale(1); }
.bk-section .bk-cta:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 230, 0.62),
        0 0 0 3px rgba(176, 141, 87, 0.45),
        0 12px 24px -12px rgba(60, 38, 4, 0.5);
}
.bk-section .bk-cta:active { transform: translateY(0); }
.bk-section .bk-cta:disabled { opacity: 0.65; cursor: default; transform: none; }

.bk-section .form-status {
    margin: 0;
    font-family: var(--secondary-font);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    color: #6f6250;
}
/* it only takes space once the script writes into it */
.bk-section .form-status:not(:empty) { margin-top: 12px; }
/* the script's success / error colours must still win */
.bk-section .form-status.is-ok { color: #2e6b3f; }
.bk-section .form-status.is-error { color: #a33a2a; }

/* ================================ layout ========================================= */
@media (min-width: 1000px) {
    .bk-section .bk-inner {
        grid-template-columns: minmax(0, 1fr) clamp(430px, 46%, 520px);
        gap: clamp(40px, 5vw, 76px);
    }
    .bk-section .bk-invite { text-align: left; margin: 0; }
    .bk-section .bk-hairline { margin-left: 0; margin-right: 0; }
    .bk-section .bk-reserve-row { justify-content: flex-start; }
    .bk-section .bk-card { margin: 0 0 0 auto; }
    .bk-section .bk-band::after {
        background:
            
            /* light wash: strongest behind the invitation on the left, nil over the card's paper */
            radial-gradient(46% 64% at 19% 52%, rgba(255, 251, 242, 0.80) 0%, rgba(255, 251, 242, 0.36) 55%, rgba(255, 251, 242, 0) 100%),
            linear-gradient(90deg, rgba(255, 251, 242, 0.30) 0%, rgba(255, 251, 242, 0.10) 48%, rgba(255, 251, 242, 0) 72%);
    }
}

@media (max-width: 560px) {
    .bk-section { padding: 46px 0; }
    .bk-section .bk-inner { gap: 30px; }  /* gutter now comes from the wrap, not from padding */
    .bk-section .bk-card { border-radius: 22px; }
    .bk-section .bk-card::before { border-radius: 16px; }
    .bk-section .booking-form label { font-size: 0.64rem; letter-spacing: 1.6px; }
    .bk-section .booking-form input[type="text"],
    .bk-section .booking-form input[type="email"],
    .bk-section .booking-form input[type="tel"],
    .bk-section .booking-form input[type="number"],
    .bk-section .booking-form input[type="date"] {
        height: 50px;
        min-height: 50px;
        font-size: 16px;     /* no zoom-on-focus in iOS Safari */
        padding: 0 14px;
    }
    .bk-section .booking-form input[type="number"] { padding-right: 38px; background-position: right 12px center; }
    /* dd-mm-yyyy plus a gold icon has to survive a half-width phone column */
    .bk-section .booking-form input[type="date"] {
        font-size: 16px;   /* 15px re-enabled iOS Safari's zoom-on-focus; the width is won back from the padding */
        padding: 0 30px 0 10px;
        background-position: right 9px center;
        background-size: 16px 16px;
    }
    .bk-section .booking-form textarea { font-size: 16px; padding: 13px 14px; }
    /* name / mobile / email get the full width on a phone; the two natural
       pairs (dates, guests + rooms) stay side by side. */
    .bk-section .bk-row { grid-template-columns: 1fr; }
    .bk-section .bk-row-tight { grid-template-columns: 1fr 1fr; column-gap: 10px; }
    .bk-section .bk-cta { height: 54px; letter-spacing: 2px; text-indent: 2px; }
}

/* motion off, states intact: the gold ring, the lift and the glow still land,
   they just stop animating. */
@media (prefers-reduced-motion: reduce) {
    .bk-section .bk-cta,
    .bk-section .bk-cta::after,
    .bk-section .booking-form input,
    .bk-section .booking-form textarea,
    .bk-section .bk-invite a { transition: none; }
}

/* ===== Bhagavad Gita quote (homepage, between the story blocks and the rooms) ===== */
.gita-quote { position: relative; overflow: hidden; }
/* a barely-there gold wash so the band is not flat beige */
.gita-quote::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(176, 141, 87, 0.10), rgba(176, 141, 87, 0) 62%),
        radial-gradient(90% 70% at 50% 115%, rgba(176, 141, 87, 0.07), rgba(176, 141, 87, 0) 60%);
    pointer-events: none;
}
.gita-figure {
    position: relative;
    margin: 0 auto;
    max-width: 940px;
    padding: 6px 24px 0;
    text-align: center;
}
.gita-flute { width: var(--flute-w); height: auto; margin: 0 auto 22px; display: block; opacity: 0.95; }
.gita-blockquote {
    position: relative;
    margin: 0 auto;
    /* 820px / 44-58px of side padding (was 740 / 16-34): the quote marks are drawn at the box's
       edges, and the longer verse (18.65) filled its box so the opening mark sat on the text,
       while the shorter verse (6.30) had air. Measured 2026-09-25: both verses keep three lines
       at desktop widths and every mark now clears the text by 30px or more. */
    max-width: min(820px, 100%);
    padding: 0 clamp(44px, 4vw, 58px);
}
/* the opening and closing quote marks, drawn large and pale in the display face */
.gita-blockquote::before,
.gita-blockquote::after {
    position: absolute;
    font-family: var(--primary-font);
    font-size: clamp(3.4rem, 7vw, 5.4rem);
    line-height: 1;
    color: rgba(176, 141, 87, 0.32);
    pointer-events: none;
}
.gita-blockquote::before { content: "“"; top: -0.16em; left: 0.06em; }
.gita-blockquote::after { content: "”"; bottom: -0.42em; right: 0.06em; }
.gita-text.quote-text {
    font-size: clamp(1.25rem, 2.3vw, 1.9rem);
    font-style: normal;
    line-height: 1.62;
    letter-spacing: 0.2px;
    color: #3a3129;
    max-width: none;
    margin: 0 auto;
    text-wrap: balance;
}
/* gold hairline with a small diamond, then the attribution */
.gita-source {
    position: relative;
    margin-top: 26px;
    padding-top: 26px;
    font-family: var(--secondary-font);
    font-size: 0.74rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold-accent);
}
.gita-source::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 132px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(to right, rgba(176, 141, 87, 0), rgba(176, 141, 87, 0.75), rgba(176, 141, 87, 0));
}
.gita-source::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    transform: rotate(45deg);
    background: var(--bg-light);
    border: 1px solid rgba(176, 141, 87, 0.75);
}
@media (max-width: 600px) {
    .gita-flute { margin-bottom: 16px; }
    .gita-blockquote { padding: 0 6px; }
    /* phones: the marks move out into the figure's side padding (19px inside the screen edge)
       instead of the text moving in, so neither verse gains a line; measured clear of the text
       on every line at 320, 360 and 390 */
    .gita-blockquote::before { top: -0.1em; left: -0.42em; }
    .gita-blockquote::after { bottom: -0.5em; right: -0.42em; }
    .gita-blockquote { max-width: 100%; }
}

/* the second verse band: a gold rule with a diamond in place of the flute, so the two bands differ */
.gita-quote-alt .gita-figure { padding-top: 0; }
.gita-rule {
    position: relative;
    display: block;
    width: 132px;
    height: 1px;
    margin: 0 auto 30px;
    background: linear-gradient(to right, rgba(176, 141, 87, 0), rgba(176, 141, 87, 0.75), rgba(176, 141, 87, 0));
}
.gita-rule::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    transform: rotate(45deg);
    background: var(--bg-light);
    border: 1px solid rgba(176, 141, 87, 0.75);
}

/* flute ornament on the booking invitation (over the photograph) */
.bk-section .bk-invite .bk-motif {
    width: var(--flute-w);
    max-width: 60%;
    margin: 0 0 18px;
    opacity: 1;
    filter: drop-shadow(0 2px 6px rgba(51, 41, 28, 0.22));
}
@media (max-width: 991px) {
    .bk-section .bk-invite .bk-motif { margin-left: auto; margin-right: auto; }
}

/* ===== Atithi Devo Bhava (rooms) (panel winner: editorial) ===== */
/* ===== ATITHI DEVO BHAVA — "editorial pair": a tall plate-framed photograph
   with a cream label plate resting on it. Everything scoped to .ad-section. ===== */

.ad-section {
    --ad-gold: #B08D57;
    --ad-gold-light: #e6cd9c;
    --ad-gold-soft: #d9c9a8;
    --ad-amber: #D4A24C;
    --ad-cream: #f8f5f0;
    --ad-ink: #2b2721;
    --ad-body: #5d564c;
    padding: 52px 0 48px;
    background-color: #fff;
}

/* ---------- section header ---------- */
.ad-section .section-motif {
    margin-bottom: 8px;
}

.ad-section .section-tagline {
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    font-weight: 700;
    color: #a38a60;
    margin-bottom: 0.55rem;
}

.ad-section h2 {
    font-family: var(--primary-font);
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 700;
    letter-spacing: 0.035em;
    color: var(--ad-ink);
    margin-bottom: 16px;
}

/* Bilingual headings - "अतिथि देवो भवः | Atithi Devo Bhava" (rooms), "सुखम् • सुविधा • सेवा | Sukham • Suvidha • Seva"
   (amenities) and "भक्ति • शान्ति • आतिथ्य | Bhakti • Shanti • Atithya" (highlights). Playfair has no Devanagari, so the Sanskrit takes the Tiro Devanagari webfont already
   loaded for the banner title. Regular is Tiro's only weight, so synthesis is off rather than smearing
   a faux bold; tracking is zeroed because letter-spacing breaks the shirorekha (the joining headline
   stroke). Neither half may break internally; below each heading's own fit width the two halves stack
   and the pipe steps aside instead of dangling at a line end. */
h2.bi-title .bi-title-dev {
    font-family: 'Tiro Devanagari Hindi', var(--primary-font);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0;
    white-space: nowrap;
}
h2.bi-title .bi-title-sep { margin: 0 0.3em 0 0.4em; opacity: 0.6; font-weight: 400; }
h2.bi-title .bi-title-lat { white-space: nowrap; }
/* rooms heading: one line from tablet width up */
@media (max-width: 767px) {
    .ad-section h2.bi-title .bi-title-dev { display: block; margin-bottom: 0.08em; }
    .ad-section h2.bi-title .bi-title-sep { display: none; }
}
/* amenities and highlights headings: 825px and 853px on one line at their fixed 2.5rem, so
   they fit the 903px container at 992 and overflow the 819px one at 900 - both stack below the
   tablet breakpoint. Stacked, the Latin line alone is 11.5em / 11.2em (460px / 448px at 40px),
   wider than any phone, so from there the size follows the viewport: 7.4vw clears a 354px
   container at 390 and a 284px one at 320. */
@media (max-width: 991px) {
    .am-section h2.bi-title,
    .hl-section h2.bi-title { font-size: clamp(1.5rem, 7.4vw, 2.5rem); }
    .am-section h2.bi-title .bi-title-dev,
    .hl-section h2.bi-title .bi-title-dev { display: block; margin-bottom: 0.08em; }
    .am-section h2.bi-title .bi-title-sep,
    .hl-section h2.bi-title .bi-title-sep { display: none; }
}

.ad-section .ad-flourish {
    position: relative;
    display: block;
    width: 132px;
    height: 1px;
    margin: 0 auto 22px;
    background: linear-gradient(90deg, rgba(176, 141, 87, 0), var(--ad-gold) 30%, var(--ad-gold) 70%, rgba(176, 141, 87, 0));
}

.ad-section .ad-flourish::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    width: 7px;
    height: 7px;
    background-color: var(--ad-gold);
    transform: translateX(-50%) rotate(45deg);
}

.ad-section .suites-description {
    /* Full section width, by the owner's decision (reference image supplied).
       Rags as [1240, 487] at a 1312px container: one long line and a shorter
       second, which is the shape asked for. No max-width and no text-wrap:
       balance - balance would even the lines but pull the block in to ~868px,
       which is the opposite of full width.
       Trade-off, recorded so it is not re-broken by accident: line one carries
       ~187 characters, well past the 45-75 that reads comfortably. Narrowing
       this is what a typographic pass would do; it is deliberate here. */
    max-width: none;
    margin: 0 auto 36px;
    /* matched to the Sukham intro (.facilities-intro): 1rem, weight 400, 1.7, #666.
       That paragraph carries no responsive type overrides, so the two below were
       stripped back to spacing only - otherwise the match broke at >=1024 and <=600. */
    font-family: var(--secondary-font);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
}

/* ---------- carousel shell ---------- */
.ad-section .suites-carousel-container {
    margin: 0 auto;
}

.ad-section .suites-carousel-viewport {
    padding: 6px 0 18px;
}

.ad-section .suites-grid {
    align-items: stretch;
}

/* ---------- the card ---------- */
.ad-section .suite-card {
    flex: 0 0 100%;
    max-width: 100%;
    height: auto;
    padding: 0 10px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* two across on tablets: one full-width card carried a photo taller than the screen (audit 2026-09-25) */
@media (min-width: 768px) and (max-width: 1023px) {
    .ad-section .suite-card {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 12px;
    }
}

/* three across, with a little more air, once there is room for it */
@media (min-width: 1024px) {
    .ad-section {
        padding: 66px 0 60px;
    }

    .ad-section .suites-description {
        margin-bottom: 46px;
    }

    .ad-section .suite-card {
        flex: 0 0 calc(100% / 3);
        max-width: calc(100% / 3);
        height: auto;
        padding: 0 14px;
    }
}

/* ---------- the photograph ---------- */
.ad-section .ad-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 2px;
    background-color: #ece6dc;
    box-shadow: 0 20px 40px -28px rgba(48, 32, 12, 0.6);
}

.ad-section .suite-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
    filter: saturate(1.08) contrast(1.05);
    transition: transform 0.35s ease, filter 0.35s ease;
}
/* a landscape source in the 3:4 frame carries its own crop anchor as style="--ad-pos: X% Y%"
   (the Villas photo: 68% from the left keeps the corner villa, its gate and the nameplate) */
.ad-section .suite-card img.ad-img-pos { object-position: var(--ad-pos, 50% 50%); }

/* warm vignette: keeps pale skies from bleeding into the white page */
.ad-section .ad-media::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 0 70px rgba(58, 40, 16, 0.2), inset 0 0 0 1px rgba(58, 40, 16, 0.12);
}

/* warm foot on the image so the cream plate has something to rest on */
.ad-section .ad-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 46%;
    background: linear-gradient(to top, rgba(46, 31, 13, 0.45), rgba(46, 31, 13, 0));
    pointer-events: none;
}

.ad-section .ad-frame {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(35, 22, 6, 0.35));
    transition: border-color 0.3s ease;
}

.ad-section .ad-frame::before,
.ad-section .ad-frame::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 0 solid var(--ad-gold-light);
    transition: border-color 0.3s ease;
}

.ad-section .ad-frame::before {
    top: -1px;
    left: -1px;
    border-top-width: 2px;
    border-left-width: 2px;
}

.ad-section .ad-frame::after {
    right: -1px;
    bottom: -1px;
    border-right-width: 2px;
    border-bottom-width: 2px;
}

/* ---------- the label plate ---------- */
.ad-section .ad-plate {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    width: calc(100% - 30px);
    margin: -24px auto 0;
    padding: 20px 18px 22px;
    background-color: var(--ad-cream);
    border-radius: 2px;
    box-shadow: 0 18px 36px -24px rgba(45, 30, 10, 0.55);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ad-section .ad-plate::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(176, 141, 87, 0), var(--ad-gold) 40%, var(--ad-gold) 60%, rgba(176, 141, 87, 0));
    transition: background 0.3s ease;
}

.ad-section .ad-card-soon .ad-plate::before {
    background: linear-gradient(90deg, rgba(206, 194, 170, 0), #cec2aa 40%, #cec2aa 60%, rgba(206, 194, 170, 0));
}

.ad-section .ad-plate h3 {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: 0.005em;
    color: var(--ad-ink);
    min-height: 2.5em;
    margin: 0 0 7px;
}

.ad-section .ad-summary {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 0.97rem;
    line-height: 1.45;
    color: #6f6352;
    margin: 0 0 14px;
}

/* ---------- features: compact, gold-dotted, always visible ---------- */
.ad-section .ad-features {
    list-style: none;
    margin: 0 0 20px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(176, 141, 87, 0.22);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 9px 18px;
}

.ad-section .ad-features li {
    position: relative;
    flex: 0 1 auto;
    padding-left: 14px;
    font-family: var(--secondary-font);
    font-size: 0.8rem;
    line-height: 1.5;
    letter-spacing: 0.012em;
    color: var(--ad-body);
}

.ad-section .ad-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--ad-gold);
}

/* three cards, one common depth for the feature block */
@media (min-width: 1024px) {
    .ad-section .ad-features {
        min-height: 90px;
    }
}

/* ---------- the action foot ---------- */
.ad-section .ad-action {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    min-height: 52px;
}

/* the not-yet-bookable foot floats in the middle of the space it is given,
   so the quiet card reads as reserved rather than unfinished */
.ad-section .ad-card-soon .ad-action {
    margin-top: 0;
    flex: 1 1 auto;
    justify-content: center;
    padding-bottom: 4px;
}

.ad-section .ad-rate {
    font-family: var(--secondary-font);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: #6d6455;
    margin: 0 0 12px;
}

.ad-section .ad-rate strong {
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--ad-ink);
    letter-spacing: 0.01em;
}

.ad-section .ad-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, #e0b365, var(--ad-amber));
    color: #1d1a14;
    font-family: var(--secondary-font);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.17em;
    text-decoration: none;
    box-shadow: 0 12px 22px -14px rgba(146, 102, 20, 0.95);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.ad-section .ad-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 16px 26px -12px rgba(146, 102, 20, 1);
}

.ad-section .ad-cta:focus-visible {
    outline: 2px solid #203F99;
    outline-offset: 3px;
}

.ad-section .ad-soon {
    font-family: var(--secondary-font);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #9a8e78;
    margin: 0 0 14px;
}

.ad-section .ad-soon-rule {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--ad-gold-soft), rgba(217, 201, 168, 0.12));
}

/* ---------- the not-yet-available pair reads quieter ---------- */
.ad-section .ad-card-soon img {
    filter: saturate(0.97) contrast(1.03);
}

.ad-section .ad-card-soon .ad-plate {
    background-color: #f5f2eb;
}

.ad-section .ad-card-soon .ad-frame::before,
.ad-section .ad-card-soon .ad-frame::after {
    border-color: rgba(230, 205, 156, 0.75);
}

/* ---------- hover / focus ---------- */
.ad-section .suite-card:hover .ad-plate,
.ad-section .suite-card:focus-within .ad-plate {
    transform: translateY(-6px);
    background-color: #fffdf8;
    box-shadow: 0 34px 54px -22px rgba(45, 30, 10, 0.68), 0 0 0 1px rgba(176, 141, 87, 0.55);
}

.ad-section .suite-card:hover .ad-media,
.ad-section .suite-card:focus-within .ad-media {
    box-shadow: 0 26px 46px -26px rgba(48, 32, 12, 0.72);
}

.ad-section .suite-card:hover img,
.ad-section .suite-card:focus-within img {
    transform: scale(1.04);
    filter: saturate(1.14) brightness(1.08) contrast(1.04);
}

.ad-section .suite-card:hover .ad-frame,
.ad-section .suite-card:focus-within .ad-frame {
    border-color: rgba(255, 255, 255, 0.62);
}

.ad-section .suite-card:hover .ad-frame::before,
.ad-section .suite-card:hover .ad-frame::after,
.ad-section .suite-card:focus-within .ad-frame::before,
.ad-section .suite-card:focus-within .ad-frame::after {
    border-color: #f6e3ba;
}

.ad-section .suite-card:hover .ad-plate::before,
.ad-section .suite-card:focus-within .ad-plate::before {
    background: linear-gradient(90deg, rgba(176, 141, 87, 0), var(--ad-gold) 30%, var(--ad-gold) 70%, rgba(176, 141, 87, 0));
}

/* ---------- nav + dots ---------- */
.ad-section .suite-carousel-nav {
    top: 34%;
    width: 46px;
    height: 46px;
    font-size: 1rem;
    color: var(--ad-gold);
    background-color: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(176, 141, 87, 0.45);
    box-shadow: 0 12px 24px -14px rgba(45, 30, 10, 0.65);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.ad-section .suite-carousel-nav:hover {
    background-color: #fff;
    color: #8A6D3B;
}

.ad-section .suite-carousel-nav.prev {
    left: -6px;
}

.ad-section .suite-carousel-nav.next {
    right: -6px;
}

/* three cards fit from 1024up, so the arrows stay out of the way — the carousel
   script's own inline display still wins if it ever needs them here */
@media (min-width: 1024px) {
    .ad-section .suite-carousel-nav {
        display: none;
    }
}

.ad-section .suites-carousel-dots {
    margin-top: 6px;
}

.ad-section .suites-carousel-dots:empty {
    margin-top: 0;
}

.ad-section .suites-carousel-dots .dot {
    box-sizing: content-box;
    width: 26px;
    height: 3px;
    padding: 20px 7px;
    margin: 0;
    border: 0;
    border-radius: 2px;
    background-color: #e3dac9;
    background-clip: content-box;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.ad-section .suites-carousel-dots .dot.active {
    background-color: var(--ad-gold);
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
    .ad-section .suites-description {
        margin-bottom: 30px;
    }

    .ad-section .suite-card {
        padding: 0 4px;
    }

    .ad-section .ad-plate {
        width: calc(100% - 28px);
        padding: 22px 20px 24px;
    }

    .ad-section .ad-plate h3 {
        font-size: 1.32rem;
        min-height: 0;
    }

    .ad-section .ad-summary {
        font-size: 1rem;
    }

    .ad-section .ad-features li {
        font-size: 0.85rem;
    }

    .ad-section .ad-cta {
        min-height: 50px;
        padding: 0 32px;
    }
}

/* No object-position override here on purpose. A previous rule biased these crops
   downwards "because the exteriors have a lot of sky", but both card images are
   ~0.807 against a 3/4 (0.75) box, so they overflow horizontally and a vertical
   value can never apply - verified pixel-identical at 0%/50%/74% across widths.
   If a TALLER image (ratio below 0.75) is ever used here, a Y bias becomes
   meaningful again. */

/* ---- the closing passage under the amenity niches ---- */
/* ---- the band's closing passage (moved here from the Sukham section 2026-09-25):
        a four-line Playfair verse between two hairlines, then a Lato lead.
        Same pattern as it had on white; the ink turns cream and the gold turns pale on the tan.
        `.awards-section p` restyles every paragraph in the band, so each rule here names the
        band and sets colour, size, line-height and margin itself. ---- */
.hl-section .am-closing {
    max-width: 780px;
    margin: 54px auto 0;
    text-align: center;
}
.hl-section .am-closing-lead {
    font-size: 1rem;
    line-height: 1.8;
    color: #fffaf2;
    margin: 0;
}
.hl-section .am-verse {
    position: relative;
    margin: 30px auto;
    padding: 26px 0;
}
.hl-section .am-verse::before,
.hl-section .am-verse::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 150px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(to right, rgba(243, 223, 174, 0), rgba(243, 223, 174, 0.8), rgba(243, 223, 174, 0));
}
.hl-section .am-verse::before { top: 0; }
.hl-section .am-verse::after { bottom: 0; }
.hl-section .am-verse p {
    font-family: var(--primary-font);
    font-size: clamp(1.1rem, 1.6vw, 1.32rem);
    line-height: 1.75;
    color: var(--text-light);
    margin: 0;
}
.hl-section .am-verse p + p { margin-top: 2px; }
@media (max-width: 600px) {
    .hl-section .am-closing { margin-top: 42px; }
    .hl-section .am-verse { margin: 26px auto; padding: 22px 0; }
    .hl-section .am-verse::before,
    .hl-section .am-verse::after { width: 120px; }
}

/* ===== Braj Darshan (panel winner: rail) ===== */
/* ===== Story sections - image and copy side by side =========================
   No overlap: a plate on one side, the copy on the other, with a clear gap
   between them. Section two is the mirror of section one, so the pair still
   reads as a spread.
   Ink #2f2b26 - body #5a5248 - gold #B08D57 (text gold #8A6D3B) - cream #f8f5f0
   ========================================================================== */

.st-section {
    --st-ink: #2f2b26;
    --st-body: #5a5248;
    --st-gold: #b08d57;
    --st-gold-ink: #8a6d3b;
    --st-cream: #f8f5f0;
    position: relative;
}
.st-section.section-padding { padding: 62px 0 66px; }
.st-one { background-color: var(--st-cream); }
.st-two { background-color: #fff; }

/* the seam: a fading gold rule with a diamond, stitching the two pages together */
.st-two::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 240px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(to right, rgba(176, 141, 87, 0), rgba(176, 141, 87, 0.6), rgba(176, 141, 87, 0));
}
.st-two::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    transform: rotate(45deg);
    background: linear-gradient(to bottom right, var(--st-cream) 0 50%, #fff 50% 100%);
    border: 1px solid rgba(176, 141, 87, 0.75);
}

/* ---- the two columns ---- */
.st-section .st-diptych {
    display: grid;
    /* the copy column has to hold "Vrindavan - From Darshan to Experience" on one line */
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    column-gap: clamp(38px, 4.2vw, 64px);
    align-items: center;
}
.st-two .st-diptych { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
.st-two .st-figure { grid-column: 2; grid-row: 1; }
.st-two .st-panel { grid-column: 1; grid-row: 1; }

/* ---- the plate ---- */
.st-section .st-figure {
    margin: 0;
}
/* ---- the flute, leading the copy ---- */
.st-section .st-motif {
    display: block;
    width: var(--flute-w);
    height: auto;
    /* -4px so the feather's soft edge lines up optically with the text below it; the tassels hang
       low, so the gap under it is smaller than it looks */
    margin: 0 0 10px -4px;
    filter: drop-shadow(0 4px 8px rgba(87, 62, 20, 0.14));
}
.st-section .st-frame {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    /* plain photo: a hairline of gold and a soft shadow, no mount and no frame */
    box-shadow: 0 0 0 1px rgba(176, 141, 87, 0.42), 0 22px 46px -32px rgba(40, 30, 16, 0.5);
}
.st-section .st-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 47% 50%;
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* the aerial is 3:2 in a portrait box, so only ~53% of its width shows. Centred, the
   temple was sliced in half at the left edge; 36% keeps it whole alongside the sign
   and the towers - which is what the copy beside it describes. */
.st-two .st-photo { object-position: 36% 48%; }
/* the sunset plate is re-anchored to the top edge: the old 22% origin left the dark road hoarding
   as a mud-coloured bar across the bottom, which is far more conspicuous now the photo is mounted */
/* the old photo here was landscape (1.50) and needed zooming to fill a portrait box;
   the new one is portrait (0.783) and already fits, so no rest-state zoom */
.st-one .st-photo { transform: none; transform-origin: 50% 50%; }
.st-section .st-figure:hover .st-photo { transform: scale(1.035); }
.st-one .st-figure:hover .st-photo { transform: scale(1.04); }

/* ---- the copy: no card, it sits on the section's own ground ---- */
.st-section .st-panel {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* ---- type ---- */
.st-section .st-said {
    font-family: var(--secondary-font);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: var(--st-gold-ink);
    margin: 0 0 12px;
}
.st-section .st-title {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: clamp(1.9rem, 2.5vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.004em;
    color: var(--st-ink);
    /* no balancing: if it ever does wrap, fill the line rather than centring two short ones */
    margin: 0;
}
/* the line under the title ("Darshan to Experience"): same face as the title, a step down in
   size and set in the section's gold ink so it reads as a subtitle, not a second heading */
.st-section .st-panel p.st-sub {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: clamp(1.15rem, 1.45vw, 1.35rem);
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--st-gold-ink);
    margin: 8px 0 0;
    text-align: left;
}
.st-section .st-rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 22px 0 24px;
    background: linear-gradient(to right, var(--st-gold), rgba(176, 141, 87, 0.12));
}
.st-section .st-panel p {
    font-family: var(--secondary-font);
    font-size: 1rem;
    line-height: 1.72;
    color: var(--st-body);
    /* the column is sized for the heading; hold the body to a readable measure inside it */
    max-width: 42rem;
    margin: 0 0 12px;
}
/* justified body copy, with no word ever broken: `hyphens: none` also suppresses breaking at the
   hyphens already in the text (40-acre, per-night, hotel-like, home-like), not just automatic ones.
   The eyebrow, the refrain and the sign-off keep their own alignment. */
@media (min-width: 480px) {
    .st-section .st-panel p:not(.st-said):not(.st-refrain):not(.st-signoff):not(.st-sub) {
        text-align: justify;
        text-justify: inter-word;
    }
}
.st-section .st-panel {
    -webkit-hyphens: none;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}
/* `hyphens: none` is meant to cover this but Chrome still breaks after a hyphen that is already in
   the text, so the compounds that contain one are bound by hand (40-acre, per-night, hotel-like,
   home-like). Verified by forcing the measure down to 190px. */
.st-section .st-nb { white-space: nowrap; }
.st-section .st-panel p:last-child { margin-bottom: 0; }
.st-section .st-panel p.st-lead {
    font-size: 1.1rem;
    line-height: 1.68;
    color: #4a433a;
    margin-bottom: 15px;
}
.st-section .st-panel strong {
    font-weight: 700;
    color: var(--st-ink);
}

/* ---- the refrain, a verse between two fading rules ---- */
.st-section .st-verse {
    position: relative;
    /* same measure as the body, so its rules end on the same line the copy does */
    max-width: 42rem;
    margin: 24px 0 17px;
    padding: 19px 0 21px;
    text-align: center;
}
.st-section .st-verse p { max-width: none; }
.st-section .st-verse::before,
.st-section .st-verse::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(176, 141, 87, 0), rgba(176, 141, 87, 0.6), rgba(176, 141, 87, 0));
}
.st-section .st-verse::before { top: 0; }
.st-section .st-verse::after { bottom: 0; }
.st-section .st-panel p.st-refrain {
    font-family: var(--primary-font);
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--st-ink);
    margin: 0;
}
.st-section .st-panel p.st-signoff {
    font-family: var(--primary-font);
    font-size: 1.08rem;
    line-height: 1.55;
    color: var(--st-gold-ink);
    text-align: center;
    text-wrap: balance;
    margin: 0;
}
.st-section .st-panel p.st-signoff strong { color: var(--st-gold-ink); }

/* ---- tablet: still side by side, but the plate takes a little less and goes squarer
        so the two columns finish closer together ---- */
@media (max-width: 1279px) {
    .st-section .st-photo { aspect-ratio: 3 / 4; }
    .st-section .st-motif { margin-bottom: 8px; }
}

/* ---- below 1180 the columns stack: plate on top, copy under it. Narrower than that the copy runs
        far taller than any sensible plate, so a side-by-side leaves the photo floating ---- */
@media (max-width: 1179px) {
    .st-section .st-diptych,
    .st-two .st-diptych {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 34px;
    }
    .st-two .st-figure { grid-column: 1; grid-row: 1; }
    .st-two .st-panel { grid-column: 1; grid-row: 2; }
    .st-section .st-photo,
    .st-two .st-photo { aspect-ratio: 2 / 1; object-position: 50% 52%; }
    .st-two .st-photo { object-position: 50% 46%; }
    /* story one's photo is a PORTRAIT source: a 2/1 letterbox crops it down to the
       spire tips with half the frame empty sky. A squarer box keeps the temple whole. */
    .st-one .st-photo { aspect-ratio: 4 / 3; object-position: 50% 56%; }
}

/* ---- phone ---- */
@media (max-width: 767px) {
    .st-section.section-padding { padding: 46px 0 50px; }
    .st-section .st-diptych,
    .st-two .st-diptych { row-gap: 26px; }
    .st-section .st-photo,
    .st-two .st-photo { aspect-ratio: 5 / 6; object-position: 50% 50%; }
    .st-two .st-photo { object-position: 36% 50%; }
    .st-section .st-motif { margin: 0 0 6px -3px; }
    /* too narrow for one line here, so balance the two rather than leaving a one-word orphan */
    .st-section .st-title { font-size: 1.72rem; text-wrap: balance; }
    .st-section .st-panel p.st-sub { font-size: 1.08rem; margin-top: 6px; }
    .st-section .st-rule { margin: 18px 0 20px; }
    .st-section .st-panel p { font-size: 0.97rem; line-height: 1.76; }
    .st-section .st-panel p.st-lead { font-size: 1.05rem; }
    .st-section .st-panel p.st-refrain { font-size: 1.1rem; }
    .st-section .st-panel p.st-signoff { font-size: 1.06rem; }
    .st-section .st-verse { margin: 22px 0 18px; padding: 18px 0 20px; }
}

/* ===== Enquiry stripe (panel winner: cream) ===== */
/* ===== cream: the enquiry stripe, inverted =====
   A quiet cream breath between the white temple slider above and the dark
   campus-film frame below. Cream ground, hairline gold keylines top and
   bottom, a Playfair lead-in with the rest in Lato ink, a small gold
   ornament, one amber pill and one gold-outlined WhatsApp button. */

section.cb-section {
    --cb-gold: #B08D57;
    --cb-gold-deep: #96713F;
    --cb-amber: #D4A24C;
    --cb-amber-deep: #C8933C;
    --cb-ink: #2B2117;
    --cb-body: #63523F;

    position: relative;
    isolation: isolate;
    padding: 30px 0 31px;
    background-color: #F3EBDB;
    background-image:
        radial-gradient(130% 170% at 50% -10%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, #FAF4E8 0%, #F2E9D7 52%, #E9DCC4 100%);
    box-shadow:
        inset 0 -16px 20px -22px rgba(74, 49, 12, 0.38),
        inset 0 18px 22px -24px rgba(255, 255, 255, 0.9);
    color: var(--cb-ink);
    overflow: hidden;
}

/* letterpress keylines: a gold hairline on the very edge, a white relief line
   under it and a fainter gold companion 3px in. Both fade out towards the
   page edges so the band is ruled, not boxed. */
.cb-section::before,
.cb-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 17%, rgba(0, 0, 0, 1) 83%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 17%, rgba(0, 0, 0, 1) 83%, rgba(0, 0, 0, 0) 100%);
}
.cb-section::before {
    top: 0;
    background: linear-gradient(180deg,
        rgba(176, 141, 87, 0.85) 0 1px,
        rgba(255, 255, 255, 0.92) 1px 2px,
        rgba(176, 141, 87, 0) 2px 3px,
        rgba(176, 141, 87, 0.3) 3px 4px);
}
.cb-section::after {
    bottom: 0;
    background: linear-gradient(0deg,
        rgba(176, 141, 87, 0.85) 0 1px,
        rgba(255, 252, 245, 0.45) 1px 2px,
        rgba(176, 141, 87, 0) 2px 3px,
        rgba(176, 141, 87, 0.3) 3px 4px);
}

.cb-section .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}

/* ---- the sentence ---- */
.cb-section .cb-copy {
    flex: 1 1 auto;
    min-width: 0;
    /* wide enough to take up the slack the wider wrap adds, so the hairline stays 40px off the
       sentence instead of drifting across to the buttons */
    max-width: 860px;
    display: flex;
    align-items: center;
    gap: 22px;
}
.cb-section .cb-orn {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    overflow: visible;
}
.cb-section .cb-line {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.62;
    color: var(--cb-body);
    letter-spacing: 0.1px;
    flex: 1 1 auto;
    min-width: 0;
}
.cb-section .cb-lead {
    font-family: 'Playfair Display', serif;
    font-size: 1.16rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.35;
    color: var(--cb-ink);
    margin-right: 7px;
}

/* ---- the actions ---- */
.cb-section .cb-actions {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 40px;
}
/* vertical gold hairline separating sentence from actions */
.cb-section .cb-actions::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 58px;
    background: linear-gradient(180deg,
        rgba(176, 141, 87, 0) 0%,
        rgba(176, 141, 87, 0.55) 30%,
        rgba(176, 141, 87, 0.55) 70%,
        rgba(176, 141, 87, 0) 100%);
}

.cb-section .cb-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 999px;
    font-family: 'Lato', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* primary: the brand amber pill, black label */
.cb-section .cb-btn-primary {
    padding: 0 34px;
    border: 0;
    background-color: var(--cb-amber);
    color: #111;
    letter-spacing: 2.2px;
    text-indent: 2.2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 249, 233, 0.7),
        0 1px 2px rgba(74, 49, 12, 0.18),
        0 10px 20px -12px rgba(74, 49, 12, 0.5);
    transition: background-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}
.cb-section .cb-btn-primary::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(176, 141, 87, 0.75);
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.cb-section .cb-btn-primary:hover,
.cb-section .cb-btn-primary:focus-visible {
    background-color: var(--cb-amber-deep);
    color: #111;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 249, 233, 0.7),
        0 3px 6px rgba(74, 49, 12, 0.2),
        0 16px 28px -12px rgba(200, 147, 60, 0.75);
}
.cb-section .cb-btn-primary:hover::after,
.cb-section .cb-btn-primary:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}
.cb-section .cb-btn-primary:active { transform: translateY(0); }

/* quiet: gold outline, gold glyph */
.cb-section .cb-btn-ghost {
    gap: 9px;
    padding: 0 26px;
    border: 1px solid rgba(176, 141, 87, 0.85);
    background-color: rgba(255, 255, 255, 0.5);
    color: #4A3A28;
    letter-spacing: 1.7px;
    transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}
.cb-section .cb-btn-ghost i {
    font-size: 1.12rem;
    line-height: 1;
    color: var(--cb-gold);
    transition: color 0.28s ease;
}
.cb-section .cb-btn-ghost:hover,
.cb-section .cb-btn-ghost:focus-visible {
    background-color: rgba(176, 141, 87, 0.13);
    border-color: var(--cb-gold-deep);
    color: var(--cb-ink);
    box-shadow: 0 8px 18px -12px rgba(74, 49, 12, 0.6);
}
.cb-section .cb-btn-ghost:hover i { color: var(--cb-gold-deep); }

.cb-section .cb-btn:focus-visible {
    outline: 2px solid var(--cb-gold-deep);
    outline-offset: 6px;
}
.cb-section .cb-btn:focus:not(:focus-visible) { outline: none; }

/* ---- tablet ---- */
@media (max-width: 1100px) {
    .cb-section .container { gap: 28px; }
    .cb-section .cb-copy { max-width: 520px; gap: 16px; }
    .cb-section .cb-orn { width: 38px; height: 38px; }
    .cb-section .cb-line { font-size: 0.88rem; line-height: 1.58; }
    .cb-section .cb-lead { font-size: 1.05rem; }
    .cb-section .cb-actions { gap: 12px; padding-left: 28px; }
    .cb-section .cb-btn-primary { padding: 0 26px; letter-spacing: 1.8px; text-indent: 1.8px; }
    .cb-section .cb-btn-ghost { padding: 0 20px; letter-spacing: 1.4px; }
}

/* ---- narrow tablets (with three buttons the row squeezed the sentence to a few words per line
        between about 770 and 1010px): the copy sits above a centred row of buttons. 1023, so
        a 1024px tablet keeps the single row ---- */
@media (max-width: 1023px) {
    section.cb-section { padding: 26px 0 28px; }
    .cb-section .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .cb-section .cb-copy { max-width: 100%; justify-content: center; gap: 14px; }
    .cb-section .cb-line { flex: 0 1 auto; font-size: 0.9rem; line-height: 1.62; }
    .cb-section .cb-lead { font-size: 1.12rem; margin-right: 0; }
    .cb-section .cb-actions {
        width: 100%;
        justify-content: center;
        gap: 12px;
        padding-left: 0;
        padding-top: 18px;
    }
    /* the rule turns horizontal above the buttons */
    .cb-section .cb-actions::before {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 132px;
        height: 1px;
        background: linear-gradient(90deg,
            rgba(176, 141, 87, 0) 0%,
            rgba(176, 141, 87, 0.55) 30%,
            rgba(176, 141, 87, 0.55) 70%,
            rgba(176, 141, 87, 0) 100%);
    }
}

/* ---- phones: ornament above the sentence, and the buttons stack full width ---- */
@media (max-width: 768px) {
    .cb-section .cb-copy { flex-direction: column; gap: 12px; }
    .cb-section .cb-orn { width: 40px; height: 40px; margin: 0 auto; }
    .cb-section .cb-lead { display: block; margin: 0 0 2px; }
    .cb-section .cb-actions { flex-direction: column; gap: 10px; }
    .cb-section .cb-btn { width: 100%; max-width: 330px; height: 50px; }
    .cb-section .cb-btn-primary { padding: 0 20px; letter-spacing: 2px; text-indent: 2px; }
    .cb-section .cb-btn-ghost { padding: 0 20px; letter-spacing: 1.6px; }
}

/* ===== Floating dock: back to top, call, WhatsApp (replaced the single WhatsApp button
   2026-09-25) =====================================================================
   Three 54px discs stacked at the bottom right. Call wears the brand amber with an ink glyph,
   WhatsApp its own green with a white glyph, back-to-top the site's ink with a cream glyph;
   each carries a hairline white ring and a soft shadow so it reads on photos and on paper alike.
   A small cream label slides out to the left on hover or keyboard focus (touch has no hover, the
   aria-labels cover it). Back-to-top keeps its slot at the top of the stack but stays invisible
   and unclickable until script.js switches it on after 400px of scrolling, so the two contact
   buttons never jump. Below the Fancybox lightbox (z 99992) on purpose. */
.fd-dock {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.fd-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.35rem;
    line-height: 1;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        0 2px 4px rgba(30, 20, 8, 0.18),
        0 12px 24px -10px rgba(30, 20, 8, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.fd-btn:hover,
.fd-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.65),
        0 4px 8px rgba(30, 20, 8, 0.2),
        0 18px 30px -10px rgba(30, 20, 8, 0.55);
}
.fd-btn:active { transform: translateY(0); }
.fd-call { background-color: #D4A24C; color: #1c1713; }
.fd-call:hover, .fd-call:focus-visible { background-color: #E3B45C; color: #1c1713; }
.fd-wa { background-color: #25D366; color: #fff; font-size: 1.6rem; }
.fd-wa:hover, .fd-wa:focus-visible { background-color: #1DAE52; color: #fff; }
.fd-top { background-color: #2f2b26; color: #f8f1e3; font-size: 1.05rem; }
.fd-top:hover, .fd-top:focus-visible { background-color: #B08D57; color: #1c1713; }
/* back-to-top: off until the page has been scrolled */
.fd-top:not(.is-on) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
}
.fd-top { transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
/* the slide-out label */
.fd-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translate(8px, -50%);
    padding: 8px 14px;
    border-radius: 999px;
    background: #fffdf9;
    color: #2f2b26;
    font-family: var(--secondary-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 18px -10px rgba(30, 20, 8, 0.45), 0 0 0 1px rgba(176, 141, 87, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.fd-btn:hover .fd-label,
.fd-btn:focus-visible .fd-label { opacity: 1; transform: translate(0, -50%); }
.fd-btn:focus-visible { outline: 2px solid #96713f; outline-offset: 4px; }
.fd-btn:focus:not(:focus-visible) { outline: none; }
@media (max-width: 768px) {
    .fd-dock { right: 16px; bottom: 16px; gap: 8px; }
    .fd-btn { width: 48px; height: 48px; font-size: 1.2rem; }
    .fd-wa { font-size: 1.45rem; }
    .fd-top { font-size: 0.95rem; }
}
/* on screens up to 1023px the dock's band sat over the rooms carousel's Next arrow and the right
   25px of every booking-form field; script.js adds this class while #rooms or #booking is in view,
   and the dock slides down out of the way (the header keeps a BOOK NOW and both sections carry
   their own contact links) */
.fd-dock { transition: transform 0.3s ease, opacity 0.3s ease; }
.fd-dock.fd-dock--away { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .fd-dock, .fd-btn, .fd-top, .fd-label { transition: none; }
    .fd-btn:hover, .fd-btn:focus-visible { transform: none; }
}

/* ===== Cookie notice (2026-09-28) ==================================================
   #cookie-notice in index.php, shown by script.js until the visitor chooses. A cream paper
   card with a gold hairline, the site's serif for the title and Lato for the copy; Accept is
   the brand amber pill, Decline the hairline ghost. Bottom-left on wide screens, clear of the
   floating dock at the bottom right; on phones (<=575px) a compact full-width sheet, and the dock is
   lifted above it (html.cc-open + --cc-h, set by script.js) so the contact buttons stay usable; on
   short landscape screens one slim bar beside the dock. Wherever the card would still cover the
   banner's BOOK NOW on the first screen, that button rises above it while the card is up (13 Oct 2026).
   Level with the header (1000) but earlier in the DOM, so the header and its open phone menu paint
   over the card; above the dock (999), below the Fancybox lightbox. */
.cc-notice {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 1000;
    width: min(400px, 100% - 44px);
}
/* above 768px the hero's vertical reservation rail runs down the left edge (x 30-65px): start the
   card clear of it, or it hides the rail's WhatsApp number */
@media (min-width: 769px) {
    .cc-notice { left: 96px; }
    .ty-body .cc-notice { left: 22px; }   /* thank-you.php has no rail, and its centred call link starts near x 480 */
}
.cc-notice[hidden] { display: none; }
.cc-card {
    padding: 22px 24px 24px;
    border-radius: 6px;
    background: #fffdf9;
    color: #2f2b26;
    box-shadow:
        0 0 0 1px rgba(176, 141, 87, 0.5),
        0 2px 4px rgba(30, 20, 8, 0.12),
        0 24px 40px -18px rgba(30, 20, 8, 0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* never taller than the screen (400% zoom, landscape phones): the card scrolls instead */
    max-height: calc(100vh - 44px);
    max-height: calc(100dvh - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cc-notice:not(.is-in) .cc-card { opacity: 0; transform: translateY(14px); pointer-events: none; }
.cc-title {
    margin: 0 0 8px;
    font-family: var(--primary-font);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1c1713;
}
.cc-text {
    margin: 0 0 16px;
    font-family: var(--secondary-font);
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4A3A28;
}
.cc-short { display: none; }   /* phones and short screens swap the long wording for this one */
.cc-text a {
    white-space: nowrap;   /* the link moves down whole, never leaves "data" alone on a line */
    color: #6d4f22;
    text-decoration: underline;
    text-decoration-color: rgba(176, 141, 87, 0.85);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.cc-text a:hover,
.cc-text a:focus-visible { color: #1c1713; text-decoration-color: currentColor; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.8px;
    text-indent: 1.8px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.cc-btn-primary {
    border: 0;
    background-color: #D4A24C;
    color: #111;
    box-shadow:
        inset 0 1px 0 rgba(255, 249, 233, 0.7),
        0 1px 2px rgba(74, 49, 12, 0.18),
        0 10px 20px -12px rgba(74, 49, 12, 0.5);
}
.cc-btn-primary:hover,
.cc-btn-primary:focus-visible { background-color: #C8933C; color: #111; }
.cc-btn-ghost {
    border: 1px solid rgba(176, 141, 87, 0.85);
    background-color: transparent;
    color: #4A3A28;
}
.cc-btn-ghost:hover,
.cc-btn-ghost:focus-visible {
    background-color: rgba(176, 141, 87, 0.13);
    border-color: #96713f;
    color: #1c1713;
}
.cc-btn:focus-visible,
.cc-text a:focus-visible { outline: 2px solid #96713f; outline-offset: 3px; }
.cc-btn:focus:not(:focus-visible) { outline: none; }
/* phones (owner, 13 Oct 2026: the sheet covered the lower half of the screen and the banner's BOOK NOW):
   a compact sheet - the short wording, no visible title (it stays the region's name for screen readers),
   the two buttons side by side - about 150px tall instead of 266px */
@media (max-width: 575px) {
    .cc-notice { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .cc-card { padding: 14px 16px 16px; }
    .cc-title { display: none; }
    .cc-text { margin-bottom: 12px; font-size: 0.86rem; line-height: 1.5; }
    .cc-long { display: none; }
    .cc-short { display: inline; }
    .cc-actions .cc-btn { flex: 1 1 0; padding: 0 18px; }
    /* keep the contact buttons reachable while the sheet is open; the dock glides with the sheet */
    html.cc-open .fd-dock { bottom: calc(var(--cc-h, 0px) + 24px); }
    .fd-dock { transition: transform 0.3s ease, opacity 0.3s ease, bottom 0.3s ease; }
    /* a control the keyboard moves to is scrolled clear of the sheet, not under it (WCAG 2.4.11) */
    html.cc-open { scroll-padding-bottom: calc(var(--cc-h, 0px) + 24px); }
}
/* too short for header + lifted dock + sheet: the dock steps aside until a choice is made */
@media (max-width: 575px) and (max-height: 520px) {
    html.cc-open .fd-dock { visibility: hidden; pointer-events: none; }
}
/* short screens wider than a phone (small laptops, tablets on their side: 576px+ wide, up to 640px tall): the card
   keeps its corner but takes the short wording and no visible title, so the banner's BOOK NOW can rise clear of
   it (review 13 Oct: at 1024x600 the 275px card still covered the button at its highest) */
@media (max-height: 640px) and (min-width: 576px) {
    .cc-card { padding: 16px 20px 18px; }
    .cc-title { display: none; }
    .cc-text { margin-bottom: 14px; }
    .cc-long { display: none; }
    .cc-short { display: inline; }
}
/* phones on their side and other short screens (13 Oct 2026: the card filled 3/4 of a 360px-tall screen): one slim
   bar along the bottom, the short wording on the left and the buttons on the right, ending clear of the floating
   dock, which stays in its corner and in sight. From 540px wide only (a narrower window, or a page zoomed to 300% and
   more, keeps the phone sheet), and the buttons drop below the words rather than run off the side. */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 540px) {
    /* under the dock (999), so its hover / focus label can slide out over the bar's right end; the header (1000)
       and its phone menu still paint over the bar */
    .cc-notice { left: 12px; right: 76px; bottom: 12px; width: auto; z-index: 998; }
    .cc-card { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 10px; padding: 10px 12px 10px 16px; }
    .cc-title { display: none; }
    .cc-text { flex: 1 1 240px; margin: 0; font-size: 0.8rem; line-height: 1.45; }
    .cc-long { display: none; }
    .cc-short { display: inline; }
    .cc-actions { flex: none; flex-wrap: nowrap; gap: 8px; margin-left: auto; }
    .cc-actions .cc-btn { flex: none; height: 40px; padding: 0 18px; }
    html.cc-open .fd-dock { bottom: 16px; }
    html.cc-open .fd-dock:not(.fd-dock--away) { visibility: visible; pointer-events: auto; }
    html.cc-open { scroll-padding-bottom: calc(var(--cc-h, 0px) + 24px); }
}
@media (max-height: 500px) and (orientation: landscape) and (min-width: 769px) {
    .cc-notice { left: 96px; right: 88px; }   /* clear of the reservation rail on the left, the dock on the right */
    html.cc-open .fd-dock { bottom: 22px; }
}
/* while the card is up, the banner's BOOK NOW rises clear of it wherever the two would meet on the first screen
   (script.js measures and sets --cc-lift). 'translate' moves the button alone - nothing else shifts - and
   leaves its own hover transform as it is. */
html.cc-open .hero-slide .hero-content .btn-primary { translate: 0 calc(-1 * var(--cc-lift, 0px)); }
@supports not (translate: 0 1px) {   /* older browsers (Safari before 14.1): the same lift as a transform */
    html.cc-open .hero-slide .hero-content .btn-primary { transform: translateY(calc(-1 * var(--cc-lift, 0px))); }
}
@media (prefers-reduced-motion: reduce) {
    .cc-card, .cc-btn, .fd-dock { transition: none; }
}

/* ===== Privacy policy (privacy-policy.php, 2026-09-28) =================================================
   A single reading column on the site's cream paper: Playfair headings, Lato body at 1rem/1.75, gold list
   markers and underlined gold links (as in the FAQ answers). The cookie table turns into labelled rows
   on phones. Section headings clear the sticky header when reached from a #link. */
.pp-section {
    background: #f8f5f0;
    padding: clamp(44px, 7vw, 88px) var(--gut) clamp(56px, 8vw, 100px);
    color: #4A3A28;
}
.pp-inner { width: min(680px, 100%); margin: 0 auto; }
@media (min-width: 1024px) {
    .pp-section .pp-inner p, .pp-section .pp-inner li { font-size: 1.0625rem; }   /* 680px at 17px: ~70 characters a line (the scoped selector outranks the base 1rem rule below) */
}
/* the floating dock would sit over the right edge of the text on phones and tablets; these pages carry
   their own contact details, and the header keeps BOOK NOW */
@media (max-width: 1023px) {
    .pp-body .fd-dock { display: none; }
}
.pp-eyebrow {
    margin: 0 0 12px;
    font-family: var(--secondary-font);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #7f6436;
}
.pp-inner h1 {
    margin: 0;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 2.9rem);
    line-height: 1.15;
    color: #33291c;
}
.pp-updated { margin: 12px 0 0; font-family: var(--secondary-font); font-size: 0.9rem; color: #6a5f52; }
.pp-rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 26px 0 30px;
    background: linear-gradient(90deg, #D4A24C, rgba(212, 162, 76, 0.15));
}
.pp-inner p,
.pp-inner li {
    font-family: var(--secondary-font);
    font-size: 1rem;
    line-height: 1.75;
    color: #4A3A28;
}
.pp-inner p { margin: 0 0 16px; }
.pp-inner h2 {
    margin: 46px 0 14px;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.2vw, 1.55rem);
    line-height: 1.3;
    color: #33291c;
    scroll-margin-top: calc(var(--header-height) + 16px);
}
.pp-inner h3 {
    margin: 26px 0 10px;
    font-family: var(--secondary-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #33291c;
}
.pp-inner ul { margin: 0 0 18px; padding-left: 1.25em; }
.pp-inner li { margin: 0 0 8px; padding-left: 0.2em; }
.pp-inner li::marker { color: #B08D57; }
.pp-inner strong { font-weight: 700; color: #33291c; }
.pp-inner a {
    color: #6d4f22;
    text-decoration: underline;
    text-decoration-color: rgba(176, 141, 87, 0.85);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    overflow-wrap: anywhere;
}
.pp-inner a:hover,
.pp-inner a:focus-visible { color: #1c1713; text-decoration-color: currentColor; }
.pp-inner a:focus-visible { outline: 2px solid #96713f; outline-offset: 2px; border-radius: 2px; }
.pp-table-wrap { margin: 6px 0 18px; }
.pp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--secondary-font);
    font-size: 0.93rem;
    line-height: 1.55;
    color: #4A3A28;
    background: #fffdf9;
    box-shadow: 0 0 0 1px rgba(176, 141, 87, 0.35);
}
.pp-table th,
.pp-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #e8e0d2; }
.pp-table th { font-weight: 700; color: #33291c; background: #f1ebe0; }
.pp-table tr:last-child td { border-bottom: 0; }
.pp-table code {
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    font-size: 0.9em;
    color: #33291c;
    white-space: nowrap;   /* a cookie name never breaks mid-word (the column widens to fit it) */
}
.pp-contact {
    scroll-margin-top: calc(var(--header-height) + 16px);
    margin-top: 48px;
    padding: 26px 28px 20px;
    background: #fffdf9;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(176, 141, 87, 0.4), 0 18px 32px -24px rgba(30, 20, 8, 0.45);
}
.pp-contact h2 { margin: 0 0 16px; }
.pp-contact ul { list-style: none; margin: 0; padding: 0; }
.pp-contact li { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 12px; padding: 0; }
.pp-contact li i { flex: 0 0 18px; margin-top: 0.42em; color: #B08D57; font-size: 0.95rem; text-align: center; }
@media (max-width: 575px) {
    .pp-inner p, .pp-inner li { font-size: 0.97rem; }
    .pp-inner h2 { margin-top: 38px; }
    /* the cookie table becomes labelled rows */
    .pp-table thead { display: none; }
    .pp-table, .pp-table tbody, .pp-table tr, .pp-table td { display: block; width: 100%; }
    .pp-table tr { padding: 12px 14px; border-bottom: 1px solid #e8e0d2; }
    .pp-table tr:last-child { border-bottom: 0; }
    .pp-table td { padding: 3px 0; border: 0; }
    .pp-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        color: #7f6436;
    }
    .pp-contact { padding: 22px 18px 14px; }
}

/* Terms & Conditions (terms-and-conditions.php): the same reading column, but 18 short numbered clauses, so the
   headings are a step smaller and closer together; the lettered sub-clauses carry their own "(a)" labels */
.pp-terms .pp-inner h2 { margin-top: 36px; font-size: clamp(1.15rem, 1.9vw, 1.32rem); }
.pp-terms .pp-rule + h2 { margin-top: 0; }
.pp-inner ul.pp-alpha { list-style: none; padding-left: 0; }
.pp-inner ul.pp-alpha li { padding-left: 2.1em; text-indent: -2.1em; }

/* the consent line under the enquiry form's button (index.php) */
.bk-section .bk-consent {
    margin: 0 0 14px;   /* above the button: read before sending */
    font-family: var(--secondary-font);
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
    color: rgba(51, 41, 28, 0.78);
}
.bk-section .bk-consent a {
    white-space: nowrap;
    color: #6d4f22;
    text-decoration: underline;
    text-decoration-color: rgba(176, 141, 87, 0.85);
    text-underline-offset: 2px;
}
.bk-section .bk-consent a:hover,
.bk-section .bk-consent a:focus-visible { color: #1c1713; text-decoration-color: currentColor; }
.bk-section .bk-consent a:focus-visible { outline: 2px solid #96713f; outline-offset: 2px; border-radius: 2px; }

/* ===== Thank-you page (thank-you.php, 2026-09-28) ================================================
   Where script.js sends the visitor after a successful enquiry. Cream paper, the flute motif, a
   bilingual title in the site's pattern, the booking card's call / WhatsApp pair and two pills.
   The panel fills the viewport under the sticky header so the footer starts below the fold. */
.ty-section {
    display: grid;
    place-items: center;
    min-height: calc(100vh - var(--header-height));
    padding: clamp(48px, 8vw, 96px) var(--gut) clamp(56px, 9vw, 110px);
    background: #f8f5f0;
    color: #33291c;
    text-align: center;
}
.ty-inner { width: min(640px, 100%); }
/* the panel carries the same call / WhatsApp pair at full size and is one screen tall, so the floating
   dock (footer.php) would only sit on top of them here - off on this page at every width */
.ty-body .fd-dock { display: none; }
/* ...except on phones while the cookie sheet is up: the sheet then covers the panel's own pair, so the dock
   comes back, lifted above the sheet by the html.cc-open rule (and still hidden on screens under 520px tall) */
@media (max-width: 575px) {
    html.cc-open .ty-body .fd-dock { display: flex; }
}
.ty-section .ty-motif { margin: 0 auto 10px; }
.ty-eyebrow {
    margin: 0 0 14px;
    font-family: var(--secondary-font);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #7f6436;   /* the site's #8a6d3b is 4.46:1 on this cream; this is 5.1:1 */
}
.ty-title {
    margin: 0;
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: clamp(2rem, 4.6vw, 3rem);
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: #33291c;
}
/* same treatment as h2.bi-title: Tiro for the Devanagari, no synthesis, no tracking, no internal breaks */
.ty-title .bi-title-dev {
    font-family: 'Tiro Devanagari Hindi', var(--primary-font);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.ty-title .bi-title-sep { margin: 0 0.047em 0 0.147em; opacity: 0.6; font-weight: 400; }   /* + the real spaces around it (0.253em each) = the 0.4em / 0.3em gaps of h2.bi-title */
.ty-title .bi-title-lat { white-space: nowrap; }
.ty-hairline {
    display: block;
    width: 64px;
    height: 1px;
    margin: 24px auto 26px;
    background: linear-gradient(90deg, rgba(212, 162, 76, 0.15), #D4A24C, rgba(212, 162, 76, 0.15));
}
.ty-lead {
    margin: 0 auto;
    max-width: 30em;
    font-family: var(--primary-font);
    font-size: clamp(1.2rem, 1.7vw, 1.45rem);
    line-height: 1.4;
    color: #33291c;
}
.ty-text {
    margin: 22px 0 18px;
    font-family: var(--secondary-font);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #5a5248;
}
.ty-reserve-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px clamp(18px, 3vw, 36px);
    margin: 0;
}
.ty-reserve { display: flex; align-items: center; gap: 14px; text-align: left; text-decoration: none; }
.ty-reserve-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(176, 141, 87, 0.6);
    background: #fffdf8;
    box-shadow: 0 6px 16px -10px rgba(51, 41, 28, 0.45);
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.ty-reserve-icon i { font-size: 1rem; color: #8A6D3B; transition: color 0.25s ease; }
.ty-reserve > div span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: rgba(51, 41, 28, 0.68);
}
.ty-reserve > div p {
    display: inline-block;
    margin: 0;
    padding-bottom: 2px;
    font-family: var(--secondary-font);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.6px;
    color: #33291c;
    border-bottom: 1px solid rgba(212, 162, 76, 0.55);
    transition: border-color 0.25s ease, color 0.25s ease;
}
.ty-reserve:hover > div p,
.ty-reserve:focus-visible > div p { color: #8A6D3B; border-bottom-color: #D4A24C; }
.ty-reserve:hover .ty-reserve-icon,
.ty-reserve:focus-visible .ty-reserve-icon { border-color: #D4A24C; background: #D4A24C; }
.ty-reserve:hover .ty-reserve-icon i,
.ty-reserve:focus-visible .ty-reserve-icon i { color: #fff; }
.ty-reserve:focus-visible { outline: 2px solid #96713f; outline-offset: 6px; border-radius: 4px; }   /* same ring as the pills */
.ty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 34px; }
.ty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 30px;
    border-radius: 999px;
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    text-indent: 2px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ty-btn-primary {
    border: 0;
    background-color: #D4A24C;
    color: #111;
    box-shadow:
        inset 0 1px 0 rgba(255, 249, 233, 0.7),
        0 1px 2px rgba(74, 49, 12, 0.18),
        0 10px 20px -12px rgba(74, 49, 12, 0.5);
}
.ty-btn-primary:hover,
.ty-btn-primary:focus-visible { background-color: #C8933C; color: #111; transform: translateY(-2px); }
.ty-btn-ghost { border: 1px solid rgba(176, 141, 87, 0.85); background: transparent; color: #4A3A28; }
.ty-btn-ghost:hover,
.ty-btn-ghost:focus-visible { background-color: rgba(176, 141, 87, 0.13); border-color: #96713f; color: #1c1713; }
.ty-btn:focus-visible { outline: 2px solid #96713f; outline-offset: 3px; }
.ty-btn:focus:not(:focus-visible),
.ty-reserve:focus:not(:focus-visible) { outline: none; }
@media (max-width: 575px) {
    .ty-title .bi-title-dev { display: block; margin-bottom: 0.08em; }
    .ty-title .bi-title-sep { display: none; }
    .ty-actions .ty-btn { flex: 1 1 100%; max-width: 330px; }
}
@media (prefers-reduced-motion: reduce) {
    .ty-btn, .ty-reserve-icon, .ty-reserve-icon i, .ty-reserve > div p { transition: none; }
    .ty-btn-primary:hover, .ty-btn-primary:focus-visible { transform: none; }
}

/* ===== the amenity cards inside the highlights band ========================================
   Four .slide cards on the band's tan ground; they keep their white ground and dark type and read
   as prints laid on the band. `.awards-section p` restyles every paragraph in the band for its own
   cards (0.9rem / 1.4 / 1.5rem, cream): the caption size comes back from the .hl-amenities block
   below, the ink from the rule here. (The copy column and slider this block once carried were
   retired 2026-09-25.)
   ========================================================================================= */
.hl-section .hl-experiences .slide h3 { color: var(--text-dark); }
.hl-section .hl-experiences .slide p { color: #555; }
.hl-section .hl-experiences .slide { box-shadow: 0 18px 38px -26px rgba(38, 24, 8, 0.75); }

/* ---- the amenities slider: eleven cards, four per view, one card per step ----
   Same outer width as the block had (the wrap max inside the gutters) and the same mechanics as
   BRAJ DARSHAN: the cards carry 10px side margins and the track is pulled out by the same amount,
   so the first and last card sit on the gutter line and script.js can step by one card's
   outerWidth(true). Four per view above 1023px, two on tablets, one below 576px - script.js reads
   the same counts from the block's data attributes. Every card is as tall as the tallest, from
   the flex track's default stretch. */
.hl-section .hl-amenities {
    width: min(var(--wrap-max), 100% - var(--gut) * 2);
    margin: 54px auto 0;
    padding: 6px 0 30px;
}
.hl-section .hl-amenities .slider-track { margin: 0 -10px; }
/* the wrapper clips at its padding edge, and the cards' drop shadow falls below them: give it
   36px of padding to paint in and take the same back as margin, so the dots do not move */
.hl-section .hl-amenities .slider-wrapper { padding-bottom: 36px; margin-bottom: -36px; }
.hl-section .hl-amenities .slide {
    flex: 0 0 calc(25% - 20px);
    margin: 0 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
}
.hl-section .hl-amenities .slide h3 {
    font-size: 1.3rem;
    line-height: 1.25;
    margin: 14px 0 6px;
}
.hl-section .hl-amenities .slide p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}
/* the dots are this block's only control, so they have to clear the tan band (0.82 alpha),
   and the current one has to stand apart from the rest: cream vs a cream-on-cream tint measured
   1.1:1, so the active dot takes the band's own deep brown (about 8:1 against its neighbours) */
.hl-section .hl-amenities .slider-dots { margin-top: 18px; }
.hl-section .hl-amenities .slider-dots span { background-color: rgba(255, 252, 246, 0.82); }
.hl-section .hl-amenities .slider-dots span.active { background-color: #5b3a16; }
@media (max-width: 1023px) {
    .hl-section .hl-amenities { margin-top: 40px; }
    .hl-section .hl-amenities .slide { flex-basis: calc(50% - 20px); }
}
@media (max-width: 575px) {
    .hl-section .hl-amenities { margin-top: 32px; padding-bottom: 20px; }
    .hl-section .hl-amenities .slide { flex-basis: calc(100% - 20px); }
    /* eleven dots at 32px each wrapped onto two rows below 385px; 28px keeps them on one row down
       to 360px while the 24px hit box stays as it is */
    .hl-section .hl-amenities .slider-dots span { margin: 4px 2px; }
}
/* BRAJ DARSHAN's 21 dots at 32px wrapped between 600 and 730px; 26px holds one row down to 600
   (below that they take two rows, which a 354px phone cannot avoid) */
@media (max-width: 767px) {
    .experiences .slider-dots span { margin: 4px 1px; }
}
@media (max-width: 359px) {
    .experiences .slider-dots span { margin: 4px 0; }   /* 21 x 24px = two rows on a 320px phone, not three */
}
@media (max-width: 359px) {
    /* a 320px phone has a 284px block: the hit boxes touch (11 x 24px = 264px) and still fit */
    .hl-section .hl-amenities .slider-dots span { margin: 4px 0; }
}

/* card titles and FAQ questions: balance the lines so no title ends on a one-word line
   (audit 2026-09-25: 'Wide Walkways and / Driveways', 'Vrindavan Chandrodaya / Mandir' and others) */
.hl-section .hl-amenities .slide h3,
.experiences .slide h3,
.am-section .am-title,
.testimonials-section .tm-t,
.faq-section .faq-q { text-wrap: balance; }

/* ===== the Experiences block, retitled BRAJ DARSHAN ======================================
   The standalone BRAJ DARSHAN section was folded in here, so the copy column leads with the flute
   and wears that section's letterspaced Playfair caps instead of the old "Experiences" heading.
   ========================================================================================= */
.experiences .experiences-content-column .section-motif {
    margin: 0 0 8px -4px;
}
.experiences .exp-title {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: clamp(1.7rem, 2.6vw, 2.5rem);
    line-height: 1.18;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    /* NO text-indent here. Matching the indent to the letter-spacing optically
       re-centres a CENTRED tracked-out label; this heading is left-aligned at
       every width, so it only pushed the title 3.3-5.6px right of the tagline,
       the body copy and the phone line above and below it.
       --exp-outdent is the opposite, optical correction, set PER HEADING below
       because it is the left side bearing of that heading's first glyph: with
       the box flush on the column line the INK still starts that far to the
       right of the tagline's and the paragraph's first letters. Pulling the box
       out by the bearing puts the ink on the line; em, so it follows clamp(). */
    color: #2f2b26;
    margin: 0 0 14px calc(-1 * var(--exp-outdent, 0em));
}
/* Playfair's capital B: 0.04em (1.5px at 37px, 1.1px at 27px) */
#experiences .exp-title { --exp-outdent: 0.04em; }
@media (max-width: 900px) {
    .experiences .exp-title { letter-spacing: 0.12em; }
}

/* ===== "For information" contact block in the BRAJ DARSHAN copy column ===================
   Replaces the plain phone-emoji line. Label with a leading rule, then two links that sit side
   by side when the column is wide enough and stack when it is not. Each link is a tinted disc
   icon beside a stacked kicker + number; the number carries a hairline that colours on hover,
   the same language as the booking section's call/WhatsApp blocks. Call = the site's gold;
   WhatsApp = the header's mint disc and WhatsApp green, so the two are told apart at a glance.
   The two numbers differ on purpose (call vs WhatsApp) - do not unify them.
   ======================================================================================== */
.experiences .exp-contact { margin-top: 26px; }
.experiences .exp-contact-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--secondary-font);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #8a6d3b;
}
.experiences .exp-contact-rule {
    display: block;
    width: 22px;
    height: 1px;
    background: #b08d57;
    opacity: 0.8;
}
.experiences .exp-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
}
.experiences .exp-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
}
.experiences .exp-contact-disc {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #e6dcc8;
    background: #f8f1e3;
    color: #8a6d3b;
    font-size: 0.95rem;
    line-height: 1;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.experiences .exp-contact-wa .exp-contact-disc {
    border-color: #cfe7d8;
    background: #eaf6ee;
    color: #128c7e;
    font-size: 1.2rem;
}
.experiences .exp-contact-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.experiences .exp-contact-kicker {
    font-family: var(--secondary-font);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    color: #8a6d3b;
}
.experiences .exp-contact-num {
    font-family: var(--secondary-font);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
    color: #2f2b26;
    border-bottom: 1px solid #e6dcc8;
    padding-bottom: 2px;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.experiences .exp-contact-call:hover .exp-contact-disc,
.experiences .exp-contact-call:focus-visible .exp-contact-disc {
    background: #b08d57;
    border-color: #b08d57;
    color: #fff;
    transform: translateY(-1px);
}
.experiences .exp-contact-wa:hover .exp-contact-disc,
.experiences .exp-contact-wa:focus-visible .exp-contact-disc {
    background: #128c7e;
    border-color: #128c7e;
    color: #fff;
    transform: translateY(-1px);
}
.experiences .exp-contact-link:hover .exp-contact-num,
.experiences .exp-contact-link:focus-visible .exp-contact-num { color: #8a6d3b; border-bottom-color: #b08d57; }
.experiences .exp-contact-link:focus-visible { outline: 2px solid #96713f; outline-offset: 4px; }
.experiences .exp-contact-link:focus:not(:focus-visible) { outline: none; }
@media (max-width: 900px) {
    .experiences .exp-contact { margin-top: 22px; }
}

/* ===== FAQ ==================================================================================
   Shaped after the FAQ on jagritistays.com: a rule-flanked kicker, a two-tone headline, a centred
   lead, then a plain hairline accordion with no boxes. Native <details>, so it works with no
   JavaScript and is keyboard-operable.
   ============================================================================================ */
.faq-section {
    --faq-gold: #b08d57;
    --faq-gold-ink: #8a6d3b;
    --faq-ink: #2f2b26;
    --faq-body: #5a5248;
    --faq-line: #e6dcc8;
    background-color: #fff;
}
.faq-section.section-padding { padding: 58px 0 64px; }

.faq-section .faq-head { text-align: center; margin-bottom: 34px; }
.faq-section .faq-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 12px;
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    color: var(--faq-gold-ink);
}
.faq-section .faq-kicker-rule {
    display: block;
    width: 34px;
    height: 1px;
    background: var(--faq-gold);
    opacity: 0.6;
}
.faq-section .faq-title {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1.16;
    color: var(--faq-ink);
    text-wrap: balance;
    margin: 0;
}
.faq-section .faq-title em {
    font-style: italic;
    color: var(--faq-gold-ink);
}
.faq-section .faq-lead {
    /* Uncapped, by the owner's decision. Fits one 1296px line at >=1440.
       text-wrap:pretty stays: unlike balance it does not shorten lines. */
    max-width: none;
    margin: 16px auto 0;
    font-family: var(--secondary-font);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--faq-body);
    text-wrap: pretty;
}

.faq-section .faq-list {
    max-width: 58rem;
    margin: 0 auto;
    border-top: 1px solid var(--faq-line);
}
.faq-section .faq-item { border-bottom: 1px solid var(--faq-line); }

.faq-section .faq-q {
    position: relative;
    display: block;
    list-style: none;
    padding: 20px 52px 20px 0;
    font-family: var(--primary-font);
    font-size: 1.16rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--faq-ink);
    cursor: pointer;
    transition: color 0.25s ease;
}
.faq-section .faq-q::-webkit-details-marker { display: none; }
.faq-section .faq-q:hover,
.faq-section .faq-item[open] .faq-q { color: var(--faq-gold-ink); }
.faq-section .faq-q:focus-visible {
    outline: 2px solid var(--faq-gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* the sign: two gold strokes, the upright one folding away when the answer opens */
.faq-section .faq-q::before,
.faq-section .faq-q::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 13px;
    height: 1px;
    background: var(--faq-gold);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-section .faq-q::after { transform: rotate(90deg); }
.faq-section .faq-item[open] .faq-q::after { transform: rotate(0deg); opacity: 0; }

.faq-section .faq-a {
    padding: 0 52px 22px 0;
}
.faq-section .faq-a p,
.faq-section .faq-a ul {
    margin: 0;
    font-family: var(--secondary-font);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--faq-body);
    max-width: 46rem;
}
/* the owner's answers (2026-09-25) run to two paragraphs, carry a bulleted list of places, and
   bold a few phrases: paragraphs breathe, bullets take the section's gold, bold takes the ink */
.faq-section .faq-a p + p,
.faq-section .faq-a ul + p,
.faq-section .faq-a p + ul { margin-top: 10px; }
.faq-section .faq-a ul { padding-left: 1.3em; }
.faq-section .faq-a li { margin: 2px 0; padding-left: 0.2em; }
.faq-section .faq-a li::marker { color: var(--faq-gold); }
.faq-section .faq-a strong { font-weight: 700; color: var(--faq-ink); }
/* links inside answers (the 2026-09-28 document links Krishna Bhumi's site and the WhatsApp
   number): gold ink with a soft gold underline that firms up on hover; a bold phrase that is
   also a link keeps the link colour */
.faq-section .faq-a a {
    color: var(--faq-gold-ink);
    text-decoration: underline;
    text-decoration-color: rgba(176, 141, 87, 0.45);
    text-underline-offset: 3px;
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.faq-section .faq-a a:hover,
.faq-section .faq-a a:focus-visible { color: var(--faq-ink); text-decoration-color: var(--faq-gold); }
.faq-section .faq-a a:focus-visible { outline: 2px solid var(--faq-gold); outline-offset: 3px; border-radius: 2px; }
.faq-section .faq-a a strong { color: inherit; }

@media (max-width: 767px) {
    .faq-section.section-padding { padding: 46px 0 50px; }
    .faq-section .faq-head { margin-bottom: 26px; }
    .faq-section .faq-kicker { font-size: 0.66rem; gap: 10px; }
    .faq-section .faq-kicker-rule { width: 24px; }
    .faq-section .faq-lead { font-size: 0.97rem; }
    .faq-section .faq-q { padding: 17px 40px 17px 0; font-size: 1.05rem; }
    .faq-section .faq-a { padding: 0 8px 18px 0; }
    .faq-section .faq-a p,
    .faq-section .faq-a ul { font-size: 0.97rem; line-height: 1.72; }
}

/* ===== Guest voices (video reviews) ==========================================================
   Styled after the reviews rail on jagritistays.com, in this site's palette and type: a sand band
   with 28px corners inset 12px from the page edge; a kicker + two-tone title + round arrows; a snap
   rail whose padding is the page gutter so the first card sits on the column line and the last
   ones run out to the band's edge; paper cards with 20px corners that lift on hover; a 16:9 still
   with a cream play disc on top, the verbatim quote in Playfair beneath, a small grey cite line.
   The whole card is the link (the <a>'s ::after is stretched over the card). Posters are local;
   the YouTube iframe is created by Fancybox 3.5.7 only after a click (youtube-nocookie.com).
   The five vertical videos use the cream pillarbox posters (<id>-cream.webp).
   ============================================================================================ */
.testimonials-section {
    --tm-gold: #b08d57;
    --tm-gold-ink: #8a6d3b;
    --tm-ink: #2f2b26;
    --tm-body: #5a5248;
    --tm-mute: #857c70;
    --tm-line: #e6dcc8;
    --tm-sand: var(--bg-light);   /* the Gita verse stripes' beige, by the owner's choice */
    --tm-paper: #fffdf9;
    --tm-ease: cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    background-color: var(--tm-sand);
    /* full-bleed like every other stripe on the page (the reference insets its band with rounded
       corners; the owner asked for edge to edge here) */
    padding: clamp(64px, 8vw, 120px) 0;
    overflow: hidden;
}
/* the same barely-there gold wash the verse stripes carry, so the two bands match exactly */
.testimonials-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(176, 141, 87, 0.10), rgba(176, 141, 87, 0) 62%),
        radial-gradient(90% 70% at 50% 115%, rgba(176, 141, 87, 0.07), rgba(176, 141, 87, 0) 60%);
    pointer-events: none;
}
.testimonials-section .tm-head,
.testimonials-section .tm-rail { position: relative; z-index: 1; }

/* ---- head ---- */
.testimonials-section .tm-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.testimonials-section .tm-head > div { min-width: 0; }
.testimonials-section .tm-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tm-gold-ink);
}
.testimonials-section .tm-kicker-rule {
    display: block;
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.testimonials-section .tm-title {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1.14;
    color: var(--tm-ink);
    text-wrap: balance;
    margin: 0;
}
.testimonials-section .tm-title em { font-style: italic; color: var(--tm-gold-ink); }

.testimonials-section .tm-nav { display: flex; gap: 8px; flex-shrink: 0; }
.testimonials-section .tm-nav button {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--tm-line);
    border-radius: 50%;
    background: var(--tm-paper);
    color: var(--tm-ink);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.testimonials-section .tm-nav button:hover,
.testimonials-section .tm-nav button:focus-visible {
    background: var(--tm-ink);
    border-color: var(--tm-ink);
    color: #fff;
}
.testimonials-section .tm-nav button:focus-visible { outline: 2px solid var(--tm-gold-ink); outline-offset: 3px; }
.testimonials-section .tm-nav button:focus:not(:focus-visible) { outline: none; }
/* set by script.js at either end of the rail */
.testimonials-section .tm-nav button[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.testimonials-section .tm-nav button[aria-disabled="true"]:hover {
    background: var(--tm-paper);
    border-color: var(--tm-line);
    color: var(--tm-ink);
}

/* ---- rail: padded by the page gutter, so it bleeds to the band edge like the reference ---- */
.testimonials-section .tm-rail {
    --rail-in: max(var(--gut), (100% - var(--wrap-max)) / 2);
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-top: 36px;
    padding: 8px var(--rail-in) 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rail-in);
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.testimonials-section .tm-rail::-webkit-scrollbar { display: none; }

/* ---- card ---- */
.testimonials-section .tm-card {
    position: relative;
    flex: 0 0 clamp(290px, 30vw, 420px);
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background: var(--tm-paper);
    border: 1px solid var(--tm-line);
    border-radius: 20px;
    overflow: hidden;
    /* a resting hairline + soft shadow: on the pale beige the paper card needs an edge */
    box-shadow: 0 18px 38px -30px rgba(40, 30, 16, 0.35);
    transition: transform 0.6s var(--tm-ease), box-shadow 0.6s var(--tm-ease);
}
.testimonials-section .tm-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 70px -40px rgba(40, 30, 16, 0.5);
}
.testimonials-section .tm-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
/* the whole card is the click target */
.testimonials-section .tm-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
}
.testimonials-section .tm-link:focus { outline: none; }
.testimonials-section .tm-link:focus-visible::after { outline: 2px solid var(--tm-gold-ink); outline-offset: -3px; }
.testimonials-section .tm-th {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #efe7da;
}
.testimonials-section .tm-th img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 1.2s var(--tm-ease);
}
.testimonials-section .tm-card:hover .tm-th img { transform: scale(1.05); }
.testimonials-section .tm-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.testimonials-section .tm-play i {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding-left: 4px;             /* optical centre for the triangle */
    background: rgba(255, 251, 244, 0.92);
    color: var(--tm-ink);
    font-size: 0.95rem;
    box-shadow: 0 8px 24px -12px rgba(30, 20, 5, 0.6);
    transition: transform 0.5s var(--tm-ease);
}
.testimonials-section .tm-card:hover .tm-play i { transform: scale(1.08); }

.testimonials-section .tm-q {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.4rem 1.5rem 1.6rem;
}
/* the card line is the channel's own video title (as on the reference), not a quotation */
.testimonials-section .tm-q .tm-t {
    margin: 0;
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 1.28rem;
    line-height: 1.38;
    color: var(--tm-ink);
    text-wrap: pretty;
}
.testimonials-section .tm-q cite {
    margin-top: auto;
    font-family: var(--secondary-font);
    font-style: normal;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--tm-mute);
}

@media (prefers-reduced-motion: reduce) {
    .testimonials-section .tm-rail { scroll-behavior: auto; }
    .testimonials-section .tm-card,
    .testimonials-section .tm-th img,
    .testimonials-section .tm-play i,
    .testimonials-section .tm-nav button { transition: none; }
    .testimonials-section .tm-card:hover { transform: none; }
    .testimonials-section .tm-card:hover .tm-th img { transform: none; }
}

@media (max-width: 767px) {
    .testimonials-section { padding: 52px 0 56px; }
    .testimonials-section .tm-head { flex-direction: column; align-items: flex-start; gap: 18px; }
    .testimonials-section .tm-rail { margin-top: 28px; }
    .testimonials-section .tm-q { padding: 1.2rem 1.25rem 1.4rem; }
    .testimonials-section .tm-q .tm-t { font-size: 1.16rem; }
}