/* ==========================================================================
   Find My Property — design system
   Tokens → base → layout → components → utilities
   ========================================================================== */

:root{
  /* brand */
  --navy-900:#071626; --navy-800:#0b2545; --navy-700:#103154; --navy-600:#16406f;
  --teal-700:#095c54; --teal-600:#0d7a6f; --teal-500:#12958a; --teal-50:#e8f6f4;
  --amber-600:#a86c12; --amber-500:#c8871b; --amber-100:#fdf3e0;
  --wa:#25d366; --wa-dark:#128c7e;

  /* neutrals */
  --ink:#0f1b2d; --ink-2:#33465e; --muted:#5b6b82; --faint:#8494a8;
  --line:#e3e9f0; --line-2:#eef2f7;
  --bg:#f6f8fb; --surface:#ffffff; --surface-2:#fbfcfe;

  /* status */
  --ok:#0f8a5f; --ok-bg:#e6f6ee;
  --warn:#a2610a; --warn-bg:#fdf3e0;
  --err:#b42318; --err-bg:#fdecea;
  --info:#175cd3; --info-bg:#eaf1fe;

  /* type */
  --f-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem;
  --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.125rem; --fs-4xl:2.625rem;

  /* space + shape */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --sh-1:0 1px 2px rgba(11,37,69,.06),0 1px 3px rgba(11,37,69,.05);
  --sh-2:0 4px 12px rgba(11,37,69,.07),0 2px 4px rgba(11,37,69,.04);
  --sh-3:0 12px 32px rgba(11,37,69,.10),0 4px 8px rgba(11,37,69,.05);
  --sh-nav:0 1px 0 rgba(11,37,69,.07);
  --container:1200px;
  --hdr-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-sans);font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}

/* SVG is handled separately from img/video, deliberately.

   `svg{height:auto}` was the global rule that broke icon sizing site-wide. An
   SVG carrying only a viewBox has no intrinsic size, so the browser resolves
   its width against the container; `height:auto` then overrides the element's
   own `height` attribute, so even an icon that stated its size was scaled to
   the container. That is how a 20px pin rendered at 500px inside a card, and
   why it only looked correct in the handful of places the stylesheet happened
   to have a component rule.

   Now: an SVG keeps whatever size it states, and one that states nothing is
   bounded to the default icon size instead of inheriting its container. The
   `:where()` wrapper contributes no specificity, so that fallback is (0,0,1)
   and every component rule further down this file still wins on source order.
   A genuine full-bleed illustration opts out with class="svg-fluid". */
svg{max-width:100%;display:block}
svg:where(:not([width]),:not([height])):where(:not(.svg-fluid)){width:1.25rem;height:1.25rem}
a{color:var(--teal-700);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
:focus-visible{outline:3px solid var(--teal-500);outline-offset:2px;border-radius:4px}
.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

h1,h2,h3,h4,h5,h6{margin:0 0 var(--sp-3);font-weight:800;line-height:1.22;letter-spacing:-.018em;color:var(--ink)}
h1{font-size:clamp(1.6rem,1.15rem + 2vw,2.625rem)}
h2{font-size:clamp(1.3rem,1.05rem + 1.1vw,1.875rem)}
h3{font-size:clamp(1.075rem,.98rem + .45vw,1.3rem)}
h4{font-size:1.0625rem}
h5,h6{font-size:.9375rem}
p{margin:0 0 var(--sp-4)}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.25rem}
li{margin-bottom:.35rem}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0}
small{font-size:var(--fs-sm)}
strong,b{font-weight:700}

/* ------------------------------------------------------------- layout ---- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4)}
.container-narrow{max-width:820px}
.section{padding-block:var(--sp-7)}
.section-tight{padding-block:var(--sp-6)}
.section-alt{background:var(--surface)}
.stack>*+*{margin-top:var(--sp-4)}
.grid{display:grid;gap:var(--sp-4)}
.grid>*{min-width:0}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.row-between{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;justify-content:space-between}
.spread{margin-left:auto}
@media (max-width:960px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.layout-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-6);align-items:start}
.layout-sidebar>*{min-width:0}
@media (max-width:1024px){.layout-sidebar{grid-template-columns:minmax(0,1fr)}}
.sticky-side{position:sticky;top:calc(var(--hdr-h) + 16px)}

.section-head{margin-bottom:var(--sp-5)}
.section-head h2{margin-bottom:.35rem}
.section-head p{color:var(--muted);margin:0;max-width:70ch}
.eyebrow{display:inline-block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-600);margin-bottom:.5rem}

/* ============================================================== icons ====
   An inline SVG that carries only a viewBox has NO intrinsic size. Dropped into
   a container with no rule for it, the sizing algorithm scales it to the
   container's width — which is how a 20px pin renders at 500px in a card.

   The old stylesheet constrained icons per component, 28 opt-in rules deep, so
   any icon in a context nobody had written a rule for was unconstrained. These
   rules invert that: every icon is bounded by default, and a component opts
   *out* by naming a different size.

   Everything below is deliberately low specificity (0,1,1 or less) and sits
   ahead of every component, so each `.component svg{...}` rule further down the
   file still wins on source order.
   ======================================================================== */

/* the floor: nothing rendered through icon() can exceed this without asking */
svg.ic{
  width:var(--ic, 1.25rem);
  height:var(--ic, 1.25rem);
  max-width:100%;
  flex:none;              /* never stretch in a flex row */
  display:inline-block;
  vertical-align:middle;
}

/* the scale */
.ic-xs{--ic:.875rem}      /* 14px — dense metadata */
.ic-sm{--ic:1rem}         /* 16px — inline labels, buttons, small controls */
.ic-md{--ic:1.25rem}      /* 20px — default; nav, form fields, list rows */
.ic-lg{--ic:1.5rem}       /* 24px — small cards, property features */
.ic-xl{--ic:2rem}         /* 32px — section headers */

/* semantic wrappers: a tinted tile with the icon centred inside it.
   The tile is sized, the icon inside is always a fraction of the tile, so a
   feature icon can never outgrow its own badge. */
.icon-tile{
  --tile:2.75rem;
  flex:none;width:var(--tile);height:var(--tile);
  display:grid;place-items:center;border-radius:calc(var(--tile) / 3.6);
  background:var(--teal-50);border:1px solid #cfe9e5;color:var(--teal-600);
}
.icon-tile svg.ic{--ic:calc(var(--tile) * .45)}
.icon-tile--sm{--tile:2rem}
.icon-tile--lg{--tile:3.25rem}
.icon-tile--dark{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.17);color:#5eead4}

/* an icon sitting inside running text or a heading tracks the text size and is
   capped, so a heading icon can never become a graphic */
h1 svg.ic,h2 svg.ic,h3 svg.ic,h4 svg.ic,h5 svg.ic,h6 svg.ic{
  --ic:1em; max-width:1.5em; max-height:1.5em; margin-right:.35em
}
p svg.ic,li svg.ic,label svg.ic,td svg.ic,th svg.ic,summary svg.ic{--ic:1em; max-width:1.5em; max-height:1.5em}

