/* ==========================================================================
   Park House Surgery — Design System (Green & Cream, Editorial)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--primary-dark); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Design tokens — NHS Blue, GRH-aligned editorial */
:root {
  --primary: #005EB8;          /* NHS Blue */
  --primary-dark: #003D7A;     /* Deep navy */
  --primary-darker: #001F3F;   /* Very deep navy */
  --primary-light: #E8F1FB;    /* Pale blue tint */
  --primary-mid: #1E5F9E;
  --bright-blue: #2C8FD7;
  --accent: #BE185D;           /* Deep rose pink — confident, NHS-friendly */
  --accent-warm: #9D174D;
  --accent-light: #FCE7F3;
  --green: #007F3B;
  --green-light: #E5F4EC;
  --emergency: #DA291C;
  --emergency-light: #FCEAE9;
  --pink: #AE2573;
  --bg: #FFFFFF;
  --bg-tint: #F4F8FC;          /* Very pale blue */
  --surface: #FFFFFF;
  --surface-alt: #EDF3FA;
  --text: #0B1E2E;             /* Deep navy-black */
  --text-body: #3D4F5C;
  --text-muted: #6F7B85;
  --border: #DDE5EC;
  --border-strong: #B0BCC8;
  --focus: #BE185D;
  --shadow-sm: 0 1px 2px rgba(11, 30, 46, 0.06);
  --shadow: 0 8px 28px rgba(0, 61, 122, 0.10);
  --shadow-lg: 0 28px 72px rgba(0, 61, 122, 0.18);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 18px;
  --container: 1200px;
  --header-h: 76px;
}

/* Welsh language toggle button (header) */
.lang-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 0.5rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.lang-toggle:hover,
.lang-toggle:focus-visible {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Machine-translation notice (top of page, when Welsh active) */
.translate-notice {
  background: var(--accent-light);
  color: var(--text);
  text-align: center;
  padding: 0.55rem 1rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--border);
}
.translate-notice a {
  color: var(--primary-dark);
  font-weight: 600;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 1rem;
  background: var(--primary-dark);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  z-index: 1000;
}
.skip-link:focus { top: 1rem; color: white; }

/* Typography — confident sans throughout */
h1, h2, h3, h4 {
  color: var(--text);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: clamp(1.875rem, 3.5vw, 2.625rem); margin-top: 1.5em; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
h3 { font-size: 1.375rem; margin-top: 1.25em; font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 0.75rem; margin-top: 1em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
p { margin: 0 0 1em; color: var(--text-body); }
strong { color: var(--text); font-weight: 700; }
ul, ol { color: var(--text-body); padding-left: 1.25rem; }
li { margin-bottom: 0.35em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Layout */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Emergency banner */
.emergency-bar {
  background: var(--primary-dark);
  color: white;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  border-bottom: 4px solid var(--emergency);
}
.emergency-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.emergency-bar a { color: white; font-weight: 600; }
.emergency-bar strong { color: white; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--text);
}
.brand:hover { color: var(--text); }
.brand-mark {
  width: 48px; height: 48px;
  border-radius: 6px;
  background: var(--primary);
  display: grid; place-items: center;
  color: white;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(0, 61, 122, 0.32);
}
.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-name strong { font-size: 1.125rem; font-weight: 700; }
.brand-name span { font-size: 0.8125rem; color: var(--text-muted); }

/* Nav */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text);
}
.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  display: block;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-body);
}
.primary-nav a:hover { background: var(--surface-alt); color: var(--primary-dark); }
.primary-nav a.is-active {
  background: var(--primary);
  color: white;
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.4rem; }
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: none;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul {
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.125rem;
  }
  .primary-nav a { padding: 0.85rem 1rem; }
}

/* Hero — big NHS blue */
.hero {
  background:
    radial-gradient(ellipse at 80% -10%, rgba(65, 182, 230, 0.42) 0%, transparent 55%),
    radial-gradient(ellipse at -10% 90%, rgba(190, 24, 93, 0.24) 0%, transparent 50%),
    linear-gradient(160deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
  color: white;
  padding: 4.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.06)'/></svg>");
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero h1, .hero h2, .hero h3 { color: white; }
.hero p { color: rgba(255,255,255,0.92); }
.hero .lede {
  font-size: 1.1875rem;
  max-width: 56ch;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.005em;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
}

/* Hero photo (right side) */
.hero-photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 31, 63, 0.44), 0 0 0 1px rgba(255,255,255,0.08);
  aspect-ratio: 4 / 3;
  background: var(--primary-darker);
  margin: 0;
  transform: rotate(0.3deg);
  transition: transform 0.45s ease;
}
.hero-photo:hover { transform: rotate(0deg) scale(1.005); }
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-photo figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(0, 31, 63, 0.88);
  color: white;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
}

/* Hero meta stat strip */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.hero-meta > div { display: flex; flex-direction: column; }
.hero-meta strong {
  display: block;
  font-weight: 800;
  font-size: 1.875rem;
  color: white;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero-meta span {
  font-size: 0.7125rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.80);
  font-weight: 600;
  margin-top: 0.35rem;
}

/* Section eyebrow (used above h2) */
.section-eyebrow {
  display: inline-block;
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.7em;
}

/* Section title with decorative rule underneath */
.section-title-rule {
  position: relative;
  margin-bottom: 0.5em;
}
.section-title-rule::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--primary);
  margin-top: 0.55em;
  border-radius: 2px;
}

/* Locations strip — cleaner card treatment */
.locations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px) { .locations { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.locations .surgery {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 61, 122, 0.08);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.locations .surgery:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 56px rgba(0, 61, 122, 0.14);
}
.locations .surgery.branch { border-top-color: var(--accent); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.16);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(8px);
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(190, 24, 93, 0.28);
}
.hero h1 { margin-bottom: 0.4em; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 94, 184, 0.30);
}
.btn-primary:hover { background: var(--primary-dark); color: white; box-shadow: 0 6px 18px rgba(0, 61, 122, 0.38); }
.btn-secondary {
  background: white;
  color: var(--primary-dark);
  border-color: white;
}
.btn-secondary:hover { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary-light); }
.btn-accent {
  background: var(--accent);
  color: white;
  box-shadow: 0 6px 18px rgba(190, 24, 93, 0.34);
}
.btn-accent:hover { background: var(--accent-warm); color: white; box-shadow: 0 8px 24px rgba(157, 23, 77, 0.40); }
.btn-outline {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.6);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); color: white; border-color: white; }
.btn-ghost {
  color: var(--primary-dark);
  background: transparent;
}
.btn-ghost:hover { background: var(--primary-light); color: var(--primary-dark); }
.btn-lg { padding: 1.1rem 1.75rem; font-size: 1rem; }

/* Hero card stack */
.hero-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 540px) { .hero-cards { grid-template-columns: 1fr 1fr; } }
.hero-card {
  background: white;
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--primary);
}
.hero-card.branch::before { background: var(--accent); }
.hero-card h3 { margin: 0.25rem 0 0.15em; font-size: 1.125rem; color: var(--text); }
.hero-card address {
  font-style: normal;
  color: var(--text-body);
  font-size: 0.9375rem;
  margin: 0 0 0.65rem;
  line-height: 1.45;
}
.hero-card .tel {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-dark);
  text-decoration: none;
  display: inline-block;
  letter-spacing: -0.01em;
}
.hero-card .tel:hover { color: var(--primary); }
.hero-card .tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-dark);
}
.hero-card.branch .tag { background: var(--accent-light); color: var(--accent-warm); }

