/* Gurgaon luxury shortlist — a dark catalogue, read like a private register.
   One typeface (Satoshi), bone on graphite, champagne kept for hairlines and
   labels only. The images carry the light; the ivory form card carries the eye. */

@font-face{
  font-family:'Satoshi';
  src:url('/static/fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight:300 900;font-style:normal;font-display:swap;
}

:root{
  /* warm graphite, not blue-black — it reads closer to stone than to screen */
  --ink:#0C0B0A; --ink-2:#131210; --ink-3:#1A1815; --ink-4:#222019;
  --bone:#F1ECE3; --bone-2:#E4DED2;
  --muted:#9C958A; --muted-2:#756E64;
  --champ:#D3B682; --champ-d:#A98A50;
  --line:rgba(241,236,227,.12); --line-2:rgba(241,236,227,.07);
  --line-dk:rgba(12,11,10,.14); --line-dk-2:rgba(12,11,10,.08);
  --ok:#77B08B; --ok-dk:#2E6A46; --warn:#D6A45C;
  --sans:'Satoshi',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --shell:1220px; --gut:clamp(18px,4.6vw,46px); --bar:70px;
  --ease:cubic-bezier(.22,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar) + 10px);overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-size:16px;line-height:1.62;font-weight:400;
  font-feature-settings:'tnum' 1;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.06;letter-spacing:-.03em;font-weight:400;color:var(--bone)}
p{margin:0 0 1em}
::selection{background:var(--champ);color:var(--ink)}
:focus-visible{outline:2px solid var(--champ);outline-offset:3px;border-radius:3px}
.shell{width:min(100% - (var(--gut) * 2),var(--shell));margin-inline:auto}
.num{font-variant-numeric:tabular-nums lining-nums}

/* a hairline + small caps label — the one structural device used throughout */
.eyebrow{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--champ)}
.eyebrow::before{content:"";width:30px;height:1px;margin-top:.62em;background:var(--champ);
  opacity:.75;flex:none}

/* ---------- header ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:70;height:var(--bar);display:flex;align-items:center;
  background:rgba(12,11,10,.72);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line-2)}
.bar__row{display:flex;align-items:center;gap:20px;
  width:min(100% - (var(--gut) * 2),var(--shell));margin-inline:auto}
/* "The Rule" — the wordmark over a champagne hairline over tracked capitals, which is
   the same device every section of the page opens with. Live text rather than an image:
   Satoshi is already loaded, so it stays crisp at any size and reflows on a phone. */
.brand{display:inline-grid;justify-items:stretch;gap:6px;text-decoration:none;
  color:var(--bone);flex:none;font-size:1.1rem}
/* Both lines are set to the same width. The sizes are locked to each other in em and
   GURGAON's tracking is solved from Satoshi's own advance widths at weight 700, so the
   two stay flush whenever .brand's font-size changes — nothing to re-tune by hand.
   Each line then pulls back the trailing gap its own tracking leaves after the last letter. */
.brand b{font-size:1em;font-weight:700;letter-spacing:.1155em;text-transform:uppercase;
  line-height:1;white-space:nowrap;margin-right:-.1155em}
.brand span{font-size:.4545em;font-weight:700;letter-spacing:.25em;text-transform:uppercase;
  color:var(--champ);line-height:1;white-space:nowrap;
  border-top:1px solid var(--champ);padding-top:6px;margin-right:-.25em}
