/* ==========================================================================
   The Andrology Centre — design tokens

   These are the CLIENT'S OWN brand colours and typeface, read from the live
   site's Elementor kit — not a generated palette:
       #071240  global "Primary" / "Accent"  (near-black navy)
       #11588B  global "Secondary"           (mid blue)
       #07A0E1  the bright sky blue used across the live site
       #F5F8FA  pale blue-grey section background
       Manrope  the theme style's body and heading font
   See design-system/the-andrology-centre/STYLE-OVERRIDE.md.

   Two of his values cannot be used as-is without failing WCAG AA, so each is
   kept for its original decorative role and paired with a compliant variant:

     #07A0E1 is only 2.95:1 on white — it cannot carry white button text and
     cannot be body copy on white. Kept for accents ON NAVY, where it is
     9.69:1, with --accent-fill used for solid buttons instead.

     #808083, the current body-text grey, is 3.94:1 on white and fails AA on
     the live site today. Replaced here by a navy-tinted scale that passes.
   ========================================================================== */

:root {
  /* the client's brand colours */
  --color-primary: #11588B;
  --color-on-primary: #FFFFFF;
  --color-secondary: #07A0E1;
  --color-accent: #07A0E1;
  --color-background: #F5F8FA;
  --color-foreground: #071240;
  --color-muted: #E8F0F7;
  --color-border: #D6E4F0;
  --color-destructive: #DC2626;
  --color-ring: #11588B;

  /* derived — every value AA-verified by check.py */
  --primary-dark: #11588B;      /*  7.52:1 on white — links          */
  --primary-darker: #071240;    /* 17.96:1 on white                  */
  --accent-fill: #0B76A8;       /*  5.03:1 white text — solid CTAs   */
  --accent-fill-hover: #075E8A; /*  7.05:1                           */
  --accent-dark: #075E8A;
  --ink: #132B54;               /* 13.99:1 — body copy               */
  --ink-soft: #2E4468;          /*  9.80:1 — secondary copy          */
  --ink-faint: #4F6486;         /*  6.00:1 — captions, meta          */
  --surface: #FFFFFF;
  --border-strong: #C3D6E8;
  --on-navy: #C6D8EE;           /* 12.36:1 on #071240                */
  --on-navy-soft: #A9C2DE;      /*  9.80:1 on #071240                */

  --font-head: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(7, 18, 64, .06);
  --shadow: 0 4px 16px rgba(7, 18, 64, .08);
  --shadow-lg: 0 12px 40px rgba(7, 18, 64, .12);

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);            /* 13.99:1 on white */
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--color-foreground);
  line-height: 1.2;
  margin: 0 0 var(--space-md);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-darker); }

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

ul, ol { margin: 0 0 var(--space-md); padding-left: 1.25rem; }
li { margin-bottom: .4rem; }

strong { font-weight: 600; color: var(--color-foreground); }

/* keyboard focus — visible everywhere, per checklist */
:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-foreground);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px)  { .wrap { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .wrap { padding-inline: 2rem; } }

.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; }

section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.sec-tint { background: var(--color-background); }
.sec-muted { background: var(--color-muted); }

.eyebrow {
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin: 0 0 var(--space-sm);
}

.sec-head { max-width: 720px; margin-bottom: var(--space-xl); }
.sec-head.center { margin-inline: auto; text-align: center; }
.lead { font-size: 1.15rem; color: var(--ink-soft); }

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

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: .875rem 1.75rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.125em; height: 1.125em; flex: none; }

.btn-primary { background: var(--accent-fill); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-fill-hover); color: #fff; box-shadow: var(--shadow); }

