/* =========================================================
   COLOUR GRADE + POLISH
   Warmer ground, deeper navy, softer shadows, real depth.
   Loaded after styles.css so it grades the system beneath it.
   ========================================================= */

:root{
  --wrap:min(2200px, 94vw);
  --navy:#0c1e2e;
  --navy-2:#15324a;
  --copper:#d9663a;
  --copper-dk:#bb4f28;
  --brass:#c9a14a;
  --verified:#2c7a62;

  --paper:#ffffff;
  --ground:#f6f4f1;          /* warm off-white, not cool grey */
  --sunk:#eeeae4;
  --ink:#111e29;
  --ink-2:#414f5b;
  --muted:#6f7b85;
  --line:#e3ded6;
  --line-soft:#eeeae4;

  --radius:10px;
  --shadow-sm:0 1px 2px rgba(24,20,14,.05);
  --shadow:0 1px 3px rgba(24,20,14,.06), 0 14px 30px -20px rgba(24,20,14,.45);
  --shadow-lg:0 2px 6px rgba(24,20,14,.07), 0 30px 60px -32px rgba(24,20,14,.55);
}

body{background:var(--ground)}

/* alternating grounds give the page rhythm */
.section--tint{background:linear-gradient(180deg,var(--sunk) 0%,var(--ground) 100%)}

/* header on a hairline, not a hard border */
.site-head{box-shadow:0 1px 0 rgba(255,255,255,.7), 0 6px 20px -18px rgba(24,20,14,.5)}
.brand .mark{
  background:linear-gradient(145deg,var(--navy-2),var(--navy));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px -6px rgba(12,30,46,.6);
}
.announce{background:linear-gradient(90deg,var(--navy) 0%,var(--navy-2) 52%,var(--navy) 100%)}

/* buttons with a little dimension */
.btn--primary{
  background:linear-gradient(180deg,#e0724a,var(--copper));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -12px rgba(190,70,30,.9);
}
.btn--primary:hover{background:linear-gradient(180deg,var(--copper),var(--copper-dk))}
.btn--navy{background:linear-gradient(180deg,var(--navy-2),var(--navy))}

/* ---------- hero ---------- */
.hero{padding-block:64px 76px}
.hero-bg::after{
  background:
    linear-gradient(180deg,rgba(8,18,28,.52) 0%,rgba(8,18,28,.40) 38%,rgba(8,18,28,.80) 100%),
    radial-gradient(90% 62% at 50% 40%,rgba(8,18,28,.42),rgba(8,18,28,.10) 78%);
}
/* panorama: anchor to the skyline, never crop to a narrow slice */
.hero-bg img,.hero-bg video{object-position:center bottom}
.hero h1{font-size:clamp(34px,5vw,56px); letter-spacing:-.02em}
.hero h1 em{
  color:#ffa06a; border-bottom:0;
  background:linear-gradient(180deg,transparent 78%,rgba(255,160,106,.34) 78%);
}
.hero .sub{color:#c8d5df; font-size:16px; max-width:62ch}

/* stat strip — a frosted glass card straddling the foot of the hero,
   so the blur has the photograph to work against */
.statband{background:transparent; position:relative; z-index:5; padding-block:34px 6px}
.hero-stats{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  max-width:1000px; margin:0 auto; padding-block:20px; border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(246,244,241,.80));
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(255,255,255,.35) inset,
    0 18px 40px -24px rgba(10,24,38,.38),
    0 2px 6px -3px rgba(10,24,38,.12);
}
/* the gloss: a highlight across the top third, and a soft sheen down one side */
.hero-stats::before{
  content:""; position:absolute; left:0; right:0; top:0; height:52%; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
}
.hero-stats::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.30) 50%,rgba(255,255,255,0) 60%);
}
.hero-stats div{
  position:relative; z-index:1;
  padding:6px 18px; text-align:center; border-left:1px solid rgba(12,30,46,.12);
}
.hero-stats div:first-child{border-left:0}
.hero-stats b{
  display:block; font-size:26px; font-weight:800; color:var(--navy);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.15;
}
.hero-stats span{
  display:block; margin-top:4px; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}

