/* ============================================
   TYPHOID PAGE STYLES
   Uses svc- prefix
   ============================================ */

/* ============================================
   BREADCRUMB
   ============================================ */
.svc-breadcrumb {
  padding: 1rem 0;
  background: var(--white);
  border-bottom: 1px solid rgba(194, 113, 76, 0.1);
  margin-top: 0; /* Body already has padding-top: 80px for fixed nav */
}

.svc-breadcrumb .section-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-gray);
}

.svc-breadcrumb a {
  color: var(--text-gray);
  text-decoration: none;
  transition: color 0.3s ease;
}

.svc-breadcrumb a:hover {
  color: var(--brand-purple);
}

.svc-breadcrumb .separator {
  color: #E6DFD0;
}

.svc-breadcrumb .current {
  color: var(--brand-purple);
  font-weight: 600;
}

/* ============================================
   HERO SECTION
   ============================================ */
.svc-hero-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  overflow: hidden;
  background-color: #2F6B4E;
  background-size: cover;
  background-position: center;
}

.svc-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(35, 79, 58, 0.95), rgba(139, 109, 186, 0.85), rgba(163, 138, 207, 0.4));
  z-index: 1;
}

.svc-hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 2;
}

.svc-hero-content {
  position: relative;
  z-index: 10;
  max-width: 700px;
  color: var(--white);
}

.svc-hero-line {
  width: 60px;
  height: 4px;
  background: var(--white);
  margin-bottom: 1.5rem;
  border-radius: 9999px;
}

.svc-hero-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.svc-hero-title {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .svc-hero-title {
    font-size: 4rem;
  }
}

.svc-hero-description {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.svc-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .svc-hero-actions {
    flex-direction: row;
  }
}

/*
 * SERVICE PAGE BUTTONS
 *
 * These were defined white-on-transparent, which is right over the dark hero
 * and invisible everywhere else. Because most uses are NOT in the hero, the
 * result was primary CTAs rendering as white pills on white sections — the
 * label floating with no button around it — on nine templates.
 *
 * So the default is now the safe one: a brand-filled pill that is visible on
 * any light surface. The white treatment is scoped to .svc-hero-section, the
 * only place these sit on dark ground. A button added to a new section is
 * legible by default rather than invisible until someone notices.
 *
 * White label on --brand-purple is 6.3:1, and the pill edge is 6.3:1 against a
 * white section, so it reads as a button before the text is read.
 */
.svc-btn-primary {
  background: var(--brand-purple);
  color: var(--white);
  border: none;
  box-shadow: 0 6px 18px rgba(47, 107, 78, 0.22);
}

.svc-btn-primary:hover,
.svc-btn-primary:focus-visible {
  background: var(--brand-dark);
  color: var(--white);
  box-shadow: 0 10px 26px rgba(35, 79, 58, 0.3);
}

.svc-btn-secondary {
  background: transparent;
  color: var(--brand-purple);
  border: 2px solid rgba(47, 107, 78, 0.35);
}

.svc-btn-secondary:hover,
.svc-btn-secondary:focus-visible {
  background: rgba(47, 107, 78, 0.07);
  border-color: var(--brand-purple);
}

/* Over the dark hero, back to white. */
.svc-hero-section .svc-btn-primary {
  background: var(--white);
  color: var(--brand-dark);
  box-shadow: none;
}

.svc-hero-section .svc-btn-primary:hover,
.svc-hero-section .svc-btn-primary:focus-visible {
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-dark);
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.svc-hero-section .svc-btn-secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.svc-hero-section .svc-btn-secondary:hover,
.svc-hero-section .svc-btn-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

.svc-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/*
 * On a phone the pills wrap one per line, and because each is a different
 * width the left-aligned stack reads as a ragged staircase against the centred
 * card directly below it. Centred, they read as a deliberate row.
 *
 * Mobile only — the desktop hero is left-aligned by design and stays that way.
 */
@media (max-width: 639px) {
  .svc-hero-badges {
    justify-content: center;
  }
}

.svc-hero-badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ============================================
   PROTECTION SECTION
   ============================================ */
.svc-protect-section {
  padding: 6rem 0;
  background: var(--white);
}

.svc-protect-header {
  text-align: center;
  margin-bottom: 4rem;
}

.svc-protect-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #1E2A23;
  margin-bottom: 1rem;
}

.svc-protect-desc {
  font-size: 1.125rem;
  color: var(--text-gray);
}

.svc-protect-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .svc-protect-grid {
    grid-template-columns: 5fr 7fr;
  }
}

.svc-protect-image-wrapper {
  position: relative;
}

.svc-protect-image-card {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(194, 113, 76, 0.12);
  border: 4px solid var(--white);
}

.svc-protect-image {
  width: 100%;
  height: auto;
  display: block;
}

.svc-protect-name-tag {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.svc-protect-name-tag .name {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  color: #1E2A23;
  font-family: var(--font-heading);
}

.svc-protect-name-tag .role {
  display: block;
  font-size: 0.875rem;
  color: var(--text-gray);
  font-weight: 600;
}

.svc-protect-badge-box {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(194, 113, 76, 0.08);
  color: var(--brand-dark);
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(194, 113, 76, 0.2);
}

.svc-protect-badge-box i {
  font-size: 1rem;
}

.svc-protect-subtitle {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1E2A23;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.svc-protect-text {
  font-size: 1.125rem;
  color: var(--text-gray);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.svc-protect-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .svc-protect-features {
    grid-template-columns: 1fr 1fr;
  }
}

.svc-protect-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.svc-protect-feature .icon {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(194, 113, 76, 0.25);
}

.svc-protect-feature .text strong {
  display: block;
  font-size: 1rem;
  color: #1E2A23;
  margin-bottom: 0.25rem;
}

.svc-protect-feature .text p {
  font-size: 0.9375rem;
  color: var(--text-gray);
  line-height: 1.5;
}

.svc-protect-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .svc-protect-actions {
    flex-direction: row;
  }
}

/* ============================================
   STATS BAR
   ============================================ */
.svc-stats-section {
  background: linear-gradient(to right, var(--brand-purple), var(--brand-dark));
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
}

.svc-stats-bar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* Left-align the stacked rows on a shared edge so the icons line up on
     mobile (rather than each row centring by its own width, which puts the
     icon tiles at four different left edges because "8", "20 min", "No GP"
     and "Expert" are all different widths); the max-content group is then
     centred as a whole. Mirrors .yellowfever-stats-bar. */
  align-items: flex-start;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .svc-stats-bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}

.svc-stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.svc-stat-item .icon {
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
}

.svc-stat-item .content {
  display: flex;
  flex-direction: column;
}

.svc-stat-item .number {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}

.svc-stat-item .label {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.svc-stat-divider {
  display: none;
  width: 1px;
  height: 3rem;
  background: rgba(255, 255, 255, 0.3);
}

@media (min-width: 768px) {
  .svc-stat-divider {
    display: block;
  }
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.svc-about-section {
  padding: 6rem 0;
  background: var(--brand-light);
}

/*
 * Two of these in a row.
 *
 * Every .svc-about-section carries the same brand-light background — nothing
 * overrides it — so when two abut, the 6rem below one and the 6rem above the
 * next stack into 12rem of identical colour with nothing in it. Between
 * sections of DIFFERENT colours that reads as separation; between two of the
 * same it reads as a hole, which is what it looked like on the blood test page
 * between "Why test privately" and the test menu.
 *
 * Dropping the leading padding leaves a 6rem gap, the same rhythm a single
 * section boundary gets elsewhere on the site.
 */
.svc-about-section + .svc-about-section {
  padding-top: 0;
}

.svc-about-header {
  text-align: center;
  margin-bottom: 4rem;
}

.svc-about-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #1E2A23;
  margin-bottom: 1rem;
}

.svc-about-desc {
  font-size: 1.125rem;
  color: var(--text-gray);
}

/* Enhanced Grid Layout */
.svc-about-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
  margin-top: 4rem;
  margin-bottom: 3rem;
}

