/* =========================================================================
   Johns Hopkins Polyclinic - design system
   Warm ivory ground, deep clinical navy, desert gold. Built with logical
   properties throughout so the Arabic (RTL) build needs no CSS rewrite.
   ========================================================================= */

:root {
  /* Core palette */
  --ink: #131C2B;
  --ink-2: #253449;
  --muted: #5C6880;
  --muted-2: #7C879B;

  --brand-900: #0C2A52;
  --brand-700: #17508F;
  --brand-600: #1C5EA6;
  --brand-100: #DEE9F6;
  --brand-50: #EFF4FA;

  --logo-navy: #012342;
  --logo-blue: #17508F;
  --gold-600: #8A6A1E;
  --gold-700: #7B5E1A;   /* darker gold, for the pale footer ground */ /* darkened so gold text clears 4.5:1 on ivory and sand */
  --gold-500: #C9A24A;
  --gold-200: #EFE0BE;
  --gold-50: #FBF4E4;

  --ivory: #FBF8F3;
  --sand: #F3EEE4;
  --surface: #FFFFFF;
  --line: #E6DFD2;
  --line-soft: #F0EAE0;

  --danger: #A6432F;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-subhead: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.34vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.26rem + 0.68vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);

  /* Space + shape */
  --gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
  --pad-section: clamp(3.5rem, 2.4rem + 4.6vw, 7rem);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --shadow-xs: 0 1px 2px rgba(19, 28, 43, 0.06);
  --shadow-sm: 0 6px 18px -10px rgba(19, 28, 43, 0.28);
  --shadow-md: 0 20px 46px -28px rgba(19, 28, 43, 0.42);
  --shadow-lg: 0 40px 90px -50px rgba(11, 37, 69, 0.55);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--brand-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-900); }

/* Three families, one job each. Tier 1 display serif for h1/h2 and anything
   at statement scale; tier 2 Montserrat for every subheading and UI label,
   matching the logo wordmark; tier 3 Plus Jakarta Sans for running text.
   Nothing below roughly 1.4rem uses the serif - mixing serif and sans at the
   same size is what made the old type read as inconsistent. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink);
}
h3, h4, h5, h6 {
  font-family: var(--font-subhead);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--brand-100); color: var(--brand-900); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px;
  z-index: 200; transform: translateY(-160%);
  background: var(--brand-700); color: #fff; padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* --------------------------------------------------------------- layout */
.wrap { width: min(100% - 2.5rem, 1180px); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

section { padding-block: var(--pad-section); }
section.tight { padding-block: clamp(2.4rem, 1.8rem + 2.4vw, 4rem); }

.stack > * + * { margin-block-start: 1rem; }
.stack-lg > * + * { margin-block-start: 1.6rem; }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------ type bits */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-subhead); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-600);
  margin-block-end: 0.9rem;
}
/* Every eyebrow label sits between two gold rules, left-aligned or centred. */
.eyebrow::before,
.eyebrow::after {
  content: ""; inline-size: 22px; block-size: 2px; border-radius: 2px;
  background: var(--gold-500);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.lead { font-size: var(--step-1); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 48ch; }
.center .measure, .center .measure-narrow { margin-inline: auto; }

/* Pending-fact token, e.g. AED [X] */
.token {
  display: inline;
  background: var(--gold-50);
  border: 1px dashed var(--gold-500);
  color: var(--gold-600);
  border-radius: 999px;
  padding-inline: 0.5em;
  padding-block: 0.05em;
  font-size: 0.92em;
  font-weight: 600;
  /* long placeholder sentences must wrap, or they force their container wider
     than its column; clone keeps each wrapped fragment looking like a pill */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Editor-only compliance note; hidden in production via body.is-live */
.note {
  border-inline-start: 4px solid var(--danger);
  background: #FBF1EE;
  color: #6E2C1E;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: var(--step--1);
  margin-block: 1.25rem;
}
.note strong { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85em; }
body.is-live .note { display: none; }

/* ------------------------------------------------------------- buttons */
.btn {
  font-family: var(--font-subhead);
  --btn-bg: var(--brand-700);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: 999px;
  padding: 0.95rem 1.6rem;
  font-weight: 600; font-size: var(--step-0); line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--brand-700); }
.btn--primary:hover { background: var(--brand-900); }
/* Light sky blue, for a call to action sitting on a dark navy band. It has to
   be lighter than the band behind it, hence a tint rather than a mid blue:
   7.9:1 against its own label, 5.8:1 against the band. */
.btn--blue { --btn-bg: #8FBDF0; --btn-fg: #0A2544; }
.btn--blue:hover { background: #A9CEF6; }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--brand-900);
  border-color: var(--line); box-shadow: none; background: var(--surface);
}
.btn--ghost:hover { background: var(--brand-50); border-color: var(--brand-100); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--brand-900); }
.btn--outline-light {
  --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,0.4); box-shadow: none;
}
.btn--outline-light:hover { background: rgba(255,255,255,0.1); }
.btn--sm { padding: 0.62rem 1.05rem; font-size: var(--step--1); }
.btn--block { inline-size: 100%; }
.btn .ico-wa { inline-size: 1.15em; block-size: 1.15em; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.center .btn-row { justify-content: center; }
@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { inline-size: 100%; }
}