.btn-secondary { background: var(--primary-dark); color: #fff; }
.btn-secondary:hover { background: var(--primary-darker); color: #fff; }

.btn-outline { background: transparent; color: var(--primary-darker); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--color-background); border-color: var(--color-primary); color: var(--primary-darker); }

.btn-ghost-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-light:hover { background: #fff; color: var(--primary-darker); border-color: #fff; }

.btn-lg { padding: 1.0625rem 2.25rem; font-size: 1.0625rem; }
.btn-block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */

.topbar {
  background: var(--color-foreground);
  color: #C6D8EE;
  font-size: .875rem;
  padding-block: .5rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.topbar a { color: #fff; text-decoration: none; font-weight: 500; }
.topbar a:hover { color: var(--color-secondary); text-decoration: underline; }
.topbar-items { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.topbar-item { display: inline-flex; align-items: center; gap: .4rem; }
.topbar svg { width: 15px; height: 15px; opacity: .85; }
.topbar-note { color: #A9C2DE; }
@media (max-width: 720px) { .topbar-note { display: none; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header.scrolled { box-shadow: var(--shadow); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
}

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }

/* the client's own logo lockup */
.brand-logo { width: auto; height: 44px; }
@media (max-width: 400px) { .brand-logo { height: 36px; } }

/* the triangle mark on its own, for the dark footer where the
   navy wordmark in the full lockup would be invisible */
.footer-mark { width: 44px; height: 44px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.0625rem; color: var(--color-foreground);
  letter-spacing: -.01em;
}
.brand-sub {
  font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}

.nav-menu { display: none; }
@media (min-width: 1024px) {
  .nav-menu {
    display: flex; align-items: center; gap: .25rem;
    list-style: none; margin: 0; padding: 0;
  }
  .nav-menu li { margin: 0; }
  .nav-menu > li > a {
    display: block;
    font-family: var(--font-head); font-weight: 500; font-size: .9375rem;
    color: var(--ink); text-decoration: none;
    padding: .625rem .8125rem; border-radius: var(--radius-sm);
    transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  .nav-menu > li > a:hover,
  .nav-menu > li > a[aria-current="page"] {
    background: var(--color-background); color: var(--primary-darker);
  }
  .nav-menu > li > a[aria-current="page"] { font-weight: 600; }
}

/* dropdown */
.has-sub { position: relative; }
.sub-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 500; font-size: .9375rem;
  color: var(--ink); padding: .625rem .8125rem; border-radius: var(--radius-sm);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.sub-toggle:hover { background: var(--color-background); color: var(--primary-darker); }
.sub-toggle svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + .35rem); left: 0;
  min-width: 290px; margin: 0; padding: .5rem;
  list-style: none;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-sub:hover .submenu,
.submenu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
  display: block; padding: .5rem .75rem; border-radius: var(--radius-sm);
  font-size: .9375rem; color: var(--ink); text-decoration: none;
}
.submenu a:hover { background: var(--color-background); color: var(--primary-darker); }

.nav-cta { display: none; }
@media (min-width: 1024px) { .nav-cta { display: inline-flex; flex: none; } }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px;
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer;
}
.burger span {
  display: block; height: 2px; width: 100%;
  background: var(--color-foreground); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

/* mobile drawer */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-border);
  background: #fff;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  padding: 1rem 0 1.5rem;
}
.mobile-nav.open { display: block; }
@media (min-width: 1024px) { .mobile-nav, .mobile-nav.open { display: none; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a {
  display: block; padding: .8125rem .25rem;
  font-family: var(--font-head); font-weight: 500;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav a:hover { color: var(--primary-dark); }
.mobile-nav .sub a { padding-left: 1.25rem; font-weight: 400; font-size: .9375rem; color: var(--ink-soft); }
.mobile-nav .m-group-label {
  font-family: var(--font-head); font-weight: 600; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  padding: 1.25rem .25rem .5rem;
}
.mobile-nav .btn { margin-top: 1.25rem; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: linear-gradient(135deg, #071240 0%, #0E3C6B 55%, #11588B 100%);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 88% 12%, rgba(7,160,225,.32), transparent 62%),
    radial-gradient(ellipse 50% 60% at 5% 95%, rgba(7,160,225,.16), transparent 60%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }
/* white headings on the gradient — but NOT inside the white card */
.hero :is(h1, h2, h3):not(.hero-card *) { color: #fff; }
.hero .eyebrow:not(.hero-card *) { color: var(--color-secondary); }

.hero-grid { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.08fr .92fr; } }

.hero-lead { font-size: 1.1875rem; color: #C6D8EE; max-width: 44ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: var(--space-lg); }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: .625rem;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,.18);
}
.trust-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-pill);
  padding: .4375rem .875rem;
  font-size: .8125rem; font-weight: 500; color: #DCE8F6;
}
.trust-chip svg { width: 15px; height: 15px; color: var(--color-secondary); flex: none; }

/* hero card */
.hero-card {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
}
.hero-card h2 { font-size: 1.3rem; margin-bottom: .35rem; color: var(--color-foreground); }
.hero-card .muted-note { font-size: .875rem; color: var(--ink-faint); margin-bottom: 1.25rem; }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .75rem; margin-top: 1.5rem;
  padding-top: 1.25rem; border-top: 1px solid var(--color-border);
}
.hero-stat { text-align: center; }
.hero-stat b {
  display: block; font-family: var(--font-head);
  font-size: 1.5rem; font-weight: 700; color: var(--primary-dark); line-height: 1.1;
}
.hero-stat span { font-size: .75rem; color: var(--ink-faint); line-height: 1.35; display: block; margin-top: .25rem; }

/* ==========================================================================
   Cards & grids
   ========================================================================== */

.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--color-primary); box-shadow: var(--shadow); transform: translateY(-3px); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .9688rem; }

.card-icon {
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  display: grid; place-items: center;
  color: var(--primary-dark);
  margin-bottom: var(--space-md);
}
.card-icon svg { width: 24px; height: 24px; }

/* service card with image */
.svc-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.svc-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.svc-card:hover .svc-card-img img { transform: scale(1.05); }
.svc-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--color-muted); }
.svc-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.svc-card-body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.svc-card-body h3 { color: var(--color-foreground); font-size: 1.1875rem; }
.svc-card-body p { color: var(--ink-soft); font-size: .9375rem; flex: 1; }
.svc-card-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-head); font-weight: 600; font-size: .9375rem;
  color: var(--primary-dark); margin-top: var(--space-md);
}
.svc-card-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.svc-card:hover .svc-card-link svg { transform: translateX(4px); }

