/* ==========================================================================
   MailShout — Design System
   ========================================================================== */

:root {
  --navy: #081A38;
  --navy-700: #112A52;
  --navy-600: #1B3A6B;
  --red: #E30613;
  --red-600: #C4050F;
  --red-50: #FDECEC;
  --bg: #F8FAFC;
  --white: #FFFFFF;
  --grey-100: #F1F3F6;
  --grey-200: #E5E7EB;
  --grey-400: #9CA3AF;
  --grey-500: #6B7280;
  --text: #1F2937;
  --success: #0F9D58;
  --success-50: #EAF7F1;
  --blue: #2563EB;
  --blue-50: #EFF6FF;
  --orange: #EA580C;
  --orange-50: #FFF3EB;
  /* Darker text-safe variants: the base --orange/--success tones read at ~3.2–3.6:1
     on white or their own -50 tint, which fails WCAG AA (4.5:1) for small text/labels.
     Use these wherever the color is applied to text, not just decorative icons/dots. */
  --orange-ink: #C2410C;
  --success-ink: #0C8148;
  --coverage-ink-on-green: #5B6472;

  --font-heading: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(8, 26, 56, 0.06), 0 1px 3px rgba(8, 26, 56, 0.04);
  --shadow-md: 0 8px 24px rgba(8, 26, 56, 0.08);
  --shadow-lg: 0 24px 64px rgba(8, 26, 56, 0.14);

  --container: 1220px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

/* ---------- Focus (accessible keyboard indicator) ----------
   Two-ring style so it stays visible regardless of what's behind it:
   a light inner ring plus a navy outer ring. Only shows for keyboard
   navigation (:focus-visible), not on mouse/touch clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--navy);
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

.section-pad { padding: 96px 0; }
@media (max-width: 768px) {
  .section-pad { padding: 64px 0; }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 14px; }
.section-head p { color: var(--grey-500); font-size: 17px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(227, 6, 19, 0.28);
}
.btn-primary:hover { background: var(--red-600); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(227, 6, 19, 0.34); }

.btn-secondary {
  background: var(--white);
  color: var(--navy);
  border-color: var(--grey-200);
}
.btn-secondary:hover { border-color: var(--navy); transform: translateY(-1px); }

.btn-ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

.btn-block { width: 100%; }
.btn-lg { padding: 16px 32px; font-size: 16px; }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none !important; }

/* ---------- Pills / Badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-heading);
}
.pill-live { background: #E8F8EF; color: var(--success); }
.pill-soon { background: var(--grey-100); color: var(--grey-500); }
.pill-red { background: var(--red-50); color: var(--red); }
.pill-wait { background: var(--orange-50); color: var(--orange-ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--grey-200);
  box-shadow: 0 2px 16px rgba(8, 26, 56, 0.05);
  background: rgba(248, 250, 252, 0.97);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.logo img { height: 38px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav a {
  padding: 10px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.main-nav a:hover { background: var(--grey-100); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--navy);
  padding: 8px 4px;
  margin-right: 4px;
  white-space: nowrap;
}
.header-phone svg { width: 17px; height: 17px; color: var(--red); flex-shrink: 0; }
.header-phone:hover { color: var(--red); }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1150px) {
  .header-phone { display: none; }
}

@media (max-width: 920px) {
  .main-nav {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    height: calc(100vh - 78px);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 18px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a { padding: 16px 14px; font-size: 17px; border-bottom: 1px solid var(--grey-100); }
  .header-actions .btn-secondary { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- Hero (full-bleed with overlapping stats bar) ---------- */
.hero {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: visible;
}
.hero-photo-zone {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Height controls the photo's rendered scale (see .hero-bg img below) —
     do not change this without also re-checking the crop/scale it produces.
     Shortened twice now: originally clamp(480px, 40vw, 860px), then
     clamp(420px, 32vw, 680px) — both made the zone taller than .hero-content
     ever needs (~440px including its own padding), leaving the flex-centered
     text sitting in visible empty space above and below it. Still a bit more
     than the text needs at most widths (some breathing room is intentional),
     just less of it. */
  min-height: clamp(360px, 27vw, 560px);
}
.hero-bg {
  /* Full-bleed layer, a sibling of .hero-inner/.container — spans the whole
     zone width. The image itself (below) is what's anchored to the
     container's edge, not this element — .hero-bg is just its positioning
     context. */
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg img {
  /* Sized by height only (auto width = native 3:2 ratio) — the rendered
     scale/crop must stay exactly this, do not change.
     `right` is intentionally NOT 0. It reproduces .container's own box model
     — its auto margin ((100% - 1220px) / 2) plus its 24px padding — so the
     photo's right edge lands exactly on the container's content edge: the
     same edge the stats bar and nav already align to. That makes the photo's
     right-side gap mirror the text's left-side gap at any width, so the
     whole hero band stays visually symmetric/centered like every other
     section on the page, instead of the photo chasing the true viewport edge
     independently of the text (which is what caused it to drift off to the
     right when zoomed out). Percentages (not vw) resolve against .hero-bg's
     own layout width, avoiding the scrollbar-width mismatch vw would introduce. */
  position: absolute;
  top: 0;
  right: calc(max(0px, (100% - var(--container)) / 2) + 24px);
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: right center;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Now that the image is anchored to the container's edge (not the
     viewport's), its left edge sits much further left — under a large part
     of the text column — at every width from 1366 up through ultrawide, so
     the solid region has to extend past where the text ends (~51% of the
     hero's width, nearly constant at any width ≥1220px — the two terms that
     vary with width, container's auto-margin and the text's fixed 600px,
     cancel out) rather than being tied to where the image starts. 57% is a
     safe, width-independent stop: comfortably after the text (51%), and
     comfortably before the image's own right edge even in the worst case
     (a very wide/zoomed-out viewport, where the image — capped at 1290px —
     shrinks furthest as a share of the total width, down to ~59-67%). */
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 51%, rgba(248,250,252,0.55) 54%, rgba(248,250,252,0) 57%);
}

.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-content { max-width: 600px; padding: 24px 0; }

.hero-eyebrow-pin { display: inline-flex; align-items: center; gap: 6px; }
.hero-eyebrow-pin svg { width: 14px; height: 14px; }

.hero h1 { font-size: clamp(38px, 5vw, 58px); margin-bottom: 22px; }
.hero h1 .navy-line { color: var(--navy); display: block; }
.hero h1 .red-line { color: var(--red); display: block; }
.hero-underline-wrap { position: relative; display: inline-block; }
.hero-underline-svg { position: absolute; left: 0; bottom: -10px; width: 100%; height: 14px; color: var(--red); pointer-events: none; }

.hero-sub { font-size: 18px; color: var(--grey-500); max-width: 480px; margin-bottom: 34px; }
.hero-sub strong { color: var(--text); font-weight: 700; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 22px; }
.hero-trust li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); }
.hero-trust svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; }

