:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --brand:#0b3a5b;
  --brand2:#0ea5e9;
  --accent:#0b67a3;
  --shadow:0 14px 30px rgba(0,0,0,.12);
  --max:1440px;
  --r:14px;
  --font: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
body{margin:0; font-family:var(--font); color:var(--text); background:var(--bg)}
a{color:inherit; text-decoration:none}
.container{
  width: min(var(--max), calc(100vw - 48px));
  margin: 0 auto;
  padding: 0;
}

/* =========================
   TOP UTILITY BAR
========================= */
.utility{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:0;
}
.utility__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
  flex-wrap:wrap;
}
.utility__left,.utility__right{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:14px;
}

.phone-chip{
  display:flex;
  gap:8px;
  align-items:center;
  background: rgba(2,6,23,.04);
  padding:7px 12px;
  border-radius:999px;
  font-size:13px;
}
.phone-chip .label{color:var(--muted); font-weight:700}
.phone-chip a{font-weight:900; color:#0b67a3; white-space:nowrap}
.phone-chip a:hover{text-decoration:underline}

.utility .weather b{color:var(--text)}
.utility a{color:#1f6feb}
.utility a:hover{text-decoration:underline}

/* =========================
   STICKY HEADER (NAV ONLY)
========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  border:0;
}
.header__row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0;
}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-left: 138px;
}

.nav > a,
.dd__btn{
  padding:10px 10px;
  font-weight:800;
  color:#111827;
  border-radius:12px;
}
/* Dropdown indicator for menu items with submenu */
.dd__btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* Down triangle */
.dd__btn::after{
  content: "▾";
  font-size: 11px;
  opacity: .6;
  transform: translateY(1px);
  transition: transform .18s ease, opacity .18s ease;
}

/* Rotate on hover (desktop) */
.dd:hover .dd__btn::after{
  transform: rotate(180deg);
  opacity: 1;
}

/* Mobile: no rotation (cleaner UX) */
@media (max-width: 980px){
  .dd__btn::after{
    transform: none;
  }
}
.nav > a:hover,
.dd__btn:hover{ background: rgba(2, 6, 23, 0.04); }
.nav > a.active{
  color: #0b67a3;
  background: rgba(14,165,233,0.12);
}

.cta{
  margin-left:8px;
  background: linear-gradient(90deg, #0ea5e9, #0b67a3);
  color:#fff;
  font-weight:900;
  padding:12px 16px;
  border-radius:14px;
  white-space:nowrap;
  box-shadow: 0 12px 26px rgba(11,103,163,.22);
}
/* Push BOOK NOW back to the far right */
.header__row .cta{
  margin-left: auto;
}
.cta:hover{filter:brightness(1.05)}

.dd{position:relative}
.dd__btn{border:0; background:transparent; cursor:pointer; font:inherit}
/* =========================
   DROPDOWN MENU (LIGHTER, CLEANER)
========================= */
.dd__menu{
  position:absolute;
  top:100%;
  margin-top:8px;
  left:0;

  background: rgba(255,255,255,.88);   /* lighter, airy */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2,6,23,.12);

  min-width: 220px;
  padding: 6px;

  display:none;
}

/* individual items */
.dd__menu a{
  display:block;
  padding: 10px 12px;                 /* tighter */
  border-radius: 10px;

  font-size: 14px;                    /* smaller */
  font-weight: 600;                   /* ⬅ lighter text */
  color:#0f172a;

  transition: background .12s ease, color .12s ease;
}

/* hover state */
.dd__menu a:hover{
  background: rgba(14,165,233,.10);   /* soft brand tint */
  color:#0b67a3;
}

.dd::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:10px;
}
.dd:hover .dd__menu{display:block}

.burger{
  display:none;
  margin-left:auto;
  border:0;
  border-radius:14px;
  padding:10px;
  background: rgba(2,6,23,.04);
}
.burger span{
  display:block;
  width:18px;
  height:2px;
  background:#111827;
  margin:4px 0;
}
@media (max-width: 980px){
  .nav{display:none}
  .burger{display:inline-block}
}

/* =========================
   RATEBAR (below hero)
========================= */
.ratebar{
  background: transparent;
  border:0;
  padding:18px 0 8px;
}
.ratebar__row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px;
  flex-wrap:wrap;
  background: rgba(255,255,255,.95);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
}
.ratebar__title{min-width:180px}
.ratebar__big{display:block; font-weight:900; font-size:18px; line-height:1.05}
.ratebar__small{display:block; color:var(--muted); font-weight:700}

.search{
  flex:1;
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr .7fr auto;
  gap:12px;
  align-items:end;
}
.field label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.field select,
.field input{
  width:100%;
  padding:12px 12px;
  border:0;
  border-radius:14px;
  background: rgba(2,6,23,.04);
  font:inherit;
  outline:none;
}
.field select:focus,
.field input:focus{
  box-shadow: 0 0 0 4px rgba(14,165,233,.18);
  background: rgba(2,6,23,.03);
}
.field--small{min-width:96px}
.note{grid-column:1/-1; color:var(--muted); font-size:13px; padding-left:2px}
@media (max-width: 980px){ .search{grid-template-columns:1fr 1fr;} }

/* =========================
   SECTIONS
========================= */
.section{padding:44px 0}
.section--alt{
  background:#f8fafc;
}

/* =========================
   INTRO (modern)
========================= */
.intro__grid{
  display:grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 22px;
  align-items: stretch;
}
.intro__copy{
  background:#fff;
  border-radius:18px;
  padding:26px;
  box-shadow: var(--shadow);
}
.intro__eyebrow{
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}
.intro__title{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.1;
}
.intro__lead{
  margin: 0 0 16px;
  color: #334155;
  line-height: 1.6;
  max-width: 70ch;
}
.intro__bullets{
  margin: 0;
  padding-left: 18px;
  color: #334155;
  line-height: 1.8;
}
.intro__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.btn--ghost-dark{
  background: transparent;
  border: 1px solid rgba(2,6,23,.18);
  color: #0b3a5b;
  font-weight: 900;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow:none;
}
.btn--ghost-dark:hover{background: rgba(2,6,23,.04);}
.btn{
  background:#fff;
  color:#0f172a;
  padding:14px 18px;
  border-radius:14px;
  font-weight:900;
  display:inline-block;
}

.btn--ghost{
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(6px);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
}

.btn--ghost:hover{
  background:rgba(255,255,255,.35);
}

