/* ─── ROOT ─── */

#mobileNavOverlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:199;
}
#mobileNavOverlay.open { display:block; }

:root{
  /* ═══ Brown & white theme ═══════════════════════════════════
     Replaces the previous black/grey scale. Every neutral is warmed
     so icons, rules, type and surfaces all sit in one brown family. */
  --black:      #33291F;   /* espresso — primary text & solid fills   */
  --off-black:  #3F3327;
  --charcoal:   #4A3B2C;
  --mid:        #6B5A47;   /* body copy                                */
  --stone:      #9A8467;   /* taupe — labels, icons, accents           */
  --silver:     #BDAD9A;   /* sand                                     */
  --line:       #E6DED3;   /* warm hairline                            */
  --line2:      #EFE9E1;
  --ivory:      #F7F3ED;
  --white:      #FFFFFF;
  --page:       #FCFAF7;   /* warm off-white ground                    */
  --accent:     #9A8467;
  --ink:        #33291F;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  overflow-x:hidden;
  width:100%;
  overscroll-behavior:none;
}
body {
  font-family:'Figtree', sans-serif;
  background:var(--white);
  color:var(--black);
  /* overflow-x:hidden moved to html — on body it forces overflow-y:auto,
     making body a nested scroll container that swallows wheel events */
  width:100%;
  overscroll-behavior:none;
}

/* ─── NAVIGATION ─── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  transition:background 0.5s ease, height 0.3s ease;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 100%);
}
nav.scrolled {
  background: rgba(18,18,18,0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  height: 56px;
}
/* Logo image */
.nav-logo-img {
  height:28px; width:auto; display:block;
  filter:brightness(0) invert(1);
  transition:filter 0.3s, opacity 0.3s;
  opacity:1;
}
nav.scrolled .nav-logo-img {
  filter:brightness(0) invert(1);
  opacity:0.9;
}
.nav-logo-img--dark {
  filter:brightness(0);
  height:22px; width:auto; display:block;
}
.footer-logo-img {
  height:22px; width:auto; display:block;
  filter:brightness(0) invert(1);
  opacity:0.9;
}

.nav-center { display:flex; gap:36px; }
.nav-center a {
  text-decoration:none; color:rgba(255,255,255,0.7);
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  font-weight:500; transition:color 0.3s; position:relative;
}
.nav-center a::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.3s;
}
.nav-center a:hover::after { transform:scaleX(1); }
.nav-center a:hover { color:rgba(255,255,255,1); }
nav.scrolled .nav-center a { color:var(--stone); }
nav.scrolled .nav-center a:hover { color:var(--black); }
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-lang {
  background:none; border:1px solid rgba(255,255,255,0.3);
  color:rgba(255,255,255,0.7); padding:5px 12px; cursor:pointer;
  font-size:9px; letter-spacing:0.15em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; transition:all 0.25s;
}
.nav-lang:hover, .nav-lang.active {
  background:var(--white); border-color:var(--white); color:var(--black);
}
nav.scrolled .nav-lang { border-color:var(--line); color:var(--stone); }
nav.scrolled .nav-lang:hover, nav.scrolled .nav-lang.active {
  background:var(--black); border-color:var(--black); color:var(--white);
}
.nav-cta {
  background:var(--white); color:var(--black); border:none;
  padding:9px 22px; cursor:pointer; font-size:9px; letter-spacing:0.18em;
  text-transform:uppercase; font-family:'Figtree', sans-serif; font-weight:600;
  transition:all 0.25s; text-decoration:none; display:inline-block;
}
.nav-cta:hover { background:var(--ivory); }
nav.scrolled .nav-cta { background:var(--black); color:var(--white); }
nav.scrolled .nav-cta:hover { background:var(--charcoal); }
#hamburgerBtn {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px; margin-left:8px;
  width:40px; height:40px;
}
.ham-line { display:block; width:24px; height:2px; background:#fff; transition:all 0.3s; border-radius:2px; }
nav.scrolled .ham-line { background: rgba(255,255,255,0.9); }
#mobileNav {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:var(--white); z-index:999;
  flex-direction:column; justify-content:flex-start;
  padding:80px 40px 40px;
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
#mobileNav.open { display:flex !important; transform:translateX(0); }
.mob-close {
  position:absolute; top:20px; right:24px;
  background:none; border:none; cursor:pointer;
  font-size:22px; color:var(--black); line-height:1; padding:8px;
  font-family:'Figtree', sans-serif;
}
#mobileNav a {
  font-family:'Figtree', sans-serif;
  font-size:16px; font-weight:500; font-style:normal;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--black); text-decoration:none; padding:16px 0;
  border-bottom:1px solid var(--line2); line-height:1.2;
  transition:opacity 0.2s;
}
#mobileNav a:last-child { border-bottom:none; }
#mobileNav a:hover { opacity:0.5; }
.mob-cta-row {
  margin-top:40px; display:flex; gap:16px; align-items:center;
}
.mob-cta-link {
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
  font-weight:600; color:var(--stone); border:1px solid var(--line);
  padding:12px 20px; font-family:'Figtree', sans-serif;
  text-decoration:none; transition:all 0.2s;
}
.mob-cta-link:hover { background:var(--black); color:var(--white); border-color:var(--black); }

/* ─── HERO ─── */
#hero {
  height:100vh; min-height:640px; position:relative;
  display:flex; align-items:flex-end;
  background:transparent; overflow:hidden;
}
.hero-visual {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  overflow:hidden; z-index:0;
}
/* ── MP4 VIDEO BACKGROUND ─────────────────────────── */
.hero-video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:1; display:block;
  pointer-events:none;
}
/* ── PHOTO FALLBACK ── */
.hero-visual-img {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; background:transparent;
}
.hero-visual::before {
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(160deg,rgba(5,5,5,0.15) 0%,rgba(10,8,5,0.05) 55%,rgba(5,5,5,0.12) 100%);
}
.hero-visual::after { content:none; }
@keyframes kenBurns {
  0%   { transform:scale(1); }
  100% { transform:scale(1.07); }
}
.hero-fade {
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to top,  rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0.05) 65%, transparent 100%),
    linear-gradient(to right, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.04) 55%, transparent 100%);
}
.hero-content {
  position:relative; z-index:3;
  padding:0 80px 96px; max-width:780px;
}
.hero-eyebrow {
  display:flex; align-items:center; gap:16px;
  font-size:9px; letter-spacing:0.4em; text-transform:uppercase;
  color:rgba(255,255,255,0.4); margin-bottom:24px;
}
.hero-eyebrow::before {
  content:''; display:block; width:32px; height:1px; background:rgba(255,255,255,0.25);
}
.hero-title {
  font-family:'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-size:clamp(64px,7.5vw,112px);
  font-weight:400 !important; color:var(--white); line-height:1;
  margin-bottom:28px; letter-spacing:0;
}
.hero-title em {
  font-family:'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-style:italic !important; font-weight:400 !important;
  color:rgba(255,255,255,0.78);
}
.hero-subtitle {
  font-size:12px; color:rgba(255,255,255,0.45); line-height:2;
  font-weight:300; letter-spacing:0.06em; max-width:400px; margin-bottom:44px;
}
.hero-actions { display:flex; gap:12px; align-items:center; }
.btn-hero-primary {
  background:var(--white); color:var(--black);
  padding:14px 36px; text-decoration:none;
  font-size:9px; letter-spacing:0.25em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; font-weight:600;
  transition:all 0.3s; border:none; cursor:pointer; display:inline-block;
}
.btn-hero-primary:hover { background:var(--ivory); transform:translateY(-1px); }
.btn-hero-ghost {
  background:transparent; color:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.2);
  padding:14px 36px; text-decoration:none;
  font-size:9px; letter-spacing:0.25em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; font-weight:400;
  transition:all 0.3s; cursor:pointer; display:inline-block;
}
.btn-hero-ghost:hover { border-color:rgba(255,255,255,0.6); color:rgba(255,255,255,0.9); }
/* Stats strip at bottom right */
.hero-stats {
  position:absolute; bottom:96px; right:80px; z-index:2;
  display:flex; gap:0;
}
.hero-stat {
  padding:0 32px; border-left:1px solid rgba(255,255,255,0.1); text-align:center;
}
.hero-stat:first-child { border-left:none; padding-left:0; }
.hero-stat-num {
  font-family:'Figtree', sans-serif; font-size:28px; font-weight:300;
  color:var(--white); line-height:1; display:block;
  font-variant-numeric: lining-nums tabular-nums;
}
.hero-stat-lbl {
  font-size:8px; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.3); display:block; margin-top:5px;
}

/* ─── MARQUEE ─── */
.marquee-strip {
  background:var(--white); padding:14px 0; overflow:hidden;
}
.marquee-track {
  display:flex; gap:64px; animation:marquee 40s linear infinite; white-space:nowrap;
}
.marquee-track span {
  font-size:9px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--stone); font-weight:500; flex-shrink:0;
}
.marquee-sep { color:var(--line); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── SECTION UTILITIES ─── */
.section-label {
  display:flex; align-items:center; gap:12px;
  font-size:8px; letter-spacing:0.35em; text-transform:uppercase;
  color:var(--silver); margin-bottom:14px; font-weight:500;
}
.section-label::before {
  content:''; display:block; width:24px; height:1px; background:var(--line);
}
h2.section-title {
  font-family:'Figtree', sans-serif;
  font-size:clamp(32px,3.5vw,52px); font-weight:300;
  color:var(--black); line-height:1.1; letter-spacing:-0.01em;
}
h2.section-title em { font-style:normal; color:var(--gold); color:var(--stone); }
.section-desc {
  font-size:12px; color:var(--stone); line-height:1.9;
  font-weight:300; letter-spacing:0.04em; max-width:480px; margin-top:14px;
}

/* ─── INTRO STRIP ─── */
#intro {
  display:grid; grid-template-columns:repeat(3,1fr); gap:48px;
  padding:64px 80px;
  background:var(--white);
  border-top:1px solid var(--line2);
}
.intro-item { }
.intro-num {
  font-family:'Figtree', sans-serif; font-size:48px; font-weight:300;
  color:var(--black); line-height:1; margin-bottom:8px;
  font-variant-numeric: lining-nums tabular-nums;
}
.intro-label {
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--stone); margin-bottom:10px;
}
.intro-text { font-size:12px; color:var(--mid); line-height:1.8; font-weight:300; }

/* ─── COLLECTIONS PAGE ─── */
#collections { background:var(--page); }

/* Header bar */
.coll-header {
  padding:96px 80px 0;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.coll-header-left { }
.coll-count {
  font-size:9px; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--stone); margin-bottom:4px;
}

/* ─── DROPDOWN SELECTOR ─── */
.coll-controls {
  padding:24px 80px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:var(--page);
  position:relative; z-index:100;
}
.coll-dropdown-wrap { position:relative; }
.coll-dropdown-btn {
  display:flex; align-items:center; gap:24px;
  padding:14px 24px;
  background:var(--white);
  border:1px solid var(--line);
  cursor:pointer;
  font-family:'Figtree', sans-serif;
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  font-weight:700; color:var(--black); min-width:320px;
  transition:all 0.2s; justify-content:space-between;
  border-radius:2px;
}
.coll-dropdown-btn:hover { background:var(--ivory); border-color:var(--silver); }
.coll-dropdown-btn.open { background:var(--black); color:var(--white); border-color:var(--black); }
/* Collection dropdown count badge */
.dd-opt-count {
  font-size:9px; letter-spacing:0.08em;
  color:var(--stone); font-weight:400;
  background:var(--page); border-radius:20px;
  padding:2px 8px; min-width:28px; text-align:center;
}
.coll-dd-option.active .dd-opt-count { background:var(--line2); color:var(--black); }
.coll-dd-option:hover .dd-opt-count { background:var(--line2); color:var(--black); }
.coll-dd-arrow {
  font-size:12px; color:var(--black);
  transition:transform 0.25s; flex-shrink:0;
}
.coll-dropdown-btn.open .coll-dd-arrow { color:var(--white); }
.coll-dropdown-btn.open .coll-dd-arrow { transform:rotate(180deg); }
.coll-dropdown-menu {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--white);
  border:1px solid var(--line);
  z-index:200; display:none; flex-direction:column;
  box-shadow:0 12px 40px rgba(0,0,0,0.12);
  max-height:480px; overflow-y:auto;
  border-radius:2px;
  animation:ddFadeIn 0.18s ease;
}
@keyframes ddFadeIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.coll-dropdown-menu.open { display:flex; }
.coll-dd-option {
  padding:13px 22px; font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--mid); cursor:pointer; transition:background 0.15s, color 0.15s;
  border-bottom:1px solid var(--line2); font-family:'Figtree', sans-serif;
  font-weight:500; display:flex; align-items:center; justify-content:space-between;
}
.coll-dd-option:last-child { border-bottom:none; }
.coll-dd-option:hover { background:#f0efec; color:var(--black); }
.coll-dd-option.active { color:var(--black); background:#f5f3ef; font-weight:700; border-left:3px solid var(--black); padding-left:19px; }
.coll-dd-option.active::after { content:''; display:none; }
.coll-dd-new {
  font-size:7px; letter-spacing:0.1em; background:var(--black);
  color:var(--white); padding:2px 6px; font-weight:700; margin-left:8px;
}
.coll-sort {
  display:flex; align-items:center; gap:10px;
}
.coll-sort-label { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--stone); }
.coll-sort-btn {
  padding:10px 16px; background:none; border:1px solid var(--line);
  font-size:9px; letter-spacing:0.12em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; color:var(--stone); cursor:pointer;
  transition:all 0.2s; font-weight:500;
}
.coll-sort-btn:hover, .coll-sort-btn.active { border-color:var(--black); color:var(--black); background:var(--white); }

/* Property listing grid */
.coll-grid {
  padding:40px 80px 96px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}

/* PROPERTY CARD */
.prop-card {
  background:var(--black); overflow:hidden; cursor:pointer;
  border:none;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
  display:flex; flex-direction:column; position:relative;
}
.prop-card:hover {
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(0,0,0,0.18);
}
.prop-card-img {
  position:relative; height:340px; overflow:hidden;
}
.prop-card-img-inner {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.prop-card:hover .prop-card-img-inner { transform:scale(1.04); }
.prop-card-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.08) 100%);
  transition:opacity 0.35s;
}
/* badges top-left */
.prop-badges {
  position:absolute; top:16px; left:16px; z-index:2;
  display:flex; gap:5px; flex-wrap:wrap; max-width:calc(100% - 32px);
}
.prop-badge {
  font-size:8px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--white); padding:4px 9px; font-weight:600;
  font-family:'Figtree', sans-serif; background:rgba(51,41,31,0.82);
  backdrop-filter:blur(4px);
}
.prop-badge.coll { background:rgba(0,0,0,0.55); }
/* save */
.prop-save {
  position:absolute; top:14px; right:14px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.92); border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; transition:all 0.2s;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.prop-save:hover { background:var(--white); transform:scale(1.08); }
/* Name overlaid at bottom of photo */
.prop-card-over {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:16px 18px 14px;
}
.prop-card-coll-lbl {
  font-size:8px; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); margin-bottom:4px; display:block;
}
.prop-card-name {
  font-family:'Figtree', sans-serif;
  font-size:clamp(17px,2vw,22px); font-weight:400; color:var(--white);
  line-height:1.2;
}
/* body below photo */
.prop-card-body {
  padding:14px 18px 16px; flex:1; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line2); border-top:none;
}
.prop-card-loc {
  font-family:'Figtree', sans-serif;
  font-size:8px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--silver); margin-bottom:8px;
}
.prop-card-specs { display:flex; gap:14px; margin-bottom:8px; }
.prop-spec { display:flex; align-items:center; gap:4px; }
.prop-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:0; border-top:none;
}
.prop-card-price {
  font-family:'Figtree', sans-serif;
  font-size:20px; color:var(--black); font-weight:400; letter-spacing:-0.01em;
}
.prop-card-view {
  font-size:8px; letter-spacing:0.18em; text-transform:uppercase;
  display:flex; align-items:center; gap:5px;
  transition:all 0.2s; font-weight:600;
  color:var(--stone); border-bottom:1px solid var(--line);
  padding-bottom:1px;
}
.prop-card:hover .prop-card-view { color:var(--black); border-color:var(--black); }

/* ─── WHY US ─── */
#why {
  padding:96px 80px;
  background:var(--white);
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
}
.why-right { }
.why-pillars { margin-top:48px; }
.why-pillar {
  display:flex; gap:20px; padding:20px 0;
  border-bottom:1px solid var(--line2);
}
.why-pillar:first-child { border-top:1px solid var(--line2); }
.why-pillar-num {
  font-family:'Figtree', sans-serif;
  font-size:13px; color:var(--line); font-weight:300; flex-shrink:0; padding-top:2px;
}
.why-pillar-title {
  font-size:10px; letter-spacing:0.15em; text-transform:uppercase;
  font-weight:600; color:var(--black); margin-bottom:5px;
}
.why-pillar-text { font-size:11px; color:var(--stone); line-height:1.8; font-weight:300; }
.why-visual {
  margin-top:48px; position:relative;
}
.why-img-box {
  height:480px; background:var(--black);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.why-img-box::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,255,255,0.04) 0%, transparent 100%);
}
.why-img-emoji { font-size:72px; opacity:0.08; }
.why-quote-box {
  position:absolute; bottom:-24px; right:-24px;
  width:220px; background:var(--white); border:1px solid var(--line);
  padding:24px; box-shadow:0 12px 40px rgba(0,0,0,0.08);
}
.why-quote-text {
  font-family:'Figtree', sans-serif;
  font-size:16px; font-style:italic; color:var(--black); line-height:1.6;
  margin-bottom:10px;
}
.why-quote-author { font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:var(--stone); }
/* Founder photo */
.why-founder-photo-wrap {
  margin-top:32px; margin-bottom:20px;
  width:100%; max-width:420px; aspect-ratio:3/4; overflow:hidden;
}
.why-founder-photo {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:grayscale(10%); transition:filter 0.4s, transform 0.5s; display:block;
}
.why-founder-photo:hover { filter:grayscale(0%); transform:scale(1.02); }
.why-founder-name {
  font-family:'Figtree', sans-serif;
  font-size:22px; font-weight:500; color:var(--black); letter-spacing:0.02em;
  margin-bottom:4px;
}
.why-founder-title {
  font-size:9px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--stone); margin-bottom:16px; font-weight:500;
}
.why-linkedin-btn {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); padding:9px 16px;
  font-size:9px; letter-spacing:0.15em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; font-weight:600;
  color:var(--black); text-decoration:none; margin-bottom:24px;
  transition:all 0.2s;
}
.why-linkedin-btn:hover { background:var(--black); color:var(--white); border-color:var(--black); }
.why-bio p {
  font-size:12px; color:var(--stone); line-height:1.9; font-weight:300;
  margin-bottom:14px;
}
.why-bio p:last-child { margin-bottom:0; }

/* ─── SERVICES ─── */
#services {
  padding:80px 80px 96px;
  background:var(--white);
}
.services-header { margin-bottom:40px; }

/* ── Desktop: 4-col cards ── */
.services-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
@media (max-width:1100px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
}
.svc-card {
  position:relative; cursor:pointer;
  background:#fff;
  border:1px solid var(--line);
  padding:28px 28px 24px;
  transition:border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
  overflow:hidden;
}
.svc-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(180,168,142,0.07) 0%,transparent 70%);
  opacity:0; transition:opacity 0.28s;
}
.svc-card:hover {
  border-color:rgba(180,168,142,0.7);
  box-shadow:0 8px 32px rgba(0,0,0,0.07);
  transform:translateY(-3px);
}
.svc-card:hover::after { opacity:1; }
.svc-card-img { display:none; }
.svc-img-overlay { display:none; }
.svc-card-num { display:none; }
.svc-card-icon {
  font-family:'Figtree', sans-serif; font-size:36px; font-weight:300;
  color:#E0DED9; margin-bottom:14px; display:block; line-height:1;
  letter-spacing:-0.02em;
}
.svc-card-body {
  padding:0; background:transparent;
}
.svc-card-title {
  font-family:'Figtree', sans-serif;
  font-size:17px; font-weight:400; color:var(--black);
  letter-spacing:0.01em; margin-bottom:8px; line-height:1.35;
}
.svc-card-desc {
  font-size:11px; color:var(--stone);
  font-weight:400; line-height:1.75; margin-bottom:18px;
}
.svc-card-cta {
  font-size:8px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--black); font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  transition:gap 0.25s;
}
.svc-card:hover .svc-card-cta { gap:13px; }

.svc-cta-mobile { display:none; }
.svc-cta-desktop { display:inline; }

/* ── Mobile: Horizontal pill rows ── */
@media (max-width:768px) {
  #services { padding:48px 20px 56px; }
  .services-grid {
    display:flex; flex-direction:column; gap:0;
    border:1px solid var(--line);
  }
  .svc-card {
    display:flex; align-items:center;
    padding:0 20px;
    height:76px; min-height:76px;
    border:none;
    border-bottom:1px solid var(--line);
    transform:none !important;
    box-shadow:none !important;
  }
  .svc-card:last-child { border-bottom:none; }
  .svc-card::after { display:none; }
  .svc-card-icon {
    font-size:24px; font-weight:300; margin:0 16px 0 0;
    flex-shrink:0; color:#E0DED9;
  }
  .svc-card-body {
    flex:1; display:flex; align-items:center; justify-content:space-between;
  }
  .svc-card-title {
    font-size:15px; margin-bottom:0; line-height:1.2;
  }
  .svc-card-desc { display:none; }
  .svc-card-cta {
    font-size:16px; gap:0; flex-shrink:0; margin-left:12px;
    letter-spacing:0; text-transform:none; font-weight:300; color:var(--stone);
  }
  .svc-card:hover .svc-card-cta { gap:0; }
  .svc-cta-mobile { display:inline; font-size:20px; font-weight:300; color:var(--stone); }
  .svc-cta-desktop { display:none; }
}



/* ─── PROCESS PAGE ─── */
#processPage {
  font-family:'Figtree', sans-serif;
  position:fixed; inset:0; z-index:500;
  background:var(--page);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:none;
  transform:translateX(100%);
  transition:transform 0.42s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
  pointer-events:none;
}
#processPage.open { transform:translateX(0); pointer-events:auto; }
#processPage::-webkit-scrollbar{width:3px;}
#processPage::-webkit-scrollbar-thumb{background:var(--line);}
/* proc-topbar layout defined in shared topbar CSS above */
.proc-hero {
  background:#F5F0EB; padding:80px 80px 64px;
  border-bottom:1px solid #E0DED9;
}
.proc-hero-lbl {
  font-family:'Figtree', sans-serif; font-size:9px; letter-spacing:0.3em; text-transform:uppercase;
  color:#33291F; margin-bottom:18px;
  display:flex; align-items:center; gap:12px;
}
.proc-hero-lbl::before {
  content:''; display:inline-block; width:32px; height:1px;
  background:#33291F;
}
.proc-hero-h {
  font-family:'Figtree', sans-serif;
  font-size:clamp(32px,5vw,58px); font-weight:300; color:#33291F;
  line-height:1.15; margin-bottom:20px;
}
.proc-hero-h em { font-style:normal; color:#33291F; }
.proc-hero-sub {
  font-family:'Figtree', sans-serif; font-size:13px; color:#33291F; font-weight:300;
  line-height:1.8; max-width:560px;
}
.proc-content { max-width:960px; margin:0 auto; padding:72px 80px; }
.proc-section-lbl {
  font-family:'Figtree', sans-serif; font-size:9px; letter-spacing:0.3em; text-transform:uppercase;
  color:#33291F; margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.proc-section-lbl::before {
  content:''; display:inline-block; width:32px; height:1px; background:#33291F;
}
.proc-h {
  font-family:'Figtree', sans-serif;
  font-size:clamp(24px,3.5vw,36px); font-weight:300; color:#33291F;
  margin-bottom:20px; line-height:1.25;
}
.proc-h em { font-style:italic; color:#33291F; }
.proc-body {
  font-family:'Figtree', sans-serif; font-size:13px; color:#33291F; line-height:1.9; font-weight:300;
  max-width:720px; margin-bottom:28px;
}
.proc-divider { border:none; border-top:1px solid #E0DED9; margin:56px 0; }
/* Steps */
.proc-steps {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-bottom:64px;
}
.proc-step {
  background:#fff; padding:36px 28px; border:1px solid #E0DED9;
}
.proc-step-num {
  font-family:'Figtree', sans-serif; font-size:52px; font-weight:300;
  color:#E0DED9; line-height:1; margin-bottom:14px;
}
.proc-step-title {
  font-family:'Figtree', sans-serif; font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:600; color:#33291F; margin-bottom:10px;
}
.proc-step-text { font-family:'Figtree', sans-serif; font-size:12px; color:#33291F; line-height:1.8; font-weight:300; }
/* Ownership */
.proc-own-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-bottom:56px;
}
.proc-own-card { background:#F5F0EB; padding:32px 24px; border:1px solid #E0DED9; }
.proc-own-badge {
  font-family:'Figtree', sans-serif; font-size:8px; letter-spacing:0.15em; text-transform:uppercase;
  font-weight:600; color:#33291F; margin-bottom:8px;
}
.proc-own-name {
  font-family:'Figtree', sans-serif; font-size:20px; font-weight:300;
  color:#33291F; margin-bottom:10px; line-height:1.3;
}
.proc-own-desc { font-size:11px; color:#33291F; line-height:1.7; font-weight:300; }
/* Deeds */
.proc-deed-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin-bottom:56px;
}
.proc-deed-card { background:#fff; padding:28px 24px; border:1px solid #E0DED9; }
.proc-deed-badge {
  font-family:'Figtree', sans-serif; font-size:8px; letter-spacing:0.15em; text-transform:uppercase;
  font-weight:600; color:#33291F; margin-bottom:8px;
}
.proc-deed-name {
  font-family:'Figtree', sans-serif; font-size:19px; font-weight:400;
  color:#33291F; margin-bottom:8px;
}
.proc-deed-desc { font-size:11px; color:#33291F; line-height:1.7; font-weight:300; }
/* Transfer list */
.proc-transfer-list { list-style:none; padding:0; margin:0 0 20px; counter-reset:proc-li; }
.proc-transfer-list li {
  display:flex; gap:16px; padding:12px 0; border-bottom:1px solid #E0DED9;
  font-size:12px; color:#33291F; font-weight:300; line-height:1.6;
}
.proc-transfer-list li::before {
  content:counter(proc-li); counter-increment:proc-li;
  font-family:'Figtree', sans-serif; font-size:18px; color:#33291F;
  flex-shrink:0; min-width:24px;
}
.proc-note {
  font-family:'Figtree', sans-serif; background:#F5F4F2; border-left:3px solid #33291F;
  padding:20px 24px; margin-bottom:72px;
  font-size:12px; color:#33291F; line-height:1.8; font-weight:300;
}
.proc-note strong { font-weight:600; color:#33291F; }
/* CTA */
.proc-cta {
  background:#F5F0EB; padding:64px 80px; text-align:center;
  border-top:1px solid #E0DED9;
}
.proc-cta-h {
  font-family:'Figtree', sans-serif; font-size:32px;
  font-weight:300; color:#33291F; margin-bottom:24px;
}
.proc-cta-btn {
  display:inline-block; border:1px solid #33291F;
  background:transparent; padding:14px 32px;
  font-size:9px; letter-spacing:0.22em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; font-weight:600; color:#33291F;
  cursor:pointer; margin:4px 6px; transition:all 0.2s;
}
.proc-cta-btn:hover { background:#33291F; color:#fff; border-color:#33291F; }


/* ─── HOW IT WORKS ─── */
#process {
  padding:96px 80px;
  background:var(--black);
}
#process .section-label { color:rgba(255,255,255,0.25); }
#process .section-label::before { background:rgba(255,255,255,0.1); }
#process h2.section-title { color:var(--white); }
.process-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; margin-top:60px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.process-step {
  padding:40px 32px 36px;
  border-right:1px solid rgba(255,255,255,0.08);
}
.process-step:last-child { border-right:none; }
.process-num {
  font-family:'Figtree', sans-serif;
  font-size:52px; font-weight:300;
  color:rgba(255,255,255,0.07); line-height:1; margin-bottom:20px;
}
.process-title {
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.7); font-weight:600; margin-bottom:10px;
}
.process-text {
  font-size:11px; color:rgba(255,255,255,0.35); line-height:1.9; font-weight:300;
}

/* ─── CONTACT ─── */
#contact {
  padding:96px 80px;
  background:var(--white);
  display:grid; grid-template-columns:1fr 1fr; gap:100px;
}
.contact-info-row {
  display:flex; gap:16px; padding:18px 0;
  border-bottom:1px solid var(--line2); align-items:flex-start;
}
.contact-icon { font-size:16px; flex-shrink:0; margin-top:2px; }
.contact-lbl {
  font-size:8px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--silver); margin-bottom:3px;
}
.contact-val { font-size:13px; color:var(--black); font-weight:300; }
.form-title {
  font-family:'Figtree', sans-serif;
  font-size:28px; font-weight:300; color:var(--black); margin-bottom:28px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group { margin-bottom:14px; }
.form-group label {
  display:block; font-size:8px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--stone); margin-bottom:6px; font-weight:500;
}
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:11px 14px;
  background:var(--page); border:1px solid var(--line);
  font-family:'Figtree', sans-serif; font-size:12px; color:var(--black);
  outline:none; transition:border-color 0.25s; -webkit-appearance:none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color:var(--black);
}
.form-group textarea { height:100px; resize:vertical; }
.btn-submit {
  width:100%; background:#2C2C2C; color:var(--white); border:none;
  padding:14px; font-size:9px; letter-spacing:0.25em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; font-weight:600; cursor:pointer;
  transition:background 0.25s;
}
.btn-submit:hover { background:#1f1f1f; }

/* ─── FOOTER ─── */
footer {
  background:#2C2C2C; padding:40px 80px 24px;
}
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px;
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-logo {
  font-family:'Figtree', sans-serif; font-size:20px; font-weight:400;
  letter-spacing:0.1em; color:var(--white); margin-bottom:14px;
}
.footer-logo em { font-style:italic; font-weight:300; }
.footer-desc { font-size:11px; color:rgba(255,255,255,0.55); line-height:1.9; font-weight:300; }
.footer-col-title {
  font-size:8px; letter-spacing:0.28em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); margin-bottom:18px; font-weight:600;
}
.footer-col a {
  display:block; text-decoration:none;
  color:rgba(255,255,255,0.6); font-size:11px; margin-bottom:10px;
  transition:color 0.25s; font-weight:300;
}
.footer-col a:hover { color:rgba(255,255,255,0.8); }
.footer-bottom {
  padding-top:24px; display:flex; justify-content:space-between; align-items:center;
}
.footer-copy { font-size:9px; color:rgba(255,255,255,0.35); letter-spacing:0.1em; }
.footer-socials { display:flex; gap:12px; }
.footer-soc {
  width:32px; height:32px; border:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.25); font-size:12px; transition:all 0.25s;
  text-decoration:none; font-weight:600;
}
.footer-soc:hover { border-color:rgba(255,255,255,0.5); color:rgba(255,255,255,0.9); }
.footer-soc svg { width:15px; height:15px; display:block; }
.footer-follow { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.footer-follow-lbl {
  font-size:8px; letter-spacing:0.28em; text-transform:uppercase;
  color:rgba(255,255,255,0.4); font-weight:500;
}
.footer-legal { display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; }
.footer-legal a {
  font-size:9px; color:rgba(255,255,255,0.45); letter-spacing:0.08em;
  text-decoration:none; transition:color 0.25s; cursor:pointer;
}
.footer-legal a:hover { color:rgba(255,255,255,0.85); }

/* ─── CHAT ─── */
.chat-launcher {
  position:fixed; bottom:32px; right:32px; z-index:900;
  width:52px; height:52px; background:var(--white); border-radius:50%;
  border:1px solid var(--line); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:14px; box-shadow:0 4px 20px rgba(0,0,0,0.08); transition:all 0.3s;
  color:var(--black); font-family:'Figtree', sans-serif; font-weight:600; letter-spacing:0.05em;
}
.chat-launcher:hover { transform:scale(1.08); box-shadow:0 12px 40px rgba(0,0,0,0.35); }
.chat-pulse {
  position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid rgba(0,0,0,0.15); animation:pulse 2.5s ease-out infinite;
}
@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.5);opacity:0} }
.chat-win {
  position:fixed; bottom:96px; right:32px; z-index:900;
  width:340px; height:460px; background:var(--white);
  box-shadow:0 24px 80px rgba(0,0,0,0.12);
  display:flex; flex-direction:column; overflow:hidden;
  transform:scale(0.9) translateY(16px); opacity:0;
  transition:all 0.3s ease; pointer-events:none;
  border:1px solid var(--line);
}
.chat-win.open { transform:scale(1) translateY(0); opacity:1; pointer-events:all; }
.chat-win-header {
  background:#2C2C2C; padding:18px 20px;
  display:flex; align-items:center; gap:12px;
}
.chat-av {
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}
.chat-win-name { color:var(--white); font-size:12px; font-weight:600; }
.chat-win-status {
  color:rgba(255,255,255,0.4); font-size:9px;
  display:flex; align-items:center; gap:4px; margin-top:2px;
}
.chat-dot { width:5px; height:5px; border-radius:50%; background:#4CAF50; }
.chat-x { margin-left:auto; background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.35); font-size:16px; }
.chat-msgs {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:10px; background:var(--page);
}
.chat-msgs::-webkit-scrollbar { width:3px; }
.chat-msgs::-webkit-scrollbar-thumb { background:var(--line); }
.chat-msg { max-width:85%; }
.chat-msg.bot { align-self:flex-start; }
.chat-msg.user { align-self:flex-end; }
.chat-bubble { padding:9px 13px; font-size:11px; line-height:1.6; font-weight:300; }
.chat-msg.bot .chat-bubble { background:var(--white); border:1px solid var(--line); color:var(--black); }
.chat-msg.user .chat-bubble { background:var(--black); color:var(--white); }
.chat-time { font-size:8px; color:var(--silver); margin-top:3px; }
.chat-msg.user .chat-time { text-align:right; }
.chat-input-row {
  padding:12px 14px; background:var(--white); border-top:1px solid var(--line);
  display:flex; gap:8px; align-items:center;
}
.chat-inp {
  flex:1; border:1px solid var(--line); padding:9px 12px;
  font-family:'Figtree', sans-serif; font-size:11px; outline:none;
  background:var(--page); color:var(--black); transition:border-color 0.2s;
}
.chat-inp:focus { border-color:var(--black); }
.chat-send-btn {
  width:34px; height:34px; background:var(--black); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--white); font-size:14px;
}

