/* ==========================================================================
   ATLAS — site stylesheet
   Brand: Navy #0D1B2A / Gold #C8A06A / Cream #E6E2D7 / White
   Typeface: Montserrat (Google Fonts), generous letter-spacing on headings
   ========================================================================== */

:root {
  --navy: #0D1B2A;
  --navy-soft: #16283C;
  --gold: #C8A06A;
  --gold-dark: #B28A54;
  --cream: #E6E2D7;
  --cream-light: #F4F2EC;
  --white: #FFFFFF;
  --body: #4A5568;
  --muted: #9AA3AF;
  --border: #DDD8CB;
  --radius: 6px;
  --shadow: 0 6px 24px rgba(13, 27, 42, 0.10);
  --tracking: 0.08em;
  --tracking-wide: 0.18em;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--cream-light);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: var(--tracking);
  line-height: 1.25;
  text-transform: uppercase;
}

h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.1rem; }

p { margin-bottom: 1rem; }

a { color: var(--gold-dark); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.container {
  width: min(1140px, 92%);
  margin-inline: auto;
}

section { padding: 4rem 0; }

/* Property Search results section — less top padding than the sitewide
   default, so the gap above the "N results" count roughly matches the gap
   below it (results-count's own margin-bottom, see further down this file)
   rather than the much larger default 4rem. Scoped to this section only —
   don't change the base `section` rule above, every other page's spacing
   depends on it. */
.listing-section { padding-top: 2rem; }

.section-kicker {
  display: block;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-header-row .btn { flex-shrink: 0; }
.section-header-row h2 { margin-bottom: 0; }

@media (max-width: 560px) {
  .section-header-row { align-items: flex-start; }
  .section-header-row .btn { width: 100%; text-align: center; }
}

.section-intro { max-width: 640px; margin-bottom: 2.25rem; }

.gold-rule {
  width: 56px;
  height: 3px;
  background: var(--gold);
  border: 0;
  margin: 1rem 0 1.5rem;
}

.gold-rule.centred { margin-inline: auto; }
.text-centre { text-align: center; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* AA contrast rule: navy text on gold, never white */
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover, .btn-gold:focus { background: var(--gold-dark); color: var(--navy); text-decoration: none; }

.btn-outline-cream { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-outline-cream:hover, .btn-outline-cream:focus { background: var(--cream); color: var(--navy); text-decoration: none; }

.btn-outline-navy { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-navy:hover, .btn-outline-navy:focus { background: var(--navy); color: var(--cream); text-decoration: none; }

.btn-navy { background: var(--navy); color: var(--cream); }
.btn-navy:hover, .btn-navy:focus { background: var(--navy-soft); color: var(--white); text-decoration: none; }

.btn-block { display: block; width: 100%; text-align: center; }

/* ---- Header / navigation ---- */
.site-header-wrap { position: sticky; top: 0; z-index: 100; }

.site-header {
  background: var(--navy);
  border-bottom: 1px solid rgba(200, 160, 106, 0.35);
}

/* Utility bar (tel/email/register/report-a-repair) above the main nav.
   Collapses away once the page is scrolled (.is-scrolled, toggled by
   assets/js/animations.js) so the sticky nav below it takes over the
   full header height — desktop only, mobile already has its own
   call/valuation bar + chat bubble, no room for a third strip. */
.topbar {
  background: var(--navy-soft);
  color: var(--cream);
  border-bottom: 1px solid rgba(200, 160, 106, 0.2);
  overflow: hidden;
  max-height: 44px;
  transition: max-height 0.3s ease, opacity 0.25s ease, border-color 0.3s ease;
}
.site-header-wrap.is-scrolled .topbar { max-height: 0; opacity: 0; border-bottom-color: transparent; }

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  font-size: 0.78rem;
}
.topbar-contact, .topbar-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--cream); }
.topbar a:hover { color: var(--gold); text-decoration: none; }
.topbar svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--gold); }

@media (max-width: 900px) {
  .topbar { display: none; }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1.25rem;
  padding: 0.9rem 0;
}

.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand-icon { height: 34px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-word {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: var(--tracking-wide);
  color: var(--cream);
}
.brand-sub {
  font-size: 0.6rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.1rem;
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  /* Narrowed from 1.1rem — Luke wanted the nav bar less wide overall,
     2026-07-12. Smaller gap + smaller link font-size below buy back room
     without the items feeling squeezed. */
  gap: 0.8rem;
}

.site-nav a:not(.btn) {
  display: block;
  color: var(--cream);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn):focus {
  color: var(--gold);
  text-decoration: none;
}

.site-nav a.is-active { border-bottom-color: var(--gold); color: var(--gold); }

.site-nav .nav-cta { margin-left: 0.2rem; padding: 0.55rem 0.85rem; font-size: 0.66rem; white-space: nowrap; }

/* Small "Client Portal" caption under the MyAtlas nav link — sitewide,
   2026-07-12. Tight line-height on the link itself (body copy's 1.65
   default was leaving a big gap under "MyAtlas" before the caption even
   started) plus a small negative margin on the caption — condensed
   2026-07-12 per Luke's follow-up. */
.nav-item-stacked { text-align: center; line-height: 1.1; }
.nav-sublabel {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: -0.05rem;
}
.site-nav a.nav-item-stacked:hover .nav-sublabel,
.site-nav a.nav-item-stacked:focus .nav-sublabel { color: var(--gold); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  color: var(--cream);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Hero: full-bleed rotating photo background, content overlaid on top ---- */
.hero {
  background: var(--navy); /* fallback while images load / if none are set */
  color: var(--cream);
  padding: 6.5rem 0 6rem;
  min-height: 100vh;
  min-height: 100svh; /* mobile-browser-chrome-aware, falls back to 100vh above */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--cream);
  opacity: 0.85;
}
.hero-scroll-cue span {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.hero-scroll-cue svg { width: 18px; height: 18px; animation: hero-scroll-bounce 1.8s ease-in-out infinite; }
@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (max-width: 640px) { .hero-scroll-cue { display: none; } }

.hero-bg { position: absolute; inset: 0; z-index: 0; }

.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-bg-slide.is-active { opacity: 1; }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Even wash across the whole photo (rather than the old left-heavy
     fade) — needed now the text sits centred over the middle of the
     image instead of hugging the left edge, so it stays readable
     wherever the photo itself is lighter. */
  background: rgba(13, 27, 42, 0.5);
}

.hero-inner { position: relative; z-index: 2; }

/* Text is centred in the container, over the middle of the photo —
   matches the Elvins Estate Agents reference Luke supplied 2026-07-12. */
.hero-copy { max-width: 780px; margin-inline: auto; text-align: center; }

.hero h1 {
  color: var(--white);
  margin-bottom: 1.25rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
}

.hero-heading-accent { color: var(--gold); }

.hero .hero-tagline {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero p.lede {
  color: var(--cream);
  font-size: 1.05rem;
  max-width: 620px;
  margin-inline: auto;
  /* Reworded 2026-07-27 into 3 separate <p class="lede"> paragraphs (was
     one <p> with <br> line-breaks) so a deliberate gap can sit between
     each — Luke wanted the 2-line middle paragraph to read as visually
     distinct from the single-line ones either side of it. The middle
     paragraph's own line break is now forced right after "approach"
     (not left to wrap naturally after "every"), which splits it into two
     more evenly-balanced lines instead of stranding a short 2-3 word
     line. text-wrap: pretty asks supporting browsers (Safari 17.4+,
     Chrome 117+) to rebalance any further wrap on narrow screens. */
  text-wrap: pretty;
}

/* Deliberate gap between the 3 lede paragraphs — roughly 1.5x the site's
   base paragraph spacing (p { margin-bottom: 1rem }) — so the 2-line
   middle paragraph reads as its own distinct block. */
.hero p.lede + p.lede { margin-top: 1.5rem; }

.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }

.hero-ctas .btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
}

