/* ==========================================================================
   Kiros Healthcare — design system
   Palette and proportions follow reference/kiros-mockup.html.
   Gold is split into two tokens: --gold (decorative / on dark) and
   --gold-text (text on light) because #c9a24b only reaches 2.9:1 on paper.
   ========================================================================== */

:root {
  --ink:      #0b2a33;
  --teal:     #0e5563;
  --teal2:    #0a3d47;
  --teal3:    #08222a;
  --sand:     #f4ede1;
  --gold:     #c9a24b;   /* decorative + button fills only, never small text */
  --gold-text:#7d5f11;   /* AA on paper (5.8:1) and on sand (5.2:1) */
  --gold-on-dark:#efd48f;/* AA small text anywhere on the teal gradient (4.7:1
                            at its lightest point; #c9a24b only reaches 2.8:1) */
  --paper:    #fbfaf7;
  --line:     #e4ddd0;
  --muted:    #5a6b6f;   /* AA on paper (5.35:1) */
  --wait:     #a02233;
  --ok:       #1d7a5f;
  --white:    #ffffff;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1080px;
  --wrap-wide: 1240px;
  --r: 10px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(11,42,51,.05), 0 8px 24px -12px rgba(11,42,51,.18);
  --shadow-lift: 0 2px 4px rgba(11,42,51,.06), 0 18px 40px -18px rgba(11,42,51,.28);

  /* Spacing rhythm — 4/8pt scale. Section padding uses the --space-section tiers. */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 40px;  --space-8: 48px;
  --space-9: 64px;  --space-10: 80px; --space-11: 96px;

  /* Motion — micro-interactions 150–300ms, entrances a touch slower. */
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-enter: 520ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in: cubic-bezier(.55,.06,.68,.19);
}

/* The palette is deliberately light-only; stop UA auto-darkening. */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.012em; line-height: 1.15; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal2); }

:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 24px; }
.sans { font-family: var(--sans); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--teal2); color: #fff; padding: 12px 18px;
  font-family: var(--sans); font-size: 15px; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

.eyebrow {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .18em;
  font-size: 12px; font-weight: 700; color: var(--gold-text); margin-bottom: 10px;
}
.eyebrow.on-dark { color: var(--gold-on-dark); }

/* ---------- buttons ---------- */
/* Gold is the conversion accent. Minimum 44px tall for touch. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; font-family: var(--sans); font-size: 15px; font-weight: 600;
  background: var(--gold); color: #241c05; padding: 12px 24px; border-radius: 6px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.btn:hover { background: #d8b264; color: #241c05; transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
.btn.alt { background: transparent; color: var(--teal2); border-color: var(--teal); }
.btn.alt:hover { background: rgba(14,85,99,.07); color: var(--teal2); }
.btn.on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn.on-dark:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,250,247,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 24px; max-width: var(--wrap-wide); margin: 0 auto;
}
/* Brand lockup: the Kiros cross mark paired with the wordmark set in the
   theme serif. The mark alone is not legible at header size, and the full
   stacked logo is square — so they are combined horizontally here. */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 40px; height: 40px; object-fit: contain; flex: none; }
.brand-text { font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: .02em; color: var(--teal2); line-height: 1.05; }
.brand .dot { color: var(--gold-text); }
.brand small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 3px; }
@media (max-width: 420px) {
  .brand-mark { width: 34px; height: 34px; }
  .brand-text { font-size: 16px; }
  .brand small { font-size: 9px; letter-spacing: .1em; }
}

.nav-main ul { display: flex; gap: 17px; list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 14px; }
.nav-main a {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  color: var(--ink); text-decoration: none; opacity: .85;
  border-bottom: 2px solid transparent;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-main a:hover { opacity: 1; border-bottom-color: var(--gold); }
.nav-main .current-menu-item > a { opacity: 1; border-bottom-color: var(--gold-text); font-weight: 600; }

.header-cta-signout { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; margin-right: 4px; }
.header-cta-signout:hover { color: var(--teal2); text-decoration: underline; }

.nav-toggle { display: none; min-height: 44px; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 9px 14px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--teal2); cursor: pointer; }

/* Collapse to the toggle before the seven nav items start wrapping against
   the brand lockup and the CTA. */
@media (max-width: 1140px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .nav-main { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav-main.open { display: block; }
  .nav-main ul { flex-direction: column; gap: 0; padding: 8px 24px 18px; }
  .nav-main li { border-bottom: 1px solid var(--line); }
  .nav-main li:last-child { border-bottom: none; }
  .nav-main a { display: block; padding: 13px 0; border-bottom: none; }
}

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--teal2), var(--teal) 60%, #0d6475);
  color: #fff; padding: 92px 0 78px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -120px; top: -80px; width: 420px; height: 420px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,162,75,.28), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.25rem); max-width: 17ch; color: #fff; }
