:root{
  --palm:#1d3a33;
  --palm-soft:#2c4f46;
  --sand:#f4efe6;
  --paper:#fbf9f4;
  --ocean:#4d7d74;
  --brass:#b08d57;
  --brass-soft:#c9ad7f;
  --line:rgba(29,58,51,.16);
  --line-light:rgba(251,249,244,.28);
  --shadow:0 24px 60px -28px rgba(29,58,51,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Mulish',sans-serif;font-weight:300;color:var(--palm);
  background:var(--paper);line-height:1.75;font-size:16.5px;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;background:#e6ded0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.serif{font-family:'Marcellus',serif;font-weight:400;line-height:1.15}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);font-weight:600;display:flex;align-items:center;gap:16px}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--brass)}
.section{padding:clamp(72px,10vw,140px) 0}
.btn{display:inline-block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;padding:18px 40px;border:1px solid var(--palm);transition:background .35s,color .35s,border-color .35s}
.btn:hover{background:var(--palm);color:var(--paper)}
.btn.solid{background:var(--palm);color:var(--paper)}
.btn.solid:hover{background:var(--brass);border-color:var(--brass)}
.btn.light{border-color:var(--paper);color:var(--paper)}
.btn.light:hover{background:var(--paper);color:var(--palm)}

/* ---------- nav ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:26px clamp(20px,4vw,52px);transition:background .4s,padding .4s,box-shadow .4s;color:var(--paper)}
header.scrolled{background:var(--paper);color:var(--palm);padding:14px clamp(20px,4vw,52px);box-shadow:0 1px 0 var(--line)}
.brand{display:block;line-height:0}
.brand img{height:44px;width:auto;display:none;background:transparent}
header.scrolled .brand img{display:block}
nav{display:flex;gap:clamp(14px,2vw,34px);align-items:center}
nav a{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:.9;transition:opacity .3s}
nav a:hover{opacity:1;color:var(--brass)}
nav .book{border:1px solid currentColor;padding:10px 22px}
nav .book:hover{background:var(--brass);border-color:var(--brass);color:#fff;opacity:1}
.menu-toggle{display:none;background:none;border:none;color:inherit;font:inherit;cursor:pointer;font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:600}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:var(--paper);isolation:isolate;text-align:center}
.hero-img{position:absolute;inset:0;z-index:-2}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 74%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,40,35,.5) 0%,rgba(20,40,35,.36) 48%,rgba(18,38,33,.58) 100%)}
.hero-inner{width:100%;display:flex;flex-direction:column;align-items:center;padding-top:clamp(96px,12vh,140px);padding-bottom:clamp(48px,7vw,80px)}
.hero-logo{width:clamp(240px,32vw,420px);height:auto;margin-bottom:clamp(28px,4vh,48px);filter:drop-shadow(0 4px 24px rgba(18,38,33,.35));background:transparent}
.hero h1{font-size:clamp(38px,5.6vw,78px);letter-spacing:.02em;max-width:18ch;margin:0 auto}
.hero p{max-width:520px;margin:24px auto 0;font-size:17px;opacity:.94}
.hero-cta{display:flex;gap:18px;margin-top:38px;flex-wrap:wrap;justify-content:center}

/* ---------- video ---------- */
.film{background:var(--palm);color:var(--sand);padding:clamp(64px,8vw,110px) 0}
.film .eyebrow{color:var(--brass-soft);justify-content:center}
.film .eyebrow::before{background:var(--brass-soft)}
.film .eyebrow::after{content:"";width:36px;height:1px;background:var(--brass-soft)}
.film h2{font-size:clamp(26px,3.2vw,40px);color:var(--paper);text-align:center;margin:22px auto 12px}
.film-lede{text-align:center;max-width:56ch;margin:0 auto clamp(32px,4vw,52px);opacity:.9}
.film-frame{position:relative;display:block;max-width:960px;margin:0 auto;box-shadow:0 30px 80px -30px rgba(0,0,0,.5);cursor:pointer;aspect-ratio:16/9;overflow:hidden;background:#0e1f1b}
.film-frame img{width:100%;height:100%;object-fit:cover}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-frame.playing::after{display:none}
.film-frame.playing .play{display:none}
.film-frame img{width:100%;height:auto}
.film-frame::after{content:"";position:absolute;inset:0;background:rgba(18,38,33,.28);transition:background .3s}
.film-frame:hover::after{background:rgba(18,38,33,.12)}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;border:1px solid rgba(251,249,244,.9);display:flex;align-items:center;justify-content:center;z-index:2;background:rgba(18,38,33,.35);backdrop-filter:blur(4px);transition:transform .3s,background .3s}
.film-frame:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--brass)}
.play::before{content:"";display:block;width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--paper);margin-left:5px}
.film-note{text-align:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-soft);font-weight:600;margin-top:22px}