.btn-translucent {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(230, 226, 215, 0.5);
  color: var(--cream);
  backdrop-filter: blur(2px);
}
.btn-translucent:hover, .btn-translucent:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--cream);
  color: var(--white);
  text-decoration: none;
}

/* ---- Page banner (inner pages) — solid navy; only the homepage hero uses a photo background ---- */
.page-banner {
  background-color: var(--navy);
  color: var(--cream);
  padding: 3.25rem 0;
}

.page-banner h1 { color: var(--white); }
.page-banner p { color: var(--cream); max-width: 620px; margin: 0.75rem 0 0; }

/* ---- Key features (6-card grid) ---- */
.features-section { background: var(--white); padding: 3rem 0 2.5rem; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2.5rem;
}

.feature-card { display: flex; gap: 1rem; align-items: flex-start; }

.feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--cream-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon svg { width: 22px; height: 22px; color: var(--gold-dark); }

.feature-card h3 { font-size: 1.02rem; margin: 0 0 0.3rem; color: var(--navy); }
.feature-card p { font-size: 0.88rem; color: var(--muted); margin: 0; }

@media (max-width: 860px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ---- Property cards ---- */
/* Fixed 3-across layout (not auto-fill) so the grid always reads as 3
   columns on desktop regardless of available width, matching Luke's
   reference. Steps down to 2, then 1, on narrower screens. */
.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .property-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .property-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

.property-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
  position: relative;
}

.property-card:hover { transform: translateY(-4px); }

.property-card .card-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.property-card .card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-photo-link { position: absolute; inset: 0; display: block; }

/* Media bar (bottom-left of the card photo): a Rightmove-style strip
   showing photo count plus icons for floorplan/virtual tour, whichever
   this listing actually has. Sits opposite the Featured/Let Agreed badge
   (top-left) so the two never collide. */
.card-media-bar {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(13, 27, 42, 0.74);
  color: var(--white);
  padding: 0.28rem 0.55rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}
.card-media-item { display: flex; align-items: center; gap: 0.25rem; }
.card-media-icon { width: 13px; height: 13px; flex-shrink: 0; }
.card-media-divider { width: 1px; height: 11px; background: rgba(255, 255, 255, 0.35); }
.card-media-count { font-variant-numeric: tabular-nums; }

/* Prev/next arrows overlaid on the card photo — scroll through that
   listing's photos without leaving the search results, same idea as
   Rightmove's in-card gallery arrows. Only rendered (in JS) when a
   listing has more than one photo. */
.card-photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.88);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(13, 27, 42, 0.25);
  padding: 0;
}
.card-photo-nav svg { width: 13px; height: 13px; }
.card-photo-nav.prev { left: 0.5rem; }
.card-photo-nav.next { right: 0.5rem; }
.card-photo-nav:hover { background: var(--white); }

.badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
}

.badge-let-agreed { background: var(--navy); color: var(--cream); }

/* Dim the photo slightly on Let Agreed cards — a common, honest visual cue
   that a listing is no longer available without hiding it from the list. */
.property-card.is-let-agreed .card-photo img { filter: grayscale(30%); opacity: 0.82; }

.property-card .card-body { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; flex: 1; }

.property-card .card-price {
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 700;
}
.property-card .card-price span { font-size: 0.75rem; font-weight: 500; color: var(--muted); }

.property-card h3 {
  font-size: 0.88rem;
  margin: 0.35rem 0 0.2rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

.property-card .card-address { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.7rem; }

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  font-size: 0.75rem;
  color: var(--body);
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  margin-top: auto;
}

.card-meta li { list-style: none; display: flex; align-items: center; gap: 0.3rem; }
.card-meta strong { color: var(--navy); }
.card-meta .meta-icon { width: 13px; height: 13px; color: var(--gold-dark); flex-shrink: 0; }

.property-card .card-link {
  margin-top: 0.9rem;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* Featured-listing emphasis */
.property-card.is-featured { border: 2px solid var(--gold); }

/* ---- Filters bar ---- */
/* ---- Property search: banner search bar + sidebar filters ---- */
.search-banner-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--white);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  max-width: 640px;
  margin-top: 1.5rem;
  box-shadow: var(--shadow);
}

.search-banner-box svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--muted); }

.search-banner-box input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1rem;
  font-family: inherit;
  color: var(--navy);
  background: transparent;
}

/* ---- Search widget: Classic / AI Search toggle ---- */
.search-widget { margin-top: 1.5rem; }
.search-widget .search-banner-box { margin-top: 0.75rem; }
.search-tabs {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background: rgba(13, 27, 42, 0.35);
  border: 1px solid rgba(230, 226, 215, 0.4);
  border-radius: 999px;
  padding: 0.25rem;
  gap: 0.25rem;
  max-width: 100%;
}
.search-tab {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  background: transparent;
  color: var(--cream);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.search-tab svg {
  display: block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  flex-shrink: 0;
}
.search-tab:hover { color: var(--white); }
.search-tab.is-active { background: var(--white); color: var(--navy); }
.search-tab.is-active svg { color: var(--gold-dark); }
.search-banner-box-ai { max-width: 720px; }
.search-banner-box-ai input { min-width: 0; }
.search-banner-box-ai .btn { flex-shrink: 0; text-transform: none; letter-spacing: 0; }
.ai-search-hint { color: var(--cream); font-size: 0.82rem; margin-top: 0.6rem; max-width: 640px; opacity: 0.9; }
.ai-search-summary { margin-top: 0.75rem; font-size: 0.85rem; color: var(--body); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ai-search-chip {
  display: inline-block;
  background: var(--cream-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  color: var(--navy);
  font-weight: 500;
}
/* On the white/navy page banners (properties.html), the hint text needs
   the darker on-navy treatment above; on white sections it's overridden
   back to a muted colour. */
.white-section .ai-search-hint,
.cream-section .ai-search-hint { color: var(--muted); }

/* ---- Hero search card (homepage only) ---- */
.hero-search-card {
  margin-top: 2rem;
  max-width: 640px;
  background: rgba(13, 27, 42, 0.55);
  border: 1px solid rgba(230, 226, 215, 0.35);
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
  backdrop-filter: blur(4px);
}
.hero-search-card .search-banner-box { max-width: none; }

.search-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-top: 2.5rem;
}

.filters-sidebar {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  position: sticky;
  top: 90px;
}

.filters-sidebar-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  margin: 0 0 1.25rem;
  color: var(--navy);
}

.filters-sidebar-title svg { width: 18px; height: 18px; color: var(--gold-dark); }

@media (max-width: 860px) {
  .search-layout { grid-template-columns: 1fr; margin-top: 1.5rem; }
  .filters-sidebar { position: static; margin-bottom: 1.5rem; }
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--body);
  cursor: pointer;
}

/* Search filters as a horizontal bar at the top of the results, rather
   than a left-hand sidebar. */
.filters-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  margin: 0 0 1.75rem;
}
.filters-topbar .form-field { margin-bottom: 0; flex: 1 1 150px; min-width: 130px; }
.filters-topbar .checkbox-field { margin-top: 0; flex: 0 0 auto; white-space: nowrap; }
.filters-topbar .btn { flex-shrink: 0; }

@media (max-width: 760px) {
  .filters-topbar { flex-direction: column; align-items: stretch; margin-top: 1.5rem; }
  .filters-topbar .form-field, .filters-topbar .checkbox-field { flex: 1 1 auto; }
}

.checkbox-field input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--gold-dark);
  cursor: pointer;
}

.results-count {
  margin: 0 0 2rem;
  font-size: 1.15rem;
  color: var(--navy);
  font-weight: 500;
}
.results-count strong { font-size: 1.9rem; font-weight: 700; margin-right: 0.35rem; }

.no-results {
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  text-align: center;
  color: var(--muted);
}

/* ---- Forms ---- */
.form-field { margin-bottom: 1.1rem; }

