/* UP RERA Tracker, black + gold design system (Vidastu handoff v1).
   Tokens are the single source of truth; no values outside this list.
   Depth = colour blocks + 1px hairlines only. No shadows, no gold gradients. */
/* Metric-compatible fallback: Arial adjusted to Work Sans metrics, so the
   webfont swap causes no layout shift while the real font loads. */
@font-face{font-family:"Work Sans Fallback";src:local("Arial");
  size-adjust:111.7%;ascent-override:83.3%;descent-override:21.8%;line-gap-override:0%}
:root{
  --obsidian:#0e0d0b;   /* warm near-black stage */
  --ink:#171510;        /* one raised panel on the dark stage */
  --gold:#d5b169;       /* antique brass, the ONLY accent (9.5:1 on obsidian; use on dark only) */
  --gold-ink:#6f5218;   /* gold-as-TEXT on the light canvas (6.8:1 on bone, AA pass) */
  --hairline-dark:#2b2720;
  --graphite:#4a453a;   /* muted text on light */
  --bone:#f7f5f0;       /* light canvas / card / text-on-dark */
  --sand:#e7e3d9;       /* hairline on light */
  --stone:#b6afa0;      /* control borders; muted-on-dark; "late" fill */
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:"Work Sans","Work Sans Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --track:-0.028em;
  --maxw:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--obsidian);
  font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:var(--track);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
a:hover{color:var(--gold)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums}
h1,h2,h3{font-weight:700;letter-spacing:var(--track);margin:0;line-height:1.2}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:2px}
.nav :focus-visible,.phero :focus-visible,.tabs :focus-visible,.record :focus-visible,.cta :focus-visible,footer :focus-visible,.modal :focus-visible{outline-color:var(--gold)}
img{max-width:100%}

.dark{background:var(--obsidian);color:var(--bone)}

/* ---------------- nav ---------------- */
header.nav{position:sticky;top:0;z-index:50;min-height:68px;background:var(--obsidian);border-bottom:1px solid var(--hairline-dark)}
.nav .wrap{display:flex;align-items:center;gap:32px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px}
.brand .glyph{width:26px;height:26px;border-radius:7px;overflow:hidden;background:center/cover no-repeat url("/favicon.svg");box-shadow:inset 0 0 0 1px rgba(213,177,105,.4);flex:none}
.brand .glyph i{display:none}
.brand b{font-size:16px;font-weight:700;color:var(--bone)}
.nav nav{display:flex;gap:24px;margin-right:auto;font-size:14px;font-weight:500}
.nav nav a{color:var(--stone);padding:4px 0;border-bottom:2px solid transparent}
.nav nav a:hover{color:var(--bone)}
.nav nav a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--gold)}
.nav .right{display:flex;align-items:center;gap:14px}
.btn-ghost{display:inline-flex;align-items:center;min-height:40px;padding:8px 20px;border:1px solid var(--bone);color:var(--bone);border-radius:8px;font-size:14px;font-weight:500;background:none;cursor:pointer;font-family:var(--sans);letter-spacing:var(--track)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 20px;background:var(--gold);color:var(--obsidian);border:0;border-radius:8px;font-size:14px;font-weight:700;font-family:var(--sans);letter-spacing:var(--track);cursor:pointer}
.btn-gold:hover{filter:brightness(1.04);color:var(--obsidian)}
.link-login{color:var(--bone);font-size:14px;font-weight:500;background:none;border:0;cursor:pointer;font-family:var(--sans)}
.link-login:hover{color:var(--gold)}
@media(max-width:820px){
  .nav .wrap{gap:14px}
  .nav nav{display:flex;gap:16px;margin-right:auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;font-size:13px;-ms-overflow-style:none}
  .nav nav::-webkit-scrollbar{display:none}
  .nav .link-login,.nav .right .btn-gold{display:none}  /* keep logo, nav links and the advisor CTA */
}
/* Narrow phones (<=430px): brand + advisor CTA + all 4 nav links no longer
   fit in one row (measured need ~371px in a ~350px box). The link row is the
   one region that gives: it scrolls horizontally instead of wrapping or
   dropping a link, so every link stays reachable by a swipe. Explicit here
   (not just inherited from the 820px rule above) so this behaviour holds even
   if that breakpoint's width or rules change later. Brand and the advisor CTA
   are left unconstrained (no forced width) so the link row can still claim
   enough space to be usably wide, not squeezed to a sliver; header/.wrap use
   min-height (above) so if brand or the CTA ever wrap, the extra line grows
   the sticky header instead of overlapping page content beneath it. */