/* ---------- glance ---------- */
.glance{background:var(--palm);color:var(--sand)}
.glance-grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line-light)}
.glance-item{padding:38px clamp(18px,2.6vw,44px);border-right:1px solid var(--line-light)}
.glance-item .num{font-family:'Marcellus',serif;font-size:clamp(30px,3vw,42px);color:var(--paper)}
.glance-item .num span{font-size:.5em;color:var(--brass-soft);letter-spacing:.1em}
.glance-item .lbl{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-soft);margin-top:6px;font-weight:600}

/* ---------- intro ---------- */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
.intro h2{font-size:clamp(28px,3.4vw,44px);margin:24px 0 26px;max-width:20ch}
.intro p+p{margin-top:18px}
.intro-figure{position:relative}
.intro-figure img{width:100%;height:clamp(420px,54vw,620px);object-fit:cover;box-shadow:var(--shadow)}
.intro-figure figcaption{position:absolute;left:clamp(16px,2vw,24px);bottom:26px;background:var(--paper);padding:14px 26px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ocean);font-weight:600}
.intro .photo-strip{margin-top:clamp(44px,5vw,72px)}

/* ---------- rooms ---------- */
.rows{background:var(--sand)}
.room-block{padding:clamp(48px,6vw,84px) 0}
.room-block+.room-block{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5.5vw,90px);align-items:center}
.row-img .main{width:100%;height:clamp(320px,36vw,440px);object-fit:cover;box-shadow:var(--shadow)}
.room-block:nth-child(odd) .row .row-img{order:2}
.row h3{font-size:clamp(24px,2.6vw,34px);margin:20px 0 18px}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(24px,3vw,40px)}
.photo-strip.two{grid-template-columns:repeat(2,1fr)}
.photo-strip img{width:100%;height:clamp(180px,22vw,280px);object-fit:cover}
.mini-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin-top:clamp(10px,1.4vw,18px)}
.mini-gal img{width:100%;height:clamp(90px,11vw,140px);object-fit:cover}

/* ---------- amenities ---------- */
.amen{background:var(--palm);color:var(--sand)}
.amen .eyebrow{color:var(--brass-soft)}
.amen .eyebrow::before{background:var(--brass-soft)}
.amen h2{font-size:clamp(28px,3.4vw,44px);color:var(--paper);margin:24px 0 14px}
.amen-lede{max-width:640px;opacity:.9}
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(44px,5vw,72px);border-top:1px solid var(--line-light)}
.amen-item{padding:30px clamp(16px,2vw,32px) 30px 0;border-bottom:1px solid var(--line-light);display:flex;gap:18px;align-items:baseline}
.amen-item::before{content:"·";color:var(--brass-soft);font-size:26px;line-height:1}
.amen-item p{font-size:15px;opacity:.92}

/* ---------- dining ---------- */
.dining-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(40px,6vw,96px);align-items:center}
.dining-grid .main{width:100%;height:clamp(380px,44vw,500px);object-fit:cover;box-shadow:var(--shadow)}
.dining h2{font-size:clamp(28px,3.4vw,44px);margin:24px 0 24px}
.dining p+p{margin-top:18px}
blockquote.pull{margin:28px 0 0;padding-left:26px;border-left:2px solid var(--brass);font-family:'Marcellus',serif;font-size:20px;line-height:1.5;color:var(--palm-soft)}
.menus{display:flex;align-items:center;gap:26px;margin-top:34px;padding:22px 26px;border:1px solid var(--line);background:var(--sand);flex-wrap:wrap}
.menus img{width:96px;height:96px;background:transparent}
.menus .t{font-family:'Marcellus',serif;font-size:19px;margin-bottom:4px}
.menus p{font-size:13.5px;opacity:.85}
.menus>div{flex:1}
.menus a{display:inline-block;margin-top:10px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--ocean);border-bottom:1px solid var(--ocean);padding-bottom:2px}

