/* ==========================================================================
   assets/css/main.css — Durva Hospital, single stylesheet.

   CONTENTS
     1. Design tokens + reset      (was root.css)
     2. Site header / nav          (was header.css)
     3. Hero                       (was hero.css)
     4. Community care             (was community-care.css)
     5. About section

   NOTE: blocks 2–5 are listed in the order they were merged, not in DOM
   order. On the page, About sits between the Hero and Community Care.

   Order matters: tokens first, then components in DOM order. Each block keeps
   its own media queries at the end of that block rather than pooling them in
   one place — that way a component's breakpoints stay next to the rules they
   override.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS + RESET
   ========================================================================== */

:root {
  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  --font-serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans:
    "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
    sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-nav: 0.8125rem;
  --fs-btn: 0.8125rem;
  --fs-menu: 0.8125rem;
  --fs-lead: clamp(0.875rem, 0.92vw, 0.9375rem);
  --fs-hero: clamp(1.75rem, 3.5vw, 3.125rem);
  --fs-display: clamp(2.25rem, 6.2vw, 5.5rem);
  --fs-card: clamp(0.75rem, 0.88vw, 0.8125rem);
  --fs-card-sm: clamp(0.6875rem, 0.8vw, 0.75rem);

  --lh-hero: 1.12;
  --lh-body: 1.62;
  --ls-hero: -0.015em;
  --ls-nav: 0.005em;

  /* ==========================================================================
     COLOR — dark, cinematic. One warm off-white for solid surfaces.
     ========================================================================== */
  --c-bg: #0a0c0f;
  --c-fg: #ffffff;
  --c-fg-soft: rgba(255, 255, 255, 0.72);
  --c-fg-mute: rgba(255, 255, 255, 0.54);
  --c-light: #f4f2ee;
  --c-dark: #13161a;
  --c-accent: #7fd1c1;
  /* small accent mark (eyebrow squares, link hovers) — logo teal, deep enough
     to read at 7px on a light ground where --c-accent would wash out */
  --c-mark: #1a7566;
  /* accent navy for hover states on light sections — the palette had no navy
     after the rebuild; --c-paper-ink is neutral near-black, not navy */
  --c-navy: #16283c;

  /* glass */
  --c-glass: rgba(16, 19, 24, 0.42);
  --c-glass-strong: rgba(14, 17, 21, 0.72);
  --c-glass-line: rgba(255, 255, 255, 0.14);
  --c-glass-hi: rgba(255, 255, 255, 0.1);
  --blur-glass: blur(22px) saturate(160%);

  --sh-glass:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -24px rgba(0, 0, 0, 0.8);
  --sh-panel:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 26px 60px -26px rgba(0, 0, 0, 0.85);
  --sh-light: 0 10px 26px -14px rgba(0, 0, 0, 0.6);

  /* light sections (below the hero) */
  --c-surface: #ffffff;
  --c-paper: #f7f6f4;
  /* ---------- testimonials palette ----------
     Four muted tints as bare rgb triplets, so the section can mix them at
     any alpha without a second set of tokens. They drive both the mesh
     behind the section and the per-card identities. Sober by construction:
     every one of them is desaturated well below the logo teal. */
  --tint-sand: 186, 148, 102;
  --tint-sage: 56, 130, 116;
  --tint-navy: 70, 98, 148;
  --tint-clay: 168, 116, 100;
  /* a muted blue-violet — the only cool-but-not-teal tone in the set, added
     for the appointment ground so it does not repeat the sand/sage pairing
     used everywhere else */
  --tint-iris: 108, 112, 168;
  --c-teal-deep: #0f5a4c; /* headline accent — deeper than --c-mark */
  --c-paper-rgb: 247, 246, 244; /* same colour, for rgba() — keep in sync */
  --c-paper-ink: #14161a;
  --c-paper-ink-soft: #6b7078;
  --c-paper-line: rgba(20, 22, 26, 0.1);

  /* dark card floating on a light section */
  --c-card: rgba(26, 27, 31, 0.74);
  --c-card-line: rgba(255, 255, 255, 0.12);
  --c-card-hi: rgba(255, 255, 255, 0.07);
  --c-card-fg: rgba(255, 255, 255, 0.88);
  --c-card-mute: rgba(255, 255, 255, 0.52);
  --c-bubble: rgba(246, 245, 243, 0.92);
  --sh-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 40px 80px -40px rgba(12, 14, 18, 0.7);

  /* hero overlay + grade */
  --c-veil: 8, 10, 13;
  --video-filter: brightness(0.76) contrast(1.07) saturate(0.92);

  /* ==========================================================================
     SPACE / SHAPE / MOTION
     ========================================================================== */
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --header-inset: clamp(0.75rem, 1.5vw, 1.25rem);
  --logo-h: clamp(1.875rem, 2.4vw, 2.25rem);
  --maxw-hero: 60rem;
  --maxw-section: 78rem; /* standard content width for light sections */
  --maxw-title: 34ch;
  --maxw-lead: 34rem;
  --maxw-menu: 16.75rem;

  --r-pill: 999px;
  --r-panel: 18px;
  --r-item: 11px;

  --dur-fast: 170ms;
  --dur-base: 300ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-menu: cubic-bezier(0.22, 0.9, 0.28, 1);

  --z-hero-media: 0;
  --z-hero-content: 1;
  --z-header: 60;
  --z-menu: 70;
  /* the floating contact button: over the page, UNDER the header, the mobile
     sheet and the gallery lightbox (200). At its old 990 it floated on top
     of an open lightbox. */
  --z-fab: 55;

  /* breakpoints (reference values) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-nav: 1259px; /* the width below which the nav becomes a sheet */
}

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

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

body,
h1,
h2,
p,
figure,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--c-fg);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

:focus-visible {
  outline: 2px solid var(--c-fg);
  outline-offset: 3px;
}

::selection {
  color: var(--c-dark);
  background-color: var(--c-light);
}

/* ==========================================================================
   Entrance
   ========================================================================== */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.u-rise {
  animation: rise 900ms var(--ease-out) both;
}

.u-d1 {
  animation-delay: 120ms;
}
.u-d2 {
  animation-delay: 240ms;
}
.u-d3 {
  animation-delay: 380ms;
}
.u-d4 {
  animation-delay: 500ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   2. SITE HEADER / NAV
   ========================================================================== */

/*  `fixed`, and always fixed.

    It used to be `absolute` so the bar would scroll away with the hero, the
    objection to `fixed` being that it then rides over every section below.
    The scroll-reveal makes that objection moot: below the top zone the bar is
    translated off-screen unless the reader is scrolling UP, so it is never
    sitting over content uninvited.

    Always-fixed is also what keeps the reveal seamless. `absolute` and
    `fixed` paint at exactly the same place while the page is at scrollTop 0
    and diverge by the scroll offset everywhere else, so switching between
    them mid-scroll would jump the bar by however far the page had travelled.
    One position value, and only `transform` and colour ever change. */
.site-header {
  position: fixed;
  top: var(--header-inset);
  right: var(--header-inset);
  left: var(--header-inset);
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  /* the bar is three floating islands — clicks pass through the gaps */
  pointer-events: none;
  transition:
    transform var(--dur-base) var(--ease-out),
    top var(--dur-base) var(--ease-out),
    padding var(--dur-base) var(--ease-out);
}

.site-header > * {
  pointer-events: auto;
}

/* ==========================================================================
   Scroll reveal
   --------------------------------------------------------------------------
   Three states, driven by two classes from main.js:

     (none)                top zone — the hero's own bar, exactly as before
     .is-hidden            scrolling down — translated out of the way
     .is-stuck             scrolling up — the white bar

   .is-stuck is NOT removed when the reader turns back downwards. The bar
   leaves in the same skin it arrived in; the skin is only dropped once the
   page is back in the top zone, where the hero bar belongs.
   ========================================================================== */
.site-header.is-hidden {
  /* past its own height plus the inset, so the shadow clears too */
  transform: translateY(calc(-100% - var(--header-inset) - 1.5rem));
}

/* the sheet is `position: fixed` INSIDE this element, and a transformed
   ancestor becomes the containing block for its fixed descendants — the
   full-screen menu would ride up with the bar. It cannot hide while open. */
.site-header.is-open {
  transform: none;
}

/*  THE WHITE BAR IS A PSEUDO-ELEMENT, not a background on the header.

    The header is inset from three edges and the surface has to be full bleed,
    so painting it on the header itself would mean the surface stopping short
    of the screen edges. A pseudo-element bled back out past the insets sits
    edge to edge, and the whole skin change is one opacity crossfade. */
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--header-inset) * -1);
  right: calc(var(--header-inset) * -1);
  bottom: calc(var(--header-inset) * -1);
  left: calc(var(--header-inset) * -1);
  opacity: 0;
  border-bottom: 1px solid rgba(18, 24, 32, 0.07);
  background-color: rgba(252, 253, 253, 0.88);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  backdrop-filter: blur(26px) saturate(185%);
  box-shadow: 0 14px 38px -26px rgba(12, 16, 22, 0.55);
  transition: opacity var(--dur-base) var(--ease-out);
}

/*  HEIGHT. The hero bar is a floating island: it is inset from the top of the
    screen and its two pills carry their own padding, which is right when it is
    hovering over a photograph and wrong when it is a bar clamped to the top
    edge — that reading came out at 92px tall, most of it air.

    Docking it costs nothing to animate, because the bar is off-screen at the
    moment the class flips. The inset goes to zero, the header takes over the
    vertical padding from the pills, and the pills give theirs up. ~64px. */
.site-header.is-stuck {
  top: 0;
  padding-block: clamp(0.5rem, 0.75vw, 0.6875rem);
}

.site-header.is-stuck::before {
  opacity: 1;
  top: 0;
  bottom: 0;
}

/* ---------- the light skin ----------
   The pills are glass built for a dark ground. On white they have to give up
   their fill, their line, their blur AND their padding, or the bar reads as
   two panels of frosted grey sitting on a white one. */
.site-header.is-stuck .actions {
  padding: 0;
  border-color: transparent;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

@media (min-width: 1260px) {
  .site-header.is-stuck .nav__list {
    padding: 0;
    border-color: transparent;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  /*  TYPE. 13px is a size for a translucent pill floating over a photograph,
      where the label is half graphic. On an opaque white bar it is just small.

      The room to grow it is bought, not found: this header measured 17px of
      horizontal slack at 1280 and none at all at 1025. Dropping the pill's
      own padding and 0.15rem a side off each of six links frees ~50px, which
      is what pays for the larger glyphs — see the 1141px rule below. */
  .site-header.is-stuck .nav__link {
    position: relative;
    font-weight: var(--fw-medium);
  }

  /*  The active item was a grey capsule — the one shape on the bar that had
      to be a solid, and it read as a smudge. A rule under the word says the
      same thing in the site's own accent, and it is the same object the
      hover state animates in, so hover and active are one idea rather than
      two unrelated treatments. */
  .site-header.is-stuck .nav__link::after {
    content: "";
    position: absolute;
    right: var(--nav-pad, 0.9rem);
    bottom: 0.125rem;
    left: var(--nav-pad, 0.9rem);
    height: 2px;
    border-radius: 2px;
    background-color: var(--c-mark);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
  }

  .site-header.is-stuck .nav__link:hover::after,
  .site-header.is-stuck .nav__item:focus-within > .nav__link::after,
  .site-header.is-stuck .nav__link.is-active::after {
    transform: scaleX(1);
  }

  .site-header.is-stuck .nav__link {
    color: var(--c-paper-ink-soft);
  }

  /* no capsule behind any of them now — the rule is the whole signal */
  .site-header.is-stuck .nav__link:hover,
  .site-header.is-stuck .nav__item:focus-within > .nav__link,
  .site-header.is-stuck .nav__link.is-active {
    color: var(--c-paper-ink);
    background-color: transparent;
  }

  .site-header.is-stuck .nav__caret {
    opacity: 0.5;
  }
}



@media (min-width: 1300px) {
  .site-header.is-stuck .nav__link {
    font-size: 0.875rem;
  }
}

/* the CTA was near-white on a dark bar; on a white one it inverts, or it
   disappears into the surface it is meant to sit on */
/* The button is near-black in both skins, so the light bar only has to trade
   the shadow: a black glow reads as dirt on white, where on the hero it is
   what lifts the button off the video. */
.site-header.is-stuck .btn--book {
  font-size: 0.875rem;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 26px -18px rgba(12, 16, 22, 0.6);
}

.site-header.is-stuck .nav-toggle {
  color: var(--c-paper-ink);
}

.site-header.is-stuck .nav-toggle:hover {
  background-color: rgba(18, 24, 32, 0.055);
}

/* The dropdown panels stay dark on purpose. They are floating panels rather
   than part of the bar, they are the same panels the whole site uses, and a
   dark one under a white bar reads as deliberate — a second white surface
   over the first would not. */

/* ---------- brand (outside the pill, per reference) ---------- */
.brand {
  justify-self: start;
  display: flex;
  align-items: center;
  padding-left: clamp(0.25rem, 1.2vw, 1rem);
  line-height: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.brand:hover {
  opacity: 0.8;
}

.brand__img {
  height: var(--logo-h);
  width: auto;
  max-width: none;
}

/* ==========================================================================
   Shared glass capsule
   ========================================================================== */
.capsule {
  display: flex;
  align-items: center;
  padding: 0.3rem;
  border: 1px solid var(--c-glass-line);
  border-radius: var(--r-pill);
  background-color: var(--c-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  box-shadow: var(--sh-glass);
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .capsule,
  .menu__panel {
    background-color: var(--c-glass-strong);
  }
}

/* ==========================================================================
   Centre nav
   ========================================================================== */
.nav {
  justify-self: center;
}

/* the in-sheet close button and CTAs exist only when the nav is a sheet */
.nav__close,
.nav__foot {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* The glass pill, applied only where the nav is a horizontal bar.
   It used to come from the shared .capsule class in the markup, which meant
   the mobile sheet had to undo six properties one by one — and the one that
   got missed, border-radius, clipped the scrolling list into an oval because
   .nav__list also has overflow-y:auto. Styling that only exists at the width
   it is wanted cannot be forgotten at any other width.
   .actions keeps .capsule: that group stays a pill on every screen. */
/* Above this the burger is hidden, so .actions wraps the CTA and nothing
   else — and a pill capsule drawn around a 14px-radius rectangle shows as a
   mismatched ring down both sides. Below it the capsule still holds two
   controls and still earns its keep. */
@media (min-width: 1260px) {
  .actions {
    padding: 0;
    border-color: transparent;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .nav__list {
    padding: 0.3rem;
    border: 1px solid var(--c-glass-line);
    border-radius: var(--r-pill);
    background-color: var(--c-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    backdrop-filter: var(--blur-glass);
    box-shadow: var(--sh-glass);
  }
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  padding: 0.55rem var(--nav-pad, 0.9rem);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  white-space: nowrap;
  color: var(--c-fg-soft);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.nav__link:hover,
.nav__item:focus-within > .nav__link {
  color: var(--c-fg);
  background-color: var(--c-glass-hi);
}

.nav__link.is-active {
  color: var(--c-fg);
  background-color: var(--c-glass-hi);
}

.nav__caret {
  width: 0.5rem;
  height: 0.5rem;
  opacity: 0.7;
  transition: transform var(--dur-base) var(--ease-menu);
}

/* ==========================================================================
   Submenu
   ========================================================================== */
.menu {
  position: absolute;
  top: 100%;
  left: 50%;
  width: var(--maxw-menu);
  padding-top: 0.7rem;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out);
}

.menu__panel {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  padding: 0.375rem;
  border: 1px solid var(--c-glass-line);
  border-radius: var(--r-panel);
  background-color: var(--c-glass-strong);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  box-shadow: var(--sh-panel);
  transform: translateY(-6px);
  transition: transform var(--dur-base) var(--ease-menu);
}

.menu__link {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-item);
  font-size: var(--fs-menu);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--c-fg-soft);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.menu__link:hover,
.menu__link:focus-visible {
  color: var(--c-fg);
  background-color: var(--c-glass-hi);
}

/* Desktop dropdowns follow one consistent, easy-to-scan navigation pattern. */
@media (min-width: 1260px) {
  .menu__panel {
    gap: 0.2rem;
    padding: 0.5rem;
  }

  .menu__panel > li {
    margin: 0;
    list-style: none;
  }

  .menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.65rem;
    padding: 0.62rem 0.75rem;
  }

  .menu__link::after {
    content: "\2192";
    flex: 0 0 auto;
    color: var(--c-accent);
    opacity: 0;
    transform: translateX(-0.25rem);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }

  .menu__link:hover::after,
  .menu__link:focus-visible::after,
  .menu__link.is-active::after {
    opacity: 1;
    transform: translateX(0);
  }

  .menu__link.is-active {
    color: var(--c-fg);
    background-color: var(--c-glass-hi);
    box-shadow: inset 0.16rem 0 0 var(--c-accent);
  }
}

.menu__link--cat {
  color: #7fd1c1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
  padding-bottom: 0.65rem;
}

.menu__link--cat:hover {
  color: #ffffff;
}

.nav__item:hover > .menu,
.nav__item:focus-within > .menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav__item:hover > .menu .menu__panel,
.nav__item:focus-within > .menu .menu__panel {
  transform: translateY(0);
}

.nav__item:hover > .nav__link .nav__caret,
.nav__item:focus-within > .nav__link .nav__caret {
  transform: rotate(180deg);
}

/* ==========================================================================
   Actions
   ========================================================================== */
.actions {
  justify-self: end;
  gap: 0.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}


/* ==========================================================================
   Book Appointment
   --------------------------------------------------------------------------
   Two blocks inside one rounded rectangle: a filled tile and a label. It is
   not a pill — the tile is a rounded square, and a square set inside a pill
   leaves two different curves fighting each other down the left edge.

   The tile carries the site's accent, which makes it the one saturated
   object in the header and lets the button itself stay near-black on both
   the hero and the white scrolled bar. One button, one appearance, rather
   than a light version and a dark version that have to be kept in step.
   ========================================================================== */
.btn--book {
  gap: 0.625rem;
  padding: 0.3125rem 1.125rem 0.3125rem 0.3125rem;
  border-radius: 14px;
  color: #ffffff;
  background-color: #171b22;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.075),
    0 16px 32px -20px rgba(0, 0, 0, 0.85);
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn__tile {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  /* 10 against the button's 14, both minus the 5px inset — concentric, so
     the tile sits in the corner rather than beside it */
  border-radius: 10px;
  background-color: var(--c-accent);
  color: #0a1f1a;
  transition: background-color var(--dur-base) var(--ease-out);
}

.btn__wave {
  width: 1.25rem;
  height: 1.25rem;
}

/*  THE WAVE. Three columns, each delayed a step behind the last, so the pulse
    travels along the arrow instead of flashing the whole glyph at once.

    The dip is written INTO the keyframes and the resting state is full
    opacity, not the other way round, so an arrow that is not animating is a
    clean opaque arrow rather than a permanently half-faded one. The reduced
    motion rule below then only has to cancel the animation. */
@keyframes bk-wave {
  0%, 55%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  18% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.btn__wave-col {
  opacity: 1;
  /* SVG children scale about the user-space origin by default, which throws
     a circle across the tile instead of growing it in place */
  transform-box: fill-box;
  transform-origin: center;
  animation: bk-wave 2s var(--ease-out) infinite;
  animation-delay: calc(var(--w, 0) * 0.13s);
}

.btn--book:hover {
  background-color: #0f1319;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 20px 38px -20px rgba(0, 0, 0, 0.9);
}

/* the wave runs a little harder under the pointer — the same motion, not a
   different one, so hover reads as encouragement rather than as a new trick */
.btn--book:hover .btn__wave-col,
.btn--book:focus-visible .btn__wave-col {
  animation-duration: 1.15s;
}

.btn--book:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
}

/* already on the page it points at */
.btn--book[aria-current] .btn__tile {
  background-color: #ffffff;
}

/*  The global reset at the top of this file does not switch animations off —
    it sets them to 0.01ms and one iteration, which relies on fill-mode
    reverting each element to its declared style once that iteration ends.
    That does land on opacity 1 here, but it is a subtlety to be depending on
    for whether a button looks broken. Cancel the animation outright: the
    arrow is then simply drawn, which is what it should be for someone who
    has asked the system for less movement. */
@media (prefers-reduced-motion: reduce) {
  .btn__wave-col {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/*  SEVEN items, four of them carrying a caret. Measured slack across the row
    — viewport minus brand, nav, actions and the two grid gaps:

        1440  +175      1280   +31
        1366  +107      1180   -30      1025  -134

    so the bar stops being a bar somewhere around 1230. It collapses to the
    sheet at 1259 instead (see --bp-nav), and this trim buys the band just
    above that some air: 0.2rem a side off seven links is ~45px, which turns
    a slack of ~19 at 1260 into ~64. */
@media (max-width: 1340px) {
  .nav__link {
    --nav-pad: 0.7rem;
  }
}

/* ---------- hamburger ---------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pill);
  color: var(--c-fg);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 17px;
  height: 1.5px;
  border-radius: var(--r-pill);
  background-color: currentColor;
  transition:
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) linear;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -5px;
}
.nav-toggle__bars::after {
  top: 5px;
}

.site-header.is-open .nav-toggle__bars {
  background-color: transparent;
}

.site-header.is-open .nav-toggle__bars::before {
  transform: translateY(5px) rotate(45deg);
}

.site-header.is-open .nav-toggle__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* ==========================================================================
   Tablet + mobile — up to 1259px
   --------------------------------------------------------------------------
   This was 1024 when the bar held six items and a phone number. It holds
   seven now, and seven does not fit under ~1230 — see the slack table above.
   Keep this in step with the matchMedia query in main.js: the CSS decides
   what the nav LOOKS like and the JS decides whether tapping a parent opens
   an accordion or follows the link, and they have to agree.
   ========================================================================== */
@media (max-width: 1259px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav-toggle {
    display: inline-flex;
  }


  /* ---------- the sheet ----------
     WHY justify-self MATTERS HERE. The desktop rule is `.nav { justify-self:
     center }` to sit the bar in the middle of the header grid. Chrome honours
     self-alignment on an absolutely-positioned child of a grid container, and
     the effect is that the box switches to SHRINK-TO-FIT instead of filling
     its inset box — so `position: fixed; inset: 0` was resolving to a 261px
     column centred in a 420px screen, with the page showing either side.
     Stretching it back is what makes the sheet full width. */
  .nav {
    position: fixed;
    inset: 0;
    justify-self: stretch;
    align-self: stretch;
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    /* no inline padding: the rows carry it themselves, so dividers and any
       row highlight run the full width of the sheet instead of floating in
       an inset column */
    padding:
      calc(var(--header-inset) + 4.25rem)
      0
      calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
    background-color: rgba(9, 12, 17, 0.985);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-base) var(--ease-out),
      visibility var(--dur-base) var(--ease-out);
  }

  .site-header.is-open .nav {
    opacity: 1;
    visibility: visible;
  }

  /* the list takes the free height and scrolls; the CTAs below it never move */
  .nav__list {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* no un-styling needed here any more — the bar's glass pill is applied
       in a min-width query, so it never reaches this width to be undone */
  }

  /* left-aligned with a rule under each row: a list you read down, rather
     than centred text that gives the eye no edge to follow */
  .nav__item {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav__link {
    justify-content: space-between;
    width: 100%;
    padding: 1.0625rem var(--gutter);
    border-radius: 0;
    font-size: 1.0625rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.015em;
    color: var(--c-fg);
  }

  /* The desktop bar marks hover, focus-within and the current page with a
     rounded glass pill. In a full-width sheet that pill reads as a stray
     rounded box — and because opening a group focuses its link, it sat there
     permanently. Colour carries all three states here instead. */
  .nav__link:hover,
  .nav__link.is-active,
  .nav__item:focus-within > .nav__link {
    background: none;
    border-radius: 0;
  }

  .nav__link.is-active {
    color: var(--c-accent);
  }

  .nav__caret {
    width: 0.75rem;
    height: 0.5rem;
    color: var(--c-fg-mute);
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }

  /* ---------- submenu accordion ---------- */
  .menu {
    position: static;
    width: auto;
    padding-top: 0;
    transform: none;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: grid-template-rows var(--dur-base) var(--ease-out);
  }

  .menu__panel {
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    transform: none;
  }

  /* children hang off a rule, so an open group reads as one block instead of
     as more top-level items */
  /* the rule belongs to the panel, not each link — on the link it would sit
     hard against the screen edge once the rows went full-bleed */
  .menu__panel {
    margin-left: var(--gutter);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }

  .menu__link {
    padding: 0.6875rem var(--gutter) 0.6875rem 1rem;
    border-radius: 0;
    text-align: left;
    font-size: 0.9375rem;
    color: var(--c-fg-soft);
  }

  .menu__link:hover,
  .menu__link.is-active {
    background: none;
  }

  .menu__link.is-active {
    color: var(--c-accent);
  }

  /* hover must not open it on touch — only the class does */
  .nav__item:hover > .menu,
  .nav__item:focus-within > .menu {
    grid-template-rows: 0fr;
  }

  .nav__item.is-open > .menu {
    grid-template-rows: 1fr;
  }

  .nav__item.is-open > .nav__link {
    color: var(--c-accent);
  }

  .nav__item.is-open > .nav__link .nav__caret {
    transform: rotate(180deg);
    color: var(--c-accent);
  }

  /* ---------- close ---------- */
  .nav__close {
    position: absolute;
    top: var(--header-inset);
    right: var(--gutter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--c-glass-line);
    border-radius: 50%;
    background-color: var(--c-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    backdrop-filter: var(--blur-glass);
    color: var(--c-fg);
    cursor: pointer;
    transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
  }

  .nav__close svg {
    width: 1.0625rem;
    height: 1.0625rem;
  }

  .nav__close:hover {
    background-color: rgba(255, 255, 255, 0.14);
  }

  .nav__close:active {
    transform: scale(0.94);
  }

  .nav__close:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
  }

  /* ---------- sheet footer ---------- */
  .nav__foot {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    padding: 1.25rem var(--gutter) 0;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--c-glass-line);
    border-radius: var(--r-pill);
    background-color: var(--c-glass);
    font-size: 0.9375rem;
    font-weight: var(--fw-semibold);
    color: var(--c-fg);
    text-decoration: none;
  }

  .nav__call svg {
    width: 0.9375rem;
    height: 0.9375rem;
    flex: none;
    color: var(--c-accent);
  }

  .nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9375rem 1.25rem;
    border-radius: var(--r-pill);
    background-color: #f5f5f7;
    font-size: 0.9375rem;
    font-weight: var(--fw-semibold);
    color: #0a0b0e;
    text-decoration: none;
  }
}

/* the label goes on the smallest screens and the icon becomes the button —
   the burger is right beside it and two full-width controls will not fit */
/* the label goes on the smallest screens and the tile becomes the button —
   the burger is right beside it and two full-width controls will not fit */
@media (max-width: 480px) {
  .btn--book {
    gap: 0;
    padding: 0.25rem;
    border-radius: 12px;
  }

  .btn__tile {
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
  }

  .btn__text {
    display: none;
  }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 100svh;
  padding: calc(var(--header-inset) + 6rem) var(--gutter) clamp(2.25rem, 5.2vh, 3.5rem);
  text-align: center;
  overflow: hidden;
}

/* ---------- media ---------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-media);
  overflow: hidden;
  pointer-events: none;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  font-size: 0;
  color: transparent;
  filter: var(--video-filter);
  animation: settle 1600ms var(--ease-out) both;
}

/* Original cinematic dark overlay */
.hero__overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to top,
      rgba(var(--c-veil), 0.92) 0%,
      rgba(var(--c-veil), 0.62) 26%,
      rgba(var(--c-veil), 0.18) 54%,
      rgba(var(--c-veil), 0.42) 100%
    ),
    radial-gradient(
      140% 100% at 50% 50%,
      transparent 38%,
      rgba(var(--c-veil), 0.55) 100%
    );
}

/* ---------- content ---------- */
.hero__inner {
  position: relative;
  z-index: var(--z-hero-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 58rem;
}

/* Soft spotlight behind copy for enhanced contrast over video */
.hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 132%;
  height: 190%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    58% 50% at 50% 50%,
    rgba(var(--c-veil), 0.55) 0%,
    rgba(var(--c-veil), 0.28) 45%,
    transparent 72%
  );
  pointer-events: none;
  animation: fade-in 1400ms var(--ease-out) 200ms both;
}

/* ---------- title (matching reference geometric font & styling) ---------- */
.hero__title {
  max-width: 28ch;
  margin: 0;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-wrap: balance;
}

.hero__tm {
  font-size: 0.44em;
  vertical-align: 0.72em;
  font-weight: 600;
  margin-left: 0.08em;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Each line is its own mask */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.hero__line-in {
  display: block;
  animation: line-rise 1100ms var(--ease-out) both;
}

.hero__line:nth-child(1) .hero__line-in {
  animation-delay: 180ms;
}
.hero__line:nth-child(2) .hero__line-in {
  animation-delay: 320ms;
}

/* ---------- action buttons (matching reference) ---------- */
.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  animation: rise 900ms var(--ease-out) 400ms both;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.65rem;
  border-radius: 12px;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
  cursor: pointer;
}

.hero-btn:hover {
  transform: translateY(-2px);
}

.hero-btn:active {
  transform: translateY(0);
}

.hero-btn--primary {
  background-color: #0b0f14;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.hero-btn--primary:hover {
  background-color: #1a222c;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

.hero-btn--secondary {
  background-color: #eceef1;
  color: #0b0f14;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.hero-btn--secondary:hover {
  background-color: #ffffff;
}

/* ---------- hero keyframes ---------- */
@keyframes line-rise {
  from {
    transform: translateY(115%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes rule-draw {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes gem-in {
  from {
    transform: rotate(45deg) scale(0);
    opacity: 0;
  }
  to {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }
}

@keyframes swash {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   Tablet — up to 1024px
   ========================================================================== */
/* Instagram Reels: portrait media rail below the Community Care CTA. */
.ig-feed {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.25rem, 8vw, 7.5rem) 0 clamp(4.75rem, 8vw, 7.75rem);
  color: var(--cc-ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(127, 209, 193, 0.2), transparent 28rem),
    radial-gradient(circle at 94% 85%, rgba(80, 111, 151, 0.12), transparent 30rem),
    linear-gradient(180deg, #f8fbfa 0%, var(--c-paper) 100%);
  border-top: 1px solid rgba(12, 28, 51, 0.07);
  font-family: var(--font-sans);
}

.ig-feed::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(2rem, 6vw, 5rem);
  right: clamp(-7rem, -4vw, -2rem);
  width: clamp(12rem, 24vw, 24rem);
  aspect-ratio: 1;
  border: 1px solid rgba(15, 90, 76, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 clamp(2rem, 4vw, 4rem) rgba(15, 90, 76, 0.025),
    0 0 0 clamp(4rem, 8vw, 8rem) rgba(15, 90, 76, 0.018);
  pointer-events: none;
}

.ig-feed__inner {
  width: min(100%, 96rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ig-feed__header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.68fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.ig-feed__heading,
.ig-feed__intro {
  min-width: 0;
}

.ig-feed__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 clamp(1rem, 1.8vw, 1.4rem);
  color: var(--c-teal-deep);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.035em;
}

.ig-feed__brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #0f5a4c, #254663);
  box-shadow: 0 8px 20px -12px rgba(12, 28, 51, 0.72);
}

.ig-feed__brand-mark svg {
  width: 1.08rem;
  height: 1.08rem;
}

.ig-feed__title {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(2.35rem, 5.4vw, 5.25rem);
  font-weight: var(--fw-semibold);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.ig-feed__title em {
  color: var(--c-teal-deep);
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
}

.ig-feed__intro {
  padding-bottom: 0.35rem;
}

.ig-feed__intro p {
  max-width: 42ch;
  margin: 0;
  color: var(--cc-ink-soft);
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  text-wrap: pretty;
}

.ig-feed__follow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  color: var(--cc-ink);
  font-size: 0.84rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}

.ig-feed__follow svg {
  width: 1rem;
  height: 1rem;
}

.ig-feed__follow:hover {
  gap: 0.9rem;
  color: var(--c-teal-deep);
}

.ig-feed__follow:focus-visible,
.ig-reel__link:focus-visible,
.ig-control:focus-visible,
.ig-feed__viewport:focus-visible {
  outline: 3px solid var(--c-mark);
  outline-offset: 4px;
}

.ig-feed__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4.75rem);
  padding-top: 1.2rem;
  border-top: 1px solid rgba(12, 28, 51, 0.12);
}

.ig-feed__status {
  display: flex;
  align-items: baseline;
  gap: 0.22rem;
  margin: 0;
  color: var(--c-paper-ink-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ig-feed__status strong {
  color: var(--cc-ink);
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  font-weight: var(--fw-medium);
  letter-spacing: -0.05em;
}

.ig-feed__status span:not(.u-visually-hidden) {
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
}

.ig-feed__controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.ig-control {
  display: inline-grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  border: 1px solid rgba(12, 28, 51, 0.15);
  border-radius: 50%;
  color: var(--cc-ink);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 24px -18px rgba(12, 28, 51, 0.68);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.ig-control svg {
  width: 1.18rem;
  height: 1.18rem;
}

.ig-control:hover:not(:disabled) {
  color: #fff;
  border-color: var(--cc-ink);
  background: var(--cc-ink);
  transform: translateY(-2px);
}

.ig-control:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}

.ig-control:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}

.ig-control--toggle {
  color: #fff;
  border-color: var(--c-teal-deep);
  background: var(--c-teal-deep);
}

.ig-control__icon {
  display: inline-grid;
  place-items: center;
}

.ig-control__icon--play,
.ig-feed.is-paused .ig-control__icon--pause {
  display: none;
}

.ig-feed.is-paused .ig-control__icon--play {
  display: inline-grid;
}

.ig-feed__viewport {
  width: 100%;
  min-width: 0;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  padding: 0.35rem 0 clamp(1.1rem, 2vw, 1.65rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 90, 76, 0.32) transparent;
  -webkit-overflow-scrolling: touch;
}

.ig-feed__viewport::-webkit-scrollbar {
  height: 5px;
}

.ig-feed__viewport::-webkit-scrollbar-track {
  background: transparent;
}

.ig-feed__viewport::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(15, 90, 76, 0.32);
}

.ig-feed__track {
  display: flex;
  gap: clamp(0.85rem, 1.6vw, 1.35rem);
  width: max-content;
  margin: 0;
  padding: 0.15rem 0 0.45rem;
  list-style: none;
}

.ig-reel {
  flex: 0 0 clamp(15.5rem, 21vw, 19.75rem);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.ig-reel__card {
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(12, 28, 51, 0.11);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px rgba(12, 28, 51, 0.04), 0 24px 48px -30px rgba(12, 28, 51, 0.36);
  transition: border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out);
}

.ig-reel__card:hover,
.ig-reel__card:focus-within {
  border-color: rgba(15, 90, 76, 0.28);
  box-shadow: 0 4px 10px rgba(12, 28, 51, 0.05), 0 32px 64px -32px rgba(12, 28, 51, 0.46);
  transform: translateY(-4px);
}

.ig-reel__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #0d192b;
}

.ig-reel__frame,
.ig-reel__video {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  object-fit: cover;
}

.ig-reel__frame {
  opacity: 0;
  transition: opacity 350ms var(--ease-out);
}

.ig-reel.is-loaded .ig-reel__frame {
  opacity: 1;
}

.ig-reel__placeholder {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.92);
  background: radial-gradient(circle at 68% 24%, rgba(127, 209, 193, 0.28), transparent 30%), radial-gradient(circle at 20% 82%, rgba(73, 110, 151, 0.34), transparent 36%), linear-gradient(155deg, #1b3850 0%, #0c182b 58%, #0a101d 100%);
}

.ig-reel__placeholder::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.ig-reel__placeholder-orb {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ig-reel__placeholder-orb svg {
  width: 1.65rem;
  height: 1.65rem;
}

.ig-reel__placeholder-label {
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ig-reel__placeholder-num {
  position: absolute;
  right: 1.4rem;
  bottom: 1.25rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.ig-reel__meta,
.ig-reel__body {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1rem 1rem 1.05rem;
}

.ig-reel__meta > span {
  display: grid;
  gap: 0.16rem;
}

.ig-reel__meta small,
.ig-reel__date {
  color: var(--c-paper-ink-soft);
  font-size: 0.62rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.ig-reel__meta strong {
  color: var(--cc-ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.ig-reel__caption {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--cc-ink);
  font-size: 0.8rem;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-reel__link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.38rem;
  color: var(--c-teal-deep);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.ig-reel__link svg {
  width: 0.82rem;
  height: 0.82rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.ig-reel__link:hover svg {
  transform: translate(2px, -2px);
}

.ig-feed__noscript {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(12, 28, 51, 0.12);
  border-radius: 12px;
  color: var(--cc-ink-soft);
  background: rgba(255, 255, 255, 0.64);
  font-size: 0.85rem;
}

.ig-feed__noscript a {
  color: var(--c-teal-deep);
  font-weight: var(--fw-bold);
}

/* Hero responsive layout continues below the Instagram component styles. */
@media (max-width: 1024px) {
  .hero {
    padding-top: calc(var(--header-inset) + 5rem);
  }

  :root {
    --maxw-title: 30ch;
  }
}

/* ==========================================================================
   Mobile — up to 768px
   ========================================================================== */
@media (max-width: 768px) {
  .hero {
    justify-content: flex-end;
    padding-bottom: clamp(2.25rem, 6vh, 3.25rem);
  }

  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .hero-btn {
    flex: 1 1 140px;
  }
}

/* ==========================================================================
   4. COMMUNITY CARE
   ========================================================================== */

/* ==========================================================================
   CONTAINMENT — read before editing.

   This section owns its own stacking context and clips its own children, so
   it can never inherit or be overlapped by the hero's fade:

   1. `isolation: isolate`  — new stacking context. No sibling section's
      positioned/blended layer can composite into this one.
   2. `overflow: hidden`    — clips anything this section overhangs.
   3. `background-color`    — set explicitly, not inherited.
   4. `z-index: 1`          — sits above the preceding section.

   The hero also carries `overflow: hidden`, so containment holds from both
   sides. Do NOT add a top gradient/ramp here — the hero→section transition
   is a clean edge by design.
   ========================================================================== */
.community {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--c-paper);

  /* ---- brand gradient, light ----
     Same navy→teal→blue-gray hues as the dark version, lifted to tints and
     opened up with white at both ends. Type on this band is DARK. */
  --cc-g1: #ffffff;
  --cc-g2: #eef5f6;
  --cc-g3: #ddeeed;
  --cc-g4: #cbe7e0; /* logo green, as a tint */
  --cc-g5: #c9e2e6;
  --cc-g6: #dbe9f1;
  --cc-g7: #f4f8fb; /* soft blue-white close */

  /* ---- type on the light band ---- */
  --cc-ink: #0c1c33;
  --cc-ink-soft: #41576b;

  /* ---- card row ---- */
  --cc-row-max: 78rem;
  --cc-gap: clamp(0.75rem, 1.2vw, 1.25rem);
  --cc-radius: 18px;
  --cc-bleed: clamp(4.5rem, 10vw, 8.5rem);
}

/* ==========================================================================
   Gradient banner
   ========================================================================== */
.community__banner {
  position: relative;
  z-index: 0;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
  text-align: center;
  /* seven stops keep the ramp smooth instead of banding */
  background-image: linear-gradient(
    104deg,
    var(--cc-g1) 0%,
    var(--cc-g2) 18%,
    var(--cc-g3) 36%,
    var(--cc-g4) 54%,
    var(--cc-g5) 68%,
    var(--cc-g6) 84%,
    var(--cc-g7) 100%
  );
}

.community__title {
  max-width: 18ch;
  margin-inline: auto;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--cc-ink);
}

.community__sub {
  max-width: 46ch;
  margin: clamp(0.9rem, 1.6vw, 1.35rem) auto 0;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--cc-ink-soft);
}

/* ---------- CTAs (inverted for the light band) ---------- */
.community__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3rem;
  padding-inline: 0.5rem;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.pill:hover {
  transform: translateY(-1px);
}

.pill--solid {
  padding-right: 1.25rem;
  color: #ffffff;
  background-color: var(--cc-ink);
}

.pill--solid:hover {
  background-color: #14294a;
}

.pill--ghost {
  padding-left: 1.25rem;
  color: var(--cc-ink);
  border: 1px solid rgba(12, 28, 51, 0.28);
}

.pill--ghost:hover {
  background-color: rgba(12, 28, 51, 0.06);
}

.pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

/* on the solid pill the badge is light; on the ghost pill it is dark */
.pill__badge--dark {
  color: var(--cc-ink);
  background-color: #ffffff;
}

.pill__badge--light {
  color: #ffffff;
  background-color: var(--cc-ink);
}

.pill__badge svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ==========================================================================
   Card row — contained, all three fully in frame
   ========================================================================== */
.community__cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cc-gap);
  width: 100%;
  max-width: var(--cc-row-max);
  margin-inline: auto;
  margin-top: calc(var(--cc-bleed) * -1);
  padding-inline: var(--gutter);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.cc-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(12, 28, 51, 0.1);
  border-radius: var(--cc-radius);
  background-color: var(--c-surface);
  box-shadow: 0 22px 50px -30px rgba(9, 20, 30, 0.45);
  overflow: hidden;
}

.cc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* scrim carries the title only — kept shallow so the photo stays open */
.cc-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40%;
  background-image: linear-gradient(
    to top,
    rgba(10, 16, 24, 0.72) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.cc-card__title {
  position: absolute;
  right: clamp(0.9rem, 1.4vw, 1.25rem);
  bottom: clamp(0.85rem, 1.3vw, 1.15rem);
  left: clamp(0.9rem, 1.4vw, 1.25rem);
  z-index: 2;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  color: #ffffff;
}

/* ---------- play button ---------- */
.cc-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.75rem, 3.8vw, 3.4rem);
  height: clamp(2.75rem, 3.8vw, 3.4rem);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: translate(-50%, -50%);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.cc-play:hover {
  background-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.14);
  transform: translate(-50%, -50%) scale(1.06);
}

.cc-play svg {
  width: 0.8125rem;
  height: 0.8125rem;
  margin-left: 2px;
}

/* ==========================================================================
   Tablet — up to 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  .community {
    --cc-bleed: clamp(3.5rem, 9vw, 6rem);
  }

  .ig-feed__header {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.72fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

/* ==========================================================================
   Mobile — up to 768px: single column, no bleed
   ========================================================================== */
@media (max-width: 768px) {
  .community {
    --cc-bleed: 0rem;
  }

  .community__banner {
    padding-bottom: clamp(2.5rem, 7vw, 3.5rem);
  }

  .community__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: clamp(1.5rem, 5vw, 2.25rem);
  }

  .cc-card {
    aspect-ratio: 4 / 3;
  }

  .ig-feed {
    padding-block: clamp(3.75rem, 10vw, 5.5rem);
  }

  .ig-feed__header {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }

  .ig-feed__title {
    max-width: 14ch;
  }

  .ig-feed__intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .ig-feed__follow {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .ig-reel {
    flex-basis: min(72vw, 19rem);
  }
}

@media (max-width: 420px) {
  .community__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .pill {
    justify-content: center;
  }

  .ig-feed__intro {
    display: block;
  }

  .ig-feed__follow {
    margin-top: 1.25rem;
  }

  .ig-feed__toolbar {
    margin-top: 2.35rem;
  }

  .ig-reel {
    flex-basis: min(82vw, 18.25rem);
  }

  .ig-reel__card {
    border-radius: 20px;
  }

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

@media (prefers-reduced-motion: reduce) {
  .ig-feed__viewport {
    scroll-behavior: auto;
  }

  .ig-reel__card:hover,
  .ig-reel__card:focus-within,
  .ig-control:hover:not(:disabled),
  .ig-control:active:not(:disabled) {
    transform: none;
  }
}

/* ==========================================================================
   ===== ABOUT SECTION =====
   Sits between the hero and Community Care. Same containment discipline as
   every other section: own stacking context, clips its own children, paints
   its own background — so it can neither inherit the hero's edge nor bleed
   into the section below.
   ========================================================================== */
.about {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--c-surface);
  color: var(--c-paper-ink);
}

.about__inner {
  max-width: var(--maxw-section);
  margin-inline: auto;
  padding: clamp(4.5rem, 10vw, 8rem) var(--gutter);
}

/* ---------- text column ---------- */
/*  Two columns: everything readable on the left, the photograph on the right.
    0.92/1.08 rather than an even split — the text needs a measure, the image
    wants the surplus, and a dead-even split gives the paragraph a line length
    it does not want.                                                       */
.about__row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(1rem, 2vw, 1.75rem);
}

.about__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}

/*  The marker was two underscore characters sitting inline before the first
    word, which pushed the first line in and left the other lines flush — the
    headline read as indented rather than marked. Drawn as a rule above it, it
    becomes the same accent the rest of the site uses for an eyebrow, and the
    headline gets its own straight left edge back.                          */
.about__headline {
  max-width: 20ch;
  font-family: var(--font-sans);
  font-size: clamp(1.625rem, 2.9vw, 2.75rem);
  font-weight: var(--fw-semibold);
  line-height: 1.16;
  letter-spacing: -0.028em;
  text-wrap: pretty;
}

.about__marker {
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: clamp(1rem, 1.8vw, 1.375rem);
  border-radius: 3px;
  background-color: var(--c-mark);
  /* the element still contains "__" for older assistive tech; this hides the
     glyphs without removing them from the markup */
  overflow: hidden;
  text-indent: -999em;
}

.about__text {
  max-width: 46ch;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: var(--c-paper-ink-soft);
}

.about__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.5rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--c-surface);
  background-color: var(--c-dark);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.about__cta:hover {
  transform: translateY(-1px);
  background-color: var(--c-bg);
}

/* ---------- image ---------- */
.about__figure {
  position: relative;
  margin: 0;
}

/*  A tinted panel offset behind the top-right corner. It is the one piece of
    decoration in the section and it is doing a job: a lone rounded rectangle
    on white has no depth, and this gives the photograph something to sit in
    front of rather than a drop shadow, which would read as heavier.

    Sized in percentages so the peek stays proportional, and the section's own
    overflow:hidden keeps it from touching anything else.                   */
.about__figure::before {
  content: "";
  position: absolute;
  top: clamp(-18px, -1.2vw, -12px);
  right: clamp(-18px, -1.2vw, -12px);
  width: 58%;
  height: 62%;
  border-radius: 24px;
  background-image: linear-gradient(
    145deg,
    rgba(var(--tint-sage), 0.28) 0%,
    rgba(var(--tint-sage), 0.06) 62%,
    rgba(var(--tint-sage), 0) 100%
  );
  pointer-events: none;
}

.about__img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /*  4:5 next to a column of text, not the old 5:3. A landscape crop beside a
      tall text block leaves a band of white down one side; a portrait one
      meets the column and the row closes.                                  */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  /* a hairline instead of a shadow — the tinted panel is already the depth */
  box-shadow: 0 0 0 1px rgba(20, 32, 44, 0.07);
}

/* ---------- tablet + mobile: one column ---------- */
@media (max-width: 900px) {
  .about__row {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }

  .about__headline,
  .about__text {
    max-width: none;
  }

  /*  Stacked, a 4:5 photograph is most of a phone screen. It also loses its
      job — there is no text column beside it to match any more.           */
  .about__img {
    aspect-ratio: 16 / 10;
  }

  .about__figure::before {
    width: 42%;
    height: 46%;
  }
}

@media (max-width: 560px) {
  .about__img {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   ===== SERVICES SECTION =====
   Header block and a centred four-up card grid. Same containment discipline
   as the other sections. (This was a full-bleed snapping rail that cropped
   the last card to signal scrolling; there are only ever four categories, so
   it is a contained grid now and the stats block is gone.)
   ========================================================================== */
.services {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 5.5vw, 4.75rem);
  background-color: var(--c-paper);
  color: var(--c-paper-ink);
}

/*  A CENTRED COLUMN, not full bleed.

    This section was built as a rail that ran off the right edge so the next
    card cropped — the standard way to say "there is more, scroll". There are
    exactly four categories, so there never was more: the crop was promising
    content that does not exist, and the fourth card lost its right edge for
    nothing.

    Headline, card row and stats all resolve from the same container now, so
    they share one left edge and one right edge and the row sits centred in
    the section at every width.                                             */
.services__inner,
.services__track {
  max-width: var(--maxw-svc);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- eyebrow ---------- */
/* reference sets this in sentence case at near-normal tracking — the
   tracked-out caps we had were reading far louder than the source */
.svc-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--c-paper-ink-soft);
}

.svc-eyebrow__mark {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 2px;
  background-color: var(--c-mark);
}

/* ---------- header row ---------- */
.services__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(0.6rem, 1.2vw, 1rem);
}

.services__title {
  max-width: 26ch;
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3.5vw, 3.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.16;
  letter-spacing: -0.026em;
  text-wrap: pretty;
}

/* the one gray phrase inside the black headline */
.services__title-muted {
  color: var(--c-paper-ink-soft);
}

/* ==========================================================================
   Slider
   ========================================================================== */
.services__slider {
  position: relative;
  margin-top: clamp(1.75rem, 3.4vw, 2.75rem);
}

/*  Four equal columns rather than a scrolling flex row. The scroll-snap,
    momentum and hidden-scrollbar machinery all went with it — none of it does
    anything once the row cannot scroll.

    A fifth category would wrap onto a second row, which is a fine way to grow;
    the old rail would have cropped it off the side instead.                */
.services__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.svc-card {
  min-width: 0;
  height: 100%;
}

/* Clickable service card link */
.svc-card__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow:
    0 1px 3px rgba(12, 18, 28, 0.05),
    0 8px 24px -10px rgba(12, 18, 28, 0.08);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}

.svc-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: #e8efed;
}