.form-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.35rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  font-family: inherit;
  /* 16px stops iOS Safari auto-zooming into the field on focus */
  font-size: 16px;
  color: var(--navy);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

.form-field .field-error {
  display: none;
  color: #B3261E;
  font-size: 0.78rem;
  margin-top: 0.3rem;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: #B3261E; }

.form-field.has-error .field-error { display: block; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }

.form-confirmation {
  display: none;
  background: #EAF3EA;
  border: 1px solid #7FA985;
  border-radius: var(--radius);
  color: #2F5233;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-weight: 500;
}

.form-confirmation.is-visible { display: block; }

/* ---- Valuation section (homepage) ---- */
.valuation-section { background: var(--navy); color: var(--cream); }

.valuation-section h2 { color: var(--white); }
.valuation-section .section-kicker { color: var(--gold); }
.valuation-section p { color: var(--cream); }

.valuation-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.valuation-form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.valuation-points { list-style: none; margin: 1.5rem 0; }
.valuation-points li {
  padding-left: 1.6rem;
  position: relative;
  margin-bottom: 0.85rem;
  color: var(--cream);
}
.valuation-points li::before {
  content: "▲";
  color: var(--gold);
  font-size: 0.65rem;
  position: absolute;
  left: 0;
  top: 0.35rem;
}

/* ---- Split layouts / feature cards ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Used where the right-hand side is a card grid rather than an image —
   both columns should start at the same top edge, not vertically centre. */
.split-top { align-items: start; }

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem;
}

.info-card {
  background: var(--white);
  border-radius: var(--radius);
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.info-card h3 { font-size: 0.9rem; margin-bottom: 0.6rem; }
.info-card p { font-size: 0.92rem; margin-bottom: 0; }
.info-card .btn { margin-top: auto; align-self: flex-start; }
.info-card > .btn:last-child { margin-top: auto; padding-top: 1.25rem; }

.cream-section { background: var(--cream); }
.white-section { background: var(--white); }
.welcome-section { background: var(--cream-light); }

/* Three short paragraphs rather than one dense block — Luke's own
   line-break split (2026-07-12): "ATLAS is..." /
   "We were set up because..." / "ARLA Propertymark regulated...". */
.welcome-intro { max-width: 760px; font-size: 1.05rem; }
.welcome-intro p { margin-bottom: 1.1rem; }
.welcome-intro p:last-child { margin-bottom: 0; }

/* ---- Team grid ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
}

.team-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.team-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1.1rem;
  border: 3px solid var(--gold);
  background: var(--cream);
}

.team-photo img { width: 100%; height: 100%; object-fit: cover; }

.team-photo.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  background: var(--cream);
}

.team-card h3 { font-size: 0.95rem; margin-bottom: 0.15rem; text-transform: none; letter-spacing: 0.01em; }
.team-card .team-role { color: var(--gold-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--tracking); text-transform: uppercase; margin-bottom: 0.6rem; }
.team-card p:last-child { font-size: 0.85rem; margin-bottom: 0; }
.team-card .team-note { font-size: 0.72rem; color: var(--muted); margin-top: 0.6rem; font-style: italic; }

/* ---- Maintenance banner (homepage card) ---- */
.portal-card {
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.portal-card h2 { color: var(--white); font-size: 1.3rem; }
.portal-card p { color: var(--cream); margin: 0.5rem 0 0; max-width: 520px; }

/* ---- Property detail page ---- */
/* .detail-layout is ONLY the two-column [title/description column | sticky
   enquiry sidebar] section now — the photo hero and map are full-width
   siblings before/after it (see .detail-media-section/.detail-map-section
   below), not grid children of it. This was tried the other way first
   (media/map as grid-column:1/-1 items inside .detail-layout, sharing rows
   with the sidebar) but the sticky enquiry card's containing block didn't
   reliably bound to just its own row in real browser testing — it kept
   sticking down over the full-width map section. Keeping .detail-layout as
   a plain, self-contained two-item grid is the standard reliable pattern
   for a sticky sidebar: its containing block is unambiguous because
   nothing else shares the grid. Do not put the media hero or map back
   inside this grid. */
.detail-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Photo hero and map both sit outside .detail-layout, full container width —
   Luke's preference (2026-07-11): bigger full-width photos, enquiry form
   still sliding down the right side alongside the title/description column,
   then the map as its own full-width section below both columns rather than
   squeezed into the narrow column. */
.detail-media-section { margin-bottom: 2rem; }
.detail-map-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* ---- Property detail: media hero + overlay buttons + lightbox ----
   Rebuilt 2026-07-10 to match a cleaner reference: one hero photo with a
   small button bar overlaid bottom-right (Photos count / Floorplan /
   Virtual Tour / EPC), opening a full-screen lightbox with matching tabs —
   rather than a separate always-visible tab row + thumbnail strip. */
.media-hero { position: relative; }

.media-overlay-bar {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  background: rgba(13, 27, 42, 0.72);
  backdrop-filter: blur(3px);
  border-radius: 8px;
  overflow: hidden;
}
.media-overlay-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-left: 1px solid rgba(230, 226, 215, 0.25);
  background: transparent;
  color: var(--cream);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}
.media-overlay-btn:first-child { border-left: none; }
.media-overlay-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.media-overlay-btn:hover { color: var(--gold); }

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(13, 27, 42, 0.97);
}
.media-lightbox[hidden] { display: none; }
.media-lightbox-inner {
  background: var(--white);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.media-lightbox-inner.is-hidden { display: none; }
.media-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.media-lightbox-tabs { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.media-tab {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  padding: 0.3rem 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.media-tab.is-active { background: none; color: var(--navy); border-bottom-color: var(--gold); font-weight: 600; }

.media-lightbox-close {
  border: none;
  background: none;
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  flex-shrink: 0;
}

.media-lightbox-body { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; }
.media-lightbox-panel { display: none; width: 100%; }
.media-lightbox-panel.is-active { display: flex; flex-direction: column; flex: 1; }
.media-lightbox-panel[data-panel="floorplan"].is-active,
.media-lightbox-panel[data-panel="epc"].is-active { align-items: center; justify-content: center; }

.lightbox-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; align-content: start; width: 100%; }
.lightbox-photo-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); display: block; cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease; }
.lightbox-photo-grid img:hover { opacity: 0.85; }

.lightbox-single-img {
  width: 100%;
  max-width: 1100px;
  height: 78vh;
  max-height: 78vh;
  display: block;
  margin: 0 auto 1rem;
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox-tour-wrap { position: relative; width: 100%; flex: 1; min-height: 60vh; border-radius: var(--radius); overflow: hidden; }
.lightbox-tour-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Full-screen single-photo viewer (opened by clicking a photo in the
   lightbox grid) — sits above .media-lightbox-inner, matching the
   Putterills reference: counter top-left, close/zoom top-right, big
   centred image, left/right arrows. ---- */
.photo-viewer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-viewer[hidden] { display: none; }
.photo-viewer-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.photo-viewer-stage img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  cursor: zoom-in;
}
.photo-viewer-stage img.is-zoomed {
  max-width: 180vw;
  max-height: 180vh;
  cursor: zoom-out;
}
.photo-viewer-counter {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  color: var(--cream);
  font-size: 0.85rem;
  letter-spacing: var(--tracking);
  z-index: 1;
}
.photo-viewer-controls {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  display: flex;
  gap: 0.75rem;
  z-index: 1;
}
.photo-viewer-zoom,
.photo-viewer-close {
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--cream);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
}
.photo-viewer-zoom svg { width: 18px; height: 18px; }
.photo-viewer-zoom:hover,
.photo-viewer-close:hover { background: rgba(255, 255, 255, 0.2); }
.photo-viewer-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--cream);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.photo-viewer-arrow:hover { background: rgba(255, 255, 255, 0.2); }
.photo-viewer-prev { left: 1.25rem; }
.photo-viewer-next { right: 1.25rem; }

