/* =============================================================================
   ZANY DESIGN SYSTEM v2.0
   White first  ·  Navy for structure  ·  Blue for action  ·  Light blue for support
   Single stylesheet for the whole product. Sections are ordered:
   01 Tokens · 02 Reset · 03 Typography · 04 Layout · 05 Icons · 06 Buttons
   07 Forms · 08 Header/Nav · 09 Hero · 10 Search · 11 Filters · 12 Chips
   13 Toolbar · 14 Property card · 15 Result card · 16 Gallery · 17 Badges
   18 Agents/Promo · 19 Pagination · 20 Panels · 21 Stats · 22 Steps
   23 Calendar · 24 Checklist/Progress · 25 Lists/Tables · 26 Overlays
   27 States · 28 Map · 29 Footer · 30 Utilities · 31 Responsive
   ============================================================================= */

/* ============================== 01 · TOKENS ============================== */
:root{
  /* Brand */
 --blue:#005BF7;
 --blue-700:#0046C0;
 --blue-600:#0050DC;
 --blue-100:#D6E6FF;
 --blue-50:#EAF3FF;
 --light-blue:#95C0FE;
 --navy:#001D54;
 --navy-800:#082A63;

  /* Neutrals */
 --g900:#172033;
 --g700:#39465C;
 --g600:#59677D;
  /* Design System v1 specifies Gray 500 as #718096. That measures 4.01:1 on white and
     this scale carries 12-14px secondary text everywhere, so it fails WCAG AA. Nudged to
     the nearest value that passes: 4.85:1. Visually indistinguishable, legally different. */
 --g500:#65728A;
 --g400:#94A3B8;
 --g300:#CBD5E1;
 --g200:#E2E8F0;
 --g100:#F1F5F9;
 --g50:#F8FAFC;
 --white:#FFFFFF;

  /* Functional - deliberately outside the brand palette, like BER colours.
     These carry meaning, not branding. */
  /* Green measured 3.66:1 on its own tint - too low for a 12px badge. 4.79:1 now. */
 --ok:#0A7A4F;
 --ok-bg:#E4F6EF;
 --warn:#9A5B00;
 --warn-bg:#FDF2DC;
 --danger:#C8271F;
 --danger-bg:#FDECEB;

  /* Typography */
 --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
 --fs-display:clamp(38px,5.2vw,64px);
 --fs-h1:clamp(30px,4vw,48px);
 --fs-h2:clamp(23px,2.6vw,32px);
 --fs-h3:22px;
 --fs-h4:18px;
 --fs-lg:18px;
 --fs-base:16px;
 --fs-sm:14px;
 --fs-xs:13px;
 --fs-cap:12px;

  /* Spacing - 8px base */
 --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
 --s6:32px; --s7:40px; --s8:48px; --s9:64px; --s10:80px;
 --s11:96px; --s12:120px;

  /* Radius */
 --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-pill:999px;

  /* Shadow */
 --sh1:0 2px 8px rgba(0,29,84,.05);
 --sh2:0 8px 24px rgba(0,29,84,.08);
 --sh3:0 16px 40px rgba(0,29,84,.12);
 --sh-card:0 1px 2px rgba(0,29,84,.06),0 6px 18px rgba(0,29,84,.07);
 --ring:0 0 0 3px var(--blue-50);

  /* Surfaces (owner decision, 30 September): the whole site sits on one canvas so white cards
     stand apart; alternate bands are a step deeper. The overview figures in the account
     workspace take one light tint each. Owner trial, same day: neutral #FCFCFC instead of
     the light blue #F5F8FD (with #EBF1FA bands). */
 --canvas:#FCFCFC;
 --canvas-deep:#F3F4F6;
 --tint-blue:#EEF4FF;
 --tint-violet:#F3F0FF;
 --tint-green:#EAF7F1;
 --tint-amber:#FFF5E3;
 --violet:#5B3FD6;
 --featured-gold:#8B5A08;
 --featured-gold-soft:#FFF8E8;

  /* Layout */
 --maxw:1180px;
 --gutter:24px;
 --header-h:72px;
 --t:160ms cubic-bezier(.2,.6,.3,1);
}

/* =============================== 02 · RESET ============================== */
*,*::before,*::after{box-sizing:border-box}
/* `clip` rather than `hidden`: it stops the off-canvas drawer from widening the page
   without creating a scroll container, so the sticky header keeps working. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.55;
  color:var(--g700);
  /* Site-wide canvas (owner decision, 30 September): a light blue page, so white cards,
     panels and forms stand apart everywhere instead of white on white. See "Surfaces". */
  background:var(--canvas);
 -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
/* Browsers give fieldsets a border and legends odd padding. We group with them for
   semantics, never for decoration. */
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;display:block;width:100%}
table{border-collapse:collapse;width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--blue-100);color:var(--navy)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================ 03 · TYPOGRAPHY ============================ */
.display,.h1,.h2,.h3,.h4{color:var(--navy);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.display{font-size:var(--fs-display);line-height:1.05;letter-spacing:-.03em}
.h1{font-size:var(--fs-h1);line-height:1.1;letter-spacing:-.025em}
.h2{font-size:var(--fs-h2);line-height:1.2}
.h3{font-size:var(--fs-h3);font-weight:600;line-height:1.3}
.h4{font-size:var(--fs-h4);font-weight:600;line-height:1.35}
.lead{font-size:var(--fs-lg);color:var(--g600);line-height:1.55}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.cap{font-size:var(--fs-cap);font-weight:500;letter-spacing:.01em}
.muted{color:var(--g500)}
.strong{color:var(--navy);font-weight:600}
.accent{color:var(--blue)}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--blue-50);border:1px solid var(--blue-100);color:var(--blue);
  border-radius:var(--r-pill);padding:6px 14px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.01em;
}
.overline{font-size:var(--fs-cap);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g500)}
em.hl{font-style:normal;color:var(--blue)}

/* ============================== 04 · LAYOUT ============================= */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s9)}
.section--tight{padding-block:var(--s7)}
.section--flush{padding-top:0}
.section--alt{background:var(--canvas-deep)}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s4);margin-bottom:var(--s6);
}
.section-head p{margin-top:var(--s1);color:var(--g500);font-size:var(--fs-sm)}
.section-head .h2{margin:0}
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.row{display:flex;align-items:center;gap:var(--s3)}
.row--between{justify-content:space-between}
.row--wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.stack--lg{gap:var(--s5)}
.divider{height:1px;background:var(--g200);border:0;margin-block:var(--s5)}
.layout-search{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:var(--s6);align-items:start}
.layout-side{display:grid;grid-template-columns:264px minmax(0,1fr);gap:var(--s6);align-items:start}
.sticky{position:sticky;top:var(--s5)}

/* ============================== 05 · ICONS ============================= */
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic--sm{width:16px;height:16px;stroke-width:2}
.ic--lg{width:24px;height:24px;stroke-width:1.6}
.ic--xl{width:32px;height:32px;stroke-width:1.4}
.ic-blue{color:var(--blue)}
#zany-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ============================= 06 · BUTTONS ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:44px;padding:0 20px;border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:600;white-space:nowrap;
  border:1px solid transparent;color:var(--navy);
  transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t),transform var(--t);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;pointer-events:none}

.btn-primary{background:var(--blue);color:var(--white);border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-600);border-color:var(--blue-600)}
.btn-primary:focus-visible{box-shadow:var(--ring)}

.btn-secondary{background:var(--white);border-color:var(--g200);color:var(--navy)}
.btn-secondary:hover{border-color:var(--g300);background:var(--g50)}

.btn-navy{background:var(--navy);border-color:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--navy-800);border-color:var(--navy-800)}

.btn-ghost{background:transparent;color:var(--blue);padding-inline:8px;height:auto}
.btn-ghost:hover{color:var(--blue-700);text-decoration:underline;text-underline-offset:3px}
/* Bare .btn-ghost is an inline text link ("Clear all"). Combined with .btn it is a real
   control - a back link, a nav action - so it keeps a 44px touch target. */
.btn.btn-ghost{min-height:44px;padding-inline:12px}

.btn-soft{background:var(--blue-50);color:var(--blue);border-color:transparent}
.btn-soft:hover{background:var(--blue-100)}

.btn-danger{background:var(--white);border-color:var(--g200);color:var(--danger)}
.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger-bg)}

.btn-sm{height:36px;padding:0 14px;font-size:var(--fs-xs)}
.btn-lg{height:52px;padding:0 28px;font-size:var(--fs-base)}
.btn-block{width:100%}
.btn-icon{width:44px;padding:0}
.btn-icon.btn-sm{width:36px}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-md);color:var(--g600);
  transition:background var(--t),color var(--t);
}
.icon-btn:hover{background:var(--g100);color:var(--navy)}
.icon-btn[aria-pressed=true]{color:var(--blue)}
.icon-btn[aria-pressed=true] .ic{fill:var(--blue)}

/* ============================== 07 · FORMS ============================= */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:var(--fs-xs);font-weight:600;color:var(--navy)}
.label .req{color:var(--danger)}
.hint{font-size:var(--fs-cap);color:var(--g500)}
.err-text{font-size:var(--fs-cap);color:var(--danger);display:flex;align-items:center;gap:6px}

.input,.select,.textarea{
  width:100%;height:44px;padding:0 14px;
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-md);
  color:var(--navy);font-size:var(--fs-sm);
  transition:border-color var(--t),box-shadow var(--t);
}
.textarea{height:auto;min-height:120px;padding:12px 14px;line-height:1.55;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--g500)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--g300)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue);box-shadow:var(--ring)}
.input[aria-invalid=true],.select[aria-invalid=true],.textarea[aria-invalid=true]{border-color:var(--danger)}
.input:disabled,.select:disabled{background:var(--g50);color:var(--g400);cursor:not-allowed}

.select{
  appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359677D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}

.input-icon{position:relative}
.input-icon .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--g500);pointer-events:none}
.input-icon .input{padding-left:42px}

/* Choice controls - real inputs, custom box */
.choice{display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 0;font-size:var(--fs-sm);color:var(--g700)}
.choice input{
  appearance:none;width:18px;height:18px;flex:none;margin:0;
  border:1.5px solid var(--g300);background:var(--white);
  border-radius:var(--r-xs);transition:all var(--t);
}
.choice input[type=radio]{border-radius:50%}
.choice:hover input{border-color:var(--blue)}
.choice input:checked{background:var(--blue);border-color:var(--blue)}
.choice input[type=checkbox]:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.choice input[type=radio]:checked{box-shadow:inset 0 0 0 3.5px var(--white)}
.choice input:focus-visible{box-shadow:var(--ring)}
/* Icon and title on one line (listing wizard, Kind of listing). */
.choice-title{display:flex;align-items:center;gap:8px}
.choice input:checked+span{color:var(--navy);font-weight:500}

.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.switch input{appearance:none;width:40px;height:24px;margin:0;border-radius:var(--r-pill);background:var(--g300);position:relative;transition:background var(--t)}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--white);transition:transform var(--t);box-shadow:var(--sh1)}
.switch input:checked{background:var(--blue)}
.switch input:checked::after{transform:translateX(16px)}

.segmented{display:inline-flex;background:var(--g100);border-radius:var(--r-md);padding:3px;gap:2px}
.segmented button{
  height:34px;padding:0 14px;border-radius:var(--r-sm);
  font-size:var(--fs-xs);font-weight:600;color:var(--g600);
  display:inline-flex;align-items:center;gap:6px;transition:all var(--t);
}
.segmented button[aria-pressed=true]{background:var(--white);color:var(--navy);box-shadow:var(--sh1)}

.filezone{
  border:1.5px dashed var(--g300);border-radius:var(--r-lg);background:var(--g50);
  padding:var(--s6);text-align:center;color:var(--g600);cursor:pointer;transition:all var(--t);
}
.filezone:hover{border-color:var(--blue);background:var(--blue-50)}
/* Stacked icon, title and limits; a label for the hidden file input in the listing wizard. */
.filezone{display:flex;flex-direction:column;align-items:center;gap:6px}
.filezone.is-over{border-color:var(--blue);background:var(--blue-50)}
input:focus-visible + .filezone{outline:2px solid var(--blue);outline-offset:2px}
.wizard-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s3)}
.wizard-photos:empty{display:none}
.wizard-photo{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--g100);border:1px solid var(--g200)}
.wizard-photo img{width:100%;height:100%;object-fit:cover;display:block}
.wizard-photo-cover{position:absolute;left:6px;bottom:6px;padding:2px 8px;border-radius:var(--r-pill);background:var(--navy);color:var(--white);font-size:var(--fs-cap);font-weight:600}
.wizard-photo-btn{position:absolute;border:0;cursor:pointer;background:rgba(255,255,255,.94);color:var(--navy);box-shadow:var(--sh1)}
.wizard-photo-btn--remove{top:6px;right:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.wizard-photo-btn--cover{left:6px;bottom:6px;padding:3px 8px;border-radius:var(--r-pill);font-size:var(--fs-cap);font-weight:600}
.wizard-photo-btn:hover{background:var(--white);color:var(--blue)}

/* ========================= 08 · HEADER / NAV ========================== */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--g200);
}
.site-header .wrap{
  height:var(--header-h);display:flex;align-items:center;gap:var(--s6);
}
.brand{display:flex;align-items:center;flex:none}
.brand img{width:104px;height:auto}
.mainnav{display:flex;align-items:center;gap:var(--s5);flex:1;font-size:var(--fs-sm);font-weight:500}
/* Full-height links so the active underline can sit exactly on the header's bottom border,
   rather than at a magic offset that drifts with the font metrics.

   Scoped with > to the bar itself. The dropdown panels live inside .mainnav too, and
   without this every menu row inherits the header's 72px height. */
.mainnav > a,
.mainnav > .navitem > a,
.mainnav > .navitem > button{
  display:flex;align-items:center;height:var(--header-h);
  color:var(--g600);position:relative;transition:color var(--t);
}
.mainnav > a:hover,
.mainnav > .navitem > a:hover,
.mainnav > .navitem > button:hover{color:var(--navy)}
.mainnav a[aria-current=page]{color:var(--blue);font-weight:600}
.mainnav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue)}
.header-actions{display:flex;align-items:center;gap:var(--s2);flex:none}
/* Page reveal. Until zany-boot.js adds .zany-ready (shared header drawn, page's first state
   rendered), pages built on the shared shell paint nothing, so the browser keeps the previous
   page on screen instead of flashing the raw HTML. If a script fails, the page appears anyway
   after 1.5 s. Pages without the shell (mvp.html) are not affected. */
