/* ==========================================================================
   THE BANSARA ROYALE  —  layout.css
   --------------------------------------------------------------------------
   Page furniture: header, mobile drawer, sticky rails, hero, page banners,
   page-specific section layouts and the footer. Load AFTER components.css.

   Table of contents
   -----------------
   1.  Scroll progress bar
   2.  Header + primary navigation
   3.  Mobile drawer + hamburger
   4.  Sticky side rails (social + Book Now)
   5.  Homepage hero (background video)
   6.  Interior page banner (Ken Burns)
   7.  Experience strip
   8.  Rooms section
   9.  Amenities section
   10. Reviews section
   11. Gallery section
   12. About page blocks
   13. Dining page blocks (online menu)
   14. Contact page blocks
   15. Legal / policy page
   16. Call-to-action band
   17. Footer
   18. Back-to-top button
   ========================================================================== */


/* ==========================================================================
   1. SCROLL PROGRESS BAR
   ========================================================================== */

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-header) + 1);
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--c-copper), var(--c-copper-300));
    pointer-events: none;
}


/* ==========================================================================
   2. HEADER + PRIMARY NAVIGATION
   ========================================================================== */

.header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: var(--z-header);
    transition:
        background-color 420ms var(--ease-out),
        box-shadow       420ms var(--ease-out),
        transform        460ms var(--ease-out),
        border-color     420ms var(--ease-out);
    border-bottom: 1px solid transparent;
}

/* Transparent over the hero, solid once the page scrolls. */
.header--transparent {
    background-color: transparent;
}

.header.is-stuck {
    background-color: rgba(3, 28, 42, 0.94);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: rgba(244, 239, 231, 0.1);
    box-shadow: 0 10px 40px -22px rgba(0, 0, 0, 0.8);
}

/* Hides the header while scrolling down, reveals it on scroll up. */
.header.is-hidden {
    transform: translateY(-100%);
}

/* Interior pages start with a solid header behind the banner text. */
.header--solid {
    background-color: rgba(3, 28, 42, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    height: var(--header-h);
    transition: height 420ms var(--ease-out);
}

.header.is-stuck .header__inner {
    height: 68px;
}

/* --- Logo ---------------------------------------------------------------- */

.logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    transition: opacity var(--t-base) var(--ease-out);
}

.logo:hover {
    opacity: 0.82;
}

.logo img {
    height: clamp(34px, 2.1rem + 1.1vw, 50px);
    width: auto;
    transition: height 420ms var(--ease-out);
}

.header.is-stuck .logo img {
    height: clamp(30px, 1.9rem + 0.8vw, 42px);
}

/* --- Desktop navigation --------------------------------------------------- */

.nav {
    display: none;
}

@media (min-width: 1100px) {
    .nav {
        display: flex;
        align-items: center;
        gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.4rem);
    }
}

.nav__link {
    position: relative;
    padding-block: 0.45rem;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-on-dark);
    white-space: nowrap;
    transition: color var(--t-base) var(--ease-out);
}

/* Underline that grows outward from the centre. */
.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--c-copper);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 420ms var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
    color: var(--c-copper-300);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
    transform: scaleX(1);
}

/* --- Header actions -------------------------------------------------------- */

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: none;
}

/* "Call Now" — hidden below 640px where the sticky mobile bar takes over. */
.header__call {
    display: none;
    align-items: center;
    gap: 0.6em;
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    color: var(--c-on-dark);
    transition: color var(--t-base) var(--ease-out);
}

@media (min-width: 640px) {
    .header__call { display: inline-flex; }
}

.header__call:hover {
    color: var(--c-copper-300);
}

.header__call .ico {
    color: var(--c-copper);
}

/* Pulsing ring behind the phone icon to draw the eye. */
.header__call-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid rgba(244, 239, 231, 0.2);
    border-radius: 50%;
}

.header__call-icon::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--c-copper);
    border-radius: 50%;
    animation: call-pulse 2.6s var(--ease-out) infinite;
}

