/* ============================================================
   HHCC DESIGN SYSTEM v1
   Tokens, base, utilities, then components in the order they
   appear on a canonical page. Single source of truth.
   ============================================================ */

/* ---------- METRIC-MATCHED FONT FALLBACKS ----------
   The local fallback is sized to occupy the same space as the web font, so
   there is no layout shift (CLS) when Poppins / Playfair swap in on slow loads.
   Values computed from font metrics (capsize); do not hand-edit. */
@font-face {
  font-family: "Playfair Display Fallback";
  src: local("Georgia");
  size-adjust: 101.3906%;
  ascent-override: 106.716%;
  descent-override: 24.7558%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial");
  size-adjust: 112.1577%;
  ascent-override: 93.6182%;
  descent-override: 31.2061%;
  line-gap-override: 8.916%;
}
/* The desktop menu is set in capitals with letter-spacing, where Arial at the body
   fallback's 112% runs about 15% wider than Poppins.  On a first visit, before
   Poppins is cached, that pushed the menu onto two lines on 1366 to 1470px screens
   and took the header from 155px to 242px.  This face is sized for the menu alone
   (v2.css), so the menu is the same width in either font: 1,214px, measured
   2 Oct 2026.  The three overrides are Poppins' own metrics divided by 0.925. */
@font-face {
  font-family: "Poppins Menu Fallback";
  src: local("Arial");
  size-adjust: 92.5%;
  ascent-override: 113.5135%;
  descent-override: 37.8378%;
  line-gap-override: 10.8108%;
}

/* ---------- RESET + BASE ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* A jump to a section ("Book This Panel") must land clear of the sticky header.
   Up to 1365px the header is 73 to 93px and a section's own top padding nearly
   clears it: 20px more shows the small label above the heading (it was hidden
   on phones).  From 1366px the header is 155px and covered the heading too. */
html { scroll-padding-top: 20px; }
@media (min-width: 1366px) { html { scroll-padding-top: 80px; } }
body {
  font-family: "Poppins", "Poppins Fallback", system-ui, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--teal-deeper); }

/* ---------- DESIGN TOKENS ---------- */
:root {
  --teal: #64A0B6;
  --teal-dark: #3f7a94;
  --teal-deeper: #1f5a72;
  --teal-light: #e8f4f8;
  --teal-pale: #f4f9fb;
  --navy: #162d3a;
  --navy-mid: #1e3f52;
  --text: #2c3e50;
  --text-mid: #506070;
  --text-light: #566d79;
  --white: #ffffff;
  --off-white: #fafcfd;
  --border: #dae8ee;
  --success: #16a34a;
  --shadow-sm: 0 2px 12px rgba(100,160,182,0.12);
  --shadow-md: 0 8px 40px rgba(31,90,114,0.15);
  --shadow-lg: 0 20px 60px rgba(31,90,114,0.2);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 50px;
  --max-w: 1600px;
  --section-pad: 90px;
}

