/* ==========================================================================
   Global link reset — MUST stay at the top of this file.
   Hello theme applies text-decoration: underline to every <a> tag site-wide.
   This page's design was built assuming no underline by default, with
   underlines added back only in specific, intentional places (see the
   ".hero-authority a" rule further down, which is the one exception).
   !important is used because Hello theme's own rule can otherwise load
   after this stylesheet and win the cascade despite matching specificity.
   ========================================================================== */
a {
  text-decoration: none !important;
}

/* Hello theme also has a more specific rule targeting these two selectors:
     .comments-area a, .page-content a { text-decoration: underline; }
   Overriding it directly here in case it's winning due to caching or
   selector specificity beating the general reset above. */
.comments-area a,
.page-content a {
  text-decoration: none !important;
}

/* Safety net: prevents any single element (inline JS-calculated widths,
   oversized images, etc.) from ever widening the whole page and causing
   horizontal drag/scroll on mobile. Does not affect desktop layout. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ===== Base styles ===== */
:root {
      --green-950: #063b2e;
      --green-900: #084d3b;
      --green-800: #0b5d47;
      --green-700: #117357;
      --green-600: #178766;
      --green-500: #21a278;
      --green-300: #87d7b8;
      --green-200: #bdebd8;
      --green-100: #e5f7ef;
      --green-050: #f3fbf7;
      --cream: #fbfaf5;
      --yellow: #f2cb67;
      --ink: #12251f;
      --muted: #5c6f68;
      --line: #d8e7df;
      --white: #ffffff;
      --shadow-sm: 0 8px 28px rgba(7, 58, 44, 0.08);
      --shadow-md: 0 22px 60px rgba(7, 58, 44, 0.14);
      --radius-sm: 14px;
      --radius-md: 22px;
      --radius-lg: 34px;
      --container: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--white);
      font-family: Aptos, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.65;
      text-rendering: optimizeLegibility;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; }
    button, input, select, textarea { font: inherit; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; }
    h1 { font-size: clamp(2.55rem, 5.8vw, 5rem); }
    h2 { font-size: clamp(2rem, 4vw, 3.35rem); }
    h3 { font-size: 1.18rem; }
    p { color: var(--muted); }

    .container {
      width: min(calc(100% - 40px), var(--container));
      margin-inline: auto;
    }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 9999;
      transform: translateY(-160%);
      background: var(--white);
      color: var(--green-950);
      padding: 10px 14px;
      border-radius: 8px;
      font-weight: 800;
      box-shadow: var(--shadow-sm);
    }
    .skip-link:focus { transform: translateY(0); }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--green-700);
      font-size: 0.78rem;
      font-weight: 850;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .eyebrow::before {
      content: "";
      width: 28px;
      height: 2px;
      background: currentColor;
      border-radius: 99px;
    }

    .section { padding: 96px 0; }
    .section-soft { background: var(--green-050); }
    .section-cream { background: var(--cream); }
    .section-dark { background: var(--green-950); color: var(--white); }
    .section-dark p { color: rgba(255,255,255,.76); }
    .section-head {
      max-width: 780px;
      margin-bottom: 42px;
    }
    .section-head.center {
      text-align: center;
      margin-inline: auto;
    }
    .section-head.center .eyebrow { justify-content: center; }
    .section-head p { font-size: 1.08rem; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 50px;
      padding: 12px 20px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { background: var(--green-800); color: var(--white); }
    .btn-primary:hover { background: var(--green-950); }
    .btn-light { background: var(--white); color: var(--green-950); }
    .btn-outline { border-color: var(--green-300); color: var(--green-900); background: transparent; }
    .btn-outline:hover { background: var(--green-100); }
    .btn-arrow::after { content: "→"; font-size: 1.08em; }

    /* Top strip + navigation */
    .topbar {
      background: var(--green-950);
      color: rgba(255,255,255,.84);
      font-size: .84rem;
    }
    .topbar-inner {
      min-height: 38px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }
    .topbar a { color: var(--white); font-weight: 750; text-decoration: none; }
    .topbar-links { display: flex; gap: 20px; align-items: center; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(216,231,223,.8);
    }
    .nav-wrap {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      min-width: max-content;
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 50% 50% 50% 15%;
      background: linear-gradient(145deg, var(--green-500), var(--green-900));
      transform: rotate(-18deg);
      position: relative;
      box-shadow: inset 0 0 0 5px rgba(255,255,255,.16);
    }
    .brand-mark::after {
      content: "";
      position: absolute;
      width: 16px;
      height: 5px;
      background: rgba(255,255,255,.8);
      border-radius: 99px;
      right: 8px;
      top: 17px;
      transform: rotate(22deg);
    }
    .brand-text strong { display: block; color: var(--green-950); font-size: 1.25rem; line-height: 1; }
    .brand-text small { color: var(--muted); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }

    .main-nav { display: flex; align-items: center; gap: 26px; }
    .main-nav a {
      color: var(--ink);
      text-decoration: none;
      font-weight: 750;
      font-size: .93rem;
    }
    .main-nav a:hover { color: var(--green-700); }
    .nav-toggle {
      display: none;
      border: 0;
      background: var(--green-100);
      width: 44px;
      height: 44px;
      border-radius: 12px;
      color: var(--green-950);
      font-size: 1.4rem;
    }

    /* Hero */
    .hero {
      position: relative;
      overflow: hidden;
      min-height: 760px;
      background:
        radial-gradient(circle at 84% 22%, rgba(135,215,184,.36), transparent 25%),
        radial-gradient(circle at 64% 85%, rgba(242,203,103,.18), transparent 23%),
        linear-gradient(122deg, var(--green-050) 0%, var(--white) 58%, #e6f7ef 100%);
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: auto -120px -220px auto;
      width: 580px;
      height: 580px;
      border: 1px solid rgba(17,115,87,.14);
      border-radius: 50%;
      box-shadow: 0 0 0 75px rgba(17,115,87,.035), 0 0 0 150px rgba(17,115,87,.025);
    }
    .hero-grid {
      min-height: 680px;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 62px;
      align-items: center;
      padding: 72px 0 60px;
    }
    .hero-copy { position: relative; z-index: 2; }
    .hero-copy h1 { color: var(--green-950); max-width: 820px; margin-bottom: 22px; }
    .hero-copy h1 span { color: var(--green-600); }
    .hero-copy > p { font-size: clamp(1.05rem, 2vw, 1.24rem); max-width: 720px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 18px 28px;
      margin-top: 32px;
      color: var(--green-950);
      font-size: .9rem;
      font-weight: 760;
    }
    .hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
    .hero-trust span::before {
      content: "✓";
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--green-100);
      color: var(--green-700);
      font-size: .72rem;
      font-weight: 900;
    }

    .hero-visual {
      position: relative;
      min-height: 560px;
      display: grid;
      place-items: center;
    }
    .portrait-card {
      position: relative;
      width: min(100%, 470px);
      min-height: 520px;
      border-radius: 48% 48% 28px 28px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.6)),
        linear-gradient(145deg, var(--green-200), var(--green-050));
      border: 10px solid rgba(255,255,255,.8);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      display: grid;
      place-items: end center;
    }
    .portrait-card::before {
      content: "";
      position: absolute;
      inset: 14% auto auto 50%;
      transform: translateX(-50%);
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: rgba(11,93,71,.16);
    }
    .doctor-silhouette {
      position: relative;
      width: 78%;
      height: 78%;
      opacity: .88;
    }
    .doctor-silhouette .head {
      position: absolute;
      width: 100px;
      height: 118px;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 48% 48% 44% 44%;
      background: var(--green-800);
    }
    .doctor-silhouette .body {
      position: absolute;
      width: 310px;
      height: 350px;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 48% 48% 16px 16px;
      background: linear-gradient(145deg, var(--green-700), var(--green-950));
    }
    .doctor-silhouette .coat {
      position: absolute;
      width: 250px;
      height: 300px;
      left: 50%;
      bottom: -30px;
      transform: translateX(-50%);
      background: var(--white);
      clip-path: polygon(0 0, 43% 16%, 50% 100%, 57% 16%, 100% 0, 88% 100%, 12% 100%);
      opacity: .96;
    }
    .portrait-label {
      position: absolute;
      bottom: 18px;
      left: 18px;
      right: 18px;
      z-index: 4;
      padding: 14px 16px;
      background: rgba(6,59,46,.9);
      color: var(--white);
      border-radius: 16px;
      backdrop-filter: blur(10px);
    }
    .portrait-label strong { display: block; }
    .portrait-label small { color: rgba(255,255,255,.76); }

    .floating-note {
      position: absolute;
      z-index: 5;
      padding: 16px 18px;
      border-radius: 16px;
      background: var(--white);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--line);
      font-size: .84rem;
      color: var(--muted);
      max-width: 220px;
    }
    .floating-note strong { display: block; color: var(--green-950); font-size: 1.1rem; }
    .note-one { top: 65px; left: -28px; }
    .note-two { bottom: 80px; right: -28px; }


    .hero-lead {
      color: var(--ink);
      font-size: clamp(1.12rem, 2vw, 1.32rem) !important;
      line-height: 1.55;
      max-width: 740px;
      margin-bottom: 14px;
    }
    .hero-authority {
      max-width: 720px;
      color: var(--muted);
      font-size: 1rem !important;
      margin-bottom: 0;
    }
    .hero-authority a {
      color: var(--green-800);
      font-weight: 850;
      text-decoration: underline !important;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    .care-orbit {
      position: relative;
      width: min(100%, 520px);
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 40% 32%, rgba(255,255,255,.94), rgba(229,247,239,.9) 38%, rgba(135,215,184,.56) 72%, rgba(17,115,87,.22));
      border: 1px solid rgba(17,115,87,.16);
      box-shadow: var(--shadow-md), inset 0 0 0 18px rgba(255,255,255,.42);
    }
    .care-orbit::before,
    .care-orbit::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(17,115,87,.16);
      pointer-events: none;
    }
    .care-orbit::before { inset: 48px; }
    .care-orbit::after { inset: 92px; border-style: dashed; }
    .liver-core {
      width: 58%;
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 24px 30px rgba(6,59,46,.22));
    }
    .liver-core svg { width: 100%; height: auto; }
    .care-label {
      position: absolute;
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 9px;
      max-width: 205px;
      padding: 11px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(216,231,223,.92);
      box-shadow: var(--shadow-sm);
      color: var(--green-950);
      font-size: .78rem;
      font-weight: 820;
      line-height: 1.25;
    }
    .care-label::before {
      content: "";
      width: 9px;
      height: 9px;
      flex: 0 0 9px;
      border-radius: 50%;
      background: var(--green-500);
      box-shadow: 0 0 0 5px var(--green-100);
    }
    .care-label-one { top: 12%; left: -6%; }
    .care-label-two { top: 22%; right: -9%; }
    .care-label-three { bottom: 28%; left: -10%; }
    .care-label-four { bottom: 13%; right: -6%; }
    .authority-card {
      position: absolute;
      z-index: 5;
      left: 50%;
      bottom: -35px;
      transform: translateX(-50%);
      width: min(86%, 410px);
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 14px;
      align-items: center;
      padding: 15px 17px;
      border-radius: 18px;
      background: rgba(6,59,46,.95);
      color: var(--white);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(12px);
    }
    .authority-monogram {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--green-200);
      color: var(--green-950);
      font-weight: 900;
      letter-spacing: -.04em;
    }
    .authority-card strong { display: block; font-size: .96rem; }
    .authority-card span { display: block; color: rgba(255,255,255,.72); font-size: .76rem; line-height: 1.4; }

    .quick-paths {
      position: relative;
      z-index: 10;
      margin-top: -55px;
    }
    .quick-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: var(--white);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      border: 1px solid rgba(216,231,223,.75);
    }
    .quick-item {
      padding: 25px 24px;
      text-decoration: none;
      border-right: 1px solid var(--line);
      transition: background .2s ease;
    }
    .quick-item:last-child { border-right: 0; }
    .quick-item:hover { background: var(--green-050); }
    .quick-item small { display: block; color: var(--green-700); font-weight: 820; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
    .quick-item strong { color: var(--green-950); }

    /* Generic cards */
    .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
    .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }

    .card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 26px;
      box-shadow: var(--shadow-sm);
    }
    .card p:last-child { margin-bottom: 0; }

    .icon-box {
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      background: var(--green-100);
      color: var(--green-800);
      margin-bottom: 18px;
    }
    .icon-box svg { width: 27px; height: 27px; stroke: currentColor; fill: none; stroke-width: 1.8; }

    .text-link {
      color: var(--green-700);
      text-decoration: none;
      font-weight: 820;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .text-link::after { content: "→"; transition: transform .2s ease; }
    .text-link:hover::after { transform: translateX(4px); }

    /* Meet profile */
    .profile-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 70px;
      align-items: center;
    }
    .profile-image {
      min-height: 520px;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(180deg, transparent 54%, rgba(6,59,46,.86)),
        linear-gradient(145deg, var(--green-200), var(--green-700));
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
    .profile-image::before {
      content: "Approved Prof. Perera portrait";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(255,255,255,.78);
      font-weight: 800;
      letter-spacing: .02em;
    }
    .profile-image-caption {
      position: absolute;
      left: 26px;
      right: 26px;
      bottom: 24px;
      z-index: 2;
      color: var(--white);
    }
    .profile-image-caption strong { font-size: 1.15rem; display: block; }
    .profile-image-caption small { color: rgba(255,255,255,.78); }

    .credentials {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 15px;
      margin: 30px 0;
    }
    .credential {
      padding: 18px;
      background: var(--green-050);
      border: 1px solid var(--green-200);
      border-radius: 16px;
    }
    .credential strong { display: block; color: var(--green-950); font-size: 1.55rem; line-height: 1.1; margin-bottom: 6px; }
    .credential span { color: var(--muted); font-size: .88rem; }

    /* Expertise */
    .expertise-card {
      min-height: 250px;
      display: flex;
      flex-direction: column;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      text-decoration: none;
    }
    .expertise-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--green-300); }
    .expertise-card p { flex: 1; }

    /* Conditions */
    .condition-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 14px; }
    .condition-pill {
      min-height: 132px;
      padding: 18px 14px;
      border-radius: 18px;
      background: var(--white);
      border: 1px solid var(--line);
      text-decoration: none;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 13px;
      font-weight: 820;
      color: var(--green-950);
      transition: transform .2s ease, background .2s ease;
    }
    .condition-pill:hover { transform: translateY(-4px); background: var(--green-100); }
    .condition-dot {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--green-100);
      display: grid;
      place-items: center;
      color: var(--green-700);
      font-weight: 900;
    }

    /* Early detection */
    .detection-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }
    .detection-art {
      min-height: 470px;
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.36), transparent 18%),
        linear-gradient(145deg, var(--green-900), var(--green-500));
      position: relative;
      overflow: hidden;
      display: grid;
      place-items: center;
      color: var(--white);
    }
    .detection-art svg { width: 68%; max-width: 320px; opacity: .92; }
    .point-list { display: grid; gap: 17px; margin: 28px 0; }
    .point {
      display: grid;
      grid-template-columns: 50px 1fr;
      gap: 14px;
      align-items: start;
      padding: 18px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 16px;
    }
    .point-number {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--green-100);
      color: var(--green-800);
      display: grid;
      place-items: center;
      font-weight: 900;
    }
    .point h3 { margin-bottom: 6px; }
    .point p { margin-bottom: 0; font-size: .92rem; }

    /* Hospital */
    .hospital-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 60px;
      align-items: center;
    }
    .trust-list { display: grid; gap: 15px; margin-top: 28px; }
    .trust-row {
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 13px;
      align-items: start;
    }
    .trust-check {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--green-100);
      color: var(--green-800);
      font-weight: 900;
    }
    .trust-row h3 { margin-bottom: 5px; }
    .trust-row p { margin-bottom: 0; }
    .facility-image {
      min-height: 500px;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(180deg, transparent 54%, rgba(6,59,46,.86)),
        linear-gradient(135deg, #c9eadc, #3c9476);
      position: relative;
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }
    .facility-image::before {
      content: "Approved Kings Hospital facility image";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: rgba(255,255,255,.82);
      font-weight: 820;
    }
    .facility-tag {
      position: absolute;
      left: 22px;
      bottom: 22px;
      background: rgba(255,255,255,.94);
      color: var(--green-950);
      padding: 12px 15px;
      border-radius: 14px;
      font-weight: 820;
      z-index: 2;
    }

    /* Research */
    .research-panel {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 38px;
      align-items: stretch;
      background: var(--green-950);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
    .research-copy { padding: clamp(34px, 6vw, 70px); }
    .research-copy .eyebrow { color: var(--green-300); }
    .research-copy h2 { color: var(--white); }
    .research-copy p { color: rgba(255,255,255,.76); font-size: 1.05rem; }
    .research-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin: 28px 0;
    }
    .research-metric {
      padding: 13px 16px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
    }
    .research-metric strong { color: var(--white); display: block; font-size: 1.25rem; }
    .research-metric small { color: rgba(255,255,255,.65); }
    .research-art {
      min-height: 500px;
      background:
        radial-gradient(circle at 40% 35%, rgba(255,255,255,.16), transparent 18%),
        linear-gradient(135deg, var(--green-700), var(--green-500));
      display: grid;
      place-items: center;
      padding: 40px;
    }
    .perfusion-device {
      width: min(100%, 340px);
      aspect-ratio: 1;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.55);
      display: grid;
      place-items: center;
      position: relative;
      box-shadow: 0 0 0 38px rgba(255,255,255,.07), 0 0 0 76px rgba(255,255,255,.04);
    }
    .perfusion-device::before, .perfusion-device::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px dashed rgba(255,255,255,.52);
    }
    .perfusion-device::before { inset: 44px; }
    .perfusion-device::after { inset: 88px; }
    .perfusion-device svg { width: 50%; color: var(--white); }

    /* Journey */
    .journey {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 0;
      position: relative;
    }
    .journey::before {
      content: "";
      position: absolute;
      top: 31px;
      left: 8%;
      right: 8%;
      height: 2px;
      background: var(--green-200);
      z-index: 0;
    }
    .journey-step { position: relative; z-index: 1; padding: 0 10px; text-align: center; }
    .journey-number {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin: 0 auto 16px;
      display: grid;
      place-items: center;
      background: var(--green-800);
      color: var(--white);
      font-weight: 900;
      border: 7px solid var(--white);
      box-shadow: 0 0 0 1px var(--green-200);
    }
    .journey-step h3 { font-size: 1rem; margin-bottom: 7px; }
    .journey-step p { font-size: .84rem; }

    /* Stories and articles */
    .story-card { overflow: hidden; padding: 0; }
    .story-top {
      min-height: 170px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, var(--green-100), var(--green-300));
      color: var(--green-900);
      font-weight: 850;
      padding: 30px;
      text-align: center;
    }
    .story-body { padding: 24px; }
    .story-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .tag {
      display: inline-flex;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--green-100);
      color: var(--green-800);
      font-size: .72rem;
      font-weight: 830;
    }
    .disclaimer { font-size: .78rem; color: var(--muted); margin-top: 22px; }

    .article-card { overflow: hidden; padding: 0; }
    .article-image {
      min-height: 190px;
      background: linear-gradient(135deg, var(--green-100), var(--green-500));
      display: grid;
      place-items: center;
      color: var(--green-950);
      font-weight: 850;
      text-align: center;
      padding: 25px;
    }
    .article-body { padding: 24px; }
    .article-date { color: var(--green-700); font-size: .78rem; font-weight: 820; text-transform: uppercase; letter-spacing: .08em; }

    /* Media */
    .logo-strip {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--white);
      margin-bottom: 28px;
    }
    .logo-placeholder {
      min-height: 108px;
      display: grid;
      place-items: center;
      padding: 15px;
      border-right: 1px solid var(--line);
      color: #789087;
      font-weight: 850;
      text-align: center;
      filter: grayscale(1);
    }
    .logo-placeholder:last-child { border-right: 0; }

    /* International */
    .international-card {
      position: relative;
      border-radius: var(--radius-lg);
      padding: clamp(35px, 6vw, 76px);
      background:
        radial-gradient(circle at 88% 18%, rgba(135,215,184,.28), transparent 24%),
        linear-gradient(125deg, var(--green-950), var(--green-800));
      color: var(--white);
      overflow: hidden;
    }
    .international-card h2 { color: var(--white); max-width: 700px; }
    .international-card p { color: rgba(255,255,255,.76); max-width: 750px; font-size: 1.08rem; }
    .international-card::after {
      content: "✈";
      position: absolute;
      right: 8%;
      bottom: 2%;
      font-size: clamp(5rem, 14vw, 11rem);
      opacity: .08;
      transform: rotate(-12deg);
    }

    /* FAQ */
    .faq-list { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
    details {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 0 20px;
    }
    summary {
      cursor: pointer;
      list-style: none;
      padding: 18px 36px 18px 0;
      font-weight: 830;
      color: var(--green-950);
      position: relative;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; position: absolute; right: 0; top: 15px; font-size: 1.45rem; color: var(--green-700); }
    details[open] summary::after { content: "–"; }
    details p { padding-right: 28px; }

    /* CTA */
    .appointment {
      background: var(--cream);
      padding: 86px 0;
    }
    .appointment-panel {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 45px;
      align-items: center;
      padding: clamp(30px, 5vw, 60px);
      border-radius: var(--radius-lg);
      background: var(--white);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
    }
    .contact-options { display: grid; gap: 12px; }
    .contact-option {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 13px;
      align-items: center;
      padding: 15px;
      background: var(--green-050);
      border: 1px solid var(--green-200);
      border-radius: 16px;
      text-decoration: none;
    }
    .contact-option .icon-box { margin: 0; width: 46px; height: 46px; }
    .contact-option strong { display: block; color: var(--green-950); }
    .contact-option small { color: var(--muted); }

    /* Footer */
    footer { background: var(--green-950); color: var(--white); padding: 68px 0 26px; }
    .footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 40px; }
    .footer-brand p { color: rgba(255,255,255,.68); max-width: 350px; }
    footer h3 { color: var(--white); font-size: 1rem; }
    footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
    footer a { color: rgba(255,255,255,.72); text-decoration: none; }
    footer a:hover { color: var(--white); }
    .footer-bottom {
      margin-top: 44px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.12);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      color: rgba(255,255,255,.56);
      font-size: .8rem;
    }

    .mobile-cta {
      display: none;
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 1200;
      grid-template-columns: 1fr 1.2fr;
      gap: 8px;
      padding: 8px;
      background: rgba(255,255,255,.96);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(12px);
    }

    @media (max-width: 1100px) {
      .main-nav { gap: 16px; }
      .main-nav a { font-size: .86rem; }
      .condition-grid { grid-template-columns: repeat(4, 1fr); }
      .logo-strip { grid-template-columns: repeat(3, 1fr); }
      .logo-placeholder:nth-child(3) { border-right: 0; }
      .logo-placeholder:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
    }

    @media (max-width: 900px) {
      .topbar-links span { display: none; }
      .nav-toggle { display: grid; place-items: center; }
      .main-nav {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 86px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 18px;
        box-shadow: var(--shadow-md);
      }
      .main-nav.open { display: flex; }
      .main-nav .btn { width: 100%; }
      .hero-grid,
      .profile-grid,
      .detection-wrap,
      .hospital-grid,
      .research-panel,
      .appointment-panel { grid-template-columns: 1fr; }
      .hero-grid { padding-top: 54px; }
      .hero-visual { min-height: 580px; overflow: visible; }
      .care-orbit { margin-top: 18px; }
      .quick-grid { grid-template-columns: repeat(2, 1fr); }
      .quick-item:nth-child(2) { border-right: 0; }
      .quick-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .grid-3 { grid-template-columns: repeat(2, 1fr); }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .journey { grid-template-columns: repeat(3, 1fr); gap: 30px 0; }
      .journey::before { display: none; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 640px) {
      body { padding-bottom: 82px; }
      .container { width: min(calc(100% - 28px), var(--container)); }
      .section { padding: 70px 0; }
      .topbar-inner { justify-content: center; text-align: center; min-height: 44px; }
      .topbar-links { display: none; }
      .brand-text small { display: none; }
      .site-header .btn-primary { display: none; }
      .hero { min-height: auto; }
      .hero-grid { gap: 32px; }
      .hero-copy h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
      .hero-actions .btn { width: 100%; }
      .hero-trust { display: grid; gap: 10px; }
      .hero-visual { min-height: 500px; }
      .care-orbit { width: min(92vw, 440px); }
      .care-label { max-width: 155px; padding: 9px 11px; font-size: .68rem; }
      .care-label-one { left: -1%; top: 8%; }
      .care-label-two { right: -1%; top: 20%; }
      .care-label-three { left: -2%; bottom: 28%; }
      .care-label-four { right: -1%; bottom: 14%; }
      .authority-card { width: 94%; bottom: -44px; }
      .portrait-card { min-height: 420px; border-radius: 42% 42% 24px 24px; }
      .floating-note { max-width: 165px; padding: 12px; }
      .note-one { left: -3px; top: 40px; }
      .note-two { right: -3px; bottom: 55px; }
      .quick-paths { margin-top: -20px; }
      .quick-grid,
      .grid-2,
      .grid-3,
      .grid-4,
      .condition-grid,
      .credentials,
      .journey,
      .footer-grid { grid-template-columns: 1fr; }
      .quick-item { border-right: 0; border-bottom: 1px solid var(--line); }
      .quick-item:last-child { border-bottom: 0; }
      .profile-image, .facility-image, .detection-art { min-height: 390px; }
      .research-art { min-height: 390px; }
      .journey-step { display: grid; grid-template-columns: 64px 1fr; gap: 14px; text-align: left; align-items: start; }
      .journey-number { margin: 0; }
      .logo-strip { grid-template-columns: repeat(2, 1fr); }
      .logo-placeholder { border-bottom: 1px solid var(--line); }
      .logo-placeholder:nth-child(odd) { border-right: 1px solid var(--line); }
      .logo-placeholder:nth-child(even) { border-right: 0; }
      .footer-bottom { flex-direction: column; }
      .mobile-cta { display: grid; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }

/* ===== Vibrant palette override (v3) ===== */
:root {
      --green-950:#063b25;
      --green-900:#075e32;
      --green-800:#087f3f;
      --green-700:#0aa34a;
      --green-600:#19b759;
      --green-500:#32cb6b;
      --green-300:#98df8b;
      --green-200:#c9edbd;
      --green-100:#eaf8e4;
      --green-050:#f6fcf2;
      --pink:#ef2468;
      --pink-soft:#fff0f5;
      --lime:#a8df5d;
      --cream:#fffdf8;
      --ink:#0a1110;
      --muted:#4c5c55;
      --line:#ddebd8;
      --shadow-sm:0 10px 34px rgba(6,87,45,.09);
      --shadow-md:0 28px 70px rgba(6,87,45,.16);
      --radius-md:24px;
      --radius-lg:38px;
      --container:1320px;
    }

    body {
      background:var(--cream);
      color:var(--ink);
      font-family:Inter, Aptos, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    h1,h2,h3 { color:var(--ink); font-weight:900; letter-spacing:-.045em; }
    h2 { font-size:clamp(2.35rem,4.3vw,4.15rem); }
    p { color:var(--muted); }
    .topbar { display:none; }
    .container { width:min(calc(100% - 54px),var(--container)); }

    .site-header {
      position:sticky;
      top:0;
      background:rgba(255,253,248,.92);
      border-bottom:0;
      box-shadow:0 1px 0 rgba(6,59,37,.08);
    }
    .nav-wrap { min-height:92px; }
    .brand { gap:10px; }
    .brand-mark {
      width:58px;
      height:48px;
      border-radius:0;
      transform:none;
      background:none;
      box-shadow:none;
      display:grid;
      place-items:center;
      overflow:visible;
    }
    .brand-mark::after { content:none; }
    .brand-mark svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 5px 7px rgba(6,87,45,.14)); }
    .brand-text strong { font-size:1.65rem; letter-spacing:-.055em; color:#080d0b; }
    .brand-text strong::first-letter { color:inherit; }
    .brand-text small { display:none; }
    .main-nav { gap:29px; }
    .main-nav a { position:relative; font-size:.95rem; font-weight:760; }
    .main-nav a:not(.btn)::after {
      content:"";
      position:absolute;
      left:0;
      right:100%;
      bottom:-12px;
      height:3px;
      border-radius:99px;
      background:var(--green-700);
      transition:right .2s ease;
    }
    .main-nav a:hover::after,.main-nav a.active::after { right:0; }
    .main-nav .nav-book {
      min-height:48px;
      padding-inline:22px;
      border-radius:14px;
      background:var(--green-800);
    }

    .btn {
      min-height:54px;
      border-radius:14px;
      padding:13px 22px;
      font-weight:850;
      box-shadow:none;
    }
    .btn-primary { background:var(--green-800); }
    .btn-primary:hover { background:var(--green-950); }
    .btn-outline { border:2px solid var(--green-700); color:var(--green-900); background:rgba(255,255,255,.76); }
    .btn-outline:hover { background:var(--green-100); }

    .hero {
      min-height:770px;
      overflow:hidden;
      background:
        radial-gradient(circle at 78% 25%,rgba(171,225,102,.20),transparent 27%),
        radial-gradient(circle at 98% 60%,rgba(30,183,87,.13),transparent 25%),
        linear-gradient(115deg,#fffdf8 0%,#fffdf8 52%,#f5faef 100%);
    }
    .hero::before { display:none; }
    .hero-grid {
      min-height:720px;
      grid-template-columns:minmax(0,1.02fr) minmax(520px,.98fr);
      gap:40px;
      padding:44px 0 65px;
    }
    .hero-copy { padding-top:16px; }
    .hero-eyebrow {
      margin-bottom:24px;
      padding:9px 14px;
      border-radius:999px;
      background:var(--green-100);
      color:var(--green-900);
      font-size:.72rem;
      letter-spacing:.09em;
    }
    .hero-eyebrow::before { width:9px; height:9px; border-radius:50%; }
    .hero-copy h1 {
      margin:0 0 22px;
      max-width:710px;
      font-size:clamp(3.35rem,5.75vw,6.25rem);
      line-height:.94;
      letter-spacing:-.073em;
    }
    .hero-copy h1 span { display:block; }
    .hero-copy h1 .headline-dark { color:#080d0b; }
    .hero-copy h1 .headline-green {
      color:var(--green-700);
      margin:.04em 0;
      text-shadow:0 3px 0 rgba(8,127,63,.04);
    }
    .hero-lead {
      max-width:690px;
      font-size:clamp(1.05rem,1.55vw,1.28rem)!important;
      line-height:1.5;
      color:#26332d;
      margin-bottom:9px;
    }
    .hero-authority {
      max-width:700px;
      font-size:.98rem!important;
      line-height:1.55;
      color:#66736d;
    }
    .hero-authority a { color:var(--green-800); text-decoration:none; }
    .hero-actions { margin-top:25px; gap:14px; }
    .hero-trust {
      margin-top:27px;
      gap:0;
      color:#24342d;
      font-size:.83rem;
    }
    .hero-trust span {
      min-height:50px;
      padding:0 22px;
      border-right:1px solid #e7e2d7;
    }
    .hero-trust span:first-child { padding-left:0; }
    .hero-trust span:last-child { border-right:0; }
    .hero-trust span::before {
      width:38px;
      height:38px;
      background:var(--green-100);
      color:var(--green-800);
      font-size:1rem;
      box-shadow:inset 0 0 0 1px rgba(7,127,63,.08);
    }
    .hero-trust .trust-cancer::before { background:var(--pink-soft); color:var(--pink); }

    .hero-visual { min-height:620px; overflow:visible; }
    .brand-stage {
      position:relative;
      width:min(100%,650px);
      aspect-ratio:1.06;
      display:grid;
      place-items:center;
      isolation:isolate;
    }
    .brand-stage::after {
      content:"";
      position:absolute;
      z-index:-1;
      left:8%; right:4%; bottom:2%;
      height:19%;
      border-radius:50%;
      background:radial-gradient(ellipse,rgba(8,99,50,.18),rgba(8,99,50,0) 68%);
      filter:blur(5px);
    }
    .stage-circle {
      position:absolute;
      z-index:-3;
      border-radius:50%;
    }
    .stage-circle-one {
      width:76%; aspect-ratio:1;
      left:9%; top:4%;
      background:linear-gradient(145deg,#f2f8df,#dff2bb);
    }
    .stage-circle-two {
      width:46%; aspect-ratio:1;
      right:-5%; top:6%;
      background:linear-gradient(145deg,#5bc96e,#198f47);
      opacity:.9;
    }
    .stage-dot-grid {
      position:absolute;
      right:-1%; top:31%;
      width:105px; height:72px;
      background-image:radial-gradient(#d8efad 2.5px,transparent 2.5px);
      background-size:17px 17px;
      opacity:.95;
    }
    .stage-spark { position:absolute; font-weight:900; }
    .stage-spark-one { color:#54bd75; top:9%; left:18%; font-size:1.8rem; }
    .stage-spark-two { color:var(--pink); top:20%; left:10%; font-size:.9rem; }
    .hero-brand-symbol {
      width:88%;
      transform:translate(1%,1%);
      animation:brandFloat 5.8s ease-in-out infinite;
    }
    .hero-brand-symbol svg { width:100%; display:block; overflow:visible; }
    @keyframes brandFloat { 0%,100%{transform:translate(1%,1%)} 50%{transform:translate(1%,-1.2%)} }
    .stage-leaf {
      position:absolute;
      width:46px; height:22px;
      border-radius:100% 0 100% 0;
      background:linear-gradient(135deg,#8ce16d,#2aae59);
      box-shadow:0 7px 13px rgba(8,99,50,.13);
    }
    .leaf-one { left:4%; bottom:27%; transform:rotate(27deg); }
    .leaf-two { left:11%; bottom:21%; transform:rotate(8deg) scale(.75); }
    .leaf-three { right:0; bottom:24%; transform:rotate(-36deg) scale(.92); }

    .authority-card-light {
      left:auto;
      right:-1%;
      bottom:5%;
      transform:none;
      width:min(73%,430px);
      grid-template-columns:58px 1fr;
      background:rgba(255,255,255,.94);
      color:var(--ink);
      border:1px solid rgba(6,99,50,.09);
      box-shadow:0 16px 42px rgba(6,77,39,.14);
    }
    .authority-card-light .authority-monogram {
      width:58px; height:58px;
      background:linear-gradient(145deg,#d9f1c6,#9cdd78);
      color:var(--green-950);
    }
    .authority-card-light .authority-kicker {
      color:#4f5d57;
      font-size:.72rem;
      margin-bottom:1px;
    }
    .authority-card-light strong { color:var(--green-800); font-size:1rem; }
    .authority-card-light span { color:#56645e; font-size:.72rem; }

    .quick-paths { margin-top:-36px; }
    .quick-grid {
      gap:14px;
      background:transparent;
      border:0;
      box-shadow:none;
      overflow:visible;
    }
    .quick-item {
      min-height:126px;
      padding:23px;
      border:1px solid rgba(6,99,50,.08)!important;
      border-radius:22px;
      background:linear-gradient(145deg,#f4fbef,#eaf7df);
      box-shadow:var(--shadow-sm);
      position:relative;
      overflow:hidden;
    }
    .quick-item:nth-child(2),.quick-item:nth-child(4) { background:linear-gradient(145deg,#fffafb,#fff0f5); }
    .quick-item::after {
      content:"→";
      position:absolute;
      right:20px; bottom:18px;
      width:28px; height:28px;
      display:grid; place-items:center;
      border-radius:50%;
      background:var(--green-800);
      color:#fff;
    }
    .quick-item:nth-child(2)::after,.quick-item:nth-child(4)::after { background:var(--pink); }
    .quick-item small { color:var(--green-700); }
    .quick-item:nth-child(2) small,.quick-item:nth-child(4) small { color:var(--pink); }
    .quick-item strong { display:block; max-width:80%; font-size:1.06rem; line-height:1.3; }

    .section { padding:104px 0; }
    .section-soft { background:linear-gradient(180deg,#f7fcf3,#eff9e8); }
    .section-cream { background:linear-gradient(180deg,#fffdf8,#fff9ee); }
    .eyebrow { color:var(--green-700); }
    .eyebrow::before { background:var(--pink); }
    .section-head p { font-size:1.08rem; }

    .card,.credential,.condition-pill,.trust-row,.story-card,.article-card,.contact-option,.faq-list details {
      border:1px solid rgba(6,99,50,.08);
      box-shadow:0 10px 32px rgba(6,87,45,.06);
    }
    .card {
      border-radius:26px;
      background:#fff;
      transition:transform .22s ease,box-shadow .22s ease;
    }
    .card:hover { transform:translateY(-5px); box-shadow:0 20px 42px rgba(6,87,45,.12); }
    .expertise-card:nth-child(2),.expertise-card:nth-child(5) { background:linear-gradient(145deg,#fff,#fff3f7); }
    .expertise-card:nth-child(3),.expertise-card:nth-child(6) { background:linear-gradient(145deg,#fff,#f1f9e8); }
    .icon-box { background:var(--green-100); color:var(--green-800); }
    .expertise-card:nth-child(2) .icon-box,.expertise-card:nth-child(5) .icon-box { background:var(--pink-soft); color:var(--pink); }
    .text-link { color:var(--green-800); }

    .profile-image {
      background:
        radial-gradient(circle at 40% 28%,rgba(255,255,255,.95),rgba(255,255,255,0) 22%),
        linear-gradient(145deg,#bde8a4,#58bd6f);
      border-radius:36px;
    }
    .credentials { gap:14px; }
    .credential { border-radius:20px; background:var(--green-050); }
    .credential:nth-child(2),.credential:nth-child(4) { background:var(--pink-soft); }
    .credential strong { color:var(--green-800); }

    .condition-pill { border-radius:20px; background:#fff; }
    .condition-pill:nth-child(2n) { background:var(--pink-soft); }
    .condition-dot { background:var(--green-100); color:var(--green-800); }
    .condition-pill:nth-child(2n) .condition-dot { background:#fff; color:var(--pink); }

    .detection-art,.research-panel,.appointment-panel { border-radius:38px; }
    .research-panel { background:linear-gradient(135deg,#075f34,#0c8b48 58%,#79c959); }
    .journey-number { background:var(--green-800); }
    .journey-step:nth-child(even) .journey-number { background:var(--pink); }
    .appointment { background:linear-gradient(145deg,#eff9e8,#fff7f2); }
    .appointment-panel { background:#fff; border:1px solid rgba(6,99,50,.09); }

    footer { background:#053823; }
    .footer-brand .brand-mark { width:52px; }

    @media(max-width:1080px) {
      .main-nav { gap:18px; }
      .main-nav a { font-size:.85rem; }
      .hero-grid { grid-template-columns:1fr 1fr; gap:10px; }
      .hero-copy h1 { font-size:clamp(3rem,6vw,5rem); }
      .authority-card-light { right:2%; }
    }
    @media(max-width:920px) {
      .container { width:min(calc(100% - 34px),var(--container)); }
      .main-nav {
        display:none;
        position:absolute;
        top:92px;
        left:17px;
        right:17px;
        padding:18px;
        flex-direction:column;
        align-items:stretch;
        border-radius:20px;
        background:#fff;
        box-shadow:var(--shadow-md);
      }
      .main-nav.open { display:flex; }
      .main-nav a:not(.btn)::after { display:none; }
      .nav-toggle { display:grid; place-items:center; }
      .hero-grid { grid-template-columns:1fr; padding-top:56px; }
      .hero-copy { text-align:left; }
      .hero-copy h1 { max-width:760px; }
      .hero-visual { min-height:560px; }
      .brand-stage { width:min(100%,650px); margin-inline:auto; }
      .quick-paths { margin-top:0; }
      .quick-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media(max-width:620px) {
      .nav-wrap { min-height:76px; }
      .brand-mark { width:48px; height:40px; }
      .brand-text strong { font-size:1.38rem; }
      .main-nav { top:76px; }
      .hero { min-height:auto; }
      .hero-grid { padding:42px 0 24px; gap:12px; }
      .hero-copy h1 { font-size:clamp(3.05rem,15vw,4.45rem); line-height:.92; }
      .hero-lead { font-size:1rem!important; }
      .hero-authority { font-size:.9rem!important; }
      .hero-actions .btn { width:100%; }
      .hero-trust { display:grid; gap:9px; }
      .hero-trust span { padding:0; border-right:0; }
      .hero-visual { min-height:420px; }
      .brand-stage { width:112%; margin-left:-6%; }
      .authority-card-light { width:88%; right:6%; bottom:0; padding:12px; }
      .stage-dot-grid { display:none; }
      .quick-grid { grid-template-columns:1fr; }
      .quick-item { min-height:110px; }
      .section { padding:76px 0; }
      .mobile-cta { background:rgba(255,253,248,.96); }
    }
    @media(prefers-reduced-motion:reduce) {
      .hero-brand-symbol { animation:none; }
    }

/* ===== Clean typography override (v4) ===== */
/* Softer typography and a cleaner hero hierarchy */
    body {
      font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight: 400;
      letter-spacing: 0;
    }

    h1, h2, h3 {
      font-family: inherit;
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    h2 { font-weight: 650; }
    h3 { font-weight: 600; }
    p { font-weight: 400; }

    .main-nav a,
    .brand-text strong,
    .quick-item strong,
    .text-link,
    summary {
      font-weight: 600;
    }

    .btn {
      min-height: 48px;
      padding: 11px 19px;
      border-radius: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
      box-shadow: none;
    }

    .hero {
      min-height: 650px;
    }

    .hero-grid {
      min-height: 650px;
      grid-template-columns: 1.02fr .98fr;
      gap: 70px;
      padding: 66px 0 78px;
    }

    .hero-copy {
      padding-top: 0;
      max-width: 680px;
    }

    .hero-copy h1 {
      max-width: 680px;
      margin: 0 0 26px;
      font-size: clamp(3rem, 5.15vw, 5.45rem);
      line-height: 1.01;
      letter-spacing: -0.052em;
      font-weight: 700;
    }

    .hero-copy h1 .headline-green {
      margin: .08em 0;
      text-shadow: none;
    }

    .hero-lead {
      max-width: 650px;
      margin: 0;
      font-size: clamp(1rem, 1.35vw, 1.16rem) !important;
      line-height: 1.62;
      color: #46554e;
    }

    .hero-lead a {
      color: var(--green-800);
      font-weight: 600;
      text-decoration: none;
    }

    .hero-actions-simple {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 24px;
      margin-top: 28px;
    }

    .hero-actions-simple .btn-primary {
      padding-inline: 22px;
    }

    .hero-secondary-link {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--green-900);
      font-size: .97rem;
      font-weight: 600;
      text-decoration: none;
      padding: 10px 0;
      border-bottom: 1px solid rgba(7, 94, 50, .28);
      transition: color .2s ease, border-color .2s ease, gap .2s ease;
    }

    .hero-secondary-link:hover {
      color: var(--green-700);
      border-color: var(--green-700);
      gap: 13px;
    }

    .hero-visual { min-height: 560px; }
    .brand-stage { width: min(100%, 610px); }

    .authority-card-light {
      width: min(70%, 400px);
      padding: 14px 16px;
    }

    .authority-card-light strong { font-weight: 600; }
    .authority-card-light span { font-weight: 400; }

    .quick-paths { margin-top: -22px; }
    .quick-item small { font-weight: 600; letter-spacing: .06em; }

    @media (max-width: 920px) {
      .hero-grid {
        min-height: auto;
        gap: 42px;
        padding: 52px 0 66px;
      }
      .hero-copy { max-width: 760px; }
      .hero-copy h1 { max-width: 760px; }
      .hero-visual { min-height: 520px; }
    }

    @media (max-width: 620px) {
      .hero-grid { padding: 42px 0 56px; }
      .hero-copy h1 {
        font-size: clamp(2.55rem, 12vw, 3.7rem);
        line-height: 1.03;
        letter-spacing: -0.045em;
        margin-bottom: 21px;
      }
      .hero-lead { font-size: 1rem !important; line-height: 1.58; }
      .hero-actions-simple {
        align-items: flex-start;
        gap: 17px;
        margin-top: 24px;
      }
      .hero-actions-simple .btn { width: auto; }
      .hero-actions-simple .btn-primary { width: 100%; }
      .hero-secondary-link { margin-left: 2px; }
      .hero-visual { min-height: 440px; }
      .authority-card-light { width: 92%; }
      .quick-paths { margin-top: 0; }
    }
  

    /* Patient-led opening pathway */
    .care-finder {
      position: relative;
      overflow: hidden;
      padding-top: 82px;
      background:
        radial-gradient(circle at 8% 8%, rgba(135, 215, 184, .22), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(33, 162, 120, .12), transparent 30%),
        var(--cream);
    }

    .care-finder::before,
    .care-finder::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
    }

    .care-finder::before {
      width: 190px;
      height: 190px;
      left: -105px;
      bottom: 40px;
      background: rgba(189, 235, 216, .42);
    }

    .care-finder::after {
      width: 130px;
      height: 130px;
      right: -58px;
      top: 76px;
      border: 28px solid rgba(33, 162, 120, .10);
    }

    .care-finder .container { position: relative; z-index: 1; }
    .care-finder-head { max-width: 830px; margin-bottom: 38px; }
    .care-finder-head h2 { font-weight: 650; }

    .care-path-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    .care-path-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 330px;
      padding: 28px 25px 24px;
      overflow: hidden;
      color: var(--ink);
      background: rgba(255, 255, 255, .88);
      border: 1px solid rgba(11, 93, 71, .11);
      border-radius: 24px;
      box-shadow: 0 14px 38px rgba(7, 58, 44, .07);
      text-decoration: none;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .care-path-card:nth-child(2) { background: linear-gradient(145deg, #ffffff, #f0faf5); }
    .care-path-card:nth-child(3) { background: linear-gradient(145deg, #f9fffb, #e8f8f0); }
    .care-path-card-featured {
      color: var(--white);
      background: linear-gradient(145deg, var(--green-700), var(--green-950));
      border-color: transparent;
    }

    .care-path-card:hover {
      transform: translateY(-6px);
      border-color: rgba(11, 93, 71, .24);
      box-shadow: 0 22px 52px rgba(7, 58, 44, .12);
    }

    .care-path-number {
      position: absolute;
      top: 20px;
      right: 22px;
      color: rgba(8, 77, 59, .25);
      font-size: .78rem;
      font-weight: 650;
      letter-spacing: .12em;
    }

    .care-path-card-featured .care-path-number { color: rgba(255,255,255,.48); }

    .care-path-icon {
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      margin-bottom: 34px;
      color: var(--green-800);
      background: var(--green-100);
      border-radius: 17px;
    }

    .care-path-icon svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .care-path-card-featured .care-path-icon {
      color: var(--white);
      background: rgba(255,255,255,.14);
    }

    .care-path-card h3 {
      margin-bottom: 12px;
      font-size: 1.3rem;
      font-weight: 650;
      letter-spacing: -.018em;
    }

    .care-path-card p {
      margin-bottom: 24px;
      font-size: .96rem;
      line-height: 1.58;
    }

    .care-path-card-featured p { color: rgba(255,255,255,.76); }

    .care-path-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      color: var(--green-800);
      font-size: .92rem;
      font-weight: 600;
    }

    .care-path-card-featured .care-path-link { color: var(--white); }
    .care-path-card:hover .care-path-link { gap: 12px; }

    /* Prof. Perera now appears after needs, expertise and conditions. */
    #meet-title { max-width: 760px; font-weight: 650; }

    @media (max-width: 1020px) {
      .care-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .care-path-card { min-height: 290px; }
    }

    @media (max-width: 620px) {
      .care-finder { padding-top: 70px; }
      .care-path-grid { grid-template-columns: 1fr; }
      .care-path-card { min-height: 0; padding: 24px 22px; }
      .care-path-icon { margin-bottom: 25px; }
    }

/* ==========================================================================
   Elementor / Header Footer Elementor (HFE) header alignment
   NOTE: Elementor auto-generates a new random ID (e.g. "ea664fd") for the
   header's container every time the header template is edited/re-saved,
   so hardcoding those IDs breaks the very next time you touch the header
   in Elementor. This version anchors to #masthead instead — a stable,
   semantic wrapper ID that HFE/the active theme always outputs around the
   header — plus HFE's own stable widget classes (.hfe-site-logo-img,
   .hfe-nav-menu, .hfe-menu-item, etc.), so it keeps working across
   different sites/installs and after future header edits.
   ========================================================================== */

#masthead {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--green-100);
}

/* Kill theme/browser default underline on every link inside the header
   (belt-and-braces alongside the global "a" reset near the top of this file). */
#masthead a,
#masthead a:hover,
#masthead a:focus,
#masthead a:visited {
  text-decoration: none !important;
}

/* ---- Header row: logo + full nav side by side on one line ----
   IMPORTANT: Elementor regenerates a new random ID (like ".elementor-
   element-ea664fd") for every element in the header EVERY TIME the
   header template is edited/re-saved — this has already happened three
   times. Hardcoding those IDs means this CSS breaks again the next time
   the header is touched in Elementor.
   Instead this targets ".elementor-20" — the WordPress POST ID for this
   saved header template, which stays constant across edits — combined
   with structural position (first/second child), so it keeps working
   regardless of what random ID Elementor assigns to each element.
   If you ever delete this header template and build a brand new one,
   its post ID will change and these selectors will need updating to
   match (swap "20" for the new template's ID, visible in the page
   source as data-elementor-id="..."). */
.elementor-20 > .e-flexbox-base {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  width: min(calc(100% - 54px), 1320px) !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 14px 0 !important;
  float: none !important;
}

/* First column = logo. Shrink to fit its actual content instead of
   whatever width Elementor's panel setting assigns it. */
.elementor-20 > .e-flexbox-base > .e-flexbox-base:first-child {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Second column = nav. Grow to fill the remaining space. */
.elementor-20 > .e-flexbox-base > .e-flexbox-base:nth-child(2) {
  flex: 1 1 auto !important;
  width: auto !important;
}

.hfe-site-logo-img {
  height: 44px;
  width: auto;
  display: block;
}

/* ---- The actual menu ---- */
.elementor-widget-navigation-menu,
.elementor-widget-navigation-menu .elementor-widget-container,
.hfe-nav-menu,
.hfe-nav-menu-layout {
  width: 100%;
}

.hfe-nav-menu-layout.horizontal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

ul.hfe-nav-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 12px 0;
}

@media (min-width: 1025px) and (max-width: 1240px) {
  ul.hfe-nav-menu {
    gap: 14px;
  }

  a.hfe-menu-item {
    font-size: 0.85rem;
    padding: 8px 2px;
  }

  li.menu-item:last-child a.hfe-menu-item {
    padding: 8px 14px;
  }
}

ul.hfe-nav-menu li.menu-item {
  list-style: none;
}

a.hfe-menu-item {
  font-family: Aptos, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--green-950);
  text-decoration: none;
  padding: 8px 4px;
  transition: color 0.2s ease;
}

a.hfe-menu-item:hover {
  color: var(--green-700);
}

/* Current / active page link */
li.current-menu-item a.hfe-menu-item {
  color: var(--green-700);
  border-bottom: 2px solid var(--green-500);
}

/* Optional: turn the last menu item into a filled CTA button
   (rename the WP menu item, e.g. "Book a Consultation", then this targets it) */
li.menu-item:last-child a.hfe-menu-item {
  background: var(--green-800);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  border-bottom: none;
}

li.menu-item:last-child a.hfe-menu-item:hover {
  background: var(--green-950);
  color: #fff;
}

/* ---- Mobile hamburger toggle ---- */
.hfe-nav-menu__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.hfe-nav-menu-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--green-950);
}

/* ---- Responsive: collapse to mobile menu ---- */
@media (max-width: 1024px) {
  .hfe-nav-menu__toggle {
    display: flex;
  }

  ul.hfe-nav-menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 0 18px;
  }

  /* UAE toggles an open state on the nav when the hamburger is tapped.
     If the menu doesn't appear on mobile after tapping, check UAE's
     "Toggle Button" behavior in the widget panel — it may use a
     different active-state selector than the one below (inspect the
     element after tapping to confirm the exact class it adds). */
  .hfe-nav-menu-layout.horizontal.hfe-nav-menu--active ul.hfe-nav-menu {
    display: flex;
  }

  li.menu-item:last-child a.hfe-menu-item {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: #087f3f !important;
    color: #fff !important;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    border-bottom: none !important;
    margin-top: 6px;
    box-sizing: border-box;
  }

  /* ---- Mobile "open menu" panel styling ----
     Confirmed from the live DOM: opening the menu adds class
     "hfe-active-menu" to the toggle button and "menu-is-active" to the
     <nav> element, and the plugin's JS sets an inline pixel width (e.g.
     "width: 782px") on that <nav> — sized for its desktop dropdown
     behavior, not a mobile panel — which is what was cropping it.
     There are TWO nested flex rows here: the OUTER one (logo column +
     nav column, side by side) and an INNER one (just toggle + nav,
     inside the nav column only). Rather than switching that outer row
     to a column (which was moving the toggle button itself below the
     logo, since the toggle lives inside the same nav column as the
     panel), the panel now uses "position: fixed" instead. Fixed
     positioning anchors directly to the viewport, so it can span full
     width and drop in below the header as an independent overlay
     without touching the logo/toggle row's layout at all — the toggle
     (and close-icon) now stays exactly where it always was. */
  nav.hfe-nav-menu__layout-horizontal.menu-is-active,
  .hfe-nav-menu__toggle[aria-expanded="true"] ~ nav.hfe-nav-menu__layout-horizontal {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    margin-top: 0 !important;
    z-index: 999;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }

  nav.hfe-nav-menu__layout-horizontal.menu-is-active ul.hfe-nav-menu,
  .hfe-nav-menu__toggle[aria-expanded="true"] ~ nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu {
    display: flex !important;
    width: 100%;
    background: #fff;
    padding: 6px 4px 18px;
    border-top: 1px solid var(--green-100);
  }
}

/* ---- Mobile: match header side padding to the body's mobile gutter
   (.container uses 28px total gutter under 640px — see the media query
   for ".container" earlier in this file), and push the hamburger icon
   to the far right instead of sitting centered in its column. HFE's
   nav-menu widget wrapper doesn't stretch to fill its flex column by
   default, so "justify-content: flex-end" alone has nothing to push
   against — forcing width:100% down the chain fixes that. ---- */
@media (max-width: 767px) {
  .elementor-20 > .e-flexbox-base {
    width: min(calc(100% - 28px), 1320px) !important;
    padding: 10px 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Elementor calculates an inline pixel width (e.g. "width: 863.275px")
     on this <nav> element via JS, sized for the desktop dropdown layout.
     It doesn't get recalculated at mobile widths, so it silently pushes
     the page wider than the viewport and causes horizontal scroll/drag.
     Overriding only the width here — NOT "left", since HFE likely uses
     that property itself to slide the panel open/closed, and forcing it
     to 0 would freeze the menu in one state regardless of toggle clicks. */
  nav.hfe-nav-menu__layout-horizontal {
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-20 > .e-flexbox-base > .e-flexbox-base:first-child {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .elementor-20 > .e-flexbox-base > .e-flexbox-base:nth-child(2) {
    width: auto !important;
    flex: 1 1 auto !important;
  }

  .hfe-site-logo-img {
    height: 34px;
  }

  .elementor-widget-navigation-menu,
  .elementor-widget-navigation-menu .elementor-widget-container,
  .hfe-nav-menu,
  .hfe-nav-menu-layout {
    width: 100%;
  }

  .hfe-nav-menu-layout.horizontal {
    justify-content: flex-end;
  }

  .hfe-nav-menu__toggle {
    margin-left: auto;
  }
}