/* ╔══════════════════════════════════════════════════════════════════╗
   ║  styles.css — Public-Site Stylesheet                            ║
   ╚══════════════════════════════════════════════════════════════════╝

   DESIGN MAP — What controls what (find by line number)
   ═════════════════════════════════════════════════════════════════

   FOUNDATIONS
      85   :root variables ............ Brand colours, shadows, radii, spacing
     121   Reset & base ............... Global font, link colour, heading font
     147   Skip-to-content ............ Accessibility jump-link (hidden)
     167   Focus outlines ............. Keyboard-navigation ring colour
     179   Utility classes ............ .container, .section, .text-*, .mb-*

   SHARED COMPONENTS
     206   Buttons .................... .btn + variants (--primary, --outline, --white)
     671   Section header ............. Centred label + title + sub used above grids
     2358  Pagination ................. Numbered page navigation row
     2331  Form inputs ................ Labels, text fields, textareas, selects
     2387  Feature list ............... 4-col icon+text cards (e.g. Why Choose Us)
     2444  Members bar ................ Accreditation/partner logo pills

   PAGE STRUCTURE — top to bottom as a visitor scrolls
     264   Top bar .................... Thin dark strip: phone, email, social icons
     286   Header / Nav ............... Sticky white bar: logo + nav links + dropdowns
                                       Burger menu (mobile) at ~2506
     435   Hero ....................... Full-width dark banner: headline, CTAs, trust panel
     484   Stats bar .................. Cream strip with 3–4 large number stats
     539   Offer banner ............... Gold gradient strip with promotional CTA
     605   Services grid .............. Card grid of service offerings
     711   About split ................ 2-col: image left, text + highlight cards right
     775   Property cards ............. Listing cards: image, badge, price, address, features
    1069   Testimonials ............... Quote cards with star rating + author
    1254   CTA section ................ Dark navy call-to-action band
    2048   Footer ..................... 4-col footer: brand, nav links ×2, contact info
                                       Bottom bar (copyright, legal links) at ~2242

   PAGE-SPECIFIC LAYOUTS
     886   Property detail ............ Gallery, price/address, stats, description, sidebar
    1277   Page banner ................ Top banner on inner pages (breadcrumb, overlay)
    1364   Content / service pages .... Prose blocks, info boxes, CTA bands
    1569   Steps ...................... Numbered step cards (e.g. How It Works)
    1624   Accordion .................. Collapsible FAQ items
    1665   Contact cards .............. Icon + label + value pill cards
    1750   Contact page ............... Form panel + sidebar with info, map, quick links
    1933   Valuation page ............. Next-steps sidebar, testimonial snippet
    2282   Search bar ................. Property filter: location, type, price, bedrooms

   HOMEPAGE-SPECIFIC ADDITIONS (extends base components above)
    3174   Hero two-column ............ Trust badge panel beside headline
    3244   Process steps row .......... 3-col step cards with connectors
    3329   Cost comparison ............ Side-by-side price comparison widget
    3406   About office card .......... Dark card with address/phone/hours
    3473   Dual-path CTA .............. Two-column CTA (Selling / Buying paths)
    3537   Success panel .............. Form submission confirmation card

   PROPERTY LISTING PAGE
    2755   Property card actions ...... View/Enquire button row below each card
    2770   Share buttons .............. Social share icon row on property detail
    2819   Similar properties ......... 3-col grid of related listings
    2844   Sold showcase .............. Cream-bg grid of recently sold properties
    2877   Seller cards ............... 3-col "Why Sell With Us" on dark navy bg

   VISUAL EXTRAS
    2691   Fade-in animation .......... Scroll-reveal (opacity + translateY)
    2722   Back to top ................ Fixed bottom-right circle button
    2706   Loading / empty states ..... Spinner + "no results" placeholder
    2994   Cookie banner .............. GDPR bar fixed to bottom of viewport
    3033   EPC chart .................. Colour-coded A–G energy rating bars
    3091   Council tax badge .......... Navy/gold pill for council tax band
    2933   Print stylesheet ........... Hides nav, footer, sidebar for @media print
    2965   Reduced motion ............. Disables animation for prefers-reduced-motion

   RESPONSIVE BREAKPOINTS
    2506   ≤900 px .................... Burger menu replaces nav links
    2543   ≤1024 px ................... About/footer grids collapse
    2555   ≤768 px .................... Single-column stacking, reduced spacing
    2628   ≤480 px .................... Phone-size: full-width buttons, tighter padding

   NAMING: BEM-lite — .block / .block__element / .block--modifier
   COLOURS: see :root below — --navy (brand), --gold (accent), --cream (bg)
   ═════════════════════════════════════════════════════════════════ */

/* ---------- CSS Variables ----------
   Brand palette, greys, shadows, radii, max-width.
   Change a value here → it updates everywhere.
*/ 

:root {
  --navy: #1a2744;
  --navy-light: #243351;
  --navy-dark: #111b30;
  --gold: #c8a95e;
  --gold-light: #ddc17a;
  --gold-dark: #a88b3d;
  --cream: #faf8f4;
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --green: #16a34a;
  --red: #dc2626;
  --blue: #2563eb;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --radius: 8px;
  --radius-lg: 12px;
  --transition: .3s ease;
  --max-width: 1200px;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
}

/* ---------- Reset & Base ----------
   Body font: Inter (sans). Headings: Playfair Display (serif).
   line-height 1.7 for body text, 1.3 for headings.
*/ 
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: 92px; /* offset for fixed header */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-dark); text-decoration: none; transition: color var(--transition); -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--gold); }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1.3;
  font-weight: 700;
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

/* ---------- Skip to Content (accessibility — hidden until focused) ---------- */ 
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: .75rem 1.5rem;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-to-content:focus {
  left: 0;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Focus Styles ----------
   Gold outline ring — only visible on keyboard (Tab) navigation.
*/ 
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Utility Classes ----------
   .container — max 1200 px centred column with side padding.
   .section   — vertical padding for page sections; --gray/--navy/--cream bg variants.
   .text-*    — alignment + colour.  .mb-* / .mt-* — spacing.
*/ 
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline-start: max(1.5rem, env(safe-area-inset-left, 1.5rem));
  padding-inline-end: max(1.5rem, env(safe-area-inset-right, 1.5rem));
}
.section { padding: 4.75rem 0; }
.section--gray { background: var(--gray-50); }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--cream { background: var(--cream); }
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-navy { color: var(--navy); }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }

/* ---------- Buttons ----------
   .btn            — base sizing.  Add a modifier:
   --primary       — gold fill (main CTA)
   --outline       — navy border, transparent bg
   --white         — white fill (used on dark sections)
   --sm / --lg     — size variants
   Hover: darker shade + 2 px lift.
*/ 
.btn {
  display: inline-block;
  padding: .875rem 2rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .9375rem;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  text-align: center;
  font-family: var(--font-body);
  letter-spacing: .02em;
}
.btn--primary {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.btn--primary:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--outline:hover {
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--white {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn--white:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
  transform: translateY(-2px);
}
.btn--sm { padding: .625rem 1.25rem; font-size: .875rem; }
.btn--lg { padding: 1rem 2.5rem; font-size: 1.0625rem; }

/* ---------- Top Bar ---------- */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--navy-dark);
  color: rgba(255,255,255,.6);
  font-size: .8rem;
  padding: .8rem 0;
  border-top: 1px solid rgba(200,169,94,.18);
  /* Hidden by default — JS adds .bottom-bar--visible when scrolling */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.bottom-bar--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bottom-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}
.bottom-bar a { color: rgba(255,255,255,.6); transition: color var(--transition); }
.bottom-bar a:hover { color: var(--gold); }
.bottom-bar__contact { display: flex; gap: 1.25rem; align-items: center; font-size: .8rem; }
.bottom-bar__contact i { color: var(--gold); margin-right: .3rem; font-size: .75rem; }
.bottom-bar__social { display: flex; gap: .875rem; align-items: center; }
.bottom-bar__social a { font-size: .875rem; opacity: .7; transition: opacity var(--transition), color var(--transition); }
.bottom-bar__social a:hover { opacity: 1; color: var(--gold); }

/* ---------- Header / Navigation ----------
   .header            — sticky white bar; gains shadow on scroll (JS adds --scrolled).
   .nav__link         — gold underline slides in from centre on hover.
   .nav__dropdown     — sub-menu card with gold top border.
   .nav__toggle       — animated burger → X (visible ≤900 px).
   .nav__sep          — vertical divider before the header CTA button.
   → Mobile burger menu overrides: see ~line 2559.
*/
.header {
  background: var(--white);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--gray-100);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.header--scrolled {
  box-shadow: 0 4px 20px rgba(26,39,68,.10);
  border-bottom-color: transparent;
}
.header--compact {
  box-shadow: 0 4px 20px rgba(26,39,68,.12);
  border-bottom-color: transparent;
}
.header--compact .header__inner {
  height: 60px;
}
.header--compact .logo__img {
  max-height: 46px;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 92px;
  transition: height .3s ease;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo__img { height: auto; width: auto; max-height: 76px; transition: max-height .3s ease; }
.logo__img--light { filter: brightness(0) invert(1); }

/* Nav */
.nav { display: flex; align-items: center; height: 100%; }
.nav__list { display: flex; gap: 0; align-items: center; height: 100%; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; height: 100%; display: flex; align-items: center; }

.nav__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 .875rem;
  color: var(--gray-600);
  font-weight: 500;
  font-size: .9375rem;
  white-space: nowrap;
  position: relative;
  transition: color var(--transition);
}
/* Gold underline that slides in from centre on hover */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 3px;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
  transition: left .22s ease, right .22s ease;
}
.nav__link:hover,
.nav__link--active { color: var(--navy); }
.nav__link:hover::after,
.nav__link--active::after { left: .875rem; right: .875rem; }
.nav__link--active { font-weight: 600; }

/* Thin vertical rule before the CTA button */
.nav__sep {
  width: 1px;
  align-self: stretch;
  background: var(--gray-200);
  margin: 1.25rem .625rem;
  flex-shrink: 0;
}