@media (min-width: 1024px) {
  .svc-about-content-grid {
    grid-template-columns: 40% 1fr;
    gap: 4rem;
  }
}

.svc-about-image-wrapper {
  position: relative;
  width: 100%;
}

.svc-about-image-card {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(194, 113, 76, 0.12);
  aspect-ratio: 3/4;
}

.svc-about-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.svc-about-image-card:hover img {
  transform: scale(1.05);
}

.svc-about-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* One card in an auto-fit grid stretches to the full row. Cap it so a single
   cross-link reads as a card rather than a banner. */
.svc-about-cards-grid--single {
  max-width: 34rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  /*
   * Auto-fit rather than a fixed 1fr 1fr: three cards used to render two up
   * and one stranded on its own row. This fits as many as the container
   * allows, so 2 cards sit 2-up, 3 sit 3-up, and nothing is left orphaned.
   */
  .svc-about-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }
}

.svc-info-card {
  background: var(--white);
  padding: 2rem;
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(194, 113, 76, 0.12);
  transition: transform 0.3s ease;
}

.svc-info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(194, 113, 76, 0.1);
}

.svc-info-card .icon {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-dark));
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(194, 113, 76, 0.25);
}

.svc-info-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1E2A23;
  margin-bottom: 0.75rem;
}

.svc-info-card p {
  font-size: 1rem;
  color: var(--text-gray);
  line-height: 1.6;
}

/* ============================================
   WHO NEEDS VACCINATION
   ============================================ */
.svc-needs-section {
  padding: 6rem 0;
  background: var(--white);
}

.svc-needs-header {
  text-align: center;
  margin-bottom: 4rem;
}

.svc-needs-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #1E2A23;
  margin-bottom: 1rem;
}

.svc-needs-desc {
  font-size: 1.125rem;
  color: var(--text-gray);
}

/*
 * Sits inside .svc-stats-section, which is a dark green gradient — so this
 * takes the same near-white treatment as .svc-stat-item .label, not body text.
 */
.svc-stats-note {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  justify-content: center;
  max-width: 46rem;
  margin: 1.75rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
}

/*
 * Light-surface sibling of .svc-stats-note.
 *
 * .svc-stats-note is white text with a white rule, built for the dark stats
 * gradient. Dropped onto a white or brand-light section it renders invisible,
 * so anything outside that bar needs this instead. Body 9.2:1 on white.
 */
.svc-note {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  justify-content: center;
  max-width: 46rem;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(110, 149, 131, 0.28);
  font-size: 0.95rem;
  line-height: 1.65;
  color: #3F4A44;
  text-align: left;
}

.svc-note i {
  color: var(--brand-purple, #2F6B4E);
  margin-top: 0.3rem;
  flex: none;
}

.svc-stats-note i {
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.28rem;
  flex: none;
}

.svc-needs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  /* Auto-fit so a third card sits alongside rather than orphaned below. */
  .svc-needs-grid {
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  }
}

.svc-needs-card {
  padding: 2.5rem;
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
}

.svc-needs-card.recommended {
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
}

.svc-needs-card.consider {
  background: #fffbeb;
  border: 2px solid #fcd34d;
}

/* --- Badge must never sit on the heading --------------------------------
   The badge is pinned to the card's top-right while the <h3> is the first
   in-flow child, so on a narrow card the heading's first line runs straight
   underneath it. Measured at 375px before this fix: the "HIGHLY RECOMMENDED"
   pill covered 101x17px of the words "Travellers to Risk Areas".

   A container query, not a media query, on purpose: these cards are at their
   NARROWEST in the two-up tablet grid (~348px each at 768px viewport), not on
   phones, so the switch has to follow the CARD's width rather than the
   screen's. Below the threshold the badge simply sits in normal flow above
   the heading; at or above it, the original pinned treatment is restored
   unchanged. Browsers without @container support keep the in-flow badge,
   which is the safe direction to fail in. */
.svc-needs-card .card-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  /* in flow by default — see note above */
  position: static;
  display: inline-block;
  margin-bottom: 1rem;
}

.svc-needs-card { container-type: inline-size; }

@container (min-width: 30rem) {
  .svc-needs-card .card-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    margin-bottom: 0;
  }
}


.svc-needs-card.recommended .card-badge {
  background: #16a34a;
  color: var(--white);
}

.svc-needs-card.consider .card-badge {
  background: #f59f00;
  color: var(--white);
}

.svc-needs-card h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.svc-needs-card.recommended h3 { color: #14532d; }
.svc-needs-card.consider h3 { color: #92400e; }

.svc-needs-card p {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.svc-needs-card.recommended p { color: #14532d; }
.svc-needs-card.consider p { color: #78350f; }

.svc-needs-card .check-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.svc-needs-card .check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-weight: 600;
}

.svc-needs-card.recommended .check-list li { color: #14532d; }
.svc-needs-card.consider .check-list li { color: #92400e; }

.svc-needs-card .check-list i {
  margin-top: 0.25rem;
}

/* ============================================
   RISK ZONES
   ============================================ */
.svc-risk-section {
  padding: 6rem 0;
  background: var(--brand-light);
}

.svc-risk-header {
  text-align: center;
  margin-bottom: 4rem;
}

.svc-risk-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #1E2A23;
  margin-bottom: 1rem;
}

.svc-risk-desc {
  font-size: 1.125rem;
  color: var(--text-gray);
  max-width: 800px;
  margin: 0 auto;
}

.svc-risk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 1024px) {
  .svc-risk-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Destination Images */
.svc-destination-image {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 2rem;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 15px 40px rgba(194, 113, 76, 0.1);
}

.svc-destination-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.svc-destination-image:hover img {
  transform: scale(1.05);
}

.svc-risk-card {
  background: var(--white);
  border-radius: 2rem;
  padding: 2.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(194, 113, 76, 0.12);
}

.svc-risk-card.asia {
  border-top: 6px solid #f59f00;
}

.svc-risk-card.africa {
  border-top: 6px solid var(--brand-purple);
}

.svc-risk-card .card-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.svc-risk-card.asia .card-icon {
  background: rgba(252, 201, 38, 0.15);
  color: #d97706;
}

.svc-risk-card.africa .card-icon {
  background: rgba(47, 107, 78, 0.15);
  color: var(--brand-purple);
}

.svc-risk-card h3 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1E2A23;
  margin-bottom: 1rem;
}

.svc-risk-card .desc {
  font-size: 1.0625rem;
  color: var(--text-gray);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.svc-risk-card .country-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.svc-risk-card .country-list span {
  background: #f3f4f6;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

.svc-risk-footer {
  text-align: center;
  margin-top: 4rem;
}

.svc-risk-footer .info-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, rgba(194, 113, 76, 0.08), rgba(194, 113, 76, 0.04));
  color: var(--brand-dark);
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  margin-bottom: 2.5rem;
  border: 1px solid rgba(194, 113, 76, 0.2);
}

.svc-risk-footer .info-badge i {
  color: var(--brand-purple);
}

/* The pill carried its own 2.5rem gap to the buttons; the note panel needs the
   same, or it butts straight into them. */
.svc-risk-footer .svc-note-panel {
  margin-bottom: 2.5rem;
}

.svc-risk-footer .actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* .svc-risk-footer sat on a light section, so its buttons were patched here
   individually. The base rules above now handle that, and every other light
   section, so only the secondary tweak below remains. */
.svc-risk-footer .actions .svc-btn-secondary {
  background: transparent;
  color: var(--brand-purple);
  border: 2px solid var(--brand-purple);
}

.svc-risk-footer .actions .svc-btn-secondary:hover {
  background: var(--brand-purple);
  color: var(--white);
}

/* ============================================
   FAQ SECTION
   ============================================ */
.svc-faq-section {
  padding: 6rem 0;
  background: var(--brand-light);
}

.svc-faq-header {
  text-align: center;
  margin-bottom: 4rem;
}

.svc-faq-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #1E2A23;
  margin-bottom: 1rem;
}

.svc-faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.svc-faq-item {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-radius: 1.5rem;
  overflow: hidden;
  border: 2px solid #E6DFD0;
  transition: all 0.4s ease;
}

.svc-faq-item:hover {
  border-color: rgba(194, 113, 76, 0.3);
  box-shadow: 0 20px 50px rgba(194, 113, 76, 0.12);
  transform: translateY(-2px);
}

.svc-faq-item.travel-faq-active {
  box-shadow: 0 8px 20px rgba(194, 113, 76, 0.1);
  border-color: var(--brand-purple);
  background: var(--white);
}

.svc-faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.svc-faq-btn .num {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 900;
  color: var(--white);
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-dark));
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(194, 113, 76, 0.3);
}

.svc-faq-btn .text {
  flex: 1;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1E2A23;
}

.svc-faq-btn .icon {
  color: var(--brand-purple);
  transition: transform 0.3s ease;
  font-size: 1.25rem;
}

.svc-faq-item.travel-faq-active .icon {
  transform: rotate(45deg);
}

.svc-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.svc-faq-item.travel-faq-active .svc-faq-content {
  max-height: 300px;
  padding: 0 2rem 2rem 5.5rem;
}

.svc-faq-content p {
  font-size: 1.0625rem;
  color: var(--text-gray);
  line-height: 1.7;
}

@media (max-width: 640px) {
  .svc-faq-btn {
    padding: 1.25rem;
    gap: 1rem;
  }

  .svc-faq-item.travel-faq-active .svc-faq-content {
    padding: 0 1.25rem 1.5rem 1.25rem;
  }
}

/* ============================================
   CTA SECTION
   ============================================ */
.svc-cta-section {
  position: relative;
  background: linear-gradient(to right, var(--brand-purple), var(--brand-accent), var(--brand-dark));
  padding: 6rem 0;
  overflow: hidden;
  text-align: center;
}

.svc-cta-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
}

