/* ============================================================
   2435 McKay Avenue — luxury one-pager
   Emerald + onyx, Bodoni Moda headings, Inter body
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --bg:        #060807;
  --bg-2:      #0a0d0b;
  --surface:   #0f1411;
  --surface-2: #141a17;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  --ink:       #ece9e0;   /* warm off-white */
  --ink-mute:  #9aa39c;
  --ink-dim:   #6c7670;

  --em:        #14b88a;   /* emerald primary */
  --em-2:      #0c8f6a;   /* emerald deep */
  --em-3:      #1ee2a8;   /* emerald glow */
  --gold:      #c9a45e;   /* warm complement */

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --shadow-1: 0 30px 80px -30px rgba(0,0,0,.7);
  --shadow-2: 0 50px 120px -40px rgba(0,0,0,.85);
  --shadow-em: 0 30px 90px -30px rgba(20,184,138,.35);

  --serif: "Bodoni Moda", "Cormorant Garamond", Georgia, serif;
  --serif-2: "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --maxw: 1320px;
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body{ margin:0; padding:0; background:var(--bg); color:var(--ink); }
html{ -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .005em;
  overflow-x: clip;
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(20,184,138,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(20,184,138,.05), transparent 60%),
    var(--bg);
}
body.no-scroll{ overflow:hidden; height:100vh; }

img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; transition: color .25s ease; }
a:hover{ color: var(--em-3); }
button{ font-family: inherit; cursor: pointer; }

::selection{ background: var(--em); color:#03130d; }

/* scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background: #0a0d0b; }
::-webkit-scrollbar-thumb{ background: #1c2622; border-radius:4px; }

/* ---------- TYPOGRAPHY ---------- */
.h{
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.h em{ font-style: italic; font-family: var(--serif-2); font-weight:300; color: var(--em-3); }
.h--lg{ font-size: clamp(28px, 3.4vw, 46px); }
.h--xl{ font-size: clamp(34px, 4.6vw, 64px); }
.h--xxl{ font-size: clamp(40px, 6vw, 88px); line-height: .98; }

.section-num{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--em-3);
  margin-bottom: 18px;
  font-weight: 500;
}
.section-lede{
  font-family: var(--serif-2);
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-mute);
  font-style: italic;
  max-width: 560px;
}
.lede{
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--ink);
  line-height: 1.65;
  max-width: 56ch;
}
.dimmed{ color: var(--ink-mute); }

/* ---------- LAYOUT ---------- */
.container{ width: 92%; max-width: var(--maxw); margin: 0 auto; }
.section{ padding: clamp(80px, 11vw, 160px) 0; position: relative; }
.section-head{ margin-bottom: clamp(40px, 5vw, 80px); max-width: 960px; }
.section-head--center{ text-align: center; margin-left:auto; margin-right:auto; }
.section-head--row{
  display:flex; align-items:flex-end; justify-content: space-between; gap:24px; flex-wrap:wrap;
}

.divider{
  display:block; height:1px; background: var(--line-2); border:0;
  margin: 28px 0; width: 100%;
}
.divider--thin{ width: 64px; background: var(--em); height:1px; }