/* Was margin-top: -64px, pulling this bar up to overlap the photo — now a
   clear gap below the hero instead of an overlap. */
.hero-stats-bar { position: relative; z-index: 2; margin-top: 48px; padding-bottom: 40px; }
.hero-combined-banner {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-stats-row {
  background: var(--white);
  padding: 26px 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.hero-stat { display: flex; align-items: flex-start; gap: 12px; padding: 0 16px; border-left: 1px solid var(--grey-200); }
.hero-stat:first-child { border-left: none; }
.hero-stat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-stat-icon svg { width: 20px; height: 20px; color: var(--red); }
.hero-stat-icon img { width: 32px; height: auto; }
.hero-stat strong { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--navy); line-height: 1.3; margin-bottom: 4px; }
.hero-stat span > span { display: block; font-size: 12.5px; color: var(--grey-500); font-weight: 500; line-height: 1.45; }

@media (min-width: 861px) and (max-width: 1199px) {
  /* Below ~1200px the headline/paragraph wrap onto more lines, so
     .hero-photo-zone's actual height (and therefore the image's rendered
     width, which is height-driven) is taller than the bare min-height
     formula suggests — it's content-driven, not a fixed value, so it can't
     be predicted precisely here. What *is* reliable at this width is the
     text column's right edge (24px padding + 600px max-width = 624px,
     independent of content height), so the fade is anchored to that instead
     of trying to track the image's position: stay fully solid through the
     whole text column plus a margin, then fade out over the image itself. */
  .hero-bg::after {
    background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 640px, rgba(248,250,252,0.6) 700px, rgba(248,250,252,0) 760px);
  }
}

@media (max-width: 860px) {
  .hero-photo-zone { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-bg {
    position: relative;
    inset: auto;
    width: 100%;
    order: -1;
    aspect-ratio: 4 / 3;
  }
  .hero-bg img {
    /* Base rule sizes the image by height (auto width, right:0) for the
       full-bleed desktop layer — reset back to a normal fill-the-box image
       for the stacked, aspect-ratio-boxed mobile layout. */
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-position: 70% 40%;
  }
  .hero-bg::after { background: linear-gradient(180deg, rgba(8,26,56,0) 55%, rgba(8,26,56,0.45) 100%); }
  .hero-inner { order: 0; }
  .hero-content { max-width: none; padding: 32px 0 8px; }
  .hero-sub { max-width: none; }
  .hero-stats-bar { margin-top: 24px; }
  .hero-stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .hero-stat { border-left: none; padding: 0 10px; }
}
@media (max-width: 480px) {
  .hero-stats-row { grid-template-columns: 1fr; }
  .hero-stat { border-top: 1px solid var(--grey-200); padding-top: 16px; }
  .hero-stat:first-child { border-top: none; }
}

/* ---------- Logo strip ---------- */
.logo-strip { padding: 56px 0; border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); background: var(--white); }
.logo-strip-label {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 30px;
}
.logo-strip-label .pill-soon { margin-left: 8px; text-transform: none; letter-spacing: normal; }
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.logo-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--grey-200);
  color: var(--grey-400);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13.5px;
}
.logo-placeholder svg { width: 18px; height: 18px; opacity: 0.6; }

.logo-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  color: var(--grey-500);
  opacity: 0.8;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.logo-mark:hover { opacity: 1; color: var(--navy); }
.logo-mark svg { width: 22px; height: 22px; flex-shrink: 0; }
.logo-mark .lm-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-mark .lm-name { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.logo-mark .lm-sub { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }

/* ---------- Campaign statistics ---------- */
.stats-band {
  background: linear-gradient(135deg, var(--navy) 0%, #0D2144 100%);
  border-radius: var(--radius-lg);
  padding: 48px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.stats-band-text h3 { color: var(--white); font-size: 24px; margin-bottom: 8px; }
.stats-band-text p { color: rgba(255,255,255,0.65); font-size: 15px; max-width: 460px; }
.stats-band-icons { display: flex; gap: 14px; flex-wrap: wrap; }
.stats-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stats-icon svg { width: 26px; height: 26px; color: var(--red); }

.stats-band-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  width: 100%;
}
.stat-metric { display: flex; align-items: flex-start; gap: 14px; }
.stat-metric-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
}
.stat-metric-icon svg { width: 20px; height: 20px; color: var(--red); }
.stat-metric-value { font-family: var(--font-heading); font-size: 26px; font-weight: 800; color: var(--white); line-height: 1.1; }
.stat-metric-label { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.9); margin-top: 3px; }
.stat-metric-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }

@media (max-width: 860px) {
  .stats-band-metrics { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 480px) {
  .stats-band-metrics { grid-template-columns: 1fr; }
}

/* ---------- Proven results stat row ---------- */
.stats-row-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 44px 0;
  margin-bottom: 28px;
}
.stats-row-item {
  text-align: center;
  padding: 0 20px;
  border-left: 1px solid var(--grey-200);
}
.stats-row-item:first-child { border-left: none; }
.stats-row-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--red-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.stats-row-icon svg { width: 26px; height: 26px; color: var(--red); }
.pound-icon { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--red); }
.stats-row-value { font-family: var(--font-heading); font-weight: 800; font-size: 30px; color: var(--navy); line-height: 1; margin-bottom: 10px; }
.stats-row-label { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--navy); margin-bottom: 14px; }
.stats-row-divider { width: 28px; height: 2px; background: var(--red); margin: 0 auto 16px; }
.stats-row-item p { color: var(--grey-500); font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }

@media (max-width: 1024px) {
  .stats-row-card { grid-template-columns: repeat(3, 1fr); }
  .stats-row-item:nth-child(3n+1) { border-left: none; }
  .stats-row-item:nth-child(n+4) { border-left: none; border-top: 1px solid var(--grey-200); padding-top: 32px; margin-top: 12px; }
}
@media (max-width: 620px) {
  .stats-row-card { grid-template-columns: 1fr; }
  .stats-row-item { border-left: none !important; border-top: 1px solid var(--grey-200); padding: 28px 20px 0; margin-top: 16px; }
  .stats-row-item:first-child { border-top: none; padding-top: 0; margin-top: 0; }
}

.delivery-banner {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--navy);
  padding: 40px 44px;
}
.delivery-banner-icon {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.delivery-banner-icon svg { width: 34px; height: 34px; color: var(--red); }
.delivery-banner-text { flex: 1; }
.delivery-banner-text h4 { color: var(--white); font-size: 21px; margin-bottom: 6px; }
.delivery-banner-text p { color: rgba(255,255,255,0.65); font-size: 14.5px; }
.delivery-banner-divider { flex-shrink: 0; width: 1px; height: 84px; background: rgba(255,255,255,0.18); }
.delivery-banner-badge { flex-shrink: 0; display: flex; align-items: center; gap: 20px; }
.royal-mail-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}
.royal-mail-logo-badge img { height: 96px; width: auto; display: block; }
.dbb-text { display: flex; flex-direction: column; text-align: left; line-height: 1.35; }
.dbb-label { font-size: 15px; color: rgba(255,255,255,0.7); }
.dbb-brand { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: var(--red); }