.svc-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 520ms var(--ease-out);
}

/* Smooth multi-stop dark gradient scrim at the bottom for crystal-clear readability */
.svc-card__figure::after {
  content: none;
}

.svc-card:hover .svc-card__figure,
.svc-card:focus-within .svc-card__figure {
  border-color: rgba(15, 23, 42, 0.3);
  box-shadow:
    0 18px 44px -18px rgba(12, 22, 38, 0.26),
    0 4px 12px -2px rgba(12, 22, 38, 0.06);
  transform: translateY(-3px);
}

.svc-card:hover .svc-card__img,
.svc-card:focus-within .svc-card__img {
  transform: scale(1.05);
}

.svc-card:hover .svc-card__figure::after,
.svc-card:focus-within .svc-card__figure::after {
  opacity: 0.94;
}

.svc-card__label {
  display: block;
  margin: 0;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--c-paper-ink);
  transition: transform 360ms var(--ease-out);
}

.svc-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.25rem, 2.1vw, 1.75rem);
}

.svc-card__desc {
  display: block;
  margin-top: 0.85rem;
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: var(--fw-medium);
  line-height: 1.65;
  color: var(--c-paper-ink-soft);
}

.svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: var(--c-mark);
}

.svc-card:hover .svc-card__label,
.svc-card:focus-within .svc-card__label {
  transform: translateX(2px);
}

/* ---------- arrows ---------- */
/* Arrows are the header's right-hand column now that the link is gone. The
   section's inline padding comes from .services__inner, so no edge token or
   margin of its own. */
.services__nav {
  display: flex;
  justify-self: end;
  align-self: start;
  gap: 0.5rem;
  padding-top: 0.35rem;
}

/* rounded-square glass, same language as the header dropdown */
.svc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(20, 22, 26, 0.1);
  border-radius: 13px;
  color: var(--c-paper-ink);
  background-color: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 20px -12px rgba(20, 30, 45, 0.35);
  transition:
    background-color 200ms var(--ease-out),
    transform 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    opacity 200ms var(--ease-out);
}

/* square now that the glyph is the hooked arrow shared with the blog
   carousel — the old 16x10 box belonged to a flat arrow */
.svc-arrow svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* thin stroke — the markup ships 1.5, this keeps it light at the larger size */
.svc-arrow svg path {
  stroke-width: 1.2;
}

.svc-arrow:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.86);
  transform: scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 12px 26px -12px rgba(20, 30, 45, 0.42);
}

.svc-arrow:active:not(:disabled) {
  transform: scale(0.98);
}

.svc-arrow:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
}

/* ==========================================================================
   Stats
   ========================================================================== */
/* ==========================================================================
   Sizing tokens
   ========================================================================== */
.services {
  /*  Wider than the site's usual 78rem section: four cards of any presence
      need the room, and this section carries nothing but the headline and the
      row. Above this width the row stops growing and centres instead, so a
      2560 monitor gets the same card size a 1600 one does rather than four
      enormous ones.                                                        */
  --maxw-svc: 96rem;
  --svc-gap: clamp(0.75rem, 1.1vw, 1.25rem);
}

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .services__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .services__title {
    max-width: none;
  }

}

/* ---------- tablet: two up ---------- */
@media (max-width: 1000px) {
  .services__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- mobile: one up ---------- */
@media (max-width: 640px) {
  .services__track {
    grid-template-columns: minmax(0, 1fr);
  }

  .services__nav {
    display: none;
  }

  /* touch has no hover — pin the resting state so nothing sticks after a tap */
  .svc-card:hover .svc-card__img {
    transform: none;
  }

  .svc-card:hover .svc-card__figure {
    transform: none;
  }
}

/* ==========================================================================
   ===== DOCTORS SECTION =====
   The credibility centrepiece. Same containment discipline as its neighbours
   — own stacking context, own background, clips its own children.

   COMPOSITION — read before moving anything.
   The cutout is the spine of the section, not an item in a three-column
   grid. Three things do the work:

     1. The ground is split. Navy tint bleeds in from the left, sand from the
        right, and they cross over at roughly the centre line, where the
        figure stands — so each surgeon has their own atmosphere and the two
        dissolve into each other exactly where the two people meet.

     2. The two detail blocks are NOT mirrored. Left sits high and is set
        flush right; right sits low, runs wider, and is set flush left. Their
        accent marks differ in kind (a rule over the name vs a rule beside
        the block), not just in colour. The diagonal that falls out of this
        is the reading order.

     3. The blocks tuck UNDER the figure. --doc-overlap is a negative margin
        pulling each block into the image column, and the figure outranks
        them on z-index. The PNG carries roughly 10% transparent margin on
        each side, which is the clearance that keeps type off the scrubs —
        if the image is ever re-exported tighter, raise the block max-widths
        or the text will collide with a shoulder.
   ========================================================================== */
.doc {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  /* the bottom padding is not whitespace — the contact shadow is translated
     42% below the figure, and the section clips its own children */
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2.25rem, 3.5vw, 3.5rem);
  font-family: var(--font-sans);
  color: var(--c-paper-ink);

  /* The split. Two tints of the existing palette crossing at the middle —
     navy holds the left third, sand the right, and both fall to almost
     nothing across 46–54% so the hand-off is a blend, not a seam. */
  background-color: var(--c-surface);
  background-image:
    linear-gradient(
      100deg,
      rgba(var(--tint-navy), 0.17) 0%,
      rgba(var(--tint-navy), 0.1) 26%,
      rgba(var(--tint-navy), 0.03) 44%,
      rgba(var(--tint-sand), 0.04) 56%,
      rgba(var(--tint-sand), 0.13) 76%,
      rgba(var(--tint-sand), 0.21) 100%
    ),
    linear-gradient(180deg, #ffffff 0%, #fcfbf9 60%, #f6f4f0 100%);

  --doc-overlap: clamp(0.75rem, 2.6vw, 3rem);
}

/* ---------- header ---------- */
.doc__head {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.doc__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-mark);
}

.doc__title {
  margin: clamp(0.55rem, 1vw, 0.85rem) 0 0;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.doc__title-em {
  font-style: normal;
  font-weight: inherit;
  color: var(--c-teal-deep);
}

/* ==========================================================================
   Stage
   ========================================================================== */
/* Three columns, the middle one widest. The figure sizes itself from that
   middle column, which is what makes the whole composition scale from one
   number instead of from a pile of viewport units. */
.doc__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  max-width: 86rem;
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- watermark ----------
   Outlined, not filled: at this size a filled word would fight the split
   ground, while an outline reads as drawn on it. It is wider than the
   viewport on purpose — the section clips it, and the bleed is what gives
   the composition its sense of scale.

   VERTICAL POSITION IS LOAD-BEARING. Centred, this word ran straight
   through the left surgeon's bio and the letterforms made the copy hard to
   read. It now sits at the foot of the stage, cropped by the section's own
   bottom edge, so it passes behind the legs and below BOTH detail blocks.

   `translateY(100% - 4rem)` is what pins it there: 100% is the word's own
   height, so whatever the font-size clamp resolves to, the top of the
   letterforms always lands exactly 4rem above the bottom of the stage. Move
   this and check the right-hand block still clears it — that block is the
   lowest piece of type in the section. */
.doc__watermark {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 50%;
  margin: 0;
  transform: translate(-50%, calc(100% - 4rem));
  font-size: clamp(4rem, 15.5vw, 15rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--tint-navy), 0.2);
  pointer-events: none;
  user-select: none;
}

/* ---------- figure ---------- */
.doc__figure {
  position: relative;
  z-index: 2; /* outranks the cards — this is what makes them tuck under */
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: end;
}

.doc__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* Contact shadow, product-photography style: a wide soft ellipse under the
   feet rather than a drop shadow on the cutout, which would trace the
   silhouette and give the whole thing away. */
.doc__figure::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  width: 74%;
  height: 4.5rem;
  transform: translate(-50%, 42%);
  border-radius: 50%;
  background-image: radial-gradient(
    50% 50% at 50% 50%,
    rgba(var(--tint-navy), 0.28) 0%,
    rgba(var(--tint-navy), 0.1) 46%,
    rgba(var(--tint-navy), 0) 72%
  );
  filter: blur(9px);
  pointer-events: none;
}

/* ==========================================================================
   Detail blocks
   ========================================================================== */
.doc-card {
  position: relative;
  z-index: 1;
  grid-row: 1;
}

/* left: high, narrow, flush right, pulled into the image column */
.doc-card--left {
  grid-column: 1;
  align-self: start;
  max-width: 22rem;
  margin-top: clamp(2rem, 7vh, 5.5rem);
  margin-left: auto;
  margin-right: calc(var(--doc-overlap) * -1);
  text-align: right;
}

/* right: low, wider, flush left, pulled the other way */
.doc-card--right {
  grid-column: 3;
  align-self: end;
  max-width: 24rem;
  margin-bottom: clamp(2.5rem, 9vh, 7rem);
  margin-left: calc(var(--doc-overlap) * -1);
  padding-left: clamp(0.875rem, 1.4vw, 1.25rem);
  text-align: left;
}

/* ---------- the two accent marks ----------
   Different in kind, not just in colour: a rule ABOVE the name on the left,
   a rule BESIDE the block on the right. */
.doc-card--left .doc-card__mark {
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-left: auto;
  margin-bottom: clamp(0.875rem, 1.5vw, 1.25rem);
  border-radius: 2px;
  background-image: linear-gradient(
    to left,
    var(--c-mark),
    rgba(26, 117, 102, 0)
  );
}

.doc-card--right .doc-card__mark {
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 2px;
  height: 3.25rem;
  border-radius: 2px;
  background-image: linear-gradient(
    to bottom,
    rgba(var(--tint-clay), 1),
    rgba(var(--tint-clay), 0)
  );
}

/* ---------- type ---------- */
.doc-card__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.375rem);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--c-paper-ink);
}

.doc-card__role {
  margin: clamp(0.4rem, 0.7vw, 0.55rem) 0 0;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.doc-card--left .doc-card__role {
  color: var(--c-mark);
}

/* the right block echoes its own half of the split background */
.doc-card--right .doc-card__role {
  color: rgb(var(--tint-clay));
}

.doc-card__bio {
  margin: clamp(0.875rem, 1.5vw, 1.125rem) 0 0;
  font-size: clamp(0.875rem, 0.96vw, 0.9375rem);
  font-weight: var(--fw-medium);
  line-height: 1.72;
  color: var(--c-paper-ink-soft);
  text-wrap: pretty;
}

/* ---------- second credential line ----------
   Sits directly under the role: lighter, ink-soft, and NOT tracked, so the
   pair reads as one credential block with a loud line and a quiet one rather
   than as two competing labels. */
.doc-card__creds {
  margin: 0.3rem 0 0;
  font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--c-paper-ink-soft);
  text-wrap: pretty;
}

/* ==========================================================================
   Doctors — narrow desktop
   ========================================================================== */
/* ==========================================================================
   Doctors — the figure stands on the section's bottom edge
   --------------------------------------------------------------------------
   Above the stack breakpoint the figure is `align-self: end` in a centred
   grid, so it IS the lowest thing in the section — and the bottom padding was
   leaving it floating above the edge with a band of ground beneath it.

   Only above 900px. Stacked, the stage becomes a flex column and the last
   card is the lowest element, so dropping the padding there would jam type
   against the section boundary instead.
   ========================================================================== */
@media (min-width: 901px) {
  .doc {
    padding-bottom: 0;
  }

  /*  The contact shadow goes with it. It is translated 42% below the figure,
      so flush to the edge the section would clip a blurred ellipse in half
      and leave a hard grey smudge along the boundary. A shadow also needs
      ground to fall on, and there is none once the photo meets the edge. */
  .doc__figure::after {
    display: none;
  }
}

/* The middle column keeps its share while the outer two shrink, so the type
   blocks run out of room before the figure does. Give them the room back by
   flattening the ratio. */
@media (max-width: 1200px) {
  .doc__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .doc-card--left {
    margin-top: clamp(1.5rem, 5vh, 3.5rem);
  }

  .doc-card--right {
    margin-bottom: clamp(1.5rem, 6vh, 4.5rem);
  }
}

/* ==========================================================================
   Doctors — stacked
   ========================================================================== */
/* One column: figure, then left surgeon, then right surgeon. The asymmetry
   survives the stack — the blocks keep their own widths, their own marks and
   their own alignment rather than collapsing into two identical rows. */
@media (max-width: 900px) {
  .doc__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 5vw, 3rem);
  }

  /* stacked, the foot of the stage is under the last card, not under the
     figure — so the word goes back up behind the figure, where the only
     thing it can sit behind is the photo */
  .doc__watermark {
    top: 15%;
    bottom: auto;
    transform: translate(-50%, 0);
    font-size: clamp(3.25rem, 19vw, 8rem);
  }

  .doc__figure {
    width: min(80%, 24rem);
    align-self: center;
  }

  .doc-card {
    width: 100%;
  }

  /* margins that pulled the blocks sideways have nothing to pull against
     once the columns are gone */
  .doc-card--left,
  .doc-card--right {
    max-width: 32rem;
    margin: 0;
  }

  .doc-card--left {
    align-self: flex-start;
    text-align: left;
  }

  /* the mark flips to the start edge with the text */
  .doc-card--left .doc-card__mark {
    margin-left: 0;
    background-image: linear-gradient(
      to right,
      var(--c-mark),
      rgba(26, 117, 102, 0)
    );
  }

  /* the right block stays inset and narrower — this is what keeps the two
     from reading as an identical pair once they are one above the other */
  .doc-card--right {
    align-self: flex-end;
    max-width: 30rem;
    padding-left: clamp(0.875rem, 2vw, 1.25rem);
  }
}

@media (max-width: 560px) {
  .doc-card--left,
  .doc-card--right {
    align-self: stretch;
  }

  .doc__figure {
    width: min(92%, 20rem);
  }
}

/* ==========================================================================
   ===== TESTIMONIALS SECTION =====
   Dark band closing the page, built on Apple's dark-mode system palette.

   iOS DARK, NOT "BLACK". The difference is the whole look:
     - the ground is a near-black with a cool cast, lifted by two very low
       blooms, not a flat #000 — flat black kills every soft shadow on it;
     - surfaces are TRANSLUCENT white over that ground with a blur behind
       them, the way Apple's materials work, rather than a lighter opaque
       grey. That is what makes the cards sit on the background instead of
       being pasted onto it;
     - every card carries a 1px hairline plus an inset top highlight, which
       is how iOS suggests a lit edge;
     - type runs on the three-step label ramp (label / secondary / tertiary)
       rather than on arbitrary greys.

   MOTION: two columns drifting in opposite directions, forever, with no
   controls. Everything is CSS; there is no carousel JS for this section.
   ========================================================================== */
.tst {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  /* No vertical padding on the section: the card rail runs edge to edge and
     is cut by the section's own boundary. The intro column carries the
     padding instead, so only it is inset. */
  padding-block: 0;
  font-family: var(--font-sans);

  /* ---------- iOS dark system palette ---------- */
  --tst-bg: #0a0b0e;
  --tst-surface: rgba(255, 255, 255, 0.055);
  --tst-line: rgba(255, 255, 255, 0.09);
  --tst-hairline: rgba(255, 255, 255, 0.07);
  --tst-label: #f5f5f7; /* label */
  --tst-label-2: rgba(235, 235, 245, 0.6); /* secondaryLabel */
  --tst-label-3: rgba(235, 235, 245, 0.32); /* tertiaryLabel */
  --tst-star: #ff9f0a; /* systemOrange, dark */

  /* ---------- sizing ---------- */
  --tst-gap: clamp(0.75rem, 1vw, 1.125rem);
  --tst-radius: 18px;
  --tst-pad: clamp(1.125rem, 1.5vw, 1.375rem);
  /* drives the section height, and therefore the rail height — the rail is
     stretched to the grid row rather than given a height of its own */
  --tst-rail-h: clamp(40rem, 92vh, 60rem);

  /* one loop = one card set; B is offset by direction only */
  --tst-speed: 52s;

  background-color: var(--tst-bg);
  background-image:
    radial-gradient(
      52% 44% at 14% 8%,
      rgba(var(--tint-sage), 0.16) 0%,
      rgba(var(--tint-sage), 0) 62%
    ),
    radial-gradient(
      48% 42% at 88% 84%,
      rgba(var(--tint-navy), 0.2) 0%,
      rgba(var(--tint-navy), 0) 64%
    );
  color: var(--tst-label);
}

/* Grain. On a near-black ground an eight-bit gradient bands badly; this is
   what stops the two blooms from ringing. */
.tst::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

.tst__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: var(--tst-rail-h);
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Intro column
   ========================================================================== */
/* stretch is for the rail; the intro re-centres itself inside the row and
   carries the vertical padding the section gave up */
.tst__intro {
  align-self: center;
  max-width: 32rem;
  padding-block: clamp(3rem, 5.5vw, 5rem);
}

.tst__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--tst-label-2);
}

.tst__title {
  margin: clamp(0.75rem, 1.4vw, 1.125rem) 0 0;
  font-size: clamp(1.625rem, 2.9vw, 2.625rem);
  font-weight: var(--fw-bold);
  line-height: 1.18;
  letter-spacing: -0.028em;
  color: var(--tst-label);
  text-wrap: pretty;
}

/* the accent is carried by colour alone — one typeface in this section */
.tst__title-em {
  font-style: normal;
  font-weight: inherit;
  color: var(--c-accent);
}

.tst__lead {
  margin: clamp(0.875rem, 1.5vw, 1.25rem) 0 0;
  max-width: 34ch;
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  font-weight: var(--fw-medium);
  line-height: 1.65;
  color: var(--tst-label-2);
  text-wrap: pretty;
}

/* the one solid element in the section — iOS puts its primary action in a
   filled white capsule on dark */
.tst__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  padding: 0.875rem 1.5rem;
  border-radius: var(--r-pill);
  background-color: var(--tst-label);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: #0a0b0e;
  text-decoration: none;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.9);
  transition:
    transform 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out),
    background-color 240ms var(--ease-out);
}

.tst__cta svg {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  transition: transform 240ms var(--ease-out);
}

.tst__cta:hover {
  background-color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.95);
}

.tst__cta:hover svg {
  transform: translateX(2px);
}

.tst__cta:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Rail
   ========================================================================== */
/* Two columns, fixed height, clipped hard.

   There is deliberately NO fade mask on this. A top/bottom dissolve reads as
   empty space at the ends of the rail rather than as a soft edge — the
   cards look like they stop short. Cutting them mid-card against the rail
   edge is what says the column keeps going. */
/* The columns are ABSOLUTE inside this, and that is load-bearing. As normal
   flow children they are ~2700px tall, and `overflow: hidden` does not stop a
   stretched grid item from sizing to its content — the section grew to the
   full column height and the rail stopped being a window at all. Taking them
   out of flow leaves the rail with no content height, so it stretches to the
   grid row, which is set by the intro and --tst-rail-h. */
.tst__rail {
  position: relative;
  overflow: hidden;
}

/* Each column prints its set three times (see index.php).

   THE SHIFT. One loop must travel exactly one set — N cards and their N
   gaps. As a fraction of the column that is NOT 100%/3: a column of C copies
   has C×N cards but only C×N−1 gaps, so it is one gap short of C whole sets.
   The correction is + gap/C. Card heights vary with quote length, which is
   why this is expressed as a percentage plus a gap rather than an absolute
   height like the horizontal version used. Change the copy count in the PHP
   and both divisors here have to change with it. */
.tst__col {
  position: absolute;
  top: 0;
  width: calc((100% - var(--tst-gap)) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--tst-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.tst__col--a {
  left: 0;
  animation: tst-drift-up var(--tst-speed) linear infinite;
}

.tst__col--b {
  right: 0;
  animation: tst-drift-down var(--tst-speed) linear infinite;
}

/* hovering holds just the column under the cursor, so a quote can be read
   without freezing the section */
.tst__rail:hover .tst__col {
  animation-play-state: paused;
}

@keyframes tst-drift-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc((-100% / 3) - (var(--tst-gap) / 3)));
  }
}

@keyframes tst-drift-down {
  from {
    transform: translateY(calc((-100% / 3) - (var(--tst-gap) / 3)));
  }
  to {
    transform: translateY(0);
  }
}

/* ==========================================================================
   Card
   ========================================================================== */
/* Translucent white over the ground with a blur behind it — an iOS material,
   not an opaque grey panel. The inset highlight on the top edge is the lit
   edge; without it the card reads as a flat hole. */
.tst-card {
  padding: var(--tst-pad);
  border: 1px solid var(--tst-line);
  border-radius: var(--tst-radius);
  background-color: var(--tst-surface);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 24px -18px rgba(0, 0, 0, 0.9);
}

.tst-card__rating {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0 0 clamp(0.75rem, 1.2vw, 1rem);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--tst-star);
}

.tst-card__star {
  width: 0.875rem;
  height: 0.8125rem;
  flex: none;
}

.tst-card__quote {
  margin: 0;
  font-size: clamp(0.8125rem, 0.92vw, 0.9375rem);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: -0.006em;
  color: var(--tst-label);
  text-wrap: pretty;
}

.tst-card__quote p {
  margin: 0;
}

/* the divider is the card's only rule — iOS separator weight, not a border */
.tst-card__author {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: clamp(0.875rem, 1.4vw, 1.125rem) 0 0;
  padding-top: clamp(0.875rem, 1.4vw, 1.125rem);
  border-top: 1px solid var(--tst-hairline);
}

.tst-card__avatar {
  width: 2rem;
  height: 2rem;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.tst-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.tst-card__name {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--tst-label);
}

.tst-card__role {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--tst-label-3);
}

/* ==========================================================================
   Testimonials — stacked
   ========================================================================== */
/* The intro moves above the rail. The rail keeps BOTH columns as long as
   there is room for them — two narrow columns still read as a wall of
   feedback, which one column does not. */
@media (max-width: 900px) {
  .tst__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3rem);
  }

  .tst__intro {
    max-width: 34rem;
    padding-block: clamp(3rem, 7vw, 4rem) 0;
  }

  /* one column, so the rail is no longer stretched by the row — it needs a
     height again, and it still sits flush against the section's bottom */
  .tst__rail {
    height: var(--tst-rail-h);
  }

  .tst {
    --tst-rail-h: clamp(34rem, 78vh, 46rem);
  }
}

/* ==========================================================================
   Testimonials — mobile
   ========================================================================== */
@media (max-width: 560px) {
  /* two columns at this width would leave ~20 characters a line */
  .tst__col--a {
    width: 100%;
  }

  /* with one column the second is redundant — hide it rather than ship
     twice the DOM for nothing */
  .tst__col--b {
    display: none;
  }

  .tst {
    --tst-rail-h: clamp(30rem, 76vh, 38rem);
  }
}

/* ==========================================================================
   Testimonials — reduced motion
   ========================================================================== */
/* The global reset zeroes EVERY animation-duration, which would strand the
   columns at translateY(0) and leave the rail showing four cards and a hole.
   The section is exempted deliberately: `.tst__col` outranks the reset's `*`
   selector, so the duration is handed back.

   Hovering a column still pauses it, which is the pause mechanism WCAG 2.2.2
   asks for. To hand the columns back to the user's setting instead, delete
   this block and give .tst__rail `overflow-y: auto` so the cards stay
   reachable. */
@media (prefers-reduced-motion: reduce) {
  .tst__col {
    animation-duration: var(--tst-speed) !important;
    animation-iteration-count: infinite !important;
  }
}

/* ==========================================================================
   ===== BLOG SECTION =====
   A white panel floating on a photograph. The photo is the section; the
   panel is inset from it on all four sides, so a border of the image frames
   the content — that framing is the whole device, which is why the section
   padding here is structural rather than decorative.

   The panel is two stacked grids:
     head  — headline left, intro paragraph right
     body  — a narrow meta column (counter, active line, buttons) and the
             card track beside it

   The counter and the line under it track the carousel, so the left column
   is a readout of the track rather than a static caption. Both are driven
   from main.js.
   ========================================================================== */