/* Page header (for non-home pages) */
.page-header {
  background:
    radial-gradient(ellipse at 95% 0%, rgba(65, 182, 230, 0.32) 0%, transparent 60%),
    linear-gradient(170deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
  color: white;
  padding: 3rem 0 2.75rem;
}
.page-header h1, .page-header h2 { color: white; margin-bottom: 0.25em; }
.page-header p { color: rgba(255,255,255,0.92); max-width: 64ch; margin: 0; font-size: 1.0625rem; }
.breadcrumb {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.85rem;
}
.breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.breadcrumb a:hover { color: white; text-decoration: underline; }

/* Section spacing */
section { padding: 4rem 0; }
section.tight { padding: 2.5rem 0; }
section.bg-tint { background: var(--bg-tint); }
section.bg-blue { background: var(--primary-dark); color: white; }
section.bg-blue h2, section.bg-blue h3 { color: white; }
section.bg-blue p { color: rgba(255,255,255,0.92); }
.section-title { margin-top: 0; }

/* Cards */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; }

/* Grid */
.grid {
  display: grid;
  gap: 1.25rem;
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* Surgery (location) card */
.surgery {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.surgery-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--primary-dark);
  position: relative;
}
.surgery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.surgery:hover .surgery-photo img { transform: scale(1.03); }
.surgery-body { padding: 1.75rem; }
.surgery-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
.surgery-tag.main { background: var(--primary-light); color: var(--primary-dark); }
.surgery-tag.branch { background: var(--accent-light); color: var(--accent-warm); }
.surgery h3 { margin: 0 0 0.25em; font-size: 1.5rem; }
.surgery address {
  font-style: normal;
  color: var(--text-body);
  margin-bottom: 1rem;
}
.surgery-tel {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--primary-dark);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.surgery-tel:hover { color: var(--primary); }
.surgery-hours { font-size: 0.9375rem; }
.surgery-hours dt {
  font-weight: 700;
  color: var(--text);
}
.surgery-hours dd {
  margin: 0 0 0.5em;
  color: var(--text-body);
}
.surgery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Quick actions — Clarence-style */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 540px) { .quick-actions { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .quick-actions { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.qa-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
}
.qa-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--primary);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.qa-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
  color: var(--text);
}
.qa-card:hover::before { transform: scaleX(1); }
.qa-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: grid; place-items: center;
  font-size: 1.4rem;
  margin-bottom: 0.85rem;
}
.qa-card h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.25em;
  color: var(--text);
}
.qa-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 0.85rem;
  flex: 1;
}
.qa-card .arrow {
  display: inline-block;
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 0.875rem;
}
.qa-card .arrow::after { content: " →"; transition: transform 0.2s ease; display: inline-block; }
.qa-card:hover .arrow::after { transform: translateX(4px); }

/* Triage CTA banner */
.triage-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--bright-blue) 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 720px) {
  .triage-banner { grid-template-columns: 1fr auto; gap: 2rem; padding: 2.25rem 2.5rem; }
}
.triage-banner h2 {
  color: white;
  margin: 0 0 0.4em;
  font-size: 1.625rem;
}
.triage-banner p { color: rgba(255,255,255,0.95); margin: 0; }

/* Callout — default is a saturated branded card (primary-light is typically
   a mid-tone, not a pale tint), so text needs to be light. The variant
   classes use pale tints, so their text falls back to dark. */
.callout {
  background: var(--primary-light);
  color: var(--paper);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.callout h2, .callout h3, .callout h4 { color: var(--paper); margin-top: 0; }
.callout p, .callout li { color: rgba(255, 255, 255, 0.92); }
.callout a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.callout a:hover { color: var(--paper); opacity: 0.85; }
.callout.warning {
  background: var(--emergency-light);
  border-left-color: var(--emergency);
  color: var(--ink);
}
.callout.info {
  background: var(--accent-light);
  border-left-color: var(--accent-warm);
  color: var(--ink);
}
.callout.success {
  background: var(--green-light);
  border-left-color: var(--green);
  color: var(--ink);
}
.callout.warning h2, .callout.warning h3, .callout.warning h4,
.callout.info h2, .callout.info h3, .callout.info h4,
.callout.success h2, .callout.success h3, .callout.success h4 { color: var(--ink); }
.callout.warning p, .callout.warning li,
.callout.info p, .callout.info li,
.callout.success p, .callout.success li { color: var(--ink); opacity: 0.85; }
.callout.warning a, .callout.info a, .callout.success a { color: var(--primary); }
.callout p:last-child { margin-bottom: 0; }

/* Activity data dashboard */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: white;
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem;
  border: 1px solid var(--border);
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.stat .value {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 0.2em;
}
.stat .label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* News (collapsible notices) */
.notice {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
}
.notice summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-light);
  transition: background 0.15s ease;
}
.notice summary:hover { background: #DCEAF7; }
.notice summary::-webkit-details-marker { display: none; }
.notice summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--primary);
  font-weight: 400;
}
.notice[open] summary::after { content: "−"; }
.notice-body {
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border);
}
.notice-body p:last-child { margin-bottom: 0; }

/* Article layout */
.article {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 3rem 0 4rem;
}
@media (min-width: 960px) {
  .article { grid-template-columns: minmax(0, 1fr) 280px; }
}
.article h2:first-child { margin-top: 0; }
.article-body { min-width: 0; }
.article-body > section { padding: 0; margin-bottom: 2.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.article-body > section:last-child { margin-bottom: 0; }

/* Sidebar */
.sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  align-self: start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--surface);
}
.sidebar h4 {
  margin: 0 0 0.5em;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
}
.sidebar ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.sidebar li { margin: 0; }
.sidebar a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-body);
  font-size: 0.9375rem;
}
.sidebar a:hover { background: white; color: var(--primary-dark); }
.sidebar a.is-active {
  background: white;
  color: var(--primary-dark);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--primary);
  padding-left: calc(0.75rem - 3px);
}

/* Staff cards */
.staff-group { margin-bottom: 2.5rem; }
.staff-group h2 { margin-top: 0; }
.staff-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 720px) { .staff-list { grid-template-columns: 1fr 1fr; } }
.staff-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
  background: var(--bg);
  border-left: 3px solid var(--primary);
  transition: box-shadow 0.18s ease, transform 0.08s ease;
}
.staff-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.staff-card .name {
  display: block;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25em;
  font-size: 1rem;
}
.staff-card .quals {
  display: block;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}
