:root{
  --bg:#ffffff;
  --fg:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --alt:#f8fafc;
  --primary:#111827;
  --primary2:#0f172a;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* Classy motion (subtle). Respects reduced motion. */
.reveal{opacity:0;transform:translateY(10px);transition:opacity 600ms ease, transform 600ms ease}
.reveal.is-in{opacity:1;transform:none}

.hero__copy{animation:heroIn 700ms ease both;animation-delay:80ms}
@keyframes heroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* gallery + floor plan hover parity */
.gallery-item,
.gallery-hero,
.floorplan-item{transition:transform 220ms ease, box-shadow 220ms ease}
.gallery-item img,
.gallery-hero img,
.floorplan-item img{transition:transform 320ms ease}

@media (hover: hover) and (pointer: fine){
  .gallery-item:hover,
  .gallery-hero:hover,
  .floorplan-item:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .gallery-item:hover img,
  .gallery-hero:hover img,
  .floorplan-item:hover img{transform:scale(1.02)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__copy{animation:none}
  .gallery-item,.gallery-item img,.gallery-hero,.gallery-hero img,.floorplan-item,.floorplan-item img{transition:none}
}
body{margin:0;font-family:Manrope, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.55;font-size:14px}
.container{max-width:1100px;margin:0 auto;padding:0 18px}


.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:calc(64px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  z-index:50;
  transition: background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{font-weight:700;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{color:rgba(255,255,255,.92);text-decoration:none;font-size:14px;padding:8px 10px;border-radius:10px;text-shadow:0 1px 18px rgba(0,0,0,.35)}

.lang-toggle{display:inline-flex;gap:8px;align-items:center}
.lang-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.22);color:#fff;padding:6px 10px;font:inherit;font-size:12px;border-radius:999px;cursor:pointer}
.lang-btn.active{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.7)}
.lang-flag{width:16px;height:12px;display:block;object-fit:cover;border-radius:2px}
.nav a:hover{background:rgba(255,255,255,.14)}
.nav a.is-active{background:rgba(255,255,255,.18)}

/* Hamburger (mobile) */
.hamburger{display:none;appearance:none;background:transparent;border:0;padding:10px;margin-left:auto;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.92);margin:5px 0;border-radius:2px;box-shadow:0 1px 18px rgba(0,0,0,.25)}
.topbar.is-stuck .hamburger span{background:#111827;box-shadow:none}

.mobilemenu{position:fixed;inset:0;z-index:9999;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(12px);display:none;}
.mobilemenu.is-open{display:block;}
.mobilemenu__close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;border:0;background:transparent;font-size:34px;line-height:1;color:#111827;padding:10px;cursor:pointer}
.mobilemenu__items{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px}
.mobilemenu__link{font-size:28px;font-weight:500;color:#111827;text-decoration:none}
.mobilemenu__link:hover{text-decoration:underline}

/* When scrolled: white sticky header like the original */
.topbar.is-stuck{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.topbar.is-stuck .brand{
  color: #111827;
  text-shadow: none;
}
.topbar.is-stuck .nav a{
  color: #111827;
  text-shadow: none;
}
.topbar.is-stuck .lang-btn{background:#fff;color:#111827;border-color:rgba(17,24,39,.18)}
.topbar.is-stuck .lang-btn.active{background:rgba(17,24,39,.08);border-color:rgba(17,24,39,.28)}
.topbar.is-stuck .nav a:hover{background: rgba(17,24,39,.06)}
.topbar.is-stuck .nav a.is-active{background: rgba(17,24,39,.08)}

.hero{
  position:relative;
  padding:120px 0 36px 0; /* leave room for top nav over the image */
  /* Use aspect ratio so we can show the whole house without cropping */
  aspect-ratio: 16 / 9;
  min-height:720px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#0b0f19;
}
.hero__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* Fill the full hero width (no side gaps). This may crop a bit top/bottom. */
  object-fit: cover;
  /* Bias slightly downward so we keep more of the gate/ground */
  object-position: center 65%;
}

/* darker overlay for readability */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.55) 100%);
}
.hero__inner{position:relative;z-index:1;padding-bottom:clamp(220px, 30vh, 380px);width:100%;display:flex;justify-content:center}
.hero__copy{max-width:640px;text-align:center;margin:0 !important;padding-left:0}
.hero__copy--center{align-items:center}
.hero__kicker{letter-spacing:.22em;text-transform:uppercase;font-size:11px;color:rgba(255,255,255,.7);margin-bottom:10px}
.hero__title{font-family:"Playfair Display", serif;font-size:46px;line-height:1.1;margin:0 0 10px 0;color:#fff}
.lead{margin:0 0 12px 0;color:rgba(255,255,255,.85);font-size:16px;text-shadow:0 1px 18px rgba(0,0,0,.35)}
/* make the hero container full-bleed (not centered) */
.hero .container{max-width:none !important;width:100%;margin:0 !important;padding-left:0;padding-right:0}

.pillbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px 0;justify-content:flex-start}
.pillbar--center{justify-content:center}
.pill{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(0,0,0,.25);color:rgba(255,255,255,.92);font-size:13px;backdrop-filter: blur(6px)}

.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cta--center{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:0;border:1px solid rgba(255,255,255,.4);text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.01em}
.btn__icon{display:inline-flex}

.hero .btn{box-shadow:0 8px 18px rgba(0,0,0,.18)}
.hero .btn--gold{background:#d9c58a;color:#1a1a1a;border-color:#d9c58a}
.hero .btn--gold:hover{filter:brightness(.98)}
.hero .btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.hero .btn--outline:hover{background:rgba(255,255,255,.12)}

.section{padding:46px 0;scroll-margin-top:80px}
.section--alt{background:var(--alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section--soft{background:#f3f4f6;border-top:0;border-bottom:0}
.section__head{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.section h2{margin:0 0 10px 0;font-size:28px}
.section h3{margin:22px 0 8px 0;font-size:18px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* About layout (matches screenshot: copy left, image right, neighborhood centered below) */
.about__top{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.about__copy p{max-width:640px;color:var(--muted)}
.about__image img{width:100%;height:360px;object-fit:cover;border-radius:0;border:1px solid var(--border);background:#ddd}
.about__bottom{margin-top:38px;text-align:center}
.about__bottom p{max-width:760px;margin:0 auto;color:var(--muted)}

.section__head--center{align-items:center;text-align:center}

/* Gallery (hero + 2x3 grid) */
.gallery-layout{display:grid;gap:18px}
.gallery-hero,
.gallery-item{border-radius:0;overflow:hidden;background:#fff;border:1px solid var(--border)}
.gallery-hero img,
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.gallery-hero img:focus-visible,
.gallery-item img:focus-visible,
.floorplan-item img:focus-visible{outline:2px solid #111827;outline-offset:2px}
.gallery-hero{aspect-ratio:16 / 9;min-height:280px}
.gallery-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px}
.gallery-item{aspect-ratio:4 / 3;min-height:150px}

/* Floor plans */
.floorplans-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px}
.floorplans-grid[data-plan-count="1"]{grid-template-columns:minmax(0, 560px);justify-content:center}
.floorplans-grid[data-plan-count="2"]{grid-template-columns:repeat(2, minmax(260px, 420px));justify-content:center}
.floorplan-item{border:1px solid var(--border);background:#fff;border-radius:0;overflow:hidden}
.floorplan-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.floorplan-item h3{margin:10px 12px 12px;font-size:15px}

/* Dark details section (like original) */
.section--dark{background:#1f2326;color:#fff;border-top:0;border-bottom:0}
.section--dark .muted{color:rgba(255,255,255,.72)}
.section--dark h2{color:#fff}
.section--dark h3{color:#fff;margin-top:0}

.details__top{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:10px}
.dstat{text-align:center}
/* original looks like big value-only */
.dstat__k{display:none}
.dstat__v{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);text-transform:none}

.details__divider{height:1px;background:rgba(255,255,255,.10);margin:22px 0}

.details__bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.dcol{border-top:0;padding-top:0}
.dcol h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.dcol ul{margin:12px 0 0 0;color:rgba(255,255,255,.84);list-style:none;padding:0}
.dcol li{margin:10px 0;position:relative;padding-left:18px}
.dcol li::before{content:"•";position:absolute;left:0;top:0;color:rgba(255,255,255,.4)}
ul{margin:10px 0 0 18px}

.mapwrap{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:stretch}
.map{height:380px;border:1px solid rgba(0,0,0,.08);border-radius:0;background:#f3f4f6}
/* slightly wash out map tiles to match the light aesthetic */
.map .leaflet-tile{filter:grayscale(.15) contrast(.95) brightness(1.05)}

/* Ensure Leaflet controls never sit above the full-screen mobile menu */
.leaflet-pane, .leaflet-top, .leaflet-bottom{z-index: 0 !important;}
.highlights{border:0;border-radius:0;padding:0;background:transparent}
.highlights h3{margin-top:0}
.highlights ul{list-style:disc;margin:10px 0 0 0;padding-left:18px}
.highlights li{padding:6px 0;border-bottom:0;line-height:1.4}
.highlights li strong{font-weight:600}

/* Contact (match original) */
.contactgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.contacttitle{font-size:14px;color:#111827;margin:0 0 14px 0;font-weight:600}
.contactstack{display:grid;gap:14px}
.qcard{display:flex;gap:16px;align-items:center;text-decoration:none;color:inherit;background:#f3f4f6;border:1px solid rgba(0,0,0,.06);padding:18px 18px}
.qcard:hover{background:#eef2f7}
.qicon{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(0,0,0,.06);color:#111827}
.qlabel{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.qval{display:block;font-size:16px;font-weight:600;color:#111827}

.qcard--wa{background:#e9fbf1}
.qcard--wa:hover{background:#ddf7e9}
.qicon--wa{background:#25D366;border-color:#25D366;color:#fff}

.form2{border:0;background:transparent;display:grid;gap:14px}
.form2 label{display:grid;gap:6px}
.form2 input,.form2 textarea{padding:12px 12px;border-radius:0;border:1px solid rgba(0,0,0,.10);font:inherit;background:#fff}
.form2 textarea{min-height:140px;resize:vertical}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.sendbtn{margin-top:6px;width:100%;border:0;border-radius:0;background:#111827;color:#fff;padding:12px 14px;font:inherit;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.sendbtn:hover{background:#0b1220}
.sendbtn:disabled{opacity:.6;cursor:not-allowed}
.sendbtn__icon{display:inline-flex}
.hp-field{position:absolute !important;left:-9999px !important;opacity:0 !important;pointer-events:none !important;height:0 !important;width:0 !important}
.formstatus{margin:4px 0 0 0;font-size:13px;min-height:1.2em}
.formstatus.is-error{color:#b42318}
.formstatus.is-success{color:#027a48}

@media (max-width: 900px){
  .contactgrid{grid-template-columns:1fr;gap:26px}
  .formrow{grid-template-columns:1fr}
}

.footer{padding:22px 0;border-top:1px solid var(--border)}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.footer__link{color:var(--muted);text-decoration:none}
.footer__link:hover{text-decoration:underline}

/* Floating WhatsApp bubble */
.wabubble{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80; /* below mobile menu (9999) but above content */
  width:58px;
  height:58px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
  text-decoration:none;
}
.wabubble:hover{filter:brightness(.96)}
@media (max-width: 520px){
  .wabubble{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
}

body.lightbox-open{overflow:hidden}

.lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.82);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.lightbox.is-open{display:flex}
.lightbox__img{
  max-width:min(100%, 1100px);
  max-height:calc(100vh - 40px);
  width:auto;
  height:auto;
  border-radius:4px;
  box-shadow:0 24px 45px rgba(0,0,0,.35);
}
.lightbox__close{
  position:absolute;
  top:max(12px, env(safe-area-inset-top));
  right:12px;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:32px;
  line-height:1;
  cursor:pointer;
}
.lightbox__close:hover{background:rgba(255,255,255,.24)}
.lightbox__close:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width: 900px){
  .nav{display:none}
  .hamburger{display:block}

  .hero{min-height:540px;padding:110px 0 44px 0}
  .hero .container{padding-left:18px;padding-right:18px}
  .about__top{grid-template-columns:1fr}
  .about__image img{height:300px}
  .gallery-layout{gap:12px}
  .gallery-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
  .floorplans-grid{grid-template-columns:1fr;gap:12px}
  .details__top{grid-template-columns:repeat(2,1fr)}
  .details__bottom{grid-template-columns:1fr}
  .mapwrap{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-hero{aspect-ratio:4 / 3;min-height:0}

  /* Mobile hero: smaller text + closer to bottom */
  .hero{aspect-ratio:auto;min-height:72vh;padding:calc(84px + env(safe-area-inset-top)) 0 18px 0}
  .hero__inner{padding-bottom:clamp(18px, 3.5vh, 42px)}
  .hero__copy{padding-left:16px;max-width:520px}

  .hero h1{font-size:30px}
  .lead{font-size:14px}

  .pill{font-size:12px;padding:5px 9px}

  /* Make both CTA buttons same width + stacked */
  .cta{gap:10px;flex-direction:column;align-items:stretch}
  .hero .btn{padding:12px 14px;font-size:13px;width:100%;justify-content:center}

  .cta-arrow{margin-top:12px;text-align:center;font-size:22px;color:rgba(255,255,255,.9)}

  .hero__photo{object-fit:cover;object-position:center 40%}
}

/* Property landing list */
html.landing-pending main { visibility: hidden; }

html.property-pending .hero {
  background:
    radial-gradient(circle at top, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(180deg, #111827 0%, #0f172a 58%, #0b1220 100%);
}
html.property-pending .hero::after {
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.36) 45%, rgba(0,0,0,.42) 100%);
}
html.property-pending .hero__photo,
html.property-pending .hero__copy {
  opacity: 0;
}
html.property-pending .hero__photo {
  transition: opacity 220ms ease;
}
html.property-pending .hero__copy {
  transition: opacity 180ms ease;
}

body.landing-mode .topbar .nav,
body.landing-mode .topbar .hamburger { display: none; }

body.landing-mode .hero,
body.landing-mode .wabubble { display: none; }

body.landing-mode { overflow-x: hidden; }

body.landing-mode .topbar {
  background: rgba(246, 247, 250, .82);
  border-bottom-color: rgba(17, 24, 39, .06);
  backdrop-filter: saturate(150%) blur(8px);
}

body.landing-mode .topbar .brand { display: none; }

body.landing-mode .topbar .lang-btn,
body.landing-mode .topbar .lang-btn.active {
  color: #0f172a;
  text-shadow: none;
}

body.landing-mode .topbar .lang-btn {
  border-radius: 0;
  border-color: rgba(15, 23, 42, .18);
  background: rgba(255,255,255,.7);
}

body.landing-mode .topbar .lang-btn.active {
  border-color: rgba(15, 23, 42, .35);
  background: rgba(15, 23, 42, .06);
}

.property-landing {
  min-height: 100vh;
  padding-top: calc(82px + env(safe-area-inset-top));
  background: linear-gradient(180deg, #f7f8fa 0%, #eff2f6 100%);
}

.property-landing__container {
  max-width: 1180px;
  width: 100%;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}

.property-landing__intro {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 920px;
}
.property-landing__eyebrow { margin: 0 0 8px; font-size: 10px; letter-spacing: .22em; color: #64748b; }
.property-landing__title { margin: 0; font-size: clamp(30px, 4.6vw, 62px); line-height: .98; letter-spacing: -.02em; font-weight: 600; color: #0b1220; }
.property-landing__subtitle { margin: 10px auto 0; font-size: clamp(12px, 1.25vw, 16px); line-height: 1.45; color: #475569; max-width: 640px; }

.property-list {
  display: grid;
  gap: clamp(18px, 2.3vw, 28px);
  margin: 0 auto;
  max-width: 1120px;
}

.property-list__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(260px, .95fr);
  min-height: 320px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .09);
}

.property-list__card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.property-list__media-wrap {
  position: relative;
  min-height: 100%;
  background: #d7dde6;
}

.property-list__media {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

.property-list__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  color: #f8fafc;
}

.property-list__title-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.property-list__content h3 {
  margin: 0;
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.08;
  font-weight: 600;
  max-width: 14ch;
}

.property-list__mini-cta {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid rgba(241,245,249,.78);
  color: #f8fafc;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.06);
  white-space: nowrap;
}

.property-list__mini-cta:hover {
  background: rgba(255,255,255,.14);
}

.property-list__card-link:focus-visible,
.property-list__mini-cta:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
}

.property-list__empty {
  margin: 0 auto;
  max-width: 480px;
  text-align: center;
  border: 1px solid var(--border);
  background: #fff;
  padding: 24px;
}

@media (max-width: 800px) {
  .property-landing {
    padding-top: calc(86px + env(safe-area-inset-top));
    min-height: auto;
  }

  .property-landing__intro {
    margin-bottom: 22px;
  }

  .property-list__card {
    grid-template-columns: 1fr;
  }

  .property-list__media {
    min-height: clamp(240px, 56vw, 360px);
  }

  .property-list__content {
    align-items: center;
    min-height: 140px;
  }
}

@media (max-width: 560px) {
  .property-list {
    gap: 16px;
  }

  .property-list__content {
    padding: 18px;
  }

  .property-list__title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .property-list__content h3 {
    max-width: none;
    font-size: clamp(20px, 7vw, 28px);
  }

  .property-list__mini-cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .property-list__card,
  .property-list__mini-cta { transition: none; }
}