/* =========================================================================
   Auction Link - Global styles
   Mobile-first. Single global stylesheet. Human-readable, no minification.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Colour palette */
  --c-blue: #004073;
  --c-blue-dark: #002c52;
  --c-white: #ffffff;
  --c-bg-light: #f5f5f7;
  --c-border: #e8e8ec;
  --c-text-muted: #6b6b7b;
  --c-text: #333333;
  --c-cta: #03bc13;
  --c-cta-hover: #029e10;
  --c-black: #000000;
  --c-warning-bg: #fff7e6;
  --c-warning-border: #f0c14b;

  /* Spacing scale (rem) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-title: 'Lato', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (1.25 ratio, mobile) */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1.0625rem; /* 17px */
  --fs-md: 1.25rem;
  --fs-lg: 1.563rem;
  --fs-xl: 1.953rem;
  --fs-2xl: 2.441rem;
  --fs-3xl: 3.052rem;

  /* Radii */
  --radius-btn: 8px;
  --radius-card-sm: 12px;
  --radius-card-lg: 16px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* Layout */
  --container-max: 75rem; /* 1200px */
  --container-padding: 1.25rem;
  --header-height: 4rem;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--c-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--c-blue-dark);
  text-decoration: underline;
}

a[href^="tel:"] {
  white-space: nowrap;
}

/* Inline body links (paragraphs and list items within the main content, which
   sit on a white background): a brighter blue, slightly bolder, so they stand
   out. Header, footer, breadcrumb, buttons, cards and coloured CTA boxes keep
   their own styles - they aren't p/li links or they carry their own colour. */
main p a:not(.btn),
main li a:not(.btn),
.article-tip a:not(.btn),
.callout a:not(.btn) {
  color: #005da5;
  font-weight: 500;
}

/* Inline reference links are plain <a> (semi-bold). The only body links still
   wrapped in <strong> are deliberate CTAs (request an estimate / send enquiry)
   and phone numbers - render those bold so they stand out from reference links. */
main p a:not(.btn) strong,
main li a:not(.btn) strong,
.article-tip a:not(.btn) strong,
.callout a:not(.btn) strong {
  font-weight: 700;
}

/* Conversely, a link nested inside <strong> (a bold lead-in that's also a link)
   should keep the bold weight rather than drop to the link weight. */
main p strong a:not(.btn),
main li strong a:not(.btn),
.article-tip strong a:not(.btn),
.callout strong a:not(.btn) {
  font-weight: inherit;
}

main p a:not(.btn):hover,
main p a:not(.btn):focus-visible,
main li a:not(.btn):hover,
main li a:not(.btn):focus-visible,
.article-tip a:not(.btn):hover,
.article-tip a:not(.btn):focus-visible,
.callout a:not(.btn):hover,
.callout a:not(.btn):focus-visible {
  color: var(--c-blue);
  text-decoration: underline;
}

ul,
ol {
  padding-left: 1.25rem;
}

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

/* Visible focus for keyboard navigation */
:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-text);
  margin: 0 0 var(--space-4);
}

h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
}

h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); font-weight: 600; }
h4 { font-size: var(--fs-md); font-weight: 600; }

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

.lead {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  line-height: 1.55;
}

/* Multi-column link list (e.g. a directory of auctioneers). Falls back to a
   single column on narrow screens. */
.article-content ul.link-columns {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0;
  columns: 2;
  column-gap: var(--space-8);
}
.article-content ul.link-columns li {
  margin: 0 0 var(--space-3);
  break-inside: avoid;
}
@media (min-width: 700px) {
  .article-content ul.link-columns { columns: 3; }
}

/* Customer review cards (the reviews page). */
.reviews-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-7) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr 1fr; }
}
.review-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.review-card__stars {
  color: #f5a623;
  font-size: var(--fs-md);
  letter-spacing: 3px;
  line-height: 1;
}
.review-card__quote {
  margin: 0;
  line-height: 1.6;
  color: var(--c-text);
}
.review-card__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-blue);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--space-3);
}

/* -------------------------------------------------------------------------
   4. Layout helpers
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: 3rem 0;
}

.section--tight {
  padding: var(--space-7) 0;
}

.section--bg {
  background: var(--c-bg-light);
}

.section-head {
  max-width: 44rem;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.section-head h2 {
  margin-bottom: var(--space-3);
}

.section-head p {
  color: var(--c-text-muted);
  font-size: var(--fs-md);
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--c-blue);
  color: var(--c-white);
  z-index: 1000;
  font-weight: 600;
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn--cta {
  background: var(--c-cta);
  color: var(--c-white);
  box-shadow: var(--shadow-soft);
}

.btn--cta:hover {
  background: var(--c-cta-hover);
  color: var(--c-white);
  box-shadow: var(--shadow-md);
}

.btn--primary {
  background: var(--c-blue);
  color: var(--c-white);
}

.btn--primary:hover {
  background: var(--c-blue-dark);
  color: var(--c-white);
}

.btn--ghost {
  background: transparent;
  color: var(--c-blue);
  border: 2px solid var(--c-blue);
}

.btn--ghost:hover {
  background: var(--c-blue);
  color: var(--c-white);
}

.btn--lg {
  padding: 1.125rem 2rem;
  font-size: var(--fs-md);
}

/* -------------------------------------------------------------------------
   6. Header / navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body {
  padding-top: var(--header-height);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  align-self: center;
  height: 100%;
  flex-shrink: 0;
}

.brand img {
  height: 3rem;
  width: auto;
  display: block;
}

.primary-nav {
  display: none;
}

.primary-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-5);
}

.primary-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-text);
  padding: var(--space-2) 0;
}

.primary-nav a:hover {
  color: var(--c-blue);
  text-decoration: none;
}

.header-cta {
  display: flex;
  align-items: center;
  align-self: center;
  gap: var(--space-3);
}

.header-phone {
  display: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--c-blue);
  margin-right: var(--space-3);
}

.header-phone:hover {
  text-decoration: none;
  color: var(--c-blue-dark);
}

/* Hamburger button (mobile) */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
}

.hamburger span {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--c-text);
  margin: 0 auto;
  transition: transform var(--transition-base), opacity var(--transition-fast);
  transform-origin: center;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--container-padding) var(--space-6);
}

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

.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.mobile-nav li + li {
  border-top: 1px solid var(--c-border);
}

.mobile-nav a {
  display: block;
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-text);
}

.mobile-nav .mobile-phone {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: var(--c-blue);
}

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */
.hero {
  background: var(--c-white);
  padding: var(--space-7) 0 var(--space-8);
}

.hero-image {
  position: relative;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

.hero-stat {
  position: absolute;
  background: var(--c-white);
  border-radius: var(--radius-card-sm);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.14);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 2;
}

.hero-stat--1 {
  bottom: -1rem;
  left: -1rem;
}

.hero-stat--2 {
  top: -1rem;
  right: -1rem;
}

/* Page-specific (benefits page): on mobile only, push the stat cards further
   off the image so the top card stops obscuring the subject's face. */
@media (max-width: 47.999rem) {
  .hero-image--stats-spaced .hero-stat--1 {
    bottom: -2.25rem;
  }

  .hero-image--stats-spaced .hero-stat--2 {
    top: -2.25rem;
  }
}

/* Page-specific (sell-your-home-before-auction-day): on all devices, spread the
   stat cards further apart (top card higher, bottom card lower) to reveal more
   of the hero photo. */
.hero-image--stats-spread .hero-stat--1 {
  bottom: -2.75rem;
}

.hero-image--stats-spread .hero-stat--2 {
  top: -2.75rem;
}

/* Page-specific (contact): the auctioneer's head sits high in the frame, so
   spread the cards a little wider than the standard stats-spread to keep the
   top card clear of his head. Even offset top and bottom. */
.hero-image--stats-spread-wide .hero-stat--1 {
  bottom: -4.25rem;
}

.hero-image--stats-spread-wide .hero-stat--2 {
  top: -4.25rem;
}

/* Page-specific (selling-a-flat-with-a-defective-lease): on mobile the hero
   stacks (text above image) and the spread stat cards poke out top and bottom,
   crowding the trust callout above and the section below. Add extra vertical
   margin around the image on mobile so both cards have breathing room. */
@media (max-width: 47.999rem) {
  .hero-image--gap-mobile {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
  }
}

.stat-number {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-blue);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.hero h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-4);
  color: var(--c-black);
}

.hero h1 .accent {
  color: var(--c-blue);
}

.hero-lead {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
  margin-bottom: var(--space-5);
}

.hero-pillars {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
  display: grid;
  gap: var(--space-3);
}

.hero-pillars li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-weight: 500;
}

.hero-pillars .pill-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-cta);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-bg-light);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.hero-trust strong {
  color: var(--c-text);
  font-weight: 500;
}

.hero-visual {
  position: relative;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, rgba(0, 64, 115, 0.85), rgba(0, 64, 115, 0.55)),
    linear-gradient(180deg, #6b8caa 0%, #b8c8d6 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
}

.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-visual-caption {
  position: relative;
  z-index: 1;
  color: var(--c-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  background: rgba(0, 0, 0, 0.35);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn);
  backdrop-filter: blur(6px);
}

/* -------------------------------------------------------------------------
   8. How it works (numbered steps)
   ------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--space-5);
}

.step {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-lg);
  padding: var(--space-6);
  position: relative;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.step:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: var(--space-4);
}

.step h3 {
  margin-bottom: var(--space-2);
}

.step p {
  color: var(--c-text-muted);
  margin: 0;
}

/* -------------------------------------------------------------------------
   9. Why auction (feature cards)
   ------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  gap: var(--space-5);
}

.feature {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-lg);
  padding: var(--space-6);
}

.feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-card-sm);
  background: rgba(0, 64, 115, 0.08);
  color: var(--c-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.feature-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.feature h3 {
  margin-bottom: var(--space-2);
}

.feature p {
  color: var(--c-text-muted);
  margin: 0;
}

/* -------------------------------------------------------------------------
   10. Plan A / Plan B 2-up split
   ------------------------------------------------------------------------- */
.plans {
  display: grid;
  gap: var(--space-5);
}

.plan {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-lg);
  padding: var(--space-6);
}

.plan-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}

.plan--a .plan-tag {
  background: rgba(3, 188, 19, 0.12);
  color: #1e7d28;
}

.plan--b .plan-tag {
  background: rgba(0, 64, 115, 0.1);
  color: var(--c-blue);
}

.plan h3 {
  margin-bottom: var(--space-3);
}

.plan ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--c-text-muted);
}

.plan li + li {
  margin-top: var(--space-2);
}