.intro__card{
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.intro__cardTop h3{margin:0; font-size:18px}
.intro__cardTop p{
  margin:6px 0 14px;
  color:var(--muted);
  font-weight:650;
}
.introTiles{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tile{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(2,6,23,.04);
  transition: transform .12s ease, background .12s ease;
}
.tile:hover{
  transform: translateY(-1px);
  background: rgba(2,6,23,.06);
}
.tile__icon{
  font-size: 18px;
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
}
.tile__text{display:flex; flex-direction:column; line-height:1.1}
.tile__text b{font-size:14px}
.tile__text small{font-size:12px; color:var(--muted); font-weight:650}
.tile--primary{
  background: linear-gradient(90deg, rgba(14,165,233,.22), rgba(11,103,163,.18));
}
.tile--primary .tile__text b{color:#0b3a5b}

@media (max-width: 980px){
  .intro__grid{grid-template-columns:1fr}
  .intro__title{font-size:30px}
}

/* =========================
   WHAT'S INCLUDED
========================= */
.head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.head h2{margin:0; font-size:28px}
.head p{margin:0; color:var(--muted)}

.iconGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:30px;
}

.iconCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#fff;
  border:1px solid rgba(18,52,88,0.08);
  border-radius:20px;
  padding:24px 26px;
  box-shadow:0 12px 28px rgba(19,39,70,0.06);
  min-height:130px;
}

.iconCard__content{
  flex:1;
  min-width:0;
}

.iconCard__content h3{
  margin:0 0 8px;
  font-size:1.05rem;
  color:#0d2340;
}

.iconCard__content p{
  margin:0;
  color:#607086;
  line-height:1.5;
}

.iconCard__icon{
  flex:0 0 68px;
  width:68px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:30px;
  background:linear-gradient(135deg,#eef7ff 0%,#dff0ff 100%);
  border:1px solid rgba(20,129,214,0.12);
}

.iconCard:nth-child(1) .iconCard__icon{
  background:linear-gradient(135deg,#f4ecff 0%,#e7dbff 100%);
}

.iconCard:nth-child(2) .iconCard__icon{
  background:linear-gradient(135deg,#e8f8ff 0%,#d7f0ff 100%);
}

.iconCard:nth-child(3) .iconCard__icon{
  background:linear-gradient(135deg,#eef3ff 0%,#dfe8ff 100%);
}

.iconCard:nth-child(4) .iconCard__icon{
  background:linear-gradient(135deg,#e9fff7 0%,#d6f7ec 100%);
}

.iconCard:nth-child(5) .iconCard__icon{
  background:linear-gradient(135deg,#fff3ea 0%,#ffe5d2 100%);
}

.iconCard:nth-child(6) .iconCard__icon{
  background:linear-gradient(135deg,#f1efff 0%,#e2ddff 100%);
}

@media (max-width: 980px){
  .iconGrid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .iconGrid{
    grid-template-columns:1fr;
  }

  .iconCard{
    padding:20px 22px;
    min-height:110px;
  }

  .iconCard__icon{
    flex:0 0 58px;
    width:58px;
    height:58px;
    font-size:26px;
  }
}
/* =========================
   FEATURED STAYS
========================= */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:14px;
  align-items:stretch;
}
.stay{
  background:#fff;
  border:0;
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
}
.stay img{
  width:100%;
  height:230px;
  object-fit:cover;
  display:block;
  background:#e5e7eb;
}
.stay__body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 auto;
}
.stay__body h3{margin:0 0 4px; font-size:22px}
.stay__body p{margin:0; color:var(--muted); line-height:1.45}
.stay__row{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-top:8px;
}
.price{font-weight:900; color:#0f172a}
.mini{color:#1f6feb; font-weight:900}
.mini:hover{text-decoration:underline}

@media (max-width: 980px){
  .cards{grid-template-columns:1fr}
}

/* =========================
   FOOTER (modern)
========================= */
.site-footer{
  margin-top:60px;
  background: radial-gradient(1200px 800px at 15% 20%, rgba(14,165,233,.12), transparent 55%),
              radial-gradient(1000px 700px at 85% 40%, rgba(11,103,163,.18), transparent 55%),
              #040a18;
  color: rgba(255,255,255,.86);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap:30px;
  padding:54px 18px;
}
.footer-col h3{
  margin:0 0 14px;
  font-size:20px;
  letter-spacing:.2px;
  color:#fff;
}
.footer-muted{
  margin:0 0 18px;
  color: rgba(255,255,255,.66);
  line-height:1.6;
  max-width: 52ch;
}
.footer-contact p{
  margin:10px 0;
  color: rgba(255,255,255,.70);
}
.site-footer a{ color: rgba(255,255,255,.78); }
.site-footer a:hover{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin:10px 0; }

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.footer-bottom-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  flex-wrap:wrap;
  color: rgba(255,255,255,.62);
  font-size:14px;
}
.footer-mini-links{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
}

.beach-live{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color: var(--text);          /* default non-home */
  text-decoration: none;
}

.beach-live:hover{
  color: var(--accent);        /* nice hover */
  text-decoration: none;
}
/* Red live dot */
.video-dot{
  position:relative;
  width:10px;
  height:10px;
  background:#ef4444;
  border-radius:50%;
}

/* Pulse ring */
.video-dot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background: rgba(239,68,68,.35);
  animation: livePulse 1.6s ease-out infinite;
}

@keyframes livePulse{
  0%{ transform: scale(.6); opacity:.9; }
  100%{ transform: scale(1.8); opacity:0; }
}

/* =========================
   Side Tabs
========================= */
.side-tabs{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* =========================
   Individual Tab
========================= */
.side-tab{
  display: inline-flex;          /* allows auto-fit to content */
  align-items: center;
  gap: 7px;

  width: auto;
  max-width: 44px;               /* collapsed size */
  padding: 8px 8px;

  color: #fff;
  text-decoration: none;
  overflow: hidden;

  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;

  justify-content: center;

  transition:
    max-width .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

/* Expand only as far as text needs */
.side-tab:hover{
  max-width: 260px;              /* animation cap only */
  justify-content: flex-start;
}

/* =========================
   Icon (DO NOT CHANGE SIZE)
========================= */
.side-tab i{
  font-size: 18px;
  min-width: 18px;
}

/* =========================
   Label Reveal
========================= */
.side-tab span{
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;

  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;

  transition:
    max-width .18s ease,
    opacity .18s ease,
    margin-left .18s ease;
}

.side-tab:hover span{
  max-width: 200px;
  opacity: 1;
  margin-left: 10px;
}

/* =========================
   Tab Colors
========================= */
.side-tab.tab1{ background:#2563eb; } /* Beach Live */
.side-tab.tab2{ background:#0b3a5b; } /* Events */
.side-tab.tab3{ background:#22c55e; } /* Map */
.side-tab.tab4{ background:#ef4444; } /* C5 Form */
.side-tab.tab5{ background:#FF5F1F; } /* Deals */

/* =========================
   Hide-on-scroll-down
========================= */
.side-tabs.is-hidden{
  opacity: 0;
  transform: translateY(-50%) translateX(-18px);
  pointer-events: none;
}

/* =========================
   Mobile Compact Mode
========================= */
@media (max-width: 768px){
  .side-tabs{
    gap: 4px;
  }

  .side-tab{
    max-width: 38px;
    padding: 6px 6px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
  }

  .side-tab:hover{
    max-width: 220px;
  }

  .side-tab span{
    font-size: 13px;
  }
}

/* =========================
   MOBILE MENU PANEL (modern)
========================= */
.mobile-menu{
  display:none;
  margin: 10px 12px 0;
  padding: 10px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(2,6,23,.14);
}

/* open state */
.mobile-menu.is-open{
  display:block;
}

/* menu items = tappable cards */
.mobile-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  font-weight: 800;
  font-size: 16px;
  color:#0f172a;
  border-radius: 14px;
}

/* spacing between items */
.mobile-menu a + a{
  margin-top: 6px;
}

/* tap feedback */
.mobile-menu a:hover{
  background: rgba(2,6,23,.04);
}

/* active item */
.mobile-menu a.active{
  background: rgba(14,165,233,.14);
  color:#0b67a3;
}


/* ==========================================
   FIXES ONLY: MOBILE UTILITY LAYOUT + BIGGER LOGO
   (Overrides bad spacing + makes items uniform on mobile)
========================================== */

/* kill any old chip nudges */
.utility .utility__left{
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* =========================
   CHANGES ONLY: DESKTOP UTILITY LOGO FULL HEIGHT
========================= */

/* show utility logo on desktop and make it fill row height */
.utility__logo{ 
  display:flex; 
  align-items:center; 
  height: 72px;                 /* controls logo container height */
}
.utility__logo picture{
  display:flex;
  align-items:center;
  height:100%;
}
.utility__logo img{ 
  height: 100%;                 /* fills container height */
  width:auto; 
  display:block; 
  object-fit:contain;
}

/* give the utility row a consistent height so the logo can fill it */
.utility__row{
  min-height: 72px;             /* MUST match .utility__logo height */
  padding: 0;                   /* removes extra vertical padding */
}

/* desktop: keep header logo normal */
.header .brand img{
  height: 64px;
  width: auto;
  display:block;
}

/* MOBILE: bigger logo, less empty space, uniform chips */
@media (max-width: 980px){

  /* show utility logo + hide header logo (no duplicates) */
  .utility__logo{
    display:flex !important;
    align-items:center;
    height: auto;               /* allow mobile rules to control height */
  }
  .header .brand{ display:none !important; }

  /* stack utility sections tighter (no huge empty space) */
  .utility__row{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 0;            /* restore padding on mobile */
    min-height: auto;           /* allow wrapping */
  }

  /* LEFT: grid so logo is far-left and chips are uniform */
  .utility__left{
    width: 100%;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px 10px;
    align-items: center;
    justify-content: start;
  }

  /* logo bigger (THIS is the main fix you asked for) */
  .utility__logo{
    grid-row: 1 / span 2;
    justify-self: start;
    align-self: center;
  }
  .utility__logo img{
    height: 48px !important;   /* bigger logo on mobile */
    width: auto;
    display:block;
  }

  /* chips uniform (same width, clean alignment) */
  .phone-chip{
    width: 100%;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 13px;
  }
  .phone-chip .label{ font-weight: 800; }

  /* RIGHT: single row, no weird gaps */
  .utility__right{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    font-size: 13px;
  }
  .utility__right .weather,
  .utility__right .beach-live{
    white-space: nowrap;
  }
	

  /* burger/menu behavior stays as-is */
  .nav{ display:none !important; }
  .burger{ display:inline-block !important; margin-left:auto; }
}

/* ==========================================
   MOBILE FIX: keep label next to number
   AND move BOTH phone chips to the RIGHT
========================================== */
@media (max-width: 980px){

  /* keep the 2-column layout: logo left, chips in right column */
  .utility__left{
    grid-template-columns: 56px 1fr;
    align-items: center;
  }

  /* both chips sit on the RIGHT and do NOT stretch */
  .utility__left .phone-chip{
    grid-column: 2;
    justify-self: end;              /* <-- pushes the whole pill to the right */
    width: max-content !important;  /* <-- prevents full-width stretching */
    justify-content: flex-start !important;  /* label + number stay together */
    gap: 6px;
    text-align: left;
  }

  .utility__left .phone-chip .label,
  .utility__left .phone-chip a{
    white-space: nowrap;
  }
}

/* DESKTOP: hide the header/nav logo so only the utility logo shows */
@media (min-width: 981px){
  .header .brand{ display:none !important; }
}


/* Force Contact Us to look like a normal link (no “selected” look) */
.nav > a.nav__contact{
  font-weight: 600 !important;
  background: transparent !important;
  color: #111827 !important;
}

.nav > a.nav__contact:hover,
.nav > a.nav__contact:focus{
  background: transparent !important;
}

/* =========================
   PAGE TEMPLATE (detail pages)
========================= */
/* (DELETED: earlier .page-hero block — keeping the later “EVENTS-STYLE PAGE HERO” version only) */

.detail-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items:start;
}
.detail-media{
  background:#fff;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.detail-media img{
  width:100%;
  height:auto;
  display:block;
}
.detail-copy{
  background:#fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
  color:#334155;
  line-height:1.7;
}
.detail-note{
  margin:0 0 12px;
  color: var(--muted);
  font-weight:650;
}
.detail-facts{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(2,6,23,.08);
  display:grid;
  gap: 8px;
  color:#0f172a;
}
.detail-facts b{ font-weight:800; }

.menu-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.menu-card{
  display:block;
  background:#fff;
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.menu-card h3{
  margin: 0 0 10px;
  font-size: 18px;
}
.menu-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  background:#e5e7eb;
}

@media (max-width: 980px){
  .detail-grid{ grid-template-columns:1fr; }
  .page-hero__title{ font-size: 28px; }
  .menu-grid{ grid-template-columns:1fr; }
}

/* =========================
   PHOTO GALLERY
========================= */
.photo-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.photo-gallery a{
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}

.photo-gallery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
  transition: transform .35s ease;
}

.photo-gallery a:hover img{
  transform: scale(1.05);
}

/* =========================
   REAL MENU LAYOUT
========================= */
.menu-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}

.menu-section{
  background:#fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.menu-title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}

.menu-item{
  padding: 12px 0;
  border-top: 1px solid rgba(2,6,23,.08);
}
.menu-item:first-of-type{ border-top: 0; padding-top: 0; }

.menu-item__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
}

.menu-item__name{
  font-weight: 900;
  color: #0f172a;
}

.menu-item__price{
  font-weight: 900;
  color: var(--accent);
  white-space: nowrap;
}

.menu-item__desc{
  margin: 6px 0 0;
  color:#334155;
  line-height: 1.6;
  font-size: 14px;
}

.menu-footnote{
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 980px){
  .menu-wrap{ grid-template-columns: 1fr; }
}

/* Lightbox overlay */
.lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.75);
  z-index: 9999;
}

.lightbox.open{
  display: flex;
}

/* Make the image fit inside the screen */
#lightboxImg{
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: #fff; /* optional */
}

/* Close button */
.lightbox-close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 24px;
  line-height: 40px;
}

/* Fix: round gallery thumbnails even when images are not wrapped in <a> */
.photo-gallery img{
  border-radius: 14px;
  overflow: hidden;
}

/* Hide side tabs on mobile */
@media (max-width: 980px){
  .side-tabs{
    display: none !important;
  }
}

/* ===== Terms Page (lighter + easier to scan) ===== */
.terms-wrap { padding: 48px 0; }
.terms-container{
  width: min(var(--max), calc(100vw - 48px));
  margin: 0 auto;
}

.terms-header { margin-bottom: 18px; }
.terms-title { margin: 0 0 6px; font-size: 44px; line-height: 1.1; }
.terms-subtitle { margin: 0; font-size: 16px; opacity: .75; }

.terms-card{
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  margin: 18px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.terms-h2 { margin: 0 0 12px; font-size: 22px; }

.terms-glance{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: start;
}

.terms-bullets{
  margin: 0;
  padding-left: 18px;
  line-height: 1.55;
}
.terms-bullets li{ margin: 7px 0; }

.terms-callout{
  background: rgba(0,0,0,.03);
  border-radius: 14px;
  padding: 14px;
}
.terms-callout-title{
  font-weight: 700;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.terms-callout p{ margin: 0; line-height: 1.5; }

.terms-table-wrap{ overflow-x: auto; }
.terms-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.terms-table th, .terms-table td{
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  vertical-align: top;
}
.terms-table thead th{
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .75;
}
.terms-muted{ opacity: .7; font-size: 14px; }

.terms-footnote{ margin: 12px 0 0; font-size: 14px; opacity: .75; }

.terms-details{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
}
.terms-details summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.terms-details summary::-webkit-details-marker{ display: none; }
.terms-details summary::after{
  content: "▾";
  float: right;
  opacity: .7;
}
.terms-details[open] summary::after{ content: "▴"; }

.terms-details-body{ margin-top: 10px; line-height: 1.55; }

@media (max-width: 900px){
  .terms-glance{ grid-template-columns: 1fr; }
  .terms-title{ font-size: 34px; }
}

/* Resort Info grid */
.info-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.info-item{
  background: rgba(0,0,0,.03);
  border-radius: 12px;
  padding: 12px 14px;
}

.info-label{
  font-weight: 700;
  margin-bottom: 6px;
}

.info-value{
  line-height: 1.5;
  opacity: .92;
}

.info-span{
  grid-column: 1 / -1;
}

@media (max-width: 900px){
  .info-grid{ grid-template-columns: 1fr; }
}

/* Our Story helpers */
.terms-kicker{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}

.terms-body{
  margin: 0 0 12px;
  line-height: 1.7;
  font-size: 16px;
  opacity: .95;
}

.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.stat{
  background: rgba(0,0,0,.03);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.stat-number{
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}

.stat-label{
  margin-top: 6px;
  font-weight: 700;
  opacity: .75;
}

.why-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.why-item{
  background: rgba(0,0,0,.03);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  line-height: 1.4;
}

.why-item i{
  width: 18px;
  opacity: .85;
}

@media (max-width: 900px){
  .stats-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
}
/* =========================================
   HERO (HOME PAGE – DO NOT OVERRIDE)
   This block is the canonical hero style.
   Any page-specific hero MUST be scoped.
========================================= */
.hero{
  position:relative;
  height:650px;
  overflow:hidden;
}
.hero__img{width:100%; height:100%; object-fit:cover; display:block}
.hero__shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.35) 40%,
      rgba(0,0,0,.18) 70%,
      rgba(0,0,0,.08) 100%
    );
}

.hero__content{
  position:absolute; left:50%; top:52%;
  transform:translate(-50%,-50%);
  width:min(var(--max), 92vw);
  color:#fff;
}
.kicker{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:#ffffff;
  opacity:1;

  padding:6px 10px;
  border-radius:8px;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(4px);

  text-shadow:none;
}
.hero h1{margin:10px 0 10px; font-size:54px; line-height:1.02}
.sub{
  max-width:62ch;
  font-size:16px;

  color:#ffffff;                 /* full white */
  opacity:1;                     /* no fade */

  text-shadow: 0 2px 12px rgba(0,0,0,.7); /* stronger than kicker */
}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
@media (max-width: 980px){ .hero h1{font-size:40px} }


/* Our Story background image */
.hero--story{
  background-image: url("assets/our-story/spaces(31of42).jpg"); /* change to your real image */
}

.hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,.10) 100%
  );
}

.hero__inner{
  position: relative;
  width: min(1180px, 92%);
  margin: 0 auto;
}

.hero__crumbs{
  font-size: 14px;
  opacity: .9;
  margin-bottom: 10px;
}

.hero__title{
  font-size: 64px;               /* Bar page scale */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 12px;
}

.hero__lead{
  max-width: 620px;
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 18px;
  opacity: .95;
}

.hero__chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 14px;
}

/* Mobile */
@media (max-width: 900px){
  .hero{ min-height: 420px; padding-bottom: 36px; }
  .hero__title{ font-size: 44px; }
  .hero__lead{ font-size: 16px; }
}

/* Only affects Our Story hero */
.o-hero { min-height: 520px; }

/* =========================================================
   EVENTS-STYLE PAGE HERO (reusable)
   Paste in styles.css (one place), reuse on pages
========================================================= */

.page-hero {
  padding: 28px 0 30px;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(0,145,255,.10), transparent 60%),
              linear-gradient(180deg, #f7fbff, #ffffff);
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
}

.page-breadcrumbs {
  font-size: 14px;
  opacity: .9;
  margin-bottom: 10px;
}
.page-breadcrumbs a { text-decoration: none; }
.page-breadcrumbs .dot { margin: 0 8px; opacity: .6; }

.page-hero__kicker {
  letter-spacing: .14em;
  font-weight: 700;
  font-size: 12px;
  opacity: .65;
  margin-bottom: 6px;
}

.page-hero__title {
  margin: 0 0 10px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
}

.page-hero__sub {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
  opacity: .92;
}

.page-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 18px;
}

.p-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  font-weight: 600;
  font-size: 14px;
}

