/* ─────────────────────────────────────────────────────────────────────────────
   PHUKET BROKERS — Main Stylesheet
   Andaman Luxury Edition · Mobile-first · Cormorant + DM Sans
───────────────────────────────────────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────────────────────────────────────── */
@font-face { font-family:'Cormorant'; src:url('/fonts/cormorant-300.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('/fonts/cormorant-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('/fonts/cormorant-400i.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('/fonts/cormorant-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('/fonts/cormorant-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'DM Sans';   src:url('/fonts/dmsans-400.woff2') format('woff2');   font-weight:400; font-display:swap; }
@font-face { font-family:'DM Sans';   src:url('/fonts/dmsans-500.woff2') format('woff2');   font-weight:500; font-display:swap; }
@font-face { font-family:'DM Sans';   src:url('/fonts/dmsans-600.woff2') format('woff2');   font-weight:600; font-display:swap; }

/* ── Design Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Palette */
  --ivory:          #FAF8F3;
  --white:          #FFFFFF;
  --sand:           #F2EDE3;
  --stone:          #E4DBCE;
  --navy:           #0B1F3A;
  --navy-mid:       #162B4E;
  --navy-deep:      #071529;
  --champagne:      #C8A96E;
  --champagne-l:    #D9BC84;
  --champagne-pale: rgba(200,169,110,0.12);
  --champagne-bd:   rgba(200,169,110,0.35);
  --jade:           #1A6B5A;
  --jade-l:         #217860;
  --jade-pale:      rgba(26,107,90,0.08);
  --jade-bd:        rgba(26,107,90,0.22);

  /* Text */
  --ink:            #1C1C1E;
  --slate:          #3D4F5C;
  --graphite:       #6E7F8D;
  --muted:          #9BADB8;

  /* Status */
  --sale-bg:  rgba(26,90,154,0.10);  --sale-fg:  #1A5A9A;
  --lease-bg: rgba(160,104,32,0.10); --lease-fg: #8B5816;
  --rent-bg:  rgba(42,120,80,0.10);  --rent-fg:  #2A7850;
  --dep-bg:   rgba(160,56,56,0.10);  --dep-fg:   #A03838;

  /* Type */
  --font-head: 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;

  /* Shape */
  --r:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:100px;

  /* Shadows */
  --sh-xs: 0 1px 3px rgba(11,31,58,0.07);
  --sh-sm: 0 2px 8px rgba(11,31,58,0.09);
  --sh:    0 4px 20px rgba(11,31,58,0.11), 0 1px 4px rgba(11,31,58,0.06);
  --sh-lg: 0 12px 40px rgba(11,31,58,0.16), 0 4px 12px rgba(11,31,58,0.08);
  --sh-card: 0 2px 10px rgba(11,31,58,0.07), 0 1px 3px rgba(11,31,58,0.04);
  --sh-card-hover: 0 14px 40px rgba(11,31,58,0.15), 0 4px 14px rgba(11,31,58,0.08);

  /* Motion */
  --t:220ms;
  --ease: cubic-bezier(.25,.46,.45,.94);

  /* Layout */
  --max-w: 1280px;
  --hh: 76px;
}

/* ── Keyframes ───────────────────────────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes slideDown{ from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes shimmer  { 0%{ background-position:-200% 0 } 100%{ background-position:200% 0 } }

/* ── Reset + Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-size-adjust:100%; scrollbar-gutter:stable; }
body { margin:0; font-family:var(--font-body); font-size:15px; line-height:1.70; background:var(--ivory); color:var(--slate); }
img  { max-width:100%; display:block; }
a    { color:var(--jade); text-decoration:none; transition:color var(--t); }
a:hover { color:var(--jade-l); }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); line-height:1.15; margin:0; color:var(--navy); }
p    { margin:0 0 1em; }
p:last-child { margin-bottom:0; }
ul,ol { margin:0; padding:0; list-style:none; }
button { cursor:pointer; font-family:var(--font-body); background:none; border:none; padding:0; }

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 var(--s4); }
@media(min-width:640px){ .container{ padding:0 var(--s6); } }
@media(min-width:1024px){ .container{ padding:0 var(--s8); } }

.section      { padding:var(--s16) 0; }
.section--alt { background:var(--sand); }
.section--bg  { background:var(--sand); }

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER & NAVIGATION
───────────────────────────────────────────────────────────────────────────── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--hh);
  background:transparent;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header.scrolled,
body:not(:has(.hero)) .site-header {
  background:rgba(250,248,243,0.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(11,31,58,0.09), 0 2px 20px rgba(11,31,58,0.06);
}

.header-inner {
  display:flex;
  align-items:center;
  height:var(--hh);
  gap:var(--s4);
}

/* Logo */
.site-logo { display:flex; text-decoration:none; flex-shrink:0; }
.site-logo-img { width:200px; height:auto; display:block; transition:width 0.3s ease; }
.site-logo-img--dark { display:none; }
.site-header.scrolled .site-logo-img--light,
body:not(:has(.hero)) .site-header .site-logo-img--light { display:none; }
.site-header.scrolled .site-logo-img--dark,
body:not(:has(.hero)) .site-header .site-logo-img--dark { display:block; }

/* ── Mobile Nav Drawer ───────── */
.site-nav {
  display:none;
  position:fixed;
  top:var(--hh);
  left:0; right:0;
  background:var(--navy-deep);
  flex-direction:column;
  gap:2px;
  padding:var(--s3) var(--s4) var(--s6);
  border-top:1px solid rgba(255,255,255,0.06);
  box-shadow:0 12px 48px rgba(11,31,58,0.35);
  animation:slideDown 180ms var(--ease) both;
  z-index:199;
}
.site-nav.open { display:flex; }

/* ── Nav links — shared ─────────── */
.nav-link {
  font-family:var(--font-body);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.72);
  padding:11px var(--s3);
  border-radius:var(--r);
  transition:color var(--t), background var(--t);
  display:block;
}
.nav-link:hover { color:#fff; background:rgba(255,255,255,0.08); }

/* Dropdown */
.nav-dropdown { position:relative; }
.nav-dropdown__trigger {
  display:flex; align-items:center; gap:5px; width:100%; justify-content:space-between;
  font-family:var(--font-body); font-size:0.78rem; font-weight:500; letter-spacing:0.10em;
  text-transform:uppercase; color:rgba(255,255,255,0.72);
  padding:11px var(--s3); border-radius:var(--r); border:none; background:none;
  cursor:pointer; transition:color var(--t),background var(--t);
}
.nav-dropdown__trigger:hover { color:#fff; background:rgba(255,255,255,0.08); }
.nav-dropdown__menu {
  display:none; flex-direction:column;
  background:rgba(255,255,255,0.05); border-radius:var(--r);
  margin-top:2px; overflow:hidden;
}
.nav-dropdown.open .nav-dropdown__menu { display:flex; }
.dropdown-item {
  display:block;
  padding:9px calc(var(--s3) + 14px);
  font-size:0.78rem;
  color:rgba(255,255,255,0.55);
  transition:color var(--t), background var(--t);
}
.dropdown-item:hover { color:#fff; background:rgba(255,255,255,0.06); }

/* Phone CTA */
.header-phone {
  display:none;
  align-items:center; gap:6px;
  font-family:var(--font-body);
  font-size:0.68rem; font-weight:600; letter-spacing:0.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.88);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:var(--r-pill);
  padding:7px 18px;
  flex-shrink:0;
  transition:all var(--t);
  text-decoration:none;
  white-space:nowrap;
}
.header-phone:hover {
  background:rgba(255,255,255,0.10);
  color:#fff;
  border-color:rgba(255,255,255,0.55);
}
.site-header.scrolled .header-phone,
body:not(:has(.hero)) .site-header .header-phone        { color:var(--jade); border-color:var(--jade-bd); }
.site-header.scrolled .header-phone:hover,
body:not(:has(.hero)) .site-header .header-phone:hover  { background:var(--jade-pale); border-color:var(--jade); color:var(--jade); }

/* Hamburger */
.hamburger {
  flex-shrink:0;
  width:40px; height:40px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:none; background:none;
  border-radius:var(--r);
  transition:background var(--t);
}
.hamburger:hover { background:rgba(255,255,255,0.10); }
.site-header.scrolled .hamburger:hover,
body:not(:has(.hero)) .site-header .hamburger:hover { background:rgba(11,31,58,0.06); }
.hamburger span {
  display:block; width:22px; height:2px;
  background:#fff; border-radius:2px;
  transition:background var(--t), transform var(--t), opacity var(--t);
}
.site-header.scrolled .hamburger span,
body:not(:has(.hero)) .site-header .hamburger span { background:var(--navy); }

/* Mobile right group: call icon + hamburger */
.header-actions {
  margin-left:auto;
  display:flex; align-items:center; gap:4px;
  flex-shrink:0;
}

/* Mobile call icon (left of hamburger, mobile only) */
.header-call-mobile {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  flex-shrink:0;
  color:#fff;
  text-decoration:none;
  transition:color var(--t);
}
.header-call-mobile:visited,
.header-call-mobile:hover,
.header-call-mobile:focus,
.header-call-mobile:active { color:#fff; }
.site-header.scrolled .header-call-mobile,
.site-header.scrolled .header-call-mobile:visited,
.site-header.scrolled .header-call-mobile:hover,
.site-header.scrolled .header-call-mobile:focus,
.site-header.scrolled .header-call-mobile:active,
body:not(:has(.hero)) .site-header .header-call-mobile,
body:not(:has(.hero)) .site-header .header-call-mobile:visited,
body:not(:has(.hero)) .site-header .header-call-mobile:hover,
body:not(:has(.hero)) .site-header .header-call-mobile:focus,
body:not(:has(.hero)) .site-header .header-call-mobile:active { color:var(--navy); }

/* ── Desktop Nav (≥900px) ─────── */
@media(min-width:900px){
  .site-nav {
    display:flex !important;
    position:static;
    flex-direction:row;
    align-items:center;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    gap:0;
    animation:none;
    margin-left:auto;
    z-index:auto;
  }
  .nav-link {
    color:rgba(255,255,255,0.78);
    padding:8px 14px;
    white-space:nowrap;
  }
  .nav-link:hover { color:#fff; background:rgba(255,255,255,0.09); }
  .site-header.scrolled .nav-link,
  body:not(:has(.hero)) .site-header .nav-link       { color:var(--slate); }
  .site-header.scrolled .nav-link:hover,
  body:not(:has(.hero)) .site-header .nav-link:hover { color:var(--navy); background:rgba(11,31,58,0.06); }

  .nav-dropdown__trigger {
    padding:8px 14px; width:auto; justify-content:center;
    color:rgba(255,255,255,0.78);
  }
  .nav-dropdown__trigger:hover { color:#fff; background:rgba(255,255,255,0.09); }
  .site-header.scrolled .nav-dropdown__trigger,
  body:not(:has(.hero)) .site-header .nav-dropdown__trigger       { color:var(--slate); }
  .site-header.scrolled .nav-dropdown__trigger:hover,
  body:not(:has(.hero)) .site-header .nav-dropdown__trigger:hover { color:var(--navy); background:rgba(11,31,58,0.06); }

  /* Transparent bridge across the 6px gap so the cursor never leaves the
     hover zone when moving from the trigger down to the menu. */
  .nav-dropdown::after {
    content:"";
    position:absolute;
    top:100%; left:0; right:0;
    height:10px;
    display:none;
  }
  .nav-dropdown:hover::after { display:block; }

  .nav-dropdown__menu {
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    min-width:220px;
    background:var(--navy-deep);
    border-radius:var(--r-md);
    box-shadow:var(--sh-lg);
    border:1px solid rgba(255,255,255,0.08);
    padding:var(--s2) 0;
    margin-top:0;
    /* Full type list (19 items) can exceed the viewport — cap and scroll. */
    max-height:calc(100vh - 120px);
    overflow-y:auto;
    /* Always laid out on desktop; shown via opacity/visibility so the close
       can linger (~0.4s) — display:none can't transition. */
    display:flex;
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:opacity .16s ease .4s, visibility .16s ease .4s, transform .16s ease .4s;
  }
  .nav-dropdown:hover .nav-dropdown__menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition-delay:0s; /* open immediately; only the close is delayed */
  }
  .dropdown-item { padding:10px var(--s5); font-size:0.80rem; }

  .header-phone      { display:flex; margin-left:var(--s4); }
  .header-actions    { display:none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────────────────────── */
.hero {
  display:flex; align-items:center; justify-content:center;
  min-height:100svh; min-height:100vh;
  background:var(--navy-deep);
  position:relative;
  overflow:hidden;
}
.hero-bg {
  position:absolute;
  top:-15%; left:0; right:0;
  height:130%;
  background-size:cover; background-position:center;
  will-change:transform;
}
.hero::after {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(160deg, rgba(11,31,58,0.55) 0%, rgba(7,21,41,0.20) 50%, rgba(7,21,41,0.10) 65%),
    linear-gradient(to bottom, rgba(7,21,41,0.30) 0%, rgba(7,21,41,0.10) 40%, rgba(7,21,41,0.82) 85%, rgba(7,21,41,0.95) 100%);
  pointer-events:none;
}

.hero-inner {
  position:relative; z-index:1; width:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:calc(var(--hh) + var(--s16)) var(--s4) var(--s20);
}

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:var(--s3);
  font-family:var(--font-body);
  font-size:0.62rem; font-weight:500; letter-spacing:0.35em; text-transform:uppercase;
  color:var(--champagne);
  margin:0 0 var(--s5);
  opacity:0; animation:fadeUp 0.6s var(--ease) forwards 0.15s;
  transform:translateY(16px);
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content:''; display:block; height:1px; width:28px;
  background:var(--champagne); opacity:0.55;
}

.hero-headline {
  font-family:var(--font-head);
  font-weight:300;
  font-size:clamp(2.6rem, 7.5vw, 5.4rem);
  line-height:1.04;
  color:#fff;
  letter-spacing:-0.015em;
  margin:0 0 var(--s5);
  max-width:820px;
  opacity:0; animation:fadeUp 0.75s var(--ease) forwards 0.30s;
  transform:translateY(16px);
}
.hero-headline em { font-style:italic; color:var(--champagne-l); }

.hero-sub {
  font-size:1rem; line-height:1.80;
  color:rgba(255,255,255,0.76);
  max-width:500px; margin:0 auto var(--s10);
  opacity:0; animation:fadeUp 0.75s var(--ease) forwards 0.45s;
  transform:translateY(16px);
}

/* Hero Search Form */
.hero-search {
  display:flex; flex-direction:column; gap:var(--s2);
  width:100%; max-width:760px;
  background:rgba(250,248,243,0.07);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--r-lg);
  padding:var(--s4);
  opacity:0; animation:fadeUp 0.75s var(--ease) forwards 0.60s;
  transform:translateY(16px);
}
.hero-select {
  flex:1;
  height:46px;
  padding:0 var(--s4);
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--r);
  color:#fff;
  font-family:var(--font-body);
  font-size:0.88rem;
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
  outline:none;
  transition:border-color var(--t), background var(--t);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
.hero-select:focus { border-color:var(--champagne); background-color:rgba(255,255,255,0.14); }
.hero-select option { background:var(--navy-deep); color:var(--ivory); }

.hero-search .btn--gold {
  height:46px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  margin-top:var(--s1);
}

/* Hero Stats */
.hero-stats {
  display:flex; align-items:center; gap:var(--s6);
  margin-top:var(--s10);
  opacity:0; animation:fadeUp 0.75s var(--ease) forwards 0.85s;
  transform:translateY(16px);
}
.hero-stat { text-align:center; }
.hero-stat__num {
  display:block;
  font-family:var(--font-head);
  font-size:2rem; font-weight:300;
  color:#fff; line-height:1;
}
.hero-stat__label {
  display:block;
  font-size:0.62rem; font-weight:500; letter-spacing:0.18em;
  text-transform:uppercase; color:rgba(255,255,255,0.50);
  margin-top:4px;
}
.hero-stat-divider {
  width:1px; height:36px;
  background:rgba(255,255,255,0.18);
}

@media(min-width:640px){
  .hero-search {
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    padding:var(--s3) var(--s3);
    gap:var(--s2);
  }
  .hero-select { min-width:0; }
  .hero-search .btn--gold { width:auto; min-width:130px; margin-top:0; }
}
@media(min-width:900px){
  .hero-search { flex-wrap:nowrap; padding:var(--s4); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--font-body);
  font-size:0.78rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase;
  padding:13px 28px;
  border-radius:var(--r);
  border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:all var(--t) var(--ease);
  white-space:nowrap;
  line-height:1;
}
.btn svg { width:1em; height:1em; flex-shrink:0; }
.btn--full { width:100%; }

.btn--gold {
  background:var(--champagne); color:var(--navy-deep); border-color:var(--champagne);
}
.btn--gold:hover { background:var(--champagne-l); border-color:var(--champagne-l); color:var(--navy-deep); box-shadow:0 4px 20px rgba(200,169,110,0.35); }

.btn--navy {
  background:var(--navy); color:#fff; border-color:var(--navy);
}
.btn--navy:hover { background:var(--navy-mid); border-color:var(--navy-mid); color:#fff; box-shadow:var(--sh); }

.btn--jade {
  background:var(--jade); color:#fff; border-color:var(--jade);
}
.btn--jade:hover { background:var(--jade-l); border-color:var(--jade-l); color:#fff; }

.btn--primary {
  background:var(--navy); color:#fff; border-color:var(--navy);
}
.btn--primary:hover { background:var(--navy-deep); color:#fff; border-color:var(--navy-deep); }

.btn--outline {
  background:transparent; color:rgba(255,255,255,0.88); border-color:rgba(255,255,255,0.32);
}
.btn--outline:hover { background:rgba(255,255,255,0.10); color:#fff; border-color:rgba(255,255,255,0.60); }

.btn--ghost {
  background:transparent; color:var(--slate); border-color:var(--stone);
}
.btn--ghost:hover { background:var(--sand); border-color:var(--stone); color:var(--navy); }

/* On dark sections, navy button needs visible color */
.section--why .btn--navy,
.section--dark .btn--navy {
  background:transparent; color:#fff; border-color:rgba(255,255,255,0.30);
}
.section--why .btn--navy:hover,
.section--dark .btn--navy:hover {
  background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.60);
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATUS BADGES
───────────────────────────────────────────────────────────────────────────── */
.badge {
  display:inline-block;
  padding:4px 11px;
  font-family:var(--font-body);
  font-size:0.58rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  border-radius:var(--r-pill); line-height:1.4;
}
.badge--for_sale  { background:var(--sale-bg);  color:var(--sale-fg); }
.badge--for_lease { background:var(--lease-bg); color:var(--lease-fg); }
.badge--for_rent  { background:var(--rent-bg);  color:var(--rent-fg); }
.badge--deposit   { background:var(--dep-bg);   color:var(--dep-fg); }
.badge--sold,
.badge--leased    { background:#3a4250;        color:#fff; }

/* ─────────────────────────────────────────────────────────────────────────────
   LISTING CARDS
───────────────────────────────────────────────────────────────────────────── */
.listing-card {
  background:var(--white);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--stone);
  box-shadow:var(--sh-card);
  display:flex; flex-direction:column;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
.listing-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--sh-card-hover);
  border-color:var(--champagne-bd);
}

.card-image-wrap {
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/10; flex-shrink:0;
  background:linear-gradient(90deg, var(--sand) 25%, rgba(255,255,255,0.55) 50%, var(--sand) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
}
.card-image {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 500ms var(--ease), opacity 300ms ease;
  opacity:0;
}
.card-image.img-loaded { opacity:1; }
.listing-card:hover .card-image { transform:scale(1.06); }

/* Gradient placeholder — looks premium without a real image */
.card-image--placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s3);
  background:linear-gradient(145deg, #0B1F3A 0%, #162B4E 55%, #0D2745 100%);
  color:rgba(200,169,110,0.45);
  position:relative; overflow:hidden;
}
.card-image--placeholder::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(200,169,110,0.08), transparent);
}
.listing-card:nth-child(3n+2) .card-image--placeholder {
  background:linear-gradient(145deg, #0D2A1E 0%, #1A3E2C 55%, #0B2218 100%);
}
.listing-card:nth-child(3n) .card-image--placeholder {
  background:linear-gradient(145deg, #1A1020 0%, #2A1A35 55%, #1A0D25 100%);
}
.card-image--placeholder svg { position:relative; z-index:1; opacity:0.5; }

/* Branded logo placeholder (listing has no real images) */
.card-image--logo {
  opacity:1;                       /* skip the photo fade-in */
  object-fit:cover; background:#f7f4ec;
}
.listing-card:hover .card-image--logo { transform:none; }   /* don't zoom a logo */
.gallery-main__img--logo { background:#f7f4ec; }
.compare-img--logo { background:#f7f4ec; }

.card-image-wrap .badge {
  position:absolute; top:12px; z-index:1;
}
.card-image-wrap .badge--new    { left:12px; }
.card-image-wrap .badge--status { right:12px; }

.card-body {
  padding:var(--s5) var(--s6) var(--s6);
  flex:1; display:flex; flex-direction:column; gap:var(--s2);
}
.card-type {
  font-family:var(--font-body);
  font-size:0.58rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--champagne);
}
.card-title {
  font-family:var(--font-head);
  font-size:1.22rem; font-weight:600; line-height:1.20; color:var(--navy); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-transform:capitalize;
}
.card-title a       { color:var(--navy); }
.card-title a:hover { color:var(--jade); }

.card-price-row {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); margin-top:auto;
}
.card-price {
  font-family:var(--font-head);
  font-size:1.35rem; font-weight:600;
  color:var(--jade); letter-spacing:-0.01em;
  margin:var(--s1) 0 0;
}
.card-more {
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  font-family:var(--font-body);
  font-size:0.74rem; font-weight:600; letter-spacing:0.02em;
  color:var(--slate); white-space:nowrap;
}
.card-more svg { flex-shrink:0; color:var(--champagne); }
.card-more:hover { color:var(--jade); }
.card-more:hover svg { color:var(--jade); }
.poa { font-style:italic; font-size:0.92rem; color:var(--graphite); }

.card-meta {
  display:flex; flex-wrap:wrap; gap:var(--s3);
  padding-top:var(--s3);
  border-top:1px solid rgba(11,31,58,0.07);
}
.meta-item {
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.78rem; color:var(--graphite); font-weight:500;
}
.meta-item svg { flex-shrink:0; color:var(--muted); }
.meta-item--location { color:var(--slate); }

/* ── Listings Grid ────────── */
.listings-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s6);
}
@media(min-width:560px){
  .listings-grid { grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1024px){
  .listings-grid { grid-template-columns:repeat(3,1fr); }
  .listings-grid--4col { grid-template-columns:repeat(4,1fr); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HOME — SECTION HEADER
───────────────────────────────────────────────────────────────────────────── */
.section-header {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:var(--s10);
  flex-wrap:wrap; gap:var(--s3);
}
.section-header h2 {
  font-family:var(--font-head);
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:300; color:var(--navy); letter-spacing:-0.01em;
}
.section-link {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body);
  font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--champagne); text-decoration:none;
  transition:gap var(--t), color var(--t);
}
.section-link:hover { color:var(--champagne-l); gap:10px; }

/* ── Featured Listings Section ── */
.section--featured { padding:var(--s20) 0; }
.section--featured h2 {
  font-size:clamp(2rem,3.5vw,2.8rem); font-weight:300; letter-spacing:-0.015em;
}

/* ── Browse by Type — carousel ── */
.section--types { padding:var(--s20) 0; background:var(--sand); }

.type-carousel-wrap { position:relative; }

.carousel-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:50%;
  box-shadow:var(--sh-xs);
  cursor:pointer;
  transition:all var(--t) var(--ease);
  color:var(--slate);
}
.carousel-btn:hover { border-color:var(--champagne-bd); color:var(--navy); box-shadow:var(--sh); }
.carousel-btn:disabled { opacity:0.3; cursor:default; pointer-events:none; }
.carousel-btn--prev { left:-18px; }
.carousel-btn--next { right:-18px; }

.type-carousel {
  display:flex;
  gap:var(--s3);
  overflow-x:scroll;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.type-carousel::-webkit-scrollbar { display:none; }

/* default (portrait / mobile): 3 visible */
.type-card {
  flex:0 0 calc((100% - 2 * var(--s3)) / 3);
  scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:var(--s3);
  padding:var(--s6) var(--s3) var(--s5);
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:var(--r-lg);
  text-decoration:none;
  transition:all var(--t) var(--ease);
  box-shadow:var(--sh-xs);
}
.type-card:hover {
  border-color:var(--champagne-bd);
  transform:translateY(-3px);
  box-shadow:var(--sh);
}

.type-card__icon {
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  background:color-mix(in srgb, var(--champagne) 12%, transparent);
  border-radius:var(--r-lg);
  transition:background var(--t) var(--ease), transform var(--t) var(--ease);
  flex-shrink:0;
}
.type-card:hover .type-card__icon {
  background:color-mix(in srgb, var(--champagne) 22%, transparent);
  transform:translateY(-2px);
}
.type-card__icon svg { color:var(--champagne); width:28px; height:28px; }

.type-card span {
  font-family:var(--font-body);
  font-size:0.75rem; font-weight:500; letter-spacing:0.04em;
  color:var(--slate); text-align:center; line-height:1.3;
  transition:color var(--t);
}
.type-card:hover span { color:var(--navy); }
.type-card__count { font-size:0.67rem; color:var(--stone); letter-spacing:0.03em; }
.type-card:hover .type-card__count { color:var(--slate); }

/* landscape phone / tablet (<1024px): 5 visible */
@media(orientation:landscape) and (max-width:1023px) {
  .type-card { flex-basis:calc((100% - 4 * var(--s3)) / 5); }
}

/* desktop (≥1024px): 7 visible */
@media(min-width:1024px) {
  .type-card { flex-basis:calc((100% - 6 * var(--s3)) / 7); }
  .carousel-btn--prev { left:-20px; }
  .carousel-btn--next { right:-20px; }
}

/* ── Browse by Location ──── */
.section--locations { padding:var(--s20) 0; }
.section--locations > .container > h2 {
  font-size:clamp(1.8rem,3vw,2.4rem); font-weight:300;
  margin-bottom:var(--s6);
}
.location-grid {
  display:flex; flex-wrap:wrap; gap:var(--s2);
}
.location-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body);
  font-size:0.80rem; font-weight:500;
  color:var(--slate);
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:var(--r-pill);
  padding:8px 16px;
  text-decoration:none;
  transition:all var(--t) var(--ease);
  box-shadow:var(--sh-xs);
}
.location-chip svg { color:var(--champagne); flex-shrink:0; }
.location-chip:hover {
  background:var(--navy); color:#fff; border-color:var(--navy);
  transform:translateY(-2px); box-shadow:var(--sh-sm);
}
.location-chip:hover svg { color:var(--champagne-l); }
.location-group { margin-bottom:var(--s6); }
.location-group:last-child { margin-bottom:0; }
.location-group__label {
  font-family:var(--font-body);
  font-size:0.68rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--graphite);
  margin:0 0 var(--s3);
}
.chip-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  font-size:0.65rem; font-weight:600; line-height:1;
  background:var(--champagne-pale); color:var(--champagne);
  border-radius:var(--r-pill);
}
.location-chip:hover .chip-count { background:rgba(255,255,255,0.15); color:#fff; }

/* ── Why Phuket Brokers ──── */
.section--why {
  padding:var(--s24) 0;
  background:var(--navy-deep);
  position:relative; overflow:hidden;
}
.section--why::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 80% at 100% 50%, rgba(200,169,110,0.05), transparent);
  pointer-events:none;
}

.why-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s16);
  position:relative;
}
@media(min-width:768px){
  .why-grid { grid-template-columns:1fr 1fr; gap:var(--s16); align-items:center; }
}
@media(min-width:1024px){
  .why-grid { grid-template-columns:3fr 2fr; gap:var(--s20); }
}

.why-text h2 {
  font-family:var(--font-head);
  font-size:clamp(2.2rem,4vw,3.4rem);
  font-weight:300; letter-spacing:-0.015em;
  color:#fff; margin-bottom:var(--s6);
}
.why-text > p {
  color:rgba(255,255,255,0.68);
  font-size:1.02rem; line-height:1.78;
  margin-bottom:var(--s8);
}
.why-list {
  list-style:none; padding:0; margin:0 0 var(--s10);
  display:flex; flex-direction:column; gap:var(--s3);
}
.why-list li {
  display:flex; align-items:center; gap:var(--s3);
  font-size:0.92rem; color:rgba(255,255,255,0.72);
}
.why-list li svg { color:var(--champagne); flex-shrink:0; }

.why-cta {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--r-xl);
  padding:var(--s10) var(--s8);
  text-align:center;
}
.why-cta h3 {
  font-family:var(--font-head);
  font-size:1.8rem; font-weight:400; color:#fff;
  margin-bottom:var(--s4);
}
.why-cta > p {
  color:rgba(255,255,255,0.60);
  font-size:0.92rem; margin-bottom:var(--s8);
}
.why-cta .btn--gold { width:100%; margin-bottom:var(--s3); }
.why-cta .btn--outline { width:100%; }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE HEADER (listings, contact, category, etc.)
───────────────────────────────────────────────────────────────────────────── */
.page-header {
  background:var(--navy-deep);
  padding:calc(var(--hh) + var(--s12)) 0 var(--s12);
  position:relative; overflow:hidden;
}
.page-header::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:1px; background:rgba(255,255,255,0.07);
}
.page-header h1 {
  font-family:var(--font-head);
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:300; color:#fff; letter-spacing:-0.01em;
  margin-bottom:var(--s3);
}
.page-header p {
  color:rgba(255,255,255,0.58); font-size:0.96rem;
  margin:0;
}
.page-header__count {
  font-size:0.82rem; color:rgba(255,255,255,0.45);
  font-family:var(--font-body); font-weight:500;
}
.page-intro {
  margin-top:var(--s4); max-width:760px;
  color:rgba(255,255,255,0.72); font-size:0.96rem; line-height:1.7;
}
.page-header__label {
  font-size:0.72rem; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--champagne);
  margin-bottom:var(--s2);
}
.page-header__back {
  color:rgba(255,255,255,0.55); text-decoration:none;
  transition:color var(--t) var(--ease);
}
.page-header__back:hover { color:var(--champagne); }

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR LAYOUT (listings page)
───────────────────────────────────────────────────────────────────────────── */
.layout-sidebar {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s8);
  padding-top:var(--s10);
  padding-bottom:var(--s16);
  align-items:start;
}
@media(min-width:900px){
  .layout-sidebar {
    grid-template-columns:280px 1fr;
    gap:var(--s10);
  }
}

