/* ================================================================
       FLORIDA DAY HOSPITAL — DESIGN TOKENS
       Every component consumes these tokens. Nothing is hardcoded:
       no hex value or px duration may appear inside a component.
       ================================================================ */

    :root {
      /* surfaces */
      --bg:            #FBFCFD;
      --surface:       #FFFFFF;
      --surface-2:     #F1F6FA;   /* pale clinical blue tint */
      --ink-deep:      #0C1B28;   /* near-black navy — dark bands, footer */
      --ink-deep-2:    #12283A;   /* one step lighter, for gradients on dark */

      /* text */
      --text:          #17262F;
      --text-muted:    #526978;   /* AA 4.5+: 5.60 bg · 5.07 surface · 5.29 surface-2 @ 15px */
      --text-on-dark:  #F4F8FB;
      --text-on-dark-muted: rgba(244,248,251,0.72);

      /* brand */
      --accent:        #2C7CA8;   /* button fills — white text passes AA at 4.61:1 */
      --accent-text:   #246986;   /* accent hue on light surfaces — passes AA at 12–15px */
      --accent-bright: #4FA3D1;   /* decorative strokes, icons, large display — never small body text on light */
      --accent-contrast:#FFFFFF;
      --brand-red:     #D6303F;   /* QUARANTINED: logo mark + cross glyph ONLY. Never on a
                                      button, link, error state, or any interactive element.
                                      Red = urgency in medical contexts; C-10 bans urgency. */

      /* lines */
      --hairline:      #E4EBF1;
      --hairline-dark: rgba(255,255,255,0.12);

      /* type — swap this block to reskin the entire site */
      --font-display:  'Libre Baskerville', Georgia, 'Times New Roman', serif;
      /* Alternates (SIL OFL, self-hostable): Source Serif 4 · Literata */
      --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-mono:     'IBM Plex Mono', ui-monospace, monospace;

      --scale-ratio:   1.25;
      --text-base:     17px;
      --type-0:        var(--text-base);
      --type-1:        calc(var(--type-0) * var(--scale-ratio));
      --type-2:        calc(var(--type-1) * var(--scale-ratio));
      --type-3:        calc(var(--type-2) * var(--scale-ratio));
      --type-4:        calc(var(--type-3) * var(--scale-ratio));
      --type-5:        calc(var(--type-4) * var(--scale-ratio));
      --type-n1:       calc(var(--type-0) / var(--scale-ratio));
      --type-n2:       calc(var(--type-n1) / var(--scale-ratio));

      --text-display:  clamp(var(--type-4), 5.4vw, var(--type-5));
      --text-h2:       clamp(var(--type-3), 3.6vw, var(--type-4));
      --text-h3:       var(--type-1);
      --text-title:    var(--type-2);
      --text-title-sm: var(--type-1);
      --text-leader:   var(--type-3);
      --text-monogram: calc(var(--type-5) * 1.234);
      --text-body:     var(--type-0);
      --text-small:    calc(var(--type-0) * 0.882353);
      --text-eyebrow:  calc(var(--type-n1) * 0.919);
      --text-mono:     var(--type-n1);
      --text-mono-sm:  calc(var(--type-n1) * 0.956);
      --text-mono-xs:  var(--type-n2);

      --weight-body:   400;
      --weight-medium: 400;
      --weight-heavy:  700;
      --tracking-tight:-0.02em;
      --tracking-body: 0;
      --tracking-mono: 0.14em;
      --line-height:   1.6;
      --line-height-display: 1.08;

      /* space — THE premium lever. Doubledish vs Material's default. */
      --space-unit:    1.75rem;
      --section-pad:   clamp(88px, 12vw, 152px);   /* vertical section padding */
      --container-max: 1160px;
      --container-pad: clamp(20px, 4vw, 40px);

      /* surface treatment */
      --radius:        6px;
      --radius-lg:     10px;
      --shadow-rest:   0 1px 2px rgba(12,27,40,0.05), 0 8px 24px rgba(12,27,40,0.06);
      --shadow-raise:  0 2px 4px rgba(12,27,40,0.06), 0 16px 40px rgba(12,27,40,0.10);
      /* NOTE: long-throw, low-opacity, navy-tinted (not black) shadows.
         This is the expensive-looking shadow. Never use rgba(0,0,0,…) directly. */

      /* motion — inherited by ALL animation, per registry rule */
      --motion-dur-fast: .2s;
      --motion-dur-slow: .45s;
      --motion-ease:     cubic-bezier(.4,0,.2,1);
    }

    /* ================================================================
       GLOBAL RESET & BASE
       ================================================================ */

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

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 96px;
      overflow-x: clip;
    }

    /* Skip link — hidden until focused */
    .skip-link {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 200;
      padding: 12px 20px;
      background: var(--surface);
      color: var(--accent-text);
      font-weight: var(--weight-heavy);
      font-size: 15px;
      text-decoration: none;
      border: 1px solid var(--hairline);
      border-radius: var(--radius);
      transform: translateY(-200%);
    }

    .skip-link:focus-visible {
      transform: none;
    }

    body {
      font-family: var(--font-body);
      font-weight: var(--weight-body);
      color: var(--text);
      background: var(--bg);
      line-height: var(--line-height);
      letter-spacing: var(--tracking-body);
      font-size: var(--text-body);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: clip;
    }

    ::selection {
      background: rgba(44, 124, 168, 0.14);
      color: var(--text);
    }

    /* Contact links — tap-to-call / mailto; replace TEL_PLACEHOLDER / EMAIL_PLACEHOLDER site-wide */
    .contact-link {
      color: var(--accent-text);
      text-decoration: none;
      font-weight: var(--weight-medium);
      transition: color var(--motion-dur-fast) var(--motion-ease);
    }

    .contact-link:hover {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* 44px minimum tap targets on touch (C-10) */
    a.contact-link:not(.btn-solid):not(.btn-ghost) {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 10px 6px;
      margin: -10px -6px;
    }

    .book .contact-link:not(.btn-solid) {
      color: var(--accent-bright);
    }

    .book .contact-link:not(.btn-solid):hover {
      color: var(--text-on-dark);
    }

    .site-footer .contact-link {
      color: var(--text-on-dark-muted);
    }

    .site-footer .contact-link:hover {
      color: var(--accent-bright);
    }

    /* Universal focus style — C-10 a11y-gated build.
       Applied to EVERYTHING interactive. Never outline:none without replacement. */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 2px;
    }

    .book :focus-visible,
    .site-footer :focus-visible {
      outline-color: var(--accent-bright);
    }

    /* prefers-reduced-motion global kill-switch */
    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
      }
      html { scroll-behavior: auto; }
    }

    /* ================================================================
       D-01 REVEAL-STAGGER — the only scroll motion on the site
       ================================================================ */

    [data-reveal] {
      opacity: 1;
      transform: none;
    }

    .js [data-reveal]:not(.revealed) {
      opacity: 0;
      transform: translateY(18px);
    }

    .js [data-reveal] {
      transition: opacity var(--motion-dur-slow) var(--motion-ease),
                  transform var(--motion-dur-slow) var(--motion-ease);
      transition-delay: calc(var(--stagger-i, 0) * 80ms);
    }

    @media (prefers-reduced-motion: reduce) {
      .js [data-reveal]:not(.revealed) {
        opacity: 1;
        transform: none;
      }
    }

    /* ================================================================
       TEAM REVEALS — leader grain-form + line sweep + specialist fly-in
       ================================================================ */

    .leader-card__grain {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 1;
      background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
        repeating-linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.06) 0 1px,
          transparent 1px 3px
        ),
        repeating-linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.05) 0 1px,
          transparent 1px 3px
        );
      background-size: 180px 180px, 3px 100%, 100% 3px;
      mix-blend-mode: soft-light;
    }

    .js [data-team-leader]:not(.team-revealed) .leader-card__photo img,
    .js [data-team-leader]:not(.team-revealed) .provider-card__photo img {
      opacity: 0.15;
      filter: blur(16px) contrast(1.45) brightness(1.1);
      transform: scale(1.06);
      -webkit-mask-image: repeating-linear-gradient(
        90deg,
        #000 0 2px,
        transparent 2px 4px
      );
      mask-image: repeating-linear-gradient(
        90deg,
        #000 0 2px,
        transparent 2px 4px
      );
    }

    .team-revealed .leader-card__photo img,
    .team-revealed .provider-card__photo img {
      animation: leader-photo-form 1.85s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    .team-revealed .leader-card__grain,
    .team-revealed .provider-card__photo .leader-card__grain {
      opacity: 0;
      transition: opacity 1.5s cubic-bezier(.4, 0, .2, 1) 0.35s;
    }

    @keyframes leader-photo-form {
      0% {
        opacity: 0.2;
        filter: blur(14px) contrast(1.4) brightness(1.08);
        transform: scale(1.05);
        -webkit-mask-size: 4px 100%;
        mask-size: 4px 100%;
      }
      35% {
        opacity: 0.5;
        filter: blur(7px) contrast(1.2);
        -webkit-mask-size: 8px 100%;
        mask-size: 8px 100%;
      }
      65% {
        opacity: 0.88;
        filter: blur(2px) contrast(1.05);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
      }
      100% {
        opacity: 1;
        filter: none;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
      }
    }

    .js [data-reveal-line] {
      display: block;
      overflow: hidden;
    }

    .js [data-team-leader]:not(.team-revealed) [data-reveal-line] {
      clip-path: inset(0 100% 0 0);
      opacity: 0;
      transform: translateX(-22px);
    }

    .team-revealed [data-reveal-line] {
      clip-path: inset(0 0 0 0);
      opacity: 1;
      transform: none;
      transition:
        clip-path 0.9s cubic-bezier(.22, 1, .36, 1),
        opacity 0.65s var(--motion-ease),
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
      transition-delay: calc(0.55s + var(--line-i, 0) * 0.17s);
    }

    [data-reveal-fly] {
      opacity: 1;
      transform: none;
      filter: none;
    }

    .js [data-reveal-fly]:not(.revealed) {
      opacity: 0;
      transform: translateY(52px) translateX(-14px) rotate(-1.25deg) scale(0.93);
      filter: blur(5px);
    }

    .js [data-reveal-fly].revealed {
      opacity: 1;
      transform: none;
      filter: none;
      transition:
        opacity 0.75s var(--motion-ease),
        transform 0.9s cubic-bezier(.22, 1, .36, 1),
        filter 0.7s var(--motion-ease),
        box-shadow var(--motion-dur-fast) var(--motion-ease);
      transition-delay: calc(var(--fly-i, 0) * 90ms);
    }

    @media (prefers-reduced-motion: reduce) {
      .js [data-team-leader]:not(.team-revealed) .leader-card__photo img,
      .js [data-team-leader]:not(.team-revealed) .provider-card__photo img,
      .team-revealed .leader-card__photo img,
      .team-revealed .provider-card__photo img {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none;
        -webkit-mask-image: none;
        mask-image: none;
      }

      .leader-card__grain {
        display: none;
      }

      .js [data-team-leader]:not(.team-revealed) [data-reveal-line],
      .team-revealed [data-reveal-line] {
        clip-path: none;
        opacity: 1;
        transform: none;
        transition: none;
      }

      .js [data-reveal-fly]:not(.revealed) {
        opacity: 1;
        transform: none;
        filter: none;
      }
    }

    /* ================================================================
       TYPE SCALE — ratio-driven; font roles live here only
       ================================================================ */

    .t-display {
      font-family: var(--font-display);
      font-weight: var(--weight-medium);
      font-size: var(--text-display);
      line-height: var(--line-height-display);
      letter-spacing: var(--tracking-tight);
    }

    .t-h2 {
      font-family: var(--font-display);
      font-weight: var(--weight-medium);
      font-size: var(--text-h2);
      line-height: 1.14;
      letter-spacing: var(--tracking-tight);
    }

    .t-h3 {
      font-family: var(--font-body);
      font-weight: var(--weight-heavy);
      font-size: var(--text-h3);
      line-height: 1.3;
    }

    .t-title {
      font-family: var(--font-display);
      font-weight: var(--weight-medium);
      font-size: var(--text-title);
      line-height: 1.15;
      letter-spacing: var(--tracking-tight);
    }

    .t-leader {
      font-family: var(--font-display);
      font-weight: var(--weight-medium);
      font-size: var(--text-leader);
      line-height: 1.2;
      letter-spacing: var(--tracking-tight);
    }

    .t-title-sm {
      font-family: var(--font-display);
      font-weight: var(--weight-medium);
      font-size: var(--text-title-sm);
      line-height: 1.15;
      letter-spacing: var(--tracking-tight);
    }

    .t-monogram {
      font-family: var(--font-display);
      font-weight: var(--weight-medium);
      font-size: var(--text-monogram);
      line-height: 1;
      letter-spacing: var(--tracking-tight);
    }

    .t-body {
      font-size: var(--text-body);
    }

    .t-small {
      font-size: var(--text-small);
      color: var(--text-muted);
    }

    .t-eyebrow {
      font-family: var(--font-mono);
      font-size: var(--text-eyebrow);
      text-transform: uppercase;
      letter-spacing: var(--tracking-mono);
      color: var(--accent-text);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .t-mono {
      font-family: var(--font-mono);
      letter-spacing: var(--tracking-mono);
    }

    .t-mono--md { font-size: var(--text-mono); }
    .t-mono--sm { font-size: var(--text-mono-sm); }
    .t-mono--xs { font-size: var(--text-mono-xs); }

    .t-eyebrow::before {
      content: '';
      width: 28px;
      height: 1px;
      background: var(--accent-text);
    }

    /* ================================================================
       LAYOUT PRIMITIVES
       ================================================================ */

    .wrap {
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-pad);
      width: 100%;
    }

    section {
      padding-block: var(--section-pad);
    }

    section.medical-aid {
      padding-block: clamp(64px, 8vw, 96px);
    }

    /* ================================================================
       BUTTONS — exactly two variants.
       Never --brand-red, never shadows, never gradients.
       ================================================================ */

    .btn-solid,
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-small);
      font-weight: var(--weight-heavy);
      line-height: 1;
      min-height: 44px;
      padding: 12px 30px;
      border-radius: var(--radius);
      border: 1px solid transparent;
      cursor: pointer;
      text-decoration: none;
      transition: transform var(--motion-dur-fast) var(--motion-ease),
                  background var(--motion-dur-fast) var(--motion-ease);
    }

    .btn-solid {
      background: var(--accent);
      color: var(--accent-contrast);
    }

    .btn-solid:hover {
      background: #256B92;
      transform: translateY(-1px);
    }

    .btn-ghost {
      background: transparent;
      border-color: currentColor;
      color: var(--accent-text);
    }

    .on-dark .btn-ghost,
    .btn-ghost.on-dark {
      color: var(--text-on-dark);
    }

    .btn-ghost:hover {
      transform: translateY(-1px);
      background: var(--surface-2);
    }

    .on-dark .btn-ghost:hover,
    .btn-ghost.on-dark:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    /* ================================================================
       NAVIGATION — quiet, precise, almost invisible until needed
       ================================================================ */

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background var(--motion-dur-fast) var(--motion-ease),
                  border-color var(--motion-dur-fast) var(--motion-ease),
                  backdrop-filter var(--motion-dur-fast) var(--motion-ease);
    }

    .site-header .nav-row {
      position: relative;
    }

    .site-header.is-scrolled {
      background: rgba(251,252,253,0.92);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border-bottom-color: var(--hairline);
    }

    .nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: calc(var(--space-unit) * 1.25);
      height: 84px;
    }

    .site-header.is-scrolled .nav-row {
      height: 68px;
    }

    /* Brand lockup */
    .brand {
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-decoration: none;
      line-height: 1;
      min-height: 44px;
      justify-content: center;
      padding-block: 6px;
    }

    .brand__mark {
      display: flex;
      align-items: baseline;
      gap: 3px;
      font-weight: 700; /* logo lockup mirrors the real mark; exempt from the 600 ceiling */
      font-size: 24px;
      letter-spacing: 0.01em;
      color: var(--accent-text);
    }

    .brand__cross {
      flex: none;
      align-self: flex-start;
      margin-top: 1px;
    }

    .brand__name {
      font-weight: var(--weight-medium);
      font-size: var(--text-mono-sm);
      color: var(--text-muted);
      letter-spacing: 0.01em;
    }

    /* Links */
    .nav-links {
      display: flex;
      align-items: center;
      gap: calc(var(--space-unit) * 1.15);
    }

    .nav-links a {
      font-weight: var(--weight-medium);
      font-size: var(--text-small);
      color: var(--text);
      text-decoration: none;
      background-image: linear-gradient(currentColor, currentColor);
      background-repeat: no-repeat;
      background-position: 0 calc(100% + 6px);
      background-size: 0% 1px;
      padding-bottom: 8px;
      margin-bottom: -8px;
      transition: color var(--motion-dur-fast) var(--motion-ease),
                  background-size var(--motion-dur-fast) var(--motion-ease);
    }

    .nav-links a:hover,
    .nav-links a.is-active {
      color: var(--accent-text);
      background-size: 100% 1px;
    }

    /* Header contact — persistent tel/mailto; replace TEL_PLACEHOLDER / EMAIL_PLACEHOLDER */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: none;
    }

    .nav-phone,
    .nav-email {
      flex: none;
    }

    .nav-phone {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: var(--text-mono-sm);
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    .nav-phone__icon {
      flex: none;
    }

    .nav-email {
      display: inline-flex;
      align-items: center;
      font-size: 13.5px;
      max-width: 18ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .nav-menu-contact {
      display: none;
    }

    .nav-cta {
      flex: none;
      min-height: 44px;
      padding: 12px 20px;
      white-space: nowrap;
    }

    /* Burger */
    .nav-burger {
      display: none;
      flex: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      padding: 10px;
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    .nav-burger span {
      display: block;
      height: 2px;
      width: 100%;
      background: var(--text);
      transition: transform var(--motion-dur-fast) var(--motion-ease),
                  opacity var(--motion-dur-fast) var(--motion-ease);
    }

    .nav-burger[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .nav-burger[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }
    .nav-burger[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile */
    @media (max-width: 860px) {
      .nav-burger {
        display: flex;
      }

      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--hairline);
      }

      .nav-links.is-open {
        display: flex;
      }

      .nav-links a {
        font-size: 18px;
        padding: 20px var(--container-pad);
        margin-bottom: 0;
        background: none;
        border-bottom: 1px solid var(--hairline);
      }

      .nav-links a:last-child {
        border-bottom: 0;
      }

      .nav-menu-contact {
        display: flex;
        font-size: var(--text-body);
        padding: 20px var(--container-pad);
        margin-bottom: 0;
        background: none;
        border-bottom: 1px solid var(--hairline);
      }

      .nav-email {
        display: none;
      }

      .nav-phone__text {
        display: none;
      }

      .nav-phone {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 10px;
        margin: 0;
      }

      .nav-row {
        gap: 12px;
      }

      .nav-cta {
        flex: none;
        min-height: 44px;
        padding: 10px 16px;
        font-size: 13.5px;
        white-space: nowrap;
      }
    }

    /* Very narrow: the mark alone identifies us; keep the row on one line */
    @media (max-width: 400px) {
      .brand__name {
        display: none;
      }

      .nav-cta {
        padding: 10px 14px;
        font-size: 13px;
      }
    }

    /* ================================================================
       HERO — calm, immediate orientation, one path to care
       ================================================================ */

    .hero {
      min-height: 0;
      display: block;
      padding-block: clamp(80px, 14vw, 140px);
      background: var(--bg);
    }

    .hero--photo.has-hero-image {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(40px, 6vw, 64px);
      align-items: center;
    }

    @media (min-width: 960px) {
      .hero--photo.has-hero-image {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      }
    }

    .hero__content,
    .hero__media {
      min-width: 0;
    }

    .hero__media {
      display: none;
      margin: 0;
      aspect-ratio: 4 / 5;
      max-height: min(560px, 72vh);
      width: 100%;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--hairline);
      box-shadow: var(--shadow-rest);
      background: var(--surface-2);
    }

    .hero__media.has-image {
      display: block;
    }

    .hero__media .fdh-photo__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    .hero h1 {
      /* 17ch breaks the 40-char headline into three lines:
         "Surgical care, / measured in hours / — not days." */
      max-width: 17ch;
      color: var(--text);
    }

    .hero__lede {
      color: var(--text-muted);
      max-width: 52ch;
      margin-top: 28px;
    }

    .hero__pathway-link {
      margin-top: 22px;
      font-size: 14px;
      letter-spacing: 0.01em;
    }

    .hero__pathway-link a {
      color: var(--accent-text);
      text-decoration: none;
      border-bottom: 1px solid rgba(36, 105, 134, 0.28);
      padding-bottom: 2px;
      transition: border-color var(--motion-dur-fast) var(--motion-ease),
                  color var(--motion-dur-fast) var(--motion-ease);
    }

    .hero__pathway-link a:hover {
      color: var(--accent);
      border-bottom-color: var(--accent-bright);
    }

    .hero__ctas {
      margin-top: 40px;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .hero__eyebrow {
      margin-bottom: calc(var(--space-unit) * 0.85);
    }

    .hero__reassure {
      margin-top: 56px;
      padding-top: 28px;
      border-top: 1px solid var(--hairline);
      display: flex;
      flex-wrap: wrap;
      column-gap: clamp(24px, 2.8vw, 40px);
      row-gap: 14px;
      list-style: none;
      padding-left: 0;
    }

    .hero__reassure li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--text-muted);
    }

    .hero__icon-slot {
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
    }

    .hero__icon {
      width: 22px;
      height: 22px;
      color: var(--accent-text);
      display: block;
    }

    .hero__icon-draw {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: hero-icon-draw 1.2s var(--motion-ease) forwards;
    }

    .hero__reassure li:nth-child(1) .hero__icon-draw { animation-delay: 0.2s; }
    .hero__reassure li:nth-child(2) .hero__icon-draw { animation-delay: 0.45s; }
    .hero__reassure li:nth-child(3) .hero__icon-draw { animation-delay: 0.7s; }

    .hero__icon-tick {
      animation: hero-tick-in 0.5s var(--motion-ease) 1s forwards;
    }

    .hero__icon-pulse {
      animation: hero-pulse 1.4s var(--motion-ease) 1.2s infinite;
    }

    .hero__icon-hand {
      transform-origin: 12px 12px;
      animation: hero-hand-tick 2s var(--motion-ease) 1s infinite;
    }

    .hero__icon-accent {
      animation: hero-accent-in 0.5s var(--motion-ease) 1.1s forwards;
    }

    .hero__reassure li:nth-child(1) .hero__icon-accent:nth-of-type(1) { animation-delay: 1.1s; }
    .hero__reassure li:nth-child(1) .hero__icon-accent:nth-of-type(2) { animation-delay: 1.2s; }
    .hero__reassure li:nth-child(1) .hero__icon-accent:nth-of-type(3) { animation-delay: 1.3s; }
    .hero__reassure li:nth-child(2) .hero__icon-accent { animation-delay: 1.15s; }
    .hero__reassure li:nth-child(3) .hero__icon-accent { animation-delay: 1.2s; }
    .hero__reassure li:nth-child(3) .hero__icon-accent--sun {
      animation: hero-sun-pulse 2s var(--motion-ease) 1.4s infinite;
    }

    @keyframes hero-accent-in {
      to { opacity: 1; }
    }

    @keyframes hero-sun-pulse {
      0%, 100% { opacity: 0.4; transform: scale(1); }
      50%      { opacity: 1; transform: scale(1.2); transform-box: fill-box; transform-origin: center; }
    }

    @keyframes hero-icon-draw {
      to { stroke-dashoffset: 0; }
    }

    @keyframes hero-tick-in {
      to { opacity: 1; }
    }

    @keyframes hero-pulse {
      0%, 100% { opacity: 0; transform: scale(1); }
      50%      { opacity: 0.5; transform: scale(1.8); }
    }

    @keyframes hero-hand-tick {
      0%, 100% { transform: rotate(0deg); }
      50%      { transform: rotate(12deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero__icon-draw,
      .hero__icon-tick,
      .hero__icon-pulse,
      .hero__icon-hand {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
      }
    }

    /* Day arc */
    .hero__visual {
      min-width: 0;
    }

    .day-arc {
      width: 100%;
      height: auto;
      display: block;
    }

    .day-arc__base {
      fill: none;
      stroke: var(--hairline);
      stroke-width: 1.5;
    }

    .day-arc__progress {
      fill: none;
      stroke: var(--accent-bright);
      stroke-width: 1.5;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: arc-draw 1.6s var(--motion-ease) forwards;
    }

    @keyframes arc-draw {
      to { stroke-dashoffset: 0; }
    }

    .day-arc__node {
      opacity: 0;
      animation: node-in var(--motion-dur-slow) var(--motion-ease) forwards;
    }

    .day-arc__node--1 { animation-delay: 180ms; }
    .day-arc__node--2 { animation-delay: 360ms; }
    .day-arc__node--3 { animation-delay: 540ms; }
    .day-arc__node--4 { animation-delay: 720ms; }
    .day-arc__node--5 { animation-delay: 900ms; }

    @keyframes node-in {
      to { opacity: 1; }
    }

    .day-arc__time {
      font-size: var(--text-mono-xs);
      fill: var(--text-muted);
      letter-spacing: 0.04em;
    }

    .day-arc__label {
      font-size: var(--text-mono-sm);
      fill: var(--text-muted);
    }

    .day-arc__dot {
      fill: var(--accent-bright);
    }

    .day-arc__dot--apex {
      fill: var(--accent);
      animation: apex-pulse 2.4s var(--motion-ease) 1.2s infinite;
      transform-box: fill-box;
      transform-origin: center;
    }

    @keyframes apex-pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.15); }
    }

    .day-arc__traveler {
      fill: var(--accent);
      opacity: 0;
      animation: traveler-in 0.4s var(--motion-ease) 1.4s forwards,
                 traveler-fade 3.2s var(--motion-ease) 1.4s infinite;
    }

    @keyframes traveler-in {
      to { opacity: 0.9; }
    }

    @keyframes traveler-fade {
      0%, 100% { opacity: 0.9; }
      90%      { opacity: 0; }
    }

    .day-arc__glyph {
      color: var(--accent-text);
    }

    .day-arc__glyph .site-icon {
      width: 18px;
      height: 18px;
      display: block;
      margin: -9px 0 0 -9px;
    }

    .hero__caption {
      margin-top: calc(var(--space-unit) * 0.75);
      font-size: var(--text-mono-xs);
      color: var(--text-muted);
      letter-spacing: 0.02em;
    }

    /* Reduced motion: the arc renders instantly complete — the global
       kill-switch zeroes durations but not delays, so clear those here. */
    @media (prefers-reduced-motion: reduce) {
      .day-arc__progress,
      .day-arc__node,
      .day-arc__dot--apex,
      .day-arc__traveler {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
        transform: none;
      }
    }

    @media (max-width: 560px) {
      .day-arc__time { font-size: 16px; }
      .day-arc__label { font-size: 18px; }
    }

    /* ================================================================
       DAY PATHWAY — signature timeline (mobile vertical first)
       ================================================================ */

    .day-pathway {
      background: var(--surface-2);
      border-top: 1px solid var(--hairline);
      border-bottom: 1px solid var(--hairline);
      padding-block: clamp(72px, 10vw, 128px);
      scroll-margin-top: 96px;
      position: relative;
      overflow: hidden;
    }

    .day-pathway__photo {
      display: none;
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .day-pathway__photo.has-image {
      display: block;
    }

    .day-pathway__photo .fdh-photo__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.12;
    }

    .day-pathway__inner {
      position: relative;
      z-index: 1;
    }

    .day-pathway__header {
      max-width: 42ch;
      margin-bottom: clamp(40px, 6vw, 64px);
    }

    .day-pathway__header .t-h2 {
      margin-top: calc(var(--space-unit) * 0.85);
      color: var(--text);
    }

    .day-pathway__header .t-small {
      margin-top: calc(var(--space-unit) * 0.65);
      color: var(--text-muted);
    }

    .day-pathway__timeline {
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;
      padding-left: 4px;
    }

    /* Vertical rail — mobile */
    .day-pathway__timeline::before {
      content: '';
      position: absolute;
      left: 27px;
      top: 28px;
      bottom: 28px;
      width: 2px;
      background: linear-gradient(
        180deg,
        var(--accent-bright) 0%,
        var(--accent) 42%,
        var(--hairline) 100%
      );
      opacity: 0.55;
      pointer-events: none;
    }

    .day-pathway__stage {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 0 20px;
      align-items: start;
      position: relative;
      padding-bottom: clamp(28px, 5vw, 40px);
    }

    .day-pathway__stage:last-child {
      padding-bottom: 0;
    }

    .day-pathway__marker {
      width: 48px;
      height: 48px;
      margin-top: 4px;
      border-radius: 50%;
      border: 2px solid var(--accent-bright);
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: var(--shadow-rest);
      position: relative;
      z-index: 1;
    }

    .day-pathway__stage--apex .day-pathway__marker {
      width: 56px;
      height: 56px;
      margin-top: 0;
      margin-left: -4px;
      border-color: var(--accent);
      border-width: 2.5px;
      box-shadow:
        0 0 0 4px rgba(79, 163, 209, 0.14),
        var(--shadow-rest);
    }

    .day-pathway__icon {
      color: var(--accent-text);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .day-pathway__icon .site-icon {
      width: 22px;
      height: 22px;
      display: block;
    }

    .day-pathway__stage--apex .day-pathway__icon .site-icon {
      width: 26px;
      height: 26px;
    }

    .day-pathway__content {
      background: var(--surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      padding: 20px 22px;
      box-shadow: var(--shadow-rest);
    }

    .day-pathway__stage--apex .day-pathway__content {
      border-color: rgba(44, 124, 168, 0.22);
      box-shadow: var(--shadow-raise);
    }

    .day-pathway__time {
      text-transform: uppercase;
      color: var(--accent-text);
    }

    .day-pathway__name {
      color: var(--text);
      margin-top: 8px;
    }

    .day-pathway__desc {
      font-size: var(--text-small);
      line-height: var(--line-height);
      color: var(--text-muted);
      margin-top: 10px;
    }

    @media (min-width: 960px) {
      .day-pathway__header {
        max-width: 54ch;
        text-align: center;
        margin-inline: auto;
        margin-bottom: clamp(56px, 7vw, 88px);
      }

      .day-pathway__timeline {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: clamp(12px, 1.6vw, 20px);
        padding-left: 0;
        padding-top: 8px;
      }

      /* Horizontal track — desktop */
      .day-pathway__timeline::before {
        left: 8%;
        right: 8%;
        top: 32px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(
          90deg,
          var(--accent-bright) 0%,
          var(--accent) 50%,
          var(--accent-bright) 100%
        );
        opacity: 0.4;
      }

      .day-pathway__stage {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-bottom: 0;
        text-align: center;
      }

      .day-pathway__marker {
        margin-inline: auto;
        margin-top: 0;
      }

      .day-pathway__stage--apex .day-pathway__marker {
        margin-left: auto;
      }

      .day-pathway__content {
        text-align: left;
        min-height: 168px;
        padding: 22px 20px;
      }

      .day-pathway__desc {
        font-size: 14.5px;
      }
    }

    @media (min-width: 1280px) {
      .day-pathway__inner {
        max-width: min(1240px, var(--container-max));
      }

      .day-pathway__content {
        min-height: 176px;
        padding: 24px 22px;
      }
    }

    /* --- Pending contact details: hide the header's compact phone and
           email chrome until real numbers exist. Long fallback text in
           those slots wrecks the nav row; the Book CTA carries the
           action alone until FDH confirms the line. ------------------ */
    .nav-phone.contact-pending,
    .nav-email.contact-pending,
    .nav-menu-contact.contact-pending {
      /* !important: state override — must beat the tap-target rule
         a.contact-link:not(.btn-solid):not(.btn-ghost) and any later
         layout rules regardless of specificity. */
      display: none !important;
    }

    /* --- Scroll-driven rail fill + stage ignition -------------------
       JS sets --journey-progress (0–1) on .day-pathway__timeline and
       toggles .is-lit per stage as the fill reaches it. Without JS or
       under reduced motion everything renders lit and full. --------- */

    .day-pathway__timeline::after {
      content: '';
      position: absolute;
      left: 27px;
      top: 28px;
      bottom: 28px;
      width: 2px;
      background: var(--accent);
      transform: scaleY(var(--journey-progress, 1));
      transform-origin: 50% 0;
      pointer-events: none;
    }

    .js .day-pathway__stage .day-pathway__marker,
    .js .day-pathway__stage .day-pathway__content {
      transition: opacity var(--motion-dur-slow) var(--motion-ease),
                  border-color var(--motion-dur-slow) var(--motion-ease);
    }

    .js .day-pathway__stage:not(.is-lit) .day-pathway__marker {
      border-color: var(--hairline);
      opacity: 0.75;
    }

    .js .day-pathway__stage:not(.is-lit) .day-pathway__content {
      opacity: 0.55;
    }

    @media (min-width: 960px) {
      .day-pathway__timeline::after {
        left: 8%;
        right: 8%;
        top: 32px;
        bottom: auto;
        width: auto;
        height: 2px;
        transform: scaleX(var(--journey-progress, 1));
        transform-origin: 0 50%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .day-pathway__timeline::after { transform: none; }

      .js .day-pathway__stage:not(.is-lit) .day-pathway__marker,
      .js .day-pathway__stage:not(.is-lit) .day-pathway__content {
        opacity: 1;
        border-color: var(--accent-bright);
      }

      .js .day-pathway__stage:not(.is-lit) .day-pathway__content {
        border-color: var(--hairline);
      }
    }

    /* ================================================================
       SERVICES — patient-problem first; hairline grid, stillness
       ================================================================ */

    .services {
      background: var(--surface);
      border-top: 1px solid var(--hairline);
      border-bottom: 1px solid var(--hairline);
    }

    .services__header {
      max-width: 640px;
    }

    .services__header h2 {
      margin-top: calc(var(--space-unit) * 0.85);
      color: var(--text);
    }

    .services__header .t-small {
      margin-top: calc(var(--space-unit) * 0.65);
    }

    .services__grid {
      list-style: none;
      padding: 0;
      margin-top: calc(var(--space-unit) * 2);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--hairline);
      border: 1px solid var(--hairline);
    }

    .service-card {
      background: var(--surface);
      padding: 44px 36px;
      transition: background var(--motion-dur-fast) var(--motion-ease);
    }

    .service-card__visual {
      margin-top: 20px;
      height: 96px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      overflow: visible;
    }

    .service-illust {
      width: 88px;
      height: 88px;
      display: block;
      color: var(--text-muted);
      transition: color var(--motion-dur-fast) var(--motion-ease),
                  transform var(--motion-dur-fast) var(--motion-ease);
    }

    .service-card:hover .service-illust,
    .service-card:focus-within .service-illust,
    .specialist-card:hover .service-illust,
    .specialist-card:focus-within .service-illust {
      color: var(--accent-text);
      transform: translateY(-2px);
    }

    .illust-line {
      vector-effect: non-scaling-stroke;
    }

    /* Shared draw-in for accent paths on hover */
    .illust-draw {
      stroke-dasharray: 1;
      stroke-dashoffset: 0;
    }

    :is(.service-card, .specialist-card):hover .illust-draw,
    :is(.service-card, .specialist-card):focus-within .illust-draw {
      animation: illust-redraw 1.1s var(--motion-ease) forwards;
    }

    :is(.service-card, .specialist-card):hover .illust-draw--2,
    :is(.service-card, .specialist-card):focus-within .illust-draw--2 { animation-delay: 0.06s; }
    :is(.service-card, .specialist-card):hover .illust-draw--3,
    :is(.service-card, .specialist-card):focus-within .illust-draw--3 { animation-delay: 0.12s; }
    :is(.service-card, .specialist-card):hover .illust-draw--4,
    :is(.service-card, .specialist-card):focus-within .illust-draw--4 { animation-delay: 0.18s; }
    :is(.service-card, .specialist-card):hover .illust-draw--5,
    :is(.service-card, .specialist-card):focus-within .illust-draw--5 { animation-delay: 0.24s; }
    :is(.service-card, .specialist-card):hover .illust-draw--6,
    :is(.service-card, .specialist-card):focus-within .illust-draw--6 { animation-delay: 0.3s; }

    @keyframes illust-redraw {
      from { stroke-dashoffset: 1; }
      to   { stroke-dashoffset: 0; }
    }

    /* Eye — pupil contracts, drop descends */
    :is(.service-card, .specialist-card):hover .illust-eye__pupil,
    :is(.service-card, .specialist-card):focus-within .illust-eye__pupil {
      transform: scale(0.75);
      transform-box: fill-box;
      transform-origin: center;
      transition: transform var(--motion-dur-slow) var(--motion-ease);
    }

    :is(.service-card, .specialist-card):hover .illust-eye__drop,
    :is(.service-card, .specialist-card):focus-within .illust-eye__drop {
      animation: drop-bob 1.2s var(--motion-ease) infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-eye__drop-line,
    :is(.service-card, .specialist-card):focus-within .illust-eye__drop-line {
      opacity: 0.4;
      transition: opacity var(--motion-dur-slow) var(--motion-ease);
    }

    :is(.service-card, .specialist-card):hover .illust-eye__shine,
    :is(.service-card, .specialist-card):focus-within .illust-eye__shine {
      opacity: 0.85;
      animation: illust-redraw 0.7s var(--motion-ease) forwards;
    }

    :is(.service-card, .specialist-card):hover .illust-eye__spark,
    :is(.service-card, .specialist-card):focus-within .illust-eye__spark {
      opacity: 1;
      animation: eye-spark 1.4s var(--motion-ease) infinite;
    }

    @keyframes eye-spark {
      0%, 100% { opacity: 0.2; transform: scale(0.8); }
      50%      { opacity: 1; transform: scale(1.2); }
    }

    @keyframes drop-bob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(3px); }
    }

    /* Digestive — scope dot travels the tract */
    :is(.service-card, .specialist-card):hover .illust-gi__wave,
    :is(.service-card, .specialist-card):focus-within .illust-gi__wave {
      opacity: 0.8;
      animation: gi-scope 1.6s var(--motion-ease) infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-gi__scope-light,
    :is(.service-card, .specialist-card):focus-within .illust-gi__scope-light {
      opacity: 0.35;
      animation: gi-scope-light 1.6s var(--motion-ease) infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-gi__ripple,
    :is(.service-card, .specialist-card):focus-within .illust-gi__ripple {
      opacity: 0.55;
      animation: gi-ripple 1.2s var(--motion-ease) infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-gi__ripple--2,
    :is(.service-card, .specialist-card):focus-within .illust-gi__ripple--2 {
      opacity: 0.4;
      animation: gi-ripple 1.2s var(--motion-ease) 0.2s infinite;
    }

    @keyframes gi-scope-light {
      0%, 100% { opacity: 0.15; transform: scale(0.9); }
      50%      { opacity: 0.45; transform: scale(1.15); }
    }

    @keyframes gi-ripple {
      0%, 100% { opacity: 0.2; transform: translateX(0); }
      50%      { opacity: 0.6; transform: translateX(2px); }
    }

    @keyframes gi-scope {
      0%   { transform: translate(0, 0); opacity: 0.9; }
      40%  { transform: translate(2px, 28px); opacity: 0.7; }
      70%  { transform: translate(18px, 48px); opacity: 0.5; }
      100% { transform: translate(30px, 58px); opacity: 0; }
    }

    /* ENT — sound waves pulse outward */
    :is(.service-card, .specialist-card):hover .illust-ent__wave--1,
    :is(.service-card, .specialist-card):focus-within .illust-ent__wave--1 {
      opacity: 0.8;
      animation: ent-wave 1s var(--motion-ease) infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-ent__wave--2,
    :is(.service-card, .specialist-card):focus-within .illust-ent__wave--2 {
      opacity: 0.5;
      animation: ent-wave 1s var(--motion-ease) 0.15s infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-ent__wave--3,
    :is(.service-card, .specialist-card):focus-within .illust-ent__wave--3 {
      opacity: 0.35;
      animation: ent-wave 1s var(--motion-ease) 0.3s infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-ent__cord,
    :is(.service-card, .specialist-card):focus-within .illust-ent__cord {
      opacity: 1;
      stroke-width: 2;
      transition: opacity var(--motion-dur-slow) var(--motion-ease),
                  stroke-width var(--motion-dur-fast) var(--motion-ease);
    }

    :is(.service-card, .specialist-card):hover .illust-ent__cochlea,
    :is(.service-card, .specialist-card):focus-within .illust-ent__cochlea {
      stroke-width: 2;
      transition: stroke-width var(--motion-dur-fast) var(--motion-ease);
    }

    @keyframes ent-wave {
      0%, 100% { opacity: 0; transform: translateX(0); }
      50%      { opacity: 0.8; transform: translateX(-3px); }
    }

    /* Gynaecology — cavity and ovaries highlight */
    :is(.service-card, .specialist-card):hover .illust-gyn__cavity,
    :is(.service-card, .specialist-card):focus-within .illust-gyn__cavity {
      opacity: 0.85;
      transition: opacity var(--motion-dur-slow) var(--motion-ease);
    }

    :is(.service-card, .specialist-card):hover .illust-gyn__ovary,
    :is(.service-card, .specialist-card):focus-within .illust-gyn__ovary {
      stroke-width: 2;
      transition: stroke-width var(--motion-dur-fast) var(--motion-ease);
    }

    :is(.service-card, .specialist-card):hover .illust-gyn__ovary--l,
    :is(.service-card, .specialist-card):focus-within .illust-gyn__ovary--l {
      animation: gyn-ovary-pulse 1.3s var(--motion-ease) infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-gyn__ovary--r,
    :is(.service-card, .specialist-card):focus-within .illust-gyn__ovary--r {
      animation: gyn-ovary-pulse 1.3s var(--motion-ease) 0.15s infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-gyn__pulse,
    :is(.service-card, .specialist-card):focus-within .illust-gyn__pulse {
      opacity: 0.45;
      animation: gyn-cavity-pulse 1.4s var(--motion-ease) infinite;
    }

    @keyframes gyn-ovary-pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.06); transform-box: fill-box; transform-origin: center; }
    }

    @keyframes gyn-cavity-pulse {
      0%, 100% { opacity: 0.15; transform: scale(0.85); transform-box: fill-box; transform-origin: center; }
      50%      { opacity: 0.5; transform: scale(1.1); }
    }

    /* General surgery — suture appears, cross brightens */
    :is(.service-card, .specialist-card):hover .illust-surg__suture,
    :is(.service-card, .specialist-card):focus-within .illust-surg__suture {
      opacity: 1;
      animation: illust-redraw 0.9s var(--motion-ease) forwards;
    }

    :is(.service-card, .specialist-card):hover .illust-surg__cross,
    :is(.service-card, .specialist-card):focus-within .illust-surg__cross {
      opacity: 0.8;
      transition: opacity var(--motion-dur-slow) var(--motion-ease);
    }

    :is(.service-card, .specialist-card):hover .illust-surg__forceps--l,
    :is(.service-card, .specialist-card):focus-within .illust-surg__forceps--l {
      transform: rotate(-8deg);
      transform-box: fill-box;
      transform-origin: 68px 52px;
      transition: transform var(--motion-dur-slow) var(--motion-ease);
    }

    :is(.service-card, .specialist-card):hover .illust-surg__forceps--r,
    :is(.service-card, .specialist-card):focus-within .illust-surg__forceps--r {
      transform: rotate(8deg);
      transform-box: fill-box;
      transform-origin: 80px 52px;
      transition: transform var(--motion-dur-slow) var(--motion-ease);
    }

    :is(.service-card, .specialist-card):hover .illust-surg__gleam,
    :is(.service-card, .specialist-card):focus-within .illust-surg__gleam {
      opacity: 0.9;
      animation: illust-redraw 0.6s var(--motion-ease) forwards;
    }

    /* Pain — figure stretches, joint markers pulse */
    .illust-pain__figure {
      transform-origin: 48px 48px;
    }

    :is(.service-card, .specialist-card):hover .illust-pain__figure,
    :is(.service-card, .specialist-card):focus-within .illust-pain__figure {
      animation: pain-stretch 2.4s var(--motion-ease) infinite;
    }

    @keyframes pain-stretch {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-1.5px); }
    }
    .illust-pain__dot {
      transform-box: fill-box;
      transform-origin: center;
      transition: transform var(--motion-dur-fast) var(--motion-ease);
    }

    .illust-pain__ring {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.service-card, .specialist-card):hover .illust-pain__motion,
    :is(.service-card, .specialist-card):focus-within .illust-pain__motion {
      opacity: 0.45;
      animation: illust-redraw 1s var(--motion-ease) forwards;
    }

    :is(.service-card, .specialist-card):hover .illust-pain__bursts,
    :is(.service-card, .specialist-card):focus-within .illust-pain__bursts {
      opacity: 1;
      transition: opacity var(--motion-dur-slow) var(--motion-ease);
    }

    :is(.service-card, .specialist-card):hover .illust-pain__dot,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot {
      animation: pain-dot-pulse 1.2s var(--motion-ease) infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-pain__dot--1,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot--1 { animation-delay: 0s; }
    :is(.service-card, .specialist-card):hover .illust-pain__dot--2,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot--2 { animation-delay: 0.08s; }
    :is(.service-card, .specialist-card):hover .illust-pain__dot--3,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot--3 { animation-delay: 0.16s; }
    :is(.service-card, .specialist-card):hover .illust-pain__dot--4,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot--4 { animation-delay: 0.24s; }
    :is(.service-card, .specialist-card):hover .illust-pain__dot--5,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot--5 { animation-delay: 0.32s; }
    :is(.service-card, .specialist-card):hover .illust-pain__dot--6,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot--6 { animation-delay: 0.4s; }
    :is(.service-card, .specialist-card):hover .illust-pain__dot--7,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot--7 { animation-delay: 0.48s; }
    :is(.service-card, .specialist-card):hover .illust-pain__dot--8,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot--8 { animation-delay: 0.56s; }
    :is(.service-card, .specialist-card):hover .illust-pain__dot--9,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot--9 { animation-delay: 0.64s; }

    :is(.service-card, .specialist-card):hover .illust-pain__dot--primary,
    :is(.service-card, .specialist-card):focus-within .illust-pain__dot--primary {
      animation: pain-dot-pulse 0.9s var(--motion-ease) infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-pain__ring,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring {
      opacity: 0.55;
      animation: pain-ring-pulse 1.4s var(--motion-ease) infinite;
    }

    :is(.service-card, .specialist-card):hover .illust-pain__ring--1,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring--1 { animation-delay: 0s; }
    :is(.service-card, .specialist-card):hover .illust-pain__ring--2,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring--2 { animation-delay: 0.1s; }
    :is(.service-card, .specialist-card):hover .illust-pain__ring--3,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring--3 { animation-delay: 0.2s; }
    :is(.service-card, .specialist-card):hover .illust-pain__ring--4,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring--4 { animation-delay: 0.3s; }
    :is(.service-card, .specialist-card):hover .illust-pain__ring--5,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring--5 { animation-delay: 0.4s; }
    :is(.service-card, .specialist-card):hover .illust-pain__ring--6,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring--6 { animation-delay: 0.5s; }
    :is(.service-card, .specialist-card):hover .illust-pain__ring--7,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring--7 { animation-delay: 0.6s; }
    :is(.service-card, .specialist-card):hover .illust-pain__ring--8,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring--8 { animation-delay: 0.7s; }
    :is(.service-card, .specialist-card):hover .illust-pain__ring--9,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring--9 { animation-delay: 0.8s; }

    :is(.service-card, .specialist-card):hover .illust-pain__ring--primary,
    :is(.service-card, .specialist-card):focus-within .illust-pain__ring--primary {
      opacity: 0.7;
      animation: pain-ring-pulse 1s var(--motion-ease) infinite;
    }

    @keyframes pain-dot-pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.35); }
    }

    @keyframes pain-ring-pulse {
      0%   { opacity: 0.15; transform: scale(0.85); }
      50%  { opacity: 0.55; transform: scale(1.15); }
      100% { opacity: 0; transform: scale(1.45); }
    }

    /* Touch — resting accent tint */
    @media (hover: none) {
      .service-illust { color: var(--accent-text); opacity: 0.65; }
      .illust-gyn__cavity { opacity: 0.6; }
      .illust-pain__bursts { opacity: 0.65; }
      .illust-pain__ring { opacity: 0.35; }
      .illust-surg__cross { opacity: 0.6; }
    }

    @media (prefers-reduced-motion: reduce) {
      :is(.service-card, .specialist-card):hover .service-illust,
      :is(.service-card, .specialist-card):focus-within .service-illust {
        transform: none;
      }

      :is(.service-card, .specialist-card):hover .illust-draw,
      :is(.service-card, .specialist-card):hover .illust-eye__drop,
      :is(.service-card, .specialist-card):hover .illust-gi__wave,
      :is(.service-card, .specialist-card):hover .illust-ent__wave--1,
      :is(.service-card, .specialist-card):hover .illust-ent__wave--2,
      :is(.service-card, .specialist-card):hover .illust-pain__dot,
      :is(.service-card, .specialist-card):hover .illust-pain__ring,
      :is(.service-card, .specialist-card):focus-within .illust-draw,
      :is(.service-card, .specialist-card):focus-within .illust-eye__drop,
      :is(.service-card, .specialist-card):focus-within .illust-gi__wave,
      :is(.service-card, .specialist-card):focus-within .illust-ent__wave--1,
      :is(.service-card, .specialist-card):focus-within .illust-ent__wave--2,
      :is(.service-card, .specialist-card):focus-within .illust-pain__dot,
      :is(.service-card, .specialist-card):focus-within .illust-pain__ring {
        animation: none;
      }

      :is(.service-card, .specialist-card):hover .illust-surg__suture,
      :is(.service-card, .specialist-card):focus-within .illust-surg__suture { opacity: 0.8; }
      :is(.service-card, .specialist-card):hover .illust-pain__bursts,
      :is(.service-card, .specialist-card):focus-within .illust-pain__bursts { opacity: 0.75; }
      :is(.service-card, .specialist-card):hover .illust-pain__ring,
      :is(.service-card, .specialist-card):focus-within .illust-pain__ring { opacity: 0.4; }
      :is(.service-card, .specialist-card):hover .illust-ent__wave--1,
      :is(.service-card, .specialist-card):hover .illust-ent__wave--2,
      :is(.service-card, .specialist-card):focus-within .illust-ent__wave--1,
      :is(.service-card, .specialist-card):focus-within .illust-ent__wave--2 { opacity: 0.5; }
    }

    .service-card:hover {
      background: var(--surface-2);
    }

    .service-card__index {
      color: var(--accent-text);
      transition: color var(--motion-dur-fast) var(--motion-ease);
    }

    .service-card:hover .service-card__index {
      color: var(--accent-text);
    }

    .service-card h3,
    .service-card h2 {
      margin-top: calc(var(--space-unit) * 0.5);
      color: var(--text);
    }

    .service-card__category {
      margin-top: 8px;
      font-size: var(--text-mono-sm);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .service-card .t-small {
      margin-top: calc(var(--space-unit) * 0.65);
    }

    .services__note {
      font-style: italic;
      margin-top: 32px;
    }

    @media (max-width: 980px) {
      .services__grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 620px) {
      .services__grid {
        grid-template-columns: 1fr;
      }

      .service-card {
        padding: 36px 28px;
      }
    }

    /* ================================================================
       PROVIDERS — CMS-driven cards (data/providers.json)
       ================================================================ */

    .providers,
    .team {
      background: var(--bg);
    }

    .providers__header,
    .team__header {
      max-width: 640px;
    }

    .providers__header h2,
    .team__header h2 {
      margin-top: calc(var(--space-unit) * 0.85);
      color: var(--text);
    }

    .providers__header .t-small {
      margin-top: 10px;
    }

    .providers__facility {
      display: none;
      margin: calc(var(--space-unit) * 1.25) 0 0;
      aspect-ratio: 21 / 9;
      max-height: 280px;
      width: 100%;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--hairline);
      background: var(--surface-2);
      box-shadow: var(--shadow-rest);
    }

    .providers__facility.has-image {
      display: block;
    }

    .providers__facility .fdh-photo__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    .providers-grid {
      list-style: none;
      padding: 0;
      margin-top: calc(var(--space-unit) * 1.5);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .providers-grid__item {
      display: flex;
      min-width: 0;
    }

    .provider-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-rest);
      transition: transform var(--motion-dur-fast) var(--motion-ease),
                  box-shadow var(--motion-dur-fast) var(--motion-ease);
    }

    .provider-card.revealed:hover,
    .provider-card.revealed:focus-within {
      box-shadow: var(--shadow-raise);
      transform: translateY(-2px);
    }

    .provider-card__photo {
      position: relative;
      /* 4/3 window: the supplied portrait is a head-to-chest crop
         (819x538) — a wider window shows shoulders and epaulettes
         instead of side-cropping back down to a face. */
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: var(--surface-2);
    }

    .provider-card__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .provider-card__photo--empty {
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px dashed var(--hairline);
      background: repeating-linear-gradient(
        -45deg,
        var(--surface-2),
        var(--surface-2) 8px,
        var(--surface) 8px,
        var(--surface) 16px
      );
    }

    .provider-card__photo-label {
      text-transform: uppercase;
      color: var(--accent-text);
      padding: 16px;
      text-align: center;
    }

    .provider-card__body {
      padding: 22px 24px 26px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .provider-card__badge {
      text-transform: uppercase;
      color: var(--accent-text);
      margin-bottom: 10px;
    }

    .provider-card__name {
      line-height: 1.25;
      color: var(--text);
    }

    .provider-card__role {
      margin-top: 6px;
      font-size: var(--text-mono-sm);
      font-weight: var(--weight-heavy);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--accent-text);
    }

    .provider-card__discipline {
      margin-top: 8px;
      font-size: 14px;
      font-weight: var(--weight-medium);
      color: var(--text-muted);
    }

    .provider-card__status {
      margin-top: 8px;
      color: var(--accent-text);
    }

    .provider-card__note {
      margin-top: 10px;
      flex: 1;
    }

    .provider-card__meta {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--hairline);
    }

    .provider-card__meta-row {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 8px;
      align-items: baseline;
    }

    .provider-card__meta-row + .provider-card__meta-row {
      margin-top: 8px;
    }

    .provider-card__meta dt {
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .provider-card__meta dd {
      font-size: var(--text-small);
      color: var(--text);
      margin: 0;
    }

    .provider-card--unallocated {
      border-style: dashed;
      background: var(--surface-2);
      box-shadow: none;
    }

    .provider-card--unallocated .provider-card__body {
      min-height: 168px;
      justify-content: center;
    }

    .provider-card--unallocated .provider-card__discipline {
      color: var(--text);
      margin-top: 0;
    }

    .provider-card--placeholder {
      border-color: var(--accent-bright);
    }

    .providers__cta {
      margin-top: calc(var(--space-unit) * 1.25);
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    @media (max-width: 1024px) {
      .providers-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 620px) {
      .providers-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ================================================================
       TEAM — legacy leadership card (kept for reference pages if needed)
       ================================================================ */

    .leader-card {
      margin-top: calc(var(--space-unit) * 2);
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 48px;
      background: var(--surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-rest);
      overflow: hidden;
    }

    .leader-card__photo {
      position: relative;
      min-height: 340px;
      background: var(--surface-2);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .leader-card__photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .leader-card__monogram {
      color: var(--accent-bright);
    }

    .leader-card__body {
      padding: 44px 44px 44px 0;
    }

    .leader-card__name {
      color: var(--text);
    }

    .leader-card__role {
      margin-top: 8px;
      font-weight: var(--weight-heavy);
      font-size: var(--text-small);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-text);
    }

    .leader-card__bio {
      margin-top: calc(var(--space-unit) * 0.75);
      color: var(--text-muted);
      max-width: 58ch;
    }

    .leader-card__credit {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--hairline);
    }

    /* Providers stub */
    .providers-stub {
      margin-top: calc(var(--space-unit) * 1.25);
      background: var(--surface-2);
      border-radius: var(--radius);
      padding: 28px 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: calc(var(--space-unit) * 1.25);
    }

    .providers-stub .t-small {
      margin-top: 8px;
      max-width: 60ch;
    }

    .providers-stub .btn-ghost {
      flex: none;
    }

    .providers-stub__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      flex: none;
    }

    /* Visiting specialists preview grid */
    .specialists-preview {
      margin-top: calc(var(--space-unit) * 1.5);
    }

    .specialists-preview__header {
      max-width: 640px;
    }

    .specialists-preview__header .t-small {
      margin-top: 10px;
    }

    .specialists-preview__grid {
      list-style: none;
      padding: 0;
      margin-top: calc(var(--space-unit) * 1.25);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .specialist-card {
      background: var(--surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-rest);
      transition: transform var(--motion-dur-fast) var(--motion-ease),
                  box-shadow var(--motion-dur-fast) var(--motion-ease);
    }

    .specialist-card.revealed:hover,
    .specialist-card.revealed:focus-within {
      transform: translateY(-3px);
      box-shadow: var(--shadow-raise);
    }

    .specialist-card__photo {
      position: relative;
      aspect-ratio: 4 / 4.5;
      overflow: hidden;
      background: var(--surface-2);
    }

    .specialist-card__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 15%;
      filter: saturate(0.92);
      transition: filter var(--motion-dur-slow) var(--motion-ease),
                  transform var(--motion-dur-slow) var(--motion-ease);
    }

    .specialist-card:hover .specialist-card__photo img {
      filter: saturate(1);
      transform: scale(1.03);
    }

    .specialist-card__body {
      padding: 20px 22px 24px;
    }

    .specialist-card__visual {
      height: 56px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
    }

    .specialist-card__visual .service-illust {
      width: 52px;
      height: 52px;
    }

    .specialist-card__discipline {
      font-weight: var(--weight-heavy);
      font-size: var(--text-small);
      color: var(--text);
    }

    .specialist-card__body .t-small {
      margin-top: 6px;
      font-size: 13px;
    }

    .specialists-preview__cta {
      margin-top: calc(var(--space-unit) * 1.15);
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    @media (max-width: 1024px) {
      .specialists-preview__grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 520px) {
      .specialists-preview__grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 860px) {
      .leader-card {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .leader-card__photo {
        min-height: 300px;
      }

      .leader-card__body {
        padding: 36px 32px 40px;
      }

      .providers-stub {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px;
      }
    }

    /* ================================================================
       LOCATION — where to go; answers the second half of the booking decision
       ================================================================ */

    .location {
      background: var(--bg);
      border-top: 1px solid var(--hairline);
    }

    .location__grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 56px;
      align-items: start;
    }

    .location__map {
      position: relative;
    }

    @media (min-width: 881px) {
      .location__map {
        position: sticky;
        top: calc(96px + var(--space-unit));
      }
    }

    .location__header h2 {
      margin-top: calc(var(--space-unit) * 0.85);
      color: var(--text);
    }

    .location__details {
      margin-top: calc(var(--space-unit) * 1.5);
    }

    .location__details dl {
      margin: 0;
    }

    .location__item + .location__item {
      margin-top: 24px;
    }

    .location__item dt {
      font-weight: var(--weight-body);
      text-transform: uppercase;
      color: var(--accent-text);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .site-icon-slot {
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: var(--radius);
      background: var(--surface-2);
    }

    .site-icon {
      width: 18px;
      height: 18px;
      color: var(--accent-text);
      display: block;
    }

    .site-icon__line {
      vector-effect: non-scaling-stroke;
    }

    .site-icon__draw {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: site-icon-draw 1s var(--motion-ease) forwards;
    }

    .site-icon__accent {
      animation: site-accent-in 0.45s var(--motion-ease) 0.8s forwards;
    }

    @keyframes site-icon-draw {
      to { stroke-dashoffset: 0; }
    }

    @keyframes site-accent-in {
      to { opacity: 1; }
    }

    .location__item:hover .site-icon,
    .pillar-card:hover .site-icon,
    .pathway-step:hover .site-icon {
      color: var(--accent);
      transform: translateY(-1px);
      transition: color var(--motion-dur-fast) var(--motion-ease),
                  transform var(--motion-dur-fast) var(--motion-ease);
    }

    .location__item dd {
      margin: 6px 0 0;
      font-size: var(--text-body);
      line-height: var(--line-height);
      color: var(--text);
    }

    .location__item dd a.contact-link {
      color: var(--text);
      text-decoration: none;
      border-bottom: 1px solid var(--hairline);
      transition: color var(--motion-dur-fast) var(--motion-ease),
                  border-color var(--motion-dur-fast) var(--motion-ease);
      padding: 8px 0;
      margin: 0;
      min-height: 44px;
    }

    .location__item dd a.contact-link:hover {
      color: var(--accent-text);
      border-bottom-color: var(--accent-text);
    }

    .location__cta {
      margin-top: calc(var(--space-unit) * 1.25);
    }

    .location__map-frame {
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      overflow: hidden;
      min-height: 380px;
      box-shadow: var(--shadow-rest);
    }

    .location__map-frame iframe {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 380px;
      border: 0;
    }

    @media (max-width: 880px) {
      .location__grid {
        grid-template-columns: 1fr;
        gap: calc(var(--space-unit) * 1.75);
      }

      .location__map {
        order: 2;
      }
    }

    /* ================================================================
       MEDICAL AID — honest answer-path; no invented scheme list
       ================================================================ */

    .medical-aid {
      background: var(--surface-2);
      border-top: 1px solid var(--hairline);
    }

    .medical-aid__inner {
      max-width: 680px;
      margin-inline: auto;
      text-align: left;
    }

    .medical-aid__inner:has(.pillar-grid) {
      max-width: min(960px, var(--container-max));
    }

    .medical-aid__inner h2,
    .medical-aid__header h2 {
      margin-top: calc(var(--space-unit) * 0.85);
      color: var(--text);
      max-width: 22ch;
    }

    .medical-aid__lede {
      margin-top: calc(var(--space-unit) * 0.75);
      color: var(--text-muted);
      max-width: 58ch;
    }

    /* Activate when FDH supplies accepted schemes — insert list above .medical-aid__actions */
    .medical-aid__schemes {
      margin-top: calc(var(--space-unit) * 1.25);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px 24px;
      list-style: none;
      padding: 0;
    }

    @media (max-width: 480px) {
      .medical-aid__schemes {
        grid-template-columns: 1fr;
      }
    }

    .medical-aid__actions {
      margin-top: 32px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
    }

    .medical-aid__cred-link {
      margin-top: calc(var(--space-unit) * 0.85);
    }

    .medical-aid__cred-link a {
      color: var(--accent-text);
      text-decoration: none;
      border-bottom: 1px solid rgba(36, 105, 134, 0.28);
      padding-bottom: 2px;
      transition: border-color var(--motion-dur-fast) var(--motion-ease),
                  color var(--motion-dur-fast) var(--motion-ease);
    }

    .medical-aid__cred-link a:hover {
      color: var(--accent);
      border-bottom-color: var(--accent-bright);
    }

    /* ================================================================
       FACILITY PHOTOGRAPHY — optional slots (data/photography.json)
       ================================================================ */

    .fdh-photo:not(.has-image) {
      min-height: 0;
    }

    .fdh-photo__img {
      display: block;
      max-width: 100%;
    }

    /* ================================================================
       TRUST STRIP — verifiable credentials ledger (data/trust.json)
       ================================================================ */

    .trust-strip--full {
      background: var(--surface);
      border-top: 1px solid var(--hairline);
      padding-block: clamp(48px, 6vw, 72px);
      scroll-margin-top: 96px;
    }

    .trust-strip__header {
      max-width: 48ch;
      margin-bottom: clamp(24px, 4vw, 36px);
    }

    .trust-strip__header .t-h3 {
      margin-top: calc(var(--space-unit) * 0.65);
      color: var(--text);
    }

    .trust-strip__editor-note {
      margin-bottom: calc(var(--space-unit) * 0.85);
      padding: 12px 16px;
      border: 1px dashed var(--accent-bright);
      border-radius: var(--radius);
      background: var(--surface-2);
      color: var(--accent-text);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .trust-strip__ledger {
      display: grid;
      gap: clamp(20px, 3vw, 28px);
    }

    .trust-strip__block {
      padding: 20px 22px;
      background: var(--surface-2);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
    }

    .trust-strip__label {
      color: var(--accent-text);
      text-transform: uppercase;
    }

    .trust-strip__value {
      margin-top: 10px;
      font-weight: var(--weight-heavy);
      color: var(--text);
      line-height: 1.35;
    }

    .trust-strip__meta {
      margin-top: 6px;
      color: var(--text-muted);
    }

    .trust-strip__accreditations {
      list-style: none;
      padding: 0;
      margin: 10px 0 0;
      display: grid;
      gap: 12px;
    }

    .trust-strip__accreditation {
      display: grid;
      gap: 4px;
    }

    .trust-strip__pending {
      display: inline-block;
      padding: 2px 8px;
      border: 1px dashed var(--accent-bright);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--text-muted);
      letter-spacing: 0.04em;
      font-weight: var(--weight-body);
    }

    .trust-schemes {
      margin-top: calc(var(--space-unit) * 1.25);
    }

    .trust-schemes__heading {
      color: var(--text);
    }

    .trust-schemes__list {
      margin-top: calc(var(--space-unit) * 0.65);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 24px;
      list-style: none;
      padding: 0;
      color: var(--text-muted);
    }

    .trust-schemes__note,
    .trust-schemes__crosslink {
      margin-top: calc(var(--space-unit) * 0.65);
      color: var(--text-muted);
    }

    .trust-schemes__crosslink a,
    .trust-strip__booking-note a {
      color: var(--accent-text);
      text-decoration: none;
      border-bottom: 1px solid rgba(36, 105, 134, 0.28);
      padding-bottom: 1px;
      transition: border-color var(--motion-dur-fast) var(--motion-ease),
                  color var(--motion-dur-fast) var(--motion-ease);
    }

    .trust-schemes__crosslink a:hover,
    .trust-strip__booking-note a:hover {
      color: var(--accent);
      border-bottom-color: var(--accent-bright);
    }

    .trust-strip--booking {
      margin-top: calc(var(--space-unit) * 1.1);
      padding: 18px 20px;
      border: 1px solid var(--hairline-dark);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, 0.04);
    }

    .trust-strip__compact {
      margin: 0;
    }

    .trust-strip__compact-row {
      display: grid;
      gap: 6px;
    }

    .trust-strip__compact-row dt {
      color: var(--accent-bright);
      text-transform: uppercase;
    }

    .trust-strip__compact-row dd {
      margin: 0;
      color: var(--text-on-dark);
      font-weight: var(--weight-heavy);
    }

    .trust-strip__booking-note {
      margin-top: 14px;
      color: var(--text-on-dark-muted);
    }

    .book .trust-strip__pending {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(79, 163, 209, 0.45);
      color: var(--text-on-dark-muted);
    }

    @media (min-width: 880px) {
      .trust-strip__ledger {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
      }

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

    @media (max-width: 479px) {
      .trust-schemes__list {
        grid-template-columns: 1fr;
      }
    }

    /* ================================================================
       BOOKING — the one dark band; call first, callback form secondary
       ================================================================ */

    .book {
      /* Error semantics only — deliberately NOT var(--brand-red), and never
         on an interactive element. The one permitted red-adjacent use. */
      --error: #B4232F;

      background: radial-gradient(120% 140% at 20% 0%, var(--ink-deep-2), var(--ink-deep) 60%);
      color: var(--text-on-dark);
      padding-bottom: clamp(72px, 10vw, 120px);
      position: relative;
      overflow: hidden;
    }

    .book__facility {
      display: none;
      position: absolute;
      z-index: 0;
      top: 0;
      right: 0;
      width: min(42vw, 520px);
      height: 100%;
      margin: 0;
      pointer-events: none;
    }

    .book__facility.has-image {
      display: block;
    }

    .book__facility .fdh-photo__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      opacity: 0.22;
    }

    .book.has-booking-photo .book__grid {
      position: relative;
      z-index: 1;
    }

    @media (max-width: 919px) {
      .book__facility.has-image {
        display: none;
      }
    }

    .book__grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 64px;
      align-items: start;
    }

    .book__intro .t-eyebrow {
      color: var(--accent-bright);
    }

    .book__intro .t-eyebrow::before {
      background: var(--accent-bright);
    }

    .book__intro h2 {
      margin-top: calc(var(--space-unit) * 0.85);
      color: var(--text-on-dark);
    }

    .book__intro p {
      margin-top: calc(var(--space-unit) * 0.75);
      color: var(--text-on-dark-muted);
      max-width: 46ch;
    }

    .book__call-primary {
      margin-top: calc(var(--space-unit) * 1.25);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .book__call-btn {
      min-height: 48px;
      padding: 14px 28px;
      font-size: 16px;
      letter-spacing: 0.01em;
    }

    .book__email-link {
      font-size: var(--text-small);
    }

    .book__secondary-label {
      margin-top: calc(var(--space-unit) * 1.15);
      color: var(--text-on-dark-muted);
      max-width: 42ch;
    }

    .book-card__heading {
      color: var(--text);
      margin-bottom: 24px;
    }

    .book-card--secondary button[type="submit"] {
      width: 100%;
      min-height: 44px;
      margin-top: 8px;
    }

    /* Form card */
    .book-card {
      background: var(--surface);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-raise);
      padding: 44px;
      color: var(--text);
    }

    .field {
      margin-bottom: 22px;
    }

    .field label {
      display: block;
      font-weight: var(--weight-heavy);
      font-size: var(--text-mono-sm);
      color: var(--text);
      margin-bottom: 8px;
    }

    .field input,
    .field textarea {
      width: 100%;
      font-size: var(--text-body); /* never smaller — iOS zoom trigger */
      color: var(--text);
      background: var(--surface);
      padding: 14px 16px;
      border: 1px solid var(--hairline);
      border-radius: var(--radius);
      transition: border-color var(--motion-dur-fast) var(--motion-ease);
    }

    .field textarea {
      resize: vertical;
      min-height: 96px;
    }

    .field input:focus,
    .field textarea:focus {
      border-color: var(--accent);
    }

    .field input::placeholder {
      color: var(--text-muted);
      opacity: 0.7;
    }

    .field__help {
      margin-top: 8px;
      font-size: 13.5px;
      color: var(--text-muted);
    }

    /* Validation states — pristine fields show nothing */
    .field__error {
      display: none;
      margin-top: 8px;
      font-size: 13.5px;
      color: var(--error);
    }

    .field.is-invalid .field__error {
      display: block;
    }

    .field.is-invalid input,
    .field.is-invalid textarea {
      border-color: var(--error);
    }

    /* Submission failure strip — data stays intact above it */
    .book-fail {
      display: none;
      margin-bottom: 22px;
      padding: 14px 16px;
      font-size: 14px;
      color: var(--error);
      border: 1px solid var(--error);
      border-radius: var(--radius);
      background: var(--surface);
    }

    .book-fail.is-visible {
      display: block;
    }

    .book-fail[role="alert"]:not(.is-visible) {
      display: none;
    }

    .book-card .btn-solid {
      width: 100%;
      text-align: center;
      transition: opacity var(--motion-dur-fast) var(--motion-ease),
                  transform var(--motion-dur-fast) var(--motion-ease),
                  background var(--motion-dur-fast) var(--motion-ease);
    }

    .book-card .btn-solid[disabled] {
      opacity: 0.7;
      cursor: default;
    }

    /* Success panel */
    .book-success {
      text-align: left;
    }

    .book-success svg {
      display: block;
    }

    .book-success h3 {
      margin-top: calc(var(--space-unit) * 0.6);
      color: var(--text);
      outline: none;
    }

    .book-success p {
      margin-top: calc(var(--space-unit) * 0.5);
      color: var(--text-muted);
      max-width: 44ch;
    }

    .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;
    }

    @media (max-width: 920px) {
      .book__grid {
        grid-template-columns: 1fr;
        gap: calc(var(--space-unit) * 1.5);
      }

      .book-card {
        padding: 32px 26px;
      }
    }

    /* ================================================================
       FOOTER — dark close; honest, verifiable, undecorated
       ================================================================ */

    .site-footer {
      background: var(--ink-deep);
      color: var(--text-on-dark-muted);
      border-top: 1px solid var(--hairline-dark);
      padding-block: 64px 40px;
      margin-top: -1px; /* hairline sits flush against the book band */
    }

    .site-footer__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: calc(var(--space-unit) * 2);
      align-items: start;
    }

    .site-footer .brand {
      display: inline-flex;
    }

    .site-footer .brand__mark {
      color: var(--accent-bright);
    }

    .site-footer .brand__name {
      color: var(--text-on-dark-muted);
    }

    .site-footer__tagline {
      margin-top: calc(var(--space-unit) * 0.75);
      font-size: 14px;
      line-height: 1.5;
      color: var(--text-on-dark-muted);
      max-width: 28ch;
    }

    .site-footer__nav {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .site-footer__nav a {
      font-size: 14px;
      font-weight: var(--weight-medium);
      color: var(--text-on-dark-muted);
      text-decoration: none;
      background-image: linear-gradient(currentColor, currentColor);
      background-repeat: no-repeat;
      background-position: 0 calc(100% + 3px);
      background-size: 0% 1px;
      padding-block: 10px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      width: fit-content;
      transition: color var(--motion-dur-fast) var(--motion-ease),
                  background-size var(--motion-dur-fast) var(--motion-ease);
    }

    .site-footer__nav a:hover {
      color: var(--text-on-dark);
      background-size: 100% 1px;
    }

    .site-footer__contact {
      font-size: 14px;
      line-height: 1.6;
    }

    .site-footer__address {
      font-style: normal;
      color: var(--text-on-dark-muted);
    }

    .site-footer__contact p {
      margin-top: 12px;
    }

    .site-footer__contact-type,
    .site-footer__label {
      text-transform: uppercase;
      color: var(--accent-bright);
      margin-right: 6px;
    }

    .site-footer__contact a {
      color: var(--text-on-dark-muted);
      text-decoration: none;
      border-bottom: 1px solid var(--hairline-dark);
      transition: color var(--motion-dur-fast) var(--motion-ease),
                  border-color var(--motion-dur-fast) var(--motion-ease);
    }

    .site-footer__contact a.contact-link:hover {
      color: var(--text-on-dark);
      border-bottom-color: rgba(244, 248, 251, 0.35);
    }

    .site-footer__contact .contact-link {
      padding: 8px 0;
      margin: 0;
      min-height: 44px;
    }

    .site-footer__strip,
    .site-footer__legal {
      margin-top: 44px;
      padding-top: 28px;
      border-top: 1px solid var(--hairline-dark);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px 24px;
      font-size: 13px;
      color: var(--text-on-dark-muted);
    }

    @media (max-width: 768px) {
      .site-footer__grid {
        grid-template-columns: 1fr;
        gap: calc(var(--space-unit) * 1.75);
      }

      .site-footer__nav a {
        width: 100%;
      }
    }
  
    /* Inner pages */
    .page-banner {
      padding-block: clamp(72px, 10vw, 120px) calc(var(--space-unit) * 1.5);
      background: var(--bg);
      border-bottom: 1px solid var(--hairline);
    }
    .page-banner h1 { color: var(--text); max-width: 24ch; }
    .page-banner .t-body { margin-top: 20px; color: var(--text-muted); max-width: 58ch; }
    .page-content { background: var(--bg); }
    .page-content .wrap { max-width: 760px; }
    .page-content .wrap:has(.pathway-grid) { max-width: min(960px, var(--container-max)); }
    .page-content .t-body + .t-body { margin-top: calc(var(--space-unit) * 0.75); }
    .page-content .t-body { color: var(--text-muted); }
    .placeholder-note {
      margin-top: calc(var(--space-unit) * 1.25);
      padding: 24px 28px;
      background: var(--surface-2);
      border: 1px solid var(--hairline);
      border-radius: var(--radius);
    }
    .page-links {
      margin-top: calc(var(--space-unit) * 1.5);
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    /* ================================================================
       SCROLL & AMBIENCE — site-wide facelift layer.
       Reading-progress bar, current-page nav state (styling already
       lives on .is-active above), and a living hero. Every decorative
       animation here is switched off by the reduced-motion kill-switch;
       the progress bar merely reflects scroll position, so it stays.
       ================================================================ */

    :root {
      --accent-glow:   rgba(79, 163, 209, 0.16);
      --accent-glow-0: rgba(79, 163, 209, 0);
    }

    /* Reading-progress bar, seated on the header's bottom edge. */
    .scroll-progress {
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 2px;
      width: 100%;
      transform: scaleX(var(--progress, 0));
      transform-origin: 0 50%;
      background: var(--accent-bright);
      z-index: 1;
      pointer-events: none;
    }

    /* Living hero: a slow breathing glow behind the content, plus a
       gentle float on the pathway visual. The glow is an absolutely
       positioned pseudo so it never becomes a grid item. */
    .hero { position: relative; overflow: hidden; }
    .hero__content,
    .hero__media { position: relative; z-index: 1; }

    .hero::before {
      content: '';
      position: absolute;
      z-index: 0;
      top: -20%;
      right: -8%;
      width: 60vw;
      height: 60vw;
      max-width: 720px;
      max-height: 720px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent-glow), var(--accent-glow-0) 62%);
      animation: hero-breathe 9s var(--motion-ease) infinite;
      pointer-events: none;
    }

    @keyframes hero-breathe {
      0%, 100% { transform: scale(1);    opacity: 0.65; }
      50%      { transform: scale(1.08); opacity: 1;    }
    }

    .hero__media.has-image {
      animation: hero-float 7s var(--motion-ease) infinite;
    }

    @keyframes hero-float {
      0%, 100% { transform: translateY(0);     }
      50%      { transform: translateY(-10px); }
    }

    /* ================================================================
       CHOREOGRAPHY — the beast layer. Entrance sequencing, scroll
       parallax, counter-phase depth glow, drawn-in eyebrow rules.
       Additive only: composes with the reveal/float systems above.
       ================================================================ */

    /* --- Hero entrance: content rises in sequence on load --- */
    .js .hero__eyebrow,
    .js .hero h1,
    .js .hero__lede,
    .js .hero__pathway-link,
    .js .hero__ctas,
    .js .hero__reassure {
      animation: hero-rise 0.75s var(--motion-ease) backwards;
    }

    .js .hero h1            { animation-delay: 90ms;  }
    .js .hero__lede         { animation-delay: 180ms; }
    .js .hero__pathway-link { animation-delay: 240ms; }
    .js .hero__ctas         { animation-delay: 300ms; }
    .js .hero__reassure     { animation-delay: 390ms; }

    @keyframes hero-rise {
      from { opacity: 0; transform: translateY(26px); }
    }

    /* --- Second glow, bottom-left, breathing in counter-phase.
           Together the two glows make the light feel like it moves. --- */
    .hero::after {
      content: '';
      position: absolute;
      z-index: 0;
      bottom: -25%;
      left: -12%;
      width: 46vw;
      height: 46vw;
      max-width: 560px;
      max-height: 560px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent-glow), var(--accent-glow-0) 62%);
      opacity: 0.7;
      animation: hero-breathe 9s var(--motion-ease) -4.5s infinite;
      pointer-events: none;
    }

    /* --- Scroll parallax: JS sets --plx-* on .hero; the `translate`
           property composes with the transform-based float/breathe
           animations instead of fighting them. --- */
    .hero__media.has-image { translate: 0 var(--plx-soft, 0px); }
    .hero__content { translate: 0 var(--plx-faint, 0px); }

    /* --- Eyebrow rule draws in when its block reveals (and on hero load) --- */
    .js [data-reveal] .t-eyebrow::before,
    .js [data-reveal].t-eyebrow::before {
      transform: scaleX(0);
      transform-origin: 0 50%;
      transition: transform var(--motion-dur-slow) var(--motion-ease) 120ms;
    }

    .js [data-reveal].revealed .t-eyebrow::before,
    .js [data-reveal].revealed.t-eyebrow::before {
      transform: scaleX(1);
    }

    .js .hero__eyebrow::before {
      animation: eyebrow-draw 0.8s var(--motion-ease) 350ms backwards;
    }

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

    /* --- Reduced motion: entrance, glows, parallax and draws all off --- */
    @media (prefers-reduced-motion: reduce) {
      .js .hero__eyebrow,
      .js .hero h1,
      .js .hero__lede,
      .js .hero__pathway-link,
      .js .hero__ctas,
      .js .hero__reassure,
      .js .hero__eyebrow::before,
      .hero::before,
      .hero::after,
      .hero__media.has-image {
        animation: none;
      }

      .hero__media.has-image,
      .hero__content {
        translate: none;
      }

      .js [data-reveal] .t-eyebrow::before,
      .js [data-reveal].t-eyebrow::before {
        transform: none;
        transition: none;
      }
    }

    /* Pillar cards — medical aid, about values */
    .pillar-grid {
      list-style: none;
      padding: 0;
      margin-top: calc(var(--space-unit) * 1.5);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--hairline);
      border: 1px solid var(--hairline);
    }

    .pillar-card {
      background: var(--surface);
      padding: 28px 24px;
      transition: background var(--motion-dur-fast) var(--motion-ease);
    }

    .pillar-card:hover {
      background: var(--surface-2);
    }

    .pillar-card__icon {
      margin-bottom: 16px;
    }

    .pillar-card__icon .site-icon {
      width: 28px;
      height: 28px;
    }

    .pillar-card h3 {
      color: var(--text);
    }

    .pillar-card .t-small {
      margin-top: 10px;
      color: var(--text-muted);
    }

    @media (max-width: 720px) {
      .pillar-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Pathway steps — about page */
    .pathway-grid {
      list-style: none;
      padding: 0;
      margin-top: calc(var(--space-unit) * 1.5);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }

    .pathway-step {
      padding: 20px 16px;
      background: var(--surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius);
      transition: background var(--motion-dur-fast) var(--motion-ease),
                  border-color var(--motion-dur-fast) var(--motion-ease);
    }

    .pathway-step:hover {
      background: var(--surface-2);
      border-color: var(--accent-bright);
    }

    .pathway-step__icon {
      margin-bottom: 12px;
    }

    .pathway-step__icon .site-icon {
      width: 24px;
      height: 24px;
    }

    .pathway-step__label {
      text-transform: uppercase;
      color: var(--accent-text);
    }

    .pathway-step__title {
      margin-top: 6px;
      font-size: 14px;
      font-weight: var(--weight-medium);
      color: var(--text);
      line-height: 1.35;
    }

    @media (max-width: 920px) {
      .pathway-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .pathway-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Icon-only specialist cards (no photo yet) */
    .specialist-card--icon-only .specialist-card__photo {
      display: none;
    }

    .specialist-card--icon-only .specialist-card__visual {
      margin-top: 0;
      height: 112px;
      align-items: center;
      justify-content: center;
    }

    .specialist-card--icon-only .specialist-card__visual .service-illust {
      width: 96px;
      height: 96px;
    }

    @media (prefers-reduced-motion: reduce) {
      .site-icon__draw,
      .site-icon__accent,
      .hero__icon-accent,
      .illust-pain__figure {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
        transform: none;
      }
    }