/* ==========================================
   ALFANZOO RESORT, Himalayan Modern
   Cinematic · Editorial · Unmistakably Nepali
   ========================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }:root {
    --ink: #14120D;
    --coal: #201C14;
    --ivory: #FAF6EE;
    --sand: #EFE6D2;
    --line: #E2D7BE;
    --brass: #C6A15B;
    --brass-deep: #7E622F;   /* AA: 5.30:1 on ivory (was 3.84:1) */
    --marigold: #E39A2D;
    --clay: #C96F4A;
    --ink-soft: #57503F;
    /* This block re-declares the brand palette that assets/css/foundation.css
       already owns, and because styles.css is linked SECOND it silently wins:
       editing the token where it is defined changes nothing. Nine tokens
       disagree between the two layers today. Keep them in step, or delete the
       duplicates here and use foundation's.

       --muted was #97907D, which is 2.95:1 on ivory and 3.13:1 on a card, it
       carries table headers, "/ night", dish blurbs, album counts and section
       labels, all of them small. Darkened on the same hue to 5.45:1 on ivory,
       5.78:1 on a card, 4.73:1 on sand. Every use of it sits on a light
       surface; the dark bands use --muted-on-dark or plain brass. */
    --muted: #6B6454;
    --muted-on-dark: rgba(250, 246, 238, .62);
    --forest: #2E3B32;
    --forest-deep: #1A211C;

    --primary-crimson: var(--forest);
    --primary-gold: var(--brass);
    --primary-blue: #5B7A8C;
    --secondary-teal: #5B7A8C;
    --crimson-dark: var(--forest-deep);
    --off-white: var(--ivory);
    --text-dark: var(--ink);
    --text-medium: var(--ink-soft);
    --text-light: var(--muted);
    --border-gray: var(--line);
    --bg-light: var(--ivory);
    --bg-white: #FFFDF8;

    --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Cormorant Garamond', Georgia, serif;

    --space-xs: .25rem; --space-sm: .5rem; --space-md: 1rem;
    --space-lg: 1.5rem; --space-xl: 3rem; --space-xxl: 6rem;
    --max-width: 1240px;
    /* Fallback for any block that never got a CMS path. Now a photograph of
       the resort itself (admin/uploads/images/albums/090-resort-from-garden-lg.jpg)
       rather than a stock Unsplash frame of somewhere else; pages that have a
       real photo set their own background-image inline and never touch this. */
    --hero-image: url('admin/uploads/images/albums/090-resort-from-garden-lg.webp');

    --shadow-md: 0 18px 44px -16px rgba(20,18,13,.35);
    --shadow-lg: 0 32px 80px -20px rgba(20,18,13,.45);
    /* Now aliased to the motion token from assets/css/foundation.css, so every
       transition in this file picks up the new easing curve. Previously
       hardcoded, which meant the two layers animated differently. */
    --ease: var(--ease-out, cubic-bezier(.16,1,.3,1));
    /* Aliases so legacy selectors use the new radii. */
    --radius: var(--r-sm, 8px);
    --radius-lg: var(--r-lg, 20px);
}html { 
    scroll-behavior: smooth; 
    /* Prevent horizontal overflow */
    overflow-x: hidden;
    /* Note: Safe area padding handled via body and nav instead */
    padding: 0;
}body { 
    font-family: var(--font-body); 
    line-height: 1.7; 
    color: var(--ink); 
    background: var(--ivory); 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased; 
    margin: 0 !important; 
    padding: 0 !important; 
    /* Use 100dvh for better mobile support (accounts for browser chrome) */
    min-height: 100dvh;
    /* Ensure body starts flush with viewport top */
    position: relative;
    top: 0;
}/* Fixed navigation handling for notched devices - handles safe-area-inset */
nav.site-nav, body > nav:not(.mob-nav) { 
    position: fixed; 
    top: 0; 
    top: env(safe-area-inset-top, 0);
    left: 0; 
    right: 0; 
    z-index: 1000; 
    padding: 1.2rem 5%; 
    padding-top: calc(1.2rem + env(safe-area-inset-top));
    background: transparent; 
    transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s; 
}nav.site-nav.scrolled, nav.scrolled { 
    background: rgba(20,18,13,.9); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px); 
    padding: .65rem 5%; 
    padding-top: calc(.65rem + env(safe-area-inset-top));
    box-shadow: 0 1px 0 rgba(198,161,91,.25); 
}::selection { background: var(--brass); color: var(--ink); }::-webkit-scrollbar { width: 11px; }::-webkit-scrollbar-track { background: var(--ink); }::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 8px; }h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.04; margin-bottom: var(--space-md); color: var(--ink); }p { margin-bottom: 1rem; }a { text-decoration: none; color: inherit; transition: color .25s var(--ease); }a:hover { color: var(--brass-deep); }img { max-width: 100%; height: auto; display: block; }/* ---------- Editorial scaffolding ---------- */
.kicker { display: inline-flex; align-items: center; gap: .8rem; font-size: .72rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: 1.2rem; }.kicker::before { content: ''; width: 2.6rem; height: 1px; background: var(--brass); }.sec-index { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--muted); display: block; margin-bottom: .4rem; }.section-head { max-width: 720px; margin-bottom: 3.2rem; position: relative; }.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }.section-head.center .kicker::after { content: ''; width: 2.6rem; height: 1px; background: var(--brass); }.section-head h2 { font-size: clamp(2.4rem, 5vw, 4rem); }.section-head h2 em { font-style: italic; color: var(--brass-deep); }.section-head p { color: var(--ink-soft); font-size: 1.06rem; font-weight: 300; }.time { color: var(--muted); font-size: .85rem; }/* ---------- Buttons ---------- */
.btn { display: inline-block; padding: 1rem 2.3rem; border-radius: 999px; font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; font-family: var(--font-body); text-align: center; position: relative; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .38s var(--ease); border-radius: inherit; }.btn:hover::before { transform: translateY(0); }.btn:hover { transform: translateY(-2px); }.btn-primary { background: var(--ink); color: var(--ivory); }.btn-primary::before { background: var(--brass); }.btn-primary:hover { color: var(--ink); box-shadow: var(--shadow-md); }.btn-secondary { background: var(--brass); color: var(--ink); }.btn-secondary::before { background: var(--ivory); }.btn-secondary:hover { box-shadow: var(--shadow-md); }.btn-outline { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }.btn-outline::before { background: #fff; }.btn-outline:hover { color: var(--ink); border-color: #fff; }.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }.btn-ghost::before { background: var(--ink); }.btn-ghost:hover { color: var(--ivory); border-color: var(--ink); }.btn-sm { padding: .6rem 1.3rem; font-size: .72rem; }/* ---------- Forms ---------- */
input, textarea, select { width: 100%; padding: .9rem 1.05rem; margin: var(--space-xs) 0 var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-body); font-size: .95rem; background: #FFFDF8; color: var(--ink); transition: border-color .25s, box-shadow .25s; }input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(198,161,91,.18); }textarea { min-height: 120px; resize: vertical; }.form-group { margin-bottom: 1rem; }.form-group label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; }.text-center { text-align: center; }.mt-0 { margin-top: 0 !important; }.max-width-center { max-width: var(--max-width); margin: 0 auto; }blockquote { background: var(--sand); border-left: 3px solid var(--brass); padding: var(--space-lg) var(--space-xl); margin: var(--space-lg) 0; font-family: var(--font-display); font-size: 1.5rem; font-style: italic; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }blockquote cite { display: block; margin-top: .6rem; font-family: var(--font-body); font-size: .8rem; font-style: normal; font-weight: 600; letter-spacing: .1em; }/* ---------- Navigation (transparent over hero) ---------- */
nav.site-nav, body > nav:not(.mob-nav) { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1.2rem 5%; background: transparent; transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s; }nav.site-nav.scrolled, nav.scrolled { background: rgba(20,18,13,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: .65rem 5%; box-shadow: 0 1px 0 rgba(198,161,91,.25); }.nav-container { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }.logo { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #fff; }.logo span { color: var(--brass); }.logo-img { display: inline-flex; align-items: center; }.brand-logo { height: 44px; width: auto; max-width: 200px; object-fit: contain; }.foot-logo { height: 52px; }.mob-nav-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }.mob-menu-logo { width: 76px; height: 76px; border-radius: 22px; object-fit: cover; }nav.site-nav.scrolled .logo, nav.scrolled .logo { color: var(--ivory); }.main-nav { display: flex; align-items: center; }.main-nav ul, ul.main-nav { display: flex; list-style: none; gap: 1.9rem; align-items: center; }.main-nav a { font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.78); position: relative; padding: .4rem 0; }.main-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--brass); transition: width .3s var(--ease); }.main-nav a:hover { color: #fff; }.main-nav a:hover::after { width: 100%; }.nav-cta { margin-left: 1rem; border: 1px solid var(--brass) !important; background: transparent !important; color: var(--brass) !important; }.nav-cta::before { background: var(--brass) !important; }.nav-cta:hover { color: var(--ink) !important; }nav.site-nav.scrolled .nav-cta, nav.scrolled .nav-cta { background: var(--brass) !important; color: var(--ink) !important; }.menu-toggle { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #fff; }/* ---------- Hero ---------- */
.hero { 
    min-height: 100dvh; 
    display: flex; 
    align-items: center; 
    position: relative; 
    /* The hero photograph is painted by a real <img> now, which the preload
       scanner can see and which carries its own responsive srcset. This rule
       used to fetch --hero-image (the 771KB -lg variant) as a CSS background
       purely as a underneath-layer, while the <img> fetched its own candidate
       on top of it: two copies of the same photograph on every home page load,
       with the larger one competing for the bandwidth the LCP image needed.
       --ink alone is the fallback, and the box still reads as the dark hero
       surface until the photograph arrives. */
    background: var(--ink); 
    color: #fff; 
    padding: calc(5rem + env(safe-area-inset-top)) 5% calc(3.5rem + env(safe-area-inset-bottom)); 
    margin: 0; 
    overflow: hidden; 
    box-sizing: border-box;
}.hero-bg-zoom { position: absolute; inset: -4%; background: inherit; background-size: cover; background-position: center; animation: heroDrift 28s ease-in-out infinite alternate; }
/* The LCP image now lives here as a real <img>, so it is discovered by the
   preload scanner instead of waiting on the CSSOM. It covers the inherited
   background exactly as the old background-only layer did, and object-fit keeps
   the same centre-cropped framing at any viewport width. */
.hero-bg-zoom > .hero-img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
@keyframes heroDrift {from { transform: scale(1); }to { transform: scale(1.08); }}.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(16,14,10,.9) 0%, rgba(16,14,10,.42) 46%, rgba(16,14,10,.28) 100%); }.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(90% 55% at 50% 108%, rgba(198,161,91,.28), transparent 62%); pointer-events: none; }.hero-grain { position: absolute; inset: 0; z-index: 2; opacity: .5; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }.hero-content { position: relative; z-index: 3; max-width: var(--max-width); margin: 0 auto; width: 100%; padding-bottom: 0; }.hero-eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }.hero-eyebrow::after { content: ''; height: 1px; width: min(220px, 30vw); background: linear-gradient(90deg, var(--brass), transparent); }.hero h1 { font-size: clamp(3.2rem, 9vw, 7.5rem); color: #fff; margin-bottom: 1.4rem; max-width: 12ch; text-wrap: balance; }.hero h1 em { font-style: italic; background: linear-gradient(120deg, #E8CF9A, var(--brass) 60%, #E8CF9A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }.hero p { font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 58ch; color: rgba(255,255,255,.8); font-weight: 300; margin-bottom: 2.4rem; }.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }.hero-meta { display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 3.2rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.16); flex-wrap: wrap; }.hero-meta div b { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; color: #fff; }.hero-meta div span { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.55); }.scroll-cue { position: absolute; right: 5%; bottom: 4.5rem; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .7rem; color: rgba(255,255,255,.6); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; }.scroll-cue::after { content: ''; width: 1px; height: 56px; background: linear-gradient(var(--brass), transparent); animation: cueDrop 2.2s var(--ease) infinite; }.btn-table-gold { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--brass); background: transparent; color: var(--brass); transition: all .3s var(--ease); font-family: var(--font-body); white-space: nowrap; }.btn-table-gold:hover { background: var(--brass); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }nav.site-nav.scrolled .btn-table-gold { background: var(--brass); color: var(--ink); }@keyframes cueDrop {0% { transform: scaleY(0); transform-origin: top; }45% { transform: scaleY(1); transform-origin: top; }55% { transform: scaleY(1); transform-origin: bottom; }100% { transform: scaleY(0); transform-origin: bottom; }}/* ---------- Marquee ---------- */
.marquee { background: var(--brass); color: var(--ink); overflow: hidden; white-space: nowrap; padding: .85rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); position: relative; z-index: 6; }.marquee-track { display: inline-flex; gap: 3rem; padding-right: 3rem; animation: marquee 26s linear infinite; font-size: .78rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }@keyframes marquee {to { transform: translateX(-50%); }}/* ---------- Peaks divider ---------- */
.peaks-divider { display: block; width: 100%; height: 70px; margin-bottom: -1px; }.peaks-divider.light { background: var(--ivory); }.peaks-divider.dark { background: var(--ink); }/* ---------- Sections ---------- */
.rooms-section, .dining-section, .about-section, .gallery-section, .contact-section { padding: var(--space-xxl) 5%; margin-top: 0; position: relative; }.rooms-section { background: var(--ivory); }.dining-section { background: #FFFDF8; }.about-section { background: var(--sand); }.gallery-section { background: var(--ivory); }.contact-section { background: var(--forest-deep); color: rgba(255,255,255,.8); }.contact-section h2 { color: #fff; }/* ---------- Highlights ---------- */
.highlights { background: var(--ink); padding: 5rem 5%; }.highlights-container { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; }.highlight-card { background: var(--coal); border: 1px solid rgba(198,161,91,.22); border-radius: var(--radius-lg); overflow: hidden; transition: transform .45s var(--ease), border-color .45s, box-shadow .45s; display: flex; flex-direction: column; }.highlight-card:hover { transform: translateY(-10px); border-color: var(--brass); box-shadow: var(--shadow-lg); }.highlight-card .img-wrap { overflow: hidden; position: relative; }.highlight-card img { width: 100%; height: 230px; object-fit: cover; transition: transform .8s var(--ease); filter: saturate(.92); }.highlight-card:hover img { transform: scale(1.07); }.highlight-card .img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,18,13,.55), transparent 55%); }.highlight-card-body { padding: 1.9rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }.highlight-card h3 { font-size: 1.7rem; margin: 0; color: #fff; }.highlight-card p { color: rgba(250,246,238,.62); font-size: .92rem; font-weight: 300; flex: 1; }.highlight-card .kicker { margin-bottom: .4rem; }.highlight-card .btn { align-self: flex-start; margin-top: .6rem; border-color: rgba(198,161,91,.5); color: var(--brass); }.highlight-card .btn::before { background: var(--brass); }.highlight-card .btn:hover { color: var(--ink); }.highlight-card > h3, .highlight-card > p { padding: 0 1.9rem; color: #fff; }.highlight-card > p { color: rgba(250,246,238,.62); }.highlight-card > .btn { margin: .6rem 1.9rem 1.9rem; align-self: flex-start; position: static; }/* ---------- Stats band ---------- */
.stats-band { background: var(--ink); color: #fff; padding: 4.5rem 5%; border-top: 1px solid rgba(198,161,91,.25); }.stats-band-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2.5rem; text-align: left; }.stat-big b { display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 500; color: var(--brass); line-height: 1; }.stat-big span { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.55); }/* ---------- Room cards ---------- */
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 2rem; }.room-card { background: #FFFDF8; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); display: flex; flex-direction: column; position: relative; }.room-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }.room-media { position: relative; overflow: hidden; }.room-card > img, .room-media img { width: 100%; height: 300px; object-fit: cover; transition: transform .8s var(--ease); }.room-card:hover > img, .room-card:hover .room-media img { transform: scale(1.05); }.room-price-badge { position: absolute; top: 1.1rem; right: 1.1rem; background: rgba(20,18,13,.85); backdrop-filter: blur(6px); color: var(--brass); font-family: var(--font-display); font-size: 1.25rem; padding: .35rem 1rem; border-radius: 999px; border: 1px solid rgba(198,161,91,.5); }.room-content { padding: 2.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }.room-content h3 { font-size: 1.8rem; margin: 0; }.room-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--brass-deep); }.room-price small { font-family: var(--font-body); font-size: .72rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }.room-content p { color: var(--ink-soft); font-size: .95rem; font-weight: 300; }.amenities-list { list-style: none; margin: 1rem 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem; }.amenities-list li { font-size: .82rem; color: var(--ink-soft); display: flex; gap: .55rem; align-items: baseline; padding: 0; border: 0; }.amenities-list li::before { content: '✦'; color: var(--brass); font-size: .7rem; }.room-cta { margin-top: auto; padding-top: 1.3rem; display: flex; gap: .7rem; flex-wrap: wrap; text-align: left; }.comparison-container { margin-top: var(--space-xl); overflow-x: auto; }.comparison-table { width: 100%; border-collapse: collapse; background: #FFFDF8; }.comparison-table th, .comparison-table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); text-align: left; font-size: .92rem; }.comparison-table th { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }/* ---------- Team ---------- */
.team-section { padding: var(--space-xxl) 5%; background: var(--white); }.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }.team-card { background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }.team-card img { width: 100%; height: 300px; object-fit: contain; background: var(--sand); }
/* ---------- Team, by department ----------
   The card was already right, but the portrait was letterboxed: object-fit:contain
   inside a fixed 300px band shrank a 2:3 photograph until it had grey bars above
   and below, and the grid read as a row of empty boxes. A 4:5 crop of the same
   file fills the card instead. object-position sits above centre deliberately:
   every one of these portraits carries the resort sign and a good deal of garden
   above the head, so a centred crop would land on scenery. The .team-card img
   rule above is overridden inside .team-media. */
.team-count{display:inline-block;margin-top:1.1rem;padding:.34rem .8rem;border-radius:999px;background:var(--ink);color:var(--ivory);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.team-dept{margin-top:3.4rem}
.team-dept:first-of-type{margin-top:2.4rem}
.team-dept-head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;padding-bottom:.7rem;margin-bottom:1.4rem;border-bottom:1px solid rgba(198,161,91,.28)}
.team-dept-head h2{font-size:clamp(1.5rem,2.4vw,1.95rem);letter-spacing:.01em}
.team-dept-head span{font-size:.76rem;letter-spacing:.1em;color:var(--muted)}
.team-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.15rem}
/* The homepage shows exactly three. auto-fill would lay them out in five columns
   and leave two empty tracks on the right, which is how three cards ended up
   jammed against the left edge with half the row blank. Three explicit columns
   let them share the width. */
