/* ============================================================
   Storybook Vacation Homes — site.css
   Design system carried from Demo B ("The Magic Marketplace",
   daylight edition) and extended for the multi-page build:
   video heroes, galleries, guides, news, FAQ, tickets.
   ============================================================ */
:root{
  --void:#FBF8F3;
  --night:#FFFFFF;
  --night-2:#F5F0FB;
  --night-3:#EBE2F7;
  --ink-night:#0C0518;
  --mist:#2A1650;
  --mist-2:#54418A;
  --mist-3:#6C5E92;
  --magic:#7B34D6;
  --magic-2:#9333EA;
  --magic-deep:#5B21B6;
  --gold:#E9B84F;
  --gold-2:#82601C;
  --gold-deep:#C0913A;
  --aqua:#0E7490;
  --line:rgba(123,52,214,.24);
  --line-gold:rgba(192,145,58,.45);
  --line-2:rgba(42,22,80,.14);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  --shadow:0 24px 60px rgba(59,29,110,.16);
  --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--sans);background:var(--void);color:var(--mist);
  font-size:1rem;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(123,52,214,.28) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(147,51,234,.24) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 45%, rgba(192,145,58,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 72%, rgba(123,52,214,.18) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 60%, rgba(168,85,247,.24) 50%, transparent 51%);
  background-size:900px 700px;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:var(--sans)}
.container{max-width:1240px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
.container.narrow{max-width:900px}
h1,h2{font-family:var(--serif);font-weight:600;line-height:1.1;color:var(--mist)}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
h1 em,h2 em{font-style:italic;color:var(--gold-2);font-weight:500}
.kicker{font-size:.7rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--magic);margin-bottom:14px}
.skip{position:absolute;left:-9999px;top:0;background:var(--magic-deep);color:#fff;padding:12px 20px;z-index:300;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.section-pad{padding:84px 0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;cursor:pointer;text-decoration:none;
  font-weight:700;font-size:.88rem;padding:14px 26px;border-radius:999px;border:1px solid var(--gold);
  color:var(--mist);background:var(--gold);transition:.22s;min-height:44px;
}
.btn:hover{background:#DFA83C;border-color:#DFA83C}
.btn.ghost{background:transparent;color:var(--gold-2);border-color:var(--gold-deep)}
.btn.ghost:hover{background:var(--gold);color:var(--mist)}
.btn.magic{background:var(--magic);border-color:var(--magic);color:#fff}
.btn.magic:hover{background:var(--magic-deep);box-shadow:0 8px 30px rgba(168,85,247,.35)}
.btn.quiet{background:transparent;border-color:var(--line-2);color:var(--mist-2)}
.btn.quiet:hover{border-color:var(--mist-2);color:var(--mist)}
.btn.ondark{background:rgba(251,248,243,.14);border-color:rgba(251,248,243,.4);color:#FBF8F3;backdrop-filter:blur(8px)}
.btn.ondark:hover{background:rgba(251,248,243,.28)}

/* ————— header ————— */
header.site{position:sticky;top:0;z-index:100;background:rgba(251,248,243,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:78px;gap:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 1px var(--line),0 0 16px rgba(168,85,247,.3);background:#150A2A}
.brand .mark img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.brand .words{line-height:1.05}
.brand .name{font-family:var(--serif);font-size:1.24rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);display:block}
.brand .tag{font-size:.52rem;letter-spacing:.4em;text-transform:uppercase;color:var(--magic);font-weight:700}
nav.main{display:flex;gap:2px;align-items:center}
nav.main > a, nav.main .navgroup > a{
  text-decoration:none;font-size:.85rem;font-weight:600;color:var(--mist-2);transition:color .2s;
  padding:10px 9px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;
  /* A nav label is one phrase. Without this, "Plan & Play" and "Park Guides" break
     across two lines as soon as the row is tight, which is what adding Concierge
     did at 1440px: the labels wrapped mid-phrase and the header read as broken.
     Measured after the change, the row needs 1115px against a 1240px container. */
  white-space:nowrap;
}
nav.main > a:hover, nav.main .navgroup > a:hover{color:var(--gold-2)}
nav.main > a.on, nav.main .navgroup > a.on{color:var(--magic);background:var(--night-2)}
.navgroup{position:relative}
.navgroup .caret{font-size:.6rem;color:var(--mist-3)}
.dropdown{
  /* no hover gap: panel starts at trigger's bottom edge; padding is the invisible bridge */
  position:absolute;top:100%;left:-10px;min-width:250px;padding:10px 0 0;
  background:transparent;border:none;box-shadow:none;z-index:120;
  display:block;visibility:hidden;opacity:0;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .3s;
}
.navgroup:hover .dropdown,.navgroup:focus-within .dropdown{visibility:visible;opacity:1;transform:none;transition-delay:0s,0s,0s}
.dd-panel{background:var(--night);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);padding:10px}
.dropdown a{display:block;text-decoration:none;font-size:.85rem;font-weight:600;color:var(--mist-2);padding:9px 12px;border-radius:8px}
.dropdown a:hover{background:var(--night-2);color:var(--mist)}
.dropdown .dd-label{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2);font-weight:700;padding:8px 12px 4px}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-right .phone{font-size:.85rem;font-weight:600;color:var(--mist-2);text-decoration:none;white-space:nowrap}
.nav-right .phone:hover{color:var(--gold-2)}
.nav-right .btn{padding:11px 20px;font-size:.8rem;white-space:nowrap}
.hamburger{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;cursor:pointer;padding:10px 12px;min-width:44px;min-height:44px}
.hamburger span{display:block;width:20px;height:2px;background:var(--mist);margin:4px 0;border-radius:2px}

/* ————— breadcrumbs ————— */
.crumbs{font-size:.78rem;color:var(--mist-3);padding:18px 0 0;position:relative;z-index:1}
.crumbs a{color:var(--mist-3);text-decoration:none}
.crumbs a:hover{color:var(--gold-2)}
.crumbs .sep{margin:0 8px;color:var(--line-gold)}

/* ————— home hero ————— */
.hero{position:relative;overflow:hidden;padding:74px 0 0;background:linear-gradient(180deg,#0C0518,#180C30 70%,#1C0F37)}
.hero .hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero .hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,5,24,.78) 0%,rgba(12,5,24,.44) 38%,rgba(12,5,24,.5) 66%,rgba(16,7,34,.9) 100%),
  radial-gradient(ellipse at 50% 42%, rgba(12,5,24,.35), rgba(12,5,24,0) 60%);
}
.hero h1,.hero .kicker{text-shadow:0 2px 26px rgba(7,3,15,.7)}
.hero .sub{text-shadow:0 1px 16px rgba(7,3,15,.75)}
@media (prefers-reduced-motion: reduce){.hero .hero-bg{display:none}}
#fwCanvas{position:absolute;inset:0;z-index:0;width:100%;height:100%}
@media (prefers-reduced-motion: reduce){#fwCanvas{display:none}}
.hero .container{text-align:center;z-index:2}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);max-width:22ch;margin:0 auto;color:#F4EDFF}
.hero h1 em{color:var(--gold)}
.hero .sub{color:#B9A8E0;max-width:56ch;margin:18px auto 34px;font-size:1.02rem;font-weight:400}
/* Positioning box for the search bar + its calendar popover. The popover is a sibling
   of the form (not a child) so the card's overflow:hidden cannot clip it. */
.search-wrap{position:relative;z-index:3;max-width:860px;margin:0 auto}
.search-card{
  position:relative;background:var(--night-2);
  border:1px solid var(--line);border-radius:calc(var(--r) + 6px);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr 1fr 1fr auto;overflow:hidden;
}
.sc-field{padding:18px 22px;text-align:left;border-right:1px solid var(--line-2)}
.sc-field label{display:block;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2);font-weight:700;margin-bottom:6px}
.sc-field input,.sc-field select{
  width:100%;background:transparent;border:none;color:var(--mist);font-family:var(--sans);
  font-size:.98rem;font-weight:600;
}
.sc-field input:focus,.sc-field select:focus{outline:none}
/* Arrival/Departure: buttons that open the range calendar, styled to read exactly like
   the neighbouring select field. */
.sc-datebtn{-webkit-appearance:none;appearance:none;margin:0;border:none;border-right:1px solid var(--line-2);
  background:transparent;font-family:var(--sans);cursor:pointer;width:100%;display:block}
.sc-datebtn .sc-lbl{display:block;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2);font-weight:700;margin-bottom:6px}
.sc-datebtn .sc-val{display:block;font-size:.98rem;font-weight:600;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-datebtn .sc-val.is-empty{color:var(--mist-3)}
.sc-datebtn:hover .sc-val{color:var(--magic-2)}
.sc-datebtn[aria-expanded="true"]{background:var(--night)}
.sc-datebtn:focus-visible{outline:2px solid var(--magic);outline-offset:-2px}
.search-card .btn{border-radius:0;height:100%;padding-inline:34px;font-size:.92rem}
/* Range calendar — reuses the villa booking card's .bk-* day styling so the look is
   identical, presented as a centred modal on a dim scrim. A modal (rather than a
   dropdown) always fits: the hero clips overflow and leaves little room below the bar. */
.sc-cal-backdrop{position:fixed;inset:0;z-index:190;background:rgba(12,5,24,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sc-cal-backdrop[hidden]{display:none}
.sc-cal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:200;
  width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--night);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
  box-shadow:0 30px 90px rgba(24,12,48,.45);padding:20px 22px 18px;text-align:left}
.sc-cal[hidden]{display:none}
/* Flexible-dates selector inside the calendar modal. */
.sc-cal-flex{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.sc-flex-lbl{font-size:.74rem;font-weight:700;color:var(--mist-2)}
.sc-flex-opts{display:inline-flex;gap:2px;background:var(--night-2);border:1px solid var(--line-2);border-radius:999px;padding:3px}
.sc-flex{border:none;background:transparent;color:var(--mist-2);font-family:var(--sans);font-size:.76rem;font-weight:700;cursor:pointer;padding:6px 13px;border-radius:999px;min-height:32px}
.sc-flex:hover{color:var(--mist)}
.sc-flex.on{background:var(--magic);color:#fff}
.sc-cal-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.sc-cal-nights{font-size:.8rem;font-weight:700;color:var(--gold-2);letter-spacing:.01em}
.sc-cal-actions{display:flex;align-items:center;gap:4px}
.sc-cal-clear{background:none;border:none;color:var(--mist-3);font-size:.78rem;cursor:pointer;text-decoration:underline;padding:8px 6px}
.sc-cal-clear:hover{color:var(--mist-2)}
.sc-cal-done{background:var(--magic);color:#fff;border:none;border-radius:999px;padding:9px 22px;font-weight:700;font-size:.82rem;cursor:pointer}
.sc-cal-done:hover{background:var(--magic-2)}
.hero .assure{position:relative;z-index:2;margin:20px auto 0;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#8F7BC0}
.hero .assure b{color:var(--gold)}
.hero .assure .sep{margin:0 12px;color:var(--magic-2)}
.hero-sil{position:relative;z-index:1;margin-top:34px;pointer-events:none}
.hero-sil svg{width:100%;height:auto;display:block}

/* ————— toolbar + chips + villa grid ————— */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:54px 0 26px}
.toolbar .count{font-size:.95rem;color:var(--mist-2)}
.toolbar .count b{color:var(--gold-2);font-weight:800}
.toolbar select{
  background:var(--night-2);border:1px solid var(--line-2);border-radius:10px;color:var(--mist);
  padding:12px 14px;font-family:var(--sans);font-size:.88rem;font-weight:600;min-height:44px;
}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.chip{
  border:1px solid var(--line-2);border-radius:999px;background:var(--night);color:var(--mist-2);
  padding:10px 20px;font-size:.84rem;font-weight:600;cursor:pointer;transition:.2s;min-height:44px;
}
.chip:hover{border-color:var(--magic-2);color:var(--mist)}
.chip.on{background:var(--magic);border-color:var(--magic);color:#fff}
/* Availability banner shown when the collection is filtered to a searched date range. */
.avail-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 22px;padding:12px 18px;
  border:1px solid var(--line-gold);border-radius:12px;background:var(--night-2);
  font-size:.9rem;color:var(--mist-2)}
.avail-note b{color:var(--gold-2);font-weight:800}
.avail-note a{color:var(--magic);font-weight:700;text-decoration:none}
.avail-note a:hover{text-decoration:underline}
/* Per-card note when a flexible-date search matched a villa on nearby dates. */
.card-altdate{margin:0 0 12px;font-size:.78rem;font-weight:700;color:var(--gold-2);letter-spacing:.01em}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{
  background:var(--night);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;
}
.card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--shadow)}
.card .ph{position:relative;aspect-ratio:5/3.4;background:var(--night-3);overflow:hidden;display:block}
.card .ph img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s,transform .8s}
.card .ph img.loaded{opacity:1}
.card:hover .ph img{transform:scale(1.05)}
.card .badge{
  position:absolute;top:14px;left:14px;z-index:2;background:rgba(12,5,24,.78);backdrop-filter:blur(6px);
  border:1px solid var(--line-gold);color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.08em;
  padding:6px 12px;border-radius:999px;
}
.card .filmtag{
  position:absolute;bottom:14px;right:14px;z-index:2;background:rgba(12,5,24,.72);backdrop-filter:blur(6px);
  color:#F4EDFF;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(199,139,252,.4);
}
.card .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .rowline{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card h3{font-family:var(--serif);font-size:1.42rem;font-weight:700;line-height:1.15}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--magic-deep)}
.card .rate{font-size:.86rem;font-weight:700;color:var(--gold-2);white-space:nowrap}
.card .where{font-size:.8rem;color:var(--mist-3);letter-spacing:.04em}
.card .chips-mini{display:flex;gap:8px;flex-wrap:wrap}
.card .chips-mini span{font-size:.74rem;font-weight:600;color:var(--mist-2);background:var(--night-2);border:1px solid var(--line-2);border-radius:8px;padding:5px 10px}
.card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2)}
.card .from{font-size:.82rem;color:var(--mist-3)}
.card .from b{display:block;font-size:1.2rem;color:var(--mist);font-weight:800}
.card .btn{padding:11px 20px;font-size:.82rem}
.grid-note{margin-top:30px;text-align:center;color:var(--mist-3);font-size:.85rem}
.grid-note a{color:var(--magic-2)}