html:not(.zany-ready) body:has(> [data-site-header], > .site-header) > *{visibility:hidden;animation:zany-reveal 0s linear 1.5s forwards}
@keyframes zany-reveal{to{visibility:visible}}
/* Held back until the session is known (zany-shell.js), so "Sign in" never flashes first. */
.header-actions [data-auth-pending]{visibility:hidden}
.burger{display:none;margin-left:auto}

.drawer{
  position:fixed;inset:0;z-index:60;background:var(--white);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--t);visibility:hidden;
}
.drawer[data-open=true]{transform:none;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding-inline:var(--gutter);border-bottom:1px solid var(--g200)}
.drawer-body{padding:var(--s5) var(--gutter);overflow-y:auto;flex:1}
.drawer-body a{display:block;padding:14px 0;font-size:var(--fs-lg);font-weight:600;color:var(--navy);border-bottom:1px solid var(--g100)}
.drawer-foot{padding:var(--s5) var(--gutter);border-top:1px solid var(--g200);display:grid;gap:var(--s2)}

/* Mobile bottom tab bar - mirrors the native app navigation */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--white);border-top:1px solid var(--g200);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar ul{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 0 7px;font-size:11px;font-weight:500;color:var(--g500);
}
.tabbar a[aria-current=page]{color:var(--blue)}
.tabbar .dot{position:absolute;top:6px;margin-left:16px;width:7px;height:7px;border-radius:50%;background:var(--blue)}

/* =============================== 09 · HERO ============================= */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--white) 0%,var(--blue-50) 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:center;padding-block:var(--s10)}
.hero-copy{max-width:540px}
.hero-copy .display{margin:var(--s4) 0 var(--s4)}
.hero-copy .lead{max-width:460px}
.hero-cta{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}
.hero-proof{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s6)}
.hero-proof li{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--g600)}
.hero-proof .ic{color:var(--blue)}
.hero-media{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh3)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-float{
  position:absolute;background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--sh2);padding:var(--s3) var(--s4);display:flex;align-items:center;gap:10px;
  font-size:var(--fs-xs);font-weight:600;color:var(--navy);
}
.hero-float--tl{top:var(--s4);left:calc(var(--s4) * -1)}
.hero-float--br{bottom:var(--s5);right:calc(var(--s4) * -1)}

/* ============================== 10 · SEARCH ============================ */
.searchbar{
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);
  box-shadow:var(--sh2);padding:var(--s4);
}
.searchbar--flat{box-shadow:none}
.search-tabs{display:flex;gap:var(--s5);border-bottom:1px solid var(--g200);margin:0 calc(var(--s4) * -1) var(--s4);padding:0 var(--s4)}
.search-tabs button{
  padding:0 2px 12px;font-size:var(--fs-sm);font-weight:500;color:var(--g600);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--t);
}
.search-tabs button:hover{color:var(--navy)}
.search-tabs button[aria-selected=true]{color:var(--blue);font-weight:600;border-bottom-color:var(--blue)}
.search-fields{display:grid;grid-template-columns:1.6fr 1fr 1.15fr .85fr auto auto;gap:var(--s2);align-items:end}
.search-fields .field{gap:5px}
.search-fields .label{font-size:var(--fs-cap);color:var(--g600);font-weight:500}
.search-fields .btn{height:44px}
.filter-toggle{position:relative}
/* Price range: a select-like button that opens a two-handle slider (owner request, 1 October). */
.price-field{position:relative}
.price-btn{width:100%;height:44px;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:min(340px,calc(100vw - 32px));padding:var(--s4);background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);box-shadow:var(--sh2)}
.price-pop-value{margin:0 0 var(--s3);font-weight:600;color:var(--navy);font-size:var(--fs-sm)}
.dual-range{position:relative;height:28px}
.dual-range::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--g200)}
.dual-range-fill{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--blue)}
.dual-range input[type=range]{position:absolute;left:0;top:0;width:100%;height:28px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dual-range input[type=range]::-webkit-slider-runnable-track{background:none;border:0}
.dual-range input[type=range]::-moz-range-track{background:none;border:0}
.dual-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:var(--white);border:2px solid var(--blue);box-shadow:var(--sh1);cursor:pointer}
.dual-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--white);border:2px solid var(--blue);box-shadow:var(--sh1);cursor:pointer}
.dual-range input[type=range]:focus-visible{outline:none}
.dual-range input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--blue-100)}
.dual-range input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--blue-100)}
.price-pop-scale{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--fs-cap);color:var(--g500)}
.price-pop-actions{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s3)}
.filter-toggle .count{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--blue);color:var(--white);font-size:11px;font-weight:700;
  /* A corner badge, so the button keeps its width and the bar does not shift when a filter
     is applied (the price slider stays under the pointer). */
  position:absolute;top:-8px;right:-8px;box-shadow:0 0 0 2px var(--white);
}

/* ========================== 11 · FILTER PANEL ========================= */
.filterpanel{
  position:relative;
  border:1px solid var(--g200);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--white);margin-top:-1px;overflow:hidden;
}
.filterpanel-extra{padding:0 var(--s5) var(--s4)}
.filterpanel[hidden]{display:none!important}
.filterpanel-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0;padding:var(--s5) var(--s4) var(--s4);
}
.filtercol{padding-inline:var(--s4);border-right:1px solid var(--g100);min-width:0}
.filtercol:first-child{padding-left:0}
.filtercol:last-child{border-right:0;padding-right:0}
.filtercol legend{font-size:var(--fs-xs);font-weight:600;color:var(--navy);margin-bottom:10px}
.filtercol .choice{font-size:var(--fs-xs)}
.filtercol .btn-ghost{font-size:var(--fs-cap);padding:6px 0;margin-top:4px}
/* More filters (owner request, 2 October): bedroom and bathroom sliders, and the size menu. */
.filtercol-label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--navy);margin-bottom:10px}
.filtercol .select{width:100%;min-width:0;font-size:var(--fs-xs);padding-left:10px;padding-right:28px;background-position:right 8px center;background-size:14px}
.count-range-value{margin:0 0 var(--s2);font-size:var(--fs-xs);font-weight:600;color:var(--navy)}
.count-range .dual-range{margin-inline:2px}
.count-range-scale{display:flex;justify-content:space-between;margin-top:4px;font-size:var(--fs-cap);color:var(--g500)}
.filterpanel-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4);border-top:1px solid var(--g200);background:var(--g50);
}
.filterpanel-close{position:absolute;top:var(--s3);right:var(--s3)}

/* =============================== 12 · CHIPS =========================== */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.chip{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 8px 0 12px;
  background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-md);
  color:var(--blue);font-size:var(--fs-xs);font-weight:600;
}
.chip button{display:inline-flex;color:var(--blue);opacity:.65;padding:3px;border-radius:var(--r-xs)}
.chip button:hover{opacity:1;background:var(--blue-100)}
.chip--plain{background:var(--g100);border-color:var(--g200);color:var(--g700)}
.chip--plain button{color:var(--g600)}
.feature-chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  background:var(--g100);border-radius:var(--r-md);
  font-size:var(--fs-xs);font-weight:500;color:var(--g700);
}

/* ============================= 13 · TOOLBAR =========================== */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.toolbar .result-count{font-size:var(--fs-lg);font-weight:700;color:var(--navy)}
.toolbar-right{display:flex;align-items:center;gap:var(--s3)}
.toolbar-right .select{height:38px;font-size:var(--fs-xs);width:auto;min-width:160px}
.sort-label{font-size:var(--fs-xs);color:var(--g500);white-space:nowrap}

/* ========================== 14 · PROPERTY CARD ======================== */
.card{
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh1);display:flex;flex-direction:column;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--g300)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--g100)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 300ms ease}
.card:hover .card-media img{transform:scale(1.02)}
.card-body{padding:var(--s4);display:flex;flex-direction:column;gap:6px;flex:1}
.card-price{font-size:var(--fs-h4);font-weight:700;color:var(--navy);letter-spacing:-.01em}
.card-price-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-width:0}
.card-price-row .ber{flex:none}
.card-price span{font-size:var(--fs-xs);font-weight:500;color:var(--g500)}
.card-title{font-size:var(--fs-sm);font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-addr{font-size:var(--fs-xs);color:var(--g500);display:flex;align-items:center;gap:5px;min-width:0}
.card-addr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-facts{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:var(--fs-xs);color:var(--g600);margin-top:2px}
.card-facts li{display:flex;align-items:center;gap:5px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:auto;padding-top:var(--s3)}

.card-save{
  position:absolute;top:10px;right:10px;z-index:2;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;color:var(--g600);
  box-shadow:var(--sh1);transition:all var(--t);
}
.card-save:hover{background:var(--white);color:var(--navy)}
.card-save[aria-pressed=true]{color:var(--blue)}
.card-save[aria-pressed=true] .ic{fill:var(--blue)}
.media-count{
  position:absolute;bottom:10px;left:10px;z-index:2;
  background:rgba(10,20,40,.66);color:var(--white);
  padding:4px 8px;border-radius:var(--r-sm);font-size:11px;font-weight:600;
  display:flex;align-items:center;gap:5px;
}

/* =========================== 15 · RESULT CARD ========================= */
.result{
  display:grid;grid-template-columns:minmax(0,42%) 96px minmax(0,1fr);
  gap:var(--s2);background:var(--white);border:1px solid var(--g200);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh1);
  transition:box-shadow var(--t),border-color var(--t);
}
.result:hover{box-shadow:var(--sh2);border-color:var(--g300)}
.result + .result{margin-top:var(--s4)}
.result-info{padding:var(--s5) var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
.result-addr{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--navy);min-width:0}
.result-addr .ic{color:var(--g500);margin-top:1px}
.result-price{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.result-price b{font-size:26px;font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.1}
.result-price .per{font-size:var(--fs-sm);font-weight:500;color:var(--g500)}
.result-facts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);font-size:var(--fs-sm);color:var(--g700)}
.result-facts li{display:flex;align-items:center;gap:7px}
.result-facts .ic{color:var(--g500)}
.result-desc{
  font-size:var(--fs-sm);color:var(--g600);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.result-foot{
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  border-top:1px solid var(--g100);padding-top:var(--s3);margin-top:auto;
  font-size:var(--fs-xs);color:var(--g500);
}
.result-foot dt{display:inline;color:var(--g500)}
.result-foot dd{display:inline;margin:0 0 0 5px;color:var(--navy);font-weight:600}
.result--sponsored{border-color:var(--blue-100);background:linear-gradient(var(--blue-50),var(--blue-50)) padding-box}

/* ============================= 16 · GALLERY =========================== */
.gallery{position:relative;background:var(--g100);overflow:hidden}
.gallery-main{position:relative;aspect-ratio:4/3;height:100%;width:100%}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;color:var(--navy);
  box-shadow:var(--sh1);opacity:0;transition:opacity var(--t),background var(--t);
}
.gallery:hover .gallery-nav,.gallery-nav:focus-visible{opacity:1}
.gallery-nav:hover{background:var(--white)}
.gallery-nav--prev{left:10px}
.gallery-nav--next{right:10px}
.gallery-thumbs{display:grid;grid-template-rows:repeat(3,1fr);gap:var(--s2);padding:0}
.gallery-thumb{position:relative;overflow:hidden;background:var(--g100);border:0;padding:0;aspect-ratio:1/1}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;transition:opacity var(--t)}
.gallery-thumb:hover img{opacity:.85}
.gallery-thumb[aria-current=true]{outline:2px solid var(--blue);outline-offset:-2px}
.gallery-more{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(10,20,40,.55);color:var(--white);font-size:var(--fs-sm);font-weight:700;
}
.gallery-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2}
.gallery-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.gallery-dots i[data-on=true]{background:var(--white);width:16px;border-radius:var(--r-pill)}

/* Detail page gallery - one hero frame plus four thumbnails, exactly five tiles. */
.detail-gallery{
  display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:var(--s2);border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/9;
}
.detail-gallery button{position:relative;overflow:hidden;background:var(--g100)}
.detail-gallery button:first-child{grid-row:span 2}
.detail-gallery img{width:100%;height:100%;object-fit:cover;transition:transform 300ms ease}
.detail-gallery button:hover img{transform:scale(1.02)}

/* ============================== 17 · BADGES =========================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:var(--r-sm);
  font-size:var(--fs-cap);font-weight:600;line-height:1.2;white-space:nowrap;
}
.badge--featured{background:var(--blue);color:var(--white)}
.badge--premium{background:var(--navy);color:var(--white)}
/* Details nudge (D30): a red "i" while the account details are incomplete. */
.profile-alert{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--danger);color:var(--white);font:700 11px/1 var(--font);font-style:normal;flex:none}
.header-actions [data-dropdown]{position:relative}
.header-actions [data-dropdown] .profile-alert{position:absolute;top:-4px;right:-4px;box-shadow:0 0 0 2px var(--white)}
.dropdown-menu [data-account-link] .profile-alert,.drawer-foot [data-account-link] .profile-alert{margin-left:auto}
.drawer-foot [data-account-link]{gap:var(--s2)}
.btn-link{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* Notification bell (migration 017). */
.notif-btn{position:relative}
.notif-count{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--blue);color:var(--white);font:700 11px/18px var(--font);text-align:center;box-shadow:0 0 0 2px var(--white)}
.notif-menu{width:min(340px,calc(100vw - 32px));padding:6px;right:0}
.notif-head{margin:0;padding:8px 10px 6px;font-size:var(--fs-xs);font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.06em}
.dropdown-menu .notif-item{display:grid;gap:2px;padding:10px;border-radius:var(--r-sm);color:var(--g700);white-space:normal}
.notif-item.is-unread{background:var(--blue-50)}
.notif-item.is-unread .notif-title{color:var(--navy);font-weight:600}
.notif-title{font-size:var(--fs-sm);line-height:1.4}
.notif-time{font-size:var(--fs-cap);color:var(--g500)}
.notif-empty{margin:0;padding:12px 10px;font-size:var(--fs-sm);color:var(--g500)}
/* Plan and payment on the publication page (D23, migration 016). */
fieldset.pay-box{min-width:0;margin-inline:0}
.pay-box legend{padding:0;float:left;width:100%}
.pay-box legend + *{clear:both}
.pay-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.pay-plan{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s2);row-gap:2px;align-items:center;padding:var(--s3) var(--s4);border:1px solid var(--g200);border-radius:var(--r-md);background:var(--white);cursor:pointer;transition:border-color var(--t),background var(--t)}
.pay-plan input{grid-row:1 / 3;accent-color:var(--blue)}
.pay-plan-name{font-weight:600;color:var(--navy)}
.pay-plan-price{font-size:var(--fs-sm);color:var(--g600)}
.pay-plan:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);background:var(--blue-50)}
.pay-plan:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.pay-terms{align-items:flex-start;font-size:var(--fs-sm);line-height:1.5;color:var(--g700);cursor:pointer}
.pay-terms input{margin-top:3px;flex:none;accent-color:var(--blue)}
@media (max-width:600px){.pay-plans{grid-template-columns:1fr}}
.account-consent{align-items:flex-start;font-size:var(--fs-sm);color:var(--g700);line-height:1.5}
.account-consent input{margin-top:3px;flex:none}
.account-danger{border-color:var(--danger-bg)}

