/* ==========================================================================
   Villa Sale Phuket — design system
   Quiet-luxury editorial: photography leads, interface recedes.
   ========================================================================== */

:root{
  --bg:#ffffff;
  --bg-alt:#f7f6f4;
  --bg-deep:#14140f;
  --ink:#111111;
  --ink-soft:#4a4a4a;
  --ink-muted:#7c7a76;
  --line:#e5e3df;
  --line-strong:#cfccc6;
  --gold:#a68a64;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gutter:24px;
  --maxw:1440px;
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:1024px){ :root{ --gutter:56px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
section[id],div[id]{ scroll-margin-top:var(--header-h); }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; letter-spacing:-.015em; margin:0 0 .4em; }
h1{ font-size:clamp(2.6rem,7vw,5.4rem); line-height:1.02; }
h2{ font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.1; }
h3{ font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.2; }
p{ margin:0 0 1.1em; }
.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted);
  margin:0 0 18px;
}
.lede{ font-size:clamp(1rem,1.4vw,1.15rem); color:var(--ink-soft); max-width:62ch; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.65); }
.btn--light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--solid-light{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--solid-light:hover{ background:transparent; color:#fff; border-color:rgba(255,255,255,.8); }
.btn--block{ width:100%; }
.link-u{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--line-strong); padding-bottom:3px;
  transition:border-color .3s var(--ease);
}
.link-u:hover{ border-color:var(--ink); }

/* ---------- header ---------- */
.header{
  position:fixed; inset:0 0 auto; z-index:80; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.header__in{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--serif); font-size:24px; letter-spacing:.01em; }
.brand__sub{ font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-muted); margin-top:5px; }
.nav{ display:none; gap:34px; }
.nav a{ font-size:12px; letter-spacing:.13em; text-transform:uppercase; position:relative; padding:4px 0; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .35s var(--ease); }
.nav a:hover::after{ right:0; }
.header__right{ display:flex; align-items:center; gap:22px; }
.header__tel{ display:none; font-size:12px; letter-spacing:.08em; }
.header .btn{ padding:12px 22px; }
.header--over{ color:#fff; }
.header--over .brand__sub, .header--over .nav a{ color:rgba(255,255,255,.88); }
.header--over .btn{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.header--over .btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.header--solid{ background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom-color:var(--line); color:var(--ink); }
.burger{ display:flex; flex-direction:column; gap:5px; width:24px; padding:6px 0; }
.burger span{ height:1px; background:currentColor; transition:transform .3s var(--ease), opacity .2s; }
@media (min-width:1080px){
  .nav{ display:flex; } .header__tel{ display:block; } .burger{ display:none; }
}

/* mobile drawer nav */
.mnav{
  position:fixed; inset:0; z-index:90; background:var(--bg);
  transform:translateY(-100%); transition:transform .5s var(--ease);
  display:flex; flex-direction:column; padding:var(--gutter);
}
.mnav[data-open="true"]{ transform:translateY(0); }
.mnav__close{ align-self:flex-end; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.mnav ul{ list-style:none; margin:auto 0; padding:0; }
.mnav li{ border-bottom:1px solid var(--line); }
.mnav a{ display:block; padding:20px 0; font-family:var(--serif); font-size:30px; }
.mnav__foot{ font-size:13px; color:var(--ink-muted); }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; animation:heroIn 2.4s var(--ease) both; }
@keyframes heroIn{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,8,.5) 0%,rgba(10,10,8,.12) 38%,rgba(10,10,8,.72) 100%);
}
.hero__in{ position:relative; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) 52px; }
.hero .eyebrow{ color:rgba(255,255,255,.82); }
.hero h1{ max-width:16ch; margin-bottom:22px; text-shadow:0 2px 40px rgba(0,0,0,.25); }
.hero__sub{ font-size:clamp(1rem,1.5vw,1.2rem); color:rgba(255,255,255,.9); max-width:52ch; margin-bottom:34px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px; }
.hero__scroll{ position:absolute; right:var(--gutter); bottom:56px; writing-mode:vertical-rl;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.7); display:none; }
@media (min-width:900px){ .hero__scroll{ display:block; } }