/* ---------- LAYOUT ---------- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }
.section { padding: var(--section-pad) 0; }
.section-alt { background: var(--teal-pale); }
.accent { color: var(--teal-deeper); }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5 { line-height: 1.25; color: var(--navy); }
.section-label {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--teal-deeper);
  margin-bottom: 14px; position: relative; padding-left: 20px;
}
.section-label::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 12px; height: 2px; background: var(--teal);
}
.section-title { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; margin-bottom: 18px; }
.section-desc { font-size: 16px; color: var(--text-mid); max-width: 600px; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 34px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px;
  text-decoration: none; border: none;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden;
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255,255,255,0.15); opacity: 0; transition: opacity 0.2s;
}
.btn:hover::after { opacity: 1; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(100,160,182,0.4); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--teal-deeper); color: var(--white); box-shadow: 0 4px 20px rgba(100,160,182,0.35); }
.btn-primary:hover { background: var(--navy-mid); }
.btn-outline { background: transparent; color: var(--teal-deeper); border: 2px solid var(--teal-deeper); }
.btn-outline:hover { background: var(--teal-deeper); color: var(--white); }
.btn-white { background: var(--white); color: var(--teal-deeper); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.btn-icon { width: 20px; height: 20px; }

/* ---------- TOP BAR (two-row utility + nav) ---------- */
.top-bar {
  background: var(--white);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
.top-bar-utility {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.top-bar-utility-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* When the header is short of room (folded foldables, portrait tablets) the logo
   gives up width, not the phone number or the Book button: those stay on one
   line (see .top-bar-actions).  object-fit scales the logo to its narrower box
   in proportion; it used to be squashed sideways. */
.logo-wrap { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.logo-wrap img { height: 48px; width: auto; object-fit: contain; object-position: left center; }
/* Header shows logo only (left, links to home); practice-name text hidden site-wide. */
.practice-name { display: none; }
.practice-name-accent { color: var(--teal); }
.top-bar-actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; white-space: nowrap; }
.top-bar-phone {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--navy); text-decoration: none; transition: color 0.2s;
}
.top-bar-phone:hover { color: var(--teal); }
.top-bar-phone svg { width: 18px; height: 18px; color: var(--teal); flex-shrink: 0; }
.top-bar-phone-text { display: flex; flex-direction: column; line-height: 1.2; }
.top-bar-phone-label { font-size: 10px; font-weight: 500; color: var(--text-light); letter-spacing: 1px; text-transform: uppercase; }
.top-bar-phone-num { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: 0.2px; }
.top-bar-phone:hover .top-bar-phone-num { color: var(--teal); }
.top-bar-book { padding: 12px 24px; font-size: 14px; }
.top-bar-email .top-bar-phone-num { font-size: 13px; font-weight: 600; }
@media (max-width: 1080px) { .top-bar-email { display: none; } }
.top-bar-nav { padding: 8px 0; background: var(--off-white); border-bottom: 1px solid var(--border); }
.nav-links { display: flex; gap: 18px; list-style: none; align-items: center; justify-content: center; flex-wrap: wrap; }
.nav-links a {
  font-size: 14px; font-weight: 600; color: var(--text-mid);
  text-decoration: none; transition: color 0.2s;
  padding: 6px 0; position: relative; letter-spacing: 0.3px;
}
.nav-links a:hover { color: var(--teal); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--teal); transform: scaleX(0); transition: transform 0.2s;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: all 0.3s; border-radius: 2px; }

/* ---------- NAV DROPDOWN ---------- */
.nav-links .has-dropdown { position: relative; }
.nav-links .has-dropdown > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-links .caret {
  display: inline-block; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.6;
  transition: transform 0.2s;
}
.nav-links .has-dropdown:hover > a .caret,
.nav-links .has-dropdown.open > a .caret { transform: rotate(180deg); opacity: 1; }

.nav-links .dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 280px; max-width: 360px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 8px 0; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
}
.nav-links .dropdown.dropdown-wide {
  min-width: 660px; max-width: 760px;
  columns: 3; column-gap: 8px; padding: 12px 0;
}
.nav-links .dropdown.dropdown-wide li { break-inside: avoid; }
/* Two-column panel for the long Private Health Services list.  It hangs off
   the first nav item, so it opens to the right instead of centring, which
   would push it off the left edge of the screen. */