/* ————— generic band sections ————— */
.band{background:var(--night-2);border-block:1px solid var(--line)}
.band-dark{background:linear-gradient(180deg,#0C0518,#1C0F37);color:#E9DFFB;border-block:1px solid var(--line)}
.band-dark h2,.band-dark h3{color:#F4EDFF}
.band-dark h2 em{color:var(--gold)}
.band-dark p{color:#B9A8E0}
.center{text-align:center}
.lede{color:var(--mist-2);max-width:62ch;margin:14px auto 0}
.band-dark .lede{color:#B9A8E0}

/* ————— film rail (home) ————— */
.film-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.film-tile{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-night);aspect-ratio:16/9;display:block;text-decoration:none;border:1px solid rgba(199,139,252,.25)}
.film-tile img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform .7s,opacity .4s}
.film-tile:hover img{transform:scale(1.05);opacity:1}
.film-tile .ft-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(12,5,24,.88))}
.film-tile .ft-label{position:absolute;left:18px;right:18px;bottom:14px;color:#F4EDFF}
.film-tile .ft-label b{font-family:var(--serif);font-size:1.3rem;display:block}
.film-tile .ft-label span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#C7A9F5}
.film-tile .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:rgba(233,184,79,.92);display:flex;align-items:center;justify-content:center;color:#150A2A;
  font-size:1.2rem;box-shadow:0 8px 30px rgba(0,0,0,.4);transition:transform .25s;
}
.film-tile:hover .play{transform:translate(-50%,-50%) scale(1.1)}

/* ————— property page: video hero ————— */
.vhero{position:relative;background:var(--ink-night);overflow:hidden}
.vhero .media{position:relative;height:min(82vh,760px);min-height:480px}
.vhero video,.vhero .media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vhero .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,5,24,.35) 0%,transparent 30%,transparent 55%,rgba(12,5,24,.92) 100%)}
.vhero .content{position:absolute;left:0;right:0;bottom:0;padding:0 0 42px;color:#F4EDFF}
.vhero .kicker{color:var(--gold)}
.vhero h1{color:#F4EDFF;font-size:clamp(2.2rem,5vw,3.8rem);max-width:18ch}
.vhero .meta{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 22px}
.vhero .meta span{font-size:.78rem;font-weight:700;letter-spacing:.06em;background:rgba(251,248,243,.12);border:1px solid rgba(251,248,243,.25);border-radius:999px;padding:7px 14px;backdrop-filter:blur(8px)}
.vhero .actions{display:flex;gap:12px;flex-wrap:wrap}
/* inline film theater (correct aspect, un-cropped) */
.filmbox{position:relative;aspect-ratio:16/9;background:#0C0518;border-radius:var(--r);overflow:hidden;border:1px solid rgba(199,139,252,.3);box-shadow:var(--shadow)}
.filmbox video{width:100%;height:100%;display:block;object-fit:contain;background:#0C0518}
.filmbox.playing .play-big{display:none}
.filmbox-note{font-size:.8rem;color:var(--mist-3);font-style:italic;margin:10px 2px 4px}
.play-big{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:14px;background:none;border:none;cursor:pointer;color:#F4EDFF;
}
.play-big .pb-ring{
  width:96px;height:96px;border-radius:50%;background:rgba(233,184,79,.94);color:#150A2A;
  display:flex;align-items:center;justify-content:center;font-size:2rem;padding-left:6px;
  box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 0 rgba(233,184,79,.55);
  animation:pulse 2.2s infinite;transition:transform .25s;
}
.play-big:hover .pb-ring{transform:scale(1.08)}
.play-big .pb-label{font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 2px 14px rgba(7,3,15,.8)}
@keyframes pulse{0%{box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 0 rgba(233,184,79,.55)}70%{box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 26px rgba(233,184,79,0)}100%{box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 0 rgba(233,184,79,0)}}
@media (prefers-reduced-motion: reduce){.play-big .pb-ring{animation:none}}
.vhero.playing .play-big{display:none}
.vhero.playing .grad{background:linear-gradient(180deg,transparent 78%,rgba(12,5,24,.55));pointer-events:none}
.vhero.playing .content{opacity:0;pointer-events:none;transition:opacity .4s}
.vhero .soundtip{position:absolute;right:26px;bottom:26px;z-index:5}
.vhero .soundtip button{
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(251,248,243,.4);cursor:pointer;
  background:rgba(12,5,24,.6);color:#F4EDFF;font-size:1.1rem;backdrop-filter:blur(8px);transition:.2s;
}
.vhero .soundtip button:hover{background:rgba(123,52,214,.7)}
.filmnote{background:var(--ink-night);color:#8F7BC0;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:12px 20px;border-top:1px solid rgba(199,139,252,.2)}
.filmnote b{color:var(--gold)}

/* ————— property page: body ————— */
.p-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;padding:54px 0 80px}
.p-cols > *{min-width:0}
.p-info h2{font-size:1.7rem;margin-bottom:14px}
.p-info .desc{color:var(--mist-2);font-size:1rem;margin-bottom:26px;max-width:62ch}
/* Hostaway description copy: paragraphs, bold section labels, and bullet lists. */
/* Long Hostaway copy is clamped so the film + gallery are not pushed far down the page;
   villa.js adds .clamp and reveals the toggle only when the copy actually overflows. */
.p-info .desc-wrap{position:relative;overflow:hidden}
.p-info .desc-wrap.clamp{max-height:360px}
.p-info .desc-wrap.clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;background:linear-gradient(rgba(251,248,243,0),var(--void));pointer-events:none}
.p-info .desc-wrap .desc{margin-bottom:0}
.desc-toggle{display:inline-flex;align-items:center;margin:14px 0 26px;padding:10px 22px;font-family:var(--sans);font-weight:800;font-size:.82rem;letter-spacing:.02em;color:var(--magic-deep);background:var(--night);border:1.5px solid var(--line);border-radius:999px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.desc-toggle:hover{background:var(--magic);border-color:var(--magic);color:#fff}
.desc-toggle:focus-visible{outline:3px solid var(--magic);outline-offset:3px}
.p-info .desc p{margin:0 0 12px;line-height:1.65}
.p-info .desc p:last-child{margin-bottom:0}
.p-info .desc .desc-sub{margin:24px 0 8px;color:var(--mist);font-size:1.08rem;font-weight:700}
.p-info .desc .desc-sub:first-child{margin-top:0}
.p-info .desc ul{margin:2px 0 14px;padding-left:22px}
.p-info .desc li{margin:5px 0;color:var(--mist-2);line-height:1.55}
.p-specs{display:flex;gap:0;border-block:1px solid var(--line-2);margin-bottom:28px;flex-wrap:wrap}
.p-specs div{padding:16px 26px 16px 0;margin-right:26px;border-right:1px solid var(--line-2)}
.p-specs div:last-child{border-right:none}
.p-specs b{font-family:var(--serif);font-size:1.5rem;font-weight:700;display:block;line-height:1.1}
.p-specs span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist-3)}
.amen{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.amen span{font-size:.82rem;font-weight:600;color:var(--mist-2);background:var(--night);border:1px solid var(--line-2);border-radius:10px;padding:9px 14px}

.suites{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0 30px}
.suite{background:var(--night);border:1px solid var(--line-2);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.suite .em{font-size:1.5rem;line-height:1.2}
.suite b{display:block;font-size:.95rem;margin-bottom:2px}
.suite p{font-size:.82rem;color:var(--mist-2);line-height:1.5}

/* gallery */
.gal-h{display:flex;justify-content:space-between;align-items:baseline;margin:34px 0 14px}
.gal-h h3{font-family:var(--serif);font-size:1.45rem}
.gal-h span{font-size:.78rem;color:var(--mist-3)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery figure{border-radius:10px;overflow:hidden;background:var(--night-3);aspect-ratio:4/3;cursor:zoom-in;position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s,transform .6s}
.gallery img.loaded{opacity:1}
.gallery figure:hover img{transform:scale(1.06)}
/* Uniform tiles (no wide/dense): mixing 2-col "wide" tiles with 4:3 singles left
   vertical gaps because the wide tiles are twice as tall. A clean equal grid fills
   the full width with no holes. .wide is intentionally a no-op now. */
/* Full-width gallery + reviews, pulled out of the two-column block so the photos span
   the page instead of being crammed beside the booking card. Capped to a 12-photo
   preview; the "View all" button opens the existing lightbox carousel (villa.js). */
.villa-gallery{padding-bottom:28px}
.villa-reviews{padding-bottom:60px}
.gallery.capped figure:nth-child(n+13){display:none}
/* "+N photos" overlay on the last preview tile (replaces the old View-all button);
   the tile itself opens the full gallery, so the badge is purely a cue. */
.gtile.more{cursor:pointer}
.more-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;
  background:rgba(12,5,24,.55);color:#fff;font-family:var(--serif);font-size:1.18rem;font-weight:700;letter-spacing:.01em;
  pointer-events:none;transition:background .2s}
.gallery figure.more:hover .more-badge{background:rgba(12,5,24,.4)}
.moments{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory}
.moments figure{flex:0 0 240px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--night-3);scroll-snap-align:start;cursor:zoom-in}
.moments img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.moments img.loaded{opacity:1}

/* lightbox */
/* Gallery lightbox — big image + thumbnail strip + swipe + tap zones + keyboard. */
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(7,3,15,.96);display:none;flex-direction:column}
.lightbox.open{display:flex}
.lb-close{position:absolute;top:14px;right:16px;z-index:4;width:46px;height:46px;border-radius:50%;background:rgba(251,248,243,.12);border:1px solid rgba(251,248,243,.28);color:#F4EDFF;font-size:1.7rem;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb-close:hover{background:rgba(251,248,243,.24)}
.lb-count{position:absolute;top:22px;left:22px;z-index:4;color:#E9DFFB;font-size:.76rem;font-weight:700;letter-spacing:.14em;background:rgba(12,5,24,.5);padding:6px 13px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:64px 14px 14px}
.lb-figure{margin:0;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
#lbImg{max-width:min(1500px,96vw);max-height:100%;width:auto;height:auto;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.55);object-fit:contain;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.lb-zone{position:absolute;top:0;bottom:0;width:22%;display:flex;align-items:center;border:none;background:transparent;cursor:pointer;z-index:3}
.lb-prev{left:0;justify-content:flex-start;padding-left:16px}
.lb-next{right:0;justify-content:flex-end;padding-right:16px}
.lb-arrow{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:rgba(251,248,243,.14);border:1px solid rgba(251,248,243,.3);color:#F4EDFF;font-size:2rem;line-height:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .18s,transform .18s}
.lb-zone:hover .lb-arrow{background:rgba(251,248,243,.28);transform:scale(1.06)}
.lb-strip{display:flex;gap:8px;align-items:center;flex:0 0 auto;overflow-x:auto;overflow-y:hidden;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:rgba(12,5,24,.45);scrollbar-width:thin}
.lb-thumb{flex:0 0 auto;width:92px;height:62px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;cursor:pointer;opacity:.5;transition:opacity .18s,border-color .18s}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb:hover{opacity:.85}
.lb-thumb.on{opacity:1;border-color:var(--gold)}
@media (max-width:640px){
  .lb-stage{padding:58px 8px 8px}
  .lb-zone{width:30%}
  .lb-arrow{width:44px;height:44px;font-size:1.7rem}
  .lb-thumb{width:74px;height:52px}
  .lb-close{top:10px;right:12px}
}

/* booking card */
.bkcard{
  position:sticky;top:98px;background:var(--night);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
  box-shadow:var(--shadow);padding:26px 26px 28px;
}
.bkcard .bh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.bkcard .bh .from b{font-family:var(--serif);font-size:1.9rem;font-weight:700;color:var(--gold-2)}
.bkcard .bh .from span{font-size:.8rem;color:var(--mist-3)}
.bkcard .bh .rt{font-size:.84rem;font-weight:700;color:var(--gold-2)}
.bk-cal-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.bk-cal-nav button{background:none;border:1px solid var(--line-2);border-radius:8px;color:var(--mist-2);cursor:pointer;padding:8px 14px;min-height:40px;min-width:40px}
.bk-cal-nav button:hover:not(:disabled){border-color:var(--gold);color:var(--gold-2)}
.bk-cal-nav button:disabled{opacity:.3;cursor:default}
.bk-cal-nav .m{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--mist)}
.bk-dow,.bk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.bk-dow span{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mist-3);text-align:center;padding:5px 0}
.bk-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;
  background:var(--night-2);border:1px solid transparent;border-radius:8px;color:var(--mist-2);cursor:pointer;min-height:34px;
}
.bk-day.empty{background:transparent;cursor:default}
.bk-day.off{color:var(--mist-3);opacity:.3;cursor:not-allowed;text-decoration:line-through}
.bk-day.booked{opacity:.4;cursor:not-allowed;background:repeating-linear-gradient(45deg,var(--night-2) 0 4px,rgba(199,139,252,.08) 4px 8px)}
.bk-day:not(.off):not(.booked):not(.empty):hover{border-color:var(--magic-2)}
.bk-day.in-range{background:rgba(168,85,247,.24);color:var(--mist)}
.bk-day.sel{background:var(--magic);color:#fff}
.bk-legend{display:flex;gap:16px;margin:10px 0 16px;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-3);flex-wrap:wrap}
.bk-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.bk-legend .lg-open i{background:var(--night-2);border:1px solid var(--line-2)}
.bk-legend .lg-booked i{background:repeating-linear-gradient(45deg,var(--night-2) 0 3px,rgba(199,139,252,.16) 3px 6px)}
.bk-legend .lg-sel i{background:var(--magic)}
.g-rows{display:grid;gap:10px;margin-bottom:16px}
.g-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line-2);border-radius:10px;padding:10px 14px}
.g-row .lbl b{font-weight:700;font-size:.88rem;display:block}
.g-row .lbl span{font-size:.7rem;color:var(--mist-3)}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--gold-2);font-size:1.05rem;cursor:pointer;line-height:1}
.stepper button:hover:not(:disabled){background:var(--gold);color:var(--void)}
.stepper button:disabled{opacity:.25;cursor:default}
.stepper output{min-width:18px;text-align:center;font-weight:700;font-size:.9rem}
.quote{border:1px solid var(--line-gold);border-radius:12px;padding:16px 18px;display:grid;gap:8px;background:var(--night-2);margin-bottom:16px}
.quote .q-row{display:flex;justify-content:space-between;font-size:.86rem;color:var(--mist-2)}
.quote .q-row.total{border-top:1px solid var(--line-gold);padding-top:10px;color:var(--mist);font-weight:700}
.quote .q-row.total b{font-family:var(--serif);font-size:1.3rem;color:var(--gold-2)}
.quote .q-save{font-size:.74rem;color:var(--magic-2)}
.quote .q-hint{font-size:.82rem;color:var(--mist-3);font-style:italic}
.bkcard > .btn{width:100%}
.bkcard .fine{margin-top:12px;font-size:.72rem;color:var(--mist-3);text-align:center}
.bkcard .step2,.bkcard .step3{display:none}
.bkcard.s2 .step1{display:none}
.bkcard.s2 .step2{display:block}
.bkcard.s3 .step1,.bkcard.s3 .step2{display:none}
.bkcard.s3 .step3{display:block}
.bkf{display:grid;gap:12px;margin-bottom:16px}
.bkf label{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);font-weight:700;display:block;margin-bottom:6px}
.bkf input{width:100%;background:var(--night-2);border:1px solid var(--line-2);border-radius:10px;color:var(--mist);padding:12px 14px;font-family:var(--sans);font-size:.92rem;min-height:44px}
.bkf input:focus{outline:2px solid var(--aqua);outline-offset:-1px}
.sum{border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;display:grid;gap:6px;font-size:.84rem;color:var(--mist-2);margin-bottom:16px;background:var(--night-2)}
.sum .q-row{display:flex;justify-content:space-between}
.step3{text-align:center;padding:16px 0 6px}
.step3 .spark{font-size:1.8rem;color:var(--gold-2);letter-spacing:10px;display:block;margin-bottom:12px;animation:pop .7s ease}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.step3 h3{font-family:var(--serif);font-size:1.5rem;margin-bottom:10px}
.step3 h3 em{font-style:italic;color:var(--gold-2)}
.step3 p{font-size:.86rem;color:var(--mist-2);margin-bottom:8px}
.step3 .ref{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--magic-2);margin:12px 0}
.step3 .demo-note{font-size:.74rem;color:var(--mist-3);font-style:italic}
.row2{display:flex;gap:10px}
.row2 .btn{flex:1}