.blog {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.5rem, 7vw, 7.5rem) var(--gutter);
  font-family: var(--font-sans);
  color: var(--c-paper-ink);
  background:
    radial-gradient(ellipse 900px 500px at 15% 10%, rgba(127, 209, 193, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 700px 450px at 85% 80%, rgba(26, 117, 102, 0.1) 0%, transparent 70%),
    linear-gradient(145deg, #f4faf8 0%, #e9f5f2 50%, #f7fbf9 100%);
  border-top: 1px solid rgba(26, 117, 102, 0.08);
  border-bottom: 1px solid rgba(26, 117, 102, 0.08);

  --blog-card-w: clamp(14rem, 26vw, 24rem);
  --blog-gap: clamp(0.875rem, 1.2vw, 1.25rem);
  --blog-radius: 16px;
}

/* ---------- the panel (Full Space) ---------- */
.blog__panel {
  max-width: 82rem;
  margin-inline: auto;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* ==========================================================================
   Head
   ========================================================================== */
.blog__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
}

/* an outlined chip, not a filled one — it has to sit quietly above a large
   headline rather than compete with it */
.blog__badge {
  display: inline-block;
  margin: 0;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--c-paper-line);
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--c-paper-ink-soft);
}

/* Light weight at a large size, the way the reference sets it: the size
   carries the emphasis, so the weight does not have to. */
.blog__title {
  margin: clamp(0.875rem, 1.6vw, 1.375rem) 0 0;
  font-size: clamp(1.75rem, 3.2vw, 2.875rem);
  font-weight: var(--fw-regular);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--c-paper-ink);
}

/* the accent phrase every headline on the page carries. Deep teal, not
   --c-accent: that one is the light-section-on-dark tone the testimonials use,
   and it washes out on a pale ground. Same value as the doctors headline. */
.blog__title-em {
  font-style: normal;
  font-weight: inherit;
  color: var(--c-teal-deep);
}

.blog__intro {
  margin: clamp(0.5rem, 1vw, 0.75rem) 0 0;
  max-width: 38ch;
  font-size: clamp(0.8125rem, 0.92vw, 0.875rem);
  font-weight: var(--fw-medium);
  line-height: 1.62;
  color: var(--c-paper-ink-soft);
  text-wrap: pretty;
}

/* ==========================================================================
   Body
   ========================================================================== */
.blog__body {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.75rem, 3.5vw, 3.25rem);
}

.blog__meta {
  display: flex;
  flex-direction: column;
}

/* ---------- counter ----------
   The live number is set full size and the total is small and muted beside
   it, so the pair reads as one figure rather than as a fraction. Tabular
   figures stop the layout twitching as the number changes. */
.blog__counter {
  display: flex;
  align-items: baseline;
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.blog__counter-now {
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: var(--fw-regular);
  letter-spacing: -0.03em;
  color: var(--c-paper-ink);
}

.blog__counter-total {
  font-size: clamp(0.875rem, 1.1vw, 1.0625rem);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  color: var(--c-paper-ink-soft);
}

/* swapped by main.js as the track moves — the fade is what stops the text
   from snapping between two different sentences */
.blog__step {
  margin: clamp(0.625rem, 1.2vw, 1rem) 0 0;
  max-width: 26ch;
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--c-paper-ink-soft);
  transition: opacity 220ms var(--ease-out);
}

.blog__step.is-swapping {
  opacity: 0;
}

/* ---------- buttons ----------
   Pushed to the bottom of the meta column by margin-top:auto, so they sit on
   the floor of the card row however tall it gets. Rounded squares, not
   circles — the cards are rounded rectangles and these echo them.
   The glyph is an undo/redo style hooked arrow, as in the reference. */
.blog__nav {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.blog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition:
    background-color 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    color 220ms var(--ease-out),
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}

.blog-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.blog-btn--ghost {
  border-color: var(--c-paper-line);
  background-color: var(--c-surface);
  color: var(--c-paper-ink);
}

.blog-btn--ghost:hover:not(:disabled) {
  border-color: rgba(20, 22, 26, 0.2);
  background-color: var(--c-paper);
  transform: translateY(-1px);
}

.blog-btn--solid {
  background-color: var(--c-paper-ink);
  color: var(--c-surface);
  box-shadow: 0 10px 22px -12px rgba(16, 24, 34, 0.7);
}

.blog-btn--solid:hover:not(:disabled) {
  background-color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -12px rgba(16, 24, 34, 0.75);
}

.blog-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}

.blog-btn:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}

.blog-btn:focus-visible {
  outline: 2px solid var(--c-mark);
  outline-offset: 3px;
}

/* ==========================================================================
   Track
   ========================================================================== */
/* Native overflow scrolling with snap, so touch and trackpad work without
   JS; main.js only adds the buttons, the counter and the disabled states.
   The track is allowed to run past the panel's padding on the right so the
   next card crops against the panel edge — that crop is what says it
   scrolls. */
.blog__slider {
  min-width: 0;
  margin-right: calc(clamp(1.5rem, 3vw, 3rem) * -1);
}

.blog__track {
  display: flex;
  gap: var(--blog-gap);
  margin: 0;
  padding: 0 clamp(1.5rem, 3vw, 3rem) 0 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.blog__track::-webkit-scrollbar {
  display: none;
}

/* ---------- card ---------- */
.blog-card {
  flex: 0 0 var(--blog-card-w);
  scroll-snap-align: start;
}

.blog-card__link {
  position: relative;
  display: block;
  aspect-ratio: 0.92;
  overflow: hidden;
  border-radius: var(--blog-radius);
  background-color: var(--c-paper);
  text-decoration: none;
  transition:
    transform 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out);
}

.blog-card__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -24px rgba(16, 24, 34, 0.55);
}

.blog-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.blog-card__link:hover .blog-card__img {
  transform: scale(1.05);
}

/* The scrim is a gradient on the card, NOT on the copy: text set over a
   photograph with no scrim is unreadable on the light frames and fine on the
   dark ones, which is exactly the bug you cannot see in one screenshot. */
.blog-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgba(8, 12, 18, 0.88) 0%,
    rgba(8, 12, 18, 0.62) 26%,
    rgba(8, 12, 18, 0.12) 56%,
    rgba(8, 12, 18, 0.1) 100%
  );
  pointer-events: none;
}

/* the tag sits above the scrim — it is glass, so it needs the photo behind
   it rather than the gradient */
.blog-card__tag {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3125rem 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  background-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  color: #ffffff;
}

.blog-card__body {
  position: absolute;
  z-index: 1;
  right: 0.875rem;
  bottom: 0.875rem;
  left: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.blog-card__title {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: var(--fw-semibold);
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: #ffffff;
  text-wrap: pretty;
}

.blog-card__desc {
  font-size: clamp(0.6875rem, 0.78vw, 0.75rem);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.76);
  text-wrap: pretty;
}

/* ==========================================================================
   Blog — tablet
   ========================================================================== */
@media (max-width: 900px) {
  .blog__head {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 1.5rem);
  }

  .blog__intro {
    max-width: 46ch;
  }

  /* the meta column moves above the track; the buttons no longer have a tall
     neighbour to sit at the foot of, so the auto margin is dropped */
  .blog__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog__meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
  }

  .blog__step {
    margin: 0;
    max-width: 34ch;
  }

  .blog__nav {
    margin-top: 0;
    padding-top: 0;
  }

  .blog {
    --blog-card-w: clamp(13rem, 34vw, 19rem);
  }
}

/* ==========================================================================
   Blog — mobile
   ========================================================================== */
@media (max-width: 560px) {
  .blog {
    --blog-card-w: min(74vw, 17rem);
  }

  /* the active line has nowhere to sit between the counter and the buttons
     at this width — it drops to its own row underneath */
  .blog__meta {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.875rem;
  }

  .blog__step {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
  }

  .blog__nav {
    justify-self: end;
  }

  /* touch has no hover — pin the resting state so nothing sticks after a tap */
  .blog-card__link:hover {
    transform: none;
    box-shadow: none;
  }

  .blog-card__link:hover .blog-card__img {
    transform: none;
  }
}

/* ==========================================================================
   ===== FOOTER SECTION =====
   A deep navy, contemporary-medical-premium closing statement.
   Features 2-column top split (brand + newsletter), 4-column responsive
   links grid, glass-pill interactive elements, and a subtle anatomical
   pulse motif silhouette.
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  background-color: #080c14;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(127, 209, 193, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 700px 450px at 85% 20%, rgba(26, 117, 102, 0.07) 0%, transparent 70%),
    linear-gradient(180deg, #090e17 0%, #06080d 100%);
  color: #ffffff;
  font-family: var(--font-sans);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Ambient glow accents */
.site-footer__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.65;
  z-index: -1;
}

.site-footer__glow--left {
  top: -60px;
  left: 5%;
  width: clamp(250px, 35vw, 480px);
  height: clamp(200px, 28vw, 380px);
  background: radial-gradient(circle, rgba(127, 209, 193, 0.16) 0%, transparent 70%);
}

.site-footer__glow--right {
  top: 15%;
  right: 2%;
  width: clamp(280px, 40vw, 520px);
  height: clamp(220px, 30vw, 420px);
  background: radial-gradient(circle, rgba(26, 117, 102, 0.12) 0%, transparent 70%);
}

/* Container */
.site-footer__inner {
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- TOP BAND — 2-Column Split ---------- */
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.footer-top__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo {
  display: inline-block;
  line-height: 0;
  margin-bottom: 1.25rem;
  transition: opacity 180ms var(--ease-out);
}

.footer-logo:hover {
  opacity: 0.85;
}

.footer-logo__img {
  height: clamp(34px, 3.2vw, 44px);
  width: auto;
  display: block;
}

.footer-top__desc {
  font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  max-width: 38ch;
  margin: 0;
}

/* Newsletter block */
.footer-top__newsletter {
  display: flex;
  flex-direction: column;
}

.footer-newsletter__label {
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 0.875rem;
}

.footer-newsletter__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 0.35rem 0.35rem 0.35rem 1.25rem;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

.footer-newsletter__field:focus-within {
  border-color: rgba(127, 209, 193, 0.6);
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(127, 209, 193, 0.15);
}

.footer-newsletter__input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 0.875rem;
  color: #ffffff;
  min-width: 0;
  padding: 0.35rem 0.5rem 0.35rem 0;
}

.footer-newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer-newsletter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, var(--c-accent) 0%, #4da798 100%);
  color: #080c14;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  border-radius: 9999px;
  padding: 0.65rem 1.35rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), filter 180ms var(--ease-out);
}

.footer-newsletter__btn svg {
  width: 14px;
  height: 14px;
  transition: transform 180ms var(--ease-out);
}

.footer-newsletter__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(127, 209, 193, 0.4);
  filter: brightness(1.06);
}

.footer-newsletter__btn:hover svg {
  transform: translateX(2px);
}

.footer-newsletter__btn:active {
  transform: translateY(0);
}

.footer-newsletter__sub {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.625rem 0 0 0.5rem;
}

/* ---------- TABS & DATA ROW (3 Columns) ---------- */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.3fr;
  gap: clamp(2rem, 3.5vw, 4rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col__title {
  position: relative;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 1.35rem;
  padding-bottom: 0.5rem;
}

.footer-col__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--c-accent);
}

/* Quick Links with minus dash */
.footer-dash-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-dash-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.footer-dash-mark {
  color: var(--c-accent);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 180ms var(--ease-out);
}

.footer-dash-link:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.footer-dash-link:hover .footer-dash-mark {
  color: var(--c-surface);
  transform: scale(1.2);
}

/* Recent Posts with thumbnails & date */
.footer-posts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-post {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.footer-post__thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.footer-post__thumb:hover {
  transform: scale(1.05);
  border-color: var(--c-accent);
}

.footer-post__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.footer-post__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.footer-post__title {
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  margin: 0;
}

.footer-post__title-link {
  color: #ffffff;
  text-decoration: none;
  transition: color 180ms var(--ease-out);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.footer-post__title-link:hover {
  color: var(--c-accent);
}

.footer-post__date {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--c-accent);
  font-weight: 500;
}

.footer-post__date-icon {
  width: 14px;
  height: 14px;
  color: var(--c-accent);
  flex-shrink: 0;
}

/* Contact block in Col 3 */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0;
  margin: 0 0 1.35rem;
  list-style: none;
}

.footer-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
}

.footer-contact__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--c-accent);
}

.footer-link--contact {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}

.footer-link--contact:hover {
  color: #ffffff;
}

.footer-contact__text {
  color: rgba(255, 255, 255, 0.75);
}

/* Social icons matching glass-pill language */
.footer-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  text-decoration: none;
}

.footer-social__btn svg {
  width: 18px;
  height: 18px;
}

.footer-social__btn:hover {
  transform: translateY(-3px);
  background-color: rgba(127, 209, 193, 0.16);
  border-color: rgba(127, 209, 193, 0.5);
  color: var(--c-accent);
  box-shadow: 0 8px 20px -4px rgba(127, 209, 193, 0.3);
}

.footer-social__btn:active {
  transform: translateY(0);
}

/* ---------- BOTTOM BAR (Sitting cleanly above skyline illustration) ---------- */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom__copy {
  margin: 0;
}

.footer-bottom__links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.footer-bottom__link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}

.footer-bottom__link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.footer-bottom__sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.65rem;
}

/* ---------- Hospital Architectural Skyline Panorama (Edge to Edge at Very Bottom) ---------- */
.footer-skyline {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

.footer-skyline__img {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: auto;
  max-height: clamp(160px, 24vw, 340px);
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

/* ==========================================================================
   Footer — Tablet (up to 900px)
   ========================================================================== */
@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .footer-top__desc {
    max-width: 50ch;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}

/* ==========================================================================
   Footer — Mobile (up to 560px)
   ========================================================================== */
@media (max-width: 560px) {
  .site-footer {
    padding-top: 3rem;
  }

  .footer-top {
    gap: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }

  .footer-newsletter__field {
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
    padding: 0.75rem;
    gap: 0.625rem;
  }

  .footer-newsletter__input {
    padding: 0.25rem 0.5rem;
  }

  .footer-newsletter__btn {
    width: 100%;
    border-radius: 12px;
    padding: 0.75rem;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-bottom: 2.5rem;
  }

  .footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }
}

/* ==========================================================================
   ===== ABOUT PAGE HERO =====
   ========================================================================== */
.about-hero {
  position: relative;
  min-height: clamp(380px, 46vh, 480px);
  display: flex;
  align-items: flex-end;
  padding-top: clamp(8rem, 12vw, 10.5rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
  padding-inline: var(--gutter);
  overflow: hidden;
  color: #ffffff;
  font-family: var(--font-sans);
}

.about-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.about-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.035);
  filter: blur(3px) brightness(0.56) saturate(0.9);
}

.about-hero__veil {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to top,
      rgba(var(--c-veil), 0.94) 0%,
      rgba(var(--c-veil), 0.65) 30%,
      rgba(var(--c-veil), 0.25) 60%,
      rgba(var(--c-veil), 0.6) 100%
    ),
    radial-gradient(
      140% 100% at 50% 50%,
      transparent 35%,
      rgba(var(--c-veil), 0.65) 100%
    );
}

.about-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.75rem, 4vw, 4rem);
  flex-wrap: wrap;
}

/* Left Bottom: Breadcrumbs */
.about-hero__left {
  display: flex;
  align-items: center;
}

.about-breadcrumbs__list {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0.45rem 1rem;
  margin: 0;
  border-radius: var(--r-pill);
  background-color: var(--c-glass);
  border: 1px solid var(--c-glass-line);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  box-shadow: var(--sh-glass);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
}

.about-breadcrumbs__link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.about-breadcrumbs__link:hover {
  color: #ffffff;
}

.about-breadcrumbs__sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
}

.about-breadcrumbs__item[aria-current="page"] span {
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
}

/* Right Bottom: Title and Para */
.about-hero__right {
  max-width: 38rem;
  text-align: right;
}

.about-hero__title {
  margin: 0 0 0.65rem;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-wrap: balance;
}

.about-hero__accent {
  color: var(--c-accent, #7fd1c1);
  font-style: normal;
}

.about-hero__desc {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  margin: 0;
  font-weight: var(--fw-normal);
}

@media (max-width: 768px) {
  .about-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .about-hero__right {
    text-align: left;
    max-width: 100%;
  }
}

/* ==========================================================================
   ===== ABOUT PAGE: FOUNDING LEADERSHIP SECTION =====
   Full-width layout with a top-to-down centered half-spherical light
   blush & ice-slate gradient softly diffusing into pure white.
   ========================================================================== */
.founding {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image:
    radial-gradient(ellipse 110% 75% at 50% 0%, #fbeff3 0%, #f3f6fb 45%, #ffffff 85%);
  color: #0c1219;
  padding: clamp(5.5rem, 8.5vw, 8.5rem) var(--gutter);
  border-bottom: 1px solid rgba(22, 40, 60, 0.08);
  font-family: var(--font-sans);
}

.founding__inner {
  max-width: 88rem;
  margin-inline: auto;
}

/* ---------- Header / Full-Width Statement Headline ---------- */
.founding__header {
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
  width: 100%;
}

.founding__label {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #a83858;
  margin: 0 0 1.25rem;
}

.founding__headline {
  margin: 0;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #0a0d12;
  text-wrap: pretty;
}

/* Fancy Light Pink / Rose-Berry Gradient Effect */
.founding__serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #e46884 0%, #b8325a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  padding-right: 0.06em;
}

/* ---------- Lower Layout Grid ---------- */
.founding__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* ---------- Narrative Copy Column ---------- */
.founding__narrative {
  display: flex;
  flex-direction: column;
}

.founding__lead {
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  line-height: 1.65;
  color: #1a222e;
  font-weight: var(--fw-medium);
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

.founding__text {
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  line-height: 1.72;
  color: #4a5568;
  font-weight: var(--fw-normal);
  margin: 0 0 2.25rem;
  text-wrap: pretty;
}

/* ---------- Integrated Credential Lockup ---------- */
.founding__creds {
  display: flex;
  flex-direction: column;
  padding-block: 1.75rem;
  margin-bottom: 2.5rem;
  border-top: 1px solid rgba(22, 40, 60, 0.12);
  border-bottom: 1px solid rgba(22, 40, 60, 0.12);
}

.founding__doctor {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.founding__doctor-name {
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0a0d12;
}

.founding__doctor-degree {
  font-size: 0.875rem;
  color: #1e3a5f;
  font-weight: 600;
}

.founding__doctor-fellowship {
  font-size: 0.8125rem;
  color: #5d6b7e;
}

.founding__bottom-line {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(22, 40, 60, 0.1);
  font-size: 0.75rem;
  line-height: 1.55;
  color: #667386;
}

/* ---------- Action CTAs ---------- */
.founding__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.founding-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-nav);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.founding-btn svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.founding-btn:hover svg {
  transform: translateX(3px);
}

.founding-btn:active {
  transform: translateY(0);
}

.founding-btn--primary {
  background: linear-gradient(135deg, #16283c 0%, #0d1a29 100%);
  color: #ffffff;
  border: 1px solid rgba(22, 40, 60, 0.4);
  box-shadow: 0 10px 26px -6px rgba(22, 40, 60, 0.38);
}

.founding-btn--primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #1f3650 0%, #132335 100%);
  box-shadow: 0 14px 32px -6px rgba(22, 40, 60, 0.48);
  color: #ffffff;
}

.founding-btn--ghost {
  background-color: rgba(22, 40, 60, 0.05);
  color: #16283c;
  border: 1px solid rgba(22, 40, 60, 0.2);
}

.founding-btn--ghost:hover {
  transform: translateY(-2px);
  background-color: rgba(22, 40, 60, 0.1);
  border-color: rgba(22, 40, 60, 0.38);
  color: #0a1420;
}

/* ---------- Right Column: Sleek Minimal Architectural Frame ---------- */
.founding__portrait-wrap {
  position: relative;
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
}

.founding__portrait-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #edf3f8;
  border: 1px solid rgba(22, 40, 60, 0.14);
  box-shadow:
    0 32px 70px -20px rgba(16, 28, 42, 0.14),
    0 8px 24px -8px rgba(16, 28, 42, 0.05);
  aspect-ratio: 3.8 / 4.95;
  transition:
    box-shadow 450ms var(--ease-out),
    border-color 450ms var(--ease-out);
}

/* Sleek floating hairline inset border */
.founding__portrait-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  z-index: 2;
  pointer-events: none;
  transition:
    inset 450ms var(--ease-out),
    border-color 450ms var(--ease-out);
}

.founding__portrait-frame:hover {
  border-color: rgba(22, 40, 60, 0.3);
  box-shadow:
    0 40px 85px -20px rgba(22, 40, 60, 0.22),
    0 12px 28px -8px rgba(22, 40, 60, 0.08);
}

.founding__portrait-frame:hover::before {
  inset: 14px;
  border-color: rgba(255, 255, 255, 0.95);
}

.founding__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  transform: scale(1.02);
  transition: transform 650ms var(--ease-out);
}

.founding__portrait-frame:hover .founding__portrait-img {
  transform: scale(1.05);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .founding__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.5rem;
  }

  .founding__portrait-wrap {
    order: -1;
    max-width: 24rem;
  }

  .founding__headline {
    font-size: clamp(2.25rem, 6vw, 3.25rem);
  }
}

/* ==========================================================================
   ===== HIGHLIGHTS SECTION =====
   Editorial 2-column highlight grid with dual-index markers and captions.
   ========================================================================== */
.highlights {
  position: relative;
  z-index: 1;
  padding: clamp(5rem, 8vw, 8rem) var(--gutter);
  background-color: #ffffff;
  color: #0c1219;
  font-family: var(--font-sans);
  border-top: 1px solid rgba(20, 24, 30, 0.08);
}

.highlights__inner {
  max-width: 88rem;
  margin-inline: auto;
}

/* ---------- Top Headline ---------- */
.highlights__header {
  margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
  max-width: 58rem;
}

.highlights__title {
  margin: 0;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #0a0d12;
  text-wrap: pretty;
}

/* ---------- Grid ---------- */
.highlights__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem);
  align-items: start;
}

.highlights__item {
  display: flex;
  flex-direction: column;
}

/* ---------- Meta Row (Hairline border + Dual-Numbering) ---------- */
.highlights__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  border-bottom: 1.5px solid #0a0e14;
  margin-bottom: 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #0a0e14;
}

.highlights__meta-left {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.highlights__marker {
  display: inline-flex;
  align-items: center;
  color: #0a0e14;
}

.highlights__index {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.highlights__index--right {
  margin-left: auto;
}

/* ---------- Card Visuals ---------- */
.highlights__card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}

/* Card 1: Media with New Badge */
.highlights__card--media {
  background-color: #e5edf0;
}

.highlights__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 400ms var(--ease-out);
}

.highlights__card--media:hover .highlights__img {
  transform: scale(1.025);
}

.highlights__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.2rem 0.55rem;
  background-color: #f5c400;
  color: #0c1219;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  border-radius: 2px;
  line-height: 1.2;
}

/* Card 2: photograph only — no scrim, no wordmark, nothing over the top.
   The pale ground is only what shows while the image is still loading. */
.highlights__card--solid {
  background-color: #e5edf0;
}

.highlights__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out);
}

/* the same 1.025 lift the card beside it gives its own photograph */
.highlights__card--solid:hover .highlights__bg {
  transform: scale(1.025);
}

/* ---------- Caption Row ---------- */
.highlights__caption {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #0a0e14;
}

.highlights__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #0a0e14;
  flex-shrink: 0;
  margin-top: 0.15rem;
  transition: transform 300ms var(--ease-out);
}

.highlights__item:hover .highlights__arrow {
  transform: translateX(4px);
}

.highlights__arrow-icon {
  width: 16px;
  height: 16px;
}

.highlights__text {
  margin: 0;
  color: #475467;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.highlights__label {
  font-weight: 700;
  color: #0a0e14;
  letter-spacing: -0.01em;
}

.highlights__dot {
  display: inline-block;
  margin-inline: 0.35rem;
  color: #98a2b3;
  font-size: 0.75rem;
  vertical-align: middle;
}

.highlights__desc {
  color: #475467;
}

/* ---------- Responsive ---------- */
@media (max-width: 840px) {
  .highlights__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
  }
}

/* ==========================================================================
   ===== WHY CHOOSE US SECTION =====
   Asymmetrical 3-column editorial grid matching reference layout.
   ========================================================================== */
.why-choose {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(6rem, 9vw, 9.5rem) var(--gutter);
  background-color: #f1f3f5;
  background-image:
    radial-gradient(circle 520px at 94% 38%, rgba(245, 140, 115, 0.45) 0%, rgba(245, 140, 115, 0.18) 35%, rgba(241, 243, 245, 0) 70%);
  color: #0c1219;
  font-family: var(--font-sans);
  border-top: 1px solid rgba(20, 24, 30, 0.06);
}

.why-choose__inner {
  max-width: 88rem;
  margin-inline: auto;
}

.why-choose__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: clamp(1.75rem, 2.5vw, 2.5rem);
  align-items: stretch;
}

/* Row 1, Col 1: Eyebrow */
.why-choose__eyebrow {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: start;
}

.why-choose__marker {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #e54d38;
  border-radius: 1px;
}

.why-choose__label {
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e54d38;
}

/* Row 1, Col 2 & 3: Headline */
.why-choose__header {
  grid-column: 2 / span 2;
  grid-row: 1;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  align-self: start;
}

.why-choose__title {
  margin: 0;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.038em;
  color: #0a0d12;
  text-wrap: pretty;
}

/* Row 2, Col 1: Narrative & Bold Statement */
.why-choose__narrative {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-right: clamp(1rem, 2vw, 2.5rem);
  align-self: start;
}

.why-choose__lead {
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height: 1.62;
  color: #334155;
  margin: 0;
  text-wrap: pretty;
}

.why-choose__statement {
  font-size: clamp(1.125rem, 1.35vw, 1.35rem);
  line-height: 1.45;
  font-weight: 700;
  color: #0a0d12;
  margin: 0;
  text-wrap: pretty;
}

/* 4 Minimal Pure White Cards */
.why-card {
  position: relative;
  background-color: #ffffff;
  border: none;
  border-radius: 0;
  padding: clamp(2.5rem, 3.5vw, 3.5rem) clamp(2rem, 2.8vw, 2.8rem);
  min-height: clamp(440px, 48vh, 500px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition:
    transform 350ms var(--ease-out),
    box-shadow 350ms var(--ease-out);
}

.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -12px rgba(16, 32, 45, 0.08);
}

.why-card--1 {
  grid-column: 2;
  grid-row: 2;
}

.why-card--2 {
  grid-column: 3;
  grid-row: 2;
}

.why-card--3 {
  grid-column: 1;
  grid-row: 3;
}

.why-card--4 {
  grid-column: 2;
  grid-row: 3;
}

/* Card Elements */
.why-card__icon-wrap {
  width: 72px;
  height: 54px;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
}

.why-card__icon {
  width: 100%;
  height: 100%;
  display: block;
}

.why-card__title {
  margin: 0;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(1.5rem, 2.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #0a0d12;
  margin-bottom: auto;
}

.why-card__body {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
}

.why-card__tagline {
  margin: 0 0 0.65rem;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: #e54d38;
  line-height: 1.45;
}

.why-card__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #475467;
  text-wrap: pretty;
}

/* Compact editorial accordion used by the expanded Why Choose content. */
.why-choose {
  background:
    radial-gradient(circle 560px at 95% 12%, rgba(61, 124, 112, 0.14), transparent 72%),
    #f6f7f7;
}

.why-choose__grid {
  grid-template-columns: minmax(16rem, 0.72fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  align-items: start;
}

.why-choose__eyebrow {
  grid-column: 1 / -1;
  grid-row: 1;
  position: static;
}

.why-choose__marker {
  background-color: #3d7c70;
}

.why-choose__label,
.why-card__tagline {
  color: #2f7065;
}

.why-choose__header {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-bottom: 0.5rem;
}

.why-choose__title {
  max-width: none;
  width: 100%;
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  line-height: 1.04;
}

.why-choose__narrative {
  grid-column: 1;
  grid-row: 3 / span 4;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem 1.75rem 0;
  border-top: 1px solid rgba(15, 35, 32, 0.16);
}

.why-choose__lead {
  font-size: 0.96rem;
  line-height: 1.72;
  color: #4a5b59;
}

.why-choose__statement {
  padding-left: 1rem;
  border-left: 3px solid #3d7c70;
  font-size: 1rem;
  line-height: 1.6;
}

.why-card,
.why-card--1,
.why-card--2,
.why-card--3,
.why-card--4 {
  grid-column: auto;
  grid-row: auto;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(22, 49, 45, 0.11);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 36px -30px rgba(16, 45, 40, 0.45);
  overflow: hidden;
}

.why-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -28px rgba(16, 45, 40, 0.34);
}

.why-card__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  min-height: 8.25rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
}

.why-card__summary::-webkit-details-marker {
  display: none;
}

.why-card__number {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: #e8f1ef;
  color: #2f7065;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.why-card__summary-copy {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.why-card__title {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.25;
}

.why-card__tagline {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

.why-card__toggle {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid rgba(47, 112, 101, 0.25);
  border-radius: 50%;
}

.why-card__toggle::before,
.why-card__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 1px;
  background: #2f7065;
  transform: translate(-50%, -50%);
  transition: transform 200ms ease;
}

.why-card__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.why-card[open] .why-card__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.why-card__body {
  margin: 0;
  padding: 0 1.5rem 1.6rem 4.85rem;
  border-top: 1px solid rgba(22, 49, 45, 0.08);
}

.why-card__desc {
  padding-top: 1.35rem;
  font-size: 0.9rem;
  line-height: 1.72;
}

.why-card__paragraph {
  margin: 0;
  color: #475467;
}

.why-card__paragraph + .why-card__paragraph,
.why-card__list + .why-card__paragraph,
.why-card__paragraph + .why-card__list {
  margin-top: 1.15rem;
}

.why-card__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.why-card__list li {
  position: relative;
  padding: 0.65rem 0.75rem 0.65rem 1.65rem;
  border-radius: 0.55rem;
  background: #f1f6f5;
  color: #344b47;
  font-size: 0.78rem;
  line-height: 1.45;
}

.why-card__list li::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0.75rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #3d7c70;
}

@media (max-width: 1080px) {
  .why-choose__eyebrow {
    position: static;
  }

  .why-choose__header,
  .why-choose__narrative {
    grid-column: 1 / span 2;
    grid-row: auto;
  }

  .why-choose__narrative {
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  .why-choose__header,
  .why-choose__narrative {
    grid-column: 1;
  }

  .why-card__summary {
    min-height: 0;
    padding: 1.25rem;
  }

  .why-card__body {
    padding: 0 1.25rem 1.4rem;
  }

  .why-card__list {
    grid-template-columns: 1fr;
  }
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
  .why-choose__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 2rem;
  }

  .why-choose__eyebrow {
    grid-column: 1 / span 2;
    grid-row: auto;
    margin-bottom: 1rem;
  }

  .why-choose__header {
    grid-column: 1 / span 2;
    grid-row: auto;
    margin-bottom: 1.5rem;
  }

  .why-choose__narrative {
    grid-column: 1 / span 2;
    grid-row: auto;
    padding-right: 0;
    margin-bottom: 1.5rem;
  }

  .why-card {
    grid-column: auto;
    grid-row: auto;
    min-height: 380px;
  }
}

@media (max-width: 640px) {
  .why-choose__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* ==========================================================================
   ===== SERVICE INTRO SECTION (50/50 SPLIT-SCREEN) =====
   Editorial split-screen layout: stacked serif headline on the left,
   full-bleed edge-to-edge photography on the right.
   ========================================================================== */
.svc-intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(560px, 72vh, 760px);
  background-color: #ffffff;
  color: #0c1219;
  font-family: var(--font-sans);
  border-bottom: 1px solid rgba(20, 24, 30, 0.08);
}

/* Left Column */
.svc-intro__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(4rem, 6.5vw, 7.5rem) clamp(2.5rem, 5.5vw, 6rem);
  max-width: 46rem;
  margin-left: auto;
  width: 100%;
}

.svc-intro__title {
  margin: 0 0 1.75rem;
  font-family: var(--font-serif), Georgia, serif;
  font-size: clamp(2.75rem, 5.2vw, 4.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #0d1520;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-wrap: balance;
}

.svc-intro__title span {
  display: block;
}

.svc-intro__desc {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.68;
  color: #4a5568;
  margin: 0 0 2.5rem;
  max-width: 32rem;
  text-wrap: pretty;
}

/* Dual Buttons */
.svc-intro__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.85rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.svc-btn--solid {
  background-color: #0c1825;
  color: #ffffff;
  border: 1px solid #0c1825;
  box-shadow: 0 8px 20px -4px rgba(12, 24, 37, 0.25);
}

.svc-btn--solid:hover {
  transform: translateY(-2px);
  background-color: #142436;
  border-color: #142436;
  box-shadow: 0 12px 28px -6px rgba(12, 24, 37, 0.35);
  color: #ffffff;
}

.svc-btn--outline {
  background-color: transparent;
  color: #0c1825;
  border: 1px solid #c9d2dc;
}

.svc-btn--outline:hover {
  transform: translateY(-2px);
  background-color: rgba(12, 24, 37, 0.04);
  border-color: #0c1825;
  color: #0c1825;
}

/* Right Column: Full-Bleed Edge-to-Edge Media */
.svc-intro__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #e5ebf0;
}

.svc-intro__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Responsive */
@media (max-width: 960px) {
  .svc-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-intro__content {
    max-width: 100%;
    margin-left: 0;
    padding: clamp(3.5rem, 7vw, 5rem) var(--gutter);
  }

  .svc-intro__media {
    min-height: clamp(340px, 50vh, 480px);
    height: clamp(340px, 50vh, 480px);
  }
}

/* ==========================================================================
   ===== PRINCIPLES SECTION =====
   Minimal soft-canvas 3-column principles layout with dark squircle icons.
   ========================================================================== */
.principles {
  position: relative;
  z-index: 1;
  padding: clamp(5rem, 8vw, 8.5rem) var(--gutter);
  background-color: #f6f7f9;
  color: #0c1219;
  font-family: var(--font-sans);
}

.principles__inner {
  max-width: 88rem;
  margin-inline: auto;
}

/* Header */
.principles__header {
  max-width: 54rem;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.principles__badge {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  background-color: #e8ebf0;
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.principles__title {
  margin: 0;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: #0a0e14;
  text-wrap: pretty;
}

.principles__title-muted {
  color: #788596;
  font-weight: 600;
}

/* 3-Column Grid */
.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  align-items: stretch;
}

.principle-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: clamp(2.25rem, 3.2vw, 3.25rem) clamp(1.75rem, 2.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px -6px rgba(16, 24, 40, 0.04);
  transition:
    transform 350ms var(--ease-out),
    box-shadow 350ms var(--ease-out);
}

.principle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -8px rgba(16, 24, 40, 0.08);
}

/* Dark Squircle Icon */
.principle-card__icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #0a0e14;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.principle-card__icon-badge svg {
  width: 22px;
  height: 22px;
}

.principle-card__title {
  margin: 0 0 0.85rem;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0a0e14;
}

.principle-card__desc {
  margin: 0;
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  line-height: 1.65;
  color: #5d6b7e;
  text-wrap: pretty;
}

/* ==========================================================================
   Card Height Uniformity & Ellipsis / Expansion System
   ========================================================================== */
.card-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.card-clamp-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  transition: all 300ms ease;
}

[data-expandable-card].is-expanded .card-clamp-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.card-expand-btn {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f766e;
  cursor: pointer;
  line-height: 1.2;
  transition: color 200ms ease;
}

.card-expand-btn.is-visible {
  display: inline-flex;
}

.card-expand-btn:hover {
  color: #115e59;
  text-decoration: underline;
}

.card-expand-btn svg {
  width: 12px;
  height: 12px;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-expandable-card].is-expanded .card-expand-btn svg {
  transform: rotate(180deg);
}

.value-card--accent .card-expand-btn {
  color: #a7f3d0;
}

.value-card--accent .card-expand-btn:hover {
  color: #ffffff;
}

.impact-card--featured .card-expand-btn {
  color: #38bdf8;
}

.impact-card--featured .card-expand-btn:hover {
  color: #7dd3fc;
}

/* Ensure Principle Cards maintain fixed equal height & neat alignment */
.principles__grid {
  align-items: stretch;
}

