/* ============================================================
   OLIVER STERN — DESIGN SYSTEM
   css/styles.css
   
   Build order:
   1. @font-face
   2. CSS custom properties (:root)
   3. Reset & base
   4. Layout
   5. Navigation
   6. Hero
   7. Stats bar
   8. Tier / service cards
   9. Pricing / feature matrix
   10. Toggle bar
   11. Process steps
   12. Feature blocks
   13. Market data tables
   14. Property cards
   15. Filter bar
   16. Alert signup
   17. Article cards
   18. Tag filter
   19. Article page
   20. Testimonials
   21. CTA blocks
   22. Team cards
   23. Trust badges
   24. Forms
   25. FAQ / Accordion
   26. Calc block
   27. Buttons
   28. Tags / badges
   29. Cross-link block
   30. Breadcrumb
   31. Footer
   32. Utility
   33. Responsive overrides
   ============================================================ */


/* ============================================================
   1. FONT FACE
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/css/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/css/fonts/Inter.var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   2. CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* ── Brand colours ── */
  --colour-primary:        #1B2B26;   /* logo dark blue — nav, footer, card 1, headings */
  --colour-primary-light:  #243B34;   /* slightly lighter dark blue */
  --colour-accent:         #2563EB;   /* cobalt blue — CTAs, buttons, highlights */
  --colour-accent-hover:   #1D4ED8;   /* darker blue — button hover state */
  --colour-accent-rgb:     37, 99, 235; /* RGB triplet for rgba() usage */
  --colour-dark:           #111F1B;   /* darkest — deepest backgrounds */
  --colour-brand-green:    #2EA91D;   /* logo green — card 2, success states, trust badges */
  --colour-card-3:         #14B8A6;   /* teal — hero card 3 / rental valuation */
  --colour-card-3-hover:   #0F766E;   /* darker teal */
  --colour-card-4:         #8B5CF6;   /* violet — hero card 4 / HMO valuation */
  --colour-card-4-hover:   #7C3AED;   /* darker violet */
  --colour-body:           #1A1A1A;   /* near-black — body text */
  --colour-muted:          #6B7280;   /* mid grey — secondary text, captions */
  --colour-border:         #E5E7EB;   /* light grey — dividers, card borders */
  --colour-bg:             #FFFFFF;   /* white — main page background */
  --colour-bg-alt:         #F8F9FA;   /* off-white — alternate section background */
  --colour-bg-dark:        #1B2B26;   /* dark section background — same as primary */
  --colour-success:        #16A34A;   /* green — success states, tick icons */
  --colour-danger:         #DC2626;   /* red — error states */
  --colour-badge-let:      #DC2626;   /* red — "Now Let" property badge */

  /* ── Typography ── */
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:   0.75rem;     /*  12px */
  --font-size-sm:   0.875rem;    /*  14px */
  --font-size-base: 1rem;        /*  16px */
  --font-size-lg:   1.125rem;    /*  18px */
  --font-size-xl:   1.25rem;     /*  20px */
  --font-size-2xl:  1.5rem;      /*  24px */
  --font-size-3xl:  1.875rem;    /*  30px */
  --font-size-4xl:  2.25rem;     /*  36px */
  --font-size-5xl:  3rem;        /*  48px */

  /* ── Spacing scale ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Layout ── */
  --container-max: 1200px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     20px;   /* upgraded from 16px — rounder, more premium */
  --radius-xl:     24px;   /* section-level rounding */
  --radius-full:   9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 28px rgba(0, 0, 0, 0.13);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.16);

  /* ── Transitions — slightly slower for premium feel ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── WhatsApp green ── */
  --colour-whatsapp:       #25D366;
  --colour-whatsapp-hover: #1DAA55;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--colour-body);
  background-color: var(--colour-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--colour-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--colour-accent-hover);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1.15;
  color: var(--colour-body);
  letter-spacing: -0.025em;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* Focus styles — accessible, on-brand */
:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   4. LAYOUT
   ============================================================ */

/* ── Container ── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.hero-logo-block {
  padding: 0 1.5rem 1rem 1.5rem;
  display: block;
}

.hero-logo-block img {
  display: block;
  width: 200px;
  height: auto;
}

/* ── Section ── */
.section {
  padding-block: var(--space-20);
}

.section--alt {
  background-color: var(--colour-bg-alt);
  padding-block: var(--space-20);
  border-radius: var(--radius-xl);
  margin-inline: var(--space-4);
}

.section--dark {
  background-color: var(--colour-bg-dark);
  padding-block: var(--space-20);
  color: #fff;
  border-radius: var(--radius-xl);
  margin-inline: var(--space-4);
}

@media (min-width: 768px) {
  .section--alt,
  .section--dark {
    margin-inline: var(--space-6);
    border-radius: var(--radius-xl);
  }
}

@media (min-width: 1024px) {
  .section--alt,
  .section--dark {
    margin-inline: var(--space-8);
  }
}

/* Section label — small eyebrow text above headings */
.section-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--colour-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

.section--dark .section-label {
  color: #93C5FD;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark p {
  color: #fff;
}

/* ── Responsive grids ── */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-8);
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================
   6. HERO
   ============================================================ */

/* Full homepage hero */
.hero {
  background-color: var(--colour-primary);
  padding-block: var(--space-24);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

/* Subtle texture overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(37, 99, 235, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

/* Inner page hero — more compact */
.hero--page {
  background-color: var(--colour-primary);
  padding-block: var(--space-16);
  text-align: left;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  overflow: hidden;
}

.hero--page > .container {
  max-width: var(--container-max);
}

/* Headline */
.hero__headline {
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

.hero__headline span,
.hero__headline em {
  color: var(--colour-accent);
  font-style: normal;
}

/* Sub-headline */
.hero__sub {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  line-height: 1.6;
}

.hero--page .hero__sub {
  margin-inline: 0;
}

/* CTA group */
.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}

.hero--page .hero__cta-group {
  justify-content: flex-start;
}


/* ============================================================
   5b. SITE NAV — fixed hamburger (homepage pattern)
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background-color var(--transition-base);
}

.site-nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav__logo img {
  height: 36px;
  width: auto;
  display: block;
}

.site-nav__tagline {
  display: none;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 0.75rem;
  white-space: nowrap;
  align-items: center;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

@media (min-width: 480px) {
  .site-nav__tagline {
    display: inline-flex;
  }
}

.site-nav__tagline--green {
  color: #2EA91D;
}

.site-nav__tagline--blue {
  color: #1B2B26;
}

.site-nav__tagline--muted {
  color: #999999;
}

.site-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--colour-primary);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.site-nav__toggle:hover {
  background-color: rgba(27, 43, 38, 0.07);
}

.site-nav__toggle svg {
  display: block;
  width: 24px;
  height: 24px;
}


/* ============================================================
   5c. NAV OVERLAY — full-screen menu panel
   ============================================================ */

.nav-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--colour-primary);
  z-index: 600;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-6) var(--space-10);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-overlay.is-open {
  transform: translateX(0);
}

.nav-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  margin-bottom: var(--space-10);
  flex-shrink: 0;
}

.nav-overlay__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-overlay__brand img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}

.nav-overlay__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  color: #fff;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.nav-overlay__close:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

.nav-overlay__close svg {
  display: block;
  width: 20px;
  height: 20px;
}

