/* =========================================================
   El Castillo — Boutique Luxury Hotel
   Redesign stylesheet · elevated modern luxury
   ========================================================= */

:root{
  --ink:#16302e;          /* deep teal-charcoal text */
  --ink-soft:#3c5451;
  --bone:#f8fcfc;         /* clean near-white base */
  --bone-2:#e3eff0;       /* soft blue-green tint */
  --sand:#cfe3e2;
  --brass:#a9824c;        /* metallic gold accent */
  --brass-dk:#8a6836;
  --sea:#2f5d63;          /* muted ocean teal */
  --sea-dk:#1f4247;
  --deep:#123a3d;         /* deep ocean-teal dark sections */
  --white:#ffffff;
  --line:rgba(18,58,61,.14);
  --shadow:0 24px 60px -28px rgba(20,24,22,.45);
  --f-serif:"Cormorant Garamond",Georgia,serif;
  --f-sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-sans);
  color:var(--ink);
  background:var(--bone);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto is essential now that every <img> carries width/height attributes —
   without it a constrained width keeps the attribute height and the photo stretches */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-serif);font-weight:500;line-height:1.08;margin:0}
p{margin:0 0 1.1rem}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.eyebrow{
  font-family:var(--f-sans);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.72rem;
  font-weight:500;
  color:var(--brass);
  margin:0 0 1rem;
  display:block;
}
.eyebrow.light{color:#e8d9c2}
.lead{font-size:1.18rem;color:var(--ink-soft);max-width:60ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
  font-family:var(--f-sans);
  text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;font-weight:500;
  padding:1.05em 2.1em;border:1px solid var(--brass);
  color:var(--ink);background:transparent;cursor:pointer;
  transition:all .4s var(--ease);
}
.btn:hover{background:var(--brass);color:#fff}
.btn--solid{background:var(--brass);color:#fff}
.btn--solid:hover{background:var(--brass-dk);border-color:var(--brass-dk)}
.btn--light{border-color:rgba(255,255,255,.6);color:#fff}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--lg{font-size:.95rem;letter-spacing:.2em;padding:1.35em 3.1em}
@media (max-width:600px){.btn--lg{font-size:.85rem;padding:1.2em 2.4em}}
.btn--ghost{border:none;padding-left:0;padding-right:0;color:var(--brass);position:relative}
.btn--ghost::after{content:"";position:absolute;left:0;bottom:.5em;height:1px;width:100%;background:var(--brass);transform:scaleX(1);transform-origin:left;transition:transform .4s var(--ease)}
.btn--ghost:hover::after{transform:scaleX(0);transform-origin:right}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--sea-dk);color:#f3ece0;text-align:center;
  font-size:.78rem;letter-spacing:.06em;padding:.55rem 1rem;
}
.announce a{color:#f0dcc0;text-decoration:underline;text-underline-offset:3px}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:#fff;box-shadow:0 1px 0 var(--line);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .4s var(--ease);
}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(20px,5vw,56px);gap:1.5rem;
}
.brand{display:flex;align-items:center;line-height:1;flex:0 0 auto}
.brand-logo{height:clamp(44px,5.5vw,58px);width:auto;max-width:none;flex:none;display:block}
.nav{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.7rem);position:relative}
.nav a{
  font-size:.97rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  position:relative;padding:.2rem 0;transition:color .3s;
}
.nav a:hover{color:var(--sea)}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--brass);transition:width .35s var(--ease)}
.nav a:hover::after,.nav a.active::after{width:100%}
/* ---------- Navigation dropdowns ---------- */
.nav-dd{position:relative}
.nav-dd__t{font-family:var(--f-sans);font-size:.97rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:none;border:none;padding:.2rem 0;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:.34rem;transition:color .3s}
/* the caret — specificity kept above the base `.nav a::after` underline rule */
.nav .nav-dd__t::after,
.nav .nav-dd__t:hover::after,
.nav .nav-dd:hover .nav-dd__t::after,
.nav .nav-dd:focus-within .nav-dd__t::after{
  content:"";position:static;width:5px;height:5px;background:none;
  border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);opacity:.55;
  transition:transform .3s var(--ease),opacity .3s}
.nav .nav-dd:hover .nav-dd__t::after,
.nav .nav-dd:focus-within .nav-dd__t::after{transform:rotate(225deg) translate(-1px,-1px);opacity:.9}
.nav-dd__t>span{position:relative;display:inline-block;padding-bottom:.05rem}
.nav-dd__t>span::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--brass);transition:width .35s var(--ease)}
.nav-dd:hover .nav-dd__t,.nav-dd:focus-within .nav-dd__t{color:var(--sea)}
.nav-dd:hover .nav-dd__t>span::after,.nav-dd:focus-within .nav-dd__t>span::after,
.nav-dd__t.active>span::after{width:100%}
.nav-dd__m{display:none;position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 1.05rem);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:.35rem;min-width:186px;z-index:80}
.nav-dd__m::before{content:"";position:absolute;left:0;right:0;top:-1.05rem;height:1.05rem}
.nav-dd--wide .nav-dd__m::before{left:-2rem;right:-2rem;top:-1.6rem;height:1.6rem}
.nav-dd:hover .nav-dd__m,.nav-dd:focus-within .nav-dd__m{display:block}
.nav-dd__m a{display:block;padding:.7rem .95rem;font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.nav .nav-dd__m a::after,.nav .nav-dd__m a:hover::after{display:none;width:0}
.nav-dd__m a:hover{background:var(--bone-2);color:var(--sea)}
.nav-dd__m a.active{color:var(--brass)}

/* link-style trigger: the top-level item stays clickable (Activities, The Area) */
a.nav-dd__t{text-decoration:none}
a.nav-dd__t:hover{color:var(--sea)}

/* wide grouped panel (Activities) */
/* the wide panels anchor to the nav, not to their own item, so a 780px menu
   can never run off the edge of the screen */
.nav-dd--wide{position:static}
.nav-dd--wide .nav-dd__m{display:none;min-width:780px;max-width:calc(100vw - 32px);padding:1.6rem 1.8rem 1.3rem;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem 2.2rem}
.nav-dd--wide:hover .nav-dd__m,.nav-dd--wide:focus-within .nav-dd__m{display:grid}
.nav-dd--wide .nav-dd__m.is-2col{grid-template-columns:repeat(2,minmax(0,1fr));min-width:560px}
.nav-dd__grp{min-width:0}
.nav-dd__grp h5{font-family:var(--f-sans);font-size:.73rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .55rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);font-weight:500}
.nav-dd__grp a{display:block;padding:.5rem 0;font-size:.92rem;letter-spacing:.04em;text-transform:none;
  font-family:var(--f-sans);color:var(--ink-soft);
  white-space:normal;overflow-wrap:break-word;line-height:1.35}
