/* =========================================================
   PLC Health Care — Diagnostics & Imaging
   Shared stylesheet. Plain CSS, no framework, no build step.
   ---------------------------------------------------------
   1.  Tokens
   2.  Reset + base
   3.  Layout helpers
   4.  Buttons / pills / badges
   5.  Topbar + header + nav
   6.  Hero
   7.  Section headings
   8.  Cards (service, test, package, post)
   9.  Steps / stats / marquee
   10. Accordion (FAQ)
   11. Testimonials
   12. Forms
   13. CTA band
   14. Footer
   15. Page banner (inner pages)
   16. Motion + responsive
   ========================================================= */

/* ---------------------------------------------------------
   1. Tokens
   --------------------------------------------------------- */
:root {
  /* Core palette — carried over from the approved reference design */
  --ink: #0b1030;
  --text: #556171;
  --accent: #4753bf;
  --accent-2: #506cd7;
  --tint: #f3f3ff;
  --tint-deep: #e8e8fb;
  --white: #ffffff;
  --divider: rgba(85, 97, 113, 0.14);
  --divider-dark: rgba(255, 255, 255, 0.16);

  /* Second arm. Laboratory reads indigo, Radiology reads teal, so the two
     halves of the business are told apart at a glance. Used sparingly. */
  --scan: #12a594;
  --scan-tint: #eafaf7;

  /* Status */
  --ok: #12a594;
  --warn: #c2860a;

  /* Type */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing + shape */
  --container: 1240px;
  --gap: 24px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 2px 10px rgba(11, 16, 48, 0.05);
  --shadow: 0 12px 34px rgba(11, 16, 48, 0.08);
  --shadow-lg: 0 24px 60px rgba(11, 16, 48, 0.12);

  --section-y: 56px;
}

/* ---------------------------------------------------------
   2. Reset + base
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Stops iOS inflating text in landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

h1, h2, h3, h4, h5 {
  margin: 0 0 16px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: clamp(20px, 2vw, 24px); }
h4 { font-size: 18px; line-height: 1.3; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

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

/* ---------------------------------------------------------
   3. Layout helpers
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: var(--section-y); }

/* The header is sticky, so an anchor jump would otherwise park the section's
   heading underneath it. */
[id]:target,
#services, #lab-tests, #radiology, #reviews, #faqs, #book {
  scroll-margin-top: 92px;
}
.section--tint { background: var(--tint); }
.section--ink { background: var(--ink); color: rgba(255, 255, 255, 0.72); }
.section--ink h2,
.section--ink h3 { color: var(--white); }
.section--tight { padding-block: 40px; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.text-center { text-align: center; }

/* One action closing a section, centred under whatever it follows — a card
   grid, usually. Its own element rather than a utility on the button, so the
   space above it belongs to the section rather than to the control. */
.section-action {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}
.mono { font-family: var(--mono); }

/* ---------------------------------------------------------
   4. Buttons / pills / badges
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  font-family: var(--font);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* The primary call to action. A flat fill read as inert next to the rest of
   the page, so: a gradient, a shadow tinted with the brand colour rather than
   grey, a firmer lift, and a highlight that sweeps across on hover.
   isolation + z-index:-1 keeps that sweep above the button's own background
   but behind its label — a positioned pseudo-element would otherwise paint
   straight over the text. */
.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 58%, #3b46a6 100%);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(71, 83, 191, 0.34);
  transition: box-shadow 0.22s ease, transform 0.22s ease, filter 0.22s ease;
}
.btn--primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  bottom: -10%;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn--primary:hover {
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(71, 83, 191, 0.44);
  filter: saturate(1.06);
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after { left: 125%; }
.btn--primary:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(71, 83, 191, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { display: none; }
  .btn--primary:hover { transform: none; }
}

.btn--ghost {
  background: var(--white);
  color: var(--ink);
  border-color: var(--divider);
}
.btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.btn--on-ink { background: var(--white); color: var(--ink); }
.btn--on-ink:hover { background: var(--accent); color: var(--white); }

.btn--outline-ink {
  background: transparent;
  color: var(--white);
  border-color: var(--divider-dark);
}
.btn--outline-ink:hover { background: var(--white); color: var(--ink); }

.btn--sm { padding: 11px 22px; font-size: 14px; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Eyebrow above a heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--tint);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.section--ink .eyebrow { background: rgba(255, 255, 255, 0.1); color: var(--white); }

/* Turnaround-time chip. The real currency of a diagnostics centre, so it
   gets its own component and appears wherever a test is named. */
.tat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--scan-tint);
  color: #0a7a6d;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.tat::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--tint);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
.badge--scan { background: var(--scan-tint); color: #0a7a6d; }

/* ---------------------------------------------------------
   5. Topbar + header + nav
   --------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 46px;
}
.topbar__list { display: flex; flex-wrap: wrap; gap: 26px; }
.topbar__list li { display: flex; align-items: center; gap: 8px; }
.topbar__list svg { width: 15px; height: 15px; color: var(--accent-2); flex: none; }
.topbar a { color: rgba(255, 255, 255, 0.7); }
.topbar a:hover { color: var(--white); }
/* Keeps values like "24 / 7" and "07:00 – 21:00" from breaking mid-token. */
.topbar strong { color: var(--white); font-weight: 500; white-space: nowrap; }

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--divider);
}
.header--scrolled { box-shadow: var(--shadow-sm); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.logo:hover { color: var(--ink); }

/* The supplied artwork as one piece — emblem stacked over the wordmark, the
   way the logo is drawn. Transparent, so it needs no plate behind it.
   Width follows height so the lockup keeps its 1.31:1 proportions. */
.logo__full {
  height: 74px;
  width: auto;
  max-width: none;
}
/* "Perfect" is a deep navy that measures 1.28:1 against the footer's --ink —
   invisible there. brightness(0) flattens the artwork and invert(1) lifts it
   to white, keeping the alpha, so the dark footer gets a mono version of the
   same lockup without shipping a second file. */
.footer .logo__full { filter: brightness(0) invert(1); }

@media (max-width: 900px) { .logo__full { height: 62px; } }
@media (max-width: 360px) { .logo__full { height: 54px; } }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}
.nav__link:hover,
.nav__link[aria-current="page"] { background: var(--tint); color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: 12px; }

/* Booking CTA inside the mobile menu. The header button is hidden on phones
   for room, so without this the site's primary action disappears entirely
   behind the hamburger. */
.nav__cta { display: none; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; margin-inline: auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

/* ---------------------------------------------------------
   6. Hero
   --------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--tint) 0%, #fafaff 100%);
  padding-block: 80px 96px;
}

/* Full-bleed photograph behind the hero. Like the page banners, the wash runs
   sideways — solid where the copy sits, clear where the people are. */
.hero--photo {
  --hero-img: url("../img/hero-home.jpg");
  /* The longest line of copy ends at ~42% of the width, so the wash holds
     until then and clears fast. Anything softer than this just fogs the
     photograph for no readability gain. */
  background-image:
    linear-gradient(96deg,
      rgba(247, 247, 255, 0.95) 0%,
      rgba(247, 247, 255, 0.92) 38%,
      rgba(247, 247, 255, 0.58) 46%,
      rgba(247, 247, 255, 0.14) 53%,
      rgba(247, 247, 255, 0) 60%),
    var(--hero-img);
  background-size: cover;
  background-position: right bottom;   /* the staff stand on the bottom edge */
  padding-block: 72px 80px;
  min-height: 600px;
  display: flex;
  align-items: center;
}
.hero--photo::before { display: none; }
.hero__mobile-photo { display: none; }

/* Single column. The photograph has three people spread across it with no
   clear gap on the right, so anything placed there lands on a face. All copy
   stays left, over the part of the frame that is actually empty. */
.hero--photo .hero__grid {
  grid-template-columns: minmax(0, 640px);
  align-items: center;
  width: 100%;
}

/* Four selling points under the lead. Two columns so they stay compact. */
.hero__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
  margin: 28px 0 30px;
  max-width: 520px;
}
.hero__features li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.hero__features svg {
  width: 34px; height: 34px;
  flex: none;
  padding: 7px;
  border-radius: 10px;
  background: var(--white);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* The promise and the four-word proof list, sitting under the buttons. */
.hero__aside {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--divider);
}