/* Applications (owner request, 1 October): the Apply now window, the landlord's applicants
   board and decision colours. */
.modal.apply-modal{max-width:720px;width:min(100%,720px);max-height:min(90dvh,900px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.app-modal{max-width:560px;width:calc(100% - 32px)}
.apply-modal .modal-head{align-items:flex-start;padding:22px 28px 18px}
.apply-modal .modal-head h2{font-size:clamp(20px,2.4vw,25px);line-height:1.2}
.apply-eyebrow{font-size:var(--fs-cap);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.apply-intro{font-size:var(--fs-sm);color:var(--g600);line-height:1.5;margin-top:6px}
.apply-modal .modal-body{min-height:0;overflow:auto;padding:0 28px}
.apply-section{padding:22px 0 24px;border-bottom:1px solid var(--g200)}
.apply-section:last-child{border-bottom:0}
.apply-section h3{font-size:var(--fs-base);font-weight:700;color:var(--navy);line-height:1.35;margin:0 0 14px}
.apply-section-note{font-size:var(--fs-sm);color:var(--g600);line-height:1.5;margin:-6px 0 16px}
.apply-field-grid,.apply-household-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.apply-field,.apply-account-link{margin-top:16px}
.apply-account-link{font-size:var(--fs-xs)}
.apply-modal .label{display:block;margin-bottom:7px;font-size:var(--fs-sm)}
.apply-modal .hint{line-height:1.45}
.apply-modal .input{width:100%;min-width:0}
.apply-modal textarea.input{min-height:110px;resize:vertical}
.apply-modal input[readonly]{background:var(--g100);color:var(--g600);cursor:default}
.apply-pets{border:0;margin:0;padding:0;min-width:0}
.apply-modal .apply-pets{gap:6px}
.apply-pets legend{padding:0}
.apply-pets .apply-option{margin:0 6px 6px 0}
.apply-option{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--g200);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--navy);cursor:pointer;min-height:40px}
.apply-option:has(input:checked){border-color:var(--blue);background:var(--blue-50)}
.apply-option input{accent-color:var(--blue);margin:0}
.apply-option:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.apply-modal .modal-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 28px}
.apply-modal .modal-foot [data-apply-error]{flex-basis:100%;margin:0}
.apply-footnote{font-size:var(--fs-xs);color:var(--g600)}
.apply-foot-actions{display:flex;justify-content:flex-end;gap:8px;margin-left:auto}
@media(max-width:600px){.modal-backdrop:has(.apply-modal){padding:8px}.modal.apply-modal{max-height:calc(100dvh - 16px)}.apply-modal .modal-head{padding:18px}.apply-modal .modal-body{padding:0 18px}.apply-modal .modal-foot{padding:14px 18px;flex-direction:column;align-items:stretch}.apply-field-grid,.apply-household-grid{grid-template-columns:1fr}.apply-footnote{flex-basis:auto}.apply-foot-actions{width:100%;margin-left:0}.apply-modal .apply-foot-actions .btn{flex:1;width:auto;min-width:0}}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--g200);border-radius:var(--r-md);background:var(--white);margin-top:var(--s2)}
.stepper-btn{width:44px;height:44px;font-size:20px;font-weight:600;color:var(--navy)}
.stepper-btn:hover{background:var(--blue-50);color:var(--blue)}
.stepper-value{min-width:40px;text-align:center;font-weight:700;color:var(--navy)}
.apply-pets{border:0;padding:0;margin-inline:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.apply-pets legend{width:100%;padding:0}
.apply-sent{text-align:center;padding:var(--s4) 0}
.apply-sent .ic{width:40px;height:40px;color:var(--ok);margin:0 auto}
.app-status{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;background:var(--g100);color:var(--g700)}
.app-status--accepted{background:var(--ok-bg);color:var(--ok)}
.app-status--rejected{background:var(--danger-bg);color:var(--danger)}
.app-status--applied{background:var(--warn-bg);color:var(--warn)}
.app-board{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--s5);align-items:start}
.app-properties{display:grid;gap:var(--s2)}
.app-property{display:grid;gap:2px;text-align:left;padding:var(--s3) var(--s4);border:1px solid var(--g200);border-radius:var(--r-md);background:var(--white);color:var(--g700)}
.app-property b{color:var(--navy);font-size:var(--fs-sm)}
.app-property span{font-size:var(--fs-xs);color:var(--g500)}
.app-property:hover{border-color:var(--light-blue)}
.app-property.is-current{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset;background:var(--blue-50)}
.app-applicants{padding:0;overflow:hidden}
.app-applicants-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--g200)}
.app-empty{padding:var(--s5)}
.applicants-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.applicants-table th{text-align:left;font-size:var(--fs-xs);font-weight:600;color:var(--g500);padding:var(--s3) var(--s5);border-bottom:1px solid var(--g200)}
.applicants-table td{padding:var(--s3) var(--s5);border-bottom:1px solid var(--g100);vertical-align:middle;overflow-wrap:anywhere}
.applicants-table tr:last-child td{border-bottom:0}
.app-open-cell{width:56px;text-align:right}
.app-decision{min-width:170px;height:40px;font-weight:600}
.app-decision--applied{border-color:var(--warn);color:var(--warn)}
.app-decision--accepted{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.app-decision--rejected{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.app-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s5);margin:var(--s4) 0 0}
.app-facts dt{font-size:var(--fs-xs);color:var(--g500)}
.app-facts dd{margin:2px 0 0;color:var(--navy);font-weight:600;overflow-wrap:anywhere}
.app-message{white-space:pre-wrap;color:var(--g700);margin-top:var(--s2)}
@media (max-width:900px){
  .app-board{grid-template-columns:1fr}
  .applicants-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .applicants-table tr{display:grid;grid-template-columns:1fr auto;gap:var(--s2);padding:var(--s4);border-bottom:1px solid var(--g200)}
  .applicants-table td{display:block;padding:0;border:0}
  .applicants-table td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-cap);font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.05em}
  .applicants-table td:not(.app-open-cell){grid-column:1}
  .app-open-cell{grid-column:2;grid-row:1/span 4;align-self:center}
}
.badge--verified{background:var(--blue-50);color:var(--blue)}
.badge--new{background:var(--ok-bg);color:var(--ok)}
.badge--sponsored{background:var(--g100);color:var(--g600);font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:10px}
.badge--ghost{background:var(--white);color:var(--navy);box-shadow:var(--sh1)}
.badge--lg{padding:8px 14px;font-size:var(--fs-xs)}
.badge-stack{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}

.verified{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--blue-50);color:var(--blue);
  padding:6px 12px;border-radius:var(--r-md);
  font-size:var(--fs-xs);font-weight:600;
}
.verified .ic{width:15px;height:15px}
.verified--ok{background:var(--ok-bg);color:var(--ok)}

.ber{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-cap);font-weight:600;color:var(--g600)}
.ber b{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:20px;padding:0 6px;border-radius:var(--r-xs);
  color:var(--white);font-size:11px;font-weight:700;letter-spacing:.02em;
}
.ber-a b{background:#00A651}
.ber-b b{background:#57B947}
.ber-c b{background:#A3CE3E;color:#0B2B12}
.ber-d b{background:#FFDD00;color:#3A2E00}
.ber-e b{background:#FDB913;color:#3A2600}
.ber-f b{background:#F37021}
.ber-g b{background:#E02B20}
.ber-x b{background:var(--g300);color:var(--g700)}

.status{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  font-size:var(--fs-cap);font-weight:600;white-space:nowrap;
}
.status--applied{background:var(--g100);color:var(--g700)}
.status--approved{background:var(--blue-50);color:var(--blue)}
.status--viewing{background:var(--warn-bg);color:var(--warn)}
.status--accepted{background:var(--ok-bg);color:var(--ok)}
.status--rejected{background:var(--danger-bg);color:var(--danger)}
.status--draft,.status--paused,.status--withdrawn{background:var(--g100);color:var(--g600)}
.status--live{background:var(--ok-bg);color:var(--ok)}
.status--shortlisted{background:var(--blue-50);color:var(--blue)}

/* ========================= 18 · AGENTS / PROMO ======================== */
.side-card{background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);overflow:hidden}
.side-card h2,.side-card h3{font-size:var(--fs-sm);font-weight:700;color:var(--navy);padding:var(--s4);border-bottom:1px solid var(--g100)}
.agent{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--g100)}
.agent:last-child{border-bottom:0}
.agent-logo{
  width:44px;height:44px;flex:none;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-weight:800;font-size:var(--fs-xs);letter-spacing:-.02em;
}
.agent-info{flex:1;min-width:0}
.agent-info b{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-info a{font-size:var(--fs-cap);color:var(--blue);font-weight:500}
.agent-info a:hover{text-decoration:underline}
.agent-info small{display:block;font-size:var(--fs-cap);color:var(--g500)}

.sponsored-rail{background:var(--g50);padding:var(--s2) var(--s4);border-bottom:1px solid var(--g100);display:flex;align-items:center;gap:8px}

/* Paid agency directory: ten compact rows, then sideways controls for the next ten. */
.sponsor-directory h2{border-bottom:0;padding-bottom:var(--s2);text-transform:uppercase;letter-spacing:.075em;color:var(--g600);font-size:var(--fs-cap)}
.sponsor-directory-row{display:flex;align-items:center;gap:var(--s3);min-height:68px;margin-inline:var(--s4);padding-block:var(--s2);border-bottom:1px solid var(--g200);color:var(--navy)}
.sponsor-directory-row:last-child{border-bottom:0}
.sponsor-directory-row:hover strong,.sponsor-directory-row:focus-visible strong{color:var(--blue)}
.sponsor-directory-row>span:nth-child(2){flex:1;min-width:0}
.sponsor-directory-row strong,.sponsor-directory-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sponsor-directory-row strong{font-size:var(--fs-sm);font-weight:600}
.sponsor-directory-row small{font-size:var(--fs-xs);color:var(--g500);margin-top:var(--s1)}
.sponsor-logo{width:48px;height:48px;border-radius:var(--r-md);flex:none;display:grid;place-items:center;background-color:var(--blue-50);color:var(--blue);font-size:var(--fs-xs);font-weight:800;object-fit:contain}
.sponsor-logo--large{width:88px;height:88px;font-size:var(--fs-h3)}
.sponsor-directory-arrow{font-size:var(--fs-h3);color:var(--g500)}
.sponsor-directory-empty{padding:var(--s3) var(--s4) var(--s5);color:var(--g600);font-size:var(--fs-sm)}
.sponsor-directory-empty a{display:inline-block;margin-top:var(--s2);color:var(--blue)}
.sponsor-directory-controls{display:flex;justify-content:space-between;padding:var(--s3) var(--s4);border-top:1px solid var(--g100)}
.sponsor-directory-controls[hidden]{display:none}
.sponsor-directory-controls button{width:42px;height:42px;border:0;border-radius:var(--r-md);background-color:var(--blue-50);color:var(--blue);font-size:var(--fs-h3);cursor:pointer}
.sponsor-directory-controls button:disabled{opacity:.4;cursor:not-allowed}
.sponsor-directory-controls button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sponsor-signup-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.75fr);gap:var(--s6);align-items:start}
.sponsor-form{padding:var(--s6)}
.sponsor-county-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);max-height:210px;overflow-y:auto;padding:var(--s3);border:1px solid var(--g200);border-radius:var(--r-md)}
.sponsor-choice{font-size:var(--fs-sm);color:var(--navy);white-space:nowrap}
.sponsor-choice input{accent-color:var(--blue)}
.sponsor-billing-panel{max-width:880px;margin-inline:auto;padding:var(--s6);border:1px solid var(--g200);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--sh-card)}
.sponsor-billing-title{margin-top:var(--s2);font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.025em;color:var(--navy);font-weight:700}
.sponsor-billing-intro{max-width:720px;margin-top:var(--s3);font-size:var(--fs-base);line-height:1.55;color:var(--g600)}
.sponsor-billing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5);align-items:stretch}
.sponsor-billing-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--g200);border-radius:var(--r-lg);background:var(--white)}
.sponsor-billing-card--annual{position:relative;overflow:visible;border-color:var(--blue);box-shadow:var(--sh1)}
.sponsor-billing-card__banner{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:var(--s1) var(--s3);border-radius:var(--r-pill);background:var(--blue);color:var(--white);text-align:center;font-weight:700;font-size:var(--fs-xs);white-space:nowrap}
.sponsor-billing-card__body{display:flex;flex:1;flex-direction:column;align-items:center;padding:var(--s5);text-align:center}
.sponsor-billing-card__body h3{font-size:var(--fs-h4);font-weight:700;line-height:1.35;color:var(--navy)}
.sponsor-billing-price{display:flex;flex-direction:column;align-items:center;gap:0;margin:var(--s2) 0 var(--s5);color:var(--g600)}
.sponsor-billing-price strong{font-size:clamp(32px,4vw,40px);line-height:1.1;letter-spacing:-.04em;color:var(--navy)}
.sponsor-billing-price span{font-size:var(--fs-sm)}
.sponsor-billing-card [data-sponsor-actions]{width:100%;margin-top:auto}
.sponsor-billing-card .btn{width:100%;min-height:44px;font-size:var(--fs-base)}
.sponsor-billing-card .btn:disabled{cursor:not-allowed;opacity:.55}
.sponsor-billing-footnote{max-width:680px;margin:var(--s5) auto 0;text-align:center;color:var(--g600);font-size:var(--fs-sm);line-height:1.5}
.agency-public-head{display:flex;align-items:center;gap:var(--s5)}
.agency-public-intro{max-width:760px;margin-top:var(--s5);font-size:var(--fs-lg);color:var(--g600)}
.agency-public-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s6)}
.agency-public-details>div{padding:var(--s4);border:1px solid var(--g200);border-radius:var(--r-md);background-color:var(--white);min-width:0}
.agency-public-details span,.agency-public-details strong,.agency-public-details a{display:block;overflow-wrap:anywhere}
.agency-public-details span{font-size:var(--fs-xs);color:var(--g500);margin-bottom:var(--s2)}
.agency-public-details a{color:var(--blue)}
.agency-property-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
@media(max-width:900px){.sponsor-signup-layout{grid-template-columns:1fr}.sponsor-county-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.agency-property-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sponsor-county-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.agency-public-details,.agency-property-grid,.sponsor-billing-grid{grid-template-columns:1fr}.sponsor-form,.sponsor-billing-panel{padding:var(--s4)}.sponsor-billing-grid{max-width:440px}}