/* ==========================================================================
   Consultants
   ========================================================================== */

.consultant {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.consultant:hover { border-color: var(--color-primary); box-shadow: var(--shadow); }
.consultant-photo {
  aspect-ratio: 1;
  background: var(--color-background);
  overflow: hidden;
}
.consultant-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.consultant-body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.consultant-body h3 { margin-bottom: .15rem; font-size: 1.25rem; }
.consultant-role {
  font-size: .875rem; font-weight: 600; color: var(--primary-dark);
  margin-bottom: .75rem;
}
.consultant-body p { font-size: .9375rem; color: var(--ink-soft); }
.consultant-bio { flex: 1; }
.consultant-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: var(--space-md); }
.tag {
  font-size: .75rem; font-weight: 500;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  color: var(--primary-darker);
  padding: .25rem .625rem; border-radius: var(--radius-pill);
}

/* ==========================================================================
   Peer endorsements — the differentiator
   ========================================================================== */

.endorse-band { background: var(--color-foreground); color: #fff; }
.endorse-band h2, .endorse-band h3 { color: #fff; }
.endorse-band .lead { color: #BDD2E9; }
.endorse-band .eyebrow { color: var(--color-secondary); }

.endorse-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .endorse-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .endorse-grid { grid-template-columns: repeat(3, 1fr); } }

.endorse {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex; flex-direction: column;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.endorse:hover { background: rgba(255,255,255,.09); border-color: rgba(7,160,225,.55); }
.endorse-quote-mark { color: var(--color-secondary); opacity: .55; }
.endorse-quote-mark svg { width: 28px; height: 28px; }
.endorse blockquote {
  margin: .625rem 0 var(--space-lg);
  font-size: .9688rem; line-height: 1.65; color: #DCE8F6; flex: 1;
}
.endorse figcaption { border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--space-md); }
.endorse-name { font-family: var(--font-head); font-weight: 600; color: #fff; font-size: .9375rem; }
.endorse-title { font-size: .8125rem; color: #A9C2DE; line-height: 1.45; margin-top: .15rem; }

/* ==========================================================================
   Doctify verified-rating band
   ========================================================================== */

.rating-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .rating-grid { grid-template-columns: repeat(3, 1fr); } }

.rating-card {
  background: var(--color-foreground);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}
.rating-card .rating-doc {
  font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem;
  color: #fff; margin-bottom: .75rem;
}
.rating-score {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  margin-bottom: .5rem;
}
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 19px; height: 19px; color: var(--color-secondary); }
.rating-num {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.75rem; line-height: 1; color: #fff;
}
.rating-meta { font-size: .875rem; color: #BDD2E9; }
.rating-meta b { color: #fff; font-weight: 600; }
.rating-verified {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .625rem; font-size: .8125rem; color: #A9C2DE;
}
.rating-verified svg { width: 15px; height: 15px; color: var(--color-secondary); }

/* ==========================================================================
   Patient reviews
   ========================================================================== */

.review-grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }

/* masonry-ish on capable browsers so short quotes don't leave gaps */
@supports (grid-template-rows: masonry) {
  .review-grid { grid-template-rows: masonry; }
}

.review {
  margin: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.review:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.review blockquote {
  margin: 0 0 var(--space-md);
  font-size: .9688rem; line-height: 1.65; color: var(--ink-soft); flex: 1;
}
.review blockquote::before { content: "\201C"; color: var(--color-primary); font-weight: 700; }
.review blockquote::after  { content: "\201D"; color: var(--color-primary); font-weight: 700; }
.review figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  border-top: 1px solid var(--color-border); padding-top: .75rem;
}
.review-who {
  font-family: var(--font-head); font-weight: 600;
  font-size: .8125rem; color: var(--color-foreground);
}
.review-year { font-size: .8125rem; color: var(--ink-faint); flex: none; }

/* on the dark endorsement band */
.endorse-band .review { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); }
.endorse-band .review blockquote { color: #DCE8F6; }
.endorse-band .review figcaption { border-top-color: rgba(255,255,255,.16); }
.endorse-band .review-who { color: #fff; }
.endorse-band .review-year { color: #A9C2DE; }

/* ==========================================================================
   Trust / review-signal strip
   ========================================================================== */

.signal-strip {
  background: var(--color-background);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-xl);
}
.signal-grid { display: grid; gap: var(--space-lg); text-align: center; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .signal-grid { grid-template-columns: repeat(4, 1fr); } }
.signal b {
  display: block; font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700;
  color: var(--primary-dark); line-height: 1.1;
}
.signal span { font-size: .875rem; color: var(--ink-soft); display: block; margin-top: .35rem; }

/* ==========================================================================
   Locations
   ========================================================================== */

.loc-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.loc-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow); transform: translateY(-3px); }
.loc-img { aspect-ratio: 16/10; overflow: hidden; background: var(--color-muted); }
.loc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.loc-card:hover .loc-img img { transform: scale(1.04); }
.loc-body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.loc-body h3 { font-size: 1.1875rem; margin-bottom: .5rem; }
.loc-addr { font-size: .9375rem; color: var(--ink-soft); font-style: normal; flex: 1; }
.loc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-md); }
.loc-actions .btn { font-size: .875rem; padding: .625rem 1.125rem; }