.hero__script {
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.hero__script span { color: var(--ink); }

.hero__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.hero__checks li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.hero__checks svg {
  width: 22px; height: 22px;
  flex: none;
  padding: 4px;
  border-radius: 50%;
  background: var(--scan);
  color: var(--white);
}

/* Kept with the component rather than in the shared breakpoints below,
   because .hero--photo .hero__grid outranks a bare .hero__grid override.

   Below 1200px the staff in the photograph stand exactly where the copy has to
   go — at 1024px the headline ran across the nurse's face — so the two are
   separated: the photo comes out of the background and sits above the copy at
   full strength. */
@media (max-width: 1200px) {
  .hero--photo {
    position: relative;
    background-image: none;
    background: linear-gradient(180deg, var(--tint) 0%, #fbfbff 100%);
    display: flex;
    flex-direction: column;
    /* the desktop rule sets align-items:center; as a column that becomes the
       horizontal axis and shrink-wraps children to zero width */
    align-items: stretch;
    min-height: 0;
    padding-block: 0 44px;
  }
  .hero--photo .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* order:-1 lifts it above the copy without touching the markup, so the
     document order still reads headline-first for screen readers. The file's
     bottom 20% is blended into #f3f3ff, the colour the hero gradient starts
     on, so there is no seam where it meets the text. Measured: 1/255. */
  .hero__mobile-photo {
    display: block;
    order: -1;
    width: 100%;
    margin: 0 0 28px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 12%;
  }
}

/* On a tablet the same crop becomes enormous, so flatten it there. */
@media (min-width: 561px) and (max-width: 760px) {
  .hero__mobile-photo { aspect-ratio: 2 / 1; }
}

/* Tablets in landscape and small laptops: flatter photo, and the copy splits
   into two columns (headline, lead and buttons left; the four selling points
   right, behind a hairline) so the width is used instead of leaving the right
   half of the screen empty. The promise line still runs the full width. */
@media (min-width: 761px) and (max-width: 1200px) {
  .hero--photo { padding-block: 0 56px; }
  .hero__mobile-photo { aspect-ratio: 2.2 / 1; margin-bottom: 40px; }

  .hero--photo .hero__grid > div {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas:
      "eyebrow  features"
      "title    features"
      "buttons  features"
      "aside    aside";
    column-gap: clamp(28px, 4vw, 48px);
    align-items: center;
  }
  .hero--photo .eyebrow        { grid-area: eyebrow; justify-self: start; }
  .hero--photo h1              { grid-area: title; }
  .hero--photo .btn-row        { grid-area: buttons; }
  .hero--photo .hero__aside    { grid-area: aside; }
  .hero--photo .hero__features {
    grid-area: features;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 0;
    max-width: none;
    padding-left: clamp(24px, 4vw, 40px);
    border-left: 1px solid var(--divider);
  }
}

/* With the photo taking the top of the screen, the copy is scaled down so the
   headline, lead and primary button still land in the first viewport. */
@media (max-width: 640px) {
  .hero--photo .eyebrow { font-size: 11.5px; padding: 7px 13px; margin-bottom: 14px; }
  .hero--photo h1 { font-size: 29px; line-height: 1.18; margin-bottom: 14px; }

  .hero__features { grid-template-columns: minmax(0, 1fr); gap: 11px; margin: 20px 0 22px; }
  .hero__features li { font-size: 14px; }
  .hero__features svg { width: 30px; height: 30px; padding: 6px; }

  .hero--photo .btn { padding: 14px 22px; font-size: 15px; }

  .hero__aside { margin-top: 24px; padding-top: 20px; }
  .hero__script { font-size: 15px; margin-bottom: 11px; }
  .hero__checks { gap: 9px 16px; }
  .hero__checks li { font-size: 14px; }
  .hero__checks svg { width: 19px; height: 19px; }
}

@media (max-width: 380px) {
  .hero--photo h1 { font-size: 26px; }
}
.hero::before {
  content: "";
  position: absolute;
  top: -180px; right: -140px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(71, 83, 191, 0.14) 0%, rgba(71, 83, 191, 0) 70%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

.hero h1 { margin-bottom: 20px; }
.hero h1 .soft { color: var(--accent); opacity: 0.55; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--divider);
  font-size: 14px;
}
.hero__proof strong { color: var(--ink); }
.stars { color: #f3a712; letter-spacing: 2px; }

/* Signature element — report lookup.
   People return to a diagnostics site mainly to fetch a result, so that
   job sits in the hero rather than three clicks deep. */
.lookup {
  margin-top: 30px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  border: 1px solid var(--divider);
}
.lookup__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.lookup__title svg { width: 18px; height: 18px; color: var(--accent); }
.lookup__row { display: flex; gap: 10px; }
.lookup__row input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
}
.lookup__row input::placeholder { font-family: var(--font); color: #9aa3b0; }
.lookup__row input:focus { border-color: var(--accent); outline: none; }
.lookup__hint { margin: 12px 0 0; font-size: 13px; }
.lookup__result {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 14px;
  color: var(--ink);
}

.hero__media { position: relative; }
.hero__photo {
  border-radius: 200px 200px var(--radius-lg) var(--radius-lg);
  background: var(--tint-deep);
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Floating cards over the hero image */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
}
.float-card strong { display: block; color: var(--ink); font-size: 19px; line-height: 1.2; }
.float-card span { color: var(--text); }
.float-card__icon {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tint);
  color: var(--accent);
}
.float-card__icon svg { width: 21px; height: 21px; }
.float-card--a { top: 16%; left: -28px; }
.float-card--b { bottom: 12%; right: -22px; }

/* ---------------------------------------------------------
   7. Section headings
   --------------------------------------------------------- */
.head { max-width: 620px; margin-bottom: 38px; }
.head--center { margin-inline: auto; text-align: center; }
.head h2 { margin-bottom: 14px; }
.head p { font-size: 17px; }

.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 38px;
}
.head-row .head { margin-bottom: 0; }

/* ---------------------------------------------------------
   8. Cards
   --------------------------------------------------------- */
.card {
  padding: 30px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--divider);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; }

/* Optional photo at the top of a card. Cards without one are unaffected —
   drop an <img class="card__media"> in as the first child to use it. */
.card__media {
  width: calc(100% + 60px);
  max-width: none;          /* overrides the global img { max-width: 100% } */
  margin: -30px -30px 22px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--tint-deep);
}

/* Illustrated icon at the top of a service card. */
.card__art {
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  object-fit: contain;
}

/* Whole card is the link, so the hit area is the card rather than four words. */
a.card--svc { display: flex; flex-direction: column; color: inherit; }
a.card--svc:hover { color: inherit; }
a.card--svc h3 { color: var(--accent); }
/* Pinned to the foot of the card. The cards are the same height (grid stretch)
   but the copy is not, so a three-line description used to lift its "Book now"
   24px above the two beside it. align-self keeps the link its own width rather
   than stretching across the card. */
a.card--svc .card__link {
  margin-top: auto;
  padding-top: 18px;
  align-self: flex-start;
  display: inline-flex;
}
a.card--svc:hover .card__link svg { transform: translateX(4px); }

.card__icon {
  width: 56px; height: 56px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--tint);
  color: var(--accent);
}
.card__icon svg { width: 27px; height: 27px; }
.card--scan .card__icon { background: var(--scan-tint); color: #0a7a6d; }

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
}
.card__link svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.card__link:hover svg { transform: translateX(4px); }

/* Test list inside a service card */
.test-list { margin-top: 16px; display: grid; gap: 9px; }
.test-list li {
  position: relative;
  padding-left: 25px;
  font-size: 15px;
}
.test-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.card--scan .test-list li::before { background: var(--scan); }

/* ---------------------------------------------------------
   Test card — photo, overlapping icon, name, one-line benefit, CTA
   --------------------------------------------------------- */
.test-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.test-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--divider);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.test-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

/* The source photographs already carry the white icon disc, printed across
   their lower-left corner. Rather than retouch it out — which left a visible
   patch — the photo is shown whole at its own aspect (so nothing crops) and
   our icon is placed as a percentage of the photo box, landing exactly on it.
   These four numbers are measured from the artwork, not guessed. */
.test-card {
  --photo-ar: 354 / 215;
  --disc-x: 5.93%;
  --disc-y: 77.2%;
  --disc-w: 20.62%;
}
.test-grid--lab .test-card {
  --photo-ar: 380 / 198;
  --disc-x: 5%;
  --disc-y: 76.3%;
  --disc-w: 17.37%;
}

.test-card__media {
  position: relative;
  aspect-ratio: var(--photo-ar);
  background: var(--tint-deep);
}
.test-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.test-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 22px;
}

/* Pulled up so it straddles the photo edge, as in the reference.
   Two forms share this class: an <img> disc for the lab tests and an inline
   <svg> for the imaging ones. Both read as a white disc with a colour glyph
   so the two sections match. */
.test-card__icon {
  position: absolute;
  left: var(--disc-x);
  top: var(--disc-y);
  width: var(--disc-w);
  aspect-ratio: 1;
  height: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--scan);
  box-shadow: 0 3px 10px rgba(11, 16, 48, 0.14);
  overflow: hidden;
}
.test-card__icon svg { width: 46%; height: 46%; }
img.test-card__icon { object-fit: cover; padding: 0; }

