/* ============================================================
   v25 DESIGN SYSTEM — light, rich, modern (navy + gold)
   Re-themes every page via CSS variables. Loaded first; later
   rules inherit these values.
   ============================================================ */
:root{
  /* Brand — deep navy primary, warm gold accent (from the hero art) */
  --navy:#132a4a;          /* primary */
  --navy-700:#0e2038;
  --navy-900:#0a1730;
  --navy-50:#eef2f8;
  --gold:#c39a4e;          /* accent */
  --gold-600:#a97f34;
  --gold-50:#faf4e6;

  /* Map the OLD green tokens onto navy so every existing rule re-themes
     without editing hundreds of lines. Green becomes a quiet success accent. */
  --green:#132a4a;
  --green-700:#0e2038;
  --green-50:#eef2f8;
  --accent:#1f8f4e;        /* used only for small "verified / success" bits */

  /* Neutrals — light & airy */
  --ink:#131a24;
  --slate:#5b6675;
  --line:#e7eaef;
  --bg:#ffffff;
  --soft:#f5f7fa;          /* section tint */
  --cream:#faf8f4;         /* warm alt tint */

  --radius:14px;
  --radius-lg:20px;
  --maxw:1220px;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --display:'Archivo','Plus Jakarta Sans',system-ui,sans-serif;

  /* Softer, richer elevation */
  --e1:0 1px 2px rgba(19,42,74,.05), 0 1px 3px rgba(19,42,74,.04);
  --e2:0 6px 16px -4px rgba(19,42,74,.10), 0 2px 6px -2px rgba(19,42,74,.06);
  --e3:0 16px 36px -10px rgba(19,42,74,.16), 0 6px 14px -6px rgba(19,42,74,.09);
  --e4:0 30px 64px -18px rgba(19,42,74,.28);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* Primary buttons -> navy; a gold call-to-action variant added */
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-700)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-600));color:#fff;border:0}
.btn-gold:hover{filter:brightness(1.05)}
.btn-outline{border:1px solid var(--line);color:var(--navy);background:#fff}
.btn-outline:hover{border-color:var(--navy);background:var(--navy-50)}

/* Links & small accents that were green */
a{color:var(--navy)}
.pcard-verified{background:var(--accent) !important}

/* ============================================================
   Global Roots Realty — Bayut-style India Portal (clean white)
   ============================================================ */
:root{
  --green:#132a4a;        /* re-themed to navy (v25) */
  --green-700:#0e2038;
  --green-50:#eef2f8;
  --gold:#c8a25a;
  --ink:#1a1a1a;
  --slate:#5a6573;
  --line:#e6e8eb;
  --bg:#ffffff;
  --soft:#f6f7f9;
  --radius:10px;
  --maxw:1200px;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
h1,h2,h3,h4{font-weight:700;line-height:1.2;letter-spacing:-.01em}
.muted{color:var(--slate)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:.94rem;padding:.8rem 1.5rem;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:.2s;min-height:46px}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-700)}
.btn-gold{background:var(--gold);color:#1a1a1a}
.btn-gold:hover{filter:brightness(.95)}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-block{width:100%}
.btn-sm{padding:.5rem 1rem;font-size:.85rem;min-height:auto}

/* Header */
.ph{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--line)}
.ph-top{display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}
.ph-logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.15rem;color:var(--green);flex-shrink:0}
.ph-logo img{width:34px;height:34px}
.ph-logo b{color:var(--gold)}
.ph-nav{display:flex;align-items:center;gap:1.5rem}
.ph-nav a{font-weight:600;font-size:.9rem;color:var(--ink);opacity:.85;transition:.2s;white-space:nowrap}
.ph-nav a:hover{opacity:1;color:var(--green)}
.ph-actions{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.ph-settings{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--slate);padding:.4rem .7rem;border:1px solid var(--line);border-radius:8px}
.ph-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.ph-burger span{width:24px;height:2px;background:var(--green);border-radius:2px;transition:.3s}
.ph-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ph-burger.active span:nth-child(2){opacity:0}
.ph-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero: search-first */
.phero{position:relative;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:3rem 1rem 4rem}
.phero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.phero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,68,54,.55),rgba(8,68,54,.35));z-index:1}
.phero-inner{position:relative;z-index:2;width:100%;max-width:880px}
.phero h1{font-size:clamp(1.9rem,4.5vw,3rem);color:#fff;margin-bottom:.4rem}
.phero p{font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,.92);margin-bottom:1.8rem;font-weight:500}

