/* ==========================================================================
   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.
   Uses overflow-x: clip rather than hidden — "hidden" (and "auto"/"scroll")
   on html/body silently disables position:sticky on every descendant
   (including the #masthead sticky header below), while "clip" still blocks
   horizontal overflow without creating that scrolling box. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* ==========================================================================
   Sticky header override — #masthead is the live WordPress/Elementor header
   (Header Footer Elementor), not part of this file's own markup. This
   replaces needing HFE's own sticky toggle. doc.js measures the header's
   real height into --header-height so in-page anchor links (e.g.
   /treatments/#liver-transplantation) scroll to a position that isn't
   hidden underneath the now-fixed header.
   !important is required here: the Header Footer Elementor plugin ships its
   own rule (#masthead { position: relative; z-index: 99; } in
   header-footer-elementor.css) targeting the exact same selector. Without
   !important this is a coin-flip decided by stylesheet load order/caching
   instead of a guaranteed win — same reasoning as the link reset at the top
   of this file.
   ========================================================================== */
#masthead {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: #fff;
  box-shadow: 0 2px 16px rgba(6, 59, 44, .08);
}
html {
  scroll-padding-top: var(--header-height, 90px);
}

/* ===== 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-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-visual {
      position: relative;
      min-height: 560px;
      display: grid;
      place-items: center;
    }
    .hero-lead {
      color: var(--ink);
      font-size: clamp(1.12rem, 2vw, 1.32rem) !important;
      line-height: 1.55;
      max-width: 740px;
      margin-bottom: 14px;
    }
    .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;
      overflow: hidden;
    }
    .authority-monogram img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .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; }

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

    .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; }
    .icon-box img { width: 52px; height: 52px; object-fit: contain; display: block; }
    /* .expertise-card is a column flexbox; explicitly pin the icon box to
       the start of the cross axis (left) rather than relying on default
       flex alignment, so it stays flush with the heading/text left edge
       below it regardless of any inherited align-items behavior. Scoped
       to .expertise-card so other .icon-box usages elsewhere are unaffected. */
    .expertise-card .icon-box { align-self: flex-start; }
    /* Expertise-card icons render inside the same 50x50 tinted .icon-box
       as every other icon on the site, sized down slightly (28px) since
       these are more detailed illustrations rather than simple glyphs. */
    .icon-box img.expertise-icon-img { width: 28px; height: 28px; object-fit: contain; display: block; }

    .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: 240px;
      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: 150px;
      height: 150px;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .condition-dot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Early detection */
    .detection-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }
    .point-list { display: grid; gap: 17px; margin: 28px 0; }
    .point {
      padding: 18px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 16px;
    }
    .point summary {
      display: grid;
      grid-template-columns: 50px 1fr;
      gap: 14px;
      align-items: center;
      list-style: none;
      position: relative;
    }
    .point summary::-webkit-details-marker { display: none; }
    .point summary h3 { margin: 0; }
    .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: 12px 0 0; padding-left: 64px; font-size: .92rem; }

    /* Hospital */
    .hospital-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 60px;
      align-items: center;
    }
    .trust-list { display: grid; gap: 17px; margin: 28px 0; }
    .trust-row {
      padding: 18px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 16px;
    }
    .trust-row summary {
      display: grid;
      grid-template-columns: 50px 1fr;
      gap: 14px;
      align-items: center;
      list-style: none;
      position: relative;
    }
    .trust-row summary::-webkit-details-marker { display: none; }
    .trust-row summary h3 { margin: 0; }
    .trust-check {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--green-100);
      color: var(--green-800);
      font-weight: 900;
    }
    .trust-row h3 { margin-bottom: 6px; }
    .trust-row p { margin: 12px 0 0; padding-left: 64px; font-size: .92rem; }

    /* Mobile-accordion pattern shared by .point-list and .trust-list:
       collapsed by default on mobile (native <details> behaviour, no JS
       needed), forced always-open on desktop so nothing changes there
       (SEO audit #9, 27 Oct 2026). */
    .mobile-accordion-list summary { cursor: pointer; }
    .mobile-accordion-list summary::after {
      content: "+";
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.3rem;
      color: var(--green-700);
    }
    .mobile-accordion-list details[open] summary::after { content: "–"; }
    @media (min-width: 769px) {
      .mobile-accordion-list details p { display: block !important; }
      .mobile-accordion-list summary { cursor: default; pointer-events: none; }
      .mobile-accordion-list summary::after { display: none; }
    }
    .facility-image {
      min-height: 500px;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(180deg, transparent 54%, rgba(6,59,46,.86)),
        url('https://liver.lk/wp-content/uploads/2026/07/testi.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }
    .facility-image::before {
      content: none;
    }
    .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: block;
      padding: 0;
    }
    .research-art img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    /* 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; }

    /* Articles */
    .article-card { overflow: hidden; padding: 0; }
    .article-image {
      aspect-ratio: 16 / 9;
      overflow: hidden;
    }
    .article-image a { display: block; width: 100%; height: 100%; }
    .article-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .article-body { padding: 24px; }
    .article-date { color: var(--green-700); font-size: .78rem; font-weight: 820; text-transform: uppercase; letter-spacing: .08em; }
    .article-title-link { color: inherit; }
    .article-title-link:hover { text-decoration: underline !important; }

    /* 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 */
    /* Background moved to the <section> itself (scoped via its existing
       aria-labelledby attribute, so no HTML changes needed) so the color
       spans the full page width edge-to-edge. The .international-card
       element keeps the text/buttons aligned inside the normal .container
       width — only its own background/border-radius are removed here,
       since the section now supplies the full-bleed background instead. */
    section[aria-labelledby="international-title"] {
      position: relative;
      width: 100vw;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      background:
        radial-gradient(circle at 88% 18%, rgba(135,215,184,.28), transparent 24%),
        url('https://liver.lk/wp-content/uploads/2026/09/new-travelling4.png'),
        linear-gradient(125deg, #063b25, #087f3f);
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-position: center, right bottom, center;
      background-size: auto, auto 100%, auto;
      overflow: hidden;
    }

    @media (max-width: 900px) {
      section[aria-labelledby="international-title"] {
        background:
          radial-gradient(circle at 88% 18%, rgba(135,215,184,.28), transparent 24%),
          linear-gradient(125deg, #063b25, #087f3f) !important;
      }
    }
    .international-card {
      position: relative;
      padding: clamp(35px, 6vw, 76px) 0;
      color: var(--white);
      overflow: hidden;
    }
    .international-card h2 { color: var(--white); max-width: 100%; }
    .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-icon {
      margin: 0;
      width: 46px;
      height: 46px;
      border-radius: 15px;
      background: var(--green-100);
      color: var(--green-800);
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .contact-icon img { width: 24px; height: 24px; object-fit: contain; object-position: left center; display: block; }
    .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;
    }

    .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: var(--white); text-decoration: none; box-shadow: var(--shadow-md); font-weight: 700; }

    .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);
    }
    /* Keep "Book Consultation" from wrapping to two lines inside the
       narrower fixed bar (SEO audit #13, 27 Oct 2026). */
    .mobile-cta .btn { white-space: nowrap; letter-spacing: -0.01em; padding-inline: 10px; font-size: .92rem; }

    @media (max-width: 1100px) {
      .main-nav { gap: 16px; }
      .main-nav a { font-size: .86rem; }
      .condition-grid { grid-template-columns: repeat(4, 1fr); }
      .condition-dot { width: 90px; height: 90px; }
      .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; }
      .grid-3 { 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; }
      .condition-dot { width: 130px; height: 130px; }
      .hero { min-height: auto; }
      .hero-grid { gap: 32px; }
      .hero-copy h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
      .hero-actions .btn { width: 100%; }
      .hero-visual { min-height: 500px; }
      .authority-card { width: 94%; bottom: -44px; }
      .grid-3,
      .credentials,
      .journey,
      .footer-grid { grid-template-columns: 1fr; }
      /* Keeps "Areas of Expertise" as 2-column compact cards instead of
         stacking all 5 full-width, to shorten the mobile page
         (SEO audit #9, 27 Oct 2026). */
      .expertise-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
      .expertise-grid .card { padding: 16px; }
      .expertise-grid .icon-box { width: 44px; height: 44px; margin-bottom: 12px; }
      .expertise-grid .expertise-icon-img { width: 22px; height: 22px; }
      .expertise-grid h3 { font-size: .98rem; margin-bottom: 6px; }
      .expertise-grid p { font-size: .82rem; margin-bottom: 10px; }
      .expertise-grid .text-link { font-size: .82rem; }
      .profile-image, .facility-image { 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); }

      /* Condition icons become a swipeable horizontal slider on mobile
         instead of stacking one below another. Pure CSS scroll-snap —
         no JavaScript needed. Each pill keeps a fixed width so several
         are partially visible at once, hinting that it's scrollable. */
      .condition-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        padding-bottom: 10px;
        margin: 0 -14px;
        padding-left: 14px;
        padding-right: 14px;
      }
      .condition-grid::-webkit-scrollbar {
        height: 6px;
      }
      .condition-grid::-webkit-scrollbar-thumb {
        background: var(--line);
        border-radius: 999px;
      }
      .condition-pill {
        flex: 0 0 auto;
        width: 42vw;
        min-width: 150px;
        scroll-snap-align: start;
      }
      .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; }
      /* Reserve space for the fixed mobile Call/Book bar so it doesn't sit
         on top of the last section's content (SEO audit #13, 27 Oct 2026). */
      body { padding-bottom: 90px; }
    }

    @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; }
    /* Scaled down in proportion to the hero h1's new smaller size (same
       ~1.3:1 h1:h2 ratio the original clamp(2.35rem,4.3vw,4.15rem) had),
       so section headings stay visually consistent with the hero heading
       instead of now being larger than it. */
    h2 { font-size:clamp(1.95rem,3.3vw,3rem); }
    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-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-actions { margin-top:25px; gap:14px; }

    .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 img { width:100%; display:block; object-fit:contain; }
    @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; }

    .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); }
    .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:auto;
      height:auto;
      border-radius:0;
      transform:none;
      background:none;
      box-shadow:none;
      display:grid;
      place-items:center;
      overflow:visible;
    }
    .footer-brand .brand-mark::after { content:none; }
    .footer-brand .brand-mark img { width:186px; height:78px; }

    @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; }
    }
    @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-actions .btn { width:100%; }
      .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; }
      .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,
    .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;
      /* Sized so the headline runs 4 lines: "Complex Liver Care" and "in
         Sri Lanka" fit on one line each, while the longest span
         ("International Expertise for") wraps to 2 within this 680px
         max-width. */
      font-size: clamp(2.5rem, 4.2vw, 3.9rem);
      line-height: 1.08;
      letter-spacing: -0.03em;
      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; }

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

    /* Mobile-only credibility badge, shown directly under the hero text.
       Hidden on desktop (where the full .hero-visual already shows the
       badge); see the max-width:768px block below for where it's revealed
       and .hero-visual is hidden in its place (SEO audit #7/#9). */
    .hero-mobile-badge { display: none; }

    @media (max-width: 768px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }
      .hero-visual { display: none; }
      .hero-mobile-badge {
        position: static;
        display: grid;
        width: 100%;
        max-width: 420px;
        margin: 22px 0 0;
        transform: none;
      }
    }

    @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: 0; }
      .authority-card-light { width: 92%; }
    }
  

    /* 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, and the WordPress POST ID itself
   (previously "elementor-20") ALSO changes if the header template is
   ever rebuilt from scratch — confirmed via DevTools that it has since
   become "elementor-130", silently breaking every ".elementor-20"
   selector that used to anchor this section.
   Fixed by anchoring to ".site-header-row" instead — a plain custom CSS
   class assigned directly to this row via Elementor's own "CSS Classes"
   advanced control, which (unlike the numeric post/element IDs) does NOT
   get regenerated on re-save, combined with structural position
   (first/second child) for the logo/nav columns. This should survive
   future header edits without needing updates. */
/* Width tied to var(--container), same as ".container", but with an extra
   20px added to every gutter step (74/54/48 instead of 54/34/28). Measured
   via DevTools: even though both resolve to the same 1320px content width,
   ".container" gets centered with ~10px less space per side than this row
   was getting — an Elementor column/section padding around the page-content
   HTML widget that doc-style.css doesn't control — so this row is narrowed
   by that same 20px to match the content's actual (not theoretical) edges.
   If that Elementor column padding is ever removed/changed, this offset
   will need revisiting. */
.site-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  width: min(calc(100% - 74px), var(--container)) !important;
  max-width: var(--container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 8px 0 !important;
  float: none !important;
}

@media (max-width: 920px) {
  .site-header-row { width: min(calc(100% - 54px), var(--container)) !important; }
}

@media (max-width: 640px) {
  .site-header-row { width: min(calc(100% - 48px), var(--container)) !important; }
}

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

/* Second column = nav. Deliberately NOT flex-grow: the row's own
   "justify-content: space-between" already pushes this column flush to
   the row's right edge regardless of its size — growing it too via
   flex-grow just stretched it far wider than its actual content (Elementor
   sets this column's own width to a fixed 66.6666% via its per-instance
   CSS), leaving the visible menu items left-anchored and stranded well
   short of the true right edge inside that oversized box. Confirmed via
   DevTools: unchecking flex-grow here fixed the alignment immediately. */
.site-header-row > .e-flexbox-base:nth-child(2) {
  width: auto !important;
}

/* Scoped to #masthead + !important: Elementor's own core frontend.css ships
   a ".elementor img { height:auto; max-width:100% }" rule that outranks a
   plain ".hfe-site-logo-img" class selector on specificity (it adds an
   "img" type selector), which was silently stretching the logo to its
   intrinsic size instead of the 32px set here. Confirmed via DevTools
   Computed panel showing height:98px despite this rule being present. */
#masthead .hfe-site-logo-img {
  height: 40px !important;
  width: auto !important;
  display: block !important;
}

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

/* Elementor calculates an inline pixel width (e.g. "width: 863.275px") on
   this <nav> element via JS, sized for its dropdown behavior, and it does
   NOT get recalculated at desktop widths either — so without this, the nav
   list can be constrained narrower than its actual column, leaving the CTA
   button/last item short of the column's true right edge even though
   "justify-content: flex-end" is set. Applied unconditionally (not just in
   the mobile media query) since the same inline-width issue shows up at
   desktop sizes too. */
nav.hfe-nav-menu__layout-horizontal {
  width: 100% !important;
  max-width: 100% !important;
}

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

ul.hfe-nav-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* Without this, items default to flex-start and pack against the left
     edge of the now-full-width <nav> (see the width:100% rule above),
     leaving the CTA button stranded short of the row's right edge instead
     of ending flush with it. ".hfe-nav-menu-layout.horizontal"'s own
     justify-content:flex-end only positions the <nav> block as a whole
     within its wrapper — it doesn't affect these li's individually. */
  justify-content: flex-end;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

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;
  /* !important needed: Elementor's per-post generated CSS for this exact
     nav widget (post-130.css) sets its own padding-top/padding-bottom
     (15px) via a much more specific selector chain, which otherwise wins
     over this plain-class rule and silently adds back extra header height. */
  padding: 6px 4px !important;
  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;
  /* !important: same post-130.css override as a.hfe-menu-item above, which
     also matches this CTA link since it doesn't exclude :last-child. */
  padding: 8px 18px !important;
  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;
  min-width: 40px;
  min-height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  /* Neutralize whatever default border/box Elementor's own widget skin
     draws around this (showed up as a plain square outline) and give it
     an actual chip-style treatment matching the rest of the site. */
  background: var(--green-100) !important;
  border: none !important;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.hfe-nav-menu__toggle:hover,
.hfe-nav-menu__toggle[aria-expanded="true"] {
  background: var(--green-200) !important;
}

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

/* ---- Responsive: collapse to mobile menu ----
   Raised from 1024px to 1240px: a 7th nav item (Liver Health) no longer
   fit on one line even with the old 1025-1240px "squeeze" tier (reduced
   gap/padding/font-size), which caused a visible 2-line wrap in that
   range. That squeeze tier is removed now that its whole range falls
   under the hamburger breakpoint instead. ---- */
@media (max-width: 1240px) {
  .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;
  }

  /* Inset with side margins to match the list items' padding above it,
     instead of sitting edge-to-edge against the panel's own sides. */
  li.menu-item:last-child a.hfe-menu-item {
    display: block !important;
    width: calc(100% - 32px) !important;
    text-align: center !important;
    background: #087f3f !important;
    color: #fff !important;
    padding: 14px 20px !important;
    border-radius: 999px !important;
    border-bottom: none !important;
    margin: 10px 16px 6px !important;
    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;
    overflow-x: hidden;
    margin-top: 0 !important;
    z-index: 999;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 20px 20px;
  }

  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: 10px 8px 8px;
    gap: 2px;
    border-top: 1px solid var(--green-100);
  }

  /* Each row: full-width tap target, generous padding, soft tint on
     tap/hover, and the divider is scoped to the link itself (inset by
     the item's own side padding) instead of a full-bleed line touching
     the panel edges. */
  ul.hfe-nav-menu a.hfe-menu-item {
    display: block !important;
    padding: 15px 16px !important;
    border-radius: 12px;
    border-bottom: 1px solid var(--green-100) !important;
    transition: background 0.15s ease;
  }

  ul.hfe-nav-menu a.hfe-menu-item:hover,
  ul.hfe-nav-menu a.hfe-menu-item:active {
    background: var(--green-050);
  }

  li.current-menu-item a.hfe-menu-item {
    background: var(--green-050);
    font-weight: 700;
  }

  /* Last item before the CTA button (the actual "menu-item:last-child" is
     the CTA itself, so this targets the row just above it) shouldn't show
     a divider immediately before the button's own top margin. */
  ul.hfe-nav-menu li.menu-item:nth-last-child(2) a.hfe-menu-item {
    border-bottom: none !important;
  }
}