.test-card h3 {
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.3;
}
.test-card h3 span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
}
.test-card p {
  margin-bottom: 16px;
  font-size: 14px;
}

/* Three reassurance chips. Pushed to fill the spare height so every card's
   button lines up along the bottom of the row. */
.test-card__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: auto 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
  text-align: center;
}
.test-card__chips li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
  hyphens: auto;
}
.test-card__chips svg {
  width: 19px;
  height: 19px;
  color: var(--accent);
}
.test-card .btn { align-self: start; }

/* Radiology cards get their bottom alignment from the chip row's auto margin.
   Lab cards have no chip row, so a card whose name carries no bracketed
   subtitle ("Vitamin B12") came out one line short and floated its button
   19px above the rest of the row. */
.test-grid--lab .test-card .btn { margin-top: auto; }

/* Small laptops keep four columns — two even rows rather than 3 + 3 + 2 with a
   ragged last row. The cards get narrow there, so padding tightens and the
   three reassurance chips run as rows (rule shared with phones, below). */
@media (min-width: 1001px) and (max-width: 1100px) {
  .test-grid { gap: 16px; }
  .test-card__body { padding: 16px 16px 18px; }
  .test-card h3 { font-size: 16px; overflow-wrap: break-word; hyphens: auto; }
}
@media (min-width: 861px) and (max-width: 1000px) { .test-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* Narrow cards: the chips stack as icon + label rows. Three columns of 11.5px
   text in a 160px card put "Comfortable" and "osteoporosis" on top of their
   neighbours. */
@media (min-width: 1001px) and (max-width: 1100px), (max-width: 640px) {
  .test-card__chips { grid-template-columns: minmax(0, 1fr); gap: 7px; text-align: left; }
  .test-card__chips li { flex-direction: row; align-items: center; gap: 9px; font-size: 12px; }
  .test-card__chips svg { width: 17px; height: 17px; flex: none; }
}

/* Phones keep the two-up vertical card rather than going horizontal. A
   landscape photo squeezed into a tall narrow box shows a useless sliver of
   itself; keeping it full-width across the card top preserves the shot and
   the card still reads as the same design as the desktop one. */
@media (max-width: 640px) {
  .test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .test-card__body { padding: 14px 13px 15px; }

  /* "Mammography" alone is wider than a 126px card's text column, so let long
     single words hyphenate rather than spill. */
  .test-card h3 {
    font-size: 14.5px;
    margin-bottom: 4px;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .test-card h3 span { font-size: 12.5px; }
  .test-card p { font-size: 12.5px; margin-bottom: 13px; line-height: 1.45; }

  .test-card .btn {
    width: 100%;
    justify-content: center;
    gap: 7px;
    padding: 14px 10px;
    font-size: 13px;
  }
  .test-card .btn svg { width: 15px; height: 15px; }
}

/* Two columns hold even at 320px once long names can hyphenate — one column
   there would double the section to nearly 5000px of scrolling. */
@media (max-width: 359px) {
  .test-grid { gap: 10px; }
  .test-card__body { padding: 12px 11px 13px; }
  .test-card .btn { padding: 13px 6px; font-size: 12.5px; gap: 5px; }
}

/* Package / pricing card */
.package {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--divider);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.package:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.package--featured { border-color: var(--accent); box-shadow: var(--shadow); }
.package__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.package h3 { margin-bottom: 6px; }
.package__price {
  margin: 18px 0;
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.package__price small {
  display: block;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0;
}
.package .test-list { flex: 1; margin-bottom: 24px; }

/* Post card */
.post__thumb {
  aspect-ratio: 16 / 10;
  margin-bottom: 18px;
  border-radius: var(--radius-sm);
  background: var(--tint-deep);
}
.post__meta {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 13px;
}
.post h3 { font-size: 20px; }

/* ---------------------------------------------------------
   9. Steps / stats / marquee
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   How it works — four illustrated steps
   The number badge and corner icon are part of each image, so nothing is
   drawn over them here.
   --------------------------------------------------------- */
.howto { background: linear-gradient(180deg, #f5f7ff 0%, #fbfcff 100%); }
.howto h2 .soft { color: var(--accent-2); }

.howto__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
.howto__steps > li { position: relative; }

.howto__steps img {
  width: 100%;
  aspect-ratio: 874 / 584;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.howto__steps h3 { margin-bottom: 7px; font-size: 19px; line-height: 1.3; }
.howto__steps p { font-size: 14.5px; line-height: 1.5; }

/* Chevron between steps, sitting on the images' centre line. */
.howto__steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc((100% - 0px) * 0);
  right: -18px;
  width: 11px;
  height: 11px;
  border-top: 2.5px solid var(--accent);
  border-right: 2.5px solid var(--accent);
  transform: rotate(45deg);
  opacity: 0.4;
  margin-top: 16%;
}

.howto__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--divider);
}
.howto__trust li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }
.howto__trust svg { width: 21px; height: 21px; color: var(--accent); }

@media (max-width: 1000px) {
  .howto__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .howto__steps > li:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
  .howto__steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .howto__steps > li::after { display: none !important; }
  .howto__trust { gap: 12px 24px; margin-top: 40px; }
}

.step { position: relative; padding: 30px; border-radius: var(--radius); background: var(--white); }
.step__num {
  display: block;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { font-size: 15px; }

/* ---------------------------------------------------------
   Condition cards (about page)
   Eight areas of care. Each carries its own --tone / --tone-soft, the same
   two-property pattern the statistics cards already use, so the set reads as
   eight distinct things instead of one wall of white boxes. The tint stays
   pale and sits behind the icon, not behind the words: colour identifies the
   card, the text does the telling, and body copy keeps its contrast.
   --------------------------------------------------------- */
.care-card {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  background: linear-gradient(180deg, var(--tone-soft) 0%, var(--white) 58%);
}
.care-card > * { position: relative; z-index: 1; }

/* A soft disc of the card's own colour, bled off the bottom corner. It grows
   on hover so the whole tile answers the pointer, not just the shadow. */
.care-card::after {
  content: "";
  position: absolute;
  inset: auto -34% -48% auto;
  width: 148px; height: 148px;
  border-radius: 50%;
  background: var(--tone-soft);
  opacity: 0.5;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.care-card__icon {
  width: 52px; height: 52px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--white);
  color: var(--tone);
  box-shadow: 0 6px 16px rgba(11, 16, 48, 0.10);
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.28s ease;
}
.care-card__icon svg { width: 26px; height: 26px; }

.care-card h3 { margin-bottom: 8px; font-size: 19px; }
.care-card p { font-size: 14.5px; }

.care-card:hover .care-card__icon {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 12px 24px rgba(11, 16, 48, 0.18);
}
.care-card:hover::after { transform: scale(1.3); opacity: 0.7; }

/* Keyboard users get the same answer as the pointer. */
.care-card:focus-within .care-card__icon { transform: translateY(-4px) scale(1.06); }

@media (max-width: 640px) {
  .care-card { padding: 22px 20px 20px; }
  .care-card__icon { width: 46px; height: 46px; margin-bottom: 13px; border-radius: 14px; }
  .care-card__icon svg { width: 23px; height: 23px; }
  .care-card h3 { font-size: 17.5px; }
}

/* ---------------------------------------------------------
   Doctor portrait (about page)
   --------------------------------------------------------- */
/* Photo column is deliberately the narrower of the two — the portrait is
   supporting evidence, the words are the point. */
.doctor-intro {
  align-items: start;
  gap: 52px;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.doctor-photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(11, 16, 48, 0.16);
}
.doctor-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
/* Name plate over the foot of the photograph. */
.doctor-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 24px 20px;
  background: linear-gradient(to top, rgba(6, 10, 30, 0.86), rgba(6, 10, 30, 0));
  color: var(--white);
}
.doctor-photo strong { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.doctor-photo span { display: block; margin-top: 3px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }

/* Tablets keep the two columns (photo narrower) rather than a 420px portrait
   parked against the left edge with the right half of the screen empty.
   .split.doctor-intro outranks the bare .split collapse in the shared
   breakpoints. */
@media (min-width: 641px) and (max-width: 900px) {
  .split.doctor-intro { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px; }
}
@media (max-width: 640px) {
  .doctor-intro { gap: 28px; }
  .doctor-photo { max-width: 420px; }
}

/* ---------------------------------------------------------
   Free medical camp — a dated announcement, so it is deliberately the
   loudest block on the page and easy to lift out again afterwards.
   Laid out to follow the printed poster: pitch on the left, photo on the
   right. Brand indigo throughout — the poster's green is its own thing, but
   on the site it read as a second theme. The block earns its prominence from
   size, the rule across the top and the photo, not from a different colour.
   --------------------------------------------------------- */
.camp__card {
  /* Tied to the brand token, so changing --accent carries the camp with it. */
  --camp: var(--accent);
  /* The one warm note, as on the printed poster. Deeper than the poster's
     red because the tag is 11.5px and needs 4.5:1 against white. */
  --camp-free: #c2410c;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: 44px;
  align-items: center;
  padding: 46px 40px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--tint-deep);
  background: linear-gradient(180deg, var(--tint) 0%, var(--white) 58%);
  box-shadow: 0 18px 44px rgba(71, 83, 191, 0.13);
}
.camp__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* The photo column. The supplied photograph is a cut-out on white, so the
   frame is white too and the two blend into one shape. */
.camp__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.camp__media {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 16px 38px rgba(71, 83, 191, 0.18);
}
/* The outline ring drawn round the photo on the poster. */
.camp__media::before {
  content: "";
  position: absolute;
  inset: -12px;
  border: 2px solid rgba(71, 83, 191, 0.3);
  border-radius: 50%;
}
.camp__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.camp__flag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: rgba(71, 83, 191, 0.12);
  color: var(--camp);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.camp__head h2 {
  margin-bottom: 10px;
  color: var(--camp);
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.03em;
}
.camp__tagline {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}
/* Break between the three items, never inside one — otherwise a narrow phone
   splits "check-up" at its hyphen. The spaces around the separators are the
   only break opportunities left. */
.camp__tagline span { white-space: nowrap; }

/* The four free items. */
.camp__free {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 20px;
}
.camp__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--divider);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.camp__ico {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--tint-deep);
  color: var(--camp);
}
.camp__ico svg { width: 26px; height: 26px; }
.camp__tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--camp-free);
}
/* Names sit on one baseline whether or not the item carries a Free tag. */
.camp__name {
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* When and where. */
.camp__when {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--tint-deep);
}
.camp__when-col {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.camp__when-col + .camp__when-col { border-left: 1px solid var(--divider); padding-left: 18px; }
.camp__when-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--white);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.camp__when-ico svg { width: 22px; height: 22px; }
.camp__when-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.camp__when-value {
  margin: 2px 0 1px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.camp__when-sub { font-size: 13.5px; color: var(--text); }

.camp__where {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 24px;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
}
.camp__where svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--accent); }
.camp__where strong { color: var(--ink); }