@media(max-width:430px){
  .nav nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav nav a{white-space:nowrap}
}

.micro{font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--stone)}

/* ---------------- project hero (dark) ---------------- */
.phero{background:var(--obsidian);color:var(--bone);padding:28px 0 0}
.crumb{font-size:13px;color:var(--stone);margin-bottom:22px}
.crumb a{color:var(--stone)}.crumb a:hover{color:var(--bone)}
.phero-grid{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:end;padding-bottom:32px}
@media(max-width:900px){.phero-grid{grid-template-columns:1fr;gap:24px}}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;padding:5px 12px;border-radius:9999px;border:1px solid var(--hairline-dark);color:var(--stone)}
.pill.stage{background:var(--hairline-dark);color:var(--bone);border-color:transparent}
.pill.gold{background:var(--gold);color:var(--obsidian);border-color:transparent;font-weight:700}
.pill.late{background:var(--stone);color:var(--obsidian);border-color:transparent;font-weight:700}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.live .dot{background:var(--gold)}
@media(prefers-reduced-motion:no-preference){.pill.live .dot{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.idline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 6px}
.idline .mono{font-size:13px;color:var(--gold)}
h1.ptitle{font-size:clamp(2rem,5.2vw,52px);line-height:1.1;letter-spacing:var(--track);margin:6px 0 10px}
.subline{color:var(--stone);font-size:16px}
.subline a{color:var(--bone);border-bottom:1px solid var(--hairline-dark)}
.hero-card{background:var(--ink);border:1px solid var(--hairline-dark);border-radius:20px;padding:22px}
.hero-card .lab{font-size:12px;color:var(--stone);letter-spacing:0.03em;text-transform:uppercase}
.hero-card .big{font-size:32px;font-weight:700;margin:4px 0 2px;letter-spacing:var(--track)}
.hero-card .sub{font-size:13px;color:var(--stone)}
.hero-card .btn-gold{width:100%;margin-top:16px}
.hero-card .btn-ghost{width:100%;margin-top:10px;justify-content:center}

/* ---------------- tab bar ---------------- */
.tabs{border-top:1px solid var(--hairline-dark);background:var(--obsidian)}
.tabs .wrap{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs a{white-space:nowrap;padding:14px 0;font-size:14px;font-weight:500;color:var(--stone);border-bottom:2px solid transparent}
.tabs a:hover{color:var(--bone)}
.tabs a.active{color:var(--bone);border-bottom-color:var(--gold)}

/* ---------------- light body ---------------- */
main section{padding:56px 0;border-bottom:1px solid var(--sand)}
main section:last-of-type{border-bottom:0}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:28px}
.sec-idx{font-family:var(--mono);font-size:13px;color:var(--gold-ink);letter-spacing:0}
.srclink{display:inline-block;font-size:11px;font-weight:500;letter-spacing:0.04em;color:var(--gold-ink);border-bottom:1px solid var(--sand)}
.srclink:hover{color:var(--obsidian);border-bottom-color:var(--gold-ink)}
h2.sec{font-size:clamp(1.4rem,3.2vw,32px);letter-spacing:var(--track)}
.h-note{color:var(--graphite);font-size:14px;margin-top:8px;max-width:56ch}
.rlede{font-size:17px;line-height:1.65;max-width:66ch;margin:0 0 30px;color:var(--obsidian)}
.rlede a{color:var(--gold-ink);border-bottom:1px solid var(--sand)}
.rlede a:hover{color:var(--obsidian);border-bottom-color:var(--gold-ink)}
.rlede .mono{font-size:.94em}
.grid2{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start}
@media(max-width:900px){.grid2{grid-template-columns:1fr;gap:28px}}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sand);border:1px solid var(--sand);border-radius:20px;overflow:hidden}
@media(max-width:640px){.facts{grid-template-columns:1fr 1fr}}
.facts .cell{background:var(--bone);padding:20px}
.facts .lab{font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--graphite)}
.facts .val{font-size:20px;font-weight:700;margin-top:6px;letter-spacing:var(--track)}
.facts .note{font-size:13px;color:var(--graphite);margin-top:3px}
.facts .val.mono{font-size:16px}