/* Dropdown */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 28px rgba(26,39,68,.14);
  padding: .375rem 0 .625rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 200;
  border-top: 3px solid var(--gold);
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.nav__dropdown-link {
  display: flex;
  align-items: center;
  padding: .625rem 1.25rem;
  color: var(--gray-600);
  font-size: .875rem;
  position: relative;
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
}
.nav__dropdown-link::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transition: transform var(--transition);
  border-radius: 0 2px 2px 0;
}
.nav__dropdown-link:hover { background: var(--gray-50); color: var(--navy); padding-left: 1.625rem; }
.nav__dropdown-link:hover::before { transform: scaleY(1); }

/* Animated hamburger — hidden on desktop, shown ≤900px */
.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  padding: .5rem .625rem;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), background var(--transition);
}
.nav__toggle:hover { border-color: var(--gold); background: var(--gray-50); }
.nav__burger { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, width .2s ease;
  transform-origin: center;
}
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) { opacity: 0; width: 0; }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: 7rem 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 900"><rect fill="%231a2744" width="1440" height="900"/><circle fill="%23243351" cx="200" cy="200" r="300"/><circle fill="%23243351" cx="1200" cy="700" r="400"/></svg>') center/cover;
  opacity: .3;
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}
.hero__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  color: var(--white);
  margin-bottom: 1.5rem;
}
.hero__title span { color: var(--gold); display: block; }
.hero__text {
  font-size: 1.125rem;
  color: var(--gray-300);
  margin-bottom: 2.5rem;
  line-height: 1.8;
}
.hero__buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Stats Bar ----------
   Cream strip between hero and offer banner.
   Large numbers with gold underline accent + vertical dividers.
*/
.stats-bar {
  background: var(--cream);
  border-top: 1px solid rgba(200,169,94,.2);
  border-bottom: 1px solid rgba(200,169,94,.2);
}
.stats-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2.75rem 0;
}
.stats-bar__stat {
  flex: 1;
  max-width: 240px;
  text-align: center;
  padding: 0 2rem;
}
.stats-bar__number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.02em;
}
/* Gold underline accent beneath each stat number */
.stats-bar__number::after {
  content: '';
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin: .5rem auto 0;
}
.stats-bar__label {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gray-500);
  margin-top: .5rem;
}
.stats-bar__divider {
  width: 1px;
  height: 3.5rem;
  background: rgba(200,169,94,.3);
  flex-shrink: 0;
}

/* ---------- Offer Banner ---------- */
.offer-banner {
  padding: 3rem 0;
}
.offer-banner__card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy) 0%, #243660 55%, #1e305a 100%);
  padding: 3rem 3.5rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  z-index: 1;
}
/* Large decorative house icon — full-bleed watermark, positioned on the card itself */
.offer-banner__deco {
  position: absolute;
  right: -4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28rem;
  line-height: 1;
  color: rgba(200,169,94,.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.offer-banner__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  position: relative;
  z-index: 1;
}
.offer-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(200,169,94,.15);
  color: var(--gold-light);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .15em;
  padding: .3rem .875rem;
  border-radius: 50px;
  border: 1px solid rgba(200,169,94,.3);
  width: fit-content;
}
.offer-banner__text {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.35;
  font-family: var(--font-heading);
}
.offer-banner__text strong { color: var(--gold-light); }
.offer-banner__detail {
  font-size: .9375rem;
  font-weight: 400;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
}
.offer-banner__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.offer-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--navy);
  padding: 1rem 2.25rem;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 1.0625rem;
  transition: all var(--transition);
  box-shadow: 0 4px 20px rgba(200,169,94,.35);
}
.offer-banner__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(200,169,94,.5);
  color: var(--navy-dark);
}
.offer-banner__subtext {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  text-align: center;
  letter-spacing: .03em;
}

/* ---------- Services Grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 2rem;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  color: inherit;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold-light);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--gold);
  font-size: 1.5rem;
}
.service-card__title {
  font-size: 1.25rem;
  margin-bottom: .75rem;
}
.service-card__text {
  font-size: .9375rem;
  color: var(--gray-600);
  margin-bottom: 1.5rem;
}
.service-card__link {
  font-weight: 600;
  font-size: .875rem;
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.service-card__link:hover {
  gap: .6rem;
  color: var(--navy);
}

/* ---------- Section Header ---------- */
.section-header {
  max-width: 640px;
  margin: 0 auto 2.75rem;
  text-align: center;
}
.section-header__label {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--navy);
  margin-bottom: .75rem;
}
/* Decorative flanking lines — only on centred section-header blocks, not inline uses */
.section-header .section-header__label::before,
.section-header .section-header__label::after {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--gold-dark);
  opacity: .5;
  flex-shrink: 0;
}
.section-header__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
}
.section-header__text {
  font-size: 1.0625rem;
  color: var(--gray-600);
}
.section--navy .section-header__label { color: var(--gold); }
.section--navy .section-header__text { color: var(--gray-300); }
.section--cream .section-header__label { color: var(--navy); }
.section--gray  .section-header__label { color: var(--navy); }

/* ---------- About Split ---------- */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.about-split__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--gray-200);
  position: relative;
}
.about-split__image img { width: 100%; height: 100%; object-fit: cover; }
.about-split__content h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-bottom: 1.5rem;
}
.about-split__content p {
  margin-bottom: .875rem;
  color: var(--gray-600);
}
.about-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .375rem;
}
.about-highlight {
  display: flex;
  align-items: start;
  gap: .75rem;
  padding: .375rem .75rem;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.about-highlight:hover {
  background: rgba(200,169,94,.07);
}
.about-highlight__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(200,169,94,.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  font-size: .875rem;
  transition: background var(--transition), color var(--transition);
}
.about-highlight:hover .about-highlight__icon {
  background: rgba(200,169,94,.25);
  color: var(--gold);
}
.about-highlight__text {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy);
}

/* ---------- Property Cards ----------
   Used on: property-for-sale, homepage featured, property detail (similar).
   .property-card           — white card, lifts on hover.
   .property-card__image    — 16:10 image, zooms on hover.
   .property-card__badge    — coloured pill: --sale (green), --under-offer (orange),
                              --sold (red), --let (blue).
   .property-card__body     — price, address, feature chips (beds/baths/type).
*/ 
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 2rem;
}
.property-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.property-card > a {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.property-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.property-card__image {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--gray-200);
  overflow: hidden;
}
.property-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.property-card:hover .property-card__image img {
  transform: scale(1.05);
}
.property-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .375rem .875rem;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.property-card__badge--sale {
  background: #15803d;
  color: var(--white);
}
.property-card__badge--under-offer {
  background: #b45309;
  color: var(--white);
}
.property-card__badge--sold {
  background: var(--red);
  color: var(--white);
}
.property-card__badge--let {
  background: var(--blue);
  color: var(--white);
}
.property-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.property-card__price {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .5rem;
}
.property-card__address {
  font-size: .9375rem;
  color: var(--gray-600);
  margin-bottom: 1rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.property-card__features {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
  margin-top: auto;
}
.property-card__feature {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  color: var(--gray-500);
}
.property-card__feature i { color: var(--gold-dark); }

/* ---------- Property Detail Page ---------- */
.pd-gallery { margin-bottom: 2.5rem; }
.pd-gallery__main {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.pd-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.9);
  color: var(--navy);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-gallery__nav:hover { background: var(--white); box-shadow: var(--shadow-md); }
.pd-gallery__nav--prev { left: 1rem; }
.pd-gallery__nav--next { right: 1rem; }
.pd-gallery__counter {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0,0,0,.6);
  color: var(--white);
  padding: .25rem .75rem;
  border-radius: 50px;
  font-size: .8125rem;
  font-weight: 500;
}
.pd-gallery__thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
}
.pd-gallery__thumb {
  flex: 0 0 auto;
  width: 80px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .6;
  transition: all var(--transition);
  padding: 0;
  background: none;
}
.pd-gallery__thumb:hover { opacity: .9; }
.pd-gallery__thumb--active { border-color: var(--gold); opacity: 1; }
.pd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pd-info {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3rem;
  align-items: start;
}
.pd-price {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .5rem;
}
.pd-address {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: .25rem;
}
.pd-area {
  font-size: 1rem;
  color: var(--gray-500);
  margin-bottom: 1.5rem;
}
.pd-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 2rem;
}
.pd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-width: 70px;
}
.pd-stat i { font-size: 1.25rem; color: var(--gold-dark); }
.pd-stat span { font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.pd-stat small { font-size: .75rem; color: var(--gray-500); }

.pd-section { margin-bottom: 2rem; }
.pd-section h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}
.pd-description {
  color: var(--gray-600);
  line-height: 1.8;
  white-space: pre-line;
}
.pd-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: .75rem;
}
.pd-features li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  color: var(--gray-600);
}
.pd-features li i { color: var(--green); font-size: .8rem; }

.pd-contact-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--gray-200);
  margin-bottom: 1.5rem;
}
.pd-contact-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .5rem;
}
.pd-contact-card p {
  font-size: .9rem;
  color: var(--gray-500);
  margin-bottom: 1.25rem;
}
.pd-summary-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--gray-200);
}
.pd-summary-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}
.pd-summary-table { width: 100%; border-collapse: collapse; }
.pd-summary-table td {
  padding: .625rem 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: .9rem;
}
.pd-summary-table td:first-child { color: var(--gray-500); width: 45%; }
.pd-summary-table td:last-child { font-weight: 600; color: var(--gray-700); }
.pd-summary-table tr:last-child td { border-bottom: none; }

@media (max-width: 768px) {
  .pd-info { grid-template-columns: 1fr; gap: 2rem; }
  .pd-price { font-size: 1.5rem; }
  .pd-gallery__thumb { width: 64px; height: 48px; }
}