/* -------------------------------------------------------------------------
   11. Callout (unconditional vs conditional)
   ------------------------------------------------------------------------- */
.callout {
  background: var(--c-warning-bg);
  border-radius: var(--radius-card-sm);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-7) 0;
  display: grid;
  gap: var(--space-4);
}

/* -------------------------------------------------------------------------
   Glossary (A-Z jump nav + description list)
   ------------------------------------------------------------------------- */
.glossary-az {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--c-bg-light);
  border-radius: var(--radius-card-sm);
}
.glossary-az strong {
  display: block;
  font-family: var(--font-heading);
  margin-bottom: var(--space-3);
}
.article-content .glossary-az ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.article-content .glossary-az li,
.article-content .glossary-az li + li { margin: 0; }
.glossary-az a,
.glossary-az span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
}
.glossary-az a,
.article-content .glossary-az a {
  background: var(--c-blue);
  color: var(--c-white);
}
/* Override the site body-link rule (main li a, 0,1,3) which would otherwise
   recolour these chips blue-on-blue and underline them on hover. */
.article-content .glossary-az a:hover,
.article-content .glossary-az a:focus {
  background: var(--c-blue-dark);
  color: var(--c-white);
  text-decoration: none;
}
.glossary-az span {
  color: var(--c-text-muted);
  background: transparent;
  opacity: 0.5;
}

.article-content dl.glossary { margin: 0 0 var(--space-6); }
.article-content dl.glossary dt {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-blue);
  font-size: 1.125rem;
  margin-top: var(--space-5);
  scroll-margin-top: 90px;
}
.article-content dl.glossary dd { margin: var(--space-2) 0 0; }
.article-content dl.glossary dd p { margin: 0 0 var(--space-3); }
.article-content dl.glossary dd p:last-child { margin-bottom: 0; }
.article-content h2[id^="letter-"] { scroll-margin-top: 90px; }

/* Light-grey variant of the callout (same layout, neutral background) */
.callout--grey,
.article-content .callout--grey {
  background: var(--c-bg-light);
}

/* Fee breakdown box (worked cost examples): label on the left, amount on the
   right, with an emphasised total row. */
.fee-example {
  background: var(--c-bg-light);
  border-radius: var(--radius-card-sm);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
}

.article-content .fee-example__intro {
  margin: 0 0 var(--space-3);
}

.fee-example dl {
  margin: 0;
}

.fee-example__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-border);
}

.fee-example__row:first-of-type {
  border-top: 1px solid var(--c-border);
}

.fee-example__row dt {
  margin: 0;
}

.fee-example__row dd {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

.fee-example__row--total {
  border-bottom: none;
  padding-top: var(--space-4);
  color: var(--c-blue);
  font-size: var(--fs-md);
}

.fee-example__row--total dt {
  font-weight: 700;
}

.fee-example__row--total dd {
  font-weight: 800;
}

.article-content .fee-example__note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* Tick list: green check bullets for short benefit lists in body content. */
.article-content ul.tick-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: grid;
  gap: var(--space-2);
}

.article-content ul.tick-list li {
  position: relative;
  padding-left: 1.9rem;
}

.article-content ul.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.2em;
  height: 1.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303bc13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.callout h2,
.callout h3,
.callout h4,
.article-content .callout h2,
.article-content .callout h3,
.article-content .callout h4 {
  margin: 0;
}

.callout p,
.article-content .callout p {
  margin: 0;
}

/* On desktop, let the callout background overspill the body-text column
   while the text itself stays aligned with the surrounding body copy. */
@media (min-width: 48rem) {
  .callout,
  .article-content .callout {
    margin-left: calc(-1 * var(--space-6));
    margin-right: calc(-1 * var(--space-6));
  }
}

.callout-list,
.article-content .callout-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.callout-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.callout-tick,
.callout-cross {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
}

.callout-tick { color: #1e7d28; }
.callout-cross { color: #c0392b; }

.h-callout {
  display: inline-block;
  padding: 0.4em 0.7em;
  background-color: var(--c-blue);
  color: var(--c-white);
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   12. Costs section
   ------------------------------------------------------------------------- */
.costs {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.costs-card {
  background: var(--c-blue);
  color: var(--c-white);
  padding: var(--space-7);
  border-radius: var(--radius-card-lg);
}

.costs-card h2 {
  color: var(--c-white);
  margin-bottom: var(--space-4);
}

.costs-card p {
  color: rgba(255, 255, 255, 0.85);
}

.costs-card .btn--cta {
  margin-top: var(--space-3);
}

.costs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}

.costs-list li {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-sm);
  padding: var(--space-4) var(--space-5);
}

.costs-list strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  color: var(--c-text);
  margin-bottom: var(--space-1);
}

.costs-list span {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* -------------------------------------------------------------------------
   13. Property types grid
   ------------------------------------------------------------------------- */
.types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.type-tile {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-sm);
  color: var(--c-text);
  font-family: var(--font-heading);
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.type-tile:hover {
  border-color: var(--c-blue);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
  color: var(--c-blue);
  text-decoration: none;
}

.type-tile__image {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background: var(--c-bg-light);
}

.type-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.type-tile:hover .type-tile__image img {
  transform: scale(1.04);
}

.type-tile__label {
  padding: var(--space-3) var(--space-4) var(--space-4);
  font-size: var(--fs-sm);
  background: var(--c-white);
  color: var(--c-blue);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.type-tile:hover .type-tile__label,
.type-tile:focus-visible .type-tile__label {
  background: var(--c-blue);
  color: var(--c-white);
}

.types-footer {
  text-align: center;
  margin-top: var(--space-6);
}

/* -------------------------------------------------------------------------
   13b. Resource cards (related article cards with image + description)
   ------------------------------------------------------------------------- */
.resource-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

.resource-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-sm);
  overflow: hidden;
  color: var(--c-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

a.resource-card:hover {
  border-color: var(--c-blue);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
  text-decoration: none;
}

.resource-card__image {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--c-bg-light);
}

.resource-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

a.resource-card:hover .resource-card__image img {
  transform: scale(1.04);
}

.resource-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.article-content .resource-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.3;
  color: var(--c-blue);
}

.resource-card__body p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

@media (max-width: 47.999rem) {
  .resource-cards {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   14. FAQ accordion
   ------------------------------------------------------------------------- */
.faq {
  max-width: 48rem;
  margin: 0 auto var(--space-6);
}

.faq-item {
  border-bottom: 1px solid var(--c-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--c-border);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--c-text);
  text-align: left;
}

.faq-question:hover {
  color: var(--c-blue);
}

.faq-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-blue);
  transition: transform var(--transition-base);
}

.faq-item[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}

.faq-item[aria-expanded="true"] .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer p {
  padding-bottom: var(--space-5);
  color: var(--c-text);
  margin: 0;
}

/* FAQ accordion nested inside .article-content: stop the article paragraph/list
   rules from doubling the spacing and darkening the bullet text. */
.article-content .faq-answer p,
.article-content .faq-answer ul,
.article-content .faq-answer ol {
  padding-bottom: 0;
  margin: 0 0 var(--space-3);
  color: var(--c-text);
}

/* Bottom element keeps a gap before the divider line; this sits inside the
   overflow-hidden inner, so it's still clipped to zero when the item is closed
   (padding on .faq-answer-inner itself would stop it collapsing). */
.article-content .faq-answer p:last-child,
.article-content .faq-answer ul:last-child,
.article-content .faq-answer ol:last-child {
  margin-bottom: var(--space-5);
}

.article-content .faq-answer li {
  color: var(--c-text);
}

.article-content .faq-answer li + li {
  margin-top: var(--space-1);
}

/* -------------------------------------------------------------------------
   15. CTA banner
   ------------------------------------------------------------------------- */
.cta-banner {
  background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-dark) 100%);
  color: var(--c-white);
  padding: var(--space-8) 0;
  text-align: center;
}

.cta-banner h2 {
  color: var(--c-white);
  max-width: 36rem;
  margin: 0 auto var(--space-3);
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 36rem;
  margin: 0 auto var(--space-5);
  font-size: var(--fs-md);
}

.cta-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.cta-banner-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
}

.cta-banner-phone:hover {
  color: var(--c-white);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   16. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-black);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-8) 0 var(--space-5);
  font-size: var(--fs-sm);
}

.footer-top {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.footer-brand-link {
  display: inline-block;
  line-height: 0;
}

.footer-brand img {
  height: 2.5rem;
  width: auto;
  margin-bottom: var(--space-4);
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 22rem;
}

.footer-col h4 {
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.footer-col a {
  color: rgba(255, 255, 255, 0.75);
}

.footer-col a:hover {
  color: var(--c-white);
}

.footer-contact a {
  color: var(--c-white);
  font-weight: 600;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-legal span,
.footer-legal a {
  color: rgba(255, 255, 255, 0.6);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-white);
}

.footer-social a:hover {
  background: var(--c-blue);
  color: var(--c-white);
}

.footer-social svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* -------------------------------------------------------------------------
   17. Scroll reveal
   ------------------------------------------------------------------------- */
.sr-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}

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

/* -------------------------------------------------------------------------
   17b. Intro strip (the band under the hero)
   ------------------------------------------------------------------------- */
.intro-strip {
  background: var(--c-bg-light);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.intro-strip-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}

.intro-strip p { margin: 0; }

.intro-ticks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.intro-ticks li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
}

.intro-ticks .tick-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--c-cta);
}

.intro-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-blue);
  font-size: var(--fs-md);
}

.intro-phone:hover { color: var(--c-blue-dark); text-decoration: none; }

.intro-update {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
}

/* -------------------------------------------------------------------------
   17c. Split row (image + text, alternating)
   ------------------------------------------------------------------------- */
.split-row {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.split-row__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card-lg);
}

.split-row__content h2,
.simple-row h2 { margin-bottom: var(--space-4); }

.section-label {
  display: inline-block;
  background-color: #d3e3fd;
  color: var(--c-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  padding: 0.4em 0.6em;
  border-radius: 6px;
  margin-bottom: var(--space-3);
}

/* Numbered eyebrow pill for stepped article sections (e.g. "Mistake 1"
   above each H2). The pill carries the section's top spacing and the
   following heading sits directly beneath it. */
.eyebrow-label {
  display: inline-block;
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  padding: 0.3rem 0.9rem;
  background: #e8ebf4;
  color: var(--c-blue);
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
}

.eyebrow-label + h2,
.article-content .eyebrow-label + h2 {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   Checklist infographic card (e.g. "The 5 Un's of a True Property Auction").
   A modern, crisp HTML/CSS recreation of a summary graphic - responsive and
   selectable, with brand colours and the page font.
   ------------------------------------------------------------------------- */
.uns-card {
  max-width: 36rem;
  margin: var(--space-6) auto;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.uns-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--c-blue);
  color: var(--c-white);
}

.uns-card__head-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.uns-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  line-height: 1.15;
  color: var(--c-white);
  position: relative;
  top: 6px;
}