.nav-overlay__menu {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-overlay__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-overlay__item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-overlay__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  font-size: clamp(1.25rem, 5vw, 2.25rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color var(--transition-fast), padding-left var(--transition-base);
}

.nav-overlay__link:hover,
.nav-overlay__link:focus {
  color: #fff;
  padding-left: var(--space-3);
}

.nav-overlay__link-arrow {
  width: 20px;
  height: 20px;
  opacity: 0.35;
  flex-shrink: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav-overlay__link:hover .nav-overlay__link-arrow {
  opacity: 0.75;
  transform: translateX(4px);
}

.nav-overlay__footer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.nav-overlay__tenant {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-overlay__tenant:hover {
  color: rgba(255, 255, 255, 0.8);
}


/* ============================================================
   6b. HERO CARD STACK — The Push absolute-position model
   ============================================================ */

/* Small descriptor line above the card stack */
.hero-descriptor {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #999999;
  padding: 0 1.5rem 1rem 1.5rem;
  margin: 0;
}

/* Stack wrapper — no fixed height, margin-top pushes below fixed nav */
.hero-stack-wrap {
  position: relative;
  margin-top: 80px;
  margin-bottom: 0;
  padding: 0;
  overflow: visible;
}

/* Each card — overflow:hidden directly on card, NOT on inner wrapper */
.hero-card {
  position: absolute;
  left: 1rem;
  right: 1rem;
  height: 50svh;
  min-height: 260px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

/* Card stacking — higher index = higher z-index = sits on top */
.hero-card:nth-child(1) { top: 0;     z-index: 1; }
.hero-card:nth-child(2) { top: 8rem;  z-index: 2; }
.hero-card:nth-child(3) { top: 16rem; z-index: 3; }
.hero-card:nth-child(4) { top: 24rem; z-index: 4; }

/* The wrapper height must account for all cards */
.hero-stack-spacer {
  display: block;
  height: calc(24rem + 50svh);
  min-height: calc(24rem + 260px);
}

/* Background photo */
.hero-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  z-index: 0;
}

.hero-card--1 .hero-card__bg { background-image: url('/images/hero-letting-management.jpg'); }
.hero-card--2 .hero-card__bg { background-image: url('/images/hero-find-property.jpg'); }
.hero-card--3 .hero-card__bg { background-image: url('/images/hero-rental-valuation.jpg'); }
.hero-card--4 .hero-card__bg { background-image: url('/images/hero-hmo-valuation.jpg'); }

.hero-card:hover .hero-card__bg { transform: scale(1.04); }

/* Colour overlay */
.hero-card__overlay {
  position: absolute;
  inset: 0;
  opacity: 0.82;
  z-index: 1;
  transition: opacity 250ms ease;
}

.hero-card--1 .hero-card__overlay { background-color: #1B2B26; }
.hero-card--2 .hero-card__overlay { background-color: #2EA91D; }
.hero-card--3 .hero-card__overlay { background-color: #14B8A6; }
.hero-card--4 .hero-card__overlay { background-color: #8B5CF6; }

.hero-card:hover .hero-card__overlay { opacity: 0.70; }

/* Card colour token for title background */
.hero-card--1 { --card-bg: #1B2B26; }
.hero-card--2 { --card-bg: #2EA91D; }
.hero-card--3 { --card-bg: #14B8A6; }
.hero-card--4 { --card-bg: #8B5CF6; }

/* Title — position:static in flex flow, sits at TOP of card */
.hero-card__title {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: transparent;
  align-self: flex-start;
}

.hero-card__title span {
  display: inline;
  color: #ffffff;
  background-color: var(--card-bg);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.25rem 0.5rem 0.3rem 0;
}

.hero-card__expand-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
  color: #ffffff;
}

.hero-card__expand-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.hero-card:hover .hero-card__expand-icon {
  background: rgba(255, 255, 255, 0.35);
}

/* Hover lift */
@media (hover: hover) {
  .hero-card:hover {
    transform: translateY(-3rem);
    transition: transform 300ms ease-out;
  }
}

/* Mobile */
@media (max-width: 639px) {
  .hero-stack-spacer {
    height: calc(18rem + 44svh);
    min-height: calc(18rem + 200px);
  }
  .hero-card {
    height: 44svh;
    min-height: 200px;
  }
  .hero-card:nth-child(1) { top: 0; }
  .hero-card:nth-child(2) { top: 6rem; }
  .hero-card:nth-child(3) { top: 12rem; }
  .hero-card:nth-child(4) { top: 18rem; }
  .hero-card__title {
    font-size: clamp(1.2rem, 5.5vw, 1.8rem);
    letter-spacing: -0.03em;
  }
  .hero-stack-wrap {
    margin-top: 80px;
  }
}

/* Desktop margins */
@media (min-width: 768px) {
  .hero-card {
    left: 1.5rem;
    right: 1.5rem;
  }
}


/* ============================================================
   6c. STATS SECTION — light background, animated counters
   ============================================================ */

.stats-section {
  padding-block: var(--space-20);
  background-color: var(--colour-bg);
  border-top: 1px solid var(--colour-border);
  border-bottom: 1px solid var(--colour-border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
  margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  padding-top: var(--space-4);
}

.stat-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Per-stat accent colours — border-top + number colour */
.stat-item:nth-child(1) { transition-delay: 0ms;   border-top: 4px solid var(--colour-primary); }
.stat-item:nth-child(2) { transition-delay: 150ms; border-top: 4px solid var(--colour-brand-green); }
.stat-item:nth-child(3) { transition-delay: 300ms; border-top: 4px solid var(--colour-card-3); }
.stat-item:nth-child(4) { transition-delay: 450ms; border-top: 4px solid var(--colour-card-4); }

.stat-item:nth-child(1) .stat-item__number { color: var(--colour-primary); }
.stat-item:nth-child(2) .stat-item__number { color: var(--colour-brand-green); }
.stat-item:nth-child(3) .stat-item__number { color: var(--colour-card-3); }
.stat-item:nth-child(4) .stat-item__number { color: var(--colour-card-4); }

.stat-item__number {
  display: block;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.stat-item__label {
  font-size: 0.75rem;
  color: var(--colour-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.stats-updated {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--colour-muted);
  opacity: 0.7;
  margin-top: var(--space-4);
}

@media (min-width: 640px) {
  .stat-item + .stat-item {
    border-left: 1px solid var(--colour-border);
  }
}


/* ============================================================
   6e. HOMEPAGE TAGLINE — transition between cards and stats
   ============================================================ */

.homepage-tagline {
  padding: 3rem 1.5rem 4rem 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.tagline-main {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--colour-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.tagline-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--colour-muted);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
}


/* ============================================================
   6d. SKELETON LOADING — shimmer placeholder cards
   ============================================================ */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-card {
  background-color: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.skeleton-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

.skeleton-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-line {
  height: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

.skeleton-line--tag  { width: 60px;  height: 20px; border-radius: var(--radius-full); }
.skeleton-line--title-1 { width: 90%; height: 18px; }
.skeleton-line--title-2 { width: 65%; height: 18px; }
.skeleton-line--excerpt-1 { width: 100%; }
.skeleton-line--excerpt-2 { width: 80%; }
.skeleton-line--meta  { width: 50%; height: 10px; margin-top: var(--space-2); }

/* ============================================================
   7. STATS BAR
   ============================================================ */

.stat-bar {
  background-color: var(--colour-dark);
  padding-block: var(--space-10);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  margin-inline: var(--space-4);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .stat-bar {
    margin-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .stat-bar {
    margin-inline: var(--space-8);
  }
}

.stat-bar > .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
}

.stat-bar__item {
  text-align: center;
  position: relative;
}

/* Divider between items on desktop */
.stat-bar__item + .stat-bar__item::before {
  content: none;
}

.stat-bar__number {
  display: block;
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-fast);
}

/* Counter animation — JS adds data-value and triggers this */
.stat-bar__number[data-animated] {
  color: #fff;
}

.stat-bar__label {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-bar__updated {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.35);
  margin-top: var(--space-2);
}

@media (min-width: 640px) {
  .stat-bar > .container {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat-bar__item + .stat-bar__item {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
}


/* ============================================================
   8. TIER / SERVICE CARDS
   ============================================================ */

.tier-card {
  display: flex;
  flex-direction: column;
  background-color: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.tier-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Featured / highlighted tier */
.tier-card--featured {
  border-color: var(--colour-accent);
  border-width: 2px;
  background-color: var(--colour-bg);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), var(--shadow-md);
}

.tier-card--featured:hover {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), var(--shadow-xl);
}

/* "Most Popular" badge */
.tier-card__badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--colour-accent);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-4);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  white-space: nowrap;
}

/* Tier name */
.tier-card__name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--colour-body);
  margin-bottom: var(--space-4);
}

/* Price display */
.tier-card__price {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--colour-body);
  line-height: 1;
  margin-bottom: var(--space-2);
}

/* Promotional price — displayed prominently */
.tier-card__price-promo {
  display: block;
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--colour-accent);
  line-height: 1;
}

/* Standard rate — shown in strikethrough */
.tier-card__price-standard {
  display: inline-block;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--colour-muted);
  text-decoration: line-through;
  margin-left: var(--space-2);
}

/* Note below price */
.tier-card__price-note {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  margin-bottom: var(--space-6);
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* Feature list */
.tier-card__feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  margin-bottom: var(--space-6);
}

.tier-card__feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--colour-body);
  border-bottom: 1px solid var(--colour-border);
}

.tier-card__feature-item:last-child {
  border-bottom: none;
}

/* Tick — included */
.tier-card__feature-item--tick::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: var(--colour-success);
  border-radius: var(--radius-full);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  margin-top: 1px;
}

/* Cross — excluded */
.tier-card__feature-item--cross {
  color: var(--colour-muted);
}

.tier-card__feature-item--cross::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: var(--colour-border);
  border-radius: var(--radius-full);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px;
  margin-top: 1px;
}

/* Bolt-on option — recessive secondary row */
.tier-card__bolt-on {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--colour-bg-alt);
  border: 1px dashed var(--colour-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
}

.tier-card__bolt-on strong {
  color: var(--colour-body);
  font-weight: 600;
}


/* ============================================================
   9. PRICING / FEATURE MATRIX
   ============================================================ */

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-block: var(--space-8);
  overflow-x: auto;
  display: block;
}

/* Force table to not collapse on small screens */
@media (min-width: 768px) {
  .pricing-table {
    display: table;
  }
}

.pricing-table__head {
  background: linear-gradient(90deg, var(--colour-primary) 0%, var(--colour-primary-light) 100%);
  color: #fff;
}

.pricing-table__head th {
  padding: var(--space-4) var(--space-6);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
}

.pricing-table__head th:first-child {
  width: 35%;
}

.pricing-table__row {
  border-bottom: 1px solid var(--colour-border);
  transition: background-color var(--transition-fast);
}

.pricing-table__row:nth-child(even) {
  background-color: var(--colour-bg-alt);
}

.pricing-table__row:hover {
  background-color: rgba(37, 99, 235, 0.03);
}

.pricing-table__cell {
  padding: var(--space-4) var(--space-6);
  vertical-align: middle;
  white-space: nowrap;
}

.pricing-table__cell--service {
  white-space: normal;
  font-weight: 500;
  color: var(--colour-body);
  min-width: 200px;
}

/* ✓ tick */
.pricing-table__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background-color: var(--colour-success);
  border-radius: var(--radius-full);
  color: #fff;
}

.pricing-table__tick::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ✗ cross */
.pricing-table__cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--colour-muted);
  font-size: var(--font-size-lg);
  line-height: 1;
}

.pricing-table__cross::before {
  content: '–';
}

/* "Free" value */
.pricing-table__free {
  color: var(--colour-success);
  font-weight: 600;
}

/* Price value */
.pricing-table__price {
  font-weight: 600;
  color: var(--colour-body);
}


/* ============================================================
   10. TOGGLE BAR
   ============================================================ */

.toggle-bar {
  display: inline-flex;
  background-color: var(--colour-bg-alt);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  gap: var(--space-1);
  margin-bottom: var(--space-10);
}

.toggle-bar__btn {
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--colour-muted);
  background: transparent;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
  cursor: pointer;
  border: none;
}

.toggle-bar__btn:hover:not(.toggle-bar__btn--active) {
  color: var(--colour-body);
  background-color: rgba(0, 0, 0, 0.04);
}

.toggle-bar__btn--active {
  background-color: var(--colour-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}


/* ============================================================
   11. PROCESS STEPS
   ============================================================ */

.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  position: relative;
}

.process__step {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

/* Connecting line between steps — desktop only */
@media (min-width: 768px) {
  .process {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  .process__step {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

.process__step-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--colour-accent);
  color: #fff;
  font-size: var(--font-size-lg);
  font-weight: 800;
  border-radius: var(--radius-full);
  line-height: 1;
}

.section--dark .process__step-number {
  background-color: var(--colour-accent);
}

.process__step-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--colour-body);
  margin-bottom: var(--space-2);
}

.section--dark .process__step-title,
.feature-block--dark .process__step-title {
  color: #fff;
}

.process__step-body {
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  line-height: 1.6;
}

.section--dark .process__step-body,
.feature-block--dark .process__step-body {
  color: rgba(255, 255, 255, 0.65);
}


/* ============================================================
   12. FEATURE BLOCKS
   ============================================================ */

.feature-block {
  padding-block: var(--space-20);
}

.feature-block--dark {
  background-color: var(--colour-bg-dark);
  color: #fff;
}

.feature-block--dark h1,
.feature-block--dark h2,
.feature-block--dark h3 {
  color: #fff;
}

.feature-block--dark p {
  color: rgba(255, 255, 255, 0.75);
}

.feature-block__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-6);
  color: var(--colour-accent);
}

.feature-block__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--space-6);
  color: var(--colour-body);
}

.feature-block--dark .feature-block__title {
  color: #fff;
}

.feature-block__body {
  font-size: var(--font-size-lg);
  color: var(--colour-muted);
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: var(--space-8);
}

.feature-block--dark .feature-block__body {
  color: rgba(255, 255, 255, 0.7);
}

.feature-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-block__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--colour-body);
}

.feature-block--dark .feature-block__list li {
  color: rgba(255, 255, 255, 0.8);
}

.feature-block__list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: rgba(37, 99, 235, 0.10);
  border-radius: var(--radius-full);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%232563EB' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  margin-top: 2px;
}


/* ============================================================
   13. MARKET DATA TABLES
   ============================================================ */

.market-table {
  margin-block: var(--space-8);
}

/* Borough selector */
.market-table__selector {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.market-table__selector label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--colour-body);
}

.market-table__selector select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--colour-body);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
  transition: border-color var(--transition-fast);
}

.market-table__selector select:hover,
.market-table__selector select:focus {
  border-color: var(--colour-accent);
  outline: none;
}

/* Table wrapper — scrollable on mobile */
.market-table__wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--colour-border);
  box-shadow: var(--shadow-sm);
}

.market-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.market-table__header {
  background: linear-gradient(90deg, var(--colour-primary) 0%, var(--colour-primary-light) 100%);
}

.market-table__header th {
  padding: var(--space-4) var(--space-6);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.market-table__row {
  border-bottom: 1px solid var(--colour-border);
  transition: background-color var(--transition-fast);
}

.market-table__row:last-child {
  border-bottom: none;
}

.market-table__row:nth-child(even) {
  background-color: var(--colour-bg-alt);
}

.market-table__row:hover {
  background-color: rgba(37, 99, 235, 0.03);
}

.market-table__row-label {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--colour-body);
  white-space: nowrap;
}

.market-table__cell {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--colour-body);
  vertical-align: middle;
}

/* Price linked to listing */
.market-table__link-btn {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background-color: var(--colour-primary);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.market-table__link-btn:hover {
  background-color: var(--colour-primary-light);
  color: #fff;
}

/* Data source badge */
.market-table__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background-color: var(--colour-bg-alt);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--colour-muted);
}

.market-table__badge strong {
  color: var(--colour-body);
  font-weight: 600;
}

.market-table__loading,
.market-table__error {
  padding: var(--space-10);
  text-align: center;
  color: var(--colour-muted);
  font-size: var(--font-size-sm);
}

.market-table__error {
  color: var(--colour-danger);
}


/* ============================================================
   14. PROPERTY CARDS
   ============================================================ */

.property-card {
  display: flex;
  flex-direction: column;
  background-color: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.property-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Image container */
.property-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--colour-bg-alt);
}

.property-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.property-card:hover .property-card__image {
  transform: scale(1.03);
}

/* Corner badge */
.property-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background-color: var(--colour-accent);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* "Now Let" — red variant */
.property-card__badge--let {
  background-color: var(--colour-badge-let);
}

/* Body */
.property-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-6);
  gap: var(--space-2);
}