/* ---------- Testimonials ----------
   Auto-fill grid of quote cards.
   Gold top accent bar + large decorative “ glyph.
   Author footer strip with avatar circle + name + stars.
*/
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.75rem;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* Gold top accent bar */
.testimonial-card::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  flex-shrink: 0;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold-light);
}
/* Large decorative quote glyph — positioned behind text */
.testimonial-card__body {
  padding: 1.75rem 1.75rem 1.25rem;
  position: relative;
  flex: 1;
}
.testimonial-card__body::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 7rem;
  color: var(--gold);
  opacity: .12;
  position: absolute;
  top: -.25rem;
  left: 1rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.testimonial-card__quote {
  font-size: .9375rem;
  color: var(--gray-700);
  font-style: italic;
  line-height: 1.8;
  position: relative; /* sits above ::before glyph */
}
/* Author footer strip */
.testimonial-card__footer {
  padding: 1rem 1.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  border-top: 1px solid var(--gray-100);
}
.testimonial-card__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial-card__meta {
  flex: 1;
  min-width: 0;
}
.testimonial-card__author {
  font-weight: 700;
  color: var(--navy);
  font-size: .875rem;
  line-height: 1.3;
}
.testimonial-card__location {
  font-size: .8125rem;
  color: var(--gray-500);
}
.testimonial-card__location:empty { display: none; }
.testimonial-card__stars {
  color: var(--gold);
  font-size: .8125rem;
  gap: .1rem;
  display: flex;
  margin-top: .25rem;
}

/* ---------- Testimonials page extras ---------- */
/* Star row inside the stats bar */
.testi-stars {
  display: inline-flex;
  gap: .15rem;
  color: var(--gold);
  font-size: .875rem;
  margin-right: .35rem;
  vertical-align: middle;
}

/* Empty state */
.testi-empty {
  text-align: center;
  padding: 5rem 1rem;
}
.testi-empty i {
  font-size: 3rem;
  color: var(--gold-dark);
  opacity: .4;
  margin-bottom: 1.25rem;
}
.testi-empty h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--navy);
  margin-bottom: .75rem;
}
.testi-empty p {
  color: var(--gray-500);
  font-size: 1rem;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}
.testi-empty a { color: var(--gold-dark); }

/* Leave a review band */
.testi-leave-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 2.5rem 3rem;
  box-shadow: var(--shadow-sm);
}
.testi-leave-review__text h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--navy);
  margin-bottom: .5rem;
}
.testi-leave-review__text p {
  color: var(--gray-500);
  font-size: .9375rem;
  line-height: 1.7;
  margin: 0;
  max-width: 520px;
}
.testi-leave-review__actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .testi-leave-review {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.75rem;
  }
  .testi-leave-review__actions { width: 100%; }
  .testi-leave-review__actions .btn { flex: 1; justify-content: center; }
}

/* ---------- CTA Section ---------- */
.cta-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 4.75rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: rgba(200,169,94,.08);
  border-radius: 50%;
}
.cta-section__inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cta-section h2 { color: var(--white); font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.cta-section p { color: var(--gray-300); font-size: 1.0625rem; margin-bottom: 2rem; }
.cta-section .btn { margin: 0 .5rem .75rem; }

/* ---------- Page Banner ----------
   Top banner on inner pages (property-for-sale, contact, etc.).
   Navy gradient bg — supports optional background image with overlay.
   Gold rule beneath h1. Breadcrumb row. Optional overlapping contact cards.
*/
.page-banner {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  background-size: cover;
  background-position: center;
  padding: 5.5rem 0 4.5rem;
  text-align: center;
  overflow: hidden;
}
.page-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 39, 68, 0.62);
  pointer-events: none;
}
.page-banner--no-image .page-banner__overlay { display: none; }
.page-banner__inner {
  position: relative;
  z-index: 1;
}
.page-banner h1 {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0;
}
/* Gold ornament — consistent heading underline on every page banner */
.page-banner h1::after {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--gold);
  margin: .875rem auto 0;
  border-radius: 2px;
  opacity: .65;
}
.page-banner__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--gray-400);
  margin-top: 1rem;
}
.page-banner__breadcrumb a { color: var(--gold); }
.page-banner__subtitle {
  color: var(--gray-300);
  font-size: 1.125rem;
  max-width: 640px;
  margin: 1rem auto 0;
  line-height: 1.7;
}
.banner-search-btn { display: none; }

/* Extra bottom padding when cards overlap below */
.page-banner--has-cards { padding-bottom: 6rem; }

/* Cards row — overlapping the next section via negative margin */
.page-banner__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
  margin-bottom: -2.5rem;
  position: relative;
  z-index: 2;
}
.page-banner__cards--4col { grid-template-columns: repeat(4, 1fr); }
.page-banner__cards--4col .contact-card__value {
  white-space: normal;
  font-size: .875rem;
}
@media (max-width: 900px) {
  .page-banner__cards { grid-template-columns: 1fr 1fr; gap: .875rem; }
  .page-banner__cards--4col { grid-template-columns: repeat(2, 1fr); gap: .875rem; }
  .contact-card__value { white-space: normal; word-break: break-word; font-size: .875rem; }
}
@media (max-width: 480px) {
  .page-banner__cards,
  .page-banner__cards--4col { grid-template-columns: 1fr; gap: .75rem; }
  /* Cancel negative overlap — map sits naturally below the stacked cards */
  .page-banner__cards { margin-bottom: 0; }
  .page-banner--has-cards { padding-bottom: 2rem; }
  .contact-card__value { white-space: normal; word-break: break-word; }
  .contact-card { overflow: hidden; }
}

/* ---------- Content Pages ---------- */
.content-page {
  padding: 5rem 0;
}

/* Service content blocks container */
.service-blocks {
  background: var(--white);
}

/* ---------- Prose block ---------- */
.sb-prose {
  padding: 2.5rem 0;
  background: var(--white);
}
.sb-prose + .sb-prose {
  border-top: 1px solid var(--gray-100);
  padding-top: 2rem;
}
.sb-prose__inner {
  max-width: 760px;
  margin: 0 auto;
}
.sb-prose__inner > *:last-child { margin-bottom: 0; }
.sb-prose__inner h2 {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  color: var(--navy);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.sb-prose__inner h3 {
  font-size: 1.25rem;
  color: var(--navy);
  margin: 1.75rem 0 .625rem;
}
.sb-prose__inner p {
  color: var(--gray-600);
  line-height: 1.85;
  margin-bottom: 1.125rem;
}
.sb-prose__inner ul,
.sb-prose__inner ol {
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}
.sb-prose__inner ul { list-style: none; padding-left: 0; }
.sb-prose__inner ul li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: .625rem;
}
.sb-prose__inner ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .625em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.sb-prose__inner ol {
  list-style: none;
  counter-reset: ol-counter;
  padding-left: 0;
}
.sb-prose__inner ol li {
  counter-increment: ol-counter;
  position: relative;
  padding-left: 2.5rem;
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.sb-prose__inner ol li::before {
  content: counter(ol-counter);
  position: absolute;
  left: 0;
  top: .05em;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 700;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-prose__inner strong { color: var(--navy); font-weight: 700; }

/* ---------- Info box block ---------- */
.sb-infobox {
  padding: 2.5rem 0;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.sb-infobox__inner {
  max-width: 760px;
  margin: 0 auto;
}
.sb-infobox__panel {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid var(--gold-light, #e8c86a);
  border-left: 5px solid var(--gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.75rem 2rem;
}
.sb-infobox__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}
.sb-infobox__content h2 {
  font-size: 1.0625rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .5rem;
}
.sb-infobox__content p {
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: .5rem;
}
.sb-infobox__content p:last-child { margin-bottom: 0; }
.sb-infobox__content small { color: var(--gray-500); font-size: .8125rem; }
.sb-infobox__content strong { color: var(--navy); font-weight: 700; }

/* ---------- CTA Band block ---------- */
.sb-ctaband {
  background: var(--navy);
  padding: 3rem 0;
}
.sb-ctaband__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}
.sb-ctaband__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 2px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  flex-shrink: 0;
}
.sb-ctaband__body h2 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .375rem;
}
.sb-ctaband__body p {
  color: var(--gray-300);
  font-size: .9375rem;
  line-height: 1.65;
  margin: 0;
}
.sb-ctaband__body p strong { color: var(--gold); font-weight: 700; }
.sb-ctaband__btn {
  display: inline-block;
  flex-shrink: 0;
  background: var(--gold);
  color: var(--navy);
  padding: .875rem 2rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .9375rem;
  white-space: nowrap;
  transition: all var(--transition);
}
.sb-ctaband__btn:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
@media (max-width: 768px) {
  .sb-ctaband__inner { grid-template-columns: auto 1fr; }
  .sb-ctaband__icon { display: none; }
  .sb-ctaband__btn { grid-column: 1 / -1; text-align: center; width: 100%; }
}

/* ---------- Steps ----------
   Numbered step cards in an auto-fit grid.
   Gold circle with step number; hover lifts card.
*/ 
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 2rem;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 2rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  counter-increment: step;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-light);
}
.step:hover::before {
  background: var(--navy);
  color: var(--gold);
}
.step::before {
  content: counter(step);
  position: absolute;
  top: -12px;
  left: 24px;
  width: 32px;
  height: 32px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: .875rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__title {
  font-size: 1.125rem;
  margin-bottom: .5rem;
  margin-top: .5rem;
}
.step__text {
  font-size: .9375rem;
  color: var(--gray-600);
}

/* ---------- FAQ / Accordion ---------- */
.accordion { max-width: 820px; margin: 0 auto; }
.accordion__item {
  border-bottom: 1px solid var(--gray-200);
}
.accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  font-size: 1.0625rem;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}
.accordion__header i {
  transition: transform var(--transition);
  color: var(--gold-dark);
}
.accordion__item.active .accordion__header i {
  transform: rotate(180deg);
}
.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.accordion__body-inner {
  padding: 0 0 1.25rem;
  color: var(--gray-600);
  font-size: .9375rem;
}
.accordion__item.active .accordion__body {
  max-height: 500px;
}

/* ---------- Contact Cards ---------- */
.contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.375rem 1.5rem;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(0,0,0,.14);
  transition: transform var(--transition), box-shadow var(--transition);
  text-align: left;
}
.contact-card:not(.contact-card--static):hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.contact-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(200,169,94,.12);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  font-size: 1.125rem;
}
.contact-card__body { flex: 1; min-width: 0; }
.contact-card__label {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: .2rem;
}
.contact-card__value {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-card__arrow {
  flex-shrink: 0;
  color: var(--gray-300);
  font-size: .8125rem;
  transition: color var(--transition), transform var(--transition);
}
.contact-card:hover .contact-card__arrow {
  color: var(--gold);
  transform: translateX(3px);
}
.contact-card__map-link {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--gold-dark);
  font-size: .9rem;
  transition: background var(--transition), color var(--transition);
}
.contact-card__map-link:hover { background: var(--gold); color: var(--white); }