.nav-links .dropdown.dropdown-cols2 {
  min-width: 620px; max-width: 700px;
  columns: 2; column-gap: 8px; padding: 12px 0;
}
.nav-links .dropdown.dropdown-cols2 li { break-inside: avoid; }
.nav-links .has-dropdown:first-child > .dropdown.dropdown-cols2 { left: 0; transform: translateY(8px); }
.nav-links .has-dropdown:first-child:hover > .dropdown.dropdown-cols2,
.nav-links .has-dropdown:first-child:focus-within > .dropdown.dropdown-cols2,
.nav-links .has-dropdown:first-child.open > .dropdown.dropdown-cols2 { transform: translateY(0); }
.nav-links .has-dropdown:hover > .dropdown,
.nav-links .has-dropdown:focus-within > .dropdown,
.nav-links .has-dropdown.open > .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Right-most dropdown opens inward so it never spills past the viewport edge */
.nav-links .has-dropdown:last-child > .dropdown { left: auto; right: 0; transform: translateY(8px); }
.nav-links .has-dropdown:last-child:hover > .dropdown,
.nav-links .has-dropdown:last-child:focus-within > .dropdown,
.nav-links .has-dropdown:last-child.open > .dropdown { transform: translateY(0); }
.nav-links .dropdown a {
  display: block; padding: 9px 18px;
  font-size: 13px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text); line-height: 1.4;
  white-space: normal;
}
.nav-links .dropdown a::after { display: none; }
.nav-links .dropdown a:hover,
.nav-links .dropdown a:focus { background: var(--teal-pale); color: var(--teal-deeper); }

/* Hover bridge: stop the gap between trigger and dropdown closing the menu */
.nav-links .has-dropdown > a::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: 100%; height: 14px;
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb {
  background: var(--off-white); border-bottom: 1px solid var(--border);
  padding: 14px 0; font-size: 13px; color: var(--text-mid);
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb li::after { content: "›"; margin-left: 8px; color: var(--text-light); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--text-mid); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb [aria-current="page"] { color: var(--navy); font-weight: 500; }

/* ---------- HERO ---------- */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, #2a5a75 100%);
  min-height: auto; display: flex; align-items: center;
  position: relative; overflow: hidden; padding: 58px 0 72px;
}
/* .hero is a flex container, so its .container child is a flex ITEM and shrinks
   to fit its content instead of filling the row; `margin: 0 auto` then centres
   whatever is left.  The result is that a page's left margin silently tracks how
   long its headline happens to be - 40px on one service page, 124px on the next.
   Force it to fill the row so every hero lines up with the nav above it. */
.hero > .container { width: 100%; }
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(100,160,182,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(100,182,160,0.08) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(100,160,182,0.10) 0%, transparent 35%);
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; position: relative; z-index: 2; }
.hero-text { animation: fadeInUp 0.7s ease both; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(100,160,182,0.2); border: 1px solid rgba(100,160,182,0.4);
  color: #9dd3e8; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 8px 18px; border-radius: var(--radius-pill); margin-bottom: 28px;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: pulse-dot 2s infinite; }
.hero h1 { font-size: clamp(36px, 4.5vw, 58px); font-weight: 800; color: var(--white); margin-bottom: 20px; }
.hero-sub { font-size: 17px; color: rgba(255,255,255,0.72); max-width: 500px; margin-bottom: 40px; font-weight: 300; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 52px; }
.hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hero-stat { border-left: 2px solid rgba(100,160,182,0.4); padding-left: 16px; }
.hero-stat-num { font-size: 26px; font-weight: 700; color: #9dd3e8; display: block; line-height: 1; }
.hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 4px; }
.hero-visual { animation: fadeInRight 0.8s 0.2s ease both; position: relative; }

/* Glass card used as hero right column where no image exists */
.hero-card {
  background: rgba(255,255,255,0.07); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 24px;
  padding: 48px 40px; box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.hero-card-title { font-family: "Playfair Display", "Playfair Display Fallback", serif; font-style: italic; font-size: 28px; color: var(--white); margin-bottom: 12px; }
.hero-card-text { font-size: 15px; color: rgba(255,255,255,0.82); line-height: 1.7; }

/* ---------- TRUST STRIP ---------- */
.trust-strip {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 28px 0;
}
.trust-row { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.trust-row img { height: 36px; width: auto; opacity: 0.75; filter: grayscale(20%); transition: all 0.3s; }
.trust-row img:hover { opacity: 1; filter: none; }

/* ---------- INFO CARDS ---------- */
.info-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 32px; box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative; overflow: hidden;
}
.info-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--teal); border-radius: 4px 0 0 4px;
}
.info-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.info-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--teal-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: var(--teal-dark);
}
.info-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.info-card p { font-size: 14px; color: var(--text-mid); line-height: 1.6; }