.staff-card .role {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

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

/* Contact list */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 720px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* Getting here — parking, accessibility, transport */
.getting-here-block {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.getting-here-block:last-child { border-bottom: 0; }
.getting-here-block h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.05rem;
}
.getting-here-block p { margin: 0.25rem 0; }
.getting-here-block .muted { font-size: 0.92rem; }
.bus-stops {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}
.bus-stops li {
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--border);
}
.bus-stops li:last-child { border-bottom: 0; }
.contact-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  border-top: 4px solid var(--primary);
}
.contact-item h3 { margin-top: 0; font-size: 1.125rem; }
.contact-item .big { font-size: 1.375rem; font-weight: 700; color: var(--primary-dark); text-decoration: none; word-break: break-word; }
.contact-item .big:hover { color: var(--primary); }

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}
.data-table th {
  background: var(--primary);
  color: white;
  font-weight: 700;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:nth-child(even) td { background: var(--surface); }

/* Footer */
.site-footer {
  background: var(--primary-dark);
  color: rgba(255,255,255,0.85);
  padding: 3.5rem 0 1.5rem;
  margin-top: 4rem;
}
.site-footer h4 {
  color: white;
  margin: 0 0 0.85em;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.site-footer .brand-name strong { color: white; }
.site-footer .brand-name span { color: rgba(255,255,255,0.75); }
.site-footer .brand-mark { background: white; color: var(--primary-dark); }
.site-footer p { color: rgba(255, 255, 255, 0.85); }
.site-footer strong { color: white; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
@media (min-width: 1080px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.5em; }
.footer-grid a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 0.9375rem;
}
.footer-grid a:hover { color: white; text-decoration: underline; }
.footer-grid strong { color: white; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}
.footer-bottom a { color: rgba(255,255,255,0.85); }

/* Chatbot widget */
.chat-fab {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  background: var(--primary);
  color: white;
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.35rem;
  font-weight: 700;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 61, 122, 0.42);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease;
}
.chat-fab:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 61, 122, 0.52); }
.chat-fab svg { width: 20px; height: 20px; }
.chat-panel {
  position: fixed;
  bottom: 5.5rem;
  right: 1.25rem;
  width: min(380px, calc(100vw - 2.5rem));
  max-height: 70vh;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel.is-open { display: flex; }
.chat-head {
  background: var(--primary);
  color: white;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-head strong { color: white; display: block; font-size: 1rem; }
.chat-head span { font-size: 0.8125rem; color: rgba(255,255,255,0.85); }
.chat-close {
  background: transparent;
  border: 0;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.chat-iconbtn {
  background: transparent;
  border: 0;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border-radius: 6px;
  margin-left: 0.25rem;
  transition: background 0.15s ease;
  font-family: inherit;
}
.chat-iconbtn:hover, .chat-iconbtn:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  outline: none;
}
.chat-head { gap: 0.25rem; }
.chat-head > div { flex: 1; }
.chat-body {
  padding: 1rem 1rem 0.5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 240px;
  max-height: 50vh;
  background: var(--surface);
}
.chat-body p { margin: 0 0 0.5em; font-size: 0.9375rem; line-height: 1.5; }
.chat-body p:last-child { margin-bottom: 0; }
.chat-body a { color: var(--primary-dark); }

/* Message bubbles */
.chat-messages .msg {
  display: flex;
  margin-bottom: 0.85rem;
}
.chat-messages .msg-user { justify-content: flex-end; }
.chat-messages .msg-bot { justify-content: flex-start; }
.chat-messages .bubble {
  max-width: 86%;
  padding: 0.65rem 0.9rem;
  border-radius: 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(33,43,50,0.08);
}
.chat-messages .msg-user .bubble {
  background: var(--primary);
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-messages .msg-user .bubble a { color: white; text-decoration: underline; }
.chat-messages .msg-bot .bubble {
  background: white;
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-messages .bubble.error {
  background: var(--emergency-light);
  border-color: #F4C7C4;
  color: var(--text);
}
.chat-messages .bubble ul, .chat-messages .bubble ol {
  margin: 0.4em 0 0.4em 1.1em;
  padding: 0;
}
.chat-messages .bubble li { margin-bottom: 0.15em; }
.chat-messages .bubble code {
  background: rgba(0,0,0,0.06);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-size: 0.875em;
}

/* Greeting chips */
.chat-messages .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.chat-messages .chip {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--text-body);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chat-messages .chip:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.chat-messages .muted-small {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0.25rem;
}

/* Typing indicator */
.chat-messages .bubble.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 1.5em;
}
.chat-messages .bubble.typing span {
  width: 6px; height: 6px;
  background: var(--primary);
  border-radius: 50%;
  display: inline-block;
  animation: chatDot 1.3s infinite ease-in-out;
}
.chat-messages .bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-messages .bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Input form */
.chat-input {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  background: white;
  border-top: 1px solid var(--border);
}
.chat-input input {
  flex: 1;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  outline: none;
  background: var(--surface);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.chat-input input:focus {
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 94, 184, 0.20);
}
.chat-input input:disabled { opacity: 0.6; cursor: wait; }
.chat-input button {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.06s ease;
}
.chat-input button:hover { background: var(--primary-dark); }
.chat-input button:disabled { background: var(--border-strong); cursor: wait; }
.chat-input button svg { width: 18px; height: 18px; }

.chat-foot {
  padding: 0.6rem 1rem;
  background: white;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.chat-foot a { color: var(--text-muted); }

/* Utilities */
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.lead { font-size: 1.125rem; color: var(--text-body); }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.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;
}

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

/* ==========================================================================
   Scrollytelling — reveal animations, counters, scroll progress, marquee
   ========================================================================== */

/* Thin gradient bar at top of viewport that fills as you scroll */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  z-index: 60;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* Reveal-on-scroll base */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-scale { transform: scale(0.94); opacity: 0; }
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="100"] { transition-delay: 0.10s; }
.reveal[data-delay="200"] { transition-delay: 0.20s; }
.reveal[data-delay="300"] { transition-delay: 0.30s; }
.reveal[data-delay="400"] { transition-delay: 0.40s; }
.reveal[data-delay="500"] { transition-delay: 0.50s; }
.reveal[data-delay="600"] { transition-delay: 0.60s; }

/* Marquee band — slow, elegant, between sections */
.marquee {
  background: var(--primary-darker);
  color: white;
  overflow: hidden;
  position: relative;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--primary-darker) 0%, transparent 100%); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--primary-darker) 0%, transparent 100%); }
.marquee-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: marquee-scroll 60s linear infinite;
  padding: 1.1rem 0;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.marquee-track > span {
  flex-shrink: 0;
  padding: 0 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
}
.marquee-track .dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Mouse-following glow inside hero */
.hero { isolation: isolate; }
.hero-glow {
  position: absolute;
  pointer-events: none;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190,24,93,0.18) 0%, rgba(190,24,93,0) 60%);
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  opacity: 0;
  z-index: 0;
  filter: blur(8px);
}
.hero:hover .hero-glow { opacity: 1; }

/* Hero photo gentle float (subtle, not gimmicky) */
.hero-photo {
  animation: hero-float 9s ease-in-out infinite;
}
@keyframes hero-float {
  0%, 100% { transform: rotate(0.3deg) translateY(0); }
  50%      { transform: rotate(-0.2deg) translateY(-8px); }
}

/* More expressive card hover */
.qa-card, .feature, .step, .surgery, .stat-item {
  transition:
    transform 0.32s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.32s ease,
    border-color 0.25s ease;
}
.qa-card:hover { transform: translateY(-5px) scale(1.01); }
.feature:hover { transform: translateY(-4px); }

/* Slight zoom on the hero photo wrapper image on hover */
.hero-photo:hover { animation-play-state: paused; }
.hero-photo img { transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.hero-photo:hover img { transform: scale(1.04); }

/* Reduced-motion overrides — strictly respect user preference */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee-track { animation: none !important; }
  .hero-photo { animation: none !important; }
  .scroll-progress { display: none !important; }
  .qa-card:hover, .feature:hover, .surgery:hover { transform: none !important; }
  .hero-glow { display: none !important; }
}

/* ==========================================================================
   GRH-style components: stats strip, feature trio, numbered steps, pull quote
   ========================================================================== */