.sidebar-col { position:sticky; top:calc(var(--hh) + var(--s4)); }
@media(max-width:899px){ .sidebar-col{ position:static; } }

/* ── Search Widget ────────── */
.search-widget {
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:var(--r-lg);
  padding:var(--s6);
  box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; gap:var(--s4);
}
.widget-field { display:flex; flex-direction:column; gap:var(--s2); }
.widget-field label {
  font-family:var(--font-body);
  font-size:0.70rem; font-weight:600; letter-spacing:0.10em; text-transform:uppercase;
  color:var(--graphite);
}
.widget-row {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s3);
}

/* ── Forms — inputs & selects ── */
input[type='text'], input[type='email'], input[type='tel'],
input[type='number'], input[type='password'],
select, textarea {
  width:100%;
  height:44px;
  padding:0 var(--s4);
  font-family:var(--font-body); font-size:0.88rem; color:var(--ink);
  background:var(--white);
  border:1.5px solid var(--stone);
  border-radius:var(--r);
  appearance:none; -webkit-appearance:none;
  outline:none;
  transition:border-color var(--t), box-shadow var(--t);
}
textarea {
  height:auto; padding:var(--s3) var(--s4); resize:vertical; line-height:1.65;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--champagne);
  box-shadow:0 0 0 3px rgba(200,169,110,0.16);
}
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236E7F8D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  padding-right:34px;
  cursor:pointer;
}
label {
  display:flex; flex-direction:column; gap:var(--s2);
  font-family:var(--font-body);
}
.field-label {
  font-size:0.84rem; font-weight:500;
  color:var(--slate);
}
.required { color:var(--champagne); font-weight:600; }