@keyframes call-pulse {
    0%   { transform: scale(1);    opacity: 0.75; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

.header__book {
    display: none;
}

@media (min-width: 780px) {
    .header__book { display: inline-flex; }
}


/* ==========================================================================
   3. MOBILE DRAWER + HAMBURGER
   ========================================================================== */

.burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    position: relative;
    z-index: calc(var(--z-drawer) + 1);
}

@media (min-width: 1100px) {
    .burger { display: none; }
}

.burger__box {
    position: relative;
    width: 26px;
    height: 14px;
}

.burger__bar {
    position: absolute;
    left: 0;
    height: 1.5px;
    background-color: var(--c-on-dark);
    border-radius: 2px;
    transition:
        transform 460ms var(--ease-spring),
        width     360ms var(--ease-out),
        opacity   200ms linear,
        top       360ms var(--ease-out),
        background-color var(--t-base) var(--ease-out);
}

/* Staggered widths give the closed state a deliberate, designed look. */
.burger__bar:nth-child(1) { top: 0;    width: 26px; }
.burger__bar:nth-child(2) { top: 6px;  width: 18px; }
.burger__bar:nth-child(3) { top: 12px; width: 26px; }

.burger:hover .burger__bar:nth-child(2) {
    width: 26px;
}

/* Open state: outer bars cross into an X, middle bar fades away. */
.burger[aria-expanded="true"] .burger__bar:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-12px);
}

.burger[aria-expanded="true"] .burger__bar:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

/* --- Drawer panel ---------------------------------------------------------- */

.drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    background-color: var(--c-navy);
    /* Circular clip that expands from the burger button. */
    clip-path: circle(0% at calc(100% - 42px) 42px);
    transition: clip-path 780ms var(--ease-in-out);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.drawer.is-open {
    clip-path: circle(150% at calc(100% - 42px) 42px);
    visibility: visible;
}

.drawer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
    min-height: 100%;
    padding: calc(var(--header-h) + 2rem) var(--gutter) var(--sp-8);
}

.drawer__nav {
    display: flex;
    flex-direction: column;
}

.drawer__link {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    padding-block: clamp(0.7rem, 0.4rem + 1.2vw, 1.1rem);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.6rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--c-on-dark);
    border-bottom: 1px solid rgba(244, 239, 231, 0.1);
    /* Each link is offset then animated in with a per-item delay. */
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity   520ms var(--ease-out),
        transform 620ms var(--ease-out),
        color     var(--t-base) var(--ease-out);
}

.drawer.is-open .drawer__link {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(180ms + var(--i, 0) * 70ms);
}

.drawer__link:hover,
.drawer__link[aria-current="page"] {
    color: var(--c-copper);
}

.drawer__link .index-num {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Footer block inside the drawer: contact details + social. */
.drawer__foot {
    margin-top: auto;
    display: grid;
    gap: var(--sp-4);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 520ms var(--ease-out) 620ms,
                transform 620ms var(--ease-out) 620ms;
}

.drawer.is-open .drawer__foot {
    opacity: 1;
    transform: translateY(0);
}

.drawer__contact {
    display: grid;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-on-dark-muted);
}

.drawer__contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    transition: color var(--t-base) var(--ease-out);
}

.drawer__contact a:hover {
    color: var(--c-copper);
}

.drawer__contact .ico {
    color: var(--c-copper);
}


/* ==========================================================================
   4. STICKY SIDE RAILS
   ========================================================================== */

/* Vertical social rail pinned to the left edge on large screens. */
.social-rail {
    position: fixed;
    left: 22px;
    bottom: 26px;
    z-index: var(--z-sticky);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}

@media (min-width: 1280px) {
    .social-rail { display: flex; }
}

.social-rail::after {
    content: "";
    width: 1px;
    height: 72px;
    margin-top: var(--sp-2);
    background: linear-gradient(to bottom, var(--c-copper), transparent);
}

.social-rail__link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--c-on-dark);
    background-color: rgba(3, 28, 42, 0.72);
    border: 1px solid rgba(244, 239, 231, 0.18);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    transition:
        background-color var(--t-base) var(--ease-out),
        border-color     var(--t-base) var(--ease-out),
        transform        var(--t-base) var(--ease-spring),
        color            var(--t-base) var(--ease-out);
}