.uns-card__sub {
  margin: 0.2rem 0 0;
  font-size: var(--fs-sm);
  opacity: 0.85;
}

.uns-card__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-5) var(--space-3);
}

.uns-card__list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--c-border);
}

.uns-card__list li:last-child {
  border-bottom: 0;
}

.uns-card__tick {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.05rem;
}

.uns-card__list strong {
  color: var(--c-blue);
  font-family: var(--font-heading);
}

.split-row__content .read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-blue);
  margin-top: var(--space-3);
}

.split-row__content .read-more::after {
  content: "→";
  transition: transform var(--transition-fast);
}

.split-row__content .read-more:hover::after {
  transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   17d. Simple section (heading + text + CTA, no image)
   ------------------------------------------------------------------------- */
.simple-row {
  max-width: 50rem;
  margin: 0 auto;
}

.simple-row h2 { margin-bottom: var(--space-4); }

.simple-row .read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-blue);
  margin-top: var(--space-2);
}

.simple-row .read-more::after { content: "→"; transition: transform var(--transition-fast); }
.simple-row .read-more:hover::after { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   17e. Compact CTA panel (Contact / Request an estimate sections)
   ------------------------------------------------------------------------- */
.cta-panel {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-lg);
  padding: var(--space-6);
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
}

.cta-panel h2 { margin-bottom: var(--space-3); }

.cta-panel p { color: var(--c-text-muted); margin-bottom: var(--space-5); }

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

/* -------------------------------------------------------------------------
   17f. Breadcrumb
   ------------------------------------------------------------------------- */
.breadcrumb {
  padding: var(--space-4) 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-border);
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--space-2);
  color: var(--c-text-muted);
}

.breadcrumb a { color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-blue); }

/* -------------------------------------------------------------------------
   17g. Article + sidebar layout
   ------------------------------------------------------------------------- */
.page-layout {
  display: grid;
  gap: var(--space-7);
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
}

.article-content {
  min-width: 0;
}

/* Single-column legal pages (privacy, terms, cookie policy) - a readable,
   centred text column with no marketing sidebar. */
.legal-article {
  max-width: 52rem;
  margin: 0;
  padding: var(--space-4) 0 var(--space-8);
}

/* Long URLs (e.g. cookie policy links) must wrap rather than force overflow on
   narrow screens. */
.legal-article a {
  overflow-wrap: anywhere;
}

.legal-article .legal-section-heading {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-border);
}

.article-content h1 {
  margin-bottom: var(--space-3);
}

.article-meta {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-6);
}

/* Small print / footnote line (e.g. an asterisked clarification) */
.article-content .footnote {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.article-content h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.article-content h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.article-content p,
.article-content ul,
.article-content ol {
  margin-bottom: var(--space-4);
}

.article-content ul,
.article-content ol {
  padding-left: 1.25rem;
}

.article-content li + li {
  margin-top: var(--space-2);
}

.article-content figure {
  margin: var(--space-5) 0;
}

.article-content figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card-sm);
}

.article-content figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-align: center;
}

/* Blue caption bar attached directly under the image */
.article-content .figure--legal img {
  border-radius: var(--radius-card-sm) var(--radius-card-sm) 0 0;
}

.article-content .figure--legal figcaption {
  margin-top: 0;
  background: var(--c-blue);
  color: var(--c-white);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: center;
  border-radius: 0 0 var(--radius-card-sm) var(--radius-card-sm);
}

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

.article-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-card-sm);
  background: var(--c-black);
}

.figure--medium {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* Line break that only applies on wider desktop (where the column is wide
   enough for a clean two-line result; narrower widths wrap naturally) */
.br-desktop {
  display: none;
}

@media (min-width: 58rem) {
  .br-desktop {
    display: inline;
  }
}

.figure--wide {
  max-width: 300px;
  margin: var(--space-7) 0;
}

.figure--wide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card-sm);
}

.figure--wide a {
  display: block;
  border-radius: var(--radius-card-sm);
  overflow: hidden;
  transition: transform 0.22s ease;
}

.figure--wide a:hover,
.figure--wide a:focus-visible {
  transform: translateY(-2px);
}

/* Photo grid - responsive gallery of a property's own listing photos.
   Mixed orientations are normalised with a fixed aspect cell + cover. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

@media (min-width: 600px) {
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

.photo-grid img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card-sm);
}

/* Entry divider - thin rule separating stacked listing blocks (image + details)
   so it is clear which image belongs to which property. */
.article-content hr.entry-divider {
  border: 0;
  height: 1px;
  background: var(--c-border, #e2e8f0);
  margin: var(--space-6) 0;
}

.article-compare {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.article-compare img {
  width: 100%;
  border-radius: var(--radius-card-sm);
}

.article-tip {
  background: var(--c-warning-bg);
  border-left: 4px solid var(--c-warning-border);
  border-radius: 0 var(--radius-card-sm) var(--radius-card-sm) 0;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}

.article-key-fact {
  background: #f0f6fb;
  border-left: 4px solid var(--c-blue);
  border-radius: 0 var(--radius-card-sm) var(--radius-card-sm) 0;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  text-align: center;
  font-size: var(--fs-md);
  line-height: 1.55;
}

.article-key-fact p {
  margin: 0;
}

.article-content blockquote {
  position: relative;
  margin: var(--space-8) 0;
  padding: var(--space-2) var(--space-6) 0 0;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--c-text);
}

.article-content blockquote::before {
  content: "\201C";
  position: absolute;
  top: -1.5rem;
  right: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-cta);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.article-content blockquote.quote--raised::before {
  top: -2.5rem;
}

/* Variant without the decorative quote mark. */
.article-content blockquote.quote--no-mark::before {
  content: none;
}

/* Variant with a leading green tick badge (added-benefits cue) beside the text. */
.article-content blockquote.quote--tick {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-7) 0;
  padding: 0;
}

.article-content blockquote.quote--tick::before {
  content: "";
  position: static;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: inline-block;
  border-radius: 50%;
  opacity: 1;
  background-color: rgba(3, 188, 19, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303bc13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.4rem 1.4rem;
}

.article-content blockquote p {
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Mock-up of a misleading search advert (Google / Bing style). The headline is
   sharp; the surrounding ad chrome is blurred to imply it's an illustrative example. */
.ad-mock {
  max-width: 540px;
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-sm);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  font-family: Arial, 'Helvetica Neue', system-ui, sans-serif;
}

.article-content .ad-mock__top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  color: #006621;
}

.ad-mock__label {
  font-weight: 700;
  color: #202124;
}

.article-content .ad-mock__headline {
  margin: 0 0 0.3rem;
  font-family: Arial, 'Helvetica Neue', system-ui, sans-serif;
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 500;
  color: #1a0dab;
}

.article-content .ad-mock__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #4d5156;
}

.ad-mock__blur {
  filter: blur(3.5px);
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

.article-cta {
  background: #004073;
  color: var(--c-white);
  border-radius: var(--radius-card-lg);
  padding: var(--space-5) var(--space-5);
  margin: var(--space-6) 0;
  display: grid;
  gap: var(--space-3);
}

.article-cta h2,
.article-cta h3 {
  color: var(--c-white);
  margin: 0;
  font-size: var(--fs-lg);
}

.article-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-base);
}

.article-cta .btn {
  justify-self: start;
}

.risk-badge {
  display: inline-block;
  background: #ff751f;
  color: var(--c-white);
  font-weight: 700;
  line-height: 1;
  padding: 0.3em 0.5em 0.22em;
  border-radius: 4px;
}

.tip-badge {
  display: inline-block;
  background: var(--c-cta);
  color: var(--c-white);
  font-weight: 700;
  line-height: 1;
  padding: 0.3em 0.5em 0.22em;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Stage graphic (7 stage icon strip)
   ------------------------------------------------------------------------- */
.stage-graphic {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) var(--space-4);
  margin: var(--space-6) 0;
}

.stage-graphic__item {
  flex: 0 0 calc(50% - var(--space-4) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-card-sm);
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

a.stage-graphic__item:hover {
  background: var(--c-bg-light);
  transform: translateY(-2px);
}

a.stage-graphic__item:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

.stage-graphic__icon {
  display: inline-flex;
  color: var(--c-blue);
}

.stage-graphic__icon svg {
  width: auto;
  height: 3.5rem;
}

.article-content .stage-graphic__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--c-text);
}

.stage-graphic__num {
  color: var(--c-blue);
  font-weight: 700;
}

@media (min-width: 48rem) {
  .stage-graphic {
    gap: var(--space-6) var(--space-3);
  }

  .stage-graphic__item {
    flex-basis: calc(25% - 3 * var(--space-3) / 4);
  }

  .stage-graphic__icon svg {
    height: 4.5rem;
  }

  .article-content .stage-graphic__label {
    font-size: var(--fs-base);
  }
}

/* -------------------------------------------------------------------------
   Stage guide: accordion on mobile, tabs on desktop
   ------------------------------------------------------------------------- */
.stage-tabs {
  margin: var(--space-6) 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  background: var(--c-white);
}

.stage-tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  cursor: pointer;
  padding: var(--space-4);
  border: 0;
  border-top: 1px solid var(--c-border);
  background: var(--c-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.3;
  text-align: left;
  color: var(--c-blue);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.stage-tabs__tab:first-child {
  border-top: 0;
}

.stage-tabs__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
}

.stage-tabs__label {
  flex: 1 1 auto;
}

.stage-tabs__chevron {
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.stage-tabs__tab:hover {
  background: var(--c-bg-light);
}

.stage-tabs__tab[aria-expanded="true"] {
  background: var(--c-blue);
  color: var(--c-white);
}

.stage-tabs__tab[aria-expanded="true"] .stage-tabs__num {
  background: var(--c-white);
  color: var(--c-blue);
}

.stage-tabs__tab[aria-expanded="true"] .stage-tabs__chevron {
  transform: rotate(180deg);
}

.stage-tabs__tab:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: -2px;
}

.stage-tabs__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.stage-tabs__panel.is-open {
  grid-template-rows: 1fr;
}

.stage-tabs__panel-inner {
  overflow: hidden;
}