.promo{
  background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-lg);
  padding:var(--s5);position:relative;overflow:hidden;
}
.promo h3{font-size:var(--fs-h4);font-weight:700;color:var(--navy);margin-bottom:var(--s2)}
.promo p{font-size:var(--fs-xs);color:var(--g600);margin-bottom:var(--s4);max-width:230px}
.promo-art{position:absolute;right:-10px;bottom:-10px;width:120px;opacity:.9;pointer-events:none}

/* =========================== 19 · PAGINATION ========================== */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:var(--s7)}
.pagination a,.pagination button,.pagination span{
  min-width:38px;height:38px;padding:0 10px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:600;color:var(--g600);
  border:1px solid transparent;transition:all var(--t);
}
.pagination a:hover,.pagination button:hover{background:var(--g100);color:var(--navy)}
.pagination [aria-current=page]{background:var(--blue);color:var(--white);border-color:var(--blue)}
.pagination .gap{pointer-events:none;color:var(--g400)}

/* ============================== 20 · PANELS =========================== */
.panel{background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);padding:var(--s5)}
.panel--pad-lg{padding:var(--s6)}
.panel--pad-sm{padding:var(--s4)}
/* Cards sitting side by side in a grid: keep the call to action on a shared baseline
   instead of wherever the copy above it happens to end. */
.panel--stack{display:flex;flex-direction:column}
.panel--stack > .btn{margin-top:auto}
.panel--flat{border-radius:var(--r-lg);border-color:var(--g200);box-shadow:none}
.panel--raised{box-shadow:var(--sh1)}
.panel--soft{background:var(--g50);border-color:var(--g200)}
.panel--blue{background:var(--blue-50);border-color:var(--blue-100)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.panel-head h3{font-size:var(--fs-h4);font-weight:700;color:var(--navy)}
.panel-title{font-size:var(--fs-h4);font-weight:700;color:var(--navy);margin-bottom:var(--s4)}

.sticky-cta{
  position:sticky;top:var(--s5);
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);
  box-shadow:var(--sh2);padding:var(--s5);
}

.note{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-md);
  padding:12px 14px;font-size:var(--fs-xs);color:var(--g700);line-height:1.5;
}
.note .ic{color:var(--blue);flex:none;margin-top:1px}
.note--warn{background:var(--warn-bg);border-color:#F5DFB0}
.note--warn .ic{color:var(--warn)}
.note--ok{background:var(--ok-bg);border-color:#BFE6D5}
.note--ok .ic{color:var(--ok)}
.note--danger{background:var(--danger-bg);border-color:#F6CFCC}
.note--danger .ic{color:var(--danger)}
/* A note that carries its own button. The button keeps its own line on a phone so it
   never gets squeezed into a two-word column beside the text. */
.note--action{flex-wrap:wrap;align-items:center}
.note--action > span{flex:1 1 220px}
.note--action .btn{flex:none;margin-left:auto}
@media (max-width:600px){.note--action .btn{margin-left:0;width:100%;justify-content:center}}

/* ========================= 20b · WIZARD ACTIONS ======================= */
/* Back sits to the left of Continue. Continue takes the room that is left, so it
   stays the obvious target without Back having to shrink to nothing. */
.step-actions{display:flex;gap:var(--s3);align-items:stretch}
.step-actions .btn[data-next],
.step-actions .btn[data-pay]{flex:1 1 auto;justify-content:center}
.step-actions .btn[data-back]{flex:0 0 auto}
@media (max-width:480px){
  .step-actions .btn[data-back]{padding-left:var(--s3);padding-right:var(--s3)}
  .step-actions .btn[data-back] span{display:none}
}

/* ============================== 20c · PLANS =========================== */
/* auto-fit, not a viewport media query: the preview rail takes width out of this
   column, so what matters is the space the cards actually have, not the screen. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3)}

.plan{
  position:relative;display:flex;flex-direction:column;gap:var(--s3);
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);
  padding:var(--s5);cursor:pointer;transition:border-color .15s,box-shadow .15s;
}
.plan:hover{border-color:var(--blue-100)}
.plan.is-on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.plan input{position:absolute;opacity:0;width:1px;height:1px}
.plan input:focus-visible + .plan-head{outline:2px solid var(--blue);outline-offset:4px;border-radius:var(--r-sm)}

.plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.plan-name{font-weight:700;color:var(--navy);font-size:var(--fs-md)}
.plan-price{font-weight:700;color:var(--navy);font-size:22px;letter-spacing:-.02em}

.plan-features{display:flex;flex-direction:column;gap:6px;flex:1}
.plan-views{
  display:inline-block;align-self:flex-start;
  background:var(--blue-50);color:var(--blue-700);
  border-radius:var(--r-sm);padding:3px 8px;
  font-size:var(--fs-cap);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.plan-line{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-xs);color:var(--g700);line-height:1.45}
.plan-line .ic{color:var(--ok);flex:none;margin-top:2px}

.plan-pick{
  display:block;text-align:center;font-size:var(--fs-xs);font-weight:600;
  border:1px solid var(--g200);border-radius:var(--r-md);padding:9px 12px;color:var(--g700);
}
.plan.is-on .plan-pick{background:var(--blue);border-color:var(--blue);color:var(--white)}
/* Featured stands out in the plan step, in the gold used for Featured cards (D34). */
.plan--featured{border:2px solid var(--featured-gold);background:var(--featured-gold-soft);box-shadow:var(--sh-card)}
.plan--featured:hover{border-color:var(--featured-gold)}
.plan--featured .plan-pick{border-color:var(--featured-gold);color:var(--featured-gold)}
.plan-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:var(--r-pill);background:var(--featured-gold);color:var(--white);font-size:var(--fs-cap);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.plan--featured.is-on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.plan--featured.is-on .plan-pick{background:var(--blue);border-color:var(--blue);color:var(--white)}
/* The wizard's live preview is a picture of the card, not a link. */
.card--preview{pointer-events:none}

/* The wireframe of the results page at each plan. */
.plan-art{
  display:flex;flex-direction:column;gap:5px;
  background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-md);
  padding:8px;min-height:104px;justify-content:flex-start;
}
.pa-row{
  position:relative;display:flex;gap:6px;align-items:center;
  background:var(--white);border:1px solid var(--g200);border-radius:4px;padding:5px;
}
.pa-row.is-dim{opacity:.45}
.pa-row.is-mine{border-color:var(--blue);background:var(--blue-50)}
.pa-row--xl{padding:8px;align-items:flex-start}
.pa-thumb{flex:none;width:26px;height:20px;border-radius:3px;background:var(--g200)}
.pa-row--xl .pa-thumb{width:44px;height:38px}
.pa-row.is-mine .pa-thumb{background:var(--light-blue)}
.pa-lines{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.pa-lines i{display:block;height:3px;border-radius:2px;background:var(--g200)}
.pa-lines i:first-child{width:70%}
.pa-lines i:nth-child(2){width:45%}
.pa-lines i:nth-child(3){width:55%}
.pa-row.is-mine .pa-lines i{background:var(--light-blue)}
.pa-tag{
  position:absolute;right:6px;bottom:6px;
  background:var(--blue);color:var(--white);border-radius:3px;
  padding:2px 6px;font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
}

/* =========================== 20d · OSM MAP ============================ */
/* A confirmation map: tiles, one pin, no panning. */
.osm{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  border:1px solid var(--g200);background:var(--g100);
  touch-action:none;user-select:none;
}
.osm-tiles{position:absolute;inset:0}
.osm-tile{position:absolute;width:256px;height:256px;max-width:none;display:block}
.osm-pin{
  position:absolute;width:34px;height:34px;margin:-34px 0 0 -17px;padding:0;
  border:0;background:none;cursor:grab;z-index:2;
}
.osm.is-dragging .osm-pin{cursor:grabbing}
.osm-pin-dot{
  display:block;width:22px;height:22px;margin:0 auto;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--blue);border:2px solid var(--white);
  box-shadow:0 2px 6px rgba(0,29,84,.35);
}
.osm-pin:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.osm-zoom{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:2px;z-index:3}
.osm-zoom button{
  width:28px;height:28px;border:1px solid var(--g200);background:var(--white);
  color:var(--navy);font-size:16px;font-weight:700;line-height:1;cursor:pointer;border-radius:4px;
}
.osm-zoom button:hover{background:var(--blue-50)}
.osm-credit{
  position:absolute;left:0;bottom:0;margin:0;z-index:3;
  background:rgba(255,255,255,.82);padding:2px 6px;
  font-size:10px;color:var(--g700);border-top-right-radius:4px;
}
.osm-credit a{color:var(--g700);text-decoration:underline}

/* The browsable map. Same shell as the confirmation map, but the pin is anchored to the
   property and the tiles move under it. */
.osm--browse{cursor:grab;touch-action:none}
.osm--browse.is-dragging{cursor:grabbing}
.osm--browse .osm-tile{pointer-events:none;user-select:none}
.osm--browse:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.osm-marker{position:absolute;width:0;height:0;z-index:2;pointer-events:none}
.osm-marker span{
  position:absolute;left:-14px;top:-30px;width:28px;height:28px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--blue);border:3px solid var(--white);
  box-shadow:0 3px 10px rgba(0,29,84,.4);
}
.osm-marker span::after{
  content:"";position:absolute;inset:7px;border-radius:50%;background:var(--white);
}
.osm--browse .osm-zoom button:last-child{font-size:14px}

.input.is-error{border-color:var(--danger)}

/* ====================== 20e · SLOTS WITH PLACES ======================= */
/* A viewing time now carries how full it is, so the button holds two lines. */
.slot{flex-direction:column;align-items:flex-start;gap:2px;height:auto;padding:10px 14px;text-align:left}
.slot small{
  display:block;font-size:var(--fs-cap);color:var(--g500);font-weight:500;line-height:1.3;
}
.slot[aria-pressed="true"] small{color:var(--white);opacity:.85}

/* A note that carries a dismiss button keeps it out of the text flow. */
.note > .icon-btn{flex:none;margin:-4px -6px -4px auto;color:var(--g500)}
.note > .icon-btn:hover{color:var(--navy)}

/* ========================= 20i · STORY PAGES ========================= */
/* The opening runs wider than the argument does. It is a claim, not a paragraph. */
.story-hero{max-width:52ch;margin:0 0 var(--s8)}
@media (min-width:1080px){
  .story-hero{max-width:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:var(--s3) var(--s7);align-items:end;margin-bottom:var(--s8)}
  .story-hero .eyebrow{grid-column:1/-1}
  .story-hero h1{margin:0}
  .story-hero .lede{margin:0;padding-bottom:6px}
}
.story-hero .eyebrow{
  font-size:var(--fs-cap);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);margin:0 0 var(--s3);
}
.story-hero h1{
  font-size:clamp(30px,4.6vw,48px);line-height:1.06;letter-spacing:-.025em;
  color:var(--navy);margin:0;text-wrap:balance;
}
.story-hero .lede{
  font-size:var(--fs-lg);line-height:1.55;color:var(--g700);margin:var(--s4) 0 0;
  text-align:justify;text-align-last:start;hyphens:none;-webkit-hyphens:none;
  word-break:normal;overflow-wrap:normal;
}

/* The body is a measured reading column that a photograph can break out of. On a wide
   screen a split block runs text and picture side by side; the column keeps its measure
   either way, because a 1400px line of body copy is unreadable no matter how much room
   there is for it. */
.story-body{display:flex;flex-direction:column;gap:var(--s7)}
.story-block{margin:0}

@media (min-width:1080px){
  /* With a photograph beside it, the argument keeps a reading measure. */
  .story-block--split{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
    gap:var(--s7);align-items:center;
  }
  /* Break the picture into the margin so the page has an edge to it. */
  .story-block--split .art{width:calc(100% + var(--s6))}
  .story-block--right .art{margin-right:calc(var(--s6) * -1)}
  .story-block--left .art{margin-left:calc(var(--s6) * -1)}
  .story-block--left > .art{order:1}
  .story-block--left > .story-copy{order:2}

  /* Without one, the block owns the whole width: the heading holds the left, the
     argument runs from there to the far edge. Text stopping halfway across a monitor
     with nothing beside it reads as a layout that broke, not as white space. */
  .story-block--wide{
    display:grid;grid-template-columns:minmax(0,0.42fr) minmax(0,1fr);
    gap:var(--s3) var(--s7);align-items:start;
  }
  .story-block--wide .story-head{position:sticky;top:calc(var(--header-h) + var(--s4))}
  /* A wider measure needs more leading, or the eye loses the start of the next line on
     the way back. This is the trade for filling the page rather than stopping halfway. */
  .story-block--wide .story-text > p{max-width:none;line-height:1.78}
}

