/* ==========================================================================
   Shri Jagannath Builder & Developer — design system
   ShriJagannathBuilder.com

   Direction: deep navy, warm metallic gold, off-white paper, saffron used
   only where urgency is real.

   The signature device is the KEYLINE — a hairline gold rule with a short
   perpendicular tick, borrowed from architectural registration marks. It
   appears above section titles, beside prices and at panel corners. Pure
   CSS, costs nothing, and is the thing the site is remembered by.
   Everything around it stays deliberately quiet.

   Mobile-first. Hand-authored. No framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self-hosted variable, latin subset
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/assets/fonts/cormorant-garamond-var.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20B9,U+2122;
}
@font-face{
  font-family:'Manrope';
  src:url('/assets/fonts/manrope-var.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20B9,U+2122;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* --- Navy: the structural colour --------------------------------------- */
  --navy-950:#070F1C;
  --navy-900:#0A1628;
  --navy-800:#0E1E33;
  --navy-700:#132842;
  --navy-600:#1B3A5C;
  --navy-500:#2C5282;
  --navy-200:#C4D2E4;
  --navy-100:#E3EAF3;
  --navy-50:#F1F5FA;

  /* --- Gold: warm metallic.
     #C9A227 is the brand gold but reaches only ~2.5:1 on white, so it is
     used for fills, rules and edges — never for body text. --gold-700 is
     the text-safe variant at ~4.6:1. */
  --gold-800:#6F5615;
  --gold-700:#8A6D1D;
  --gold-600:#A8862C;
  --gold-500:#C9A227;
  --gold-400:#DFC066;
  --gold-200:#F0E2B6;
  --gold-50:#FBF6E8;
  --gold-sheen:linear-gradient(135deg,#8A6D1D 0%,#C9A227 38%,#F0DFA0 52%,#C9A227 66%,#8A6D1D 100%);

  /* --- Saffron: urgency only. Never decorative. -------------------------- */
  --saffron-700:#A8390F;
  --saffron-600:#C7461A;
  --saffron-500:#D9531E;
  --saffron-50:#FDF0E9;

  /* --- Semantic ---------------------------------------------------------- */
  --ok-700:#0F5F3C;   --ok-600:#137A4C;   --ok-50:#E8F5EE;
  --warn-700:#8A5A0B; --warn-600:#A86F11; --warn-50:#FBF3E2;
  --info-700:#164E63; --info-600:#1E6F8C; --info-50:#E6F2F6;
  --bad-700:#8C1D14;  --bad-600:#B42318;  --bad-50:#FDECEA;
  --wa-600:#1F9D55;   --wa-800:#15703C;
  --wa-700:#177F44;

  /* --- Paper and ink ----------------------------------------------------- */
  --paper:#FFFFFF;
  --paper-soft:#FBFAF7;
  --paper-tint:#F5F6F9;
  --ink-900:#0E1319;
  --ink-700:#3B4451;
  /* Darkened from #6B7686, which measured 4.41:1 on --paper — just under the
     4.5:1 AA threshold for normal text. It is used for help text and captions,
     which are exactly the small sizes that need the margin most. */
  --ink-500:#5F6A7A;
  --ink-400:#8B95A3;
  --ink-300:#AEB7C4;
  --ink-200:#DDE3EA;
  --ink-100:#EFF2F6;

  /* --- Type -------------------------------------------------------------- */
  --ff-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --ff-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ff-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-2xs:.6875rem;
  --fs-xs:.75rem;
  --fs-sm:.8125rem;
  --fs-base:.9375rem;
  --fs-md:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.3125rem;
  --fs-2xl:clamp(1.4rem,1.15rem + 1.2vw,1.8rem);
  --fs-3xl:clamp(1.7rem,1.3rem + 2vw,2.4rem);
  --fs-4xl:clamp(1.95rem,1.4rem + 2.8vw,3.1rem);
  --fs-5xl:clamp(2.25rem,1.5rem + 4.2vw,4rem);

  --lh-flat:1;
  --lh-tight:1.13;
  --lh-snug:1.32;
  --lh-normal:1.6;
  --lh-loose:1.75;

  --ls-tight:-0.02em;
  --ls-wide:.04em;
  --ls-eyebrow:.16em;

  /* --- Space: 4px base --------------------------------------------------- */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-5:1.25rem; --s-6:1.5rem;  --s-7:2rem;    --s-8:2.5rem;
  --s-9:3rem;    --s-10:4rem;   --s-11:5rem;   --s-12:6.5rem;

  --section-y:clamp(2.75rem,6.5vw,5.5rem);

  /* --- Radius: restrained. Architecture is not rounded. ------------------ */
  --r-xs:2px; --r-sm:3px; --r-md:5px; --r-lg:8px; --r-xl:12px; --r-pill:100px;

  /* --- Elevation: navy-tinted, never neutral grey ------------------------ */
  --sh-1:0 1px 2px rgb(10 22 40 / .05);
  --sh-2:0 2px 6px rgb(10 22 40 / .07), 0 1px 2px rgb(10 22 40 / .04);
  --sh-3:0 8px 24px rgb(10 22 40 / .10), 0 2px 6px rgb(10 22 40 / .05);
  --sh-4:0 18px 48px rgb(10 22 40 / .16), 0 4px 12px rgb(10 22 40 / .07);
  --sh-gold:0 6px 20px rgb(201 162 39 / .28);

  /* --- Motion ------------------------------------------------------------ */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:130ms; --t-base:220ms; --t-slow:400ms;

  /* --- Layout ------------------------------------------------------------ */
  --container:1320px;
  --container-md:1024px;
  --container-sm:720px;
  --gutter:clamp(1rem,4vw,2.5rem);
  --header-h:60px;
  --mobilebar-h:60px;
}
@media (min-width:1024px){ :root{--header-h:74px} }

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:var(--ff-body);
  font-size:var(--fs-md);
  font-weight:400;
  line-height:var(--lh-normal);
  color:var(--ink-900);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:calc(var(--mobilebar-h) + env(safe-area-inset-bottom));
  /* NOTE: overflow-x is deliberately NOT set here. Setting it on <body>
     makes body the scroll container, which silently breaks position:sticky
     on every descendant — the filter rail and the enquiry rail both stop
     sticking. The safety net lives on <html> instead, where it clips
     stray overflow without creating a second scroll container. */
}

h1,h2,h3,h4,h5{
  margin:0 0 var(--s-3);
  font-family:var(--ff-display);
  font-weight:600;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--navy-900);
  text-wrap:balance;
}
h1{font-size:var(--fs-4xl)}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}

p{margin:0 0 var(--s-4);text-wrap:pretty}
p:last-child{margin-bottom:0}

a{color:var(--navy-500);text-decoration-thickness:1px;text-underline-offset:.18em;transition:color var(--t-fast)}
a:hover{color:var(--gold-700)}

img,svg,video,picture{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 var(--s-4);padding-left:1.15rem}
li{margin-bottom:var(--s-2)}
table{border-collapse:collapse;width:100%}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit;max-width:100%}
address{font-style:normal}
hr{border:0;border-top:1px solid var(--ink-200);margin:var(--s-8) 0}
strong,b{font-weight:700}

/* A long unbroken string must never widen the page. */
p,li,dd,dt,h1,h2,h3,h4,td,th,figcaption,summary{overflow-wrap:break-word}

:focus-visible{outline:2px solid var(--gold-600);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--gold-200);color:var(--navy-900)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. LAYOUT — container, grid, responsive utilities
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--md{max-width:var(--container-md)}
.container--narrow,.container--sm{max-width:var(--container-sm)}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2rem,5vw,3.5rem)}
.section--alt,.section--paper{background:var(--paper-soft)}
.section--tint{background:var(--paper-tint)}
.section--prose{background:var(--paper-soft);border-top:1px solid var(--ink-100)}
.section--navy{background:var(--navy-900);color:var(--navy-200)}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}

/* Grid. Children get min-width:0 so long content cannot force overflow. */
.grid{display:grid;gap:var(--s-6)}
.grid > *{min-width:0}
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.grid--sidebar{grid-template-columns:1fr}
@media (min-width:600px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid--sidebar{grid-template-columns:minmax(0,1fr) 340px}
}
@media (min-width:1200px){ .grid--sidebar{grid-template-columns:minmax(0,1fr) 380px} }

.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}

/* Responsive visibility */
.u-hide{display:none !important}
@media (max-width:599px){ .u-hide-sm{display:none !important} }
@media (min-width:600px){ .u-only-sm{display:none !important} }
@media (max-width:899px){ .u-hide-md{display:none !important} }
@media (min-width:900px){ .u-only-md{display:none !important} }
@media (max-width:1023px){ .u-hide-lg{display:none !important} }
@media (min-width:1024px){ .u-only-lg{display:none !important} }

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--navy-900);color:#fff;padding:var(--s-3) var(--s-5);
  border-radius:0 0 var(--r-md) 0;font-weight:700;
}
.skip-link:focus{left:0;color:#fff}

/* --------------------------------------------------------------------------
   5. THE KEYLINE — signature device
   -------------------------------------------------------------------------- */
.keyline{
  display:block;width:52px;height:1px;
  background:var(--gold-sheen);
  position:relative;margin-bottom:var(--s-4);
}
.keyline::after{
  content:'';position:absolute;right:0;top:-3px;
  width:1px;height:7px;background:var(--gold-600);
}
.keyline--center{margin-inline:auto}
.keyline--light{background:linear-gradient(90deg,var(--gold-400),var(--gold-200))}
.keyline--light::after{background:var(--gold-400)}

/* Corner registration marks. */
.marked{position:relative}
.marked::before,.marked::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none}
.marked::before{top:0;left:0;border-top:1px solid var(--gold-500);border-left:1px solid var(--gold-500)}
.marked::after{bottom:0;right:0;border-bottom:1px solid var(--gold-500);border-right:1px solid var(--gold-500)}

/* --------------------------------------------------------------------------
   6. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */
.eyebrow,.section__eyebrow{
  display:block;
  font-family:var(--ff-body);
  font-size:var(--fs-2xs);
  font-weight:700;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--gold-700);
  margin:0 0 var(--s-3);
}
.eyebrow--light{color:var(--gold-400)}
.display{font-family:var(--ff-display);font-weight:600;line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.lead{font-size:var(--fs-lg);color:var(--ink-700);max-width:60ch}
.muted{color:var(--ink-500)}
.tnum{font-variant-numeric:tabular-nums}

.prose{max-width:68ch;font-size:var(--fs-md)}
.prose h2{font-size:var(--fs-2xl);margin-top:var(--s-8)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s-6)}
.prose a{color:var(--navy-500);text-decoration:underline}

.section__head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s-5);margin-bottom:var(--s-8);flex-wrap:wrap;
}
.section__title{font-size:var(--fs-3xl);margin:0;color:var(--navy-900)}
.section__lead{margin:var(--s-3) 0 0;color:var(--ink-700);max-width:62ch;font-size:var(--fs-md)}
.section__link{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:44px;                       /* touch target, not just a link */
  font-size:var(--fs-sm);font-weight:700;white-space:nowrap;
  color:var(--navy-700);text-decoration:none;
  border-bottom:1px solid var(--gold-400);
  transition:border-color var(--t-fast),color var(--t-fast);
}
.section__link:hover{color:var(--gold-700);border-color:var(--gold-600)}
.section__link svg{transition:transform var(--t-base) var(--ease)}
.section__link:hover svg{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--ink-900);
  --btn-bd:var(--ink-200);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:46px;padding:var(--s-3) var(--s-6);
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:var(--r-md);
  font-family:var(--ff-body);font-size:var(--fs-sm);font-weight:700;
  line-height:1;text-decoration:none;text-align:center;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),
             color var(--t-fast),transform var(--t-fast),box-shadow var(--t-base);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .icon,.btn svg{flex:none}