.page-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.p-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
}

.p-btn--primary {
  border-color: rgba(0,145,255,.35);
  background: #0ea5ff;
  color: #fff;
}

.p-btn--ghost {
  background: rgba(255,255,255,.75);
  color: inherit;
}

.page-hero__imgWrap {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.08);
}

.page-hero__imgWrap img {
  width: 100%;
  height: clamp(280px, 30vw, 360px); /* consistent “Events-like” hero image height */
  object-fit: cover;
  display: block;
}

/* Sections / cards (simple, clean) */
.page-section { padding: 34px 0; }
.page-section--alt { background: #f7fbff; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.page-eyebrow { letter-spacing: .14em; font-weight: 700; font-size: 12px; opacity: .65; }
.page-h2 { margin: 6px 0 0; font-size: 28px; }

.card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.card--soft { background: rgba(255,255,255,.85); }

.simple-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.simple-gallery img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  display: block;
}

@media (max-width: 960px) {
  .page-hero__inner { grid-template-columns: 1fr; }
  .simple-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* =========================
   AWARDS PAGE (modern grid)
   ========================= */

.awards-main { background: #f6f8fb; }

.awards-hero{
  background: radial-gradient(1200px 500px at 20% 20%, rgba(0,148,255,.12), transparent 60%),
              radial-gradient(900px 400px at 70% 30%, rgba(0,0,0,.06), transparent 55%),
              #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.awards-hero__inner{
  display:flex;
  gap:24px;
  align-items:flex-end;
  justify-content:space-between;
  padding: 28px 0 22px;
}
.awards-hero__kicker{
  font-weight:700;
  letter-spacing:.12em;
  font-size:12px;
  color: rgba(0,0,0,.55);
  margin: 10px 0 8px;
}
.awards-hero__title{
  font-size: clamp(34px, 4.2vw, 56px);
  line-height:1.05;
  margin: 0 0 10px;
}
.awards-hero__sub{
  max-width: 62ch;
  color: rgba(0,0,0,.72);
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
}
.awards-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.awards-hero__right{
  display:flex;
  align-items:flex-end;
}
.awards-hero__stat{
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  text-align:center;
  min-width: 160px;
}
.awards-hero__statNum{
  font-size: 38px;
  font-weight: 800;
  line-height:1;
}
.awards-hero__statLbl{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(0,0,0,.6);
}

.awards-controls{
  padding: 14px 0;
  background: #f6f8fb;
}
.awards-controls__inner{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.awards-search{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 10px 14px;
  min-width: min(560px, 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.awards-search i{ color: rgba(0,0,0,.45); }
.awards-search input{
  border:none;
  outline:none;
  width:100%;
  font-size: 14px;
  background: transparent;
}

.awards-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.awards-filter{
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor:pointer;
}
.awards-filter.is-active{
  border-color: rgba(0,148,255,.35);
  box-shadow: 0 10px 22px rgba(0,148,255,.10);
}

.awards-section{ padding: 18px 0 46px; }

.awards-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px){
  .awards-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .awards-hero__inner{ flex-direction:column; align-items:flex-start; }
  .awards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .awards-grid{ grid-template-columns: 1fr; }
}

.award-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}
.award-card__imgBtn{
  border:0;
  padding:0;
  cursor:pointer;
  background:#111;
  display:block;
}
.award-card__imgBtn img{
  width:100%;
  height: 240px;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform .25s ease;
}
.award-card:hover .award-card__imgBtn img{ transform: scale(1.03); }

.award-card__body{
  padding: 14px 14px 16px;
}
.award-card__meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom: 8px;
  color: rgba(0,0,0,.6);
  font-size: 13px;
  font-weight: 700;
}
.award-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background: rgba(0,148,255,.10);
  border: 1px solid rgba(0,148,255,.18);
  border-radius: 999px;
  padding: 6px 10px;
}
.award-dot{ opacity:.65; }
.award-year{ opacity:.85; }

.award-card__title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}
.award-card__desc{
  margin: 0;
  color: rgba(0,0,0,.68);
  font-size: 14px;
  line-height: 1.5;
}

/* Lightbox */
.aw-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
}
.aw-lightbox.open{ display:flex; }

.aw-lightbox__close{
  position:absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
}

.aw-lightbox__figure{
  margin:0;
  max-width: min(960px, 96vw);
  width: 100%;
}
#awLightboxImg{
  width:100%;
  max-height: 78vh;
  object-fit: contain;
  display:block;
  border-radius: 14px;
  background:#111;
}
#awLightboxCap{
  margin-top: 10px;
  color: rgba(255,255,255,.9);
  text-align:center;
  font-weight:700;
}

/* =========================
   STAFF PAGE (matches Awards)
   ========================= */

.staff-main { background: #f6f8fb; }

.staff-hero{
  background: radial-gradient(1200px 500px at 18% 22%, rgba(0,148,255,.12), transparent 60%),
              radial-gradient(900px 400px at 70% 30%, rgba(0,0,0,.06), transparent 55%),
              #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.staff-hero__inner{
  display:flex;
  gap:24px;
  align-items:flex-end;
  justify-content:space-between;
  padding: 28px 0 22px;
}
.staff-hero__kicker{
  font-weight:700;
  letter-spacing:.12em;
  font-size:12px;
  color: rgba(0,0,0,.55);
  margin: 10px 0 8px;
}
.staff-hero__title{
  font-size: clamp(34px, 4.2vw, 56px);
  line-height:1.05;
  margin: 0 0 10px;
}
.staff-hero__sub{
  max-width: 62ch;
  color: rgba(0,0,0,.72);
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
}
.staff-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.staff-hero__right{
  display:flex;
  align-items:flex-end;
}
.staff-hero__stat{
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  text-align:center;
  min-width: 170px;
}
.staff-hero__statNum{
  font-size: 38px;
  font-weight: 800;
  line-height:1;
}
.staff-hero__statLbl{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(0,0,0,.6);
}

.staff-controls{
  padding: 14px 0;
  background: #f6f8fb;
}
.staff-controls__inner{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.staff-search{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 10px 14px;
  min-width: min(560px, 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.staff-search i{ color: rgba(0,0,0,.45); }
.staff-search input{
  border:none;
  outline:none;
  width:100%;
  font-size: 14px;
  background: transparent;
}

.staff-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.staff-filter{
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor:pointer;
}
.staff-filter.is-active{
  border-color: rgba(0,148,255,.35);
  box-shadow: 0 10px 22px rgba(0,148,255,.10);
}

.staff-section{ padding: 18px 0 46px; }

.staff-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px){
  .staff-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .staff-hero__inner{ flex-direction:column; align-items:flex-start; }
  .staff-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .staff-grid{ grid-template-columns: 1fr; }
}

.staff-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}
.staff-card__imgBtn{
  border:0;
  padding:0;
  cursor:pointer;
  background:#111;
  display:block;
}
.staff-card__imgBtn img{
  width:100%;
  height: 240px;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform .25s ease;
}
.staff-card:hover .staff-card__imgBtn img{ transform: scale(1.03); }

.staff-card__body{
  padding: 14px 14px 16px;
}
.staff-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}
.staff-card__name{
  margin:0;
  font-size: 16px;
  font-weight: 900;
}
.staff-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background: rgba(0,148,255,.10);
  border: 1px solid rgba(0,148,255,.18);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}
.staff-card__role{
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.70);
  margin: 0 0 8px;
}
.staff-card__desc{
  margin: 0;
  color: rgba(0,0,0,.68);
  font-size: 14px;
  line-height: 1.5;
}

/* Lightbox */
.st-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
}
.st-lightbox.open{ display:flex; }

.st-lightbox__close{
  position:absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.25);
  color:#fff;
  cursor:pointer;
}

.st-lightbox__figure{
  margin:0;
  max-width: min(960px, 96vw);
  width: 100%;
}
#stLightboxImg{
  width:100%;
  max-height: 78vh;
  object-fit: contain;
  display:block;
  border-radius: 14px;
  background:#111;
}
#stLightboxCap{
  margin-top: 10px;
  color: rgba(255,255,255,.9);
  text-align:center;
  font-weight:700;
}

@media (max-width: 767px){
  #sideTabs,
  .side-tabs {
    display: none !important;
  }
}


/* FEATURED GENERAL MANAGER */
.staff-featured {
  padding: 2.5rem 0 1rem;
}

.staff-card--featured {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2rem;
  align-items: start;
}

.staff-card--featured img {
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

@media (max-width: 900px) {
  .staff-card--featured {
    grid-template-columns: 1fr;
  }
}

/* FIX STAFF IMAGE CROPPING */
.staff-card__imgBtn img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  background: #f6f6f6;
}

.staff-card__imgBtn {
  height: auto;
}

/* Featured GM card should still look like a normal card but wider */
.staff-main .staff-card--featured{
  grid-column:1 / -1 !important;
}

@media (min-width: 900px){
  .staff-main .staff-card--featured{
    display:grid !important;
    grid-template-columns: 360px 1fr !important;
    align-items:stretch !important;
  }
  .staff-main .staff-card--featured .staff-card__imgBtn img{
    height:100% !important;
    min-height:360px !important;
  }
}

/* Ensure featured General Manager image matches other staff cards */
.staff-card--featured .staff-card__imgBtn,
.staff-card--featured .staff-card__imgBtn img {
  border-radius: 16px;
  overflow: hidden;
}

/* ===============================
   OUR STORY – HERO SPACING FIX
================================ */