.story-copy .eyebrow,.story-head .eyebrow{
  font-size:var(--fs-cap);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);margin:0 0 var(--s2);
}
.story-block h2{
  margin:0 0 var(--s4);color:var(--navy);text-wrap:balance;
  font-size:clamp(21px,2.3vw,28px);line-height:1.22;letter-spacing:-.015em;
}
.story-block p{
  margin:0 0 var(--s4);color:var(--g700);line-height:1.68;font-size:var(--fs-md);
  text-align:justify;text-align-last:start;hyphens:none;-webkit-hyphens:none;
  word-break:normal;overflow-wrap:normal;
}
.story-block p:last-child{margin-bottom:0}

/* Labelled points. A definition list, because that is what they are. */
.story-facts{margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s4)}
@media (min-width:820px){.story-facts{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6)}}
.story-facts > div{border-top:1px solid var(--g200);padding-top:var(--s3)}
.story-facts dt{
  display:flex;gap:8px;align-items:baseline;
  font-weight:600;color:var(--navy);font-size:var(--fs-sm);margin:0 0 4px;
}
.story-facts dt .ic{color:var(--ok);flex:none;transform:translateY(2px)}
.story-facts dd{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--g700)}

/* Photographs. One frame shape wherever the layout puts it, cropped by aspect-ratio so a
   portrait source and a landscape source still line up with the text beside them. */
/* width:100% is load-bearing. A figure with an aspect-ratio and no width resolves against
   its content, and an unloaded image is no content at all, so the frame collapses to a
   thumbnail and lazy loading then never fires because it is never near the viewport. */
.art{
  margin:0;width:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--g100);
  aspect-ratio:var(--art-ratio, 3/2);
}
.art img{width:100%;height:100%;object-fit:cover;display:block}
/* If a photograph ever fails to resolve, the frame stays a considered panel rather than
   a broken icon on a page whose subject is trust. */
.art--gone{background:linear-gradient(140deg,var(--blue-50),var(--blue-100))}
.scene--top .art{margin-bottom:var(--s5)}

/* The hub. Each room shows its own drawing, so the page is a contents page you can
   read at a glance rather than a list of blue links. */
.rooms{display:grid;gap:var(--s4)}
@media (min-width:700px){.rooms{grid-template-columns:1fr 1fr}}
@media (min-width:1060px){.rooms{grid-template-columns:repeat(3,1fr)}}
.room{
  display:grid;grid-template-rows:auto 1fr;gap:var(--s4);
  border:1px solid var(--g200);border-radius:var(--r-lg);padding:var(--s4);
  background:var(--white);text-decoration:none;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.room:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--sh-md)}
.room .art{aspect-ratio:16/10}
.room-copy{display:flex;flex-direction:column;gap:5px}
.room-copy b{color:var(--navy);font-weight:600;font-size:var(--fs-md);line-height:1.25}
.room-copy span{color:var(--g500);font-size:var(--fs-xs);line-height:1.5}
.room > .ic{color:var(--blue);justify-self:start;transition:transform 160ms ease}
.room:hover > .ic{transform:translateX(4px)}

/* Human-readable public sitemap. Private account, application and publication routes are
   deliberately absent; this page is navigation, not an inventory of implementation files. */
.sitemap-intro{max-width:70ch;margin-bottom:var(--s8)}
.sitemap-groups{display:grid;gap:var(--s8)}
.sitemap-group>h2{margin-bottom:var(--s4)}
.sitemap-link{min-height:140px;grid-template-rows:auto 1fr}
.sitemap-link .room-copy{align-self:end}

/* Agency advertising is a concise commercial landing page rather than a policy article.
   Typography stays on the standard h1/h2/h3/body scale; depth and colour separate choices. */
.agency-hero,.listing-plans-hero{padding-block:var(--s10);background:linear-gradient(135deg,var(--blue-50),var(--white) 62%)}
.agency-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);gap:var(--s9);align-items:start}
.agency-hero-copy h1,.listing-plans-hero h1{margin-top:var(--s4);font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.03em;color:var(--navy)}
.agency-hero-copy h1,.agency-hero-copy>.lead{max-width:none}
.listing-plans-hero h1{max-width:17ch}
.agency-hero-copy>.lead,.listing-plans-hero .lead{margin-top:var(--s4)}
.listing-plans-hero .lead{max-width:58ch}
.agency-hero-actions,.listing-plans-actions{margin-top:var(--s6)}
.agency-proof{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s6);color:var(--navy);font-weight:600}
.agency-proof li{display:flex;align-items:center;gap:var(--s2)}
.agency-proof .ic{color:var(--ok)}
.agency-preview{padding:var(--s6);border:1px solid var(--blue-100);border-radius:var(--r-2xl);background:var(--white);box-shadow:var(--sh3);transform:rotate(1deg)}
.agency-preview-top,.agency-preview-stats{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.agency-preview-top>span:last-child,.agency-preview p{color:var(--g500);font-size:var(--fs-sm)}
.agency-preview-brand{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.agency-preview-brand b,.agency-placement-preview b{display:block;color:var(--navy);font-size:var(--fs-h4)}
.agency-preview-brand small,.agency-placement-preview small{display:block;margin-top:var(--s1);color:var(--g500);font-size:var(--fs-sm)}
.agency-preview-icon,.agency-card-icon,.public-plan-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:var(--r-lg);background:var(--blue);color:var(--white)}
.agency-preview-line{height:1px;margin:var(--s5) 0;background:var(--g200)}
.agency-preview-stats span{display:grid;gap:var(--s1);color:var(--g500);font-size:var(--fs-sm)}
.agency-preview-stats b{font-size:var(--fs-h3);color:var(--navy)}
.agency-preview p{margin-top:var(--s5)}
.agency-section-head{align-items:flex-start}
.agency-card-grid,.agency-placement-grid,.public-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.agency-benefit-card{min-height:240px;padding:var(--s6);border:1px solid var(--g200);border-radius:var(--r-xl);box-shadow:var(--sh1);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.agency-benefit-card--blue{background:var(--blue-50);border-color:var(--blue-100)}
.agency-benefit-card--white{background:var(--white)}
.agency-benefit-card--soft{background:var(--g50)}
.agency-benefit-card:hover,.agency-placement-card:hover,.public-plan:hover{transform:translateY(-5px);box-shadow:var(--sh3);border-color:var(--light-blue)}
.agency-benefit-card h3,.agency-placement-card h3,.public-plan h3{margin-top:var(--s5);font-size:var(--fs-h3);line-height:1.25;color:var(--navy)}
.agency-benefit-card p,.agency-placement-card p,.public-plan>p{margin-top:var(--s3);font-size:var(--fs-base);line-height:1.6;color:var(--g600)}
.agency-benefit-card--blue .agency-card-icon{background:var(--navy)}
.agency-benefit-card--white .agency-card-icon{background:var(--blue)}
.agency-benefit-card--soft .agency-card-icon{background:var(--navy-800)}
.agency-placement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.agency-placement-card{display:grid;grid-template-columns:minmax(210px,.85fr) 1fr;gap:var(--s6);align-items:center;padding:var(--s6);border:1px solid var(--g200);border-radius:var(--r-xl);background:var(--white);box-shadow:var(--sh1);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.agency-placement-preview{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center;padding:var(--s5);border:1px solid var(--blue-100);border-radius:var(--r-lg);background:var(--blue-50)}
.agency-placement-preview>.badge{grid-column:1/-1;justify-self:start}
.agency-placement-preview--listing{background:var(--g50);border-color:var(--g200)}
.agency-placement-card h3{margin-top:var(--s2)}
.agency-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.agency-steps li{display:flex;gap:var(--s3);padding:var(--s5);border-top:3px solid var(--blue);background:var(--g50);border-radius:0 0 var(--r-lg) var(--r-lg)}
.agency-steps li>span{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--white);font-weight:700}
.agency-steps h3{font-size:var(--fs-h4);color:var(--navy)}
.agency-steps p{margin-top:var(--s2);color:var(--g600)}
.agency-integrity{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7);align-items:center;margin-top:var(--s8);padding:var(--s7);border-radius:var(--r-xl);background:var(--navy);box-shadow:var(--sh3);color:var(--white)}
.agency-integrity h2{margin-top:var(--s2);color:var(--white);font-size:var(--fs-h2);line-height:1.2}
.agency-integrity .overline{color:var(--light-blue)}
.agency-integrity ul{display:grid;gap:var(--s3)}
.agency-integrity li{display:flex;align-items:flex-start;gap:var(--s3)}
.agency-integrity .ic{flex:none;margin-top:3px;color:var(--light-blue)}
.agency-landlord-card,.listing-plans-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);padding:var(--s7);border:1px solid var(--blue-100);border-radius:var(--r-xl);background:var(--white);box-shadow:var(--sh2)}
.agency-landlord-card p,.listing-plans-cta p{margin-top:var(--s2);color:var(--g600)}
.agency-contact-grid{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:var(--s8);align-items:start}
.agency-contact-copy>p{margin-top:var(--s4);font-size:var(--fs-lg);color:var(--g600)}
.agency-contact-note{display:flex;align-items:flex-start;gap:var(--s3);margin-top:var(--s6);padding:var(--s4);border-radius:var(--r-lg);background:var(--blue-50);color:var(--navy)}
.agency-contact-note .ic{flex:none;color:var(--blue)}
.agency-form{box-shadow:var(--sh2)}

/* Public plan comparison deliberately explains benefits without publishing prices. Prices
   remain contextual to rent/sale inside the listing wizard, where the choice is made. */
.listing-plans-hero{text-align:center}
.listing-plans-hero h1,.listing-plans-hero .lead{margin-inline:auto}
.listing-plans-actions{justify-content:center}
.public-plan{display:flex;flex-direction:column;min-height:460px;padding:var(--s6);border:1px solid var(--g200);border-radius:var(--r-xl);box-shadow:var(--sh1);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.public-plan--standard{background:var(--white)}
.public-plan--premium{background:var(--blue-50);border-color:var(--blue-100)}
.public-plan--featured{background:linear-gradient(155deg,var(--navy),var(--navy-800));border-color:var(--navy);color:var(--white)}
.public-plan--featured h3,.public-plan--featured>p{color:var(--white)}
.public-plan--featured .overline{color:var(--light-blue)}
.public-plan-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.public-plan h3{font-size:var(--fs-h2)}
.public-plan ul{display:grid;gap:var(--s3);margin-top:var(--s6)}
.public-plan li{display:flex;align-items:flex-start;gap:var(--s3);line-height:1.55}
.public-plan li .ic{flex:none;margin-top:4px;color:var(--blue)}
.public-plan--featured li .ic{color:var(--light-blue)}
.listing-plans-note{display:flex;align-items:flex-start;gap:var(--s4);margin-top:var(--s7);padding:var(--s6);border:1px solid var(--blue-100);border-radius:var(--r-xl);background:var(--blue-50)}
.listing-plans-note>.ic{flex:none;color:var(--blue)}
.listing-plans-note h2{font-size:var(--fs-h4);color:var(--navy)}
.listing-plans-note p{margin-top:var(--s2);color:var(--g600)}
.listing-plans-cta{margin-top:var(--s7);background:var(--g50)}

@media(max-width:1050px){
 .agency-hero-grid,.agency-contact-grid{grid-template-columns:1fr;gap:var(--s7)}
 .agency-preview{max-width:640px;transform:none}
 .agency-card-grid,.public-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .public-plan:last-child{grid-column:1/-1;min-height:0}
 .agency-placement-grid{grid-template-columns:1fr}
 .agency-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
 .agency-hero,.listing-plans-hero{padding-block:var(--s7)}
 .agency-card-grid,.public-plan-grid,.agency-steps{grid-template-columns:1fr}
 .public-plan:last-child{grid-column:auto}
 .agency-placement-card,.agency-integrity{grid-template-columns:1fr}
 .agency-landlord-card,.listing-plans-cta{align-items:flex-start;flex-direction:column;padding:var(--s5)}
 .agency-hero-actions .btn,.listing-plans-actions .btn,.agency-landlord-card .btn,.listing-plans-cta .btn{width:100%}
 .agency-preview,.agency-benefit-card,.agency-placement-card,.public-plan{min-height:0;padding:var(--s5)}
}

/* A pull quote runs the full width of the story, like every other block without a picture
   beside it. At 56ch it stopped halfway across the page and read as a broken layout. */
.pull{
  margin:0;padding:0 0 0 var(--s5);border-left:3px solid var(--blue);
}
/* Never justified. Display type at this size opens rivers you could drive through: justify
   stretches the one or two lines it gets, and the result is the worst-set text on the page
   sitting where the eye is most likely to land. `pretty` rather than `balance`: balance
   evens the lines out by shortening them, so the quote stopped short of the edge again. */
.pull p{
  font-size:clamp(19px,2.3vw,25px);line-height:1.4;color:var(--navy);
  font-weight:500;letter-spacing:-.012em;margin:0;
  text-align:left;text-wrap:pretty;hyphens:manual;
}
.pull cite{display:block;margin-top:var(--s3);font-style:normal;font-size:var(--fs-xs);color:var(--g500)}

/* Surfaces, site-wide (owner decision, 30 September). Every page sits on --canvas, so each
   kind of white card gets the same soft shadow and reads as a separate thing. One list, no
   per-page rules. Hover rules keep their stronger shadow because they are more specific. */
.panel,.side-card,.card,.result,.sticky-cta,.plan,.room,.onward-grid a,.stat,.calendar,.story-facts > div,.pull{box-shadow:var(--sh-card)}
.story-facts > div{background-color:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);padding:var(--s4)}
.pull{background-color:var(--white);padding:var(--s5) var(--s6);border-radius:0 var(--r-lg) var(--r-lg) 0}