.btn--primary{--btn-bg:var(--navy-800);--btn-fg:#fff;--btn-bd:var(--navy-800)}
.btn--primary:hover{--btn-bg:var(--navy-600);--btn-bd:var(--navy-600);color:#fff;box-shadow:var(--sh-3)}

/* Gold marks the highest-intent action. Navy on gold clears AA comfortably. */
.btn--gold,.btn--accent{--btn-bg:var(--gold-500);--btn-fg:var(--navy-900);--btn-bd:var(--gold-500);font-weight:800}
.btn--gold:hover,.btn--accent:hover{--btn-bg:var(--gold-400);--btn-bd:var(--gold-400);color:var(--navy-900);box-shadow:var(--sh-gold)}

.btn--outline-gold{--btn-fg:var(--gold-700);--btn-bd:var(--gold-400)}
.btn--outline-gold:hover{--btn-bg:var(--gold-50);--btn-bd:var(--gold-600);color:var(--gold-800)}

.btn--ghost{--btn-fg:var(--navy-700);--btn-bd:var(--ink-200)}
.btn--ghost:hover{--btn-bg:var(--navy-50);--btn-bd:var(--navy-200);color:var(--navy-800)}

.btn--ghost-light{--btn-bg:rgb(255 255 255 / .07);--btn-fg:#fff;--btn-bd:rgb(255 255 255 / .3)}
.btn--ghost-light:hover{--btn-bg:rgb(255 255 255 / .15);--btn-bd:rgb(255 255 255 / .55);color:#fff}

/* wa-700, not wa-600. White on wa-600 measured 3.49:1. WCAG large-text
   relaxation does not apply: these labels are 13px bold, and the threshold is
   14pt bold (~18.7px). Brand green is preserved in the icon and hover. */
.btn--whatsapp{--btn-bg:var(--wa-700);--btn-fg:#fff;--btn-bd:var(--wa-700)}
.btn--whatsapp:hover{--btn-bg:var(--wa-800);--btn-bd:var(--wa-800);color:#fff}
.btn--whatsapp-ghost{--btn-fg:var(--wa-700);--btn-bd:#B7E0C7}
.btn--whatsapp-ghost:hover{--btn-bg:var(--wa-600);--btn-bd:var(--wa-600);color:#fff}

.btn--sm{min-height:38px;padding:var(--s-2) var(--s-4);font-size:var(--fs-xs)}
.btn--lg{min-height:54px;padding:var(--s-4) var(--s-8);font-size:var(--fs-md)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;pointer-events:none}

/* --------------------------------------------------------------------------
   8. BADGES, CHIPS, ALERTS
   -------------------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.25rem .6rem;border-radius:var(--r-sm);
  font-size:var(--fs-2xs);font-weight:700;line-height:1.5;
  letter-spacing:.03em;text-transform:uppercase;
  background:var(--navy-100);color:var(--navy-700);
  border:1px solid transparent;
}
.chip--success{background:var(--ok-600);color:#fff}
.chip--warn{background:var(--warn-600);color:#fff}
.chip--info{background:var(--info-600);color:#fff}
.chip--danger{background:var(--bad-600);color:#fff}
.chip--gold{background:var(--gold-500);color:var(--navy-900)}
.chip--verified{background:rgb(255 255 255 / .94);color:var(--ok-700);border-color:var(--ok-600)}
.chip--ghost{background:rgb(10 22 40 / .62);color:#fff}

.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.4rem;vertical-align:middle;flex:none}
.status-dot--open{background:#34D399;box-shadow:0 0 0 3px rgb(52 211 153 / .22)}
.status-dot--closed{background:var(--ink-300)}

.alert{padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border-left:3px solid;margin-bottom:var(--s-4);font-size:var(--fs-sm)}
.alert--error{background:var(--bad-50);border-color:var(--bad-600);color:var(--bad-700)}
.alert--warn{background:var(--warn-50);border-color:var(--warn-600);color:var(--warn-700)}
.alert--info{background:var(--info-50);border-color:var(--info-600);color:var(--info-700)}
.alert--success{background:var(--ok-50);border-color:var(--ok-600);color:var(--ok-700)}

/* --------------------------------------------------------------------------
   9. PRICE — the most-read element on the site
   -------------------------------------------------------------------------- */
.price{
  font-family:var(--ff-display);font-weight:700;font-size:var(--fs-2xl);
  line-height:var(--lh-flat);letter-spacing:var(--ls-tight);
  color:var(--navy-900);font-variant-numeric:tabular-nums lining-nums;
  display:inline-block;
}
.price--lg{font-size:var(--fs-4xl)}
.price--sm{font-size:var(--fs-xl)}
.price--onrequest{font-family:var(--ff-body);font-size:var(--fs-lg);font-weight:600;color:var(--ink-500)}
.price__note{
  display:block;font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:700;
  color:var(--ink-500);margin-top:var(--s-2);
  letter-spacing:var(--ls-wide);text-transform:uppercase;
}
.price__rule{display:block;width:34px;height:1px;background:var(--gold-sheen);margin-top:var(--s-3)}

/* --------------------------------------------------------------------------
   10. IMAGE FRAMES & OVERLAYS
   -------------------------------------------------------------------------- */
.media{
  position:relative;overflow:hidden;
  background:var(--navy-100);border-radius:var(--r-md);aspect-ratio:16/9;
}
.media > img{width:100%;height:100%;object-fit:cover;display:block}
.media--4x3{aspect-ratio:4/3}
.media--3x2{aspect-ratio:3/2}
.media--square{aspect-ratio:1}

/* Scrim keeps overlaid text legible on any photograph. */
.media__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgb(7 15 28 / .78) 0%, rgb(7 15 28 / .34) 32%,
    rgb(7 15 28 / .04) 62%, transparent 100%);
}
.media__scrim--soft{background:linear-gradient(to top,rgb(7 15 28 / .55),transparent 58%)}
.media__overlay{position:absolute;left:0;right:0;bottom:0;padding:var(--s-5);color:#fff;z-index:2}
.media__overlay h3,.media__overlay .price{color:#fff}
.media__tl{position:absolute;top:var(--s-3);left:var(--s-3);z-index:2}
.media__tr{position:absolute;top:var(--s-3);right:var(--s-3);z-index:2}
.media__br{position:absolute;bottom:var(--s-3);right:var(--s-3);z-index:2}

/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */
.card{
  background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base);
}
.card:hover{border-color:var(--navy-200);box-shadow:var(--sh-3);transform:translateY(-2px)}
.card__body{padding:var(--s-5)}

/* --- Property card ------------------------------------------------------ */
.pcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--ink-200);
  border-radius:var(--r-lg);overflow:hidden;
  transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base);
}
.pcard:hover{border-color:var(--gold-400);box-shadow:var(--sh-3);transform:translateY(-3px)}
.pcard__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-100)}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.045)}
.pcard__media-link{display:block;width:100%;height:100%}
.pcard__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgb(7 15 28 / .30),transparent 44%);
}
.pcard__status{position:absolute;top:var(--s-3);left:var(--s-3);z-index:2}
.pcard__verified{position:absolute;top:var(--s-3);right:var(--s-3);z-index:2}
.pcard__body{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);flex:1}
.pcard__price{
  font-family:var(--ff-display);font-size:var(--fs-2xl);font-weight:700;
  line-height:var(--lh-flat);letter-spacing:var(--ls-tight);
  color:var(--navy-900);margin:0;font-variant-numeric:tabular-nums lining-nums;
}
.pcard__title{
  font-family:var(--ff-body);font-size:var(--fs-base);font-weight:600;
  line-height:var(--lh-snug);letter-spacing:0;margin:0;color:var(--ink-900);
}
.pcard__title a{color:inherit;text-decoration:none}
.pcard__title a::after{content:'';position:absolute;inset:0;z-index:1}
.pcard:hover .pcard__title a{color:var(--navy-700)}
.pcard__location{display:flex;align-items:center;gap:.35rem;font-size:var(--fs-sm);color:var(--ink-500);margin:0}
.pcard__specs{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
  list-style:none;margin:0;padding:var(--s-3) 0 0;
  font-size:var(--fs-sm);color:var(--ink-700);border-top:1px solid var(--ink-100);
}
.pcard__specs li{margin:0}
.pcard__specs strong{color:var(--navy-900);font-weight:700}
.pcard__spec--flag{color:var(--ok-700);font-weight:700}
.pcard__actions{
  position:relative;z-index:2;display:flex;gap:var(--s-2);align-items:center;
  margin-top:auto;padding-top:var(--s-4);
}
.pcard__actions .btn{flex:1 1 0;min-width:0;padding-inline:var(--s-2);font-size:var(--fs-2xs);min-height:40px}
.pcard__more{
  display:inline-flex;align-items:center;justify-content:center;gap:.25rem;
  min-height:44px;padding:0 var(--s-3);flex:none;
  font-size:var(--fs-2xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gold-700);text-decoration:none;white-space:nowrap;
}
.pcard__more:hover{color:var(--gold-800)}
.pcard__more svg{transition:transform var(--t-base) var(--ease)}
.pcard__more:hover svg{transform:translateX(3px)}

/* --- Feature card -------------------------------------------------------- */
.whycard{
  position:relative;background:var(--paper);padding:var(--s-6);
  border:1px solid var(--ink-200);border-radius:var(--r-lg);
  transition:border-color var(--t-base),box-shadow var(--t-base);
}
.whycard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gold-sheen);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease);
}
.whycard:hover{border-color:var(--navy-200);box-shadow:var(--sh-2)}
.whycard:hover::before{transform:scaleX(1)}
.whycard__title{font-family:var(--ff-body);font-size:var(--fs-md);font-weight:700;color:var(--navy-900);margin-bottom:var(--s-2)}
.whycard p{margin:0;font-size:var(--fs-sm);color:var(--ink-700)}

/* --- Tiles --------------------------------------------------------------- */
.typegrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,175px),1fr));
  gap:var(--s-4);list-style:none;margin:0;padding:0;
}
.typegrid__item{margin:0;min-width:0}
.typetile{
  display:flex;flex-direction:column;gap:.2rem;padding:var(--s-5);
  background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--r-md);
  text-decoration:none;color:inherit;
  transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base);
}
.typetile:hover{border-color:var(--gold-400);box-shadow:var(--sh-2);transform:translateY(-2px);color:inherit}
.typetile__name{font-weight:700;color:var(--navy-900);font-size:var(--fs-base)}
.typetile__count{font-size:var(--fs-sm);color:var(--ink-500)}

.locgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));
  gap:var(--s-3);list-style:none;margin:0;padding:0;
}
.locgrid li{margin:0;min-width:0}
.loctile{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);background:var(--paper);
  border:1px solid var(--ink-200);border-left:2px solid var(--gold-400);
  border-radius:var(--r-sm);text-decoration:none;color:inherit;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.loctile:hover{background:var(--gold-50);border-left-color:var(--gold-600);color:inherit;transform:translateX(2px)}
.loctile__name{font-weight:700;color:var(--navy-900);font-size:var(--fs-base);min-width:0}
.loctile__meta{font-size:var(--fs-xs);color:var(--ink-500);white-space:nowrap;flex:none}