/* Desktop alignment (replaces inline style) */
.o-hero .b-hero__content{
  padding-top: 120px;
}

/* Mobile: reduce hero height + spacing */
@media (max-width: 768px){
  .o-hero{
    min-height: 360px;
  }

  .o-hero .b-hero__content{
    padding-top: 56px;
    padding-bottom: 34px;
  }

  .o-hero .b-hero__title{
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.05;
  }

  .o-hero .b-hero__sub{
    font-size: 15px;
    line-height: 1.55;
  }
}

/* =========================
   MOBILE: GIVE HEADER/UTILITY SIDE PADDING
   (fix weather + livestream + book now spacing)
========================= */
@media (max-width: 768px){

  /* Utility bar (weather + livestream + phones) */
  .utility .container.utility__row{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Main header row (logo + nav/burger + BOOK NOW) */
  header.header .container.header__row{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Extra safety: if anything is using absolute/right alignment */
  .utility__right{
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  /* Make sure the livestream link can’t kiss the edge */
  a.beach-live{
    margin-right: 0 !important;
  }

  /* Make sure the weather can’t kiss the edge */
  .weather{
    margin-left: 0 !important;
  }
}

/* Keep nav links consistent (prevents visited link going dark) */
.nav a,
.nav a:visited {
  color: inherit;
}

/* If you want a specific nav color, set it here */
.nav > a,
.nav .dd__btn {
  color: #334155;          /* match your other links */
  font-weight: 700;
}

.nav > a:hover,
.nav .dd__btn:hover {
  color: var(--accent);
}

.mobile-group{
  margin: 14px 0 6px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
}

/* =========================
   MOBILE MENU (CLEAN LIST + ACCORDION)
========================= */

.mobile-menu{
  padding: 14px;
}

.mobile-menu a,
.mobile-menu .m-acc__btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width: 100%;
  padding: 14px 14px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 900;
  color: #0f172a;
  background: rgba(2,6,23,.04);
  margin: 10px 0;
}

.mobile-menu a.active{
  background: rgba(14,165,233,.14);
  color: var(--accent);
}

.mobile-menu .m-acc__btn{
  border: 0;
  cursor: pointer;
}

.mobile-menu .m-acc__chev{
  font-size: 16px;
  opacity: .7;
  transform: translateY(-1px);
}

/* panel links */
.mobile-menu .m-acc__panel{
  display:none;           /* collapsed default */
  padding: 0 0 8px;
  margin-top: -6px;
}

.mobile-menu .m-acc__panel a{
  background: transparent;
  margin: 6px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  color: #111827;
}

.mobile-menu .m-acc__panel a:hover{
  background: rgba(2,6,23,.04);
}

/* open state */
.mobile-menu .m-acc.is-open .m-acc__panel{
  display:block;
}

.mobile-menu .m-acc.is-open .m-acc__chev{
  transform: rotate(180deg);
}

/* (DELETED: duplicate “Mobile menu base / When open / panel toggles” block here) */

/* ================================
   MOBILE MENU – VISUAL UPGRADE ONLY
   (keeps your existing HTML + JS)
================================ */

/* Menu sheet */
.mobile-menu{
  padding: 14px;
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(2,6,23,.14);
  border: 1px solid rgba(2,6,23,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Top-level links (Home / Gallery / Contact) */
.mobile-menu > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  margin: 10px 0;
  border-radius: 16px;
  background: #f3f5f7;
  color: #0f172a;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(2,6,23,.06);
}

/* Active item */
.mobile-menu > a.active{
  background: rgba(11,103,163,.12);
  border-color: rgba(11,103,163,.18);
  color: #0b67a3;
}

/* Accordion blocks (Our Resort / Rooms / etc.) */
.mobile-menu .m-acc{
  margin: 10px 0;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.06);
  background: #f3f5f7;
}

/* Accordion button */
.mobile-menu .m-acc__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border:0;
  background: transparent;
  color:#0f172a;
  font-weight: 1000;
  font-size: 16px;
  cursor:pointer;
}

/* Chevron */
.mobile-menu .m-acc__chev{
  font-size: 14px;
  opacity: .65;
  transform: rotate(0deg);
  transition: transform .18s ease, opacity .18s ease;
}

/* Panel (submenu) */
.mobile-menu .m-acc__panel{
  display:none; /* JS adds .is-open on .m-acc */
  padding: 10px 12px 12px;
  background: #ffffff;
  border-top: 1px solid rgba(2,6,23,.06);
}

/* Submenu links */
.mobile-menu .m-acc__panel a{
  display:block;
  padding: 12px 12px;
  margin: 8px 0;
  border-radius: 14px;
  background: rgba(2,6,23,.03);
  border: 1px solid rgba(2,6,23,.06);
  color:#0f172a;
  text-decoration:none;
  font-weight: 800;
}

/* Hover/tap feedback */
.mobile-menu a:active,
.mobile-menu .m-acc__btn:active{
  transform: scale(.99);
}

/* Open state (your JS should toggle .is-open) */
.mobile-menu .m-acc.is-open .m-acc__panel{ display:block; }
.mobile-menu .m-acc.is-open .m-acc__chev{
  transform: rotate(180deg);
  opacity: .9;
}
.mobile-menu .m-acc__panel{
  display:block;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

.mobile-menu .m-acc.is-open .m-acc__panel{
  max-height:400px;
}



/* =========================================
   STAFF IMAGES — FINAL (FEATURED vs GRID)
   Uses your real HTML:
   - Featured: article.staff-card--featured
   - Grid:     div.staff-grid
========================================= */

/* Shared button look (rounded + clip) */
.staff-card__imgBtn{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:#111;
  overflow:hidden;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
}

/* Shared img behavior */
.staff-card__imgBtn img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}


/* =========================
   FEATURED (William)
   Desktop layout
========================= */

.staff-card--featured .staff-card__imgBtn{
  height:340px;
  aspect-ratio:auto;
}

.staff-card--featured .staff-card__imgBtn img{
  object-position:50% 15%;
}


/* =========================
   GRID (everyone else)
   Desktop
========================= */

.staff-grid .staff-card__imgBtn{
  aspect-ratio:1 / 1;
  height:auto;
}

.staff-grid .staff-card__imgBtn img{
  object-position:center;
}


/* =========================================
   MOBILE FIXES
   Keeps desktop unchanged
========================================= */

@media (max-width:768px){

  /* Featured card stacks image over text */
  .staff-card--featured{
    display:block;
  }

  .staff-card--featured .staff-card__imgBtn{
    height:240px;
    width:100%;
  }

  .staff-card--featured .staff-card__imgBtn img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 15%;
  }


  /* Grid becomes single column */
  .staff-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }


  /* Square images keep faces intact */
  .staff-grid .staff-card__imgBtn{
    aspect-ratio:1 / 1;
    max-height:260px;
  }

  /* Crop slightly higher so foreheads aren't cut */
  .staff-grid .staff-card__imgBtn img{
    object-position:50% 20%;
  }

}

/* =========================================================
   FINAL: HOME HERO OVERLAY + MOBILE MENU (HOME + NON-HOME)
   - Home: utility/header overlay hero (full image top)
   - Menu: fixed overlay, scrolls, does NOT block burger/BOOK NOW
   - Non-home: same overlay behavior, scrolls to bottom
   - Uses JS: body.menu-open (already in your script)
========================================================= */

/* --------------------------
   HOME: overlay utility/header on hero
-------------------------- */
body.home-page .utility,
body.home-page .header{
  position: absolute !important;   /* scrolls with page when CLOSED */
  left: 0;
  right: 0;
  width: 100%;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  z-index: 5000;
}

/* Utility at top, header below it */
body.home-page .utility{ top: 0 !important; z-index: 5002; }
body.home-page .header{  top: 72px !important; z-index: 5001; } /* match your utility height */

/* Full image hero */
body.home-page .hero{
  margin-top: 0 !important;
  height: 750px;
  position: relative;
}