.nav-dd__grp a:hover{background:none;color:var(--sea);padding-left:.3rem}
.nav-dd__foot{grid-column:1/-1;margin-top:.9rem;padding-top:.95rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-dd__foot span{font-family:var(--f-sans);font-size:.88rem;color:var(--ink-soft);font-style:italic}
.nav-dd__foot a{padding:0;font-size:.79rem;letter-spacing:.2em;color:var(--brass)}
.nav-dd__foot a:hover{background:none;color:var(--sea)}

@media(max-width:1080px){
  .nav-dd--wide .nav-dd__m{min-width:560px;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .nav-dd,.nav-dd--wide{position:static;width:100%;text-align:center}
  .nav-dd__t{font-size:1.1rem;color:#fff}
  button.nav-dd__t{pointer-events:none}
  .nav-dd__t::after{display:none}
  .nav-dd__m,.nav-dd--wide .nav-dd__m,
  .nav-dd--wide:hover .nav-dd__m,.nav-dd--wide:focus-within .nav-dd__m{
    display:block;position:static;transform:none;background:none;border:none;
    box-shadow:none;padding:.5rem 0 0;min-width:0;grid-template-columns:1fr}
  .nav-dd__m a{color:rgba(255,255,255,.78);font-size:.94rem;padding:.42rem 0;text-align:center}
  .nav-dd__grp{margin-bottom:.9rem}
  .nav-dd__grp h5{color:rgba(255,255,255,.42);border-bottom:none;margin-bottom:.1rem;padding-bottom:0}
  .nav-dd__grp a{color:rgba(255,255,255,.78);font-size:.92rem;text-align:center}
  .nav-dd__grp a:hover{padding-left:0}
  .nav-dd__foot{border-top:1px solid rgba(255,255,255,.16);justify-content:center}
  .nav-dd__foot span{display:none}
  .nav-dd__foot a{color:#e9c88a}
}

/* ---------- Header fit ----------
   Type stays at full size. The two things that actually buy room are the logo
   (~275px wide at 58px tall — more than Rooms+Dining+Spa+Activities combined)
   and the phone number (~120px including its gap, and it's duplicated in both
   Contact and the footer). Between them that's ~180px, which is more than the
   ninth nav item needs. Font sizes only step down near the hamburger.        */
.site-header .bar{flex-wrap:nowrap}
.brand-logo{height:clamp(40px,4.4vw,51px)}
.nav{flex-wrap:nowrap;min-width:0}
.nav a,.nav-dd__t{white-space:nowrap}

@media (max-width:1560px){.header-cta .phone{display:none}}
@media (max-width:1400px){
  .brand-logo{height:44px}
  .nav{gap:1.05rem}
}
/* header-fit only — must not reach the slide-out menu, which starts at 820px */
@media (max-width:1200px) and (min-width:821px){
  .brand-logo{height:40px}
  .nav{gap:.72rem}
  .nav a,.nav-dd__t{font-size:.87rem;letter-spacing:.07em}
  .site-header .header-cta .btn--light{padding:.75em 1.15em;font-size:.79rem}
}
/* below this the nav becomes the slide-out menu, so the logo can breathe again */
@media (max-width:820px){.brand-logo{height:53px}}

.header-cta{display:flex;align-items:center;gap:.95rem}
.header-cta .phone{color:var(--ink);font-size:.86rem;letter-spacing:.06em;white-space:nowrap}
.lang-switch{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-sans);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.lang-switch a{color:var(--ink-soft);text-decoration:none;padding:.1rem .05rem;transition:color .2s var(--ease)}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.active{color:var(--ink);border-bottom:1.5px solid var(--brass)}
.lang-switch span{color:var(--line)}
.site-header .header-cta .btn--light{background:var(--sea-dk);border-color:var(--sea-dk);color:#fff;font-size:.81rem;padding:.85em 1.5em;margin-right:.35rem}
.site-header .header-cta .btn--light:hover{background:var(--brass);border-color:var(--brass);color:#fff}

/* keep the header from overflowing (and clipping the language flag) on laptops */


/* scrolled state — header stays white */
.site-header.solid{background:#fff;box-shadow:0 2px 14px rgba(20,24,22,.10)}
.site-header.hide{transform:translateY(-100%)}

.menu-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.menu-toggle span{width:26px;height:2px;background:var(--ink);transition:.3s}

/* ---------- Availability bar ---------- */
.avail{position:sticky;top:0;z-index:55;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:0 8px 26px -20px rgba(20,24,22,.55);backdrop-filter:saturate(1.1) blur(6px);-webkit-backdrop-filter:saturate(1.1) blur(6px)}
.avail form{max-width:var(--maxw);margin:0 auto;padding:1.35rem clamp(20px,5vw,56px);display:flex;align-items:flex-end;gap:clamp(1.4rem,3.2vw,2.8rem);flex-wrap:wrap}
.avail .field{display:flex;flex-direction:column;gap:.5rem;position:relative}
.avail label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.avail input,.avail select{font-family:var(--f-sans);font-size:1.12rem;color:var(--ink);border:none;border-bottom:1px solid var(--line);background:transparent;padding:.6rem .1rem;min-width:210px;border-radius:0;cursor:pointer}
.avail input:focus,.avail select:focus{outline:none;border-bottom-color:var(--brass)}
.avail .btn{margin-left:auto;font-size:.86rem;padding:1.25em 2.6em}
[dir="rtl"] .avail .btn{margin-left:0;margin-right:auto}
@media (max-width:820px){
  .avail form{gap:1.1rem;padding:1.1rem clamp(16px,5vw,40px)}
  .avail .field{flex:1 1 46%}
  .avail input,.avail select{min-width:0;width:100%;font-size:1.02rem}
  .avail .btn{margin-left:0;width:100%;justify-content:center}
}

/* large custom calendar */
.cal{position:absolute;bottom:calc(100% + .8rem);left:0;z-index:120;background:#fff;border:1px solid var(--line);box-shadow:0 -18px 60px -22px rgba(20,24,22,.5);padding:1.1rem 1.2rem 1.3rem;width:min(92vw,392px);display:none}
/* pages where the bar sits high on the page: open the calendar downward */
.avail--down .cal{bottom:auto;top:calc(100% + .8rem);box-shadow:0 30px 70px -30px rgba(20,24,22,.55)}

/* homepage: booking dock fixed to the bottom of the viewport, with a Hide toggle */
.avail--dock{position:fixed;left:0;right:0;top:var(--hdr,90px);bottom:auto;z-index:58;
  background:rgba(18,58,61,.45);border-bottom:1px solid rgba(255,255,255,.14);border-top:none;
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 16px 44px -26px rgba(12,16,16,.5);
  transition:transform .5s var(--ease),top .4s var(--ease),background .4s var(--ease)}
/* once past the hero there's no photo behind it — go solid so text stays crisp */
.avail--dock.is-solid{background:var(--deep);border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none}
/* dark dock: light type, brass accents */
.avail--dock label{color:rgba(230,243,240,.72)}
.avail--dock input,.avail--dock select{color:#fff;border-bottom-color:rgba(255,255,255,.32)}
.avail--dock input::placeholder{color:rgba(230,243,240,.55)}
.avail--dock input:focus,.avail--dock select:focus{border-bottom-color:var(--brass)}
.avail--dock select option{color:var(--ink);background:#fff}
.avail--dock.is-hidden{transform:translateY(-100%)}
/* when the header tucks away on scroll, the dock rises with it */
.site-header.hide ~ .avail--dock{top:0}
.avail--dock form{justify-content:center;padding:1.15rem clamp(20px,5vw,56px)}
.avail--dock .btn{margin-left:0}

/* --- dock sizing, used on every page: original height, less 15% --- */
.avail--dock form{padding:.92rem clamp(20px,5vw,56px);gap:clamp(1.25rem,2.9vw,2.5rem)}
.avail--dock .field{gap:.4rem}
.avail--dock label{font-size:.69rem;letter-spacing:.21em}
.avail--dock input,.avail--dock select{font-size:1.04rem;padding:.5rem .1rem;min-width:196px}
.avail--dock .btn{font-size:.82rem;padding:1.15em 2.45em}
.avail--dock .avail-toggle{height:30px;font-size:.66rem;padding:0 1.05rem;bottom:-30px}
[dir="rtl"] .avail--dock .btn{margin-right:0}
/* the dock sits at the top, so the calendar opens downward */
.avail--dock .cal{top:calc(100% + .8rem);bottom:auto;box-shadow:0 30px 70px -30px rgba(20,24,22,.55)}
/* toggle tab — hangs below the dock so it stays visible when hidden */
.avail-toggle{position:absolute;bottom:-34px;right:clamp(20px,5vw,56px);height:34px;
  display:inline-flex;align-items:center;gap:.5rem;padding:0 1.15rem;cursor:pointer;
  background:rgba(18,58,61,.72);border:none;
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  font-family:var(--f-sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(230,243,240,.92);box-shadow:0 12px 26px -18px rgba(12,16,16,.5);
  transition:background .4s var(--ease),color .3s var(--ease)}
.avail-toggle:hover{color:#fff;background:rgba(31,66,71,.9)}
.avail--dock.is-solid .avail-toggle{background:var(--deep);backdrop-filter:none;-webkit-backdrop-filter:none}
.avail-toggle::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-135deg) translate(-1px,-1px);transition:transform .35s var(--ease)}
.avail--dock.is-hidden .avail-toggle::after{transform:rotate(45deg) translate(-1px,-1px)}
[dir="rtl"] .avail-toggle{right:auto;left:clamp(20px,5vw,56px)}
@media (max-width:820px){.avail--dock form{padding:.82rem 16px;gap:1.05rem}}
.cal.open{display:block}
[dir="rtl"] .cal{left:auto;right:0}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.cal__title{font-family:var(--f-serif);font-size:1.4rem;color:var(--ink)}
.cal__nav{width:38px;height:38px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.cal__nav:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.cal__nav[disabled]{opacity:.3;cursor:default}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__dow{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:center;padding:.4rem 0}
.cal__day{aspect-ratio:1;border:none;background:transparent;font-family:var(--f-sans);font-size:1.02rem;color:var(--ink);cursor:pointer;border-radius:2px;transition:.15s}
.cal__day:hover:not(:disabled){background:var(--bone-2)}
.cal__day:disabled{color:#c9d6d5;cursor:default}
.cal__day.is-sel{background:var(--brass);color:#fff}
.cal__day.is-range{background:var(--bone-2)}
.cal__day.is-empty{cursor:default}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:calc(100svh - var(--anc,38px));display:flex;align-items:flex-end;color:#fff;overflow:hidden}

.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s var(--ease)}
.hero__media img:first-child,.hero__media img.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.hero__media img{transition:none}}
.hero-dots{position:absolute;right:clamp(20px,5vw,56px);bottom:2.2rem;z-index:3;display:flex;gap:.7rem}
.hero-dot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.18);cursor:pointer;padding:0;transition:background .35s var(--ease),transform .35s var(--ease)}
.hero-dot:hover{background:rgba(255,255,255,.55)}
.hero-dot.is-active{background:#fff;transform:scale(1.2)}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(15,20,20,.45) 0%,rgba(15,20,20,.05) 35%,rgba(12,16,16,.72) 100%)}
.hero__inner{padding-bottom:clamp(.6rem,2.5vh,2rem);max-width:var(--maxw);margin:0 auto;width:100%}
.hero h1{font-size:clamp(2.4rem,6.6vw,5.3rem);letter-spacing:.01em;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero .sub{font-size:clamp(.98rem,1.75vw,1.2rem);max-width:44ch;margin:1.2rem 0 1.9rem;color:#f1ece3}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap}
/* TripAdvisor Travelers' Choice badge — sits on the light availability bar, no card needed */
.avail-badge{align-self:center;line-height:0;flex:0 0 auto;margin-right:.4rem;
  opacity:.95;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.avail-badge:hover{opacity:1;transform:translateY(-2px)}
.avail-badge img{width:clamp(46px,4.4vw,60px);height:auto;display:block}
[dir="rtl"] .avail-badge{margin-right:0;margin-left:.4rem}
@media (max-width:1100px){.avail-badge{display:none}}

.scroll-hint{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:2;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#fff;opacity:.75;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scroll-hint::after{content:"";width:1px;height:38px;background:linear-gradient(#fff,transparent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* page hero (interior) */
.page-hero{position:relative;min-height:62vh;display:flex;align-items:center;color:#fff;text-align:center}
.page-hero__media{position:absolute;inset:0;z-index:-2}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,16,16,.5),rgba(12,16,16,.55))}
.page-hero .wrap{width:100%}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.8rem);margin-top:.4rem}
.page-hero p{color:#efe7da;max-width:52ch;margin:1.2rem auto 0}

/* ---------- Section scaffolding ---------- */
.section{padding:clamp(4.5rem,10vw,8rem) 0}
.section--tint{background:var(--bone-2)}
.section--ink{background:var(--deep);color:#e6f3f0}
.section--ink h2,.section--ink h3{color:#fff}
/* .lead and .eyebrow carry their own dark-on-light colours, which go muddy on
   a deep background — restate them for dark sections */
.section--ink .lead{color:rgba(230,243,240,.88)}
.section--ink .eyebrow{color:#e8d9c2}
.section-head{max-width:64ch}
.section-head.center{margin:0 auto;text-align:center}
.section-head h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-bottom:1rem}
.divider{width:54px;height:2px;background:var(--brass);margin:1.4rem 0}
.center .divider{margin-left:auto;margin-right:auto}

/* ---------- Split feature rows ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.feature+.feature{margin-top:clamp(3.5rem,8vw,7rem)}
.feature--rev .feature__media{order:2}
.feature__media{position:relative;overflow:hidden}
.feature__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);aspect-ratio:4/3}
.feature__media:hover img{transform:scale(1.05)}
.feature__media .tag{position:absolute;left:0;bottom:0;background:var(--brass);color:#fff;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;padding:.7em 1.4em;z-index:2}

/* ---------- In-place photo browsing on a feature image (rooms) ---------- */
/* the slow zoom fights with the arrows, so it steps aside once nav is added */
.feature__media.has-nav:hover img{transform:none}
.media-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;padding:0;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);
  box-shadow:0 10px 26px -14px rgba(20,24,22,.5);
  opacity:0;transition:opacity .3s var(--ease),background .25s var(--ease);
}
.media-nav::before{content:"";width:9px;height:9px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.media-nav--prev{left:14px}
.media-nav--prev::before{transform:rotate(45deg) translateX(2px)}
.media-nav--next{right:14px}
.media-nav--next::before{transform:rotate(-135deg) translateX(2px)}
.media-nav:hover{background:#fff}
.feature__media:hover .media-nav,.media-nav:focus-visible{opacity:1}
.media-nav:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.media-count{
  position:absolute;right:14px;bottom:14px;z-index:3;pointer-events:none;
  font-family:var(--f-sans);font-size:.68rem;letter-spacing:.16em;color:#fff;
  background:rgba(18,58,61,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.42rem .75rem;
  opacity:0;transition:opacity .3s var(--ease);
}
.feature__media:hover .media-count{opacity:1}
/* touch devices have no hover, so the controls simply stay visible */
@media (hover:none){
  .media-nav,.media-count{opacity:1}
  .media-nav{width:42px;height:42px}
}
[dir="rtl"] .media-count{right:auto;left:14px}
[dir="rtl"] .feature__media .tag{left:auto;right:0}
/* enlarged feature images (homepage rows) */
.feature--big{grid-template-columns:1.35fr 1fr}
.feature--big.feature--rev{grid-template-columns:1fr 1.35fr}
.feature--big .feature__media img{aspect-ratio:5/4}
@media(max-width:820px){
  .feature--big,.feature--big.feature--rev{grid-template-columns:1fr}
  .feature--big .feature__media img{aspect-ratio:16/10}
}
.feature__body h3{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:1rem}

/* ---------- Stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stat .num{font-family:var(--f-serif);font-size:clamp(2.4rem,5vw,3.4rem);color:var(--brass);line-height:1}
.stat .lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem}
.section--ink .stat .lbl{color:#a7c8c2}

/* ---------- Cards grid ---------- */
.grid{display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);overflow:hidden;box-shadow:0 20px 40px -30px rgba(20,24,22,.5);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card__media{overflow:hidden;aspect-ratio:3/2}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card__media img{transform:scale(1.07)}
.card__body{padding:1.7rem 1.6rem 1.9rem;display:flex;flex-direction:column;flex:1}
.card__body h3{font-size:1.5rem;margin-bottom:.5rem}
.card__meta{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:.8rem}
.card__body p{font-size:.95rem;color:var(--ink-soft)}
.card__foot{margin-top:auto;padding-top:1.1rem;display:flex;align-items:center;justify-content:space-between}
.price{font-family:var(--f-serif);font-size:1.5rem;color:var(--ink)}
.price small{font-family:var(--f-sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block}

/* team placeholder photo (swap with a real <img> later) */
.team-ph{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;background:var(--bone-2);color:var(--sea);font-family:var(--f-serif);font-size:2.6rem;letter-spacing:.06em}

/* team portraits */
.card--team .card__media{aspect-ratio:4/5}
.card--team .card__media img{object-position:center top}
.card--team .card__body{padding:1.4rem 1.5rem 1.7rem}
.card--team .card__body h3{font-size:1.35rem;margin-bottom:.35rem}
.card--team .card__body p{font-size:.9rem}

/* room highlight lists */
.amen{list-style:none;padding:0;margin:0;columns:2;column-gap:2.4rem;font-size:.92rem}
.amen li{padding:.35rem 0 .35rem 1.4rem;position:relative;break-inside:avoid;color:var(--ink-soft)}
.amen li::before{content:"";position:absolute;left:0;top:.85em;width:7px;height:7px;background:var(--brass);transform:rotate(45deg)}

/* room location map — clickable markers jump to each room */
.room-map{position:relative;display:block;margin:2.6rem auto 0;max-width:1080px;
  box-shadow:var(--shadow);background:var(--bone-2)}
.room-map img{width:100%;height:auto;display:block}
.room-pins{position:absolute;inset:0}
.room-pin{position:absolute;display:block;border-radius:6px;cursor:pointer;
  box-shadow:0 0 0 0 rgba(169,130,76,0);transition:box-shadow .25s var(--ease),background .25s var(--ease)}
.room-pin:hover,.room-pin:focus-visible{background:rgba(169,130,76,.16);
  box-shadow:0 0 0 2px var(--brass),0 10px 26px -12px rgba(20,24,22,.5);outline:none}
.room-pin span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.room-map-hint{text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:1.1rem;margin-bottom:0;opacity:.85}
/* tighten the gap between the map and the first room */
#room-map{padding-bottom:clamp(2rem,4vw,3rem)}
#room-map + .section{padding-top:clamp(2rem,4vw,3rem)}
/* keep the sticky availability bar from covering a room when jumped to */
#spa-suites,#ocean-suites,#ocean-rooms,#owners-suite,#garden-room{scroll-margin-top:150px}

/* room photo strip (click to enlarge) */
.room-gallery{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:1.3rem 0 clamp(4.5rem,7vw,7rem)}
/* last room shouldn't add extra space before the next section */
.room-gallery:last-child{margin-bottom:0}
/* subtle brass rule centred in the gap, separating one room from the next */
.room-gallery:not(:last-child)::after{content:"";position:absolute;left:50%;
  bottom:calc(clamp(4.5rem,7vw,7rem) / -2);
  width:min(320px,42%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--brass) 22%,var(--brass) 78%,transparent);
  opacity:.5}
.room-gallery a{overflow:hidden;aspect-ratio:4/3;cursor:zoom-in;position:relative}
.room-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.room-gallery a:hover img{transform:scale(1.08)}
@media (max-width:760px){.room-gallery{grid-template-columns:repeat(3,1fr)}}

/* ---------- Gallery / mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px}
.mosaic a{overflow:hidden;position:relative}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.mosaic a:hover img{transform:scale(1.08)}
.mosaic .tall{grid-row:span 2}
.mosaic .wide{grid-column:span 2}

/* ---------- Quote / testimonial ---------- */
.quote{text-align:center;max-width:60ch;margin:0 auto}
.quote blockquote{font-family:var(--f-serif);font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.28;margin:0 0 1.4rem}
.quote cite{font-style:normal;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.stars{color:var(--brass);letter-spacing:.25em;margin-bottom:1.2rem}

/* ---------- Menu list (spa/dining) ---------- */
.menu-list{display:grid;gap:1.5rem}
.menu-item{border-top:1px solid var(--line);padding-top:1.4rem}
.menu-item__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.menu-item__head h4{font-size:1.4rem}
.menu-item__price{font-family:var(--f-serif);font-size:1.3rem;color:var(--brass);white-space:nowrap}
.menu-item .dur{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:.2rem 0 .5rem}
.menu-item p{font-size:.95rem;color:var(--ink-soft);margin:0}

/* ---------- Featured-in / logos ---------- */
.press{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(2rem,5vw,4rem)}
.press span{font-family:var(--f-serif);font-size:1.5rem;color:var(--ink-soft);opacity:.55;letter-spacing:.02em}

/* ---------- CTA band ---------- */
.cta-band{position:relative;color:#fff;text-align:center;overflow:hidden}
.cta-band__media{position:absolute;inset:0;z-index:-2}
.cta-band__media img{width:100%;height:100%;object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,20,20,.6)}
.cta-band .wrap{padding-top:clamp(4rem,9vw,7rem);padding-bottom:clamp(4rem,9vw,7rem)}
.cta-band h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1rem}
.cta-band p{color:#eee5d8;max-width:50ch;margin:0 auto 2rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--deep);color:#a7c8c2;padding:clamp(3.5rem,7vw,5.5rem) 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.4rem}
.site-footer h4{color:#fff;font-family:var(--f-sans);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:500}
.site-footer .brand{color:#fff;font-size:1.7rem}
.site-footer a{color:#a7c8c2;font-size:.92rem;transition:color .3s}
.site-footer a:hover{color:var(--brass)}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.footer-contact p{font-size:.92rem;color:#a7c8c2;margin:0 0 .6rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.6rem;padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.78rem;color:#7ea8a1}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Lightbox ---------- */
/* ---------- Floating WhatsApp button ---------- */
/* z-index 65: above the header (60), below the mobile menu (70) and lightbox (200) */
.wa-float{
  position:fixed;bottom:calc(clamp(16px,2.2vw,26px) + var(--cc-h,0px));z-index:65;
  /* Always open, so the pill is a fixed ~170px wide. Centring that on the 78px
     dot strip would push its right edge to within 10px of the screen and off
     the edge entirely below ~1000px, so it aligns by its RIGHT EDGE to the same
     gutter as the dots and the Tripadvisor badge instead. Safe at every width
     and in every language, where the label length differs. */
  right:clamp(20px,3.4vw,38px);
  display:inline-flex;align-items:center;gap:.6rem;
  height:52px;padding:0 20px;border-radius:26px;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(12,40,26,.55),0 2px 8px rgba(12,40,26,.18);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s var(--ease);
}
.wa-float svg{width:26px;height:26px;flex:none;fill:currentColor;display:block}
.wa-float span{
  font-family:var(--f-sans);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.wa-float:hover,.wa-float:focus-visible{background:#1fb457;transform:translateY(-2px);
  box-shadow:0 20px 44px -14px rgba(12,40,26,.6),0 2px 8px rgba(12,40,26,.2)}
.wa-float:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Phones: same pill, slightly tighter. At 390px it measures ~150px, leaving
   plenty of room, and the 52px height keeps it well above the 44px tap target. */
@media (max-width:620px){
  .wa-float{height:50px;padding:0 16px;gap:.5rem;border-radius:25px;
    right:max(clamp(14px,4vw,20px),env(safe-area-inset-right))}
  .wa-float svg{width:24px;height:24px}
  .wa-float span{font-size:.7rem;letter-spacing:.1em}
}

/* homepage: sits clear of the hero slideshow dots in the same corner */
.wa-float--hero{bottom:calc(clamp(16px,2.2vw,26px) + 48px + var(--cc-h,0px))}
/* mirror to the other corner in right-to-left layouts */
[dir="rtl"] .wa-float{right:auto;left:clamp(20px,3.4vw,38px)}
@media (max-width:620px){
  [dir="rtl"] .wa-float{right:auto;left:max(clamp(14px,4vw,20px),env(safe-area-inset-left))}
}
@media (prefers-reduced-motion:reduce){
  .wa-float{transition:background .25s}
  .wa-float:hover{transform:none}
}

.lb{position:fixed;inset:0;background:rgba(12,14,13,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:4vw}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb__close{position:absolute;top:20px;right:28px;color:#fff;font-size:2rem;cursor:pointer;line-height:1;background:none;border:none;z-index:2}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s;z-index:2;-webkit-tap-highlight-color:transparent}
.lb__nav:hover{background:var(--brass);border-color:var(--brass)}
.lb__prev{left:clamp(10px,3vw,40px)}
.lb__next{right:clamp(10px,3vw,40px)}
.lb__count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;font-size:.8rem;letter-spacing:.18em;opacity:.85}
[dir="rtl"] .lb__prev{left:auto;right:clamp(10px,3vw,40px)}
[dir="rtl"] .lb__next{right:auto;left:clamp(10px,3vw,40px)}
@media (max-width:600px){.lb__nav{width:44px;height:44px;font-size:1.5rem}}

/* ---------- Contact form ---------- */
.form{display:grid;gap:1.1rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:.4rem}
.form input,.form textarea,.form select{
  width:100%;padding:.9rem 1rem;border:1px solid var(--line);background:#fff;font-family:var(--f-sans);font-size:.95rem;color:var(--ink);
}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--brass)}
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem}
.info-list .k{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:.3rem}
.info-list .v{font-size:1.05rem;color:var(--ink)}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .grid-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr;gap:2.4rem}
  .mosaic{grid-auto-rows:180px}
}
@media(max-width:820px){
  .nav,.header-cta .phone{display:none}
  .menu-toggle{display:flex}
  .nav.open{display:flex;position:fixed;inset:0;top:0;background:var(--ink);flex-direction:column;justify-content:center;gap:1.8rem;z-index:70}
  .nav.open a{color:#fff;font-size:1.1rem}
  .feature,.feature--rev .feature__media{grid-template-columns:1fr;order:0}
  .feature__media img{aspect-ratio:16/10}
  .amen{columns:1}
  .form .row{grid-template-columns:1fr}
}
@media(max-width:620px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .mosaic .wide{grid-column:span 2}
  body{font-size:16px}
}
.nav-close{display:none}
@media(max-width:820px){.nav.open .nav-close{display:block;position:absolute;top:22px;right:26px;font-size:2rem;color:#fff;background:none;border:none}}

/* language dropdown */
.lang-dd{position:relative;font-family:var(--f-sans);font-size:.84rem;letter-spacing:.1em}
.lang-dd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;text-transform:uppercase;color:var(--ink)}
.lang-dd>summary::-webkit-details-marker{display:none}
.lang-dd>summary::after{content:"\25BE";font-size:.7em;color:var(--ink-soft);margin-left:.1rem}
.lang-dd .flag{font-size:1.05rem;line-height:1}
.lang-menu{display:none;position:absolute;right:0;top:calc(100% + .55rem);background:#fff;box-shadow:var(--shadow);border:1px solid var(--line);padding:.35rem;min-width:158px;z-index:80}
.lang-dd[open] .lang-menu{display:block}
.lang-menu a{display:flex;align-items:center;gap:.6rem;padding:.55rem .66rem;color:var(--ink);text-decoration:none;text-transform:none;letter-spacing:.02em;font-size:.86rem;white-space:nowrap}
.lang-menu a:hover{background:var(--bone-2)}
.lang-menu a.active{color:var(--brass)}
[dir="rtl"] .lang-menu{right:auto;left:0}
[dir="rtl"] body{text-align:right}

/* Area page: in-page anchor targets clear the fixed header + booking bar */
#frontier,#parks,#cano,#ventanas,#beaches,#villages,#dining-scene,#adventures{scroll-margin-top:180px}

/* =========================================================
   MOBILE & TOUCH
   Everything below targets phones and tablets. Desktop is
   untouched except for the two global lines immediately here.
   ========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.is-locked{overflow:hidden;touch-action:none}

/* ---- notch / home-indicator safe areas ---- */
@supports (padding:max(0px)){
  .wrap,.site-header .bar{
    padding-left:max(clamp(20px,5vw,56px),env(safe-area-inset-left));
    padding-right:max(clamp(20px,5vw,56px),env(safe-area-inset-right));
  }
  .wa-float{bottom:calc(max(clamp(16px,2.2vw,26px),env(safe-area-inset-bottom)) + var(--cc-h,0px))}
  .wa-float--hero{bottom:calc(max(clamp(16px,2.2vw,26px),env(safe-area-inset-bottom)) + 48px + var(--cc-h,0px))}
  .site-footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
}

/* ---- iOS zooms in on any field under 16px and never zooms back ---- */
@media (max-width:900px){
  input,select,textarea,
  .form input,.form textarea,.form select,
  .avail input,.avail select,
  .avail--dock input,.avail--dock select{font-size:16px}
}

/* ---- overlays shouldn't scroll the page behind them ---- */
.lb{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ---- the slide-out menu has to scroll: its content is ~1600px tall ---- */
@media (max-width:820px){
  .nav.open{
    display:block;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:calc(env(safe-area-inset-top,0px) + 84px) 22px calc(env(safe-area-inset-bottom,0px) + 48px);
    text-align:center;
  }
  .nav.open>a,.nav.open .nav-dd{display:block;width:100%}
  .nav.open a{font-size:1.06rem;padding:.8rem 0;min-height:44px;display:block}
  .nav.open .nav-dd__t{padding:.8rem 0;min-height:44px}
  .nav.open .nav-dd__m a{min-height:44px;display:flex;align-items:center;justify-content:center}
  .nav.open .nav-dd__grp a{min-height:44px;display:flex;align-items:center;justify-content:center}
  .nav.open .nav-dd{margin-bottom:.4rem;padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,.10)}
  /* close button stays put while the menu scrolls */
  .nav.open .nav-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 18px);right:20px;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;z-index:2}
}

/* ---- touch targets: 44px minimum ---- */
@media (hover:none){
  .menu-toggle{padding:10px;min-width:44px;min-height:44px;justify-content:center}
  .hero-dots{gap:.35rem}
  .hero-dot{position:relative}
  .hero-dot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:44px;height:44px}                 /* invisible, generous hit area */
  .cal__day{min-height:44px}
  .lang-dd>summary{min-height:44px;display:inline-flex;align-items:center}
  .lang-menu a{min-height:44px}
  .btn{min-height:44px}
  .avail-toggle{min-height:38px}
}

/* ---- the booking bar: a fixed two-row form eats a phone screen ---- */
@media (max-width:820px){
  .avail--dock form{flex-wrap:wrap;gap:.7rem;padding:.7rem 16px}
  .avail--dock .field{flex:1 1 calc(50% - .4rem);min-width:0}
  .avail--dock .btn{flex:1 1 100%;width:100%;justify-content:center;margin:0}
  .avail--dock label{font-size:.58rem;letter-spacing:.14em}
  .cal{width:min(94vw,392px);left:50%;transform:translateX(-50%)}
  .avail--dock .cal{left:50%;right:auto}
}

/* ---- spacing and rhythm on small screens ---- */
@media (max-width:600px){
  .section{padding:clamp(2.6rem,9vw,4rem) 0}
  .lead{font-size:1.06rem}
  .room-gallery{grid-template-columns:repeat(2,1fr);gap:8px}
  .rate{padding:1rem .2rem}
  .stats{gap:1.4rem}
}

/* ---------- Legal / policy pages ---------- */
.legal{max-width:80ch;margin:0 auto}
.legal .meta{font-family:var(--f-sans);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin:0 0 2.2rem}
.legal h2{font-size:clamp(1.45rem,2.5vw,1.95rem);margin:2.8rem 0 .9rem}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-family:var(--f-sans);font-size:1.02rem;font-weight:500;letter-spacing:.02em;color:var(--ink);margin:1.7rem 0 .5rem}
.legal p,.legal li{color:var(--ink-soft)}
.legal ul{padding-left:1.15rem;margin:0 0 1.15rem}
.legal li{margin:.42rem 0}
.legal a{color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--brass)}
.legal .callout{background:var(--bone-2);border-left:3px solid var(--brass);padding:1.2rem 1.5rem;margin:1.7rem 0}
.legal .callout p:last-child{margin-bottom:0}
.legal .toc{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding:1.2rem 0 1.6rem;border-bottom:1px solid var(--line);margin-bottom:2.4rem}
.legal .toc a{font-family:var(--f-sans);font-size:.84rem;text-decoration:none;color:var(--ink-soft)}
.legal .toc a:hover{color:var(--brass)}

/* key terms at a glance */
.terms{border:1px solid var(--line);background:#fff;margin:1.8rem 0}
.terms>div{display:grid;grid-template-columns:210px 1fr;gap:1.4rem;padding:1.1rem 1.5rem;border-bottom:1px solid var(--line)}
.terms>div:last-child{border-bottom:none}
.terms dt,.terms .k{font-family:var(--f-sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);padding-top:.2rem}
.terms .v{margin:0;color:var(--ink)}
@media(max-width:640px){.terms>div{grid-template-columns:1fr;gap:.35rem}}

/* short cancellation note beside the booking buttons */
.fineprint{font-family:var(--f-sans);font-size:.82rem;color:var(--ink-soft);margin:.9rem 0 0;line-height:1.6}
.fineprint a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.footer-legal a{text-decoration:underline;text-underline-offset:3px}
.footer-legal a:hover{color:var(--brass)}
@media(max-width:720px){.footer-bottom{flex-direction:column;gap:.5rem;text-align:center}}

/* policy links: no gold fill on hover, just a gentle enlarge */
.btn--quiet{
  border:none;background:none;padding:.3em 0;color:var(--sea);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
  transform-origin:left center;
  transition:transform .28s var(--ease),color .28s var(--ease);
}
.btn--quiet::after{display:none}
.btn--quiet:hover,.btn--quiet:focus-visible{
  background:none;color:var(--sea);transform:scale(1.06);
}
@media (prefers-reduced-motion:reduce){.btn--quiet:hover{transform:none;color:var(--brass)}}

/* ---------- Click-to-load video (no YouTube code until you press play) ---------- */
.ytlite{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--deep);box-shadow:var(--shadow);cursor:pointer;border:none;padding:0}
.ytlite img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s var(--ease)}
.ytlite::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,16,.15),rgba(12,16,16,.45))}
.ytlite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytlite__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(66px,7vw,92px);height:clamp(66px,7vw,92px);border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:rgba(18,58,61,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease)}
.ytlite__play::before{content:"";width:0;height:0;margin-left:6px;
  border-left:clamp(19px,2vw,26px) solid #fff;
  border-top:clamp(12px,1.3vw,16px) solid transparent;
  border-bottom:clamp(12px,1.3vw,16px) solid transparent}
.ytlite:hover .ytlite__play{background:var(--brass);border-color:var(--brass);transform:translate(-50%,-50%) scale(1.07)}
.ytlite:hover img{transform:scale(1.03)}
.ytlite__play:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ytlite.is-playing::after,.ytlite.is-playing .ytlite__play,.ytlite.is-playing img{display:none}
.video-credit{font-family:var(--f-sans);font-size:.8rem;letter-spacing:.06em;color:var(--ink-soft);
  text-align:center;margin:.95rem 0 0}
.video-credit a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}

/* the film and the section beneath it were separated by two full section
   paddings — close the gap so they read as one sequence */
.section--film{padding-bottom:clamp(1.8rem,3.5vw,3rem)}
.section--film + .section{padding-top:clamp(1.8rem,3.5vw,3rem)}

/* =========================================================
   PHONE HEADER
   The bar has to hold: logo · Book · menu button. At 53px the
   logo alone is ~250px wide, and with the Book button and the
   language switcher the row measured ~546px inside a 390px
   screen — so Book was clipped and the menu button was pushed
   off the edge entirely. The language switcher moves into the
   slide-out menu (see main.js) and everything else shrinks.
   ========================================================= */
@media (max-width:820px){
  .site-header .bar{
    gap:.55rem;
    padding:.7rem max(14px,env(safe-area-inset-right)) .7rem max(14px,env(safe-area-inset-left));
    flex-wrap:nowrap;
  }
  .brand{flex:0 1 auto;min-width:0;overflow:hidden}
  .brand-logo{height:36px}
  /* logical, not physical — the Hebrew pages run RTL */
  .header-cta{gap:.5rem;flex:0 0 auto;margin-inline-start:auto}
  .header-cta .phone{display:none}
  .site-header .header-cta .btn--light{
    font-size:.66rem;letter-spacing:.1em;padding:.8em 1em;margin-right:0;min-height:38px;
  }
  /* the menu button must never be the thing that gets squeezed out */
  .menu-toggle{display:flex;flex:0 0 auto;order:3;margin-left:.1rem}
  /* the switcher is relocated into the menu on phones */
  .site-header .bar > .header-cta > .lang-dd{display:none}
}

/* very small Android and older iPhone widths */
@media (max-width:400px){
  .brand-logo{height:31px}
  .site-header .header-cta .btn--light{font-size:.62rem;padding:.75em .8em;letter-spacing:.06em}
  .site-header .bar{
    gap:.45rem;
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }
}

/* Language switcher once it lives inside the slide-out menu.
   A nested dropdown inside a menu means two taps and a lot of vertical space,
   so on phones it flattens to a single always-visible row of flags: one tap,
   ~70px of height. 7 flags at 44px = 308px, inside a 328px content box. */
@media (max-width:820px){
  .nav .lang-dd{
    display:block;width:100%;margin:1.5rem 0 0;padding-top:1.3rem;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .nav .lang-dd > summary{display:none}
  .nav .lang-dd .lang-menu,
  .nav .lang-dd[open] .lang-menu{
    display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem;
    position:static;transform:none;background:none;border:none;box-shadow:none;
    padding:0;min-width:0;
  }
  .nav.open .lang-menu a{
    display:flex;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;margin:0;
    align-items:center;justify-content:center;gap:0;font-size:0;
    background:none;border-radius:50%;
  }
  .nav.open .lang-menu a .flag{font-size:1.45rem;line-height:1}
  .nav.open .lang-menu a.active{background:rgba(255,255,255,.14)}
  .nav.open .lang-menu a::after{display:none}
}

/* ---- phone fixes that need to out-specify earlier desktop rules ---- */
@media (max-width:820px){
  /* .nav-dd--wide .nav-dd__m.is-2col (0,3,0) was beating the mobile
     min-width:0 rule (0,2,0), so the Events panel kept a 560px floor and
     pushed the open menu sideways on every phone. */
  .nav .nav-dd--wide .nav-dd__m.is-2col{min-width:0;grid-template-columns:1fr}

  /* anchor offsets were sized for the tall desktop header */
  #spa-suites,#ocean-suites,#ocean-rooms,#owners-suite,#garden-room,
  #frontier,#parks,#cano,#ventanas,#beaches,#villages,#dining-scene,#adventures{
    scroll-margin-top:96px;
  }
}

/* ---- phones: Activities and The Area are plain links, not dropdowns ----
   Both are .nav-dd--wide with a real <a> trigger pointing at their own page,
   so hiding the panel turns them into ordinary menu rows that go straight
   through. Events keeps its panel — Weddings and Retreats have no parent page.
   Specificity (0,4,0) to clear the earlier mobile .nav-dd__m rules (0,2,0). */
@media (max-width:820px){
  .nav.open .nav-dd--wide .nav-dd__m{display:none}
  /* without a panel underneath, these should sit flush like the other links */
  .nav.open .nav-dd--wide{margin-bottom:0;padding-bottom:0;border-bottom:none}
  .nav.open .nav-dd--wide .nav-dd__t{padding:.8rem 0;min-height:44px;font-size:1.06rem}
}

/* ---- phones: the hero scroll cue collided with the Explore Rooms button ----
   .scroll-hint is centred at the bottom of the hero. On a wide screen the CTA
   sits far to the left and they never meet; on a phone the button is nearly
   full width and the word "Scroll" landed on top of it. A scroll cue earns its
   place on desktop but tells a phone user nothing they don't already know. */
@media (max-width:820px){
  .scroll-hint{display:none}
}

/* ---------- Tripadvisor Travelers' Choice badge (hero, bottom right) ----------
   Sits inside the hero and scrolls away with it. Its bottom offset is derived
   from the WhatsApp button's own expression (+48px hero lift) plus that
   button's height and a gap, so the two stay stacked rather than guessing at
   fixed numbers. Well clear of the hero dots at 2.2rem. */
.hero-badge{
  position:absolute;z-index:4;
  /* Centred on the slide dots below it. The dots share the same right offset
     and are 78px wide (4 x 11px + 3 x .7rem gaps), so their centre sits at
     offset + 39px; subtracting half the badge width lines the two centres up
     at every viewport size. */
  /* Centred on the slide dots below it. The dots share the same right offset
     and are 78px wide (4 x 11px + 3 x .7rem gaps), so their centre sits at
     offset + 39px; subtracting half the badge width lines the two centres up
     at every viewport size. */
  right:calc(clamp(20px,5vw,56px) + 39px - clamp(94px,8.4vw,122px)/2);
  bottom:calc(max(clamp(16px,2.2vw,26px),env(safe-area-inset-bottom,0px)) + 48px + 72px);
  width:clamp(94px,8.4vw,122px);
  opacity:.93;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)) drop-shadow(0 6px 22px rgba(0,0,0,.35));
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.hero-badge img{width:100%;height:auto;display:block}
.hero-badge::after{display:none}          /* kill the generic link underline sweep */
.hero-badge:hover,.hero-badge:focus-visible{opacity:1;transform:translateY(-3px)}
.hero-badge:focus-visible{outline:2px solid #fff;outline-offset:6px}
/* Phones: the hero's bottom-right corner is already spoken for — slide dots at
   35–46px, the floating WhatsApp button over 64–118px, and the hero copy above
   that. Measured across widths, the badge collides with the paragraph and
   headline at 540px and below and is clear from 570px up, so it shows from
   621px only. Phones in landscape (844px+) still get it. */
@media (max-width:620px){
  .hero-badge{display:none}
}
/* touch devices tighten the dot gap to .35rem, so the strip is 62px not 78px */
@media (hover:none){
  .hero-badge{right:calc(clamp(20px,5vw,56px) + 31px - clamp(94px,8.4vw,122px)/2)}
}
@media (prefers-reduced-motion:reduce){
  .hero-badge{transition:opacity .3s}
  .hero-badge:hover{transform:none}
}
/* WhatsApp flips to the left in Hebrew; the badge stacks above it, so it flips too */
[dir="rtl"] .hero-badge{right:auto;left:calc(clamp(20px,5vw,56px) + 39px - clamp(94px,8.4vw,122px)/2)}

/* ---- Retreats banner: phone framing ----
   The banner is full-bleed at min-height:62vh, so on a wide screen the 3:2
   photo is cropped top and bottom (fine — both tables stay in shot), but on a
   portrait phone it is cropped to a narrow vertical slice, only ~50% of the
   width. Centred, that slice lands on the empty walkway and slices faces at
   both edges. Biasing right lands it on the far table: three people complete,
   jungle behind them. */
@media (max-width:620px){
  .page-hero__media--focus-right img{object-position:100% center}
}

/* ---------- Cookie consent bar ----------
   Built by main.js only when a choice has not been made yet. It sits above the
   WhatsApp button (which is lifted by --cc-h while the bar is on screen) and
   below the mobile menu, so an open menu is never trapped behind it. */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:68;
  display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2.4rem);
  flex-wrap:wrap;
  padding:1rem clamp(16px,4vw,40px) calc(1rem + env(safe-area-inset-bottom,0px));
  background:rgba(18,58,61,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 -10px 40px -18px rgba(0,0,0,.6);
  color:#e9f2f0;
}
.cc__msg{
  margin:0;font-family:var(--f-sans);font-size:.86rem;line-height:1.55;
  max-width:62ch;color:rgba(233,242,240,.92);
}
.cc__link{color:#e9c88a;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cc__link:hover{color:#fff}
.cc__btns{display:flex;gap:.6rem;flex:none}
.cc__btn{
  font-family:var(--f-sans);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  padding:.85em 1.7em;min-height:44px;border-radius:2px;cursor:pointer;
  border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.cc__btn--ok{background:var(--brass);border-color:var(--brass)}
.cc__btn--ok:hover{background:var(--brass-dk);border-color:var(--brass-dk)}
.cc__btn--no:hover{background:rgba(255,255,255,.14)}
.cc__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cc__reopen{text-decoration:underline;text-underline-offset:3px;cursor:pointer}

@media (max-width:720px){
  .cc{flex-direction:column;align-items:stretch;gap:.85rem;text-align:center;padding-top:.9rem}
  .cc__msg{font-size:.8rem;max-width:none}
  .cc__btns{justify-content:center}
  .cc__btn{flex:1 1 0;padding:.85em 1rem}
}
[dir="rtl"] .cc{direction:rtl}

/* ---------- FAQ list (contact page) ----------
   Plain question/answer pairs. The format matters as much as the styling:
   AI search engines lift Q&A text verbatim, and the FAQPage schema on this
   page mirrors exactly what is rendered here — the two must not drift. */
.faq-list{margin-top:1.6rem}
.faq-item + .faq-item{margin-top:1.7rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.faq-item h3{font-family:var(--f-serif);font-size:1.34rem;line-height:1.25;margin:0 0 .5rem;color:var(--ink)}
.faq-item p{margin:0;color:var(--ink-soft)}
@media (max-width:620px){ .faq-item h3{font-size:1.18rem} }

/* ---- phones: flatten the Events dropdown ----
   Events has no page of its own, so its trigger was a <button> with
   pointer-events:none — it looked like a menu item but did nothing when
   tapped, and it inherited .87rem from the desktop header-fit block while
   every neighbour sat at 1.06rem. Activities and The Area already flatten to
   direct links here; Events now does the same, dropping the label and
   promoting Weddings and Retreats to ordinary rows. */
@media (max-width:820px){
  .nav.open .nav-dd:not(.nav-dd--wide) > .nav-dd__t{display:none}
  .nav.open .nav-dd:not(.nav-dd--wide){margin-bottom:0;padding-bottom:0;border-bottom:none}
  .nav.open .nav-dd:not(.nav-dd--wide) .nav-dd__m{display:block;padding:0}
  .nav.open .nav-dd:not(.nav-dd--wide) .nav-dd__m a{
    display:block;width:100%;padding:.8rem 0;min-height:44px;
    font-size:1.06rem;letter-spacing:.12em;text-transform:uppercase;
    color:#fff;text-align:center;
  }
}