/* a bare anchor or list row that is not a button. Only the custom property is
   set, never width directly, so any component rule further down still wins. */
a svg.ic{--ic:1.0625rem}

/* ------------------------------------------------------------ buttons ---- */
.btn{
  --btn-bg:var(--teal-600);--btn-fg:#fff;--btn-bd:var(--teal-600);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.15rem;border-radius:var(--r);border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);font-weight:700;font-size:var(--fs-base);
  cursor:pointer;text-decoration:none;transition:transform .12s ease,box-shadow .16s ease,background .16s ease;
  line-height:1.2;text-align:center;
}
.btn:hover{text-decoration:none;box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{--btn-bg:var(--teal-600);--btn-bd:var(--teal-600)}
.btn-primary:hover{--btn-bg:var(--teal-700);--btn-bd:var(--teal-700)}
.btn-navy{--btn-bg:var(--navy-800);--btn-bd:var(--navy-800)}
.btn-navy:hover{--btn-bg:var(--navy-700);--btn-bd:var(--navy-700)}
.btn-outline{--btn-bg:transparent;--btn-fg:var(--navy-800);--btn-bd:var(--line)}
.btn-outline:hover{--btn-bg:var(--surface);--btn-bd:var(--navy-600);--btn-fg:var(--navy-800)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--navy-800);--btn-bd:transparent}
.btn-ghost:hover{--btn-bg:var(--line-2)}
.btn-wa{--btn-bg:var(--wa);--btn-bd:var(--wa);--btn-fg:#05331b}
.btn-wa:hover{--btn-bg:#1fbd5b;--btn-bd:#1fbd5b}
.btn-amber{--btn-bg:var(--amber-500);--btn-bd:var(--amber-500);--btn-fg:#2b1b00}
.btn-white{--btn-bg:#fff;--btn-bd:#fff;--btn-fg:var(--navy-800)}
.btn-sm{padding:.5rem .8rem;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn-lg{padding:.9rem 1.5rem;font-size:var(--fs-md)}
.btn-block{width:100%}
.btn[disabled],.btn.is-loading{opacity:.6;pointer-events:none}
.btn.is-loading::after{content:"";width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------- header ---- */
.site-header{position:sticky;top:0;z-index:60;background:var(--surface);box-shadow:var(--sh-nav)}
.header-inner{display:flex;align-items:center;gap:var(--sp-3);height:var(--hdr-h);min-width:0}
.brand{display:flex;align-items:center;gap:.6rem;flex:none;min-width:0}
.brand:hover{text-decoration:none}
.brand img,.brand svg{height:36px;width:auto}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-weight:800;font-size:1.0625rem;color:var(--navy-800);letter-spacing:-.02em}
.brand-sub{font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-600);font-weight:700}

/* Header city context. Uses the .has-menu/.dropdown component so it inherits
   the existing open/close behaviour; only the trigger's appearance differs. */
.citypick{flex:none}
.citypick>button{
  gap:.35rem;padding:.4rem .55rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink-2);max-width:190px
}
.citypick>button:hover{border-color:var(--teal-500);background:var(--teal-50);color:var(--teal-700)}
.citypick>button svg:first-child{color:var(--teal-600)}
.citypick__name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citypick__menu{min-width:240px}
.citypick__label{
  margin:.1rem .65rem .35rem;font-size:.6875rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)
}
.citypick__menu a.is-current{background:var(--teal-50);color:var(--teal-700)}
.citypick__more{border-top:1px solid var(--line-2);margin-top:.3rem;padding-top:.55rem;color:var(--teal-700)}
.mnav-city a.is-current{color:var(--teal-700);font-weight:700}

/* Does not shrink, and is never clipped. `flex-shrink:1` plus `overflow:clip`
   looked like a safe fallback but was worse than the bug it guarded: the nav
   silently swallowed its last item ("Find Property For Me") instead of
   overflowing, so nothing measuring the viewport could see it. The breakpoints
   below are sized from the row's real content width and hand over to the
   hamburger before space runs out. */
.mainnav{display:flex;align-items:center;gap:.1rem;margin-left:auto;min-width:0;flex-shrink:0}
.mainnav a{
  padding:.55rem .68rem;border-radius:var(--r-sm);color:var(--ink-2);
  font-weight:600;font-size:.875rem;white-space:nowrap;
}
.mainnav a:hover{background:var(--line-2);color:var(--navy-800);text-decoration:none}
.mainnav a[aria-current="page"]{color:var(--teal-700);background:var(--teal-50)}
.has-menu{position:relative}
.has-menu>button{display:flex;align-items:center;gap:.3rem;background:none;border:0;padding:.55rem .68rem;border-radius:var(--r-sm);color:var(--ink-2);font-weight:600;font-size:.875rem;cursor:pointer}
.has-menu>button:hover{background:var(--line-2);color:var(--navy-800)}
.has-menu>button svg{width:13px;height:13px;transition:transform .15s}
.has-menu[data-open="1"]>button svg{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  padding:.6rem;display:none;z-index:70;
}
.has-menu[data-open="1"] .dropdown{display:block}
.dropdown a{display:block;padding:.5rem .65rem;border-radius:var(--r-sm);font-size:.875rem;font-weight:600;color:var(--ink-2)}
.dropdown a small{display:block;font-weight:500;color:var(--faint);font-size:.75rem}
.dropdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.header-cta{display:flex;align-items:center;gap:.5rem;flex:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:.45rem .55rem;cursor:pointer}
.nav-toggle svg{width:22px;height:22px;color:var(--navy-800)}
/* The header row is wider than the 1200px body column, and now carries a city
   control as well: brand + city + ten nav items + two labelled CTAs measure
   about 1583px. The breakpoints below are derived from that measured content
   width at each tier, so the row hands over to the next tier *before* it runs
   out of space rather than after.

     >=1620   full nav, labelled CTAs          needs ~1583 + 40 padding
     >=1400   icon-only CTAs, tighter nav      needs ~1295
     >=1330   brand sub-line dropped           needs ~1258
     >=1280   gaps squeezed before words       needs ~1197
      <1280   hamburger

   The header gets its own container because the body's 1200px column cannot
   hold the row at any tier above the last one. */
.site-header .header-inner{max-width:min(1600px, 100% - 2.5rem)}

@media (max-width:1619px){
  .mainnav a,.has-menu>button{padding:.5rem .48rem;font-size:.8125rem}
  .header-cta .cta-txt{display:none}
  .header-cta .btn{padding:.6rem .72rem}
}
@media (max-width:1399px){ .brand-sub{display:none} }
@media (max-width:1329px){
  /* Squeeze the gaps before squeezing the words. */
  .mainnav{gap:0}
  .mainnav a,.has-menu>button{padding:.5rem .38rem}
  .header-cta{gap:.35rem}
  .citypick>button{max-width:150px}
}
@media (max-width:1279px){
  .mainnav,.header-cta .btn-desktop{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto}
  /* The city stays in the header on tablets — it is market context, not a nav
     item — and the drawer carries it too. */
  .citypick{margin-left:auto}
}
@media (max-width:600px){
  /* On a phone the chip would crowd the logo; "Your city" is the first group in
     the drawer instead. */
  .citypick{display:none}
}

/* mobile drawer */
.mobile-nav{position:fixed;inset:0;z-index:90;display:none}
.mobile-nav[data-open="1"]{display:block}
.mobile-nav__scrim{position:absolute;inset:0;background:rgba(7,22,38,.5);backdrop-filter:blur(2px)}
.mobile-nav__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(88vw,380px);background:var(--surface);
  box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:slideIn .2s ease
}
@keyframes slideIn{from{transform:translateX(18px);opacity:.6}to{transform:none;opacity:1}}
.mobile-nav__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4);border-bottom:1px solid var(--line)}
.mobile-nav__body{padding:var(--sp-4);overflow-y:auto;flex:1}
.mobile-nav__body a{display:block;padding:.7rem .2rem;font-weight:700;color:var(--navy-800);border-bottom:1px solid var(--line-2)}
.mobile-nav__body .sub a{font-weight:600;font-size:.875rem;color:var(--ink-2);padding-left:.9rem}
.mobile-nav__group{margin-top:var(--sp-4)}
.mobile-nav__group h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:.3rem}
.mobile-nav__foot{padding:var(--sp-4);border-top:1px solid var(--line);display:grid;gap:.5rem}
.icon-btn{background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:.4rem;cursor:pointer;display:inline-flex}
.icon-btn svg{width:20px;height:20px}