.camp__motto {
  margin: 0;
  font-size: 14.5px;
  font-style: italic;
  text-align: center;
  color: var(--camp);
}

/* Flag the camp in the header so it is visible without scrolling. */
.nav__link--camp { color: var(--accent); font-weight: 600; }
.nav__link--camp::before {
  content: "";
  width: 7px; height: 7px;
  margin-right: 2px;
  border-radius: 50%;
  background: currentColor;
}

/* The photo column cannot hold its width and still leave room for four
   tiles, so the card stacks one step before the tiles drop to two-up. */
@media (max-width: 1000px) {
  .camp__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    text-align: center;
  }
  .camp__when-col,
  .camp__where { justify-content: center; }
  .camp .btn-row { justify-content: center; }
}
/* Still side by side, but the photo leaves the text column under 600px —
   four tiles there squeeze "Consultation" into its own padding, so they go
   two-up until the column is wide enough to hold four. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .camp__free { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .camp__card { padding: 38px 26px 32px; }
  .camp__free { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .camp__card { padding: 32px 18px 28px; }
  .camp__tagline { font-size: 15.5px; }
  .camp__free { gap: 12px; margin: 24px 0 18px; }
  .camp__item { padding: 16px 10px 14px; }
  .camp__ico { width: 46px; height: 46px; margin-bottom: 2px; }
  .camp__ico svg { width: 23px; height: 23px; }
  .camp__name { font-size: 14px; }
  .camp__when { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
  .camp__when-col { justify-content: flex-start; }
  /* Stacked now, so the rule between the two has to move from side to top. */
  .camp__when-col + .camp__when-col {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--divider);
    padding-top: 14px;
  }
  .camp__where { margin: 16px 0 22px; }
  .camp__media { max-width: 240px; }
}

/* ---------------------------------------------------------
   Why us + opening hours
   --------------------------------------------------------- */
.whyus { background: linear-gradient(180deg, #f6f7ff 0%, #fbfbff 100%); }

.whyus__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: start;
}
.whyus__grid > div > p { max-width: 560px; font-size: 17px; }

/* Underline flourish under the accented half of the heading. */
.whyus h2 .soft {
  position: relative;
  color: var(--accent-2);
  white-space: nowrap;
}
.whyus h2 .soft::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.12em;
  height: 0.09em;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.35;
}

.feat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  margin-top: 32px;
}
.feat li { display: flex; gap: 14px; }
/* The icons are the artwork's own — tinted disc and all — so no background
   or colour is applied here. */
.feat__icon {
  width: 52px;
  height: 52px;
  flex: none;
}
.feat strong { display: block; color: var(--ink); font-size: 15.5px; line-height: 1.3; }
.feat span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; }

.whyus__script {
  margin: 0 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent);
}
.whyus__script span { color: var(--ink); }

/* The hours card, with the photograph tucked behind its right edge. */
.whyus__aside { position: relative; }

.hours-card {
  position: relative;
  z-index: 1;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 20px 50px rgba(11, 16, 48, 0.10);
  border: 1px solid var(--divider);
}
.hours-card__head { display: flex; gap: 14px; margin-bottom: 22px; }
.hours-card__badge {
  width: 48px; height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--tint);
  color: var(--accent);
}
.hours-card__badge svg { width: 23px; height: 23px; }
.hours-card__head h3 { margin: 0 0 3px; font-size: 21px; }
.hours-card__head p { font-size: 14px; margin: 0; }

.hours-card__list { margin-bottom: 24px; }
.hours-card__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 15px;
}
.hours-card__list li:last-child { border-bottom: 0; }
.hours-card__list strong { flex: 1; color: var(--ink); font-weight: 500; }
.hours-card__list .mono { font-size: 14px; white-space: nowrap; }
.hours-card__ico { width: 19px; height: 19px; flex: none; color: var(--accent); opacity: 0.75; }
.hours-card__ico svg { width: 19px; height: 19px; }

.hours-card__call { margin-top: 10px; gap: 9px; font-size: 15px; }
.hours-card__call svg { width: 17px; height: 17px; }

/* Sits under the hours card. The left column runs ~150px taller, and an
   address is the thing a patient looks for next anyway. */
.find-card {
  display: flex;
  gap: 15px;
  margin-top: 18px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-sm);
}
.find-card__ico {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tint);
  color: var(--accent);
}
.find-card__ico svg { width: 20px; height: 20px; }
.find-card h3 { margin: 0 0 5px; font-size: 17px; }
.find-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.find-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
}
.find-card__link svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.find-card__link:hover svg { transform: translateX(4px); }

.whyus__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--divider);
}
.whyus__trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
}
.whyus__trust svg { width: 21px; height: 21px; color: var(--accent); }

/* Two columns hold down to 900px with a tighter gutter; the feature list drops
   to one column so its labels stop wrapping to three lines. */
