/* =========================================================
   HOSUR ALL PROPERTY — custom design system on top of Bootstrap 5
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,450;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --forest: #0F3D2E;
  --forest-deep: #0A2A1F;
  --gold: #C9A050;
  --gold-light: #E4C87A;
  --cream: #F7F3EA;
  --cream-dim: #EFE9DA;
  --ink: #171B18;
  --terracotta: #D9683B;
  --terracotta-deep: #B8532E;
  --blue-slate: #33506B;
  --paper: #FFFDF8;
  --line: rgba(15,61,46,0.14);
  --line-light: rgba(247,243,234,0.18);

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Bootstrap variable overrides */
  --bs-primary: #0F3D2E;
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--cream);
  --bs-link-color: var(--terracotta);
  --bs-link-hover-color: var(--terracotta-deep);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; }
a{ text-decoration:none; }
::selection{ background: var(--gold-light); color: var(--forest-deep); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Typography helpers ---------- */
.font-display{ font-family: var(--font-display); }
.font-mono{ font-family: var(--font-mono); }
h1,h2,h3,h4,.display-font{ font-family: var(--font-display); letter-spacing:-0.015em; color: var(--forest-deep); }
.text-terracotta{ color: var(--terracotta) !important; }
.text-gold{ color: var(--gold) !important; }
.text-forest{ color: var(--forest-deep) !important; }
.bg-forest{ background: var(--forest-deep) !important; }
.bg-cream-dim{ background: var(--cream-dim) !important; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:500;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); display:inline-block; }
.eyebrow.on-dark{ color: var(--gold-light); }
.eyebrow.on-dark::before{ background: var(--gold-light); }

/* ---------- Buttons ---------- */
.btn{ font-weight:600; border-radius:999px; padding:.75rem 1.6rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.btn-terracotta{
  background: linear-gradient(155deg, var(--terracotta), var(--terracotta-deep));
  color:#fff; border:none;
  box-shadow: 0 8px 20px -8px rgba(217,104,59,.55);
}
.btn-terracotta:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(217,104,59,.6); color:#fff; }
.btn-gold{
  background: linear-gradient(155deg, var(--gold-light), var(--gold));
  color: var(--forest-deep); border:none;
  box-shadow: 0 8px 20px -8px rgba(201,160,80,.55);
}
.btn-gold:hover{ transform: translateY(-2px); color: var(--forest-deep); }
.btn-outline-forest{
  border:1.5px solid var(--forest-deep); color: var(--forest-deep); background:transparent;
}
.btn-outline-forest:hover{ background: var(--forest-deep); color: var(--cream); }
.btn-outline-cream{
  border:1.5px solid rgba(247,243,234,.5); color: var(--cream); background: rgba(255,255,255,.04);
}
.btn-outline-cream:hover{ background: rgba(255,255,255,.14); color: var(--cream); border-color: var(--gold-light); }
.btn-sm-round{ width:38px; height:38px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }

/* =========================================================
   TOP UTILITY BAR — slim strip above the main nav, desktop only.
   Establishes trust (phone/email/hours) before the fold even loads.
   ========================================================= */
.top-bar{
  position:fixed; top:0; left:0; right:0; z-index:1031;
  background: var(--forest-deep);
  color: rgba(247,243,234,.85);
  font-family: var(--font-mono);
  font-size:.72rem; letter-spacing:.03em;
  padding: 7px 0;
  transform: translateY(0);
  max-height: 34px; opacity:1; overflow:hidden;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
}
.top-bar.tb-collapsed{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; }
.top-bar .tb-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.top-bar a{ color: rgba(247,243,234,.85); transition: color .2s var(--ease); }
.top-bar a:hover{ color: var(--gold-light); }
.top-bar .tb-left{ display:flex; align-items:center; gap:22px; }
.top-bar .tb-left span, .top-bar .tb-left a{ display:inline-flex; align-items:center; gap:7px; }
.top-bar .tb-left i{ color: var(--gold-light); font-size:.78rem; }
.top-bar .tb-right{ display:flex; align-items:center; gap:16px; }
.top-bar .tb-social a{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); font-size:.72rem; }
.top-bar .tb-social a:hover{ background: var(--gold); color: var(--forest-deep); }
@media (max-width: 991.98px){ .top-bar{ display:none; } }

/* =========================================================
   NAVBAR
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  padding: 16px 0;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), top .4s var(--ease);
}
/* Only the homepage ships the slim top utility bar, so only there does the header start pushed down */
body.home-page .site-header{ top:34px; }
body.home-page .site-header.tb-hidden{ top:0; }
@media (max-width: 991.98px){ body.home-page .site-header{ top:0; } }
.site-header.scrolled{
  padding: 9px 0;
  top:0;
  background: rgba(247,243,234,.86);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -22px rgba(15,61,46,.35);
}
@media (max-width: 991.98px){ .site-header{ top:0 !important; } }

.navbar-brand{
  opacity:0; transform: translateY(-10px);
  animation: navBrandIn .8s var(--ease) forwards; animation-delay:.1s;
}
@keyframes navBrandIn{ to{ opacity:1; transform:translateY(0); } }
.navbar-brand-logo{
  height: 78px;
  width:auto;
  display:block;
  transition: height .35s var(--ease), filter .35s var(--ease);
  filter: drop-shadow(0 6px 14px rgba(15,61,46,.18));
}
.site-header.scrolled .navbar-brand-logo{ height: 58px; }

.main-nav{ opacity:0; animation: navBrandIn .8s var(--ease) forwards; animation-delay:.22s; }
.main-nav .nav-link{
  position:relative;
  font-weight:500; font-size:.92rem; color: var(--forest-deep) !important;
  padding: .55rem 1rem !important; border-radius: 8px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.main-nav .nav-link::after{
  content:''; position:absolute; left:1rem; right:1rem; bottom:.32rem; height:2px;
  background: var(--terracotta); border-radius:2px;
  transform: scaleX(0); transform-origin:left; transition: transform .3s var(--ease);
}
.main-nav .nav-link:hover{ background: rgba(15,61,46,.07); }
.main-nav .nav-link:hover::after{ transform: scaleX(1); }
.main-nav .nav-link.active{ color: var(--terracotta) !important; font-weight:600; }
.main-nav .nav-link.active::after{ transform: scaleX(1); }
.header-cta-group{ opacity:0; animation: navBrandIn .8s var(--ease) forwards; animation-delay:.32s; }

.navbar-toggler{
  border:none; padding:.5rem; box-shadow:none !important;
  width:44px; height:44px; border-radius:10px;
  background: rgba(15,61,46,.07) !important;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.navbar-toggler-icon-custom{ width:22px; height:16px; position:relative; display:block; flex-shrink:0; }
.navbar-toggler-icon-custom span{
  position:absolute; left:0; right:0; height:2px; background: var(--forest-deep); border-radius:2px;
  transition: all .3s var(--ease);
}
.navbar-toggler-icon-custom span:nth-child(1){ top:0; }
.navbar-toggler-icon-custom span:nth-child(2){ top:7px; }
.navbar-toggler-icon-custom span:nth-child(3){ top:14px; }
/* Bootstrap hides .navbar-toggler above the expand breakpoint via .navbar-expand-lg; below it, ensure it's a flex item, not display:none */
@media (max-width: 991.98px){
  .navbar-toggler{ display:flex !important; }
}

/* Offcanvas mobile menu */
.offcanvas-real-estate{ background: var(--forest-deep); color: var(--cream); width: min(85vw, 360px); }
.offcanvas-real-estate .nav-link{
  font-family: var(--font-display); font-size:1.5rem; color: var(--cream) !important;
  padding: .85rem 0 !important; border-bottom:1px solid var(--line-light);
}
.offcanvas-real-estate .nav-link.active{ color: var(--gold-light) !important; }
.offcanvas-real-estate .btn-close{ filter: invert(1) grayscale(1) brightness(2); opacity:.8; }

/* =========================================================
   HERO / PAGE HEADER (for inner pages)
   ========================================================= */
.page-hero{
  padding: 172px 0 70px;
  background:
    radial-gradient(ellipse 800px 400px at 85% -10%, rgba(201,160,80,.18), transparent 60%),
    radial-gradient(ellipse 600px 400px at -5% 30%, rgba(15,61,46,.08), transparent 55%),
    var(--cream);
  position:relative; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(15,61,46,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,61,46,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 10%, black, transparent 90%);
  pointer-events:none;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ font-weight:600; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height:1.08; }
.page-hero .lead{ color:#3A4640; font-size:1.05rem; max-width:560px; }

.breadcrumb-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--blue-slate); background: rgba(15,61,46,.06); padding:.4rem .9rem; border-radius:999px; margin-bottom: 1.2rem;
}
.breadcrumb-pill a{ color: var(--blue-slate); }
.breadcrumb-pill a:hover{ color: var(--terracotta); }

/* =========================================================
   HOME HERO — richer, standalone top-of-page treatment.
   Scoped entirely to `.home-hero` / `body.home-page` so no
   other page (which still uses `.page-hero`) is affected.
   Palette: deep twilight teal → indigo, with coral & amber
   glow — distinct from the forest/gold used elsewhere.
   ========================================================= */
.home-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding-bottom: 96px;
  background:
    radial-gradient(ellipse 950px 580px at 92% -10%, rgba(255,159,102,.32), transparent 58%),
    radial-gradient(ellipse 800px 540px at 4% 12%, rgba(255,196,102,.20), transparent 55%),
    radial-gradient(ellipse 780px 520px at 50% 118%, rgba(94,84,214,.28), transparent 60%),
    linear-gradient(158deg, #0B2540 0%, #0A1F3D 32%, #161B3E 62%, #1F1440 100%);
  color: var(--cream);
}
/* fine blueprint grid, faded toward the edges */
.home-hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,196,102,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,196,102,.09) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 20%, #000 30%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 20%, #000 30%, transparent 88%);
}
.home-hero .container{ position:relative; z-index:2; }

/* floating color orbs for depth & motion */
.hh-orb{ position:absolute; border-radius:50%; filter: blur(80px); z-index:-1; pointer-events:none; }
.hh-orb.o1{ width:480px; height:480px; right:-140px; top:-70px; background: rgba(255,159,102,.34); animation: hhFloat 15s ease-in-out infinite; }
.hh-orb.o2{ width:380px; height:380px; left:-160px; top:38%; background: rgba(94,84,214,.32); animation: hhFloat 19s ease-in-out infinite reverse; }
.hh-orb.o3{ width:340px; height:340px; left:36%; bottom:-190px; background: rgba(255,196,102,.22); animation: hhFloat 22s ease-in-out infinite .4s; }
@keyframes hhFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(26px,-30px,0) scale(1.07); }
}

