/* ===== Full-build QA pass 2: shared responsive shell ===== */
:root{
  --site-header-h:58px;
  --site-anchor-gap:14px;
}
html{
  scroll-padding-top:calc(var(--site-header-h) + var(--site-anchor-gap))!important;
  max-width:100%;
  overflow-x:hidden;
}
body.page-home,body.page-villa,body.page-sugar,body.page-explore,body.page-gallery,body.page-plan{
  padding-top:var(--site-header-h)!important;
  max-width:100%;
  overflow-x:hidden;
}
.header{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;
  height:var(--site-header-h)!important;
  z-index:1000!important;
  background:rgba(247,243,234,.97)!important;
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(34,55,68,.10);
}
.nav{height:var(--site-header-h)!important;gap:21px!important}
.identity{min-width:184px!important}
.brand{font-size:1.16rem!important;line-height:1.02!important}
.locator{margin-top:2px!important;font-size:.56rem!important;letter-spacing:.12em!important}
.navlinks{gap:20px!important;font-size:.82rem!important}
.navlinks a[aria-current="page"],.mobile-nav a[aria-current="page"]{color:var(--sea);font-weight:700}
.header .btn{min-height:38px!important;padding:8px 15px!important;font-size:.79rem!important}
.header .menu{font-size:.86rem!important;cursor:pointer;padding:6px 0!important}
[id]{scroll-margin-top:calc(var(--site-header-h) + var(--site-anchor-gap))!important}

/* Mobile navigation is one fixed panel below the always-visible header. */
.mobile-nav{display:none!important}
.mobile-nav.open{
  display:grid!important;
  position:fixed!important;
  top:var(--site-header-h)!important;
  left:0!important;right:0!important;
  max-height:calc(100vh - var(--site-header-h))!important;
  overflow:auto!important;
  background:rgba(247,243,234,.99)!important;
  padding:14px max(24px,calc((100vw - var(--max))/2)) 20px!important;
  border-top:1px solid rgba(34,55,68,.08)!important;
  box-shadow:0 18px 30px rgba(34,55,68,.14)!important;
  z-index:1001!important;
}
.mobile-nav a{display:block;padding:9px 0;text-decoration:none}
.mobile-nav .btn{display:inline-flex!important;justify-self:start;margin-top:7px}
@media(max-width:1020px){
  .navlinks{display:none!important}
  .header-cta{display:none!important}
  .menu{display:block!important;margin-left:auto!important}
}
@media(min-width:1021px){
  .menu{display:none!important}
  .mobile-nav{display:none!important}
}

/* Home: keep the entire main photograph comfortably within the first desktop viewport. */
@media(min-width:1021px){
  body.page-home .hero{
    min-height:590px!important;
    height:66vh!important;
    max-height:650px!important;
    padding-top:0!important;
  }
}

/* Plan Your Stay: every quick-fact cell uses the same inset at small sizes. */
body.page-plan .quick-grid .q:first-child{padding-left:18px!important}

/* Gallery: robust small-screen sizing and lightbox clearance below the sticky header. */
body.page-gallery main,
body.page-gallery .hero,
body.page-gallery .hero-grid,
body.page-gallery .hero-mosaic,
body.page-gallery .gallery-section,
body.page-gallery .gallery,
body.page-gallery .tile,
body.page-gallery .filters{min-width:0;max-width:100%}
body.page-gallery .lightbox{
  z-index:900!important;
  align-items:flex-start!important;
  padding:calc(var(--site-header-h) + 18px) 24px 22px!important;
}
body.page-gallery .lightbox-inner{
  width:min(1160px,100%)!important;
  max-height:calc(100vh - var(--site-header-h) - 40px)!important;
}
body.page-gallery .lightbox img{
  max-height:calc(100vh - var(--site-header-h) - 108px)!important;
  object-fit:contain!important;
}