@media (max-width: 760px) {
  .delivery-banner { flex-direction: column; text-align: center; padding: 28px; }
  .delivery-banner-divider { width: 60%; height: 1px; }
}

/* ---------- Testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.testimonial-stars { display: flex; gap: 3px; color: var(--red); margin-bottom: 16px; }
.testimonial-stars svg { width: 15px; height: 15px; }
.testimonial-quote { font-size: 15px; color: var(--text); line-height: 1.65; margin-bottom: 24px; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.avatar-initials {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 13.5px;
  flex-shrink: 0;
}
.testimonial-author-name { font-weight: 700; color: var(--navy); font-size: 14px; font-family: var(--font-heading); }
.testimonial-author-role { font-size: 12.5px; color: var(--grey-500); }

@media (max-width: 860px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* ---------- Category chips (superseded by "Who we work with" grouped cards below, kept unused) ---------- */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.category-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 1px solid var(--grey-200);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.category-chip svg { width: 16px; height: 16px; color: var(--red); }

/* ---------- Who we work with — grouped category cards ---------- */
.workwith-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}
.workwith-card {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  background: linear-gradient(180deg, var(--theme-50, var(--grey-100)) 0%, var(--white) 55%);
}
.workwith-card--red { --theme: var(--red); --theme-50: var(--red-50); }
.workwith-card--blue { --theme: var(--blue); --theme-50: var(--blue-50); }
.workwith-card--green { --theme: var(--success); --theme-50: var(--success-50); }
.workwith-card--orange { --theme: var(--orange); --theme-50: var(--orange-50); }

.workwith-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--theme, var(--red));
}
.workwith-icon svg { width: 28px; height: 28px; }

.workwith-card h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 8px;
}
.workwith-underline {
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  margin: 0 auto 14px;
  background: var(--theme, var(--red));
}
.workwith-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--grey-500);
  margin-bottom: 20px;
  min-height: 40px;
}

.workwith-list { display: flex; flex-direction: column; gap: 8px; }
.workwith-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
}
.workwith-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--theme, var(--red)); }

.workwith-banner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 32px;
  margin-top: 28px;
}
.workwith-banner-item { display: flex; align-items: center; gap: 14px; flex: 1 1 200px; min-width: 200px; }
.workwith-banner-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}
.workwith-banner-icon svg { width: 28px; height: 28px; }
.workwith-banner-icon--filled {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
}
.workwith-banner-icon--filled svg { width: 24px; height: 24px; }
.workwith-banner-text h4 { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--navy); margin-bottom: 3px; }
.workwith-banner-text p { font-size: 13px; color: var(--grey-500); line-height: 1.4; }
.workwith-banner-cta { flex-shrink: 0; }

@media (max-width: 1100px) {
  .workwith-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .workwith-banner { flex-direction: column; align-items: stretch; }
  .workwith-banner-item { min-width: 0; }
  .workwith-banner .btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .workwith-grid { grid-template-columns: 1fr; }
}

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.team-card { text-align: center; }
.team-card .avatar-initials { width: 76px; height: 76px; font-size: 22px; margin: 0 auto 16px; }
.team-avatar {
  width: 136px;
  height: 136px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-md);
}
.team-card h4 { font-size: 17px; margin-bottom: 4px; }
.team-card p { font-size: 13.5px; color: var(--grey-500); }

@media (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
}

/* ---------- Business directory ---------- */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.directory-tile {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.directory-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.directory-tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grey-100);
  color: var(--grey-400);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.directory-tile-icon svg { width: 22px; height: 22px; }
.directory-tile-category {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--red-50);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}
/* The category label (e.g. "Plumbers") is the tile's real heading — unique per tile,
   good for SEO/accessibility. "Your Business Here" / "Coming Soon" is demoted to plain
   bold text below it, same visual weight as the old h4 had, just not a heading element. */
.directory-tile-status { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--navy); margin-bottom: 6px; }
.directory-tile p { font-size: 13px; color: var(--grey-500); line-height: 1.5; margin-bottom: 16px; min-height: 40px; }
.directory-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--red);
}
.directory-tile-link svg { width: 14px; height: 14px; }

@media (max-width: 1024px) {
  .directory-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .directory-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .directory-grid { grid-template-columns: 1fr; }
}

/* ---------- Directory tile status variants ---------- */
/* Default .directory-tile above is the "reserved" state on a live territory page.
   These modifiers cover the other states the generator can render — see
   server/generate-directory.ps1 and assets/data/advertisers.json. */
.directory-tile.is-coming-soon .directory-tile-category { background: var(--grey-100); color: var(--grey-500); }
.directory-tile.is-coming-soon .directory-tile-link { color: var(--grey-500); }
.directory-tile.is-coming-soon .directory-tile-link:hover { color: var(--red); }
.directory-tile.is-occupied { border-color: var(--red-50); }
.directory-tile.is-occupied .directory-tile-icon { background: var(--red-50); color: var(--red); }

/* ---------- Directory breadcrumb + territory hero meta ---------- */
.directory-breadcrumb { font-size: 13px; color: var(--grey-500); margin-bottom: 18px; }
.directory-breadcrumb a { color: var(--grey-500); }
.directory-breadcrumb a:hover { color: var(--red); }
.directory-hero-status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.directory-hero-status-row .eyebrow { margin-bottom: 0; }
.directory-hero-meta { margin-top: 14px; font-size: 14px; color: var(--grey-500); }

/* ---------- Coming-soon status banner (territory pages) ---------- */
.directory-status-banner { background: var(--orange-50); border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); }
.directory-status-banner-inner { display: flex; align-items: flex-start; gap: 16px; padding: 22px 0; }
.directory-status-banner-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--orange-ink); display: flex; align-items: center; justify-content: center; }
.directory-status-banner-icon svg { width: 20px; height: 20px; }
.directory-status-banner-text strong { display: block; font-family: var(--font-heading); font-weight: 800; color: var(--navy); font-size: 15.5px; margin-bottom: 3px; }
.directory-status-banner-text p { font-size: 14px; color: var(--grey-500); }
.directory-status-banner-text a { color: var(--orange-ink); font-weight: 700; text-decoration: underline; }
@media (max-width: 600px) {
  .directory-status-banner-inner { flex-direction: column; }
}

/* ---------- Directory hub: territory search + cards ---------- */
.territory-search { position: relative; max-width: 420px; margin: 0 auto 40px; }
.territory-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--grey-400); pointer-events: none; }
.territory-search input { width: 100%; padding: 13px 18px 13px 46px; border-radius: var(--radius-full); border: 1.5px solid var(--grey-200); background: var(--white); font-family: var(--font-body); font-size: 15px; color: var(--text); }
.territory-search input:focus { border-color: var(--red); }