@media (min-width: 901px) and (max-width: 1100px) {
  .whyus__grid { gap: 36px; }
  .feat { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 900px) {
  .whyus__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
/* On tablets the hours card and the clinic card sit side by side, instead of
   one 520px card against the left edge with the right half of the screen
   empty. */
@media (min-width: 641px) and (max-width: 900px) {
  .whyus__aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .hours-card { padding: 24px; }
  .find-card { margin-top: 0; }
}
@media (max-width: 620px) {
  .feat { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hours-card { padding: 22px; }
  .whyus__trust { gap: 12px 24px; margin-top: 40px; }
}

/* ---------------------------------------------------------
   Stats — four figures on a light ground, each with its own colour
   --------------------------------------------------------- */
.stats { background: linear-gradient(180deg, #f7f8ff 0%, #fdfdff 100%); }

.stats__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 34px;
}
.stats__top .head { margin-bottom: 0; max-width: 560px; }
.stats__top .eyebrow { gap: 9px; }
.stats__top .eyebrow::before { display: none; }   /* the chart icon replaces the dot */
.stats__top .eyebrow svg { width: 15px; height: 15px; }
.stats__top h2 .soft { color: var(--accent-2); }

.stats__team {
  width: 100%;
  border-radius: var(--radius);
  justify-self: end;
}

/* Wide enough and the four figures are a row you take in at a glance, so the
   track is simply a grid and the second set is not rendered at all. It only
   becomes a moving rail on a phone — see the 560px block below. */
.stat-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.stat-track > [aria-hidden="true"] { display: none; }

.stat-card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 24px 24px 42px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stat-card__icon {
  width: 54px; height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tone-soft);
  color: var(--tone);
}
.stat-card__icon svg { width: 25px; height: 25px; }

.stat-card__body { position: relative; z-index: 1; min-width: 0; }
.stat-card__value {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(26px, 2.4vw, 33px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat-card p { font-size: 14px; line-height: 1.45; }

/* Tinted swell along the bottom of each card, in that card's own colour. */
.stat-card__wave {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 62px;
  fill: var(--tone-soft);
  opacity: 0.85;
}

.stats__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 22px;
  margin: 34px 0 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8892a4;
}
.stats__strip span { display: inline-flex; align-items: center; gap: 22px; }
.stats__strip span + span::before {
  content: "";
  width: 1px; height: 13px;
  background: var(--divider);
}

@media (max-width: 1100px) {
  .stats__top { gap: 32px; }
  .stat-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Single column below 900px, with the photograph running the full width rather
   than a 520px block against the left edge. */
@media (max-width: 900px) {
  .stats__top { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .stats__team { justify-self: stretch; }
}
@media (max-width: 560px) {
  /* Stacked, the four figures take most of a phone screen for four short
     facts. As a rail they read in the space of one card and keep moving, the
     same treatment the conditions strip and the reviews already get. */
  .stat-rail {
    overflow: hidden;
    /* the ends fade rather than being cut off square */
    -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .stat-track {
    display: flex;
    width: max-content;
    gap: 14px;
    animation: stat-scroll 38s linear infinite;
  }
  .stat-track > .stat-card { width: 258px; flex: none; }
  /* the second set is what the first scrolls into */
  .stat-track > [aria-hidden="true"] { display: flex; }
  .stat-rail:hover .stat-track,
  .stat-rail:focus-within .stat-track { animation-play-state: paused; }
  .stat-card { padding: 20px 20px 36px; gap: 14px; }
  .stat-card__icon { width: 46px; height: 46px; }
  .stat-card__icon svg { width: 21px; height: 21px; }
  .stats__strip { gap: 8px 14px; font-size: 12px; }
  /* Once the strip wraps, a divider at the start of a line reads as a stray bar. */
  .stats__strip span + span::before { display: none; }
}

.stat { padding: 30px 0; }
.stat__value {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
}
.section--ink .stat { border-top: 1px solid var(--divider-dark); }
.stat p { font-size: 15px; }

/* Conditions rail — a continuous drift rather than a blink.
   Blinking content is a WCAG 2.2.2 failure and unpleasant to sit next to;
   a slow scroll reads as "alive" and stays legible. Pauses on hover and on
   keyboard focus, and stops entirely under prefers-reduced-motion. */
.cond-rail {
  overflow: hidden;
  padding-block: 10px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cond-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: cond-scroll 70s linear infinite;
}
.cond-rail:hover .cond-track,
.cond-rail:focus-within .cond-track { animation-play-state: paused; }

.cond-track li {
  flex: none;
  width: 124px;
  text-align: center;
}
.cond-track img {
  width: 84px;
  height: 84px;
  margin: 0 auto 10px;
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1),
              filter 0.28s ease;
}
.cond-track span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.2s ease;
}

/* Lift the one under the cursor. The whole rail has already stopped by this
   point, so the icon is a stationary target rather than a moving one. */
.cond-track li:hover img {
  transform: translateY(-7px) scale(1.09);
  filter: drop-shadow(0 12px 18px rgba(11, 16, 48, 0.22));
}
.cond-track li:hover span { color: var(--accent); }

/* Everything else recedes slightly, so the hovered item reads as picked out. */
.cond-rail:hover .cond-track li:not(:hover) img { filter: saturate(0.55) opacity(0.75); }
@keyframes cond-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Left to right: the track starts one whole set to the left and slides back to
   zero, so each card enters at the left edge and leaves at the right. The other
   two rails on the site run the opposite way. */
@keyframes stat-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.marquee {
  overflow: hidden;
  padding-block: 26px;
  background: var(--accent);
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: 52px;
  padding-right: 52px;
  animation: marquee 26s linear infinite;
}
.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 52px;
  color: var(--white);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.marquee span::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------
   10. Accordion (FAQ)
   --------------------------------------------------------- */
.accordion { display: grid; gap: 14px; }
.acc {
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
}
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.acc__btn svg {
  width: 20px; height: 20px;
  flex: none;
  color: var(--accent);
  transition: transform 0.25s ease;
}
.acc__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 0 26px 24px; font-size: 15px; }
.acc[data-open="true"] .acc__panel { grid-template-rows: 1fr; }
.acc[data-open="true"] { border-color: var(--accent); }

/* ---------------------------------------------------------
   11. Reviews — continuous left-to-right rail
   Same reasoning as the conditions strip: a steady drift rather than a
   snap, pausable on hover and keyboard focus, stopped outright under
   prefers-reduced-motion (where it becomes a normal swipeable row).
   --------------------------------------------------------- */
.review-rail {
  overflow: hidden;
  padding-block: 6px 14px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.review-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-inline: 20px;
  animation: review-scroll 80s linear infinite;
}
.review-rail:hover .review-track,
.review-rail:focus-within .review-track { animation-play-state: paused; }

.review-track > li { flex: none; width: 360px; }

.review {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-sm);
}
.review__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
  color: #f3a712;
}
.review__stars svg { width: 17px; height: 17px; }
.review__text {
  flex: 1;
  margin-bottom: 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
}
.review__by { display: flex; align-items: center; gap: 13px; }
.review__avatar {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
}
.review__by strong { display: block; color: var(--ink); font-size: 15px; }
.review__by span span { font-size: 14px; color: var(--text); }

@keyframes review-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .review-track > li { width: 290px; }
  .review { padding: 22px; }
  .review__text { font-size: 14.5px; }
}

/* ---------------------------------------------------------
   11b. Testimonials (legacy horizontal scroller)
   --------------------------------------------------------- */
.quotes {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.quote {
  flex: 0 0 min(400px, 82vw);
  scroll-snap-align: start;
  padding: 30px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--divider);
}
.quote p { font-size: 16px; color: var(--ink); margin-bottom: 22px; }
.quote__by { display: flex; align-items: center; gap: 13px; }
.quote__avatar {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent);
  font-weight: 600;
}
.quote__by strong { display: block; color: var(--ink); font-size: 15px; }
.quote__by span { font-size: 14px; }

/* ---------------------------------------------------------
   12. Forms
   --------------------------------------------------------- */
.form { display: grid; gap: 18px; }
/* Two fields per row, but only while each one can still hold a native date
   picker (~181px for the day/month/year spinner, which has a hard minimum).
   auto-fit measures the panel rather than the viewport, so the row folds to one
   column wherever it is too tight — in the booking sidebar just above 900px,
   for instance — instead of pushing the control out of its field. */
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); outline: none; }

/* Everything else on the page answers keyboard focus with a 3px ring; the form
   controls were answering with a 1px border tint, which is the one place it
   matters most — a reader tabbing a nine-field booking form has to be able to
   see where they are. Same ring, offset tightened so it hugs the rounded field
   rather than colliding with the label above it. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}
.field small { font-size: 13px; }
.field--error input,
.field--error select,
.field--error textarea { border-color: #c0392b; }
.field__error { display: none; font-size: 13px; color: #c0392b; }
.field--error .field__error { display: block; }

.form__note { font-size: 14px; }

.form-panel {
  padding: 36px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
  border: 1px solid var(--divider);
}

/* A column of panels (the booking and contact sidebars). Spacing lives here
   rather than in inline styles so the tablet layout below can override it. */
.panel-stack > * + * { margin-top: 24px; }

.form-status {
  display: none;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: var(--scan-tint);
  color: #0a5c52;
  font-size: 15px;
}
.form-status[data-visible="true"] { display: block; }

/* ---------------------------------------------------------
   Contact cards
   The three ways to reach the clinic, sitting above the footer as the last
   thing on the page. Each takes its own tone the way the condition cards do,
   with a rule of that colour along the top edge, so the three read as a set of
   choices rather than one block of small print.
   --------------------------------------------------------- */
.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--tone);
}
.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.contact-card__icon {
  width: 54px; height: 54px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--tone-soft);
  color: var(--tone);
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card:hover .contact-card__icon,
.contact-card:focus-within .contact-card__icon { transform: translateY(-3px) scale(1.06); }

/* The label is the quiet part — the number or address is what people came for,
   so the heading steps back and the value takes the weight. */
.contact-card h3 {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.contact-card__value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  /* an email address is one unbreakable token; without this it pushes the card
     past the screen edge on a narrow phone */
  overflow-wrap: anywhere;
}
a.contact-card__value:hover { color: var(--tone); }
.contact-card__value + .contact-card__value { margin-top: 7px; }

.contact-card__addr {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}

/* Pinned to the foot so the three cards line up along the bottom whatever
   length their contents run to. */
.contact-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 18px;
  font-size: 14px;
}
a.contact-card__foot { color: var(--tone); font-weight: 600; }
.contact-card__foot svg { width: 15px; height: 15px; flex: none; transition: transform 0.2s ease; }
.contact-card:hover a.contact-card__foot svg { transform: translateX(4px); }