.svc-cta-content {
  position: relative;
  z-index: 10;
}

.svc-cta-badges {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.svc-cta-badges .badge {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  color: var(--white);
  font-weight: 700;
  font-size: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.svc-cta-title {
  font-size: 3rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.svc-cta-desc {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.95);
  max-width: 700px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.svc-cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

.svc-cta-actions .white-btn {
  background: #ffffff;
  color: var(--brand-dark);
}

.svc-cta-actions .white-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

.svc-cta-actions .outline-btn {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.svc-cta-actions .outline-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

/* ============================================
   Service-page helpers (Pharmacy First / HPV / Blood Test)
   Small additions on top of the shared vaccine layout.
   ============================================ */

/* Allow the conditions / tests / pricing grids to breathe wider */
.svc-cards-wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

/* Pricing cards */
.svc-price-card {
  text-align: center;
}
.svc-price-card h3 {
  font-family: var(--font-accent, 'Syne', sans-serif);
  color: var(--text-dark, #1E2A23);
}
.svc-price {
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-accent, #6E9583);
  margin: 8px 0 4px;
  line-height: 1.1;
}
.svc-price-turnaround {
  font-size: 0.9rem;
  color: var(--text-gray, #5B655E);
  margin: 0;
}
.svc-price-turnaround i {
  color: var(--brand-accent, #6E9583);
  margin-right: 4px;
}

/* ============================================
   BLOOD TESTING — named test cards, price table,
   "why test privately" editorial block.
   Used by page-blood-test.php and the two panel
   subpages (Full Thyroid / Menopause Hormone).
   ============================================ */

/* --- Why test privately (image + text, mobile-first) --- */
.svc-bt-why-section .svc-about-content-grid {
  align-items: center;
}

.svc-bt-why-text .section-badge {
  margin-bottom: 1rem;
}

.svc-bt-why-text .svc-about-title {
  text-align: left;
}

.svc-bt-why-body p {
  font-size: 1.0625rem;
  color: #3F4A44;
  line-height: 1.75;
  margin-bottom: 1.1rem;
}

/*
 * Full-width prose.
 *
 * .svc-bt-why-body is normally a column inside .svc-about-content-grid, so its
 * measure is constrained by the grid. Used full-width it runs 130+ characters
 * a line, which reads as weak however dark the ink is. This caps the measure
 * and lifts the size for standalone blocks of copy.
 *
 * FOR A <div> OF COPY ONLY -- NEVER A <section>.
 *
 * On a section this clamps the section itself to 68ch and centres it,
 * background included, so a full-bleed band becomes a ~740px column floating
 * in the body colour. That is exactly what happened to the COVID and
 * prescriptions pages. A section modifier is .svc-panelled; see "PANELLED
 * CONTENT SECTIONS" at the foot of this file.
 */
.svc-prose {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

.svc-prose p {
  font-size: 1.0625rem;
  color: #3F4A44;
}

.svc-bt-why-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.875rem;
}

.svc-bt-why-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.975rem;
  color: var(--text-gray);
  line-height: 1.6;
}

.svc-bt-why-list li i {
  color: var(--brand-accent, #6E9583);
  font-size: 1.05rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.svc-bt-why-list li strong {
  color: #1E2A23;
}

/* --- Named test cards --- */
.svc-bt-test-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .svc-bt-test-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.svc-bt-test-card {
  background: var(--white);
  padding: 1.75rem;
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(194, 113, 76, 0.12);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svc-bt-test-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(194, 113, 76, 0.1);
}

.svc-bt-test-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.svc-bt-test-head .icon {
  width: 2.75rem;
  height: 2.75rem;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-dark));
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(194, 113, 76, 0.25);
}

.svc-bt-test-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.svc-bt-test-titles h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1E2A23;
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

.svc-bt-test-duration {
  font-size: 0.825rem;
  color: var(--text-gray);
}

.svc-bt-test-duration i {
  color: var(--brand-accent, #6E9583);
  margin-right: 0.25rem;
}

.svc-bt-test-price {
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--brand-accent, #6E9583);
  line-height: 1.1;
  flex-shrink: 0;
}

.svc-bt-test-why {
  font-size: 0.95rem;
  color: var(--text-gray);
  line-height: 1.65;
  margin: 0 0 1rem;
}

.svc-bt-test-includes {
  font-size: 0.9rem;
  color: var(--text-gray);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  background: rgba(110, 149, 131, 0.07);
  border-left: 3px solid var(--brand-accent, #6E9583);
  border-radius: 0 0.5rem 0.5rem 0;
}

.svc-bt-test-includes strong {
  color: #1E2A23;
}

/* Itemised marker list. Sits inside the same shaded, accent-bordered box the
   single-sentence version used, so the card's rhythm is unchanged. */
.svc-bt-test-includes-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1E2A23;
  margin-bottom: 0.6rem;
}

.svc-bt-test-markers {
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-bt-test-markers li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #3F4A44;
}

.svc-bt-test-markers li:last-child {
  margin-bottom: 0;
}

/* Drawn rather than a list marker, so the bullet colour matches the accent
   border and the hanging indent stays exact on wrapped lines. */
.svc-bt-test-markers li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-accent, #6E9583);
}

.svc-bt-test-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.svc-bt-test-book {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  background: var(--brand-accent, #6E9583);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s ease;
}

.svc-bt-test-book:hover {
  background: var(--brand-dark, #1E2A23);
  color: var(--white);
}

.svc-bt-test-more {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-accent, #6E9583);
  text-decoration: none;
}

.svc-bt-test-more i {
  margin-left: 0.35rem;
  font-size: 0.8rem;
  transition: transform 0.25s ease;
  display: inline-block;
}

.svc-bt-test-more:hover i {
  transform: translateX(3px);
}

.svc-bt-test-footnote {
  margin: 2rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-gray);
}

/* --- Price table --- */
.svc-bt-price-table {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 1.25rem;
  border: 1px solid rgba(194, 113, 76, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.svc-bt-price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name    value"
    "results value";
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(194, 113, 76, 0.1);
}

/* Three columns once there is room: test / results / price */
@media (min-width: 720px) {
  .svc-bt-price-row {
    grid-template-columns: 1fr minmax(9rem, auto) auto;
    grid-template-areas: "name results value";
    gap: 1.5rem;
  }
}

.svc-bt-price-results {
  grid-area: results;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.svc-bt-price-results-label {
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-gray, #5B655E);
}

.svc-bt-price-results-value {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-dark, #234F3A);
}

.svc-bt-price-appt {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-gray, #5B655E);
}

.svc-bt-price-row:last-child {
  border-bottom: 0;
}

.svc-bt-price-name {
  grid-area: name;
  font-weight: 700;
  color: #1E2A23;
  font-size: 1rem;
}

.svc-bt-price-meta {
  grid-area: meta;
  font-size: 0.85rem;
  color: var(--text-gray);
}

.svc-bt-price-value {
  grid-area: value;
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand-accent, #6E9583);
  white-space: nowrap;
}

.svc-bt-price-actions {
  margin-top: 2rem;
  text-align: center;
}

/* ============================================
   TRAVEL CHECKLIST — timeline, checklist,
   YFVC callout, destination + vaccine grids.
   ============================================ */

/* --- Timeline --- */
.svc-tc-timeline {
  display: grid;
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.svc-tc-timeline-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  background: var(--white);
  padding: 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(194, 113, 76, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

@media (min-width: 700px) {
  .svc-tc-timeline-item {
    grid-template-columns: 130px 1fr;
    gap: 1.75rem;
    align-items: start;
  }
}

.svc-tc-timeline-marker {
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-accent, #6E9583);
  padding-bottom: 0.35rem;
  border-bottom: 2px solid rgba(110, 149, 131, 0.25);
  align-self: start;
}

.svc-tc-timeline-body h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1E2A23;
  margin: 0 0 0.5rem;
}

.svc-tc-timeline-body p {
  font-size: 0.975rem;
  color: var(--text-gray);
  line-height: 1.65;
  margin: 0;
}

/* --- Numbered checklist --- */
.svc-tc-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 800px) {
  .svc-tc-checklist {
    grid-template-columns: 1fr 1fr;
  }
}

.svc-tc-check-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--white);
  padding: 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(194, 113, 76, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.svc-tc-check-num {
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(110, 149, 131, 0.45);
  line-height: 1;
  flex-shrink: 0;
}

.svc-tc-check-item h3 {
  font-size: 1.075rem;
  font-weight: 800;
  color: #1E2A23;
  margin: 0 0 0.45rem;
}

.svc-tc-check-item p {
  font-size: 0.95rem;
  color: var(--text-gray);
  line-height: 1.6;
  margin: 0;
}

/* --- YFVC callout --- */
.svc-tc-yfvc-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, rgba(110, 149, 131, 0.08), rgba(194, 113, 76, 0.06));
}

.svc-tc-yfvc-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: var(--white);
  padding: 2rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(110, 149, 131, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
}

@media (min-width: 800px) {
  .svc-tc-yfvc-card {
    grid-template-columns: auto 1fr;
    gap: 2rem;
    padding: 2.75rem;
  }
}

.svc-tc-yfvc-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-dark));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(194, 113, 76, 0.28);
}

.svc-tc-yfvc-eyebrow {
  display: block;
  font-size: 0.775rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-accent, #6E9583);
  margin-bottom: 0.6rem;
}

.svc-tc-yfvc-body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1E2A23;
  margin: 0 0 1rem;
  line-height: 1.25;
}

.svc-tc-yfvc-body p {
  font-size: 1rem;
  color: var(--text-gray);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.svc-tc-yfvc-points {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

@media (min-width: 700px) {
  .svc-tc-yfvc-points {
    grid-template-columns: 1fr 1fr;
  }
}

.svc-tc-yfvc-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--text-gray);
  line-height: 1.5;
}

.svc-tc-yfvc-points li i {
  color: var(--brand-accent, #6E9583);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.svc-tc-yfvc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* --- Destination cards --- */
.svc-tc-dest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 700px) {
  .svc-tc-dest-grid { grid-template-columns: 1fr 1fr; }
}

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

.svc-tc-dest-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--white);
  padding: 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(194, 113, 76, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svc-tc-dest-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(194, 113, 76, 0.1);
}

.svc-tc-dest-flag {
  width: 40px;
  height: auto;
  border-radius: 0.25rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.svc-tc-dest-text h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1E2A23;
  margin: 0 0 0.4rem;
}

.svc-tc-dest-text p {
  font-size: 0.925rem;
  color: var(--text-gray);
  line-height: 1.55;
  margin: 0 0 0.75rem;
}

.svc-tc-dest-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-accent, #6E9583);
}

.svc-tc-dest-link i {
  margin-left: 0.3rem;
  font-size: 0.75rem;
  transition: transform 0.25s ease;
  display: inline-block;
}

.svc-tc-dest-card:hover .svc-tc-dest-link i {
  transform: translateX(3px);
}

/* --- Vaccine reference cards --- */
.svc-tc-vax-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 700px) {
  .svc-tc-vax-grid { grid-template-columns: 1fr 1fr; }
}

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

.svc-tc-vax-card {
  background: var(--white);
  padding: 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(194, 113, 76, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.svc-tc-vax-head {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  margin-bottom: 0.875rem;
}

.svc-tc-vax-head .icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-dark));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.svc-tc-vax-head h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1E2A23;
  margin: 0;
  line-height: 1.3;
}