.territory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.territory-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.territory-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.territory-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.territory-card-head h4 { font-size: 19px; }
.territory-card-head .pill { flex-shrink: 0; padding: 4px 10px; font-size: 10.5px; white-space: nowrap; }
.territory-card-meta { font-size: 13px; color: var(--grey-500); margin-bottom: 12px; }
.territory-card p.territory-card-blurb { font-size: 14px; color: var(--grey-500); line-height: 1.55; margin-bottom: 18px; min-height: 65px; }
.territory-card-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--red); }
.territory-card-link svg { width: 15px; height: 15px; }
.territory-no-results { text-align: center; color: var(--grey-500); font-size: 15px; padding: 32px 0; }
.territory-no-results a { color: var(--red); font-weight: 700; }

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

/* County grouping on the hub — each .territory-group wraps one county's H3 heading
   plus its own .territory-grid of cards. JS toggles a whole group's [hidden] when a
   search filters out every card inside it (see main.js). */
.territory-group { margin-bottom: 40px; }
.territory-group:last-child { margin-bottom: 0; }
.territory-group h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey-500); margin-bottom: 16px; }

/* ---------- "About this area" / hub explainer blocks (shared component) ---------- */
.directory-about { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.directory-about h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 12px; }
.directory-about p { color: var(--grey-500); font-size: 15.5px; line-height: 1.65; }
.directory-about p a { color: var(--red); font-weight: 700; }

/* ---------- Nearby areas (territory pages) ---------- */
.nearby-areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nearby-area-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.nearby-area-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.nearby-area-card h3 { font-size: 15.5px; }
.nearby-area-card svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }
@media (max-width: 900px) {
  .nearby-areas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nearby-areas-grid { grid-template-columns: 1fr; }
}

/* ---------- Territory FAQ ---------- */
.directory-faq { max-width: 760px; }
.directory-faq h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 22px; }
.faq-item { border-top: 1px solid var(--grey-200); padding: 20px 0; }
.faq-item:last-child { padding-bottom: 0; }
.faq-item h3 { font-size: 16px; margin-bottom: 8px; }
.faq-item p { font-size: 14.5px; color: var(--grey-500); line-height: 1.6; }

/* ---------- Case study cards (unused, superseded by Business Directory above) ---------- */
.case-study-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 20px;
}
.case-study-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.case-study-head h3 { font-size: 19px; margin-bottom: 4px; }
.case-study-head p { font-size: 13.5px; color: var(--grey-500); }
.case-study-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.case-study-stat { background: var(--bg); border-radius: var(--radius-sm); padding: 14px; text-align: center; }
.case-study-stat .value { font-family: var(--font-heading); font-weight: 800; color: var(--navy); font-size: 20px; }
.case-study-stat .label { font-size: 11.5px; color: var(--grey-500); margin-top: 2px; }
.case-study-card blockquote { font-size: 15px; color: var(--text); line-height: 1.65; border-left: 3px solid var(--red); padding-left: 16px; margin: 0; }
.case-study-card cite { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--navy); font-style: normal; }

@media (max-width: 640px) {
  .case-study-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Facts grid ---------- */
.facts-grid-wrap { margin-top: 80px; }
.text-red { color: var(--red); }

.facts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.fact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 32px 22px;
}
.fact-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--grey-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.fact-card-icon svg { width: 26px; height: 26px; color: var(--red); }
.fact-card-stat {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 3.2vw, 46px);
  color: var(--red);
  line-height: 1;
  margin-bottom: 14px;
}
.fact-card-stat span {
  font-size: 19px;
  font-weight: 700;
  margin-left: 3px;
}
.fact-card h4 { font-size: 15.5px; color: var(--navy); margin-bottom: 14px; }
.fact-card-divider { width: 28px; height: 2px; background: var(--red); margin-bottom: 14px; }
.fact-card p { color: var(--grey-500); font-size: 13.5px; line-height: 1.6; margin-bottom: 18px; }
.fact-source { font-size: 11px; color: var(--grey-400); margin-top: auto; }

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

/* ---------- Case for print: fixed visual cards ---------- */
.facts-fixed-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

.fact-card-tall {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.fact-card-top { padding: 30px 24px 22px; text-align: left; }
.fact-card-icon-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.fact-card-icon-ring svg { width: 17px; height: 17px; color: var(--red); }
.fact-card-icon-ring .pound-icon { font-size: 15px; }
.fact-card-tall .fact-card-stat { text-align: left; font-size: clamp(52px, 4.8vw, 66px); margin-bottom: 12px; }
.fact-card-tall h4 { font-size: 18.5px; line-height: 1.3; margin-bottom: 12px; }
.fact-card-tall p { text-align: left; font-size: 13.5px; margin-bottom: 16px; }
.fact-card-tall .fact-source { display: block; margin-top: 0; }

.fact-visual {
  position: relative;
  height: 210px;
  margin-top: auto;
  overflow: hidden;
  background: var(--bg);
}
.fact-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1180px) {
  .facts-fixed-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .facts-fixed-grid { grid-template-columns: 1fr; }
}

.facts-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--red-50);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
}
.facts-banner-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.facts-banner-icon svg { width: 26px; height: 26px; color: var(--white); }
.facts-banner-text { flex: 1; }
.facts-banner-text h4 { font-size: 19px; margin-bottom: 4px; }
.facts-banner-text p { color: var(--grey-500); font-size: 14px; }
.facts-banner-divider {
  flex-shrink: 0;
  width: 1px;
  height: 48px;
  background: rgba(227, 6, 19, 0.2);
}
.facts-banner-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--navy);
}
.facts-banner-badge svg { width: 24px; height: 24px; color: var(--red); }
.facts-banner-badge strong { color: var(--red); }

@media (max-width: 760px) {
  .facts-banner { flex-direction: column; text-align: center; padding: 28px; }
  .facts-banner-divider { width: 60%; height: 1px; }
}

.demo-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-500);
  background: var(--grey-100);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 10%;
  right: 10%;
  height: 2px;
  background-image: linear-gradient(to right, var(--grey-200) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  background-repeat: repeat-x;
}
.step { text-align: center; position: relative; }
.step-num {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
}
.step-num svg { width: 26px; height: 26px; color: var(--navy); }
.step-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--bg);
}
.step h4 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--grey-500); }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .steps::before { display: none; }
}
@media (max-width: 768px) {
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before { display: none; }
}