@media(max-width:680px){
  :root{--site-header-h:56px;--site-anchor-gap:12px}
  .nav{height:var(--site-header-h)!important;gap:11px!important}
  .wrap.nav{width:calc(100% - 28px)!important}
  .identity{min-width:0!important}
  .brand{font-size:1.05rem!important}
  .locator{font-size:.52rem!important;letter-spacing:.11em!important}
  .header .menu{font-size:.84rem!important}
  .mobile-nav.open{padding:12px 18px 18px!important}
  body.page-plan .quick-grid .q,
  body.page-plan .quick-grid .q:first-child{padding:15px!important}
  body.page-gallery{overflow-x:clip!important}
  body.page-gallery .wrap{width:calc(100% - 28px)!important;max-width:100%!important}
  body.page-gallery .gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  body.page-gallery .filters{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  body.page-gallery .tile{width:100%!important;min-width:0!important}
  body.page-gallery .hero-grid{width:100%!important;overflow:hidden!important}
  body.page-gallery .hero-mosaic{width:100%!important;min-width:0!important}
  body.page-gallery .lightbox{padding:calc(var(--site-header-h) + 12px) 12px 14px!important}
  body.page-gallery .lightbox-inner{max-height:calc(100vh - var(--site-header-h) - 28px)!important}
  body.page-gallery .lightbox img{max-height:calc(100vh - var(--site-header-h) - 112px)!important}
}


/* v7 desktop nav: Plan Your Stay sits visually beneath Gallery */
@media(min-width:1021px){
  .navlinks .nav-stack{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;line-height:1.08;min-width:92px}
  .navlinks .nav-stack a{display:block;white-space:nowrap;font-size:.82rem}
}

/* v9: avoid duplicate availability CTAs in the viewport.
   Visibility is toggled by the shared shell script; width is retained so navigation does not jump. */
/* v41: hide the entire desktop booking-action wrapper when an in-page
   availability CTA is visible. Safari can otherwise leave the button shell
   visible after the link itself becomes hidden. The wrapper remains in the
   layout, so the navigation does not jump. */
.header-cta{transition:opacity .16s ease,visibility .16s ease}
.header .booking-action:has(> .header-cta.inpage-cta-visible){
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.header-cta.inpage-cta-visible{opacity:0!important;visibility:hidden!important;pointer-events:none!important}


/* v10: gallery mobile containment */
@media(max-width:680px){
  body.page-gallery .hero-mosaic{width:auto!important;max-width:none!important;
    white-space:nowrap!important;margin-left:14px!important;margin-right:14px!important}
  body.page-gallery main{overflow-x:clip!important}
}

/* v28: booking actions remain single, clear links without repeated partner notes. */
.booking-action{display:inline-flex;align-items:flex-start;max-width:100%;vertical-align:top}
.hero-actions .booking-action{flex-shrink:0}
.cta .booking-action{align-self:center}
.header .booking-action{position:relative;align-self:center}
.mobile-nav .booking-action{justify-self:start}
@media(max-width:1020px){.header>.booking-action,.nav>.booking-action{display:none!important}.mobile-nav .booking-action{display:inline-flex!important}}
@media(max-width:680px){.hero-actions .booking-action,.cta .booking-action{width:100%}.booking-action .btn{max-width:100%}}

/* v28: full-width section introductions should use the section's available
   reading area, not arbitrarily stop at 720-790px within a 1220px column.
   Grid/card/overlay typography keeps its original, narrower layout. */
body.page-home .section > .wrap > p.lede,
body.page-villa .section > .wrap > p.lede,
body.page-sugar .section > .wrap > p.lede,
body.page-explore .section > .wrap > p.lede,
body.page-plan .section > .wrap > p.lede,
body.page-villa #space > .wrap > p.small,
body.page-sugar #swim > .wrap > p.small,
body.page-villa .fair-copy > p.lede,
body.page-gallery .gallery-head > p.gallery-instruction {
  width:100%;max-width:none!important;
}
body.page-plan #getting-here > .wrap > h2,
body.page-plan #essentials > .wrap > h2,
body.page-plan #villa-practical > .wrap > h2 {
  width:100%;max-width:none!important;
}

/* v29: remove remaining premature desktop wraps in requested feature sections. */
@media(min-width:1021px){
  body.page-home #barbados .copy > h2,
  body.page-home #barbados .copy > p:not(.eyebrow),
  body.page-villa #outdoor .outdoor-copy > div:first-child h2,
  body.page-villa #outdoor .outdoor-copy > div:first-child p,
  body.page-villa #sugar-hill .resort-copy > h2,
  body.page-villa #sugar-hill .resort-copy > p,
  body.page-plan #villa-practical .villa-practical-intro > h2,
  body.page-plan #villa-practical .villa-practical-intro > p.lede {
    width:100%;max-width:none!important;
  }
}