.loccard,.projcard,.teamcard{
  background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--r-lg);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-2);min-width:0;
  transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base);
}
.loccard:hover,.projcard:hover,.teamcard:hover{border-color:var(--gold-400);box-shadow:var(--sh-2);transform:translateY(-2px)}
.loccard__title,.projcard__title,.teamcard__name{font-size:var(--fs-xl);margin:0}
.loccard__title a,.projcard__title a{text-decoration:none;color:var(--navy-900)}
.loccard__title a:hover,.projcard__title a:hover{color:var(--gold-700)}
.loccard__body,.projcard__loc,.teamcard__bio{font-size:var(--fs-sm);color:var(--ink-700);margin:0}
.loccard__meta,.projcard__rera{font-size:var(--fs-xs);color:var(--ink-500);margin:0}
.loccard__link,.projcard__link{margin-top:auto;padding-top:var(--s-4);font-size:var(--fs-sm);font-weight:700;color:var(--gold-700);text-decoration:none}
.loccard__link:hover{color:var(--gold-800);text-decoration:underline}
.projcard__price{font-family:var(--ff-display);font-size:var(--fs-xl);font-weight:700;color:var(--navy-900);margin:0}
.teamcard__role{font-size:var(--fs-sm);color:var(--gold-700);font-weight:700;margin:0}
.teamcard__phone{font-weight:700;margin-top:auto;padding-top:var(--s-4)}

.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:var(--s-5)}
.whygrid > *{min-width:0}

/* --------------------------------------------------------------------------
   12. SKELETON / LOADING
   -------------------------------------------------------------------------- */
.skeleton{position:relative;overflow:hidden;background:var(--ink-100);border-radius:var(--r-sm)}
.skeleton::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgb(255 255 255 / .72),transparent);
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){ .skeleton::after{animation:none;opacity:.4} }
.skeleton--text{height:.85em;margin-bottom:.55em}
.skeleton--title{height:1.35em;width:72%;margin-bottom:.7em}
.skeleton--price{height:1.75em;width:44%;margin-bottom:.6em}
.skeleton--media{aspect-ratio:16/9;border-radius:var(--r-lg) var(--r-lg) 0 0}
.skeleton--sm{width:55%}
.skeleton--md{width:80%}
.skcard{border:1px solid var(--ink-200);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.skcard__body{padding:var(--s-5)}

.spinner{
  display:inline-block;width:16px;height:16px;flex:none;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.is-loading{cursor:progress}

/* --------------------------------------------------------------------------
   13. FORMS
   -------------------------------------------------------------------------- */
.field{margin-bottom:var(--s-5)}
.field__label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--navy-900);margin-bottom:var(--s-2)}
.field__req{color:var(--saffron-600)}
.field__control{
  width:100%;min-height:48px;padding:var(--s-3) var(--s-4);
  background:var(--paper);color:var(--ink-900);
  border:1px solid var(--ink-300);border-radius:var(--r-md);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
  appearance:none;
}
select.field__control{
  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 d='M1 1l5 5 5-5' fill='none' stroke='%236B7686' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-4) center;padding-right:var(--s-8);
}
.field__control:focus{border-color:var(--navy-600);box-shadow:0 0 0 3px rgb(44 82 130 / .14);outline:none}
.field__control::placeholder{color:var(--ink-400)}
textarea.field__control{min-height:118px;resize:vertical;line-height:var(--lh-normal)}
.field--error .field__control{border-color:var(--bad-600)}
.field--error .field__control:focus{box-shadow:0 0 0 3px rgb(180 35 24 / .14)}
.field__help{font-size:var(--fs-xs);color:var(--ink-500);margin:var(--s-2) 0 0;line-height:1.5}
.field__error{font-size:var(--fs-xs);color:var(--bad-600);font-weight:700;margin:var(--s-2) 0 0}
/* 24px, not 20px. WCAG 2.2 SC 2.5.8 sets a 24x24 minimum target, and a
   consent checkbox is the last control that should be easy to mis-tap. */
.field--checkbox{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s-3);align-items:start}
.field--checkbox input{width:24px;height:24px;margin:0;accent-color:var(--navy-700);flex:none}
.field__label--inline{font-weight:400;font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--ink-700);margin:0}
.field--checkbox .field__error,.field--checkbox .field__help{grid-column:1/-1}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp-field{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden}

.enquiry{position:relative}
.enquiry__title{font-size:var(--fs-xl);margin-bottom:var(--s-2);color:var(--navy-900)}
.enquiry__intro{font-size:var(--fs-sm);color:var(--ink-700);margin-bottom:var(--s-6)}
.enquiry__grid{display:grid;grid-template-columns:1fr;gap:0 var(--s-4)}
@media (min-width:520px){ .enquiry__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.enquiry__note{font-size:var(--fs-xs);color:var(--ink-500);margin:var(--s-4) 0 0}

.searchform{display:flex;gap:var(--s-3);max-width:640px;margin-top:var(--s-5);flex-wrap:wrap}
.searchform input{flex:1 1 200px;min-width:0;min-height:48px;padding:var(--s-3) var(--s-4);border:1px solid var(--ink-300);border-radius:var(--r-md)}

.contact{display:grid;grid-template-columns:1fr;gap:var(--s-9);align-items:start}
@media (min-width:900px){ .contact{grid-template-columns:repeat(2,minmax(0,1fr))} }
.contact h2{font-size:var(--fs-lg);margin-top:var(--s-7)}
.contact h2:first-child{margin-top:0}
.contact__details,.contact__form{min-width:0}
.contact__address{line-height:var(--lh-loose)}
.contact__channels{list-style:none;padding:0}
.contact__channels a{font-weight:700}
.contact__actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}
.contact__form{background:var(--paper-soft);border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:var(--s-6)}
.contact__hours{display:flex;align-items:center}

/* --------------------------------------------------------------------------
   14. COMPLIANCE STRIP — RERA number lives here
   -------------------------------------------------------------------------- */
.compliance-strip{
  background:var(--navy-950);color:var(--navy-200);
  /* Not --fs-2xs. UP RERA's advertising guidance states the registration
     number must not be set too small or in a colour that obscures it, so
     this strip is held at 12px minimum with high contrast on navy. */
  font-size:var(--fs-xs);
  border-bottom:1px solid rgb(201 162 39 / .22);
}
.compliance-strip__inner{
  display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-5);
  align-items:center;justify-content:space-between;padding-block:.45rem;
}
.compliance-strip__item{margin:0;display:flex;align-items:center;min-width:0}
.compliance-strip strong{color:#fff;font-weight:700}
.compliance-strip__rera{color:var(--gold-400);font-weight:800;letter-spacing:.04em;margin-left:.35rem}
.compliance-strip__muted{opacity:.7;margin-left:.3rem}
.compliance-strip__phone{
  display:inline-flex;align-items:center;min-height:32px;
  color:#fff;font-weight:800;text-decoration:none;letter-spacing:.02em;
}
.compliance-strip__phone:hover{color:var(--gold-400)}
@media (max-width:767px){
  .compliance-strip__inner{justify-content:center;text-align:center;gap:.2rem var(--s-4)}
  .compliance-strip__hours{order:3}
}

/* --------------------------------------------------------------------------
   15. HEADER — sticky, desktop and mobile
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:100;
  background:rgb(255 255 255 / .96);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--ink-100);
  transition:box-shadow var(--t-base),border-color var(--t-base);
}
.header.is-stuck{box-shadow:var(--sh-2);border-bottom-color:var(--ink-200)}
.header__inner{display:flex;align-items:center;gap:var(--s-4);min-height:var(--header-h)}

.brand{
  display:flex;align-items:center;gap:var(--s-3);
  text-decoration:none;color:inherit;flex:none;min-width:0;
  /* The logo is a tap target back to home; keep it at the 44px minimum. */
  min-height:44px;
}
/* The emblem is a raster picture now, not an inline SVG. Height is driven by
   --mark-h from the component so one image serves several placements, and the
   width follows the aspect ratio rather than being hard-coded. */
.brand__mark{flex:none;display:block;line-height:0}
.brand__mark img{display:block;height:var(--mark-h,56px);width:auto}
@media (max-width:479px){ .brand__mark img{height:calc(var(--mark-h,56px) * .78)} }

/* At 320px the landing header runs brand + phone on one row with no burger to
   absorb the difference, and adding the emblem pushed it 15px over. The
   tagline is the least load-bearing element in that row — the business name
   and the phone number both have to stay — so it is the one that goes. */
@media (max-width:359px){
  .lpheader .brand__sub{display:none}
  .lpheader .brand__name{font-size:.95rem}
  .lpheader__inner{gap:var(--s-2)}
  /* The emblem steps down too. Below 360px every pixel in this row is
     contested, and a slightly smaller mark costs less than a wrapped header. */
  .lpheader .brand__mark img{height:38px}
  .lpheader__phone{padding-inline:var(--s-3)}
}
.brand__text{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand__name{
  font-family:var(--ff-display);font-weight:700;font-size:1.1rem;
  color:var(--navy-900);letter-spacing:var(--ls-tight);white-space:nowrap;
}
/* 10px floor. This bottomed out at 8px on small screens, which is not a
   stylistic micro-label — it is unreadable. */
.brand__sub{
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-700);font-weight:700;white-space:nowrap;
}
@media (min-width:400px){ .brand__name{font-size:1.2rem} .brand__sub{font-size:.6875rem} }
@media (min-width:1024px){ .brand__name{font-size:1.4rem} .brand__sub{font-size:.75rem} }
.brand__name--footer{
  font-size:clamp(1.25rem,4.5vw,1.5rem);color:#fff;display:block;
  margin-bottom:var(--s-4);
  /* Must wrap. It inherits nowrap from .brand__name, which is correct in the
     header (where the mark sits beside it) but overflows at 320px here. */
  white-space:normal;
}

.nav{margin-left:auto;display:none}
@media (min-width:1080px){ .nav{display:block} }
.nav__list{display:flex;gap:.1rem;list-style:none;margin:0;padding:0}
.nav__item{position:relative;margin:0}
.nav__link{
  display:flex;align-items:center;gap:.28rem;padding:var(--s-3);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-700);
  text-decoration:none;border-radius:var(--r-sm);white-space:nowrap;
  position:relative;transition:color var(--t-fast);
}
.nav__link::after{
  content:'';position:absolute;left:var(--s-3);right:var(--s-3);bottom:6px;height:1px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:center;
  transition:transform var(--t-base) var(--ease);
}
.nav__link:hover,.nav__link.is-active{color:var(--navy-900)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{font-weight:700}
.nav__caret{transition:transform var(--t-fast);opacity:.6}
.nav__submenu{
  position:absolute;top:calc(100% + 2px);left:0;min-width:248px;
  background:var(--paper);border:1px solid var(--ink-200);border-top:2px solid var(--gold-500);
  border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--sh-4);
  padding:var(--s-2);margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-fast),transform var(--t-base) var(--ease),visibility var(--t-fast);
}
.nav__submenu li{margin:0}
.nav__item--has-children:hover .nav__submenu,
.nav__item--has-children:focus-within .nav__submenu{opacity:1;visibility:visible;transform:translateY(0)}
.nav__item--has-children:hover .nav__caret{transform:rotate(180deg)}
.nav__sublink{
  display:block;padding:var(--s-2) var(--s-3);font-size:var(--fs-sm);
  color:var(--ink-700);text-decoration:none;border-radius:var(--r-xs);
  transition:background var(--t-fast),color var(--t-fast);
}
.nav__sublink:hover,.nav__sublink.is-active{background:var(--navy-50);color:var(--navy-900)}
/* Submenu links had no visible focus ring: they inherited a reset that the
   top-level nav overrode and these did not. Keyboard users could not see
   where they were inside an open menu. */
.nav__sublink:focus-visible{
  outline:2px solid var(--navy-600);outline-offset:-2px;
  background:var(--navy-50);color:var(--navy-900);
}

.header__actions{display:none;gap:var(--s-2);flex:none;margin-left:auto}
/* From tablet up the sticky bar is gone, so Call and WhatsApp must be
   reachable without opening the menu. */
@media (min-width:900px){ .header__actions{display:flex} }
@media (min-width:1080px){ .header__actions{margin-left:var(--s-5)} }