/* ---- Mobile: push the hamburger icon to the far right instead of sitting
   centered in its column (width is handled by the dedicated 920px/640px
   ".site-header-row" rules above, which mirror ".container"'s own gutter
   steps — not repeated here to avoid two conflicting sources of truth).
   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) {
  .site-header-row {
    padding: 6px 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .site-header-row > .e-flexbox-base:first-child {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0;
  }

  .site-header-row > .e-flexbox-base:nth-child(2) {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 44px !important;
  }

  #masthead .hfe-site-logo-img {
    height: 30px !important;
  }

  .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;
    margin-right: 10px;
  }
}

/* ==========================================================================
   Prof. Thamara Perera profile photo
   This is placed last so it reliably overrides the two earlier duplicate
   .profile-image background declarations (base layer + v3 override) —
   see the recurring "last rule wins" pattern noted elsewhere in this file
   for properties like --container. The placeholder "::before" label
   ("Approved Prof. Perera portrait") is removed since a real photo is
   now in place; the actual caption text (name/title/hospital) is
   untouched — that lives in the .profile-image-caption markup, not here.
   ========================================================================== */
.profile-image {
  background:
    linear-gradient(180deg, transparent 54%, rgba(6,59,46,.86)),
    url('https://liver.lk/wp-content/uploads/2026/09/thamara1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-image::before {
  content: none;
}

/* ==========================================================================
   Patient Testimonials (home page teaser)
   A carousel of real patient testimonials (kept in the original Sinhala),
   each an excerpt linking through to the full testimonial on
   patient-testimonials.html. Built on the existing .card component so it
   inherits the same border/shadow/radius as every other home card grid.
   The slider itself is dependency-free: a horizontally-scrolling flex
   track with scroll-snap, driven by the generic [data-carousel] behavior
   in doc.js (prev/next arrows + dot indicators; native swipe on touch).
   ========================================================================== */
.testimonial-carousel { position: relative; padding: 0 64px; }
.testimonial-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-mini {
  display: flex; flex-direction: column; min-height: 300px;
  flex: 0 0 calc(50% - 10px); scroll-snap-align: start;
}
.testimonial-mini-mark { font-family: Georgia, "Times New Roman", serif; font-size: 44px; line-height: 1; color: var(--green-200); margin-bottom: 6px; }
.testimonial-mini-quote { flex: 1; margin: 0 0 18px; color: var(--ink); font-size: .95rem; line-height: 1.7; }
.testimonial-mini-quote[lang="si"] { line-height: 1.85; }
/* English translation slot — empty placeholder until the clinic team supplies
   the wording (SEO audit #15, 27 Oct 2026). Styled quietly so the bracketed
   placeholder text doesn't look like a finished sentence if seen before it's
   filled in. */
.testimonial-mini-en { margin: -10px 0 18px; color: var(--muted); font-size: .82rem; font-style: italic; }

/* Accessible-but-invisible heading text, used where a section needs a
   heading for structure/SEO but no visible title in the design. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Stats strip — hidden by default, see the home.html comment at its section
   for how to enable it (SEO audit #10, 27 Oct 2026). */
.stats-strip { padding: 36px 0; background: var(--green-950); }
.stats-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stats-strip-item strong { display: block; color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; line-height: 1; margin-bottom: 8px; }
.stats-strip-item span { color: rgba(255,255,255,.72); font-size: .92rem; }
@media (max-width: 640px) {
  .stats-strip-grid { grid-template-columns: 1fr; gap: 20px; }
}
.testimonial-mini-foot { padding-top: 16px; border-top: 1px solid var(--line); }
.testimonial-mini-foot strong { display: block; color: var(--green-950); font-size: .92rem; }
.testimonial-mini-foot span { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.testimonial-mini-link { margin-top: 10px; }

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--white); color: var(--green-800); font-size: 1.3rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.carousel-arrow:hover { background: var(--green-700); color: var(--white); box-shadow: var(--shadow-md); }
.carousel-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
.carousel-arrow:disabled:hover { background: var(--white); color: var(--green-800); }
.carousel-prev { left: 0; }
.carousel-next { right: 0; }

.carousel-dots { display: flex; justify-content: center; gap: 9px; margin-top: 26px; }
.carousel-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--green-200); cursor: pointer; transition: background .18s ease, transform .18s ease; }
.carousel-dot.is-active { background: var(--green-700); transform: scale(1.25); }

@media (max-width: 720px) {
  .testimonial-carousel { padding: 0 0 54px; }
  .testimonial-mini { flex-basis: 100%; }
  .carousel-arrow { top: auto; bottom: 0; transform: none; width: 40px; height: 40px; }
  .carousel-prev { left: calc(50% - 54px); }
  .carousel-next { right: calc(50% - 54px); }
  .carousel-dots { position: absolute; left: 0; right: 0; bottom: 6px; margin-top: 0; }
}

/* ==========================================================================
   Treatments page (liver-lk-treatments-page-v1.html)
   Entirely scoped under .page-treatments so its classes never collide with
   the homepage's identically-named classes (.container, .hero, .card,
   .faq-list, .footer-grid, etc.), which use different values on this page.
   Wrap this page's body content in <div class="page-treatments">...</div>
   for these styles to apply. Uses its own color variables (scoped to
   .page-treatments, not :root) since this page's greens are very close to
   but not identical to the homepage's — scoping avoids re-triggering the
   duplicate-:root cascade issue this file has run into before.
   ========================================================================== */

.page-treatments {
      --green-950: #063c2e;
      --green-900: #07513d;
      --green-800: #0b624a;
      --green-700: #0f7859;
      --green-600: #17936b;
      --green-500: #28ad7f;
      --green-400: #54c79b;
      --green-300: #81d6b3;
      --green-200: #b8e9d5;
      --green-100: #e1f6ed;
      --green-050: #f2fbf7;
      --sage: #dceadf;
      --cream: #fbfaf5;
      --warm: #f7f1e9;
      --pink: #dc6780;
      --pink-soft: #f9e9ed;
      --yellow: #f0c968;
      --ink: #152820;
      --muted: #5d7068;
      --line: #d9e8e0;
      --white: #ffffff;
      --shadow-sm: 0 10px 30px rgba(6, 60, 46, .08);
      --shadow-md: 0 24px 65px rgba(6, 60, 46, .13);
      --radius-sm: 14px;
      --radius-md: 22px;
      --radius-lg: 34px;
      --container: 1320px;
    }
.page-treatments, .page-treatments * { box-sizing: border-box; }
.page-treatments {
      color: var(--ink);
      background: var(--white);
      font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.65;
      text-rendering: optimizeLegibility;
    }
.page-treatments img, .page-treatments svg { display: block; max-width: 100%; }
.page-treatments a { color: inherit; }
.page-treatments button, .page-treatments input, .page-treatments select, .page-treatments textarea { font: inherit; }
.page-treatments h1, .page-treatments h2, .page-treatments h3, .page-treatments p { margin-top: 0; }
.page-treatments h1, .page-treatments h2, .page-treatments h3 { line-height: 1.12; letter-spacing: -0.025em; }
.page-treatments h1 { font-size: clamp(2.5rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.page-treatments h2 { font-size: clamp(1.95rem, 3.3vw, 3rem); font-weight: 650; }
.page-treatments h3 { font-size: 1.18rem; font-weight: 600; }
.page-treatments p { color: var(--muted); font-weight: 400; }
.page-treatments .container {
      width: min(calc(100% - 54px), var(--container));
      margin-inline: auto;
    }
.page-treatments .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 48px;
      padding: 0 20px;
      border: 1px solid transparent;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 600;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
.page-treatments .button:hover { transform: translateY(-2px); }
.page-treatments .button-primary { color: var(--white); background: var(--green-700); box-shadow: 0 10px 26px rgba(15, 120, 89, .18); }
.page-treatments .button-primary:hover { background: var(--green-800); }
.page-treatments .button-secondary { color: var(--green-800); background: var(--white); border-color: var(--green-300); }
.page-treatments .button-secondary:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }
.page-treatments .hero { position: relative; overflow: hidden; padding: 0 0 78px; background: var(--cream); }
.page-treatments .hero::before {
      content: "";
      position: absolute;
      width: 480px;
      height: 480px;
      right: -150px;
      top: -180px;
      border-radius: 50%;
      background: rgba(184, 233, 213, .58);
    }
.page-treatments .hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.page-treatments .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      color: var(--green-700);
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .11em;
      text-transform: uppercase;
    }
.page-treatments .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green-500); }
.page-treatments .hero h1 { max-width: 680px; margin-bottom: 26px; }
.page-treatments .hero h1 span { color: var(--green-700); }
.page-treatments .hero-copy { max-width: 650px; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.62; color: #46554e; }
.page-treatments .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page-treatments .medical-note { margin-top: 22px; max-width: 690px; font-size: .88rem; color: #6b7e76; }
.page-treatments .hero-art {
      min-height: 430px;
      display: grid;
      place-items: center;
      position: relative;
    }
.page-treatments .orb { position: absolute; border-radius: 50%; }
.page-treatments .orb.one { width: 330px; height: 330px; background: var(--green-100); right: 25px; top: 18px; }
.page-treatments .orb.two { width: 205px; height: 205px; background: var(--sage); left: 20px; bottom: 16px; }
.page-treatments .procedure-visual {
      position: relative;
      width: min(560px, 100%);
      aspect-ratio: 1.08;
      display: grid;
      place-items: center;
    }
.page-treatments .procedure-core {
      position: relative;
      width: 475px;
      height: 405px;
      border-radius: 43% 52% 42% 54% / 40% 38% 60% 57%;
      object-fit: cover;
      display: block;
      box-shadow: 0 32px 65px rgba(8, 81, 61, .20);
      transform: rotate(-4deg);
    }
.page-treatments .procedure-node {
      position: absolute;
      display: grid;
      place-items: center;
      width: 92px;
      height: 92px;
      border-radius: 25px;
      color: var(--green-900);
      background: rgba(255,255,255,.95);
      box-shadow: var(--shadow-sm);
      font-size: .84rem;
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
    }
.page-treatments .procedure-node.one { left: 4px; top: 12px; }
.page-treatments .procedure-node.two { right: 0; top: 58px; }
.page-treatments .procedure-node.three { left: 62px; bottom: 6px; }
.page-treatments .procedure-node::before {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--pink);
      top: 12px;
      right: 12px;
      opacity: .75;
    }
.page-treatments .art-card {
      position: absolute;
      right: 0;
      bottom: 18px;
      width: 230px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.75);
      border-radius: 20px;
      background: rgba(255,255,255,.94);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(10px);
    }
.page-treatments .art-card strong { display: block; margin-bottom: 4px; color: var(--green-800); font-size: 1rem; }
.page-treatments .art-card span { color: var(--muted); font-size: .86rem; }
.page-treatments section { padding: 88px 0; }
.page-treatments .section-soft { background: var(--green-050); }
.page-treatments .section-cream { background: var(--cream); }
.page-treatments .section-heading { max-width: 810px; margin-bottom: 38px; }
.page-treatments .section-heading p { max-width: 730px; font-size: 1.04rem; }
.page-treatments .section-heading.center { margin-inline: auto; text-align: center; }
.page-treatments .section-kicker { display: block; margin-bottom: 10px; color: var(--green-700); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.page-treatments .answer-panel {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 0;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: var(--green-900);
      box-shadow: var(--shadow-md);
    }
.page-treatments .answer-question { padding: 42px; color: var(--white); background: rgba(255,255,255,.035); }
.page-treatments .answer-question span { display: block; margin-bottom: 14px; color: var(--green-300); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.page-treatments .answer-question h2 { margin-bottom: 0; font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-treatments .answer-copy { padding: 42px; background: var(--white); }
.page-treatments .answer-copy > p:first-child { color: var(--ink); font-size: 1.08rem; font-weight: 500; }
.page-treatments .answer-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; }
.page-treatments .answer-tags span { padding: 8px 12px; border-radius: 999px; color: var(--green-900); background: var(--green-100); font-size: .88rem; font-weight: 600; }
.page-treatments .note-line { padding-left: 16px; border-left: 3px solid var(--yellow); font-size: .92rem; }
.page-treatments .card-link { display: inline-flex; gap: 7px; margin-top: 14px; color: var(--green-700); text-decoration: none; font-weight: 600; font-size: .92rem; }
.page-treatments .card-link:hover { text-decoration: underline; }

/* Condition-map tooltip pattern reused from .page-liver-health: a centered
   illustration flanked by two columns of icon markers, each revealing its
   own tooltip on hover/focus. See .page-liver-health .condition-map for the
   full rationale; duplicated here (not shared) so it resolves against this
   page's own scoped color variables. */
.page-treatments .condition-map { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.page-treatments .condition-map-figure { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; }
.page-treatments .condition-map-image { flex: 0 0 auto; width: min(300px, 30vw); }
.page-treatments .condition-map-image img {
  width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  border: 1px solid rgba(6, 60, 46, .08);
}
.page-treatments .condition-map-column { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; max-width: 220px; }
.page-treatments .condition-map-column-left { align-items: flex-end; }
.page-treatments .condition-map-column-right { align-items: flex-start; }

.page-treatments .condition-marker-wrap { position: relative; width: 100%; }
.page-treatments .condition-marker-wrap:nth-child(3n+2) .condition-marker-icon { background: var(--pink-soft); }

.page-treatments .condition-marker {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); font-family: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.page-treatments .condition-map-column-left .condition-marker { flex-direction: row-reverse; text-align: right; }
.page-treatments .condition-marker:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.page-treatments .condition-marker-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--green-100); }
.page-treatments .condition-marker-icon img { width: 20px; height: 20px; object-fit: contain; }
.page-treatments .condition-marker-label { font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.25; }

.page-treatments .condition-tooltip {
  position: absolute; bottom: calc(100% + 14px); left: 50%;
  transform: translate(-50%, 6px); z-index: 30; width: 260px; padding: 20px;
  border-radius: 18px; background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.page-treatments .condition-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; background: var(--white); border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); border-radius: 0 0 3px 0; margin-top: -8px; rotate: 45deg;
}
.page-treatments .condition-marker-wrap:hover .condition-tooltip,
.page-treatments .condition-marker-wrap:focus-within .condition-tooltip {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.page-treatments .condition-marker-wrap:hover .condition-marker,
.page-treatments .condition-marker-wrap:focus-within .condition-marker {
  border-color: var(--green-500); box-shadow: var(--shadow-sm); background: var(--green-050);
}
.page-treatments .condition-marker-wrap.tooltip-below .condition-tooltip {
  bottom: auto; top: calc(100% + 14px); transform: translate(-50%, -6px);
}
.page-treatments .condition-marker-wrap.tooltip-below .condition-tooltip::after {
  top: auto; bottom: 100%; margin-top: 0; margin-bottom: -8px;
  border-right: none; border-bottom: none;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.page-treatments .condition-tooltip-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 13px; background: var(--green-100); }
.page-treatments .condition-tooltip-icon img { width: 24px; height: 24px; object-fit: contain; }
.page-treatments .condition-tooltip h3 { font-size: 1rem; margin-bottom: 8px; }
.page-treatments .condition-tooltip p { font-size: .88rem; margin-bottom: 10px; }

.page-treatments .pathway { counter-reset: step; display: grid; gap: 16px; }
.page-treatments .pathway-step { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: start; padding: 24px; border-radius: 19px; background: var(--white); border: 1px solid var(--line); }
.page-treatments .pathway-step::before { counter-increment: step; content: counter(step); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--green-700); font-weight: 700; }
.page-treatments .pathway-step h3 { margin: 4px 0 7px; }
.page-treatments .pathway-step p { margin-bottom: 0; }
.page-treatments .split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: start; }
.page-treatments .sticky-copy { position: sticky; top: 115px; }
.page-treatments .option-list { display: grid; gap: 14px; }
.page-treatments .option-item { display: grid; grid-template-columns: 48px 1fr; gap: 17px; padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.page-treatments .option-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--green-100); color: var(--green-800); font-weight: 700; }
.page-treatments .option-item:nth-child(2n) .option-icon { background: var(--pink-soft); color: #8a4052; }
.page-treatments .option-item b { display: block; margin-bottom: 4px; color: var(--ink); }
.page-treatments .option-item p { margin: 0; font-size: .93rem; }
.page-treatments .approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.page-treatments .approach-card { padding: 29px; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--line); }
.page-treatments .approach-card .number { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 50%; color: var(--white); background: var(--green-700); font-size: .8rem; font-weight: 700; }
.page-treatments .approach-card:nth-child(2) .number { background: var(--green-500); }
.page-treatments .approach-card:nth-child(3) .number { background: var(--pink); }
.page-treatments .approach-card p { margin-bottom: 0; }
.page-treatments .quiet-box { margin-top: 26px; padding: 22px 24px; border: 1px solid var(--green-200); border-radius: var(--radius-md); background: var(--green-050); }
.page-treatments .quiet-box strong { color: var(--green-900); }
.page-treatments .quiet-box p { margin: 6px 0 0; }
.page-treatments .journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.page-treatments .journey-card { padding: 24px; border-radius: 19px; background: var(--white); border: 1px solid var(--line); }
.page-treatments .journey-card span { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 50%; color: var(--white); background: var(--green-700); font-weight: 700; font-size: .82rem; }
.page-treatments .journey-card h3 { margin-bottom: 8px; }
.page-treatments .journey-card p { margin-bottom: 0; font-size: .93rem; }
.page-treatments .specialist-panel {
      display: grid;
      grid-template-columns: 1.16fr .84fr;
      gap: 38px;
      padding: 46px;
      border-radius: var(--radius-lg);
      color: var(--white);
      background: linear-gradient(135deg, var(--green-900), var(--green-700));
      box-shadow: var(--shadow-md);
    }