/* v32: restore the site's normal content frame for both features.
   Let the text use the full 1220px section measure, rather than a legacy
   780px/880px inner limit or the overly wide v31 1650px container.
   The browser handles normal end-of-line wrapping on every viewport. */
@media (min-width:1021px) {
  body.page-villa #outdoor > .wrap,
  body.page-plan #villa-practical > .wrap {
    width:min(var(--max),calc(100% - 64px))!important;
  }
  body.page-villa #outdoor .outdoor-copy > div:first-child,
  body.page-plan #villa-practical .villa-practical-intro {
    width:100%!important;
    max-width:none!important;
  }
  body.page-villa #outdoor .outdoor-copy > div:first-child > p,
  body.page-plan #villa-practical .villa-practical-intro > p.lede {
    width:100%!important;
    max-width:none!important;
  }
}


/* v33: new rear-villa hero, quieter home overlay, and a compact mobile booking CTA. */
@media(min-width:1021px){
  body.page-home .hero{
    min-height:600px!important;
    height:68vh!important;
    max-height:700px!important;
  }
  body.page-home .hero > img{
    object-position:center 54%!important;
  }
  body.page-home .hero-copy{
    top:84px!important;
    bottom:auto!important;
    left:max(28px,calc((100vw - var(--max))/2))!important;
    width:min(700px,calc(100% - 56px))!important;
    padding:22px 26px 24px!important;
    background:rgba(247,243,234,.95)!important;
  }
  body.page-home .hero-copy h1{
    font-size:clamp(1.95rem,2.25vw,2.45rem)!important;
    line-height:1.02!important;
    margin-bottom:12px!important;
    max-width:none!important;
  }
  body.page-home .hero-copy .lede{
    font-size:1rem!important;
    line-height:1.5!important;
    margin-bottom:0!important;
  }
  body.page-villa .hero > img{
    object-position:center 55%!important;
  }
}
@media(max-width:1020px){
  body.page-home .hero > img,
  body.page-villa .hero > img{object-position:center 52%!important}
}
@media(max-width:680px){
  body.page-home .hero > img,
  body.page-villa .hero > img{object-position:center 50%!important}
  body.page-home .hero-copy{padding:26px 18px 32px!important}
  body.page-home .hero-copy h1{font-size:2.55rem!important}
  body.page-home .hero-copy .lede{font-size:1rem!important}
}
.booking-action-mobile{display:none!important}
.header-cta-mobile{display:none!important}
@media(max-width:760px){
  .header>.booking-action-mobile,.nav>.booking-action-mobile{display:inline-flex!important;align-items:center;margin-left:auto!important;min-width:0!important}
  .header .menu{margin-left:10px!important}
  .header-cta-mobile{
    display:none!important;
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:.72rem!important;
    white-space:nowrap!important;
  }
  .header-cta-mobile.show-mobile-header-cta{display:inline-flex!important}
}