/* ─── PAGE SYSTEM ─── */
#homePage {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#homePage.leaving {
  opacity:0; transform:translateY(-12px); pointer-events:none;
}
#homePage.hidden { display:none; }
#collPage {
  position:fixed; inset:0; z-index:500;
  background:var(--page);
  overflow-y:auto;
  overscroll-behavior:none;
  transform:translateX(100%);
  transition:transform 0.42s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
  pointer-events:none;
}
#collPage.open { pointer-events:auto; }
#collPage.open { transform:translateX(0); }

/* ── Shared topbar for all overlay pages ── */
/* ── Floating ✕ close button — ALL overlay pages ── */
.overlay-close-btn {
  position:fixed;
  top:14px; right:48px;
  z-index:600;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(250,250,248,0.95);
  border:1px solid var(--line);
  cursor:pointer;
  color:var(--stone); font-size:16px; line-height:1;
  transition:border-color 0.2s, color 0.2s, background 0.2s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.overlay-close-btn:hover { border-color:var(--black); color:var(--black); }

/* Nav dark mode when overlay page is open */
body.overlay-open {
  
}
body.overlay-open nav {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
body.overlay-open .nav-logo-img { filter:brightness(0) !important; }
body.overlay-open .nav-center a { color:rgba(0,0,0,0.6) !important; }
body.overlay-open .nav-center a:hover { color:var(--black) !important; }
body.overlay-open .nav-lang { border-color:rgba(0,0,0,0.2) !important; color:rgba(0,0,0,0.6) !important; }
body.overlay-open .ham-line { background:var(--black) !important; }
body.overlay-open .nav-cta { background:var(--black) !important; color:var(--white) !important; }

/* ── Rental page ── */
#rentPage {
  position:fixed; inset:0; z-index:500;
  background:var(--page);
  overflow-y:auto;
  overscroll-behavior:none;
  transform:translateX(100%);
  transition:transform 0.42s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
  pointer-events:none;
}
#rentPage.open { pointer-events:auto; transform:translateX(0); }
#wellnessPage {
  position:fixed; inset:0; z-index:500;
  background:var(--page);
  overflow-y:auto;
  overscroll-behavior:none;
  transform:translateX(100%);
  transition:transform 0.42s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
  pointer-events:none;
}
#wellnessPage.open { pointer-events:auto; transform:translateX(0); }
/* ── Rent Hero ── */
.rent-hero {
  position:relative; height:52vh; min-height:360px; overflow:hidden;
}
.rent-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform 0.6s;
}
.rent-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.1) 100%);
}
.rent-hero-content {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:0 80px 48px; max-width:700px;
}
.rent-hero-title {
  font-family:'Figtree', sans-serif; font-size:clamp(40px,7vw,68px);
  font-weight:300; color:var(--white); line-height:1; margin:12px 0 16px;
}
.rent-hero-title em { font-style:normal; color:rgba(255,255,255,0.55); }
.rent-hero-sub {
  font-size:13px; color:rgba(255,255,255,0.6); line-height:1.8; font-weight:300; max-width:480px;
}
/* Minimal hero — no background image */
.rent-hero--minimal {
  height:auto; min-height:0;
  background:var(--white); border-bottom:1px solid var(--line2);
  padding:60px 80px 48px;
}
.rent-hero--minimal .rent-hero-content {
  position:relative; padding:0; max-width:700px;
}
.rent-hero--minimal .section-label { color:var(--stone); }
.rent-hero--minimal .rent-hero-title { color:var(--black); }
.rent-hero--minimal .rent-hero-title em { color:var(--stone); }
.rent-hero--minimal .rent-hero-sub { color:var(--stone); }

/* ── Rent Filter Bar ── */
.rent-filter-bar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding:20px 80px; border-bottom:1px solid var(--line2);
  background:var(--white); position:sticky; top:0; z-index:10;
}
.rent-filter-dropdowns {
  display:flex; gap:16px; flex-wrap:nowrap; align-items:flex-end; flex:1;
}
.rent-filter-group {
  display:flex; flex-direction:column; gap:5px; flex:1; min-width:0;
}
.rent-filter-label {
  font-size:8px; letter-spacing:0.16em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; font-weight:700; color:var(--stone);
}
.rent-filter-select {
  padding:8px 28px 8px 12px; font-size:12px; font-family:'Figtree', sans-serif; font-weight:500;
  color:var(--black); background:var(--white); border:1px solid var(--line);
  border-radius:0; cursor:pointer; outline:none; width:100%;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  transition:border-color 0.2s;
}
.rent-filter-select:hover { border-color:var(--black); }
.rent-filter-select:focus { border-color:var(--black); }
.rent-count {
  font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--stone); font-weight:500;
}

/* ── Rent Grid ── */
.rent-grid {
  padding:40px 80px 40px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  min-height:300px;
}

/* ── Rent Card ── */
.rent-card {
  background:var(--white); overflow:hidden; cursor:pointer;
  border:1px solid var(--line2);
  transition:transform 0.35s ease, box-shadow 0.35s ease;
  display:flex; flex-direction:column;
}
.rent-card:hover {
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(0,0,0,0.12);
}
.rent-card-img {
  position:relative; height:280px; overflow:hidden;
}
.rent-card-img-inner {
  width:100%; height:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:#0a0a0a;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.rent-card:hover .rent-card-img-inner { transform:scale(1.04); }
.rent-card-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.03) 100%);
}
.rent-card-badges {
  position:absolute; top:14px; left:14px; z-index:2;
  display:flex; gap:5px; flex-wrap:wrap;
}
.rent-badge {
  font-size:8px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--white); padding:4px 9px; font-weight:600;
  font-family:'Figtree', sans-serif; background:rgba(51,41,31,0.75);
  backdrop-filter:blur(4px);
}
.rent-badge.featured { background:rgba(180,140,60,0.85); }
.rent-card-over {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:14px 16px 12px;
}
.rent-card-area {
  font-size:8px; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); margin-bottom:3px; display:block;
}
.rent-card-name {
  font-family:'Figtree', sans-serif;
  font-size:clamp(16px,1.8vw,20px); font-weight:400; color:var(--white);
  line-height:1.2;
}