.page-treatments .specialist-panel h2 { margin-bottom: 16px; }
.page-treatments .specialist-panel p { color: rgba(255,255,255,.80); }
.page-treatments .specialist-panel .button { background: var(--white); color: var(--green-900); }
.page-treatments .specialist-facts { display: grid; gap: 12px; }
.page-treatments .specialist-fact { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.10); }
.page-treatments .specialist-fact b { display: block; margin-bottom: 3px; }
.page-treatments .specialist-fact span { color: rgba(255,255,255,.74); font-size: .88rem; }
.page-treatments .faq-list { display: grid; gap: 12px; max-width: 920px; margin: 0 auto; }
.page-treatments details { border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.page-treatments summary { position: relative; padding: 21px 55px 21px 22px; cursor: pointer; list-style: none; font-weight: 600; }
.page-treatments summary::-webkit-details-marker { display: none; }
.page-treatments summary::after { content: "+"; position: absolute; right: 22px; top: 15px; color: var(--green-700); font-size: 1.65rem; font-weight: 400; }
.page-treatments details[open] summary::after { content: "–"; }
.page-treatments details p { padding: 0 22px 21px; margin: 0; }
.page-treatments .cta-section { padding: 78px 0; background: var(--cream); }
.page-treatments .cta-box { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 44px; border-radius: var(--radius-lg); background: var(--green-100); }
.page-treatments .cta-box h2 { margin-bottom: 12px; font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-treatments .cta-box p { max-width: 720px; margin-bottom: 0; }
.page-treatments .cta-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-end; }
.page-treatments .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: #fff; text-decoration: none; box-shadow: var(--shadow-md); font-weight: 700; }
@media (max-width: 980px) {
  .page-treatments .hero-grid, .page-treatments .split, .page-treatments .specialist-panel { grid-template-columns: 1fr; }
  .page-treatments .hero-art { min-height: 360px; }
  .page-treatments .approach-grid { grid-template-columns: repeat(2, 1fr); }
  .page-treatments .answer-panel { grid-template-columns: 1fr; }
  .page-treatments .sticky-copy { position: static; }
  .page-treatments .journey-grid { grid-template-columns: repeat(2, 1fr); }
  .page-treatments .cta-box { grid-template-columns: 1fr; }
  .page-treatments .cta-actions { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .page-treatments .container { width: min(calc(100% - 28px), var(--container)); }
  .page-treatments .hero { padding: 0 0 58px; }
  .page-treatments .hero-grid { gap: 28px; }
  .page-treatments .hero-art { min-height: 310px; }
  .page-treatments .procedure-visual { width: 330px; }
  .page-treatments .procedure-core { width: 250px; height: 210px; }
  .page-treatments .procedure-node { width: 74px; height: 74px; font-size: .7rem; }
  .page-treatments .art-card { width: 190px; padding: 14px; right: 2px; bottom: 0; }
  .page-treatments section { padding: 64px 0; }
  .page-treatments .approach-grid, .page-treatments .journey-grid { grid-template-columns: 1fr; }
  .page-treatments .answer-question, .page-treatments .answer-copy, .page-treatments .specialist-panel, .page-treatments .cta-box { padding: 28px; }
  .page-treatments .hero-actions .button { width: 100%; }
  .page-treatments .condition-map-image { width: min(220px, 68vw); }
  .page-treatments .condition-marker { padding: 8px 10px; }
  .page-treatments .condition-marker-icon { width: 32px; height: 32px; }
  .page-treatments .condition-marker-icon img { width: 18px; height: 18px; }
  .page-treatments .condition-marker-label { font-size: .72rem; }
}

@media (max-width: 920px) {
  /* Same collapse strategy as .page-liver-health .condition-map: flanking
     columns need real horizontal width either side of the image, so below
     this the image moves on top (full row via order:-1) and each column
     stacks full-width beneath it. Floating tooltips can't stay safely
     on-screen once markers sit close to the viewport edge in that stacked
     layout, so the tooltip expands inline below the marker instead. */
  .page-treatments .condition-map-figure { flex-wrap: wrap; gap: 20px; }
  .page-treatments .condition-map-image { order: -1; flex-basis: 100%; width: min(260px, 55vw); margin: 0 auto; }
  .page-treatments .condition-map-column { flex: 1 1 260px; max-width: none; flex-direction: column; align-items: stretch; }
  .page-treatments .condition-map-column-left .condition-marker { flex-direction: row; text-align: left; }

  .page-treatments .condition-tooltip {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; width: auto; max-height: 0; padding: 0 16px;
    margin-top: 0; border-width: 0; overflow: hidden;
    transition: max-height .2s ease, padding .2s ease, margin-top .2s ease;
  }
  .page-treatments .condition-tooltip::after { display: none; }
  .page-treatments .condition-marker-wrap:hover .condition-tooltip,
  .page-treatments .condition-marker-wrap:focus-within .condition-tooltip {
    max-height: 480px; padding: 16px; margin-top: 8px; border-width: 1px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-treatments * { scroll-behavior: auto !important; transition: none !important; }
}

/* ==========================================================================
   Liver Health page (Liver-Health.html)
   Entirely scoped under .page-liver-health, same isolation pattern as
   .page-treatments, so its classes never collide with other pages that
   reuse identically-named classes at different values. Wrap this page's
   body content in <div class="page-liver-health">...</div> for these
   styles to apply. Reuses the same shared card/section/hero/faq/cta/footer
   system as .page-treatments; only classes unique to this page (symptom
   cards, care-panel, condition-card, factor-list, steps, tips-grid,
   referral) are new.
   ========================================================================== */

.page-liver-health {
  --green-950: #063c2e;
  --green-900: #07513d;
  --green-800: #0b624a;
  --green-700: #0f7859;
  --green-600: #17936b;
  --green-500: #28ad7f;
  --green-300: #81d6b3;
  --green-200: #b8e9d5;
  --green-100: #e1f6ed;
  --green-050: #f2fbf7;
  --sage: #dceadf;
  --cream: #fbfaf5;
  --warm: #f7f1e9;
  --pink: #dc6780;
  --pink-soft: #f9e9ed;
  --yellow: #f0c968;
  --ink: #152820;
  --muted: #5d7068;
  --line: #d9e8e0;
  --white: #ffffff;
  --shadow-sm: 0 10px 30px rgba(6, 60, 46, .08);
  --shadow-md: 0 24px 65px rgba(6, 60, 46, .13);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
  /* Matches the home page's own winning --container (1320px, set in its
     "vibrant palette override v3" section) so this page's wrapper is the
     same width as home.html's, instead of the narrower 1180px this
     content-writer template originally shipped with. */
  --container: 1320px;
  color: var(--ink);
  background: var(--white);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.page-liver-health, .page-liver-health * { box-sizing: border-box; }
.page-liver-health img, .page-liver-health svg { display: block; max-width: 100%; }
.page-liver-health a { color: inherit; }
.page-liver-health button, .page-liver-health input, .page-liver-health select, .page-liver-health textarea { font: inherit; }
.page-liver-health h1, .page-liver-health h2, .page-liver-health h3, .page-liver-health p { margin-top: 0; }
.page-liver-health h1, .page-liver-health h2, .page-liver-health h3 { line-height: 1.12; letter-spacing: -0.025em; }
/* H1/H2 sizing and weight matched to home.html's final tuned values
   (its ".hero-copy h1" and unscoped "h2" rules) so headings read at the
   same scale across pages. H1 also gets its own line-height/letter-spacing,
   overriding the shared h1/h2/h3 rule above (same specificity, later in
   source wins) since home's hero heading uses tighter values than the
   default. H3 already matched home's (1.18rem / weight 600) so it's
   unchanged. */
.page-liver-health h1 { font-size: clamp(2.5rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.page-liver-health h2 { font-size: clamp(1.95rem, 3.3vw, 3rem); font-weight: 650; }
.page-liver-health h3 { font-size: 1.18rem; font-weight: 600; }
.page-liver-health p { color: var(--muted); font-weight: 400; }

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

.page-liver-health .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.page-liver-health .button:hover { transform: translateY(-2px); }
.page-liver-health .button-primary { color: var(--white); background: var(--green-700); box-shadow: 0 10px 26px rgba(15, 120, 89, .18); }
.page-liver-health .button-primary:hover { background: var(--green-800); }
.page-liver-health .button-secondary { color: var(--green-800); background: var(--white); border-color: var(--green-300); }
.page-liver-health .button-secondary:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }
.page-liver-health .button-light { color: var(--green-900); background: var(--green-100); }


.page-liver-health .hero { position: relative; overflow: hidden; min-height: auto; padding: 0 0 78px; background: var(--cream); }
.page-liver-health .hero::before {
  display: block; content: ""; position: absolute; width: 480px; height: 480px; right: -150px; top: -180px;
  border-radius: 50%; background: rgba(184, 233, 213, .56);
}
.page-liver-health .hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.page-liver-health .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  color: var(--green-700); font-size: .82rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
.page-liver-health .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green-500); }
.page-liver-health .hero h1 { max-width: 680px; margin-bottom: 26px; }
.page-liver-health .hero h1 span { color: var(--green-700); }
/* Matched to home.html's ".hero-lead" (its hero paragraph) sizing/line-height/color.
   Note: ".hero-copy" here is applied directly to the hero <p> in this
   page's markup, unlike home.html where ".hero-copy" is a wrapper <div> —
   same class name, different role, harmless since both are scoped. */
.page-liver-health .hero-copy { max-width: 650px; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.62; color: #46554e; }
.page-liver-health .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page-liver-health .medical-note { margin-top: 22px; max-width: 680px; font-size: .88rem; color: #6b7e76; }

.page-liver-health .hero-art { min-height: 430px; display: grid; place-items: center; position: relative; }
.page-liver-health .orb { position: absolute; border-radius: 50%; }
.page-liver-health .orb.one { width: 330px; height: 330px; background: var(--green-100); right: 35px; top: 20px; }
.page-liver-health .orb.two { width: 210px; height: 210px; background: var(--sage); left: 25px; bottom: 20px; }
.page-liver-health .liver-visual {
  position: relative; width: min(520px, 100%); aspect-ratio: 1.05;
  border-radius: 42% 48% 40% 54% / 36% 38% 58% 60%;
  object-fit: cover; display: block;
  box-shadow: 0 32px 65px rgba(8, 81, 61, .21);
  transform: rotate(-4deg);
}
.page-liver-health .art-card {
  position: absolute; right: 0; bottom: 22px; width: 225px; padding: 18px;
  border: 1px solid rgba(255,255,255,.7); border-radius: 20px;
  background: rgba(255,255,255,.92); box-shadow: var(--shadow-md); backdrop-filter: blur(10px);
}
.page-liver-health .art-card strong { display: block; margin-bottom: 4px; color: var(--green-800); font-size: 1rem; }
.page-liver-health .art-card span { color: var(--muted); font-size: .86rem; }

.page-liver-health section { padding: 88px 0; }
.page-liver-health .section-soft { background: var(--green-050); }
.page-liver-health .section-cream { background: var(--cream); }
.page-liver-health .section-heading { max-width: 780px; margin-bottom: 38px; }
.page-liver-health .section-heading p { max-width: 710px; font-size: 1.04rem; }
.page-liver-health .section-heading.center { margin-inline: auto; text-align: center; }
.page-liver-health .section-kicker { display: block; margin-bottom: 10px; color: var(--green-700); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.page-liver-health .answer-panel {
  display: grid; grid-template-columns: .72fr 1.28fr; gap: 0; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--green-900); box-shadow: var(--shadow-md);
}
.page-liver-health .answer-question { padding: 42px; color: var(--white); background: rgba(255,255,255,.035); }
.page-liver-health .answer-question span { display: block; margin-bottom: 14px; color: var(--green-300); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.page-liver-health .answer-question h2 { margin-bottom: 0; color: var(--white); font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-liver-health .answer-copy { padding: 42px; background: var(--white); }
.page-liver-health .answer-copy > p:first-child { color: var(--ink); font-size: 1.08rem; font-weight: 500; }
.page-liver-health .symptom-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; }
.page-liver-health .symptom-tags span { padding: 8px 12px; border-radius: 999px; color: var(--green-900); background: var(--green-100); font-size: .88rem; font-weight: 600; }
.page-liver-health .note-line { padding-left: 16px; border-left: 3px solid var(--yellow); font-size: .92rem; }

.page-liver-health .grid { display: grid; gap: 20px; }
.page-liver-health .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.page-liver-health .card {
  height: 100%; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--white); box-shadow: 0 10px 34px rgba(6, 60, 46, .05);
}
.page-liver-health .card h3 { margin-bottom: 10px; }
.page-liver-health .card p:last-child { margin-bottom: 0; }
.page-liver-health .card-link { display: inline-flex; gap: 7px; margin-top: 14px; color: var(--green-700); text-decoration: none; font-weight: 600; font-size: .92rem; }
.page-liver-health .card-link:hover { text-decoration: underline; }

.page-liver-health .symptom-card { position: relative; padding-top: 74px; }
.page-liver-health .symptom-card .number {
  position: absolute; top: 24px; left: 26px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-800); color: var(--white); font-size: .82rem; font-weight: 700;
}

.page-liver-health .quiet-box { margin-top: 26px; padding: 22px 24px; border: 1px solid var(--green-200); border-radius: var(--radius-md); background: var(--green-050); }
.page-liver-health .quiet-box strong { color: var(--green-900); }
.page-liver-health .quiet-box p { margin: 6px 0 0; }

.page-liver-health .care-panel { border-radius: var(--radius-lg); overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.page-liver-health .care-row { display: grid; grid-template-columns: 180px 1fr; border-bottom: 1px solid var(--line); }
.page-liver-health .care-row:last-child { border-bottom: 0; }
.page-liver-health .care-type-label { padding: 30px; color: var(--green-900); background: var(--green-100); font-weight: 700; }
.page-liver-health .care-content { padding: 30px; }
.page-liver-health .check-list { margin: 0; padding: 0; list-style: none; }
.page-liver-health .check-list li { position: relative; padding-left: 26px; margin: 0 0 11px; color: var(--muted); }
.page-liver-health .check-list li:last-child { margin-bottom: 0; }
.page-liver-health .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-600); font-weight: 700; }
.page-liver-health .urgent .care-type-label { color: #7c3344; background: var(--pink-soft); }
.page-liver-health .urgent .check-list li::before { color: var(--pink); }

/* Condition tooltip map: a centered illustration flanked by two columns of
   6 icon markers each. Hovering (or focusing, for keyboard users) a marker
   reveals its own tooltip directly above it — pure CSS, no JS. Each
   tooltip is centered over its marker rather than extending further
   left/right off the outer columns, since the outermost markers sit close
   to the page edge and a wide tooltip stretching further outward could
   overflow the viewport. Collapses to image-on-top + compact 2-across
   columns below on narrower screens, since flanking columns need real
   width either side of the image. */
.page-liver-health .condition-map { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.page-liver-health .condition-map-figure { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; }
.page-liver-health .condition-map-image { flex: 0 0 auto; width: min(300px, 30vw); }
.page-liver-health .condition-map-image img {
  width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  border: 1px solid rgba(6, 60, 46, .08);
}
.page-liver-health .condition-map-column { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; max-width: 220px; }
.page-liver-health .condition-map-column-left { align-items: flex-end; }
.page-liver-health .condition-map-column-right { align-items: flex-start; }

.page-liver-health .condition-marker-wrap { position: relative; width: 100%; }
.page-liver-health .condition-marker-wrap:nth-child(3n+2) .condition-marker-icon { background: var(--pink-soft); }

.page-liver-health .condition-marker {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); font-family: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.page-liver-health .condition-map-column-left .condition-marker { flex-direction: row-reverse; text-align: right; }
.page-liver-health .condition-marker:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.page-liver-health .condition-marker-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--green-100); }
.page-liver-health .condition-marker-icon img { width: 20px; height: 20px; object-fit: contain; }
.page-liver-health .condition-marker-label { font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.25; }

.page-liver-health .condition-tooltip {
  position: absolute; bottom: calc(100% + 14px); left: 50%;
  transform: translate(-50%, 6px); z-index: 30; width: 260px; padding: 20px;
  border-radius: 18px; background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.page-liver-health .condition-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; background: var(--white); border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); border-radius: 0 0 3px 0; margin-top: -8px; rotate: 45deg;
}
.page-liver-health .condition-marker-wrap:hover .condition-tooltip,
.page-liver-health .condition-marker-wrap:focus-within .condition-tooltip {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.page-liver-health .condition-marker-wrap:hover .condition-marker,
.page-liver-health .condition-marker-wrap:focus-within .condition-marker {
  border-color: var(--green-500); box-shadow: var(--shadow-sm); background: var(--green-050);
}
/* Flipped variant: toggled by doc.js when there isn't enough room above the
   marker to show the tooltip without it running off the top of the viewport. */
.page-liver-health .condition-marker-wrap.tooltip-below .condition-tooltip {
  bottom: auto; top: calc(100% + 14px); transform: translate(-50%, -6px);
}
.page-liver-health .condition-marker-wrap.tooltip-below .condition-tooltip::after {
  top: auto; bottom: 100%; margin-top: 0; margin-bottom: -8px;
  border-right: none; border-bottom: none;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.page-liver-health .condition-tooltip-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 13px; background: var(--green-100); }
.page-liver-health .condition-tooltip-icon img { width: 24px; height: 24px; object-fit: contain; }
.page-liver-health .condition-tooltip h3 { font-size: 1rem; margin-bottom: 8px; }
.page-liver-health .condition-tooltip p { font-size: .88rem; margin-bottom: 10px; }

.page-liver-health .split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: start; }
.page-liver-health .sticky-copy { position: sticky; top: 115px; }
.page-liver-health .factor-list { display: grid; gap: 14px; }
.page-liver-health .factor-item { display: grid; grid-template-columns: 46px 1fr; gap: 17px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.page-liver-health .factor-item b { display: block; margin-bottom: 4px; color: var(--ink); }
.page-liver-health .factor-item p { margin: 0; font-size: .93rem; }
.page-liver-health .factor-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--green-100); color: var(--green-800); font-weight: 700; }

.page-liver-health .steps { counter-reset: step; display: grid; gap: 16px; }
.page-liver-health .step { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: start; padding: 24px; border-radius: 19px; background: var(--white); border: 1px solid var(--line); }
.page-liver-health .step::before { counter-increment: step; content: counter(step); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--green-700); font-weight: 700; }
.page-liver-health .step h3 { margin: 4px 0 7px; }
.page-liver-health .step p { margin-bottom: 0; }