.article-content .stage-tabs__panel-inner > * {
  margin: 0;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.article-content .stage-tabs__panel-inner > :first-child {
  padding-top: var(--space-5);
}

.article-content .stage-tabs__panel-inner > :last-child {
  padding-bottom: var(--space-5);
}

.article-content .stage-tabs__panel-inner p + p {
  margin-top: var(--space-4);
}

.article-content .stage-tabs__more {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-blue);
  text-decoration: none;
}

.article-content .stage-tabs__more::after {
  content: " \2192";
  white-space: nowrap;
}

.article-content .stage-tabs__more:hover {
  text-decoration: underline;
}

/* Desktop: render as a tab strip */
@media (min-width: 48rem) {
  .stage-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .stage-tabs__tab {
    order: 1;
    width: auto;
    flex: 1 1 auto;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--c-bg-light);
  }

  .stage-tabs__tab .stage-tabs__chevron {
    display: none;
  }

  .stage-tabs__tab:hover {
    background: var(--c-white);
    border-color: var(--c-border);
  }

  .stage-tabs__tab[aria-expanded="true"] {
    background: var(--c-blue);
    border-color: var(--c-blue);
  }

  .stage-tabs__panel {
    order: 2;
    flex: 0 0 100%;
  }

  .stage-tabs__panel:not(.is-open) {
    display: none;
  }

  .article-content .stage-tabs__panel-inner p:first-child {
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-tabs__tab,
  .stage-tabs__chevron,
  .stage-tabs__panel,
  .stage-graphic__item {
    transition: none;
  }

  a.stage-graphic__item:hover {
    transform: none;
  }
}

.explore-cards {
  padding: var(--space-7) 0 var(--space-6);
  background: var(--c-white);
}

.explore-cards__heading {
  text-align: center;
  margin: 0 0 var(--space-5);
  color: var(--c-blue);
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
}

.explore-cards__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.explore-cards__grid > li {
  margin: 0;
}

.explore-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-card-sm);
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.explore-card:hover,
.explore-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 64, 115, 0.12);
  border-color: var(--c-blue);
}

.explore-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-bg-light);
}

.explore-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.explore-card:hover .explore-card__media img,
.explore-card:focus-visible .explore-card__media img {
  transform: scale(1.04);
}

.explore-card__label {
  display: block;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-family: var(--ff-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: var(--fs-md);
  background: var(--c-white);
  color: var(--c-blue);
  transition: background-color 0.22s ease, color 0.22s ease;
}

/* Invert label colours on hover/focus; never underline the card text */
.explore-cards__grid a.explore-card:hover,
.explore-cards__grid a.explore-card:focus-visible {
  text-decoration: none;
}

.explore-card:hover .explore-card__label,
.explore-card:focus-visible .explore-card__label {
  background: var(--c-blue);
  color: var(--c-white);
}

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

@media (max-width: 520px) {
  .explore-cards__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.benefit-list {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.benefit-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  background: #f7f8fa;
  border-radius: var(--radius-card-sm);
  border: 1px solid var(--c-border);
}

.benefit-list .benefit-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--c-cta);
  margin-top: 2px;
}

.benefit-list li > div {
  font-size: var(--fs-base);
  line-height: 1.55;
}

.benefit-list li strong {
  color: var(--c-blue);
}

.market-update {
  background: #f7f8fa;
  border-left: 5px solid var(--c-blue);
  border-radius: 0 var(--radius-card-sm) var(--radius-card-sm) 0;
  padding: var(--space-5) var(--space-6);
  margin: var(--space-7) 0 var(--space-6);
}

/* =====================================================================
   Article extras (pull-quote, action wrapper, promo card, numbered list)
   ===================================================================== */
.pull-quote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  text-align: center;
  border: 0;
}

.pull-quote p {
  margin: 0;
  font-family: var(--ff-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(1.15rem, 1.2vw + 0.8rem, 1.5rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--c-blue);
  font-weight: 600;
}

.article-actions {
  display: flex;
  justify-content: center;
  margin: var(--space-5) 0;
}

/* A heading directly after an action button block would otherwise collapse in its
   larger top margin, making the button's spacing look uneven. Equalise it. */
.article-content .article-actions + h2,
.article-content .article-actions + h3 {
  margin-top: var(--space-5);
}

.promo-card {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  gap: var(--space-5);
  align-items: center;
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.promo-card:hover,
.promo-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 64, 115, 0.12);
  border-color: var(--c-blue);
  text-decoration: none;
}

.promo-card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card-sm);
  aspect-ratio: 3 / 2;
  background: var(--c-bg-light);
}

.promo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promo-card__body {
  display: block;
}

.promo-card__body h4 {
  margin: 0 0 var(--space-2);
  color: var(--c-blue);
  font-size: var(--fs-lg);
}

.promo-card__body p {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-text);
  text-decoration: none;
}

.promo-card:hover .promo-card__body p,
.promo-card:focus-visible .promo-card__body p {
  color: var(--c-text);
  text-decoration: none;
}

.promo-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--ff-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  color: var(--c-cta);
  font-size: 0.95rem;
}

.numbered-list {
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.numbered-list li {
  padding-left: var(--space-2);
  line-height: 1.6;
}

.numbered-link-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
}

.numbered-link-list li {
  font-weight: 600;
}

.numbered-link-list a {
  color: var(--c-blue);
  text-decoration: none;
}

.numbered-link-list a:hover,
.numbered-link-list a:focus-visible {
  color: var(--c-blue-dark);
  text-decoration: underline;
}

/* Help-links: a list of related resources styled as numbered badge rows with
   a chevron and a subtle hover highlight (same family as .howto-timeline, but
   with no connecting line since these are resources, not sequential steps). */
/* ol.help-links (not just .help-links) so the padding reset outranks the
   `.article-content ol { padding-left: 1.25rem }` rule and the list isn't indented. */
ol.help-links {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.help-links > li {
  margin: 0;
}

.help-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-card-sm);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.help-links a:hover,
.help-links a:focus-visible {
  background-color: #eef3f9;
}

.help-links__icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-blue);
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 64, 115, 0.22);
  transition: background 0.2s ease, transform 0.2s ease;
}

.help-links__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.help-links__label {
  flex: 1 1 auto;
  font-family: var(--ff-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--c-blue);
}

.help-links__arrow {
  flex: 0 0 auto;
  color: var(--c-blue);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

/* High-specificity reset stops the generic content-link rule underlining the
   whole row; only the label underlines on hover. */
.help-links li a:not(.btn):hover,
.help-links li a:not(.btn):focus-visible {
  text-decoration: none;
}

.help-links a:hover .help-links__icon,
.help-links a:focus-visible .help-links__icon {
  background: var(--c-blue-dark);
  transform: scale(1.06);
}

.help-links a:hover .help-links__label,
.help-links a:focus-visible .help-links__label {
  text-decoration: underline;
}

.help-links a:hover .help-links__arrow,
.help-links a:focus-visible .help-links__arrow {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .promo-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .promo-card__media {
    aspect-ratio: 16 / 9;
  }
}

/* =====================================================================
   How-to (7-step guide) page
   ===================================================================== */
.howto-intro {
  padding: var(--space-7) 0 var(--space-5);
  background: var(--c-white);
}

.howto-intro__inner {
  max-width: 760px;
  margin: 0 auto;
}

.howto-intro h2 {
  margin: 0 0 var(--space-4);
  color: var(--c-blue);
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
}

.howto-intro p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-base);
  line-height: 1.65;
}

/* Seven-stages overview rendered as a numbered vertical timeline. Each row
   links to its stage section; a connector line links one badge to the next. */
.howto-timeline {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.howto-timeline > li {
  position: relative;
  margin: 0;
  padding-bottom: var(--space-4);
}

.howto-timeline > li:last-child {
  padding-bottom: 0;
}

/* Connector: runs from the bottom of this badge down to the next badge. The
   badge sits top-left at a fixed position, so this is robust to label wrapping. */
/* Connector aligns with the badge centre: badge left edge sits at the anchor's
   0.75rem left padding, so its centre is 0.75rem + 1.25rem = 2rem. It starts at
   the badge bottom (0.5rem top padding + 2.5rem badge = 3rem). z-index keeps it
   above the row's hover background but below the (opaque) badge. */
.howto-timeline > li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 2rem;
  top: 3rem;
  height: calc(100% - 2.5rem);
  width: 2px;
  background: #d4dde7;
  transform: translateX(-1px);
  z-index: 1;
}

.howto-timeline a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-card-sm);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.howto-timeline a:hover,
.howto-timeline a:focus-visible {
  background-color: #eef3f9;
}

.howto-timeline__num {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-blue);
  color: #fff;
  font-family: var(--ff-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 3px 8px rgba(0, 64, 115, 0.22);
  position: relative;
  z-index: 2;
  transition: background 0.2s ease, transform 0.2s ease;
}

.howto-timeline__label {
  flex: 1 1 auto;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  font-family: var(--ff-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-blue);
}

.howto-timeline__arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--c-blue);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

/* Hover / focus: darken the badge, nudge the arrow, underline just the label
   (the high-specificity reset stops the generic content-link rule underlining
   the whole row, including the number badge). */
.howto-timeline li a:not(.btn):hover,
.howto-timeline li a:not(.btn):focus-visible {
  text-decoration: none;
}

.howto-timeline a:hover .howto-timeline__num,
.howto-timeline a:focus-visible .howto-timeline__num {
  background: var(--c-blue-dark);
  transform: scale(1.06);
}

.howto-timeline a:hover .howto-timeline__label,
.howto-timeline a:focus-visible .howto-timeline__label {
  text-decoration: underline;
}

.howto-timeline a:hover .howto-timeline__arrow,
.howto-timeline a:focus-visible .howto-timeline__arrow {
  transform: translateX(4px);
}

.stage-row {
  padding: var(--space-7) 0;
}

.stage-row--alt {
  background: #f7f8fa;
}

.stage-row__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.stage-row--reverse .stage-row__content { order: 2; }
.stage-row--reverse .stage-row__media { order: 1; }

.stage-row__content h2 {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--c-blue);
  font-size: clamp(1.4rem, 1.6vw + 0.9rem, 1.9rem);
  line-height: 1.2;
}

.stage-row__content p {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-base);
  line-height: 1.65;
}

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

.stage-row__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card-sm);
  box-shadow: 0 12px 30px rgba(0, 64, 115, 0.10);
}