.team-grid--three{grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:820px){.team-grid--three{grid-template-columns:repeat(2,1fr)}}
.team-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
/* Portrait framing: the photographs are kept whole and cropped only by the card,
   with a 20% zoom so the face reads at grid size instead of sitting small in a
   full-length shot. The zoom is anchored above centre because in every one of
   these portraits the subject's face sits at roughly 40 to 48% down the frame,
   with the resort sign and a good deal of garden above the head. Scaling about
   that same point keeps the head in place while the extra 20% comes off the
   bottom, where there is only paving to lose. */
.team-media img{height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.2);transform-origin:50% 42%;transition:transform .55s var(--ease)}
.team-card:hover .team-media img{transform:scale(1.04)}
/* Initials share the media box, so a card without a portrait keeps its rhythm. */
.team-media .team-initial{width:100%;height:100%}
.team-body{padding:1.05rem 1.15rem 1.2rem}
.team-body h3{font-size:1.06rem;line-height:1.25;margin-bottom:.2rem}
.team-role{font-size:.63rem;letter-spacing:.16em;margin-bottom:.5rem}
.team-body p{font-size:.82rem;line-height:1.55}
.team-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem;margin-top:3.4rem;padding-top:2.2rem;border-top:1px solid rgba(198,161,91,.28);text-align:center}
.team-cta p{flex-basis:100%;margin:0 0 .4rem;color:var(--ink-soft)}
@media(max-width:560px){.team-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.85rem}.team-body{padding:.85rem .9rem 1rem}.team-body h3{font-size:.95rem}.team-dept{margin-top:2.6rem}}
@media(prefers-reduced-motion:reduce){.team-card:hover .team-media img{transform:none}}.team-initial { width: 100%; height: 300px; display: grid; place-items: center; font-family: var(--font-display); font-size: 4.5rem; color: var(--brass); background: linear-gradient(150deg, var(--sand), var(--ivory)); }.team-body { padding: 1.5rem; }.team-body h3 { font-size: 1.45rem; margin-bottom: .15rem; }.team-role { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: .6rem; }.team-body p { font-size: .88rem; color: var(--ink-soft); font-weight: 300; margin: 0; }/* ---------- CTA banner ---------- */
.cta-banner { padding: 7rem 5%; text-align: center; background: radial-gradient(60% 100% at 50% 0%, rgba(198,161,91,.22), transparent 70%), var(--forest-deep); color: #fff; position: relative; overflow: hidden; }.cta-banner .max-width-center { position: relative; }.cta-banner h2 { font-size: clamp(2.2rem, 5vw, 4rem); color: #fff; margin-bottom: .9rem; max-width: 16ch; margin-left: auto; margin-right: auto; }.cta-banner h2 em { color: var(--brass); }.cta-banner p { color: rgba(255,255,255,.7); margin-bottom: 2.2rem; font-weight: 300; }/* ---------- Dining ---------- */
.dining-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }.dining-image { min-height: 520px; background: var(--sand) var(--hero-image) no-repeat center center/cover; border-radius: var(--radius-lg); position: relative; overflow: hidden; }.dining-image::after { content: ''; position: absolute; inset: 1.2rem; border: 1px solid rgba(255,253,248,.5); border-radius: calc(var(--radius-lg) - 6px); pointer-events: none; }.dining-content h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }.dining-content p { color: var(--ink-soft); font-weight: 300; }.nutrition-list, ul.nutrition-list { list-style: none; margin: 1.6rem 0 2.2rem; padding: 0; }.nutrition-list li { padding: 1.1rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; transition: padding .3s var(--ease); }.nutrition-list li:hover { padding-left: .6rem; border-bottom-color: var(--brass); }.nutrition-list strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--ink); }.menu-cat { font-size: 1.7rem; margin-top: 2.5rem; }/* ---------- Experiences (numbered editorial rows) ---------- */

/* ---------- Facts + Facilities ---------- */
.facts-section { padding: var(--space-xxl) 5% 0; background: var(--sand); }.facts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--brass); border: 1px solid var(--brass); }.fact-badge { background: var(--ink); color: var(--ivory); padding: 1.8rem; }.fact-badge b { display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 500; color: var(--brass); line-height: 1.1; }.fact-badge span { font-size: .8rem; letter-spacing: .06em; color: rgba(250,246,238,.7); }.facility-section { padding: var(--space-xxl) 5%; background: var(--sand); }.facility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }.facility-card { background: #FFFDF8; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem; display: grid; gap: .3rem; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }.facility-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--brass); }.facility-card i { font-size: 1.4rem; color: var(--brass-deep); margin-bottom: .4rem; }.facility-card b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; }.facility-card span { font-size: .85rem; color: var(--ink-soft); font-weight: 300; }.facility-note { margin-top: 2.5rem; background: var(--ink); color: rgba(250,246,238,.8); border-radius: var(--radius-lg); padding: 2.2rem; font-weight: 300; }.facility-note strong { color: var(--brass); }/* ---------- About ---------- */
.about-top { padding-top: 8.5rem; }.about-opener { max-width: 820px; margin-bottom: 3.5rem; }.about-opener h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); margin-bottom: .8rem; }.about-opener h1 em { font-style: italic; color: var(--brass-deep); }.about-opener p { font-size: 1.15rem; color: var(--ink-soft); font-weight: 300; max-width: 60ch; }.about-collage { position: relative; }.about-mini-card { position: absolute; left: -1.4rem; bottom: 2.5rem; background: var(--ink); color: var(--ivory); border-radius: var(--radius-lg); padding: 1.3rem 1.6rem; box-shadow: var(--shadow-lg); border: 1px solid rgba(198,161,91,.4); }.about-mini-card b { display: block; font-family: var(--font-display); font-size: 2.4rem; color: var(--brass); line-height: 1; }.about-mini-card span { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(250,246,238,.7); }.creed-band { background: var(--ink); color: var(--ivory); padding: 5.5rem 5%; text-align: center; position: relative; overflow: hidden; }.creed-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 90% at 50% 100%, rgba(198,161,91,.2), transparent 70%); }.creed-band .max-width-center { position: relative; }.creed-band .kicker { color: var(--brass); justify-content: center; }.creed-band .kicker::after { content: ''; width: 2.6rem; height: 1px; background: var(--brass); }.creed-band blockquote { background: none; border: 0; padding: 0; margin: 0 auto 1.2rem; max-width: 800px; font-size: clamp(1.8rem, 4vw, 3rem); color: #fff; }.creed-band p { color: rgba(250,246,238,.65); font-weight: 300; max-width: 560px; margin: 0 auto; }.crumbs-dark { color: var(--muted); }.crumbs-dark a { color: var(--brass-deep); }/* Light openers (inner pages) */
.page-top { padding-top: 8rem !important; }.page-opener { max-width: 820px; margin-bottom: 2.5rem; }.page-opener h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); margin-bottom: .8rem; }.page-opener h1 em { font-style: italic; color: var(--brass-deep); }.page-opener p { font-size: 1.1rem; color: var(--ink-soft); font-weight: 300; max-width: 62ch; }.page-banner { background: transparent; padding: 0 5% 2rem; }/* Light-top pages: transparent nav with ink text until scrolled */
.light-top nav.site-nav:not(.scrolled) .logo { color: var(--ink); }.light-top nav.site-nav:not(.scrolled) .main-nav a { color: var(--ink-soft); }.light-top nav.site-nav:not(.scrolled) .main-nav a:hover { color: var(--ink); }.light-top nav.site-nav:not(.scrolled) .menu-toggle { color: var(--ink); }.about-content { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }.about-image { width: 100%; aspect-ratio: 4/5; max-height: 640px; background: var(--sand) var(--hero-image) no-repeat center center/cover; border-radius: 200px 200px var(--radius-lg) var(--radius-lg); }.about-text h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }.about-text p { color: var(--ink-soft); font-weight: 300; }
/* Founder's sign-off. Name and role are pulled out of the body colour so the
   block reads as an attribution instead of a third paragraph. */