/* v34: mirror the approved Home hero treatment on The Villa page. */
@media(min-width:1021px){
  body.page-villa .hero{
    min-height:600px!important;
    height:68vh!important;
    max-height:700px!important;
  }
  body.page-villa .hero > img{
    object-position:center 54%!important;
  }
  body.page-villa .hero-copy{
    top:84px!important;
    bottom:auto!important;
    left:max(28px,calc((100vw - var(--max))/2))!important;
    width:min(700px,calc(100% - 56px))!important;
    padding:22px 26px 24px!important;
    background:rgba(247,243,234,.95)!important;
  }
  body.page-villa .hero-copy h1{
    font-size:clamp(3.15rem,3.6vw,4.1rem)!important;
    line-height:1.01!important;
    margin-bottom:12px!important;
    max-width:none!important;
  }
  body.page-villa .hero-copy .lede{
    font-size:1rem!important;
    line-height:1.5!important;
    margin-bottom:0!important;
    max-width:620px!important;
  }
  body.page-villa .hero-actions{
    margin-top:18px!important;
  }
}
@media(max-width:1020px){
  body.page-villa .hero > img{object-position:center 52%!important}
}
@media(max-width:680px){
  body.page-villa .hero > img{object-position:center 50%!important}
  body.page-villa .hero-copy{padding:26px 18px 32px!important}
  body.page-villa .hero-copy h1{font-size:2.55rem!important}
  body.page-villa .hero-copy .lede{font-size:1rem!important}
}


/* v35: reproduce the approved Home/Villa hero composition using the authentic
   owner-supplied rear exterior photograph, with editable, accessible live text.
   Narrow screens retain the approved photo-first stacked presentation. */
@media (min-width:1021px) {
  body.page-home,body.page-villa { --site-header-h:64px; }
  body.page-home .wrap.nav, body.page-villa .wrap.nav {
    width:min(1320px,calc(100% - 64px))!important;
  }
  body.page-home .header .brand,body.page-villa .header .brand {
    font-size:1.46rem!important;
  }
  body.page-home .header .locator,body.page-villa .header .locator {display:none!important;}
  body.page-home .hero,body.page-villa .hero {
    height:calc(100vh - var(--site-header-h))!important;
    height:calc(100svh - var(--site-header-h))!important;
    min-height:640px!important;
    max-height:none!important;
    padding-top:0!important;
  }
  body.page-home .hero > img,body.page-villa .hero > img {
    object-position:center 43%!important;
  }
  body.page-home .hero-copy,body.page-villa .hero-copy {
    top:82px!important;bottom:auto!important;
    left:max(30px,calc((100vw - 1320px)/2))!important;
    width:min(692px,calc(100% - 60px))!important;
    padding:25px 32px 26px!important;
    background:rgba(247,243,234,.97)!important;
    box-shadow:none!important;
  }
  body.page-home .hero-copy h1 {
    font-size:clamp(2.1rem,2.68vw,2.84rem)!important;
    line-height:1.06!important;
    margin-bottom:14px!important;
    max-width:none!important;
    white-space:normal!important;
  }
  body.page-villa .hero-copy h1 {
    font-size:clamp(3rem,3.28vw,3.4rem)!important;
    line-height:1.04!important;
    margin-bottom:14px!important;
    max-width:none!important;
  }
  body.page-home .hero-copy .lede,body.page-villa .hero-copy .lede {
    max-width:none!important;
    font-size:clamp(1rem,1.06vw,1.1rem)!important;
    line-height:1.46!important;
    margin-bottom:0!important;
  }
  body.page-home .hero-actions,body.page-villa .hero-actions {
    display:flex!important;align-items:center!important;gap:22px!important;
    margin-top:25px!important;flex-wrap:wrap!important;
  }
  body.page-home .hero-actions .btn,body.page-villa .hero-actions .btn {
    min-width:290px!important;min-height:56px!important;
    padding:13px 25px!important;font-size:.98rem!important;
  }
  body.page-home .hero-actions .quiet-link,body.page-villa .hero-actions .quiet-link {
    font-size:1rem!important;
  }
}
@media(min-width:2200px){
  body.page-home .hero > img,body.page-villa .hero > img {
    object-position:center 32%!important;
  }
}
@media (min-width:681px) and (max-width:1020px){
  body.page-home .hero > img,body.page-villa .hero > img {
    object-position:center 48%!important;
  }
  body.page-home .hero-copy,body.page-villa .hero-copy {
    width:100%!important;max-width:none!important;
    top:auto!important;bottom:auto!important;left:auto!important;
  }
}
@media (max-width:680px){
  body.page-home .hero > img,body.page-villa .hero > img {
    width:100%!important;height:auto!important;
    aspect-ratio:auto!important;object-fit:contain!important;
    object-position:center center!important;
  }
}