.header__toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;margin-left:auto;flex:none;
  background:none;border:1px solid var(--ink-200);border-radius:var(--r-md);
}
@media (min-width:1080px){ .header__toggle{display:none} }
.header__toggle-bar{
  display:block;height:1.5px;background:var(--navy-900);border-radius:2px;
  transform-origin:center;transition:transform var(--t-base) var(--ease),opacity var(--t-fast);
}
.header__toggle[aria-expanded=true] .header__toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.header__toggle[aria-expanded=true] .header__toggle-bar:nth-child(2){opacity:0}
.header__toggle[aria-expanded=true] .header__toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.header--minimal .header__inner{justify-content:flex-start}

/* --- Mobile navigation --------------------------------------------------- */
.mobile-nav{
  border-top:1px solid var(--ink-100);background:var(--paper);
  max-height:calc(100dvh - var(--header-h) - var(--mobilebar-h));
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
@media (min-width:1080px){ .mobile-nav{display:none !important} }
.mobile-nav[hidden]{display:none}
.mobile-nav__list,.mobile-nav__sublist{list-style:none;margin:0;padding:0}
.mobile-nav__list > li{border-bottom:1px solid var(--ink-100);margin:0}
.mobile-nav__list > li:last-child{border-bottom:0}
.mobile-nav__link{display:block;padding:var(--s-4) 0;font-weight:700;font-size:var(--fs-md);color:var(--navy-900);text-decoration:none}
.mobile-nav__sublist{padding:0 0 var(--s-3) var(--s-4);border-left:1px solid var(--gold-200);margin-left:2px}
.mobile-nav__sublist li{margin:0}
.mobile-nav__sublist a{display:block;padding:var(--s-2) var(--s-3);font-size:var(--fs-sm);color:var(--ink-700);text-decoration:none}
.mobile-nav__sublist a:hover{color:var(--navy-900)}
.mobile-nav__cta{display:flex;gap:var(--s-3);padding:var(--s-5) 0;flex-wrap:wrap}
.mobile-nav__cta .btn{flex:1 1 140px}

/* --------------------------------------------------------------------------
   16. BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumbs{background:var(--paper-soft);border-bottom:1px solid var(--ink-100);font-size:var(--fs-xs)}
.breadcrumbs__list{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:var(--s-3) 0}
.breadcrumbs__item{display:flex;gap:.35rem;color:var(--ink-500);margin:0}
.breadcrumbs__item a{color:var(--ink-700);text-decoration:none}
.breadcrumbs__item a:hover{color:var(--gold-700);text-decoration:underline}
.breadcrumbs__sep{color:var(--ink-300)}

/* --------------------------------------------------------------------------
   17. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;color:#fff;overflow:hidden;
  padding-block:clamp(2.5rem,8vw,5.5rem);
  background:
    radial-gradient(900px 520px at 82% -14%, rgb(201 162 39 / .20), transparent 62%),
    radial-gradient(700px 420px at 8% 110%, rgb(44 82 130 / .34), transparent 60%),
    linear-gradient(168deg, var(--navy-950) 0%, var(--navy-800) 52%, var(--navy-700) 100%);
}
/* Faint drafting grid — architectural, no image request. */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgb(255 255 255 / .028) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .028) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000, transparent 78%);
}
.hero__inner{position:relative;z-index:1}
.hero__content{max-width:860px}
.hero__eyebrow{
  display:inline-flex;align-items:center;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  font-weight:700;color:var(--gold-400);margin:0 0 var(--s-4);
}
.hero__title{
  font-size:var(--fs-5xl);color:#fff;margin:0 0 var(--s-5);
  max-width:15ch;font-weight:600;
}
@media (min-width:1024px){
  /* Wider measure on desktop so the headline sets in three lines, not four. */
  .hero__title{max-width:21ch}
}
.hero__title em{font-style:italic;color:var(--gold-400)}
.hero__lead{font-size:var(--fs-lg);color:var(--navy-200);max-width:56ch;margin:0 0 var(--s-7)}
.hero__search{
  background:rgb(255 255 255 / .07);backdrop-filter:blur(8px);
  border:1px solid rgb(255 255 255 / .16);border-radius:var(--r-lg);
  padding:var(--s-5);margin-bottom:var(--s-6);
}
.hero__search-row{display:grid;grid-template-columns:1fr;gap:var(--s-4);align-items:end}
@media (min-width:768px){ .hero__search-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto} }
.hero__search-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.hero__search-field label{font-size:var(--fs-2xs);font-weight:700;color:var(--navy-200);text-transform:uppercase;letter-spacing:var(--ls-wide)}
.hero__search-field select{
  min-height:48px;padding:0 var(--s-8) 0 var(--s-4);width:100%;
  border:1px solid rgb(255 255 255 / .2);border-radius:var(--r-md);
  background:rgb(255 255 255 / .97);color:var(--ink-900);appearance:none;
  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 d='M1 1l5 5 5-5' fill='none' stroke='%236B7686' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-4) center;
}
.hero__search-submit{min-height:48px;width:100%}
@media (min-width:768px){ .hero__search-submit{width:auto} }
.hero__actions{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* --------------------------------------------------------------------------
   18. STAT BAR
   -------------------------------------------------------------------------- */
.statbar{background:var(--navy-950);border-top:1px solid rgb(201 162 39 / .2)}
.statbar__inner{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-6) var(--s-4);padding-block:var(--s-7);text-align:center;
}
@media (min-width:768px){
  .statbar__inner{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Clearance for the search panel's negative margin above. Without this the
     panel covers the stat labels — invisible in the DOM, obvious on screen. */
  .statbar__inner{padding-bottom:calc(var(--s-7) + var(--s-9))}
}
.stat{position:relative;min-width:0}
@media (min-width:768px){
  .stat + .stat::before{content:'';position:absolute;left:0;top:12%;bottom:12%;width:1px;background:rgb(255 255 255 / .1)}
}
.stat__value{
  display:block;font-family:var(--ff-display);
  font-size:clamp(1.85rem,4.5vw,2.6rem);font-weight:700;
  color:var(--gold-400);line-height:var(--lh-flat);
  font-variant-numeric:tabular-nums lining-nums;
}
.stat__label{display:block;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--navy-200);margin-top:.55rem}

/* --------------------------------------------------------------------------
   19. LISTING PAGE
   -------------------------------------------------------------------------- */
.pagehead{background:var(--paper-soft);border-bottom:1px solid var(--ink-100);padding-block:clamp(1.75rem,5vw,3.25rem)}
.pagehead__title{font-size:var(--fs-3xl);margin:0 0 var(--s-3);max-width:24ch}
.pagehead__meta{font-size:var(--fs-sm);color:var(--ink-700);margin:0}
.pagehead__meta strong{color:var(--navy-900);font-weight:800}
.pagehead__lead{margin:var(--s-4) 0 0;color:var(--ink-700);max-width:64ch}
.pagehead__updated{font-size:var(--fs-xs);color:var(--ink-500);margin:var(--s-4) 0 0}
.pagehead__rera{font-size:var(--fs-sm);margin:var(--s-4) 0 0}

/* Answer-first block — the unit answer engines extract. */
.answer-block{
  font-size:var(--fs-lg);line-height:var(--lh-normal);color:var(--ink-900);
  max-width:70ch;margin:var(--s-5) 0 0;padding:var(--s-5) var(--s-6);
  background:var(--paper);border:1px solid var(--ink-200);
  border-left:3px solid var(--gold-500);border-radius:0 var(--r-md) var(--r-md) 0;
}

.listing{display:grid;grid-template-columns:1fr;gap:var(--s-7);align-items:start}
@media (min-width:900px){
  .listing{grid-template-columns:265px minmax(0,1fr)}
  .listing__filters{position:sticky;top:calc(var(--header-h) + var(--s-4))}
}
.listing__filters,.listing__results{min-width:0}
.filters{background:var(--paper-soft);border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:var(--s-5)}
.filters__title{font-size:var(--fs-lg);margin-bottom:var(--s-5)}
.filters__actions{margin-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);align-items:center}
.filters__clear{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding-inline:var(--s-3);
  font-size:var(--fs-xs);color:var(--ink-500);
}

.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:var(--s-6)}
.cardgrid > *{min-width:0}
.cardgrid--listing{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}

.pagination{display:flex;gap:var(--s-2);justify-content:center;flex-wrap:wrap;margin-top:var(--s-8)}
.pagination__link{
  min-width:46px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 var(--s-3);border:1px solid var(--ink-200);border-radius:var(--r-md);
  text-decoration:none;font-size:var(--fs-sm);font-weight:600;color:var(--ink-700);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.pagination__link:hover{border-color:var(--gold-400);background:var(--gold-50);color:var(--navy-900)}
.pagination__link.is-current{background:var(--navy-800);border-color:var(--navy-800);color:#fff;font-weight:800}

.empty{text-align:center;padding:var(--s-10) var(--s-5);background:var(--paper-soft);border:1px dashed var(--ink-300);border-radius:var(--r-lg)}
.empty__title{font-size:var(--fs-xl)}
.empty p{max-width:52ch;margin-inline:auto;color:var(--ink-700)}
.empty__actions{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin-top:var(--s-6)}

/* --------------------------------------------------------------------------
   20. PROPERTY DETAIL
   -------------------------------------------------------------------------- */
.property{padding-block:var(--s-7)}
.property__head{
  display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;
  padding-bottom:var(--s-6);border-bottom:1px solid var(--ink-200);margin-bottom:var(--s-7);
}
.property__headline{min-width:0;flex:1 1 300px}
.property__title{font-size:var(--fs-3xl);margin:0 0 var(--s-2)}
.property__location{color:var(--ink-700);margin:0}
.property__ref{font-size:var(--fs-2xs);color:var(--ink-500);margin:var(--s-3) 0 0;letter-spacing:var(--ls-wide);text-transform:uppercase;font-weight:700}
.property__pricebox{text-align:left;flex:0 0 auto;min-width:0}
@media (min-width:640px){ .property__pricebox{text-align:right} }
.property__price{
  font-family:var(--ff-display);font-size:var(--fs-4xl);font-weight:700;
  color:var(--navy-900);margin:0;line-height:var(--lh-flat);
  font-variant-numeric:tabular-nums lining-nums;
}
.property__price-exact{font-size:var(--fs-sm);color:var(--ink-500);margin:.4rem 0 0}
.property__price-note{font-size:var(--fs-2xs);color:var(--ok-700);font-weight:800;margin:.3rem 0 0;text-transform:uppercase;letter-spacing:var(--ls-wide)}

.property__layout{display:grid;grid-template-columns:1fr;gap:var(--s-7);align-items:start}
@media (min-width:960px){
  .property__layout{grid-template-columns:minmax(0,1fr) 370px}
  .property__rail{position:sticky;top:calc(var(--header-h) + var(--s-4))}
}
.property__main,.property__rail{min-width:0}
.property__gallery{border-radius:var(--r-lg);overflow:hidden;background:var(--navy-100);aspect-ratio:16/9;margin-bottom:var(--s-7)}
.property__gallery img{width:100%;height:100%;object-fit:cover}
.property__section{margin-bottom:var(--s-9)}
.property__section h2{font-size:var(--fs-xl);margin-bottom:var(--s-4)}
.property__rail-inner{
  background:var(--paper);border:1px solid var(--ink-200);border-top:2px solid var(--gold-500);
  border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--sh-2);
}
.property__rail-actions{display:flex;gap:var(--s-2);margin-top:var(--s-5)}
.property__rail-actions .btn{flex:1 1 0;min-width:0}

.spectable{display:grid;grid-template-columns:1fr;gap:0;margin:0;border:1px solid var(--ink-200);border-radius:var(--r-md);overflow:hidden}
.spectable__row{display:grid;grid-template-columns:1fr;gap:.15rem;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--ink-100)}
@media (min-width:520px){ .spectable__row{grid-template-columns:185px minmax(0,1fr);gap:var(--s-4)} }
.spectable__row:last-child{border-bottom:0}
.spectable__row:nth-child(odd){background:var(--paper-soft)}
.spectable dt{font-weight:700;color:var(--ink-500);margin:0;font-size:var(--fs-sm)}
.spectable dd{margin:0;color:var(--navy-900);font-weight:600;font-size:var(--fs-sm)}