/* ---------- REASON / SYMPTOM CARDS ---------- */
.reasons-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 48px; }
.reason-card {
  background: var(--white); border-radius: var(--radius);
  padding: 28px 24px; border: 1px solid var(--border);
  transition: all 0.3s ease; box-shadow: var(--shadow-sm);
}
.reason-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--teal); }
.reason-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--teal-light), #d0e8f2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; font-size: 24px;
}
.reason-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.reason-card p { font-size: 15px; color: var(--text-mid); line-height: 1.6; }

/* ---------- STEP CARDS ---------- */
.steps-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 24px;
  margin-top: 56px; position: relative;
}
.steps-row::before {
  content: ""; position: absolute;
  top: 44px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-dark));
  opacity: 0.25; z-index: 0;
}
.step-card {
  position: relative; z-index: 1; text-align: center;
  padding: 36px 20px 32px; background: var(--white);
  border-radius: var(--radius); border: 1px solid var(--border);
  transition: all 0.3s ease; box-shadow: var(--shadow-sm);
}
.step-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: rgba(100,160,182,0.4); }
.step-num {
  width: 52px; height: 52px; border-radius: 50%; background: var(--teal-deeper);
  color: var(--white); font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; box-shadow: 0 4px 16px rgba(100,160,182,0.45);
}
.step-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.step-card p { font-size: 15px; color: var(--text-mid); line-height: 1.65; }

/* ---------- DARK DETECT SECTION ---------- */
.detect-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: var(--section-pad) 0; position: relative; overflow: hidden;
}
.detect-section .section-label { color: #9dd3e8; }
.detect-section .section-title { color: var(--white); }
.detect-section .section-desc { color: rgba(255,255,255,0.7); }
.detect-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.detect-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 22px 26px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: all 0.3s ease;
}
.detect-card:hover { background: rgba(100,160,182,0.12); border-color: rgba(100,160,182,0.3); transform: translateX(4px); }
.detect-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: rgba(100,160,182,0.2); border: 1px solid rgba(100,160,182,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.detect-card h3 { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 5px; }
.detect-card p { font-size: 15px; color: rgba(255,255,255,0.68); line-height: 1.55; }

/* ---------- PRICING ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 48px; }
/* Let cards shrink below their longest word, so a 3-column grid never pushes past the screen. */
.pricing-grid > * { min-width: 0; }
.pricing-grid.pricing-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .pricing-grid.pricing-grid-2 { grid-template-columns: 1fr; } }
/* Wide tables scroll sideways inside their box on phones instead of widening the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px 28px;
  box-shadow: var(--shadow-sm); transition: all 0.3s ease;
  position: relative;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.price-card.featured { border: 2px solid var(--teal); box-shadow: var(--shadow-md); transform: translateY(-6px); }
.popular-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--teal-deeper); color: var(--white);
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 14px; border-radius: var(--radius-pill);
}
.price-tier-name { font-size: 14px; font-weight: 700; color: var(--teal-deeper); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }
.price-amount { font-size: 42px; font-weight: 800; color: var(--navy); }
.price-amount span { font-size: 16px; font-weight: 500; color: var(--text-mid); margin-left: 4px; }
.price-features { list-style: none; margin: 24px 0; }
.price-features li { padding: 8px 0 8px 28px; font-size: 14px; color: var(--text-mid); position: relative; }
.price-features li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal-light) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364A0B6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center no-repeat;
}
/* Canonical flat-tick feature list used by service/pricing cards */
.price-card-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.price-card-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-mid); }
.price-card-features li::before { content: "✓"; color: var(--teal); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* ---------- BLOOD PANELS (test groups, teal icons, hero photo) ---------- */
/* Scoped so the generic `.price-amount span` rule above doesn't shrink the price */
.price-card .price-amount:has(.price-num) { display: flex; align-items: flex-start; gap: 3px; margin-bottom: 24px; }
.price-card .price-currency { font-size: 24px; font-weight: 600; color: var(--navy); margin: 9px 0 0; }
.price-card .price-num { font-size: 58px; font-weight: 800; color: var(--navy); line-height: 1; margin: 0; }

.hero-photo { width: 100%; max-width: 560px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); }