.principle-card {
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.principle-card .card-text-wrap {
  flex-grow: 1;
}

/* Ensure Values Cards maintain fixed equal height */
.values-sec__grid {
  align-items: stretch;
}

.value-card {
  height: 100%;
  min-height: 270px;
}

.value-card .card-text-wrap {
  flex-grow: 1;
  margin-bottom: 1rem;
}

/* Ensure Impact Cards maintain fixed equal height */
.impact-cards {
  align-items: stretch;
}

.impact-card {
  height: 100%;
  min-height: 380px;
}

.impact-card__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.impact-card__body .card-text-wrap {
  flex-grow: 1;
}

/* Responsive */
@media (max-width: 960px) {
  .principles__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* ==========================================================================
   ===== OUR VALUES SECTION (2x2 GRID WITH ACCENT HERO CARD) =====
   Matching reference layout: left stacked huge typography + 2x2 right card grid
   with top-left card in rich brand teal accent.
   ========================================================================== */
.values-sec {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden; /* the oversized, blurred image is clipped to the section */
  padding: clamp(5.5rem, 8.5vw, 9rem) var(--gutter);
  background-color: #ffffff;
  color: #0c1219;
  font-family: var(--font-sans);
  border-top: 1px solid rgba(20, 24, 30, 0.06);
}

/*  THE OVERSIZE IS NOT DECORATION. A blur samples pixels from OUTSIDE the
    element it is applied to, and outside this element there is nothing — so
    an image blurred at its own size fades to transparent for ~2x the blur
    radius along every edge, leaving four soft white bands around the
    section. Bleeding it 3rem past all four sides and letting the section's
    overflow do the clipping puts those bands off-screen, which is the only
    way to get a blurred backdrop with clean edges.

    OPACITY AND BLUR ARE SET AGAINST MEASURED CONTRAST, not by eye — but the
    thing being protected has changed, which is what lets the picture come up.

    The cards below are frosted glass now, and a backdrop-filter blurs
    whatever is behind it. The blur that used to have to live on the image
    itself has moved into the cards, so the photograph only needs enough of
    its own to stay a ground rather than a subject: 3px, where it was 16.

    So the image runs at full opacity with 2px of blur — just enough to keep
    it a ground rather than a subject. What still sits directly on it is the
    left column, and that is now handled entirely by the scrim below rather
    than by fading the picture out. */
.values-sec__bg {
  position: absolute;
  z-index: -2;
  top: -3rem;
  right: -3rem;
  bottom: -3rem;
  left: -3rem;
  width: calc(100% + 6rem);
  height: calc(100% + 6rem);
  /* the global `img { max-width: 100% }` reset caps this at the section's
     own width and silently kills the right-hand bleed — measured 1425px
     where the rule asks for 1521 — so the deliberately oversized one has to
     opt out of it */
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: blur(2px) saturate(0.98);
  pointer-events: none;
}

/*  A scrim on top of it, weighted to the LEFT — and the stops are placed off
    the measured layout, not guessed. The left column runs to 38.7% of the
    section and the cards begin at 46.2%, so the scrim holds its strength to
    40%, drops away through the empty gap between the two, and is at its
    thinnest under the cards, which now do their own work with a
    backdrop-filter.

    THE 0.66 AT 40% IS A FLOOR, NOT A TASTE. The paragraph is #38424f, and
    over the darkest thing a photograph can put behind it — pure black — the
    scrim has to reach 0.62 before that clears 4.5:1. 0.66 leaves a little in
    hand. Past the cards it drops to 0.05, which is effectively nothing: the
    right-hand two thirds of the section show the picture as shot, because
    the cards there do their own work with a backdrop-filter. */
.values-sec__scrim {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.66) 40%,
    rgba(255, 255, 255, 0.14) 54%,
    rgba(255, 255, 255, 0.05) 100%
  );
}

/* on one column the type sits over the whole width, so the scrim evens out */
@media (max-width: 900px) {
  .values-sec__scrim {
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.68) 100%
    );
  }
}

.values-sec__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2.5rem, 5.5vw, 6.5rem);
  align-items: center;
  max-width: 88rem;
  margin-inline: auto;
}

/* Left Column */
.values-sec__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 32rem;
}

.values-sec__tag {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  /* same floor as the paragraph below it — at 13px this label is the smallest
     type in the column and had the least contrast to give away */
  color: #2f3844;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}

.values-sec__title {
  margin: 0 0 clamp(1.5rem, 2.5vw, 2rem);
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(3rem, 5.5vw, 4.75rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.038em;
  color: #0a0e14;
}

.values-sec__desc {
  margin: 0;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.68;
  /*  Was #5d6b7e, a grey chosen for a flat white ground. The photograph now
      runs at full opacity behind a scrim of only 0.66, which puts the floor
      under this paragraph at luminance 169 — and the old grey reads 3.3:1
      there, well under AA.

      Darkening the TEXT is the right lever, not thickening the scrim: white
      paint over the picture is the thing that was making the section look
      washed out. This is the same hue held dark enough to clear 4.5:1 against
      the worst a photograph can do, which leaves the scrim free to stay thin. */
  color: #2f3844;
  text-wrap: pretty;
}

/* Right Column: 2x2 Grid */
.values-sec__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 1.8vw, 1.75rem);
  align-items: stretch;
}

/*  GLASS, over the photograph.

    The blur belongs here rather than on the image: a backdrop-filter blurs
    only what is behind THIS box, so the picture can stay sharp in the open
    and still be soft enough under the text to read against. That is the whole
    trade — one blur, moved from the ground to the panels that need it.

    The 1px inset highlight along the top is what stops a translucent panel
    reading as a smudge: real glass catches light on its top edge, and without
    it the card has no edge at all against a busy ground. */
.value-card {
  /* 0.66, not 0.55. Over a dark passage of the photograph, 0.55 composites
     to a mid grey and takes the body copy down to 1.6:1 — the panel looked
     like glass and could not be read. 0.66 is still visibly translucent and
     the picture still moves underneath it. */
  background-color: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-radius: 16px;
  padding: clamp(1.75rem, 2.2vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 18px 40px -26px rgba(16, 24, 40, 0.35);
  transition:
    transform 350ms var(--ease-out),
    background-color 350ms var(--ease-out),
    box-shadow 350ms var(--ease-out);
}

.value-card:hover {
  transform: translateY(-3px);
  background-color: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 24px 48px -24px rgba(16, 24, 40, 0.4);
}

/*  Browsers without backdrop-filter get an opaque panel instead. Without this
    they get a 55%-transparent white box over a photograph, which is not a
    degraded version of glass — it is unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .value-card {
    background-color: rgba(255, 255, 255, 0.93);
  }

  .value-card--accent {
    background-color: #135c4f;
  }
}

/*  Top-Left Accent Card (Theme Brand Emerald Teal), as tinted glass.

    THE TEAL IS DEEPER THAN THE SOLID CARD'S WAS, and that is a consequence of
    the transparency rather than a restyle. This card holds white text, so the
    number that matters is the composite when the BRIGHTEST thing a photograph
    can put behind it — a blown-out window — shows through. At the old
    #1f8a78/#115d51 let down to 0.78 that lands on 3.8:1, under AA. Dropping
    the base to a deeper teal buys the contrast back without having to close
    the glass up to near-opaque, which would have defeated the point. */
.value-card--accent {
  background-color: rgba(15, 85, 73, 0.82);
  background-image: linear-gradient(135deg, rgba(31, 138, 120, 0.38) 0%, rgba(13, 74, 65, 0.55) 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 18px 40px -20px rgba(17, 93, 81, 0.55);
}

.value-card--accent:hover {
  background-color: rgba(15, 85, 73, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 24px 48px -20px rgba(17, 93, 81, 0.6);
}

/* Card Elements */
.value-card__icon-wrap {
  width: 40px;
  height: 40px;
  margin-bottom: 1.25rem;
  color: #0a0e14;
  display: flex;
  align-items: center;
}

.value-card--accent .value-card__icon-wrap {
  color: #ffffff;
}

.value-card__icon-wrap svg {
  width: 32px;
  height: 32px;
}

.value-card__text {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  /* the same darkening the left column needed, and for the same reason: this
     used to sit on flat #f6f7f9 and now sits on glass with a photograph
     behind it. The accent card overrides this to white below. */
  color: #2f3844;
  text-wrap: pretty;
}

.value-card--accent .value-card__text {
  color: rgba(255, 255, 255, 0.92);
}

.value-card__footer {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(26, 117, 102, 0.35);
}

.value-card--accent .value-card__footer {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.value-card__title {
  margin: 0;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0a0e14;
}

.value-card--accent .value-card__title {
  color: #ffffff;
}

/* Responsive */
@media (max-width: 960px) {
  .values-sec__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .values-sec__left {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .values-sec__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* ==========================================================================
   ===== RECOVERY IMPACT SECTION =====
   Minimal 4-card evidence row with category filter tabs and featured elevated card.
   ========================================================================== */
.impact-sec {
  position: relative;
  z-index: 1;
  padding: clamp(5.5rem, 8.5vw, 9rem) var(--gutter);
  background-color: #fafbfc;
  color: #0c1219;
  font-family: var(--font-sans);
  border-top: 1px solid rgba(20, 24, 30, 0.06);
}

.impact-sec__inner {
  max-width: 88rem;
  margin-inline: auto;
}

/* Centered Header */
.impact-sec__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.impact-sec__badge {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  background-color: #e8ecf0;
  color: #5d6b7e;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.impact-sec__title {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(2.25rem, 4.2vw, 3.65rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #0a0e14;
  text-wrap: balance;
}

.impact-sec__title-muted {
  color: #7b8a9b;
  font-weight: 600;
}

/* Category Filter Tabs (Pill Capsule) */
.impact-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  background-color: #edf0f3;
  border: 1px solid rgba(20, 24, 30, 0.05);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.impact-tabs::-webkit-scrollbar {
  display: none;
}

.impact-tab {
  padding: 0.5rem 1.15rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: #5d6b7e;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.impact-tab:hover {
  color: #0a0e14;
}

.impact-tab.is-active {
  color: #ffffff;
  background-color: #0e1622;
  font-weight: var(--fw-semibold);
  box-shadow: 0 2px 8px rgba(14, 22, 34, 0.2);
}

/* Multi-Panel Container */
.impact-panels {
  position: relative;
  width: 100%;
}

.impact-panel {
  display: none;
  width: 100%;
}

.impact-panel.is-active {
  display: block;
}

/* 4-Card Grid Row */
.impact-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 1.8vw, 1.75rem);
  align-items: stretch;
}

.impact-card {
  background-color: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(20, 24, 30, 0.05);
  padding: clamp(2rem, 2.5vw, 2.75rem) clamp(1.5rem, 2vw, 2rem);
  min-height: clamp(380px, 44vh, 440px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px -6px rgba(16, 24, 40, 0.03);
  transition:
    transform 350ms var(--ease-out),
    box-shadow 350ms var(--ease-out),
    opacity 350ms var(--ease-out);
}

.impact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -8px rgba(16, 24, 40, 0.08);
}

/* Featured Card 2 (Elevated Gradient Palette) */
.impact-card--featured {
  background: linear-gradient(175deg, #182838 0%, #0d1622 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 36px -10px rgba(13, 23, 35, 0.35);
}

.impact-card--featured:hover {
  box-shadow: 0 22px 48px -10px rgba(13, 23, 35, 0.45);
}

/* Card Top Tag */
.impact-card__top {
  margin-bottom: 2rem;
}

.impact-card__tag {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: #1a7566;
}

.impact-card--featured .impact-card__tag {
  color: #7fd1c1;
}

/* Card Body */
.impact-card__body {
  margin-bottom: auto;
}

.impact-card__title {
  margin: 0 0 1rem;
  font-family: "Plus Jakarta Sans", var(--font-sans), sans-serif;
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: #0a0e14;
}

.impact-card--featured .impact-card__title {
  color: #ffffff;
}

.impact-card__desc {
  margin: 0;
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  line-height: 1.65;
  color: #5d6b7e;
  text-wrap: pretty;
}

.impact-card--featured .impact-card__desc {
  color: rgba(255, 255, 255, 0.85);
}

/* Card Bottom Citation */
.impact-card__citation {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 1.5rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #8a96a4;
}

.impact-card--featured .impact-card__citation {
  color: rgba(255, 255, 255, 0.55);
}

.impact-card__citation-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: currentColor;
}

/* Responsive */
@media (max-width: 1100px) {
  .impact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .impact-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .impact-tabs {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   ===== FOOTER SECTION =====
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  background-color: #080c14;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(127, 209, 193, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 700px 450px at 85% 20%, rgba(26, 117, 102, 0.07) 0%, transparent 70%),
    linear-gradient(180deg, #090e17 0%, #06080d 100%);
  color: #ffffff;
  font-family: var(--font-sans);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

.site-footer__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.site-footer__glow--left {
  top: 0;
  left: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(127, 209, 193, 0.12) 0%, transparent 70%);
}

.site-footer__glow--right {
  top: 10%;
  right: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(26, 117, 102, 0.15) 0%, transparent 70%);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- TOP BAND (2-Column Split) ---------- */
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-top__brand {
  max-width: 32rem;
}

.footer-logo {
  display: inline-block;
  line-height: 0;
  margin-bottom: 1.25rem;
}

.footer-logo__img {
  height: clamp(2.2rem, 3.2vw, 2.75rem);
  width: auto;
  max-width: 100%;
}

.footer-top__desc {
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.footer-newsletter__label {
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 0.85rem;
}

.footer-newsletter__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}

.footer-newsletter__field:focus-within {
  border-color: rgba(127, 209, 193, 0.6);
  background: rgba(255, 255, 255, 0.09);
}

.footer-newsletter__input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
}

.footer-newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer-newsletter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-dark);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), filter 180ms var(--ease-out);
}

.footer-newsletter__btn svg {
  width: 14px;
  height: 14px;
  transition: transform 180ms var(--ease-out);
}

.footer-newsletter__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(127, 209, 193, 0.4);
  filter: brightness(1.06);
}

.footer-newsletter__btn:hover svg {
  transform: translateX(2px);
}

.footer-newsletter__btn:active {
  transform: translateY(0);
}

.footer-newsletter__sub {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.625rem 0 0 0.5rem;
}

/* ---------- TABS & DATA ROW (3 Columns) ---------- */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.3fr;
  gap: clamp(2rem, 3.5vw, 4rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col__title {
  position: relative;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 1.35rem;
  padding-bottom: 0.5rem;
}

.footer-col__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--c-accent);
}

/* Quick Links with minus dash */
.footer-dash-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-dash-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.footer-dash-mark {
  color: var(--c-accent);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 180ms var(--ease-out);
}

.footer-dash-link:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.footer-dash-link:hover .footer-dash-mark {
  color: var(--c-surface);
  transform: scale(1.2);
}

/* Recent Posts with thumbnails & date */
.footer-posts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-post {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.footer-post__thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.footer-post__thumb:hover {
  transform: scale(1.05);
  border-color: var(--c-accent);
}

.footer-post__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.footer-post__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.footer-post__title {
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  margin: 0;
}

.footer-post__title-link {
  color: #ffffff;
  text-decoration: none;
  transition: color 180ms var(--ease-out);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.footer-post__title-link:hover {
  color: var(--c-accent);
}

.footer-post__date {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--c-accent);
  font-weight: 500;
}

.footer-post__date-icon {
  width: 14px;
  height: 14px;
  color: var(--c-accent);
  flex-shrink: 0;
}

/* Contact block in Col 3 */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0;
  margin: 0 0 1.35rem;
  list-style: none;
}

.footer-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
}

.footer-contact__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--c-accent);
}

.footer-link--contact {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}

.footer-link--contact:hover {
  color: #ffffff;
}

.footer-contact__text {
  color: rgba(255, 255, 255, 0.75);
}

/* Social icons matching glass-pill language */
.footer-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
  text-decoration: none;
}

.footer-social__btn svg {
  width: 18px;
  height: 18px;
}

.footer-social__btn:hover {
  transform: translateY(-3px);
  background-color: rgba(127, 209, 193, 0.16);
  border-color: rgba(127, 209, 193, 0.5);
  color: var(--c-accent);
  box-shadow: 0 8px 20px -4px rgba(127, 209, 193, 0.3);
}

.footer-social__btn:active {
  transform: translateY(0);
}

/* ---------- BOTTOM BAR (Sitting cleanly above skyline illustration) ---------- */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom__copy {
  margin: 0;
}

.footer-bottom__links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.footer-bottom__link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}

.footer-bottom__link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.footer-bottom__sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.65rem;
}

/* ---------- Hospital Architectural Skyline Panorama (Edge to Edge at Very Bottom) ---------- */
.footer-skyline {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

.footer-skyline__img {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: auto;
  max-height: clamp(160px, 24vw, 340px);
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

/* ==========================================================================
   Footer — Tablet (up to 900px)
   ========================================================================== */
@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .footer-top__desc {
    max-width: 50ch;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}

/* ==========================================================================
   Footer — Mobile (up to 560px)
   ========================================================================== */
@media (max-width: 560px) {
  .site-footer {
    padding-top: 3rem;
  }

  .footer-top {
    gap: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }

  .footer-newsletter__field {
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
    padding: 0.75rem;
    gap: 0.625rem;
  }

  .footer-newsletter__input {
    padding: 0.25rem 0.5rem;
  }

  .footer-newsletter__btn {
    width: 100%;
    border-radius: 12px;
    padding: 0.75rem;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-bottom: 2.5rem;
  }

  .footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }
}


/* ==========================================================================
   ===== ACL PAGE — SECTION GROUNDS =====
   The ACL page ran deep-navy hero then four flat white/grey sections. This
   tints those four, using the same palette tokens as the home page so the
   two pages read as one site.

   Background-image ONLY — every rule here is additive over the existing
   background-color, so nothing in these sections' layout, spacing or type
   is touched. The flat colours stay as the fallback underneath.

   Each section gets a DIFFERENT pattern so the page does not read as one
   long wash: a diagonal ramp, a corner mesh, a top spotlight, then a
   spotlight plus a dot texture. Alphas stay at 0.05-0.14 — high enough to
   see, far too low to move the text contrast on #0c1219.
   ========================================================================== */

/* 1 — diagonal ramp: cool at the top-left, warm at the bottom-right */
.svc-intro {
  background-image: linear-gradient(
    148deg,
    rgba(var(--tint-sage), 0.17) 0%,
    rgba(var(--tint-sage), 0.07) 26%,
    rgba(255, 255, 255, 0) 52%,
    rgba(var(--tint-sand), 0.09) 78%,
    rgba(var(--tint-sand), 0.18) 100%
  );
}

/* 2 — corner mesh: two blooms on opposite corners, nothing in the middle */
.principles {
  background-image:
    radial-gradient(54% 46% at 4% 2%, rgba(var(--tint-navy), 0.20) 0%, rgba(var(--tint-navy), 0) 62%),
    radial-gradient(50% 44% at 98% 96%, rgba(var(--tint-sage), 0.19) 0%, rgba(var(--tint-sage), 0) 64%);
}

/* 3 — top spotlight: a wide clay bloom overhead, fading to a warm floor */
.values-sec {
  background-image:
    radial-gradient(70% 52% at 50% -12%, rgba(var(--tint-clay), 0.18) 0%, rgba(var(--tint-clay), 0) 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(var(--tint-sand), 0.11) 100%);
}

/* 4 — spotlight plus texture: teal overhead, sand in the corner, and a fine
   dot grid so this one has a surface as well as a wash */
.impact-sec {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(var(--tint-navy), 0.07) 1px, transparent 1.4px),
    radial-gradient(64% 48% at 50% -8%, rgba(26, 117, 102, 0.17) 0%, rgba(26, 117, 102, 0) 64%),
    radial-gradient(52% 46% at 4% 100%, rgba(var(--tint-sand), 0.17) 0%, rgba(var(--tint-sand), 0) 62%);
  background-size: 22px 22px, auto, auto;
}


/* ==========================================================================
   ===== DOCTOR CTA (ACL PAGE) =====
   The closing block on the ACL page.

   NO PANEL, NO CARD, NO BOX. The previous version was a dark panel with a
   white card inside it and a row of circled ticks — box inside box inside
   box, and the heaviest thing on the page. This is the opposite: the section
   IS the ground, and the portrait dissolves into it.

   That works because doctor.jpg is shot on a near-white seamless (#fbfbfb
   sampled at three corners). The section ground is set to that same value,
   so the photo has no edge of its own — a mask fades its lower third out and
   the figure simply emerges from the page. Change --dcta-ground and the
   photo will start to show as a rectangle.

   The only ornament is one oversized hairline ring behind the portrait,
   cropped by the section. Credentials are hairline-separated text rows: no
   icons, no bullets, no discs.
   ========================================================================== */
.dcta {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 7rem) var(--gutter) 0;
  font-family: var(--font-sans);
  color: var(--c-fg);

  /* the ground is lifted straight from the home page testimonials band:
     same base, same two blooms, same grain below */
  --dcta-ground: #0a0b0e;
  /* the arch fill. It MUST stay at the photo's own background value
     (#fbfbfb, sampled from three corners of doctor.jpg) — that match is what
     keeps the portrait from showing as a rectangle inside the arch. */
  --dcta-panel: #fbfbfb;

  background-color: var(--dcta-ground);
  background-image:
    radial-gradient(52% 44% at 14% 8%, rgba(var(--tint-sage), 0.16) 0%, rgba(var(--tint-sage), 0) 62%),
    radial-gradient(48% 42% at 88% 84%, rgba(var(--tint-navy), 0.2) 0%, rgba(var(--tint-navy), 0) 64%);
}

/* Grain, as on the testimonials band: on a near-black ground a two-bloom
   gradient bands badly without it. */
.dcta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

.dcta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  max-width: 76rem;
  margin-inline: auto;
}

/* the copy is bottom-aligned with the portrait's feet, then lifted clear of
   the floor — that offset is what stops the two columns reading as a table */
.dcta__body {
  min-width: 0;
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

/* ---------- type ---------- */
.dcta__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.dcta__eyebrow-rule {
  width: 1.75rem;
  height: 1px;
  flex: none;
  background-image: linear-gradient(to right, rgba(127, 209, 193, 0), var(--c-accent));
}

.dcta__title {
  margin: clamp(0.875rem, 1.6vw, 1.25rem) 0 0;
  font-size: clamp(1.625rem, 3vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.dcta__title-em {
  font-style: normal;
  font-weight: inherit;
  color: var(--c-accent);
}

.dcta__lead {
  margin: clamp(0.875rem, 1.6vw, 1.25rem) 0 0;
  max-width: 52ch;
  font-size: clamp(0.8125rem, 0.94vw, 0.9375rem);
  font-weight: var(--fw-medium);
  line-height: 1.72;
  color: var(--c-fg-soft);
  text-wrap: pretty;
}

/* ---------- credentials ----------
   Hairline rows. The rule belongs to the top of each row and the first row
   has none, so the list opens without a stray line under the paragraph. */
.dcta__list {
  margin: clamp(1.25rem, 2.4vw, 2rem) 0 0;
  padding: 0;
  max-width: 46ch;
  list-style: none;
}

.dcta__item {
  padding: clamp(0.5rem, 0.9vw, 0.6875rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  font-weight: var(--fw-medium);
  line-height: 1.55;
  color: var(--c-fg-soft);
}

.dcta__item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ---------- actions ----------
   One button, one link. Two filled pills side by side was half the bulk. */
.dcta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
}

.dcta__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.375rem;
  border-radius: var(--r-pill);
  background-color: #f5f5f7;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.008em;
  color: #0a0b0e;
  text-decoration: none;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.85);
  transition:
    background-color 240ms var(--ease-out),
    transform 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}

.dcta__cta svg {
  width: 0.8125rem;
  height: 0.8125rem;
  flex: none;
  transition: transform 240ms var(--ease-out);
}

.dcta__cta:hover {
  background-color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 20px 36px -16px rgba(0, 0, 0, 0.9);
}

.dcta__cta:hover svg {
  transform: translate(2px, -2px);
}

/* a phone number is a fact, not a second call to action — it reads as a link */
.dcta__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.008em;
  color: var(--c-fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 1px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.dcta__tel svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  color: var(--c-accent);
}

.dcta__tel:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.dcta__cta:focus-visible,
.dcta__tel:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Portrait
   ========================================================================== */
.dcta__figure {
  position: relative;
  align-self: end;
  justify-self: center;
  margin: 0;
  width: min(100%, 24rem);
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

/* The one ornament: an oversized hairline ring, sat behind the figure and
   running off the bottom of the section. It is what gives the block a
   composition instead of a left half and a right half. */
.dcta__ring {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 18%;
  width: min(32rem, 126%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid rgba(127, 209, 193, 0.22);
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- the arch ----------
   On the light ground this photo needed no container at all — its white
   seamless matched the page and the figure simply emerged from it. On a
   near-black ground that same white background would read as a lit
   rectangle, so the portrait gets a shape of its own.

   An arch, not a card: the dome is a single radius, it crops only empty
   background at the top corners (the head is centred and well clear), and it
   is a portrait device rather than a UI box. The fill is --dcta-panel, which
   is the photo's own background colour — so the seam between photo and arch
   still does not exist, and the mask can fade the hem into the arch floor
   exactly as it did into the page. */
.dcta__arch {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: 999px 999px 22px 22px;
  background-color: var(--dcta-panel);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 40px 80px -46px rgba(0, 0, 0, 0.9);
}

.dcta__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0.6) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0.6) 88%, transparent 100%);
}

/* under the arch on the dark ground — over the photo it would have needed a
   scrim, and a scrim is the box coming back */
.dcta__caption {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  margin-top: clamp(0.875rem, 1.6vw, 1.25rem);
  text-align: center;
}

.dcta__caption-name {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--c-fg);
}

.dcta__caption-role {
  font-size: clamp(0.6875rem, 0.78vw, 0.75rem);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ==========================================================================
   Doctor CTA — stacked
   ========================================================================== */
@media (max-width: 900px) {
  .dcta {
    padding-top: clamp(3rem, 7vw, 4.5rem);
  }

  .dcta__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  .dcta__body {
    padding-bottom: 0;
  }

  /* copy first, portrait under it — the figure is source-ordered second
     already, so nothing needs reordering */
  .dcta__figure {
    width: min(100%, 21rem);
    justify-self: start;
  }

  .dcta__ring {
    width: min(26rem, 122%);
  }
}

@media (max-width: 480px) {
  .dcta__cta {
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   ===== FAQ (ACL PAGE) =====
   Sits between the dark doctor CTA and the dark footer, and is deliberately
   LIGHT. Three dark bands running together would have merged into one long
   block, and long-form answers read better on a light ground. The page ends
   dark -> light -> dark, which is the same rhythm the home page already uses
   at testimonials -> blog -> footer.

   THE OPEN/CLOSE ANIMATION uses the grid 0fr -> 1fr technique, not
   max-height. max-height has to guess a value: guess low and long answers
   clip, guess high and the easing goes slack because most of the transition
   is spent on empty space. 0fr -> 1fr animates to the content's real height,
   whatever it turns out to be.
   ========================================================================== */
.faq {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--gutter) clamp(3.5rem, 7vw, 6.5rem);
  font-family: var(--font-sans);
  color: #0c1219;

  /* a wide overhead bloom, so the light falls where the headline is — a
     different pattern again from the grounds further up this page */
  background-color: #f4f5f7;
  background-image:
    radial-gradient(64% 42% at 50% -6%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(42% 34% at 88% 96%, rgba(var(--tint-sage), 0.18) 0%, rgba(var(--tint-sage), 0) 64%),
    linear-gradient(180deg, #f7f8f9 0%, #f1f2f5 58%, #eceef1 100%);
}

.faq__inner {
  max-width: 58rem;
  margin-inline: auto;
}

/* ---------- head ---------- */
.faq__badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  margin: 0 auto;
  padding: 0.375rem 0.8125rem;
  border: 1px solid rgba(20, 24, 30, 0.1);
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: #0c1219;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.faq__badge-num {
  font-variant-numeric: tabular-nums;
  color: var(--c-paper-ink-soft);
}

.faq__badge-dot {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--c-teal-deep);
}

.faq__title {
  margin: clamp(1rem, 1.8vw, 1.5rem) 0 clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.875rem, 4.4vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.06;
  letter-spacing: -0.036em;
  text-align: center;
  text-wrap: balance;
}

.faq__title-em {
  font-style: normal;
  font-weight: inherit;
  color: var(--c-teal-deep);
}

/* ==========================================================================
   Accordion
   ========================================================================== */
.faq__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* The row is the item, so the open state can restyle the whole thing —
   surface, border and shadow — from one class rather than three. */
.faq__item {
  position: relative;
  border: 1px solid transparent;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.55);
  transition:
    background-color 300ms var(--ease-out),
    border-color 300ms var(--ease-out),
    box-shadow 300ms var(--ease-out),
    transform 300ms var(--ease-out);
}

.faq__item:hover:not(.is-open) {
  background-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
}

.faq__item.is-open {
  background-color: #ffffff;
  border-color: rgba(15, 90, 76, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(20, 24, 32, 0.03),
    0 22px 44px -26px rgba(20, 32, 44, 0.28),
    0 0 0 4px rgba(15, 90, 76, 0.05);
}

/* the accent edge — the one mark that says which row is live */
.faq__item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background-image: linear-gradient(to bottom, var(--c-mark), rgba(26, 117, 102, 0));
  transform: translateY(-50%);
  transition: height 340ms var(--ease-out);
  pointer-events: none;
}

.faq__item.is-open::before {
  height: 42%;
}

.faq__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq__trigger {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.125rem);
  width: 100%;
  padding: clamp(1rem, 1.8vw, 1.375rem) clamp(0.875rem, 1.6vw, 1.25rem);
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.faq__trigger:focus-visible {
  outline: 2px solid var(--c-teal-deep);
  outline-offset: 2px;
  border-radius: 18px;
}

.faq__num {
  flex: none;
  width: 1.125rem;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--c-paper-ink-soft);
  transition: color 300ms var(--ease-out);
}

.faq__item.is-open .faq__num {
  color: var(--c-teal-deep);
}

.faq__label {
  flex: 1;
  min-width: 0;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: -0.014em;
  color: #0c1219;
  text-wrap: pretty;
}

/* ---------- the toggle ----------
   One glyph, not two. The plus rotates 45 degrees into a cross, so open and
   close are the same mark moving rather than an icon swap — an icon swap
   cannot be tweened and always reads as a flicker. */
.faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: #0c1219;
  color: #ffffff;
  transition:
    background-color 340ms var(--ease-out),
    border-color 340ms var(--ease-out),
    color 340ms var(--ease-out),
    transform 340ms var(--ease-out);
}

.faq__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.faq__item:hover:not(.is-open) .faq__icon {
  transform: scale(1.06);
}

.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
  border-color: rgba(20, 24, 30, 0.14);
  background-color: rgba(255, 255, 255, 0.9);
  color: #0c1219;
}

/* ---------- panel ----------
   0fr -> 1fr. The inner element carries the overflow clip; without it the
   text spills out of the collapsed track instead of being cut. */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-out);
}

.faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
}

.faq__panel-inner {
  overflow: hidden;
}

/* the answer fades and lifts slightly behind the row opening, so the text
   arrives after the space does rather than being dragged open with it */
.faq__answer {
  padding: 0 clamp(0.875rem, 1.6vw, 1.25rem) clamp(1rem, 1.8vw, 1.375rem);
  padding-left: calc(clamp(0.875rem, 1.6vw, 1.25rem) + 1.125rem + clamp(0.75rem, 1.6vw, 1.125rem));
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out);
}

.faq__item.is-open .faq__answer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 90ms;
}

.faq__answer p {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(0.8125rem, 0.92vw, 0.875rem);
  font-weight: var(--fw-medium);
  line-height: 1.72;
  color: var(--c-paper-ink-soft);
  text-wrap: pretty;
}

.faq__answer p + p {
  margin-top: 0.75rem;
}

/* ==========================================================================
   Foot
   ========================================================================== */
/* One glass capsule holding a label and a button, rather than a sentence with
   an underlined link and a loose circle bolted to it. Same device as the
   footer newsletter field: the capsule is the container, the action inside it
   is solid. It sizes to its content and centres, so it reads as a single
   object instead of a stray line of text under the list. */
.faq__foot {
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 1.4vw, 1rem);
  width: max-content;
  max-width: 100%;
  margin: clamp(2.25rem, 4.5vw, 3.25rem) auto 0;
  padding: 0.4375rem 0.4375rem 0.4375rem clamp(0.875rem, 1.6vw, 1.25rem);
  border: 1px solid rgba(20, 24, 30, 0.09);
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 12px 28px -20px rgba(20, 32, 44, 0.4);
}

.faq__foot-text {
  font-size: clamp(0.8125rem, 0.92vw, 0.875rem);
  font-weight: var(--fw-medium);
  color: var(--c-paper-ink-soft);
  white-space: nowrap;
}

.faq__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.625rem 1.125rem;
  border-radius: var(--r-pill);
  background-color: #0c1219;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.008em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}

.faq__contact-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out);
}

.faq__contact-arrow svg {
  width: 0.625rem;
  height: 0.625rem;
}

.faq__contact:hover {
  background-color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -14px rgba(12, 18, 25, 0.85);
}

.faq__contact:hover .faq__contact-arrow {
  background-color: var(--c-accent);
  color: #06231d;
  transform: translate(1px, -1px);
}

.faq__contact:focus-visible {
  outline: 2px solid var(--c-teal-deep);
  outline-offset: 3px;
}

/* ==========================================================================
   FAQ — mobile
   ========================================================================== */
@media (max-width: 560px) {
  /* the number column costs more than it gives at this width — the answer
     un-indents to match once it is gone */
  .faq__num {
    display: none;
  }

  .faq__answer {
    padding-left: clamp(0.875rem, 1.6vw, 1.25rem);
  }

  .faq__icon {
    width: 2rem;
    height: 2rem;
  }

  /* the capsule becomes a stacked card — a nowrap label plus a pill will
     not fit on one line at this width */
  .faq__foot {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: clamp(1rem, 4vw, 1.25rem);
    border-radius: 20px;
  }

  .faq__foot-text {
    white-space: normal;
    text-align: center;
  }

  .faq__contact {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   ===== SCOPE / LET'S TALK (ACL PAGE) =====
   Two panels, light and dark, sitting side by side on a light ground.

   COLOUR: the reference does this in flat black. Ours is the site's deep
   navy-teal instead — same gradient family as the doctor CTA above it, so
   the two dark surfaces on this page belong to each other rather than being
   one navy and one black.

   The tag cascade is the point of the right panel: each tag carries its own
   --duo-rot and --duo-tx set in the markup, and they overlap vertically. A
   generated rotation reads as accidental; hand-set values read as arranged.
   ========================================================================== */
.duo {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter);
  font-family: var(--font-sans);

  background-color: #eef0f2;
  background-image:
    radial-gradient(50% 44% at 6% 4%, rgba(var(--tint-sand), 0.2) 0%, rgba(var(--tint-sand), 0) 62%),
    radial-gradient(46% 42% at 96% 92%, rgba(var(--tint-navy), 0.16) 0%, rgba(var(--tint-navy), 0) 64%),
    linear-gradient(170deg, #f5f6f7 0%, #eef0f2 60%, #e8ebee 100%);
}

.duo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  max-width: 76rem;
  margin-inline: auto;
}

/* Both panels share a shape and a minimum height, so the pair reads as one
   object split in two rather than as two cards that happen to be adjacent. */
.duo__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: clamp(24rem, 42vw, 32rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: clamp(20px, 2.2vw, 30px);
}

/* ---------- light panel ---------- */
.duo__panel--light {
  background-color: #ffffff;
  color: #0c1219;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 26px 56px -36px rgba(20, 32, 44, 0.4);
}

/* The line-art. Cropped hard by the panel on two sides — a decorative mark
   that fits entirely inside its container just looks like a small drawing. */
.duo__art {
  position: absolute;
  z-index: 0;
  top: -12%;
  right: -14%;
  width: min(78%, 24rem);
  height: auto;
  color: rgba(20, 32, 44, 0.07);
  pointer-events: none;
}

/* ---------- dark panel ---------- */
.duo__panel--dark {
  color: var(--c-fg);
  background-color: #0c1a28;
  background-image:
    radial-gradient(62% 44% at 88% 6%, rgba(26, 117, 102, 0.26) 0%, rgba(26, 117, 102, 0) 64%),
    radial-gradient(54% 46% at 4% 96%, rgba(var(--tint-navy), 0.34) 0%, rgba(var(--tint-navy), 0) 62%),
    linear-gradient(152deg, #10263a 0%, #0c1a28 50%, #081420 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 56px -36px rgba(8, 20, 32, 0.7);
}

/* ---------- type ---------- */
.duo__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.duo__star {
  color: var(--c-teal-deep);
}

.duo__title--light {
  color: var(--c-fg);
}

/* the gap between heading and body is the composition — the copy is pushed
   to the floor of the panel rather than following the heading */
.duo__copy {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  max-width: 42ch;
}

.duo__copy p {
  margin: 0;
  font-size: clamp(0.8125rem, 0.92vw, 0.9375rem);
  font-weight: var(--fw-medium);
  line-height: 1.72;
  color: var(--c-paper-ink-soft);
  text-wrap: pretty;
}

.duo__copy p + p {
  margin-top: 0.875rem;
}

/* ---------- dark panel: the mirrored art ----------
   Same drawing as the light panel, flipped and moved to the opposite corner,
   drawn in white instead of ink. Reusing the mark rather than inventing a
   second one is what makes the two panels read as a pair. */
.duo__art--dark {
  top: auto;
  right: auto;
  bottom: -16%;
  left: -16%;
  width: min(70%, 22rem);
  color: rgba(255, 255, 255, 0.06);
  transform: scaleX(-1);
}

/* ---------- dark panel: copy ---------- */
.duo__copy--light p {
  color: var(--c-fg-soft);
}

/* the specialities line sits a step quieter than the invitation above it */
.duo__copy--light .duo__copy-quiet {
  margin-top: clamp(0.875rem, 1.6vw, 1.125rem);
  font-size: clamp(0.75rem, 0.84vw, 0.8125rem);
  line-height: 1.65;
  color: var(--c-fg-mute);
}

/* solid light pill — the established primary action on our dark surfaces */
.duo__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  padding: 0.8125rem 1.375rem;
  border-radius: var(--r-pill);
  background-color: #f5f5f7;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.008em;
  color: #0c1a28;
  text-decoration: none;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.85);
  transition:
    background-color 240ms var(--ease-out),
    transform 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}