/* ---------- cards ---------- */
.card,.row-card,.project-card,.lead-card,.broker-card,.rail-box,.block,.buybox{border-radius:var(--radius)}
.card{transition:box-shadow .2s, transform .2s}
.card .media,.project-card .media{position:relative; overflow:hidden; background:var(--navy)}
.card .media img,.project-card .media img{
  width:100%; height:190px; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.project-card .media img{height:170px}
.card:hover .media img,.project-card:hover .media img{transform:scale(1.045)}
.card .media::after,.project-card .media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,22,33,.10) 0%,transparent 34%,rgba(10,22,33,.34) 100%);
}
.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px)}

.row-card{transition:box-shadow .2s, border-color .2s}
.row-card .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.row-card:hover{border-color:#d2cabe; box-shadow:var(--shadow)}

.badge-verified{
  background:rgba(18,56,46,.88); box-shadow:0 2px 10px -4px rgba(0,0,0,.5); letter-spacing:.02em;
}
.badge-count{background:rgba(10,20,29,.7)}

.card .price,.row-card .side .price{font-variant-numeric:tabular-nums; color:var(--navy); white-space:nowrap}
.row-card{grid-template-columns:250px minmax(0,1fr) 230px}
.row-card .side .psf{font-size:12px; color:var(--muted)}
.card .price small{margin-top:2px}

/* ---------- section headings ---------- */
.section-head{align-items:center; border-bottom:1px solid var(--line); padding-bottom:12px}
.section-head h2{font-size:24px}
.section-head h2 small{
  display:block; font-size:12.5px; font-weight:500; color:var(--muted);
  letter-spacing:0; margin-top:3px;
}

/* ---------- locality tiles ---------- */
.locality-tile{position:relative; display:block; border:0; box-shadow:var(--shadow-sm)}
.locality-tile img{width:100%; height:150px; object-fit:cover; display:block}
.grid--4 .locality-tile img{height:180px}
.locality-tile .cap{
  position:absolute; left:0; right:0; bottom:0; padding:12px 13px; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,18,28,.86));
}
.locality-tile b{font-size:14px}
.locality-tile span{font-size:11.5px; color:#cbd9e4}

/* ---------- band ---------- */
.band{
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 58%,#1d4260 100%);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.band::after{
  content:""; position:absolute; right:-80px; top:-110px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(217,102,58,.30),transparent 68%);
}
.band > *{position:relative; z-index:1}