/* ---------- BUTTONS ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 14px;
  letter-spacing: .04em;
  border: 1px solid transparent;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, border-color .25s, box-shadow .35s;
  position: relative;
  white-space: nowrap;
}
.btn--sm{ padding: 10px 18px; font-size: 12.5px; }
.btn--lg{ padding: 18px 32px; font-size: 14.5px; }

.btn--solid{
  background: var(--em);
  color: #03130d;
  box-shadow: 0 15px 40px -10px rgba(20,184,138,.4), inset 0 0 0 1px rgba(255,255,255,.12);
}
.btn--solid:hover{
  background: var(--em-3);
  color: #021a11;
  box-shadow: 0 25px 60px -15px rgba(30,226,168,.55);
  transform: translateY(-2px);
}
.btn--ghost{
  background: rgba(255,255,255,.03);
  color: var(--ink);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover{
  background: rgba(20,184,138,.08);
  border-color: var(--em);
  color: var(--em-3);
  transform: translateY(-2px);
}

.btn i{ font-size: .9em; }

/* ---------- PRELOADER ---------- */
.preloader{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: grid; place-items: center;
  overflow: hidden;
}
.preloader::before{
  content:""; position: absolute; inset:0;
  background:
    radial-gradient(600px 400px at 50% 30%, rgba(20,184,138,.12), transparent 65%),
    radial-gradient(800px 500px at 50% 100%, rgba(20,184,138,.06), transparent 70%);
}
.preloader__inner{ position: relative; text-align:center; padding: 0 20px; width: min(720px, 92%); }
.preloader__tag{
  font-size: 11.5px; letter-spacing: .4em; color: var(--em-3); text-transform: uppercase;
  margin-bottom: 26px; opacity: 0;
}
.preloader__addr{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1;
  margin: 0 0 14px;
  display: flex; gap: .25em; justify-content: center; flex-wrap: wrap;
}
.preloader__addr span{
  display: inline-block; opacity: 0; transform: translateY(40px);
}
.preloader__sub{
  font-family: var(--serif-2); font-style: italic; color: var(--ink-mute);
  font-size: clamp(14px, 1.4vw, 18px); margin-bottom: 44px; opacity: 0;
}
.preloader__bar{
  height: 1px; background: rgba(255,255,255,.08);
  margin: 0 auto; width: min(420px, 80%);
  overflow: hidden;
}
.preloader__bar-fill{
  height: 100%; width: 0; background: linear-gradient(90deg, var(--em-2), var(--em-3));
  box-shadow: 0 0 12px rgba(30,226,168,.6);
}
.preloader__pct{
  margin-top: 14px;
  font-size: 11px; letter-spacing: .3em; color: var(--ink-mute);
  opacity: 0;
}
.preloader__pct i{ font-style: normal; opacity:.6; }
.preloader.is-done{ pointer-events: none; }

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{
  position: fixed; top: 0; left: 0; right:0; height: 2px;
  background: linear-gradient(90deg, var(--em-2), var(--em-3));
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 200;
  box-shadow: 0 0 12px rgba(30,226,168,.45);
}

/* ---------- NAV ---------- */
.nav{
  position: fixed; top: 0; left:0; right:0; z-index: 150;
  padding: 22px clamp(20px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  transition: padding .35s ease, background .35s ease, backdrop-filter .35s ease, border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  padding: 14px clamp(20px, 4vw, 56px);
  background: rgba(8,10,9,.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__brand{
  display:flex; align-items: center; gap: 12px; font-family: var(--serif);
  font-size: 18px; letter-spacing: .02em;
}
.nav__brand-mark{
  display:inline-grid; place-items:center;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--em-2), var(--em));
  color:#031a11; font-weight: 700; font-family: var(--sans); font-size: 12px; letter-spacing: .02em;
}
.nav__brand-text em{ font-style: italic; color: var(--em-3); }
.nav__links{
  display:flex; gap: clamp(14px, 2.2vw, 32px);
  font-size: 13px; letter-spacing: .04em;
  color: var(--ink-mute);
}
.nav__links a{ position: relative; padding: 6px 0; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom: -2px; height:1px;
  background: var(--em-3); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover{ color: var(--ink); }
.nav__links a:hover::after{ transform: scaleX(1); }
.nav__cta{ display: inline-flex; }
.nav__burger{
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  padding: 0;
}
.nav__burger span{ display:block; width: 18px; height: 1px; background: var(--ink); transition: transform .25s; }

/* drawer */
.drawer{
  position: fixed; inset: 0; z-index: 180;
  background: rgba(6,8,7,.92);
  backdrop-filter: blur(24px);
  display: none; place-items: center; padding: 40px 20px;
}
.drawer.is-open{ display: grid; }
.drawer__close{
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line-2); color: var(--ink); font-size: 18px;
}
.drawer__inner{
  display: flex; flex-direction: column; gap: 18px; text-align:center;
  font-family: var(--serif); font-size: 28px;
}
.drawer__inner .btn{ font-family: var(--sans); align-self: center; margin-top: 24px; }

/* ---------- HERO ---------- */
.hero{
  position: relative;
  height: 100svh; min-height: 640px;
  overflow: hidden;
  isolation: isolate;
}
.hero__media{ position: absolute; inset: 0; overflow: hidden; }
.hero__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  transform: scale(1.08);
  will-change: transform;
}
.hero__img--photo{ z-index: 1; }
.hero__img--video{
  z-index: 2;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
  background: #060807;
}
.hero__img--video.is-playing{
  opacity: 1; visibility: visible;
  transition: opacity .8s ease, visibility 0s linear 0s;
}
.hero__overlay, .hero__grain{ z-index: 3; }
.hero__grain{ z-index: 4; }