.property-card__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--colour-body);
  line-height: 1.3;
}

.property-card__price {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--colour-accent);
  line-height: 1;
}

.property-card__area {
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.property-card__area::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1.5A4.5 4.5 0 013.5 6c0 3.5 4.5 8.5 4.5 8.5S12.5 9.5 12.5 6A4.5 4.5 0 018 1.5z' stroke='%236B7280' stroke-width='1.25'/%3E%3Ccircle cx='8' cy='6' r='1.5' stroke='%236B7280' stroke-width='1.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* Action buttons */
.property-card__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  flex-wrap: wrap;
}

.property-card__actions .btn {
  flex: 1;
  min-width: 120px;
  text-align: center;
}

/* Recently let variant — no action buttons */
.property-card--let {
  opacity: 0.85;
}

.property-card--let .property-card__body {
  padding-bottom: var(--space-5);
}

/* Cards grid — properties page */
.properties-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .properties-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ============================================================
   15. FILTER BAR
   ============================================================ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  align-items: center;
}

.filter-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 20px;
  background-color: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--colour-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.filter-bar__btn:hover:not(.filter-bar__btn--active) {
  border-color: var(--colour-body);
  color: var(--colour-body);
}

.filter-bar__btn--active {
  background-color: var(--colour-primary);
  border-color: var(--colour-primary);
  color: #fff;
}

.filter-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: var(--space-1);
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1;
}

.filter-bar__btn:not(.filter-bar__btn--active) .filter-bar__count {
  background-color: var(--colour-bg-alt);
  color: var(--colour-muted);
}


/* ============================================================
   16. ALERT SIGNUP
   ============================================================ */

.alert-signup {
  background-color: var(--colour-primary-light);
  background-image: linear-gradient(135deg, var(--colour-primary-light) 0%, var(--colour-primary) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-10);
  margin-block: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .alert-signup {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.alert-signup__text {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}

.alert-signup__text span {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  margin-top: var(--space-1);
}

.alert-signup__btn {
  /* Inherits .btn .btn--primary — set those on the element itself */
  flex-shrink: 0;
}


/* ============================================================
   17. ARTICLE CARDS
   ============================================================ */

.article-card {
  display: flex;
  flex-direction: column;
  background-color: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.article-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.article-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background-color: var(--colour-bg-alt);
  transition: transform var(--transition-slow);
}

.article-card:hover .article-card__image {
  transform: scale(1.03);
}

.article-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  gap: var(--space-3);
}

.article-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.article-card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--colour-body);
  line-height: 1.3;
  margin: 0;
  transition: color var(--transition-fast);
}

.article-card:hover .article-card__title {
  color: var(--colour-accent);
}

.article-card__excerpt {
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--colour-muted);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--colour-border);
}

.article-card__meta::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--colour-bg-alt);
  flex-shrink: 0;
  /* Avatar placeholder */
}


/* ============================================================
   18. TAG FILTER
   ============================================================ */

.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.tag-filter__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background-color: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--colour-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.tag-filter__btn:hover:not(.tag-filter__btn--active) {
  border-color: var(--colour-body);
  color: var(--colour-body);
}

.tag-filter__btn--active {
  background-color: var(--colour-primary);
  border-color: var(--colour-primary);
  color: #fff;
}


/* ============================================================
   19. ARTICLE PAGE
   ============================================================ */

.article-container {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  padding-block: var(--space-12) var(--space-20);
}

.article-header {
  margin-bottom: var(--space-10);
}

.article-title {
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
  font-weight: 800;
  color: var(--colour-body);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--colour-border);
}

.article-meta--date {
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  margin: 0.25rem 0 1.25rem;
}

.article-meta__author {
  font-weight: 600;
  color: var(--colour-body);
}

.article-meta__date::before {
  content: '·';
  margin-right: var(--space-3);
}

/* Featured image */
.article-featured-image {
  margin-bottom: var(--space-10);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.article-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Article body — rich text content from Apps Script */
.article-body {
  font-size: var(--font-size-lg);
  line-height: 1.75;
  color: var(--colour-body);
}

.article-body > * + * {
  margin-top: var(--space-6);
}

.article-body h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--colour-primary);
  line-height: 1.25;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid var(--colour-border);
}

.article-body h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.article-body h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--colour-body);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.article-body h4 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--colour-muted);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.article-body p {
  margin-bottom: var(--space-5);
  color: var(--colour-body);
}

.article-body ul,
.article-body ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--space-5);
}

.article-body ul li,
.article-body ol li {
  padding-left: var(--space-8);
  position: relative;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-base);
  line-height: 1.7;
}

.article-body ul li::before {
  content: '';
  position: absolute;
  left: var(--space-2);
  top: 10px;
  width: 6px;
  height: 6px;
  background-color: var(--colour-accent);
  border-radius: var(--radius-full);
}

.article-body ol {
  counter-reset: list-counter;
}

.article-body ol li {
  counter-increment: list-counter;
}

.article-body ol li::before {
  content: counter(list-counter) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--colour-accent);
  font-size: var(--font-size-sm);
  min-width: var(--space-6);
}

.article-body a {
  color: var(--colour-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body a:hover {
  color: var(--colour-accent-hover);
}

.article-body strong {
  font-weight: 700;
  color: var(--colour-body);
}

.article-body blockquote {
  border-left: 4px solid var(--colour-accent);
  padding: var(--space-4) var(--space-6);
  background-color: var(--colour-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-block: var(--space-6);
  font-size: var(--font-size-lg);
  color: var(--colour-body);
  font-style: italic;
}

/* Article tables */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-block: var(--space-6);
  border: 1.5px solid var(--colour-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .article-body table td,
  .article-body table th {
    min-width: 120px;
    white-space: normal;
  }
}

.article-body table th {
  background-color: var(--colour-primary);
  color: #fff;
  padding: var(--space-4) var(--space-6);
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  border-right: 1px solid rgba(255,255,255,0.15);
}

.article-body table th:last-child {
  border-right: none;
}

.article-body table td {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  border-right: 1px solid var(--colour-border);
  vertical-align: top;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.article-body table td:last-child {
  border-right: none;
}

.article-body table tr:last-child td {
  border-bottom: none;
}

.article-body table tr:nth-child(even) td {
  background-color: var(--colour-bg-alt);
}

/* ============================================================
   NEWSLETTER EMBED SECTION
   ============================================================ */

.newsletter-embed-section {
  background: var(--colour-primary);
  border-radius: var(--radius-xl);
  margin-inline: var(--space-4);
  padding-block: var(--space-16);
  margin-block: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (max-width: 640px) {
  .newsletter-embed-section {
    padding-block: var(--space-10);
    padding-inline: var(--space-6);
  }
}

.newsletter-embed-section .formkit-form {
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  border: none !important;
  background: transparent !important;
}

.newsletter-embed-section .formkit-background {
  display: none !important;
}

.newsletter-embed-section [data-style="minimal"] {
  background: transparent !important;
}

.newsletter-embed-section .formkit-header h2 {
  color: #ffffff !important;
  font-size: 1.75rem !important;
}

.newsletter-embed-section .formkit-subheader p {
  color: rgba(255, 255, 255, 0.85) !important;
}

.newsletter-embed-section .formkit-input {
  padding: 14px 20px !important;
  font-size: 1rem !important;
  border-radius: 8px !important;
  border: none !important;
}

.newsletter-embed-section .formkit-submit > span {
  padding: 20px 72px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.newsletter-embed-section .formkit-submit {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.newsletter-embed-section .formkit-submit {
  background-color: #2EA91D !important;
  border-radius: 8px !important;
}

.newsletter-embed-section .formkit-guarantee p {
  color: rgba(255, 255, 255, 0.6) !important;
}

.newsletter-embed-section .formkit-powered-by-convertkit-container {
  justify-content: center;
}

@media (min-width: 768px) {
  .newsletter-embed-section {
    margin-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .newsletter-embed-section {
    margin-inline: var(--space-8);
  }
}

/* ============================================================
   ARTICLE BODY COMPONENTS (compliance guides)
   ============================================================ */

.article-summary-box {
  background: #EFF8FF;
  border: 1.5px solid #14B8A6;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
}
.article-summary-box__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #14B8A6;
  margin-bottom: 0.75rem;
}
.article-summary-box__list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.article-summary-box__list li {
  font-size: 0.9375rem;
  color: var(--colour-body);
  line-height: 1.6;
}

.article-callout {
  background: var(--colour-primary);
  color: #ffffff;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 500;
}

.article-section-summary {
  border-left: 4px solid #8B5CF6;
  background: #F5F3FF;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 2rem 0;
}
.article-section-summary__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8B5CF6;
  margin-bottom: 0.5rem;
}
.article-section-summary__list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.article-section-summary__list li {
  font-size: 0.9rem;
  color: var(--colour-body);
  line-height: 1.55;
}

.article-blockquote {
  border-left: 4px solid var(--colour-accent);
  background: var(--colour-bg-alt);
  margin: 1.75rem 0;
  padding: 1rem 1.5rem;
  border-radius: 0 8px 8px 0;
}
.article-blockquote p {
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--colour-body);
  margin: 0 0 0.5rem;
  line-height: 1.7;
}
.article-blockquote cite {
  font-size: 0.825rem;
  color: var(--colour-muted);
  font-style: normal;
}

.article-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  margin: 2rem 0;
}
.article-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

mark.article-highlight {
  background: #FEF08A;
  color: var(--colour-body);
  padding: 0.1em 0.2em;
  border-radius: 3px;
}

/* Gated download */
.gated-download {
  margin-top: var(--space-12);
  padding: var(--space-8) var(--space-8);
  background: linear-gradient(135deg, var(--colour-primary) 0%, var(--colour-primary-light) 100%);
  border-radius: var(--radius-lg);
  color: #fff;
}

.gated-download__headline {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-3);
}

.gated-download p {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-6);
}

.gated-download__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .gated-download__form .form__group {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
  }

  .gated-download__form .form__input {
    flex: 1;
    margin-bottom: 0;
  }
}

.gated-download .form__input {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.gated-download .form__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.gated-download .form__note {
  color: rgba(255, 255, 255, 0.55);
}

/* Article CTA block */
.article-cta {
  margin-top: var(--space-16);
}


/* ============================================================
   20. TESTIMONIALS
   ============================================================ */

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial-card {
  background-color: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Opening quote mark */
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  font-size: 4rem;
  line-height: 1;
  color: var(--colour-accent);
  opacity: 0.2;
  font-family: Georgia, serif;
}

.testimonial-card__quote {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--colour-body);
  flex: 1;
  font-style: italic;
}

.testimonial-card__author {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--colour-body);
}

.testimonial-card__source {
  font-size: var(--font-size-xs);
  color: var(--colour-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Google star rating — purely decorative */
.testimonial-card__stars {
  display: flex;
  gap: 2px;
  color: #FBBC04;
  font-size: var(--font-size-sm);
}

/* Dark section variant */
.section--dark .testimonial-card {
  background-color: var(--colour-primary-light);
  border-color: rgba(255, 255, 255, 0.1);
}

.section--dark .testimonial-card__quote,
.section--dark .testimonial-card__author {
  color: #fff;
}

.section--dark .testimonial-card__source {
  color: rgba(255, 255, 255, 0.55);
}


/* ============================================================
   21. CTA BLOCKS
   ============================================================ */

.cta-block {
  padding-block: var(--space-16);
  text-align: center;
}

.cta-block--primary {
  background-color: var(--colour-accent);
  background-image: linear-gradient(135deg, #3B82F6 0%, var(--colour-accent) 50%, #1D4ED8 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  margin-block: var(--space-6);
}

.cta-block--dark {
  background-color: var(--colour-primary);
  background-image: linear-gradient(135deg, var(--colour-primary) 0%, var(--colour-dark) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  margin-block: var(--space-6);
}

.cta-block__headline {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--colour-body);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.cta-block--primary .cta-block__headline,
.cta-block--dark .cta-block__headline {
  color: #fff;
}

.cta-block__sub {
  font-size: var(--font-size-lg);
  color: var(--colour-muted);
  margin-bottom: var(--space-8);
  max-width: 540px;
  margin-inline: auto;
  line-height: 1.6;
}

.cta-block--primary .cta-block__sub,
.cta-block--dark .cta-block__sub {
  color: rgba(255, 255, 255, 0.8);
}

.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .cta-block__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .cta-block .btn {
    width: auto;
    min-width: 160px;
  }
}

/* On primary CTA (blue bg), invert button colours */
.cta-block--primary .btn--primary {
  background-color: #fff !important;
  background-image: none !important;
  color: var(--colour-accent) !important;
  border-color: #fff !important;
  font-weight: 700;
}
.cta-block--primary .btn--primary:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--colour-accent-hover);
}
.cta-block--primary .btn--secondary {
  border-color: #fff;
  color: #fff;
  background-color: transparent;
  font-weight: 700;
}
.cta-block--primary .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}