/* Text link with arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; text-decoration: none; color: var(--brand-700);
}
.arrow-link::after {
  content: "→"; transition: transform 0.22s var(--ease);
  display: inline-block;
}
[dir="rtl"] .arrow-link::after { content: "←"; }
.arrow-link:hover::after { transform: translateX(4px); }
[dir="rtl"] .arrow-link:hover::after { transform: translateX(-4px); }

/* -------------------------------------------------------------- topbar */
.topbar {
  background: var(--brand-900);
  color: #D5E3F4;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-block-size: 38px; flex-wrap: wrap;
}
.topbar__licence { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.topbar .dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--gold-500); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.25);
}
.topbar__links { display: flex; gap: 1.2rem; list-style: none; padding: 0; }
.topbar__links a { color: #D5E3F4; text-decoration: none; }
.topbar__links a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 700px) {
  /* Both numbers stay one tap away in the header and the floating button. */
  .topbar__links { display: none; }
  .topbar__inner { justify-content: center; }
}

/* -------------------------------------------------------------- header */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: rgba(251, 248, 243, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  border-block-end: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.site-header.is-stuck {
  border-block-end-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(19, 28, 43, 0.5);
  background: rgba(251, 248, 243, 0.95);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-block-size: var(--header-h);
}

/* The logo is artwork, not typography. It is deliberately outside the three-tier
   type system: do not retarget these rules when the site's fonts change. */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--brand-700); }
.brand__mark { inline-size: 28px; block-size: 37px; flex: none; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.005em; color: var(--logo-navy);
}
.brand__sub {
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.33em;
  text-transform: uppercase; color: var(--logo-blue);
  margin-block-start: 0.12rem;
}

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: 0.15rem; list-style: none; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  font-family: var(--font-subhead);
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 0; border-radius: 999px;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nav__link:hover { background: var(--brand-50); color: var(--brand-900); }
.nav__link[aria-current="page"] { color: var(--brand-700); background: var(--brand-100); }
.nav__link .chev { inline-size: 10px; transition: transform 0.2s var(--ease); }
.nav__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav__toggle[aria-expanded="true"] { background: var(--brand-50); color: var(--brand-900); }