/* --------------------------------------------------------------- hero ---- */
.hero{
  position:relative;background:
    radial-gradient(1100px 460px at 78% -8%,rgba(18,149,138,.30),transparent 62%),
    linear-gradient(160deg,var(--navy-800) 0%,var(--navy-900) 100%);
  color:#fff;padding-block:var(--sp-7) var(--sp-6);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:56px 56px;mask-image:linear-gradient(to bottom,#000,transparent 78%)
}
.hero>*{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-6);align-items:start;margin-bottom:var(--sp-5)}
.hero-grid>*{min-width:0}
@media (max-width:1024px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-aside{display:none}}
.hero-aside{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-xl);padding:var(--sp-5)}
.hero-aside h2{color:#fff;font-size:1.0625rem;margin-bottom:var(--sp-4)}
.hero-steps{list-style:none;margin:0;padding:0;counter-reset:hs}
.hero-steps li{counter-increment:hs;display:flex;gap:.75rem;padding-bottom:var(--sp-4);position:relative}
.hero-steps li:last-child{padding-bottom:0}
.hero-steps li::before{content:counter(hs);flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--teal-600);color:#fff;font-size:.75rem;font-weight:800;display:grid;place-items:center}
.hero-steps li:not(:last-child)::after{content:"";position:absolute;left:13px;top:30px;bottom:6px;width:1px;background:rgba(255,255,255,.22)}
.hero-steps strong{display:block;color:#fff;font-size:.9375rem;margin-bottom:.1rem}
.hero-steps span{font-size:.8125rem;color:#b6cbe0;line-height:1.5}
.hero-aside .note{margin:var(--sp-4) 0 0;padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.16);
  font-size:.75rem;color:#9fb9d2;line-height:1.6}
.hero-aside .note strong{color:#fff}
.hero-aside .note a{color:#7fe0d2;text-decoration:underline;font-weight:700}
.hero-aside .note a:hover{color:#a9efe4}
.hero h1{color:#fff;margin-bottom:var(--sp-3);max-width:17ch}
.hero-lede{font-size:clamp(.95rem,.9rem + .3vw,1.0625rem);color:#c9d8ea;max-width:66ch;margin-bottom:var(--sp-4)}
.hero-badge{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:#dbe8f6;padding:.32rem .7rem;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:700;margin-bottom:var(--sp-4)}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:#4ade80}

/* first-fold USPs — real crawlable text */
.usp-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 var(--sp-5);padding:0;list-style:none}
.usp-strip li{
  display:flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-full);
  padding:.42rem .85rem;font-size:.8125rem;font-weight:700;color:#e6eef8
}
@media (max-width:640px){.usp-strip{gap:.4rem}.usp-strip li{font-size:.75rem;padding:.34rem .6rem}}
.usp-strip svg{width:15px;height:15px;color:#5eead4;flex:none}
.usp-strip--light li{background:var(--teal-50);border-color:#cfe9e5;color:var(--teal-700)}
.usp-strip--light svg{color:var(--teal-600)}

/* property reference, shown wherever a customer might need to quote it */
.ref-line{
  font-size:.8125rem;color:var(--muted);margin:.15rem 0 .6rem;
  font-variant-numeric:tabular-nums;letter-spacing:.01em
}
.ref-line strong{color:var(--ink);font-weight:800}

/* data-sharing consent — deliberately legible, not fine print */
.consent-note{
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--teal-600);
  border-radius:var(--r);padding:.75rem .9rem;margin:var(--sp-4) 0 0;
  font-size:.8125rem;line-height:1.55;color:var(--ink-2)
}
.consent-note a{text-decoration:underline}
.consent-note+.consent-note{margin-top:.5rem}

/* how-it-works: compact head, then a tight card grid. Deliberately not a set of
   full-viewport blocks — the page should read like a property site, not a deck. */
.hiw-head{padding-block:var(--sp-5) var(--sp-4)}
.hiw-head h1{margin-bottom:.3rem;max-width:30ch}
.hiw-lede{
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem);font-weight:600;color:var(--teal-700);
  line-height:1.4;margin:0 0 var(--sp-4);max-width:44ch
}
.hiw-head .summary-box{margin-bottom:var(--sp-4)}
.hiw-head .usp-row,.hiw-head .usp4{margin-bottom:0}

.hiw-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));
  gap:.7rem;list-style:none;margin:0;padding:0
}
.hiw-steps>li{
  display:flex;gap:.7rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:.85rem .95rem;min-width:0
}
.hiw-steps>li.is-fee{background:var(--teal-50);border-color:#cfe9e5}
.hiw-steps__n{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--teal-50);border:1px solid #cfe9e5
}
.hiw-steps>li.is-fee .hiw-steps__n{background:#fff;border-color:#bfe3dd}
.hiw-steps__n svg{width:17px;height:17px;color:var(--teal-600)}
.hiw-steps__tx{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.hiw-steps__k{
  font-size:.625rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal-600)
}
.hiw-steps__tx strong{font-size:.9375rem;line-height:1.3;color:var(--ink)}
.hiw-steps__tx>span:last-child{font-size:.8125rem;color:var(--muted);line-height:1.5}
.hiw-steps>li.is-fee .hiw-steps__tx strong{font-size:1.0625rem}

/* partner offer cards */
.offer-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:var(--sp-4)}
.offer-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:.6rem;min-width:0
}
.offer-card--lead{border-color:var(--teal-500);box-shadow:var(--sh-2)}
.offer-card h3{font-size:1.0625rem;margin:0}
.offer-card__promo{
  background:var(--teal-50);border:1px solid #cfe9e5;border-radius:var(--r);
  padding:.75rem .9rem;margin:.2rem 0
}
.offer-card__promo .k{font-size:.6875rem;text-transform:uppercase;letter-spacing:.07em;color:var(--teal-700);font-weight:800}
.offer-card__promo .v{font-size:1.0625rem;font-weight:800;color:var(--ink);line-height:1.3;margin-top:.15rem}
.offer-card__after{font-size:.875rem;color:var(--muted);line-height:1.55}
.offer-card__after strong{color:var(--ink)}
.offer-card ul{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.35rem}
.offer-card ul li{display:flex;gap:.45rem;font-size:.875rem;color:var(--ink-2)}
.offer-card ul svg{width:15px;height:15px;color:var(--ok);flex:none;margin-top:.2rem}
.offer-card .btn{margin-top:auto}

/* ── first-fold USP strip ────────────────────────────────────────────────
   Four claims across one row on a desktop, folding to 2x2. Each item is a
   small cell with the icon to the left of the words — the markers are removed
   and nothing is stacked, so it reads as a marketplace USP strip rather than a
   bullet list. It has to stay short: this is inside the first fold. */
.usp4{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.45rem;margin:0 0 var(--sp-5);padding:0;list-style:none
}
.usp4>li{
  display:flex;align-items:center;gap:.5rem;min-width:0;
  padding:.5rem .7rem;border-radius:var(--r);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)
}
.usp4>li svg{
  width:22px;height:22px;max-width:none;max-height:none;flex:none;color:#5eead4
}
.usp4 b{
  font-size:.75rem;font-weight:800;line-height:1.3;color:#fff;
  letter-spacing:.005em;overflow-wrap:anywhere;min-width:0
}
.usp4--light>li{background:var(--teal-50);border-color:#cfe9e5}
.usp4--light>li svg{color:var(--teal-600)}
.usp4--light b{color:var(--ink)}

@media (max-width:1100px){
  .usp4>li{padding:.45rem .55rem;gap:.42rem}
  .usp4 b{font-size:.6875rem}
}
@media (max-width:820px){
  .usp4{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
}
@media (max-width:599px){
  .usp4{gap:.4rem}
  .usp4>li{padding:.45rem .5rem}
  .usp4>li svg{width:20px;height:20px}
  .usp4 b{font-size:.6875rem}
}

/* first-fold USP row — small icons, real text, wraps to one column on phones */
.usp-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:.55rem 1.1rem;margin:0 0 var(--sp-5);padding:0;list-style:none
}
.usp-row>li{display:flex;align-items:flex-start;gap:.55rem;min-width:0}
.usp-row__ic{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.17)
}
.usp-row__ic svg{width:19px;height:19px;color:#5eead4}
.usp-row__tx{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.usp-row__tx strong{font-size:.8125rem;font-weight:800;color:#fff;line-height:1.25}
.usp-row__tx span{font-size:.75rem;color:#b9cde0;line-height:1.4}
.usp-row--light .usp-row__ic{background:var(--teal-50);border-color:#cfe9e5}
.usp-row--light .usp-row__ic svg{color:var(--teal-600)}
.usp-row--light .usp-row__tx strong{color:var(--ink)}
.usp-row--light .usp-row__tx span{color:var(--muted)}
@media (max-width:640px){
  .usp-row{grid-template-columns:1fr;gap:.5rem}
  .usp-row__ic{width:32px;height:32px;border-radius:9px}
  .usp-row__ic svg{width:16px;height:16px}
}

/* partner promotional strip — sits below the first fold, never inside it */
.promo-strip{background:linear-gradient(135deg,#0b2545,#0d7a6f);color:#fff;border-radius:var(--r-xl);padding:var(--sp-5)}
.promo-strip__grid{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between}
.promo-strip__tx{min-width:0;flex:1 1 380px}
.promo-strip h2{font-size:1.25rem;margin:0 0 .4rem;color:#fff;letter-spacing:-.01em}
.promo-strip p{margin:0;color:#d3e4f2;font-size:.9375rem;line-height:1.55}
.promo-strip p+p{margin-top:.25rem}
.promo-strip__note{font-size:.75rem;color:#9fbdd6;margin-top:.6rem}
.promo-strip__note a{color:#bfe9e2;text-decoration:underline}
.promo-strip__cta{display:flex;gap:.5rem;flex-wrap:wrap;flex:none}
.promo-strip__count{
  display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-full);padding:.3rem .7rem;
  font-size:.75rem;font-weight:800;margin-bottom:.6rem
}
.promo-strip__count svg{width:14px;height:14px}
@media (max-width:720px){.promo-strip{padding:var(--sp-4)}.promo-strip h2{font-size:1.0625rem}}

/* ------------------------------------------------------- search widget --- */
.searchbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:var(--sp-4);color:var(--ink)}
.search-tabs{display:flex;gap:.25rem;overflow-x:auto;margin-bottom:var(--sp-3);scrollbar-width:none}
.search-tabs::-webkit-scrollbar{display:none}
.search-tabs button{
  border:0;background:transparent;padding:.5rem .9rem;border-radius:var(--r-full);
  font-weight:800;font-size:.8125rem;letter-spacing:.03em;color:var(--muted);cursor:pointer;white-space:nowrap
}
.search-tabs button[aria-selected="true"]{background:var(--navy-800);color:#fff}
.search-row{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1.1fr) auto;gap:.5rem}
@media (max-width:900px){.search-row{grid-template-columns:1fr 1fr}.search-row .search-submit{grid-column:1/-1}}
@media (max-width:520px){.search-row{grid-template-columns:1fr}}
.search-field{position:relative}
.search-field svg.lead{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--faint)}
.search-field input,.search-field select{padding-left:2.25rem}
.search-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--sp-3)}
.search-actions .btn{flex:1 1 auto}

/* --------------------------------------------------------------- forms --- */
.field{margin-bottom:var(--sp-4)}
.field>label,.label{display:block;font-weight:700;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:.35rem}
.req{color:var(--err)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],
input[type=password],input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%;padding:.68rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-base);
  transition:border-color .14s,box-shadow .14s;
}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235b6b82'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:16px;padding-right:2rem}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal-500);box-shadow:0 0 0 3px rgba(18,149,138,.14)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px rgba(180,35,24,.10)}
.help{font-size:var(--fs-xs);color:var(--faint);margin-top:.3rem}
.err-text{font-size:var(--fs-xs);color:var(--err);margin-top:.3rem;font-weight:600}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4);margin:0 0 var(--sp-4)}
legend{font-weight:800;font-size:var(--fs-sm);padding-inline:.4rem;color:var(--navy-800)}
.check{display:flex;align-items:flex-start;gap:.55rem;font-size:var(--fs-base);font-weight:600;color:var(--ink-2);cursor:pointer;padding:.3rem 0}
.check input{width:17px;height:17px;margin-top:.15rem;accent-color:var(--teal-600);flex:none}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:.15rem .8rem}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4)}
.form-grid>*,.form-grid-3>*{min-width:0}
.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--sp-4)}
.form-grid .full,.form-grid-3 .full{grid-column:1/-1}
@media (max-width:700px){.form-grid,.form-grid-3{grid-template-columns:1fr}}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1)}
.searchbox .search-field input,
.searchbox .search-field select{padding-left:2.35rem}