.foot .brand span{color:var(--champ)}
.bar__act{display:flex;align-items:center;gap:16px;margin-left:auto;flex:none}
.bar__tel{display:inline-flex;align-items:center;gap:8px;color:var(--bone);text-decoration:none;
  font-size:.9rem;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.bar__tel svg{color:var(--champ);flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.04em;
  padding:14px 24px;border:0;border-radius:2px;text-decoration:none;white-space:nowrap;
  transition:background .3s,color .3s,border-color .3s,transform .2s}
.btn:active{transform:translateY(1px)}
/* bone on graphite is the primary — a gold button is the cliché, gold hairlines are not */
.btn--brass{background:var(--bone);color:var(--ink)}
.btn--brass:hover{background:#fff}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{background:var(--ink-3)}
.btn--line{background:transparent;color:var(--ink);border:1px solid var(--line-dk)}
.btn--line:hover{border-color:var(--ink);background:rgba(12,11,10,.05)}
.btn--ghost-l{background:transparent;color:var(--bone);border:1px solid var(--line)}
.btn--ghost-l:hover{border-color:var(--champ);color:var(--champ)}
.btn--wide{width:100%}
.btn--sm{padding:11px 16px;font-size:.74rem}

/* ---------- hero: one cinematic frame, a stat rail along its foot ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(560px,84svh,840px);display:grid;grid-template-rows:1fr auto;
  padding-top:var(--bar)}
.hero > picture{position:absolute;inset:0;z-index:-2;display:block}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(12,11,10,.93) 0%,rgba(12,11,10,.78) 42%,rgba(12,11,10,.34) 74%,rgba(12,11,10,.58) 100%),
    linear-gradient(180deg,rgba(12,11,10,.8),rgba(12,11,10,0) 34%,rgba(12,11,10,.72))}
.hero__in{align-self:center;padding:clamp(38px,5.5vw,76px) 0 clamp(34px,4.4vw,60px)}
.hero h1{font-size:clamp(2.45rem,6.1vw,4.6rem);line-height:1.0;font-weight:400;
  letter-spacing:-.045em;max-width:16ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--champ);white-space:nowrap}
.hero__sub{margin:22px 0 0;max-width:52ch;font-size:clamp(1rem,1.25vw,1.13rem);
  color:var(--bone-2);opacity:.84;line-height:1.55}
.hero__act{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(26px,3vw,38px)}
.hero__act .btn{padding:16px 28px}
.hero__trust{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:26px}
.hero__trust span{font-size:.66rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);padding:5px 0}
.hero__trust span:not(:last-child)::after{content:"·";margin-left:24px;color:var(--champ)}

/* the rail turns the page's own data into the hero's proof */
.hero__rail{border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(12,11,10,.1),rgba(12,11,10,.62));
  backdrop-filter:blur(2px)}
.hero__rail-in{display:grid;grid-template-columns:repeat(4,1fr)}
.hero__st{padding:clamp(18px,2vw,26px) 0 clamp(20px,2.2vw,30px);padding-left:clamp(16px,2vw,28px);
  border-left:1px solid var(--line-2)}
.hero__st:first-child{border-left:0;padding-left:0}
.hero__st b{display:block;font-size:clamp(1.25rem,2.3vw,1.95rem);font-weight:500;
  letter-spacing:-.04em;color:var(--bone);line-height:1.1}
.hero__st span{display:block;margin-top:8px;font-size:.6rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted-2)}
.hero__credit{margin:0 0 10px;font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(241,236,227,.32)}
.hero__credit .shell{display:block;text-align:right}