dl.rows{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--sand);border:1px solid var(--sand);border-radius:20px;overflow:hidden}
@media(max-width:560px){dl.rows{grid-template-columns:1fr}}
dl.rows>div{background:var(--bone);padding:16px 20px}
dl.rows dt{font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--graphite);margin-bottom:5px}
dl.rows dd{margin:0;font-size:16px;font-weight:500}
dl.rows dd small{display:block;font-weight:400;color:var(--graphite);font-size:13px;margin-top:2px}

.record{position:sticky;top:88px;background:var(--obsidian);color:var(--bone);border-radius:20px;padding:24px}
.record .lab{font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--stone)}
.record .big{font-size:56px;font-weight:700;letter-spacing:var(--track);line-height:1;margin:10px 0 4px}
.record .rail{margin:14px 0}
.record .rail .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.record .rail .top b{font-weight:700}
.record .rail .track{height:6px;border-radius:9999px;background:var(--hairline-dark);overflow:hidden}
.record .rail .fill{height:100%;background:var(--gold);border-radius:9999px}
.record .adv{margin-top:20px;padding-top:18px;border-top:1px solid var(--hairline-dark)}
.record .adv p{font-size:13px;color:var(--stone);margin:0 0 12px}
.record .btn-gold{width:100%}

/* delay timeline */
.tl-summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:15px;margin-bottom:8px}
.tl-summary .arrow{color:var(--gold-ink)}
.slip-hero{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:6px 0 26px}
.slip-hero .n{font-size:clamp(3rem,10vw,72px);font-weight:700;line-height:.9;color:var(--gold-ink);letter-spacing:var(--track)}
.slip-hero .n small{display:block;font-size:14px;font-weight:500;color:var(--graphite);margin-top:8px}
.slip-hero p{max-width:40ch;color:var(--graphite);font-size:15px;margin:0}
.band{border:1px solid var(--sand);border-radius:20px;overflow:hidden;margin:8px 0 26px}
.band .labels{display:flex;justify-content:space-between;font-size:12px;color:var(--graphite);padding:12px 16px 0}
.band .rail{position:relative;height:56px;margin:10px 16px 16px;border-radius:8px;background:var(--sand);overflow:hidden}
.band .promised{position:absolute;left:0;top:0;bottom:0;background:var(--obsidian);opacity:.14;border-right:2px dashed var(--graphite)}
.band .slip{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(213,177,105,.55) 0 8px,transparent 8px 16px),rgba(213,177,105,.16)}
.band .cap{position:absolute;top:0;bottom:0;display:grid;place-items:center;padding:0 14px;font-size:13px;font-weight:700}
.band .cap.a{left:0}.band .cap.b{right:0;color:#6f5218}
.docket{width:100%;border-collapse:collapse;font-size:14px}
.docket th,.docket td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--sand)}
.docket th{font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--graphite)}
.docket td.mono{font-size:13px}
.docket tr.net td{border-top:2px solid var(--obsidian);border-bottom:0;font-weight:700}
.docket tr.net td.d{color:#6f5218}

/* documents checklist */
.docgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.docgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.docgrid{grid-template-columns:1fr}}
.doc{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--sand);border-radius:20px;padding:16px 18px}
.doc .sq{width:10px;height:10px;border-radius:2px;flex:none;margin-top:5px;background:var(--obsidian)}
.doc.on .sq{background:var(--gold)}
.doc .nm{font-size:14px;font-weight:500}
.doc.off .nm{color:var(--graphite)}
.doc .cap{font-size:12px;color:var(--graphite);margin-top:2px}
.doc .gloss{font-size:12px;color:var(--graphite);margin-top:4px;line-height:1.45}
.dcount{font-family:var(--mono);font-size:12px;color:var(--graphite);font-weight:400}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--graphite);margin-top:16px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* nearby cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cards{grid-template-columns:1fr}}
.cards.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.cards.c3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards.c3{grid-template-columns:1fr}}
.card{display:block;border:1px solid var(--sand);border-radius:20px;padding:20px}
.card:hover{border-color:var(--obsidian)}
.card .nm{font-size:18px;font-weight:700;letter-spacing:var(--track);margin-bottom:6px}
.card .id{font-family:var(--mono);font-size:12px;color:var(--graphite)}
.card .go{margin-top:14px;font-size:13px;font-weight:500;color:var(--gold-ink)}