/* ------------------------------------------------------ property cards --- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(295px,100%),1fr));gap:var(--sp-4)}
.cards>*{min-width:0}
.pcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s,border-color .18s
}
.pcard:hover{box-shadow:var(--sh-3);transform:translateY(-2px);border-color:#d3dde9}
.pcard__media{position:relative;aspect-ratio:4/3;background:var(--line-2);overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.pcard:hover .pcard__media img{transform:scale(1.035)}
.pcard__badges{position:absolute;top:.6rem;left:.6rem;display:flex;flex-wrap:wrap;gap:.3rem;max-width:calc(100% - 4rem)}
.pcard__save{position:absolute;top:.55rem;right:.55rem;background:rgba(255,255,255,.94);border:0;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-1)}
.pcard__save svg{width:17px;height:17px;color:var(--muted)}
.pcard__save[aria-pressed="true"] svg{color:var(--err);fill:var(--err)}
.pcard__deal{position:absolute;bottom:.6rem;left:.6rem;background:rgba(7,22,38,.82);color:#fff;font-size:.6875rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:.24rem .55rem;border-radius:var(--r-sm)}
.pcard__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:.55rem;flex:1}
.pcard__price{font-size:1.25rem;font-weight:800;color:var(--navy-800);letter-spacing:-.02em;line-height:1.1}
.pcard__price small{display:block;font-size:.75rem;font-weight:600;color:var(--faint);letter-spacing:0;margin-top:.15rem}
.pcard__title{font-size:.9375rem;font-weight:700;line-height:1.35;margin:0}
.pcard__title a{color:var(--ink)}
.pcard__title a:hover{color:var(--teal-700)}
.pcard__loc{display:flex;align-items:center;gap:.32rem;font-size:var(--fs-sm);color:var(--muted)}
.pcard__loc svg{width:16px;height:16px;flex:none;color:var(--faint)}
.pcard__specs{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:.55rem 0 0;border-top:1px solid var(--line-2)}
.pcard__specs li{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.22rem .5rem}
.pcard__meta{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--faint);margin-top:auto;padding-top:.55rem}
.pcard__id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--muted)}
.pcard__cta{display:grid;grid-template-columns:1fr auto auto;gap:.4rem;padding:0 var(--sp-4) var(--sp-4)}
.pcard--wide{flex-direction:row}
@media (max-width:640px){.pcard--wide{flex-direction:column}}
.pcard--wide .pcard__media{width:40%;aspect-ratio:auto;min-height:210px}
@media (max-width:640px){.pcard--wide .pcard__media{width:100%;aspect-ratio:4/3;min-height:0}}

/* -------------------------------------------------------------- badges --- */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-xs);font-weight:800;padding:.24rem .55rem;border-radius:var(--r-sm);letter-spacing:.01em;white-space:nowrap}
.badge svg{width:12px;height:12px}
.badge-new{background:var(--teal-600);color:#fff}
.badge-featured{background:var(--amber-500);color:#241500}
.badge-verified{background:var(--ok-bg);color:var(--ok);border:1px solid #b9e6d0}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-muted{background:var(--line-2);color:var(--muted)}
.badge-err{background:var(--err-bg);color:var(--err)}
.badge-avail{background:#e6f6ee;color:var(--ok);border:1px solid #b9e6d0}
.badge-closed{background:#eceff3;color:var(--muted)}
.badge-lg{font-size:var(--fs-sm);padding:.35rem .7rem}

/* --------------------------------------------------------------- chips --- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-full);padding:.42rem .85rem;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);
  white-space:nowrap;max-width:100%
}
a.chip:hover{border-color:var(--teal-500);color:var(--teal-700);text-decoration:none;background:var(--teal-50)}
.chip .n{color:var(--faint);font-weight:600}
.chip-active{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.chip-active .n{color:#a8c0d8}

/* -------------------------------------------------------------- panels --- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
.panel-sm{padding:var(--sp-4)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:var(--sp-4)}
.panel-head h2,.panel-head h3{margin:0}
.panel-tint{background:linear-gradient(180deg,var(--teal-50),var(--surface));border-color:#cfe9e5}
.panel-navy{background:linear-gradient(150deg,var(--navy-800),var(--navy-900));color:#fff;border-color:transparent}
.panel-navy h2,.panel-navy h3{color:#fff}
.panel-navy p{color:#c2d3e6}

/* --------------------------------------------------------- summary box --- */
.summary-box{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal-600);
  border-radius:var(--r);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5)
}
.summary-box p:last-child{margin-bottom:0}
.summary-box .label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.09em;color:var(--teal-700);font-weight:800;margin-bottom:.4rem}
.takeaways{background:var(--amber-100);border:1px solid #f0dfbc;border-radius:var(--r);padding:var(--sp-4) var(--sp-5)}
.takeaways h3{font-size:1rem;margin-bottom:.6rem}
.takeaways ul{margin:0;padding-left:1.15rem}

/* ---------------------------------------------------------- jump links --- */
.jump{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-5)}
.jump h2{font-size:.8125rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:.6rem}
.jump ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:.15rem .9rem;counter-reset:j}
.jump li{min-width:0}
.jump a{overflow-wrap:anywhere}
.jump li{margin:0;counter-increment:j}
.jump a{display:block;padding:.32rem 0;font-size:var(--fs-base);font-weight:600;color:var(--ink-2)}
.jump a::before{content:counter(j) ". ";color:var(--faint);font-weight:700}
.jump a:hover{color:var(--teal-700)}

/* ------------------------------------------------------------ prose ------ */
.prose{max-width:74ch;min-width:0;overflow-wrap:break-word}
/* Form outcome banners are scroll targets. The sticky header would otherwise
   sit on top of the message the visitor was just sent to read. */
.js-form-success,.js-form-error,[aria-invalid="true"]{scroll-margin-top:calc(var(--hdr-h) + 20px)}
.js-form-success:focus-visible,.js-form-error:focus-visible{outline:2px solid var(--teal-600);outline-offset:3px}
.js-form-success:focus:not(:focus-visible),.js-form-error:focus:not(:focus-visible){outline:none}

.prose h2{margin-top:var(--sp-6);scroll-margin-top:calc(var(--hdr-h) + 20px)}
.prose h3{margin-top:var(--sp-5);scroll-margin-top:calc(var(--hdr-h) + 20px)}
.prose>*:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.45rem}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose blockquote{margin:var(--sp-4) 0;padding:.2rem 0 .2rem var(--sp-4);border-left:3px solid var(--teal-500);color:var(--ink-2);font-style:italic}
.prose img{border-radius:var(--r);margin-block:var(--sp-4)}
.prose-wide{max-width:none}

