/* ══════════════════════════════════════════════════════════════════════════
   BHARAT PROPS — PLATFORM DESIGN SYSTEM  ·  Stage 1 prototype
   Evolved from the Brigade Granada landing page: same navy/gold/stone
   ground, same three-role type system, same "title block" figure device.
   Widened from one project into a discovery platform.

   FILE MAP
     1. Tokens          6. Search console     11. Verdict / review
     2. Reset & type    7. Cards              12. Tools & calculators
     3. Layout          8. Filters & results  13. Forms & lead capture
     4. Buttons         9. Project detail     14. Footer & legal
     5. Header & nav   10. Locality           15. Overlays, sticky, motion
   ══════════════════════════════════════════════════════════════════════ */

/* ═══ 1. TOKENS ══════════════════════════════════════════════════════ */
:root{
  /* Palette — carried forward unchanged from the approved landing page.
     Every value passes WCAG AA against the ground it is used on. */
  --ink:#050E1A; --navy:#0A1B30; --navy-2:#122A49; --navy-3:#1B3B63;
  --gold:#C69B4B; --gold-l:#E3C583; --gold-d:#A0762A;
  --gold-ink:#795610;                    /* gold for text on light — 6.66:1 */
  --gold-veil:#FAF3E4;
  --paper:#F7F5F2; --paper-2:#EFEBE5; --card:#FFFFFF;
  --fg:#111820; --fg-2:#414B57; --fg-3:#5C6673;
  --line:#E3DED6; --line-2:#CFC7BC; --line-i:rgb(255 255 255/.16);
  --ok:#0E7C4A; --warn:#8A5A00; --neg:#8E2718; --inv:#FFFFFF;
  --wa:#25D366; --wa-ink:#062B15;

  /* Platform additions — a listing UI needs a few states the landing
     page never had: a live/verified mark, a caution mark, a map ground. */
  --ok-veil:#EAF5EF; --neg-veil:#FBEDEA; --warn-veil:#FBF3E2;
  --map:#E7E4DD;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:80px; --s10:112px;

  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --r1:6px; --r2:10px; --r3:16px; --r4:22px;
  --sh1:0 1px 2px rgb(20 14 4/.04),0 2px 6px rgb(20 14 4/.05);
  --sh2:0 10px 30px rgb(20 14 4/.08),0 2px 8px rgb(20 14 4/.05);
  --sh3:0 28px 70px rgb(5 14 26/.20),0 8px 24px rgb(5 14 26/.10);
  --ez:cubic-bezier(.22,.61,.36,1); --t1:150ms; --t2:280ms; --t3:600ms;

  --gut:clamp(20px,4vw,48px);
  --max:1320px;
  --max-r:1560px;             /* results + map run wider than editorial */
  --hdr:70px;
}

/* ═══ 2. RESET & TYPE ════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}*{margin:0;min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 24px);-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:16px;line-height:1.65;font-weight:400;color:var(--fg);
  background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px;border-radius:3px}
.sec--navy :focus-visible,.sec--ink :focus-visible,.ftr :focus-visible,.hero :focus-visible{outline-color:var(--gold-l)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Three type roles, no overlap: serif = headings, Inter = every UI string,
   mono = every published figure (price, area, distance, registration). */
.d1{font-family:var(--display);font-size:clamp(34px,2rem + 2.4vw,60px);line-height:1.05;font-weight:600;letter-spacing:-.018em}
.d2{font-family:var(--display);font-size:clamp(27px,1.65rem + 1.5vw,42px);line-height:1.12;font-weight:600;letter-spacing:-.015em}
.d3{font-family:var(--display);font-size:clamp(20px,1.2rem + .7vw,27px);line-height:1.22;font-weight:600;letter-spacing:-.01em}
.d4{font-family:var(--display);font-size:clamp(18px,1.05rem + .4vw,21px);line-height:1.3;font-weight:600;letter-spacing:-.008em}
.h4{font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.005em}
.lede{font-size:clamp(16px,.95rem + .3vw,18px);line-height:1.7;color:var(--fg-2);max-width:60ch}
.sm{font-size:14.5px;line-height:1.65;color:var(--fg-2)}
.cap{font-size:13px;line-height:1.6;color:var(--fg-3)}
.xs{font-size:11.5px;line-height:1.55;color:var(--fg-3)}
.eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.eyebrow--i{color:var(--gold-l)}
.mono,.fig{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-weight:500;letter-spacing:-.01em}
.price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--fg);letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:0;top:0;z-index:400;background:var(--navy);color:#fff;padding:var(--s3) var(--s5);
  font-weight:600;transform:translateY(-120%);transition:transform var(--t1)}
.skip:focus-visible{transform:translateY(0)}
.tnum{font-variant-numeric:tabular-nums}

/* ═══ 3. LAYOUT ══════════════════════════════════════════════════════ */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:var(--max-r)}
.sec{padding-block:clamp(52px,2.4rem + 3vw,92px)}
.sec--sm{padding-block:clamp(36px,1.7rem + 2vw,60px)}
.sec--card{background:var(--card)}
.sec--sunk{background:var(--paper-2)}
.sec--navy{background:var(--navy);color:var(--inv)}
.sec--ink{background:var(--ink);color:var(--inv)}
.sec--navy .lede,.sec--navy .sm,.sec--ink .lede,.sec--ink .sm{color:rgb(255 255 255/.78)}
.sec--navy .cap,.sec--ink .cap,.sec--navy .xs,.sec--ink .xs{color:rgb(255 255 255/.62)}
.sec--navy .price,.sec--ink .price{color:#fff}
.head{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:clamp(28px,1.5rem + 1.4vw,48px);max-width:64ch}
.head--row{max-width:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.head--row>div{display:flex;flex-direction:column;gap:var(--s3);max-width:60ch}
.head .eyebrow+*{margin-top:calc(var(--s1) * -1)}
.g{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.split{display:grid;gap:clamp(28px,2.6vw,56px);grid-template-columns:1fr 1fr;align-items:start}
.sp75{grid-template-columns:6fr 5fr}.sp57{grid-template-columns:5fr 7fr}
.sticky-aside{position:sticky;top:calc(var(--hdr) + 20px)}
.stack{display:flex;flex-direction:column;gap:var(--s5)}
.stack--sm{gap:var(--s3)}
.row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.row--tight{gap:var(--s2)}
.rule{height:1px;background:var(--line);border:0}
.sec--navy .rule,.sec--ink .rule,.ftr .rule{background:var(--line-i)}
.bleed-scroll{display:flex;gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s4);margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  scrollbar-width:thin}
.bleed-scroll>*{scroll-snap-align:start;flex:0 0 min(340px,78vw)}

/* Breadcrumb */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:12.5px;color:var(--fg-3)}
.crumb a:hover{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px}
.crumb svg{width:13px;height:13px;opacity:.55;flex:none}
.crumb [aria-current]{color:var(--fg-2);font-weight:500}

/* ═══ 4. BUTTONS ═════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:52px;
  padding:13px var(--s6);font-weight:600;font-size:15px;letter-spacing:.005em;text-align:center;
  border:1px solid transparent;border-radius:var(--r1);cursor:pointer;white-space:normal;line-height:1.25;
  transition:background-color var(--t1) var(--ez),border-color var(--t1),color var(--t1),transform var(--t1),box-shadow var(--t2)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{background:linear-gradient(178deg,var(--gold-l),var(--gold) 55%,var(--gold-d));color:#1E1503;
  box-shadow:0 1px 0 rgb(255 255 255/.35) inset,0 6px 18px rgb(160 118 42/.26)}
.btn-gold:hover{background:linear-gradient(178deg,#EDD59B,var(--gold-l) 55%,var(--gold));
  box-shadow:0 1px 0 rgb(255 255 255/.45) inset,0 12px 26px rgb(160 118 42/.34);transform:translateY(-1px)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgb(10 27 48/.22)}
.btn-navy:hover{background:var(--navy-2);box-shadow:0 12px 26px rgb(10 27 48/.30);transform:translateY(-1px)}
.btn-out{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn-out:hover{border-color:var(--navy);background:var(--card)}
.btn-inv{background:rgb(255 255 255/.07);color:#fff;border-color:rgb(255 255 255/.34)}
.btn-inv:hover{background:rgb(255 255 255/.15);border-color:rgb(255 255 255/.7)}
.btn-wa{background:var(--wa);color:var(--wa-ink);border-color:transparent}
.btn-wa:hover{background:#1FBE5B;transform:translateY(-1px)}
.btn-sm{min-height:44px;padding:10px var(--s5);font-size:14px}
.btn-xs{min-height:38px;padding:8px var(--s4);font-size:13px}
.btn-xs svg{width:15px;height:15px}
.btn-blk{width:100%}
.lnk{display:inline-flex;align-items:center;gap:6px;padding-block:5px;font-weight:600;font-size:14.5px;color:var(--navy);
  border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color var(--t1),color var(--t1)}
.lnk:hover{color:var(--gold-ink);border-bottom-color:var(--gold)}
.lnk svg{width:15px;height:15px}
.sec--navy .lnk,.sec--ink .lnk,.ftr .lnk{color:#fff;border-bottom-color:rgb(255 255 255/.3)}
.sec--navy .lnk:hover,.sec--ink .lnk:hover,.ftr .lnk:hover{color:var(--gold-l);border-bottom-color:var(--gold)}

/* Icon buttons — shortlist / compare / share on cards */
.ibtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgb(255 255 255/.94);color:var(--navy);border:1px solid var(--line);
  box-shadow:var(--sh1);transition:background-color var(--t1),color var(--t1),transform var(--t1)}
.ibtn svg{width:17px;height:17px}
.ibtn:hover{background:#fff;transform:scale(1.07)}
.ibtn[aria-pressed="true"]{background:var(--navy);color:var(--gold-l);border-color:var(--navy)}
.ibtn[aria-pressed="true"] svg{fill:currentColor}

/* ═══ 5. HEADER & NAV ════════════════════════════════════════════════ */
.ann{background:var(--ink);color:rgb(255 255 255/.82);font-size:12.5px;line-height:1.5}
.ann .wrap{display:flex;align-items:center;justify-content:center;gap:var(--s3);padding-block:9px;text-align:center;flex-wrap:wrap}
.ann b{color:var(--gold-l);font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:11px}
.ann i{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}

.hdr{position:sticky;top:0;z-index:150;background:rgb(255 255 255/.94);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);min-height:70px;min-width:0}
.logo{display:flex;align-items:center;gap:var(--s3);flex:none}
.logo__m{width:42px;height:42px;flex:none;border-radius:9px;overflow:hidden;background:var(--navy)}
.logo__m img{width:100%;height:100%;object-fit:cover}
.logo__t{display:flex;flex-direction:column;line-height:1.2}
.logo__n{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;line-height:1.05}
.logo__s{font-size:8.4px;font-weight:600;letter-spacing:.147em;text-transform:uppercase;
  color:var(--gold-ink);white-space:nowrap;margin-top:2px}