.svc-tc-vax-lead {
  font-size: 0.8rem;
  color: var(--brand-accent, #6E9583);
  font-weight: 700;
}

.svc-tc-vax-card p {
  font-size: 0.925rem;
  color: var(--text-gray);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.svc-tc-vax-card .svc-bt-test-more {
  margin-top: auto;
}

/* ============================================
   FLU JAB / CONTRACEPTION — eligibility grid
   and the private-offer callout card.
   ============================================ */

.svc-flu-elig-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 700px) {
  .svc-flu-elig-grid { grid-template-columns: 1fr 1fr; }
}

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

.svc-flu-elig-card {
  background: var(--white);
  padding: 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(194, 113, 76, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.svc-flu-elig-card .icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-dark));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 10px rgba(194, 113, 76, 0.25);
}

.svc-flu-elig-card h3 {
  font-size: 1.075rem;
  font-weight: 800;
  color: #1E2A23;
  margin: 0 0 0.5rem;
}

.svc-flu-elig-card p {
  font-size: 0.925rem;
  color: var(--text-gray);
  line-height: 1.6;
  margin: 0;
}

/* --- Private-offer / price callout card --- */
.svc-flu-private-card {
  max-width: 860px;
  margin: 0 auto;
  background: var(--white);
  padding: 2rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(110, 149, 131, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
}

@media (min-width: 800px) {
  .svc-flu-private-card { padding: 2.75rem; }
}

.svc-flu-private-body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1E2A23;
  margin: 0 0 1rem;
  line-height: 1.25;
}