.about-sign { display: grid; gap: .3rem; margin-top: 2rem; }
.about-sign b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: .05em; color: var(--ink); }
.about-sign span { font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-deep); }.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--brass); border: 1px solid var(--brass); margin-top: 2rem; }.stat-item { background: var(--sand); text-align: left; padding: 1.4rem; }.stat-item .number { font-family: var(--font-display); font-size: 2.4rem; color: var(--ink); }.stat-item div:last-child { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }/* ---------- Testimonial ---------- */
.testimonial { background: var(--ivory); padding: 6rem 5%; text-align: center; }.testimonial blockquote { background: none; border: 0; padding: 0; margin: 0 auto; max-width: 820px; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.35; color: var(--ink); }.testimonial blockquote::before { content: '“'; display: block; font-size: 4rem; color: var(--brass); line-height: 1; margin-bottom: .5rem; }.testimonial cite { margin-top: 1.5rem; font-family: var(--font-body); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }/* ---------- Gallery (masonry + lightbox) ---------- */
.gallery-grid { columns: 3; column-gap: 1rem; }.gallery-item { break-inside: avoid; margin-bottom: 1rem; border-radius: var(--radius); overflow: hidden; position: relative; background: var(--sand); cursor: pointer; }.gallery-item img { width: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s; }.gallery-item:hover img { transform: scale(1.05); }.gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,18,13,.6), transparent 55%); opacity: 0; transition: opacity .4s; }.gallery-item:hover::after { opacity: 1; }.gallery-caption { position: absolute; bottom: 1rem; left: 1.1rem; right: 1.1rem; color: #fff; font-size: .85rem; letter-spacing: .04em; z-index: 2; opacity: 0; transform: translateY(8px); transition: all .4s var(--ease); }.gallery-item:hover .gallery-caption { opacity: 1; transform: none; }/* ---------- Social gallery (Mamaghar pattern) ---------- */
/* Gallery download enhancements */
/* ---------- Contact ---------- */
.contact-container { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; max-width: var(--max-width); margin: 0 auto; }.contact-info ul { list-style: none; margin: 1.6rem 0; }.contact-info li { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.14); display: flex; gap: 1rem; align-items: center; font-size: .95rem; }.contact-info i { color: var(--brass); width: 1.2rem; text-align: center; }.contact-info a { color: #fff; }.contact-form-card { background: var(--ivory); border-radius: var(--radius-lg); padding: 2.6rem; color: var(--ink); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }.contact-form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brass), var(--marigold), var(--brass)); }.contact-form-card h3 { font-size: 1.8rem; }/* ---------- Booking widget (availability search) ---------- */
.booking-widget { background: linear-gradient(165deg, #2A547E, #1D3A5C 70%); border-radius: 14px; padding: 2.2rem; max-width: 560px; box-shadow: var(--shadow-lg); color: #fff; }.booking-widget h3 { color: #fff; text-align: center; font-family: var(--font-body); font-weight: 600; font-size: 1.5rem; margin-bottom: 1.4rem; }.booking-widget form { display: grid; gap: .9rem; }.bw-field select, .bw-field input, .bw-code input { width: 100%; min-width: 0; padding: .95rem 1rem; border: 0; border-radius: 3px; font-family: var(--font-body); font-size: .95rem; background: #fff; color: #1D3A5C; margin: 0; appearance: auto; }.bw-static-val { padding: .95rem 1rem; border-radius: 3px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: .95rem; display: flex; align-items: center; gap: .6rem; }.bw-static-val i { color: var(--brass); }.bw-label { display: none; }.bw-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }.bw-row .bw-field { min-width: 0; }.bw-guests { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .9rem; margin-top: .3rem; }.bw-guests > div { min-width: 0; }.bw-guests label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.9); margin-bottom: .35rem; white-space: nowrap; }.bw-guests select { width: 100%; padding: .8rem .6rem; border: 0; border-radius: 3px; background: #fff; color: #1D3A5C; font-size: .95rem; }.bw-code summary { cursor: pointer; font-size: .85rem; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.9); list-style: none; }.bw-code summary::-webkit-details-marker { display: none; }.bw-code input { margin-top: .6rem; text-transform: uppercase; }.bw-search { border: 0; border-radius: 6px; padding: 1rem; font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #7ED321, #4CAF50); cursor: pointer; box-shadow: 0 4px 0 #3D8B40; transition: transform .15s var(--ease), box-shadow .15s; }.bw-search:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #3D8B40; }.bw-search:active { transform: translateY(2px); box-shadow: none; }.booking-band { background: var(--ivory); padding: var(--space-xxl) 5%; }.booking-band .section-head { margin-bottom: 2.2rem; }.booking-dock { max-width: 640px; margin: 0 auto; display: flex; justify-content: center; }/* Hero variant: navy card docked in the hero's right column, 2-grid fields */
.hero-content.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }.hero-copy { min-width: 0; }.hero-widget { margin-top: 0; width: 100%; max-width: 460px; justify-self: end; }.hero-widget .booking-widget { max-width: none; padding: 1.8rem; }.hero-widget .booking-widget h3 { font-size: 1.25rem; margin-bottom: 1.1rem; }.hero-widget .booking-widget form { grid-template-columns: 1fr 1fr; gap: .7rem; }.hero-widget .booking-widget form > .bw-field:first-child, .hero-widget .booking-widget form > .bw-row, .hero-widget .bw-code, .hero-widget .bw-search { grid-column: 1 / -1; }.hero-widget .bw-label { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: .3rem; white-space: nowrap; }.hero-widget .bw-row { gap: .7rem; }.hero-widget .bw-guests { display: contents; }.hero-widget .bw-guests > div { min-width: 0; }.hero-widget .bw-guests label { font-size: .62rem; letter-spacing: .08em; color: rgba(255,255,255,.85); white-space: nowrap; }.hero-widget .bw-field select, .hero-widget .bw-field input, .hero-widget .bw-guests select, .hero-widget .bw-code input { padding: .8rem .7rem; font-size: .9rem; }.hero-widget .bw-search { width: 100%; }@media (max-width: 992px) {.hero-content.hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }.hero-widget { max-width: 560px; justify-self: start; }}@media (max-width: 600px) {.hero-widget .booking-widget form { grid-template-columns: 1fr; }.hero-widget .booking-widget form > .bw-field:first-child { grid-column: auto; }.hero-widget .bw-search { grid-column: auto; }}/* ---------- Availability results ---------- */
.avail-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; }.avail-summary { background: #FFFDF8; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem 1.6rem; display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1.6rem 0 2rem; }.avail-summary div b { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }.avail-summary div span { font-family: var(--font-display); font-size: 1.3rem; }.avail-card { display: grid; grid-template-columns: 300px 1fr; background: #FFFDF8; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.5rem; }.avail-card > img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }.avail-body { padding: 1.8rem; }.avail-body h3 { font-size: 1.8rem; margin-bottom: .3rem; }.avail-left { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8C2F26; background: #F9E9E7; border-radius: 999px; padding: .25rem .8rem; margin: .5rem 0; }.avail-price { font-family: var(--font-display); font-size: 2rem; margin: .6rem 0 .1rem; }.avail-price small { font-family: var(--font-body); font-size: .78rem; color: var(--muted); }.avail-strike { text-decoration: line-through; color: var(--muted); margin-right: .6rem; font-size: 1.2rem; }.avail-promo-ok { color: #2E5233; font-size: .85rem; font-weight: 600; }.avail-cta { display: flex; gap: .7rem; margin-top: 1.1rem; flex-wrap: wrap; }.avail-empty { text-align: center; padding: 3rem 1rem; }/* 3D Gallery carousel */
@media (max-width: 768px) {.avail-card { grid-template-columns: 1fr; }.avail-card > img { min-height: 200px; max-height: 240px; }.bw-row { grid-template-columns: 1fr; }}.location-section { padding: var(--space-xxl) 5%; background: var(--ivory); }.location-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: stretch; }.location-copy p { color: var(--ink-soft); font-weight: 300; }.location-points { list-style: none; margin: 1.5rem 0; display: grid; gap: .7rem; }.location-points li { display: flex; gap: .9rem; align-items: center; font-size: .95rem; background: #FFFDF8; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }.location-points i { color: var(--brass-deep); width: 1.2rem; text-align: center; }.map-wrap { position: relative; min-height: 380px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--sand); isolation: isolate; }.map-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }.map-marker { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; justify-items: center; transform: translate(-50%, -100%); color: #A33B2E; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); pointer-events: none; }.map-marker i { font-size: 2rem; color: #A33B2E; -webkit-text-stroke: 1px #fff; }.map-marker span { margin-top: -.15rem; padding: .2rem .45rem; border-radius: 4px; background: #fff; color: var(--ink); font-size: .68rem; font-weight: 700; white-space: nowrap; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }.map-attribution { position: absolute; right: .35rem; bottom: .35rem; padding: .15rem .35rem; border-radius: 3px; background: rgba(255,255,255,.9); color: #373737; font: 10px/1.4 Arial, sans-serif; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.alert { padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.2rem; font-size: .92rem; }.alert.success { background: #E9F2EA; color: #2E5233; border: 1px solid #C4DCC7; }.alert.error { background: #F9E9E7; color: #8C2F26; border: 1px solid #EAC4BF; }/* ---------- Page masthead (compact, no voids) ---------- */
.page-mast { background: var(--ink); color: #fff; padding: 8rem 5% 2.6rem; position: relative; overflow: hidden; }.page-mast::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); pointer-events: none; }.page-mast-inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; }.crumbs { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.1rem; }.crumbs a { color: var(--brass); }.crumbs a:hover { color: #fff; }.page-mast .kicker { color: var(--brass); margin-bottom: .8rem; }.page-mast h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); color: #fff; margin-bottom: .7rem; max-width: 16ch; }.page-mast h1 em { font-style: italic; color: var(--brass); }.page-mast p { font-size: 1.05rem; max-width: 62ch; color: rgba(255,255,255,.72); font-weight: 300; margin: 0; }.page-banner { background: var(--ink); padding: 0 5% 3rem; }.page-banner img { display: block; width: 100%; max-width: var(--max-width); margin: 0 auto; max-height: 48vh; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid rgba(198,161,91,.25); }/* ---------- Footer ---------- */
footer { background: var(--ink); color: rgba(250,246,238,.68); padding: 5rem 5% 2rem; position: relative; overflow: hidden; }.footer-giant { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 12rem); line-height: .9; letter-spacing: .04em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(198,161,91,.35); user-select: none; margin-bottom: 3rem; text-transform: uppercase; }.footer-container { max-width: var(--max-width); margin: 0 auto; position: relative; }.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 0; margin-bottom: 0; }.footer-brand .logo { color: #fff; margin-bottom: 1rem; display: inline-block; font-size: 1.2rem; }.footer-brand p { font-size: .9rem; font-weight: 300; max-width: 32ch; }.footer-col h4 { font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--brass); margin-bottom: 1.2rem; }.footer-links ul { list-style: none; display: grid; gap: .6rem; }.footer-links { margin-bottom: 0; }.footer-links a { color: rgba(250,246,238,.68); font-size: .9rem; }.footer-links a:hover { color: #fff; padding-left: .3rem; }.footer-contact { list-style: none; display: grid; gap: .6rem; font-size: .9rem; }.footer-contact a { color: rgba(250,246,238,.68); }.footer-contact a:hover { color: #fff; }.social-icons { display: flex; gap: .7rem; margin-top: 1.2rem; }.social-icons a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; margin: 0; background: transparent; transition: all .3s var(--ease); }.social-icons a:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); transform: translateY(-3px); }.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: rgba(250,246,238,.4); }.copyright { margin-top: 0; font-size: .78rem; }/* ---------- Room features (alternating) ---------- */
.rooms-intro { background: var(--ivory); padding: 3rem 5% 0; }.rooms-intro .rich-content { max-width: 720px; font-size: 1.1rem; }.rf-lead { position: relative; min-height: 88vh; display: flex; align-items: flex-end; background-size: cover; background-position: center; color: #fff; overflow: hidden; }.rf-lead-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,12,9,.92) 0%, rgba(14,12,9,.35) 55%, rgba(14,12,9,.25) 100%); }.rf-lead-inner { position: relative; z-index: 1; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 5rem 5% 3.5rem; }.rf-lead .kicker { color: var(--brass); }.rf-lead h2 { color: #fff; font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: .8rem; max-width: 14ch; }.rf-lead p { color: rgba(255,255,255,.8); font-weight: 300; max-width: 58ch; font-size: 1.08rem; }.rf-lead-meta { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; padding: 0; }.rf-lead-meta li { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: .45rem 1.1rem; color: rgba(255,255,255,.9); }.rf-lead-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.2); }.rf-lead-price { font-family: var(--font-display); font-size: 2.4rem; color: var(--brass); line-height: 1; }.rf-lead-price span, .rf-lead-price small { display: block; font-family: var(--font-body); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6); }.rf-lead-price small { margin-top: .3rem; }.rf-num { position: absolute; left: 1.2rem; bottom: 1rem; font-family: var(--font-display); font-style: italic; font-size: 2.6rem; color: rgba(255,255,255,.85); text-shadow: 0 2px 14px rgba(0,0,0,.5); }.compare-section { background: var(--white); padding: var(--space-xxl) 5%; }.compare-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #FFFDF8; }.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; }.compare-table th { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); background: var(--ivory); }.compare-table td { padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); font-size: .95rem; }.compare-table tr:last-child td { border-bottom: 0; }.compare-table tbody tr { transition: background .25s; }.compare-table tbody tr:hover { background: rgba(198,161,91,.07); }.compare-price { font-family: var(--font-display); font-size: 1.3rem; white-space: nowrap; }.room-features { display: grid; gap: 0; }.room-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; padding: 3rem 0; border-top: 1px solid var(--line); }.room-feature:last-child { border-bottom: 1px solid var(--line); }.room-feature.flip .rf-media { order: 2; }.rf-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); }.rf-media img { width: 100%; height: 420px; object-fit: cover; transition: transform .8s var(--ease); }.room-feature:hover .rf-media img { transform: scale(1.04); }.rf-media .room-price-badge { top: 1.2rem; right: 1.2rem; }.rf-media .room-price-badge small { font-family: var(--font-body); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }.rf-body h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: .4rem 0 .8rem; }.rf-body > p { color: var(--ink-soft); font-weight: 300; }.rf-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.2rem 0; padding: 0; font-size: .85rem; color: var(--ink-soft); }.rf-meta i { color: var(--brass-deep); margin-right: .45rem; }.rf-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }.rf-pills span { font-size: .75rem; letter-spacing: .04em; border: 1px solid var(--line); background: #FFFDF8; border-radius: 999px; padding: .35rem .85rem; color: var(--ink-soft); }/* ---------- Signatures + menu sheet ---------- */
.sign-section { padding: var(--space-xxl) 5% 0; background: var(--white); }.sign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }.sign-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); color: var(--ivory); transition: transform .45s var(--ease); }.sign-card:hover { transform: translateY(-8px); }.sign-card img { width: 100%; height: 240px; object-fit: cover; }.sign-body { padding: 1.8rem; }.sign-body h3 { color: #fff; font-size: 1.6rem; margin: .5rem 0; }.sign-body p { color: rgba(250,246,238,.65); font-size: .9rem; font-weight: 300; }.sign-star { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brass); }.sign-body .room-price { color: var(--brass); }.menu-section { padding: var(--space-xxl) 5%; background: var(--white); }.menu-sheet { max-width: 860px; margin: 0 auto; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 5vw, 3.5rem); box-shadow: var(--shadow-md); }.menu-sheet .menu-cat { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--brass-deep); margin: 2.2rem 0 0; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }.menu-sheet .menu-cat:first-child { margin-top: 0; }.menu-item { padding: 1.1rem 0; border-bottom: 1px dashed var(--line); }.menu-item:last-child { border-bottom: 0; }.menu-item-head { display: flex; align-items: baseline; gap: .8rem; }.menu-item-head h4 { font-size: 1.3rem; margin: 0; }.menu-sig { color: var(--brass-deep); font-size: 1rem; }.menu-dots { flex: 1; border-bottom: 2px dotted var(--brass); transform: translateY(-5px); min-width: 2rem; }.menu-price { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); white-space: nowrap; }.menu-item p { margin: .3rem 0 0; font-size: .88rem; color: var(--ink-soft); font-weight: 300; }/* ---------- Gallery lead ---------- */
.gallery-lead { margin: 0 0 1rem; border-radius: var(--radius-lg); overflow: hidden; position: relative; }.gallery-lead img { width: 100%; max-height: 62vh; object-fit: cover; cursor: pointer; }.gallery-lead figcaption { position: absolute; bottom: 1.2rem; left: 1.4rem; color: #fff; font-family: var(--font-display); font-style: italic; font-size: 1.4rem; text-shadow: 0 2px 12px rgba(0,0,0,.5); }/* ---------- Timeline + values ---------- */
.timeline-section { padding: var(--space-xxl) 5% 0; background: var(--ivory); }.timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 720px; }.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--brass); }.timeline li { position: relative; padding: 0 0 2rem 2.5rem; }.timeline li::before { content: ''; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--brass); }.timeline b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }.timeline span { color: var(--ink-soft); font-weight: 300; font-size: .95rem; }.values-section { padding: var(--space-xxl) 5%; background: var(--ivory); }.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; }.value-card { background: #FFFDF8; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; transition: transform .35s var(--ease), box-shadow .35s; }.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }.value-card i { font-size: 1.5rem; color: var(--brass-deep); margin-bottom: .8rem; }.value-card h3 { font-size: 1.5rem; margin-bottom: .4rem; }.value-card p { color: var(--ink-soft); font-size: .92rem; font-weight: 300; margin: 0; }/* ---------- Info strip (contact) ---------- */
.info-strip { background: var(--ink); padding: 7.5rem 5% 3.5rem; }.info-cards { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }.info-card { background: var(--coal); border: 1px solid rgba(198,161,91,.25); border-radius: var(--radius-lg); padding: 1.5rem; display: grid; gap: .2rem; transition: border-color .3s, transform .3s var(--ease); }a.info-card:hover { border-color: var(--brass); transform: translateY(-4px); }.info-card i { color: var(--brass); font-size: 1.2rem; margin-bottom: .4rem; }.info-card b { color: #fff; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }.info-card span { color: rgba(250,246,238,.7); font-size: .9rem; font-weight: 300; word-break: break-word; }/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }.reveal.visible { opacity: 1; transform: none; }.reveal-d1 { transition-delay: .12s; }.reveal-d2 { transition-delay: .24s; }@media (prefers-reduced-motion: reduce) {.reveal { opacity: 1; transform: none; transition: none; }html { scroll-behavior: auto; }.hero-bg-zoom { animation: none; }.marquee-track { animation-duration: 60s; }}.rich-content { color: var(--ink-soft); }/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .dining-grid, .about-content, .contact-container, .location-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .room-feature { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0; }
    .room-feature.flip .rf-media { order: 0; }
    .rf-media img { height: 300px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .gallery-grid { columns: 2; }
}/* ---------- Mobile bottom nav + full-screen menu (Mamaghar pattern) ---------- */
.mob-nav, .mob-menu { display: none; }@media (max-width: 768px) {/* No top header on phones, bottom bar takes over (scoped: never touch .mob-nav) */
    nav.site-nav, body > nav:not(.mob-nav) { display: none; }body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }/* clears the raised Menu button so it never covers footer content */
    /* Hero starts at the very top of the viewport on mobile (only safe-area inset for notched devices) */
    .hero { padding-top: env(safe-area-inset-top, 0); }.page-mast { padding: calc(1.5rem + env(safe-area-inset-top)) 5% 2rem; }.page-hero h1 { font-size: clamp(2.2rem, 11vw, 3rem); }/* No header on phones: kill desktop top cushions */
    .page-top { padding-top: 4.5rem !important; }.about-top { padding-top: 4.5rem; }.info-strip { padding-top: 5rem; }.gallery-section.page-top { padding-top: 4.5rem; }.crumbs-dark { color: #6b6455; }.mob-nav {
        display: flex; align-items: stretch; justify-content: space-around; gap: .2rem;
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1500;
        padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom));
        background: rgba(20,18,13,.96);
        border-top: 1px solid rgba(198,161,91,.35);
        -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    }.mob-nav-item {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .22rem;
        padding: .45rem .1rem; border-radius: 12px;
        color: rgba(250,246,238,.55); font-size: .58rem; font-weight: 700;
        letter-spacing: .08em; text-transform: uppercase;
    }.mob-nav-item i { font-size: 1.05rem; }.mob-nav-item.is-active { color: var(--brass); }.mob-nav-item:active { background: rgba(198,161,91,.1); }.mob-nav-toggle {
        flex: 0 0 auto; align-self: flex-start;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
        width: 58px; height: 58px; margin: -1.7rem .3rem 0; cursor: pointer;
        border-radius: 50%; border: 3px solid var(--ink);
        background: linear-gradient(135deg, #E8CF9A, var(--brass)); color: var(--ink);
        box-shadow: 0 8px 24px rgba(198,161,91,.45);
        font-size: .46rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-body);
    }.mob-nav-a { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1; }.mob-menu {
        position: fixed; inset: 0; z-index: 1600;
        display: grid; place-items: center; text-align: center;
        padding: 2.5rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom));
        background: linear-gradient(165deg, rgba(20,18,13,.98), rgba(46,59,50,.99));
        overflow-y: auto; opacity: 0; visibility: hidden; transform: scale(1.05);
        transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
    }.mob-menu.is-open { opacity: 1; visibility: visible; transform: scale(1); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }.mob-menu-close {
        position: absolute; top: calc(.9rem + env(safe-area-inset-top)); right: .9rem;
        width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
        display: grid; place-items: center; font-size: 1.1rem;
        background: rgba(255,255,255,.06); border: 1px solid rgba(198,161,91,.4); color: var(--ivory);
    }.mob-menu-inner { display: flex; flex-direction: column; align-items: center; }.mob-menu-a { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; color: var(--ink); background: linear-gradient(135deg, #E8CF9A, var(--brass)); margin-bottom: 1.6rem; }.mob-menu-links { display: flex; flex-direction: column; gap: .7rem; }.mob-menu-link { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 7.5vw, 2.4rem); line-height: 1.15; color: var(--ivory); letter-spacing: .02em; }.mob-menu-link.is-active { font-style: italic; color: var(--brass); }.mob-menu-cta { margin-top: 1.7rem; }.mob-menu-tagline { margin-top: 1.1rem; font-size: 1rem; color: var(--brass); letter-spacing: .06em; }}@media (max-width: 768px) {.main-nav ul, ul.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(20,18,13,.97); flex-direction: column; padding: 1.5rem 5% 2rem; gap: 1.2rem; border-bottom: 1px solid rgba(198,161,91,.3); }.main-nav ul.active, ul.main-nav.active { display: flex; }.menu-toggle { display: block; }.nav-cta { display: none; }.scroll-cue { display: none; }.form-row { grid-template-columns: 1fr; }.gallery-grid { columns: 1; }.amenities-list { grid-template-columns: 1fr; }}@media (max-width: 480px) {.footer-grid { grid-template-columns: 1fr; gap: 2rem; }.hero-meta { gap: 1.2rem; }.contact-form-card { padding: 1.6rem; }}/* ---------- Mobile perf + layout bottleneck fixes ---------- */
html, body { overflow-x: clip; }@supports not (overflow: clip) {html, body { overflow-x: hidden; }}@media (max-width: 768px) {body { overscroll-behavior-y: none; }/* Kill GPU-heavy decor on phones */
    .az-orbs, .az-firefly, .hero-grain { display: none !important; }.dining-image { animation: none; }.hero-bg-zoom { animation-duration: 26s; }.marquee-track { animation-duration: 46s; }.footer-giant { animation: none; }#az-progress { animation: none; }/* Skip off-screen render cost */
    .rooms-section, .dining-section, .az-quotes, .values-section, .facts-section, .facility-section, .compare-section, .menu-section { content-visibility: auto; contain-intrinsic-size: auto 700px; }/* Bring LCP up: no-header pages don't need a 4.5rem hole */
    .page-top { padding-top: 2.2rem !important; }.about-top { padding-top: 2.2rem; }.info-strip { padding-top: 2.6rem; }.gallery-section.page-top { padding-top: 2.2rem; }/* Carousels: breathing room + snap stop */
    .rooms-grid, .gallery-grid { scroll-padding: 0 5%; overscroll-behavior-x: contain; }.rooms-grid .room-card { min-width: min(82vw, 340px); scroll-snap-stop: always; }.gallery-grid .gallery-item { min-width: min(76vw, 320px); scroll-snap-stop: always; }/* Lighter bottom bar */
    .mob-nav { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }.mob-nav-item { min-height: 56px; font-size: .62rem; }/* Fix floating-button stack above the bottom nav */
    /* Touch targets */
    .bw-search { min-height: 52px; }.booking-widget input, .booking-widget select, .contact-form-card input, .contact-form-card select, .contact-form-card textarea { min-height: 48px; }.bw-guests select { min-height: 48px; }}/* Bottom nav: safety, never stay hidden with an overlay open */
html:has(.mob-menu.is-open) .mob-nav.mob-hidden, html:has(#tableModal.open) .mob-nav.mob-hidden, html:has(.dg-lb.open) .mob-nav.mob-hidden { transform: none; }/* ==========================================
   NEXT LEVEL, same DNA, sharper execution
   ========================================== */
::selection { background: var(--brass); color: var(--ink); }::-webkit-scrollbar { width: 10px; }::-webkit-scrollbar-track { background: var(--ivory); }::-webkit-scrollbar-thumb { background: var(--forest); border-radius: 8px; border: 2px solid var(--ivory); }/* Scrolled nav: glass + brass hairline */
nav.site-nav.scrolled { background: rgba(20,18,13,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(198,161,91,.28); box-shadow: 0 12px 32px rgba(0,0,0,.28); }nav.site-nav.scrolled .nav-container { height: 64px; }/* Display type: tighter + editorial */
h1, h2 { letter-spacing: -.015em; }.kicker { display: inline-flex; align-items: center; gap: .6rem; }.kicker::before { content: ''; width: 22px; height: 1px; background: var(--brass); display: inline-block; }.sec-index { letter-spacing: .3em; }/* Buttons: inner highlight + press */
.btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 30px -12px rgba(198,161,91,.6); }.btn-primary:active { transform: translateY(1px); }.btn-outline { backdrop-filter: blur(4px); }/* Cards: hairline + depth */
.room-card, .highlight-card, .sign-card, .team-card { border: 1px solid rgba(198,161,91,.16); box-shadow: var(--shadow-md); }.room-card:hover, .highlight-card:hover { box-shadow: var(--shadow-lg); }/* Coherent warm grade on imagery */
.rf-media img, .room-media img, .room-card > img, .highlight-card img, .dining-image { filter: saturate(1.06) contrast(1.03); }.rf-media::after, .room-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 10%, transparent 60%, rgba(20,18,13,.22)); }/* Marquee edge fade */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }/* CTA glow */
.cta-banner { position: relative; }.cta-banner::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 60% at 50% 40%, rgba(198,161,91,.14), transparent 70%); }/* Booking widget premium edge */
.booking-widget { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08); }.booking-widget input, .booking-widget select { transition: border-color .25s, box-shadow .25s; }.booking-widget input:focus, .booking-widget select:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(198,161,91,.25); outline: none; }/* ---------- Mobile next-level pack ---------- */
html { -webkit-tap-highlight-color: transparent; }@media (max-width: 768px) {/* Bottom nav auto-hides on scroll down, returns on scroll up */
    .mob-nav { transition: transform .35s ease; }.mob-nav.mob-hidden { transform: translateY(110%); }/* Rooms become a swipeable snap carousel */
    .rooms-grid { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -5%; padding: 0 5% 1rem; scrollbar-width: none; }.rooms-grid::-webkit-scrollbar { display: none; }.rooms-grid .room-card { min-width: 82vw; scroll-snap-align: center; }/* Gallery becomes a swipeable filmstrip */
    .gallery-grid { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; columns: auto; margin: 0 -5%; padding: 0 5% 1rem; scrollbar-width: none; }.gallery-grid::-webkit-scrollbar { display: none; }.gallery-grid .gallery-item { min-width: 76vw; margin-bottom: 0; scroll-snap-align: center; }/* Table popup becomes a bottom sheet */
    #tableModal { place-items: end center; padding: 0; }#tableModal .tm-card { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; transform: translateY(60px); }#tableModal.open .tm-card { transform: none; }#tableModal .tm-card::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.35); margin: 0 auto .6rem; }#roomModal { place-items: end center; padding: 0; }#roomModal .rm-card { border-radius: 22px 22px 0 0; }/* No iOS auto-zoom on form fields */
    input, select, textarea { font-size: 16px !important; }.bw-search, .btn { min-height: 46px; }/* Fat-finger lightbox arrows */
    .lb-nav { width: 56px; height: 56px; }/* Tighter hero for small screens */
    .hero-actions .btn { flex: 1 1 auto; text-align: center; }.hero-meta { font-size: .85rem; }}/* ---------- Touch devices: no sticky hover lift (tap leaves :hover stuck) ---------- */