.duo__action svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
}

.duo__action:hover {
  background-color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 20px 36px -16px rgba(0, 0, 0, 0.9);
}

.duo__action:active {
  transform: translateY(0) scale(0.98);
}

.duo__action:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Scope — stacked
   ========================================================================== */
@media (max-width: 860px) {
  .duo__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .duo__panel {
    min-height: 0;
  }

  /* with the panel no longer tall, the copy has nothing to be pushed to the
     floor of — the auto margin would leave a gap instead of closing one */
  .duo__copy {
    margin-top: 0;
    padding-top: clamp(1.5rem, 4vw, 2rem);
    max-width: none;
  }
}


/* ==========================================================================
   ===== APPOINTMENT FORM =====
   Underline fields on an open page. No boxes, no filled inputs, no floating
   labels, no dotted rules — the only line in the whole form is the one under
   each field, and it is what moves on focus.

   HOW THE FOCUS LINE WORKS. The field wrapper carries a static hairline; a
   second, accent-coloured line sits on top of it scaled to zero and grows
   from the left when the control inside is focused. Animating a border-color
   instead would flash the whole width at once, and a glow or a box-shadow
   ring would put the box back that this design is avoiding.
   ========================================================================== */
.appt {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--gutter);
  font-family: var(--font-sans);
  color: #0c1219;

  /* COLOUR AT THE EDGES, CLEAN GROUND UNDER THE CONTENT.
     Three cool blooms — iris, sage and the brand aqua — all centred OUTSIDE
     the section, so only their falloff reaches in. A white bloom over the
     middle lifts the area the fields sit on; it is listed first because it
     has to paint on top of the colour.

     There is deliberately no LINEAR pattern in here. A form already supplies
     every thin line the screen needs, and rings or stripes crossing the field
     underlines is what made the earlier version read as noise. The sparkle on
     ::before is point-based for exactly that reason — dots have no direction
     to fight with. */
  background-color: #f3f5f8;
  background-image:
    radial-gradient(58% 46% at 52% 46%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(46% 44% at 104% 58%, rgba(127, 209, 193, 0.26) 0%, rgba(127, 209, 193, 0) 60%),
    radial-gradient(58% 52% at -8% 106%, rgba(var(--tint-iris), 0.34) 0%, rgba(var(--tint-iris), 0) 60%),
    radial-gradient(52% 48% at 106% -6%, rgba(var(--tint-sage), 0.3) 0%, rgba(var(--tint-sage), 0) 58%),
    linear-gradient(176deg, #fafbfd 0%, #f3f5f8 56%, #eaeef5 100%);
}

/* ---------- sparkle ----------
   TINTED, NOT WHITE. On a light ground white sparkle is invisible: white at
   95% over #f3f5f8 resolves to #fefeff, about ten levels of difference per
   channel, which disappears entirely at 2px. Sparkle on a pale page has to be
   DARKER than the page — these are the cool tints at 0.45-0.7, which land
   around 80 levels off the ground and actually read.

   Hand-placed, not a repeating tile: a tiled sparkle moirés against text at
   small sizes and starts to look like dirt on the screen. Sizes and alphas
   are varied so it scans as scattered rather than printed. */
.appt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(3px 3px at 8% 14%, rgba(var(--tint-iris), 0.62), transparent 62%),
    radial-gradient(2px 2px at 15% 31%, rgba(var(--tint-sage), 0.5), transparent 62%),
    radial-gradient(3.5px 3.5px at 5% 52%, rgba(var(--tint-iris), 0.5), transparent 62%),
    radial-gradient(2px 2px at 12% 71%, rgba(var(--tint-sage), 0.55), transparent 62%),
    radial-gradient(3px 3px at 4% 87%, rgba(var(--tint-iris), 0.68), transparent 62%),
    radial-gradient(2.5px 2.5px at 21% 93%, rgba(var(--tint-iris), 0.45), transparent 62%),
    radial-gradient(2px 2px at 33% 8%, rgba(var(--tint-sage), 0.5), transparent 62%),
    radial-gradient(3px 3px at 57% 5%, rgba(var(--tint-sage), 0.45), transparent 62%),
    radial-gradient(2.5px 2.5px at 76% 10%, rgba(var(--tint-iris), 0.55), transparent 62%),
    radial-gradient(2px 2px at 88% 25%, rgba(var(--tint-sage), 0.6), transparent 62%),
    radial-gradient(3.5px 3.5px at 95% 43%, rgba(var(--tint-sage), 0.52), transparent 62%),
    radial-gradient(2.5px 2.5px at 92% 65%, rgba(var(--tint-iris), 0.62), transparent 62%),
    radial-gradient(2px 2px at 84% 84%, rgba(var(--tint-sage), 0.48), transparent 62%),
    radial-gradient(3px 3px at 68% 94%, rgba(var(--tint-iris), 0.5), transparent 62%),
    radial-gradient(2px 2px at 45% 96%, rgba(var(--tint-sage), 0.55), transparent 62%),
    radial-gradient(2.5px 2.5px at 27% 21%, rgba(var(--tint-iris), 0.42), transparent 62%);
  -webkit-mask-image: radial-gradient(58% 50% at 52% 48%, transparent 0%, transparent 52%, #000 88%);
  mask-image: radial-gradient(58% 50% at 52% 48%, transparent 0%, transparent 52%, #000 88%);
}

.appt__inner {
  max-width: 72rem;
  margin-inline: auto;
}

/* ---------- head ---------- */
.appt__head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid rgba(20, 24, 30, 0.09);
}

.appt__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
}

.appt__eyebrow-rule {
  width: 1.75rem;
  height: 1px;
  flex: none;
  background-image: linear-gradient(to right, rgba(15, 90, 76, 0), var(--c-teal-deep));
}

.appt__title {
  margin: clamp(0.75rem, 1.4vw, 1.125rem) 0 0;
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.06;
  letter-spacing: -0.034em;
}

.appt__title-em {
  font-style: normal;
  font-weight: inherit;
  color: var(--c-teal-deep);
}

.appt__intro {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(0.8125rem, 0.92vw, 0.875rem);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: var(--c-paper-ink-soft);
  text-wrap: pretty;
}

/* ==========================================================================
   Body
   ========================================================================== */
.appt__body {
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3.25rem);
}

/* ---------- aside ---------- */
.appt__block + .appt__block {
  margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
}

.appt__block-title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.016em;
}

.appt__block-text {
  margin: 0;
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  font-style: normal;
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: var(--c-paper-ink-soft);
}

.appt__link {
  color: var(--c-paper-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 24, 30, 0.18);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.appt__link:hover {
  color: var(--c-teal-deep);
  border-color: var(--c-teal-deep);
}

/* ==========================================================================
   Fields
   ========================================================================== */
.appt__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.75rem);
}

/* the wrapper owns the resting hairline; ::after is the accent that grows */
.appt__field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(20, 24, 30, 0.16);
}

.appt__field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--c-teal-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out);
}

.appt__field:focus-within::after {
  transform: scaleX(1);
}

.appt__label {
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.004em;
  color: var(--c-paper-ink-soft);
  transition: color 220ms var(--ease-out);
}

.appt__field:focus-within .appt__label {
  color: var(--c-teal-deep);
}

.appt__opt {
  font-weight: var(--fw-regular);
  color: rgba(20, 24, 30, 0.38);
}

/* Stripped to nothing: no border, no background, no radius, no shadow. The
   only thing the control draws is its own text. */
.appt__input {
  width: 100%;
  padding: 0.25rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  font-weight: var(--fw-medium);
  letter-spacing: -0.012em;
  color: #0c1219;
  appearance: none;
}

.appt__input::placeholder {
  color: rgba(20, 24, 30, 0.3);
  font-weight: var(--fw-regular);
}

/* the focus treatment lives on the wrapper, so the control itself shows none */
.appt__input:focus {
  outline: none;
}

/* keyboard users still need a visible target if the wrapper trick ever fails */
.appt__input:focus-visible {
  outline: none;
}

.appt__textarea {
  resize: vertical;
  min-height: 3.5rem;
  line-height: 1.6;
}

/* Chrome paints its own yellow fill on autofill, which would put a box back.
   A long inset shadow in the page colour is the only way to override it. */
.appt__input:-webkit-autofill,
.appt__input:-webkit-autofill:hover,
.appt__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0c1219;
  -webkit-box-shadow: 0 0 0 40rem #f3f5f8 inset;
  box-shadow: 0 0 0 40rem #f3f5f8 inset;
}

/* ---------- dropdown ----------
   A listbox, not a native <select>. The native popup cannot be styled — and
   worse, it inherited the muted :invalid colour from the closed control, so
   every option in the list rendered at 30% opacity. This owns its own
   surface, groups the options, and posts through a hidden input.

   The field's shared focus underline is suppressed here: this control has a
   panel of its own, and having both fire at once read as two states. */
.appt__field--dd::after {
  display: none;
}

.appt__dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  font-weight: var(--fw-medium);
  letter-spacing: -0.012em;
  text-align: left;
  color: #0c1219;
  cursor: pointer;
}

.appt__dd-btn:focus-visible {
  outline: 2px solid var(--c-teal-deep);
  outline-offset: 4px;
  border-radius: 4px;
}

/* the placeholder reads muted; a chosen value reads as an answer */
.appt__dd-text {
  color: rgba(20, 24, 30, 0.32);
  transition: color 200ms var(--ease-out);
}

.appt__field--dd.is-filled .appt__dd-text {
  color: #0c1219;
}

.appt__dd-caret {
  width: 0.625rem;
  height: 0.375rem;
  flex: none;
  color: var(--c-paper-ink-soft);
  transition: transform 260ms var(--ease-out), color 260ms var(--ease-out);
}

.appt__field--dd.is-open .appt__dd-caret {
  transform: rotate(180deg);
  color: var(--c-teal-deep);
}

/* ---------- the panel ---------- */
.appt__dd-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  max-height: 17rem;
  margin: 0;
  padding: 0.375rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid rgba(20, 24, 30, 0.08);
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 48px -24px rgba(20, 32, 44, 0.34);
  scrollbar-width: thin;
}

.appt__dd-list[hidden] {
  display: none;
}

/* group headings are labels, not choices — the keyboard walk skips them */
.appt__dd-group {
  padding: 0.625rem 0.6875rem 0.3125rem;
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20, 24, 30, 0.36);
}

.appt__dd-opt {
  padding: 0.5rem 0.6875rem;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.008em;
  color: #0c1219;
  cursor: pointer;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}

/* hover and keyboard highlight are the SAME state, so the two never disagree
   about which row is live */
.appt__dd-opt:hover,
.appt__dd-opt.is-active {
  background-color: rgba(15, 90, 76, 0.09);
}

.appt__dd-opt[aria-selected="true"] {
  color: var(--c-teal-deep);
  font-weight: var(--fw-semibold);
}

.appt__field--wide {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ---------- actions ---------- */
.appt__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.5rem;
}

.appt__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9375rem 1.625rem;
  border: 0;
  border-radius: var(--r-pill);
  background-color: #0c1219;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.008em;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 14px 30px -18px rgba(12, 18, 25, 0.9);
  transition:
    background-color 240ms var(--ease-out),
    transform 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}

.appt__submit svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  transition: transform 240ms var(--ease-out);
}

.appt__submit:hover {
  background-color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 20px 36px -18px rgba(12, 18, 25, 0.95);
}

.appt__submit:hover svg {
  transform: translateX(2px);
}

.appt__submit:active {
  transform: translateY(0) scale(0.98);
}

.appt__submit:focus-visible {
  outline: 2px solid var(--c-teal-deep);
  outline-offset: 3px;
}

.appt__note {
  margin: 0;
  max-width: 34ch;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: var(--c-paper-ink-soft);
}

/* ==========================================================================
   Appointment — tablet
   ========================================================================== */
@media (max-width: 900px) {
  .appt__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(1rem, 3vw, 1.5rem);
  }

  .appt__intro {
    max-width: 48ch;
  }

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

  /* the details read better as a row above the form than as a stacked
     column pushed to the top of it */
  .appt__aside {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
  }

  .appt__block + .appt__block {
    margin-top: 0;
  }
}

/* ==========================================================================
   Appointment — mobile
   ========================================================================== */
@media (max-width: 560px) {
  .appt__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .appt__submit {
    width: 100%;
    justify-content: center;
  }

  .appt__note {
    max-width: none;
    text-align: center;
  }
}


/* ==========================================================================
   ===== GALLERY =====
   Banner, irregular grid, lightbox.
   ========================================================================== */

/* ---------- banner ----------
   Type only. Every other banner on the site runs a photograph behind it, but
   the gallery below this one is nothing BUT photographs — a picture here
   competes with them instead of introducing them. */
.gal-hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  /* the site header is absolutely positioned over the top of the page, so the
     first thing in this banner has to start below it — the breadcrumb was
     landing behind the logo */
  padding:
    calc(var(--header-inset) + clamp(4.5rem, 8vw, 6.5rem))
    var(--gutter)
    clamp(2rem, 4vw, 3.25rem);
  font-family: var(--font-sans);
  color: #0c1219;

  background-color: #f7f7f5;
  background-image:
    radial-gradient(52% 60% at 88% -10%, rgba(var(--tint-sage), 0.22) 0%, rgba(var(--tint-sage), 0) 62%),
    radial-gradient(44% 54% at 4% 104%, rgba(var(--tint-sand), 0.22) 0%, rgba(var(--tint-sand), 0) 60%);
}

.gal-hero__inner {
  max-width: 82rem;
  margin-inline: auto;
}

.gal-hero__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--c-paper-ink-soft);
}

.gal-hero__crumbs a {
  color: var(--c-paper-ink-soft);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}

.gal-hero__crumbs a:hover {
  color: var(--c-teal-deep);
}

.gal-hero__crumbs [aria-current] span {
  color: #0c1219;
}

/* headline left, lead pinned to its baseline on the right */
.gal-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.25rem, 4vw, 4rem);
  margin-top: clamp(1.25rem, 2.6vw, 2rem);
}

.gal-hero__title {
  margin: 0;
  font-size: clamp(2rem, 5.4vw, 4.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.gal-hero__em {
  font-style: normal;
  font-weight: inherit;
  color: var(--c-teal-deep);
}

.gal-hero__lead {
  margin: 0 0 0.5rem;
  max-width: 34ch;
  font-size: clamp(0.8125rem, 0.92vw, 0.875rem);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: var(--c-paper-ink-soft);
  text-wrap: pretty;
}

.gal-hero__count {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding-top: clamp(0.875rem, 1.6vw, 1.25rem);
  border-top: 1px solid rgba(20, 24, 30, 0.1);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--c-paper-ink-soft);
}

.gal-hero__count span {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: #0c1219;
}

/* ==========================================================================
   Grid
   ========================================================================== */
/* SIX columns with dense packing, and each card declares its own span. Six
   divides by 2, 3 and 4, so a card can take a third, a half or two thirds of
   the row and the run still closes — which is what lets the layout look
   unplanned without leaving holes. `dense` is what backfills the gaps a mixed
   run leaves behind.

   Rows are a fixed track, not auto: a tall card is exactly two of them plus
   the gap, so the irregularity stays on a rhythm instead of drifting. */
.gal {
  /* its own inline padding, not --gutter. The max-width cap only creates a
     margin once the viewport is past 82rem; below that the grid ran right
     out to the 40px gutter and read as edge-to-edge. */
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4.5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  background-color: #ffffff;
}

.gal__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(13rem, 35vw, 31rem);
  grid-auto-flow: row;
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  max-width: 82rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.gal__cell--s2 { grid-column: span 2; }
.gal__cell--s4 { grid-column: span 4; }

/* ---------- card ---------- */
/* The ring is an OUTER box-shadow, not a border: a border would be part of
   the box and would shave a pixel off the image inside a fixed grid cell.
   This sits outside the card and costs no layout. */
.gal__card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
  background-color: #eff1f2;
  cursor: zoom-in;
  box-shadow: 0 0 0 1px rgba(20, 32, 44, 0.11);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}

/* the inner hairline — a lens edge. It has to be a pseudo-element on top of
   the photo: an inset shadow on the card itself paints UNDER the <img> and
   would never be seen. */
.gal__card::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  pointer-events: none;
}

.gal__card[data-type="video"] {
  cursor: pointer;
}

.gal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.gal__img--video {
  background: linear-gradient(145deg, #18232e, #071018);
}

.gal__card:hover {
  box-shadow:
    0 0 0 1px rgba(15, 90, 76, 0.32),
    0 22px 44px -26px rgba(16, 24, 34, 0.5);
}

.gal__card:hover .gal__img {
  transform: scale(1.045);
}

.gal__card:focus-visible {
  outline: 2px solid var(--c-teal-deep);
  outline-offset: 3px;
}

/* the caption scrim only exists on hover — a permanent one on every tile
   would turn the whole grid grey */
.gal__veil {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(8, 12, 18, 0.72) 0%, rgba(8, 12, 18, 0.18) 38%, rgba(8, 12, 18, 0) 62%);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
}

.gal__cap {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  left: 0.875rem;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: left;
  color: #ffffff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  pointer-events: none;
  display: grid;
  gap: 0.2rem;
}

.gal__cap strong {
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
}

.gal__cap small {
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gal__cap em {
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: var(--fw-semibold);
  color: #b8eee4;
}

.gal__empty {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem;
  border: 1px solid rgba(20, 32, 44, 0.1);
  border-radius: 1.25rem;
  background: #f7f9f8;
  text-align: center;
}

.gal__empty-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--c-teal-deep);
  color: #fff;
  font-size: 1.5rem;
}

.gal__empty h2,
.gal__empty p {
  margin: 0;
}

.gal__empty h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
  color: #0c1219;
}

.gal__empty p {
  margin-top: 0.5rem;
  color: var(--c-paper-ink-soft);
}

.gal__card:hover .gal__veil,
.gal__card:focus-visible .gal__veil,
.gal__card:hover .gal__cap,
.gal__card:focus-visible .gal__cap {
  opacity: 1;
}

.gal__card:hover .gal__cap,
.gal__card:focus-visible .gal__cap {
  transform: translateY(0);
}

/* ---------- play badge ---------- */
.gal__play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.75rem, 4vw, 3.5rem);
  height: clamp(2.75rem, 4vw, 3.5rem);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background-color: rgba(12, 18, 25, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: #ffffff;
  transition: transform 320ms var(--ease-out), background-color 320ms var(--ease-out);
}

.gal__play svg {
  width: 0.75rem;
  height: 0.875rem;
  margin-left: 0.125rem; /* optical centring: a triangle sits left of centre */
}

.gal__card:hover .gal__play {
  transform: translate(-50%, -50%) scale(1.08);
  background-color: rgba(12, 18, 25, 0.58);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lbx {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.lbx[hidden] {
  display: none;
}

.lbx__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(6, 9, 14, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: lbx-fade 260ms var(--ease-out) both;
}

.lbx__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: min(100%, 76rem);
  max-height: 100%;
  animation: lbx-rise 320ms var(--ease-out) both;
}

@keyframes lbx-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lbx-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* min-height 0 lets the stage shrink inside the flex column instead of
   pushing the caption off the bottom of the screen */
.lbx__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

.lbx__stage img,
.lbx__stage video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  border-radius: clamp(8px, 0.8vw, 14px);
  background-color: #0a0d12;
}

.lbx__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: rgba(235, 235, 245, 0.72);
  text-align: center;
}

.lbx__copy {
  display: grid;
  gap: 0.1rem;
}

.lbx__copy strong {
  color: #ffffff;
  font-size: 0.9rem;
}

.lbx__cap-text:empty {
  display: none;
}

.lbx__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #b8eee4;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.lbx__link:hover,
.lbx__link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.lbx__link[hidden] {
  display: none;
}

.lbx__count {
  font-variant-numeric: tabular-nums;
  color: rgba(235, 235, 245, 0.4);
}

/* ---------- controls ---------- */
.lbx__btn {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.lbx__btn svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.lbx__btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.lbx__btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.lbx__btn--close {
  top: -0.5rem;
  right: -0.5rem;
}

.lbx__btn--prev {
  top: 50%;
  left: clamp(-1rem, -1.5vw, -0.5rem);
  transform: translateY(-50%);
}

.lbx__btn--next {
  top: 50%;
  right: clamp(-1rem, -1.5vw, -0.5rem);
  transform: translateY(-50%);
}

.lbx__btn--prev:hover,
.lbx__btn--next:hover {
  transform: translateY(-50%) scale(1.06);
}

/* ==========================================================================
   Gallery — tablet
   ========================================================================== */
/* Four columns. The six-column spans have to be remapped or a `span 4` card
   would eat the whole row and the irregularity collapses into a single file. */
@media (max-width: 900px) {
  .gal__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(12rem, 34vw, 20rem);
  }

  /* the three-across row cannot survive four columns — it becomes a full
     width card followed by pairs, which keeps a big/small rhythm going */
  .gal__cell--s2 { grid-column: span 2; }
  .gal__cell--s4 { grid-column: span 4; }
}

/* ==========================================================================
   Gallery — mobile
   ========================================================================== */
@media (max-width: 620px) {
  .gal-hero__row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
  }

  .gal-hero__lead {
    margin-bottom: 0;
    max-width: none;
  }

  /* two columns, and every card takes both — the spans are meaningless at
     this width and half-width tiles would be thumbnails, not photographs */
  .gal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(11rem, 46vw, 15rem);
  }

  /* the wide card keeps the whole row, the narrow ones pair off — the same
     rhythm as the desktop pattern, just at two columns instead of six */
  .gal__cell--s4 { grid-column: span 2; }
  .gal__cell--s2 { grid-column: span 1; }

  .lbx__btn--close {
    top: -0.25rem;
    right: 0;
  }

  .lbx__btn--prev { left: -0.25rem; }
  .lbx__btn--next { right: -0.25rem; }

  /* touch has no hover — the caption would never appear, so it is always on */
  .gal__veil,
  .gal__cap {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   ===== BLOG DETAIL =====
   Banner, 8/4 article grid, sticky sidebar.

   Everything here resolves from the existing tokens — --tint-*, --c-teal-deep,
   --c-paper-ink*, --gutter, --r-pill, --ease-out, --fw-* — so this page cannot
   drift from the rest of the site.
   ========================================================================== */
.bd-hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  /* the site header is absolutely positioned over the page, so the first
     element has to start below it */
  padding:
    calc(var(--header-inset) + clamp(5.25rem, 9vw, 7.5rem))
    var(--gutter)
    clamp(3.25rem, 5.5vw, 4.75rem);
  font-family: var(--font-sans);
  color: #f3f6f8;

  /* DARK, AND DELIBERATELY LOW-CONTRAST WITHIN ITSELF. One near-black ground
     with three very wide, very low-alpha washes over it - sage from the top
     right, navy from the top left, and a last shallow sage lift along the
     bottom edge so the block does not die into the white article below.
     Anything stronger than this turns a banner into a light show; the type is
     the thing that has to be read here.

     It also fixes the header. The nav is white-on-glass on every page, and it
     was sitting on a near-white banner where it barely resolved. */
  background-color: #070a0f;
  background-image:
    radial-gradient(64% 76% at 84% -20%, rgba(var(--tint-sage), 0.30) 0%, rgba(var(--tint-sage), 0) 64%),
    radial-gradient(58% 68% at 4% 2%, rgba(var(--tint-navy), 0.26) 0%, rgba(var(--tint-navy), 0) 62%),
    radial-gradient(92% 56% at 50% 122%, rgba(var(--tint-sage), 0.17) 0%, rgba(var(--tint-sage), 0) 70%),
    linear-gradient(168deg, #0d1219 0%, #080b11 54%, #05070b 100%);
}

/* vignette: pulls the corners down so the eye lands on the headline rather
   than on the brightest patch of gradient */
.bd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(124% 92% at 50% 38%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.45) 100%);
}

/* one hairline of light on the bottom edge, faded out at both ends - without
   it the dark block simply stops against the white article */
.bd-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    rgba(127, 209, 193, 0) 0%,
    rgba(127, 209, 193, 0.32) 30%,
    rgba(127, 209, 193, 0.32) 70%,
    rgba(127, 209, 193, 0) 100%
  );
}

.bd-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 58rem;
  margin-inline: auto;
}

/* ---------- breadcrumb ---------- */
.bd-hero__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: rgba(235, 240, 245, 0.5);
}

/* the separators sit back a step from the links they divide */
.bd-hero__crumbs li[aria-hidden] {
  color: rgba(235, 240, 245, 0.24);
}

.bd-hero__crumbs a {
  color: rgba(235, 240, 245, 0.5);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}

.bd-hero__crumbs a:hover {
  color: var(--c-accent);
}

.bd-hero__crumbs [aria-current] span {
  color: rgba(255, 255, 255, 0.84);
}

/* ---------- tag ---------- */
.bd-hero__tag {
  display: inline-block;
  margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;
  padding: 0.4375rem 0.875rem;
  border: 1px solid rgba(127, 209, 193, 0.26);
  border-radius: var(--r-pill);
  background-color: rgba(127, 209, 193, 0.08);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.bd-hero__title {
  max-width: 20ch;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  font-size: clamp(1.75rem, 4.2vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  letter-spacing: -0.034em;
  color: #f7fafb;
  text-wrap: balance;
}

/* ---------- meta ---------- */
.bd-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: clamp(1.25rem, 2.4vw, 1.875rem) 0 0;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: rgba(235, 240, 245, 0.56);
}

.bd-hero__author {
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.92);
}

.bd-hero__dot {
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 50%;
  background-color: rgba(235, 240, 245, 0.3);
}

/* ==========================================================================
   Body grid
   ========================================================================== */
.bd {
  padding: clamp(2.75rem, 5.5vw, 5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
  background-color: var(--c-surface);
  font-family: var(--font-sans);
  color: #0c1219;
}

/* 8/4 in the reference sense, expressed as fractions so the gap comes out of
   the whole rather than out of one column */
.bd__inner {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 82rem;
  margin-inline: auto;
}

/* ---------- article ---------- */
.bd__figure {
  margin: 0;
  overflow: hidden;
  border-radius: clamp(14px, 1.4vw, 20px);
  background-color: #eef1f2;
  box-shadow:
    0 0 0 1px rgba(20, 32, 44, 0.08),
    0 26px 52px -34px rgba(16, 24, 34, 0.45);
}

.bd__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.bd__title {
  margin: clamp(2.25rem, 3.8vw, 3.25rem) 0 0;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--c-paper-ink);
  text-wrap: balance;
}

/* The same teal mark the services eyebrow uses. There is no eyebrow element
   in the markup and the article does not need one, but this was the only
   major heading on the site opening with no accent at all. */
.bd__title::before {
  content: "";
  display: block;
  width: 2.125rem;
  height: 3px;
  margin-bottom: clamp(1rem, 1.8vw, 1.375rem);
  border-radius: 2px;
  background-color: var(--c-mark);
}

/* the excerpt, set larger than the body so it reads as a standfirst */
.bd__lead {
  margin: clamp(1rem, 1.8vw, 1.375rem) 0 0;
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(20, 24, 30, 0.09);
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  font-weight: var(--fw-medium);
  line-height: 1.62;
  letter-spacing: -0.008em;
  color: var(--c-paper-ink-soft);
  text-wrap: pretty;
}

/* ---------- prose ----------
   Rhythm is set once here with the lobotomised-owl selector rather than a
   margin on every element, so a new block type inherits the spacing instead
   of needing its own rule. */
/*  MEASURE. This was 68ch while the title and the standfirst above it ran the
    full column, so the body wrapped short of them and the block had two
    different right edges. Everything in the column now shares one measure -
    the column itself - which is what makes the page read as aligned.

    COLOUR. --c-paper-ink-soft (#6b7078) is a label grey; across several
    hundred words of running text it reads washed out. #454b55 is the same
    hue, held back from the headline black but solid enough to actually read. */
.bd__body {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: none;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: var(--fw-regular);
  line-height: 1.82;
  letter-spacing: -0.003em;
  color: #454b55;
}

/* one reset for every block, so no element-level rule below can quietly
   out-specify the rhythm rule that follows */
.bd__body > * {
  margin: 0;
}

/* the paragraph gap has to be clearly larger than the line gap, or a list and
   the paragraph after it run together as a single block */
.bd__body > * + * {
  margin-top: clamp(1.25rem, 2.2vw, 1.75rem);
}

.bd__body p {
  text-wrap: pretty;
}

/* space above a subheading, not below it: a heading belongs to the text that
   follows, so it sits close to that and clear of what came before */
.bd__h {
  margin: 0;
  padding-top: clamp(1.125rem, 2.2vw, 1.875rem);
  font-size: clamp(1.125rem, 1.45vw, 1.375rem);
  font-weight: var(--fw-semibold);
  line-height: 1.32;
  letter-spacing: -0.024em;
  color: var(--c-paper-ink);
}

.bd__body > .bd__h + * {
  margin-top: 0.8125rem;
}

/* ---------- list ----------
   Markers are drawn, not list-style: a real bullet cannot be coloured or
   aligned to the cap-height of the first line. */
.bd__list {
  padding: 0;
  list-style: none;
}

.bd__list li {
  position: relative;
  padding-left: 1.5rem;
}

.bd__list li + li {
  margin-top: 0.6875rem;
}

.bd__list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.78em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--c-teal-deep);
}

/* ---------- pull quote ---------- */
.bd__quote {
  padding: clamp(0.625rem, 1.2vw, 1rem) 0 clamp(0.625rem, 1.2vw, 1rem) clamp(1.125rem, 2.2vw, 1.75rem);
  border-left: 2px solid var(--c-teal-deep);
}

.bd__quote p {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1rem, 1.25vw, 1.1875rem);
  font-weight: var(--fw-medium);
  line-height: 1.58;
  letter-spacing: -0.014em;
  color: var(--c-paper-ink);
}

.bd__inline-link {
  color: var(--c-teal-deep);
  font-weight: var(--fw-semibold);
  text-decoration-color: rgba(15, 90, 76, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 180ms var(--ease-out), text-decoration-color 180ms var(--ease-out);
}

.bd__inline-link:hover {
  color: #092f2a;
  text-decoration-color: currentColor;
}

.bd__inline-link:focus-visible,
.bd__article-action:focus-visible {
  outline: 2px solid var(--c-teal-deep);
  outline-offset: 3px;
}

.bd__notice {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid rgba(15, 90, 76, 0.16);
  border-radius: clamp(14px, 1.3vw, 18px);
  background: linear-gradient(145deg, rgba(218, 239, 234, 0.55), rgba(248, 251, 250, 0.9));
  color: #25363b;
}

.bd__notice strong {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
}

.bd__notice p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
}

.bd__article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.bd__article-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.72rem 1.15rem;
  border: 1px solid rgba(12, 18, 25, 0.15);
  border-radius: var(--r-pill);
  background: #ffffff;
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  color: #0c1219;
  text-decoration: none;
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.bd__article-action:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 90, 76, 0.38);
}

.bd__article-action--primary {
  border-color: #0c1219;
  background: #0c1219;
  color: #ffffff;
}

.bd__article-action--primary:hover {
  border-color: var(--c-teal-deep);
  background: var(--c-teal-deep);
}

/* ========================================================================== 
   Sidebar
   ========================================================================== */
/* Sticky lives on an inner wrapper, not on .bd__side. The aside is a grid
   item stretched to the row, and a sticky element cannot travel inside a box
   that is already as tall as the content it is meant to scroll past. */
.bd__sticky {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
  position: sticky;
  top: calc(var(--header-inset) + 5.5rem);
}

.bd-card {
  padding: clamp(1.125rem, 1.8vw, 1.5rem);
  border: 1px solid rgba(20, 32, 44, 0.09);
  border-radius: clamp(14px, 1.3vw, 18px);
  background-color: #fbfcfc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bd-card__title {
  margin: 0 0 clamp(0.875rem, 1.4vw, 1.125rem);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.018em;
  color: #0c1219;
}

.bd-card__text {
  margin: -0.375rem 0 1rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  line-height: 1.65;
  color: var(--c-paper-ink-soft);
}

/* ---------- recent ---------- */
.bd-recent {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-recent__link {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.bd-recent__img {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: cover;
  border-radius: 10px;
  background-color: #eef1f2;
  box-shadow: inset 0 0 0 1px rgba(20, 32, 44, 0.08);
  transition: transform 300ms var(--ease-out);
}

.bd-recent__link:hover .bd-recent__img {
  transform: scale(1.05);
}

.bd-recent__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}

.bd-recent__title {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: #0c1219;
  transition: color 200ms var(--ease-out);
}

.bd-recent__link:hover .bd-recent__title {
  color: var(--c-teal-deep);
}

.bd-recent__date {
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  color: var(--c-paper-ink-soft);
}

/* ---------- categories ---------- */
.bd-cats {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bd-cats li + li {
  border-top: 1px solid rgba(20, 24, 30, 0.08);
}

.bd-cats__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: var(--c-paper-ink-soft);
  text-decoration: none;
  transition: color 200ms var(--ease-out), padding-left 240ms var(--ease-out);
}

.bd-cats__link:hover {
  padding-left: 0.3125rem;
  color: var(--c-teal-deep);
}

.bd-cats__link.is-active {
  font-weight: var(--fw-semibold);
  color: var(--c-teal-deep);
}

.bd-cats__count {
  flex: none;
  min-width: 1.375rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--r-pill);
  background-color: rgba(20, 32, 44, 0.06);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--c-paper-ink-soft);
}

/* ---------- newsletter ---------- */
.bd-card--news {
  background-image: linear-gradient(160deg, rgba(var(--tint-sage), 0.16) 0%, rgba(var(--tint-sage), 0) 62%);
}

.bd-news {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* underlined field, matching the appointment form rather than inventing a
   second input style */
.bd-news__input {
  width: 100%;
  padding: 0.5rem 0.125rem;
  border: 0;
  border-bottom: 1px solid rgba(20, 24, 30, 0.18);
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: #0c1219;
  transition: border-color 240ms var(--ease-out);
}

.bd-news__input::placeholder {
  color: rgba(20, 24, 30, 0.34);
}

.bd-news__input:focus {
  outline: none;
  border-bottom-color: var(--c-teal-deep);
}

.bd-news__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  margin-top: 0.375rem;
  padding: 0.6875rem 1.125rem;
  border: 0;
  border-radius: var(--r-pill);
  background-color: #0c1219;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 240ms var(--ease-out), transform 240ms var(--ease-out);
}

.bd-news__submit svg {
  width: 0.8125rem;
  height: 0.8125rem;
  flex: none;
  transition: transform 240ms var(--ease-out);
}

.bd-news__submit:hover {
  background-color: #000000;
  transform: translateY(-1px);
}

.bd-news__submit:hover svg {
  transform: translateX(2px);
}

.bd-news__submit:focus-visible,
.bd-news__input:focus-visible {
  outline: 2px solid var(--c-teal-deep);
  outline-offset: 3px;
}

/* ==========================================================================
   Blog detail — stacked
   ========================================================================== */
@media (max-width: 900px) {
  .bd__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* sticky is meaningless once the sidebar is under the article — it would
     pin the widgets to the top of a section they are already at the end of */
  .bd__sticky {
    position: static;
  }

  /* one column now, so the measure comes back - a 900px-wide paragraph is
     unreadable however well it is spaced */
  .bd__body,
  .bd__lead {
    max-width: 68ch;
  }
}