/* Stats strip — clean horizontal band below hero */
.stats-strip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 2.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
  box-shadow: var(--shadow);
  position: relative;
  margin-top: -3rem;
  z-index: 2;
}
@media (min-width: 640px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .stats-strip { grid-template-columns: repeat(4, 1fr); padding: 2.25rem 2.75rem; } }
.stats-strip .stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-left: none;
  padding-left: 0;
}
.cpage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 820px) { .cpage-layout { grid-template-columns: 1fr; } }
.cpage-aside {
  position: sticky;
  top: 90px;
  border-left: 3px solid var(--primary, #005EB8);
  padding-left: 1.25rem;
}
.cpage-aside h2 {
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
  color: var(--primary, #005EB8);
}
.cpage-aside ul { list-style: none; margin: 0; padding: 0; }
.cpage-aside li { border-bottom: 1px solid var(--border, rgba(33,43,50,0.15)); }
.cpage-aside a {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink, #212B32);
}
.cpage-aside a:hover { color: var(--primary, #005EB8); text-decoration: underline; }
.welcome-video {
  max-width: 860px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.welcome-video video {
  display: block;
  width: 100%;
  height: auto;
}
.affiliations-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.affiliation-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-soft, #4C6272);
  font-weight: 600;
}
.affiliation-item img {
  height: 44px;
  width: auto;
  border-radius: 6px;
}
.stat-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}
.stat-link:hover .stat-label,
.stat-link:focus-visible .stat-label {
  text-decoration: underline;
  color: var(--primary);
}
@media (min-width: 880px) {
  .stats-strip .stat-item + .stat-item {
    border-left: 1px solid var(--border);
    padding-left: 2rem;
  }
}
.stats-strip .stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.035em;
  line-height: 1.0;
}
.stats-strip .stat-label {
  font-size: 0.875rem;
  color: var(--text-body);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Feature trio — 3 confident feature cards */
.feature-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 720px) { .feature-trio { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.feature {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.12s ease, border-color 0.2s ease;
}
.feature:hover { box-shadow: var(--shadow); border-color: var(--primary); transform: translateY(-2px); }
.feature .feature-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display: grid; place-items: center;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
}
.feature h3 {
  font-size: 1.25rem;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}
.feature p {
  font-size: 0.9375rem;
  color: var(--text-body);
  margin: 0 0 0.85em;
  line-height: 1.55;
}
.feature .feature-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 0.02em;
  margin-top: auto;
}

/* Numbered steps — for "How to register" / process flows */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  counter-reset: stepCount;
}
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  position: relative;
  counter-increment: stepCount;
}
.step::before {
  content: counter(stepCount);
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-light);
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.step h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.5em;
}
.step p {
  font-size: 0.9375rem;
  margin: 0;
  color: var(--text-body);
}

/* Pull quote — italic blockquote with rule above */
.pull-quote {
  margin: 0;
  padding: 2.5rem 0 2rem;
  text-align: left;
  position: relative;
  max-width: 64ch;
}
.pull-quote::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background: var(--accent);
  margin-bottom: 1.5rem;
  border-radius: 2px;
}
.pull-quote blockquote {
  margin: 0 0 1.25rem;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}
.pull-quote blockquote::before { content: "\201C"; color: var(--accent); margin-right: 0.05em; }
.pull-quote blockquote::after  { content: "\201D"; color: var(--accent); margin-left: 0.05em; }
.pull-quote cite {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-body);
  letter-spacing: 0.02em;
}
.pull-quote cite span {
  display: block;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.2em;
  font-size: 0.875rem;
}

/* CTA banner — bottom-of-page conversion strip */
.cta-banner {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
  color: white;
  border-radius: 20px;
  padding: 3rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(190, 24, 93, 0.28) 0%, transparent 60%);
  pointer-events: none;
}
.cta-banner h2 {
  color: white;
  margin: 0 0 0.5em;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-banner p {
  color: rgba(255,255,255,0.88);
  max-width: 56ch;
  margin: 0 auto 1.5rem;
  font-size: 1.0625rem;
}
.cta-banner .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Section header with eyebrow + title combined */
.section-header {
  margin-bottom: 2.5rem;
  max-width: 60ch;
}
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header h2 { margin: 0 0 0.4em; }
.section-header .lead { margin: 0; max-width: 100%; }

/* ==========================================================================
   App promo — NHS Wales App QR code section on homepage
   ========================================================================== */
.app-promo {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.app-promo::before {
  content: "";
  position: absolute;
  top: -50%; left: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(65,182,230,0.30) 0%, transparent 60%);
  pointer-events: none;
}
@media (min-width: 720px) {
  .app-promo { grid-template-columns: 1.5fr 1fr; padding: 3rem 3rem; }
}
.app-promo > * { position: relative; z-index: 1; }
.app-promo h2 { color: white; margin: 0 0 0.4em; }
.app-promo p { color: rgba(255,255,255,0.94); margin-bottom: 0.85em; }
.app-promo .app-promo-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 1.25rem 0 1.5rem;
}
@media (min-width: 540px) { .app-promo .app-promo-features { grid-template-columns: 1fr 1fr; } }
.app-promo .app-promo-features li {
  list-style: none;
  padding-left: 1.5em;
  position: relative;
  color: rgba(255,255,255,0.95);
  font-size: 0.9375rem;
  margin: 0;
}
.app-promo .app-promo-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
.app-promo-qr {
  background: white;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  justify-self: center;
  max-width: 240px;
}
.app-promo-qr img { width: 180px; height: 180px; display: block; }
.app-promo-qr .qr-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Footer legal links bar */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.footer-legal a { color: rgba(255,255,255,0.78); text-decoration: none; }
.footer-legal a:hover { color: white; text-decoration: underline; }

/* ==========================================================================
   Forms — used by the questionnaire page
   ========================================================================== */