/* ------------------------------------------------------------- tables ---- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-base);min-width:520px}
table.data th,table.data td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
table.data thead th{background:var(--surface-2);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;white-space:nowrap;position:sticky;top:0}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--surface-2)}
table.data .num{text-align:right;font-variant-numeric:tabular-nums}
/* Small print inside a data cell. Previously unstyled, so "₹0" and its
   qualifier ran together on one line and read as a single garbled figure. */
table.data .sub{display:block;font-size:var(--fs-sm);line-height:1.35;color:var(--muted);font-weight:500;margin-top:.15rem}
.table-note{font-size:var(--fs-xs);color:var(--faint);margin-top:.5rem}

/* ---------------------------------------------------------------- FAQ ---- */
.faq{display:grid;gap:.6rem}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq summary{
  cursor:pointer;padding:.95rem 2.6rem .95rem 1.05rem;font-weight:700;color:var(--navy-800);
  position:relative;list-style:none;font-size:var(--fs-md);line-height:1.4
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.05rem;top:1.2rem;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.35rem}
.faq details[open] summary{color:var(--teal-700)}
.faq .faq-a{padding:0 1.05rem 1.05rem;color:var(--ink-2)}
.faq .faq-a>*:last-child{margin-bottom:0}

/* -------------------------------------------------------- property page -- */
.pdp-head{background:var(--surface);border-bottom:1px solid var(--line);padding-block:var(--sp-5) var(--sp-4)}
.pdp-title-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:flex-start;justify-content:space-between}
@media (max-width:760px){.pdp-title-row>div{text-align:left!important;width:100%}}
.pdp-price{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);font-weight:800;color:var(--navy-800);letter-spacing:-.025em;line-height:1.1}
.pdp-price small{display:block;font-size:.8125rem;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:.2rem}
.factbar{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:var(--sp-4) 0 0;padding:0}
.factbar li{
  display:flex;flex-direction:column;gap:.1rem;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:.55rem .85rem;min-width:104px
}
.factbar .k{font-size:.6875rem;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:800}
.factbar .v{font-size:.9375rem;font-weight:800;color:var(--ink)}