/* ---------- surf ---------- */
.surf{background:var(--palm);color:var(--sand)}
.surf .eyebrow{color:var(--brass-soft)}
.surf .eyebrow::before{background:var(--brass-soft)}
.surf h2{font-size:clamp(28px,3.4vw,44px);color:var(--paper);margin:24px 0 20px}
.surf-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:start}
/* Fixed height forced this 3:2 photo into a near-square box (491x480 at
   1320px), so object-fit:cover cropped ~32% of the width away and the
   beach panorama read as squashed. Pin the frame to the source aspect
   instead and it is never cropped, at any width. */
.surf-grid .main{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
.surf p{opacity:.92}
.surf p+p{margin-top:16px}
.breaks{margin-top:30px;border-top:1px solid var(--line-light)}
.breaks li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;padding:16px 0;border-bottom:1px solid var(--line-light)}
.breaks .d{font-family:'Marcellus',serif;font-size:17px;color:var(--brass-soft);white-space:nowrap;min-width:74px}
.breaks .n{font-weight:500;color:var(--paper);font-size:15.5px}
.breaks .s{grid-column:2;font-size:14px;opacity:.82;line-height:1.6}
.surf-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(44px,5vw,64px)}
.surf-strip img{width:100%;height:clamp(160px,20vw,250px);object-fit:cover}
.surf-facts{display:flex;gap:clamp(20px,4vw,56px);margin-top:26px;flex-wrap:wrap}
.surf-facts div{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--brass-soft)}

/* ---------- location ---------- */
.loc{background:var(--sand)}
.loc-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.loc-head h2{font-size:clamp(28px,3.4vw,44px);margin-top:24px}
.loc-head p{max-width:52ch}
.dist{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--palm)}
.dist-item{padding:26px 20px 26px 0;border-bottom:1px solid var(--line)}
.dist-item .t{font-family:'Marcellus',serif;font-size:clamp(19px,1.9vw,25px)}
.dist-item .d{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ocean);font-weight:600;margin-top:6px}
.loc-img{margin:clamp(44px,5vw,72px) 0}
.loc-img img{width:100%;height:clamp(320px,44vw,540px);object-fit:cover;box-shadow:var(--shadow)}
.loc h3.sub{font-size:clamp(24px,2.6vw,34px);margin-bottom:12px}
.loc-sub-lede{max-width:60ch;margin-bottom:clamp(36px,4vw,56px)}
.attractions{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.attr{background:var(--paper);box-shadow:0 16px 44px -24px rgba(29,58,51,.3)}
.attr img{width:100%;height:200px;object-fit:cover}
.attr .body{padding:24px 26px 30px}
.attr h4{font-size:19px;margin-bottom:4px}
.attr .d{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:12px}
.attr p{font-size:14.5px;line-height:1.7;opacity:.9}

/* ---------- gallery ---------- */
.gallery .eyebrow{margin-bottom:22px}
.gal-filters{display:flex;gap:clamp(10px,2vw,20px);flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px)}
.gal-filters button{background:none;border:1px solid var(--line);color:var(--palm);font-family:'Mulish',sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;padding:12px 24px;cursor:pointer;transition:all .3s}
.gal-filters button:hover{border-color:var(--palm)}
.gal-filters button.on{background:var(--palm);color:var(--paper);border-color:var(--palm)}
.gal-grid{columns:3;column-gap:clamp(14px,2vw,24px)}
.gal-grid img{width:100%;margin-bottom:clamp(14px,2vw,24px);break-inside:avoid;transition:opacity .3s;cursor:pointer}
.gal-grid img:hover{opacity:.88}
/* Stacking order, highest first: consent 2100 > lightbox 2000 > open mobile
   menu 1900 > Cloudbeds portals 1100-1800 > header 100. The Cloudbeds engine
   appends its modals, calendar and sticky rate checker to <body> at those
   z-indexes, so anything of ours the guest deliberately opened has to clear
   1800 or it gets covered. */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(14,25,22,.96);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:82vh;width:auto;height:auto;box-shadow:0 30px 90px rgba(0,0,0,.6);background:transparent}