.social-rail__link:hover {
    background-color: var(--c-copper);
    border-color: var(--c-copper);
    color: #FFFFFF;
    transform: translateY(-3px) scale(1.06);
}

/* Vertical "Book Now" tab pinned to the right edge on large screens. */
.book-tab {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: var(--z-sticky);
    display: none;
    align-items: center;
    gap: 0.7em;
    padding: 1.3rem 0.85rem;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: var(--c-copper);
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    box-shadow: -6px 0 24px -10px rgba(3, 28, 42, 0.7);
    transition: background-color var(--t-base) var(--ease-out),
                padding-right    var(--t-base) var(--ease-out);
}

@media (min-width: 1024px) {
    .book-tab { display: flex; }
}

.book-tab:hover {
    background-color: var(--c-navy);
    padding-right: 1.15rem;
}

.book-tab .ico {
    transform: rotate(90deg);
}

/* --- Mobile sticky action bar --------------------------------------------- */

.mobile-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgba(3, 28, 42, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(244, 239, 231, 0.12);
    /* Keeps the bar clear of the iOS home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
    transition: transform 460ms var(--ease-out);
}

@media (min-width: 1024px) {
    .mobile-bar { display: none; }
}

.mobile-bar.is-visible {
    transform: translateY(0);
}

.mobile-bar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: 1.05rem 0.75rem;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-on-dark);
    transition: background-color var(--t-base) var(--ease-out);
}

.mobile-bar__btn + .mobile-bar__btn {
    border-left: 1px solid rgba(244, 239, 231, 0.12);
}

.mobile-bar__btn--accent {
    background-color: var(--c-copper);
    color: #FFFFFF;
}

.mobile-bar__btn:active {
    background-color: rgba(255, 255, 255, 0.08);
}

.mobile-bar__btn--accent:active {
    background-color: var(--c-copper-600);
}

/* Adds bottom padding to the page so the fixed bar never covers content. */
@media (max-width: 1023px) {
    .site-footer {
        padding-bottom: calc(var(--sp-8) + 68px);
    }
}


/* ==========================================================================
   5. HOMEPAGE HERO
   ========================================================================== */

.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 100svh;          /* svh avoids the mobile URL-bar jump */
    min-height: 100vh;           /* fallback for browsers without svh   */
    padding-top: var(--header-h);
    padding-bottom: clamp(3.5rem, 2rem + 6vw, 7rem);
    overflow: hidden;
    background-color: var(--c-navy);
    color: var(--c-on-dark);
    isolation: isolate;
}

@supports (min-height: 100svh) {
    .hero { min-height: 100svh; }
}

/* --- Video / fallback layer ------------------------------------------------ */

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background-color: var(--c-navy);
}

/* The still image behind the video. Always present, so there is never a
   flash of empty colour while the YouTube iframe boots. */
.hero__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: hero-drift 22s var(--ease-in-out) infinite alternate;
}

@keyframes hero-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(-1.5%, -1%, 0); }
}

/* The YouTube iframe is sized to cover the viewport while preserving its
   16:9 ratio — the standard "video background" trick. Whichever of width
   or height is the binding constraint, the other overflows and is clipped. */
.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;             /* 100vw at 16:9 */
    min-height: 100%;
    min-width: 177.78vh;         /* 100vh at 16:9 */
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1200ms var(--ease-out);
}

.hero__video.is-ready {
    opacity: 1;
}

/* Layered scrim: darkens the bottom for text, plus a light vignette. */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(2, 20, 30, 0.92) 0%,
            rgba(2, 20, 30, 0.55) 34%,
            rgba(2, 20, 30, 0.22) 62%,
            rgba(2, 20, 30, 0.45) 100%),
        radial-gradient(120% 90% at 50% 40%,
            transparent 40%,
            rgba(2, 20, 30, 0.55) 100%);
}

/* --- Hero content ---------------------------------------------------------- */

.hero__content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--sp-5);
    max-width: 44ch;
}

.hero__title {
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: 1.06;
    color: #FFFFFF;
}