/* ---------- Benefits split ---------- */
.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.benefit-list { display: flex; flex-direction: column; gap: 14px; margin: 28px 0 32px; }
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy);
}
.benefit-item svg {
  width: 22px; height: 22px; flex-shrink: 0; color: var(--red);
  margin-top: 1px;
}

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Dashboard mockup ---------- */
.dashboard-mock {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--grey-200);
}
.dash-topbar .logo img { height: 20px; }
.dash-topbar-title { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--navy); }
.dash-body { display: grid; grid-template-columns: 168px 1fr; min-height: 380px; }
.dash-sidebar {
  border-right: 1px solid var(--grey-200);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-500);
}
.dash-sidebar a svg { width: 16px; height: 16px; }
.dash-sidebar a.active { background: var(--red-50); color: var(--red); }
.dash-main { padding: 20px; }
.dash-main-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.dash-tile {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  position: relative;
}
.dash-tile .label { font-size: 11.5px; color: var(--grey-500); font-weight: 600; margin-bottom: 6px; }
.dash-tile .value { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--navy); }
.dash-panels { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.dash-panel {
  position: relative;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.dash-panel h5 { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.preview-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey-400);
  background: var(--grey-100);
  padding: 3px 7px;
  border-radius: var(--radius-full);
}
.geo-map {
  height: 96px;
  border-radius: var(--radius-sm);
  background: var(--grey-100);
  position: relative;
  overflow: hidden;
}
.geo-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(8,26,56,0.12) 1px, transparent 1px);
  background-size: 10px 10px;
}
.geo-pin {
  position: absolute; top: 40%; left: 48%;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(227,6,19,0.18);
}
.top-areas-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-bottom: 8px; }
.top-areas-row .bar { flex: 1; height: 6px; background: var(--grey-100); border-radius: 4px; margin: 0 10px; overflow: hidden; }
.top-areas-row .bar span { display: block; height: 100%; background: var(--red); border-radius: 4px; }

@media (max-width: 640px) {
  .dash-body { grid-template-columns: 1fr; }
  .dash-sidebar { display: none; }
  .dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .dash-panels { grid-template-columns: 1fr; }
}

/* ---------- Success stories coming soon ---------- */
.coming-soon-card {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
}
.coming-soon-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--red-50);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.coming-soon-icon svg { width: 24px; height: 24px; color: var(--red); }
.coming-soon-card h3 { font-size: 24px; margin-bottom: 12px; }
.coming-soon-card p { color: var(--grey-500); font-size: 15.5px; }

/* ---------- 404 page ---------- */
.error-card { max-width: 620px; padding: 64px 40px; }
.error-code {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 84px);
  line-height: 1;
  color: var(--red);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.error-card .coming-soon-icon { margin-top: 4px; }
.error-card h1 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 12px; }
.error-card > p { margin-bottom: 30px; }
.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--grey-200);
}
.error-links a { font-size: 14px; font-weight: 600; color: var(--grey-500); }
.error-links a:hover { color: var(--red); }

/* ---------- Category exclusivity ---------- */
.exclusivity-list { display: flex; flex-direction: column; gap: 15px; margin: 26px 0 32px; }
.exclusivity-list li { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; color: var(--navy); }
.exclusivity-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--red-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.exclusivity-icon svg { width: 17px; height: 17px; color: var(--red); }
.exclusivity-lead { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.exclusivity-note { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--grey-500); font-weight: 600; }
.exclusivity-note svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }
.exclusivity-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.exclusivity-visual { position: relative; }
.exclusivity-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.exclusivity-annotation {
  position: absolute;
  top: -112px;
  left: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.exclusivity-annotation-loop {
  position: relative;
  width: 190px;
  height: 80px;
}
.exclusivity-annotation-loop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.exclusivity-annotation-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-2deg);
}
.exclusivity-annotation-text span {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.15;
  color: var(--navy);
}
.exclusivity-annotation-text span.text-red { color: var(--red); }
.exclusivity-annotation-arrow {
  width: 32px;
  height: 40px;
  color: var(--navy);
  margin: -4px 0 0 38px;
}

.exclusivity-tooltip {
  position: absolute;
  right: 4%;
  bottom: -28px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--navy);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  max-width: 260px;
  box-shadow: var(--shadow-lg);
}
.exclusivity-tooltip-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(227, 6, 19, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.exclusivity-tooltip-icon svg { width: 16px; height: 16px; color: var(--red); }
.exclusivity-tooltip h5 { color: var(--white); font-size: 13.5px; margin-bottom: 4px; }
.exclusivity-tooltip p { color: rgba(255, 255, 255, 0.65); font-size: 11.5px; line-height: 1.5; margin: 0; }

@media (max-width: 960px) {
  .exclusivity-annotation { display: none; }
  .exclusivity-tooltip { position: static; max-width: none; margin-top: 16px; }
}

/* ---------- Category exclusivity board (legacy, superseded by real image above) ---------- */
.category-board {
  background: var(--bg);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.category-board-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--grey-200);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
}
.category-board-row:last-child { border-bottom: none; }
.category-board-row.is-reserved { background: var(--red-50); }

/* ---------- Coverage ---------- */
.coverage-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: -20px 0 48px;
  padding: 28px 0;
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
}
.coverage-feature { display: flex; align-items: flex-start; gap: 14px; }
.coverage-feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--grey-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.coverage-feature-icon svg { width: 20px; height: 20px; color: var(--navy); }
.coverage-feature strong { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--navy); margin-bottom: 3px; }
.coverage-feature span:not(.coverage-feature-icon) { display: block; font-size: 13px; color: var(--grey-500); line-height: 1.45; }

.coverage-layout { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; margin-bottom: 36px; }
.coverage-col-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 14px; }
.coverage-col-label-live { color: var(--success); }
.coverage-col-label-soon { color: var(--orange-ink); }
.coverage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.coverage-dot-live { background: var(--success); }
.coverage-dot-soon { background: var(--orange); }

/* Featured live card is deliberately taller than a soon-card: generous padding plus
   a much larger stat number (the primary visual element) carry the height, kept
   tight everywhere else so the extra content (3rd check, next-drop line) doesn't
   blow the card out — no hardcoded height, it's all padding/type-scale driven. */