/* ---------- developer wordmarks ---------- */
.wordmark{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:16px 12px; min-height:84px; box-shadow:var(--shadow-sm);
  transition:border-color .18s, transform .18s;
}
.wordmark:hover{border-color:#cfc6b8; transform:translateY(-2px)}
.wordmark b{font-size:14px; font-weight:800; letter-spacing:-.02em; color:var(--navy); line-height:1.25}
.wordmark span{font-size:10.5px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-top:4px}

/* ---------- detail page ---------- */
.gallery img{width:100%; height:100%; object-fit:cover; border-radius:8px; display:block}
.gallery .g1{grid-row:1/3}
.detail h1{font-size:30px}
.buybox{box-shadow:var(--shadow-lg); border-color:#ded7cc}
.speclist div b{font-variant-numeric:tabular-nums}
table.terms td:last-child{color:var(--navy)}

/* ---------- team ---------- */
.broker-card .avatar{
  background:linear-gradient(145deg,var(--navy-2),var(--navy)); color:#fff;
  display:grid; place-items:center; font-size:23px; font-weight:800; letter-spacing:-.02em;
}
.broker-card .role{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--copper);
  font-weight:700; margin-bottom:6px;
}

/* ---------- footer + filters ---------- */
.site-foot{background:linear-gradient(180deg,var(--navy) 0%,#081724 100%)}
.filterbar{background:rgba(255,255,255,.93)}
.filterbar select:hover,.filterbar .range:hover{border-color:#cfc6b8}
.filterbar select:focus{border-color:var(--copper)}

/* wide screens: bigger media, roomier rows — not more empty margin */
@media (min-width:2000px){
  .card .media img,.project-card .media img{height:270px}
  .grid--4 .locality-tile img{height:240px}
  .hero{padding-block:84px 96px}
  .hero-stats{max-width:1120px}
  .hero-stats b{font-size:30px}
  .searchbox{max-width:960px}
}
@media (min-width:1500px){
  .card .media img,.project-card .media img{height:230px}
  .project-card .media img{height:210px}
  .grid--4 .locality-tile img{height:210px}
  .row-card{grid-template-columns:320px minmax(0,1fr) 260px}
  .row-card .media{min-height:210px}
  .results-layout{grid-template-columns:minmax(0,1fr) 360px}
  .grid{gap:22px}
}
@media (max-width:700px){
  .hero-stats{grid-template-columns:1fr 1fr; gap:14px 0; padding-block:18px}
  .hero-stats div:nth-child(3){border-left:0}
  .hero{padding-block:44px 52px}
}

/* =========================================================
   SECTION SPOTLIGHT — glass
   The section nearest the middle of the screen rises onto a
   frosted panel, the same material as the stat bar. Only live
   once scrollspy.js adds .spy-on, so with JS off nothing dims.
   ========================================================= */
.spy-on .section{
  transition:opacity .42s ease, filter .42s ease;
  will-change:opacity;
}
.spy-on .section.is-dim{opacity:.62; filter:saturate(.82)}
.spy-on .section.is-lit{opacity:1; filter:none}

/* the glass panel itself, behind the section's content */
.spy-on .section > .wrap{position:relative}
.spy-on .section > .wrap::before{
  content:"";
  position:absolute; z-index:-1;
  inset:-30px -26px;
  border-radius:22px;
  opacity:0;
  transform:scale(.985);
  background:linear-gradient(162deg,rgba(255,255,255,.94),rgba(246,244,241,.66));
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(255,255,255,.4) inset,
    0 22px 50px -28px rgba(10,24,38,.42),
    0 2px 8px -4px rgba(10,24,38,.14);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.spy-on .section.is-lit > .wrap::before{opacity:1; transform:scale(1)}

/* a sheen that sweeps across the panel once, as it lights */
.spy-on .section > .wrap::after{
  content:"";
  position:absolute; z-index:-1;
  inset:-30px -26px;
  border-radius:22px;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,.55) 48%,
    rgba(255,255,255,0) 62%);
  background-size:260% 100%;
  background-position:120% 0;
}
.spy-on .section.is-lit > .wrap::after{
  animation:sheen 1.15s cubic-bezier(.25,.6,.3,1) .12s 1 both;
}
@keyframes sheen{
  0%   {opacity:0;   background-position:130% 0}
  22%  {opacity:.95}
  100% {opacity:0;   background-position:-30% 0}
}

/* heading rule and card lift, as before */
.spy-on .section .section-head h2{
  position:relative;
  transition:padding-left .42s cubic-bezier(.2,.7,.3,1);
}
.spy-on .section .section-head h2::before{
  content:"";
  position:absolute; left:0; top:.42em;
  width:4px; height:0; border-radius:2px;
  background:var(--copper);
  transition:height .42s cubic-bezier(.2,.7,.3,1);
}
.spy-on .section.is-lit .section-head h2{padding-left:16px}
.spy-on .section.is-lit .section-head h2::before{height:1.05em}

.spy-on .section.is-lit .card,
.spy-on .section.is-lit .project-card,
.spy-on .section.is-lit .lead-card{box-shadow:var(--shadow)}

/* the tinted bands already carry a wash; soften the glass over them */
.spy-on .section--tint.is-lit > .wrap::before{
  background:linear-gradient(162deg,rgba(255,255,255,.88),rgba(255,255,255,.58));
}

@media (max-width:860px){
  .spy-on .section > .wrap::before,
  .spy-on .section > .wrap::after{inset:-20px -14px; border-radius:16px}
}

@media (prefers-reduced-motion: reduce){
  .spy-on .section,
  .spy-on .section.is-dim{opacity:1 !important; filter:none !important; transition:none}
  .spy-on .section > .wrap::before{transition:none}
  .spy-on .section.is-lit > .wrap::after{animation:none}
  .spy-on .section .section-head h2,
  .spy-on .section .section-head h2::before{transition:none}
}

/* =========================================================
   CHROME
   The header stays pinned — it is the way back to everything else.
   The filter bar does NOT: it scrolls away with the listings, so
   nothing floats over the results while you are reading them.
   Scroll back to the top to use it again.
   ========================================================= */
.site-head{position:sticky; top:0; z-index:40}

.filterbar{
  position:static;          /* scrolls away with the page */
  background:var(--paper);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom:1px solid var(--line);
}

/* the header earns a shadow once it is sitting over content */
.is-scrolled .site-head{box-shadow:0 1px 0 var(--line), 0 10px 24px -20px rgba(10,24,38,.55)}
.site-head{transition:box-shadow .2s ease}

@media (prefers-reduced-motion: reduce){
  .site-head{transition:none}
}

/* =========================================================
   BRAND — navy and gold, from the company card
   ========================================================= */
:root{
  --gold:#c9a227;
  --gold-light:#f3d47a;
  --gold-dark:#8c6c15;
}

.brand .mark{
  background:linear-gradient(150deg,#12283c,var(--navy));
  display:grid; place-items:center;
  box-shadow:inset 0 1px 0 rgba(243,212,122,.22), 0 4px 12px -6px rgba(12,30,46,.6);
}
.brand .mark svg{display:block}
.brand-logo{height:40px; width:auto; display:block}
/* stacked wordmark: MD GROUP over the tagline, as on the card */
.brand{align-items:center; gap:11px}
.brandline{display:flex; flex-direction:column; justify-content:center; line-height:1}
.brandline-name{
  font-family:"Newsreader",Georgia,serif;
  font-size:21px; letter-spacing:.01em; white-space:nowrap;
}
.brandline-name b{font-weight:600; color:var(--navy)}
.brandline-name em{
  font-style:normal; font-weight:600;
  color:#9a7a17;                      /* darker gold: readable on white */
  letter-spacing:.04em;
}
.brandline-tag{
  font-family:"Newsreader",Georgia,serif; font-style:italic;
  font-size:10.5px; color:var(--muted); margin-top:3px; white-space:nowrap;
  letter-spacing:.005em;
}

@media (max-width:560px){
  .brandline-name{font-size:18px}
  .brandline-tag{display:none}       /* no room for it on a phone */
}

/* footer: tagline in gold, contacts as a proper list */
.foot-tagline{
  font-family:"Newsreader",Georgia,serif; font-style:italic;
  color:var(--gold-light); font-size:15px; margin:0 0 10px !important;
}
.foot-contacts{display:grid; gap:9px; margin-top:14px}
.foot-contacts li b{
  display:block; color:#fff; font-size:13px; font-weight:700; letter-spacing:-.01em;
}
.foot-contacts li a{color:#c3d2de}
.foot-contacts li a:hover{color:var(--gold-light)}
.foot-address{color:#a9bccd; line-height:1.6; max-width:34ch}
.site-foot h4{color:var(--gold-light)}
.site-foot .legal{border-top-color:rgba(201,162,39,.25)}

/* =========================================================
   FLOATING WHATSAPP BUTTON
   Fixed bottom right, on every page, always visible.
   ========================================================= */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:200;
  display:inline-flex; align-items:center; gap:0;
  height:56px; min-width:56px; padding:0 14px;
  border-radius:28px; overflow:hidden;
  background:#25d366; color:#fff;
  box-shadow:0 6px 18px -4px rgba(18,140,70,.55), 0 2px 6px -2px rgba(0,0,0,.25);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease;
}
.wa-fab:hover,.wa-fab:focus-visible{
  background:#1fbe5a;
  transform:translateY(-2px);
  box-shadow:0 10px 26px -6px rgba(18,140,70,.6), 0 3px 8px -2px rgba(0,0,0,.28);
}
.wa-fab svg{flex:0 0 auto; margin:0 auto}
.wa-fab-label{
  max-width:0; opacity:0; white-space:nowrap;
  font-size:14.5px; font-weight:700; letter-spacing:-.01em;
  transition:max-width .28s cubic-bezier(.2,.7,.3,1), opacity .2s ease, margin-left .28s ease;
}
/* the label unfurls on hover, so it is a neat circle at rest */
.wa-fab:hover .wa-fab-label,
.wa-fab:focus-visible .wa-fab-label{max-width:110px; opacity:1; margin-left:10px}

/* keep clear of the phone's home indicator */
@media (max-width:700px){
  .wa-fab{
    right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    height:52px; min-width:52px; padding:0 12px;
  }
  .wa-fab:hover .wa-fab-label,
  .wa-fab:focus-visible .wa-fab-label{max-width:0; opacity:0; margin-left:0}
}

/* never sit on top of the image lightbox */
.lightbox:not([hidden]) ~ .wa-fab{display:none}

@media (prefers-reduced-motion: reduce){
  .wa-fab,.wa-fab-label{transition:none}
  .wa-fab:hover{transform:none}
}
@media print{ .wa-fab{display:none} }