.gallery{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:.5rem;border-radius:var(--r-lg);overflow:hidden}
.gallery>*{min-width:0}
.gallery__main{position:relative;aspect-ratio:4/3;background:var(--line-2)}
.gallery__main img{width:100%;height:100%;object-fit:cover}
.gallery__side{display:grid;grid-template-rows:1fr 1fr;gap:.5rem}
.gallery__side .t{position:relative;background:var(--line-2);overflow:hidden;border-radius:0}
.gallery__side img{width:100%;height:100%;object-fit:cover}
.gallery__more{position:absolute;inset:0;background:rgba(7,22,38,.62);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.0625rem}
@media (max-width:760px){.gallery{grid-template-columns:minmax(0,1fr)}.gallery__side{grid-template-columns:1fr 1fr;grid-template-rows:none;height:110px}}
.thumbs{display:flex;gap:.45rem;overflow-x:auto;padding:.6rem 0 .2rem;scrollbar-width:thin}
.thumbs button{flex:none;width:84px;height:62px;border-radius:var(--r-sm);overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:var(--line-2)}
.thumbs button[aria-current="true"]{border-color:var(--teal-600)}
.thumbs img{width:100%;height:100%;object-fit:cover}

.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:.15rem var(--sp-4);list-style:none;margin:0;padding:0}
.spec-grid li{display:flex;justify-content:space-between;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-base)}
.spec-grid .k{color:var(--muted)}
.spec-grid .v{font-weight:700;text-align:right}
.amenity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:.5rem;list-style:none;margin:0;padding:0}
.amenity-grid li{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-base);font-weight:600;color:var(--ink-2)}
.amenity-grid svg{width:16px;height:16px;color:var(--teal-600);flex:none}

.enquiry-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--sp-5)}
.enquiry-card h3{font-size:1.0625rem}
.trust-list{list-style:none;margin:var(--sp-4) 0 0;padding:var(--sp-4) 0 0;border-top:1px solid var(--line-2);display:grid;gap:.5rem}
.trust-list li{display:flex;gap:.5rem;font-size:var(--fs-sm);color:var(--muted)}
.trust-list svg{width:15px;height:15px;color:var(--ok);flex:none;margin-top:.15rem}

.unavailable-banner{background:var(--warn-bg);border:1px solid #f0dfbc;border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5)}
.unavailable-banner h2{font-size:1.0625rem;margin-bottom:.35rem;color:var(--warn)}
.unavailable-banner p{margin-bottom:.75rem;color:var(--ink-2)}

/* --------------------------------------------------------- filter rail --- */
.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4)}
.filters h3{font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.6rem}
.filter-group{padding-block:var(--sp-4);border-bottom:1px solid var(--line-2)}
.filter-group:first-of-type{padding-top:0}
.filter-group:last-of-type{border-bottom:0;padding-bottom:0}
.filter-group>h4{font-size:var(--fs-sm);font-weight:800;margin-bottom:.55rem;color:var(--navy-800)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.active-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--sp-4)}
.active-filters .pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--teal-50);border:1px solid #cfe9e5;color:var(--teal-700);border-radius:var(--r-full);padding:.28rem .5rem .28rem .7rem;font-size:var(--fs-xs);font-weight:700}
.active-filters .pill a{color:var(--teal-700);line-height:1;font-size:.9rem}
.result-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.result-bar .count{font-size:var(--fs-base);color:var(--muted)}
.result-bar .count strong{color:var(--ink);font-weight:800}
.filter-toggle{display:none}
@media (max-width:1024px){
  .filter-toggle{display:inline-flex}
  .filters-wrap{display:none}
  .filters-wrap[data-open="1"]{display:block;margin-bottom:var(--sp-4)}
}