.coverage-live-card { background: var(--success-50); border: 1px solid #BEEBD4; border-radius: var(--radius-lg); padding: 24px; }
.coverage-live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #BEEBD4; }
.coverage-live-head h3 { font-size: 19px; }
.coverage-live-head h3 a:hover { color: var(--red); }
.coverage-live-head .pill { line-height: 1.2; }
.coverage-live-stat { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.coverage-live-stat-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; }
.coverage-live-stat-icon svg { width: 19px; height: 19px; color: var(--success); }
.coverage-live-stat strong { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 34px; color: var(--navy); line-height: 1; letter-spacing: -0.01em; }
.coverage-live-stat span:not(.coverage-live-stat-icon) { display: block; font-size: 12.5px; line-height: 1.3; color: var(--coverage-ink-on-green); font-weight: 600; margin-top: 3px; }
.coverage-live-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.coverage-live-checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--navy); }
.coverage-live-checks svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; }
.coverage-book-btn { width: 100%; background: var(--success-ink); color: var(--white); box-shadow: 0 8px 20px rgba(15, 157, 88, 0.24); }
.coverage-book-btn:hover { background: #0a6c3a; transform: translateY(-1px); }
.coverage-next-drop { display: block; text-align: center; margin-top: 10px; font-size: 12px; line-height: 1.3; color: var(--coverage-ink-on-green); }

.coverage-soon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.coverage-soon-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.coverage-soon-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--grey-200); }
.coverage-soon-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.coverage-soon-head h4 { font-size: 14.5px; line-height: 1.3; }
.coverage-soon-head h4 a:hover { color: var(--red); }
.coverage-soon-head .pill { flex-shrink: 0; padding: 4px 10px; font-size: 10.5px; white-space: nowrap; }
.coverage-soon-stat { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.coverage-soon-stat-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--orange-50); display: flex; align-items: center; justify-content: center; }
.coverage-soon-stat-icon svg { width: 17px; height: 17px; color: var(--orange); }
.coverage-soon-stat strong { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 29px; color: var(--navy); line-height: 1; letter-spacing: -0.01em; }
.coverage-soon-stat span:not(.coverage-soon-stat-icon) { display: block; font-size: 12px; color: var(--grey-500); font-weight: 600; margin-top: 3px; }
.coverage-reserve-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 10px 14px;
  border: 1.5px solid var(--orange-ink);
  border-radius: var(--radius-sm);
  color: var(--orange-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.coverage-reserve-btn:hover, .coverage-reserve-btn:focus-visible { background: var(--orange-ink); color: var(--white); }

.coverage-register-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  flex-wrap: wrap;
}
.coverage-register-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--red-50); display: flex; align-items: center; justify-content: center; }
.coverage-register-icon svg { width: 20px; height: 20px; color: var(--red); }
.coverage-register-copy { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.coverage-register-copy strong { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--navy); }
.coverage-register-copy span { font-size: 13.5px; color: var(--grey-500); }
.coverage-register-banner .btn { flex-shrink: 0; }

@media (max-width: 980px) {
  .coverage-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .coverage-features { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .coverage-soon-grid { grid-template-columns: repeat(2, 1fr); }
  .coverage-register-banner { flex-direction: column; align-items: flex-start; text-align: left; }
  .coverage-register-banner .btn { width: 100%; }
}
@media (max-width: 480px) {
  .coverage-soon-grid { grid-template-columns: 1fr; }
}

/* ---------- Pricing ---------- */
.pricing-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 52px;
  color: var(--white);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
.pricing-card h3 { color: var(--white); font-size: 26px; margin-bottom: 10px; }
.pricing-card > div:first-child p { color: rgba(255,255,255,0.65); font-size: 15px; margin-bottom: 22px; }
.pricing-features { display: flex; flex-direction: column; gap: 12px; }
.pricing-features li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.pricing-features svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; }
.pricing-cta {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
}
.pricing-cta p { color: rgba(255,255,255,0.7); font-size: 13.5px; margin-bottom: 18px; }
.pricing-cta-eyebrow { font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; }
.pricing-options { display: flex; gap: 12px; margin-bottom: 18px; }
.pricing-option { flex: 1; padding: 14px 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.pricing-option-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.pricing-option-value { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--white); line-height: 1.2; }
.pricing-option-value span { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5); }
.pricing-option-value .pricing-option-save { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--red); background: rgba(255,255,255,0.9); padding: 2px 8px; border-radius: 999px; }

@media (max-width: 760px) {
  .pricing-card { grid-template-columns: 1fr; padding: 32px 26px; }
  .pricing-options { flex-direction: column; }
}

/* ---------- Final CTA ---------- */
.final-cta {
  background: linear-gradient(120deg, var(--red) 0%, #C4050F 100%);
  border-radius: var(--radius-lg);
  padding: 56px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.final-cta::after {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  top: -140px; right: -100px;
}
.final-cta h2 { color: var(--white); font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; max-width: 480px; }
.final-cta p { color: rgba(255,255,255,0.85); font-size: 15.5px; max-width: 460px; }
.final-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.final-cta .btn-primary { background: var(--white); color: var(--red); box-shadow: none; }
.final-cta .btn-primary:hover { background: #FFF3F3; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.7); padding: 72px 0 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand img { height: 36px; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; max-width: 280px; color: rgba(255,255,255,0.55); }
.footer-social { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.footer-social a:hover { background: var(--red); color: var(--white); }
.footer-social svg { width: 17px; height: 17px; }
.footer-col h5 {
  font-family: var(--font-heading);
  color: var(--white);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14.5px; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stats-band { flex-direction: column; align-items: flex-start; }
}

/* ---------- Simple/placeholder page hero ---------- */
.page-hero { padding: 72px 0 56px; text-align: center; }
.page-hero .eyebrow { display: block; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 46px); max-width: 720px; margin: 0 auto 16px; }
.page-hero p { color: var(--grey-500); font-size: 17px; max-width: 560px; margin: 0 auto; }

.placeholder-panel {
  max-width: 700px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
}
.placeholder-panel .coming-soon-icon { margin-bottom: 22px; }
.placeholder-panel h2 { font-size: 24px; margin-bottom: 12px; }
.placeholder-panel p { color: var(--grey-500); font-size: 15.5px; margin-bottom: 26px; }
.placeholder-panel .btn-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Get Started form ---------- */
.gs-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: flex-start;
}
.gs-info-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.gs-info-card h3 { color: var(--white); font-size: 22px; margin-bottom: 14px; }
.gs-info-card p { color: rgba(255,255,255,0.65); font-size: 14.5px; margin-bottom: 26px; }
.gs-info-list { display: flex; flex-direction: column; gap: 16px; }
.gs-info-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; font-weight: 600; }
.gs-info-list svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; }
.gs-info-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 14.5px;
}
.gs-info-contact svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; }
.gs-info-contact a { color: var(--white); font-weight: 700; text-decoration: none; }
.gs-info-contact a:hover { text-decoration: underline; }
.gs-info-contact span { display: block; color: rgba(255,255,255,0.55); font-size: 12.5px; font-weight: 500; margin-bottom: 2px; }

.form-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 7px; font-family: var(--font-heading); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--grey-200);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy);
}
.field textarea { resize: vertical; min-height: 100px; }

.field-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-error {
  display: none;
  color: var(--red);
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 6px;
}
.field-error.is-visible { display: block; }
.field.has-error input,
.field.has-error select {
  border-color: var(--red);
}
#form-error.is-visible { text-align: center; margin: -4px 0 14px; font-size: 13.5px; }

.form-note { font-size: 12.5px; color: var(--grey-400); margin-top: 14px; text-align: center; }
.form-success {
  display: none;
  text-align: center;
  padding: 20px 0;
}
.form-success.is-visible { display: block; }
.form-success svg { width: 44px; height: 44px; color: var(--success); margin: 0 auto 14px; }
.form-success h3 { font-size: 20px; margin-bottom: 8px; }
.form-success p { color: var(--grey-500); font-size: 14.5px; }