/* FAQ */
.faqs{display:flex;flex-direction:column;gap:1px;background:var(--sand);border:1px solid var(--sand);border-radius:20px;overflow:hidden}
.faq{background:var(--bone);padding:4px 20px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-size:17px;font-weight:500;display:flex;justify-content:space-between;gap:12px;align-items:center;letter-spacing:var(--track)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-ink);font-size:22px;line-height:1}
.faq[open] summary::after{content:"–"}
.faq p{margin:0 0 18px;color:var(--graphite);font-size:15px}

/* CTA band */
.cta{background:var(--obsidian);color:var(--bone);border-radius:20px;padding:clamp(28px,5vw,48px);display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:center;margin:8px 0}
@media(max-width:760px){.cta{grid-template-columns:1fr}}
.cta h2{font-size:clamp(1.5rem,4vw,32px);color:var(--bone)}
.cta p{color:var(--stone);margin:12px 0 0;max-width:52ch;font-size:16px}
.cta .side .btn-gold{width:100%;padding:14px 24px;font-size:16px}
.cta .side .fine{color:var(--stone);font-size:13px;margin-top:12px}

/* footer */
footer.site{background:var(--obsidian);color:var(--bone);border-top:1px solid var(--hairline-dark);padding:64px 0 32px}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
@media(max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}
footer h3,footer h4{font-size:13px;font-weight:500;color:var(--bone);margin:0 0 10px}
footer a{color:var(--stone);font-size:14px;display:block;margin-bottom:8px}
footer a:hover{color:var(--gold)}
footer .desc{color:var(--stone);font-size:15px;max-width:34ch;margin:12px 0 16px}
.disclosure{border-top:1px solid var(--hairline-dark);margin-top:48px;padding-top:24px;color:var(--stone);font-size:13px;line-height:1.6;max-width:92ch}
.copy{color:var(--stone);font-size:13px;margin-top:16px}

