/* EstatePro — estatepro.casa
   Cinematic beachfront property lead-gen. Dark, media-first, brass hairlines. */

:root{
  --ink:#0B1416;         /* deep sea-ink base            */
  --ink-2:#101E22;       /* raised surface               */
  --sand:#EFE7D8;        /* warm off-white text          */
  --muted:#9FB0AE;       /* secondary text               */
  --brass:#C9A24B;       /* single accent, used sparingly*/
  --brass-2:#e0bd6a;
  --line:rgba(239,231,216,.16);
  --sheet:#0d181b;
  --ok:#7FC8A0;
  --err:#E9A17C;
  --shadow:0 24px 60px -24px rgba(0,0,0,.7);
  --pad: clamp(20px, 5vw, 72px);
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --font-sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--sand);
  font-family:var(--font-sans);font-size:17px;line-height:1.6;
  font-weight:400;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}

/* Mobile: the page must never slide sideways. iOS Safari ignores overflow-x on
   body alone, so it goes on html too; clip (where supported) does the same
   without turning the page into a scroll container. */
html{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
/* Long words wrap instead of pushing past the screen edge, including when a
   visitor has enlarged text in their phone accessibility settings. */
h1,h2,h3,h4,p,li,.btn,.msg,.chip,.pmini,.foot a,.stat span,.p-specs > div{overflow-wrap:anywhere}
.intro .grid > *,.project > *,.p-body,.foot .top > *,.why .grid > *{min-width:0}
.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}
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.05;margin:0}
::selection{background:var(--brass);color:#1b1405}

.wrap{max-width:1220px;margin-inline:auto;padding-inline:var(--pad)}
.hairline{height:1px;background:var(--line);border:0;margin:0}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .4s ease, backdrop-filter .4s ease, padding .4s ease;
}
.topbar.scrolled{background:rgba(8,15,17,.82);backdrop-filter:blur(12px);padding-block:12px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:var(--sand)}
.brand svg{height:30px;width:auto}
/* Official EstatePro logo: transparent vectors (assets/img/logo-gold-black.svg and
   logo-gold-silver.svg) traced from assets/logos/estateprologo.png and recoloured
   gold at Anthony's request on 10 Sep 2026. Gold + black only where it sits over
   the bright hero video (the unscrolled top bar); gold + silver on every dark
   surface (scrolled bar, footer, chat, legal pages), where black disappears. */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{height:50px;width:auto;max-width:none;display:block}
.logo--lg img{height:64px}
.topbar .logo-on-dark{display:none}
.topbar.scrolled .logo-over-video{display:none}
.topbar.scrolled .logo-on-dark{display:block}
@media(max-width:600px){.topbar .logo img{height:46px}}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--muted);font-size:14.5px;transition:color .2s}
.nav a:hover{color:var(--sand)}
/* No Enquire button in the menu: the floating "Enquire now" button is the only
   one (Anthony, 13 Sep 2026). The two text links stay visible on phones too. */
@media(max-width:600px){ .nav{gap:18px} .nav a{font-size:14px} }

/* ---------- hero slider ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--ink)}
.slides{position:absolute;inset:0}
.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1.1s ease;
}
.slide.active{opacity:1;visibility:visible}
.slide .media{position:absolute;inset:0}
.slide .media img,.slide .media video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);animation:kb 9s ease-out forwards;
}
.slide.active .media img,.slide.active .media video{animation-play-state:running}
@keyframes kb{to{transform:scale(1)}}
.slide::after{ /* legibility scrim */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(6,12,14,.72) 0%, rgba(6,12,14,.30) 42%, rgba(6,12,14,0) 70%),
    linear-gradient(0deg, rgba(6,12,14,.82) 0%, rgba(6,12,14,0) 46%);
}

.hero-inner{
  position:absolute;inset:auto 0 0 0;z-index:3;
  padding:0 var(--pad) clamp(40px,8vh,86px);
  max-width:900px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;color:var(--brass-2);
  font-size:13px;letter-spacing:.14em;font-weight:600;margin-bottom:20px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass)}
.hero h1{
  font-size:clamp(2.6rem,6.4vw,5.4rem);letter-spacing:-.01em;
  text-wrap:balance;font-optical-sizing:auto;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--sand)}
.hero .place{
  margin-top:16px;color:var(--muted);font-size:clamp(1rem,2.2vw,1.28rem);
  max-width:52ch;
}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}