@media (max-width: 900px) {
  .gs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- Dev placeholder banner ---------- */
.dev-note {
  max-width: var(--container);
  margin: 0 auto 8px;
  padding: 0 24px;
}
.dev-note span {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: #92600A;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* ---------- About page ---------- */
.about-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.about-eyebrow span { width: 28px; height: 2px; background: var(--red); display: block; }

.about-feature-underline {
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  margin-bottom: 12px;
}

/* -- hero split (text + letterbox photo) -- */
.about-hero-section { text-align: left; }
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.about-hero-grid .about-eyebrow { justify-content: flex-start; }
.about-hero-grid h1 { max-width: 560px; margin: 0 0 16px; }
.about-hero-grid p { max-width: 480px; margin: 0; }
.about-hero-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-md);
  aspect-ratio: 760 / 507;
}
.about-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* -- 3 feature card -- */
.about-features-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px 8px;
}
.about-features-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.about-feature { padding: 0 28px; border-left: 1px solid var(--grey-200); }
.about-feature:first-child { border-left: none; }
.about-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.about-feature-icon svg { width: 24px; height: 24px; }
.about-feature-icon--red { background: var(--red-50); color: var(--red); }
.about-feature-icon--blue { background: var(--blue-50); color: var(--blue); }
.about-feature-icon--green { background: var(--success-50); color: var(--success); }
.about-feature h4 { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--navy); margin-bottom: 8px; }
.about-feature p { font-size: 13.5px; color: var(--grey-500); line-height: 1.6; }
.about-feature-badge { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.about-feature-badge img { width: 34px; height: 34px; object-fit: contain; }
.about-feature-badge-text { display: flex; flex-direction: column; line-height: 1.3; }
.about-feature-badge-text span { font-size: 11px; color: var(--grey-400); }
.about-feature-badge-text strong { font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: var(--red); }

/* -- why-us / coverage two-col -- */
.about-split-equal { grid-template-columns: 1fr 1fr; align-items: stretch; }
.about-panel { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 32px; height: 100%; }
.about-panel h2 { font-family: var(--font-heading); font-weight: 800; color: var(--navy); }

.about-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 16px; margin-top: 8px; }
.about-why-divider { grid-column: 1 / -1; height: 1px; background: var(--grey-200); margin: 2px 0; }
.about-why-item { text-align: center; }
.about-why-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--red-50);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.about-why-icon svg { width: 21px; height: 21px; }
.about-why-item span { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; color: var(--navy); line-height: 1.35; }

.about-print-card { background: var(--red-50); border-radius: var(--radius-md); padding: 28px 24px; margin-top: 28px; text-align: center; }
.about-print-card h3 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.about-print-card > p { color: var(--grey-500); font-size: 13.5px; margin-bottom: 22px; }
.about-print-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.about-print-stat svg { width: 22px; height: 22px; color: var(--red); margin: 0 auto 8px; }
.about-print-stat .value { font-family: var(--font-heading); font-weight: 800; font-size: 25px; color: var(--red); margin-bottom: 6px; }
.about-print-stat p { font-size: 11px; color: var(--grey-500); line-height: 1.4; }
.about-print-roi { display: flex; align-items: center; gap: 14px; background: var(--white); border-radius: var(--radius-sm); padding: 14px 18px; text-align: left; }
.about-print-roi-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--red-50); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px; }
.about-print-roi p { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.about-print-roi .fact-source { font-size: 11px; color: var(--grey-400); }

.about-trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.about-trust-item { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.about-trust-item svg { width: 20px; height: 20px; color: var(--red); flex-shrink: 0; }

.about-map-visual { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 20px; background: var(--bg); border: 1px solid var(--grey-200); }
.about-map-visual img { display: block; width: 100%; height: auto; }

.about-coverage-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 18px; }
.about-coverage-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--navy); }
.about-coverage-list li svg { width: 15px; height: 15px; color: var(--red); flex-shrink: 0; }

.about-map-note { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--grey-500); border-top: 1px solid var(--grey-200); padding-top: 16px; }
.about-map-note svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; }

/* -- our journey banner -- */
.journey-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px 40px 40px;
}
.journey-head { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.journey-head-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red-50);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.journey-head-icon svg { width: 16px; height: 16px; }
.journey-head h2 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--navy); margin-bottom: 6px; }

.journey-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; position: relative; }
.journey-steps::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  height: 2px;
  background-image: linear-gradient(to right, var(--grey-200) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  background-repeat: repeat-x;
}
.journey-step { text-align: center; position: relative; }
.journey-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-sm);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}
.journey-step-icon svg { width: 20px; height: 20px; }
.journey-step h4 { font-family: var(--font-heading); font-weight: 800; font-size: 13.5px; color: var(--navy); margin-bottom: 6px; }
.journey-step p { font-size: 11.5px; color: var(--grey-500); line-height: 1.45; }

@media (max-width: 1080px) {
  .journey-steps { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
  .journey-steps::before { display: none; }
}
@media (max-width: 640px) {
  .journey-card { padding: 28px 20px 32px; }
  .journey-steps { grid-template-columns: 1fr; gap: 28px; }
}

/* -- team card extras -- */
.team-card .team-role { color: var(--red); font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.team-role-underline { display: block; width: 24px; height: 2px; background: var(--red); margin: 0 auto 14px; }
.team-card .team-quote { font-style: italic; color: var(--grey-500); font-size: 13.5px; line-height: 1.6; }

/* -- bottom CTA banner -- */
.about-cta-banner {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.about-cta-left { display: flex; align-items: center; gap: 18px; flex: 1 1 320px; }
.about-cta-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.about-cta-icon svg { width: 26px; height: 26px; }
.about-cta-left h4 { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--white); margin-bottom: 4px; }
.about-cta-left p { font-size: 13.5px; color: rgba(255,255,255,0.7); max-width: 380px; }
.about-cta-mid { display: flex; gap: 24px; flex-wrap: wrap; }
.about-cta-fact { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; }
.about-cta-fact svg { width: 18px; height: 18px; color: rgba(255,255,255,0.55); flex-shrink: 0; }

@media (max-width: 900px) {
  .about-features-row { grid-template-columns: 1fr; }
  .about-feature { border-left: none; border-top: 1px solid var(--grey-200); padding: 24px 4px 0; margin-top: 20px; }
  .about-feature:first-child { border-top: none; padding-top: 0; margin-top: 0; }
  .about-split-equal { grid-template-columns: 1fr; }
  .about-cta-banner { flex-direction: column; align-items: flex-start; }
  .about-cta-banner .btn { width: 100%; justify-content: center; }
}
@media (max-width: 620px) {
  .about-why-grid { grid-template-columns: repeat(2, 1fr); }
  .about-why-divider { display: none; }
  .about-coverage-list { grid-template-columns: 1fr; }
  .about-print-stats { grid-template-columns: repeat(2, 1fr); }
  .about-trust-row { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Cookie Consent (assets/js/consent.js builds the markup below at runtime —
   these rules exist site-wide since the banner/modal can appear on any page)
   ========================================================================== */

/* ---------- Footer "Privacy & Cookies" / "Cookie Settings" row ---------- */
.footer-legal { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; width: 100%; }
.footer-legal a { color: rgba(255,255,255,0.45); }
.footer-legal a:hover { color: var(--white); }
.footer-cookie-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,0.45);
  font: inherit;
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.footer-cookie-btn:hover { color: var(--white); }

/* ---------- Consent banner ---------- */
.consent-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  max-width: 960px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--grey-200);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.consent-banner.is-visible { transform: translateY(0); opacity: 1; }
.consent-banner-text { flex: 1 1 320px; min-width: 240px; }
.consent-banner-text h2 { font-size: 17px; margin-bottom: 6px; }
.consent-banner-text p { font-size: 14px; color: var(--grey-500); line-height: 1.55; }
.consent-banner-text a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.consent-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.consent-banner-actions .btn { padding: 12px 20px; font-size: 14px; white-space: nowrap; }

/* Accept All / Reject Non-Essential / Save Preferences share this class so all
   consent decisions carry equal visual weight — deliberately neither filled-red
   (the site's usual "go" CTA colour) nor styled to look more clickable than the
   other. "Cookie Settings" (banner) stays on .btn-secondary, which is visually
   lighter than this pairing, since opening the preferences panel isn't itself a
   consent decision. */
.consent-btn-equal {
  background: var(--white);
  color: var(--navy);
  border-color: var(--navy);
}
.consent-btn-equal:hover { background: var(--navy); color: var(--white); }

@media (max-width: 640px) {
  .consent-banner { left: 12px; right: 12px; bottom: 12px; padding: 20px; flex-direction: column; align-items: stretch; gap: 16px; }
  .consent-banner-actions { flex-direction: column; }
  .consent-banner-actions .btn { width: 100%; }
}

/* ---------- Cookie preferences modal ---------- */
.consent-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 26, 56, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.consent-modal-overlay.is-visible { opacity: 1; visibility: visible; }
.consent-modal {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 32px;
}
.consent-modal h2 { font-size: 22px; margin-bottom: 8px; padding-right: 32px; }
.consent-modal > p { font-size: 14.5px; color: var(--grey-500); margin-bottom: 24px; line-height: 1.6; }
.consent-modal > p a { color: var(--red); font-weight: 600; }

.consent-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--grey-200);
}
.consent-category:first-of-type { border-top: none; padding-top: 0; }
.consent-category-info h3 { font-size: 15px; margin-bottom: 4px; color: var(--navy); font-family: var(--font-heading); font-weight: 700; }
.consent-category-info p { font-size: 13.5px; color: var(--grey-500); line-height: 1.55; }