/* --------------------------------------------------------------------------
   21. LOCALITY GUIDE
   -------------------------------------------------------------------------- */
.datatable{
  margin:var(--s-5) 0;border:1px solid var(--ink-200);border-radius:var(--r-md);
  font-size:var(--fs-sm);display:block;overflow-x:auto;
}
@media (min-width:640px){ .datatable{display:table} }
.datatable caption{text-align:left;font-size:var(--fs-xs);color:var(--ink-500);padding-bottom:var(--s-2)}
.datatable th,.datatable td{padding:var(--s-3) var(--s-4);text-align:left;border-bottom:1px solid var(--ink-100)}
.datatable thead th{background:var(--navy-50);font-weight:700;color:var(--navy-900);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-wide)}
.datatable tbody th{font-weight:700;color:var(--ink-700)}
.datatable tr:last-child th,.datatable tr:last-child td{border-bottom:0}
.datatable__note{font-size:var(--fs-sm);color:var(--ink-500)}

.factlist{list-style:none;padding:0}
.factlist li{position:relative;padding-left:1.4rem;margin-bottom:var(--s-3)}
.factlist li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--gold-600)}

.proscons{display:grid;grid-template-columns:1fr;gap:var(--s-5);margin-block:var(--s-7)}
@media (min-width:720px){ .proscons{grid-template-columns:repeat(2,minmax(0,1fr))} }
.proscons__col{padding:var(--s-6);border-radius:var(--r-lg);min-width:0}
.proscons__col h2{font-size:var(--fs-lg);margin-top:0}
.proscons__col ul{margin:0;padding-left:1.05rem}
.proscons__col--pro{background:var(--ok-50);border:1px solid #C2E2D1}
.proscons__col--con{background:var(--warn-50);border:1px solid #EDDCB6}
.proscons__note{font-size:var(--fs-xs);color:var(--ink-700);margin:var(--s-4) 0 0;font-style:italic}

.linklist{list-style:none;padding:0;columns:1;column-gap:var(--s-8)}
@media (min-width:600px){ .linklist{columns:2} }
.linklist li{margin-bottom:var(--s-2);break-inside:avoid}

/* --------------------------------------------------------------------------
   22. FAQ — native details, works with JS off
   -------------------------------------------------------------------------- */
.faq__list{border:1px solid var(--ink-200);border-radius:var(--r-lg);overflow:hidden}
.faq__item{border-bottom:1px solid var(--ink-100);background:var(--paper)}
.faq__item:last-child{border-bottom:0}
.faq__q{
  padding:var(--s-4) var(--s-10) var(--s-4) var(--s-5);
  font-weight:700;font-size:var(--fs-md);color:var(--navy-900);
  cursor:pointer;list-style:none;position:relative;transition:background var(--t-fast);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:'';position:absolute;right:var(--s-5);top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--gold-600);border-bottom:1.5px solid var(--gold-600);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t-base) var(--ease);
}
.faq__item[open] .faq__q::after{transform:translateY(-20%) rotate(-135deg)}
.faq__q:hover{background:var(--gold-50)}
.faq__a{padding:0 var(--s-5) var(--s-5)}
.faq__a p{margin:0;color:var(--ink-700)}
.faq{margin-bottom:var(--s-8)}

/* --------------------------------------------------------------------------
   23. CTA BAND
   -------------------------------------------------------------------------- */
.cta{
  position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(140deg,var(--navy-900),var(--navy-700));
  padding-block:clamp(2.5rem,6vw,4rem);
}
.cta::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-sheen)}
.cta--accent{background:linear-gradient(140deg,var(--navy-950),var(--navy-600))}
.cta--quiet{background:var(--paper-soft);color:var(--ink-900)}
.cta__inner{position:relative;display:flex;justify-content:space-between;align-items:center;gap:var(--s-7);flex-wrap:wrap}
.cta__text{flex:1 1 300px;min-width:0}
.cta__title{font-size:var(--fs-2xl);color:inherit;margin:0 0 var(--s-3)}
.cta--quiet .cta__title{color:var(--navy-900)}
.cta__body{margin:0;max-width:56ch;color:var(--navy-200)}
.cta--quiet .cta__body{color:var(--ink-700)}
.cta__hours{margin:var(--s-4) 0 0;font-size:var(--fs-sm);color:#fff;font-weight:600;display:flex;align-items:center}
.cta--quiet .cta__hours{color:var(--navy-900)}
.cta__actions{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* --------------------------------------------------------------------------
   24. FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
/* The sticky bar already carries WhatsApp on mobile, so the floating bubble
   would be the same action twice within 60px. It appears only from 900px up,
   where the sticky bar is gone. */
.wa-float{
  display:none;
  position:fixed;right:clamp(.75rem,3vw,1.5rem);z-index:90;
  bottom:calc(var(--mobilebar-h) + env(safe-area-inset-bottom) + .75rem);
  align-items:center;justify-content:center;gap:.55rem;
  height:52px;width:52px;padding:0;
  background:var(--wa-700);color:#fff;border-radius:var(--r-pill);
  box-shadow:0 6px 20px rgb(16 90 50 / .34), 0 2px 6px rgb(10 22 40 / .12);
  text-decoration:none;font-weight:700;font-size:var(--fs-sm);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base),background var(--t-fast);
}
@media (min-width:900px){
  .wa-float{display:flex;bottom:clamp(1rem,3vw,1.75rem);width:auto;padding:0 1.1rem 0 .9rem}
}
.wa-float:hover{background:var(--wa-800);color:#fff;transform:translateY(-2px);box-shadow:0 10px 28px rgb(16 90 50 / .42)}
.wa-float svg{flex:none}
.wa-float__label{display:none;color:#fff}
@media (min-width:900px){ .wa-float__label{display:inline} }
/* One-time attention pulse: three cycles, then it stops for good. */
.wa-float::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--wa-600);animation:wa-pulse 2.4s var(--ease) 3;pointer-events:none;
}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.65}70%,100%{transform:scale(1.4);opacity:0}}
@media (prefers-reduced-motion:reduce){ .wa-float::before{animation:none;opacity:0} }

/* --------------------------------------------------------------------------
   25. STICKY MOBILE ACTION BAR
   -------------------------------------------------------------------------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;
  background:rgb(255 255 255 / .98);backdrop-filter:blur(10px);
  border-top:1px solid var(--ink-200);box-shadow:0 -2px 14px rgb(10 22 40 / .10);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--gold-sheen);opacity:.85}
.sticky-cta__btn{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--mobilebar-h);padding:var(--s-2) var(--s-1);
  font-size:var(--fs-2xs);font-weight:800;text-decoration:none;text-align:center;
  color:var(--ink-700);border-right:1px solid var(--ink-100);
  transition:background var(--t-fast),color var(--t-fast);
}
.sticky-cta__btn:last-child{border-right:0}
.sticky-cta__btn svg{flex:none}
.sticky-cta__btn--call{color:var(--navy-800)}
.sticky-cta__btn--wa{color:var(--wa-700)}
.sticky-cta__btn--enquire{color:var(--gold-800);background:var(--gold-50)}
.sticky-cta__btn:active{background:var(--navy-50)}
@media (min-width:900px){
  .sticky-cta{display:none}
  body{padding-bottom:0}
}

/* --------------------------------------------------------------------------
   26. FOOTER
   -------------------------------------------------------------------------- */