/* ————— article / guide pages ————— */
.art-hero{position:relative;background:var(--ink-night);overflow:hidden}
.art-hero .media{position:relative;height:min(48vh,460px);min-height:320px}
.art-hero .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.art-hero .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,5,24,.5),rgba(12,5,24,.92))}
.art-hero .content{position:absolute;left:0;right:0;bottom:0;padding-bottom:38px;color:#F4EDFF}
.art-hero h1{color:#F4EDFF;font-size:clamp(2rem,4.6vw,3.4rem);max-width:24ch}
.art-hero .kicker{color:var(--gold)}
.art-hero .byline{margin-top:14px;font-size:.8rem;color:#B9A8E0}
.art-hero .byline b{color:#F4EDFF}

.article{padding:54px 0 30px}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:54px;align-items:start}
.art-grid > *{min-width:0}
.prose{max-width:70ch}
.prose > p{margin:0 0 20px;color:#3A2760;font-size:1.02rem}
.prose h2{font-size:1.8rem;margin:44px 0 16px}
.prose h3{font-family:var(--serif);font-size:1.35rem;margin:30px 0 10px}
.prose ul,.prose ol{margin:0 0 20px 22px;color:#3A2760}
.prose li{margin-bottom:8px}
.prose a{color:var(--magic-deep);text-decoration-color:rgba(123,52,214,.4)}
.prose .quickbox{
  background:var(--night-2);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;padding:20px 24px;margin:0 0 28px;font-size:.95rem;color:var(--mist);
}
.prose .quickbox b{color:var(--gold-2)}
.prose .quickbox .qb-label{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--magic);font-weight:700;display:block;margin-bottom:8px}
.prose table{width:100%;border-collapse:collapse;font-size:.88rem;margin:0 0 28px}
.prose th{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);text-align:left;padding:10px 12px;border-bottom:2px solid var(--line-gold)}
.prose td{padding:11px 12px;border-bottom:1px solid var(--line-2);color:#3A2760;vertical-align:top}
.prose tr:hover td{background:var(--night-2)}
.tablewrap{overflow-x:auto;margin:0 0 28px}
.tablewrap table{margin:0;min-width:560px}

/* ranked list items (top-10 style) */
.rank{display:flex;gap:20px;background:var(--night);border:1px solid var(--line-2);border-radius:var(--r);padding:24px 26px;margin-bottom:18px}
.rank .no{font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--gold-deep);line-height:1;min-width:52px}
.rank h3{font-family:var(--serif);font-size:1.4rem;margin:0 0 6px}
.rank .facts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 10px}
.rank .facts span{font-size:.72rem;font-weight:700;color:var(--mist-2);background:var(--night-2);border:1px solid var(--line-2);border-radius:8px;padding:4px 10px}
.rank p{font-size:.92rem;color:#3A2760;margin:0}
.rank .know{margin-top:10px;font-size:.82rem;color:var(--mist-2)}
.rank .know b{color:var(--gold-2)}

/* article sidebar */
.side{position:sticky;top:98px;display:grid;gap:22px}
.side .box{background:var(--night);border:1px solid var(--line-2);border-radius:var(--r);padding:22px 22px}
.side .box h4{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2);margin-bottom:14px;font-weight:700}
.side .box ul{list-style:none;display:grid;gap:2px}
.side .box li a{display:block;font-size:.86rem;font-weight:600;color:var(--mist-2);text-decoration:none;padding:7px 0;border-bottom:1px solid var(--line-2)}
.side .box li:last-child a{border-bottom:none}
.side .box li a:hover{color:var(--gold-2)}
.side .cta{background:linear-gradient(160deg,#180C30,#2A1650);border:1px solid var(--line);color:#E9DFFB;text-align:center}
.side .cta h4{color:var(--gold)}
.side .cta p{font-size:.86rem;color:#B9A8E0;margin-bottom:14px}
.side .cta img{border-radius:10px;margin-bottom:14px}

/* FAQ */
.faq{display:grid;gap:12px;margin:20px 0 30px}
.faq details{background:var(--night);border:1px solid var(--line-2);border-radius:12px;padding:0}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-weight:700;font-size:.95rem;padding:18px 22px;color:var(--mist);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:1.4rem;color:var(--gold-deep);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 18px;color:#3A2760;font-size:.92rem}
.faq .a a{color:var(--magic-deep)}

/* news/guide card grids */
.g-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.g-card{background:var(--night);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s;text-decoration:none}
.g-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.g-card .ph{aspect-ratio:16/9;background:var(--night-3);overflow:hidden;position:relative}
.g-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.g-card:hover .ph img{transform:scale(1.05)}
.g-card .ph .tag{position:absolute;top:12px;left:12px;background:rgba(12,5,24,.78);color:var(--gold);font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid var(--line-gold)}
.g-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.g-card h3{font-family:var(--serif);font-size:1.3rem;line-height:1.2}
.g-card p{font-size:.87rem;color:var(--mist-2);flex:1}
.g-card .more{font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--magic-2);text-transform:uppercase}
.g-card .date{font-size:.72rem;color:var(--mist-3);letter-spacing:.06em}

/* area cards (emoji tiles) */
.a-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.a-card{background:var(--night);border:1px solid var(--line-2);border-radius:var(--r);padding:26px 24px;position:relative;transition:transform .25s,box-shadow .25s;text-decoration:none;display:block}
.a-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.a-card .em{font-size:1.9rem;display:block;margin-bottom:12px}
.a-card h3{font-family:var(--serif);font-size:1.25rem;margin-bottom:6px}
.a-card p{font-size:.85rem;color:var(--mist-2)}
.a-card .min{position:absolute;top:22px;right:20px;font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--gold-2);background:var(--night-2);border:1px solid var(--line-gold);padding:4px 10px;border-radius:999px}

/* owners landing */
.vhero.scrim .grad{background:
  linear-gradient(90deg,rgba(12,5,24,.94) 0%,rgba(12,5,24,.72) 40%,rgba(12,5,24,.34) 72%,rgba(12,5,24,.5) 100%),
  linear-gradient(180deg,rgba(12,5,24,.35),transparent 32%,rgba(12,5,24,.92) 100%)}
.vhero h1,.vhero .kicker{text-shadow:0 2px 26px rgba(7,3,15,.65),0 1px 3px rgba(7,3,15,.5)}
.vhero .sub{color:#CBBCEA;max-width:54ch;margin:14px 0 20px;font-size:1.04rem;text-shadow:0 1px 14px rgba(7,3,15,.6)}
.delta-line{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-top:26px}
.delta-line b{font-family:var(--serif);font-size:clamp(2.4rem,5.4vw,3.8rem);color:var(--gold-2);line-height:1}
.delta-line span{font-size:.9rem;color:var(--mist-2);max-width:38ch}
.money-note{font-size:.74rem;color:var(--mist-3);margin-top:14px}
.lever{display:flex;gap:16px;background:var(--night);border:1px solid var(--line-2);border-radius:12px;padding:20px 22px}
.lever .lv{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--magic-2);line-height:1.1;min-width:34px}
.lever b{display:block;margin-bottom:4px}
.lever p{font-size:.88rem;color:var(--mist-2);margin:0}
.levers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
@media (max-width:860px){.levers{grid-template-columns:1fr}}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(199,139,252,.16);border:1px solid rgba(199,139,252,.25);border-radius:var(--r);overflow:hidden}
.stat-row .st{background:#120826;padding:30px 26px;text-align:center}
.stat-row b{font-family:var(--serif);font-size:2.4rem;color:var(--gold);display:block;line-height:1.1}
.stat-row span{font-size:.78rem;color:#B9A8E0;letter-spacing:.04em}
.t-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.cmp{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:38px;background:var(--night);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.cmp th{padding:18px 22px;text-align:left;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.cmp th:first-child{color:var(--mist-3);width:26%}
.cmp th.them{color:var(--mist-3)}
.cmp th.us{color:#fff;background:var(--magic-deep)}
.cmp td{padding:16px 22px;border-top:1px solid var(--line-2);color:var(--mist-2);vertical-align:top}
.cmp td:first-child{font-weight:700;color:var(--mist);font-size:.84rem}
.cmp td.us{background:var(--night-2);color:var(--mist);font-weight:600}
.cmp .cmp-x{color:var(--mist-3)}
.cmpwrap{overflow-x:auto}
.cmpwrap .cmp{min-width:640px}
@media (max-width:1080px){.stat-row{grid-template-columns:repeat(2,1fr)}.t-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.stat-row{grid-template-columns:1fr 1fr}.t-grid.cols-3{grid-template-columns:1fr}}

/* trust band */
.t-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;margin-top:44px}
.t-cell{background:var(--night);padding:32px 28px}
.t-cell .g{font-family:var(--serif);font-style:italic;font-size:1.8rem;color:var(--magic-2);line-height:1;margin-bottom:14px}
.t-cell h3{font-size:1.02rem;font-weight:800;margin-bottom:8px}
.t-cell p{color:var(--mist-2);font-size:.86rem}

/* reviews */
.r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.review{background:var(--night);border:1px solid var(--line-2);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:14px}
.review .top{display:flex;justify-content:space-between;align-items:center}
.review .stars{color:var(--gold);letter-spacing:4px;font-size:.8rem}
.review .verified{font-size:.7rem;font-weight:700;color:var(--aqua);letter-spacing:.06em}
.review p{font-size:.95rem;color:var(--mist);line-height:1.6;flex:1}
.review footer b{font-size:.82rem;font-weight:700;display:block}
.review footer span{font-size:.74rem;color:var(--mist-3)}
.r-note{text-align:center;color:var(--mist-3);font-size:.8rem;margin-top:26px;font-style:italic}

/* newsletter */
.news-cta{background:linear-gradient(160deg,#180C30,#2A1650);border-block:1px solid var(--line);padding:70px 0;text-align:center;color:#E9DFFB}
.news-cta h2{color:#F4EDFF}
.news-cta h2 em{color:var(--gold)}
.news-cta p{color:#B9A8E0;max-width:52ch;margin:14px auto 26px}
.news-form{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news-form input{
  flex:1;min-width:240px;background:rgba(251,248,243,.08);border:1px solid rgba(251,248,243,.25);border-radius:999px;
  color:#F4EDFF;padding:14px 22px;font-family:var(--sans);font-size:.92rem;min-height:48px;
}
.news-form input::placeholder{color:#8F7BC0}
.news-cta .fine{margin-top:14px;font-size:.72rem;color:#8F7BC0}

/* Why Book Direct — bold magic band under the hero search, with a big live savings figure. */
.save{position:relative;overflow:hidden;color:#F4EDFF;
  background:linear-gradient(135deg,var(--magic-deep) 0%,var(--magic) 58%,var(--magic-2) 100%);
  border-block:1px solid var(--line-gold)}
.save::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 12% -12%,rgba(233,184,79,.30),transparent 60%),
             radial-gradient(680px 420px at 110% 118%,rgba(255,255,255,.16),transparent 55%)}
.save .container{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding-block:78px}
.save .container > *{min-width:0}
.save .kicker{color:var(--gold)}
.save h2{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.05;color:#fff}
.save h2 em{color:var(--gold);font-style:italic}
.save-lede{margin-top:18px;max-width:46ch;font-size:1.06rem;line-height:1.62;color:#E7DBFF}
.save-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.save-points li{position:relative;padding-left:36px;font-weight:600;color:#F4EDFF}
.save-points li::before{content:"✓";position:absolute;left:0;top:-2px;display:grid;place-items:center;
  width:25px;height:25px;border-radius:50%;font-size:.82rem;font-weight:800;color:var(--magic-deep);
  background:linear-gradient(180deg,#FCE9C1,var(--gold));box-shadow:0 5px 14px rgba(233,184,79,.42)}
.save-card{background:var(--night);border:1px solid rgba(255,255,255,.55);border-radius:calc(var(--r) + 8px);
  padding:28px 30px 26px;box-shadow:0 44px 90px rgba(24,8,58,.42)}
.save-card .calc-head{font-family:var(--serif);font-size:1.32rem;font-weight:700;color:var(--mist);margin-bottom:20px}
.save .c-row{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.save .c-row label{width:54px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--mist-3)}
.save .c-row input[type=range]{flex:1;accent-color:var(--magic);height:6px}
.save .c-row select{flex:1;max-width:100%;background:var(--night-2);border:1px solid var(--line-2);border-radius:12px;color:var(--mist);padding:12px 14px;font-weight:600;min-height:48px}
.save .c-row output{min-width:42px;text-align:right;font-weight:800;color:var(--magic);font-size:1.12rem}
.save-figure{margin-top:22px;padding:26px 22px;border-radius:16px;text-align:center;color:#EFE7FF;
  background:linear-gradient(140deg,var(--magic-deep),#241046 68%,#190A32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px rgba(24,8,58,.28)}
.save-figure .lbl{display:block;font-size:.92rem;color:#CBB9F2}
.save-figure #cOut{display:block;font-family:var(--serif);font-weight:800;line-height:1;margin:6px 0 4px;
  font-size:clamp(3.6rem,9vw,5.8rem);color:var(--gold);text-shadow:0 6px 30px rgba(233,184,79,.45)}
.save-figure .sub{display:block;font-size:.96rem;color:#CBB9F2}
.save .fine{margin-top:16px;font-size:.72rem;color:var(--mist-3);text-align:center}

/* footer */
footer.site{border-top:1px solid var(--line);padding:64px 0 32px;background:var(--void);position:relative;z-index:1}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:38px;margin-bottom:44px}
footer.site h4{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2);margin-bottom:16px;font-weight:700}
footer.site ul{list-style:none;display:grid;gap:2px}
footer.site li{color:var(--mist-2);font-size:.88rem}
footer.site a{color:var(--mist-2);text-decoration:none;display:inline-block;padding:5px 0;overflow-wrap:anywhere}
footer.site a:hover{color:var(--gold-2)}
.f-brand img{max-width:270px}
.f-brand p{margin-top:14px;color:var(--mist-2);font-size:.86rem;max-width:36ch}
.f-bottom{border-top:1px solid var(--line-2);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.72rem;color:var(--mist-3)}

/* toast + mobile bar */
.toast{
  position:fixed;bottom:90px;left:50%;transform:translate(-50%,16px);background:var(--gold);color:var(--void);
  padding:13px 24px;font-weight:700;font-size:.86rem;border-radius:12px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:.3s;z-index:400;max-width:92vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.m-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(12,5,24,.97);
  border-top:1px solid var(--line);padding:12px 16px;backdrop-filter:blur(10px);
  grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;color:#F4EDFF;
}
.m-bar .t b{font-family:var(--serif);font-size:1.02rem;display:block;line-height:1.2}
.m-bar .t span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8F7BC0}
.m-bar .btn{padding:12px 20px;font-size:.8rem}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in-view{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* CTA band between content */
.villa-cta{background:var(--night-2);border-block:1px solid var(--line)}
.villa-cta .container{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding-block:46px}
.villa-cta h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.villa-cta p{color:var(--mist-2);margin-top:8px;max-width:56ch}

/* responsive */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .t-grid{grid-template-columns:repeat(2,1fr)}
  .r-grid{grid-template-columns:1fr}
  .g-cards{grid-template-columns:repeat(2,1fr)}
  .a-grid{grid-template-columns:repeat(2,1fr)}
  .film-rail{grid-template-columns:repeat(2,1fr)}
  .save .container{grid-template-columns:1fr;gap:36px;padding-block:52px}
  .p-cols{grid-template-columns:1fr;gap:40px}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .bkcard{position:static}
  .art-grid{grid-template-columns:1fr}
  .side{position:static}
  .f-grid{grid-template-columns:repeat(2,1fr)}
}
/* ————— nav collapse —————
   With Resorts promoted to its own top-level item (2026-08-08) the six-item nav plus
   the Book a Villa CTA measures about 1157px of row. It only clears the 1240px
   container above roughly a 1200px viewport, so the hamburger now takes over at
   1200px rather than 1023px. This is the "earlier hamburger" Tyler chose over
   folding Resorts back into Villas: below 1200px the full menu lives behind the
   toggle, so it never overflows the header.

   Its own breakpoint rather than folded into the 860 block below, because that one
   also hides the brand wordmark and restacks the search card and villa hero, none
   of which should happen here. */
@media (max-width:1200px){
  nav.main{display:none}
  nav.main.open{
    /* The sticky header carries backdrop-filter:blur(14px), which makes it the
       containing block for this fixed child (any filter/transform/backdrop-filter
       ancestor does). That means bottom:0 resolves against the ~83px header box,
       not the viewport, and the menu collapses to a thin strip. Size it with
       viewport height instead so it fills the screen regardless of the containing
       block; dvh tracks the mobile URL bar, with a vh fallback for old browsers. */
    display:flex;position:fixed;top:78px;left:0;right:0;
    height:calc(100vh - 78px);height:calc(100dvh - 78px);overflow-y:auto;
    background:#0C0518;
    flex-direction:column;align-items:stretch;padding:22px 28px 60px;gap:2px;border-bottom:1px solid var(--line);z-index:99;
  }
  nav.main.open > a, nav.main.open .navgroup > a{padding:15px 4px;border-bottom:1px solid rgba(199,139,252,.18);color:#E9DFFB;border-radius:0;display:flex;justify-content:space-between}
  /* The desktop active-pill (a.on) fills with the light --night-2 background, which
     turns into a jarring bright box on the dark mobile overlay. Reset it to a quiet
     gold-text marker that reads correctly against the dark sheet. */
  nav.main.open > a.on, nav.main.open .navgroup > a.on{background:transparent;color:var(--gold)}
  nav.main.open .navgroup{display:block}
  nav.main.open .dropdown{display:block;position:static;visibility:visible;opacity:1;transform:none;transition:none;background:transparent;border:none;box-shadow:none;padding:0 0 6px 16px;min-width:0}
  nav.main.open .dd-panel{background:transparent;border:none;box-shadow:none;padding:0}
  nav.main.open .dropdown a{color:#B9A8E0;padding:11px 4px}
  nav.main.open .dropdown a:hover{background:transparent;color:var(--gold)}
  nav.main.open .dd-label{color:var(--gold)}
  .hamburger{display:block}
}

@media (max-width:860px){
  .nav-right .btn,.nav-right .phone{display:none}
  .brand .words{display:none}
  .search-card{grid-template-columns:1fr 1fr}
  .sc-field{border-bottom:1px solid var(--line-2)}
  .search-card .btn{grid-column:1/-1;padding:16px}
  .vhero .media{height:min(70vh,560px)}
  .villa-cta .container{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .t-grid{grid-template-columns:1fr}
  .g-cards{grid-template-columns:1fr}
  .a-grid{grid-template-columns:1fr}
  .film-rail{grid-template-columns:1fr}
  .m-bar{display:grid}
  body{padding-bottom:74px}
  .search-card{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:flex-start}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .suites{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid > div:first-child,.f-grid > div:last-child{grid-column:1/-1}
  .section-pad{padding:60px 0}
  .vhero .soundtip{right:16px;bottom:16px}
  .p-specs div{padding-right:16px;margin-right:16px}
}
/* Concierge cross-link under the booking card on villa pages. Quiet on purpose:
   the booking card above it is the primary action and nothing should compete. */
.p-concierge{
  margin-top:20px;padding:24px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--night-2);
}
.p-concierge .kicker{margin:0 0 6px}
.p-concierge h3{font-family:var(--serif);font-size:1.25rem;margin:0 0 8px}
.p-concierge p{color:var(--mist-2);font-size:.86rem;line-height:1.65;margin:0 0 16px}
.p-concierge .btn{width:100%;font-size:.82rem;padding:12px 18px}

/* ————— header fit between tablet and desktop —————
   The full nav needs about 1115px of row. Between the hamburger breakpoint and a
   comfortable desktop there is a band where it does not fit, so the header phone
   steps aside first: it is the one item duplicated elsewhere (footer, the sticky
   mobile bar, and the contact page), so losing it costs the least. */
@media (max-width:1200px){
  .nav-right .phone{display:none}
  nav.main{gap:0}
  nav.main > a, nav.main .navgroup > a{padding:10px 7px}
}

/* ————— wide dropdowns —————
   Plan Your Stay and Property Management carry twelve to fifteen links each. A
   single column of that many is a scrolling menu nobody reads to the bottom of,
   so those sections declare a column count and the links are dealt across it.
   The panel widens to suit; on narrow screens the whole nav is the mobile menu
   anyway, so this only applies to the hover dropdown. */
.dd-panel.dd-wide{min-width:520px}
.dd-cols{display:grid;grid-template-columns:repeat(var(--dd-cols,2),minmax(0,1fr));column-gap:22px}
.dd-panel.dd-wide .dd-label{margin-bottom:10px}

@media (max-width:1023px){
  /* Inside the mobile menu the dropdown is a plain stacked list again. */
  .dd-panel.dd-wide{min-width:0}
  nav.main.open .dd-cols{display:block}
}

/* ————— mobile tap targets on villa cards —————
   The card title is a link to the same place as the photo above it, so there was
   always a large target available. But on a phone the title is what people aim at,
   and it measured 28px tall against the 44px guideline. Padding it out costs no
   visual change (the card already had the space) and makes the obvious target the
   reliable one. Applied only where touch is the primary input, so the desktop
   hover-underline spacing is untouched. */
@media (hover:none) and (pointer:coarse){
  .card .rowline h3 a{display:inline-block;padding:8px 0;min-height:44px}
  .card .rowline h3{margin-bottom:0}
}

/* Sidebar link lists measured 38px on a phone. These are navigation, not inline
   prose, so the 44px guideline applies to them and padding is the right fix. */
@media (hover:none) and (pointer:coarse){
  .side .box ul li a{display:block;padding:11px 0;min-height:44px}
}

/* Test-property banner. Deliberately loud: a $10 nine-bedroom villa reaching a
   real guest is a commercial problem, not a cosmetic one. */
.tp-banner{background:#7F1D1D;color:#FEE2E2;padding:16px 0;position:relative;z-index:2}
.tp-banner-title{margin:0 0 6px;font-weight:800;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}
.tp-banner p{margin:0;font-size:.86rem;line-height:1.6;max-width:80ch}

/* guest review cards (about/reviews) - added 2026-08-07 overnight build */
.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:24px 0 8px}
.review-card{background:var(--night-2);border:1px solid var(--line-2);border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.review-card blockquote{margin:0;font-family:var(--serif);font-size:1.12rem;line-height:1.45;color:var(--mist);position:relative;padding-top:6px}
.review-card blockquote::before{content:"C";position:absolute;top:-10px;left:-4px;font-family:var(--serif);font-size:2.4rem;color:var(--gold);opacity:.5;line-height:1}
.review-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.9rem;color:var(--mist-2)}
.review-card figcaption .tag{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);border:1px solid var(--line-gold);border-radius:999px;padding:4px 10px;white-space:nowrap}
@media(max-width:720px){.review-grid{grid-template-columns:1fr}}

/* guest review stars + aggregate (about/reviews) - 2026-08-08 */
.review-card .stars{color:var(--gold);letter-spacing:2px;font-size:.9rem;margin-bottom:2px}
.review-agg{display:flex;align-items:baseline;gap:10px;margin:6px 0 22px;flex-wrap:wrap}
.review-agg-score{font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--mist);line-height:1}
.review-agg-stars{color:var(--gold);letter-spacing:3px;font-size:1.1rem}
.review-agg-meta{color:var(--mist-2);font-size:.95rem}

/* ---- Resort detail: distance list, FAQ, compare table (added 2026-08-08) ---- */
.dist-list{list-style:none;margin:14px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.dist-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  background:var(--night);border:1px solid var(--line-2);border-radius:10px;padding:11px 15px}
.dist-list li span{color:var(--mist-2);font-weight:600;font-size:.9rem}
.dist-list li b{color:var(--mist);white-space:nowrap}
.faq-item{border:1px solid var(--line-2);border-radius:10px;padding:2px 16px;margin-bottom:10px;background:var(--night)}
.faq-item summary{cursor:pointer;font-weight:700;color:var(--mist);padding:13px 0;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:var(--magic);font-weight:700}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:0 0 14px;color:var(--mist-2)}
.compare-table{width:100%;border-collapse:collapse;font-size:.92rem}
.compare-table th,.compare-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.compare-table thead th{font-family:var(--sans);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mist-3)}
.compare-table tbody th{font-weight:700}
.compare-table tbody th a{color:var(--magic-deep)}
.compare-table tr:hover td,.compare-table tr:hover th{background:var(--night-2)}
.btn.sm{padding:7px 14px;font-size:.82rem}

/* ---- Utility bar (guest/owner shortcuts above the main nav), added 2026-08-08 ---- */
.util-bar{background:var(--ink-night);color:#D9CEEC}
.util-inner{display:flex;justify-content:flex-end;align-items:center;gap:22px;min-height:34px}
.util-bar a{color:#D9CEEC;text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.01em;padding:7px 0}
.util-bar a:hover{color:var(--gold)}
@media (max-width:1200px){.util-bar{display:none}}
.mys-list{margin:8px 0 0;padding-left:18px;color:var(--mist-2)}
.mys-list li{margin:5px 0}
.ca-search{max-width:none}

/* ---- Homepage rebuilt sections (browse/offers/planning cards, reviews, PM), 2026-08-08 ---- */
.xgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:34px}
.xcard{display:block;text-decoration:none;background:var(--night);border:1px solid var(--line-2);border-radius:var(--r);padding:22px;transition:transform .2s,box-shadow .2s,border-color .2s}
.xcard:hover{border-color:var(--magic);box-shadow:var(--shadow);transform:translateY(-2px)}
.xcard h3{font-family:var(--serif);font-size:1.18rem;color:var(--mist);margin-bottom:6px}
.xcard p{color:var(--mist-2);font-size:.9rem;line-height:1.5}
.xcard .more{color:var(--magic-deep);font-weight:700;font-size:.84rem;margin-top:12px;display:inline-block}
.home-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:34px}
.home-review{background:var(--night);border:1px solid var(--line-2);border-radius:var(--r);padding:24px;margin:0}
.home-review .stars{color:var(--gold);letter-spacing:3px;font-size:.9rem}
.home-review blockquote{font-family:var(--serif);font-size:1.06rem;color:var(--mist);margin:12px 0;line-height:1.5}
.home-review figcaption{font-size:.85rem;color:var(--mist-2)}
.pm-band{background:linear-gradient(120deg,#1C0F37,#2A1650);border-radius:20px;padding:clamp(32px,5vw,56px);text-align:center;box-shadow:var(--shadow)}
.pm-band h2{color:#fff}
.pm-band p{color:#D9CEEC;max-width:60ch;margin:14px auto 0}
.pm-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* ---- Inline enquiry/form blocks outside the contact page (manage-my-stay,
   revenue-projection), which do not load contact.css. Minimal layout only. 2026-08-08 ---- */
.mk-form{max-width:760px}
.ct-direct{margin-top:16px}
.ct-direct-btns{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ct-grid-noform{grid-template-columns:1fr 1fr}
@media (max-width:760px){.ct-grid,.ct-grid-noform{grid-template-columns:1fr}}
.ct-card{background:var(--night);border:1px solid var(--line-2);border-radius:var(--r);padding:24px}
.ct-card-quiet{background:var(--night-2)}
.ct-main{max-width:760px}
.ct-wrap{padding:34px 0 10px}
.ct-note{color:var(--mist-2);margin:6px 0 16px;max-width:60ch}

/* ---- Native lead forms (contact/concierge/manage-my-stay/revenue-projection) 2026-08-08 ---- */
.lead-form{max-width:620px;margin-top:18px}
.lead-field{margin-bottom:16px}
.lead-field label{display:block;font-weight:600;font-size:.85rem;color:var(--mist);margin-bottom:6px}
.lead-field .req{color:var(--magic)}
.lead-field input,.lead-field textarea,.lead-field select{
  width:100%;font:inherit;color:var(--mist);background:var(--night);
  border:1px solid var(--line-2);border-radius:10px;padding:12px 14px}
.lead-field input:focus,.lead-field textarea:focus,.lead-field select:focus{
  outline:2px solid var(--aqua);outline-offset:2px;border-color:var(--magic)}
.lead-field textarea{resize:vertical;min-height:110px}
.lead-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-status{margin-bottom:14px;padding:12px 15px;border-radius:10px;font-size:.9rem}
.lead-status.is-pending{background:var(--night-2);color:var(--mist-2)}
.lead-status.is-ok{background:#E7F6EC;color:#1B5E33;border:1px solid #B8E0C4}
.lead-status.is-err{background:#FBEAEA;color:#8A1F1F;border:1px solid #EEC2C2}
.ghl-hint{background:var(--night-2);border:1px dashed var(--line);border-radius:10px;padding:12px 15px;font-size:.85rem;color:var(--mist-2)}
.lead-consent{font-size:.72rem;line-height:1.45;color:var(--mist-3);margin:2px 0 14px}
.lead-consent a{color:var(--mist-2);text-decoration:underline}
/* Optional SMS-consent opt-ins (transactional + marketing), shown wherever a phone is collected. */
.lead-consents{border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;margin:4px 0 16px;display:grid;gap:13px}
.lead-consents legend{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-3);padding:0 6px}
.lead-consent-box{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;line-height:1.5;color:var(--mist-2);font-weight:400;margin:0}
.lead-consent-box input{margin:3px 0 0;flex:none;width:17px;height:17px;accent-color:var(--magic)}
.lead-consent-box a{color:var(--magic);font-weight:600;text-decoration:underline}
/* Themed-property non-affiliation disclaimer strip on villa pages. */
.villa-disclaimer{border-top:1px solid var(--line-2);padding:22px 0 6px}
.villa-disclaimer p{max-width:900px;margin:0 auto;padding:0 22px;font-size:.72rem;line-height:1.5;color:var(--mist-3);text-align:center}

/* ---- Travel Agent Partner landing (/travel-agent-partners/), added 2026-08-11 ---- */
.ta-hero .media img{object-position:center 62%}
.ta-hero h1 em{font-style:italic;color:var(--gold)}
.ta-hero-sub{font-size:1.1rem;color:#EDE6FB;max-width:34rem;margin-top:14px;line-height:1.6}
.ta-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.ta-hero-proof{margin-top:20px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#CDBEEC}
.btn.full{width:100%;justify-content:center;text-align:center}

.ta-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:center}
.ta-intro h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-top:8px}
.ta-intro h2 em{font-style:italic;color:var(--magic)}
.ta-intro p{font-size:1.05rem;color:#3A2760;line-height:1.7}

.ta-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ta-benefit{background:var(--night);border:1px solid var(--line-2);border-radius:var(--r);padding:26px 22px;text-align:center;box-shadow:var(--shadow)}
.ta-benefit-num{font-family:var(--serif);font-weight:700;font-size:2.6rem;color:var(--magic-deep);line-height:1;display:block}
.ta-benefit h3{font-family:var(--serif);font-size:1.25rem;margin:10px 0 6px;color:var(--mist)}
.ta-benefit p{font-size:.9rem;color:var(--mist-3);line-height:1.5}

.ta-ideal-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ta-ideal-photo img{width:100%;border-radius:16px;box-shadow:var(--shadow);display:block}
.ta-ideal-copy h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:6px 0 16px}
.ta-checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ta-checklist li{position:relative;padding-left:34px;font-size:1.02rem;color:#3A2760;line-height:1.5}
.ta-checklist li::before{content:"\2713";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:var(--night-3);color:var(--magic-deep);font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.ta-small-note{margin-top:18px;font-size:.82rem;color:var(--mist-3)}

.ta-steps{max-width:760px;margin:26px auto 0}
.ta-commission-note{max-width:760px;margin:18px auto 0;text-align:center;font-size:.86rem;color:var(--mist-3);line-height:1.6}

.ta-form-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.ta-form-intro h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:6px 0 12px}
.ta-form-intro p{color:#3A2760;line-height:1.7}
.ta-contact-card{margin-top:22px;background:var(--night-2);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:2px}
.ta-contact-card strong{font-family:var(--serif);font-size:1.3rem;color:var(--mist);margin-top:4px}
.ta-contact-role{font-size:.82rem;color:var(--mist-3)}
.ta-contact-card a{margin-top:6px;color:var(--magic);font-weight:600;word-break:break-word}

.ta-form-card{background:var(--night);border:1px solid var(--line-2);border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.ta-form-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.ta-form-head span{font-family:var(--serif);font-size:1.2rem;color:var(--mist)}
.ta-form-head small{font-size:.75rem;color:var(--mist-3)}
.ta-form label{display:block;font-weight:600;font-size:.82rem;color:var(--mist-2);margin-bottom:14px}
.ta-form .req{color:var(--magic)}
.ta-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ta-form input,.ta-form textarea{display:block;width:100%;margin-top:6px;background:var(--void);border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;font-size:.95rem;font-family:inherit;color:var(--ink-night)}
.ta-form input:focus,.ta-form textarea:focus{outline:none;border-color:var(--magic);box-shadow:0 0 0 3px rgba(123,52,214,.12)}
.ta-form textarea{resize:vertical;min-height:96px}
.ta-consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.85rem;color:var(--mist-2);line-height:1.5}
.ta-consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--magic)}
.ta-consent a{color:var(--magic);text-decoration:underline}
.ta-form .btn.full{margin-top:8px}

.ta-thankyou{text-align:center;padding:16px 8px}
.ta-thankyou-icon{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;background:#E7F6EC;color:#1B7A3D;font-size:1.6rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.ta-thankyou h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:6px 0 10px}
.ta-thankyou p{color:#3A2760;line-height:1.6;max-width:30rem;margin:0 auto}
.ta-thankyou-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

.ta-film h2{color:#fff}
.ta-film-sub{color:#CDBEEC;max-width:36rem;margin:10px auto 0;font-size:1rem;line-height:1.6}
.ta-film-frame{max-width:920px;margin:26px auto 0;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);border:1px solid rgba(233,184,79,.3);background:#000;aspect-ratio:16/9}
.ta-film-frame video{width:100%;height:100%;display:block;object-fit:cover}

@media(max-width:900px){
  .ta-intro,.ta-ideal-grid,.ta-form-wrap{grid-template-columns:1fr}
  .ta-benefits{grid-template-columns:1fr 1fr}
  .ta-ideal-photo{order:-1}
}
@media(max-width:560px){
  .ta-benefits{grid-template-columns:1fr}
  .ta-two{grid-template-columns:1fr}
}

/* ---- Book-direct savings (booking card quote box), added 2026-08-09 ---- */
.q-save{margin:12px 0 2px;font-weight:700;color:#1B5E33;background:#E7F6EC;border:1px solid #B8E0C4;border-radius:10px;padding:10px 13px;font-size:.9rem;line-height:1.35}
.q-save-fine{font-size:.72rem;color:var(--mist-3);margin-top:4px}

/* ---- Resort community pages: fee/access notice + aerial gallery (2026-08-21) ---- */
/* Deliberately gold rather than red: this is important information a guest must read
   before booking, not an error state. */
.resort-note{margin:26px 0 0;padding:16px 18px;border-radius:var(--r);
  background:var(--gold-bg,#FBF3E1);border:1px solid var(--line-gold)}
.resort-note p{margin:0;font-size:.9rem;line-height:1.6;color:var(--mist)}
.resort-note strong{color:var(--gold-2)}
.resort-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.resort-gallery figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--night-3);
  aspect-ratio:3/2}
.resort-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.resort-gallery figure:hover img{transform:scale(1.04)}
@media(max-width:900px){.resort-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.resort-gallery{grid-template-columns:1fr;gap:10px}}