@media (max-width: 700px) {
  .lightbox-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .media-overlay-btn { padding: 0.45rem 0.6rem; font-size: 0.68rem; gap: 0.3rem; }
  .photo-viewer-arrow { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
  .photo-viewer-prev { left: 0.4rem; }
  .photo-viewer-next { right: 0.4rem; }
  .photo-viewer-counter { top: 0.85rem; left: 0.85rem; }
  .photo-viewer-controls { top: 0.75rem; right: 0.75rem; }
}
@media (max-width: 480px) {
  .lightbox-photo-grid { grid-template-columns: 1fr; }
  .media-overlay-btn span { display: none; }
  .media-overlay-btn { padding: 0.55rem; }
}

.gallery-main {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--cream);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

/* Now that the hero spans the full page width (.detail-media-section, see
   .detail-layout above) rather than a ~660px column, a 3:2 photo would be
   unusably tall — switch to a wider, more cinematic ratio once there's
   room for it. Mobile keeps the original 3:2, which suits a narrower crop
   of the same interior photos better. */
@media (min-width: 900px) {
  .gallery-main { aspect-ratio: 21 / 9; }
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: rgba(13, 27, 42, 0.6);
  color: var(--cream);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-arrow:hover { background: rgba(13, 27, 42, 0.85); }
.gallery-prev { left: 0.6rem; }
.gallery-next { right: 0.6rem; }

.gallery-counter {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  background: rgba(13, 27, 42, 0.72);
  color: var(--cream);
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

.tour-embed-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 62.5%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream);
}
.tour-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gallery-thumbs { display: flex; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; }

.gallery-thumbs button {
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: none;
  width: 96px;
  aspect-ratio: 3 / 2;
}

.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button.is-active { border-color: var(--gold); }

.detail-price { font-size: 1.7rem; font-weight: 700; color: var(--navy); margin: 0.5rem 0 0.25rem; }
.detail-price span { font-size: 0.9rem; font-weight: 500; color: var(--muted); }

.floorplan-wrap { max-width: 480px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0.75rem 0; }
.floorplan-wrap img { width: 100%; display: block; }

.spec-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.9rem; }
.spec-table th, .spec-table td { text-align: left; padding: 0.55rem 0.25rem; border-bottom: 1px solid var(--border); }
.spec-table th { color: var(--navy); font-weight: 600; width: 45%; }

/* Reposit pill — links from the property detail page (near the deposit
   figures) to the Reposit info page. Text-based badge rather than a
   downloaded Reposit logo — swap in their real logo asset here if/when
   Luke supplies a clean transparent file, same pattern as the footer
   accreditation badges. */
.reposit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: -0.25rem 0 1.25rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(200, 160, 106, 0.5);
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy);
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.reposit-pill:hover, .reposit-pill:focus-visible {
  background: var(--white);
  border-color: var(--gold);
}
.reposit-pill-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gold);
  flex-shrink: 0;
}
.reposit-pill-icon svg { width: 100%; height: 100%; }
.reposit-pill-text strong { color: var(--navy); }
.reposit-pill-arrow { color: var(--gold); font-weight: 700; }

/* Reposit savings calculator — reposit.html only */
.reposit-calc {
  max-width: 26rem;
  margin: 1.5rem auto 0;
  text-align: left;
}
.reposit-calc .form-field label { color: var(--navy); }
.reposit-calc-results {
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
}
.reposit-calc-results p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0.6rem 0;
  font-size: 0.95rem;
  color: var(--navy);
}
.reposit-calc-results strong { font-size: 1.05rem; }
.reposit-calc-savings { border-top: 1px solid var(--border); margin-top: 0.9rem !important; padding-top: 0.9rem; }
.reposit-calc-savings strong { color: var(--gold); font-size: 1.2rem; }
.reposit-calc-note { margin-top: 1rem; font-size: 0.78rem; color: var(--muted); text-align: center; }

/* Tenant journey — horizontal numbered steps, tenants.html */
.journey-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 2rem 0 0;
  padding: 0;
  position: relative;
}
.journey-steps::before {
  content: '';
  position: absolute;
  top: 1.25rem;
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.journey-step {
  flex: 1 1 150px;
  min-width: 140px;
  text-align: center;
  padding: 0 0.75rem;
  position: relative;
}
.journey-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}
.journey-step h3 { font-size: 0.9rem; margin-bottom: 0.3rem; }
.journey-step p { font-size: 0.8rem; color: var(--muted); margin: 0; line-height: 1.4; }
@media (max-width: 760px) {
  .journey-steps { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .journey-steps::before { display: none; }
  .journey-step { display: flex; align-items: flex-start; gap: 1rem; text-align: left; padding: 0; }
  .journey-step-number { margin-bottom: 0; flex-shrink: 0; }
}

/* Landlord journey infographic — Let Only vs Managed Service, landlords.html */
.letting-flow { margin-top: 2rem; }
.letting-flow-phase { margin-bottom: 1.25rem; }
.letting-flow-phase-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
.letting-flow-phase--let .letting-flow-phase-label { background: var(--navy); color: var(--cream); }
.letting-flow-phase--managed .letting-flow-phase-label { background: var(--gold); color: var(--navy); }
.letting-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.letting-flow-step {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.letting-flow-arrow { color: var(--gold); font-size: 1.1rem; font-weight: 700; }
.letting-flow-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
}
.letting-flow-divider::before, .letting-flow-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
@media (max-width: 700px) {
  .letting-flow-steps { flex-direction: column; align-items: stretch; }
  .letting-flow-step { white-space: normal; text-align: center; }
  .letting-flow-arrow { transform: rotate(90deg); align-self: center; }
}

/* Light-background checklist (compliance docs etc.) — navy text variant of .valuation-points */
.check-list { list-style: none; margin: 1.25rem 0; }
.check-list li {
  padding-left: 1.6rem;
  position: relative;
  margin-bottom: 0.85rem;
  color: var(--navy);
}
.check-list li::before {
  content: "▲";
  color: var(--gold);
  font-size: 0.65rem;
  position: absolute;
  left: 0;
  top: 0.35rem;
}

/* ---- Property detail: key features ---- */
.key-features-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.5rem;
  margin: 0.75rem 0 1.75rem;
}
.key-features-grid li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; color: var(--body); }
.feature-check { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold-dark); margin-top: 0.15rem; }
@media (max-width: 560px) {
  .key-features-grid { grid-template-columns: 1fr; }
}

/* ---- Property detail: collapsible description ----
   .description-block wraps the whole "About this property" section (both
   the short plain-paragraph case and the long collapsible case) so there's
   always guaranteed breathing room before whatever section follows — fixes
   the description sitting flush against "Local area" below it. */
.description-block { margin-bottom: 1.75rem; }
.description-collapse .description-text {
  max-height: 4.8em;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.5rem;
}
.description-collapse[data-expanded="true"] .description-text { max-height: none; }
.description-collapse[data-expanded="false"] .description-text::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2.2em;
  background: linear-gradient(rgba(255,255,255,0), var(--white));
}
.description-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- Property detail: local area (schools / station / broadband) ---- */
.local-area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 0.75rem 0 1.75rem; }
.local-area-transport { font-size: 0.9rem; color: var(--body); }
.local-area-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; }
.local-area-schools h3 { font-size: 0.78rem; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--navy); margin: 0.9rem 0 0.4rem; }
.local-area-schools h3:first-child { margin-top: 0; }
.school-list { list-style: none; }
.school-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.school-name { flex: 1 1 auto; color: var(--body); }
.school-distance { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; }
.ofsted-tag {
  flex-shrink: 0;
  background: var(--cream-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
  color: var(--navy);
  white-space: nowrap;
}
/* Connectivity — simplified 2026-07-10 to a compact icon + value format
   (was a full broadband-tier breakdown + per-network percentage list). */
.local-area-connectivity { margin-top: 1.25rem; }
.connectivity-simple { list-style: none; }
.connectivity-simple > li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--body);
  padding: 0.4rem 0;
}
.connectivity-simple strong { color: var(--navy); font-weight: 600; }
.connectivity-icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--gold-dark); }
.connectivity-mobile { align-items: flex-start; flex-wrap: wrap; }
.mobile-networks { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.15rem; }
.mobile-network { display: flex; align-items: center; gap: 0.35rem; }
.mobile-network em { font-style: normal; font-size: 0.82rem; color: var(--body); }
.signal-bars { width: 20px; height: 16px; color: var(--navy); }
@media (max-width: 700px) {
  .local-area-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---- Area guides ---- */
.area-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .area-guide-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .area-guide-grid { grid-template-columns: 1fr; } }