/* homepage */
.home-hero{background:var(--obsidian);color:var(--bone);padding:80px 0 64px;text-align:center}
.ann{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hairline-dark);border-radius:9999px;padding:5px 14px 5px 8px;font-size:13px;color:var(--stone);margin-bottom:24px}
.ann .live{background:var(--gold);color:var(--obsidian);font-weight:700;font-size:12px;padding:2px 8px;border-radius:9999px}
h1.home{font-size:clamp(2.4rem,7vw,72px);line-height:1.1;letter-spacing:var(--track);max-width:16ch;margin:0 auto}
h1.home .g{color:var(--gold)}
.home .lede{color:var(--stone);font-size:18px;max-width:640px;margin:20px auto 0}
.searchbar{max-width:720px;margin:28px auto 0;background:var(--bone);border-radius:8px;padding:8px;display:flex;gap:8px;align-items:center}
.searchbar input{flex:1;border:0;background:none;font-size:16px;font-family:var(--sans);letter-spacing:var(--track);color:var(--obsidian);padding:8px 10px;min-width:0}
.searchbar input:focus{outline:none}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.chip{border:1px solid var(--hairline-dark);color:var(--stone);border-radius:9999px;padding:6px 14px;font-size:13px;font-weight:500;background:none;cursor:pointer;font-family:var(--sans);letter-spacing:var(--track)}
.chip:hover,.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.chip.g[aria-pressed="true"]{background:var(--gold);color:var(--obsidian)}
.home-stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.home-stats .s b{display:block;font-size:36px;font-weight:700;color:var(--gold);letter-spacing:var(--track)}
.home-stats .s span{font-size:12px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--stone)}
.toolbar{position:sticky;top:67px;z-index:30;background:var(--bone);border-bottom:1px solid var(--sand);padding:14px 0}
.toolbar .wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.toolbar input{flex:1;min-width:220px;padding:12px 14px;font-size:16px;border:1px solid var(--sand);border-radius:8px;background:var(--bone);font-family:var(--sans);letter-spacing:var(--track)}
.count-line{color:var(--graphite);font-size:13px;margin:18px 0}
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:64px}
@media(max-width:900px){.list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.list{grid-template-columns:1fr}}
.lcard{display:block;border:1px solid var(--sand);border-radius:20px;padding:20px}
.lcard:hover{border-color:var(--obsidian)}
.lcard .ln{font-size:18px;font-weight:700;letter-spacing:var(--track);margin-bottom:8px}
.lcard .lid{font-family:var(--mono);font-size:12px;color:var(--graphite)}
.lcard .lr{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tag{font-size:11px;font-weight:500;letter-spacing:0.04em;padding:4px 10px;border-radius:9999px;background:var(--sand);color:var(--graphite)}
.tag.late{background:var(--obsidian);color:var(--bone)}
.tag.ok{background:var(--gold);color:var(--obsidian)}
#empty{display:none;color:var(--graphite);text-align:center;padding:40px 0}

/* sign-in modal */
.modal-overlay{position:fixed;inset:0;z-index:90;background:rgba(14,13,11,.6);display:none;align-items:center;justify-content:center;padding:18px}
.modal-overlay.open{display:flex}
.modal{background:var(--obsidian);color:var(--bone);border:1px solid var(--hairline-dark);border-radius:20px;max-width:440px;width:100%;padding:32px;position:relative}
.modal h2{font-size:28px;color:var(--bone);margin:0 0 6px}
.modal .sub{color:var(--stone);font-size:14px;margin:0 0 20px}
.modal label{display:block;font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--stone);margin:14px 0 6px}
.modal input{width:100%;padding:13px 14px;font-size:16px;border:1px solid var(--hairline-dark);border-radius:8px;background:var(--ink);color:var(--bone);font-family:var(--sans);letter-spacing:var(--track)}
.modal .btn-gold{width:100%;margin-top:22px;padding:14px}
.modal .close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9999px;border:1px solid var(--hairline-dark);background:var(--ink);color:var(--bone);font-size:20px;cursor:pointer}
.modal .fineprint{font-size:12px;color:var(--stone);margin-top:14px;line-height:1.5}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* keep the Leaflet map inside its section, below the sticky nav */
  #map{position:relative;z-index:0}
  .leaflet-container{z-index:0}
  .leaflet-pane,.leaflet-top,.leaflet-bottom{z-index:1}

  /* project image + price */
  .phero-img{width:100%;aspect-ratio:16/10;max-height:360px;object-fit:cover;border-radius:20px;margin:4px 0 24px;border:1px solid var(--hairline-dark);display:block}
  .pill.price{background:var(--gold);color:var(--obsidian);border-color:transparent;font-weight:700}
  a.pill.price:hover{color:var(--obsidian);filter:brightness(1.05)}
  .estnote{font-weight:500;color:var(--graphite);font-size:11px;letter-spacing:0.03em}
  .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px 12px 0 0;display:block;background:var(--sand)}
  .lcard{padding:0;overflow:hidden}
  .lcard .body{padding:18px 20px}
  .lcard.noimg .body,.card.noimg{padding-top:20px}
  .lprice{font-size:14px;font-weight:700;margin-top:8px}
  .card .thumb{border-radius:12px;margin-bottom:12px;aspect-ratio:16/9}
  .imgsrc{font-size:11px;color:var(--stone);margin-top:6px}

  /* ---------- craft pass: motion + featured + ticker (Emil easing, no scale-from-0) ---------- */
  :root{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-io:cubic-bezier(0.77,0,0.175,1)}

  /* tactile press feedback, buttons acknowledge the tap */
  .btn-gold,.btn-ghost,.chip,.fopt,.link-login{transition:filter .15s ease,color .15s ease,border-color .15s ease,background .15s ease,transform .12s var(--ease-out)}
  @media(hover:hover) and (pointer:fine){
    .btn-gold:active,.btn-ghost:active,.chip:active,.fopt:active,.searchbar .btn-gold:active{transform:scale(.97)}
    .lcard:hover,.card:hover,.fcard:hover{transform:translateY(-3px)}
    .lcard .thumb{transition:transform .4s var(--ease-out)}
    .lcard:hover .thumb{transform:scale(1.05)}
    .fthumb img{transition:transform .45s var(--ease-out)}
    .fcard:hover .fthumb img{transform:scale(1.06)}
  }
  .lcard,.card,.fcard{transition:transform .2s var(--ease-out),border-color .2s var(--ease-out)}

  /* branded placeholder, a "public record" tile, not an empty box */
  .thumb.ph{aspect-ratio:16/10;display:grid;place-content:center;justify-items:center;gap:6px;background:var(--obsidian);
    background-image:linear-gradient(var(--hairline-dark) 1px,transparent 1px),linear-gradient(90deg,var(--hairline-dark) 1px,transparent 1px);
    background-size:22px 22px;background-position:center;border-radius:12px 12px 0 0}
  .thumb.ph .mono{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:.03em;color:var(--gold)}

  /* featured carousel (homepage) */
  .feat{padding:56px 0;border-bottom:1px solid var(--sand)}
  .feat-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px;flex-wrap:wrap}
  .feat-head .sec-head{margin-bottom:8px}
  .seeall{font-size:14px;font-weight:500;color:var(--gold-ink);white-space:nowrap;border-bottom:1px solid var(--sand)}
  .seeall:hover{color:var(--obsidian);border-bottom-color:var(--gold-ink)}
  .frow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--stone) transparent}
  @media(max-width:640px){.frow{grid-auto-columns:82%}}
  .fcard{scroll-snap-align:start;border:1px solid var(--sand);border-radius:16px;overflow:hidden;background:var(--bone);display:block}
  .fcard:hover{border-color:var(--stone)}
  .fthumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--obsidian);display:grid;place-content:center}
  .fthumb img{width:100%;height:100%;object-fit:cover;display:block}
  .fthumb .mono{font-family:var(--mono);font-size:34px;font-weight:700;color:var(--gold)}
  .fbadge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:500;padding:4px 10px;border-radius:9999px;background:rgba(14,13,11,.7);color:var(--bone);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .fbadge.late{background:var(--gold);color:var(--obsidian);font-weight:700}
  .fbody{padding:14px 16px 16px}
  .fn{font-size:16px;font-weight:700;letter-spacing:var(--track);line-height:1.25}
  .fmeta{font-size:13px;color:var(--graphite);margin-top:6px}
  .fmeta b{color:var(--obsidian)}
  .fprom{font-size:12px;color:var(--graphite);margin-top:4px}

  /* just-registered ticker */
  .ticker{display:flex;align-items:stretch;background:var(--obsidian);border-top:1px solid var(--hairline-dark);border-bottom:1px solid var(--hairline-dark);overflow:hidden}
  .ticker-lab{flex:none;display:flex;align-items:center;gap:8px;background:var(--gold);color:var(--obsidian);font-size:12px;font-weight:700;letter-spacing:.04em;padding:0 18px;text-transform:uppercase}
  .ticker-lab .dot{width:7px;height:7px;border-radius:50%;background:var(--obsidian)}
  @media(prefers-reduced-motion:no-preference){.ticker-lab .dot{animation:pulse 2.4s ease-in-out infinite}}
  .ticker-view{overflow:hidden;flex:1;min-width:0}
  .ticker-track{display:flex;width:max-content;animation:ticker 70s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
  .tick{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:12px 22px;font-size:13px;font-weight:500;color:var(--bone);border-right:1px solid var(--hairline-dark)}
  .tick:hover{color:var(--gold)}
  .tick-area{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
  .tick-badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-ink);background:var(--sand);padding:2px 8px;border-radius:9999px}
  .tick-badge.late{background:var(--stone);color:var(--obsidian)}
  @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.ticker-view{overflow-x:auto}.ticker-track{animation:none}}

  /* let long unbreakable tokens (RERA ids, account nos, coordinates) wrap inside
     grid cells on narrow screens instead of forcing horizontal overflow */
  .facts .cell,dl.rows>div{min-width:0}
  .facts .val,dl.rows dd,.idline .mono{overflow-wrap:anywhere}

  /* section-header formatting: eyebrow stacked above the headline, tight gap */
  .sec-head.col{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:26px}
  /* dark-section cards read as raised panels, not faint outlines; bright eyebrow on dark */
  .dark .sec-idx{color:var(--gold)}
  .dark .card{background:var(--ink);border-color:var(--hairline-dark)}
  .dark .card .micro{margin-bottom:10px}

  /* construction progress, money vs the clock */
  .prog{display:grid;gap:22px;margin-top:24px;max-width:640px}
  .prow .ptop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
  .prow .ptop span{font-size:14px;font-weight:500}
  .prow .ptop b{font-size:22px;font-weight:700;letter-spacing:var(--track)}
  .ptrack{height:10px;border-radius:9999px;background:var(--sand);overflow:hidden}
  .pfill{height:100%;border-radius:9999px;background:var(--stone)}
  .pfill.gold{background:var(--gold)}
  @media(prefers-reduced-motion:no-preference){.pfill{transition:width .7s var(--ease-out)}}
  .pnote{font-size:12px;color:var(--graphite);margin-top:6px}
  .pverdict{margin-top:26px;padding:16px 18px;border-radius:12px;font-size:15px;line-height:1.55;max-width:640px}
  .pverdict.warn{background:rgba(213,177,105,.12);border:1px solid var(--gold);color:var(--obsidian)}
  .pverdict.ok{background:var(--bone);border:1px solid var(--sand);color:var(--graphite)}

  /* homepage "delay picture" band */
  .delaypic{padding:64px 0;border-bottom:1px solid var(--sand)}
  .dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  @media(max-width:820px){.dp-grid{grid-template-columns:1fr;gap:32px}}
  .dp-stat{font-size:clamp(4rem,12vw,112px);font-weight:700;line-height:.85;letter-spacing:var(--track);margin:14px 0}
  .dp-stat span{font-size:.42em;color:var(--gold-ink)}
  .dp-copy{color:var(--graphite);font-size:16px;line-height:1.6;max-width:46ch;margin:0 0 20px}
  .dp-link{font-weight:500;color:var(--gold-ink);border-bottom:1px solid var(--sand)}
  .dp-link:hover{color:var(--obsidian);border-bottom-color:var(--gold-ink)}
  .dp-list{border-top:1px solid var(--sand)}
  .dp-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 2px;border-bottom:1px solid var(--sand)}
  .dp-row:hover .dp-nm{color:var(--gold-ink)}
  .dp-nm{font-size:16px;font-weight:500}
  .dp-slip{font-family:var(--mono);font-size:14px;color:var(--obsidian);font-weight:700;white-space:nowrap}

  /* promoter stats strip (on the dark hero) */
  .pstats{display:flex;gap:30px;flex-wrap:wrap;margin-top:24px}
  .ps b{display:block;font-size:30px;font-weight:700;letter-spacing:var(--track);color:var(--bone);line-height:1}
  .ps b.warn{color:var(--gold)}
  .ps b small{font-size:.5em;font-weight:500;color:var(--stone);margin-left:2px}
  .ps span{display:block;margin-top:6px;font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--stone)}
.verify{margin-top:18px;padding:14px 16px;border:1px solid rgba(128,128,128,.35);border-radius:10px}.verify h3{margin:0 0 8px;font-size:14px}.verify ol{margin:0;padding-left:20px}.verify li{margin:4px 0;font-size:14px;line-height:1.5}