/* ── Active Filters ────────── */
.active-filters {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  margin-bottom:var(--s6);
  padding:var(--s4) var(--s5);
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:var(--r-lg);
}
.active-filters__label {
  font-size:0.70rem; font-weight:600; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--graphite);
}
.filter-chip {
  display:inline-flex; align-items:center;
  font-size:0.78rem; font-weight:500;
  background:var(--champagne-pale); color:var(--navy);
  border:1px solid var(--champagne-bd);
  border-radius:var(--r-pill);
  padding:4px 12px; text-decoration:none;
  transition:all var(--t);
}
.filter-chip:hover { background:var(--champagne); color:var(--navy-deep); }
.filter-chip--clear {
  background:transparent; color:var(--graphite);
  border-color:var(--stone);
}
.filter-chip--clear:hover { background:var(--sand); color:var(--slate); }

/* ─────────────────────────────────────────────────────────────────────────────
   LISTING DETAIL
───────────────────────────────────────────────────────────────────────────── */
.breadcrumb-outer {
  padding-top:var(--hh);
  background:var(--white);
}
.detail-layout {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s8);
  padding-top:var(--s6);
  padding-bottom:var(--s16);
  align-items:start;
}
@media(min-width:960px){
  .detail-layout { grid-template-columns:1fr 360px; gap:var(--s10); }
}