/* v36: controlled hero-card sizing for browser zoom and narrower desktops.
   Keep the same owner photograph and hero crop. Limit the overlays to the sky,
   retain legible copy, and let the browser wrap normally on small screens. */
@media (min-width:1021px){
  body.page-home .hero-copy,body.page-villa .hero-copy{
    top:clamp(32px,3vw,52px)!important;
    left:max(24px,calc((100vw - 1320px)/2))!important;
    width:min(620px,43vw,calc(100% - 48px))!important;
    padding:18px 23px 19px!important;
  }
  body.page-home .hero-copy h1{
    font-size:clamp(1.92rem,2.15vw,2.38rem)!important;
    line-height:1.05!important;
    margin-bottom:9px!important;
    white-space:normal!important;
  }
  body.page-villa .hero-copy h1{
    font-size:clamp(2.5rem,2.8vw,3rem)!important;
    line-height:1.04!important;
    margin-bottom:9px!important;
  }
  body.page-home .hero-copy .lede,body.page-villa .hero-copy .lede{
    font-size:1rem!important;
    line-height:1.42!important;
  }
  body.page-home .hero-actions,body.page-villa .hero-actions{
    gap:16px!important;
    margin-top:14px!important;
  }
  body.page-home .hero-actions .btn,body.page-villa .hero-actions .btn{
    min-width:250px!important;
    min-height:46px!important;
    padding:10px 17px!important;
    font-size:.92rem!important;
  }
  body.page-home .hero-actions .quiet-link,body.page-villa .hero-actions .quiet-link{
    font-size:.95rem!important;
  }
}
/* Tighter sky-only treatment when zoom reduces the effective CSS viewport. */
@media (min-width:1021px) and (max-width:1399px){
  body.page-home .hero-copy,body.page-villa .hero-copy{
    top:28px!important;
    width:min(520px,44vw,calc(100% - 48px))!important;
    padding:14px 19px 16px!important;
  }
  body.page-home .hero-copy h1{
    font-size:clamp(1.68rem,2.12vw,1.98rem)!important;
    margin-bottom:7px!important;
  }
  body.page-villa .hero-copy h1{
    font-size:clamp(2.25rem,2.7vw,2.55rem)!important;
    margin-bottom:7px!important;
  }
  body.page-home .hero-copy .lede,body.page-villa .hero-copy .lede{font-size:.94rem!important}
  body.page-home .hero-actions,body.page-villa .hero-actions{margin-top:11px!important;gap:12px!important}
  body.page-home .hero-actions .btn,body.page-villa .hero-actions .btn{
    min-width:220px!important;min-height:42px!important;padding:8px 13px!important;font-size:.88rem!important;
  }
}


/* v38: owner-approved v27 Home hero treatment with original 4:3 photo.
   The panel, its typography and image frame use viewport width ratios to
   retain approximately the same on-screen composition at browser zoom
   80%, 90% and 100%. Villa hero rules are intentionally untouched. */
