/*
Theme Name: Brovad Sands Lodge
Theme URI: http://localhost/sands
Author: Rich
Description: Lakeside island resort theme for Brovad Sands Lodge on Bugala Island, Kalangala — the Ssese Islands on Lake Victoria, Uganda. Light and photography-led, built on a Lagoon palette of Lake Victoria blues and aquas, set in Outfit, Lora and Great Vibes. 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: brovad-sands
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 #0080A8  white 4.51:1   Lagoon    #00A8B8  white 2.88:1
     Aqua Foam   #40C8CC  white 2.03:1   Seafoam   #90E0DA  white 1.52:1
     White Cap   #D8F5F2  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        #07303C  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 #00607D 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:#0080A8;        /* Cobalt Wave — PRIMARY brand tone (white 4.51:1: rings/strokes, not surfaces) */
  --lagoon:#00A8B8;        /* Lagoon — SECONDARY. --ink only (4.87:1); never white (2.88:1) */
  --aqua:#40C8CC;          /* Aqua Foam — accents, active fills, PRIMARY CTA. --ink 6.91:1 */
  --seafoam:#90E0DA;       /* Seafoam — soft fills, rings, hairlines. --ink 9.26:1 */
  --whitecap:#D8F5F2;      /* White Cap — page washes, lightest band. --ink 12.20:1 */
  /* --- derived (2): the set has no dark tone and no warm accent ------------- */
  --ink:#07303C;           /* deep blue-teal — body copy, headings, dark surfaces (white 14.03:1) */
  --cobalt-deep:#00607D;   /* Cobalt Wave darkened for UI (white 7.07:1) */
  /* --- neutral tints of the two above, no new hue --------------------------- */
  --wash:#ECFAF8;          /* White Cap lifted 50% toward #fff — lightest panel wash */
  --grey:#42646E;          /* 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:#fff}
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(7,48,60,.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(7,48,60,.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(7,48,60,.45),rgba(7,48,60,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(7,48,60,.9) 0%,rgba(0,96,125,.9) 100%);backdrop-filter:saturate(140%) blur(6px);border-top:1px solid rgba(144,224,218,.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,#00607D 0%,#00506A 55%,#07303C 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(7,48,60,.34) 0%,rgba(7,48,60,.06) 52%,rgba(7,48,60,.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(7,48,60,.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,#00607D,#07303C);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(7,48,60,.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(7,48,60,.18),rgba(7,48,60,.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
   #00607D (large-text floor 3:1) and the 17px sub-menu links measure the same against
   the 4.5:1 floor. On raw Aqua Foam #40C8CC 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}

/* ---------- 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-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 322x87, so height alone drives the size
   at a fixed 3.70: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
   reversed (white) file because the header is dark in all three of its states;
   the footer takes the navy file because its ground is --ivory. */
/* 54px, not 40: the tagline line under the mark is gone, so the whole 78px
   header row is the mark's to use. 54 + the row's own breathing space is the
   largest the 87px-tall source can go before it starts to soften. */
.logo-mark{height:54px;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:52px;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:40px}
  .f-brand{margin-bottom:34px}
  .f-brand img{height:44px}
}

/* ---- Why banner: the first panel is a video ----------------------------- */
/* Sits above the banner's background-image and below .why-banner::after, so the
   wash, the title and the circles all still read over it. Opacity rather than
   display so switching panels crossfades instead of snapping, and so a paused
   clip keeps its layout box. */
.why-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
  z-index:0;
}
.why-video.on{opacity:1}

@media(prefers-reduced-motion:reduce){
  .why-video{transition:none}
}

/* 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}
}