/* ---------- Map (contained) ---------- */
.contact-map-wrap {
  background: var(--gray-50);
  padding: 2.5rem 0 0;
}
.contact-map {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}

/* ---------- Contact Main: form panel (left) + sidebar (right) ----------
   2-col grid: 1fr | 360 px. Sidebar has info block, valuation CTA, quick links.
   Collapses to single column ≤900 px (see responsive section).
*/
.contact-main {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}
.contact-form-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
}
.contact-form-panel h2 {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  color: var(--navy);
  margin-bottom: .375rem;
}
.contact-form-panel__sub {
  color: var(--gray-500);
  font-size: .9375rem;
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--gray-100);
}
.contact-form__submit { width: 100%; justify-content: center; }

/* Sidebar */
.contact-info-aside { display: flex; flex-direction: column; gap: 1.25rem; }

/* Single contact info block containing all details */
.contact-info-block {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  text-decoration: none;
  transition: background var(--transition);
}
.contact-detail:last-child { border-bottom: none; }
.contact-detail:not(.contact-detail--plain):hover { background: var(--cream); }
.contact-detail__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-top: .125rem;
  background: rgba(200,169,94,.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  font-size: .9rem;
}
.contact-detail__text { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.contact-detail__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gray-400);
}
.contact-detail__value {
  display: block;
  font-size: .875rem;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.5;
}
.contact-directions-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gold-dark);
  margin-top: .375rem;
  transition: color var(--transition);
}
.contact-directions-link:hover { color: var(--navy); }

/* Valuation CTA card */
.contact-valuation-cta {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
}
.contact-valuation-cta__icon {
  width: 52px;
  height: 52px;
  background: rgba(200,169,94,.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.25rem;
  margin: 0 auto 1rem;
}
.contact-valuation-cta h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--white);
  margin-bottom: .5rem;
}
.contact-valuation-cta p {
  font-size: .875rem;
  color: var(--gray-400);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* Quick links strip */
.contact-quick-links {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.contact-quick-links li { border-bottom: 1px solid var(--gray-100); }
.contact-quick-links li:last-child { border-bottom: none; }
.contact-quick-links a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem;
  font-size: .875rem;
  color: var(--gray-700);
  transition: background var(--transition), color var(--transition);
}
.contact-quick-links a i { color: var(--gold-dark); width: 14px; text-align: center; flex-shrink: 0; }
.contact-quick-links a:hover { background: var(--cream); color: var(--navy); }

/* Contact Form Extras */
.form-group--checkbox {
  display: flex;
  align-items: start;
  gap: .5rem;
}
.form-group--checkbox input[type="checkbox"] {
  width: auto;
  margin-top: .25rem;
}
.form-group--checkbox label {
  font-size: .875rem;
  margin-bottom: 0;
}
.required { color: var(--red); }
.form-status {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .9375rem;
  display: none;
}
.form-status--success {
  display: block;
  background: rgba(22,163,74,.1);
  color: var(--green);
  border: 1px solid rgba(22,163,74,.2);
}
.form-status--error {
  display: block;
  background: rgba(220,38,38,.1);
  color: var(--red);
  border: 1px solid rgba(220,38,38,.2);
}

/* ---------- Valuation Page ---------- */

/* What Happens Next steps block */
.val-steps {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.val-steps__heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 1.25rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--gray-100);
}
.val-steps__heading i { color: var(--gold-dark); margin-right: .4rem; }
.val-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.val-step {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
}
.val-step__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(200,169,94,.15);
  color: var(--gold-dark);
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
}
.val-step__text {
  font-size: .9rem;
  color: var(--gray-600);
  line-height: 1.55;
}
.val-step__text strong { color: var(--navy); font-weight: 600; }

/* Featured testimonial snippet */
.val-testimonial {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border-left: 4px solid var(--gold);
}
.val-testimonial__stars {
  display: flex;
  gap: .15rem;
  color: var(--gold);
  font-size: .8125rem;
  margin-bottom: .875rem;
}
.val-testimonial__quote {
  font-size: .9375rem;
  color: var(--gray-700);
  line-height: 1.65;
  font-style: italic;
  margin: 0 0 1rem;
}
.val-testimonial__author {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .875rem;
}
.val-testimonial__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700;
}
.val-testimonial__name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}
.val-testimonial__name small {
  display: block;
  font-size: .8125rem;
  color: var(--gray-500);
  font-weight: 400;
}
.val-testimonial__link {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: color var(--transition);
}
.val-testimonial__link:hover { color: var(--navy); }

/* ---------- Footer ----------
   4-col grid: brand (2.2fr) | nav links | nav links | contact info (1.4fr).
   Brand col has logo, tagline, address, social icons, accreditation.
   Contact col has phone, email, hours, message link.
   Bottom bar: copyright + legal/privacy links.
   Collapses: 3-col at ≤1024 px → 1-col at ≤768 px.
*/
.footer {
  background: var(--navy-dark);
  color: var(--gray-400);
}

/* ---- Main body ---- */
.footer__body {
  padding: 5rem 0 4rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  gap: 3.5rem;
  align-items: start;
}

/* ---- Brand column ---- */
.footer__logo-link { display: inline-block; margin-bottom: 1.25rem; text-decoration: none; }
.footer__company-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}
.footer__logo {
  height: 73px;
  width: auto;
  display: block;
  mix-blend-mode: screen;
}
.footer__tagline {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--gray-400);
  max-width: 300px;
  margin: 0 0 .875rem;
}
.footer__address {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--gray-400);
  line-height: 1.6;
  font-style: normal;
  margin-bottom: 1.5rem;
}
.footer__address i {
  color: var(--gold-dark);
  font-size: .7rem;
  margin-top: .25rem;
  flex-shrink: 0;
}
.footer__social {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.footer__social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  color: var(--gray-400);
  font-size: .875rem;
  transition: background var(--transition), color var(--transition);
}
.footer__social a:hover {
  background: var(--gold);
  color: var(--navy-dark);
}
.footer__accreditation {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  color: var(--gray-400);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: .375rem .75rem;
}
.footer__accreditation i { color: var(--gold-dark); }

/* ---- Nav columns ---- */
.footer__nav,
.footer__contact-col { padding-top: 3rem; }
.footer__heading {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gray-400);
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  color: var(--gray-400);
  transition: color var(--transition), gap var(--transition);
}
.footer__links a i {
  font-size: .6rem;
  color: var(--gold-dark);
  opacity: .6;
  flex-shrink: 0;
  transition: opacity var(--transition), transform var(--transition);
}
.footer__links a:hover { color: var(--white); gap: .6rem; }
.footer__links a:hover i { opacity: 1; transform: translateX(2px); }

/* ---- Contact column ---- */
.footer__phone {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color var(--transition);
}
.footer__phone:hover { color: var(--white); }
.footer__contact-icon-wrap {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: rgba(200,169,94,.14);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  color: var(--gold-dark);
}
.footer__contact-icon-wrap--muted {
  background: rgba(255,255,255,.05);
  color: var(--gray-500);
}
.footer__email-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
  color: var(--gray-400);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: color var(--transition);
}
.footer__email-link:hover { color: var(--gold); }
.footer__hours-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.footer__hours-lines {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .8125rem;
  color: var(--gray-400);
  line-height: 1.6;
}
.footer__hours-lines span { display: block; }
.footer__message-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--gold);
  transition: color var(--transition), gap var(--transition);
}
.footer__message-link:hover { color: var(--white); gap: .6rem; }
.footer__message-link i { font-size: .7rem; }

/* ---- Bottom bar ---- */
.footer__bottom {
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1.125rem 0;
}
.footer__bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}
.footer__copy {
  font-size: .8125rem;
  color: var(--gray-400);
}
.footer__bottom-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.footer__bottom-links a {
  font-size: .8125rem;
  color: var(--gray-400);
  transition: color var(--transition);
}
.footer__bottom-links a:hover { color: var(--gold); }
.footer__cookie-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: .8125rem;
  color: var(--gray-400);
  font-family: inherit;
  transition: color var(--transition);
}
.footer__cookie-btn:hover { color: var(--gold); }

/* ---------- Property Search Bar ---------- */
.search-bar {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  gap: 1rem;
  align-items: end;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
}
.search-bar__group {
  flex: 1;
  min-width: 150px;
}
.search-bar__group label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray-500);
  margin-bottom: .375rem;
}
.search-bar__group select, .search-bar__group input {
  width: 100%;
  padding: .625rem .875rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: .9375rem;
  color: var(--gray-700);
  background: var(--white);
  font-family: var(--font-body);
  transition: border-color var(--transition);
}
.search-bar__group select:focus, .search-bar__group input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,169,94,.15);
}

/* Ties the search bar to the cream band above the listings/properties sections */
.search-bar-section {
  background: var(--cream);
  padding: 2rem 0;
}

/* Property search page: label matches hero search style */
.search-bar--page .search-bar__label {
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy);
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--gold);
  flex-basis: 100%;
  margin-bottom: .875rem;
}

/* Mobile: stack like the hero search bar */
@media (max-width: 768px) {
  .search-bar--page {
    flex-direction: column;
    align-items: stretch;
  }
  .search-bar--page .search-bar__group {
    flex: none;
    width: 100%;
    min-width: 0;
  }
  .search-bar--page .search-bar__actions {
    flex-direction: column;
    margin-left: 0;
    width: 100%;
  }
  .search-bar--page .search-bar__actions .btn {
    width: 100%;
  }
}

/* ---------- Contact Form ---------- */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .375rem;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: .9375rem;
  color: var(--gray-700);
  font-family: var(--font-body);
  transition: border-color var(--transition);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,169,94,.15);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 3rem;
}
.pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-200);
  transition: all var(--transition);
}
.pagination__link:hover, .pagination__link--active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* ---------- Feature List ---------- */
.feature-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.feature-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  padding: 1.75rem 1.25rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  border-bottom: 3px solid var(--gray-200);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-list__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--gold);
}
.feature-list__item i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: background var(--transition);
}
.feature-list__item:hover i {
  background: var(--gold);
  color: var(--navy);
}
.feature-list__item h4 {
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 700;
  margin-bottom: .2rem;
  color: var(--navy);
}
.feature-list__item p {
  font-size: .8125rem;
  color: var(--gray-500);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px)  { .feature-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .feature-list { grid-template-columns: 1fr 1fr; gap: .875rem; } }