.area-guide-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
  padding: 1.75rem;
  text-align: left;
}
.area-guide-card h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.area-guide-card p { font-size: 0.88rem; color: var(--body); margin: 0 0 1rem; }

.area-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}
.area-stat {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.1rem;
  text-align: center;
}
.area-stat .area-stat-value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.area-stat .area-stat-value.is-up { color: #2E7D32; }
.area-stat .area-stat-value.is-down { color: #B3261E; }
.area-stat .area-stat-label { display: block; font-size: 0.75rem; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; }

.area-type-table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.9rem; }
.area-type-table th, .area-type-table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); }
.area-type-table th { color: var(--navy); font-weight: 600; }

.area-source-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; }

/* ---- Property detail: WhatsApp enquire button ---- */
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #1EBE5B; color: #fff; text-decoration: none; }

.enquiry-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
  padding: 1.75rem;
  position: sticky;
  top: 96px;
  /* Deliberately NOT given an explicit grid-row/grid-column — plain
     DOM-order auto-placement already lands it in row 2 col 2 (row 1 is the
     full-width photo hero, row 3 the full-width map — see .detail-layout
     comment above), which is exactly what bounds its sticky containing
     block to that row so it can't overlap the map below. Adding an explicit
     grid-row here previously (2026-07-11) backfired: it made this item get
     placed by the auto-placement algorithm BEFORE the title/description
     column, which stole column 1 for itself and pushed that column to the
     right instead — do not re-add explicit grid placement to this rule. */
}

.back-link {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}

/* ---- Contact / about ---- */
.contact-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; }

.contact-details { list-style: none; margin: 1.25rem 0; }
.contact-details li { margin-bottom: 0.8rem; }
.contact-details strong { color: var(--navy); display: block; font-size: 0.75rem; letter-spacing: var(--tracking); text-transform: uppercase; }

.map-embed {
  border: 0;
  width: 100%;
  height: 380px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.map-embed-placeholder {
  width: 100%;
  height: 380px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--cream-light);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}
.map-embed-placeholder p { margin: 0; font-size: 0.9rem; color: var(--body); max-width: 320px; }

/* Property detail page's map is now full page width (.detail-map-section) —
   380px reads shallow at that width, so give it more height there without
   touching the shared .map-embed height used on About/Contact. */
.detail-map-section .map-embed,
.detail-map-section .map-embed-placeholder { height: 480px; }
@media (max-width: 640px) {
  .detail-map-section .map-embed,
  .detail-map-section .map-embed-placeholder { height: 300px; }
}
.map-embed-placeholder button {
  display: inline-block;
  margin-top: 0.85rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
@media (max-width: 640px) {
  .map-embed-placeholder { height: 260px; }
}

/* ---- Cookie consent banner ----
   No analytics/marketing cookies are set by this site. The one item that
   can set a third-party cookie is the Google Maps embed on About/Contact,
   so the map iframe only loads (via data-src) once the visitor accepts;
   declining swaps it for a plain link out to Google Maps instead. */
.cookie-banner {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 250;
  max-width: 400px;
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(13, 27, 42, 0.28);
  padding: 1.25rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0 0 1rem; font-size: 0.85rem; color: var(--cream); }
.cookie-banner a { color: var(--gold); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookie-banner .btn { padding: 0.55rem 1.1rem; font-size: 0.7rem; }

@media (max-width: 640px) {
  .cookie-banner {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
    /* Was offset to clear the sticky mobile call/valuation bar (72px) —
       that bar is disabled as of 2026-07-27, so this can sit at the
       normal bottom margin instead. */
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
}

.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.75rem; }

.value-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}
.value-card .feature-icon { margin-bottom: 1rem; }
.value-card h3 { font-size: 0.95rem; margin-bottom: 0.6rem; color: var(--navy); }
.value-card p { font-size: 0.92rem; margin: 0; color: var(--body); }

/* Compact 2x2 variant — used on the About page, alongside the story text
   rather than as a full-width row. Smaller icon badge and tighter padding
   so 4 cards read comfortably in half the page width. */
.values-grid-compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.values-grid-compact .value-card { padding: 1.4rem; }
.values-grid-compact .feature-icon { width: 36px; height: 36px; margin-bottom: 0.75rem; }
.values-grid-compact .feature-icon svg { width: 18px; height: 18px; }
.values-grid-compact .value-card p { font-size: 0.85rem; }

@media (max-width: 700px) {
  .values-grid-compact { grid-template-columns: 1fr; }
}

/* ---- Social icons ---- */
.social-links { display: flex; gap: 0.9rem; list-style: none; margin-top: 1rem; }

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  transition: background 0.2s ease, color 0.2s ease;
}

.social-links a:hover, .social-links a:focus { background: var(--gold); color: var(--navy); text-decoration: none; }
.social-links svg { width: 18px; height: 18px; fill: currentColor; }

/* ---- Footer ---- */
.site-footer { background: var(--navy); color: var(--cream); padding: 3.5rem 0 0; margin-top: 4rem; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.site-footer h4 {
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 1rem;
}

.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: 0.2rem; }

.site-footer a {
  display: inline-flex;
  align-items: center;
  color: var(--cream);
  font-size: 0.9rem;
  min-height: 44px;
  box-sizing: border-box;
}
.site-footer a:hover, .site-footer a:focus { color: var(--gold); }

.site-footer p { font-size: 0.9rem; color: var(--cream); }

.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.footer-brand-icon { height: 40px; width: auto; flex-shrink: 0; }
.footer-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.footer-brand-word { font-weight: 700; font-size: 1.25rem; letter-spacing: var(--tracking-wide); color: var(--white); }
.footer-brand-sub { font-size: 0.65rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold); margin-top: 0.15rem; }

.footer-contact-list li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.6rem; }
.footer-contact-list svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--gold); margin-top: 0.25rem; }
.footer-contact-list a { min-height: auto; }

/* Accreditation / portal badges — plain text in the site's own style
   rather than real Rightmove/Zoopla/ARLA logo files, since those are
   trademarked and their guidelines generally don't allow recolouring.
   Swap in the real logo assets (transparent PNG/SVG) if/when supplied. */
.footer-badges {
  border-top: 1px solid rgba(200, 160, 106, 0.15);
  padding: 1.5rem 0;
}
.footer-badges-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}
/* Accreditation/portal logos are white-on-transparent PNGs, so they sit
   directly on the navy footer — no pill background needed. */
.footer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.5rem;
  height: 3.25rem;
}
/* Each badge links out to the accrediting body's own website in a new tab —
   the anchor fills the badge so the whole logo area is clickable, not just
   the image pixels. */
.footer-badge a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.footer-badge a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
/* max-width has to comfortably clear (max-height * widest logo's own aspect
   ratio) or that logo becomes the odd one out — capped by width before it
   reaches full height, so it renders visibly smaller than the others.
   ARLA | Propertymark is the widest mark (~8:1), which is what happened
   here: 9rem was enough for Rightmove/Zoopla/TPO but not for ARLA. */