.lb button{position:absolute;background:none;border:1px solid rgba(251,249,244,.5);color:var(--paper);cursor:pointer;font-family:'Mulish',sans-serif;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.lb button:hover{background:var(--brass);border-color:var(--brass)}
.lb .lb-close{top:18px;right:18px;width:48px;height:48px;font-size:22px;line-height:1}
.lb .lb-prev,.lb .lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:24px}
.lb .lb-prev{left:14px}
.lb .lb-next{right:14px}
.lb .lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;color:rgba(251,249,244,.75);text-transform:uppercase}
.gal-grid img.hide{display:none}

/* ---------- reviews ---------- */
.reviews{background:var(--palm);color:var(--sand);text-align:center}
.reviews .eyebrow{justify-content:center;color:var(--brass-soft)}
.reviews .eyebrow::before{background:var(--brass-soft)}
.reviews .eyebrow::after{content:"";width:36px;height:1px;background:var(--brass-soft)}
.reviews blockquote{font-family:'Marcellus',serif;font-size:clamp(22px,2.8vw,34px);line-height:1.5;max-width:26ch;margin:36px auto 22px;color:var(--paper);min-height:4.5em}
.reviews cite{font-style:normal;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-soft);font-weight:600}
.rev-dots{display:flex;gap:10px;justify-content:center;margin-top:34px}
.rev-dots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--brass-soft);background:transparent;cursor:pointer;padding:0}
.rev-dots button.on{background:var(--brass-soft)}