/* ---------- Members / Partners ---------- */
.members-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 2rem 0;
  flex-wrap: wrap;
}
.members-bar__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.5rem;
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  font-weight: 600;
  color: var(--navy);
  font-size: .875rem;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.members-bar__item:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}
.members-bar__item i {
  color: var(--gold-dark);
  font-size: 1.25rem;
  transition: color var(--transition);
}
.members-bar__item:hover i { color: var(--gold); }

/* ---------- Grounds List (Law) ---------- */
.grounds-list {
  list-style: none;
  padding-left: 0;
}
.grounds-list li {
  padding: .75rem 0 .75rem 2rem;
  border-bottom: 1px solid var(--gray-100);
  position: relative;
}
.grounds-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--gold-dark);
  font-size: .8rem;
}

/* ---------- Responsive ----------
   Breakpoints (desktop-first):
   ≤900 px  — burger menu replaces nav links
   ≤1024 px — about/footer grids collapse
   ≤768 px  — single-column stacking, reduced spacing
   ≤480 px  — phone: full-width buttons, tighter padding
*/ 
/* ===== Nav: burger menu at tablet and mobile (≤900px) ===== */
@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav { position: static; }
  .nav__sep { display: none; }

  /* Backdrop — fades in behind the drawer */
  .nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 45, .65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
  }
  .nav__backdrop.active {
    opacity: 1;
    visibility: visible;
  }

  /* Slide-in drawer — always in DOM for smooth transition */
  .nav__list {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: linear-gradient(180deg, var(--navy-dark) 0%, #0d1525 100%);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.4,0,.2,1), visibility .35s;
    z-index: 1001;
    height: 100%;
    border-left: 2px solid rgba(200,169,94,.3);
    box-shadow: -8px 0 32px rgba(0,0,0,.45);
  }
  .nav__list.active {
    transform: translateX(0);
    visibility: visible;
  }

  /* Drawer header strip — hidden, Home link is top item */
  .nav__list::before { display: none; }
  .nav__list::after { display: none; }

  /* Individual items */
  .nav__item {
    height: auto;
    border-bottom: 1px solid rgba(255,255,255,.05);
    position: static;
    display: block;
  }
  .nav__item:last-child {
    border-bottom: none;
    margin-top: auto;
    padding: 1.25rem 1.25rem 2.5rem;
    background: rgba(0,0,0,.2);
    border-top: 1px solid rgba(200,169,94,.12);
  }

  /* Links */
  .nav__link {
    color: rgba(255,255,255,.75);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .01em;
    padding: 1rem 1.25rem 1rem 1.5rem;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0;
    border-left: 3px solid transparent;
    transition: color .2s, background .2s, border-color .2s, padding-left .2s;
  }
  .nav__link::after { display: none; }
  .nav__link:hover {
    color: #fff;
    background: rgba(255,255,255,.05);
    border-left-color: rgba(200,169,94,.5);
    padding-left: 1.75rem;
  }
  .nav__link--active {
    color: var(--gold);
    font-weight: 600;
    border-left-color: var(--gold);
    background: rgba(200,169,94,.1);
  }
  .nav__link--active:hover {
    color: var(--gold-light);
    padding-left: 1.5rem;
  }

  /* Dropdown sections — expanded inline below parent link */
  .nav__dropdown {
    position: static;
    top: auto;
    left: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: none;
    background: rgba(0,0,0,.3);
    border-radius: 0;
    display: block;
    padding: .25rem 0 .5rem;
    transition: none;
    width: 100%;
    min-width: 0;
    z-index: auto;
    border-left: 3px solid rgba(200,169,94,.25);
    margin-left: 0;
  }
  .nav__dropdown-link {
    color: rgba(255,255,255,.5);
    font-size: .9rem;
    letter-spacing: .01em;
    padding: .625rem 1.25rem .625rem 2.25rem;
    display: block;
    transition: color .2s, padding-left .2s;
  }
  .nav__dropdown-link::before { display: none; }
  .nav__dropdown-link:hover {
    color: var(--gold-light);
    background: rgba(200,169,94,.06);
    padding-left: 2.5rem;
  }

  /* CTA button at bottom of drawer */
  .nav__item:last-child .btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .03em;
    box-shadow: 0 4px 16px rgba(200,169,94,.25);
  }
}

@media (max-width: 1024px) {
  .section { padding: 3.75rem 0; }
  .about-split { grid-template-columns: 1fr; gap: 2rem; }
  /* Footer: 3-col on tablet (brand spans full row, then nav cols + contact) */
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; }
  .footer__brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.5rem; }
  .footer__logo-link { flex-basis: 100%; margin-bottom: 1.25rem; }
  .footer__tagline { flex-basis: 100%; max-width: none; }
  .footer__social { order: 3; flex: 0 0 auto; margin-bottom: 0; }
  .footer__address { order: 4; flex: 1; margin-bottom: 0; }
  .footer__accreditation { grid-column: unset; }
  .hero__stats { flex-wrap: wrap; gap: 2rem; }
  .contact-main { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Top bar: hidden on mobile — replaced by fixed bottom bar */
  .bottom-bar { display: none !important; }

  /* Extra bottom padding so page content clears the fixed bar */
  body { padding-bottom: 4rem; }

  /* Header: slightly reduced but still prominent on mobile */
  body { padding-top: 72px; }
  .header__inner { height: 72px; }
  .logo { flex-shrink: 1; min-width: 0; }
  .logo__img { max-height: 56px; max-width: 100%; }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 4.5rem 0 3.5rem;
    background-size: cover;
    background-position: center;
  }
  .hero__trust {
    background: linear-gradient(160deg, rgba(200,169,94,.12) 0%, rgba(255,255,255,.08) 100%) !important;
    border-color: rgba(200,169,94,.15) !important;
    border-top: 3px solid var(--gold) !important;
  }
  .hero__content { max-width: 100%; }
  .hero__text { font-size: 1rem; }
  .hero__stats { gap: 1.5rem; }
  .hero__stat-number { font-size: 1.75rem; }

  /* Layouts */
  .search-bar { flex-direction: column; margin-top: 1.5rem; padding: 1.25rem; width: 100%; box-sizing: border-box; }
  .search-bar__group { width: 100%; }
  .search-bar__group select,
  .search-bar__group input { width: 100%; box-sizing: border-box; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-group { margin-bottom: .75rem; }
  /* Footer: single column stack on mobile — hide brand text/social, nav link cols, message link */
  .footer { display: none; }
  .footer__body { padding: 3rem 0 2.5rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__brand { display: block; }
  .footer__logo-link { display: none; }
  .footer__tagline, .footer__address, .footer__social { display: none; }
  .footer__nav  { display: none; }
  .footer__message-link { display: none; }
  /* Contact col: 2-column grid — phone/email left, hours right */
  .footer__contact-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; align-items: start; }
  .footer__contact-col .footer__heading { grid-column: 1 / -1; }
  .footer__contact-details { display: flex; flex-direction: column; gap: 0.5rem; }
  .footer__hours-row { display: none; }
  .footer__phone { font-size: 1.125rem; }
  .footer__bottom .container { flex-direction: column; text-align: center; }
  .property-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-grid .testimonial-card:nth-child(n+4) { display: none; }
  /* About section: content first, office card last on mobile */
  .about-split { gap: 1.25rem; }
  .about-split__content { order: 1; background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow); }
  .about-split__content p { font-size: .9rem; margin-bottom: .5rem; }
  .about-split__image { order: 2; }
  .about-highlights { grid-template-columns: 1fr; margin-top: .25rem; }
  .about-highlight { padding: .25rem .5rem; }
  .about-highlight__icon { width: 32px; height: 32px; font-size: .8rem; }
  .offer-banner { padding: 1.5rem 0; }
  .offer-banner__card { flex-direction: column; align-items: flex-start; padding: 2rem 1.75rem; gap: 1.75rem; }
  .offer-banner__deco { font-size: 14rem; right: -1.5rem; }
  .offer-banner__action { width: 100%; align-items: stretch; }
  .offer-banner__cta { justify-content: center; }
  .stats-bar__number { font-size: 2.25rem; }
  .stats-bar__inner { gap: 0; padding: 1.75rem 0; }
  .contact-map-wrap { padding-top: 2rem; }

  /* Mobile search button — shown inside the page banner on the property search page */
  .banner-search-btn {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
  }
}