.questionnaire {
  max-width: 760px;
  margin: 0 auto;
}
.form-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.75rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.form-section > legend, .form-section > .form-section-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--primary-dark);
  padding: 0;
  margin: 0 0 0.4em;
  letter-spacing: -0.015em;
}
.form-section > p {
  font-size: 0.9375rem;
  color: var(--text-body);
  margin: 0 0 1.25em;
}
.form-group {
  margin-bottom: 1.1rem;
}
.form-group:last-child { margin-bottom: 0; }
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4em;
  letter-spacing: -0.005em;
}
.form-label .req {
  color: var(--accent);
  font-weight: 700;
  margin-left: 0.15em;
}
.form-help {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.35em;
  line-height: 1.4;
}
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.form-textarea {
  min-height: 4.5em;
  resize: vertical;
  line-height: 1.5;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: 0;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 94, 184, 0.18);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233D4F5C' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.25rem;
}
.form-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 540px) {
  .form-options.inline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.form-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  font-size: 0.9375rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.form-option:hover { border-color: var(--primary-mid); }
.form-option input[type="radio"],
.form-option input[type="checkbox"] {
  margin: 0.2rem 0 0;
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.form-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-light);
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}
.form-success,
.form-error {
  display: none;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
.form-success {
  background: var(--green-light);
  border-left: 4px solid var(--green);
  color: var(--text);
}
.form-success.is-visible { display: block; }
.form-success h3 { margin-top: 0; color: var(--text); }
.form-success p:last-child { margin-bottom: 0; }
.form-error.is-visible { display: block; }
.form-error {
  background: var(--emergency-light);
  border-left: 4px solid var(--emergency);
}

/* Print */
@media print {
  .site-header, .site-footer, .emergency-bar, .hero-actions, .sidebar, .surgery-actions, .chat-fab, .chat-panel { display: none; }
  a { color: black; text-decoration: underline; }
  body { color: black; }
  .hero, .page-header { background: white; color: black; }
  .hero h1, .page-header h1 { color: black; }
}

/* ------------------------------------------------------------------ */
/* Hero video — short looping clip, with poster + reduced-motion       */
/* fallback so users who prefer less motion see the still image only.  */
/* ------------------------------------------------------------------ */
.hero-photo.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.hero-photo.hero-video figcaption {
  /* same styling as the static-image variant — inherits from base */
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo.hero-video video {
    /* Hide motion; the poster image stays visible because the video
     * element still renders its poster attribute when paused. */
    animation: none !important;
  }
  .hero-photo.hero-video video::-webkit-media-controls { display: none !important; }
}

/* ------------------------------------------------------------------ */
/* Language switcher — sits in the site header alongside primary nav. */
/* Always visible (desktop and mobile), horizontal pill chips, the    */
/* current locale highlighted in primary blue.                         */
/* ------------------------------------------------------------------ */
.lang-switcher {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.lang-switcher .lang-link {
  display: inline-block;
  padding: 0.32em 0.68em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-body);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.lang-switcher .lang-link:hover,
.lang-switcher .lang-link:focus-visible {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
/* Active locale chip — match by current document <html lang=""> */
html[lang="en-GB"] .lang-switcher .lang-link[lang="en"],
html[lang="cy"]    .lang-switcher .lang-link[lang="cy"],
html[lang="pl"]    .lang-switcher .lang-link[lang="pl"],
html[lang="ro"]    .lang-switcher .lang-link[lang="ro"],
html[lang="pa"]    .lang-switcher .lang-link[lang="pa"],
html[lang="ur"]    .lang-switcher .lang-link[lang="ur"] {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Mobile — still visible (it's outside the collapsible nav now).
 * Drops to a slightly smaller chip size so all 6 fit on a single line. */
@media (max-width: 1080px) {
  .lang-switcher {
    order: 3;       /* after brand, before hamburger */
    flex-basis: 100%;
    justify-content: center;
    padding: 0.4rem 0 0.1rem;
    border-top: 1px solid var(--border);
    margin-top: 0.4rem;
  }
  .lang-switcher .lang-link {
    font-size: 0.72rem;
    padding: 0.28em 0.55em;
  }
  /* Header container needs to allow the lang-switcher row */
  .site-header .container { flex-wrap: wrap; }
}

/* RTL handling — keep chips left-to-right since the codes themselves
 * read LTR. Just nudge horizontal-margin direction. */
html[dir="rtl"] .lang-switcher { margin-left: 0; margin-right: auto; }

/* ─────────────────────────────────────────────────────────────────────────
 * FAQ accordion (faqs.html + homepage preview) — no JS, native <details>.
 * ──────────────────────────────────────────────────────────────────────── */
.faq-list { display: grid; gap: 0.75rem; }
.faq-item {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e3e8ee);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,0.06));
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 3rem 1rem 1.25rem;
  position: relative;
  display: block;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
  display: inline;
  font-size: 1.05rem;
  margin: 0;
  color: var(--text, #1a1a1a);
}
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--primary, #005eb8);
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { content: '–'; }
.faq-item > p {
  margin: 0;
  padding: 0 1.25rem 1.15rem;
  color: var(--text-body, #333);
  max-width: 65ch;
}
html[dir="rtl"] .faq-item summary { padding: 1rem 1.25rem 1rem 3rem; }
html[dir="rtl"] .faq-item summary::after { right: auto; left: 1.25rem; }

/* About page body rhythm */
.about-body p { max-width: 70ch; }
.about-body p + p { margin-top: 1.1rem; }

/* ==========================================================================
   Inner-page components — added 2026-07-16.
   These classes were used by page templates from day one but never had
   rules, so anchor-based cards overlapped (visible on patient-info) and
   grid layouts fell back to a single unstyled column.
   ========================================================================== */

/* Page hero (all inner pages) — brand-tinted */
.page-hero {
  padding: 3.5rem 0 2rem;
  background-color: var(--primary-light);
  border-bottom: 3px solid var(--primary);
  /* The practice's building photo sits behind, under a scrim heavy enough on the
     left to keep the dark heading legible and light enough on the right to let
     the building show. Falls back to the flat tint when no photo is set. */
  background-image:
    linear-gradient(100deg,
      rgba(232, 241, 251, 0.97) 0%,
      rgba(232, 241, 251, 0.94) 38%,
      rgba(232, 241, 251, 0.62) 72%,
      rgba(232, 241, 251, 0.45) 100%),
    var(--page-hero-image, none);
  background-size: cover;
  background-position: center 60%;
}
@media (max-width: 720px) {
  /* On a phone the text fills the width, so the photo would sit under it. */
  .page-hero {
    background-image:
      linear-gradient(100deg, rgba(232,241,251,0.97) 0%, rgba(232,241,251,0.93) 100%),
      var(--page-hero-image, none);
  }
}
.page-hero h1 { margin: 0.35rem 0 0.75rem; color: var(--primary-dark); }
.page-hero .eyebrow { color: var(--primary); }
.page-hero .lead { max-width: 46em; margin: 0; color: var(--text-body); }

/* Card grids */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 640px) {
  .card-grid, .card-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Cards that are links (patient-info, services) */
a.card { display: block; text-decoration: none; color: var(--text); border-left: 4px solid var(--primary-light); transition: border-color .15s, box-shadow .15s, transform .15s; }
a.card:hover, a.card:focus-visible { border-color: var(--primary); border-left-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
a.card .muted { display: inline-block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary-dark); background: var(--primary-light); border-radius: var(--radius-pill, 999px); padding: 0.2rem 0.7rem; margin-bottom: 0.55rem; }
a.card h3 { margin: 0; font-size: 1.08rem; line-height: 1.45; color: var(--primary-dark); }
.card-summary { color: var(--text-body); margin: 0.5rem 0 0; font-size: 0.95rem; }
.service-card h3 { color: var(--primary-dark); }
.service-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }

/* Sections */
.section { padding: 3rem 0; }
.section-alt { background: var(--surface); }
.container-narrow { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }

/* Opening hours */
.hours-table, .hours-list { width: 100%; max-width: 640px; border-collapse: collapse; margin-top: 1rem; }
.hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.25rem; border-bottom: 1px solid var(--border); }
.hours-row.closed-row { color: var(--text-muted); }
.hours-note { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.75rem; }

/* Team */
.team-card { text-align: left; }
.team-photo { width: 72px; height: 72px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary); border: 2px solid var(--border); margin-bottom: 0.75rem; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-role { color: var(--primary-dark); font-weight: 600; font-size: 0.92rem; margin: 0.1rem 0; }
.team-quals { color: var(--text-muted); font-size: 0.85rem; margin: 0; }

/* News */
.news-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.news-item { padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.news-tag { display: inline-block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.3rem; }

/* Misc */
.callout-urgent { border-left: 4px solid var(--accent); background: var(--surface); padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin: 1.25rem 0; }
.link-arrow { font-weight: 600; text-decoration: none; color: var(--primary); }
.link-arrow:hover { text-decoration: underline; }
.about-teaser p { max-width: 60em; }
.hero-text { max-width: 34em; }
.contact-address { font-style: normal; line-height: 1.7; }

/* Footer sub-components (were unstyled; inherit .site-footer palette) */
.footer-brand address { font-style: normal; line-height: 1.7; color: rgba(255,255,255,0.85); margin: 0.5rem 0; }
.footer-phone { color: white; font-weight: 600; text-decoration: none; }
.footer-phone:hover { text-decoration: underline; }
.footer-col ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.footer-col li { margin: 0.4rem 0; }
.footer-col a { color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-col a:hover { color: white; text-decoration: underline; }
.footer-built { color: rgba(255,255,255,0.7); }
.footer-built a { color: rgba(255,255,255,0.9); }

/* Team page groups + avatars (2026-07-17 polish) */
.team-group { margin-top: 2.5rem; }
.team-group:first-child { margin-top: 1rem; }
.team-group-title { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); border-bottom: 2px solid var(--primary); display: inline-block; padding-bottom: 0.3rem; margin: 0 0 1.25rem; }
.team-card { border-top: 3px solid var(--primary); }
.team-card:hover { box-shadow: var(--shadow); }
.team-avatar { font-size: 1.35rem; letter-spacing: 0.02em; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; border: none; }

/* Footer compliance block (renders when CQC/HIW data present; unstyled until 2026-07-23) */
.footer-compliance { margin-top: 1rem; font-size: .85rem; color: rgba(255,255,255,.75); }
.footer-compliance a { color: rgba(255,255,255,.9); text-decoration: underline; }
.footer-compliance .rating { display: inline-block; background: rgba(255,255,255,.12); border-radius: 99px; padding: .2rem .8rem; margin-left: .4rem; font-weight: 600; color: #fff; }

/* Mirrored content pages (2026-07-23) */
.cpage-body h2 { margin-top: 2rem; }
.cpage-body h3 { margin-top: 1.4rem; }
.cpage-body ul, .cpage-body ol { padding-left: 1.3rem; }
.cpage-body li { margin: .35rem 0; }
.cpage-body table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.cpage-body td, .cpage-body th { border: 1px solid var(--border); padding: .5rem .75rem; text-align: left; }
.cpage-body a { color: var(--primary); }

/* ---- Registration lander: FAQ accordion and patient reviews ---- */
.pd-faq {
  border: 1px solid var(--border, #D8DDE0);
  border-radius: 6px;
  padding: 0 1.5rem;
  margin: 0 0 1rem;
}
.pd-faq > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
}
.pd-faq > summary::-webkit-details-marker { display: none; }
.pd-faq > summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}
.pd-faq[open] > summary::before { content: "\2212"; }
.pd-faq > div { padding: 0 0 1.5rem 2.6rem; max-width: 80ch; }
.pd-faq > div > :last-child { margin-bottom: 0; }

.pd-review {
  background: #fff;
  border: 1px solid var(--border, #D8DDE0);
  border-radius: 6px;
  padding: 1.75rem;
  margin: 0 0 1rem;
}
.pd-review p { margin: 0 0 1rem; }
.pd-review::before {
  content: "\2605\2605\2605\2605\2605";
  display: block;
  letter-spacing: 2px;
  color: #FFB81C;
  margin-bottom: 0.75rem;
}
.pd-review cite { font-style: normal; font-weight: 700; color: var(--text-body); }

@media (min-width: 720px) {
  .pd-faq > summary { font-size: 1.25rem; }
}

/* ==========================================================================
   AMP Group homepage blocks
   Join us nav pill, header search, review carousel, register band,
   info panels, survey buttons, Pharmacy First grid.
   ========================================================================== */

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

/* ---- Join us pill ---- */
.nav-cta {
  display: inline-block;
  background: var(--accent, #BE185D);
  color: #fff !important;
  font-weight: 700;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-warm, #9D174D); color: #fff !important; }
.nav-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- Header search ---- */
.site-search { position: relative; flex: 1 1 220px; max-width: 320px; }
.site-search input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border, #AEB7BD);
  background: var(--surface-alt, #F0F4F5);
  border-radius: 6px;
  padding: 0 2.75rem 0 0.9rem;
  font-size: 1rem;
  font-family: inherit;
  color: inherit;
}
.site-search-icon {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted, #4C6272); pointer-events: none;
}
.site-search-results {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 0.25rem; list-style: none;
  background: #fff; border: 1px solid var(--border, #D8DDE0); border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14); max-height: 60vh; overflow-y: auto;
}
.site-search-results[hidden] { display: none; }
.site-search-results a {
  display: block; padding: 0.6rem 0.75rem; border-radius: 4px;
  text-decoration: none; color: var(--text-body); font-size: 0.95rem;
}
.site-search-results a:hover,
.site-search-results li.is-active a { background: var(--primary-light, #E8F1FB); }
.site-search-empty { padding: 0.7rem 0.75rem; color: var(--text-muted, #4C6272); font-size: 0.95rem; }

/* ---- Review carousel ---- */
.reviews-section { background: var(--surface-alt, #F7F8F8); }
.review-carousel { position: relative; max-width: 720px; margin: 0 auto; min-height: 210px; }
.review-slide {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.5rem; opacity: 0; visibility: hidden;
  transition: opacity 0.45s ease;
}
.review-slide.is-active { opacity: 1; visibility: visible; }
.review-stars { display: flex; gap: 3px; color: #FFB81C; margin-bottom: 0.9rem; }
.review-slide blockquote { margin: 0 0 1rem; }
.review-slide blockquote p { font-size: 1.2rem; font-weight: 600; margin: 0; max-width: 52ch; }
.review-slide figcaption {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center; font-size: 0.9rem; color: var(--text-muted, #4C6272);
}
.review-source {
  border: 1px solid var(--border, #D8DDE0); border-radius: 4px;
  padding: 0.15rem 0.5rem; font-size: 0.78rem; font-weight: 600;
}
.review-dots { display: flex; justify-content: center; gap: 8px; margin-top: 1.25rem; }
.review-dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: var(--border, #D8DDE0); cursor: pointer;
}
.review-dots button[aria-selected="true"] { background: var(--primary); }
.review-dots button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .review-slide { transition: none; }
}

/* ---- Register with us band ---- */
.register-band { background: var(--primary); color: #fff; }
.register-band h2 { color: #fff; margin: 0 0 0.6rem; }
.register-band p { margin: 0; color: #fff; opacity: 0.95; max-width: 60ch; }
.register-band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}

/* ---- Out of hours / closure panels ---- */
.info-panel {
  border: 1px solid var(--border, #D8DDE0); border-radius: 6px;
  padding: 0 1.75rem; margin: 0 0 1.25rem;
}
.info-panel > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0;
  font-size: 1.2rem; font-weight: 700; color: var(--primary);
}
.info-panel > summary::-webkit-details-marker { display: none; }
.info-panel > summary::before {
  content: "+"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1;
}
.info-panel[open] > summary::before { content: "\2212"; }
.info-panel > div { padding: 0 0 1.6rem 2.6rem; max-width: 80ch; }
.info-panel > div > :last-child { margin-bottom: 0; }
.info-panel-emergency { color: var(--emergency, #DA291C); }
.closure-list { margin: 0; padding-left: 1.2rem; }

.survey-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; }

/* ---- Pharmacy First ---- */
.pharmacy-first-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.pharmacy-first-head h2 { margin: 0; font-size: 1.35rem; max-width: 70ch; }
.nhs-lockup {
  flex: 0 0 auto; background: var(--primary); color: #fff;
  font-weight: 800; font-size: 1.75rem; letter-spacing: 1px;
  padding: 0.4rem 0.8rem; border-radius: 2px;
}
.pharmacy-first-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-radius: 6px; overflow: hidden;
}
.pharmacy-first-grid li {
  padding: 1.25rem 0.75rem; text-align: center;
  display: flex; flex-direction: column; gap: 0.3rem; justify-content: center;
}
.pharmacy-first-grid strong { font-size: 0.95rem; }
.pharmacy-first-grid span { font-size: 0.78rem; }
.pf-tone-1 { background: #1FA7E0; color: #212B32; }
.pf-tone-2 { background: #AEC9EA; color: #212B32; }
.pf-tone-3 { background: #5A82C4; color: #fff; }
.pf-tone-4 { background: #7FD8EE; color: #212B32; }
.pf-tone-5 { background: #4E9BB7; color: #fff; }
.pf-tone-6 { background: #C7E8F5; color: #212B32; }
.pharmacy-first-link {
  display: block; text-align: center; margin-top: 1.25rem;
  font-weight: 700; font-size: 1.1rem;
}

@media (max-width: 1080px) {
  .site-search { max-width: none; order: 3; width: 100%; }
  .nav-cta { display: block; text-align: center; margin-top: 0.5rem; }
  .register-band-inner { flex-direction: column; align-items: flex-start; }
  .pharmacy-first-head h2 { font-size: 1.15rem; }
}

/* ---- NHS lockup in place of an initials mark ---- */
.nhs-mark {
  flex: 0 0 auto;
  background: #005EB8;
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 1px;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  border-radius: 2px;
  font-family: Arial, Helvetica, sans-serif;
}
.brand-contact {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--primary);
  margin-top: 2px;
}
@media (max-width: 720px) {
  .brand-contact { display: none; }
}

/* ---- Brand block sizing: keep the name and address clear of the nav ---- */
.site-header .brand { flex: 0 0 auto; max-width: 15rem; }
.site-header .brand-name { min-width: 0; }
.site-header .brand-name strong { font-size: 1rem; line-height: 1.2; }
/* Next to an NHS lockup the "NHS general practice" tagline is noise, and it is
   the thing that pushes the header to three cramped lines. Footer keeps it. */
.site-header .brand-name span { display: none; }
@media (max-width: 1080px) {
  .site-header .brand { max-width: none; }
}

/* ---- Service cards must not push the page wide on narrow screens ---- */
.service-grid { min-width: 0; }
.service-card { min-width: 0; }
.service-card h3, .service-card p { overflow-wrap: anywhere; word-break: break-word; }

/* ---- Header fit: breathing room after the brand, and a search box wide
   enough to show its own placeholder at every desktop width. ---- */
.site-header .brand { max-width: 13.5rem; padding-right: 1.25rem; }
.site-header .site-search { flex: 0 0 11rem; max-width: 11rem; }
@media (max-width: 1080px) {
  .site-header .brand { max-width: none; padding-right: 0; }
  .site-header .site-search { flex: 1 1 auto; max-width: none; }
}

/* The mobile menu kicks in at 1080px. Between there and 1440px the brand plus
   the full eight-item nav plus the Join us pill plus the search box do not all
   fit. The brand must never be squeezed below its content, so the search gives
   way first and the nav tightens up. */
@media (min-width: 1081px) and (max-width: 1439px) {
  .site-header .site-search { display: none; }
  .primary-nav ul { gap: 0; }
  .primary-nav a { padding: 0.55rem 0.55rem; font-size: 0.875rem; }
  .nav-cta { padding: 0.55rem 0.9rem; }
}
/* Belt and braces: if anything ever does squeeze the brand, clip rather than
   let the practice name run across the navigation. */
.site-header .brand-name strong { overflow: hidden; text-overflow: ellipsis; }

/* ---- Awards strip ---- */
.awards-section { background: var(--surface-alt, #F7F8F8); }
.awards-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.award-card {
  background: #fff;
  border: 1px solid var(--border, #D8DDE0);
  border-top: 4px solid var(--accent, #FFB81C);
  border-radius: 6px;
  padding: 1.5rem 1.35rem;
  min-width: 0;
}
.award-ribbon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary-light, #E8F1FB); color: var(--primary);
  margin-bottom: 0.9rem;
}
.award-card strong {
  display: block; font-size: 1.05rem; line-height: 1.3;
  overflow-wrap: anywhere;
}
.award-year {
  display: block; margin-top: 0.2rem;
  font-size: 0.85rem; font-weight: 600; color: var(--text-muted, #4C6272);
}
.award-card p {
  margin: 0.7rem 0 0; font-size: 0.92rem;
  color: var(--text-muted, #4C6272); overflow-wrap: anywhere;
}

/* ---- Awards, foregrounded ---- */
.hero-award-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent, #FFB81C);
  color: #003087;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  max-width: 100%;
}
.hero-award-badge svg { flex: 0 0 auto; }

.marquee-awards {
  background: var(--primary-dark, #003D7A);
  color: #fff;
}
.marquee-awards .marquee-track span { font-weight: 700; letter-spacing: 0.04em; }
.marquee-awards .dot { background: var(--accent, #FFB81C); }

.awards-section { border-top: 4px solid var(--accent, #FFB81C); }
.awards-section .section-lede {
  margin: 0.6rem 0 0;
  font-size: 1.05rem;
  color: var(--text-muted, #4C6272);
  max-width: 62ch;
}
.award-card { display: flex; flex-direction: column; }
.award-card strong { font-size: 1.1rem; }

@media (max-width: 720px) {
  .hero-award-badge { font-size: 0.8rem; padding: 0.45rem 0.8rem; }
}

/* ---- Pharmacy First icons ---- */
.pharmacy-first-grid li { align-items: center; }
.pf-icon { display: block; margin-top: 0.4rem; line-height: 0; }
.pf-icon svg { display: inline-block; }

/* ---- Wrappers for the AMP blocks ---- */
.nav-cta-item { margin-left: 0.35rem; display: flex; align-items: center; }

.info-panels { padding-top: 1rem; }

/* The Pharmacy First panel sits in its own bordered card, as in the mock-up. */
.pharmacy-first > .container {
  border: 1px solid var(--border, #D8DDE0);
  border-radius: 8px;
  padding: 1.75rem;
  background: #fff;
}
@media (max-width: 720px) {
  .pharmacy-first > .container { padding: 1.25rem; }
  .nav-cta-item { margin-left: 0; }
}

/* ==========================================================================
   Homepage rebuild, Aug 2026 feedback round
   ========================================================================== */

/* ---- "I need help with..." ---- */
.help-with { padding-top: 1rem; }
.help-grid {
  display: grid; gap: 1rem; margin-top: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.help-card {
  display: flex; align-items: center; gap: 0.9rem;
  background: #fff;
  border: 1px solid var(--border, #D8DDE0);
  border-radius: 8px;
  padding: 1.1rem 1.15rem;
  text-decoration: none;
  color: var(--text-body);
  font-weight: 600;
  font-size: 1.05rem;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.help-card:hover, .help-card:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.08));
  transform: translateY(-2px);
  color: var(--primary-dark);
}
.help-icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.help-label { flex: 1; overflow-wrap: anywhere; }

/* ---- Stat bar: room for a wordy value ---- */
.stat-value-sm { font-size: 1.15rem; line-height: 1.25; }

/* ---- Google mark beside a review ---- */
.review-google { display: inline-flex; align-items: center; gap: 0.4rem; }
.review-google svg { flex: 0 0 auto; }

/* ---- Video caption ---- */
.section-lede { margin: 0.6rem 0 0; font-size: 1.05rem; color: var(--text-muted, #4C6272); max-width: 62ch; }

/* ---- Clinic cards on the innovative services page ---- */
.clinic-grid {
  display: grid; gap: 1.25rem; margin: 1.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.clinic-card {
  background: #fff;
  border: 1px solid var(--border, #D8DDE0);
  border-top: 4px solid var(--primary);
  border-radius: 8px;
  padding: 1.5rem;
  min-width: 0;
}
.clinic-card h3 { margin: 0.85rem 0 0.5rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.clinic-card p { margin: 0; color: var(--text-muted, #4C6272); font-size: 0.95rem; }
.clinic-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--primary-light, #E8F1FB); color: var(--primary);
}

@media (max-width: 720px) {
  .help-card { font-size: 1rem; padding: 0.9rem 1rem; }
  .help-icon { width: 40px; height: 40px; }
}

/* ==========================================================================
   Registration lander: banded sections, larger headings, readable callouts.
   Dr Kumar asked for bolder headings, sections separated by background colour,
   and the black-on-dark-blue boxes fixed.
   ========================================================================== */
.reg-band {
  /* Break out of the narrow content column so the bands run full width. */
  margin: 0 calc(50% - 50vw);
  padding: 2.75rem calc(50vw - 50% + 0px);
}
.reg-band + .reg-band { margin-top: 0; }
.reg-band-tint { background: var(--surface-alt, #F4F7F9); }
.reg-band-hero { background: var(--primary-light, #E8F1FB); }

.reg-band h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--primary-dark);
}
.reg-band h3 { font-size: 1.15rem; font-weight: 800; margin: 0.9rem 0 0.4rem; }
.reg-lead { font-size: 1.15rem; margin: 0 0 0.75rem; }
.reg-small { font-size: 0.92rem; color: var(--text-muted, #4C6272); margin: 0.75rem 0 0; }
.reg-list { margin: 0 0 1rem; padding-left: 1.3rem; }
.reg-list li { margin-bottom: 0.5rem; }

/* Callouts: dark text on a pale tint, never on a dark fill. */
.reg-note, .reg-warn {
  border-radius: 8px;
  padding: 1.15rem 1.35rem;
  margin: 1.15rem 0 0;
  color: var(--text-body);
}
.reg-note { background: #EAF2FB; border-left: 4px solid var(--primary); }
.reg-warn { background: #FEF6E7; border-left: 4px solid #B8860B; }
.reg-note p:last-child, .reg-warn p:last-child, .reg-note ul:last-child { margin-bottom: 0; }
.reg-note ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }

/* The three steps, with Dr Kumar's own images. */
.reg-steps {
  display: grid; gap: 1.75rem; margin: 1.5rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.reg-step { min-width: 0; }
.reg-step img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; display: block;
}
.reg-step p { margin: 0; color: var(--text-muted, #4C6272); }

/* Inside a band the accordion sits on white so the blue heading stays legible. */
.reg-band .pd-faq { background: #fff; }

@media (max-width: 720px) {
  .reg-band { padding-top: 2rem; padding-bottom: 2rem; }
}

/* --------------------------------------------------------------------------
   Buttons inside a content page were rendering with invisible text: the
   `.cpage-body a { color: var(--primary) }` rule (specificity 0,2,0) beat
   `.btn-primary { color: white }` (0,1,0), so a primary button was primary
   blue text on a primary blue fill. Affects every practice, not just AMP.
   -------------------------------------------------------------------------- */
.cpage-body a.btn-primary,
.cpage-body a.btn-accent,
.cpage-body a.btn-outline { color: #fff; }
.cpage-body a.btn-primary:hover,
.cpage-body a.btn-accent:hover { color: #fff; }
.cpage-body a.btn-secondary,
.cpage-body a.btn-ghost { color: var(--primary-dark); }

/* The hero band needs a pale tint that holds dark text. --primary-light is a
   mid cyan in the classic-nhs theme, which washed the copy out. */
.reg-band-hero { background: #EAF2FB; }
.reg-band { color: var(--text-body); }
.reg-band p, .reg-band li { color: var(--text-body); }
.reg-band .reg-small { color: var(--text-muted, #4C6272); }

/* ---- Accordion layout for long content pages ---- */
.cpage-accordion { margin-top: 1.25rem; }
.cpage-accordion .pd-faq > summary { font-size: 1.05rem; }
.cpage-accordion .pd-faq > div > :first-child { margin-top: 0; }
.cpage-accordion .pd-faq h3 { font-size: 1.05rem; margin-top: 1.1rem; }
.cpage-accordion .pd-faq img { max-width: 100%; height: auto; }
.cpage-accordion .pd-faq table { width: 100%; overflow-x: auto; display: block; }

/* ---- Contents list on long accordion pages ---- */
.cpage-contents {
  background: var(--surface-alt, #F4F7F9);
  border: 1px solid var(--border, #D8DDE0);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.cpage-contents h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
.cpage-contents ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 2rem;
}
.cpage-contents li { margin: 0 0 0.4rem; break-inside: avoid; }
.cpage-contents a { font-size: 0.95rem; }
@media (max-width: 720px) { .cpage-contents ul { columns: 1; } }


/* Theme variables — generated by customer-builder/build.js. Do not edit by hand. */
:root {
  --color-primary: #005EB8;
  --color-primary-dark: #003F7E;
  --color-primary-light: #41B6E6;
  --color-accent: #FFB81C;
  --color-accent-dark: #C98700;
  --color-ink: #212B32;
  --color-ink-soft: #4C6272;
  --color-paper: #FFFFFF;
  --color-paper-alt: #F0F4F5;
  --color-paper-warm: #E8EDEE;
  --color-success: #007F3B;
  --color-warning: #FFB81C;
  --color-danger: #D5281B;
  --color-rule: rgba(33, 43, 50, 0.15);
  --color-rule-strong: rgba(33, 43, 50, 0.3);
  --color-focus: rgba(0, 94, 184, 0.35);
  --font-display: 'Frutiger W01', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Frutiger W01', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-h1: clamp(2.1rem, 4vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 2.6vw, 2.2rem);
  --fs-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --line-height: 1.55;
  --section-y: clamp(2.5rem, 5vw, 4.5rem);
  --container-max: 1120px;
  --gutter: clamp(1rem, 2.5vw, 1.5rem);
  --radius: 2px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgba(33,43,50,0.08);
  --shadow-raised: 0 2px 4px rgba(33,43,50,0.1);
}
/* Legacy-variable aliases — override the hardcoded NHS-blue defaults in template/css/site.css */
:root {
  --primary: #005EB8;
  --primary-dark: #003F7E;
  --primary-darker: #003F7E;
  --primary-light: #41B6E6;
  --primary-mid: #005EB8;
  --bright-blue: #005EB8;
  --accent: #FFB81C;
  --accent-warm: #C98700;
  --accent-light: #E8EDEE;
  --text: #212B32;
  --text-body: #4C6272;
  --text-muted: #4C6272;
  --bg: #FFFFFF;
  --bg-tint: #F0F4F5;
  --surface: #FFFFFF;
  --surface-alt: #F0F4F5;
  --paper: #FFFFFF;
  --paper-alt: #F0F4F5;
  --paper-warm: #E8EDEE;
  --ink: #212B32;
  --ink-soft: #4C6272;
  --accent-dark: #C98700;
  --border: rgba(33, 43, 50, 0.15);
  --border-strong: rgba(33, 43, 50, 0.3);
  --focus: rgba(0, 94, 184, 0.35);
}
/* Apply theme fonts to all headings, overriding the template defaults */
h1, h2, h3, h4, h5, h6, .display, .h1, .h2 { font-family: var(--font-display) !important; }
body { font-family: var(--font-body); }
/* Theme-supplied extra rules (large structural overrides) */

/* per-customer overrides */