@media (min-width:1021px){
  body.page-home .hero{
    height:36.5vw!important;
    min-height:580px!important;
    max-height:950px!important;
    padding-top:0!important;
  }
  body.page-home .hero > img{
    width:100%!important;
    height:100%!important;
    position:absolute!important;
    inset:0!important;
    object-fit:cover!important;
    object-position:48% 29%!important;
  }
  body.page-home .hero-copy{
    top:auto!important;
    bottom:1.4vw!important;
    left:12.5vw!important;
    width:25.4vw!important;
    max-width:none!important;
    padding:1.15vw 1.3vw 1.3vw!important;
    background:rgba(247,243,234,.965)!important;
    box-shadow:var(--shadow)!important;
  }
  body.page-home .hero-copy .eyebrow{
    display:block!important;
    font-size:.69vw!important;
    line-height:1.4!important;
    letter-spacing:.13em!important;
    margin:0 0 .65vw!important;
  }
  body.page-home .hero-copy h1{
    font-size:2.65vw!important;
    line-height:1.02!important;
    margin:0 0 .8vw!important;
    white-space:normal!important;
    max-width:none!important;
  }
  body.page-home .hero-copy .lede{
    font-size:1.01vw!important;
    line-height:1.48!important;
    margin:0!important;
    max-width:none!important;
  }
  body.page-home .hero-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:.68vw!important;
    flex-wrap:nowrap!important;
    margin-top:1.15vw!important;
  }
  body.page-home .hero-actions .booking-action{width:auto!important}
  body.page-home .hero-actions .btn{
    min-height:2.88vw!important;
    min-width:0!important;
    padding:.52vw 1.15vw!important;
    font-size:.85vw!important;
    white-space:nowrap!important;
  }
  body.page-home .hero-actions .quiet-link{
    font-size:.9vw!important;
    line-height:1.4!important;
  }
}
/* At widths where the overlay no longer has a comfortable reading measure,
   retain the v37 stacked image-first layout; desktop zoom levels remain stable. */
@media (max-width:1020px){
  body.page-home .hero-copy .eyebrow{display:none!important}
}


/* v39: show the entire Villa rear photograph on tablet-shaped viewports.
   The 2048 x 1143 source is landscape; using a full-viewport-height cover
   crop on iPad portrait discards most of its horizontal field of view.
   Laptop/wide desktop and Home hero rules are deliberately unchanged. */
@media (min-width:681px) and (max-width:1020px) {
  body.page-villa .hero > img {
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}
/* Tablet landscape: preserve the full photo while retaining the overlay. */
@media (min-width:1021px) and (max-width:1800px) and (orientation:landscape) and (max-aspect-ratio:31/20) {
  body.page-villa .hero {
    height:auto!important;
    aspect-ratio:2048 / 1143!important;
    min-height:0!important;
    max-height:none!important;
    padding-top:0!important;
  }
  body.page-villa .hero > img {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}
/* Tablet portrait: the image and text stack, as on smaller tablets.
   No horizontal crop and no cream panel obscuring the villa or gazebo. */
@media (min-width:1021px) and (max-width:1800px) and (orientation:portrait) {
  body.page-villa .hero {
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    aspect-ratio:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding-top:0!important;
    background:var(--ivory)!important;
  }
  body.page-villa .hero > img {
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  body.page-villa .hero:after{display:none!important}
  body.page-villa .hero-copy {
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:24px clamp(24px,5vw,44px) 30px!important;
    background:var(--ivory)!important;
    box-shadow:none!important;
  }
  body.page-villa .hero-copy h1 {
    font-size:clamp(2.35rem,4vw,2.85rem)!important;
  }
  body.page-villa .hero-copy .lede {
    font-size:1rem!important;
    max-width:760px!important;
  }
  body.page-villa .hero-actions{margin-top:16px!important}
}

/* v40: Home first-section mobile-only photograph */
body.page-home #villa .media picture{display:block;width:100%}