/* Gallery */
.gallery { margin-bottom:var(--s8); }
.gallery-main { border-radius:var(--r-lg); overflow:hidden; }
.gallery-main img {
  width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
}
.gallery-thumbs {
  display:flex; gap:var(--s2); margin-top:var(--s2); overflow-x:auto;
  scrollbar-width:none; padding-bottom:2px;
}
.gallery-thumbs::-webkit-scrollbar { display:none; }
.gallery-thumb {
  position:relative; flex-shrink:0; width:104px; height:72px;
  border-radius:var(--r); overflow:hidden;
  border:2px solid transparent;
  transition:border-color var(--t), filter var(--t);
  cursor:pointer; background:none; padding:0;
}
.gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb:hover:not(.gallery-thumb--active) { filter:brightness(1.12); }
.gallery-thumb--active { border-color:var(--champagne); }
.gallery-thumb--hidden { display:none; }
.gallery-thumb--more img { filter:brightness(0.4); }
.gallery-thumb-count {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem; font-weight:600; letter-spacing:0.03em;
  pointer-events:none;
}

/* Detail head */
.detail-head {
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:flex-start; gap:var(--s5);
  margin-bottom:var(--s6);
}
.detail-title {
  font-family:var(--font-head);
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:300; color:var(--navy); letter-spacing:-0.01em;
  margin:var(--s3) 0 var(--s3);
  text-transform:capitalize;
}
.detail-location {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:0.84rem; color:var(--graphite); margin:0;
}
.detail-location svg { color:var(--champagne); flex-shrink:0; }
.detail-head__price { text-align:right; flex-shrink:0; }
.detail-price-label {
  display:block;
  font-size:0.65rem; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--champagne); margin-bottom:4px;
}
.detail-price {
  font-family:var(--font-head);
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:300; color:var(--navy); letter-spacing:-0.02em;
  display:block; line-height:1;
}
.detail-price--poa { font-size:1.2rem; color:var(--graphite); }

/* Property stats bar — beds / baths / area / year */
.detail-stats {
  display:flex; flex-wrap:nowrap;
  border:1px solid var(--stone);
  border-radius:var(--r-lg);
  background:var(--white);
  overflow:hidden;
  margin-bottom:var(--s8);
}
.stat {
  display:flex; align-items:center; gap:6px;
  padding:var(--s3) var(--s3);
  flex:1 1 0; min-width:0;
  border-right:1px solid var(--stone);
}
.stat:last-child { border-right:none; }
.stat svg { width:16px; height:16px; color:var(--champagne); flex-shrink:0; }
.stat__body { display:flex; flex-direction:row; align-items:baseline; gap:4px; min-width:0; white-space:nowrap; }
.stat__value { font-size:0.85rem; font-weight:600; color:var(--navy); line-height:1.15; white-space:nowrap; }
.stat__label { font-size:0.58rem; color:var(--graphite); text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap; }
@media (max-width:600px) {
  .detail-stats { flex-wrap:wrap; }
  .stat { min-width:calc(50% - 0.5px); border-bottom:1px solid var(--stone); }
  .stat:nth-child(even) { border-right:none; }
  .stat:last-child,
  .stat:nth-last-child(-n+2):not(:nth-child(odd)) { border-bottom:none; }
}

/* Pricing & terms — highlighted free-text card, matches stats bar */
.detail-price-info {
  border:1px solid var(--stone);
  border-radius:var(--r-lg);
  background:var(--sand);
  padding:var(--s5) var(--s6);
  margin-bottom:var(--s8);
}
.detail-price-info h2 {
  font-family:var(--font-head);
  font-size:1.3rem; font-weight:400; color:var(--navy);
  margin:0 0 var(--s3);
}
.price-info-list {
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:0 var(--s6);
}
@media (max-width:480px) {
  .price-info-list { grid-template-columns:1fr; }
}
.price-info-list li {
  display:flex; flex-wrap:wrap; gap:var(--s2);
  font-size:0.9rem; color:var(--slate);
  padding:var(--s2) 0; border-bottom:1px solid var(--stone);
}
.price-info-label { font-weight:600; color:var(--navy); }

/* Investment facts bar — yield / rental / management */
.detail-facts {
  display:flex; flex-wrap:wrap; gap:var(--s4);
  padding:var(--s5) var(--s6);
  background:var(--sand);
  border-radius:var(--r-lg);
  margin-bottom:var(--s8);
  border:1px solid var(--stone);
}
.fact {
  display:flex; align-items:center; gap:var(--s3);
  font-size:0.88rem; font-weight:500; color:var(--slate);
}
.fact svg { color:var(--champagne); }

/* Description */
.detail-description { margin-bottom:var(--s10); }
.detail-description h2,
.detail-amenities h2,
.detail-map h2 {
  font-family:var(--font-head);
  font-size:1.6rem; font-weight:400; color:var(--navy);
  text-transform:uppercase; letter-spacing:.02em;
  margin-bottom:var(--s5);
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--stone);
}