/* City switcher — the platform is Bangalore-first, not Bangalore-only.
   Making the city a visible, changeable control is what keeps the UI
   honest about expansion instead of hard-coding one market. */
.citysel{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--card);font-size:13px;font-weight:600;color:var(--navy);
  flex:none;transition:border-color var(--t1),background-color var(--t1)}
.citysel:hover{border-color:var(--navy);background:var(--paper)}
.citysel svg{width:15px;height:15px;color:var(--gold-ink)}
.citysel svg:last-child{width:13px;opacity:.6;color:var(--fg-3)}

.nav{display:flex;align-items:center;gap:clamp(9px,1.1vw,18px);flex:1 1 auto;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:block;flex:none;padding:24px 2px;font-size:13.5px;font-weight:500;color:var(--fg-2);white-space:nowrap;
  position:relative;transition:color var(--t1)}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:18px;height:1px;
  background:var(--gold-d);transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ez)}
.nav a:hover{color:var(--navy)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--navy);font-weight:600}
.hdr__act{display:flex;align-items:center;gap:var(--s2);flex:none;margin-left:auto}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:1px solid var(--line-2);border-radius:var(--r1);color:var(--navy);background:var(--card)}
.burger:hover{background:var(--paper-2)}
.burger svg{width:20px;height:20px}

/* ═══ 6. SEARCH CONSOLE ══════════════════════════════════════════════
   SIGNATURE. The landing page's title block — hairline rules, mono keys,
   tabular values — is here turned into an input surface. A buyer sets
   intent, place, type, budget and configuration on the same ruled grid
   the site later uses to publish the answers. The device that carries
   the figures is the device that collects them. */
.console{background:var(--card);border-radius:var(--r3);box-shadow:var(--sh3);overflow:hidden;position:relative}
.console::before{content:'';position:absolute;inset-inline:0;top:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-l),var(--gold-d))}
.console__tabs{display:flex;border-bottom:1px solid var(--line);background:var(--paper);padding-top:3px}
.console__tabs button{flex:1;padding:17px var(--s3) 15px;font-size:13.5px;font-weight:600;color:var(--fg-3);
  border-bottom:2px solid transparent;transition:color var(--t1),border-color var(--t1),background-color var(--t1)}
.console__tabs button:hover{color:var(--navy);background:var(--card)}
.console__tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--gold);background:var(--card)}
.console__b{padding:var(--s5) var(--s6) var(--s6)}
.console__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r2);overflow:hidden;margin-bottom:var(--s4)}
.cfield{padding:var(--s4) var(--s5);border-right:1px solid var(--line);position:relative}
.cfield:last-child{border-right:0}
.cfield--full{grid-column:1/-1;border-right:0;border-top:1px solid var(--line)}
.cfield__k{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:5px}
.cfield input,.cfield select{width:100%;border:0;padding:0;font-size:15.5px;font-weight:500;background:transparent;
  min-height:26px}
.cfield input:focus,.cfield select:focus{outline:none}
.cfield input::placeholder{color:var(--fg-3);font-weight:400}
.cfield select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6673' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:16px;padding-right:24px}
.cfield:focus-within{background:var(--gold-veil)}
.pillrow{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-size:13px;
  font-weight:500;border:1px solid var(--line-2);background:var(--card);color:var(--fg-2);
  transition:border-color var(--t1),background-color var(--t1),color var(--t1)}
.pill:hover{border-color:var(--navy);color:var(--navy)}
.pill[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pill--i{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.26);color:#fff}
.pill--i:hover{background:rgb(255 255 255/.18);border-color:#fff;color:#fff}
.console__go{display:flex;gap:var(--s3);align-items:center}
.console__go .btn{flex:1}
.qsearch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s4)}
.qsearch>span{font-size:12px;color:var(--fg-3);margin-right:var(--s1)}
.qsearch a{font-size:12.5px;padding:6px 12px;border-radius:999px;background:var(--paper-2);
  color:var(--fg-2);border:1px solid transparent;transition:all var(--t1)}
.qsearch a:hover{background:var(--gold-veil);border-color:var(--gold);color:var(--gold-ink)}

/* ═══ HERO ═══ */
.hero{position:relative;background:var(--ink);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:58% 46%;
  animation:kb 40s var(--ez) infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.hero__veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(96deg,rgb(5 14 26/.95) 0%,rgb(5 14 26/.82) 32%,rgb(5 14 26/.36) 60%,rgb(5 14 26/.62) 100%),
  linear-gradient(180deg,rgb(5 14 26/.55) 0%,transparent 26%,rgb(5 14 26/.45) 100%)}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 470px;
  gap:clamp(32px,3.2vw,64px);align-items:center;padding-block:clamp(40px,2.2rem + 2.4vw,72px)}
.hero__copy{color:#fff;max-width:38rem;display:flex;flex-direction:column;gap:var(--s5)}
.hero h1{color:#fff;text-wrap:balance}
.hero .lede{color:rgb(255 255 255/.84);max-width:46ch}
.chips--col{flex-direction:column;align-items:flex-start}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:rgb(255 255 255/.09);border:1px solid rgb(255 255 255/.22);font-size:12.5px;font-weight:500;color:#fff}
.chip svg{width:14px;height:14px;color:var(--gold-l);flex:none}
/* Light-background variant — .chip is inverted by default because it
   was born in the hero. */
.chip--l{background:var(--gold-veil);border-color:var(--gold-l);color:var(--gold-ink)}
.chip--l svg{color:var(--gold-d)}
.chip--static{background:var(--paper-2);border-color:var(--line-2);color:var(--fg-2)}
.chip--clear{background:none;border-color:transparent;color:var(--fg-3);text-decoration:underline}
.hero__sub{position:relative;z-index:2;border-top:1px solid rgb(255 255 255/.14);
  background:rgb(5 14 26/.45);backdrop-filter:blur(6px)}
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,40px);padding-block:var(--s5)}
.statbar .s{display:flex;flex-direction:column;gap:5px}
.statbar .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
  font-size:clamp(22px,1.2rem + .9vw,30px);line-height:1;letter-spacing:-.03em;color:var(--gold-l)}
.statbar .k{font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:rgb(255 255 255/.62)}

/* ═══ 7. TITLE BLOCK & CARDS ═════════════════════════════════════════ */
.tb{border:1px solid var(--line);border-radius:var(--r2);background:var(--card);overflow:hidden}
.tb__hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);background:var(--paper-2);border-bottom:1px solid var(--line)}
.tb__hd span{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3)}
.tb__g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);padding:var(--s5)}
.tb__g--2{grid-template-columns:repeat(2,1fr)}
.tb__g--4{grid-template-columns:repeat(4,1fr)}
.tb__k{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);display:block}
.tb__v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:15.5px;
  color:var(--fg);letter-spacing:-.01em;margin-top:3px;display:block;line-height:1.35;overflow-wrap:anywhere}
.tb--i{border-color:var(--line-i);background:rgb(255 255 255/.045)}
.tb--i .tb__hd{background:rgb(255 255 255/.05);border-bottom-color:var(--line-i)}
.tb--i .tb__hd span,.tb--i .tb__k{color:rgb(255 255 255/.62)}
.tb--i .tb__v{color:#fff}

.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r3);overflow:hidden;position:relative;
  transition:box-shadow var(--t2) var(--ez),transform var(--t2) var(--ez),border-color var(--t2)}
.card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--line-2)}
.card__b{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.card__b>.card__cta{margin-top:auto;padding-top:var(--s2)}
.card__cta{display:flex;gap:var(--s2)}
.card__cta .btn{flex:1}
.frame{position:relative;overflow:hidden;background:var(--paper-2);background-size:cover;background-position:center}
.frame--z{transition:transform var(--t3) var(--ez)}
.card:hover .frame--z,a:hover>.frame--z{transform:scale(1.045)}
.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}.r32{aspect-ratio:3/2}.r54{aspect-ratio:5/4}.r34{aspect-ratio:3/4}.r11{aspect-ratio:1/1}
.frame--tint::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 34%,rgb(5 14 26/.32) 60%,rgb(5 14 26/.86));pointer-events:none}
.fcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--s5);color:#fff}
.fcap b{display:block;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.2}
.fcap span{font-size:12.5px;color:rgb(255 255 255/.84)}
.card__media{position:relative}
.card__tools{position:absolute;top:var(--s3);right:var(--s3);z-index:3;display:flex;gap:var(--s2)}
.ribbon{position:absolute;top:var(--s3);left:var(--s3);z-index:3;padding:6px 11px;border-radius:var(--r1);
  background:var(--navy);color:var(--gold-l);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.ribbon--gold{background:var(--gold);color:#1E1503}
.ribbon--live{background:var(--ok);color:#fff}
.tagrow{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;
  border-radius:var(--r1);background:var(--paper-2);color:var(--fg-2)}
.tag--ok{background:var(--ok-veil);color:var(--ok)}
.tag--gold{background:var(--gold-veil);color:var(--gold-ink)}
.tag--warn{background:var(--warn-veil);color:var(--warn)}
.loc{display:flex;align-items:flex-start;gap:6px;font-size:13.5px;color:var(--fg-3);line-height:1.45}
.loc svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--gold-ink)}
.pricerow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding-top:var(--s3);border-top:1px solid var(--line)}
.pricerow .price{font-size:19px}
.pricerow .cap{font-family:var(--mono);font-size:11.5px}
.kvrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);padding-block:var(--s3);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kvrow>div{display:flex;flex-direction:column;gap:2px}
.kvrow .tb__k{font-size:9.5px;letter-spacing:.12em}
.kvrow .tb__v{font-size:13.5px;margin-top:0}

