/*
Theme Name: Mount Elgon Hotel & Spa
Theme URI: http://localhost/elgon1
Author: Rich
Description: Heritage hotel theme for Mount Elgon Hotel & Spa, Plot 30 Masaba Road, Mbale, Eastern Uganda. Built around the property's 1950s building, landscaped gardens and Kwetu Spa, and its role as a Mbale base for Mount Elgon, Sipi Falls and wider Eastern Uganda. Classic PHP theme with ACF-driven sections and custom post types.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mtelgon
Tags: custom-menu, featured-images, translation-ready, two-columns
*/

/* ==========================================================================
   PORTED DESIGN CSS — from website.html <style> block, same order, same values
   ========================================================================== */

/* Brovad Sands Lodge palette — Lagoon.
   ==========================================================================
   The client ships five colours and every one of them is LIGHT:

     Cobalt Wave #0132A2  white 4.51:1   Lagoon    #A6833A  white 2.88:1
     Aqua Foam   #C6A14E  white 2.03:1   Seafoam   #C9D6F2  white 1.52:1
     White Cap   #E9EEFB  white 1.15:1

   There is no dark tone in the set and no warm accent, so two tones are derived —
   and only two. Everything else on this page is one of the client's five, one of
   these two, or a neutral tint of --ink (--wash, --grey).

     --ink        #0B1A45  white 14.03:1. Body copy, headings, and the deepest
                  surface. Chosen out of the blue-teal family (hue 197 deg, four
                  degrees off Cobalt Wave's 195) so it reads as the same water at
                  night rather than as imported black. 14:1 leaves headroom for
                  every wash, tint and translucent panel it sits behind.
     --cobalt-deep #0132A2 white 7.07:1. Cobalt Wave at the same hue and full
                  saturation, lightness 33% -> 24.5%. The header, the scrolled
                  header, the drawer and the CTA band are built on it. Raw Cobalt
                  Wave is 4.51:1 — it clears AA by 0.01 and nothing survives on
                  that: `.nav a:hover{opacity:.8}` alone would drop it to 3.3:1.
                  At 7.07:1 the same hover measures 5.14:1 and still passes.

   ROLE SPLIT. Nothing anywhere may put white text on Lagoon, Aqua Foam, Seafoam
   or White Cap — they are 2.88:1 and below. They carry --ink and only --ink.
     Cobalt Wave  the primary brand tone: rings, borders, decorative strokes.
     Lagoon       secondary; the CTA pressed state, under --ink (4.87:1).
     Aqua Foam    accents and active fills under --ink (6.91:1) — active villa
                  tab, pagination current, the awards band, and the PRIMARY CTA.
     Seafoam      soft fills, hairlines and rings; muted copy on dark (9.26:1).
     White Cap    page washes and the lightest band (--light).

   NO WARM ACCENT. The CTA can no longer be coral, so it is Aqua Foam — the
   brightest, highest-chroma tone in the set — filled, under --ink, and ringed in
   --cobalt-deep. Aqua Foam is 2.03:1 against white, so a bare fill would have no
   boundary; the ring carries it at 7.07:1. Aqua Foam appears as a large fill in
   exactly two roles, CTAs and the awards band, which is what keeps a CTA reading
   as a CTA when every hue on the page is a blue-green. */
:root{
  /* --- client palette, unaltered ------------------------------------------- */
  --cobalt:#0132A2;        /* Mount Elgon Hotel royal blue — PRIMARY brand tone */
  --lagoon:#A6833A;        /* Lagoon — SECONDARY. --ink only (4.87:1); never white (2.88:1) */
  --aqua:#C6A14E;          /* Aqua Foam — accents, active fills, PRIMARY CTA. --ink 6.91:1 */
  --seafoam:#C9D6F2;       /* Seafoam — soft fills, rings, hairlines. --ink 9.26:1 */
  --whitecap:#E9EEFB;      /* White Cap — page washes, lightest band. --ink 12.20:1 */
  /* --- derived (2): the set has no dark tone and no warm accent ------------- */
  --ink:#0B1A45;           /* deep blue-teal — body copy, headings, dark surfaces (white 14.03:1) */
  --cobalt-deep:#0132A2;   /* Mount Elgon royal blue — scrolled/inner header, deep UI (white ~8.6:1) */
  /* --- neutral tints of the two above, no new hue --------------------------- */
  --wash:#F7F4EC;          /* White Cap lifted 50% toward #fff — lightest panel wash */
  --grey:#46517A;          /* muted --ink for meta and captions (white 6.40, White Cap 5.57) */
  /* --- typography ----------------------------------------------------------
     --head   Outfit, 200..700. Headings AND all UI — nav, buttons, labels,
              kickers, table headers. Outfit is kept for display because the
              theme leans on weights 200/300 for its airy headings and Lora
              starts at 400; swapping display to a serif would have silently
              re-weighted every heading on the site.
     --body   Lora, a serif for long-form reading. It also puts the warmth back
              that the palette lost when the coral left: the page is now cool
              blue-green everywhere, and a humanist serif is the one lever that
              re-warms it without adding a colour.
     --script Great Vibes. DECORATIVE ONLY, and used in exactly two places, both
              >= 30px: the header wordmark and the footer wordmark. Never for
              body copy, navigation, buttons, labels, tables or anything small. */
  --head:'Outfit',sans-serif;
  --body:'Lora',Georgia,serif;
  --script:'Great Vibes',cursive;
  /* --- role aliases: every legacy token resolves into the new set ----------- */
  --dark:var(--ink);       /* body copy, headings, hairline UI */
  --light:var(--whitecap); /* light band (inner-page hero, breadcrumbs) */
  --ivory:var(--wash);     /* panels, footer, code, hover washes */
  --line:var(--seafoam);   /* hairline — tables, FAQ, tabs, comments */
  --sand:var(--seafoam);   /* soft fill / ring (NEVER behind white text) */
  --gold:var(--aqua);      /* small bright accent on dark surfaces */
  --ocean:var(--aqua);
  --ocean-deep:var(--cobalt-deep);
  --ocean-ink:var(--ink);
  --palm:var(--cobalt-deep);
  --palm-deep:var(--ink);
  --coral:var(--aqua);     /* CTA fill — --ink on top, never white */
  --coral-d:var(--lagoon); /* CTA pressed — --ink on top (4.87:1) */
  --coral-ink:var(--cobalt-deep);
  --green:var(--cobalt-deep);
  --rose:var(--aqua);
  --rose-d:var(--lagoon);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--dark);overflow-x:hidden;background:var(--wash)}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-thumb{background:var(--ocean-deep);border-radius:10px}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:200;color:var(--dark)}
.wrap{max-width:1260px;margin:0 auto;padding:0 40px}

/* ---------- header ----------
   HEADER WIDTH BUDGET. This row is the tightest thing in the theme, and the type
   scale rise pushes on it directly. Measured at 1280 on an inner page, where the
   row is logo + nav-left + nav-right + (Check Availability + burger):

     before   283 logo + 276 + 406 + 242 + 3x20 gap = 1267 in 1160 available
              -> nav-utils ran to x=1327, 47px PAST the viewport. The burger and
                 the right edge of the CTA were already off-screen before this
                 re-skin; document.scrollWidth hid it because .header is fixed.

   Raising nav 12.5 -> 14px and the CTA 13 -> 15px would have added ~55px more, so
   the increase is paid for out of tracking and gaps rather than reverted:
     - nav letter-spacing 1.4 -> .8px. Measured on the real menu strings, Outfit
       14px/.8 is 225.5 + 359.1 = 584.6 against Poppins 12.5px/1.4 at 550.0, so
       nine tenths of the size rise is absorbed by the tracking alone.
     - .nav gap 22 -> 14px, .header-inner gap 20 -> 14px, .book-btn side padding
       30 -> 24px, .header padding 60 -> 40px (which also aligns the logo with
       .wrap's 40px content gutter).
     - the wordmark is Great Vibes 30px, which measures 229.8px against Poppins
       27px at 283px — the script buys back 53px on its own.
   After: 230 + 267.5 + 401.1 + 226.3 + 42 = ~1167 in 1200 available at 1280.
   The <=1100 and <=700 overrides below are untouched. */