/* Card body */
.rent-card-body {
  padding:14px 16px 16px; flex:1; display:flex; flex-direction:column;
}
.rent-card-loc {
  font-size:8px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--silver); margin-bottom:8px;
}
.rent-card-specs { display:flex; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.rent-spec { display:flex; align-items:center; gap:4px; }
.rent-card-desc {
  font-size:12px; color:var(--stone); line-height:1.7; font-weight:300;
  margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.rent-card-footer {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-top:auto; padding-top:10px; border-top:1px solid var(--line2);
}
.rent-card-prices { display:flex; flex-direction:column; gap:2px; }
.rent-price-main {
  font-family:'Figtree', sans-serif;
  font-size:18px; color:var(--black); font-weight:400; letter-spacing:-0.01em;
}
.rent-price-sub {
  font-size:8px; color:var(--stone); letter-spacing:0.1em; text-transform:uppercase;
}
.rent-card-view {
  font-size:8px; letter-spacing:0.18em; text-transform:uppercase;
  display:flex; align-items:center; gap:5px;
  transition:all 0.2s; font-weight:600;
  color:var(--stone); border-bottom:1px solid var(--line);
  padding-bottom:1px;
}
.rent-card:hover .rent-card-view { color:var(--black); border-color:var(--black); }

/* Loading */
.rent-loading {
  grid-column:1/-1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:80px 20px; gap:16px;
  color:var(--stone); font-size:12px; letter-spacing:0.1em;
}
.rent-loading-spinner {
  width:28px; height:28px; border:2px solid var(--line);
  border-top-color:var(--black); border-radius:50%;
  animation:rentSpin 0.7s linear infinite;
}
@keyframes rentSpin { to { transform:rotate(360deg); } }

/* Back button wrap */
.rent-back-wrap {
  display:flex; justify-content:center; padding:20px 80px 60px;
}
.rent-notify-btn {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); padding:13px 28px;
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; font-weight:600;
  color:var(--black); background:none; cursor:pointer;
  transition:all 0.2s;
}
.rent-notify-btn:hover { background:var(--black); color:var(--white); border-color:var(--black); }

/* ── Rent detail modal ── */
/* ─── RENTAL DETAIL FULL PAGE ─── */
.rent-det-overlay {
  position:absolute; top:0; left:0; right:0; min-height:100%;
  z-index:50; background:var(--white);
  overflow-x:hidden;
}
.rent-det-overlay .rent-det-topbar { position:sticky; top:0; z-index:10; }
.rent-det-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:56px; background:var(--white);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;
}
.rent-det-back {
  display:flex; align-items:center; gap:8px; background:none; border:none;
  cursor:pointer; font-family:'Figtree', sans-serif; font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--stone);
  font-weight:600; transition:color 0.2s;
}
.rent-det-back:hover { color:var(--black); }
.rent-det-topbar-name {
  font-family:'Figtree', sans-serif; font-size:14px; color:var(--black);
  letter-spacing:0.04em; position:absolute; left:50%; transform:translateX(-50%);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40%;
}
/* Gallery */
.rent-det-gallery { position:relative; background:var(--ivory); }
.rent-det-gallery-main {
  width:100%; height:60vh; min-height:360px; max-height:600px;
  object-fit:cover; display:block; cursor:pointer;
}
.rent-det-gallery-counter {
  position:absolute; bottom:16px; right:16px; background:rgba(0,0,0,0.6);
  color:#fff; padding:5px 14px; font-size:10px; letter-spacing:0.1em;
  font-family:'Figtree', sans-serif; font-weight:600;
}
.rent-det-gallery-type {
  position:absolute; top:16px; left:16px; z-index:3;
  background:rgba(26,35,50,0.85); backdrop-filter:blur(8px);
  color:#E8D5B0; padding:8px 18px;
  font-family:'Figtree', sans-serif; font-size:10px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
  border:1px solid rgba(232,213,176,0.4);
}
.rent-det-gallery-strip {
  display:flex; gap:4px; padding:6px 0; overflow-x:auto; background:var(--white);
  scrollbar-width:none; -ms-overflow-style:none;
}
.rent-det-gallery-strip::-webkit-scrollbar { display:none; }
.rent-det-thumb {
  width:80px; height:60px; flex-shrink:0; object-fit:cover;
  cursor:pointer; opacity:0.5; transition:opacity 0.2s; border:2px solid transparent;
}
.rent-det-thumb:hover { opacity:0.8; }
.rent-det-thumb.active { opacity:1; border-color:var(--black); }
/* Lightbox with navigation */
.rent-det-lightbox {
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.95);
  display:flex; align-items:center; justify-content:center;
}
.rent-det-lightbox img { max-width:90%; max-height:88vh; object-fit:contain; }
.rent-det-lb-close {
  position:absolute; top:16px; right:20px; font-size:32px; color:#fff;
  background:none; border:none; cursor:pointer; z-index:2;
}
.rent-det-lb-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,0.15); border:none; color:#fff;
  width:48px; height:48px; border-radius:50%; font-size:22px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s;
}
.rent-det-lb-nav:hover { background:rgba(255,255,255,0.3); }
.rent-det-lb-prev { left:16px; }
.rent-det-lb-next { right:16px; }
.rent-det-lb-counter {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.7); font-size:12px; letter-spacing:0.12em;
  font-family:'Figtree', sans-serif; font-weight:500;
}
/* Content */
.rent-det-content {
  max-width:960px; margin:0 auto; padding:40px 48px 60px;
}
.rent-det-name {
  font-family:'Figtree', sans-serif; font-size:32px;
  font-weight:400; color:var(--black); margin-bottom:6px;
}
.rent-det-loc {
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--silver); margin-bottom:20px;
}
.rent-det-specs {
  display:flex; gap:24px; flex-wrap:wrap; margin-bottom:24px;
  padding-bottom:20px; border-bottom:1px solid var(--line2);
}
/* Highlights — sticker style (no bg) */
.rent-det-highlights {
  display:flex; gap:18px; flex-wrap:wrap; margin-bottom:28px;
}
.rent-det-hl {
  display:inline-flex; align-items:center; gap:8px;
  padding:0;
  font-size:13px; color:var(--black); font-weight:500;
}
.rent-det-hl-icon { font-size:18px; }
/* Description */
.rent-det-desc {
  font-size:13px; color:var(--black); line-height:1.9; font-weight:400;
  margin-bottom:28px;
}
/* Section title — Gold #C9A96E, Thin */
.rent-det-section {
  font-family:'Figtree', sans-serif;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:#C9A96E; font-weight:300;
  margin-top:32px; margin-bottom:14px; padding-bottom:8px;
  border-bottom:1px solid #C9A96E;
}
.rent-det-section:first-of-type { margin-top:8px; }
/* Pricing — compact table style */
.rent-det-pricing {
  margin-bottom:28px;
}
.rent-det-price-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line2);
}
.rent-det-price-row:last-child { border-bottom:none; }
.rent-det-price-label {
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--black); font-weight:600;
}
.rent-det-price-val {
  font-family:'Figtree', sans-serif; font-size:16px;
  color:var(--black); font-weight:400;
}
/* Include / Exclude */
.rent-det-features {
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:32px;
}
.rent-det-feat-title {
  font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.rent-det-feat-title.inc { color:#16a34a; }
.rent-det-feat-title.exc { color:#dc2626; }
.rent-det-feat-list {
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.rent-det-feat-list li {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:500; line-height:1;
  padding:7px 13px; border-radius:999px;
  color:var(--black); white-space:nowrap;
}
.rent-det-feat-list li.inc-chip {
  background:#e8f5e9; color:#15803d; border:1px solid #a5d6a7;
}
.rent-det-feat-list li.exc-chip {
  background:#ffebee; color:#b91c1c; border:1px solid #ef9a9a;
}
.rent-det-feat-list li .fi { flex-shrink:0; font-size:12px; font-weight:700; }
.rent-det-feat-list li .fi.inc { color:#16a34a; }
.rent-det-feat-list li .fi.exc { color:#dc2626; }

/* Checklist style — 2 column panels (no bg color) */
.feat-col {
  padding:0;
}
.feat-col .rent-det-feat-title {
  padding-bottom:8px; margin-bottom:10px;
  border-bottom:1px solid var(--line2);
}
.rent-det-feat-list-check {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.rent-det-feat-list-check li {
  display:flex; align-items:flex-start; gap:8px;
  font-size:12px; color:var(--black); font-weight:500; line-height:1.5;
}
.check-mark {
  flex-shrink:0; font-weight:700; font-size:13px;
  width:16px; display:inline-block; text-align:center;
}
.check-mark.inc { color:#16a34a; }
.check-mark.exc { color:#dc2626; }

/* Season sub-header inside pricing */
.rent-det-season-sub {
  font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  color:#C9A96E; font-weight:700;
  margin-top:14px; margin-bottom:4px;
  padding:4px 0;
}
.rent-det-season-sub.peak { color:#B5704A; }

/* Payment Terms V2 — 3 columns (legacy) */
.rent-det-payment-v2 {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  margin-bottom:28px;
}
.rent-det-payment-v2 .pay-block {
  background:var(--ivory); border:1px solid var(--line2);
  padding:16px 18px;
}
.rent-det-payment-v2 .pay-title {
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:#C9A96E; font-weight:700; margin-bottom:10px;
  padding-bottom:8px; border-bottom:1px solid var(--line2);
}

/* YouTube embed — responsive 16:9 */
.rent-det-video {
  position:relative; width:100%; padding-bottom:56.25%;
  margin-bottom:28px; background:#000; overflow:hidden;
}
.rent-det-video iframe {
  position:absolute; top:0; left:0; width:100%; height:100%;
  border:0;
}

/* Payment Terms — Dropdown (accordion) style */
.rent-det-pay-drop {
  margin-top:36px; margin-bottom:28px;
  border:none; background:transparent;
}
.rent-det-pay-drop > summary,
.rent-det-pay-drop .pay-sub > summary {
  list-style:none; cursor:pointer;
  font-family:'Figtree', sans-serif; font-weight:700;
  color:var(--black); transition:background 0.2s;
  user-select:none;
}
.rent-det-pay-drop > summary::-webkit-details-marker,
.rent-det-pay-drop .pay-sub > summary::-webkit-details-marker { display:none; }
.rent-det-pay-drop > summary {
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:#C9A96E; font-weight:300;
  padding:0 0 8px 0;
  margin-bottom:10px;
  border-bottom:1px solid #C9A96E;
  display:flex; justify-content:space-between; align-items:center;
}
.rent-det-pay-drop > summary:hover { color:#B5704A; }
.pay-drop-arrow {
  font-size:12px; color:#C9A96E; transition:transform 0.25s;
}
.rent-det-pay-drop[open] > summary .pay-drop-arrow,
.pay-sub[open] > summary .pay-drop-arrow { transform:rotate(180deg); }
.pay-drop-body { padding:4px 0; }
.pay-sub {
  border-top:1px solid var(--line2);
}
.pay-sub:first-child { border-top:none; }
.pay-sub > summary {
  font-size:12px; color:#C9A96E;
  padding:12px 32px;
}
.pay-sub > summary:hover { background:#F9F8F5; }
.pay-sub .rent-det-pay-list {
  padding:4px 32px 14px 52px; margin:0;
}
/* Payment Terms — compact list */
.rent-det-payment {
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px;
}
.rent-det-pay-title {
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--black); font-weight:700; margin-bottom:8px;
}
.rent-det-pay-list { list-style:none; padding:0; margin:0; }
.rent-det-pay-list li {
  font-size:12px; color:var(--black); line-height:1.8; font-weight:400;
  padding-left:14px; position:relative;
}
.rent-det-pay-list li::before {
  content:'\2022'; position:absolute; left:0; color:var(--stone);
}
/* CTA buttons (WhatsApp + Telegram) */
.rent-det-cta-row {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:4px;
}
.rent-det-cta {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; text-align:center; padding:18px;
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; font-weight:600;
  color:#fff; border:none; cursor:pointer;
  transition:background 0.2s, transform 0.1s; text-decoration:none;
}
.rent-det-cta:hover { transform:translateY(-1px); }
.rent-det-cta svg { flex-shrink:0; }
.rent-det-cta--wa { background:#25d366; }
.rent-det-cta--wa:hover { background:#1ebe57; }
.rent-det-cta--tg { background:#0088cc; }
.rent-det-cta--tg:hover { background:#0077b3; }

/* Contact dropdown — no border, clean */
.rent-det-contact-drop {
  margin-top:28px;
  border:none; background:transparent;
}
.rent-det-contact-summary {
  list-style:none; cursor:pointer;
  padding:10px 0;
  user-select:none;
}
.rent-det-contact-summary::-webkit-details-marker { display:none; }
.rent-det-agent-card-sm {
  display:flex; align-items:center; gap:12px;
}
.rent-det-agent-av-sm {
  width:42px; height:42px; border-radius:50%;
  flex-shrink:0; background-size:cover; background-position:center;
  border:none;
}
.rent-det-agent-info-sm { flex:1; min-width:0; }
.rent-det-agent-name-sm {
  font-family:'Figtree', sans-serif;
  font-size:14px; font-weight:700; color:var(--black);
  line-height:1.2;
}
.rent-det-agent-title-sm {
  font-size:9px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--stone); font-weight:500; margin-top:2px;
}
.rent-det-acc-arrow {
  font-size:11px; color:var(--stone); transition:transform 0.25s;
  flex-shrink:0;
}
.rent-det-contact-drop[open] .rent-det-acc-arrow { transform:rotate(180deg); }
.rent-det-contact-body {
  display:flex; gap:8px;
  padding:10px 0 4px 0;
  border-top:none;
}
.rent-det-contact-btn {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  font-family:'Figtree', sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; color:#fff;
  transition:background 0.2s, transform 0.1s;
}
.rent-det-contact-btn:hover { transform:translateY(-1px); }
.rent-det-contact-btn--wa { background:#25d366; }
.rent-det-contact-btn--wa:hover { background:#1ebe57; }
.rent-det-contact-btn--email { background:#C9A96E; }
.rent-det-contact-btn--email:hover { background:#B5704A; }
.rent-det-contact-btn svg { flex-shrink:0; }
@media(max-width:768px){
  .rent-det-topbar { padding:0 16px; }
  .rent-det-topbar-name { display:none; }
  .rent-det-content { padding:24px 20px 48px; }
  .rent-det-name { font-size:24px; }
  .rent-det-gallery-main { height:44vh; min-height:260px; }
  .rent-det-features { gap:12px; }
  .rent-det-payment { grid-template-columns:1fr; }
  .rent-det-payment-v2 { grid-template-columns:1fr; }
  .rent-det-cta-row { grid-template-columns:1fr 1fr; gap:8px; }
  .rent-det-cta { padding:14px 8px; font-size:9px; letter-spacing:0.1em; }
  .rent-det-pricing { grid-template-columns:1fr 1fr; }
  .rent-det-highlights { gap:8px; }
  .rent-det-hl { font-size:10px; padding:6px 12px; }
}

.cp-right { display:flex; align-items:center; gap:12px; }
.cp-lang {
  background:none; border:1px solid var(--line); color:var(--stone);
  padding:5px 11px; cursor:pointer; font-size:9px; letter-spacing:0.12em;
  text-transform:uppercase; font-family:'Figtree', sans-serif;
  transition:all 0.2s;
}
.cp-lang.active, .cp-lang:hover { background:var(--black); border-color:var(--black); color:var(--white); }

/* Collections page header */
.cp-header {
  padding:64px 80px 0;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.cp-title {
  font-family:'Figtree', sans-serif;
  font-size:clamp(36px,4vw,56px); font-weight:300;
  color:var(--black); line-height:1.1; letter-spacing:-0.01em;
}
.cp-title em { font-style:italic; color:var(--stone); }
.cp-subtitle { font-size:11px; color:var(--stone); line-height:1.9; font-weight:300; margin-top:10px; max-width:400px; }
.cp-count { font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--stone); align-self:flex-end; }




/* ─── SIDEBAR ACCORDION CONTACT ─── */
.sid-acc-group { display:flex; flex-direction:column; gap:0; }
.sid-acc-item { border:none; margin-bottom:0; overflow:hidden; }
.sid-acc-item.open { border:none; }
.sid-acc-trigger {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:12px 16px; background:none; border:none; cursor:pointer;
  font-family:'Figtree', sans-serif; transition:background 0.2s;
}
.sid-acc-trigger:hover { background:var(--page); }
.sid-acc-item.open .sid-acc-trigger { background:var(--page); }
.sid-acc-item.open .sid-acc-trigger .sid-acc-label,
.sid-acc-item.open .sid-acc-trigger .sid-acc-arrow { color:var(--black); }
.sid-acc-icon { font-size:14px; flex-shrink:0; }
.sid-acc-label {
  font-family:'Figtree', sans-serif;  flex:1; text-align:left; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; font-weight:600; color:var(--black); }
.sid-acc-arrow { font-size:11px; color:var(--stone); transition:transform 0.25s; flex-shrink:0; }
.sid-acc-item.open .sid-acc-arrow { transform:rotate(180deg); }
.sid-acc-body { max-height:0; overflow: auto; transition:max-height 0.42s cubic-bezier(0.4,0,0.2,1); }
.sid-acc-item.open .sid-acc-body { max-height:700px; }
.sid-acc-inner { padding:16px; }
.sid-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sid-cal-month { font-family:'Figtree', sans-serif; font-size:15px; color:var(--black); }
.sid-cal-arr { background:none; border:1px solid var(--line); width:26px; height:26px; cursor:pointer; font-size:12px; color:var(--stone); display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.sid-cal-arr:hover { border-color:var(--black); color:var(--black); }
.sid-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.sid-dow { text-align:center; font-size:7px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); padding:5px 0; }
.sid-day { text-align:center; padding:6px 2px; font-size:10px; cursor:pointer; color:var(--black); transition:all 0.15s; }
.sid-day:hover:not(.sid-dis):not(.sid-emp) { background:var(--page); }
.sid-day.sid-sel { background:var(--black)!important; color:var(--white)!important; }
.sid-day.sid-today { font-weight:700; }
.sid-day.sid-dis { color:var(--line2); cursor:default; }
.sid-day.sid-emp { cursor:default; }
.sid-time-lbl { font-size:8px; letter-spacing:0.18em; text-transform:uppercase; color:var(--stone); margin:12px 0 7px; font-weight:500; }
.sid-time-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.sid-tslot { padding:7px 2px; text-align:center; border:1px solid var(--line); font-size:9px; cursor:pointer; color:var(--black); transition:all 0.15s; }
.sid-tslot:hover:not(.sid-unavail) { border-color:var(--black); }
.sid-tslot.sid-tsel { background:var(--black); color:var(--white); border-color:var(--black); }
.sid-tslot.sid-unavail { color:var(--line); cursor:default; font-size:8px; }
.sid-visit-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:2px; }
.sid-visit { padding:10px 8px; border:1px solid var(--line); text-align:center; cursor:pointer; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--black); transition:all 0.2s; font-weight:500; }
.sid-visit:hover { border-color:var(--black); }
.sid-visit.sid-vsel { background:var(--black); color:var(--white); border-color:var(--black); }
.sid-summary { background:var(--page); border:1px solid var(--line2); padding:10px 12px; margin:12px 0 8px; font-size:11px; color:var(--mid); line-height:1.7; }
.sid-lbl { display:block; font-size:8px; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); margin-bottom:4px; margin-top:10px; font-weight:500; }
.sid-lbl:first-child { margin-top:0; }
.sid-inp { width:100%; padding:9px 11px; border:1px solid var(--line); font-family:'Figtree', sans-serif; font-size:11px; color:var(--black); background:var(--page); outline:none; transition:border-color 0.2s; }
.sid-inp:focus { border-color:var(--black); }
.sid-ta { width:100%; padding:9px 11px; border:1px solid var(--line); font-family:'Figtree', sans-serif; font-size:11px; color:var(--black); background:var(--page); outline:none; min-height:72px; resize:none; transition:border-color 0.2s; margin-bottom:2px; }
.sid-ta:focus { border-color:var(--black); }
.sid-note { font-size:11px; color:var(--stone); line-height:1.7; font-weight:300; margin-bottom:12px; }
.sid-submit-btn { width:100%; background:var(--black); color:var(--white); border:none; padding:12px; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; font-family:'Figtree', sans-serif; font-weight:600; cursor:pointer; transition:background 0.2s; margin-top:12px; }
.sid-submit-btn:hover { background:var(--charcoal); }
.sid-submit-btn:disabled { background:var(--line2); cursor:default; }
.sid-sent { font-size:10px; color:var(--mid); margin-top:10px; text-align:center; padding:8px; background:var(--page); border:1px solid var(--line2); letter-spacing:0.04em; }
/* Enquiry agent card */
.enq-agent-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.enq-agent-av { width:42px; height:42px; border-radius:50%; background:url('img-cb93871e44.jpg?v=123') center 15% / cover; flex-shrink:0; border:2px solid var(--line2); }
.enq-agent-info { flex:1; min-width:0; }
.enq-agent-name { font-size:12px; font-weight:600; color:var(--white); letter-spacing:0.02em; }
.enq-agent-link { font-size:9px; color:var(--stone); letter-spacing:0.1em; text-transform:uppercase; margin-top:2px; cursor:pointer; }
.enq-agent-link:hover { color:var(--white); }
/* Enquiry dropdown */
.enq-select-wrap { position:relative; margin-top:8px; margin-bottom:2px; }
.enq-select-wrap::after { content:'◇'; position:absolute; right:11px; top:50%; transform:translateY(-50%); font-size:9px; color:var(--stone); pointer-events:none; }
.enq-select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:28px; }
/* Terms */
.enq-terms { font-size:9px; color:var(--stone); margin:8px 0 0; letter-spacing:0.04em; }

/* ─── ANIMATIONS ─── */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up-d1 { transition-delay:0.1s; }
.fade-up-d2 { transition-delay:0.2s; }
.fade-up-d3 { transition-delay:0.3s; }

/* ─── INVESTMENT SLIDER ─── */
#investment {
  padding:80px 0;
  background:var(--white);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.inv-header {
  padding:0 80px 32px;
  display:flex; align-items:flex-end; justify-content:space-between;
}
.inv-nav-btns { display:flex; gap:8px; }
.inv-nav-btn {
  width:38px; height:38px; border:1px solid var(--line);
  background:var(--white); cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:15px; color:var(--stone);
  transition:all 0.22s; border-radius:2px;
}
.inv-nav-btn:hover { border-color:var(--black); color:var(--black); }
/* Track — full-bleed, shows ~1.15 cards */
.inv-track-wrap {
  overflow:hidden; cursor:grab; user-select:none;
  padding:0;
}
.inv-track-wrap:active { cursor:grabbing; }
.inv-track {
  display:flex; gap:0;
  transition:transform 0.48s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change:transform;
}
/* Card — full width, one per view */
.inv-card {
  flex:0 0 100%;
  background:#0a0a0a; overflow:hidden; cursor:pointer;
  transition:box-shadow 0.3s;
  position:relative; border:none;
}
.inv-card:hover { box-shadow:0 28px 56px rgba(0,0,0,0.22); }
/* Full-height image container — no white body */
.inv-card-img {
  height:72vh; min-height:480px; max-height:680px; position:relative; overflow:hidden;
  display:block;
}
.inv-card-img-inner {
  position:absolute; inset:0;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.inv-card:hover .inv-card-img-inner { transform:scale(1.04); }
/* Deep gradient overlay — name sits at bottom of photo */
.inv-card-img-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.65) 30%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0.08) 80%,
    transparent 100%);
}
/* Top badge */
.inv-yield-badge {
  position:absolute; top:16px; left:16px; z-index:2;
  background:rgba(51,41,31,0.85); color:var(--white);
  font-size:8px; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; padding:5px 11px;
  font-family:'Figtree', sans-serif;
  backdrop-filter:blur(4px);
}
.inv-yield-badge.light { background:rgba(255,255,255,0.92); color:var(--black); }
/* Heart button */
.inv-save {
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.92); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:all 0.2s;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.inv-save:hover { background:var(--white); transform:scale(1.08); }
/* Name overlaid at bottom of photo */
.inv-card-over {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:28px 32px 32px;
}
.inv-card-coll {
  font-size:9px; letter-spacing:0.25em; text-transform:uppercase;
  color:rgba(255,255,255,0.6); margin-bottom:8px; font-weight:600;
}
.inv-card-name {
  font-family:'Figtree', sans-serif;
  font-size:clamp(26px,6vw,42px);
  font-weight:400; color:var(--white); line-height:1.15;
}
/* Card body below photo */
.inv-card-body {
  padding:20px 24px;
}
.inv-card-loc {
  font-size:8px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--silver); margin-bottom:8px; font-weight:500;
}
.inv-card-price {
  font-family:'Figtree', sans-serif;
  font-size:22px; color:var(--black); font-weight:300; margin-bottom:8px; line-height:1;
}
.inv-card-yield-row { display:flex; align-items:center; gap:6px; }
.inv-yield-dot { width:5px; height:5px; border-radius:50%; background:var(--black); flex-shrink:0; }
.inv-yield-label { font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mid); font-weight:600; }
/* Progress dots */
.inv-dots { display:flex; gap:6px; justify-content:center; margin-top:24px; }
.inv-dot { width:22px; height:2px; background:var(--line); transition:all 0.3s; cursor:pointer; }
.inv-dot.active { background:var(--black); width:36px; }



/* ─── DETAIL PANEL ─── */
.det-overlay{
  position:fixed;inset:0;z-index:550;
  background:var(--page);
  overflow-y:auto;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform 0.42s cubic-bezier(0.22,1,0.36,1);
  pointer-events:none;
  visibility:hidden;
}
.det-overlay.open{transform:translateX(0);pointer-events:auto;visibility:visible;}
/* Scroll lock on body when any overlay is open */
/* body.scroll-locked removed — position:fixed on body was the thing that stranded the page */
.det-panel{
  width:100%;min-height:100vh;max-width:100%;
  background:var(--white);display:flex;flex-direction:column;
  overflow-x:hidden;box-sizing:border-box;
}
.det-overlay.open .det-panel{transform:none;}
.det-topbar{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:56px;background:var(--white);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
}
.det-topbar-logo{font-family:'Figtree', sans-serif;font-size:15px;color:var(--black);letter-spacing:0.08em;}
.det-topbar-logo em{font-style:italic;font-weight:300;}
.det-topbar-right{display:flex;align-items:center;gap:12px;}
.det-action-btn{
  background:none;border:1px solid var(--line);padding:6px 15px;
  font-size:9px;letter-spacing:0.15em;text-transform:uppercase;
  font-family:'Figtree', sans-serif;color:var(--stone);cursor:pointer;transition:all 0.2s;
}
.det-action-btn:hover{border-color:var(--black);color:var(--black);}
.det-close-btn{background:none;border:none;cursor:pointer;font-size:18px;color:var(--stone);padding:4px;transition:color 0.2s;}
.det-close-btn:hover{color:var(--black);}
/* Icon buttons: Share + Save */
.det-icon-btn{
  width:36px;height:36px;border-radius:50%;
  background:none;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--stone);
  transition:all 0.2s;flex-shrink:0;
}
.det-icon-btn:hover{border-color:var(--black);color:var(--black);}
.det-save-btn.saved{background:var(--black);border-color:var(--black);color:var(--white);}
.det-save-btn.saved svg{fill:var(--white);}
.det-body{flex:1;}
.det-body::-webkit-scrollbar{width:3px;}
.det-body::-webkit-scrollbar-thumb{background:var(--line);}
.det-inner{display:grid;grid-template-columns:1fr 380px;max-width:1400px;margin:0 auto;min-height:calc(100vh - 54px);}
.det-inner > *{min-width:0;}
/* Gallery */
.det-gallery{height:520px;overflow:hidden;position:relative;background:#0a0a0a;width:100%;box-sizing:border-box;}
.det-gallery-main{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transition:background-image 0.3s;cursor:pointer;}
.det-gallery-count{position:absolute;bottom:14px;right:16px;background:rgba(0,0,0,0.55);color:#fff;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;padding:5px 12px;font-family:'Figtree', sans-serif;}
.det-gal-arr{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.92);border:none;cursor:pointer;
  font-size:22px;display:flex;align-items:center;justify-content:center;
  color:var(--black);transition:background 0.2s;
  box-shadow:0 2px 12px rgba(0,0,0,0.18);
}
.det-gal-arr:hover{background:#fff;}
.det-gal-prev{left:14px;}
.det-gal-next{right:14px;}
.det-thumbs{display:flex;gap:2px;background:#fff;overflow-x:auto;scrollbar-width:none;padding:4px 0;}
.det-thumbs::-webkit-scrollbar{display:none;}
.det-thumb{flex:0 0 100px;height:68px;cursor:pointer;background-size:cover;background-position:center;opacity:0.55;transition:opacity 0.2s;border:none;position:relative;}
.det-thumb:hover{opacity:1;}
.det-thumb.active{opacity:1;outline:2px solid var(--black);outline-offset:-2px;}
.det-thumb-video{position:relative;}
.det-thumb-video::after{content:'▶';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:rgba(0,0,0,0.35);}
/* Video lightbox */
.video-lightbox{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;}
.video-lightbox.open{opacity:1;pointer-events:auto;}
.video-lightbox-inner{width:90%;max-width:960px;position:relative;aspect-ratio:16/9;background:#000;}
.video-lightbox-inner iframe,.video-lightbox-inner video{width:100%;height:100%;border:0;}
.video-lightbox-close{position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;padding:4px 8px;}
/* Det header */
.det-header{padding:28px 32px 20px;border-bottom:1px solid var(--line2);}
.det-breadcrumb{font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--black);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.det-badge{display:inline-block;font-size:8px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--white);padding:4px 10px;margin-bottom:10px;background:var(--black);}
.det-title{font-family:'Figtree', sans-serif;font-size:28px;font-weight:400;color:var(--black);line-height:1.2;margin-bottom:8px;}
.det-location{font-size:11px;color:var(--black);font-weight:300;margin-bottom:0;display:flex;align-items:center;gap:6px;}
.det-specs-row{display:flex;margin-top:20px;}
.det-spec{flex:1;text-align:center;padding:14px 6px;border-right:none;}
.det-spec:last-child{}
.det-spec-ico{display:flex;align-items:center;justify-content:center;margin-bottom:5px;color:var(--black);}
.det-spec-val{font-family:'Figtree', sans-serif;font-size:18px;color:var(--black);display:block;line-height:1;margin-bottom:2px;}
.det-spec-lbl{font-size:7px;letter-spacing:0.16em;text-transform:uppercase;color:var(--black);display:block;}
/* Inline price block under title */
.det-inline-price{padding:20px 0 20px;border-bottom:1px solid var(--line2);margin-bottom:20px;}
.det-inline-price-lbl{font-size:8px;letter-spacing:0.28em;text-transform:uppercase;color:var(--silver);margin-bottom:8px;font-weight:500;}
.det-inline-price-main{font-family:'Figtree', sans-serif;font-size:clamp(24px,3vw,36px);font-weight:300;color:var(--black);line-height:1;letter-spacing:-0.02em;font-variant-numeric:lining-nums tabular-nums;}
.det-inline-price-usd{font-size:14px;color:var(--stone);margin-top:8px;font-weight:300;font-family:'Figtree', sans-serif;letter-spacing:0.04em;}
.det-inline-yield{display:none;}
.det-inline-yield-txt{display:none;}
/* Sidebar price — keep but make secondary */
.det-price-block{padding-bottom:18px;border-bottom:1px solid var(--line2);margin-bottom:18px;}
.det-price-lbl{display:none;}
.det-price-main{font-family:'Figtree', sans-serif;font-size:22px;font-weight:300;color:var(--black);font-variant-numeric:lining-nums tabular-nums;}
.det-price-usd{font-size:11px;color:var(--stone);margin-top:3px;font-weight:300;}
.det-yield-pill{display:inline-flex;align-items:center;gap:6px;background:var(--page);border:1px solid var(--line);padding:6px 12px;margin-top:10px;}
.det-yield-dot{width:5px;height:5px;border-radius:50%;background:var(--black);flex-shrink:0;}
.det-yield-txt{font-size:9px;color:var(--black);font-weight:700;letter-spacing:0.16em;text-transform:uppercase;}
/* Open sections + Accordion */
.det-sections{padding:0 32px;}
.det-open-section{padding:28px 0;border-bottom:1px solid var(--line2);}
.det-section-title{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;font-weight:600;color:var(--black);margin-bottom:18px;}
.det-series-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.det-series-tab{padding:6px 16px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);}
.det-series-tab.active{background:var(--ink);color:var(--page);border-color:var(--ink);}
.det-unit-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:24px;padding-bottom:0;-webkit-overflow-scrolling:touch;}
.det-unit-tab{padding:12px 18px;border:0;background:transparent;cursor:pointer;font-size:14px;white-space:nowrap;color:var(--stone);border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;}
.det-unit-tab.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:600;}
.det-unit-meta{font-size:15px;color:var(--stone);margin-bottom:16px;letter-spacing:.02em;line-height:1.5;}
.det-unit-meta span{color:var(--ink);font-weight:600;}
.det-unit-floorplans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;}
.det-unit-floorplans img{width:100%;border:1px solid var(--line2);background:#fff;height:auto;display:block;}
.det-video-wrap{position:relative;padding-bottom:56.25%;height:0;background:#000;}
.det-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.det-fp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.det-fp-grid img{width:100%;border:1px solid var(--line2);background:#fff;height:auto;display:block;}
.det-fp-cap{text-align:center;font-size:12px;color:var(--stone);margin-top:6px;}
@media (max-width:640px){
  .det-unit-floorplans{grid-template-columns:1fr;}
  .det-unit-tab{padding:10px 14px;font-size:13px;}
}
.acc-item{border-bottom:1px solid var(--line2);}
.acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 0;background:none;border:none;cursor:pointer;font-family:'Figtree', sans-serif;}
.acc-trigger:hover .acc-lbl{color:var(--black);}
.acc-lbl{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;color:var(--mid);transition:color 0.2s;}
.acc-icon{width:22px;height:22px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--stone);transition:all 0.3s;flex-shrink:0;}
.acc-item.open .acc-icon{background:var(--black);border-color:var(--black);color:var(--white);transform:rotate(45deg);}
.acc-body{max-height:0;overflow: auto;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1);}
.acc-item.open .acc-body{max-height:1000px;}
.acc-inner{padding:0 0 24px;}
.det-desc{font-size:13px;color:var(--mid);line-height:2;font-weight:300;}
.det-desc p+p{margin-top:14px;}
.det-feats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
.det-feat{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:11px;color:var(--black);font-weight:300;}
.det-feat-dot{width:5px;height:5px;border-radius:50%;background:var(--black);flex-shrink:0;}
.det-feat-emoji{font-size:16px;line-height:1;flex-shrink:0;}
.det-tbl{width:100%;border-collapse:collapse;}
.det-tbl tr{border-bottom:1px solid var(--line2);}
.det-tbl tr:last-child{border-bottom:none;}
.det-tbl td{padding:10px 0;font-size:11px;vertical-align:top;}
.det-tbl td:first-child{color:var(--stone);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;width:44%;padding-top:12px;}
.det-tbl td:last-child{color:var(--black);text-align:right;}
.det-nearby-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.det-near{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--page);font-size:11px;}
.det-near-name{color:var(--mid);font-weight:300;}
.det-near-dist{color:var(--black);font-weight:500;font-size:10px;}
/* Similar */
.det-similar{padding:16px 40px 32px;background:var(--white);width:100%;box-sizing:border-box;}
.det-similar-lbl{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--stone);margin-bottom:0;}
.det-sim-scroll{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.det-sim-scroll::-webkit-scrollbar{display:none;}
.det-sim-card{flex:0 0 300px;background:#0a0a0a;cursor:pointer;transition:box-shadow 0.35s ease,transform 0.35s ease;overflow:hidden;position:relative;min-width:260px;}
.det-sim-card:hover{box-shadow:0 28px 56px rgba(0,0,0,0.28);transform:translateY(-4px);}
.det-sim-img{height:380px;background-size:cover;background-position:center;background-color:#0a0a0a;position:relative;overflow:hidden;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);}
.det-sim-card:hover .det-sim-img{transform:scale(1.04);}
.det-sim-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.90) 0%,rgba(0,0,0,0.60) 30%,rgba(0,0,0,0.20) 60%,transparent 100%);}
.det-sim-over{position:absolute;bottom:0;left:0;right:0;padding:14px 16px 18px;z-index:2;}
.det-sim-name{font-family:'Figtree', sans-serif;font-size:16px;color:var(--white);line-height:1.25;margin-bottom:4px;}
.det-sim-price{font-family:'Figtree', sans-serif;font-size:14px;color:rgba(255,255,255,0.9);font-weight:400;}
.det-sim-body{display:none;}
/* Similar arrows */
.det-sim-arrow{width:38px;height:38px;border:1px solid var(--line);background:var(--white);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--black);transition:all 0.2s;flex-shrink:0;}
.det-sim-arrow:hover{background:var(--black);color:var(--white);border-color:var(--black);}
/* Right sidebar */
.det-right{border-left:1px solid var(--line);position:sticky;top:0;height:calc(100vh - 54px);overflow-y:auto;}
.det-right::-webkit-scrollbar{width:3px;}
.det-right::-webkit-scrollbar-thumb{background:var(--line);}
.det-sidebar{padding:16px 20px 32px;}
.det-price-lbl{font-size:8px;letter-spacing:0.28em;text-transform:uppercase;color:var(--silver);margin-bottom:10px;font-weight:500;}
.det-price-main{font-family:'Figtree', sans-serif;font-size:32px;font-weight:300;color:var(--black);line-height:1;letter-spacing:-0.02em;font-variant-numeric:lining-nums tabular-nums;}
.det-price-usd{font-size:12px;color:var(--stone);margin-top:6px;font-weight:300;letter-spacing:0.02em;}
.det-price-block{padding-bottom:22px;border-bottom:1px solid var(--line2);margin-bottom:22px;}
.det-yield-pill{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);padding:8px 14px;margin-top:14px;}
.det-yield-dot{width:6px;height:6px;border-radius:50%;background:var(--black);flex-shrink:0;}
.det-yield-txt{font-size:9px;color:var(--black);font-weight:700;letter-spacing:0.18em;text-transform:uppercase;}
.det-cta-primary{width:100%;background:var(--black);color:var(--white);border:none;padding:14px;font-size:9px;letter-spacing:0.22em;text-transform:uppercase;font-family:'Figtree', sans-serif;font-weight:600;cursor:pointer;transition:background 0.2s;margin-bottom:10px;}
.det-cta-primary:hover{background:var(--charcoal);}
.det-cta-outline{width:100%;background:none;color:var(--black);border:1px solid var(--line);padding:12px;font-size:9px;letter-spacing:0.18em;text-transform:uppercase;font-family:'Figtree', sans-serif;font-weight:500;cursor:pointer;transition:all 0.2s;margin-top:0;}
.det-cta-outline:hover{border-color:var(--black);}
.det-divider{display:none;}
.det-agent{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.det-agent-av{width:56px;height:56px;border-radius:50%;background:url('img-cb93871e44.jpg?v=123') center 15% / cover;flex-shrink:0;border:2px solid var(--line2);}
.det-agent-name{font-size:13px;font-weight:600;color:var(--black);letter-spacing:0.02em;}
.det-agent-display{font-size:11px;color:var(--stone);font-weight:400;margin-top:1px;}
.det-agent-title{font-size:8px;letter-spacing:0.15em;text-transform:uppercase;color:var(--silver);margin-top:3px;}
.det-form-lbl{font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--stone);margin-bottom:5px;display:block;}
.det-form-inp{width:100%;padding:10px 12px;border:1px solid var(--line);font-family:'Figtree', sans-serif;font-size:11px;color:var(--black);background:var(--page);outline:none;transition:border-color 0.2s;margin-bottom:10px;}
.det-form-inp:focus{border-color:var(--black);}
.det-form-ta{width:100%;padding:10px 12px;border:1px solid var(--line);font-family:'Figtree', sans-serif;font-size:11px;color:var(--black);background:var(--page);outline:none;min-height:72px;resize:none;transition:border-color 0.2s;margin-bottom:12px;}
.det-form-ta:focus{border-color:var(--black);}
.det-footer-note{padding:14px;background:var(--page);border:1px solid var(--line2);margin-top:20px;}
.det-footer-note p{font-size:9px;color:var(--stone);line-height:1.7;font-weight:300;}

/* Developer row */
.det-developer-row{display:flex;align-items:center;gap:10px;padding:16px 0;border-bottom:1px solid var(--line2);margin-bottom:0;}
.det-dev-label{font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--stone);flex-shrink:0;}
.det-dev-name{font-size:12px;color:var(--black);font-weight:500;letter-spacing:0.04em;}

/* Key Highlights */
.det-highlights{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.det-highlight-item{display:flex;align-items:flex-start;gap:10px;padding:12px;background:var(--page);border:1px solid var(--line2);}
.det-hl-icon{font-size:18px;flex-shrink:0;line-height:1;}
.det-hl-text{font-size:11px;color:var(--mid);line-height:1.5;font-weight:300;}
.det-hl-label{font-size:8px;letter-spacing:0.14em;text-transform:uppercase;color:var(--stone);margin-bottom:2px;display:block;}

/* Floor plan */
.det-fp-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:0;}
.det-fp-select{padding:6px 30px 6px 12px;border:1px solid var(--line);background:var(--page);font-family:'Figtree', sans-serif;font-size:10px;letter-spacing:0.08em;color:var(--black);cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;min-width:140px;}
.det-fp-select:focus{border-color:var(--black);}
.det-floorplan-view img{width:100%;border:1px solid var(--line2);}
.det-floorplan-view .det-fp-placeholder{height:220px;background:var(--page);display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);flex-direction:column;gap:10px;}
.det-fp-placeholder span{font-size:11px;color:var(--stone);letter-spacing:0.1em;}

/* Description media */
.det-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;}
.det-media-item{aspect-ratio:4/3;overflow:hidden;cursor:pointer;position:relative;background:var(--page);}
.det-media-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s;}
.det-media-item:hover img{transform:scale(1.04);}
.det-media-video{display:flex;align-items:center;justify-content:center;}
.det-media-video::after{content:'▶';position:absolute;font-size:24px;color:#fff;background:rgba(0,0,0,0.4);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* Location category buttons */
.det-nearby-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.det-ncat{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--line);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;background:none;font-family:'Figtree', sans-serif;color:var(--stone);transition:all 0.2s;}
.det-ncat.active,.det-ncat:hover{border-color:var(--black);color:var(--black);background:var(--page);}

/* ─── BOOKING MODAL ─── */
.book-overlay{position:fixed;inset:0;z-index:3000;background:rgba(10,8,6,0.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.25s;}
.book-overlay.open{opacity:1;pointer-events:all;}
.book-modal{background:var(--white);width:100%;max-width:520px;transform:translateY(14px);transition:transform 0.3s;overflow:hidden;}
.book-overlay.open .book-modal{transform:translateY(0);}
.book-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line);}
.book-hd-title{font-family:'Figtree', sans-serif;font-size:20px;font-weight:400;color:var(--black);}
.book-hd-sub{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--stone);margin-top:2px;}
.book-close{background:none;border:none;cursor:pointer;font-size:17px;color:var(--stone);transition:color 0.2s;}
.book-close:hover{color:var(--black);}
.book-bd{padding:24px;}
.book-steps{display:flex;border-bottom:1px solid var(--line2);margin-bottom:24px;}
.book-step-tab{flex:1;text-align:center;padding:9px 0 11px;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--stone);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s;font-family:'Figtree', sans-serif;font-weight:500;}
.book-step-tab.active{color:var(--black);border-bottom-color:var(--black);}
.book-step-tab.done{color:var(--mid);border-bottom-color:var(--mid);}
.book-panel{display:none;}
.book-panel.active{display:block;}
/* Calendar */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cal-month-lbl{font-family:'Figtree', sans-serif;font-size:17px;font-weight:400;color:var(--black);}
.cal-arr{background:none;border:1px solid var(--line);width:30px;height:30px;cursor:pointer;font-size:13px;color:var(--stone);display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.cal-arr:hover{border-color:var(--black);color:var(--black);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;}
.cal-dow{text-align:center;font-size:8px;letter-spacing:0.12em;text-transform:uppercase;color:var(--stone);padding:7px 0;}
.cal-day{text-align:center;padding:8px 4px;font-size:11px;cursor:pointer;color:var(--black);transition:all 0.16s;font-family:'Figtree', sans-serif;}
.cal-day:hover:not(.dis):not(.emp){background:var(--page);}
.cal-day.sel{background:var(--black)!important;color:var(--white)!important;}
.cal-day.today{color:var(--black);font-weight:700;}
.cal-day.dis{color:var(--line2);cursor:default;}
.cal-day.emp{cursor:default;}
.time-sect-lbl{font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--stone);margin:14px 0 10px;}
.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px;}
.time-slot{padding:9px 4px;text-align:center;border:1px solid var(--line);font-size:10px;cursor:pointer;color:var(--black);transition:all 0.16s;font-family:'Figtree', sans-serif;}
.time-slot:hover:not(.unavail){border-color:var(--black);background:var(--page);}
.time-slot.sel{background:var(--black);color:var(--white);border-color:var(--black);}
.time-slot.unavail{color:var(--line);cursor:default;background:var(--page);font-size:9px;}
/* Visit type */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.visit-type{padding:14px 12px;border:1px solid var(--line);cursor:pointer;text-align:center;transition:all 0.2s;}
.visit-type:hover{border-color:var(--black);}
.visit-type.sel{border-color:var(--black);background:var(--black);}
.visit-type.sel .vt-lbl,.visit-type.sel .vt-sub,.visit-type.sel .vt-ico{color:var(--white)!important;}
.vt-ico{font-size:20px;margin-bottom:7px;}
.vt-lbl{font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--black);font-weight:600;margin-bottom:2px;}
.vt-sub{font-size:10px;color:var(--stone);font-weight:300;}
/* Summary */
.book-summary{background:var(--page);border:1px solid var(--line2);padding:14px 16px;margin-bottom:18px;}
.book-sum-prop{font-size:10px;color:var(--stone);font-weight:300;margin-bottom:5px;}
.book-sum-dt{font-family:'Figtree', sans-serif;font-size:16px;color:var(--black);line-height:1.3;}
.book-sum-type{font-size:9px;color:var(--mid);letter-spacing:0.12em;text-transform:uppercase;margin-top:3px;}
/* Form inputs in booking */
.book-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.book-form-row.full{grid-template-columns:1fr;}
.bf-lbl{font-size:8px;letter-spacing:0.18em;text-transform:uppercase;color:var(--stone);margin-bottom:4px;display:block;}
.bf-inp{width:100%;padding:9px 11px;border:1px solid var(--line);font-family:'Figtree', sans-serif;font-size:11px;color:var(--black);background:var(--white);outline:none;transition:border-color 0.2s;}
.bf-inp:focus{border-color:var(--black);}
.bf-ta{width:100%;padding:9px 11px;border:1px solid var(--line);font-family:'Figtree', sans-serif;font-size:11px;color:var(--black);background:var(--white);outline:none;min-height:68px;resize:none;transition:border-color 0.2s;}
.bf-ta:focus{border-color:var(--black);}
/* Footer nav */
.book-footer{display:flex;gap:8px;padding-top:4px;}
.book-btn-back{flex:0 0 auto;background:none;border:1px solid var(--line);padding:11px 18px;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;color:var(--stone);font-family:'Figtree', sans-serif;transition:all 0.2s;}
.book-btn-back:hover{border-color:var(--black);color:var(--black);}
.book-btn-next{flex:1;background:var(--black);color:var(--white);border:none;padding:12px;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;font-family:'Figtree', sans-serif;font-weight:600;cursor:pointer;transition:background 0.2s;}
.book-btn-next:hover{background:var(--charcoal);}
.book-btn-next:disabled{background:var(--line2);cursor:default;}
/* Success */
.book-success{text-align:center;padding:36px 20px;}
.book-success-ico{font-size:44px;margin-bottom:14px;}
.book-success-title{font-family:'Figtree', sans-serif;font-size:24px;font-weight:400;color:var(--black);margin-bottom:8px;}
.book-success-msg{font-size:11px;color:var(--stone);line-height:1.8;font-weight:300;max-width:320px;margin:0 auto 20px;}
.book-success-ref{font-size:9px;color:var(--black);letter-spacing:0.15em;text-transform:uppercase;font-weight:600;}
/* Responsive */



/* ─── COLLECTIONS HUB VIEW ─── */
#hubView { display:none !important; }
#gridView { display:block !important; }
#hubView.hidden { display:none !important; }
#gridView.visible { display:block !important; }

.hub-hero-inner { padding:48px 80px 36px; border-bottom:1px solid var(--line); }
.hub-hero-inner h2 { font-family:'Figtree', sans-serif; font-size:clamp(26px,3.5vw,44px); font-weight:300; color:var(--text); line-height:1.15; margin-bottom:8px; }
.hub-hero-inner h2 em { font-style:italic; color:var(--stone); }
.hub-hero-inner p { font-size:11px; color:var(--stone); font-weight:300; max-width:480px; margin-bottom:20px; }