/* Search widget */
.searchbox{background:#fff;border-radius:14px;text-align:left}
.sb-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--soft)}
.sb-tabs button{flex:0 0 auto;padding:.9rem 1.6rem;background:none;border:0;font-family:var(--body);font-weight:700;font-size:.92rem;color:var(--slate);cursor:pointer;border-bottom:3px solid transparent;transition:.2s}
.sb-tabs button.active{color:var(--green);border-bottom-color:var(--green);background:#fff}
.sb-body{padding:1rem;display:flex;flex-wrap:wrap;gap:.7rem}
.sb-field{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.sb-field label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
.sb-field input,.sb-field select{border:1px solid var(--line);border-radius:8px;padding:.7rem;font-family:var(--body);font-size:.92rem;background:#fff;width:100%}
.sb-field input:focus,.sb-field select:focus{outline:2px solid var(--green)}
.sb-search{align-self:flex-end}

/* Section */
.psec{padding:3.2rem 0}
.psec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.6rem;gap:1rem;flex-wrap:wrap}
.psec-head h2{font-size:clamp(1.4rem,3vw,2rem)}
.psec-head p{color:var(--slate);font-size:.92rem;margin-top:.2rem}
.psec-head a{color:var(--green);font-weight:700;font-size:.9rem;white-space:nowrap}
.psec.soft{background:var(--soft)}

/* Quick category chips */
.chips{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:2rem}
.chip{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.2rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:.9rem;transition:.2s}
.chip:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}

/* Property card (portal) */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;display:block}
.pcard:hover{box-shadow:0 14px 36px -16px rgba(0,0,0,.28);transform:translateY(-4px)}
.pcard-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:.5s}
.pcard:hover .pcard-media img{transform:scale(1.06)}
.pcard-tag{position:absolute;top:10px;left:10px;background:var(--green);color:#fff;font-size:.68rem;font-weight:700;padding:.28rem .65rem;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
.pcard-tag.nri{background:var(--gold);color:#1a1a1a}
.pcard-fav{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);border:0;display:grid;place-items:center;cursor:pointer;color:#d6455e;font-size:1rem;transition:.2s}
.pcard-fav:hover{transform:scale(1.1)}
.pcard-fav.on{background:#d6455e;color:#fff}
.pcard-body{padding:.9rem 1rem 1.1rem}
.pcard-price{font-size:1.15rem;font-weight:800;color:var(--ink)}
.pcard-price small{font-size:.78rem;font-weight:600;color:var(--slate)}
.pcard-title{font-size:.92rem;font-weight:600;margin:.3rem 0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pcard-loc{font-size:.82rem;color:var(--slate);display:flex;align-items:center;gap:.3rem;margin-bottom:.6rem}
.pcard-meta{display:flex;gap:.9rem;font-size:.8rem;color:var(--slate);border-top:1px solid var(--line);padding-top:.6rem}
.pcard-meta span{display:flex;align-items:center;gap:.3rem}

/* New projects card (wider) */
.npgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.npcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s}
.npcard:hover{box-shadow:0 14px 36px -16px rgba(0,0,0,.28);transform:translateY(-4px)}
.npcard-media{aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.npcard-media img{width:100%;height:100%;object-fit:cover}
.npcard-body{padding:1rem}
.npcard-body h4{font-size:1rem;margin-bottom:.2rem}
.npcard-type{font-size:.8rem;color:var(--green);font-weight:700}
.npcard-loc{font-size:.8rem;color:var(--slate);margin:.3rem 0 .7rem}
.npcard-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:.7rem}
.npcard-price small{display:block;font-size:.68rem;color:var(--slate);text-transform:uppercase;letter-spacing:.04em}
.npcard-price b{font-size:1.05rem;color:var(--ink)}

/* City tiles */
.citygrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.citytile{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;display:block}
.citytile img{width:100%;height:100%;object-fit:cover;transition:.5s}
.citytile:hover img{transform:scale(1.08)}
.citytile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 60%)}
.citytile span{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.7rem;color:#fff;font-weight:700;font-size:.95rem;text-align:center}

/* Popular searches (SEO link blocks) */
.seo-tabs{display:flex;gap:.5rem;margin-bottom:1.4rem;flex-wrap:wrap}
.seo-tabs button{padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:700;font-size:.85rem;color:var(--slate);cursor:pointer}
.seo-tabs button.active{background:var(--green);color:#fff;border-color:var(--green)}
.seo-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem 2rem}
.seo-col h4{font-size:.95rem;margin-bottom:.7rem;color:var(--ink)}
.seo-col a{display:block;font-size:.85rem;color:var(--slate);padding:.22rem 0;transition:.15s}
.seo-col a:hover{color:var(--green)}
.seo-panel{display:none}
.seo-panel.active{display:block}

/* Agents */
.agentgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.agentcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;text-align:center;transition:.2s}
.agentcard:hover{box-shadow:0 14px 36px -16px rgba(0,0,0,.25);transform:translateY(-4px)}
.agentcard .ava{width:74px;height:74px;border-radius:50%;margin:0 auto .8rem;background:linear-gradient(135deg,var(--green),var(--green-700));color:#fff;display:grid;place-items:center;font-size:1.6rem;font-weight:800;overflow:hidden}
.agentcard .ava img{width:100%;height:100%;object-fit:cover}
.agentcard h4{font-size:1rem}
.agentcard .role{font-size:.8rem;color:var(--slate);margin:.2rem 0 .6rem}
.agentcard .cnt{font-size:.78rem;color:var(--green);font-weight:700}

/* Insights cards */
.insightgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.insight{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s}
.insight:hover{box-shadow:0 14px 36px -16px rgba(0,0,0,.25);transform:translateY(-4px)}
.insight-media{aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.insight-media img{width:100%;height:100%;object-fit:cover}
.insight-body{padding:1rem}
.insight-body .cat{font-size:.7rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.06em}
.insight-body h4{font-size:.95rem;margin-top:.3rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Footer */
.pf{background:var(--green-700);color:rgba(255,255,255,.82);padding:3rem 0 1.5rem;margin-top:2rem}
.pf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.pf h4{color:#fff;font-size:.95rem;margin-bottom:1rem}
.pf a{display:block;padding:.25rem 0;font-size:.88rem;color:rgba(255,255,255,.8)}
.pf a:hover{color:var(--gold)}
.pf-logo{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:800;font-size:1.2rem;margin-bottom:.7rem}
.pf-bottom{margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.82rem}

/* Action rail (reuse) */

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:.6s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Responsive */
@media(max-width:1024px){
  .pgrid,.npgrid,.agentgrid,.insightgrid{grid-template-columns:repeat(3,1fr)}
  .citygrid{grid-template-columns:repeat(4,1fr)}
  .seo-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .ph-nav{display:none}
  .ph-burger{display:flex}
  .ph-nav.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:1rem 16px;gap:.2rem;box-shadow:0 16px 30px -16px rgba(0,0,0,.3)}
  .ph-nav.open a{padding:.8rem .3rem;border-bottom:1px solid var(--line)}
  .ph-settings{display:none}
  .sb-body{grid-template-columns:1fr 1fr}
  .sb-search{grid-column:1/-1}
  .pgrid,.npgrid,.agentgrid,.insightgrid{grid-template-columns:repeat(2,1fr)}
  .citygrid{grid-template-columns:repeat(3,1fr)}
  .seo-cols{grid-template-columns:1fr}
  .pf-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .pgrid,.npgrid,.agentgrid,.insightgrid,.citygrid{grid-template-columns:1fr 1fr}
  .sb-body{grid-template-columns:1fr}
  .pf-grid{grid-template-columns:1fr}
  .phero{min-height:480px}
}

/* ============================================================
   Portal — inner page styles (forms, detail, dashboard, filters)
   ============================================================ */
/* Simple page banner */
.pbanner{background:var(--green-700);color:#fff;padding:2.4rem 0;text-align:center}
.pbanner h1{color:#fff;font-size:clamp(1.6rem,4vw,2.4rem)}
.pbanner p{color:rgba(255,255,255,.85);margin-top:.3rem;font-size:.95rem}

/* Filters bar (listing page) */
.filters{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr auto;gap:.7rem;box-shadow:0 6px 20px -14px rgba(0,0,0,.25);margin-top:-2rem;position:relative;z-index:5}
.filters .f{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.filters label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
.filters input,.filters select{border:1px solid var(--line);border-radius:8px;padding:.65rem;font-family:var(--body);font-size:.9rem;background:#fff;width:100%}
.filters .btn{align-self:flex-end}

/* Listing toolbar */
.l-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}
.l-toolbar .count{font-weight:700;color:var(--ink)}
.l-toolbar select{border:1px solid var(--line);border-radius:8px;padding:.55rem .8rem;font-family:var(--body);font-size:.88rem;background:#fff}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}

/* Forms (portal) */
.auth-wrap{max-width:440px;margin:0 auto;padding:3rem 16px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:2.4rem;box-shadow:var(--e3)}
.auth-card h2{font-family:var(--display)}
.auth-card.wide{max-width:560px}
.auth-card.wide{max-width:520px}
.pform .fg{margin-bottom:1rem}
.pform label{display:block;font-size:.78rem;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.35rem}
.pform input,.pform select,.pform textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:.8rem .9rem;font-family:var(--body);font-size:1rem;background:#fff}
.pform input:focus,.pform select:focus,.pform textarea:focus{outline:2px solid var(--green);border-color:transparent}
.prow{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.input-pw{position:relative}.input-pw button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:var(--slate);font-size:.78rem;font-weight:700}
.pw-meter{height:5px;border-radius:3px;background:var(--line);margin-top:.5rem;overflow:hidden}.pw-meter i{display:block;height:100%;width:0;transition:.3s;background:#c0392b}
.alert{padding:.85rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}
.alert-error{background:#fdecea;color:#a3261b;border:1px solid #f5c6c0}
.alert-success{background:#e8f5e9;color:#1d6b2c;border:1px solid #c3e6c8}
.role-tabs{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.3rem}
.role-tabs a{padding:.5rem 1rem;border-radius:999px;font-size:.82rem;font-weight:700;border:1px solid var(--line);color:var(--slate);background:#fff}
.role-tabs a.active{background:var(--green);color:#fff;border-color:var(--green)}
.seg{display:flex;gap:.5rem}.seg label{flex:1;border:1px solid var(--line);border-radius:8px;padding:.65rem;text-align:center;cursor:pointer;font-weight:600;font-size:.88rem;background:#fff}
.seg input{display:none}.seg label:has(input:checked){border-color:var(--green);color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}

/* Property detail (portal) */
.pd-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:2rem;margin-top:1.5rem}
.pd-gallery{border-radius:12px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--line)}
.pd-gallery img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.pd-thumbs img{width:80px;height:60px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent}
.pd-thumbs img:hover{border-color:var(--green)}
.pd-side{border:1px solid var(--line);border-radius:12px;padding:1.4rem;position:sticky;top:84px;background:#fff;box-shadow:0 8px 26px -18px rgba(0,0,0,.25)}
.pd-price{font-size:1.7rem;font-weight:800;color:var(--ink)}
.cur-toggle{display:flex;gap:.3rem;margin:.7rem 0;flex-wrap:wrap}
.cur-toggle button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:.35rem .7rem;font-size:.76rem;font-weight:700;cursor:pointer;color:var(--slate)}
.cur-toggle button.active{background:var(--green);color:#fff;border-color:var(--green)}
.spec-list{list-style:none;margin:1.1rem 0}
.spec-list li{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.9rem;gap:1rem}
.spec-list li span:first-child{color:var(--slate)}.spec-list li span:last-child{font-weight:700}
.amenities{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.amenities span{background:var(--green-50);border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;font-size:.82rem;color:var(--green)}
.emi-box{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:1.1rem;margin-top:1.1rem}
.emi-box h4{margin-bottom:.7rem}.emi-row{margin-bottom:.6rem}
.emi-row label{font-size:.76rem;font-weight:700;color:var(--slate);display:flex;justify-content:space-between}
.emi-row input[type=range]{width:100%;accent-color:var(--green)}
.emi-result{font-size:1.35rem;font-weight:800;color:var(--green);text-align:center;margin-top:.5rem}

/* Dashboard (portal) */
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.6rem}
.dash-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.3rem}
.dash-card .n{font-size:1.9rem;font-weight:800;color:var(--green)}
.dash-card .l{font-size:.78rem;color:var(--slate);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.3rem;margin-bottom:1.2rem}

/* split (about/nri) */
.psplit{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.psplit-media{border-radius:12px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line)}
.psplit-media img{width:100%;height:100%;object-fit:cover}
.check-list{list-style:none;margin:.5rem 0 1.3rem}
.check-list li{position:relative;padding:.45rem 0 .45rem 1.8rem;font-size:.95rem;border-bottom:1px solid var(--line)}
.check-list li::before{content:'✓';position:absolute;left:0;top:.45rem;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:.66rem;font-weight:800}
.faq-item{border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin-bottom:.7rem;cursor:pointer;background:#fff}
.faq-item h4{font-size:.98rem;display:flex;justify-content:space-between;align-items:center}
.faq-item p{font-size:.9rem;color:var(--slate);margin-top:.6rem;display:none}
.faq-item.open p{display:block}.faq-item .chev{transition:.3s;color:var(--green)}.faq-item.open .chev{transform:rotate(180deg)}

@media(max-width:1024px){.lgrid{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){
  .pd-grid{grid-template-columns:1fr}.pd-side{position:static}
  .psplit{grid-template-columns:1fr;gap:1.4rem}
  .dash-grid{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr 1fr}
  .prow{grid-template-columns:1fr}
  .lgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.lgrid{grid-template-columns:1fr}.filters{grid-template-columns:1fr}}

/* ============================================================
   v9 — Bayut parity: utility bar, breadcrumbs, map, lightbox
   ============================================================ */
/* Utility top bar */
.ph-utility{background:var(--green-700);color:rgba(255,255,255,.9);font-size:.8rem}
.ph-utility-row{display:flex;justify-content:space-between;align-items:center;height:38px}
.ph-util-left,.ph-util-right{display:flex;align-items:center;gap:1.2rem}
.ph-utility a{color:rgba(255,255,255,.85);font-weight:600}
.ph-utility a:hover{color:#fff}
.ph-utility .ph-settings{border:1px solid rgba(255,255,255,.25);padding:.2rem .6rem;border-radius:6px;font-size:.78rem}

/* Breadcrumbs */
.crumbs{font-size:.82rem;color:var(--slate);padding:.9rem 0;display:flex;gap:.4rem;flex-wrap:wrap}
.crumbs a{color:var(--green);font-weight:600}
.crumbs span{color:var(--slate)}

/* List/Map toggle */
.view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.view-toggle button{padding:.5rem .9rem;background:#fff;border:0;font-weight:700;font-size:.85rem;color:var(--slate);cursor:pointer;display:flex;align-items:center;gap:.4rem}
.view-toggle button.active{background:var(--green);color:#fff}

/* Split list + map layout */
.search-split{display:grid;grid-template-columns:1fr;gap:0}
.search-split.with-map{grid-template-columns:1.15fr .85fr}
.search-map{position:sticky;top:80px;height:calc(100vh - 100px);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
#listMap,#detailMap,#areaMap{width:100%;height:100%}
#detailMap{height:320px;border-radius:12px;border:1px solid var(--line)}
.map-only .lgrid{grid-template-columns:1fr 1fr}
.leaflet-popup-content{margin:.6rem .8rem;font-family:var(--body)}
.map-pop{width:180px}
.map-pop img{width:100%;height:90px;object-fit:cover;border-radius:6px;margin-bottom:.4rem}
.map-pop b{color:var(--green);font-size:.95rem}
.map-pop .t{font-size:.8rem;color:var(--ink);margin:.2rem 0}
.map-pin{background:var(--green);color:#fff;font-weight:800;font-size:.78rem;padding:.3rem .6rem;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.3);white-space:nowrap;border:2px solid #fff}

/* Verified / count badges on cards */
.pcard-badges{position:absolute;bottom:8px;left:8px;display:flex;gap:.4rem;z-index:2}
.pcard-badge{background:rgba(0,0,0,.6);color:#fff;font-size:.66rem;font-weight:700;padding:.2rem .5rem;border-radius:5px;display:flex;align-items:center;gap:.25rem;backdrop-filter:blur(4px)}
.pcard-verified{background:var(--green);color:#fff;font-size:.66rem;font-weight:700;padding:.2rem .5rem;border-radius:5px}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:none;align-items:center;justify-content:center;flex-direction:column}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:8px}
.lightbox-close{position:absolute;top:18px;right:24px;color:#fff;font-size:2rem;cursor:pointer;background:none;border:0;line-height:1}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);color:#fff;border:0;width:50px;height:50px;border-radius:50%;font-size:1.5rem;cursor:pointer}
.lightbox-prev{left:18px}.lightbox-next{right:18px}
.lightbox-count{color:#fff;margin-top:1rem;font-size:.9rem}
.gallery-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:.5rem;border-radius:12px;overflow:hidden;max-height:420px}
.gallery-grid .g0{grid-row:1/3;grid-column:1}
.gallery-grid img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:.2s}
.gallery-grid img:hover{filter:brightness(1.05)}
.gallery-more{position:relative}
.gallery-more::after{content:'+ more';position:absolute;inset:0;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-weight:700;cursor:pointer}

/* Amenities grid (detail) */
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1rem}
.amen-grid div{display:flex;align-items:center;gap:.5rem;font-size:.88rem;padding:.6rem .8rem;background:var(--soft);border-radius:8px}
.amen-grid .ic{color:var(--green)}

/* Detail tabs */
.d-tabs{display:flex;gap:.3rem;border-bottom:2px solid var(--line);margin:1.5rem 0 1rem}
.d-tabs button{padding:.7rem 1.1rem;background:none;border:0;border-bottom:3px solid transparent;font-weight:700;font-size:.92rem;color:var(--slate);cursor:pointer;margin-bottom:-2px}
.d-tabs button.active{color:var(--green);border-bottom-color:var(--green)}
.d-panel{display:none}.d-panel.active{display:block}

/* Area guides */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.area-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.2s}
.area-card:hover{box-shadow:0 14px 36px -16px rgba(0,0,0,.25);transform:translateY(-4px)}
.area-card-media{aspect-ratio:16/10;overflow:hidden;position:relative}
.area-card-media img{width:100%;height:100%;object-fit:cover}
.area-card-media span{position:absolute;left:12px;bottom:12px;color:#fff;font-weight:800;font-size:1.2rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.area-card-body{padding:1rem}
.area-card-body p{font-size:.85rem;color:var(--slate)}
.area-stats{display:flex;gap:1.2rem;margin-top:.7rem;font-size:.8rem}
.area-stats b{display:block;color:var(--green);font-size:1rem}

@media(max-width:1024px){
  .search-split.with-map{grid-template-columns:1fr}
  .search-map{display:none}
  .amen-grid{grid-template-columns:repeat(2,1fr)}
  .area-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .ph-utility{display:none}
  .amen-grid{grid-template-columns:1fr}
  .area-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:auto;max-height:none}
  .gallery-grid .g0{grid-row:auto}
  .gallery-grid img:nth-child(n+4){display:none}
}

/* ============================================================
   Map search (Leaflet), breadcrumbs, view toggle
   ============================================================ */
.breadcrumb{display:flex;gap:.4rem;flex-wrap:wrap;font-size:.82rem;color:var(--slate);padding:.9rem 0}
.breadcrumb a{color:var(--slate)}.breadcrumb a:hover{color:var(--green)}
.breadcrumb .sep{opacity:.5}
.breadcrumb b{color:var(--ink)}

.view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.view-toggle button{padding:.5rem .9rem;background:#fff;border:0;font-family:var(--body);font-weight:700;font-size:.85rem;color:var(--slate);cursor:pointer;display:flex;align-items:center;gap:.4rem}
.view-toggle button.active{background:var(--green);color:#fff}

/* split layout: list + map */
.search-split{display:grid;grid-template-columns:1fr;gap:1.2rem}
.search-split.map-on{grid-template-columns:1.2fr 1fr}
#mapPanel{display:none;position:sticky;top:78px;height:calc(100vh - 100px);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.search-split.map-on #mapPanel{display:block}
#map{width:100%;height:100%}
.search-split.map-on .lgrid{grid-template-columns:1fr 1fr}

/* price pin marker */
.price-pin{background:var(--green);color:#fff;font-weight:800;font-size:.75rem;padding:.28rem .55rem;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.3);border:2px solid #fff;transform:translate(-50%,-50%)}
.price-pin.active{background:var(--gold);color:#1a1a1a}
.leaflet-popup-content{margin:0}
.map-pop{width:200px}
.map-pop img{width:100%;height:110px;object-fit:cover;border-radius:8px 8px 0 0}
.map-pop .mp-body{padding:.5rem .6rem .6rem}
.map-pop .mp-price{font-weight:800;color:var(--ink)}
.map-pop .mp-title{font-size:.82rem;margin:.15rem 0;color:var(--ink)}
.map-pop .mp-loc{font-size:.75rem;color:var(--slate)}

@media(max-width:900px){
  .search-split.map-on{grid-template-columns:1fr}
  .search-split.map-on .lgrid{grid-template-columns:1fr 1fr}
  #mapPanel{position:static;height:400px}
  .search-split.map-on #mapPanel{order:-1}
}
@media(max-width:520px){.search-split.map-on .lgrid{grid-template-columns:1fr}}

/* Two-row header top utility bar (Bayut style) */
.ph-utility{background:var(--green-700);color:rgba(255,255,255,.9);font-size:.82rem}
.ph-utility-in{display:flex;justify-content:space-between;align-items:center;height:38px;gap:1rem}
.ph-util-left{display:flex;gap:1.3rem}
.ph-util-left a{color:rgba(255,255,255,.85);font-weight:600}
.ph-util-left a:hover{color:#fff}
.ph-util-right{display:flex;gap:1.3rem;align-items:center}
.ph-util-right a{color:var(--gold);font-weight:700}
.ph-util-right span{opacity:.85}
@media(max-width:760px){.ph-utility{display:none}}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:500;display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:8px}
.lb-close{position:absolute;top:18px;right:26px;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:0;color:#fff;font-size:2.4rem;width:56px;height:56px;border-radius:50%;cursor:pointer;transition:.2s}
.lb-nav:hover{background:rgba(255,255,255,.3)}
.lb-prev{left:20px}.lb-next{right:20px}
@media(max-width:600px){.lb-nav{width:44px;height:44px;font-size:1.8rem}}

/* Second WhatsApp button in action rail */

/* ============================================================
   Mobile menu fixes — account/utility links inside hamburger
   ============================================================ */
/* Desktop: hide the mobile-only nav items and the mobile sign-in button */
.ph-nav-mobile{display:none}
.ph-signin-btn{display:inline-flex}
@media(min-width:761px){
  .ph-signin-btn{display:none} /* desktop uses utility-bar Sign in instead */
}
@media(max-width:760px){
  /* keep the top utility bar hidden, but surface its links in the menu */
  .ph-utility{display:none}
  /* main row: logo left, sign-in + burger right; hide desktop-only bits */
  .ph-nav{display:none}
  .ph-list-btn{display:none}          /* List Property becomes a menu item on mobile */
  .ph-signin-btn{display:inline-flex;padding:.5rem .9rem}
  .ph-actions{gap:.5rem}
  /* opened menu */
  .ph-nav.open{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;background:#fff;border-bottom:1px solid var(--line);
    padding:.4rem 16px 1rem;gap:0;box-shadow:0 18px 34px -16px rgba(0,0,0,.35);z-index:60;
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .ph-nav.open a{
    padding:.95rem .3rem;border-bottom:1px solid var(--line);font-size:1rem;font-weight:600;color:var(--ink);
  }
  .ph-nav.open a:last-child{border-bottom:0}
  .ph-nav-mobile{display:block}
  .ph-nav-account{color:var(--green)!important;font-weight:800!important}
  .ph-nav-list{margin-top:.6rem;background:var(--green);color:#fff!important;border-radius:8px;text-align:center;border-bottom:0!important;padding:.9rem!important}
}

/* Agent direct-contact box on listing */
.agent-contact{background:var(--green-50);border:1px solid var(--line);border-radius:10px;padding:.9rem;margin-bottom:1rem}
.agent-contact-head{display:flex;align-items:center;gap:.6rem}
.agent-contact-head .ava{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-700));color:#fff;display:grid;place-items:center;font-weight:800;overflow:hidden;flex-shrink:0}
.agent-contact-head .ava img{width:100%;height:100%;object-fit:cover}

/* WhatsApp chooser modal */
.wa-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:600;display:none;align-items:center;justify-content:center;padding:1rem}
.wa-modal.open{display:flex}
.wa-modal-card{background:#fff;border-radius:16px;padding:1.6rem;max-width:380px;width:100%;position:relative;box-shadow:0 24px 60px -18px rgba(0,0,0,.4)}
.wa-modal-card h3{font-size:1.2rem;margin-bottom:.2rem}
.wa-modal-x{position:absolute;top:12px;right:16px;background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--slate)}
.wa-opt{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;transition:.2s;color:var(--ink)}
.wa-opt:hover{border-color:#25d366;background:#f2fdf6;transform:translateY(-1px)}
.wa-opt .wa-ic{width:42px;height:42px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.2rem;flex-shrink:0}

/* Property detail action buttons (poster style) */
.pd-actions{display:flex;gap:.5rem;margin:.7rem 0 1rem;flex-wrap:wrap}
.pd-act-btn{flex:1;min-width:130px;font-weight:700}
.btn-agent{background:#1f8f4e;color:#fff;border:1px solid transparent}
.btn-agent:hover{background:#176e3c;color:#fff}
.verified-badge{display:inline-flex;align-items:center;gap:.3rem;background:#e8f3ee;color:#1f8f4e;font-size:.72rem;font-weight:800;padding:.2rem .55rem;border-radius:6px;margin-top:.25rem;text-transform:uppercase;letter-spacing:.03em}
.agent-contact{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:1rem;margin-bottom:1rem}

/* Property card action buttons (poster style) */
.pcard-link{display:block;color:inherit;text-decoration:none}
.pcard-actions{display:flex;gap:.4rem;padding:.7rem;border-top:1px solid var(--line)}
.pcard-btn{flex:1;font-size:.78rem;padding:.55rem .4rem;white-space:nowrap}
.pcard:hover{box-shadow:0 14px 36px -16px rgba(0,0,0,.28);transform:translateY(-4px)}

/* ============================================================
   Hero search — professional, adaptive, responsive
   ============================================================ */
.searchbox{position:relative}
.sb-body{align-items:end}
.sb-loc{position:relative}
.sb-search-ic{margin-right:.35rem}

/* Autocomplete dropdown — hardened so it never breaks layout */
.sb-loc{position:relative}
.ac-list{
  position:absolute !important; top:calc(100% + 6px); left:0; right:0;
  background:#fff !important; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 18px 44px -18px rgba(0,0,0,.35);
  z-index:200; max-height:288px; overflow-y:auto; overflow-x:hidden;
  list-style:none !important; margin:0 !important; padding:.35rem !important;
}
.ac-list[hidden]{display:none !important}
.ac-item{
  display:flex !important; justify-content:space-between; align-items:center; gap:.6rem;
  padding:.7rem .8rem; border-radius:8px; cursor:pointer; font-size:.92rem;
  transition:background .12s; list-style:none; line-height:1.3;
}
.ac-item:hover,.ac-item.active{background:var(--green-50)}
.ac-city{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-state{font-size:.76rem;color:var(--slate);white-space:nowrap;flex-shrink:0}
.ac-empty{padding:.9rem .8rem;color:var(--slate);font-size:.88rem;text-align:center}
/* the searchbox must not clip the dropdown */
.searchbox,.sb-body{overflow:visible}

/* Custom budget row */
.sb-custom{display:flex;gap:.8rem;align-items:end;padding:.9rem 1.2rem 1.1rem;border-top:1px solid var(--line);background:var(--soft);
  border-radius:0 0 14px 14px;flex-wrap:wrap}
.sb-custom .sb-field{flex:1;min-width:140px}
.sb-custom input{width:100%;border:1px solid var(--line);border-radius:8px;padding:.7rem .8rem;font-family:var(--body);font-size:.92rem}

/* Construction/Interior estimate panel — same shell as the search form */
.sb-service{align-items:end}
.sb-service .sb-field{flex:1;min-width:180px}

/* Search bar responsive: stack cleanly on tablet/mobile */
@media(max-width:1024px){
  .sb-body{grid-template-columns:1fr 1fr 1fr;gap:.8rem}
  .sb-search{grid-column:1/-1}
}
@media(max-width:640px){
  .sb-body{grid-template-columns:1fr;gap:.7rem;padding:1rem}
  .sb-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sb-tabs button{flex:0 0 auto;font-size:.82rem;padding:.7rem .9rem;white-space:nowrap}
  .sb-search{width:100%;justify-content:center;padding:.9rem}
  .ac-list{max-height:240px}
  .sb-custom{padding:.8rem 1rem 1rem}
  .sb-service{flex-direction:column;align-items:stretch}
}
@media(max-width:400px){
  .sb-tabs button{font-size:.78rem;padding:.65rem .75rem}
}

/* ============================================================
   Professional polish — hero, searchbox, cards, buttons
   ============================================================ */
/* Hero: stronger contrast + subtle gradient scrim so text always reads */
.phero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,44,54,.55) 0%,rgba(8,44,54,.35) 45%,rgba(8,44,54,.65) 100%);z-index:1}
.phero-inner{position:relative;z-index:2}
.phero-inner h1{letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,0,0,.25)}

/* Searchbox: elevated card, crisp tabs */
.searchbox{box-shadow:0 30px 70px -30px rgba(0,0,0,.55);border-radius:16px;overflow:visible}
.sb-tabs{background:rgba(255,255,255,.94);border-radius:16px 16px 0 0;padding:.35rem .35rem 0;gap:.15rem}
.sb-tabs button{border-radius:10px 10px 0 0;font-weight:700;letter-spacing:.01em;position:relative;transition:.18s;background:transparent;border:0;cursor:pointer;padding:.85rem 1.5rem;color:var(--slate)}
.sb-tabs button:hover{color:var(--green);background:rgba(10,92,74,.05)}
.sb-tabs button.active{background:#fff;color:var(--green)}
.sb-tabs button.active::after{content:'';position:absolute;left:1.1rem;right:1.1rem;bottom:0;height:3px;background:var(--green);border-radius:3px 3px 0 0}
.sb-body{background:#fff;border-radius:0 0 16px 16px;padding:1.3rem 1.2rem}
.sb-field label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--slate);margin-bottom:.3rem;display:block}
.sb-field input,.sb-field select{border:1px solid var(--line);border-radius:10px;padding:.8rem .85rem;font-size:.95rem;width:100%;background:#fff;transition:.15s;font-family:var(--body)}
.sb-field input:focus,.sb-field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(10,92,74,.12)}
.sb-search{padding:.85rem 1.6rem;border-radius:10px;font-weight:800;letter-spacing:.01em;box-shadow:0 8px 20px -8px rgba(10,92,74,.6)}
.sb-search:hover{transform:translateY(-1px)}

/* Cards: refined depth + smoother hover */
.pcard{border-radius:14px;overflow:hidden;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s}
.pcard-price{letter-spacing:-.01em}
.pcard-btn{border-radius:8px;font-weight:700}

/* Buttons: crisper */
.btn{transition:transform .15s,background .18s,box-shadow .18s}
.btn-primary:hover{transform:translateY(-1px)}

/* Touch targets on mobile */
@media(max-width:640px){
  .btn,.sb-search{min-height:46px}
  .sb-field input,.sb-field select{min-height:46px;font-size:16px} /* 16px stops iOS zoom-on-focus */
  .phero-inner h1{font-size:clamp(1.9rem,7vw,2.6rem)}
  .phero-inner p{font-size:.95rem}
  .pcard-actions{flex-direction:column}
  .pcard-btn{width:100%}
}
.sb-field.is-hidden{display:none !important}
.ac-list[hidden]{display:none !important}

/* ============================================================
   SEARCH BAR — authoritative layout (overrides all earlier rules)
   Flex so it adapts when Min Area appears/disappears.
   ============================================================ */
.searchbox{position:relative;overflow:visible}
.sb-body{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem;
  padding:1.25rem 1.2rem; background:#fff; border-radius:0 0 16px 16px;
}
/* hidden inputs must never occupy layout space */
.sb-body > input[type="hidden"]{display:none !important}

.sb-field{display:flex;flex-direction:column;min-width:0;flex:1 1 120px}
.sb-field.sb-loc{flex:1.8 1 200px}        /* location gets more room */
.sb-field.is-hidden{display:none !important}

.sb-search{flex:0 0 auto;white-space:nowrap;align-self:flex-end;height:46px}

/* Dropdown floats above everything, anchored to the location field */
.sb-loc{position:relative}
.ac-list{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.4);
  z-index:200; max-height:290px; overflow-y:auto;
  list-style:none; margin:0; padding:.35rem;
}
.ac-list[hidden]{display:none !important}
.ac-item{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.7rem .8rem; border-radius:8px; cursor:pointer; font-size:.92rem;
  min-height:auto;                       /* don't inherit the 46px touch rule */
}
.ac-item:hover,.ac-item.active{background:var(--green-50)}
.ac-city{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.ac-state{font-size:.76rem;color:var(--slate);white-space:nowrap;flex:0 0 auto}

/* Custom budget row sits below the form, inside .searchbox */
.sb-custom{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;
  padding:.9rem 1.2rem 1.1rem;border-top:1px solid var(--line);background:var(--soft);
  border-radius:0 0 16px 16px}
.sb-custom .sb-field{flex:1 1 160px}
.sb-custom[hidden]{display:none !important}
/* when custom row is open, the form shouldn't round its bottom corners */
.searchbox:has(.sb-custom:not([hidden])) .sb-body{border-radius:0}

@media(max-width:1024px){
  .sb-field{flex:1 1 45%}
  .sb-field.sb-loc{flex:1 1 100%}
  .sb-search{flex:1 1 100%;justify-content:center}
}
@media(max-width:640px){
  .sb-body{padding:1rem;gap:.65rem}
  .sb-field,.sb-field.sb-loc{flex:1 1 100%}
  .ac-item{min-height:44px}              /* comfortable tap target on phones */
  .ac-list{max-height:250px}
}
/* normalise label + control heights so every field aligns on one baseline */
.sb-body .sb-field label{min-height:1.05rem;line-height:1.05rem;margin:0 0 .35rem;display:block}
.sb-body .sb-field input,.sb-body .sb-field select{height:46px}

/* ============================================================
   FIX: mobile header overflow (logo + Sign in + burger > viewport)
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}   /* hard stop on sideways scroll */

@media(max-width:760px){
  .ph-top{gap:.5rem;min-width:0}
  .ph-logo{flex:1 1 auto;min-width:0;font-size:1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .ph-logo img{width:28px;height:28px;flex-shrink:0}
  .ph-actions{gap:.4rem;flex-shrink:0}
  .ph-signin-btn{padding:.45rem .7rem;font-size:.82rem;white-space:nowrap}
  .ph-burger{padding:6px;margin-right:-2px}
  .ph-burger span{width:22px}
}
@media(max-width:380px){
  .ph-logo{font-size:.92rem}
  .ph-signin-btn{padding:.4rem .55rem;font-size:.78rem}
}

/* ============================================================
   v20 POLISH — hierarchy, depth, craft
   Signature: the PRICE is the most confident element on the page.
   ============================================================ */
:root{
  --display:'Archivo','Plus Jakarta Sans',system-ui,sans-serif;
  /* elevation scale — replaces one flat shadow everywhere */
  --e1:0 1px 2px rgba(16,24,32,.06), 0 1px 3px rgba(16,24,32,.04);
  --e2:0 4px 10px -2px rgba(16,24,32,.08), 0 2px 6px -2px rgba(16,24,32,.05);
  --e3:0 12px 28px -8px rgba(16,24,32,.14), 0 4px 10px -4px rgba(16,24,32,.07);
  --e4:0 28px 60px -18px rgba(16,24,32,.26);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* --- Typography: display face earns its place on headings + data --- */
h1,h2,h3,.pcard-price,.pd-price,.dash-card .n,.stat-card .n{
  font-family:var(--display); letter-spacing:-.021em;
}
h1{font-weight:800}
h2,h3{font-weight:700}
/* tabular figures so ₹ columns line up down a listing page */
.pcard-price,.pd-price,.pcard-meta,.spec-list,.dash-card .n{font-variant-numeric:tabular-nums}

/* --- SIGNATURE: price gets real presence --- */
.pcard-price{
  font-size:1.32rem; font-weight:800; color:var(--ink); line-height:1.15;
  display:flex; align-items:baseline; gap:.3rem;
}
.pcard-price small{font-size:.7rem;font-weight:600;color:var(--slate);letter-spacing:0}
.pd-price{font-size:2rem;font-weight:800;line-height:1.1}

/* --- Cards: layered depth + intentional hover --- */
.pcard{box-shadow:var(--e1); border:1px solid var(--line); background:#fff}
.pcard:hover{box-shadow:var(--e3); transform:translateY(-3px); border-color:#dfe3e8}
.pcard-media img{transition:transform .5s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.045)}
.pcard-title{font-weight:700;letter-spacing:-.01em}
/* quiet the badges so price leads */
.pcard-verified{background:rgba(31,143,78,.94);font-size:.62rem;letter-spacing:.05em}
.pcard-badge{background:rgba(16,24,32,.72);font-size:.62rem}

/* --- Searchbox: one deliberate elevation --- */
.searchbox{box-shadow:var(--e4)}

/* --- Buttons: crisper press feedback --- */
.btn{transition:transform .12s var(--ease), box-shadow .18s var(--ease), background .18s}
.btn-primary{box-shadow:var(--e1)}
.btn-primary:hover{box-shadow:var(--e2)}
.btn:active{transform:translateY(1px)}

/* --- Section rhythm: consistent vertical spacing --- */
.psec{padding:3.5rem 0}
.psec-head{margin-bottom:1.6rem}
.psec-head h2{font-size:clamp(1.35rem,2.4vw,1.8rem)}

/* --- Craft floor: keyboard focus that's actually visible --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--green); outline-offset:2px; border-radius:6px;
}
/* Respect users who get motion sickness */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .pcard:hover{transform:none}
  .pcard:hover .pcard-media img{transform:none}
}

@media(max-width:640px){
  .psec{padding:2.4rem 0}
  .pcard-price{font-size:1.2rem}
  .pd-price{font-size:1.65rem}
}


/* ============================================================
   Build & Interiors services page
   ============================================================ */
.svc-hero{background:linear-gradient(135deg,var(--green-700),var(--green));color:#fff;padding:4rem 0 3.5rem}
.svc-hero-inner{max-width:720px}
.svc-eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.15);color:#fff;padding:.35rem .8rem;border-radius:100px;margin-bottom:1rem}
.svc-hero h1{font-family:var(--display);font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:1rem}
.svc-hero p{font-size:1.05rem;opacity:.95;line-height:1.6;margin-bottom:1.6rem}
.svc-hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.svc-hero-actions .btn-outline{border-color:rgba(255,255,255,.5);color:#fff}
.svc-hero-actions .btn-outline:hover{background:rgba(255,255,255,.12)}

.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:2rem;box-shadow:var(--e1);transition:.25s var(--ease)}
.svc-card:hover{box-shadow:var(--e3);transform:translateY(-3px)}
.svc-icon{font-size:2.4rem;margin-bottom:.6rem}
.svc-card h3{font-family:var(--display);font-size:1.4rem;margin-bottom:.5rem}
.svc-card > p{color:var(--slate);line-height:1.6;margin-bottom:1rem}
.svc-list{list-style:none;padding:0;margin:0}
.svc-list li{padding:.45rem 0 .45rem 1.6rem;position:relative;border-top:1px solid var(--line);font-size:.94rem}
.svc-list li:first-child{border-top:0}
.svc-list li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:800}

.svc-how{background:var(--soft)}
.svc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.svc-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.2rem;text-align:center}
.svc-step-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--green);color:#fff;font-family:var(--display);font-weight:800;font-size:1.2rem;margin-bottom:.8rem}
.svc-step h4{font-size:1rem;margin-bottom:.35rem}
.svc-step p{font-size:.86rem;color:var(--slate);line-height:1.5}

.svc-enquire{display:grid;grid-template-columns:1fr 1.1fr;gap:2.5rem;align-items:start}
.svc-enquire-copy h2{font-family:var(--display);font-size:1.8rem;margin-bottom:.7rem}
.svc-enquire-copy p{color:var(--slate);line-height:1.6;margin-bottom:1.3rem}
.svc-assure{display:flex;flex-direction:column;gap:.6rem;font-weight:600;color:var(--green-700)}
.svc-enquire-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.8rem;box-shadow:var(--e2)}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

@media(max-width:860px){
  .svc-grid{grid-template-columns:1fr}
  .svc-steps{grid-template-columns:1fr 1fr}
  .svc-enquire{grid-template-columns:1fr;gap:1.6rem}
}
@media(max-width:560px){
  .svc-steps{grid-template-columns:1fr}
  .fg-row{grid-template-columns:1fr}
  .svc-hero{padding:3rem 0 2.5rem}
}

/* Homepage Build & Interiors promo banner */
.svc-promo{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  background:linear-gradient(120deg,var(--green-700),var(--green));color:#fff;
  border-radius:18px;padding:2rem 2.2rem;text-decoration:none;overflow:hidden;
  box-shadow:var(--e2);transition:.25s var(--ease)}
.svc-promo:hover{box-shadow:var(--e3);transform:translateY(-2px)}
.svc-promo-text{max-width:640px}
.svc-promo h2{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.9rem);color:#fff;margin:.6rem 0 .5rem;line-height:1.15}
.svc-promo p{opacity:.94;line-height:1.55;margin-bottom:.9rem}
.svc-promo-cta{font-weight:800;color:#fff;border-bottom:2px solid rgba(255,255,255,.5);padding-bottom:2px}
.svc-promo-emoji{font-size:3.5rem;flex-shrink:0;line-height:1}
@media(max-width:640px){
  .svc-promo{flex-direction:column;text-align:center;padding:1.6rem}
  .svc-promo-emoji{font-size:2.6rem}
}

/* ============================================================
   v25 HERO — uploaded image background, effective overlay text
   ============================================================ */
.phero{position:relative;width:100%;min-height:clamp(480px,60vh,680px);display:flex;align-items:center;overflow:hidden;background:var(--navy-900,#0a1730)}
.phero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;z-index:0}
/* rich navy scrim: darker left for text, lighter right to show the art */
.phero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,23,48,.82) 0%,rgba(10,23,48,.58) 38%,rgba(10,23,48,.22) 70%,rgba(10,23,48,.10) 100%);}
.phero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:2rem 1.25rem;width:100%}
.phero-eyebrow{display:inline-block;color:var(--gold);font-weight:800;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.7rem;padding:.4rem .9rem;border:1px solid rgba(201,164,78,.4);
  border-radius:100px;background:rgba(201,164,78,.08);backdrop-filter:blur(4px)}
.phero h1{font-family:var(--display);color:#fff;font-size:clamp(1.7rem,3.8vw,2.9rem);line-height:1.08;
  letter-spacing:-.025em;font-weight:800;margin-bottom:.7rem;text-shadow:0 2px 24px rgba(0,0,0,.35);max-width:15ch}
.phero p{color:rgba(255,255,255,.92);font-size:clamp(.94rem,1.3vw,1.05rem);line-height:1.5;
  max-width:52ch;margin-bottom:1.2rem;text-shadow:0 1px 12px rgba(0,0,0,.3)}

/* Search box floats on a bright card over the image */
.phero .searchbox{max-width:960px;box-shadow:var(--e4);border-radius:var(--radius-lg)}
.phero .sb-tabs{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.phero .sb-body{border-radius:0 0 var(--radius-lg) var(--radius-lg)}

@media(max-width:640px){
  .phero{min-height:0;padding:0}
  .phero-bg{object-position:center 30%}
  .phero::after{background:linear-gradient(180deg,rgba(10,23,48,.78),rgba(10,23,48,.72))}
  .phero-inner{padding:2.25rem 1rem}
  .phero h1{font-size:1.85rem;max-width:100%}
  .phero p{font-size:.98rem;margin-bottom:1.4rem}
}

/* ============================================================
   Construction cost estimator
   ============================================================ */
.est-wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:1.5rem;align-items:stretch}
.est-controls{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--e1)}
.est-field{margin-bottom:1.6rem}
.est-field:last-child{margin-bottom:0}
.est-field > label{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.95rem;margin-bottom:.7rem}
.est-field > label b{color:var(--navy);font-family:var(--display)}
input[type=range]{width:100%;accent-color:var(--navy);height:6px}
.est-range-ends{display:flex;justify-content:space-between;font-size:.72rem;color:var(--slate);margin-top:.3rem}
.est-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.est-options-2{grid-template-columns:1fr 1fr}
.est-options button{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .5rem;border:1.5px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer;transition:.15s;text-align:center;font-family:inherit}
.est-options button b{font-size:.92rem;color:var(--ink)}
.est-options button span{font-size:.72rem;color:var(--slate)}
.est-options button:hover{border-color:var(--navy)}
.est-options button.active{border-color:var(--navy);background:var(--navy-50);box-shadow:inset 0 0 0 1px var(--navy)}

.est-result{background:linear-gradient(150deg,var(--navy),var(--navy-900));border-radius:var(--radius-lg);
  color:#fff;display:flex;align-items:center;box-shadow:var(--e3);overflow:hidden}
.est-result-inner{padding:2rem;width:100%}
.est-result-label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700}
.est-amount{font-family:var(--display);font-size:2.6rem;font-weight:800;line-height:1.1;margin:.4rem 0 1rem;
  color:#fff;font-variant-numeric:tabular-nums}
.est-break{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;border-top:1px solid rgba(255,255,255,.15);padding-top:1rem}
.est-break div{display:flex;justify-content:space-between;font-size:.9rem}
.est-break span{color:rgba(255,255,255,.75)}
.est-break b{color:var(--gold);font-variant-numeric:tabular-nums}
.est-note{font-size:.76rem;color:rgba(255,255,255,.65);line-height:1.5;margin-bottom:1.2rem}

@media(max-width:860px){ .est-wrap{grid-template-columns:1fr} }
@media(max-width:480px){ .est-options{grid-template-columns:1fr} .est-amount{font-size:2.1rem} }

/* ============================================================
   v26 — Modern floating contact buttons (FAB rail)
   Separated circular pills that expand to a label on hover.
   ============================================================ */
.fab-rail{position:fixed;right:20px;bottom:24px;z-index:200;display:flex;flex-direction:column;gap:12px}
.fab{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;color:#fff;text-decoration:none;
  box-shadow:0 8px 22px -6px rgba(19,42,74,.45), 0 2px 6px rgba(0,0,0,.12);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), width .25s var(--ease);
  overflow:hidden;white-space:nowrap;
}
.fab svg{flex:0 0 auto;transition:margin .25s var(--ease)}
.fab-tip{
  max-width:0;opacity:0;font-size:.8rem;font-weight:700;letter-spacing:.01em;
  transition:max-width .25s var(--ease), opacity .2s var(--ease), margin .25s var(--ease);
}
.fab:hover{width:auto;padding:0 20px 0 15px;border-radius:100px;transform:translateY(-2px);
  box-shadow:0 12px 28px -6px rgba(19,42,74,.5), 0 4px 10px rgba(0,0,0,.15)}
.fab:hover .fab-tip{max-width:120px;opacity:1;margin-left:9px}
.fab:hover svg{margin:0}
.fab-call{background:linear-gradient(135deg,#1e7a4f,#12603c)}   /* call = green, but refined */
.fab-wa{background:linear-gradient(135deg,#25d366,#128c7e)}     /* whatsapp brand */
.fab-enq{background:linear-gradient(135deg,var(--gold),var(--gold-600))} /* enquire = gold */
.fab:focus-visible{outline:3px solid rgba(255,255,255,.6);outline-offset:2px}

/* subtle pulse ring on the WhatsApp button to draw the eye, once */
.fab-wa::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:fabPulse 2.4s ease-out 3}
@keyframes fabPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){.fab-wa::after{animation:none}}

/* Mobile: keep them, slightly smaller, above the bottom of the screen */
@media(max-width:640px){
  .fab-rail{right:14px;bottom:16px;gap:10px}
  .fab{width:50px;height:50px}
  .fab:hover{width:50px;padding:0;border-radius:50%}   /* no hover-expand on touch */
  .fab:hover .fab-tip{max-width:0;opacity:0;margin:0}
}

/* ============================================================
   v26 — Search bar refinement (premium, professional)
   ============================================================ */
.phero .searchbox{border:1px solid rgba(255,255,255,.6)}
.sb-tabs{padding:.4rem .5rem 0;gap:.3rem;background:#fff}
.sb-tabs button{font-size:.95rem;font-weight:700;padding:.85rem 1.4rem;color:var(--slate);position:relative;border:0;background:none;cursor:pointer;border-radius:10px 10px 0 0}
.sb-tabs button.active{color:var(--navy)}
.sb-tabs button.active::after{content:'';position:absolute;left:1.4rem;right:1.4rem;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--navy),var(--gold));border-radius:3px}

.sb-body{padding:1.4rem;gap:1rem}
.sb-field label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);margin-bottom:.4rem;display:block}
.sb-field input,.sb-field select{
  border:1.5px solid var(--line);border-radius:11px;padding:.85rem .9rem;font-size:.95rem;width:100%;
  background:var(--soft);transition:.18s var(--ease);font-family:var(--body);color:var(--ink);appearance:none;
}
.sb-field input:hover,.sb-field select:hover{border-color:#c7cfda}
.sb-field input:focus,.sb-field select:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 4px rgba(19,42,74,.10)}
.sb-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6675' d='M6 8L0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem}
.sb-field input::placeholder{color:#9aa4b2}

.sb-search{
  align-self:flex-end;background:linear-gradient(135deg,var(--navy),var(--navy-900));color:#fff;
  border:0;border-radius:11px;padding:.9rem 1.8rem;font-weight:800;font-size:.98rem;cursor:pointer;
  display:flex;align-items:center;gap:.5rem;box-shadow:0 8px 20px -8px rgba(19,42,74,.6);
  transition:.18s var(--ease);white-space:nowrap;height:auto;min-height:52px;
}
.sb-search:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(19,42,74,.65)}
.sb-search:active{transform:translateY(0)}

/* the autocomplete dropdown, refined */
.ac-list{border-radius:12px;box-shadow:var(--e3);border:1px solid var(--line);padding:.4rem}
.ac-item{padding:.75rem .85rem;border-radius:9px}
.ac-item:hover,.ac-item.active{background:var(--navy-50)}
.ac-city{font-weight:700;color:var(--ink)}

/* ============================================================
   Legal / policy pages
   ============================================================ */
.legal-wrap{max-width:800px}
.legal-wrap h1{font-family:var(--display);font-size:2rem;margin-bottom:.3rem}
.legal-wrap h2{font-size:1.15rem;margin:1.8rem 0 .5rem;color:var(--navy)}
.legal-wrap p,.legal-wrap li{color:var(--slate);line-height:1.7}
.legal-list{margin:.5rem 0 .5rem 1.2rem}
.legal-list li{margin-bottom:.4rem}
.legal-callout{background:var(--gold-50);border:1px solid var(--gold);border-left:4px solid var(--gold);
  border-radius:10px;padding:1rem 1.2rem;margin:1.2rem 0;color:var(--ink);line-height:1.6}

/* Subscription page */
.sub-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--e2);max-width:480px}
.sub-status{padding:.7rem 1rem;border-radius:10px;font-size:.9rem;margin-bottom:1.2rem;font-weight:600}
.sub-status.on{background:#e8f6ee;color:#1f8f4e}
.sub-status.off{background:var(--soft);color:var(--slate)}
.sub-price{font-family:var(--display);font-size:1.1rem;color:var(--slate);margin-bottom:1rem}
.sub-price span{font-size:2.4rem;font-weight:800;color:var(--navy)}
.sub-benefits{list-style:none;padding:0;margin:0 0 1.5rem}
.sub-benefits li{padding:.5rem 0 .5rem 1.7rem;position:relative;border-top:1px solid var(--line);font-size:.94rem}
.sub-benefits li:first-child{border-top:0}
.sub-benefits li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:800}

/* ============================================================
   v28 — AUTHORITATIVE search bar + mobile responsiveness
   (appended last = wins over all earlier conflicting rules)
   ============================================================ */

/* --- Search bar: clean flex, desktop --- */
.sb-body{display:flex !important;flex-wrap:wrap;align-items:flex-end;gap:.85rem;padding:1.4rem}
.sb-body > input[type="hidden"]{display:none !important}
.sb-field{flex:1 1 150px;min-width:0;display:flex;flex-direction:column}
.sb-field.sb-loc{flex:2 1 220px}
.sb-search{flex:0 0 auto;align-self:flex-end;min-height:52px;white-space:nowrap}

/* --- Tablet: 2 per row, search full width --- */
@media(max-width:900px){
  .sb-field{flex:1 1 calc(50% - .5rem)}
  .sb-field.sb-loc{flex:1 1 100%}
  .sb-search{flex:1 1 100%;justify-content:center;margin-top:.2rem}
}

/* --- Mobile: everything stacks full width --- */
@media(max-width:600px){
  .sb-body{gap:.7rem;padding:1.1rem}
  .sb-field,.sb-field.sb-loc{flex:1 1 100% !important}
  .sb-field input,.sb-field select{font-size:16px;min-height:50px}  /* 16px stops iOS zoom */
  .sb-search{width:100%;min-height:52px;font-size:1rem}
  .sb-tabs{overflow-x:auto}
  .sb-tabs button{padding:.8rem 1rem;font-size:.92rem;white-space:nowrap}
}

/* ============================================================
   v28 — Mobile hero: shorter, text sized right
   ============================================================ */
@media(max-width:600px){
  .phero{min-height:auto;padding:1.5rem 0 2rem}
  .phero-bg{object-position:center 30%}
  .phero::after{background:linear-gradient(180deg,rgba(10,23,48,.82),rgba(10,23,48,.74))}
  .phero-inner{padding:1.75rem 1rem}
  .phero-eyebrow{font-size:.66rem;padding:.35rem .7rem;margin-bottom:.8rem}
  .phero h1{font-size:1.6rem;line-height:1.15;max-width:100%;margin-bottom:.7rem}
  .phero p{font-size:.95rem;line-height:1.55;margin-bottom:1.3rem}
}
@media(max-width:380px){
  .phero h1{font-size:1.42rem}
  .phero p{font-size:.9rem}
}

/* ============================================================
   v28 — General mobile polish across the site
   ============================================================ */
@media(max-width:600px){
  /* section spacing tighter */
  .psec{padding:2.2rem 0}
  .psec-head h2,.psec h2{font-size:1.35rem}
  /* property grid: 1 column, comfortable */
  .pgrid{grid-template-columns:1fr !important;gap:1rem}
  /* chips row scrolls instead of wrapping messily */
  .hero-chips,.chip-row{display:flex;overflow-x:auto;gap:.6rem;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
  .hero-chips::-webkit-scrollbar,.chip-row::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
  /* build/interiors + estimator stack */
  .svc-grid,.est-wrap,.svc-enquire,.svc-steps{grid-template-columns:1fr !important}
  .est-options{grid-template-columns:1fr 1fr}
  /* legal + forms comfortable */
  .aform-row{grid-template-columns:1fr !important}
  /* container padding */
  .container{padding-left:16px;padding-right:16px}
}

/* Tablet property grid */
@media(min-width:601px) and (max-width:900px){
  .pgrid{grid-template-columns:1fr 1fr !important}
}

/* Build & Interiors hero image background */
.svc-hero{position:relative;overflow:hidden}
.svc-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.svc-hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,23,48,.88) 0%,rgba(10,23,48,.72) 45%,rgba(10,23,48,.45) 100%)}
.svc-hero-inner{position:relative;z-index:2}
.svc-hero .svc-eyebrow{color:var(--gold);border-color:rgba(201,164,78,.4);background:rgba(201,164,78,.08)}
.svc-hero h1,.svc-hero p{color:#fff}
.svc-hero p{opacity:.94}

/* ============================================================
   v30 — Professional auth pages (login / register)
   ============================================================ */
.auth-section{padding:3rem 1.25rem;max-width:var(--maxw);margin:0 auto}
.auth-shell{display:grid;grid-template-columns:1fr 1.1fr;gap:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--e3);max-width:920px;margin:0 auto}
.auth-aside{background:linear-gradient(150deg,var(--navy),var(--navy-900));color:#fff;padding:2.6rem;display:flex;align-items:center}
.auth-aside-inner h2{font-family:var(--display);font-size:1.7rem;margin-bottom:.7rem;color:#fff}
.auth-aside-inner p{opacity:.9;line-height:1.6;margin-bottom:1.4rem}
.auth-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem}
.auth-points li{padding-left:1.7rem;position:relative;opacity:.95;font-size:.94rem}
.auth-points li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:800}

.auth-main{padding:2.6rem}
.auth-form-wrap{max-width:380px;margin:0 auto}
.auth-form-wrap h1{font-family:var(--display);font-size:1.7rem;margin-bottom:.3rem}
.auth-sub{color:var(--slate);font-size:.9rem;margin-bottom:1.4rem}
.auth-sub a{color:var(--navy);font-weight:700}

.btn-google{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;
  padding:.85rem;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);
  font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none;transition:.15s}
.btn-google:hover{border-color:#c7cfda;background:var(--soft);box-shadow:var(--e1)}
.auth-or{display:flex;align-items:center;text-align:center;color:var(--slate);font-size:.82rem;margin:1.1rem 0}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-or span{padding:0 .8rem}

.auth-remember{display:flex;align-items:center;gap:.5rem;font-size:.88rem;margin-bottom:1rem;color:var(--slate)}
.auth-remember input{width:auto}
.auth-foot{text-align:center;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.auth-foot a{color:var(--slate);font-size:.85rem}
.auth-foot b{color:var(--navy)}

.phone-row{display:flex;gap:.5rem;align-items:stretch}
.phone-row .dialcode-box{width:80px !important;min-width:80px;max-width:80px;flex:0 0 80px;text-align:center;background:var(--soft);font-weight:700;color:var(--navy)}
.phone-row .phone-input{flex:1 1 auto;width:auto !important;min-width:0}

@media(max-width:760px){
  .auth-shell{grid-template-columns:1fr;max-width:440px}
  .auth-aside{display:none}
  .auth-main{padding:2rem 1.5rem}
}

/* ============================================================
   v30 — Homepage construction/interior enquiry band
   ============================================================ */
.ci-band{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-900));border-radius:var(--radius-lg);
  padding:2.2rem;box-shadow:var(--e3);color:#fff;overflow:hidden}
.ci-band-left h2{font-family:var(--display);font-size:1.6rem;color:#fff;margin:.6rem 0 .5rem;line-height:1.2}
.ci-band-left p{opacity:.9;line-height:1.6;margin-bottom:1rem}
.ci-band-link{color:var(--gold);font-weight:800;text-decoration:none}
.ci-band-link:hover{text-decoration:underline}
.ci-band-form{background:#fff;border-radius:14px;padding:1.4rem;box-shadow:var(--e2)}
.ci-quick-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem}
.ci-quick .fg{margin:0}
.ci-quick .fg label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-bottom:.3rem;display:block}
.ci-quick .fg input,.ci-quick .fg select{width:100%;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:10px;font-size:.92rem;background:var(--soft)}
.ci-quick .fg input:focus,.ci-quick .fg select:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(19,42,74,.1)}

@media(max-width:820px){
  .ci-band{grid-template-columns:1fr;gap:1.4rem;padding:1.6rem}
}
@media(max-width:480px){
  .ci-quick-row{grid-template-columns:1fr}
}

/* ============================================================
   v31 — Homepage service entry cards
   ============================================================ */
.svc-entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.svc-entry{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.8rem;text-decoration:none;color:var(--ink);transition:.25s var(--ease);box-shadow:var(--e1)}
.svc-entry:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--navy)}
.svc-entry-gold{background:linear-gradient(150deg,var(--gold-50),#fff);border-color:var(--gold)}
.svc-entry-icon{font-size:2.4rem;margin-bottom:.6rem}
.svc-entry h3{font-family:var(--display);font-size:1.25rem;margin-bottom:.4rem;color:var(--navy)}
.svc-entry p{color:var(--slate);font-size:.92rem;line-height:1.55;margin-bottom:.8rem}
.svc-entry-cta{font-weight:800;color:var(--navy);font-size:.9rem}
.svc-entry-gold .svc-entry-cta{color:var(--gold-600)}
@media(max-width:820px){.svc-entry-grid{grid-template-columns:1fr}}

/* v31 — wide auth shell for company register + segment fix */
.auth-shell-wide{max-width:1000px}
.auth-form-wide{max-width:520px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.seg-3{grid-template-columns:repeat(3,1fr)}
.seg label{position:relative;display:block;cursor:pointer}
.seg label input{position:absolute;opacity:0}
.seg label span{display:block;text-align:center;padding:.7rem .5rem;border:1.5px solid var(--line);
  border-radius:10px;font-size:.86rem;font-weight:600;color:var(--slate);transition:.15s;line-height:1.3}
.seg label input:checked + span{border-color:var(--navy);background:var(--navy-50);color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.seg label span:hover{border-color:var(--navy)}
@media(max-width:520px){.seg-3{grid-template-columns:1fr}}

/* v32 — Google role buttons on partner register */
.google-role-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.btn-google-sm{padding:.6rem .4rem;font-size:.82rem;gap:.35rem}
@media(max-width:480px){.google-role-row{grid-template-columns:1fr}}

/* v36 — property form map + geo buttons */
.geo-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.3rem}
.geo-btns .geo-btn{flex:0 1 auto}
#propMap{background:#eef2f6}
.leaflet-container{font:inherit}
@media(max-width:560px){.geo-btns{flex-direction:column}.geo-btns .geo-btn{width:100%}}

/* v37 — rich search box on listings page (not over hero) */
.listing-search{max-width:var(--maxw);margin:1.2rem auto 0;box-shadow:var(--e2);border:1px solid var(--line)}
.listing-search .sb-body{border-radius:var(--radius-lg)}

/* v37 — professional quotation builder */
.quote-add-row{display:flex;gap:.6rem;margin-bottom:.8rem;flex-wrap:wrap}
.quote-add-row select{flex:1;min-width:240px;padding:.6rem .7rem;border:1.5px solid var(--line);border-radius:9px}
.quote-table{width:100%;border-collapse:collapse;margin-bottom:.5rem}
.quote-table th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);padding:.4rem .5rem;border-bottom:2px solid var(--line)}
.quote-table td{padding:.35rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}
.quote-table input{width:100%;padding:.5rem .6rem;border:1px solid var(--line);border-radius:7px;font-size:.9rem}
.quote-table .q-amt{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.q-del{background:#fdecea;color:#c0392b;border:none;width:26px;height:26px;border-radius:6px;font-size:1.1rem;cursor:pointer;line-height:1}
.q-del:hover{background:#f5b7b1}
@media(max-width:640px){
  .quote-table{display:block;overflow-x:auto;white-space:nowrap}
}

/* v38 — auth polish: better touch targets, smoother inputs, mobile spacing */
.pform input, .pform select, .pform textarea{transition:border-color .15s, box-shadow .15s}
.pform input:focus, .pform select:focus, .pform textarea:focus{box-shadow:0 0 0 3px rgba(19,42,74,.12)}
.auth-form-wrap .btn-block{padding:.95rem;font-size:1rem;font-weight:800}
@media(max-width:640px){
  .auth-section{padding:1.5rem .9rem}
  .auth-main{padding:1.6rem 1.2rem}
  .auth-form-wrap h1{font-size:1.45rem}
  .pform input, .pform select{padding:.85rem .9rem;font-size:16px} /* 16px stops iOS zoom */
  .btn-google{padding:.9rem}
  .seg label span{padding:.85rem .5rem}
  .phone-row .dialcode-box{width:72px;min-width:72px;flex:0 0 72px}
}
/* smoother segmented controls */
.seg label span{transition:all .15s}

/* v41 — camera capture + gallery choose buttons */
.gallery-upload-row{display:flex;gap:.7rem;flex-wrap:wrap}
.upload-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 1.1rem;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;font-weight:700;font-size:.9rem;cursor:pointer;transition:.15s;color:var(--ink)}
.upload-btn:hover{border-color:var(--navy,#132a4a);background:var(--soft)}
.upload-btn-camera{border-color:var(--gold,#c39a4e);color:var(--gold-600,#a97e2f)}
.upload-btn-camera:hover{background:var(--gold-50,#fdf7ec)}
.gal-preview{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.gal-chip{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:.3rem .6rem;font-size:.78rem;color:var(--slate);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:480px){.gallery-upload-row{flex-direction:column}.upload-btn{justify-content:center}}

/* v41 — construction & interiors offer banner on property detail */
.ci-offer-banner{display:flex;align-items:center;gap:1rem;background:linear-gradient(135deg,var(--navy,#132a4a),var(--navy-900,#0a1730));
  color:#fff;border-radius:14px;padding:1.1rem 1.3rem;margin:1.2rem 0;box-shadow:var(--e2)}
.ci-offer-icon{font-size:2rem;flex-shrink:0}
.ci-offer-text{flex:1}
.ci-offer-text strong{display:block;font-size:1rem;margin-bottom:.2rem}
.ci-offer-text p{font-size:.85rem;opacity:.9;margin:0}
@media(max-width:600px){.ci-offer-banner{flex-direction:column;text-align:center}}

/* v42 — role pill badge on partner Google completion page */
.role-pill{display:inline-block;background:var(--navy,#132a4a);color:#fff;padding:.25rem .8rem;
  border-radius:20px;font-size:.8rem;font-weight:700;letter-spacing:.02em}

/* ============================================================
   v45 — Mobile bottom navigation bar
   ============================================================ */
.mobile-bar{display:none}
@media(max-width:760px){
  .mobile-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:300;
    background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(0,0,0,.08);
    padding:.35rem .2rem calc(.35rem + env(safe-area-inset-bottom,0px));
  }
  .mbar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
    padding:.4rem .2rem;color:var(--slate);text-decoration:none;font-size:.68rem;font-weight:700;
    border-radius:10px;transition:.15s}
  .mbar-item svg{flex-shrink:0}
  .mbar-item.active{color:var(--navy,#132a4a)}
  .mbar-item.active svg{stroke:var(--navy,#132a4a)}
  .mbar-item-cta{color:var(--gold-600,#a97e2f)}
  .mbar-item-cta svg{stroke:var(--gold-600,#a97e2f)}
  .mbar-item-cta.active{color:var(--navy,#132a4a)}
  .mbar-item-cta.active svg{stroke:var(--navy,#132a4a)}
  /* keep page content from hiding behind the fixed bar */
  body{padding-bottom:64px}
  /* raise the floating call/whatsapp/enquire buttons above the bar so they don't overlap */
  .fab-rail{bottom:76px}
}
@media(max-width:360px){
  .mbar-item{font-size:.62rem}
}

/* ============================================================
   v46 — portal-style card enhancements: EMI + freshness + trust bar
   ============================================================ */
.pcard-emi{font-size:.76rem;color:var(--slate);margin:.1rem 0 .3rem}
.pcard-posted{font-size:.72rem;color:#9aa3ad;margin-top:.4rem;padding-top:.4rem;border-top:1px solid var(--line)}

.trust-bar{background:linear-gradient(135deg,var(--navy,#132a4a),var(--navy-900,#0a1730));padding:1.6rem 1rem}
.trust-bar-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.trust-stat{color:#fff}
.trust-stat b{display:block;font-family:var(--display);font-size:1.6rem;color:var(--gold,#c39a4e);line-height:1.1}
.trust-stat span{font-size:.76rem;opacity:.85;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:640px){
  .trust-bar-inner{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .trust-stat b{font-size:1.3rem}
}

.ph-list-btn{background:var(--gold,#c39a4e) !important;color:var(--navy,#132a4a) !important;font-weight:800 !important}
.ph-list-btn:hover{background:var(--gold-600,#a97e2f) !important}

/* ============================================================
   v52 — Unified header (matches the new React pages exactly)
   Same visual language sitewide: topbar, sticky white header,
   logo, mega-menu nav, gold "Post Property FREE" button.
   ============================================================ */
.gh-topbar{background:var(--navy-900);color:#fff;font-size:.8rem}
.gh-topbar-inner{max-width:var(--maxw,1240px);margin:0 auto;padding:.4rem 1.25rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.3rem}
.gh-topbar a{opacity:.85;margin-right:1.1rem;color:#fff;text-decoration:none}
.gh-topbar a:hover{opacity:1}
.gh-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:200}
.gh-header-inner{max-width:var(--maxw,1240px);margin:0 auto;padding:.9rem 1.25rem;display:flex;align-items:center;gap:1.6rem;min-width:0}
.gh-logo{display:flex;align-items:center;gap:.5rem;font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:1.35rem;color:var(--navy);flex-shrink:0;text-decoration:none}
.gh-logo img{width:32px;height:32px}
.gh-logo span,.gh-logo b{color:var(--gold-600);font-weight:700}
.gh-nav{display:flex;align-items:center;gap:1.5rem;flex:1}
.gh-nav-item{position:relative;padding:.4rem 0}
.gh-nav-link{font-weight:600;font-size:.92rem;color:var(--ink,#1a2233);display:flex;align-items:center;gap:.3rem;padding:.4rem 0;text-decoration:none}
.gh-nav-item:hover .gh-nav-link,.gh-nav-item.active .gh-nav-link{color:var(--navy)}
.gh-megamenu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--e3,0 16px 40px rgba(19,42,74,.14));padding:1.2rem;min-width:260px;z-index:50}
.gh-nav-item:hover .gh-megamenu{display:block}
.gh-megamenu a{display:block;padding:.45rem 0;font-size:.88rem;color:var(--slate,#5d6a7a);text-decoration:none}
.gh-megamenu a:hover{color:var(--navy);font-weight:700}
.gh-megamenu h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#9aa3b0;margin:.8rem 0 .3rem}
.gh-megamenu h5:first-child{margin-top:0}
.gh-actions{display:flex;align-items:center;gap:.9rem;flex-shrink:0}
.gh-post-btn{background:var(--gold);color:var(--navy);font-weight:800;padding:.6rem 1.1rem;border-radius:8px;font-size:.85rem;display:flex;align-items:center;gap:.4rem;text-decoration:none}
.gh-post-btn:hover{background:var(--gold-600);color:#fff}
.gh-post-btn .free{background:var(--navy);color:#fff;font-size:.62rem;padding:.1rem .4rem;border-radius:4px;letter-spacing:.03em}
.gh-account{width:36px;height:36px;border-radius:50%;background:var(--soft,#f5f7fa);display:grid;place-items:center;font-size:1.1rem;color:var(--navy);text-decoration:none}
.gh-burger{display:none;background:none;border:none;flex-direction:column;gap:4px;padding:.3rem;cursor:pointer}
.gh-burger span{width:22px;height:2px;background:var(--navy);border-radius:2px}
.gh-mobile-nav{display:none;position:fixed;inset:0;background:#fff;z-index:300;padding:1.2rem;overflow-y:auto}
.gh-mobile-nav.open{display:block}
.gh-mobile-nav a{display:block;padding:.9rem 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);text-decoration:none}
.gh-mobile-nav-close{background:none;border:none;font-size:1.6rem;float:right;color:var(--navy)}

@media(max-width:960px){
  .gh-nav{display:none}
  .gh-header-inner{gap:.6rem}
  .gh-logo{font-size:1.1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gh-post-btn{padding:.5rem .7rem;font-size:.78rem;white-space:nowrap}
  .gh-account{width:32px;height:32px;flex-shrink:0}
  .gh-actions{flex-shrink:0;gap:.5rem}
  .gh-burger{display:flex}
}
@media(max-width:520px){
  .gh-header-inner{padding:.7rem .8rem}
  .gh-logo{font-size:.98rem;max-width:34vw}
  .gh-post-btn span.free{display:none}
  .gh-post-btn{padding:.5rem .6rem;font-size:.74rem}
  .gh-topbar-inner{padding:.4rem .8rem}
  .gh-topbar a{margin-right:0;font-size:.72rem}
}
@media(max-width:400px){
  .gh-post-btn{padding:.45rem .55rem;font-size:.7rem}
  .gh-logo{max-width:30vw;font-size:.9rem}
}

/* Unified footer to match */
.gh-footer{background:var(--navy-900);color:rgba(255,255,255,.7);padding:2rem 0;text-align:center;font-size:.85rem}
.gh-footer strong{color:var(--gold)}

/* Unified mobile bottom bar (same as React pages) */
.gh-mobile-bar{display:none}
@media(max-width:760px){
  .gh-mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:250;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.08);
    padding:.35rem .2rem calc(.35rem + env(safe-area-inset-bottom,0px))}
  .gh-mbar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.4rem .2rem;
    color:var(--slate,#5d6a7a);text-decoration:none;font-size:.68rem;font-weight:700}
  .gh-mbar-item.active{color:var(--navy)}
  body{padding-bottom:64px}
}

/* ============================================================
   v57 — homepage hero side panel (search + promo cards side by side)
   Only applies where .phero-split is used (homepage) — other pages'
   smaller .phero banners (agents, nri-corner, area guides) are unaffected.
   ============================================================ */
.phero-split{max-width:1240px;display:grid;grid-template-columns:1fr 300px;gap:2.2rem;align-items:start;text-align:left}
/* The base .phero rule sets overflow:hidden and a capped min-height for its
   single-column banner variant (agents/nri-corner/area-guide pages) — but
   the homepage's side panel can be taller than that cap, and overflow:hidden
   would silently clip it. Only override when the split layout is present. */
.phero:has(.phero-split){overflow:visible;min-height:0;padding-bottom:2.5rem}
.phero-main{min-width:0}
.phero-split .phero-eyebrow,
.phero-split h1,
.phero-split p{text-align:left}
.phero-split h1{margin-left:0}

.phero-side{display:flex;flex-direction:column;gap:.8rem}
.phero-promo{background:rgba(255,255,255,.97);border-radius:12px;padding:1.1rem;box-shadow:0 8px 24px rgba(0,0,0,.15);text-align:left}
.phero-promo-primary{background:linear-gradient(150deg,var(--gold-50),#fff);border:1px solid var(--gold)}
.phero-promo-icon{font-size:1.5rem;margin-bottom:.4rem}
.phero-promo h4{margin:0 0 .3rem;font-size:.94rem;color:var(--navy);font-weight:700}
.phero-promo p{margin:0 0 .7rem;font-size:.8rem;color:var(--slate);line-height:1.4;font-weight:400}
.phero-promo .btn{width:100%}

@media(max-width:960px){
  .phero-split{grid-template-columns:1fr;text-align:center}
  .phero-split .phero-eyebrow,
  .phero-split h1,
  .phero-split p{text-align:center}
  .phero-side{flex-direction:row;overflow-x:auto;gap:.7rem;padding-bottom:.3rem;-webkit-overflow-scrolling:touch}
  .phero-side .phero-promo{flex:0 0 240px;text-align:left}
}