.footer-badge img { max-height: 2rem; max-width: 15rem; width: auto; height: auto; display: block; opacity: 0.92; transition: opacity 0.15s ease; }
.footer-badge a:hover img, .footer-badge a:focus-visible img { opacity: 1; }
/* Approved Code is a much more square mark (~1.85:1) carrying two lines of
   dense small text, so at the same height as the other logos it reads far
   smaller and the text blurs out. Give it extra height so the text stays
   legible at the same visual weight as the wider logos. */
.footer-badge-tall img { max-height: 3rem; }

/* Fallback text pill for accreditations where a clean logo file isn't in
   place yet (see README "Accreditation logos" note). */
.footer-badge-text {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.15rem;
  border: 1px solid rgba(200, 160, 106, 0.4);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}

.footer-legal {
  border-top: 1px solid rgba(200, 160, 106, 0.3);
  padding: 1.5rem 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.footer-legal .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.footer-legal p { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.4rem; }

.footer-legal-links { display: flex; gap: 1.25rem; flex-shrink: 0; }
.footer-legal-links a { font-size: 0.75rem; color: var(--muted); text-decoration: underline; }
.footer-legal-links a:hover { color: var(--gold-dark); }

/* ---- Holding page ---- */
.holding-wrap { min-height: 55vh; display: flex; align-items: center; }

.holding-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--gold);
  padding: 3rem;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.holding-card img { width: 84px; margin: 0 auto 1.5rem; }

/* ---- Maintenance portal tool ---- */
.portal-tabs { display: flex; gap: 0.75rem; margin-bottom: 2rem; flex-wrap: wrap; }

.portal-tab {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 1.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
}

.portal-tab.is-active { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.portal-panel { display: none; }
.portal-panel.is-active { display: block; }

.portal-intro-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
  padding: 2rem;
  max-width: 720px;
  margin-bottom: 2rem;
}

.emergency-callout-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1.5rem;
}
.emergency-callout-title svg { width: 22px; height: 22px; color: var(--gold-dark); flex-shrink: 0; }

.emergency-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 700px) {
  .emergency-cards { grid-template-columns: 1fr; }
}

.emergency-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.emergency-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FBEAEA;
  color: #B3261E;
  margin-bottom: 0.9rem;
}
.emergency-card-icon svg { width: 20px; height: 20px; }
.emergency-card h3 { font-size: 1rem; margin-bottom: 0.4rem; text-transform: none; color: var(--navy); }
.emergency-card p { font-size: 0.88rem; color: var(--body); margin-bottom: 0; }
.emergency-card p a { color: var(--navy); font-weight: 700; text-decoration: underline; }

.urgency-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.1rem; }

.urgency-option { position: relative; }
.urgency-option input { position: absolute; opacity: 0; }
.urgency-option label {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--navy);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.urgency-option label .urgency-desc { display: block; font-weight: 400; font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; }
.urgency-option input:checked + label { border-color: var(--gold); background: var(--cream-light); box-shadow: inset 0 0 0 1px var(--gold); }
.urgency-option input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }
.urgency-options.has-error .urgency-option label { border-color: #B3261E; }

.ticket-ref-banner {
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 1.5rem 0;
  text-align: center;
}
.ticket-ref-banner .ref { color: var(--gold); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.06em; display: block; margin: 0.4rem 0; }

.ticket-list { display: flex; flex-direction: column; gap: 1rem; }

.ticket-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--gold);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  align-items: flex-start;
}

.ticket-card .ticket-meta { font-size: 0.78rem; color: var(--muted); }
.ticket-card h4 { font-size: 0.92rem; color: var(--navy); margin-bottom: 0.25rem; text-transform: none; }
.ticket-card p { font-size: 0.85rem; margin-bottom: 0.25rem; }

.status-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.status-received { background: #FDF1DC; color: #8A5A0A; }
.status-progress { background: #E3EEFB; color: #1B4C8C; }
.status-complete { background: #E7F3E8; color: #2F6E36; }
.status-let-agreed { background: var(--navy); color: var(--cream); margin: 0.5rem 0 1rem; }

.emergency-note {
  background: #FBEAEA;
  border: 1px solid #E2A7A7;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  color: #7A2020;
  margin-bottom: 1.75rem;
}
.emergency-note strong { color: #5E1717; }

/* ---- Sticky mobile call/valuation bar ----
   Disabled sitewide 2026-07-27 (Luke didn't want it) — kept as display:none
   rather than deleted, so it's a one-line change to bring back if wanted.
   The markup (.mobile-cta-bar in every page's <body>) is untouched. */
.mobile-cta-bar { display: none; }

@media (max-width: 640px) {
  .mobile-cta-bar { display: none; }

  .mobile-cta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    border-radius: var(--radius);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .mobile-cta-btn:hover, .mobile-cta-btn:focus { text-decoration: none; }
  .mobile-cta-btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

  .mobile-cta-call { background: transparent; color: var(--cream); border: 2px solid var(--cream); }
  .mobile-cta-valuation { background: var(--gold); color: var(--navy); border: 2px solid var(--gold); }
}

/* ---- Quick-contact chat widget ----
   A floating "chat" bubble, not a live-chat backend — opens a small panel
   of instant contact options (WhatsApp/call/email/enquiry form). No
   server or third party involved, so it works the moment the page loads;
   swap in a real live-chat tool (Tawk.to, Crisp, Intercom, etc.) later if
   wanted, using this same bubble position as the trigger. */
.chat-widget {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 200;
}

.chat-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  border: none;
  box-shadow: 0 6px 20px rgba(13, 27, 42, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.chat-toggle:hover { background: var(--gold-dark); transform: translateY(-2px); }
.chat-toggle svg { width: 24px; height: 24px; }
.chat-toggle .icon-close { display: none; }
.chat-toggle.is-open .icon-chat { display: none; }
.chat-toggle.is-open .icon-close { display: block; }

.chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.85rem);
  width: 290px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(13, 27, 42, 0.22);
  padding: 1.25rem;
}
.chat-panel[hidden] { display: none; }

.chat-panel-header strong { display: block; color: var(--navy); font-size: 1rem; }
.chat-panel-header p { font-size: 0.82rem; color: var(--muted); margin: 0.35rem 0 1rem; }

.chat-options { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }

.chat-options a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.chat-options a:hover { border-color: var(--gold); background: var(--cream-light); text-decoration: none; }

.chat-option-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream-light);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-option-icon svg { width: 16px; height: 16px; }
.chat-option-whatsapp { background: #25D366; color: #fff; }

@media (max-width: 640px) {
  /* Back to floating in its normal spot (2026-07-27 — reverted the
     bar-merge from earlier the same session now the sticky bar itself
     is disabled). No position/size override needed any more — falls
     back to the base .chat-widget/.chat-toggle rule above, same as
     desktop. Only the popup panel keeps its mobile-specific width. */
  .chat-panel { width: calc(100vw - 2rem); max-width: 300px; }
}

/* ---- Utilities ---- */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--navy);
  padding: 0.6rem 1rem;
  z-index: 200;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .valuation-inner, .split, .contact-layout, .detail-layout { grid-template-columns: 1fr; }
  .enquiry-card { position: static; }
}

/* Switch to the hamburger well before the nav items would ever have to
   wrap or squeeze — eight links plus a CTA button need real room. Bumped from
   1180px to 1280px when the MyAtlas link was added (2026-07-04), then to
   1360px when Landlords/Tenants replaced Maintenance Portal (2026-07-11). */
@media (max-width: 1360px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy);
    border-bottom: 2px solid var(--gold);
    padding: 1rem 4% 1.5rem;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  .site-nav.is-open { display: block; }

  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 0.4rem; flex-wrap: wrap; }
  .site-nav ul li { width: 100%; }
  .site-nav a:not(.btn) { display: block; padding: 0.7rem 0; width: 100%; white-space: normal; }
  .site-nav .nav-cta { margin: 1rem 0 0; display: block; text-align: center; }

  /* .nav-item-stacked centres MyAtlas/Client Portal under itself on desktop
     (see base rule) — on the mobile menu every other link is left-aligned,
     so that centring made it look out of place in the middle of the screen.
     Luke flagged this via screenshot, 2026-07-12. Left-align to match. */
  .nav-item-stacked { text-align: left; }
}