@media (max-width: 980px) and (orientation: landscape){
  body.home-page .hero{
    height: 300px !important;
  }

  body.home-page .hero__content{
    top: 54% !important;
    width: min(var(--max), 94vw) !important;
  }

  body.home-page .hero h1{
    font-size: 30px !important;
  }

  body.home-page .sub{
    font-size: 14px !important;
    max-width: 56ch !important;
  }
}
body.home-page .hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.home-page .hero__slides{
  position: absolute;
  inset: 0;
}
body.home-page .hero__slide{
  opacity: 0;
  transition: opacity .8s ease;
}
body.home-page .hero__slide.is-active{ opacity: 1; }
body.home-page .hero__slide:nth-child(3){ object-position: 70% center; }
body.home-page .hero__controls{
  position: absolute;
  z-index: 3;
  bottom: 24px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 40px;
  background: rgba(0,0,0,.48);
}
body.home-page .hero__arrow{
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
body.home-page .hero__dots{ display: flex; align-items: center; gap: 6px; }
body.home-page .hero__count{
  min-width: 36px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
body.home-page .hero__pause{
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
body.home-page .hero__dot{
  width: 26px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
body.home-page .hero__dot::after{
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
}
body.home-page .hero__dot.is-active::after{ background: #fff; transform: scale(1.3); }
body.home-page .hero__controls button:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 600px){
  body.home-page .hero__slide:first-child{ object-position: 30% center; }
  body.home-page .hero__slide:nth-child(3){ object-position: 80% center; }
  body.home-page .hero__controls{
    right: auto;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce){
  body.home-page .hero__slide{ transition: none; }
}
body.home-page .hero__shade{
  position: absolute;
  inset: 0;
  z-index: 1;
}
body.home-page .hero__content{
  position: absolute !important;
  z-index: 2 !important;
}

/* Home nav readable on image */
body.home-page .nav > a,
body.home-page .dd__btn{
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
body.home-page .nav > a.active{
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
body.home-page .dd__menu{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.home-page .burger{ background: rgba(255,255,255,.14) !important; }
body.home-page .burger span{ background: #fff !important; }

body.home-page .utility__left,
body.home-page .utility__right{
  color: rgba(255,255,255,.85) !important;
}
body.home-page .utility .weather b{ color: #fff !important; }
body.home-page .phone-chip{ background: rgba(255,255,255,.14) !important; }
body.home-page .phone-chip .label{ color: rgba(255,255,255,.75) !important; }
body.home-page .phone-chip a{ color: #fff !important; }

/* Beach livestream always white (home only) */
body.home-page .utility a.beach-live,
body.home-page .utility a.beach-live:visited,
body.home-page .utility a.beach-live:hover,
body.home-page .utility a.beach-live:active{
  color:#ffffff !important;
  text-decoration:none;
}

/* --------------------------
   MOBILE MENU (ALL PAGES)
   - fixed overlay
   - scroll inside
   - does NOT cover burger/BOOK NOW because top is below header stack
-------------------------- */
@media (max-width: 980px){

  /* Make burger always clickable */
  .header .burger{
    position: relative !important;
    z-index: 9001 !important;
  }
  .header .cta{
    position: relative !important;
    z-index: 9001 !important;
  }

  /* Default hidden */
  .mobile-menu{
    display: none !important;
  }

  /* OPEN state: fixed overlay that scrolls */
  .mobile-menu.is-open{
    display: block !important;
    position: fixed !important;

    /* IMPORTANT:
       This must sit BELOW utility+header so burger/BOOK NOW aren't blocked.
       If your stack is taller, increase 160 -> 170/180. */
    top: 160px !important;

    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    z-index: 8000 !important;
  }

  /* Accordion panels CLOSED by default (JS toggles .is-open) */
  .mobile-menu .m-acc__panel{ display: none !important; }
  .mobile-menu .m-acc.is-open .m-acc__panel{ display: block !important; }
}

/* --------------------------
   HOME ONLY: when menu is open,
   pin utility/header like other pages
-------------------------- */
body.home-page.menu-open .utility{
  position: fixed !important;
  top: 0 !important;
  z-index: 8500 !important;
}
body.home-page.menu-open .header{
  position: fixed !important;
  top: 72px !important;          /* MUST match home header top */
  z-index: 8501 !important;      /* above menu so burger works */
}

/* --------------------------
   Lock background scroll when menu open (ONE COPY ONLY)
-------------------------- */
body.menu-open{
  overflow: hidden !important;
  height: 100% !important;
}

/* =========================================
   FIX: HOME overlay header spacing (mobile utility is taller)
   - Keeps BOOK NOW + burger aligned
   - Does NOT touch hero text
========================================= */

/* Default utility height (desktop) */
body.home-page{ --utilityH: 72px; }

/* Mobile utility becomes taller because it stacks */
@media (max-width: 980px){
  body.home-page{ --utilityH: 132px; } /* tweak 120–150 if you want */
}

/* Use the variable instead of hard-coded 72px */
body.home-page .utility{ top: 0 !important; }
body.home-page .header{ top: var(--utilityH) !important; }

/* When menu is open, keep the same spacing */
body.home-page.menu-open .utility{
  position: fixed !important;
  top: 0 !important;
  z-index: 8500 !important;
}
body.home-page.menu-open .header{
  position: fixed !important;
  top: var(--utilityH) !important;
  z-index: 8501 !important;
}
@media (max-width: 980px){
  body { --utilityH: 96px; --headerH: 74px; }
  .mobile-menu.is-open{
    top: calc(var(--utilityH) + var(--headerH) + 12px) !important;
  }
}
/* Default (all non-home pages): Beach Livestream is NOT white */
.utility a.beach-live,
.utility a.beach-live:visited{
  color: var(--accent) !important;
  text-decoration: none !important;
}

.utility a.beach-live:hover,
.utility a.beach-live:active{
  color: var(--accent) !important;
  text-decoration: none !important;
  text-underline-offset: 3px;
}

/* Home page ONLY: keep it white on the hero overlay */
body.home-page .utility a.beach-live,
body.home-page .utility a.beach-live:visited,
body.home-page .utility a.beach-live:hover,
body.home-page .utility a.beach-live:active{
  color:#ffffff !important;
  text-decoration:none !important;
}

@media (min-width: 900px){
  .section{
    padding-left: 40px;
  }
}

@media (min-width: 900px){
  .wed-hero__row,
  .wed-subhero__row,
  .wed-section,
  .wed-cta{
    padding-left: 50px;
  }
}

@media (min-width: 900px){
  .ratebar{
    padding-left: 40px;
  }
}

/* =========================
   MOBILE CONTAINER FIX (HEADER EDGE SPACING)
========================= */
@media (max-width: 980px){
  .container{
    width: 100vw;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* =========================
   MOBILE/TABLET LANDSCAPE - SHOW BURGER
========================= */
@media (max-width: 1024px) and (orientation: landscape){
  .nav{
    display: none !important;
  }

  .burger{
    display: inline-block !important;
    margin-left: auto !important;
  }

  .mobile-menu{
    display: none;
  }

  .mobile-menu.is-open{
    display: block;
  }
}

@media (max-width: 980px){
  .header__row{
    justify-content: space-between;
  }

  .cta{
    margin-left: 0 !important;
  }

  .burger{
    margin-left: auto !important;
  }
}

/* ===== CLEAN HOME LANDSCAPE FIX ===== */

@media (max-width: 980px){
  .header .cta{
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
}

@media (orientation: landscape) and (max-height: 500px){
  .container{
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.home-page .utility__row{
    min-height: auto !important;
    padding: 6px 0 !important;
  }

  body.home-page .header__row{
    padding: 8px 0 !important;
  }

  body.home-page .header{
    top: 96px !important;
  }

  body.home-page .hero{
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  body.home-page .hero__content{
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    transform: translateY(-50%) !important;
  }
}

@media (orientation: landscape) and (max-height: 500px){

  body.home-page .utility .container,
  body.home-page .header .container{
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    margin-left: 24px !important;
    margin-right: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}

/* FIX: page hero text must not sit under side tabs */
@media (min-width: 769px){
  .page-hero__row{
    padding-left: 64px;
  }
}

/* FIX: align split hero (left/right layout) away from side tabs */
@media (min-width: 769px){
  .page-hero__inner{
    padding-left: 64px;
  }
}

/* FIX: staff hero text must not sit under side tabs */
@media (min-width: 769px){
  .staff-hero__inner{
    padding-left: 64px;
  }
}

/* FIX: awards hero text must not sit under side tabs */
@media (min-width: 769px){
  .awards-hero__inner{
    padding-left: 64px;
  }
}

/* FIX: terms / info pages spacing from side tabs */
@media (min-width: 769px){
  .terms-container{
    padding-left: 64px;
  }
}

/* FIX: bar-style hero text away from side tabs */
@media (min-width: 769px){
  .b-hero__content{
    padding-left: 64px;
  }
}

/* Header: reduce plain white look */
.utility,
.header{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.92),
    rgba(239,248,255,.9)
  ) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(14,165,233,.12);
}

.header{
  background: linear-gradient(
    180deg,
    rgba(245,251,255,.96),
    rgba(225,243,255,.94)
  ) !important;
}

/* =========================================================
   HOMEPAGE POLISH — WHAT'S INCLUDED
   Added July 2026. Scoped so other .section--alt blocks stay unchanged.
========================================================= */
.whats-included{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:64px 0 68px;
  background:
    url("assets/whats-included-bg.jpg") center 46% / cover no-repeat;
}

.whats-included::before,
.whats-included::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:380px;
  height:380px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.58);
  box-shadow:
    0 0 0 34px rgba(255,255,255,.12),
    0 0 0 70px rgba(255,255,255,.08),
    0 0 0 110px rgba(255,255,255,.05);
  pointer-events:none;
}

.whats-included::before{top:-230px; right:8%;}
.whats-included::after{bottom:-280px; left:-70px;}

.whats-included__veil{
  display:none;
}

.whats-included__inner{position:relative; z-index:1;}

.whats-included__head{
  align-items:flex-start;
  margin-bottom:26px;
}
.whats-included__eyebrow{
  margin:0 0 10px !important;
  color:#0b67a3 !important;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.whats-included__head h2{
  margin:0;
  color:#071a33;
  font-size:clamp(36px,4vw,54px);
  line-height:1.04;
  letter-spacing:-.035em;
}

.whats-included__accent{
  display:block;
  width:54px;
  height:4px;
  margin:17px 0 15px;
  border-radius:999px;
  background:linear-gradient(90deg,#8b5cf6,#0ea5e9);
  box-shadow:0 6px 18px rgba(14,165,233,.24);
}

.whats-included__intro{
  max-width:620px;
  margin:0 !important;
  color:#344760 !important;
  font-size:17px;
  line-height:1.7;
  font-weight:600;
}

.whats-included .iconGrid{
  gap:18px 22px;
  margin-top:0;
}

.whats-included .iconCard{
  position:relative;
  min-height:108px;
  padding:18px 22px;
  gap:18px;
  overflow:hidden;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.74);
  border-radius:20px;
  backdrop-filter:blur(12px) saturate(125%);
  -webkit-backdrop-filter:blur(12px) saturate(125%);
  box-shadow:
    0 12px 30px rgba(11,58,91,.10),
    inset 0 1px 0 rgba(255,255,255,.82);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.whats-included .iconCard::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,rgba(14,165,233,.75),rgba(139,92,246,.58));
  opacity:0;
  transition:opacity .3s ease;
}

.whats-included .iconCard:hover{
  transform:translateY(-7px);
  background:rgba(255,255,255,.9);
  box-shadow:
    0 26px 56px rgba(11,58,91,.17),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.whats-included .iconCard:hover::before{opacity:1;}

.whats-included .iconCard__content h3{
  margin-bottom:5px;
  color:#071a33;
  font-size:18px;
  letter-spacing:-.01em;
}

.whats-included .iconCard__content p{
  color:#53657c;
  font-size:15px;
}

.whats-included .iconCard__icon{
  flex:0 0 68px;
  width:68px;
  height:68px;
  font-size:31px;
  box-shadow:
    0 8px 20px rgba(11,58,91,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .3s ease;
}

.whats-included .iconCard:hover .iconCard__icon{
  transform:scale(1.07) rotate(2deg);
}

/* Small homepage polish that matches the refreshed section */
.home-page .cards{gap:22px; margin-top:24px;}
.home-page .stay{
  border-radius:22px;
  box-shadow:0 16px 38px rgba(15,23,42,.10);
  transition:transform .3s ease, box-shadow .3s ease;
}
.home-page .stay:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(15,23,42,.15);
}
.home-page .stay img{height:250px; transition:transform .45s ease;}
.home-page .stay:hover img{transform:scale(1.035);}
.home-page .stay__body{padding:20px;}

@media (max-width:980px){
  .whats-included{padding:72px 0 76px; background-position:center;}
  .whats-included .iconCard{min-height:128px;}
}

@media (max-width:640px){
  .whats-included{padding:60px 0 64px;}
  .whats-included__head{margin-bottom:26px;}
  .whats-included__intro{font-size:15px;}
  .whats-included .iconGrid{gap:16px;}
  .whats-included .iconCard{padding:20px; border-radius:20px;}
  .whats-included .iconCard__icon{
    flex-basis:62px;
    width:62px;
    height:62px;
    font-size:28px;
  }
}

@media (prefers-reduced-motion:reduce){
  .whats-included .iconCard,
  .whats-included .iconCard__icon,
  .home-page .stay,
  .home-page .stay img{transition:none;}
}


/* =========================================
   PREMIUM GUEST TESTIMONIALS
========================================= */
.reviews-section{position:relative;isolation:isolate;overflow:hidden;padding:78px 0 82px;background:linear-gradient(90deg,rgba(235,248,255,.82) 0%,rgba(255,255,255,.74) 48%,rgba(255,247,231,.79) 100%),url("assets/reviews/reviews-bg.jpg") center 58%/cover no-repeat}
.reviews-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 16%,rgba(255,255,255,.94),transparent 53%),linear-gradient(to bottom,rgba(255,255,255,.08),rgba(235,249,255,.14))}
.reviews-section::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;background-image:repeating-radial-gradient(ellipse at 10% 54%,transparent 0,transparent 28px,rgba(255,255,255,.92) 29px,transparent 31px)}
.reviews-container{position:relative;z-index:1}.reviews-header{max-width:980px;margin:0 auto 34px;text-align:center}
.reviews-kicker{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 8px;color:#1475d1;font-family:"Segoe Script","Brush Script MT",cursive;font-size:24px;font-weight:600}.reviews-kicker>span{width:42px;height:1px;background:#1475d1}
.reviews-header h2{margin:0;color:#08203e;font-family:Georgia,"Times New Roman",serif;font-size:clamp(40px,4.5vw,64px);font-weight:700;line-height:1.04;letter-spacing:-.03em}
.reviews-ornament{display:flex;align-items:center;justify-content:center;gap:7px;margin:13px 0 11px}.reviews-ornament>span:not(.reviews-palm){width:92px;height:2px;background:linear-gradient(90deg,transparent,#2877ee)}.reviews-ornament>span:last-child{background:linear-gradient(90deg,#2877ee,transparent)}.reviews-palm{font-size:25px;line-height:1}.reviews-subtitle{margin:0;color:#263e59;font-size:18px;line-height:1.55}
.reviewGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:stretch;margin-top:31px}.reviewCard{display:flex;flex-direction:column;min-height:306px;padding:27px 30px 25px;background:rgba(255,255,255,.68);border:2px solid rgba(255,255,255,.86);border-radius:27px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 20px 45px rgba(17,51,84,.15),inset 0 1px 0 rgba(255,255,255,.94);transition:transform .28s ease,box-shadow .28s ease,background .28s ease}.reviewCard:hover{transform:translateY(-7px);background:rgba(255,255,255,.78);box-shadow:0 29px 62px rgba(17,51,84,.20),inset 0 1px 0 rgba(255,255,255,.98)}
.stars{margin:0 0 9px;color:#f5a400;font-size:21px;line-height:1;letter-spacing:2px}.quoteMark{height:43px;margin:0 0 4px;color:#337de7;font-family:Georgia,"Times New Roman",serif;font-size:70px;font-weight:700;line-height:.85}.reviewText{margin:0;color:#142a45;font-size:16px;line-height:1.68}.reviewPerson{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:22px}.reviewPerson img{flex:0 0 64px;width:64px;height:64px;display:block;border:3px solid #fff;border-radius:50%;object-fit:cover;box-shadow:0 8px 18px rgba(15,70,130,.22)}.reviewPerson h3{margin:0 0 3px;color:#102542;font-size:18px;line-height:1.2}.reviewPerson span{color:#607086;font-size:14px}
@media(max-width:980px){.reviews-section{padding:66px 0 70px}.reviewGrid{grid-template-columns:1fr;max-width:720px;margin-left:auto;margin-right:auto}.reviewCard{min-height:275px}}
@media(max-width:640px){.reviews-section{padding:54px 0 58px;background-position:center}.reviews-header{margin-bottom:27px}.reviews-kicker{gap:9px;font-size:19px}.reviews-kicker>span{width:25px}.reviews-header h2{font-size:36px}.reviews-subtitle{font-size:15px}.reviewGrid{gap:18px;margin-top:25px}.reviewCard{min-height:0;padding:23px;border-radius:22px}.reviewText{font-size:15px}}
@media(prefers-reduced-motion:reduce){.reviewCard{transition:none}.reviewCard:hover{transform:none}}

/* =========================================
   PREMIUM COCOLAPALM FOOTER
========================================= */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.lux-footer{margin-top:0;color:rgba(255,255,255,.9);background:#03142a;font-family:var(--font)}
.lux-footer__hero{position:relative;isolation:isolate;overflow:hidden;padding:52px 0 0;background:linear-gradient(180deg,rgba(2,18,42,.63),rgba(2,17,38,.94) 52%,#03142a 100%),url("assets/footer/footer-sunset.jpg") center 36%/cover no-repeat}
.lux-footer__hero::before,.lux-footer__hero::after{content:"";position:absolute;z-index:-1;width:430px;height:430px;opacity:.16;pointer-events:none;background:repeating-radial-gradient(ellipse at center,transparent 0 23px,rgba(48,156,232,.65) 24px,transparent 26px)}
.lux-footer__hero::before{left:-230px;bottom:-150px}.lux-footer__hero::after{right:-240px;bottom:-160px;transform:scaleX(-1)}
.lux-footer__brand{text-align:center;margin:0 auto 30px;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.lux-footer__palm{display:block;font-size:46px;filter:hue-rotate(155deg) saturate(1.6)}
.lux-footer__logoText{font-family:Georgia,"Times New Roman",serif;font-size:clamp(46px,5vw,76px);letter-spacing:.08em;color:#fff;line-height:1}
.lux-footer__tagline,.lux-footer__location{display:flex;align-items:center;justify-content:center;gap:15px;letter-spacing:.42em}.lux-footer__tagline{margin-top:12px;color:#41b9ff;font-size:16px}.lux-footer__location{margin-top:12px;color:#fff;font-size:13px}.lux-footer__tagline span,.lux-footer__location span{width:48px;height:1px;background:currentColor}
.lux-footer__grid{display:grid;grid-template-columns:1.45fr .82fr .82fr .82fr 1.35fr;gap:18px;align-items:stretch}
.lux-footer__panel{background:linear-gradient(145deg,rgba(4,36,72,.76),rgba(2,22,48,.82));border:1px solid rgba(69,169,232,.32);border-radius:22px;padding:25px 24px;box-shadow:0 18px 42px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lux-footer__panelTitle{display:flex;align-items:center;gap:15px}.lux-footer__titleIcon{display:grid;place-items:center;width:60px;height:60px;flex:0 0 60px;border:1px solid #159be8;border-radius:50%;color:#31b4ff;font-size:23px}.lux-footer__panelTitle small{font-family:Georgia,serif;letter-spacing:.08em;font-size:15px}.lux-footer__panelTitle h2,.lux-footer__nav h2,.lux-footer__newsletter h2,.lux-footer__social h2{margin:3px 0 0;color:#fff;font-family:Georgia,"Times New Roman",serif;font-weight:500;text-transform:uppercase;letter-spacing:.06em}.lux-footer__panelTitle h2{font-size:24px}.lux-footer__intro{margin:22px 0 19px;padding-bottom:19px;border-bottom:1px solid rgba(255,255,255,.11);line-height:1.65;color:rgba(255,255,255,.78)}
.lux-footer__contactList{list-style:none;padding:0;margin:0;display:grid;gap:12px}.lux-footer__contactList li{display:flex;gap:12px;align-items:center}.lux-footer__contactList li>span{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(34,172,255,.55);border-radius:50%;color:#30b1ff}.lux-footer__contactList div{display:flex;flex-direction:column;min-width:0}.lux-footer__contactList a{color:#fff;line-height:1.35}.lux-footer__contactList small{color:rgba(255,255,255,.55);margin-top:2px}
.lux-footer__nav{text-align:center}.lux-footer__navIcon{font-size:37px}.lux-footer__nav h2,.lux-footer__newsletter h2,.lux-footer__social h2{font-size:22px}.lux-footer__rule{display:block;width:40px;height:2px;margin:13px auto 19px;background:#e5ad4b}.lux-footer__nav a{display:flex;align-items:center;text-align:left;gap:9px;padding:8px 0;color:rgba(255,255,255,.83);transition:color .2s ease,transform .2s ease}.lux-footer__nav a::before{content:"›";color:#2db5ff;font-size:24px;line-height:0}.lux-footer__nav a:hover{color:#fff;transform:translateX(4px)}
.lux-footer__side{display:grid;grid-template-rows:auto 1fr;gap:18px}.lux-footer__newsletter,.lux-footer__social{text-align:center}.lux-footer__newsletter h2,.lux-footer__social h2{color:#efc06a}.lux-footer__newsletter p,.lux-footer__social p{color:rgba(255,255,255,.72);line-height:1.55;margin:0 auto 18px}.lux-footer__form{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;border:1px solid rgba(255,255,255,.25);border-radius:13px;overflow:hidden;background:rgba(255,255,255,.06)}.lux-footer__form i{padding-left:15px;color:#d9e8f5}.lux-footer__form input{min-width:0;border:0;outline:0;padding:14px 11px;color:#fff;background:transparent;font:inherit}.lux-footer__form input::placeholder{color:rgba(255,255,255,.62)}.lux-footer__form button{align-self:stretch;border:0;padding:0 16px;background:linear-gradient(135deg,#d8a447,#f0c36b);color:#fff;font-family:Georgia,serif;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}.lux-footer__form button:hover{filter:brightness(1.07)}
.lux-footer__socials{display:flex;justify-content:center;gap:10px;margin:0 0 18px}.lux-footer__socials a{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(36,167,244,.5);border-radius:50%;color:#fff;font-size:19px;background:rgba(5,38,72,.52);transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.lux-footer__socials a:hover{transform:translateY(-4px);background:#0b78b9;box-shadow:0 10px 24px rgba(18,157,235,.25)}
.lux-footer__trust{display:grid;grid-template-columns:repeat(5,1fr);margin-top:28px;border-top:1px solid rgba(232,178,78,.42);border-bottom:1px solid rgba(232,178,78,.42)}.lux-footer__trustItem{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:118px;padding:16px;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.18)}.lux-footer__trustItem:last-child{border-right:0}.lux-footer__trustItem strong{font-size:17px}.lux-footer__stars{margin:7px 0;color:#ffbd2f;letter-spacing:2px}.lux-footer__trustItem small{color:rgba(255,255,255,.65)}.lux-footer__award i{color:#eabb62;font-size:29px;margin-bottom:8px}
.lux-footer__bottom{background:rgba(1,11,27,.9)}.lux-footer__bottomRow{display:grid;grid-template-columns:1fr auto 44px;gap:20px;align-items:center;min-height:76px}.lux-footer__bottom p{margin:0;color:rgba(255,255,255,.64);font-size:14px}.lux-footer__bottom nav{display:flex;gap:13px;align-items:center}.lux-footer__bottom nav a{color:rgba(255,255,255,.65);font-size:14px}.lux-footer__bottom nav a:hover{color:#fff}.lux-footer__bottom nav span{opacity:.35}.lux-footer__top{display:grid;place-items:center;width:42px;height:42px;border:1px solid #159be8;border-radius:50%;color:#fff;background:rgba(5,47,85,.55)}.lux-footer__top:hover{background:#0b78b9}
@media(max-width:1200px){.lux-footer__grid{grid-template-columns:1.25fr repeat(3,1fr)}.lux-footer__side{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:none}.lux-footer__trust{grid-template-columns:repeat(3,1fr)}.lux-footer__trustItem:nth-child(3){border-right:0}.lux-footer__trustItem:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.18)}}
@media(max-width:860px){.lux-footer__grid{grid-template-columns:1fr 1fr}.lux-footer__contact{grid-column:1/-1}.lux-footer__side{grid-template-columns:1fr}.lux-footer__trust{grid-template-columns:1fr 1fr}.lux-footer__trustItem,.lux-footer__trustItem:nth-child(3){border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}.lux-footer__trustItem:nth-child(even){border-right:0}.lux-footer__bottomRow{grid-template-columns:1fr 44px}.lux-footer__bottom nav{grid-column:1/-1;grid-row:2;flex-wrap:wrap}.lux-footer__top{grid-column:2;grid-row:1}}
@media(max-width:560px){.lux-footer__hero{padding-top:42px}.lux-footer__logoText{font-size:39px;letter-spacing:.045em}.lux-footer__tagline{font-size:11px;letter-spacing:.25em}.lux-footer__location{font-size:10px;letter-spacing:.26em}.lux-footer__grid{grid-template-columns:1fr}.lux-footer__contact,.lux-footer__side{grid-column:auto}.lux-footer__panel{padding:22px 20px}.lux-footer__trust{grid-template-columns:1fr}.lux-footer__trustItem,.lux-footer__trustItem:nth-child(3),.lux-footer__trustItem:nth-child(even){border-right:0}.lux-footer__bottomRow{padding:18px 0}.lux-footer__form{grid-template-columns:auto minmax(0,1fr)}.lux-footer__form button{grid-column:1/-1;min-height:46px}}

/* =========================================================
   DESKTOP HEADER LOGO CONTAINER
   The logo spans both header rows and the divider begins after it.
========================================================= */
@media (min-width: 981px){
  .utility,
  .header{
    border-bottom: 0 !important;
  }

  .utility{
    position: relative;
    z-index: 51;
    overflow: visible;
  }

  .utility__row{
    position: relative;
  }

  .utility__row::after{
    content: "";
    position: absolute;
    left: 180px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255,255,255,.28);
  }

  .utility__logo{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 168px;
    height: 140px;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
  }

  .utility__logo img{
    width: 210px;
    max-width: none;
    height: auto;
    object-fit: initial;
  }

  .utility .utility__left{
    padding-left: 180px !important;
  }

  .nav{
    margin-left: 180px;
  }
}


.lux-footer__stars{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin:9px 0;
  color:#f6bd4c;
  font-size:14px;
  line-height:1;
}

/* Bottom-right sample rate comparison */
.rate-compare{position:fixed;right:22px;bottom:22px;z-index:7000;font-family:var(--font)}
.rate-compare__launcher{display:flex;align-items:center;gap:11px;min-width:232px;padding:11px 16px 11px 11px;border:1px solid rgba(255,255,255,.34);border-radius:18px;color:#fff;background:linear-gradient(135deg,#0ea5e9,#075b91);box-shadow:0 16px 38px rgba(2,35,60,.3);cursor:pointer;text-align:left}
.rate-compare__icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:13px;color:#08669f;background:#fff;font-size:22px;font-weight:900}
.rate-compare__launcher strong,.rate-compare__launcher small,.rate-compare__row span strong,.rate-compare__row span small{display:block}
.rate-compare__launcher strong{font-size:14px}.rate-compare__launcher small{margin-top:3px;color:rgba(255,255,255,.78);font-size:11px}.rate-compare.is-open .rate-compare__launcher{display:none}
.rate-compare__panel{width:min(360px,calc(100vw - 28px));padding:20px;border:1px solid rgba(8,63,98,.12);border-radius:22px;color:#10243a;background:#fff;box-shadow:0 24px 60px rgba(2,24,43,.28)}
.rate-compare__panel[hidden]{display:none}.rate-compare__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.rate-compare__head>div>span{display:block;margin-bottom:3px;color:#0b7fbd;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.rate-compare__head h2{margin:0;color:#082d49;font-family:Georgia,"Times New Roman",serif;font-size:24px;line-height:1.12}.rate-compare__close{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;padding:0;border:0;border-radius:50%;color:#315269;background:#edf6fb;font-size:25px;cursor:pointer}
.rate-compare__intro{margin:11px 0 15px;color:#587083;font-size:13px;line-height:1.45}.rate-compare__list{display:grid;gap:7px}.rate-compare__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #e7eef3;border-radius:13px;background:#f8fafc}
.rate-compare__row span strong{font-size:13px}.rate-compare__row span small{margin-top:2px;color:#718292;font-size:10px}.rate-compare__row>b{color:#193c53;font-size:14px;white-space:nowrap}.rate-compare__row--ours{border-color:#68c8f3;background:linear-gradient(90deg,#e9f8ff,#f5fcff)}.rate-compare__row--ours>b{color:#0879b5;font-size:17px}
.rate-compare__saving{margin:13px 0 5px;color:#167149;font-size:13px;text-align:center}.rate-compare__note{margin:0 0 13px;color:#7a8790;font-size:10px;line-height:1.4;text-align:center}.rate-compare__book{display:block;padding:12px 16px;border-radius:13px;color:#fff;background:linear-gradient(90deg,#0ea5e9,#0871ab);box-shadow:0 10px 22px rgba(11,103,163,.2);font-size:14px;font-weight:900;text-align:center}.rate-compare__book:hover{color:#fff;filter:brightness(1.05)}
@media(max-width:640px){.rate-compare{right:12px;bottom:12px}.rate-compare__launcher{min-width:0;padding:9px 12px 9px 9px}.rate-compare__panel{max-height:calc(100vh - 24px);overflow-y:auto}}

/* =========================================
   FOOTER — REMOVE NEWSLETTER / EXPAND SOCIAL
========================================= */

.lux-footer__newsletter{
  display:none !important;
}

.lux-footer__side{
  display:grid !important;
  grid-template-rows:1fr !important;
  gap:0 !important;
}

.lux-footer__social{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* =========================================
   WHAT'S INCLUDED — CLEAN PHOTO VERSION
========================================= */

/* Keep the photo clean */
.whats-included{
  background:
    url("assets/whats-included-bg.jpg") center 46% / cover no-repeat !important;
}

/* No large white wash */
.whats-included__veil{
  display:none !important;
}

/* Remove decorative circles for a cleaner look */
.whats-included::before,
.whats-included::after{
  display:none !important;
}

/* Give ONLY the heading area a subtle dark readability fade */
.whats-included::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  z-index:0;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(3,20,42,.48) 0%,
      rgba(3,20,42,.20) 34%,
      rgba(3,20,42,0) 62%
    );
}

/* Keep content above the fade */
.whats-included__inner{
  position:relative;
  z-index:1;
}

/* Heading readable on the photograph */
.whats-included__eyebrow{
  color:#ffffff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}

.whats-included__head h2{
  color:#ffffff !important;
  text-shadow:0 3px 12px rgba(0,0,0,.55);
}

.whats-included__intro{
  color:#ffffff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}


/* ===== CLEANER FEATURE ROWS ===== */

.whats-included .iconGrid{
  gap:14px 18px;
}

.whats-included .iconCard{
  min-height:92px;
  padding:14px 18px;
  gap:14px;

  background:rgba(255,255,255,.38) !important;
  border:1px solid rgba(255,255,255,.46) !important;
  border-radius:16px;

  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);

  box-shadow:
    0 8px 20px rgba(3,20,42,.10);

  transition:
    transform .25s ease,
    background .25s ease;
}

/* Remove the colored side stripe */
.whats-included .iconCard::before{
  display:none !important;
}

.whats-included .iconCard:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.52) !important;
  box-shadow:0 12px 26px rgba(3,20,42,.14);
}

/* Text needs to remain dark inside the light glass rows */
.whats-included .iconCard__content h3{
  color:#071a33 !important;
  font-size:17px;
  margin-bottom:3px;
}

.whats-included .iconCard__content p{
  color:#263e59 !important;
  font-size:14px;
}

/* Slightly smaller icons */
.whats-included .iconCard__icon{
  flex:0 0 58px;
  width:58px;
  height:58px;
  font-size:27px;
  box-shadow:none;
}

/* =========================================
   WHAT'S INCLUDED — 6 BOXES IN ONE BOTTOM ROW
========================================= */

.whats-included{
  min-height:520px;
  padding:54px 0 10px !important;
}

.whats-included__inner{
  position:relative;
  z-index:1;

  min-height:438px;

  display:flex;
  flex-direction:column;
}

/* Keep heading at the top */
.whats-included__head{
  margin-bottom:0 !important;
}

/* Push the six boxes to the bottom */
.whats-included .iconGrid{
  margin-top:auto !important;

  display:grid !important;
  grid-template-columns:repeat(6, minmax(0,1fr)) !important;

  gap:12px !important;
  width:100%;
}

/* Compact cards */
.whats-included .iconCard{
  min-height:96px !important;
  padding:13px 14px !important;
  gap:10px !important;

  border-radius:16px !important;

  background:rgba(255,255,255,.48) !important;
  border:1px solid rgba(255,255,255,.65) !important;

  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);

  box-shadow:0 7px 18px rgba(3,20,42,.10) !important;
}

/* Put icon on left instead of wasting space */
.whats-included .iconCard__icon{
  order:-1;

  flex:0 0 48px !important;
  width:48px !important;
  height:48px !important;

  font-size:23px !important;
}

/* Compact text */
.whats-included .iconCard__content h3{
  font-size:15px !important;
  margin:0 0 3px !important;
  line-height:1.2;
}

.whats-included .iconCard__content p{
  font-size:13px !important;
  line-height:1.3;
}

/* No side stripe */
.whats-included .iconCard::before{
  display:none !important;
}

/* Small hover only */
.whats-included .iconCard:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.58) !important;
}


/* =========================================
   RESPONSIVE FALLBACKS
========================================= */

@media (max-width:1200px){

  .whats-included .iconGrid{
    grid-template-columns:repeat(3,1fr) !important;
  }

}

@media (max-width:700px){

  .whats-included{
    min-height:auto;
  }

  .whats-included__inner{
    min-height:auto;
  }

  .whats-included .iconGrid{
    margin-top:32px !important;
    grid-template-columns:repeat(2,1fr) !important;
  }

}

@media (max-width:480px){

  .whats-included .iconGrid{
    grid-template-columns:1fr !important;
  }

}

/* =========================================
   GUEST EXPERIENCES — CLEAN PHOTO VERSION
========================================= */

/* Show the actual beach photo */
.reviews-section{
  background:
    url("assets/reviews/reviews-bg.jpg")
    center 58% / cover no-repeat !important;
}

/* Remove the white wash */
.reviews-section::before{
  display:none !important;
}

/* Remove the decorative tint/pattern */
.reviews-section::after{
  display:none !important;
}


/* =========================================
   REVIEW HEADING — READABLE ON PHOTO
========================================= */

.reviews-kicker{
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}

.reviews-kicker > span{
  background:#ffffff !important;
}

.reviews-header h2{
  color:#ffffff !important;
  text-shadow:0 3px 14px rgba(0,0,0,.60);
}

.reviews-subtitle{
  color:#ffffff !important;
  font-weight:600;
  text-shadow:0 2px 9px rgba(0,0,0,.65);
}

.reviews-ornament > span:not(.reviews-palm){
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.95)
  ) !important;
}

.reviews-ornament > span:last-child{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.95),
    transparent
  ) !important;
}


/* =========================================
   TESTIMONIAL CARDS — LIGHT GLASS
========================================= */

.reviewCard{
  background:rgba(255,255,255,.48) !important;

  border:1px solid rgba(255,255,255,.70) !important;

  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;

  box-shadow:
    0 12px 28px rgba(3,20,42,.13) !important;
}

.reviewCard:hover{
  background:rgba(255,255,255,.58) !important;

  box-shadow:
    0 18px 38px rgba(3,20,42,.18) !important;
}


/* Keep review text strong and readable */
.reviewText{
  color:#102542 !important;
}

.reviewPerson h3{
  color:#071a33 !important;
}

.reviewPerson span{
  color:#40556f !important;
}

/* =========================================
   WHAT'S INCLUDED — MODERN LINE ICONS
========================================= */

.whats-included .iconCard__icon{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;

  color:#0b2f52 !important;
}

.whats-included .iconCard__icon i{
  font-size:27px;
  line-height:1;
  color:#0b2f52;
}

.whats-included .iconCard:hover .iconCard__icon{
  transform:none !important;
}

.whats-included .iconCard:hover .iconCard__icon i{
  color:#0b67a3;
}

/* =========================================================
   HOME INTRO — RESORT EDITORIAL REDESIGN
   We keep coming back / Quick Links
========================================================= */

.home-page .intro{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  padding:62px 0 35px;

  background:
    linear-gradient(
      135deg,
      #f8fcff 0%,
      #ffffff 48%,
      #f3f9ff 100%
    );
}


/* Main two-column layout */
.home-page .intro__grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);
  gap:58px;
  align-items:start;
}


/* =========================================
   LEFT — INTRO COPY
========================================= */

.home-page .intro__copy{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;

  padding:6px 52px 6px 8px !important;

  box-shadow:none !important;

  position:relative;
}


/* Blue vertical divider */
.home-page .intro__copy::after{
  content:"";
  position:absolute;

  top:0;
  right:-30px;

  width:1px;
  height:100%;

  background:linear-gradient(
    to bottom,
    transparent,
    rgba(11,103,163,.75) 10%,
    rgba(11,103,163,.75) 90%,
    transparent
  );
}


.home-page .intro__eyebrow{
  margin:0 0 14px;

  color:#0b67a3;

  font-size:12px;
  font-weight:900;

  letter-spacing:.16em;
  text-transform:uppercase;
}


.home-page .intro__title{
  margin:0 0 22px;

  color:#08203e;

  font-family:Georgia, "Times New Roman", serif;

  font-size:clamp(38px,3.5vw,54px);
  font-weight:700;

  line-height:1.02;
  letter-spacing:-.03em;

  max-width:620px;
}


/* Small blue line under title */
.home-page .intro__title::after{
  content:"";
  display:block;

  width:44px;
  height:3px;

  margin-top:17px;

  border-radius:99px;

  background:linear-gradient(
    90deg,
    #0b67a3,
    #38bdf8
  );
}


.home-page .intro__lead{
  margin:0;

  max-width:67ch;

  color:#263e59;

  font-size:16px;
  line-height:1.62;
}


/* =========================================
   RIGHT — QUICK LINKS
========================================= */

.home-page .intro__card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;

  padding:4px 0 0 !important;

  box-shadow:none !important;
}


.home-page .intro__cardTop{
  margin-bottom:18px;
}


.home-page .intro__cardTop h3{
  margin:0 0 5px;

  color:#0b67a3;

  font-size:20px;
  font-weight:900;

  letter-spacing:.04em;
  text-transform:uppercase;
}


.home-page .intro__cardTop p{
  margin:0;

  color:#263e59;

  font-size:15px;
  font-weight:700;
}


/* Two-column quick link grid */
.home-page .introTiles{
  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:14px;
}


/* Individual quick link */
.home-page .tile{
  min-height:76px;

  display:flex;
  align-items:center;

  gap:15px;

  padding:14px 17px;

  background:rgba(255,255,255,.84);

  border:1px solid rgba(15,70,120,.08);

  border-radius:15px;

  box-shadow:
    0 7px 20px rgba(15,50,85,.08);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.home-page .tile:hover{
  transform:translateY(-3px);

  background:#ffffff;

  border-color:rgba(11,103,163,.22);

  box-shadow:
    0 12px 28px rgba(15,50,85,.13);
}


/* Modern icon — no pastel circle */
.home-page .tile__icon{
  flex:0 0 38px;

  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  color:#0b3157;

  font-size:22px;

  box-shadow:none !important;
}


.home-page .tile__icon i{
  color:#0b3157;

  font-size:22px;

  transition:
    color .2s ease,
    transform .2s ease;
}


.home-page .tile:hover .tile__icon i{
  color:#0b67a3;

  transform:scale(1.06);
}


/* Text */
.home-page .tile__text{
  display:flex;
  flex-direction:column;

  min-width:0;

  line-height:1.15;
}


.home-page .tile__text b{
  color:#08203e;

  font-size:15px;
  font-weight:850;
}


.home-page .tile__text small{
  margin-top:3px;

  color:#607086;

  font-size:12px;
  font-weight:650;
}


/* =========================================
   TABLET
========================================= */

@media (max-width:980px){

  .home-page .intro{
    padding:52px 0 68px;
  }

  .home-page .intro__grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .home-page .intro__copy{
    padding:0 !important;
  }

  .home-page .intro__copy::after{
    display:none;
  }

  .home-page .intro__lead{
    max-width:none;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:640px){

  .home-page .intro{
    padding:42px 0 46px;
  }

  .home-page .intro__title{
    font-size:36px;
  }

  .home-page .intro__lead{
    font-size:15px;
  }

  .home-page .introTiles{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .home-page .intro__cardTop{
    margin-bottom:16px;
  }

  .home-page .intro__cardTop h3{
    font-size:19px;
  }

  .home-page .intro__cardTop p{
    font-size:14px;
    font-weight:500;
  }

  .home-page .tile{
    min-width:0;
    min-height:112px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
    padding:14px;
    border-color:rgba(11,103,163,.13);
    border-radius:14px;
    box-shadow:0 4px 15px rgba(15,50,85,.06);
  }

  .home-page .tile__icon{
    flex:0 0 auto;
    width:24px;
    height:24px;
    font-size:21px;
  }

  .home-page .tile__icon i{
    font-size:21px;
  }

  .home-page .tile__text{
    width:100%;
    gap:2px;
  }

  .home-page .tile__text b{
    font-size:14px;
    line-height:1.15;
  }

  .home-page .tile__text small{
    margin:0;
    font-size:11px;
    line-height:1.25;
  }

}
/* Temporarily hide rate comparison widget */
.rate-compare{
  display:none !important;
}

/* Side-button text clearance: inset content only, keep page backgrounds full width. */
@media (min-width: 981px) {
  body main .container,
  body main .terms-container,
  body main .page-container {
    padding-left: 64px !important;
  }
}

/* Clearer inner-page header colours at every screen size. */
body:not(.home-page) .utility {
  background: linear-gradient(180deg, #edf7fd, #dceefa) !important;
}
body:not(.home-page) .header {
  background: linear-gradient(180deg, #e3f2fc, #cde7f8) !important;
}

/* Keep Coco Village/Rooms containers inside their padded parent. */
.cv .container {
  width: min(var(--max), calc(100% - 48px));
}

/* Home desktop: size padded section containers against their parent, not 100vw. */
@media (min-width: 981px) {
  body.home-page .section > .container {
    width: min(var(--max), calc(100% - 48px)) !important;
  }
}

/* Shared neutral page backgrounds. Only surface backgrounds are changed. */
:root { --bg:#dedede; --page-surface:#dedede; }
body { background-color:var(--page-surface); }
body main:not(.halloween) { background-color:var(--page-surface) !important; }

/* The home menu remains over its photograph; inner-page menu surfaces are neutral. */
body:not(.home-page) .utility,
body:not(.home-page) .header {
  background:var(--page-surface) !important;
}

/* Content sections; photographic sections and their readability overlays are excluded. */
body main:not(.halloween) > section:not([class*="hero"]):not(.whats-included):not(.reviews-section):not(.pool-cta),
body main:not(.halloween) .section:not([class*="hero"]):not(.whats-included):not(.reviews-section):not(.pool-cta),
body main:not(.halloween) .b-section,
body main:not(.halloween) .r-section,
body main:not(.halloween) .wed-section,
body main:not(.halloween) .wed-cta,
body main:not(.halloween) .deals-section,
body main:not(.halloween) .deals-cta,
body main:not(.halloween) .c-section,
body main:not(.halloween) .ev-section,
body main:not(.halloween) .cv-section {
  background:var(--page-surface) !important;
}

/* Text-only introductory panels and archive notices. */
body main:not(.halloween) .c-hero,
body main:not(.halloween) .deals-hero,
body main:not(.halloween) .wed-hero,
body main:not(.halloween) .wed-subhero,
body.notes-page .notes-hero,
body.notes-page .notes-archive,
body.notes-page .notes-reading,
body.notes-page .notes-notice,
body.guestbook-page .gb-hero,
body.guestbook-page .gb-section,
body.resort-info-page .terms-wrap,
body.resort-info-page .terms-header,
body.resort-info-page .note,
body main .story-step,
body main .story-closing {
  background:var(--page-surface) !important;
}

/* Softer reading panels: retain the existing card layout and accent colours. */
body main:not(.halloween) .intro__copy,
body main:not(.halloween) .iconCard,
body main:not(.halloween) .stay,
body main:not(.halloween) .detail-copy,
body main:not(.halloween) .menu-card,
body main:not(.halloween) .menu-section,
body main:not(.halloween) .terms-card,
body main:not(.halloween) .card,
body main:not(.halloween) .award-card,
body main:not(.halloween) .staff-card,
body main:not(.halloween) .c-card,
body main:not(.halloween) .r-card,
body main:not(.halloween) .r-factCard,
body main:not(.halloween) .r-menuCard,
body main:not(.halloween) .b-card,
body main:not(.halloween) .b-factCard,
body main:not(.halloween) .ev-stripCard,
body main:not(.halloween) .ev-card,
body main:not(.halloween) .ev-cta__box,
body main:not(.halloween) .deal-card,
body main:not(.halloween) .deals-cta__row,
body main:not(.halloween) .mini-card,
body main:not(.halloween) .wed-card,
body main:not(.halloween) .pkg,
body main:not(.halloween) .req-card,
body main:not(.halloween) .wed-cta__row,
body main:not(.halloween) .group-events-card,
body main:not(.halloween) .room-card,
body main:not(.halloween) .info-card,
body main:not(.halloween) .pf-item,
body main:not(.halloween) .notes-card,
body main:not(.halloween) .notes-article,
body main:not(.halloween) .gb-card,
body main:not(.halloween) .ri-arrival .info-item,
body main:not(.halloween) .story-step,
body main:not(.halloween) .story-closing,
body main:not(.halloween) .coco-interactive .details,
body main:not(.halloween) .coco-interactive .map,
body main:not(.halloween) .cv-submenu {
  background:#e8e8e8 !important;
}

/* Plain page introductions: preserve the separate photographs inside them. */
body main:not(.halloween) .page-hero:not(.map-hero):not(.cv-hero):not(.pool-hero) { background:#dedede !important; }
/* Remaining white controls and reading surfaces. */
body main:not(.halloween) .g-tab:not(.is-active),
body main:not(.halloween) .ev-filter:not(.is-active),
body main:not(.halloween) .awards-filter:not(.is-active),
body main:not(.halloween) .staff-filter:not(.is-active),
body main:not(.halloween) .awards-search,
body main:not(.halloween) .staff-search,
body main:not(.halloween) .c-miniBtn,
body main:not(.halloween) .notes-badge,
body main:not(.halloween) .gb-badge,
body main:not(.halloween) .gb-tools input,
body main:not(.halloween) .gb-tools select,
body main:not(.halloween) .gb-pagination button,
body main:not(.halloween) .room-figure,
body main:not(.halloween) .amenities-grid li,
body main:not(.halloween) .wed-heroCard__foot,
body main:not(.halloween) .deal-banner__tip,
body main:not(.halloween) .pool-intro__facts span {
 background:#e8e8e8 !important;
}
/* Two home card groups use the same surface colour. Original accents stay intact. */
body.home-page main .tile.tile,
body.home-page main .iconCard.iconCard {
 background:#e8e8e8 !important;
}
body.home-page main .tile.tile:hover,
body.home-page main .iconCard.iconCard:hover {
 background:#dedede !important;
}
body.home-page main .intro__copy { background:transparent !important; }

/* Remaining navigation surfaces and the map's details panel only. */
body main:not(.halloween) .b-subnavWrap,
body main:not(.halloween) .r-subnavWrap,
body main:not(.halloween) .cv-submenu {
  background:#dedede !important;
}
body main.coco-interactive .details {
  background:#e8e8e8 !important;
}

/* Map outer corners match the details panel. */
body main.coco-interactive .map { border-radius:14px; overflow:hidden; }

/* Staff introduction uses the approved page background. */
body main.staff-main .staff-hero { background:#dedede !important; }

/* Use the approved light palette at every screen width and device appearance. */
:root { color-scheme:light; color-scheme:only light; }
body { color:#0f172a; }
/* Plain grey sections: explicit text colours instead of device-dependent inheritance. */
body main:not(.halloween) :is(
 .intro, .staff-hero, .staff-controls, .staff-section, .staff-featured,
 .page-hero:not(.map-hero), .c-hero, .c-section,
 .terms-wrap, .notes-hero, .notes-archive, .notes-reading, .gb-hero, .gb-section,
 .b-section, .r-section, .cv-section, .ev-section, .deals-section,
 .wed-section, .wed-hero, .wed-subhero, .pool-intro, .pool-experiences,
 .section:not(.whats-included):not(.reviews-section):not([class*="hero"])
) :is(h1,h2,h3,h4) { color:#0f172a !important; }
body main:not(.halloween) :is(
 .intro, .staff-hero, .staff-controls, .staff-section, .staff-featured,
 .page-hero:not(.map-hero), .c-hero, .c-section,
 .terms-wrap, .notes-hero, .notes-archive, .notes-reading, .gb-hero, .gb-section,
 .b-section, .r-section, .cv-section, .ev-section, .deals-section,
 .wed-section, .wed-hero, .wed-subhero, .pool-intro, .pool-experiences,
 .section:not(.whats-included):not(.reviews-section):not([class*="hero"])
) :is(p,li) { color:#263e59 !important; }
body.home-page main .intro__title { color:#08203e !important; }
body.home-page main .intro__lead,
body.home-page main .intro__cardTop p { color:#263e59 !important; }
body.home-page main .intro__eyebrow,
body.home-page main .intro__cardTop h3 { color:#0b67a3 !important; }
body.home-page main .tile.tile,
body.home-page main .whats-included .iconCard.iconCard {
 background:#e8e8e8 !important;
 color:#0f172a !important;
}
body.home-page main .tile.tile .tile__text b,
body.home-page main .tile.tile .tile__icon i,
body.home-page main .whats-included .iconCard.iconCard .iconCard__content h3,
body.home-page main .whats-included .iconCard.iconCard .iconCard__icon i {
 color:#0b2f52 !important;
}
body.home-page main .tile.tile .tile__text small,
body.home-page main .whats-included .iconCard.iconCard .iconCard__content p {
 color:#263e59 !important;
}
body main.coco-interactive .details :is(h2,h3) { color:#0f172a !important; }
body main.coco-interactive .details :is(p,li) { color:#263e59 !important; }

/* Content containers must fit their parent, including page-specific section padding.
   Preserve existing narrower layouts and the shared side-tab text clearance. */
body main .container {
  max-width: 100% !important;
}
@media (min-width: 981px) {
  body main .container {
    max-width: min(var(--max), calc(100% - 48px)) !important;
  }
}