@media (max-width: 640px) {
  .contact-card { padding: 24px 20px 22px; }
  .contact-card__icon { width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; }
  .contact-card__icon svg { width: 22px; height: 22px; }
  .contact-card__value { font-size: 17px; }
}

/* Opening hours */
.hours { display: grid; gap: 2px; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 15px;
}
.hours li:last-child { border-bottom: 0; }
.hours strong { color: var(--ink); font-weight: 500; }
.hours .mono { font-size: 14px; }

/* ---------------------------------------------------------
   13. CTA band
   --------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  padding: 64px;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: auto -10% -60% auto;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.cta > * { position: relative; }
.cta h2 { color: var(--white); margin-bottom: 14px; }
.cta p { max-width: 560px; margin-inline: auto; margin-bottom: 30px; font-size: 17px; }
.cta .btn-row { justify-content: center; }

/* ---------------------------------------------------------
   14. Footer
   --------------------------------------------------------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, 0.64); padding-block: 72px 0; }
.footer h4 { color: var(--white); font-size: 16px; margin-bottom: 20px; }
.footer a { color: rgba(255, 255, 255, 0.64); }
.footer a:hover { color: var(--white); }
.footer .logo { color: var(--white); margin-bottom: 20px; }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 48px;
}
.footer__links { display: grid; gap: 12px; font-size: 15px; }
.footer__contact { display: grid; gap: 14px; font-size: 15px; }
.footer__contact li { display: flex; gap: 11px; }
.footer__contact svg { width: 18px; height: 18px; flex: none; color: var(--accent-2); margin-top: 2px; }

/* Footer columns collapse on phones. The heading is a real <button> so it is
   reachable by keyboard and announced as expandable; on desktop the same
   button is styled as plain text and the panel is always open. */
.footer__toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  text-align: left;
  cursor: default;
}
.footer__toggle svg { display: none; }

@media (max-width: 640px) {
  .footer__col { border-bottom: 1px solid var(--divider-dark); }
  .footer__col:first-of-type { border-top: 1px solid var(--divider-dark); }
  .footer__col h4 { margin: 0; }

  .footer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 17px;
    cursor: pointer;
  }
  .footer__toggle svg {
    display: block;
    width: 18px; height: 18px;
    flex: none;
    opacity: 0.7;
    transition: transform 0.25s ease;
  }
  .footer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* max-height rather than the 0fr/1fr grid trick the FAQ accordion uses:
     with grid, the wrapper's own padding sits outside the collapsed row and
     leaves a 10px gap under every closed heading. max-height collapses to a
     true zero. The cap only needs to clear the longest list (202px today). */
  .footer__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }
  .footer__col[data-open="true"] .footer__panel { max-height: 600px; }
  .footer__panel > div { padding-bottom: 10px; }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-block: 26px;
  border-top: 1px solid var(--divider-dark);
  font-size: 14px;
}
.footer__bottom ul { display: flex; gap: 22px; }

/* ---------------------------------------------------------
   15. Page banner (inner pages)
   --------------------------------------------------------- */
.banner {
  position: relative;
  overflow: hidden;
  padding-block: 72px;
  background: var(--tint);
  text-align: center;
}
.banner::before {
  content: "";
  position: absolute;
  top: -200px; left: 50%;
  width: 700px; height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(71, 83, 191, 0.13) 0%, rgba(71, 83, 191, 0) 70%);
}

.banner > * { position: relative; }
.banner h1 { margin-bottom: 12px; }
.banner p { max-width: 620px; margin-inline: auto; font-size: 17px; }

/* Optional photograph behind a banner. The pale wash on top is what keeps the
   dark heading readable — without it, text over a photo is a coin toss.
   Usage:  <section class="banner banner--photo banner--home">

   Image paths are declared here rather than inline, because a relative url()
   inside a custom property resolves against THIS file, not the page. Declaring
   it in the HTML sends the browser looking in assets/css/assets/img/.
   To add another: copy the line below and point it at your file. */
.banner--home    { --banner-img: url("../img/banner-home.jpg"); }
.banner--photo {
  /* Horizontal wash rather than a flat one: near-opaque on the left where the
     heading sits, clearing to almost nothing on the right so the photograph
     stays vivid. Assumes a photo with its subject on the right. */
  background-image:
    linear-gradient(95deg,
      rgba(243, 243, 255, 0.95) 0%,
      rgba(243, 243, 255, 0.92) 34%,
      rgba(243, 243, 255, 0.55) 43%,
      rgba(243, 243, 255, 0.12) 51%,
      rgba(243, 243, 255, 0) 58%),
    var(--banner-img);
  background-size: cover;
  background-position: center right;
  padding-block: 104px;
  text-align: left;
}
.banner--photo::before { display: none; }

.banner--photo h1 { max-width: 15ch; }
/* The body grey drops below AA over a dark photograph, so it is darkened here
   and pinned left instead of centred. */
.banner--photo p {
  max-width: 46ch;
  margin-inline: 0;
  color: #3d4757;
}
.banner--photo .crumbs { justify-content: flex-start; }
.banner--photo .crumbs a { color: #39439f; }

.crumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 14px;
}
.crumbs li::after { content: "/"; margin-left: 10px; color: var(--divider); }
.crumbs li:last-child::after { content: ""; }
.crumbs [aria-current="page"] { color: var(--text); }

/* ---------------------------------------------------------
   16. Motion + responsive
   --------------------------------------------------------- */
/* Only hide content when JavaScript is actually running to bring it back.
   Without the `js` class (scripts blocked or failed) everything stays visible. */
/* The entrance slide uses the standalone `translate` property rather than
   `transform`. It did use transform, and `.js .reveal.is-visible` carries three
   classes, so it outranked every `.card:hover` (two) and quietly cancelled the
   lift each card was written to have — no card on the site actually rose to the
   pointer once it had revealed. Keeping the two on separate properties lets the
   entrance and the hover coexist instead of competing. */
.js .reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.6s ease, translate 0.6s ease;
}
.js .reveal.is-visible { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; translate: none; }
  .marquee__track { animation: none; }
  /* Stop the rail rather than fast-forwarding it: the global 0.01ms override
     above would otherwise snap it straight to the end of the loop. */
  .cond-track { animation: none; }
  .cond-rail { overflow-x: auto; }
  .review-track { animation: none; }
  .review-rail { overflow-x: auto; }
  .stat-track { animation: none; }
  .stat-rail { overflow-x: auto; }
}

@media (max-width: 1100px) {
  :root { --section-y: 48px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero__media { max-width: 460px; margin-inline: auto; width: 100%; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .split { gap: 40px; }
}

/* Between 901 and ~930px the desktop header stopped fitting: the logo and the
   "Book a test" button both wrapped onto two lines. Tighter nav spacing keeps
   everything on one line until the hamburger takes over at 900px. */
@media (min-width: 901px) and (max-width: 1000px) {
  .header__inner { gap: 16px; }
  .nav__link { padding: 10px 12px; font-size: 15px; }
  .logo,
  .header__actions .btn { white-space: nowrap; }
}

/* Tablets: two columns where one left half the screen empty. An odd last card
   spans the full width so there is no hole in the grid. */
@media (min-width: 641px) and (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  .panel-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    /* stretch, not start: two cards side by side that stop at different
       heights leave a ragged step between them. Their contents stay top
       aligned, so the shorter card simply carries more white space. */
    align-items: stretch;
  }
  .panel-stack > * + * { margin-top: 0; }
  .panel-stack > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .form-panel { padding: 28px; }
}

@media (max-width: 900px) {
  /* A split that has stacked hands its text the full container width. At 768px
     that is a 95-character line, well past the ~75 where the eye starts losing
     its place on the return sweep. Same cap .head already applies elsewhere. */
  .split > div > p,
  .split > div > .test-list { max-width: 64ch; }

  .topbar__inner { justify-content: center; }
  .topbar__list { justify-content: center; gap: 4px 20px; }
  .topbar__list--right { display: none; }

  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 20px 22px;
    background: var(--white);
    border-bottom: 1px solid var(--divider);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 124px);
    overflow-y: auto;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__link { padding: 13px 16px; }
  .header__actions .btn { display: none; }
  .nav__cta { display: flex; margin-top: 12px; }

  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }

  /* Phones get the half-size file. At this width the full-width banner is
     three times the bytes for no visible difference. */
  .banner--home { --banner-img: url("../img/banner-home-sm.jpg"); }

  /* Narrow screens crop the photo down to its subject, so the sideways wash
     stops working. Back to a flat one that reads over any part of the image. */
  .banner--photo {
    background-image:
      linear-gradient(rgba(243, 243, 255, 0.90), rgba(243, 243, 255, 0.84)),
      var(--banner-img);
    /* The people sit in the right third of the plate. Narrow screens only show
       about a third of the image, so "center" lands on empty wall — 90% keeps
       the nurse and patient framed. */
    background-position: 90% center;
    padding-block: 72px;
    text-align: center;
  }
  .banner--photo h1,
  .banner--photo p { max-width: 620px; margin-inline: auto; }
  .banner--photo .crumbs { justify-content: center; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cta { padding: 44px 26px; }
  .float-card--a { left: -6px; }
  .float-card--b { right: -6px; }
}