.stage-pill {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: #e8f0f8;
  color: var(--c-blue);
  font-family: var(--ff-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* Centered single-column content band - for full-width pages without a sidebar
   (keeps the article typography but constrains the reading width). */
.content-band {
  padding: var(--space-7) 0 var(--space-8);
}

.content-band__inner {
  max-width: 760px;
  margin: 0 auto;
}

/* The band already supplies bottom padding, so drop the trailing element's own
   margin (e.g. a callout's margin) to avoid an oversized gap below it. */
.content-band__inner > *:last-child {
  margin-bottom: 0;
}

.howto-ctas {
  padding: var(--space-7) 0 var(--space-5);
  background: var(--c-white);
}

.howto-ctas__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.howto-ctas__grid .article-cta {
  margin: 0;
  background: #004073;
}

.howto-ctas__grid .article-cta .btn {
  align-self: start;
}

.howto-bottom {
  padding: var(--space-5) 0 var(--space-7);
  background: var(--c-white);
}

.howto-bottom__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: var(--space-6);
  align-items: stretch;
}

.howto-bottom__appraisal h2 {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--c-blue);
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
}

.howto-bottom__appraisal p {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-base);
  line-height: 1.65;
}

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

@media (max-width: 900px) {
  .stage-row__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .stage-row--reverse .stage-row__content { order: 1; }
  .stage-row--reverse .stage-row__media { order: 2; }

  /* Tighter vertical rhythm once sections stack, so consecutive bands don't
     leave an oversized gap between them. */
  .stage-row,
  .content-band {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .howto-ctas__grid,
  .howto-bottom__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.contact-section {
  padding: var(--space-7) 0;
  background: var(--c-white);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.contact-info h2 {
  margin: 0 0 var(--space-4);
  color: var(--c-blue);
}

.contact-info > p {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-base);
  line-height: 1.6;
}

.contact-details {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
}

.contact-details > div {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-border);
}

.contact-details > div:last-child {
  border-bottom: none;
}

.contact-details dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--ff-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  color: var(--c-blue);
  font-size: var(--fs-base);
}

.contact-details dt svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.contact-details dd {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.55;
}

.contact-details dd a {
  color: var(--c-blue);
  font-weight: 600;
}

.contact-details dd a:hover,
.contact-details dd a:focus-visible {
  color: var(--c-blue-dark);
  text-decoration: underline;
}

.contact-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--c-bg-light);
  border-radius: var(--radius-card-sm);
  font-size: var(--fs-sm, 0.9rem);
  line-height: 1.5;
  color: var(--c-text);
}

.contact-map__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card-sm);
  overflow: hidden;
  border: 1px solid var(--c-border);
  margin: 0 0 var(--space-4);
  background: var(--c-bg-light);
}

.contact-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-map > p {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-base);
  line-height: 1.55;
}

.contact-map > p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .contact-details > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

.market-update > :first-child {
  margin-top: 0;
}

.market-update > :last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .market-update {
    padding: var(--space-4) var(--space-5);
  }
}

.in-page-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.in-page-menu strong {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-blue);
  opacity: 0.55;
}

.in-page-menu ol,
.in-page-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.in-page-menu li,
.in-page-menu li + li {
  margin: 0;
  flex-shrink: 0;
  max-width: 100%;
}

/* Qualified with .article-content so these chip styles outrank the generic
   body-link rule (main li a), which would otherwise recolour the menu. */
.in-page-menu a,
.article-content .in-page-menu a {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: var(--c-bg-light);
  color: var(--c-black);
  font-weight: 400;
  font-size: var(--fs-base);
  border-radius: var(--radius-btn);
  line-height: 1.5;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.in-page-menu a:hover,
.in-page-menu a:focus-visible,
.article-content .in-page-menu a:hover,
.article-content .in-page-menu a:focus-visible {
  background: var(--c-blue);
  color: var(--c-white);
  text-decoration: none;
}

.article-tip strong { display: inline; }

/* -------------------------------------------------------------------------
   17g-ii. Comparison table (cost comparison)
   ------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border-radius: var(--radius-card-sm);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-soft);
}

.cost-table {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

/* Compact 2-column comparison table (e.g. factor / impact): smaller min-width so
   it fills the article column without forcing a horizontal scrollbar at the
   narrower two-column widths. */
.cost-table--compact {
  min-width: 26rem;
}

/* Compact tables sit in the narrow two-column article width, where a long
   nowrap row header (e.g. "Empty Dwelling Management Order (EDMO)") would force
   a horizontal scrollbar around the ~1024px breakpoint. Let row headers wrap.
   The [scope="row"] selector raises specificity above the later base
   `.cost-table tbody th { white-space: nowrap }` rule. */
.cost-table--compact tbody th[scope="row"] {
  white-space: normal;
}

/* Up/down value colours for comparison tables (e.g. "Increases"/"Lowers value"). */
.cost-table .value-up {
  color: #0a8a2a;
  font-weight: 600;
}

.cost-table .value-down {
  color: #c1121f;
  font-weight: 600;
}

/* Green + / red - markers for pros & cons subheadings (e.g. tenanted vs vacant):
   a white +/- inside a coloured circle. */
.pros-mark,
.cons-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -0.06em;
}

.pros-mark {
  background: #0a8a2a;
}

.cons-mark {
  background: #c1121f;
}

.cost-table th,
.cost-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border);
}

.cost-table thead th {
  background: var(--c-blue);
  color: var(--c-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
}

/* Keep each column title pinned to the top of the header cell and its sub-label
   (e.g. Unconditional / Conditional) pinned to the bottom, so the sub-labels
   align across all columns even when a longer title wraps to two lines. The
   height:1px on the cell lets the flex stack's height:100% resolve against the
   real (content-driven) cell height. */
.cost-table--align-bottom thead th {
  height: 1px;
}
.cost-table--align-bottom thead th .th-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
/* Give the three auction columns equal width so they don't size to their
   content (which left Modern Method narrower than the others). table-layout
   fixed makes the widths authoritative rather than content-driven. */
.cost-table--align-bottom {
  table-layout: fixed;
}
.cost-table--align-bottom thead th {
  width: 22%;
}
.cost-table--align-bottom thead th:first-child {
  width: 34%;
}
/* The Feature column's row labels are nowrap by default; with a fixed column
   width the longest label would overflow, so allow it to wrap instead. The
   [scope="row"] selector raises specificity above the later base
   `.cost-table tbody th { white-space: nowrap }` rule. */
.cost-table--align-bottom tbody th[scope="row"] {
  white-space: normal;
}

/* Centre the three auction columns (headers + body cells) horizontally and
   vertically; the first "Feature" column stays left-aligned. */
.cost-table--align-bottom thead th:not(:first-child) .th-stack {
  align-items: center;
  text-align: center;
}
.cost-table--align-bottom tbody td {
  text-align: center;
  vertical-align: middle;
}
/* The tick/cross SVGs are display:block, so text-align can't centre them;
   centre them in the cell with auto inline margins. */
.cost-table--align-bottom tbody td svg {
  margin-inline: auto;
}

/* Yes/No value: keep the tick/cross icon and its word together and aligned,
   so they don't get scattered when the cell becomes a flex row on narrow widths. */
.cost-table .bool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

/* Decision-table caption (e.g. "Should you sell by auction in Autumn 2025?"):
   browser default is centred small text, so restyle as a left-aligned heading bar. */
.cost-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-text);
  padding-bottom: var(--space-3);
}

/* Verdict cells (decision tables): icon + verdict word + trailing explanation in
   one cell. The single .verdict wrapper keeps the stacked mobile flex row to a
   single value item beside the repeated column label (loose text nodes would
   otherwise become separate flex items and scatter). Em-sized icons sit on the
   text line instead of inflating it; the small negative shift compensates for
   the inline-flex baseline sitting at the icon's bottom edge. */
.cost-table .verdict {
  display: block;
  text-align: left;
}

.cost-table .verdict .bool {
  font-weight: 600;
  vertical-align: -0.2em;
}

.cost-table .verdict .bool svg {
  width: 1.15em;
  height: 1.15em;
}

/* Decision tables (rows with .verdict cells): the scenario column is a full
   sentence, so it reads as body copy rather than a bold row header. The mobile
   blue header bar is unaffected: it uses the heading font, whose lightest
   loaded weight is 600. */
.cost-table:has(.verdict) tbody th[scope="row"] {
  font-weight: 400;
}

.cost-table tbody th {
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-bg-light);
  white-space: nowrap;
}

/* Links inside a row-header cell (e.g. auctioneer names in the London dates
   table): brand blue on the light desktop cell, white on the blue mobile bar. */
.cost-table tbody th[scope="row"] a {
  color: var(--c-blue);
  font-weight: 700;
  text-decoration: underline;
}

.cost-table tbody tr:last-child th,
.cost-table tbody tr:last-child td {
  border-bottom: none;
}

/* Stacked card layout on mobile (column header repeated beside each value).
   Also applied in the narrow two-column band (article + 20rem sidebar, ~1024px to
   ~1152px) where the table's content width would otherwise force a horizontal
   scrollbar inside the article column. */
@media (max-width: 47.999rem), (min-width: 64rem) and (max-width: 72rem) {
  .table-wrap {
    overflow: visible;
    border: none;
    box-shadow: none;
  }

  .cost-table {
    min-width: 0;
    font-size: var(--fs-sm);
  }

  .cost-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .cost-table tbody tr {
    display: block;
    margin-bottom: var(--space-5);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card-sm);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }

  .cost-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .cost-table tbody th[scope="row"] {
    display: block;
    background: var(--c-blue);
    color: var(--c-white);
    font-family: var(--font-heading);
    white-space: normal;
  }

  .cost-table tbody th[scope="row"] a {
    color: var(--c-white);
  }

  .cost-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    text-align: right;
  }

  .cost-table tbody td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--c-text);
    text-align: left;
  }

  /* Render the bracketed qualifier (e.g. "(Unconditional)") on its own line via
     the newline baked into data-label, so the label column is narrower and the
     value beside it gets more room (avoids long values being clipped). */
  .cost-table--align-bottom tbody td::before {
    white-space: pre-line;
  }

  /* Keep the descriptor label on the left but centre the value beside it.
     A 2-column grid (label auto / value 1fr) centres each value - tick, cross
     or text - both horizontally and vertically, without needing a wrapper. */
  .cost-table--align-bottom tbody td {
    display: grid;
    grid-template-columns: 7rem 1fr;
    align-items: center;
    justify-items: center;
    text-align: center;
  }
  .cost-table--align-bottom tbody td::before {
    justify-self: start;
    text-align: left;
  }

  /* Verdict cells: the icon + explanation sentence doesn't fit beside the
     repeated column label, so drop it onto its own full-width line below. */
  .cost-table tbody td:has(.verdict) {
    flex-wrap: wrap;
  }

  .cost-table tbody td .verdict {
    flex: 1 1 100%;
  }

  .cost-table tbody tr td:last-child {
    border-bottom: none;
  }
}

