/* ==========================================================================
   North West Properties — design system
   Tokens and components per the v2 design handoff.
   Square corners throughout (border-radius: 0) — intentional.
   ========================================================================== */

:root{
  /* Purple scale */
  --deep:#2E1A47;        /* headings, dark sections, logo mark, secondary buttons */
  --accent:#6C2BD9;      /* primary CTAs, links, eyebrow labels */
  --pressed:#4C1D95;     /* active button state */
  --hover:#5A1FBD;       /* primary button hover */
  --pale:#EFE8F8;        /* tinted sections, filter chips */
  --chip-text:#4C1D95;
  --light:#C9B4E8;       /* accent rules, muted text on dark */

  /* Neutrals */
  --page:#FBF9F5;
  --warm:#F3EFE8;
  --ink:#241A33;
  --body:#4A3F5E;
  --muted:#8A7FA0;
  --border:#E6E0D6;
  --field:#D8D0E4;
  --skeleton:#E9E4F0;

  /* Status */
  --error:#B3261E;
  --error-bg:#FDF6F5;
  --success:#1E7A55;
  --success-bg:#F1F9F5;
  --success-ink:#14523A;
  --success-body:#2C6B52;

  --shadow-float:0 12px 40px rgba(46,26,71,.22);
  --shadow-card:0 16px 48px rgba(0,0,0,.3);
  --t:120ms ease-out;
  --gutter:56px;
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color var(--t),background var(--t),border-color var(--t)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:'Source Serif 4',Georgia,serif;font-weight:600;color:var(--deep);margin:0;line-height:1.15}
p{margin:0}
ul{margin:0}