@media (max-width: 640px) {
  section { padding: 2.5rem 0; }
  .hero { padding: 3.5rem 0 3rem; }
  .hero::after { width: 220px; height: 220px; right: -25%; opacity: 0.1; }
  /* Side-by-side, not stacked (2026-07-27 — Luke flagged the 2 full-width
     stacked CTAs plus the sticky mobile call/valuation bar right below as
     looking cluttered together). Both buttons share the row equally. */
  .hero-ctas { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0.6rem; }
  .hero-ctas .btn { flex: 1 1 0; padding: 0.75rem 0.5rem; font-size: 0.76rem; text-align: center; white-space: normal; }
  .hero-search-card { padding: 0.9rem 1rem 1rem; }
  .search-banner-box, .search-banner-box-ai { flex-wrap: wrap; }
  .search-banner-box-ai input { width: 100%; order: 1; }
  .search-banner-box-ai .btn { order: 2; margin-left: auto; }
  .search-tabs { display: flex; width: 100%; }
  .search-tab { flex: 1 1 50%; padding: 0.5rem 0.5rem; font-size: 0.8rem; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .brand-icon { height: 26px; }
  .brand-word { font-size: 0.95rem; }
  .brand-sub { font-size: 0.52rem; }
  .portal-card { padding: 1.5rem; flex-direction: column; align-items: stretch; text-align: center; }
  .portal-card .btn { text-align: center; }
  .holding-card { padding: 2rem 1.5rem; }
  .valuation-form-card, .portal-intro-card, .enquiry-card { padding: 1.5rem; }
  .team-card { padding: 1.5rem 1.25rem; }
  .info-card { padding: 1.4rem; }
  .container { width: 94%; }
  h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .map-embed { height: 260px; }
  .urgency-options { grid-template-columns: 1fr 1fr; }
  .ticket-card { flex-direction: column; }
  .ticket-card .status-pill { align-self: flex-start; }
}

@media (max-width: 400px) {
  .urgency-options { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  /* On the narrowest phones (iPhone SE etc.) the side-by-side hero CTAs
     get tight enough that the button text is more likely to wrap to 2
     lines — drop the font-size and padding a touch further so that stays
     tidy rather than looking cramped. */
  .hero-ctas .btn { font-size: 0.7rem; padding: 0.7rem 0.4rem; }
}


/* ==========================================================================
   Hero background responsiveness
   (the .hero, .hero-bg, .hero-bg-slide, .hero-overlay rules themselves are
   defined up near the base .hero styles)
   ========================================================================== */
@media (max-width: 640px) {
  /* Vertically centred, nudged up a touch (2026-07-27, third pass) — kept
     align-items: center from the previous pass (Luke didn't ask to
     re-flatten it to the top again), but with the sticky bar now removed
     there's no bottom-of-screen element competing for space, so an
     asymmetric top/bottom padding (less on top, more on bottom) shifts
     the effective centre point upward without going back to a hard
     flex-start. */
  .hero { min-height: 100vh; min-height: 100svh; padding: 2rem 0 4.5rem; align-items: center; }
  .hero .hero-tagline { margin-bottom: 1.25rem; }
  .hero h1 { margin-bottom: 1.6rem; }
  /* Lede text back to its original 0.92rem on phones (2026-07-27 — Luke
     asked for the heading only to stay enlarged, lede reverted to size).
     Paragraph gap widened from 1rem to 1.35rem (2026-07-27, second pass)
     as part of "space it all out" — text-wrap: pretty covers anything
     that still wraps. */
  .hero p.lede { font-size: 0.92rem; }
  .hero p.lede + p.lede { margin-top: 1.35rem; }
  .hero-ctas { margin-top: 2.5rem; }
}

/* Luke's own monitor is a 32" 2K (2560x1440) display — at that viewport
   width the hero heading was sitting well under the visual weight the
   photo can support, since .hero-copy was capped at a width tuned for
   smaller screens and the global h1 clamp() maxes out at 3rem regardless
   of viewport width. Scale the heading (only — lede stays at its normal
   size per Luke's 2026-07-27 request) up on large viewports. */
@media (min-width: 1400px) {
  .hero-copy { max-width: 900px; }
  .hero h1 { font-size: 3.6rem; }
}

/* ==========================================================================
   Google reviews section
   ========================================================================== */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 1.5rem 0 2rem;
  flex-wrap: wrap;
}
.google-g { width: 38px; height: 38px; flex-shrink: 0; }
.reviews-score { font-size: 1.8rem; font-weight: 700; color: var(--navy); margin-right: 0.5rem; }
.reviews-stars { color: var(--gold-dark); letter-spacing: 0.1em; }
.reviews-count { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.review-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.review-card .review-stars { display: block; margin-bottom: 0.6rem; }
.review-card p { font-size: 0.88rem; }
.review-author {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  margin-top: 0.75rem;
  margin-bottom: 0 !important;
}

.reviews-note { font-size: 0.75rem; color: var(--muted); font-style: italic; margin-top: 1.5rem; }

/* ==========================================================================
   Letting fees tables
   ========================================================================== */
.fees-table-wrap { overflow-x: auto; margin: 1.5rem 0; }

.fees-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.fees-table th, .fees-table td {
  text-align: left;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.fees-table thead th {
  background: var(--navy);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.fees-table tbody tr:last-child td { border-bottom: none; }
.fees-table tbody tr:nth-child(even) { background: var(--cream-light); }
.fees-table td:last-child { color: var(--navy); font-weight: 600; width: 38%; }

.fees-note { font-size: 0.8rem; color: var(--muted); margin-top: 1rem; }

.legal-list { list-style: disc; padding-left: 1.25rem; margin-top: 0.75rem; color: var(--body); font-size: 0.95rem; }
.legal-list li { margin-bottom: 0.5rem; }
.legal-list li:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .reviews-summary { gap: 0.85rem; }
}

/* ---- Fees tables: fit phone screens instead of scrolling ----
   Placed at the very end of the file on purpose — it must load after the
   base .fees-table rule above (same specificity, so source order decides
   the tie) or its min-width:480px silently wins back on mobile. ---- */
@media (max-width: 640px) {
  .fees-table-wrap { overflow-x: visible; }
  .fees-table { min-width: 0; width: 100%; font-size: 0.78rem; table-layout: fixed; }
  .fees-table th, .fees-table td { padding: 0.6rem 0.6rem; word-break: break-word; }
  .fees-table td:last-child { width: 40%; }
}

/* ---- Property media tabs on small screens ---- */
@media (max-width: 640px) {
  .media-tab { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
  .gallery-arrow { width: 1.9rem; height: 1.9rem; }
}

/* ==========================================================================
   Short film page
   ========================================================================== */
.film-section { background: var(--navy); padding: 0 0 4rem; }

.film-frame {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}
.film-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.film-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 42, 0.28);
}

.film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(13, 27, 42, 0.72);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.film-play svg { width: 26px; height: 26px; fill: var(--gold); margin-left: 4px; }

.film-note { color: var(--muted); font-size: 0.8rem; font-style: italic; text-align: center; margin-top: 1rem; }

.film-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

.film-stat {
  background: var(--white);
  border-radius: var(--radius);
  border-left: 3px solid var(--gold);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem;
}
.film-stat strong { display: block; font-size: 1.5rem; color: var(--navy); line-height: 1.1; }
.film-stat span { font-size: 0.72rem; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--muted); }

.film-contact-card {
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}
.film-contact-card span.label { display: block; font-size: 0.7rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; }
.film-contact-card a { color: var(--white); font-size: 1.3rem; font-weight: 700; }
.film-contact-card p { font-size: 0.8rem; color: var(--cream); margin-top: 0.3rem; }

@media (max-width: 640px) {
  .film-play { width: 64px; height: 64px; }
  .film-play svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   Animation & micro-interaction layer (2026-07-05)
   Everything in here is progressive enhancement:
   - Scroll reveals only activate when assets/js/animations.js adds the
     .reveal class, so content is never hidden if JS fails or is disabled.
   - All motion is wrapped in prefers-reduced-motion: no-preference, so
     visitors who opt out of animation get the static site unchanged.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---- Page-load fade (one-shot, never leaves the page hidden) ---- */
  body { animation: page-fade 0.45s ease-out; }
  @keyframes page-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ---- Scroll reveal (class added by animations.js) ---- */
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Gold rules draw in horizontally instead of rising */
  .reveal-rule {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s ease 0.15s;
  }
  .reveal-rule.centred { transform-origin: center; }
  .reveal-rule.is-visible { transform: scaleX(1); }

  /* ---- Hero: slow Ken Burns drift on the active slide ---- */
  .hero-bg-slide.is-active { animation: ken-burns 9s ease-out forwards; }
  @keyframes ken-burns {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
  }

  /* Hero copy rises in on load */
  .hero-copy { animation: hero-rise 0.8s ease-out 0.1s backwards; }
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- Header: soft shadow + slight compression once scrolled ---- */
  .site-header { transition: box-shadow 0.3s ease; }
  .site-header-wrap.is-scrolled .site-header { box-shadow: 0 8px 24px rgba(13, 27, 42, 0.35); }
  .header-inner { transition: padding 0.3s ease; }
  .site-header-wrap.is-scrolled .header-inner { padding: 0.55rem 0; }

  /* ---- Desktop nav: gold underline slides in (hamburger takes over ≤1360px) ---- */
  @media (min-width: 1361px) {
    .site-nav a:not(.btn) { position: relative; border-bottom-color: transparent !important; }
    .site-nav a:not(.btn)::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 100%;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s ease;
    }
    .site-nav a:not(.btn):hover::after,
    .site-nav a:not(.btn):focus::after,
    .site-nav a.is-active::after { transform: scaleX(1); }
  }

  /* ---- Buttons: gentle lift ---- */
  .btn { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(13, 27, 42, 0.18); }
  .btn:active { transform: translateY(0); box-shadow: none; }

  /* ---- Property cards: photo zoom + deeper lift ---- */
  .property-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .property-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(13, 27, 42, 0.16); }
  .property-card .card-photo img { transition: transform 0.5s ease; }
  .property-card:hover .card-photo img { transform: scale(1.05); }
  /* Let Agreed cards stay calm — no photo zoom on unavailable homes */
  .property-card.is-let-agreed:hover .card-photo img { transform: none; }

  /* ---- Feature / info / team / review / value cards: subtle lift ---- */
  .info-card, .team-card, .review-card, .value-card, .emergency-card, .film-stat {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .info-card:hover, .team-card:hover, .review-card:hover, .value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(13, 27, 42, 0.14);
  }

  /* Feature icon badge warms up on hover */
  .feature-icon { transition: background 0.25s ease, transform 0.25s ease; }
  .feature-card:hover .feature-icon { background: var(--cream); transform: translateY(-2px); }

  /* ---- Gallery: smoother arrows and thumbnail states ---- */
  .gallery-arrow { transition: background 0.2s ease, transform 0.2s ease; }
  .gallery-arrow:hover { transform: translateY(-50%) scale(1.08); }
  .gallery-thumbs button { transition: border-color 0.2s ease, opacity 0.2s ease; opacity: 0.85; }
  .gallery-thumbs button:hover, .gallery-thumbs button.is-active { opacity: 1; }

  /* ---- Chat bubble: one polite pop-in after load ---- */
  .chat-toggle { animation: chat-pop 0.45s ease-out 1.2s backwards; }
  @keyframes chat-pop {
    from { opacity: 0; transform: scale(0.6); }
    60%  { transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* ---- Social icons: lift with colour swap ---- */
  .social-links a { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
  .social-links a:hover, .social-links a:focus { transform: translateY(-3px); }
}

/* Arrival sequence — the exterior invitation resolves into the Mill Office. */
.arrival-tour { height: 210vh; padding: 0; background: var(--navy); }
.arrival-tour__sticky { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; isolation: isolate; background: var(--navy); }
.arrival-tour__outside, .arrival-tour__inside, .arrival-tour__shade { position: absolute; inset: 0; }
.arrival-tour__outside { background: url('../images/atlas-arrival-wordmark.png') center / cover no-repeat; transform: scale(1); will-change: transform, opacity; }
.arrival-tour__inside { background: url('../images/atlas-office-interior-enhanced.png') center / cover no-repeat; opacity: 0; transform: scale(1.06); will-change: transform, opacity; }
.arrival-tour__shade { z-index: 1; background: linear-gradient(90deg, rgba(13,27,42,.72) 0%, rgba(13,27,42,.22) 52%, rgba(13,27,42,.12) 100%); }
.arrival-tour__copy, .arrival-tour__inside-copy { position: absolute; z-index: 2; left: clamp(1.4rem, 8vw, 10rem); color: var(--cream); }
.arrival-tour__copy { top: 50%; transform: translateY(-50%); max-width: 650px; }
.arrival-tour__copy p, .arrival-tour__inside-copy p { color: var(--gold); letter-spacing: .18em; font-size: .7rem; font-weight: 600; margin: 0 0 1.25rem; }
.arrival-tour__copy h1, .arrival-tour__inside-copy h2 { color: var(--cream); margin: 0; font-size: clamp(3.2rem, 7vw, 6.9rem); letter-spacing: -.06em; line-height: .88; }
.arrival-tour__copy h1 span, .arrival-tour__inside-copy em { color: var(--gold); font-style: normal; }
.arrival-tour__enter { display: inline-flex; gap: 3rem; align-items: center; margin-top: 2.3rem; padding: 0 0 .7rem; color: var(--cream); border: 0; border-bottom: 1px solid var(--gold); background: transparent; font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .08em; cursor: pointer; }
.arrival-tour__enter span { color: var(--gold); font-size: 1.15rem; }
.arrival-tour__inside-copy { top: 26%; opacity: 0; max-width: 620px; }
.arrival-tour__lede { display: grid; gap: .65rem; margin-top: 1.65rem; color: var(--cream); font-size: clamp(.85rem, 1.1vw, 1rem); line-height: 1.5; }
.arrival-tour__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* The welcome message now belongs to the interior, not a second hero below it. */
.arrival-tour + .hero { display: none; }
@media (max-width: 640px) { .arrival-tour { height: 185vh; } .arrival-tour__sticky { min-height: 100svh; } .arrival-tour__outside { background-position: 56% center; } .arrival-tour__brand-sign { display: none; } .arrival-tour__inside { background-position: 56% center; } .arrival-tour__copy h1, .arrival-tour__inside-copy h2 { font-size: clamp(3rem, 14vw, 4.8rem); } .arrival-tour__inside-copy { top: 18%; left: 0; right: 0; padding: 1.4rem 1.5rem 1.65rem; background: linear-gradient(90deg, rgba(13,27,42,.92) 0%, rgba(13,27,42,.83) 70%, rgba(13,27,42,.2) 100%); text-shadow: 0 2px 16px rgba(0,0,0,.55); } .arrival-tour__inside-copy p { color: #e7bc76; } .arrival-tour__lede { max-width: 21rem; color: #fff; font-weight: 500; } .arrival-tour__actions { gap: .6rem; } .arrival-tour__actions .btn { padding: .72rem .85rem; font-size: .7rem; } .arrival-tour__enter { gap: 2rem; } }