@media (max-width: 560px) {
  .bd__img {
    aspect-ratio: 4 / 3;
  }

  .bd__article-actions {
    flex-direction: column;
  }

  .bd__article-action {
    width: 100%;
  }
}


/* ==========================================================================
   ===== LEGAL / POLICY =====
   Privacy Policy, Terms & Conditions, Patient Rights — one layout, three
   documents. A dark banner in the same family as the blog detail page, then
   a numbered document with a sticky contents rail on the LEFT: this is
   something you read down, so the list of what is in it belongs where the
   eye starts rather than out on the far side of the text.

   Everything resolves from the existing tokens, so these pages cannot drift
   from the rest of the site.
   ========================================================================== */
.lg-hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding:
    calc(var(--header-inset) + clamp(5.25rem, 9vw, 7.5rem))
    var(--gutter)
    clamp(3.25rem, 5.5vw, 4.75rem);
  font-family: var(--font-sans);
  color: #f3f6f8;

  /* the blog banner's ground, turned a few degrees: navy leads here and sage
     answers it, so the two dark banners read as a set without being a repeat */
  background-color: #070a0f;
  background-image:
    radial-gradient(60% 72% at 8% -16%, rgba(var(--tint-navy), 0.30) 0%, rgba(var(--tint-navy), 0) 62%),
    radial-gradient(56% 66% at 92% 6%, rgba(var(--tint-sage), 0.24) 0%, rgba(var(--tint-sage), 0) 62%),
    radial-gradient(92% 54% at 50% 122%, rgba(var(--tint-sage), 0.15) 0%, rgba(var(--tint-sage), 0) 70%),
    linear-gradient(168deg, #0c1119 0%, #080b11 54%, #05070b 100%);
}

.lg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(124% 92% at 50% 38%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.45) 100%);
}

.lg-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    rgba(127, 209, 193, 0) 0%,
    rgba(127, 209, 193, 0.3) 30%,
    rgba(127, 209, 193, 0.3) 70%,
    rgba(127, 209, 193, 0) 100%
  );
}

.lg-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 58rem;
  margin-inline: auto;
}

.lg-hero__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: rgba(235, 240, 245, 0.5);
}

.lg-hero__crumbs li[aria-hidden] {
  color: rgba(235, 240, 245, 0.24);
}

.lg-hero__crumbs a {
  color: rgba(235, 240, 245, 0.5);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}

.lg-hero__crumbs a:hover {
  color: var(--c-accent);
}

.lg-hero__crumbs [aria-current] span {
  color: rgba(255, 255, 255, 0.84);
}

.lg-hero__kicker {
  margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.lg-hero__title {
  max-width: 16ch;
  margin: clamp(0.75rem, 1.6vw, 1.125rem) 0 0;
  font-size: clamp(1.875rem, 4.4vw, 3.375rem);
  font-weight: var(--fw-bold);
  line-height: 1.06;
  letter-spacing: -0.034em;
  color: #f7fafb;
  text-wrap: balance;
}

.lg-hero__summary {
  max-width: 46ch;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  font-weight: var(--fw-medium);
  line-height: 1.66;
  color: rgba(235, 240, 245, 0.66);
  text-wrap: pretty;
}

/* set apart from the summary: on a policy page the date is a fact about the
   document rather than part of the prose */
.lg-hero__stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: clamp(1.5rem, 2.8vw, 2.25rem) 0 0;
  padding: 0.4375rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: rgba(235, 240, 245, 0.56);
}

.lg-hero__stamp time {
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Document grid
   ========================================================================== */
.lg {
  padding: clamp(2.75rem, 5.5vw, 5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
  background-color: var(--c-surface);
  font-family: var(--font-sans);
  color: var(--c-paper-ink);
}

.lg__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
  align-items: start;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  max-width: 78rem;
  margin-inline: auto;
}

/* sticky on the inner wrapper, not the aside: the aside is a grid item
   stretched to the row, and a sticky element cannot travel inside a box that
   is already as tall as the content it is meant to scroll past */
.lg__sticky {
  position: sticky;
  top: calc(var(--header-inset) + 5.5rem);
}

.lg-toc__title {
  margin: 0 0 0.875rem;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-paper-ink-soft);
}

.lg-toc {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(20, 24, 30, 0.1);
}

/*  The active marker is drawn on the link, over the rail's own hairline, so
    the two can never be a pixel apart the way a separate indicator element
    drifts when the list scrolls. */
.lg-toc__link {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.4375rem 0 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--c-paper-ink-soft);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}

.lg-toc__link::before {
  content: "";
  position: absolute;
  top: 0.375rem;
  bottom: 0.375rem;
  left: -1px;
  width: 2px;
  border-radius: 2px;
  background-color: var(--c-mark);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}

.lg-toc__num {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: rgba(20, 24, 30, 0.32);
  transition: color 200ms var(--ease-out);
}

.lg-toc__link:hover,
.lg-toc__link.is-active {
  color: var(--c-paper-ink);
}

.lg-toc__link.is-active {
  font-weight: var(--fw-semibold);
}

.lg-toc__link.is-active::before {
  opacity: 1;
}

.lg-toc__link.is-active .lg-toc__num {
  color: var(--c-teal-deep);
}

/* ==========================================================================
   Sections
   ========================================================================== */
/*  scroll-margin, not a spacer: jumping to #s-3 must not park the heading
    underneath the fixed header, and the header is ~64px plus its inset */
.lg-sec {
  scroll-margin-top: calc(var(--header-inset) + 5.5rem);
}

.lg-sec + .lg-sec {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid rgba(20, 24, 30, 0.08);
}

.lg-sec__num {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--c-teal-deep);
}

.lg-sec__title {
  margin: 0;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: var(--fw-semibold);
  line-height: 1.24;
  letter-spacing: -0.024em;
  color: var(--c-paper-ink);
  text-wrap: balance;
}

.lg-sec__body {
  margin-top: clamp(0.875rem, 1.6vw, 1.25rem);
  max-width: 62ch;
  font-size: clamp(0.9375rem, 1.02vw, 1rem);
  font-weight: var(--fw-regular);
  line-height: 1.8;
  color: #454b55;
}

/* one reset for every block, so no element rule below can out-specify the
   rhythm rule that follows it */
.lg-sec__body > * {
  margin: 0;
}

.lg-sec__body > * + * {
  margin-top: clamp(1rem, 1.8vw, 1.375rem);
}

.lg-sec__body p {
  text-wrap: pretty;
}

/* ---------- list ----------
   Markers are drawn, not list-style: a real bullet cannot be coloured or
   aligned to the cap-height of the first line. */
.lg-list {
  padding: 0;
  list-style: none;
}

.lg-list li {
  position: relative;
  padding-left: 1.375rem;
}

.lg-list li + li {
  margin-top: 0.5625rem;
}

.lg-list li::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.76em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--c-teal-deep);
}

/* ---------- note ----------
   The one raised voice per section — the sentence that matters more than the
   ones around it. A tinted panel rather than bold text, because bold inside
   a paragraph is read as emphasis and skipped, where a block is read. */
.lg-note {
  padding: clamp(0.875rem, 1.6vw, 1.125rem) clamp(1rem, 1.8vw, 1.25rem);
  border-left: 2px solid var(--c-teal-deep);
  border-radius: 0 8px 8px 0;
  background-color: rgba(15, 90, 76, 0.045);
  font-weight: var(--fw-medium);
  color: var(--c-paper-ink);
}

/* ==========================================================================
   Close + the other documents
   ========================================================================== */
.lg-end {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  border-radius: clamp(14px, 1.4vw, 18px);
  background-color: #f6f8f8;
  background-image:
    radial-gradient(72% 120% at 100% 0%, rgba(var(--tint-sage), 0.13) 0%, rgba(var(--tint-sage), 0) 64%);
  box-shadow: inset 0 0 0 1px rgba(20, 32, 44, 0.07);
}

.lg-end__title {
  margin: 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  color: var(--c-paper-ink);
}

.lg-end__text {
  max-width: 46ch;
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  font-weight: var(--fw-regular);
  line-height: 1.7;
  color: #454b55;
}

.lg-end__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: clamp(1.125rem, 2vw, 1.5rem);
}

.lg-end__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.125rem;
  border-radius: var(--r-pill);
  background-color: var(--c-paper-ink);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: #ffffff;
  text-decoration: none;
  transition: background-color 240ms var(--ease-out);
}

.lg-end__cta svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  color: var(--c-accent);
}

.lg-end__cta:hover {
  background-color: #000000;
}

.lg-end__link {
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: var(--c-teal-deep);
  text-decoration: none;
  text-underline-offset: 0.28em;
  transition: text-decoration-color 200ms var(--ease-out);
  text-decoration: underline;
  text-decoration-color: rgba(15, 90, 76, 0.28);
  text-decoration-thickness: 1px;
}

.lg-end__link:hover {
  text-decoration-color: var(--c-teal-deep);
}

.lg-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1rem);
  margin-top: clamp(0.75rem, 1.4vw, 1rem);
}

.lg-more__card {
  display: grid;
  gap: 0.1875rem;
  padding: clamp(1rem, 1.8vw, 1.25rem);
  border: 1px solid rgba(20, 32, 44, 0.09);
  border-radius: clamp(12px, 1.2vw, 16px);
  text-decoration: none;
  transition:
    border-color 240ms var(--ease-out),
    background-color 240ms var(--ease-out);
}

.lg-more__card:hover {
  border-color: rgba(15, 90, 76, 0.28);
  background-color: rgba(15, 90, 76, 0.035);
}

.lg-more__label {
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.016em;
  color: var(--c-paper-ink);
}

.lg-more__kicker {
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: var(--c-paper-ink-soft);
}

.lg-more__arrow {
  width: 1rem;
  height: 1rem;
  margin-top: 0.5rem;
  color: var(--c-teal-deep);
  transition: transform 240ms var(--ease-out);
}

.lg-more__card:hover .lg-more__arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   Legal — stacked
   ========================================================================== */
@media (max-width: 900px) {
  .lg__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /*  The rail goes above the document rather than below it: a table of
      contents that arrives after the contents is a list of what you have
      already read. It stops being sticky at the same time — pinning it would
      cost a third of a phone screen for the whole page. */
  .lg__side {
    order: -1;
  }

  .lg__sticky {
    position: static;
    padding-bottom: clamp(1.5rem, 3vw, 2rem);
    border-bottom: 1px solid rgba(20, 24, 30, 0.08);
  }

  .lg-sec__body {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .lg-more {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================================================
   ===== TREATMENT — PICTURE STRIP =====
   Three photographs between Principles and Values.

   Deliberately plain. It sits between two of the busiest sections on the
   page — Principles has a tinted mesh ground and Values a clay spotlight —
   so this one is white, and the pictures are the only thing in it. A fourth
   texture here would make the middle of the page unreadable.

   FIXED THREE-UP, not auto-fit. The row is exactly three columns because the
   content is exactly three images; `repeat(auto-fit, minmax(...))` would
   silently reflow to two-and-one at some in-between width, which is the one
   arrangement that looks like a mistake rather than a layout.
   ========================================================================== */
.tx-gal {
  position: relative;
  z-index: 1;
  padding: clamp(3.5rem, 6vw, 6rem) var(--gutter);
  background-color: var(--c-surface);
  color: var(--c-paper-ink);
  font-family: var(--font-sans);
  border-top: 1px solid rgba(20, 24, 30, 0.06);
}

.tx-gal__inner {
  max-width: 88rem; /* same measure as .principles__inner, so the edges line up */
  margin-inline: auto;
}

/* ---------- header ---------- */
.tx-gal__head {
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

.tx-gal__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--c-paper-ink-soft);
}

.tx-gal__mark {
  width: 0.4375rem;
  height: 0.4375rem;
  flex: none;
  border-radius: 2px;
  background-color: var(--c-mark);
}

.tx-gal__title {
  max-width: 26ch;
  margin: clamp(0.5rem, 1vw, 0.75rem) 0 0;
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  font-weight: var(--fw-semibold);
  line-height: 1.16;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

/* ---------- the row ---------- */
.tx-gal__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tx-gal__fig {
  margin: 0;
  height: 100%;
}

.tx-gal__media {
  position: relative;
  overflow: hidden;
  border-radius: clamp(14px, 1.4vw, 20px);
  background-color: #eef1f2;
  box-shadow: 0 4px 20px -6px rgba(16, 24, 34, 0.08), 0 0 0 1px rgba(20, 32, 44, 0.07);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}

.tx-gal__fig:hover .tx-gal__media {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(20, 32, 44, 0.1),
    0 22px 40px -20px rgba(16, 24, 34, 0.35);
}

.tx-gal__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tx-gal__fig:hover .tx-gal__img {
  transform: scale(1.05);
}

.tx-gal__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 15, 25, 0.88) 0%,
    rgba(10, 15, 25, 0.5) 35%,
    rgba(10, 15, 25, 0.1) 65%,
    transparent 100%
  );
  pointer-events: none;
  transition: opacity 300ms ease;
}

.tx-gal__cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.6vw, 22px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tx-gal__cap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #14b8a6;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(20, 184, 166, 0.8);
}

.tx-gal__cap-text {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Picture strip — narrow
   ========================================================================== */
@media (max-width: 720px) {
  .tx-gal__row {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.875rem, 3vw, 1.25rem);
  }

  .tx-gal__img {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================================
   Floating Contact Action — Circular Icon + Speech Bubble Pill
   ========================================================================== */

.floating-contact {
  position: fixed;
  bottom: clamp(18px, 2.5vw, 28px);
  left: clamp(18px, 2.5vw, 28px);
  right: auto;
  z-index: var(--z-fab);
  pointer-events: auto;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Hide when mobile menu is full-screen */
.site-header.is-open ~ .floating-contact {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.floating-contact__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  user-select: none;
  transition: transform 180ms ease;
}

.floating-contact__btn:active {
  transform: scale(0.97);
}

.floating-contact__btn:focus-visible {
  outline: 2px solid var(--c-teal-deep, #0f5a4c);
  outline-offset: 4px;
  border-radius: var(--r-pill, 999px);
}

/* Circular vibrant badge */
.floating-contact__circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--c-teal-deep, #0f5a4c);
  color: var(--c-teal-deep, #0f5a4c);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 8px 20px rgba(15, 90, 76, 0.38),
    0 2px 6px rgba(0, 0, 0, 0.08);
  transition:
    transform 220ms var(--ease-out, ease),
    box-shadow 220ms var(--ease-out, ease);
}

.floating-contact__bubble-svg {
  width: 27px;
  height: 27px;
  display: block;
}

/* Speech bubble tooltip pill */
.floating-contact__pill {
  position: relative;
  background: #ffffff;
  padding: 9px 18px 9px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 220ms var(--ease-out, ease),
    box-shadow 220ms var(--ease-out, ease);
}

/* Triangular tail pointing to the circle */
.floating-contact__pill::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #ffffff;
}

.floating-contact__text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #242933;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-family: "Plus Jakarta Sans", var(--font-sans);
  white-space: nowrap;
}

/* Hover micro-interactions */
.floating-contact__btn:hover .floating-contact__circle {
  transform: scale(1.06);
  box-shadow:
    0 12px 26px rgba(15, 90, 76, 0.48),
    0 3px 8px rgba(0, 0, 0, 0.1);
}

.floating-contact__btn:hover .floating-contact__pill {
  transform: translateX(2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

@media (max-width: 480px) {
  .floating-contact {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    left: 14px;
    right: auto;
  }

  .floating-contact__circle {
    width: 44px;
    height: 44px;
  }

  .floating-contact__bubble-svg {
    width: 24px;
    height: 24px;
  }

  .floating-contact__pill {
    padding: 8px 14px 8px 12px;
  }

  .floating-contact__text {
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   Category Page — Dedicated Treatment Categories System
   ========================================================================== */

.cat-hero__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7fd1c1;
  margin-bottom: 8px;
}

.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-teal-deep);
  background: rgba(15, 90, 76, 0.08);
  border: 1px solid rgba(15, 90, 76, 0.18);
  border-radius: var(--r-pill, 999px);
  padding: 5px 14px;
  margin-bottom: 14px;
}

.cat-overview {
  background-color: var(--c-paper);
  padding: clamp(52px, 6.5vw, 92px) 0;
  position: relative;
}

.cat-overview__inner {
  max-width: var(--maxw-section);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.cat-overview__head {
  text-align: left;
  max-width: 100%;
  margin: 0 0 clamp(32px, 4vw, 48px);
}

.cat-overview__headline {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700;
  color: var(--c-paper-ink);
  line-height: 1.15;
  letter-spacing: -0.025em;
  max-width: 100%;
}

/* Featured Full Section-Width Image Container */
.cat-feature {
  width: 100%;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.cat-feature__media {
  position: relative;
  width: 100%;
  border-radius: clamp(16px, 2.5vw, 24px);
  overflow: hidden;
  box-shadow:
    0 24px 54px -14px rgba(0, 0, 0, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  aspect-ratio: 21 / 9;
  min-height: 320px;
  max-height: 520px;
  background: #0f1614;
}

.cat-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cat-feature__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 40%, rgba(8, 22, 18, 0.82) 100%);
  pointer-events: none;
}

.cat-feature__caption {
  position: absolute;
  bottom: clamp(16px, 2.5vw, 26px);
  left: clamp(16px, 2.5vw, 28px);
  right: clamp(16px, 2.5vw, 28px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  z-index: 2;
}

.cat-feature__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 43, 37, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 14px;
  border-radius: var(--r-pill, 999px);
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cat-feature__badge-icon {
  width: 15px;
  height: 15px;
  color: #7fd1c1;
  flex-shrink: 0;
}

.cat-feature__caption-text {
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}

/* Overview Narrative Details */
.cat-details {
  width: 100%;
  max-width: 100%;
  margin-top: clamp(36px, 4.5vw, 54px);
}

.cat-details__content {
  width: 100%;
  max-width: 100%;
}

.cat-details__title {
  font-family: var(--font-title);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 700;
  color: var(--c-paper-ink);
  line-height: 1.25;
  margin-bottom: 18px;
}

.cat-details__lead {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: var(--c-paper-ink);
  font-weight: 600;
  margin-bottom: 16px;
  width: 100%;
  max-width: 100%;
  text-align: justify;
  text-justify: inter-word;
}

.cat-details__desc {
  font-size: clamp(0.96rem, 1.1vw, 1.04rem);
  line-height: 1.8;
  color: var(--c-paper-ink-soft);
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  text-align: justify;
  text-justify: inter-word;
}

.cat-details__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 36px);
}

.cat-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-teal-deep);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(15, 90, 76, 0.25);
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.cat-link-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.cat-link-btn:hover {
  background: var(--c-teal-deep);
  color: #ffffff;
  border-color: var(--c-teal-deep);
  transform: translateY(-2px);
}

.cat-link-btn:hover svg {
  transform: translateY(2px);
}

/* ==========================================================================
   Treatments & Conditions Grid Section
   ========================================================================== */

.cat-procedures {
  background: #ffffff;
  padding: clamp(60px, 7.5vw, 100px) 0;
  border-top: 1px solid var(--c-paper-line);
  position: relative;
}

.cat-procedures__inner {
  max-width: var(--maxw-section);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.cat-procedures__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: clamp(36px, 4.5vw, 54px);
  flex-wrap: wrap;
}

.cat-procedures__title {
  font-family: var(--font-title);
  font-size: clamp(1.85rem, 2.8vw, 2.6rem);
  font-weight: 700;
  color: var(--c-paper-ink);
  line-height: 1.2;
  margin-top: 4px;
}

.cat-procedures__lead {
  max-width: 440px;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--c-paper-ink-soft);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}

/* Treatment Card Component (Tall Luxury Photo Card) */
.cat-card--photo {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  min-height: 380px;
  max-height: 480px;
  box-shadow:
    0 16px 36px -8px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0f1614;
  transition:
    transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 300ms ease;
}

.cat-card--photo .cat-card__link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: clamp(20px, 2.4vw, 28px);
  text-decoration: none;
  color: #ffffff;
  position: relative;
  z-index: 2;
}

.cat-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cat-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 16, 14, 0.25) 0%,
    rgba(8, 16, 14, 0.02) 30%,
    rgba(6, 15, 12, 0.65) 68%,
    rgba(4, 12, 10, 0.96) 100%
  );
  pointer-events: none;
}

.cat-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  z-index: 3;
}

.cat-card__num {
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(14, 30, 26, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 4px 12px;
  border-radius: var(--r-pill, 999px);
  letter-spacing: 0.06em;
}

.cat-card__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  z-index: 3;
  margin-top: auto;
}

.cat-card__title {
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.cat-card__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.cat-card__arrow svg {
  width: 17px;
  height: 17px;
}

/* Card Hover States */
.cat-card--photo:hover {
  transform: translateY(-6px);
  box-shadow:
    0 24px 50px -10px rgba(0, 0, 0, 0.42),
    0 6px 16px rgba(0, 0, 0, 0.15);
  border-color: rgba(127, 209, 193, 0.45);
}

.cat-card--photo:hover .cat-card__img {
  transform: scale(1.07);
}

.cat-card--photo:hover .cat-card__arrow {
  background: var(--c-teal-deep);
  border-color: #7fd1c1;
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(15, 90, 76, 0.6);
}

/* ==========================================================================
   Sibling Categories Rail
   ========================================================================== */

.cat-siblings {
  background: #0d1715;
  color: #ffffff;
  padding: clamp(64px, 7.5vw, 96px) 0;
  position: relative;
}

.cat-siblings__inner {
  max-width: var(--maxw-section);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.cat-siblings__head {
  text-align: center;
  margin-bottom: clamp(36px, 4.5vw, 54px);
}

.cat-siblings__head .cat-badge {
  background: rgba(127, 209, 193, 0.12);
  color: #7fd1c1;
  border-color: rgba(127, 209, 193, 0.25);
}

.cat-siblings__title {
  font-family: var(--font-title);
  font-size: clamp(1.85rem, 2.8vw, 2.5rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.cat-siblings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

.cat-sib-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(18px, 2.2vw, 24px);
  text-decoration: none;
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 280ms ease,
    box-shadow 280ms ease;
}

.cat-sib-card__media {
  position: absolute;
  inset: 0;
}

.cat-sib-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.cat-sib-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 23, 21, 0.2) 20%, rgba(8, 16, 14, 0.9) 90%);
}

.cat-sib-card__content {
  position: relative;
  z-index: 2;
}

.cat-sib-card__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7fd1c1;
  margin-bottom: 6px;
}

.cat-sib-card__title {
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 12px;
}

.cat-sib-card__link-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  transition: color 200ms ease, transform 200ms ease;
}