.page-liver-health .tips-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
.page-liver-health .tip { padding: 22px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.page-liver-health .tip b { display: block; margin: 12px 0 7px; }
.page-liver-health .tip span { color: var(--muted); font-size: .9rem; }
.page-liver-health .tip-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: var(--green-800); background: var(--green-100); font-weight: 700; }

.page-liver-health .referral {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; padding: 44px;
  border-radius: var(--radius-lg); color: var(--white);
  background: linear-gradient(135deg, var(--green-900), var(--green-700));
  box-shadow: var(--shadow-md);
}
.page-liver-health .referral h2 { margin-bottom: 16px; color: var(--white); }
.page-liver-health .referral p { color: rgba(255,255,255,.79); }
.page-liver-health .referral .button { background: var(--white); color: var(--green-900); }
.page-liver-health .role-list { display: grid; gap: 12px; }
.page-liver-health .role { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.1); }
.page-liver-health .role b { display: block; margin-bottom: 3px; }
.page-liver-health .role span { color: rgba(255,255,255,.72); font-size: .88rem; }

.page-liver-health .faq-list { display: grid; gap: 12px; max-width: 900px; margin: 0 auto; }
.page-liver-health details { border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.page-liver-health summary { position: relative; padding: 21px 55px 21px 22px; cursor: pointer; list-style: none; font-weight: 600; }
.page-liver-health summary::-webkit-details-marker { display: none; }
.page-liver-health summary::after { content: "+"; position: absolute; right: 22px; top: 15px; color: var(--green-700); font-size: 1.65rem; font-weight: 400; }
.page-liver-health details[open] summary::after { content: "–"; }
.page-liver-health details p { padding: 0 22px 21px; margin: 0; }


.page-liver-health .cta-section { padding: 78px 0; background: var(--cream); }
.page-liver-health .cta-box { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 44px; border-radius: var(--radius-lg); background: var(--green-100); }
.page-liver-health .cta-box h2 { margin-bottom: 12px; font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-liver-health .cta-box p { max-width: 720px; margin-bottom: 0; }
.page-liver-health .cta-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-end; }

.page-liver-health .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: #fff; text-decoration: none; box-shadow: var(--shadow-md); font-weight: 700; }

@media (max-width: 980px) {
  .page-liver-health .hero-grid, .page-liver-health .split, .page-liver-health .referral { grid-template-columns: 1fr; }
  .page-liver-health .hero-art { min-height: 360px; }
  .page-liver-health .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .page-liver-health .tips-grid { grid-template-columns: repeat(3, 1fr); }
  .page-liver-health .answer-panel { grid-template-columns: 1fr; }
  .page-liver-health .sticky-copy { position: static; }
  .page-liver-health .cta-box { grid-template-columns: 1fr; }
  .page-liver-health .cta-actions { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .page-liver-health .container { width: min(calc(100% - 28px), var(--container)); }
  .page-liver-health .hero { padding: 0 0 58px; }
  .page-liver-health .hero-grid { gap: 28px; }
  .page-liver-health .hero-art { min-height: 290px; }
  .page-liver-health .liver-visual { width: 270px; }
  .page-liver-health .art-card { width: 190px; padding: 14px; right: 2px; bottom: 0; }
  .page-liver-health section { padding: 64px 0; }
  .page-liver-health .grid-3, .page-liver-health .tips-grid { grid-template-columns: 1fr; }
  .page-liver-health .answer-question, .page-liver-health .answer-copy, .page-liver-health .referral, .page-liver-health .cta-box { padding: 28px; }
  .page-liver-health .care-row { grid-template-columns: 1fr; }
  .page-liver-health .care-type-label, .page-liver-health .care-content { padding: 22px; }
  .page-liver-health .hero-actions .button { width: 100%; }
  .page-liver-health .condition-map-image { width: min(220px, 68vw); }
  .page-liver-health .condition-marker { padding: 8px 10px; }
  .page-liver-health .condition-marker-icon { width: 32px; height: 32px; }
  .page-liver-health .condition-marker-icon img { width: 18px; height: 18px; }
  .page-liver-health .condition-marker-label { font-size: .72rem; }
}

@media (max-width: 920px) {
  /* Flanking columns need real horizontal width either side of the image;
     below this, wrap so the image sits on top (full row via order:-1) and
     each column stacks full-width beneath it instead. A floating tooltip
     centered on the marker can no longer stay safely on-screen once markers
     sit close to the viewport edge, so it expands inline below the marker
     instead of floating over the page (avoids off-screen cropping). */
  .page-liver-health .condition-map-figure { flex-wrap: wrap; gap: 20px; }
  .page-liver-health .condition-map-image { order: -1; flex-basis: 100%; width: min(260px, 55vw); margin: 0 auto; }
  .page-liver-health .condition-map-column { flex: 1 1 260px; max-width: none; flex-direction: column; align-items: stretch; }
  .page-liver-health .condition-map-column-left .condition-marker { flex-direction: row; text-align: left; }

  .page-liver-health .condition-tooltip {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; width: auto; max-height: 0; padding: 0 16px;
    margin-top: 0; border-width: 0; overflow: hidden;
    transition: max-height .2s ease, padding .2s ease, margin-top .2s ease;
  }
  .page-liver-health .condition-tooltip::after { display: none; }
  .page-liver-health .condition-marker-wrap:hover .condition-tooltip,
  .page-liver-health .condition-marker-wrap:focus-within .condition-tooltip {
    max-height: 480px; padding: 16px; margin-top: 8px; border-width: 1px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-liver-health * { scroll-behavior: auto !important; transition: none !important; }
}

/* ==========================================================================
   Patient Resources page (patient-resources.html)
   Rebuilt as a simpler landing hub that links out to separate topic pages
   (FAQs, patient guides, downloadable resources, preparing for surgery,
   recovery, organ donation, international patients) instead of the earlier
   single mega-page made of 9 in-page subpage sections. Entirely scoped
   under .page-patient-resources with its own color tokens, matching the
   isolation pattern used by every other page. Header/nav/footer are
   omitted from the markup and this CSS — handled by the shared Elementor
   template parts.
   ========================================================================== */

.page-patient-resources {
  --ink:#193129; --muted:#60706a; --green:#1f6d4b; --green2:#398a62;
  --mint:#eaf6ef; --mint2:#f4faf6; --cream:#fbfaf6; --white:#fff;
  --line:#dbe7e0; --pink:#c85f83; --pink-soft:#faedf2;
  --shadow:0 12px 34px rgba(25,49,41,.07); --radius:22px; --max:1320px;
}
.page-patient-resources, .page-patient-resources * { box-sizing: border-box; }
.page-patient-resources {
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.page-patient-resources a { color: inherit; }
.page-patient-resources .container { width: min(calc(100% - 54px), var(--max)); margin-inline: auto; }

.page-patient-resources .hero {
  padding: 84px 0 66px;
  background:
    radial-gradient(circle at 88% 10%, rgba(139,205,166,.24), transparent 28%),
    radial-gradient(circle at 75% 80%, rgba(47,138,96,.08), transparent 25%);
}
.page-patient-resources .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 62px; align-items: center; }
.page-patient-resources .eyebrow { display: inline-flex; gap: 8px; align-items: center; color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 18px; }
.page-patient-resources .eyebrow:before { content: ""; width: 8px; height: 8px; background: var(--green2); border-radius: 50%; }
.page-patient-resources h1 { font-size: clamp(42px,5.8vw,70px); line-height: 1.04; letter-spacing: -.045em; font-weight: 640; margin: 0 0 24px; }
.page-patient-resources h1 em { font-style: normal; color: var(--green); }
.page-patient-resources .hero-copy { max-width: 720px; margin: 0; font-size: 18px; color: var(--muted); }

.page-patient-resources .hero-art { min-height: 430px; display: grid; place-items: center; position: relative; }
.page-patient-resources .orb { position: absolute; border-radius: 50%; }
.page-patient-resources .orb.one { width: 330px; height: 330px; background: var(--mint); right: 35px; top: 20px; }
.page-patient-resources .orb.two { width: 210px; height: 210px; background: var(--mint2); left: 25px; bottom: 20px; }
.page-patient-resources .hero-visual-img {
  position: relative; width: min(520px, 100%); aspect-ratio: 1.05;
  border-radius: 42% 48% 40% 54% / 36% 38% 58% 60%;
  object-fit: cover; display: block;
  box-shadow: 0 32px 65px rgba(25,49,41,.21);
  transform: rotate(-4deg);
}

.page-patient-resources .hero-panel {
  display: block; max-width: 560px; margin-top: 30px;
  border-radius: 22px; padding: 26px 28px; background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 8px 25px rgba(25,49,41,.05);
}
.page-patient-resources .hero-panel small {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; margin-bottom: 12px; border-radius: 999px;
  background: var(--mint);
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--green);
}
.page-patient-resources .hero-panel small:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green2); }
.page-patient-resources .hero-panel h2 { font-size: 21px; line-height: 1.28; font-weight: 620; margin: 0 0 8px; }
.page-patient-resources .hero-panel p { color: var(--muted); margin: 0; font-size: 15px; }