.test-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 44px; }
.test-group {
  flex: 1 1 300px; max-width: 380px;
  background: var(--white); border: 1px solid var(--border);
  border-top: 3px solid var(--teal); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.test-group:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.test-group-icon { width: 46px; height: 46px; object-fit: contain; display: block; margin-bottom: 16px; }
.test-group h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
.test-markers { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.test-markers li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--text-mid); line-height: 1.45; }
.test-markers li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px;
  border-right: 2px solid var(--teal); border-top: 2px solid var(--teal);
  transform: rotate(45deg);
}
@media (max-width: 620px) {
  .test-group { flex: 1 1 100%; max-width: 100%; }
}

/* ---------- PREPARE GRID ---------- */
.prepare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
.prepare-col h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.prepare-col ul { list-style: none; }
.prepare-col li { padding: 10px 0 10px 32px; font-size: 14px; color: var(--text-mid); position: relative; }
.prepare-col.do li::before {
  content: "✓"; color: var(--success); font-weight: 800; font-size: 16px;
  position: absolute; left: 0; top: 8px;
}
.prepare-col.dont li::before {
  content: "✕"; color: #c44; font-weight: 800; font-size: 16px;
  position: absolute; left: 0; top: 8px;
}

/* ---------- FAQ ---------- */
.faq-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; max-width: 820px; margin-left: auto; margin-right: auto; }
.faq-item {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0; overflow: hidden;
  transition: box-shadow 0.2s;
}
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-q {
  cursor: pointer; list-style: none;
  padding: 20px 56px 20px 24px; font-weight: 600; font-size: 15px; color: var(--navy);
  position: relative; user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "+"; position: absolute; right: 24px; top: 18px;
  font-size: 22px; color: var(--teal); transition: transform 0.2s;
}
.faq-item[open] .faq-q::after { content: "−"; }
.faq-a { padding: 0 24px 22px; color: var(--text-mid); font-size: 14px; line-height: 1.7; }