/* hero play button */
.hero__playbtn{
  position: absolute; top: 100px; right: clamp(20px, 4vw, 48px);
  z-index: 10;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 14px;
  border-radius: 999px;
  background: rgba(10, 14, 12, .55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--ink);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .3s, border-color .3s, transform .35s, opacity .5s, visibility 0s;
  overflow: hidden;
  isolation: isolate;
}
.hero__playbtn::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(120px 80px at var(--bx,50%) var(--by,50%), rgba(20,184,138,.25), transparent 70%);
  opacity: 0; transition: opacity .3s; z-index: -1;
}
.hero__playbtn:hover{
  border-color: rgba(30,226,168,.5);
  transform: translateY(-2px);
}
.hero__playbtn:hover::before{ opacity: 1; }
.hero__playbtn i{
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--em);
  color: #03130d;
  font-size: 10px;
  margin-left: 2px;
}
.hero__playbtn-ring{
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  pointer-events: none;
  animation: heroBtnPulse 2.4s ease-out infinite;
}
@keyframes heroBtnPulse{
  0%{ box-shadow: 0 0 0 0 rgba(30,226,168,.55); }
  70%{ box-shadow: 0 0 0 16px rgba(30,226,168,0); }
  100%{ box-shadow: 0 0 0 0 rgba(30,226,168,0); }
}
.hero__playbtn.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce){
  .hero__img--video{ display: none; }
  .hero__playbtn{ display: none; }
}
@media (max-width: 820px){
  .hero__playbtn{ top: 80px; padding: 10px 16px 10px 12px; font-size: 12px; }
  .hero__playbtn-label{ display: none; }
  .hero__playbtn-ring, .hero__playbtn i{ width: 28px; height: 28px; }
}
.hero__overlay{
  position: absolute; inset:0;
  background:
    /* left-side scrim — guarantees title legibility */
    linear-gradient(100deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.38) 48%, rgba(0,0,0,.15) 68%, transparent 92%),
    /* vertical scrim */
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.18) 30%, rgba(6,8,7,.5) 65%, rgba(6,8,7,.95) 100%),
    /* subtle emerald wash */
    radial-gradient(50% 60% at 20% 70%, rgba(20,184,138,.12), transparent 70%);
}
.hero__img{ filter: brightness(.92) saturate(1.04); }
.hero__grain{
  position: absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.4; mix-blend-mode: overlay; pointer-events: none;
}
.hero__content{
  position: relative; z-index: 5;
  width: 92%; max-width: var(--maxw); margin: 0 auto;
  padding-top: clamp(120px, 16vh, 200px);
  padding-bottom: 120px;
  display: flex; flex-direction: column; gap: 26px;
}
.hero__tag{
  font-size: 11.5px; letter-spacing: .4em; text-transform: uppercase; color: var(--em-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.hero__title{
  font-family: var(--serif);
  font-size: clamp(44px, 8vw, 124px);
  font-weight: 400;
  line-height: .98; letter-spacing: -.015em;
  margin: 0;
  max-width: 14ch;
  text-shadow:
    0 2px 30px rgba(0,0,0,.85),
    0 4px 18px rgba(0,0,0,.6),
    0 1px 2px rgba(0,0,0,.55);
}
.hero__title span{ display: block; overflow: hidden; }
.hero__title span > em,
.hero__title em{ font-style: italic; font-family: var(--serif-2); font-weight: 300; color: var(--em-3); }

.hero__meta{
  display: flex; align-items: center; gap: clamp(24px, 4vw, 60px); flex-wrap: wrap;
  margin-top: 12px;
}
.hero__addr{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #d8d5cc;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hero__addr i{ color: var(--em-3); }
.hero__price{ display:flex; align-items: baseline; gap: 12px; }
.hero__price-sub{ font-size: 12px; letter-spacing: .25em; color: var(--ink-dim); text-transform: uppercase; }
.hero__price-val{
  font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); color: var(--ink);
  letter-spacing: -.01em;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.hero__tag-line{
  font-family: var(--serif-2); font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  color: #d8d5cc; max-width: 50ch;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.hero__ctas{ display:flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hero__scroll{
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3;
  font-size: 11px; letter-spacing: .35em; text-transform: uppercase; color: var(--ink-mute);
}
.hero__scroll-line{
  width: 1px; height: 44px; background: linear-gradient(180deg, transparent, var(--em-3));
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse{ 0%,100%{ transform: scaleY(.4); opacity:.4; } 50%{ transform: scaleY(1); opacity:1; } }

.hero__floats span{
  position: absolute; border-radius: 50%; filter: blur(60px);
  pointer-events: none;
  mix-blend-mode: screen;
}
.float--a{ width: 320px; height: 320px; background: rgba(20,184,138,.25); top: 10%; left: -80px; }
.float--b{ width: 220px; height: 220px; background: rgba(30,226,168,.18); bottom: 18%; right: -60px; }
.float--c{ width: 180px; height: 180px; background: rgba(201,164,94,.12); top: 40%; right: 30%; }

/* ---------- INFOBAR ---------- */
.infobar-wrap{
  margin-top: -56px;
  padding: 0 4%;
  position: relative; z-index: 5;
}
.infobar{
  display: grid;
  grid-template-columns: repeat(7, 1fr) auto;
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: var(--maxw);
  margin: 0 auto;
  box-shadow: var(--shadow-2);
}
.glass{
  background: rgba(15, 20, 17, .72);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--line);
}
.infobar__cell{
  background: rgba(10,13,11,.7);
  padding: 22px 22px;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.infobar__cell--cta{ display: grid; place-items: center; }
.infobar__k{ font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase; color: var(--em-3); }
.infobar__v{ font-family: var(--serif); font-size: clamp(16px, 1.5vw, 22px); color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }

/* ---------- SPLIT (INTRO) ---------- */
.section--intro{ padding-top: clamp(120px, 14vw, 180px); }
.split{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.split__copy p + p{ margin-top: 18px; }
.split__meta{ display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; font-size: 13px; color: var(--ink-mute); }
.split__meta span{ display:inline-flex; align-items:center; gap: 8px; }
.split__meta i{ color: var(--em-3); }
.split__media{
  position: relative; aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  margin: 0;
}
.split__media img{ width:100%; height:100%; object-fit: cover; transform: scale(1.05); }
.split__media figcaption{
  position: absolute; bottom: 18px; left: 18px;
  font-family: var(--serif-2); font-style: italic;
  font-size: 13px; color: var(--ink-mute);
  background: rgba(0,0,0,.4); padding: 8px 14px; border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* ---------- AERIAL BAND ---------- */
.aerial{
  position: relative; height: clamp(420px, 70vh, 720px);
  overflow: hidden;
  display: grid; place-items: center;
  margin: 80px 0;
}
.aerial img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; will-change: transform; transform: scale(1.1); }
.aerial__overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,8,7,.4), rgba(6,8,7,.85)); }
.aerial__quote{
  position: relative; z-index: 1; text-align: center; padding: 0 20px;
  max-width: 720px;
}
.aerial__quote p{
  font-family: var(--serif); font-size: clamp(22px, 3vw, 38px);
  line-height: 1.25; color: var(--ink); font-weight: 400; letter-spacing: -.01em;
}
.quotemark{
  font-family: var(--serif); font-size: 120px; line-height: 0;
  color: var(--em-3); display:block; margin-bottom: 30px;
}

/* ---------- SHOWCASE ---------- */
.showcase .room{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  padding: clamp(60px, 9vw, 130px) 0;
  position: relative;
}
.showcase .room--right{ direction: rtl; }
.showcase .room--right > *{ direction: ltr; }
.showcase .room > *{ min-width: 0; }

.room__media{
  position: relative;
  aspect-ratio: 5/6;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.room__media img{
  width: 100%; height: 110%; object-fit: cover;
  transform: translate3d(0,0,0); will-change: transform;
}
.room__copy{ max-width: 520px; }
.room__num{
  font-family: var(--serif-2); font-style: italic; font-size: 22px;
  color: var(--em-3); margin-bottom: 12px;
}
.room__eyebrow{
  font-size: 11.5px; letter-spacing: .35em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 18px;
}
.room__copy h3{ margin: 0 0 22px; }
.room__copy p{ color: var(--ink); }
.room__list{
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.room__list li{
  font-size: 13.5px; color: var(--ink-mute);
  display:flex; align-items: center; gap: 12px;
}
.room__list li::before{
  content:""; display:inline-block; width: 18px; height: 1px; background: var(--em-3);
}

/* ---------- STATS ---------- */
.stats__grid{
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat{
  padding: clamp(40px, 6vw, 80px) 20px;
  text-align: center;
  border-right: 1px solid var(--line);
  position: relative;
}
.stat:last-child{ border-right: 0; }
.stat__num{
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 90px);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.stat__num i{ font-style: normal; font-size: .3em; color: var(--ink-mute); margin-left: 10px; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
.stat__label{
  margin-top: 14px;
  font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--em-3);
}

/* ---------- GALLERY ---------- */
.gallery{
  column-count: 3;
  column-gap: 18px;
}
.gallery__item{
  display: block;
  margin: 0 0 18px;
  break-inside: avoid;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  box-shadow: var(--shadow-1);
}
.gallery__item img{
  width: 100%; height: auto; display:block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s;
}
.gallery__item::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7) 100%);
  opacity: 0; transition: opacity .35s;
}
.gallery__item .gi__cap{
  position: absolute; left: 16px; bottom: 14px;
  z-index: 2; font-family: var(--serif-2); font-style: italic;
  font-size: 14px; color: var(--ink);
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.gallery__item:hover img{ transform: scale(1.07); filter: brightness(1.05); }
.gallery__item:hover::after{ opacity: 1; }
.gallery__item:hover .gi__cap{ opacity: 1; transform: translateY(0); }

/* ---------- FILM CTA (lightbox) ---------- */
.film-sec{ padding: clamp(60px, 9vw, 130px) 0; }
.film-card{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  background: rgba(15,20,17,.6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
  text-decoration: none;
  color: inherit;
  transition: border-color .35s, transform .45s, box-shadow .45s;
  position: relative;
  overflow: hidden;
}
.film-card:hover{
  border-color: rgba(30,226,168,.4);
  transform: translateY(-3px);
  box-shadow: var(--shadow-em);
}
.film-card::before{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(600px 200px at var(--mx,30%) var(--my,50%), rgba(20,184,138,.12), transparent 60%);
  opacity: 0; transition: opacity .4s; pointer-events:none;
}
.film-card:hover::before{ opacity: 1; }
.film-card__thumb{
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
}
.film-card__thumb img{
  width:100%; height:100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s;
  filter: brightness(.85) saturate(.95);
}
.film-card:hover .film-card__thumb img{ transform: scale(1.06); filter: brightness(.7); }
.film-card__play{
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #03130d; font-size: 22px;
}
.film-card__play::before{
  content:""; position: absolute;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--em);
  box-shadow: 0 20px 60px -10px rgba(20,184,138,.6), 0 0 0 0 rgba(30,226,168,.5);
  animation: filmPulse 2.2s ease-out infinite;
  z-index: 0;
}
.film-card__play i{ position: relative; z-index: 1; margin-left: 4px; }
@keyframes filmPulse{
  0%{ box-shadow: 0 20px 60px -10px rgba(20,184,138,.6), 0 0 0 0 rgba(30,226,168,.45); }
  70%{ box-shadow: 0 20px 60px -10px rgba(20,184,138,.4), 0 0 0 28px rgba(30,226,168,0); }
  100%{ box-shadow: 0 20px 60px -10px rgba(20,184,138,.4), 0 0 0 0 rgba(30,226,168,0); }
}
.film-card__copy{ position: relative; z-index: 2; }
.film-card__copy h2{ margin: 6px 0 16px; }
.film-card__copy p{ color: var(--ink-mute); max-width: 46ch; margin: 0 0 22px; }
.film-card__cta{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--em-3);
  border-bottom: 1px solid rgba(30,226,168,.35);
  padding: 6px 0;
  transition: color .25s, border-color .25s, gap .35s;
}
.film-card:hover .film-card__cta{ color: var(--ink); border-color: var(--ink); gap: 16px; }
@media (max-width: 820px){
  .film-card{ grid-template-columns: 1fr; }
  .film-card__play::before{ width: 76px; height: 76px; }
}

/* ---------- MATTERPORT TOUR ---------- */
.tour-frame{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-2);
  isolation: isolate;
}
.tour-frame::before{
  content:""; position: absolute; inset: -2px;
  background: conic-gradient(from 0deg, var(--em-3), transparent 25%, var(--em-2) 50%, transparent 75%, var(--em-3));
  z-index: -2; filter: blur(18px); opacity: .55;
  animation: glowSpin 8s linear infinite;
}
.tour-frame::after{
  content:""; position: absolute; inset: 0;
  border-radius: var(--r-lg);
  border: 1px solid rgba(30,226,168,.35);
  pointer-events: none;
}
@keyframes glowSpin{ to{ transform: rotate(360deg); } }
.tour-frame iframe{ position: absolute; inset:0; width:100%; height:100%; border: 0; }
.tour-frame__glow{
  position:absolute; inset: -40%; pointer-events:none; z-index: -1;
  background: radial-gradient(closest-side, rgba(30,226,168,.25), transparent 70%);
}
.tour-sec__cta{ margin-top: 36px; text-align: center; }

/* ---------- FEATURES ---------- */
.features-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.feature{
  background: rgba(15,20,17,.6);
  padding: 36px 28px;
  min-height: 220px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background .35s, transform .35s;
}
.feature i{
  font-size: 26px; color: var(--em-3);
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: rgba(20,184,138,.08);
  border: 1px solid rgba(20,184,138,.18);
  border-radius: 50%;
  transition: background .35s, transform .35s;
}
.feature h4{ margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); letter-spacing: -.01em; }
.feature p{ margin: 0; color: var(--ink-mute); font-size: 14px; line-height: 1.55; }
.feature:hover{ background: rgba(20,184,138,.06); transform: translateY(-2px); }
.feature:hover i{ background: rgba(20,184,138,.18); transform: scale(1.05) rotate(-3deg); }