/* ---------- form innards — now only the popup uses them ---------- */
.qual__h{margin:0;font-size:1.14rem;font-weight:600;color:#17150F;letter-spacing:-.025em;line-height:1.2}
.qual__sub{margin:7px 0 20px;font-size:.85rem;color:#6A6459}
.qual__step{margin-bottom:17px}
.qual__lab{display:block;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#8A8377;margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line-dk);background:transparent;border-radius:2px;cursor:pointer;
  padding:9px 13px;font-family:var(--sans);font-size:.8rem;font-weight:500;color:#37342D;
  transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:#57524A}
.chip.is-on{background:#17150F;border-color:#17150F;color:var(--bone)}
.chip.is-bad{border-color:#B3271E}
.field{margin-bottom:11px}
.field input{width:100%;font-family:var(--sans);font-size:16px;color:#17150F;
  background:rgba(12,11,10,.045);border:1px solid var(--line-dk-2);border-radius:2px;
  padding:13px 14px;transition:border-color .25s,background .25s}
.field input::placeholder{color:#8A8377}
.field input:focus{outline:0;border-color:var(--champ-d);background:#fff}
.field input.is-bad{border-color:#B3271E;background:#FDF1EF}

/* dialling code sits inside the number field rather than stealing a row */
.field--tel{display:flex;align-items:stretch;gap:0;
  border:1px solid var(--line-dk-2);border-radius:2px;background:rgba(12,11,10,.045);
  transition:border-color .25s,background .25s}
.field--tel:focus-within{border-color:var(--champ-d);background:#fff}
.field--tel input[type="tel"]{flex:1;min-width:0;border:0;background:transparent;border-radius:0}

/* 248 countries, so the picker searches instead of scrolling */
.cc{position:relative;flex:none;display:flex}
.cc__btn{display:flex;align-items:center;gap:6px;cursor:pointer;
  border:0;border-right:1px solid var(--line-dk-2);background:transparent;
  font-family:var(--sans);font-size:15px;font-weight:500;color:#17150F;padding:13px 11px}
.cc__btn:hover{background:rgba(12,11,10,.04)}
.cc__flag{font-size:1.05em;line-height:1}
.cc__code{font-variant-numeric:tabular-nums}
.cc__btn svg{width:9px;height:6px;fill:none;stroke:#8A8377;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.cc__pop{position:absolute;z-index:20;left:0;top:calc(100% + 6px);width:270px;
  background:var(--bone);border:1px solid rgba(12,11,10,.16);border-radius:3px;
  box-shadow:0 24px 54px -26px rgba(0,0,0,.6);padding:7px}
.cc__pop[hidden]{display:none}
.cc__q{width:100%;font-family:var(--sans);font-size:14px;color:#17150F;
  background:rgba(12,11,10,.05);border:1px solid var(--line-dk-2);border-radius:2px;
  padding:9px 10px;outline:0}
.cc__q:focus{border-color:var(--champ-d);background:#fff}
.cc__q::-webkit-search-cancel-button{display:none}
.cc__list{list-style:none;margin:6px 0 0;padding:0;max-height:230px;overflow-y:auto}
.cc__list li{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
  padding:8px 9px;border-radius:2px;cursor:pointer;font-size:.86rem;color:#37342D}
.cc__list li.is-on,.cc__list li:hover{background:rgba(169,138,80,.16)}
.cc__f{font-size:1.05em;line-height:1}
.cc__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc__d{color:#7A7469;font-variant-numeric:tabular-nums;font-size:.82rem}
.cc__none{margin:8px 4px 4px;font-size:.82rem;color:#7A7469}
.cc__none[hidden]{display:none}
.field--tel input:focus{background:transparent}
.field--tel:has(input.is-bad){border-color:#B3271E;background:#FDF1EF}
.field--tel input.is-bad{background:transparent}
.consent{margin:13px 0 0;font-size:.71rem;line-height:1.55;color:#7A7469}
.consent a{color:var(--champ-d);text-underline-offset:2px}
.done{text-align:center;padding:14px 0}
.done .tick{width:44px;height:44px;border-radius:50%;background:var(--ok-dk);margin:0 auto 15px;
  display:grid;place-items:center}
.done .tick::after{content:"";width:15px;height:8px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg) translate(2px,-3px)}
.done h3{font-size:1.14rem;font-weight:600;margin-bottom:8px;color:#17150F}
.done p{font-size:.89rem;color:#6A6459}

/* ---------- micro-market tiles ---------- */
.mkt{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.3vw,16px)}
.mkt__t{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:3px;
  aspect-ratio:3/4;background:var(--ink-3)}
.mkt__t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);filter:saturate(.92)}
.mkt__t:hover img{transform:scale(1.06)}
.mkt__t::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,11,10,.1) 28%,rgba(12,11,10,.86))}
.mkt__c{position:absolute;inset:auto 0 0;z-index:2;padding:20px 18px}
.mkt__n{display:block;font-size:1.16rem;font-weight:500;letter-spacing:-.025em;line-height:1.16}
.mkt__k{display:block;margin:7px 0 0;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--champ)}
.mkt__t:hover .mkt__k{color:var(--bone)}

/* ---------- section furniture ---------- */
.sec{padding:clamp(54px,7vw,104px) 0}
.sec--paper{background:var(--ink)}
.sec--card{background:var(--ink-2)}
.sec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px;margin-bottom:clamp(24px,2.8vw,38px)}
.sec h2{font-size:clamp(1.8rem,3.7vw,2.9rem);letter-spacing:-.035em;font-weight:400;max-width:19ch;
  text-wrap:balance}
.sec h2 em{font-style:normal;color:var(--champ)}
.sec__note{font-size:.87rem;color:var(--muted);max-width:50ch;margin:12px 0 0}
.sec__note b{color:var(--bone);font-weight:600}

/* ---------- full-bleed image bands ---------- */
.band{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(320px,46vw,520px);display:grid;align-items:center}
.band img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(12,11,10,.92),rgba(12,11,10,.58) 52%,rgba(12,11,10,.34))}
.band__in{padding:clamp(40px,5vw,70px) 0}
.band__q{margin:0;max-width:22ch;font-size:clamp(1.55rem,3.3vw,2.6rem);line-height:1.13;
  letter-spacing:-.035em;color:var(--bone)}
.band__q em{font-style:normal;color:var(--champ)}
.band__p{margin:18px 0 0;max-width:44ch;font-size:.95rem;color:var(--bone-2);opacity:.82}
.credit{position:absolute;right:var(--gut);bottom:12px;margin:0;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(241,236,227,.32)}

/* ---------- search — instant, and entirely on the page already ---------- */
.srch{position:relative;max-width:460px;margin-bottom:6px}
.srch__box{display:flex;align-items:center;gap:10px;padding:0 12px;
  border:1px solid var(--line);border-radius:2px;background:rgba(241,236,227,.035);
  transition:border-color .25s,background .25s}
.srch__box:focus-within{border-color:var(--champ);background:rgba(241,236,227,.06)}
.srch__box svg{width:16px;height:16px;color:var(--muted-2);flex:none}
.srch__box:focus-within svg{color:var(--champ)}
.srch input{flex:1;min-width:0;background:transparent;border:0;outline:0;
  font-family:var(--sans);font-size:15px;color:var(--bone);padding:13px 0}
.srch input::placeholder{color:var(--muted-2)}
.srch input::-webkit-search-cancel-button{display:none}
.srch__x{background:transparent;border:0;cursor:pointer;color:var(--muted-2);
  font-size:20px;line-height:1;padding:0 2px}
.srch__x:hover{color:var(--bone)}

.srch__list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);
  list-style:none;margin:0;padding:5px;max-height:330px;overflow:auto;
  background:var(--ink-3);border:1px solid var(--line);border-radius:3px;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95)}
.srch__list[hidden]{display:none}
.srch__list li{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;
  padding:10px 12px;border-radius:2px;cursor:pointer}
.srch__list li.is-on,.srch__list li:hover{background:rgba(211,182,130,.12)}
/* placed explicitly — auto-placement flips the price and the name once
   the meta line claims the full row */
.srch__n{grid-column:1;grid-row:1;font-size:.95rem;font-weight:500;color:var(--bone);
  letter-spacing:-.02em}
.srch__p{grid-column:2;grid-row:1;font-size:.82rem;font-weight:600;color:var(--champ);
  white-space:nowrap;font-variant-numeric:tabular-nums;justify-self:end}
.srch__m{grid-column:1/-1;grid-row:2;font-size:.75rem;color:var(--muted-2)}
.srch__none{margin:10px 0 0;font-size:.85rem;color:var(--muted)}
.srch__none[hidden]{display:none}
.lnk{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--champ);
  text-decoration:underline;text-underline-offset:3px}

/* the card the search landed on, flagged just long enough to find it */
.pcard.is-found{border-color:var(--champ);box-shadow:0 0 0 1px var(--champ),
  0 24px 54px -26px rgba(211,182,130,.5)}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:20px;padding:18px 0 22px;border-bottom:1px solid var(--line)}
.filters__g{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filters__row{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.filters__lab{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2)}
.filters .chip{padding:8px 13px;font-size:.77rem;border-radius:2px;
  border-color:var(--line);color:var(--muted)}
.filters .chip:hover{border-color:var(--muted);color:var(--bone)}
.filters .chip.is-on{background:var(--bone);border-color:var(--bone);color:var(--ink)}

/* ---------- property cards ---------- */
.tablewrap{margin-top:26px;position:relative}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7vw,22px)}
.pcard{display:flex;flex-direction:column;background:var(--ink-3);
  border:1px solid var(--line-2);border-radius:3px;overflow:hidden;
  transition:border-color .35s,transform .35s var(--ease),background .35s}
.pcard:hover{border-color:rgba(211,182,130,.4);transform:translateY(-3px);background:var(--ink-4)}
.pcard__pic{position:relative;aspect-ratio:4/3;background:var(--ink-4);overflow:hidden}
.pcard__pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pcard:hover .pcard__pic img{transform:scale(1.05)}
.pcard__pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,11,10,.22) 0 22%,rgba(12,11,10,0) 46%,rgba(12,11,10,.9))}
.pcard__noimg{width:100%;height:100%;
  background:repeating-linear-gradient(135deg,var(--ink-3),var(--ink-3) 9px,var(--ink-4) 9px,var(--ink-4) 18px)}