/* ---------------------------------------------------------
   Touch targets.
   Plain text links come out 18–24px tall, well under the ~44px a fingertip
   needs. Padding is added rather than font size, so nothing gets bigger —
   the hit area just grows to meet the text. List gaps are removed to
   compensate, so the footer does not balloon.
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .footer__links { gap: 0; }
  .footer__links a,
  .footer__bottom ul a { display: inline-block; padding-block: 12px; }

  /* Pad the anchor, not the <li> — the <li> is the row, the <a> is the target. */
  .footer__contact { gap: 2px; }
  .footer__contact a { display: inline-block; padding-block: 11px; }

  /* The wordmark is a link too. As plain text it falls under the touch
     minimum — and by a different amount once it wraps at 320px — so a
     min-height guarantees the target instead of padding guessing at it. */
  .logo { min-height: 44px; }
  .footer__contact li { align-items: flex-start; }
  .footer__contact svg { margin-top: 13px; }

  .form__note a { display: inline-block; padding-block: 11px; }

  .crumbs a,
  .crumbs [aria-current] { display: inline-block; padding-block: 12px; }
  .crumbs li::after { vertical-align: middle; }

  .card__link,
  .find-card__link { padding-block: 10px; }
  /* The value is the tap target on a phone — a phone number or an email
     address people are reaching for with a thumb. */
  .contact-card__value,
  a.contact-card__foot { padding-block: 11px; }
  /* The 7px gap between the two stacked email addresses is carried by that
     padding now — keeping both would leave 29px of dead space between them. */
  .contact-card__value + .contact-card__value { margin-top: 0; }
  .lookup__hint a { display: inline-block; padding-block: 8px; }

}

/* ---------------------------------------------------------
   Very narrow phones (below ~360px: iPhone SE 1st gen at 320, small Androids,
   and a browser window dragged narrow). The page must reflow here rather than
   grow a horizontal scrollbar — sideways scrolling hides the right edge of
   every section, and the reader has no way to know it is there.
   --------------------------------------------------------- */
@media (max-width: 360px) {
  /* 20px each side is a big share of a 280px screen. */
  .container { padding-inline: 14px; }

  /* Each row is: icon, label, then a value that must not break mid-token
     ("6:00 - 9:00 pm"). Below this width the two cannot share a line, so the
     label takes the full row and the value sits underneath it. */
  .hours-card__list li,
  .hours li {
    flex-wrap: wrap;
    row-gap: 2px;
    justify-content: flex-start;
  }
  .hours-card__list li > strong,
  .hours li > strong { flex: 1 0 100%; }
  .hours-card__list .mono,
  .hours .mono { margin-left: 31px; }   /* clears the 19px icon + 12px gap */
  .hours .mono { margin-left: 0; }      /* the plain list has no icon column */

  /* Long single words in headings and pills would otherwise set the floor. */
  h1, h2, h3, .eyebrow { overflow-wrap: break-word; }

  /* A full-width button is more tappable than one squeezed to its text. */
  .btn-row > .btn { flex: 1 1 100%; }

  /* The wordmark is the one thing here that must not wrap: "PLC Health Care"
     broken over three lines reads as three things, not one name. Everything in
     the bar is scaled down together so the name keeps a single line, and the
     toggle stays at 44px, the minimum comfortable tap target. */
  .header__inner { gap: 10px; min-height: 66px; }
  .logo { font-size: 16.5px; }
  .nav-toggle { width: 44px; height: 44px; }
  .nav { max-height: calc(100vh - 112px); }
}

/* The test cards hold two columns down to 300px, where each is about 130px
   wide. Below that the card is ~100px and the reassurance labels ("Detects
   osteoporosis") no longer fit beside their icon, so they spilled out of the
   card. One column per row from here down. */
@media (max-width: 300px) {
  .test-grid { grid-template-columns: minmax(0, 1fr); }
  /* The chips stay as icon + label rows (inherited from the phone rules): three
     columns across a 216px card gives each label 59px, and "osteoporosis" needs
     66px. A full-width card has ample room for rows. */
  .test-card__chips li { overflow-wrap: break-word; }
  .test-card .btn { width: auto; }

  /* A native date input has an intrinsic minimum width — the day/month/year
     spinner cannot be squeezed — so at this size it was wider than the panel
     holding it. Buying the width back from the panel's padding keeps the
     control intact and the 16px font (anything smaller makes iOS zoom in on
     focus, which strands the reader mid-form). */
  .form-panel { padding: 16px; }
  .field input,
  .field select,
  .field textarea { min-width: 0; padding-inline: 14px; }
}

/* Narrower than any shipping phone (a desktop window dragged very small, or a
   280px feature phone). One more step down keeps the wordmark on one line. */
@media (max-width: 285px) {
  .container { padding-inline: 12px; }
  .header__inner { gap: 8px; }
  .logo { font-size: 15px; }
}

@media (max-width: 640px) {
  :root { --section-y: 40px; --gap: 18px; }
  .topbar { font-size: 13px; }
  .topbar__inner { text-align: center; }
  .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }

  /* The service cards keep two to a row on a phone, the way the test cards
     below them already do — six full-width cards is 1836px of scrolling for
     six short lines of copy, and half that two-up. Scoped to the section
     rather than put on .grid--3, because the contact page uses that same class
     for three cards carrying whole email addresses; two of those to a row
     leaves each about 160px and breaks the addresses apart.

     The card is scaled down to suit half a screen at the same time. Left at
     full size the 24px padding alone takes a third of a 159px card, leaving
     109px of text column and a six-line description. */
  #services .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  #services .card--svc { padding: 18px 16px 16px; }
  #services .card__art { width: 54px; height: 54px; margin-bottom: 14px; }
  #services .card--svc h3 {
    font-size: 16.5px;
    margin-bottom: 7px;
    /* "Consultation" is wider than the text column here */
    overflow-wrap: break-word;
  }
  #services .card--svc p { font-size: 13.5px; line-height: 1.45; }
  #services .card__link { font-size: 13.5px; padding-top: 14px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .form-panel { padding: 24px; }
  .lookup__row { flex-direction: column; }
  .lookup__row .btn { width: 100%; }
  .card, .package, .step, .quote { padding: 24px; }
  .card__media { width: calc(100% + 48px); margin: -24px -24px 20px; }
  .float-card { position: static; margin-top: 12px; box-shadow: var(--shadow); }
  .hero__photo { border-radius: 140px 140px var(--radius-lg) var(--radius-lg); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* The service cards stop being two-up here, the same floor the test grid uses.
   Below 300px a two-up card is 99px wide and "Corporate Health Plans" becomes
   seven lines. This block has to sit AFTER the 640px one above: both rules are
   an id plus a class, so specificity ties and source order decides. */
@media (max-width: 300px) {
  #services .grid--3 { grid-template-columns: minmax(0, 1fr); }
  #services .card--svc { padding: 22px 20px 20px; }
  #services .card__art { width: 64px; height: 64px; margin-bottom: 16px; }
  #services .card--svc h3 { font-size: 18px; }
  #services .card--svc p { font-size: 14.5px; }
  #services .card__link { font-size: 14.5px; }
}

/* ---------------------------------------------------------
   Floating contact buttons — WhatsApp and call, bottom right.
   Held at z-index 55, under the header's 60, so the mobile menu (which
   drops out of the header) covers them instead of fighting them for the
   same corner. No JavaScript needed for that.
   --------------------------------------------------------- */
.floatbar {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floatbar__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--white);
  box-shadow: 0 8px 22px rgba(11, 16, 48, 0.25);
  transition: transform 0.2s ease;
}
.floatbar__btn svg { width: 28px; height: 28px; }
.floatbar__btn:hover,
.floatbar__btn:focus-visible { transform: scale(1.08); }

/* WhatsApp green, darkened from the brand #25d366: a white glyph on the
   official green is only 2:1, under the 3:1 a UI icon needs to stay legible.
   This still reads unmistakably as WhatsApp. */
.floatbar__btn--wa { background: #1faa53; }
.floatbar__btn--call { background: var(--accent); }

/* The blink — a copy of the button expanding and fading out behind it.
   z-index -1 keeps it behind the parent's own background, so it is invisible
   at rest and only shows as it grows past the edge. .floatbar carries the
   stacking context, so the negative index cannot escape the component. */
.floatbar__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: inherit;
  animation: floatPulse 2s ease-out infinite;
}
/* Offset so the two do not beat in lockstep. */
.floatbar__btn--call::before { animation-delay: 1s; }