/* slide caption transitions (staggered on active) */
.slide .hero-inner > *{opacity:0;transform:translateY(18px)}
.slide.active .hero-inner > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.slide.active .hero-inner > *:nth-child(1){animation-delay:.15s}
.slide.active .hero-inner > *:nth-child(2){animation-delay:.28s}
.slide.active .hero-inner > *:nth-child(3){animation-delay:.40s}
.slide.active .hero-inner > *:nth-child(4){animation-delay:.52s}
@keyframes rise{to{opacity:1;transform:none}}

/* per-slide photo set: soft cross-dissolve between its own photos */
.media .frame{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.media .frame.show{opacity:1}

/* slider controls */
.dots{position:absolute;z-index:4;right:var(--pad);bottom:clamp(40px,8vh,90px);display:flex;gap:10px;flex-direction:column}
.dots button{
  width:11px;height:11px;border-radius:50%;border:1px solid rgba(239,231,216,.55);
  background:transparent;padding:0;transition:.3s;position:relative;
}
.dots button[aria-current="true"]{background:var(--brass);border-color:var(--brass);transform:scale(1.15)}
.arrows{position:absolute;z-index:4;left:var(--pad);bottom:clamp(40px,8vh,90px);display:flex;gap:10px}
.arrows button{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(10,18,20,.4);backdrop-filter:blur(6px);color:var(--sand);
  font-size:18px;display:grid;place-items:center;transition:.25s;
}
.arrows button:hover{border-color:var(--brass);color:var(--brass)}
.scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;color:var(--muted);font-size:12px;letter-spacing:.12em}
@media(max-width:820px){.arrows{display:none}}

/* ---------- single video hero ---------- */
/* Instant first paint: a still frame shows before the video has loaded. Each
   media query downloads only the image it needs. */
.slide--video .media{background:var(--ink) url(../media/hero-poster-desktop.jpg) center/cover no-repeat}
.slide--video .media video{transform:none;animation:none;object-fit:cover}
/* The video has its own centred words, so no dark wash over the left side;
   only a soft shade at the top (the menu and Enquire button sit over bright sky)
   and at the bottom behind the buttons. Both stay clear of the words. */
.slide--video::after{background:linear-gradient(180deg, rgba(6,12,14,.42) 0%, rgba(6,12,14,0) 20%),linear-gradient(0deg, rgba(6,12,14,.70) 0%, rgba(6,12,14,0) 34%)}
/* Phones held sideways (900px wide or less, landscape) load the small still,
   not the desktop one. Upright phones get the portrait still further down; this
   rule must not match them, or they download both. */
@media (max-width:900px) and (orientation: landscape){.slide--video .media{background-image:url(../media/hero-poster-mobile.jpg)}}
/* Near-square screens, and upright screens wider than 900px: filling the screen
   would crop the 16:9 film to its middle strip and cut the words, so show the
   whole frame over a blurred copy of the still instead. Upright phones and
   tablets (900px or less) use the portrait film, so this must not match them
   (it would download the landscape still for nothing). */
@media (max-aspect-ratio: 4/3) and (orientation: landscape), (max-aspect-ratio: 4/3) and (min-width: 901px){
  .slide--video .media{background:var(--ink)}
  .slide--video .media::before{
    content:"";position:absolute;inset:-60px;
    background:url(../media/hero-poster-mobile.jpg) center/cover no-repeat;
    filter:blur(28px) brightness(.55);transform:scale(1.1);
  }
  .slide--video .media video{position:relative;object-fit:contain}
}
/* Upright phones and tablets: main.js loads the 9:16 film (it uses this exact
   media query too), which fills the whole screen. No blurred backdrop. */