/* Focus — never removed. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.on-dark :focus-visible{outline-color:#fff}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--deep);color:#fff;padding:14px 20px;font-weight:700;
}
.skip-link:focus{left:0}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--accent)}
.eyebrow-dark{color:var(--light)}
.serif{font-family:'Source Serif 4',Georgia,serif}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;background:var(--page);
  border-bottom:1px solid var(--border);transition:padding var(--t);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px;transition:padding var(--t)}
.site-header.is-stuck .wrap{padding-top:9px;padding-bottom:9px}
.site-header.is-stuck .logo-sub{display:none}
.site-header.is-stuck .logo-mark{width:38px;height:38px;font-size:18px}

.logo{display:flex;align-items:center;gap:14px;flex-shrink:0}
.logo-mark{
  width:46px;height:46px;background:var(--deep);color:var(--page);
  display:flex;align-items:center;justify-content:center;
  font-family:'Source Serif 4',Georgia,serif;font-size:22px;font-weight:600;letter-spacing:.5px;
  flex-shrink:0;transition:width var(--t),height var(--t),font-size var(--t);
}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-name{font-family:'Source Serif 4',Georgia,serif;font-size:19px;font-weight:600;color:var(--deep)}
.logo-sub{font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted)}

.nav{display:flex;align-items:center;gap:22px;font-size:14.5px;font-weight:500}
.nav a{color:var(--ink);padding-bottom:4px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nav a[aria-current="page"]{font-weight:700;color:var(--deep);border-bottom-color:var(--deep)}
.nav .phone-btn{
  background:var(--deep);color:var(--page);padding:11px 20px;font-weight:600;
  border-bottom:0;white-space:nowrap;
}
.nav .phone-btn:hover{background:var(--hover);color:#fff}

.header-mobile{display:none;align-items:center;gap:8px}
.icon-btn{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:#fff;color:var(--deep);
}
.icon-btn:hover{background:var(--pale)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:150;background:var(--deep);color:var(--page);
  padding:16px;display:none;flex-direction:column;gap:4px;overflow-y:auto;
}
.drawer[data-open="true"]{display:flex}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}
.drawer-top .serif{font-size:17px;font-weight:600;color:var(--page)}
.drawer-close{width:48px;height:48px;border:1px solid rgba(255,255,255,.3);color:var(--page);display:flex;align-items:center;justify-content:center;font-size:19px}
.drawer a.drawer-link{
  font-size:17px;font-weight:600;color:var(--page);
  padding:15px 0;border-top:1px solid rgba(255,255,255,.15);min-height:48px;display:flex;align-items:center;
}
.drawer a.drawer-link:last-of-type{border-bottom:1px solid rgba(255,255,255,.15)}
.drawer-actions{display:flex;flex-direction:column;gap:10px;padding-top:18px}
.drawer-actions .btn{text-align:center;padding:16px}
.drawer-actions .btn-ghost{border:1.5px solid rgba(255,255,255,.5);color:var(--page);font-weight:700;padding:15px}
.drawer-actions .btn-ghost:hover{background:rgba(255,255,255,.1)}

/* The mobile hero is a separate composition, hidden until the breakpoint. */
.hero-mobile{display:none}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;
  padding:15px 26px;min-height:48px;text-align:center;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.btn:hover{background:var(--hover);color:#fff}
.btn:active{background:var(--pressed)}
.btn[disabled],.btn.is-disabled{background:var(--field);color:#fff;cursor:default;pointer-events:none}

.btn-secondary{background:transparent;border:1.5px solid var(--deep);color:var(--deep);padding:14px 26px}
.btn-secondary:hover{background:var(--deep);color:var(--page)}
.btn-secondary:active{background:var(--pressed);border-color:var(--pressed)}

/* Quiet outline button. Used all over the back office and by the mobile
   drawer, but never defined — every "ghost" button rendered as a solid
   accent-filled one, so Edit/View/Cancel shouted as loudly as Save.
   The drawer's own .drawer-actions .btn-ghost is more specific and still wins. */
.btn-ghost{
  background:transparent;border:1.5px solid var(--field);color:var(--deep);
  font-weight:600;
}
.btn-ghost:hover{background:var(--pale);border-color:var(--accent);color:var(--deep)}
.btn-ghost:active{background:var(--light)}

.btn-block{display:flex;width:100%}
.btn-deep{background:var(--deep);color:var(--page)}
.btn-deep:hover{background:var(--pressed);color:#fff}
/* Blocks that exist only in the mobile references. */
.mobile-only{display:none}
.btn-sm{padding:10px 18px;font-size:13.5px;min-height:44px}

.link{color:var(--accent);font-weight:700;border-bottom:2px solid transparent;display:inline-block}
.link:hover{color:var(--deep);border-bottom-color:var(--deep)}

/* ==========================================================================
   Forms
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:5px}
.field > label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{
  border:1px solid var(--field);background:#fff;padding:14px;
  font-family:inherit;font-size:15px;color:var(--ink);width:100%;
  min-height:48px;transition:border-color var(--t),box-shadow var(--t);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);outline:2px solid var(--light);outline-offset:0;
}
.field.has-error > label{color:var(--error)}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border:1.5px solid var(--error);background:var(--error-bg);
}
.field-error{font-size:13px;color:var(--error);font-weight:600}
.field-hint{font-size:13px;color:var(--muted);line-height:1.5}

.form-success{
  border:1px solid var(--success);background:var(--success-bg);
  padding:16px;display:flex;flex-direction:column;gap:4px;
}
.form-success strong{font-size:15px;font-weight:700;color:var(--success-ink)}
.form-success span{font-size:14px;color:var(--success-body);line-height:1.55}

.form-stack{display:flex;flex-direction:column;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.form-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding:56px 0}
.section-lg{padding:72px 0}
.section-alt{background:var(--warm)}
.section-tint{background:var(--pale)}
.section-dark{background:var(--deep);color:var(--page)}
.section-dark h1,.section-dark h2,.section-dark h3{color:var(--page)}
.section-dark p{color:var(--light)}

/* A cream panel sitting inside a dark section keeps dark text — without this the
   headings inherit the section's light colour and disappear into the card. */
.panel-light{background:var(--page);color:var(--ink)}
.section-dark .panel-light h1,
.section-dark .panel-light h2,
.section-dark .panel-light h3{color:var(--deep)}
.section-dark .panel-light p{color:var(--body)}
.section-dark .panel-light .field > label{color:var(--muted)}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.section-head h2{font-size:34px}
.lede{font-size:17px;line-height:1.65;color:var(--body);max-width:60ch}
.section-dark .lede{color:var(--light)}

/* ==========================================================================
   Property cards
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-results{gap:30px 26px}
.cards-results .pc-photo{height:218px;aspect-ratio:auto}
.cards-results .pc-price{font-size:22px}
.prop-card{
  display:flex;flex-direction:column;gap:12px;background:transparent;border:0;
  transition:border-color var(--t);
}
.prop-card:hover .pc-price,.prop-card:hover h3{color:var(--accent)}
.prop-card h3{transition:color var(--t)}
.pc-photo{position:relative;aspect-ratio:4/3;background:var(--skeleton);overflow:hidden}
.pc-photo img{width:100%;height:100%;object-fit:cover}
.pc-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.pc-status{
  position:absolute;top:12px;left:12px;background:var(--deep);color:#fff;
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;padding:5px 10px;font-weight:700;
}
/* Availability sits in the same corner but reads as information, not a warning. */
.pc-avail{
  position:absolute;top:12px;left:12px;background:var(--page);color:var(--deep);
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;padding:5px 10px;font-weight:700;
}
.pc-new{
  position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;padding:5px 10px;
}
.pc-count{
  position:absolute;bottom:14px;right:14px;background:rgba(36,26,51,.82);color:#fff;
  font-size:12px;font-weight:600;padding:5px 10px;
}
.pc-body{padding:0;display:flex;flex-direction:column;gap:5px}
.pc-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pc-price{font-family:'Source Serif 4',Georgia,serif;font-size:20px;font-weight:600;color:var(--deep);transition:color var(--t)}
.pc-tag{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pc-title{font-size:15.5px;font-weight:600;color:var(--ink)}
.pc-desc{font-size:14px;line-height:1.55;color:var(--body)}
.pc-meta{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}

/* ==========================================================================
   Filters, chips, sort
   ========================================================================== */
/* Filter chips are the one rounded element in the system — deliberate, per the reference. */
.chip{
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  background:var(--pale);color:var(--chip-text);font-size:13px;font-weight:600;
  padding:6px 12px;min-height:32px;
}
.chip button{color:var(--chip-text);font-size:15px;line-height:1;padding:4px;min-width:24px;min-height:24px}
.chip button:hover{color:var(--deep)}
.chip-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.clear-all{font-size:13.5px;font-weight:700;color:var(--accent);border-bottom:2px solid transparent}
.clear-all:hover{color:var(--deep);border-bottom-color:var(--deep)}

.results-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:20px}
.result-count{font-size:15px;color:var(--body)}
.view-toggle{display:flex;border:1px solid var(--border)}
.view-toggle a{padding:11px 18px;font-size:13.5px;font-weight:600;color:var(--body);min-height:44px;display:flex;align-items:center}
.view-toggle a[aria-current="true"]{background:var(--deep);color:#fff}
.view-toggle a:not([aria-current="true"]):hover{background:var(--pale);color:var(--chip-text)}

/* Desktop: the search bar overlaps the hero. Mobile resets this. */
.search-wrap{margin-top:-44px;position:relative;z-index:2}

.filter-bar{
  background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-float);
  display:grid;grid-template-columns:repeat(5,1fr) auto;align-items:stretch;
}
.filter-bar .field{padding:10px 18px;border-right:1px solid var(--border);gap:2px;justify-content:center}
.filter-bar .field:last-of-type{border-right:0}
.filter-bar .field input,.filter-bar .field select{border:0;padding:2px 0;min-height:auto;font-weight:600}
.filter-bar .field input:focus,.filter-bar .field select:focus{outline:2px solid var(--light);outline-offset:2px}
.filter-bar .btn{padding:16px 28px}

.filter-bar-dark{
  background:rgba(255,255,255,.18);border:0;box-shadow:none;
  grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:1px;
}
.filter-bar-dark .field{background:var(--page);border-right:0;padding:13px 16px}
.filter-bar-dark .field > label{font-size:10px;letter-spacing:1.5px}
.filter-bar-dark .field select,.filter-bar-dark .field input{font-size:14.5px;font-weight:600;background:var(--page)}
.filter-bar-dark .btn{padding:0 32px}

/* Sort control in the results bar. */
.sort-form{display:flex;align-items:center;gap:8px}
.sort-form label{font-size:13px;color:var(--muted)}
.sort-form select{
  font-family:inherit;font-size:14px;font-weight:600;
  border:1px solid var(--border);background:#fff;padding:8px 14px;min-height:44px;
}

/* Foot of the results list: pagination plus the register nudge. */
.results-more{display:flex;flex-direction:column;align-items:center;gap:16px;padding:36px 0 8px;text-align:center}
.results-more .note{font-size:13.5px;color:var(--muted);line-height:1.6}
.results-more .note a{font-weight:600;color:var(--accent)}
.results-more .note a:hover{color:var(--deep)}

.mode-toggle{display:flex;border-right:1px solid var(--border)}
.mode-toggle button{flex:1;padding:0 20px;font-size:13.5px;font-weight:600;color:var(--muted);min-height:48px}
.mode-toggle button[aria-pressed="true"]{background:var(--deep);color:#fff}

.filters-btn{display:none}
.results-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.results-bar{padding-top:18px;padding-bottom:18px}

/* Mobile-only: the current search in words, sitting under the dark filter bar. */
.search-summary{display:none}
.h1-tail{display:inline}

/* ==========================================================================
   Skeletons
   ========================================================================== */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.skeleton{background:var(--skeleton);animation:pulse 1.4s ease-in-out infinite}
.sk-card{display:flex;flex-direction:column;gap:9px}
.sk-photo{aspect-ratio:4/3}
.sk-line{height:10px}
.sk-line-lg{height:14px}

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty{
  border:1px solid var(--border);background:#fff;padding:34px;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.empty h2{font-size:24px}
.empty p{font-size:15px;line-height:1.65;color:var(--body);max-width:52ch}
.empty-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:8px}

/* ==========================================================================
   Map view
   ========================================================================== */
.map-layout{display:grid;grid-template-columns:420px 1fr;gap:0;border:1px solid var(--border);height:620px}
.map-list{overflow-y:auto;background:#fff;border-right:1px solid var(--border)}
.map-list .prop-card{
  border-bottom:1px solid var(--border);flex-direction:row;gap:14px;
  padding:14px 20px;align-items:flex-start;
}
.map-list .pc-photo{flex:0 0 118px;height:88px;aspect-ratio:auto}
.map-list .pc-body{padding:0;gap:3px}
.map-list .ml-title{font-family:'Source Serif 4',Georgia,serif;font-size:16px;font-weight:600;color:var(--deep);line-height:1.25}
.map-list .ml-meta{font-size:12.5px;color:var(--muted)}
.map-list .ml-price{font-family:'Source Serif 4',Georgia,serif;font-size:17px;font-weight:600;color:var(--ink)}
/* Active card: accent rule under it and a tint, matching the map reference. */
.map-list .prop-card.is-active{background:#F7F2FD;border-bottom:2px solid var(--accent)}
.map-list .map-note{padding:16px 20px;font-size:13px;color:var(--muted);line-height:1.6}
.map-canvas{position:relative;background:var(--warm)}
.map-canvas .leaflet-container{height:100%;width:100%;background:var(--warm)}
.map-tiles{filter:grayscale(1) contrast(.9) brightness(1.05)}
.map-pin{
  background:var(--accent);color:#fff;font-size:13px;font-weight:700;
  padding:7px 11px;white-space:nowrap;box-shadow:0 2px 8px rgba(46,26,71,.35);
}
.map-pin.is-raised{background:var(--deep);transform:scale(1.08)}
.map-cluster{
  background:var(--deep);color:#fff;font-size:13px;font-weight:700;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
}
.map-search-area{
  position:absolute;left:16px;bottom:16px;z-index:500;
  background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-float);
  padding:12px 18px;font-size:13.5px;font-weight:600;color:var(--deep);min-height:48px;
  display:flex;align-items:center;gap:8px;
}
.map-search-area:hover{background:var(--pale)}

/* ==========================================================================
   Property detail
   ========================================================================== */
.breadcrumb{font-size:13px;color:var(--muted);padding:18px 0 0}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .here{color:var(--ink)}

/* Utility row above the gallery: back link left, listing actions right. */
.detail-actions{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 0;font-size:13px;color:var(--muted);flex-wrap:wrap;
}
.da-back{color:var(--accent);font-weight:600}
.da-back:hover{color:var(--deep)}
.da-tools{display:flex;gap:18px;align-items:center}
.da-tool{
  color:var(--accent);font-weight:600;font-size:13px;padding:0;
  background:none;border:0;border-bottom:2px solid transparent;
}
.da-tool:hover{color:var(--deep);border-bottom-color:var(--deep)}
.da-tool[aria-pressed="true"]{color:var(--deep)}
.da-tool[aria-pressed="true"]::before{content:"\2713\00a0"}

.gallery{display:grid;grid-template-columns:2.1fr 1fr;grid-template-rows:196px 196px;gap:8px}
.gallery .g-main{grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.g-more{position:relative;cursor:pointer;border:0;padding:0;display:block}
/* Stacked "+11 / photos" plate, per the reference. */
.g-more .overlay{
  position:absolute;inset:0;background:rgba(46,26,71,.66);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;
}
.g-more .ov-n{font-family:'Source Serif 4',Georgia,serif;font-size:26px;font-weight:600;line-height:1.1}
.g-more .ov-l{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase}
.g-more-mobile{display:none}
.all-photos{display:none;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:8px}
.all-photos.open{display:grid}
.all-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:pointer}

.detail{display:grid;grid-template-columns:1.6fr 1fr;gap:52px;align-items:start;padding:34px 0 56px}
.detail-main{display:flex;flex-direction:column;gap:28px}
.detail-head{display:flex;flex-direction:column;gap:8px}
.detail-main h1{font-size:35px}
.detail-addr{font-size:14.5px;color:var(--muted)}
.detail-sub{font-size:16px;color:var(--body)}

/* Four bordered cells, micro-label above value. The 1px gap on a bordered
   container is what draws the hairlines between cells. */
.facts-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);
}
.fact{background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.fact-label{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.fact-value{font-size:16px;font-weight:600;color:var(--ink)}

.facts{
  display:flex;gap:28px;flex-wrap:wrap;padding:18px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  font-size:14.5px;font-weight:600;
}
.facts .sep{color:var(--border)}
.detail-main h2{font-size:22px}
.body-copy p{font-size:15.5px;line-height:1.7;color:var(--body);margin-bottom:12px}
/* Reference uses a pale accent rule down the left of each feature, not a dash. */
.features{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;font-size:15px;color:var(--body);list-style:none;padding:0}
.features li{padding-left:16px;border-left:2px solid var(--light);line-height:1.5}

.sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.price-card{background:var(--deep);color:var(--page);padding:30px 32px;display:flex;flex-direction:column;gap:6px}
.price-card .big{font-family:'Source Serif 4',Georgia,serif;font-size:34px;font-weight:600}
.price-card .pcm{font-size:14px;color:var(--light)}
.side-card{background:#fff;border:1px solid var(--border);padding:26px 30px 30px;display:flex;flex-direction:column;gap:12px}
.side-card h2,.side-card h3{font-size:20px}
.side-call{font-size:13px;color:var(--muted);text-align:center}
.side-call strong{color:var(--ink);font-weight:700}

/* "Renting through us" — the three commitments the footer already carries. */
.trust-card{background:var(--pale);padding:22px 26px;display:flex;flex-direction:column;gap:10px}
.trust-card .eyebrow{font-size:10.5px;letter-spacing:2px}
.trust-list{display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.5;color:var(--body)}

/* Similar homes: price-first card, shorter photo band than the results grid. */
.similar-card{background:#fff;border:1px solid var(--border);gap:0}
.similar-card:hover{border-color:var(--accent)}
.similar-card .sc-photo{height:160px;background:var(--skeleton);overflow:hidden}
.similar-card .sc-photo img{width:100%;height:100%;object-fit:cover}
.sc-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:5px}
.sc-price{font-family:'Source Serif 4',Georgia,serif;font-size:18px;font-weight:600;color:var(--deep);transition:color var(--t)}
.similar-card:hover .sc-price{color:var(--accent)}
.sc-meta{font-size:14px;font-weight:600;color:var(--ink)}
.sc-desc{font-size:13px;color:var(--body);line-height:1.5}


/* ==========================================================================
   Page composition blocks
   Shared by landlords, services, tenants, about, contact, for-sale and
   construction — each of those references is built from these same pieces.
   ========================================================================== */

/* Edge-to-edge two-panel band. The panels bleed to the viewport edges; the
   inner padding does the work the .wrap gutter normally would. */
.split{
  display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;
  max-width:var(--max);margin:0 auto;   /* line the panels up with .wrap */
}
.split-even{grid-template-columns:1fr 1fr}
.split-105{grid-template-columns:1.05fr 1fr}
.split-img-left{grid-template-columns:1fr 1.1fr;min-height:360px}
.split-panel{padding:64px 52px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.split-panel-sm{padding:52px 48px;gap:18px}
.split-dark{background:var(--deep);color:var(--page)}
.split-dark h1,.split-dark h2,.split-dark h3{color:var(--page)}
.split-dark p{color:#D5CCE4}
.split-tint{background:var(--pale)}
.split-warm{background:var(--warm)}
.split-img-right{grid-template-columns:1.1fr 1fr;min-height:420px}
.split > img{width:100%;height:100%;object-fit:cover;display:block}
.split-photo{background:var(--skeleton);min-height:360px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}

/* Accent-ruled bullet list. --light rule on pale grounds, accent on dark. */
.rule-list{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;margin:0}
.rule-list li{font-size:15px;line-height:1.5;padding-left:16px;border-left:2px solid var(--light);color:var(--body)}
.split-dark .rule-list li{color:var(--page);border-left-color:var(--accent)}
.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;list-style:none;padding:0;margin:0}
.rule-grid li{font-size:14.5px;line-height:1.5;padding-left:15px;border-left:2px solid var(--light);color:var(--body)}
.split-dark .rule-grid li,.section-dark .rule-grid li{color:var(--page);border-left-color:var(--accent)}

/* Dark band of four headline facts. */
.stat-band{background:var(--deep);padding:42px 0}
.stat-band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.stat{display:flex;flex-direction:column;gap:6px}
.stat-v{font-family:'Source Serif 4',Georgia,serif;font-size:32px;font-weight:600;color:var(--page);line-height:1.1}
.stat-l{font-size:14px;line-height:1.55;color:var(--light)}

/* Columns divided by a rule across the top rather than a card border. */
.topline{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;list-style:none;padding:0;margin:0}
.topline-2{grid-template-columns:repeat(2,1fr)}
.topline-4{grid-template-columns:repeat(4,1fr);gap:28px}
.topline > li,.topline > div{display:flex;flex-direction:column;gap:9px;padding-top:18px;border-top:2px solid var(--deep);list-style:none}
.topline h3,.topline .t{font-family:'Public Sans',sans-serif;font-size:17px;font-weight:700;color:var(--deep);line-height:1.35}
.topline p,.topline .d{font-size:15px;line-height:1.65;color:var(--body)}

/* Segmented choice — radios that look like one control. */
.seg-legend{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600}
.segmented{display:flex;gap:1px;background:var(--field);border:1px solid var(--field)}
.segmented input{position:absolute;opacity:0;width:1px;height:1px}
.segmented label{
  flex:1;background:#fff;text-align:center;font-size:14px;font-weight:600;
  padding:12px 6px;cursor:pointer;min-height:46px;
  display:flex;align-items:center;justify-content:center;transition:background var(--t),color var(--t);
}
.segmented label:hover{background:var(--pale)}
.segmented input:checked + label{background:var(--deep);color:#fff}
.segmented input:focus-visible + label{outline:3px solid var(--accent);outline-offset:-3px}

/* Closing row: statement left, actions right, separated by a hairline. */
.foot-row{padding:50px 0;border-top:1px solid var(--border)}
.foot-row .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-row .copy{display:flex;flex-direction:column;gap:6px;max-width:620px}
.foot-row .copy .h{font-family:'Source Serif 4',Georgia,serif;font-size:26px;font-weight:600;color:var(--deep)}
.foot-row .copy p{font-size:15.5px;line-height:1.6;color:var(--body)}
.foot-row .actions{display:flex;gap:12px;flex:0 0 auto;flex-wrap:wrap}

/* Intro paragraph block above a grid of columns. */
.block-head{display:flex;flex-direction:column;gap:8px;max-width:720px}
.block-head h2{font-size:30px;line-height:1.15}
.block-head p{font-size:16px;line-height:1.68;color:var(--body)}
.section-dark .block-head p{color:var(--light)}


/* Five-step hairline grid (tenants). Same hairline trick as .facts-grid. */
.step-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);border:1px solid var(--border);list-style:none;padding:0;margin:0}
.step-grid-4{grid-template-columns:repeat(4,1fr)}
.step-cell{background:#fff;padding:24px 20px;display:flex;flex-direction:column;gap:8px}
.step-num{font-family:'Source Serif 4',Georgia,serif;font-size:28px;font-weight:600;color:var(--light);line-height:1}
.step-name{font-size:15.5px;font-weight:700;color:var(--deep)}
.step-desc{font-size:13.5px;line-height:1.6;color:var(--body)}

/* Tenants page layout: the process spans, then copy left / cards right. */
.tenants-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:start}
.tenants-layout .t-process{grid-column:1 / -1;display:flex;flex-direction:column;gap:30px}
.t-main{display:flex;flex-direction:column;gap:18px}
.t-side{display:flex;flex-direction:column;gap:16px}

/* Tinted callout box. */
.note-box{background:var(--pale);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.note-box .h{font-size:16.5px;font-weight:700;color:var(--deep)}
.note-box p{font-size:14.5px;line-height:1.6;color:var(--body)}
.emergency{font-size:13px;line-height:1.55;color:var(--muted);border-top:1px solid var(--border);padding-top:12px}
.emergency strong{color:var(--ink)}


/* About / contact odds and ends. */
.stat-band-3 .wrap{grid-template-columns:repeat(3,1fr);gap:40px}
.tint-band{background:var(--pale);padding:40px 0}
.tint-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.tint-band .h{font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:600;color:var(--deep)}
.tint-band .actions{display:flex;gap:12px;flex:0 0 auto;flex-wrap:wrap}

.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:start}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.contact-col{display:flex;flex-direction:column;gap:26px}
.contact-block{display:flex;flex-direction:column;gap:4px}
.contact-label{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);font-weight:700}
.contact-addr{font-size:17px;line-height:1.5;color:var(--ink);font-style:normal}
.contact-phone{font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:600;color:var(--deep)}
.contact-email{font-size:17px;color:var(--accent);font-weight:600;word-break:break-word}
.contact-email:hover{color:var(--deep)}
.contact-pair{display:flex;gap:40px;flex-wrap:wrap}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;font-size:15px;color:var(--body)}
.hours dt{margin:0}
.hours dd{margin:0;font-weight:600;color:var(--ink)}

/* Map slot. A real embed needs a key, so this is the address plus a working link. */
.map-slot{
  height:300px;background:#E4DFEC;border-top:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;
}
.map-slot .m1{font-size:15px;font-weight:700;color:#6B6478}
.map-slot .m2{font-size:13.5px;color:var(--muted);max-width:52ch;line-height:1.6}


/* Photographic hero with a left-to-right scrim, per construction.html. */
.hero-shot{position:relative;max-width:var(--max);margin:0 auto}
.hero-shot > img,.hero-shot > .ph{width:100%;height:400px;object-fit:cover;display:block;background:var(--skeleton)}
.hero-shot .scrim{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:56px;
  background:linear-gradient(to right,rgba(46,26,71,.94) 0%,rgba(46,26,71,.72) 55%,rgba(46,26,71,.35) 100%);
}
.hero-shot h1{font-size:46px;line-height:1.08;color:var(--page);max-width:700px}
.hero-shot p{font-size:17px;line-height:1.65;color:#D5CCE4;max-width:560px}
.hero-shot .actions{display:flex;gap:12px;padding-top:4px;flex-wrap:wrap}
.btn-ghost-light{border:1.5px solid rgba(251,249,245,.6);color:var(--page);background:transparent;font-weight:700}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);color:var(--page)}

/* Two-column hairline grid of categories. */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);list-style:none;padding:0;margin:0}
.cat-cell{background:#fff;padding:28px 26px;display:flex;flex-direction:column;gap:8px}
.cat-cell .t{font-size:17.5px;font-weight:700;color:var(--deep)}
.cat-cell .d{font-size:15px;line-height:1.65;color:var(--body)}

/* Form fields sitting on the dark panel. */
.on-dark-form .field > label{color:var(--light)}
.on-dark-form .field input,.on-dark-form .field select,.on-dark-form .field textarea{
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:var(--page);
}
.on-dark-form .field input::placeholder,.on-dark-form .field textarea::placeholder{color:#B79FE0}
.on-dark-form .field input:focus,.on-dark-form .field textarea:focus{outline-color:#fff;background:rgba(255,255,255,.12)}
.on-dark-form .field-error{color:#F0B8B4}

/* Slot for the before/after photography this page is waiting on. */
.photo-slot{
  background:#E4DFEC;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;
}
.photo-slot .p1{font-size:15px;font-weight:700;color:#6B6478}
.photo-slot .p2{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:320px}

/* Homepage proof band. Four facts on desktop, three on mobile — the classes
   carry the layout so the media query can actually hide the fourth. */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.proof-item{display:flex;flex-direction:column;gap:6px}
.proof-v{font-size:34px;font-weight:600;color:var(--page)}
.proof-d{font-size:14px;line-height:1.55;color:var(--light)}

/* ==========================================================================
   Content blocks
   ========================================================================== */
.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.info-card{background:#fff;border:1px solid var(--border);padding:30px 32px 34px;display:flex;flex-direction:column;gap:10px}
.info-card h3{font-size:20px}
.info-card p{font-size:14.5px;line-height:1.65;color:var(--body)}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:step}
.step{display:flex;flex-direction:column;gap:10px}
.step-n{
  width:38px;height:38px;background:var(--pale);color:var(--chip-text);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
.step h3{font-size:16.5px;font-family:'Public Sans',sans-serif;font-weight:700;color:var(--ink)}
.step p{font-size:14px;line-height:1.6;color:var(--body)}

/* Comparison table, per services.html: an open grid ruled with hairlines,
   no outer box, with the recommended column tinted. Kept as a real <table>
   so the columns are still announced properly. */
.compare{width:100%;border-collapse:collapse;background:transparent;border:0;border-top:2px solid var(--deep)}
.compare th,.compare td{text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.compare thead th{padding:18px 20px;background:transparent}
.compare thead th:first-child{padding-left:0}
.compare thead th.is-pick{background:var(--pale)}
.compare .col-name{display:block;font-family:'Source Serif 4',Georgia,serif;font-size:19px;font-weight:600;color:var(--deep)}
.compare .col-note{display:block;font-size:12.5px;color:var(--muted);font-weight:500;padding-top:2px}
.compare .col-note.is-pick{color:var(--accent);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.compare tbody th{padding:15px 20px 15px 0;font-size:15px;font-weight:400;color:var(--ink)}
.compare tbody td{padding:15px 20px;font-size:15px;font-weight:600;color:var(--deep)}
.compare tbody td.is-pick{background:#F7F2FD}
.compare tbody td.no{color:var(--muted);font-weight:400}
.compare tfoot td{padding:22px 20px;border-bottom:0}
.compare tfoot td.is-pick{background:var(--pale)}
.compare tfoot .btn{width:100%;padding:13px 0;font-size:14.5px}

/* Numbered process rows: big faint numeral, the step, and an aside. */
.process{display:flex;flex-direction:column}
.process-row{
  display:grid;grid-template-columns:88px 1fr 300px;gap:36px;align-items:start;
  padding:40px 0;border-bottom:1px solid var(--border);
}
.process-row:first-child{padding-top:0}
.process-row:last-child{border-bottom:0;padding-bottom:0}
.process-n{font-family:'Source Serif 4',Georgia,serif;font-size:46px;font-weight:300;color:var(--light);line-height:1}
.process-body{display:flex;flex-direction:column;gap:10px}
.process-body h2{font-size:27px}
.process-body p{font-size:15.5px;line-height:1.7;color:var(--body);max-width:520px}
.process-aside{font-size:14px;line-height:1.6;color:var(--muted);padding-top:6px}

.band{
  background:var(--deep);color:var(--page);padding:56px 0;
}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.band h2{font-size:28px;color:var(--page)}
.band p{font-size:15.5px;line-height:1.6;color:var(--light);max-width:560px}
.band-copy{display:flex;flex-direction:column;gap:10px}

.checklist{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.checklist li{display:flex;gap:12px;font-size:15px;line-height:1.6;color:var(--body)}
.checklist li::before{content:"✓";color:var(--success);font-weight:700;flex-shrink:0}

.slot{
  border:1px dashed var(--field);color:var(--muted);
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
  padding:16px 20px;text-align:center;
}
.slot-dark{border-color:rgba(255,255,255,.4);color:var(--light)}

.legal-copy{max-width:70ch}
.legal-copy h2{font-size:22px;margin:32px 0 10px}
.legal-copy p,.legal-copy li{font-size:15.5px;line-height:1.7;color:var(--body)}
.legal-copy li{margin-bottom:8px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--deep);color:var(--page);padding:44px 0 30px;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-brand .fb-top{display:flex;align-items:center;gap:12px}
.footer-brand .logo-mark{width:42px;height:42px;background:var(--page);color:var(--deep);font-size:20px}
.footer-brand .fb-name{font-family:'Source Serif 4',Georgia,serif;font-size:17px;font-weight:600;color:var(--page);line-height:1.2}
.footer-brand address{font-style:normal;font-size:14px;line-height:1.7;color:var(--light)}
.footer-brand .fb-contact{font-size:14px;line-height:1.7;color:var(--page);font-weight:600}
.footer-brand .fb-contact a:hover{color:var(--light)}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h2{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);font-weight:700;font-family:'Public Sans',sans-serif}
.footer-col a{font-size:14px;color:var(--page);min-height:24px;display:flex;align-items:center}
.footer-col a:hover{color:var(--light)}
.footer-mobile{display:none}
.footer-legal{
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding-top:22px;margin-top:34px;border-top:1px solid rgba(255,255,255,.18);
}
.footer-legal p{font-size:12.5px;line-height:1.7;color:var(--light)}
.scheme-slots{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ==========================================================================
   Sticky mobile action bar (Homepage, Landlords, Property detail)
   ========================================================================== */
.action-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:#fff;border-top:1px solid var(--border);
  padding:10px 16px;gap:10px;box-shadow:0 -6px 24px rgba(46,26,71,.12);
}
.action-bar .btn{flex:1;padding:14px 8px;font-size:14px;white-space:nowrap}

/* Bottom sheet (mobile filters) */
.sheet-backdrop{position:fixed;inset:0;background:rgba(36,26,51,.5);z-index:160;display:none}
.sheet-backdrop[data-open="true"]{display:block}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:170;background:#fff;
  padding:16px 16px 24px;display:none;flex-direction:column;gap:16px;max-height:86vh;overflow-y:auto;
}
.sheet[data-open="true"]{display:flex}
.sheet-head{display:flex;align-items:center;justify-content:space-between}
.sheet-head h2{font-size:20px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  :root{--gutter:32px}
  .nav{gap:16px;font-size:14px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .map-layout{grid-template-columns:340px 1fr}
}

/* Narrow laptops and tablets — the seven-item nav plus the phone button needs
   about 1080px of header. Below that it pushed the whole page sideways (the
   header overflowed by 78px at 901px even before "Contact" was added), so the
   drawer takes over earlier than the 900px mobile composition does. Everything
   else on the page stays desktop down to 900px. */
@media (max-width:1080px){
  .nav{display:none}
  .header-mobile{display:flex;gap:8px}
}

/* ==========================================================================
   Mobile — built against the 390px references, which are a different
   composition to desktop rather than a stacked version of it.
   ========================================================================== */
@media (max-width:900px){
  :root{--gutter:16px}
  .nav{display:none}
  .header-mobile{display:flex;gap:8px}
  .site-header .wrap{padding:12px 16px}
  .logo{gap:9px}
  .logo-mark{width:34px;height:34px;font-size:16px}
  .logo-name{font-size:15px;line-height:1.1;max-width:9ch}
  .logo-sub{display:none}
  .icon-btn.is-menu{background:var(--deep);color:var(--page);border-color:var(--deep)}

  /* hero: photograph with a bottom-up gradient, text sitting on it */
  .hero-desktop{display:none}
  .hero-mobile{display:block;position:relative}
  .hero-mobile img{width:100%;height:260px;object-fit:cover}
  .hero-mobile .overlay{
    position:absolute;inset:0;padding:22px 16px;gap:8px;
    background:linear-gradient(to top,rgba(46,26,71,.92) 0%,rgba(46,26,71,.35) 100%);
    display:flex;flex-direction:column;justify-content:flex-end;
  }
  .hero-mobile h1{font-size:27px;line-height:1.14;color:var(--page)}
  .hero-mobile .eyebrow{font-size:10px;letter-spacing:2px}

  /* search: dark block under the hero */
  .search-wrap{margin:0;padding:0}
  .filter-bar{
    display:flex;flex-direction:column;gap:10px;
    background:var(--deep);padding:16px;box-shadow:none;border:0;
  }
  .filter-bar .mode-toggle{display:flex;gap:1px;background:rgba(255,255,255,.2);border:0}
  .filter-bar .mode-toggle button{
    flex:1;background:rgba(255,255,255,.1);color:#D5CCE4;
    font-size:14px;font-weight:600;min-height:48px;padding:14px;
  }
  .filter-bar .mode-toggle button[aria-pressed="true"]{background:var(--page);color:var(--deep);font-weight:700}
  .filter-bar .field{padding:0;border:0;gap:0}
  .filter-bar .field > label{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  .filter-bar .field select,.filter-bar .field input{
    background:var(--page);border:0;padding:13px 14px;font-size:15px;min-height:48px;font-weight:500;
  }
  .filter-bar .btn{padding:16px;font-size:16px;width:100%}

  /* featured: horizontal scroller, 260px cards, 170px photos */
  .cards.scroller{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none;
  }
  .cards.scroller::-webkit-scrollbar{display:none}
  .cards.scroller .prop-card{flex:0 0 260px;scroll-snap-align:start}
  .cards.scroller .pc-photo{height:170px;aspect-ratio:auto}
  .cards.scroller h3{font-size:17px;line-height:1.25}
  .cards.scroller .pc-price{font-size:19px}

  /* proof band: stacked, three items */
  .proof-grid{grid-template-columns:1fr;gap:20px}
  .proof-v{font-size:26px}
  .proof-d{font-size:13.5px}
  .proof-band .serif{font-size:26px}
  .proof-extra{display:none}

  /* simplified mobile footer */
  .site-footer{background:var(--warm);color:var(--body);padding:20px 16px 88px}
  .site-footer .footer-grid,.site-footer .scheme-slots{display:none}
  .site-footer .footer-legal{margin:0;padding:0;border:0;flex-direction:column;gap:6px;align-items:flex-start}
  .site-footer .footer-legal p{font-size:12.5px;line-height:1.7;color:var(--muted)}
  .footer-mobile{display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.7;color:var(--muted)}
  .footer-mobile strong{font-size:14px;font-weight:700;color:var(--ink)}

  .section{padding:40px 0}
  .section-lg{padding:48px 0}
  .section-head h2{font-size:26px}
  .cards,.cards-2,.info-cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:24px}

  /* The dark search grid is replaced by a summary line plus the bottom sheet. */
  /* Only the results-page variant is replaced by the bottom sheet; the
     homepage hero search stays, restyled as the dark stacked block above. */
  .filter-bar-dark{display:none}
  .h1-tail{display:none}
  .search-summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:var(--page);padding:14px;font-size:15px;
  }
  .search-summary span{color:var(--ink);font-weight:600;line-height:1.35}
  .search-summary button{color:var(--accent);font-weight:700;flex-shrink:0;padding:4px}

  /* Filters / Sort / Map as one row, then the count and chips beneath it. */
  .results-bar{flex-direction:column-reverse;align-items:stretch;gap:10px;padding-top:12px;padding-bottom:12px}
  .results-tools{display:grid;grid-template-columns:1fr 1fr 76px;gap:8px;align-items:stretch}
  .filters-btn{display:flex;padding:13px 8px;font-size:14px;white-space:nowrap;min-width:0}
  .sort-form{gap:0}
  .sort-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sort-form select{width:100%;padding:13px 8px;min-height:0;font-size:14px}
  .view-toggle{border:0}
  .view-toggle .vt-list{display:none}
  .view-toggle a{
    flex:1;justify-content:center;background:var(--deep);color:var(--page);
    font-size:14px;font-weight:700;padding:13px 8px;min-height:0;
  }
  .chip-row{font-size:12.5px}
  .cards-results .pc-photo{height:210px}

  .detail{grid-template-columns:1fr;gap:28px;padding:24px 0 48px}
  .detail-main{gap:24px}
  .detail-main h1{font-size:27px}
  .sidebar{position:static}
  .features{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr;grid-template-rows:240px}
  .gallery .g-main{grid-row:auto}
  .gallery > *:nth-child(n+2){display:none}
  .all-photos{grid-template-columns:1fr 1fr}
  .g-more-mobile{
    display:flex;align-items:center;justify-content:center;width:100%;
    margin-top:8px;padding:14px;min-height:48px;
    border:1.5px solid var(--deep);color:var(--deep);font-size:14.5px;font-weight:700;
  }
  .g-more-mobile:hover{background:var(--deep);color:var(--page)}

  /* Back link on its own line, tools underneath. */
  .detail-actions{padding:12px 0;gap:10px}
  .da-back{flex:0 0 100%}
  .da-tools{gap:16px}
  .similar-card .sc-photo{height:190px}

  .map-layout{grid-template-columns:1fr;height:auto}
  .map-list{max-height:none;border-right:0}
  .map-canvas{height:340px;order:-1}

  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:18px}

  .band .wrap{flex-direction:column;align-items:flex-start}

  /* Composition blocks stack; panel padding drops to the mobile gutter. */
  .split,.split-even,.split-105,.split-img-left{grid-template-columns:1fr}
  .split-panel{padding:30px 16px;gap:16px}
  .split-panel-sm{padding:26px 16px;gap:14px}
  .split-panel h1{font-size:30px}
  .split-panel h2{font-size:23px}
  .split-panel p{font-size:15.5px}
  .split-img-left{min-height:0}
  .split > img,.split-photo{min-height:0;height:220px}
  .rule-list li{font-size:14.5px;padding-left:14px}
  .stat-band{padding:26px 0}
  .stat-band .wrap{grid-template-columns:1fr 1fr;gap:20px}
  .stat-v{font-size:24px}
  .topline,.topline-2,.topline-4{grid-template-columns:1fr;gap:16px}
  .topline > li,.topline > div{padding-top:14px}
  .topline h3,.topline .t{font-size:16px}
  .topline p,.topline .d{font-size:14.5px}
  .rule-grid{grid-template-columns:1fr}
  .block-head h2{font-size:23px}
  .block-head p{font-size:15px}
  .foot-row{padding:26px 0}
  .foot-row .wrap{flex-direction:column;align-items:stretch;gap:18px}
  .foot-row .copy .h{font-size:21px}
  .foot-row .actions .btn{flex:1;justify-content:center}
  .segmented label{font-size:13.5px;padding:14px 4px}

  /* Tenants: the repair card moves to the top — a leak is the urgent case. */
  .tenants-layout{display:flex;flex-direction:column;gap:26px}
  .t-side{order:-1}
  .tenants-layout .t-process{gap:16px}
  .step-grid,.step-grid-4{grid-template-columns:1fr;gap:14px;background:transparent;border:0}
  .step-cell{background:transparent;padding:0;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start}
  .step-num{font-size:24px;font-weight:300;grid-row:span 2}
  .step-name{grid-column:2}
  .step-desc{grid-column:2;font-size:14px}
  .note-box{padding:18px 16px}
  .stat-band-3 .wrap{grid-template-columns:1fr;gap:18px}
  .tint-band{padding:24px 0}
  .tint-band .wrap{flex-direction:column;align-items:stretch;gap:14px}
  .tint-band .h{font-size:21px}
  .tint-band .actions .btn{flex:1;justify-content:center}
  .contact-grid,.two-col{grid-template-columns:1fr;gap:28px}
  .contact-pair{gap:24px}
  .map-slot{height:220px}
  .hero-shot > img,.hero-shot > .ph{height:340px}
  .hero-shot .scrim{padding:24px 16px;gap:12px;background:linear-gradient(to top,rgba(46,26,71,.95) 0%,rgba(46,26,71,.7) 100%)}
  .hero-shot h1{font-size:28px}
  .hero-shot p{font-size:15px}
  .hero-shot .actions{flex-direction:column;align-items:stretch}
  .cat-grid{grid-template-columns:1fr;gap:14px;background:transparent;border:0}
  .cat-cell{padding:14px 0 0;border-top:2px solid var(--deep)}
  .cat-cell .t{font-size:16px}
  .cat-cell .d{font-size:14.5px}
  .photo-slot{padding:26px 16px;min-height:180px}
  .split-img-right{grid-template-columns:1fr;min-height:0}
  .mobile-only{display:block}
  a.btn.mobile-only{display:flex}
  .cards.scroller h3{font-size:17px}
  .cards.scroller .pc-price{font-size:19px}
  .section-head h2{font-size:22px}
  .section-head .link{display:none}

  /* Process: number sits inline above the step rather than in its own column. */
  .process-row{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .process-n{font-size:32px}
  .process-body h2{font-size:20px}
  .process-body p{font-size:14.5px}
  .process-aside{padding-top:2px;font-size:13.5px}

  /* Comparison becomes stacked blocks — a 3-col table cannot work at 390px. */
  .compare,.compare thead,.compare tbody,.compare tfoot,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare{border-top:0}
  .compare thead{display:none}
  .compare tbody tr{padding:14px 0;border-bottom:1px solid var(--border)}
  .compare tbody th{padding:0 0 8px;font-weight:700;color:var(--deep);font-size:15px}
  .compare tbody td{padding:3px 0 3px 14px;border:0;font-size:14.5px;position:relative}
  .compare tbody td.is-pick{background:transparent}
  .compare tbody td::before{content:attr(data-col) " — ";color:var(--muted);font-weight:600}
  .compare tfoot td{padding:10px 0 0}
  .compare tfoot td.is-pick{background:transparent}
  .form-row,.form-row-3,.form-row-4{grid-template-columns:1fr}

  .has-action-bar{padding-bottom:76px}
  .action-bar{display:flex}
}

@media (max-width:560px){
  .detail-main h1{font-size:24px}
  .footer-grid{grid-template-columns:1fr}
  .facts{gap:14px;font-size:13.5px}
  .all-photos{grid-template-columns:1fr}
  .fact{padding:13px 14px}
  .fact-value{font-size:15px}
  .section-head{margin-bottom:20px}
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  .site-header,.site-footer,.action-bar,.sidebar,.drawer{display:none}
  body{background:#fff}
}

/* ==========================================================================
   Back office
   --------------------------------------------------------------------------
   The admin pages referenced these classes from the first build but nothing
   ever defined them, so the whole back office rendered as unstyled HTML.
   Written 10 September 2026 against the same tokens as the public site.

   Deliberately NOT a second design system: same fonts, same square corners,
   same 48px touch targets. The one difference is the page ground — the back
   office sits on --warm rather than --page so it is obvious at a glance which
   side of the site you are looking at.
   ========================================================================== */

.admin-body{
  background:var(--warm);color:var(--ink);
  font-family:'Public Sans','Helvetica Neue',Arial,sans-serif;
  margin:0;-webkit-font-smoothing:antialiased;
}

/* ---- Top bar ---- */
.admin-bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  background:var(--deep);color:var(--page);
  padding:12px 24px;
}
.ab-logo{
  display:flex;align-items:center;gap:11px;
  font-family:'Source Serif 4',Georgia,serif;font-size:17px;font-weight:600;
  color:var(--page);white-space:nowrap;
}
.ab-logo .logo-mark{
  width:32px;height:32px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;letter-spacing:.5px;flex-shrink:0;
}
.admin-bar nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.admin-bar nav a{
  color:var(--light);font-size:14px;font-weight:500;
  padding:9px 13px;min-height:40px;display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;transition:color var(--t),background var(--t);
}
.admin-bar nav a:hover{color:var(--page);background:rgba(255,255,255,.08)}
.admin-bar nav a.on{color:#fff;font-weight:700;border-bottom-color:var(--accent)}

/* ---- Page frame ---- */
.admin-wrap{max-width:1180px;margin:0 auto;padding:28px 24px 72px}
.admin-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-bottom:22px;
}
.admin-head h1{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:27px;font-weight:600;color:var(--deep);margin:0;line-height:1.2;
}
.admin-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ---- Sign-in ---- */
.login-card{
  max-width:400px;margin:9vh auto 0;background:#fff;
  border:1px solid var(--border);box-shadow:var(--shadow-card);
  padding:34px 30px;display:flex;flex-direction:column;gap:18px;
}
.login-card h1{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:24px;font-weight:600;color:var(--deep);margin:0;
}
.login-card p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0}

/* Plain bordered input, used where there is no .field wrapper. */
.input{
  border:1px solid var(--field);background:#fff;padding:14px;width:100%;
  font-family:inherit;font-size:15px;color:var(--ink);min-height:48px;
  transition:border-color var(--t),outline-color var(--t);
}
.input:focus{border-color:var(--accent);outline:2px solid var(--light);outline-offset:0}

/* ---- Forms ----
   The admin markup writes <label class="field"><span>Label</span><input>,
   where the public site writes <label> inside .field. Style the span to match
   so both spellings produce the same eyebrow. */
.admin-form{
  background:#fff;border:1px solid var(--border);
  padding:26px;display:flex;flex-direction:column;gap:17px;
}
.field > span{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.hint{
  letter-spacing:0;text-transform:none;font-weight:500;
  color:var(--muted);font-size:12.5px;
}
.field > .hint{
  /* .field > span is 0,1,1 and beats a bare .hint, which left every hint
     rendering as uppercase tracked-out label text. Restate it here. */
  margin-top:2px;line-height:1.5;
  letter-spacing:0;text-transform:none;font-weight:500;font-size:12.5px;
}
.check{
  display:flex;align-items:flex-start;gap:11px;
  font-size:14.5px;line-height:1.5;color:var(--body);cursor:pointer;
}
.check input[type=checkbox]{
  width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);flex-shrink:0;cursor:pointer;
}

/* ---- Flashes ---- */
.flash{
  background:var(--success-bg);border-left:3px solid var(--success);
  color:var(--success-ink);font-size:14.5px;line-height:1.55;
  padding:14px 16px;margin:0 0 20px;
}
.flash-error{
  background:var(--error-bg);border-left-color:var(--error);color:var(--error);
}

/* ---- Counters ---- */
.stat-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);margin-bottom:26px;
}
.stat-card{background:#fff;padding:18px 20px;display:flex;flex-direction:column;gap:3px}
.stat-card .n{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:29px;font-weight:600;color:var(--deep);line-height:1;
}
.stat-card .l{font-size:12.5px;color:var(--muted);font-weight:500}

/* ---- Tables ---- */
.listing-table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--border);font-size:14.5px;
}
.listing-table th{
  text-align:left;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted);font-weight:600;
  padding:13px 14px;border-bottom:1px solid var(--border);background:var(--page);
  white-space:nowrap;
}
.listing-table td{padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.listing-table tr:last-child td{border-bottom:0}
.listing-table tbody tr:hover{background:var(--page)}
.listing-table select{
  border:1px solid var(--field);background:#fff;padding:8px 10px;
  font-family:inherit;font-size:13.5px;color:var(--ink);min-height:40px;
}
.listing-table select:focus{border-color:var(--accent);outline:2px solid var(--light)}
.lt-thumb{
  width:62px;height:46px;object-fit:cover;display:block;
  background:var(--pale);border:1px solid var(--border);
}
.lt-title{font-weight:600;color:var(--deep);line-height:1.35}
.lt-sub{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}

/* ---- Chips ---- */
.chip-rent{background:var(--pale);color:var(--deep)}
.chip-sale{background:var(--warm);color:var(--body)}
.chip-new{background:var(--accent);color:#fff}

/* ---- Row actions ---- */
.row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.row-actions form{margin:0}
.btn-danger{
  background:transparent;color:var(--error);border:1.5px solid var(--error);font-weight:600;
}
.btn-danger:hover{background:var(--error);color:#fff}

/* ---- Enquiries ---- */
.enq-card{
  display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;
  background:#fff;border:1px solid var(--border);
  padding:18px 20px;margin-bottom:12px;
}
.enq-card.unread{border-left:3px solid var(--accent)}
.enq-meta{font-size:13px;color:var(--muted);margin-bottom:6px;line-height:1.5}
.enq-body{
  font-size:14.5px;line-height:1.65;color:var(--body);
  margin-top:9px;padding-top:9px;border-top:1px solid var(--border);
  white-space:pre-wrap;
}

/* ---- Photo manager ---- */
.photo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.photo-item{position:relative;border:1px solid var(--border);background:#fff}
.photo-item img{width:100%;height:112px;object-fit:cover;display:block}
.main-tag{
  position:absolute;top:0;left:0;
  background:var(--deep);color:var(--page);
  font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;font-weight:600;
  padding:4px 9px;
}
.ph-actions{display:flex;border-top:1px solid var(--border)}
.ph-actions form{flex:1;margin:0;display:flex}
.ph-actions button{
  flex:1;background:#fff;color:var(--body);border:0;
  border-right:1px solid var(--border);
  font-family:inherit;font-size:14px;min-height:40px;cursor:pointer;
  transition:background var(--t),color var(--t);
}
.ph-actions form:last-child button{border-right:0}
.ph-actions button:hover:not([disabled]){background:var(--pale);color:var(--deep)}
.ph-actions button[disabled]{color:var(--field);cursor:default}

/* ---- Empty state ---- */
.empty-state{
  border:1px dashed var(--field);background:#fff;
  padding:34px;text-align:center;color:var(--muted);font-size:14.5px;
}

/* ---- Narrow screens ----
   Tariq adds properties from a phone as often as from the office desk, so the
   table drops its photo column and the counters go two-up rather than four. */
@media (max-width:900px){
  .admin-bar{padding:10px 16px}
  .admin-wrap{padding:20px 16px 60px}
  .admin-head h1{font-size:23px}
  .stat-cards{grid-template-columns:repeat(2,1fr)}
  .admin-form{padding:20px 17px}
  .listing-table{display:block;overflow-x:auto;white-space:nowrap}
  .login-card{margin-top:5vh;padding:28px 22px}
}
@media (max-width:560px){
  .admin-bar nav a{padding:8px 10px;font-size:13.5px}
  .listing-table th:first-child,.listing-table td:first-child{display:none}
  .enq-card{padding:16px}
}