/* ============================================================
   22. TEAM CARDS — superseded by team page styles below
   ============================================================ */


/* ============================================================
   23. TRUST BADGES
   ============================================================ */

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.trust-badge {
  height: 40px;
  width: auto;
  opacity: 0.85;
  filter: brightness(0) invert(1); /* Works for white/dark logos on dark bg */
  transition: opacity var(--transition-fast);
}

.trust-badge:hover {
  opacity: 1;
}

/* On light backgrounds, don't invert */
.section--alt .trust-badge,
.section .trust-badge {
  filter: none;
  opacity: 0.75;
}

.section--alt .trust-badge:hover,
.section .trust-badge:hover {
  opacity: 1;
}

.footer .trust-badge {
  filter: brightness(0) invert(1);
}


/* ============================================================
   24. FORMS
   ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 560px;
}

.form--wide {
  max-width: 100%;
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--colour-body);
}

.form__label--required::after {
  content: ' *';
  color: var(--colour-danger);
}

/* Shared base for all input types */
.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--colour-bg);
  border: 1.5px solid var(--colour-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--colour-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--colour-muted);
}

.form__input:hover,
.form__select:hover,
.form__textarea:hover {
  border-color: #9CA3AF;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--colour-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Select arrow */
.form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
  padding-right: var(--space-10);
  cursor: pointer;
}

.form__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form__submit {
  /* Inherits .btn .btn--primary — add both classes on the element */
  align-self: flex-start;
}

.form__note {
  font-size: var(--font-size-xs);
  color: var(--colour-muted);
  line-height: 1.5;
}

/* Two-column form layout */
.form--grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
  max-width: 100%;
}

.form--grid-2 .form__group--full {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  .form--grid-2 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   25. FAQ / ACCORDION
   ============================================================ */

.accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion__item {
  border-bottom: 1px solid var(--colour-border);
}

.accordion__item:last-child {
  border-bottom: none;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6);
  background-color: var(--colour-bg);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
}

.accordion__trigger:hover {
  background-color: var(--colour-bg-alt);
}

.accordion__item--open .accordion__trigger {
  background-color: var(--colour-bg-alt);
}

.accordion__trigger-text {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--colour-body);
  line-height: 1.4;
  flex: 1;
}