.onward{border-top:1px solid var(--g200);padding-top:var(--s5);margin-top:var(--s4)}
.onward h2{margin:0 0 var(--s4);color:var(--navy)}
.onward-grid{display:grid;gap:var(--s3)}
@media (min-width:760px){.onward-grid{grid-template-columns:repeat(3,1fr)}}
/* Flex, not grid. The grid version placed the arrow by auto-placement, and because it
   also spanned two rows it landed in the text column and squeezed the words to one per
   line. A column of text with the arrow underneath cannot do that to itself. */
.onward-grid a{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  border:1px solid var(--g200);border-radius:var(--r-md);padding:var(--s4);
  text-decoration:none;background:var(--white);transition:border-color .15s,transform .15s;
}
.onward-grid a:hover{border-color:var(--blue);transform:translateY(-2px)}
.onward-grid b{color:var(--navy);font-weight:600;font-size:var(--fs-sm);line-height:1.3}
.onward-grid span{color:var(--g500);font-size:var(--fs-xs);line-height:1.5;flex:1}
.onward-grid .ic{color:var(--blue);flex:none;margin-top:2px;transition:transform 160ms ease}
.onward-grid a:hover .ic{transform:translateX(4px)}

/* ========================== 20h · MEGA NAV =========================== */
.navitem{position:relative;display:flex;align-items:center}
/* A plain list, tight. The old version had section headings and a call to action and
   breathed like a landing page; this is a menu, and a menu should be scannable in one
   glance without the eye travelling. */
.mega{position:absolute;top:100%;left:0;z-index:60;padding-top:8px}
.mega-inner{
  display:flex;gap:var(--s5);
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:10px 6px;
}
.mega-col{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:1.5px;min-width:172px;
}
.mega-col a{
  display:block;padding:5px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);line-height:1.35;color:var(--navy);font-weight:400;
  text-decoration:none;white-space:nowrap;
}
.mega-col a:hover{background:var(--blue-50);color:var(--blue)}
/* The first item of the first column is the catch-all, so it reads as the heading it is. */
.mega-col:first-child a:first-child{color:var(--blue);font-weight:500}
.mega--one .mega-inner{padding:10px 6px}
.navitem > button{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
}
@media (max-width:1023px){.mega{display:none}}

/* ========================= 20j · STORE BADGES ======================== */
.footer-apps{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);
  border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s5);padding-top:var(--s5);
}
.footer-apps > span{font-size:var(--fs-xs);color:var(--g300);font-weight:500}
.store-badges{display:flex;flex-wrap:wrap;gap:10px}
.store-badges a{
  display:block;border-radius:7px;overflow:hidden;line-height:0;
  outline:1px solid rgba(255,255,255,.22);outline-offset:0;
  transition:outline-color .15s,transform .15s;
}
.store-badges a:hover{outline-color:rgba(255,255,255,.55);transform:translateY(-1px)}
.store-badges a:focus-visible{outline:2px solid var(--light-blue);outline-offset:2px}
.store-badges img{display:block;width:auto;height:38px}

/* ====================== 20f · PHOTO TRANSITIONS ====================== */
/* Turning a page, not reloading one. The outgoing frame leaves the way you are
   travelling; the incoming one arrives from the opposite edge. */
.gallery-main img,
.detail-gallery img{
  transition:opacity 170ms ease, transform 300ms cubic-bezier(.22,.7,.28,1);
  will-change:opacity,transform;
}
.gallery-main img.ph-out-left {opacity:0;transform:translate3d(-18px,0,0)}
.gallery-main img.ph-out-right{opacity:0;transform:translate3d( 18px,0,0)}
.gallery-main img.ph-in-left  {opacity:0;transform:translate3d(-18px,0,0);transition:none}
.gallery-main img.ph-in-right {opacity:0;transform:translate3d( 18px,0,0);transition:none}
/* The thumbnail strip follows the main frame rather than snapping. */
.gallery-thumb{transition:opacity 160ms ease, box-shadow 160ms ease}
.gallery-thumb[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--blue)}
.gallery-thumb:not([aria-current="true"]){opacity:.62}
.gallery-thumb:hover{opacity:1}
@media (prefers-reduced-motion:reduce){
  .gallery-main img,.detail-gallery img{transition:none}
  .gallery-main img.ph-out-left,.gallery-main img.ph-out-right,
  .gallery-main img.ph-in-left,.gallery-main img.ph-in-right{opacity:1;transform:none}
}

/* ======================== 20g · SAVED STATE ========================== */
/* A save that does not look saved is a save nobody trusts. */
/* Longhands, and the .btn class carried in the selector. The `background` shorthand
   loses to .btn-secondary's own shorthand more often than the specificity maths
   suggests, and this is the one state the button exists to show. */
.btn.btn-save[aria-pressed="true"]{
  background-color:var(--blue-50);border-color:var(--blue);color:var(--blue);
}
.btn-save[aria-pressed="true"] .ic{fill:var(--blue);color:var(--blue)}
.card-save[aria-pressed="true"],
.icon-btn[data-save][aria-pressed="true"]{color:var(--blue)}
.card-save[aria-pressed="true"] .ic,
.icon-btn[data-save][aria-pressed="true"] .ic{fill:var(--blue)}

/* ============================== 21 · STATS ============================ */
.stat{background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);padding:var(--s5)}
.stat b{display:block;font-size:30px;font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.1}
.stat span{display:block;font-size:var(--fs-xs);color:var(--g500);margin-top:4px}
.stat .trend{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-cap);font-weight:600;margin-top:8px}
.trend--up{color:var(--ok)}
.trend--down{color:var(--danger)}
.trend--flat{color:var(--g500)}

.feature{display:flex;gap:var(--s3);align-items:flex-start}
.feature-ic{
  width:40px;height:40px;flex:none;border-radius:var(--r-md);
  background:var(--blue-50);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.feature b{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--navy);margin-bottom:3px}
.feature p{font-size:var(--fs-xs);color:var(--g600);line-height:1.5}

/* ============================== 22 · STEPS ============================ */
.steps{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s6)}
.step{display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);color:var(--g500);font-weight:500}
.step i{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--g100);color:var(--g500);font-size:var(--fs-cap);font-weight:700;font-style:normal;
}
.step[data-state=current]{color:var(--navy);font-weight:600}
.step[data-state=current] i{background:var(--blue);color:var(--white)}
.step[data-state=done]{color:var(--g600)}
.step[data-state=done] i{background:var(--blue-50);color:var(--blue)}
.step-line{flex:1;min-width:20px;height:1px;background:var(--g200)}

.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1.5px;background:var(--g200)}
.timeline li{position:relative;padding-bottom:var(--s5)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;
  border-radius:50%;background:var(--white);border:2.5px solid var(--g300);
}
.timeline li[data-state=done]::before{background:var(--blue);border-color:var(--blue)}
.timeline li[data-state=current]::before{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-50)}
.timeline b{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--navy)}
.timeline span{font-size:var(--fs-xs);color:var(--g500)}

/* ============================ 23 · CALENDAR =========================== */
.calendar{background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);padding:var(--s5)}
.calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.calendar-head b{font-size:var(--fs-sm);font-weight:700;color:var(--navy)}
.calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendar-day{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 2px;border-radius:var(--r-md);border:1px solid transparent;
  font-size:var(--fs-cap);color:var(--g500);transition:all var(--t);
}
.calendar-day b{font-size:var(--fs-sm);font-weight:600;color:var(--navy)}
.calendar-day:hover:not(:disabled){background:var(--g50);border-color:var(--g200)}
.calendar-day[aria-pressed=true]{background:var(--navy);border-color:var(--navy)}
.calendar-day[aria-pressed=true],.calendar-day[aria-pressed=true] b{color:var(--white)}
.calendar-day:disabled{opacity:.32;cursor:not-allowed}
.calendar-day .avail{width:5px;height:5px;border-radius:50%;background:var(--blue)}
.calendar-day:disabled .avail{visibility:hidden}

.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.slot{
  height:46px;border:1px solid var(--g200);border-radius:var(--r-md);background:var(--white);
  font-size:var(--fs-sm);font-weight:600;color:var(--navy);transition:all var(--t);
}
.slot:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.slot[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.slot:disabled{background:var(--g50);color:var(--g400);cursor:not-allowed;text-decoration:line-through}

/* ====================== 24 · CHECKLIST / PROGRESS ===================== */
.checklist li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:var(--fs-sm);color:var(--g700)}
.checklist .ic{flex:none;margin-top:2px;color:var(--ok)}
.checklist li[data-done=false]{color:var(--g500)}
.checklist li[data-done=false] .ic{color:var(--g300)}
.checklist b{color:var(--navy);font-weight:500}

.progress{height:8px;border-radius:var(--r-pill);background:var(--g200);overflow:hidden}
.progress i{display:block;height:100%;border-radius:var(--r-pill);background:var(--blue);transition:width 400ms ease}
.progress--ok i{background:var(--ok)}
.progress-label{display:flex;justify-content:space-between;font-size:var(--fs-xs);margin-bottom:8px}
.progress-label b{color:var(--navy);font-weight:700}


/* ========================= 25 · LISTS / TABLES ======================== */
.list-row{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s4);border-bottom:1px solid var(--g100);
  transition:background var(--t);
}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:var(--g50)}
.list-row img.thumb{width:72px;height:72px;flex:none;border-radius:var(--r-md);object-fit:cover;background:var(--g100)}
/* The name is the point of the row, so it gets a floor. `flex:1;min-width:0` let it
   collapse to nothing whenever the badges and buttons beside it were greedy, and a name
   in a 41px column wraps to one word per line. The badges give way instead: they are
   detail, and detail is what should yield. */
.list-row .grow{flex:1 1 200px;min-width:170px}
.list-row .chips{flex:0 1 auto;min-width:0;justify-content:flex-end}
/* Below the point where everything cannot sit on one line, the row wraps rather than
   crushing any one column. */
@media (max-width:1100px){
  .list-row{flex-wrap:wrap}
  .list-row .grow{flex:1 1 220px}
  .list-row .chips{order:5;flex-basis:100%;justify-content:flex-start}
}
.list-row b{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--navy)}
.list-row small{display:block;font-size:var(--fs-xs);color:var(--g500)}
.listing-link{display:block}
.listing-link:hover b{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.minstat{gap:2px;align-items:center}

/* A list row is a record, not a table cell: on a phone it stacks and its actions go full
   width, so nothing is squeezed into a 40px column. */
@media (max-width:640px){
  /* Small buttons are fine next to a mouse; on a phone they still need a 44px target. */
  .btn-sm{min-height:44px}
  .list-row{flex-wrap:wrap;gap:var(--s3);padding:var(--s4) var(--s3)}
  .list-row .grow{flex:1 1 60%;min-width:0}
  .list-row .status{order:3}
  .list-row .btn{order:4;flex:1 1 100%;justify-content:center}
  .list-row .dropdown{order:2;margin-left:auto}
}

.table{font-size:var(--fs-sm)}
.table th{
  text-align:left;font-size:var(--fs-cap);font-weight:600;color:var(--g500);
  text-transform:uppercase;letter-spacing:.05em;
  padding:12px var(--s4);border-bottom:1px solid var(--g200);white-space:nowrap;
}
.table td{padding:14px var(--s4);border-bottom:1px solid var(--g100);color:var(--g700);vertical-align:middle}
.table tbody tr:hover{background:var(--g50)}
.table td b{color:var(--navy);font-weight:600}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.avatar{
  width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;
  background:var(--blue-50);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:700;
}
.avatar--lg{width:64px;height:64px;font-size:var(--fs-lg)}
.avatar--sm{width:32px;height:32px;font-size:11px}

/* ============================ 25b · MESSAGES ========================== */
/* One thread per application. Deliberately plain: this is correspondence about a
   tenancy, not a chat product. */
.thread{display:flex;flex-direction:column;gap:var(--s3);max-height:420px;overflow-y:auto;padding-right:4px}
.msg{max-width:82%;align-self:flex-start}
.msg--mine{align-self:flex-end;text-align:right}
.msg-body{
  background:var(--g100);color:var(--g900);
  padding:10px 14px;border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);
  font-size:var(--fs-sm);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;
}
.msg--mine .msg-body{
  background:var(--blue);color:var(--white);
  border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
}
.msg-meta{font-size:var(--fs-cap);color:var(--g500);margin-top:4px}

/* ============================= 26 · OVERLAYS ========================== */
.modal-backdrop{
  position:fixed;inset:0;z-index:70;background:rgba(0,29,84,.45);
  display:flex;align-items:center;justify-content:center;padding:var(--s5);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
}
.modal-backdrop[data-open=true]{opacity:1;visibility:visible}
.modal{
  background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh3);
  width:100%;max-width:520px;max-height:88vh;overflow:auto;
  transform:translateY(8px) scale(.99);transition:transform var(--t);
}
.modal-backdrop[data-open=true] .modal{transform:none}
.modal--wide{max-width:900px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s5);border-bottom:1px solid var(--g200)}
.modal-head h2{font-size:var(--fs-h4);font-weight:700;color:var(--navy)}
.modal-body{padding:var(--s5)}
.modal-foot{padding:var(--s4) var(--s5);border-top:1px solid var(--g200);display:flex;justify-content:flex-end;gap:var(--s2);background:var(--g50)}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:50;min-width:200px;
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-md);
  box-shadow:var(--sh2);padding:6px;
}
.dropdown-menu a,.dropdown-menu button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-xs);font-weight:500;color:var(--g700);text-align:left;
}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--g100);color:var(--navy)}
.dropdown-menu hr{border:0;border-top:1px solid var(--g100);margin:6px 0}