/* -------------------------------------------------------------------------
   17g-ii-b. Per-month dates tables (London auction dates)
   On narrow widths the wide 4-column dates table is replaced by one small
   2-column table per month (auctioneer name + date), which reads better than
   the per-auctioneer card stack. Shown in the same ranges where .cost-table
   would otherwise stack (mobile + the squeezed ~1024-1152px two-column band).
   ------------------------------------------------------------------------- */
.dates-months {
  display: none;
}

.month-table {
  margin-bottom: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.month-table:last-child {
  margin-bottom: 0;
}

.month-table .month-table__title {
  margin: 0;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: var(--fs-base);
  padding: var(--space-3) var(--space-4);
}

.month-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.month-table th,
.month-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}

.month-table thead th {
  background: #e8ebf4;
  color: var(--c-blue);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.month-table thead th:last-child,
.month-table tbody td {
  text-align: right;
}

.month-table tbody td {
  white-space: nowrap;
  color: var(--c-text-muted);
}

.month-table tbody th[scope="row"] {
  font-weight: 600;
}

.month-table tbody th[scope="row"] a {
  color: var(--c-blue);
  font-weight: 700;
  text-decoration: underline;
}

.month-table tbody tr:last-child th,
.month-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table filter / search box (London auction dates). */
.table-filter {
  margin-bottom: var(--space-4);
}

.table-filter__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}

.table-filter__input {
  width: 100%;
  max-width: 24rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
  font: inherit;
  color: var(--c-text);
  background: var(--c-white);
}

.table-filter__input:focus-visible {
  outline: 2px solid var(--c-cta);
  outline-offset: 1px;
  border-color: var(--c-blue);
}

/* JS hides a table (or month block) whose rows are all filtered out. */
.table-hidden {
  display: none !important;
}

/* The "no matches" message carries its own display (.callout), so the plain
   [hidden] attribute would lose; this two-attribute selector overrides it. */
[data-filter-empty][hidden] {
  display: none;
}

/* Sortable column headers (JS adds the <button>; degrades to a plain header
   with no JS). Used on the London auction-dates tables. */
.cost-table thead th:has(.th-sort),
.month-table thead th:has(.th-sort) {
  padding: 0;
}

.th-sort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.th-sort:focus-visible {
  outline: 2px solid var(--c-cta);
  outline-offset: -2px;
}

.th-sort__icon {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.4;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

th[aria-sort="ascending"] .th-sort__icon {
  opacity: 1;
  transform: rotate(180deg);
}

th[aria-sort="descending"] .th-sort__icon {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .th-sort__icon {
    transition: none;
  }
}

@media (max-width: 47.999rem), (min-width: 64rem) and (max-width: 72rem) {
  .dates-grid {
    display: none;
  }

  .dates-months {
    display: block;
    margin-bottom: var(--space-6);
  }
}

/* -------------------------------------------------------------------------
   17g-ii-c. Contact details list (auctioneer contact pages)
   A key/value list of phone, email, address, website etc. Two columns on
   desktop, stacked on narrow screens.
   ------------------------------------------------------------------------- */
.contact-table {
  margin: var(--space-5) 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.contact-table > div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border);
}

.contact-table > div:nth-child(even) {
  background: var(--c-bg-light);
}

.contact-table > div:last-child {
  border-bottom: none;
}

.contact-table dt {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-blue);
}

.contact-table dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .contact-table > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* -------------------------------------------------------------------------
   17g-iii. Process comparison cards (estate agent vs auction)
   ------------------------------------------------------------------------- */
.compare-grid {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

/* Process comparison blocks (estate agent vs auction, with diagram) */
.process-block {
  padding: var(--space-5);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-soft);
  margin: var(--space-5) 0;
}

/* On mobile, let a process-block break out of the body padding (full width),
   dropping the side borders/radius so it reads cleanly at the screen edges.
   Inner padding keeps the content inset. */
@media (max-width: 47.999rem) {
  .process-block--bleed-mobile {
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
}

.process-block__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.process-block__head h3 {
  margin: 0;
}

.process-block h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-md);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem 0.28rem 0.55rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}

.status-chip svg { flex-shrink: 0; }

.status-chip--secure {
  background: rgba(3, 188, 19, 0.12);
  color: #0a8f17;
}

.status-chip--insecure {
  background: rgba(255, 117, 31, 0.16);
  color: #c4560a;
}

.process-block ul {
  margin: 0 0 var(--space-5);
  padding-left: 1.1rem;
  color: var(--c-text-muted);
}

.process-block li {
  margin-bottom: var(--space-2);
}

.article-content .process-figure {
  margin: var(--space-5) -1rem 0;
  max-width: 500px;
}

.process-figure svg,
.process-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.commitment-figure svg {
  width: 100%;
  height: auto;
  display: block;
}

.tip-card {
  padding: var(--space-5);
  background: var(--c-bg-light);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-soft);
  margin: var(--space-6) 0;
  display: grid;
  gap: var(--space-3);
}

.tip-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.article-content .tip-card__head h2,
.article-content .tip-card__head h3,
.article-content .tip-card__head h4 {
  margin: 0;
  font-size: var(--fs-md);
}

.article-content .tip-card p {
  margin: 0;
  color: var(--c-text-muted);
}

.tip-card .btn {
  justify-self: start;
}

/* -------------------------------------------------------------------------
   17h. Sidebar (aside) boxes
   ------------------------------------------------------------------------- */
.sidebar {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.aside-box {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card-sm);
  padding: var(--space-5);
  overflow: hidden;
}

.aside-box h3 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-blue);
}

.aside-box p { margin-bottom: var(--space-3); }
.aside-box p:last-child { margin-bottom: 0; }

/* Sidebar image box: full-bleed image, no inner padding or border */
.aside-box--media { padding: 0; overflow: hidden; border: 0; background: transparent; }
.aside-box--media img {
  display: block;
  width: 100%;
  height: auto;
}

.aside-box--tip {
  background: var(--c-white);
  border-color: var(--c-border);
}

.aside-box--example {
  background: var(--c-white);
  border-color: var(--c-border);
}

.aside-box__pill {
  display: inline-block;
  /* Small inline tinted chip sitting inside the card padding (modern look,
     replaces the older full-width solid header bar). Blue tint by default. */
  margin: 0 0 var(--space-3);
  padding: 0.3em 0.85em;
  background: rgba(0, 64, 115, 0.08);
  color: var(--c-blue);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Tip & Quote keep their green colour coding */
.aside-box--tip .aside-box__pill,
.aside-box--quote .aside-box__pill {
  background: rgba(3, 188, 19, 0.12);
  color: #0a8a16;
}

.aside-stats {
  display: grid;
  gap: 0;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.aside-stats > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(0, 64, 115, 0.12);
}

.aside-stats > div:last-child {
  border-bottom: 0;
}

.aside-stats dt {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0;
}

.aside-stats dd {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-blue);
  margin: 0;
  text-align: right;
}

.aside-stats__note {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  font-style: italic;
  margin: 0;
}

.aside-box--quote {
  position: relative;
  background: var(--c-white);
  border-color: var(--c-border);
}

.aside-box--quote::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  right: var(--space-5);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-cta);
  opacity: 0.18;
  pointer-events: none;
}

.aside-box--quote blockquote {
  margin: 0;
  padding: 0;
  position: relative;
}

.aside-box--quote blockquote p {
  margin: 0;
  font-size: var(--fs-md);
  font-style: italic;
  line-height: 1.45;
  color: var(--c-text);
}

.aside-box--cta {
  background: var(--c-blue);
  color: var(--c-white);
  border-color: var(--c-blue);
  border-radius: var(--radius-card-sm);
}

.aside-box--feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 15.5rem;
  background: var(--c-blue);
  border: 0;
  border-radius: var(--radius-card-sm);
  padding: var(--space-6);
  color: var(--c-white);
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-base);
}

.aside-box--feature:hover {
  background: var(--c-blue-dark);
  color: var(--c-white);
  text-decoration: none;
  transform: translateY(-2px);
}

.aside-box--feature-green {
  background: var(--c-cta);
}

.aside-box--feature-green:hover {
  background: var(--c-cta-hover);
}

.aside-box--feature h3.aside-box--feature__title {
  color: var(--c-white);
  font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif;
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0;
}

.aside-box--feature__cta {
  align-self: flex-end;
  color: var(--c-white);
  font-size: var(--fs-base);
  font-weight: 400;
  margin-top: var(--space-5);
}

.aside-box--feature__cta::after {
  content: " →";
}

.aside-box--cta h3 { color: var(--c-white); }
.aside-box--cta p { color: rgba(255, 255, 255, 0.85); }
.aside-box--cta .btn { width: 100%; }

.aside-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}

.aside-box ul li {
  border-bottom: 1px solid rgba(0, 64, 115, 0.10);
}

.aside-box ul li:last-child {
  border-bottom: 0;
}

.aside-box ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-weight: 600;
  color: var(--c-blue);
  transition: color var(--transition-fast);
}

.aside-box ul a::after {
  content: "→";
  color: var(--c-blue);
  font-weight: 700;
  transition: transform var(--transition-fast);
}

.aside-box ul a:hover {
  color: var(--c-blue-dark);
  text-decoration: none;
}

.aside-box ul a:hover::after {
  transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   18. Responsive (tablet 768+)
   ------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  :root {
    --container-padding: 2rem;
    --fs-2xl: 3.052rem;
    --fs-3xl: 3.815rem;
  }

  .section { padding: 4.5rem 0; }

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

  .article-content .process-figure { margin-left: 0; margin-right: 0; }

  .article-content blockquote { font-size: var(--fs-md); }

  .hero { padding: var(--space-8) 0 var(--space-9); }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .types-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

  .costs { grid-template-columns: 1.1fr 1fr; gap: var(--space-7); }

  .split-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }

  .split-row--reverse .split-row__image { order: 1; }

  .intro-strip-grid {
    gap: var(--space-6);
  }

  .article-compare {
    grid-template-columns: 1fr 1fr;
  }

  .footer-top {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--space-7);
  }

  .footer-bottom {
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }

  .header-phone { display: inline-flex; }

  :root { --header-height: 4.5rem; }
}