/* ---------- FINAL CTA BANNER ---------- */
.final-cta {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  padding: 80px 0; text-align: center; color: var(--white);
}
.final-cta h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; color: var(--white); margin-bottom: 16px; }
.final-cta p { color: rgba(255,255,255,0.7); max-width: 560px; margin: 0 auto 32px; font-size: 16px; }
.final-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-tel { font-size: 14px; margin-top: 18px; color: rgba(255,255,255,0.55); }
.cta-tel a { color: #9dd3e8; text-decoration: none; font-weight: 600; }
/* Inline links in CTA body copy fall back to the global `a` colour
   (--teal-deeper), which is 1.6:1 against this navy panel.  Reuse the light
   blue the tel link already uses. */
.final-cta p a:not(.btn) { color: #9dd3e8; }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--navy); color: rgba(255,255,255,0.7);
  padding: 60px 0 24px; font-size: 14px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.footer h3 { font-size: 13px; font-weight: 700; color: var(--white); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; }
.footer ul { list-style: none; }
.footer li { padding: 5px 0; }
.footer a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; }
.footer a:hover { color: var(--teal); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 12px; color: rgba(255,255,255,0.6); }
.footer-brand .footer-logo { display: block; height: 46px; width: auto; margin-bottom: 18px; object-fit: contain; object-position: left center; }
.footer-trading { font-size: 12px; color: rgba(255,255,255,0.62); margin-bottom: 16px; max-width: 320px; }
.footer-addr { color: rgba(255,255,255,0.7); line-height: 1.65; margin-bottom: 12px; }
.footer-contact { color: rgba(255,255,255,0.7); line-height: 1.8; margin-bottom: 18px; }
.footer-contact a { color: rgba(255,255,255,0.88); font-weight: 600; }
.footer-contact a:hover { color: var(--teal); }
.footer-social { display: flex; gap: 12px; margin-bottom: 24px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.footer-social a:hover { background: var(--teal); color: var(--navy); transform: translateY(-2px); }

/* ---------- MOBILE BOTTOM-BAR CTA ---------- */
.mobile-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  padding: 12px 16px; z-index: 90;
  gap: 12px;
}
.mobile-cta .btn { flex: 1; justify-content: center; padding: 14px 16px; font-size: 14px; }
.mobile-cta .btn-outline { color: var(--teal-deeper); border-color: var(--teal-deeper); }
.mobile-cta.hidden { transform: translateY(100%); transition: transform 0.3s; }

/* ---------- ANIMATIONS ---------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01s !important; transition: none !important; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  /* A grid column will not shrink below its longest word unless told it may.  On
     narrow phones the three hero figures were wider than the screen, the whole
     hero column grew to match, and .hero's overflow:hidden cut the right-hand
     side of the heading, text and buttons off (33 of 74 pages at 360px). */
  .hero-grid > * { min-width: 0; }
  .prepare-grid > * { min-width: 0; }
  .hero { min-height: auto; padding-top: 60px; padding-bottom: 60px; }
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-row { grid-template-columns: repeat(2, 1fr); }
  .steps-row::before { display: none; }
  /* body prefix: pages set their own 3-column .pricing-grid after main.css, which squeezed
     three cards into this 420px strip between 861 and 980px (unfolded Fold, tablets). */
  body .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .detect-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .prepare-grid { grid-template-columns: 1fr; gap: 24px; }
  .practice-name { font-size: 13px; max-width: 140px; }
}

/* Top nav collapses to the hamburger here.  The full horizontal menu (7 items)
   needs about 1,300px of screen to sit on one line; from 981 to 1365px it used
   to wrap onto two lines and the sticky header took 242px, about 30% of a
   landscape tablet.  Tablets, foldables and small laptop windows now get the
   compact menu.  Keep in step with the 1366px rule in v2.css and isMobile() in
   main.js. */
@media (max-width: 1365px) {
  .top-bar-nav { display: none; }
  /* The header is sticky, so the open menu hanging off it never moves with the
     page: without scrolling of its own, anything below the bottom of the screen
     could not be reached (9 of the 21 blood tests on an iPhone).  100% here is
     the header's height, so the menu gets exactly the room under it. */
  .top-bar-nav.open {
    display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); box-shadow: var(--shadow-md); z-index: 60;
    max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .top-bar-nav.open .nav-links { flex-direction: column; align-items: stretch; gap: 0; padding: 20px 24px; }
  .top-bar-nav.open .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .top-bar-nav.open .nav-links a:last-child { border-bottom: 0; }
  /* Mobile dropdowns become accordion */
  .top-bar-nav.open .nav-links .has-dropdown > a { justify-content: space-between; }
  .top-bar-nav.open .nav-links .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; border-radius: 0; min-width: 0; max-width: none;
    columns: 1; padding: 0; background: var(--off-white);
    display: none;
  }
  .top-bar-nav.open .nav-links .has-dropdown.open > .dropdown { display: block; }
  .top-bar-nav.open .nav-links .dropdown a {
    padding: 12px 20px; font-size: 14px; border-bottom: 1px solid var(--border);
  }
  .top-bar-nav.open .nav-links .has-dropdown > a::before { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 720px) {
  /* TOP BAR mobile */
  .top-bar-utility { padding: 14px 0; }
  .top-bar-utility-inner { gap: 12px; }
  .logo-wrap img { height: 44px; }
  .practice-name { display: none; }
  /* Clean mobile header: logo + hamburger only. Book & Call live in the sticky bottom bar. */
  .top-bar-phone { display: none; }
  .top-bar-book { display: none; }
  .reasons-grid { grid-template-columns: 1fr; }
  .steps-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .trust-row { gap: 24px; }
  .trust-row img { height: 28px; }
  .hero { padding-bottom: 88px; }
  .mobile-cta { display: flex; }
  body { padding-bottom: 76px; }
  .section { padding: 60px 0; }
  .container { padding: 0 20px; }
  .review-fab { display: none !important; }
}
/* Narrow phones and folded foldables: the hero figures wrap onto a second line
   when they cannot sit side by side, instead of pushing past the screen. */