/* Amenities */
.detail-amenities { margin-bottom:var(--s10); }
.amenities-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s2);
  list-style:none; padding:0;
}
@media(min-width:640px){ .amenities-grid{ grid-template-columns:repeat(3,1fr); } }
.amenities-grid li {
  display:flex; align-items:center; gap:var(--s3);
  font-size:0.86rem; color:var(--slate); padding:var(--s2) 0;
}
.amenities-grid li svg { color:var(--jade); flex-shrink:0; }

/* Map */
.detail-map { margin-bottom:var(--s10); }
.map-container { height:360px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--stone); }

/* Sidebar boxes */
.detail-sidebar { display:flex; flex-direction:column; gap:var(--s5); }
.sidebar-box {
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:var(--r-lg);
  padding:var(--s7, 28px) var(--s6);
  box-shadow:var(--sh-sm);
}
.sidebar-box h3 {
  font-family:var(--font-head);
  font-size:1.35rem; font-weight:600; color:var(--navy);
  margin-bottom:var(--s5);
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--stone);
}
.enquiry-form form { display:flex; flex-direction:column; gap:var(--s4); }

.agent-heading { font-size:1.05rem; margin-bottom:var(--s4); padding-bottom:var(--s4); }
.agent-name { font-weight:600; white-space:nowrap; }
.agent-actions { display:flex; gap:var(--s2); margin-top:var(--s2); }
.agent-actions .btn { flex:1; }

.whatsapp-enquiry {
  display:flex; align-items:center; justify-content:center; gap:var(--s3);
  background:#25D366; color:#fff;
  border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);
  font-family:var(--font-body);
  font-size:0.84rem; font-weight:600;
  text-decoration:none;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
}
.whatsapp-enquiry:hover {
  background:#1EBE5A; color:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(37,211,102,0.30);
}

/* ─────────────────────────────────────────────────────────────────────────────
   AGENTS PAGE
───────────────────────────────────────────────────────────────────────────── */
.agents-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s6);
  padding:var(--s10) 0 var(--s16);
}
@media(min-width:640px){ .agents-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px){ .agents-grid{ grid-template-columns:repeat(4,1fr); } }

.agent-card {
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-card);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.agent-card:hover { transform:translateY(-4px); box-shadow:var(--sh-card-hover); }

.agent-card__photo-wrap {
  display:block; aspect-ratio:3/4; overflow:hidden;
  background:var(--sand);
}
.agent-photo {
  width:100%; height:100%; object-fit:cover; object-position:top;
  transition:transform 500ms var(--ease);
}
.agent-card:hover .agent-photo { transform:scale(1.04); }
.agent-photo--placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, #0B1F3A, #162B4E);
  color:rgba(200,169,110,0.40);
}

.agent-card__body {
  padding:var(--s4) var(--s5) var(--s5);
}
.agent-card__body h3 {
  font-family:var(--font-head);
  font-size:1.15rem; font-weight:600; color:var(--navy); margin-bottom:var(--s2);
}
.agent-card__body h3 a { color:var(--navy); }
.agent-card__body h3 a:hover { color:var(--jade); }
.agent-bio-excerpt {
  font-size:0.82rem; color:var(--graphite); line-height:1.60; margin-bottom:var(--s4);
}
.agent-contacts {
  display:flex; gap:var(--s3);
}
.agent-contacts a {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background:var(--sand); border:1px solid var(--stone);
  border-radius:50%; color:var(--slate);
  transition:all var(--t);
}
.agent-contacts a:hover { background:var(--navy); color:#fff; border-color:var(--navy); }

/* ─────────────────────────────────────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────────────────────────────────────── */
.contact-layout {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s10);
  padding-top:var(--s12); padding-bottom:var(--s20);
  align-items:start;
}
@media(min-width:768px){
  .contact-layout { grid-template-columns:1fr 360px; }
}

/* ── Contact form card ── */
.contact-form-card {
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:var(--r-xl);
  padding:var(--s10) var(--s8);
  box-shadow:var(--sh-card);
}
.contact-form-heading {
  font-family:var(--font-head);
  font-size:1.7rem; font-weight:300;
  color:var(--navy);
  margin-bottom:var(--s8);
}
.contact-form { display:flex; flex-direction:column; gap:var(--s5); }

.contact-form-row {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s5);
}
@media(min-width:580px){
  .contact-form-row { grid-template-columns:1fr 1fr; }
}

.contact-submit { width:100%; justify-content:center; margin-top:var(--s2); }

/* ── Contact info box ── */
.contact-info-box {
  background:var(--navy-deep);
  border-radius:var(--r-xl);
  padding:var(--s10) var(--s8);
  position:sticky; top:calc(var(--hh) + var(--s4));
  overflow:hidden;
}
.contact-info-box h3 {
  font-family:var(--font-head);
  font-size:1.6rem; font-weight:300; color:#fff;
  margin-bottom:var(--s2);
}
.contact-info-box__sub {
  font-size:0.82rem; color:rgba(255,255,255,0.62);
  margin-bottom:var(--s8);
}
.contact-info-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--s6); }
.contact-info-list li {
  display:flex; align-items:flex-start; gap:var(--s4);
  font-size:0.90rem; line-height:1.60;
  color:rgba(255,255,255,0.88);
}
.contact-info-list li svg { color:var(--champagne); flex-shrink:0; margin-top:3px; }
.contact-info-list li > div { display:flex; flex-direction:column; gap:2px; }
.contact-info-list__label {
  font-size:0.72rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--champagne);
}
.contact-info-list a { color:rgba(255,255,255,0.80); }
.contact-info-list a:hover { color:var(--champagne-l); }
.contact-info-list address { color:rgba(255,255,255,0.65); font-style:normal; }
.contact-info-box .form-footnote { color:rgba(255,255,255,0.62); }
.contact-info-box .form-footnote a { color:var(--champagne-l); }

/* ─────────────────────────────────────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────────────────────────────────────── */
.breadcrumb {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  padding:var(--s4) 0;
  font-size:0.76rem; font-weight:500;
  border-bottom:1px solid rgba(11,31,58,0.08);
  margin-bottom:var(--s6);
}
.breadcrumb-item a { color:var(--graphite); }
.breadcrumb-item a:hover { color:var(--jade); }
.breadcrumb-sep { color:var(--muted); font-size:0.65rem; }
.breadcrumb-item--current { color:var(--slate); }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGINATION
───────────────────────────────────────────────────────────────────────────── */
.pagination {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:var(--s2);
  margin-top:var(--s12);
}
.pagination__btn,
.pagination__page {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-width:40px; height:40px;
  font-family:var(--font-body); font-size:0.82rem; font-weight:500;
  color:var(--slate); text-decoration:none;
  background:var(--white); border:1px solid var(--stone);
  border-radius:var(--r);
  padding:0 var(--s3);
  transition:all var(--t);
}
.pagination__btn:hover,
.pagination__page:hover          { background:var(--navy); color:#fff; border-color:var(--navy); }
.pagination__page--active        { background:var(--navy); color:#fff; border-color:var(--navy); }
.pagination__ellipsis            { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--muted); }

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATE
───────────────────────────────────────────────────────────────────────────── */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:var(--s20) var(--s4);
  color:var(--graphite);
}
.empty-state svg { color:var(--stone); margin-bottom:var(--s6); }
.empty-state h2  { font-size:1.5rem; font-weight:300; color:var(--slate); margin-bottom:var(--s3); }
.empty-state p   { font-size:0.92rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   ALERTS
───────────────────────────────────────────────────────────────────────────── */
.alert {
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-radius:var(--r-md);
  font-size:0.88rem; line-height:1.60;
  margin-bottom:var(--s5);
}
.alert--success { background:rgba(26,107,90,0.08); border:1px solid rgba(26,107,90,0.22); color:var(--jade); }
.alert--error   { background:rgba(160,56,56,0.08); border:1px solid rgba(160,56,56,0.22); color:#A03838; }
.form-success   { background:rgba(26,107,90,0.08); border:1px solid rgba(26,107,90,0.22); color:var(--jade); border-radius:var(--r); padding:var(--s4) var(--s5); font-size:0.88rem; margin-bottom:var(--s5); }

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────────────────────── */
.site-footer {
  background:var(--navy-deep);
  padding:var(--s20) 0 0;
  position:relative;
}
.site-footer::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:1px; background:linear-gradient(to right, transparent, rgba(200,169,110,0.25), transparent);
}

.footer-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s10);
  padding-bottom:var(--s12);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
@media(min-width:560px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }

.footer-logo { display:block; text-decoration:none; margin-bottom:var(--s4); }
.footer-logo-img { width:200px; height:auto; display:block; opacity:0.9; }
.footer-logo:hover .footer-logo-img { opacity:1; }

.footer-tagline {
  font-size:0.84rem; color:rgba(255,255,255,0.45); line-height:1.60;
  margin-bottom:var(--s4);
}
.footer-address {
  font-style:normal; font-size:0.82rem; color:rgba(255,255,255,0.40);
  line-height:1.70; margin:0;
  display:flex; align-items:flex-start; gap:var(--s3);
}
.footer-address svg { color:var(--champagne); opacity:0.7; flex-shrink:0; margin-top:0.2em; }
.footer-contact {
  display:flex; flex-direction:column; gap:var(--s3);
}
.footer-contact a {
  display:inline-flex; align-items:center; gap:var(--s3);
  font-size:0.82rem; color:rgba(255,255,255,0.50);
  transition:color var(--t);
}
.footer-contact a:hover { color:var(--champagne-l); }
.footer-contact svg { color:var(--champagne); opacity:0.7; flex-shrink:0; }

.footer-col h4 {
  font-family:var(--font-body);
  font-size:0.60rem; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--champagne); margin-bottom:var(--s5);
}
.footer-col ul li { margin-bottom:var(--s3); }
.footer-col ul li a {
  font-size:0.84rem; color:rgba(255,255,255,0.48);
  transition:color var(--t);
}
.footer-col ul li a:hover { color:rgba(255,255,255,0.88); }