.page-patient-resources section { padding: 78px 0; }
.page-patient-resources .section-kicker { color: var(--green); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.page-patient-resources .section-title { font-size: clamp(32px,4vw,48px); line-height: 1.12; letter-spacing: -.03em; font-weight: 610; margin: 0 0 16px; }
.page-patient-resources .section-intro { max-width: 820px; margin: 0 0 36px; color: var(--muted); font-size: 17px; }

.page-patient-resources .path-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.page-patient-resources .path-card { background: var(--white); border: 1px solid var(--line); border-radius: 26px; padding: 30px; box-shadow: 0 8px 25px rgba(25,49,41,.04); min-height: 300px; display: flex; flex-direction: column; }
.page-patient-resources .path-top { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.page-patient-resources .icon { width: 54px; height: 54px; border-radius: 17px; background: var(--mint); display: flex; align-items: center; justify-content: center; flex: 0 0 54px; color: var(--green); }
.page-patient-resources .icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-patient-resources .path-card h3 { font-size: 25px; line-height: 1.18; font-weight: 610; margin: 0; }
.page-patient-resources .path-card > p { color: var(--muted); margin: 0 0 21px; font-size: 15px; }

.page-patient-resources .link-list { display: grid; gap: 0; margin-top: auto; border-top: 1px solid var(--line); }
.page-patient-resources .link-list a { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.page-patient-resources .link-list a:last-child { border-bottom: 0; }
.page-patient-resources .link-list a span:last-child { color: var(--green); }
.page-patient-resources .link-list a:hover { color: var(--green); }

.page-patient-resources .soft { background: var(--mint2); }

.page-patient-resources .prepare-wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 30px; align-items: stretch; }
.page-patient-resources .prepare-copy { background: var(--green); color: white; border-radius: 28px; padding: 36px; }
.page-patient-resources .prepare-copy h3 { color: #fff; font-size: 31px; line-height: 1.15; font-weight: 590; margin: 0 0 14px; }
.page-patient-resources .prepare-copy p { color: rgba(255,255,255,.8); margin: 0; }

.page-patient-resources .checklist { background: var(--white); border: 1px solid var(--line); border-radius: 28px; padding: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 26px; }
.page-patient-resources .check { display: flex; gap: 12px; align-items: flex-start; }
.page-patient-resources .tick { width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: var(--green); display: flex; align-items: center; justify-content: center; flex: 0 0 28px; font-weight: 700; }
.page-patient-resources .check strong { display: block; font-size: 14px; margin-bottom: 4px; }
.page-patient-resources .check span { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; }

.page-patient-resources .feature-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.page-patient-resources .feature { border-radius: 26px; padding: 32px; background: white; border: 1px solid var(--line); min-height: 290px; }
.page-patient-resources .feature.pink { background: var(--pink-soft); border-color: #f0d9e2; }
.page-patient-resources .feature h3 { font-size: 28px; line-height: 1.18; margin: 0 0 12px; font-weight: 600; }
.page-patient-resources .feature p { color: var(--muted); margin: 0 0 22px; max-width: 650px; }

.page-patient-resources .text-link { color: var(--green); text-decoration: none; font-size: 14px; font-weight: 700; }
.page-patient-resources .pink .text-link { color: #a84969; }
.page-patient-resources .text-link:hover { text-decoration: underline; }

.page-patient-resources .blog-placeholder { background: var(--white); border: 1px solid var(--line); border-radius: 26px; padding: 32px; display: flex; justify-content: space-between; align-items: center; gap: 30px; box-shadow: 0 8px 25px rgba(25,49,41,.04); }
.page-patient-resources .blog-placeholder h3 { margin: 0 0 8px; font-size: 25px; font-weight: 600; }
.page-patient-resources .blog-placeholder p { margin: 0; max-width: 720px; color: var(--muted); font-size: 15px; }

.page-patient-resources .closing { background: var(--green); color: #fff; border-radius: 30px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.page-patient-resources .closing h2 { color: #fff; font-size: 34px; font-weight: 590; line-height: 1.15; margin: 0 0 10px; }
.page-patient-resources .closing p { margin: 0; color: rgba(255,255,255,.8); max-width: 670px; }
.page-patient-resources .closing a { padding: 14px 21px; border-radius: 999px; background: white; color: var(--green); text-decoration: none; white-space: nowrap; font-weight: 700; }

.page-patient-resources .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; text-decoration: none; box-shadow: var(--shadow); font-weight: 700; }

@media (max-width: 960px) {
  .page-patient-resources .hero-grid, .page-patient-resources .prepare-wrap, .page-patient-resources .feature-grid { grid-template-columns: 1fr; }
  .page-patient-resources .path-grid { grid-template-columns: 1fr; }
  .page-patient-resources .hero-art { min-height: 360px; }
}

@media (max-width: 660px) {
  .page-patient-resources .container { width: min(calc(100% - 28px), var(--max)); }
  .page-patient-resources .hero { padding: 52px 0 42px; }
  .page-patient-resources h1 { font-size: 44px; }
  .page-patient-resources section { padding: 56px 0; }
  .page-patient-resources .hero-art { min-height: 290px; }
  .page-patient-resources .hero-visual-img { width: 270px; }
  .page-patient-resources .hero-panel { padding: 28px; }
  .page-patient-resources .checklist { grid-template-columns: 1fr; }
  .page-patient-resources .blog-placeholder, .page-patient-resources .closing { padding: 32px 26px; flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Research & Publications page (research.html)
   Entirely scoped under .page-research, same isolation pattern and same
   tuned color tokens/type scale as .page-conditions / .page-treatments /
   .page-liver-health / .page-patient-resources. Rebuilt to use the exact
   same shared component library as the rest of the site (hero-visual card
   graphic, answer-panel, card/card-icon grids, split/sticky-copy,
   quiet-box, callout, section-dark, faq-list, sources, cta-section)
   instead of a standalone article layout, so the page reads as part of
   the same site. Adds two components unique to this page's content: a
   stacked .metrics/.metric list for the citation/h-index figures, and a
   .pub-card variant of .card for the publication list.
   ========================================================================== */

.page-research {
  --green-950: #063c2e; --green-900: #07513d; --green-800: #0b624a; --green-700: #0f7859;
  --green-600: #17936b; --green-500: #28ad7f; --green-400: #54c79b; --green-300: #81d6b3;
  --green-200: #b8e9d5; --green-100: #e1f6ed; --green-050: #f2fbf7;
  --sage: #dceadf; --cream: #fbfaf5; --warm: #f7f1e9; --pink: #d86d84; --pink-soft: #f9e9ed;
  --yellow: #f0c968; --ink: #152820; --muted: #5d7068; --line: #d9e8e0; --white: #fff;
  --shadow-sm: 0 10px 30px rgba(6,60,46,.07); --shadow-md: 0 24px 65px rgba(6,60,46,.12);
  --radius-sm: 14px; --radius-md: 22px; --radius-lg: 34px; --container: 1320px;
}
.page-research, .page-research * { box-sizing: border-box; }
.page-research {
  color: var(--ink); background: var(--white);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility;
}
.page-research img, .page-research svg { display: block; max-width: 100%; }
.page-research a { color: inherit; }
.page-research button, .page-research input, .page-research select, .page-research textarea { font: inherit; }
.page-research h1, .page-research h2, .page-research h3, .page-research h4, .page-research p { margin-top: 0; }
.page-research h1, .page-research h2, .page-research h3 { line-height: 1.12; letter-spacing: -0.025em; }
.page-research h1 { font-size: clamp(2.5rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.page-research h2 { font-size: clamp(1.95rem, 3.3vw, 3rem); font-weight: 650; }
.page-research h3 { font-size: 1.18rem; font-weight: 600; }
.page-research h4 { font-size: 1.05rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.018em; margin: 0 0 8px; }
.page-research p { color: var(--muted); font-weight: 400; }
.page-research .container { width: min(calc(100% - 54px), var(--container)); margin-inline: auto; }

.page-research .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.page-research .button:hover { transform: translateY(-2px); }
.page-research .button-primary { color: var(--white); background: var(--green-700); box-shadow: 0 10px 26px rgba(15,120,89,.18); }
.page-research .button-primary:hover { background: var(--green-800); }
.page-research .button-secondary { color: var(--green-800); background: var(--white); border-color: var(--green-300); }
.page-research .button-secondary:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }

.page-research .hero { position: relative; overflow: hidden; padding: 0 0 52px; background: var(--cream); }
.page-research .hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: -210px; border-radius: 50%; background: rgba(184,233,213,.60); }
.page-research .hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.page-research .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--green-700); font-size: .82rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.page-research .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green-500); }
.page-research .hero h1 { max-width: 720px; margin-bottom: 26px; }
.page-research .hero-copy { max-width: 660px; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.62; color: #46554e; }
.page-research .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page-research .medical-note { margin-top: 20px; max-width: 710px; font-size: .88rem; color: #6b7e76; }

.page-research .hero-art { min-height: 480px; display: grid; place-items: center; position: relative; }
.page-research .hero-visual { position: relative; width: min(430px, 100%); }
.page-research .hero-visual-card {
  position: relative; border-radius: 32px; padding: 38px 32px 32px; text-align: center;
  background: linear-gradient(165deg, #ffffff 0%, var(--cream) 100%);
  border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-md);
}
.page-research .hero-visual-sparkle { position: absolute; top: 24px; right: 30px; color: #b9975b; font-size: 1.3rem; line-height: 1; }
.page-research .hero-visual-svg { width: 100%; max-width: 300px; margin: 4px auto 22px; display: block; }
.page-research .hero-visual-kicker { margin: 0 0 8px; color: #b9975b; font-weight: 700; font-size: .84rem; letter-spacing: .02em; }
.page-research .hero-visual-card h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.25; margin-bottom: 12px; color: var(--green-950); }
.page-research .hero-visual-card > p { margin: 0; color: var(--muted); font-size: .96rem; }
.page-research .mini-stat {
  position: absolute; z-index: 3; min-width: 172px; padding: 14px 16px; text-align: left;
  border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.page-research .mini-stat strong { display: block; color: var(--green-950); font-size: 1.05rem; }
.page-research .mini-stat span { display: block; color: var(--muted); font-size: .82rem; }
.page-research .mini-stat.stat-one { left: -16px; bottom: 0px; }
.page-research .mini-stat.stat-two { right: -10px; top: 44px; }

.page-research section { padding: 88px 0; }
.page-research .section-soft { background: var(--green-050); }
.page-research .section-cream { background: var(--cream); }
.page-research .section-dark { background: var(--green-950); color: var(--white); }
.page-research .section-dark p { color: rgba(255,255,255,.76); }
.page-research .section-dark .section-heading h2 { color: var(--white); }
.page-research .section-dark .section-kicker { color: var(--green-300); }
.page-research .section-dark .card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none; }
.page-research .section-dark .card h3 { color: var(--white); }
.page-research .section-dark .card p { color: rgba(255,255,255,.72); }
.page-research .section-dark .card-icon { background: rgba(255,255,255,.14); color: var(--white); }
.page-research .section-heading { max-width: 800px; margin-bottom: 38px; }
.page-research .section-heading p { max-width: 730px; font-size: 1.04rem; }
.page-research .section-heading.center { margin-inline: auto; text-align: center; }
.page-research .section-kicker { display: block; margin-bottom: 10px; color: var(--green-700); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.page-research .grid { display: grid; gap: 20px; }
.page-research .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-research .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-research .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-research .card { height: 100%; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 10px 34px rgba(6,60,46,.05); }
.page-research .card-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 15px; color: var(--green-800); background: var(--green-100); font-size: .9rem; font-weight: 700; }
.page-research .card-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-research .card h3, .page-research .card h4 { margin-bottom: 10px; }
.page-research .card p:last-child { margin-bottom: 0; }
.page-research .card-link { display: inline-flex; gap: 7px; margin-top: 14px; color: var(--green-700); text-decoration: none; font-weight: 600; font-size: .92rem; }
.page-research .card-link:hover { text-decoration: underline; }
.page-research .tag { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: .76rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 14px; }

.page-research .pub-card { display: flex; flex-direction: column; }
.page-research .pub-card .pub-meta { margin: 0 0 6px; font-size: .82rem; color: var(--muted); font-weight: 600; }
.page-research .pub-card h3 { font-size: 1.05rem; line-height: 1.4; }
.page-research .pub-card .card-link { margin-top: auto; padding-top: 14px; }
.page-research .evidence-card .quiet-box { margin-top: 16px; padding: 16px 18px; font-size: .92rem; }

.page-research .answer-panel { display: grid; grid-template-columns: .72fr 1.28fr; overflow: hidden; border-radius: var(--radius-lg); background: var(--green-900); box-shadow: var(--shadow-md); }
.page-research .answer-question { padding: 42px; color: var(--white); background: rgba(255,255,255,.035); }
.page-research .answer-question span { display: block; margin-bottom: 14px; color: var(--green-300); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.page-research .answer-question h2 { margin-bottom: 0; color: var(--white); font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-research .answer-copy { padding: 42px; background: var(--white); }
.page-research .answer-copy > p:first-child { color: var(--ink); font-size: 1.08rem; font-weight: 500; }
.page-research .answer-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; }
.page-research .answer-tags span { padding: 8px 12px; border-radius: 999px; color: var(--green-900); background: var(--green-100); font-size: .88rem; font-weight: 600; }

.page-research .split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: start; }
.page-research .sticky-copy { position: sticky; top: 115px; }
.page-research .check-list { margin: 20px 0 0; padding: 0; list-style: none; }
.page-research .check-list li { position: relative; padding-left: 26px; margin: 0 0 11px; color: var(--muted); font-weight: 600; }
.page-research .check-list li:last-child { margin-bottom: 0; }
.page-research .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-600); font-weight: 700; }
.page-research .quiet-box { margin-top: 24px; padding: 22px 24px; border: 1px solid var(--green-200); border-radius: var(--radius-md); background: var(--green-050); }
.page-research .quiet-box strong { color: var(--green-900); }
.page-research .quiet-box p { margin: 6px 0 0; }

.page-research .metrics { display: grid; grid-template-columns: 1fr; gap: 14px; }
.page-research .metric { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; min-height: 100px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 10px 34px rgba(6,60,46,.05); }
.page-research .metric-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: var(--green-100); color: var(--green-800); }
.page-research .metric-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-research .metric strong { display: block; font-size: 1.65rem; line-height: 1; font-weight: 700; color: var(--green-900); margin-bottom: 4px; }
.page-research .metric span { font-size: .86rem; color: var(--muted); }

.page-research .callout { padding: 36px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--green-900), var(--green-700)); color: var(--white); box-shadow: var(--shadow-md); }
.page-research .callout .tag { background: rgba(255,255,255,.14); color: var(--white); }
.page-research .callout h2, .page-research .callout h3 { color: var(--white); }
.page-research .callout h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; margin-bottom: 6px; }
.page-research .callout p { color: rgba(255,255,255,.82); }
.page-research .callout .journal-line { color: var(--green-200); font-weight: 700; font-size: .92rem; margin: -4px 0 20px; }
.page-research .callout .button { background: var(--white); color: var(--green-900); }
.page-research .callout .cta-actions { margin-top: 24px; justify-content: flex-start; }

.page-research .faq-list { display: grid; gap: 12px; max-width: 940px; margin: 0 auto; }
.page-research details { border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.page-research summary { position: relative; padding: 21px 55px 21px 22px; cursor: pointer; list-style: none; font-weight: 600; }
.page-research summary::-webkit-details-marker { display: none; }
.page-research summary::after { content: "+"; position: absolute; right: 22px; top: 15px; color: var(--green-700); font-size: 1.65rem; font-weight: 400; }
.page-research details[open] summary::after { content: "–"; }
.page-research details p { padding: 0 22px 21px; margin: 0; }

.page-research .sources { padding: 24px; border: 1px dashed var(--green-300); border-radius: 18px; background: var(--green-050); }
.page-research .sources h3, .page-research .sources h4 { margin-bottom: 10px; }
.page-research .sources ul { margin: 0; padding-left: 20px; color: var(--muted); }
.page-research .sources a { color: var(--green-700); }

.page-research .cta-section { padding: 78px 0; background: var(--cream); }
.page-research .cta-box { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 44px; border-radius: var(--radius-lg); background: var(--green-100); }
.page-research .cta-box h2 { margin-bottom: 12px; font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-research .cta-box p { max-width: 720px; margin-bottom: 0; }
.page-research .cta-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-end; }

.page-research .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: #fff; text-decoration: none; box-shadow: var(--shadow-md); font-weight: 700; }

@media (max-width: 980px) {
  .page-research .hero-grid, .page-research .split { grid-template-columns: 1fr; }
  .page-research .hero-art { min-height: 350px; }
  .page-research .grid-4, .page-research .grid-3, .page-research .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .page-research .answer-panel { grid-template-columns: 1fr; }
  .page-research .sticky-copy { position: static; }
  .page-research .cta-box { grid-template-columns: 1fr; }
  .page-research .cta-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .page-research .container { width: min(calc(100% - 28px), var(--container)); }
  .page-research .hero { padding: 0 0 58px; }
  .page-research .hero-art { min-height: 300px; }
  .page-research .hero-visual { transform: scale(.85); }
  .page-research .hero-actions .button { width: 100%; }
  .page-research section { padding: 56px 0; }
  .page-research .grid-4, .page-research .grid-3, .page-research .grid-2 { grid-template-columns: 1fr; }
  .page-research .answer-question, .page-research .answer-copy { padding: 29px; }
  .page-research .cta-box { padding: 30px; }
  .page-research .callout { padding: 26px; }
}

/* ==========================================================================
   Conditions Hub page (conditions.html)
   Entirely scoped under .page-conditions, same isolation pattern and same
   tuned color tokens/type scale as .page-research / .page-treatments /
   .page-liver-health / .page-patient-resources. Reuses the same shared
   component library proven on research.html (hero-visual card graphic,
   card, answer-panel, split, faq-list, sources, cta-section) and adds the
   few components unique to this page: a dark .section-dark band for the
   assessment steps, plain (non-checkmark) condition lists, an outline
   button variant for dark panels, a two-panel .panel-grid, and linked
   pathway cards.
   ========================================================================== */

.page-conditions {
  --green-950: #063c2e; --green-900: #07513d; --green-800: #0b624a; --green-700: #0f7859;
  --green-600: #17936b; --green-500: #28ad7f; --green-400: #54c79b; --green-300: #81d6b3;
  --green-200: #b8e9d5; --green-100: #e1f6ed; --green-050: #f2fbf7;
  --sage: #dceadf; --cream: #fbfaf5; --warm: #f7f1e9; --pink: #d86d84; --pink-soft: #f9e9ed;
  --yellow: #f0c968; --ink: #152820; --muted: #5d7068; --line: #d9e8e0; --white: #fff;
  --shadow-sm: 0 10px 30px rgba(6,60,46,.07); --shadow-md: 0 24px 65px rgba(6,60,46,.12);
  --radius-sm: 14px; --radius-md: 22px; --radius-lg: 34px; --container: 1320px;
}
.page-conditions, .page-conditions * { box-sizing: border-box; }
.page-conditions {
  color: var(--ink); background: var(--white);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility;
}
.page-conditions img, .page-conditions svg { display: block; max-width: 100%; }
.page-conditions a { color: inherit; }
.page-conditions button, .page-conditions input, .page-conditions select, .page-conditions textarea { font: inherit; }
.page-conditions h1, .page-conditions h2, .page-conditions h3, .page-conditions h4, .page-conditions p { margin-top: 0; }
.page-conditions h1, .page-conditions h2, .page-conditions h3 { line-height: 1.12; letter-spacing: -0.025em; }
.page-conditions h1 { font-size: clamp(2.5rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.page-conditions h2 { font-size: clamp(1.95rem, 3.3vw, 3rem); font-weight: 650; }
.page-conditions h3 { font-size: 1.18rem; font-weight: 600; }
.page-conditions h4 { font-size: 1.05rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.018em; margin: 0 0 8px; }
.page-conditions p { color: var(--muted); font-weight: 400; }
.page-conditions .container { width: min(calc(100% - 54px), var(--container)); margin-inline: auto; }

.page-conditions .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.page-conditions .button:hover { transform: translateY(-2px); }
.page-conditions .button-primary { color: var(--white); background: var(--green-700); box-shadow: 0 10px 26px rgba(15,120,89,.18); }
.page-conditions .button-primary:hover { background: var(--green-800); }
.page-conditions .button-secondary { color: var(--green-800); background: var(--white); border-color: var(--green-300); }
.page-conditions .button-secondary:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }
.page-conditions .button-outline { color: var(--white); background: transparent; border-color: rgba(255,255,255,.4); }
.page-conditions .button-outline:hover { border-color: rgba(255,255,255,.75); }

.page-conditions .hero { position: relative; overflow: hidden; padding: 0 0 52px; background: var(--cream); }
.page-conditions .hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: -210px; border-radius: 50%; background: rgba(184,233,213,.60); }
.page-conditions .hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.page-conditions .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--green-700); font-size: .82rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.page-conditions .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green-500); }
.page-conditions .hero h1 { max-width: 720px; margin-bottom: 26px; }
.page-conditions .hero-copy { max-width: 660px; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.62; color: #46554e; }
.page-conditions .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page-conditions .medical-note { margin-top: 20px; max-width: 710px; font-size: .88rem; color: #6b7e76; }

.page-conditions .hero-art { min-height: 480px; display: grid; place-items: center; position: relative; }
.page-conditions .hero-visual { position: relative; width: min(430px, 100%); }
.page-conditions .hero-visual-card {
  position: relative; border-radius: 32px; padding: 38px 32px 32px; text-align: center;
  background: linear-gradient(165deg, #ffffff 0%, var(--cream) 100%);
  border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-md);
}
.page-conditions .hero-visual-sparkle { position: absolute; top: 24px; right: 30px; color: #b9975b; font-size: 1.3rem; line-height: 1; }
.page-conditions .hero-visual-svg { width: 100%; max-width: 400px; margin: 4px auto 22px; display: block; }
.page-conditions .hero-visual-kicker { margin: 0 0 8px; color: #b9975b; font-weight: 700; font-size: .84rem; letter-spacing: .02em; }
.page-conditions .hero-visual-card h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.25; margin-bottom: 12px; color: var(--green-950); }
.page-conditions .hero-visual-card > p { margin: 0; color: var(--muted); font-size: .96rem; }
.page-conditions .mini-stat {
  position: absolute; z-index: 3; min-width: 172px; padding: 14px 16px; text-align: left;
  border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.page-conditions .mini-stat strong { display: block; color: var(--green-950); font-size: 1.05rem; }
.page-conditions .mini-stat span { display: block; color: var(--muted); font-size: .82rem; }
.page-conditions .mini-stat.stat-one { left: -16px; bottom: 0px; }
.page-conditions .mini-stat.stat-two { right: -10px; top: 44px; }

.page-conditions section { padding: 88px 0; }
.page-conditions .section-cream { background: var(--cream); }
.page-conditions .section-dark { background: var(--green-950); color: var(--white); }
.page-conditions .section-dark p { color: rgba(255,255,255,.76); }
.page-conditions .section-dark .section-heading h2 { color: var(--white); }
.page-conditions .section-dark .section-kicker { color: var(--green-300); }
.page-conditions .section-dark .card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none; }
.page-conditions .section-dark .card h3 { color: var(--white); }
.page-conditions .section-dark .card p { color: rgba(255,255,255,.72); }
.page-conditions .section-dark .card-icon { background: rgba(255,255,255,.14); color: var(--white); }
.page-conditions .section-heading { max-width: 800px; margin-bottom: 38px; }
.page-conditions .section-heading p { max-width: 730px; font-size: 1.04rem; }
.page-conditions .section-heading.center { margin-inline: auto; text-align: center; }
.page-conditions .section-kicker { display: block; margin-bottom: 10px; color: var(--green-700); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.page-conditions .grid { display: grid; gap: 20px; }
.page-conditions .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-conditions .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-conditions .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-conditions .card { height: 100%; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 10px 34px rgba(6,60,46,.05); }
.page-conditions .card-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 15px; color: var(--green-800); background: var(--green-100); font-size: .9rem; font-weight: 700; }
.page-conditions .card-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.page-conditions .card h3, .page-conditions .card h4 { margin-bottom: 10px; }
.page-conditions .card p:last-child { margin-bottom: 0; }
.page-conditions .card-link { display: inline-flex; gap: 7px; margin-top: 14px; color: var(--green-700); text-decoration: none; font-weight: 600; font-size: .92rem; }
.page-conditions .card-link:hover { text-decoration: underline; }
.page-conditions .plain-list { margin: 18px 0 0; padding-left: 18px; color: #42564f; }
.page-conditions .plain-list li { margin: 0 0 6px; }
.page-conditions .plain-list li:last-child { margin-bottom: 0; }
.page-conditions .condition-card { display: flex; flex-direction: column; }
.page-conditions .condition-card .card-link { margin-top: auto; padding-top: 14px; }

.page-conditions .pathway-link-card { display: block; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.page-conditions .pathway-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.page-conditions .pathway-link-card p { margin-bottom: 0; }

.page-conditions .answer-panel { display: grid; grid-template-columns: .72fr 1.28fr; overflow: hidden; border-radius: var(--radius-lg); background: var(--green-900); box-shadow: var(--shadow-md); }
.page-conditions .answer-question { padding: 42px; color: var(--white); background: rgba(255,255,255,.035); }
.page-conditions .answer-question span { display: block; margin-bottom: 14px; color: var(--green-300); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.page-conditions .answer-question h2 { margin-bottom: 0; color: var(--white); font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-conditions .answer-copy { padding: 42px; background: var(--white); }
.page-conditions .answer-copy > p:first-child { color: var(--ink); font-size: 1.08rem; font-weight: 500; }
.page-conditions .answer-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; }
.page-conditions .answer-tags span { padding: 8px 12px; border-radius: 999px; color: var(--green-900); background: var(--green-100); font-size: .88rem; font-weight: 600; }

.page-conditions .split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: start; }
.page-conditions .sticky-copy { position: sticky; top: 115px; }
.page-conditions .visual-card { padding: 0; overflow: hidden; min-height: 320px; }
.page-conditions .visual-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.page-conditions .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.page-conditions .callout { padding: 36px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--green-900), var(--green-700)); color: var(--white); box-shadow: var(--shadow-md); }
.page-conditions .callout h2, .page-conditions .callout h3 { color: var(--white); }
.page-conditions .callout p { color: rgba(255,255,255,.8); }
.page-conditions .callout .button { background: var(--white); color: var(--green-900); }
.page-conditions .callout .cta-actions { justify-content: flex-start; margin-top: 26px; }
.page-conditions .record-panel { padding: 36px; border-radius: var(--radius-lg); background: var(--cream); border: 1px solid var(--line); }
.page-conditions .check-list { margin: 20px 0 0; padding: 0; list-style: none; }
.page-conditions .check-list li { position: relative; padding-left: 26px; margin: 0 0 11px; color: var(--muted); font-weight: 600; }
.page-conditions .check-list li:last-child { margin-bottom: 0; }
.page-conditions .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-600); font-weight: 700; }

.page-conditions .faq-list { display: grid; gap: 12px; max-width: 940px; margin: 0 auto; }
.page-conditions details { border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.page-conditions summary { position: relative; padding: 21px 55px 21px 22px; cursor: pointer; list-style: none; font-weight: 600; }
.page-conditions summary::-webkit-details-marker { display: none; }
.page-conditions summary::after { content: "+"; position: absolute; right: 22px; top: 15px; color: var(--green-700); font-size: 1.65rem; font-weight: 400; }
.page-conditions details[open] summary::after { content: "–"; }
.page-conditions details p { padding: 0 22px 21px; margin: 0; }


.page-conditions .cta-section { padding: 78px 0; background: var(--cream); }
.page-conditions .cta-box { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 44px; border-radius: var(--radius-lg); background: var(--green-100); }
.page-conditions .cta-box h2 { margin-bottom: 12px; font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-conditions .cta-box p { max-width: 720px; margin-bottom: 0; }
.page-conditions .cta-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-end; }

.page-conditions .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: #fff; text-decoration: none; box-shadow: var(--shadow-md); font-weight: 700; }

@media (max-width: 980px) {
  .page-conditions .hero-grid, .page-conditions .split, .page-conditions .panel-grid { grid-template-columns: 1fr; }
  .page-conditions .hero-art { min-height: 350px; }
  .page-conditions .grid-4, .page-conditions .grid-3, .page-conditions .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .page-conditions .answer-panel { grid-template-columns: 1fr; }
  .page-conditions .sticky-copy { position: static; }
  .page-conditions .cta-box { grid-template-columns: 1fr; }
  .page-conditions .cta-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .page-conditions .container { width: min(calc(100% - 28px), var(--container)); }
  .page-conditions .hero { padding: 0 0 58px; }
  .page-conditions .hero-art { min-height: 300px; }
  .page-conditions .hero-visual { transform: scale(.85); }
  .page-conditions .hero-actions .button { width: 100%; }
  .page-conditions section { padding: 56px 0; }
  .page-conditions .grid-4, .page-conditions .grid-3, .page-conditions .grid-2 { grid-template-columns: 1fr; }
  .page-conditions .answer-question, .page-conditions .answer-copy { padding: 29px; }
  .page-conditions .cta-box { padding: 30px; }
  .page-conditions .callout, .page-conditions .record-panel { padding: 26px; }
  .page-conditions .callout .cta-actions { flex-direction: column; align-items: stretch; }
  .page-conditions .callout .cta-actions .button { width: 100%; }
}

/* ==========================================================================
   Book a Consultation page (book-a-consultation.html)
   Entirely scoped under .page-book-consultation, same isolation pattern and
   tuned color tokens/type scale as .page-conditions / .page-research /
   .page-treatments / .page-liver-health / .page-patient-resources. Reuses
   the full shared component library already proven on those pages
   (hero-visual card graphic, answer-panel, section-dark step grid,
   panel-grid + callout, check-list, pathway-link-card, faq-list, sources,
   cta-section) and adds the handful of components unique to a contact page:
   boxed .meta-list info rows, the appointment .form-card, a warm .alert-box,
   a .mini-table key/value list and a .map-placeholder illustration box.
   Note: the source draft used a full-bleed dark "quick answer" band and a
   dark final-CTA band and an always-open FAQ grid — those are swapped here
   for the .answer-panel / light .cta-section / collapsible .faq-list
   patterns already established as this site's real convention, so the page
   reads consistently with the rest of the site rather than the draft.
   ========================================================================== */

.page-book-consultation {
  --green-950: #063c2e; --green-900: #07513d; --green-800: #0b624a; --green-700: #0f7859;
  --green-600: #17936b; --green-500: #28ad7f; --green-400: #54c79b; --green-300: #81d6b3;
  --green-200: #b8e9d5; --green-100: #e1f6ed; --green-050: #f2fbf7;
  --sage: #dceadf; --cream: #fbfaf5; --warm: #f7f1e9; --pink: #d86d84; --pink-soft: #f9e9ed;
  --yellow: #f0c968; --ink: #152820; --muted: #5d7068; --line: #d9e8e0; --white: #fff;
  --shadow-sm: 0 10px 30px rgba(6,60,46,.07); --shadow-md: 0 24px 65px rgba(6,60,46,.12);
  --radius-sm: 14px; --radius-md: 22px; --radius-lg: 34px; --container: 1320px;
}
.page-book-consultation, .page-book-consultation * { box-sizing: border-box; }
.page-book-consultation {
  color: var(--ink); background: var(--white);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility;
}
.page-book-consultation img, .page-book-consultation svg { display: block; max-width: 100%; }
.page-book-consultation a { color: inherit; }
.page-book-consultation button, .page-book-consultation input, .page-book-consultation select, .page-book-consultation textarea { font: inherit; }
.page-book-consultation h1, .page-book-consultation h2, .page-book-consultation h3, .page-book-consultation h4, .page-book-consultation p { margin-top: 0; }
.page-book-consultation h1, .page-book-consultation h2, .page-book-consultation h3 { line-height: 1.12; letter-spacing: -0.025em; }
.page-book-consultation h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.page-book-consultation h2 { font-size: clamp(1.85rem, 3vw, 2.7rem); font-weight: 650; }
.page-book-consultation h3 { font-size: 1.18rem; font-weight: 600; }
.page-book-consultation h4 { font-size: 1.05rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.018em; margin: 0 0 8px; }
.page-book-consultation p { color: var(--muted); font-weight: 400; }
.page-book-consultation .container { width: min(calc(100% - 54px), var(--container)); margin-inline: auto; }

.page-book-consultation .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; font-weight: 600; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.page-book-consultation .button:hover { transform: translateY(-2px); }
.page-book-consultation .button-primary { color: var(--white); background: var(--green-700); box-shadow: 0 10px 26px rgba(15,120,89,.18); }
.page-book-consultation .button-primary:hover { background: var(--green-800); }
.page-book-consultation .button-secondary { color: var(--green-800); background: var(--white); border-color: var(--green-300); }
.page-book-consultation .button-secondary:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }

.page-book-consultation .hero { position: relative; overflow: hidden; padding: 0 0 52px; background: var(--cream); }
.page-book-consultation .hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: -210px; border-radius: 50%; background: rgba(184,233,213,.60); }
.page-book-consultation .hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.page-book-consultation .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--green-700); font-size: .82rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.page-book-consultation .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green-500); }
.page-book-consultation .hero h1 { max-width: 660px; margin-bottom: 24px; }
.page-book-consultation .hero-copy { max-width: 620px; font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.62; color: #46554e; }
.page-book-consultation .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.page-book-consultation .medical-note { margin-top: 18px; max-width: 660px; font-size: .88rem; color: #6b7e76; }

.page-book-consultation .hero-art { min-height: 460px; display: grid; place-items: center; position: relative; }
.page-book-consultation .hero-visual { position: relative; width: min(410px, 100%); }
.page-book-consultation .hero-visual-card {
  position: relative; border-radius: 32px; padding: 36px 30px 30px; text-align: center;
  background: linear-gradient(165deg, #ffffff 0%, var(--cream) 100%);
  border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-md);
}
.page-book-consultation .hero-visual-svg { width: 100%; max-width: 300px; margin: 4px auto 22px; display: block; }
.page-book-consultation .hero-visual-kicker { margin: 0 0 8px; color: #b9975b; font-weight: 700; font-size: .84rem; letter-spacing: .02em; }
.page-book-consultation .hero-visual-card h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.25; margin-bottom: 12px; color: var(--green-950); }
.page-book-consultation .hero-visual-card > p { margin: 0; color: var(--muted); font-size: .96rem; }

.page-book-consultation section { padding: 84px 0; }
.page-book-consultation .section-cream { background: var(--cream); }
.page-book-consultation .section-dark { background: var(--green-950); color: var(--white); }
.page-book-consultation .section-dark p { color: rgba(255,255,255,.76); }
.page-book-consultation .section-dark .section-heading h2 { color: var(--white); }
.page-book-consultation .section-dark .section-kicker { color: var(--green-300); }
.page-book-consultation .section-dark .card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none; }
.page-book-consultation .section-dark .card h3 { color: var(--white); }
.page-book-consultation .section-dark .card p { color: rgba(255,255,255,.72); }
.page-book-consultation .section-dark .card-icon { background: rgba(255,255,255,.14); color: var(--white); }
.page-book-consultation .section-heading { max-width: 800px; margin-bottom: 36px; }
.page-book-consultation .section-heading p { max-width: 730px; font-size: 1.04rem; }
.page-book-consultation .section-heading.center { margin-inline: auto; text-align: center; }
.page-book-consultation .section-kicker { display: block; margin-bottom: 10px; color: var(--green-700); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.page-book-consultation .grid { display: grid; gap: 20px; }
.page-book-consultation .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-book-consultation .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-book-consultation .card { height: 100%; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 10px 34px rgba(6,60,46,.05); }
.page-book-consultation .card-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 15px; color: var(--green-800); background: var(--green-100); font-size: .9rem; font-weight: 700; }
.page-book-consultation .card h3, .page-book-consultation .card h4 { margin-bottom: 10px; }
.page-book-consultation .card p:last-child { margin-bottom: 0; }
.page-book-consultation .meta-list { display: grid; gap: 10px; margin-top: 18px; }
.page-book-consultation .meta-list span { display: block; background: var(--cream); border: 1px solid rgba(185,151,91,.3); border-radius: 14px; padding: 11px 13px; color: var(--green-900); font-weight: 600; font-size: .92rem; line-height: 1.4; }
.page-book-consultation .meta-list a, .page-book-consultation .mini-row a { color: var(--green-700); text-decoration: underline !important; text-underline-offset: 2px; }

.page-book-consultation .pathway-link-card { display: block; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.page-book-consultation .pathway-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.page-book-consultation .pathway-link-card p { margin-bottom: 0; }

.page-book-consultation .answer-panel { display: grid; grid-template-columns: .72fr 1.28fr; overflow: hidden; border-radius: var(--radius-lg); background: var(--green-900); box-shadow: var(--shadow-md); }
.page-book-consultation .answer-question { padding: 42px; color: var(--white); background: rgba(255,255,255,.035); }
.page-book-consultation .answer-question span { display: block; margin-bottom: 14px; color: var(--green-300); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.page-book-consultation .answer-question h2 { margin-bottom: 0; color: var(--white); font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-book-consultation .answer-copy { padding: 42px; background: var(--white); }
.page-book-consultation .answer-copy > p:first-child { color: var(--ink); font-size: 1.08rem; font-weight: 500; }
.page-book-consultation .answer-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; }
.page-book-consultation .answer-tags span { padding: 8px 12px; border-radius: 999px; color: var(--green-900); background: var(--green-100); font-size: .88rem; font-weight: 600; }
.page-book-consultation .note-line { margin-top: 20px; padding-left: 16px; border-left: 3px solid var(--yellow); font-size: .92rem; }
.page-book-consultation .note-line a { color: var(--green-700); text-decoration: underline !important; }

.page-book-consultation .split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: start; }
.page-book-consultation .sticky-copy { position: sticky; top: 115px; }

.page-book-consultation .alert-box { margin-top: 26px; padding: 24px 26px; border: 1px solid rgba(185,151,91,.4); border-radius: var(--radius-md); background: #fff8eb; }
.page-book-consultation .alert-box h2, .page-book-consultation .alert-box h3 { color: var(--green-950); }
.page-book-consultation .alert-box p:last-child { margin-bottom: 0; }
.page-book-consultation .alert-box-urgent { border-color: rgba(216,109,132,.5); }
.page-book-consultation .alert-box-urgent p { font-size: 1.08rem; color: #a8314a; font-weight: 600; line-height: 1.6; }
.page-book-consultation .alert-box-urgent p a { color: #a8314a; text-decoration: underline !important; font-weight: 800; }

.page-book-consultation .form-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-md); }
.page-book-consultation .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.page-book-consultation .field { display: flex; flex-direction: column; gap: 7px; }
.page-book-consultation .field label { color: var(--green-950); font-weight: 700; font-size: .9rem; }
.page-book-consultation .field input, .page-book-consultation .field select, .page-book-consultation .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px;
  font: inherit; color: var(--ink); background: var(--cream);
}
.page-book-consultation .field input:focus, .page-book-consultation .field select:focus, .page-book-consultation .field textarea:focus {
  outline: 2px solid var(--green-500); outline-offset: 1px;
}
.page-book-consultation .field textarea { min-height: 120px; resize: vertical; }
.page-book-consultation .field-full { grid-column: 1 / -1; }
.page-book-consultation .checkbox-note { margin-top: 18px; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.page-book-consultation .checkbox-note input { margin-top: 3px; }
.page-book-consultation .form-card .hero-actions { margin-top: 22px; }

/* Contact Form 7's [acceptance] tag wraps its own checkbox + text in a
   <label>, nested inside the .checkbox-note div above (rather than
   .checkbox-note itself being the <label>, as the old native form had it).
   Flex is moved onto that inner label instead so the checkbox and text
   still align the same way as before. */
.page-book-consultation .checkbox-note .wpcf7-list-item { margin: 0; }
.page-book-consultation .checkbox-note label { display: flex; gap: 10px; align-items: flex-start; }
.page-book-consultation .checkbox-note input[type="checkbox"] { margin-top: 3px; }
.page-book-consultation .wpcf7-response-output { margin-top: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); font-size: .92rem; }
.page-book-consultation .wpcf7-not-valid-tip { color: var(--pink); font-size: .82rem; margin-top: 4px; display: block; }

.page-book-consultation .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.page-book-consultation .callout { padding: 36px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--green-900), var(--green-700)); color: var(--white); box-shadow: var(--shadow-md); }
.page-book-consultation .callout h2, .page-book-consultation .callout h3 { color: var(--white); }
.page-book-consultation .callout p { color: rgba(255,255,255,.8); }
.page-book-consultation .callout .button { background: var(--white); color: var(--green-900); }
.page-book-consultation .callout .cta-actions { justify-content: flex-start; margin-top: 26px; }
.page-book-consultation .record-panel { padding: 36px; border-radius: var(--radius-lg); background: var(--cream); border: 1px solid var(--line); }
.page-book-consultation .check-list { margin: 20px 0 0; padding: 0; list-style: none; }
.page-book-consultation .check-list li { position: relative; padding-left: 26px; margin: 0 0 11px; color: var(--muted); font-weight: 600; }
.page-book-consultation .check-list li:last-child { margin-bottom: 0; }
.page-book-consultation .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-600); font-weight: 700; }