.cat-sib-card__link-text svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.cat-sib-card:hover {
  transform: translateY(-4px);
  border-color: rgba(127, 209, 193, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.cat-sib-card:hover .cat-sib-card__img {
  transform: scale(1.06);
}

.cat-sib-card:hover .cat-sib-card__link-text {
  color: #7fd1c1;
  transform: translateX(2px);
}

.cat-sib-card:hover .cat-sib-card__link-text svg {
  transform: translateX(3px);
}

/* ==========================================================================
   Category CTA Strip
   ========================================================================== */

.cat-cta-strip {
  background: var(--c-teal-deep);
  color: #ffffff;
  padding: clamp(48px, 5.5vw, 68px) 0;
  position: relative;
}

.cat-cta-strip__inner {
  max-width: var(--maxw-section);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cat-cta-strip__content {
  max-width: 580px;
}

.cat-cta-strip__eyebrow {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7fd1c1;
  margin-bottom: 8px;
}

.cat-cta-strip__title {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 10px;
}

.cat-cta-strip__desc {
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.cat-cta-strip__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cat-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 10px 20px;
  border-radius: var(--r-pill, 999px);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.cat-cta-phone svg {
  width: 15px;
  height: 15px;
}

.cat-cta-phone:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* Category Page Responsive Breakpoints */
@media (max-width: 1024px) {
  .cat-details {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cat-siblings__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 768px) {
  .cat-feature__media {
    aspect-ratio: 16 / 10;
  }

  .cat-stats-grid {
    grid-template-columns: 1fr;
  }

  .cat-procedures__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cat-cta-strip__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}




/* ==========================================================================
   Content pages (imported treatment & condition pages)
   Same cards as the Recovery Impact section, sized to their text instead of
   the tall evidence-card height, and long dropdowns scroll inside the panel.
   ========================================================================== */
.impact-sec--compact .impact-card {
  min-height: 0;
  justify-content: flex-start;
  gap: 1rem;
  padding: clamp(1.5rem, 2vw, 2rem) clamp(1.25rem, 1.6vw, 1.75rem);
}

.impact-sec--compact .impact-card__body {
  flex-grow: 0;
}

.principles--compact .principle-card {
  min-height: 0;
}

.menu__panel {
  max-height: min(80vh, 44rem);
  scrollbar-width: thin;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Joint Replacement dedicated page */
.jr-page{--jr-ink:#101b35;--jr-mint:#b8e4dc;--jr-green:#287966;color:var(--jr-ink);background:#f6f8f7;overflow:hidden}
.jr-shell{width:min(1380px,calc(100% - 64px));margin-inline:auto}
.jr-kicker,.jr-section-label{margin:0 0 20px;text-transform:uppercase;letter-spacing:.15em;font-size:.76rem;font-weight:700;color:var(--jr-green)}
.jr-hero{min-height:760px;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);background:#e7f0ee}
.jr-hero__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(100px,10vw,160px) clamp(32px,7vw,112px)}
.jr-breadcrumbs{display:flex;gap:10px;margin-bottom:44px;color:#63716f;font-size:.85rem}.jr-breadcrumbs a{color:inherit;text-decoration:none}
.jr-hero h1,.jr-definition h2,.jr-section-head h2,.jr-guidance h2,.jr-planning h2,.jr-recovery h2,.jr-closing h2{font-weight:500;letter-spacing:-.055em;line-height:.96}
.jr-hero h1{margin:0;font-size:clamp(4rem,8vw,8rem)}
.jr-hero__tagline{max-width:680px;margin:24px 0 22px;font-size:clamp(1.45rem,2.2vw,2.2rem);line-height:1.18;font-weight:500}
.jr-hero__copy>p:not(.jr-kicker):not(.jr-hero__tagline){max-width:720px;margin:0 0 14px;color:#4c5959;line-height:1.7}
.jr-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.jr-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid var(--jr-ink);border-radius:999px;padding:16px 24px;font-weight:650;text-decoration:none;transition:.2s ease}.jr-btn:hover{transform:translateY(-2px)}.jr-btn--primary{background:var(--jr-ink);color:#fff}.jr-btn--ghost{color:var(--jr-ink)}
.jr-hero__media{position:relative;margin:0;min-height:620px;overflow:hidden}.jr-hero__media img{width:100%;height:100%;object-fit:cover}.jr-hero__media:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(10,20,34,.72))}.jr-hero__media figcaption{position:absolute;z-index:1;left:34px;right:34px;bottom:32px;display:flex;justify-content:space-between;color:#fff;font-weight:600}.jr-hero__media figcaption span{opacity:.7}
.jr-definition,.jr-recovery{padding:clamp(80px,10vw,150px) 0}.jr-definition__grid{display:grid;grid-template-columns:1fr 1.1fr .65fr;gap:clamp(32px,6vw,90px);align-items:start}.jr-definition h2,.jr-recovery h2{margin:0;font-size:clamp(3rem,5vw,5.5rem)}.jr-prose p{margin:0 0 24px;color:#4b5865;font-size:1.08rem;line-height:1.75}.jr-note{padding:28px;background:#dbece8;border-top:3px solid var(--jr-green)}.jr-note span{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem}.jr-note p{margin:16px 0 0;line-height:1.55}
.jr-services{padding:clamp(85px,10vw,145px) 0;background:#101a2d;color:#fff}.jr-section-head{display:grid;grid-template-columns:1.2fr .55fr;gap:50px;align-items:end;margin-bottom:58px}.jr-section-head h2{margin:0;max-width:850px;font-size:clamp(3rem,5vw,5.6rem)}.jr-section-head>p{color:#aeb8c8;line-height:1.65}.jr-services .jr-kicker{color:var(--jr-mint)}
.jr-services__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.jr-service-card{grid-column:span 2;min-height:320px;display:flex;flex-direction:column;padding:30px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035)}.jr-service-card:nth-child(n+4){grid-column:span 3}.jr-service-card__num{color:var(--jr-mint);font-size:.8rem}.jr-service-card h3{margin:52px 0 18px;font-size:1.5rem;line-height:1.15}.jr-service-card p{margin:0 0 28px;color:#aeb8c8;line-height:1.6}.jr-service-card a{margin-top:auto;color:#fff;text-decoration:none;font-weight:650}
.jr-guidance{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(40px,8vw,130px);padding:clamp(85px,10vw,150px) 0}.jr-guidance h2{margin:0 0 30px;font-size:clamp(3rem,5vw,5.6rem)}.jr-guidance p{color:#4b5865;line-height:1.72}.jr-emphasis{margin-top:32px;padding:24px 0;border-top:1px solid #cbd5d2;border-bottom:1px solid #cbd5d2}.jr-guidance__aside{align-self:center;padding:clamp(28px,4vw,54px);background:#fff;border:1px solid #d9e1df}.jr-guidance__aside h3{font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.1}
.jr-planning{display:grid;grid-template-columns:1fr 1fr;background:#d9ebe7}.jr-planning__media{min-height:680px;margin:0}.jr-planning__media img{width:100%;height:100%;object-fit:cover}.jr-planning__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(54px,8vw,130px)}.jr-planning h2{margin:0 0 34px;font-size:clamp(3rem,5vw,5.7rem)}.jr-planning__copy>p:not(.jr-kicker){margin:0 0 18px;color:#465655;line-height:1.7}.jr-recovery__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(42px,9vw,150px)}
.jr-closing{padding:clamp(90px,11vw,160px) 32px;background:#0e1728;color:#fff}.jr-closing__inner{max-width:1400px;margin:auto}.jr-closing .jr-kicker{color:var(--jr-mint)}.jr-closing h2{max-width:none;width:100%;margin:0 0 38px;font-size:clamp(4rem,8.4vw,8.2rem);line-height:.9;text-wrap:balance}.jr-closing__inner>p{max-width:1050px;color:#bdc5d2;font-size:1.05rem;line-height:1.7}.jr-priorities{display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:60px 0;list-style:none;border-top:1px solid #334059;border-bottom:1px solid #334059}.jr-priorities li{padding:26px 16px;border-right:1px solid #334059}.jr-priorities li:last-child{border:0}.jr-priorities span{display:block;margin-bottom:15px;color:var(--jr-mint);font-size:.74rem}.jr-closing__cta{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:60px;padding:34px;background:var(--jr-mint);color:var(--jr-ink)}.jr-closing__cta div{display:grid;gap:6px}.jr-closing__cta strong{font-size:1.45rem}.jr-btn--light{background:#fff;color:var(--jr-ink)}
@media(max-width:960px){.jr-hero,.jr-planning{grid-template-columns:1fr}.jr-hero__media{min-height:520px}.jr-definition__grid{grid-template-columns:1fr 1fr}.jr-definition__grid .jr-note{grid-column:2}.jr-section-head,.jr-guidance,.jr-recovery__grid{grid-template-columns:1fr}.jr-services__grid{grid-template-columns:1fr 1fr}.jr-service-card,.jr-service-card:nth-child(n+4){grid-column:auto}.jr-priorities{grid-template-columns:1fr 1fr}.jr-closing__cta{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.jr-shell{width:min(100% - 36px,1380px)}.jr-hero{display:block}.jr-hero__copy{padding:105px 18px 58px}.jr-hero h1{font-size:3.7rem}.jr-hero__media{min-height:390px}.jr-definition__grid,.jr-services__grid{grid-template-columns:1fr}.jr-definition__grid .jr-note{grid-column:auto}.jr-service-card,.jr-service-card:nth-child(n+4){min-height:280px}.jr-planning__media{min-height:420px}.jr-planning__copy{padding:65px 18px}.jr-priorities{grid-template-columns:1fr}.jr-priorities li{border-right:0;border-bottom:1px solid #334059}.jr-closing{padding-inline:18px}.jr-closing__cta{padding:24px}.jr-btn{width:100%}}

/* Shared treatment/category hero: full-bleed clinical image with blue readability veil. */
.jr-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(700px, 78vh, 860px);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: #092945;
}

.jr-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  min-height: 0;
  overflow: hidden;
}

.jr-hero__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.03);
}

.jr-hero__media::after {
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 24, 47, .96) 0%, rgba(5, 39, 68, .91) 38%, rgba(8, 58, 91, .66) 66%, rgba(5, 32, 55, .34) 100%),
    linear-gradient(0deg, rgba(3, 22, 40, .62) 0%, rgba(6, 39, 67, .08) 54%, rgba(4, 27, 50, .32) 100%);
  content: "";
}

.jr-hero__copy {
  position: relative;
  z-index: 2;
  width: min(100%, 980px);
  padding: clamp(118px, 10vw, 168px) clamp(28px, 7vw, 112px) clamp(92px, 8vw, 126px);
}

.jr-hero .jr-breadcrumbs {
  color: rgba(236, 247, 255, .78);
}

.jr-hero .jr-breadcrumbs a:hover {
  color: #fff;
}

.jr-hero .jr-kicker {
  color: #a8eee1;
}

.jr-hero h1 {
  color: #fff;
  text-shadow: 0 3px 24px rgba(0, 18, 35, .24);
  text-wrap: balance;
}

.jr-hero__tagline {
  color: #f5fbff;
  text-wrap: balance;
}

.jr-hero__copy > p:not(.jr-kicker):not(.jr-hero__tagline) {
  color: rgba(235, 245, 250, .86);
}

.jr-hero__copy strong {
  color: #fff;
}

.jr-hero .jr-btn {
  border-color: rgba(255, 255, 255, .82);
}

.jr-hero .jr-btn--primary {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 12px 30px rgba(1, 20, 38, .2);
  color: #102b46;
}

.jr-hero .jr-btn--primary:hover {
  background: #dff6f2;
}

.jr-hero .jr-btn--ghost {
  background: rgba(6, 34, 59, .22);
  color: #fff;
  backdrop-filter: blur(8px);
}

.jr-hero .jr-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .13);
}

.jr-hero__media figcaption {
  z-index: 2;
  right: clamp(24px, 4vw, 64px);
  bottom: 30px;
  left: auto;
  max-width: min(440px, 42vw);
  gap: 14px;
  justify-content: flex-end;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(4, 29, 51, .32);
  text-align: right;
  text-shadow: 0 2px 14px rgba(0, 15, 31, .42);
  backdrop-filter: blur(8px);
}

@media (max-width: 960px) {
  .jr-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .jr-hero__media {
    min-height: 0;
  }

  .jr-hero__media::after {
    background:
      linear-gradient(90deg, rgba(4, 24, 47, .96) 0%, rgba(5, 41, 71, .88) 58%, rgba(7, 48, 78, .58) 100%),
      linear-gradient(0deg, rgba(3, 22, 40, .62), rgba(4, 31, 55, .18) 58%, rgba(4, 27, 50, .32));
  }
}

@media (max-width: 640px) {
  .jr-hero {
    display: grid;
  }

  .jr-hero__copy {
    width: 100%;
    padding: 108px 18px 106px;
  }

  .jr-hero__media {
    min-height: 0;
  }

  .jr-hero__media::after {
    background:
      linear-gradient(180deg, rgba(4, 26, 50, .9) 0%, rgba(5, 42, 72, .83) 54%, rgba(3, 27, 50, .91) 100%),
      linear-gradient(90deg, rgba(3, 27, 51, .58), rgba(8, 62, 94, .38));
  }

  .jr-breadcrumbs {
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  .jr-hero__tagline {
    margin-top: 20px;
  }

  .jr-hero__copy > p:not(.jr-kicker):not(.jr-hero__tagline) {
    font-size: .96rem;
    line-height: 1.62;
  }

  .jr-hero__media figcaption {
    right: 18px;
    bottom: 18px;
    left: 18px;
    max-width: none;
    justify-content: space-between;
    font-size: .74rem;
    text-align: left;
  }
}

/* Gynae Laparoscopy & Infertility dedicated page */
.gli-page{--gli-ink:#292033;--gli-plum:#7c365e;--gli-rose:#b96d89;--gli-blush:#f5e8ed;--gli-cream:#fbf8f5;--gli-line:#decfd5;color:var(--gli-ink);background:var(--gli-cream);overflow:hidden}
.gli-shell{width:min(1380px,calc(100% - 64px));margin-inline:auto}.gli-kicker,.gli-section-tag{margin:0 0 18px;text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;font-weight:750;color:var(--gli-plum)}
.gli-hero{min-height:790px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);background:linear-gradient(125deg,#fbf4f6 0%,#f3e2e9 52%,#e8ceda 100%)}
.gli-hero__copy{z-index:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(112px,10vw,160px) clamp(34px,7vw,112px)}.gli-breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:42px;color:#7b6872;font-size:.84rem}.gli-breadcrumbs a{color:inherit;text-decoration:none}
.gli-hero h1,.gli-intro h2,.gli-section-head h2,.gli-fertility h2,.gli-focus>h2,.gli-approach h2,.gli-doctor h2,.gli-consult h2,.gli-faq h2,.gli-cta h2{margin:0;font-weight:540;letter-spacing:-.052em;line-height:.98}.gli-hero h1{max-width:820px;font-size:clamp(3.7rem,6.4vw,7.1rem)}.gli-hero h1 em,.gli-intro h2 em{display:block;color:var(--gli-plum);font-family:"Playfair Display",serif;font-weight:500}.gli-hero__lead{margin:28px 0 18px;font-size:clamp(1.35rem,2vw,2rem);font-weight:600;line-height:1.2}.gli-hero__copy>p:not(.gli-kicker):not(.gli-hero__lead){max-width:720px;margin:0 0 14px;color:#62535c;line-height:1.72}
.gli-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.gli-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:16px 24px;border:1px solid var(--gli-plum);border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s ease,background .2s ease}.gli-btn:hover{transform:translateY(-2px)}.gli-btn--primary{background:var(--gli-plum);color:#fff}.gli-btn--ghost{color:var(--gli-plum)}
.gli-hero__visual{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:650px;overflow:hidden}.gli-hero__orb{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;bottom:10%;background:rgba(255,255,255,.55);box-shadow:0 40px 90px rgba(82,38,61,.16)}.gli-hero__visual>img{position:relative;z-index:1;width:min(730px,110%);height:92%;object-fit:contain;object-position:center bottom;transform:translateX(7%);filter:drop-shadow(0 26px 34px rgba(52,25,42,.18))}.gli-hero__doctor{position:absolute;z-index:2;right:clamp(24px,4vw,64px);bottom:42px;display:grid;gap:3px;padding:18px 22px;background:rgba(255,255,255,.88);border:1px solid rgba(124,54,94,.16);backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(55,29,43,.14)}.gli-hero__doctor span{text-transform:uppercase;letter-spacing:.13em;font-size:.64rem;color:var(--gli-plum)}.gli-hero__doctor strong{font-size:1.08rem}.gli-hero__doctor small{color:#76636d}
.gli-intro{padding:clamp(85px,10vw,150px) 0}.gli-intro__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(50px,8vw,130px);align-items:start}.gli-intro h2,.gli-fertility h2,.gli-focus>h2,.gli-doctor h2,.gli-consult h2,.gli-faq h2{font-size:clamp(3rem,5.2vw,5.8rem)}.gli-copy p{margin:0 0 20px;color:#665861;font-size:1.03rem;line-height:1.75}.gli-concern-grid{display:grid;grid-template-columns:repeat(5,1fr);margin:70px 0 0;padding:0;border-top:1px solid var(--gli-line);border-left:1px solid var(--gli-line);list-style:none}.gli-concern-grid li{min-height:112px;display:flex;align-items:flex-end;padding:20px;border-right:1px solid var(--gli-line);border-bottom:1px solid var(--gli-line);font-weight:650;line-height:1.3}.gli-concern-grid li:before{content:"+";align-self:flex-start;margin-right:auto;color:var(--gli-rose)}
.gli-lap{padding:clamp(90px,10vw,150px) 0;background:#2b1e2b;color:#fff}.gli-section-head{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(50px,8vw,120px);align-items:end;margin-bottom:60px}.gli-section-head h2{font-size:clamp(3rem,5.2vw,5.8rem)}.gli-lap .gli-kicker,.gli-evaluation .gli-kicker,.gli-cta .gli-kicker{color:#e8a9bf}.gli-lap .gli-copy p{color:#d1c1c9}.gli-procedure-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18)}.gli-procedure-grid article{min-height:285px;padding:28px;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}.gli-procedure-grid article:nth-child(n+5){grid-column:span 1}.gli-procedure-grid article:last-child{grid-column:span 2}.gli-procedure-grid span{color:#e8a9bf;font-size:.72rem}.gli-procedure-grid h3{margin:58px 0 15px;font-size:1.45rem}.gli-procedure-grid p{margin:0;color:#cbbdc5;line-height:1.62}.gli-benefits{display:grid;grid-template-columns:.7fr 1.3fr;gap:35px;margin-top:48px;padding:28px 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}.gli-benefits>p{margin:0;font-weight:700}.gli-benefits ul{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}.gli-benefits li{padding:8px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#e4d8de;font-size:.86rem}.gli-clinical-note{max-width:850px;margin:34px 0 0;color:#ccbfc6;line-height:1.65}
.gli-fertility{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(50px,9vw,140px);padding:clamp(90px,11vw,160px) 0}.gli-fertility__intro>p:last-child{max-width:760px;color:#665861;line-height:1.75;font-size:1.04rem}.gli-time-card{padding:clamp(28px,4vw,50px);background:var(--gli-blush);border-top:4px solid var(--gli-plum)}.gli-time-card>span{display:block;margin-bottom:30px;text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;font-weight:750;color:var(--gli-plum)}.gli-time-card strong{display:block;font-size:clamp(2.7rem,4vw,4.6rem);line-height:1;color:var(--gli-plum)}.gli-time-card p{margin:8px 0 28px;line-height:1.55}.gli-time-card small{display:block;padding-top:20px;border-top:1px solid var(--gli-line);color:#786771;line-height:1.55}
.gli-evaluation{padding:clamp(90px,10vw,145px) 0;background:var(--gli-plum);color:#fff}.gli-evaluation .gli-section-head--light>p{color:#eadde3;line-height:1.7}.gli-eval-list{display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.24);border-left:1px solid rgba(255,255,255,.24)}.gli-eval-list li{min-height:310px;padding:26px;border-right:1px solid rgba(255,255,255,.24);border-bottom:1px solid rgba(255,255,255,.24)}.gli-eval-list li>span{color:#f1b9cd;font-size:.75rem}.gli-eval-list h3{margin:72px 0 16px;font-size:1.27rem;line-height:1.2}.gli-eval-list p{margin:0;color:#e3d2db;line-height:1.58}
.gli-focus{padding:clamp(90px,11vw,160px) 0}.gli-focus>h2{max-width:1080px}.gli-focus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:64px}.gli-focus-grid article{min-height:330px;padding:clamp(28px,4vw,50px);background:#fff;border:1px solid var(--gli-line)}.gli-focus-grid article:nth-child(2),.gli-focus-grid article:nth-child(3){background:var(--gli-blush)}.gli-focus-grid span{text-transform:uppercase;letter-spacing:.13em;font-size:.67rem;font-weight:750;color:var(--gli-plum)}.gli-focus-grid h3{margin:70px 0 18px;font-size:clamp(1.7rem,2.6vw,2.7rem);line-height:1.05}.gli-focus-grid p{max-width:610px;margin:0;color:#6a5962;line-height:1.68}
.gli-menstrual{padding:clamp(80px,9vw,130px) 0;background:#ead7df}.gli-menstrual .gli-section-head{margin-bottom:45px}.gli-menstrual .gli-section-head>p{color:#6b5962;line-height:1.65}.gli-symptom-list{display:flex;flex-wrap:wrap;gap:10px}.gli-symptom-list span{padding:15px 19px;background:rgba(255,255,255,.68);border:1px solid rgba(124,54,94,.16);border-radius:999px;font-weight:650}
.gli-approach{padding:clamp(90px,11vw,160px) 0}.gli-approach__heading{display:grid;grid-template-columns:.45fr 1.55fr;gap:40px;align-items:start}.gli-approach h2{font-size:clamp(2.8rem,4.8vw,5.3rem)}.gli-approach h2 span{color:var(--gli-rose)}.gli-steps{display:grid;grid-template-columns:repeat(5,1fr);margin:70px 0 0;padding:0;list-style:none;border-top:1px solid var(--gli-line);border-left:1px solid var(--gli-line)}.gli-steps li{min-height:285px;padding:25px;border-right:1px solid var(--gli-line);border-bottom:1px solid var(--gli-line)}.gli-steps span{color:var(--gli-rose);font-size:.72rem}.gli-steps h3{margin:68px 0 15px;font-size:1.25rem}.gli-steps p{margin:0;color:#6d5e66;line-height:1.55}
.gli-doctor{padding:clamp(90px,10vw,150px) 0;background:#332533;color:#fff}.gli-doctor__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(50px,10vw,160px)}.gli-doctor .gli-kicker{color:#e8a9bf}.gli-doctor__role{margin:24px 0 0;color:#e3b4c6;font-size:1.2rem}.gli-doctor .gli-copy p{color:#d8cbd2}.gli-doctor blockquote{margin:42px 0 0;padding:28px 0;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);font-family:"Playfair Display",serif;font-size:clamp(1.45rem,2.4vw,2.4rem);line-height:1.3;color:#fff}
.gli-consult{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,8vw,120px);padding:clamp(90px,11vw,160px) 0}.gli-consult ul{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--gli-line)}.gli-consult li{padding:17px 8px;border-bottom:1px solid var(--gli-line);font-weight:650}.gli-consult li:before{content:"+";margin-right:10px;color:var(--gli-rose)}.gli-urgent{grid-column:1/-1;margin:10px 0 0;padding:22px 25px;background:#fff0f1;border-left:4px solid #a33f57;line-height:1.6;color:#70404c}
.gli-faq{padding:clamp(90px,10vw,145px) 0;background:var(--gli-blush)}.gli-faq__grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(45px,8vw,120px)}.gli-faq__list{border-top:1px solid #cbb8c0}.gli-faq details{border-bottom:1px solid #cbb8c0}.gli-faq summary{display:flex;justify-content:space-between;gap:25px;padding:24px 0;font-weight:700;cursor:pointer;list-style:none}.gli-faq summary::-webkit-details-marker{display:none}.gli-faq summary span{color:var(--gli-plum);font-size:1.4rem}.gli-faq details[open] summary span{transform:rotate(45deg)}.gli-faq details p{margin:0;padding:0 48px 25px 0;color:#675861;line-height:1.68}
.gli-cta{padding:clamp(95px,12vw,175px) 32px;background:linear-gradient(120deg,#6d2f54,#9d4d70);color:#fff}.gli-cta__inner{max-width:1300px;margin:auto}.gli-cta h2{max-width:1100px;font-size:clamp(3.5rem,7vw,7.4rem)}.gli-cta__inner>p:not(.gli-kicker){max-width:850px;margin:30px 0;color:#f0dfe7;font-size:1.08rem;line-height:1.7}.gli-btn--light{margin-top:12px;background:#fff;border-color:#fff;color:var(--gli-plum)}
@media(max-width:1100px){.gli-hero{grid-template-columns:1fr}.gli-hero__visual{min-height:620px}.gli-concern-grid{grid-template-columns:repeat(3,1fr)}.gli-procedure-grid,.gli-eval-list,.gli-steps{grid-template-columns:repeat(2,1fr)}.gli-procedure-grid article:last-child{grid-column:auto}.gli-eval-list li:last-child,.gli-steps li:last-child{grid-column:1/-1;min-height:230px}.gli-approach__heading{grid-template-columns:1fr}.gli-fertility,.gli-doctor__grid,.gli-consult,.gli-faq__grid{grid-template-columns:1fr}}
@media(max-width:720px){.gli-shell{width:min(100% - 36px,1380px)}.gli-hero{display:block;min-height:0}.gli-hero__copy{padding:105px 18px 60px}.gli-breadcrumbs{margin-bottom:30px}.gli-hero h1{font-size:clamp(3.2rem,15vw,5rem)}.gli-actions{flex-direction:column}.gli-btn{width:100%}.gli-hero__visual{min-height:500px}.gli-hero__visual>img{height:94%;width:118%;transform:translateX(8%)}.gli-hero__doctor{right:18px;bottom:22px}.gli-intro__grid,.gli-section-head{grid-template-columns:1fr;gap:28px}.gli-concern-grid{grid-template-columns:1fr 1fr;margin-top:45px}.gli-concern-grid li{min-height:96px;padding:16px}.gli-procedure-grid,.gli-eval-list,.gli-steps{grid-template-columns:1fr}.gli-procedure-grid article,.gli-procedure-grid article:last-child,.gli-eval-list li,.gli-eval-list li:last-child,.gli-steps li,.gli-steps li:last-child{grid-column:auto;min-height:245px}.gli-benefits{grid-template-columns:1fr}.gli-focus-grid{grid-template-columns:1fr}.gli-focus-grid article{min-height:290px}.gli-consult ul{grid-template-columns:1fr}.gli-faq details p{padding-right:0}.gli-cta{padding-inline:18px}.gli-cta h2{font-size:clamp(3rem,14vw,5rem)}}

/* Gynae hero: use Dr. Khushboo Jain's single portrait as a clean photo card. */
.gli-hero__visual--single{align-items:flex-end;padding:clamp(44px,6vw,82px) clamp(28px,4vw,62px) 0}
.gli-hero__visual--single>img{position:relative;z-index:1;display:block;width:min(620px,100%);height:660px;object-fit:cover;object-position:center top;transform:none;filter:none;border:1px solid rgba(124,54,94,.12);border-radius:28px 28px 0 0;background:#fff;box-shadow:0 30px 70px rgba(82,38,61,.16)}
@media(max-width:1100px){.gli-hero__visual--single{min-height:720px;padding-top:54px}.gli-hero__visual--single>img{width:min(620px,92%);height:650px}}
@media(max-width:720px){.gli-hero__visual--single{min-height:570px;padding:28px 18px 0}.gli-hero__visual--single>img{width:100%;height:540px;object-position:center top;transform:none;border-radius:20px 20px 0 0}.gli-hero__visual--single .gli-hero__doctor{right:30px;bottom:22px;left:30px}}

/* Modern, scan-friendly women's-health concerns cards. */
.gli-concern-grid{counter-reset:gli-concern;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:64px 0 0;padding:0;border:0;list-style:none}
.gli-concern-grid li{counter-increment:gli-concern;position:relative;min-height:178px;display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:1px solid rgba(124,54,94,.14);border-radius:20px;background:linear-gradient(145deg,#fff 0%,#fbf4f7 100%);box-shadow:0 16px 38px rgba(68,37,55,.055);font-weight:400;line-height:1.35;overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.gli-concern-grid li::before{content:counter(gli-concern,decimal-leading-zero);display:grid;width:38px;height:38px;place-items:center;align-self:auto;margin:0;border-radius:50%;background:#f3e1e8;color:var(--gli-plum);font-size:.66rem;font-weight:800;letter-spacing:.04em}
.gli-concern-grid li::after{content:"";position:absolute;top:0;right:24px;left:24px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--gli-plum),#d692aa);transform:scaleX(.45);transform-origin:left;transition:transform .22s ease}
.gli-concern-grid li:nth-child(4n+2),.gli-concern-grid li:nth-child(4n+3){background:linear-gradient(145deg,#fff 0%,#f8eef2 100%)}
.gli-concern-grid li:hover{transform:translateY(-4px);border-color:rgba(124,54,94,.28);box-shadow:0 22px 48px rgba(68,37,55,.11)}
.gli-concern-grid li:hover::after{transform:scaleX(1)}
.gli-concern-grid li span{margin-top:28px;color:var(--gli-rose);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.gli-concern-grid li strong{display:block;margin-top:8px;color:var(--gli-ink);font-size:clamp(.98rem,1.15vw,1.12rem);font-weight:700;line-height:1.4}
@media(max-width:1100px){.gli-concern-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.gli-concern-grid li{min-height:165px}}
@media(max-width:720px){.gli-concern-grid{grid-template-columns:1fr 1fr;gap:11px;margin-top:42px}.gli-concern-grid li{min-height:166px;padding:18px}.gli-concern-grid li::after{right:18px;left:18px}.gli-concern-grid li span{margin-top:22px;font-size:.61rem}.gli-concern-grid li strong{font-size:.96rem}}
@media(max-width:520px){.gli-concern-grid{grid-template-columns:1fr}.gli-concern-grid li{min-height:132px;padding:18px 20px}.gli-concern-grid li::before{width:34px;height:34px}.gli-concern-grid li span{position:absolute;top:24px;right:20px;margin:0}.gli-concern-grid li strong{max-width:28ch;margin-top:20px;font-size:1rem}}
@media(prefers-reduced-motion:reduce){.gli-concern-grid li,.gli-concern-grid li::after{transition:none}.gli-concern-grid li:hover{transform:none}}

.doc-card__profile{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.15rem;color:inherit;font-size:.83rem;font-weight:750;text-decoration:none}.doc-card__profile span{color:var(--c-accent);transition:transform .2s ease}.doc-card__profile:hover span{transform:translateX(.22rem)}

/* Dr. Hitesh Mangal profile page — specialist redesign */
.dhm-page {
  --dhm-navy: #102c3e;
  --dhm-navy-deep: #0a2130;
  --dhm-teal: #27796f;
  --dhm-mint: #9fd9cd;
  --dhm-ink: #162638;
  --dhm-copy: #5d6c72;
  --dhm-soft: #f3f7f6;
  --dhm-pale: #e1efec;
  --dhm-line: #d4e1de;
  color: var(--dhm-ink);
  background: #f8faf9;
  overflow: clip;
}
.dhm-shell {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}
.dhm-section {
  padding-block: clamp(76px, 8vw, 118px);
}
.dhm-kicker {
  margin: 0 0 17px;
  color: var(--dhm-teal);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.dhm-section h2 {
  margin: 0;
  font-size: clamp(2.35rem, 4.1vw, 4rem);
  font-weight: 560;
  letter-spacing: -.045em;
  line-height: 1.03;
}
.dhm-section h2 em {
  color: var(--dhm-teal);
  font-family: var(--font-serif);
  font-weight: 500;
}

/* Specialist hero */
.dhm-hero {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  display: block;
  color: #fff;
  background: var(--dhm-navy-deep);
  overflow: hidden;
}
.dhm-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -8px;
  background: url("../images/home/durva-hospital-modern-exterior.png") center 44% / cover no-repeat;
  filter: blur(3px);
  transform: scale(1.025);
}
.dhm-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(91, 181, 165, .18), transparent 28%),
    linear-gradient(90deg, rgba(8, 29, 43, .98) 0%, rgba(12, 38, 54, .94) 48%, rgba(12, 38, 54, .70) 100%);
}
.dhm-hero__inner {
  padding-block: clamp(118px, 10vw, 150px) 72px;
}
.dhm-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 35px;
  color: rgba(255, 255, 255, .62);
  font-size: .78rem;
}
.dhm-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.dhm-breadcrumbs a:hover {
  color: #fff;
}
.dhm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: center;
}
.dhm-hero__copy {
  position: static;
  min-width: 0;
  display: block;
  padding: 0;
}
.dhm-hero .dhm-kicker {
  color: var(--dhm-mint);
}
.dhm-hero h1 {
  max-width: 680px;
  margin: 0;
  color: #fff;
  font-size: clamp(3.35rem, 5vw, 4.5rem);
  font-weight: 590;
  letter-spacing: -.055em;
  line-height: .98;
}
.dhm-hero__role {
  margin: 20px 0 0;
  color: var(--dhm-mint);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.dhm-page .dhm-hero .dhm-hero__copy > p.dhm-hero__role {
  max-width: none;
  margin-top: 20px;
  color: var(--dhm-mint);
  line-height: 1.25;
}
.dhm-hero__lead {
  max-width: 590px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.72;
}
.dhm-hero__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.dhm-hero__credentials li {
  padding: 9px 13px;
  border: 1px solid rgba(159, 217, 205, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .9);
  font-size: .75rem;
  font-weight: 650;
}
.dhm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.dhm-btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 21px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.dhm-btn:hover {
  transform: translateY(-2px);
}
.dhm-btn svg {
  width: 18px;
  height: 18px;
}
.dhm-btn--primary {
  border-color: var(--dhm-mint);
  background: var(--dhm-mint);
  color: var(--dhm-navy-deep);
}
.dhm-btn--ghost {
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.dhm-btn--ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .5);
}
.dhm-hero__visual {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .28);
}
.dhm-hero__photo {
  height: 590px;
  overflow: hidden;
  border-radius: 20px;
  background: #f5f3ed;
}
.dhm-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}
.dhm-hero__ribbon {
  position: absolute;
  right: 35px;
  bottom: 35px;
  left: 35px;
  display: grid;
  gap: 4px;
  padding: 19px 22px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-left: 4px solid var(--dhm-mint);
  background: rgba(8, 29, 43, .89);
  color: #fff;
  backdrop-filter: blur(12px);
}
.dhm-hero__ribbon span {
  color: var(--dhm-mint);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.dhm-hero__ribbon strong {
  font-size: 1rem;
}
.dhm-hero__ribbon small {
  color: rgba(255, 255, 255, .68);
}

/* Compact trust bar */
.dhm-trust {
  position: relative;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--dhm-line);
  box-shadow: 0 18px 48px rgba(22, 45, 53, .06);
}
.dhm-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.dhm-trust article {
  display: grid;
  min-height: 126px;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  align-items: center;
  padding: 22px 24px;
  border-right: 1px solid var(--dhm-line);
}
.dhm-trust article:last-child {
  border-right: 0;
}
.dhm-trust article > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--dhm-pale);
  color: var(--dhm-teal);
  font-size: .68rem;
  font-weight: 800;
}
.dhm-trust article div {
  display: grid;
  gap: 4px;
}
.dhm-trust strong {
  font-size: .94rem;
}
.dhm-trust small {
  color: #6d7b80;
  font-size: .74rem;
  line-height: 1.45;
}

/* Patient-centred introduction */
.dhm-approach {
  background: #f8faf9;
}
.dhm-approach__grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(50px, 9vw, 132px);
  align-items: start;
}
.dhm-section__heading h2 {
  max-width: 660px;
}
.dhm-approach__copy > p {
  max-width: 64ch;
  margin: 0 0 20px;
  color: var(--dhm-copy);
  font-size: 1rem;
  line-height: 1.78;
}
.dhm-check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--dhm-line);
  list-style: none;
}
.dhm-check-list li {
  position: relative;
  padding: 16px 0 16px 28px;
  border-bottom: 1px solid var(--dhm-line);
  font-size: .88rem;
  font-weight: 680;
}
.dhm-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--dhm-teal);
  font-weight: 800;
}

/* Knee and shoulder expertise */
.dhm-expertise {
  background: var(--dhm-pale);
}
.dhm-section__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .55fr);
  gap: clamp(42px, 8vw, 110px);
  align-items: end;
  margin-bottom: 52px;
}
.dhm-section__intro > p {
  margin: 0;
  color: var(--dhm-copy);
  line-height: 1.72;
}
.dhm-expertise__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.dhm-expertise-card {
  min-height: 510px;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 4.5vw, 54px);
  border: 1px solid rgba(16, 44, 62, .12);
  border-radius: 26px;
  overflow: hidden;
}
.dhm-expertise-card--knee {
  color: #fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(159, 217, 205, .18), transparent 30%),
    linear-gradient(145deg, #173f54, #0b2536);
}
.dhm-expertise-card--shoulder {
  color: var(--dhm-ink);
  background:
    radial-gradient(circle at 88% 8%, rgba(39, 121, 111, .12), transparent 31%),
    #f9fbfa;
}
.dhm-expertise-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dhm-expertise-card__top span {
  font-size: .7rem;
  font-weight: 800;
}
.dhm-expertise-card--knee .dhm-expertise-card__top span {
  color: var(--dhm-mint);
}
.dhm-expertise-card--shoulder .dhm-expertise-card__top span {
  color: var(--dhm-teal);
}
.dhm-expertise-card__top small {
  padding: 7px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .68;
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dhm-expertise-card h3 {
  margin: clamp(46px, 6vw, 78px) 0 20px;
  font-size: clamp(2.45rem, 4vw, 4.2rem);
  font-weight: 560;
  letter-spacing: -.055em;
  line-height: 1;
}
.dhm-expertise-card > p {
  max-width: 57ch;
  margin: 0;
  line-height: 1.68;
}
.dhm-expertise-card--knee > p {
  color: rgba(255, 255, 255, .7);
}
.dhm-expertise-card--shoulder > p {
  color: var(--dhm-copy);
}
.dhm-expertise-card ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  margin: 28px 0;
  padding: 0;
  border-top: 1px solid currentColor;
  list-style: none;
}
.dhm-expertise-card--knee ul {
  border-color: rgba(255, 255, 255, .18);
}
.dhm-expertise-card--shoulder ul {
  border-color: var(--dhm-line);
}
.dhm-expertise-card li {
  padding: 12px 0;
  border-bottom: 1px solid currentColor;
  font-size: .82rem;
  font-weight: 650;
}
.dhm-expertise-card--knee li {
  border-color: rgba(255, 255, 255, .18);
}
.dhm-expertise-card--shoulder li {
  border-color: var(--dhm-line);
}
.dhm-expertise-card li::before {
  content: "+";
  margin-right: 8px;
  color: var(--dhm-mint);
}
.dhm-expertise-card--shoulder li::before {
  color: var(--dhm-teal);
}
.dhm-expertise-card > a {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  margin-top: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-size: .83rem;
  font-weight: 750;
  text-decoration: none;
}

/* Linked care cards */
.dhm-care {
  background: #fff;
}
.dhm-care__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.dhm-care-card {
  position: relative;
  min-height: 245px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--dhm-line);
  border-radius: 20px;
  background: var(--dhm-soft);
  color: var(--dhm-ink);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.dhm-care-card:hover {
  transform: translateY(-5px);
  border-color: #a9c9c2;
  background: #fff;
  box-shadow: 0 24px 55px rgba(23, 57, 66, .10);
}
.dhm-care-card > span {
  color: var(--dhm-teal);
  font-size: .7rem;
  font-weight: 800;
}
.dhm-care-card h3 {
  margin: 38px 0 13px;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: -.035em;
}
.dhm-care-card p {
  margin: 0;
  color: var(--dhm-copy);
  font-size: .88rem;
  line-height: 1.62;
}
.dhm-care-card b {
  margin-top: auto;
  color: var(--dhm-teal);
  font-size: 1.2rem;
  font-weight: 500;
}

/* Training and care pathway */
.dhm-training {
  color: #fff;
  background:
    radial-gradient(circle at 9% 5%, rgba(159, 217, 205, .14), transparent 30%),
    var(--dhm-navy-deep);
}
.dhm-training .dhm-kicker {
  color: var(--dhm-mint);
}
.dhm-training__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(55px, 9vw, 130px);
  align-items: center;
}
.dhm-training__story h2 {
  max-width: 650px;
  color: #fff;
}
.dhm-training__story > p:not(.dhm-kicker) {
  max-width: 61ch;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, .66);
  line-height: 1.75;
}
.dhm-training__route {
  display: flex;
  align-items: center;
  margin-top: 42px;
}
.dhm-training__route span {
  display: grid;
  gap: 6px;
  font-size: .88rem;
  font-weight: 700;
}
.dhm-training__route span b {
  color: var(--dhm-mint);
  font-size: .65rem;
}
.dhm-training__route i {
  height: 1px;
  flex: 1;
  min-width: 25px;
  margin: 0 15px;
  background: rgba(159, 217, 205, .32);
}
.dhm-pathway {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background: rgba(255, 255, 255, .055);
}
.dhm-pathway ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dhm-pathway li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 19px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.dhm-pathway li:last-child {
  border-bottom: 0;
}
.dhm-pathway li > span {
  color: var(--dhm-mint);
  font-size: .68rem;
  font-weight: 800;
}
.dhm-pathway li div {
  display: grid;
  gap: 5px;
}
.dhm-pathway strong {
  font-size: 1rem;
}
.dhm-pathway small {
  color: rgba(255, 255, 255, .59);
  line-height: 1.5;
}

/* Philosophy and appointment */
.dhm-cta {
  padding: clamp(76px, 8vw, 118px) 0;
  color: var(--dhm-ink);
  background: #edf4f2;
}
.dhm-cta__card {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  padding: 0;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 10%, rgba(159, 217, 205, .16), transparent 28%),
    linear-gradient(135deg, #173f54, #0b2536);
  box-shadow: 0 34px 80px rgba(16, 44, 62, .16);
  overflow: hidden;
}
.dhm-cta__quote,
.dhm-cta__action {
  padding: clamp(34px, 5.5vw, 68px);
}
.dhm-cta__quote {
  border-right: 1px solid rgba(255, 255, 255, .15);
}
.dhm-cta .dhm-kicker {
  color: var(--dhm-mint);
}
.dhm-cta blockquote {
  max-width: 700px;
  margin: 0;
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 2.8vw, 2.8rem);
  line-height: 1.3;
}
.dhm-cta__quote > span {
  display: block;
  margin-top: 28px;
  color: var(--dhm-mint);
  font-size: .82rem;
  font-weight: 750;
}
.dhm-cta h2 {
  margin: 0;
  max-width: none;
  color: #fff;
  font-size: clamp(2.15rem, 3.4vw, 3.45rem);
  font-weight: 560;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.dhm-cta__action > p:not(.dhm-kicker) {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .65);
  line-height: 1.68;
}
.dhm-btn--light {
  margin-top: 0;
  border-color: #fff;
  background: #fff;
  color: var(--dhm-navy-deep);
}
.dhm-btn--outline-light {
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.dhm-page > .tst {
  border-top: 1px solid rgba(16, 44, 62, .08);
}

/* Keyboard and motion accessibility */
.dhm-page a:focus-visible {
  outline: 3px solid #efb24f;
  outline-offset: 4px;
}
@media (max-width: 1050px) {
  .dhm-hero__grid {
    gap: 44px;
  }
  .dhm-hero__photo {
    height: 540px;
  }
  .dhm-trust article {
    padding-inline: 18px;
  }
  .dhm-care__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 900px) {
  .dhm-hero {
    min-height: 0;
  }
  .dhm-hero::after {
    background: linear-gradient(180deg, rgba(8, 29, 43, .97), rgba(12, 38, 54, .85));
  }
  .dhm-hero__inner {
    padding-block: 112px 70px;
  }
  .dhm-hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .dhm-hero__copy {
    max-width: 680px;
  }
  .dhm-hero__visual {
    width: min(590px, 100%);
    margin-inline: auto;
  }
  .dhm-trust__grid {
    grid-template-columns: 1fr 1fr;
  }
  .dhm-trust article:nth-child(2) {
    border-right: 0;
  }
  .dhm-trust article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--dhm-line);
  }
  .dhm-approach__grid,
  .dhm-section__intro,
  .dhm-training__grid,
  .dhm-cta__card {
    grid-template-columns: 1fr;
  }
  .dhm-section__intro {
    gap: 22px;
  }
  .dhm-cta__quote {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
  }
}
@media (max-width: 680px) {
  .dhm-shell {
    width: min(100% - 32px, 1240px);
  }
  .dhm-section {
    padding-block: 68px;
  }
  .dhm-hero__inner {
    padding-block: 104px 48px;
  }
  .dhm-breadcrumbs {
    margin-bottom: 28px;
  }
  .dhm-hero h1 {
    font-size: clamp(2.85rem, 13.5vw, 4.15rem);
  }
  .dhm-hero__lead {
    font-size: .96rem;
  }
  .dhm-actions {
    flex-direction: column;
  }
  .dhm-btn {
    width: 100%;
  }
  .dhm-hero__visual {
    padding: 9px;
    border-radius: 22px;
  }
  .dhm-hero__photo {
    height: auto;
    border-radius: 15px 15px 0 0;
  }
  .dhm-hero__photo img {
    height: auto;
    aspect-ratio: 683 / 840;
    object-fit: cover;
    object-position: center 20%;
  }
  .dhm-hero__ribbon {
    position: static;
    padding: 18px;
    border: 0;
    border-left: 4px solid var(--dhm-mint);
    border-radius: 0 0 15px 15px;
    background: rgba(8, 29, 43, .94);
    backdrop-filter: none;
  }
  .dhm-check-list,
  .dhm-expertise__grid,
  .dhm-care__grid {
    grid-template-columns: 1fr;
  }
  .dhm-expertise-card {
    min-height: 0;
    padding: 28px;
  }
  .dhm-expertise-card h3 {
    margin-top: 45px;
  }
  .dhm-training__route {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dhm-training__route span {
    grid-template-columns: 34px 1fr;
    align-items: center;
  }
  .dhm-training__route i {
    display: none;
  }
}
@media (max-width: 480px) {
  .dhm-trust article {
    min-height: 112px;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 16px 12px;
  }
  .dhm-trust article > span {
    width: 32px;
    height: 32px;
    font-size: .6rem;
  }
  .dhm-trust strong {
    font-size: .82rem;
  }
  .dhm-trust small {
    font-size: .67rem;
  }
  .dhm-expertise-card ul {
    grid-template-columns: 1fr;
  }
  .dhm-care-card {
    min-height: 220px;
  }
  .dhm-cta__quote,
  .dhm-cta__action {
    padding: 28px 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dhm-page *,
  .dhm-page *::before,
  .dhm-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Arthroscopy dedicated page additions */
.ar-care-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ar-care-card{padding:clamp(28px,4vw,54px);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035)}.ar-care-card h3{max-width:560px;margin:42px 0 22px;font-size:clamp(2rem,3.2vw,3.6rem);line-height:1.03;letter-spacing:-.04em}.ar-care-card p{color:#aeb8c8;line-height:1.65}.ar-care-card ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:30px 0;padding:28px 0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);list-style:none}.ar-care-card li:before{content:"+";margin-right:9px;color:var(--jr-mint)}
.ar-sports{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:clamp(42px,7vw,105px);align-items:center;width:min(1440px,calc(100% - 64px));margin:clamp(80px,9vw,135px) auto;padding:clamp(42px,6vw,90px);background:linear-gradient(135deg,#e3f0ed 0%,#f4f7f6 72%);border:1px solid #d4e2df;border-radius:28px;box-shadow:0 28px 80px rgba(21,48,55,.08)}.ar-sports:before{content:"";position:absolute;left:0;top:70px;width:5px;height:92px;background:var(--jr-green);border-radius:0 5px 5px 0}.ar-sports h2{max-width:660px;margin:0 0 30px;font-size:clamp(3rem,4.8vw,5.3rem);font-weight:500;letter-spacing:-.055em;line-height:.94}.ar-sports__copy>p:not(.jr-kicker){max-width:650px;margin:0 0 17px;color:#52605f;line-height:1.72}.ar-sports__copy .ar-sports__lead{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid #c9d9d5;color:#253b3b;font-size:1.12rem}.ar-sports__audience{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0 0;padding:0;list-style:none}.ar-sports__audience li{padding:10px 15px;border:1px solid #b7cfca;border-radius:999px;background:rgba(255,255,255,.58);color:#31554f;font-size:.8rem;font-weight:650}.ar-sports__media{position:relative;margin:0;min-height:600px;overflow:hidden;border-radius:20px;box-shadow:0 24px 55px rgba(14,39,44,.18)}.ar-sports__media:after{content:"";position:absolute;inset:58% 0 0;background:linear-gradient(transparent,rgba(8,24,29,.78));pointer-events:none}.ar-sports__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.ar-sports:hover .ar-sports__media img{transform:scale(1.025)}.ar-sports__media figcaption{position:absolute;z-index:1;left:28px;right:28px;bottom:25px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;color:#fff}.ar-sports__media figcaption span{text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;color:var(--jr-mint)}.ar-sports__media figcaption strong{font-size:1.05rem}
.ar-sports__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.ar-symptoms{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin:32px 0;padding:0;list-style:none}.ar-symptoms li{padding:13px 0;border-bottom:1px solid #d4dcda;color:#334351}.ar-symptoms li:before{content:"+";margin-right:9px;color:var(--jr-green);font-weight:700}
.ar-diagnosis__visual{position:relative;min-height:680px;display:flex;flex-direction:column;justify-content:center;padding:clamp(44px,6vw,92px);background:radial-gradient(circle at 8% 18%,rgba(184,228,220,.19),transparent 30%),linear-gradient(145deg,#18243a,#0c1425 75%);color:#fff;overflow:hidden}.ar-diagnosis__visual:after{content:"";position:absolute;right:-90px;bottom:-90px;width:270px;height:270px;border:1px solid rgba(184,228,220,.16);border-radius:50%;box-shadow:0 0 0 42px rgba(184,228,220,.035),0 0 0 84px rgba(184,228,220,.02)}.ar-diagnosis__visual .jr-kicker{position:relative;z-index:1;color:var(--jr-mint)}.ar-pathway{position:relative;z-index:1;display:grid;gap:12px;margin:16px 0 34px;padding:0;list-style:none}.ar-pathway li{display:grid;grid-template-columns:54px 1fr;gap:20px;align-items:center;padding:22px 24px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.035);transition:.25s ease}.ar-pathway li:hover{transform:translateX(5px);border-color:rgba(184,228,220,.45)}.ar-pathway li.is-active{background:var(--jr-mint);border-color:var(--jr-mint);color:var(--jr-ink);box-shadow:0 16px 42px rgba(3,13,24,.25)}.ar-pathway>li>span{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.24);border-radius:50%;color:var(--jr-mint);font-size:.75rem;font-weight:700}.ar-pathway li.is-active>span{border-color:rgba(16,27,53,.25);color:var(--jr-ink)}.ar-pathway div{display:grid;gap:6px}.ar-pathway strong{font-size:clamp(1.55rem,2.2vw,2.35rem);font-weight:550;letter-spacing:-.035em}.ar-pathway small{max-width:500px;color:#aeb8c8;font-size:.88rem;line-height:1.45}.ar-pathway li.is-active small{color:#3d5854}.ar-pathway__note{position:relative;z-index:1;margin:0;color:#8f9cad;font-size:.85rem}.ar-pathway__note:before{content:"";display:inline-block;width:28px;height:1px;margin:0 10px 4px 0;background:var(--jr-mint)}.ar-closing .jr-priorities{grid-template-columns:repeat(5,1fr)}
@media(max-width:960px){.ar-care-grid,.ar-sports{grid-template-columns:1fr}.ar-sports{width:min(100% - 40px,1440px)}.ar-sports__media{min-height:500px}.ar-closing .jr-priorities{grid-template-columns:1fr 1fr}.ar-closing .jr-priorities li:last-child{grid-column:1/-1}}
@media(max-width:640px){.ar-care-card ul,.ar-symptoms{grid-template-columns:1fr}.ar-care-card{padding:28px 20px}.ar-sports{width:calc(100% - 24px);padding:48px 18px 18px;border-radius:20px}.ar-sports:before{top:46px;height:70px}.ar-sports__media{min-height:390px;border-radius:14px}.ar-sports__media figcaption{left:18px;right:18px;bottom:18px;align-items:flex-start;flex-direction:column;gap:6px}.ar-diagnosis__visual{min-height:480px;padding:42px 18px}.ar-closing .jr-priorities{grid-template-columns:1fr}.ar-closing .jr-priorities li:last-child{grid-column:auto}}

/* Non-Surgical Treatment dedicated page */
.ns-page{--jr-mint:#bdebdc;--jr-green:#18745e}.ns-hero h1{max-width:850px;font-size:clamp(3.7rem,6.6vw,7.2rem)}.ns-conditions{padding:clamp(85px,10vw,145px) 0;background:#e5f1ed}.ns-section-head{display:grid;grid-template-columns:1.2fr .65fr;gap:clamp(36px,7vw,100px);align-items:end;margin-bottom:54px}.ns-section-head h2{max-width:900px;margin:0;font-size:clamp(3rem,5vw,5.6rem);font-weight:500;letter-spacing:-.055em;line-height:.96}.ns-section-head>p{margin:0;color:#52615f;line-height:1.7}.ns-condition-list{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;border-top:1px solid #aecbc4;list-style:none}.ns-condition-list li{position:relative;padding:22px 20px 22px 34px;border-right:1px solid #aecbc4;border-bottom:1px solid #aecbc4;color:#243b39;font-weight:620}.ns-condition-list li:nth-child(3n){border-right:0}.ns-condition-list li:before{content:"+";position:absolute;left:8px;color:var(--jr-green);font-weight:800}.ns-care-grid .ar-care-card{min-height:540px}.ns-care-grid .ar-care-card h3{margin-top:34px}.ns-return .ar-pathway{gap:8px}.ns-return .ar-pathway li{padding-block:15px}.ns-return .ar-pathway strong{font-size:clamp(1.25rem,1.8vw,1.85rem)}.ns-special-cases{padding:clamp(85px,10vw,145px) 0}.ns-special-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ns-special-grid article{position:relative;padding:clamp(34px,5vw,70px);border:1px solid #d2dfdc;background:#fff}.ns-special-grid article>span{position:absolute;right:32px;top:30px;color:#9bb8b1;font-size:.82rem}.ns-special-grid h3{margin:34px 0 24px;font-size:clamp(2.3rem,3.6vw,4.2rem);font-weight:500;letter-spacing:-.05em;line-height:1}.ns-special-grid article>p:not(.jr-kicker){color:#52605f;line-height:1.72}.ns-closing .jr-priorities{grid-template-columns:repeat(6,1fr)}.ns-closing .jr-priorities li{font-size:.9rem;line-height:1.35}.ns-surgery .jr-guidance__aside h3{margin:10px 0 24px}
@media(max-width:960px){.ns-section-head,.ns-special-grid{grid-template-columns:1fr}.ns-condition-list{grid-template-columns:1fr 1fr}.ns-condition-list li:nth-child(3n){border-right:1px solid #aecbc4}.ns-condition-list li:nth-child(2n){border-right:0}.ns-closing .jr-priorities{grid-template-columns:1fr 1fr}.ns-closing .jr-priorities li:last-child{grid-column:auto}}
@media(max-width:640px){.ns-hero h1{font-size:3.35rem}.ns-condition-list{grid-template-columns:1fr}.ns-condition-list li,.ns-condition-list li:nth-child(3n){border-right:0}.ns-care-grid .ar-care-card{min-height:auto}.ns-closing .jr-priorities{grid-template-columns:1fr}}

/* Pediatric Orthopedics dedicated page */
.po-page{--jr-mint:#c8ecdf;--jr-green:#1b765f}.po-hero{background:#eef3ee}.po-hero h1{font-size:clamp(4rem,7.2vw,7.6rem)}.po-care-list{display:grid;grid-template-columns:repeat(4,1fr);margin:70px 0 0;padding:0;border-top:1px solid #c6d5d1;list-style:none}.po-care-list li{position:relative;padding:22px 14px 22px 34px;border-right:1px solid #c6d5d1;border-bottom:1px solid #c6d5d1;font-weight:620}.po-care-list li:nth-child(4n){border-right:0}.po-care-list li:before{content:"+";position:absolute;left:10px;color:var(--jr-green)}.po-clubfoot{padding:clamp(85px,10vw,145px) 0;background:#dceee8}.po-clubfoot__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(45px,8vw,125px);align-items:start}.po-clubfoot h2,.po-section-head h2,.po-play h2,.po-followup h2{margin:0 0 32px;font-size:clamp(3rem,5vw,5.5rem);font-weight:500;letter-spacing:-.055em;line-height:.96}.po-clubfoot__copy>p:not(.jr-kicker),.po-play__copy>p:not(.jr-kicker){color:#4d5e5a;line-height:1.72}.po-highlight{margin-top:28px!important;padding:22px 0;border-top:1px solid #abcac1;border-bottom:1px solid #abcac1;color:#1d4038!important;font-weight:650}.po-clubfoot__steps{display:grid;grid-template-columns:1fr 1fr;gap:12px}.po-clubfoot__steps article{min-height:240px;padding:30px;background:#f7faf8;border:1px solid #c5dbd5}.po-clubfoot__steps span{color:var(--jr-green);font-size:.75rem}.po-clubfoot__steps h3{margin:58px 0 14px;font-size:1.55rem}.po-clubfoot__steps p{margin:0;color:#586763;line-height:1.55}.po-fracture-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.po-fracture-grid article{padding:clamp(32px,5vw,68px);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035)}.po-fracture-grid h3{margin:40px 0 24px;font-size:clamp(2.4rem,3.8vw,4.4rem);font-weight:500;letter-spacing:-.05em;line-height:1}.po-fracture-grid p{color:#aeb8c8;line-height:1.68}.po-growth-card{background:var(--jr-mint)!important;color:var(--jr-ink)}.po-growth-card .jr-service-card__num,.po-growth-card p{color:#31564e}.po-development{padding:clamp(85px,10vw,145px) 0}.po-section-head{display:grid;grid-template-columns:1.2fr .65fr;gap:clamp(36px,7vw,100px);align-items:end;margin-bottom:58px}.po-section-head>p{color:#52615f;line-height:1.7}.po-development-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.po-development-grid article{position:relative;padding:clamp(32px,5vw,66px);border:1px solid #d2dfdc;background:#fff}.po-development-grid article>span{position:absolute;right:30px;top:28px;color:#92aea7;font-size:.8rem}.po-development-grid h3{margin:34px 0 24px;font-size:clamp(2.2rem,3.3vw,3.8rem);font-weight:500;letter-spacing:-.045em;line-height:1.03}.po-development-grid article>p:not(.jr-kicker){color:#52605f;line-height:1.7}.po-play{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(45px,8vw,130px);align-items:center;margin-bottom:clamp(85px,10vw,145px);padding:clamp(45px,6vw,92px);background:#e3efe8;border:1px solid #ceded8;border-radius:28px}.po-play__marker{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 35% 25%,#d8f3ea,#95c9b9);color:#123d32;box-shadow:0 25px 70px rgba(35,89,73,.16)}.po-play__marker span{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem}.po-play__marker strong{margin:8px 0;font-size:clamp(3.4rem,7vw,7rem);font-weight:500;letter-spacing:-.08em}.po-followup{padding:clamp(85px,10vw,145px) 0}.po-followup__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,130px)}.po-followup__grid h2{max-width:800px}.po-followup__grid>div p{margin:0 0 22px;color:#52605f;font-size:1.07rem;line-height:1.75}.po-closing .jr-priorities{grid-template-columns:repeat(6,1fr)}.po-closing .jr-priorities li{font-size:.9rem}.po-planning .ar-pathway{gap:8px}.po-planning .ar-pathway li{padding-block:15px}.po-planning .ar-pathway strong{font-size:clamp(1.2rem,1.8vw,1.8rem)}
@media(max-width:960px){.po-care-list{grid-template-columns:1fr 1fr}.po-care-list li:nth-child(4n){border-right:1px solid #c6d5d1}.po-care-list li:nth-child(2n){border-right:0}.po-clubfoot__grid,.po-fracture-grid,.po-section-head,.po-development-grid,.po-play,.po-followup__grid{grid-template-columns:1fr}.po-play__marker{width:min(420px,90%);margin:auto}.po-closing .jr-priorities{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.po-hero h1{font-size:3.55rem}.po-care-list,.po-clubfoot__steps{grid-template-columns:1fr}.po-care-list li,.po-care-list li:nth-child(4n){border-right:0}.po-clubfoot__steps article{min-height:210px}.po-play{width:calc(100% - 24px);padding:42px 20px;border-radius:20px}.po-closing .jr-priorities{grid-template-columns:1fr}}

/* Spine Care dedicated page */
.spc-page{--jr-mint:#b9e3dc;--jr-green:#217465}.spc-hero{background:#e7efed}.spc-hero h1{font-size:clamp(4.8rem,9vw,9rem)}.spc-hero .jr-hero__media img{object-position:24% center}.spc-pathway{padding:0;background:#142036;color:#fff}.spc-pathway ol{display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none}.spc-pathway li{padding:28px 18px;border-right:1px solid #334158;font-size:.9rem;line-height:1.35}.spc-pathway li:last-child{border:0}.spc-pathway span{display:block;margin-bottom:10px;color:var(--jr-mint);font-size:.7rem}.spc-condition-list{display:grid;grid-template-columns:repeat(3,1fr);margin:70px 0 0;padding:0;border-top:1px solid #c5d4d1;list-style:none}.spc-condition-list li{position:relative;padding:22px 18px 22px 36px;border-right:1px solid #c5d4d1;border-bottom:1px solid #c5d4d1;font-weight:620}.spc-condition-list li:nth-child(3n){border-right:0}.spc-condition-list li:before{content:"+";position:absolute;left:10px;color:var(--jr-green)}.spc-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.spc-card{padding:clamp(30px,4.5vw,62px);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035)}.spc-card>span{color:var(--jr-mint);font-size:.78rem}.spc-card h3{margin:38px 0 24px;font-size:clamp(2.25rem,3.4vw,4rem);font-weight:500;letter-spacing:-.045em;line-height:1.02}.spc-card p{color:#aeb8c8;line-height:1.68}.spc-card--wide{grid-column:1/-1}.spc-card__columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,7vw,100px)}.spc-key-message{padding:22px 0;border-top:1px solid rgba(185,227,220,.4);border-bottom:1px solid rgba(185,227,220,.4);color:#fff!important;font-size:1.15rem;font-weight:650}.spc-conservative{padding:clamp(85px,10vw,145px) 0}.spc-section-head{display:grid;grid-template-columns:1.2fr .65fr;gap:clamp(35px,7vw,100px);align-items:end;margin-bottom:58px}.spc-section-head h2,.spc-consult h2,.spc-diagnosis h2{margin:0;font-size:clamp(3rem,5vw,5.6rem);font-weight:500;letter-spacing:-.055em;line-height:.96}.spc-section-head>p{margin:0;color:#52615f;line-height:1.7}.spc-treatment-list{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;border-top:1px solid #c8d6d3;list-style:none}.spc-treatment-list li{padding:25px 18px;border-right:1px solid #c8d6d3;border-bottom:1px solid #c8d6d3;font-weight:620}.spc-treatment-list li:nth-child(4n){border-right:0}.spc-treatment-list span{display:block;margin-bottom:14px;color:var(--jr-green);font-size:.7rem}.spc-rehab .ar-pathway{gap:8px}.spc-rehab .ar-pathway li{padding-block:15px}.spc-rehab .ar-pathway strong{font-size:clamp(1.25rem,1.8vw,1.85rem)}.spc-consult{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(45px,8vw,125px);align-items:center;padding:clamp(85px,10vw,145px) 0}.spc-consult__main>p:not(.jr-kicker){max-width:700px;color:#52605f;line-height:1.75}.spc-alert{padding:clamp(32px,4vw,58px);background:#8e332f;color:#fff}.spc-alert>span{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:#ffd1ca}.spc-alert h3{margin:24px 0 28px;font-size:clamp(2rem,3vw,3.5rem);font-weight:500;letter-spacing:-.04em;line-height:1.03}.spc-alert ul{display:grid;gap:0;margin:0;padding:0;list-style:none}.spc-alert li{padding:15px 0;border-top:1px solid rgba(255,255,255,.25)}.spc-alert li:before{content:"!";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:10px;border:1px solid #ffd1ca;border-radius:50%;color:#ffd1ca;font-size:.7rem;font-weight:800}.spc-diagnosis{padding:clamp(85px,10vw,145px) 0;background:#dbece8}.spc-diagnosis__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,130px)}.spc-diagnosis__copy p{margin:0 0 22px;color:#4f605c;font-size:1.06rem;line-height:1.75}.spc-diagnosis__emphasis{margin-top:38px!important;padding:26px 0;border-top:1px solid #aecbc4;border-bottom:1px solid #aecbc4;color:#183c34!important;font-weight:650}.spc-closing .jr-priorities{grid-template-columns:repeat(6,1fr)}.spc-closing .jr-priorities li{font-size:.9rem}
@media(max-width:960px){.spc-pathway ol{grid-template-columns:1fr 1fr}.spc-pathway li:last-child{grid-column:1/-1}.spc-condition-list,.spc-treatment-list{grid-template-columns:1fr 1fr}.spc-condition-list li:nth-child(3n),.spc-treatment-list li:nth-child(4n){border-right:1px solid #c5d4d1}.spc-condition-list li:nth-child(2n),.spc-treatment-list li:nth-child(2n){border-right:0}.spc-section-head,.spc-consult,.spc-diagnosis__grid{grid-template-columns:1fr}.spc-closing .jr-priorities{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.spc-hero h1{font-size:4.2rem}.spc-pathway ol,.spc-condition-list,.spc-treatment-list,.spc-card-grid,.spc-card__columns{grid-template-columns:1fr}.spc-pathway li,.spc-pathway li:last-child{grid-column:auto;border-right:0;border-bottom:1px solid #334158}.spc-condition-list li,.spc-condition-list li:nth-child(3n),.spc-treatment-list li,.spc-treatment-list li:nth-child(4n){border-right:0}.spc-card--wide{grid-column:auto}.spc-closing .jr-priorities{grid-template-columns:1fr}}

/* Frozen Shoulder dedicated treatment page */
.fs-page{--jr-mint:#c5e7dd;--jr-green:#267565}.fs-hero{background:#e9f1ef}.fs-hero h1{max-width:850px;font-size:clamp(4rem,7vw,7.4rem)}.fs-symptoms{padding:clamp(85px,10vw,145px) 0;background:#dfeee9}.fs-section-head{display:grid;grid-template-columns:1.2fr .65fr;gap:clamp(36px,7vw,100px);align-items:end;margin-bottom:56px}.fs-section-head h2,.fs-evaluation h2{margin:0;font-size:clamp(3rem,5vw,5.6rem);font-weight:500;letter-spacing:-.055em;line-height:.96}.fs-section-head>p{margin:0;color:#52615f;line-height:1.7}.fs-symptom-list{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;border-top:1px solid #b9cec8;list-style:none}.fs-symptom-list li{position:relative;padding:24px 16px 24px 36px;border-right:1px solid #b9cec8;border-bottom:1px solid #b9cec8;font-weight:620}.fs-symptom-list li:nth-child(4n){border-right:0}.fs-symptom-list li:before{content:"+";position:absolute;left:10px;color:var(--jr-green)}.fs-stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.fs-stage-grid article{min-height:430px;padding:clamp(28px,4vw,50px);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035)}.fs-stage-grid span{color:var(--jr-mint);font-size:.78rem}.fs-stage-grid h3{margin:70px 0 24px;font-size:clamp(2rem,3vw,3.5rem);font-weight:500;letter-spacing:-.045em;line-height:1.03}.fs-stage-grid p{color:#aeb8c8;line-height:1.7}.fs-evaluation{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(45px,8vw,125px);padding:clamp(85px,10vw,145px) 0}.fs-evaluation__main>p:not(.jr-kicker),.fs-causes>p:not(.jr-kicker){color:#52605f;line-height:1.73}.fs-evaluation__emphasis{margin-top:30px;padding:24px 0;border-top:1px solid #c2d2ce;border-bottom:1px solid #c2d2ce;color:#1b4037!important;font-weight:650}.fs-causes{align-self:center;padding:clamp(30px,4vw,54px);background:#fff;border:1px solid #d4e0dd}.fs-causes h3{margin:10px 0 26px;font-size:clamp(2rem,3vw,3.4rem);font-weight:500;letter-spacing:-.04em;line-height:1.04}.fs-treatment{padding:clamp(85px,10vw,145px) 0;background:#d8ebe5}.fs-treatment-list{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;border-top:1px solid #aec8c1;list-style:none}.fs-treatment-list li{padding:25px 18px;border-right:1px solid #aec8c1;border-bottom:1px solid #aec8c1;font-weight:620}.fs-treatment-list li:nth-child(4n){border-right:0}.fs-treatment-list span{display:block;margin-bottom:14px;color:var(--jr-green);font-size:.7rem}.fs-rehab .ar-pathway{gap:8px}.fs-rehab .ar-pathway li{padding-block:15px}.fs-rehab .ar-pathway strong{font-size:clamp(1.2rem,1.8vw,1.85rem)}.fs-closing .jr-priorities{grid-template-columns:repeat(6,1fr)}.fs-closing .jr-priorities li{font-size:.9rem}
@media(max-width:960px){.fs-section-head,.fs-evaluation{grid-template-columns:1fr}.fs-stage-grid{grid-template-columns:1fr}.fs-stage-grid article{min-height:auto}.fs-symptom-list,.fs-treatment-list{grid-template-columns:1fr 1fr}.fs-symptom-list li:nth-child(4n),.fs-treatment-list li:nth-child(4n){border-right:1px solid #b9cec8}.fs-symptom-list li:nth-child(2n),.fs-treatment-list li:nth-child(2n){border-right:0}.fs-closing .jr-priorities{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.fs-hero h1{font-size:3.55rem}.fs-symptom-list,.fs-treatment-list{grid-template-columns:1fr}.fs-symptom-list li,.fs-symptom-list li:nth-child(4n),.fs-treatment-list li,.fs-treatment-list li:nth-child(4n){border-right:0}.fs-closing .jr-priorities{grid-template-columns:1fr}}

/* Arthritis dedicated treatment page */
.aa-page{--jr-mint:#c6e7dc;--jr-green:#24725f}.aa-hero{background:#e9f1ee}.aa-hero h1{max-width:860px;font-size:clamp(4.3rem,7.4vw,7.8rem)}.aa-hero .jr-hero__media img{object-position:center}.aa-types{padding:clamp(85px,10vw,145px) 0;background:#dfeee9}.aa-section-head{display:grid;grid-template-columns:1.2fr .65fr;gap:clamp(36px,7vw,100px);align-items:end;margin-bottom:56px}.aa-section-head h2,.aa-oa h2,.aa-ra h2,.aa-evaluation h2,.aa-consult h2{margin:0;font-size:clamp(3rem,5vw,5.6rem);font-weight:500;letter-spacing:-.055em;line-height:.96}.aa-section-head>p{margin:0;color:#52615f;line-height:1.7}.aa-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.aa-type-grid article{min-height:460px;padding:clamp(30px,5vw,66px);background:#f8fbfa;border:1px solid #c3d8d2}.aa-type-grid article>span{color:var(--jr-green);font-size:.76rem}.aa-type-grid h3{margin:70px 0 24px;font-size:clamp(2.8rem,4.5vw,5rem);font-weight:500;letter-spacing:-.055em}.aa-type-grid p{color:#52605f;line-height:1.72}.aa-type-grid strong{display:block;margin-top:32px;padding-top:24px;border-top:1px solid #c7d8d4;color:#24483f;line-height:1.55}.aa-oa{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(45px,8vw,125px);padding:clamp(85px,10vw,145px) 0}.aa-oa__copy>p:not(.jr-kicker),.aa-knee-card>p:not(.jr-kicker){color:#52605f;line-height:1.72}.aa-symptoms{display:grid;grid-template-columns:1fr 1fr;margin:38px 0 0;padding:0;border-top:1px solid #cad7d4;list-style:none}.aa-symptoms li{position:relative;padding:16px 12px 16px 28px;border-bottom:1px solid #cad7d4;font-weight:620}.aa-symptoms li:before{content:"+";position:absolute;left:4px;color:var(--jr-green)}.aa-knee-card{align-self:center;padding:clamp(32px,4.5vw,58px);background:#fff;border:1px solid #d1dfdb}.aa-knee-card h3{margin:12px 0 26px;font-size:clamp(2.2rem,3.4vw,3.8rem);font-weight:500;letter-spacing:-.045em;line-height:1.02}.aa-emphasis{padding:22px 0;border-top:1px solid #c3d4d0;border-bottom:1px solid #c3d4d0;color:#184236!important;font-weight:700}.aa-ra{padding:clamp(85px,10vw,145px) 0;background:#142036;color:#fff}.aa-ra__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,125px)}.aa-ra .jr-kicker{color:var(--jr-mint)}.aa-ra__copy>p{color:#b4bfca;line-height:1.75}.aa-ra-list{display:grid;grid-template-columns:1fr 1fr;margin:32px 0;padding:0;border-top:1px solid #344158;list-style:none}.aa-ra-list li{padding:16px 8px;border-bottom:1px solid #344158;color:#fff}.aa-ra-list li:before{content:"+";margin-right:9px;color:var(--jr-mint)}.aa-evaluation{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(45px,8vw,125px);padding:clamp(85px,10vw,145px) 0}.aa-evaluation__main>p:not(.jr-kicker){color:#52605f;font-size:1.05rem;line-height:1.75}.aa-evaluation-list{margin:0;padding:0;list-style:none}.aa-evaluation-list li{display:grid;grid-template-columns:56px 1fr;align-items:center;padding:23px 0;border-bottom:1px solid #cbd8d5;font-size:1.05rem;font-weight:620}.aa-evaluation-list span{color:var(--jr-green);font-size:.72rem}.aa-treatment{padding:clamp(85px,10vw,145px) 0;background:#dcece7}.aa-treatment-list{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;border-top:1px solid #b4cbc5;list-style:none}.aa-treatment-list li{padding:25px 18px;border-right:1px solid #b4cbc5;border-bottom:1px solid #b4cbc5;font-weight:620}.aa-treatment-list li:nth-child(4n){border-right:0}.aa-treatment-list span{display:block;margin-bottom:14px;color:var(--jr-green);font-size:.7rem}.aa-rehab .ar-pathway{gap:9px}.aa-rehab .ar-pathway li{padding-block:18px}.aa-rehab .ar-pathway strong{font-size:clamp(1.25rem,1.9vw,1.9rem)}.aa-rehab .jr-planning__copy h3{margin:38px 0 12px;font-size:1.65rem}.aa-option-list{margin:26px 0 0;padding:0;list-style:none}.aa-option-list li{padding:17px 0;border-top:1px solid rgba(255,255,255,.18)}.aa-option-list li:before{content:"+";margin-right:10px;color:var(--jr-mint)}.aa-consult{padding:clamp(85px,10vw,145px) 0;background:#dcece7}.aa-consult__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,125px)}.aa-consult__grid>div:last-child p{margin:0 0 22px;color:#4f605c;font-size:1.07rem;line-height:1.75}.aa-closing .jr-priorities{grid-template-columns:repeat(6,1fr)}.aa-closing .jr-priorities li{font-size:.86rem;line-height:1.35}
@media(max-width:960px){.aa-section-head,.aa-type-grid,.aa-oa,.aa-ra__grid,.aa-evaluation,.aa-consult__grid{grid-template-columns:1fr}.aa-type-grid article{min-height:auto}.aa-treatment-list{grid-template-columns:1fr 1fr}.aa-treatment-list li:nth-child(4n){border-right:1px solid #b4cbc5}.aa-treatment-list li:nth-child(2n){border-right:0}.aa-closing .jr-priorities{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.aa-hero h1{font-size:3.65rem}.aa-symptoms,.aa-ra-list,.aa-treatment-list{grid-template-columns:1fr}.aa-treatment-list li,.aa-treatment-list li:nth-child(4n){border-right:0}.aa-closing .jr-priorities{grid-template-columns:1fr}}

/* Total Hip Replacement dedicated treatment page */
.hrp-page{--jr-mint:#c6e8df;--jr-green:#237464}.hrp-hero{background:#e9f1ef}.hrp-hero h1{max-width:870px;font-size:clamp(4.2rem,7.2vw,7.7rem)}.hrp-hero .jr-hero__media img{object-position:center}.hrp-conditions,.hrp-signs,.hrp-recovery{padding:clamp(85px,10vw,145px) 0;background:#dfeee9}.hrp-section-head{display:grid;grid-template-columns:1.2fr .65fr;gap:clamp(36px,7vw,100px);align-items:end;margin-bottom:56px}.hrp-section-head h2,.hrp-conservative h2,.hrp-evaluation h2{margin:0;font-size:clamp(3rem,5vw,5.6rem);font-weight:500;letter-spacing:-.055em;line-height:.96}.hrp-section-head>p{margin:0;color:#52615f;line-height:1.7}.hrp-condition-list,.hrp-sign-list{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;border-top:1px solid #b8cec8;list-style:none}.hrp-condition-list li,.hrp-sign-list li{position:relative;padding:24px 16px 24px 36px;border-right:1px solid #b8cec8;border-bottom:1px solid #b8cec8;font-weight:620}.hrp-condition-list li:nth-child(3n),.hrp-sign-list li:nth-child(3n){border-right:0}.hrp-condition-list li:before,.hrp-sign-list li:before{content:"+";position:absolute;left:10px;color:var(--jr-green)}.hrp-cause-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hrp-cause-grid article{min-height:430px;padding:clamp(30px,4.5vw,60px);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035)}.hrp-cause-grid span{color:var(--jr-mint);font-size:.78rem}.hrp-cause-grid h3{margin:66px 0 24px;font-size:clamp(2.3rem,3.6vw,4.1rem);font-weight:500;letter-spacing:-.05em;line-height:1.02}.hrp-cause-grid p{color:#aeb8c8;line-height:1.7}.hrp-conservative,.hrp-evaluation{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(45px,8vw,125px);padding:clamp(85px,10vw,145px) 0}.hrp-conservative__copy>p:not(.jr-kicker),.hrp-evaluation__main>p:not(.jr-kicker){color:#52605f;font-size:1.04rem;line-height:1.74}.hrp-emphasis{margin-top:30px!important;padding:24px 0;border-top:1px solid #c2d2ce;border-bottom:1px solid #c2d2ce;color:#1b4037!important;font-weight:650}.hrp-care-list{display:grid;grid-template-columns:1fr 1fr;align-self:center;margin:0;padding:0;border-top:1px solid #c5d5d1;list-style:none}.hrp-care-list li{padding:22px 14px;border-bottom:1px solid #c5d5d1;font-weight:620}.hrp-care-list span{display:block;margin-bottom:12px;color:var(--jr-green);font-size:.7rem}.hrp-evaluation-list{margin:0;padding:0;list-style:none}.hrp-evaluation-list li{display:grid;grid-template-columns:58px 1fr;align-items:center;padding:23px 0;border-bottom:1px solid #cad8d5;font-weight:620}.hrp-evaluation-list span{color:var(--jr-green);font-size:.72rem}.hrp-surgery .ar-pathway{gap:8px}.hrp-surgery .ar-pathway li{padding-block:15px}.hrp-surgery .ar-pathway strong{font-size:clamp(1.2rem,1.8vw,1.85rem)}.hrp-recovery-grid{display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;border-top:1px solid #b7ccc6;list-style:none}.hrp-recovery-grid li{min-height:260px;padding:28px 18px;border-right:1px solid #b7ccc6;border-bottom:1px solid #b7ccc6}.hrp-recovery-grid li:last-child{border-right:0}.hrp-recovery-grid span{display:block;color:var(--jr-green);font-size:.72rem}.hrp-recovery-grid strong{display:block;margin:68px 0 14px;font-size:1.35rem}.hrp-recovery-grid small{color:#53635f;line-height:1.55}.hrp-closing .jr-priorities{grid-template-columns:repeat(7,1fr)}.hrp-closing .jr-priorities li{font-size:.82rem;line-height:1.35}
@media(max-width:960px){.hrp-section-head,.hrp-cause-grid,.hrp-conservative,.hrp-evaluation{grid-template-columns:1fr}.hrp-cause-grid article{min-height:auto}.hrp-condition-list,.hrp-sign-list{grid-template-columns:1fr 1fr}.hrp-condition-list li:nth-child(3n),.hrp-sign-list li:nth-child(3n){border-right:1px solid #b8cec8}.hrp-condition-list li:nth-child(2n),.hrp-sign-list li:nth-child(2n){border-right:0}.hrp-recovery-grid{grid-template-columns:1fr 1fr}.hrp-recovery-grid li:last-child{grid-column:1/-1}.hrp-closing .jr-priorities{grid-template-columns:1fr 1fr}.hrp-closing .jr-priorities li:last-child{grid-column:1/-1}}
@media(max-width:640px){.hrp-hero h1{font-size:3.55rem}.hrp-condition-list,.hrp-sign-list,.hrp-care-list,.hrp-recovery-grid{grid-template-columns:1fr}.hrp-condition-list li,.hrp-condition-list li:nth-child(3n),.hrp-sign-list li,.hrp-sign-list li:nth-child(3n){border-right:0}.hrp-recovery-grid li,.hrp-recovery-grid li:last-child{grid-column:auto;border-right:0}.hrp-closing .jr-priorities{grid-template-columns:1fr}.hrp-closing .jr-priorities li:last-child{grid-column:auto}}

/* Slip Disc / Sciatica dedicated treatment page */
.sds-page{--jr-mint:#c7e8df;--jr-green:#237464}.sds-hero{background:#e9f1ef}.sds-hero h1{max-width:900px;font-size:clamp(4rem,7vw,7.5rem)}.sds-hero .jr-hero__media img{object-position:center}.sds-sciatica,.sds-symptoms,.sds-evaluation,.sds-urgent{padding:clamp(85px,10vw,145px) 0;background:#dfeee9}.sds-sciatica__grid,.sds-evaluation__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,125px)}.sds-sciatica h2,.sds-section-head h2,.sds-causes h2,.sds-treatment h2,.sds-evaluation h2{margin:0;font-size:clamp(3rem,5vw,5.6rem);font-weight:500;letter-spacing:-.055em;line-height:.96}.sds-sciatica__copy p,.sds-section-head>p,.sds-causes__copy>p:not(.jr-kicker),.sds-treatment__copy>p:not(.jr-kicker),.sds-evaluation__grid p{color:#52615f;font-size:1.04rem;line-height:1.74}.sds-inline-list,.sds-list,.sds-treatment-list,.sds-urgent-list{display:grid;margin:32px 0 0;padding:0;border-top:1px solid #b8cec8;list-style:none}.sds-inline-list{grid-template-columns:repeat(3,1fr)}.sds-list{grid-template-columns:repeat(4,1fr)}.sds-treatment-list{grid-template-columns:repeat(4,1fr);align-self:center;margin-top:0}.sds-urgent-list{grid-template-columns:repeat(4,1fr)}.sds-inline-list li,.sds-list li,.sds-treatment-list li,.sds-urgent-list li{position:relative;padding:22px 16px 22px 36px;border-right:1px solid #b8cec8;border-bottom:1px solid #b8cec8;font-weight:620}.sds-inline-list li:nth-child(3n),.sds-urgent-list li:nth-child(4n),.sds-list li:nth-child(4n),.sds-treatment-list li:nth-child(4n){border-right:0}.sds-inline-list li:before,.sds-list li:before,.sds-urgent-list li:before{content:"+";position:absolute;left:10px;color:var(--jr-green)}.sds-treatment-list span{display:block;margin-bottom:13px;color:var(--jr-green);font-size:.7rem}.sds-compare,.sds-causes,.sds-treatment{padding:clamp(85px,10vw,145px) 0}.sds-section-head{display:grid;grid-template-columns:1.2fr .65fr;gap:clamp(36px,7vw,100px);align-items:end;margin-bottom:56px}.sds-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sds-card-grid article{min-height:420px;padding:clamp(30px,4.5vw,60px);background:#142036;color:#fff}.sds-card-grid span{color:var(--jr-mint);font-size:.78rem}.sds-card-grid h3{margin:68px 0 24px;font-size:clamp(2.8rem,4.6vw,5rem);font-weight:500;letter-spacing:-.055em}.sds-card-grid p{color:#b4bfca;line-height:1.7}.sds-causes,.sds-treatment{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(45px,8vw,125px)}.sds-emphasis{margin-top:30px!important;padding:24px 0;border-top:1px solid #c2d2ce;border-bottom:1px solid #c2d2ce;color:#1b4037!important;font-weight:650}.sds-evaluation-list{margin:0;padding:0;list-style:none}.sds-evaluation-list li{display:grid;grid-template-columns:58px 1fr;align-items:center;padding:23px 0;border-bottom:1px solid #cad8d5;font-weight:620}.sds-evaluation-list span{color:var(--jr-green);font-size:.72rem}.sds-rehab .ar-pathway{gap:8px}.sds-rehab .ar-pathway li{padding-block:15px}.sds-rehab .ar-pathway strong{font-size:clamp(1.2rem,1.8vw,1.85rem)}.sds-further .jr-guidance__aside p{color:#aeb8c8;line-height:1.7}.sds-urgent-list li{color:#7d1f24;background:rgba(255,255,255,.28)}.sds-closing .jr-priorities{grid-template-columns:repeat(6,1fr)}.sds-closing .jr-priorities li{font-size:.84rem;line-height:1.35}
@media(max-width:960px){.sds-sciatica__grid,.sds-evaluation__grid,.sds-section-head,.sds-card-grid,.sds-causes,.sds-treatment{grid-template-columns:1fr}.sds-card-grid article{min-height:auto}.sds-inline-list,.sds-list,.sds-treatment-list,.sds-urgent-list{grid-template-columns:1fr 1fr}.sds-inline-list li:nth-child(3n),.sds-list li:nth-child(4n),.sds-treatment-list li:nth-child(4n),.sds-urgent-list li:nth-child(4n){border-right:1px solid #b8cec8}.sds-inline-list li:nth-child(2n),.sds-list li:nth-child(2n),.sds-treatment-list li:nth-child(2n),.sds-urgent-list li:nth-child(2n){border-right:0}.sds-closing .jr-priorities{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.sds-hero h1{font-size:3.45rem}.sds-inline-list,.sds-list,.sds-treatment-list,.sds-urgent-list{grid-template-columns:1fr}.sds-inline-list li,.sds-inline-list li:nth-child(2n),.sds-inline-list li:nth-child(3n),.sds-list li,.sds-list li:nth-child(2n),.sds-list li:nth-child(4n),.sds-treatment-list li,.sds-treatment-list li:nth-child(2n),.sds-treatment-list li:nth-child(4n),.sds-urgent-list li,.sds-urgent-list li:nth-child(2n),.sds-urgent-list li:nth-child(4n){border-right:0}.sds-closing .jr-priorities{grid-template-columns:1fr}}