.footer-social { display:flex; gap:var(--s3); flex-wrap:wrap; }
.footer-social a {
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.10);
  border-radius:50%; color:rgba(255,255,255,0.50);
  transition:all var(--t);
}
.footer-social a:hover { background:var(--champagne); color:var(--navy-deep); border-color:var(--champagne); }

.footer-bottom {
  padding:var(--s6) 0;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:var(--s4);
}
.footer-bottom p {
  font-size:0.76rem; color:rgba(255,255,255,0.28);
  margin:0; letter-spacing:0.04em;
}
.footer-bottom__left { display:flex; flex-direction:column; gap:0; line-height:1.35; }
.footer-bottom__right { }
.footer-credit { font-size:0.76rem; color:rgba(255,255,255,0.28); margin:0; letter-spacing:0.04em; }
.footer-credit__link {
  color:rgba(255,255,255,0.45);
  text-decoration:none;
  transition:color 0.2s ease, opacity 0.2s ease;
}
.footer-credit__link:hover { color:rgba(255,255,255,0.85); }
.footer-credit__link--logo { display:inline-block; vertical-align:middle; line-height:0; }
.footer-credit__logo { width:75px; height:auto; opacity:0.6; transition:opacity 0.2s ease, transform 0.2s ease; }
.footer-credit__link--logo:hover .footer-credit__logo { opacity:1; transform:scale(1.05); }
@media (min-width:768px) {
  .footer-bottom { flex-direction:row; justify-content:space-between; align-items:flex-end; text-align:left; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RICH TEXT
───────────────────────────────────────────────────────────────────────────── */
/* Headings inside rich text match the "Description" section heading: same
   font family, size and weight, rendered in CAPS for visual consistency. */
.rich-text h2 { font-family:var(--font-head); font-size:1.6rem; font-weight:400; color:var(--navy); text-transform:uppercase; letter-spacing:.02em; margin:var(--s8) 0 var(--s4); }
.rich-text h3 { font-family:var(--font-head); font-size:1.3rem; font-weight:400; color:var(--navy); text-transform:uppercase; letter-spacing:.02em; margin:var(--s6) 0 var(--s3); }
.rich-text p  { color:var(--slate); line-height:1.80; margin-bottom:var(--s4); }
.rich-text ul { padding-left:var(--s6); margin-bottom:var(--s4); list-style:disc; }
.rich-text ol { padding-left:var(--s6); margin-bottom:var(--s4); list-style:decimal; }
.rich-text li { margin-bottom:var(--s2); color:var(--slate); }
.rich-text a  { color:var(--jade); border-bottom:1px solid var(--jade-bd); }
.rich-text a:hover { border-color:var(--jade); }

/* ─────────────────────────────────────────────────────────────────────────────
   ERROR PAGES (404, 500)
───────────────────────────────────────────────────────────────────────────── */
.error-page {
  min-height:60vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:var(--s20) var(--s4);
}
.error-page h1 {
  font-family:var(--font-head);
  font-size:clamp(5rem,15vw,9rem);
  font-weight:300; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(11,31,58,0.20);
  margin-bottom:var(--s4);
}
.error-page h2 {
  font-family:var(--font-head);
  font-size:1.8rem; font-weight:300; color:var(--navy);
  margin-bottom:var(--s4);
}
.error-page p { color:var(--graphite); margin-bottom:var(--s8); }
.error-page .btn { margin:0 var(--s2); }

/* Newsletter confirm / unsubscribe result pages (ADR-026). Distinct from
   .error-page, whose h1 is a giant transparent outline meant for 404/500. */
.result-page {
  min-height:55vh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s20) var(--s4);
}
.result-page__inner { max-width:560px; text-align:center; }
.result-page__icon {
  width:68px; height:68px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:var(--s6);
}
.result-page__icon svg { width:30px; height:30px; }
.result-page__icon--ok   { background:var(--jade-pale);      color:var(--jade); }
.result-page__icon--warn { background:var(--champagne-pale); color:var(--champagne); }
.result-page__title {
  font-family:var(--font-head); font-weight:300;
  font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.15;
  color:var(--navy); margin:0 0 var(--s4);
}
.result-page__text {
  color:var(--slate); font-size:1.04rem; line-height:1.75;
  margin:0 auto var(--s8); max-width:460px;
}
.result-page__actions { display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   BACK TO TOP
───────────────────────────────────────────────────────────────────────────── */
.back-to-top {
  position:fixed; bottom:var(--s6); right:var(--s6); z-index:150;
  width:44px; height:44px;
  background:var(--navy); color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh);
  opacity:0; transform:translateY(10px);
  transition:opacity var(--t), transform var(--t), background var(--t);
  pointer-events:none;
  border:none;
}
.back-to-top.visible { opacity:1; transform:none; pointer-events:auto; }
.back-to-top:hover   { background:var(--champagne); color:var(--navy-deep); }

/* ─────────────────────────────────────────────────────────────────────────────
   WHATSAPP FLOAT
───────────────────────────────────────────────────────────────────────────── */
.whatsapp-btn,
.whatsapp-float {
  position:fixed; bottom:var(--s6); left:var(--s6); z-index:150;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:#25D366; color:#fff;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,0.40);
  opacity:0; transform:scale(0.8);
  transition:opacity var(--t), transform var(--t), background var(--t), box-shadow var(--t);
  pointer-events:none;
}
.whatsapp-btn.visible,
.whatsapp-float.visible {
  opacity:1; transform:scale(1);
  pointer-events:auto;
}
.whatsapp-btn:hover,
.whatsapp-float:hover {
  background:#1EBE5A; color:#fff;
  transform:scale(1) translateY(-3px);
  box-shadow:0 8px 28px rgba(37,211,102,0.45);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CATEGORY & LOCATION PAGES
───────────────────────────────────────────────────────────────────────────── */
.cat-layout, .loc-layout {
  padding:var(--s12) 0 var(--s20);
}
.cat-layout .listings-grid,
.loc-layout .listings-grid {
  margin-top:var(--s8);
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATIC PAGE
───────────────────────────────────────────────────────────────────────────── */
.page-content {
  max-width:760px; margin:0 auto;
  padding:var(--s12) var(--s4) var(--s20);
}
.page-content h1 {
  font-family:var(--font-head);
  font-size:clamp(2rem,5vw,3rem); font-weight:300;
  color:var(--navy); margin-bottom:var(--s8);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BREADCRUMB (actual template: nav.breadcrumb > ol > li > a + svg | span)
───────────────────────────────────────────────────────────────────────────── */
.breadcrumb ol {
  display:flex; align-items:center; flex-wrap:wrap;
  list-style:none; padding:0; margin:0;
  gap:6px;
}
.breadcrumb li {
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.76rem; font-weight:500;
}
.breadcrumb li a            { color:var(--graphite); transition:color var(--t); }
.breadcrumb li a:hover      { color:var(--jade); }
.breadcrumb li svg          { color:var(--muted); width:10px; height:10px; transform:rotate(-90deg); }
.breadcrumb li span         { color:var(--slate); }
.breadcrumb li:last-child svg { display:none; }

/* ─────────────────────────────────────────────────────────────────────────────
   AGENT DETAIL PAGE
───────────────────────────────────────────────────────────────────────────── */
.page-header--agent { margin-bottom:var(--s12); }

.agent-detail-layout {
  padding-top:var(--s10);
  padding-bottom:var(--s20);
}
.agent-profile {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s8);
  margin-bottom:var(--s16);
  padding-bottom:var(--s16);
  border-bottom:1px solid var(--stone);
}
@media(min-width:640px){
  .agent-profile { grid-template-columns:260px 1fr; gap:var(--s10); align-items:start; }
}
.agent-detail-photo {
  width:100%; aspect-ratio:1; object-fit:cover; object-position:top center;
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  display:block;
}
.agent-photo--placeholder {
  background:var(--sand); display:flex; align-items:center; justify-content:center;
  color:var(--muted);
}
.agent-profile-info h1 {
  font-family:var(--font-head);
  font-size:clamp(2rem,4vw,3rem); font-weight:300;
  color:var(--navy); margin-bottom:var(--s4);
}
.agent-detail-contacts {
  display:flex; flex-wrap:wrap; gap:var(--s3);
  margin-top:var(--s6);
}
.agent-social {
  display:flex; gap:var(--s3);
  margin-top:var(--s5);
}
.agent-social__link {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--stone);
  color:var(--slate); text-decoration:none;
  transition:all var(--t);
}
.agent-social__link:hover {
  background:var(--navy); border-color:var(--navy); color:var(--white);
}
.btn--whatsapp {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--font-body); font-size:0.78rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase;
  padding:13px 28px; border-radius:var(--r); border:1px solid #25D366;
  background:#25D366; color:#fff; cursor:pointer; text-decoration:none;
  transition:all var(--t);
}
.btn--whatsapp:hover { background:#1EBE5A; border-color:#1EBE5A; color:#fff; }

.agent-listings { margin-top:var(--s4); }
.agent-listings h2 {
  font-family:var(--font-head);
  font-size:clamp(1.6rem,3vw,2.2rem); font-weight:300;
  color:var(--navy); margin-bottom:var(--s8);
  padding-bottom:var(--s5); border-bottom:1px solid var(--stone);
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATIC PAGE CONTENT
───────────────────────────────────────────────────────────────────────────── */
.static-page {
  max-width:760px;
  padding:var(--s12) 0 var(--s20);
}
.contact-layout .static-page { padding-top:0; }

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR MAIN COL
───────────────────────────────────────────────────────────────────────────── */
.main-col { min-width:0; }

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE ADDITIONS
───────────────────────────────────────────────────────────────────────────── */
@media(min-width:640px){
  .container { padding:0 var(--s6); }
}
@media(min-width:1024px){
  .container { padding:0 var(--s8); }
  .hero-search { flex-wrap:nowrap; }
  .listings-grid { grid-template-columns:repeat(3,1fr); }
  .listings-grid--4col { grid-template-columns:repeat(4,1fr); }
}
/* ── Page spacing after .page-header ──────────────────────────────────────── */
.layout-sidebar,
.contact-layout,
.agents-grid,
.cat-layout,
.loc-layout,
.shortlist-content,
.compare-content {
  padding-top:var(--s10);
  padding-bottom:var(--s20);
}

/* ── Standalone section headings ──────────────────────────────────────────── */
.section > .container > h2,
.section--types > .container > h2,
.section--locations > .container > h2 {
  font-family:var(--font-head);
  font-size:clamp(1.8rem,3vw,2.4rem);
  font-weight:300;
  letter-spacing:-0.01em;
  color:var(--navy);
  margin-bottom:var(--s8);
}

/* ── Focus, selection, scrollbar polish ──────────────────────────────────── */
:focus-visible { outline:2px solid var(--champagne); outline-offset:3px; border-radius:var(--r); }
::selection { background:rgba(200,169,110,0.22); color:var(--navy); }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--sand); }
::-webkit-scrollbar-thumb { background:var(--stone); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--champagne); }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; }
input[type=number] { -moz-appearance:textfield; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:899px){
  .header-phone { display:none !important; }
}
@media(max-width:767px){
  .site-logo-img { width:160px; }
  .contact-info-box { position:static; }
  .detail-head { flex-direction:column; }
  .detail-head__price { align-self:flex-start; }
  .why-cta { padding:var(--s8) var(--s6); }
  .footer-grid { grid-template-columns:1fr; }
  .agent-profile { grid-template-columns:1fr; }
  .agent-detail-photo { max-width:260px; }
  .layout-sidebar { grid-template-columns:1fr; }
  .sidebar-col { position:static; }
}
@media(max-width:559px){
  .agents-grid { grid-template-columns:1fr; }
  .type-grid { grid-template-columns:repeat(2,1fr); }
  .amenities-grid { grid-template-columns:1fr; }
  .hero-stat__num { font-size:1.6rem; }
  .hero-stats { gap:var(--s4); }
}
@media(max-width:639px){
  .hero-select { width:100%; }
  .hero-search .btn--gold { width:100%; }
}