@media (hover: none) {
    .highlight-card:hover, .room-card:hover, .sign-card:hover, .value-card:hover,
    .team-card:hover, .gallery-item:hover, .btn:hover, .bw-search:hover { transform: none !important; }
    .highlight-card:hover img, .room-card:hover img, .room-card:hover > img { transform: none !important; }
}/* ---------- Mobile home-page finesse (desktop untouched) ---------- */
@media (max-width: 768px) {
    .hero { padding-top: calc(4.5rem + env(safe-area-inset-top)); padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
    .hero h1 { font-size: clamp(2.35rem, 11vw, 3.2rem); margin-bottom: 1rem; }
    .hero-copy p { font-size: .95rem; }
    .hero-eyebrow { font-size: .62rem; }
    .hero-meta { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; }
    .hero-widget { max-width: none; min-width: 0; }
    .hero-widget .booking-widget { width: 100%; max-width: 100%; padding: 1.4rem; overflow: hidden; }
    .bw-guests { gap: .6rem; }
    .bw-guests label { white-space: normal; font-size: .6rem; line-height: 1.4; min-height: 2.1em; }
    .bw-guests select { padding: .8rem .4rem; }
    .highlight-card img { height: 180px; }
    .highlight-card-body { padding: 1.4rem; }
    .room-card > img, .room-media img { height: 210px; }
    .room-content { padding: 1.4rem; }
    .room-cta { display: flex; gap: .6rem; flex-wrap: wrap; }
    .room-cta .btn { flex: 1 1 140px; text-align: center; }
    .cta-banner { padding: 3.5rem 5%; }
    .cta-banner h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
    /* Hero booking form: compact 3-across guests instead of a long stack */
    .hero-widget .booking-widget form { gap: .65rem; }
    .hero-widget .bw-guests { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .55rem; grid-column: 1 / -1; margin-top: 0; }
    .hero-widget .bw-guests label { min-height: 0; margin-bottom: .25rem; }
    .hero-widget .bw-guests select { padding: .7rem 1.5rem .7rem .5rem; font-size: .85rem; }
    .dining-image { min-height: 240px; }
    .testimonial blockquote { font-size: clamp(1.2rem, 5.4vw, 1.6rem); }
    .marquee { font-size: .8rem; }
    .footer-giant { margin-bottom: 1.5rem; }
    .section-head h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}/* ==========================================
   DESIGN SYSTEM v2, Premium refinements
   Brand tokens · a11y · CLS · conversion blocks
   ========================================== */
:root {
    --champagne: #E8CF9A;
    --espresso: #0F0D09;
    --success: #2E5233;
    --nav-h: 76px;
}html { scroll-padding-top: calc(var(--nav-h) + 14px); }/* Accessibility: visible focus for keyboard users */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }.btn:focus-visible, .bw-search:focus-visible, .mob-nav-item:focus-visible { outline-offset: 4px; }/* Skip link */
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 2100; background: var(--brass); color: var(--ink); padding: .8rem 1.4rem; border-radius: 0 0 10px 10px; font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; transition: top .3s var(--ease); }.skip-link:focus { top: 0; color: var(--ink); }/* ---------- Booking widget: template-navy → brand forest ---------- */
.booking-widget { background: linear-gradient(165deg, #26332B 0%, var(--forest-deep) 68%); border: 1px solid rgba(198,161,91,.28); }.booking-widget h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: .02em; }.bw-static-val { background: rgba(250,246,238,.06); border: 1px solid rgba(198,161,91,.4); }.bw-search { background: linear-gradient(180deg, var(--champagne), var(--brass)); color: var(--ink); box-shadow: 0 4px 0 var(--brass-deep); }.bw-search:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--brass-deep); }.bw-search:active { transform: translateY(2px); box-shadow: 0 0 0 var(--brass-deep); }.bw-code summary:hover { color: var(--champagne); }/* ---------- Hero trust microline ---------- */
.hero-trust { display: flex; flex-wrap: wrap; gap: .55rem 1.7rem; margin-top: 1.7rem; font-size: .78rem; letter-spacing: .05em; color: rgba(250,246,238,.68); }.hero-trust span { display: inline-flex; align-items: center; gap: .5rem; }.hero-trust i { color: var(--brass); font-size: .82rem; }

.quick-booking-strip {
    position: relative;
    z-index: 5;
    margin-top: -1.1rem;
    padding: 0 5% 0;
}
.quick-booking-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: var(--max-width);
    margin: 0 auto;
}
.quick-book-card {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 110px;
    padding: 1.3rem 1.5rem;
    border: 1px solid rgba(18,25,20,.14);
    border-radius: 1.4rem;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(16,14,10,.08);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.quick-book-card:hover {
    transform: translateY(-4px);
    border-color: rgba(198,161,91,.4);
    box-shadow: 0 18px 28px rgba(16,14,10,.12);
}
.quick-book-card span {
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    /* .62 measured 4.49:1 against the card's composited backdrop, a hair under
       the 4.5:1 floor. .66 clears it at 5.09:1 and still reads as a soft
       secondary label rather than body text. */
    color: rgba(13,38,35,.66);
}

.quick-book-card strong {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.05;
}

/* ---------- Trust bar (real facts, count-up ready) ---------- */
.az-trust { background: var(--ink); border-top: 1px solid rgba(198,161,91,.22); }.az-trust-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(198,161,91,.18); }.az-trust .stat { background: var(--ink); padding: 1.7rem 1.5rem; display: flex; gap: 1rem; align-items: flex-start; }.az-trust .stat i { color: var(--brass); font-size: 1.15rem; margin-top: .3rem; }.az-trust .stat b { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: #fff; line-height: 1.15; }.az-trust .stat b small { font-size: .9rem; color: rgba(250,246,238,.7); }.az-trust .stat span { display: block; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(250,246,238,.52); margin-top: .25rem; }@media (max-width: 900px) {.az-trust-inner { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 520px) {.az-trust .stat { padding: 1.1rem 1rem; }.az-trust .stat b { font-size: 1.25rem; }.quick-booking-inner { grid-template-columns: 1fr; }.quick-book-card { min-height: 88px; }}/* ---------- Testimonial rotator ---------- */
.az-quotes { background: var(--ivory); padding: var(--space-xxl) 5%; position: relative; }.az-quote-wrap { max-width: 880px; margin: 0 auto; }.az-quote { display: none; text-align: center; max-width: 820px; margin: 0 auto; }.az-quote.active { display: block; animation: azQuoteIn .8s var(--ease) both; }@keyframes azQuoteIn {from { opacity: 0; transform: translateY(16px); }to { opacity: 1; transform: none; }}.az-quote-stars { color: var(--brass); letter-spacing: .35em; margin-bottom: 1.3rem; font-size: .9rem; }.az-quote blockquote { background: transparent; border: 0; padding: 0; margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 3.4vw, 2.1rem); font-style: italic; line-height: 1.4; color: var(--ink); }.az-quote blockquote em { color: var(--brass-deep); }.az-quote cite { display: block; margin-top: 1.2rem; font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-style: normal; }.az-quote-dots { display: flex; gap: .65rem; justify-content: center; margin-top: 1.8rem; }.az-quote-dots button { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--brass-deep); background: transparent; cursor: pointer; padding: 0; transition: background .3s, transform .3s; }.az-quote-dots button[aria-selected="true"] { background: var(--brass); transform: scale(1.25); }.az-review-cta { text-align: center; margin-top: 2.2rem; }/* ---------- FAQ accordion ---------- */
.az-faq { max-width: 780px; margin: 0 auto; display: grid; gap: .8rem; }.az-faq details { background: #FFFDF8; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .3s, box-shadow .3s; }.az-faq details[open] { border-color: var(--brass); box-shadow: var(--shadow-md); }.az-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; font-weight: 600; font-size: .98rem; color: var(--ink); margin: 0; }.az-faq summary::-webkit-details-marker { display: none; }.az-faq summary i { color: var(--brass-deep); transition: transform .35s var(--ease); flex: 0 0 auto; }.az-faq details[open] summary i { transform: rotate(45deg); }.az-faq .az-faq-a { padding: 0 1.4rem 1.35rem; color: var(--ink-soft); font-size: .95rem; font-weight: 300; }.az-faq .az-faq-a p { margin: 0; }/* ---------- Lead magnet ---------- */
.az-lead { background: var(--forest-deep); padding: var(--space-xxl) 5%; position: relative; overflow: hidden; }.az-lead::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 78% 22%, rgba(198,161,91,.16), transparent 65%); pointer-events: none; }.az-lead-grid { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; position: relative; }.az-lead .kicker { color: var(--brass); }.az-lead h2 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.4rem); }.az-lead-copy p { color: rgba(250,246,238,.75); font-weight: 300; }.az-lead-points { list-style: none; display: grid; gap: .75rem; margin: 1.4rem 0 0; padding: 0; }.az-lead-points li { display: flex; gap: .8rem; align-items: center; font-size: .95rem; color: rgba(250,246,238,.85); }.az-lead-points i { color: var(--brass); }.az-lead-form { background: rgba(250,246,238,.05); border: 1px solid rgba(198,161,91,.32); border-radius: var(--radius-lg); padding: 2rem; backdrop-filter: blur(6px); }.az-lead-form h3 { color: #fff; font-size: 1.45rem; }.az-lead-form input { background: rgba(250,246,238,.95); border-color: transparent; }.az-lead-form .btn { width: 100%; }.az-lead-note { font-size: .76rem; color: rgba(250,246,238,.55); margin: .8rem 0 0; }.az-lead-alt { margin-top: 1.1rem; text-align: center; font-size: .86rem; color: rgba(250,246,238,.6); }.az-lead-alt a { color: var(--brass); font-weight: 600; }.az-lead-alt a:hover { color: var(--champagne); }@media (max-width: 900px) {.az-lead-grid { grid-template-columns: 1fr; gap: 2rem; }}/* ---------- CLS: reserve media space before images load ---------- */
.highlight-card img { aspect-ratio: 4 / 3; object-fit: cover; }.room-media img { aspect-ratio: 3 / 2; object-fit: cover; }.sign-card img { aspect-ratio: 4 / 3; object-fit: cover; }.gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; }/* ---------- Reduced motion: calm everything ---------- */
@media (prefers-reduced-motion: reduce) {
    .marquee-track, .dining-image, .hero-bg-zoom, .hero-grain, .az-quote.active { animation: none !important; }
    .bw-search, .btn, .az-quote-dots button { transition: none; }
}/* ---------- Tablet nav (769–1024px): inline links + buttons overflow → hamburger takes over ---------- */
@media (max-width: 1024px) {
    .main-nav ul, ul.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(20,18,13,.97); flex-direction: column; padding: 1.5rem 5% 2rem; gap: 1.2rem; border-bottom: 1px solid rgba(198,161,91,.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
    .main-nav ul.active, ul.main-nav.active { display: flex; }
    .main-nav ul a, ul.main-nav a { font-size: .82rem; }
    .menu-toggle { display: block; font-size: 1.5rem; }
    .nav-cta { display: none; }
    .btn-table-gold { padding: .55rem 1.1rem; font-size: .7rem; letter-spacing: .08em; }
}/* ==========================================
   UI POLISH v3, nav state, a11y, touch, modal
   ========================================== */
.main-nav a.is-active { color: #fff; }.main-nav a.is-active::after { width: 100%; }.nav-container { flex-wrap: nowrap; }.nav-container .btn-table-gold { flex: none; }@media (max-width: 1180px) {.nav-container .btn-table-gold { display: none; }}.mob-menu .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }h2 { text-wrap: balance; }img { image-rendering: auto; }/* Reveal: visible by default, hidden only when JS runs (no-JS safe) */
.reveal { opacity: 1; transform: none; }html.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }html.js .reveal.visible { opacity: 1; transform: none; }/* Footer giant: fallback for non-webkit + softer stroke */
.footer-giant { color: rgba(198,161,91,.14); }@supports (-webkit-text-stroke: 1px black) {.footer-giant { color: transparent; -webkit-text-stroke: 1px rgba(198,161,91,.35); }}/* Touch targets: 44px minimum */
.social-icons a { width: 44px; height: 44px; }.menu-toggle { min-width: 44px; min-height: 44px; }/* Alerts + invalid fields */
.alert { display: flex; gap: .6rem; align-items: flex-start; border-width: 1px; }.alert.success { border-left: 4px solid #2E5233; }.alert.error { border-left: 4px solid #8C2F26; }input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179,38,30,.14); }button:disabled, .btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }/* Cards: consistent lift + price legibility */
.room-card, .highlight-card, .sign-card, .team-card, .facility-card, .value-card { will-change: auto; }.room-price-badge { text-shadow: 0 1px 8px rgba(0,0,0,.4); }/* Gallery touch: captions readable without hover */
@media (hover: none) {
  .gallery-item::after { opacity: 1; }
  .gallery-caption { opacity: 1; transform: none; }


}/* Compare table on small screens */
.compare-scroll { -webkit-overflow-scrolling: touch; }@media (max-width: 640px) {.compare-table th, .compare-table td { padding: .8rem .9rem; font-size: .85rem; }}/* Table modal: blur backdrop, fixed close, slot focus */
#tableModal { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }#tableModal .tm-card { position: relative; }#tableModal .tm-x { position: absolute; top: .8rem; right: .8rem; margin: 0; display: grid; place-items: center; }#tableModal .tm-x:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }.slot-pills button:focus-visible { outline: 2px solid #E8CF9A; outline-offset: 2px; }.slot-pills button.on { box-shadow: 0 2px 10px rgba(198,161,91,.4); }/* Chat: safe-area + readability */
#liveBtn { bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); }#livePanel { max-height: min(560px, calc(100dvh - 10rem)); }#liveMsgs .m { overflow-wrap: anywhere; }/* Sticky pill + back-to-top: never overlap chat */
@media (max-width: 768px) {.nav-container { gap: .8rem; }.brand-logo { height: 38px; }.hero-widget .booking-widget { border-radius: 16px; box-shadow: var(--shadow-lg); }.info-card { padding: 1.25rem; }}/* ==========================================================================
   Accessibility fixes (audit)
   --------------------------------------------------------------------------
   .live-input input had `outline:none` and NO replacement, so the only way to
   type a chat message had no keyboard focus indicator at all (WCAG 2.4.7).
   The existing :focus box-shadows elsewhere sat at 18% alpha (below the 3:1
   contrast WCAG 2.2 SC 2.4.11 requires), and fired on mouse click too.
   ========================================================================== */
.live-input input:focus-visible, .live-input input:focus {
  outline: 2px solid #C6A15B;
  outline-offset: 2px;
}.live-input input:focus:not(:focus-visible) { outline: none; }/* The preloader must never trap the page when JS is unavailable. */
html:not(.js) #az-preloader { display: none !important; }/* The skip link's target is created at runtime by footer.php, so with JS off it
   jumped nowhere. This gives it a real target on the page itself. */
#azMain:focus { outline: none; }/* Reserve the hero banner box so it cannot shift layout on load (CLS). */
.page-banner img { width: 100%; aspect-ratio: 24 / 7; height: auto; }.page-banner { min-height: 1px; }/* Comparison tables: make the header row legible to assistive tech. */
.avail-table caption { text-align: left; padding: .5rem 0; color: var(--brass, #C9A922); font-weight: 600; }/* Footer column headings were <h4> with no h2/h3 ancestor. */
.site-footer h2.footer-h, footer h2.footer-h {
  font-family: inherit; font-size: .82rem; letter-spacing: .18em;
  text-transform: uppercase; margin: 0 0 .9rem;
}/* Content available to screen readers but not shown visually. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}/* =============================================================
   RESTAURANT DAILY PHOTOS (album + lightbox)
   Public page: /daily-gallery.php
   ============================================================= */

/* ---- Album cover ---- */
.dg-cover-section { padding-block: var(--space-lg) 0; }.dg-cover {
    position: relative;
    display: block;
    block-size: clamp(220px, 34vw, 380px);
    border-radius: var(--r-2xl);
    overflow: clip;
    box-shadow: var(--e4);
    isolation: isolate;
}.dg-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }.dg-cover-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,18,13,.05) 30%, rgba(20,18,13,.78) 100%);
    transition: opacity var(--dur-md) var(--ease);
}.dg-cover:hover .dg-cover-scrim { opacity: .82; }.dg-cover-meta {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--space-lg);
    color: #fff;
    display: grid;
    gap: .15rem;
}.dg-cover-meta b { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.1; }.dg-cover-meta span { font-size: var(--fs-xs); color: rgba(255,255,255,.78); letter-spacing: .04em; }.dg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: clamp(.4rem, 1vw, .7rem);
}.dg-tile {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: var(--bg-sunken);
    border-radius: var(--r-md);
    overflow: clip;
    cursor: zoom-in;
    aspect-ratio: 1;
    box-shadow: var(--e1);
    transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease);
}.dg-tile img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-xl) var(--ease); }.dg-tile:hover { transform: translateY(-3px); box-shadow: var(--e4); }.dg-tile:hover img { transform: scale(1.06); }.dg-tile:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }.dg-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20,18,13,.18);
    opacity: 0;
    transition: opacity var(--dur-md) var(--ease);
}.dg-tile:hover::after { opacity: 1; }@media (max-width: 720px) {.dg-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }}/* ---- Lightbox ---- */
.dg-lb {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    opacity: 0;
    visibility: hidden;
    /* `visibility` is delayed to the END of the fade on the way out, and flips
       instantly on the way in.
       This is the whole reason the delay is written this way round. With visibility
       in the transition list unqualified, as this was, Chrome holds the overlay at
       `hidden` for the length of the transition before flipping it to `visible`, so
       the script's `closeBtn.focus()` ran while the whole dialog was still
       unfocusable and silently did nothing. Opening a photo therefore left focus on
       the photo behind the overlay: a keyboard user pressed Enter, saw the viewer, and
       then tabbed through the page underneath it instead of around the X. The fade
       itself is unaffected; only the moment the element becomes focusable moves. */
    transition: opacity var(--dur-md) var(--ease), visibility 0s linear var(--dur-md);
}
.dg-lb.open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-md) var(--ease), visibility 0s;
}.dg-lb-aura { position: absolute; inset: 0; background: rgba(11,10,7,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }.dg-lb-stage {
    position: relative;
    z-index: 1;
    margin: 0;
    max-inline-size: min(1200px, 100%);
    max-block-size: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}.dg-lb-stage img {
    max-inline-size: 100%;
    max-block-size: calc(100vh - 12rem);
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    margin-inline: auto;
    border-radius: var(--r-md);
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
}.dg-lb-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    color: rgba(255,255,255,.86);
    font-size: var(--fs-sm);
    flex-wrap: wrap;
}.dg-lb-text { font-family: var(--font-display); font-size: var(--fs-lg); }.dg-lb-actions { display: inline-flex; align-items: center; gap: var(--space-md); margin-inline-start: auto; }.dg-lb-count { font-size: var(--fs-2xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: rgba(255,255,255,.55); }.dg-lb-dl {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .45rem .9rem;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
    transition: background var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}.dg-lb-dl:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }.dg-lb-dl[hidden] { display: none; }.dg-lb-btn {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: 2.9rem;
    block-size: 2.9rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    background: rgba(20,18,13,.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}.dg-lb-btn:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }.dg-lb-close { inset-block-start: 1rem; inset-inline-end: 1rem; }.dg-lb-prev { inset-inline-start: 1rem; inset-block-start: 50%; transform: translateY(-50%); }.dg-lb-next { inset-inline-end: 1rem; inset-block-start: 50%; transform: translateY(-50%); }.dg-lb-prev:hover, .dg-lb-next:hover { transform: translateY(-50%) scale(1.06); }@media (max-width: 640px) {.dg-lb { padding: .75rem; }/* 2.75rem = 44px, not the 2.5rem (40px) this used to be. On a phone the X is
       the only way out of a photo (there is no Escape key to press), and 40px is under
       the 44px minimum touch target, so the one control that matters most on a small
       screen was the smallest one on it. */.dg-lb-btn { inline-size: 2.75rem; block-size: 2.75rem; }.dg-lb-prev { inset-inline-start: .4rem; }.dg-lb-next { inset-inline-end: .4rem; }.dg-lb-stage img { max-block-size: calc(100vh - 14rem); }}@media (prefers-reduced-motion: reduce) {.dg-tile, .dg-tile img, .dg-cover-scrim, .dg-lb, .dg-lb-btn { transition: none !important; }.dg-tile:hover, .dg-tile:hover img { transform: none; }}/* ---- Photos & albums: the album grid ----------------------------------
   Laid out to match the Facebook Photos & albums screen in the reference
   shot: a responsive grid of square covers, with the album name and an
   "N items" count stacked directly beneath each cover. ------------------------ */