/* -------------------------------------------------------------------------
   19. Responsive (desktop 1024+)
   ------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .primary-nav { display: block; }
  .hamburger { display: none; }
  .mobile-nav { display: none !important; }

  /* Hero goes two-column only at desktop width. Below this it stacks
     (text above image) so the big heading and image are not cramped
     at tablet/narrow widths. */
  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-8);
  }

  /* Article + sidebar also go two-column only at desktop width. Below this
     the article runs full-width and the sidebar stacks beneath it, so neither
     column is squeezed too narrow at tablet/narrow widths. */
  .page-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-8);
  }

  .sidebar .aside-box--cta {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    align-self: start;
  }

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

/* -------------------------------------------------------------------------
   20. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sr-reveal {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   21. Mobile header overrides (must come last to override default rules)
   ------------------------------------------------------------------------- */
@media (max-width: 47.999rem) {
  :root { --container-padding: 1.25rem; }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 4rem;
  }

  .brand img {
    height: clamp(1.5rem, 12.8vw - 1.0625rem, 2.5rem);
    width: auto;
  }

  .header-cta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
  }

  .hamburger {
    width: clamp(2rem, 8vw, 2.5rem);
    height: clamp(2rem, 8vw, 2.5rem);
  }

  .header-cta .btn--cta {
    padding: clamp(0.4rem, 1.7vw + 0.06rem, 0.6rem) clamp(0.7rem, 2.55vw + 0.19rem, 1.1rem);
    font-size: clamp(0.75rem, 1.7vw + 0.41rem, 0.95rem);
  }

  .hero-image {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .callout,
  .tip-card,
  .article-content .article-cta {
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    border-radius: 0;
  }
}

@media (min-width: 30rem) and (max-width: 47.999rem) {
  .header-inner {
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =====================================================================
   Benefits card (clean white feature box, e.g. "Why sell by auction?")
   White card with soft shadow, brand-blue heading + icon, green tick SVGs
   and a centred green CTA at the bottom.
   ===================================================================== */
/* Minimal, open treatment: no box, background, border or shadow - just a big
   blue heading, an airy list with large green ticks, and a green CTA. */
.benefits-card {
  margin: var(--space-7) 0;
  display: grid;
  gap: var(--space-4);
}

/* The decorative dotted background is not used in the minimal treatment. */
.benefits-card__bg {
  display: none;
}

.benefits-card__heading,
.article-content .benefits-card__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--c-blue);
  font-family: var(--ff-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
}

.benefits-card__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--c-blue);
}

.benefits-card__list,
.article-content .benefits-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.article-content .benefits-card__list li + li {
  margin-top: 0;
}

.benefits-card__list li {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--c-text);
}

/* Large, plain green tick (no circle background). */
.benefits-card__tick {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--c-cta);
  margin-top: 0;
}

.benefits-card__cta {
  display: flex;
  justify-content: flex-start;
  margin: var(--space-2) 0 0;
}

/* =====================================================================
   Responsive video embed (16:9 iframe wrapper, e.g. YouTube)
   ===================================================================== */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: var(--space-5) 0;
  border-radius: var(--radius-card-sm);
  overflow: hidden;
  background: var(--c-bg-light);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =====================================================================
   Inline centred button row inside article body (matches live page's
   standalone CTA buttons that sit between paragraphs)
   ===================================================================== */
.article-button-row {
  text-align: center;
  margin: var(--space-5) 0;
}

/* =====================================================================
   Post grid (example sales cards on /examples/ page)
   ===================================================================== */
.post-grid {
  list-style: none;
  margin: var(--space-5) 0 var(--space-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.article-content .post-grid > li,
.post-grid > li {
  margin: 0;
  display: grid;
}

.post-card {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-card-sm);
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.post-card:hover,
.post-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 64, 115, 0.12);
  border-color: var(--c-blue);
  text-decoration: none;
}

/* The card is one big <a> inside a <main> list item, so the general content-link
   rule "main li a:not(.btn):hover { underline }" (specificity 0,2,3) outranks a
   plain .post-card:hover and underlines the whole link - which then paints an
   underline through every line (date, title, excerpt, more). Re-assert no
   underline on the link itself with a selector that cleanly wins (every card
   sits in a ul.post-grid, giving 0,3,1), then underline only the title and
   "Read more". */
.post-grid a.post-card:hover,
.post-grid a.post-card:focus-visible {
  text-decoration: none;
}

.post-grid a.post-card:hover .post-card__title,
.post-grid a.post-card:focus-visible .post-card__title,
.post-grid a.post-card:hover .post-card__more,
.post-grid a.post-card:focus-visible .post-card__more {
  text-decoration: underline;
}

.post-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-light);
  position: relative;
  flex-shrink: 0;
}

.post-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.post-card:hover .post-card__media img,
.post-card:focus-visible .post-card__media img {
  transform: scale(1.04);
}

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

.post-card__title {
  margin: 0;
  font-family: var(--ff-heading, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--c-blue);
}

.post-card__excerpt {
  margin: 0;
  color: var(--c-text);
  font-size: 0.95rem;
  line-height: 1.5;
  flex: 1;
}

.post-card__more {
  font-weight: 700;
  color: var(--c-cta);
  font-size: 0.95rem;
}

.post-card__more::after {
  content: " \2192";
}

@media (max-width: 768px) {
  .post-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* News index: denser 3-up grid of text-only post cards (no media), each with a
   small date line above the title. Used on /news/ to list all blog posts. */
.post-grid--news {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 64rem) {
  .post-grid--news {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .post-grid--news {
    grid-template-columns: 1fr;
  }
}

.post-card__date {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* News index: separate the listing from the intro paragraph above it. */
.news-list {
  margin-top: var(--space-7);
}

/* News index: year sub-headings above each year's grid of post cards. */
.news-list > h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--c-blue);
  margin: var(--space-7) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--c-border);
  scroll-margin-top: 90px;
}

.news-list > h2:first-child {
  margin-top: 0;
}

/* =========================================================================
   18d. Single property case study (28 Burrows Road)
   ========================================================================= */
.burrows-wrap {
  max-width: 46rem;
  margin: 0 auto;
}

.burrows-wrap .sold-banner {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--c-blue);
}

.sold-banner__tag {
  display: inline-block;
  margin-right: 0.35em;
  padding: 0.1em 0.45em;
  background: var(--c-cta);
  color: var(--c-white);
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.burrows-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-5) 0;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  background: var(--c-bg-light);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--c-blue);
}

/* =========================================================================
   18c. Auction Extra page - intro + example-sale blocks
   ========================================================================= */
.extra-wrap {
  max-width: 48rem;
  margin: 0 auto;
}

.extra-wrap .extra-lead {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

/* Extra breathing room beneath the "View examples" button. */
.extra-wrap .extra-cta {
  margin-bottom: var(--space-7);
}

.extra-example {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-border);
}

.extra-example h3 {
  margin-bottom: var(--space-3);
}

.extra-example figure img {
  width: 100%;
  border-radius: var(--radius-card-sm);
}

/* Guide / sale price result strip */
.sale-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--c-bg-light);
  border-radius: var(--radius-card-sm);
}

.sale-result__guide {
  color: var(--c-text-muted);
  font-weight: 500;
}

.sale-result__sale {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--c-blue);
}

/* Gold star rating beneath a pull-quote testimonial */
.quote-stars {
  margin: var(--space-2) 0 0;
  color: #f5a623;
  letter-spacing: 2px;
  font-size: var(--fs-md);
  line-height: 1;
}

/* =========================================================================
   18a. Follow-us page - social follow buttons + readable content column
   ========================================================================= */
.follow-wrap {
  max-width: 48rem;
  margin: 0 auto;
}

.follow-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--c-white);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.follow-btn:hover,
.follow-btn:focus-visible {
  color: var(--c-white);
  text-decoration: none;
  transform: translateY(-1px);
}

.follow-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.follow-btn--fb {
  background: #1877f2;
}

.follow-btn--fb:hover {
  background: #0f66da;
}

.follow-btn--x {
  background: #000000;
}

.follow-btn--x:hover {
  background: #1a1a1a;
}

/* =========================================================================
   18b. Enquiry form (send-enquiry) - a standard, accessible contact form
   ========================================================================= */
.enquiry-section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
}

.enquiry-wrap {
  max-width: 40rem;
  margin: 0 auto;
}

.enquiry-wrap h1 {
  margin-bottom: var(--space-3);
}

.enquiry-lead {
  color: var(--c-text-muted);
  font-size: var(--fs-md);
  margin-bottom: var(--space-6);
}

.enquiry-form {
  display: grid;
  gap: var(--space-4);
}

.form-field {
  display: grid;
  gap: var(--space-2);
}

.form-field label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-btn);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(0, 64, 115, 0.12);
}

.form-field textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}

.enquiry-form .btn {
  justify-self: start;
}

.enquiry-phone {
  margin: var(--space-5) 0 0;
  color: var(--c-text-muted);
}

/* =========================================================================
   19. Estimate funnel (estimate-1..3)
   Minimal, conversion-focused lead-capture landing pages. Stripped header
   (logo + phone + estimate CTA, no nav) keeps the visitor in the funnel.
   Page-specific styles are scoped under body.funnel so they cannot affect
   the rest of the site.
   ========================================================================= */

/* Minimal funnel header. On the entry page (estimate-1) it carries the phone +
   "Free Estimate" CTA group hard right. The phone there follows the site default
   (hidden below 768px, carried by the blue call band beneath the hero). */
.funnel-header .header-cta {
  margin-left: auto;
}

/* On the inner funnel steps (2-6 + assessing) the header is logo + a tap-to-call
   phone block only - no competing CTA, no nav. The call link is an alternative
   conversion path (not an escape route) and stays visible at every width. */
.funnel-call {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-blue);
}

.funnel-call:hover,
.funnel-call:focus-visible {
  text-decoration: none;
}

.funnel-call svg {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-blue);
}

.funnel-call__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.funnel-call__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-text-muted);
}

.funnel-call__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--c-blue);
  white-space: nowrap;
}

.funnel-call:hover .funnel-call__number {
  color: var(--c-blue-dark);
}

/* On phones, drop the phone icon so the logo + number fit comfortably on one
   row (the "Prefer to talk?" label + number still make the call to action
   clear). The narrowest screens shrink the logo a touch as well. */
@media (max-width: 30rem) {
  .funnel-call svg {
    display: none;
  }
}

@media (max-width: 22.5rem) {
  .funnel-header .brand img {
    width: 130px;
    height: auto;
  }
}

/* --- Hero with postcode capture --- */
.funnel .estimate-hero {
  padding: var(--space-8) 0;
}

.funnel .estimate-hero__inner {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.funnel .estimate-hero h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-3);
  color: var(--c-black);
}