/* ── Cookie Consent Banner ───────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--navy-deep);
  color: var(--white);
  padding: var(--s4) var(--s6);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  z-index: 999;
  font-size: 0.85rem;
}
.cookie-banner__text { flex: 1; margin: 0; }
.cookie-banner__actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.cookie-banner__link { color: var(--champagne-l); text-decoration: underline; font-size: 0.8rem; }
.cookie-banner[hidden] { display: none; }
@media (max-width: 639px) {
  .cookie-banner { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   NEW LISTING BADGE
───────────────────────────────────────────────────────────────────────────── */
.badge--new { background:var(--jade-pale); color:var(--jade); }

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER TRUST LINE
───────────────────────────────────────────────────────────────────────────── */
.footer-trust {
  color:rgba(255,255,255,0.28);
  font-size:0.75rem;
  margin-top:var(--s2);
  letter-spacing:0.04em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SOCIAL SHARE
───────────────────────────────────────────────────────────────────────────── */
.detail-share {
  display:flex;
  align-items:center;
  gap:var(--s3);
  flex-wrap:wrap;
  margin:var(--s4) 0 var(--s6);
  padding:var(--s4) 0;
  border-top:1px solid var(--stone);
  border-bottom:1px solid var(--stone);
}
.detail-share__label {
  font-size:0.72rem;
  font-weight:600;
  color:var(--slate);
  font-family:var(--font-body);
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.share-btn {
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  padding:var(--s2) var(--s4);
  border-radius:var(--r-pill);
  border:1.5px solid currentColor;
  font-size:0.8rem;
  font-family:var(--font-body);
  font-weight:500;
  text-decoration:none;
  background:transparent;
  transition:background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.share-btn--whatsapp { color:#1aad52; }
.share-btn--line     { color:#06C755; }
.share-btn--facebook { color:#1877F2; }
.share-btn--whatsapp:hover,
.share-btn--whatsapp:focus-visible { background:#25D366; color:#fff; border-color:#25D366; }
.share-btn--line:hover,
.share-btn--line:focus-visible     { background:#06C755; color:#fff; border-color:#06C755; }
.share-btn--facebook:hover,
.share-btn--facebook:focus-visible { background:#1877F2; color:#fff; border-color:#1877F2; }
.share-btn:active { opacity:0.85; }
.share-btn:focus-visible { outline:2px solid currentColor; outline-offset:3px; }

/* ─────────────────────────────────────────────────────────────────────────────
   STICKY MOBILE CTA
───────────────────────────────────────────────────────────────────────────── */
.sticky-cta {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--white);
  border-top:1px solid var(--stone);
  box-shadow:0 -4px 20px rgba(11,31,58,0.12);
  padding:var(--s3) var(--s4);
  display:flex;
  align-items:center;
  gap:var(--s3);
  z-index:200;
}
.sticky-cta[hidden] { display:none; }
.sticky-cta__price {
  flex:1;
  font-family:var(--font-head);
  font-size:1.1rem;
  font-weight:600;
  color:var(--navy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sticky-cta__actions {
  display:flex;
  gap:var(--s2);
  flex-shrink:0;
}
.sticky-cta__btn {
  padding:var(--s2) var(--s3) !important;
  font-size:0.8rem !important;
  white-space:nowrap;
}
/* Hide sticky CTA on desktop (sidebar is visible) */
@media(min-width:900px) {
  .sticky-cta { display:none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   AGENT DIRECT CONTACT
───────────────────────────────────────────────────────────────────────────── */
.agent-contact-direct {
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  margin-top:var(--s3);
}
.agent-direct-btn {
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIMILAR PROPERTIES
───────────────────────────────────────────────────────────────────────────── */
.detail-similar {
  margin-top:var(--s16);
  padding:var(--s16) 0;
  border-top:1px solid var(--stone);
}
.listings-grid--similar {
  margin-top:0;
}
.detail-browse-more {
  padding:var(--s12) 0 var(--s16);
}
.browse-more {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s8);
  color:var(--slate);
  font-size:.95rem;
}
.browse-more a {
  display:inline-block;
  padding:.35rem .85rem;
  border:1px solid var(--stone);
  border-radius:999px;
  color:var(--navy);
  text-decoration:none;
  transition:background .15s,border-color .15s;
}
.browse-more a:hover {
  background:var(--ivory);
  border-color:var(--gold);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT / PDF BROCHURE
───────────────────────────────────────────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .whatsapp-btn,
  .back-to-top,
  .sticky-cta,
  .cookie-banner,
  .enquiry-form,
  .detail-share,
  .detail-similar,
  .gallery-thumbs { display:none !important; }

  body { font-size:12pt; color:#000; background:#fff; }
  .detail-layout { display:block; }
  .detail-sidebar { display:none; }
  .gallery-main__img { max-width:100%; height:auto; page-break-after:avoid; }
  a { color:inherit; text-decoration:none; }
  .detail-title { font-size:22pt; }
  .detail-price { font-size:18pt; font-weight:300; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SAVED FAVOURITES
───────────────────────────────────────────────────────────────────────────── */
.fav-btn {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  z-index: 2;
}
.fav-btn:hover { color: var(--champagne); background: #fff; }
.fav-btn--active { color: var(--champagne); }
.fav-btn--active svg { fill: var(--champagne); stroke: var(--champagne); }

.shortlist-link { display: inline-flex; align-items: center; gap: var(--s2); }
.shortlist-link[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────────────────────────────────────────── */
.section--testimonials { padding: var(--s16) 0; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s6);
  margin-top: var(--s8);
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s8);
  box-shadow: var(--sh-card);
  border-left: 3px solid var(--champagne);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s6);
}
.testimonial-card__quote {
  font-family: var(--font-head);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--slate);
  font-style: italic;
  margin: 0;
}
.testimonial-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.testimonial-card__name {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.9rem;
  font-family: var(--font-body);
}
.testimonial-card__detail {
  font-size: 0.78rem;
  color: var(--graphite);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}

/* ── Sold / track record page ────────────────────────────────────────────────── */
.page-header--sold { background: var(--sand); }
.page-header--sold .page-header__label { color: var(--teal); }
.page-header--sold h1 { color: var(--navy); }
.page-header--sold p { color: var(--graphite); }
.sold-section { padding-top: var(--s10); padding-bottom: var(--s8); }
.sold-count {
  font-size: 0.85rem;
  color: var(--graphite);
  margin-bottom: var(--s6);
}

/* ─────────────────────────────────────────────────────────────────────────────
   VIDEO EMBED
───────────────────────────────────────────────────────────────────────────── */
.detail-video { margin-top: var(--s8); }
.detail-video h2 { margin-bottom: var(--s4); }
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--navy-deep);
}
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FLOOR PLAN
───────────────────────────────────────────────────────────────────────────── */
.detail-floorplan {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--stone);
}
.detail-floorplan h3 {
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: var(--s4);
}
.floorplan-wrap { display: flex; flex-direction: column; gap: var(--s4); }
.floorplan-img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--stone); }

/* ─────────────────────────────────────────────────────────────────────────────
   YIELD HIGHLIGHT
───────────────────────────────────────────────────────────────────────────── */
.fact--yield span { color: var(--jade); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────────
   VIEW TOGGLE (grid / map)
───────────────────────────────────────────────────────────────────────────── */
.view-toggle {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) 0 var(--s4);
  border-bottom: 1px solid var(--stone);
  margin-bottom: var(--s4);
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  border: 1px solid var(--stone);
  background: var(--white);
  color: var(--graphite);
  font-size: 0.85rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.view-toggle__btn--active,
.view-toggle__btn:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LISTINGS MAP
───────────────────────────────────────────────────────────────────────────── */
.listings-map {
  height: 75vh;
  min-height: 500px;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  z-index: 0;
}
#mapView { padding: var(--s4) 0 var(--s12); }
#mapView[hidden] { display: none; }
#gridView[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   COMPARISON TABLE
───────────────────────────────────────────────────────────────────────────── */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.compare-label {
  text-align: left;
  padding: var(--s3) var(--s4);
  color: var(--graphite);
  font-weight: 500;
  font-size: 0.8rem;
  white-space: nowrap;
  width: 140px;
  border-right: 1px solid var(--stone);
  vertical-align: middle;
}
.compare-label--amenity { font-weight: 400; }
.compare-cell {
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--stone);
  text-align: center;
  color: var(--slate);
  vertical-align: middle;
}
.compare-row--highlight .compare-cell { background: var(--sand); }
.compare-row--highlight .compare-cell--price {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
}
.compare-row--photo .compare-cell { padding: var(--s4); }
.compare-img-link { display: block; text-decoration: none; }
.compare-img {
  width: 100%;
  max-width: 240px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--r);
  display: block;
  margin: 0 auto var(--s3);
}
.compare-title {
  display: block;
  font-weight: 600;
  color: var(--navy);
  font-size: 0.85rem;
  line-height: 1.4;
}
.compare-row--section-head th {
  background: var(--navy);
  color: var(--white);
  padding: var(--s2) var(--s4);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compare-check-icon { color: var(--jade); display: inline-block; }
.compare-dash { color: var(--muted); }
.compare-cell--yield { color: var(--jade); font-weight: 600; }
.compare-row--cta .compare-cell { padding: var(--s5); border-bottom: none; }
.compare-actions {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s8);
  flex-wrap: wrap;
}

/* Floating compare bar */
.compare-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--navy-deep);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  z-index: 300;
  flex-wrap: wrap;
}
.compare-bar[hidden] { display: none; }
.compare-bar__count {
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.compare-bar__hint {
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
  flex: 1;
}
.compare-bar__btn { flex-shrink: 0; }
.compare-bar__btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Compare checkbox on shortlist cards */
.shortlist-item {
  position: relative;
  display: flex;
  flex-direction: column;
}
.shortlist-item .listing-card { flex: 1; }
.compare-check {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.75rem;
  color: var(--graphite);
  font-family: var(--font-body);
  cursor: pointer;
  margin-bottom: var(--s2);
  user-select: none;
}
.compare-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.compare-check__box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--stone);
  border-radius: var(--r);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t) var(--ease);
  flex-shrink: 0;
}
.compare-check__box svg { opacity: 0; color: var(--white); }
.compare-check input:checked ~ .compare-check__box {
  background: var(--jade);
  border-color: var(--jade);
}
.compare-check input:checked ~ .compare-check__box svg { opacity: 1; }
.compare-check input:disabled ~ .compare-check__box { opacity: 0.4; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────────────────────
   LOCATION GUIDE
───────────────────────────────────────────────────────────────────────────── */
.page-header--guide {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: var(--white);
}
.page-header--guide .page-header__label { color: var(--champagne-l); }
.page-header--guide h1 { color: var(--white); }
.guide-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s10);
  padding-top: var(--s10);
  padding-bottom: var(--s10);
}
@media (min-width: 900px) {
  .guide-layout { grid-template-columns: 1fr 300px; }
}
.guide-content { max-width: 720px; }
.guide-cta-box { background: var(--sand); }
.guide-cta-box .btn--full + .btn--full { margin-top: var(--s3); }
.guide-sidebar__heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graphite);
  margin-bottom: var(--s3);
}
.guide-sidebar__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.guide-sidebar__links a {
  color: var(--jade);
  text-decoration: none;
  font-size: 0.9rem;
}
.guide-sidebar__links a:hover { text-decoration: underline; }