/* the name sits on the render, catalogue-style, not stacked under it */
.pcard__cap{position:absolute;inset:auto 0 0;z-index:2;padding:16px 16px 14px}
.pcard__name{font-size:1.22rem;font-weight:500;line-height:1.14;letter-spacing:-.03em;
  text-shadow:0 1px 18px rgba(12,11,10,.55)}
.pcard__by{margin:5px 0 0;font-size:.76rem;font-weight:500;letter-spacing:.02em;
  color:rgba(241,236,227,.72)}

.st{position:absolute;left:13px;top:13px;z-index:2;font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:2px;
  background:rgba(12,11,10,.58);backdrop-filter:blur(6px);border:1px solid rgba(241,236,227,.22)}
.st--new{color:var(--champ);border-color:rgba(211,182,130,.5)}
.st--uc{color:var(--bone-2)}
.st--ready{color:var(--ok);border-color:rgba(119,176,139,.45)}

/* a promoted slot, said out loud rather than passed off as ranking */
.feat{position:absolute;right:13px;top:13px;z-index:2;font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:2px;
  background:var(--champ);color:var(--ink)}
.pcard--feat{border-color:rgba(211,182,130,.45)}
.pcard--feat:hover{border-color:var(--champ)}

/* tick several, ask once — a lead naming four projects is a different lead */
.pick{position:absolute;right:11px;bottom:11px;z-index:3;width:36px;height:36px;
  display:grid;place-items:center;cursor:pointer;border-radius:50%;
  background:rgba(12,11,10,.6);backdrop-filter:blur(6px);
  border:1px solid rgba(241,236,227,.28);color:var(--bone);
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.pick svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;transition:transform .3s var(--ease)}
.pick:hover{border-color:var(--champ);color:var(--champ)}
.pick.is-on{background:var(--champ);border-color:var(--champ);color:var(--ink)}
.pick.is-on svg{transform:rotate(45deg)}