.toast-stack{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--s5);z-index:90;display:flex;flex-direction:column;gap:var(--s2);pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;
  background:var(--navy);color:var(--white);
  padding:12px 18px;border-radius:var(--r-md);box-shadow:var(--sh3);
  font-size:var(--fs-xs);font-weight:500;
  animation:toast-in 220ms cubic-bezier(.2,.7,.3,1);
}
.toast .ic{color:var(--light-blue)}
.toast--ok .ic{color:#6EE7B7}
.toast--err{background:var(--danger)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============================== 27 · STATES =========================== */
.empty{text-align:center;padding:var(--s9) var(--s5);max-width:420px;margin-inline:auto}
.empty-ic{
  width:56px;height:56px;margin:0 auto var(--s4);border-radius:var(--r-lg);
  background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;
}
.empty h2,.empty h3{font-size:var(--fs-h4);font-weight:700;color:var(--navy);margin-bottom:var(--s2)}
.empty p{font-size:var(--fs-sm);color:var(--g600);margin-bottom:var(--s5)}
.empty--error .empty-ic{background:var(--danger-bg);color:var(--danger)}

.skeleton{background:var(--g100);border-radius:var(--r-sm);position:relative;overflow:hidden}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation:shimmer 1.3s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-result{display:grid;grid-template-columns:minmax(0,42%) 96px minmax(0,1fr);gap:var(--s2);border:1px solid var(--g200);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s4)}
.sk-line{height:12px;margin-bottom:10px}
.sk-line--lg{height:22px;width:45%}
.sk-line--sm{width:60%}

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

/* =============================== 28 · MAP ============================= */
.mapview{
  position:relative;height:640px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--g200);
  background:
    linear-gradient(var(--g100) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,var(--g100) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(150deg,#EEF4FB,#F7FAFD);
}
.mapview::before{
  content:"";position:absolute;left:-8%;top:34%;width:120%;height:60px;
  background:var(--blue-100);opacity:.5;transform:rotate(-7deg);
}
.map-pin{
  position:absolute;transform:translate(-50%,-100%);z-index:2;
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-pill);
  padding:7px 13px;font-size:var(--fs-cap);font-weight:700;color:var(--navy);
  box-shadow:var(--sh2);white-space:nowrap;transition:all var(--t);
}
.map-pin:hover,.map-pin[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--white);z-index:3;transform:translate(-50%,-100%) scale(1.06)}
.map-note{
  position:absolute;left:var(--s4);bottom:var(--s4);z-index:4;
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-md);
  padding:10px 14px;font-size:var(--fs-cap);color:var(--g600);box-shadow:var(--sh1);
  display:flex;align-items:center;gap:8px;
}

/* ============================== 29 · FOOTER =========================== */
.site-footer{border-top:1px solid var(--g200);margin-top:var(--s10);background:var(--white)}
.site-footer .wrap{padding-block:var(--s8) var(--s6)}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--s6)}
.footer-brand img{width:104px;margin-bottom:var(--s3)}
.footer-brand p{font-size:var(--fs-xs);color:var(--g500);max-width:250px;line-height:1.6}
.footer-grid h4{font-size:var(--fs-xs);font-weight:700;color:var(--navy);margin-bottom:var(--s3)}
.footer-grid li a{display:block;padding:5px 0;font-size:var(--fs-xs);color:var(--g600);transition:color var(--t)}
.footer-grid li a:hover{color:var(--blue)}
.footer-legal{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--g200);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  font-size:var(--fs-cap);color:var(--g500);
}
.footer-legal ul{display:flex;gap:var(--s4);flex-wrap:wrap}
.footer-note{font-size:var(--fs-cap);color:var(--g500);line-height:1.6;max-width:640px;margin-top:var(--s3)}

/* ============================= 30 · UTILITIES ========================= */
.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:var(--s4);top:-60px;z-index:100;background:var(--navy);color:var(--white);padding:12px 18px;border-radius:var(--r-md);font-size:var(--fs-xs);font-weight:600;transition:top var(--t)}
.skip-link:focus{top:var(--s3)}
.center{text-align:center}
.mt0{margin-top:0}.mt1{margin-top:var(--s1)}.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}
.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}.mt6{margin-top:var(--s6)}.mt7{margin-top:var(--s7)}
.mb0{margin-bottom:0}.mb1{margin-bottom:var(--s1)}.mb2{margin-bottom:var(--s2)}.mb3{margin-bottom:var(--s3)}
.mb4{margin-bottom:var(--s4)}.mb5{margin-bottom:var(--s5)}.mb6{margin-bottom:var(--s6)}
.full{width:100%}
.grid > .full{grid-column:1/-1}
.nowrap{white-space:nowrap}
.hide-desktop{display:none}
.page-top{padding-top:var(--s5)}
.measure{max-width:52ch;margin-inline:auto}
.row--center{justify-content:center}
.self-start{align-self:flex-start}
.grow{flex:1;min-width:0}
.gap2{gap:var(--s2)}.gap3{gap:var(--s3)}.gap4{gap:var(--s4)}.gap5{gap:var(--s5)}
.gap6{gap:var(--s6)}.gap7{gap:var(--s7)}.gap8{gap:var(--s8)}
.narrow{max-width:720px}
.narrow-sm{max-width:460px}
.items-center{align-items:center}
/* The search band lifts into the hero's lower edge - the one deliberate overlap in the system. */
.searchband{margin-top:-40px;position:relative;z-index:5}
.thumb-sm{width:64px;height:64px;border-radius:var(--r-md);object-fit:cover;flex:none}
.thumb-md{width:76px;height:76px;border-radius:var(--r-md);object-fit:cover;flex:none}
.scroll-x{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.scroll-x::-webkit-scrollbar{display:none}
.scroll-x > *{scroll-snap-align:start;flex:none}

/* ============================= 30b · RECEIPT ========================== */
/* The itemised total before payment. A receipt is a table of facts, so it reads as one. */
.receipt{border-top:1px solid var(--g200)}
.receipt > div{
  display:flex;justify-content:space-between;gap:var(--s4);
  padding:12px 0;border-bottom:1px solid var(--g100);
  font-size:var(--fs-sm);color:var(--g700);
}
.receipt dt{margin:0}
.receipt dd{margin:0;color:var(--navy);font-weight:600;white-space:nowrap}
.receipt-sub{color:var(--g500)}
.receipt-total{border-bottom:0;padding-top:var(--s4);font-size:var(--fs-lg)}
.receipt-total dt{color:var(--navy);font-weight:700}
.receipt-total dd{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em}

/* A whole row that is itself a button - the address picker. */
button.list-row{width:100%;text-align:left;border:0;background:none;font:inherit;cursor:pointer}
button.list-row:hover{background:var(--g50)}

/* Choice cards: the radio sits inside a panel that is the whole target. */
.choice.panel{align-items:flex-start;cursor:pointer}
.choice.panel input{margin-top:2px}

/* ========================= 31 · JUSTIFIED BODY COPY ==================== */
/* Running text is justified. No line-counting is needed to honour "two lines or more":
   `justify` leaves the LAST line of a block ragged, and a one-line paragraph is nothing
   but a last line, so short text is untouched and only wrapped text is affected.

   Automatic hyphenation stays disabled so words always move intact to the next line. */
/* Editorial prose can justify; short interface copy must not stretch. */
.prose p,
.lead,
.result-desc,
.footer-note,
.note span,
.checklist li > span,
.timeline li > span,
.empty p,
.hint,
.msg-body {
  text-align: start;
  /* fall through to the exclusions below */
  text-align-last: start;
  hyphens: none;
 -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* Where justification fights the component it sits in: centred blocks, one-line
   metadata, controls, and anything whose width is set by its content. */
.center p, .center .lead, .center .hint, .empty p,
.hero-proof li, .hero-proof li > span,
.card-addr, .card-facts li, .result-facts li, .result-foot,
.list-row small, .list-row b, .agent-info small, .stat span,
.table td, .table th, .footer-legal, .footer-grid p,
.btn, .badge, .chip, .status, .label, .step span, .calendar-day, .slot,
.tabbar span, .media-count, .gallery-more, .map-note, .toast, .overline, .eyebrow,
/* Display type is never justified. A pull quote gets one or two lines at 25px, and
   justify has nowhere to put the slack except between the words. */
.pull p, .story-hero h1, .display, .h1, .h2, .h3 {
  /* `inherit`, not `initial`: inside a centred block these must stay centred, and
     `initial` resets to start and silently un-centres the closing call to action. */
  text-align: inherit;
  text-align-last: auto;
  hyphens: manual;
 -webkit-hyphens: manual;
}
/* The empty state is centred, so it keeps its own alignment. */
.empty p { text-align: center; }

/* Justification needs a measure to work with. In a three or four column grid a checklist
   item or a hint is only 30-40 characters wide, and stretching that opens gaps you can
   drive a bus through. Running prose in those cards still justifies; the short labelled
   lines do not. */
.g3 .checklist li > span, .g4 .checklist li > span,
.g5 .checklist li > span, .g3 .hint, .g4 .hint, .g5 .hint,
.filtercol .hint, .side-rail .checklist li > span, .side-rail .hint {
  text-align: inherit;
  hyphens: manual;
 -webkit-hyphens: manual;
}

/* ============================ 32 · RESPONSIVE ========================= */
/* Fluid containers preserve readable measures without fixed mobile widths. */
.wrap{width:100%;min-width:0}
main p,.note,.hint{overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
.prose p{ text-align:justify;text-align-last:start }
body[data-page="signin"] .narrow-sm{width:94%;max-width:42rem;padding-inline:0}
body[data-page="signin"] .panel--pad-lg{padding:clamp(1.25rem,5%,2.5rem)}
body[data-page="signin"] main p{text-align:start;text-align-last:auto}
body[data-page="signin"] .account-verify p,body[data-page="signin"] p.center{text-align:center}
body[data-page="signin"] .account-verify .account-verify-intro,body[data-page="signin"] .account-verify .account-inbox-copy,body[data-page="signin"] .account-verify .account-delivery-note{text-align:justify;text-align-last:start;hyphens:none;-webkit-hyphens:none;word-break:normal}
body[data-page="signin"] .h2{font-size:clamp(1.5rem,4.5vw,2rem);text-wrap:wrap}
body[data-page="signin"] .account-email{overflow-wrap:anywhere}
@media(max-width:640px){main .lead,main .prose p{text-align:start}.panel{min-width:0;max-width:100%}}
@media (max-width:1100px){
  .layout-search{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s5)}
  .filterpanel-grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:var(--s5)}
  .filtercol{border-right:0;padding-inline:var(--s3)}
  .filtercol:nth-child(4n+1){padding-left:0}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:960px){
  :root{--gutter:20px}
  .mainnav{display:none}
  /* Phones keep only the notification bell, 8px left of the burger. */
  .header-actions{margin-left:auto;margin-right:calc(var(--s2) - var(--s6))}
  .header-actions > :not(.notif){display:none}
  .burger{display:inline-flex;margin-left:0}
  .site-header .notif-menu{position:fixed;top:var(--header-h);left:var(--s4);right:var(--s4);width:auto;max-height:calc(100vh - var(--header-h) - 96px);overflow-y:auto}
  .hide-mobile{display:none!important}
  .hide-desktop{display:revert}
  .tabbar{display:block}
  body[data-tabbar=true]{padding-bottom:66px}

  .hero .wrap{grid-template-columns:1fr;padding-block:var(--s7) var(--s8);gap:var(--s6)}
  .hero-copy{max-width:none}
  .hero-media{aspect-ratio:16/10}
  .hero-float{display:none}

  /* The aside STACKS on narrow screens - it must never be hidden. On the property page it
     carries Apply and Book a viewing, so hiding it removed the primary action on mobile.
     There it moves above the body copy, which is where a phone user expects the price and CTA. */
  /* minmax(0,1fr), not 1fr: a bare 1fr floors at min-content, so a wide control inside
     the column pushes the whole page sideways instead of shrinking. */
  .layout-search,.layout-side{grid-template-columns:minmax(0,1fr)}
  .sticky,.sticky-cta{position:static}
  body[data-page="property"] .layout-search > .side-rail{order:-1}
  /* Paid and agent rails belong under the results, never above them. */
  body[data-page="search"] .layout-search > .side-rail{margin-top:var(--s6)}

  .search-fields{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .search-fields .field:first-child{grid-column:1 / -1}
  .search-fields .btn{grid-column:span 1}

  .result{grid-template-columns:minmax(0,44%) minmax(0,1fr)}
  .gallery-thumbs{display:none}
  .result-info{padding:var(--s4)}
  .result-price b{font-size:22px}

  .detail-gallery{grid-template-columns:1fr;grid-template-rows:1fr;aspect-ratio:4/3}
  .detail-gallery button:not(:first-child){display:none}
  .detail-gallery button:first-child{grid-row:auto}

  .g3,.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .section{padding-block:var(--s7)}
  .mapview{height:480px}
}

@media (max-width:640px){
  :root{--gutter:16px;--fs-h3:20px}
  .section{padding-block:var(--s6)}
  .section-head{flex-direction:column;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s5)}

  .search-tabs{gap:var(--s4);overflow-x:auto;scrollbar-width:none}
  .search-tabs::-webkit-scrollbar{display:none}
  .search-fields{grid-template-columns:1fr}
  .searchbar{padding:var(--s3)}

  .filterpanel-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--s4) var(--s3)}
  .filtercol{padding-inline:var(--s2)}
  .filtercol:nth-child(odd){padding-left:0}
  .filterpanel-foot{flex-direction:column;align-items:stretch}
  .filterpanel-foot .row{justify-content:space-between}

  .result{grid-template-columns:1fr}
  .gallery-main{aspect-ratio:4/3}
  .result-info{padding:var(--s4) var(--s4) var(--s5)}

  .toolbar{align-items:flex-start;gap:var(--s3)}
  .toolbar-right{width:100%;justify-content:space-between;flex-wrap:wrap;gap:var(--s2)}
  .toolbar-right .select{flex:1 1 140px;min-width:0}
  .toolbar-right > .btn{flex:1 1 100%;order:3}
  /* Hidden visually, not from the accessibility tree - it is the select's only label. */
  .sort-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .segmented{flex:none}

  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  .grid.g2--keep{grid-template-columns:1fr 1fr}
  .slots{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .footer-legal{flex-direction:column;gap:var(--s3)}
  .modal{max-height:92vh;border-radius:var(--r-lg)}
  .modal-foot{flex-direction:column-reverse}
  .modal-foot .btn{width:100%}
  .hero-cta .btn{width:100%}
  .stat b{font-size:26px}
  .mapview{height:60vh}
}