/* hero search */
.hsearch{
  display:grid; gap:1px; background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(8px); max-width:900px;
}
.hsearch label{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:6px; }
.hsearch__f{ background:rgba(16,16,12,.34); padding:16px 20px; }
.hsearch select{
  width:100%; background:transparent; border:0; color:#fff; font-size:14px; padding:0;
  appearance:none; cursor:pointer;
}
.hsearch select option{ color:var(--ink); }
.hsearch__btn{ background:#fff; color:var(--ink); padding:18px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease); }
.hsearch__btn:hover{ background:var(--gold); color:#fff; }
@media (min-width:860px){ .hsearch{ grid-template-columns:1fr 1fr 1fr auto; } }

/* ---------- trust bar ---------- */
.trust{ border-bottom:1px solid var(--line); }
.trust__grid{ display:grid; grid-template-columns:repeat(2,1fr); }
.trust__i{ padding:34px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust__i:nth-child(2n){ border-right:0; }
.trust__n{ font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.5rem); line-height:1; }
.trust__l{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-top:10px; }
@media (min-width:860px){
  .trust__grid{ grid-template-columns:repeat(4,1fr); }
  .trust__i{ border-bottom:0; } .trust__i:nth-child(2n){ border-right:1px solid var(--line); }
  .trust__i:last-child{ border-right:0; }
}

/* ---------- section shell ---------- */
.sec{ padding:clamp(64px,9vw,128px) 0; }
.sec--alt{ background:var(--bg-alt); }
.sec--dark{ background:var(--bg-deep); color:#f4f2ee; }
.sec--dark .eyebrow{ color:rgba(244,242,238,.55); }
.sec__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; }
.sec__head h2{ margin:0; max-width:20ch; }

/* ---------- filters ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between;
  padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:40px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:9px 18px; border:1px solid var(--line-strong); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); transition:all .25s var(--ease); white-space:nowrap;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.filters__right{ display:flex; align-items:center; gap:12px; }
.filters__right label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }
.sel{
  appearance:none; border:1px solid var(--line-strong); background:transparent; padding:9px 34px 9px 14px;
  font-size:12px; letter-spacing:.06em; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23111' fill='none' stroke-width='1.2'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center;
}
.count{ font-size:12px; color:var(--ink-muted); letter-spacing:.06em; }

/* ---------- villa grid ---------- */
.grid{ display:grid; grid-template-columns:1fr; gap:48px 28px; }
@media (min-width:640px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .grid{ grid-template-columns:repeat(3,1fr); gap:60px 32px; } }

.card{ text-align:left; width:100%; display:block; }
.card__media{ position:relative; overflow:hidden; background:var(--bg-alt); aspect-ratio:4/3; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease); }
.card:hover .card__media img{ transform:scale(1.055); }
.card__flags{ position:absolute; top:14px; left:14px; display:flex; gap:6px; flex-wrap:wrap; }
.flag{ background:rgba(255,255,255,.94); padding:6px 11px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; }
.flag--gold{ background:var(--gold); color:#fff; }
.card__n{ position:absolute; bottom:14px; right:14px; background:rgba(17,17,17,.72); color:#fff;
  font-size:10px; letter-spacing:.1em; padding:5px 10px; }
.card__body{ padding-top:18px; }
.card__loc{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted); }
.card__t{ font-family:var(--serif); font-size:1.4rem; line-height:1.22; margin:9px 0 12px; }
.card__price{ font-size:13px; letter-spacing:.1em; }
.card__price span{ color:var(--ink-muted); margin-left:10px; letter-spacing:.04em; }
.card__specs{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-soft); letter-spacing:.02em; }
.grid__more{ text-align:center; margin-top:56px; }
.empty{ padding:70px 0; text-align:center; color:var(--ink-muted); }