.page-book-consultation .mini-table { display: grid; gap: 10px; margin-top: 20px; }
.page-book-consultation .mini-row { display: grid; grid-template-columns: 160px 1fr; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.page-book-consultation .mini-row strong { color: var(--green-950); }
.page-book-consultation .mini-row span { color: var(--muted); }
.page-book-consultation .map-placeholder {
  min-height: 340px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 30px; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--cream) 0%, #ffffff 55%, var(--green-050) 100%);
}
.page-book-consultation .map-placeholder svg { width: min(220px, 80%); height: auto; margin: 0 auto 18px; }
.page-book-consultation .map-placeholder p:last-child { margin-bottom: 0; }
.page-book-consultation .map-placeholder.has-embed { padding: 0; display: block; background: none; min-height: 520px; }
.page-book-consultation .map-placeholder.has-embed iframe { width: 100%; height: 520px; min-height: 100%; border: 0; display: block; }

.page-book-consultation .faq-list { display: grid; gap: 12px; max-width: 940px; margin: 0 auto; }
.page-book-consultation details { border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.page-book-consultation summary { position: relative; padding: 21px 55px 21px 22px; cursor: pointer; list-style: none; font-weight: 600; }
.page-book-consultation summary::-webkit-details-marker { display: none; }
.page-book-consultation summary::after { content: "+"; position: absolute; right: 22px; top: 15px; color: var(--green-700); font-size: 1.65rem; font-weight: 400; }
.page-book-consultation details[open] summary::after { content: "–"; }
.page-book-consultation details p { padding: 0 22px 21px; margin: 0; }

.page-book-consultation .sources { padding: 24px; border: 1px dashed var(--green-300); border-radius: 18px; background: var(--green-050); }
.page-book-consultation .sources h2, .page-book-consultation .sources h3 { margin-bottom: 10px; }
.page-book-consultation .sources ul { margin: 0; padding-left: 20px; color: var(--muted); }
.page-book-consultation .sources a { color: var(--green-700); }

.page-book-consultation .cta-section { padding: 78px 0; background: var(--cream); }
.page-book-consultation .cta-box { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 44px; border-radius: var(--radius-lg); background: var(--green-100); }
.page-book-consultation .cta-box h2 { margin-bottom: 12px; font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-book-consultation .cta-box p { max-width: 720px; margin-bottom: 0; }
.page-book-consultation .cta-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-end; }

.page-book-consultation .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: #fff; text-decoration: none; box-shadow: var(--shadow-md); font-weight: 700; }

@media (max-width: 980px) {
  .page-book-consultation .hero-grid, .page-book-consultation .split, .page-book-consultation .panel-grid { grid-template-columns: 1fr; }
  .page-book-consultation .hero-art { min-height: 340px; }
  .page-book-consultation .grid-4, .page-book-consultation .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .page-book-consultation .answer-panel { grid-template-columns: 1fr; }
  .page-book-consultation .sticky-copy { position: static; }
  .page-book-consultation .cta-box { grid-template-columns: 1fr; }
  .page-book-consultation .cta-actions { justify-content: flex-start; }
  .page-book-consultation .mini-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page-book-consultation .container { width: min(calc(100% - 28px), var(--container)); }
  .page-book-consultation .hero { padding: 0 0 58px; }
  .page-book-consultation .hero-art { min-height: 280px; }
  .page-book-consultation .hero-visual { transform: scale(.85); }
  .page-book-consultation .hero-actions .button { width: 100%; }
  .page-book-consultation section { padding: 56px 0; }
  .page-book-consultation .grid-4, .page-book-consultation .grid-3, .page-book-consultation .form-grid { grid-template-columns: 1fr; }
  .page-book-consultation .answer-question, .page-book-consultation .answer-copy { padding: 29px; }
  .page-book-consultation .cta-box { padding: 30px; }
  .page-book-consultation .callout, .page-book-consultation .record-panel, .page-book-consultation .form-card { padding: 24px; }
  .page-book-consultation .callout .cta-actions { flex-direction: column; align-items: stretch; }
  .page-book-consultation .callout .cta-actions .button { width: 100%; }
}

/* ==========================================================================
   Research & Publications v2 page (research-v2.html)
   "Research Ledger" layout (masthead hero, table-of-contents focus list,
   pull-quote, dark spotlight with marginalia, story grid, numbered
   bibliography, glossary, closing notice) — now recolored and reset to the
   same tuned green tokens and "DM Sans"/Inter type stack used across
   .page-research / .page-conditions / .page-treatments / etc., so this
   page reads as part of the same site rather than its own standalone
   brand. Entirely scoped under .page-research-v2.
   ========================================================================== */

.page-research-v2 {
  --green-950: #063c2e; --green-900: #07513d; --green-800: #0b624a; --green-700: #0f7859;
  --green-600: #17936b; --green-500: #28ad7f; --green-400: #54c79b; --green-300: #81d6b3;
  --green-200: #b8e9d5; --green-100: #e1f6ed; --green-050: #f2fbf7;
  --cream: #fbfaf5; --yellow: #f0c968; --ink: #152820; --muted: #5d7068; --line: #d9e8e0; --white: #fff;
  --max: 1320px;
}
.page-research-v2, .page-research-v2 * { box-sizing: border-box; }
.page-research-v2 {
  color: var(--ink);
  background: var(--white);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.page-research-v2 a { color: inherit; }
.page-research-v2 .container { width: min(calc(100% - 54px), var(--max)); margin-inline: auto; }
.page-research-v2 h1, .page-research-v2 h2, .page-research-v2 h3 { font-weight: 700; letter-spacing: -.025em; color: var(--ink); margin: 0; }
.page-research-v2 h1 { font-size: clamp(44px, 6vw, 74px); line-height: 1.04; letter-spacing: -.03em; }
.page-research-v2 h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.14; font-weight: 650; }
.page-research-v2 h3 { font-size: 20px; line-height: 1.3; font-weight: 600; }
.page-research-v2 p { margin: 0 0 14px; }
.page-research-v2 p:last-child { margin-bottom: 0; }

.page-research-v2 .btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; border-radius: 999px; font-weight: 650; font-size: 14px; letter-spacing: .01em; text-decoration: none; border: 1px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.page-research-v2 .btn:hover { transform: translateY(-2px); }
.page-research-v2 .btn-dark { background: var(--green-700); color: var(--white); }
.page-research-v2 .btn-dark:hover { background: var(--green-800); }
.page-research-v2 .btn-outline { border-color: var(--green-300); color: var(--green-800); background: transparent; }
.page-research-v2 .btn-outline:hover { border-color: var(--green-600); background: var(--green-050); }
.page-research-v2 .btn-gold { background: var(--white); color: var(--green-900); }
.page-research-v2 .btn-gold:hover { background: var(--green-100); }

.page-research-v2 .kicker { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; color: var(--green-700); margin-bottom: 12px; }
.page-research-v2 .section-head { max-width: 760px; margin-bottom: 32px; }
.page-research-v2 .section-head p { color: var(--muted); font-size: 17px; }
.page-research-v2 section { padding: 60px 0; }
.page-research-v2 .section-paper-dim { background: var(--green-050); }
.page-research-v2 .section-forest { background: var(--green-950); color: var(--cream); }
.page-research-v2 .section-forest h1, .page-research-v2 .section-forest h2, .page-research-v2 .section-forest h3 { color: var(--white); }
.page-research-v2 .section-forest p { color: rgba(255,255,255,.76); }
.page-research-v2 .section-forest .kicker { color: var(--green-300); }
.page-research-v2 .section-forest .section-head p { color: rgba(255,255,255,.76); }

/* Masthead / hero */
.page-research-v2 .masthead { position: relative; overflow: hidden; padding: 0 0 52px; background: var(--cream); }
.page-research-v2 .masthead-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 3px double var(--green-700); border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.page-research-v2 .masthead-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: end; padding: 36px 0 44px; }
.page-research-v2 .lead { font-size: 18px; line-height: 1.6; color: #3a4d45; max-width: 620px; }
.page-research-v2 .lead strong { font-weight: 700; color: var(--ink); }
.page-research-v2 .accent { color: var(--green-700); }

.page-research-v2 .emblem { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--green-300); outline: 1px solid var(--green-300); outline-offset: 4px; display: grid; place-items: center; font-weight: 700; color: var(--green-900); font-size: 17px; margin-bottom: 20px; overflow: hidden; }
.page-research-v2 .emblem img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.page-research-v2 .issue-card { border: 1px solid var(--green-200); background: var(--green-050); padding: 26px 26px; }
.page-research-v2 .issue-card .issue-label { display: block; opacity: .85; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 14px; }
.page-research-v2 .issue-card h2 { font-size: 22px; line-height: 1.3; margin-bottom: 12px; }
.page-research-v2 .issue-card > p { color: var(--muted); font-size: 14.5px; }
.page-research-v2 .issue-stats { display: grid; gap: 16px; margin-top: 22px; }
.page-research-v2 .issue-stat { padding-top: 14px; border-top: 1px solid var(--green-200); }
.page-research-v2 .issue-stat strong { display: block; font-size: 16px; color: var(--green-900); margin-bottom: 3px; }
.page-research-v2 .issue-stat span { font-size: 13px; color: var(--muted); }