@media print{
  .site-header,.site-footer,.tabbar,.searchbar,.toolbar-right,.card-save{display:none!important}
  body{color:#000}
  .result,.panel,.card{break-inside:avoid;box-shadow:none}
}

/* Property location map uses the established Zany tokens. */
.property-map{position:relative;height:380px;overflow:hidden;border:1px solid var(--g200);border-radius:var(--r-lg);background-color:var(--g50)}
.property-map .property-map-canvas{position:absolute;inset:0}
.property-map-status{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s5);background-color:var(--g50);text-align:center;color:var(--navy);z-index:3}
.property-map-status[hidden],.property-map-controls[hidden]{display:none}
.property-map-controls{position:absolute;top:var(--s4);right:var(--s4);display:grid;gap:var(--s2);z-index:2}
.property-map-controls button{width:44px;height:44px;border:1px solid var(--g200);border-radius:var(--r-md);background-color:var(--white);color:var(--navy);font-size:24px;display:grid;place-items:center;cursor:pointer}
.property-map-controls button:hover{background-color:var(--blue-50);color:var(--blue)}
.property-map-controls button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.property-map-pin{width:24px;height:24px;border:4px solid var(--white);border-radius:50%;background-color:var(--blue);box-shadow:0 0 0 2px var(--navy)}
.property-map .maplibregl-ctrl-attrib{font:11px/1.5 var(--font);max-width:calc(100% - 16px)}

/* Shared navigation, concise homepage and article covers. */
.drawer-group{border-bottom:1px solid var(--g200);padding:var(--s2) 0}
.drawer-group summary{padding:var(--s3) 0;font-weight:600;color:var(--navy);cursor:pointer}
.drawer-group a{display:block;padding:var(--s2) var(--s3);font-size:var(--fs-sm)}
.home-search{padding-top:var(--s8);padding-bottom:var(--s6)}
.home-search h1{font-size:clamp(32px,4.5vw,52px);line-height:1.12;letter-spacing:-.025em;color:var(--navy);text-align:center}
.home-search>.lead{text-align:center;text-align-last:center;margin:var(--s3) 0 var(--s6);hyphens:none}
.home-search .searchbar{border:1px solid var(--g200);box-shadow:var(--sh1)}
.home-places{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s4);font-size:var(--fs-sm)}
.home-places a{color:var(--g600)}
.home-places a:hover{color:var(--blue)}
.home-listing-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding:var(--s6);border:1px solid var(--g200);border-radius:var(--r-lg);background-color:var(--blue-50)}
.home-listing-cta h2{margin-bottom:var(--s2)}
/* Home rails (owner request, 1 October). Five homes per row: four whole cards and 90% of the
   fifth, whose last 10% sits under a fade with the arrow over it. Each arrow click moves two
   homes (zany-search-pages.js). Narrower windows show fewer cards; phones swipe. */
.home-rail-wrap{position:relative}
.home-rail-wrap,.home-rail--loading{--rail-gap:var(--s5);--rail-card:calc((100% - 4 * var(--rail-gap)) / 4.9)}
.home-rail--loading{overflow:hidden}
.home-rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--rail-card);gap:var(--rail-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 0 10px}
.home-rail::-webkit-scrollbar{display:none}
.home-rail>.card{scroll-snap-align:start;min-width:0}
.home-rail-wrap::before,.home-rail-wrap::after{content:"";position:absolute;top:0;bottom:10px;width:calc(var(--rail-card) * .1 + var(--rail-gap));z-index:2;pointer-events:none;opacity:0;transition:opacity .2s}
.home-rail-wrap::after{right:0;background:linear-gradient(to right,rgba(252,252,252,0),var(--canvas) 70%)}
.home-rail-wrap::before{left:0;background:linear-gradient(to left,rgba(252,252,252,0),var(--canvas) 70%)}
.home-rail-wrap[data-more-right]::after,.home-rail-wrap[data-more-left]::before{opacity:1}
.home-rail-btn{position:absolute;top:calc(50% - 22px);z-index:3;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--g200);border-radius:50%;background-color:var(--white);color:var(--navy);box-shadow:var(--sh2);cursor:pointer}
.home-rail-btn:hover{border-color:var(--blue);color:var(--blue)}
.home-rail-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.home-rail-btn--next{right:0}
.home-rail-btn--prev{left:0}
.home-rail-btn[hidden]{display:none}
.home-rail-empty{padding:var(--s5) 0}
/* Owner request: five per row on every desktop width, so medium windows tighten the gap
   instead of dropping to three. */
@media (max-width:1099px){.home-rail-wrap,.home-rail--loading{--rail-gap:var(--s4)}}
@media (max-width:899px){.home-rail-wrap,.home-rail--loading{--rail-card:calc((100% - 2 * var(--rail-gap)) / 2.9)}}
@media (max-width:699px){.home-rail-wrap,.home-rail--loading{--rail-gap:var(--s3);--rail-card:82%}.home-rail-btn{display:none}}
@media (prefers-reduced-motion:reduce){.home-rail{scroll-behavior:auto}}
.story-hero.story-hero--blog{display:block;max-width:none;margin-bottom:var(--s8)}
.story-hero--blog h1{max-width:26ch}
.story-hero--blog .lede{max-width:72ch;text-align:left;margin:var(--s4) 0 var(--s5)}
.story-hero--blog>.art{width:100%;aspect-ratio:21/9;margin:0;overflow:hidden;border-radius:var(--r-lg)}
.story-hero--blog>.art img{width:100%;height:100%;object-fit:cover}
.onward-grid a{padding:0;overflow:hidden;gap:0;align-items:stretch}
.onward-grid a>.art{width:100%;aspect-ratio:16/9;margin:0;border-radius:0;flex:none}
.onward-grid a>.art img{width:100%;height:100%;object-fit:cover}
.onward-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s4);flex:1}
.onward-copy span{display:block}
@media(max-width:759px){
  .home-search{padding-top:var(--s6)}
  .home-search>.lead{font-size:var(--fs-base)}
  .home-listing-cta{align-items:flex-start;flex-direction:column;padding:var(--s5)}
  .story-hero--blog>.art{aspect-ratio:4/3}
}

body.drawer-is-open{overflow:hidden}

/* September visual refresh: brand tints distinguish surfaces and actions. (Briefly white on
   30 September while the canvas was light blue; restored with the neutral canvas.) */
.panel{background-color:var(--g50)}
.panel--soft{background-color:var(--g100)}
/* Property facts: one line each ("3 Beds", "BER A2"). They wrap two or four to a row rather
   than stretching full width on a narrower window. */
.fact-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--s3)}
.fact-tile{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);min-width:0;white-space:nowrap;font-size:var(--fs-sm);color:var(--g600)}
.fact-tile .ic{color:var(--blue);flex:none}
.fact-tile b{color:var(--navy);font-size:var(--fs-base);font-weight:700}
.btn-secondary{background-color:var(--blue-50);border-color:var(--blue-100);color:var(--blue-700)}
.btn-primary{box-shadow:var(--sh1)}
.btn{transition:background-color var(--t),box-shadow var(--t),transform var(--t)}
.card,.onward a,.room{transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.home-search{padding-top:var(--s5)}
.home-scene{min-height:280px;display:flex;align-items:center;justify-content:center;padding:var(--s6);border-radius:var(--r-lg);background-image:url('../images/zany-neighbourhood-hero.webp');background-size:cover;background-position:center}
.home-scene-copy{
  background-color:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
  border:1px solid rgba(255,255,255,.72);
  padding:var(--s5) var(--s6);border-radius:var(--r-md);
  box-shadow:0 10px 32px rgba(6,38,91,.16);max-width:100%;
}
.home-scene h1{font-size:clamp(28px,3.3vw,44px);text-align:center}
.home-scene .lead{text-align:center;text-align-last:center;margin:var(--s3) 0 0;hyphens:none}
.home-search .searchbar{margin-top:var(--s4)}
body[data-page="passport"]{background-color:var(--canvas)}
.passport-panel{background-color:var(--white);box-shadow:var(--sh1);scroll-margin-top:calc(var(--header-h) + var(--s5))}
.passport-overview{background-color:var(--blue-50);border-top:4px solid var(--blue)}
.passport-jumps{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5)}
.passport-jumps a{padding:var(--s3) var(--s4);background-color:var(--white);border:1px solid var(--g200);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;color:var(--blue-700)}
.passport-jumps a:hover{background-color:var(--blue-50);border-color:var(--light-blue)}
.passport-section-icon{color:var(--blue);background-color:var(--blue-50);padding:var(--s2);width:40px;height:40px;vertical-align:middle;margin-right:var(--s3);border-radius:var(--r-md)}
.passport-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.passport-check{background-color:var(--g50);border:1px solid var(--g200);border-radius:var(--r-md);padding:var(--s4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.passport-check>.row{width:100%}
.passport-check h3{font-size:var(--fs-base)}
.passport-check-dates{display:grid;gap:var(--s3);font-size:var(--fs-sm);margin:0}
.passport-check-dates dt{color:var(--g600);font-size:var(--fs-cap)}
.passport-check-dates dd{margin:var(--s1) 0 0;color:var(--navy)}
.passport-check>.btn{margin-top:auto}
body[data-page="passport"] .side-rail>.panel,body[data-page="passport"] .sticky-cta{background-color:var(--blue-50);border-color:var(--blue-100)}
body[data-page="passport"] .side-rail .panel--soft{background-color:var(--white)}
@media(hover:hover) and (pointer:fine){
 .card:hover,.onward a:hover,.room:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--light-blue)}
 .btn:hover{transform:translateY(-1px)}
 .btn:active{transform:translateY(0)}
}
@media(max-width:600px){
 .home-scene{min-height:240px;padding:var(--s4);background-position:60% center}
 .home-scene-copy{padding:var(--s4)}
 .home-scene .lead{font-size:var(--fs-base)}
 .passport-checks{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 .card,.onward a,.room,.btn{transition:none!important;transform:none!important}
}

.passport-panel h2:has(.passport-section-icon){display:flex;align-items:center}

/* Card navigation arrows sit in a reserved right-hand gutter, never an extra row. */
.room,.onward-grid>a{position:relative}
.room-copy{padding-right:var(--s6)}
.onward-copy{padding-right:calc(var(--s4) + var(--s6))}
.room>.card-corner-arrow,.onward-grid>a>.card-corner-arrow{position:absolute;right:var(--s4);bottom:var(--s4);margin:0;color:var(--blue)}
.landlord-hub{margin-bottom:var(--s9)}
.drawer-group summary>a{display:inline;padding:0;font-size:inherit}
@media(prefers-reduced-motion:reduce){.room>.ic,.onward-grid .ic{transition:none!important;transform:none!important}}

/* Published listing tiers: position is communicated by text and treatment, not colour alone. */
.card--premium,.result--premium{border-color:var(--blue);box-shadow:var(--sh-card),0 0 0 1px var(--blue-100)}
.card--featured,.result--featured{border:2px solid var(--featured-gold);background-color:var(--featured-gold-soft);box-shadow:var(--sh-card),0 0 0 2px var(--featured-gold-soft)}
.card--featured .card-body,.result--featured .result-info{background-color:var(--featured-gold-soft)}
.badge--featured-real{background-color:var(--featured-gold);color:var(--white)}
/* Compact cards (home rails, saved homes, related homes): smaller placement labels, so they do not
   cover the photo or the save button (owner request, 2 October). Search results keep their size. */
.card .badge-stack{top:8px;left:8px;gap:4px}
.card .badge-stack .badge{padding:3px 7px;font-size:11px;gap:4px}
.card .badge-stack .badge .ic{width:12px;height:12px}
.card .badge-stack .badge-promotion{font-size:9px;padding-left:4px;margin-left:0}
.badge-promotion{font-size:10px;font-weight:500;border-left:1px solid currentColor;padding-left:6px;margin-left:2px}
@media(hover:hover) and (pointer:fine){
 .card--featured:hover,.result--featured:hover{border-color:var(--featured-gold)}
 .card--premium:hover,.result--premium:hover{border-color:var(--blue)}
}
@media print{.card--featured,.result--featured,.card--premium,.result--premium{box-shadow:none}}

/* Featured result (owner request, 2 October): the card spans the results column, with the
   photos across the top and the details underneath. Premium and Standard keep the row. */
.result.result--wide{grid-template-columns:minmax(0,1fr);gap:0}
.result-photos{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--s2);aspect-ratio:10/3;min-width:0}
.result-photos .gallery{grid-row:1 / -1;min-height:0}
.result-photos .gallery-main{aspect-ratio:auto}
.result--wide .gallery-thumbs{display:contents}
.result--wide .gallery-thumb{aspect-ratio:auto;min-height:0;opacity:1}
/* Fewer photos, fewer tiles: no photo is repeated to fill the grid. */
.result-photos--1,.result-photos--2{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.result-photos--1 .gallery-thumb{grid-row:1 / -1}
.result-photos--3 .gallery-thumb:last-child{grid-column:span 2}
.result-photos--0{grid-template-columns:minmax(0,1fr);aspect-ratio:2/1}
.result--wide .result-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"summary detail save";align-items:start;gap:var(--s2) var(--s4);padding:var(--s4)}
.result-summary{grid-area:summary;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.result-price-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.result--wide .result-facts{gap:var(--s2) var(--s3)}
.result-detail{grid-area:detail;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.result--wide .result-save{grid-area:save}
.result--wide .result-foot{border-top:0;padding-top:0;margin-top:0;gap:var(--s2) var(--s4)}
@media (max-width:640px){
  .result-photos{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);aspect-ratio:4/3}
  .result--wide .gallery-thumbs{display:none}
  .result--wide .result-info{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"summary save" "detail detail";padding:var(--s4) var(--s4) var(--s5)}
}

/* Text navigation links keep their icon beside the label, including without .btn. */
a.btn-ghost:has(>.ic){display:inline-flex;align-items:center;gap:var(--s2);max-width:100%;vertical-align:middle}
a.btn-ghost>.ic{display:inline-block;flex-shrink:0}

/* Let editorial introductions use the available width instead of a fixed character cap. */
.story-hero--blog h1,.story-hero--blog .lede{max-width:none;width:100%}
.story-hero--blog .lede{hyphens:none;text-align:left;text-align-last:left}
.footer-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.footer-brand{grid-column:1/-1}
.footer-grid h2{font-size:var(--fs-sm);margin-bottom:var(--s3)}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}