.funnel .estimate-hero .hero-lead {
  margin-bottom: var(--space-5);
}

/* Postcode entry form */
.postcode-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  max-width: 34rem;
  margin: 0 auto var(--space-6);
}

.postcode-input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-white);
  border: 2px solid var(--c-border);
  border-radius: var(--radius-btn);
  text-transform: uppercase;
}

.postcode-input::placeholder {
  text-transform: none;
  color: var(--c-text-muted);
}

.postcode-input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(0, 64, 115, 0.12);
}

.postcode-input[aria-invalid="true"] {
  border-color: #c0392b;
}

.postcode-form .btn {
  flex: 0 0 auto;
}

/* Homepage hero variant: left-aligned (the hero content is left-aligned),
   not centered like the estimate funnel hero. */
.hero .postcode-form {
  justify-content: flex-start;
  margin: 0 0 var(--space-4);
  max-width: 30rem;
}

/* Mobile: stack the form and let the button span the full width of the input
   above it (a larger, easier tap target). Desktop keeps the inline
   input + button "search box" row. */
@media (max-width: 47.999rem) {
  .postcode-input,
  .postcode-form .btn {
    flex: 1 1 100%;
  }
}

/* Validation hint shown by main.js when the postcode is empty/invalid */
.postcode-error {
  flex: 1 0 100%;
  margin: 0;
  color: #c0392b;
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* On the address step the heading sits directly above the form, so give it a
   little breathing room before the postcode field. */
.estimate-hero h1 + .estimate-form {
  margin-top: var(--space-5);
}

/* --- Thank-you step (test-estimate-6): success tick + subheading --- */
.thanks-tick {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-4);
  color: var(--c-cta);
}

.funnel .estimate-hero .thanks-subhead {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--c-blue);
  margin: 0 0 var(--space-4);
}

/* --- Stacked multi-field form (test-estimate-5: name + address) --- */
.estimate-fields {
  max-width: 34rem;
  margin: 0 auto var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.estimate-fields .postcode-input,
.estimate-fields .btn {
  width: 100%;
}

/* The shared input style uppercases (for postcodes); names and address lines
   must keep normal case. Only the postcode field stays uppercased. */
.estimate-fields .postcode-input {
  text-transform: none;
}

.estimate-fields #postcode {
  text-transform: uppercase;
}

/* --- Address picker (estimate-2): the <select> populated by the lookup --- */
.address-select {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto var(--space-5);
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-white);
  border: 2px solid var(--c-border);
  border-radius: var(--radius-btn);
  cursor: pointer;
}

.address-select:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(0, 64, 115, 0.12);
}

/* --- Single centred customer review on the funnel steps --- */
.estimate-review {
  max-width: 38rem;
  margin: var(--space-7) auto 0;
}

.estimate-review .review-card {
  text-align: center;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

/* Gold stars: contiguous glyphs with a small, even gap (the old version had
   literal spaces in the markup plus inherited letter-spacing, so they drifted
   too far apart). */
.estimate-review .review-card__stars {
  margin: 0;
  font-size: var(--fs-lg);
  letter-spacing: 2px;
}

.estimate-review .review-card__quote {
  margin: 0;
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--c-text);
}

.estimate-review .review-card__attr {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.estimate-review .review-card__name {
  font-size: var(--fs-base);
}

.estimate-review .review-card__meta {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* On phones the generous card padding + large quote leave too few words per
   line; trim the horizontal padding and ease the quote size for readability. */
@media (max-width: 47.999rem) {
  .estimate-review .review-card {
    padding: var(--space-5) var(--space-4);
  }

  .estimate-review .review-card__quote {
    font-size: var(--fs-base);
  }
}

/* --- Email step (estimate-3): reassurance note + small print --- */
.secure-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.secure-note svg {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--c-blue);
}

/* On mobile the note can wrap; left-align it and pin the lock icon to the
   first line (matching the ombudsman line on step 1) rather than letting it
   float between the wrapped lines. */
@media (max-width: 47.999rem) {
  .secure-note {
    display: flex;
    align-items: flex-start;
    text-align: left;
  }

  .secure-note svg {
    margin-top: 0.15em;
  }
}

.estimate-note {
  max-width: 34rem;
  margin: var(--space-4) auto 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* --- Assessing interstitial (test-estimate-2-assessing) --- */
.assess__progress {
  max-width: 30rem;
  margin: var(--space-6) auto 0;
  background: #e0e0e0;
  padding: 4px;
  border-radius: var(--radius-btn);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.assess__bar {
  width: 0;
  height: 1.25rem;
  background: var(--c-cta);
  border-radius: 5px;
  transition: width 400ms ease-in-out;
}

/* Manual fallback link, rendered only inside <noscript> (JS auto-advance is
   the primary path). */
.assess__fallback {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-sm);
}

@media (prefers-reduced-motion: reduce) {
  .assess__bar {
    transition: none;
  }
}

/* --- Benefit list (green ticks, bold lead) ---
   Desktop: each benefit is a single no-wrap line (blue lead inline with the
   description); the list shrinks to its content and is centred as a block so
   the ticks line up in a tidy column. Mobile: the list goes full width, the
   blue lead drops onto its own line above the description, and the description
   is free to wrap. */
.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-5);
  width: fit-content;
  max-width: 100%;
  display: grid;
  gap: var(--space-3);
  text-align: left;
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.benefit-list li::before {
  content: "";
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  /* Sit the tick vertically centred on the (blue lead) first line. */
  margin-top: 0.22em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303bc13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.benefit-text {
  white-space: nowrap;
}

.benefit-list strong {
  font-family: var(--font-heading);
  color: var(--c-blue);
}

@media (max-width: 47.999rem) {
  .benefit-list {
    width: 100%;
  }

  .benefit-text {
    white-space: normal;
  }

  .benefit-list strong {
    display: block;
  }
}

/* Property Ombudsman reassurance line */
.ombudsman-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.ombudsman-line svg {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--c-blue);
}

/* On mobile the line wraps to two lines; centring it leaves the shield icon
   floating between the lines and the text ragged. Left-align it and pin the
   icon to the first line instead. */
@media (max-width: 47.999rem) {
  .ombudsman-line {
    display: flex;
    align-items: flex-start;
    text-align: left;
  }

  .ombudsman-line svg {
    margin-top: 0.15em;
  }
}

/* --- Tick list inside funnel body (split rows + "Why sell") --- */
.funnel ul.tick-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: grid;
  gap: var(--space-2);
}

.funnel ul.tick-list li {
  position: relative;
  padding-left: 1.9rem;
}

.funnel ul.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.2em;
  height: 1.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303bc13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* "Why sell by auction?" single readable column */
.funnel .simple-row {
  max-width: 48rem;
  margin: 0 auto;
}

/* --- Phone band --- */
.call-band {
  background: var(--c-blue);
  color: var(--c-white);
  text-align: center;
  padding: var(--space-5) 0;
}

.call-band p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-md);
}

.call-band p a:not(.btn) {
  color: var(--c-white);
  font-weight: 800;
  text-decoration: none;
}

.call-band p a:not(.btn):hover,
.call-band p a:not(.btn):focus-visible {
  color: var(--c-white);
  text-decoration: none;
  opacity: 0.85;
}

/* --- Twin CTA panels (Contact / Request an estimate) --- */
.cta-duo {
  display: grid;
  gap: var(--space-6);
}

.cta-duo .cta-panel {
  max-width: none;
  margin: 0;
  height: 100%;
}

@media (min-width: 48rem) {
  .cta-duo {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  /* Alternate the split-row images left/right (matching the live page).
     All rows keep a content-first DOM order so they stack text-first on
     mobile; on desktop a reverse row pulls its image into the first column
     (LEFT). The shared global rule uses order:1, which leaves a content-first
     image on the right, so this funnel-scoped override (order:-1) is needed. */
  .funnel .split-row--reverse .split-row__image {
    order: -1;
  }
}

/* =========================================================================
   20. Cookie consent banner
   A simple informational ("implied consent") notice mirroring the live site's
   Osano/Insites cookieconsent bar. Injected by initCookieBanner() in main.js
   on every page until the visitor dismisses it (remembered in localStorage).
   It does NOT gate the GTM/GA4/Ads tracking - it only informs, matching live.
   ========================================================================= */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 1.5rem;
  background: rgba(59, 59, 59, 0.94);
  color: var(--c-white);
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  /* Slide/fade in from the bottom; toggled by --visible / --hiding. */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cookie-banner--visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner--hiding {
  opacity: 0;
  transform: translateY(100%);
}

.cookie-banner__msg {
  margin: 0;
  flex: 1 1 18rem;
  max-width: 60rem;
}

.cookie-banner__link {
  color: var(--c-white);
  text-decoration: underline;
}

.cookie-banner__link:hover,
.cookie-banner__link:focus {
  text-decoration: none;
}

.cookie-banner__btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: var(--c-blue);
  color: var(--c-white);
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cookie-banner__btn:hover,
.cookie-banner__btn:focus {
  background: var(--c-blue-dark);
}

@media (max-width: 47.9375em) {
  .cookie-banner {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 1rem;
  }
  /* Let the message take the remaining width and wrap over two lines so the
     OK button can sit beside it on the right (instead of dropping to its own
     row underneath, which made the banner taller). */
  .cookie-banner__msg {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
    transform: none;
  }
  .cookie-banner--hiding {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   21. 404 error page (public/404.html - the S3 error document)
   ------------------------------------------------------------------------- */
.error-page {
  padding: var(--space-8) 0;
}

.error-page__inner {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

/* Large, friendly "404" sitting above the heading */
.error-page__code {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 1;
  color: var(--c-blue);
  opacity: 0.18;
  margin-bottom: var(--space-2);
}

.error-page h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-3);
  color: var(--c-black);
}

.error-page .hero-lead {
  margin-bottom: var(--space-5);
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-4);
}

.error-page__call {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.error-page__call a {
  color: var(--c-blue);
}

/* Popular-pages helper block */
.error-links {
  max-width: 48rem;
  margin: var(--space-7) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-border);
}

.error-links__head {
  text-align: center;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-5);
}

.error-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: var(--space-2);
}

.error-links li {
  display: flex;
}

.error-links li a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  color: var(--c-text);
  font-weight: 500;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.error-links li a:hover {
  border-color: var(--c-blue);
  color: var(--c-blue);
  transform: translateY(-2px);
  text-decoration: none;
}

@media (min-width: 48rem) {
  .error-links ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 64rem) {
  .error-links ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .error-links li a:hover {
    transform: none;
  }
}