.dg-albums {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: clamp(1.2rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.6rem);
}.dg-album {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: .3rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius, 10px);
}.dg-album-cover {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius, 10px);
    background: var(--sand, #EFE7D8);
    box-shadow: var(--e1);
    transition: transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
}.dg-album-cover img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--dur-xl) var(--ease);
}.dg-album:hover .dg-album-cover { transform: translateY(-3px); box-shadow: var(--e4); }.dg-album:hover .dg-album-cover img { transform: scale(1.06); }.dg-album:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }.dg-album-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(20, 18, 13, .3);
    font-size: 2rem;
}/* Album name: two lines max, then ellipsis, matches how Facebook keeps
   every tile the same height regardless of how long the name is. */
.dg-album-name {
    margin-block-start: .55rem;
    font-size: var(--fs-sm, .9rem);
    font-weight: 600;
    line-height: 1.32;
    color: var(--ink, #14120D);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}.dg-album-count {
    font-size: var(--fs-xs, .78rem);
    color: var(--muted, #6B6459);
}/* ---- Single-album view ---- */
.dg-album-title { font-size: var(--fs-2xl, 2.2rem); line-height: 1.15; overflow-wrap: anywhere; }.dg-album-sub { margin-block-start: .5rem; color: var(--muted, #6B6459); font-size: var(--fs-sm, .9rem); }.dg-back { margin-block-end: var(--space-lg, 2rem); font-size: var(--fs-sm, .9rem); }.dg-back a { color: var(--ink-2, #3A352B); }.dg-back a:hover { color: var(--brass-deep, #7E622F); }@media (max-width: 560px) {.dg-albums { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }.dg-album-title { font-size: var(--fs-xl, 1.6rem); }}
/* ---- Homepage gallery covers open in the shared photo lightbox. ---- */
.gallery-item-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(20,18,13,.08));
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.gallery-item-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 10px 28px rgba(20,18,13,.16)); }
.gallery-item-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* The count sits under the album name, matching the album tiles. */
.gallery-item-link .gallery-count {
    display: block;
    margin-block-start: .18rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brass-light, #E4C88A);
}
/* On touch there is no hover, so the caption and count must always be visible. */
@media (hover: none) {
    .gallery-item-link .gallery-caption { opacity: 1; transform: none; }
    .gallery-item-link::after { opacity: 1; }
}

/* ---------- Photo strip: a row of real frames on the inner pages ----------
   Rendered by includes/photo-strip.php. One row of six, scrolling sideways on
   a phone rather than stacking six 500px-tall blocks.
   ------------------------------------------------------------------------ */
.az-strip { padding-block: var(--space-xl); }
.az-strip .section-head { margin-block-end: 2.4rem; }
.az-strip-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .9rem;
}
.az-strip-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--sand);
    aspect-ratio: 3 / 4;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(20,18,13,.08));
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.az-strip-item img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease), filter .45s var(--ease);
}
.az-strip-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 10px 28px rgba(20,18,13,.16)); }
.az-strip-item:hover img { transform: scale(1.06); }
.az-strip-item:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.az-strip-cap {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 1.6rem .9rem .8rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.35;
    color: #fff;
    text-align: start;
    background: linear-gradient(to top, rgba(16,14,10,.9), rgba(16,14,10,.5) 45%, transparent);
}
@media (max-width: 992px) { .az-strip-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
    /* Six 3:4 tiles will not fit on a phone; a snap rail keeps them one row. */
    .az-strip-row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-block-end: .6rem;
        margin-inline: calc(var(--space-md) * -1);
        padding-inline: var(--space-md);
    }
    .az-strip-item { flex: 0 0 68%; scroll-snap-align: center; }
}

/* ---------- Availability: book a room, not an enquiry ----------
   The availability page used to end in a link to the contact form, so a guest
   who had already chosen dates and a room had to retype everything and wait to
   be told whether it was free. It is now a disclosure form on the result card,
   with a confirmation panel above the results.
   ------------------------------------------------------------------------ */
.avail-book { margin-top: 1.25rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.avail-book > summary {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
}
.avail-book > summary::-webkit-details-marker { display: none; }
.avail-book-cta {
    display: inline-flex;
    align-items: center;
    padding: .75rem 1.5rem;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--ivory);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
    transition: background-color var(--dur-sm) var(--ease);
}
.avail-book > summary:hover .avail-book-cta { background: var(--brass); color: var(--ink); }
.avail-book[open] > summary .avail-book-cta { background: var(--brass-deep); color: #fff; }
.avail-book-form { margin-top: 1.1rem; display: grid; gap: .3rem; }
.avail-book-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 .5rem; }

.book-done {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    align-items: start;
    border: 1px solid var(--brass);
    border-radius: var(--r-lg);
    background: var(--paper-50);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.book-done h2 { font-size: var(--fs-xl); color: var(--ink); margin-bottom: .35rem; }
.book-done p { color: var(--ink-soft); font-size: var(--fs-sm); }
.book-done p + p { margin-top: .35rem; }
.book-done-tick {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    background: var(--brass);
    color: var(--ink);
    font-size: 1.1rem;
}
.book-done-code b { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: .04em; color: var(--ink); }
.book-done-total em { color: var(--brass-deep); font-style: normal; font-weight: 600; }

/* ---------- The menu ----------
   A resort menu card, styled like the printed menu reference with a green-and-cream
   paper finish, tight two-column typography, and a richer, more editorial rhythm.
   -------------------------------------------------------------------------- */
body.menu-page #azMain {
    position: relative;
    /* No z-index here on purpose. This rule used to carry z-index:1, which made
       <main> a stacking context and trapped the printed menu's theater panel
       (position:fixed, z-index:10000) inside it. The panel then competed only with
       <main>'s siblings, so the sticky tab bar and the footer painted over it, and
       because the panel is a child of <main> it scrolled away instead of covering the
       viewport. Raising the panel above 10000 could not fix it: the panel is clipped to
       its own stacking context, not to the document. <main> needs its painting for the
       two ::before/::after gradients below, which position:relative already gives it. */
    padding: 0 0 4rem;
    background:
        radial-gradient(ellipse at 84% 0%, rgba(221,226,190,.6), transparent 38%),
        linear-gradient(180deg, #f4f1e5 0%, #e8ebd0 100%);
    overflow: hidden;
}
body.menu-page #azMain::before,
body.menu-page #azMain::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 180px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7,78,61,0) 0%, rgba(7,78,61,0.22) 100%);
}
body.menu-page #azMain::after {
    inset: auto 0 0 0;
    height: 120px;
    background:
        linear-gradient(180deg, rgba(17,78,58,0) 0%, rgba(18,95,63,.22) 100%),
        radial-gradient(ellipse at 50% 100%, rgba(12,65,52,.15), transparent 60%);
}

.menu-hero {
    position: relative;
    padding: calc(7.2rem + env(safe-area-inset-top)) 4vw 2rem;
    color: #10231d;
    overflow: visible;
}
.menu-hero-bg,
.menu-hero::after { display: none; }
.menu-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .8fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5.5rem);
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4.5rem);
    border-radius: 1.8rem;
    border: 1px solid rgba(31,51,43,.12);
    background: linear-gradient(120deg, rgba(255,255,255,.78), rgba(247,246,232,.67));
    box-shadow: 0 22px 70px rgba(38,47,33,.09), inset 0 1px 0 rgba(255,255,255,.8);
    text-align: left;
}
.menu-hero-copy { max-width: 640px; }
.menu-hero .crumbs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .65rem;
    margin-bottom: 2.1rem;
    color: #65715f;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.menu-hero .crumbs a,