@media (orientation: portrait) and (max-width: 900px){
  .slide--video .media{background:var(--ink) url(../media/hero-poster-portrait.jpg) center/cover no-repeat}
  .slide--video .media::before{content:none}
  .slide--video .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
/* Very tall screens (browser bars hidden): filling completely would trim more
   than 6% off each side and clip the first and last letters of the words in
   the film. Keep at least 88% of its width visible; the few pixels left above
   and below show the matching still, so it still looks full screen. */
@media (orientation: portrait) and (max-width: 900px) and (max-aspect-ratio: 495/1000){
  .slide--video .media video{inset:auto 0;top:50%;height:calc(100vw * 1000 / 495);transform:translateY(-50%)}
}
.sound-toggle{
  position:absolute;z-index:5;right:var(--pad);top:calc(env(safe-area-inset-top, 0px) + 92px);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;min-width:46px;padding:0 16px;border-radius:100px;
  border:1px solid var(--line);background:rgba(10,18,20,.45);backdrop-filter:blur(6px);
  color:var(--sand);font:600 13px/1 var(--font-sans);letter-spacing:.06em;
  cursor:pointer;transition:border-color .2s,color .2s;
}
.sound-toggle:hover,.sound-toggle:focus-visible{border-color:var(--brass);color:var(--brass)}
.sound-toggle .ico-on{display:none}
.sound-toggle[aria-pressed="true"] .ico-on{display:block}
.sound-toggle[aria-pressed="true"] .ico-off{display:none}
@media(max-width:600px){
  .sound-toggle{width:46px;padding:0;top:calc(env(safe-area-inset-top, 0px) + 96px)}
  .sound-toggle .sound-label{display:none}
  /* Keep the hero buttons above the floating Enquire button. */
  .slide--video .hero-inner{padding-bottom:calc(clamp(40px,8vh,86px) + 64px)}
  .hero .scrollcue{display:none}
}
/* Phones held sideways: the 600px minimum height pushed the buttons and the
   second line of the video words below the bottom of the screen. */
@media (orientation:landscape) and (max-height:500px){.hero{min-height:0}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:2px;font-size:15px;font-weight:600;
  border:1px solid transparent;transition:.22s;
}
.btn-gold{background:var(--brass);color:#1b1405}
.btn-gold:hover{background:var(--brass-2)}
.btn-ghost{border-color:var(--line);color:var(--sand);background:transparent}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}

/* ---------- intro strip ---------- */
.intro{padding:clamp(64px,10vw,120px) 0}
.intro .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,6vw,80px);align-items:start}
.intro h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.01em}
.intro p{color:var(--muted);max-width:60ch}
.intro .lead{color:var(--sand);font-size:1.12rem}
.stats{display:flex;gap:40px;margin-top:38px;flex-wrap:wrap}
.stat b{font-family:var(--font-serif);font-size:2.4rem;color:var(--brass-2);display:block;font-weight:600}
.stat span{color:var(--muted);font-size:13.5px;letter-spacing:.04em}
@media(max-width:820px){.intro .grid{grid-template-columns:1fr;gap:24px}}

/* ---------- projects (editorial, not uniform cards) ---------- */
.projects{padding-bottom:clamp(64px,10vw,120px)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:40px}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.section-head p{color:var(--muted);margin:6px 0 0}
.plist{display:grid;gap:26px}
.project{
  position:relative;display:grid;grid-template-columns:1.15fr 1fr;
  min-height:380px;overflow:hidden;border:1px solid var(--line);
  background:var(--ink-2);
}
.project:nth-child(even){grid-template-columns:1fr 1.15fr}
.project:nth-child(even) .p-media{order:2}
.p-media{position:relative;overflow:hidden;min-height:280px}
.p-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.project:hover .p-media img{transform:scale(1.05)}
.p-media .tag{position:absolute;top:16px;left:16px;background:rgba(8,15,17,.7);backdrop-filter:blur(6px);border:1px solid var(--line);color:var(--brass-2);font-size:12px;letter-spacing:.08em;padding:6px 12px}
.p-body{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.p-body h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.p-loc{color:var(--brass-2);font-size:14px;letter-spacing:.02em}
.p-body p{color:var(--muted);margin:0}
.p-specs{display:flex;gap:22px;flex-wrap:wrap;margin-top:6px;color:var(--sand);font-size:14px}
.p-specs span{color:var(--muted)}
.p-body .btn{align-self:flex-start;margin-top:8px}
@media(max-width:820px){
  .project,.project:nth-child(even){grid-template-columns:1fr}
  .project:nth-child(even) .p-media{order:0}
}

/* ---------- why sunset properties (#why) ---------- */
.why{background:var(--ink-2);border-block:1px solid var(--line);padding:clamp(64px,9vw,110px) 0}
.why .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.why .cell{background:var(--ink-2);padding:30px 26px}
.why .cell b{font-family:var(--font-serif);font-size:1.35rem;color:var(--sand);display:block;margin-bottom:8px;font-weight:600}
.why .cell p{color:var(--muted);font-size:14.5px;margin:0}
.why h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:36px;max-width:20ch}
@media(max-width:900px){.why .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.why .grid{grid-template-columns:1fr}}