/* Category / locality tiles */
.tile{position:relative;display:block;border-radius:var(--r3);overflow:hidden;background:var(--navy)}
.tile .frame{aspect-ratio:4/3}
.tile__b{position:absolute;inset:auto 0 0 0;z-index:2;padding:var(--s5);color:#fff}
.tile__b b{display:block;font-family:var(--display);font-size:20px;font-weight:600;line-height:1.2}
.tile__b span{font-family:var(--mono);font-size:11.5px;color:rgb(255 255 255/.78);letter-spacing:.04em}
.tile:hover .frame--z{transform:scale(1.05)}

/* Compact locality list — editorial, not another card grid */
.localgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6) var(--s5)}
.localcol h3{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-ink);padding-bottom:var(--s3);margin-bottom:var(--s2);
  border-bottom:1px solid var(--line)}
.sec--navy .localcol h3,.sec--ink .localcol h3{color:var(--gold-l);border-bottom-color:var(--line-i)}
.localcol li a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding-block:9px;font-size:14.5px;border-bottom:1px solid var(--line);transition:color var(--t1)}
.sec--navy .localcol li a,.sec--ink .localcol li a{border-bottom-color:var(--line-i)}
.localcol li:last-child a{border-bottom:0}
.localcol li a:hover{color:var(--gold-ink)}
.sec--navy .localcol li a:hover,.sec--ink .localcol li a:hover{color:var(--gold-l)}
.localcol .fig{font-size:11.5px;color:var(--fg-3);flex:none}
.sec--navy .localcol .fig,.sec--ink .localcol .fig{color:rgb(255 255 255/.55)}

/* Journey — a real sequence, so numbering carries meaning */
.journey{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s3);counter-reset:j}
.journey li{position:relative;padding:var(--s5) var(--s4);border:1px solid var(--line-i);border-radius:var(--r2);
  background:rgb(255 255 255/.045);display:flex;flex-direction:column;gap:var(--s2);counter-increment:j}
.journey li::before{content:counter(j,decimal-leading-zero);font-family:var(--mono);font-size:11px;
  font-weight:500;color:var(--gold-l);letter-spacing:.1em}
.journey b{font-size:14.5px;font-weight:600;line-height:1.3}
.journey span{font-size:12px;color:rgb(255 255 255/.66);line-height:1.5}
.journey li:not(:last-child)::after{content:'';position:absolute;right:calc(var(--s3) * -1 - 1px);top:50%;
  width:var(--s3);height:1px;background:rgb(227 197 131/.4)}

/* Value props */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.svc--3{grid-template-columns:repeat(3,1fr)}
.svc li{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6) var(--s5);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r3);transition:box-shadow var(--t2),transform var(--t2),border-color var(--t2)}
.svc li:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--line-2)}
.svc .si{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:var(--navy);color:var(--gold-l);flex:none}
.svc .si svg{width:21px;height:21px}
.svc b{font-size:16.5px;font-weight:600;line-height:1.35}
.svc span{font-size:14.5px;color:var(--fg-2);line-height:1.6}

/* ═══ 8. FILTERS & RESULTS ═══════════════════════════════════════════ */
.searchbar{position:sticky;top:var(--hdr);z-index:120;background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:var(--sh1)}
.searchbar__in{display:flex;align-items:center;gap:var(--s3);padding-block:var(--s3);flex-wrap:wrap}
.sfield{display:flex;align-items:center;gap:var(--s2);flex:1;min-width:220px;padding:11px var(--s4);
  border:1px solid var(--line-2);border-radius:var(--r1);background:var(--card);transition:border-color var(--t1),box-shadow var(--t1)}
.sfield:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgb(18 42 73/.12)}
.sfield svg{width:17px;height:17px;color:var(--fg-3);flex:none}
.sfield input{border:0;flex:1;font-size:15px;background:transparent}
.sfield input:focus{outline:none}
.fdrop{position:relative;flex:none}
.fdrop__t{display:inline-flex;align-items:center;gap:7px;padding:12px var(--s4);border:1px solid var(--line-2);
  border-radius:var(--r1);background:var(--card);font-size:14px;font-weight:500;white-space:nowrap;
  transition:border-color var(--t1),background-color var(--t1)}
.fdrop__t:hover{border-color:var(--navy)}
.fdrop__t svg{width:14px;height:14px;color:var(--fg-3);transition:transform var(--t2)}
.fdrop.open .fdrop__t{border-color:var(--navy);background:var(--paper)}
.fdrop.open .fdrop__t svg{transform:rotate(180deg)}
.fdrop__t[data-active="true"]{border-color:var(--gold);background:var(--gold-veil);color:var(--gold-ink)}
.fdrop__p{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:280px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh3);padding:var(--s5);display:none}
.fdrop.open .fdrop__p{display:block;animation:rv var(--t2) var(--ez)}
.fdrop__p .tb__k{margin-bottom:var(--s3)}
.fdrop__p .pillrow{margin-bottom:var(--s4)}
.fdrop__p .pillrow:last-child{margin-bottom:0}

.results{display:grid;grid-template-columns:minmax(0,1fr) 42%;gap:0;align-items:start}
.results__list{padding-block:var(--s5);padding-right:var(--s5);display:flex;flex-direction:column;gap:var(--s5)}
.results__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.results__map{position:sticky;top:calc(var(--hdr) + 74px);height:calc(100vh - var(--hdr) - 74px);
  background:var(--map);border-left:1px solid var(--line)}
.mapstub{position:relative;width:100%;height:100%;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,transparent 0 47px,rgb(10 27 48/.05) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgb(10 27 48/.05) 47px 48px),
    radial-gradient(120% 90% at 60% 40%,#EFECE4,#E2DED5)}
.mapstub__note{position:absolute;left:50%;top:var(--s5);transform:translateX(-50%);z-index:4;
  padding:7px 14px;border-radius:999px;background:rgb(5 14 26/.86);color:#fff;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.mappin{position:absolute;z-index:3;transform:translate(-50%,-100%);display:flex;flex-direction:column;
  align-items:center;gap:3px;cursor:pointer}
.mappin b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:500;
  padding:6px 11px;border-radius:999px;background:var(--card);border:1px solid var(--line-2);
  box-shadow:var(--sh2);color:var(--navy);white-space:nowrap;transition:all var(--t1)}
.mappin i{width:7px;height:7px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px rgb(255 255 255/.8)}
.mappin:hover b,.mappin.on b{background:var(--navy);color:var(--gold-l);border-color:var(--navy);transform:scale(1.06)}
.mappin:hover i,.mappin.on i{background:var(--gold)}

/* Horizontal result card — desktop */
.rcard{display:grid;grid-template-columns:300px minmax(0,1fr);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r3);overflow:hidden;transition:box-shadow var(--t2),border-color var(--t2),transform var(--t2)}
.rcard:hover{box-shadow:var(--sh2);border-color:var(--line-2);transform:translateY(-2px)}
.rcard .card__media{height:100%;min-height:230px}
.rcard .frame{height:100%;min-height:230px}
.rcard__b{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.rcard__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)}
.rcard__hd .d4{margin-bottom:2px}
.rcard__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line)}
.rcard__foot .row{gap:var(--s2)}
.byline{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--fg-3)}
.byline b{font-weight:600;color:var(--fg-2)}

.chipbar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.chipbar .rm{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;border-radius:999px;
  background:var(--gold-veil);border:1px solid var(--gold);color:var(--gold-ink);font-size:12.5px;font-weight:500}
.chipbar .rm svg{width:13px;height:13px}
.chipbar .rm:hover{background:var(--gold);color:#1E1503}

/* ═══ 9. PROJECT DETAIL ══════════════════════════════════════════════ */
.pgallery{display:grid;grid-template-columns:2fr 1fr;gap:var(--s2);border-radius:var(--r3);overflow:hidden}
.pgallery__side{display:grid;grid-template-rows:1fr 1fr;gap:var(--s2)}
.pgallery a{position:relative;display:block;overflow:hidden;background:var(--paper-2)}
.pgallery .frame{height:100%;min-height:180px}
.pgallery__more{position:absolute;inset:0;display:grid;place-items:center;background:rgb(5 14 26/.62);
  color:#fff;font-size:14px;font-weight:600;backdrop-filter:blur(2px)}
.pgallery__main .frame{min-height:380px}

.subnav{position:sticky;top:var(--hdr);z-index:110;background:var(--card);border-bottom:1px solid var(--line)}
.subnav ul{display:flex;gap:var(--s5);overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;padding:15px 0;font-size:13.5px;font-weight:500;color:var(--fg-2);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color var(--t1),border-color var(--t1)}
.subnav a:hover,.subnav a.on{color:var(--navy);border-bottom-color:var(--gold)}

.psummary{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s5)}
.pbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s6);padding:var(--s5) var(--s6);
  border-radius:var(--r2);background:linear-gradient(140deg,rgb(198 155 75/.20),rgb(198 155 75/.05));
  border:1px solid rgb(227 197 131/.42)}
.pbar__k{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgb(255 255 255/.68);margin-bottom:6px}
.pbar__v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
  font-size:clamp(26px,1.4rem + 1.5vw,38px);line-height:1;color:var(--gold-l);letter-spacing:-.035em}
.pbar__v .cur{font-size:.62em;margin-right:3px}
.pbar__v .u{font-size:.5em;letter-spacing:0;margin-left:4px;color:rgb(255 255 255/.8)}
.pbar__d{width:1px;align-self:stretch;background:rgb(255 255 255/.22)}

.tw{border:1px solid var(--line);border-radius:var(--r3);background:var(--card);overflow:hidden}
table{width:100%;border-collapse:collapse;text-align:left}
caption{padding:var(--s5);text-align:left;font-size:12.5px;line-height:1.6;color:var(--fg-3);
  border-bottom:1px solid var(--line);background:var(--paper)}
thead{background:var(--navy)}
thead th{padding:var(--s4) var(--s5);font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgb(255 255 255/.86);white-space:nowrap}
tbody th{padding:var(--s5);font-weight:600;font-size:15.5px}
tbody td{padding:var(--s5)}
tbody tr{border-bottom:1px solid var(--line);transition:background-color var(--t1)}
tbody tr:hover{background:var(--gold-veil)}
tbody tr:last-child{border-bottom:0}
tbody .price{font-size:16px}
.num{text-align:right}
.mcards{display:grid;gap:var(--s4)}
.mc{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5)}
.mc__hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--line)}

.amn{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.amn li{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r2);font-size:14px;font-weight:500}
.amn svg{width:18px;height:18px;flex:none;color:var(--gold-ink)}