/* ---------- signature ---------- */
.sig{ display:grid; grid-template-columns:1fr; }
.sig__media{ position:relative; min-height:56vh; overflow:hidden; }
.sig__media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.sig__body{ padding:clamp(40px,6vw,88px); display:flex; flex-direction:column; justify-content:center; background:var(--bg-alt); }
.sig__price{ font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.6rem); margin:6px 0 20px; }
.sig__facts{ list-style:none; margin:0 0 30px; padding:0; border-top:1px solid var(--line); }
.sig__facts li{ display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.sig__facts span:first-child{ color:var(--ink-muted); letter-spacing:.1em; text-transform:uppercase; font-size:11px; }
@media (min-width:980px){ .sig{ grid-template-columns:1.15fr 1fr; } .sig__media{ min-height:720px; } }

/* ---------- value / process ---------- */
.cols{ display:grid; gap:44px; grid-template-columns:1fr; }
@media (min-width:860px){ .cols--3{ grid-template-columns:repeat(3,1fr); } .cols--2{ grid-template-columns:1fr 1fr; } }
.val{ border-top:1px solid var(--line); padding-top:22px; }
.sec--dark .val{ border-color:rgba(255,255,255,.18); }
.val__n{ font-family:var(--serif); font-size:2.6rem; line-height:1; color:var(--gold); }
.val h3{ margin:14px 0 10px; }
.val p{ color:var(--ink-soft); font-size:14.5px; margin:0; }
.sec--dark .val p{ color:rgba(244,242,238,.68); }

.steps{ counter-reset:s; list-style:none; margin:0; padding:0; display:grid; gap:0; }
.step{ counter-increment:s; display:grid; grid-template-columns:52px 1fr; gap:22px; padding:26px 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step::before{ content:"0" counter(s); font-family:var(--serif); font-size:1.5rem; color:var(--gold); }
.step h3{ font-size:1.25rem; margin:0 0 6px; }
.step p{ margin:0; color:var(--ink-soft); font-size:14.5px; }
@media (min-width:980px){ .step{ grid-template-columns:70px 1fr 1.2fr; align-items:start; } .step p{ padding-top:4px; } }

/* ---------- testimonials ---------- */
.quotes{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:900px){ .quotes{ grid-template-columns:repeat(3,1fr); } }
.quote{ border-top:1px solid var(--line); padding-top:24px; }
.quote blockquote{ font-family:var(--serif); font-size:1.3rem; line-height:1.45; margin:0 0 20px; }
.quote cite{ font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }

/* ---------- faq ---------- */
.faq details{ border-bottom:1px solid var(--line); padding:20px 0; }
.faq details:first-of-type{ border-top:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px;
  font-family:var(--serif); font-size:1.25rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--sans); font-size:20px; color:var(--gold); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:14px 0 0; color:var(--ink-soft); max-width:78ch; font-size:14.5px; }

/* ---------- contact ---------- */
.contact{ display:grid; gap:56px; grid-template-columns:1fr; }
@media (min-width:1000px){ .contact{ grid-template-columns:1.1fr .85fr; gap:80px; } }
.form{ display:grid; gap:20px; }
.row2{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px){ .row2{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px; }
.field input,.field select,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-strong);
  padding:11px 0; font:inherit; font-size:15px; color:var(--ink); border-radius:0;
  transition:border-color .3s var(--ease);
}
.field select{ appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23111' fill='none' stroke-width='1.2'/></svg>");
  background-repeat:no-repeat; background-position:right 2px center; cursor:pointer; }