/* ---------- contact form ---------- */
.contact{padding-block:clamp(64px,10vw,120px)}
.contact .grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,6vw,80px);align-items:start}
.contact .grid > *,.cform > *{min-width:0}
.contact h2{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.01em}
.contact-intro p{color:var(--muted);max-width:46ch}
.contact-intro p b{color:var(--sand);font-weight:600}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.cf-full{grid-column:1 / -1}
.cf-field{display:flex;flex-direction:column;gap:8px}
.cf-field label{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;overflow-wrap:anywhere}
.cf-field label small{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400}
/* 16px minimum: iOS Safari zooms into smaller text boxes and stays zoomed (see the chat box). */
.cf-field input:not([type=checkbox]),.cf-field textarea{
  width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:2px;
  color:var(--sand);font:16px/1.5 var(--font-sans);padding:13px 14px;
}
.cf-field textarea{min-height:150px;resize:vertical}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--brass)}
.cf-field [aria-invalid="true"]{border-color:var(--err)}
.cf-err{color:var(--err);font-size:13.5px;margin:0}
.cf-consent{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start}
.cf-consent input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--brass)}
.cf-consent input[aria-invalid="true"]{outline:2px solid var(--err);outline-offset:2px}
.cf-consent label{font-size:14px;letter-spacing:0;text-transform:none;font-weight:400;line-height:1.55}
.cf-consent label a{color:var(--brass-2);text-decoration:underline}
.cf-consent .cf-err{grid-column:2}
.cf-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cform .btn:disabled{opacity:.55;cursor:wait}
.cf-status{margin:0;color:var(--muted);font-size:14.5px}
.cf-status.is-error{color:var(--err)}
.cf-done{background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--brass);padding:26px 28px}
.cf-done:focus{outline:none}
.cf-done > b{display:block;font-family:var(--font-serif);font-size:1.4rem;font-weight:600;color:var(--sand);margin-bottom:6px}
.cf-done p{color:var(--muted);margin:0}
.cf-done p b{color:var(--sand)}
@media(max-width:820px){
  .contact .grid{grid-template-columns:1fr;gap:26px}
  .cform{grid-template-columns:1fr}
}