.dist li{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s4);border-bottom:1px solid var(--line-i)}
.dist li:last-child{border-bottom:0}
.dist .n{display:flex;align-items:center;gap:var(--s4);min-width:0}
.dist .n>span:last-child{font-size:15px;font-weight:500}
.dist .ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:rgb(255 255 255/.08);color:var(--gold-l);flex:none}
.dist .ic svg{width:18px;height:18px}
.dist .fig{flex:none;font-size:14.5px;color:#fff}

/* Gated floor plan — carried from the landing page, it converts */
.plan{position:relative;background:var(--paper);display:grid;place-items:center;padding:var(--s5);aspect-ratio:4/3}
.plan svg{width:100%;height:100%;max-height:100%}
.lock .plan svg{filter:blur(3.5px);opacity:.6}
.seal{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s3);background:linear-gradient(180deg,rgb(5 14 26/.28),rgb(5 14 26/.62))}
.seal b{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;background:#fff;
  box-shadow:0 6px 20px rgb(5 14 26/.24);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink)}
.seal svg{width:13px;height:13px}
.seal em{font-style:normal;font-size:12px;color:rgb(255 255 255/.92);font-weight:500}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.gal>*{border-radius:var(--r3);overflow:hidden;display:block}
.gal .frame{aspect-ratio:4/3}

.map{position:relative;border-radius:var(--r3);overflow:hidden;border:1px solid var(--line-i);
  background:var(--navy-2);aspect-ratio:4/3}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.25) contrast(1.05)}
.map__tag{position:absolute;left:var(--s4);top:var(--s4);z-index:2;padding:7px 13px;border-radius:999px;
  background:rgb(5 14 26/.82);border:1px solid rgb(255 255 255/.24);font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;pointer-events:none}

.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  margin-bottom:var(--s3);overflow:hidden;transition:box-shadow var(--t2),border-color var(--t2)}
.faq details[open]{box-shadow:var(--sh1);border-color:var(--line-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s4) var(--s5);min-height:62px;cursor:pointer;list-style:none;transition:background-color var(--t1)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--paper)}
.faq summary .q{font-weight:500;font-size:16px;line-height:1.45}
.faq summary .c{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-2);color:var(--fg-2);transition:transform var(--t2) var(--ez),background-color var(--t1),color var(--t1)}
.faq summary .c svg{width:15px;height:15px}
.faq details[open] summary .c{transform:rotate(180deg);background:var(--navy);color:var(--gold-l)}
.faq .a{padding:0 var(--s5) var(--s5);color:var(--fg-2);max-width:74ch;animation:rv var(--t2) var(--ez)}
@keyframes rv{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.tl li{display:flex;gap:var(--s5);padding-block:var(--s4);border-bottom:1px solid var(--line-i);align-items:baseline}
.tl li:last-child{border-bottom:0}
.tl .y{display:flex;align-items:baseline;gap:var(--s4);width:120px;flex:none}
.tl .m{width:7px;height:7px;border-radius:50%;background:rgb(255 255 255/.3);flex:none;transform:translateY(-2px)}
.tl li.on .m{background:var(--gold);box-shadow:0 0 0 4px rgb(198 155 75/.26)}
.tl li.on .y .fig{color:var(--gold-l)}

/* ═══ 10. LOCALITY ═══════════════════════════════════════════════════ */
.trend{display:flex;flex-direction:column;gap:var(--s4)}
.trend__now{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.trend__now b{font-family:var(--mono);font-size:clamp(26px,1.4rem + 1.2vw,34px);font-weight:500;
  color:var(--gold-l);letter-spacing:-.03em;line-height:1}
.trend__now span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgb(255 255 255/.6)}
.trend svg{width:100%;height:auto;display:block;overflow:visible}
.trend__src{font-size:11.5px;line-height:1.6;color:rgb(255 255 255/.5)}
.trend__src a{text-decoration:underline;text-underline-offset:2px}
.panel{padding:var(--s6);background:rgb(255 255 255/.05);border:1px solid var(--line-i);border-radius:var(--r3)}
.panel--l{background:var(--card);border-color:var(--line)}

/* ═══ 11. VERDICT / REVIEW ═══════════════════════════════════════════
   SIGNATURE. Bharat Props' actual differentiator is that it publishes
   what is wrong with a property, not only what is right. So the review
   card is built as a two-column ledger — works / watch-outs — with the
   "best suited for" line as the resolution. Symmetric columns are the
   whole point: they make it structurally impossible to publish the
   upside without the downside. */
.verdict{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow var(--t2),transform var(--t2),border-color var(--t2)}
.verdict:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--line-2)}
.verdict__hd{padding:var(--s5);border-bottom:1px solid var(--line);display:flex;
  align-items:flex-start;justify-content:space-between;gap:var(--s4)}
.verdict__led{display:grid;grid-template-columns:1fr 1fr;flex:1}
.verdict__col{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.verdict__col+.verdict__col{border-left:1px solid var(--line)}
.verdict__col h4{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.15em;text-transform:uppercase}
.verdict__col h4 svg{width:14px;height:14px;flex:none}
.verdict__col--y h4{color:var(--ok)}
.verdict__col--n h4{color:var(--neg)}
.verdict__col li{position:relative;padding-left:15px;font-size:14px;line-height:1.55;color:var(--fg-2);
  margin-bottom:var(--s2)}
.verdict__col li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:1.5px;background:var(--line-2)}
.verdict__col--y li::before{background:var(--ok)}
.verdict__col--n li::before{background:var(--neg)}
.verdict__ft{padding:var(--s5);background:var(--paper);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s3)}
.verdict__for{display:flex;align-items:flex-start;gap:var(--s3);font-size:14px;line-height:1.55}
.verdict__for .tb__k{flex:none;width:88px;padding-top:3px}
.verdict__ft .row{margin-top:var(--s1)}

.quotecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s6) var(--s5) var(--s5);
  display:flex;flex-direction:column;gap:var(--s4);position:relative}
.quotecard::before{content:'';position:absolute;left:var(--s5);top:0;width:36px;height:3px;background:var(--gold)}
.quotecard p{font-size:15px;line-height:1.7;color:var(--fg-2)}
.quotecard footer{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding-top:var(--s4);
  border-top:1px solid var(--line)}
.quotecard img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper-2)}
.quotecard b{display:block;font-size:14.5px;font-weight:600}
.quotecard span{display:block;font-size:12px;color:var(--fg-3);line-height:1.4}

/* ═══ 12. TOOLS & CALCULATORS ════════════════════════════════════════ */
.toolgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3)}
.tool{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);border:1px solid var(--line-i);
  border-radius:var(--r2);background:rgb(255 255 255/.05);transition:background-color var(--t2),transform var(--t2),border-color var(--t2)}
.tool:hover{background:rgb(255 255 255/.1);transform:translateY(-3px);border-color:rgb(227 197 131/.5)}
.tool .si{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:rgb(227 197 131/.16);color:var(--gold-l);flex:none}
.tool .si svg{width:19px;height:19px}
.tool b{font-size:14.5px;font-weight:600;line-height:1.3}
.tool span{font-size:12px;color:rgb(255 255 255/.62);line-height:1.5}

.calc{display:grid;grid-template-columns:1fr 320px;gap:var(--s6);align-items:start}
.calc__out{background:var(--navy);color:#fff;border-radius:var(--r3);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s5)}
.calc__big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(28px,1.5rem + 1.4vw,38px);
  font-weight:500;color:var(--gold-l);letter-spacing:-.035em;line-height:1}
.calc__split{display:flex;height:10px;border-radius:999px;overflow:hidden;background:rgb(255 255 255/.12)}
.calc__split i{display:block;height:100%}
.calc__split i:first-child{background:var(--gold)}
.calc__split i:last-child{background:rgb(255 255 255/.32)}
.calc__legend{display:flex;gap:var(--s5);flex-wrap:wrap}
.calc__legend div{display:flex;flex-direction:column;gap:3px}
.calc__legend em{font-style:normal;display:flex;align-items:center;gap:6px;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:rgb(255 255 255/.6);font-family:var(--mono)}
.calc__legend em::before{content:'';width:9px;height:9px;border-radius:2px;background:var(--gold)}
.calc__legend div:last-child em::before{background:rgb(255 255 255/.32)}
.rng{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;background:var(--line);outline:none}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--navy);border:3px solid #fff;box-shadow:var(--sh2);cursor:pointer}
.rng::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--navy);border:3px solid #fff;
  box-shadow:var(--sh2);cursor:pointer}
.rngrow{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5)}
.rngrow__t{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.rngrow__t .fig{font-size:16px}

/* ═══ 13. FORMS & LEAD CAPTURE ═══════════════════════════════════════ */

/* A light card sitting inside .sec--navy or .sec--ink must re-establish its
   own text colours. Without this the dark section's white leaks onto the
   card's paper background and the text disappears. */
.lead:not(.lead--flat),
.lead:not(.lead--flat) .d1,.lead:not(.lead--flat) .d2,
.lead:not(.lead--flat) .d3,.lead:not(.lead--flat) .d4{color:var(--fg)}
.lead:not(.lead--flat) .lede,.lead:not(.lead--flat) .sm{color:var(--fg-2)}
.lead:not(.lead--flat) .cap,.lead:not(.lead--flat) .xs,
.lead:not(.lead--flat) .lead__note{color:var(--fg-3)}
.lead:not(.lead--flat) label{color:var(--fg)}
.lead:not(.lead--flat) .tb__k{color:var(--fg-3)}
.ctrl option{color:var(--fg);background:var(--card)}
.lead{background:var(--card);border-radius:var(--r3);box-shadow:var(--sh3);overflow:hidden;position:relative}
.lead::before{content:'';position:absolute;inset-inline:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-l),var(--gold-d))}
.lead--flat{box-shadow:none;border:1px solid var(--line)}
.lead__h{padding:var(--s6) var(--s5) var(--s4);text-align:center;border-bottom:1px solid var(--line);background:var(--paper)}
.lead__pill{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--fg-2);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s3)}
.lead__pill i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:blink 2.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.lead__h .d3{margin-bottom:var(--s2)}
.lead__b{padding:var(--s5)}
.f{margin-bottom:var(--s4)}
.f label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.f label .opt{font-weight:400;color:var(--fg-3)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.ctrl{width:100%;min-height:48px;padding:11px 14px;font-size:16px;color:var(--fg);background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r1);transition:border-color var(--t1),box-shadow var(--t1)}
.ctrl::placeholder{color:var(--fg-3)}
.ctrl:hover{border-color:var(--fg-3)}
.ctrl:focus-visible{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgb(18 42 73/.14)}
.ctrl:not(:placeholder-shown):invalid{border-color:var(--neg);box-shadow:0 0 0 3px rgb(180 52 31/.10)}
textarea.ctrl{min-height:92px;resize:vertical}
.f__err{display:none;margin-top:6px;font-size:12.5px;color:var(--neg);font-weight:500}
.ctrl:not(:placeholder-shown):invalid ~ .f__err{display:block}
select.ctrl{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6673' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.tel{display:flex}
.tel .dc{display:inline-flex;align-items:center;padding-inline:var(--s4);background:var(--paper-2);
  border:1px solid var(--line-2);border-right:0;border-radius:var(--r1) 0 0 var(--r1);
  font-family:var(--mono);font-weight:500;font-size:15px;color:var(--fg-2)}
.tel .ctrl{border-radius:0 var(--r1) var(--r1) 0}
.consent{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);margin-bottom:var(--s4);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r1);font-size:12.5px;
  line-height:1.55;color:var(--fg-2);cursor:pointer;transition:background-color var(--t1),border-color var(--t1)}