.hero__text {
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
    font-weight: 300;
    color: rgba(244, 239, 231, 0.88);
    max-width: 46ch;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

/* Rating strip beneath the hero copy. */
.hero__rating {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    color: rgba(244, 239, 231, 0.7);
}

.hero__rating .review__stars {
    color: var(--c-copper);
}

/* --- Scroll cue ------------------------------------------------------------ */

.hero__cue {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 2vw, 2rem);
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    transform: translateX(-50%);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: rgba(244, 239, 231, 0.6);
}

@media (min-width: 768px) {
    .hero__cue { display: flex; }
}

.hero__cue-line {
    width: 1px;
    height: 54px;
    background: rgba(244, 239, 231, 0.25);
    overflow: hidden;
    position: relative;
}

/* A short copper segment travels down the line on a loop. */
.hero__cue-line::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -54px;
    height: 54px;
    background: linear-gradient(to bottom, transparent, var(--c-copper));
    animation: cue-travel 2.2s var(--ease-in-out) infinite;
}

@keyframes cue-travel {
    0%   { transform: translateY(0); }
    100% { transform: translateY(108px); }
}

/* Mute / unmute toggle for the background video. */
.hero__sound {
    position: absolute;
    right: var(--gutter);
    bottom: clamp(1.5rem, 2vw, 2.5rem);
    z-index: 2;
    color: rgba(244, 239, 231, 0.85);
    border-color: rgba(244, 239, 231, 0.25);
    background: rgba(2, 20, 30, 0.45);
    backdrop-filter: blur(6px);
}


/* ==========================================================================
   6. INTERIOR PAGE BANNER
   ========================================================================== */

.banner {
    position: relative;
    display: grid;
    align-items: center;
    min-height: clamp(340px, 46vw, 560px);
    padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 4rem));
    padding-bottom: clamp(2.5rem, 4vw, 4.5rem);
    overflow: hidden;
    background-color: var(--c-navy);
    color: var(--c-on-dark);
    isolation: isolate;
}

.banner .kenburns {
    z-index: -2;
}

.banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top,
            rgba(2, 20, 30, 0.9) 0%,
            rgba(2, 20, 30, 0.6) 45%,
            rgba(2, 20, 30, 0.72) 100%);
}

.banner__content {
    position: relative;
    display: grid;
    gap: var(--sp-4);
    max-width: 56ch;
}

.banner__title {
    font-size: var(--fs-h1);
    font-weight: 400;
    color: #FFFFFF;
}

.banner__text {
    font-size: var(--fs-lead);
    font-weight: 300;
    line-height: var(--lh-loose);
    color: rgba(244, 239, 231, 0.85);
    max-width: 52ch;
}

/* Breadcrumb trail. */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 239, 231, 0.6);
}

.crumbs a {
    transition: color var(--t-base) var(--ease-out);
}

.crumbs a:hover {
    color: var(--c-copper-300);
}

.crumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 0.6em;
    color: var(--c-copper);
    opacity: 0.6;
}

.crumbs [aria-current="page"] {
    color: var(--c-copper-300);
}


/* ==========================================================================
   7. EXPERIENCE STRIP
   ========================================================================== */

.experience-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .experience-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Offsets the middle card downward to break the flat grid line. */
    .experience-grid > :nth-child(2) {
        transform: translateY(clamp(1rem, 3vw, 3rem));
    }
}


/* ==========================================================================
   8. ROOMS SECTION
   ========================================================================== */

.rooms-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* --- Expanded room row (Accommodation page) -------------------------------- */

.room-row {
    display: grid;
    gap: clamp(1.75rem, 1rem + 3.5vw, 4rem);
    align-items: center;
    padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
    border-bottom: 1px solid var(--rule);
}

.room-row:last-child {
    border-bottom: 0;
}

@media (min-width: 940px) {

    .room-row {
        grid-template-columns: 1.05fr 0.95fr;
    }

    /* Alternate the photo between left and right down the page. */
    .room-row:nth-child(even) .room-row__media {
        order: 2;
    }
}

.room-row__media {
    position: relative;
}

.room-row__body {
    display: grid;
    gap: var(--sp-5);
}