.submenu {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-start: 0;
  min-inline-size: 290px; padding: 0.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  display: grid; gap: 2px;
  animation: menu-in 0.18s var(--ease) both;
}
.submenu[hidden] { display: none; }
.submenu a {
  display: grid; gap: 1px; padding: 0.6rem 0.8rem;
  border-radius: 12px; text-decoration: none; color: var(--ink);
}
.submenu a:hover { background: var(--brand-50); }
.submenu strong { font-weight: 600; font-size: 0.95rem; }
.submenu span { font-size: 0.8rem; color: var(--muted); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

.site-header__actions { display: flex; align-items: center; gap: 0.6rem; margin-inline-start: 0.5rem; }

.burger {
  display: none; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.burger__box { display: grid; gap: 4px; }
.burger__box span {
  display: block; inline-size: 18px; block-size: 2px;
  background: var(--ink); border-radius: 2px;
}

@media (max-width: 1200px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .site-header__actions { margin-inline-start: auto; }
}
@media (max-width: 420px) {
  .site-header__cta span { display: none; }
  .site-header__cta { padding-inline: 0.8rem; }
}

/* -------------------------------------------------------------- drawer */
.drawer { position: fixed; inset: 0; z-index: 150; }
.drawer[hidden] { display: none; }
.drawer::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(9, 24, 48, 0.45); backdrop-filter: blur(3px);
  animation: fade-in 0.25s var(--ease) both;
}
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  inline-size: min(400px, 92vw); background: var(--ivory);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: drawer-in 0.28s var(--ease) both;
  overflow-y: auto;
}
@keyframes drawer-in { from { transform: translateX(100%); } }
[dir="rtl"] .drawer__panel { animation-name: drawer-in-rtl; }
@keyframes drawer-in-rtl { from { transform: translateX(-100%); } }
@keyframes fade-in { from { opacity: 0; } }

.drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem; border-block-end: 1px solid var(--line);
}
.drawer__title { font-family: var(--font-subhead); font-size: 1.2rem; font-weight: 600; }
.drawer__close {
  inline-size: 40px; block-size: 40px; font-size: 1.6rem; line-height: 1;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.drawer__nav { padding: 1rem 1.3rem 1.4rem; display: grid; }
.drawer__nav a {
  padding: 0.7rem 0; text-decoration: none; color: var(--ink); font-weight: 600;
  border-block-end: 1px solid var(--line-soft);
}
.drawer__nav a.is-sub {
  padding-inline-start: 1rem; font-weight: 500; font-size: 0.94rem; color: var(--muted);
}
.drawer__group {
  margin-block: 1.2rem 0.3rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600);
}
.drawer__group:first-child { margin-block-start: 0; }
.drawer__foot { margin-block-start: auto; padding: 1.2rem 1.3rem 1.6rem; display: grid; gap: 0.6rem; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--pad-section); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  inset-block-start: -30%; inset-inline-end: -12%;
  inline-size: 62vw; block-size: 62vw; max-inline-size: 780px; max-block-size: 780px;
  background: radial-gradient(circle at 35% 35%, rgba(28, 94, 166, 0.16), rgba(28, 94, 166, 0) 62%);
  border-radius: 50%;
}
.hero::after {
  content: ""; position: absolute; z-index: -1;
  inset-block-end: -22%; inset-inline-start: -14%;
  inline-size: 44vw; block-size: 44vw; max-inline-size: 520px; max-block-size: 520px;
  background: radial-gradient(circle at 50% 50%, rgba(201, 162, 74, 0.18), rgba(201, 162, 74, 0) 65%);
  border-radius: 50%;
}
.hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { margin-block-end: 1.1rem; }
.hero .lead { max-width: 52ch; }

.hero__badges {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  margin-block-start: 1.5rem; font-size: var(--step--1); color: var(--muted);
  align-items: center;
}
.hero__badges span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__badges svg { inline-size: 16px; block-size: 16px; color: var(--brand-600); flex: none; }