.footer{
  background:var(--navy-950);color:var(--navy-200);
  padding-block:var(--s-10) var(--s-6);font-size:var(--fs-sm);
  border-top:2px solid var(--gold-600);
}
.footer__top{
  display:grid;grid-template-columns:1fr;gap:var(--s-8);
  padding-bottom:var(--s-8);border-bottom:1px solid rgb(255 255 255 / .09);
}
@media (min-width:600px){ .footer__top{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .footer__top{grid-template-columns:1.6fr repeat(4,minmax(0,1fr))} }
.footer__brand,.footer__col{min-width:0}
.footer__blurb{color:#8C9DB8;max-width:42ch}
.footer__nap{line-height:var(--lh-loose);margin-bottom:var(--s-5)}
.footer__nap-line{display:block;color:var(--navy-200)}
.footer__nap-link{
  display:inline-flex;align-items:center;
  color:#fff;font-weight:700;text-decoration:none;font-size:var(--fs-md);
  margin-top:var(--s-2);border-bottom:1px solid rgb(201 162 39 / .5);
  /* Tapping the phone number is a primary action — give it a real target. */
  min-height:44px;
}
.footer__nap-link:hover{color:var(--gold-400);border-color:var(--gold-400)}
.footer__hours{color:var(--navy-200)}
.footer__hours strong{color:#fff}
/* --fs-xs, not 2xs: these head the footer navigation columns, so they are
   read rather than glanced at. */
.footer__heading{font-family:var(--ff-body);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--gold-400);margin-bottom:var(--s-4);font-weight:700}
.footer__links{list-style:none;padding:0;margin:0}
.footer__links li{margin-bottom:.6rem}
.footer__links a{color:var(--navy-200);text-decoration:none;transition:color var(--t-fast)}
.footer__links a:hover{color:#fff}
.footer__rera{padding-block:var(--s-6);border-bottom:1px solid rgb(255 255 255 / .09);font-size:var(--fs-xs);color:#8C9DB8}
.footer__rera-title{font-family:var(--ff-body);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:#fff}
.footer__rera strong{color:var(--gold-400);font-size:var(--fs-sm)}
.footer__rera a{color:#fff}
.footer__disclaimer{max-width:105ch}
.footer__bottom{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;padding-top:var(--s-6);font-size:var(--fs-xs);color:#7C8DA8}
.footer__bottom p{margin:0}
.footer__meta a{color:var(--navy-200);text-decoration:none}
.footer__meta a:hover{color:#fff}
.footer--minimal{padding-block:var(--s-6);text-align:center}

/* --------------------------------------------------------------------------
   27. ERROR PAGES
   -------------------------------------------------------------------------- */
.errorpage{padding-block:clamp(3rem,9vw,6rem)}
.errorpage__inner{max-width:860px}
.errorpage__code{font-family:var(--ff-display);font-size:clamp(3.5rem,13vw,6.5rem);font-weight:700;line-height:var(--lh-flat);color:var(--navy-100);margin:0}
.errorpage__code--warn{color:var(--warn-50)}
.errorpage__title{font-size:var(--fs-3xl);margin:var(--s-4) 0}
.errorpage__body{color:var(--ink-700);max-width:56ch}
.errorpage__search{display:flex;gap:var(--s-3);margin:var(--s-6) 0 var(--s-9);max-width:560px;flex-wrap:wrap}
.errorpage__search input{flex:1 1 190px;min-width:0;min-height:48px;padding:var(--s-3) var(--s-4);border:1px solid var(--ink-300);border-radius:var(--r-md)}
.errorpage__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,195px),1fr));gap:var(--s-7)}
.errorpage__subtitle{font-family:var(--ff-body);font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--gold-700);margin-bottom:var(--s-4)}
.errorpage__links{list-style:none;padding:0}
.errorpage__links li{margin-bottom:.6rem}
.errorpage__actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}
.errorpage__debug{margin-top:var(--s-9);padding:var(--s-6);background:var(--bad-50);border:1px solid #F0C4BF;border-radius:var(--r-lg);font-size:var(--fs-sm)}
.errorpage__debug h2{font-size:var(--fs-md)}
.errorpage__debug-loc{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--ink-700)}
.errorpage__trace{overflow-x:auto;font-family:var(--ff-mono);font-size:11px;line-height:1.55;background:#fff;padding:var(--s-3);border-radius:var(--r-sm);max-height:340px}

/* --------------------------------------------------------------------------
   28. MISC PAGES
   -------------------------------------------------------------------------- */
.thanks{text-align:center;padding-block:var(--s-7)}
.thanks__title{font-size:var(--fs-3xl)}
.thanks__lead{font-size:var(--fs-lg);color:var(--ink-700)}
.thanks__actions{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin:var(--s-6) 0}
.thanks__rule{margin-block:var(--s-9)}
.thanks__subtitle{font-size:var(--fs-xl)}
.thanks__note{font-size:var(--fs-sm);color:var(--ink-500)}
.thanks__links{list-style:none;padding:0;text-align:left;max-width:46ch;margin-inline:auto}

.rera-panel{
  background:var(--navy-50);border:1px solid var(--navy-200);border-top:3px solid var(--gold-500);
  border-radius:var(--r-lg);padding:var(--s-8);margin-bottom:var(--s-9);text-align:center;
}
.rera-panel__label{font-family:var(--ff-body);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-700);margin-bottom:var(--s-4);font-weight:700}
.rera-panel__number{font-family:var(--ff-display);font-size:var(--fs-3xl);font-weight:700;color:var(--navy-900);letter-spacing:.02em;margin:0 0 var(--s-3)}
.rera-panel__pending{color:var(--warn-700);font-weight:700}
.rera-panel__authority{font-size:var(--fs-sm);color:var(--ink-700)}

.sitemapcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:var(--s-7)}
.sitemapcols > *{min-width:0}
.sitemapcols h2{font-size:var(--fs-lg);margin-top:var(--s-7)}
.sitemapcols h2:first-child{margin-top:0}
.sitemapcols .linklist{columns:1}

/* --------------------------------------------------------------------------
   29. PRINT
   -------------------------------------------------------------------------- */
@media print{
  .header,.footer,.sticky-cta,.wa-float,.breadcrumbs,.cta,.compliance-strip{display:none !important}
  body{padding-bottom:0;font-size:11pt;color:#000;background:#fff}
  .property__layout,.listing{grid-template-columns:1fr}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* --------------------------------------------------------------------------
   30. HOMEPAGE — search band, area cards, steps, testimonials, blog, map
   -------------------------------------------------------------------------- */

.hero__reassure{
  display:flex;align-items:center;gap:.1rem;
  margin:var(--s-5) 0 0;font-size:var(--fs-sm);
  color:var(--navy-200);font-weight:500;
}

/* --- Search band: lifted out of the hero so it reads as a tool ----------- */
.searchband{background:var(--paper);position:relative;z-index:2}
.searchband__inner{
  background:var(--paper);
  border:1px solid var(--ink-200);
  border-top:2px solid var(--gold-500);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  box-shadow:var(--sh-3);
}
@media (min-width:768px){
  .searchband__inner{padding:var(--s-8)}
  /* Lift the search panel so it reads as sitting on top of the page rather
     than merely after it. The stat bar gets matching bottom padding below,
     otherwise this negative margin paints straight over the stat labels. */
  .searchband{margin-top:calc(var(--s-9) * -1)}
}
.searchband__head{margin-bottom:var(--s-6)}
.searchband__title{font-size:var(--fs-2xl);margin:0 0 var(--s-2)}
.searchband__lead{font-size:var(--fs-sm);color:var(--ink-700);margin:0;max-width:60ch}

.psearch__grid{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media (min-width:560px){ .psearch__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){
  .psearch__grid{grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end}
}
.psearch__field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.psearch__field label{
  font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ls-wide);color:var(--ink-500);
}
.psearch__field select{
  width:100%;min-height:50px;padding:0 var(--s-8) 0 var(--s-4);
  border:1px solid var(--ink-300);border-radius:var(--r-md);
  background:var(--paper);color:var(--ink-900);font-weight:500;appearance:none;
  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 d='M1 1l5 5 5-5' fill='none' stroke='%236B7686' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-4) center;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.psearch__field select:focus{border-color:var(--navy-600);box-shadow:0 0 0 3px rgb(44 82 130 / .14);outline:none}
.psearch__submit{min-width:0}
@media (min-width:560px) and (max-width:1023px){ .psearch__submit{grid-column:1 / -1} }
.psearch__submit .btn{min-height:50px}
.psearch__note{
  margin:var(--s-5) 0 0;font-size:var(--fs-xs);color:var(--ink-500);
  padding-top:var(--s-4);border-top:1px solid var(--ink-100);
}

/* --- Area card ----------------------------------------------------------- */
.areacard{
  display:flex;flex-direction:column;gap:var(--s-2);min-width:0;
  background:var(--paper);border:1px solid var(--ink-200);
  border-left:2px solid var(--gold-400);
  border-radius:var(--r-md);padding:var(--s-6);
  transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base);
}
.areacard:hover{border-color:var(--gold-500);box-shadow:var(--sh-2);transform:translateY(-2px)}
.areacard{position:relative}
.areacard__title{font-size:var(--fs-xl);margin:0}
.areacard__title a{text-decoration:none;color:var(--navy-900)}
/* Stretched link: the whole card is the tap target, so the small title text
   is never the thing a thumb has to hit. */
.areacard__title a::after{content:'';position:absolute;inset:0;z-index:1}
.areacard__title a:hover{color:var(--gold-700)}
.areacard__link{position:relative;z-index:2}
.areacard__rate{margin:0;display:flex;flex-direction:column}
.areacard__rate-value{
  font-family:var(--ff-display);font-size:var(--fs-xl);font-weight:700;
  color:var(--navy-900);line-height:1.1;font-variant-numeric:tabular-nums;
}
.areacard__rate-unit{font-size:var(--fs-2xs);color:var(--ink-500);text-transform:uppercase;letter-spacing:var(--ls-wide);font-weight:600}
.areacard__body{font-size:var(--fs-sm);color:var(--ink-700);margin:0}
.areacard__meta{font-size:var(--fs-xs);color:var(--ink-500);margin:0}
.areacard__link{
  margin-top:auto;padding-top:var(--s-4);
  font-size:var(--fs-sm);font-weight:700;color:var(--gold-700);text-decoration:none;
  display:inline-flex;align-items:flex-end;min-height:44px;
}
.areacard__link:hover{color:var(--gold-800);text-decoration:underline}

/* --- How we help: numbered steps.
   The numbering is real information here — these are sequential stages, not
   decoration, which is the only case where numbered markers earn their place. */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:var(--s-6);
  counter-reset:step;
}
@media (min-width:600px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr))} }
.steps__item{
  position:relative;margin:0;min-width:0;
  padding-top:var(--s-6);
  border-top:1px solid var(--ink-200);
}
.steps__item::before{
  content:'';position:absolute;top:-1px;left:0;width:34px;height:1px;
  background:var(--gold-sheen);
}
/* gold-700, not gold-500. The design system records gold-500 (#C9A227) as
   ~2.5:1 on white — a fill and rule colour, never text. These step numbers
   are read, so they take the text-safe token at ~4.6:1. */
.steps__num{
  display:block;font-family:var(--ff-display);font-size:var(--fs-2xl);
  font-weight:700;color:var(--gold-700);line-height:1;margin-bottom:var(--s-3);
  font-variant-numeric:lining-nums;
}
.steps__title{font-family:var(--ff-body);font-size:var(--fs-md);font-weight:700;color:var(--navy-900);margin-bottom:var(--s-2)}
.steps__item p{margin:0;font-size:var(--fs-sm);color:var(--ink-700)}
.steps__cta{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-8)}

/* --- Testimonial --------------------------------------------------------- */
.tcard{
  display:flex;flex-direction:column;gap:var(--s-4);margin:0;min-width:0;
  background:var(--paper);border:1px solid var(--ink-200);
  border-radius:var(--r-lg);padding:var(--s-6);
}
.tcard__rating{margin:0;font-size:var(--fs-md);letter-spacing:.12em;color:var(--ink-300)}
.tcard__rating .is-on{color:var(--gold-500)}
.tcard__quote{
  margin:0;font-family:var(--ff-display);font-size:var(--fs-lg);
  line-height:var(--lh-snug);color:var(--navy-900);
}
.tcard__quote::before{content:'\201C'}
.tcard__quote::after{content:'\201D'}
.tcard__author{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--ink-100)}
.tcard__name{display:block;font-weight:700;font-size:var(--fs-sm);color:var(--navy-900)}
.tcard__loc{display:block;font-size:var(--fs-xs);color:var(--ink-500)}

/* --- Blog card ----------------------------------------------------------- */
.bcard{
  position:relative;display:flex;flex-direction:column;gap:var(--s-2);min-width:0;
  background:var(--paper);border:1px solid var(--ink-200);
  border-radius:var(--r-lg);padding:var(--s-6);
  transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base);
}
.bcard:hover{border-color:var(--gold-400);box-shadow:var(--sh-2);transform:translateY(-2px)}
.bcard__cat{
  margin:0;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--gold-700);
}
.bcard__title{font-family:var(--ff-body);font-size:var(--fs-lg);font-weight:700;line-height:var(--lh-snug);margin:0;color:var(--navy-900)}
.bcard__title a{color:inherit;text-decoration:none}
.bcard__title a::after{content:'';position:absolute;inset:0}
.bcard:hover .bcard__title a{color:var(--navy-700)}
.bcard__excerpt{font-size:var(--fs-sm);color:var(--ink-700);margin:0}
.bcard__meta{margin-top:auto;padding-top:var(--s-4);font-size:var(--fs-xs);color:var(--ink-500)}

/* --- Map facade: click to open, no eager third-party iframe -------------- */
.mapcard{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-5);text-decoration:none;
  background:var(--navy-50);border:1px solid var(--navy-200);
  border-radius:var(--r-md);color:var(--navy-900);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.mapcard:hover{background:var(--gold-50);border-color:var(--gold-400);color:var(--navy-900)}
.mapcard__pin{
  display:grid;place-items:center;flex:none;
  width:46px;height:46px;border-radius:var(--r-md);
  background:var(--navy-800);color:var(--gold-400);
}
.mapcard__text{display:flex;flex-direction:column;min-width:0}
.mapcard__text strong{font-size:var(--fs-sm)}
.mapcard__text span{font-size:var(--fs-xs);color:var(--ink-500)}

/* --- Blog index and article ---------------------------------------------- */
.article{max-width:72ch;margin-inline:auto}
.article__meta{font-size:var(--fs-sm);color:var(--ink-500);margin-bottom:var(--s-6)}
.article__body{font-size:var(--fs-md);line-height:var(--lh-loose)}
.article__body h2{font-size:var(--fs-2xl);margin-top:var(--s-8)}
.article__body h3{font-size:var(--fs-xl);margin-top:var(--s-6)}
.article__body img{border-radius:var(--r-md);margin-block:var(--s-5)}
.article__body blockquote{
  margin:var(--s-6) 0;padding:var(--s-4) var(--s-6);
  border-left:3px solid var(--gold-500);background:var(--paper-soft);
  font-family:var(--ff-display);font-size:var(--fs-lg);color:var(--navy-900);
}
.article__tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--ink-200)}

/* --------------------------------------------------------------------------
   31. PROPERTY DETAIL — gallery, facts, amenities, floor plans, media
   -------------------------------------------------------------------------- */
.property__chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-4)}
.property__location{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.property__location svg{flex:none;color:var(--gold-600)}
.property__subhead{
  font-family:var(--ff-body);font-size:var(--fs-2xs);font-weight:800;
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--gold-700);margin:var(--s-6) 0 var(--s-3);
}
.property__landmark{font-size:var(--fs-sm);color:var(--ink-700)}