@media (max-width: 480px) {
  /* Cards stack 1-col and are much taller — cancel the negative overlap
     and let the map wrap sit naturally below */
  .page-banner__cards { margin-bottom: 0; }
  .contact-map-wrap { padding-top: 2rem; }
  .contact-form-panel { padding: 1.5rem; }
  .feature-list { grid-template-columns: repeat(2, 1fr); }

  /* Page content */
  .page-banner {
    padding: 1.5rem 0 1.25rem;
    background-size: cover;
    background-position: center;
  }
  .page-banner--no-image .page-banner__overlay { display: none; }
  .page-banner__subtitle { display: none; }
  .page-banner h1 { font-size: 1.5rem; }
  .page-banner h1::after { display: none; }
  .page-banner__breadcrumb { margin-top: .5rem; font-size: .7rem; gap: .25rem; flex-wrap: nowrap; }
  .page-banner__breadcrumb a { flex-shrink: 0; white-space: nowrap; }
  .page-banner__breadcrumb span:not(:last-child) { flex-shrink: 0; }
  .page-banner__breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .page-banner--has-cards { padding-bottom: 4.5rem; }
  .page-banner .container::after { margin-top: 1rem; }
  .content-page { padding: 3.5rem 0; }
  .section-header { margin-bottom: 2rem; }
  .members-bar { gap: 1.5rem; }

  /* CTA buttons */
  .cta-section .btn { margin: 0 .25rem .5rem; }

  /* Offer banner */
  .offer-banner__text { font-size: 1.25rem; }

  /* Hero buttons — full width stacked column on mobile */
  .hero__buttons { flex-direction: column; }
  .hero__buttons .btn { width: 100%; }

  /* Property card price */
  .property-card__price { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  /* Container */
  .container { padding: 0 1rem; }

  .section { padding: 2.5rem 0; }

  /* Hero */
  .hero { padding: 3rem 0 2.5rem; }

  /* Stats bar — 2-column grid on small phones, only first 2 stats */
  .stats-bar__inner { display: grid; grid-template-columns: auto auto; gap: 1rem 2.5rem; padding: 1.5rem 1rem; text-align: center; justify-content: center; }
  .stats-bar__divider { display: none; }
  .stats-bar__stat:nth-child(5) { display: none; }
  .hero__stat-label { font-size: .8125rem; }

  /* Sections */
  .section { padding: 2.5rem 0; }
  .section-header__title { margin-bottom: .75rem; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .service-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: .875rem 1rem;
    gap: .875rem;
  }
  .service-card__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin: 0;
    font-size: 1rem;
    border-radius: var(--radius);
  }
  .service-card__title { font-size: .9375rem; margin-bottom: 0; }
  .service-card__text { display: none; }
  .service-card__link { display: none; }

  .steps { grid-template-columns: 1fr; }

  /* Contact */
  .contact-form-panel { padding: 1.5rem; }
  .search-bar { padding: 1rem; margin-top: 1rem; }

  /* Page content */
  .page-banner { padding: 2.5rem 0 1.5rem; }
  .content-page { padding: 2rem 0; }
  .content-page h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
  .content-page h3 { font-size: 1.2rem; }
  .info-box { padding: 1.25rem; }

  /* Cards & items */
  .testimonial-card__body { padding: 1.25rem 1.25rem 1rem; }
  .testimonial-card__body::before { font-size: 5rem; top: -.15rem; left: .75rem; }
  .testimonial-card__quote { font-size: .875rem; line-height: 1.65; }
  .testimonial-card__footer { padding: .75rem 1.25rem .875rem; }
  .step { padding: 1.5rem; }

  /* Members */
  .members-bar { gap: 1rem; }
  .members-bar__item { padding: .625rem 1rem; font-size: .8125rem; }

  /* Logo */
  .logo { flex-shrink: 1; min-width: 0; }
  .logo__img { max-height: 56px; max-width: 100%; }

  /* CTA */
  .cta-section { padding: 3.5rem 0; }
  .cta-section .btn { display: block; width: 100%; margin: 0 0 .75rem; }

  /* Footer */
  .footer__body { padding: 2.5rem 0 2rem; }
  .footer__grid { gap: 1.5rem; }

  /* Offer banner */
  .offer-banner { padding: 1rem 0; }
  .offer-banner__text { font-size: 1.1875rem; }

  /* Property card body */
  .property-card__body { padding: 1.25rem; }
  .property-card__price { font-size: 1.125rem; }
  .property-card__address { font-size: .875rem; }
  .property-card__features { gap: 1rem; }

  /* Accordion readability */
  .accordion__header { font-size: 1rem; padding: 1rem 0; }
}

/* ---------- Animations ----------
   .fade-in elements start invisible + shifted down 20 px.
   JS (main.js IntersectionObserver) adds .visible on scroll →
   fades in over 0.6 s. Staggered delay on grid children.
*/ 
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Dynamic Loading States ---------- */
.property-grid__loading, .property-grid__empty {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--gray-500);
}
.property-grid__loading { display: flex; }
.property-grid__empty { display: none; }
.property-grid__empty.visible { display: flex; }
.property-grid__empty h3 { font-family: var(--font-heading); color: var(--navy); font-size: 1.25rem; }

/* ---------- Back to Top + Search Scroll Button ---------- */
.search-scroll-btn {
  display: none; /* desktop: hidden — only shown on mobile */
}
.back-to-top {
  position: fixed;
  bottom: max(2rem, calc(1rem + env(safe-area-inset-bottom, 0px)));
  right: max(2rem, env(safe-area-inset-right, 2rem));
  width: 48px;
  height: 48px;
  background: var(--navy);
  color: var(--gold);
  border: none;
  border-radius: 50%;
  font-size: 1.125rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
  z-index: 999;
  box-shadow: var(--shadow-md);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-3px);
}

/* ===================================================================
   PROPERTY MARKET DESIGN IMPROVEMENTS
   =================================================================== */

/* ---------- Property Card Actions ---------- */
.property-card__actions {
  display: flex;
  gap: .625rem;
  padding: 0 1.5rem 1.5rem;
  margin-top: 0;
  border-top: none;
}
.property-card__actions .btn {
  flex: 1;
  text-align: center;
  font-size: .8125rem;
  padding: .5rem .75rem;
}

/* ---------- Share Buttons ---------- */
.share-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--gray-200);
  margin-bottom: 1.5rem;
}
.share-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}
.share-buttons {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 1rem;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.share-btn:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}

/* ---------- Print Button ---------- */
.print-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ---------- Similar Properties ---------- */
.similar-properties {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--gray-200);
}
.similar-properties__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.5rem;
}
.similar-properties__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .similar-properties__grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .similar-properties__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Sold Showcase ---------- */
.sold-showcase {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 3rem 0;
  margin-top: 3rem;
}
.sold-showcase__header {
  margin-bottom: 2rem;
}
.sold-showcase__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .5rem;
}
.sold-showcase__subtitle {
  color: var(--gray-500);
  font-size: .9375rem;
}
.sold-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .sold-showcase__grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .sold-showcase__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Why Sell With Us (seller cards) ---------- */
.seller-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.seller-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.375rem;
  transition: background var(--transition), transform var(--transition);
}
.seller-card:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-3px);
}
.seller-card__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: rgba(200,169,94,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
  color: var(--gold);
}
.seller-card__body {
  flex: 1;
  min-width: 0;
}
.seller-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .3rem;
}
.seller-card__text {
  font-size: .875rem;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1024px) {
  .seller-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .seller-grid { grid-template-columns: 1fr; gap: .75rem; }
}

/* ---------- Testimonials Cream Variant ---------- */
.section--cream .section-header__label { color: var(--navy); }
.section--cream .testimonial-card {
  background: var(--white);
  border-color: rgba(200,169,94,.2);
}

/* ---------- Mobile contact bar ---------- */
/* Hidden on desktop — shown only on mobile via the media query below */
.mobile-contact-bar { display: none; }

@media (max-width: 768px) {
  .mobile-contact-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--navy);
    border-top: 1px solid rgba(200,169,94,.25);
    height: 3.75rem;
    justify-content: space-around;
    align-items: stretch;
  }

  .mobile-contact-bar__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.75);
    font-size: 1.25rem;
    transition: color var(--transition), background var(--transition);
    border-right: 1px solid rgba(255,255,255,.08);
  }

  .mobile-contact-bar__btn:last-child { border-right: none; }

  .mobile-contact-bar__btn:hover,
  .mobile-contact-bar__btn:active { color: var(--gold); background: rgba(255,255,255,.04); }

  /* Lift back-to-top above the fixed mobile contact bar */
  .back-to-top { bottom: calc(3.75rem + 1rem); right: 1rem; }

  /* Search scroll button — mirrors back-to-top, sits just above it */
  .search-scroll-btn {
    display: flex;
    position: fixed;
    bottom: calc(3.75rem + 1rem + 56px);
    right: 1rem;
    z-index: 999;
    width: 48px;
    height: 48px;
    background: var(--navy);
    color: var(--gold);
    border: 1px solid rgba(200,169,94,.35);
    border-radius: 50%;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
    opacity: 0;
    visibility: hidden;
  }
  .search-scroll-btn.visible { opacity: 1; visibility: visible; }
  .search-scroll-btn:hover { background: var(--gold); color: var(--navy); transform: translateY(-3px); }
}

/* ---------- @media print ---------- */
@media print {
  .bottom-bar,
  .mobile-contact-bar,
  .header,
  .footer,
  .back-to-top,
  .cta-section,
  .nav,
  .pd-contact-card,
  .share-card,
  .print-btn,
  .share-buttons,
  .similar-properties,
  .pd-summary-card,
  .pd-info__sidebar,
  .page-banner__breadcrumb,
  .offer-banner,
  .cookie-banner {
    display: none !important;
  }

  body { background: #fff; }
  .container { max-width: 100%; padding: 0 1rem; }
  .pd-info { display: block; }
  .pd-gallery__nav, .pd-gallery__counter, .pd-gallery__thumbs { display: none !important; }
  .pd-gallery__main { aspect-ratio: auto; height: auto; }
  .pd-gallery__main img { max-height: 400px; object-fit: contain; }
  .section { padding: 1rem 0; }
  .page-banner { padding: 1rem 0; background: none; color: #000; }
  .page-banner h1 { color: #000; font-size: 1.5rem; }
}

/* ---------- Reduced Motion ----------
   Disables animations when the OS "Reduce Motion" preference is on.
*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Show fade-in elements immediately — skip the reveal animation */
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Keep hover state changes (colour) but remove movement */
  .service-card:hover,
  .property-card:hover,
  .testimonial-card:hover,
  .step:hover,
  .feature-list__item:hover,
  .members-bar__item:hover,
  .btn:hover,
  .back-to-top:hover {
    transform: none;
  }
}

/* ---------- Cookie Consent Banner ----------
   GDPR bar fixed to viewport bottom. JS (cookie-consent.js) adds
   .cookie-banner--visible when consent hasn't been given yet.
*/ 
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--navy);
  color: var(--white);
  padding: 1rem 0;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .3s ease;
  box-shadow: 0 -4px 12px rgba(0,0,0,.15);
}
.cookie-banner--visible { transform: translateY(0); }
.cookie-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline-start: max(1.5rem, env(safe-area-inset-left, 1.5rem));
  padding-inline-end: max(1.5rem, env(safe-area-inset-right, 1.5rem));
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-banner__text { flex: 1; min-width: 280px; }
.cookie-banner__text p { margin: 0; font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.9); }
.cookie-banner__text a { color: var(--gold); text-decoration: underline; }
.cookie-banner__text a:hover { color: var(--gold-light); }
.cookie-banner__actions { display: flex; gap: .75rem; flex-shrink: 0; }
@media (max-width: 600px) {
  .cookie-banner__inner { flex-direction: column; text-align: center; }
  .cookie-banner__actions { width: 100%; justify-content: center; }
}