/* ---------- rates ---------- */
.rates-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(44px,6vw,100px)}
.rates h2{font-size:clamp(28px,3.4vw,44px);margin:24px 0 22px}
.rates-note{margin-top:22px;max-width:52ch}
.rates-note p{font-size:12px;line-height:1.55;color:var(--palm-soft);opacity:.85}
.rates-note p+p{margin-top:10px}
.rates-note a{color:var(--ocean);border-bottom:1px solid var(--ocean)}
.sleeps{margin-top:30px;border-top:1px solid var(--palm)}
.sleeps li{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.sleeps li span:last-child{font-weight:500;text-align:right}
.rate-table{border-top:1px solid var(--palm)}
.rate-row{display:grid;grid-template-columns:1fr auto;gap:clamp(14px,2vw,32px);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.rate-row .season{font-size:15px}
.rate-row .price{font-family:'Marcellus',serif;font-size:22px;white-space:nowrap}
.rate-row .price span{font-size:.55em;letter-spacing:.08em;color:var(--brass)}
.rate-row.peak{background:linear-gradient(90deg,rgba(176,141,87,.10),transparent);padding-left:16px;margin-left:-16px}
.rates-cta{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}

/* ---------- final ---------- */
.final{position:relative;color:var(--paper);text-align:center;isolation:isolate;padding:clamp(110px,14vw,190px) 0}
.final-img{position:absolute;inset:0;z-index:-2}
.final-img img{width:100%;height:100%;object-fit:cover}
.final::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(21,42,36,.6)}
.final h2{font-size:clamp(32px,4.6vw,60px);max-width:18ch;margin:0 auto 18px}
.final p{max-width:46ch;margin:0 auto 40px;opacity:.92}

/* ---------- footer ---------- */
footer{background:var(--palm);color:var(--sand);padding:clamp(56px,7vw,90px) 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(32px,5vw,80px)}
.foot-col h4{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:20px;font-weight:400;font-family:'Mulish',sans-serif}
.foot-col a,.foot-col p{display:block;font-size:14.5px;opacity:.88;margin-bottom:12px}
.foot-col a:hover{color:var(--brass-soft);opacity:1}
.foot-base{margin-top:clamp(44px,5vw,64px);padding-top:26px;border-top:1px solid var(--line-light);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .glance-grid{grid-template-columns:repeat(2,1fr)}
  .glance-item{border-bottom:1px solid var(--line-light)}
  .intro-grid,.dining-grid,.rates-grid,.loc-head,.surf-grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .amen-grid{grid-template-columns:1fr 1fr}
  .dist{grid-template-columns:repeat(2,1fr)}
  .attractions{grid-template-columns:repeat(2,1fr)}
  .gal-grid{columns:2}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .brand img{height:38px}
  .hero-logo{width:min(280px,72vw)}
  .amen-grid{grid-template-columns:1fr}
  .attractions{grid-template-columns:1fr}
  .gal-grid{columns:2}
  .photo-strip{grid-template-columns:1fr 1fr}
  /* Was `.photo-strip img:last-child`, which no longer means what it says:
     each <img> is the last child of its own <picture>, so every image matched
     and spanned the full width. Target the last picture instead. */
  .photo-strip > picture:last-child img{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr}
}
/* ============================================================
   Site additions (not in Dave's concept)
   ============================================================ */

/* <picture> wrappers must not become the grid/flex item — let the inner
   <img> stay the direct child so the concept's layout rules keep working. */
picture{display:contents}

/* ...but display:contents also promotes the <source> elements into the grid,
   where they are blockified into real (empty) grid items. Three pictures then
   produce nine items instead of three, and every image lands in the last
   column. <source> must never generate a box. */
picture > source{display:none}

/* Every <img> now carries width/height attributes so the browser can reserve
   space and avoid layout shift. Without this, those attributes are used as the
   literal rendered height wherever the concept's CSS only sets a width (the
   gallery, most notably) and the image is stretched. Rules that deliberately
   set a height — .photo-strip img, .row-img .main, etc — are more specific and
   still win. */
img{height:auto}

/* The open mobile menu must clear the Cloudbeds portals (see the .lb note) —
   at the concept's z-index of 105 the engine's sticky rate checker covers it. */
nav.open{z-index:1900}

/* ---------- Hero booking engine ---------- */
/* The hero grows past the viewport now that the engine lives in it. */
.hero{min-height:auto;padding-bottom:clamp(40px,6vw,72px)}
/* Taller hero pushes the logo and lede up over bright sky, so the concept's
   scrim needs more weight at the top to keep them legible. */
.hero::after{
  background:linear-gradient(180deg,
    rgba(16,34,29,.62) 0%,
    rgba(18,38,33,.42) 38%,
    rgba(18,38,33,.34) 62%,
    rgba(18,38,33,.55) 100%);
}
.hero-inner{padding-top:clamp(104px,14vh,150px)}
.hero h1{font-size:clamp(32px,4.4vw,60px)}
.hero-inner>p{max-width:56ch}

.hero-book{
  width:min(1120px,100%);
  margin:clamp(30px,4.5vw,52px) auto 0;
  background:var(--paper);
  color:var(--palm);
  text-align:left;
  box-shadow:0 40px 90px -34px rgba(8,20,17,.6);
  border-radius:2px;
}
.hero-book-head{padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,36px) 0}
.hero-book-head .eyebrow{color:var(--brass)}
.hero-book-head h2{
  font-family:'Marcellus',serif;
  font-size:clamp(22px,2.4vw,32px);
  margin:10px 0 0;
  color:var(--palm);
}
.hero-book-engine{padding:clamp(10px,1.6vw,20px) clamp(10px,1.6vw,20px) 0;min-height:120px}
.hero-book-alt{
  margin:0;padding:14px clamp(20px,3vw,36px) clamp(18px,2.4vw,26px);
  font-size:13.5px;opacity:.75;
}
.hero-book-alt a{color:var(--ocean);border-bottom:1px solid var(--ocean)}
.book-fallback-msg{padding:24px;text-align:center}

/* Shown by main.js if the web component never upgrades (e.g. domain not
   whitelisted in Cloudbeds, or the script is blocked). */
.book-fallback{
  display:none;padding:26px clamp(20px,3vw,36px);
  border-top:1px solid var(--line-light);
}
.hero-book.engine-failed .book-fallback{display:block}
.hero-book.engine-failed .hero-book-engine{display:none}