.header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s ease, box-shadow .35s;padding:0 40px}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:14px}
.header.scrolled{background:var(--cobalt-deep);box-shadow:0 2px 14px rgba(11, 26, 69,.16)}
.logo{display:flex;flex-direction:column;align-items:center;line-height:1;color:#fff;flex-shrink:0}
/* Great Vibes place 1 of 2. line-height 1.25 because the script's ascenders and
   swashes run ~1.27em and .logo sets line-height:1 — at 1 they would print over
   the tagline. 37.5 + 3 + 18 = 58.5px inside a 78px row. */
.logo .l1{font-family:var(--script);font-weight:400;font-size:30px;line-height:1.25;letter-spacing:.5px}
.logo .l2{font-family:var(--head);font-weight:300;font-size:14px;letter-spacing:1.2px;margin-top:3px}
.nav{display:flex;align-items:center;gap:14px}
.nav a{color:#fff;font-family:var(--head);font-weight:300;font-size:14px;letter-spacing:.8px;text-transform:uppercase;position:relative;padding:6px 0;white-space:nowrap}
.nav a:hover{opacity:.8}
.home-ico{width:20px;height:20px;fill:#fff}
.dd{position:relative}
.dd-menu{position:absolute;top:100%;left:0;background:#fff;min-width:200px;padding:10px 0;border-radius:4px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;box-shadow:0 8px 22px rgba(11, 26, 69,.18)}
.dd:hover .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd-menu a{display:block;color:var(--ink)!important;padding:9px 20px;text-transform:none;letter-spacing:.4px;font-size:15px}
.dd-menu a:hover{color:var(--cobalt-deep)!important}
.book-btn{background:#fff;color:var(--cobalt-deep)!important;border-radius:26px;padding:12px 24px!important;font-size:15px!important;text-transform:none!important;letter-spacing:.4px!important;font-weight:400!important}
.burger{width:38px;cursor:pointer;flex-shrink:0}
.burger span{display:block;height:2px;background:#fff;margin:7px 0;border-radius:2px;transition:.3s}
.burger span:nth-child(2){width:70%;margin-left:auto}
.lang{color:#fff;font-size:14px;letter-spacing:1px;font-family:var(--head);font-weight:300;display:flex;align-items:center;gap:5px;cursor:pointer}
.lang svg{width:10px;height:10px;fill:#fff}
/* top-of-page split layout: centered logo, nav on both sides, no Book Now */
.header.at-top .header-inner{height:92px;justify-content:center;gap:24px}
/* --ink, not black: this scrim sits on the same frame as .bsl-fp-hero-overlay
   and a black one over a retinted hero shows as a grey seam under the nav. */
.header.at-top{background:linear-gradient(180deg,rgba(11, 26, 69,.45),rgba(11, 26, 69,0))}
.header.at-top .nav-left{justify-content:flex-end}
.header.at-top .nav-right{justify-content:flex-start}
.header.at-top .nav-left,.header.at-top .nav-right{flex:1}
.header.at-top .book-btn{display:none}
/* scrolled layout: logo left, nav centre, Book Now on the right */
.header.scrolled .header-inner{justify-content:flex-start}
.header.scrolled .logo{order:0;margin-right:auto}
.header.scrolled .nav-left{order:1}
.header.scrolled .nav-right{order:2}
.header.scrolled .nav-utils{order:3;margin-left:auto}
.header.scrolled .nav-left .dd .dd-menu{left:0}
.header.scrolled .lang{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.hero-slide.on{opacity:1}
.hero-badge{position:absolute;right:88px;bottom:180px;width:130px;height:130px;border-radius:50%;z-index:5;box-shadow:0 6px 18px rgba(0,0,0,.25)}
/* booking bar */
.bookbar{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(103deg,rgba(11, 26, 69,.9) 0%,rgba(1, 50, 162,.9) 100%);backdrop-filter:saturate(140%) blur(6px);border-top:1px solid rgba(201, 214, 242,.3);z-index:6}
.bookbar-in{max-width:1260px;margin:0 auto;display:flex;align-items:center;padding:18px 40px;gap:0}
.bb-cell{flex:1;padding:0 34px;border-right:1px solid rgba(255,255,255,.25);cursor:pointer}
.bb-cell:first-child{padding-left:12px}
.bb-cell .lbl{color:#D5C7AB;font-size:15px;letter-spacing:.6px;margin-bottom:7px;font-family:var(--head);font-weight:300}
.bb-cell .val{color:#fff;font-family:var(--head);font-weight:300;font-size:19px}
.bb-cell.promo{border-right:none}
.bb-cell.promo .val{font-size:15.5px;color:#EEE4D1}
.bb-btn{background:var(--coral);color:var(--dark);border:none;border-radius:26px;padding:15px 42px;font-family:var(--head);font-weight:300;font-size:15px;cursor:pointer;white-space:nowrap;transition:.3s}
.bb-btn:hover{background:var(--coral-d)}

/* ---------- shared ---------- */
.kicker{display:flex;align-items:center;gap:9px;color:var(--ocean-deep);font-family:var(--head);font-weight:300;font-size:15.5px;letter-spacing:.6px}
/* The diamond is the one place raw Ocean Breeze appears on a light surface at rest.
   It is purely decorative — it carries no information, the kicker text beside it does,
   at 5.69:1 — so the 2.05:1 it measures against white is not a text or UI-component
   ratio. Nothing else on a light surface uses --ocean as anything but a fill. */
.kicker::before{content:"";width:9px;height:9px;background:var(--ocean);transform:rotate(45deg);flex-shrink:0}
.kicker.center{justify-content:center}
.pill{display:inline-block;border:1px solid var(--dark);border-radius:24px;padding:11px 30px;font-family:var(--head);font-weight:300;font-size:15.5px;cursor:pointer;background:transparent;transition:.3s;color:var(--dark)}
.pill.dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.pill.rose{background:var(--coral);color:var(--dark);border-color:var(--coral)}
.pill.ghost-w{border-color:#fff;color:#fff}
.pill:hover{opacity:.85}
.rose-btn{display:inline-block;background:var(--coral);color:var(--dark);border:none;border-radius:24px;padding:13px 36px;font-family:var(--head);font-weight:300;font-size:15.5px;letter-spacing:.6px;cursor:pointer;transition:.3s}
.rose-btn:hover{background:var(--coral-d)}
.site-main section{position:relative}

/* intro */
.intro{padding:120px 0 110px;text-align:center}
.intro h1{font-size:54px;line-height:1.2;max-width:820px;margin:14px auto 34px}
.intro p{max-width:800px;margin:0 auto 14px;font-size:16.5px;line-height:1.65;color:#45413A;font-weight:300}
.intro p a{border-bottom:1px solid var(--ocean-deep);color:var(--dark)}

/* getting here */
/* The crossing, read as a gradient: Ocean Breeze deepened at the top (white 5.69:1),
   through Palm Green at the island (5.27:1), into deep palm at the shore (11.06:1).
   Every stop and every interpolated point between them clears AA for white body copy;
   the lightest point of the band is the 0% stop at 5.69:1. */
.gethere{background:linear-gradient(160deg,#0132A2 0%,#011E6B 55%,#0B1A45 100%);color:#fff;padding:110px 0;overflow:hidden}
.gethere-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
.gethere .kicker{color:#fff}.gethere .kicker::before{background:var(--ocean)}
.gethere h2{color:#fff;font-size:52px;margin:14px 0 26px}
.gethere p{font-size:15.5px;line-height:1.7;font-weight:300;max-width:430px;margin-bottom:30px}
/* Sand Beige pill rather than the donor white glass. A translucent white fill on a
   mid-tone band lifted the surface and dropped the white label to 3.83:1 (3.09:1 on the
   new band); a charcoal glass fixed the label but left the button boundary at 1.31:1
   against the band. Solid Sand Beige carries a charcoal label at 10.17:1 and reads as a
   button at 3.60-3.89:1 against every stop of the band. Sand is never behind white. */
.contact-btn{display:inline-block;background:var(--sand);color:var(--dark);border-radius:24px;padding:13px 36px;font-family:var(--head);font-weight:300;font-size:15.5px;transition:.3s}
.contact-btn:hover{background:var(--ivory)}
.atoll{position:relative;text-align:center}
.atoll svg{width:100%;max-width:520px}

/* why choose us */
.why{padding:110px 0 70px;text-align:center}
.why h2{font-size:48px;margin:14px 0 26px}
.why p{max-width:830px;margin:0 auto;font-size:16px;line-height:1.7;color:#45413A;font-weight:300}
.why-banner{position:relative;height:560px;margin-top:70px;background-size:cover;background-position:center;transition:background-image .6s;display:flex;align-items:flex-start;justify-content:flex-start}
/* Weighted to the top, where .why-title sits, and all but clear by halfway so
   the photograph keeps its own colour through the body of the band. */
.why-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11, 26, 69,.34) 0%,rgba(11, 26, 69,.06) 52%,rgba(11, 26, 69,.16) 100%)}
.why-title{position:relative;z-index:2;color:#fff;font-family:var(--head);font-weight:200;font-size:58px;letter-spacing:1px;width:100%;text-align:center;margin-top:100px;text-shadow:0 2px 18px rgba(11, 26, 69,.5)}
.why-circles{position:absolute;left:50%;bottom:-66px;transform:translateX(-50%);display:flex;gap:56px;z-index:5}
.wc{width:120px;height:120px;border-radius:50%;border:1px solid var(--sand);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fff;cursor:pointer;transition:.3s;position:relative}
.wc svg{width:34px;height:34px;stroke:var(--ocean-deep);fill:none;stroke-width:1.3}
.wc span{font-size:15px;color:var(--grey);font-family:var(--head);font-weight:300;letter-spacing:.4px;text-align:center;padding:0 8px;line-height:1.25}
.wc.on{border-style:dotted;border-width:2px;border-color:var(--ocean-deep);transform:scale(1.1)}
.why-spacer{height:120px}

/* accommodation */
.accom{padding:60px 0 0;text-align:center}
.accom h2{font-size:48px;margin:14px 0 26px}
.accom>.wrap>p{max-width:830px;margin:0 auto 40px;font-size:16px;line-height:1.7;color:#45413A;font-weight:300}
.seg{display:inline-flex;gap:14px;margin-bottom:50px}
.villa-stage{position:relative;height:640px;overflow:hidden;text-align:left}
.villa-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s}
.villa-slide.on{opacity:1}
.villa-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.75) 26%,rgba(255,255,255,0) 55%)}
.villa-card{position:relative;z-index:2;max-width:430px;padding:70px 0 0 70px}
.vc-row{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.vc-row svg{width:44px;height:44px;stroke:var(--dark);fill:none;stroke-width:1.1;flex-shrink:0}
.vc-row span{font-size:15.5px;color:var(--dark);font-weight:300}
.villa-card p{font-size:15.5px;line-height:1.7;color:#45413A;font-weight:300;margin:8px 0 30px}
.villa-tabs{display:grid;grid-template-columns:repeat(4,1fr)}
.villa-tab{padding:26px 12px;text-align:center;font-family:var(--head);font-weight:300;font-size:15.5px;letter-spacing:1px;color:var(--dark);background:#fff;border-right:1px solid var(--line);cursor:pointer;transition:.3s}
.villa-tab:last-child{border-right:none}
.villa-tab.on{background:var(--ocean);color:var(--dark)}
.villa-tab:hover:not(.on){background:var(--ivory)}

/* offers */
/* Same ocean family as .gethere but with no palm in it, so the two bands are not
   twins: this one runs deep ocean to ocean-ink (white 5.69:1 -> 8.44:1). */
.offers{background:linear-gradient(160deg,#0132A2,#0B1A45);padding:100px 0 110px;color:#fff;overflow:hidden}
.offers-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:56px}
.offers .kicker{color:#fff}.offers .kicker::before{background:var(--ocean)}
.offers h2{color:#fff;font-size:50px;line-height:1.15;margin-top:14px;max-width:480px}
.off-track-wrap{position:relative}
.off-track{display:flex;gap:34px;transition:transform .5s ease}
.off-card{position:relative;flex:0 0 330px;height:400px;border-radius:6px;overflow:hidden;background-size:cover;background-position:center;cursor:pointer}
.off-card::after{content:"";position:absolute;inset:0;background:rgba(0,114,122,0);transition:.35s}
.off-card:hover::after{background:rgba(0,114,122,.42)}
.off-card h3{position:absolute;top:34px;left:0;right:0;text-align:center;color:#fff;font-size:23px;z-index:2;text-shadow:0 1px 10px rgba(11, 26, 69,.55);padding:0 20px}
.off-card .off-hover{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;opacity:0;transition:.35s;padding:0 30px;text-align:center}
.off-card:hover .off-hover{opacity:1}
.off-card .off-hover p{font-size:15.5px;line-height:1.6;font-weight:300}
.arrow-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;font-size:18px}
.arrow-btn:hover{background:rgba(255,255,255,.2)}
.off-nav-l{position:absolute;left:-64px;top:50%;transform:translateY(-50%)}
.off-nav-r{position:absolute;right:-64px;top:50%;transform:translateY(-50%)}

/* dining */
.dining{padding:110px 0 90px}
.din-head{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start;margin-bottom:46px}
.dining h2{font-size:46px;line-height:1.2;margin-top:14px}
.din-head p{font-size:15px;line-height:1.75;color:#45413A;font-weight:300;margin-top:52px}
.din-filter{display:flex;align-items:center;justify-content:space-between;margin-bottom:44px}
.din-filter .seg{margin-bottom:0}
.viewall{border:1px solid var(--ocean-deep);color:var(--ocean-deep);border-radius:24px;padding:11px 32px;font-family:var(--head);font-weight:300;font-size:15.5px;background:transparent;cursor:pointer;transition:.3s}
.viewall:hover{background:var(--ocean-deep);color:#fff}
.din-track-wrap{position:relative}
.din-track{display:flex;gap:30px;transition:transform .5s ease}
.din-card{position:relative;flex:0 0 372px;height:450px;border-radius:6px;overflow:hidden;background-size:cover;background-position:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.din-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11, 26, 69,.18),rgba(11, 26, 69,.44));transition:.35s}
.din-card:hover::before{background:rgba(0,114,122,.5)}
.din-card *{position:relative;z-index:2}
.din-card h3{color:#fff;font-size:24px;margin-bottom:14px}
.din-tag{display:inline-block;background:rgba(255,255,255,.28);color:#fff;font-size:15px;border-radius:14px;padding:6px 16px;font-family:var(--head);font-weight:300;letter-spacing:.5px}
.din-card .din-hover{max-height:0;opacity:0;overflow:hidden;transition:.4s}
.din-card:hover .din-hover{max-height:220px;opacity:1;margin-top:20px}
.din-card .din-hover p{color:#fff;font-size:15px;line-height:1.6;font-weight:300;margin-bottom:20px}
.din-ico{width:42px;height:42px;stroke:#fff;fill:none;stroke-width:1.2;margin-bottom:10px}
.din-nav{position:absolute;top:50%;transform:translateY(-50%)}
.din-nav.l{left:-58px}.din-nav.r{right:-58px}
.din-nav .arrow-btn{border-color:var(--sand);color:var(--grey)}
.din-nav .arrow-btn:hover{background:var(--ivory)}

/* experiences */
.exp{position:relative;min-height:660px;background-size:cover;background-position:center;color:#fff;display:flex;align-items:stretch;overflow:hidden}
.exp::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 55%)}
.exp-left{position:relative;z-index:2;flex:1;padding:110px 0 110px 90px;max-width:560px}
.exp .kicker{color:#fff}.exp .kicker::before{background:var(--ocean)}
.exp h2{color:#fff;font-size:50px;line-height:1.15;margin:14px 0 30px}
.exp-left p{font-size:15px;line-height:1.7;font-weight:300;max-width:420px;margin-bottom:38px}
.exp-panel{position:relative;z-index:2;margin-left:auto;align-self:flex-end;background:rgba(0,86,93,.94);width:46%;min-width:520px;padding:60px 70px 50px}
.exp-panel h3{color:#fff;font-size:26px;margin-bottom:20px;font-weight:300}
.exp-panel p{font-size:15.5px;line-height:1.7;font-weight:300;margin-bottom:30px;min-height:88px}
.exp-arrows{display:flex;gap:14px;justify-content:flex-end;margin-top:34px}

/* faq */
.faq{padding:110px 0}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.faq-item{border-bottom:1px solid var(--line);padding:26px 0}
.faq-q{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:var(--head);font-weight:300;font-size:17px;color:var(--dark);gap:20px}
.faq-q svg{width:16px;height:16px;stroke:var(--dark);fill:none;stroke-width:1.6;transition:.3s;flex-shrink:0}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a p{padding-top:16px;font-size:15.5px;line-height:1.7;color:#4F4A42;font-weight:300}
.faq-right{text-align:left}
.faq-right h2{font-size:56px;margin:14px 0 40px}
.faq-right img{border-radius:6px;width:100%;height:420px;object-fit:cover}

/* awards */
/* Sunset Coral, not a third ocean band — keeps the ocean rare here and adds the sunset
   note. White on coral is 2.73:1, so everything on this band is charcoal (5.46:1). */
.awards{background:var(--coral);padding:100px 0;color:var(--dark);overflow:hidden}
.aw-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:start;margin-bottom:54px}
.awards .kicker{color:var(--dark)}.awards .kicker::before{background:var(--dark)}
.awards h2{color:var(--dark);font-size:50px;line-height:1.15;margin-top:14px}
/* The generic .arrow-btn is drawn for dark bands; on coral it needs charcoal. */
.awards .arrow-btn{border-color:var(--dark);color:var(--dark)}
.awards .arrow-btn:hover{background:rgba(41,39,35,.14)}
.aw-grid p{font-size:15px;line-height:1.75;font-weight:300;margin-top:36px}
.aw-track-wrap{position:relative}
.aw-track{display:flex;gap:26px;transition:transform .5s}
.aw-card{flex:0 0 150px;height:132px;background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:18px}
.aw-card img{max-height:96px;object-fit:contain}
.aw-arrows-l{position:absolute;left:-58px;top:50%;transform:translateY(-50%)}
.aw-arrows-r{position:absolute;right:-58px;top:50%;transform:translateY(-50%)}

/* gallery */
.gal{padding:110px 0}
.gal-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px}
.gal h2{font-size:52px;margin-top:14px}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.gal-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;transition:.35s}
.gal-grid img:hover{transform:scale(1.03)}

/* footer */
.footer{position:relative;background:var(--ivory);padding:90px 0 0;overflow:hidden}
.footer-bg{position:absolute;left:0;right:0;bottom:0;height:560px;background-position:center bottom;background-size:cover;background-repeat:no-repeat;opacity:.85;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,black 70%);mask-image:linear-gradient(180deg,transparent,black 70%)}
.footer-in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .8fr .8fr 1fr .5fr;gap:40px;padding-bottom:60px}
.f-big a{display:block;font-family:var(--head);font-weight:200;font-size:29px;color:var(--dark);margin-bottom:22px;transition:.25s}
.f-big a:hover{color:var(--ocean-deep)}
.f-col a{display:block;font-family:var(--head);font-weight:300;font-size:15.5px;color:#45413A;margin-bottom:20px}
.f-col a:hover{color:var(--ocean-deep)}
.f-contact{font-size:15.5px;font-weight:300;color:#45413A;line-height:1.7}
.f-contact h4{font-family:var(--head);font-weight:300;font-size:15px;margin:22px 0 6px;color:var(--dark)}
.f-social{display:flex;gap:14px;margin-top:26px}
.f-social a{width:36px;height:36px;border:1px solid var(--dark);border-radius:50%;display:flex;align-items:center;justify-content:center}
.f-social svg{width:15px;height:15px;fill:var(--dark)}
.f-partners h4{font-family:var(--head);font-weight:300;font-size:15px;margin-bottom:18px}
.f-partners .xo{width:50px;height:50px;background:var(--dark);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:serif;font-size:15px;letter-spacing:1px;border:1px solid var(--gold);flex-direction:column;line-height:1.1}
/* .news-field and its input/button rules below are NOT newsletter styling any
   more — searchform.php nests .search-field and .search-submit inside a
   .news-field wrapper, so they dress the site search. The newsletter's own
   .newsletter and .news-block rules are gone with the block itself. */
.news-field{position:relative;max-width:330px}
.news-field input{width:100%;border:1px solid var(--dark);border-radius:26px;background:transparent;padding:15px 56px 15px 24px;font-family:var(--body);font-size:15.5px;outline:none;color:var(--dark)}
.news-field button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer}
.news-field svg{width:26px;height:26px;stroke:var(--dark);fill:none;stroke-width:1.3}
.f-bottom{position:relative;z-index:2;padding:26px 0 220px;font-size:15px;font-weight:300;color:#45413A}
.f-links{display:flex;gap:0;margin-bottom:24px;flex-wrap:wrap}
.f-links a{padding:0 18px;border-right:1px solid #BCB099;font-family:var(--head);font-weight:300;font-size:15px;letter-spacing:.4px}
.f-links a:first-child{padding-left:0}
.f-links a:last-child{border-right:none}
.f-copy{margin-bottom:10px}

/* mobile panel */
/* Drawer surface is the DEEP ocean, and the background must stay fully opaque — an
   alpha here let the page bleed through once. White 26px links measure 5.69:1 on
   #0132A2 (large-text floor 3:1) and the 17px sub-menu links measure the same against
   the 4.5:1 floor. On raw Aqua Foam #C6A14E they would be 2.03:1, which is why the
   drawer uses --ocean-deep and never --ocean. */
.m-panel{position:fixed;inset:0;background:var(--ocean-deep);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;opacity:0;visibility:hidden;transition:.35s}
.m-panel.open{opacity:1;visibility:visible}
.m-panel a{color:#fff;font-family:var(--head);font-weight:200;font-size:26px}
.m-close{position:absolute;top:30px;right:40px;color:#fff;font-size:34px;cursor:pointer;background:none;border:none;font-family:var(--body)}

@media(max-width:1100px){
  .nav.desk{display:none}
  .gethere-grid,.din-head,.faq-grid,.aw-grid{grid-template-columns:1fr}
  .exp{flex-direction:column}
  .exp-panel{width:100%;min-width:0;margin:0}
  .footer-in{grid-template-columns:1fr 1fr}
  .why-circles{gap:20px}
  .villa-tabs{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .off-nav-l{left:6px}.off-nav-r{right:6px}
  .din-nav.l{left:6px}.din-nav.r{right:6px}
  .aw-arrows-l{left:6px}.aw-arrows-r{right:6px}
  .header{padding:0 24px}
  .intro h1{font-size:38px}
  .bookbar-in{flex-wrap:wrap;gap:14px}
  .bb-cell{flex:1 1 40%;border:none;padding:0 8px}
}

/* ==========================================================================
   WORDPRESS ADDITIONS — everything below this line is NOT in website.html
   ========================================================================== */

/* ---------- wp core / accessibility classes ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:14px;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:6px;top:6px;z-index:100001;display:block;width:auto;height:auto;padding:15px 23px 14px;background:#fff;color:var(--dark);font-family:var(--head);font-weight:300;font-size:14px;border-radius:4px;box-shadow:0 2px 14px rgba(0,0,0,.2);clip:auto;clip-path:none}
.alignleft{float:left;margin:0 24px 20px 0}
.alignright{float:right;margin:0 0 20px 24px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto}
.alignfull{max-width:100%;width:100%;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%;margin-bottom:24px}
.wp-caption img{border-radius:4px}
.wp-caption-text,.gallery-caption{font-size:15px;line-height:1.6;color:var(--grey);font-weight:300;padding-top:8px;text-align:center}
.sticky{position:relative}
.bypostauthor{display:block}

/* ---------- admin bar offset ---------- */
body.admin-bar .header{top:32px}
@media(max-width:782px){body.admin-bar .header{top:46px}}

/* ---------- inner pages: solid header (matches .header.scrolled exactly) ---------- */
body:not(.home) .header{background:var(--ocean-deep);box-shadow:0 2px 14px rgba(0,0,0,.12)}
body:not(.home) .header .header-inner{height:78px;justify-content:flex-start}
body:not(.home) .logo{margin-right:auto;order:0;color:#fff}
body:not(.home) .nav a{color:#fff}
body:not(.home) .nav-left{order:1}
body:not(.home) .nav-right{order:2}
body:not(.home) .nav-utils{order:3;margin-left:auto}
body:not(.home) .nav-left .dd .dd-menu{left:0}
body:not(.home) .lang{display:none}
body:not(.home) .book-btn{display:inline-block}

/* ---------- page hero (slim banner on inner pages) ---------- */
.page-hero{position:relative;background:var(--light);padding:160px 0 60px;text-align:center}
.page-hero .kicker{justify-content:center;margin-bottom:10px}
.page-hero h1{font-family:var(--head);font-weight:200;font-size:48px;line-height:1.2;color:var(--dark);max-width:900px;margin:0 auto}
.page-hero p{max-width:760px;margin:18px auto 0;font-size:16px;line-height:1.7;color:#45413A;font-weight:300}
/* full-width featured image sitting between .page-hero and .page-content */
.page-hero-media{max-width:1260px;margin:0 auto 10px;padding:0 40px}
.page-hero-media img{width:100%;height:auto;display:block;max-height:520px;object-fit:cover;border-radius:4px}
/* Photo credit under a licensed hero image. CC BY / CC BY-SA REQUIRE the
   creator and licence to be legible on the page, so this must stay readable:
   --grey on --wash is 5.57:1. Do not lighten it and do not hide it. */
.page-hero-media .bsl-photo-credit{margin:8px 2px 0;font-family:var(--head);font-weight:300;font-size:13px;line-height:1.5;color:var(--grey);text-align:right;letter-spacing:.01em}
.page-hero-media .bsl-photo-credit .bsl-photo-credit-label{opacity:.85}
.page-hero-media .bsl-photo-credit a{color:var(--grey);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:from-font}
.page-hero-media .bsl-photo-credit a:hover,.page-hero-media .bsl-photo-credit a:focus-visible{color:var(--dark)}

/* ---------- the_content() typography ---------- */
.page-content{max-width:820px;margin:0 auto;padding:60px 40px 90px;font-size:18px;line-height:1.75;color:#45413A;font-weight:300}
/* if a template has no .page-hero, the first block must still clear the fixed 78px header */
body:not(.home) .site-main>.page-content:first-child{padding-top:138px}
.page-content h2{font-family:var(--head);font-weight:200;font-size:34px;line-height:1.25;color:var(--dark);margin:48px 0 18px}
.page-content h3{font-family:var(--head);font-weight:300;font-size:25px;line-height:1.3;color:var(--dark);margin:38px 0 14px}
.page-content h4{font-family:var(--head);font-weight:300;font-size:19px;line-height:1.35;color:var(--dark);margin:30px 0 12px}
.page-content p{margin-bottom:22px}
.page-content ul,.page-content ol{margin:0 0 24px;padding-left:24px}
.page-content li{margin-bottom:10px}
.page-content blockquote{border-left:3px solid var(--ocean);margin:32px 0;padding:6px 0 6px 26px;font-size:18px;line-height:1.7;color:var(--dark)}
.page-content blockquote p:last-child{margin-bottom:0}
.page-content a{border-bottom:1px solid var(--ocean-deep);color:var(--dark);transition:.25s}
.page-content a:hover{color:var(--ocean-deep)}
.page-content img{border-radius:4px;margin:30px 0;height:auto}
.page-content figure{margin:30px 0}
.page-content figure img{margin:0}
.page-content figcaption{font-size:15px;line-height:1.6;color:var(--grey);padding-top:8px;text-align:center}
.page-content .table-wrap,.page-content .wp-block-table{overflow-x:auto;margin:30px 0}
.page-content table{width:100%;border-collapse:collapse;font-size:15px}
.page-content th,.page-content td{border:1px solid var(--line);padding:12px 16px;text-align:left}
.page-content th{background:var(--ivory);font-family:var(--head);font-weight:400;color:var(--dark)}
.page-content code{background:var(--ivory);border-radius:3px;padding:2px 6px;font-size:15.5px}
.page-content pre{background:var(--ivory);border-radius:4px;padding:20px 24px;overflow-x:auto;margin:26px 0}
.page-content pre code{background:none;padding:0}

/* ---------- post grid (archive / blog listing) ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.post-card{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.07);transition:.3s;display:flex;flex-direction:column}
.post-card:hover{box-shadow:0 8px 26px rgba(0,0,0,.12);transform:translateY(-3px)}
.post-card-media{display:block;overflow:hidden}
.post-card-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:.35s}
.post-card:hover .post-card-media img{transform:scale(1.04)}
/* content-card.php has no inner body wrapper — pad the direct children instead */
.post-card>h2,.post-card>h3,.post-card>p,.post-card>.entry-meta,.post-card>.pill,.post-card>.read-more{margin-left:24px;margin-right:24px}
.post-card>h2,.post-card>h3{margin-top:26px}
.post-card h2,.post-card h3{font-family:var(--head);font-weight:300;font-size:21px;line-height:1.35;color:var(--dark);margin-bottom:12px}
.post-card h2 a:hover,.post-card h3 a:hover{color:var(--ocean-deep)}
.post-card p{font-size:15.5px;line-height:1.7;color:#45413A;font-weight:300;margin-bottom:20px}
.post-card>.pill,.post-card>.read-more{margin-top:auto;margin-bottom:28px;align-self:flex-start}
.post-card .read-more{color:var(--ocean-deep);font-family:var(--head);font-weight:300;font-size:15px;letter-spacing:.6px;border-bottom:1px solid var(--ocean-deep);padding-bottom:2px}
.post-card .read-more:hover{opacity:.75}

/* ---------- pagination (scoped so header .nav rules cannot leak in) ---------- */
.pagination{margin:60px 0 20px;text-align:center}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.pagination .nav-links a,.pagination .nav-links span{display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:24px;background:transparent;border:1px solid rgba(0,114,122,.7);color:var(--dark);font-family:var(--head);font-weight:300;font-size:15.5px;letter-spacing:normal;text-transform:none;transition:.3s}
.pagination .nav-links a:hover{background:var(--ocean);color:var(--dark);opacity:1}
.pagination .nav-links .current{background:var(--ocean);border-color:var(--ocean);color:var(--dark)}
.pagination .nav-links .dots{border-color:transparent}

/* ---------- post navigation / meta / listing states ---------- */
.post-nav{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:820px;margin:0 auto;padding:0 40px 80px}
.post-nav a{font-family:var(--head);font-weight:300;font-size:15.5px;color:var(--dark);border:1px solid rgba(0,114,122,.7);border-radius:24px;padding:11px 28px;transition:.3s}
.post-nav a:hover{background:var(--ocean);color:var(--dark)}
.entry-meta{font-size:15px;font-weight:300;color:var(--grey);font-family:var(--head);letter-spacing:.4px;margin-bottom:14px}
.entry-meta a{border-bottom:1px solid var(--ocean-deep)}
.search-results-header{max-width:1260px;margin:0 auto;padding:0 40px 40px;font-size:16px;line-height:1.7;color:#45413A;font-weight:300}
.search-results-header h1{font-family:var(--head);font-weight:200;font-size:34px;color:var(--dark)}

/* ---------- search form (searchform.php nests .search-field/.search-submit in .news-field) ---------- */
.search-form{position:relative;max-width:330px}
.search-form .news-field{max-width:none}
.search-field{width:100%;border:1px solid var(--dark);border-radius:26px;background:transparent;padding:15px 56px 15px 24px;font-family:var(--body);font-size:15.5px;outline:none;color:var(--dark);-webkit-appearance:none;appearance:none}
.search-field::-webkit-search-cancel-button,.search-field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search-submit{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;line-height:0}
.search-submit svg{width:26px;height:26px;stroke:var(--dark);fill:none;stroke-width:1.3}
.no-results{max-width:820px;margin:0 auto;padding:60px 40px 100px;text-align:center;font-size:16px;line-height:1.7;color:#45413A;font-weight:300}
.no-results h2{font-size:32px;margin-bottom:18px}
.error-404{max-width:820px;margin:0 auto;padding:180px 40px 120px;text-align:center}
.error-404 .code{font-family:var(--head);font-weight:200;font-size:96px;line-height:1;color:var(--ocean-deep);margin-bottom:10px}
.error-404 h1{font-size:38px;margin-bottom:18px}
.error-404 p{font-size:16px;line-height:1.7;color:#45413A;font-weight:300;margin-bottom:30px}

/* ---------- comments ---------- */
.comments-area{max-width:820px;margin:0 auto;padding:0 40px 90px}
.comment-respond .comment-reply-title{font-family:var(--head);font-weight:200;font-size:30px;color:var(--dark);margin-bottom:28px}
.comments-title{font-family:var(--head);font-weight:300;font-size:24px;color:var(--dark);margin-bottom:24px}
.comment-list{list-style:none;margin:0 0 50px;padding:0}
.comment-list ol.children{list-style:none;margin:0;padding-left:34px}
.comment-body{border-bottom:1px solid var(--line);padding:24px 0;font-size:15px;line-height:1.75;color:#45413A;font-weight:300}
.comment-body .fn{font-family:var(--head);font-weight:400;font-style:normal;color:var(--dark)}
.comment-body .comment-metadata{font-size:15px;color:var(--grey);margin-bottom:10px}
.comment-body .avatar{border-radius:50%;float:left;margin:0 16px 10px 0}
.comment-body .reply a{color:var(--ocean-deep);font-family:var(--head);font-weight:300;font-size:15px;border-bottom:1px solid var(--ocean-deep)}
.comment-respond{margin-top:20px}
.comment-respond .comment-form-comment,.comment-respond p{margin-bottom:18px}
.comment-respond label{display:block;font-family:var(--head);font-weight:300;font-size:15px;color:var(--dark);margin-bottom:8px}
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea{width:100%;border:1px solid var(--dark);border-radius:26px;background:transparent;padding:15px 24px;font-family:var(--body);font-size:15.5px;outline:none;color:var(--dark)}
.comment-respond textarea{border-radius:16px;min-height:150px;resize:vertical}
.comment-respond input[type=submit]{display:inline-block;background:var(--coral);color:var(--dark);border:none;border-radius:24px;padding:13px 36px;font-family:var(--head);font-weight:300;font-size:15.5px;letter-spacing:.6px;cursor:pointer;transition:.3s}
.comment-respond input[type=submit]:hover{background:var(--coral-d)}

/* ---------- mobile menu hardening (verified at 390x820) ---------- */
.m-panel{justify-content:flex-start;padding:90px 24px 80px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}
body.admin-bar .m-panel{top:32px;height:calc(100dvh - 32px)}
@media(max-width:782px){body.admin-bar .m-panel{top:46px;height:calc(100dvh - 46px)}}
html.nav-open,body.nav-open{overflow:hidden;height:100%;touch-action:none}
.m-panel ul{list-style:none;text-align:center;width:100%;max-width:420px}
.m-panel li{list-style:none}
.m-panel .sub-menu,.m-panel .dd-menu{display:block!important;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;padding:6px 0 0;margin:0 0 6px}
.m-panel .sub-menu a,.m-panel .dd-menu a{font-size:17px;opacity:.85}
.m-panel .dd-menu a{color:#fff!important}
.m-close{z-index:210}

/* ---------- JS-filtered / hidden items ----------
   Generic: .villa-slide is position:absolute and .din-card is display:flex, both of which
   beat the UA [hidden] default — without this, residences/bars paint over the visible set. */
[hidden]{display:none!important}
.villa-tab[hidden],.din-card[hidden],.villa-slide[hidden]{display:none!important}

/* ---------- responsive polish the source lacks ---------- */
@media(max-width:1100px){
  .exp-panel{align-self:auto}
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .intro h1{font-size:30px}
  .gethere h2,.why h2,.accom h2,.offers h2,.dining h2,.exp h2,.awards h2,.gal h2{font-size:32px}
  .faq-right h2{font-size:34px}
  .why-title{font-size:30px;margin-top:60px}
  .wrap{padding:0 20px}
  .header{padding:0 16px}
  /* Solid-header layout (inner pages + .scrolled home) is logo + Book Now + burger.
     At 390px that measured 386px against 358px of usable width, pushing #burger to
     right:402 — 12px off-screen and untappable. Trimming the pill's side padding and
     the header gap brings the burger back to right:374 (the padding edge). */
  .header-inner{gap:12px}
  .book-btn{padding:12px 20px!important}
  /* .gal-head is display:flex;justify-content:space-between with no wrap, so the
     Instagram/Facebook .seg (258px wide) was pushed to right:424.9 and widened the
     document to 425px at a 390px viewport. Scoped to <=700px: at 700px and above the
     row still fits on one line, so the desktop/tablet layout is untouched. */
  .gal-head{flex-wrap:wrap;row-gap:20px}
  .villa-card{padding:40px 24px 0;max-width:100%}
  .villa-stage{height:auto;min-height:560px}
  .exp-left{padding:70px 24px}
  .exp-panel{min-width:0;width:100%;padding:40px 24px}
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .footer-in{grid-template-columns:1fr}
  .f-bottom{padding-bottom:120px}
  .hero-badge{width:86px;height:86px;right:20px;bottom:230px}
  .bookbar-in{padding:14px 16px}
  .off-card{flex:0 0 78vw}
  .din-card{flex:0 0 82vw;height:380px}
  .why-circles{position:static;transform:none;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;justify-items:center;margin-top:24px}
  .why-spacer{height:0}
  .why-banner{height:380px;margin-top:40px}
  .page-hero{padding:120px 0 44px}
  .page-hero h1{font-size:32px}
  .page-hero-media{padding:0 20px}
  .page-hero-media img{max-height:300px}
  .page-hero-media .bsl-photo-credit{font-size:12.5px;text-align:left}
  .page-content{padding:44px 20px 70px}
  .page-content h2{font-size:27px}
  .page-content h3{font-size:21px}
  .post-nav,.comments-area,.search-results-header{padding-left:20px;padding-right:20px}
  .error-404{padding:140px 20px 90px}
  .error-404 .code{font-size:70px}
  .post-grid{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   Brovad layout deltas — folded in from header.php's inline block.
   Footer regridded to 4 columns (the donor's "Our Partners" column is gone);
   villa tabs regridded to 3 (Brovad has three room types, not four).
   ========================================================================== */
.site-footer .footer-in{grid-template-columns:1.1fr .8fr .8fr 1fr}
/* Four room types: Standard Rooms, Brovad Suites, Deluxe Rooms, Family Villa. */
#villaTabs{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){
  .site-footer .footer-in{grid-template-columns:1fr 1fr}
  /* Two-up rather than a single column — four stacked tabs is a lot of scroll. */
  #villaTabs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  #villaTabs{grid-template-columns:1fr}
}

/* ==========================================================================
   Front-end QA fixes (390x820 mobile emulation, real touch events)
   ========================================================================== */

/* BLOCKER 1 — the hamburger sat 143px off-screen on every inner page at 390px,
   making the mobile menu unopenable anywhere except the top of the home page.
   Cause: `.header.at-top .book-btn{display:none}` only hides the CTA in the
   at-top state, while `body:not(.home) .book-btn{display:inline-block}` forces
   it back on for every inner page at every width. In the solid state the row
   needs logo 283 + 12 + button 162 + 22 + burger 38 = 517px against 358px of
   usable width. The earlier 700px mitigation was calibrated when the overhang
   was 12px; renaming the CTA to "Check Availability" grew it to 143px.
   Below 700px the burger IS the navigation, so the CTA gives way to it. */
@media(max-width:700px){
  body:not(.home) .book-btn,
  .header.scrolled .book-btn{display:none!important}
}

/* BLOCKER 2 — six invisible drawer links were intercepting taps on every page
   at every viewport. `.m-panel` closed is opacity:0 + visibility:hidden, but
   the sub-menu rule re-declared `visibility:visible` on its subtree, which
   restores hit-testing; opacity:0 suppresses paint, not pointer events. A real
   touch at (195,157) on the home page navigated to /rooms/standard-rooms/.
   Gate the whole open-drawer treatment behind `.m-panel.open`. */
.m-panel:not(.open){pointer-events:none}
.m-panel:not(.open) .sub-menu,
.m-panel:not(.open) .dd-menu{visibility:hidden}

/* MAJOR 3 — at 1440 the sticky bar sat over six footer links at max scroll.
   Give the page enough tail room that the bar never lands on footer content. */
body .site-footer{padding-bottom:96px}

/* ---- Brand marks -------------------------------------------------------- */
/* Two files, one shape: both PNGs are 155x70, so height alone drives the size
   at a fixed 2.21:1. width:auto is load-bearing — .logo is a flex column and
   would otherwise stretch the mark to the column's width. The header takes the
   white file because the header is dark in all three of its states; the footer
   takes the --ink file because its ground is --ivory. */
/* 44px, not the old 54: the supplied artwork is only 70px tall, so 54 was already
   asking a 70px source to fill 54 CSS px — fine at 1x, soft on any 2x screen.
   44 keeps it comfortably inside its own resolution. RAISE THIS BACK once a
   larger master (or an SVG) exists; the header row can carry 54. */
.logo-mark{height:44px;width:auto;display:block;flex-shrink:0}
/* .footer-bg is absolutely positioned and paints over static siblings, so the
   footer mark needs its own stacking context the same way .footer-in does. */
.f-brand{position:relative;z-index:2;margin-bottom:44px}
.f-brand img{height:44px;width:auto;display:block}

@media(max-width:700px){
  /* The mobile header row is width-critical (see the burger note above), so the
     mark comes down with it rather than eating the space Book Now needs. */
  .logo-mark{height:34px}
  .f-brand{margin-bottom:34px}
  .f-brand img{height:44px}
}

/* ---- Why banner: every panel is a still --------------------------------- */
/* The .why-video rules that used to sit here are gone with the <video> the
   first panel played. The band is now nothing but its background-image, which
   .why-banner (section 'why', above) already owns and transitions, so there is
   no media layer left to stack. If footage is ever wanted here again it needs
   all three pieces back together — the element in template-parts/section-why.php,
   the data-video flag on the first .wc, and the branch in assets/js/main.js. */

/* Desktop nav, tightened between the tablet breakpoint and a roomy desktop.
   The header row is logo + two nav groups + Check Availability + burger. Adding
   "Home" to the left group took the row to 1206px inside a 1190px header at a
   1280px viewport — 16px over, absorbed silently but leaving the nav cramped
   and one word away from colliding. Pulling the inter-item gap and the tracking
   in over this range buys back about 50px, which is comfortably clear. Above
   1400px nothing changes; below 1100px the burger takes over anyway. */
@media(min-width:1101px) and (max-width:1400px){
  .nav{gap:10px}
  .nav a{letter-spacing:.5px;font-size:13.5px}
  .header-inner{gap:18px}
}

/* ---- Hallmarks band ------------------------------------------------------ */
/* Sits between .intro and .why, which previously ran 110px of padding into
   another 110px. The band is deliberately quiet: one script line, a hairline,
   four figures, and a closing sentence. Its whole effect comes from air and
   from the weight contrast between the light display figures and the small
   letterspaced labels — there is no fill, no border box and no gold. */
/* .intro already ends on 110px of padding and .why opens on another 110px, so
   this band adds very little of its own — otherwise the fix for a gap becomes a
   second, larger gap. */
.mte-hallmarks{padding:6px 0 26px;text-align:center}
.mte-hallmarks-script{
  font-family:var(--script);font-size:34px;line-height:1.1;color:var(--ocean-deep);
  margin:0 0 30px;font-weight:400}
/* The hairline is drawn by the row itself so it can never drift away from the
   figures the way a separate <hr> would. */
.mte-hallmarks-row{
  list-style:none;margin:0;padding:34px 0 0;border-top:1px solid var(--line);
  display:flex;justify-content:center;align-items:flex-start;gap:0}
.mte-hallmark{flex:1 1 0;padding:0 26px;position:relative;min-width:0}
/* Vertical rules BETWEEN items only — a trailing rule on the last item is the
   detail that makes a row like this look machine-made. */
.mte-hallmark + .mte-hallmark::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
.mte-hallmark-figure{
  display:block;font-family:var(--head);font-weight:200;font-size:46px;line-height:1.05;
  letter-spacing:-.5px;color:var(--dark)}
.mte-hallmark-label{
  display:block;margin-top:12px;font-family:var(--head);font-weight:300;font-size:12.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--grey)}
.mte-hallmarks-note{
  margin:38px auto 0;max-width:640px;font-family:var(--body);font-weight:300;
  font-size:15.5px;line-height:1.7;color:var(--grey)}

@media(max-width:820px){
  .mte-hallmarks{padding:4px 0 18px}
  .mte-hallmarks-script{font-size:28px;margin-bottom:24px}
  /* 2x2 rather than a squeezed single row: at four across the figures drop below
     30px and the labels start wrapping mid-phrase. */
  .mte-hallmarks-row{flex-wrap:wrap;padding-top:28px}
  .mte-hallmark{flex:0 0 50%;padding:18px 14px}
  /* With two per row the "between only" rule has to reset on every third item,
     and the horizontal split needs its own hairline. */
  .mte-hallmark:nth-child(odd)::before{display:none}
  .mte-hallmark:nth-child(n+3){border-top:1px solid var(--line)}
  .mte-hallmark-figure{font-size:34px}
  /* "By road from Kampala" takes two lines at this width while the other three
     take one, which leaves the bottom row sitting proud. Reserving two lines on
     every label keeps the 2x2 grid square. */
  .mte-hallmark-label{font-size:11.5px;letter-spacing:1.3px;margin-top:9px;min-height:2.4em}
  .mte-hallmarks-note{margin-top:28px;font-size:14.5px}
}
@media(max-width:430px){
  .mte-hallmark{padding:16px 8px}
  .mte-hallmark-figure{font-size:30px}
}


/* ---- Destination map, last band before the footer ------------------------ */
/* The map used to print after </footer>; it now closes the front page's own
   flow, below the gallery and above the footer. It brings its own height, so
   this only stops it inheriting a centred text alignment from anything above.
   Renamed from .mte-footer-map with the move - the old name described a
   position the band no longer has.

   position:relative also makes this the containing block for .mte-map-skip
   below. The wrapper holds the map and nothing else, so its box IS the map's
   box and "bottom: 168px" means 168px up from the bottom edge of the map. */
.mte-home-map{display:block;position:relative;text-align:left}
.mte-home-map .elgon-map{margin:0}

/* Scroll-past control.

   A full-bleed map with cooperativeGestures:false eats the wheel, so this is
   the way out: a real <a>, first in the tab order for the band, accessible name
   "Skip the map", jumping to #site-footer.

   PLACEMENT. Low and centred, floating over the canvas - where the eye goes
   looking for "more below". The map's own furniture owns the rest of that edge,
   so the offsets are measured off it rather than guessed:

     desktop (>860px)  .em-ribbon is 149px tall across the full width, with the
                       ODbL credit inside it at bottom:9. Sitting at bottom:168
                       clears the ribbon by 19px, and the zoom stack and the
                       elevation scale both start at bottom:152 but hug the
                       right and left edges, so a centred pill passes between
                       them.
     phone/tablet      under 860px the component stacks its furniture up the
     (<=860px)         whole lower half: ribbon 0-140, filter chip rail 128-182,
                       trail bar 178-236, zoom stack and elevation from 200.
                       bottom:250 is the first line clear of all of it.

   z-index 23 puts it over the canvas and over the ribbon (22) but under the
   credit (24) and under the destination card (30) - so a card the map opens
   covers it rather than fighting it, which is the right precedence.

   It is shrink-wrapped to its own text: there is no invisible full-width layer,
   so every pixel around it still passes pointer events to the map. */
.mte-map-skip{
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:168px;
  z-index:23;
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 20px;                  /* 44px tap target */
  border-radius:999px;
  font-family:var(--head);font-size:12.5px;font-weight:300;
  letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap;
  /* The map's own glass chrome, so this reads as part of the component: ivory
     #F7F4EC on a near-opaque #060F2C plate is 16:1, and the plate keeps it
     legible over the light patches of the terrain relief as well as the navy. */
  color:#F7F4EC;text-decoration:none;
  background:rgba(6,15,44,.86);
  border:1px solid rgba(143,160,198,.28);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  transition:color .25s ease,background .25s ease,border-color .25s ease;
}
.mte-map-skip:hover{color:#C6A14E;border-color:rgba(198,161,78,.55);background:rgba(6,15,44,.94)}
.mte-map-skip:focus-visible{outline:2px solid #C6A14E;outline-offset:3px;color:#C6A14E}
.mte-map-skip-arrow{width:15px;height:15px;flex:0 0 auto;animation:mte-map-skip-nudge 2.4s ease-in-out infinite}
@keyframes mte-map-skip-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
/* The site-wide reduced-motion block near the top of this file zeroes animation
   DURATION, which would leave the arrow parked at whatever the 0% frame is.
   Turn it off outright instead. The jump itself is already unanimated there:
   html{scroll-behavior:smooth} is reset to auto in that same block. */
@media(prefers-reduced-motion:reduce){
  .mte-map-skip-arrow{animation:none;transform:none}
}
@media(max-width:860px){
  .mte-map-skip{bottom:250px;font-size:11.5px;letter-spacing:1.2px;padding:0 17px}
}

/* The jump target. .header is position:fixed and 78px tall at every breakpoint,
   so without this the footer's first line lands underneath it. */
#site-footer{scroll-margin-top:90px}


/* ==========================================================================
   MOBILE LAYOUT FIXES — faults measured in Chrome at 375 / 390 / 414px
   ========================================================================== */

/* ---- .why-banner: circles landed on top of the title, and off the screen --- */
/* The <=700px block above deliberately turns .why-circles from an absolutely
   positioned overlay into an ordinary in-flow 2x2 grid. What it missed is that
   .why-banner is display:flex — so the circles became a SECOND flex item beside
   .why-title, which is width:100%. Flex squeezed the title down to ~127px, the
   circles started where it ended, and their 258px grid ran to x=385 against a
   375px viewport. That was the only horizontal overflow anywhere on the site,
   and the circles also sat squarely on top of the banner's headline.
   Stacking the banner is what that block was always assuming: title first,
   circles beneath it, both still inside the photo band. */
@media(max-width:700px){
  .why-banner{display:block;height:auto;padding-bottom:34px}
  /* As the first child of a block the title's margin-top would collapse out
     through the banner and drag the whole band down the page, so the gap above
     it has to be padding rather than margin. */
  .why-title{margin-top:0;padding-top:60px}
  /* A gutter the two 120px columns can never be pushed past, whatever the
     viewport: at 375px the grid is the widest thing in the section. */
  .why-circles{margin-left:20px;margin-right:20px}
}

/* ---- mobile drawer: links were a 33px tap target ------------------------- */
/* The drawer links are 26px type sitting in a 33px line box, and because they
   are centred the hit area was only as wide as the label — "Contact" was 92px
   wide and 33px tall, well under the 44px the rest of this file works to.
   Padding makes the whole row tappable; the flex gap gives back exactly what
   the padding adds, so the spacing between labels is unchanged and the drawer
   is no taller than before. */
@media(max-width:1100px){
  .m-panel{gap:14px}
  .m-panel a{display:block;padding:6px 12px}
  /* Sub-menu links are 17px and sit tighter by design; they only need the
     shortfall to 44px made up, not the parent's full padding. */
  .m-panel .sub-menu a,.m-panel .dd-menu a{padding:9px 12px}
}

/* ---- <picture> wrappers around absolutely-positioned card images --------- */
/* .bsl-fp-media is position:absolute;inset:0 and fills its card. Wrapping it in
   a <picture> to serve WebP quietly broke that: .din-card * (and the equivalent
   rules on the offer, experience and gallery cards) set position:relative on
   every descendant, so the new <picture> became the image's containing block —
   and since an absolutely-positioned child gives its parent no height, that
   block was 0x0. The image sized itself against nothing and vanished.
   The wrapper therefore has to be the fill box itself. Any future <picture>
   placed around a .bsl-fp-media needs this class for the same reason. */
.bsl-media-wrap{position:absolute;inset:0;display:block}

/* ---- Mobile drawer: sub-menu tap targets -------------------------------- */
/* The drawer now carries the full hierarchy, so most of its rows are sub-menu
   links (.dd-menu a). Those rendered at 39px — under the 44px a fingertip
   needs, and the shortest rows in the panel. 11px of vertical padding takes
   them to 45px, matching the top-level items above them. Only inside the
   drawer: the same .dd-menu is a hover flyout on desktop, where it is fine. */
@media(max-width:700px){
  .m-panel .dd-menu a{padding-top:12px;padding-bottom:12px}
}