.hub-cards-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); margin:1px 0; }
.hub-coll-card { background:var(--ivory,#FAFAF8); padding:24px 20px 20px; cursor:pointer; transition:background 0.2s; min-height:160px; display:flex; flex-direction:column; justify-content:space-between; border-bottom:2px solid transparent; }
.hub-coll-card:hover { background:#fff; border-bottom-color:var(--text); }
.hcc-badges { display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.hcc-new { font-size:7px; letter-spacing:0.15em; text-transform:uppercase; font-weight:700; background:var(--text); color:#fff; padding:2px 6px; }
.hcc-count { font-size:9px; letter-spacing:0.1em; color:var(--stone); text-transform:uppercase; }
.hcc-emoji { font-size:24px; display:block; margin-bottom:8px; line-height:1; }
.hcc-name { font-family:'Figtree', sans-serif; font-size:17px; font-weight:400; color:var(--text); line-height:1.25; margin-bottom:4px; }
.hcc-desc { font-size:10px; color:var(--stone); font-weight:300; line-height:1.6; }
.hub-coll-card-bottom { display:flex; align-items:center; justify-content:flex-end; margin-top:16px; }
.hcc-arrow { font-size:13px; color:var(--stone); }
.hub-view-all-row { padding:16px 80px; border-top:1px solid var(--line); }
.hub-view-all-btn { background:none; border:1px solid var(--stone); font-family:'Figtree', sans-serif; font-size:9px; letter-spacing:0.15em; text-transform:uppercase; font-weight:600; color:var(--stone); padding:8px 16px; cursor:pointer; transition:all 0.2s; }
.hub-view-all-btn:hover { border-color:var(--text); color:var(--text); }





/* ── Language Dropdown ──────────────────── */
.lang-selector { position:relative; }
.lang-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: 'Figtree', sans-serif;
  display: flex; align-items: center; gap: 4px;
  transition: all 0.2s;
  border-radius: 2px;
  min-width: 52px; justify-content: center;
}
.lang-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
nav.scrolled .lang-btn {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
}
nav.scrolled .lang-btn:hover {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}
.lang-caret { font-size: 10px; transition: transform 0.2s; }
.lang-dropdown.open + .lang-btn .lang-caret,
.lang-selector.open .lang-caret { transform: rotate(180deg); }
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #111;
  border: 1px solid rgba(255,255,255,0.15);
  min-width: 160px;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s;
  z-index: 999;
}
.lang-dropdown.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.lang-option {
  padding: 12px 16px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: 'Figtree', sans-serif;
}
.lang-option:hover { background: rgba(255,255,255,0.08); color: #fff; }
.lang-option.active { color: #fff; background: rgba(255,255,255,0.05); }
.lang-option.active::before { content: '✓ '; opacity: 0.6; }








/* ═══ NEW COLLECTION HUB CARDS ════════════════════════════════ */
#hubView { display:block; }
.hub-hero-inner { padding:80px 80px 48px; }
.hub-hero-inner h2 { font-family:'Figtree', sans-serif; font-size:clamp(32px,4vw,52px); font-weight:300; color:var(--black); }
.hub-hero-inner h2 em { font-style:italic; color:var(--stone); }
.hub-hero-inner p { font-size:13px; color:var(--stone); margin-top:12px; }

.hub-cards-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  padding:0 0 80px;
}
.hub-coll-card {
  position:relative;
  height:380px;
  overflow:hidden;
  cursor:pointer;
  background:#33291F;
}
.hub-coll-card-bg {
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  filter:brightness(0.55);
}
.hub-coll-card:hover .hub-coll-card-bg {
  transform:scale(1.06);
  filter:brightness(0.4);
}
.hub-coll-card-body {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:flex-end;
  padding:32px 28px;
  background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
  transition:background 0.4s;
}
.hub-coll-card:hover .hub-coll-card-body {
  background:linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.1) 100%);
}
.hcc-tag {
  font-size:8px; letter-spacing:0.25em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.hcc-tag::before { content:''; display:block; width:20px; height:1px; background:rgba(255,255,255,0.4); }
.hcc-name {
  font-family:'Figtree', sans-serif;
  font-size:clamp(20px,2vw,28px); font-weight:300;
  color:#fff; line-height:1.2; margin-bottom:12px;
}
.hcc-meta {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.hcc-count {
  font-size:9px; letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}
.hcc-price {
  font-family:'Figtree', sans-serif;
  font-size:15px; color:rgba(255,255,255,0.9);
}
.hcc-price-label {
  font-size:8px; letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(255,255,255,0.4); margin-bottom:2px;
}
.hcc-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  border-top:1px solid rgba(255,255,255,0.15);
  padding-top:14px; margin-top:4px;
  transform:translateY(4px); opacity:0;
  transition:all 0.3s;
}
.hub-coll-card:hover .hcc-cta { opacity:1; transform:translateY(0); color:#fff; }
.hcc-cta::after { content:'→'; }

/* Loading skeleton */
.hcc-price.loading {
  display:inline-block; width:120px; height:14px;
  background:linear-gradient(90deg,rgba(255,255,255,0.1) 25%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.1) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:2px;
}
.hcc-price.loading-failed {
  animation:none; background:none; width:auto; height:auto;
  color:rgba(255,255,255,0.5); font-size:11px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }





/* ═══ FILTER — Beds + Budget ═══════════════════════════════════ */
.filter-row {
  display:flex; align-items:center; gap:32px;
  padding:16px 80px 0;
  flex-wrap:wrap;
}
.filter-group { display:flex; align-items:center; gap:8px; }
.filter-label { font-size:8px; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); white-space:nowrap; }
.filter-chip {
  padding:7px 14px;
  border:1px solid var(--line);
  background:none;
  font-size:9px; letter-spacing:0.12em; text-transform:uppercase;
  font-family:'Figtree', sans-serif;
  color:var(--stone); cursor:pointer;
  transition:all 0.2s; border-radius:2px;
  white-space:nowrap;
}
.filter-chip:hover { border-color:var(--black); color:var(--black); }
.filter-chip.active { 
  background:var(--black); border-color:var(--black); 
  color:#fff; font-weight:500;
}
.filter-divider { width:1px; height:24px; background:var(--line); }
.filter-count {
  font-size:9px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--stone); margin-left:auto;
}



/* ─── Hub/Grid Toggle ─── */
.view-toggle {
  display:flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
}
.view-toggle-btn {
  padding:9px 16px;
  font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  font-family:'Figtree', sans-serif;
  background:none; border:none; cursor:pointer;
  color:var(--stone); transition:all 0.2s;
}
.view-toggle-btn.active { background:var(--black); color:#fff; }


/* ═══ INSIGHTS / BLOG PAGE ════════════════════════════════════ */

/* ─── ARTICLE DETAIL PANEL ─── */
#insArticlePanel {
  position:fixed;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; height:100% !important;
  background:#fff; z-index:600;
  overflow-y:auto; overscroll-behavior:none;
  transform:translateX(100%);
  transition:transform 0.38s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
  -webkit-overflow-scrolling:touch;
}
#insArticlePanel.open { transform:translateX(0) !important; }
.ins-art-topbar {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; padding:0 40px;
  height:60px; background:#fff; border-bottom:1px solid #e8e3db;
}
.ins-art-back {
  background:none; border:none; cursor:pointer;
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  font-family:'Figtree', sans-serif; color:#555;
  display:flex; align-items:center; gap:8px; transition:color 0.2s;
}
.ins-art-back:hover { color:#000; }
.ins-art-close {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid #ddd; cursor:pointer;
  color:#555; font-size:14px; line-height:1;
  transition:border-color 0.2s, color 0.2s;
}
.ins-art-close:hover { border-color:#000; color:#000; }
@media (max-width:768px) {
  .ins-art-topbar { padding:0 16px; height:52px; }
  .ins-art-back { font-size:12px; padding:8px 0; min-height:44px; }
  .ins-art-close { width:40px; height:40px; min-width:44px; min-height:44px; font-size:16px; }
}
.ins-art-body {
  max-width:720px; margin:0 auto;
  padding:72px 40px 100px;
}
.ins-art-tag {
  font-size:9px; letter-spacing:0.25em; text-transform:uppercase;
  color:#b4a88e; display:block; margin-bottom:20px;
}
.ins-art-title {
  font-family:'Figtree', sans-serif;
  font-size:clamp(30px,4vw,52px); font-weight:400;
  color:#1a1a1a; line-height:1.15; margin-bottom:24px;
}
.ins-art-meta {
  font-size:11px; letter-spacing:0.12em; color:#aaa;
  display:flex; gap:16px; align-items:center;
  padding-bottom:32px; border-bottom:1px solid #e8e3db; margin-bottom:48px;
}
.ins-art-cover {
  width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#e8e3db,#d0cbc1);
  display:flex; align-items:center; justify-content:center;
  font-size:72px; margin-bottom:48px; border-radius:2px;
}
.ins-art-content { font-size:15px; line-height:2; color:#333; }
.ins-art-content h3 {
  font-family:'Figtree', sans-serif;
  font-size:22px; font-weight:400; color:#1a1a1a;
  margin:40px 0 16px;
}
.ins-art-content p { margin-bottom:24px; }
.ins-art-content blockquote {
  border-left:3px solid #b4a88e;
  padding:16px 24px; margin:32px 0;
  background:#fafaf8; font-style:italic;
  color:#555; font-size:16px; line-height:1.7;
}
.ins-art-content ul { padding-left:20px; margin-bottom:24px; }
.ins-art-content ul li { margin-bottom:10px; }
/* Author widget */
#artAuthor {
  display:none; align-items:center; gap:14px;
  padding:20px 24px; margin-bottom:40px;
  background:#fafaf8; border:1px solid #e8e3db;
}
.art-author-avatar { font-size:28px; line-height:1; }
.art-author-name { font-size:13px; font-weight:600; color:#1a1a1a; letter-spacing:0.04em; }
.art-author-role { font-size:11px; color:#9A8467; letter-spacing:0.08em; margin-top:2px; }
/* External source badge on card */
.ins-article-source {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px;
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:#b4a88e;
}
.ins-article-source svg { opacity:0.6; }
.ins-article.is-external .ins-article-read { color:#b4a88e; }
/* Source widget in article panel */
.art-source-inner {
  border:1px solid #e8e3db; padding:28px 32px; margin-bottom:40px;
  background:#fafaf8;
}
.art-source-label {
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:#aaa; margin-bottom:10px;
}
.art-source-name {
  font-family:'Figtree', sans-serif; font-size:22px;
  color:#1a1a1a; margin-bottom:20px;
}
.art-source-link {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  color:#1a1a1a; text-decoration:none;
  border-bottom:1px solid #1a1a1a; padding-bottom:2px;
  transition:opacity 0.2s;
}
.art-source-link:hover { opacity:0.6; }

/* Article card - truncated excerpt */
.ins-article-excerpt-short {
  font-size:13px; line-height:1.8; color:#666; margin-bottom:20px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
#insightsPage {
  position:fixed; inset:0;
  background:#fff;
  z-index:500;
  overflow-y:auto;
  overscroll-behavior:none;
  transform:translateX(100%);
  transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
#insightsPage.open { transform:translateX(0); }

/* ins-topbar layout defined in shared topbar CSS above */

.ins-hero {
  padding:80px 80px 56px;
  border-bottom:1px solid #e8e3db;
}
.ins-hero-label {
  font-size:9px; letter-spacing:0.25em; text-transform:uppercase;
  color:#999; margin-bottom:16px;
}
.ins-hero-title {
  font-family:'Figtree', sans-serif;
  font-size:clamp(36px,5vw,60px); font-weight:300;
  color:#1a1a1a; line-height:1.1; margin-bottom:16px;
}
.ins-hero-title em { font-style:italic; color:#9A8467; }
.ins-hero-sub {
  font-size:14px; color:#777; line-height:1.7; max-width:600px;
}

/* Blog grid */
.ins-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  padding:0;
}
.ins-article {
  border-right:1px solid #e8e3db;
  border-bottom:1px solid #e8e3db;
  padding:40px;
  cursor:pointer;
  transition:background 0.2s;
}
.ins-article:nth-child(3n) { border-right:none; }
.ins-article:hover { background:#fafaf8; }
.ins-article-tag {
  font-size:8px; letter-spacing:0.22em; text-transform:uppercase;
  color:#b4a88e; margin-bottom:14px; display:block;
}
.ins-article-title {
  font-family:'Figtree', sans-serif;
  font-size:24px; font-weight:400;
  color:#1a1a1a; line-height:1.3; margin-bottom:14px;
}
.ins-article-excerpt {
  font-size:13px; line-height:1.8; color:#666; margin-bottom:20px;
}
.ins-article-meta {
  font-size:10px; letter-spacing:0.1em; color:#aaa;
  display:flex; align-items:center; gap:16px;
}
.ins-article-read {
  font-size:10px; letter-spacing:0.15em; text-transform:uppercase;
  color:#1a1a1a; border-bottom:1px solid #1a1a1a;
  padding-bottom:2px; display:inline-block;
  margin-top:16px; transition:opacity 0.2s;
}
.ins-article:hover .ins-article-read { opacity:0.5; }

/* Featured article (first) */
.ins-article.featured {
  grid-column:1/-1;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; padding:56px 80px;
  border-right:none;
  background:#f8f6f2;
}
.ins-article.featured .ins-article-title {
  font-size:clamp(28px,3.5vw,44px);
}
.ins-article.featured .ins-article-excerpt {
  font-size:14px; line-height:1.9;
}
.ins-featured-img {
  background:linear-gradient(135deg,#e8e3db,#d4cfc7);
  border-radius:2px; min-height:320px;
  display:flex; align-items:center; justify-content:center;
  font-size:64px;
}






/* Language dropdown on scrolled (white) nav */
nav.scrolled .lang-dropdown {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
nav.scrolled .lang-option {
  color: rgba(0,0,0,0.55);
  border-bottom-color: rgba(0,0,0,0.06);
}
nav.scrolled .lang-option:hover { background: rgba(0,0,0,0.04); color: #000; }
nav.scrolled .lang-option.active { color: #000; }


/* ═══ FONT: Tenor Sans + Raleway ══════════ */
:root {
  --font-display: 'Figtree', sans-serif;
  --font-body:    'Figtree', sans-serif;
}
body {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

/* ── Property Cards (collection grid) ───────────────────── */
.card-name, .p-name {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(17px, 2vw, 22px) !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}
.card-loc, .p-loc {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
.card-price, .p-price {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 1.8vw, 20px) !important;
  letter-spacing: -0.01em !important;
}
.card-yield, .p-yield {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.card-spec, .card-specs span, .p-spec {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}
.badge, .card-badge {
  font-family: var(--font-body) !important;
  font-size: 8px !important;
  letter-spacing: 0.2em !important;
  font-weight: 600 !important;
}

/* ── Investment Slider Cards ─────────────────────────────── */
.inv-card-name {
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 2.5vw, 32px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}
.inv-card-loc {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
.inv-card-price {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 2.2vw, 26px) !important;
}
.inv-card-yield {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  letter-spacing: 0.15em !important;
  font-weight: 600 !important;
}
.inv-card-coll {
  font-family: var(--font-body) !important;
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
}

/* ── Section Headlines (Home) ────────────────────────────── */
.section-title, .inv-h, .cp-title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}
.section-label, .inv-coll-lbl, .hero-eyebrow {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  letter-spacing: 0.25em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
.hero-h1, h1 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em !important;
}

/* ── Property Detail Panel ───────────────────────────────── */
.det-title {
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 2.8vw, 34px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
.det-price-main {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
.det-price-usd, .det-price-yield {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
}
.det-spec-val {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}
.det-spec-label {
  font-family: var(--font-body) !important;
  font-size: 8px !important;
  letter-spacing: 0.2em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
.det-section-hd {
  font-family: var(--font-body) !important;
  font-size: 8px !important;
  letter-spacing: 0.25em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
.det-desc, .det-desc p {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}
.det-feat-item {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
.det-action-btn, .det-action-btn span {
  font-family: var(--font-body) !important;
  letter-spacing: 0.15em !important;
  font-size: 9px !important;
  font-weight: 600 !important;
}
.det-loc, .det-loc-name {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}

/* ── Hub Collection Cards ────────────────────────────────── */
.hcc-name {
  font-family: var(--font-display) !important;
  font-size: clamp(18px, 2.2vw, 26px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
.hcc-tag {
  font-family: var(--font-body) !important;
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  font-weight: 600 !important;
}
.hcc-price {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
.hcc-price-label, .hcc-count {
  font-family: var(--font-body) !important;
  font-size: 8px !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
}
.hcc-cta {
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  font-weight: 600 !important;
}

/* ── Insights / Blog ─────────────────────────────────────── */
.ins-article-title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
.ins-article-excerpt {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  font-weight: 400 !important;
}
.ins-article-tag, .ins-article-meta {
  font-family: var(--font-body) !important;
  letter-spacing: 0.15em !important;
  font-weight: 600 !important;
}
.ins-hero-title {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em !important;
}
.ins-hero-sub {
  font-family: var(--font-body) !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
}

/* ── Process (How to Buy) ────────────────────────────────── */
.proc-hero-h {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em !important;
  font-weight: 400 !important;
}
.proc-hero-sub, .proc-step-body, .proc-body {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
}
.proc-step-title, .proc-section-lbl {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* ── Nav bar ─────────────────────────────────────────────── */
.nav-center a {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
}
.lang-btn, .lang-option {
  font-family: var(--font-body) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
footer, .footer-col, .footer-link {
  font-family: var(--font-body) !important;
}

/* ── Filter chips + dropdowns ────────────────────────────── */
.filter-chip, .coll-sort-btn, .coll-dropdown-btn, .coll-dd-option {
  font-family: var(--font-body) !important;
}


/* ══════════════════════════════════════════════════════════════
   FONT FIX — Correct class names for all card types
   Tenor Sans = headings/titles/numbers
   Raleway = labels/body/metadata
   ══════════════════════════════════════════════════════════════ */

/* ── PROP CARD (Collections grid) ──────────────────────────── */
.prop-card-name {
  font-family: 'Figtree', sans-serif !important;
  font-size: clamp(16px, 1.8vw, 20px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}
.prop-card-loc {
  font-family: 'Figtree', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.prop-card-price {
  font-family: 'Figtree', sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
.prop-spec-val {
  font-family: 'Figtree', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.prop-spec-lbl {
  font-family: 'Figtree', sans-serif !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.prop-badge {
  font-family: 'Figtree', sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
}
.prop-card-view {
  font-family: 'Figtree', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
}

/* ── INVESTMENT SLIDER CARDS ────────────────────────────────── */
.inv-card-name {
  font-family: 'Figtree', sans-serif !important;
  font-size: clamp(20px, 2.4vw, 30px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}
.inv-card-loc {
  font-family: 'Figtree', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}
.inv-card-price {
  font-family: 'Figtree', sans-serif !important;
  font-size: clamp(18px, 2.2vw, 26px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
.inv-card-yield {
  font-family: 'Figtree', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
}
.inv-card-coll {
  font-family: 'Figtree', sans-serif !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}
.inv-yield-badge {
  font-family: 'Figtree', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
}
.inv-h {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}
.inv-coll-lbl {
  font-family: 'Figtree', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
}

/* ── PROPERTY DETAIL PANEL ──────────────────────────────────── */
.det-title {
  font-family: 'Figtree', sans-serif !important;
  font-size: clamp(22px, 2.8vw, 34px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}
.det-price-main {
  font-family: 'Figtree', sans-serif !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}
.det-price-usd, .det-price-yield {
  font-family: 'Figtree', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}
.det-spec-val {
  font-family: 'Figtree', sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
.det-spec-label {
  font-family: 'Figtree', sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}
.det-section-hd {
  font-family: 'Figtree', sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
}
.det-desc, .det-desc p {
  font-family: 'Figtree', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}
.det-feat-item {
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.det-topbar-logo {
  font-family: 'Figtree', sans-serif !important;
}
.det-action-btn {
  font-family: 'Figtree', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
}

/* ── SIMILAR PROPERTIES (det-panel bottom) ──────────────────── */
.sim-prop-name {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 400 !important;
}
.sim-prop-price {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 400 !important;
}
.sim-prop-loc {
  font-family: 'Figtree', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
}

/* ── COLLECTION HUB CARDS ───────────────────────────────────── */
.hcc-name {
  font-family: 'Figtree', sans-serif !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
.hcc-price {
  font-family: 'Figtree', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}
.hcc-tag, .hcc-count, .hcc-price-label, .hcc-cta {
  font-family: 'Figtree', sans-serif !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
}

/* ── FILTER / SORT CONTROLS ─────────────────────────────────── */
.filter-chip, .coll-sort-btn, .filter-label {
  font-family: 'Figtree', sans-serif !important;
}
.coll-dropdown-btn, .coll-dd-option {
  font-family: 'Figtree', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}
#ddLabel {
  font-family: 'Figtree', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  font-weight: 600 !important;
}

/* ── CP HEADER (collections page title) ─────────────────────── */
.cp-title {
  font-family: 'Figtree', sans-serif !important;
  letter-spacing: -0.02em !important;
  font-weight: 400 !important;
}
.cp-subtitle, .cp-count, .collCountLabel {
  font-family: 'Figtree', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}

/* ── SECTION TITLES (home page) ─────────────────────────────── */
.section-title {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}
.section-label {
  font-family: 'Figtree', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — iPhone / Mobile Complete Fix
   Breakpoints: 1024px | 768px | 480px | 390px
   ══════════════════════════════════════════════════════════════ */

:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Tablet 1024px ──────────────────────────────────────────── */


/* ── Mobile 768px ───────────────────────────────────────────── */


/* ── iPhone SE & small phones 480px ────────────────────────── */


/* ── iPhone 15 / standard 390px ────────────────────────────── */



/* ═══ HERO VIDEO BACKGROUND — position defined in main CSS above ════ */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.2) 40%,
    rgba(0,0,0,0.55) 100%
  );
  z-index: 1;
}


/* ── Touch performance ──────────────────────────────────────── */
a, button { touch-action: manipulation; }




/* ══════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT — Clean & Complete
   Mobile-first breakpoints:
   1200px = wide screens
   1024px = laptop / small desktop  
   768px  = tablet / large phone (iPad)
   480px  = mobile phone
   390px  = iPhone 14/15 standard
   ══════════════════════════════════════════════════════════════ */

/* ── 1200px: Wide adjustments ───────────────────────────────── */
@media screen and (max-width: 1200px) {
  nav { padding: 0 40px; }
  .why-grid { padding: 72px 40px; }
  #services { padding: 72px 40px; }
  #contact { padding: 72px 40px; }
  footer { padding: 64px 40px 40px; }
  .ins-topbar, .ins-hero { padding-left: 40px; padding-right: 40px; }
  .ins-grid { padding: 0 0 60px; }
  .proc-topbar, .proc-hero, .proc-content { padding-left: 40px; padding-right: 40px; }
  .rent-hero-content { padding: 0 40px 40px; }
  .rent-filter-bar { padding: 18px 40px; }
  .rent-grid { padding: 32px 40px 32px; }
  .rent-back-wrap { padding: 16px 40px 48px; }
}

/* ── 1024px: Tablet landscape ───────────────────────────────── */
@media screen and (max-width: 1024px) {
  nav { padding: 0 28px; height: 60px; }
  .nav-center { gap: 20px; }
  .nav-center a { font-size: 9px; letter-spacing: 0.14em; }

  /* Home page */
  .hero-h1 { font-size: clamp(40px, 6vw, 64px) !important; }
  #intro { grid-template-columns: 1fr; gap: 28px; padding: 56px 28px; }
  .intro-img { height: 320px; }
  #services { padding: 64px 28px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .why-grid { grid-template-columns: 1fr; padding: 64px 28px; gap: 32px; }
  .why-pillars { grid-template-columns: repeat(2,1fr); }
  #contact { padding: 64px 28px; }
  footer { padding: 56px 28px 40px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* Collections */
  .hub-hero-inner { padding: 56px 28px 40px; }
  .hub-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-coll-card { height: 320px; }
  .coll-controls { padding: 20px 28px !important; }
  .coll-grid { padding: 28px 28px 80px !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .cp-header { padding: 48px 28px 0 !important; }

  /* Investment */
  .inv-header { padding: 0 28px 24px !important; }
  .inv-track-wrap { padding: 0 !important; }
  .inv-card { flex: 0 0 100% !important; }

  /* Insights */
  .ins-topbar, .ins-hero { padding-left: 28px; padding-right: 28px; }
  .ins-grid { grid-template-columns: repeat(2,1fr); }
  .ins-article.featured { grid-column: 1/-1; grid-template-columns: 1fr; padding: 40px 28px !important; gap: 20px; }
  .ins-featured-img { min-height: 200px; }

  /* Process */
  .proc-topbar, .proc-hero, .proc-content { padding-left: 28px; padding-right: 28px; }
  .proc-steps { grid-template-columns: repeat(2,1fr); }
  .proc-own-grid, .proc-deed-grid { grid-template-columns: 1fr; }
  .proc-cta { padding: 56px 28px !important; }
  .rent-grid { grid-template-columns: repeat(2,1fr); }
  .rent-hero-content { padding: 0 28px 36px; }
  .rent-filter-bar { padding: 16px 28px; }
  .rent-grid { padding: 28px 28px 28px; }
  .rent-back-wrap { padding: 16px 28px 40px; }
}

/* ── 768px: Tablet portrait / Large phone ───────────────────── */
@media screen and (max-width: 768px) {

  /* ── NAV ─────────────────────────────────────────────────── */
  nav {
    padding: 0 20px !important;
    height: 56px !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%) !important;
  }
  .nav-center { display: none !important; }
  #hamburgerBtn {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px; height: 36px;
    background: none; border: none;
    cursor: pointer; padding: 4px;
  }
  .ham-line {
    display: block !important;
    width: 22px; height: 1.5px;
    background: rgba(255,255,255,0.85);
    border-radius: 1px;
    transition: all 0.3s;
  }
  nav.scrolled .ham-line { background: rgba(255,255,255,0.9); }
  .nav-logo-img { height: 20px !important; }
  .nav-cta { display: none !important; }

  /* ── HERO ────────────────────────────────────────────────── */
  .hero-content { padding: 0 20px 80px !important; }
  .hero-h1 { font-size: clamp(30px, 9vw, 48px) !important; line-height: 1.1 !important; }
  .hero-eyebrow { font-size: 9px; letter-spacing: 0.2em; }
  .hero-sub { font-size: 13px; max-width: 85%; }
  .hero-actions { flex-direction: row !important; gap: 10px !important; padding: 0 !important; flex-wrap:wrap; }
  .hero-actions a, .hero-actions button { flex:1; min-width:140px; text-align: center !important; justify-content: center !important; padding:13px 20px !important; font-size:8px !important; }
  .hero-stats { 
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }
  .hero-stat { padding: 14px 8px !important; text-align: center !important; }
  .hero-stat-num { font-size: 18px !important; }
  .hero-stat-label { font-size: 8px !important; }

  /* ── INTRO ───────────────────────────────────────────────── */
  #intro { grid-template-columns: 1fr !important; padding: 40px 20px !important; gap: 20px !important; }
  .intro-img { height: 220px !important; }
  .intro-h2 { font-size: clamp(24px,7vw,36px) !important; }

  /* ── SERVICES ────────────────────────────────────────────── */
  #services { padding: 48px 20px !important; }
  .services-header { padding: 0 0 28px !important; }
  .services-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── INVESTMENT SLIDER ───────────────────────────────────── */
  #investment { padding: 48px 0 !important; }
  .inv-header { padding: 0 20px 20px !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .inv-h { font-size: clamp(24px,7vw,38px) !important; }
  .inv-nav-btns { display: none !important; }
  .inv-track-wrap { padding: 0 !important; }
  .inv-card { flex: 0 0 100% !important; max-width: none !important; }
  .inv-card-img { height: 68vh !important; min-height: 420px !important; }
  .inv-card-body { padding: 16px 18px 20px !important; }
  .inv-card-name { font-size: 20px !important; line-height: 1.2 !important; }
  .inv-card-price { font-size: 17px !important; }
  .inv-card-loc { font-size: 8px !important; }
  .inv-card-yield { font-size: 9px !important; }
  .inv-yield-badge { font-size: 8px !important; padding: 4px 10px !important; }

  /* ── WHY / ABOUT ─────────────────────────────────────────── */
  #why { padding: 40px 16px !important; grid-template-columns: 1fr !important; gap: 40px !important; }
  .why-grid { grid-template-columns: 1fr !important; padding: 0 !important; gap: 28px !important; }
  .why-pillars { grid-template-columns: 1fr !important; gap: 16px !important; }
  .why-quote-text { font-size: clamp(18px,5vw,28px) !important; }
  .why-founder-photo-wrap { max-width: 100% !important; }

  /* ── CONTACT ─────────────────────────────────────────────── */
  #contact { padding: 48px 16px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* ── FOOTER ──────────────────────────────────────────────── */
  footer { padding: 40px 16px calc(48px + env(safe-area-inset-bottom, 0px)) !important; overflow: hidden !important; }
  .footer-top { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
  .footer-links { justify-content: center !important; flex-wrap: wrap !important; }

  /* ── COLLECTIONS PAGE ────────────────────────────────────── */
  .hub-hero-inner { padding: 40px 20px 28px !important; }
  .hub-hero-inner h2 { font-size: clamp(24px,7vw,38px) !important; }
  .hub-cards-grid { grid-template-columns: 1fr !important; gap: 1px !important; }
  .hub-coll-card { height: 220px !important; }
  .hcc-name { font-size: 20px !important; }

  .cp-header { padding: 32px 20px 0 !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .cp-title { font-size: clamp(24px,7vw,36px) !important; }
  .overlay-close-btn { top:10px !important; right:16px !important; }
  .rent-coming { padding: 48px 20px !important; }
  .rent-coming-title { font-size: clamp(40px,12vw,64px) !important; }

  .coll-controls { 
    padding: 14px 20px !important; 
    flex-direction: column !important; 
    align-items: stretch !important; 
    gap: 10px !important;
  }
  .coll-dropdown-wrap { width: 100% !important; }
  .coll-dropdown-btn { min-width: 100% !important; justify-content: space-between !important; }
  .coll-sort-row { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    gap: 6px !important;
    align-items: center !important;
  }
  .coll-sort-btn { padding: 8px 12px !important; font-size: 8px !important; }
  .view-toggle { align-self: flex-start !important; }

  .filter-row { 
    padding: 10px 20px 0 !important; 
    gap: 8px !important; 
    overflow-x: auto !important; 
    flex-wrap: nowrap !important; 
    -webkit-overflow-scrolling: touch !important;
  }
  .filter-chip { padding: 8px 12px !important; font-size: 8px !important; flex-shrink: 0 !important; }
  .filter-label { flex-shrink: 0 !important; }
  .filter-divider { display: none !important; }

  .coll-grid {
    padding: 16px 20px 80px !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .prop-card-img { height: 240px !important; }
  .prop-card-body { padding: 14px 16px 12px !important; }
  .prop-card-name { font-size: 16px !important; }
  .prop-card-price { font-size: 18px !important; }
  .prop-spec-val { font-size: 16px !important; }
  .prop-spec-lbl { font-size: 7px !important; }
  .prop-card-footer { padding-top: 10px !important; }

  /* ── Rent page mobile ── */
  .rent-hero { height:40vh; min-height:280px; }
  .rent-hero--minimal { height:auto; min-height:0; padding:40px 20px 32px; }
  .rent-hero-content { padding: 0 20px 32px; }
  .rent-hero-title { font-size: clamp(30px,9vw,48px); }
  .rent-filter-bar { padding: 14px 20px; gap:10px; }
  .rent-filter-dropdowns { gap:10px; }
  .rent-filter-select { font-size:11px; padding:7px 24px 7px 8px; }
  .rent-grid { grid-template-columns: 1fr !important; padding: 16px 20px 16px; gap: 14px; }
  .rent-card-img { height: 220px; }
  .rent-back-wrap { padding: 12px 20px 80px; }
  .rent-detail-panel { max-width:100%; max-height:100vh; }
  .rent-detail-hero { height: 240px; }
  .rent-detail-body { padding: 20px 20px 28px; }
  .rent-detail-name { font-size: 22px; }
  .rent-detail-pricing { grid-template-columns: repeat(2,1fr); }

  /* ── DETAIL PANEL (FULL PAGE) ─────────────────────────────── */
  .det-panel {
    width: 100% !important;
    border-radius: 0 !important;
    max-width: none !important;
  }
  .det-gallery { height: 240px !important; }
  .det-topbar { padding: 0 16px !important; height: 52px !important; }
  .det-inner {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .det-title { font-size: 20px !important; }
  .det-price-main { font-size: 18px !important; }
  .det-spec-grid { grid-template-columns: repeat(2,1fr) !important; }
  .det-spec-val { font-size: 18px !important; }
  .det-right {
    position: static !important;
    height: auto !important;
    overflow-y: visible !important;
    border-left: none !important;
    border-top: 1px solid #e8e3db !important;
    padding: 24px 16px !important;
  }
  .det-sections { padding: 0 16px 40px !important; }
  .det-feats { grid-template-columns: 1fr !important; gap: 6px !important; }
  .det-nearby-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .det-sim-grid { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }

  /* ── INSIGHTS PAGE ───────────────────────────────────────── */
  .ins-hero { padding: 40px 20px 28px !important; }
  .ins-hero-title { font-size: clamp(26px,8vw,42px) !important; }
  .ins-grid { grid-template-columns: 1fr !important; }
  .ins-article { padding: 24px 20px !important; border-right: none !important; }
  .ins-article.featured { 
    grid-template-columns: 1fr !important; 
    padding: 24px 20px !important; 
    gap: 16px !important;
  }
  .ins-featured-img { min-height: 160px !important; font-size: 48px !important; }
  .ins-article-title { font-size: 20px !important; }
  .ins-article-excerpt { font-size: 12px !important; }

  /* ── HOW TO BUY PAGE ─────────────────────────────────────── */
  .proc-hero { padding: 40px 20px 32px !important; }
  .proc-hero-h { font-size: clamp(24px,7vw,38px) !important; }
  .proc-hero-sub { font-size: 13px !important; }
  .proc-content { padding: 28px 20px !important; }
  .proc-steps { grid-template-columns: 1fr !important; gap: 0 !important; }
  .proc-step { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .proc-own-grid, .proc-deed-grid { grid-template-columns: 1fr !important; }
  .proc-cta { padding: 40px 20px !important; }
  .proc-cta-h { font-size: clamp(20px,6vw,30px) !important; }
  .proc-cta-btns { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .proc-cta-btn { text-align: center !important; }

  /* ── BOOKING / VIEWING MODAL ─────────────────────────────── */
  .book-modal { 
    border-radius: 20px 20px 0 0 !important; 
    max-height: 90vh !important; 
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
  }
  .time-grid { grid-template-columns: repeat(3,1fr) !important; gap: 6px !important; }
  .time-slot { padding: 10px 6px !important; font-size: 10px !important; }

  /* ── MOBILE BOTTOM NAV ───────────────────────────────────── */
  .mob-bottom-nav {
  display: none;  /* JS shows on mobile */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 900;
  align-items: center;
  justify-content: space-around;
}
  .mob-nav-item { padding: 8px 14px !important; font-size: 8px !important; }
  .mob-nav-icon { font-size: 16px !important; }

  /* ── BODY SPACING ────────────────────────────────────────── */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── SCROLL & MISC ───────────────────────────────────────── */
  ::-webkit-scrollbar { display: none; }
  * { -ms-overflow-style: none; scrollbar-width: none; }
  -webkit-tap-highlight-color: transparent;
}

/* ── 480px: Small phones ────────────────────────────────────── */
@media screen and (max-width: 480px) {
  .hero-h1 { font-size: clamp(26px, 8vw, 36px) !important; }
  .inv-card { flex: 0 0 100% !important; max-width: none !important; }
  .inv-card-img { height: 65vh !important; min-height: 380px !important; }
  .hub-coll-card { height: 200px !important; }
  .det-spec-grid { grid-template-columns: repeat(2,1fr) !important; }
  .time-grid { grid-template-columns: repeat(2,1fr) !important; }
  .proc-steps { grid-template-columns: 1fr !important; }
  .why-pillars { grid-template-columns: 1fr !important; }
  .services-grid { grid-template-columns: 1fr !important; }
  .ins-article.featured .ins-featured-img { display: none !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* ── 390px: iPhone 15 / iPhone 14 ──────────────────────────── */
@media screen and (max-width: 390px) {
  nav { padding: 0 16px !important; }
  .hero-content { padding: 0 16px 80px !important; }
  .hero-h1 { font-size: 26px !important; }
  .coll-grid { padding: 12px 16px 80px !important; }
  .prop-card-name { font-size: 15px !important; }
  .prop-card-price { font-size: 14px !important; }
  .inv-card { flex: 0 0 100% !important; }
  .hub-cards-grid { gap: 0 !important; }
  .hcc-name { font-size: 18px !important; }
  #intro, #services, #contact { padding-left: 16px !important; padding-right: 16px !important; }
  footer { padding-left: 16px !important; padding-right: 16px !important; }
  .ins-article { padding: 20px 16px !important; }
  .proc-hero, .proc-content { padding-left: 16px !important; padding-right: 16px !important; }
  .rent-hero-content { padding: 0 16px 28px; }
  .rent-hero--minimal { padding:32px 16px 24px; }
  .rent-filter-bar { padding: 12px 16px; gap:6px; }
  .rent-filter-dropdowns { gap:6px; }
  .rent-filter-label { font-size:6.5px; letter-spacing:0.12em; }
  .rent-filter-select { font-size:10px; padding:6px 20px 6px 6px; background-position:right 6px center; }
  .rent-grid { padding: 12px 16px 12px; }
  .rent-back-wrap { padding: 10px 16px 80px; }
}


@media screen and (max-width: 768px) {
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .mob-bottom-nav { display: flex; }

  /* ── CONTACT FORM ────────────────────────────────────────── */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  #contact {
    grid-template-columns: 1fr !important;
    padding: 48px 20px !important;
    gap: 32px !important;
  }
  .contact-form-wrap, .contact-right {
    padding: 0 !important;
  }
  .form-group {
    margin-bottom: 12px !important;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
  }
  .contact-submit, .contact-btn, button[type="submit"] {
    width: 100% !important;
    margin-top: 8px !important;
  }
}

/* ═══ CONTACT FORM MOBILE FIX ══════════════════════════════ */
@media screen and (max-width: 768px) {
  .form-row {
    display: block !important;
  }
  .form-row .form-group {
    margin-bottom: 14px !important;
    width: 100% !important;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
  #contact {
    grid-template-columns: 1fr !important;
    padding: 40px 20px !important;
    gap: 28px !important;
  }
  .form-submit-btn,
  .contact-btn,
  button[type="submit"],
  .send-enquiry-btn {
    width: 100% !important;
  }
}

/* ── Card hover overlay ─────────────────────────────── */
.prop-card { position:relative; }
.prop-card-hover-cta {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,8,6,0); 
  transition:background 0.3s ease;
  pointer-events:none; z-index:2;
}
.prop-card:hover .prop-card-hover-cta { background:rgba(10,8,6,0.45); }
.prop-card-view-btn {
  padding:10px 28px; border:1.5px solid #fff;
  color:#fff; font-family:'Figtree', sans-serif;
  font-size:10px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  pointer-events:none;
}
.prop-card:hover .prop-card-view-btn { opacity:1; transform:translateY(0); }

/* ── Prop card CTA button ───────────────────────────── */
.prop-card { cursor:pointer; position:relative; }
.prop-card-cta {
  padding:10px 20px;
  font-size:9px; font-family:'Figtree', sans-serif;
  font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase; color:#9A8467;
  border-top:1px solid var(--line2);
  transition:color 0.2s, background 0.2s;
  text-align:center;
}
.prop-card:hover .prop-card-cta {
  color:#33291F; background:var(--light,#f5f4f0);
}
/* Remove old hover overlay */
.prop-card-hover-cta { display:none !important; }


.cs-modal {
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(10,10,10,0.55); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:24px;
  animation:csFade .28s ease;
}
.cs-modal.open { display:flex; }
@keyframes csFade { from{opacity:0} to{opacity:1} }
.cs-modal-box {
  position:relative; background:#fff; max-width:460px; width:100%;
  padding:44px 36px 36px; text-align:center;
  border:1px solid rgba(180,168,142,0.35);
  box-shadow:0 24px 60px rgba(0,0,0,0.22);
  animation:csRise .32s cubic-bezier(.2,.7,.2,1);
}
@keyframes csRise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.cs-modal-close {
  position:absolute; top:10px; right:14px;
  background:none; border:0; font-size:26px; line-height:1;
  color:#999; cursor:pointer; padding:6px 10px;
  font-family:'Figtree', sans-serif; font-weight:300;
}
.cs-modal-close:hover { color:#000; }
.cs-modal-label {
  font-family:'Figtree', sans-serif;
  font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
  font-weight:700; color:#b8a382; margin-bottom:16px;
}
.cs-modal-title {
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:40px; font-weight:400; color:#111;
  line-height:1.1; margin:0 0 16px;
}
.cs-modal-title em {
  font-style:italic; color:#b8a382; font-family:'Figtree', sans-serif; font-weight:300;
}
.cs-modal-desc {
  font-family:'Figtree', sans-serif;
  font-size:13.5px; color:#555; line-height:1.7; margin:0 0 26px;
}
.cs-modal-actions {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.cs-modal-btn {
  font-family:'Figtree', sans-serif; text-decoration:none;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  font-weight:700; color:#fff; background:#111;
  padding:14px 26px; border:1px solid #111; cursor:pointer;
  transition:background .2s, color .2s;
}
.cs-modal-btn:hover { background:#b8a382; border-color:#b8a382; }
.cs-modal-btn-ghost {
  font-family:'Figtree', sans-serif;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  font-weight:700; color:#111; background:#fff;
  padding:14px 26px; border:1px solid rgba(0,0,0,0.2); cursor:pointer;
  transition:border-color .2s;
}
.cs-modal-btn-ghost:hover { border-color:#111; }
@media (max-width:480px) {
  .cs-modal-box { padding:36px 24px 28px; }
  .cs-modal-title { font-size:32px; }
  .cs-modal-actions { flex-direction:column; }
  .cs-modal-btn, .cs-modal-btn-ghost { width:100%; }
}


.dev-section {
  padding:70px 80px 80px; background:var(--white);
  border-top:1px solid rgba(0,0,0,0.06);
}
.dev-section-header { text-align:center; margin-bottom:44px; }
.dev-lbl {
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--stone); font-weight:500; margin-bottom:14px;
}
.dev-title {
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:clamp(28px,4vw,42px); font-weight:400;
  color:var(--black); letter-spacing:0; line-height:1.1;
}
.dev-title em { font-style:italic; color:var(--stone); font-weight:400; }
.dev-strip {
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.dev-track {
  display:flex; gap:0; animation:devScroll 40s linear infinite;
  white-space:nowrap; width:max-content;
}
.dev-strip:hover .dev-track { animation-play-state:paused; }
.dev-logo {
  flex-shrink:0; padding:0 44px;
  display:flex; align-items:center; justify-content:center;
  height:150px; min-width:190px;
}
.dev-logo img {
  max-height:120px; max-width:190px; width:auto; height:auto;
  object-fit:contain; object-position:center; display:block;
  opacity:1;
  transition:opacity 0.4s, transform 0.4s;
}
.dev-logo:hover img { opacity:1; transform:scale(1.06); }
.dev-logo span {
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:24px; font-weight:400; letter-spacing:0.04em;
  color:#3a352d; text-transform:uppercase;
  transition:color 0.35s, transform 0.35s, opacity 0.35s, letter-spacing 0.35s;
  opacity:0.85; white-space:nowrap;
}
.dev-logo:hover span { color:var(--black); opacity:1; transform:scale(1.06); letter-spacing:0.08em; }
.dev-sep {
  width:1px; height:36px; background:rgba(0,0,0,0.08);
  align-self:center; flex-shrink:0;
}
@keyframes devScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
@media (max-width:720px) {
  .dev-section { padding:50px 0 56px; }
  .dev-section-header { padding:0 20px; margin-bottom:28px; }
  .dev-title { font-size:clamp(22px,6vw,32px); }
  .dev-logo { padding:0 22px; min-width:130px; height:100px; }
  .dev-logo img { max-height:80px; max-width:120px; }
  .dev-logo span { font-size:16px; letter-spacing:0.05em; }
  .dev-track { animation-duration:32s; }
}


.policy-modal {
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.7);
  display:none; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.policy-modal.open { display:flex; }
.policy-box {
  background:#fff; max-width:720px; width:100%; max-height:85vh;
  overflow-y:auto; padding:40px 44px; position:relative;
  border-radius:2px; box-shadow:0 30px 80px rgba(0,0,0,0.4);
}
.policy-close {
  position:absolute; top:16px; right:18px; background:none; border:none;
  font-size:22px; cursor:pointer; color:#9A8467; line-height:1;
}
.policy-close:hover { color:#000; }
.policy-lbl {
  font-size:9px; letter-spacing:0.3em; text-transform:uppercase;
  color:#999; margin-bottom:10px; font-weight:500;
}
.policy-title {
  font-family:'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size:32px; font-weight:400; color:#33291F; margin-bottom:18px;
  letter-spacing:0;
}
.policy-box h3 {
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:#33291F; margin:22px 0 10px; font-weight:600;
}
.policy-box p, .policy-box li {
  font-size:13px; line-height:1.8; color:#444; font-weight:300;
  margin-bottom:10px;
}
.policy-box ul { padding-left:20px; margin-bottom:12px; }
.policy-box a { color:#33291F; text-decoration:underline; }
.policy-updated {
  font-size:10px; color:#999; letter-spacing:0.08em;
  margin-top:24px; padding-top:16px; border-top:1px solid #eee;
}
@media (max-width:640px) {
  .policy-box { padding:28px 22px; max-height:90vh; }
  .policy-title { font-size:24px; }
}

/* ═══ Hide legacy Floor Plan dropdown (ใช้ Layouts + Floor Plans grid แทน) ═══ */
#detFloorplanSection { display: none !important; }

/* ═══ Hide emoji icons in Key Highlights ═══ */
.det-hl-icon { display: none !important; }
.det-highlight-item { padding: 14px 16px; }
.det-hl-text-wrap { padding-left: 0; }


/* ═══════════════════════════════════════════════════════════
   PUNYISA-STYLE STAT ICONS (Beds / Baths / Living / Land)
   — boxed icon + number beside
═══════════════════════════════════════════════════════════ */
.det-specs-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-start;
}
.det-spec {
  flex: 0 1 auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 18px !important;
  background: transparent;
  border: 1px solid var(--line2, #e5e5e5);
  border-radius: 999px;
  text-align: left !important;
}
.det-spec-ico {
  width: 34px; height: 34px;
  background: #f4f4f4;
  border-radius: 8px;
  display: flex !important;
  align-items: center; justify-content: center;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
.det-spec-ico svg { width: 18px; height: 18px; }
.det-spec-val {
  font-size: 15px !important;
  font-weight: 500;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
  color: var(--ink, #33291F);
}
.det-spec-lbl {
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  color: var(--stone, #9A8467) !important;
  margin-left: 4px;
  text-transform: capitalize !important;
}
@media (max-width: 640px) {
  .det-spec { padding: 8px 14px !important; gap: 8px; }
  .det-spec-ico { width: 30px; height: 30px; }
  .det-spec-val { font-size: 14px !important; }
}



/* ═══ Clearer unit meta in Layouts section ═══ */
.det-unit-meta {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: var(--stone) !important;
  margin-bottom: 20px !important;
}
.det-unit-meta .um-sqm,
.det-unit-meta .um-br,
.det-unit-meta .um-ba,
.det-unit-meta .um-price {
  color: var(--ink) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}
.det-unit-meta .um-label {
  color: var(--stone) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  margin-left: 2px;
  text-transform: lowercase;
}
.det-unit-meta .um-sep {
  color: var(--line, #d5d5d5) !important;
  margin: 0 10px;
  font-weight: 300;
}


/* ═══ Stats row: always 1 line (no wrap) ═══ */
.det-specs-row {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: 8px !important;
  scrollbar-width: none;
}
.det-specs-row::-webkit-scrollbar { display: none; }
.det-spec {
  flex: 0 0 auto !important;
  padding: 8px 14px !important;
  white-space: nowrap;
}
.det-spec-ico { width: 30px !important; height: 30px !important; }
.det-spec-ico svg { width: 16px !important; height: 16px !important; }
.det-spec-val { font-size: 14px !important; }
.det-spec-lbl { font-size: 9px !important; }
@media (max-width: 640px) {
  .det-spec { padding: 6px 10px !important; gap: 6px; }
  .det-spec-ico { width: 26px !important; height: 26px !important; }
  .det-spec-ico svg { width: 14px !important; height: 14px !important; }
  .det-spec-val { font-size: 13px !important; }
  .det-spec-lbl { font-size: 8px !important; }
}


/* ═══ MULTI-PAGE ADDITIONS ══════════════════════════════════════ */
/* pages get the fixed nav — push content below it */
body[data-page] main.pg, body[data-page="collections"] #collPage,
body[data-page="how-to-buy"] #processPage, body[data-page="insights"] #insightsPage{padding-top:72px}

/* ── generic page hero ── */
.pg{min-height:70vh}
.pg-hero{max-width:820px;margin:0 auto;padding:72px 24px 28px;text-align:center}
.pg-title{font-family:var(--font-display);font-size:clamp(34px,5vw,54px);font-weight:400;letter-spacing:-0.02em;color:var(--ink,#33291F);margin:14px 0 16px}
.pg-title em{font-style:normal;color:var(--stone)}
.pg-sub{font-family:var(--font-body);font-size:15px;line-height:1.8;color:rgba(51,41,31,.62);max-width:560px;margin:0 auto}

/* ── services cards (no numbers) ── */
.svc2-head{text-align:center;max-width:760px;margin:0 auto;padding:72px 24px 40px}
.svc2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(51,41,31,.08);max-width:1280px;margin:0 auto 88px;border:1px solid rgba(51,41,31,.08)}
.svc2-card{background:var(--white,#fff);padding:44px 32px 40px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;transition:background .3s}
.svc2-card:hover{background:#FAF9F7}
.svc2-label{font-family:var(--font-body);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);font-weight:600}
.svc2-title{font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:-0.01em;color:var(--ink,#33291F)}
.svc2-desc{font-family:var(--font-body);font-size:13px;line-height:1.75;color:rgba(51,41,31,.55);flex:1}
.svc2-cta{font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink,#33291F);display:inline-flex;align-items:center;gap:8px}
.svc2-arrow{transition:transform .3s}
.svc2-card:hover .svc2-arrow{transform:translateX(5px)}
@media(max-width:1080px){.svc2-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svc2-grid{grid-template-columns:1fr}.svc2-card{padding:34px 24px}}

/* ── home CTA band ── */
.home-cta{text-align:center;padding:96px 24px;background:var(--page,#F5F4F0)}
.home-cta-sub{font-family:var(--font-body);font-size:14px;color:rgba(51,41,31,.6);max-width:460px;margin:16px auto 34px;line-height:1.8}
.home-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.home-cta-primary{background:var(--ink,#33291F);color:#fff;padding:16px 40px;font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;text-decoration:none;transition:opacity .3s}
.home-cta-primary:hover{opacity:.85}
.home-cta-ghost{border:1px solid rgba(51,41,31,.25);color:var(--ink,#33291F);padding:16px 40px;font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;text-decoration:none;transition:border-color .3s}
.home-cta-ghost:hover{border-color:var(--ink,#33291F)}

/* ── contact page ── */
.ct-wrap{max-width:1080px;margin:0 auto;padding:24px 24px 100px;display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
.ct-form{display:flex;flex-direction:column;gap:22px}
.ct-row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ct-field{display:flex;flex-direction:column;gap:8px}
.ct-field label{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(51,41,31,.55)}
.ct-field input,.ct-field textarea,.ct-field select{font-family:var(--font-body);font-size:15px;color:var(--ink,#33291F);background:#fff;border:1px solid rgba(51,41,31,.16);border-radius:6px;padding:13px 15px;outline:none;transition:border-color .25s;width:100%}
.ct-field input:focus,.ct-field textarea:focus,.ct-field select:focus{border-color:var(--ink,#33291F)}
.ct-field textarea{resize:vertical;min-height:120px}
.ct-select{position:relative}
.ct-select::after{content:'\25BE';position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:rgba(51,41,31,.45);font-size:12px}
.ct-select select{appearance:none;-webkit-appearance:none;cursor:pointer}
.ct-submit{background:var(--ink,#33291F);color:#fff;border:none;cursor:pointer;padding:17px 42px;font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;align-self:flex-start;transition:opacity .3s}
.ct-submit:hover{opacity:.85}
.ct-submit:disabled{opacity:.5;cursor:default}
.ct-note{font-family:var(--font-body);font-size:12px;color:rgba(51,41,31,.42)}
.ct-info{display:flex;flex-direction:column;gap:26px;border-left:1px solid rgba(51,41,31,.1);padding-left:36px}
.ct-info-lbl{font-family:var(--font-body);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--stone);margin-bottom:6px}
.ct-info-item a,.ct-info-item span{font-family:var(--font-body);font-size:14px;color:var(--ink,#33291F);text-decoration:none}
.ct-info-item a:hover{text-decoration:underline}
.ct-ok{text-align:center;padding:60px 20px;grid-column:1}
.ct-ok-mark{width:64px;height:64px;border-radius:50%;background:var(--ink,#33291F);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.ct-ok h2{font-family:var(--font-display);font-size:30px;font-weight:400;margin-bottom:10px}
.ct-ok p{font-family:var(--font-body);font-size:14px;color:rgba(51,41,31,.6);margin-bottom:28px}
@media(max-width:900px){.ct-wrap{grid-template-columns:1fr}.ct-info{border-left:none;padding-left:0;border-top:1px solid rgba(51,41,31,.1);padding-top:32px}}
@media(max-width:560px){.ct-row2{grid-template-columns:1fr}}

/* ── lifestyle page ── */
.lx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(51,41,31,.08);border:1px solid rgba(51,41,31,.08);max-width:1180px;margin:20px auto 100px}
.lx-card{background:#fff;padding:42px 32px 38px;display:flex;flex-direction:column;gap:13px;text-decoration:none;color:inherit;transition:background .3s}
.lx-card:hover{background:#FAF9F7}
.lx-title{font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--ink,#33291F)}
.lx-desc{font-family:var(--font-body);font-size:13px;line-height:1.75;color:rgba(51,41,31,.55);flex:1}
@media(max-width:1000px){.lx-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.lx-grid{grid-template-columns:1fr;margin:8px 16px 72px}}

/* ═══ SERVICES CAROUSEL (Delano-style) ══════════════════════════ */
.svc3{padding:88px 0 96px;background:var(--page,#F5F4F0)}
.svc3-head{text-align:center;max-width:720px;margin:0 auto;padding:0 24px 40px}
.svc3-sub{font-family:var(--font-body);font-size:15px;line-height:1.8;color:rgba(51,41,31,.6);margin:16px auto 28px;max-width:520px}
.svc3-explore{display:inline-block;background:transparent;border:1px solid rgba(51,41,31,.55);color:var(--ink,#33291F);
  padding:16px 44px;font-family:var(--font-body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.svc3-explore:hover{background:var(--ink,#33291F);color:#fff;border-color:var(--ink,#33291F)}

.svc3-wrap{position:relative;margin-top:8px}
.svc3-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:14px 40px 22px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.svc3-rail::-webkit-scrollbar{display:none}

.svc3-card{position:relative;flex:0 0 clamp(280px,42vw,560px);aspect-ratio:4/5;scroll-snap-align:center;
  background-size:cover;background-position:center;overflow:hidden;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  transform:scale(.97);
  transition:transform .55s ease,box-shadow .55s ease}
/* No haze: images show at full colour. Legibility for the white label comes
   from a soft gradient behind it only, not from dimming the whole photo. */
.svc3-card::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(51,41,31,.22) 0%,rgba(51,41,31,0) 34%,rgba(51,41,31,0) 62%,rgba(51,41,31,.34) 100%);
  transition:opacity .55s ease}
.svc3-card:hover,.svc3-card:focus-visible{transform:scale(1.02);
  box-shadow:0 30px 70px rgba(51,41,31,.28);z-index:2}
.svc3-name{position:relative;z-index:1;font-family:var(--font-body);font-size:clamp(13px,1.5vw,17px);
  letter-spacing:.16em;text-transform:uppercase;color:#fff;text-align:center;padding:0 20px;
  text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px;
  text-shadow:0 1px 3px rgba(51,41,31,.5),0 0 22px rgba(51,41,31,.35)}

.svc3-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.94);border:1px solid rgba(51,41,31,.1);color:var(--ink,#33291F);
  font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(51,41,31,.14);transition:background .25s,transform .25s}
.svc3-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.svc3-prev{left:14px}.svc3-next{right:14px}
@media(max-width:760px){.svc3-arrow{display:none}.svc3-rail{padding:14px 16px 22px;gap:12px}
  .svc3-card{flex-basis:78vw;transform:none}}

/* ═══ Recommended Collection — peek carousel ════════════════════
   was flex:0 0 100% (one full-bleed card). Now ~82% + a gap so the
   next card peeks in, signalling the rail is swipeable. */
.inv-viewport,#invWrap{overflow:hidden}
.inv-track{gap:18px!important;padding-left:24px;padding-right:24px}
.inv-card{flex:0 0 82%!important;max-width:82%!important;border-radius:2px}
.inv-card{transition:transform .5s cubic-bezier(.25,.46,.45,.94),opacity .5s,box-shadow .3s}
/* no dimming — every card shows at full colour */
.inv-card{opacity:1}
.inv-card.is-active{box-shadow:0 26px 60px rgba(51,41,31,.22)}
@media(max-width:900px){
  .inv-track{gap:14px!important;padding-left:16px;padding-right:16px}
  .inv-card{flex:0 0 88%!important;max-width:88%!important}
}
@media(max-width:560px){
  .inv-card{flex:0 0 90%!important;max-width:90%!important}
}

/* ═══ SCROLL LOCK — single, strand-proof mechanism ═════════════
   Locks the viewport by putting overflow on <html> (the real scroller).
   Never touches <body>: overflow-x on body computes overflow-y to auto,
   which turns body into a nested dead scroll box that eats wheel events —
   that was the original "can't scroll" bug. Never uses position:fixed
   either, so there is no scroll position to lose or restore. */
html.mg-locked{overflow:hidden!important}

/* ═══ Recommended Collection — prev/next arrows ═════════════════
   The original .inv-nav-btn pair sat in the header and was killed by a
   later `display:none !important`. These float over the rail instead,
   matching the Services carousel. */
.inv-shell{position:relative}
.inv-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.94);border:1px solid rgba(51,41,31,.1);color:var(--ink,#33291F);
  font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(51,41,31,.14);transition:background .25s,transform .25s,opacity .25s}
.inv-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.inv-arrow--prev{left:14px}
.inv-arrow--next{right:14px}
.inv-arrow[disabled]{opacity:.3;cursor:default}
.inv-arrow[disabled]:hover{transform:translateY(-50%) scale(1)}
@media(max-width:760px){.inv-arrow{width:40px;height:40px;font-size:20px}
  .inv-arrow--prev{left:6px}.inv-arrow--next{right:6px}}

/* ═══ HERO — centre the copy over the video ═════════════════════
   Was bottom-left (align-items:flex-end + left padding). Now centred
   both axes, with the text itself centre-aligned. */
#hero{align-items:center!important;justify-content:center!important;text-align:center}
.hero-content{padding:0 24px!important;max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-content .hero-label,.hero-content .section-label{justify-content:center;text-align:center}
.hero-sub{margin-left:auto;margin-right:auto;max-width:560px!important;text-align:center}
.hero-btns,.hero-content .hero-cta,.hero-content .btn-row{justify-content:center;display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:640px){.hero-content{padding:0 18px!important}}

/* hero buttons: keep labels on one line so both pills match height */
.hero-content .btn-hero-primary,.hero-content .btn-hero-ghost,
.hero-content .hero-btns a,.hero-content .hero-btns button{white-space:nowrap}
@media(max-width:420px){
  .hero-content .btn-hero-primary,.hero-content .btn-hero-ghost{white-space:normal;text-align:center}
}

/* ═══ FOOTER — company identity block ═══════════════════════════ */
.footer-org{margin-top:16px;max-width:340px}
.footer-org-name{font-family:var(--font-body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:rgba(255,255,255,.9);margin-bottom:10px}
.footer-org-addr{font-style:normal;font-family:var(--font-body);font-size:13px;line-height:1.85;
  color:rgba(255,255,255,.55);margin-bottom:10px}
.footer-org-mail{font-family:var(--font-body);font-size:13px;color:rgba(255,255,255,.72);
  text-decoration:none;border-bottom:0;padding-bottom:0;transition:color .25s}
.footer-org-mail:hover{color:#fff}
@media(max-width:900px){.footer-org{max-width:none;margin-bottom:8px}}

/* contact page — company + address block */
.ct-org{font-family:var(--font-body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--ink,#33291F);line-height:1.6;display:block}
.ct-addr{font-style:normal;font-family:var(--font-body);font-size:14px;line-height:1.85;
  color:rgba(51,41,31,.68)}

/* ═══ HERO — service trio + city line ═══════════════════════════ */
.hero-eyebrow--trio{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0 18px;margin-bottom:8px}
.hero-eyebrow--trio span{position:relative;font-family:var(--font-body);
  font-size:clamp(10px,1.1vw,12px);letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:rgba(255,255,255,.86);white-space:nowrap;padding:3px 0}
/* hairline separator between items, not after the last */
.hero-eyebrow--trio span+span::before{content:'';position:absolute;left:-10px;top:50%;
  transform:translateY(-50%);width:1px;height:11px;background:rgba(255,255,255,.4)}

.hero-cities{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0 22px;margin-top:34px}
.hero-cities span{position:relative;font-family:var(--font-body);
  font-size:clamp(11px,1.2vw,13px);letter-spacing:.3em;text-transform:uppercase;
  font-weight:400;color:rgba(255,255,255,.72);white-space:nowrap}
.hero-cities span+span::before{content:'·';position:absolute;left:-14px;top:50%;
  transform:translateY(-50%);color:rgba(255,255,255,.45);letter-spacing:0}

@media(max-width:600px){
  .hero-eyebrow--trio{gap:0 12px;flex-direction:column;gap:6px}
  .hero-eyebrow--trio span+span::before{display:none}
  .hero-cities{gap:0 16px;margin-top:26px}
  .hero-cities span+span::before{left:-10px}
}

/* trio replaces the old single-label eyebrow — drop its leading rule line
   and the font-size/letter-spacing overrides meant for that older markup */
.hero-eyebrow--trio::before{display:none!important}
.hero-eyebrow--trio{font-size:inherit!important;letter-spacing:normal!important;
  margin-bottom:14px!important;color:inherit!important;gap:0 18px!important}

/* footer now carries the full menu + destinations -> 3 columns */
.footer-top{grid-template-columns:1.6fr 1fr 1fr!important;gap:40px!important}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr!important;gap:28px!important}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr!important}}

/* tablet: let the identity block span the full row so Menu + Destinations
   sit side by side underneath instead of Destinations orphaning under it */
@media(max-width:900px){
  .footer-top>*:first-child{grid-column:1 / -1}
}

/* ═══ Home CTA — quick enquiry form ═════════════════════════════ */
.quick-form{max-width:720px;margin:34px auto 0;display:flex;flex-direction:column;gap:18px;text-align:left}
.quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quick-field{display:flex;flex-direction:column;gap:7px}
.quick-field label{font-family:var(--font-body);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:rgba(51,41,31,.5)}
.quick-field input,.quick-field textarea{font-family:var(--font-body);font-size:15px;color:var(--ink,#33291F);
  background:#fff;border:1px solid rgba(51,41,31,.16);border-radius:6px;padding:12px 14px;outline:none;
  width:100%;transition:border-color .25s}
.quick-field input:focus,.quick-field textarea:focus{border-color:var(--ink,#33291F)}
.quick-field textarea{resize:vertical;min-height:84px}
.quick-actions{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:4px}
.quick-actions .home-cta-primary{border:none;cursor:pointer;font-family:var(--font-body)}
.quick-actions .home-cta-primary:disabled{opacity:.5;cursor:default}
.quick-more{font-family:var(--font-body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(51,41,31,.6);text-decoration:none;border-bottom:1px solid rgba(51,41,31,.2);padding-bottom:2px}
.quick-more:hover{color:var(--ink,#33291F);border-color:var(--ink,#33291F)}
.quick-ok{max-width:520px;margin:34px auto 0}
.quick-ok-mark{width:56px;height:56px;border-radius:50%;background:var(--ink,#33291F);color:#fff;font-size:23px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.quick-ok h3{font-family:var(--font-display);font-size:26px;font-weight:400;margin-bottom:8px}
.quick-ok p{font-family:var(--font-body);font-size:14px;color:rgba(51,41,31,.6)}
@media(max-width:720px){.quick-row{grid-template-columns:1fr}}

/* services sub-line: bold lead, lighter descriptor underneath */
.svc3-sub strong{display:block;font-weight:700;color:var(--ink,#33291F);
  font-size:clamp(16px,1.9vw,20px);letter-spacing:.01em;margin-bottom:8px}
.svc3-sub-line{display:block;font-size:clamp(13px,1.4vw,15px);color:rgba(51,41,31,.55)}

/* ═══ Services heading — display treatment ══════════════════════
   Mirrors the hero ("Curated / Luxury / Living"): Cormorant display
   with one italic accent word, plus a hairline rule either side. */
.svc3-heading{font-family:var(--font-display);font-weight:400;
  font-size:clamp(32px,5vw,58px);line-height:1.1;letter-spacing:-.015em;
  color:var(--ink,#33291F);display:flex;flex-wrap:wrap;justify-content:center;
  align-items:baseline;gap:0 .28em;margin:0 0 6px;position:relative}
.svc3-heading .svc3-w2{font-style:italic;color:var(--stone);position:relative;padding:0 .06em}
/* thin rules flanking the line, fading outward */
.svc3-head{position:relative}
.svc3-heading::before,.svc3-heading::after{content:'';flex:0 0 clamp(28px,7vw,86px);height:1px;
  align-self:center;background:linear-gradient(to right,rgba(51,41,31,0),rgba(51,41,31,.28))}
.svc3-heading::after{background:linear-gradient(to left,rgba(51,41,31,0),rgba(51,41,31,.28))}
@media(max-width:560px){
  .svc3-heading{gap:0 .22em}
  .svc3-heading::before,.svc3-heading::after{flex-basis:22px}
}

/* Recommended Collection — centre the heading (the old arrow pair that
   sat on the right is gone; arrows now float over the rail) */
.inv-header{align-items:center!important;text-align:center;
  flex-direction:column!important;justify-content:center!important;gap:0!important}
.inv-header>div{width:100%;text-align:center}
.inv-header .section-title{text-align:center}

/* ═══ HEADINGS — one family sitewide ════════════════════════════
   "Trusted by Phuket's Finest" (.dev-title) was the only section head
   still in Cormorant Garamond; every other one had been overridden to
   the sitewide sans. Match them all to it, with the same italic accent word. */
.section-title,
.svc3-heading,
.pg-title,
.ct-ok h2,
.quick-ok h3,
.inv-card-name,
.ins-hero-title,
.proc-hero-h{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
.section-title em,
.pg-title em{font-style:italic!important;color:var(--stone)!important;font-weight:400!important}

/* the services head already carried its own italic accent — keep it aligned */
.svc3-heading .svc3-w2{font-style:italic;color:var(--stone)}

/* services heading: drop the flanking rules once the line wraps —
   they stranded mid-heading on narrow viewports */
@media(max-width:760px){
  .svc3-heading::before,.svc3-heading::after{display:none}
}

/* ═══ Begin Your Journey — tighter block ════════════════════════
   Was 96px band padding + 34px form gap + roomy fields; the section
   ran nearly a full screen for four inputs. */
.home-cta{padding:60px 24px 64px!important}
.home-cta-sub{margin:10px auto 0!important;font-size:14px}
.quick-form{margin-top:22px!important;gap:14px!important;max-width:660px}
.quick-row{gap:14px!important}
.quick-field{gap:5px!important}
.quick-field label{font-size:9px;letter-spacing:.14em}
.quick-field input{padding:10px 13px!important;font-size:14px!important}
.quick-field textarea{padding:10px 13px!important;font-size:14px!important;min-height:64px!important}
.quick-actions{margin-top:2px!important;gap:18px!important}
.quick-actions .home-cta-primary{padding:13px 34px!important;font-size:10px!important}
.quick-more{font-size:11px}
@media(max-width:720px){
  .home-cta{padding:48px 20px 52px!important}
  .quick-form{margin-top:18px!important;gap:12px!important}
}

/* services heading must stay on ONE line at every width — shrink the
   type with the viewport instead of letting it wrap */
.svc3-heading{flex-wrap:nowrap!important;white-space:nowrap;
  font-size:clamp(19px,4.4vw,54px)!important;gap:0 .24em!important}
.svc3-heading>span,.svc3-heading>em{white-space:nowrap}
@media(max-width:760px){
  /* rules back on — the line no longer wraps, so they sit correctly */
  .svc3-heading::before,.svc3-heading::after{display:block;flex-basis:clamp(14px,4vw,40px)}
}
@media(max-width:420px){
  .svc3-heading::before,.svc3-heading::after{display:none}
  .svc3-heading{font-size:clamp(17px,5vw,26px)!important}
}

/* ═══ Services header rhythm ════════════════════════════════════
   The heading sat 6px above the button and the button ran straight
   into the card rail. Give each step room. */
.svc3-heading{margin:0 0 28px!important}
.svc3-head{padding:0 24px 8px!important}
.svc3-explore{padding:15px 40px!important;margin-bottom:4px}
.svc3-wrap{margin-top:34px!important}
@media(max-width:760px){
  .svc3-heading{margin:0 0 20px!important}
  .svc3-explore{padding:13px 32px!important}
  .svc3-wrap{margin-top:24px!important}
}

/* ═══ LIFESTYLE CONCIERGE — service cards ═══════════════════════
   No stock photography: the six services have no matching MGROUP
   imagery, so the cards carry a fine line icon, the same Cormorant
   display face as every other heading, and space to breathe. */
.lx-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:24px!important;background:none!important;border:none!important;
  max-width:1180px;margin:8px auto 100px;padding:0 24px}
.lx-card{position:relative;background:#fff;border:1px solid rgba(51,41,31,.1);border-radius:2px;
  padding:40px 32px 34px!important;display:flex;flex-direction:column;gap:0;
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s,border-color .4s}
/* accent rule that grows across the top on hover */
.lx-card::before{content:'';position:absolute;top:0;left:0;height:2px;width:0;
  background:var(--stone);transition:width .5s cubic-bezier(.25,.46,.45,.94)}
.lx-card:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(51,41,31,.13);
  border-color:rgba(51,41,31,.18)}
.lx-card:hover::before{width:100%}

.lx-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(51,41,31,.14);border-radius:50%;color:var(--stone);
  margin-bottom:24px;transition:background .4s,color .4s,border-color .4s}
.lx-icon svg{width:23px;height:23px}
.lx-card:hover .lx-icon{background:var(--ink,#33291F);color:#fff;border-color:var(--ink,#33291F)}

.lx-title{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif!important;
  font-size:clamp(21px,2.2vw,27px)!important;font-weight:400!important;line-height:1.2;
  color:var(--ink,#33291F);margin:0 0 12px!important;letter-spacing:0}
.lx-desc{font-family:var(--font-body);font-size:13.5px;line-height:1.8;
  color:rgba(51,41,31,.55);flex:1;margin:0 0 22px}
.lx-cta{font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink,#33291F);display:inline-flex;align-items:center;gap:8px}
.lx-arrow{transition:transform .35s}
.lx-card:hover .lx-arrow{transform:translateX(6px)}

@media(max-width:1000px){.lx-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:640px){
  .lx-grid{grid-template-columns:1fr!important;gap:18px!important;margin-bottom:72px;padding:0 18px}
  .lx-card{padding:32px 26px 28px!important}
}

/* ═══ HOW TO BUY — card UI pass ═════════════════════════════════
   The page was flat: 1px-gap grids that read as one grey slab, a
   sans step number bigger than its own heading, and no separation
   between the four topics. Give every block a real card, restore the
   display face used sitewide, and let the sections breathe. */

/* page frame */
.proc-hero{background:linear-gradient(180deg,#F7F4F0 0%,#FBF9F7 100%)!important;
  padding:76px 40px 60px!important;border-bottom:1px solid rgba(51,41,31,.08)!important;text-align:center}
.proc-hero-lbl{font-family:var(--font-body);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--stone);font-weight:600;margin-bottom:16px}
.proc-hero-sub{max-width:600px;margin:16px auto 0!important;font-size:14.5px;line-height:1.85;
  color:rgba(51,41,31,.6)}
.proc-content{max-width:1120px!important;padding:64px 40px 88px!important}

/* section heads */
.proc-section-lbl{font-family:var(--font-body);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--stone);font-weight:600;margin-bottom:12px;text-align:center}
.proc-h{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif!important;
  font-size:clamp(28px,3.4vw,42px)!important;font-weight:400!important;letter-spacing:0!important;
  text-align:center;margin-bottom:38px!important}
.proc-h em{font-style:italic;color:var(--stone)}
.proc-divider{display:none}

/* ── 6 steps ── */
.proc-steps{grid-template-columns:repeat(3,1fr)!important;gap:20px!important;margin-bottom:80px!important}
.proc-step{background:#fff!important;border:1px solid rgba(51,41,31,.1)!important;border-radius:2px;
  padding:34px 28px 30px!important;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.25,.46,.45,.94),box-shadow .35s,border-color .35s}
.proc-step::before{content:'';position:absolute;top:0;left:0;height:2px;width:0;background:var(--stone);
  transition:width .5s cubic-bezier(.25,.46,.45,.94)}
.proc-step:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(51,41,31,.11);
  border-color:rgba(51,41,31,.18)}
.proc-step:hover::before{width:100%}
.proc-step-num{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:34px!important;
  font-weight:400!important;color:var(--stone)!important;line-height:1!important;margin-bottom:16px!important;
  display:flex;align-items:center;gap:12px}
.proc-step-num::after{content:'';flex:1;height:1px;background:rgba(51,41,31,.1)}
.proc-step-title{font-family:var(--font-body);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--ink,#33291F);margin-bottom:10px}
.proc-step-text{font-size:13.5px;line-height:1.8;color:rgba(51,41,31,.58)}

/* ── ownership routes ── */
.proc-own-grid{grid-template-columns:repeat(3,1fr)!important;gap:20px!important;margin-bottom:80px!important}
.proc-own-card{background:#fff!important;border:1px solid rgba(51,41,31,.1)!important;border-radius:2px;
  padding:32px 26px!important;transition:transform .35s,box-shadow .35s,border-color .35s}
.proc-own-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(51,41,31,.11);
  border-color:rgba(51,41,31,.18)}
.proc-own-badge{display:inline-block;font-family:var(--font-body);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:#fff;background:var(--ink,#33291F);
  padding:5px 11px;border-radius:2px;margin-bottom:16px}
.proc-own-name{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:23px!important;
  font-weight:400!important;color:var(--ink,#33291F);margin-bottom:10px!important}
.proc-own-desc{font-size:13.5px;line-height:1.8;color:rgba(51,41,31,.58)}

/* ── title deeds ── */
.proc-deed-card{background:#fff!important;border:1px solid rgba(51,41,31,.1)!important;border-radius:2px;
  padding:28px 26px!important;transition:transform .35s,box-shadow .35s,border-color .35s}
.proc-deed-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(51,41,31,.1);
  border-color:rgba(51,41,31,.18)}
.proc-deed-badge{display:inline-block;font-family:var(--font-body);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:2px;margin-bottom:14px;
  background:rgba(51,41,31,.07);color:rgba(51,41,31,.62)}
.proc-deed-name{font-family:'Cormorant Garamond',Georgia,serif!important;font-size:21px!important;
  font-weight:400!important;color:var(--ink,#33291F);margin-bottom:9px!important}
.proc-deed-desc{font-size:13px;line-height:1.78;color:rgba(51,41,31,.56)}

@media(max-width:980px){
  .proc-steps,.proc-own-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:640px){
  .proc-hero{padding:52px 20px 42px!important}
  .proc-content{padding:44px 18px 64px!important}
  .proc-steps,.proc-own-grid{grid-template-columns:1fr!important;gap:14px!important;margin-bottom:56px!important}
  .proc-h{margin-bottom:26px!important}
}

.proc-deed-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;
  gap:20px!important;margin-bottom:72px!important}
@media(max-width:640px){.proc-deed-grid{grid-template-columns:1fr!important;gap:14px!important}}
/* body copy between sections */
.proc-body{max-width:720px;margin:0 auto 34px!important;text-align:center;
  font-size:14.5px;line-height:1.85;color:rgba(51,41,31,.6)}

/* CTA sub-line: break at the clause, not wherever the box ends */
.home-cta-sub{max-width:none!important;text-wrap:balance;line-height:1.75}
.cta-br{display:inline}
@media(max-width:680px){
  /* on narrow screens let it flow naturally instead of forcing the break */
  .cta-br{display:none}
  .home-cta-sub{max-width:420px!important;margin-left:auto!important;margin-right:auto!important}
}

/* let the browser even out the two lines instead of a hard <br>;
   the em-dash and final clause are held together with nbsp so they
   never strand at a line start/end */
.home-cta-sub{max-width:540px!important;margin-left:auto!important;margin-right:auto!important;
  text-wrap:balance;line-height:1.8}
.cta-br{display:none!important}

/* ═══ HOW TO BUY — transfer cost calculator ═════════════════════ */
.calc{max-width:920px;margin:0 auto 72px;background:#fff;border:1px solid rgba(51,41,31,.1);
  border-radius:2px;padding:36px 34px;box-shadow:0 18px 44px rgba(51,41,31,.06)}
.calc-inputs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.calc-field{display:flex;flex-direction:column;gap:7px}
.calc-field label{font-family:var(--font-body);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:rgba(51,41,31,.5)}
.calc-field input,.calc-field select{font-family:var(--font-body);font-size:15px;color:var(--ink,#33291F);
  background:#fff;border:1px solid rgba(51,41,31,.16);border-radius:6px;padding:12px 14px;
  outline:none;width:100%;transition:border-color .25s}
.calc-field input:focus,.calc-field select:focus{border-color:var(--ink,#33291F)}
.calc-select{position:relative}
.calc-select::after{content:'\25BE';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:rgba(51,41,31,.45);font-size:11px}
.calc-select select{appearance:none;-webkit-appearance:none;cursor:pointer}

.calc-out{margin-top:30px;padding-top:26px;border-top:1px solid rgba(51,41,31,.1)}
.calc-rows{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px dashed rgba(51,41,31,.12)}
.calc-row-label{font-family:var(--font-body);font-size:13.5px;color:rgba(51,41,31,.66)}
.calc-row-label small{display:block;font-size:11px;color:rgba(51,41,31,.4);margin-top:3px;letter-spacing:.02em}
.calc-row-val{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;color:var(--ink,#33291F);
  white-space:nowrap}
.calc-row--none .calc-row-val{color:rgba(51,41,31,.35);font-style:italic;font-size:14px}

.calc-total{background:#FAF8F6;border:1px solid rgba(51,41,31,.08);border-radius:2px;padding:18px 20px}
.calc-total-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.calc-total-row+.calc-total-row{margin-top:12px;padding-top:12px;border-top:1px solid rgba(51,41,31,.1)}
.calc-total-row span{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:rgba(51,41,31,.55)}
.calc-total-row strong{font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;font-weight:400;
  color:var(--ink,#33291F);white-space:nowrap}
.calc-total-row--split strong{color:var(--stone)}

.calc-disclaimer{font-family:var(--font-body);font-size:12px;line-height:1.75;
  color:rgba(51,41,31,.45);margin-top:16px}
.calc-disclaimer strong{color:rgba(51,41,31,.6);font-weight:600}

@media(max-width:680px){
  .calc{padding:26px 20px;margin-bottom:56px}
  .calc-inputs{grid-template-columns:1fr;gap:16px}
  .calc-total-row strong{font-size:23px}
}

/* ═══ COLLECTIONS — heading font + centring ═════════════════════
   .cp-title had three competing rules; the last one forced it back to
   the sitewide sans. Pin it to the display face and centre the block —
   the count label moves under the copy instead of floating right. */
.cp-title,
.hub-hero-inner h2{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif!important;
  font-weight:400!important;letter-spacing:0!important;line-height:1.12!important}
.cp-title em,
.hub-hero-inner h2 em{font-style:italic!important;color:var(--stone)!important;font-weight:400!important}

.cp-header{flex-direction:column!important;align-items:center!important;text-align:center;
  gap:14px!important;padding:64px 24px 0!important;max-width:820px;margin:0 auto}
.cp-header>div{width:100%}
.cp-subtitle{font-size:13.5px!important;line-height:1.8!important;color:rgba(51,41,31,.55)!important;
  max-width:520px!important;margin:14px auto 0!important;font-weight:400!important}
.cp-count{align-self:center!important;font-size:10px!important;letter-spacing:.2em!important}

.hub-hero-inner{text-align:center}
.hub-hero-inner h2{margin-left:auto;margin-right:auto}

@media(max-width:640px){
  .cp-header{padding:40px 20px 0!important;gap:10px!important}
  .cp-subtitle{font-size:13px!important}
}

/* ═══ COLLECTIONS — Location / Property Type chip filters ═══════ */
.coll-filter{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px}
.coll-filter-lbl{font-family:var(--font-body);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:rgba(51,41,31,.42)}
.coll-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.coll-chip{font-family:var(--font-body);font-size:12px;letter-spacing:.06em;font-weight:500;
  color:rgba(51,41,31,.68);background:#fff;border:1px solid rgba(51,41,31,.16);border-radius:100px;
  padding:9px 18px;cursor:pointer;transition:background .25s,color .25s,border-color .25s;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.coll-chip:hover{border-color:rgba(51,41,31,.4);color:var(--ink,#33291F)}
.coll-chip.active{background:var(--ink,#33291F);border-color:var(--ink,#33291F);color:#fff}
.coll-chip em{font-style:normal;font-size:10px;font-weight:600;opacity:.55;
  background:rgba(51,41,31,.07);border-radius:100px;padding:2px 6px;line-height:1.5}
.coll-chip.active em{background:rgba(255,255,255,.2);opacity:.9}
.coll-chip em:empty{display:none}
@media(max-width:640px){
  .coll-filter{margin-top:18px;gap:8px}
  .coll-chip{font-size:11px;padding:8px 14px}
}

/* ═══ COLLECTIONS — Location / Type dropdowns ═══════════════════ */
.coll-selects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  max-width:760px;margin:20px auto 0;padding:0 24px}
.coll-sel{display:flex;flex-direction:column;gap:8px}
.coll-sel label{font-family:var(--font-body);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:rgba(51,41,31,.42)}
.coll-sel-box{position:relative}
.coll-sel-box::after{content:'\25BE';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:rgba(51,41,31,.45);font-size:11px}
.coll-sel select{appearance:none;-webkit-appearance:none;cursor:pointer;width:100%;
  font-family:var(--font-body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--ink,#33291F);background:#fff;
  border:1px solid rgba(51,41,31,.16);border-radius:2px;padding:15px 40px 15px 18px;
  outline:none;transition:border-color .25s}
.coll-sel select:hover{border-color:rgba(51,41,31,.4)}
.coll-sel select:focus{border-color:var(--ink,#33291F)}
@media(max-width:640px){
  .coll-selects{grid-template-columns:1fr;gap:12px;padding:0 20px;margin-top:16px}
  .coll-sel select{font-size:12px;padding:13px 36px 13px 15px}
}

/* three filters in one row now that Collection is a <select> too */
.coll-selects{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:1000px!important;
  margin-top:24px!important}
.coll-controls{display:none!important}   /* old custom dropdown shell */
@media(max-width:820px){.coll-selects{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.coll-selects{grid-template-columns:1fr!important}}

/* collections heading on one line — scale with the viewport instead of wrapping */
.cp-title{white-space:nowrap;font-size:clamp(21px,4.6vw,52px)!important}
@media(max-width:420px){.cp-title{font-size:clamp(18px,5.4vw,26px)!important}}

/* ═══ PROPERTY CARD — bed / bath / area specs ═══════════════════
   Were inline-styled: 7.5px labels, a 1.8 stroke that rendered as a
   dark blob at 14px, and no shared rhythm. Now one refined set. */
.prop-card-specs{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.prop-spec{display:inline-flex;align-items:center;gap:7px;padding:0 16px;position:relative}
.prop-spec:first-child{padding-left:0}
/* hairline divider between each spec */
.prop-spec+.prop-spec::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:rgba(51,41,31,.14)}
.spec-ico{width:17px;height:17px;color:var(--stone);flex-shrink:0;opacity:.9}
/* numerals stay in the body face — Cormorant renders old-style figures
   where 5/0/1 drop below the baseline and read badly at this size */
.spec-num{font-family:var(--font-body);font-size:14px;font-weight:700;
  color:var(--ink,#33291F);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.spec-lbl{font-family:var(--font-body);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:rgba(51,41,31,.42)}
@media(max-width:520px){
  .prop-spec{padding:0 12px;gap:6px}
  .spec-ico{width:15px;height:15px}
  .spec-num{font-size:13px}
}

/* solid glyphs read cleaner than 1.4px strokes at 16px; sit them in a
   soft tinted disc so they feel intentional rather than clip-art */
.spec-ico{width:15px;height:15px;color:var(--ink,#33291F);opacity:1}
.prop-spec{gap:8px}
.prop-spec .spec-ico{padding:5px;box-sizing:content-box;width:15px;height:15px;
  background:rgba(51,41,31,.05);border-radius:50%;color:rgba(51,41,31,.72)}
.prop-card:hover .prop-spec .spec-ico{background:rgba(51,41,31,.09);color:var(--ink,#33291F)}
.spec-ico,.prop-spec .spec-ico{transition:background .3s,color .3s}
@media(max-width:520px){
  .prop-spec .spec-ico{width:13px;height:13px;padding:4px}
}

/* four specs now — tighten so they still fit one row on a card */
.prop-spec{padding:0 12px}
.prop-spec .spec-ico{width:14px;height:14px;padding:5px}
.spec-num{font-size:13.5px}
.spec-lbl{font-size:8.5px;letter-spacing:.12em}
@media(max-width:520px){
  .prop-card-specs{gap:4px 0}
  .prop-spec{padding:0 9px}
  .prop-spec .spec-ico{width:12px;height:12px;padding:4px}
  .spec-num{font-size:12.5px}
}

/* detail page specs use the same solid glyph set as the search cards */
.det-spec-ico{display:inline-flex;align-items:center;justify-content:center}
.det-spec-ico svg{width:16px;height:16px;color:rgba(51,41,31,.72)}

/* ═══════════════════════════════════════════════════════════════
   PROPERTY DETAIL — section hierarchy
   Every block used to look identical: same title size, same weight,
   no rules, no anchors. On a 4,700px page that gives the eye nothing
   to hold on to. This adds a numbered rhythm, a sticky jump bar, and
   real separation between blocks.
   ═══════════════════════════════════════════════════════════════ */

/* sticky in-page nav */
.det-jump{position:sticky;top:56px;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-top:1px solid rgba(51,41,31,.08);
  border-bottom:1px solid rgba(51,41,31,.08);margin-bottom:8px}
.det-jump-inner{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  max-width:1180px;margin:0 auto;padding:0 8px}
.det-jump-inner::-webkit-scrollbar{display:none}
.det-jump a{flex:0 0 auto;font-family:var(--font-body);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:rgba(51,41,31,.5);text-decoration:none;
  padding:15px 16px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .25s,border-color .25s}
.det-jump a:hover{color:var(--ink,#33291F)}
.det-jump a.on{color:var(--ink,#33291F);border-bottom-color:var(--ink,#33291F)}

/* section shell */
.det-open-section{scroll-margin-top:120px;padding:46px 0 44px!important;
  border-top:1px solid rgba(51,41,31,.09)}
.det-open-section:first-of-type{border-top:none}

/* numbered heading */
.det-section-title{position:relative;font-family:'Cormorant Garamond',Georgia,serif!important;
  font-size:clamp(23px,2.6vw,31px)!important;font-weight:400!important;letter-spacing:0!important;
  color:var(--ink,#33291F)!important;margin-bottom:26px!important;
  display:flex;align-items:baseline;gap:14px}
.det-section-title::before{content:attr(data-n);font-family:var(--font-body);font-size:10px;
  letter-spacing:.2em;font-weight:700;color:var(--stone);flex:0 0 auto;
  transform:translateY(-2px)}
.det-section-title::after{content:'';flex:1;height:1px;background:rgba(51,41,31,.1);
  align-self:center}

@media(max-width:640px){
  .det-jump{top:52px}
  .det-jump a{padding:13px 12px;font-size:10px}
  .det-open-section{padding:34px 0 32px!important;scroll-margin-top:104px}
  .det-section-title{margin-bottom:20px!important;gap:10px}
}

/* villa name matches the home hero: same display face, italic accent */
.det-title{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif!important;
  font-size:clamp(30px,4.2vw,52px)!important;font-weight:400!important;
  letter-spacing:-.005em!important;line-height:1.12!important;color:var(--ink,#33291F)!important}
.det-title em{font-style:italic;color:var(--stone)}

/* ═══ PROPERTY DETAIL — layout & price ══════════════════════════ */

/* one measured column: long-form copy stays readable instead of
   running the full width of a 1440px screen */
.det-inner{max-width:1180px;margin:0 auto;width:100%}
.det-sections{max-width:1180px!important;margin:0 auto!important;padding:0 32px 40px!important}
.det-header{max-width:1180px;margin:0 auto;padding:34px 32px 30px!important}
.det-desc,.det-open-section > p{max-width:74ch}

/* USD sits after the THB price on the same line, quieter */
.det-price-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px}
.det-inline-price-main{font-family:var(--font-body);font-size:clamp(26px,3.2vw,38px);
  font-weight:400;color:var(--ink,#33291F);line-height:1.1;letter-spacing:-.01em}
.det-inline-price-usd{font-family:var(--font-body);font-size:14px;font-weight:400;
  color:rgba(51,41,31,.38);letter-spacing:.01em}
.det-inline-price-lbl{font-family:var(--font-body);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:rgba(51,41,31,.42);margin-bottom:8px}
.det-inline-price{margin-bottom:26px}

/* header rhythm */
.det-breadcrumb{font-size:10px!important;letter-spacing:.18em!important;
  color:rgba(51,41,31,.42)!important;margin-bottom:16px!important}
.det-location{font-family:var(--font-body);font-size:14px;color:rgba(51,41,31,.55);
  margin:10px 0 22px}

/* specs row as a quiet band, not floating chips */
.det-specs-row{display:flex;flex-wrap:wrap;gap:10px;padding:18px 0 0;
  border-top:1px solid rgba(51,41,31,.09)}
.det-spec{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;
  border:1px solid rgba(51,41,31,.12);border-radius:100px;background:#fff}
.det-spec-val{font-family:var(--font-body);font-size:15px;font-weight:700;
  color:var(--ink,#33291F);font-variant-numeric:lining-nums tabular-nums}
.det-spec-lbl{font-family:var(--font-body);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:rgba(51,41,31,.42)}

@media(max-width:900px){
  .det-sections{padding:0 22px 32px!important}
  .det-header{padding:26px 22px 24px!important}
}
@media(max-width:640px){
  .det-sections{padding:0 18px 28px!important}
  .det-header{padding:22px 18px 20px!important}
  .det-price-line{gap:8px}
  .det-spec{padding:9px 14px;gap:7px}
}

/* ═══ DETAIL — fewer rules ══════════════════════════════════════
   Sections had a top border, the heading had its own trailing rule,
   and the specs row added a third. Keep one: the section divider.
   Spacing does the rest of the separating. */
.det-section-title::after{display:none!important}
.det-specs-row{border-top:none!important;padding-top:6px!important}
.det-divider{display:none!important}
.det-open-section{border-top:1px solid rgba(51,41,31,.08)!important;
  padding:52px 0 48px!important}
.det-open-section:first-of-type{border-top:none!important;padding-top:8px!important}
@media(max-width:640px){
  .det-open-section{padding:36px 0 32px!important}
}

/* specs sit above the price now, and lose the pill outline — the words
   already read as a group, the boxes were extra furniture */
.det-specs-row{border:none!important;padding:0 0 22px!important;gap:0!important;
  display:flex;flex-wrap:wrap;align-items:center}
.det-spec{border:none!important;background:none!important;border-radius:0!important;
  padding:0 18px!important;position:relative}
.det-spec:first-child{padding-left:0!important}
.det-spec+.det-spec::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:15px;background:rgba(51,41,31,.14)}
.det-spec-ico svg{width:16px;height:16px;color:rgba(51,41,31,.55)}
.det-inline-price{margin-bottom:0!important;padding-top:20px;
  border-top:1px solid rgba(51,41,31,.09)}

/* SVG glyphs that replaced the emoji */
.mgi{width:16px;height:16px;flex-shrink:0;vertical-align:-3px}
.det-hl-icon .mgi{width:18px;height:18px;color:var(--stone)}
.mgi-feat{color:rgba(51,41,31,.5);margin-right:2px}

/* ═══ Features & Amenities — compact ════════════════════════════
   A later rule forced this to one column, so ~20 short items ran a
   full screen. Flow them into as many columns as fit and let each row
   be a chip-height line instead of a padded block. */
.det-feats{display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;
  gap:2px 26px!important;margin-top:0!important}
.det-feat{padding:5px 0!important;font-size:13px!important;gap:9px!important;
  color:rgba(51,41,31,.72)!important;font-weight:400!important;line-height:1.45}
.det-feat-emoji{font-size:0!important}          /* legacy emoji sizing */
.det-feat-emoji .mgi{width:15px;height:15px;color:var(--stone)}
@media(max-width:900px){
  .det-feats{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;gap:2px 18px!important}
}
@media(max-width:480px){
  .det-feats{grid-template-columns:1fr 1fr!important;gap:2px 14px!important}
  .det-feat{font-size:12px!important;gap:7px!important}
}

/* section headings without the 01-06 index — the sticky jump bar
   already shows where you are, so the numbers were redundant */
.det-section-title::before{display:none!important}
.det-section-title{gap:0!important}

/* ═══ KEY HIGHLIGHTS — feature cards ════════════════════════════
   Was a flat 2-up grid of grey boxes with the icon hidden by a later
   `display:none` and 8px labels. These are the strongest selling
   points of a listing, so give them real presence. */
.det-highlights{display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important;
  gap:18px!important}

.det-highlight-item{position:relative;display:flex!important;flex-direction:column;
  align-items:flex-start!important;gap:0!important;
  padding:28px 24px 26px!important;background:#fff!important;
  border:1px solid rgba(51,41,31,.1)!important;border-radius:2px;overflow:hidden;
  transition:transform .38s cubic-bezier(.25,.46,.45,.94),box-shadow .38s,border-color .38s}
/* accent rule sweeps across on hover, same language as the other cards */
.det-highlight-item::before{content:'';position:absolute;top:0;left:0;height:2px;width:0;
  background:var(--stone);transition:width .5s cubic-bezier(.25,.46,.45,.94)}
.det-highlight-item:hover{transform:translateY(-5px);
  box-shadow:0 22px 48px rgba(51,41,31,.1);border-color:rgba(51,41,31,.18)}
.det-highlight-item:hover::before{width:100%}

/* icon back in view, inside a ring */
.det-hl-icon{display:inline-flex!important;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin-bottom:18px;
  border:1px solid rgba(51,41,31,.14);color:var(--stone);
  font-size:0!important;flex-shrink:0;transition:background .38s,color .38s,border-color .38s}
.det-hl-icon .mgi{width:20px;height:20px}
.det-highlight-item:hover .det-hl-icon{background:var(--ink,#33291F);color:#fff;
  border-color:var(--ink,#33291F)}

.det-hl-label{font-family:var(--font-body)!important;font-size:10px!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;font-weight:700!important;
  color:var(--stone)!important;margin-bottom:9px!important;display:block!important}
.det-hl-text{font-family:'Cormorant Garamond',Georgia,serif!important;
  font-size:19px!important;line-height:1.4!important;font-weight:400!important;
  color:var(--ink,#33291F)!important}

@media(max-width:640px){
  .det-highlights{grid-template-columns:1fr!important;gap:12px!important}
  .det-highlight-item{padding:22px 20px!important}
  .det-hl-icon{width:38px;height:38px;margin-bottom:14px}
  .det-hl-text{font-size:17px!important}
}

/* ═══ DOWNLOAD PDF ══════════════════════════════════════════════ */
.prop-back{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.prop-pdf{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink,#33291F);background:#fff;
  border:1px solid rgba(51,41,31,.22);border-radius:100px;padding:11px 22px;
  transition:background .25s,color .25s,border-color .25s}
.prop-pdf svg{width:15px;height:15px}
.prop-pdf:hover{background:var(--ink,#33291F);color:#fff;border-color:var(--ink,#33291F)}

.pdf-only{display:none}

/* ═══════════════════════════════════════════════════════════════
   PRINT / PDF — turn the page into an A4 brochure
   Uses the browser's own PDF engine rather than a JS rasteriser:
   text stays selectable and vector-sharp, images keep full resolution,
   and there is no CORS problem with Supabase-hosted photos.
   ═══════════════════════════════════════════════════════════════ */
@media print{
  @page{size:A4;margin:14mm 12mm 16mm}

  html,body{background:#fff!important}
  html.mg-locked{overflow:visible!important}

  /* strip the app chrome */
  nav,#mainNav,#mobileNav,#mobileNavOverlay,footer,
  .det-jump,.prop-back,.det-right,.det-sidebar,.det-topbar,
  .det-gallery-nav,.det-gallery-count,.det-thumbs,
  #privacyModal,#cookieModal,#cookieBanner,
  .det-sim,.det-similar,#detSimilar,
  .det-nearby-cats,#detMapIframe,#detMapOverlay{display:none!important}

  .pdf-only{display:block!important}

  /* cover strip */
  .pdf-cover{display:flex!important;align-items:center;justify-content:space-between;
    padding-bottom:10px;margin-bottom:16px;border-bottom:1.5px solid #33291F}
  .pdf-logo{height:22px;width:auto}
  .pdf-cover-lbl{font-family:var(--font-body);font-size:8pt;letter-spacing:.24em;
    text-transform:uppercase;color:#666}

  /* repeated footer */
  .pdf-foot{position:fixed;bottom:0;left:0;right:0;display:flex!important;
    justify-content:space-between;gap:12px;
    font-family:var(--font-body);font-size:7pt;color:#9A8467;
    padding-top:5px;border-top:.5pt solid #ddd}

  /* content */
  .det-panel,.det-overlay,.det-inner,.det-body{position:static!important;
    display:block!important;overflow:visible!important;box-shadow:none!important}
  .det-sections,.det-header{max-width:none!important;padding:0!important;margin:0!important}

  .det-gallery{height:78mm!important;page-break-inside:avoid;margin-bottom:10mm}
  .det-gallery-main{height:78mm!important}

  .det-title{font-size:24pt!important;margin-bottom:4pt!important}
  .det-location{font-size:10pt!important;margin:0 0 10pt!important}
  .det-inline-price{border-top:none!important;padding-top:0!important}
  .det-inline-price-main{font-size:17pt!important}
  .det-inline-price-usd{font-size:9pt!important}
  .det-specs-row{padding:0 0 10pt!important}
  .det-spec-val{font-size:11pt!important}
  .det-spec-lbl{font-size:6.5pt!important}
  .det-spec-ico{display:none!important}

  .det-open-section{padding:10pt 0!important;border-top:.5pt solid #e2e2e2!important;
    page-break-inside:avoid;break-inside:avoid}
  .det-section-title{font-size:14pt!important;margin-bottom:8pt!important}

  .det-highlights{grid-template-columns:1fr 1fr!important;gap:8pt!important}
  .det-highlight-item{padding:10pt!important;border:.5pt solid #ddd!important;
    box-shadow:none!important;transform:none!important;page-break-inside:avoid}
  .det-hl-icon{display:none!important}
  .det-hl-label{font-size:7pt!important;margin-bottom:3pt!important}
  .det-hl-text{font-size:10.5pt!important}

  .det-desc,.det-desc *{font-size:10pt!important;line-height:1.55!important;color:#222!important}
  .det-feats{grid-template-columns:1fr 1fr 1fr!important;gap:1pt 14pt!important}
  .det-feat{font-size:9pt!important;padding:2pt 0!important}
  .det-feat-emoji{display:none!important}

  .det-tbl td{font-size:9pt!important;padding:3pt 0!important}

  a{text-decoration:none!important;color:inherit!important}
  a[href]::after{content:''!important}
}

/* ═══ KEY HIGHLIGHTS — grey band ════════════════════════════════
   The section sat on the same white as everything around it, so the
   listing's strongest selling points read as just another block. Put
   it on a soft grey band that runs the full width, with white cards
   floating on top — the contrast makes the strip register instantly. */
#detHighlightsSection{position:relative;background:#F7F5F2;
  padding:46px 0 48px!important;border-top:none!important;border-bottom:none!important;
  margin:6px 0 0}
/* break out of the 1180px column so the band spans the viewport */
#detHighlightsSection::before{content:'';position:absolute;top:0;bottom:0;
  left:50%;transform:translateX(-50%);width:100vw;background:#F7F5F2;z-index:0}
#detHighlightsSection > *{position:relative;z-index:1}

#detHighlightsSection .det-section-title{margin-bottom:24px!important}

#detHighlightsSection .det-highlight-item{
  background:#fff!important;border:1px solid rgba(51,41,31,.07)!important;
  box-shadow:0 1px 2px rgba(51,41,31,.04)}
#detHighlightsSection .det-highlight-item:hover{
  box-shadow:0 20px 44px rgba(51,41,31,.10);border-color:rgba(51,41,31,.14)!important}
#detHighlightsSection .det-hl-icon{border-color:rgba(51,41,31,.12)}

/* the section that follows shouldn't double up a divider on the band */
#detHighlightsSection + .det-open-section{border-top:none!important}

@media(max-width:640px){
  #detHighlightsSection{padding:32px 0 34px!important}
}
@media print{
  #detHighlightsSection{background:#fff!important;padding:10pt 0!important;
    border-top:.5pt solid #e2e2e2!important}
  #detHighlightsSection::before{display:none!important}
}

/* band was reading too heavy — drop it to a barely-there warm tint so
   the section still separates without a grey slab across the page */
#detHighlightsSection{background:#FCFBFA!important}
#detHighlightsSection::before{background:#FCFBFA!important}
#detHighlightsSection .det-highlight-item{
  border-color:rgba(51,41,31,.1)!important;box-shadow:none!important}
#detHighlightsSection .det-highlight-item:hover{
  box-shadow:0 20px 44px rgba(51,41,31,.09)}

/* ═══ Fewer rules again ═════════════════════════════════════════
   Section dividers + the highlights band edge + the price hairline
   were all stacking up. Keep dividers only between plain sections;
   the tinted band separates itself. */
#detHighlightsSection{background:transparent!important;padding:52px 0 48px!important}
#detHighlightsSection::before{display:none!important}
#detHighlightsSection + .det-open-section{border-top:1px solid rgba(51,41,31,.08)!important}
.det-inline-price{border-top:none!important;padding-top:0!important}
.det-specs-row{padding-bottom:18px!important}

/* ═══ PDF download gate ═════════════════════════════════════════ */
.pdf-gate{background:#33291F;color:#fff;padding:64px 24px}
.pdf-gate-inner{max-width:1000px;margin:0 auto;display:grid;
  grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.pdf-gate-lbl{font-family:var(--font-body);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.45);margin-bottom:14px}
.pdf-gate-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,3.2vw,38px);
  font-weight:400;line-height:1.15;margin:0 0 12px;color:#fff}
.pdf-gate-title em{font-style:italic;color:rgba(255,255,255,.6)}
.pdf-gate-sub{font-family:var(--font-body);font-size:14px;line-height:1.75;
  color:rgba(255,255,255,.55);max-width:400px;margin:0}

.pdf-gate-row{display:flex;gap:10px;flex-wrap:wrap}
.pdf-gate-row input{flex:1 1 220px;font-family:var(--font-body);font-size:15px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:2px;
  padding:15px 16px;outline:none;transition:border-color .25s,background .25s}
.pdf-gate-row input::placeholder{color:rgba(255,255,255,.35)}
.pdf-gate-row input:focus{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.1)}
.pdf-gate-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:#33291F;background:#fff;border:none;border-radius:2px;padding:15px 26px;
  transition:opacity .25s}
.pdf-gate-btn svg{width:15px;height:15px}
.pdf-gate-btn:hover{opacity:.85}
.pdf-gate-btn:disabled{opacity:.5;cursor:default}
.pdf-gate-note{font-family:var(--font-body);font-size:11.5px;color:rgba(255,255,255,.35);
  margin:12px 0 0}

.pdf-gate-done{text-align:left}
.pdf-gate-tick{width:44px;height:44px;border-radius:50%;background:#fff;color:#33291F;
  display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:14px}
.pdf-gate-done p{font-family:var(--font-body);font-size:14px;color:rgba(255,255,255,.7);margin:0}
.pdf-again{background:none;border:none;color:#fff;text-decoration:underline;cursor:pointer;
  font-family:var(--font-body);font-size:14px;padding:0}

@media(max-width:820px){
  .pdf-gate{padding:48px 20px}
  .pdf-gate-inner{grid-template-columns:1fr;gap:26px}
}
@media print{ .pdf-gate{display:none!important} }

/* ═══ Jump bar — redesigned ═════════════════════════════════════
   It was translucent with a backdrop blur, so the fixed nav's own
   gradient bled through and painted a grey ramp across the strip.
   Solid ground, one hairline, quiet type. */
.det-jump{background:#fff!important;backdrop-filter:none!important;
  border-top:none!important;border-bottom:1px solid rgba(51,41,31,.1)!important;
  box-shadow:none!important;margin-bottom:0!important}
.det-jump-inner{gap:4px;padding:0 24px}
.det-jump a{padding:16px 14px!important;font-size:10.5px!important;
  letter-spacing:.14em!important;font-weight:600!important;
  color:rgba(51,41,31,.42)!important;border-bottom:none!important;position:relative}
.det-jump a::after{content:'';position:absolute;left:14px;right:14px;bottom:11px;height:1px;
  background:var(--ink,#33291F);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
.det-jump a:hover{color:rgba(51,41,31,.75)!important}
.det-jump a.on{color:var(--ink,#33291F)!important}
.det-jump a.on::after{transform:scaleX(1)}
@media(max-width:640px){
  .det-jump-inner{padding:0 14px}
  .det-jump a{padding:14px 11px!important;font-size:10px!important}
  .det-jump a::after{left:11px;right:11px;bottom:9px}
}

/* Location & Nearby filters — no outlines; the active item is marked by
   weight and an underline instead of a box around every option */
.det-nearby-cats{gap:0!important;margin-bottom:20px!important;
  border-bottom:1px solid rgba(51,41,31,.09)}
.det-ncat{border:none!important;background:none!important;border-radius:0!important;
  padding:11px 15px!important;font-size:10.5px!important;letter-spacing:.14em!important;
  font-weight:600!important;color:rgba(51,41,31,.42)!important;cursor:pointer;
  position:relative;transition:color .25s}
.det-ncat:first-child{padding-left:0!important}
.det-ncat::after{content:'';position:absolute;left:15px;right:15px;bottom:-1px;height:1px;
  background:var(--ink,#33291F);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
.det-ncat:first-child::after{left:0}
.det-ncat:hover{color:rgba(51,41,31,.75)!important}
.det-ncat.active{color:var(--ink,#33291F)!important}
.det-ncat.active::after{transform:scaleX(1)}
.det-ncat svg,.det-ncat .mgi{width:14px;height:14px;opacity:.7}
@media(max-width:560px){
  .det-ncat{padding:9px 11px!important;font-size:10px!important}
  .det-ncat::after{left:11px;right:11px}
}

/* ═══ Dividers — final pass ═════════════════════════════════════
   Four rules were stacking in the header alone: under .det-header,
   under the price block, above the specs row, and again at the top of
   the first section. Keep exactly one line between sections; the
   header block carries none. */
.det-header{border-bottom:none!important}
.det-inline-price{border-top:none!important;border-bottom:none!important;
  padding:0!important;margin:0!important}
.det-specs-row{border-top:none!important;border-bottom:none!important}
.det-gallery{border-bottom:none!important}

/* one hairline between sections, nothing doubled at the seams */
.det-open-section{border-bottom:none!important;
  border-top:1px solid rgba(51,41,31,.08)!important}
.det-open-section:first-of-type{border-top:none!important}
#detHighlightsSection{border-top:1px solid rgba(51,41,31,.08)!important}

/* ═══ Jump bar — single rule + brown hover band ═════════════════
   The bar's own bottom border sat directly on top of the first
   section's top border, drawing two hairlines a pixel apart. The bar
   keeps the line; the section below it drops one. */
.det-jump{border-bottom:1px solid rgba(51,41,31,.1)!important}
.det-jump + .det-sections .det-open-section:first-of-type,
.det-sections > .det-open-section:first-of-type,
#detHighlightsSection{border-top:none!important}

/* hover fills the tab with the brand's espresso brown */
.det-jump a{border-radius:2px;transition:color .22s,background .22s}
.det-jump a:hover{background:#4A3B2C!important;color:#fff!important}
.det-jump a:hover::after{background:#fff}
.det-jump a.on{background:transparent!important}
.det-jump a.on:hover{background:#4A3B2C!important;color:#fff!important}

/* no email gate — one button, right-aligned beside the copy */
.pdf-gate-action{display:flex;justify-content:flex-start}
.pdf-gate-btn{padding:17px 34px}
@media(min-width:821px){ .pdf-gate-action{justify-content:flex-end} }

/* ═══ BROWN THEME — surfaces & icons ════════════════════════════
   Ground the page in warm white and make every icon inherit the
   taupe/espresso family rather than neutral grey. */
body{background:var(--page)}
.det-panel,.det-overlay,#detOverlay{background:var(--page)!important}

/* icons */
.mgi,.spec-ico,.det-spec-ico svg,.lx-icon svg,.det-hl-icon .mgi,.svc2-arrow{
  color:var(--stone)}
.prop-spec .spec-ico{background:rgba(154,132,103,.12);color:var(--black)}
.prop-card:hover .prop-spec .spec-ico{background:rgba(154,132,103,.2)}
.lx-icon{border-color:rgba(154,132,103,.35);color:var(--stone)}
.lx-card:hover .lx-icon{background:var(--black);color:#fff;border-color:var(--black)}
.det-hl-icon{border-color:rgba(154,132,103,.35)}
.det-highlight-item:hover .det-hl-icon{background:var(--black);border-color:var(--black)}

/* dark bands become espresso, not black */
.home-cta-primary,.ct-submit,.quick-actions .home-cta-primary,
.pdf-gate-btn:hover,.proc-own-badge{background:var(--black)}
.pdf-gate{background:var(--black)}
.det-badge,.prop-card-badge,.badge{background:var(--black)}

/* hairlines + hover bands */
.det-jump a:hover,.det-jump a.on:hover{background:var(--black)!important}
.coll-chip.active,.det-ncat.active::after{background:var(--black)}
footer{background:var(--black)}

/* accent rules that sweep on hover */
.lx-card::before,.proc-step::before,.det-highlight-item::before,
.svc3-card::before{background:var(--stone)}

/* ═══ One brown for every hover fill ════════════════════════════
   The jump-bar tab, the highlight icon, the lifestyle icon and the
   card CTAs were each landing on a slightly different dark tone.
   Pin them all to the same espresso so the page reads as one theme. */
:root{ --hover-brown:#4A3B2C; }

.det-jump a:hover,
.det-jump a.on:hover,
.det-highlight-item:hover .det-hl-icon,
.lx-card:hover .lx-icon,
.prop-card:hover .prop-spec .spec-ico,
.det-ncat.active{
  background:var(--hover-brown)!important;
  border-color:var(--hover-brown)!important;
  color:#fff!important}

.prop-card:hover .prop-spec .spec-ico{color:#fff!important}
.det-highlight-item:hover .det-hl-icon .mgi,
.lx-card:hover .lx-icon svg{color:#fff}
.det-ncat.active{color:#fff!important;border-radius:2px;padding:9px 14px!important}
.det-ncat.active::after{display:none}

/* ═══ Sidebar brochure card ═════════════════════════════════════
   Sits with Khun May's contact accordions, in the same brown family
   so it reads as part of that panel rather than a separate banner. */
.sid-brochure{margin-top:18px;padding:22px 20px 20px;
  background:var(--ivory);border:1px solid var(--line);border-radius:2px}
.sid-brochure-top{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.sid-brochure-ico{width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(154,132,103,.4);color:var(--stone);
  transition:background .3s,color .3s,border-color .3s}
.sid-brochure-ico svg{width:18px;height:18px}
.sid-brochure:hover .sid-brochure-ico{background:var(--hover-brown);color:#fff;
  border-color:var(--hover-brown)}
.sid-brochure-lbl{font-family:var(--font-body);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;color:var(--stone);margin-bottom:3px}
.sid-brochure-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;
  font-weight:400;color:var(--black);line-height:1.1}
.sid-brochure-sub{font-family:var(--font-body);font-size:12.5px;line-height:1.7;
  color:var(--mid);margin:0 0 16px}
.sid-brochure-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;cursor:pointer;border:none;border-radius:2px;
  background:var(--black)!important;color:#fff!important;
  font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;padding:14px 20px;transition:background .25s}
.sid-brochure-btn svg{width:15px;height:15px}
.sid-brochure-btn:hover{background:var(--hover-brown)!important}
.sid-brochure-btn:disabled{opacity:.6;cursor:default}
@media print{ .sid-brochure{display:none!important} }

/* ═══ Gallery thumbnails — softer interaction ═══════════════════
   The active thumb had a hard 2px black outline sitting inside the
   image. Replaced with a gentle zoom, a lift and a thin taupe
   underline, which reads as selection without cutting into the photo. */
.det-thumb{position:relative;overflow:hidden;border-radius:2px;
  opacity:.62;transform:translateY(0);
  transition:opacity .35s ease,transform .45s cubic-bezier(.25,.46,.45,.94),box-shadow .35s ease}
.det-thumb::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--stone);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.det-thumb:hover{opacity:1;transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(51,41,31,.18)}
.det-thumb.active{opacity:1;outline:none!important;
  box-shadow:0 8px 18px rgba(51,41,31,.14)}
.det-thumb.active::after{transform:scaleX(1)}

/* main gallery image: slow zoom on hover instead of a border */
.det-gallery-main{overflow:hidden}
.det-gallery-main img,.det-gallery-main{transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.det-gallery:hover .det-gallery-main img{transform:scale(1.03)}

/* ═══════════════════════════════════════════════════════════════
   HOME MOTION — matched to tytasset.com
   That site uses no animation library: a slow 18s Ken Burns zoom on
   hero media, and a short rise-and-fade on cards as they enter view.
   Same approach here, so nothing extra has to load.
   ═══════════════════════════════════════════════════════════════ */
@keyframes mg-slow-zoom{ 0%{transform:scale(1)} 100%{transform:scale(1.08)} }
@keyframes mg-rise-in{ 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)} }

/* hero video / image drifts slowly, reversing rather than snapping back */
#hero video,#hero .hero-visual img{
  animation:mg-slow-zoom 18s ease-in-out infinite alternate;
  will-change:transform}

/* reveal on scroll */
.mg-reveal{opacity:0;transform:translateY(10px)}
.mg-reveal.mg-in{animation:mg-rise-in .55s cubic-bezier(.22,1,.36,1) both}

@media (prefers-reduced-motion: reduce){
  #hero video,#hero .hero-visual img{animation:none}
  .mg-reveal,.mg-reveal.mg-in{opacity:1;transform:none;animation:none}
}

/* ═══ Airy line icons + sqm units ═══════════════════════════════
   Solid glyphs read heavy against thin Cormorant headings. Hairline
   strokes sit better and let the photography lead. */
.spec-ico,.det-spec-ico svg,.mgi,.lx-icon svg,.sid-brochure-ico svg{
  stroke-width:1.1;fill:none}
.prop-spec .spec-ico{background:none!important;padding:0!important;
  width:16px!important;height:16px!important;color:var(--stone)!important}
.prop-card:hover .prop-spec .spec-ico{background:none!important;color:var(--black)!important}
.det-spec-ico svg{width:17px;height:17px;color:var(--stone)}

/* unit chip that follows the number */
.spec-unit,.det-spec-unit{font-family:var(--font-body);font-weight:500;
  color:var(--stone);margin-left:2px}
.spec-unit{font-size:9.5px}
.det-spec-unit{font-size:10.5px}

/* brochure card icon — lighter ring, thinner glyph */
.sid-brochure-ico{border-color:rgba(154,132,103,.3)}
.sid-brochure-ico svg{width:19px;height:19px;stroke-width:1.1}
.sid-brochure-btn svg{stroke-width:1.2;width:16px;height:16px}

/* ═══ Specs row on phones ═══════════════════════════════════════
   Four values (Beds / Baths / Build / Plot) plus units overflowed a
   375px screen and needed a sideways scroll. Wrap into a 2x2 grid and
   trim the padding so the whole set is visible at a glance. */
@media(max-width:560px){
  .det-specs-row{display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:12px 0!important;padding:2px 0 18px!important}
  .det-spec{padding:0!important;justify-content:flex-start;gap:8px!important}
  .det-spec+.det-spec::before{display:none!important}
  .det-spec-ico svg{width:15px;height:15px}
  .det-spec-val{font-size:14px!important}
  .det-spec-unit{font-size:10px!important}
  .det-spec-lbl{font-size:9px!important;letter-spacing:.12em!important}

  /* property cards in the grid */
  .prop-card-specs{display:flex!important;flex-wrap:wrap!important;gap:2px 0!important}
  .prop-spec{padding:0 10px!important;gap:6px!important}
  .prop-spec:first-child{padding-left:0!important}
  .spec-num{font-size:12.5px!important}
  .spec-unit{font-size:9px!important}
  .spec-lbl{font-size:8px!important;letter-spacing:.1em!important}
}
@media(max-width:400px){
  .prop-spec{padding:0 8px!important}
  .spec-lbl{display:none}     /* keep number + unit, drop the word */
}

/* ═══ KEY HIGHLIGHTS — compact list ═════════════════════════════
   Tall bordered cards stacked one per row ate most of a screen for
   four short facts. Reflow as a two-up grid of tight rows: icon left,
   label + line of copy right. Same information, roughly a third of
   the height, and the eye can scan all four at once. */
.det-highlights{display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr))!important;
  gap:0 34px!important}

.det-highlight-item{display:grid!important;
  grid-template-columns:34px 1fr!important;
  align-items:start!important;gap:0 14px!important;
  padding:15px 0!important;background:none!important;
  border:none!important;border-top:1px solid rgba(51,41,31,.09)!important;
  border-radius:0!important;box-shadow:none!important;transform:none!important}
.det-highlight-item::before{display:none!important}
.det-highlight-item:hover{transform:none!important;box-shadow:none!important}

/* icon: no ring, just the glyph */
.det-hl-icon{width:34px!important;height:34px!important;margin:0!important;
  border:none!important;background:none!important;color:var(--stone)!important;
  justify-content:flex-start!important;padding-top:1px}
.det-hl-icon .mgi{width:19px;height:19px}
.det-highlight-item:hover .det-hl-icon{background:none!important;
  color:var(--black)!important;border:none!important}

.det-hl-label{grid-column:2;font-size:9.5px!important;letter-spacing:.18em!important;
  margin-bottom:4px!important}
.det-hl-text{grid-column:2;font-size:15px!important;line-height:1.5!important}

@media(max-width:640px){
  .det-highlights{grid-template-columns:1fr!important;gap:0!important}
  .det-highlight-item{padding:13px 0!important;grid-template-columns:28px 1fr!important;gap:0 11px!important}
  .det-hl-icon{width:28px!important;height:28px!important}
  .det-hl-icon .mgi{width:17px;height:17px}
  .det-hl-text{font-size:14px!important}
}

/* two columns need to fit inside the 1180px column minus its padding —
   310px was just wide enough to force a single column on laptops */
.det-highlights{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important;
  gap:0 30px!important}

/* ═══ Key Highlights — final cleanup ════════════════════════════
   An earlier rule (#detHighlightsSection .det-highlight-item) still
   painted a white card behind each row. Rows should sit directly on
   the page ground with only a hairline between them. */
#detHighlightsSection .det-highlight-item,
.det-highlight-item{background:transparent!important;background-color:transparent!important;
  border:none!important;border-top:1px solid rgba(51,41,31,.09)!important;
  box-shadow:none!important;border-radius:0!important}
#detHighlightsSection .det-highlight-item:hover,
.det-highlight-item:hover{background:transparent!important;box-shadow:none!important;
  border-color:rgba(51,41,31,.09)!important}
#detHighlightsSection .det-hl-icon{border:none!important;background:none!important}

/* two columns from ~1000px up, single column below */
.det-highlights{grid-template-columns:1fr!important;gap:0!important}
@media(min-width:1000px){
  .det-highlights{grid-template-columns:1fr 1fr!important;gap:0 40px!important}
}

/* ═══ Beds / Baths / Build / Plot — one consistent row ══════════ */
.det-specs-row{display:flex!important;flex-wrap:wrap;align-items:center;
  gap:0!important;padding:4px 0 20px!important}
.det-spec{display:inline-flex;align-items:center;gap:8px!important;
  padding:0 18px!important;position:relative;background:none!important;border:none!important}
.det-spec:first-child{padding-left:0!important}
.det-spec+.det-spec::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:14px;background:rgba(51,41,31,.13);display:block}
.det-spec-ico{background:none!important;border:none!important;padding:0!important;
  width:17px!important;height:17px!important}
.det-spec-ico svg{width:17px;height:17px;color:var(--stone);stroke-width:1.1}
.det-spec-val{font-family:var(--font-body);font-size:15px;font-weight:700;
  color:var(--black);font-variant-numeric:lining-nums tabular-nums}
.det-spec-unit{font-size:10.5px;color:var(--stone);margin-left:1px}
.det-spec-lbl{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:rgba(51,41,31,.42);margin-left:3px}

@media(max-width:560px){
  .det-specs-row{display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:12px 0!important;padding:2px 0 18px!important}
  .det-spec{padding:0!important}
  .det-spec+.det-spec::before{display:none!important}
}

/* full words need a touch more room than Bed / Bath did */
.det-spec{padding:0 15px!important}
.det-spec-lbl{white-space:nowrap}
.prop-spec{padding:0 11px!important}
.spec-lbl{white-space:nowrap}
@media(max-width:900px){
  .det-spec{padding:0 12px!important}
  .det-spec-lbl,.spec-lbl{font-size:9px!important;letter-spacing:.1em!important}
}
@media(max-width:560px){
  .det-spec{padding:0!important}
  .spec-lbl{display:inline!important;font-size:8px!important}
  .prop-spec{padding:0 8px!important}
}

/* ═══ Price colour ══════════════════════════════════════════════
   Price sat in the same espresso as every heading and paragraph, so
   the single most important number on the page had nothing setting it
   apart. A warm bronze keeps it inside the brown family but reads as
   the accent it should be. */
:root{ --price:#8A6534; }

.det-inline-price-main,
.prop-card-price,
.card-price,.p-price,
.inv-card-price,
.det-price-main,.det-price-value,
.rent-det-price{
  color:var(--price)!important;
  font-weight:600!important;
  letter-spacing:-.01em}

/* on dark card overlays the bronze needs lifting to stay legible */
.inv-card-price,.det-sim-card .det-sim-price{
  color:#D8B27A!important}
.prop-card-over .prop-card-price{color:#D8B27A!important}

/* keep the label and the USD line quiet so the number leads */
.det-inline-price-lbl{color:rgba(51,41,31,.42)!important}
.det-inline-price-usd{color:rgba(51,41,31,.4)!important;font-weight:400!important}

/* ═══ Card price alignment ══════════════════════════════════════
   The footer centred its children, so the larger price sat ~5px lower
   than the VIEW link beside it and looked dropped. Align on the text
   baseline instead and let the number keep its own size. */
.prop-card-footer,.card-footer{align-items:baseline!important}
.prop-card-price,.card-price,.p-price{line-height:1.15!important;
  display:inline-block;transform:none!important}
.prop-card-view,.card-view{align-self:baseline}

/* ═══ Price must never break ════════════════════════════════════
   "฿ 20,000,000" was wrapping after the baht sign because the price
   sits in a flex row next to the location and had room to break. */
.inv-card-price,.prop-card-price,.card-price,.p-price,
.det-inline-price-main,.det-sim-price,.rent-det-price{
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important}

/* the row holding price + location: let the location shrink, never the price */
.inv-card-footer,.prop-card-footer,.card-footer,.det-sim-footer{
  flex-wrap:nowrap!important;gap:12px}
.inv-card-price,.prop-card-price{flex:0 0 auto!important;min-width:0}
.inv-card-loc,.prop-card-loc,.card-loc{flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:560px){
  .inv-card-price,.prop-card-price{font-size:16px!important}
}

/* slider card price: bronze on the dark overlay, never wrapping */
.inv-card .inv-card-price{color:#D8B27A!important;white-space:nowrap!important}
.inv-card .inv-card-price + span,
.inv-card [style*="letter-spacing:0.15em"]{flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ Card footer — price left, location hard right ═════════════
   The location sat immediately after the price and crowded it. Push
   it to the far edge and give the pair a real gap. */
.inv-card-footer,.prop-card-footer,.card-footer,.det-sim-footer{
  display:flex!important;justify-content:space-between!important;
  align-items:baseline!important;gap:18px!important;width:100%}
.inv-card-price,.prop-card-price,.card-price{margin-right:auto}
.inv-card-loc,.prop-card-loc,.card-loc,
.inv-card-footer > span:last-child,
.prop-card-footer > span:last-child{
  margin-left:auto!important;text-align:right!important;
  flex:0 1 auto!important;max-width:52%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){
  .inv-card-footer,.prop-card-footer{gap:12px!important}
  .inv-card-loc,.prop-card-loc,.inv-card-footer > span:last-child{max-width:46%}
}

/* location text pinned to the right edge, with breathing room from
   the price — the two used to butt straight up against each other */
.inv-card-loc,.det-sim-loc{text-align:right!important;margin-left:auto!important;
  padding-left:20px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* nearby category buttons: glyph + label */
.det-ncat{display:inline-flex!important;align-items:center;gap:7px}
.det-ncat .mgi{width:14px;height:14px;opacity:.75;flex-shrink:0}
.det-ncat.active .mgi{opacity:1}
@media(max-width:560px){ .det-ncat .mgi{width:13px;height:13px} }

/* ═══ No duplicate MGROUP bar, no ✕ ═════════════════════════════
   The detail panel still carries the overlay-era topbar (its own logo
   plus share / heart / close). Property detail is a real page now, so
   that bar duplicates the site nav wherever it appears. */
.det-topbar{display:none!important}
.det-close,.det-topbar-close,.det-icon-btn,
.overlay-close-btn{display:none!important}

/* ═══ Nearby buttons — make sure the glyph shows ════════════════ */
.det-ncat{display:inline-flex!important;align-items:center!important;gap:7px!important}
.det-ncat svg{width:14px!important;height:14px!important;flex-shrink:0;
  display:inline-block!important;opacity:.8;stroke-width:1.2}
.det-ncat.active svg{opacity:1}
.det-ncat > span{display:inline-block}

/* row icons too */
.det-near{display:flex;align-items:center;gap:10px;justify-content:space-between}
.det-near-name{display:inline-flex;align-items:center;gap:9px}
.det-near-name svg{width:14px;height:14px;color:var(--stone);flex-shrink:0}

/* ═══ Similar Properties = same card as the home slider ═════════
   Both are image cards with an overlay block; they had drifted apart
   in name size, spec size and price weight. Match them exactly. */
.det-sim-name,.inv-card-name{
  font-family:'Cormorant Garamond',Georgia,serif!important;
  font-size:clamp(19px,2.1vw,26px)!important;font-weight:400!important;
  line-height:1.15!important;color:#fff!important;letter-spacing:0!important}
.det-sim-coll,.inv-card-coll{
  font-family:var(--font-body)!important;font-size:8.5px!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  color:rgba(255,255,255,.55)!important;margin-bottom:5px!important}
.det-sim-card .inv-card-price,.inv-card .inv-card-price{
  font-size:20px!important;font-weight:600!important;color:#D8B27A!important;
  white-space:nowrap!important}
.det-sim-loc,.inv-card-loc{
  font-size:8.5px!important;letter-spacing:.18em!important;
  color:rgba(255,255,255,.55)!important;text-align:right!important;
  margin-left:auto!important;padding-left:20px;max-width:55%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* spec row inside both cards */
.det-sim-over [style*="display:flex"] svg,
.inv-card-over [style*="display:flex"] svg{width:14px;height:14px}

/* card shell: same ratio, radius and hover lift */
.det-sim-card,.inv-card{border-radius:2px;overflow:hidden;position:relative}
.det-sim-card{transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s}
.det-sim-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(51,41,31,.2)}

/* ═══ SIMILAR PROPERTIES — arrows over the rail ═════════════════
   Buttons used to sit in the header, far from what they controlled,
   and the cards were clipped at the left edge of the scroller. Float
   the arrows over the images and give the rail proper padding so a
   card is never cut. */
.det-similar{position:relative}
.det-similar-lbl{margin-bottom:18px!important}

.det-sim-shell{position:relative}
.det-sim-scroll{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;padding:6px 4px 10px!important;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.det-sim-scroll::-webkit-scrollbar{display:none}

.det-sim-card{flex:0 0 clamp(260px,32vw,380px)!important;scroll-snap-align:start;
  aspect-ratio:3/4;position:relative}

.det-sim-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.94)!important;border:1px solid rgba(51,41,31,.1)!important;
  color:var(--black)!important;font-size:23px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(51,41,31,.16);
  transition:background .25s,transform .25s,opacity .25s}
.det-sim-arrow:hover{background:#fff!important;transform:translateY(-50%) scale(1.08)}
.det-sim-arrow--prev{left:10px}
.det-sim-arrow--next{right:10px}
.det-sim-arrow[disabled]{opacity:.25;cursor:default}

@media(max-width:640px){
  .det-sim-arrow{width:38px;height:38px;font-size:19px}
  .det-sim-arrow--prev{left:4px}.det-sim-arrow--next{right:4px}
  .det-sim-card{flex-basis:78vw!important}
  .det-sim-scroll{gap:12px}
}

/* ═══ SECTION JUMP — one dropdown instead of an overflowing row ═══ */
.det-jump-inner{display:block!important;overflow:visible!important;padding:10px 24px!important}
.det-dd{position:relative;display:inline-block;min-width:288px}

/* The cream pill read as a box floating on the white bar. No fill at
   all now — it sits on the bar — and it borrows the section heading's
   Cormorant so the control and the title it points at speak the same
   voice. */
.det-dd-btn{display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 4px;background:transparent;border:0;border-radius:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  color:var(--ink,#33291F);cursor:pointer;text-align:left;
  transition:color .22s,opacity .22s}
.det-dd-btn:hover{background:transparent;color:var(--hover-brown,#4A3B2C)}
.det-dd-cur{font-family:'Cormorant Garamond',Georgia,serif!important;
  font-size:clamp(18px,2vw,23px)!important;font-weight:400!important;
  letter-spacing:.02em!important;text-transform:uppercase!important}
.det-dd-chev{opacity:.5}
.det-dd-cur{flex:1 1 auto;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.det-dd-chev{flex:0 0 auto;opacity:.65;transition:transform .25s}
.det-jump-inner.open .det-dd-chev{transform:rotate(180deg)}

.det-dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--ivory,#F7F3ED);border:1px solid rgba(51,41,31,.14);border-radius:3px;
  box-shadow:0 18px 44px rgba(51,41,31,.16);
  padding:5px;max-height:62vh;overflow-y:auto;
  display:none}
.det-jump-inner.open .det-dd-menu{display:block;animation:ddIn .18s ease-out both}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.det-dd-item{display:block;width:100%;padding:11px 13px;background:none;border:0;border-radius:2px;
  font-family:var(--font-body);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(51,41,31,.72);text-align:left;cursor:pointer;
  transition:background .2s,color .2s}
.det-dd-item:hover{background:var(--hover-brown,#4A3B2C);color:#fff}
.det-dd-item.on{color:var(--ink,#33291F);font-weight:600}
.det-dd-item.on:hover{color:#fff}

@media(max-width:640px){
  .det-jump-inner{padding:9px 14px!important}
  .det-dd{display:block;min-width:0;width:100%}
  .det-dd-btn{padding:10px 13px}
  .det-dd-cur{font-size:10.5px}
}

/* The sticky section bar was sticking to nothing: .det-panel carried
   `overflow-x:hidden`, which per spec forces overflow-y to `auto` and
   turns the panel into the sticky element's scrollport — one that never
   scrolls. `clip` bounds the x axis without creating a scroll box, so
   the bar now sticks to the viewport like it always should have. */
.det-panel{overflow:visible!important;overflow-x:clip!important}

/* ═══ DESCRIPTION BLOCKS — photos & video inside the copy ═══════ */
.det-desc p{margin:0 0 15px}
.det-desc p:last-child{margin-bottom:0}
.det-desc-fig{margin:26px 0;padding:0}
.det-desc-fig:last-child{margin-bottom:0}
.det-desc-fig img{display:block;width:100%;height:auto;border-radius:3px}
.det-desc-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:3px;overflow:hidden;
  background:var(--ivory,#F7F3ED)}
.det-desc-video iframe,.det-desc-video video{position:absolute;inset:0;width:100%;height:100%;border:0;
  object-fit:cover}
.det-desc-cap{margin-top:9px;font-family:var(--font-body);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stone,#9A8467)}

/* ═══ FOOTER — the rule and the padding were stranded at the bottom ═══
   .footer-bottom sits inside .footer-top, so .footer-top's border and
   48px padding landed *below* the last content instead of between the
   columns and the copyright row: ~96px of empty dark space, most
   obvious on a phone. Move the divider to where it belongs. */
.footer-top{padding-bottom:0!important;border-bottom:0!important}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:24px}
footer{padding-bottom:26px!important}
@media(max-width:640px){
  footer{padding:34px 22px 20px!important}
  .footer-bottom{margin-top:26px;padding-top:20px}
}

/* ═══ SIMILAR CARDS — no dead black band under the photo ═══════════
   The image had a fixed 380px height inside a card sized by
   aspect-ratio, so the card's own near-black background showed through
   below it; the scrim on top of it then ran to 90% opacity, which
   swallowed the bottom third of the picture. */
.det-sim-img{height:100%!important;min-height:0}
.det-sim-img-overlay{background:linear-gradient(to top,
  rgba(0,0,0,.78) 0%, rgba(0,0,0,.44) 24%, rgba(0,0,0,.12) 46%, transparent 64%)!important}

/* ═══ PAGE ENTRANCE — the same motion language as the home hero ═════
   Every page opens the way tytasset.com does: a 10px rise-and-fade on
   cubic-bezier(.22,1,.36,1), stepped ~90ms apart so the header
   assembles rather than appearing all at once. Same timing function and
   distance that site uses, and like it, no animation library.

   `html.mg-entered` (set by a timer in app.js) switches the whole thing
   off a couple of seconds in. That is the safety net: this page has
   been blanked before by a reveal system whose JS failed to arm, and
   the net can only ever make content visible, never hide it. */
@keyframes mg-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

#hero .hero-content > *,
.hub-hero-inner > *,
.pg-hero > *,
.proc-hero > *,
.ins-hero > *{
  animation:mg-enter 1.15s cubic-bezier(.22,1,.36,1) both}

/* The album is the first thing anyone came to see — it paints as soon
   as the photo is there, with no entrance of its own. */
.det-gallery{animation:none!important;opacity:1!important;transform:none!important}

#hero .hero-content > *:nth-child(2),
.hub-hero-inner > *:nth-child(2),
.pg-hero > *:nth-child(2),
.proc-hero > *:nth-child(2),
.ins-hero > *:nth-child(2){animation-delay:.20s}

#hero .hero-content > *:nth-child(3),
.hub-hero-inner > *:nth-child(3),
.pg-hero > *:nth-child(3),
.proc-hero > *:nth-child(3),
.ins-hero > *:nth-child(3){animation-delay:.40s}

#hero .hero-content > *:nth-child(n+4),
.hub-hero-inner > *:nth-child(n+4),
.pg-hero > *:nth-child(n+4),
.proc-hero > *:nth-child(n+4),
.ins-hero > *:nth-child(n+4){animation-delay:.58s}

/* the bar settles in first, without shifting the page under it */
nav,#mainNav,.det-topbar{animation:mg-fade-in .9s ease-out both}
@keyframes mg-fade-in{from{opacity:0}to{opacity:1}}

/* hero stills drift like the home video does */
.hub-hero-bg,.pg-hero-bg,.proc-hero-bg,.ins-hero-bg,.det-gallery-main{
  animation:mg-slow-zoom 20s ease-in-out infinite alternate;will-change:transform}

html.mg-entered #hero .hero-content > *,
html.mg-entered .hub-hero-inner > *,
html.mg-entered .pg-hero > *,
html.mg-entered .proc-hero > *,
html.mg-entered .ins-hero > *,
html.mg-entered .det-gallery,
html.mg-entered nav,html.mg-entered #mainNav,html.mg-entered .det-topbar{
  animation:none!important;opacity:1!important;transform:none!important}

@media (prefers-reduced-motion: reduce){
  #hero .hero-content > *,.hub-hero-inner > *,.pg-hero > *,.proc-hero > *,
  .ins-hero > *,.det-gallery,nav,#mainNav,.det-topbar{
    animation:none!important;opacity:1!important;transform:none!important}
  .hub-hero-bg,.pg-hero-bg,.proc-hero-bg,.ins-hero-bg,.det-gallery-main{animation:none}
}

/* ═══ FOOTER — centre the Follow Us block on narrow screens ═══════ */
.footer-bottom{grid-column:1/-1}
@media(max-width:900px){
  .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:18px}
  .footer-follow{align-items:center}
  .footer-follow-lbl{text-align:center}
  .footer-socials{justify-content:center}
}

/* ═══ No dead strip under the footer ══════════════════════════════
   Two mobile rules reserved 58px at the bottom of <body> for
   .mob-bottom-nav — the old single-file app's fixed bottom bar. The
   split site never renders that element, so all the padding did was
   show the cream page background below the brown footer. */
@media screen and (max-width:768px){
  body{padding-bottom:0!important}
}

/* The company line read as a heading against its own address. Same
   weight, size and colour as the address now — it is one block. */
.footer-org-name{font-size:13px!important;font-weight:400!important;
  letter-spacing:.06em!important;line-height:1.85!important;
  color:rgba(255,255,255,.55)!important;margin-bottom:2px!important}

/* ═══ FOOTER — tidy the copyright / policy line ═══════════════════
   The two policy links were flex-packed left while the copyright above
   them centred, so on a phone the block sat crooked. They also floated
   as two loose words with only a gap between them; a middot reads as
   one line of fine print. */
.footer-legal{gap:0!important;align-items:baseline;margin-top:7px!important;
  letter-spacing:.1em}
.footer-legal a{letter-spacing:.1em}
.footer-legal a + a::before{content:'·';display:inline-block;
  margin:0 9px;color:rgba(255,255,255,.28)}

@media(max-width:900px){
  .footer-bottom > div:first-child{text-align:center;width:100%}
  .footer-legal{justify-content:center}
}

/* ═══ FOOTER — Menu and Destinations share a row on phones ════════
   Below 560px the grid collapsed to one column, so six menu links and
   three destinations stacked into ~270px of near-empty footer. They sit
   side by side now; the company block and the copyright row still span
   the full width. */
@media(max-width:560px){
  .footer-top{grid-template-columns:1fr 1fr!important;gap:26px 20px!important}
  .footer-top > div:first-child,.footer-bottom{grid-column:1/-1}
  .footer-col-title{margin-bottom:12px}
  .footer-col a{margin-bottom:8px}
}

/* ═══ FOOTER — Menu and Destinations share a row on phones ════════
   Below 560px the grid collapsed to one column, so six menu links and
   three destinations stacked into ~270px of near-empty footer. They sit
   side by side now; the company block and the copyright row still span
   the full width. */
@media(max-width:560px){
  .footer-top{grid-template-columns:1fr 1fr!important;gap:26px 20px!important}
  .footer-top > div:first-child,.footer-bottom{grid-column:1/-1}
  .footer-col-title{margin-bottom:12px}
  .footer-col a{margin-bottom:8px}
}

/* ═══ NAV — solid once you scroll off the hero ════════════════════
   A later `nav { background: linear-gradient(...) !important }` was
   beating nav.scrolled's own background, so the bar stayed fully
   transparent at every scroll position. With backdrop-filter:blur on
   top of that, the page smeared up through the bar and the header read
   as two things stacked on each other. The gradient is right over the
   hero video; past it the bar needs a real surface. */
nav.scrolled{
  background:#33291F!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-bottom:1px solid rgba(255,255,255,.07)}

/* ═══ Service card label — readable without a haze over the photo ═══
   The label sat directly on the photograph with an underline running
   through it. On the Buy Properties shot the sea horizon lands at the
   same height, so the two lines read as text overlapping text. A shadow
   lifts the label off any background without dimming the image, which
   was removed on purpose. */
.svc3-name{
  text-shadow:0 1px 16px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.45);
  text-underline-offset:7px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.55)}

/* ═══ Hero buttons + service labels: white only on hover ══════════
   Both hero buttons now sit transparent over the video and fill white
   on hover, so the pair reads as one set instead of one solid and one
   outline. The service labels get the same treatment — which also
   settles the readability problem, since the white bar separates the
   text from the photograph without dimming the image. */
.btn-hero-primary,.btn-hero-ghost{
  background:transparent!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.45)!important;
  transition:background .3s,color .3s,border-color .3s,transform .3s}
.btn-hero-primary:hover,.btn-hero-ghost:hover,
.btn-hero-primary:focus-visible,.btn-hero-ghost:focus-visible{
  background:#fff!important;color:var(--ink,#33291F)!important;
  border-color:#fff!important;transform:translateY(-1px)}

.svc3-name{
  display:inline-block!important;padding:9px 20px;border-radius:2px;
  width:auto!important;
  background:transparent;text-decoration:none!important;
  transition:background .32s ease,color .32s ease}
.svc3-card:hover .svc3-name,.svc3-card:focus-visible .svc3-name{
  background:var(--hover-brown,#4A3B2C);color:#fff;text-shadow:none}

/* ═══ Services carousel: keep the arrows on phones ════════════════
   They were hidden below 760px, which is where they are needed most —
   a touch rail gives no hint that there is more to the right. Same
   floating circles as the Similar Properties rail, just smaller. */
@media(max-width:760px){
  .svc3-arrow{display:flex!important;width:38px;height:38px;font-size:19px}
  .svc3-prev{left:6px}
  .svc3-next{right:6px}
}
.svc3-arrow[disabled]{opacity:.25;cursor:default}

/* ═══ No see-through blurred layers anywhere ══════════════════════
   A translucent bar with backdrop-filter shows a blurred ghost of the
   page underneath it. On a phone that reads as a second background
   stacked on the first, which is exactly what was reported. Every bar
   that sits over content is opaque now. */
nav,nav.scrolled,.det-jump,.det-topbar,.mobile-nav,#mobileNav{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ═══ Closed overlays must not paint at all ═══════════════════════
   .video-lightbox and .book-overlay are full-screen fixed layers that
   were "closed" with opacity:0 alone, while keeping a dark background
   and, on the booking one, backdrop-filter:blur(8px). Safari on iOS
   still rasterises a backdrop-filter on a fully transparent element,
   so an invisible sheet was blurring the whole page — a second
   background stacked over the first, on every screen, permanently.
   Closed now means display:none: nothing to composite, nothing to
   stack. Opening still works; the .open rules below restore display. */
/* .det-overlay is deliberately NOT in this list: on the property page
   it is the page itself, and cleanup code strips its `open` class —
   hiding it would blank the whole listing. It is opaque anyway. */
.video-lightbox:not(.open),
.book-overlay:not(.open),
#mobileNavOverlay:not(.open){
  display:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.video-lightbox.open,.book-overlay.open{display:flex!important}

/* Viewing / enquiry failures have to look like failures, not like the
   success message they replaced. */
.sid-summary--err,.sid-sent--err{
  background:rgba(160,60,45,.08)!important;
  border:1px solid rgba(160,60,45,.28)!important;
  color:#8A3B2C!important}
#sidAcc1 .sid-inp{margin-top:8px}

/* ═══ Location & Nearby — three tidy columns ══════════════════════
   The icon sits inside the name span, so it never formed a column, and
   the distances were only right-aligned: "1.5 km" started 8px left of
   "2 km", so the numbers read as a ragged edge rather than a list.
   Fixed icon slot, one text start, and a distance column with tabular
   figures so the digits line up under each other. */
#detNearby .det-near{
  display:flex;align-items:center;gap:12px;
  padding:9px 2px;border-bottom:1px solid rgba(51,41,31,.07)}
#detNearby .det-near:last-child{border-bottom:0}

#detNearby .det-near-name{
  display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0}
#detNearby .det-near-name svg,#detNearby .det-near-name .mgi{
  flex:0 0 16px;width:16px;height:16px;opacity:.62}

#detNearby .det-near-dist{
  flex:0 0 auto;min-width:58px;text-align:right;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:.04em;white-space:nowrap}

/* The jump bar was white while the page around it is the warm off-white
   --page, so the strip stood out as a band across the top of the
   sections. Same ground as the page now — only its hairline separates
   it, and it still hides content passing underneath because it is
   opaque. */
.det-jump{background:var(--page,#FCFAF7)!important}

/* ═══ Sections rise as you scroll to them ═════════════════════════
   Driven by a scroll listener, not IntersectionObserver: the observer
   is the one thing on this page that fails silently, and it already
   took the section scrollspy down with it once.

   The hidden state is scoped to html.mg-sr, which only JS ever adds. If
   the script never runs, nothing is hidden — a page cannot be blanked
   by this. */
/* !important is required, not decorative: these sections still carry
   the old .mg-reveal.mg-in classes, whose rule is an `animation`, and a
   running or filling animation beats any ordinary declaration. Once
   .mg-shown lands the :not() stops matching, so nothing fights. */
html.mg-sr .det-open-section:not(.mg-shown){
  opacity:0!important;transform:translateY(20px)!important;animation:none!important}
html.mg-sr .det-open-section.mg-shown{
  opacity:1;transform:none;animation:none!important;
  transition:opacity .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion: reduce){
  html.mg-sr .det-open-section{opacity:1;transform:none;transition:none}
}

/* ═══ Paragraph rhythm ════════════════════════════════════════════
   Body copy had drifted into seven different paragraph gaps — 10, 20,
   22, 26, 28 and 34px, plus blocks that spaced themselves with
   margin-top instead — and several paragraphs were left on the default
   `normal` line-height, about 1.2, so they read as cramped next to the
   1.8 used everywhere else.

   One scale now:
     14px  between paragraphs of running text
     20px  under a block of copy inside a card
     34px  between numbered steps, which separate ideas rather than
           paragraphs, so they keep their larger gap
   Line-height is 1.8 for body copy and 1.7 for fine print. */

p{line-height:1.8}
p + p{margin-top:14px}

.det-desc p,.ct-body p,.ins-body p{margin:0 0 14px}
.det-desc p:last-child,.ins-body p:last-child{margin-bottom:0}

/* card copy: one gap, not 20 / 22 / 26 */
.lx-desc,.ins-article-excerpt,.ins-art-excerpt,.cs-modal-desc{margin-bottom:20px!important}
.cs-modal-desc{line-height:1.8!important}

/* the how-to-buy column read a touch looser than the rest */
.proc-hero-sub,.proc-body{line-height:1.8!important}

/* fine print stays tighter than body copy, but never `normal` */
.enq-terms,.ct-note,.footer-copy,.det-near-dist,.sid-note{line-height:1.7}

/* The last four strays, found by measuring the live pages rather than
   reading the stylesheet: a confirmation note at 28px, the mortgage
   disclaimer at 1.75, the property description at 1.9, and the brochure
   sub-line at 16px. */
.ct-ok p{margin-bottom:20px}
.calc-disclaimer{line-height:1.7}
.det-desc,.det-desc p{line-height:1.8!important}
.sid-brochure-sub{margin-bottom:14px}