/* Table of contents (focus areas) */
.page-research-v2 .toc-split { display: grid; grid-template-columns: 1.5fr .72fr; gap: 44px; align-items: start; }
.page-research-v2 .toc-image { position: sticky; top: 110px; margin-top: 80px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(6,60,46,.10); }
.page-research-v2 .toc-image img { width: 100%; height: 100%; min-height: 317px; object-fit: cover; display: block; }
.page-research-v2 .toc-list { display: grid; }
.page-research-v2 .toc-item { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.page-research-v2 .toc-item:first-child { border-top: 1px solid var(--line); }
.page-research-v2 .toc-num { font-size: 34px; font-weight: 700; line-height: 1; color: var(--green-200); }
.page-research-v2 .toc-item p { color: var(--muted); font-size: 15.5px; max-width: 640px; }

/* Pull-quote / research experience */
.page-research-v2 .pull-wrap { display: grid; grid-template-columns: 1fr; gap: 34px; }
.page-research-v2 .pull-quote { position: relative; font-style: italic; font-size: clamp(22px, 2.8vw, 29px); line-height: 1.45; font-weight: 600; color: var(--green-900); padding-left: 46px; }
.page-research-v2 .pull-quote:before { content: "\201C"; position: absolute; left: -8px; top: -30px; font-size: 96px; color: var(--green-200); }

.page-research-v2 .metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.page-research-v2 .metric-card { border: 1px solid var(--line); background: var(--white); padding: 26px 22px; text-align: center; }
.page-research-v2 .metric-card .metric-icon { width: 34px; height: 34px; margin: 0 auto 14px; color: var(--green-700); }
.page-research-v2 .metric-card .metric-icon svg { width: 100%; height: 100%; stroke: currentColor; }
.page-research-v2 .metric-card strong { display: block; font-size: 30px; font-weight: 700; color: var(--green-900); margin-bottom: 4px; }
.page-research-v2 .metric-card span { font-size: 13px; color: var(--muted); }

/* Spotlight (featured study) */
.page-research-v2 .spotlight-inner { display: grid; grid-template-columns: 1.3fr .7fr; gap: 44px; margin-top: 26px; }
.page-research-v2 .spotlight-inner h3 { color: var(--white); font-size: clamp(24px, 2.8vw, 32px); margin-bottom: 10px; }
.page-research-v2 .spotlight-label { display: block; font-size: 13px; letter-spacing: .03em; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.page-research-v2 .tag { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--green-100); font-size: 12px; font-weight: 700; margin-bottom: 16px; }
.page-research-v2 .spotlight-byline { font-size: 13.5px; letter-spacing: .03em; color: rgba(255,255,255,.6); margin: 0 0 22px; }
.page-research-v2 .spotlight-inner p { font-size: 16.5px; line-height: 1.75; }
.page-research-v2 .spotlight-inner .btn { margin-top: 12px; }
.page-research-v2 .marginalia { display: grid; gap: 18px; align-content: start; }
.page-research-v2 .margin-note { border-left: 3px solid var(--green-500); padding: 2px 0 2px 18px; }
.page-research-v2 .margin-note span { display: block; font-style: italic; font-size: 15px; font-weight: 600; color: var(--green-300); margin-bottom: 8px; line-height: 1.3; }
.page-research-v2 .margin-note p { margin: 0; font-size: 14px; color: rgba(255,255,255,.82); }

/* Research stories — compact 2-up grid */
.page-research-v2 .timeline { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 8px; }
.page-research-v2 .timeline-item { position: relative; border: 1px solid var(--line); border-top: 3px solid var(--green-600); background: var(--white); padding: 24px 26px; }
.page-research-v2 .timeline-year { font-size: 14px; font-weight: 700; color: var(--green-700); margin-bottom: 8px; }
.page-research-v2 .timeline-item h3 { margin-bottom: 8px; font-size: 18px; }
.page-research-v2 .timeline-item p { color: var(--muted); font-size: 14.5px; }
.page-research-v2 .timeline-note { font-style: italic; color: #33443b; }
.page-research-v2 .timeline-item a { display: inline-block; margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--green-700); border-bottom: 1px solid var(--green-300); text-decoration: none; }

/* Bibliography (publications) */
.page-research-v2 .biblio { border-top: 1px solid var(--line); }
.page-research-v2 .biblio-item { counter-increment: ref; position: relative; padding: 16px 0 16px 50px; border-bottom: 1px solid var(--line); }
.page-research-v2 .biblio-item:before { content: "[" counter(ref) "]"; position: absolute; left: 0; top: 16px; font-weight: 700; color: var(--green-700); }
.page-research-v2 .biblio { counter-reset: ref; }
.page-research-v2 .biblio-topic { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--green-800); background: var(--green-100); padding: 4px 9px; border-radius: 3px; margin-bottom: 8px; }
.page-research-v2 .biblio-item h3 { font-size: 17px; margin-bottom: 6px; }
.page-research-v2 .biblio-meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.page-research-v2 .biblio-item a { font-size: 13px; color: var(--green-700); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--green-300); }

/* Glossary (explained concepts) */
.page-research-v2 .glossary { display: grid; grid-template-columns: repeat(3, 1fr); }
.page-research-v2 .glossary-item { padding: 0 30px; border-left: 1px solid var(--line); }
.page-research-v2 .glossary-item:first-child { border-left: 0; padding-left: 0; }
.page-research-v2 .glossary-item h3 { font-size: 19px; color: var(--green-900); margin-bottom: 12px; }
.page-research-v2 .glossary-item p { color: var(--muted); font-size: 14.5px; }

/* Closing notice */
.page-research-v2 .cta-section { padding: 78px 0; background: var(--cream); }
.page-research-v2 .cta-box { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 44px; border-radius: 28px; background: var(--green-100); }
.page-research-v2 .cta-box h2 { margin-bottom: 12px; font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-research-v2 .cta-box p { max-width: 720px; margin-bottom: 0; }
.page-research-v2 .cta-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-end; }

.page-research-v2 .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: #fff; text-decoration: none; box-shadow: 0 14px 34px rgba(6,60,46,.28); font-weight: 700; }

