/* ============================================================================
   UK REALTY CONNECT — portal design system  v2
   ----------------------------------------------------------------------------
   Benchmarked against bayut.com, then deliberately diverged. Bayut's homepage
   is built to narrow ~200,000 listings: AI search box, beds/baths, map, agent
   marketplace. We have 22 curated new-launch projects from 2 developers. The
   same UI over 22 items reads as an empty shop — a filter bar that promises to
   narrow and returns three results looks broken, not premium.

   So: keep what Bayut is genuinely good at (instant search affordance, dense
   structured cards, visible trust marks, heavy internal linking for SEO) and
   replace volume-search with the thing a channel partner can actually offer —
   depth and transparency per project. Cost sheets, carpet-area maths, Karnataka
   stamp duty, published RERA numbers on every card.

   Tokens follow the house system (see CLAUDE.md): Poppins only, elegance from
   size + weight 300 + tight tracking, rounded everything, ONE copper accent.
   ========================================================================= */

:root{
  --ink:#141414;
  --slate:#43494F;
  --muted:#8A9099;
  --paper:#F4F6F5;
  --line:#E6E9E8;
  --bronze:#B4531F;
  --bronze-d:#8E3F14;
  --bronze-t:#FBF1EA;
  --green:#137333;
  --white:#fff;

  --r:20px;
  --r-sm:14px;
  --r-xs:10px;
  --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(20,20,20,.04), 0 4px 16px rgba(20,20,20,.06);
  --shadow-md:0 2px 6px rgba(20,20,20,.05), 0 12px 34px rgba(20,20,20,.10);
  --shadow-lg:0 30px 70px rgba(20,20,20,.16);

  --wrap:1480px;   /* wide: Nahid wants every page to use the screen, not a centred column */
  --head:68px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  color:var(--slate);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:300;letter-spacing:-.025em;line-height:1.15}