.consent:hover{background:var(--gold-veil);border-color:var(--gold)}
.consent input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--navy)}
.consent a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.lead__f{display:flex;align-items:center;justify-content:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.lead__f span{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--fg-3)}
.lead__f svg{width:13px;height:13px;color:var(--ok);flex:none}
.lead__note{margin-top:var(--s3);font-size:11.5px;line-height:1.5;color:var(--fg-3);text-align:center}
.lead__ok{display:none;padding:var(--s7) var(--s5);text-align:center;flex-direction:column;
  align-items:center;gap:var(--s4)}
.lead.done .lead__ok{display:flex;animation:rv var(--t2) var(--ez)}
.lead.done form,.lead.done .lead__h{display:none}
.lead__ok .tick{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-veil);color:var(--ok)}
.lead__ok .tick svg{width:26px;height:26px}

/* Date/time chip picker for the site-visit form */
.slots{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s2);scrollbar-width:thin}
.slots .pill{flex:none;flex-direction:column;gap:1px;padding:9px 14px;line-height:1.25;text-align:center}
.slots .pill b{font-family:var(--mono);font-size:15px;font-weight:500}
.slots .pill span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}

/* ═══ 13b. VISIT JOURNEY ═════════════════════════════════════════════
   The site visit is the scarcest resource in this business — roughly one
   working day each, twenty a month. So this flow is built to protect the
   calendar, not to fill it: effort rises step by step, and the person
   self-selects out before a slot is ever offered.                       */

.jr{max-width:760px;margin-inline:auto}
.jr__bar{display:flex;align-items:center;gap:0;margin-bottom:var(--s7)}
.jr__st{flex:1;display:flex;flex-direction:column;gap:8px;position:relative}
.jr__st::before{content:'';height:3px;border-radius:2px;background:var(--line-2);
  transition:background var(--t2) var(--ez)}
.jr__st.done::before,.jr__st.now::before{background:var(--gold)}
.jr__st span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr__st.now span{color:var(--gold-ink);font-weight:500}
.jr__st.done span{color:var(--fg-2)}
.jr__st + .jr__st{margin-left:6px}

.jr__pane{display:none}
.jr__pane.on{display:block;animation:jrin .4s var(--ez) both}
@keyframes jrin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.jr__q{font-family:var(--display);font-size:clamp(22px,1.3rem + .9vw,30px);line-height:1.2;
  font-weight:600;letter-spacing:-.012em;margin-bottom:var(--s2)}
.jr__hint{color:var(--fg-3);font-size:14.5px;margin-bottom:var(--s5)}

/* Choice rows — big targets, reason visible before the tap */
.jr__opts{display:grid;gap:var(--s3)}
.jr__opt{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  padding:var(--s4) var(--s5);text-align:left;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r2);cursor:pointer;
  transition:border-color var(--t1),background var(--t1),box-shadow var(--t1)}
.jr__opt:hover{border-color:var(--gold);background:var(--gold-veil)}
.jr__opt[aria-pressed=true]{border-color:var(--gold);background:var(--gold-veil);
  box-shadow:0 0 0 1px var(--gold) inset}
.jr__opt i{width:20px;height:20px;margin-top:2px;border-radius:50%;flex:none;
  border:1.5px solid var(--line-2);display:grid;place-items:center;transition:all var(--t1)}
.jr__opt[aria-pressed=true] i{border-color:var(--gold-d);background:var(--gold-d)}
.jr__opt[aria-pressed=true] i::after{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
.jr__opt b{display:block;font-size:15.5px;font-weight:600;color:var(--fg);margin-bottom:3px}
.jr__opt em{display:block;font-style:normal;font-size:13.5px;color:var(--fg-3);line-height:1.5}

.jr__nav{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--line)}
.jr__nav .btn-ghost{margin-right:auto}

/* Capacity notice — states a real constraint, never manufactures one */
.jr__cap{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);
  background:var(--navy);color:rgb(255 255 255/.86);border-radius:var(--r1);
  font-size:13.5px;line-height:1.55;margin-bottom:var(--s5)}
.jr__cap svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--gold-l)}
.jr__cap b{color:#fff}

/* Slot grid */
.jr__days{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:var(--s2);
  margin-bottom:var(--s5)}
.jr__day{padding:var(--s3) var(--s2);text-align:center;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r1);cursor:pointer;transition:all var(--t1)}
.jr__day:hover:not(:disabled){border-color:var(--gold)}
.jr__day[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.jr__day:disabled{opacity:.36;cursor:not-allowed;background:var(--paper-2)}
.jr__day u{display:block;text-decoration:none;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;opacity:.66}
.jr__day b{display:block;font-family:var(--mono);font-size:19px;font-weight:500;line-height:1.25}
.jr__day s{display:block;text-decoration:none;font-size:10.5px;opacity:.62}
.jr__times{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s2)}
.jr__time{padding:var(--s4) var(--s3);text-align:center;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r1);cursor:pointer;
  font-size:14.5px;transition:all var(--t1)}
.jr__time:hover:not(:disabled){border-color:var(--gold)}
.jr__time[aria-pressed=true]{background:var(--gold-veil);border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold) inset;font-weight:600}
.jr__time:disabled{opacity:.34;cursor:not-allowed;background:var(--paper-2);text-decoration:line-through}
.jr__time em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:3px}

/* Summary ledger before commit */
.jr__sum{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin-bottom:var(--s5)}
.jr__sum dl{display:grid;grid-template-columns:auto 1fr;margin:0}
.jr__sum dt,.jr__sum dd{padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);margin:0}
.jr__sum dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);background:var(--paper);white-space:nowrap}
.jr__sum dd{font-size:14.5px;font-weight:500}
.jr__sum dl > :nth-last-child(-n+2){border-bottom:0}

/* What the visit actually includes — the reason to give up a Saturday */
.jr__promise{display:grid;gap:var(--s3);padding:var(--s5);background:var(--gold-veil);
  border:1px solid var(--gold-l);border-radius:var(--r2);margin-bottom:var(--s5)}
.jr__promise li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
  font-size:14px;line-height:1.55;color:var(--gold-ink)}
.jr__promise svg{width:16px;height:16px;margin-top:3px;color:var(--gold-d)}
.jr__promise b{color:var(--ink)}

/* Turn-away state — an honest no, with a next step */
.jr__soft{padding:var(--s6);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r2);text-align:center}
.jr__soft .d3{margin-bottom:var(--s3)}

@media (max-width:767px){
  .jr__st span{font-size:9.5px}
  .jr__sum dl{grid-template-columns:1fr}
  .jr__sum dt{border-bottom:0;padding-bottom:0;background:transparent}
  .jr__sum dd{padding-top:2px}
  .jr__nav{flex-wrap:wrap}
  .jr__nav .btn{flex:1}
}

/* Journey — area chips, multi-select, match cards, exit branch ────── */

.jr__chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.jr__chip{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;font-size:14px;
  background:var(--card);border:1px solid var(--line-2);border-radius:100px;cursor:pointer;
  transition:all var(--t1)}
.jr__chip:hover{border-color:var(--gold)}
.jr__chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.jr__chip .fig{font-size:11.5px;opacity:.62}
.jr__chip[aria-pressed=true] .fig{opacity:.8}

/* Multi-select reads as a square, single-select as a circle — the shape
   tells you whether more than one answer is allowed before you tap. */
.jr__opts--multi .jr__opt i{border-radius:5px}
.jr__opts--multi .jr__opt[aria-pressed=true] i::after{
  width:10px;height:10px;border-radius:1px;
  clip-path:polygon(14% 47%,0 61%,40% 100%,100% 22%,86% 8%,38% 71%)}
.jr__multinote{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-ink);
  background:var(--gold-veil);border:1px solid var(--gold-l);border-radius:100px;
  padding:4px 10px;margin-bottom:var(--s4)}

/* Match cards — real inventory, so they carry a thumbnail and figures */
.jr__opt--m{grid-template-columns:auto 84px 1fr}
.jr__mimg{width:84px;height:64px;border-radius:var(--r1);background-size:cover;
  background-position:center;background-color:var(--paper-2);flex:none}
.jr__mimg--none{display:grid;place-items:center}
.jr__mimg--none::after{content:'no image';font-family:var(--mono);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);text-align:center}
.jr__mfig{font-family:var(--mono);font-size:11.5px;letter-spacing:-.01em;
  color:var(--fg-2);margin-top:3px}
.jr__matchnote{font-size:13px;color:var(--fg-3);margin-bottom:var(--s4)}

/* The exit branch. Booking a slot and asking for a call are two real
   outcomes, so neither is styled as a rejection of the other. */
.jr__fork{display:grid;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s5);
  border-top:1px solid var(--line)}