.room-row__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) 0;
    border-block: 1px solid var(--rule);
}

.rate-plan {
    display: grid;
    gap: 0.15rem;
}

.rate-plan__name {
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-copper);
}


/* ==========================================================================
   9. AMENITIES SECTION
   ========================================================================== */

.amenities-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

@media (min-width: 1024px) {
    .amenities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small stat block used beside the amenities on the About page. */
.stats {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.stat {
    display: grid;
    gap: 0.35rem;
    padding-left: var(--sp-4);
    border-left: 1px solid var(--c-copper);
}

.stat__value {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
    line-height: 1;
    color: var(--fg);
}

.stat__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-muted);
}


/* ==========================================================================
   10. REVIEWS SECTION
   ========================================================================== */

.reviews-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* Placeholder frame that marks where the Trustindex shortcode is injected.
   Delete the dashed frame once the real widget is in place. */
.shortcode-slot {
    display: grid;
    place-items: center;
    gap: var(--sp-3);
    padding: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
    text-align: center;
    border: 1px dashed color-mix(in srgb, var(--c-copper) 45%, transparent);
    border-radius: var(--r-md);
    background-color: color-mix(in srgb, var(--c-copper) 5%, transparent);
}

.shortcode-slot__code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    color: var(--c-copper);
}


/* ==========================================================================
   11. GALLERY SECTION
   ========================================================================== */

.gallery-section .sec-head-row {
    align-items: flex-end;
}


/* ==========================================================================
   12. ABOUT PAGE BLOCKS
   ========================================================================== */

/* Two stacked photos, the second overlapping the first. */
.about-media {
    position: relative;
    display: grid;
    gap: var(--sp-4);
}

@media (min-width: 620px) {

    .about-media {
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
    }

    .about-media > :first-child {
        grid-column: 1 / span 2;
    }

    .about-media > :nth-child(2) {
        grid-column: 1;
        margin-top: calc(var(--sp-6) * -1);
        z-index: 2;
        border: 6px solid var(--bg);
        border-radius: var(--r-sm);
    }

    .about-media > :nth-child(3) {
        grid-column: 2;
    }
}

/* Signature-style pull quote. */
.pull-quote {
    position: relative;
    padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
    border-left: 1px solid var(--c-copper);
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    color: var(--fg);
}

.pull-quote cite {
    display: block;
    margin-top: var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-style: normal;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-copper);
}

/* Numbered value propositions. */
.values {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.value {
    display: grid;
    gap: var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
}

.value__num {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    color: var(--c-copper);
}

.value__title {
    font-size: var(--fs-h5);
}

.value__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
}


/* ==========================================================================
   13. DINING PAGE BLOCKS  (online menu)
   ========================================================================== */

.venues-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

/* Sticky category filter bar above the menu list. */
.menu-toolbar {
    position: sticky;
    top: calc(var(--header-h) - 12px);
    z-index: 20;
    display: grid;
    gap: var(--sp-3);
    padding-block: var(--sp-4);
    margin-bottom: var(--sp-6);
    background-color: var(--bg);
    border-bottom: 1px solid var(--rule);
}

.menu-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

/* Search box with an inline icon. */
.search-box {
    position: relative;
    flex: 1 1 240px;
    max-width: 340px;
}

.search-box .ico {
    position: absolute;
    top: 50%;
    left: 0.95rem;
    transform: translateY(-50%);
    color: var(--c-copper);
    pointer-events: none;
}

.search-box .input {
    padding-left: 2.7rem;
}

/* --- Menu list ------------------------------------------------------------- */

.menu-group {
    margin-bottom: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
}

.menu-group__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.menu-group__title {
    font-size: var(--fs-h3);
    white-space: nowrap;
}

/* Dotted leader filling the space beside the category title. */
.menu-group__head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        var(--rule) 0 4px,
        transparent 4px 8px
    );
}

.menu-group__count {
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-muted);
    white-space: nowrap;
}

.menu-list {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    column-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.menu-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0.75rem;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--rule);
}

.menu-item__main {
    display: grid;
    gap: 0.3rem;
}

