/*
Theme Name: 2ndAct Health
Version: 1.1.8
Description: Custom theme for 2ndAct Health & Testing Services
Author: 2ndAct Health
*/
:root {
        color-scheme: light dark;
        --denim: #346d99;
        --denim-deep: #26536f;
        --ink-deep: #16324a;
        --accent: #2f6db3;
        --tint: #8dc4e0;
        --bg: #fdfefe;
        --bg-soft: #f2f7fa;
        --ink: #22333f;
        --ink-soft: #51656f;
        --line: #dce7ee;
        --focus-ring: #2f6db3;
        --radius: 6px;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --denim: #6ea6c9;
          --accent: #8dc4e0;
          --bg: #0b1b28;
          --bg-soft: #0f2436;
          --ink: #e9f2f8;
          --ink-soft: #aec4d4;
          --line: #22404f;
          --focus-ring: #8dc4e0;
        }
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        * { transition: none !important; }
      }
      body {
        margin: 0;
        font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: var(--bg);
        color: var(--ink);
        font-size: 17px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      img { max-width: 100%; display: block; }
      a { color: var(--accent); }
      a:focus-visible, button:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
        border-radius: 4px;
      }
      .wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
      .serif { font-family: "Source Serif 4", Georgia, serif; }

      /* ---------- Header (transparent over hero, solid on scroll) ---------- */
      header {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 60;
        color: #fff;
        transition: background 0.25s ease, box-shadow 0.25s ease;
      }
      header.scrolled {
        background: rgba(22, 50, 74, 0.96);
        box-shadow: 0 1px 0 rgba(255,255,255,0.08);
      }
      /* With the menu open the header is fully opaque, so the page
         behind it never ghosts through the menu panel */
      header.menu-open {
        background: #16324a;
        box-shadow: 0 1px 0 rgba(255,255,255,0.08);
      }
      .header-inner {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 74px;
      }
      .brand {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        flex: none;
        gap: 11px;
        color: #fff;
        text-decoration: none;
        padding: 8px 0;
        margin-right: 0;
        /* Nudge down so the logo's centre aligns with the centre of the
           menu items on its right */
        transform: translateY(5px);
      }
      .menu-btn { flex: none; margin-left: auto; }
      .brand img { width: 218px; height: auto; flex: none; }
      .brand-text {
        display: flex;
        flex-direction: column;
        line-height: 1;
      }
      .brand-primary {
        font-size: 1.42rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1;
        white-space: nowrap;
      }
      .brand-primary .act { color: var(--tint); }
      .brand-secondary {
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        line-height: 1.25;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.92);
        margin-top: 4px;
      }
      @media (max-width: 430px) {
        .brand img { width: 168px; }
        .header-inner { gap: 10px; }
      }
      nav.main-nav { display: none; }
      nav.main-nav ul {
        list-style: none; margin: 0; padding: 0;
        display: flex; align-items: center; gap: 2px;
      }
      nav.main-nav a {
        color: #fff; text-decoration: none;
        font-weight: 500; font-size: 0.97rem;
        padding: 10px 11px; border-radius: 6px;
        display: inline-block;
      }
      nav.main-nav a:hover { background: rgba(255,255,255,0.14); }
      .menu-btn {
        background: transparent;
        border: 1.5px solid rgba(255,255,255,0.55);
        color: #fff;
        border-radius: 9px;
        min-width: 48px; min-height: 48px;
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        font: inherit; font-size: 0.95rem; font-weight: 600;
        cursor: pointer; padding: 0 14px;
      }
      @media (min-width: 960px) {
        .menu-btn { display: none; }
        nav.main-nav { display: block; flex: none; margin-left: auto; }
      }
      .mobile-menu {
        display: none;
        background: #16324a;
        border-top: 1px solid rgba(255,255,255,0.16);
        padding: 6px 0 20px;
      }
      .mobile-menu.open { display: block; }
      .mobile-menu ul { list-style: none; margin: 0; padding: 0; }
      .mobile-menu a {
        color: #fff; text-decoration: none;
        display: flex; align-items: center; justify-content: space-between;
        padding: 13px 4px; min-height: 48px;
        font-weight: 600; font-size: 1.05rem;
        border-bottom: 1px solid rgba(255,255,255,0.12);
      }
      /* ---------- Hero — full-bleed opening image, as before ---------- */
      .hero {
        position: relative;
        min-height: 94svh;
        display: flex;
        align-items: flex-end;
        background: #0d2233;
        color: #fff;
        overflow: hidden;
      }
      .hero-bg {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover; object-position: 68% 42%;
      }
      .hero::before {
        content: "";
        position: absolute; inset: 0; z-index: 1;
        background:
          linear-gradient(0deg, rgba(10, 32, 48, 0.82) 0%, rgba(10, 32, 48, 0.35) 46%, rgba(10, 32, 48, 0) 68%),
          linear-gradient(90deg, rgba(10, 32, 48, 0.62) 0%, rgba(10, 32, 48, 0.28) 55%, rgba(10, 32, 48, 0) 82%),
          linear-gradient(180deg, rgba(10, 32, 48, 0.5) 0%, rgba(10, 32, 48, 0) 22%);
        pointer-events: none;
      }
      .hero .wrap { position: relative; z-index: 2; width: 100%; }
      .hero-inner {
        position: relative;
        padding: 170px 0 84px;
        max-width: 720px;
      }
      .hero-eyebrow {
        font-size: 0.82rem; font-weight: 700;
        letter-spacing: 0.2em; text-transform: uppercase;
        color: var(--tint);
        margin: 0 0 22px;
      }
      .hero h1 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(calc(2rem - 2pt), calc(4.6vw - 2pt), calc(3.1rem - 2pt));
        line-height: 1.12; font-weight: 600;
        margin: 0 0 20px; letter-spacing: -0.01em;
      }
      .hero h1 sup { font-size: 0.36em; font-weight: 500; }
      .hero-lede {
        font-size: clamp(1.08rem, 2.1vw, 1.3rem);
        line-height: 1.55;
        color: #eef6fb;
        margin: 0 0 18px; max-width: 36em;
      }
      .hero-lede strong { font-weight: 700; color: #fff; }
      .hero-questions {
        list-style: none; margin: 0 0 20px; padding: 0;
        max-width: 34em;
      }
      .hero-questions li {
        color: #d7e8f3;
        font-size: clamp(1rem, 1.8vw, 1.12rem);
        line-height: 1.35;
        padding: 1px 0;
      }
      .hero-here {
        font-family: "Source Serif 4", Georgia, serif;
        font-style: italic;
        font-size: clamp(1.18rem, 2.2vw, 1.38rem);
        line-height: 1.45;
        color: #fff;
        margin: 0 0 16px;
        max-width: 32em;
      }
      .hero-close {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(1.12rem, 2.2vw, 1.35rem);
        line-height: 1.45;
        color: #fff;
        margin: 0 0 12px; max-width: 32em;
      }
      .hero-close em { color: var(--tint); }
      .hero-future {
        font-family: "Source Serif 4", Georgia, serif;
        font-style: italic;
        font-size: clamp(1.12rem, 2.2vw, 1.35rem);
        line-height: 1.45;
        color: var(--tint);
        margin: 0 0 32px; max-width: 32em;
      }
      .hero-loc {
        color: #b9d2e2;
        font-size: 0.92rem; font-weight: 600;
        letter-spacing: 0.06em; text-transform: uppercase;
        margin: 38px 0 0;
      }
      @media (max-width: 760px) {
        .hero-bg { object-position: 64% 38%; }
        .hero-inner { padding: 150px 0 56px; max-width: none; }
      }
      .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
      .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        min-height: 54px; padding: 14px 28px;
        border-radius: 3px; border: 1.5px solid transparent;
        font-weight: 600; font-size: 1rem; text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        text-align: center;
      }
      .btn-light { background: #fff; color: var(--ink-deep); }
      .btn-light:hover { background: #e6f1f8; }
      .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.8); }
      .btn-ghost:hover { background: rgba(255,255,255,0.14); }
      .btn-denim { background: var(--denim); color: #fff; }
      .btn-denim:hover { background: var(--denim-deep); }
      /* Dark button for use over photography — deep navy, white type */
      .btn-dark { background: var(--ink-deep); color: #fff; border-color: rgba(255,255,255,0.35); }
      .btn-dark:hover { background: #0d2233; }
      /* Entry point shown but not yet live — an area under development */
      .btn-static { background: var(--bg-soft); color: var(--ink-soft); border-color: var(--line); cursor: default; }
      @media (prefers-color-scheme: dark) { .btn-denim:hover { background: #2a4f6e; } }
      @media (max-width: 520px) {
        .hero-actions { flex-direction: column; align-items: stretch; }
        .hero-inner { padding-bottom: 48px; }
      }

      /* ---------- Sections ---------- */
      section { padding: clamp(72px, 10vw, 118px) 0; scroll-margin-top: 70px; }
      .statement {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(1.65rem, 4vw, 2.5rem);
        font-weight: 500; line-height: 1.3;
        max-width: 21em; margin: 0;
        color: var(--ink);
      }
      .statement em { color: var(--denim); font-style: italic; }
      .body-copy { max-width: 40em; color: var(--ink-soft); margin: 26px 0 0; font-size: 1.06rem; }
      .body-copy strong { color: var(--ink); font-weight: 600; }

      /* Approach — same row layout, spacing and image proportions as
         the Areas of care rows, so every section is spaced the same */
      .approach-grid {
        display: grid; grid-template-columns: 1fr; gap: 26px;
        align-items: center;
      }
      @media (min-width: 860px) {
        .approach-grid { grid-template-columns: 1.08fr 0.92fr; gap: 56px; }
      }
      .approach-photo { margin: 0; }
      .approach-photo img {
        width: 100%; aspect-ratio: 4 / 3;
        object-fit: cover; object-position: center;
        border-radius: var(--radius);
      }
      /* Areas of care — flowing image rows */
      .care { background: var(--bg-soft); padding-top: clamp(40px, 5.5vw, 64px); }
      #approach { padding-top: clamp(34px, 5vw, 54px); padding-bottom: clamp(40px, 5.5vw, 64px); }
      .care-head { max-width: 720px; margin-bottom: clamp(44px, 6vw, 70px); }
      .care-head h2, .plain-head h2 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(1.9rem, 4.6vw, 2.7rem);
        font-weight: 600; line-height: 1.15; margin: 0 0 12px;
      }
      .care-head p, .plain-head p { color: var(--ink-soft); margin: 0; font-size: 1.05rem; max-width: 38em; }
      .svc {
        display: grid; grid-template-columns: 1fr; gap: 26px;
        align-items: center;
        padding: clamp(30px, 4.5vw, 52px) 0;
        border-top: 1px solid var(--line);
      }
      .svc:first-of-type { border-top: 0; padding-top: 0; }
      @media (min-width: 860px) {
        .svc { grid-template-columns: 1.08fr 0.92fr; gap: 56px; }
        .svc.flip { grid-template-columns: 0.92fr 1.08fr; }
        .svc.flip .svc-media { order: 2; }
      }
      .svc.svc-no-media { grid-template-columns: 1fr; }
      .svc-media img {
        width: 100%; aspect-ratio: 4 / 3;
        object-fit: cover; border-radius: var(--radius);
      }
      .svc-media a.media-link { display: block; border-radius: var(--radius); }
      .svc-media a.media-link img { transition: opacity 0.18s ease; }
      .svc-media a.media-link:hover img { opacity: 0.92; }
      .svc h3 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(1.4rem, 2.6vw, 1.65rem);
        font-weight: 600; line-height: 1.2; margin: 0 0 12px;
      }
      .svc p { color: var(--ink-soft); margin: 0 0 18px; max-width: 32em; }
      .svc a.more {
        font-weight: 700; text-decoration: none;
        display: inline-flex; align-items: center; gap: 7px;
        min-height: 44px;
      }
      .svc a.more:hover { text-decoration: underline; }

      /* Lymphatics — styled like the home page: main-image hero, key
         points, then the areas below. Still imagery only, blue theme. */
      .lymph { background: var(--bg); padding: 0; }
      /* Main image — same full-bleed treatment as the home page hero */
      .lymph-hero {
        position: relative;
        min-height: 82svh;
        display: flex;
        align-items: flex-end;
        background: #0d2233;
        color: #fff;
        overflow: hidden;
      }
      .lymph-hero-bg {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover; object-position: center 22%;
      }
      .lymph-hero::before {
        content: "";
        position: absolute; inset: 0; z-index: 1;
        background:
          linear-gradient(0deg, rgba(10, 32, 48, 0.86) 0%, rgba(10, 32, 48, 0.38) 48%, rgba(10, 32, 48, 0) 72%),
          linear-gradient(90deg, rgba(10, 32, 48, 0.66) 0%, rgba(10, 32, 48, 0.30) 55%, rgba(10, 32, 48, 0) 84%),
          linear-gradient(180deg, rgba(10, 32, 48, 0.45) 0%, rgba(10, 32, 48, 0) 22%);
        pointer-events: none;
      }
      .lymph-hero .wrap { position: relative; z-index: 2; width: 100%; }
      .lymph-hero-inner { padding: 150px 0 72px; max-width: 720px; }
      .lymph-eyebrow {
        font-size: 0.82rem; font-weight: 700;
        letter-spacing: 0.2em; text-transform: uppercase;
        color: var(--tint);
        margin: 0 0 22px;
      }
      .lymph-hero h2 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(2rem, 4.8vw, 3.1rem);
        font-weight: 600; line-height: 1.12; letter-spacing: -0.01em;
        margin: 0 0 20px;
      }
      .lymph-hero-lede {
        font-size: clamp(calc(1.08rem - 2pt), calc(2.1vw - 2pt), calc(1.28rem - 2pt));
        line-height: 1.55; color: #eef6fb;
        margin: 0 0 16px; max-width: 34em;
      }
      .lymph-hero-here {
        font-family: "Source Serif 4", Georgia, serif;
        font-style: italic;
        font-size: clamp(calc(1.14rem - 2pt), calc(2.2vw - 2pt), calc(1.34rem - 2pt));
        line-height: 1.45; color: #fff;
        margin: 0 0 14px; max-width: 32em;
      }
      .lymph-hero-healthspan {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(calc(1.2rem - 2pt), calc(2.3vw - 2pt), calc(1.42rem - 2pt));
        font-weight: 600;
        line-height: 1.45; color: #fff;
        margin: 0 0 30px; max-width: 32em;
      }
      .lymph-hero-healthspan em { color: var(--tint); font-style: normal; }
      @media (max-width: 760px) {
        .lymph-hero { min-height: 76svh; }
        .lymph-hero-bg { object-position: center 18%; }
        .lymph-hero-inner { padding: 130px 0 52px; max-width: none; }
      }
      /* Key points — directly under the main image, as on the home page */
      .lymph-keypoints { padding: clamp(30px, 4.5vw, 44px) 0 clamp(38px, 5.4vw, 58px); }
      .lymph-keypoints .kp-lede {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(1.35rem, 2.8vw, 1.75rem);
        font-weight: 500; line-height: 1.35;
        margin: 0 0 32px; max-width: none;
      }
      .lymph-keypoints .kp-lede em { color: var(--denim); }
      @media (min-width: 380px) { .lymph-keypoints .kp-lede em { white-space: nowrap; } }
      .lymph-roles {
        list-style: none; margin: 0; padding: 0;
        display: grid; grid-template-columns: 1fr; gap: 32px;
      }
      @media (min-width: 860px) { .lymph-roles { grid-template-columns: repeat(3, 1fr); gap: 44px; } }
      .lymph-roles li { border-top: 2px solid var(--denim); padding-top: 16px; }
      .lymph-roles h3 { margin: 0 0 6px; font-size: 1.06rem; }
      .lymph-roles p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
      /* Teaching diagrams — few, and placed where they teach: a bordered
         figure, diagram on one side, the plain-language lesson beside it */
      .teach-figure {
        margin: clamp(44px, 6vw, 64px) 0 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: clamp(24px, 4vw, 40px);
        display: grid; grid-template-columns: 1fr; gap: 26px;
        align-items: center;
      }
      .lymph-areas .teach-figure { background: var(--bg); margin: 0 0 clamp(30px, 4.5vw, 48px); }
      .teach-figure .tf-media { display: flex; justify-content: center; }
      .teach-figure .tf-media img { width: 100%; max-width: 400px; height: auto; }
      .teach-figure .tf-media svg { width: 100%; height: auto; }
      .teach-figure figcaption h4, .teach-figure figcaption h5 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(1.25rem, 2.6vw, 1.55rem); font-weight: 600; line-height: 1.25;
        margin: 0 0 10px;
      }
      .teach-figure figcaption p { color: var(--ink-soft); margin: 0 0 12px; max-width: 34em; }
      .teach-figure figcaption p:last-child { margin-bottom: 0; }
      .teach-figure figcaption p strong { color: var(--ink); }
      .teach-figure .tf-note {
        border-top: 1px solid var(--line); padding-top: 12px;
        font-size: 0.95rem;
      }
      .teach-figure.wide { display: block; }
      .teach-figure.wide figcaption { margin-top: 22px; max-width: 46em; }
      /* User-supplied diagrams — a compliment to the area they belong
         to, presented like the image rows on the main page: modest in
         size, sitting beside the copy in the same column as the area
         heading, never a full-width block of their own */
      .lymph-photo { margin: 0; }
      .lymph-photo img { width: 100%; height: auto; border-radius: var(--radius); }
      .kp-layout { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
      .kp-layout .kp-photo { width: 100%; max-width: 300px; justify-self: start; }
      /* The three jobs run across in one row; from 860px the anatomy
         image joins the same band at the right, its top aligned with
         the jobs row (Drainage) — the arrangement the owner specified */
      @media (min-width: 560px) {
        .kp-main .lymph-roles { grid-template-columns: repeat(3, 1fr); gap: 28px; }
      }
      @media (min-width: 860px) {
        .kp-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
        .kp-layout .kp-photo { max-width: 300px; justify-self: end; margin-top: 0; }
      }
      @media (min-width: 860px) {
        .teach-figure { grid-template-columns: 0.92fr 1.08fr; gap: 48px; }
      }
      /* The areas below — flowing rows on the soft blue ground, like Areas of care */
      #lymph-ageing { scroll-margin-top: 84px; }
      .lymph-areas { scroll-margin-top: 84px; background: var(--bg-soft); padding: clamp(38px, 5.4vw, 60px) 0 clamp(64px, 9vw, 100px); }
      .lymph-areas-head { margin: 0 0 44px; }
      .lymph-areas-head h3 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(1.9rem, 4.6vw, 2.7rem);
        font-weight: 600; line-height: 1.15; margin: 0 0 8px;
      }
      /* Smaller line directly after the section heading */
      .lymph-areas-sub {
        font-family: "Source Serif 4", Georgia, serif;
        font-style: italic;
        font-size: clamp(calc(1.15rem - 2pt), calc(2.4vw - 2pt), calc(1.4rem - 2pt));
        line-height: 1.35; color: var(--denim);
        margin: 0;
      }
      /* Every area title runs straight across the full width on its
         own line; the image and copy sit in a row beneath it,
         vertically centred against each other */
      .lymph-area {
        padding: clamp(30px, 4.5vw, 48px) 0;
        border-top: 1px solid var(--line);
      }
      .lymph-area:first-of-type { border-top: 0; padding-top: 0; }
      .lymph-area h4 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(1.35rem, 2.6vw, 1.65rem); font-weight: 600; line-height: 1.2; margin: 0 0 22px;
      }
      .area-body {
        display: grid; grid-template-columns: 1fr; gap: 22px;
        align-items: center;
      }
      .area-body .lymph-photo { width: 100%; max-width: 300px; justify-self: center; }
      @media (min-width: 860px) {
        .area-body.has-media { grid-template-columns: 300px 1fr; gap: 56px; }
        .area-body .lymph-photo { justify-self: center; }
      }
      .lymph-area .area-copy p { color: var(--ink-soft); margin: 0 0 14px; max-width: 38em; }
      .area-body.has-media .area-copy p { max-width: 34em; }
      .lymph-area .area-copy p:last-child { margin-bottom: 0; }
      .lymph-area .area-copy p strong { color: var(--ink); }
      .lymph-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
      .lymph-steps li {
        display: grid; grid-template-columns: 44px 1fr; gap: 16px;
        padding: 20px 0; border-top: 1px solid var(--line); align-items: start;
      }
      .lymph-steps li:first-child { border-top: 0; padding-top: 4px; }
      .lymph-steps .n {
        width: 36px; height: 36px; border-radius: 50%;
        border: 1.5px solid var(--denim); color: var(--denim);
        display: inline-flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 0.95rem;
      }
      .lymph-steps h5 { margin: 4px 0 4px; font-size: 1.02rem; }
      .lymph-steps p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
      /* What improved flow can help with — the full list from the live page */
      .lymph-benefits {
        background: var(--denim-deep); color: #fff; border-radius: var(--radius);
        padding: clamp(28px, 5vw, 44px);
        margin: clamp(30px, 4.5vw, 48px) 0;
      }
      .lymph-benefits h4 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 600; line-height: 1.2;
        margin: 0 0 10px; color: #fff;
      }
      .lymph-benefits > p { color: #fff; margin: 0 0 22px; max-width: 36em; }
      .lymph-benefits ul {
        list-style: none; margin: 0; padding: 0;
        display: grid; grid-template-columns: 1fr; gap: 0 40px;
      }
      @media (min-width: 760px) { .lymph-benefits ul { grid-template-columns: 1fr 1fr; } }
      .lymph-benefits li {
        padding: 11px 0 11px 22px; position: relative;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        font-size: 0.99rem; color: #fff;
      }
      .lymph-benefits li::before {
        content: ""; position: absolute; left: 2px; top: 20px;
        width: 7px; height: 7px; border-radius: 50%;
        background: #fff;
      }
      .lymph-refs { margin-top: 26px; color: var(--ink-soft); font-size: 0.85rem; max-width: 62em; }
      .lymph-refs strong { color: var(--ink); }
      .lymph-cta {
        margin-top: clamp(44px, 6vw, 64px);
        background: var(--bg); border-radius: var(--radius);
        padding: clamp(28px, 5vw, 44px);
        display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between;
      }
      .lymph-cta p { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: 1.25rem; line-height: 1.4; max-width: 22em; }

      /* Founder — like the opening page: the sunset photo as a full-bleed
         background, the opening copy set over it with the hero's own
         spacing and no boxes behind the text; the rest of the copy
         follows below at the standard section spacing */
      .founder-page { padding: 0; }
      .founder-hero {
        position: relative;
        min-height: 80svh;
        display: flex;
        align-items: flex-end;
        background: #0d2233;
        color: #fff;
        overflow: hidden;
      }
      .founder-hero-bg {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover; object-position: 50% 28%;
      }
      .founder-hero::before {
        content: "";
        position: absolute; inset: 0; z-index: 1;
        background:
          linear-gradient(0deg, rgba(10, 32, 48, 0.84) 0%, rgba(10, 32, 48, 0.38) 48%, rgba(10, 32, 48, 0) 70%),
          linear-gradient(90deg, rgba(10, 32, 48, 0.6) 0%, rgba(10, 32, 48, 0.26) 55%, rgba(10, 32, 48, 0) 82%),
          linear-gradient(180deg, rgba(10, 32, 48, 0.35) 0%, rgba(10, 32, 48, 0) 20%);
        pointer-events: none;
      }
      .founder-hero .wrap { position: relative; z-index: 2; width: 100%; }
      .founder-hero-inner {
        position: relative;
        padding: 120px 0 84px;
        max-width: 720px;
      }
      .founder-eyebrow {
        font-size: 0.82rem; font-weight: 700;
        letter-spacing: 0.2em; text-transform: uppercase;
        color: var(--tint);
        margin: 0 0 22px;
      }
      .founder-hero h2 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(2rem, 4.6vw, 3.1rem);
        line-height: 1.12; font-weight: 600;
        margin: 0 0 20px; letter-spacing: -0.01em;
      }
      .founder-hero-lede {
        font-size: clamp(calc(1.08rem - 2pt), calc(2.1vw - 2pt), calc(1.3rem - 2pt));
        line-height: 1.55;
        color: #eef6fb;
        margin: 0 0 18px; max-width: 36em;
      }
      .founder-hero-lede strong { font-weight: 700; color: #fff; }
      .founder-hero-healthspan {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(calc(1.18rem - 2pt), calc(2.2vw - 2pt), calc(1.38rem - 2pt));
        line-height: 1.45;
        color: #fff;
        margin: 0; max-width: 32em;
      }
      .founder-hero-healthspan em { color: var(--tint); }
      @media (max-width: 760px) {
        .founder-hero { min-height: 78svh; }
        .founder-hero-bg { object-position: 50% 26%; }
        .founder-hero-inner { padding: 110px 0 56px; max-width: none; }
      }
      /* The rest of the founder copy — open section spacing, no boxes.
         Top padding kept tight so the copy follows the hero closely */
      .founder-rest { padding: clamp(32px, 4.5vw, 48px) 0 clamp(36px, 5vw, 56px); }
      .founder-rest-copy { max-width: 42em; }
      .founder-rest-copy p {
        color: var(--ink-soft); font-size: 1.06rem;
        margin: 0 0 20px;
      }
      .founder-rest-copy p:last-child { margin-bottom: 0; }
      .founder-rest-copy p strong { color: var(--ink); font-weight: 600; }
      .founder-rest-copy::after { content: ""; display: table; clear: both; }
      /* Modest personal inset within the founder copy — portrait photo,
         floated into the text on wider screens, centred above the copy
         on narrow screens */
      .founder-inset {
        margin: 0 auto 24px;
        width: 100%;
        max-width: 320px;
      }
      .founder-inset img {
        width: 100%; height: auto;
        border-radius: var(--radius);
      }
      @media (min-width: 760px) {
        .founder-inset {
          float: right;
          width: 300px; max-width: 300px;
          margin: 6px 0 20px 34px;
        }
      }

      /* Toronto / global band */
      .place-band {
        position: relative; color: #fff;
        background: #31435c url("assets/toronto.jpg") center top / cover no-repeat;
        padding: clamp(90px, 13vw, 150px) 0;
      }
      .place-band::before {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(90deg, rgba(13, 34, 51, 0.78) 0%, rgba(13, 34, 51, 0.45) 55%, rgba(13, 34, 51, 0.15) 100%);
      }
      .place-band .wrap { position: relative; }
      .place-band h2 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(calc(2rem - 2pt), calc(5.4vw - 2pt), calc(3.2rem - 2pt));
        font-weight: 600; line-height: 1.14; margin: 0 0 14px; max-width: 14em;
      }
      .place-band p { color: #e3eff7; margin: 0 0 30px; max-width: 34em; font-size: 1.08rem; }
      .place-band p.place-band-welcome {
        font-family: "Source Serif 4", Georgia, serif;
        font-style: italic;
        font-size: clamp(1.18rem, 2.2vw, 1.38rem);
        line-height: 1.45;
        color: #fff;
        margin: 0 0 30px; max-width: 32em;
      }

      /* Patient portal — full-bleed photo section, its type laid
         over the image like the opening hero: heading, lede, the
         portal contents, the muted entry button and the password
         line all set in white over the photograph */
      .portal {
        position: relative;
        padding: 0;
        background: #0d2233;
        color: #fff;
        overflow: hidden;
        /* Fill the screen when navigated to, so the photo runs to
           the bottom of the view instead of ending partway down
           with plain page background beneath it */
        min-height: 92svh;
        display: flex;
        align-items: center;
      }
      .portal-bg {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover; object-position: center 42%;
      }
      .portal::before {
        content: "";
        position: absolute; inset: 0; z-index: 1;
        background:
          linear-gradient(0deg, rgba(10, 32, 48, 0.88) 0%, rgba(10, 32, 48, 0.55) 52%, rgba(10, 32, 48, 0.22) 80%),
          linear-gradient(90deg, rgba(10, 32, 48, 0.72) 0%, rgba(10, 32, 48, 0.38) 58%, rgba(10, 32, 48, 0.08) 88%),
          linear-gradient(180deg, rgba(10, 32, 48, 0.42) 0%, rgba(10, 32, 48, 0) 26%);
        pointer-events: none;
      }
      .portal .wrap { position: relative; z-index: 2; width: 100%; }
      .portal-inner { padding: clamp(84px, 11vw, 124px) 0 clamp(72px, 9vw, 96px); }
      .portal h2 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(2rem, 4.8vw, 3.1rem);
        font-weight: 600; line-height: 1.12; letter-spacing: -0.01em;
        margin: 0 0 16px; color: #fff; max-width: 720px;
      }
      .portal .portal-lede {
        color: #eef6fb; max-width: 36em; margin: 0;
        font-size: clamp(1.08rem, 2.1vw, 1.28rem); line-height: 1.55;
      }
      .portal-items {
        list-style: none; margin: 44px 0 0; padding: 0;
        display: grid; grid-template-columns: 1fr; gap: 0;
        max-width: 920px;
      }
      @media (min-width: 760px) { .portal-items { grid-template-columns: 1fr 1fr; gap: 0 48px; } }
      .portal-items li {
        display: flex; gap: 16px; align-items: flex-start;
        padding: 19px 0; border-top: 1px solid rgba(255, 255, 255, 0.38);
      }
      .portal-items .pi {
        flex: none; width: 42px; height: 42px; border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.75); color: #fff;
        background: rgba(13, 34, 51, 0.32);
        display: inline-flex; align-items: center; justify-content: center;
      }
      .portal-items h3 { margin: 3px 0 3px; font-size: 1.03rem; color: #fff; }
      .portal-items p { margin: 0; color: #d7e8f3; font-size: 0.95rem; }
      .portal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
      @media (max-width: 520px) { .portal-actions .btn { width: 100%; } }
      /* The entry point stays muted while the portal is under
         development — translucent over the photo, not a live button */
      .btn-portal-static {
        background: rgba(227, 239, 247, 0.16); color: #cfe2ee;
        border-color: rgba(255, 255, 255, 0.45); cursor: default;
      }
      .portal .portal-note { color: #d7e8f3; font-size: 0.95rem; margin: 22px 0 0; max-width: 42em; }
      .portal .portal-note strong { color: #fff; font-weight: 600; }
      .portal .portal-note a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
      @media (max-width: 760px) {
        .portal-bg { object-position: center 40%; }
        .portal-inner { padding: 84px 0 64px; }
      }

      /* Presentations & research — full-bleed photo section, type
         laid over the image like the opening hero; interim research
         image until a conference photo replaces it */
      .research {
        position: relative;
        padding: 0;
        background: #0d2233;
        color: #fff;
        overflow: hidden;
        /* Fill the screen when navigated to, like the portal above:
           the photo runs to the bottom of the view, with no plain
           page background showing beneath it. The content is short,
           so it is centred vertically in the panel — the same
           treatment as the portal section directly above — rather
           than pinned to the bottom with empty photo above it */
        min-height: 92svh;
        display: flex;
        align-items: center;
      }
      .research-bg {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover; object-position: center 38%;
      }
      .research::before {
        content: "";
        position: absolute; inset: 0; z-index: 1;
        background:
          linear-gradient(0deg, rgba(10, 32, 48, 0.88) 0%, rgba(10, 32, 48, 0.52) 54%, rgba(10, 32, 48, 0.18) 82%),
          linear-gradient(90deg, rgba(10, 32, 48, 0.72) 0%, rgba(10, 32, 48, 0.36) 58%, rgba(10, 32, 48, 0.06) 88%),
          linear-gradient(180deg, rgba(10, 32, 48, 0.4) 0%, rgba(10, 32, 48, 0) 26%);
        pointer-events: none;
      }
      .research .wrap { position: relative; z-index: 2; width: 100%; }
      .research-inner { padding: clamp(84px, 11vw, 124px) 0 clamp(72px, 9vw, 96px); }
      .research h2 {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: clamp(2rem, 4.8vw, 3.1rem);
        font-weight: 600; line-height: 1.12; letter-spacing: -0.01em;
        margin: 0 0 16px; color: #fff; max-width: 720px;
      }
      .research .research-lede {
        color: #eef6fb; max-width: 36em; margin: 0;
        font-size: clamp(calc(1.08rem - 2pt), calc(2.1vw - 2pt), calc(1.28rem - 2pt)); line-height: 1.55;
      }
      /* Breathing room before this section so the last two full-bleed
         sections (Patient Portal, then this one) do not run into
         each other and can each be reviewed on their own — kept in
         the sections' own deep navy rather than bare page
         background, so no white band shows at the bottom of the
         portal section when it is clicked to. The band sits inside
         this section's top edge: the photo and overlay start below
         it, so it reads as a navy divider, not a gap */
      .research { border-top: clamp(48px, 7vw, 80px) solid #0d2233; }
      /* On its own page there is no section above to divide from */
      .research.standalone { border-top: 0; }
      .research-status {
        display: flex; gap: 16px; align-items: flex-start;
        max-width: 46em;
        margin-top: 34px; padding-top: 26px;
        border-top: 1px solid rgba(255, 255, 255, 0.38);
      }
      .research-status .rs-icon {
        flex: none; width: 42px; height: 42px; border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, 0.75); color: #fff;
        background: rgba(13, 34, 51, 0.32);
        display: inline-flex; align-items: center; justify-content: center;
      }
      .research-status p { margin: 6px 0 0; color: #d7e8f3; font-size: 1rem; }
      .research-status p strong { color: #fff; font-weight: 600; }
      @media (max-width: 760px) {
        .research-bg { object-position: center 36%; }
        .research-inner { padding: 84px 0 64px; }
      }

      /* Becoming a patient */
      .steps { list-style: none; margin: 46px 0 0; padding: 0; display: grid; gap: 36px; grid-template-columns: 1fr; }
      @media (min-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 44px; max-width: 760px; } }
      .steps li { border-top: 2px solid var(--denim); padding-top: 18px; }
      .steps h3 { margin: 0 0 6px; font-size: 1.06rem; }
      .steps p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
      .capacity-note {
        margin: 36px 0 0; max-width: 46em;
        background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 18px 20px;
        color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6;
      }
      .capacity-note strong { color: var(--ink); font-weight: 600; }
      .visit-row {
        margin-top: 54px; padding-top: 30px;
        border-top: 1px solid var(--line);
        display: flex; flex-wrap: wrap; gap: 22px 32px;
        align-items: flex-start; justify-content: space-between;
      }
      .visit-row .btn { align-self: center; }
      @media (max-width: 860px) {
        .visit-row { flex-direction: column; align-items: flex-start; }
        .visit-row .btn { align-self: flex-start; }
      }
      .visit-row .v-item { display: flex; gap: 13px; align-items: flex-start; }
      .visit-row .v-item svg { flex: none; margin-top: 3px; color: var(--denim); }
      .visit-row h3 { margin: 0 0 2px; font-size: 1rem; }
      .visit-row p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

      /* ---------- Footer ---------- */
      footer {
        background: #122a3f; color: #b9d2e2;
        padding: 60px 0 0; scroll-margin-top: 70px;
      }
      @media (prefers-color-scheme: dark) { footer { background: #060f18; } }
      .footer-grid {
        display: grid; grid-template-columns: 1fr; gap: 38px; padding-bottom: 44px;
      }
      @media (min-width: 780px) { .footer-grid { grid-template-columns: 1.25fr 0.9fr; } }
      footer .f-logo { width: 118px; height: auto; margin: 0 auto 18px; }
      /* Keep the footer logo centred over the text beneath it: the
         logo and that paragraph share the same box width, so the
         logo's centre is the text block's centre at any width */
      .footer-grid > div:first-child { max-width: 24em; }
      /* Centre the blurb under the centred logo, so the two share
         one centre line — left-aligned ragged text under a centred
         logo reads as off-centre even when the boxes align */
      .footer-grid > div:first-child p { max-width: 24em; text-align: center; }
      footer p { margin: 0 0 10px; font-size: 0.95rem; max-width: 30em; }
      footer h3 {
        color: #fff; font-size: 0.88rem;
        letter-spacing: 0.08em; text-transform: uppercase;
        margin: 4px 0 14px;
      }
      footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
      footer ul a {
        color: #b9d2e2; text-decoration: none;
        display: inline-block; padding: 5px 0; font-size: 0.97rem;
      }
      footer ul a:hover { color: #fff; text-decoration: underline; }
      footer .f-phone { color: #fff; font-weight: 600; }
      footer .f-phone:hover { text-decoration: underline; }
      footer .f-social { margin-top: 18px; gap: 8px; }
      footer .f-social a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: #fff; }
      footer .f-social svg { flex: none; }
      .footer-legal {
        border-top: 1px solid rgba(255,255,255,0.16);
        padding: 22px 0 30px; font-size: 0.86rem;
      }
      .footer-legal p { margin: 0 0 8px; max-width: 62em; }
      .footer-legal .copy { color: #fff; font-weight: 600; }