.jr__fork .btn{width:100%}
.jr__forkalt{display:grid;gap:var(--s2);padding:var(--s4);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r2)}
.jr__forkalt b{font-size:14.5px}
.jr__forkalt p{font-size:13.5px;color:var(--fg-3);line-height:1.5}
.f.bad .ctrl{border-color:#B4341F;box-shadow:0 0 0 3px rgb(180 52 31/.1)}
.f.bad .f__err{display:block}

@media (max-width:520px){
  .jr__opt--m{grid-template-columns:auto 1fr;row-gap:var(--s3)}
  .jr__mimg{width:100%;height:120px;grid-column:1/-1;order:-1}
}

/* ═══ 13c. COMPARISON TABLE ══════════════════════════════════════════
   A spec grid alone doesn't help anyone decide — 99acres already has one
   and nobody uses it. What makes this useful is that the honest rows sit
   in the same table as the figures: you cannot scan the prices without
   also scanning what's wrong with each.                                 */

.cmp{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2);background:var(--card)}
.cmp table{border-collapse:collapse;width:100%;min-width:720px}
.cmp th,.cmp td{padding:var(--s4) var(--s5);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.cmp thead th{position:sticky;top:var(--hdr);z-index:5;background:var(--paper);
  border-bottom:2px solid var(--navy)}
.cmp tbody th{width:180px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);font-weight:400;background:var(--paper);
  position:sticky;left:0;z-index:4}
.cmp td{font-size:14.5px}
.cmp .fig,.cmp .price{font-size:15.5px}
.cmp__hd{display:grid;gap:var(--s2)}
.cmp__hd .frame{height:104px;border-radius:var(--r1)}
.cmp__hd b{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em}
.cmp__hd span{font-size:12.5px;color:var(--fg-3)}
.cmp__drop{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--fg-3);
  background:none;border:0;cursor:pointer;padding:2px 0}
.cmp__drop:hover{color:var(--bad,#B4341F)}
.cmp__drop svg{width:12px;height:12px}

/* The two honest rows — mirrored, so neither can be published alone */
.cmp tr.cmp--y th,.cmp tr.cmp--y td{background:rgb(14 124 74/.045)}
.cmp tr.cmp--n th,.cmp tr.cmp--n td{background:rgb(180 52 31/.045)}
.cmp tr.cmp--y th,.cmp tr.cmp--n th{color:var(--fg-2);font-weight:500}
.cmp ul.cmp__pts{display:grid;gap:7px}
.cmp__pts li{display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:13.5px;line-height:1.5}
.cmp__pts svg{width:13px;height:13px;margin-top:4px;flex:none}
.cmp--y .cmp__pts svg{color:var(--ok)}
.cmp--n .cmp__pts svg{color:#B4341F}

.cmp__empty{display:grid;place-items:center;gap:var(--s3);min-height:220px;padding:var(--s6);
  border:1.5px dashed var(--line-2);border-radius:var(--r2);text-align:center;color:var(--fg-3)}

@media (max-width:767px){
  .cmp thead th{position:static}
  .cmp tbody th{width:132px;font-size:9.5px;padding-inline:var(--s3)}
  .cmp th,.cmp td{padding:var(--s3)}
}

/* ═══ 13d. AD LANDING PAGE ═══════════════════════════════════════════
   Standalone: no site nav, nowhere to wander off to. Paid traffic has one
   job on this page, so the only outgoing links are the phone, WhatsApp and
   the journey. It cannot be reached from the platform nav either, which is
   deliberate — the platform pages do the organic work.                  */

.lp{--lpgut:clamp(20px,5vw,64px)}
.lphdr{position:sticky;top:0;z-index:150;background:rgb(255 255 255/.95);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.lphdr__in{max-width:1240px;margin-inline:auto;padding:0 var(--lpgut);
  display:flex;align-items:center;gap:var(--s4);min-height:66px}
.lphdr__in .logo{margin-right:auto}

/* The disclosure sits in the header, not the footer. A single-project ad
   page reads as the developer's own site unless you say otherwise. */
.lpdisc{background:var(--navy);color:rgb(255 255 255/.84);font-size:12.5px;
  line-height:1.5;text-align:center;padding:9px var(--lpgut)}
.lpdisc b{color:var(--gold-l);font-weight:600}

.lphero{position:relative;background:var(--ink);color:var(--inv);overflow:hidden;isolation:isolate}
.lphero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.34;
  transform:scale(1.03)}
.lphero__bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgb(5 14 26/.94) 0%,rgb(5 14 26/.7) 52%,rgb(5 14 26/.42) 100%)}
.lphero__in{position:relative;max-width:1240px;margin-inline:auto;padding:clamp(40px,6vw,84px) var(--lpgut);
  display:grid;grid-template-columns:1fr minmax(0,440px);gap:clamp(32px,5vw,72px);align-items:start}
.lphero__c{max-width:44ch}

/* Facts grid — the same ruled title block the platform uses, inverted */
.lpfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  border-top:1px solid var(--line-i);margin-top:var(--s6)}
.lpfacts div{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line-i)}
.lpfacts dt{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:rgb(255 255 255/.56);margin-bottom:5px}
.lpfacts dd{font-family:var(--mono);font-size:16px;font-weight:500;color:#fff;margin:0;
  font-variant-numeric:tabular-nums}

/* Inline first step — the interaction starts where the visitor already is */
.lpstart{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r2);
  box-shadow:0 24px 60px -28px rgb(5 14 26/.5);overflow:hidden}
.lpstart__h{padding:var(--s5) var(--s5) var(--s4);background:var(--paper);
  border-bottom:1px solid var(--line)}
.lpstart__h .d3{color:var(--fg);margin-bottom:4px}
.lpstart__h p{font-size:13.5px;color:var(--fg-3)}
.lpstart__b{padding:var(--s5);display:grid;gap:var(--s2)}
.lpq{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;
  padding:var(--s4);text-align:left;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r1);cursor:pointer;transition:all var(--t1);color:var(--fg)}
.lpq:hover{border-color:var(--gold);background:var(--gold-veil);transform:translateX(2px)}
.lpq b{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px}
.lpq em{display:block;font-style:normal;font-size:12.5px;color:var(--fg-3);line-height:1.45}
.lpq svg{width:17px;height:17px;color:var(--gold-d);flex:none}
.lpstart__f{padding:var(--s4) var(--s5);background:var(--paper);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}
.lpstart__f span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--fg-3)}
.lpstart__f svg{width:12px;height:12px;color:var(--ok)}

/* Gated floor plans — a contactable lead from people who never start the
   journey. The plans are real, so the gate is honest about what it gives. */
/* Stacked as a grid rather than absolutely positioned, so the box grows to
   whichever layer is taller. Absolute positioning sized the container to the
   blurred plan behind it, which clipped the form and put the submit button
   out of reach. */
.lpgate{display:grid;grid-template-areas:'stack';border:1px solid var(--line);
  border-radius:var(--r2);overflow:hidden;background:var(--paper-2)}
.lpgate__blur{grid-area:stack;filter:blur(9px);opacity:.5;pointer-events:none;
  user-select:none;align-self:stretch;display:grid}
.lpgate__blur svg{height:100%;min-height:340px;object-fit:cover}
.lpgate__seal{grid-area:stack;display:grid;place-items:center;padding:var(--s5);
  background:linear-gradient(180deg,rgb(247 245 242/.62),rgb(247 245 242/.94))}
.lpgate__card{max-width:400px;width:100%;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r2);padding:var(--s5);text-align:center;
  box-shadow:0 20px 50px -24px rgb(5 14 26/.32)}
.lpgate__lock{width:38px;height:38px;margin:0 auto var(--s3);border-radius:50%;
  background:var(--gold-veil);border:1px solid var(--gold-l);display:grid;place-items:center}
.lpgate__lock svg{width:17px;height:17px;color:var(--gold-d)}

.lpsec{max-width:1240px;margin-inline:auto;padding:clamp(44px,6vw,88px) var(--lpgut)}
.lpsec--paper{background:var(--paper)}
.lpwrap--paper{background:var(--paper)}

.lpfoot{background:var(--ink);color:rgb(255 255 255/.66);font-size:13px;line-height:1.6}
.lpfoot__in{max-width:1240px;margin-inline:auto;padding:var(--s7) var(--lpgut)}

@media (max-width:1023px){
  .lphero__in{grid-template-columns:1fr}
  .lphero__c{max-width:none}
  .lpstart{box-shadow:none}
}
@media (max-width:600px){
  .lpdisc{text-align:left}
  .lphdr__in{min-height:60px}
  .lphdr__in .btn .lbl{display:none}
}

/* Landing page — section nav, highlight cards, price table, timeline ── */

.lpnav{position:sticky;top:0;z-index:140;background:rgb(255 255 255/.96);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.lpnav__in{max-width:1240px;margin-inline:auto;padding:0 var(--lpgut);display:flex;gap:2px;
  overflow-x:auto;scrollbar-width:none}
.lpnav__in::-webkit-scrollbar{display:none}
.lpnav a{flex:none;padding:14px 12px;font-size:13px;font-weight:500;color:var(--fg-3);
  border-bottom:2px solid transparent;white-space:nowrap;transition:all var(--t1)}
.lpnav a:hover{color:var(--fg)}
.lpnav a.on{color:var(--navy);border-bottom-color:var(--gold)}

/* Highlights — four facts, each with the figure doing the talking */
.lphl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s4)}
.lphl li{padding:var(--s5);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);display:grid;gap:6px;align-content:start}
.lphl u{text-decoration:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-ink)}
.lphl b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em}
.lphl span{font-size:13.5px;color:var(--fg-2);line-height:1.55}

/* Typology cards */
.lptyp{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.lptyp article{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden;display:flex;flex-direction:column}
.lptyp article.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.lptyp__h{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.lptyp__h b{font-family:var(--display);font-size:20px;font-weight:600}
.lptyp__b{padding:var(--s5);display:grid;gap:var(--s3);flex:1}
.lptyp__b > div{display:flex;justify-content:space-between;gap:var(--s3);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.lptyp__b > div:last-of-type{border-bottom:0;padding-bottom:0}
.lptyp__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3)}
.lptyp__v{font-family:var(--mono);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}

/* Price table — published, not on request. The point is that it exists. */
.lptable{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--card)}
.lptable table{border-collapse:collapse;width:100%}
.lptable th,.lptable td{padding:var(--s4) var(--s5);text-align:left;
  border-bottom:1px solid var(--line);font-size:14.5px}
.lptable thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);font-weight:400;background:var(--paper);
  border-bottom:2px solid var(--navy)}
.lptable tbody tr:last-child th,.lptable tbody tr:last-child td{border-bottom:0}
.lptable tbody tr:hover{background:var(--gold-veil)}
.lptable td.num,.lptable th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.lptable .price{font-size:15.5px}
.lptable__f{padding:var(--s4) var(--s5);background:var(--paper);border-top:1px solid var(--line);
  font-size:12.5px;color:var(--fg-3);line-height:1.55}