/* Hero visual - abstract placeholder, no stock faces */
.hero__visual { position: relative; }
.canvas {
  position: relative; aspect-ratio: 4 / 4.4;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 20% 10%, #2468B5 0%, #17508F 42%, #0C2A52 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.canvas::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 78% 18%, rgba(201, 162, 74, 0.5), transparent 70%),
    radial-gradient(50% 35% at 10% 88%, rgba(255, 255, 255, 0.16), transparent 70%);
}
.canvas__rings { position: absolute; inset: 0; opacity: 0.5; }
.canvas__rings i {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  translate: -50% -50%;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%;
}
.canvas__rings i:nth-child(1) { inline-size: 46%; block-size: 46%; }
.canvas__rings i:nth-child(2) { inline-size: 68%; block-size: 68%; }
.canvas__rings i:nth-child(3) { inline-size: 92%; block-size: 92%; }
.canvas__label {
  position: absolute; inset-block-end: 1.6rem; inset-inline: 1.6rem;
  color: rgba(255, 255, 255, 0.9); font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600;
}
.canvas__note {
  position: absolute; inset-block-start: 50%; inset-inline: 12%;
  translate: 0 -50%; text-align: center;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display); font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  line-height: 1.35;
}

.float-card {
  position: absolute; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 0.85rem 1.1rem;
  display: grid; gap: 0.15rem; max-inline-size: 230px;
}
.float-card strong { font-size: 0.95rem; }
.float-card span { font-size: 0.78rem; color: var(--muted); }
.float-card--a { inset-block-start: 8%; inset-inline-start: -6%; }
.float-card--b { inset-block-end: 9%; inset-inline-end: -5%; }
.float-card .stars { color: var(--gold-500); letter-spacing: 0.1em; font-size: 0.9rem; }
@media (max-width: 860px) {
  /* The same three facts already sit in .hero__badges, so drop the overlays
     rather than let them cover the panel on a phone. */
  .float-card { display: none; }
}

/* -------------------------------------------------------- trust strip */
.trust {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust__item { background: var(--surface); padding: 1.6rem 1.5rem; display: grid; gap: 0.5rem; }
.trust__item h3 { font-family: var(--font-subhead); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.trust__item p { font-size: var(--step--1); color: var(--muted); line-height: 1.55; }
.trust__icon {
  inline-size: 40px; block-size: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700); margin-block-end: 0.3rem;
}
.trust__icon svg { inline-size: 20px; block-size: 20px; }

/* --------------------------------------------------------------- cards */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  display: flex; flex-direction: column; gap: 0.75rem;
  box-shadow: var(--shadow-xs);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.card h3 { font-size: var(--step-1); }
.card p { color: var(--muted); font-size: 0.96rem; }
.card .arrow-link { margin-block-start: auto; padding-block-start: 0.4rem; }
.card__icon {
  inline-size: 46px; block-size: 46px; border-radius: 14px;
  display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg, var(--brand-100), var(--brand-50));
  color: var(--brand-700);
}
.card__icon svg { inline-size: 22px; block-size: 22px; }
.card__price {
  font-family: var(--font-subhead); font-weight: 600; font-size: 1.05rem; color: var(--brand-700);
  font-weight: 600;
}
/* Push a trailing price or link to the bottom so rows of cards line up */
.card > .card__price:last-child,
.card > .arrow-link:last-child { margin-block-start: auto; padding-block-start: 0.4rem; }
.card--flat { box-shadow: none; background: transparent; border-color: transparent; padding-inline: 0; }
.card--tinted { background: var(--brand-50); border-color: var(--brand-100); }
.card--gold { background: var(--gold-50); border-color: var(--gold-200); }