/* ---------- footer ---------- */
.foot{padding:clamp(56px,8vw,90px) 0 40px}
.foot .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h4{font-family:var(--font-sans);font-size:13px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin:0 0 16px;font-weight:600}
.foot a{color:var(--muted);display:block;padding:5px 0;font-size:14.5px;transition:.2s}
.foot a:hover{color:var(--brass-2)}
.foot .blurb{color:var(--muted);max-width:44ch;font-size:14.5px;margin:16px 0 0}
.social{display:flex;gap:14px;margin-top:20px}
.social a{width:40px;height:40px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.social a:hover{border-color:var(--brass);color:var(--brass)}
.foot .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:46px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
.foot .legal a{display:inline;color:var(--muted)}
.foot .legal a:hover{color:var(--brass-2)}
@media(max-width:820px){.foot .top{grid-template-columns:1fr;gap:26px}}

/* ---------- floating enquire button ---------- */
.enquire-fab{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 22px;border-radius:100px;border:1px solid var(--brass);
  background:var(--brass);color:#1b1405;font-weight:700;font-size:15px;
  box-shadow:var(--shadow);transition:transform .2s, background .2s;
}
.enquire-fab:hover{transform:translateY(-2px);background:var(--brass-2)}
.enquire-fab .pulse{width:9px;height:9px;border-radius:50%;background:#1b1405;position:relative}
.enquire-fab .pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid #1b1405;opacity:.5;animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.9);opacity:0}}

/* ---------- chat panel ---------- */
.chat{
  position:fixed;right:22px;bottom:22px;z-index:70;width:min(400px,calc(100vw - 28px));
  height:min(640px,calc(100svh - 40px));
  background:var(--sheet);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(20px) scale(.98);pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.chat.open{opacity:1;transform:none;pointer-events:auto}
@media(max-width:520px){.chat{left:0;right:0;bottom:0;width:auto;height:100svh;border-radius:0}}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(201,162,75,.10),transparent)}
.chat-head .avatar{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--brass-2),#8a6b23);display:grid;place-items:center;color:#1b1405;font-weight:800;font-family:var(--font-serif)}
.chat-head .avatar--logo{width:auto;height:38px;padding:0;border-radius:0;background:none}
.chat-head .avatar--logo img{height:32px;width:auto;max-width:none;display:block}
.chat-head .who{flex:1}
.chat-head .who b{font-size:15px}
.chat-head .who span{display:block;color:var(--ok);font-size:12px}
.chat-head .who span i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:6px}
.chat-save{background:none;border:0;color:var(--muted);font-size:17px;line-height:1;padding:4px 8px}
.chat-save:hover{color:var(--sand)}
.chat-close{background:none;border:0;color:var(--muted);font-size:22px;line-height:1;padding:4px 8px}
.chat-close:hover{color:var(--sand)}
.chat-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.5;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.bot{align-self:flex-start;background:var(--ink-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:var(--brass);color:#1b1405;border-bottom-right-radius:4px;font-weight:500}
.msg a{color:var(--brass-2);text-decoration:underline}
.msg.me a{color:#3a2c06}
.typing{align-self:flex-start;display:flex;gap:5px;padding:14px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 8px}
.chip{padding:9px 14px;border:1px solid var(--line);background:transparent;color:var(--sand);border-radius:100px;font-size:13.5px;transition:.2s}
.chip:hover{border-color:var(--brass);color:var(--brass)}

/* ---- multi-select property types ---- */
.chip-toggle[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#1b1405;font-weight:600}
.chip-cta{background:var(--brass);border-color:var(--brass);color:#1b1405;font-weight:600}
.chip-cta:hover:not(:disabled){background:var(--brass-2);border-color:var(--brass-2);color:#1b1405}
.chip-cta:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--muted);border-color:var(--line)}

/* ---- in-chat project picker ---- */
.picker{width:100%;display:flex;flex-direction:column;gap:8px}
.sortbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px}
.sortbar button{padding:6px 11px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:100px;font-size:12px;transition:.2s}
.sortbar button:hover{border-color:var(--brass);color:var(--brass)}
.sortbar button[aria-pressed="true"]{background:var(--ink-2);border-color:var(--brass);color:var(--brass);font-weight:600}
.pmini-town{font-family:var(--font-serif);color:var(--sand);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 -2px}
.pmini{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:11px 13px;border:1px solid var(--line);background:var(--ink-2);border-radius:10px;transition:.2s}
.pmini:hover{border-color:var(--brass);transform:translateX(2px)}
.pmini-name{color:var(--sand);font-weight:600;font-size:14px}
.pmini-meta{color:var(--muted);font-size:12px}
.pmini-price{color:var(--brass-2);font-size:12.5px;font-weight:600;margin-top:2px}
.chat-foot{border-top:1px solid var(--line);padding:12px 14px;display:flex;gap:8px;align-items:flex-end}
/* 16px minimum: iOS Safari zooms the whole page in when a smaller text box is
   tapped and stays zoomed, which cut words off and let the page slide sideways. */
.chat-foot textarea{
  flex:1;resize:none;background:var(--ink);border:1px solid var(--line);color:var(--sand);
  border-radius:10px;padding:11px 12px;font-family:inherit;font-size:16px;max-height:120px;min-height:44px;
}
.chat-foot textarea:focus{outline:none;border-color:var(--brass)}
.chat-send{width:44px;height:44px;flex:none;border:0;border-radius:10px;background:var(--brass);color:#1b1405;font-size:18px;display:grid;place-items:center}
.chat-send:disabled{opacity:.4}
.consent-note{padding:10px 18px 14px;color:var(--muted);font-size:11.5px;line-height:1.5;border-top:1px solid var(--line)}
.consent-note a{color:var(--brass-2);text-decoration:underline}
.field-err{color:var(--err);font-size:12.5px;padding:0 18px 6px}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed;left:22px;bottom:22px;z-index:55;max-width:400px;
  background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;
  box-shadow:var(--shadow);font-size:13.5px;color:var(--muted);
  transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.cookie.show{transform:none}
.cookie b{color:var(--sand);font-family:var(--font-serif);font-weight:600;font-size:1rem}
.cookie p{margin:8px 0 14px}
.cookie a{color:var(--brass-2);text-decoration:underline}
.cookie .row{display:flex;gap:10px}
/* GDPR: the reject control must be as easy and as prominent as accept.
   Same width, padding, weight and affordance - only the hue differs.
   Do not restyle one of these without the other. */
.cookie .row .btn{flex:1;padding:11px 14px;font-size:13.5px;font-weight:600;text-align:center}
.btn-decline{background:var(--ink-2);color:var(--sand);border-color:var(--line)}
.btn-decline:hover{border-color:var(--brass);color:var(--brass)}
.cookie code{font-size:12.5px;color:var(--sand);background:var(--ink-2);padding:1px 5px;border-radius:4px}
.cookie .ck-state{margin:0 0 12px;color:var(--brass-2);font-size:12.5px}
.cookie .ck-fine{margin:12px 0 0;font-size:12px;opacity:.8}
/* On narrow screens the floating Enquire button sits bottom-right and would
   cover the consent controls, so lift the bar clear of it. */
@media(max-width:520px){.cookie{left:12px;right:12px;bottom:78px;max-width:none}}

/* ---------- legal pages ---------- */
.legal-page{max-width:760px;margin:0 auto;padding:130px var(--pad) 90px}
.legal-page h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:8px}
.legal-page .updated{color:var(--muted);font-size:14px;margin-bottom:40px}
.legal-page h2{font-size:1.35rem;margin:38px 0 12px;color:var(--sand)}
.legal-page p,.legal-page li{color:var(--muted);line-height:1.75}
.legal-page a{color:var(--brass-2);text-decoration:underline}
.legal-page .back{display:inline-block;margin-bottom:30px;color:var(--muted)}
.legal-logo{display:block;width:max-content;margin-bottom:22px}
.legal-page .note{background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--brass);padding:16px 18px;margin:22px 0;color:var(--muted);font-size:14.5px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .slide{transition:opacity .3s ease}
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden inputs but still fill positioned ones. Never make this visible. */
.hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---------- property page ---------- */
/* No hero video sits behind these pages, so the top bar is always the dark,
   solid "scrolled" look (main.js still toggles the .scrolled class on scroll,
   but these rules apply regardless, and only the silver logo is included in
   the markup — see Anthony's business rule in CLAUDE.md: gold+black is only
   ever used over the bright hero video). */
.property-page .topbar{background:rgba(8,15,17,.88);backdrop-filter:blur(12px);padding-block:12px;border-bottom:1px solid var(--line)}
.property-page .topbar .logo-on-dark{display:block}

.preview-banner{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--brass);color:#1b1405;text-align:center;font-size:13.5px;font-weight:600;padding:8px var(--pad)}
.preview-banner a{text-decoration:underline;margin-left:10px}

.property{padding-bottom:clamp(60px,8vw,100px)}
.p-back{margin:0 0 18px}
.p-back a{color:var(--muted);font-size:14px}
.p-back a:hover{color:var(--brass)}
.property .section-head{align-items:start}
.p-price{font-family:var(--font-serif);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--brass-2);white-space:nowrap}
.p-specs--lg{margin:6px 0 34px;font-size:15px}

.p-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:44px}
.p-gallery-item{position:relative;display:block;overflow:hidden;background:var(--ink-2);aspect-ratio:4/3}
.p-gallery-item--cover{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}
.p-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.p-gallery-item:hover img{transform:scale(1.04)}
.p-gallery-item--video,.p-gallery-item--video video{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){
  .p-gallery{grid-template-columns:repeat(2,1fr)}
  .p-gallery-item--cover{grid-column:span 2;aspect-ratio:16/10}
}

.p-layout{display:grid;grid-template-columns:1fr 300px;gap:clamp(30px,5vw,60px);align-items:start}
.p-main h2{font-size:1.35rem;margin:0 0 14px}
.p-main h2 + h2{margin-top:34px}
.p-desc{color:var(--muted);line-height:1.8}
.p-amenities{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.p-amenities li{color:var(--sand);font-size:14.5px;padding-left:18px;position:relative}
.p-amenities li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--brass);border-radius:50%}
.p-side{position:sticky;top:100px;display:flex;flex-direction:column;gap:18px}
.p-cta-card{background:var(--ink-2);border:1px solid var(--line);padding:22px;text-align:center}
.p-cta-card b{display:block;font-family:var(--font-serif);font-size:1.3rem;color:var(--brass-2);margin-bottom:2px}
.p-cta-card .btn{width:100%;margin-top:14px}
@media(max-width:900px){.p-layout{grid-template-columns:1fr}.p-side{position:static}}

/* ---------- quick-share bar ---------- */
.share-bar{background:var(--ink-2);border:1px solid var(--line);padding:18px 20px;position:relative}
.share-label{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.share-btns{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{
  min-width:42px;height:38px;padding:0 12px;border-radius:100px;
  border:1px solid var(--line);background:transparent;color:var(--sand);
  font-size:13px;font-weight:600;letter-spacing:.02em;transition:.2s;
}
.share-btn:hover{border-color:var(--brass);color:var(--brass)}
.share-toast{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(6px);
  background:var(--brass);color:#1b1405;font-size:13px;font-weight:600;padding:8px 14px;
  border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:480px){.share-toast{white-space:normal;max-width:220px;text-align:center}}