/* ---------------------------------------------------------- empty/error -- */
.empty-state{text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg);padding:var(--sp-7) var(--sp-5)}
.empty-state svg{width:52px;height:52px;color:var(--faint);margin:0 auto var(--sp-4)}
.empty-state h2,.empty-state h3{margin-bottom:.5rem}
.empty-state p{color:var(--muted);max-width:52ch;margin-inline:auto}
.empty-state .row{justify-content:center;margin-top:var(--sp-4)}
.skeleton{background:linear-gradient(90deg,var(--line-2) 25%,#f4f7fa 37%,var(--line-2) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:var(--r-sm)}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.alert{border-radius:var(--r);padding:.85rem 1rem;font-size:var(--fs-base);font-weight:600;margin-bottom:var(--sp-4);border:1px solid}
.alert-success{background:var(--ok-bg);border-color:#b9e6d0;color:#0a6b49}
.alert-error{background:var(--err-bg);border-color:#f6c9c4;color:var(--err)}
.alert-info{background:var(--info-bg);border-color:#c7dbfb;color:var(--info)}
.alert-warn{background:var(--warn-bg);border-color:#f0dfbc;color:var(--warn)}

/* --------------------------------------------------------- breadcrumbs --- */
.breadcrumbs{padding-block:.75rem;font-size:var(--fs-sm)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:center;gap:.3rem;color:var(--muted);margin:0}
.breadcrumbs li+li::before{content:"›";color:var(--faint)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--teal-700)}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:700}

/* --------------------------------------------------------- pagination --- */
.pagination{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:var(--sp-6);list-style:none;padding:0}
.pagination a,.pagination span{
  display:grid;place-items:center;min-width:40px;height:40px;padding-inline:.6rem;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  font-weight:700;font-size:var(--fs-sm);color:var(--ink-2)
}
.pagination a:hover{border-color:var(--teal-500);color:var(--teal-700);text-decoration:none}
.pagination .is-current{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.pagination .is-gap{border:0;background:none}

/* ------------------------------------------------------- testimonials --- */
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
.tcard .stars{display:flex;gap:.1rem;margin-bottom:.6rem}
.tcard .stars svg{width:15px;height:15px;color:var(--amber-500)}
.tcard blockquote{margin:0 0 var(--sp-4);font-size:var(--fs-md);color:var(--ink-2);line-height:1.6}
.tcard .who{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm)}
.tcard .avatar{width:36px;height:36px;border-radius:50%;background:var(--navy-800);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.tcard .who strong{display:block;color:var(--ink)}
.tcard .who span{color:var(--faint)}

/* ------------------------------------------------------------ articles -- */
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.acard:hover{box-shadow:var(--sh-3);transform:translateY(-2px)}
.acard__media{aspect-ratio:16/9;background:var(--line-2)}
.acard__media img{width:100%;height:100%;object-fit:cover}
.acard__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:.5rem;flex:1}
.acard__cat{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--teal-600)}
.acard h3{font-size:1rem;margin:0;line-height:1.35}
.acard h3 a{color:var(--ink)}
.acard p{font-size:var(--fs-sm);color:var(--muted);margin:0}
.acard__meta{margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line-2);font-size:var(--fs-xs);color:var(--faint);display:flex;gap:.5rem;flex-wrap:wrap}
.byline{display:flex;align-items:center;gap:.65rem;padding:var(--sp-4);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--sp-5)}
.byline .avatar{width:44px;height:44px;border-radius:50%;background:var(--navy-800);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.byline .n{font-weight:800;display:block}
.byline .m{font-size:var(--fs-sm);color:var(--muted);display:block;line-height:1.45}

/* ------------------------------------------------------- sticky mobile -- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--surface);border-top:1px solid var(--line);
  padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  gap:.4rem;box-shadow:0 -4px 18px rgba(11,37,69,.10)
}
.sticky-cta .btn{flex:1;padding:.62rem .5rem;font-size:.8125rem}
@media (max-width:820px){.sticky-cta{display:flex}body.has-sticky{padding-bottom:70px}}

.wa-float{
  position:fixed;right:16px;bottom:18px;z-index:65;width:54px;height:54px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;box-shadow:var(--sh-3)
}
.wa-float svg{width:28px;height:28px;color:#fff}
@media (max-width:820px){.wa-float{display:none}}

/* -------------------------------------------------------------- footer --- */
.site-footer{background:var(--navy-900);color:#a9bdd2;padding-block:var(--sp-7) var(--sp-5);margin-top:var(--sp-8)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-5)}
.footer-grid>*{min-width:0}
.footer-contact a{overflow-wrap:anywhere}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer h3{color:#fff;font-size:.8125rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.85rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.45rem}
.site-footer a{color:#a9bdd2;font-size:var(--fs-base)}
.site-footer a:hover{color:#fff}
.footer-brand p{color:#8fa6bd;max-width:38ch;font-size:var(--fs-base)}
.footer-contact{display:grid;gap:.5rem;margin-top:var(--sp-4)}
.footer-contact a{display:flex;align-items:center;gap:.5rem;color:#dbe7f2;font-weight:600}
.footer-contact svg{width:16px;height:16px;color:var(--teal-500);flex:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,.10);margin-top:var(--sp-6);padding-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;font-size:var(--fs-sm);color:#7f97af}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:var(--sp-4)}

/* ------------------------------------------------------------- compare -- */
.compare-bar{position:fixed;left:0;right:0;bottom:0;z-index:75;background:var(--navy-800);color:#fff;padding:.7rem 1rem;display:none;align-items:center;gap:.75rem}
.compare-bar[data-show="1"]{display:flex}
.compare-bar .items{display:flex;gap:.4rem;flex:1;overflow-x:auto}
.compare-bar .items span{background:rgba(255,255,255,.12);border-radius:var(--r-sm);padding:.25rem .55rem;font-size:var(--fs-xs);font-weight:700;white-space:nowrap}

/* ----------------------------------------------------------- utilities -- */
.u-center{text-align:center}
.u-muted{color:var(--muted)}
.u-faint{color:var(--faint)}
.u-small{font-size:var(--fs-sm)}
.u-xs{font-size:var(--fs-xs)}
.u-bold{font-weight:800}
.u-mt0{margin-top:0}.u-mb0{margin-bottom:0}
.u-mt2{margin-top:var(--sp-2)}.u-mt3{margin-top:var(--sp-3)}.u-mt4{margin-top:var(--sp-4)}.u-mt5{margin-top:var(--sp-5)}.u-mt6{margin-top:var(--sp-6)}
.u-mb3{margin-bottom:var(--sp-3)}.u-mb4{margin-bottom:var(--sp-4)}.u-mb5{margin-bottom:var(--sp-5)}.u-mb6{margin-bottom:var(--sp-6)}
.u-hide{display:none}
.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:0;top:-64px;background:var(--navy-800);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 var(--r-sm) 0;transition:top .12s}
.skip-link:focus{top:0}
.updated-note{font-size:var(--fs-xs);color:var(--faint);display:flex;align-items:center;gap:.35rem}
.updated-note svg{width:13px;height:13px}
@media print{.site-header,.site-footer,.sticky-cta,.wa-float,.compare-bar{display:none!important}}

/* ── locality cards ─────────────────────────────────────────────────────
   Cards in a grid, not rows in a list. Explicit column counts rather than
   auto-fill, because the brief is a specific shape: four across on a desktop,
   three on a narrow desktop, two on a tablet, one on a phone. `minmax(0,1fr)`
   everywhere so a long area name can never push a column wider than its share
   and start a horizontal scroll. */
.area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}
.area-grid>*{min-width:0}
@media (max-width:1199px){.area-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:899px) {.area-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}}
@media (max-width:599px) {.area-grid{grid-template-columns:minmax(0,1fr)}}

.acard-loc{
  display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:.9rem .95rem .75rem;text-decoration:none;color:inherit;min-width:0;height:100%;
  transition:border-color .16s,box-shadow .16s,transform .16s
}
.acard-loc:hover{text-decoration:none;border-color:#cfdce9;box-shadow:var(--sh-2);transform:translateY(-1px)}

/* the decorative mark. Bounded here and again by an explicit size on the SVG
   itself, so it cannot grow into the card whatever else changes. */
.acard-loc__mark{
  flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;
  background:var(--surface-2);display:block;position:relative
}
.acard-loc__mark svg,.acard-loc__mark img{width:100%;height:100%;display:block;object-fit:cover}
.acard-loc__mark--plain{display:grid;place-items:center;color:var(--teal-600)}
.acard-loc__mark--plain svg{width:22px;height:22px;object-fit:contain}

.acard-loc__name{
  font-weight:700;font-size:.9375rem;line-height:1.3;color:var(--ink);
  overflow-wrap:anywhere;hyphens:auto
}
.acard-loc:hover .acard-loc__name{color:var(--teal-700)}
.acard-loc__meta{
  display:flex;flex-wrap:wrap;gap:.15rem .45rem;font-size:.6875rem;color:var(--faint);
  min-width:0;overflow-wrap:anywhere
}
.acard-loc__zone{color:var(--teal-600);font-weight:700}

.acard-loc__foot{
  margin-top:auto;padding-top:.6rem;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  border-top:1px solid var(--line)
}
.acard-loc__count{font-size:.75rem;font-weight:700;color:var(--navy-800);min-width:0;overflow-wrap:anywhere}
.acard-loc__count.is-empty{font-weight:600;color:var(--faint)}
.acard-loc__go{
  flex:none;display:inline-flex;align-items:center;gap:.2rem;
  font-size:.6875rem;font-weight:700;color:var(--teal-700);letter-spacing:.01em
}
.acard-loc__go svg{width:13px;height:13px;flex:none;transition:transform .16s}
.acard-loc:hover .acard-loc__go svg{transform:translateX(2px)}

@media (max-width:599px){
  .acard-loc{padding:.75rem .8rem .65rem}
  .acard-loc__mark{width:40px;height:40px;border-radius:10px}
}

/* ── /areas/ hub ────────────────────────────────────────────────────────── */
.areas-search{position:relative;max-width:520px}
.areas-search input{padding-left:2.4rem}
.areas-search svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--faint)}
.areas-count{font-size:var(--fs-sm);color:var(--muted);margin-top:.5rem}
.alpha-index{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;padding:0;margin:0}
.alpha-index a{display:grid;place-items:center;min-width:32px;height:32px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);font-weight:800;font-size:.8125rem;color:var(--ink-2)}
.alpha-index a:hover{border-color:var(--teal-500);color:var(--teal-700);text-decoration:none}
.zone-block{margin-bottom:var(--sp-6);scroll-margin-top:calc(var(--hdr-h) + 20px)}
.zone-block__head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.75rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.zone-block__head h2{margin:0;font-size:1.125rem}
.zone-block__head p{margin:0;font-size:var(--fs-sm);color:var(--muted);flex:1 1 260px}
.zone-block__head .n{font-size:var(--fs-xs);font-weight:800;color:var(--faint)}
.loc-list{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:.1rem .9rem}
.loc-list li{margin:0;min-width:0}
.loc-list a{display:flex;align-items:baseline;gap:.4rem;padding:.3rem 0;font-size:var(--fs-base);color:var(--ink-2)}
.loc-list a:hover{color:var(--teal-700);text-decoration:none}
.loc-list .n{font-size:var(--fs-xs);color:var(--faint);font-weight:700}
.loc-list .sub{padding-left:.9rem;font-size:var(--fs-sm);color:var(--muted)}
.areas-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:var(--sp-5);overflow-x:auto}
.areas-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:.6rem .9rem;
  font-weight:700;font-size:var(--fs-base);color:var(--muted);cursor:pointer;white-space:nowrap}
.areas-tabs button[aria-selected="true"]{color:var(--teal-700);border-bottom-color:var(--teal-600)}
[data-areas-panel][hidden]{display:none}
.areas-noresult{padding:var(--sp-5);text-align:center;color:var(--muted)}

/* locality autocomplete */
.ac-wrap{position:relative}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);max-height:320px;overflow-y:auto;
  list-style:none;margin:0;padding:.25rem;display:none}