.consent-switch { position: relative; flex-shrink: 0; width: 44px; height: 26px; margin-top: 2px; }
.consent-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.consent-switch-track {
  position: absolute;
  inset: 0;
  background: var(--grey-200);
  border-radius: var(--radius-full);
  transition: background-color 0.15s ease;
  pointer-events: none;
}
.consent-switch-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}
.consent-switch input:checked ~ .consent-switch-track { background: var(--red); }
.consent-switch input:checked ~ .consent-switch-track::before { transform: translateX(18px); }
.consent-switch input:disabled { cursor: not-allowed; }
.consent-switch input:disabled ~ .consent-switch-track { background: var(--success); opacity: 0.55; }
.consent-switch input:focus-visible ~ .consent-switch-track { outline: 2px solid var(--navy); outline-offset: 2px; }

.consent-modal-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.consent-modal-actions .btn { flex: 1 1 auto; padding: 13px 20px; font-size: 14.5px; }

.consent-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 8px;
  color: var(--grey-500);
  cursor: pointer;
  border-radius: var(--radius-full);
  line-height: 0;
}
.consent-modal-close svg { width: 18px; height: 18px; }
.consent-modal-close:hover { background: var(--grey-100); color: var(--navy); }

@media (max-width: 480px) {
  .consent-modal { padding: 24px; }
  .consent-modal-actions { flex-direction: column; }
}

/* ---------- Legal content pages ----------
   Shared pattern for every legal document on the site (Cookie Policy first;
   Privacy Policy / Website Terms / Advertiser Terms should reuse this same
   set of classes rather than introducing new ones). ---------- */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-updated { font-size: 13px; color: var(--grey-400); margin-bottom: 32px; }
.legal-content h2 { font-size: clamp(20px, 2.4vw, 24px); margin: 44px 0 14px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { font-size: 16.5px; margin: 22px 0 8px; color: var(--navy); }
.legal-content p { font-size: 15px; color: var(--grey-500); line-height: 1.7; margin-bottom: 14px; }
.legal-content ul { margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.legal-content li { font-size: 15px; color: var(--grey-500); line-height: 1.6; padding-left: 20px; position: relative; }
.legal-content li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.legal-content a { color: var(--red); font-weight: 600; }
.legal-content .pill { margin: 4px 0 12px; }
/* Inline trigger for the existing cookie-preferences mechanism (data-open-cookie-settings,
   wired sitewide in consent.js) — reads identically to a normal legal-content link
   rather than looking like a form control, since it sits mid-sentence in body copy. */
.legal-inline-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--red); font-weight: 600; cursor: pointer; }
.legal-table-wrap { overflow-x: auto; margin: 8px 0 28px; border: 1px solid var(--grey-200); border-radius: var(--radius-md); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--grey-200); vertical-align: top; color: var(--grey-500); }
.legal-table tr:last-child td { border-bottom: none; }
.legal-table th { font-family: var(--font-heading); color: var(--navy); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--grey-100); }

/* Effective/Last Updated dates, shown under the H1 on every legal page */
.legal-dates { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; color: var(--grey-500); }
.legal-dates strong { color: var(--navy); font-family: var(--font-heading); font-weight: 700; }
.legal-dates-divider { color: var(--grey-400); }

/* Reusable company/contact details block — used for "who we are" and "contact
   us" style sections on any legal page */
.legal-info-block { background: var(--grey-100); border-radius: var(--radius-md); padding: 20px 24px; margin: 16px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.legal-info-block dt { font-family: var(--font-heading); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); }
.legal-info-block dd { margin: 3px 0 0; font-size: 14.5px; color: var(--grey-500); }
.legal-info-block a { color: var(--red); font-weight: 600; }

/* Compact "on this page" contents block for long legal documents (currently
   only the Advertising Agreement is long enough to need one). Plain CSS
   multi-column list, no JS — reuses the same info-block tint/radius. */
.legal-toc { background: var(--grey-100); border-radius: var(--radius-md); padding: 20px 24px; margin: 0 0 32px; }
.legal-toc ol { columns: 2; column-gap: 28px; margin: 0; padding: 0; list-style: none; display: block; }
.legal-toc li { font-size: 14px; color: var(--grey-500); line-height: 1.9; break-inside: avoid; padding-left: 0; }
.legal-toc li::before { content: none; }
.legal-toc a { color: var(--navy); font-weight: 600; }
.legal-toc a:hover { color: var(--red); }
@media (max-width: 600px) {
  .legal-toc ol { columns: 1; }
}

/* ---------- Screen-reader-only utility ---------- */
.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;
}