.menu-hero .crumbs a:visited { color: #65715f; }
.menu-hero .crumbs a:hover { color: #123e38; }
.menu-hero .kicker {
    margin-bottom: .85rem;
    color: #7e622f;
    font-size: .68rem;
    letter-spacing: .2em;
}
.menu-hero .kicker::before { width: 1.6rem; }
.menu-hero .kicker span { color: #b39558; }
.menu-hero h1 {
    max-width: 10ch;
    margin: 0;
    color: #173c35;
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(3.4rem, 6.7vw, 6.5rem);
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: .88;
}
.menu-hero h1 em {
    color: #7c8a56;
    font-style: italic;
    font-weight: 500;
}
.menu-hero p {
    max-width: 38rem;
    margin: 1.3rem 0 0;
    color: #536253;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    font-weight: 400;
}
.menu-hero-meta {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.15rem;
    color: #77806c;
    font-size: .75rem;
    letter-spacing: .08em;
}
.menu-hero-meta i { color: #a28342; }
.menu-hero-actions {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.8rem;
}
.menu-hero-photo {
    position: relative;
    aspect-ratio: 4 / 4.5;
    min-height: 360px;
    margin: 0;
    overflow: hidden;
    border-radius: 1.3rem;
    background: #cdd4a1;
    box-shadow: 0 20px 45px rgba(22,38,30,.18);
}
.menu-hero-photo::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(180deg, transparent, rgba(10,31,25,.72));
    pointer-events: none;
}
.menu-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.menu-hero-photo:hover img { transform: scale(1.035); }
.menu-hero-photo figcaption {
    position: absolute;
    z-index: 1;
    inset: auto 1.4rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.menu-hero-photo figcaption i {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;
}
.menu-hero .btn,
.menu-hero .btn-outline,
.menu-hero .btn-primary,
.menu-hero .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    padding: .9rem 1.6rem;
    border-radius: 999px;
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    border: 1px solid rgba(17,24,18,.26);
}
.menu-hero .btn-primary {
    background: rgba(14,22,18,.94);
    color: #f6f4ea;
    border-color: rgba(14,22,18,.94);
}
.menu-hero .btn-outline,
.menu-hero .btn-ghost {
    background: rgba(255,255,255,.12);
    color: #14352d;
}
body.menu-page .menu-hero .btn-outline { color: #14352d; border-color: rgba(17,24,18,.26); }
body.menu-page .menu-hero .btn-outline::before { background: #14352d; }
body.menu-page .menu-hero .btn-outline:hover { color: #f6f4ea; border-color: #14352d; }

.menu-tabs {
    position: sticky;
    top: calc(var(--nav-h, 76px) - .25rem);
    z-index: 30;
    padding: .7rem 4vw;
    background: rgba(244,241,229,.9);
    border-bottom: 1px solid rgba(48,68,48,.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.menu-tabs .max-width-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: 1240px;
    padding: .55rem .65rem .55rem 1.1rem;
    border: 1px solid rgba(34,57,42,.1);
    border-radius: 1rem;
    background: rgba(255,255,255,.6);
    box-shadow: 0 8px 25px rgba(26,42,30,.06);
}
.menu-tabs-label {
    display: grid;
    gap: .08rem;
    color: #7c846e;
}
.menu-tabs-label span {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.menu-tabs-label strong {
    color: #1b3f36;
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
}
.menu-tabs-options {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem;
    border-radius: .8rem;
    background: #eff0e2;
}
.menu-tabs-note {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #697562;
    font-size: .68rem;
    letter-spacing: .04em;
}
.menu-tabs-note i { color: #8b9b68; }
.menu-tabs-options .menu-tab {
    padding: .75rem 1rem;
    border: 0;
    border-radius: .6rem;
    color: #63705e;
    font-size: .68rem;
    letter-spacing: .1em;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.menu-tabs-options .menu-tab i { font-size: .85rem; }
.menu-tabs-options .menu-tab:hover { color: #183c34; }
.menu-tabs-options .menu-tab.is-active {
    color: #f7f5ec;
    background: #203c31;
    border: 0;
    box-shadow: 0 4px 10px rgba(24,52,39,.15);
}
.menu-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    color: #63705e;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
}
.menu-tab:hover { color: #183c34; }
.menu-tab.is-active { color: #f7f5ec; background: #203c31; }
.menu-tab span {
    /* Was #a2864a, measured at 3.02:1 on the menu's #eff0e2 background, well
       under the 4.5:1 WCAG AA floor for small text. This is the same brass hue
       taken down in lightness; it reads as 4.83:1, so it passes with margin
       rather than sitting on the line. The active-tab override below is a
       light gold on dark green and was already compliant. */
    color: #7d6531;
    font-size: .66rem;
    letter-spacing: .04em;
}

.menu-tabs-options .menu-tab.is-active span { color: #e7ca82; }

.menu-signatures {
    display: none;
}

.menu-body {
    position: relative;
    /* No z-index: this section wraps the printed menu panel, so z-index here made it a
       stacking context and trapped the theater panel (position:fixed; z-index:10000)
       inside it. The sticky tab bar and the footer then painted over the panel, and the
       panel scrolled away with the page instead of covering the viewport. The tab bar
       carries z-index:30 of its own and still sits above this section's content, which
       is all this z-index:1 was ever buying. */
    padding: 1.8rem 3vw 0;
}
.menu-search {
    max-width: 48rem;
    margin: 0 auto 2rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(28,50,38,.18);
    border-radius: 1rem;
    background: rgba(255,255,255,.28);
}
.menu-search > label {
    display: block;
    margin-bottom: .4rem;
    color: #123b35;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.menu-search-control {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 3.2rem;
    padding: 0 .8rem;
    border: 1px solid rgba(18,59,53,.28);
    border-radius: .6rem;
    background: rgba(255,255,255,.76);
}
.menu-search-control > i { color: #176b66; }
.menu-search-control input {
    min-width: 0;
    margin: 0;
    padding: .75rem 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.menu-search-control input:focus { outline: none; box-shadow: none; }
.menu-search-clear {
    flex: 0 0 auto;
    padding: .4rem .7rem;
    border: 0;
    border-radius: 999px;
    background: #e5ecc6;
    color: #153c34;
    font: inherit;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
}
.menu-search-status {
    margin: .5rem 0 0;
    color: #465547;
    font-size: .78rem;
}
.menu-search-empty {
    margin: 1rem 0;
    padding: 1.2rem;
    border: 1px dashed rgba(18,59,53,.35);
    border-radius: .8rem;
    color: #153c34;
    text-align: center;
}
.menu-category-kind { color: #176b66; }
body.menu-page .menu-item-row[hidden],
body.menu-page .menu-cat[hidden],
body.menu-page .menu-search-clear[hidden],
body.menu-page .menu-search-empty[hidden] { display: none !important; }
.menu-layout {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.5rem 2.5rem 2rem;
    border: 2px solid rgba(28,50,38,.18);
    border-radius: 0;
    background: rgba(249,244,208,.24);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 18px 30px rgba(35,45,20,.1);
}
.menu-rail { display: none; }

.menu-cols {
    columns: 2;
    column-gap: 2.6rem;
}
.menu-cat {
    break-inside: avoid;
    margin-block-end: 1.5rem;
    padding: .15rem 0;
}
.menu-cat-h {
    margin: 0 0 .8rem;
    padding-bottom: .3rem;
    border-bottom: 0;
    color: #0e4a58;
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(1.5rem, 1.7vw, 2.2rem);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .12rem;
}
/* ---------- Dish video on hover ----------
   One shared popup, positioned over the hovered row. fixed, not absolute, so the
   script can place it in viewport coordinates and it is unaffected by the menu
   list scrolling. Hidden with visibility rather than display so the <video> is not
   torn down and rebuilt on every hover. */
.menu-video-pop {
    position: fixed;
    z-index: 1500;
    inline-size: min(19rem, 78vw);
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: #14120d;
    border: 1px solid rgba(198, 161, 91, .35);
    box-shadow: 0 18px 44px rgba(16, 14, 10, .38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px) scale(.97);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.menu-video-pop.is-open { opacity: 1; visibility: visible; transform: none; }
.menu-video-pop video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; background: #14120d; }
.menu-video-cap {
    position: absolute; inset-inline: 0; bottom: 0;
    padding: 1.1rem .6rem .45rem;
    background: linear-gradient(to top, rgba(20, 18, 13, .85), transparent);
    color: var(--ivory);
    font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
    text-align: center;
}
/* The cue sits on the dish name rather than as a badge on the row, which would
   crowd 271 lines. */
.menu-item-row.has-video .menu-item-name { cursor: help; }
.menu-item-row.has-video .menu-item-name::after {
    content: "\f03d";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-inline-start: .45rem; font-size: .62em; vertical-align: .15em;
    color: var(--brass-deep); opacity: .75;
}
@media (prefers-reduced-motion: reduce) { .menu-video-pop { transition: none; } }

.menu-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: .35rem;
    padding: .08rem 0;
    border-bottom: 1px solid rgba(7,54,48,.18);
}
.menu-item-name {
    min-width: 0;
    font-size: .93rem;
    font-weight: 700;
    line-height: 1.45;
    color: #151d20;
    letter-spacing: .01em;
}
.menu-dots {
    border-bottom: 1px dotted rgba(16,46,39,.38);
    transform: translateY(-.35rem);
}
.menu-item-price {
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 700;
    color: #12332b;
    font-family: var(--font-body, 'Inter', sans-serif);
}
.menu-item-note {
    grid-column: 1 / -1;
    margin-top: -.12rem;
    margin-bottom: .15rem;
    color: rgba(26,43,35,.78);
    font-size: .68rem;
    line-height: 1.5;
}
.menu-item-cat {
    display: inline-block;
    margin-left: .3rem;
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(17,32,29,.6);
}
.menu-item-row.is-signature .menu-item-name::after {
    content: '★';
    margin-left: .35rem;
    color: #117f7a;
    font-size: .72em;
}

.footer-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    cursor: pointer;
    list-style: none;
}
.footer-accordion > summary::-webkit-details-marker { display: none; }
.footer-accordion > summary::after {
    content: "";
    color: var(--champagne, #E8CF9A);
    font-size: 1rem;
    line-height: 1;
}
.footer-accordion:not([open]) > summary::after { content: "+"; }

@media (max-width: 900px) {
    .menu-hero-inner,
    .menu-layout { padding-inline: 1rem; }
    .menu-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); gap: 1.5rem; padding: 2rem; }
    .menu-hero-photo { min-height: 310px; }
    .menu-tabs-note { display: none; }
    .menu-cols { columns: 1; }
}
@media (max-width: 600px) {
    .menu-hero { padding: calc(4.5rem + env(safe-area-inset-top)) 1rem 1.25rem; }
    .menu-hero-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.4rem; border-radius: 1.2rem; }
    .menu-hero .crumbs { flex-wrap: wrap; font-size: .61rem; margin-bottom: 1.4rem; }
    .menu-hero h1 { max-width: 12ch; font-size: clamp(3.2rem, 15vw, 4.5rem); }
    .menu-hero p { font-size: .98rem; }
    .menu-hero-meta { flex-wrap: wrap; font-size: .67rem; }
    .menu-hero-photo { min-height: 0; aspect-ratio: 16 / 10; }
    .menu-hero-actions { gap: .55rem; }
    .menu-hero .btn,
    .menu-hero .btn-outline,
    .menu-hero .btn-primary,
    .menu-hero .btn-ghost { flex: 1 1 100%; }
    .menu-body { padding-inline: 1rem; }
    .menu-layout { padding: 1rem; }
    .menu-search { padding: 1rem; }
    .menu-tabs { top: calc(var(--nav-h, 76px) - .25rem); padding: .5rem .75rem; }
    .menu-tabs .max-width-center { flex-direction: column; align-items: stretch; gap: .6rem; padding: .65rem; }
    .menu-tabs-label { display: none; }
    /* All three tabs in one row. This was 1fr 1fr, which wrapped the third onto its own
       line and made the row about twice as tall as it needed to be. Three equal columns
       fit because the printed tab no longer carries a count, and the labels are allowed
       to wrap within their own column rather than forcing a fourth row. */
    .menu-tabs-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; align-items: stretch; }
    .menu-tabs-options .menu-tab {
        /* Stacked, not a row: icon, then label, then count. Laid out horizontally the
           count sat beside its label, so "Drinks & Bar 170" wrapped to two lines while
           "Food 101" stayed on one and the three tabs ended up different heights. As a
           column only the label can wrap, and align-items:stretch plus a min-height
           gives all three the same box. */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 3.9rem;
        padding: .55rem .3rem;
        font-size: .6rem;
        letter-spacing: .04em;
        text-align: center;
        gap: .25rem;
    }
    .menu-tabs-options .menu-tab i { font-size: .78rem; }
    /* The count goes under its label instead of trailing it. Side by side, "Drinks &
       Bar 170" wrapped to two lines while "Food 101" stayed on one, so the three
       tabs ended up different heights and the row looked broken. Stacked, each tab is
       the same shape and only the label wraps. The printed tab has no count, so it is
       one line shorter by design rather than by accident. */
    .menu-tabs-options .menu-tab span { display: block; font-size: .58rem; }
}

@media print {
    .site-nav, .mob-nav, .mob-menu, .footer, .menu-tabs, .menu-hero-actions,
    .menu-rail, .menu-sig-grid, .menu-foot, .az-to-top, #az-chat, #az-progress { display: none !important; }
    body { background: #dfe8ad; }
    .menu-hero { padding: 0; }
    .menu-hero-inner, .menu-layout {
        border: 1px solid rgba(15,35,28,.15);
        box-shadow: none;
        background: rgba(255,255,255,.12);
    }
    .menu-hero h1, .menu-hero p, .menu-hero .crumbs { color: #10231d; }
    .menu-cols { columns: 2; }
    .menu-item-row { break-inside: avoid; }
    a { text-decoration: none; color: inherit; }
}

/* Compact footer on phones: preserve every link without stacking four full
   desktop columns into one very long page-ending section. */
@media (max-width: 600px) {
    footer {
        padding: 2.4rem 5% calc(1.2rem + env(safe-area-inset-bottom));
    }
    .footer-giant { display: none; }
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.35rem .9rem;
        padding-bottom: 1.35rem;
        margin-bottom: 1.1rem;
    }
    .footer-brand,
    .footer-grid > .footer-col:last-child {
        grid-column: 1 / -1;
    }
    .footer-brand .logo { margin-bottom: .4rem; }
    .footer-brand .foot-logo { height: 42px; }
    .footer-brand p {
        max-width: 42ch;
        margin: 0;
        font-size: .78rem;
        line-height: 1.5;
    }
    .footer-brand .social-icons { margin-top: .75rem; }
    .footer-h {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .2rem;
        font-size: .64rem;
        letter-spacing: .16em;
    }
    .footer-col,
    .footer-col ul,
    .footer-contact { gap: .32rem; }
    .footer-grid > .footer-links ul,
    .footer-grid > .footer-col:nth-child(3) ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: .75rem;
    }
    .footer-accordion > summary {
        min-height: 2.5rem;
        padding: .35rem 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .footer-accordion[open] > summary { margin-bottom: .35rem; }
    .footer-grid > .footer-col:nth-child(3) ul li {
        min-width: 0;
    }
    .footer-links a,
    .footer-contact,
    .footer-contact a {
        font-size: .78rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }
    .footer-grid > .footer-col:last-child .footer-contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: .85rem;
    }
    .footer-grid > .footer-col:last-child .footer-contact li:first-child {
        grid-column: 1 / -1;
    }
    .footer-bottom {
        justify-content: space-between;
        gap: .45rem;
        font-size: .67rem;
    }
    .footer-bottom .copyright { font-size: inherit; }
}

@media (max-width: 600px) {
    main .about-mini-card {
        left: .65rem;
        bottom: 1rem;
        padding: .9rem 1rem;
    }
    main .info-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }
    main .info-card {
        min-width: 0;
        padding: .9rem;
    }
    main .info-card span {
        font-size: .76rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
    main .dg-albums {
        display: flex;
        gap: .85rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-inline: -5%;
        padding: .5rem 5% 1rem;
        scrollbar-width: none;
    }
    main .dg-albums::-webkit-scrollbar { display: none; }
    main .dg-album {
        flex: 0 0 min(76vw, 260px);
        scroll-snap-align: start;
    }
}

@media (max-width: 768px) {
    body[data-live-page="restaurant"] .menu-tabs { top: 0; }
}

/* Same-page room search and inventory calendar. */
.bw-date-trigger {
    width: 100%;
    min-height: 3.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(198,161,91,.38);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.bw-date-trigger i { color: var(--brass-deep); }
.bw-date-trigger:focus-visible,
.stay-modal :focus-visible,
.stay-calendar-modal :focus-visible {
    outline: 3px solid var(--champagne, #E8CF9A);
    outline-offset: 3px;
}
.stay-modal,
.stay-calendar-modal {
    position: fixed;
    inset: 0;
    z-index: 2700;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(10,14,11,.78);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s .25s;
}
.stay-calendar-modal { z-index: 2800; }
.stay-modal.open,
.stay-calendar-modal.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s;
}
.stay-modal-card,
.stay-calendar-card {
    position: relative;
    width: min(760px, 100%);
    max-height: min(90dvh, 900px);
    overflow: auto;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid rgba(198,161,91,.42);
    border-radius: 20px;
    background: linear-gradient(155deg, #24352A, #141C17 76%);
    color: var(--ivory);
    box-shadow: 0 28px 90px rgba(0,0,0,.5);
}
.stay-modal-card h2,
.stay-calendar-card h2 {
    margin: .35rem 3rem .4rem 0;
    color: var(--ivory);
    font-size: clamp(1.55rem, 5vw, 2.2rem);
}
.stay-modal-card .kicker,
.stay-calendar-card .kicker { color: var(--champagne, #E8CF9A); }
.stay-modal-booking-form { margin-top: 1rem; }
.stay-modal .booking-widget {
    width: 100%;
    max-width: none;
    padding: 1.1rem;
    border-color: rgba(198,161,91,.24);
    box-shadow: none;
}
.stay-modal .booking-widget h3 { display: none; }
.stay-modal .booking-widget form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stay-modal .booking-widget form > .bw-static,
.stay-modal .booking-widget form > .bw-row,
.stay-modal .booking-widget form > .bw-guests,
.stay-modal .booking-widget form > .bw-code,
.stay-modal .booking-widget form > .bw-search { grid-column: 1 / -1; }
.stay-modal .bw-label {
    display: block;
    margin-bottom: .3rem;
    color: rgba(250,246,238,.83);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.stay-modal .bw-guests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stay-modal .bw-guests label { white-space: normal; }
.stay-modal .bw-date-trigger { min-height: 48px; }
.stay-modal-close {
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(250,246,238,.35);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.stay-modal-dates,
.stay-calendar-instruction,
.stay-calendar-note { color: rgba(250,246,238,.72); }
.stay-search-status {
    min-height: 1.5rem;
    margin: .85rem 0;
    color: var(--champagne, #E8CF9A);
}
.stay-search-results { display: grid; gap: .85rem; }
.stay-room-card {
    display: grid;
    grid-template-columns: minmax(110px, 190px) minmax(0, 1fr);
    gap: 1rem;
    padding: .8rem;
    border: 1px solid rgba(250,246,238,.14);
    border-radius: 14px;
    background: rgba(255,255,255,.055);
}
.stay-room-card > img {
    width: 100%;
    height: 100%;
    min-height: 145px;
    object-fit: cover;
    border-radius: 9px;
}
.stay-room-card h3 { margin: .2rem 0; color: #fff; font-size: 1.2rem; }
.stay-room-card p { margin: .3rem 0 .6rem; color: rgba(250,246,238,.74); font-size: .9rem; }
.stay-room-meta { color: rgba(250,246,238,.68); font-size: .8rem; }
.stay-room-price { margin: .6rem 0; color: var(--champagne, #E8CF9A); font-weight: 700; }
.stay-room-price small { display: block; color: rgba(250,246,238,.72); font-weight: 400; }
.stay-room-card .btn { min-height: 44px; }
.stay-room-booking {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-top: .8rem;
}
.stay-room-booking label { display: grid; gap: .25rem; color: rgba(250,246,238,.82); font-size: .78rem; }
.stay-room-booking input,
.stay-room-booking textarea {
    width: 100%;
    min-height: 44px;
    padding: .65rem .75rem;
    border: 1px solid rgba(198,161,91,.35);
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}
.stay-room-booking textarea { min-height: 76px; resize: vertical; }
.stay-room-booking .stay-booking-wide { grid-column: 1 / -1; }
.stay-booking-feedback { color: #ffd1cc; }
.stay-confirmation {
    padding: 1.2rem;
    border: 1px solid rgba(104,190,126,.6);
    border-radius: 12px;
    background: rgba(61,133,82,.2);
    color: #fff;
}
.stay-confirmation h3 { margin-bottom: .5rem; color: #a9e4b5; }
.stay-confirmation p { margin-top: .35rem; }
.stay-calendar-card { width: min(480px, 100%); }
.stay-calendar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.2rem 0 .8rem;
}
.stay-calendar-heading strong { color: #fff; font-size: 1.05rem; }
.stay-calendar-heading button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(198,161,91,.38);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
}
.stay-calendar-heading button:disabled { opacity: .35; cursor: not-allowed; }
.stay-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .32rem; }
.stay-calendar-weekday {
    padding: .45rem 0;
    color: rgba(250,246,238,.62);
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
}
.stay-calendar-day {
    min-width: 0;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #fff;
    font: inherit;
    cursor: pointer;
}
.stay-calendar-day.available { background: rgba(61,133,82,.35); border-color: rgba(104,190,126,.55); }
.stay-calendar-day.limited { background: rgba(198,142,42,.36); border-color: rgba(232,184,87,.68); }
.stay-calendar-day.sold-out { background: rgba(164,61,56,.34); border-color: rgba(222,109,103,.5); }
.stay-calendar-day.past,
.stay-calendar-day.outside { color: rgba(250,246,238,.27); cursor: not-allowed; }
.stay-calendar-day:disabled { cursor: not-allowed; opacity: .6; }
.stay-calendar-day.is-selected { outline: 2px solid #fff; outline-offset: 1px; font-weight: 800; }
.stay-calendar-day.is-range { box-shadow: inset 0 0 0 2px rgba(250,246,238,.55); }
.stay-calendar-day.is-empty { pointer-events: none; }
.stay-calendar-legend { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1rem; }
.stay-calendar-legend span { display: inline-flex; align-items: center; gap: .35rem; color: rgba(250,246,238,.8); font-size: .76rem; }
.stay-calendar-legend i { width: 12px; height: 12px; border-radius: 4px; }
.stay-calendar-legend .available { background: #3D8552; }
.stay-calendar-legend .limited { background: #C68E2A; }
.stay-calendar-legend .sold-out { background: #A43D38; }
.stay-calendar-note { margin-top: .9rem; font-size: .75rem; }
@media (max-width: 600px) {
    .stay-modal,
    .stay-calendar-modal { align-items: end; padding: .5rem; }
    .stay-modal-card,
    .stay-calendar-card {
        max-height: calc(92dvh - env(safe-area-inset-bottom));
        border-radius: 18px 18px 12px 12px;
        padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }
    .stay-room-card { grid-template-columns: 82px minmax(0, 1fr); gap: .7rem; }
    .stay-room-card > img { min-height: 100px; max-height: 115px; }
    .stay-room-card h3 { font-size: 1rem; }
    .stay-room-card p { font-size: .8rem; }
    .stay-room-booking { grid-template-columns: 1fr; }
    .stay-room-booking .stay-booking-wide { grid-column: auto; }
    .stay-modal .booking-widget { padding: .85rem; }
    .stay-modal .booking-widget form { gap: .6rem; }
    .stay-modal .bw-field select,
    .stay-modal .bw-guests select,
    .stay-modal .bw-code input { padding: .7rem .5rem; }
    .stay-modal .bw-date-trigger { padding: .7rem .6rem; font-size: .88rem; }
    .stay-modal .bw-static-val { padding: .75rem .65rem; font-size: .85rem; }
}

/* Keep over-photo copy readable when the hero image contains bright sky. */
.hero::before {
    background: linear-gradient(
        to top,
        rgba(16, 14, 10, .92) 0%,
        rgba(16, 14, 10, .58) 46%,
        rgba(16, 14, 10, .52) 100%
    );
}

/* Rooms page: an editorial opening, a single signature stay and a calm,
   scannable collection of the remaining room types. */
.rooms-page .rooms-intro {
    padding-top: 8.5rem !important;
    padding-bottom: 0;
    background:
        radial-gradient(ellipse at 88% 8%, rgba(198,161,91,.12), transparent 30rem),
        var(--ivory);
}
.rooms-page .rooms-page-opener {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    align-items: end;
    gap: clamp(2rem, 8vw, 8rem);
    max-width: none;
    margin: 0;
    padding: 0 0 clamp(2.5rem, 5vw, 4.5rem);
}
.rooms-page .crumbs { grid-column: 1 / -1; margin-bottom: .2rem; }
.rooms-page .rooms-opener-copy { max-width: 680px; }
.rooms-page .rooms-opener-copy .kicker { color: var(--brass-deep); }
.rooms-page .rooms-opener-copy h1 {
    margin: .75rem 0 1.1rem;
    max-width: 10ch;
    font-size: clamp(3.3rem, 7vw, 6.4rem);
    line-height: .94;
    letter-spacing: -.055em;
    text-wrap: balance;
}
.rooms-page .rooms-opener-copy p {
    max-width: 52ch;
    margin-bottom: 1.6rem;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.75;
}
.rooms-page .rooms-opener-copy .btn { min-height: 50px; }
.rooms-page .rooms-opener-aside {
    padding: .7rem 0 .3rem clamp(1.5rem, 3vw, 3rem);
    border-left: 1px solid rgba(125,99,52,.28);
}
.rooms-page .rooms-aside-index {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--brass-deep);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .2em;
}
.rooms-page .rooms-aside-index i { width: 28px; height: 1px; background: var(--brass); }
.rooms-page .rooms-opener-aside p {
    margin: 1.3rem 0 .8rem;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.8vw, 2.5rem);
    line-height: 1.15;
}
.rooms-page .rooms-opener-aside p em { color: var(--brass-deep); }
.rooms-page .rooms-aside-note { color: var(--muted); font-size: .88rem; }
.rooms-page .rooms-promise {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 2.5rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.rooms-page .rooms-promise span {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--ink-soft);
    font-size: .78rem;
    letter-spacing: .04em;
}
.rooms-page .rooms-promise i { color: var(--brass-deep); }
.rooms-page .rooms-featured {
    width: min(100% - 10%, 1480px);
    min-height: clamp(500px, 66vw, 760px);
    margin: 3rem auto clamp(4rem, 8vw, 7rem);
    align-items: flex-end;
    border-radius: 6px;
    background-color: #333a33;
    box-shadow: 0 28px 75px rgba(35,31,23,.18);
}
.rooms-page .rooms-featured-shade { pointer-events: none; }
.rooms-page .rooms-featured .rf-lead-shade {
    background:
        linear-gradient(90deg, rgba(15,18,15,.83) 0%, rgba(15,18,15,.45) 55%, rgba(15,18,15,.08) 100%),
        linear-gradient(0deg, rgba(15,18,15,.68), transparent 72%);
}
.rooms-page .rooms-featured .rf-lead-inner {
    max-width: 1280px;
    padding: clamp(2rem, 6vw, 5.5rem);
}
.rooms-page .rooms-featured .rf-lead-inner > .kicker { color: #e8cf9a; }
.rooms-page .rooms-featured h2 {
    max-width: 11ch;
    font-size: clamp(2.8rem, 6vw, 5.6rem);
    line-height: .98;
    text-wrap: balance;
}
.rooms-page .rooms-featured .rf-lead-inner > p {
    max-width: 56ch;
    font-size: 1.02rem;
    line-height: 1.75;
}
.rooms-page .rooms-featured .rf-lead-meta { gap: .55rem; }
.rooms-page .rooms-featured .rf-lead-meta li {
    border-color: rgba(255,255,255,.35);
    background: rgba(20,18,13,.18);
    font-size: .65rem;
    letter-spacing: .12em;
}
.rooms-page .rooms-featured .rf-lead-cta { justify-content: space-between; }
.rooms-page .rf-lead-price { color: #e8cf9a; }
.rooms-page .rooms-featured-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.rooms-page .rooms-featured-actions .btn { min-height: 48px; }
.rooms-page .rooms-collection-head {
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: center;
}
.rooms-page .rooms-collection-head .sec-index { display: block; margin-bottom: .7rem; }
.rooms-page .rooms-collection-head .kicker { color: var(--brass-deep); }
.rooms-page .rooms-collection-head h2 {
    margin: .7rem 0;
    font-size: clamp(2.3rem, 5vw, 4rem);
    text-wrap: balance;
}
.rooms-page .rooms-collection-head > p { color: var(--muted); }
.rooms-page .rooms-collection {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr));
    gap: 1.5rem;
}
.rooms-page .rooms-collection-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(125,99,52,.2);
    border-radius: 5px;
    background: #fffdf8;
    box-shadow: 0 14px 45px rgba(35,31,23,.07);
    transition: transform .35s ease, box-shadow .35s ease;
}
.rooms-page .rooms-collection-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 55px rgba(35,31,23,.13);
}
.rooms-page .rooms-collection-card .rf-media { border-radius: 0; }
.rooms-page .rooms-collection-card .rf-media img {
    height: clamp(240px, 27vw, 360px);
    transition: transform .7s ease;
}
.rooms-page .rooms-collection-card:hover .rf-media img { transform: scale(1.035); }
.rooms-page .rooms-collection-card .room-price-badge {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    padding: .55rem .85rem;
    border-color: rgba(232,207,154,.45);
    background: rgba(20,18,13,.82);
}
.rooms-page .rooms-collection-card .room-price-badge small:first-child {
    margin-right: .2rem;
    color: rgba(255,255,255,.72);
}
.rooms-page .rooms-collection-card .rf-num { font-size: 2.1rem; }
.rooms-page .rooms-collection-card .rf-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.35rem, 3vw, 2rem);
}
.rooms-page .rooms-card-kicker {
    color: var(--brass-deep);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.rooms-page .rooms-collection-card .rf-body h3 { margin: .55rem 0; }
.rooms-page .rooms-collection-card .rf-body > p { max-width: 54ch; }
.rooms-page .rooms-collection-card .rf-meta { gap: .65rem 1.1rem; }
.rooms-page .rooms-collection-card .rf-pills { margin-top: .25rem; }
.rooms-page .rooms-collection-card .room-cta { width: 100%; }
.rooms-page .compare-section { background: #f5f0e7; }
.rooms-page .compare-section .section-head { margin-bottom: 2rem; }
.rooms-page .compare-scroll { box-shadow: 0 14px 45px rgba(35,31,23,.06); }
@media (max-width: 768px) {
    .rooms-page .rooms-intro { padding-top: 5.4rem !important; }
    .rooms-page .rooms-page-opener { grid-template-columns: 1fr; gap: 1.8rem; padding-bottom: 2rem; }
    .rooms-page .rooms-opener-aside { padding: 1.1rem 0 0; border-left: 0; border-top: 1px solid rgba(125,99,52,.28); }
    .rooms-page .rooms-opener-aside p { margin: .8rem 0 .4rem; }
    .rooms-page .rooms-promise { gap: .75rem 1.1rem; }
    .rooms-page .rooms-promise span { font-size: .72rem; }
    .rooms-page .rooms-featured {
        width: calc(100% - 2rem);
        min-height: 620px;
        margin: 1.3rem auto 3.5rem;
        background-position: 58% center;
        border-radius: 4px;
    }
    .rooms-page .rooms-featured .rf-lead-shade {
        background: linear-gradient(0deg, rgba(15,18,15,.92), rgba(15,18,15,.6) 62%, rgba(15,18,15,.14));
    }
    .rooms-page .rooms-featured .rf-lead-inner { padding: 1.6rem 1.35rem 1.7rem; }
    .rooms-page .rooms-featured .rf-lead-meta li { font-size: .58rem; padding: .4rem .7rem; }
    .rooms-page .rooms-featured .rf-lead-cta { align-items: flex-start; flex-direction: column; }
    .rooms-page .rooms-collection { grid-template-columns: 1fr; }
    .rooms-page .rooms-collection-card { padding: 0; }
    .rooms-page .rooms-collection-card .rf-media img { height: 270px; }
}
@media (max-width: 420px) {
    .rooms-page .rooms-featured { min-height: 680px; }
    .rooms-page .rooms-featured-actions { width: 100%; }
    .rooms-page .rooms-featured-actions .btn { justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .rooms-page .rooms-featured-actions *,
    .rooms-page .rooms-collection-card,
    .rooms-page .rooms-collection-card img { transition: none; }
}
.hero-eyebrow {
    color: var(--ivory);
    font-weight: 700;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .75);
}
.hero p { color: var(--ivory); }

/* Small menu metadata sits on a light surface and needs the same contrast as body copy. */
.menu-hero .kicker span,
.menu-hero-meta { color: var(--muted); }
.menu-hero .kicker span { color: var(--brass-deep); }
.crumbs { color: rgba(255, 255, 255, .72); }

/* ---------- Embedded map (contact page) ----------
   The Google embed sits directly in the panel. It used to be swapped in by a
   click, with the .az-map-* rules holding the placeholder; that gate is gone, so
   those rules went with it. The iframe needs an explicit border:0 or it picks up
   the UA default and the panel's own 1px border ends up doubled. */
.map-wrap > iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; min-height: 380px; }
.az-map-open {
    position: absolute;
    inset-block-start: .9rem;
    inset-inline-end: .9rem;
    padding: .45rem .9rem;
    border-radius: var(--r-pill);
    background: rgba(20,18,13,.82);
    color: var(--ivory);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.az-map-open:hover { background: var(--brass); color: var(--ink); }

/* ---------- Payment page (/pay.php) ----------
   One guest, one booking, one job: show the amount, show where to send it, and
   say what happens next. Deliberately plain, this is the page a guest opens on
   a phone, possibly on hotel wifi, possibly in a hurry. */
.pay-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 2.4rem;
    align-items: start;
}
.pay-amount {
    display: grid;
    gap: .2rem;
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.6rem;
    border-radius: var(--radius-lg);
    background: var(--paper-50, #FAF6EE);
    border: 1px solid var(--line);
}
.pay-amount-label {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
.pay-amount strong {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.9rem);
    line-height: 1.05;
    color: var(--ink);
}
.pay-amount-note { font-size: .82rem; color: var(--muted); }

.pay-details {
    display: grid;
    gap: 0;
    margin: 0 0 1.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.pay-detail {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: .8rem;
    padding: .7rem .95rem;
    border-bottom: 1px solid var(--line);
}
.pay-detail:last-child { border-bottom: 0; }
.pay-detail dt {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: .15rem;
}
.pay-detail dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
/* Account numbers, wallet IDs and references have to be read aloud to someone
   on the phone, so they get a monospaced face and generous letter spacing. */
.pay-detail dd.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .06em;
}

.pay-how h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: .9rem;
}
.pay-how h3 {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 1.5rem 0 .2rem;
    /* Explicit line-height: at this size with the tracking above, the inherited
       value clips the ascender off every capital letter. */
    line-height: 1.5;
}
.pay-qr {
    display: grid;
    justify-items: center;
    gap: .6rem;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
}
.pay-qr img {
    inline-size: 180px;
    block-size: 180px;
    /* The QR is a generated PNG on its own endpoint; this just stops it being
       smoothed into mush if a browser scales it. */
    image-rendering: pixelated;
}
.pay-qr-cap { margin: 0; font-size: .78rem; color: var(--muted); text-align: center; }
.pay-instructions {
    margin: 1.2rem 0 0;
    padding: .9rem 1rem;
    border-inline-start: 3px solid var(--brass);
    background: var(--paper-50, #FAF6EE);
    color: var(--ink-soft);
}

.pay-reminder {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
}
.pay-contact { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }

.pay-side { display: grid; gap: 1rem; position: sticky; top: calc(var(--nav-h, 76px) + 1rem); }
.pay-card {
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #FFFDF8;
}
.pay-card h2 { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .7rem; }
.pay-card .pay-details { margin-bottom: 0; border: 0; }
.pay-card .pay-detail { grid-template-columns: 1fr; gap: .1rem; padding: .45rem 0; }
.pay-address { color: var(--ink-soft); }
.pay-card p { font-size: .86rem; color: var(--ink-soft); }
.pay-status {
    display: inline-block;
    margin: .8rem 0 0;
    padding: .28rem .7rem;
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.pay-status-unpaid { background: #F6EBD8; color: #7A5B1E; }
.pay-status-part_paid { background: #E4EDF3; color: #2C5570; }
.pay-status-paid { background: #E4F0E6; color: #2E5B34; }
.pay-status-refunded { background: #F3E7E5; color: #7C3B31; }

/* One column on anything narrow. The QR and the total both have to work on a
   phone, which is where most of these visitors will be standing. */
@media (max-width: 860px) {
    .pay-wrap { grid-template-columns: 1fr; gap: 1.6rem; }
    .pay-side { position: static; }
}

/* =============================================================
   PHOTOS OPEN IN THE SHARED LIGHTBOX
   Every content photo on the site (room cards, room feature cards, team
   portraits, the highlight trio, the menu hero, the photo strip, sign cards), is
   a trigger for the one .dg-lb overlay. The chrome and the behaviour live in
   includes/photo-lightbox.php and assets/js/photo-lightbox.js; this block is
   only what a photo needs to LOOK like something you can open.

   The markup contract is `data-lb-full` on the trigger (see photoZoomAttrs() in
   admin/functions.php). Nothing here is keyed off a class, because a class is
   something a template can forget while the attribute is emitted by one helper, a photo with the attribute works on every page, and one without it stays
   inert rather than half-wired.
   ============================================================= */

/* A hidden arrow must be gone, not merely transparent.
   .dg-lb-btn sets `display: grid`, and `display` beats the UA stylesheet's
   `[hidden] { display: none }` at equal specificity, so a group of one photo
   would show two arrows that wrap back onto themselves and do nothing. Same
   trap as the dead hamburger this file already had once. */
.dg-lb-btn[hidden], .dg-lb-dl[hidden] { display: none !important; }

/* The one-photo case has no counter either: "1 of 1" is noise. */
.dg-lb-count:empty { display: none; }

[data-lb-full] { cursor: zoom-in; }

/* Keyboard focus has to be visible on a photo, because a photo is now a control
   and the only thing marking it as one for a keyboard user is this ring. The
   offset keeps it off the image edge, where a 1px photo border would hide it. */
[data-lb-full]:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
}

/* A slow settle on the photo itself. Every card that owns one already has its own
   hover transform (scale on the image, lift on the card), so this only adds the
   brightness lift that says "there is something behind this". */
[data-lb-full] { transition: filter .35s var(--ease); }
[data-lb-full]:hover { filter: brightness(1.06); }

/* The phone bottom bar steps out of the way while a photo is open.
 *
 * It used to float ON TOP of the viewer. Two things combined to do that, and both are
 * deliberate elsewhere: `.mob-nav` is z-index 1500 while `.dg-lb` uses --z-modal
 * (1200), and animations.php deliberately keeps the bar visible while a lightbox is
 * open, its comment says "without it in this list the mobile nav kept auto-hiding
 * while an album was open". The intent was to stop the bar *animating away* mid-viewer;
 * the side effect was a row of five buttons drawn across the bottom of a full-bleed
 * photograph, which is what the phone screenshots showed.
 *
 * Three more were found the same way, by listing every `position: fixed` element still
 * painted while the viewer was open instead of by looking at the screenshot and
 * deciding it looked a bit busy:
 *   #liveBtn    z 2400  the chat launcher
 *   #azTop      z 2400  back-to-top (note the id, not .az-to-top, there is no such
 *                        class, which is why a first attempt at this rule matched
 *                        nothing and appeared to work)
 *   #az-dot / #az-ring  z 9997  the brass dot-and-ring cursor trail
 *   #az-progress z 9998  the 3px animated loading bar along the top edge
 * None of these is a bug on its own. Together they meant a photograph was being
 * displayed under a chat button, a scroll-to-top button, a cursor halo and a
 * progress bar, every one of them individually defensible, and collectively not a
 * photo viewer.
 *
 * `display: none`, not `visibility: hidden` and not a z-index change.
 *
 * `visibility` was the first attempt and it is wrong in a way that only shows up if
 * you measure: #azTop and the chat launcher both carry `transition: .35s`, which
 * transitions visibility along with everything else, and `visibility` interpolates as
 * *visible* for the whole duration of the transition. So for the first 350ms after a
 * photo opened, those controls were still painted over the photograph and still
 * focusable, long enough to see, and long enough for a screenshot to catch.
 *
 * `display` is not animatable, so it takes effect on the frame the class lands. It
 * also removes the elements from the tab order and the accessibility tree, which is
 * what we want anyway: a keyboard user tabbing inside the viewer must not land on a
 * Home button that is not there. `!important` because #az-dot and #az-ring have their
 * display set inline by the cursor-trail script, and an inline style beats any rule
 * in a stylesheet. Everything comes back on close; the nav's own auto-hide behaviour
 * is untouched.

 * .skip-link is deliberately NOT in this list. It is fixed and z-index 2100, but it
 * parks itself off-screen at y:-166 until focused, which is what a skip link is for;
 * hiding it would break the keyboard shortcut that jumps past the navigation. */
html:has(.dg-lb.open) .mob-nav,
html:has(.dg-lb.open) #liveBtn,
html:has(.dg-lb.open) #azTop,
html:has(.dg-lb.open) #az-dot,
html:has(.dg-lb.open) #az-ring,
html:has(.dg-lb.open) #az-progress,
html:has(.dg-lb.open) .az-firefly,
html:has(.dg-lb.open) .az-orbs { display: none !important; }

/* No corner mark on touch, deliberately.
   The obvious affordance is a drawn "enlarge" badge in the corner, and it is a lie
   on this site: a pseudo-element does not render on a replaced element, so ::after
   on an <img>  (which is most of the triggers), produces nothing at all. Shipping it
   would have meant CSS that reads as a feature and works on exactly one of the
   fourteen places it is used.

   Tapping a photo and having it open is the convention every photo grid on every
   phone already follows, so the tap target is the affordance. The cursor and the
   focus ring cover the cases where a cursor exists. */
@media (prefers-reduced-motion: reduce) {
    [data-lb-full] { transition: none !important; }
    [data-lb-full]:hover { filter: none; }
}

/* ---------- Room search to reservation ---------- */
.availability-page-main .page-opener { max-width: 780px; }
.availability-page-main .page-opener h1 { margin-bottom: .7rem; }
.availability-page-main .page-opener > p { max-width: 58ch; }
.availability-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 1.5rem 0 1rem;
}
.availability-trust span {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill, 999px);
    background: rgba(255,253,248,.8);
    color: var(--ink-soft);
    font-size: .82rem;
}
.availability-trust i { color: var(--brass-deep); }
.availability-page-main > .rooms-section,
.availability-page-main .booking-widget { width: 100%; max-width: none; }
.availability-page-main .booking-widget {
    padding: clamp(1.1rem, 3vw, 1.8rem);
    border-radius: 18px;
}
.availability-page-main .booking-widget h2 {
    margin: 0 0 1rem;
    color: var(--ivory);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 500;
    text-align: left;
}
.availability-page-main .booking-widget form {
    grid-template-columns: minmax(150px, .9fr) minmax(260px, 1.6fr) minmax(105px, .7fr) minmax(270px, 1.7fr) minmax(80px, .55fr) auto;
    gap: .8rem;
    align-items: end;
}
.availability-page-main .booking-widget form > .bw-field,
.availability-page-main .booking-widget form > .bw-row,
.availability-page-main .booking-widget form > .bw-guests,
.availability-page-main .booking-widget form > .bw-code,
.availability-page-main .booking-widget form > .bw-search { grid-column: auto; }
.availability-page-main .booking-widget .bw-label {
    display: block;
    margin-bottom: .35rem;
    color: rgba(250,246,238,.82);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.availability-page-main .booking-widget .bw-static-val,
.availability-page-main .booking-widget .bw-date-trigger,
.availability-page-main .booking-widget .bw-field select,
.availability-page-main .booking-widget .bw-guests select {
    min-height: 50px;
    border-radius: 8px;
}
.availability-page-main .booking-widget .bw-row { gap: .55rem; }
.availability-page-main .booking-widget .bw-date-trigger { padding: .7rem .8rem; }
.availability-page-main .booking-widget .bw-guests { gap: .55rem; margin-top: 0; }
.availability-page-main .booking-widget .bw-guests label {
    min-height: 0;
    margin-bottom: .35rem;
    color: rgba(250,246,238,.82);
    font-size: .61rem;
    letter-spacing: .06em;
}
.availability-page-main .booking-widget .bw-guests select { padding: .7rem .55rem; }
.availability-page-main .booking-widget .bw-search {
    min-height: 50px;
    padding: .8rem 1rem;
    white-space: nowrap;
}
.availability-page-main .booking-widget .bw-code { align-self: center; }
.availability-page-main .booking-widget .bw-code summary { white-space: nowrap; }
.availability-page-main .avail-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 1rem;
    padding: 1.2rem;
    margin: 1.8rem 0 1.1rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(29,43,34,.055);
}
.availability-page-main .avail-summary div { min-width: 0; }
.availability-page-main .avail-summary div b {
    margin-bottom: .3rem;
    font-size: .62rem;
    letter-spacing: .14em;
}
.availability-page-main .avail-summary div span { font-size: 1.05rem; }
.availability-page-main .avail-card {
    grid-template-columns: minmax(220px, 31%) minmax(0, 1fr);
    gap: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(29,43,34,.07);
    transition: transform .2s ease, box-shadow .2s ease;
}
.availability-page-main .avail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(29,43,34,.11);
}
.availability-page-main .avail-card > img { min-height: 100%; }
.availability-page-main .avail-body { padding: clamp(1.1rem, 3vw, 2rem); }
.availability-page-main .avail-body h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.availability-page-main .avail-body > .time { font-size: .82rem; }
.availability-page-main .avail-left { margin: .4rem 0 .8rem; }
.availability-page-main .avail-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .7rem;
    margin: 1rem 0 .3rem;
    font-size: 1.9rem;
}
.availability-page-main .avail-price small { flex-basis: 100%; }
.availability-page-main .avail-book {
    padding: .9rem 0 0;
    margin-top: 1rem;
    border-color: var(--line);
}
.availability-page-main .avail-book > summary { align-items: center; }
.availability-page-main .avail-book-cta { min-height: 46px; align-items: center; }
.availability-page-main .avail-book-form {
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #FAF8F2;
}
.availability-page-main .avail-book-form .form-group { margin-bottom: .75rem; }
.availability-page-main .avail-book-form input { min-height: 46px; border-radius: 7px; }
.availability-page-main .avail-book-actions .btn { min-height: 44px; }
.availability-page-main .book-done {
    scroll-margin-top: 7rem;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(29,43,34,.07);
}
.availability-page-main .avail-empty {
    padding: clamp(2rem, 6vw, 4rem) 1.2rem;
    border: 1px dashed rgba(29,43,34,.22);
    border-radius: 16px;
    background: rgba(255,255,255,.68);
}
.stay-modal-card {
    width: min(900px, 100%);
    padding: clamp(1.15rem, 3vw, 2rem);
    background: #17241C;
}
.stay-modal-card > .kicker { display: block; margin-bottom: .35rem; }
.stay-modal-card h2 { margin-bottom: .6rem; }
.stay-modal .booking-widget h2 { display: none; }
.stay-modal .booking-widget {
    padding: 1rem;
    border-radius: 12px;
    background: rgba(255,255,255,.045);
}
.stay-modal .booking-widget form {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .55rem;
}
.stay-modal .booking-widget form > .bw-static { display: none; }
.stay-modal .booking-widget form > .bw-row { grid-column: span 4; }
.stay-modal .booking-widget form > .bw-field:not(.bw-static) { grid-column: span 2; }
.stay-modal .booking-widget form > .bw-guests { grid-column: span 3; }
.stay-modal .booking-widget form > .bw-code { grid-column: span 1; align-self: end; }
.stay-modal .booking-widget form > .bw-search { grid-column: span 2; min-height: 46px; align-self: end; }
.stay-modal .booking-widget .bw-label { margin-bottom: .2rem; font-size: .59rem; }
.stay-modal .booking-widget .bw-date-trigger,
.stay-modal .booking-widget .bw-static-val,
.stay-modal .booking-widget .bw-field select,
.stay-modal .booking-widget .bw-guests select { min-height: 44px; }
.stay-modal .booking-widget form { gap: .7rem; }
.stay-modal .bw-static-val { min-height: 48px; }
.stay-modal-dates {
    padding: .65rem .85rem;
    margin: .8rem 0;
    border: 1px solid rgba(198,161,91,.2);
    border-radius: 9px;
    background: rgba(255,255,255,.045);
    font-size: .84rem;
}
.stay-search-status { margin: .7rem 0; font-size: .88rem; }
.stay-search-results { gap: .9rem; }
.stay-room-card {
    grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    background: #fffdf8;
    color: var(--ink);
    box-shadow: 0 10px 26px rgba(0,0,0,.13);
}
.stay-room-card > img {
    min-height: 100%;
    max-height: 330px;
    border-radius: 0;
}
.stay-room-details { min-width: 0; padding: 1rem 1.15rem; }
.stay-room-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem; }
.stay-room-kicker {
    color: var(--brass-deep);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.stay-room-availability {
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #eaf2e9;
    color: #315b37;
    font-size: .7rem;
    font-weight: 700;
}
.stay-room-card h3 { margin: .35rem 0; color: var(--ink); font-size: 1.35rem; }
.stay-room-card p { margin: .35rem 0 .7rem; color: var(--ink-soft); font-size: .86rem; }
.stay-room-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.stay-room-meta span,
.stay-room-amenities span {
    padding: .28rem .55rem;
    border: 1px solid #e8e3d8;
    border-radius: 999px;
    color: #566056;
    font-size: .7rem;
}
.stay-room-amenities { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.stay-room-amenities span { background: #f5f2e9; }
.stay-room-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    margin-top: .8rem;
    padding-top: .75rem;
    border-top: 1px solid #e9e4d9;
}
.stay-room-price { display: grid; gap: .12rem; margin: 0; color: var(--ink); }
.stay-room-price strong { color: var(--ink); font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; }
.stay-room-price small { color: #687268; font-size: .74rem; }
.stay-room-price .stay-room-original { color: #7b817a; font-size: .82rem; }
.stay-room-price .stay-room-saving { color: #315b37; font-weight: 700; }
.stay-room-card .stay-room-reserve { min-height: 46px; padding-inline: 1.2rem; }
.stay-room-booking {
    grid-column: 1 / -1;
    padding: .85rem;
    border: 1px solid #e3ddcf;
    border-radius: 10px;
    background: #f7f4ed;
}
.stay-booking-heading { grid-column: 1 / -1; margin: 0 !important; color: var(--ink) !important; font-weight: 700; }
.stay-room-booking label { color: #39453c; font-size: .74rem; font-weight: 600; }
.stay-room-booking input,
.stay-room-booking textarea { border-color: #d4cdbd; border-radius: 7px; }
.stay-room-booking .stay-booking-note { margin: .1rem 0; color: #5c655b; font-size: .76rem; }
.stay-booking-feedback { margin: 0; color: #8c2f26; font-size: .82rem; }
.stay-room-booking button:disabled { cursor: progress; opacity: .7; }
.stay-confirmation {
    padding: clamp(1.1rem, 4vw, 1.8rem);
    border-color: rgba(143,194,151,.5);
    background: #20392a;
}
.stay-confirmation h3 { font-size: 1.45rem; }
.stay-confirmation-reference strong { color: var(--champagne, #E8CF9A); letter-spacing: .08em; }
.stay-confirmation-payment { display: inline-flex; margin-top: .6rem; }
.stay-search-empty {
    padding: 1.5rem;
    border: 1px dashed rgba(232,207,154,.4);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    text-align: center;
}
.stay-search-empty strong { color: #fff; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.stay-search-empty p { max-width: 50ch; margin: .45rem auto .9rem; color: rgba(250,246,238,.72); font-size: .85rem; }
.stay-loading-card {
    min-height: 165px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 40%, rgba(255,255,255,.05) 60%);
    background-size: 220% 100%;
    animation: stay-loading-shimmer 1.25s linear infinite;
}
@keyframes stay-loading-shimmer { to { background-position-x: -220%; } }
@media (max-width: 1050px) {
    .availability-page-main .booking-widget form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .availability-page-main .booking-widget form > .bw-static,
    .availability-page-main .booking-widget form > .bw-row { grid-column: span 2; }
    .availability-page-main .booking-widget form > .bw-guests { grid-column: span 2; }
    .availability-page-main .booking-widget form > .bw-search { grid-column: span 2; }
}
@media (max-width: 700px) {
    .availability-trust { gap: .45rem; }
    .availability-trust span { padding: .55rem .7rem; font-size: .74rem; }
    .availability-page-main .booking-widget form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .availability-page-main .booking-widget form > .bw-static,
    .availability-page-main .booking-widget form > .bw-row,
    .availability-page-main .booking-widget form > .bw-guests,
    .availability-page-main .booking-widget form > .bw-search { grid-column: 1 / -1; }
    .availability-page-main .booking-widget .bw-static-val { font-size: .86rem; }
    .availability-page-main .booking-widget .bw-row { gap: .5rem; }
    .availability-page-main .booking-widget .bw-date-trigger { padding-inline: .55rem; font-size: .82rem; }
    .availability-page-main .booking-widget .bw-code { grid-column: 1 / -1; }
    .availability-page-main .avail-card { grid-template-columns: 1fr; }
    .availability-page-main .avail-card > img { min-height: 0; height: 220px; max-height: 260px; }
    .availability-page-main .avail-book-form { padding: .85rem; }
    .availability-page-main .avail-book-actions { align-items: stretch; }
}
@media (max-width: 600px) {
    .stay-modal-card { max-height: calc(94dvh - env(safe-area-inset-bottom)); }
    .stay-modal .booking-widget form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
    .stay-modal .booking-widget form > .bw-static { display: none; }
    .stay-modal .booking-widget form > .bw-row,
    .stay-modal .booking-widget form > .bw-guests,
    .stay-modal .booking-widget form > .bw-search { grid-column: 1 / -1; }
    .stay-modal .booking-widget form > .bw-field:not(.bw-static),
    .stay-modal .booking-widget form > .bw-code { grid-column: span 1; }
    .stay-modal .booking-widget .bw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stay-modal .booking-widget .bw-field select,
    .stay-modal .booking-widget .bw-guests select { padding: .55rem .4rem; }
    .stay-modal .booking-widget .bw-date-trigger { padding: .65rem .5rem; font-size: .82rem; }
    .stay-room-card { grid-template-columns: 1fr; }
    .stay-room-card > img { width: 100%; height: 150px; min-height: 150px; max-height: 150px; }
    .stay-room-details { padding: .8rem; }
    .stay-room-card h3 { font-size: 1.08rem; }
    .stay-room-card p { font-size: .78rem; }
    .stay-room-offer { grid-column: 1 / -1; align-items: stretch; }
    .stay-room-price { flex: 1 1 100%; }
    .stay-room-card .stay-room-reserve { width: 100%; }
    .stay-room-booking { grid-column: 1 / -1; grid-template-columns: 1fr; }
    .stay-room-booking .stay-booking-wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .availability-page-main .avail-card { transition: none; }
    .stay-loading-card { animation: none; }
}
.booking-widget h2 {
    margin-bottom: 1.4rem;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}
.hero-widget .booking-widget h2 { margin-bottom: 1.1rem; font-size: 1.25rem; }
.booking-widget form > input[type="hidden"] { display: none; }

/* Compact direct-booking search, opened from every Book Your Stay action. */
#staySearchModal { backdrop-filter: blur(5px); }
#staySearchModal .stay-modal-card {
    width: min(820px, calc(100vw - 32px));
    max-height: min(90dvh, 900px);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 50% 0, rgba(198,161,91,.09), transparent 60%),
        #1d3027;
    box-shadow: 0 32px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045);
}
#staySearchModal .stay-modal-card > .kicker {
    display: block;
    margin: 0 0 .45rem;
    color: var(--champagne, #E8CF9A);
    font-size: .65rem;
    letter-spacing: .2em;
    text-align: center;
    text-transform: uppercase;
}
#staySearchModal .stay-modal-card > h2 {
    margin: 0 2.5rem 1.25rem;
    color: #fff;
    font-family: var(--font-body);
    font-size: clamp(1.35rem, 4vw, 1.7rem);
    font-weight: 700;
    text-align: center;
}
#staySearchModal .stay-modal-booking-form { margin: 0; }
#staySearchModal .booking-widget {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#staySearchModal .booking-widget form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem .9rem;
    align-items: start;
}
#staySearchModal .booking-widget form > .bw-static,
#staySearchModal .booking-widget form > .bw-code,
#staySearchModal .booking-widget form > .bw-search { grid-column: 1 / -1; }
#staySearchModal .booking-widget form > .bw-static { display: block; }
#staySearchModal .booking-widget form > .bw-row { display: contents; }
#staySearchModal .booking-widget form > .bw-field:not(.bw-static) { grid-column: auto; }
#staySearchModal .booking-widget form > .bw-guests { display: contents; }
#staySearchModal .booking-widget .bw-row .bw-field { grid-column: span 1; }
#staySearchModal .booking-widget .bw-guests > div { grid-column: span 1; }
#staySearchModal .booking-widget .bw-label {
    display: block;
    margin: 0 0 .3rem;
    color: rgba(250,246,238,.86);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
#staySearchModal .booking-widget .bw-static-val,
#staySearchModal .booking-widget .bw-date-trigger,
#staySearchModal .booking-widget .bw-field select,
#staySearchModal .booking-widget .bw-guests select {
    width: 100%;
    min-height: 48px;
    padding: .75rem .85rem;
    border: 1px solid rgba(198,161,91,.4);
    border-radius: 7px;
    background: #fff;
    color: #254663;
    font-size: .95rem;
}
#staySearchModal .booking-widget .bw-static-val {
    border-color: rgba(198,161,91,.45);
    background: rgba(250,246,238,.06);
    color: #fff;
}
#staySearchModal .booking-widget .bw-static-val i { color: var(--brass); }
#staySearchModal .booking-widget .bw-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}
#staySearchModal .booking-widget .bw-row .bw-field { min-width: 0; }
#staySearchModal .booking-widget .bw-guests > div { min-width: 0; }
#staySearchModal .booking-widget .bw-guests label {
    display: block;
    min-height: 0;
    margin: 0 0 .3rem;
    color: rgba(250,246,238,.86);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: normal;
}
#staySearchModal .booking-widget .bw-guests select { padding-inline: .7rem; }
#staySearchModal .booking-widget .bw-code { align-self: auto; }
#staySearchModal .booking-widget .bw-code summary {
    color: rgba(250,246,238,.9);
    font-size: .83rem;
}
#staySearchModal .booking-widget .bw-code input {
    margin-top: .4rem;
    border-radius: 7px;
}
#staySearchModal .booking-widget .bw-search {
    width: 100%;
    min-height: 52px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--champagne, #E8CF9A), var(--brass));
    box-shadow: 0 4px 0 var(--brass-deep);
    color: var(--ink);
    font-size: .9rem;
}
#staySearchModal .booking-widget .bw-search { grid-column: 1 / -1; }
#staySearchModal .stay-modal-dates:empty,
#staySearchModal .stay-search-status:empty { display: none; }
#staySearchModal .stay-modal-dates { margin-top: 1rem; }
#staySearchModal .stay-search-results:empty { display: none; }
@media (max-width: 600px) {
    #staySearchModal .stay-modal-card {
        max-height: calc(94dvh - env(safe-area-inset-bottom));
        padding: 1.35rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }
    #staySearchModal .booking-widget form { gap: .75rem .65rem; }
    #staySearchModal .booking-widget .bw-row { gap: .65rem; }
    #staySearchModal .booking-widget .bw-date-trigger { padding: .65rem .55rem; font-size: .85rem; }
    #staySearchModal .booking-widget .bw-guests select { padding: .65rem .5rem; }
}

/* Rooms: bring the signature stay into the opening view and give the collection
   one consistent editorial treatment. */
.rooms-page .rooms-intro {
    position: relative;
    overflow: hidden;
    padding-top: 7.6rem !important;
    color: #fff;
    background:
        radial-gradient(ellipse at 78% 24%, rgba(198,161,91,.14), transparent 29rem),
        linear-gradient(135deg, #17251d 0%, #20382c 66%, #293c30 100%);
}
.rooms-page .rooms-page-opener {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .88fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
    padding-bottom: clamp(2rem, 4vw, 3.2rem);
}
.rooms-page .rooms-page-opener .crumbs,
.rooms-page .rooms-page-opener .crumbs a { color: rgba(255,255,255,.68); }
.rooms-page .rooms-opener-copy .kicker { color: #e2c98f; }
.rooms-page .rooms-opener-copy h1 { color: #fff; }
.rooms-page .rooms-opener-copy p { color: rgba(255,255,255,.75); }
.rooms-page .rooms-opener-copy .btn { min-height: 52px; }
.rooms-page .rooms-hero-card {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 400px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 46% 46% 16px 16px / 12% 12% 16px 16px;
    background: linear-gradient(145deg, #516c59, #1b2b21);
    box-shadow: 0 28px 70px rgba(0,0,0,.25);
}
.rooms-page .rooms-hero-card::after {
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(180deg, transparent, rgba(10,17,13,.84));
    content: "";
    pointer-events: none;
}
.rooms-page .rooms-hero-card > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 470px;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.rooms-page .rooms-hero-card:hover > img { transform: scale(1.035); }
.rooms-page .rooms-hero-card .rooms-aside-index {
    position: absolute;
    z-index: 1;
    top: 1.1rem;
    right: 1.1rem;
    padding: .48rem .7rem;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 99px;
    color: #fff;
    background: rgba(20,31,24,.42);
    font-size: .61rem;
}
.rooms-page .rooms-hero-card figcaption {
    position: absolute;
    z-index: 1;
    right: 1.35rem;
    bottom: 1.35rem;
    left: 1.35rem;
    display: grid;
    gap: .35rem;
    color: #fff;
}
.rooms-page .rooms-hero-kicker {
    color: #e2c98f;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.rooms-page .rooms-hero-card figcaption > b {
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    line-height: 1.12;
}
.rooms-page .rooms-hero-summary { max-width: 52ch; color: rgba(255,255,255,.78); font-size: .84rem; line-height: 1.5; }
.rooms-page .rooms-hero-meta { color: rgba(255,255,255,.82); font-size: .78rem; }
.rooms-page .rooms-hero-meta i { display: inline-block; width: 4px; height: 4px; margin: 0 .45rem .15rem; border-radius: 50%; background: #e2c98f; }
.rooms-page .rooms-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: .3rem; }
.rooms-page .rooms-hero-actions a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    justify-self: start;
    color: #f4e3bc;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}
.rooms-page .rooms-hero-actions a:hover { color: #fff; }
.rooms-page .rooms-hero-empty { padding: 2rem; color: #fff; }
.rooms-page .rooms-hero-empty p { font-family: var(--font-display); font-size: 2rem; }
.rooms-page .rooms-hero-empty em { color: #e2c98f; }
.rooms-page .rooms-promise {
    gap: .8rem 2rem;
    border-color: rgba(244,227,188,.22);
}
.rooms-page .rooms-promise span { color: rgba(255,255,255,.76); }
.rooms-page .rooms-promise i { color: #e2c98f; }
.rooms-page .rooms-intro .rich-content,
.rooms-page .rooms-intro .rich-content p { color: rgba(255,255,255,.76); }
.rooms-page .rooms-intro .page-banner img { border-radius: 15px; }
.rooms-page > .rooms-section:not(.rooms-intro) { padding-top: clamp(3rem, 6vw, 5.5rem); }
.rooms-page .rooms-collection-head { margin-bottom: 2.4rem; }
.rooms-page .rooms-collection-head .sec-index { color: var(--brass-deep); }
.rooms-page .rooms-collection {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
}
.rooms-page .rooms-collection-card {
    border-radius: 15px;
    box-shadow: 0 12px 36px rgba(35,31,23,.07);
}
.rooms-page .rooms-collection-card .rf-media img { height: clamp(250px, 28vw, 350px); }
.rooms-page .rooms-collection-card .rf-body { padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.rooms-page .rooms-collection-card .rf-pills { gap: .4rem; }
.rooms-page .rooms-collection-card .room-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: auto;
    padding-top: 1.35rem;
}
.rooms-page .rooms-collection-card .room-cta .btn { min-height: 44px; }
.rooms-page .compare-section { padding-top: clamp(3rem, 6vw, 5rem); }
@media (max-width: 768px) {
    .rooms-page .rooms-intro { padding-top: 5.8rem !important; }
    .rooms-page .rooms-page-opener { grid-template-columns: 1fr; gap: 1.6rem; }
    .rooms-page .rooms-hero-card {
        min-height: 300px;
        border-radius: 34% 34% 14px 14px / 10% 10% 14px 14px;
    }
    .rooms-page .rooms-hero-card > img { min-height: 350px; max-height: 460px; }
    .rooms-page .rooms-promise { display: grid; grid-template-columns: 1fr; gap: .65rem; }
    .rooms-page .rooms-collection { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .rooms-page .rooms-hero-card > img,
    .rooms-page .rooms-collection-card,
    .rooms-page .rooms-collection-card img { transition: none; }
    .rooms-page .rooms-hero-card:hover > img { transform: none; }
}