.map-embed {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-muted);
  line-height: 0;
}
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ==========================================================================
   Medical trust block — author / reviewer / references
   ========================================================================== */

.med-review {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.med-review-grid { display: grid; gap: var(--space-md); }
@media (min-width: 720px) { .med-review-grid { grid-template-columns: repeat(3, 1fr); } }
.med-review dt {
  font-family: var(--font-head); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .25rem;
}
.med-review dd { margin: 0; font-size: .9375rem; font-weight: 500; color: var(--color-foreground); }
.med-review dd a { color: var(--primary-dark); }
.med-review dl { margin: 0; }

.refs { font-size: .9375rem; }
.refs ol { padding-left: 1.25rem; }
.refs li { color: var(--ink-soft); margin-bottom: .625rem; }
.refs a { color: var(--primary-dark); word-break: break-word; }

.disclaimer {
  background: var(--color-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-lg);
  font-size: .9375rem;
  color: var(--ink-soft);
}
.disclaimer strong { color: var(--color-foreground); }

/* ==========================================================================
   Long-form article
   ========================================================================== */

.article { font-size: 1.0625rem; }
.article h2 { margin-top: var(--space-xl); }
.article h2:first-child { margin-top: 0; }
.article h3 { margin-top: var(--space-lg); }
.article ul li::marker { color: var(--color-primary); }
.article > img { border-radius: var(--radius-lg); margin-block: var(--space-lg); }

.article-layout { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 1024px) { .article-layout { grid-template-columns: minmax(0,1fr) 320px; } }

.sidebar { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) { .sidebar { position: sticky; top: 104px; } }

.side-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.side-card.highlight { background: var(--color-foreground); color: #fff; border-color: var(--color-foreground); }
.side-card.highlight h3 { color: #fff; }
.side-card.highlight p { color: #BDD2E9; font-size: .9375rem; }
.side-card h3 { font-size: 1.0625rem; margin-bottom: .75rem; }
.side-card ul { list-style: none; padding: 0; margin: 0; }
.side-card li { margin-bottom: .5rem; font-size: .9375rem; }
.side-card li a { color: var(--ink); text-decoration: none; display: block; padding: .25rem 0; }
.side-card li a:hover { color: var(--primary-dark); }

/* on-page contents */
.toc a { display: flex; gap: .5rem; font-size: .9375rem; }
.toc a::before { content: ""; width: 3px; flex: none; background: var(--color-border); border-radius: 2px; }
.toc a:hover::before { background: var(--color-primary); }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.crumbs { font-size: .875rem; padding-block: var(--space-md); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--ink-faint); }
.crumbs li + li::before { content: "/"; color: var(--border-strong); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--primary-dark); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--color-foreground); font-weight: 500; }

/* page header band */
.page-head {
  background: linear-gradient(135deg, #071240 0%, #11588B 100%);
  color: #fff;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.page-head h1 { color: #fff; margin-bottom: var(--space-md); }
.page-head p { color: #C6D8EE; font-size: 1.125rem; max-width: 62ch; }
.page-head .crumbs { color: #A9C2DE; padding-top: 0; }
.page-head .crumbs a { color: #BDD2E9; }
.page-head .crumbs a:hover { color: #fff; }
.page-head .crumbs [aria-current="page"] { color: #fff; }
.page-head .crumbs li + li::before { color: rgba(255,255,255,.4); }

/* ==========================================================================
   FAQ
   ========================================================================== */

/* Each question is its own card with space between, rather than one fused
   block of hairline dividers — easier to scan, and it stays obvious which
   answer belongs to which question once one is open. */
.faq { display: flex; flex-direction: column; gap: .75rem; }
.faq details {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq details:hover { border-color: var(--border-strong); }
.faq details[open] { border-color: var(--color-primary); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.125rem var(--space-lg);
  font-family: var(--font-head); font-weight: 600; font-size: 1.0313rem;
  color: var(--color-foreground);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: background-color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--color-background); }
.faq summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq .faq-body { padding: 0 var(--space-lg) var(--space-lg); color: var(--ink-soft); }
.faq .faq-body p:first-child { margin-top: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow);
}
.field { margin-bottom: var(--space-md); }
.field label {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: .9375rem; color: var(--color-foreground); margin-bottom: .375rem;
}
.field .req { color: var(--color-destructive); }
.field .hint { font-size: .8125rem; color: var(--ink-faint); font-weight: 400; margin-top: .25rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); background: #fff;
  padding: .8125rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-primary); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(17,88,139,.20);
}
.field input::placeholder, .field textarea::placeholder { color: #5D7093; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--color-destructive);
}
.field .err { display: none; font-size: .8125rem; color: var(--color-destructive); margin-top: .3rem; font-weight: 500; }
.field .err.show { display: block; }

.field-row { display: grid; gap: var(--space-md); }
@media (min-width: 620px) { .field-row { grid-template-columns: repeat(2, 1fr); } }

.consent {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px; flex: none; margin-top: .15rem; accent-color: var(--color-primary);
}
.consent label { font-size: .875rem; font-weight: 400; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.privacy-notice {
  display: flex; gap: .75rem;
  background: var(--color-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-md);
  font-size: .875rem; color: var(--ink-soft);
  margin-bottom: var(--space-lg);
}
.privacy-notice svg { width: 20px; height: 20px; flex: none; color: var(--primary-dark); margin-top: .1rem; }

.form-note { font-size: .8125rem; color: var(--ink-faint); margin-top: var(--space-md); text-align: center; }

/* shown in place of the form on the preview, where there is no back end */
.form-done {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.form-done h3 { margin-bottom: .625rem; }
.form-done p { color: var(--ink-soft); font-size: .9375rem; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  background: linear-gradient(135deg, #071240 0%, #0E3C6B 55%, #11588B 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #C6D8EE; max-width: 56ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; margin-top: var(--space-lg); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--color-foreground); color: #BDD2E9; padding-block: var(--space-2xl) var(--space-lg); }
.site-footer h3 {
  color: #fff; font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--space-md);
}
.footer-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.site-footer p { font-size: .9375rem; line-height: 1.7; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #BDD2E9; text-decoration: none; font-size: .9375rem; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-md); }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: #8DB0D3; }

.footer-contact li { display: flex; align-items: flex-start; gap: .625rem; }
.footer-contact svg { width: 17px; height: 17px; flex: none; margin-top: .2rem; color: var(--color-secondary); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  justify-content: space-between; align-items: center;
  font-size: .8125rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer-bottom p { font-size: .8125rem; margin: 0; }

/* ==========================================================================
   Sticky mobile call bar
   ========================================================================== */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(7,18,64,.1);
  padding: .5rem;
  gap: .5rem;
}
.callbar .btn { padding: .8125rem 1rem; font-size: .9375rem; }
@media (min-width: 1024px) { .callbar { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 76px; } }

/* ==========================================================================
   Reveal-on-scroll — safe by default (see motion-kit lesson: never hide
   content that JS might fail to reveal; opacity only, and only once JS arms it)
   ========================================================================== */

[data-reveal] { opacity: 1; }
.js-reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js-reveal-armed [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal-armed [data-reveal] { opacity: 1 !important; transform: none !important; }
  .btn:hover, .card:hover, .svc-card:hover, .loc-card:hover { transform: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .topbar, .callbar, .cta-band, .site-footer, .mobile-nav { display: none !important; }
  body { padding-bottom: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}

/* ==========================================================================
   Hero: brand lockup + rotating clinic backgrounds
   Requested by the clinic — the flat gradient read as too generic.
   ========================================================================== */

.hero { isolation: isolate; }

.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
/* first frame is painted immediately so the hero is never empty, even if the
   rotation script never runs (see the motion lesson in main.js) */
.hero-bg img:first-child { opacity: .85; }
.hero-bg img.on { opacity: .85; }
/* Two overlays. The base tint carries the brand gradient; the scrim on top is
   heaviest on the left, where the headline sits, and lightest on the right so
   the clinic photography is actually visible. Text never sits on less than
   ~92% navy, which keeps white copy far above AA. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7,18,64,.92) 0%, rgba(7,18,64,.86) 30%, rgba(7,18,64,.34) 60%, rgba(7,18,64,.18) 100%),
    linear-gradient(135deg, rgba(7,18,64,.62) 0%, rgba(14,60,107,.48) 55%, rgba(17,88,139,.40) 100%);
}
@media (max-width: 979px) {
  /* single column — the copy spans the full width, so the scrim must too */
  .hero::before {
    background:
      linear-gradient(180deg, rgba(7,18,64,.92) 0%, rgba(7,18,64,.88) 60%, rgba(7,18,64,.86) 100%),
      linear-gradient(135deg, rgba(7,18,64,.80) 0%, rgba(14,60,107,.70) 55%, rgba(17,88,139,.60) 100%);
  }
}

.hero-lockup { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--space-lg); }
.hero-lockup img { height: 62px; width: auto; }
@media (max-width: 560px) { .hero-lockup img { height: 46px; } }

/* clickable sub-brand logos */
.subbrands {
  display: flex; flex-wrap: wrap; gap: .875rem;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,.18);
}
.subbrand {
  display: inline-flex; align-items: center; gap: .625rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  padding: .5rem .875rem .5rem .5rem;
  text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.subbrand:hover { background: rgba(255,255,255,.16); border-color: var(--color-secondary); transform: translateY(-2px); }
.subbrand img { width: 42px; height: 42px; border-radius: 6px; flex: none; }
.subbrand span { display: flex; flex-direction: column; line-height: 1.25; }
.subbrand b { font-family: var(--font-head); font-weight: 600; font-size: .9375rem; color: #fff; }
.subbrand small { font-size: .75rem; color: var(--on-navy-soft); }

/* ==========================================================================
   Wide services dropdown — 12 items will not fit in one column
   ========================================================================== */

.submenu-wide { min-width: 560px; columns: 2; column-gap: .5rem; }
.submenu-wide li { break-inside: avoid; }
@media (max-width: 1200px) { .submenu-wide { min-width: 420px; } }

/* ==========================================================================
   Consultant cards — GMC number, own-site link, Doctify summary
   ========================================================================== */

.consultant-body h3 a { color: inherit; text-decoration: none; }
.consultant-body h3 a:hover { color: var(--primary-dark); text-decoration: underline; }
.consultant-body h3 .ext {
  width: 14px; height: 14px; vertical-align: baseline;
  margin-left: .3rem; color: var(--ink-faint);
}
.consultant-extra {
  font-size: .875rem; font-weight: 600; color: var(--color-secondary);
  margin: -.5rem 0 .75rem;
}
.consultant-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: .8125rem; color: var(--ink-faint);
}
.consultant-meta b { color: var(--ink-soft); font-weight: 600; }

/* Doctify block inside a consultant card */
.doctify-mini {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .625rem .875rem;
  margin-top: var(--space-md);
}
.doctify-mini .dm-score { display: flex; align-items: center; gap: .5rem; }
.doctify-mini .stars svg { width: 15px; height: 15px; color: var(--color-primary); }
.doctify-mini b { font-family: var(--font-head); font-size: 1.0625rem; color: var(--color-foreground); }
.doctify-mini small { color: var(--ink-faint); font-size: .8125rem; }
.doctify-mini a { font-size: .8125rem; font-weight: 600; }

.rating-card .rating-link {
  display: inline-block; margin-top: .75rem;
  font-size: .8125rem; font-weight: 600; color: var(--color-secondary);
}
.rating-card .rating-link:hover { color: #fff; }

/* endorsements: the endorsed consultant's name in bold */
.endorse blockquote strong, .review blockquote strong { color: #fff; font-weight: 700; }
.review blockquote strong { color: var(--color-foreground); }

/* the client asked for a bigger eyebrow and smaller sub-heading here */
.endorse-band .sec-head .eyebrow {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  letter-spacing: -.01em;
  text-transform: none;
  font-weight: 700;
  color: #fff;
  margin-bottom: .35rem;
}
.endorse-band .sec-head h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-secondary);
  letter-spacing: .02em;
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   Fees tables
   ========================================================================== */

.fee-block { margin-bottom: var(--space-xl); }
.fee-block-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  margin-bottom: var(--space-md);
}
.fee-block-head h3 { margin: 0; }
.fee-block-head span { font-size: .875rem; color: var(--ink-faint); }

.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); }
table.fees { width: 100%; border-collapse: collapse; min-width: 480px; background: #fff; }
table.fees caption { text-align: left; padding: .75rem 1rem; font-size: .875rem; color: var(--ink-faint); }
table.fees th, table.fees td { padding: .875rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); }
table.fees thead th {
  background: var(--color-foreground);
  font-family: var(--font-head); font-size: .8125rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
  border-bottom: 0;
}
table.fees tbody tr:nth-child(even) { background: var(--color-background); }
table.fees tbody tr:last-child th, table.fees tbody tr:last-child td { border-bottom: 0; }
table.fees tbody th { font-weight: 600; color: var(--color-foreground); }
table.fees td.fee { font-family: var(--font-head); font-weight: 700; color: var(--color-foreground); white-space: nowrap; }
table.fees td.dur { color: var(--ink-soft); white-space: nowrap; }

/* insurer logos / names */
.insurers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-md); }
.insurer {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .4375rem 1rem;
  font-family: var(--font-head); font-weight: 600; font-size: .875rem;
  color: var(--color-foreground);
}

/* hero wordmark — the full logo lockup has a navy wordmark that would be
   invisible on the navy hero, so the mark is paired with live white text */
.hero-lockup img { height: 62px; width: auto; border-radius: 8px; }
.hero-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.hero-wordmark b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, .85rem + .7vw, 1.5rem);
  letter-spacing: .06em;
  color: #fff;
}
@media (max-width: 560px) { .hero-lockup img { height: 46px; } }


/* ==========================================================================
   Round-2 polish (client feedback, 1 Sep 2026)
   ========================================================================== */

/* lead image at the top of every condition/service article */
.article-hero {
  margin: 0 0 var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  line-height: 0;
}
.article-hero img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }

/* consultant card meta — chips instead of bare inline links */
.consultant-meta span {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .3125rem .8125rem;
}
.consultant-meta a { text-decoration: none; font-weight: 600; }
.consultant-meta a:hover { text-decoration: underline; }

/* ==========================================================================
   Round-3 additions (client edits, 4 Sep 2026)
   ========================================================================== */

/* sub-brand badge (Honest iVF, LAPS Clinic): sits in the title row, next to
   the service name, at every size. The old layout floated it to the right of
   the whole text block, where phones shrank it to 76px and clipped it at the
   viewport edge. */
.page-head-titlerow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; margin-bottom: var(--space-md);
}
.page-head-titlerow h1 { margin-bottom: 0; }
.page-head-badge {
  /* client (5 Sep 2026): close to double on desktop — 128px -> 240px cap.
     The min keeps phones at the 96px they approved. */
  width: clamp(96px, 17vw, 240px); height: auto; flex: none;
  background: #fff; border-radius: var(--radius-lg); padding: .625rem;
  box-shadow: var(--shadow);
}

/* Shabbir + Sahai side by side on the LAPS page */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin: var(--space-lg) 0 var(--space-xl); }
@media (max-width: 560px) { .duo { grid-template-columns: 1fr; } }
.duo figure {
  margin: 0; background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; text-align: center;
}
.duo img, .duo .duo-monogram { width: 100%; aspect-ratio: 5/6; object-fit: cover; object-position: center top; }
.duo .duo-monogram {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #071240, #11588B);
  color: #fff; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: .05em;
}
.duo figcaption { padding: .875rem 1rem 1.125rem; }
.duo figcaption b { display: block; font-family: var(--font-head); color: var(--color-foreground); }
.duo figcaption span { display: block; font-size: .8125rem; color: var(--ink-soft); margin-top: .25rem; line-height: 1.5; }

/* PDF download card (LAPS leaflet) */
.download-card {
  display: block; background: var(--color-background);
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary);
  border-radius: var(--radius); padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}