/* ---------- EPC Rating Bar Chart ----------
   Colour-coded UK EPC bands A–G on property detail sidebar.
   .epc-chart__bar--active highlights the property's actual band.
   Band widths: A=38% (most efficient) → G=100% (least).
*/
.epc-chart { margin: .75rem 0 .5rem; }
.epc-chart__title {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-500);
  margin-bottom: .5rem;
}
.epc-chart__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .2rem;
  opacity: .55;
  transition: opacity var(--transition);
}
.epc-chart__bar--active { opacity: 1; }
.epc-chart__label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--gray-700);
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
}
.epc-chart__fill {
  height: 1.1rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: .35rem;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  min-width: 1.5rem;
}
.epc-chart__bar--active .epc-chart__fill {
  box-shadow: 0 0 0 2px var(--navy);
}
/* Band widths — wider = less efficient (visual convention) */
.epc-chart__bar[data-band="A"] .epc-chart__fill { background:#008054; width:38%; }
.epc-chart__bar[data-band="B"] .epc-chart__fill { background:#19b459; width:48%; }
.epc-chart__bar[data-band="C"] .epc-chart__fill { background:#8dce46; width:58%; color:#333; }
.epc-chart__bar[data-band="D"] .epc-chart__fill { background:#ffd500; width:68%; color:#333; }
.epc-chart__bar[data-band="E"] .epc-chart__fill { background:#fcaa65; width:78%; color:#333; }
.epc-chart__bar[data-band="F"] .epc-chart__fill { background:#ef8023; width:88%; }
.epc-chart__bar[data-band="G"] .epc-chart__fill { background:#e9153b; width:100%; }
@media (max-width: 480px) {
  .epc-chart__fill { height: 1rem; font-size: .7rem; }
}

/* ---------- Council Tax Band Badge ----------
   Navy/gold pill showing the council tax band letter.
*/
.ctb-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--navy);
  color: var(--white);
  border: 1.5px solid var(--gold);
  border-radius: 2rem;
  padding: .15rem .65rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
}
.ctb-badge__letter {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
}

/* ---------- Bulk Actions Toolbar ----------
   Slides up from bottom when property rows are checked in admin.
   → Also styled in admin.css — this copy is for the public property grid.
*/
.bulk-toolbar {
  position: fixed;
  bottom: -5rem;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--navy);
  color: var(--white);
  padding: .875rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(0,0,0,.25);
  transition: bottom .25s ease;
}
.bulk-toolbar--visible { bottom: 0; }
.bulk-toolbar__count {
  font-size: .9rem;
  font-weight: 600;
  color: var(--gold);
  margin-right: auto;
}
.bulk-toolbar__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.bulk-toolbar select {
  padding: .375rem .75rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: var(--white);
  font-size: .875rem;
  cursor: pointer;
}
.bulk-toolbar select option { background: var(--navy); }
/* Row checkbox column */
.admin-table th.cb-col,
.admin-table td.cb-col {
  width: 2.25rem;
  text-align: center;
  padding-left: .5rem;
}
.admin-table input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--gold-dark);
}

/* ========================================================
   Homepage Redesign Components
   ======================================================== */

/* ---------- Hero: Two-Column Above Layout ---------- */
.hero__above {
  display: grid;
  grid-template-columns: 1fr 360px;
  column-gap: 3.5rem;
  row-gap: 3rem;
  align-items: start;
  margin-bottom: 0;
}
.hero__trust {
  background: linear-gradient(160deg, rgba(200,169,94,.35) 0%, rgba(255,255,255,.35) 100%);
  border: 1px solid rgba(200,169,94,.3);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  grid-column: 1 / -1;
}
.hero__trust-heading {
  font-size: .8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #fff;
  padding-bottom: .875rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid rgba(200,169,94,.4);
  grid-column: 1 / -1;
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  color: rgba(255,255,255,.92);
  font-size: .875rem;
  font-weight: 500;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hero__trust-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.hero__trust-item i {
  color: var(--gold);
  font-size: .9375rem;
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
  filter: drop-shadow(0 0 4px rgba(200,169,94,.4));
}
/* Hero inline search bar — vertical panel in right column on desktop */
.hero__search-bar {
  margin-top: 0;
  position: relative;
  z-index: 5;
  flex-direction: column;
  align-items: stretch;
  padding: 1.25rem 1.5rem;
}
.hero__search-bar .search-bar__group {
  flex: none;
  min-width: 0;
  width: 100%;
}
.hero__search-bar .btn { width: 100%; }
.search-bar__label {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray-500);
  margin-bottom: .75rem;
  width: 100%;
  flex-basis: 100%;
}
/* Hero search panel: larger, bolder heading with a gold underline accent */
.hero__search-bar .search-bar__label {
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--navy);
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--gold);
}

@media (max-width: 1024px) {
  .hero__above { grid-template-columns: 1fr; gap: 2rem; }
  /* On mobile: search bar sits between headline+buttons and trust panel */
  .hero__content { order: 1; }
  .hero__search-bar { order: 2; }
  .hero__trust { order: 3; }
  .hero__trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    padding: 1.25rem 1.5rem;
  }
  .hero__trust-heading {
    grid-column: 1 / -1;
    padding-bottom: .75rem;
    margin-bottom: 0;
  }
  .hero__trust-item { padding: .5rem 0; font-size: .875rem; }
  /* Only show first 4 trust items on mobile */
  .hero__trust-item:nth-child(n+6) { display: none; }
  /* Remove right-column item dividers in 2-col grid to avoid orphan lines */
  .hero__trust-item:nth-child(odd):last-child { border-bottom: none; }
}
@media (max-width: 480px) {
  .hero__trust { grid-template-columns: 1fr; }
}

/* Desktop: in 3-col layout, the bottom row of items (trust 4, 5, 6 = children 5, 6, 7)
   should have no bottom border. Column 1 and 2 items get a right border as a column rule. */
@media (min-width: 1025px) {
  .hero__trust-item:nth-child(n+5) { border-bottom: none; }
  /* Soft vertical divider after each item in columns 1 and 2 */
  .hero__trust-item:not(:nth-child(3n+4)) {
    border-right: 1px solid rgba(255,255,255,.08);
    padding-right: 1.5rem;
  }
}

/* ---------- Process Steps — How It Works ---------- */
.steps-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0 .75rem;
  align-items: start;
  margin-bottom: 3rem;
}
.steps-row__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3.25rem;
  color: var(--gold-dark);
  font-size: 1rem;
  opacity: .6;
}
.step-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.75rem 2rem;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.step-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(200,169,94,.35);
}
.step-item__number {
  position: absolute;
  top: -1.125rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.25rem;
  height: 2.25rem;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(200,169,94,.45);
}
.step-item__icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: .75rem auto 1.25rem;
  color: var(--gold);
  font-size: 1.5rem;
}
.step-item h3 {
  font-size: 1.125rem;
  margin-bottom: .625rem;
  color: var(--navy);
}
.step-item p {
  font-size: .9375rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 768px) {
  .steps-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .steps-row__connector {
    padding-top: 0;
    margin: -.75rem auto;
    transform: rotate(90deg);
  }
}

/* ---------- About Office Card ---------- */
.about-office-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2.5rem 2rem;
  background: linear-gradient(145deg, var(--navy-dark) 0%, var(--navy-light) 100%);
  text-align: center;
  gap: 1rem;
}
@media (max-width: 768px) {
  .about-office-card { padding: 1.5rem 1.25rem; gap: .65rem; }
  .about-office-card__icon { font-size: 1.75rem; margin-bottom: 0; }
  .about-office-card__name { font-size: 1.0625rem; }
  .about-office-card__address { font-size: .875rem; line-height: 1.5; }
  .about-office-card__phone { font-size: 1rem; }
  .about-office-card__hours { font-size: .8125rem; }
  .about-office-card__directions { padding: .5rem 1rem; font-size: .8125rem; margin-top: .25rem; }
}
.about-office-card__icon {
  font-size: 2.5rem;
  color: var(--gold);
  opacity: .75;
  margin-bottom: .25rem;
}
.about-office-card__name {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.35;
}
.about-office-card__address {
  font-size: .9375rem;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
}
.about-office-card__phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  transition: color var(--transition);
}
.about-office-card__phone:hover { color: var(--gold-light); }
.about-office-card__hours {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: rgba(255,255,255,.55);
}
.about-office-card__directions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  padding: .625rem 1.25rem;
  border: 1px solid rgba(200,169,94,.3);
  border-radius: 50px;
  transition: all var(--transition);
  margin-top: .5rem;
}
.about-office-card__directions:hover {
  background: rgba(200,169,94,.12);
  color: var(--gold-light);
}

/* ---------- Dual-Path CTA ---------- */
.cta-paths {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 2.5rem;
  align-items: start;
  max-width: 860px;
  margin: 2.75rem auto 0;
}
.cta-path {
  text-align: center;
  padding: .5rem 1rem;
}
.cta-path__icon {
  font-size: 2.25rem;
  color: var(--gold);
  margin-bottom: 1.125rem;
}
.cta-path h3 {
  color: var(--white);
  font-size: 1.375rem;
  margin-bottom: .75rem;
}
.cta-path p {
  color: rgba(255,255,255,.65);
  font-size: .9375rem;
  margin-bottom: 1.75rem;
  line-height: 1.7;
}
.cta-paths__divider {
  background: rgba(255,255,255,.12);
  align-self: stretch;
}
.cta-section__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .875rem;
  color: rgba(255,255,255,.45);
}
.cta-section__trust i { margin-right: .35rem; color: rgba(200,169,94,.6); }
.cta-section__phone {
  color: var(--gold);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}
.cta-section__phone:hover { color: var(--gold-light); }
.cta-section__phone i { color: var(--gold); }
@media (max-width: 640px) {
  .cta-paths { grid-template-columns: 1fr; gap: 2.5rem; }
  .cta-paths__divider { display: none; }
  .cta-section__trust { gap: 1rem; }
}

/* ========================================================
   Design Consistency Pass
   ======================================================== */