.field textarea{ resize:vertical; min-height:92px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--ink); }
.field input:invalid:not(:placeholder-shown){ border-color:#b4553f; }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:12.5px; color:var(--ink-muted); line-height:1.55; }
.consent input{ width:16px; height:16px; margin-top:2px; accent-color:var(--ink); flex:0 0 auto; }
.consent a{ border-bottom:1px solid var(--line-strong); }
.form__note{ font-size:12px; color:var(--ink-muted); margin:0; }
.form__status{ font-size:13.5px; padding:14px 16px; border:1px solid var(--line-strong); display:none; }
.form__status[data-state="ok"]{ display:block; border-color:var(--gold); background:#fff; }
.form__status[data-state="err"]{ display:block; border-color:#b4553f; color:#b4553f; }
.hp{ position:absolute; left:-9999px; }

.cinfo{ border-top:1px solid var(--line-strong); }
.cinfo dl{ margin:0; }
.cinfo div{ display:grid; gap:4px; padding:20px 0; border-bottom:1px solid var(--line); }
.cinfo dt{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); }
.cinfo dd{ margin:0; font-size:15px; }
.cinfo dd a{ border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.cinfo dd a:hover{ border-color:var(--ink); }
.cmsg{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.cmsg a{ border:1px solid var(--line-strong); padding:11px 18px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  transition:all .25s var(--ease); }
.cmsg a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- footer ---------- */
.footer{ background:var(--bg-deep); color:rgba(244,242,238,.72); padding:72px 0 34px; font-size:13.5px; }
.footer a:hover{ color:#fff; }
.footer__top{ display:grid; gap:40px; grid-template-columns:1fr; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.14); }
@media (min-width:900px){ .footer__top{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; } }
.footer .brand__name{ color:#fff; }
.footer h4{ font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,242,238,.5); margin:0 0 16px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer__bottom{ padding-top:26px; display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:space-between;
  font-size:11.5px; color:rgba(244,242,238,.45); }
.disclaimer{ max-width:96ch; margin-top:20px; font-size:11.5px; line-height:1.6; color:rgba(244,242,238,.4); }

/* ---------- sticky mobile bar ---------- */
.mbar{ position:fixed; inset:auto 0 0; z-index:70; display:grid; grid-template-columns:repeat(3,1fr);
  background:#fff; border-top:1px solid var(--line); transform:translateY(100%); transition:transform .4s var(--ease); }
.mbar[data-show="true"]{ transform:translateY(0); }
.mbar a{ padding:15px 6px; text-align:center; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  border-right:1px solid var(--line); }
.mbar a:last-child{ border-right:0; background:var(--ink); color:#fff; }
@media (min-width:1080px){ .mbar{ display:none; } }
@media (max-width:1079px){ body{ padding-bottom:0; } .footer{ padding-bottom:88px; } }

/* ---------- modal / property detail ---------- */
.modal{ position:fixed; inset:0; z-index:100; visibility:hidden; }
.modal[data-open="true"]{ visibility:visible; }
.modal__ov{ position:absolute; inset:0; background:rgba(12,12,10,.55); opacity:0; transition:opacity .45s var(--ease); }
.modal[data-open="true"] .modal__ov{ opacity:1; }
.modal__panel{
  position:absolute; inset:0 0 0 auto; width:100%; max-width:1040px; background:#fff;
  transform:translateX(100%); transition:transform .5s var(--ease); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.modal[data-open="true"] .modal__panel{ transform:translateX(0); }
.modal__bar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px var(--gutter); background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.modal__ref{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); }
.modal__x{ display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

.gal{ position:relative; background:#0f0f0c; }
.gal__stage{ position:relative; aspect-ratio:3/2; }
.gal__stage img{ width:100%; height:100%; object-fit:cover; }
.gal__nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; background:rgba(255,255,255,.9);
  display:grid; place-items:center; font-size:17px; transition:background .25s var(--ease); }
.gal__nav:hover{ background:#fff; }
.gal__nav--p{ left:14px; } .gal__nav--n{ right:14px; }
.gal__c{ position:absolute; bottom:14px; right:16px; background:rgba(15,15,12,.72); color:#fff; font-size:11px;
  letter-spacing:.1em; padding:6px 12px; }
.gal__thumbs{ display:flex; gap:8px; padding:8px; overflow-x:auto; scrollbar-width:thin; }
.gal__thumbs button{ flex:0 0 96px; aspect-ratio:4/3; overflow:hidden; opacity:.5; transition:opacity .25s var(--ease); }
.gal__thumbs button[aria-current="true"]{ opacity:1; outline:1px solid #fff; outline-offset:-1px; }
.gal__thumbs img{ width:100%; height:100%; object-fit:cover; }

.pd{ padding:clamp(28px,4vw,52px) var(--gutter) 64px; }
.pd__loc{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted); }
.pd h2{ margin:10px 0 14px; font-size:clamp(1.7rem,3vw,2.5rem); }
.pd__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.pd__price strong{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem); }
.pd__price span{ font-size:13px; color:var(--ink-muted); }
.pd__specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); margin:0 0 34px; list-style:none; padding:0; }
.pd__specs li{ background:#fff; padding:20px 18px; }
.pd__specs b{ display:block; font-family:var(--serif); font-size:1.5rem; font-weight:400; }
.pd__specs span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }
@media (min-width:640px){ .pd__specs{ grid-template-columns:repeat(4,1fr); } }
.pd h3{ font-size:1.05rem; font-family:var(--sans); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); margin:34px 0 14px; }
.pd p{ color:var(--ink-soft); max-width:74ch; }
.amen{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.amen li{ border:1px solid var(--line); padding:8px 14px; font-size:11.5px; letter-spacing:.06em; color:var(--ink-soft); text-transform:capitalize; }
.poi{ list-style:none; padding:0; margin:0; display:grid; gap:0; }
.poi li{ display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.poi span:last-child{ color:var(--ink-muted); }
.pd__cta{ margin-top:40px; padding:30px; background:var(--bg-alt); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.pd__cta p{ margin:0; font-size:14px; max-width:44ch; }
.pd__note{ font-size:11.5px; color:var(--ink-muted); margin-top:26px; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- legal pages ---------- */
.legal{ padding:calc(var(--header-h) + 60px) 0 90px; max-width:82ch; }
.legal h1{ font-size:clamp(2rem,4vw,3rem); }
.legal h2{ font-size:1.4rem; margin-top:44px; }
.legal p,.legal li{ color:var(--ink-soft); font-size:15px; }

/* ==========================================================================
   Small-screen corrections
   ========================================================================== */
@media (max-width:1079px){
  :root{ --header-h:64px; }

  /* header must never push past the viewport */
  .header__in{ gap:12px; }
  .header__right{ gap:12px; }
  .header .btn{ padding:10px 14px; font-size:10.5px; letter-spacing:.1em; }
  .brand__name{ font-size:19px; }
  .brand__sub{ font-size:8px; letter-spacing:.22em; }

  /* hero: clear the fixed header, never crowd it */
  .hero__in{ padding-top:calc(var(--header-h) + 28px); }
  .hero{ min-height:100svh; align-items:flex-end; }
  .hero h1{ font-size:clamp(2.2rem,10vw,3.4rem); }
  .hero__cta{ gap:10px; margin-bottom:32px; }
  .hero__cta .btn{ flex:1 1 auto; }

  /* filter bar: chips wrap, the controls scroll rather than overflow the page */
  .filters{ flex-direction:column; align-items:stretch; gap:16px; }
  .filters__right{
    display:flex; gap:10px; align-items:center;
    overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;
    scrollbar-width:none;
    min-width:0; max-width:100%;   /* a scrolling flex child must not widen the page */
  }
  .filters{ min-width:0; }
  .filters__right label{ flex:0 0 auto; white-space:nowrap; }
  .filters__right::-webkit-scrollbar{ display:none; }
  .filters__right .sel{ flex:0 0 auto; }
  .count{ flex:0 0 auto; }

  /* detail panel edges */
  .pd__cta{ padding:22px; }
  .pd__cta .btn{ width:100%; }
  .gal__nav{ width:38px; height:38px; }
}

@media (max-width:420px){
  :root{ --gutter:18px; }
  .header .btn{ padding:9px 12px; }
  .brand__sub{ display:none; }
  .hsearch__f{ padding:13px 16px; }
}