/* the tray is a response to their own tick, so it is absent until there is one */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:66;
  background:rgba(12,11,10,.94);backdrop-filter:blur(16px);
  border-top:1px solid rgba(211,182,130,.35);
  padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom))}
.tray[hidden]{display:none}
.tray__in{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;
  width:min(100% ,var(--shell));margin-inline:auto}
.tray__n{margin:0;font-size:.88rem;color:var(--muted)}
.tray__n b{color:var(--champ);font-weight:600;font-variant-numeric:tabular-nums}
.tray__act{display:flex;gap:9px;flex:none}
body.has-tray{padding-bottom:78px}
body.has-tray .wa{bottom:92px}

/* what the popup is about, when it came from the tray */
.picked{margin:0 0 15px;padding:9px 11px;border-radius:2px;font-size:.78rem;line-height:1.5;
  background:rgba(169,138,80,.12);color:#5E5541;border-left:2px solid var(--champ-d)}
.picked[hidden]{display:none}
/* step two, asked once the lead is already captured */
.done__ask{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-dk-2);text-align:left}

.pcard__in{display:flex;flex-direction:column;flex:1;padding:4px 16px 16px}
.pcard__spec{margin:0;padding:0}
.pcard__spec > div{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line-2)}
.pcard__spec dt{margin:0;font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.pcard__spec dd{margin:0;font-size:.85rem;text-align:right;color:var(--bone-2)}
.pcard__spec dd.is-price{font-weight:600;color:var(--champ);font-size:.97rem;letter-spacing:-.01em}
.pcard__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:13px 0 15px}