@keyframes floatPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .floatbar__btn { transition: none; }
  .floatbar__btn::before { animation: none; opacity: 0; }
}

@media (max-width: 640px) {
  .floatbar { right: 14px; bottom: 14px; gap: 10px; }
  .floatbar__btn { width: 50px; height: 50px; }
  .floatbar__btn svg { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------
   Camp popup — one-off announcement dialog.
   --------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 20px;
}
/* The UA sheet's [hidden] rule ties on specificity with .modal above and
   loses on source order, so the dialog would show. This restores it. */
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 48, 0.55);
}

.modal__box {
  position: relative;
  width: min(430px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px 26px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--tint) 0%, var(--white) 46%);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: modalIn 0.28s ease-out both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
.modal__close:hover { background: var(--tint-deep); color: var(--ink); }
.modal__close svg { width: 19px; height: 19px; }

.modal__photo {
  width: 112px;
  height: 112px;
  margin: 2px auto 14px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 2px rgba(71, 83, 191, 0.25), 0 10px 24px rgba(71, 83, 191, 0.18);
}
.modal__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.modal__flag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: rgba(71, 83, 191, 0.12);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.modal__box h2 {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 30px;
  letter-spacing: -0.03em;
}
.modal__lead {
  margin: 0 0 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
/* Same reason as the camp section: never break inside "check-up". */
.modal__lead span { white-space: nowrap; }

.modal__facts {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--tint-deep);
  text-align: left;
}
.modal__facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; }
.modal__facts svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }
.modal__facts strong { color: var(--ink); }

.modal .btn-row { justify-content: center; }
.modal .btn { flex: 1 1 auto; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .modal__box { animation: none; }
}

@media (max-width: 420px) {
  .modal { padding: 14px; }
  .modal__box { padding: 22px 18px 20px; }
  .modal__photo { width: 92px; height: 92px; margin-bottom: 12px; }
  .modal__box h2 { font-size: 26px; }
  .modal .btn { flex: 1 1 100%; }
}
/* Short screens (landscape phones): drop the photo rather than force a
   scroll inside the dialog for what is a five-line message. */
@media (max-height: 560px) {
  .modal__photo { display: none; }
  .modal__box { padding-top: 22px; }
}

/* ---------------------------------------------------------
   Hospital & emergency support — the coordination arm. Same card as the
   services grid, four across, and two-up on a phone rather than the
   full-width single column .grid--4 falls back to.
   --------------------------------------------------------- */
.hospital__note {
  max-width: 68ch;
  margin: 26px auto 0;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
  color: var(--text);
}

/* Image-led variant of the service card: full-bleed picture across the top,
   a coloured badge straddling its lower edge, and the call to action in the
   same colour. Each card sets its own --hue / --hue-soft inline. */
.card--hosp {
  position: relative;
  padding: 0 24px 24px;
  overflow: hidden;
}

.card--hosp .card__photo {
  display: block;
  margin: 0 -24px;
  aspect-ratio: 16 / 11;
  /* The artwork is a cut-out on transparency, so the card supplies the
     backdrop — a wash of the card's own colour fading into the paper. */
  background: linear-gradient(165deg, var(--hue-soft) 0%, #ffffff 92%);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.card--hosp .card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  /* contain, not cover: the current art is a cut-out with its own margins.
     Swap to cover when these become true edge-to-edge photographs. */
  object-fit: contain;
  padding: 10px 14px 14px;
  box-sizing: border-box;
}

/* Pulled up by half its height so it sits across the foot of the picture. */
.card--hosp .card__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: -27px 0 16px;
  border-radius: 17px;
  background: var(--hue);
  color: var(--white);
  box-shadow: 0 8px 18px rgba(11, 16, 48, 0.18);
}
.card--hosp .card__badge svg { width: 27px; height: 27px; }

a.card--hosp h3 { color: var(--ink); font-size: 19px; }
.card--hosp p { color: var(--text); }

a.card--hosp .card__link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--hue);
  font-weight: 600;
}
.card--hosp .card__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--hue-soft);
  color: var(--hue);
  transition: transform 0.2s ease;
}
.card--hosp .card__arrow svg { width: 15px; height: 15px; }
a.card--hosp:hover .card__arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  #hospital .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #hospital .grid--4 { gap: 14px; }
  .card--hosp { padding: 0 16px 18px; }
  .card--hosp .card__photo { margin: 0 -16px; }
  .card--hosp .card__badge {
    width: 44px; height: 44px;
    margin: -22px 0 12px;
    border-radius: 14px;
  }
  .card--hosp .card__badge svg { width: 22px; height: 22px; }
  a.card--hosp h3 { font-size: 16px; margin-bottom: 7px; overflow-wrap: break-word; }
  .card--hosp p { font-size: 13.5px; line-height: 1.45; }
  a.card--hosp .card__link { font-size: 13.5px; gap: 8px; padding-top: 14px; }
  .card--hosp .card__arrow { width: 28px; height: 28px; }
}
@media (max-width: 340px) {
  #hospital .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------
   About page — doctor credentials as tiles rather than a hairline
   label/value list, which read like a spec sheet.
   --------------------------------------------------------- */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
}
.fact-grid li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-sm);
}
.fact__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 13px;
  background: var(--tint);
  color: var(--accent);
}
.fact__ico svg { width: 21px; height: 21px; }
.fact__val {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fact__key { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text); }

/* A tinted panel stepped out behind the portrait, so the photograph reads as
   a layer rather than a flat rectangle. Offsets sit outside the wrapper, so
   it is dropped once the layout stacks and the margins get tight. */
.doctor-photo-wrap { position: relative; }
.doctor-photo-wrap::before {
  content: "";
  position: absolute;
  inset: 22px -16px -16px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--tint-deep) 0%, var(--scan-tint) 100%);
}
.doctor-photo { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .doctor-photo-wrap::before { display: none; }
}
@media (max-width: 560px) {
  .fact-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* Ticked list — the About page's bullets. A background-image tick rather than
   an <svg> per item, so the markup stays a plain <ul>. */
.check-list { display: grid; gap: 11px; margin-top: 20px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.check-list li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--tint) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234753bf' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* Panel heading with its own icon. */
.panel-head { display: flex; align-items: center; gap: 13px; }
.panel-head__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 13px;
  background: var(--tint);
  color: var(--accent);
}
.panel-head__ico svg { width: 21px; height: 21px; }

/* Opening paragraph of a section, so the prose has a way in instead of two
   equal blocks of grey text. */
.lead {
  font-size: 17px;
  line-height: 1.62;
  color: #445061;
}
@media (max-width: 640px) {
  .lead { font-size: 15.8px; }
  .panel-head__ico { width: 38px; height: 38px; }
}

/* Address and phone on the contact page's "Finding us" panel. */
.find-list {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
}
.find-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
}
.find-list svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}
.find-list strong { color: var(--ink); font-size: 15.5px; }
.find-list a { color: var(--accent); }

/* The map itself. Centred on the locality rather than the building: the
   street address does not geocode, so pretending to a door-level pin would
   be worse than showing the area and letting the directions link resolve it. */
.map-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-top: 18px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--tint-deep);
}

@media (max-width: 900px) {
  .find-list a { display: inline-block; padding-block: 9px; }
}

/* Build credit, sitting under the copyright line in the footer bar. */
.footer__credit { color: rgba(255, 255, 255, 0.42); }
.footer__br { display: none; }
@media (min-width: 641px) {
  /* On one line beside the copyright, separated rather than run together. */
  .footer__credit::before { content: " · "; }
}
@media (max-width: 640px) {
  .footer__br { display: block; }
  .footer__credit { display: inline-block; margin-top: 4px; }
}

/* Policy page — a single readable column rather than the full-width grid. */
.container--narrow { max-width: 760px; }

.policy-meta {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--text);
}
.container--narrow h2 {
  margin: 38px 0 12px;
  font-size: 24px;
}
.container--narrow h2:first-of-type { margin-top: 30px; }
.container--narrow p { margin-bottom: 14px; }

.policy-note {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--tint);
  border-left: 3px solid var(--accent);
  font-size: 14.5px;
}

/* The build credit is a link now. */
a.footer__credit { color: rgba(255, 255, 255, 0.42); }
a.footer__credit:hover { color: var(--white); }

@media (max-width: 640px) {
  .container--narrow h2 { font-size: 21px; margin-top: 30px; }
}
@media (max-width: 900px) {
  a.footer__credit { display: inline-block; padding-block: 9px; }
}

/* Phone numbers inside the policy prose are inline links, so on a touch
   screen they need padding to reach the 44px minimum. */
@media (max-width: 900px) {
  .container--narrow a[href^="tel:"] { display: inline-block; padding-block: 12px; }
}