@media (max-width: 980px) {
  .page-research-v2 .masthead-grid, .page-research-v2 .spotlight-inner, .page-research-v2 .pull-wrap, .page-research-v2 .toc-split { grid-template-columns: 1fr; }
  .page-research-v2 .toc-image { position: static; order: -1; }
  .page-research-v2 .metric-row { grid-template-columns: repeat(3, 1fr); }
  .page-research-v2 .glossary { grid-template-columns: 1fr; gap: 26px; }
  .page-research-v2 .glossary-item { border-left: 0; padding-left: 0; padding-top: 22px; border-top: 1px solid var(--line); }
  .page-research-v2 .glossary-item:first-child { border-top: 0; padding-top: 0; }
  .page-research-v2 .timeline { grid-template-columns: 1fr; }
  .page-research-v2 .cta-box { grid-template-columns: 1fr; }
  .page-research-v2 .cta-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .page-research-v2 .container { width: min(calc(100% - 28px), var(--max)); }
  .page-research-v2 section { padding: 44px 0; }
  .page-research-v2 .masthead { padding: 0 0 44px; }
  .page-research-v2 .masthead-grid { padding: 28px 0 36px; gap: 30px; }
  .page-research-v2 .toc-item { grid-template-columns: 52px 1fr; gap: 16px; }
  .page-research-v2 .toc-num { font-size: 32px; }
  .page-research-v2 .cta-box { padding: 30px; }
  .page-research-v2 .cta-actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Patient Testimonials page (patient-testimonials.html)
   Entirely scoped under .page-patient-testimonials, same isolation pattern
   and same tuned color tokens/type scale as .page-research / .page-conditions
   / .page-treatments / .page-liver-health / .page-patient-resources. Reuses
   the same shared component library (hero-visual card graphic, answer-panel
   style hero, card, cta-section) already proven on those pages — the only
   new component here is the full-length .testimonial-card list, since these
   patient messages are long-form and kept in their original Sinhala.
   ========================================================================== */

.page-patient-testimonials {
  --green-950: #063c2e; --green-900: #07513d; --green-800: #0b624a; --green-700: #0f7859;
  --green-600: #17936b; --green-500: #28ad7f; --green-400: #54c79b; --green-300: #81d6b3;
  --green-200: #b8e9d5; --green-100: #e1f6ed; --green-050: #f2fbf7;
  --sage: #dceadf; --cream: #fbfaf5; --warm: #f7f1e9; --pink: #d86d84; --pink-soft: #f9e9ed;
  --yellow: #f0c968; --ink: #152820; --muted: #5d7068; --line: #d9e8e0; --white: #fff;
  --shadow-sm: 0 10px 30px rgba(6,60,46,.07); --shadow-md: 0 24px 65px rgba(6,60,46,.12);
  --radius-sm: 14px; --radius-md: 22px; --radius-lg: 34px; --container: 1320px;
}
.page-patient-testimonials, .page-patient-testimonials * { box-sizing: border-box; }
.page-patient-testimonials {
  color: var(--ink); background: var(--white);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility;
}
.page-patient-testimonials img, .page-patient-testimonials svg { display: block; max-width: 100%; }
.page-patient-testimonials a { color: inherit; }
.page-patient-testimonials h1, .page-patient-testimonials h2, .page-patient-testimonials h3, .page-patient-testimonials h4, .page-patient-testimonials p { margin-top: 0; }
.page-patient-testimonials h1, .page-patient-testimonials h2, .page-patient-testimonials h3 { line-height: 1.12; letter-spacing: -0.025em; }
.page-patient-testimonials h1 { font-size: clamp(2.5rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.page-patient-testimonials h2 { font-size: clamp(1.95rem, 3.3vw, 3rem); font-weight: 650; }
.page-patient-testimonials h3 { font-size: 1.18rem; font-weight: 600; }
.page-patient-testimonials p { color: var(--muted); font-weight: 400; }
.page-patient-testimonials .container { width: min(calc(100% - 54px), var(--container)); margin-inline: auto; }

.page-patient-testimonials .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.page-patient-testimonials .button:hover { transform: translateY(-2px); }
.page-patient-testimonials .button-primary { color: var(--white); background: var(--green-700); box-shadow: 0 10px 26px rgba(15,120,89,.18); }
.page-patient-testimonials .button-primary:hover { background: var(--green-800); }
.page-patient-testimonials .button-secondary { color: var(--green-800); background: var(--white); border-color: var(--green-300); }
.page-patient-testimonials .button-secondary:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }

.page-patient-testimonials .hero { position: relative; overflow: hidden; padding: 0 0 52px; background: var(--cream); }
.page-patient-testimonials .hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: -210px; border-radius: 50%; background: rgba(184,233,213,.60); }
.page-patient-testimonials .hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.page-patient-testimonials .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--green-700); font-size: .82rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.page-patient-testimonials .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green-500); }
.page-patient-testimonials .hero h1 { max-width: 700px; margin-bottom: 26px; }
.page-patient-testimonials .hero-copy { max-width: 650px; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.62; color: #46554e; }
.page-patient-testimonials .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.page-patient-testimonials .medical-note { margin-top: 20px; max-width: 690px; font-size: .88rem; color: #6b7e76; }

.page-patient-testimonials .hero-art { min-height: 480px; display: grid; place-items: center; position: relative; }
.page-patient-testimonials .hero-visual { position: relative; width: min(430px, 100%); }
.page-patient-testimonials .hero-visual-card {
  position: relative; border-radius: 32px; padding: 38px 32px 32px; text-align: center;
  background: linear-gradient(165deg, #ffffff 0%, var(--cream) 100%);
  border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-md);
}
.page-patient-testimonials .hero-visual-sparkle { position: absolute; top: 24px; right: 30px; color: #b9975b; font-size: 1.3rem; line-height: 1; }
.page-patient-testimonials .hero-visual-svg { width: 100%; max-width: 300px; margin: 4px auto 22px; display: block; }
.page-patient-testimonials .hero-visual-kicker { margin: 0 0 8px; color: #b9975b; font-weight: 700; font-size: .84rem; letter-spacing: .02em; }
.page-patient-testimonials .hero-visual-card h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.25; margin-bottom: 12px; color: var(--green-950); }
.page-patient-testimonials .hero-visual-card > p { margin: 0; color: var(--muted); font-size: .96rem; }
.page-patient-testimonials .mini-stat {
  position: absolute; z-index: 3; min-width: 172px; padding: 14px 16px; text-align: left;
  border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.page-patient-testimonials .mini-stat strong { display: block; color: var(--green-950); font-size: 1.05rem; }
.page-patient-testimonials .mini-stat span { display: block; color: var(--muted); font-size: .82rem; }
.page-patient-testimonials .mini-stat.stat-one { left: -16px; bottom: 0px; }
.page-patient-testimonials .mini-stat.stat-two { right: -10px; top: 44px; }

.page-patient-testimonials section { padding: 88px 0; }
.page-patient-testimonials .section-soft { background: var(--green-050); }
.page-patient-testimonials .section-cream { background: var(--cream); }
.page-patient-testimonials .section-heading { max-width: 800px; margin-bottom: 38px; }
.page-patient-testimonials .section-heading p { max-width: 730px; font-size: 1.04rem; }
.page-patient-testimonials .section-heading.center { margin-inline: auto; text-align: center; }
.page-patient-testimonials .section-kicker { display: block; margin-bottom: 10px; color: var(--green-700); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.page-patient-testimonials .testimonial-list { display: grid; gap: 26px; max-width: 900px; margin: 0 auto; }
.page-patient-testimonials .testimonial-card {
  position: relative; padding: 44px 46px 38px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: 0 14px 40px rgba(6,60,46,.06);
}
.page-patient-testimonials .testimonial-mark {
  position: absolute; top: 26px; left: 40px; font-family: Georgia, "Times New Roman", serif;
  font-size: 76px; line-height: 1; color: var(--green-200); user-select: none;
}
.page-patient-testimonials .testimonial-body { position: relative; z-index: 1; margin-top: 30px; }
.page-patient-testimonials .testimonial-body p { color: var(--ink); font-size: 1.02rem; line-height: 1.85; margin: 0 0 16px; }
.page-patient-testimonials .testimonial-body p:last-child { margin-bottom: 0; }
.page-patient-testimonials .testimonial-poem p { font-style: italic; color: var(--green-950); }
.page-patient-testimonials .testimonial-footer {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
}
.page-patient-testimonials .testimonial-footer strong { display: block; color: var(--green-950); font-size: 1.02rem; }
.page-patient-testimonials .testimonial-footer span { display: block; color: var(--muted); font-size: .88rem; margin-top: 2px; }

.page-patient-testimonials .cta-section { padding: 78px 0; background: var(--cream); }
.page-patient-testimonials .cta-box { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 44px; border-radius: var(--radius-lg); background: var(--green-100); }
.page-patient-testimonials .cta-box h2 { margin-bottom: 12px; font-size: clamp(1.9rem, 3.5vw, 3rem); }
.page-patient-testimonials .cta-box p { max-width: 720px; margin-bottom: 0; }
.page-patient-testimonials .cta-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-end; }

.page-patient-testimonials .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: #fff; text-decoration: none; box-shadow: var(--shadow-md); font-weight: 700; }

@media (max-width: 980px) {
  .page-patient-testimonials .hero-grid { grid-template-columns: 1fr; }
  .page-patient-testimonials .hero-art { min-height: 350px; }
  .page-patient-testimonials .cta-box { grid-template-columns: 1fr; }
  .page-patient-testimonials .cta-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .page-patient-testimonials .container { width: min(calc(100% - 28px), var(--container)); }
  .page-patient-testimonials .hero { padding: 0 0 58px; }
  .page-patient-testimonials .hero-art { min-height: 300px; }
  .page-patient-testimonials .hero-visual { transform: scale(.85); }
  .page-patient-testimonials .hero-actions .button { width: 100%; }
  .page-patient-testimonials section { padding: 56px 0; }
  .page-patient-testimonials .testimonial-card { padding: 40px 24px 30px; }
  .page-patient-testimonials .testimonial-mark { left: 20px; font-size: 60px; }
  .page-patient-testimonials .cta-box { padding: 30px; }
}

/* ==========================================================================
   Blog listing page (blog.html)
   Entirely scoped under .page-blog, same isolation pattern and same tuned
   color tokens/type scale as every other page. Elementor is on the free
   plan here (no dynamic Posts widget), so the grid below is populated by
   the [data-blog-list] handler in doc.js — paging through the WordPress
   REST API (wp/v2/posts) 9 at a time behind a "Load More" button, reusing
   the exact .article-image/.article-body/.article-date pattern already
   proven for the home page's 3-post teaser grid.
   ========================================================================== */

.page-blog {
  --green-950: #063c2e; --green-900: #07513d; --green-800: #0b624a; --green-700: #0f7859;
  --green-600: #17936b; --green-500: #28ad7f; --green-400: #54c79b; --green-300: #81d6b3;
  --green-200: #b8e9d5; --green-100: #e1f6ed; --green-050: #f2fbf7;
  --sage: #dceadf; --cream: #fbfaf5; --warm: #f7f1e9; --pink: #d86d84; --pink-soft: #f9e9ed;
  --yellow: #f0c968; --ink: #152820; --muted: #5d7068; --line: #d9e8e0; --white: #fff;
  --shadow-sm: 0 10px 30px rgba(6,60,46,.07); --shadow-md: 0 24px 65px rgba(6,60,46,.12);
  --radius-sm: 14px; --radius-md: 22px; --radius-lg: 34px; --container: 1320px;
}
.page-blog, .page-blog * { box-sizing: border-box; }
.page-blog {
  color: var(--ink); background: var(--white);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility;
}
.page-blog img, .page-blog svg { display: block; max-width: 100%; }
.page-blog a { color: inherit; }
.page-blog h1, .page-blog h2, .page-blog h3, .page-blog h4, .page-blog p { margin-top: 0; }
.page-blog h1, .page-blog h2, .page-blog h3 { line-height: 1.12; letter-spacing: -0.025em; }
.page-blog h1 { font-size: clamp(2.5rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.page-blog h2 { font-size: clamp(1.95rem, 3.3vw, 3rem); font-weight: 650; }
.page-blog h3 { font-size: 1.18rem; font-weight: 600; }
.page-blog p { color: var(--muted); font-weight: 400; }
.page-blog .container { width: min(calc(100% - 54px), var(--container)); margin-inline: auto; }

.page-blog .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; font-weight: 600; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.page-blog .button:hover { transform: translateY(-2px); }
.page-blog .button-primary { color: var(--white); background: var(--green-700); box-shadow: 0 10px 26px rgba(15,120,89,.18); }
.page-blog .button-primary:hover { background: var(--green-800); }
.page-blog .button-secondary { color: var(--green-800); background: var(--white); border-color: var(--green-300); }
.page-blog .button-secondary:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }
.page-blog .button:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

.page-blog .hero { position: relative; overflow: hidden; min-height: 0; padding: 70px 0 50px; background: var(--cream); }
.page-blog .hero::before { content: ""; position: absolute; width: 480px; height: 480px; right: -170px; top: -190px; border-radius: 50%; background: rgba(184,233,213,.55); }
.page-blog .hero-inner { position: relative; max-width: 780px; }
.page-blog .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--green-700); font-size: .82rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.page-blog .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green-500); }
.page-blog .hero h1 { margin-bottom: 18px; }
.page-blog .hero-copy { font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.62; color: #46554e; margin: 0; }

.page-blog section { padding: 78px 0; }

.page-blog .blog-status { text-align: center; color: var(--muted); font-size: .96rem; min-height: 1.4em; margin-bottom: 6px; }
.page-blog .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.page-blog .card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 10px 34px rgba(6,60,46,.05); }
.page-blog .blog-card { overflow: hidden; padding: 0; }
.page-blog .article-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-050); }
.page-blog .article-image a { display: block; width: 100%; height: 100%; }
.page-blog .article-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-blog .article-title-link { color: inherit; }
.page-blog .article-title-link:hover { text-decoration: underline !important; }
.page-blog .article-body { padding: 24px; }
.page-blog .blog-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.page-blog .article-date { color: var(--green-700); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.page-blog .blog-card-date { color: var(--muted); font-size: .78rem; }
.page-blog .article-body h3 { margin-bottom: 8px; }
.page-blog .article-body p { margin-bottom: 14px; }
.page-blog .text-link { color: var(--green-700); text-decoration: none; font-weight: 700; font-size: .92rem; }
.page-blog .text-link:hover { text-decoration: underline; }

.page-blog .blog-load-more { display: flex; justify-content: center; margin-top: 44px; }

.page-blog .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); color: #fff; text-decoration: none; box-shadow: var(--shadow-md); font-weight: 700; }

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

@media (max-width: 640px) {
  .page-blog .container { width: min(calc(100% - 28px), var(--container)); }
  .page-blog .hero { padding: 32px 0 22px; }
  .page-blog section { padding: 56px 0; }
  .page-blog .blog-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog post layout (long-form articles pasted via a WP Post's Custom HTML
   block, e.g. fatty-liver-sri-lanka.html). Deliberately NOT a fully isolated
   page-* reset like the standalone pages above — this reuses the true global
   tokens/fonts/components (.btn, .card, .faq-list, .eyebrow, .text-link,
   .section, .container) defined earlier in this file, since these posts live
   inside the normal WordPress post template and should match the main site
   look without redeclaring it. Reusable across every future blog post, not
   just this one.
   ========================================================================== */
.page-blog-post { --container: 1320px; }

.page-blog-post .post-intro { padding: 56px 0 8px; }
.page-blog-post .post-meta-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 6px; }
.page-blog-post .post-meta-top .eyebrow { margin-bottom: 0; }
.page-blog-post .post-date { color: var(--muted); font-size: .88rem; }
.page-blog-post .post-lead { max-width: 820px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: #3a4d45; margin-bottom: 24px; }
.page-blog-post .post-lead strong { color: var(--ink); }

.page-blog-post .post-byline { display: flex; align-items: center; gap: 14px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.page-blog-post .post-byline-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--green-800); color: var(--white); font-weight: 800; letter-spacing: .02em; }
.page-blog-post .post-byline strong { display: block; color: var(--ink); }
.page-blog-post .post-byline span { color: var(--muted); font-size: .88rem; }

.page-blog-post .post-layout { display: grid; grid-template-columns: 1fr .34fr; gap: 56px; align-items: start; }
.page-blog-post .post-content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 44px 0 16px; color: var(--green-950); }
.page-blog-post .post-content h2:first-child { margin-top: 0; }
.page-blog-post .post-content p { margin-bottom: 16px; font-size: 1.02rem; }
.page-blog-post .post-content ul { margin: 0 0 16px; padding-left: 20px; color: var(--muted); }

.page-blog-post .post-callout { margin: 24px 0; padding: 22px 26px; border-radius: var(--radius-md); background: var(--green-050); border: 1px dashed var(--green-300); }
.page-blog-post .post-callout strong { color: var(--green-950); font-size: 1.05rem; line-height: 1.5; }
.page-blog-post .post-callout a { color: var(--green-800); text-decoration: underline !important; }

.page-blog-post .faq-list { margin: 20px 0 0; max-width: none; }
.page-blog-post .faq-list summary h3 { display: inline; font-size: 1.05rem; }

.page-blog-post .post-author-card { display: flex; gap: 20px; padding: 26px; margin-top: 8px; border-radius: var(--radius-md); background: var(--green-050); }
.page-blog-post .post-author-avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--green-800); color: var(--white); font-weight: 800; }
.page-blog-post .post-author-card p { margin-bottom: 10px; }
.page-blog-post .post-reviewed-line { color: var(--muted); font-size: .9rem; }

.page-blog-post .sources { padding: 24px; border: 1px dashed var(--green-300); border-radius: 18px; background: var(--green-050); }
.page-blog-post .sources ul { margin: 0; padding-left: 20px; color: var(--muted); }

.page-blog-post .post-disclaimer { margin-top: 32px; color: var(--muted); font-size: .9rem; }

.page-blog-post .post-sidebar { position: sticky; top: 24px; display: grid; gap: 20px; }
.page-blog-post .post-sidebar-card { padding: 26px; }
.page-blog-post .post-sidebar-card h3 { margin-bottom: 14px; }
.page-blog-post .link-list { display: grid; gap: 0; }
.page-blog-post .link-list a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .92rem; font-weight: 600; }
.page-blog-post .link-list a:last-child { border-bottom: 0; }
.page-blog-post .link-list a span:last-child { color: var(--green-700); }
.page-blog-post .link-list a:hover { color: var(--green-700); }
.page-blog-post .post-sidebar-cta { background: var(--green-800); color: var(--white); }
.page-blog-post .post-sidebar-cta h3, .page-blog-post .post-sidebar-cta p { color: var(--white); }
.page-blog-post .post-sidebar-cta p { opacity: .85; margin-bottom: 18px; }

.page-blog-post .post-cta { padding: 78px 0; background: var(--cream); }
.page-blog-post .post-cta-box { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 44px; border-radius: var(--radius-lg); background: var(--green-100); }
.page-blog-post .post-cta-box h2 { margin-bottom: 12px; font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
.page-blog-post .post-cta-box p { max-width: 640px; margin-bottom: 0; }
.page-blog-post .post-cta-actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: flex-end; }

@media (max-width: 980px) {
  .page-blog-post .post-layout { grid-template-columns: 1fr; }
  .page-blog-post .post-sidebar { position: static; }
}

@media (max-width: 640px) {
  .page-blog-post .post-cta-box { grid-template-columns: 1fr; padding: 28px; }
  .page-blog-post .post-cta-actions { justify-content: flex-start; }
  .page-blog-post .post-author-card { flex-direction: column; }
}

/* ==========================================================================
   404 page (404.html). Reuses the true global tokens/fonts/components
   (.btn, .card, .grid-3, .eyebrow, .text-link, .hero-actions, .section-head)
   rather than a fully isolated page-* reset — same lightweight approach as
   the blog post pages, since this is a single simple page.
   ========================================================================== */
.page-404 .error-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 12vw, 130px) 0 90px;
  text-align: center;
  background: var(--cream);
}
.page-404 .error-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  z-index: 0;
}
.page-404 .error-blob-one {
  width: 420px;
  height: 420px;
  top: -180px;
  right: -140px;
  background: radial-gradient(circle, rgba(135,215,184,.45), transparent 70%);
}
.page-404 .error-blob-two {
  width: 320px;
  height: 320px;
  bottom: -160px;
  left: -120px;
  background: radial-gradient(circle, rgba(216,109,132,.18), transparent 70%);
}
.page-404 .error-hero .container { position: relative; z-index: 1; max-width: 680px; }
.page-404 .error-code {
  font-size: clamp(5.5rem, 14vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--green-500), var(--green-900));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.page-404 .error-hero .eyebrow { justify-content: center; margin-bottom: 14px; }
.page-404 .error-hero h1 { margin-bottom: 18px; }
.page-404 .error-lead { max-width: 520px; margin: 0 auto; font-size: 1.08rem; }
.page-404 .error-hero .hero-actions { justify-content: center; }

@media (max-width: 640px) {
  .page-404 .error-hero { padding: 56px 0 60px; }
  .page-404 .error-hero .hero-actions .btn { width: 100%; }
}