.tag{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:2px;white-space:nowrap;border:1px solid transparent}
.tag--rera{color:var(--ok);border-color:rgba(119,176,139,.38)}
.tag--wip{color:var(--warn);border-color:rgba(214,164,92,.38)}
.tag--ask{color:var(--muted);border-color:var(--line)}
.rerano{font-size:.64rem;color:var(--muted-2);font-variant-numeric:tabular-nums;
  word-break:break-all;line-height:1.45}
.pcard .btn{margin-top:auto;color:var(--bone-2);border-color:var(--line)}
.pcard .btn:hover{border-color:var(--champ);color:var(--champ);background:transparent}
.pempty{grid-column:1/-1;padding:40px 0;color:var(--muted);font-size:.95rem}

/* the list shows its first page, then loads the rest in place — nothing is hidden */
.more{display:grid;justify-items:center;gap:18px;text-align:center;
  padding:clamp(30px,3.6vw,48px) 0 0;margin-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line-2)}
.more__p{margin:0;max-width:52ch;font-size:.88rem;color:var(--muted)}
.more__p b{color:var(--bone);font-weight:600;font-variant-numeric:tabular-nums}
.more__act{display:flex;flex-wrap:wrap;justify-content:center;gap:11px}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.step{border:1px solid var(--line-2);border-radius:3px;overflow:hidden;background:var(--ink-3);
  display:flex;flex-direction:column}
.step__pic{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-4)}
.step__pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.82)}
.step__pic b{position:absolute;left:16px;top:14px;font-size:.72rem;font-weight:700;
  letter-spacing:.2em;color:var(--champ)}
.step__in{padding:20px 20px 22px}
.step h3{font-size:1.06rem;font-weight:600;letter-spacing:-.025em;margin-bottom:9px}
.step p{margin:0;font-size:.87rem;color:var(--muted);line-height:1.62}

/* ---------- faq ---------- */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:first-child{border-top:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-size:1rem;font-weight:500;letter-spacing:-.02em;color:var(--bone)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--champ)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1px;
  background:var(--champ);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:12px;top:50%;width:1px;height:13px;
  background:var(--champ);transform:translateY(-50%);transition:opacity .3s}
.faq details[open] summary::before{opacity:0}
.faq p{margin:0 0 20px;font-size:.92rem;color:var(--muted);max-width:68ch}
.faq a{color:var(--champ)}

/* ---------- long-form pages (privacy) ---------- */
.prose{max-width:68ch;margin-top:clamp(26px,3vw,40px)}
.prose h2{max-width:none;font-size:clamp(1.15rem,1.9vw,1.4rem);font-weight:600;letter-spacing:-.025em;
  margin:clamp(28px,3vw,40px) 0 12px;padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line-2)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose p,.prose li{font-size:.94rem;color:var(--muted);line-height:1.7}
.prose strong{color:var(--bone);font-weight:600}
.prose a{color:var(--champ)}
.prose ul{margin:0 0 1em;padding-left:0;list-style:none;display:grid;gap:9px}
.prose li{position:relative;padding-left:22px}
.prose li::before{content:"";position:absolute;left:0;top:.82em;width:10px;height:1px;
  background:var(--champ)}

/* ---------- closing band ---------- */
.close{position:relative;isolation:isolate;overflow:hidden}
.close img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.close::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(88deg,rgba(12,11,10,.95),rgba(12,11,10,.72) 56%,rgba(12,11,10,.45))}
.close__in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(26px,4vw,60px);
  align-items:center;padding:clamp(56px,6.6vw,98px) 0}
.close h2{color:var(--bone);font-size:clamp(1.8rem,3.5vw,2.75rem);letter-spacing:-.035em;
  max-width:18ch;text-wrap:balance}
.close p{color:var(--bone-2);opacity:.84}
.close__tel{display:inline-block;margin-top:20px;font-size:clamp(1.6rem,3vw,2.35rem);
  font-weight:500;letter-spacing:-.035em;color:var(--champ);text-decoration:none;
  font-variant-numeric:tabular-nums}
.close__tel:hover{color:var(--bone)}
.close__act{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}