.hero .lede { font-family: var(--sans); font-size: clamp(1rem, 1.6vw, 1.19rem); max-width: 62ch; margin: 22px 0 30px; color: rgba(255,255,255,.94); line-height: 1.6; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }

.page-hero { background: var(--teal2); color: #fff; padding: 64px 0 56px; }
.page-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.75rem); color: #fff; max-width: 20ch; }
.page-hero .lede { font-family: var(--sans); font-size: 1.06rem; max-width: 66ch; color: rgba(255,255,255,.9); margin-top: 14px; }

/* ---------- stat band ---------- */
.statband { background: var(--sand); border-bottom: 1px solid var(--line); }
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 36px 0; }
.stat .n { font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 700; color: var(--teal2); line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .l { font-family: var(--sans); font-size: 13.5px; color: var(--muted); line-height: 1.4; margin-top: 6px; }
@media (max-width: 820px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .statgrid { grid-template-columns: 1fr; } }

/* ---------- sections ---------- */
section.pad { padding: 68px 0; }
section.pad-sm { padding: 44px 0; }
h2.big { font-size: clamp(1.55rem, 3.2vw, 2.15rem); margin-bottom: 10px; }
h3.mid { font-size: clamp(1.2rem, 2.2vw, 1.45rem); margin-bottom: 8px; }
.sub { font-family: var(--sans); color: var(--muted); max-width: 68ch; margin-bottom: 30px; font-size: 1rem; }
.band-sand { background: var(--sand); }
.band-teal { background: var(--teal2); color: #fff; }
.band-teal h2, .band-teal h3 { color: #fff; }
.band-teal .sub { color: rgba(255,255,255,.82); }
/* Buttons carry their own colour — this link rule must not repaint them. */
.band-teal a:not(.btn) { color: var(--gold-on-dark); }

/* ---------- cards / grids ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; margin-bottom: 16px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
/* Bento-style lift, but only where the card is genuinely a link target. */
.card:has(a):hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: #d6cbb6; }
.card:last-child { margin-bottom: 0; }
.card h3 { color: var(--teal2); font-size: 1.16rem; margin-bottom: 8px; }
.card p { font-family: var(--sans); font-size: 15px; color: var(--muted); margin-bottom: 0; }
.card p + p { margin-top: .7em; }
.card.on-teal { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.card.on-teal h3 { color: var(--gold-on-dark); }
.card.on-teal p { color: rgba(255,255,255,.88); }

.step { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.step .k {
  font-family: var(--sans); width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; margin-bottom: 12px; font-size: 15px;
}
.step h3 { font-size: 1.08rem; margin-bottom: 6px; }
.step p { font-family: var(--sans); font-size: 14.5px; color: var(--muted); margin: 0; }

.pill {
  display: inline-block; font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  background: var(--sand); color: var(--teal2); padding: 5px 12px; border-radius: 20px;
  margin: 0 6px 8px 0; border: 1px solid var(--line);
}
.band-teal .pill { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); background: #fff; }
table.k { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14.5px; background: #fff; min-width: 640px; }
table.k caption { text-align: left; font-family: var(--sans); font-size: 13px; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.k th, table.k td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.k thead th { background: var(--teal2); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
table.k tbody tr:last-child td { border-bottom: none; }
table.k tbody tr:nth-child(even) { background: #fcfbf8; }
/* Tabular figures so price and wait columns line up and don't jitter. */
table.k td { font-variant-numeric: tabular-nums; }
table.k th[scope="row"] { font-variant-numeric: normal; }
table.k td.wait { color: var(--wait); font-weight: 600; }
table.k td.dur { color: var(--ok); font-weight: 600; }
table.k td.quote { color: var(--muted); font-style: italic; }
table.k td.est { color: var(--teal2); }
table.k td.est::after { content: ''; }
table.k th[scope="row"] { font-weight: 600; background: transparent; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 14.5px; }
.tnote { font-family: var(--sans); font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 10px; }

/* ---------- bar chart (native, from JSON) ---------- */
.barchart { font-family: var(--sans); margin: 8px 0 0; }
.barrow { display: grid; grid-template-columns: 190px 1fr 96px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.barrow:last-child { border-bottom: none; }
.barrow .lbl { font-size: 14px; font-weight: 600; color: var(--ink); }
.barrow .track { background: var(--sand); border-radius: 4px; height: 22px; overflow: hidden; border: 1px solid var(--line); }
.barrow .fill { height: 100%; background: linear-gradient(90deg, var(--teal), #12768c); border-radius: 3px 0 0 3px; }
.barrow .val { font-size: 14px; font-weight: 700; color: var(--teal2); text-align: right; font-variant-numeric: tabular-nums; }
.barrow .val small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
@media (max-width: 700px) {
  .barrow { grid-template-columns: 1fr 84px; gap: 6px 12px; }
  .barrow .lbl { grid-column: 1 / -1; }
}

/* Specialties the NHS reports by waiting time but not by pathway volume.
   Shown as a stated figure rather than an empty bar, which reads as broken. */
.wait-only { font-family: var(--sans); margin-top: 14px; }
.wait-only p {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0; padding: 12px 0 0; border-top: 1px dashed var(--line);
}
.wait-only b { font-size: 14px; font-weight: 600; color: var(--ink); }
.wait-only .figure { font-size: 15px; font-weight: 700; color: var(--wait); font-variant-numeric: tabular-nums; }
.wait-only .cap { font-size: 12.5px; color: var(--muted); flex: 1 1 260px; }

/* ---------- claims / sources ---------- */
.claim-ref {
  font-family: var(--sans); font-size: .62em; font-weight: 700; vertical-align: super;
  line-height: 0; margin-left: 2px; text-decoration: none; color: var(--gold-text);
  padding: 0 1px;
}
.band-teal .claim-ref, .hero .claim-ref, .page-hero .claim-ref { color: var(--gold-on-dark); }
.claim-ref:hover { text-decoration: underline; }

.sources { background: var(--sand); border-top: 1px solid var(--line); font-family: var(--sans); }
.sources h2 { font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 14px; }
.sources ol { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.sources li { margin-bottom: 8px; }
.sources li:target { background: #fff; outline: 2px solid var(--gold-text); border-radius: 4px; }
.sources .st { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 2px 7px; border-radius: 3px; margin-left: 6px; border: 1px solid; }
.st-verified   { color: #14603f; border-color: #a8ccb8; background: #eaf5ef; }
.st-harmonised { color: #14603f; border-color: #a8ccb8; background: #eaf5ef; }
.st-illustrative { color: #7a5510; border-color: #e0cb95; background: #fbf3e0; }
.st-confirm-before-publish, .st-client-asserted { color: #8a2432; border-color: #e5b9bf; background: #fbeef0; }

/* ---------- notices ---------- */
.notice {
  font-family: var(--sans); font-size: 14px; border-left: 4px solid var(--gold);
  background: #fdfaf2; padding: 16px 18px; border-radius: 0 var(--r) var(--r) 0;
  color: var(--ink); margin: 0 0 24px;
}
.notice strong { color: var(--teal2); }
.notice.gov { border-left-color: var(--wait); background: #fdf4f5; }
.notice p:last-child { margin-bottom: 0; }

blockquote.pull {
  border-left: 4px solid var(--gold); margin: 28px 0; padding: 4px 0 4px 22px;
  font-size: 1.2rem; color: var(--teal2); font-style: italic;
}
blockquote.pull p:last-child { margin-bottom: 0; }

/* ---------- figures ---------- */
figure.photo { margin: 0 0 20px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; }
figure.photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
figure.photo figcaption { font-family: var(--sans); font-size: 12.5px; color: var(--muted); padding: 10px 14px; }
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 16 / 10; background: repeating-linear-gradient(45deg, var(--sand), var(--sand) 12px, #efe6d6 12px, #efe6d6 24px);
  color: var(--muted); font-family: var(--sans); font-size: 13px; padding: 20px;
}

/* ---------- pricing tool ---------- */
.tool-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; font-family: var(--sans); }
.tool-bar label { font-size: 13px; font-weight: 600; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.seg button { font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 9px 16px; border: none; background: #fff; color: var(--teal2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--teal2); color: #fff; }
.tool-bar select, .tool-bar input[type="search"] {
  font-family: var(--sans); font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--ink); min-width: 180px;
}
.saving { font-weight: 700; color: var(--ok); }

/* ---------- forms ---------- */
.form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--sans); font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--teal2); }
.field .hint { font-family: var(--sans); font-size: 12.5px; color: var(--muted); font-weight: 400; display: block; margin-top: 2px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 15.5px; padding: 11px 13px;
  border: 1px solid #cdc4b3; border-radius: 6px; background: #fff; color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); }
.field.req label::after { content: " *"; color: var(--wait); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-family: var(--sans); font-size: 13.5px; color: var(--muted); }
.consent input { width: auto; margin-top: 4px; flex: none; }
.hp { position: absolute; left: -9999px; }
.form-msg { font-family: var(--sans); font-size: 15px; padding: 14px 16px; border-radius: 6px; margin-bottom: 20px; }
.form-msg.ok { background: #eaf5ef; border: 1px solid #a8ccb8; color: #14603f; }
.form-msg.err { background: #fbeef0; border: 1px solid #e5b9bf; color: #8a2432; }
.form-errors { font-family: var(--sans); font-size: 14px; color: #8a2432; margin: 0 0 14px; padding-left: 20px; }

/* ---------- footer ---------- */
.site-footer { background: var(--teal3); color: #cfe0e3; font-family: var(--sans); font-size: 14px; padding: 48px 0 32px; line-height: 1.7; }
.site-footer a { color: #fff; text-decoration: none; opacity: .85; }
.site-footer a:hover { opacity: 1; text-decoration: underline; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-on-dark); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.footer-brand { font-family: var(--serif); font-weight: 700; font-size: 20px; color: #fff; margin-bottom: 8px; }
.footer-brand .dot { color: var(--gold); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 34px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; font-size: 13px; }
.disclaimer-band { background: #061a1f; color: #90a8ac; font-family: var(--sans); font-size: 12.5px; padding: 18px 0; line-height: 1.6; }
.disclaimer-band a { color: #cfe0e3; }

/* ---------- back to top ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--teal2); cursor: pointer; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--sand); }
.to-top svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---------- utility ---------- */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.mt0 { margin-top: 0; }
.lead-note { font-family: var(--sans); font-size: 13px; color: var(--muted); font-style: italic; margin-top: 12px; }
.cta-band { background: var(--sand); text-align: center; padding: 62px 0; }
.cta-band .btn { margin: 6px; }
.spec { border-top: 3px solid var(--gold); padding-top: 26px; margin-bottom: 44px; }
.spec:last-child { margin-bottom: 0; }
.spec .meta { font-family: var(--sans); font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.spec .meta b { color: var(--teal2); }

/* ---------- proof strip (Trust & Authority pattern: proof directly after hero) ---------- */
.proof { background: #fff; border-bottom: 1px solid var(--line); }
.proof-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  font-family: var(--sans);
}
.proof-item {
  padding: 22px 24px; border-right: 1px solid var(--line);
  display: flex; gap: 13px; align-items: flex-start;
}
.proof-item:last-child { border-right: none; }
.proof-item svg { width: 22px; height: 22px; flex: none; color: var(--gold-text); margin-top: 1px; }
.proof-item b { display: block; font-size: 14px; color: var(--teal2); font-weight: 700; line-height: 1.3; }
.proof-item span { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: block; margin-top: 3px; }
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-item:nth-child(2) { border-right: none; }
  .proof-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-item { border-right: none; border-bottom: 1px solid var(--line); }
  .proof-item:last-child { border-bottom: none; }
}

/* ---------- partner / oversight logo blocks ---------- */
.logo-tile {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 16px; margin-bottom: 14px;
}
.logo-tile img { max-height: 54px; width: auto; }
.card .logo-tile { margin-bottom: 16px; }

.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.footer-logo img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.footer-brand { font-family: var(--serif); font-weight: 700; font-size: 20px; color: #fff; margin: 0; line-height: 1.1; }

/* ---------- portal (bento sign-in) ---------- */
.portal {
  background: linear-gradient(165deg, var(--teal2), var(--teal) 55%, #0d6475);
  color: #fff; padding: 72px 0 84px; min-height: 72vh;
}
.portal-head { text-align: center; margin-bottom: 38px; }
.portal-mark { width: 62px; height: 62px; margin: 0 auto 18px; object-fit: contain; background: #fff; border-radius: 14px; padding: 7px; }
.portal-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: #fff; margin: 0 0 10px; }
.portal-head .lede { font-family: var(--sans); color: rgba(255,255,255,.86); font-size: 1.02rem; margin: 0; }
.portal-head .eyebrow { margin-bottom: 8px; }

.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento-tile {
  grid-column: span 2;
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg); padding: 26px; text-decoration: none; color: #fff;
  min-height: 172px;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.bento-tile.wide { grid-column: span 4; }
a.bento-tile:hover {
  transform: translateY(-3px); background: rgba(0,0,0,.26);
  border-color: rgba(201,162,75,.6); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6);
  color: #fff;
}
a.bento-tile:active { transform: translateY(-1px); }
.bento-tile svg { width: 26px; height: 26px; color: var(--gold-on-dark); margin-bottom: 14px; }
.bento-tile h2 { font-size: 1.22rem; color: #fff; margin: 0 0 7px; }
.bento-tile p { font-family: var(--sans); font-size: 14.5px; color: rgba(255,255,255,.82); margin: 0 0 16px; }
.bento-cta {
  font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold-on-dark); margin-top: auto;
}
.bento-tile.is-pending { opacity: .8; }
.bento-tile.is-pending .bento-cta { color: #c8d6d9; }
.portal-foot { text-align: center; margin-top: 30px; font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.78); }
.portal-foot a { color: var(--gold-on-dark); }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-tile, .bento-tile.wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento-tile, .bento-tile.wide { grid-column: span 1; }
}

/* ---------- scroll reveal ----------
   Transform ONLY — deliberately no opacity. An earlier version faded from
   opacity 0 and a renderer quirk left cards stranded invisible, which is the
   one failure mode this effect must never have. With transform alone the
   worst possible outcome is content sitting 14px low but fully readable.
   The offset is applied only when JS adds .js-reveal and motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal { transform: translateY(14px); }
  .js-reveal .reveal.in {
    transform: none;
    transition: transform var(--dur-enter) var(--ease-out);
  }
  .js-reveal .reveal.in:nth-child(2) { transition-delay: 60ms; }
  .js-reveal .reveal.in:nth-child(3) { transition-delay: 120ms; }
  .js-reveal .reveal.in:nth-child(4) { transition-delay: 180ms; }
}


/* ---------- gateway (the front door) ---------- */
.site-header.is-bare { background: transparent; border-bottom: none; position: static; }
.site-header.is-bare .header-in { justify-content: center; padding-top: 30px; }
.site-header.is-bare .brand { pointer-events: none; }

.gateway { background: linear-gradient(168deg, var(--teal2), var(--teal) 58%, #0b4b59); color: #fff; padding: 46px 0 84px; min-height: 78vh; }
.gateway-head { text-align: center; max-width: 700px; margin: 0 auto 46px; }
.gateway-mark { width: 74px; height: 74px; margin: 0 auto 22px; object-fit: contain; background: #fff; border-radius: 16px; padding: 9px; }
.gateway-head h1 { font-size: clamp(2.1rem, 5vw, 3rem); color: #fff; margin-bottom: 16px; }
.gateway-head .lede { font-family: var(--sans); font-size: 1.05rem; color: rgba(255,255,255,.88); line-height: 1.6; margin: 0; }

.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 940px; margin: 0 auto; }
.door {
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg); padding: 34px 30px; text-decoration: none; color: #fff;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.door:hover { transform: translateY(-4px); background: rgba(0,0,0,.28); border-color: rgba(201,162,75,.65); box-shadow: 0 22px 48px -22px rgba(0,0,0,.7); color: #fff; }
.door:active { transform: translateY(-1px); }
.door-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--gold-on-dark); margin-bottom: 12px; }
.door-title { font-family: var(--serif); font-size: 1.55rem; font-weight: 700; line-height: 1.2; margin-bottom: 12px; }
.door-text { font-family: var(--sans); font-size: 15px; color: rgba(255,255,255,.85); line-height: 1.6; margin-bottom: 22px; }
.door-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--gold-on-dark); margin-top: auto; }
.door-cta svg { width: 17px; height: 17px; transition: transform var(--dur) var(--ease-out); }
.door:hover .door-cta svg { transform: translateX(4px); }
.gateway-foot { text-align: center; margin-top: 34px; font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,.72); }
.gateway-foot a { color: var(--gold-on-dark); }
@media (max-width: 780px) { .doors { grid-template-columns: 1fr; } }

/* ---------- section switch strip ---------- */
.section-switch { background: var(--teal3); font-family: var(--sans); font-size: 13px; }
.section-switch .wrap-wide { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; padding-top: 9px; padding-bottom: 9px; }
.section-switch span { color: #b7c9cc; }
.section-switch a { color: var(--gold-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.section-switch a:hover { color: #fff; }

/* The patient branch runs warmer; the partner branch stays cooler and denser. */
body.section-patients .hero-patient { background: linear-gradient(158deg, var(--teal2), var(--teal) 52%, #12707f); }
body.section-patients .eyebrow { color: var(--gold-text); }
body.section-patients .card h3 { color: var(--teal2); }
body.section-patients section.pad { padding: 74px 0; }
body.section-partners section.pad { padding: 62px 0; }
body.section-partners table.k { font-size: 14px; }

.portal-inner { min-height: 0; padding: 56px 0 44px; }