.ac-list[data-open="1"]{display:block}
.ac-list li{margin:0}
.ac-list button{display:flex;width:100%;gap:.55rem;align-items:center;text-align:left;background:none;border:0;
  padding:.5rem .6rem;border-radius:var(--r-sm);cursor:pointer;font:inherit;color:var(--ink)}
.ac-list button:hover,.ac-list button[aria-selected="true"]{background:var(--teal-50)}
.ac-list .nm{font-weight:700;font-size:.875rem}
.ac-list .zn{font-size:.6875rem;color:var(--faint);margin-left:auto;white-space:nowrap}
.ac-list .pa{font-size:.6875rem;color:var(--muted)}
.ac-list svg{width:15px;height:15px;color:var(--faint);flex:none}

/* Compact multi-column list for long locality runs. Columns rather than a grid
   so a long name flows instead of stretching its row. */
.cols-list{list-style:none;margin:.4rem 0 0;padding:0;columns:220px 4;column-gap:1.4rem}
.cols-list li{break-inside:avoid;padding:.2rem 0;font-size:.9375rem}
.cols-list a{text-decoration:none}
.cols-list a:hover{text-decoration:underline}
@media (max-width:600px){.cols-list{columns:1}}

/* Zone comparison table on /areas/. Scrolls in its own box so the page body
   never scrolls sideways on a phone. */
.zone-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.6rem 0 0}
.zone-table{border-collapse:collapse;width:100%;min-width:660px;font-size:.9375rem}
.zone-table th,.zone-table td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line-2)}
.zone-table thead th{background:var(--bg-2);font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-2);white-space:nowrap}
.zone-table td.num,.zone-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.zone-table tbody tr:hover{background:var(--bg-2)}
.zone-table a{text-decoration:none;font-weight:600}

/* Primary-source citation shown beside the claim it supports. */
.cite{font-size:.875rem;color:var(--ink-2);border-left:3px solid var(--teal-700);background:var(--bg-2);
  padding:.55rem .8rem;border-radius:0 6px 6px 0;margin:.7rem 0}
.cite strong{color:var(--ink)}
.cite a{word-break:break-word}
.answer-first{font-size:1.0625rem;line-height:1.65}
.answer-first strong{font-weight:700}

/* Verification checklist on category pages. Two columns where there is room,
   so a five-item list does not read as a long scroll on desktop. */
.check-list{list-style:none;margin:.4rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.5rem 1.6rem}
.check-list li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9375rem;line-height:1.5}
.check-list li svg{flex:none;margin-top:.2rem;color:var(--teal-700)}