.svc-flu-private-body > p {
  font-size: 1rem;
  color: var(--text-gray);
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

.svc-flu-private-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.5rem 0;
}

.svc-flu-private-price .value {
  font-family: var(--font-accent, 'Syne', sans-serif);
  font-size: 2.75rem;
  font-weight: 700;
  /* Was --brand-accent, 2.79:1 against the brand-light card — below the 3:1
     large-text floor, on the one number in this card that has to be read.
     --brand-purple is 5.27:1. */
  color: var(--brand-purple, #2F6B4E);
  line-height: 1;
}

.svc-flu-private-price .label {
  font-size: 0.95rem;
  color: var(--text-gray);
}

.svc-flu-private-noprice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--text-gray);
  line-height: 1.6;
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  background: rgba(110, 149, 131, 0.08);
  border-radius: 0.75rem;
}

.svc-flu-private-noprice i {
  /* Was --brand-accent, 2.79:1 against the brand-light card. */
  color: var(--brand-purple, #2F6B4E);
  margin-top: 0.15rem;
  flex-shrink: 0;
}


/* ============================================
   ELIGIBILITY HONESTY SECTION (svc pages)
   ============================================ */
.svc-eligibility-section {
  padding: 5rem 0;
  background: var(--cream, #F7F2E8);
}

.svc-elig-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 920px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .svc-elig-grid { grid-template-columns: 1fr 1fr; }
}

.svc-elig-card {
  background: var(--white);
  border: 1px solid var(--border, #E6DFD0);
  border-radius: 1.25rem;
  padding: 2rem;
}

.svc-elig-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
}

.svc-elig-card.free .svc-elig-card-badge {
  background: #E4EDE6;
  color: #234F3A;
}

.svc-elig-card.private .svc-elig-card-badge {
  background: rgba(194, 113, 76, 0.12);
  color: #A85D3C;
}

.svc-elig-card h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--text-dark, #1E2A23);
  margin-bottom: 0.75rem;
}

.svc-elig-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-gray, #5B655E);
}

.svc-elig-note {
  max-width: 720px;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-gray, #5B655E);
}

.svc-elig-note a {
  color: var(--brand-dark, #234F3A);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svc-schedule-section {
  padding: 5rem 0;
  background: var(--white);
}

/* ============================================
   CROSS-SELL BAND (svc pages)
   ============================================ */
.svc-crosssell-band {
  padding: 2.5rem 0;
  background: var(--brand-dark, #234F3A);
}

.svc-crosssell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  text-align: center;
}

.svc-crosssell-inner > i {
  font-size: 1.5rem;
  color: #F4C542;
}

.svc-crosssell-inner p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 520px;
}

.svc-crosssell-inner p strong {
  color: var(--white);
}

.svc-crosssell-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #F4C542;
  text-decoration: none;
  white-space: nowrap;
}

.svc-crosssell-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================
   PHARMACY FIRST — CONDITION PAGES (.pfc-*)
   ============================================ */
.pfc-elig-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .pfc-elig-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.svc-elig-card.redflag {
  border: 1px solid rgba(194, 113, 76, 0.35);
  background: #FDF8F4;
}

.svc-elig-card.redflag .svc-elig-card-badge {
  background: rgba(194, 113, 76, 0.14);
  color: #A85D3C;
}

.pfc-elig-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pfc-elig-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-dark, #1E2A23);
}

.pfc-elig-list li i {
  flex-shrink: 0;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--brand-purple, #2F6B4E);
}

.svc-elig-card.redflag .pfc-elig-list li i {
  color: #A85D3C;
}

.pfc-redflag-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #A85D3C;
}

.pfc-treatment-section {
  padding: 4rem 0;
  background: var(--white);
}

.pfc-treatment-card {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  max-width: 860px;
  margin: 0 auto;
  background: var(--cream, #F7F2E8);
  border-radius: 1.25rem;
  padding: 2.25rem;
}

.pfc-treatment-icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--brand-dark, #234F3A);
  color: #F7F2E8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.pfc-treatment-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--text-dark, #1E2A23);
  margin-bottom: 0.75rem;
}

.pfc-treatment-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark, #1E2A23);
  margin-bottom: 1rem;
}

.pfc-treatment-note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-gray, #5B655E);
}

@media (max-width: 640px) {
  .pfc-treatment-card { flex-direction: column; gap: 1.25rem; }
}

.pfc-steps-section {
  padding: 4rem 0 5rem;
  background: var(--white);
}

.pfc-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .pfc-steps-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.pfc-step {
  background: var(--white);
  border: 1px solid var(--border, #E6DFD0);
  border-radius: 1.25rem;
  padding: 2rem;
  text-align: center;
}

.pfc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--brand-light, #E4EDE6);
  color: var(--brand-dark, #234F3A);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.pfc-step h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text-dark, #1E2A23);
  margin-bottom: 0.5rem;
}

.pfc-step p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-gray, #5B655E);
}

.pfc-others-section {
  padding: 3.5rem 0 4.5rem;
  background: var(--cream, #F7F2E8);
  text-align: center;
}

.pfc-others-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-gray, #5B655E);
  margin-bottom: 1.25rem;
}

.pfc-others-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 860px;
  margin: 0 auto 1.5rem;
}

.pfc-other-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  border: 1px solid var(--border, #E6DFD0);
  border-radius: 9999px;
  padding: 0.6rem 1.2rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark, #1E2A23);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pfc-other-chip:hover {
  border-color: var(--brand-dark, #234F3A);
  box-shadow: 0 4px 14px -6px rgba(35, 79, 58, 0.25);
}

.pfc-other-chip span {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text-gray, #5B655E);
}

.pfc-others-hub a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--brand-dark, #234F3A);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hub condition cards are now links to the condition pages */
.pf-condition-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Emoji flag variant for the travel checklist destination cards */
.svc-tc-dest-flag-emoji {
  font-size: 1.75rem;
  line-height: 1;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}


/* ============================================================
   ABOUT US / OUR TEAM  (.abt-*)
   Credential-led team layout. Portraits are deliberately optional:
   the monogram + verifiable GPhC badge carries the trust signal, so
   a missing photo reads as a design decision rather than a gap.
   ============================================================ */

.abt-hero {
  padding: 4rem 0 0;
  background: linear-gradient(180deg, var(--brand-light, #E4EDE6) 0%, var(--cream, #F7F2E8) 100%);
}

.abt-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 3rem;
}

.abt-hero-eyebrow,
.abt-section-eyebrow {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand-purple, #2F6B4E);
  margin-bottom: 1rem;
}

.abt-hero-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--brand-dark, #234F3A);
  margin-bottom: 1.125rem;
}

.abt-hero-desc {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-gray, #5B655E);
}

.abt-hero-figure {
  margin: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(35, 79, 58, 0.35);
  transform: translateY(3rem);
}

.abt-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Pharmacy Manager feature ---------- */
.abt-manager {
  padding: 7rem 0 5rem;
  background: var(--white);
}

.abt-manager-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .abt-manager-grid {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

.abt-manager-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: 0 18px 44px -20px rgba(35, 79, 58, 0.4);
}

.abt-manager-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-light, #E4EDE6);
}