@media (max-width:760px){
  .hero-book{margin-top:26px}
  .hero-book-engine{padding-left:6px;padding-right:6px}
}

/* ---------- Enquiry form ---------- */
.enquire-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(36px,5vw,80px);align-items:start;
}
.enquire h2{font-family:'Marcellus',serif;font-size:clamp(28px,3.4vw,44px);margin:20px 0 16px}
.enquire-direct{margin-top:24px;font-size:14.5px;line-height:2}
.enquire-direct a{color:var(--ocean);border-bottom:1px solid var(--ocean)}

.enquire-form{background:var(--paper);padding:clamp(22px,3vw,38px);box-shadow:var(--shadow)}
.enquire-form label{
  display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--palm-soft);margin:18px 0 7px;
}
.enquire-form label:first-of-type{margin-top:0}
.enquire-form input,.enquire-form textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:15px;color:var(--palm);
  background:#fff;border:1px solid var(--line);border-radius:2px;
}
.enquire-form input:focus,.enquire-form textarea:focus{
  outline:2px solid var(--ocean);outline-offset:1px;border-color:var(--ocean);
}
.enquire-form textarea{resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-row label{margin-top:18px}
.enquire-form button{margin-top:26px;cursor:pointer;font:inherit}
.form-status{margin-top:14px;font-size:14px;min-height:1.2em}
.form-status.ok{color:var(--palm)}
.form-status.err{color:#a4432f}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:860px){
  .enquire-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}

/* ---------- Cookie consent ---------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:2100;
  display:none;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:16px clamp(18px,4vw,40px);
  background:var(--palm);color:var(--sand);
  box-shadow:0 -10px 40px -18px rgba(0,0,0,.55);
}
.consent.show{display:flex}
.consent p{margin:0;font-size:14px;max-width:70ch}
.consent a{color:var(--brass-soft);border-bottom:1px solid var(--brass-soft)}
.consent-actions{display:flex;gap:10px}
.consent button{
  font:inherit;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 20px;cursor:pointer;border:1px solid var(--brass);
  background:transparent;color:var(--sand);border-radius:2px;
}
.consent button.accept{background:var(--brass);color:#20201c;border-color:var(--brass)}

/* ---------- Video ---------- */
.film-video{width:100%;height:100%;object-fit:cover;display:block;background:#0e1f1b}
.film-tour{color:var(--brass-soft);border-bottom:1px solid var(--brass-soft);padding-bottom:2px}
.film-tour:hover{color:var(--paper);border-color:var(--paper)}

/* ---------- Surfing: breaks as a full-width band ---------- */
/* The list used to sit under the photo in the narrow right-hand column, which
   made that column ~500px taller than the copy beside it — a lot of dead space
   and needless scrolling. Full width, it reads as an index of spots and echoes
   the bordered .glance band. */
.breaks{
  margin-top:clamp(44px,5vw,72px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
}
.breaks li{
  display:block;
  padding:28px clamp(14px,1.8vw,26px);
  border-bottom:none;
  border-right:1px solid var(--line-light);
}
.breaks li:nth-child(3n){border-right:none}
.breaks li:nth-child(-n+3){border-bottom:1px solid var(--line-light)}
.breaks .d{display:block;min-width:0;margin-bottom:10px}
.breaks .n{display:block;margin-bottom:9px}
.breaks .s{display:block;grid-column:auto}

@media (max-width:720px){
  .breaks{grid-template-columns:1fr}
  .breaks li,.breaks li:nth-child(-n+3){border-right:none;border-bottom:1px solid var(--line-light);padding:20px 0}
  .breaks li:last-child{border-bottom:none}
}

/* ---------- Logo placements ---------- */
/* The global img rule paints a #e6ded0 placeholder tint behind every image,
   which shows straight through the logo's transparency — a cream slab on the
   dark footer. Logos are transparent PNGs and never want it. */
.brand img,
.hero-logo,
.foot-logo{background:transparent}

/* Nothing in the concept sized the footer logo, so it stretched to fill its
   402px grid column. Sized to sit with the footer text instead. */
.foot-logo{width:clamp(170px,15vw,210px);height:auto}

/* ---------- Nav breakpoint ---------- */
/* The concept only collapsed the nav to a hamburger at 720px, but the links
   need ~990px to sit on one row — so between roughly 720px and 850px the menu
   wrapped and the header doubled in height (iPad portrait, 768px, was the
   obvious casualty). Moved to 960px, a breakpoint the stylesheet already uses
   for the major grids. */
@media (max-width:960px){
  nav{position:fixed;inset:0;height:100vh;height:100svh;background:var(--palm);color:var(--paper);flex-direction:column;justify-content:center;gap:26px;transform:translateY(-100%);transition:transform .45s ease;z-index:105;visibility:hidden}
  nav.open{visibility:visible;transform:none}
  nav a{font-size:14px}
  /* Ranked against the open nav, not the page: both are children of <header>,
     so they compete inside the header's own stacking context. At 110 the nav's
     1900 painted straight over the "Close" label. */
  .menu-toggle{display:block;position:relative;z-index:1910}
}

/* Scroll lock is not just for the mobile menu — the gallery lightbox sets the
   same class at every width, and inside the old 720px block it did nothing on
   desktop, so the page scrolled behind an open lightbox. */
body.menu-open{overflow:hidden}

/* ---------- Booking card tidy-up ---------- */
/* The concept's `.hero p{max-width:520px;margin:24px auto 0}` matches every
   paragraph inside the hero — including the booking card's — which centred and
   narrowed them against the card's left-aligned heading. Reset inside the card. */
.hero-book p{max-width:none;margin-left:0;margin-right:0}
.hero-book .eyebrow{margin-top:0}
.hero-book-head h2{margin-top:12px}

/* Failed state: the message already offers both routes, so the standing
   "prefer a new tab?" line underneath is just the same two links again. */
.hero-book.engine-failed .hero-book-alt{display:none}
.book-fallback{border-top:none;padding:2px clamp(20px,3vw,36px) 22px}
.book-fallback p{margin-top:0;max-width:56ch}
/* The concept's global `a{color:inherit;text-decoration:none}` leaves these
   indistinguishable from body text — and they are the only way through when
   the engine is down. */
.book-fallback a{color:var(--ocean);border-bottom:1px solid var(--ocean);padding-bottom:1px}
.book-fallback a:hover{color:var(--palm);border-color:var(--palm)}

/* ---------- Cloudbeds engine: contain its own chrome ---------- */
/* The engine renders its own header (property name, language, currency) as
   position:fixed at z-index 100 — pinned to the top of the viewport, the same
   layer as our site header, so the two sat on top of each other. Keep it inside
   the booking card where it belongs. `hide-custom-header` does not cover this
   one; that attribute only hides a header defined in the PMS. */
.hero-book cb-immersive-experience header{position:static !important}

/* Belt and braces: nothing the engine renders should escape the card and cover
   the site header. Its modals/popovers still use body-level portals, which are
   unaffected by this. */
.hero-book cb-immersive-experience [style*="position:fixed"],
.hero-book cb-immersive-experience .cb-header{position:static !important}

/* ---------- Overlay booking button ---------- */
/* class-name="btn solid cb-book-btn" is applied by the component to its own
   button, so it picks up Dave's button styling. These rules just make sure the
   host element sits in the CTA row like a normal inline-block. */
cb-book-now-button{display:inline-block;line-height:0}
/* Needs to out-specify both `.btn.solid` and Cloudbeds' own button class, so
   the CTA matches the brass "Check availability" button in Dave's concept and
   sits at the same height as "Discover the villa" beside it. */
.hero-cta button.cb-book-btn{
  cursor:pointer;font-family:inherit;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;font-weight:600;padding:18px 40px;border-radius:0;
  border:1px solid var(--brass);background:var(--brass);color:var(--paper);
  transition:background .35s,border-color .35s,color .35s;
}
.hero-cta button.cb-book-btn:hover{
  background:var(--paper);border-color:var(--paper);color:var(--palm);
}

/* The standing "prefer a new tab?" line now sits under the hero CTAs. */
.hero .hero-book-alt{margin-top:26px;font-size:13.5px;opacity:.9;text-align:center;
  max-width:none;padding:0}
.hero .hero-book-alt a{color:var(--paper);border-bottom:1px solid rgba(251,249,244,.6)}
.hero .hero-book-alt a:hover{border-color:var(--paper)}

/* The overlay panel's `width` attribute only honours px (vh works for height,
   vw does not), so it is set to 1100px and capped here for small screens.
   `cb-immersive-experience-popup-content` is Cloudbeds' own stable class —
   the sibling `styles-module__*` classes are build hashes, do not target them. */
.cb-immersive-experience-popup-content{max-width:min(1100px,94vw) !important}

/* ---------- Film playback ---------- */
/* The concept played a Google Drive iframe and had `.film-frame iframe{position:
   absolute;inset:0}` to make it fill the frame. Swapping in a <video> without the
   equivalent rule left it laid out *after* the poster image — pushed outside the
   frame's fixed 16/9 box, so clicking play appeared to do nothing. */
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3}
.film-frame.playing picture,
.film-frame.playing img{display:none}

/* ---------- Dave's feedback, 26/08/26 ---------- */

/* Occupancy is asterisked in the glance band and in the Stays & Rates list;
   the note itself lives in .rates-note. */
.glance-item .lbl sup,.sleeps sup{font-size:1.1em;line-height:0;top:-.1em}
.glance-note{display:inline-block;margin-top:10px;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:var(--brass-soft);
  border-bottom:1px solid rgba(176,141,87,.5);padding-bottom:2px}
.glance-note:hover{color:var(--paper);border-color:var(--paper)}

/* The rate table lost its "min N nights" column, so the per-night basis has to
   be stated somewhere. */
.rate-foot{margin-top:16px;font-size:12px;color:var(--palm-soft);opacity:.85}

/* ---------- Mobile block order ---------- */
/* Every block reads image -> heading -> text on mobile (Dave, 26/08/26). Two
   places broke that: the Villa intro leads with its copy, and the second
   .room-block is the odd one out because of the desktop alternating rule. */
@media (max-width:960px){
  .intro-grid>.intro-figure{order:-1}
  /* Same specificity as `.room-block:nth-child(odd) .row .row-img{order:2}`
     above, so it wins on source order alone — keep it after that rule. */
  .room-block:nth-child(odd) .row .row-img{order:0}

  /* Separately: because the nav is a child of a z-index:100 header,
     `nav.open{z-index:1900}` never escaped that layer, so the open menu still
     sat under the Cloudbeds portals (1100-1800). Lifting the header itself
     raises the whole subtree clear of them. */
  body.menu-open header{z-index:1901}
}

/* ---------- Legal pages (/terms/) ---------- */
/* The legal pages carry a single header link rather than the site nav —
   `#nav` collapses to a full-screen overlay under 960px, and there is no
   menu toggle on these pages to open it again. */
.legal-nav{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:.9}
.legal-nav:hover{opacity:1;color:var(--brass)}
.legal{max-width:78ch;margin:0 auto;padding:clamp(96px,13vh,150px) clamp(20px,4vw,52px) clamp(64px,8vw,110px)}
.legal h1{font-size:clamp(28px,3.4vw,42px);margin-bottom:10px}
.legal .lede{font-size:15px;opacity:.85;max-width:62ch}
.legal .legal-pdf{display:inline-block;margin:22px 0 40px;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;font-weight:600;color:var(--ocean);
  border-bottom:1px solid var(--ocean);padding-bottom:2px}
.legal h2{font-size:19px;margin:38px 0 12px;padding-top:26px;border-top:1px solid var(--line)}
.legal p{font-size:15px;line-height:1.75;margin-bottom:14px}
.legal ol,.legal ul{margin:0 0 14px 0;padding-left:0;list-style:none}
.legal ol li{display:grid;grid-template-columns:44px 1fr;gap:10px;font-size:15px;
  line-height:1.75;margin-bottom:10px}
.legal ol li>span:first-child{opacity:.7}
.legal a{color:var(--ocean);border-bottom:1px solid var(--ocean)}
.legal .legal-foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;opacity:.8}