.pillar-grid { display: grid; gap: var(--gap); }
@media (min-width: 780px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- prices */
.price-list { display: grid; gap: 0.65rem; }
.price-row {
  display: flex; align-items: baseline; gap: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.25rem;
}
.price-row__name { font-weight: 600; }
.price-row__meta { display: block; font-size: var(--step--1); color: var(--muted); font-weight: 400; }
.price-row__dots {
  flex: 1; border-block-end: 1px dotted var(--line);
  translate: 0 -0.25rem; min-inline-size: 1rem;
}
.price-row__value { font-family: var(--font-subhead); font-weight: 600; font-size: 1.05rem; color: var(--brand-700); white-space: nowrap; }

.price-table { inline-size: 100%; border-collapse: collapse; font-size: 0.97rem; }
.price-table caption {
  text-align: start; font-family: var(--font-display); font-size: var(--step-2);
  margin-block-end: 0.9rem; color: var(--ink);
}
.price-table th, .price-table td {
  text-align: start; padding: 0.85rem 1rem; border-block-end: 1px solid var(--line-soft);
  vertical-align: top;
}
.price-table thead th {
  font-family: var(--font-subhead); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  border-block-end: 1px solid var(--line);
}
.price-table tbody tr:hover { background: var(--brand-50); }
.price-table td:last-child, .price-table th:last-child { text-align: end; white-space: nowrap; }
.table-scroll { overflow-x: auto; border-radius: var(--radius); }

/* --------------------------------------------------------------- steps */
.steps { counter-reset: step; display: grid; gap: var(--gap); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.step {
  position: relative; counter-increment: step;
  padding-block-start: 2.6rem;
  border-block-start: 2px solid var(--line);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; inset-block-start: -1px; inset-inline-start: 0;
  translate: 0 -50%;
  background: var(--ivory); padding-inline-end: 0.7rem;
  font-family: var(--font-subhead); font-size: 1.3rem; font-weight: 700; color: var(--gold-600);
}
.step h3 { font-size: var(--step-1); margin-block-end: 0.4rem; }
.step p { color: var(--muted); font-size: 0.96rem; }

/* --------------------------------------------------------------- bands */
.band {
  background: linear-gradient(140deg, var(--brand-900) 0%, #103A6E 55%, var(--brand-700) 100%);
  color: #E9F1FA; border-radius: var(--radius-xl);
  padding: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  position: relative; overflow: hidden;
}
.band::after {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%;
  inline-size: 420px; block-size: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,74,0.28), transparent 65%);
}
.band > * { position: relative; z-index: 1; }
.band h2, .band h3 { color: #fff; }
.band p { color: rgba(233, 241, 250, 0.85); }
.band a:not(.btn) { color: var(--gold-200); }
.band .list-check li, .band .list-cross li { color: rgba(233, 241, 250, 0.92); }
.band .list-check li::before {
  background-color: rgba(233, 241, 250, 0.16);
  box-shadow: inset 0 0 0 1px rgba(233, 241, 250, 0.34);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.3 4.4 9.2 10.5 3' fill='none' stroke='%23E9F1FA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.band-grid { display: grid; gap: clamp(1.6rem, 1rem + 2.5vw, 3rem); align-items: center; }
@media (min-width: 900px) { .band-grid { grid-template-columns: 1.15fr 0.85fr; } }

/* panel holding a checklist inside a dark band */
.band-card {
  background: rgba(233, 241, 250, 0.06);
  border: 1px solid rgba(233, 241, 250, 0.16);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  position: relative; overflow: hidden;
}
.band-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.9), transparent);
}
.band .band-card__title {
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-200);
  margin-block-end: 1.2rem;
}
.band-card .list-check { gap: 0; }
.band-card .list-check li { align-items: center; }
.band-card .list-check li + li {
  margin-block-start: 0.85rem; padding-block-start: 0.85rem;
  border-block-start: 1px solid rgba(233, 241, 250, 0.12);
}
.band-card__facts {
  display: grid; gap: 0.9rem 1.4rem; margin: 1.3rem 0 0;
  padding-block-start: 1.2rem; border-block-start: 1px solid rgba(233, 241, 250, 0.16);
}
@media (min-width: 520px) { .band-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.band-card__facts dt {
  font-size: var(--step--1); letter-spacing: 0.04em; color: rgba(233, 241, 250, 0.62);
}
.band-card__facts dd { margin: 0.25rem 0 0; font-weight: 600; color: #fff; }

.sand-band {
  background: var(--sand); border-radius: var(--radius-xl);
  padding: clamp(2rem, 1.4rem + 3vw, 3.4rem);
}

.cta-band { text-align: center; }
.cta-band h2 { margin-block-end: 0.7rem; }
.cta-band p { margin-inline: auto; max-width: 56ch; margin-block-end: 1.6rem; }

/* ----------------------------------------------------------- page hero */
.page-hero { padding-block: clamp(2.6rem, 2rem + 3vw, 5rem) clamp(2rem, 1.6rem + 2vw, 3.4rem); position: relative; }
.page-hero__inner { display: grid; gap: 1.2rem; max-width: 66ch; }
.page-hero h1 { font-size: var(--step-4); }


/* ----------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 0.75rem; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq details[open] { border-color: var(--brand-100); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; inline-size: 12px; block-size: 12px;
  border-inline-end: 2px solid var(--brand-700); border-block-end: 2px solid var(--brand-700);
  rotate: 45deg; translate: 0 -3px; transition: rotate 0.22s var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 3px; }
.faq summary:hover { background: var(--brand-50); }
.faq__body { padding: 0 1.35rem 1.3rem; color: var(--muted); }
.faq__body > * + * { margin-block-start: 0.7rem; }

/* ------------------------------------------------------------- doctors */
.doctor {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.6rem; gap: 0.6rem;
  /* column flex, not grid: the cards are equalised by .grid--3, and a grid would
     hand the spare height to its auto rows, stretching the chips out of shape.
     Here the spare height collects above the book button instead, which pins it
     to the foot of every card so the three line up. */
  display: flex; flex-direction: column; align-items: stretch;
  box-shadow: var(--shadow-xs);
}
.doctor__avatar {
  inline-size: 68px; block-size: 68px; border-radius: 22px;
  background: linear-gradient(150deg, var(--brand-100), var(--sand));
  display: grid; place-items: center;
  font-family: var(--font-subhead); font-size: 1.2rem; font-weight: 700; color: var(--brand-700);
  border: 1px solid var(--line);
}
.doctor__photo {
  inline-size: 68px; block-size: 68px; border-radius: 22px;
  object-fit: cover; object-position: center 20%;
  border: 1px solid var(--line); background: var(--brand-50);
}
.doctor__name { font-size: var(--step-1); }
.doctor__role { font-family: var(--font-subhead); font-size: var(--step--1); font-weight: 600; color: var(--brand-600); letter-spacing: 0.04em; }
.doctor__quote {
  border-inline-start: 3px solid var(--gold-500); padding-inline-start: 0.9rem;
  font-family: var(--font-body); font-size: 1.02rem; color: var(--ink-2); line-height: 1.55;
}
.doctor__meta { font-size: var(--step--1); color: var(--muted); }
/* A clinician who is not seeing patients yet. The pill sits in the card's top
   corner, beside the photo, so the card keeps its shape. */
.doctor { position: relative; }
.doctor__status {
  position: absolute; inset-block-start: 1.6rem; inset-inline-end: 1.6rem;
  font-family: var(--font-subhead); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.32rem 0.75rem; border-radius: 999px;
  background: var(--gold-50); color: var(--gold-700); border: 1px solid var(--gold-200);
}
/* sits at the foot of the card, pushed down so it reads as the card's action
   rather than another line of detail */
.doctor__book { margin-block-start: auto; padding-block-start: 0.4rem; justify-content: center; }
/* Card buttons keep one size and one line. The cards narrow to about 260px at
   some widths (small phones, and the three-column grid near 1000px), so the
   optional words in a long label sit in .btn__more and drop out when the card is
   too narrow for them: "Notify me when available" becomes "Notify me". The
   thresholds are the card content widths those labels were measured to need. */
.doctor { container-type: inline-size; }
@container (max-width: 260px) { .btn__more { display: none; } }
@container (max-width: 285px) { .btn__more--wide { display: none; } }
/* A card that sits alone in its section (Divyanshi Tyagi) spans two of the
   three columns, so a long bio reads at a normal line length instead of a
   narrow column. */
@media (min-width: 640px) { .doctor--wide { grid-column: span 2; } }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tag {
  font-family: var(--font-subhead);
  font-size: 0.75rem; font-weight: 600; padding: 0.28rem 0.65rem;
  border-radius: 999px; background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--brand-100);
}
.tag--gold { background: var(--gold-50); color: var(--gold-600); border-color: var(--gold-200); }

/* ------------------------------------------------------------- reviews */
.review {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.6rem; display: grid; gap: 0.7rem;
}
.review__stars { color: var(--gold-500); letter-spacing: 0.14em; }
.review blockquote { font-size: 1.02rem; color: var(--ink-2); line-height: 1.6; }
.review figcaption { font-size: var(--step--1); color: var(--muted); font-weight: 600; }

/* ---------------------------------------------------------- good / bad */
.split-list { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .split-list { grid-template-columns: repeat(2, 1fr); } }
.list-check, .list-cross { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.list-check li, .list-cross li {
  display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.97rem; color: var(--ink-2);
}
.list-check li::before, .list-cross li::before {
  content: ""; flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 12px;
  margin-block-start: 0.1rem;
}
.list-check li::before {
  background-color: var(--brand-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.3 4.4 9.2 10.5 3' fill='none' stroke='%2317508F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.list-cross li::before {
  background-color: #F5E4E0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23A6432F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------- footer */
/* Deep navy, taken from the logo's own wordmark colour. The mark is #17508F and
   cannot reach 3:1 against any dark ground - pure black only manages 2.58:1 - so
   the lockup sits on a light chip instead, in its own colours. Recolouring the
   logo is not an option here; giving it a correct background is. */
.site-footer {
  background: var(--logo-navy); color: #CBD9EC;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
}
.site-footer .brand {
  background: var(--ivory);
  padding: 0.5rem 0.9rem 0.5rem 0.7rem;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.site-footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1.4fr; } }
.site-footer .brand__name { color: var(--logo-navy); }
.site-footer .brand__sub { color: var(--logo-blue); }
.site-footer__licence {
  margin-block: 1.1rem 0.8rem; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--gold-200);
}
.site-footer__address { font-style: normal; font-size: 0.92rem; line-height: 1.85; }
.site-footer a { color: #CBD9EC; text-decoration: none; }
.site-footer .brand:hover .brand__name { color: var(--logo-navy); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__cols { display: grid; gap: 2rem; }
@media (min-width: 560px) { .site-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.site-footer__cols h2 {
  font-family: var(--font-subhead); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-500);
  margin-block-end: 0.9rem;
}
.site-footer__cols ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; font-size: 0.92rem; }
.site-footer .token { background: rgba(201,162,74,0.12); color: var(--gold-200); border-color: rgba(201,162,74,0.5); }
.site-footer__bottom {
  margin-block-start: 2.5rem; padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: 0.8rem; color: rgba(203, 217, 236, 0.7);
}

/* ------------------------------------------------------ floating CTA */
.wa-float {
  position: fixed; inset-block-end: 18px; inset-inline-end: 18px; z-index: 120;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #25D366; color: #06301B;
  padding: 0.85rem 1.15rem; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(6, 48, 27, 0.6);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.wa-float:hover { color: #06301B; transform: translateY(-3px); box-shadow: 0 22px 42px -14px rgba(6, 48, 27, 0.65); }
.wa-float svg { inline-size: 24px; block-size: 24px; flex: none; }
@media (max-width: 720px) {
  .wa-float__label { display: none; }
  .wa-float { padding: 0.95rem; inset-block-end: 14px; inset-inline-end: 14px; }
}

/* ------------------------------------------------------------- reveal
   Scoped to .has-js, which the script adds before first paint. Without
   JavaScript, or if the script fails, every section stays visible. */
.has-js [data-reveal] { opacity: 0; transform: translateY(18px); }
.has-js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .has-js [data-reveal] { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --muted: #3F4E49; --line: #C9C1B2; }
}

@media print {
  .topbar, .site-header, .wa-float, .drawer, .btn-row, .site-footer__cols { display: none !important; }
  body { background: #fff; }
  .band { background: #fff !important; color: #000 !important; border: 1px solid #999; }
}