/* --- Gallery -------------------------------------------------------------- */
.pgal{margin-bottom:var(--s-7)}
.pgal__stage{
  position:relative;margin:0;overflow:hidden;
  border-radius:var(--r-lg);background:var(--navy-100);aspect-ratio:3/2;
}
.pgal__stage img{width:100%;height:100%;object-fit:cover;display:block}
.pgal__count{
  position:absolute;right:var(--s-3);bottom:var(--s-3);
  background:rgb(10 22 40 / .72);color:#fff;
  padding:.25rem .6rem;border-radius:var(--r-pill);
  font-size:var(--fs-2xs);font-weight:700;font-variant-numeric:tabular-nums;
}
.pgal__thumbs{
  display:flex;gap:var(--s-2);list-style:none;margin:var(--s-3) 0 0;padding:0 0 var(--s-2);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.pgal__thumbs li{margin:0;flex:none}
.pgal__thumb{
  display:block;width:96px;border-radius:var(--r-sm);overflow:hidden;
  border:2px solid transparent;opacity:.72;
  transition:opacity var(--t-fast),border-color var(--t-fast);
}
.pgal__thumb img{width:100%;height:64px;object-fit:cover;display:block}
.pgal__thumb:hover{opacity:1}
.pgal__thumb.is-active{opacity:1;border-color:var(--gold-500)}
@media (min-width:768px){ .pgal__thumb{width:118px} .pgal__thumb img{height:78px} }
.pgal__none{
  padding:var(--s-8) var(--s-6);margin-bottom:var(--s-7);text-align:center;
  background:var(--paper-soft);border:1px dashed var(--ink-300);border-radius:var(--r-lg);
}
.pgal__none .cluster{justify-content:center;margin-top:var(--s-5)}

/* --- Key facts strip ------------------------------------------------------ */
.pfacts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;margin-bottom:var(--s-8);
  background:var(--ink-200);border:1px solid var(--ink-200);border-radius:var(--r-md);overflow:hidden;
}
@media (min-width:768px){ .pfacts{grid-template-columns:repeat(6,minmax(0,1fr))} }
.pfact{background:var(--paper);padding:var(--s-4) var(--s-3);text-align:center;min-width:0}
.pfact__value{
  display:block;font-family:var(--ff-display);font-size:var(--fs-xl);font-weight:700;
  color:var(--navy-900);line-height:1.1;font-variant-numeric:tabular-nums;
}
.pfact__label{
  display:block;font-size:var(--fs-2xs);text-transform:uppercase;
  letter-spacing:var(--ls-wide);color:var(--ink-500);margin-top:.3rem;font-weight:600;
}

/* --- Amenities ------------------------------------------------------------ */
.amenlist{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));
  gap:var(--s-2) var(--s-5);list-style:none;margin:0 0 var(--s-4);padding:0;
}
.amenlist li{
  display:flex;align-items:center;gap:.5rem;margin:0;
  font-size:var(--fs-sm);color:var(--ink-700);min-width:0;
}
.amenlist svg{flex:none;color:var(--ok-600)}

/* --- Floor plans ---------------------------------------------------------- */
.pfloor{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--s-4)}
.pfloor__item{
  position:relative;display:block;border:1px solid var(--ink-200);
  border-radius:var(--r-md);overflow:hidden;background:var(--paper);
  transition:border-color var(--t-fast),box-shadow var(--t-base);
}
.pfloor__item:hover{border-color:var(--gold-400);box-shadow:var(--sh-2)}
.pfloor__item img{width:100%;height:auto;display:block;background:#fff}
.pfloor__open{
  display:block;padding:var(--s-3);font-size:var(--fs-xs);font-weight:700;
  color:var(--gold-700);border-top:1px solid var(--ink-100);
}

/* --- Video / virtual tour links ------------------------------------------- */
.pmedia{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);text-decoration:none;min-width:0;
  background:var(--navy-50);border:1px solid var(--navy-200);
  border-radius:var(--r-md);color:var(--navy-900);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.pmedia:hover{background:var(--gold-50);border-color:var(--gold-400);color:var(--navy-900)}
.pmedia__icon{
  display:grid;place-items:center;flex:none;width:42px;height:42px;
  border-radius:50%;background:var(--navy-800);color:var(--gold-400);
}
.pmedia__text{display:flex;flex-direction:column;min-width:0}
.pmedia__text strong{font-size:var(--fs-sm)}
.pmedia__text span{font-size:var(--fs-xs);color:var(--ink-500)}

/* --- Rail ----------------------------------------------------------------- */
.property__rail-price{
  font-family:var(--ff-display);font-size:var(--fs-2xl);font-weight:700;
  color:var(--navy-900);margin:0;line-height:1;font-variant-numeric:tabular-nums;
}
.property__rail-ref{
  font-size:var(--fs-2xs);color:var(--ink-500);margin:.4rem 0 var(--s-5);
  letter-spacing:var(--ls-wide);text-transform:uppercase;font-weight:700;
}
.property__rail-hours{display:flex;align-items:center;font-size:var(--fs-xs);color:var(--ink-700);margin:var(--s-4) 0 0}
.property__rail-note{font-size:var(--fs-xs);color:var(--ink-500);margin:var(--s-3) 0 0;text-align:center}
.property__rail-inner hr{margin:var(--s-6) 0;border-top-color:var(--ink-100)}
.property__similar{margin-top:var(--s-10);padding-top:var(--s-9);border-top:1px solid var(--ink-200)}

/* --- Card: property type line --------------------------------------------- */
.pcard__type{
  margin:0;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--gold-700);
}

/* --------------------------------------------------------------------------
   32. LOCATION LANDING PAGES
   -------------------------------------------------------------------------- */
.lochero{
  position:relative;color:#fff;overflow:hidden;
  padding-block:clamp(2.5rem,6vw,4.5rem);
  background:
    radial-gradient(700px 380px at 88% -20%, rgb(201 162 39 / .18), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
}
.lochero__eyebrow{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  font-weight:700;color:var(--gold-400);margin:0 0 var(--s-3);
}
.lochero__title{font-size:var(--fs-4xl);color:#fff;margin:0 0 var(--s-4);max-width:18ch}
.lochero__lead{font-size:var(--fs-lg);color:var(--navy-200);max-width:62ch;margin:0 0 var(--s-6)}
.lochero__meta{display:flex;flex-wrap:wrap;gap:var(--s-6) var(--s-8);margin-bottom:var(--s-7)}
.lochero__stat{min-width:0}
.lochero__stat-value{
  display:block;font-family:var(--ff-display);font-size:var(--fs-2xl);font-weight:700;
  color:var(--gold-400);line-height:1;font-variant-numeric:tabular-nums;
}
/* --fs-xs, not 2xs: this labels a number the visitor is meant to read
   ("12 listings available"), not a decorative eyebrow. */
.lochero__stat-label{
  display:block;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:var(--ls-wide);color:var(--navy-200);margin-top:.35rem;
}
.lochero__actions{display:flex;gap:var(--s-3);flex-wrap:wrap}

.locpage{display:grid;grid-template-columns:1fr;gap:var(--s-8);align-items:start;padding-block:var(--section-y)}
@media (min-width:960px){
  .locpage{grid-template-columns:minmax(0,1fr) 350px;gap:var(--s-9)}
  .locpage__rail{position:sticky;top:calc(var(--header-h) + var(--s-4))}
}
.locpage__main,.locpage__rail{min-width:0}

.locsection{margin-bottom:var(--s-9)}
.locsection > h2{font-size:var(--fs-2xl);margin-bottom:var(--s-5)}
.locsection__more{margin-top:var(--s-6)}

/* Why buy — a labelled reason, not a bare bullet */
.reasonlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.reasonlist li{
  margin:0;padding-left:var(--s-5);position:relative;
  border-left:2px solid var(--gold-400);
}
.reasonlist strong{display:block;color:var(--navy-900);font-size:var(--fs-md);margin-bottom:.2rem}
.reasonlist span{display:block;color:var(--ink-700);font-size:var(--fs-sm)}

/* Amenity clusters */
.amengrid{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
@media (min-width:640px){ .amengrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} }
.amencard{
  background:var(--paper);border:1px solid var(--ink-200);
  border-top:2px solid var(--gold-400);border-radius:var(--r-md);
  padding:var(--s-5);min-width:0;
}
.amencard__title{font-family:var(--ff-body);font-size:var(--fs-md);font-weight:700;color:var(--navy-900);margin:0}
.amencard__sub{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-wide);
  color:var(--ink-500);margin:.2rem 0 var(--s-4);font-weight:600;
}
.amencard ul{list-style:none;margin:0;padding:0}
.amencard li{
  margin:0 0 var(--s-3);padding-bottom:var(--s-3);
  border-bottom:1px solid var(--ink-100);font-size:var(--fs-sm);color:var(--ink-900);
}
.amencard li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.amencard__note{display:block;font-size:var(--fs-xs);color:var(--ink-500);margin-top:.15rem}

/* Rail */
.locrail{
  background:var(--paper);border:1px solid var(--ink-200);
  border-top:2px solid var(--gold-500);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--sh-2);
}
.locrail__title{font-size:var(--fs-xl);margin:0 0 var(--s-3)}
.locrail__body{font-size:var(--fs-sm);color:var(--ink-700);margin:0 0 var(--s-5)}
.locrail__actions{display:flex;gap:var(--s-2)}
.locrail__actions .btn{flex:1 1 0;min-width:0}
.locrail__hours{display:flex;align-items:center;font-size:var(--fs-xs);color:var(--ink-700);margin:var(--s-4) 0 0}
.locrail__note{font-size:var(--fs-xs);color:var(--ink-500);margin:var(--s-3) 0 0;text-align:center}
.locrail hr{margin:var(--s-6) 0;border-top-color:var(--ink-100)}

/* --------------------------------------------------------------------------
   33. BLOG — reading experience
   -------------------------------------------------------------------------- */
.article{padding-block:var(--s-8)}
.article__head{margin-bottom:var(--s-7)}
.article__title{font-size:var(--fs-4xl);margin:0 0 var(--s-4);max-width:20ch}
.article__standfirst{
  font-size:var(--fs-lg);color:var(--ink-700);line-height:var(--lh-normal);
  max-width:62ch;margin:0 0 var(--s-5);
}
.article__byline{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;
  font-size:var(--fs-sm);color:var(--ink-500);
  padding-top:var(--s-4);border-top:1px solid var(--ink-100);
}
.article__author{font-weight:700;color:var(--navy-900)}
.article__updated{color:var(--gold-700);font-weight:600}
.article__hero{margin:0 0 var(--s-8)}
.article__hero img{width:100%;height:auto;border-radius:var(--r-lg);display:block}