.menu-item__name {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-display);
    font-size: var(--fs-h6);
    letter-spacing: 0.03em;
    color: var(--fg);
}

.menu-item__desc {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--fg-muted);
}

.menu-item__price {
    font-family: var(--font-display);
    font-size: var(--fs-h6);
    color: var(--c-copper);
    white-space: nowrap;
}

/* Veg / non-veg indicator square, as used on Indian menus. */
.diet {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    flex: none;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.diet::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.diet--veg    { color: #3B8F52; }
.diet--nonveg { color: #A63A2E; }
.diet--egg    { color: #C08A2E; }

/* Row shown when a search returns nothing. */
.menu-empty {
    display: none;
    padding: var(--sp-8) 0;
    text-align: center;
    color: var(--fg-muted);
}

.menu-empty.is-visible {
    display: block;
}


/* ==========================================================================
   14. CONTACT PAGE BLOCKS
   ========================================================================== */

.contact-grid {
    display: grid;
    gap: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
    align-items: start;
}

@media (min-width: 980px) {
    .contact-grid {
        grid-template-columns: 0.85fr 1.15fr;
    }
}

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--rule);
}

.contact-card:first-child {
    padding-top: 0;
}

.contact-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    color: var(--c-copper);
    border: 1px solid color-mix(in srgb, var(--c-copper) 35%, transparent);
    border-radius: 50%;
    transition: background-color var(--t-base) var(--ease-out),
                color            var(--t-base) var(--ease-out);
}

.contact-card:hover .contact-card__icon {
    background-color: var(--c-copper);
    color: #FFFFFF;
}

.contact-card__label {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 0.3rem;
}

.contact-card__value {
    font-family: var(--font-display);
    font-size: var(--fs-h6);
    line-height: 1.5;
    color: var(--fg);
    transition: color var(--t-base) var(--ease-out);
}

a.contact-card__value:hover {
    color: var(--c-copper);
}

/* Booking / enquiry form panel. */
.form-panel {
    padding: clamp(1.5rem, 1.1rem + 2.2vw, 3rem);
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
}

.form-panel__head {
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--rule);
}

/* Responsive map embed. */
.map-frame {
    position: relative;
    aspect-ratio: 21 / 9;
    min-height: 300px;
    overflow: hidden;
    border-radius: var(--r-md);
    border: 1px solid var(--rule);
    background-color: var(--c-navy-800);
}

.map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* Tints the default Google map toward the brand palette. */
    filter: grayscale(0.35) contrast(1.05) saturate(0.85);
}

@media (max-width: 640px) {
    .map-frame {
        aspect-ratio: 4 / 3;
    }
}


/* ==========================================================================
   15. LEGAL / POLICY PAGE
   ========================================================================== */

.legal {
    display: grid;
    gap: clamp(2rem, 1.2rem + 3vw, 4rem);
}

@media (min-width: 960px) {
    .legal {
        grid-template-columns: 260px 1fr;
        align-items: start;
    }
}

/* Sticky in-page table of contents. */
.legal__toc {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    display: none;
    gap: var(--sp-2);
    padding-left: var(--sp-4);
    border-left: 1px solid var(--rule);
}

@media (min-width: 960px) {
    .legal__toc { display: grid; }
}

.legal__toc a {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--fg-muted);
    transition: color var(--t-base) var(--ease-out);
}

.legal__toc a:hover,
.legal__toc a.is-active {
    color: var(--c-copper);
}

.legal__body {
    max-width: 72ch;
}

.legal__body h2 {
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-h4);
    scroll-margin-top: calc(var(--header-h) + 2rem);
}

.legal__body h2:first-child {
    margin-top: 0;
}

.legal__body h3 {
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-h6);
}

.legal__body p,
.legal__body li {
    font-size: var(--fs-base);
    line-height: var(--lh-loose);
    color: var(--fg-muted);
}

.legal__body ul {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-left: var(--sp-5);
}

.legal__body li {
    position: relative;
}

.legal__body li::before {
    content: "";
    position: absolute;
    top: 0.75em;
    left: calc(var(--sp-5) * -1);
    width: 5px;
    height: 5px;
    background: var(--c-copper);
    transform: rotate(45deg);
}

