/*
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)}
/* ---------- Getting Here: the corridor map ----------------------------------
   Real geodata, drawn to scale: see template-parts/section-gethere.php for the
   provenance of every layer. Everything is a class on inline SVG so the map
   takes the band's own palette instead of a tile provider's. Nothing here loads
   a script, a tile or a font -- the only map library on this page is the one
   MapLibre instance the destination map lower down already pays for. */
.atoll{position:relative}
.ghm{
  margin:0;width:100%;max-width:580px;
  --ghm-ink:#020F33;      /* water + halos: darker than the band's darkest stop */
  --ghm-line:#C9D6F2;     /* Seafoam - contours, borders, secondary labels */
  --ghm-shore:#8FA8DE;    /* shoreline and the Victoria Nile */
  --ghm-road:#DCBC6E;     /* Aqua Foam lifted, so a 2.6u line still reads at 390px */
}
.ghm-svg{display:block;width:100%;height:auto}

/* --- the drawn sheet --- */
.ghm-bg{fill:var(--ghm-ink);opacity:.20}
.ghm-frame{fill:none;stroke:var(--ghm-line);stroke-opacity:.26;stroke-width:1.2}
.ghm-water{fill:var(--ghm-ink);opacity:.72;stroke:var(--ghm-shore);stroke-width:.8;stroke-opacity:.5}
.ghm-isle{fill:#0B1A45;fill-opacity:.42;stroke:var(--ghm-shore);stroke-width:.55;stroke-opacity:.4}
.ghm-river{fill:none;stroke:var(--ghm-shore);stroke-width:1.4;stroke-opacity:.8}
.ghm-hyp{fill:var(--ghm-line);opacity:.055}
.ghm-c{fill:none;stroke:var(--ghm-line);stroke-width:.6;opacity:.26}
.ghm-c3000,.ghm-c3200,.ghm-c3400,.ghm-c3800,.ghm-c4200{opacity:.44}
.ghm-border{fill:none;stroke:var(--ghm-line);stroke-width:1.1;stroke-dasharray:7 5;opacity:.45}
.ghm-road-halo{fill:none;stroke:var(--ghm-ink);stroke-width:6.5;opacity:.5;stroke-linejoin:round;stroke-linecap:round}
.ghm-road{fill:none;stroke:var(--ghm-road);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.ghm-spur{fill:none;stroke:var(--ghm-line);stroke-width:1.7;stroke-dasharray:6 5;stroke-linecap:round;opacity:.8}

/* --- labels. paint-order gives every label a dark halo, so a place name stays
       legible where it crosses a contour or the lake shore. --- */
.ghm-lab text{
  font-family:var(--head);font-weight:300;fill:#fff;
  paint-order:stroke;stroke:var(--ghm-ink);stroke-width:2.8;stroke-opacity:.5;stroke-linejoin:round}
.ghm-place{font-size:17px}
.ghm-place-min{font-size:14.5px}
.ghm-sea{fill:var(--ghm-line);fill-opacity:.92;font-size:15px}
.ghm-sm{font-size:13px}
.ghm-xs{font-size:11.5px;stroke-width:2.2}
.ghm-dot{fill:#fff}
.ghm-dot-min{fill-opacity:.9}
.ghm-peak{fill:var(--ghm-road)}
.ghm-hotel{fill:var(--ghm-road);stroke:var(--ghm-ink);stroke-width:2;stroke-opacity:.8}
.ghm-hotel-ring{fill:none;stroke:var(--ghm-road);stroke-opacity:.42;stroke-width:1.2}
.ghm-here{font-size:21px;font-weight:400}
.ghm-here-sub{font-size:12.5px;fill:var(--ghm-line)}
.ghm-rose path{fill:var(--ghm-line);fill-opacity:.75}
.ghm-scale path{fill:none;stroke:#fff;stroke-opacity:.8;stroke-width:1.5}

/* --- the legs, as real text rather than numbers baked into the drawing --- */
.ghm-cap{margin-top:22px}
.ghm-legs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.ghm-legs li{display:flex;flex-direction:column;gap:3px;padding-left:13px;border-left:1px solid rgba(201,214,242,.32)}
.ghm-legs li.is-total{border-left-color:var(--ghm-road)}
.ghm-legs .l{font-family:var(--head);font-weight:300;font-size:13px;letter-spacing:.6px;color:#C9D6F2}
.ghm-legs .v{font-family:var(--head);font-weight:200;font-size:24px;color:#fff;line-height:1.1}
.ghm-legs li.is-total .v{color:var(--ghm-road)}
.ghm-legs .m{font-family:var(--head);font-weight:300;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.74)}
.gethere .ghm-note,.gethere .ghm-credit{
  font-family:var(--head);font-weight:300;color:rgba(201,214,242,.86);
  max-width:none;margin:20px 0 0;font-size:12.5px;line-height:1.65}
.gethere .ghm-credit{margin-top:8px;font-size:11.5px;color:rgba(201,214,242,.62)}

/* --- the road draws itself in. Both of the theme's motion kill switches are
       honoured explicitly: the descendant is not covered by motion.css's own
       reset, which only names the hook element itself. --- */
html.js .ghm.reveal .ghm-road{stroke-dasharray:543;stroke-dashoffset:543}
html.js .ghm.reveal.is-in .ghm-road{stroke-dashoffset:0;transition:stroke-dashoffset 2200ms var(--mo-ease,cubic-bezier(.22,.61,.36,1)) 200ms}
html.mo-off .ghm .ghm-road{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
  .ghm .ghm-road{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important}
}

@media(max-width:1100px){
  .ghm{max-width:640px;margin:0 auto}
  .atoll{display:flex;justify-content:center}
}
@media(max-width:700px){
  .gethere-grid{gap:42px}
  /* Full-bleed on a phone. The map is width-bound, so edge-to-edge is the only
     way its 17-unit place labels reach a readable ~10px. .gethere already
     clips (overflow:hidden), so the negative margins cannot widen the page. */
  .atoll{display:block;margin-left:-20px;margin-right:-20px}
  .ghm{max-width:none}
  .ghm-svg{border-radius:0}
  .ghm-frame{stroke-opacity:0}
  .ghm-cap{padding:0 20px}
  .ghm-legs{gap:14px 18px}
  .ghm-legs .v{font-size:21px}
}

/* 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,.17) 0%,rgba(11, 26, 69,.03) 52%,rgba(11, 26, 69,.09) 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 22px rgba(11, 26, 69,.66),0 1px 4px 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:radial-gradient(ellipse 76% 50% at 50% 50%,rgba(11, 26, 69,.30) 0%,rgba(11, 26, 69,.13) 58%,rgba(11, 26, 69,0) 84%),linear-gradient(180deg,rgba(11, 26, 69,0) 0%,rgba(11, 26, 69,0) 60%,rgba(11, 26, 69,.20) 100%);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;text-shadow:0 2px 16px rgba(11, 26, 69,.62),0 1px 3px rgba(11, 26, 69,.5)}
.din-tag{display:inline-block;text-shadow:0 1px 8px rgba(11, 26, 69,.5);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;filter:drop-shadow(0 1px 6px rgba(11, 26, 69,.55))}
.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 background-position, and why it is 70%.

   The photograph is the pool at sunset (footer.php, attachment 915). Its one
   hard horizontal line is the pool coping meeting the water, at 70.8% of the
   frame height -- the second strongest row-to-row transition in the image
   after the horizon at 54.3%. A hard line in the picture reads as a seam in
   the footer if it drifts into the scrim's edge, so it is pinned instead of
   left to wander.

   With background-size:cover the container fraction of an image fraction q is
   (q*H - (H-760)*p)/760, where H is the covered height at the current width.
   The H terms cancel when p equals q: set the position to the fraction of the
   line you want to hold still and it stops moving with the viewport. At 70%
   the water line measures y=678 at 1280, y=673 at 1440 and y=682 at 1920 --
   about 130px clear of the scrim's foot and 100px below the copyright.

   The old 42% was derived for the facade-at-dusk frame it replaced, to keep a
   dark tarmac forecourt out of the bottom. Carried over unchanged it would
   have slid this water line from y=723 at 1440 to y=811 at 1920, landing it on
   the scrim's own edge, and put the copyright on the dark treeline: 4.43:1
   against #45413A, under the 4.5:1 floor. At 70% that line measures 5.40:1.

   Below about 1140px the 3:2 frame is height-cropped rather than width-cropped
   -- 760px of band is taller than 760*1.5 of image -- so there is no vertical
   overflow left to position and this value stops applying. 768 and 390 show
   the whole frame height and are governed by the mask alone.

   MASK AND OPACITY ARE UNCHANGED FROM THE PREVIOUS PHOTOGRAPH, deliberately.
   The mask ramps from transparent downward, the same direction as the cream
   scrim on .site-footer .f-bottom::before in assets/css/pages.css; two fades
   travelling the same way is what stops them showing a boundary. Its .92 peak
   at 84% now falls in open water, which is the lightest part of this frame
   rather than the darkest part of the last one, so there is nothing to hold
   back -- and .42 at 96% into transparent still stops the picture short of the
   page edge. Opacity stays .9 because every footer string clears AA on it
   (worst measured 5.20:1, at 390px); dropping it would only bleach the photo.
   Swap this image again and re-derive BOTH numbers: find the frame's dominant
   horizontal line, set the position to its fraction, then re-measure the
   copyright line, which is the string with the least cover over it. */
.footer-bg{position:absolute;left:0;right:0;bottom:0;height:760px;background-position:center top;background-size:cover;background-repeat:no-repeat;opacity:.9;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.92) 84%,rgba(0,0,0,.42) 96%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.92) 84%,rgba(0,0,0,.42) 96%,transparent 100%)}
.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:1381px) and (max-width:1452px){
  .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:1380px){
  .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.
   Scoped to 1100px, not 700px, because that is where .nav.desk takes over and
   the drawer stops rendering - at 701-1100px (iPad portrait and landscape) the
   rows were still 39px. */
@media(max-width:1380px){
  .m-panel .dd-menu a{padding-top:12px;padding-bottom:12px}
}

/* ==========================================================================
   "THINGS TO DO" PHOTO MEGAMENU  (markup: inc/megamenu.php, behaviour:
   assets/js/main.js -> initMegaMenu)
   ==========================================================================

   SCOPE. This styles exactly one menu item. Every other `.dd` in the header
   keeps the `.dd-menu` flyout above, untouched, and the mobile drawer never
   sees any of this: `.mega-panel` only ever renders inside `nav.nav.desk`,
   which `@media(max-width:1100px)` sets to `display:none`. The explicit
   `display:none` at the bottom of this block is belt and braces for that.

   POSITIONING. `.mega-dd` is switched to `position:static` so the panel's
   containing block becomes `.header` (which is `position:fixed`) rather than
   the inline `<span>` around the trigger. That is what lets a 1040px panel
   centre itself on the viewport from a trigger sitting off to the right.
   `top:100%` means "below the header", and it therefore follows the header's
   two heights on its own: 92px in the home page's `.at-top` state, 78px once
   scrolled and on every inner page. Nothing here is a magic number tied to
   one of those states.

   THE BOOKING CTA IS NOT TOUCHED. The panel is absolutely positioned, so it is
   out of flow and cannot move or shrink `.book-btn`; and it starts at the
   header's bottom edge, so it cannot cover it. The only part of the panel that
   reaches up into the header is the 14px transparent bridge (see .mega-inner),
   which spans y 64-78px - clear of the 44px-tall button, which sits at y 17-61.

   COLOUR. `--ink` under a `--cobalt-deep` header: the same blue family, a step
   deeper, so the panel reads as a drawer of the header rather than a white card
   stapled to it. White at 14.03:1, the note line at 5.6:1. No badge, no border,
   one soft shadow.

   MOTION. Opacity plus an 8px rise, 220ms. Centring is done with margin-left,
   NOT with translateX(-50%), specifically so that killing `transform` under
   reduced motion cannot knock the panel off-centre. Both of the theme's kill
   switches are honoured at the end of this block. */

.mega-dd{position:static}

.mega-panel{
  --mega-w:min(1040px,calc(100vw - 48px));
  position:absolute;top:100%;left:50%;width:var(--mega-w);margin-left:calc(var(--mega-w) / -2);
  z-index:10;
  /* The box starts 14px above its visible surface; .mega-inner takes that back
     as padding. See the note in inc/megamenu.php. */
  margin-top:-14px;padding-top:14px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}

.mega-dd:hover>.mega-panel,
.mega-dd.mega-open>.mega-panel{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}

.mega-inner{
  background:var(--ink);border-radius:4px;
  box-shadow:0 20px 48px rgba(11,26,69,.32);
  padding:30px 34px 22px;
  /* Never taller than the space under the header, with 22px of daylight left
     below it. 1280x800 is the short case and the binding one: the panel needs
     680px there, and 100vh-100px gives it 700. overflow-y is the safety net for
     a viewport shorter than any of this anticipates, not the normal state - if
     this panel is scrolling on a laptop, the grid has grown and the breakpoint
     below it needs another column, not a taller box. */
  max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain}

.mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px 22px}

/* `.nav a` sets uppercase, 14px, .8px tracking, nowrap and a hover fade on every
   anchor in the header. The panel's links are prose, not nav chrome, so they are
   reset here. Two class levels beat `.nav a` (0,1,1) without !important. */
.mega-panel a{
  display:block;color:#fff;font-family:var(--head);text-transform:none;
  letter-spacing:normal;white-space:normal;padding:0;font-size:15px;line-height:1.35}
.mega-panel a:hover{opacity:1}
.mega-panel a:focus-visible{outline:2px solid var(--aqua);outline-offset:4px;border-radius:2px}

.mega-thumb{
  display:block;overflow:hidden;border-radius:3px;margin-bottom:11px;
  aspect-ratio:5 / 3;background:rgba(255,255,255,.07)}
.mega-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.16,.84,.44,1),opacity .3s ease}
.mega-card:hover .mega-thumb img{transform:scale(1.045)}