/* text & UI contrast overrides for the dark hero */
.home-hero .hh-eyebrow{ color: #FFC466; }
.home-hero .hh-eyebrow::before{ background: #FFC466; }
.home-hero h1{ color: var(--cream); }
.home-hero h1 .text-terracotta{ color: #FF9F66 !important; }
.home-hero .lead{ color: rgba(247,243,234,.82); }
.home-hero .hh-seal{ box-shadow: 0 0 0 6px rgba(255,196,102,.16), 0 10px 30px -6px rgba(255,159,102,.55), inset 0 1px 2px rgba(255,255,255,.5); }
.home-hero .btn-outline-forest{ border-color: rgba(247,243,234,.55); color: var(--cream); }
.home-hero .btn-outline-forest:hover{ background: var(--cream); color: #161B3E; border-color: var(--cream); }
.home-hero .stat-strip{ border-top-color: rgba(247,243,234,.16); }
.home-hero .stat-item{ border-right-color: rgba(247,243,234,.16); }
.home-hero .stat-item .num{ color: #FFC466; }
.home-hero .stat-item:hover .num{ color: #FF9F66; }
.home-hero .stat-item .lbl{ color: rgba(247,243,234,.68); }

/* curved divider flowing into the dark marquee strip below */
.hh-wave{ display:block; width:100%; height:64px; position:absolute; left:0; right:0; bottom:-1px; z-index:1; }
.hh-wave path{ fill: var(--forest-deep); }

/* header: transparent over a dark hero needs light nav text on home, until scrolled */
body.home-page .site-header:not(.scrolled) .main-nav .nav-link{ color: rgba(247,243,234,.9) !important; }
body.home-page .site-header:not(.scrolled) .main-nav .nav-link:hover{ background: rgba(255,255,255,.1); color:#fff !important; }
body.home-page .site-header:not(.scrolled) .main-nav .nav-link.active{ color: #FFC466 !important; }
body.home-page .site-header:not(.scrolled) .main-nav .nav-link::after{ background: #FFC466; }
body.home-page .site-header:not(.scrolled) .btn-outline-forest{ border-color: rgba(247,243,234,.55); color: var(--cream); }
body.home-page .site-header:not(.scrolled) .btn-outline-forest:hover{ background: var(--cream); color: #161B3E; border-color: var(--cream); }
body.home-page .site-header:not(.scrolled) .navbar-toggler-icon-custom span{ background: var(--cream); }
body.home-page .site-header:not(.scrolled) .navbar-brand-logo{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
body.home-page .top-bar{ background: #081a13; }

/* Choreographed hero entrance — independent of scroll-triggered .reveal,
   so the top of the page always feels intentional on first paint. */
.home-hero .hh-seal-wrap,
.home-hero .hh-eyebrow,
.home-hero h1,
.home-hero .lead,
.home-hero .hh-cta-row,
.home-hero .stat-strip{
  opacity:0; transform: translateY(22px);
  animation: heroRise .9s var(--ease) forwards;
}
.home-hero .hh-seal-wrap{ animation-delay:.05s; }
.home-hero .hh-eyebrow{ animation-delay:.15s; }
.home-hero h1{ animation-delay:.28s; }
.home-hero .lead{ animation-delay:.42s; }
.home-hero .hh-cta-row{ animation-delay:.56s; }
.home-hero .stat-strip{ animation-delay:.7s; }
@keyframes heroRise{ to{ opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .hh-orb{ animation:none !important; }
  .home-hero .hh-seal-wrap, .home-hero .hh-eyebrow, .home-hero h1, .home-hero .lead, .home-hero .hh-cta-row, .home-hero .stat-strip{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}
@media (max-width: 991.98px){
  .home-hero{ padding-bottom: 70px; padding-top: 150px !important; }
}
@media (max-width: 575.98px){
  .home-hero{ padding-bottom: 56px; padding-top: 132px !important; }
  .hh-orb{ filter: blur(56px); }
}

/* =========================================================
   SEAL / BADGE
   ========================================================= */
.seal{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 60%, #A9803A 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px -4px rgba(201,160,80,.55), inset 0 1px 2px rgba(255,255,255,.5);
  position:relative;
}
.seal::after{ content:''; position:absolute; inset:4px; border-radius:50%; border:1px dashed rgba(15,61,46,.35); }

/* =========================================================
   STAT STRIP
   ========================================================= */
.stat-strip{ border-top:1px solid var(--line); padding-top:26px; margin-top:10px; }
.stat-item{ padding-right:28px; margin-right:28px; border-right:1px solid var(--line); transition: transform .3s var(--ease); }
.stat-item:last-child{ border-right:none; }
.stat-item:hover{ transform: translateY(-3px); }
.stat-item .num{ font-family:var(--font-display); font-weight:700; font-size:1.85rem; color:var(--forest-deep); line-height:1; display:block; transition: color .3s var(--ease); }
.stat-item:hover .num{ color: var(--terracotta); }
.stat-item .lbl{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-slate); opacity:.8; margin-top:6px; display:block; }

/* Entrance eyebrow seal — gentle pulse ring so it reads as a live badge, not a static icon */
.seal{ transition: transform .35s var(--ease); }
.seal::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border: 1px solid rgba(201,160,80,.5);
  animation: sealPulse 2.6s ease-out infinite;
}
@keyframes sealPulse{
  0%{ transform: scale(.9); opacity:.9; }
  100%{ transform: scale(1.35); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .seal::before{ animation:none; } }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee-strip{ background: var(--forest-deep); overflow:hidden; padding:14px 0; border-top:1px solid rgba(201,160,80,.25); border-bottom:1px solid rgba(201,160,80,.25); }
.marquee-track{ display:flex; gap:44px; white-space:nowrap; width:max-content; animation: marquee 32s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-track span{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(247,243,234,.65); display:flex; align-items:center; gap:12px; }
.marquee-track span::after{ content:'◆'; color:var(--gold); font-size:.55rem; margin-left:32px; }



   SECTION HEADERS
   ========================================================= */
.section{ padding: 100px 0; }
.section.tight{ padding: 80px 0; }
.section-head h2{ font-weight:600; font-size: clamp(1.9rem, 3vw, 2.6rem); margin-top:12px; }
.section-head p{ color:#4A554E; font-size:.97rem; }

/* =========================================================
   CATEGORY TILES
   ========================================================= */
.cat-tile{
  position:relative; background: var(--paper); border:1px solid var(--line); border-radius:16px;
  padding: 26px 22px; height:100%; display:block; color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  overflow:hidden;
}
.cat-tile::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--gold), var(--terracotta)); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); }
.cat-tile:hover{ transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(15,61,46,.25); border-color:transparent; color:var(--ink); }
.cat-tile:hover::before{ transform: scaleX(1); }
.cat-icon{ width:46px; height:46px; border-radius:12px; background: rgba(15,61,46,.06); display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition: background .35s var(--ease); }
.cat-tile:hover .cat-icon{ background: var(--forest-deep); }
.cat-icon i{ font-size:1.25rem; color: var(--forest-deep); transition: color .35s var(--ease); }
.cat-tile:hover .cat-icon i{ color: var(--gold-light); }
.cat-tile h3{ font-size:1.05rem; font-weight:600; margin-bottom:5px; }
.cat-tile .cat-count{ font-family:var(--font-mono); font-size:.7rem; color:var(--blue-slate); opacity:.8; }
.cat-arrow{ position:absolute; bottom:20px; right:18px; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateX(-6px); transition: all .35s var(--ease); }
.cat-tile:hover .cat-arrow{ opacity:1; transform:translateX(0); background:var(--gold); border-color:var(--gold); }

/* =========================================================
   LISTING CARDS
   ========================================================= */
.listing-card{ background: var(--paper); border-radius:18px; border:1px solid var(--line); overflow:hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); height:100%; display:flex; flex-direction:column; }
.listing-card:hover{ transform: translateY(-8px); box-shadow: 0 30px 50px -22px rgba(15,61,46,.3); }
.listing-media{ height:210px; position:relative; overflow:hidden; background: linear-gradient(155deg, var(--forest), var(--blue-slate)); }
.listing-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.listing-card:hover .listing-media img{ transform: scale(1.07); }
.lm-badge{ position:absolute; top:14px; left:14px; background: rgba(255,253,248,.92); color:var(--forest-deep); font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:6px 12px; border-radius:999px; }
.lm-fav{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; background: rgba(255,253,248,.92); display:flex; align-items:center; justify-content:center; }
.lm-fav i{ color: var(--terracotta); font-size:.9rem; }
.lm-price{ position:absolute; bottom:14px; left:14px; font-family:var(--font-mono); font-weight:600; font-size:1rem; color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.listing-body{ padding:20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.listing-body h3{ font-size:1.08rem; font-weight:600; line-height:1.3; }
.listing-body .lb-desc{ font-size:.86rem; color:#565f5a; flex:1; }
.listing-meta{ display:flex; align-items:center; gap:16px; padding-top:12px; border-top:1px solid var(--line); font-size:.77rem; color:var(--blue-slate); flex-wrap:wrap; }
.listing-meta span{ display:flex; align-items:center; gap:6px; }
.listing-meta i{ opacity:.7; }

.filter-pill{ padding:.5rem 1.1rem; border-radius:999px; font-size:.85rem; font-weight:500; border:1px solid var(--line); color: var(--forest-deep); background: var(--paper); transition: all .25s var(--ease); }
.filter-pill.active{ background: linear-gradient(155deg, var(--forest), var(--forest-deep)); color:var(--cream); border-color: var(--forest-deep); box-shadow: 0 10px 22px -10px rgba(15,61,46,.5); transform: translateY(-1px); }
.filter-pill:hover:not(.active){ background: rgba(15,61,46,.06); border-color: var(--forest-deep); transform: translateY(-1px); }

/* =========================================================
   DARK SPLIT SECTION
   ========================================================= */
.split-dark{ background: var(--forest-deep); color: var(--cream); position:relative; overflow:hidden; }
.split-dark::before{ content:''; position:absolute; top:-30%; right:-10%; width:600px; height:600px; border-radius:50%; background: radial-gradient(circle, rgba(201,160,80,.15), transparent 70%); }
.split-dark h2{ color: var(--cream); }
.split-dark p{ color: rgba(247,243,234,.65); }

.svc-item{ display:flex; gap:20px; padding:26px 0; border-bottom:1px solid var(--line-light); }
.svc-item:first-child{ padding-top:0; }
.svc-num{ font-family:var(--font-mono); color:var(--gold-light); font-size:.82rem; opacity:.8; padding-top:4px; flex-shrink:0; }
.svc-item h4{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; margin-bottom:6px; color:var(--cream); }
.svc-item p{ color: rgba(247,243,234,.62); font-size:.9rem; margin-bottom:0; }

.trust-panel{ background: rgba(247,243,234,.05); border:1px solid var(--line-light); border-radius:22px; padding:36px; backdrop-filter: blur(8px); }
.trust-panel h3{ color: var(--cream); font-weight:600; font-size:1.4rem; margin-bottom:4px; }
.trust-panel .tp-sub{ color: rgba(247,243,234,.6); font-size:.88rem; }
.trust-item{ display:flex; align-items:flex-start; gap:13px; }
.trust-icon{ width:38px; height:38px; border-radius:11px; flex-shrink:0; background: linear-gradient(155deg, var(--gold-light), var(--gold)); display:flex; align-items:center; justify-content:center; }
.trust-icon i{ color: var(--forest-deep); font-size:1rem; }
.trust-item h5{ font-size:.92rem; font-weight:600; margin-bottom:3px; color: var(--cream); }
.trust-item p{ font-size:.78rem; color: rgba(247,243,234,.55); margin-bottom:0; }

/* =========================================================
   FOUNDERS / TEAM
   ========================================================= */
.founder-card{ background: var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px; display:flex; gap:20px; align-items:flex-start; height:100%; transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.founder-card:hover{ box-shadow: 0 24px 44px -22px rgba(15,61,46,.28); transform: translateY(-4px); }
.founder-avatar{ width:110px; height:110px; border-radius:50%; flex-shrink:0; overflow:hidden; background: linear-gradient(155deg, var(--forest), var(--blue-slate)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color: var(--gold-light); border:3px solid var(--gold-light); box-shadow: 0 14px 30px -12px rgba(15,61,46,.45); }
.founder-avatar img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.founder-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 12px; }
.founder-badges .credential-badge{ font-size:.66rem; padding:6px 12px 6px 9px; }
.founder-info h4{ font-size:1.1rem; font-weight:600; margin-bottom:1px; }
.founder-info .f-role{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--terracotta); margin-bottom:10px; display:block; }
.founder-info p{ font-size:.88rem; line-height:1.7; color:#565f5a; margin-bottom:0; }

/* =========================================================
   TIMELINE (about page)
   ========================================================= */
.timeline{ position:relative; padding-left: 36px; }
.timeline::before{ content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background: var(--line); }
.timeline-item{ position:relative; padding-bottom: 36px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{ position:absolute; left:-36px; top:2px; width:20px; height:20px; border-radius:50%; background: var(--paper); border:3px solid var(--terracotta); }
.timeline-item h5{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color: var(--terracotta); margin-bottom:6px; }
.timeline-item h4{ font-size:1.1rem; font-weight:600; margin-bottom:6px; }
.timeline-item p{ color:#4A554E; font-size:.92rem; margin-bottom:0; }

/* =========================================================
   LOCATION CHIPS
   ========================================================= */
.loc-chip{ padding:.7rem 1.3rem; border-radius:999px; border:1px solid var(--line); font-size:.87rem; font-weight:500; color: var(--forest-deep); display:inline-flex; align-items:center; gap:8px; transition: all .25s var(--ease); background: var(--paper); }
.loc-chip i{ opacity:.55; font-size:.85rem; }
.loc-chip:hover{ background: var(--forest-deep); color: var(--cream); border-color: var(--forest-deep); transform: translateY(-2px); }
.loc-chip:hover i{ opacity:1; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{ background: linear-gradient(155deg, var(--terracotta), var(--terracotta-deep)); border-radius:28px; padding:56px; position:relative; overflow:hidden; }
.cta-band::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(circle, rgba(255,255,255,.12) 1.5px, transparent 1.5px); background-size:22px 22px; opacity:.5; }
.cta-band > *{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; font-weight:600; }
.cta-band p{ color: rgba(255,255,255,.85); margin-bottom:0; }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{ background: var(--forest-deep); color: var(--cream); padding: 80px 0 0; margin-top: 100px; }
.footer-logo{ height:50px; width:auto; }
footer.site-footer p{ color: rgba(247,243,234,.55); font-size:.87rem; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-light); display:flex; align-items:center; justify-content:center; transition: all .25s var(--ease); color: var(--cream); }
.footer-social a:hover{ background: var(--gold); border-color: var(--gold); color: var(--forest-deep); }
.footer-col h5{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-light); margin-bottom:20px; }
.footer-col a{ color: rgba(247,243,234,.68); font-size:.89rem; display:block; margin-bottom:12px; transition: color .2s var(--ease); }
.footer-col a:hover{ color: var(--cream); }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; color: rgba(247,243,234,.68); font-size:.86rem; margin-bottom:14px; }
.footer-contact i{ flex-shrink:0; margin-top:3px; color: var(--gold-light); }
.footer-contact a.map-link{ color: rgba(247,243,234,.68); text-decoration:none; transition: color .25s var(--ease); }
.footer-contact a.map-link:hover{ color: var(--gold-light); text-decoration:underline; }
.map-link-card{ color:inherit; text-decoration:none; display:block; transition: color .25s var(--ease); }
.map-link-card:hover{ color: var(--terracotta); text-decoration:underline; }
.office-address-link{ color:inherit; text-decoration:none; display:block; transition: color .25s var(--ease); }
.office-address-link:hover{ color: var(--gold-light); text-decoration:underline; }
.footer-bottom{ border-top:1px solid var(--line-light); padding:22px 0; font-size:.8rem; color: rgba(247,243,234,.45); }
.footer-bottom a{ color: rgba(247,243,234,.45); }
.footer-bottom a:hover{ color: var(--gold-light); }

/* =========================================================
   INTRO VIDEO GATE
   ========================================================= */
#intro-gate{ position:fixed; inset:0; z-index:2000; background: var(--forest-deep); overflow:hidden; transition: opacity 1s var(--ease), visibility 1s var(--ease); }
#intro-gate.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#intro-gate video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: brightness(.55) saturate(1.05); }
.intro-vignette{ position:absolute; inset:0; background: radial-gradient(ellipse at center, rgba(10,42,31,.15) 30%, rgba(8,26,20,.86) 100%); pointer-events:none; }
.intro-skip{ position:absolute; bottom:30px; right:24px; z-index:3; color: var(--cream); font-family: var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line-light); padding:11px 20px; border-radius:999px; background: rgba(255,255,255,.05); backdrop-filter: blur(6px); transition: background .3s var(--ease), border-color .3s var(--ease); }
.intro-skip:hover{ background: rgba(255,255,255,.14); border-color: var(--gold); }
.intro-progress{ position:absolute; bottom:0; left:0; height:3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); width:0%; z-index:3; }
.intro-caption{ position:absolute; top:24px; left:24px; z-index:3; font-family: var(--font-mono); color: rgba(247,243,234,.75); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }

/* ---------- Welcome text overlay: animated brand reveal over the intro video ---------- */
.intro-welcome{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  z-index:3; text-align:center; padding:0 24px; width:100%; max-width:760px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  pointer-events:none;
}
.intro-welcome .iw-kicker{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color: var(--gold-light); opacity:0;
  animation: iwFadeUp .9s var(--ease) forwards; animation-delay:.15s;
}
.intro-welcome .iw-main{
  font-family: var(--font-display); font-weight:600; line-height:1.05;
  font-size: clamp(1.5rem, 6vw, 4.4rem); color:#fff;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.05em;
  max-width:100%;
}
.intro-welcome .iw-main .iw-word{
  display:inline-block; opacity:0; filter: blur(6px);
  transform: translateY(28px) scale(.94);
  animation: iwWordIn 1s cubic-bezier(0.16,1,0.3,1) forwards;
  max-width:100%; overflow-wrap:break-word;
}
.intro-welcome .iw-main .iw-word.gold{ color: var(--gold-light); font-style:italic; font-weight:500; font-size:.86em; }
.intro-welcome .iw-main .iw-word:nth-child(1){ animation-delay:.35s; }
.intro-welcome .iw-main .iw-word:nth-child(2){ animation-delay:.5s; }
.intro-welcome .iw-domain{
  font-family: var(--font-mono); font-weight:500; letter-spacing:.02em;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  color: rgba(247,243,234,.92);
  opacity:0; transform: translateY(14px);
  animation: iwFadeUp .8s var(--ease) forwards; animation-delay:1.05s;
  display:flex; align-items:center; gap:10px;
}
.intro-welcome .iw-domain::before,
.intro-welcome .iw-domain::after{ content:''; width:34px; height:1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.intro-welcome .iw-tag{
  font-family: var(--font-body); font-size:.92rem; color: rgba(247,243,234,.62); max-width:420px;
  opacity:0; transform: translateY(10px);
  animation: iwFadeUp .8s var(--ease) forwards; animation-delay:1.3s;
}
@keyframes iwFadeUp{ to{ opacity:1; transform:translateY(0); } }
@keyframes iwWordIn{ to{ opacity:1; filter: blur(0); transform: translateY(0) scale(1); } }

/* Verified seal badge that pops in last, echoing the hero's seal motif */
.intro-welcome .iw-seal{
  width:56px; height:56px; border-radius:50%; margin-bottom:6px;
  background: conic-gradient(from 0deg, var(--gold-light), var(--gold) 25%, #A9803A 50%, var(--gold) 75%, var(--gold-light) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,255,255,.5);
  opacity:0; transform: scale(.5) rotate(-40deg);
  animation: iwSealPop .8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay:0s;
}
.intro-welcome .iw-seal i{ color: var(--forest-deep); font-size:1.4rem; }
@keyframes iwSealPop{ to{ opacity:1; transform: scale(1) rotate(0deg); } }

@media (max-width: 575.98px){
  .intro-welcome{ gap:10px; }
  .intro-welcome .iw-seal{ width:46px; height:46px; }
  .intro-welcome .iw-seal i{ font-size:1.15rem; }
  .intro-welcome .iw-tag{ font-size:.82rem; }
  .intro-welcome .iw-main{ flex-direction:column; gap:.08em; }
  .intro-welcome .iw-domain{ font-size:.78rem; letter-spacing:0; gap:8px; }
  .intro-welcome .iw-domain::before, .intro-welcome .iw-domain::after{ width:20px; }
}
@media (prefers-reduced-motion: reduce){
  .intro-welcome .iw-kicker, .intro-welcome .iw-main .iw-word, .intro-welcome .iw-domain, .intro-welcome .iw-tag, .intro-welcome .iw-seal{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
}

/* =========================================================
   REVEAL ANIM
   ========================================================= */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* =========================================================
   FORMS
   ========================================================= */
.form-control, .form-select{
  border-radius: 12px; border:1.5px solid var(--line); padding: .75rem 1rem; font-size:.92rem;
  background: var(--paper); color: var(--ink);
}
.form-control:focus, .form-select:focus{ border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(217,104,59,.14); }
.form-label{ font-weight:600; font-size:.85rem; color: var(--forest-deep); margin-bottom:.4rem; }
.form-card{
  background: var(--paper); border:1px solid var(--line); border-radius:22px; padding: 40px;
  box-shadow: 0 30px 60px -32px rgba(15,61,46,.25), inset 0 1px 0 rgba(255,255,255,.6);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.form-card:focus-within{ border-color: rgba(201,160,80,.5); box-shadow: 0 34px 70px -30px rgba(15,61,46,.32), 0 0 0 4px rgba(201,160,80,.1); }

/* =========================================================
   MAP EMBED
   ========================================================= */
.map-frame{ border-radius:20px; overflow:hidden; border:1px solid var(--line); filter: grayscale(.15) sepia(.08); }

/* =========================================================
   ACCORDION (services page FAQ / process)
   ========================================================= */
.accordion-real-estate .accordion-item{ background: var(--paper); border:1px solid var(--line); border-radius:14px !important; margin-bottom:14px; overflow:hidden; }
.accordion-real-estate .accordion-button{ font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--forest-deep); background: var(--paper); padding: 1.2rem 1.4rem; }
.accordion-real-estate .accordion-button:not(.collapsed){ background: var(--forest-deep); color: var(--cream); box-shadow:none; }
.accordion-real-estate .accordion-button:focus{ box-shadow:none; }
.accordion-real-estate .accordion-button::after{ filter: none; }
.accordion-real-estate .accordion-body{ padding: 1.3rem 1.4rem 1.5rem; color:#4A554E; font-size:.92rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px){
  .stat-item{ padding-right:20px; margin-right:20px; }
}
@media (max-width: 767.98px){
  .page-hero{ padding: 130px 0 56px; }
  .section{ padding: 64px 0; }
  .section.tight{ padding:56px 0; }
  .navbar-brand-logo{ height:56px; }
  .site-header.scrolled .navbar-brand-logo{ height:46px; }
  .deed-card.dc3{ display:none; }
  .floating-badge{ right:0; bottom:-16px; padding:11px 14px; }
  .cta-band{ padding:38px 26px; text-align:center; }
  .stat-item{ border-right:none !important; margin-right:0 !important; padding-right:0 !important; width:50%; margin-bottom:16px; }
  .stat-strip{ display:flex; flex-wrap:wrap; }
}

/* =========================================================
   PREMIUM UPGRADE LAYER — gold-foil text, glass panels,
   editorial content blocks, pull-quotes, refined dividers
   ========================================================= */

/* Ambient grain texture for premium depth (subtle, applied via ::before on body) */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  opacity:.035;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* Gold-foil gradient text for premium emphasis */
.text-foil{
  background: linear-gradient(120deg, #8a6c2e 0%, var(--gold) 22%, var(--gold-light) 45%, #fff3d6 52%, var(--gold-light) 60%, var(--gold) 78%, #8a6c2e 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foilShift 7s ease-in-out infinite;
}
@keyframes foilShift{
  0%,100%{ background-position: 0% center; }
  50%{ background-position: 100% center; }
}

/* Ornamental divider — small centered mark used between eyebrow and heading, or to separate editorial blocks */
.ornament-divider{
  display:flex; align-items:center; gap:14px; margin: 22px 0;
}
.ornament-divider::before, .ornament-divider::after{
  content:''; flex:1; height:1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.ornament-divider .ornament-mark{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(155deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 0 4px rgba(201,160,80,.15);
  flex-shrink:0;
}
.ornament-divider.on-dark::before, .ornament-divider.on-dark::after{
  background: linear-gradient(90deg, transparent, var(--line-light), transparent);
}

/* Premium glass panel — frosted, layered depth, for hero-adjacent or featured content */
.glass-panel{
  background: linear-gradient(155deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 26px;
  box-shadow: 0 40px 80px -30px rgba(15,61,46,.25), inset 0 1px 0 rgba(255,255,255,.8);
}
.glass-panel.on-dark{
  background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Editorial lead paragraph — larger, serif-tinged opening for long-form content sections */
.editorial-lead{
  font-family: var(--font-display);
  font-weight: 450;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.5;
  color: var(--forest-deep);
  letter-spacing: -0.005em;
}
.editorial-lead .drop-cap::first-letter{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.8em;
  float: left;
  line-height: 0.82;
  padding: .04em .08em 0 0;
  color: var(--terracotta);
}

/* Editorial body text for long-form narrative sections */
.editorial-body p{
  font-size: 1.02rem;
  line-height: 1.85;
  color: #3A4640;
  margin-bottom: 1.4rem;
}
.editorial-body p:last-child{ margin-bottom:0; }

/* Pull-quote block */
.pull-quote{
  position:relative;
  padding: 8px 0 8px 32px;
  border-left: 3px solid var(--gold);
  margin: 2.2rem 0;
}
.pull-quote p{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--forest-deep);
  line-height: 1.5;
  margin-bottom: .5rem;
}
.pull-quote cite{
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* Premium credential badge — used for founder credentials, certifications */
.credential-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: rgba(201,160,80,.1);
  border: 1px solid rgba(201,160,80,.35);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: #8a6c2e;
  font-weight: 600;
}
.credential-badge i{ font-size:.8rem; color: var(--gold); }

/* Founder portrait frame — ornate bordered avatar replacing plain color block */
.founder-portrait{
  width: 96px; height: 96px; border-radius: 22px; flex-shrink:0;
  position: relative;
  background: linear-gradient(155deg, var(--forest), var(--forest-deep));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size: 2rem; color: var(--gold-light);
  box-shadow: 0 20px 40px -16px rgba(15,61,46,.4), inset 0 1px 0 rgba(255,255,255,.1);
}
.founder-portrait::after{
  content:'';
  position:absolute; inset: -6px;
  border-radius: 26px;
  border: 1.5px solid rgba(201,160,80,.35);
}

/* Premium founder card — larger, editorial, with credentials row */
.founder-card-premium{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 40px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  position: relative;
  overflow: hidden;
}
.founder-card-premium.match-row-height{ height: 100%; }
.founder-card-premium::before{
  content:'';
  position:absolute; top:0; right:0; width:140px; height:140px;
  background: radial-gradient(circle at top right, rgba(201,160,80,.12), transparent 70%);
  pointer-events:none;
}
.founder-card-premium:hover{
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -26px rgba(15,61,46,.3);
}
.founder-card-premium .fc-header{ display:flex; gap:22px; align-items:flex-start; margin-bottom: 22px; position:relative; z-index:2; }
.founder-card-premium h4{ font-size: 1.28rem; font-weight:700; margin-bottom:3px; }
.founder-card-premium .f-role{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--terracotta); display:block; margin-bottom:10px; }
.founder-card-premium .fc-credentials{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 4px; }
.founder-card-premium p.fc-bio{ font-size: .93rem; line-height:1.75; color:#4A554E; position:relative; z-index:2; margin-bottom:0; }

/* Value pillar — larger icon tile for vision/mission/policy style triads */
.value-pillar{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 44px 36px;
  height: 100%;
  text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.value-pillar:hover{ transform: translateY(-6px); box-shadow: 0 30px 54px -24px rgba(15,61,46,.25); }
.value-pillar .vp-icon{
  width: 68px; height:68px; border-radius: 20px;
  background: linear-gradient(155deg, var(--forest), var(--forest-deep));
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 26px;
  box-shadow: 0 16px 30px -10px rgba(15,61,46,.4);
}
.value-pillar .vp-icon i{ font-size: 1.7rem; color: var(--gold-light); }
.value-pillar h3{ font-size: 1.3rem; font-weight:700; margin-bottom: 14px; }
.value-pillar p{ font-size: .93rem; line-height:1.75; color:#4A554E; margin-bottom:0; }

/* Numbered service block — premium editorial version of svc-item, larger, richer */
.service-block-premium{
  display:flex; gap: 28px; padding: 40px 0; border-bottom: 1px solid var(--line);
}
.service-block-premium:first-child{ padding-top:0; }
.service-block-premium:last-child{ border-bottom:none; padding-bottom:0; }
.service-block-premium .sb-num{
  font-family: var(--font-display); font-weight:700; font-size: 2.6rem;
  color: transparent; -webkit-text-stroke: 1.5px var(--gold);
  line-height:1; flex-shrink:0; width: 76px;
  opacity: .85;
}
.service-block-premium h3{ font-size: 1.5rem; font-weight:700; margin-bottom: 12px; color: var(--forest-deep); }
.service-block-premium .sb-list{ margin: 0; padding: 0; list-style:none; }
.service-block-premium .sb-list li{
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: .95rem; line-height:1.7; color: #3A4640;
}
.service-block-premium .sb-list li::before{
  content: '✓';
  position: absolute; left:0; top:1px;
  width: 18px; height:18px; border-radius:5px;
  background: rgba(15,61,46,.08);
  color: var(--forest-deep);
  font-size: .68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.service-block-premium.on-dark .sb-list li{ color: rgba(247,243,234,.75); }
.service-block-premium.on-dark .sb-list li::before{ background: rgba(201,160,80,.18); color: var(--gold-light); }
.service-block-premium.on-dark h3{ color: var(--cream); }
.service-block-premium.on-dark{ border-color: var(--line-light); }

/* Expertise grid tile — for "Our expertise lies in" style checklist grids */
.expertise-tile{
  display:flex; align-items:center; gap:16px;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.expertise-tile:hover{ transform: translateY(-4px); box-shadow: 0 20px 36px -18px rgba(15,61,46,.22); border-color:transparent; }
.expertise-tile .et-icon{
  width: 46px; height:46px; border-radius:13px; flex-shrink:0;
  background: linear-gradient(155deg, var(--gold-light), var(--gold));
  display:flex; align-items:center; justify-content:center;
}
.expertise-tile .et-icon i{ color: var(--forest-deep); font-size:1.15rem; }
.expertise-tile span{ font-size: .95rem; font-weight:600; color: var(--forest-deep); }

/* Investment category chip — pill with icon for investment-type lists */
.invest-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: .92rem; font-weight:600; color: var(--forest-deep);
  transition: all .3s var(--ease);
}
.invest-chip:hover{ background: var(--forest-deep); color: var(--cream); border-color: var(--forest-deep); }
.invest-chip:hover i{ color: var(--gold-light); }
.invest-chip i{ color: var(--terracotta); font-size:1rem; transition: color .3s var(--ease); }

/* Premium stat block for hero-adjacent numeric emphasis */
.stat-premium{
  text-align:center; padding: 8px;
}
.stat-premium .sp-num{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height:1;
  display:block;
  margin-bottom: 10px;
}
.stat-premium .sp-lbl{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--blue-slate); opacity:.75;
}

/* Large section intro used at top of About/Services — bigger than standard section-head */
.intro-block{ max-width: 760px; }
.intro-block h1, .intro-block h2{
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 1.06;
  font-weight: 650;
}

/* Bordered image-style panel used as decorative accent (no actual image required) */
.accent-frame{
  position:relative;
  border-radius: 24px;
  padding: 3px;
  background: linear-gradient(155deg, var(--gold-light), var(--gold), var(--terracotta));
}
.accent-frame-inner{
  background: var(--paper);
  border-radius: 21px;
  padding: 36px;
  height:100%;
}

@media (max-width: 767.98px){
  .founder-card-premium{ padding: 28px 24px; }
  .founder-card-premium .fc-header{ flex-direction:column; gap:16px; }
  .service-block-premium{ flex-direction:column; gap:14px; padding: 30px 0; }
  .service-block-premium .sb-num{ width:auto; font-size: 2rem; }
  .value-pillar{ padding: 34px 24px; }
}

/* =========================================================
   3D TILT SYSTEM — real pointer-tracked depth for cards
   ========================================================= */

/* Outer wrapper: establishes perspective + holds dynamic shadow variable */
.tilt-3d{
  --tilt-shadow: 0 30px 60px -20px rgba(15,61,46,.28);
  perspective: 1200px;
  position: relative;
}

/* Inner layer that actually rotates — keeps content crisp under transform */
.tilt-3d .tilt-layer{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .4s var(--ease);
  will-change: transform;
  box-shadow: var(--tilt-shadow);
  border-radius: inherit;
}
.tilt-3d.tilt-active .tilt-layer{
  transition: transform .08s linear, box-shadow .3s var(--ease);
}

/* Glare sheen overlay — follows cursor, only visible while hovered */
.tilt-glare{
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: 5;
  mix-blend-mode: overlay;
}

/* Parallax media — the image/photo inside a tilt card shifts opposite cursor for depth */
.tilt-parallax{
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.tilt-3d.tilt-active .tilt-parallax{
  transition: transform .08s linear;
}

/* Floating "chip" elements inside a tilt card lift forward in Z-space on hover */
.tilt-pop{
  transition: transform .45s var(--ease);
}
.tilt-3d:hover .tilt-pop{
  transform: translateZ(40px);
}

/* =========================================================
   PREMIUM LISTING CARD 2.0 — glossy, layered, 3D-ready
   ========================================================= */
.listing-card-3d{
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.listing-card-3d .lc3-media{
  height: 232px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--forest), var(--blue-slate));
}
.listing-card-3d .lc3-media img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
}
.listing-card-3d .lc3-media::after{
  content:'';
  position: absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,42,31,0) 40%, rgba(10,42,31,.55) 100%);
  pointer-events: none;
}
.listing-card-3d .lc3-badge{
  position: absolute; top: 16px; left: 16px; z-index: 6;
  background: rgba(255,253,248,.95);
  color: var(--forest-deep);
  font-family: var(--font-mono);
  font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 7px 13px; border-radius: 999px;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.25);
}
.listing-card-3d .lc3-fav{
  position: absolute; top: 16px; right: 16px; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,253,248,.95);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.25);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.listing-card-3d .lc3-fav:hover{ background: var(--terracotta); transform: scale(1.08); }
.listing-card-3d .lc3-fav:hover i{ color: #fff; }
.listing-card-3d .lc3-fav i{ color: var(--terracotta); font-size: .95rem; transition: color .25s var(--ease); }
.listing-card-3d .lc3-price{
  position: absolute; bottom: 16px; left: 18px; z-index: 6;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.listing-card-3d .lc3-glow{
  position: absolute; bottom: 16px; right: 16px; z-index: 6;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(155deg, var(--gold-light), var(--gold));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(201,160,80,.6);
}
.listing-card-3d .lc3-glow i{ color: var(--forest-deep); font-size: .95rem; }
.listing-card-3d .lc3-body{
  padding: 24px 22px 26px;
  display: flex; flex-direction: column; gap: 11px; flex: 1;
  position: relative; z-index: 4;
}
.listing-card-3d .lc3-body h3{ font-size: 1.15rem; font-weight: 700; line-height: 1.32; color: var(--forest-deep); }
.listing-card-3d .lc3-desc{ font-size: .87rem; color: #565f5a; flex: 1; line-height: 1.6; }
.listing-card-3d .lc3-meta{
  display: flex; align-items: center; gap: 16px; padding-top: 14px;
  border-top: 1px dashed var(--line); font-size: .78rem; color: var(--blue-slate); flex-wrap: wrap;
}
.listing-card-3d .lc3-meta span{ display: flex; align-items: center; gap: 6px; }
.listing-card-3d .lc3-meta i{ opacity: .7; }

/* Ambient reflection strip under 3D listing cards for "floating" premium feel */
.tilt-3d.listing-tilt-wrap{ padding-bottom: 6px; }
.tilt-3d.listing-tilt-wrap::before{
  content:'';
  position: absolute;
  left: 8%; right: 8%; bottom: -14px; height: 22px;
  background: radial-gradient(ellipse, rgba(15,61,46,.22), transparent 72%);
  filter: blur(4px);
  opacity: 0;
  transition: opacity .4s var(--ease);
  z-index: -1;
}
.tilt-3d.listing-tilt-wrap:hover::before{ opacity: 1; }

/* =========================================================
   CATEGORY TILES 4.0 — "arch" cards
   Doorway-shaped paper cards with a double gold frame. On hover
   a forest-green fill rises like a sunrise, carrying survey
   contour lines, and the icon medallion turns gold.
   Selectors are .tilt-3d-prefixed so they beat the tilt
   system's `border-radius: inherit`.
   ========================================================= */
.tilt-3d .cat-tile-3d{
  --arch: 118px;                 /* height of the curved top */
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' viewBox='0 0 320 220' fill='none' stroke='%23E4C87A' stroke-width='1'%3E%3Cpath d='M-10 190C40 150 80 210 140 170S250 110 330 150'/%3E%3Cpath d='M-10 165C45 125 85 185 142 146S252 86 330 126'/%3E%3Cpath d='M-10 140C50 100 90 160 144 122S254 62 330 102'/%3E%3Cpath d='M-10 115C55 75 95 135 146 98S256 38 330 78'/%3E%3Cpath d='M-10 90C60 50 100 110 148 74S258 14 330 54'/%3E%3Cpath d='M-10 65C65 25 105 85 150 50S260 -10 330 30'/%3E%3C/svg%3E");
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  height: 100%; min-height: 286px;
  padding: 34px 22px 24px;
  text-align: center;
  color: var(--ink);
  background:
    radial-gradient(75% 42% at 50% 0%, rgba(228,200,122,.30), transparent 72%),
    linear-gradient(180deg, #FFFEFA 0%, var(--paper) 100%);
  border: 1px solid rgba(201,160,80,.42);
  border-radius: 50% 50% 22px 22px / var(--arch) var(--arch) 22px 22px;
  overflow: hidden; isolation: isolate;
  transition: border-color .4s var(--ease);
}
.tilt-3d:hover .cat-tile-3d{ border-color: var(--gold); color: var(--ink); }
.tilt-3d .cat-tile-3d:focus-visible{ outline: 2px solid var(--terracotta); outline-offset: 4px; }

/* green fill that rises on hover (behind content) */
.tilt-3d .cat-tile-3d::before{
  content: ''; position: absolute; z-index: -2;
  left: 0; right: 0; top: -70px; bottom: 0; height: auto;
  background:
    var(--contour) 0 100% / 320px 220px no-repeat,
    radial-gradient(90% 60% at 50% 0%, #1A5F47, transparent 70%),
    linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  border-radius: 50% 50% 0 0 / 70px 70px 0 0;
  transform: translateY(102%);
  transition: transform .75s var(--ease);
}
.tilt-3d:hover .cat-tile-3d::before{ transform: translateY(0); }

/* inner window frame that follows the arch */
.tilt-3d .cat-tile-3d::after{
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 8px; height: auto; width: auto; left: 8px; bottom: 8px; transform: none;
  border: 1px solid rgba(201,160,80,.38);
  border-radius: 50% 50% 15px 15px / calc(var(--arch) - 8px) calc(var(--arch) - 8px) 15px 15px;
  background: none;
  transition: border-color .5s var(--ease);
}
.tilt-3d:hover .cat-tile-3d::after{ border-color: rgba(228,200,122,.6); }

/* icon medallion — sits in the crown of the arch */
.tilt-3d .cat-tile-3d .ct3-icon{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 68px; height: 68px; margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--forest), var(--forest-deep));
  box-shadow:
    0 0 0 6px rgba(201,160,80,.16),
    0 16px 28px -12px rgba(15,61,46,.55);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.tilt-3d .cat-tile-3d .ct3-icon i{
  font-size: 1.55rem; line-height: 1; color: var(--gold-light);
  transition: color .4s var(--ease);
}
.tilt-3d:hover .cat-tile-3d .ct3-icon{
  background: linear-gradient(150deg, var(--gold-light), var(--gold));
  box-shadow:
    0 0 0 6px rgba(228,200,122,.28),
    0 16px 30px -10px rgba(0,0,0,.5);
}
.tilt-3d:hover .cat-tile-3d .ct3-icon i{ color: var(--forest-deep); }

/* text */
.tilt-3d .cat-tile-3d h3{
  font-family: var(--font-display); font-weight: 650;
  font-size: 1.22rem; line-height: 1.16; letter-spacing: -.01em;
  color: var(--forest); margin: 0 0 8px; text-wrap: balance;
  transition: color .45s var(--ease);
}
.tilt-3d .cat-tile-3d .ct3-count{
  display: block;
  font-family: var(--font-body); font-size: .84rem; line-height: 1.45;
  color: var(--blue-slate); opacity: .85;
  transition: color .45s var(--ease), opacity .45s var(--ease);
}
.tilt-3d:hover .cat-tile-3d h3{ color: #FFFDF8; }
.tilt-3d:hover .cat-tile-3d .ct3-count{ color: rgba(247,243,234,.8); opacity: 1; }

/* arrow — pinned to the foot of the card */
.tilt-3d .cat-tile-3d .ct3-arrow{
  position: relative; right: auto; bottom: auto;
  display: flex; align-items: center; justify-content: center;
  margin-top: auto; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(15,61,46,.28); color: var(--forest);
  background: transparent;
  opacity: 1; transform: none;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease);
}
.tilt-3d .cat-tile-3d h3 + .ct3-count + .ct3-arrow{ margin-top: auto; }
.tilt-3d .cat-tile-3d .ct3-count{ margin-bottom: 18px; }
.tilt-3d:hover .cat-tile-3d .ct3-arrow{
  background: var(--gold); border-color: var(--gold); color: var(--forest-deep);
  transform: translateZ(40px) translateY(-2px);
}
.cat-tile-3d .tilt-glare{ mix-blend-mode: soft-light; }

@media (max-width: 767.98px){
  .tilt-3d .cat-tile-3d{ --arch: 84px; min-height: 262px; padding: 26px 14px 18px; border-radius: 50% 50% 18px 18px / var(--arch) var(--arch) 18px 18px; }
  .tilt-3d .cat-tile-3d::after{ inset: 6px; border-radius: 50% 50% 13px 13px / calc(var(--arch) - 6px) calc(var(--arch) - 6px) 13px 13px; }
  .tilt-3d .cat-tile-3d .ct3-icon{ width: 54px; height: 54px; margin-bottom: 16px; box-shadow: 0 0 0 5px rgba(201,160,80,.16), 0 12px 22px -10px rgba(15,61,46,.5); }
  .tilt-3d .cat-tile-3d .ct3-icon i{ font-size: 1.3rem; }
  .tilt-3d .cat-tile-3d h3{ font-size: 1.02rem; }
  .tilt-3d .cat-tile-3d .ct3-count{ font-size: .76rem; margin-bottom: 14px; }
  .tilt-3d .cat-tile-3d .ct3-arrow{ width: 34px; height: 34px; }
}

/* =========================================================
   PREMIUM BUTTON GLOW — richer depth on primary CTAs
   ========================================================= */
.btn-terracotta-3d{
  position: relative;
  background: linear-gradient(155deg, #E4794A, var(--terracotta) 45%, var(--terracotta-deep));
  color: #fff; border: none; border-radius: 999px;
  padding: .85rem 1.9rem; font-weight: 700; font-size: .93rem;
  box-shadow: 0 14px 30px -10px rgba(217,104,59,.6), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 4px rgba(0,0,0,.15);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-terracotta-3d:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -10px rgba(217,104,59,.65), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.15);
  color: #fff;
}
.btn-terracotta-3d:active{ transform: translateY(-1px); }

.btn-gold-3d{
  position: relative;
  background: linear-gradient(155deg, #F3DDA0, var(--gold-light) 40%, var(--gold));
  color: var(--forest-deep); border: none; border-radius: 999px;
  padding: .85rem 1.9rem; font-weight: 700; font-size: .93rem;
  box-shadow: 0 14px 30px -10px rgba(201,160,80,.6), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(138,108,46,.2);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-gold-3d:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -10px rgba(201,160,80,.65), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(138,108,46,.2);
  color: var(--forest-deep);
}
.btn-terracotta-3d, .btn-gold-3d{ display: inline-flex; align-items: center; gap: 9px; }

@media (max-width: 767.98px){
  .listing-card-3d .lc3-media{ height: 200px; }
}

/* =========================================================
   POST PROPERTY PAGE — step cards, category picker, dropzone
   ========================================================= */
.form-step-card{
  background: var(--paper); border:1px solid var(--line); border-radius:20px;
  padding: 28px; box-shadow: 0 20px 44px -32px rgba(15,61,46,.2);
}
.fsc-head{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.fsc-num{
  font-family: var(--font-mono); font-weight:600; font-size:.8rem;
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background: rgba(201,160,80,.14); color:#8a6c2e;
  display:flex; align-items:center; justify-content:center;
}
.fsc-head h3{ font-size:1.12rem; font-weight:700; margin-bottom:3px; }
.fsc-head p{ font-size:.85rem; color:#565f5a; margin-bottom:0; }

.category-picker{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
.cat-pick{
  border:1.5px solid var(--forest); background:var(--forest); border-radius:14px;
  padding:16px 10px; display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; transition: all .25s var(--ease); cursor:pointer;
}
.cat-pick i{ font-size:1.3rem; color:#fff; transition: color .25s var(--ease); }
.cat-pick span{ font-size:.72rem; font-weight:600; color:#fff; line-height:1.25; }
.cat-pick:hover{ border-color: var(--gold); background: var(--forest-deep); transform: translateY(-2px); }
.cat-pick:focus-visible{ outline:3px solid rgba(201,160,80,.55); outline-offset:2px; }
.cat-pick.active{
  border-color: var(--gold); background: var(--terracotta);
  box-shadow: 0 10px 24px -14px rgba(217,104,59,.6);
}
.cat-pick.active i,
.cat-pick.active span{ color:#fff; }

/* Listing type — compact picker, all 5 options on ONE line (Sell / Buy / Rental & Lease / Tenants / JV/JD) */
.type-picker{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; }
.type-pick{
  position:relative; border:2px solid var(--line); background:var(--paper); border-radius:14px;
  padding:14px 6px 12px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px;
  text-align:center; cursor:pointer; transition: all .25s var(--ease); min-width:0;
}
.type-pick .tp-icon{
  width:40px; height:40px; border-radius:50%; margin-bottom:4px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(15,61,46,.07); color: var(--forest-deep);
  font-size:1.1rem; transition: all .25s var(--ease);
}
.type-pick strong{ font-size:.8rem; font-weight:800; color: var(--ink); letter-spacing:0; line-height:1.15; transition: color .25s var(--ease); }
.type-pick small{ font-size:.66rem; color:#565f5a; line-height:1.25; transition: color .25s var(--ease); }
.type-pick:hover{ border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(15,61,46,.35); }
.type-pick:focus-visible{ outline:3px solid rgba(201,160,80,.55); outline-offset:2px; }
.type-pick.active{
  background: var(--forest-deep); border-color: var(--forest-deep);
  box-shadow: 0 12px 24px -14px rgba(15,61,46,.6); transform: translateY(-2px);
}
.type-pick.active .tp-icon{ background: var(--gold); color: var(--forest-deep); }
.type-pick.active strong{ color:#fff; }
.type-pick.active small{ color: rgba(255,255,255,.78); }
.type-pick.active::after{
  content:"\F26A"; font-family:"bootstrap-icons"; position:absolute; top:5px; right:6px;
  color: var(--gold); font-size:.8rem; line-height:1;
}
.invalid-feedback-custom{ color: var(--terracotta-deep); font-size:.82rem; margin-top:10px; font-weight:600; }

.photo-dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border: 2px dashed var(--line); border-radius:16px; padding:36px 20px; text-align:center;
  cursor:pointer; transition: all .25s var(--ease); background: rgba(15,61,46,.015);
}
.photo-dropzone:hover{ border-color: var(--gold); background: rgba(201,160,80,.05); }
.photo-dropzone i{ font-size:1.8rem; color: var(--blue-slate); opacity:.6; }
.photo-dropzone .pd-title{ font-weight:600; font-size:.92rem; color: var(--forest-deep); }
.photo-dropzone .pd-sub{ font-size:.76rem; color: var(--blue-slate); opacity:.75; }
.photo-dropzone.is-disabled{
  cursor:not-allowed; opacity:.6; background: rgba(15,61,46,.03);
}
.photo-dropzone.is-disabled:hover{ border-color: var(--line); }

/* Each selected photo: thumbnail + always-visible remove (x) and change (↻) buttons.
   position:relative on the chip (not overflow:hidden) so the round buttons can sit
   half outside the thumbnail without being clipped. */
.photo-preview-chip{
  position: relative;
  width: 84px; height: 84px;
}
.photo-preview-chip .ppc-frame{
  width:100%; height:100%; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background: rgba(15,61,46,.04);
}
.photo-preview-chip img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-preview-chip .ppc-remove,
.photo-preview-chip .ppc-replace{
  position:absolute; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--paper); cursor:pointer; padding:0; line-height:1;
  box-shadow: 0 4px 10px -4px rgba(15,61,46,.4);
}
.photo-preview-chip .ppc-remove{
  top:-8px; right:-8px; background: var(--terracotta); color:#fff;
}
.photo-preview-chip .ppc-remove:hover{ background: var(--terracotta-deep); }
.photo-preview-chip .ppc-remove i{ font-size:.7rem; }
.photo-preview-chip .ppc-replace{
  bottom:-8px; right:-8px; background: var(--forest-deep); color:#fff;
}
.photo-preview-chip .ppc-replace:hover{ background: var(--blue-slate); }
.photo-preview-chip .ppc-replace i{ font-size:.85rem; }

.post-sidebar-panel{
  background: var(--paper); border:1px solid var(--line); border-radius:20px; padding:26px;
  box-shadow: 0 20px 44px -32px rgba(15,61,46,.2);
}
.post-sidebar-panel.dark{
  background: var(--forest-deep); border-color: var(--line-light); margin-top:20px;
}
.post-sidebar-sticky{ position: sticky; top: 110px; }
.mini-step{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.mini-step:last-child{ border-bottom:none; padding-bottom:0; }
.mini-step:first-of-type{ padding-top:0; }
.ms-icon{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background: rgba(15,61,46,.07); color: var(--forest-deep);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.mini-step h5{ font-size:.9rem; font-weight:700; margin-bottom:2px; color: var(--forest-deep); }
.mini-step p{ font-size:.8rem; color:#565f5a; margin-bottom:0; }


/* ---- Sub-type picker (appears under the category tiles) ---- */
.subtype-panel{
  margin-top:18px; padding:18px; border:1.5px dashed var(--gold);
  border-radius:16px; background: rgba(201,160,80,.06);
}
.subtype-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font-size:.85rem; color: var(--forest-deep); font-weight:600;
}
.subtype-head i{ color: var(--terracotta); font-size:1.05rem; }
.subtype-head em{ font-weight:400; font-size:.78rem; color:#565f5a; }
.subtype-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.subtype-chip{
  border:1.5px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius:999px; padding:8px 14px; font-size:.78rem; font-weight:600;
  cursor:pointer; transition: all .2s var(--ease); line-height:1.2;
}
.subtype-chip:hover{ border-color: var(--gold); transform: translateY(-1px); }
.subtype-chip.active{
  border-color: var(--terracotta); background: rgba(217,104,59,.08);
  color: var(--terracotta-deep);
}

@media (max-width: 767.98px){
  .category-picker{ grid-template-columns:repeat(2, 1fr); }
  .form-step-card{ padding:18px 12px; }
  .form-step-card .fsc-head{ gap:12px; margin-bottom:16px; }
  /* one line of 5 compact tiles, description hidden to save space */
  .type-picker{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:5px; }
  .type-pick{ padding:10px 2px 8px; gap:3px; border-width:1.5px; border-radius:10px; }
  .type-pick .tp-icon{ width:30px; height:30px; font-size:.9rem; margin-bottom:2px; }
  .type-pick strong{ font-size:.58rem; line-height:1.15; }
  .type-pick small{ display:none; }
  .type-pick.active::after{ top:2px; right:3px; font-size:.65rem; }
  .post-sidebar-sticky{ position:static; }
}

/* =========================================================
   AI PROPERTY AGENT — floating chat widget
   ========================================================= */
.agent-panel{
  position: fixed; bottom: 26px; right: 26px; z-index: 901;
  width: 400px; max-width: calc(100vw - 32px);
  height: 620px; max-height: calc(100vh - 60px);
  background: var(--cream); border-radius: 24px;
  box-shadow: 0 40px 80px -20px rgba(10,42,31,.4);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line);
  transform: translateY(20px) scale(.97); opacity:0; pointer-events:none;
  transition: transform .35s var(--ease), opacity .3s var(--ease);
}
.agent-panel.open{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }

.agent-header{
  background: var(--forest-deep); padding: 18px 20px;
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.agent-header .ah-avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(155deg, var(--gold-light), var(--gold));
  display:flex; align-items:center; justify-content:center;
}
.agent-header .ah-avatar svg{ width:22px; height:22px; }
.agent-header .ah-title{ font-family: var(--font-display); font-weight:700; font-size:1rem; color:var(--cream); line-height:1.2; }
.agent-header .ah-sub{ font-family: var(--font-mono); font-size:.66rem; letter-spacing:.05em; color: var(--gold-light); display:flex; align-items:center; gap:5px; margin-top:2px; }
.agent-header .ah-sub::before{ content:''; width:6px; height:6px; border-radius:50%; background:#5FCB8C; display:inline-block; }
.agent-restart{
  margin-left:auto; width:32px; height:32px; border-radius:50%; border:none;
  background: rgba(247,243,234,.1); color: var(--cream); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .2s ease;
}
.agent-restart:hover{ background: rgba(247,243,234,.2); }
.agent-restart svg{ width:15px; height:15px; }
.agent-close{
  width:32px; height:32px; border-radius:50%; border:none;
  background: rgba(247,243,234,.1); color: var(--cream); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .2s ease;
}
.agent-close:hover{ background: rgba(247,243,234,.2); }
.agent-close svg{ width:16px; height:16px; }

.agent-body{
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display:flex; flex-direction:column; gap:14px;
  background:
    radial-gradient(ellipse 300px 200px at 90% 0%, rgba(201,160,80,.06), transparent 60%),
    var(--cream);
}
.agent-msg{ display:flex; gap:10px; max-width:100%; }
.agent-msg.user{ flex-direction:row-reverse; }
.agent-msg .am-avatar{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.7rem;
}
.agent-msg.bot .am-avatar{ background: var(--forest-deep); }
.agent-msg.bot .am-avatar svg{ width:15px; height:15px; }
.agent-msg.user .am-avatar{ background: rgba(15,61,46,.12); color: var(--forest-deep); font-weight:700; }
.agent-msg .am-bubble{
  padding: 11px 14px; border-radius:16px; font-size:.87rem; line-height:1.55;
  max-width: 80%;
}
.agent-msg.bot .am-bubble{ background: var(--paper); border:1px solid var(--line); color: var(--ink); border-top-left-radius:4px; }
.agent-msg.user .am-bubble{ background: var(--forest-deep); color: var(--cream); border-top-right-radius:4px; }

.agent-typing{ display:flex; gap:4px; padding:4px 0; }
.agent-typing span{
  width:6px; height:6px; border-radius:50%; background: var(--blue-slate); opacity:.5;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.agent-typing span:nth-child(2){ animation-delay:.15s; }
.agent-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

/* FIX: children of the scrolling chat body must NEVER shrink. The body is a
   flex column with overflow-y:auto, and flex items default to flex-shrink:1,
   so once a property-card row was added the browser squashed it to a thin
   sliver (photo invisible, nothing to scroll). Keep every child at its
   natural height so the body scrolls instead. */
.agent-body > *{ flex-shrink: 0; }

/* Property cards rendered inside chat */
.agent-cards-row{
  display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding: 6px 2px 10px; margin-left:38px;
  scrollbar-width: thin; height:auto; min-height: 226px; align-items:flex-start;
  -webkit-overflow-scrolling: touch;
}
.agent-prop-card{
  display:flex; flex-direction:column;
  flex: 0 0 220px; min-height: 210px; background: var(--paper); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; text-decoration:none; color: var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.agent-prop-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(15,61,46,.3); color:var(--ink); }
.agent-prop-card .apc-media{
  height:110px; flex-shrink:0; background: linear-gradient(155deg, var(--forest), var(--blue-slate));
  position:relative; overflow:hidden;
}
.agent-prop-card .apc-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.agent-prop-card .apc-media .apc-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:rgba(247,243,234,.4); }
.agent-prop-card .apc-badge{
  position:absolute; top:8px; left:8px; background:rgba(15,61,46,.85); color:var(--cream);
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
}
.agent-prop-card .apc-body{ padding:10px 12px; }
.agent-prop-card .apc-title{ font-size:.8rem; font-weight:700; line-height:1.3; margin-bottom:4px; color: var(--forest-deep); }
.agent-prop-card .apc-loc{ font-size:.7rem; color: var(--blue-slate); margin-bottom:5px; display:flex; align-items:center; gap:4px; }
.agent-prop-card .apc-price{ font-family:var(--font-mono); font-weight:700; font-size:.78rem; color: var(--terracotta); }

.agent-suggestions{
  display:flex; flex-wrap:wrap; gap:6px; padding: 0 2px;
}
.agent-suggestion-chip{
  background: var(--paper); border:1px solid var(--line); border-radius:999px;
  padding: 7px 13px; font-size:.76rem; font-weight:500; color: var(--forest-deep);
  cursor:pointer; transition: all .2s ease; white-space:nowrap;
}
.agent-suggestion-chip:hover{ background: var(--forest-deep); color: var(--cream); border-color: var(--forest-deep); }

.agent-input-row{
  padding: 12px 14px; border-top:1px solid var(--line); background: var(--paper);
  display:flex; gap:8px; align-items:flex-end; flex-shrink:0;
}
.agent-input-row textarea{
  flex:1; resize:none; border:1.5px solid var(--line); border-radius:14px;
  padding:10px 14px; font-size:.87rem; font-family: var(--font-body);
  max-height:90px; min-height:42px; line-height:1.4;
  background: var(--cream); color: var(--ink);
}
.agent-input-row textarea:focus{ outline:none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(217,104,59,.12); }
.agent-send-btn{
  width:42px; height:42px; border-radius:50%; flex-shrink:0; border:none;
  background: linear-gradient(155deg, var(--terracotta), var(--terracotta-deep));
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.agent-send-btn:hover{ transform: scale(1.06); }
.agent-send-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.agent-send-btn svg{ width:18px; height:18px; }

.agent-error-banner{
  margin: 0 16px 10px; padding:10px 14px; border-radius:12px;
  background: rgba(217,104,59,.1); border:1px solid rgba(217,104,59,.3);
  color: var(--terracotta-deep); font-size:.78rem;
}

@media (max-width: 480px){
  .agent-panel{
    right:16px; left:16px; bottom:16px; width:auto;
    height: calc(100vh - 100px);
  }
  .agent-cards-row{ margin-left:0; }
}

/* =========================================================
   AI PROPERTY AGENT — standalone full page (ai-assistant.html)
   Reuses the .agent-* component classes above (header, body,
   messages, cards, input row) but lays them out as a large
   fixed-height panel filling the page instead of a floating
   launcher + popup.
   ========================================================= */
.agent-page-section{ padding: 0 0 90px; }
.agent-page-shell{
  max-width: 760px; margin: 0 auto;
  background: var(--cream); border-radius: 24px;
  box-shadow: 0 40px 80px -30px rgba(10,42,31,.28);
  border: 1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
  height: 74vh; min-height: 480px; max-height: 760px;
}
.agent-page-shell .agent-header{ border-radius: 0; }
.agent-page-body{ padding: 22px 22px; }
.agent-page-body .agent-cards-row{ height:auto; min-height: 280px; margin-left: 0; gap: 14px; }
.agent-page-body .agent-prop-card{ flex: 0 0 250px; }
.agent-page-body .agent-prop-card .apc-media{ height: 150px; }
.agent-page-body .agent-prop-card .apc-cta{
  display:flex; align-items:center; gap:4px;
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase;
  color: var(--terracotta); font-weight:600; margin-top:6px;
}
.agent-page-body .agent-prop-card .apc-cta svg{ width:11px; height:11px; transition: transform .2s var(--ease); }
.agent-page-body .agent-prop-card:hover .apc-cta svg{ transform: translateX(3px); }

@media (max-width: 576px){
  .agent-page-shell{ border-radius: 16px; height: 78vh; }
  .agent-page-body{ padding: 16px 14px; }
}


/* =========================================================================
   ABOUT PAGE — REDESIGN LAYER
   -------------------------------------------------------------------------
   Everything below is scoped under `body.about-page` and uses `ab-*` class
   names, so it can NEVER affect any other page. Shared components (header,
   footer, mobile menu) are left completely untouched.
   ========================================================================= */

body.about-page{
  --ab-radius: 28px;
  --ab-shadow-lg: 0 50px 90px -40px rgba(10,42,31,.45);
  --ab-shadow-md: 0 30px 60px -30px rgba(10,42,31,.32);
}

/* ---------- Header: transparent over the dark hero, then normal on scroll ---------- */
body.about-page .site-header:not(.scrolled) .main-nav .nav-link{ color: rgba(247,243,234,.88) !important; }
body.about-page .site-header:not(.scrolled) .main-nav .nav-link:hover{ background: rgba(255,255,255,.1); color:#fff !important; }
body.about-page .site-header:not(.scrolled) .main-nav .nav-link.active{ color: var(--gold-light) !important; }
body.about-page .site-header:not(.scrolled) .btn-outline-forest{ border-color: rgba(247,243,234,.55); color: var(--cream); }
body.about-page .site-header:not(.scrolled) .btn-outline-forest:hover{ background: var(--cream); color: var(--forest-deep); border-color: var(--cream); }
body.about-page .site-header:not(.scrolled) .navbar-toggler-icon-custom span{ background: var(--cream); }
body.about-page .site-header:not(.scrolled) .navbar-brand-logo{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }

/* =========================================================================
   1 · HERO
   ========================================================================= */
.ab-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding: 190px 0 0;
  background:
    radial-gradient(ellipse 900px 520px at 88% 8%, rgba(201,160,80,.26), transparent 60%),
    radial-gradient(ellipse 700px 500px at 0% 100%, rgba(217,104,59,.16), transparent 60%),
    linear-gradient(165deg, #0d3527 0%, var(--forest-deep) 55%, #061a13 100%);
  color: var(--cream);
}
/* blueprint grid */
.ab-hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(228,200,122,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,200,122,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 25%, #000 25%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 25%, #000 25%, transparent 85%);
}
/* soft orbs */
.ab-orb{ position:absolute; border-radius:50%; filter: blur(70px); z-index:-1; pointer-events:none; }
.ab-orb.o1{ width:420px; height:420px; right:-120px; top:60px; background: rgba(201,160,80,.28); animation: abFloat 14s ease-in-out infinite; }
.ab-orb.o2{ width:340px; height:340px; left:-140px; bottom:40px; background: rgba(217,104,59,.2); animation: abFloat 18s ease-in-out infinite reverse; }
@keyframes abFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(30px,-34px,0) scale(1.08); }
}

.ab-hero .breadcrumb-pill{
  background: rgba(255,255,255,.08); color: rgba(247,243,234,.75);
  border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px);
}
.ab-hero .breadcrumb-pill a{ color: rgba(247,243,234,.75); }
.ab-hero .breadcrumb-pill a:hover{ color: var(--gold-light); }

.ab-hero .eyebrow{ color: var(--gold-light); }
.ab-hero .eyebrow::before{ background: var(--gold-light); }

.ab-hero h1{
  color: var(--cream);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 900px;
}
.ab-hero h1 .text-foil{ display:inline-block; padding-right:.06em; }
.ab-hero .lead{
  color: rgba(247,243,234,.78);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.7;
  max-width: 640px;
}
.ab-hero .seal{ box-shadow: 0 0 0 6px rgba(201,160,80,.12), 0 10px 30px -6px rgba(201,160,80,.6), inset 0 1px 2px rgba(255,255,255,.5); }

/* floating trust chips in hero */
.ab-hero-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 34px; }
.ab-hero-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color: rgba(247,243,234,.88);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.ab-hero-chip i{ color: var(--gold-light); }
.ab-hero-chip:hover{ transform: translateY(-3px); background: rgba(255,255,255,.12); border-color: rgba(228,200,122,.5); }

/* decorative "skyline" — pure CSS, sits along the bottom edge of the hero */
.ab-skyline{
  position:relative; height: 120px; margin-top: 70px;
  display:flex; align-items:flex-end; gap: 6px; padding: 0 4px;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
  mask-image: linear-gradient(to bottom, transparent, #000 45%);
}
.ab-skyline span{
  flex:1; min-width: 14px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(228,200,122,.28), rgba(228,200,122,.04));
  border: 1px solid rgba(228,200,122,.18); border-bottom:none;
  transform-origin: bottom; transform: scaleY(.15); opacity:0;
  animation: abRise 1.2s var(--ease) forwards;
}
@keyframes abRise{ to{ transform: scaleY(1); opacity:1; } }

/* curved divider into the next (light) section */
.ab-wave{ display:block; width:100%; height: 80px; margin-top:-79px; position:relative; z-index:3; }
.ab-wave path{ fill: var(--cream); }

/* =========================================================================
   2 · STORY  (editorial + stats)
   ========================================================================= */
.ab-story{ position:relative; padding: 70px 0 110px; overflow:hidden; }
.ab-story::after{
  content:''; position:absolute; right:-160px; top:40px; width:460px; height:460px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,160,80,.14), transparent 68%); pointer-events:none;
}

.ab-lead{
  font-family: var(--font-display); font-weight: 450;
  font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.42;
  letter-spacing: -0.012em; color: var(--forest-deep);
  padding-left: 26px; position:relative;
}
.ab-lead::before{
  content:''; position:absolute; left:0; top:.35em; bottom:.35em; width:4px; border-radius:4px;
  background: linear-gradient(180deg, var(--gold-light), var(--terracotta));
}
.ab-lead::first-letter{
  font-weight: 700; color: var(--terracotta);
}
.ab-body p{ font-size: 1.04rem; line-height: 1.9; color:#3A4640; margin-bottom: 1.4rem; }
.ab-body p:last-child{ margin-bottom:0; }
.ab-body strong{ color: var(--forest-deep); }

.ab-quote{
  position:relative; margin-top: 2.4rem; padding: 34px 36px 30px 36px;
  border-radius: var(--ab-radius);
  background: linear-gradient(155deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--cream); overflow:hidden; box-shadow: var(--ab-shadow-md);
}
.ab-quote::before{
  content:'\201C'; position:absolute; top:-22px; left:20px;
  font-family: var(--font-display); font-size: 9rem; line-height:1; color: rgba(228,200,122,.22);
}
.ab-quote::after{
  content:''; position:absolute; right:-60px; bottom:-60px; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,160,80,.35), transparent 70%);
}
.ab-quote p{
  position:relative; z-index:2; margin:0 0 12px;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.5; color: var(--cream);
}
.ab-quote cite{
  position:relative; z-index:2; font-style:normal;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-light);
}

/* Stats panel */
.ab-stats{
  position:relative; height:100%; border-radius: var(--ab-radius); padding: 3px;
  background: linear-gradient(155deg, var(--gold-light), var(--gold) 45%, var(--terracotta));
  box-shadow: var(--ab-shadow-lg);
}
.ab-stats-inner{
  height:100%; border-radius: calc(var(--ab-radius) - 3px); padding: 40px 34px;
  background:
    radial-gradient(ellipse 320px 220px at 100% 0%, rgba(201,160,80,.16), transparent 70%),
    var(--paper);
  display:flex; flex-direction:column; justify-content:space-between;
}
.ab-stat-grid{ flex:1; align-content:center; }
.ab-stat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 22px; }
.ab-stat{
  padding: 34px 6px 32px 0; position:relative;
  transition: transform .35s var(--ease);
}
.ab-stat:nth-child(odd){ padding-right: 22px; border-right: 1px solid var(--line); }
.ab-stat:nth-child(even){ padding-left: 26px; }
.ab-stat:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
.ab-stat:hover{ transform: translateY(-4px); }
.ab-stat .n{
  display:block; font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.2rem, 3.4vw, 3rem); letter-spacing: -0.03em; margin-bottom: 10px;
  color: var(--forest-deep);
}
.ab-stat.hot .n{
  background: linear-gradient(135deg, var(--terracotta), #f08a5a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ab-stat .l{
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--blue-slate); opacity:.85;
}
.ab-stats-note{
  margin: 26px 0 0; padding-top: 22px; border-top: 1px dashed var(--line);
  font-size:.88rem; line-height:1.7; color:#4A554E;
}

/* =========================================================================
   3 · WHO WE ARE  (Fair Deal Property)
   ========================================================================= */
.ab-who{
  position:relative; padding: 110px 0;
  background:
    radial-gradient(ellipse 700px 400px at 0% 0%, rgba(201,160,80,.12), transparent 60%),
    var(--cream-dim);
  overflow:hidden;
}
.ab-who::before{
  content:'2009'; position:absolute; right:3%; top:10px;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(7rem, 16vw, 15rem); line-height:.8;
  color: transparent; -webkit-text-stroke: 1.5px rgba(15,61,46,.1); pointer-events:none; user-select:none;
}
.ab-who .container{ position:relative; z-index:2; }

.ab-heading h2{
  font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; margin-top: 12px; letter-spacing:-0.025em;
}
.ab-heading p{ color:#4A554E; font-size: 1rem; line-height:1.75; }

.ab-para-stack{ position:relative; padding-left: 38px; }
.ab-para-stack::before{
  content:''; position:absolute; left:9px; top:10px; bottom:10px; width:2px;
  background: linear-gradient(180deg, var(--gold), rgba(201,160,80,.15));
}
.ab-para{
  position:relative; margin-bottom: 30px;
}
.ab-para:last-child{ margin-bottom:0; }
.ab-para::before{
  content:''; position:absolute; left:-38px; top:8px; width:20px; height:20px; border-radius:50%;
  background: var(--cream-dim); border: 3px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(201,160,80,.16);
}
.ab-para p{ font-size: 1.04rem; line-height: 1.85; color:#3A4640; margin:0; }

.ab-focus{
  position:relative; border-radius: var(--ab-radius); padding: 40px 36px;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--cream); overflow:hidden; box-shadow: var(--ab-shadow-lg);
}
.ab-focus::before{
  content:''; position:absolute; top:-80px; right:-80px; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,160,80,.4), transparent 70%);
}
.ab-focus > *{ position:relative; z-index:2; }
.ab-focus .badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 24px; }
.ab-focus .credential-badge{
  background: rgba(228,200,122,.12); border-color: rgba(228,200,122,.4); color: var(--gold-light);
}
.ab-focus .credential-badge i{ color: var(--gold-light); }
.ab-focus h3{ color: var(--cream); font-size: 1.5rem; font-weight: 600; margin-bottom: 24px; }
.ab-focus ul{ list-style:none; padding:0; margin:0; counter-reset: focus; }
.ab-focus li{
  counter-increment: focus; display:flex; align-items:center; gap:16px;
  padding: 16px 0; border-bottom: 1px solid var(--line-light);
  font-size: .97rem; color: rgba(247,243,234,.9); transition: transform .3s var(--ease), color .3s var(--ease);
}
.ab-focus li:last-child{ border-bottom:none; padding-bottom:0; }
.ab-focus li::before{
  content: counter(focus, decimal-leading-zero);
  font-family: var(--font-mono); font-size:.78rem; color: var(--gold-light);
  width: 38px; height:38px; flex-shrink:0; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(228,200,122,.1); border: 1px solid rgba(228,200,122,.28);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.ab-focus li:hover{ transform: translateX(6px); color:#fff; }
.ab-focus li:hover::before{ background: var(--gold); color: var(--forest-deep); }

/* =========================================================================
   3.5 · THREE GENERATIONS  (legacy timeline)
   ========================================================================= */
.ab-legacy{
  position:relative; padding: 100px 0 120px;
  background: var(--cream-dim);
}
.ab-legacy-topline{
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

.legacy-spine{ position:relative; }
/* the connecting thread down the centre, gold, tapering top & bottom */
.legacy-spine::before{
  content:'';
  position:absolute; left:50%; top:8px; bottom:8px; width:2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,160,80,.55) 8%,
    rgba(201,160,80,.55) 92%,
    transparent 100%);
}
@media (max-width: 991.98px){
  .legacy-spine::before{ left: 34px; }
}

.legacy-gen{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items:center;
  margin-bottom: 96px;
}
.legacy-gen:last-child{ margin-bottom:0; }
.legacy-gen.reverse{ direction: rtl; }
.legacy-gen.reverse > *{ direction: ltr; }

.legacy-gen-media{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: var(--ab-shadow-lg, 0 30px 60px -20px rgba(10,42,31,.35));
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9.6;
}
.legacy-gen-media img{
  width:100%; height:100%; object-fit:cover; object-position: top center;
  display:block;
  transition: transform 1.1s var(--ease);
}
.legacy-gen:hover .legacy-gen-media img{ transform: scale(1.035); }
.legacy-gen-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,26,19,.5) 100%);
  pointer-events:none;
}

.legacy-numeral{
  position:absolute; z-index:2;
  bottom: 16px; left: 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: var(--forest-deep);
  background: var(--gold-light);
  border-radius: 999px;
  width: 38px; height: 38px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.4);
}

.legacy-gen-copy{ padding: 4px 8px; }
.legacy-era{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin-bottom: 14px;
}
.legacy-gen-copy h3{
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}
.legacy-tag{
  display:block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 18px;
}
.legacy-gen-copy p{
  color: rgba(23,27,24,.72);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: 22px;
}
.legacy-gen-copy p em{ color: var(--ink); font-style: italic; }
.legacy-gen.reverse .legacy-gen-copy p{ margin-left:auto; }

.legacy-marker{
  display:inline-flex; align-items:center; gap:9px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  background: rgba(15,61,46,.06);
  border: 1px solid rgba(15,61,46,.16);
  font-size: .84rem;
  font-weight: 600;
  color: var(--forest-deep);
}
.legacy-marker i{ color: var(--terracotta); font-size: .95rem; }

@media (max-width: 991.98px){
  .legacy-gen, .legacy-gen.reverse{
    direction: ltr;
    grid-template-columns: 1fr;
    gap: 26px;
    padding-left: 68px;
    margin-bottom: 64px;
  }
  .legacy-gen-copy p{ max-width: none; }
  .legacy-gen.reverse .legacy-gen-copy p{ margin-left:0; }
  .legacy-numeral{ left: 14px; }
}
@media (max-width: 575.98px){
  .legacy-gen, .legacy-gen.reverse{ padding-left: 0; }
  .legacy-spine::before{ display:none; }
}

/* =========================================================================
   4 · LEADERSHIP  (founders)
   ========================================================================= */
.ab-team{ position:relative; padding: 110px 0; }

.ab-founder{
  position:relative; height:100%; border-radius: var(--ab-radius); overflow:hidden;
  background: var(--paper); border:1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.ab-founder:hover{ transform: translateY(-10px); box-shadow: var(--ab-shadow-lg); border-color: transparent; }

.ab-founder-top{
  position:relative; padding: 38px 38px 78px;
  background:
    radial-gradient(ellipse 300px 200px at 100% 0%, rgba(201,160,80,.35), transparent 70%),
    linear-gradient(155deg, var(--forest) 0%, var(--forest-deep) 100%);
  overflow:hidden;
}
.ab-founder-top::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(255,255,255,.1) 1.2px, transparent 1.2px);
  background-size: 22px 22px; opacity:.6;
}
.ab-founder-idx{
  position:absolute; right:30px; top:14px;
  font-family: var(--font-display); font-weight:900; font-size: 5.6rem; line-height:1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(228,200,122,.28);
}
.ab-founder-head{ position:relative; z-index:2; display:flex; align-items:center; gap: 24px; }
.ab-avatar{
  position:relative; flex-shrink:0; width: 104px; height:104px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family: var(--font-display); font-weight:700; font-size: 2.2rem; letter-spacing:.02em;
  color: var(--forest-deep);
  background: radial-gradient(circle at 32% 26%, #fff3d6, var(--gold-light) 40%, var(--gold) 100%);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.7);
}
.ab-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ab-avatar::before{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border: 1.5px solid rgba(228,200,122,.55);
}
.ab-avatar::after{
  content:''; position:absolute; inset:-16px; border-radius:50%;
  border: 1px dashed rgba(228,200,122,.28); animation: abSpin 40s linear infinite;
}
@keyframes abSpin{ to{ transform: rotate(360deg); } }
.ab-founder h4{ color: var(--cream); font-size: 1.5rem; font-weight:700; margin: 0 0 6px; letter-spacing:-0.02em; }
.ab-role{
  display:inline-block; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--forest-deep); background: var(--gold-light); padding: 5px 12px; border-radius: 999px; font-weight:600;
}

.ab-founder-body{ position:relative; padding: 0 38px 40px; }
.ab-cred-row{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:-24px; margin-bottom: 24px; position:relative; z-index:3;
}
.ab-cred-row .credential-badge{
  background: var(--paper); border-color: rgba(201,160,80,.5);
  box-shadow: 0 12px 24px -12px rgba(15,61,46,.35); padding: 9px 16px 9px 12px; font-size:.7rem;
}
.ab-founder p{ font-size: .96rem; line-height: 1.85; color:#4A554E; margin:0; }

/* =========================================================================
   5 · VISION · MISSION · POLICY
   ========================================================================= */
.ab-pillars{
  position:relative; padding: 120px 0; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(ellipse 800px 500px at 50% -10%, rgba(201,160,80,.22), transparent 60%),
    linear-gradient(170deg, #0d3527, var(--forest-deep) 60%, #061a13);
  color: var(--cream);
}
.ab-pillars::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(circle, rgba(228,200,122,.14) 1.2px, transparent 1.2px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%);
}
.ab-pillars h2{ color: var(--cream); font-weight:600; font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing:-0.025em; line-height:1.12; }
.ab-pillars .eyebrow{ color: var(--gold-light); }
.ab-pillars .eyebrow::before{ background: var(--gold-light); }

.ab-pillar{
  position:relative; height:100%; padding: 46px 34px 40px; border-radius: var(--ab-radius); overflow:hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
/* animated gold top edge */
.ab-pillar::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  transform: scaleX(.2); opacity:.5; transition: transform .6s var(--ease), opacity .6s var(--ease);
}
/* glow blob */
.ab-pillar::after{
  content:''; position:absolute; width:240px; height:240px; border-radius:50%; right:-90px; bottom:-110px;
  background: radial-gradient(circle, rgba(201,160,80,.28), transparent 70%);
  opacity:0; transition: opacity .5s var(--ease);
}
.ab-pillar:hover{
  transform: translateY(-12px);
  border-color: rgba(228,200,122,.5);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: 0 40px 70px -30px rgba(0,0,0,.7);
}
.ab-pillar:hover::before{ transform: scaleX(1); opacity:1; }
.ab-pillar:hover::after{ opacity:1; }

.ab-pillar-no{
  position:absolute; top: 22px; right: 26px;
  font-family: var(--font-mono); font-size:.74rem; letter-spacing:.14em; color: rgba(228,200,122,.55);
}
.ab-pillar-icon{
  width: 74px; height: 74px; border-radius: 22px; margin-bottom: 30px;
  display:flex; align-items:center; justify-content:center; position:relative;
  background: linear-gradient(155deg, var(--gold-light), var(--gold));
  box-shadow: 0 20px 36px -12px rgba(201,160,80,.6), inset 0 1px 2px rgba(255,255,255,.6);
  transition: transform .5s var(--ease);
}
.ab-pillar-icon::after{ content:''; position:absolute; inset:-8px; border-radius:26px; border:1px solid rgba(228,200,122,.3); }
.ab-pillar-icon i{ font-size: 1.9rem; color: var(--forest-deep); }
.ab-pillar:hover .ab-pillar-icon{ transform: rotate(-6deg) scale(1.06); }
.ab-pillar h3{ color: var(--cream); font-size: 1.6rem; font-weight:700; margin-bottom: 16px; letter-spacing:-0.02em; }
.ab-pillar p{ color: rgba(247,243,234,.72); font-size: .96rem; line-height: 1.85; margin:0; position:relative; z-index:2; }

/* =========================================================================
   6 · COVERAGE AREA
   ========================================================================= */
.ab-coverage{ position:relative; padding: 110px 0; }
.ab-map{
  position:relative; border-radius: var(--ab-radius); padding: 46px 42px;
  background:
    radial-gradient(ellipse 500px 300px at 100% 0%, rgba(201,160,80,.14), transparent 70%),
    var(--paper);
  border: 1px solid var(--line); box-shadow: var(--ab-shadow-md); overflow:hidden;
}
.ab-map::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(15,61,46,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,61,46,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 10%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 10%, transparent 80%);
}
.ab-map > *{ position:relative; z-index:2; }
.ab-chips{ display:flex; flex-wrap:wrap; gap: 12px; }
.ab-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding: 13px 22px; border-radius: 999px;
  background: var(--cream); border:1px solid var(--line);
  font-size:.92rem; font-weight:600; color: var(--forest-deep);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ab-chip i{ color: var(--terracotta); font-size:.95rem; transition: color .3s var(--ease); }
.ab-chip:hover{
  transform: translateY(-4px) scale(1.03);
  background: var(--forest-deep); color: var(--cream); border-color: var(--forest-deep);
  box-shadow: 0 18px 30px -14px rgba(10,42,31,.55);
}
.ab-chip:hover i{ color: var(--gold-light); }
/* featured (HQ) chip */
.ab-chip.hq{
  background: linear-gradient(155deg, var(--terracotta), var(--terracotta-deep)); color:#fff; border-color: transparent;
  box-shadow: 0 14px 28px -12px rgba(217,104,59,.6);
}
.ab-chip.hq i{ color:#fff; }

/* =========================================================================
   7 · CTA
   ========================================================================= */
.ab-cta{
  position:relative; overflow:hidden; isolation:isolate; border-radius: 34px; padding: 72px 64px;
  background:
    radial-gradient(ellipse 500px 300px at 100% 0%, rgba(255,255,255,.22), transparent 65%),
    linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-deep) 100%);
  box-shadow: 0 50px 90px -40px rgba(184,83,46,.7);
}
.ab-cta::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image: radial-gradient(circle, rgba(255,255,255,.16) 1.5px, transparent 1.5px);
  background-size: 24px 24px; opacity:.55;
}
.ab-cta::after{
  content:''; position:absolute; z-index:-1; left:-90px; bottom:-140px; width:340px; height:340px; border-radius:50%;
  border: 50px solid rgba(255,255,255,.07);
}
.ab-cta h2{ color:#fff; font-weight:600; font-size: clamp(1.8rem, 3.2vw, 2.7rem); letter-spacing:-0.025em; line-height:1.12; margin-bottom: 12px; }
.ab-cta p{ color: rgba(255,255,255,.88); font-size: 1.05rem; margin:0; }
.ab-cta .btn-gold-3d{ font-size: 1.02rem; padding: 1rem 2.2rem; }

/* section reveal helpers (stagger) */
body.about-page .reveal.d1{ transition-delay: .08s; }
body.about-page .reveal.d2{ transition-delay: .16s; }
body.about-page .reveal.d3{ transition-delay: .24s; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px){
  .ab-hero{ padding-top: 150px; }
  .ab-story{ padding-bottom: 80px; }
  .ab-who, .ab-team, .ab-coverage{ padding: 80px 0; }
  .ab-pillars{ padding: 90px 0; }
  .ab-cta{ padding: 54px 40px; }
  .ab-founder-idx{ font-size: 4.4rem; }
}
@media (max-width: 767.98px){
  .ab-hero{ padding-top: 128px; }
  .ab-skyline{ height: 84px; margin-top: 46px; }
  .ab-wave{ height: 44px; }
  .ab-story{ padding: 46px 0 64px; }
  .ab-who, .ab-team, .ab-coverage{ padding: 64px 0; }
  .ab-pillars{ padding: 72px 0; }
  .ab-lead{ padding-left: 18px; }
  .ab-quote{ padding: 30px 24px 26px; }
  .ab-stats-inner{ padding: 30px 22px; }
  .ab-stat:nth-child(odd){ padding-right: 14px; }
  .ab-stat:nth-child(even){ padding-left: 18px; }
  .ab-focus{ padding: 32px 24px; }
  .ab-para-stack{ padding-left: 32px; }
  .ab-para::before{ left:-32px; width:18px; height:18px; }
  .ab-founder-top{ padding: 30px 24px 70px; }
  .ab-founder-head{ flex-direction:column; align-items:flex-start; gap: 22px; }
  .ab-avatar{ width: 88px; height: 88px; font-size: 1.9rem; }
  .ab-founder-idx{ font-size: 3.6rem; right: 20px; }
  .ab-founder-body{ padding: 0 24px 32px; }
  .ab-pillar{ padding: 40px 26px 34px; }
  .ab-map{ padding: 32px 22px; }
  .ab-chip{ padding: 11px 18px; font-size:.86rem; }
  .ab-cta{ padding: 44px 26px; text-align:center; border-radius: 26px; }
  .ab-hero-chip{ font-size:.66rem; padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce){
  .ab-orb, .ab-avatar::after{ animation:none !important; }
  .ab-skyline span{ animation:none !important; transform:none; opacity:1; }
}

/* =========================================================
   LISTING PAGE PHOTO GALLERY — carousel w/ arrows + swipe/drag
   Fixes: (1) gallery column no longer stretches to match the
   taller details column, so the thumbnail row sits directly
   under the photo instead of overlapping the CTA band below.
   (2) photos can now be moved through by the user — via arrow
   buttons, thumbnail clicks, touch swipe, mouse drag, or the
   left/right arrow keys.
   ========================================================= */
.gallery-sticky-wrap{ display:flex; flex-direction:column; }

.listing-gallery{ position:relative; }

.gallery-touch-zone{
  position:absolute; inset:0;
  overflow:hidden;
  border-radius:inherit;
  touch-action: pan-y;
  outline:none;
}

.gallery-slides{
  display:flex;
  height:100%;
  width:100%;
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  min-height:440px;
}
.gallery-slide img{
  width:100%;
  height:100%;
  min-height:440px;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

.gallery-nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:7;
  width:42px; height:42px;
  border-radius:50%;
  border:none;
  background:rgba(10,26,20,.45);
  backdrop-filter: blur(6px);
  color:#F7F3EA;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.gallery-nav-btn:hover{ background:rgba(10,26,20,.7); transform:translateY(-50%) scale(1.06); }
.gallery-nav-prev{ left:14px; }
.gallery-nav-next{ right:14px; }

.gallery-counter{
  position:absolute;
  bottom:14px; right:16px;
  z-index:6;
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  color:#F7F3EA;
  background:rgba(10,26,20,.5);
  padding:5px 11px;
  border-radius:999px;
}

@media (max-width: 991.98px){
  .gallery-slide, .gallery-slide img{ min-height: 320px; }
  .gallery-nav-btn{ width:36px; height:36px; font-size:1rem; }
}

/* =========================================================
   WHATSAPP FLOATING BUTTON
   ========================================================= */
.whatsapp-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 8px 24px rgba(15,61,46,.28), 0 2px 8px rgba(0,0,0,.18);
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  animation: wa-pulse 2.4s ease-in-out infinite;
}
.whatsapp-float:hover,
.whatsapp-float:focus{
  color:#fff;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 30px rgba(15,61,46,.34), 0 4px 10px rgba(0,0,0,.22);
}
.whatsapp-float i{ line-height: 1; }
.whatsapp-float .wa-tooltip{
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--forest-deep);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 7px 13px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, right .2s ease;
}
.whatsapp-float .wa-tooltip::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color: var(--forest-deep);
}
.whatsapp-float:hover .wa-tooltip{ opacity: 1; right: 72px; }

@keyframes wa-pulse{
  0%, 100% { box-shadow: 0 8px 24px rgba(15,61,46,.28), 0 2px 8px rgba(0,0,0,.18), 0 0 0 0 rgba(37,211,102,.45); }
  50% { box-shadow: 0 8px 24px rgba(15,61,46,.28), 0 2px 8px rgba(0,0,0,.18), 0 0 0 10px rgba(37,211,102,0); }
}

@media (max-width: 575.98px){
  .whatsapp-float{ right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 1.5rem; }
  .whatsapp-float .wa-tooltip{ display: none; }
}

/* =========================================================
   MOBILE BOTTOM TAB BAR
   On phones/tablets the main nav (Home, Listings, Services,
   About, Contact, AI Assistant) previously lived only inside the
   hamburger's offcanvas menu — an extra tap before any page was
   reachable. This bar puts all six on-screen at all times, the
   same way the desktop navbar does, without touching the desktop
   layout or the existing hamburger/offcanvas menu (kept as a
   fallback / for the Call & Post an Ad actions).
   ========================================================= */
.mobile-tabbar{ display:none; }

@media (max-width: 991.98px){
  .mobile-tabbar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:1040;
    background: rgba(247,243,234,.92);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border-top:1px solid var(--line);
    box-shadow: 0 -8px 24px -12px rgba(15,61,46,.22);
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-between;
    align-items: stretch;
  }
  .mobile-tabbar .mtb-link{
    flex:1 1 0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-width:0;
    padding: 5px 2px;
    color: var(--forest-deep) !important;
    text-decoration:none;
    border-radius:12px;
    transition: color .2s var(--ease), background .2s var(--ease);
  }
  .mobile-tabbar .mtb-link i{ font-size:1.18rem; line-height:1; }
  .mobile-tabbar .mtb-link span{
    font-size:.62rem; font-weight:600; letter-spacing:.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }
  .mobile-tabbar .mtb-link.active{ color: var(--terracotta) !important; background: rgba(217,104,59,.1); }

  /* Leave room at the bottom of every page so the tab bar never
     covers the footer or the last bit of content. */
  body{ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* Lift the WhatsApp button clear of the tab bar. */
  .whatsapp-float{ bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .agent-panel{ bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 400px){
  .mobile-tabbar .mtb-link span{ font-size:.58rem; }
  .mobile-tabbar .mtb-link i{ font-size:1.08rem; }
}


/* Home page founder cards — stack photo above text on phones */
@media (max-width: 575.98px){
  .founder-card{ flex-direction:column; align-items:center; text-align:center; padding:26px 22px; }
  .founder-info{ width:100%; }
  .founder-badges{ justify-content:center; }
}

/* =========================================================
   MOBILE "POST AD" BUTTON — header, between logo and menu icon
   ========================================================= */
.mobile-post-ad{
  display:inline-flex; align-items:center; gap:6px;
  margin:0 6px;
  padding:9px 15px; border-radius:999px;
  font-family:inherit; font-weight:700; font-size:.86rem; line-height:1; white-space:nowrap;
  color: var(--forest-deep); text-decoration:none;
  background: linear-gradient(155deg, var(--gold-light), var(--gold));
  box-shadow: 0 8px 20px -8px rgba(201,160,80,.7), 0 0 0 2px rgba(255,255,255,.18) inset;
  opacity:0; animation: navBrandIn .8s var(--ease) forwards; animation-delay:.28s;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mobile-post-ad i{ font-size:1rem; }
.mobile-post-ad:hover, .mobile-post-ad:active{ color: var(--forest-deep); transform: translateY(-1px); }
@media (max-width: 380px){
  .mobile-post-ad{ padding:8px 11px; font-size:.78rem; margin:0 4px; }
  .navbar-brand-logo{ height:48px; }
}


/* =========================================================
   POST PROPERTY — Terms & Policy box
   ========================================================= */
.terms-box{
  max-height: 340px; overflow-y: auto; padding: 20px 22px;
  background: var(--cream); border: 1.5px solid var(--line); border-radius: 14px;
  font-size: .88rem; line-height: 1.65; color: var(--ink);
  scrollbar-width: thin;
}
.terms-box:focus-visible{ outline: 3px solid rgba(201,160,80,.55); outline-offset: 2px; }
.terms-box .terms-title{ font-size: .98rem; font-weight: 800; letter-spacing: .2px; margin-bottom: 12px; color: var(--forest-deep); }
.terms-box h5{ font-size: .9rem; font-weight: 700; margin: 16px 0 6px; color: var(--forest-deep); }
.terms-box p{ margin-bottom: 8px; }
.terms-box ul{ padding-left: 1.2rem; margin-bottom: 8px; }
.terms-box li{ margin-bottom: 4px; }
.terms-box .terms-end{
  margin: 18px 0 0; padding-top: 12px; border-top: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: .75rem; color: #565f5a; text-align: center;
}
.terms-scroll-hint{
  margin-top: 10px; font-size: .8rem; color: #8a6c2e; display: flex; align-items: center; gap: 6px;
}
.terms-scroll-hint.done{ color: var(--forest-deep); font-weight: 600; }
.terms-check{
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; padding-left: 16px;
  background: rgba(217,104,59,.05); border: 1.5px solid rgba(217,104,59,.25); border-radius: 12px;
}
.terms-check .form-check-input{ float: none; margin: 3px 0 0; width: 1.15em; height: 1.15em; flex-shrink: 0; cursor: pointer; }
.terms-check .form-check-input:disabled{ cursor: not-allowed; }
.terms-check .form-check-input:checked{ background-color: var(--terracotta); border-color: var(--terracotta); }
.terms-check .form-check-label{ font-size: .88rem; cursor: pointer; }
.terms-check .form-check-input:disabled ~ .form-check-label{ opacity: .55; cursor: not-allowed; }
@media (max-width: 575.98px){
  .terms-box{ max-height: 300px; padding: 16px; font-size: .84rem; }
}


/* Price type — Fixed / Negotiable */
.price-type-group{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.price-type-group .ptg-label{ font-size:.82rem; font-weight:600; color:#565f5a; margin-right:2px; }
.price-type-pill{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:6px 14px; border-radius:999px; font-size:.86rem; font-weight:700;
  border:2px solid var(--line); background:var(--paper); color:var(--ink);
  transition: all .2s var(--ease);
}
.price-type-pill:hover{ border-color: var(--gold); }
.btn-check:checked + .price-type-pill{ background:var(--forest-deep); border-color:var(--forest-deep); color:#fff; }
.btn-check:checked + .price-type-pill i{ color:var(--gold); }
.btn-check:focus-visible + .price-type-pill{ outline:3px solid rgba(201,160,80,.55); outline-offset:2px; }

.lc3-price .lc3-price-type{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; opacity:.85; line-height:1.1; }
.price-type-tag{
  display:inline-flex; align-items:center; gap:5px; margin-left:10px; vertical-align:middle;
  padding:4px 11px; border-radius:999px; font-family:var(--font-body, inherit);
  font-size:.75rem; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
}
.price-type-tag.is-fixed{ background:rgba(15,61,46,.1); color:var(--forest-deep); }
.price-type-tag.is-negotiable{ background:rgba(201,160,80,.22); color:#7a5a17; }

/* ---- Property description as bullet points ---- */
.desc-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.desc-points li{ position:relative; padding-left:24px; line-height:1.6; color:#3A4640; }
.desc-points li::before{
  content:"\F26A"; font-family:"bootstrap-icons"; position:absolute; left:0; top:1px;
  color:var(--terracotta, #b5643c); font-size:.95rem;
}
.desc-points-detail li{ font-size:1rem; }
.desc-points-card{ gap:5px; }
.desc-points-card li{ font-size:.85rem; color:#565f5a; padding-left:20px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.desc-points-card li::before{ font-size:.8rem; }
.desc-points .desc-more{ font-size:.78rem; opacity:.7; font-style:italic; }
.desc-points .desc-more::before{ content:none; }
.desc-points .desc-more{ padding-left:0; }

/* =========================================================
   CATEGORY GRID — compact sizing
   PC / tablet : 6 columns x 3 rows (18 categories)
   Mobile      : 3 columns  (2 columns on very small phones)
   ========================================================= */
.cat-grid .tilt-3d .cat-tile-3d{
  --arch: 74px;
  min-height: 214px; padding: 22px 12px 16px;
  border-radius: 50% 50% 16px 16px / var(--arch) var(--arch) 16px 16px;
}
.cat-grid .tilt-3d .cat-tile-3d::after{
  inset: 6px;
  border-radius: 50% 50% 11px 11px / calc(var(--arch) - 6px) calc(var(--arch) - 6px) 11px 11px;
}
.cat-grid .tilt-3d .cat-tile-3d::before{ border-radius: 50% 50% 0 0 / 50px 50px 0 0; }
.cat-grid .tilt-3d .cat-tile-3d .ct3-icon{
  width: 48px; height: 48px; margin-bottom: 12px;
  box-shadow: 0 0 0 4px rgba(201,160,80,.16), 0 10px 18px -10px rgba(15,61,46,.5);
}
.cat-grid .tilt-3d .cat-tile-3d .ct3-icon i{ font-size: 1.15rem; }
.cat-grid .tilt-3d .cat-tile-3d h3{ font-size: .92rem; margin-bottom: 5px; }
.cat-grid .tilt-3d .cat-tile-3d .ct3-count{ font-size: .72rem; line-height: 1.35; margin-bottom: 12px; }
.cat-grid .tilt-3d .cat-tile-3d .ct3-arrow{ width: 30px; height: 30px; font-size: .8rem; }

/* tablet: still 6 across, slightly tighter */
@media (max-width: 991.98px){
  .cat-grid .tilt-3d .cat-tile-3d{ --arch: 56px; min-height: 176px; padding: 18px 8px 12px; }
  .cat-grid .tilt-3d .cat-tile-3d .ct3-icon{ width: 38px; height: 38px; margin-bottom: 9px; }
  .cat-grid .tilt-3d .cat-tile-3d .ct3-icon i{ font-size: .95rem; }
  .cat-grid .tilt-3d .cat-tile-3d h3{ font-size: .78rem; }
  .cat-grid .tilt-3d .cat-tile-3d .ct3-count{ font-size: .62rem; margin-bottom: 8px; }
  .cat-grid .tilt-3d .cat-tile-3d .ct3-arrow{ width: 24px; height: 24px; font-size: .68rem; }
}

/* mobile: 3 across */
@media (max-width: 767.98px){
  .cat-grid .tilt-3d .cat-tile-3d{ --arch: 50px; min-height: 156px; padding: 16px 6px 10px; border-radius: 50% 50% 12px 12px / var(--arch) var(--arch) 12px 12px; }
  .cat-grid .tilt-3d .cat-tile-3d::after{ inset: 4px; border-radius: 50% 50% 9px 9px / calc(var(--arch) - 4px) calc(var(--arch) - 4px) 9px 9px; }
  .cat-grid .tilt-3d .cat-tile-3d .ct3-icon{ width: 34px; height: 34px; margin-bottom: 7px; box-shadow: 0 0 0 3px rgba(201,160,80,.16); }
  .cat-grid .tilt-3d .cat-tile-3d .ct3-icon i{ font-size: .88rem; }
  .cat-grid .tilt-3d .cat-tile-3d h3{ font-size: .7rem; line-height: 1.18; margin-bottom: 3px; }
  .cat-grid .tilt-3d .cat-tile-3d .ct3-count{
    font-size: .57rem; line-height: 1.25; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cat-grid .tilt-3d .cat-tile-3d .ct3-arrow{ width: 22px; height: 22px; font-size: .62rem; }
}

/* very small phones: fall back to 2 across so text stays readable */
@media (max-width: 339.98px){
  .cat-grid.row-cols-3 > *{ flex: 0 0 auto; width: 50%; }
}

/* ---- Listing cards: compact (title, price on photo, location only) ---- */
.listing-card-3d .lc3-body-compact{ padding: 18px 20px 20px; gap: 8px; }
.listing-card-3d .lc3-body-compact h3{ font-size: 1.08rem; margin: 0; }
.listing-card-3d .lc3-meta-loc{ border-top: 0; padding-top: 0; font-size: .85rem; }

/* ---- Listing detail: smaller price box ---- */
.listing-price-box{ padding: 12px 16px; display: inline-block; min-width: 190px; max-width: 100%; }
.listing-price-box .eyebrow{ font-size: .62rem; margin-bottom: 2px; }
.listing-price-value{ font-family: var(--font-body); font-weight: 800; font-size: 1.7rem; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; color: var(--forest); }
.listing-price-value .price-type-tag{ font-size: .6rem; }

/* ---- Listing detail: Narendra Babu photo ---- */
.founder-photo{ width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; overflow: hidden; border: 2px solid var(--gold-light); box-shadow: 0 8px 18px -8px rgba(15,61,46,.45); background: var(--forest); }
.founder-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* Footer office labels */
.footer-contact .office-label{ display:block; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-light); margin-bottom:2px; }


/* =========================================================
   CLIENT REVISIONS — 1 Oct 2026 (Home + Services spacing & polish)
   All spacing tweaks are desktop/tablet only (>= 768px) so the
   mobile layout keeps its existing spacing.
   NOTE: the comment that introduces the "SECTION HEADERS" block
   above is missing its opening "/*", which makes the browser drop
   the plain `.section{padding:100px 0}` rule on desktop. It is left
   untouched on purpose (fixing it would add 100px to every page);
   the paddings below are set explicitly instead.
   ========================================================= */

/* Services hero — "Our Service Tracks" card moved up beside the heading, new colour */
.tracks-panel{
  background: linear-gradient(155deg, var(--forest), var(--forest-deep));
  border: 1px solid rgba(228,200,122,.38);
  border-radius: 26px;
  padding: 30px 34px 34px;
  box-shadow: 0 34px 60px -28px rgba(15,61,46,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.tracks-panel .credential-badge{
  align-self: flex-start;
  font-size: .74rem;
  padding: 8px 16px 8px 12px;
  background: rgba(228,200,122,.12);
  border-color: rgba(228,200,122,.4);
  color: var(--gold-light);
}
.tracks-panel .credential-badge i{ color: var(--gold-light); font-size: .9rem; }

/* Services — "Our Specialists Cover" title above investment chips */
.invest-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--forest-deep);
  margin-bottom: 18px;
}

/* Inline SVG icon inside gold icon tile (used for the balance-scale icon) */
.expertise-tile .et-icon .et-svg{ color: var(--forest-deep); display:block; }

/* Home — CTA band base margin (same as the old mb-5 on small screens) */
.rev-cta{ margin-bottom: 3rem; }

@media (min-width: 768px){
  .page-hero.rev-hero{ padding-bottom: 40px !important; }

  /* ---------- HOME ---------- */
  .section.rev-cat{ padding-top: 48px; }                       /* categories heading a little lower */
  .section.rev-whatwedo{ padding-top: 32px; padding-bottom: 56px; }               /* space under "See All Services" */
  .section.rev-founders{ padding-top: 44px; padding-bottom: 64px; }
  .rev-cta{ margin-top: 44px; margin-bottom: 32px; }           /* space above CTA, CTA sits lower */

  /* ---------- SERVICES ---------- */
  .section.rev-intro{ padding-bottom: 56px; }
  .section.split-dark.rev-dark{ padding-top: 44px; padding-bottom: 44px; }

  /* Buyers / Sellers numbered blocks — gaps roughly halved */
  .section.tight.rev-buy{ padding-top: 40px; padding-bottom: 36px; }
  .section.rev-sell{ padding-top: 40px; }
  .rev-compact .service-block-premium{ padding: 21px 0; }
  .rev-compact .section-head + .service-block-premium{ padding-top: 24px; }
  .rev-compact .service-block-premium:last-child{ padding-bottom: 0; }
  .rev-compact .service-block-premium .sb-list li:last-child{ margin-bottom: 4px; }

  /* Investments + Due Diligence + Commercial + Benefits */
  .section.rev-invest{ padding-top: 44px; padding-bottom: 44px; }
  .section.tight.rev-dd{ padding-top: 40px; padding-bottom: 40px; }
  .rev-dd .pull-quote{ margin-bottom: 0; }
  .section.tight.rev-comm{ padding-top: 40px; padding-bottom: 40px; }
  .section.rev-benefits{ padding-top: 44px; }
}

/* =========================================================
   POST AD FREE POPUP (home page, after welcome intro)
   ========================================================= */
.fap-backdrop{
  position:fixed; inset:0; z-index:2100; display:flex; align-items:center; justify-content:center; padding:18px;
  background: rgba(8,26,20,.62); backdrop-filter: blur(4px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.fap-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }
.fap-card{
  position:relative; width:100%; max-width:440px; text-align:center; overflow:hidden;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--cream); border:1px solid rgba(201,160,80,.45); border-radius:22px;
  padding:38px 30px 34px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.65);
  transform: translateY(26px) scale(.96); transition: transform .6s var(--ease);
}
.fap-backdrop.show .fap-card{ transform: translateY(0) scale(1); }
.fap-close{
  position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; border-radius:50%;
  background: rgba(255,255,255,.08); color: var(--cream); font-size:1.5rem; line-height:1; cursor:pointer;
  transition: background .3s var(--ease);
}
.fap-close:hover{ background: rgba(255,255,255,.2); }
.fap-badge{
  display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--forest-deep);
  font-family: var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.fap-title{ margin:18px 0 10px; font-size:clamp(1.55rem, 5vw, 2rem); line-height:1.15; color: var(--cream); }
.fap-title em{ color: var(--gold-light); font-style:italic; }
.fap-text{ margin:0 auto 22px; max-width:340px; font-size:.95rem; line-height:1.55; color: rgba(247,243,234,.82); }
.fap-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; text-decoration:none; }
.fap-later{
  margin-top:14px; background:none; border:0; color: rgba(247,243,234,.6); font-size:.85rem; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.fap-later:hover{ color: var(--cream); }
.fap-timer{ position:absolute; left:0; right:0; bottom:0; height:4px; background: rgba(255,255,255,.1); }
.fap-timer span{ display:block; height:100%; width:100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
@media (prefers-reduced-motion: reduce){
  .fap-backdrop, .fap-card{ transition:none; }
}

/* =========================================================
   LISTINGS PAGE — compact search on mobile
   The filter box used to fill the whole phone screen so no
   listing was visible until the visitor scrolled. On phones
   it is now: Area box + [Filters] [Search] buttons; the other
   filters open only when "Filters" is tapped. Category pills
   become one swipeable row. Desktop layout is unchanged.
   ========================================================= */
.lf-toggle, .lf-search-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; border-radius:12px; font-weight:600; font-size:.92rem; cursor:pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.lf-toggle{
  flex:1 1 0; background: var(--paper); color: var(--forest-deep);
  border:1.5px solid var(--line);
}
.lf-toggle[aria-expanded="true"]{ background: rgba(15,61,46,.07); border-color: var(--forest-deep); }
.lf-search-btn{
  flex:1.4 1 0; border:0; color:#fff;
  background: linear-gradient(155deg, #E27A4C, var(--terracotta));
  box-shadow: 0 10px 22px -10px rgba(217,104,59,.6);
}
.lf-search-btn:active, .lf-toggle:active{ transform: scale(.97); }
.lf-count{
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background: var(--terracotta); color:#fff; font-size:.72rem; line-height:20px; text-align:center;
}
.lf-count[hidden]{ display:none; }

@media (max-width: 767.98px){
  .listings-hero{ padding-bottom:0; }
  .listings-hero h1{ font-size:1.75rem; }
  .listings-hero .lead{ font-size:.92rem; margin-top:.5rem !important; }
  .listings-hero .row{ --bs-gutter-y:.75rem; }
  .listings-hero .stat-strip{ padding-top:14px; margin-top:0; }
  .listings-hero .stat-item{ width:auto; margin-bottom:0; margin-right:28px !important; }

  .listings-search-section{ padding-top:1rem !important; }
  .listings-filter-card{ padding:14px; border-radius:18px; margin-bottom:.9rem !important; }
  .listings-filter-card form{ --bs-gutter-y:.6rem; --bs-gutter-x:.6rem; }
  .listings-filter-card .lf-keyword .form-label{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .listings-filter-card .form-control,
  .listings-filter-card .form-select{ padding:.65rem .85rem; font-size:.9rem; }
  .listings-filter-card .form-label{ font-size:.78rem; margin-bottom:.25rem; }

  .lf-mobile-actions{ display:flex; gap:10px; }
  .lf-extra{ display:none; }
  .lf-open .lf-extra{ display:block; }

  /* category pills: a single swipeable row instead of a tall wall of buttons */
  .lf-pills{
    flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-bottom:1rem !important; padding-bottom:6px; scrollbar-width:none;
    margin-inline:-12px; padding-inline:12px;
  }
  .lf-pills::-webkit-scrollbar{ display:none; }
  .lf-pills .filter-pill{ flex:0 0 auto; white-space:nowrap; }
}

/* =========================================================
   AI CHAT FLOATING BUTTON — sits directly above WhatsApp
   ========================================================= */
.ai-float{
  position: fixed; right: 22px; bottom: 92px; z-index: 1200;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(155deg, var(--forest), var(--forest-deep));
  color: var(--gold-light); border: 2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow: 0 8px 24px rgba(15,61,46,.3), 0 2px 8px rgba(0,0,0,.18);
  text-decoration:none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ai-float:hover, .ai-float:focus{ color: var(--gold-light); transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 30px rgba(15,61,46,.36), 0 4px 10px rgba(0,0,0,.22); }
.ai-float i{ line-height:1; }
.ai-float .ai-badge{
  position:absolute; top:-6px; right:-4px; background: var(--terracotta); color:#fff;
  font-family: var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.04em;
  padding:2px 6px; border-radius:999px; border:2px solid var(--cream); line-height:1.2;
}
.ai-float .ai-tooltip{
  position:absolute; right:68px; top:50%; transform:translateY(-50%);
  background: var(--forest-deep); color: var(--cream); font-family: var(--font-body);
  font-size:.78rem; font-weight:600; white-space:nowrap; padding:7px 13px; border-radius:8px;
  opacity:0; pointer-events:none; transition: opacity .2s ease, right .2s ease;
}
.ai-float .ai-tooltip::after{ content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color: var(--forest-deep); }
.ai-float:hover .ai-tooltip{ opacity:1; right:72px; }
@media (max-width: 575.98px){
  .ai-float{ right:16px; bottom:80px; width:52px; height:52px; font-size:1.45rem; }
  .ai-float .ai-tooltip{ display:none; }
}
@media (max-width: 991.98px){
  /* clear the mobile tab bar: WhatsApp sits at 72px, AI button stacks above it */
  .ai-float{ bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}

/* Google review pill in footer */
.footer-review-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:9px 16px; border-radius:999px; border:1px solid var(--gold);
  color: var(--gold-light); font-size:.84rem; font-weight:600; text-decoration:none;
  transition: all .25s var(--ease);
}
.footer-review-btn i{ color: var(--gold); }
.footer-review-btn:hover{ background: var(--gold); color: var(--forest-deep); }
.footer-review-btn:hover i{ color: var(--forest-deep); }


/* =========================================================
   LISTING DETAIL — on desktop the Description sits under the photo
   gallery (left column) instead of the right column, so the empty
   space below the photo is used. On mobile it stays in the details
   column, right after the price.
   ========================================================= */
.listing-desc-left{ margin-top: 28px; }
.listing-desc-left h3{ font-size:1.1rem; font-weight:700; margin-bottom:12px; }


/* =========================================================================
   PERFORMANCE (phones / tablets) — keeps scrolling smooth
   Big blurred, endlessly-animated orbs and live backdrop blurs are what make
   mid-range phones stutter, so on small screens they become static and solid.
   ========================================================================= */
@media (max-width: 991.98px), (hover: none){
  .hh-orb, .ab-orb{ animation:none !important; filter: blur(46px); transform: translateZ(0); }
  .site-header.scrolled,
  .mobile-tabbar,
  .glass-panel,
  .trust-panel,
  .ab-hero .breadcrumb-pill{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .site-header.scrolled{ background: rgba(247,243,234,.97); }
  .mobile-tabbar{ background: rgba(247,243,234,.98); }
  .reveal{ transition-duration:.55s; transform: translateY(16px); }
  .reveal.in{ transform:none; }
}

/* =========================================================================
   MOTION POLISH — About page & shared touches
   Only transform / opacity are animated (GPU friendly). Entrance animations
   use "backwards" fill so normal hover effects keep working afterwards.
   Everything switches off for visitors who prefer reduced motion.
   ========================================================================= */

/* the big founding-year watermark (2009) drifts in and floats gently */
.ab-who::before{ opacity:0; animation: abYearIn 1.4s var(--ease) .2s forwards, abYearFloat 9s ease-in-out 1.6s infinite; will-change: transform; }
@keyframes abYearIn{ from{ opacity:0; transform: translateY(26px) scale(.96); } to{ opacity:1; transform: none; } }
@keyframes abYearFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }

/* timeline: the gold line draws downward, each dot pops in, paragraphs slide up one after another */
.ab-para-stack::before{ transform-origin: top; }
.reveal.in .ab-para-stack::before{ animation: abLineDraw 1.3s var(--ease) .15s backwards; }
@keyframes abLineDraw{ from{ transform: scaleY(0); } }
.reveal.in .ab-para{ animation: abParaIn .8s var(--ease) backwards; }
.reveal.in .ab-para::before{ animation: abDotPop .6s cubic-bezier(.34,1.56,.64,1) backwards; }
.reveal.in .ab-para:nth-child(1){ animation-delay:.25s; } .reveal.in .ab-para:nth-child(1)::before{ animation-delay:.3s; }
.reveal.in .ab-para:nth-child(2){ animation-delay:.5s; }  .reveal.in .ab-para:nth-child(2)::before{ animation-delay:.55s; }
.reveal.in .ab-para:nth-child(3){ animation-delay:.75s; } .reveal.in .ab-para:nth-child(3)::before{ animation-delay:.8s; }
.reveal.in .ab-para:nth-child(n+4){ animation-delay:.95s; }
@keyframes abParaIn{ from{ opacity:0; transform: translateY(18px); } }
@keyframes abDotPop{ from{ transform: scale(0); } }

/* "Focus Areas" list items cascade in */
.reveal.in .ab-focus li{ animation: abFocusIn .6s var(--ease) backwards; }
.reveal.in .ab-focus li:nth-child(1){ animation-delay:.2s; } .reveal.in .ab-focus li:nth-child(2){ animation-delay:.3s; }
.reveal.in .ab-focus li:nth-child(3){ animation-delay:.4s; } .reveal.in .ab-focus li:nth-child(4){ animation-delay:.5s; }
.reveal.in .ab-focus li:nth-child(5){ animation-delay:.6s; } .reveal.in .ab-focus li:nth-child(n+6){ animation-delay:.7s; }
@keyframes abFocusIn{ from{ opacity:0; transform: translateX(16px); } }

/* founder photos and pillar icons react on hover / tap */
.ab-avatar img{ transition: transform .6s var(--ease); }
.ab-founder:hover .ab-avatar img{ transform: scale(1.06); }
.ab-pillar-icon{ transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.ab-pillar:hover .ab-pillar-icon{ transform: rotate(-8deg) scale(1.12); }

/* extra stagger steps for grids */
.reveal.d2{ transition-delay:.18s; } .reveal.d3{ transition-delay:.27s; }

@media (max-width: 767.98px){
  .ab-who::before{ animation: abYearIn 1.2s var(--ease) .2s forwards; }   /* no endless float on phones */
}
@media (prefers-reduced-motion: reduce){
  .ab-who::before, .ab-para-stack::before, .ab-para, .ab-para::before, .ab-focus li{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .ab-who::before{ opacity:1 !important; }
}


/* ---- Listing detail: price look (green, bold) ---- */
.listing-price-box{ border-left: 4px solid var(--gold); }
.listing-price-box .eyebrow{ color: var(--forest); }
.listing-price-box .eyebrow::before{ background: var(--forest); }

/* ---- Listing detail: Listed date + Property ID chips — green with white text ---- */
.loc-chip.chip-green{
  background: linear-gradient(155deg, var(--forest), var(--forest-deep));
  color: #fff; border-color: var(--forest-deep);
  box-shadow: 0 8px 18px -10px rgba(15,61,46,.55);
}
.loc-chip.chip-green i{ color: var(--gold-light); opacity: 1; }
.loc-chip.chip-green:hover{ background: linear-gradient(155deg, var(--forest), var(--forest-deep)); color:#fff; }

/* ---- Post ad: Total / Per Sq.ft / Per Cent / Per Acre always on ONE line ---- */
.price-options-row .price-unit-group{ flex-wrap: nowrap; gap: 8px; }
.price-options-row .price-unit-group .ptg-label{ white-space: nowrap; }
.price-options-row .price-unit-group .price-type-pill{ white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 575.98px){
  .price-options-row .price-unit-group{ gap: 5px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .price-options-row .price-unit-group::-webkit-scrollbar{ display: none; }
  .price-options-row .price-unit-group .ptg-label{ font-size: .74rem; }
  .price-options-row .price-unit-group .price-type-pill{ padding: 5px 9px; font-size: .74rem; gap: 4px; }
}


/* =====================================================================
   LISTING TYPE  (Sell / Buy / Rental & Lease / Tenants / JV/JD)
   - small colour-coded badge on cards (outside)
   - BIG banner on the listing detail page (inside)
   ===================================================================== */
:root{
  --type-sell:   #1E8449;  /* green  */
  --type-buy:    #1F5FA8;  /* blue   */
  --type-rent:   #D9683B;  /* orange */
  --type-tenant: #7B3FA0;  /* purple */
  --type-jv:     #B8860B;  /* gold   */
  --type-other:  #0F3D2E;
}

/* ---- Cards (outside): type pill stacked above category pill ---- */
.listing-card-3d .lc3-badges{
  position:absolute; top:14px; left:14px; z-index:6;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  max-width:calc(100% - 78px);
}
.listing-card-3d .lc3-badges .lc3-badge{
  position:static; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lc3-type{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  font-family:var(--font-body); font-size:.8rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
  color:#fff; background:var(--type-other);
  border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 8px 18px -6px rgba(0,0,0,.45);
}
.lc3-type i{ font-size:.85rem; }
.lc3-type-sell{   background:var(--type-sell); }
.lc3-type-buy{    background:var(--type-buy); }
.lc3-type-rent{   background:var(--type-rent); }
.lc3-type-tenant{ background:var(--type-tenant); }
.lc3-type-jv{     background:var(--type-jv); }

/* ---- AI chat property cards ---- */
.agent-prop-card .apc-type{
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 9px; border-radius:999px;
  font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; background:var(--type-other); box-shadow:0 4px 10px -3px rgba(0,0,0,.4);
}
.agent-prop-card .apc-type.lc3-type-sell{   background:var(--type-sell); }
.agent-prop-card .apc-type.lc3-type-buy{    background:var(--type-buy); }
.agent-prop-card .apc-type.lc3-type-rent{   background:var(--type-rent); }
.agent-prop-card .apc-type.lc3-type-tenant{ background:var(--type-tenant); }
.agent-prop-card .apc-type.lc3-type-jv{     background:var(--type-jv); }
.agent-prop-card .apc-media .apc-badge{ top:auto; bottom:8px; }

/* ---- Listing detail (inside): BIG type banner ---- */
.listing-type-banner{
  --tb: var(--type-other);
  display:flex; align-items:center; gap:16px;
  width:100%; margin:0 0 18px; padding:18px 22px;
  border-radius:18px; color:#fff;
  background:linear-gradient(135deg, var(--tb), color-mix(in srgb, var(--tb) 70%, #000));
  box-shadow:0 18px 36px -16px color-mix(in srgb, var(--tb) 80%, #000);
  position:relative; overflow:hidden;
}
.listing-type-banner::after{
  content:''; position:absolute; right:-40px; top:-40px; width:150px; height:150px;
  border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none;
}
.listing-type-banner .ltb-icon{
  flex:0 0 auto; width:58px; height:58px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.2); font-size:1.7rem;
}
.listing-type-banner .ltb-text{ display:flex; flex-direction:column; gap:4px; min-width:0; position:relative; z-index:1; }
.listing-type-banner .ltb-kicker{
  font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; opacity:.85;
}
.listing-type-banner .ltb-label{
  font-family:var(--font-body); font-weight:800; line-height:1.05; letter-spacing:-.01em;
  font-size:clamp(1.9rem, 4.2vw, 2.7rem); text-transform:uppercase; overflow-wrap:anywhere;
}
.listing-type-banner .ltb-sub{ font-size:.92rem; font-weight:500; opacity:.92; }
.listing-type-banner.lc3-type-sell{   --tb: var(--type-sell); }
.listing-type-banner.lc3-type-buy{    --tb: var(--type-buy); }
.listing-type-banner.lc3-type-rent{   --tb: var(--type-rent); }
.listing-type-banner.lc3-type-tenant{ --tb: var(--type-tenant); }
.listing-type-banner.lc3-type-jv{     --tb: var(--type-jv); }
@media (max-width:575.98px){
  .listing-type-banner{ padding:14px 16px; gap:12px; }
  .listing-type-banner .ltb-icon{ width:48px; height:48px; font-size:1.4rem; }
}