/* ---------- Success Panel (reusable) ----------
   Shown after contact/valuation/enquiry form submission.
   Icon, title, "What Happens Next" steps, call-back card.
   Used on: contact.ejs, valuation.ejs, property.ejs sidebar.
*/
.success-panel { display: none; }
.success-panel.visible { display: block; }
.success-panel__hero {
  text-align: center;
  padding: 2rem 0 1rem;
}
.success-panel__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(22,163,74,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.success-panel__icon i {
  font-size: 2rem;
  color: var(--green);
}
.success-panel__title {
  color: var(--navy);
  margin-bottom: .5rem;
}
.success-panel__subtitle {
  font-size: 1.0625rem;
  color: var(--gray-700);
  margin-bottom: .25rem;
}
.success-panel__note {
  font-size: .9375rem;
  color: var(--gray-500);
}
.success-panel__note strong {
  color: var(--navy);
}

/* What Happens Next (used in success panels) */
.success-next {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  border-left: 4px solid var(--gold);
}
.success-next__heading {
  font-size: 1rem;
  margin-bottom: .85rem;
  color: var(--navy);
}
.success-next__heading i {
  color: var(--gold-dark);
  margin-right: .5rem;
}
.success-next ol {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--gray-700);
  font-size: .9375rem;
  line-height: 2.1;
}

/* Call-back card below success panels */
.success-callback {
  margin-top: 1.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.success-callback__icon {
  font-size: 1.25rem;
  color: var(--gold-dark);
  flex-shrink: 0;
}
.success-callback__text p {
  font-size: .875rem;
  color: var(--gray-500);
  margin-bottom: .1rem;
}
.success-callback__text a {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}

/* ---------- Property Card Actions ---------- */
.property-card__actions {
  display: flex;
  gap: .75rem;
  padding: 0 1.5rem 1.5rem;
}
.property-card__actions .btn {
  flex: 1;
  justify-content: center;
  text-align: center;
  font-size: .8125rem;
  padding: .5rem .75rem;
}
@media (max-width: 480px) {
  .property-card__actions {
    flex-direction: column;
    gap: .5rem;
    padding: 0 1rem 1rem;
  }
}

/* ---------- CTA Section: wider for dual-path ---------- */
.cta-section__inner {
  max-width: 860px;
}

/* ---------- Map iframe responsive ---------- */
.contact-map iframe {
  width: 100%;
  min-height: 280px;
  display: block;
}
@media (min-width: 769px) {
  .contact-map iframe {
    min-height: 340px;
  }
}

/* ---------- Pagination responsive ---------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
  padding: 1rem 0;
}
.pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 .5rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-200);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
}
.pagination__link:hover {
  border-color: var(--gold);
  color: var(--navy);
  background: var(--cream);
}
.pagination__link--active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.pagination__link--disabled {
  opacity: .4;
  pointer-events: none;
}
@media (max-width: 480px) {
  .pagination { gap: .25rem; }
  .pagination__link {
    min-width: 32px;
    height: 32px;
    font-size: .8125rem;
  }
}

/* ---------- Search bar: labels consistency ---------- */
.search-bar .btn {
  align-self: flex-end;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .search-bar .btn { width: 100%; align-self: stretch; }
  /* Only show first 2 featured properties on mobile */
  #featured-properties .property-card:nth-child(n+3) { display: none; }
}

/* ---------- Content page prose consistency ---------- */
.content-page h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  color: var(--navy);
  margin: 2.5rem 0 .875rem;
  padding-bottom: .625rem;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.content-page h2:first-child { margin-top: 0; }
.content-page h3 {
  font-size: 1.125rem;
  color: var(--navy);
  margin: 1.75rem 0 .5rem;
}
.content-page p {
  color: var(--gray-600);
  line-height: 1.85;
  margin-bottom: 1.125rem;
}
.content-page ul {
  list-style: none;
  padding-left: 0;
}
.content-page ul li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: .5rem;
}
.content-page ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .625em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.content-page a { color: var(--gold-dark); }
.content-page a:hover { color: var(--navy); }
.content-page address {
  font-style: normal;
  color: var(--gray-600);
  line-height: 1.75;
}

/* ---------- Missing responsive coverage ---------- */
/* Valuation hero cards: stack at tablet */
/* Sidebar form: stack below main content at tablet */
@media (max-width: 900px) {
  .contact-main { grid-template-columns: 1fr; gap: 2rem; }
  .pd-info { grid-template-columns: 1fr; gap: 2rem; }
}

/* Feature list: ensure proper wrap at small screens */
@media (max-width: 480px) {
  .feature-list { grid-template-columns: 1fr; gap: .875rem; }
  .sb-infobox__panel { flex-direction: column; padding: 1.5rem; }
  .sb-ctaband__inner { grid-template-columns: 1fr; text-align: center; }
  .sb-ctaband__body { text-align: center; }
}

/* Stats bar consistency (used on homepage + testimonials) */
@media (max-width: 600px) {
  .stats-bar__inner {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 0;
  }
  .stats-bar__divider {
    width: 3rem;
    height: 1px;
  }
  .stats-bar__number { font-size: 2rem; }
}

/* Testimonials grid: force single-column at small phone */
@media (max-width: 400px) {
  .testimonials-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Footer: ensure contact column phone number doesn't overflow */
@media (max-width: 480px) {
  .footer__phone { font-size: 1.125rem; flex-wrap: wrap; }
  .footer__grid { gap: 2rem; }
}

/* Property actions inline in card: ensure buttons don't overflow */
@media (max-width: 360px) {
  .property-card__actions { flex-direction: column; }
  .property-card__actions .btn { width: 100%; }
}

/* CTA Band (used in property-for-sale page) */
@media (max-width: 768px) {
  .cta-band__inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .cta-band__icon { display: none; }
}

/* Barry Downs section: full-width on mobile */
@media (max-width: 480px) {
  .sold-showcase__grid { grid-template-columns: 1fr; }
}

/* ---------- Search bar actions ---------- */
.search-bar__actions {
  display: flex;
  gap: .5rem;
  align-self: flex-end;
  margin-left: auto;
}

/* ---------- Property grid utilities ---------- */
.property-grid__count {
  margin: 0 0 1.25rem;
  font-size: .9rem;
  color: var(--gray-500);
  display: none;
  grid-column: 1 / -1;
}
.property-grid__count.visible { display: block; }
.property-grid__spinner {
  font-size: 1.5rem;
  color: var(--gold-dark);
}
.property-grid__empty-icon {
  font-size: 2.5rem;
  color: var(--gray-300);
  margin-bottom: 1rem;
}
.recently-sold-section { display: none; }
.recently-sold-section.visible { display: block; }

/* ---------- Button block modifier ---------- */
.btn--block {
  width: 100%;
  justify-content: center;
}

/* ---------- CTA Band (property-for-sale) ---------- */
.cta-band {
  background: var(--navy);
  padding: 1.5rem 0;
}
.cta-band__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.cta-band__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 2px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}
.cta-band__title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold);
  margin-bottom: .25rem;
}
.cta-band__body { flex: 1; }
.cta-band__text {
  font-size: .9375rem;
  color: var(--gray-300);
  line-height: 1.6;
  margin: 0;
}
.cta-band__text a {
  color: var(--gold);
  font-weight: 600;
}
.cta-band__text a:hover { color: var(--white); }
.cta-band__btn {
  display: inline-block;
  flex-shrink: 0;
  background: var(--gold);
  color: var(--navy);
  padding: .75rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .9375rem;
  white-space: nowrap;
  transition: all var(--transition);
}
.cta-band__btn:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* ---------- Property Detail Page ---------- */
.pd-loading {
  text-align: center;
  padding: 4rem 0;
}
.pd-error {
  display: none;
  text-align: center;
  padding: 4rem 0;
}
.pd-error.visible { display: block; }
.pd-error__icon {
  font-size: 2.5rem;
  color: var(--gray-300);
  margin-bottom: 1rem;
}
.pd-error__text {
  color: var(--gray-500);
  margin-bottom: 1.5rem;
}
.pd-content { display: none; }
.pd-content.visible { display: block; }
.property-grid__error { color: var(--gray-500); }

/* Gallery image */
.pd-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.pd-gallery__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

/* Virtual tour responsive embed */
.pd-virtual-tour {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.pd-virtual-tour iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Gold icon helper */
.pd-icon--gold { color: var(--gold-dark); margin-right: .5rem; }
.pd-icon--pdf { color: #e53e3e; margin-right: .5rem; }

/* Contact card button spacing */
.pd-contact-card__btn { margin-bottom: .75rem; }

/* Enquiry form */
.pd-enquiry-form { margin-top: 1rem; }
.pd-enquiry-status {
  margin-top: .5rem;
  font-size: .85rem;
  text-align: center;
}

/* Download wraps (hidden by default, JS shows them) */
.pd-download-wrap {
  display: none;
  margin-bottom: 1rem;
}
.pd-download-wrap.visible { display: block; }

/* Success panel smaller variant for sidebar */
.success-panel__icon--sm {
  width: 60px;
  height: 60px;
}
.success-panel__icon--sm i { font-size: 1.6rem; }
.success-next--sm {
  padding: 1rem 1.1rem;
  margin-top: .75rem;
}
.success-next--sm .success-next__heading {
  font-size: .8125rem;
  margin-bottom: .5rem;
}
.success-next--sm ol {
  padding-left: 1.1rem;
  font-size: .8125rem;
  line-height: 2;
}
.success-callback--sm {
  margin-top: .85rem;
  padding: .75rem 1rem;
}
.success-callback--sm .success-callback__text p { font-size: .75rem; }
.success-callback--sm .success-callback__text a { font-size: 1rem; }

/* ---------- Content page utilities ---------- */
.content-page__container { max-width: 900px; }
.content-page__updated {
  margin-top: 2rem;
  color: var(--gray-500);
  font-size: .9rem;
}

/* ---------- Icon spacing utilities ----------
   .btn i / .pd-section h3 i / .share-card h4 i — right margin on icons.
*/
.btn i,
.btn svg { margin-right: .4rem; }
.pd-section h3 i { color: var(--gold-dark); margin-right: .5rem; }
.share-card h4 i { color: var(--gold-dark); margin-right: .5rem; }

/* ---------- Property card images (JS-rendered): cover fill ---------- */
.property-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Property card link wrapper ---------- */
.property-card {
  text-decoration: none;
  color: inherit;
}

/* ---------- Property card placeholder (no image) ---------- */
.property-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8dcc8, #d4c5a9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.property-card__placeholder i {
  font-size: 2rem;
  color: var(--navy);
  opacity: .3;
}

/* ---------- Property card address icon ---------- */
.property-card__address i {
  color: var(--gold-dark);
  margin-right: .35rem;
}