.abt-mono-text {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 4rem;
  color: var(--brand-dark, #234F3A);
  letter-spacing: -0.02em;
}

.abt-manager-cred {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.abt-manager-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand-dark, #234F3A);
  margin-bottom: 0.3rem;
}

.abt-manager-role {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--terracotta, #C2714C);
  margin-bottom: 1.25rem;
}

.abt-manager-bio p {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-dark, #1E2A23);
  margin-bottom: 1rem;
}

.abt-manager-bio p:last-child {
  margin-bottom: 0;
}

/* ---------- Credential chips ---------- */
.abt-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.abt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--brand-light, #E4EDE6);
  color: var(--brand-dark, #234F3A);
  border-radius: 9999px;
  padding: 0.45rem 0.95rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.abt-chip i {
  font-size: 0.6875rem;
}

/* ---------- Verifiable registration badge ---------- */
.abt-cred-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--brand-dark, #234F3A);
  color: var(--cream, #F7F2E8);
  border-radius: 9999px;
  padding: 0.45rem 0.95rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease;
}

.abt-cred-badge:hover {
  background: var(--brand-purple, #2F6B4E);
}

.abt-cred-ext {
  font-size: 0.625rem;
  opacity: 0.75;
}

.abt-cred-type,
.abt-cred-qual {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-gray, #5B655E);
}

/* ---------- Team grid ---------- */
.abt-team-section {
  padding: 5rem 0 6rem;
  background: var(--cream, #F7F2E8);
}

.abt-team-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 3rem;
}

.abt-team-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand-dark, #234F3A);
  margin-bottom: 0.85rem;
}

.abt-team-desc {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-gray, #5B655E);
}

.abt-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 720px) {
  .abt-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.abt-card {
  background: var(--white);
  border: 1px solid var(--border, #E6DFD0);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.abt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -20px rgba(35, 79, 58, 0.28);
}

/* Superintendent leads the grid — full width, weighted treatment. */
@media (min-width: 720px) {
  .abt-card-lead {
    grid-column: 1 / -1;
    background: var(--brand-dark, #234F3A);
    border-color: var(--brand-dark, #234F3A);
  }
}

.abt-card-head {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-bottom: 1.25rem;
}

.abt-mono {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: var(--brand-light, #E4EDE6);
  color: var(--brand-dark, #234F3A);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.abt-card-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brand-dark, #234F3A);
  margin-bottom: 0.15rem;
}

.abt-card-role {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--terracotta, #C2714C);
}

.abt-card-cred {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.125rem;
}

.abt-card-bio {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-dark, #1E2A23);
}

/* Lead card inversion */
.abt-card-lead .abt-mono {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cream, #F7F2E8);
}

.abt-card-lead .abt-card-name { color: var(--white); }
.abt-card-lead .abt-card-role { color: #F4C542; }
.abt-card-lead .abt-card-bio { color: rgba(255, 255, 255, 0.85); }
.abt-card-lead .abt-cred-qual { color: rgba(255, 255, 255, 0.7); }

.abt-card-lead .abt-cred-badge {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--cream, #F7F2E8);
}

.abt-card-lead .abt-cred-badge:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ---------- Regulatory note ---------- */
.abt-reg-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 2.5rem auto 0;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-gray, #5B655E);
}

.abt-reg-note i {
  margin-top: 0.25rem;
  color: var(--brand-purple, #2F6B4E);
}

.abt-reg-note a {
  color: var(--brand-dark, #234F3A);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   BLOOD TEST — 3-column stepper (was a 2-col grid orphaning step 3)
   ============================================================ */
.svc-bt-stepper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  position: relative;
}

@media (min-width: 860px) {
  .svc-bt-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  /* Thin connecting rule running behind the three steps. */
  .svc-bt-stepper::before {
    content: '';
    position: absolute;
    top: 3.25rem;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg,
      transparent,
      var(--border, #E6DFD0) 12%,
      var(--border, #E6DFD0) 88%,
      transparent);
    z-index: 0;
  }
}

.svc-bt-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: 2rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border, #E6DFD0);
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px -18px rgba(35, 79, 58, 0.25);
}

.svc-bt-step-num {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand-light, #E4EDE6);
  margin-bottom: -0.75rem;
}

.svc-bt-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--brand-dark, #234F3A);
  color: var(--cream, #F7F2E8);
  font-size: 1.125rem;
  margin-bottom: 1.1rem;
}

.svc-bt-step-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--brand-dark, #234F3A);
  margin-bottom: 0.55rem;
}

.svc-bt-step-desc {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-gray, #5B655E);
  margin: 0;
}

/* Areas-served line under the location block */
/*
 * Areas served — a closing caption to the location block above it.
 *
 * This is a bare <p> sitting between two sections, and it had no background,
 * so the body cream showed through as a stray beige band between the white
 * location section and the green CTA. It also had zero bottom padding, which
 * put the line flush against the green.
 *
 * White continues the location section it belongs to, and the padding gives
 * it room to breathe before the CTA.
 */
.svc-bt-areas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: #FFFFFF;
  padding: 0.5rem 1.5rem 4rem;
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 500;
  color: #3F4A44;
  text-align: center;
}

.svc-bt-areas i {
  color: var(--brand-purple, #2F6B4E);
}

/* ============================================================
   STICKY CTA BAR — mobile only.
   The partial shipped with no stylesheet at all, so it would have
   rendered as unstyled markup even once included.
   ============================================================ */
.sticky-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--brand-dark, #234F3A);
  box-shadow: 0 -8px 30px -10px rgba(0, 0, 0, 0.35);
  transform: translateY(110%);
  transition: transform 0.32s ease;
}

.sticky-cta-bar.sticky-cta-visible { transform: translateY(0); }
.sticky-cta-bar.sticky-cta-hidden  { display: none !important; }

/* Mobile only — desktop already has persistent CTAs in view. */
@media (max-width: 860px) {
  .sticky-cta-bar { display: flex; }
}

.sticky-cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

.sticky-cta-text { display: none; }

@media (min-width: 480px) {
  .sticky-cta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
}

.sticky-cta-title {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-cta-subtitle {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-cta-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.sticky-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1.1rem;
  border-radius: 9999px;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.sticky-cta-primary {
  background: var(--terracotta, #C2714C);
  color: var(--white);
  flex: 1 1 auto;
}

.sticky-cta-secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
}

.sticky-cta-secondary .desktop-only { display: none; }

.sticky-cta-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 0.75rem;
}

/* Keep the bar clear of the Amelia form's own controls. */
.ep-booking-embed { padding-bottom: 5.5rem; }


/* ============================================================
   PATIENT REVIEWS (.rv-*)
   ============================================================ */
.rv-eyebrow {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand-purple, #2F6B4E);
  margin-bottom: 0.9rem;
}

/* ---------- Hero ---------- */
.rv-hero {
  padding: 4.5rem 0 4rem;
  background: linear-gradient(180deg, var(--brand-light, #E4EDE6) 0%, var(--cream, #F7F2E8) 100%);
}

.rv-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .rv-hero-inner {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 4rem;
  }
}

.rv-hero-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border-radius: 1.75rem;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 50px -25px rgba(35, 79, 58, 0.45);
}

.rv-score-number {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 5rem;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--brand-dark, #234F3A);
}

.rv-score-outof {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-gray, #5B655E);
  margin-top: 0.4rem;
}

.rv-score-stars {
  display: flex;
  gap: 0.2rem;
  margin: 0.9rem 0 0.6rem;
}

.rv-score-stars i {
  color: #F4B400;
  font-size: 1.0625rem;
}

.rv-score-count {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark, #1E2A23);
}

.rv-hero-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--brand-dark, #234F3A);
  margin-bottom: 1rem;
}

.rv-hero-desc {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-gray, #5B655E);
  margin-bottom: 1.5rem;
  max-width: 46rem;
}

/* ---------- Distribution bars ---------- */
.rv-dist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 26rem;
}

.rv-dist-row {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
}

.rv-dist-star {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-dark, #1E2A23);
}

.rv-dist-star i {
  font-size: 0.6875rem;
  color: #F4B400;
}

.rv-dist-track {
  height: 8px;
  border-radius: 9999px;
  background: rgba(35, 79, 58, 0.1);
  overflow: hidden;
}

.rv-dist-fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--brand-dark, #234F3A);
}

.rv-dist-count {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  color: var(--text-gray, #5B655E);
  text-align: right;
}

.rv-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-dark, #234F3A);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rv-hero-link i.fa-arrow-up-right-from-square { font-size: 0.6875rem; }

/* ---------- The fork ---------- */
.rv-fork-section {
  padding: 5rem 0;
  background: var(--white);
}

.rv-fork-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.rv-fork-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand-dark, #234F3A);
  margin-bottom: 0.75rem;
}

.rv-fork-desc {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  color: var(--text-gray, #5B655E);
}

.rv-fork-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: 980px;
  margin: 0 auto;
}

@media (min-width: 820px) {
  .rv-fork-grid { grid-template-columns: 1fr 1fr; }
}

.rv-fork-card {
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  padding: 2.25rem;
  border: 1px solid var(--border, #E6DFD0);
}

.rv-fork-good {
  background: var(--brand-dark, #234F3A);
  border-color: var(--brand-dark, #234F3A);
  color: var(--cream, #F7F2E8);
}

.rv-fork-bad { background: var(--cream, #F7F2E8); }

.rv-fork-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
}

.rv-fork-good .rv-fork-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #F4C542;
}

.rv-fork-bad .rv-fork-icon {
  background: var(--brand-light, #E4EDE6);
  color: var(--brand-dark, #234F3A);
}

.rv-fork-card-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.rv-fork-good .rv-fork-card-title { color: var(--white); }
.rv-fork-bad .rv-fork-card-title  { color: var(--brand-dark, #234F3A); }

.rv-fork-card-text {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.rv-fork-good .rv-fork-card-text { color: rgba(255, 255, 255, 0.85); }
.rv-fork-bad .rv-fork-card-text  { color: var(--text-dark, #1E2A23); }

.rv-fork-cta { align-self: flex-start; }

.rv-fork-contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.rv-fork-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-dark, #234F3A);
  text-decoration: none;
}

.rv-fork-contact-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv-fork-contact-link i { color: var(--brand-purple, #2F6B4E); }

.rv-fork-note {
  margin-top: auto;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.rv-fork-good .rv-fork-note { color: rgba(255, 255, 255, 0.65); }
.rv-fork-bad .rv-fork-note  { color: var(--text-gray, #5B655E); }

/* ---------- QR ---------- */
.rv-qr-section {
  padding: 0 0 5rem;
  background: var(--white);
}

.rv-qr-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem;
  background: var(--cream, #F7F2E8);
  border: 1px solid var(--border, #E6DFD0);
  border-radius: 1.5rem;
}

@media (min-width: 720px) {
  .rv-qr-card { grid-template-columns: 200px 1fr; gap: 3rem; }
}

.rv-qr-media {
  background: var(--white);
  border-radius: 1.25rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rv-qr-img { display: block; width: 100%; height: auto; }

.rv-qr-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  color: var(--brand-dark, #234F3A);
  margin-bottom: 0.6rem;
}

.rv-qr-desc {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-gray, #5B655E);
  margin-bottom: 1.5rem;
}

.rv-qr-print { cursor: pointer; }

/* ---------- Policy cards ---------- */
.rv-policy-section {
  padding: 5rem 0 6rem;
  background: var(--cream, #F7F2E8);
}

.rv-policy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 720px) { .rv-policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rv-policy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rv-policy-card {
  background: var(--white);
  border: 1px solid var(--border, #E6DFD0);
  border-radius: 1.25rem;
  padding: 1.75rem;
}

.rv-policy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
  background: var(--brand-light, #E4EDE6);
  color: var(--brand-dark, #234F3A);
  margin-bottom: 1rem;
}

.rv-policy-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--brand-dark, #234F3A);
  margin-bottom: 0.5rem;
}

.rv-policy-text {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-gray, #5B655E);
}

.rv-reg-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 2.5rem auto 0;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-gray, #5B655E);
}

.rv-reg-note i { margin-top: 0.25rem; color: var(--brand-purple, #2F6B4E); }
.rv-reg-note strong { color: var(--text-dark, #1E2A23); }
.rv-reg-note a {
  color: var(--brand-dark, #234F3A);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Print: just the QR card, for the counter ---------- */
@media print {
  body * { visibility: hidden; }
  .rv-qr-card, .rv-qr-card * { visibility: visible; }
  .rv-qr-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 0;
    background: #fff;
  }
  .rv-qr-print { display: none; }
}

/* C17 — client-supplied blood test results note, above the stepper */
.svc-bt-results-note {
  max-width: 760px;
  margin: 0 auto 2rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-gray, #5B655E);
}

/* ---------------------------------------------------------------------------
   Flu jab — route chooser
   Sits directly under the hero. Two routes, NHS first, because most visitors
   are eligible and the page's main job is sending them to the right place.
   --------------------------------------------------------------------------- */

.svc-flu-routes-section {
  padding: 3.5rem 0 1rem;
  background: var(--brand-light, #E4EDE6);
}

@media (min-width: 800px) {
  .svc-flu-routes-section { padding: 4.5rem 0 1.5rem; }
}

.svc-flu-routes-header {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 2rem;
}

.svc-flu-routes-title {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800;
  color: #1E2A23;
  margin: 0 0 .6rem;
  line-height: 1.2;
  text-wrap: balance;
}

.svc-flu-routes-sub {
  font-size: 1rem;
  line-height: 1.65;
  color: #44544B;
  margin: 0;
}

.svc-flu-routes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 860px) {
  .svc-flu-routes-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.svc-flu-route {
  background: var(--white, #fff);
  border: 1px solid rgba(110, 149, 131, 0.3);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

@media (min-width: 800px) {
  .svc-flu-route { padding: 2.25rem; }
}

/* The NHS route is the one most visitors need — give it the accent edge. */
.svc-flu-route--nhs {
  border-top: 4px solid var(--brand-purple, #2F6B4E);
}

.svc-flu-route--private {
  border-top: 4px solid var(--brand-accent, #6E9583);
}

.svc-flu-route-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-purple, #2F6B4E);
}

.svc-flu-route-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1E2A23;
  margin: 0;
  line-height: 1.25;
}

.svc-flu-route-body {
  font-size: 1rem;
  line-height: 1.7;
  color: #44544B;
  margin: 0;
}

.svc-flu-route-body strong { color: #1E2A23; }

/* Push the actions to the bottom so both cards' buttons line up. */
.svc-flu-route-actions {
  margin-top: auto;
  padding-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.svc-flu-route-actions .cta-button { justify-content: center; }

.svc-flu-route-link {
  font-size: .92rem;
  font-weight: 600;
  color: var(--brand-purple, #2F6B4E);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svc-flu-route-link:hover,
.svc-flu-route-link:focus-visible { color: var(--brand-dark, #234F3A); }

/*
 * A long-form note under a section.
 *
 * .svc-risk-footer .info-badge is the other note on this stylesheet, and it
 * is a PILL -- border-radius: 9999px, one line of centred text. Put two
 * sentences in it and it becomes a lozenge running the full container width.
 * This is the component for anything longer: capped measure, left-aligned,
 * icon in its own column so the text block stays square.
 *
 * .svc-flu-routes-note is the original name, kept because the flu page's
 * route chooser uses it. New work takes .svc-note-panel; the two are the same
 * component and the flu usage can move over whenever that page is next
 * touched.
 */
.svc-note-panel,
.svc-flu-routes-note {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  max-width: 54rem;
  margin: 1.75rem auto 0;
  padding: 1rem 1.15rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(110, 149, 131, 0.3);
  font-size: .93rem;
  line-height: 1.6;
  /* Left, not inherited. .svc-risk-footer centres its children, which is
     right for a pill and wrong for a paragraph. */
  text-align: left;
  color: #3B4A42;                      /* 8.29:1 on --brand-light */
}

.svc-note-panel i,
.svc-flu-routes-note i {
  color: var(--brand-purple, #2F6B4E);
  margin-top: .2rem;
  flex: none;
}

/*
 * Links inside cards and notes.
 *
 * globals.css sets a { color: inherit; text-decoration: none } for the whole
 * site, which is right for nav and card-wide links and wrong for a link
 * inside a paragraph -- it renders as plain body text with no affordance at
 * all. These three contexts carry inline links, so they get one.
 *
 * The card rules inherit their colour deliberately: .svc-needs-card comes in
 * a green variant (#14532d) and an amber one (#92400e), and a fixed link
 * colour would fight one of them. The underline carries the affordance
 * instead. .svc-info-card sits on white, where brand-dark measures 7.80:1, so
 * that one can take a colour.
 */
.svc-needs-card a,
.svc-note-panel a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svc-info-card p a {
  color: var(--brand-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.svc-needs-card a:hover,
.svc-note-panel a:hover,
.svc-info-card p a:hover { text-decoration-thickness: 2px; }


/* ============================================
   PANELLED CONTENT SECTIONS
   ============================================
   Shared by the prescriptions and COVID vaccination pages, and available to
   any service page that needs a bounded list or a row of fact tiles.

   Opted into with .svc-panelled on the <section>, rather than by editing the
   base .svc-about-* classes that eight other templates depend on. The measure
   and weight problems these rules correct exist on those pages too and are
   worth fixing globally, but that is a change to make deliberately rather
   than as a side effect of styling a page.

   THE HOOK IS NOT CALLED .svc-prose, AND MUST NOT BE.

   It was, and that name was already taken: .svc-prose (see "Full-width
   prose", above) is a TEXT-BLOCK measure -- max-width: 68ch, centred -- for a
   standalone run of copy used outside .svc-about-content-grid. Put on a
   <section>, it clamps the whole section to 68ch and centres it, background
   and all, so the COVID and prescriptions pages rendered as a ~740px column
   of brand-light floating in the cream body on a 1900px screen. The rules
   below never fired on anything wide enough to need them.

   .svc-prose is still correct on a <div> of copy (chikungunya, Japanese
   encephalitis use it that way). A section modifier needs its own name.
   ============================================ */

/*
 * Measure.
 *
 * .svc-about-desc and .svc-needs-desc carry no max-width, so inside a 1400px
 * container the intro paragraph ran to roughly 150 characters a line -- about
 * twice a readable measure, and the single biggest reason this page looked
 * unconsidered. They also inherit weight 400 at --text-gray (#5B655E, 5.06:1),
 * which passes AA and still reads thin. Same fault, and same fix, as the hero
 * lede on the home page.
 */
.svc-panelled .svc-about-desc,
.svc-panelled .svc-needs-desc {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  line-height: 1.65;
  color: #414B44;                      /* 7.58:1 on --brand-light */
}

.svc-panelled .svc-about-title,
.svc-panelled .svc-needs-title {
  color: var(--brand-dark);            /* 7.80:1 — brand green, not near-black */
}

/*
 * Paired panels.
 *
 * The lists first used .svc-bt-test-markers -- the blood test page's marker
 * list, 14.4px at weight 400, built to sit inside a narrow card. Bare on a
 * full-width sage section it had no container, measure or weight.
 *
 * Panelling them fixed that but left a worse problem: three consecutive
 * sections of badge, centred heading, centred paragraph, white panel. The
 * content differed and the shape did not, which is what made the page feel
 * like it would not stop scrolling. NHS repeat and private now sit side by
 * side in one section, so they compare rather than queue.
 *
 * NO MAX-WIDTH. This grid and .svc-facts below were capped at 68rem while the
 * section container runs to 1400px and the centred headers cap at 46rem --
 * three different measures stacked down one page, which is what made the
 * COVID page read as a narrow fixed-width column dropped into a full-width
 * site. No other grid in this stylesheet is capped: .svc-about-cards-grid,
 * .svc-needs-grid, .svc-flu-elig-grid and .svc-flu-routes-grid all fill the
 * container and let the COLUMN COUNT hold the measure. Two up at 1400px gives
 * ~662px columns -- about 74 characters inside the panel padding -- and
 * matches the flu page's routes grid. A cap on the grid is not how to get a
 * measure.
 */
.svc-panel-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .svc-panel-duo {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }
}

/*
 * Three up.
 *
 * For a set of three that belongs together and would otherwise be a panel
 * plus an orphaned duo -- common side effects, then the NHS 111 and 999
 * escalation triggers. Previously those were a full-width box with a pair
 * underneath, which read as two unrelated topics instead of the two ends of
 * one scale.
 *
 * Three columns need roughly 1100px of container before each one is a sane
 * measure, so between the phone stack and that point the grid is two up. That
 * leaves one panel on its own row: it spans the row and is then capped back
 * to a single column's width and centred, so it matches its siblings instead
 * of sitting half-width against dead space on the right.
 */
.svc-panel-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 700px) {
  .svc-panel-trio {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }

  /* Only bites when the count is odd; with an even count nothing is orphaned
     and :last-child already fills its own column. */
  .svc-panel-trio > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.875rem);   /* half the row, less half the gap */
    margin-inline: auto;
  }
}

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

  .svc-panel-trio > :last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }
}

.svc-panel {
  display: flex;
  flex-direction: column;
  padding: 2rem 2.25rem 2.25rem;
  background: var(--white);
  border: 1px solid rgba(194, 113, 76, 0.12);
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.svc-panel-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(35, 79, 58, 0.12);
}

.svc-panel-head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-dark);            /* 7.80:1 on white */
}

.svc-panel-icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-dark));
  color: #fff;
  font-size: 0.9375rem;
}

.svc-panel-note {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(35, 79, 58, 0.12);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  color: #414B44;
}

.svc-panel-note i {
  color: var(--brand-dark);
  margin-right: 0.4rem;
}

/*
 * Charges as tiles, not a fourth list. These four points are independent of
 * each other, so a grid suits them better than a sequence -- and after two
 * panels of rules the page needs a different shape more than another one.
 */
.svc-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

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

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

.svc-fact {
  padding: 1.75rem 1.5rem;
  background: var(--white);
  border: 1px solid rgba(194, 113, 76, 0.12);
  border-radius: 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.svc-fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.7rem;
  background: var(--brand-light);
  color: var(--brand-dark);            /* 7.80:1 on --brand-light */
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.svc-fact h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-dark);
}

.svc-fact p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  color: #414B44;                      /* 9.07:1 on white */
}

.svc-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-panel-list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  color: #414B44;                      /* 7.58:1 on white */
}

.svc-panel-list li + li {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(35, 79, 58, 0.10);
}

/* Aligned to the cap height of the first line rather than the line box, so it
   sits level with the text instead of floating above it. */
.svc-panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brand-dark);
}

.svc-panel-list li + li::before {
  top: calc(1.15rem + 1px + 0.62em);
}

/* The panels supply their own edge, so the header does not need a 4rem gap
   under it as well. */
.svc-panelled .svc-about-header {
  margin-bottom: 2.5rem;
}

.svc-panelled .svc-note {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .svc-panel {
    padding: 1.5rem 1.35rem;
    border-radius: 1.25rem;
  }

  .svc-panel-list li {
    font-size: 0.9375rem;
  }
}


/*
 * A dated line under a service hero — a campaign window, an appointment
 * period. Sits on the hero's dark overlay, so it takes the same near-white
 * treatment as .svc-hero-description rather than body ink.
 */
.svc-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
}

.svc-hero-note i {
  font-size: 0.8125rem;
  opacity: 0.9;
}