.download-card a { font-family: var(--font-head); font-weight: 700; font-size: 1.0313rem; }
.download-card span { display: block; font-size: .8125rem; color: var(--ink-faint); margin-top: .25rem; }

/* link out to an at-a-glance comparison page */
.glance-link {
  background: var(--color-background); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-secondary); border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
}
.glance-link a { font-weight: 700; }

/* image placed inside article copy (restored old-site figures) */
.article-inline {
  margin: var(--space-lg) 0; border-radius: var(--radius-lg);
  overflow: hidden; border: 1px solid var(--color-border); line-height: 0;
}
.article-inline img { width: 100%; height: auto; }

/* the at-a-glance comparison tables */
table.glance { width: 100%; border-collapse: collapse; min-width: 720px; background: #fff; font-size: .9375rem; }
table.glance th, table.glance td { padding: .875rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
table.glance thead th {
  background: var(--color-foreground); color: #fff;
  font-family: var(--font-head); font-size: .8125rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; border-bottom: 0;
}
table.glance tbody th { font-weight: 600; color: var(--color-foreground); min-width: 150px; }
table.glance tbody tr:nth-child(even) { background: var(--color-background); }
table.glance tbody tr:last-child th, table.glance tbody tr:last-child td { border-bottom: 0; }

/* tighter gap between a consultant's job title and their bio (client note) */
.consultant-role { margin-bottom: .25rem; }
.consultant-extra { margin: 0 0 .5rem; }
.consultant-body p:not(.consultant-role):not(.consultant-extra) { margin-top: 0; }


/* Uniform text levels on desktop consultant cards (client note, 4 Sep 2026).
   The grid stretches the three cards to equal height; without this, the spare
   space used to stretch inside the ROLE paragraph (the old `.consultant-body p
   { flex:1 }` rule matched it), shoving two of the three bios downward. Now
   only the bio absorbs slack — below its text — and the head zone reserves
   room for the Clinical Lead line so all three bios start on the same line. */
.consultant-head { display: block; }
@media (min-width: 1024px) {
  .consultant-head { min-height: 5.9rem; }
}


/* "swipe to see more" cue on wide tables (client note, 5 Sep 2026).
   Hidden by default; main.js shows it only when the table genuinely
   overflows its container, and softens it once the reader has scrolled. */
.scroll-hint {
  display: none;
  align-items: center; gap: .5rem;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .5rem 1rem;
  margin: 0 0 .75rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: .875rem; color: var(--ink-soft);
  transition: opacity .4s var(--ease);
}
.scroll-hint.show { display: inline-flex; }
.scroll-hint.done { opacity: .45; }
.scroll-hint svg { width: 20px; height: 20px; flex: none; color: var(--primary-dark); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint.show svg { animation: hint-nudge 1.6s ease-in-out 3; }
  @keyframes hint-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
  }
}