@media (max-width: 540px) {
  .hero-stats { display: flex; flex-wrap: wrap; gap: 16px 20px; }
  .hero-stat { flex: 1 1 0; min-width: min-content; }
  .hero-stat-num { font-size: 22px; }
}
/* The narrowest screens (the 280px cover of the first Galaxy Folds): a long email
   address breaks onto a second line and fee-table prices may wrap, instead of
   pushing the page sideways.  ("body" outranks the fees page's own nowrap rule.) */
@media (max-width: 340px) {
  body { overflow-wrap: break-word; }
  body .fee-table .fee-price { white-space: normal; }
}
/* Below 300px a three-column fee table cannot fit: it scrolls sideways inside
   its own box rather than making the whole page scroll. */
@media (max-width: 300px) {
  body .fee-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Floating patient-reviews box (desktop only; injected by main.js) */
.review-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 80;
  width: 240px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 18px;
  transform: translateY(16px); opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}
.review-fab.show { transform: translateY(0); opacity: 1; }
.review-fab-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text-light);
  padding: 2px 8px; border-radius: var(--radius-sm);
}
.review-fab-close:hover { color: var(--text); background: var(--teal-pale); }
.review-fab-link { display: block; text-decoration: none; color: inherit; }
.review-fab-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--teal-deeper); margin-bottom: 6px;
}
.review-fab-score { display: flex; align-items: baseline; gap: 2px; line-height: 1; }
.review-fab-score .rfb-num { font-size: 34px; font-weight: 800; color: var(--navy); }
.review-fab-score .rfb-out { font-size: 16px; font-weight: 600; color: var(--text-light); }
.review-fab-stars { color: #9d6a16; font-size: 16px; letter-spacing: 2px; margin: 4px 0 2px; }
.review-fab-count { font-size: 13px; color: var(--text-mid); }
.review-fab-count strong { color: var(--navy); }
.review-fab-cta {
  display: block; text-align: center; font-size: 13px; font-weight: 600;
  padding: 9px 12px; border-radius: var(--radius-pill); margin-top: 12px;
  background: var(--teal-deeper); color: var(--white); border: 1px solid var(--teal-deeper);
  transition: background .2s ease, border-color .2s ease;
}
.review-fab-link:hover .review-fab-cta { background: var(--navy); border-color: var(--navy); }

/* CQC "overall rating: Good" footer card (official CQC logo) */
.cqc-rating {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 16px;
  padding: 12px 16px; background: #fff; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18); text-decoration: none; max-width: 290px;
}
.cqc-rating img { height: 38px; width: auto; display: block; flex-shrink: 0; }
.cqc-rating-body { display: flex; flex-direction: column; gap: 2px; }
.cqc-rating-label { font-size: 11px; font-weight: 600; color: #333; }
.cqc-rating-good { font-size: 17px; font-weight: 800; color: #00796b; line-height: 1; }
.cqc-rating-link { font-size: 11px; font-weight: 600; color: #00796b; }
.cqc-rating:hover .cqc-rating-link { text-decoration: underline; }

/* Home-page notice banner — scrolling alert ticker (content from /assets/js/notice.js; hidden when empty) */
.site-notice { position: relative; background: #c1121f; overflow: hidden; }
.site-notice[hidden] { display: none; }
.site-notice-inner { position: relative; display: block; }
.site-notice-viewport { overflow: hidden; }
.site-notice-track {
  display: inline-flex; width: max-content; will-change: transform;
  animation: site-notice-scroll 20s linear infinite;
}
.site-notice-item {
  display: inline-flex; align-items: center; gap: 14px; white-space: nowrap;
  padding: 15px 64px 15px 0;
  color: #fff; font-size: clamp(18px, 2vw, 24px); font-weight: 700; letter-spacing: 0.2px;
}
.site-notice-title { font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; }
.site-notice-icon { width: 28px; height: 28px; color: #fff; flex-shrink: 0; }
@keyframes site-notice-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.site-notice:hover .site-notice-track,
.site-notice:focus-within .site-notice-track { animation-play-state: paused; }
.site-notice-close {
  position: absolute; top: 0; right: 0; height: 100%; z-index: 2;
  background: #c1121f; border: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: #fff; padding: 0 20px;
}
.site-notice-close::before {
  content: ""; position: absolute; top: 0; right: 100%; height: 100%; width: 48px;
  background: linear-gradient(to right, rgba(193,18,31,0), #c1121f); pointer-events: none;
}
.site-notice-close:hover { color: #ffd6d6; }
/* Accessibility: no motion for users who ask for none — show a single static line */
@media (prefers-reduced-motion: reduce) {
  .site-notice-track { animation: none; width: auto; }
  .site-notice-viewport { overflow: visible; }
  .site-notice-item { white-space: normal; padding: 15px 64px 15px 24px; }
  .site-notice-item[aria-hidden] { display: none; }
}

/* "Calendar not showing?" line under each embedded Semble calendar: a way to
   book if the frame is ever blocked or fails to load (main booking page uses
   its own help box instead) */
.booking-fallback { max-width: 920px; margin: 14px auto 0; text-align: center; font-size: 14px; color: var(--text-mid); }
.booking-fallback a { color: var(--teal-deeper); font-weight: 600; }

/* Cookie choice banner (injected by main.js until the visitor chooses).  Both
   buttons share one style on purpose: rejecting must be as easy as accepting.
   It is a slim strip, so that it covers as little of the page as it can: the
   sentence and the two buttons share one row, and on phones the buttons sit
   side by side under the sentence.  (Until 2 October 2026 it was a 560px box
   with stacked buttons, 250 to 300px high on a phone.) */
.cookie-banner {
  position: fixed; left: 24px; bottom: 24px; z-index: 120;
  width: min(860px, calc(100% - 48px));
  display: flex; align-items: center; gap: 10px 20px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 12px 16px 12px 20px;
}
.cookie-banner-text { flex: 1 1 0; min-width: 0; margin: 0; font-size: 14px; color: var(--text); line-height: 1.45; }
.cookie-banner-text a { color: var(--teal-deeper); text-decoration: underline; font-weight: 600; }
.cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; flex: 0 0 auto; gap: 8px; }   /* two equal columns: the buttons are always the same size */
.cookie-banner-actions .btn { position: relative; padding: 10px 18px; font-size: 14px; white-space: nowrap; }
/* The buttons show "Accept" and "Reject"; a screen reader still hears
   "Accept analytics cookies" and "Reject analytics cookies". */
.cookie-btn-more { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* From 881px the patient-reviews box sits in the bottom right corner
   (264px including its margin): the strip stops 40px short of it. */
@media (min-width: 881px) {
  .cookie-banner { width: min(860px, calc(100% - 328px)); }
}
@media (max-width: 720px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; width: auto; flex-wrap: wrap; padding: 12px 14px; }
  .cookie-banner-text { flex-basis: 100%; font-size: 13px; }
  .cookie-banner-actions { flex: 1 1 100%; }
  .cookie-banner-actions .btn { padding: 12px; }
  body.has-cookie-banner .mobile-cta { display: none; }
}