/* ---------- footer ---------- */
.foot{background:#060605;color:var(--muted-2);padding:clamp(42px,5vw,70px) 0 30px;font-size:.87rem;
  border-top:1px solid var(--line-2)}
.foot__top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:36px;
  padding-bottom:30px;border-bottom:1px solid var(--line-2)}
.foot h4{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--champ);margin:0 0 15px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--bone)}
.foot__more{margin-top:16px}
.foot__more summary{list-style:none;cursor:pointer;font-size:.62rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
  padding:14px 0;border-top:1px solid var(--line-2);position:relative}
.foot__more summary::-webkit-details-marker{display:none}
.foot__more summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%)}
.foot__more[open] summary::after{content:"\2013"}
.foot__legal{margin:12px 0 0;font-size:.72rem;line-height:1.75;color:#5C564D}
.foot__legal strong{color:var(--muted);font-weight:600}
.foot__legal a{color:var(--muted)}
.foot__copy{margin:16px 0 0;font-size:.71rem;color:#4A453E}

/* ---------- dialog ---------- */
.dialog{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;
  background:rgba(6,6,5,.8);backdrop-filter:blur(7px)}
.dialog[hidden]{display:none}
/* kept deliberately small — one budget tap, a name and a number is the whole ask */
.dialog__box{width:min(100%,366px);max-height:90svh;overflow:auto;position:relative;
  background:var(--bone);color:#26241F;border-radius:3px;border-top:2px solid var(--champ);
  padding:22px 22px 20px}
.dialog__box .qual__h{font-size:1.04rem;padding-right:26px}
.dialog__box .qual__sub{margin:6px 0 15px;font-size:.8rem;line-height:1.45}
.dialog__box .qual__step{margin-bottom:14px}
.dialog__box .qual__lab{font-size:.59rem;margin-bottom:7px}
.dialog__box .chips{gap:5px;flex-wrap:nowrap}
.dialog__box .chip{flex:1 1 0;min-width:0;padding:9px 4px;font-size:.73rem;
  text-align:center;white-space:nowrap}
.dialog__box .field{margin-bottom:9px}
.dialog__box .field input{padding:11px 12px}
/* the card itself is bone, so the primary button has to invert to stay a button */
.dialog__box .btn--brass{background:#17150F;color:var(--bone);padding:14px 18px;
  box-shadow:0 10px 24px -14px rgba(23,21,15,.9)}
.dialog__box .btn--brass:hover{background:#2C281F}
.dialog__box .btn--wide{padding:14px 18px}
.dialog__box .consent{margin-top:11px;font-size:.67rem;line-height:1.45}
.dialog__box .done{padding:6px 0}
.dialog__box .done .tick{width:38px;height:38px;margin-bottom:12px}
.dialog__x{position:absolute;right:9px;top:9px;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line-dk);background:transparent;color:#7A7469;font-size:19px;
  line-height:1;cursor:pointer}
.dialog__x:hover{border-color:#17150F;color:#17150F}

/* ---------- whatsapp float ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;width:52px;height:52px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 14px 34px -12px rgba(0,0,0,.6)}
.wa svg{width:28px;height:28px;fill:#fff}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .mkt{grid-template-columns:repeat(2,1fr)}
  .mkt__t{aspect-ratio:4/3}
}
/* phones: swipe the corridors instead of stacking four tall tiles */
@media (max-width:700px){
  .mkt{display:flex;grid-template-columns:none;gap:10px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-bottom:2px}
  .mkt::-webkit-scrollbar{display:none}
  .mkt__t{flex:0 0 72%;scroll-snap-align:start;aspect-ratio:5/4}
  .mkt__c{padding:16px 15px}
  .mkt__n{font-size:1.06rem}
}
@media (max-width:980px){
  .close__in{grid-template-columns:1fr}
  .hero{min-height:clamp(500px,74svh,720px)}
  .hero__bg{object-position:50% 30%;filter:brightness(.6) saturate(.92)}
  .hero::before{background:
    linear-gradient(180deg,rgba(12,11,10,.8) 0%,rgba(12,11,10,.45) 42%,rgba(12,11,10,.92) 94%)}
  .hero__credit{display:none}
  .hero__rail-in{grid-template-columns:repeat(2,1fr)}
  .hero__st{padding-left:clamp(14px,3vw,22px)}
  .hero__st:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line-2)}
  .hero__st:nth-child(4){border-top:1px solid var(--line-2)}
  .steps{grid-template-columns:1fr}
  .step__pic{aspect-ratio:21/9}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__top > div:first-child{grid-column:1 / -1}
  .bar .btn{display:none}
  .wa{right:16px;width:46px;height:46px}
  .wa svg{width:24px;height:24px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .filters{gap:15px}
  .band{min-height:300px}
  .band::before{background:linear-gradient(180deg,rgba(12,11,10,.55),rgba(12,11,10,.92))}
}
/* phones: one scrolling row per filter, so four groups cost four lines, not twelve */
@media (max-width:700px){
  .filters{display:grid;gap:0;padding:10px 0 4px}
  .filters__g{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;
    gap:10px;padding:7px 0;border-top:1px solid var(--line-2);flex-wrap:nowrap}
  .filters__g:first-child{border-top:0}
  .filters__lab{font-size:.55rem;letter-spacing:.13em;line-height:1.25}
  .filters__row{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-right:calc(var(--gut) * -1);padding-right:var(--gut);
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .filters__row::-webkit-scrollbar{display:none}
  .filters .chip{flex:none;padding:9px 13px;font-size:.78rem}
  .eyebrow{font-size:.61rem;letter-spacing:.15em}
  .hero__trust{display:grid;gap:2px;margin-top:22px}
  .hero__trust span{position:relative;padding:5px 0 5px 19px}
  .hero__trust span:not(:last-child)::after{content:none}
  .hero__trust span::before{content:"";position:absolute;left:0;top:1.05em;width:10px;height:1px;
    background:var(--champ)}
}
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.1rem,8.6vw,2.85rem);max-width:none}
  .hero__act{gap:9px}
  .hero__act .btn{flex:1 1 160px;padding:15px 16px}
  .sec h2{max-width:none}
}
/* the header carries only what fits: wordmark, then the number */
@media (max-width:560px){
  :root{--bar:64px}
  /* one size to change; the ratio and the tracking carry over */
  .brand{gap:5px;font-size:1.02rem}
  .brand span{padding-top:5px}
  .bar__tel{font-size:.85rem}
  .bar__row{gap:12px}
}
@media (max-width:360px){
  .bar__tel svg{display:none}
  .bar__tel{font-size:.82rem}
}
@media (max-width:520px){
  .tray__in{gap:9px}
  .tray__n{width:100%;font-size:.82rem}
  .tray__act{width:100%}
  .tray__act .btn{flex:1 1 0;min-width:0}
  body.has-tray{padding-bottom:118px}
  body.has-tray .wa{bottom:130px}
  .srch{max-width:none}
  .srch__list li{grid-template-columns:1fr}
  .srch__p{grid-column:1;grid-row:3;justify-self:start;margin-top:3px}
  .dialog{padding:14px}
  .dialog__box{padding:18px 16px 16px}
  .dialog__box .qual__h{font-size:.98rem}
  .dialog__box .qual__sub{font-size:.76rem;margin-bottom:13px}
  .dialog__box .qual__lab{font-size:.55rem;letter-spacing:.15em;margin-bottom:7px}
  .dialog__box .qual__step{margin-bottom:12px}
  .dialog__box .chip{font-size:.7rem}
  .dialog__box .field input{padding:11px 10px;font-size:15px}
  .dialog__box .cc__btn{padding:11px 9px;font-size:14px;gap:5px}
  .dialog__box .cc__pop{width:min(248px,calc(100vw - 60px))}
  .dialog__box .cc__list{max-height:190px}
  .dialog__box .picked{font-size:.72rem;padding:8px 10px;margin-bottom:12px}
  .dialog__box .consent{font-size:.63rem;margin-top:9px}
  .dialog__box .done__ask .chips{flex-wrap:nowrap}
  .foot__top{grid-template-columns:1fr}
  .sec__head{align-items:flex-start;flex-direction:column}
  .hero__trust{gap:0 16px}
  .credit{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}