@media (max-width:700px){
  .lptable{overflow-x:auto}
  .lptable table{min-width:520px}
}

/* Possession timeline — a real sequence, so it is numbered and dated */
.lptl{display:grid;gap:0;margin-top:var(--s5)}
.lptl li{display:grid;grid-template-columns:74px 1fr;gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.lptl li:last-child{border-bottom:0}
.lptl li.now{background:var(--gold-veil);margin-inline:calc(var(--s4) * -1);
  padding-inline:var(--s4);border-radius:var(--r1)}
.lptl time{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--navy);
  font-variant-numeric:tabular-nums}
.lptl span{font-size:14.5px;color:var(--fg-2)}
.lptl b{color:var(--gold-ink);font-size:11px;font-family:var(--mono);letter-spacing:.1em;
  text-transform:uppercase;margin-left:var(--s3)}

/* Numbered reasons */
.lpnum{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s5)}
.lpnum li{display:grid;gap:var(--s3);align-content:start}
.lpnum em{font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.14em;
  color:var(--gold-d)}
.lpnum b{font-size:16px;font-weight:600;line-height:1.35}
.lpnum span{font-size:14px;color:var(--fg-2);line-height:1.6}

/* Distances — figures right-aligned so the column scans */
.lpdist{display:grid;gap:0}
.lpdist li{display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline;
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.lpdist li:last-child{border-bottom:0}
.lpdist span{font-size:14.5px}
.lpdist em{font-family:var(--mono);font-style:normal;font-size:14px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap}

/* Amenities — six, not sixty */
.lpam{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:var(--s3)}
.lpam li{display:grid;gap:3px;padding:var(--s4);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r1)}
.lpam b{font-size:14.5px;font-weight:600}
.lpam span{font-size:12.5px;color:var(--fg-3)}

/* Rate-growth figure block */
.lprate{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:center;
  padding:var(--s5);background:var(--navy);color:rgb(255 255 255/.84);border-radius:var(--r2)}
.lprate strong{display:block;font-family:var(--mono);font-size:clamp(28px,3vw,40px);
  font-weight:500;color:var(--gold-l);line-height:1;font-variant-numeric:tabular-nums}
.lprate u{text-decoration:none;display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:rgb(255 255 255/.56);margin-top:8px}
.lprate p{font-size:14px;line-height:1.6}
.lprate b{color:#fff}
@media (max-width:600px){ .lprate{grid-template-columns:1fr} }

/* Amenity photos and the render gallery */
.lpam li{padding:0;overflow:hidden}
.lpam__img{display:block;aspect-ratio:16/10;background-size:cover;background-position:center;
  background-color:var(--paper-2)}
.lpam b{padding:var(--s4) var(--s4) 0}
.lpam li > span:last-child{padding:0 var(--s4) var(--s4)}
.lpgal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.lpgal__i{margin:0;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;
  background:var(--card)}
.lpgal__i img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.lpgal__i figcaption{padding:var(--s3) var(--s4);font-size:13px;color:var(--fg-3);
  border-top:1px solid var(--line)}

/* Journey density — a six-step form in one column runs to several screens,
   which reads as work. Two columns halve it above 640px. */
.jr{max-width:860px}
.jr__opts{grid-template-columns:1fr}
@media (min-width:640px){
  .jr__opts{grid-template-columns:1fr 1fr}
  .jr__opts .jr__opt:only-child{grid-column:1/-1}
}
.jr__opt{padding:var(--s4);gap:var(--s3);align-items:start}
.jr__opt b{font-size:14.5px;margin-bottom:2px}
.jr__opt em{font-size:12.5px;line-height:1.45}
.jr__opt i{width:18px;height:18px;margin-top:1px}
.jr__q{font-size:clamp(20px,1.15rem + .7vw,26px);margin-bottom:6px}
.jr__hint{font-size:13.5px;margin-bottom:var(--s4)}
.jr__bar{gap:0;margin-bottom:var(--s5)}
.jr__st span{display:flex;align-items:center;gap:5px;font-size:10px}
.jr__st span i{font-style:normal;font-family:var(--mono);font-size:9.5px;
  width:15px;height:15px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--line-2);color:var(--fg-3);letter-spacing:0}
.jr__st.now span i{background:var(--gold-d);color:#fff}
.jr__st.done span i{background:var(--ok);color:#fff}
/* Match cards stay full width — they carry a thumbnail and three figures. */
.jr__opts #jr-match,#jr-match{grid-template-columns:1fr}

/* Hero CTA card — the journey lives in its own section now, so the hero
   only has to start it. */
.lpstart--mini .lpstart__b{gap:var(--s3)}

/* The cold shape has eight cells, not six, so labels have to drop earlier
   than the option text does. The numbered dot still carries position. */
@media (max-width:820px){
  .jr__st span{font-size:0;justify-content:center}
  .jr__st span i{font-size:10px;width:19px;height:19px}
}
@media (max-width:520px){
  .jr__opt em{display:none}
  .jr__opt b{font-size:15px;margin:0}
}

/* ═══ 14. FOOTER & LEGAL ═════════════════════════════════════════════ */
.ftr{background:var(--navy);color:#fff}
.ftr a:not(.btn){color:rgb(255 255 255/.80);transition:color var(--t1)}
.ftr a:not(.btn):hover{color:var(--gold-l)}
.ftr .btn-gold,.ftr .btn-gold:hover,.sec--navy .btn-gold,.sec--ink .btn-gold{color:#1E1503}
.ftr .btn-inv,.ftr .btn-inv:hover{color:#fff}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:clamp(28px,2.4vw,52px)}
.ftr h3{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:var(--s4)}
.ftr__menu li{font-size:14px}
.ftr__menu a{display:inline-flex;align-items:center;gap:9px;min-height:32px;
  max-width:100%;overflow-wrap:anywhere}
.ftr__menu svg{width:15px;height:15px;flex:none;color:var(--gold-l);opacity:.7;transition:opacity var(--t1)}
.ftr__menu a:hover svg{opacity:1}
.ftr__brand{display:flex;flex-direction:column;gap:var(--s4)}
.ftr__brand .logo__n{color:#fff}
.ftr__brand .logo__s{color:var(--gold-l)}
.reggrid{display:grid;grid-template-columns:repeat(3,auto);gap:var(--s4) var(--s7);
  padding-block:var(--s5);border-top:1px solid var(--line-i)}
.reggrid dt{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgb(255 255 255/.48)}
.reggrid dd{margin:5px 0 0;font-family:var(--mono);font-size:12px;color:rgb(255 255 255/.8);
  line-height:1.5;overflow-wrap:anywhere}
.reggrid .addr{font-family:var(--font);font-size:12.5px;max-width:34ch}
.ftr__legal{border-top:1px solid var(--line-i);padding-block:var(--s5);display:flex;align-items:flex-start;
  justify-content:space-between;gap:var(--s4) var(--s6);flex-wrap:wrap}
.ftr__legal p{font-size:12.5px;color:rgb(255 255 255/.7)}
.ftr__reg{flex:1 1 100%;font-size:11.5px;line-height:1.7;color:rgb(255 255 255/.5)}
.ftr__cities{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.ftr__cities span{font-size:12.5px;color:rgb(255 255 255/.55)}
.ftr__cities em{font-style:normal;font-size:12px;padding:5px 11px;border-radius:999px;
  border:1px dashed rgb(255 255 255/.24);color:rgb(255 255 255/.5)}

/* Verification / accuracy note — used wherever source data is thin */
.flagnote{display:flex;gap:var(--s3);padding:var(--s4);border-radius:var(--r2);
  background:var(--warn-veil);border:1px solid rgb(138 90 0/.28);font-size:12.5px;line-height:1.6;color:#5E3D00}
.flagnote svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--warn)}
.flagnote b{font-weight:600}
.sec--navy .flagnote,.sec--ink .flagnote{background:rgb(227 197 131/.12);border-color:rgb(227 197 131/.34);color:rgb(255 255 255/.82)}
.sec--navy .flagnote svg,.sec--ink .flagnote svg{color:var(--gold-l)}

/* ═══ 15. OVERLAYS, STICKY, MOTION ═══════════════════════════════════ */
.modal{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;
  padding:var(--s5) var(--s4);background:rgb(5 14 26/.80);backdrop-filter:blur(7px);overflow-y:auto}
.modal.on{display:flex;animation:mfade var(--t2) var(--ez)}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal__x{position:fixed;inset:0;cursor:default;border:0;background:none}
.modal__c{position:relative;z-index:2;width:100%;max-width:940px;background:var(--card);
  border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh3);display:grid;
  grid-template-columns:300px 1fr;margin-block:auto;animation:mup var(--t2) var(--ez)}
.modal__c--doc,.modal__c--one{max-width:720px;grid-template-columns:1fr}
@keyframes mup{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
.modal__aside{background:linear-gradient(165deg,var(--navy),var(--navy-3));color:#fff;
  padding:var(--s7) var(--s6);display:flex;flex-direction:column;gap:var(--s6)}
.promise{display:flex;flex-direction:column;gap:var(--s5)}
.promise li{display:flex;gap:var(--s4);align-items:flex-start}
.promise .pi{width:38px;height:38px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgb(227 197 131/.16);color:var(--gold-l)}
.promise .pi svg{width:19px;height:19px}
.promise b{display:block;font-size:14.5px;font-weight:600}
.promise span{font-size:12.5px;color:rgb(255 255 255/.74);line-height:1.55}
.modal__main{padding:var(--s6) var(--s6) var(--s5);position:relative}
.modal__close{position:absolute;top:var(--s3);right:var(--s3);width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--paper-2);color:var(--fg-2);z-index:3;
  transition:background-color var(--t1),transform var(--t1)}
.modal__close:hover{background:var(--line);transform:rotate(90deg)}
.modal__close svg{width:18px;height:18px}
.doc{max-height:min(76vh,720px);overflow-y:auto;padding:var(--s6)}
.doc h3{font-family:var(--display);font-size:26px;font-weight:600;margin-bottom:var(--s4)}
.doc h4{font-size:14px;font-weight:600;margin:var(--s5) 0 var(--s2);color:var(--navy)}
.doc p,.doc li{font-size:14px;line-height:1.7;color:var(--fg-2);margin-bottom:var(--s3)}
.doc li{padding-left:16px;position:relative}
.doc li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:1.5px;background:var(--gold)}

/* Full-screen filter sheet — mobile */
.sheet{position:fixed;inset:0;z-index:310;display:none;background:var(--paper);flex-direction:column}
.sheet.on{display:flex;animation:slideup var(--t2) var(--ez)}
@keyframes slideup{from{transform:translateY(4%);opacity:.4}to{transform:none;opacity:1}}
.sheet__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--gut);background:var(--card);border-bottom:1px solid var(--line);flex:none}
.sheet__b{flex:1;overflow-y:auto;padding:var(--s5) var(--gut)}
.sheet__f{flex:none;display:flex;gap:var(--s3);padding:var(--s4) var(--gut);background:var(--card);
  border-top:1px solid var(--line);padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
.sheet__f .btn{flex:1}
.sheet__grp{padding-block:var(--s5);border-bottom:1px solid var(--line)}
.sheet__grp:last-child{border-bottom:0}
.sheet__grp .tb__k{margin-bottom:var(--s3)}

/* Slide-in mobile menu */
.mmenu{position:fixed;inset:0;z-index:320;display:none}
.mmenu.on{display:block}
.mmenu__x{position:absolute;inset:0;background:rgb(5 14 26/.72);backdrop-filter:blur(5px);border:0;
  animation:mfade var(--t2) var(--ez)}
.mmenu__c{position:absolute;inset-block:0;right:0;width:min(340px,86vw);background:var(--navy);
  color:#fff;display:flex;flex-direction:column;box-shadow:-24px 0 60px rgb(5 14 26/.5);
  animation:slidein var(--t2) var(--ez)}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
.mmenu__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5);border-bottom:1px solid var(--line-i)}
.mmenu__h span{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-l)}
.mmenu__close{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgb(255 255 255/.08);color:#fff}
.mmenu__close svg{width:18px;height:18px}
.mmenu__l{flex:1;overflow-y:auto;padding:var(--s3) var(--s5) var(--s5)}
.mmenu__l a{display:flex;align-items:center;gap:var(--s4);min-height:52px;
  border-bottom:1px solid rgb(255 255 255/.09);font-size:16px;font-weight:500;color:#fff}
.mmenu__l li:last-child a{border-bottom:0}
.mmenu__l svg{width:17px;height:17px;flex:none;color:var(--gold-l);opacity:.72}
.mmenu__f{padding:var(--s5);border-top:1px solid var(--line-i);display:grid;gap:var(--s3);
  padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom))}