h1{font-size:clamp(2.1rem,5.4vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem)}
h3{font-size:1.12rem;font-weight:500;letter-spacing:-.015em}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,3.2vw,48px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------- pieces */
.eyebrow{
  display:inline-block;padding:.34rem .86rem;border-radius:var(--r-pill);
  background:var(--bronze-t);color:var(--bronze);
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:1rem;
}
.eyebrow.on-dark{background:rgba(255,255,255,.14);color:#fff}
.lede{font-size:1.06rem;font-weight:300;max-width:62ch;color:var(--slate)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.5rem;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:.9rem;font-weight:500;letter-spacing:-.01em;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-pri{background:var(--bronze);color:#fff;box-shadow:0 6px 18px rgba(180,83,31,.28)}
.btn-pri:hover{background:var(--bronze-d);box-shadow:0 10px 26px rgba(180,83,31,.34)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:#cfd4d2}
.btn-dark{background:var(--ink);color:#fff}
.btn-lg{padding:1rem 1.9rem;font-size:.98rem}
.btn-block{width:100%}

section{padding:clamp(3.4rem,7vw,6rem) 0}
section.alt{background:var(--paper)}
section.ink{background:var(--ink);color:rgba(255,255,255,.76)}
section.ink h2,section.ink h3{color:#fff}
.sec-head{margin-bottom:2.6rem;max-width:72ch}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head.center .lede{margin-inline:auto}
.sec-head .row{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}

/* ------------------------------------------------------------ utility bar */
.util{background:var(--ink);color:rgba(255,255,255,.68);font-size:.76rem}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:38px}
.util a{color:rgba(255,255,255,.86)}
.util a:hover{color:#fff}
.util .u-l{display:flex;gap:1.4rem;align-items:center;min-width:0}
.util .u-r{display:flex;gap:1.2rem;align-items:center}
.util .dot{width:6px;height:6px;border-radius:50%;background:#3FBF6A;flex:none}
.util .hide-s{display:inline}

/* ----------------------------------------------------------------- header */
.head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);
}
.head .wrap{display:flex;align-items:center;gap:1.4rem;height:var(--head)}
.brand{display:flex;align-items:center;gap:.6rem;flex:none}
.brand svg{width:38px;height:38px;border-radius:11px;display:block}
.brand b{display:block;font-size:.83rem;font-weight:600;letter-spacing:.07em;color:var(--ink)}
.brand span small{display:block;font-size:.63rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.nav{display:flex;gap:.3rem;margin-left:auto}
.nav a{
  padding:.5rem .82rem;border-radius:var(--r-pill);font-size:.87rem;font-weight:400;
  color:var(--slate);transition:background .16s ease,color .16s ease;
}
.nav a:hover{background:var(--paper);color:var(--ink)}
.nav a.here{color:var(--ink);font-weight:500;background:var(--paper)}
.head-cta{display:flex;align-items:center;gap:.6rem;flex:none}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;padding:0}
.burger i{display:block;width:17px;height:1.6px;background:var(--ink);margin:3.4px auto;border-radius:2px;transition:.22s}
.burger.on i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mobnav{display:none;border-top:1px solid var(--line);background:#fff}
.mobnav.on{display:block}
.mobnav a{display:block;padding:.95rem 20px;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink)}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;color:#fff;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,12,14,.82) 0%,rgba(10,12,14,.60) 42%,rgba(10,12,14,.86) 100%);
}
.hero-in{padding:clamp(3.2rem,8vw,6.4rem) 0 clamp(2.4rem,5vw,3.4rem)}
.hero h1{color:#fff;max-width:17ch}
.hero h1 em{font-style:normal;color:#F0B590}
.hero-sub{max-width:56ch;font-weight:300;color:rgba(255,255,255,.84);font-size:clamp(.98rem,1.5vw,1.14rem);margin-top:1.1rem}

/* search: ONE rounded bar of selects. Never a row of chips — a 17-chip filter
   was rejected outright as "an absolute mess", and it stays rejected. */
.tabs{display:flex;gap:.4rem;margin:2rem 0 .9rem;flex-wrap:wrap}
.tabs button{
  padding:.6rem 1.15rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.88);font-size:.85rem;cursor:pointer;
  transition:.18s;backdrop-filter:blur(6px);
}
.tabs button:hover{background:rgba(255,255,255,.16)}
.tabs button.on{background:#fff;color:var(--ink);border-color:#fff;font-weight:500}

.search{
  background:#fff;border-radius:var(--r);padding:.55rem;box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:repeat(4,1fr) auto;gap:.4rem;align-items:stretch;
}
.search .cell{padding:.55rem .95rem;border-radius:var(--r-sm);transition:background .16s}
.search .cell:hover{background:var(--paper)}
.search .cell+.cell{box-shadow:inset 1px 0 0 var(--line)}
.search label{display:block;font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.1rem}
.search select{
  width:100%;border:0;background:transparent;font-size:.94rem;font-weight:500;color:var(--ink);
  padding:0;cursor:pointer;appearance:none;letter-spacing:-.01em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A9099' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .1rem center;background-size:11px;padding-right:1.1rem;
}
.search select:focus{outline:none}
.search .go{align-self:stretch;min-width:132px}
.hero-count{margin-top:.9rem;font-size:.85rem;color:rgba(255,255,255,.72)}
.hero-count b{color:#fff;font-weight:500}

/* quiet SEO link row — links, not filters */
.poplinks{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem .5rem;align-items:center}
.poplinks span{font-size:.76rem;color:rgba(255,255,255,.54);margin-right:.2rem}
.poplinks a{
  font-size:.79rem;color:rgba(255,255,255,.86);padding:.3rem .78rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);transition:.16s;
}
.poplinks a:hover{background:rgba(255,255,255,.2)}

/* ------------------------------------------------------------ trust strip */
.trust{border-bottom:1px solid var(--line);background:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.trust div{background:#fff;padding:1.5rem 1.2rem;text-align:center}
.trust b{display:block;font-size:1.5rem;font-weight:300;color:var(--ink);letter-spacing:-.03em}
.trust span{display:block;font-size:.73rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-top:.25rem}

/* ------------------------------------------------------------------ cards */
.grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}

/* The WHOLE card is the link. A dead card with one small button inside reads as
   broken — people click the photo and the title first. */
.pcard{
  display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .22s ease, box-shadow .22s ease;
  border:1px solid var(--line);height:100%;
}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pcard .ph{position:relative;aspect-ratio:16/10;background:var(--paper);overflow:hidden}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcard:hover .ph img{transform:scale(1.045)}
.pcard .ph.none{display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#20242A,#3A4149)}
.pcard .ph.none span{color:rgba(255,255,255,.5);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.tag{
  position:absolute;top:.8rem;left:.8rem;padding:.3rem .72rem;border-radius:var(--r-pill);
  font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(255,255,255,.94);color:var(--ink);backdrop-filter:blur(4px);
}
.tag.live{background:var(--bronze);color:#fff}
.tag.pre{background:#141414;color:#fff}
.dev{
  position:absolute;bottom:.8rem;left:.8rem;padding:.26rem .68rem;border-radius:var(--r-pill);
  background:rgba(20,20,20,.72);color:#fff;font-size:.68rem;letter-spacing:.04em;backdrop-filter:blur(4px);
}
.pcard .body{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1}
.pcard .loc{font-size:.76rem;color:var(--muted);letter-spacing:.02em;display:flex;align-items:center;gap:.35rem}
.pcard .loc svg{width:12px;height:12px;flex:none;fill:var(--muted)}
.pcard h3{margin:.3rem 0 .55rem}
.price{font-size:1.28rem;font-weight:500;color:var(--bronze);letter-spacing:-.02em;line-height:1.2}
.price small{display:block;font-size:.7rem;font-weight:400;color:var(--muted);letter-spacing:.02em}
.specs{display:flex;flex-wrap:wrap;gap:.4rem;margin:.85rem 0}
.specs i{
  font-style:normal;font-size:.73rem;padding:.26rem .62rem;border-radius:var(--r-pill);
  background:var(--paper);color:var(--slate);
}
.pcard .hl{font-size:.83rem;color:var(--slate);font-weight:300;margin:0 0 .9rem}
.pcard .foot{
  margin-top:auto;padding-top:.85rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
}
.rera{font-size:.63rem;color:var(--muted);letter-spacing:.02em;line-height:1.35;min-width:0}
.rera b{display:block;color:var(--slate);font-weight:500;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase}
.rera span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch;font-variant-numeric:tabular-nums}
.go-ar{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--paper);
  display:grid;place-items:center;transition:.2s;
}
.pcard:hover .go-ar{background:var(--bronze)}
.go-ar svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2;transition:.2s}
.pcard:hover .go-ar svg{stroke:#fff;transform:translateX(2px)}

/* ------------------------------------------------------------ zone cards */
.zones{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.zcard{
  position:relative;border-radius:var(--r);padding:1.4rem;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column;min-height:172px;
}
.zcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#DCC7B8}
.zcard b{font-size:1.05rem;font-weight:500;color:var(--ink);letter-spacing:-.015em}
.zcard .n{font-size:.74rem;color:var(--bronze);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.45rem}
.zcard p{font-size:.82rem;font-weight:300;margin:.4rem 0 0;color:var(--slate)}
.zcard .areas{margin-top:auto;padding-top:.8rem;font-size:.74rem;color:var(--muted);line-height:1.5}

/* ----------------------------------------------------------- filter bar */
.filterbar{
  display:grid;grid-template-columns:repeat(4,1fr) auto;gap:.4rem;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.5rem;
  box-shadow:var(--shadow-sm);margin-bottom:1.8rem;position:sticky;top:calc(var(--head) + 8px);z-index:20;
}
.filterbar .cell{padding:.5rem .9rem;border-radius:var(--r-sm)}
.filterbar .cell+.cell{box-shadow:inset 1px 0 0 var(--line)}
.filterbar label{display:block;font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.filterbar select{
  width:100%;border:0;background:transparent;font-size:.9rem;font-weight:500;color:var(--ink);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A9099' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .1rem center;background-size:11px;padding-right:1.1rem;
}
.filterbar select:focus{outline:none}
.fcount{display:flex;align-items:center;padding:0 1rem;font-size:.84rem;color:var(--muted);white-space:nowrap}
.fcount b{color:var(--ink);font-weight:600;margin-right:.3rem}
.empty{text-align:center;padding:3.5rem 1rem;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:1.1rem;font-weight:400;margin-bottom:.4rem}

/* ---------------------------------------------------------------- tools */
.tools{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.tool{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow-sm)}
.tool h3{margin-bottom:.35rem}
.tool .sub{font-size:.82rem;color:var(--muted);margin-bottom:1.2rem}
.field{margin-bottom:.95rem}
.field label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--slate);margin-bottom:.35rem}
.field label b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.field input[type=range]{width:100%;accent-color:var(--bronze);height:4px}
.field input[type=number],.field input[type=text],.field select,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--r-xs);padding:.7rem .85rem;background:#fff;font-size:.92rem;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bronze)}
.result{background:var(--paper);border-radius:var(--r-sm);padding:1.1rem;margin-top:1.1rem}
.result .big{font-size:1.9rem;font-weight:300;color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.result .big span{font-size:.9rem;color:var(--muted);letter-spacing:0}
.rows{margin-top:.9rem;font-size:.84rem}
.rows div{display:flex;justify-content:space-between;padding:.38rem 0;border-top:1px solid var(--line)}
.rows div:first-child{border-top:0}
.rows b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.rows .tot{border-top:1.5px solid var(--ink);margin-top:.3rem;padding-top:.55rem}
.note{font-size:.72rem;color:var(--muted);margin-top:.8rem;line-height:1.5}

/* ---------------------------------------------------------------- guides */
.gcard{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;height:100%;
}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.gcard .ph{aspect-ratio:16/9;overflow:hidden;background:var(--paper)}
.gcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gcard:hover .ph img{transform:scale(1.045)}
.gcard .body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.gcard .kicker{font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze);margin-bottom:.45rem}
.gcard p{font-size:.85rem;font-weight:300;margin:.5rem 0 0}
.gcard .more{margin-top:auto;padding-top:.9rem;font-size:.82rem;color:var(--ink);font-weight:500}

/* ------------------------------------------------------------------ form */
.leadwrap{display:grid;gap:2.6rem;grid-template-columns:1fr 1fr;align-items:start}
.form{background:#fff;border-radius:var(--r);padding:1.8rem;box-shadow:var(--shadow-md)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.74rem;color:var(--muted);line-height:1.5;margin:.6rem 0 1.1rem}
.consent input{margin-top:.2rem;accent-color:var(--bronze);flex:none}
.formmsg{margin-top:.9rem;font-size:.87rem;display:none}
.formmsg.ok{display:block;color:var(--green)}
.formmsg.err{display:block;color:#B3261E}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------------------------------------------------------------- footer */
footer{background:var(--ink);color:rgba(255,255,255,.62);padding:3.4rem 0 1.4rem;font-size:.86rem}
.f-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.1fr;gap:2rem;padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.12)}
footer h4{color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .9rem}
footer a{display:block;padding:.2rem 0;color:rgba(255,255,255,.62);font-size:.83rem;transition:color .16s}
footer a:hover{color:#fff}
.f-brand b{color:#fff;font-size:.9rem;letter-spacing:.07em;display:block;margin-bottom:.6rem}
.f-brand p{font-size:.83rem;font-weight:300;max-width:38ch}
.f-rera{margin-top:1.1rem;padding:.9rem 1rem;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);font-size:.76rem}
.f-rera b{font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.56);margin-bottom:.3rem}
.f-rera .num{color:#fff;font-weight:500;letter-spacing:.02em}
.disc{font-size:.72rem;line-height:1.7;color:rgba(255,255,255,.44);padding:1.6rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.disc b{color:rgba(255,255,255,.7)}
.disc a{display:inline;color:rgba(255,255,255,.7);text-decoration:underline}
.f-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.3rem;font-size:.76rem;color:rgba(255,255,255,.44)}
.f-bot a{display:inline;color:rgba(255,255,255,.6)}

/* --------------------------------------------------------- floating / tabs */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:70;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.4);
}
.wa-float svg{width:28px;height:28px;fill:#fff}
.tabbar{display:none}

/* ------------------------------------------------------------- responsive */
@media(max-width:1000px){
  .f-top{grid-template-columns:1fr 1fr 1fr}
  .leadwrap{grid-template-columns:1fr}
}
@media(max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .head-cta .btn{display:none}
  .search{grid-template-columns:1fr 1fr;gap:.3rem}
  .search .cell+.cell{box-shadow:none}
  .search .cell{background:var(--paper)}
  .search .go{grid-column:1/-1;min-width:0}
  .filterbar{grid-template-columns:1fr 1fr;position:static}
  .filterbar .cell+.cell{box-shadow:none}
  .filterbar .cell{background:var(--paper)}
  .fcount{grid-column:1/-1;justify-content:center;padding:.5rem 0}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .util .hide-s{display:none}
}
@media(max-width:640px){
  .f-top{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
  body{padding-bottom:64px}
  .wa-float{bottom:76px;width:48px;height:48px}
  .wa-float svg{width:24px;height:24px}
  /* app-style bottom tab bar — most Indian property traffic is mobile */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:.3rem 0 .45rem;
  }
  .tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:.16rem;
    font-size:.62rem;color:var(--muted);letter-spacing:.02em;
  }
  .tabbar a svg{width:20px;height:20px;fill:var(--muted)}
  .tabbar a.here{color:var(--bronze)}
  .tabbar a.here svg{fill:var(--bronze)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .pcard:hover,.gcard:hover,.zcard:hover,.btn:hover{transform:none}
}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ============================================================================
   INNER PAGES
   Added when v2 rolled out beyond the homepage. Same tokens, same restraint —
   the only saturated colour on an inner page is still the copper accent.
   ========================================================================= */

/* compact page hero — inner pages get a band, not a full-bleed photo */
.phero{background:var(--ink);color:rgba(255,255,255,.76);padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(2rem,4vw,3rem)}
.phero h1{color:#fff;max-width:20ch}
.phero .lede{color:rgba(255,255,255,.74);margin-top:.9rem}
.phero.photo{position:relative;isolation:isolate;padding-top:clamp(3rem,6vw,5rem)}
.phero.photo .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.phero.photo .bg img{width:100%;height:100%;object-fit:cover}
.phero.photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,12,14,.74),rgba(10,12,14,.9))}

.crumb{font-size:.78rem;color:var(--muted);margin-bottom:1.1rem}
.crumb a{color:inherit}
.crumb a:hover{color:var(--bronze)}
.phero .crumb{color:rgba(255,255,255,.5)}
.phero .crumb a:hover{color:#fff}

/* project page: headline + price side by side */
.p-head{display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;align-items:end}
.p-price .amt{display:block;font-size:2.1rem;font-weight:300;letter-spacing:-.03em;color:#fff}
.p-price small{display:block;font-size:.78rem;color:rgba(255,255,255,.55);margin-top:.15rem}
.p-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}

/* the facts grid — the thing buyers actually scan */
.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.fact{background:#fff;padding:1.05rem 1.15rem}
.fact span{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.22rem}
.fact b{font-size:.96rem;font-weight:500;color:var(--ink);letter-spacing:-.01em}

/* related projects */
.rel-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.rel-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:1.1rem 1.2rem;box-shadow:var(--shadow-sm);transition:.2s}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#DCC7B8}
.rel-card .loc{display:block;font-size:.72rem;color:var(--muted)}
.rel-card b{display:block;font-size:.97rem;font-weight:500;color:var(--ink);margin:.2rem 0 .35rem;letter-spacing:-.01em}
.rel-card .pr{font-size:.9rem;color:var(--bronze);font-weight:500}

/* long-form article + legal prose */
.prose{max-width:70ch;font-size:1rem;font-weight:300}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:2.4rem 0 .8rem}
.prose h3{font-size:1.1rem;margin:1.8rem 0 .55rem}
.prose p{margin:0 0 1.05rem}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.15rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--bronze);text-decoration:underline;text-underline-offset:2px}
.prose strong{font-weight:500;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.9rem}
.prose th,.prose td{text-align:left;padding:.62rem .7rem;border-bottom:1px solid var(--line)}
.prose th{font-weight:500;color:var(--ink);background:var(--paper)}
.prose blockquote{margin:1.4rem 0;padding:1rem 1.2rem;background:var(--bronze-t);border-radius:var(--r-sm);color:var(--ink);font-weight:300}
.prose .callout{background:var(--paper);border-radius:var(--r-sm);padding:1.1rem 1.25rem;margin:1.4rem 0;font-size:.92rem}
.prose .callout b{color:var(--ink)}

.side{position:sticky;top:calc(var(--head) + 18px)}
.withside{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:3rem;align-items:start}
@media(max-width:940px){.withside{grid-template-columns:1fr}.side{position:static}.p-head{grid-template-columns:1fr}}

/* contact page */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start}
@media(max-width:900px){.cgrid{grid-template-columns:1fr}}
.cline{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 0;border-top:1px solid var(--line)}
.cline:first-of-type{border-top:0}
.cline svg{width:18px;height:18px;fill:var(--bronze);flex:none;margin-top:.2rem}
.cline b{display:block;color:var(--ink);font-weight:500;font-size:.95rem}
.cline span{font-size:.85rem;color:var(--muted)}

/* about page numbers */
.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bignums div{background:#fff;padding:1.5rem 1.2rem}
.bignums b{display:block;font-size:2rem;font-weight:300;color:var(--ink);letter-spacing:-.03em}
.bignums span{font-size:.75rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}

/* Aliases so the existing long-form bodies (blog articles, about) keep their
   markup when the chrome around them is swapped. .article predates .prose. */
.article{max-width:70ch;font-size:1rem;font-weight:300}
.article h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:2.4rem 0 .8rem}
.article h3{font-size:1.1rem;margin:1.8rem 0 .55rem}
.article p{margin:0 0 1.05rem}
.article ul,.article ol{margin:0 0 1.2rem;padding-left:1.15rem}
.article li{margin-bottom:.45rem}
.article a{color:var(--bronze);text-decoration:underline;text-underline-offset:2px}
.article strong{font-weight:500;color:var(--ink)}
.article table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.9rem}
.article th,.article td{text-align:left;padding:.62rem .7rem;border-bottom:1px solid var(--line)}
.article th{font-weight:500;color:var(--ink);background:var(--paper)}
.callout{background:var(--paper);border-radius:var(--r-sm);padding:1.1rem 1.25rem;margin:1.4rem 0;font-size:.92rem}
.callout b{color:var(--ink)}
.art-hero{padding-top:0}
.art-head{max-width:70ch}
.art-meta{font-size:.78rem;color:var(--muted);margin-top:.9rem}
.ar{display:none}

/* blog index cards (.posts/.post predate .gcard — same look, kept so the
   existing index markup survives the chrome swap) */
.posts{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;height:100%}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.post .body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.post .kicker{font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze);margin-bottom:.45rem}
.post h3{margin-bottom:.4rem}
.post p{font-size:.85rem;font-weight:300;margin:.2rem 0 0}
.post .more{margin-top:auto;padding-top:.9rem;font-size:.82rem;color:var(--ink);font-weight:500}
.post img{aspect-ratio:16/9;object-fit:cover;width:100%}

/* v1 button name, still used in a few bodies */
.btn-gold{background:var(--bronze);color:#fff;box-shadow:0 6px 18px rgba(180,83,31,.28)}
.btn-gold:hover{background:var(--bronze-d)}

/* ============================================================================
   LOCKED CONTENT — the main conversion mechanic
   Floor plans and the special-unit list sit behind a name + phone. The panel
   has to LOOK like there is something real behind it, or it reads as a wall
   rather than an offer: hence the blurred plate and the itemised list of what
   gets sent, not a bare "fill this in".
   ========================================================================= */
.locked{display:grid;grid-template-columns:1.1fr 1fr;gap:2.4rem;align-items:center;
  background:var(--ink);color:rgba(255,255,255,.76);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.6rem)}
.locked h2{color:#fff}
.locked .what{margin:1.2rem 0 0;padding:0;list-style:none}
.locked .what li{display:flex;gap:.6rem;align-items:flex-start;padding:.42rem 0;font-size:.92rem;font-weight:300}
.locked .what svg{width:16px;height:16px;fill:none;stroke:var(--bronze);stroke-width:2.4;flex:none;margin-top:.24rem}
.locked .plate{position:relative;border-radius:var(--r-sm);overflow:hidden;background:#20242A;min-height:200px;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.12)}
.locked .plate .blur{position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 26px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 26px);
  filter:blur(2.5px)}
.locked .plate .lk{position:relative;text-align:center;padding:1.2rem}
.locked .plate .lk svg{width:30px;height:30px;fill:rgba(255,255,255,.62);margin:0 auto .5rem}
.locked .plate .lk b{display:block;color:#fff;font-weight:500;font-size:.95rem}
.locked .plate .lk span{font-size:.78rem;color:rgba(255,255,255,.5)}
.locked form{background:#fff;border-radius:var(--r-sm);padding:1.3rem}
.locked form .field label{color:var(--slate)}
.unlock-note{font-size:.72rem;color:rgba(255,255,255,.44);margin:.75rem 0 0;line-height:1.5}
@media(max-width:860px){.locked{grid-template-columns:1fr;gap:1.6rem}}

/* Inner-page headings must not use the HOMEPAGE hero scale. h1 is
   clamp(2.1rem,5.4vw,4rem) — 64px — which is right over a full-bleed photo and
   absurd inside a compact band above a facts table. Measured at 1440px before
   this: the project name rendered at 64px and dwarfed everything under it. */
.phero h1{font-size:clamp(1.8rem,3.4vw,2.85rem);line-height:1.12}
.phero .lede{font-size:1rem;max-width:58ch}
.phero .p-price .amt{font-size:clamp(1.5rem,2.6vw,2rem)}
.phero .eyebrow{margin-bottom:.7rem}
/* Inner pages carry .inner on <body>: the homepage h2 scale (43px at 1440)
   sits almost level with an inner-page h1, which flattens the hierarchy. */
.inner h2{font-size:clamp(1.45rem,2.5vw,2.1rem)}
.inner .sec-head{margin-bottom:2rem}

/* ============================================================================
   EXIT INTENT
   The browser's own "are you sure you want to leave?" dialog cannot be
   customised — Chrome and Safari ignore any message you pass to beforeunload
   and will not fire it at all without a prior interaction. So this is an
   overlay triggered by the real signals: pointer leaving the top of the
   viewport on desktop, and the back gesture on mobile, where most Indian
   property traffic lives and where mouseleave never fires.
   Once per session, never after a lead is submitted.
   ========================================================================= */
.exit{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.exit.on{display:flex}
.exit .veil{position:absolute;inset:0;background:rgba(10,12,14,.66);backdrop-filter:blur(3px)}
.exit .box{position:relative;background:#fff;border-radius:var(--r);max-width:820px;width:100%;
  box-shadow:var(--shadow-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;
  animation:exitIn .26s cubic-bezier(.2,.7,.3,1)}
@keyframes exitIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.exit .pane{background:var(--ink);color:rgba(255,255,255,.78);padding:2rem 1.8rem;display:flex;flex-direction:column;justify-content:center}
.exit .pane h3{color:#fff;font-size:1.5rem;font-weight:300;letter-spacing:-.025em;line-height:1.2}
.exit .pane p{font-size:.9rem;font-weight:300;margin:.8rem 0 0}
.exit .pane ul{list-style:none;margin:1.1rem 0 0;padding:0}
.exit .pane li{display:flex;gap:.55rem;align-items:flex-start;font-size:.86rem;font-weight:300;padding:.3rem 0}
.exit .pane li svg{width:15px;height:15px;fill:none;stroke:var(--bronze);stroke-width:2.6;flex:none;margin-top:.22rem}
.exit .form{padding:2rem 1.8rem}
.exit .x{position:absolute;top:.7rem;right:.8rem;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);cursor:pointer;font-size:1.15rem;line-height:1;color:var(--ink);z-index:2}
.exit .x:hover{background:#fff}
.exit .later{display:block;width:100%;margin-top:.7rem;background:none;border:0;cursor:pointer;
  font-size:.78rem;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media(max-width:760px){
  .exit .box{grid-template-columns:1fr;max-width:460px}
  .exit .pane{padding:1.5rem 1.4rem}
  .exit .pane ul{display:none}
  .exit .form{padding:1.4rem}
}
/* ============================================================================
   PROJECT PAGE v3 — modelled on Bayut's project pages
   Photo mosaic first, then name + key facts, sticky section tabs, and a sticky
   price card. The conversion mechanic lives in the unit-types list: every plan
   is shown as a blurred teaser (blurred in the pixels, not by CSS), and tapping
   it asks for a name + number, then opens the real plan in a lightbox.
   ========================================================================= */
.pv-top{padding:1.1rem 0 0}
.pv-top .crumb{margin-bottom:.9rem}
/* mosaic: one big tile, four small, like Bayut's gallery grid */
.mosaic{position:relative;display:grid;gap:8px;border-radius:var(--r);overflow:hidden;
  grid-template-columns:2fr 1fr 1fr;grid-template-rows:230px 230px}
.mosaic .m-tile{position:relative;border:0;padding:0;margin:0;cursor:zoom-in;overflow:hidden;background:var(--paper)}
.mosaic .m-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mosaic .m-tile:hover img{transform:scale(1.04)}
.mosaic .m0{grid-row:1/3}
.mosaic.n1{grid-template-columns:1fr;grid-template-rows:440px}
.mosaic.n1 .m0{grid-row:auto}
.mosaic.n2,.mosaic.n3{grid-template-columns:2fr 1fr}
.mosaic.n2 .m1{grid-row:1/3}
.m-all{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.05rem;border-radius:var(--r-pill);border:0;background:#fff;color:var(--ink);
  font:500 .84rem/1 'Poppins',sans-serif;box-shadow:var(--shadow-md);cursor:pointer}
.m-all svg{width:15px;height:15px;fill:var(--ink)}
.m-cgi{position:absolute;left:14px;bottom:14px;padding:.26rem .66rem;border-radius:var(--r-pill);
  background:rgba(20,20,20,.62);color:rgba(255,255,255,.9);font-size:.66rem;letter-spacing:.05em;pointer-events:none}
.mosaic.none{display:flex;min-height:300px;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(140deg,#1B1F24,#39414A);color:rgba(255,255,255,.78)}
.mosaic.none .none-in{max-width:46ch;padding:2rem 1.4rem}
.mosaic.none .dev-mark{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:.8rem}
.mosaic.none b{display:block;color:#fff;font-size:1.35rem;font-weight:300;letter-spacing:-.02em}
.mosaic.none p{font-size:.88rem;font-weight:300;margin:.6rem 0 1.2rem}

/* sticky in-page tabs */
.pv-tabs{position:sticky;top:var(--head);z-index:40;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-top:1.4rem}
.pv-tabs .wrap{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;padding-top:.45rem;padding-bottom:.45rem}
.pv-tabs .wrap::-webkit-scrollbar{display:none}
.pv-tabs a{flex:none;padding:.5rem .9rem;border-radius:var(--r-pill);font-size:.85rem;color:var(--slate);white-space:nowrap}
.pv-tabs a:hover{background:var(--paper);color:var(--ink)}
.pv-tabs a.on{background:var(--ink);color:#fff}

.pv-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:3rem;align-items:start}
.pv-sec{padding:2.6rem 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--head) + 64px)}
.pv-sec:last-child{border-bottom:0}
.pv-h{margin-bottom:1.5rem}
.pv-h .eyebrow{margin-bottom:.7rem}
.pv-h .lede{font-size:.95rem;margin:.5rem 0 0}

/* title block */
.pv-head{padding-top:1.8rem}
.pv-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.st{padding:.28rem .7rem;border-radius:var(--r-pill);background:var(--paper);color:var(--slate);
  font-size:.7rem;font-weight:500;letter-spacing:.03em}
.st.ok{background:#E7F4EC;color:var(--green)}
.st.pre{background:var(--ink);color:#fff}
.pv-head h1{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.12;margin:0}
.pv-loc{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.9rem;margin-top:.55rem}
.pv-loc svg{width:14px;height:14px;fill:var(--bronze);flex:none}
.pv-notice{margin-top:1.1rem;padding:.9rem 1.1rem;border-radius:var(--r-sm);background:var(--bronze-t);
  color:var(--ink);font-size:.86rem;font-weight:300}
.pv-notice b{font-weight:500}
.pv-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-top:1.5rem;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
/* borders drawn per cell, so a short last row leaves white space, not a grey block */
.pv-stats div{padding:.95rem 1.05rem;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line);min-width:0}
.pv-stats span{display:block;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.pv-stats b{font-size:.95rem;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.pv-stats div:first-child b{color:var(--bronze);font-size:1.1rem}
.pv-rera{margin-top:1rem;font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:baseline}
.pv-rera b{font-size:.66rem;letter-spacing:.1em;color:var(--slate);font-weight:600}
.pv-rera span{color:var(--ink);font-variant-numeric:tabular-nums;word-break:break-all}
.pv-rera a{color:var(--bronze);text-decoration:underline;text-underline-offset:2px}

/* unit types: the whole row is the button */
.units{display:grid;gap:.8rem}
.ut{display:grid;grid-template-columns:120px minmax(0,1fr) auto auto;gap:1.2rem;align-items:center;
  padding:.8rem 1.1rem .8rem .8rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.ut:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#DCC7B8}
.ut:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.ut-thumb{position:relative;width:120px;height:92px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--paper);display:grid;place-items:center;color:#AEB4B9}
.ut-thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.ut-thumb .i-plan{width:48px;height:48px}
.ut-lock{position:absolute;inset:auto 6px 6px auto;width:26px;height:26px;border-radius:50%;
  background:rgba(20,20,20,.72);display:grid;place-items:center}
.ut-lock svg{width:12px;height:12px;fill:#fff}
.ut h3{margin:0 0 .3rem;font-size:1.02rem}
.ut-sz{display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:.82rem;color:var(--muted)}
.ut-sz b{color:var(--ink);font-weight:500}
.ut-info small{display:block;margin-top:.3rem;font-size:.76rem;color:var(--muted)}
.ut-price{text-align:right}
.ut-price b{display:block;font-size:1.08rem;font-weight:500;color:var(--bronze);white-space:nowrap}
.ut-price b.ask{font-size:.86rem;color:var(--ink)}
.ut-price small{font-size:.68rem;color:var(--muted);white-space:nowrap}
.ut-cta{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border-radius:var(--r-pill);
  background:var(--bronze-t);color:var(--bronze);font-size:.8rem;font-weight:500;white-space:nowrap;transition:.2s}
.ut-cta .i-plan{width:17px;height:17px}
.ut:hover .ut-cta{background:var(--bronze);color:#fff}
/* after unlock the teaser swaps for the real plan and the padlock goes */
.unlocked .ut-lock{display:none}
.unlocked .ut-thumb img{transform:none;object-fit:contain;background:#fff}

/* cost sheet */
.cs{background:var(--paper);border-radius:var(--r);padding:1.4rem 1.5rem}
.cs-t{font-size:.8rem;font-weight:500;color:var(--ink);margin-bottom:.4rem}
.cs .rows{font-size:.88rem}
.cs .rows .tot b{color:var(--bronze);font-size:1rem}
.cs .btn{margin-top:1rem}

/* payment plan */
.paybar{display:flex;gap:3px;height:46px;border-radius:var(--r-sm);overflow:hidden}
.paybar i{display:grid;place-items:center;background:var(--bronze);color:#fff;font-style:normal;min-width:34px}
.paybar i:nth-child(2){background:#C9713F}
.paybar i:nth-child(3){background:var(--ink)}
.paybar i:nth-child(n+4){background:#6A7178}
.paybar b{font-size:.8rem;font-weight:500}
.payplan ol{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.2rem 1.4rem}
.payplan li{display:flex;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--line);font-size:.87rem}
.payplan li b{width:3ch;flex:none;color:var(--bronze);font-weight:600}
.payplan li small{display:block;color:var(--muted);font-size:.75rem}

/* about */
.pv-sec .prose{max-width:none}
.hl-grid{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem}
.hl-grid li,.am li{display:flex;gap:.55rem;align-items:flex-start;font-size:.88rem}
.hl-grid li{background:var(--paper);border-radius:var(--r-sm);padding:.75rem .9rem}
.hl-grid svg,.am svg{width:15px;height:15px;fill:none;stroke:var(--bronze);stroke-width:2.6;flex:none;margin-top:.22rem}
.microlink{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem;
  padding:1.1rem 1.3rem;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.2s}
.microlink:hover{border-color:#DCC7B8;box-shadow:var(--shadow-md)}
.microlink b{display:block;color:var(--ink);font-weight:500;font-size:.95rem}
.microlink small{display:block;color:var(--muted);font-size:.78rem;margin-top:.15rem}
.microlink svg{width:20px;height:20px;flex:none;color:var(--bronze)}

/* amenities */
.am{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.6rem}
.am h3{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 .6rem}
.am ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}

/* location */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.lt-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem}
.lt-tabs button{padding:.45rem .85rem;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;
  font:400 .8rem 'Poppins',sans-serif;color:var(--slate);cursor:pointer}
.lt-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lt-p{display:none;list-style:none;margin:0;padding:0}
.lt-p.on{display:block}
.lt-p li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.88rem}
.lt-p li b{font-weight:500;color:var(--ink);white-space:nowrap}
.map{border-radius:var(--r);overflow:hidden;background:var(--paper);min-height:320px;border:1px solid var(--line)}
.map iframe{display:block;width:100%;height:340px;border:0}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1rem 2rem 1rem 0;position:relative;color:var(--ink);font-weight:500;font-size:.95rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:.2rem;top:.8rem;font-size:1.3rem;font-weight:300;color:var(--bronze)}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:0 0 1rem;font-weight:300;font-size:.92rem;max-width:70ch}

/* sticky price card */
.pv-aside{position:sticky;top:calc(var(--head) + 70px);padding:1.8rem 0}
.pv-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow-md)}
.pv-card .k{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pv-card .amt{font-size:2rem;font-weight:300;letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.pv-card>small{display:block;font-size:.74rem;color:var(--muted)}
.pv-card .emi{margin:.9rem 0 1.1rem;padding:.7rem .85rem;border-radius:var(--r-sm);background:var(--paper);font-size:.84rem}
.pv-card .emi b{color:var(--ink);font-weight:500}
.pv-card .emi span{display:block;font-size:.7rem;color:var(--muted)}
.pv-card .emi a{color:var(--bronze);text-decoration:underline}
.pv-card form{margin-top:1rem}
.pv-card .field input{width:100%;border:1px solid var(--line);border-radius:var(--r-xs);padding:.7rem .85rem;font:inherit;font-size:.92rem}
.pv-card .field input:focus{outline:none;border-color:var(--bronze)}
.pv-alt{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.8rem}
.pv-alt a{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem;border-radius:var(--r-pill);
  border:1px solid var(--line);font-size:.84rem;color:var(--ink)}
.pv-alt a:hover{border-color:#cfd4d2}
.pv-alt svg{width:15px;height:15px;fill:var(--ink)}
.pv-alt a.wa svg{fill:#25D366}
.pv-free{font-size:.72rem;color:var(--muted);text-align:center;margin:.8rem 0 0}

/* the gate — same shell as the exit-intent dialog */
.gate{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:20px}
.gate.on{display:flex}
.gate .veil{position:absolute;inset:0;background:rgba(10,12,14,.66);backdrop-filter:blur(3px)}
.gate .box{position:relative;background:#fff;border-radius:var(--r);max-width:820px;width:100%;box-shadow:var(--shadow-lg);
  overflow:hidden;display:grid;grid-template-columns:1fr 1fr;animation:exitIn .26s cubic-bezier(.2,.7,.3,1);max-height:calc(100vh - 40px);overflow-y:auto}
.gate .pane{background:var(--ink);color:rgba(255,255,255,.78);padding:1.8rem}
.gate .pane h3{color:#fff;font-size:1.35rem;font-weight:300;letter-spacing:-.02em;line-height:1.2;margin:1rem 0 0}
.gate .pane p{font-size:.86rem;font-weight:300;margin:.4rem 0 0}
.gate .pane ul{list-style:none;margin:1rem 0 0;padding:0}
.gate .pane li{display:flex;gap:.55rem;font-size:.84rem;font-weight:300;padding:.26rem 0}
.gate .pane li svg{width:15px;height:15px;fill:none;stroke:var(--bronze);stroke-width:2.6;flex:none;margin-top:.22rem}
.gate-prev{position:relative;border-radius:var(--r-sm);overflow:hidden;background:#fff;height:170px;display:grid;place-items:center;color:#AEB4B9}
.gate-prev img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.gate-prev .i-plan{width:64px;height:64px}
.gate-prev .ut-lock{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:46px;height:46px}
.gate-prev .ut-lock svg{width:20px;height:20px}
.gate .form{padding:1.8rem}
.gate .x{position:absolute;top:.7rem;right:.8rem;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);cursor:pointer;font-size:1.15rem;line-height:1;color:var(--ink);z-index:2}
.gate .field input{width:100%;border:1px solid var(--line);border-radius:var(--r-xs);padding:.75rem .85rem;font:inherit;font-size:.95rem}
.gate .field input:focus{outline:none;border-color:var(--bronze)}
.gate-fine{font-size:.72rem;color:var(--muted);text-align:center;margin:.7rem 0 0}
.gate .done{text-align:center;padding:1.4rem .4rem}
.gate .done b{display:block;color:var(--ink);font-size:1.1rem;font-weight:500;margin:.5rem 0 .3rem}
.gate .done span{font-size:.86rem;color:var(--muted)}
.gate .done .btn{margin-top:1rem}

/* lightbox — gallery and unlocked plans */
.lb{position:fixed;inset:0;z-index:220;background:rgba(10,12,14,.94);display:none;flex-direction:column}
.lb.on{display:flex}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem;color:rgba(255,255,255,.8);font-size:.84rem}
.lb-top a{color:#fff;text-decoration:underline;text-underline-offset:2px;margin-right:.8rem}
.lb-x{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;cursor:pointer}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 56px 1.2rem;position:relative}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;background:#fff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;cursor:pointer}
.lb-nav.p{left:8px}.lb-nav.n{right:8px}
.lb.one .lb-nav{display:none}

/* mobile action bar replaces the tab bar on project pages */
.pv-bar{display:none}

@media(max-width:1000px){
  .pv-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .pv-aside{position:static;padding:0 0 2.4rem;order:2}
  .pv-card{max-width:520px}
}
@media(max-width:760px){
  .pv-stats{grid-template-columns:1fr 1fr}
  .mosaic,.mosaic.n1,.mosaic.n2,.mosaic.n3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:6px;
    border-radius:var(--r-sm);scrollbar-width:none;height:250px}
  .mosaic::-webkit-scrollbar{display:none}
  .mosaic .m-tile{flex:0 0 88%;scroll-snap-align:start;border-radius:var(--r-sm)}
  .mosaic.n1 .m-tile{flex-basis:100%}
  .m-all{position:sticky;right:10px;bottom:10px;align-self:flex-end;flex:none;margin-left:-150px;padding:.5rem .8rem;font-size:.76rem}
  .m-cgi{display:none}
  .mosaic.none{height:auto}
  .ut{grid-template-columns:84px minmax(0,1fr);gap:.8rem;padding:.7rem}
  .ut-thumb{width:84px;height:84px}
  .ut-price{grid-column:2;text-align:left;margin-top:-.4rem}
  .ut-price b,.ut-price small{display:inline;white-space:normal}
  .ut-price small{margin-left:.4rem}
  .ut-cta{grid-column:1/-1;justify-content:center}
  .loc-grid{grid-template-columns:1fr}
  .gate .box{grid-template-columns:1fr;max-width:460px}
  .gate .pane{padding:1.2rem 1.3rem}
  .gate-prev{height:120px}
  .gate .pane ul{display:none}
  .gate .form{padding:1.3rem}
  .lb-stage{padding:0 0 1rem}
  .lb-nav{top:auto;bottom:1rem;transform:none}
}
@media(max-width:640px){
  .pv-page .tabbar,.pv-page .wa-float{display:none}
  .pv-bar{display:grid;grid-template-columns:auto auto 1fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:66;
    padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .pv-bar a,.pv-bar button{display:flex;align-items:center;justify-content:center;gap:.35rem;height:46px;
    padding:0 .95rem;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;
    font:500 .84rem 'Poppins',sans-serif;color:var(--ink)}
  .pv-bar svg{width:17px;height:17px;fill:var(--ink)}
  .pv-bar a.wa svg{fill:#25D366}
  .pv-bar .pri{background:var(--bronze);border-color:var(--bronze);color:#fff;cursor:pointer}
  .pv-tabs{top:var(--head)}
}

/* ============================================================================
   GUIDES (blog) — full-width article layout
   Photo hero, then three columns: contents | article | lead card + projects.
   The article column itself stays ~72ch because longer lines are harder to
   read; the page around it uses the full width instead of leaving it empty.
   ========================================================================= */
.bhero{position:relative;isolation:isolate;color:rgba(255,255,255,.82);padding:clamp(3.4rem,8vw,6.5rem) 0 clamp(2.4rem,5vw,3.6rem)}
.bhero .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.bhero .bg img{width:100%;height:100%;object-fit:cover}
.bhero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,12,14,.55),rgba(10,12,14,.88))}
.bhero .crumb{color:rgba(255,255,255,.6)}
.bhero .crumb a:hover{color:#fff}
.bhero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.1;max-width:22ch;margin:0}
.bhero .lede{color:rgba(255,255,255,.8);margin-top:1rem;max-width:64ch}
.bmeta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1.3rem;font-size:.8rem;color:rgba(255,255,255,.66)}
.bmeta span+span::before{content:'·';margin-right:1.2rem;opacity:.6}
.blayout{display:grid;grid-template-columns:230px minmax(0,1fr) 340px;gap:clamp(1.6rem,3vw,3.4rem);align-items:start;padding-top:2.8rem;padding-bottom:3.4rem}
.btoc{position:sticky;top:calc(var(--head) + 24px)}
.btoc-in{display:flex;flex-direction:column;border-left:2px solid var(--line)}
.btoc b{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 0 .6rem 1rem}
.btoc a{padding:.42rem 0 .42rem 1rem;margin-left:-2px;border-left:2px solid transparent;font-size:.84rem;color:var(--slate);line-height:1.4}
.btoc a:hover{color:var(--ink)}
.btoc a.on{border-left-color:var(--bronze);color:var(--ink);font-weight:500}
.btoc .btoc-cta{margin-top:.8rem;color:var(--bronze);font-weight:500}
.bprose{max-width:74ch;font-size:1.04rem;justify-self:center;width:100%}
.bprose>p:first-child{font-size:1.18rem;color:var(--ink);font-weight:300}
.bprose h2{scroll-margin-top:calc(var(--head) + 20px)}
.bprose .callout{border-left:3px solid var(--bronze)}
.bprose .callout b{display:block;margin-bottom:.2rem}
.tbl-scroll{overflow-x:auto;margin:0 0 1.4rem}
.tbl-scroll table{margin:0;min-width:520px}
.bfig{margin:2.2rem 0}
.bfig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.bfig figcaption{font-size:.78rem;color:var(--muted);margin-top:.55rem}
.bfig figcaption a{color:var(--bronze);text-decoration:none}
.bside{position:sticky;top:calc(var(--head) + 24px);display:grid;gap:1.2rem}
.bside-h{font-size:1.3rem;font-weight:300;letter-spacing:-.02em;color:var(--ink);line-height:1.25;margin:.2rem 0 .4rem}
.bside-p{font-size:.84rem;margin:0 0 .4rem}
.bside-list{display:grid;gap:.6rem}
.bside-list>b{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mini{display:grid;grid-template-columns:84px 1fr;gap:.8rem;align-items:center;padding:.5rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;transition:.2s}
.mini:hover{border-color:#DCC7B8;box-shadow:var(--shadow-sm)}
.mini .ph{width:84px;height:64px;border-radius:10px;overflow:hidden;background:var(--paper);display:grid;place-items:center}
.mini .ph img{width:100%;height:100%;object-fit:cover}
.mini .none{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mini b{display:block;font-size:.84rem;font-weight:500;color:var(--ink);line-height:1.3}
.mini small{display:block;font-size:.72rem;color:var(--muted)}
.mini em{font-style:normal;font-size:.8rem;color:var(--bronze);font-weight:500}
.gcard h3{margin:0}
.gcard.big{display:grid;grid-template-columns:1.3fr 1fr}
.gcard.big .ph{aspect-ratio:auto;min-height:340px}
.gcard.big .body{padding:2rem 2.2rem;justify-content:center}
.gcard.big h3{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:300;letter-spacing:-.025em;line-height:1.15}
.gcard.big p{font-size:.95rem}
@media(max-width:1180px){.blayout{grid-template-columns:minmax(0,1fr) 320px}.btoc{display:none}}
@media(max-width:900px){.blayout{grid-template-columns:minmax(0,1fr)}.bside{position:static}.gcard.big{grid-template-columns:1fr}.gcard.big .ph{min-height:220px}}

/* ABOUT — image + text splits and numbered steps */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split.rev .split-img{order:2}
.split-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.split .prose{max-width:62ch}
.split .prose a{color:var(--bronze)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow-sm)}
.step span{display:block;font-size:.78rem;font-weight:600;color:var(--bronze);letter-spacing:.08em}
.step b{display:block;color:var(--ink);font-weight:500;margin:.6rem 0 .35rem;font-size:1rem}
.step p{font-size:.85rem;font-weight:300;margin:0}
.abt-hero{padding-bottom:clamp(3rem,7vw,5.5rem)}
.abt-hero h1{font-size:clamp(2rem,4.4vw,3.6rem);max-width:18ch}
@media(max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.split{grid-template-columns:1fr}.split.rev .split-img{order:0}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
/* the trust strip drew its dividers with a grey background showing through a
   1px gap — once .wrap gained side padding that grey leaked out as two bands */
.trust .wrap{background:transparent;gap:0}
.trust .wrap>div{box-shadow:inset -1px 0 0 var(--line)}
.trust .wrap>div:last-child{box-shadow:none}
.split h2{margin:0 0 1.1rem}
/* zone cards carry a photo from a project in that zone */
.zcard.has-ph{padding-top:0;overflow:hidden}
.zcard .zph{display:block;margin:0 -1.4rem 1.1rem;aspect-ratio:16/8;overflow:hidden;background:var(--paper)}
.zcard .zph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.zcard:hover .zph img{transform:scale(1.045)}
/* the no-photo placeholder greys its caption span — the status tag is a span
   too and was inheriting white-on-white */
.pcard .ph.none .tag{color:var(--ink);font-size:.66rem;letter-spacing:.07em}
.pcard .ph.none .dev{color:#fff}
/* ============================================================================
   ICONS — one family only: Lucide line icons, 1.75px stroke, currentColor.
   ========================================================================= */
.i{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.16em}

/* ============================================================================
   NEWSPAPER GUIDES
   Headline on white, then the photo shown clean and large. Nothing is laid
   over an image. Titles balance across lines and never split a hyphenated
   word ("built-up") — the first design did both and was rejected.
   ========================================================================= */
.nw{white-space:nowrap}
h1,h2,h3,.np-card h3,.np-lead h2{text-wrap:balance}
.np-head{padding:clamp(1.6rem,4vw,2.8rem) 0 clamp(1.4rem,3vw,2rem)}
.np-head .crumb{margin-bottom:1.4rem}
.np-kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bronze);margin-bottom:.9rem}
.np-head h1{font-size:clamp(2rem,4.2vw,3.5rem);font-weight:300;letter-spacing:-.03em;line-height:1.08;
  color:var(--ink);max-width:24ch;margin:0}
.np-dek{font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:300;color:var(--slate);max-width:62ch;margin:1.1rem 0 0;line-height:1.55}
.np-by{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;margin-top:1.6rem;padding-top:1.2rem;
  border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.np-av svg{width:38px;height:38px;border-radius:11px;display:block}
.np-who{margin-right:.4rem}
.np-who b{display:block;color:var(--ink);font-weight:500;font-size:.88rem}
.np-who small{font-size:.74rem}
.np-meta{display:inline-flex;align-items:center;gap:.4rem}
.np-share{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto}
.np-share>span{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;margin-right:.2rem}
.np-share a,.np-share button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--ink);cursor:pointer;transition:.18s}
.np-share a:hover,.np-share button:hover{border-color:var(--bronze);color:var(--bronze)}
.np-share button.done{background:var(--ink);border-color:var(--ink);color:#fff}
.np-hero{margin:0 auto}
.np-hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r);background:var(--paper)}
.np-hero figcaption,.bfig figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;font-size:.78rem;color:var(--muted);margin-top:.6rem}
.bfig figcaption a{display:inline-flex;align-items:center;gap:.25rem;color:var(--bronze)}
.np-body{min-width:0}
.np-tldr{background:var(--bronze-t);border-radius:var(--r);padding:1.3rem 1.5rem;margin:0 0 2rem;max-width:74ch;justify-self:center}
.np-tldr b{display:flex;align-items:center;gap:.5rem;color:var(--bronze);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.np-tldr ol{margin:.8rem 0 0;padding-left:1.2rem;color:var(--ink);font-weight:300;font-size:1rem;line-height:1.6}
.np-tldr li+li{margin-top:.45rem}
.np-body .bprose{max-width:74ch}
.np-end{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);max-width:74ch}
.np-end .np-share{margin-left:0}
.btoc a .i,.btoc-cta .i{display:none}
.btoc .btoc-cta{display:inline-flex}
.pv-card .k{display:flex;align-items:center;gap:.4rem}

/* front page */
.np-mast{padding:clamp(1.4rem,3vw,2.2rem) 0 0;border-bottom:1px solid var(--line)}
.np-mast-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding-bottom:1.4rem}
.np-mast h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:300;letter-spacing:-.04em;line-height:1;margin:0;color:var(--ink)}
.np-mast .np-dek{margin-top:.8rem}
.np-count{text-align:right;flex:none}
.np-count b{display:block;font-size:2.4rem;font-weight:300;color:var(--bronze);line-height:1;letter-spacing:-.03em}
.np-count span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.np-sections{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line);padding:.55rem 0}
.np-sections::-webkit-scrollbar{display:none}
.np-sections a{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:var(--r-pill);
  font-size:.86rem;color:var(--slate)}
.np-sections a:hover{background:var(--paper);color:var(--ink)}
.np-sections a.on{background:var(--ink);color:#fff}
.np-front-s{padding:clamp(2rem,4vw,3rem) 0}
.np-front{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(1.6rem,3vw,3rem)}
.np-lead{display:block;color:inherit}
.np-lead .ph{display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--paper)}
.np-lead .ph img,.np-card .ph img,.np-row .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.np-lead:hover .ph img,.np-card:hover .ph img,.np-row:hover .ph img{transform:scale(1.035)}
.np-lead .np-k{margin-top:1.2rem}
.np-lead h2{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:300;letter-spacing:-.03em;line-height:1.12;color:var(--ink);margin:.5rem 0 .7rem}
.np-lead p{font-size:1.02rem;font-weight:300;max-width:60ch;margin:0 0 .8rem}
.np-k{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze)}
.np-m{display:block;font-size:.76rem;color:var(--muted)}
.np-side{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:clamp(1.2rem,2.4vw,2rem)}
.np-side-h{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-bottom:.4rem}
.np-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:1rem;align-items:start;padding:1.1rem 0;border-bottom:1px solid var(--line);color:inherit}
.np-row:last-child{border-bottom:0}
.np-row .ph{display:block;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.np-row b{display:block;color:var(--ink);font-weight:500;font-size:1rem;line-height:1.3;letter-spacing:-.01em;margin:.3rem 0 .35rem}
.np-row:hover b,.np-card:hover h3{color:var(--bronze)}
.np-all{padding-top:1rem}
.np-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:2px solid var(--ink);padding-top:.9rem;margin-bottom:1.6rem}
.np-sec-h h2{font-size:clamp(1.3rem,2vw,1.7rem);margin:0}
.np-sec-h a{display:inline-flex;align-items:center;gap:.35rem;font-size:.86rem;color:var(--bronze);font-weight:500}
.np-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2.2rem 1.6rem}
.np-card{display:flex;flex-direction:column;color:inherit}
.np-card .ph{display:block;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--paper);margin-bottom:1rem}
.np-card h3{font-size:1.2rem;font-weight:400;letter-spacing:-.015em;line-height:1.28;color:var(--ink);margin:.45rem 0 .5rem;transition:color .18s}
.np-card p{font-size:.88rem;font-weight:300;margin:0 0 .7rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.np-card[hidden]{display:none}
@media(max-width:900px){
  .np-front{grid-template-columns:1fr}
  .np-side{border-left:0;padding-left:0}
  .np-hero img{aspect-ratio:16/10}
  .np-share{margin-left:0}
}
@media(max-width:560px){.np-row{grid-template-columns:104px minmax(0,1fr)}.np-count{display:none}}

/* The remaining inner-page header band (properties, contact, legal) was a
   dark block — same complaint as the guides. It is light now. */
.phero{background:var(--paper);color:var(--slate);border-bottom:1px solid var(--line)}
.phero h1{color:var(--ink)}
.phero .lede{color:var(--slate)}
.phero .crumb{color:var(--muted)}
.phero .crumb a:hover{color:var(--bronze)}
.phero .eyebrow.on-dark{background:var(--bronze-t);color:var(--bronze)}
/* ============================================================================
   LIVE MAP (Leaflet + CARTO Voyager). Price-tag pins, one filter bar,
   a synced list beside the map on wide screens.
   ========================================================================= */
.lmap{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.map-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.5rem .6rem .5rem .5rem;border-bottom:1px solid var(--line)}
.map-bar .cell{padding:.35rem .9rem;border-radius:var(--r-sm);background:var(--paper);min-width:220px}
.map-bar label{display:block;font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.map-bar select{width:100%;border:0;background:transparent;font:500 .9rem 'Poppins',sans-serif;color:var(--ink);cursor:pointer;appearance:none;padding-right:1.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A9099' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .1rem center;background-size:11px}
.map-bar select:focus{outline:none}
.map-count{font-size:.86rem;color:var(--muted)}
.map-count b{color:var(--ink);font-weight:600}
.map-note{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;font-size:.78rem;color:var(--muted)}
.map-open{margin-left:auto;font-size:.86rem;font-weight:500;color:var(--bronze);padding-right:.6rem}
.map-body{display:grid;grid-template-columns:1fr}
.with-list .map-body{grid-template-columns:minmax(0,1fr) 340px}
.map-canvas{width:100%;background:#EEF0EE;z-index:1}
.map-list{max-height:620px;overflow-y:auto;border-left:1px solid var(--line)}
.ml-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:.8rem;align-items:center;width:100%;padding:.7rem .9rem;border:0;
  border-bottom:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;font-family:inherit;transition:background .15s}
.ml-row:hover{background:var(--paper)}
.ml-ph{width:72px;height:54px;border-radius:10px;overflow:hidden;background:linear-gradient(140deg,#20242A,#3A4149)}
.ml-ph img{width:100%;height:100%;object-fit:cover}
.ml-tx b{display:block;font-size:.86rem;font-weight:500;color:var(--ink);line-height:1.3}
.ml-tx small{display:block;font-size:.74rem;color:var(--muted)}
.ml-tx em{font-style:normal;font-size:.82rem;font-weight:500;color:var(--bronze)}
/* price-tag pins */
.pin{position:relative;display:inline-block;padding:.3rem .62rem;border-radius:var(--r-pill);margin-bottom:6px;
  background:#fff;color:var(--ink);font:600 .74rem/1.2 'Poppins',sans-serif;white-space:nowrap;cursor:pointer;
  box-shadow:0 2px 8px rgba(20,20,20,.25);border:1px solid rgba(20,20,20,.08);transition:transform .15s,background .15s,color .15s}
.pin::after{content:'';position:absolute;left:50%;bottom:-5px;width:9px;height:9px;background:inherit;transform:translateX(-50%) rotate(45deg);
  border-right:1px solid rgba(20,20,20,.08);border-bottom:1px solid rgba(20,20,20,.08)}
.pin.pre{background:var(--ink);color:#fff}
.pin:hover,.pin.hot{background:var(--bronze);color:#fff;transform:scale(1.08);z-index:5}
.maplibregl-marker:has(.pin.hot),.maplibregl-marker:hover{z-index:5}
/* popup card */
.pp-pop .maplibregl-popup-content{border-radius:var(--r-sm);padding:0;overflow:hidden;box-shadow:var(--shadow-md);font-family:'Poppins',sans-serif}
.pp-pop .maplibregl-popup-close-button{color:#fff;font-size:1.3rem;width:30px;height:30px;text-shadow:0 1px 3px rgba(0,0,0,.6);z-index:2}
.pp{display:block;color:inherit;width:250px}
.pp-ph{display:block;height:130px;background:linear-gradient(140deg,#20242A,#3A4149);overflow:hidden}
.pp-ph img{width:100%;height:100%;object-fit:cover}
.pp-none{display:grid;place-items:center;height:100%;color:rgba(255,255,255,.55);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.pp-b{display:block;padding:.75rem .9rem .85rem}
.pp-b b{display:block;font-size:.92rem;font-weight:500;color:var(--ink)}
.pp-b small{display:block;font-size:.74rem;color:var(--muted);margin:.1rem 0 .3rem}
.pp-b em{display:block;font-style:normal;font-weight:500;color:var(--bronze);font-size:.95rem}
.pp-b i{display:block;font-style:normal;font-size:.68rem;color:var(--muted);margin-top:.3rem}
.pp-b u{display:block;text-decoration:none;font-size:.8rem;font-weight:500;color:var(--ink);margin-top:.5rem}
/* areas page */
.map-s{padding:0 0 clamp(2rem,4vw,3rem)}
.np-sections-s{border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;top:var(--head);z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
.np-sections-s .np-sections{border-top:0}
.zone-s{scroll-margin-top:calc(var(--head) + 56px)}
.zone-h{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem;align-items:end;margin-bottom:2rem}
.zone-h h2{margin:.2rem 0 .6rem}
.zone-tag{display:block;font-size:.5em;font-weight:300;color:var(--muted);letter-spacing:-.01em;margin-top:.2rem}
.zone-facts{display:grid;gap:.6rem;margin:0}
.zone-facts div{display:grid;grid-template-columns:22px 110px 1fr;gap:.5rem;align-items:start;padding:.7rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}
.zone-facts .i{color:var(--bronze);margin-top:.15rem}
.zone-facts dt{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.zone-facts dd{margin:0;font-size:.88rem;color:var(--ink)}
.zone-map-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.4rem;font-size:.88rem;font-weight:500;color:var(--bronze)}
@media(max-width:1000px){.with-list .map-body{grid-template-columns:1fr}.map-list{max-height:none;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.zone-h{grid-template-columns:1fr}}
@media(max-width:640px){.map-note{display:none}.map-canvas{height:420px!important}.map-bar .cell{min-width:0;flex:1}.zone-facts div{grid-template-columns:22px 1fr}.zone-facts dt{display:none}}
.pin.focus{background:var(--bronze);color:#fff;transform:scale(1.15);z-index:6}
.maplibregl-marker:has(.pin.focus){z-index:6}
.lmap.bare{border:0;border-radius:0;box-shadow:none}
.mosaic.mapped{display:block;position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.mosaic.mapped .map-cta{position:absolute;left:18px;top:18px;width:min(360px,calc(100% - 36px));background:#fff;border-radius:var(--r-sm);
  padding:1.2rem 1.3rem;box-shadow:var(--shadow-md);z-index:3}
.map-cta b{display:block;font-size:1.15rem;font-weight:500;color:var(--ink);margin:.1rem 0 .4rem;letter-spacing:-.015em}
.map-cta p{font-size:.85rem;font-weight:300;margin:0 0 1rem}
.map-cta .btn .i{margin-right:.1rem}
@media(max-width:760px){.mosaic.mapped{display:block;height:auto}.mosaic.mapped .map-cta{position:static;width:auto;box-shadow:none;border-top:1px solid var(--line);border-radius:0}.mosaic.mapped .map-canvas{height:300px!important}}
/* Lucide icons are strokes: older rules that FILLED svgs must not blob them */
svg.i{fill:none!important}
.pcard .loc .i{stroke:var(--muted);width:13px;height:13px}
.pv-loc .i{stroke:var(--bronze);width:16px;height:16px}
.ut-lock .i{stroke:#fff}
.go-ar .i{stroke:var(--ink)}
.pcard:hover .go-ar .i{stroke:#fff}
.pv-alt .i{stroke:var(--ink)}
.pv-stats span{display:flex;align-items:center;gap:.35rem}
.pv-stats span .i{color:var(--bronze);width:14px;height:14px}
.hl-grid .i,.am .i,.locked .what .i,.gate .pane li .i,.exit .pane li .i{stroke:var(--bronze)}
/* project logo above the name. Developers approved use of their marks —
   EXCEPT Prestige, which requires its own "Authorised Sales Partner" logo. */
.pv-logo{display:block;height:54px;width:auto;max-width:240px;object-fit:contain;object-position:left center;margin-bottom:1rem}
.pv-logo.on-dark{background:var(--ink);padding:.6rem .9rem;border-radius:var(--r-sm);height:66px}
/* ============================================================================
   GUIDES v3 — compact, image-led, no empty space (26 Sep, round 2 feedback:
   "title cuts half way and is super big", "lots of empty spaces").
   Article: headline LEFT + photo RIGHT in one band. Titles sized to fit in
   two lines and never width-capped in ch (the cap is what forced early wraps).
   ========================================================================= */
.np-top{padding:1.4rem 0 2rem;border-bottom:1px solid var(--line)}
.np-top-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(1.6rem,3.2vw,3.2rem);align-items:center}
.np-top .crumb{margin-bottom:1rem}
.np-top h1{font-size:clamp(1.65rem,2.5vw,2.35rem);font-weight:400;letter-spacing:-.025em;line-height:1.16;color:var(--ink);margin:0;max-width:none}
.np-top .np-dek{font-size:1rem;margin-top:.9rem;max-width:none}
.np-top .np-by{margin-top:1.3rem;padding-top:1rem}
.np-top-ph{margin:0}
.np-top-ph img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);display:block;background:var(--paper)}
.np-top-ph figcaption{display:flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--muted);margin-top:.5rem}
.np-top + .blayout{padding-top:2.2rem}
/* front page */
.np-mast{padding:1.4rem 0 0}
.np-mast-row{display:flex;align-items:baseline;gap:1.6rem;flex-wrap:wrap;padding-bottom:.9rem}
.np-mast h1{font-size:clamp(1.8rem,2.6vw,2.3rem);font-weight:400;letter-spacing:-.03em}
.np-mast .np-dek{font-size:.95rem;margin:0;max-width:none}
.np-front-s{padding:1.8rem 0 2.4rem}
.np-lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.8rem);align-items:center;margin-bottom:2.4rem}
.np-lead .ph{aspect-ratio:16/10}
.np-lead .np-k{margin-top:0}
.np-lead h2{font-size:clamp(1.5rem,2.3vw,2.15rem);font-weight:400;line-height:1.18;margin:.6rem 0 .8rem}
.np-lead p{font-size:.98rem;margin-bottom:.8rem}
.np-read{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.9rem;font-weight:500;color:var(--bronze)}
.np-row4{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.np-card.sm h3{font-size:1.02rem;font-weight:500;line-height:1.3}
.np-card.sm p{display:none}
.np-card.sm .ph{aspect-ratio:4/3;margin-bottom:.8rem}
.np-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media(max-width:1000px){.np-top-in,.np-lead{grid-template-columns:1fr}.np-top-ph{order:-1}.np-row4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.np-row4{grid-template-columns:1fr 1fr;gap:1rem}.np-card.sm h3{font-size:.92rem}}
.np-top-in{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.np-top h1{font-size:clamp(1.6rem,2.2vw,2.1rem);text-wrap:pretty}
@media(max-width:1000px){.np-top-in{grid-template-columns:1fr}.np-top-ph{order:-1}.np-top{padding-top:1rem}}
@media(max-width:640px){.np-top h1{font-size:1.55rem}.np-top .np-dek{font-size:.95rem}.np-top .np-by .np-share>span{display:none}}
@media(max-width:640px){.util .u-l{display:none}.util .wrap{justify-content:center}}
/* INSIGHTS front page: four plain sections, no filter bar */
.np-mast{border-bottom:1px solid var(--line);padding:1.3rem 0 1.1rem}
.np-mast .np-mast-row{display:flex;justify-content:space-between;align-items:center;gap:1.4rem 2.4rem;flex-wrap:wrap;padding:0}
.np-mast h1{margin:0}
.np-mast .np-dek{margin:.3rem 0 0;font-size:.95rem}
.np-jump{display:flex;flex-wrap:wrap;gap:.4rem}
.np-jump a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:var(--r-pill);background:var(--paper);font-size:.85rem;color:var(--ink)}
.np-jump a:hover{background:var(--bronze-t);color:var(--bronze)}
.np-jump .i{color:var(--bronze)}
.np-front-s{padding:1.8rem 0 .6rem}
.np-lead{margin-bottom:0}
.np-secrow{padding:2.2rem 0 1rem;scroll-margin-top:calc(var(--head) + 10px)}
.np-secrow .np-sec-h{align-items:baseline;flex-wrap:wrap}
.np-secrow .np-sec-h h2{display:inline-flex;align-items:center;gap:.55rem}
.np-secrow .np-sec-h h2 .i{color:var(--bronze)}
.np-secrow .np-sec-h p{margin:0;font-size:.9rem;color:var(--muted)}
.np-row3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.np-row3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.np-row3{grid-template-columns:1fr}}
/* map: landmarks, distances */
.map-lm{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;font:500 .82rem 'Poppins',sans-serif;color:var(--slate);cursor:pointer}
.map-lm.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lm{display:flex;align-items:center;gap:.35rem;pointer-events:none}
.lm .i{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.lm-air .i{background:#2B6CB0}
.lm span{font:600 .72rem 'Poppins',sans-serif;color:var(--ink);background:rgba(255,255,255,.92);padding:.12rem .45rem;border-radius:6px;white-space:nowrap}
.pp-d{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--slate);margin-top:.25rem}
.pp-d .i{width:14px;height:14px;color:var(--bronze)}
.pp-dn{display:block;font-size:.64rem;color:var(--muted);margin-top:.15rem}
/* areas header: one compact row */
.ar-head{padding:1.2rem 0 1.4rem}
.ar-head-in{display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem 3rem;flex-wrap:wrap}
.ar-head .crumb{margin-bottom:.6rem}
.ar-head h1{font-size:clamp(1.7rem,2.4vw,2.2rem);font-weight:400;letter-spacing:-.025em;margin:0;color:var(--ink)}
.ar-head .np-dek{font-size:.95rem;margin:.4rem 0 0;max-width:70ch}
.ar-stats{display:flex;gap:.6rem;margin:0}
.ar-stats div{padding:.6rem 1.1rem;border-radius:var(--r-sm);background:var(--paper);min-width:96px}
.ar-stats dt{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ar-stats dd{margin:0;font-size:1.3rem;font-weight:400;color:var(--ink);letter-spacing:-.02em}
/* EMI: a button in the price card, a calculator in a popup */
button.emi{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.1rem .6rem;width:100%;text-align:left;border:0;cursor:pointer;font-family:inherit}
button.emi:hover{background:var(--bronze-t)}
.emi-l{display:flex;align-items:center;gap:.4rem;font-size:.86rem;color:var(--slate)}
.emi-l .i{color:var(--bronze)}
.emi-s{grid-column:1;font-size:.7rem;color:var(--muted)}
.emi-go{grid-row:1/3;grid-column:2;display:inline-flex;align-items:center;gap:.25rem;font-size:.8rem;font-weight:600;color:var(--bronze)}
.emibox .pane h3{font-size:1.2rem;margin:.3rem 0 1rem}
.emi-out small{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.emi-out b{display:block;font-size:2.2rem;font-weight:300;color:#fff;letter-spacing:-.03em}
.emi-rows{margin-top:1rem;color:rgba(255,255,255,.8)}
.emi-rows div{border-color:rgba(255,255,255,.14)!important}
.emi-rows b{color:#fff}
.emibox .pane .note{color:rgba(255,255,255,.5)}
.emibox .field input[type=range]{width:100%;accent-color:var(--bronze)}
.emibox .field label{display:flex;justify-content:space-between;font-size:.82rem}
.emibox .field label b{color:var(--ink)}
@media(max-width:760px){.emibox .pane ul{display:block}.ar-stats{width:100%}.ar-stats div{flex:1;min-width:0}}
.np-mast .np-mast-row{padding:0 clamp(16px,3.2vw,48px)}
.field input[type=tel],.field input[type=email]{width:100%;border:1px solid var(--line);border-radius:var(--r-xs);padding:.7rem .85rem;background:#fff;font:inherit;font-size:.92rem}
.field input[type=tel]:focus,.field input[type=email]:focus{outline:none;border-color:var(--bronze)}
.emibox .form{padding-top:2.8rem}
.np-cta .ph{position:relative}
.np-cta .ph img{filter:saturate(.85)}
.np-cta h3{color:var(--bronze)}
/* "tell me when" alerts */
.pv-alert{display:flex;gap:.8rem;align-items:center;width:100%;margin-top:.9rem;padding:.9rem 1rem;border-radius:var(--r-sm);
  border:1px dashed #DCC7B8;background:var(--bronze-t);text-align:left;cursor:pointer;font-family:inherit;transition:.18s}
.pv-alert:hover{border-style:solid;border-color:var(--bronze)}
.pv-alert .i{width:26px;height:26px;color:var(--bronze)}
.pv-alert b{display:block;font-size:.88rem;font-weight:500;color:var(--ink)}
.pv-alert small{display:block;font-size:.76rem;color:var(--slate)}
.zone-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;margin-top:1.4rem}
.zone-foot .zone-map-link{margin-top:0}
.zone-alert{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border-radius:var(--r-pill);border:1px solid #DCC7B8;
  background:var(--bronze-t);color:var(--bronze);font:500 .86rem 'Poppins',sans-serif;cursor:pointer}
.zone-alert:hover{background:var(--bronze);color:#fff}
/* nearby places on project maps */
.nb-bar{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem;border-bottom:1px solid var(--line);align-items:center}
.nb-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;font:500 .82rem 'Poppins',sans-serif;color:var(--slate);cursor:pointer;transition:.15s}
.nb-btn em{font-style:normal;font-size:.7rem;color:var(--muted);background:var(--paper);border-radius:var(--r-pill);padding:0 .4rem}
.nb-btn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.nb-btn.on em{background:rgba(255,255,255,.18);color:#fff}
.nb-g{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--bronze);padding:0 .4rem}
.nb-body{grid-template-columns:minmax(0,1fr) 300px!important}
.nb-list{max-height:440px;overflow-y:auto;border-left:1px solid var(--line)}
.nb-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:.6rem;align-items:center;width:100%;padding:.7rem .9rem;border:0;
  border-bottom:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;font-family:inherit}
.nb-row:hover{background:var(--paper)}
.nb-ic .i{color:var(--bronze)}
.nb-n{font-size:.84rem;color:var(--ink);line-height:1.3}
.nb-row b{font-size:.8rem;font-weight:500;color:var(--slate);white-space:nowrap}
.poi{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--bronze);display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer}
.poi .i{width:15px;height:15px;color:var(--bronze)}
.poi-pop .maplibregl-popup-content{padding:.5rem .7rem;border-radius:10px;font-family:'Poppins',sans-serif}
.poi-pop b{display:block;font-size:.8rem;font-weight:500;color:var(--ink)}
.poi-pop span{font-size:.72rem;color:var(--muted)}
.nb-dev{margin-top:1.6rem}
.nb-dev h3{display:flex;align-items:center;gap:.45rem;font-size:.95rem;margin:0 0 .7rem}
@media(max-width:760px){.nb-body{grid-template-columns:1fr!important}.nb-list{border-left:0;border-top:1px solid var(--line);max-height:280px}.nb-g{margin-left:0}.nbmap .map-canvas{height:320px!important}}
/* ============================================================================
   COMPACT PAGE HEADERS — every inner page, one rule (Nahid, repeatedly:
   "too much white space… simplify the title on each and every page and show
   the content"). One small title + one line, then content. No bands, no
   eyebrow badges, no display-size headings on inner pages. Do not grow these.
   ========================================================================= */
.phero{background:#fff;border-bottom:1px solid var(--line);padding:1rem 0 1.1rem}
.phero .crumb{margin-bottom:.45rem}
.phero .eyebrow{display:none}
.phero h1{font-size:clamp(1.5rem,2vw,1.85rem);font-weight:400;letter-spacing:-.02em;line-height:1.2;max-width:none;margin:0}
.phero .lede{font-size:.95rem;max-width:none;margin:.3rem 0 0}
.phero + section,.phero + div + section{padding-top:1.4rem}
#all{padding-top:1.4rem}
.ar-head{padding:1rem 0 1rem}
.ar-head h1,.np-mast h1{font-size:clamp(1.5rem,2vw,1.85rem);font-weight:400}
.np-mast{padding:1rem 0}
.np-top{padding:1rem 0 1.6rem}
.np-top h1{font-size:clamp(1.5rem,2vw,1.9rem)}
.inner section.alt,.inner section{padding-top:clamp(2.2rem,4vw,3.4rem);padding-bottom:clamp(2.2rem,4vw,3.4rem)}
.phero + section{padding-top:1.4rem}
/* project location: Google map + nearby buttons, drive-time toggle, sun path */
.gmap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.gmap-f{display:block;width:100%;height:420px;border:0}
.loc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin-top:1rem}
.loc-card{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;background:#fff}
.dt-toggle{display:flex;align-items:center;gap:.7rem;cursor:pointer}
.dt-toggle input{width:20px;height:20px;accent-color:var(--bronze);flex:none}
.dt-toggle .i{width:24px;height:24px;color:var(--bronze)}
.dt-toggle b,.sun-h b{display:block;font-size:.92rem;font-weight:500;color:var(--ink)}
.dt-toggle small,.sun-h small{display:block;font-size:.76rem;color:var(--muted)}
.dt-list ul{list-style:none;margin:.9rem 0 0;padding:0}
.dt-list li{display:grid;grid-template-columns:1fr auto 56px;gap:.8rem;padding:.5rem 0;border-top:1px solid var(--line);font-size:.86rem}
.dt-list li b{font-weight:500;color:var(--ink)}
.dt-list li em{font-style:normal;color:var(--muted);text-align:right}
.sun-h{display:flex;align-items:center;gap:.7rem}
.sun-h .i{width:24px;height:24px;color:#E0A33A}
.sun-body{display:grid;grid-template-columns:180px 1fr;gap:1rem;align-items:center;margin-top:.8rem}
.sun-svg{width:180px;height:180px}
.sun-svg text{font:600 11px 'Poppins',sans-serif;fill:#8A9099}
.sun-legend span{display:flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--slate);margin-bottom:.25rem}
.sun-legend i{width:18px;height:3px;border-radius:2px;display:inline-block}
.sun-legend p{font-size:.8rem;margin:.6rem 0 0}
.sun-legend .note a{color:var(--bronze)}
.mosaic.mapped .gmap-hero{display:block;width:100%;height:440px;border:0}
@media(max-width:560px){.sun-body{grid-template-columns:1fr}.sun-svg{margin:0 auto}.gmap-f{height:340px}.mosaic.mapped .gmap-hero{height:300px}}
.inner section.phero{padding:1rem 0 1.1rem}
/* location v3: Google map + nearest-first list, tap = Google directions */
.nbx{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.nbx-map{position:relative}
.nbx .gmap-f{height:480px}
.nbx-now{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.55rem .6rem .55rem 1rem;background:#fff;border-radius:var(--r-pill);box-shadow:var(--shadow-md);font-size:.84rem;color:var(--ink)}
.nbx-back{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .8rem;border-radius:var(--r-pill);border:0;background:var(--ink);
  color:#fff;font:500 .78rem 'Poppins',sans-serif;cursor:pointer}
.nbx-side{border-left:1px solid var(--line);display:flex;flex-direction:column;max-height:480px}
.nbx-tabs{display:flex;flex-wrap:wrap;gap:.3rem;padding:.6rem;border-bottom:1px solid var(--line)}
.nt{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .7rem;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;
  font:500 .76rem 'Poppins',sans-serif;color:var(--slate);cursor:pointer}
.nt.on{background:var(--ink);border-color:var(--ink);color:#fff}
.npane{display:none;overflow-y:auto;flex:1}
.npane.on{display:block}
.np-row2{display:grid;grid-template-columns:20px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:.1rem .6rem;align-items:center;width:100%;
  padding:.65rem .9rem;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;font-family:inherit}
.np-row2 .i{color:var(--bronze);grid-row:1/3}
.np-row2 .nm{font-size:.84rem;color:var(--ink);line-height:1.3}
.np-row2 .kmx{font-size:.78rem;color:var(--muted);text-align:right}
.np-row2 .go{grid-column:2/4;display:none;align-items:center;gap:.25rem;font-size:.74rem;font-weight:600;color:var(--bronze)}
.np-row2:hover{background:var(--paper)}
.np-row2:hover .go,.np-row2.on .go{display:inline-flex}
.np-row2.on{background:var(--bronze-t)}
.nbx-side .note{padding:.6rem .9rem;margin:0;border-top:1px solid var(--line)}
/* sunlight by facing */
.sunx .sun-h .i{color:#E0A33A}
.sx-row{display:grid;grid-template-columns:minmax(0,2fr) 1fr 1fr;gap:.8rem;padding:.6rem 0;border-top:1px solid var(--line);align-items:start}
.sx-row b{display:block;font-size:.88rem;font-weight:500;color:var(--ink)}
.sx-row small{display:block;font-size:.72rem;color:var(--muted);line-height:1.4}
.sx-h{border-top:0;margin-top:.6rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sunx-cta{margin-top:.8rem}
.loc-cards{grid-template-columns:1fr}
@media(max-width:900px){.nbx{grid-template-columns:1fr}.nbx-side{border-left:0;border-top:1px solid var(--line);max-height:380px}.nbx .gmap-f{height:340px}}
/* country code + phone on one row */
.ph-row{display:grid;grid-template-columns:minmax(118px,40%) 1fr;gap:.5rem}
.ph-row select{width:100%;border:1px solid var(--line);border-radius:var(--r-xs);padding:.7rem .6rem;background:#fff;font:inherit;font-size:.86rem;color:var(--ink)}
.ph-row select:focus{outline:none;border-color:var(--bronze)}
.fx{margin-top:.55rem;font-size:.82rem;color:var(--ink);font-weight:500}
.fx span{display:block;font-size:.68rem;font-weight:400;color:var(--muted)}
/* Prestige requires its Authorised Sales Partner mark wherever its name appears */
footer .partners{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.2rem 0 0}
footer .partners span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
footer .partners img{height:40px;width:auto;background:#fff;border-radius:10px;padding:6px 10px}
.pv-asp{display:block;height:44px;width:auto;margin-bottom:1rem}

.pv-asp-end{border-bottom:0;padding-top:1.4rem}.pv-asp-end .pv-asp{height:56px}

/* Official film loop on the lead photo tile (project pages). The still underneath stays
   the LCP image and the fallback; the video fades in only once it is actually playing. */
.mosaic .m-tile .mv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.mosaic .m-tile .mv.on{opacity:1}
.mosaic .m-film{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .75rem;border-radius:999px;
  background:rgba(20,20,20,.55);backdrop-filter:blur(8px);color:#fff;font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.mosaic .m-film .i{width:.8em;height:.8em;fill:currentColor}