/* ---------- FLOOR PLANS ---------- */
.plans__tabs{ display:flex; gap: 8px; }
.plan-tab{
  background: rgba(15,20,17,.6);
  border: 1px solid var(--line-2);
  color: var(--ink-mute);
  padding: 10px 18px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px;
  transition: all .25s;
}
.plan-tab:hover{ color: var(--ink); border-color: var(--em); }
.plan-tab.is-active{ background: var(--em); color: #03130d; border-color: var(--em); }

.plans__stage{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 60px);
  min-height: 460px;
}
.plans__img{
  position: absolute; inset: clamp(28px, 4vw, 60px);
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.plans__img.is-active{ position: relative; inset: auto; opacity: 1; pointer-events: auto; }
.plans__img img{
  width: 100%; height: auto;
  background: #fff;
  border-radius: var(--r-md);
  filter: invert(1) hue-rotate(180deg) brightness(1.02);
  /* gives a clean dark-mode look while keeping line clarity */
}
.plans__hint{
  position: absolute; right: 22px; top: 22px;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- LOCATION ---------- */
.location__grid{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 36px;
  align-items: stretch;
}
.location__map{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 520px;
  border: 1px solid var(--line);
  filter: saturate(.7) brightness(.85) contrast(1.05);
}
.location__map iframe{ position: absolute; inset:0; width:100%; height:100%; border:0; }
.location__list{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.loc-card{
  background: rgba(15,20,17,.6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
  transition: border-color .25s, transform .35s;
}
.loc-card:hover{ border-color: var(--em); transform: translateY(-2px); }
.loc-card h4{
  margin: 0 0 14px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--em-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.loc-card ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.loc-card li{ color: var(--ink-mute); font-size: 14px; padding-left: 14px; position: relative; }
.loc-card li::before{ content:"·"; color: var(--em); position: absolute; left:0; }

/* ---------- CONTACT ---------- */
.contact__grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: stretch;
}
.realtor{
  border-radius: var(--r-lg); padding: 36px; display: flex; flex-direction: column; gap: 16px;
}
.realtor__photo{
  position: relative; aspect-ratio: 4/3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(135deg, #15201b, #0c1310);
  margin-bottom: 12px;
  display: grid; place-items: center;
}
.realtor__photo img{
  position: absolute; inset:0; width:100%; height:100%; object-fit: cover; opacity:.4;
  filter: grayscale(.4) brightness(.7);
}
.realtor__photo-overlay{
  position: relative;
  font-family: var(--serif); font-weight: 400; font-size: 44px;
  text-align: center; color: var(--em-3); letter-spacing: -.01em; line-height: 1;
}
.realtor__name{ font-family: var(--serif); font-size: 28px; }
.realtor__title{ color: var(--ink-mute); font-size: 13px; letter-spacing: .04em; }
.realtor__lines{ list-style: none; padding: 0; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 12px; }
.realtor__lines li{ display:flex; align-items: center; gap: 12px; color: var(--ink); font-size: 15px; }
.realtor__lines i{ color: var(--em-3); width: 18px; text-align:center; }
.realtor__cta{ display: flex; gap: 10px; flex-wrap: wrap; }

.form{ border-radius: var(--r-lg); padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label{
  display:block; font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--em-3); margin-bottom: 8px;
}
.field input, .field textarea{
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  color: var(--ink);
  font-family: inherit; font-size: 14.5px;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-dim); }
.field input:focus, .field textarea:focus{
  outline: none; border-color: var(--em);
  background: rgba(20,184,138,.05);
  box-shadow: 0 0 0 3px rgba(20,184,138,.12);
}
.form__note{ font-size: 13px; color: var(--em-3); min-height: 1em; margin: 0; }

/* ---------- FINAL CTA ---------- */
.final-cta{
  position: relative; min-height: 80vh;
  display: grid; place-items: center;
  text-align: center; overflow: hidden;
  padding: clamp(80px, 12vw, 160px) 20px;
}
.final-cta__bg{
  position: absolute; inset:0; width:100%; height:100%; object-fit: cover;
  transform: scale(1.1); will-change: transform;
}
.final-cta__overlay{
  position: absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,8,7,.55), rgba(6,8,7,.92)),
    radial-gradient(60% 60% at 50% 60%, rgba(20,184,138,.15), transparent 70%);
}
.final-cta__content{ position: relative; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.final-cta__content p{ font-family: var(--serif-2); font-style: italic; font-size: clamp(17px,1.8vw,22px); color: var(--ink-mute); }
.final-cta__btns{ display:flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* ---------- FOOTER ---------- */
.footer{
  border-top: 1px solid var(--line);
  padding: 80px 0 30px;
  background: var(--bg-2);
}
.footer__inner{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--line);
}
.footer__logo{ font-family: var(--serif); font-size: 26px; margin-bottom: 16px; }
.footer__brand p{ color: var(--ink-mute); font-size: 14px; }
.footer__col{ display: flex; flex-direction: column; gap: 10px; }
.footer__col h5{
  margin: 0 0 8px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--em-3); font-weight: 600;
}
.footer__col a{ color: var(--ink-mute); font-size: 14px; }
.footer__col a:hover{ color: var(--em-3); }
.footer__social{ display:flex; gap: 12px; }
.footer__social a{
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-2); display: grid; place-items: center;
  color: var(--ink-mute); transition: all .25s;
}
.footer__social a:hover{ background: var(--em); color: #03130d; border-color: var(--em); transform: translateY(-2px); }

.footer__legal{
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 30px;
  font-size: 12px; color: var(--ink-dim); flex-wrap: wrap;
}

/* ---------- REVEAL HELPERS ---------- */
.reveal, .reveal-stagger > *, .reveal-clip{
  opacity: 0;
}
.reveal{ transform: translateY(28px); }
.reveal-stagger > *{ transform: translateY(40px); }
.reveal-clip img{ transform: scale(1.15); }
.reveal-clip{ clip-path: inset(0 0 100% 0); opacity: 1; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
  .nav__links{ display: none; }
  .nav__cta{ display: none; }
  .nav__burger{ display: inline-flex; }
  .stats__grid{ grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(3){ border-right: 0; }
  .stat:nth-child(n+4){ border-top: 1px solid var(--line); }
  .features-grid{ grid-template-columns: repeat(3, 1fr); }
  .gallery{ column-count: 2; }
  .infobar{ grid-template-columns: repeat(4, 1fr); }
  .infobar__cell--cta{ grid-column: span 4; }
}

@media (max-width: 820px){
  .nav{ padding: 16px 20px; }
  .split{ grid-template-columns: 1fr; }
  .split__media{ aspect-ratio: 4/4; }
  .showcase .room{ grid-template-columns: 1fr; padding: 50px 0; gap: 30px; }
  .showcase .room--right{ direction: ltr; }
  .room__media{ aspect-ratio: 4/4; }
  .stats__grid{ grid-template-columns: repeat(2, 1fr); }
  .stat{ border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .stat:nth-child(even){ border-right: 0; }
  .stat:last-child{ grid-column: span 2; border-bottom: 0; }
  .features-grid{ grid-template-columns: repeat(2, 1fr); }
  .location__grid{ grid-template-columns: 1fr; }
  .location__list{ grid-template-columns: 1fr 1fr; }
  .contact__grid{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr 1fr; gap: 30px; }
  .infobar{ grid-template-columns: repeat(2, 1fr); }
  .infobar__cell--cta{ grid-column: span 2; padding: 18px; }
  .section-head--row{ flex-direction: column; align-items: flex-start; }
  .plans__tabs{ flex-wrap: wrap; }
}

@media (max-width: 560px){
  .hero__content{ padding-top: 130px; padding-bottom: 90px; }
  .hero__ctas .btn{ width: 100%; justify-content: center; }
  .gallery{ column-count: 1; }
  .features-grid{ grid-template-columns: 1fr; }
  .form__row{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr; }
  .footer__legal{ flex-direction: column; gap: 6px; }
  .location__list{ grid-template-columns: 1fr; }
  .stats__grid{ grid-template-columns: 1fr 1fr; }
  .infobar-wrap{ margin-top: -32px; padding: 0 4%; }
  .infobar{ border-radius: var(--r-md); }
  .realtor, .form{ padding: 22px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .reveal, .reveal-stagger > *, .reveal-clip{ opacity: 1 !important; transform: none !important; clip-path: none !important; }
}