/* ===== 2/5 COMPONENTS: header · hero (part 1) ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;flex-direction:column;align-items:stretch;
  transition:background .4s,box-shadow .4s}
.site-header.scrolled{background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 40px -18px rgba(57,15,16,.35);
  border-bottom:1px solid rgba(255,255,255,.5)}
.header-topbar{position:relative;z-index:2;flex:0 0 auto;
  background:linear-gradient(90deg,var(--lav-900),var(--lav-700));
  border-bottom:1px solid rgba(255,255,255,.14);color:var(--lav-50)}
.header-topbar-inner{width:min(1320px,94%);margin-inline:auto;min-height:34px;
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;padding:5px 0}
.header-topbar-label{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-300);font-weight:600;margin-right:2px}
.header-topbar a{font-size:.72rem;font-weight:500;color:rgba(253,246,242,.92);
  white-space:nowrap;transition:color .3s}
.header-topbar a:hover{color:var(--gold-200)}
.header-topbar-sep{color:rgba(253,246,242,.42);font-size:.72rem}
.header-inner{width:min(1320px,94%);margin-inline:auto;display:flex;align-items:center;gap:28px;
  height:86px;flex:0 0 auto;transition:height .4s var(--ease)}
.site-header.scrolled .header-inner{height:68px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--font-serif);font-size:1.25rem;font-weight:700;color:#fff;
  background:var(--grad-lav);box-shadow:var(--shadow-gold);
  border:1px solid rgba(255,255,255,.35)}
.brand-logo{height:70px;width:auto;max-width:270px;display:block;border-radius:8px;
  background:rgba(255,255,255,.04);padding:4px 10px}
.brand-text{font-family:var(--font-serif);font-size:1.38rem;font-weight:700;color:#fff;line-height:1}
.site-header.scrolled .brand-text{color:var(--ink)}
.brand-text small{display:block;font-family:var(--font-sans);font-size:.58rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold-400);
  font-weight:500;margin-top:3px}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:4px}
.main-nav a{position:relative;display:block;padding:10px 13px;font-size:.82rem;
  font-weight:500;color:rgba(255,255,255,.92)}
.site-header.scrolled .main-nav a{color:var(--ink-soft)}
.main-nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:1.5px;
  background:var(--grad-gold);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto;z-index:120}
.nav-toggle span{width:26px;height:2px;background:#fff;border-radius:2px;transition:.35s var(--ease)}
.site-header.scrolled .nav-toggle span,body.nav-open .nav-toggle span{background:var(--ink)}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.book-header-btn{flex-shrink:0}

/* ---------- Hero (video parallax) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-media{position:absolute;inset:-6% 0;z-index:0;will-change:transform}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:var(--grad-hero)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:2;
  background:linear-gradient(180deg,transparent,var(--lav-50))}
.hero-content{position:relative;z-index:3;width:min(1200px,92%);margin-inline:auto;
  color:#fff;text-align:center;padding-top:var(--header-h)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:.74rem;
  letter-spacing:.4em;text-transform:uppercase;color:var(--gold-200);font-weight:500;
  padding:9px 22px;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.hero h1{font-family:var(--font-serif);font-weight:600;line-height:1.04;
  font-size:clamp(2.6rem,6.4vw,5rem);margin:26px 0 20px;
  text-shadow:0 10px 40px rgba(20,10,45,.55)}
.hero h1 em{font-style:italic;background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{max-width:760px;margin:0 auto 34px;color:rgba(255,255,255,.9);
  font-size:1.06rem;font-weight:300}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:clamp(24px,5vw,64px);justify-content:center;margin-top:54px;
  padding:22px 34px;margin-inline:auto;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px) saturate(150%)}
.hero-stats b{display:block;font-family:var(--font-serif);font-size:2rem;color:var(--gold-200)}
.hero-stats span{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.85)}
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;
  color:#fff;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.85}
.scroll-hint::after{content:"";width:1.5px;height:44px;
  background:linear-gradient(var(--gold-200),transparent);
  animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}
  100%{transform:scaleY(0);transform-origin:bottom}}
/* ===== COMPONENTS (part 2): grids · property cards ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.prop-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--glass-deep);border:1px solid var(--glass-border);
  box-shadow:var(--shadow-card);transform-style:preserve-3d;
  transition:box-shadow .5s var(--ease)}
.prop-card:hover{box-shadow:var(--shadow-soft)}
.prop-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.prop-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.prop-card:hover .prop-media img{transform:scale(1.08)}
.prop-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(57,15,16,.55))}
.prop-badge{position:absolute;top:14px;left:14px;z-index:2;padding:6px 14px;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:#fff;border-radius:var(--radius-pill);
  background:rgba(57,15,16,.45);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px)}
.prop-body{position:relative;padding:22px 24px 24px;display:flex;
  flex-direction:column;gap:8px}
.prop-city{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-600);font-weight:600}
.prop-name{font-family:var(--font-serif);font-size:1.45rem;font-weight:600;line-height:1.15}
.prop-desc{font-size:.88rem;color:var(--ink-soft)}
.prop-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.prop-actions .btn{flex:1}