.legal__meta {
    padding-bottom: var(--sp-5);
    margin-bottom: var(--sp-6);
    border-bottom: 1px solid var(--rule);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
}


/* ==========================================================================
   16. CALL-TO-ACTION BAND
   ========================================================================== */

.cta-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.cta-band__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.cta-band__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(2, 20, 30, 0.82);
}

.cta-band__inner {
    display: grid;
    gap: var(--sp-5);
    justify-items: center;
    max-width: 62ch;
    margin-inline: auto;
}

.cta-band__title {
    color: #FFFFFF;
}


/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.site-footer {
    position: relative;
    padding-top: var(--section-y-tight);
    padding-bottom: var(--sp-6);
    background-color: var(--c-navy-900);
    color: var(--c-on-dark);
    --fg: var(--c-on-dark);
    --fg-muted: var(--c-on-dark-muted);
    --rule: var(--c-rule-dark);
}

.footer-grid {
    display: grid;
    gap: clamp(2rem, 1.2rem + 3vw, 4rem);
    padding-bottom: var(--sp-7);
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 780px) {
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}

@media (min-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    }
}

.footer__brand {
    display: grid;
    gap: var(--sp-4);
    align-content: start;
}

.footer__logo img {
    height: 54px;
    width: auto;
}

.footer__tagline {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--c-on-dark-muted);
    max-width: 40ch;
}

.footer__title {
    margin-bottom: var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-copper);
}

.footer__list {
    display: grid;
    gap: var(--sp-3);
}

.footer__list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: var(--fs-sm);
    color: var(--c-on-dark-muted);
    transition: color var(--t-base) var(--ease-out),
                gap   var(--t-base) var(--ease-out);
}

.footer__list a:hover {
    color: var(--c-copper);
    gap: 0.95em;
}

.footer__list .ico {
    color: var(--c-copper);
    opacity: 0.85;
}

/* Contact block with icon + multi-line value. */
.footer__contact {
    display: grid;
    gap: var(--sp-4);
}

.footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--c-on-dark-muted);
}

.footer__contact-item .ico {
    margin-top: 0.25em;
    color: var(--c-copper);
}

.footer__contact-item a {
    transition: color var(--t-base) var(--ease-out);
}

.footer__contact-item a:hover {
    color: var(--c-copper);
}

.footer__social {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.footer__social .icon-btn {
    border-color: rgba(244, 239, 231, 0.2);
    color: var(--c-on-dark);
}

/* --- Footer bottom strip ---------------------------------------------------- */

.footer-bottom {
    display: grid;
    gap: var(--sp-4);
    padding-top: var(--sp-5);
    font-size: var(--fs-xs);
    color: var(--c-on-dark-muted);
}

@media (min-width: 860px) {
    .footer-bottom {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
}

.footer-legal a {
    position: relative;
    transition: color var(--t-base) var(--ease-out);
}

.footer-legal a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: var(--c-copper);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 380ms var(--ease-out);
}

.footer-legal a:hover {
    color: var(--c-copper);
}

.footer-legal a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.footer__disclaimer {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: rgba(159, 176, 186, 0.72);
    max-width: 92ch;
}


/* ==========================================================================
   18. BACK-TO-TOP BUTTON
   ========================================================================== */

.to-top {
    position: fixed;
    right: clamp(1rem, 2vw, 1.75rem);
    bottom: clamp(5.5rem, 2vw + 4rem, 2rem);
    z-index: var(--z-sticky);
    color: var(--c-on-dark);
    background-color: rgba(3, 28, 42, 0.85);
    border-color: rgba(244, 239, 231, 0.2);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition:
        opacity    var(--t-base) var(--ease-out),
        visibility var(--t-base) linear,
        transform  var(--t-base) var(--ease-spring),
        background-color var(--t-base) var(--ease-out);
}

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

/* Lifts clear of the mobile action bar on small screens. */
@media (max-width: 1023px) {
    .to-top {
        bottom: calc(68px + 1rem + env(safe-area-inset-bottom, 0px));
    }
}