.mega-name{
  display:block;font-family:var(--head);font-weight:300;font-size:15px;
  letter-spacing:.2px;line-height:1.3;color:#fff}
.mega-card:hover .mega-name{color:var(--aqua)}
.mega-note{
  display:block;margin-top:4px;font-family:var(--body);font-weight:400;
  font-size:12.5px;line-height:1.5;letter-spacing:.1px;
  color:rgba(255,255,255,.72)}

.mega-foot{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13);text-align:right}
.mega-panel a.mega-all{
  display:inline-block;font-family:var(--head);font-weight:300;font-size:13.5px;
  letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.82)}
.mega-panel a.mega-all:hover{color:var(--aqua)}
.mega-panel a.mega-all::after{content:' \2192';letter-spacing:0}

/* Below the header breakpoint there is no desktop nav at all. Stated rather than
   inherited so a future change to `.nav.desk` cannot leak a 1040px panel onto a
   phone. */
@media(max-width:1100px){
  .mega-panel{display:none}
}

/* Between 1101 and 1280 the panel would otherwise touch the viewport edges. */
@media(min-width:1381px) and (max-width:1560px){
  .mega-inner{padding:24px 26px 16px}
  .mega-grid{gap:20px 18px;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
  .mega-foot{margin-top:18px;padding-top:14px}
}

/* KILL SWITCHES. Both of the two the theme ships (see assets/css/motion.css):
   the media query, and `html.mo-off`. Either alone is sufficient, and neither
   may leave the panel mispositioned - which is why centring never used a
   transform in the first place. */
html.mo-off .mega-panel,
html.mo-off .mega-thumb img{transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  .mega-panel,.mega-thumb img{transition:none!important;transform:none!important}
}

/* ---- Desktop nav switch raised 1100px -> 1380px ---------------------------
   The header row genuinely needs 1296px of content plus 80px of padding, so it
   was silently clipping from 1101px all the way to 1375px: the burger sat
   entirely outside the viewport and "Check Availability" was cut off. Because
   .header is position:fixed it never produced a scrollbar, so nothing caught it.

   Rather than restructure a flex row that runs three different justify/order
   regimes, the drawer now covers the whole band it was already good at. The
   megamenu follows the same line: below 1381 there is no desktop nav to hang
   a panel from. Its opener in assets/js/main.js is gated on the same number.

   Added rather than edited: the original 1100px rule shares a block with
   .gethere-grid, .din-head, .faq-grid and .exp, none of which should move. */
@media(max-width:1380px){
  .nav.desk{display:none}
  .mega-panel{display:none}
}

/* ---- Footer menu density on handsets --------------------------------------
   At 390px the footer measured 2182px tall — more than two and a half screens
   of it — because the six primary links are set at 29px with 22px beneath each,
   and every column link carries another 20px. That rhythm is right on a wide
   four-column grid; stacked into one column it reads as drift rather than air.

   Only the gaps and the display size come down. The tap padding set in the
   <=820px block is untouched, so every link stays at or above the 44px a
   fingertip needs — the space between them shrinks, the targets do not. */
@media(max-width:820px){
  .site-footer .footer-in{gap:20px;padding-bottom:34px}
  .site-footer .f-big a{font-size:23px;margin-bottom:6px}
  .site-footer .f-col a{margin-bottom:2px}
  .site-footer .f-contact{margin-top:4px}
}
@media(max-width:430px){
  .site-footer .f-big a{font-size:21px}
}

/* ---- Small-text and target corrections on handsets -------------------------
   The Getting Here map is an SVG that scales with its box, so its labels shrink
   with the viewport: at 320px the place names rendered at 8.5px and the scale
   bar at 5.75px, which is not readable on any phone. Bumping the SVG units at
   the narrow end restores roughly the 10px the design intended.
   The header logo is a 34px link; padding lifts the hit area without resizing
   the mark. */
@media(max-width:430px){
  .ghm-place{font-size:21px}
  .ghm-place-min{font-size:18px}
  .ghm-xs{font-size:15px}
  .ghm-here-sub{font-size:16px}
  .gethere .ghm-credit{font-size:12.5px}
}
@media(max-width:820px){
  .header .logo{padding:6px 0}
}

/* Carousel arrows measured 42x42 on the offers, dining and awards rows — two
   short of target, and they are real standalone controls rather than inline
   prose links, so the exemption does not apply to them. */
@media(max-width:820px){
  .arrow-btn{width:44px;height:44px}
}