.accordion__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: var(--colour-bg-alt);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), transform var(--transition-base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.accordion__item--open .accordion__icon {
  background-color: var(--colour-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}

.accordion__body {
  display: none;
  padding: 0 var(--space-6) var(--space-6);
  background-color: var(--colour-bg-alt);
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  line-height: 1.7;
}

.accordion__item--open .accordion__body {
  display: block;
}

.accordion__body p {
  margin-bottom: var(--space-3);
}

.accordion__body p:last-child {
  margin-bottom: 0;
}

.accordion__body a {
  color: var(--colour-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================================
   26. CALC BLOCK
   ============================================================ */

.calc-block {
  background-color: var(--colour-bg-alt);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block: var(--space-8);
}

.calc-block__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  gap: var(--space-4);
}

.calc-block__row:last-child {
  border-bottom: none;
}

.calc-block__label {
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  flex: 1;
}

.calc-block__value {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--colour-body);
  text-align: right;
  white-space: nowrap;
}

/* Total row — distinct */
.calc-block__total {
  background-color: var(--colour-primary);
  border-bottom: none;
}

.calc-block__total .calc-block__label {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.calc-block__total .calc-block__value {
  color: #fff;
  font-size: var(--font-size-xl);
  font-weight: 800;
}

/* Saving row — highlighted */
.calc-block__saving {
  background-color: rgba(22, 163, 74, 0.06);
  border-top: 2px solid var(--colour-success);
}

.calc-block__saving .calc-block__label {
  color: var(--colour-success);
  font-weight: 700;
}

.calc-block__saving .calc-block__value {
  color: var(--colour-success);
  font-weight: 800;
}


/* ============================================================
   27. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: 3px;
}

/* Primary — cobalt blue fill */
.btn--primary {
  background-color: var(--colour-accent);
  background-image: linear-gradient(160deg, #3B82F6 0%, var(--colour-accent) 50%, #1D4ED8 100%);
  color: #fff;
  border-color: var(--colour-accent);
  position: relative;
  overflow: hidden;
}

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn--primary:hover {
  background-color: var(--colour-accent-hover);
  background-image: linear-gradient(160deg, var(--colour-accent) 0%, var(--colour-accent-hover) 100%);
  border-color: var(--colour-accent-hover);
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.40);
  transform: translateY(-2px);
}

.btn--primary:hover::after {
  opacity: 1;
}

.btn--primary:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Secondary — outline */
.btn--secondary {
  background-color: transparent;
  color: var(--colour-body);
  border-color: rgba(26, 26, 26, 0.35);
}

.btn--secondary:hover {
  background-color: var(--colour-body);
  border-color: var(--colour-body);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* On dark backgrounds */
.section--dark .btn--secondary,
.hero .btn--secondary,
.hero--page .btn--secondary,
.nav .btn--secondary {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover,
.hero--page .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* Ghost — minimal */
.btn--ghost {
  background-color: transparent;
  color: var(--colour-accent);
  border-color: transparent;
  padding-inline: var(--space-3);
}

.btn--ghost:hover {
  background-color: rgba(37, 99, 235, 0.06);
  color: var(--colour-accent-hover);
}

/* WhatsApp green */
.btn--whatsapp {
  background-color: var(--colour-whatsapp);
  color: #fff;
  border-color: var(--colour-whatsapp);
}

.btn--whatsapp:hover {
  background-color: var(--colour-whatsapp-hover);
  border-color: var(--colour-whatsapp-hover);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* WhatsApp icon — inline SVG via pseudo-element */
.btn--whatsapp::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12c0 2.1.546 4.075 1.5 5.786L0 24l6.4-1.476A11.93 11.93 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.818 9.818 0 01-5.002-1.371l-.359-.213-3.8.876.902-3.713-.234-.381A9.818 9.818 0 012.182 12C2.182 6.578 6.578 2.182 12 2.182S21.818 6.578 21.818 12 17.422 21.818 12 21.818z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* Size variants */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

/* Full width */
.btn--full {
  width: 100%;
}


/* ============================================================
   28. TAGS / BADGES
   ============================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  background-color: var(--colour-bg-alt);
  color: var(--colour-muted);
  border: 1px solid var(--colour-border);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Per-tag colour variants */
.tag--tenancy           { background-color: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.tag--hmo               { background-color: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
.tag--section-8         { background-color: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
.tag--section-21        { background-color: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
.tag--renters-rights    { background-color: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.tag--compliance        { background-color: #F0F9FF; color: #0369A1; border-color: #BAE6FD; }
.tag--licensing         { background-color: #FDF4FF; color: #9333EA; border-color: #F5D0FE; }
.tag--deposits          { background-color: #FFFBEB; color: #B45309; border-color: #FDE68A; }

/* Flexible tag matching — case-insensitive via data attribute */
[data-tag="Tenancy"]            { background-color: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
[data-tag="HMO"]                { background-color: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
[data-tag="Section 8"]          { background-color: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
[data-tag="Section 21"]         { background-color: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
[data-tag="Renters' Rights Act"]{ background-color: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
[data-tag="Compliance"]         { background-color: #F0F9FF; color: #0369A1; border-color: #BAE6FD; }
[data-tag="Licensing"]          { background-color: #FDF4FF; color: #9333EA; border-color: #F5D0FE; }
[data-tag="Deposits"]           { background-color: #FFFBEB; color: #B45309; border-color: #FDE68A; }

/* General badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  background-color: var(--colour-bg-alt);
  color: var(--colour-body);
  border: 1px solid var(--colour-border);
}

/* Promotional badge */
.badge--promo {
  background-color: var(--colour-accent);
  color: #fff;
  border-color: var(--colour-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ============================================================
   29. CROSS-LINK BLOCK
   ============================================================ */

.crosslink {
  background-color: var(--colour-bg-alt);
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--colour-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6);
  margin-block: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

@media (min-width: 640px) {
  .crosslink {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.crosslink__text {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--colour-body);
  line-height: 1.4;
}

.crosslink__text span {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--colour-muted);
  margin-top: var(--space-1);
}

.crosslink__link {
  /* Apply .btn .btn--secondary on element */
  flex-shrink: 0;
}


/* ============================================================
   30. BREADCRUMB
   ============================================================ */

.breadcrumb {
  margin-bottom: var(--space-6);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  color: var(--colour-border);
}

.breadcrumb__item a {
  color: var(--colour-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__item a:hover {
  color: var(--colour-accent);
}

.breadcrumb__item--current {
  color: var(--colour-body);
  font-weight: 500;
}


/* ============================================================
   31. FOOTER
   ============================================================ */

.footer {
  background-color: var(--colour-primary);
  padding-top: var(--space-16);
  padding-bottom: 0;
  color: rgba(255, 255, 255, 0.7);
}

/* Four-column grid — inherits .grid-4 but with footer-specific gap */
.footer .grid-4 {
  gap: var(--space-10) var(--space-8);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__col-heading {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
}

.footer__tagline {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.55);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Nav links in footer */
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: #fff;
}

/* Contact details */
.footer__contact {
  margin-bottom: var(--space-2);
}

.footer__contact a {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__contact a:hover {
  color: #fff;
}

.footer__hours {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
}

.footer__cta {
  margin-top: var(--space-2);
}

/* Trust badges in footer */
.footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
}

/* Bottom bar */
.footer__bottom {
  padding-block: var(--space-6);
}

.footer__legal {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.7;
  text-align: center;
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__legal a:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Logo in footer */
.footer a > img {
  margin-bottom: var(--space-3);
  filter: brightness(0) invert(1);
}

/* Centred CTA below a grid section */
.section-cta {
  text-align: center;
  margin-top: var(--space-10);
}


/* ============================================================
   32. UTILITY
   ============================================================ */

/* Visually hidden — accessible to screen readers */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-muted { color: var(--colour-muted); }

.mt-auto { margin-top: auto; }

/* Section heading pattern */
.section-heading {
  margin-bottom: var(--space-12);
}

.section-heading--center {
  text-align: center;
}

.section-heading--center p {
  margin-inline: auto;
}

.section-heading h2 {
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

.section-heading p {
  font-size: var(--font-size-lg);
  color: var(--colour-muted);
  max-width: 600px;
  line-height: 1.7;
}

.section--dark .section-heading h2,
.section--dark .section-heading p {
  color: #fff;
}

.section--dark .section-heading p {
  color: rgba(255, 255, 255, 0.65);
}

/* Loading / empty states */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  color: var(--colour-muted);
  font-size: var(--font-size-sm);
  gap: var(--space-3);
}

.loading-state::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--colour-border);
  border-top-color: var(--colour-accent);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Counter number reveal — triggered by JS adding .is-counting */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-bar__number.is-counting {
  animation: countUp 0.4s ease forwards;
}

/* Reduced motion — disable animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero-card,
  .tier-card,
  .property-card,
  .article-card,
  .testimonial-card,
  .team-card,
  .btn {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .btn--primary::after {
    display: none;
  }
}

.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--colour-muted);
  font-size: var(--font-size-base);
}

/* VAT note — used repeatedly across pricing */
.vat-note {
  font-size: var(--font-size-xs);
  color: var(--colour-muted);
  margin-top: var(--space-2);
}


/* ============================================================
   33. RESPONSIVE OVERRIDES
   ============================================================ */

/* ── Small mobile (below 480px) ── */
@media (max-width: 479px) {
  .hero {
    padding-block: var(--space-16);
  }

  .hero__headline {
    font-size: var(--font-size-3xl);
  }

  .hero__cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta-group .btn {
    width: 100%;
    text-align: center;
  }

  .section {
    padding-block: var(--space-12);
  }

  .section--alt {
    padding-block: var(--space-12);
  }

  .section--dark {
    padding-block: var(--space-12);
  }

  .tier-card {
    padding: var(--space-6);
  }

  .cta-block--primary,
  .cta-block--dark {
    padding: var(--space-8) var(--space-6);
  }

  .article-container {
    padding-inline: var(--space-4);
  }
}

/* ── Mobile (480px–767px) ── */
@media (min-width: 480px) and (max-width: 767px) {
  .hero__cta-group {
    flex-wrap: nowrap;
  }

  .stat-bar > .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Tablet (768px–1023px) ── */
@media (min-width: 768px) {
  h1 { font-size: var(--font-size-5xl); }

  .container {
    padding-inline: var(--space-8);
  }

  .hero {
    padding-block: var(--space-24);
  }

  .hero--page {
    padding-block: var(--space-20);
  }

  .process {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Desktop (1024px+) ── */
@media (min-width: 1024px) {
  .footer .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .article-container {
    padding-inline: var(--space-8);
  }

  .stat-bar > .container {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Show dividers between stat items on desktop */
  .stat-bar__item + .stat-bar__item::before {
    content: none; /* Handled by border-left defined at 640px+ */
  }
}

/* ── Wide (1200px+) ── */
@media (min-width: 1200px) {
  .container {
    padding-inline: var(--space-6);
  }
}

/* ── Print ── */
@media print {
  .nav,
  .footer,
  .cta-block,
  .alert-signup {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}


/* ============================================================
   34. LANDLORDS PAGE — HERO PHOTO, SCROLL REVEAL, EXTRAS
   ============================================================ */

/* ── Hero photo variant ── */
.hero--photo {
  text-align: left;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.hero--photo::before {
  background-image: none;
}

.hero--photo .hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero--landlords .hero__bg {
  background-image: url('/images/hero-letting-management.jpg');
}

.hero--photo .hero__overlay {
  position: absolute;
  inset: 0;
  background-color: #1B2B26;
  opacity: 0.82;
  z-index: 1;
  pointer-events: none;
}

.hero--photo > .container {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  text-align: left;
  width: 100%;
}

.hero--photo .hero__sub {
  margin-inline: 0;
  max-width: 600px;
}

.hero--photo .hero__cta-group {
  display: flex;
  justify-content: flex-start;
}


/* ── Hero content fade-in on page load ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-content-animate > * {
  animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-content-animate > *:nth-child(1) { animation-delay: 0.10s; }
.hero-content-animate > *:nth-child(2) { animation-delay: 0.25s; }
.hero-content-animate > *:nth-child(3) { animation-delay: 0.40s; }
.hero-content-animate > *:nth-child(4) { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  .hero-content-animate > * { animation: none; opacity: 1; transform: none; }
}


/* ── Scroll reveal — IntersectionObserver hook ── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal--delay-1 { transition-delay: 0.08s; }
.scroll-reveal--delay-2 { transition-delay: 0.16s; }
.scroll-reveal--delay-3 { transition-delay: 0.24s; }
.scroll-reveal--delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
}


/* ── Process step icon container ── */
.process__step-icon {
  width: 52px;
  height: 52px;
  background-color: rgba(27, 43, 38, 0.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--colour-primary);
  margin-bottom: var(--space-4);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.process__step:hover .process__step-icon {
  background-color: rgba(27, 43, 38, 0.14);
  transform: scale(1.06);
}


/* ── Desktop connecting line between process steps ── */
@media (min-width: 768px) {
  .process--connected {
    position: relative;
  }

  .process--connected::before {
    content: '';
    position: absolute;
    top: 26px;
    left: calc(12.5% + 26px);
    right: calc(12.5% + 26px);
    height: 0;
    border-top: 2px dashed var(--colour-border);
    z-index: 0;
    pointer-events: none;
  }

  .process--connected .process__step {
    position: relative;
    z-index: 1;
  }
}


/* ── Featured tier card — dark (#1B2B26) variant ── */
.tier-card--featured-dark {
  background-color: var(--colour-primary);
  border-color: var(--colour-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(27, 43, 38, 0.20), var(--shadow-xl);
}

.tier-card--featured-dark:hover {
  box-shadow: 0 0 0 6px rgba(27, 43, 38, 0.28), var(--shadow-xl);
  transform: translateY(-4px);
}

.tier-card--featured-dark .tier-card__badge {
  background-color: var(--colour-brand-green);
  color: #fff;
}

.tier-card--featured-dark .tier-card__name {
  color: rgba(255, 255, 255, 0.9);
}

.tier-card--featured-dark .tier-card__price,
.tier-card--featured-dark .tier-card__price-promo {
  color: #fff;
}

.tier-card--featured-dark .tier-card__price-standard {
  color: rgba(255, 255, 255, 0.45);
}

.tier-card--featured-dark .tier-card__price-note {
  color: rgba(255, 255, 255, 0.65);
}

.tier-card--featured-dark .tier-card__feature-item {
  color: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.tier-card--featured-dark .tier-card__feature-item--cross {
  color: rgba(255, 255, 255, 0.45);
}

.tier-card--featured-dark .tier-card__feature-item--cross::before {
  background-color: rgba(255, 255, 255, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='rgba(255%2C255%2C255%2C0.5)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.tier-card--featured-dark .tier-card__bolt-on {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.65);
}

.tier-card--featured-dark .tier-card__bolt-on strong {
  color: rgba(255, 255, 255, 0.88);
}


/* ── Pricing panel toggle (Standard / Portfolio) ── */
.pricing-panel {
  display: none;
}

.pricing-panel.is-active {
  display: block;
}


/* ── Calc comparison — two-column side by side ── */
.calc-comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (min-width: 640px) {
  .calc-comparison {
    grid-template-columns: 1fr 1fr;
  }
}

.calc-comparison__header {
  padding: var(--space-5) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: 700;
  background-color: var(--colour-bg-alt);
  border-bottom: 2px solid var(--colour-border);
  margin: 0;
  color: var(--colour-body);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.calc-comparison__header--dark {
  background-color: var(--colour-primary);
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.calc-comparison .calc-block {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


/* ── Number reveal — triggered by IntersectionObserver ── */
.number-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.number-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .number-reveal { opacity: 1; transform: none; transition: none; }
}


/* ── Pricing table — per-column accent colour headers ── */
.pricing-table__head th.col--let-only { border-bottom: 3px solid var(--colour-primary); }
.pricing-table__head th.col--managed  { border-bottom: 3px solid var(--colour-brand-green); }
.pricing-table__head th.col--hmo      { border-bottom: 3px solid var(--colour-card-3); }


/* ── Hero inset wrap — matches homepage hero card margins ── */
.hero-inset-wrap {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 80px;
}


/* ── How We Work process cards ── */
.how-we-work-section {
  padding-bottom: 0;
}

.process-cards-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--space-8);
  padding: 0 1.5rem;
}

.process-card {
  display: flex;
  flex-direction: column;
  height: 320px;
  width: 230px;
  border-radius: 10px;
  transition: transform 0.4s ease-out;
  position: relative;
  overflow: hidden;
  cursor: default;
  padding: 1.5rem;
  color: white;
  flex-shrink: 0;
}

.process-card:not(:first-child) {
  margin-left: -50px;
}

.process-card:hover {
  transform: translateY(-20px);
  transition: 0.4s ease-out;
  z-index: 10;
}

.process-card:hover ~ .process-card {
  position: relative;
  left: 50px;
  transition: 0.4s ease-out;
}

.process-card--1 { background-color: #1B2B26; }
.process-card--2 { background-color: #2EA91D; }
.process-card--3 { background-color: #14B8A6; }
.process-card--4 { background-color: #8B5CF6; }

.process-card__title {
  color: white;
  font-weight: 300;
  font-size: 1.5rem;
  margin: 0 0 var(--space-4) 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
}

.process-card__number {
  background-color: rgba(255, 255, 255, 0.2);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  flex-shrink: 0;
}

.process-card__bar {
  position: relative;
  height: 5px;
  width: 150px;
  margin-bottom: var(--space-4);
}

.process-card__bar-empty {
  background-color: rgba(255, 255, 255, 0.15);
  width: 100%;
  height: 100%;
}

.process-card__bar-filled {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  transition: width 0.4s ease-out;
}

.process-card--1 .process-card__bar-filled { background-color: #3A5A52; }
.process-card--2 .process-card__bar-filled { background-color: #4FC93E; }
.process-card--3 .process-card__bar-filled { background-color: #2ED6C5; }
.process-card--4 .process-card__bar-filled { background-color: #A580F7; }

.process-card:hover .process-card__bar-filled {
  width: 120px;
}

.process-card__body {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.6;
  transition: opacity 0.4s ease-out;
  opacity: 0.7;
}

.process-card:hover .process-card__body {
  opacity: 1;
}

@media (max-width: 768px) {
  .process-cards-wrap {
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
    padding-bottom: 80px;
  }

  .process-card {
    width: 100%;
    max-width: 400px;
    height: 280px;
    margin-left: 0 !important;
    left: 0 !important;
    margin-top: -180px;
  }

  .process-card:first-child {
    margin-top: 0;
  }

  .process-card:hover ~ .process-card {
    left: 0 !important;
    transform: translateY(40px);
  }
}


/* ============================================================
   34. RENTAL VALUATIONS PAGE
   ============================================================ */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Hero */
.hero--rental-valuations .hero__bg {
  background-image: url('/images/hero-rental-valuation.jpg');
}

.hero--rental-valuations .hero__overlay {
  background-color: var(--colour-card-3);
  opacity: 0.82;
}

/* Borough search */
.borough-search {
  position: relative;
  max-width: 540px;
  margin: 0 auto var(--space-6);
}

.borough-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.borough-search__input {
  width: 100%;
  padding: 0.875rem 2.75rem 0.875rem 1rem;
  border: 1.5px solid #2AA91740;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--colour-body);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  -webkit-appearance: none;
}

.borough-search__input:focus {
  border-color: #2AA917;
  box-shadow: 0 0 0 3px rgba(42, 169, 23, 0.15);
}

.borough-search__input::placeholder {
  color: var(--colour-muted);
}

.borough-search__clear {
  position: absolute;
  right: 0.875rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--colour-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem;
  transition: color 0.15s ease;
}

.borough-search__clear:hover {
  color: var(--colour-body);
}

.borough-search__suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--colour-card-3);
  border-radius: var(--radius-md);
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  z-index: 200;
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
}

.borough-search__suggestion {
  padding: 0.625rem 1rem;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--colour-body);
  transition: background 0.1s ease;
}

.borough-search__suggestion:hover {
  background: rgba(20, 184, 166, 0.08);
  color: var(--colour-card-3-hover);
}

/* Market stack container */
.market-stack-wrap {
  position: relative;
  height: 0;
  overflow: visible;
}

.market-stack-spacer {
  height: calc(4 * 4.5rem + 200px);
}

/* Individual market cards */
.market-card {
  position: absolute;
  left: 0;
  right: 0;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease-out;
  cursor: default;
  user-select: none;
}

.market-card--1bed {
  top: 0;
  z-index: 1;
  background: var(--colour-card-3);
}

.market-card--2bed {
  top: 4.5rem;
  z-index: 2;
  background: var(--colour-primary);
}

.market-card--3bed {
  top: 9rem;
  z-index: 3;
  background: var(--colour-card-4);
}

.market-card--4bed {
  top: 13.5rem;
  z-index: 4;
  background: #E85D75;
}

@media (hover: hover) {
  .market-card:hover {
    transform: translateY(-3rem);
    z-index: 100 !important;
  }
}

.market-card.is-expanded {
  transform: translateY(-3rem);
  z-index: 100 !important;
  transition: transform 0.35s ease-out;
}

/* Peek strip */
.market-card__peek {
  height: 4.5rem;
  flex-shrink: 0;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.market-card__bed-label {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

.market-card__avg-block {
  background: rgba(0, 0, 0, 0.30);
  border-radius: 6px;
  padding: 0.35rem 0.85rem;
  text-align: center;
  min-width: 160px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.market-card__avg-label {
  font-size: 9px;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1px;
  color: #fff;
}

.market-card__avg-price {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
}

.market-card__avg-location {
  font-size: 10px;
  opacity: 0.6;
  color: #fff;
}

/* Card body */
.market-card__body {
  flex: 1;
  padding: 0.5rem 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.market-card__divider {
  height: 0.5px;
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 0.1rem;
}

.market-card__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  flex: 1;
}

.market-card__link-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  text-decoration: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 7px;
  padding: 0.45rem 0.6rem;
  transition: background 0.2s ease;
  cursor: pointer;
}

.market-card__link-item:hover {
  background: rgba(0, 0, 0, 0.28);
}

.market-card__link-item::after {
  content: "↗";
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  font-size: 13px;
  color: #fff;
  opacity: 0.75;
}

.market-card__link-type {
  font-size: 9.5px;
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
}

.market-card__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.market-card__dot--cheapest {
  background: #4ade80;
}

.market-card__dot--expensive {
  background: rgba(255, 255, 255, 0.45);
}

.market-card__link-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.market-card__link-price {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

.market-card__view-btn {
  font-size: 10px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  padding: 1px 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.market-card__view-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Data freshness footer */
.market-data-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.75rem;
  font-size: 12px;
  color: var(--colour-muted);
}

.market-data-freshness {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.market-data-source {
  font-size: 11px;
  background: rgba(20, 184, 166, 0.1);
  color: var(--colour-card-3-hover);
  border-radius: 20px;
  padding: 3px 10px;
  font-weight: 500;
}

.market-data-error {
  text-align: center;
  color: var(--colour-muted);
  padding: var(--space-8);
  font-size: var(--font-size-sm);
  border: 1px dashed var(--colour-border);
  border-radius: var(--radius-md);
}

/* Teal light section background */
.section--teal-light {
  background-color: #F0FDFC;
}

/* Teal button variant */
.btn--teal {
  background-color: var(--colour-card-3);
  background-image: linear-gradient(160deg, #2dd4bf 0%, var(--colour-card-3) 50%, var(--colour-card-3-hover) 100%);
  color: #fff;
  border-color: var(--colour-card-3);
  position: relative;
  overflow: hidden;
}

.btn--teal:hover,
.btn--teal:focus {
  background-color: var(--colour-card-3-hover);
  background-image: linear-gradient(160deg, var(--colour-card-3) 0%, var(--colour-card-3-hover) 100%);
  border-color: var(--colour-card-3-hover);
  color: #fff;
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.35);
  transform: translateY(-2px);
}

.btn--teal:active {
  transform: translateY(1px);
  box-shadow: none;
}

@media (max-width: 640px) {
  .btn--teal-full-mobile {
    width: 100%;
  }
}

/* Valuation form placeholder box */
.valuation-form-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-lg);
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.valuation-form-box__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--colour-primary);
  margin-bottom: var(--space-2);
}

.valuation-form-box__desc {
  color: var(--colour-muted);
  font-size: var(--font-size-sm);
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto var(--space-6);
}

.valuation-form-box__note {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
}

/* How it works — rental valuations (rv-steps) */
.rv-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 680px;
  margin: 0 auto;
}

.rv-steps::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 16px;
  width: 2px;
  background: rgba(20, 184, 166, 0.2);
  pointer-events: none;
}

.rv-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  position: relative;
}

.rv-step__badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--colour-card-3);
  color: #fff;
  font-size: var(--font-size-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.rv-step__content {
  padding-top: 0.6rem;
}

.rv-step__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--colour-primary);
  margin-bottom: var(--space-1);
}

.rv-step__desc {
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  line-height: 1.65;
}

@media (min-width: 768px) {
  .rv-steps {
    flex-direction: row;
    max-width: 100%;
    gap: var(--space-4);
    align-items: flex-start;
  }

  .rv-steps::before {
    top: 24px;
    bottom: auto;
    left: calc(12.5% + 24px);
    right: calc(12.5% + 24px);
    width: auto;
    height: 2px;
  }

  .rv-step {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
  }

  .rv-step__content {
    padding-top: 0;
  }
}

/* Crosslink — violet banner */
.crosslink--violet {
  background: var(--colour-card-4);
  border: none;
  border-left: none;
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  margin-block: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

@media (min-width: 640px) {
  .crosslink--violet {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.crosslink--violet .crosslink__text {
  color: #fff;
  font-size: var(--font-size-lg);
}

.crosslink--violet .crosslink__text span {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-sm);
}

.crosslink--violet .crosslink__link {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  padding: 0.85rem 2rem;
  min-width: 220px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.crosslink--violet .crosslink__link:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.crosslink__arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.crosslink--violet .crosslink__link:hover .crosslink__arrow {
  transform: translateX(4px);
}

/* Mobile market card overrides */
@media (max-width: 767px) {
  .market-stack-wrap,
  .market-stack-spacer {
    height: calc(4 * 4.5rem + 240px);
  }

  .market-card {
    height: 240px;
  }

  .market-card--1bed { top: 0; }
  .market-card--2bed { top: 4.5rem; }
  .market-card--3bed { top: 9rem; }
  .market-card--4bed { top: 13.5rem; }

  .market-card__peek {
    height: 4.5rem;
    padding: 0 0.85rem;
    gap: 0.5rem;
  }

  .market-card__bed-label {
    font-size: 11px;
    white-space: normal;
    line-height: 1.2;
    max-width: 45%;
  }

  .market-card__avg-block {
    min-width: 0;
    width: auto;
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    max-width: 52%;
  }

  .market-card__avg-label {
    font-size: 7.5px;
    letter-spacing: 0.04em;
  }

  .market-card__avg-price {
    font-size: 15px;
  }

  .market-card__avg-location {
    font-size: 9px;
  }

  .market-card__body {
    padding: 0.4rem 0.85rem 0.6rem;
  }

  .market-card__link-price {
    font-size: 13px;
  }

  .market-card__link-type {
    font-size: 9px;
  }
}

/* Hero section label pill — white on photo/overlay heroes */
.hero--photo .section-label {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  display: inline-block;
}

/* ── Fix 2: Data last-updated label ── */
.market-last-updated {
  font-size: 0.85rem;
  font-weight: 500;
  color: #1B2B26;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.market-last-updated strong {
  color: #14B8A6;
}

/* ── Fix 7: Market methodology section ── */
.market-methodology {
  background: #F9FAFB;
  padding: 2.5rem 0;
}

.market-methodology__inner {
  max-width: 720px;
  margin: 0 auto;
}

.market-methodology__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1B2B26;
  margin-bottom: 0.75rem;
}

.market-methodology__body {
  font-size: 0.95rem;
  color: #4B5563;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.market-methodology__link {
  color: #14B8A6;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.market-methodology__link:hover {
  color: #0e9688;
}

/* ── Fix 11: Narrow-mobile button wrapping prevention ── */
@media (max-width: 479px) {
  .btn--primary,
  .btn--secondary {
    font-size: 13px;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
  }
}

/* ============================================================
   HMO VALUATION PAGE
   ============================================================ */

/* Hero */
.hero--hmo-valuation .hero__bg {
  background-image: url('/images/hero-hmo-valuation.jpg');
}

.hero--hmo-valuation .hero__overlay {
  background-color: #8B5CF6;
  opacity: 0.82;
}

/* ── HMO zone card stack ─────────────────────────────────── */

.hmo-stack-wrap {
  position: relative;
  height: 0;
  overflow: visible;
}

.hmo-stack-spacer {
  height: calc(6 * 4.5rem + 230px);
}

.hmo-card {
  position: absolute;
  left: 0;
  right: 0;
  height: 230px;
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease-out;
  cursor: default;
  user-select: none;
}

.hmo-card--central-london    { top: 0;              z-index: 1; background: #1B2B26; }
.hmo-card--north-london      { top: 4.5rem;         z-index: 2; background: #2EA91D; }
.hmo-card--east-london       { top: calc(2*4.5rem); z-index: 3; background: #14B8A6; }
.hmo-card--south-west-london { top: calc(3*4.5rem); z-index: 4; background: #8B5CF6; }
.hmo-card--west-london       { top: calc(4*4.5rem); z-index: 5; background: #E85D75; }
.hmo-card--north-west-london { top: calc(5*4.5rem); z-index: 6; background: #F59E0B; }
.hmo-card--south-east-london { top: calc(6*4.5rem); z-index: 7; background: #3B82F6; }

@media (hover: hover) {
  .hmo-card:hover {
    transform: translateY(-3rem);
    transition: transform 0.35s ease-out;
    z-index: 10;
  }
}

.hmo-card.is-expanded {
  transform: translateY(-3rem);
  transition: transform 0.35s ease-out;
  z-index: 10;
}

/* Peek strip */
.hmo-card__peek {
  height: 4.5rem;
  flex-shrink: 0;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.hmo-card__zone-name {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
  min-width: 90px;
}

.hmo-card__peek-avgs {
  display: flex;
  gap: 0.5rem;
}

.hmo-card__peek-avg {
  background: rgba(0, 0, 0, 0.30);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  text-align: center;
  min-width: 90px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hmo-card__avg-label {
  font-size: 9px;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1px;
  color: #fff;
}

.hmo-card__avg-price {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
}

/* Card body */
.hmo-card__body {
  flex: 1;
  padding: 0.5rem 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hmo-card__divider {
  height: 0.5px;
  background: rgba(255, 255, 255, 0.15);
}

.hmo-card__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  flex: 1;
}

.hmo-card__link-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  text-decoration: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 7px;
  padding: 0.45rem 0.6rem;
  transition: background 0.2s ease;
  cursor: pointer;
}

.hmo-card__link-item:hover {
  background: rgba(0, 0, 0, 0.28);
}

.hmo-card__link-item::after {
  content: "↗";
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  font-size: 13px;
  color: #fff;
  opacity: 0.75;
}

.hmo-card__link-type {
  font-size: 9.5px;
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
}

.hmo-card__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hmo-card__dot--cheap-ensuite     { background: #4ade80; }
.hmo-card__dot--exp-ensuite        { background: rgba(255, 255, 255, 0.45); }
.hmo-card__dot--cheap-non-ensuite  { background: #86efac; }
.hmo-card__dot--exp-non-ensuite    { background: rgba(255, 255, 255, 0.25); }

.hmo-card__link-price {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

/* Mobile HMO card overrides */
@media (max-width: 767px) {
  .hmo-stack-wrap,
  .hmo-stack-spacer {
    height: calc(6 * 4.5rem + 240px);
  }

  .hmo-card {
    height: 240px;
  }

  .hmo-card--central-london    { top: 0; }
  .hmo-card--north-london      { top: 4.5rem; }
  .hmo-card--east-london       { top: 9rem; }
  .hmo-card--south-west-london { top: 13.5rem; }
  .hmo-card--west-london       { top: 18rem; }
  .hmo-card--north-west-london { top: 22.5rem; }
  .hmo-card--south-east-london { top: 27rem; }

  .hmo-card__peek {
    height: 4.5rem;
    padding: 0 0.85rem;
    gap: 0.4rem;
  }

  .hmo-card__zone-name {
    font-size: 11px;
    min-width: 0;
    flex-shrink: 1;
  }

  .hmo-card__peek-avg {
    min-width: 0;
    padding: 0.25rem 0.5rem;
    max-width: 48%;
  }

  .hmo-card__avg-label {
    font-size: 7.5px;
  }

  .hmo-card__avg-price {
    font-size: 13px;
  }

  .hmo-card__body {
    padding: 0.4rem 0.85rem 0.6rem;
  }

  .hmo-card__link-price {
    font-size: 13px;
  }

  .hmo-card__link-type {
    font-size: 9px;
  }
}

/* ── HMO market date label ───────────────────────────────── */
.hmo-market-last-updated {
  font-size: 0.85rem;
  font-weight: 500;
  color: #1B2B26;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.hmo-market-last-updated strong {
  color: #8B5CF6;
}

/* ── Violet light section background ────────────────────── */
.section--violet-light {
  background-color: #F5F3FF;
}

/* ── Investment advisory block ───────────────────────────── */
.investment-advisory {
  background: #1B2B26;
  color: #fff;
  border-radius: 12px;
  padding: 2.5rem;
  max-width: 720px;
  margin: 0 auto;
}

.investment-advisory__eyebrow {
  display: block;
  color: #8B5CF6;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.investment-advisory__heading {
  font-size: clamp(1.4rem, 2.5vw, 1.875rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.investment-advisory__body {
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.7;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.investment-advisory__cta {
  text-align: center;
  margin-top: 1.5rem;
}

/* ── Teal crosslink banner ───────────────────────────────── */
.crosslink--teal {
  background: #14B8A6;
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

@media (min-width: 640px) {
  .crosslink--teal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.crosslink--teal .crosslink__text {
  color: #fff;
  font-size: var(--font-size-lg);
}

.crosslink--teal .crosslink__text span {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-size-sm);
}

.crosslink--teal .crosslink__link {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.50);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  padding: 0.85rem 2rem;
  min-width: 220px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.crosslink--teal .crosslink__link:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.crosslink--teal .crosslink__link:hover .crosslink__arrow {
  transform: translateX(4px);
}


/* ============================================================
   HOMEPAGE ADDITIONS — Why Us, Testimonial, HP Widget
   ============================================================ */

/* ── Teal eyebrow label ── */
.eyebrow-teal {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #14B8A6;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-3);
}

/* ── Why Us heading H2 size ── */
.why-us-h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #1B2B26;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

/* ── Why Us 2×2 grid ── */
.why-us-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Why Us feature cards ── */
.why-us-card {
  background: #fff;
  border: 0.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 1.5rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.why-us-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) {
  .why-us-card.is-visible:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  }
}

/* Accent top border per card */
.why-us-card--teal   { border-top: 3px solid #14B8A6; }
.why-us-card--dark   { border-top: 3px solid #1B2B26; }
.why-us-card--green  { border-top: 3px solid #2EA91D; }
.why-us-card--violet { border-top: 3px solid #8B5CF6; }

/* Staggered reveal */
.why-us-card:nth-child(2) { transition-delay: 0.10s; }
.why-us-card:nth-child(3) { transition-delay: 0.20s; }
.why-us-card:nth-child(4) { transition-delay: 0.30s; }

.why-us-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-us-card__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Icon colour inherits from card accent */
.why-us-card--teal   .why-us-card__icon { color: #14B8A6; }
.why-us-card--dark   .why-us-card__icon { color: #1B2B26; }
.why-us-card--green  .why-us-card__icon { color: #2EA91D; }
.why-us-card--violet .why-us-card__icon { color: #8B5CF6; }

.why-us-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1B2B26;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.why-us-card__body {
  font-size: 0.875rem;
  color: #6B7280;
  line-height: 1.65;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .why-us-card { opacity: 1; transform: none; transition: none; }
}


/* ── Single testimonial ── */
.testimonial-single-section {
  background: #F9FAFB;
}

.testimonial-single {
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  text-align: center;
}

.testimonial-single__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  color: #14B8A6;
  margin-bottom: 1rem;
}

.testimonial-single__stars svg {
  width: 18px;
  height: 18px;
  display: block;
}

.testimonial-single__open-quote {
  display: block;
  font-size: 5rem;
  color: #14B8A6;
  line-height: 0.5;
  margin-bottom: 0.5rem;
  font-family: Georgia, 'Times New Roman', serif;
}

.testimonial-single__quote {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 400;
  color: #1B2B26;
  line-height: 1.7;
  font-style: italic;
  margin: 0 0 1.5rem 0;
}

.testimonial-single__attr {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 0.75rem;
}

.testimonial-single__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 3px 10px;
}


/* ── Homepage market widget ── */
.hp-widget-sub {
  font-size: 1rem;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hp-widget-date {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1B2B26;
  text-align: center;
  margin-bottom: 1.5rem;
}

.hp-widget-date strong {
  color: #14B8A6;
}

.hp-pill-badges {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.hp-pill-badge {
  display: inline-flex;
  align-items: center;
  background: #14B8A6;
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
}

.hp-stack-wrap {
  position: relative;
  height: 0;
  overflow: visible;
}

.hp-stack-spacer {
  height: calc(6 * 4rem + 230px);
}

.hp-card {
  position: absolute;
  left: 0;
  right: 0;
  height: 230px;
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease-out;
  cursor: default;
  user-select: none;
}

.hp-card--1bed { top: 0;     z-index: 1; background: #14B8A6; }
.hp-card--2bed { top: 4rem;  z-index: 2; background: #1B2B26; }
.hp-card--3bed { top: 8rem;  z-index: 3; background: #8B5CF6; }
.hp-card--4bed { top: 12rem; z-index: 4; background: #2EA91D; }
.hp-card--hmo4 { top: 16rem; z-index: 5; background: #E85D75; }
.hp-card--hmo5 { top: 20rem; z-index: 6; background: #F59E0B; }

@media (hover: hover) {
  .hp-card:hover {
    transform: translateY(-3rem);
    z-index: 100 !important;
  }
}

.hp-card.is-expanded {
  transform: translateY(-3rem);
  z-index: 100 !important;
}

.hp-card__peek {
  height: 4rem;
  flex-shrink: 0;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.hp-card__label {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

.hp-try-another {
  display: block;
  margin: 1.5rem auto 0;
  background: transparent;
  border: 1.5px solid #14B8A6;
  color: #14B8A6;
  border-radius: 20px;
  padding: 0.5rem 1.25rem;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.hp-try-another:hover {
  background: #14B8A6;
  color: #fff;
}

.hp-widget-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (max-width: 767px) {
  .hp-stack-spacer {
    height: calc(6 * 3.5rem + 240px);
  }

  .hp-card {
    height: 240px;
  }

  .hp-card--1bed { top: 0; }
  .hp-card--2bed { top: 3.5rem; }
  .hp-card--3bed { top: 7rem; }
  .hp-card--4bed { top: 10.5rem; }
  .hp-card--hmo4 { top: 14rem; }
  .hp-card--hmo5 { top: 17.5rem; }

  .hp-card__peek {
    height: 3.5rem;
    padding: 0 0.85rem;
    gap: 0.5rem;
  }

  .hp-card__label {
    font-size: 10px;
    max-width: 45%;
  }

  .hp-widget-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hp-widget-ctas .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hp-card__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.15;
    word-break: break-word;
  }
}


/* ── Secondary button — teal outline ── */
.btn--secondary-teal {
  background-color: transparent;
  color: #14B8A6;
  border-color: #14B8A6;
}

.btn--secondary-teal:hover {
  background-color: #14B8A6;
  color: #fff;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.25);
  transform: translateY(-1px);
}


/* ── Article card hover update (Addition 4) ── */
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* ============================================================
   PROPERTIES PAGE — CARD EXTENSIONS & NEW COMPONENTS
   (properties.html + js/properties.js)
   ============================================================ */

/* Active nav link in overlay */
.nav-overlay__link--active {
  color: #fff;
  padding-left: var(--space-3);
}

/* Book viewing — dark primary green fill */
.btn--book {
  background-color: var(--colour-primary);
  border-color: var(--colour-primary);
  color: #fff;
}

.btn--book:hover {
  background-color: var(--colour-dark);
  border-color: var(--colour-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

/* Fixed 160 px image height in property grids */
.properties-grid .property-card__image-wrap {
  height: 160px;
  aspect-ratio: unset;
}

/* Card body — tighter padding per spec */
.properties-grid .property-card__body {
  padding: 14px 16px 16px;
  gap: var(--space-2);
}

/* Title — 15 px / 500 weight, reserve two-line height, never truncate */
.properties-grid .property-card__title {
  font-size: 15px;
  font-weight: 500;
  min-height: 2.6em;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
}

/* Price — 20 px / 500 weight per spec */
.properties-grid .property-card__price {
  font-size: 20px;
  font-weight: 500;
}

/* PCM suffix on price */
.property-card__price-pcm {
  font-size: 13px;
  color: var(--colour-muted);
  font-weight: 400;
  margin-left: 3px;
}

/* Type + zone dark pill — bottom-left of image */
.property-card__type-zone {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: #1B2B26;
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* Platform badge — white pill, top-right, is an <a> element */
.property-card__platform {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border-radius: 8px;
  padding: 5px 9px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  z-index: 2;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: box-shadow var(--transition-fast);
}

.property-card__platform:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.property-card__platform svg {
  flex-shrink: 0;
  display: block;
}

.property-card__platform-name {
  font-size: 12px;
  font-weight: 600;
}

.property-card__platform-arrow {
  display: flex;
  align-items: center;
}

/* Platform colour variants */
.property-card__platform--spareroom .property-card__platform-name,
.property-card__platform--spareroom .property-card__platform-arrow {
  color: #14C8F6;
}

.property-card__platform--otm .property-card__platform-name,
.property-card__platform--otm .property-card__platform-arrow {
  color: #003D7A;
}

.property-card__platform--zoopla .property-card__platform-name,
.property-card__platform--zoopla .property-card__platform-arrow {
  color: #8C1D82;
}

/* Video tour pill — semi-transparent, bottom-right */
.property-card__video-tour {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.60);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  line-height: 1;
  text-decoration: none;
  z-index: 2;
  transition: background var(--transition-fast);
}

.property-card__video-tour:hover {
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
}

/* Now Let triangle — top-left CSS border trick */
.property-card__now-let-tri {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 80px 80px 0 0;
  border-color: #DC2626 transparent transparent transparent;
  z-index: 2;
  pointer-events: none;
}

/* NOW LET text inside triangle */
.property-card__now-let-label {
  position: absolute;
  top: 18px;
  left: 3px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  transform: rotate(-45deg);
  white-space: nowrap;
  z-index: 3;
  line-height: 1;
  pointer-events: none;
}

/* "This property has been let" muted pill */
.property-card__let-pill {
  background: var(--colour-bg-alt);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--colour-muted);
  text-align: center;
  margin-top: auto;
}

/* Placeholder when image_url is blank */
.property-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colour-bg-alt);
  color: var(--colour-muted);
}

/* Empty state — additional classes (base .empty-state already defined) */
.empty-state__icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  display: block;
}

.empty-state__headline {
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  color: var(--colour-body);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.empty-state__body {
  max-width: 560px;
  margin: 0 auto var(--space-6);
  color: var(--colour-muted);
  line-height: 1.6;
  font-size: var(--font-size-base);
}

.empty-state__cta {
  /* Visual styling from .btn .btn--primary — both classes applied on the element */
  margin-top: var(--space-2);
}

/* Property skeleton — fixed 160 px image to match live cards */
.skeleton-card--property .skeleton-card__image {
  height: 160px;
  aspect-ratio: unset;
}

.skeleton-card--property .skeleton-card__body {
  padding: 14px 16px 16px;
}

/* Actions placeholder skeleton line */
.skeleton-line--actions {
  width: 100%;
  height: 36px;
  margin-top: var(--space-4);
  border-radius: var(--radius-md);
}


/* ============================================================
   PROPERTIES PAGE — TARGETED FIXES (2026-06-02)
   ============================================================ */

/* CHANGE 1 — Hero: properties variant */
.hero--properties .hero__bg {
  background-image: url('/images/hero-find-property.jpg');
}

.hero--properties .hero__overlay {
  background-color: #2EA91D;
  opacity: 0.82;
}

/* CHANGE 3 — Image area stretch-link (valid HTML, no nested anchors) */
.property-card__image-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  /* Transparent — the image beneath is still fully visible */
}

.property-card__image-link:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: -3px;
}

/* CHANGE 4 — Alert signup violet variant */
.alert-signup--violet {
  background-color: #8059D8;
  background-image: linear-gradient(135deg, #9B77E8 0%, #6B3FC8 100%);
}

.alert-signup--violet .alert-signup__text {
  color: #fff;
}

.alert-signup--violet .alert-signup__text span {
  color: rgba(255, 255, 255, 0.72);
}

.alert-signup--violet .btn {
  background-color: #fff;
  color: #8059D8;
  border-color: #fff;
  font-weight: 700;
}

.alert-signup--violet .btn:hover {
  background-color: #f3eeff;
  color: #6B3FC8;
  border-color: #f3eeff;
  box-shadow: 0 4px 14px rgba(128, 89, 216, 0.25);
  transform: translateY(-1px);
}

/* CHANGE 4 — CTA block teal variant */
.cta-block--teal {
  background-color: #3BB69A;
  background-image: linear-gradient(135deg, #45CDB0 0%, #2A9E84 100%);
  padding: var(--space-16) var(--space-10);

}

.cta-block--teal .cta-block__headline,
.cta-block--teal .cta-block__sub {
  color: #fff;
}

/* WhatsApp button in teal context — white bg, teal text */
.cta-block--teal .btn--whatsapp {
  background-color: #fff;
  color: #3BB69A;
  border-color: #fff;
}

.cta-block--teal .btn--whatsapp:hover {
  background-color: #f0fdfb;
  color: #2A9E84;
  border-color: #f0fdfb;
  box-shadow: 0 4px 14px rgba(59, 182, 154, 0.30);
}

.cta-block--teal .btn--whatsapp::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233BB69A'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12c0 2.1.546 4.075 1.5 5.786L0 24l6.4-1.476A11.93 11.93 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.818 9.818 0 01-5.002-1.371l-.359-.213-3.8.876.902-3.713-.234-.381A9.818 9.818 0 012.182 12C2.182 6.578 6.578 2.182 12 2.182S21.818 6.578 21.818 12 17.422 21.818 12 21.818z'/%3E%3C/svg%3E");
}

.cta-block--teal .btn--secondary {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.cta-block--teal .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color: #fff;
}

/* CHANGE 5 — Viewing confidence banner */
.viewing-info-banner {
  background-color: rgba(59, 182, 154, 0.08);
  border-left: 4px solid #3BB69A;
  padding: 20px 0;
  margin-top: 2rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  border-radius: 8px;
}

.viewing-info-banner__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.viewing-info-banner__icon {
  width: 28px;
  height: 28px;
  color: #3BB69A;
  flex-shrink: 0;
  margin-top: 2px;
}

.viewing-info-banner__text {
  flex: 1;
}

.viewing-info-banner__headline {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--colour-body);
}

.viewing-info-banner__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--colour-muted);
  margin: 0;
}

@media (max-width: 639px) {
  .viewing-info-banner__inner {
    flex-direction: column;
    gap: 10px;
  }
}

/* CHANGE 4 — Recently let heading gap */
#recently-let-heading {
  margin-bottom: 2rem;
}


/* ============================================================
   SITE NAV — CONTACT STRIP
   ============================================================ */

.site-nav__contact {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  margin-right: 24px;
}

.site-nav__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #2AA917;
  font-weight: 600;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.site-nav__phone-number {
  display: inline;
}

.site-nav__whatsapp,
.site-nav__email {
  display: flex;
  align-items: center;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.site-nav__whatsapp:hover,
.site-nav__email:hover {
  opacity: 1;
}

.site-nav__icon {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
}

/* Mobile — hide phone number, keep all three icons */
@media (max-width: 768px) {
  .site-nav__contact {
    margin-right: 12px;
    gap: 14px;
  }

  .site-nav__phone-number {
    display: none;
  }

  .site-nav__icon {
    width: 28px;
    height: 28px;
  }
}


/* ============================================================
   POLICY PAGES (privacy.html, cookies.html)
   ============================================================ */

.policy-page {
  padding: var(--space-16) 0 var(--space-24);
  padding-top: 80px;
}

.policy-page h1 {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--colour-body);
  margin-bottom: var(--space-4);
}

.policy-page .policy-summary {
  background: var(--colour-bg-alt);
  border-left: 4px solid #2AA917;
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-10);
  font-size: var(--font-size-lg);
  color: var(--colour-muted);
  line-height: 1.7;
}

.policy-page h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: #2AA917;
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}

.policy-page h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #2AA917;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.policy-page p,
.policy-page li {
  font-size: var(--font-size-base);
  color: var(--colour-body);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}

.policy-page ul {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.policy-page a {
  color: #2AA917;
  text-decoration: underline;
}

.policy-page .policy-last-updated {
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  margin-bottom: var(--space-8);
}

.policy-page .cookies-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-sm);
}

.policy-page .cookies-table th {
  background: var(--colour-bg-alt);
  font-weight: 700;
  color: var(--colour-body);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--colour-border);
}

.policy-page .cookies-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  color: var(--colour-body);
  vertical-align: top;
  line-height: 1.6;
  margin-bottom: 0;
}

.policy-page .cookies-table tr:last-child td {
  border-bottom: none;
}

/* FIX 2 — Rental valuations: suppress excess whitespace below card stack on mobile */
@media (max-width: 767px) {
  .market-stack-spacer {
    height: 0 !important;
    display: none;
  }
  .market-stack-wrap {
    margin-bottom: 1.5rem;
  }
}

/* FIX 3 — HMO valuation: suppress excess whitespace below card stack on mobile */
@media (max-width: 767px) {
  .hmo-stack-spacer {
    height: 0 !important;
    display: none;
  }
  .hmo-stack-wrap {
    margin-bottom: 1.5rem;
  }
}


/* ============================================================
   TEAM PAGE
   ============================================================ */

/* Hero variant */
.hero--team .hero__bg {
  background-image: url('/images/hero-team.jpg');
}
.hero--team .hero__overlay {
  background-color: #2EA91D;
  opacity: 0.82;
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-block: var(--space-12);
}

/* Jay — full-width featured card */
.team-card--featured {
  grid-column: span 4;
  display: flex;
  flex-direction: row;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--colour-bg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.team-card--featured:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.team-card--featured .team-card__photo-wrap {
  width: 40%;
  flex-shrink: 0;
}

.team-card--featured .team-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.team-card--featured .team-card__body {
  flex: 1;
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-card--featured .team-card__name {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--colour-body);
  margin: 0 0 var(--space-2);
}

.team-card--featured .team-card__role {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #2AA917;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-4);
}

.team-card--featured .team-card__bio {
  font-size: var(--font-size-lg);
  color: var(--colour-muted);
  line-height: 1.7;
  margin: 0;
  max-width: 520px;
}

/* Standard cards — span 2 columns each */
.team-card {
  grid-column: span 2;
  display: flex;
  flex-direction: row;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--colour-bg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.team-card__photo-wrap {
  width: 45%;
  flex-shrink: 0;
  min-height: 240px;
}

.team-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 0;
}

.team-card__photo--placeholder {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: var(--colour-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card__body {
  flex: 1;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-card__name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--colour-body);
  margin: 0 0 var(--space-1);
}

.team-card__role {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #2AA917;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-3);
}

.team-card__bio {
  font-size: var(--font-size-sm);
  color: var(--colour-muted);
  line-height: 1.6;
  margin: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-card--featured {
    grid-column: span 2;
  }
  .team-card {
    grid-column: span 2;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
  .team-card--featured,
  .team-card {
    grid-column: span 1;
    flex-direction: column;
  }
  .team-card--featured .team-card__photo-wrap,
  .team-card__photo-wrap {
    width: 100%;
    height: 260px;
  }
  .team-card--featured .team-card__body {
    padding: var(--space-6);
  }
  .team-card--featured .team-card__name {
    font-size: var(--font-size-2xl);
  }
}


/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* Hero variant */
.hero--contact .hero__bg {
  background-image: url('/images/hero-letting-management.jpg');
}
.hero--contact .hero__overlay {
  background-color: #1B2B26;
  opacity: 0.82;
}

/* Contact layout */
.contact-section {
  padding-block: var(--space-16);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.contact-detail__icon {
  font-size: 22px;
  color: #2AA917;
  flex-shrink: 0;
  margin-top: 2px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-detail__text {
  flex: 1;
}
.contact-detail__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colour-muted);
  margin-bottom: var(--space-1);
}
.contact-detail__value {
  font-size: var(--font-size-base);
  color: var(--colour-body);
  line-height: 1.5;
}
.contact-detail__value a {
  color: var(--colour-body);
  text-decoration: none;
}
.contact-detail__value a:hover {
  color: #2AA917;
}
.contact-book-card {
  background: #1B2B26;
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  color: #fff;
}
.contact-book-card__headline {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-3);
}
.contact-book-card__sub {
  font-size: var(--font-size-base);
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}
@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   CTA BLOCK — TEAM PAGE VARIANT
   ============================================================ */

.cta-block--team {
  background: linear-gradient(135deg, #1B2B26 0%, #0d1f1a 100%);
  border: 1px solid #2EA91D;
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  margin-block: var(--space-6);
}

.cta-block--team .cta-block__headline {
  color: #fff;
}

.cta-block--team .cta-block__sub {
  color: rgba(255, 255, 255, 0.72);
}

.cta-block--team .btn {
  background-color: #2EA91D;
  color: #fff;
  border-color: #2EA91D;
}

.cta-block--team .btn:hover {
  background-color: #279218;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(46, 169, 29, 0.35);
  transform: translateY(-1px);
}

/* ============================================================
   ARTICLE AUTHOR BOX
   ============================================================ */

.article-author-box {
  margin: 1.5rem 0 2rem;
}

.article-author-box__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--colour-muted);
  margin-bottom: 0.75rem;
}

.article-author-box__card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--colour-bg);
  border: 1.5px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}

.article-author-box__photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.article-author-box__initials {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--colour-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.article-author-box__body {
  flex: 1;
  min-width: 0;
}

.article-author-box__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--colour-body);
  margin: 0 0 0.25rem;
}

.article-author-box__bio {
  font-size: 0.875rem;
  color: var(--colour-muted);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.article-author-box__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.article-author-box__social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--colour-muted);
  text-decoration: none;
  padding: 0.3rem 0.75rem;
  border: 1.5px solid var(--colour-border);
  border-radius: var(--radius-full);
  background: var(--colour-bg-alt);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.article-author-box__social-btn:hover {
  border-color: var(--colour-primary);
  color: var(--colour-primary);
  text-decoration: none;
}

.article-author-box__social-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .article-author-box__card {
    gap: 1rem;
    padding: 1rem;
  }
  .article-author-box__photo,
  .article-author-box__initials {
    width: 52px;
    height: 52px;
    font-size: 1rem;
  }
}

/* ============================================================
   ARTICLE SHARE BAR
   ============================================================ */

.article-share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--colour-border);
  margin-top: var(--space-8);
}

.article-share__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--colour-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: var(--space-2);
  flex-shrink: 0;
}

.article-share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.article-share__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.article-share__btn--whatsapp {
  background: #25D366;
  color: #ffffff;
}

.article-share__btn--whatsapp:hover {
  background: #1DAA55;
  color: #ffffff;
}

.article-share__btn--email {
  background: var(--colour-primary);
  color: #ffffff;
}

.article-share__btn--email:hover {
  background: var(--colour-primary-light);
  color: #ffffff;
}

.article-share__btn--x {
  background: #000000;
  color: #ffffff;
}

.article-share__btn--x:hover {
  background: #333333;
  color: #ffffff;
}

.article-share__btn--facebook {
  background: #1877F2;
  color: #ffffff;
}

.article-share__btn--facebook:hover {
  background: #0C63D4;
  color: #ffffff;
}

@media (max-width: 480px) {
  .article-share {
    gap: var(--space-2);
  }
  .article-share__btn {
    padding: 0.4rem 0.75rem;
    font-size: var(--font-size-xs);
  }
}