/* Intro */
.section--intro            { text-align:center; background:#fff; }
.section--intro .container { max-width:980px; }
.intro-eyebrow {
  font-family:var(--font-body); font-size:0.62rem; font-weight:500;
  letter-spacing:0.35em; text-transform:uppercase;
  color:var(--champagne); margin:0 0 var(--s4);
}
.intro-title {
  font-family:var(--font-head); font-weight:300;
  font-size:clamp(2rem,4.5vw,3rem); line-height:1.1;
  letter-spacing:-0.015em; color:var(--navy); margin:0 0 var(--s5);
}
.intro-lede { font-size:1.05rem; line-height:1.85; color:var(--slate); margin:0; }

/* ── Utility classes — replace inline style attributes (strict CSP, no 'unsafe-inline') ── */
.hidden { display: none; }
.honeypot { display: none; }
.form-footnote { margin-top: 1.25rem; font-size: 0.85rem; color: var(--ink-soft); }
.icon-inline { vertical-align: -1px; margin-right: 5px; opacity: 0.85; }

/* ─────────────────────────────────────────────────────────────────────────────
   BLOG (ADR-023)
───────────────────────────────────────────────────────────────────────────── */
.blog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:var(--s8);
}
.blog-card {
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--stone);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.blog-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(11,31,58,0.45); }
.blog-card__media { display:block; aspect-ratio:8 / 5; overflow:hidden; background:var(--sand); }
.blog-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.blog-card:hover .blog-card__media img { transform:scale(1.04); }
.blog-card__body { padding:var(--s5) var(--s5) var(--s6); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.blog-card__date {
  font-family:var(--font-body); font-size:0.72rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--champagne);
}
.blog-card__title { font-family:var(--font-head); font-size:1.32rem; font-weight:400; line-height:1.25; color:var(--navy); margin:0; }
.blog-card__title a { color:inherit; }
.blog-card__title a:hover { color:var(--jade); }
.blog-card__excerpt { color:var(--slate); font-size:0.92rem; line-height:1.6; margin:0; }
.blog-card__more {
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  color:var(--jade); font-weight:600; font-size:0.86rem; padding-top:var(--s2);
}
.blog-card__more:hover { gap:10px; }

/* Single post */
.blog-article { max-width:820px; }
.blog-hero { margin:0 0 var(--s8); border-radius:var(--r-lg); overflow:hidden; background:var(--sand); }
.blog-hero img { width:100%; height:auto; display:block; aspect-ratio:16 / 9; object-fit:cover; }
.blog-body { font-size:1.02rem; }
.blog-cta {
  margin-top:var(--s10); padding:var(--s6) var(--s8);
  background:var(--sand); border-radius:var(--r-lg);
  color:var(--navy); font-size:1.02rem;
}
.blog-cta p { margin:0; line-height:1.6; }
.blog-cta a { color:var(--jade); border-bottom:1px solid var(--jade-bd); }
.blog-cta a:hover { border-color:var(--jade); }
.blog-related { margin-top:var(--s16); padding-top:var(--s12); border-top:1px solid var(--stone); }
.blog-related__heading {
  font-family:var(--font-head); font-size:1.7rem; font-weight:300;
  color:var(--navy); margin-bottom:var(--s8);
}

/* ── Newsletter (ADR-026) ─────────────────────────────────────────────────── */
/* Homepage band */
.section--newsletter { background:var(--navy); color:#fff; }
.newsletter-band { max-width:680px; text-align:center; }
.newsletter-band__eyebrow {
  font-family:var(--font-body); font-size:0.62rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--champagne);
  margin:0 0 var(--s3);
}
/* Selector mirrors the global `.section > .container > h2` (which forces navy and
   would otherwise render the title navy-on-navy); equal/❯ specificity + later in
   the file means white wins. */
.section--newsletter > .container > .newsletter-band__title {
  font-family:var(--font-head); font-weight:300; font-size:2rem; line-height:1.15;
  color:#fff; margin:0 0 var(--s4);
}
.newsletter-band__lede {
  font-size:0.96rem; color:rgba(255,255,255,0.62); line-height:1.65;
  margin:0 auto var(--s8); max-width:540px;
}
.newsletter-band .newsletter-form { max-width:480px; margin:0 auto; }

/* Shared form */
.newsletter-form__label {
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap;
}
.newsletter-form__row { display:flex; flex-direction:column; gap:var(--s3); }
@media(min-width:480px){ .newsletter-form__row { flex-direction:row; } }
/* `.newsletter-form` prefix raises specificity above the global
   `input[type='email']` rule (0,1,1) so the dark-on-navy field + white text win
   in both the homepage band and the footer (otherwise the input rendered white
   with a near-invisible white placeholder/text). */
.newsletter-form .newsletter-form__input {
  flex:1; min-width:0; height:44px; padding:0 1rem;
  font-family:var(--font-body); font-size:0.92rem;
  background:rgba(255,255,255,0.08); color:#fff;
  border:1px solid rgba(255,255,255,0.22); border-radius:var(--r-sm);
  transition:border-color var(--t), background var(--t);
}
.newsletter-form .newsletter-form__input::placeholder { color:rgba(255,255,255,0.50); }
.newsletter-form .newsletter-form__input:focus {
  outline:none; border-color:var(--champagne);
  background:rgba(255,255,255,0.14); color:#fff;
}
/* Keep autofilled text readable on the dark field (Chrome forces white bg + dark
   text via its own UA layer otherwise). */
.newsletter-form .newsletter-form__input:-webkit-autofill,
.newsletter-form .newsletter-form__input:-webkit-autofill:focus {
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}
.newsletter-form__btn { white-space:nowrap; }
.newsletter-form__status {
  margin:var(--s3) 0 0; font-size:0.82rem; color:var(--champagne-l); text-align:left;
}
.newsletter-form__status--error { color:#E7A6A6; }