/* Measure and rhythm tuned for sustained reading rather than scanning. */
.article__body{max-width:68ch;font-size:1.0625rem;line-height:1.75;color:var(--ink-900)}
.article__body > *:first-child{margin-top:0}
.article__body p{margin:0 0 1.35em}
.article__body h2{font-size:var(--fs-2xl);margin:2em 0 .6em;scroll-margin-top:calc(var(--header-h) + 1rem)}
.article__body h3{font-size:var(--fs-xl);margin:1.7em 0 .5em;scroll-margin-top:calc(var(--header-h) + 1rem)}
.article__body ul,.article__body ol{margin:0 0 1.35em;padding-left:1.4em}
.article__body li{margin-bottom:.5em}
.article__body a{color:var(--navy-500);text-decoration:underline;text-underline-offset:.18em}
.article__body a:hover{color:var(--gold-700)}
.article__body strong{font-weight:700;color:var(--navy-900)}
.article__body blockquote{
  margin:1.8em 0;padding:var(--s-4) var(--s-6);
  border-left:3px solid var(--gold-500);background:var(--paper-soft);
  font-family:var(--ff-display);font-size:var(--fs-xl);line-height:1.45;color:var(--navy-900);
}
.article__body blockquote p:last-child{margin-bottom:0}
.article__body figure{margin:1.8em 0}
.article__body img{width:100%;height:auto;border-radius:var(--r-md);display:block}
.article__body figcaption{font-size:var(--fs-xs);color:var(--ink-500);margin-top:.5rem;text-align:center}
.article__body hr{margin:2.4em 0}
.article__body table{
  width:100%;border-collapse:collapse;margin:1.8em 0;font-size:var(--fs-sm);
  display:block;overflow-x:auto;
}
@media (min-width:640px){ .article__body table{display:table} }
.article__body th,.article__body td{border:1px solid var(--ink-200);padding:var(--s-3) var(--s-4);text-align:left}
.article__body th{background:var(--navy-50);font-weight:700;color:var(--navy-900)}
.article__body code{
  font-family:var(--ff-mono);font-size:.9em;background:var(--paper-tint);
  padding:.1em .35em;border-radius:var(--r-xs);
}
.article__tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--ink-200)}
.article__faq{margin-top:var(--s-9)}
.article__faq h2{font-size:var(--fs-2xl);margin-bottom:var(--s-5)}

/* Internal links block */
.artlinks{
  margin-top:var(--s-8);padding:var(--s-6);
  background:var(--paper-soft);border:1px solid var(--ink-200);
  border-radius:var(--r-lg);
}
.artlinks__title{font-size:var(--fs-lg);margin:0 0 var(--s-5)}
.artlinks__group{margin-bottom:var(--s-5)}
.artlinks__group:last-child{margin-bottom:0}
.artlinks__group h3{
  font-family:var(--ff-body);font-size:var(--fs-2xs);font-weight:800;
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--gold-700);margin:0 0 var(--s-2);
}
.artlinks__group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4)}
.artlinks__group li{margin:0}
.artlinks__group a{font-weight:600;font-size:var(--fs-sm)}

/* Author box */
.authorbox{
  margin-top:var(--s-8);padding:var(--s-6);
  background:var(--navy-50);border:1px solid var(--navy-200);
  border-left:3px solid var(--gold-500);border-radius:0 var(--r-md) var(--r-md) 0;
}
.authorbox__label{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--ink-500);margin:0 0 .3rem;font-weight:700;
}
.authorbox__name{font-family:var(--ff-display);font-size:var(--fs-xl);font-weight:700;color:var(--navy-900);margin:0}
.authorbox__role{font-size:var(--fs-sm);color:var(--gold-700);font-weight:700;margin:.1rem 0 var(--s-3)}
.authorbox__bio{font-size:var(--fs-sm);color:var(--ink-700);margin:0}

/* Category strip and latest list */
.catstrip{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
.catstrip li{margin:0}
.catstrip__item{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .85rem;background:var(--paper);
  border:1px solid var(--ink-200);border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;color:var(--navy-900);
}
.catstrip__count{
  font-size:var(--fs-2xs);font-weight:800;color:var(--gold-800);
  background:var(--gold-50);padding:.1rem .4rem;border-radius:var(--r-pill);
}
.latestlist{margin-top:var(--s-9);padding-top:var(--s-7);border-top:1px solid var(--ink-200)}
.latestlist__title{font-size:var(--fs-xl);margin-bottom:var(--s-4)}
.latestlist ul{list-style:none;margin:0;padding:0;columns:1}
@media (min-width:720px){ .latestlist ul{columns:2;column-gap:var(--s-8)} }
.latestlist li{
  margin-bottom:var(--s-3);break-inside:avoid;
  display:flex;justify-content:space-between;gap:var(--s-4);align-items:baseline;
}
.latestlist a{font-weight:600;min-width:0}
.latestlist span{font-size:var(--fs-xs);color:var(--ink-500);white-space:nowrap;flex:none}

/* --------------------------------------------------------------------------
   34. CONSENT AND THANK YOU
   -------------------------------------------------------------------------- */
.consent{
  position:fixed;left:0;right:0;z-index:120;
  bottom:calc(var(--mobilebar-h) + env(safe-area-inset-bottom));
  background:var(--navy-950);color:var(--navy-200);
  border-top:1px solid rgb(201 162 39 / .3);
  box-shadow:0 -4px 20px rgb(7 15 28 / .3);
}
@media (min-width:900px){ .consent{bottom:0} }
.consent[hidden]{display:none}
.consent__inner{
  max-width:var(--container);margin-inline:auto;
  padding:var(--s-4) var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);
}
.consent__text{margin:0;font-size:var(--fs-sm);max-width:70ch;min-width:0}
.consent__text a{color:var(--gold-400)}
/* Equal weight on both buttons: a decline styled as small print is not a
   free choice, and the DPDP default is denied. */
.consent__actions{display:flex;gap:var(--s-3);flex:none}
.consent__actions .btn--ghost{color:#fff;border-color:rgb(255 255 255 / .35)}
.consent__actions .btn--ghost:hover{background:rgb(255 255 255 / .12);color:#fff}

.thanks__tick{
  display:grid;place-items:center;width:62px;height:62px;margin:0 auto var(--s-5);
  border-radius:50%;background:var(--ok-50);color:var(--ok-600);
  border:2px solid var(--ok-600);
}
.thanks__ref{
  font-size:var(--fs-sm);color:var(--ink-500);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.thanks__ref strong{color:var(--navy-900);font-family:var(--ff-mono)}

/* --------------------------------------------------------------------------
   35. LANDING PAGES
   No navigation, one path out. Every style here exists to keep attention on
   the form or the phone number.
   -------------------------------------------------------------------------- */
.body--landing{padding-bottom:calc(var(--mobilebar-h) + env(safe-area-inset-bottom))}
@media (min-width:900px){ .body--landing{padding-bottom:0} }

.lpheader{
  background:var(--paper);border-bottom:1px solid var(--ink-100);
  position:sticky;top:0;z-index:100;
}
.lpheader__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);min-height:64px;
}
.brand--static{cursor:default}
.lpheader__phone{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);min-height:44px;
  background:var(--navy-800);color:#fff;border-radius:var(--r-md);
  text-decoration:none;transition:background var(--t-fast);
}
.lpheader__phone:hover{background:var(--navy-600);color:#fff}
.lpheader__phone svg{flex:none;color:var(--gold-400)}
.lpheader__phone-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.lpheader__phone-label{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-wide);
  color:var(--navy-200);font-weight:700;
}
.lpheader__phone-number{font-size:var(--fs-sm);font-weight:800;white-space:nowrap}
@media (max-width:479px){ .lpheader__phone-number{display:none} }

/* Hero: form beside the pitch on desktop, so the conversion is visible
   without scrolling on a paid click. */
.lphero{
  position:relative;color:#fff;overflow:hidden;
  padding-block:clamp(2rem,5vw,3.5rem);
  background:
    radial-gradient(760px 420px at 88% -16%, rgb(201 162 39 / .20), transparent 62%),
    linear-gradient(162deg, var(--navy-950) 0%, var(--navy-800) 58%, var(--navy-700) 100%);
}
.lphero__inner{display:grid;grid-template-columns:1fr;gap:var(--s-8);align-items:start}
@media (min-width:960px){ .lphero__inner{grid-template-columns:1.15fr 400px;gap:var(--s-9)} }
.lphero__content,.lphero__form{min-width:0}
/* Not --fs-2xs. This line carries real content ("Govindpuram, Ghaziabad ·
   Open every day"), not a decorative label, so it is held at 12px. */
.lphero__eyebrow{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  font-weight:700;color:var(--gold-400);margin:0 0 var(--s-3);
}
.lphero__title{font-size:var(--fs-4xl);color:#fff;margin:0 0 var(--s-4);max-width:18ch}
.lphero__lead{font-size:var(--fs-lg);color:var(--navy-200);margin:0 0 var(--s-6);max-width:56ch}
.lphero__actions{display:flex;gap:var(--s-3);flex-wrap:wrap}
.lphero__reassure{
  display:flex;align-items:center;margin:var(--s-5) 0 0;
  font-size:var(--fs-sm);color:var(--navy-200);
}
.lphero__form .enquiry{
  background:var(--paper);border-radius:var(--r-lg);padding:var(--s-6);
  box-shadow:var(--sh-4);border-top:3px solid var(--gold-500);
}

.lpsection{padding-block:clamp(2.5rem,6vw,4rem)}
.lpsection--alt{background:var(--paper-soft)}
.lpsection__title{font-size:var(--fs-2xl);margin:0 0 var(--s-6)}
.lpsection__title--light{color:#fff}

.lpbenefits{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
@media (min-width:640px){ .lpbenefits{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} }
.lpbenefit{display:flex;gap:var(--s-3);align-items:flex-start;min-width:0}
.lpbenefit__tick{
  display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--ok-50);color:var(--ok-600);border:1px solid var(--ok-600);
}
.lpbenefit strong{display:block;color:var(--navy-900);font-size:var(--fs-md);margin-bottom:.15rem}
.lpbenefit span{display:block;font-size:var(--fs-sm);color:var(--ink-700)}

.lpfacts{max-width:70ch}
.lpfeatures li em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--ink-500)}

.lptrust{background:var(--navy-900);color:var(--navy-200)}
.lptrust__grid{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
@media (min-width:640px){ .lptrust__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} }
.lptrust__item{min-width:0;padding-top:var(--s-4);border-top:1px solid rgb(201 162 39 / .35)}
.lptrust__item strong{display:block;color:#fff;font-size:var(--fs-md);margin-bottom:var(--s-2)}
.lptrust__item p{margin:0;font-size:var(--fs-sm);color:var(--navy-200)}

.lpcta{
  position:relative;color:#fff;overflow:hidden;
  padding-block:clamp(2.5rem,6vw,3.5rem);
  background:linear-gradient(140deg,var(--navy-900),var(--navy-600));
}
.lpcta::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-sheen)}
.lpcta__inner{
  position:relative;display:flex;flex-wrap:wrap;gap:var(--s-6);
  align-items:center;justify-content:space-between;
}
.lpcta__text{flex:1 1 300px;min-width:0}
.lpcta__text h2{font-size:var(--fs-2xl);color:#fff;margin:0 0 var(--s-3)}
.lpcta__text p{margin:0;color:var(--navy-200);max-width:58ch}
.lpcta__actions{display:flex;gap:var(--s-3);flex-wrap:wrap}

.lpform .enquiry{
  background:var(--paper);border:1px solid var(--ink-200);
  border-top:3px solid var(--gold-500);border-radius:var(--r-lg);
  padding:var(--s-7);box-shadow:var(--sh-2);
}

.lpfooter{
  background:var(--navy-950);color:#8C9DB8;
  padding-block:var(--s-7);font-size:var(--fs-xs);text-align:center;
}
.lpfooter p{margin:0 0 var(--s-2)}
.lpfooter__nap strong{color:#fff}
.lpfooter__rera strong{color:var(--gold-400)}
.lpfooter a{color:var(--navy-200)}
.lpfooter a:hover{color:#fff}
/* Was opacity:.75 over an already-muted colour, which measured below AA.
   Opacity is the wrong tool for de-emphasis: it compounds invisibly and
   hides the real contrast from anyone reading the stylesheet. */
.lpfooter__note{max-width:80ch;margin-inline:auto;color:#9FB0C6}

/* --- NAP block: one renderer, so the address string never drifts ---------- */
.nap{font-style:normal;line-height:var(--lh-loose)}
.nap--inline{display:inline}
.nap__name{font-weight:700;color:inherit}
.nap__phone,.nap__email{font-weight:700}
.footer .nap{color:var(--navy-200)}
.footer .nap__name{color:#fff}