/* ═══════════════════════════════════════════════
   Tokens — light scheme (white canvas, bright grey surfaces)
   ═══════════════════════════════════════════════ */
   :root{
    --bg:            #FFFFFF;
    --bg-band:       #F6F6F5;   /* bright grey section bands */
    --bg-raise:      #F6F6F5;   /* cards, chips, tiles       */
    --bg-raise-2:    #EFEFED;   /* hover                     */
    --line:          rgba(18,18,17,.11);
    --line-soft:     rgba(18,18,17,.07);
    --text:          #141412;
    --heading:       #0B0B09;
    --muted:         rgba(20,20,18,.70);   /* ~7.4:1 on white */
    --faint:         rgba(20,20,18,.60);   /* ~4.7:1 — small caps labels */
  
    --gold:          #A9713F;   /* accent on light           */
    --gold-tint:     rgba(169,113,63,.09);
    --gold-line:     rgba(169,113,63,.26);
    --gold-on-dark:  #D4A574;   /* accent over photography   */
  
    --display: 'Figtree', "Instrument Sans", sans-serif;
    --sans:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  
    --container: 1280px;
    --gutter: 32px;
    --header-h: 104px;
    --r-card: 16px;
    --r-media: 14px;
  }
  
  /* ═══════════════════════════════════════════════
     Base
     ═══════════════════════════════════════════════ */
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    font-size:16px; font-weight:300; line-height:1.5;
    -moz-osx-font-smoothing:grayscale;
  }
  img{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3,h4{
    font-family:var(--display); font-weight:600; margin:0;
    letter-spacing:-.02em; line-height:1.06; color:var(--heading);
  }
  p{ margin:0; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; }
  .sprite{ position:absolute; width:0; height:0; overflow:hidden; }
  
  .container{
    width:100%; max-width:var(--container);
    margin:0 auto; padding:0 var(--gutter);
  }
  
  /* Eyebrow ------------------------------------- */
  .eyebrow{
    display:flex; align-items:center; gap:8px;
    font-size:11px; font-weight:500; letter-spacing:.1em;
    text-transform:uppercase; color:var(--faint);
  }
  .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }
  
  /* Shared lede --------------------------------- */
  .lede{
    margin-top:22px; max-width:54ch;
    font-size:16px; font-weight:300; line-height:1.72; color:var(--muted);
  }
  .lede + .lede{ margin-top:16px; }
  
  /* Buttons ------------------------------------- */
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:999px;
    font-family:var(--sans); font-size:13px; font-weight:500;
    letter-spacing:.005em; white-space:nowrap; cursor:pointer;
    border:1px solid transparent;
    transition:background .25s ease, border-color .25s ease, color .25s ease;
  }
  .btn-primary{ background:var(--heading); color:#fff; }
  .btn-primary:hover{ background:#2A2A26; }
  .btn-ghost{
    background:#fff; border-color:var(--line); color:var(--text);
  }
  .btn-ghost:hover{ background:var(--bg-raise); border-color:rgba(18,18,17,.2); }
  .btn svg{ transition:transform .25s ease; }
  .btn:hover svg{ transform:translateX(3px); }
  
  /* ═══════════════════════════════════════════════
     Header — sits over the dark hero, so it stays light-on-dark
     ═══════════════════════════════════════════════ */
  .site-header{
    position:fixed; inset:0 0 auto 0; z-index:60;
    border-bottom:1px solid transparent;
    transition:background .32s ease, border-color .32s ease, box-shadow .32s ease;
  }
  /* dark tint + blur once past the hero — everything in the bar is already
     light, so nothing has to flip colour and the gold logo keeps its punch */
  .site-header.scrolled{
    background:rgba(12,12,11,.72);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom-color:rgba(255,255,255,.1);
    box-shadow:0 8px 30px -14px rgba(0,0,0,.6);
  }
  .header-inner{
    position:relative;
    display:flex; align-items:center; justify-content:space-between;
    gap:32px; height:var(--header-h);
  }
  .wordmark{ display:flex; align-items:center; }
  .wordmark img{
    height:64px; width:auto; display:block;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
  }
  .site-footer .wordmark img{ height:76px; filter:none; }
  .header-actions{ display:flex; align-items:center; gap:12px; }
  .header-phone{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 16px; border-radius:999px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    font-size:13px; font-weight:400; color:#fff;
    transition:background .25s ease, border-color .25s ease;
  }
  .header-phone svg{ color:var(--gold-on-dark); flex:none; }
  .header-phone:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.3); }
  .nav-toggle{
    display:flex; width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    cursor:pointer; padding:0; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
    transition:background .25s ease, border-color .25s ease;
  }
  .nav-toggle:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.3); }
  .nav-toggle span{ width:15px; height:1px; background:#fff; display:block; transition:transform .3s ease; }
  .nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }
  
  /* Booking bar --------------------------------- */
  /* white, wide, the loudest thing in the bar */
  .searchbar{
    position:absolute; left:50%; transform:translateX(-50%);
    display:flex; align-items:center;
    padding:5px 5px 5px 9px; border-radius:999px;
    background:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,.14), 0 18px 44px -14px rgba(0,0,0,.4);
  }
  .sb-field{
    display:flex; align-items:center; gap:12px;
    min-width:162px; height:44px; padding:0 26px;
    border:0; border-radius:999px;
    background:transparent; color:inherit; cursor:pointer;
    transition:background .22s ease;
  }
  .sb-field:hover,
  .sb-field[aria-expanded="true"]{ background:var(--bg-raise); }
  .sb-ico{ width:18px; height:18px; color:var(--faint); flex:none; }
  .sb-label{
    font-size:15px; font-weight:500; letter-spacing:-.01em;
    color:var(--heading); white-space:nowrap;
  }
  .sb-div{ width:1px; height:24px; background:var(--line); flex:none; }
  .sb-go{
    display:inline-flex; align-items:center; gap:9px;
    height:44px; padding:0 26px; margin-left:7px;
    border:0; border-radius:999px; cursor:pointer;
    background:var(--heading); color:#fff;
    font-size:15px; font-weight:500;
    transition:background .22s ease;
  }
  .sb-go:hover{ background:#2A2A26; }
  .sb-go svg{ width:16px; height:16px; }
  
  /* ── popovers ── */
  .sb-pop{
    position:absolute; top:calc(100% + 14px); z-index:70;
    background:#fff; border:1px solid var(--line); border-radius:22px;
    box-shadow:0 28px 70px -22px rgba(18,18,17,.4), 0 4px 14px rgba(18,18,17,.07);
    color:var(--text); text-align:left;
  }
  .sb-pop[hidden]{ display:none; }
  .sb-pop-cal{ left:50%; transform:translateX(-50%); padding:16px 22px 18px; }
  .sb-pop-guests{ left:52%; transform:translateX(-50%); padding:20px 24px; width:340px; }
  
  .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
  .cal-nav{
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--line); color:var(--heading);
    cursor:pointer; padding:0; transition:background .2s ease, border-color .2s ease;
  }
  .cal-nav:hover{ background:var(--bg-raise); border-color:rgba(18,18,17,.22); }
  .cal-nav svg{ width:13px; height:13px; }
  .cal-clear{
    background:none; border:0; cursor:pointer;
    font-size:12.5px; font-weight:500; color:var(--faint);
    text-decoration:underline; text-underline-offset:3px;
  }
  .cal-clear:hover{ color:var(--heading); }
  
  .cal-months{ display:flex; gap:28px; }
  .cal-month{ width:246px; }
  .cal-title{
    text-align:center; margin-bottom:8px;
    font-family:var(--display); font-weight:600; font-size:15px;
    letter-spacing:-.02em; color:var(--heading);
  }
  .cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; }
  .cal-dow span{
    text-align:center; font-size:10.5px; font-weight:500;
    letter-spacing:.06em; color:var(--faint);
  }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
  .cal-day{
    position:relative; height:40px;
    display:flex; align-items:center; justify-content:center;
    border:0; background:transparent !important;
    font-family:var(--sans); font-size:13px; color:var(--heading);
    cursor:pointer; border-radius:0 !important;
    padding:0;
  }
  .cal-day span{
    position:relative; z-index:2;
    width:28px; height:28px; flex:none;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
  }
  .cal-day.empty{ pointer-events:none; }
  .cal-day.past{ color:#8B8880; pointer-events:none; }
  .cal-day:not(.past):not(.empty):not(.edge):hover span{ background:var(--bg-raise-2); }
  .cal-day.in-range{ color:#141412; }
  .cal-day.in-range::before,
  .cal-day.edge.start:not(.only)::before,
  .cal-day.edge.end:not(.only)::before{
    content:''; position:absolute; top:50%; left:0; right:0;
    height:28px; margin-top:-14px;
    background:#F2F0EC; border-radius:0 !important; z-index:0;
  }
  .cal-day.edge.start:not(.only)::before{ left:50%; }
  .cal-day.edge.end:not(.only)::before{ right:50%; }
  .cal-day.edge span{
    background:#0B0B09; color:#fff;
  }
  
  .guest-row{ display:flex; align-items:center; justify-content:space-between; gap:22px; }
  .guest-label{ display:flex; flex-direction:column; gap:3px; }
  .guest-label b{ font-size:15px; font-weight:500; color:var(--heading); }
  .guest-label i{ font-size:12.5px; font-style:normal; color:var(--muted); }
  .guest-step{ display:flex; align-items:center; gap:14px; }
  .gs-btn{
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--line); color:var(--heading);
    cursor:pointer; padding:0;
    touch-action:manipulation; -ms-touch-action:manipulation;
    user-select:none; -webkit-user-select:none;
    transition:background .2s ease, border-color .2s ease, opacity .2s ease;
  }
  .gs-btn:hover:not(:disabled){ background:var(--bg-raise); border-color:rgba(18,18,17,.24); }
  .gs-btn:disabled{ opacity:.34; cursor:default; }
  .gs-btn svg{ width:13px; height:13px; }
  .gs-value{
    min-width:46px; text-align:center;
    font-size:15px; font-weight:500; color:var(--heading);
    font-variant-numeric:tabular-nums;
  }
  
  /* Hamburger panel — drops over the dark hero ---- */
  .nav-panel{
    overflow:hidden; max-height:0;
    background:rgba(12,12,11,.9);
    backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    transition:max-height .42s cubic-bezier(.22,.61,.36,1);
  }
  .nav-panel.open{ max-height:440px; border-bottom:1px solid rgba(255,255,255,.12); }
  .nav-panel-inner{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:40px; padding-top:24px; padding-bottom:32px;
  }
  .nav-links{ display:flex; flex-direction:column; gap:2px; }
  .nav-links a{
    font-family:var(--display); font-weight:600; font-size:27px;
    letter-spacing:-.02em; color:rgba(255,255,255,.72);
    transition:color .2s ease, transform .3s ease;
  }
  .nav-links a:hover{ color:#fff; transform:translateX(4px); }
  .nav-panel .btn-primary{ background:#fff; color:#0A0A0A; }
  .nav-panel .btn-primary:hover{ background:rgba(255,255,255,.86); }
  .nav-panel-foot{ display:flex; align-items:center; gap:18px; }
  .nav-panel-phone{ font-size:13px; color:rgba(255,255,255,.62); }
  .nav-panel-phone:hover{ color:#fff; }
  
  /* ═══════════════════════════════════════════════
     1 — Hero  (stays dark: photography + white type)
     ═══════════════════════════════════════════════ */
  .hero{
    position:relative;
    height:clamp(430px, 54vh, 580px);
    display:flex; align-items:stretch;
    overflow:hidden;
    background:#0C0C0B;
  }
  .hero-media{ position:absolute; inset:0; }
  .hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; }
  /* ends on a hard edge — fading photography into white looks washed out */
  .hero-scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(to right, rgba(10,10,9,.86) 0%, rgba(10,10,9,.55) 42%, rgba(10,10,9,.2) 75%, rgba(10,10,9,.34) 100%),
      linear-gradient(to bottom, rgba(10,10,9,.66) 0%, rgba(10,10,9,.05) 38%, rgba(10,10,9,.44) 100%);
  }
  .hero-inner{
    position:relative; z-index:2;
    display:flex; justify-content:space-between; gap:72px;
    padding-top:var(--header-h); padding-bottom:44px;
  }
  .hero-copy{ margin-top:auto; margin-bottom:auto; }
  .hero h1{
    font-size:clamp(34px, 4.4vw, 62px);
    letter-spacing:-.02em; line-height:1; color:#fff;
  }
  .hero h1 .em{ color:rgba(255,255,255,.55); }
  .hero-sub{
    margin-top:20px; max-width:46ch;
    font-size:17px; font-weight:300; line-height:1.6;
    color:rgba(255,255,255,.74);
  }
  .hero-sub .sub-dot{
    display:inline-block; position:relative; top:-2px;
    width:7px; height:7px; border-radius:50%;
    background:var(--gold-on-dark); margin-right:11px;
  }
  .hero-sub em{
    font-style:normal; font-weight:400; color:#fff;
    box-shadow:inset 0 -1px 0 0 rgba(212,165,116,.6);
  }
  
  .hero-cta{ margin-top:26px; background:#fff; color:#0A0A0A; }
  .hero-cta:hover{ background:rgba(255,255,255,.86); }
  
  /* narrow proof strip, single line */
  .proofbar{
    background:var(--bg-band);
    border-bottom:1px solid var(--line-soft);
  }
  .proofbar-inner{
    display:flex; align-items:center; justify-content:center;
    flex-wrap:wrap; gap:8px 20px; height:58px;
    font-size:13.5px; font-weight:400; color:var(--muted);
  }
  .proof-stars{ display:flex; gap:3px; }
  .proof-stars svg{ width:15px; height:15px; color:var(--gold); }
  .proof-tag{
    font-size:11px; font-weight:500; letter-spacing:.13em;
    text-transform:uppercase; color:var(--heading);
  }
  .proof-item{ display:inline-flex; align-items:center; gap:7px; }
  .proof-ico{ width:15px; height:15px; color:var(--gold); flex:none; }
  .proof-item b{ font-weight:600; color:var(--heading); }
  .proof-item i{ font-style:normal; color:var(--faint); }
  .proof-sep{ width:1px; height:16px; background:var(--line); }
  
  /* official platform logos — greyscale marks straight on the photo */
  .hero-badges{
    display:flex; align-items:center; align-self:flex-end; flex:none;
  }
  .hero-badges li{
    display:flex; align-items:center;
    padding:0 30px; border-left:1px solid rgba(255,255,255,.24);
  }
  .hero-badges li:first-child{ border-left:0; padding-left:0; }
  .hero-badges li:last-child{ padding-right:0; }
  /* flat greyscale marks -> pure white silhouettes, so they hold up
     over the bright parts of the photograph */
  .hero-badges img{
    height:60px; width:auto; object-fit:contain;
    opacity:.95;
    filter:brightness(0) invert(1) drop-shadow(0 2px 9px rgba(0,0,0,.6));
  }
  
  /* ═══════════════════════════════════════════════
     3 — Villas
     ═══════════════════════════════════════════════ */
  .villas{ padding:34px 0 96px; }
  .section-head{ display:flex; align-items:center; gap:18px; margin-bottom:22px; }
  .section-head h2{ font-size:34px; letter-spacing:-.02em; }
  
  .slider-viewport{
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; cursor:grab;
    -webkit-overflow-scrolling:touch;
  }
  .slider-viewport::-webkit-scrollbar{ display:none; }
  .slider-viewport.dragging{ cursor:grabbing; }
  .slider-viewport.dragging *{ user-select:none; }
  .slider-track{ display:flex; gap:20px; }
  
  .villa-card{ flex:0 0 calc((100% - 60px) / 4); }
  .villa-media{
    position:relative; overflow:hidden;
    border-radius:var(--r-media); aspect-ratio:4 / 3;
    background:var(--bg-raise); border:1px solid var(--line-soft);
  }
  .villa-media img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .7s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
  }
  .villa-card:hover .villa-media img{ transform:scale(1.045); }
  .chip{
    position:absolute; top:10px; left:10px;
    padding:5px 10px; border-radius:999px;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.7);
    font-size:9.5px; font-weight:500; letter-spacing:.09em;
    text-transform:uppercase; color:var(--heading);
  }
  .villa-body{ padding:13px 2px 0; }
  .villa-title-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .villa-body h3{ font-size:18px; letter-spacing:-.02em; }
  .rating{
    display:inline-flex; align-items:center; gap:4px; flex:none;
    font-size:11.5px; font-weight:500; color:var(--gold);
  }
  .rating svg{ width:11px; height:11px; margin-top:-1px; }
  .villa-loc{ margin-top:5px; font-size:12px; font-weight:400; color:var(--muted); }
  .villa-specs{ display:flex; align-items:center; gap:14px; margin-top:9px; }
  .villa-specs li{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:400; color:var(--faint);
  }
  .villa-specs svg{ width:14px; height:14px; color:rgba(20,20,18,.5); flex:none; }
  .villa-price{
    margin-top:10px; padding-top:10px;
    border-top:1px solid var(--line-soft);
    font-size:12px; font-weight:400; color:var(--faint);
  }
  .villa-price strong{
    font-family:var(--display); font-weight:600; font-size:15px;
    letter-spacing:-.02em; color:var(--heading);
  }
  
  /* ═══════════════════════════════════════════════
     4 — Recognition
     ═══════════════════════════════════════════════ */
  .recognition{
    padding:104px 0 120px;
    border-top:1px solid var(--line-soft);
    background:radial-gradient(900px 420px at 78% 8%, rgba(169,113,63,.055), transparent 70%);
  }
  .recognition-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:76px; align-items:start; }
  .recognition h2{ margin-top:16px; font-size:clamp(30px, 3.5vw, 50px); max-width:14ch; }
  .recognition h2 .dim{
    display:block; margin-top:10px;
    font-size:.5em; line-height:1.3; letter-spacing:-.03em;
    color:rgba(20,20,18,.5);
  }
  .since{
    display:flex; align-items:center; gap:14px; margin-top:34px;
    font-size:11px; font-weight:500; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold);
  }
  .since-line{ width:44px; height:1px; background:var(--gold-line); }
  .recognition-cta{ margin-top:32px; }
  
  .badge-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .badge-card{
    padding:26px 24px 24px; border-radius:18px;
    background:#fff; border:1px solid var(--line-soft);
    box-shadow:0 1px 3px rgba(18,18,17,.04), 0 14px 32px -16px rgba(18,18,17,.18);
    transition:transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease, border-color .38s ease;
  }
  .badge-card:hover{
    transform:translateY(-6px); border-color:var(--gold-line);
    box-shadow:0 4px 12px rgba(18,18,17,.06), 0 30px 54px -22px rgba(18,18,17,.26);
  }
  .badge-icon{
    display:flex; align-items:center; justify-content:center;
    width:50px; height:50px; border-radius:14px;
    background:var(--gold-tint); border:1px solid var(--gold-line); color:var(--gold);
    transition:background .38s ease, color .38s ease, box-shadow .38s ease, transform .38s ease;
  }
  .badge-icon svg{ width:29px; height:29px; }
  .badge-card:hover .badge-icon{
    background:linear-gradient(150deg, #C08A50, var(--gold));
    border-color:transparent; color:#fff;
    transform:translateY(-2px) scale(1.05);
    box-shadow:0 10px 24px -8px rgba(169,113,63,.6);
  }
  .badge-num{
    margin-top:22px;
    font-family:var(--display); font-weight:600; font-size:38px;
    letter-spacing:-.02em; line-height:1; color:var(--heading);
  }
  .badge-num .unit{ color:var(--gold); }
  .badge-meta{
    margin-top:10px; font-size:10.5px; font-weight:500;
    letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
  }
  
  /* ═══════════════════════════════════════════════
     5 — Amenities
     ═══════════════════════════════════════════════ */
  .amenities{ padding:96px 0 104px; }
  .amenities-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
  .am-kicker{
    font-size:15px; font-weight:500; letter-spacing:-.01em;
    color:var(--gold);
  }
  .amenities h2{ margin-top:12px; font-size:clamp(30px, 3.4vw, 47px); max-width:17ch; }
  
  /* icon picker — 5 visible, centre one selected, edges fade to the page */
  .am-heading{
    margin-top:36px;
    font-family:var(--display); font-weight:600; font-size:24px;
    letter-spacing:.02em; text-transform:uppercase; color:var(--heading);
  }
  .am-picker{
    position:relative; margin-top:16px;
    cursor:grab; user-select:none;
    touch-action:pan-y;
  }
  .am-picker:active{ cursor:grabbing; }
  .am-picker::before,
  .am-picker::after{
    content:''; position:absolute; top:0; bottom:0; width:104px;
    z-index:2; pointer-events:none;
  }
  .am-picker::before{ left:0;  background:linear-gradient(to right, var(--bg) 22%, rgba(255,255,255,0)); }
  .am-picker::after { right:0; background:linear-gradient(to left,  var(--bg) 22%, rgba(255,255,255,0)); }
  
  .am-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:3; width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--line); color:var(--heading);
    cursor:pointer; padding:0;
    box-shadow:0 2px 6px rgba(18,18,17,.06), 0 10px 22px -10px rgba(18,18,17,.18);
    transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .am-arrow svg{ width:14px; height:14px; }
  .am-arrow:hover{
    border-color:var(--gold-line); color:var(--gold);
    box-shadow:0 3px 10px rgba(18,18,17,.08), 0 16px 30px -12px rgba(169,113,63,.34);
  }
  .am-prev{ left:-4px; }
  .am-next{ right:-4px; }
  .am-prev:hover{ transform:translateY(-50%) translateX(-2px); }
  .am-next:hover{ transform:translateY(-50%) translateX(2px); }
  
  /* tall enough that the active icon's glow isn't clipped by overflow:hidden */
  .am-viewport{ position:relative; height:196px; overflow:hidden; }
  .am-item{
    position:absolute; top:0; left:50%;
    width:var(--item-w, 130px); height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
    padding:0 6px; border:0; background:none; cursor:pointer;
    transform:translateX(calc(-50% + (var(--d, 0) * var(--item-w, 130px))));
    /* no transform transition — JS repaints the position every frame */
  }
  .am-ico{
    display:flex; align-items:center; justify-content:center;
    width:88px; height:88px; border-radius:24px;
    background:#fff; border:1px solid var(--line-soft);
    color:var(--text);
    box-shadow:0 2px 6px rgba(18,18,17,.05), 0 14px 30px -14px rgba(18,18,17,.22);
    transition:background .3s ease, border-color .3s ease, color .3s ease,
               transform .3s ease, box-shadow .3s ease;
  }
  .am-ico svg{ width:40px; height:40px; }
  .am-name{
    font-size:13px; font-weight:400; line-height:1.25;
    text-align:center; color:var(--muted);
    transition:color .3s ease;
  }
  .am-item:hover .am-ico{
    border-color:var(--gold-line); color:var(--gold);
    box-shadow:0 3px 10px rgba(18,18,17,.06), 0 20px 38px -16px rgba(169,113,63,.4);
  }
  .am-item.is-active .am-ico{
    background:linear-gradient(155deg, #fff, var(--gold-tint));
    border-color:var(--gold-line); color:var(--gold);
    transform:scale(1.08);
    box-shadow:0 4px 12px rgba(18,18,17,.07), 0 24px 46px -16px rgba(169,113,63,.5);
  }
  .am-item.is-active .am-name{ color:var(--heading); font-weight:500; }
  
  /* single crossfading photo */
  .am-stage{
    position:relative; aspect-ratio:3 / 2;
    border-radius:var(--r-card); overflow:hidden;
    border:1px solid var(--line-soft); background:var(--bg-raise);
  }
  .am-shot{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .4s ease;
  }
  .am-shot.is-active{ opacity:1; }
  
  /* ═══════════════════════════════════════════════
     6 — The difference
     ═══════════════════════════════════════════════ */
  .difference{ padding:96px 0 104px; border-top:1px solid var(--line-soft); }
  .difference h2{
    margin-top:16px; font-size:clamp(30px, 3.4vw, 47px); line-height:1.12;
  }
  .difference h2 .dim{ color:rgba(20,20,18,.46); }
  .diff-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:20px; margin-top:56px;
  }
  .diff{
    padding:30px 28px 28px; border-radius:18px;
    background:var(--bg-raise); border:1px solid var(--line-soft);
    transition:transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease,
               background .38s ease, border-color .38s ease;
  }
  .diff:hover{
    transform:translateY(-6px); background:#fff;
    border-color:var(--gold-line);
    box-shadow:0 4px 12px rgba(18,18,17,.06), 0 30px 56px -22px rgba(18,18,17,.26);
  }
  .diff-ico{
    display:flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:13px;
    background:#fff; border:1px solid var(--gold-line); color:var(--gold);
    transition:background .38s ease, color .38s ease, box-shadow .38s ease, transform .38s ease;
  }
  .diff:hover .diff-ico{
    background:linear-gradient(150deg, #C08A50, var(--gold));
    border-color:transparent; color:#fff;
    transform:translateY(-2px) scale(1.05);
    box-shadow:0 10px 24px -8px rgba(169,113,63,.58);
  }
  .diff-ico svg{ width:23px; height:23px; }
  .diff h3{ margin-top:20px; font-size:19px; letter-spacing:-.02em; }
  .diff p{ margin-top:11px; font-size:15px; font-weight:300; line-height:1.7; color:var(--muted); }
  
  /* ═══════════════════════════════════════════════
     7 — Since 2014
     ═══════════════════════════════════════════════ */
  .story{
    padding:100px 0 106px;
    background:var(--bg-band);
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:66px; align-items:center; }
  .story-collage{
    display:grid; grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr; gap:14px; height:470px;
  }
  .sc{
    position:relative; margin:0; overflow:hidden;
    border-radius:var(--r-card); border:1px solid var(--line-soft);
    box-shadow:0 2px 8px rgba(18,18,17,.05), 0 20px 44px -22px rgba(18,18,17,.26);
  }
  .sc-tall{ grid-row:span 2; }
  .sc img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .sc:hover img{ transform:scale(1.05); }
  .story-copy h2{ font-size:clamp(28px, 3.1vw, 42px); max-width:19ch; }
  .story-cta{ margin-top:30px; }
  
  /* ═══════════════════════════════════════════════
     8 — Parallax band
     ═══════════════════════════════════════════════ */
  .parallax{ position:relative; height:50vh; min-height:340px; overflow:hidden; }
  .parallax-inner{ position:absolute; inset:-18% 0; will-change:transform; }
  .parallax img{ width:100%; height:100%; object-fit:cover; }
  
  /* ═══════════════════════════════════════════════
     9 — Close to everything
     ═══════════════════════════════════════════════ */
  .pillars{ padding:100px 0 110px; }
  .pillars-head{ margin-bottom:44px; }
  .pillars-head h2{ margin-top:16px; font-size:clamp(26px, 3vw, 42px); }
  @media (min-width:861px){ .pillars-head h2{ white-space:nowrap; } }
  .pillar-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
  .pillar{
    padding:34px 30px 32px;
    border-radius:20px;
    background:#fff; border:1px solid var(--line-soft);
    box-shadow:0 1px 3px rgba(18,18,17,.04), 0 14px 32px -14px rgba(18,18,17,.16);
    transition:transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease, border-color .38s ease;
  }
  .pillar:hover{
    transform:translateY(-8px);
    border-color:var(--gold-line);
    box-shadow:0 4px 12px rgba(18,18,17,.06), 0 34px 60px -22px rgba(18,18,17,.28);
  }
  .pillar-ico{
    display:flex; align-items:center; justify-content:center;
    flex:0 0 46px; width:46px; height:46px; border-radius:13px;
    background:var(--gold-tint); border:1px solid var(--gold-line); color:var(--gold);
    transition:background .38s ease, color .38s ease, box-shadow .38s ease, transform .38s ease;
  }
  .pillar-ico svg{ width:23px; height:23px; }
  .pillar:hover .pillar-ico{
    background:linear-gradient(150deg, #C08A50, var(--gold));
    border-color:transparent; color:#fff;
    transform:translateY(-2px) scale(1.06);
    box-shadow:0 10px 26px -8px rgba(169,113,63,.62);
  }
  .pillar-top{ display:flex; align-items:center; gap:14px; }
  .pillar h3{ margin:0; font-size:20px; letter-spacing:-.02em; line-height:1.2; }
  .pillar p{ margin-top:16px; font-size:16px; font-weight:400; line-height:1.65; color:rgba(20,20,18,.78); }
  
  /* ═══════════════════════════════════════════════
     8 — Reviews
     ═══════════════════════════════════════════════ */
  .reviews{
    padding:96px 0 104px;
    background:var(--bg-band);
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .reviews-head{
    display:flex; flex-direction:column; align-items:center;
    text-align:center; margin-bottom:48px;
  }
  .reviews-title{
    font-size:clamp(26px, 2.7vw, 36px);
    letter-spacing:.14em; text-transform:uppercase;
  }
  .reviews-sub{
    margin-top:14px; font-size:13px; font-weight:400; color:var(--muted);
  }
  .reviews-stars{ display:flex; gap:5px; margin-top:10px; }
  .reviews-stars svg{ width:16px; height:16px; color:var(--gold); }
  
  /* carousel — three across, arrows outside the container */
  .testi-wrap{ position:relative; }
  .testi-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--line); color:var(--heading);
    cursor:pointer; padding:0;
    box-shadow:0 2px 8px rgba(18,18,17,.07), 0 12px 26px -12px rgba(18,18,17,.22);
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .testi-arrow svg{ width:14px; height:14px; }
  .testi-arrow:hover{ border-color:var(--gold-line); color:var(--gold); }
  .testi-arrow:disabled{ opacity:.32; cursor:default; }
  .testi-arrow:disabled:hover{ border-color:var(--line); color:var(--heading); transform:translateY(-50%); }
  .testi-prev{ left:-62px; }
  .testi-next{ right:-62px; }
  .testi-prev:hover{ transform:translateY(-50%) translateX(-2px); }
  .testi-next:hover{ transform:translateY(-50%) translateX(2px); }
  
  /* no scroll-snap: mandatory snapping cancels the smooth scrollBy the
     arrows use and drags the position straight back to where it started */
  .testi-viewport{
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
    cursor:grab; -webkit-overflow-scrolling:touch;
  }
  .testi-viewport::-webkit-scrollbar{ display:none; }
  .testi-viewport.dragging{ cursor:grabbing; }
  .testi-viewport.dragging *{ user-select:none; }
  .testi-track{ display:flex; gap:16px; }
  
  .review{
    flex:0 0 calc((100% - 32px) / 3);
    margin:0; padding:30px 28px 28px;
    border-radius:18px;
    background:#fff; border:1px solid var(--line-soft);
    box-shadow:0 1px 3px rgba(18,18,17,.04), 0 14px 32px -18px rgba(18,18,17,.18);
    transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  }
  .review:hover{
    transform:translateY(-5px);
    box-shadow:0 3px 10px rgba(18,18,17,.06), 0 28px 50px -22px rgba(18,18,17,.26);
  }
  .rv-stars{ display:flex; gap:4px; }
  .rv-stars svg{ width:14px; height:14px; color:var(--gold); }
  .review p{
    margin-top:18px;
    font-size:15px; font-weight:300; line-height:1.7; color:var(--text);
  }
  .review footer{
    display:flex; flex-direction:column; gap:5px;
    margin-top:24px; padding-top:20px;
    position:relative;
  }
  .review footer::before{
    content:''; position:absolute; top:0; left:0;
    width:64px; height:1px; background:var(--line);
  }
  .review footer b{ font-size:14px; font-weight:500; color:var(--heading); }
  .review footer i{
    font-size:10px; font-weight:500; font-style:normal;
    letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  }
  
  /* ═══════════════════════════════════════════════
     9 — Concierge
     ═══════════════════════════════════════════════ */
  .concierge{
    padding:104px 0 110px;
    background:var(--bg-band);
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .concierge-inner{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
  .concierge h2{ margin-top:16px; font-size:clamp(28px, 3.2vw, 44px); max-width:16ch; line-height:1.1; }
  .contact-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:32px; }
  .contact-list a{
    display:flex; align-items:center; gap:13px;
    padding:14px 16px; border-radius:13px;
    background:#fff; border:1px solid var(--line-soft);
    transition:background .25s ease, border-color .25s ease;
  }
  .contact-list a:hover{ border-color:var(--gold-line); }
  .contact-list svg{ width:19px; height:19px; color:var(--gold); flex:none; }
  .contact-list span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .contact-list b{ font-size:13px; font-weight:500; color:var(--heading); }
  .contact-list i{
    font-size:11.5px; font-style:normal; font-weight:400; color:var(--muted);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .concierge-cta{ margin-top:28px; }
  
  .concierge-collage{
    display:grid; grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr; gap:12px; height:460px;
  }
  .cc{ position:relative; margin:0; overflow:hidden; border-radius:var(--r-card); border:1px solid var(--line-soft); }
  .cc-tall{ grid-row:span 2; }
  .cc img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
  .cc:hover img{ transform:scale(1.05); }
  
  /* ═══════════════════════════════════════════════
     10 — FAQ
     ═══════════════════════════════════════════════ */
  .faq{ padding:100px 0 110px; }
  .faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }
  .faq-head h2{ margin-top:16px; font-size:clamp(28px, 3.2vw, 44px); }
  .faq-head .lede{ margin-top:18px; }
  .faq-head .btn{ margin-top:24px; }
  
  .faq-list details{ border-bottom:1px solid var(--line); }
  .faq-list details:first-child{ border-top:1px solid var(--line); }
  .faq-list summary{
    position:relative; list-style:none; cursor:pointer;
    padding:22px 46px 22px 0;
    font-family:var(--display); font-weight:600; font-size:19px;
    letter-spacing:-.02em; color:var(--heading);
    transition:color .2s ease;
  }
  .faq-list summary::-webkit-details-marker{ display:none; }
  .faq-list summary:hover{ color:var(--gold); }
  .faq-list summary::after{
    content:''; position:absolute; right:6px; top:50%;
    width:13px; height:13px; margin-top:-6px;
    background:
      linear-gradient(var(--gold),var(--gold)) center/13px 1.4px no-repeat,
      linear-gradient(var(--gold),var(--gold)) center/1.4px 13px no-repeat;
    transition:transform .3s ease;
  }
  /* 180° keeps the remaining bar horizontal — a minus, not a pipe */
  .faq-list details[open] summary::after{ transform:rotate(180deg); background-size:13px 1.4px, 0 0; }
  .faq-list details p{
    padding:0 60px 24px 0; margin-top:-4px;
    font-size:15px; font-weight:300; line-height:1.72; color:var(--muted);
  }
  
  /* ═══════════════════════════════════════════════
     Footer
     ═══════════════════════════════════════════════ */
  .site-footer{
    background:var(--bg-band);
    border-top:1px solid var(--line-soft);
    padding-top:64px;
  }
  .footer-inner{ display:grid; grid-template-columns:1fr 1.1fr; gap:64px; padding-bottom:56px; }
  .footer-brand p{
    margin-top:18px; max-width:42ch;
    font-size:14px; font-weight:300; line-height:1.7; color:var(--muted);
  }
  .footer-links{ display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; }
  .footer-links div{ display:flex; flex-direction:column; gap:11px; }
  .footer-links b{
    font-size:10.5px; font-weight:500; letter-spacing:.13em;
    text-transform:uppercase; color:var(--faint); margin-bottom:3px;
  }
  .footer-links a{ font-size:14px; font-weight:400; color:var(--muted); transition:color .2s ease; }
  .footer-links a:hover{ color:var(--heading); }
  .footer-base{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:22px; padding-bottom:30px;
    border-top:1px solid var(--line);
    font-size:12px; color:var(--faint);
  }
  
  /* ═══════════════════════════════════════════════
     Scroll reveal
     The hiding rule is scoped to .js-reveal, which the script adds —
     so with JS off or broken the content is simply visible.
     ═══════════════════════════════════════════════ */
  .js-reveal .reveal{
    opacity:0; transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .js-reveal .reveal.in{ opacity:1; transform:none; }
  
  @media (prefers-reduced-motion:reduce){
    .js-reveal .reveal{ opacity:1; transform:none; transition:none; }
    .parallax-inner{ transform:none !important; }
    .am-item{ transition:none; }
  }
  
  /* ═══════════════════════════════════════════════
     Responsive
     ═══════════════════════════════════════════════ */
  @media (min-width:861px){ .hero h1{ white-space:nowrap; } }
  
  @media (max-width:1180px){
    .header-inner{ flex-wrap:wrap; height:auto; padding-top:16px; padding-bottom:14px; }
    .wordmark{ order:1; }
    .header-actions{ order:2; }
    .searchbar{ order:3; position:static; transform:none; width:100%; margin-top:14px; gap:0; }
    .sb-field{ flex:1; min-width:0; padding:6px 14px; }
    .sb-go span{ display:none; }
    .sb-go{ width:40px; padding:0; justify-content:center; margin-left:4px; }
    .hero-inner{ flex-direction:column; gap:30px; padding-top:232px; }
    .hero-copy{ margin:0; }
    .hero-badges{ align-self:flex-start; gap:26px; }
    .villa-card{ flex:0 0 calc((100% - 40px) / 3); }
    .amenities-grid, .concierge-inner, .faq-grid, .story-grid{ grid-template-columns:1fr; gap:44px; }
    .concierge-collage{ height:380px; }
    .story-collage{ height:400px; }
    .diff-grid{ gap:38px 52px; }
  }
  
  @media (max-width:1080px){
    .recognition-grid{ grid-template-columns:1fr; gap:44px; }
    .recognition h2{ max-width:18ch; }
    .nav-panel-inner{ flex-direction:column; align-items:flex-start; gap:26px; }
    .nav-panel.open{ max-height:520px; }
    .review{ flex:0 0 calc((100% - 16px) / 2); }
    .pillar-grid{ gap:28px; }
  }
  
  @media (max-width:900px){
    .pillar-grid{ grid-template-columns:1fr; gap:16px; }
    .diff-grid{ grid-template-columns:1fr; gap:34px; }
    .footer-inner{ grid-template-columns:1fr; gap:40px; }
  }
  
  @media (max-width:860px){
    :root{ --gutter:22px; }
    .hero{ height:auto; }
    .hero-inner{ padding-top:186px; padding-bottom:32px; }
    .hero-media img{ object-position:center 55%; }
    .hero h1{ font-size:clamp(32px, 9.4vw, 48px); }
    .hero-sub{ font-size:15.5px; max-width:100%; }
    .hero-badges{ flex-wrap:wrap; gap:22px; }
    .hero-badges img{ height:42px; }
    .proofbar-inner{ height:auto; padding-top:16px; padding-bottom:16px; gap:8px 16px; }
    .proof-sep{ display:none; }
  
    .am-viewport{ height:168px; }
    .am-ico{ width:72px; height:72px; border-radius:20px; }
    .am-ico svg{ width:33px; height:33px; }
    .story-collage{ height:320px; }
    .parallax{ height:40vh; min-height:260px; }
  
    .villas{ padding:22px 0 72px; }
    .section-head h2{ font-size:27px; }
    .villa-card{ flex:0 0 264px; }
    .recognition, .story, .concierge, .faq, .difference{ padding-top:76px; padding-bottom:80px; }
    .amenities{ padding:76px 0 80px; }
    .pillars{ padding:76px 0 80px; }
    .reviews{ padding:76px 0 80px; }
    .badge-grid{ grid-template-columns:1fr; }
    .review{ flex:0 0 84%; }
    .testi-arrow{ display:none; }
    .contact-list{ grid-template-columns:1fr; }
    .concierge-collage{ height:320px; }
  
  }
  
  @media (max-width:520px){
    .hero-badges img{ height:34px; }
    .header-phone span{ display:none; }
    .header-phone{ padding:10px; }
    .nav-links a{ font-size:23px; }
    .section-head{ flex-wrap:wrap; gap:12px; }
    .footer-links{ grid-template-columns:1fr 1fr; gap:22px; }
    .footer-base{ flex-direction:column; gap:8px; align-items:flex-start; padding-top:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom)); font-size:11.5px; }
    /* mobile footer: phone-sized logo, tight bottom */
    .site-footer{ padding-top:40px; }
    .site-footer .wordmark img{ height:44px; }
    .footer-inner{ gap:28px; padding-bottom:28px; }
    .footer-brand p{ margin-top:10px; font-size:13.5px; }
    /* mobile pillars: tighter card, comfortable text */
    .pillars{ padding:60px 0 68px; }
    .pillar{ padding:22px 20px 24px; }
    .pillar h3{ font-size:19px; }
    .pillar p{ font-size:15.5px; }
  }
  
  /* ═══════════════════════════════════════════════
     Real-villa cards, side arrows, in-card gallery
     ═══════════════════════════════════════════════ */
  .slider-shell{ position:relative; }
  .side-arrow{
    position:absolute; top:110px; transform:translateY(-50%); z-index:5;
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--line); color:var(--heading);
    cursor:pointer; padding:0;
    box-shadow:0 2px 8px rgba(18,18,17,.08), 0 12px 26px -12px rgba(18,18,17,.24);
    transition:border-color .25s ease, color .25s ease, transform .25s ease;
  }
  .side-arrow svg{ width:15px; height:15px; }
  .side-arrow:hover{ border-color:var(--gold-line); color:var(--gold); }
  .side-prev{ left:-14px; }
  .side-next{ right:-14px; }
  
  .villa-media{ display:block; }
  .villa-media img{ pointer-events:none; }
  .vg-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:4;
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.92); border:0; color:var(--heading);
    cursor:pointer; padding:0; opacity:0;
    box-shadow:0 2px 10px rgba(0,0,0,.22);
    transition:opacity .25s ease, background .2s ease;
  }
  .vg-arrow svg{ width:12px; height:12px; }
  .vg-prev{ left:10px; }
  .vg-next{ right:10px; }
  .villa-media:hover .vg-arrow:not([hidden]){ opacity:1; }
  .vg-arrow:hover{ background:#fff; }
  
  .villa-book{
    display:inline-flex; align-items:center; gap:7px;
    margin-top:12px; padding-top:11px; width:100%;
    border-top:1px solid var(--line-soft);
    font-size:12.5px; font-weight:500; letter-spacing:.02em;
    color:var(--gold);
  }
  .villa-book svg{ transition:transform .25s ease; }
  .villa-book:hover svg{ transform:translateX(3px); }
  
  /* testimonials: real platform ratings row */
  .reviews-ratings{
    display:flex; align-items:center; flex-wrap:wrap;
    justify-content:center; gap:8px 20px; margin-top:16px;
    font-size:14px; color:var(--muted);
  }
  
  /* platform-fee highlight */
  .fee-hl{
    font-style:normal; font-weight:500; color:var(--heading);
    box-shadow:inset 0 -6px 0 -1px rgba(169,113,63,.22);
  }
  
  /* floating phone button — mobile only */
  .phone-fab{
    display:none; position:fixed; right:18px; bottom:18px; z-index:90;
    width:58px; height:58px; border-radius:50%;
    align-items:center; justify-content:center;
    background:var(--heading); color:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.3), 0 18px 40px -12px rgba(0,0,0,.4);
  }
  .phone-fab svg{ width:24px; height:24px; }
  
  /* ═══════════════════════════════════════════════
     Mobile: only the search bar sticks; phone FAB
     ═══════════════════════════════════════════════ */
  @media (max-width:860px){
    /* header scrolls away with the page */
    .site-header{ position:absolute; }
    .site-header.scrolled{
      background:none; box-shadow:none; border-bottom-color:transparent;
      backdrop-filter:none; -webkit-backdrop-filter:none;
    }
    .header-phone{ display:none; }
    .phone-fab{ display:flex; }
  
    /* search bar pops out and pins once you scroll */
    .scrolled .searchbar{
      position:fixed; top:10px; left:14px; right:14px;
      transform:none; width:auto; z-index:85;
      box-shadow:0 6px 18px rgba(0,0,0,.22), 0 20px 48px -16px rgba(0,0,0,.42);
    }
  
    .hero-inner{ padding-top:206px; }
  
    .side-arrow{ display:none; }
    .villa-book{ font-size:12px; }
    .vg-arrow{ opacity:1; }            /* no hover on touch — always visible */
  }
  
  @media (max-width:520px){
    .sb-field{ min-width:0; flex:1; padding:0 14px; }
    .sb-go{ padding:0 15px; }
    .sb-go span{ display:none; }
    .hero-inner{ padding-top:196px; }
  }
  
  /* arrows that protrude past the container tuck inside on narrower screens */
  @media (max-width:1420px){
    .testi-prev{ left:6px; }
    .testi-next{ right:6px; }
  }
  @media (max-width:1340px){
    .side-prev{ left:6px; }
    .side-next{ right:6px; }
  }
  
  /* clickable Airbnb rating in testimonials */
  .proof-link{
    color:var(--gold); border-bottom:1px solid var(--gold-line);
    padding-bottom:2px; transition:color .2s ease, border-color .2s ease;
  }
  .proof-link b{ color:var(--gold); }
  .proof-link i{ color:var(--gold); opacity:.75; }
  .proof-link:hover{ color:#8A5A30; border-bottom-color:#8A5A30; }
  .proof-link:hover b{ color:#8A5A30; }
  
  /* ═══════════════════════════════════════════════
     Same villa, better booking — comparison table
     ═══════════════════════════════════════════════ */
  .compare{
    padding:96px 0 104px;
    background:var(--bg-band);
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .compare-grid{
    display:grid; grid-template-columns:.9fr 1.1fr;
    gap:64px; align-items:center;
  }
  .compare-copy h2{ margin-top:16px; font-size:clamp(30px, 3.4vw, 46px); }
  .compare-cta{ margin-top:28px; }
  
  .compare-card{
    background:#fff; border:1px solid var(--line-soft); border-radius:20px;
    padding:10px 26px;
    box-shadow:0 2px 8px rgba(18,18,17,.05), 0 24px 52px -22px rgba(18,18,17,.22);
  }
  .cmp-row{
    display:grid; grid-template-columns:1.05fr 1fr 1fr;
    gap:18px; align-items:center;
    padding:15px 0;
    border-top:1px solid var(--line-soft);
    font-size:13.5px; font-weight:300; color:var(--muted);
  }
  .cmp-row:first-child{ border-top:0; }
  .cmp-head{
    font-size:11px; font-weight:500; letter-spacing:.12em;
    text-transform:uppercase; color:var(--faint);
  }
  .cmp-head .cmp-us{ color:var(--gold); font-weight:600; }
  .cmp-label{ font-weight:500; font-size:13px; color:var(--heading); }
  .cmp-row .cmp-us{ font-weight:400; color:var(--heading); }
  .cmp-no, .cmp-yes{ display:inline-flex; align-items:center; gap:7px; }
  .cmp-no svg{ width:11px; height:11px; color:#B4544A; flex:none; }
  .cmp-yes svg{ width:12px; height:12px; color:var(--gold); flex:none; }
  .cmp-yes{ font-weight:500; }
  
  @media (max-width:1080px){
    .compare-grid{ grid-template-columns:1fr; gap:40px; }
  }
  @media (max-width:860px){
    .compare{ padding:76px 0 80px; }
    .compare-card{ padding:6px 18px; }
    .cmp-row{ gap:10px; font-size:12px; padding:13px 0; }
    .cmp-label{ font-size:12px; }
  }
  
  /* ═══════════════════════════════════════════════
     Villa carousel fixes
     ═══════════════════════════════════════════════ */
  @media (max-width:860px){
    /* no per-card gallery arrows on mobile */
    .vg-arrow{ display:none; }
    /* touch flicks settle on a whole card via native snap */
    .slider-viewport{ scroll-snap-type:x mandatory; }
    .villa-card{ scroll-snap-align:start; }
    /* three logos on one line, vertically centred */
    .hero-badges{
      flex-wrap:nowrap; width:100%; align-items:center; gap:0;
    }
    .hero-badges li{
      flex:1; display:flex; align-items:center; justify-content:center;
      height:56px; padding:0 12px;
      border-left:1px solid rgba(255,255,255,.24);
    }
    .hero-badges li:first-child{ border-left:0; }
    .hero-badges img{ height:46px; }
  }
  @media (max-width:520px){
    .hero-badges img{ height:38px; }
    .hero-badges li{ height:48px; padding:0 8px; }
  }
  
  /* ═══════════════════════════════════════════════
     Hero slideshow
     ═══════════════════════════════════════════════ */
  .hero-slide{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover; object-position:center 58%;
    opacity:0;
  }
  .hero-slide.is-active{ opacity:1; }
  .hero-media.is-fading .hero-slide{ transition:opacity 1.1s ease; }
  
  /* CTA under the Why choose grid */
  .pillars-cta{ margin-top:40px; }
  
  /* footer instagram */
  .footer-ig{
    display:inline-flex; align-items:center; gap:8px;
  }
  .footer-ig svg{ width:16px; height:16px; color:var(--gold); }
  
  /* ═══════════════════════════════════════════════
     Your base — location section
     ═══════════════════════════════════════════════ */
  .base{
    padding:100px 0 104px;
    background:var(--bg-band);
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .base-head{ max-width:720px; margin:0 auto; text-align:center; }
  .base-head h2{ font-size:clamp(30px, 3.6vw, 50px); }
  .base-sub{
    margin:18px auto 0; max-width:56ch;
    font-size:16.5px; font-weight:300; line-height:1.66; color:var(--muted);
  }
  .base-visual{
    margin:44px 0 0; overflow:hidden;
    border-radius:22px; border:1px solid var(--line-soft);
    height:clamp(260px, 40vh, 430px);
    box-shadow:0 2px 10px rgba(18,18,17,.05), 0 28px 60px -26px rgba(18,18,17,.3);
  }
  .base-visual img{ width:100%; height:100%; object-fit:cover; }
  
  .base-grid{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:18px; margin-top:18px;
  }
  .base-card{
    padding:30px 26px 28px; border-radius:18px;
    background:#fff; border:1px solid var(--line-soft);
    box-shadow:0 1px 3px rgba(18,18,17,.04), 0 14px 32px -18px rgba(18,18,17,.16);
    transition:transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease, border-color .38s ease;
  }
  .base-card:hover{
    transform:translateY(-6px); border-color:var(--gold-line);
    box-shadow:0 4px 12px rgba(18,18,17,.06), 0 30px 54px -22px rgba(18,18,17,.26);
  }
  .base-ico{
    display:flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:13px;
    background:var(--gold-tint); border:1px solid var(--gold-line); color:var(--gold);
  }
  .base-ico svg{ width:23px; height:23px; }
  .base-card h3{ margin-top:20px; font-size:19px; letter-spacing:-.02em; }
  .base-card p{
    margin-top:11px; font-size:14.5px; font-weight:300;
    line-height:1.68; color:var(--muted);
  }
  
  .base-close{ margin-top:52px; text-align:center; }
  .base-close > p{
    font-family:var(--display); font-weight:600;
    font-size:clamp(19px, 2vw, 25px); letter-spacing:-.02em; color:var(--heading);
  }
  .base-actions{
    display:flex; align-items:center; justify-content:center;
    gap:26px; margin-top:26px;
  }
  .base-soft{
    font-size:13.5px; font-weight:500; color:var(--muted);
    border-bottom:1px solid var(--line);
    padding-bottom:2px; transition:color .2s ease, border-color .2s ease;
  }
  .base-soft:hover{ color:var(--gold); border-color:var(--gold-line); }
  
  @media (max-width:1080px){
    .base-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:860px){
    .base{ padding:76px 0 80px; }
    .base-visual{ height:240px; margin-top:32px; }
  }
  @media (max-width:560px){
    .base-grid{ grid-template-columns:1fr; }
    .base-actions{ flex-direction:column; gap:18px; }
  }
  
  /* ── mobile menu (hamburger, top right) ──
     The header sits on the WHITE body at mobile (hero starts below it), so the
     bars must be DARK. White bars here render invisible = looks like a blank box. */
  .mm-toggle{ display:none; flex-direction:column; gap:4.5px; width:44px; height:44px; align-items:center; justify-content:center;
    background:#fff; border:1px solid rgba(18,18,17,.16); border-radius:11px; cursor:pointer; padding:0;
    box-shadow:0 1px 3px rgba(18,18,17,.08); }
  .mm-toggle span{ display:block; width:19px; height:2px; background:#0B0B09; border-radius:2px; transition:.25s; }
  .mm-toggle:hover{ border-color:rgba(18,18,17,.34); }
  .mm-toggle:active{ background:#F6F6F5; }
  .mm-toggle.is-open span:nth-child(1){ transform:translateY(6.3px) rotate(45deg); }
  .mm-toggle.is-open span:nth-child(2){ opacity:0; }
  .mm-toggle.is-open span:nth-child(3){ transform:translateY(-6.3px) rotate(-45deg); }
  .mm-drawer{ position:absolute; top:calc(100% + 10px); right:16px; z-index:60; min-width:220px;
    background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px -20px rgba(18,18,17,.3);
    display:flex; flex-direction:column; padding:8px; }
  .mm-drawer a{ padding:12px 16px; border-radius:9px; color:var(--heading); font-size:15px; }
  .mm-drawer a:hover{ background:var(--bg-band); }
  @media (max-width:1180px){ .mm-toggle{ display:flex; } .site-header{ position:absolute; } }
  
  /* ── footer: socials row + tidy mobile ── */
  /* Instagram now sits on the logo line instead of under Contact. */
  .brand-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  /* The mobile-header rule `@media (max-width:1180px){ .wordmark{order:1} }` also
     matches the footer logo and pushed it AFTER the Instagram icon on phones and
     tablets. Keep logo-then-icon here regardless of screen width. */
  .brand-row .wordmark{ margin:0; order:0; }
  .brand-row .footer-socials{ margin-top:0; order:1; }
  .footer-socials{ display:flex; gap:10px; margin-top:6px; }
  .footer-socials .soc{ display:flex; align-items:center; justify-content:center; width:40px; height:40px;
    border-radius:11px; border:1px solid var(--line); color:var(--heading); background:#fff; transition:.2s; }
  .footer-socials .soc svg{ width:19px; height:19px; }
  .footer-socials .soc:hover{ border-color:var(--heading); transform:translateY(-1px); }
  @media (max-width:520px){
    .footer-inner{ text-align:left; }
    .footer-brand{ display:flex; flex-direction:column; align-items:flex-start; }
    .footer-brand .wordmark{ margin:0; }
    /* keep logo + Instagram side by side on phones too, not stacked */
    .brand-row{ gap:14px; align-items:center; }
    .footer-links{ gap:20px 14px; }
    .footer-links b{ margin-bottom:1px; }
    .footer-links a{ padding:3px 0; }
    .footer-socials{ margin-top:2px; }
  }
  
  /* ── mobile header: was 195px tall on a 375px screen (logo 64px + stacked search).
        Tighten it and shrink the logo so the hero starts higher. Drawer becomes a
        full-width panel flush under the bar instead of a box floating over the hero. ── */
  @media (max-width:1180px){
    /* the flex gap:32px was adding a 32px row-gap between the logo row and the
       search bar — that alone was ~1/5 of the header height */
    .header-inner{ padding-top:10px !important; padding-bottom:10px !important; row-gap:8px !important; }
    .wordmark img{ height:44px !important; }
    .searchbar{ margin-top:10px !important; }
    /* the menu should read as the white header EXPANDING DOWN — flush to the
       edges, no gap, compact rows — not a floating white block over the hero */
    .mm-drawer{
      left:0; right:0; width:auto; min-width:0;
      top:100%;
      border:none; border-top:1px solid rgba(18,18,17,.08);
      border-radius:0 0 16px 16px;
      padding:4px 8px 8px;
      box-shadow:0 14px 30px -14px rgba(18,18,17,.28);
    }
    .mm-drawer a{ padding:9px 14px; font-size:15px; border-radius:8px; }
  }
  @media (max-width:520px){
    .wordmark img{ height:40px !important; }
    .header-inner{ padding-top:8px !important; padding-bottom:8px !important; row-gap:6px !important; }
    .searchbar{ margin-top:2px !important; }
  }
  
  /* ═══════════════════════════════════════════════
     v12 fixes — 31 Jul
     ═══════════════════════════════════════════════ */
  
  /* mobile hero: compact again, carousel peeks on first paint */
  @media (max-width:1180px){
    .hero-inner{ padding-top:232px; }
  }
  @media (max-width:860px){
    .hero-inner{ padding-top:164px; padding-bottom:22px; gap:20px; }
    .hero h1{ font-size:clamp(29px, 8.4vw, 42px); }
    .hero-sub{ margin-top:14px; }
    .hero-cta{ margin-top:18px; }
    .hero-badges{ margin-top:4px; }
    .hero-badges img{ height:34px; }
  }
  
  /* floating buttons: chat pinned right, call pinned left — all screens */
  .phone-fab{
    display:flex;
    left:18px; right:auto;
  }
  .chat-fab{
    position:fixed; right:18px; bottom:18px; z-index:90;
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--gold); color:#fff; border:0; cursor:pointer; padding:0;
    box-shadow:0 6px 18px rgba(0,0,0,.28), 0 18px 40px -12px rgba(169,113,63,.55);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .chat-fab:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.3), 0 24px 48px -12px rgba(169,113,63,.6); }
  .chat-fab svg{ width:26px; height:26px; }
  
  /* v12: villas ↔ amenities gap tightened (amenities now follows villas) */
  #villas.villas{ padding-bottom:44px; }
  .amenities{ padding-top:36px; }
  @media (max-width:860px){
    #villas.villas{ padding-bottom:26px; }
    .amenities{ padding-top:22px; }
  }
  
  /* v12: mobile calendar popover — stack the two months vertically and keep
     the panel inside the viewport (was overflowing horizontally) */
  @media (max-width:860px){
    .sb-pop-cal{
      width:calc(100vw - 24px); max-width:none;
      max-height:62vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
      padding:14px 16px 16px;
    }
    .cal-months{ flex-direction:column; gap:20px; }
    .cal-month{ width:100%; }
    .cal-day{ height:38px; }
    .sb-pop-guests{ max-width:calc(100vw - 24px); }
  }
  
  /* v12.5: highlighted direct-booking line in the amenities section */
  .am-save{
    margin:18px 0 0; font-size:18px; font-weight:400; line-height:1.5;
    color:var(--heading);
  }
  .am-save .sub-dot{
    display:inline-block; position:relative; top:-3px; margin-right:10px;
    width:7px; height:7px; border-radius:50%; background:#A9713F;
  }
  .am-save em{
    font-style:normal; color:#A9713F; font-weight:500;
    text-decoration:underline; text-underline-offset:4px;
    text-decoration-thickness:1px;
  }
  
  /* v12.5: carousel cards are whole-card links now */
  a.villa-card{ display:block; color:inherit; text-decoration:none; }
  
  /* v12.6: mobile footer — tighter, deduped, readable */
  @media (max-width:860px){
    .site-footer{ padding-top:34px; }
    .footer-inner{ display:block; padding-bottom:6px; }
    .footer-brand p{ margin-top:12px; font-size:13px; line-height:1.6; max-width:none; }
    .footer-links{ grid-template-columns:1fr 1fr; gap:24px 18px; margin-top:26px; }
    .footer-links div{ gap:6px; }
    .footer-links b{ margin-bottom:4px; }
    .footer-links a{ font-size:13.5px; padding:2px 0; }
    /* Legal column is duplicated by the bottom bar — one copy is enough on a phone */
    .footer-links div:nth-child(3){ display:none; }
    .footer-base{
      flex-direction:column; align-items:flex-start; gap:8px;
      margin-top:22px; padding-top:16px; padding-bottom:26px;
    }
  }
  
  /* v12.7: footer — contact icons, centred logo at the base */
  .footer-links .contact-icons, .contact-icons{ display:flex; flex-direction:row; gap:10px; margin-top:4px; }
  .contact-icons a{
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); color:var(--muted); background:#fff;
    transition:color .2s ease, border-color .2s ease;
  }
  .contact-icons a:hover{ color:var(--heading); border-color:rgba(18,18,17,.35); }
  .contact-icons svg{ width:17px; height:17px; }
  .footer-logo-row{ display:flex; justify-content:center; padding:8px 0 20px; }
  .footer-logo-row img{ height:56px; }
  @media (max-width:860px){
    .footer-logo-row{ padding:2px 0 16px; }
    .footer-logo-row img{ height:46px; }
    .footer-base{ align-items:center; text-align:center; }
  }
  
  /* v12.8: guest-count honesty note in the search popover */
  .guest-note{
    margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line-soft);
    font-size:12.5px; font-weight:300; line-height:1.5; color:var(--muted);
    max-width:280px;
  }
  
  /* ═══ v13 — gold CTAs sitewide, card buttons, headerless villas ═══ */
  .btn-primary, .sb-go{
    background:#C9A84C; color:#141006;
    transition:background .2s ease, transform .12s ease, box-shadow .2s ease;
  }
  .btn-primary:hover, .sb-go:hover{ background:#E4C878; }
  .btn-primary:active, .sb-go:active{ transform:translateY(1px) scale(.98); }
  .phone-fab, .chat-fab{ background:rgba(201,168,76,.8); color:#ffffff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }   /* gold, a little see-through */
  .phone-fab:hover, .chat-fab:hover{ background:#E4C878; }
  .phone-fab:active, .chat-fab:active{ transform:translateY(0) scale(.96); }
  
  /* villa cards: Book now is a real gold button with press feedback */
  .villa-book{
    border-top:0; margin-top:14px; padding:12px 26px;
    width:auto; align-self:flex-start;
    justify-content:center; border-radius:999px;
    background:#C9A84C; color:#141006;
    font-size:13.5px; letter-spacing:.02em;
    transition:background .2s ease, transform .12s ease;
  }
  .villa-card:hover .villa-book, .villa-book:hover{ background:#E4C878; color:#141006; }
  .villa-book:active{ transform:translateY(1px) scale(.98); }
  
  /* card meta: larger + darker, easier to read */
  .villa-loc{ font-size:16px; color:rgba(20,20,18,.85); margin-top:7px; }
  .villa-specs li{ font-size:15px; color:rgba(20,20,18,.85); }
  .villa-specs svg{ width:16px; height:16px; color:rgba(20,20,18,.7); }
  
  /* villas section lost its header — tighten so cards lead the section */
  #villas.villas, .villas{ padding-top:34px; }
  @media (max-width:860px){
    #villas.villas, .villas{ padding-top:8px; }
  }
  
  /* v13.1: align card bottoms — price + Book now sit on one line across cards */
  a.villa-card, .villa-card{ display:flex; flex-direction:column; }
  .villa-body{ flex:1; display:flex; flex-direction:column; }
  .villa-price{ margin-top:auto; padding-top:12px; }
  
  /* ═══ v14 — promo banner (sitewide) + phone header merge ═══ */
  .promo-bar{
    position:fixed; top:0; left:0; right:0; z-index:90;
    height:34px; display:flex; align-items:center; justify-content:center;
    background:#1F3D2B; color:#F1EDE3;
    font-family:var(--sans); font-size:12.5px; font-weight:400; letter-spacing:.045em;
    padding:0 12px; text-align:center;
  }
  .promo-bar em{ font-style:normal; font-weight:600; color:#E2B77E; margin:0 5px; }
  body{ padding-top:34px; }
  .site-header{ top:34px; }
  
  @media (max-width:860px){
    .promo-bar{ height:32px; font-size:11px; letter-spacing:.02em; }
    body{ padding-top:32px; }
    .site-header{ top:32px; }
  
    /* phone header: search pill sits NEXT to the logo, one row */
    .header-inner{ flex-wrap:nowrap; gap:8px; padding-top:9px; padding-bottom:9px; }
    .wordmark{ order:1; flex:0 0 auto; }
    .wordmark img{ height:36px; }
    .header-actions{ display:none; }
    .site-header .searchbar{
      order:2; flex:1 1 auto; width:auto; min-width:0;
      margin:0 !important; position:static; transform:none;
    }
    .site-header .sb-field{ flex:1; min-width:0; padding:0 8px; height:40px; }
    .site-header .sb-label{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .site-header .sb-ico{ width:13px; height:13px; }
    .site-header .sb-go{ width:36px; height:36px; min-width:36px; }
    /* the pill's popovers would anchor to the narrow pill — pin to viewport */
    .site-header .sb-pop{
      position:fixed; left:12px; right:12px; top:92px;
      transform:none; width:auto; max-width:none;
    }
    /* pill already lives in the fixed header — no scroll re-pinning needed */
    .scrolled .searchbar{ position:static; top:auto; left:auto; right:auto; box-shadow:none; }
    /* villa list keeps its pin (its pill sits in the hero) — under the banner */
    body.mla-list .scrolled .searchbar{ position:fixed; top:40px; left:14px; right:14px; }
  }
  
  /* v14.1: tiny phones — banner keeps to one line */
  @media (max-width:520px){
    .promo-bar .pb-tail{ display:none; }
  }
  
  /* v14.2: MAIN page mobile — bar expands full-width when scrolled, shrinks back */
  @media (max-width:860px){
    .site-header.scrolled .searchbar{
      position:fixed; top:36px; left:10px; right:10px;
      width:auto; margin:0; z-index:85;
      box-shadow:0 6px 18px rgba(0,0,0,.22);
    }
  }
  
  /* v15 — Beyond the villa + Miami travel journal */
  .beyond, .journal{ padding:64px 0 10px; }
  .beyond-h{ font-size:clamp(26px,2.6vw,38px); margin-bottom:26px; }
  .beyond-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .beyond-card{ display:block; color:inherit; }
  .beyond-card img{ width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:var(--r-card); }
  .beyond-body h3{ font-size:22px; margin:14px 0 6px; }
  .beyond-body p{ font-size:15px; font-weight:300; color:var(--muted); margin-bottom:2px; }
  .journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .journal-card{ display:flex; flex-direction:column; color:inherit; }
  .journal-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-card); }
  .journal-card h3{ font-size:19px; line-height:1.25; margin:14px 0 8px; }
  .journal-card p{ font-size:14.5px; font-weight:300; color:var(--muted); flex:1; }
  .journal .villa-book, .beyond .villa-book{ align-self:flex-start; margin-top:12px; }
  @media (max-width:860px){
    .beyond-grid, .journal-grid{ grid-template-columns:1fr; }
    .beyond, .journal{ padding:40px 0 6px; }
  }
  
  /* v15.1 — hamburger nav */
  .nav-burger{
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
    color:#fff; cursor:pointer; backdrop-filter:blur(8px);
  }
  .nav-burger svg{ width:20px; height:20px; }
  .scrolled .nav-burger{ background:rgba(255,255,255,.1); }
  .header-actions{ position:relative; }
  .nav-panel2{
    position:absolute; top:calc(100% + 12px); right:0; z-index:101;
    min-width:230px; background:#fff; border-radius:18px;
    border:1px solid rgba(18,18,17,.08);
    box-shadow:0 24px 60px -20px rgba(18,18,17,.35);
    padding:10px; display:flex; flex-direction:column;
  }
  .nav-panel2 a{
    padding:11px 16px; border-radius:12px; color:#141412;
    font-size:15px; font-weight:400;
  }
  .nav-panel2 a:hover{ background:#F6F6F5; }
  .nav-panel2 .np-phone{
    margin-top:6px; border-top:1px solid rgba(18,18,17,.08);
    border-radius:0 0 12px 12px; color:#8a6d3b; font-weight:500;
  }
  .nav-panel2[hidden]{ display:none !important; }
  
  
  /* v15.3 — proof strip: platform stats underscored (Andrew doc-3) */
  .proofbar .proof-item{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
  
  /* v15.4 — mobile: the hamburger must actually show (header-actions was hidden
     wholesale for the old phone pill). Phone number lives in the menu + floating
     call button on mobile; the pill stays desktop-only. */
  @media (max-width:860px){
    .header-actions{ display:flex !important; }
    .header-actions .header-phone{ display:none !important; }
  }
  
  
  /* ═══ v15.5 — doc-4 batch ═══ */
  /* guests popover CTA */
  .sb-cta{ display:block; width:100%; margin-top:14px; padding:12px 0; border:0; border-radius:999px;
    background:#C9A84C; color:#141006; font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
    transition:background .2s ease; }
  .sb-cta:hover{ background:#E4C878; }
  /* hero CTA hides while the guest selector is open (it was mistaken for the search button) */
  .sb-guests-open .hero-cta{ visibility:hidden; }
  /* proof strip stats are gold links now */
  .proofbar .proof-item{ text-decoration:none; }
  .proofbar a.proof-item{ white-space:nowrap; cursor:pointer; }
  /* airbnb credibility popup */
  .ab-modal{ position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:20px; }
  .ab-modal[hidden]{ display:none !important; }
  .ab-back{ position:absolute; inset:0; background:rgba(12,12,11,.52); backdrop-filter:blur(8px); }
  .ab-card{
    position:relative; background:#fff; width:min(400px, calc(100vw - 32px));
    border-radius:22px; padding:36px 28px 26px;
    box-shadow:0 28px 80px -24px rgba(18,18,17,.5);
    text-align:center; font-family:'Instrument Sans',sans-serif;
    border:1px solid rgba(18,18,17,.06);
  }
  .ab-x{
    position:absolute; top:14px; right:14px;
    width:32px; height:32px; border:0; border-radius:50%;
    background:#F4F3F0; color:#121211; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center;
  }
  .ab-x svg{ width:12px; height:12px; }
  .ab-x:hover{ background:#EBEAE6; }
  .ab-logo{
    width:72px; height:72px; border-radius:50%; background:#0B0B09;
    object-fit:contain; padding:13px; margin:0 auto;
    box-shadow:0 0 0 6px #F7F6F4;
  }
  .ab-name{ margin-top:14px; }
  .ab-name b{
    display:block; font-family:'Figtree',sans-serif; font-weight:600;
    font-size:22px; letter-spacing:-.02em; color:#121211; line-height:1.15;
  }
  .ab-badge{
    display:inline-block; margin-top:10px; padding:5px 11px;
    border-radius:999px; background:#F7F6F4; border:1px solid rgba(18,18,17,.08);
    font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
    color:rgba(18,18,17,.62);
  }
  .ab-stats{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:0;
    margin:22px 0 0; padding:16px 0;
    border-top:1px solid rgba(18,18,17,.08); border-bottom:1px solid rgba(18,18,17,.08);
  }
  .ab-stats div{ padding:0 8px; }
  .ab-stats div + div{ border-left:1px solid rgba(18,18,17,.1); }
  .ab-stats div b{ display:block; font-size:20px; font-weight:600; color:#121211; letter-spacing:-.02em; }
  .ab-stats div span{ display:block; margin-top:3px; font-size:11px; font-weight:400; letter-spacing:.04em; color:rgba(18,18,17,.5); }
  .ab-line{
    margin:20px 0 0; font-size:15.5px; font-weight:500; line-height:1.45; color:#121211;
  }
  .ab-offer{
    margin:18px 0 0; padding:14px 16px 12px;
    background:linear-gradient(180deg, #FBF8F1, #F7F2E6);
    border:1px solid rgba(201,168,76,.28); border-radius:14px;
  }
  .ab-offer > span{
    display:block; font-size:12.5px; color:rgba(18,18,17,.55); letter-spacing:.02em;
  }
  .ab-save{ margin:4px 0 0; font-size:15px; font-weight:500; color:#121211; }
  .ab-save b{ font-size:22px; font-weight:600; color:#C9A84C; letter-spacing:-.02em; padding:0 3px; }
  .ab-link{
    display:inline-flex; align-items:center; justify-content:center;
    margin-top:18px; padding:10px 16px; border-radius:999px;
    border:1px solid rgba(18,18,17,.14); color:#121211;
    font-size:13px; font-weight:500; text-decoration:none;
  }
  .ab-link:hover{ background:#F7F6F4; border-color:rgba(18,18,17,.22); }
  /* the green line opens the popup */
  .promo-bar{ cursor:pointer; }
  @media (max-width:860px){
    /* bigger search glass in the bar */
    .sb-go svg, .site-header .sb-go svg{ width:19px !important; height:19px !important; }
    /* home only: bar leaves the header, sits under it edge to edge */
    body:not(.mla-list) .site-header .searchbar{
      position:fixed; top:102px; left:10px; right:10px; order:0; width:auto; flex:none;
      margin:0; z-index:70; box-shadow:0 10px 26px rgba(0,0,0,.18);
    }
    body:not(.mla-list) .site-header .sb-pop{ top:164px !important; }
    body:not(.mla-list) .hero .hero-inner{ padding-top:178px !important; }
    body:not(.mla-list) .hero{ min-height:560px; }
  }
  
  /* v15.5b — the picked range must be clearly visible between the endpoints */
  .cal-day.in-range{ background:rgba(201,168,76,.28) !important; color:#141006 !important; border-radius:0 !important; }
  
  /* v15.5c — mobile search glass: padding + a global max-width rule were squeezing it to 6px */
  @media (max-width:860px){
    .sb-go{ padding:0 !important; justify-content:center !important; }
    .sb-go svg{ max-width:none !important; }
  }
  
  
  /* ═══ v15.6 — doc-5 batch ═══ */
  /* mobile home: bar rides from under the header up to the very top on scroll */
  @media (max-width:860px){
    body:not(.mla-list) .site-header .searchbar{ transition:top .25s ease; }
    body:not(.mla-list).home-sb-stuck .site-header .searchbar{ top:36px; }
  }
  
  /* v15.7 — mobile home: first section was too tall (155px dead air between CTA and badges) */
  @media (max-width:860px){
    body:not(.mla-list) .hero{ min-height:480px; }
  }
  
  /* v15.8 — never round the cell; the <span> is the only circle */
  .cal-day, .cal-day.in-range, .cal-day.edge,
  .cal-day.edge.start, .cal-day.edge.end{
    border-radius:0 !important; background:transparent !important;
  }
  .cal-day.in-range{ color:#141412 !important; }
  .cal-day.edge span{ background:#0B0B09 !important; color:#fff !important; }
  .cal-day.past{ color:#8B8880 !important; }
  
  /* ═══════════════════════════════════════════════
     Homepage, desktop: the hero video runs down behind the top of the villa
     cards; the rating line sits on the video as a glass pill; 5 villas per row.
     Only the homepage uses these modifier classes (property-list-new keeps the
     plain .proofbar). Below 1181px nothing changes.
     ═══════════════════════════════════════════════ */
  @media (min-width:1181px){
    :root{
      --row-max: 100vw;                                              /* villa row fills the whole screen width: biggest cards (his call, 8 Oct) */
      --cw: calc((min(100vw, var(--row-max)) - 2 * var(--gutter) - 80px) / 5);   /* one card's width */
      --pill-h: 44px;
      --ov: calc(var(--pill-h) + 22px + var(--cw) * .45 - 38px);     /* video ends ~1 cm above the 60% line */
    }
    .hero--stack{ height:calc(clamp(430px, 54vh, 580px) + var(--ov)); }
    .hero--stack .hero-inner{ padding-bottom:calc(40px + var(--ov)); }
    .hero--stack .hero-media video{ object-position:center 55%; }
    .hero--stack .hero-scrim{
      background:
        linear-gradient(rgba(10,10,9,.20), rgba(10,10,9,.20)),                        /* video 20% darker, same as the phone (9 Oct) */
        linear-gradient(to right, rgba(10,10,9,.86) 0%, rgba(10,10,9,.55) 42%, rgba(10,10,9,.2) 75%, rgba(10,10,9,.34) 100%),
        linear-gradient(to bottom, rgba(10,10,9,.66) 0%, rgba(10,10,9,.05) 34%, rgba(10,10,9,.28) 62%, rgba(10,10,9,.62) 100%);
    }

    /* rating line on the video */
    .proofbar--onvideo{
      position:relative; z-index:3;
      margin-top:calc(-1 * var(--ov));
      background:none; border:0;
    }
    .proofbar--onvideo .proofbar-inner{
      width:max-content; max-width:calc(100% - 2 * var(--gutter));
      height:var(--pill-h); padding:0 26px; gap:0 20px;
      border-radius:999px;
      background:rgba(14,14,13,.38);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
      box-shadow:0 10px 30px -14px rgba(0,0,0,.6);
      color:rgba(255,255,255,.78);
    }
    .proofbar--onvideo .proof-stars svg{ color:var(--gold-on-dark); }
    .proofbar--onvideo .proof-tag{ color:#fff; }
    .proofbar--onvideo .proof-sep{ background:rgba(255,255,255,.22); }
    .proofbar--onvideo .proof-ico{ color:var(--gold-on-dark); }
    .proofbar--onvideo .proof-link{ color:rgba(255,255,255,.86); border-bottom-color:rgba(212,165,116,.5); }
    .proofbar--onvideo .proof-link b{ color:var(--gold-on-dark); }
    .proofbar--onvideo .proof-link i{ color:rgba(255,255,255,.6); opacity:1; }
    .proofbar--onvideo .proof-link:hover,
    .proofbar--onvideo .proof-link:hover b{ color:#fff; border-bottom-color:#fff; }

    /* villas start on the video */
    .villas--onvideo{ position:relative; z-index:3; padding-top:22px; }
    #villas.villas--onvideo{ padding-top:49px; }   /* 4 mm lower on the video (8 Oct); the id beats the old #villas.villas 34px rule */
    .villas--onvideo > .container{ max-width:var(--row-max); }
    .villas--onvideo .villa-card{ flex:0 0 calc((100% - 80px) / 5); }
    .villas--onvideo .villa-media{
      aspect-ratio:3 / 2;                  /* the villa photos are 900x600 — show them whole */
      border-color:rgba(255,255,255,.14);
      box-shadow:0 24px 46px -24px rgba(0,0,0,.6);
    }
    .villas--onvideo .villa-body h3{ font-size:17px; }
    .villas--onvideo .side-arrow{ top:calc(var(--cw) / 3); }      /* middle of a 3:2 photo */
    /* place + bedrooms/baths sit low on the photo as quiet plain text (no boxes); under the photo: name, then price + Book now */
    .villas--onvideo .villa-card{ position:relative; container-type:inline-size; }
    .villas--onvideo .villa-media::after{
      content:''; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1; pointer-events:none;
      background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.42));
    }
    .villas--onvideo .villa-loc, .villas--onvideo .villa-specs{
      position:absolute; top:0; left:12px; right:12px; z-index:2; margin:0; pointer-events:none;
      text-shadow:0 1px 3px rgba(0,0,0,.55);
    }
    /* % margins are % of the card WIDTH, so this lands on the bottom of the 3:2 photo */
    .villas--onvideo .villa-loc{ margin-top:calc(100% * 2 / 3 - 44px); font-size:13px; font-weight:500; color:rgba(255,255,255,.92); }
    .villas--onvideo .villa-specs{ margin-top:calc(100% * 2 / 3 - 23px); display:flex; gap:12px; }
    .villas--onvideo .villa-specs li{ gap:5px; padding:0; font-size:12px; line-height:1; color:rgba(255,255,255,.82); background:none; }
    .villas--onvideo .villa-specs svg{ width:12px; height:12px; color:rgba(255,255,255,.82); }
    .villas--onvideo .villa-body{
      display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto 1fr;
      column-gap:10px; padding-top:11px;
    }
    .villas--onvideo .villa-title-row{ grid-column:1 / -1; }
    .villas--onvideo .villa-price{ grid-column:1; align-self:center; margin:9px 0 0; padding:0; border:0; white-space:nowrap; }
    .villas--onvideo .villa-card .villa-book{ grid-column:2; align-self:center; margin:9px 0 0; padding:0 14px; height:34px; font-size:12.5px; }
    @container (max-width:250px){
      .villas--onvideo .villa-price span{ display:none; }
    }
  }

/* phones: date pickers are one scrolling list of months (Airbnb) — arrows hidden, "Clear dates" stays pinned */
@media (max-width:860px){
  .sb-pop-cal .cal-head{ position:sticky; top:-14px; z-index:5; background:#fff; padding:6px 0; }
  .sb-pop-cal .cal-nav{ visibility:hidden; }
}

/* homepage on short desktop windows (e.g. 1280x720 laptops): a shorter hero so the whole villa card — price and
   Book now included — is on the first screen */
@media (min-width:1181px) and (max-height:820px){
  .hero--stack{ height:calc(372px + var(--ov)); }
}


/* 10 Oct: homepage platform badges sit under "Explore all villas" (they were on the right of the hero) */
.hero-copy .hero-badges{ margin-top:26px; }
@media (min-width:1181px){
  .hero-copy .hero-badges{ margin-top:30px; }
  .hero-copy .hero-badges li{ padding:0 26px; }
  .hero-copy .hero-badges li:first-child{ padding-left:0; }
  .hero-copy .hero-badges img{ height:44px; }
}
/* short desktop windows (1280x720 laptops): smaller marks + tighter spacing so the hero still fits above the cards */
@media (min-width:1181px) and (max-height:820px){
  .hero--stack .hero-inner{ padding-bottom:calc(4px + var(--ov)); }
  .hero--stack h1{ font-size:48px; }
  .hero--stack .hero-sub{ margin-top:12px; }
  .hero--stack .hero-cta{ margin-top:18px; }
  .hero-copy .hero-badges{ margin-top:18px; }
  .hero-copy .hero-badges li{ padding:0 20px; }
  .hero-copy .hero-badges img{ height:34px; }
}
/* tablets / small laptops (768-1180): the hero grows to fit its content — the badges were cut off at the bottom
   (e.g. 1024x768) because the hero had a fixed height */
@media (min-width:768px) and (max-width:1180px){
  .hero.hero--stack{ height:auto; min-height:clamp(430px, 54vh, 580px); }
}