/* Compare tray — appears only once two items are selected */
.tray{position:fixed;inset-inline:0;bottom:0;z-index:210;background:var(--ink);color:#fff;
  border-top:1px solid rgb(227 197 131/.32);transform:translateY(110%);visibility:hidden;
  transition:transform var(--t2) var(--ez),visibility var(--t2);
  padding-bottom:env(safe-area-inset-bottom)}
.tray.on{transform:none;visibility:visible}
.tray__in{display:flex;align-items:center;gap:var(--s4);padding-block:var(--s3);flex-wrap:wrap}
.tray__items{display:flex;gap:var(--s2);flex:1;flex-wrap:wrap;min-width:0}
.tray__i{display:inline-flex;align-items:center;gap:var(--s2);padding:7px 8px 7px 12px;border-radius:var(--r1);
  background:rgb(255 255 255/.08);border:1px solid rgb(255 255 255/.18);font-size:13px;font-weight:500}
.tray__i button{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgb(255 255 255/.12);color:#fff}
.tray__i button svg{width:12px;height:12px}
.tray__i button:hover{background:var(--gold);color:#1E1503}

/* Sticky mobile CTA + desktop WhatsApp float */
.scta{position:fixed;inset-inline:0;bottom:0;z-index:200;display:none;background:var(--navy);
  box-shadow:0 -10px 30px rgb(5 14 26/.30);padding-bottom:env(safe-area-inset-bottom)}
.scta ul{display:grid;grid-template-columns:repeat(3,1fr)}
.scta a{display:flex;align-items:center;justify-content:center;gap:8px;height:62px;
  font-size:14px;font-weight:600;color:#fff}
.scta svg{width:19px;height:19px;flex:none}
.scta .call svg{color:var(--gold-l)}
.scta .wa{background:var(--wa);color:var(--wa-ink)}
.scta .q{color:var(--gold-l)}
.wafloat{position:fixed;right:clamp(18px,2vw,32px);bottom:clamp(18px,2vw,32px);z-index:190;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--wa);
  color:var(--wa-ink);box-shadow:0 10px 28px rgb(37 211 102/.40);transition:transform var(--t2) var(--ez)}
.wafloat:hover{transform:scale(1.07)}
.wafloat svg{width:29px;height:29px}
.toast{position:fixed;left:50%;bottom:calc(var(--s7) + env(safe-area-inset-bottom));transform:translate(-50%,140%);
  z-index:340;padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:13.5px;
  font-weight:500;box-shadow:var(--sh3);transition:transform var(--t2) var(--ez);white-space:nowrap;max-width:92vw}
.toast.on{transform:translate(-50%,0)}

@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:fu .7s var(--ez) both}
.r1{animation-delay:.05s}.r2{animation-delay:.14s}.r3{animation-delay:.23s}.r4{animation-delay:.32s}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════ */
@media (max-width:1400px){
  .results{grid-template-columns:minmax(0,1fr) 38%}
}
@media (max-width:1200px){
  .nav{display:none}
  .burger{display:inline-flex}
  .hero__in{grid-template-columns:1fr;gap:var(--s7)}
  .hero__copy{max-width:none}
  .console{max-width:600px}
  .ftr__grid{grid-template-columns:1.5fr 1fr 1fr;row-gap:var(--s7)}
  .journey{grid-template-columns:repeat(4,1fr)}
  .journey li::after{display:none}
  .toolgrid{grid-template-columns:repeat(3,1fr)}
  .localgrid{grid-template-columns:repeat(2,1fr)}
  .results{grid-template-columns:1fr}
  .results__map{display:none}
  .results__list{padding-right:0}
  .svc{grid-template-columns:repeat(2,1fr)}
  .amn{grid-template-columns:repeat(3,1fr)}
}
/* The header row is the widest thing on the page — it gets a wider
   container and tighter gutters than the content grid, so the nav
   never has to scroll on desktop. */
@media (min-width:1200px){
  .hdr .wrap{max-width:1560px;padding-inline:clamp(20px,2vw,32px)}
}
@media (min-width:1200px) and (max-width:1420px){
  .nav a{font-size:12.5px}
  .nav{gap:8px}
  .hdr__act .btn{padding-inline:var(--s4)}
  .logo__s{display:none}
}
/* Header collapse — the row must always fit the burger, so the secondary
   CTA and the phone-number label are dropped before anything essential. */
@media (max-width:900px){
  .hdr__act .lbl{display:none}
  .hdr__act .btn-navy{display:none}
  .hdr__act .btn{padding-inline:var(--s4)}
  .hdr__in{gap:var(--s3)}
}
@media (max-width:430px){
  :root{--hdr:64px}
  .logo__s{display:none}
  .logo{gap:var(--s2)}
  .logo__n{font-size:17px}
  .logo__m{width:34px;height:34px}
  .citysel{padding:8px 9px;gap:4px}
  .hdr__in{gap:var(--s2);min-height:64px}
  .hdr__act{gap:6px}
}
/* 320px handsets — the city selector collapses to its pin, and the
   wordmark drops a step. Logo, city, call and menu all stay reachable. */
@media (max-width:360px){
  .logo__n{font-size:15px;letter-spacing:-.2px}
  .logo__m{width:30px;height:30px}
  .citysel .lbl,.citysel svg:last-of-type{display:none}
  .citysel{padding:8px}
  .hdr__act .btn-out{padding-inline:10px}
  .burger{width:40px;height:40px}
  .wrap{padding-inline:16px}
}
@media (max-width:1023px){
  .scta{display:block}
  .wafloat{display:none}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .tray{bottom:calc(62px + env(safe-area-inset-bottom))}
  .split,.sp75,.sp57,.calc,.g3,.g4,.g5{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .dtbl{display:none}
  .modal__c{grid-template-columns:1fr}
  .modal__aside{order:2;padding:var(--s6)}
  .modal__main{padding:var(--s6) var(--s5) var(--s5)}
  .doc{padding:var(--s5)}
  .sticky-aside{position:static}
  .pgallery{grid-template-columns:1fr}
  .pgallery__side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .pgallery__main .frame{min-height:260px}
  .verdict__led{grid-template-columns:1fr}
  .verdict__col+.verdict__col{border-left:0;border-top:1px solid var(--line)}
  .statbar{grid-template-columns:repeat(2,1fr);gap:var(--s5)}
}
@media (min-width:1024px){.mcards{display:none}}
@media (max-width:767px){
  .g2,.g3,.g4,.svc,.tb__g,.tb__g--4,.toolgrid,.localgrid,.amn{grid-template-columns:1fr}
  .g4,.amn,.toolgrid{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:1fr}
  .journey{grid-template-columns:repeat(2,1fr)}
  .rcard{grid-template-columns:1fr}
  .rcard .card__media,.rcard .frame{min-height:0}
  .rcard .frame{aspect-ratio:16/10}
  .console__grid{grid-template-columns:1fr}
  .cfield{border-right:0;border-bottom:1px solid var(--line)}
  .cfield--full{border-top:0}
  .console__b{padding:var(--s5) var(--s4) var(--s5)}
  .console__tabs button{font-size:12.5px;padding-inline:var(--s2)}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .ftr__grid>div:first-child{grid-column:span 2}
  .reggrid{grid-template-columns:1fr}
  .logo__n{font-size:17px}
  .logo__m{width:34px;height:34px}
  .citysel{padding:8px 10px}
  .citysel .lbl{display:none}
  .ftr__legal{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .head{margin-bottom:var(--s6)}
  .modal{padding:0}
  .modal__c{border-radius:0;min-height:100%}
  .pbar{gap:var(--s5);padding:var(--s5)}
  .pbar__d{display:none}
  .searchbar__in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .searchbar__in::-webkit-scrollbar{display:none}
  .sfield{min-width:180px}
  .calc__out{padding:var(--s5)}
  .verdict__hd,.verdict__col,.verdict__ft{padding:var(--s5) var(--s4)}
  .tl .y{width:92px}
}
@media (max-width:359px){
  .logo__s{display:none}
  .logo__n{font-size:16px}
}
@media print{.hdr,.scta,.wafloat,.ann,.modal,.tray,.subnav,.searchbar{display:none!important}}