/* =========================================================
   TAAL+ — Mobile-first styles
   Base = phones. Larger screens layered on via min-width:
     sm  640px  — large phones / small tablets
     md  960px  — tablets landscape / small laptops
     lg  1200px — desktops
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand — three colours only */
  --ivory:   #FFF8EE;  /* Primary: Warm Ivory — main background */
  --ink:     #321A38;  /* Dark: Deep Plum — header, dark sections, text */
  --lime:    #ACC323;  /* Accent: TAAL Green — CTAs, highlights, checks */

  /* Shades of the three (no new hues) */
  --surface:    #FFFDF9;  /* lighter ivory: cards on ivory */
  --ink-soft:   #4A2A52;  /* lighter plum: cards on plum */
  --ink-deep:   #26122B;  /* deeper plum */
  --muted:      #6B5F6E;  /* plum-grey: secondary text on light */
  --lime-soft:  #E6EDC2;  /* green tint: notes, subtle panels */
  --lime-600:   #98AD1B;  /* green hover */

  /* Placeholder gradients (only visible until photos are added) */
  --grad-lime-plum:  linear-gradient(135deg, #ACC323 0%, #321A38 100%);
  --grad-lime-soft:  linear-gradient(135deg, #ACC323 0%, #4A2A52 100%);
  --grad-plum:       linear-gradient(160deg, #4A2A52 0%, #26122B 100%);
  /* Green sections (privacy, first step, thank-you): lime sweep, and a blurred colour
     wheel in lime and ivory only (no plum) that slowly turns behind the content */
  --grad-lime-sweep: linear-gradient(160deg, #BFD640 0%, var(--lime) 45%, #93A816 100%);
  --wheel-lime: conic-gradient(
    from 0deg,
    #93A816 0deg,
    #ACC323 60deg,
    #BFD640 120deg,
    #FFF8EE 170deg,
    #C9DC5C 210deg,
    #ACC323 270deg,
    #98AD1B 320deg,
    #93A816 360deg
  );

  /* On-dark helpers */
  --on-dark-muted: rgba(255, 248, 238, 0.72);
  --line-dark:     rgba(255, 248, 238, 0.14);

  /* Type */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-sans:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shape */
  --radius-card:  24px;
  --radius-image: 24px;
  --radius-pill:  999px;

  /* Layout */
  --gutter:    20px;
  --container: 1240px;
  --zoom:      1;      /* page zoom on very large screens, see "Big screens" */
  --header-h:  64px;

  /* Motion — soft, fluid, slow */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  250ms;
  --dur-base:  450ms;
  --dur-slow:  800ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h); /* anchor jumps land below the sticky header */
}
body {
  min-height: 100vh;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Plum footer: plum outline would vanish, so it flips to green */
.site-footer :focus-visible { outline-color: var(--lime); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--lime); color: var(--ink); font-weight: 700;
  transition: top var(--dur-fast) var(--ease-soft);
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-soft);
}
/* Primary CTA: lime */
.btn-accent {
  background: var(--lime);
  color: var(--ink);
}
.btn-accent:hover { background: var(--lime-600); }
.btn-accent:active { transform: scale(0.98); }

/* Ivory button: for use on green backgrounds */
.btn-light {
  background: var(--ivory);
  color: var(--ink);
}
.btn-light:hover { background: var(--surface); }
.btn-light:active { transform: scale(0.98); }

.btn-dark {
  background: var(--ink);
  color: var(--ivory);
}
.btn-dark:hover { background: var(--ink-soft); }
.btn-dark .btn-arrow { background: var(--lime); color: var(--ink); }

/* Outline button: quiet secondary action on ivory */
.btn-outline {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(50, 26, 56, 0.14);
}
.btn-outline:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.btn-outline:active { transform: scale(0.98); }
/* A tilting building looks odd, so the clinic icon lifts instead */
.btn-outline:hover .btn-icon svg { transform: translateY(-2px); }

.btn-sm    { padding: 11px 18px; font-size: 0.875rem; }
.btn-lg    { padding: 8px 8px 8px 28px; font-size: 1.0625rem; min-height: 60px; }
.btn-block { width: 100%; padding: 8px 8px 8px 28px; min-height: 60px; justify-content: space-between; font-size: 1.0625rem; }

.btn-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  flex-shrink: 0;
  line-height: 0;
  transition: transform var(--dur-base) var(--ease-soft);
}
.btn-arrow svg { display: block; }

/* Phone icon on "Call a doctor" */
.btn-icon { order: 2; display: grid; place-items: center; flex-shrink: 0; line-height: 0; }
.btn-icon--lead { order: 0; }
.btn-icon svg { display: block; transition: transform var(--dur-base) var(--ease-soft); }
.btn:hover .btn-icon svg { transform: rotate(-12deg); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Header (warm ivory, same as the hero so they read as one block).
   Not sticky: it sits on top of the hero and scrolls away with it. ---------- */
/* Sticky: stays at the top while the page scrolls; main.js adds .is-stuck once the
   page has moved, which brings in a hairline and soft shadow to lift it off the content */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ivory);
  color: var(--ink);
  transition: box-shadow var(--dur-base) var(--ease-soft);
}
.site-header.is-stuck {
  box-shadow:
    0 1px 0 rgba(50, 26, 56, 0.08),
    0 10px 24px -18px rgba(50, 26, 56, 0.35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.logo {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.logo-plus { color: var(--lime-600); }
/* Image logo: sized by height; the file has a white background, so multiply
   blends it into the ivory header (white disappears, colours stay) */
.logo--img { display: block; line-height: 0; }
.logo--img img {
  display: block;
  width: auto;
  height: 30px;
  mix-blend-mode: multiply;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Text-only header button: "Consult" on phones, "Book an appointment" from 640px */
.header-call-text--lg { display: none; }
@media (min-width: 640px) {
  .header-call-text--sm { display: none; }
  .header-call-text--lg { display: inline; }
}

/* ---------- Hero (warm ivory) ---------- */
.hero {
  padding-block: 28px 56px;
  background: var(--ivory);
  color: var(--ink);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  gap: 40px;
}

.hero-eyebrow {
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 11.5vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
}
/* Solid lime highlight block on "your life." */
.hero-title .hl {
  display: inline-block;
  margin-top: 0.08em;
  padding: 0.02em 0.14em 0.1em;
  border-radius: 0.14em;
  background: var(--lime);
  color: var(--ink);
  white-space: nowrap;
}

.br-lg { display: none; }

.hero-lede {
  margin-top: 24px;
  max-width: 34ch;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--muted);
}

.hero-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.hero-cta .btn { width: 100%; white-space: normal; padding-inline: 28px; }

.btn-label { display: inline-block; }

/* Media */
.hero-media {
  position: relative;
  isolation: isolate;
}
.hero-media .media-placeholder { background: var(--grad-lime-plum); }
.hero-media .media-placeholder span { color: var(--ivory); }

/* Decorative shapes: crisp, flat, no blur */
.shape {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.shape-plum {
  top: -18px;
  right: -14px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ink);
}
.shape-lime {
  bottom: -16px;
  left: -14px;
  width: 132px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--lime);
}
/* Bottom-right, so it stays clear of the phone status bar at the top of the photo */
.shape-star {
  z-index: 1;
  bottom: 24px;
  right: 24px;
  width: 22px;
  height: 22px;
  background: var(--ink);
  /* four-point star */
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.media-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--ink-soft);
}
/* Real photo sits on top of the placeholder; if the file is missing it removes itself */
.media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--ink-soft) 0%, var(--ink-deep) 100%);
}
.media-placeholder span {
  padding-inline: 24px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

/* ---------- Trust strip (one row under the hero) ---------- */
.trust-strip {
  background: var(--lime);
  color: var(--ink);
  overflow: hidden;
}

/* Identical copies of the list side by side. main.js makes enough copies to cover
   the widest screen (--copies), and sliding by one copy's width loops seamlessly.
   --marquee-dur is set from the list's width so the speed feels the same everywhere. */
.trust-marquee {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-dur, 28s) linear infinite;
}
.trust-strip:hover .trust-marquee,
.trust-strip:focus-within .trust-marquee { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--copies, 2))); }
}

.trust-list {
  display: flex;
  flex: none;
  align-items: center;
  padding-block: 12px;
}

/* Set like the section headings: display font, extra bold, tight tracking */
.trust-list li {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 18px;
  margin-right: 44px; /* same gap after every item keeps the marquee loop even */
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 96;
  white-space: nowrap;
}
/* Plum bullet in front of every item */
.trust-list li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
}
@media (min-width: 960px) {
  .trust-list { padding-block: 16px; }
  .trust-list li { gap: 24px; margin-right: 64px; font-size: 3rem; }
  .trust-list li::before { width: 16px; height: 16px; }
}

.live-dot {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ink);
  animation: pulse 2.4s var(--ease-soft) infinite;
}
@keyframes pulse {
  from { transform: scale(1); opacity: 0.5; }
  to   { transform: scale(2.6); opacity: 0; }
}

/* ---------- Sections (shared) ---------- */
.section { padding-block: 72px; }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 14vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
}
.section-title .hl {
  display: inline-block;
  padding: 0.02em 0.14em 0.1em;
  border-radius: 0.14em;
  background: var(--lime);
  color: var(--ink);
}

.section-lede {
  margin-top: 20px;
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- What is PrEP (pale green, plum accents) ---------- */
.what-prep { background: var(--lime-soft); color: var(--ink); }

/* Acronym breakdown: giant Pr · E · P */
.acronym {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 48px;
}
.acronym-item {
  text-align: center;
  padding-top: 14px;
  border-top: 4px solid var(--ink);
}
.acronym-item:nth-child(2) { border-top-color: var(--lime-600); }
.acronym-item:nth-child(3) { border-top-color: var(--ink-soft); }
.acronym dt {
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 20vw, 5rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
}
.acronym dd {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* What PrEP is not: a plum accent panel on the pale green */
.prep-not {
  margin-top: 48px;
  padding: 32px 24px;
  border-radius: var(--radius-card);
  background: var(--ink-soft);
  color: var(--ivory);
}
.prep-not-label {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--lime);
}
.prep-not-body {
  margin-top: 14px;
  max-width: 60ch;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ivory);
}

/* PrEP or PEP? comparison (light card on pale green). A real table on larger screens;
   on phones each row becomes a block: the question on top, PrEP and PEP side by side. */
.compare { margin-top: 64px; }
.compare-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.compare-lede { margin-top: 12px; line-height: 1.6; color: var(--muted); }

/* Each option owns a column: a full colour band on top (PrEP green, PEP plum)
   and a faint tint of that colour running down its answers. */
.compare-table {
  --tint-prep:  rgba(172, 195, 35, 0.24); /* PrEP column: clear green wash */
  --tint-pep:   rgba(50, 26, 56, 0.07);   /* PEP column: soft plum wash */
  --tint-label: rgba(50, 26, 56, 0.04);   /* row-label column */
  width: 100%;
  margin-top: 28px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ivory); /* warm base, not plain white */
  box-shadow:
    0 0 0 2px rgba(50, 26, 56, 0.12),          /* soft plum outline */
    0 24px 48px -24px rgba(50, 26, 56, 0.3);
  text-align: left;
}
.compare-table th,
.compare-table td {
  padding: 18px 24px;
  vertical-align: middle;
  line-height: 1.5;
}

/* Header bands */
.compare-table thead th { padding-block: 24px 22px; }
.compare-prep { background: var(--lime); color: var(--ink); }
.compare-pep  { background: var(--ink);  color: var(--ivory); }
.compare-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.compare-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Rows */
.compare-table tbody tr > * {
  border-top: 1px solid rgba(50, 26, 56, 0.12);
  transition: background-color var(--dur-fast) var(--ease-soft);
}
/* Striped rows: a faint plum layer over every other row, on top of the column tints */
.compare-table tbody tr:nth-child(even) > * {
  background-image: linear-gradient(rgba(50, 26, 56, 0.04), rgba(50, 26, 56, 0.04));
}
.compare-table tbody tr:first-child > * { border-top: 0; }
.compare-table tbody th {
  width: 20%;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background-color: var(--tint-label);
}
.compare-table tbody td { font-weight: 500; color: var(--ink); }
.compare-table tbody td strong { font-weight: 800; }
.compare-table tbody td[data-col="PrEP"] { background-color: var(--tint-prep); }
.compare-table tbody td[data-col="PEP"]  { background-color: var(--tint-pep); }
.compare-table tbody tr:hover th { background-color: rgba(50, 26, 56, 0.08); }
.compare-table tbody tr:hover td[data-col="PrEP"] { background-color: rgba(172, 195, 35, 0.36); }
.compare-table tbody tr:hover td[data-col="PEP"]  { background-color: rgba(50, 26, 56, 0.12); }

.compare-urgent { margin-top: 20px; font-weight: 500; color: var(--ink); }
/* WhatsApp link: chat icon + underlined label (the icon itself isn't underlined) */
.compare-urgent a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.compare-urgent a span {
  text-decoration: underline;
  text-decoration-color: var(--lime-600);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.compare-urgent a:hover span { text-decoration-color: var(--ink); }
.compare-chat {
  flex: none;
  color: var(--ink);
  transition: transform var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.compare-urgent a:hover .compare-chat { transform: rotate(-10deg) scale(1.1); }

/* Phones: two option cards (PrEP, then PEP) with a "vs" badge where they meet.
   The table takes over from 640px up. */
.compare-cards { margin-top: 24px; }
.compare-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ivory);
  box-shadow:
    0 0 0 2px rgba(50, 26, 56, 0.12),
    0 20px 40px -24px rgba(50, 26, 56, 0.3);
}
/* Each card's body carries its option's tint, like the table columns */
.compare-card--prep { --card-tint: rgba(172, 195, 35, 0.24); }
.compare-card--pep  { --card-tint: rgba(50, 26, 56, 0.07); }
.compare-card-head { padding: 22px 22px 20px; }
.compare-card--prep .compare-card-head { background: var(--lime); color: var(--ink); }
.compare-card--pep .compare-card-head  { background: var(--ink);  color: var(--ivory); }
.compare-card-head .compare-name { font-size: 2rem; }

.compare-card-list { margin: 0; padding: 0; background: var(--card-tint); }
.compare-card-list div { padding: 14px 22px; }
.compare-card-list div + div { border-top: 1px solid rgba(50, 26, 56, 0.12); }
/* Striped rows, as in the table */
.compare-card-list div:nth-child(even) { background: rgba(50, 26, 56, 0.04); }
.compare-card-list dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.compare-card-list dd {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.compare-card-list strong { font-weight: 800; }

/* "vs" badge overlapping the seam between the two cards */
.compare-vs {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: -12px auto;
  border-radius: 50%;
  background: var(--ivory);
  box-shadow: 0 0 0 4px var(--lime-soft);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

@media (max-width: 639px) {
  .compare-table { display: none; }
}
@media (min-width: 640px) {
  .compare-cards { display: none; }
}


@media (min-width: 960px) {
  .compare { margin-top: 96px; }
  .compare-title { font-size: clamp(2.75rem, 4vw, 3.5rem); }
  .compare-lede { font-size: 1.125rem; }
  .compare-table { margin-top: 36px; }
  .compare-table th,
  .compare-table td { padding: 24px 36px; font-size: 1.0625rem; }
  .compare-table thead th { padding-block: 32px 28px; }
  .compare-table tbody th { font-size: 0.8125rem; }
  .compare-name { font-size: 2.25rem; }
  .compare-sub { margin-top: 8px; font-size: 0.8125rem; }
  .compare-urgent { margin-top: 24px; font-size: 1.0625rem; }
}


/* ---------- Photo caption chip (pill over a photo) ---------- */
.image-break-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--ivory);
  line-height: 1.3;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
}

/* ---------- Who we are (ivory) ---------- */
.about { background: var(--ivory); color: var(--ink); }
.about-copy { margin-top: 24px; }
/* Same look as the paragraph below it (.section-lede) */
.about-lead {
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
}
@media (min-width: 640px) { .about-lead { font-size: 1.125rem; } }

/* TAAL breakdown: giant letter beside each word, stacked as rows (beside the intro on desktop) */
.taal-label {
  margin-top: 56px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.taal-list {
  margin-top: 16px;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--ink);
}
.taal-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(50, 26, 56, 0.14);
}
.taal-letter {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--lime-600); /* all four letters in TAAL green */
  font-variation-settings: "opsz" 96;
}
.taal-item h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.taal-item p { margin-top: 6px; line-height: 1.55; color: var(--muted); }

@media (min-width: 960px) {
  /* Intro on the left, the T·A·A·L rows running down the right */
  .about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .about-copy { margin-top: 32px; }
  .taal-label { margin-top: 0; }
  .taal-list { margin-top: 20px; }
  .taal-item { grid-template-columns: 96px 1fr; gap: 24px; padding: 28px 0; }
  .taal-letter { font-size: 5.5rem; }
  .taal-item h3 { font-size: 1.875rem; }
  .taal-item p { font-size: 1.0625rem; }
  .about-lead { font-size: 1.1875rem; }
  .about .section-lede { margin-top: 20px; }
}

/* ---------- Who should consider PrEP (ivory) ---------- */
/* ---------- Why timing matters (PEP page; pale green, plum accents) ----------
   Heading on the left, the 72-hour window on the right: three 24-hour blocks, each
   fainter than the last, that fill in one after another when the bar scrolls into
   view. Below it, three cards whose lime icons pop in as each card arrives. */
.timing { background: var(--lime-soft); color: var(--ink); }

.timing-bar {
  margin-top: 36px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(50, 26, 56, 0.08);
}
.timing-caption {
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.timing-track {
  display: flex;
  gap: 6px;
  height: 18px;
}
.timing-track span {
  flex: 1;
  border-radius: var(--radius-pill);
  background: rgba(50, 26, 56, 0.08); /* empty slot behind each block */
  overflow: hidden;
  position: relative;
}
.timing-track span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
}
.timing-track span:nth-child(2)::before { opacity: 0.55; }
.timing-track span:nth-child(3)::before { opacity: 0.25; }
/* Fill each block in turn once the bar has revealed */
.timing-bar.is-in .timing-track span::before {
  animation: timing-fill 700ms var(--ease-soft) both;
}
.timing-bar.is-in .timing-track span:nth-child(1)::before { animation-delay: 400ms; }
.timing-bar.is-in .timing-track span:nth-child(2)::before { animation-delay: 950ms; }
.timing-bar.is-in .timing-track span:nth-child(3)::before { animation-delay: 1500ms; }
@keyframes timing-fill { to { transform: scaleX(1); } }
.no-js .timing-track span::before { transform: none; }

.timing-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-soft);
}
.timing-ticks span:last-child { color: var(--ink); }
.timing-ticks span:last-child::after { content: "h"; }

.timing-list {
  display: grid;
  gap: 16px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}
.timing-item {
  padding: 28px 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(50, 26, 56, 0.08);
}
.timing-item.reveal.is-in {
  transition:
    opacity var(--dur-slow) var(--ease-soft) var(--delay, 0ms),
    transform var(--dur-base) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft);
}
.timing-item.reveal.is-in:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(50, 26, 56, 0.08),
    0 20px 40px -24px rgba(50, 26, 56, 0.35);
}
.timing-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
}
.timing-item.is-in .timing-icon {
  animation: who-check-pop 450ms var(--ease-soft) calc(var(--delay, 0ms) + 150ms) both;
}
.timing-item h3 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.timing-item p {
  margin-top: 10px;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 640px) {
  .timing-bar { padding: 28px 32px; }
  .timing-track { height: 22px; }
  .timing-ticks { font-size: 1.125rem; }
}
@media (min-width: 960px) {
  .timing-bar { margin-top: 0; }
  .timing-list { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
  .timing-item { padding: 36px 32px; }
  .timing-item h3 { font-size: 1.875rem; }
}

.who-prep { background: var(--ivory); color: var(--ink); }

/* Mobile order: heading → lede → list → note → button */
.who-inner {
  display: flex;
  flex-direction: column;
}
.who-intro { display: contents; }
.who-body { order: 2; margin-top: 36px; }
.who-cta { order: 3; margin-top: 28px; }
.who-cta .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; }

.who-list {
  border-top: 3px solid var(--ink);
}
.who-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(50, 26, 56, 0.14);
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.who-list li.reveal.is-in {
  transition:
    opacity var(--dur-slow) var(--ease-soft) var(--delay, 0ms),
    transform var(--dur-base) var(--ease-soft);
}
.who-list li.reveal.is-in:hover { transform: translateX(6px); }

/* Lime circle with a check mark */
.who-check {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: -1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
}
.who-check svg { width: 70%; height: 70%; display: block; }
.who-check path {
  stroke: var(--ink);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* On scroll-in: circle pops, then the tick draws itself */
.who-list li.is-in .who-check {
  animation: who-check-pop 450ms var(--ease-soft) calc(var(--delay, 0ms) + 150ms) both;
}
.who-list li.is-in .who-check path {
  animation: who-check-draw 380ms ease-out calc(var(--delay, 0ms) + 420ms) both;
}
@keyframes who-check-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes who-check-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.who-note {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: var(--radius-card);
  background: var(--lime-soft);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
}

/* ---------- How it works (pale green, plum accents) ---------- */
.how {
  background: var(--lime-soft);
  color: var(--ink);
}

/* Editorial layout: photo + a typographic list of steps (no cards, no lines) */
.how-grid { margin-top: 40px; }

.how-image { margin: 0; }
.how-image-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--ink-soft);
}
.how-image-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.steps {
  display: grid;
  gap: 40px;
  margin-top: 48px;
  padding: 0;
  list-style: none;
}
.step {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: start;
  gap: 16px;
}
.step-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.step h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.step p {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted);
}
.how .media-placeholder { background: var(--grad-lime-plum); }
.how .media-placeholder span { color: var(--ivory); }

/* ---------- What happens when you message us (ivory) ---------- */
.message { background: var(--ivory); color: var(--ink); }
/* Two ivory sections back to back (PEP page: "When should you reach out" → this one):
   drop this section's top padding so the gap between them isn't doubled */
.who-prep + .message { padding-top: 0; }
.message .section-title { font-size: clamp(2.5rem, 11vw, 3.75rem); }

/* Example chat: loose bubbles on the page, no window around them.
   main.js adds .is-sim, which hides every bubble but keeps its space (so nothing
   jumps), then plays them in order: .is-typing shows a "…" bubble in a reply's
   place, .is-shown slides the bubble in (yours from the right, ours from the left).
   Without JS, or with reduced motion, all bubbles simply show. */
.chat { margin: 0; }
.chat-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bubble {
  position: relative;
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.bubble--me {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--lime);
  font-weight: 500;
  box-shadow: 0 8px 20px -12px rgba(50, 26, 56, 0.35);
}
.bubble--them {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px rgba(50, 26, 56, 0.08),
    0 8px 20px -12px rgba(50, 26, 56, 0.3);
}

/* Steps as bubbles: number badge + heading + text. Green bubbles get a plum badge,
   white bubbles a green one, so the badge always stands out. */
.msg-thread { max-width: 860px; margin-top: 40px; }
.msg-thread .chat-log { gap: 16px; }
.step-bubble {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px 18px;
  border-radius: 24px;
}
.bubble--me.step-bubble { border-bottom-right-radius: 6px; }
.bubble--them.step-bubble { border-bottom-left-radius: 6px; }
.msg-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
}
.bubble--me .msg-num   { background: var(--ink);  color: var(--lime); }
.bubble--them .msg-num { background: var(--lime); color: var(--ink); }
.step-bubble h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.step-bubble p { margin-top: 4px; line-height: 1.55; }
.bubble--them.step-bubble p { color: var(--muted); }
.step-bubble > div { flex: 1; min-width: 0; }

/* WhatsApp-style footer on each bubble: time, plus double ticks on our side.
   Ticks show blue ("read"); during the chat animation they arrive grey and
   turn blue a moment later (main.js adds .is-read). */
.bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.bubble--me .bubble-meta { color: rgba(50, 26, 56, 0.7); }
.ticks {
  flex: none;
  color: #1B75BB; /* WhatsApp-style "read" blue, deepened to show on the green bubble */
  transition: color 300ms var(--ease-soft);
}
.chat.is-sim .bubble:not(.is-read) .ticks { color: rgba(50, 26, 56, 0.45); }

/* Simulation states */
.chat.is-sim .bubble { visibility: hidden; }
.chat.is-sim .bubble.is-shown { visibility: visible; }
.chat.is-sim .bubble--me.is-shown   { animation: bubble-in-right 360ms var(--ease-soft) both; }
.chat.is-sim .bubble--them.is-shown { animation: bubble-in-left 360ms var(--ease-soft) both; }
@keyframes bubble-in-right {
  from { opacity: 0; transform: translateX(40px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes bubble-in-left {
  from { opacity: 0; transform: translateX(-40px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* "Typing…" bubble: sits where the reply will land, three dots bouncing */
.typing {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 20px;
  border-bottom-left-radius: 6px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(50, 26, 56, 0.08);
}
.bubble.is-typing .typing {
  display: inline-flex;
  visibility: visible;
  animation: bubble-in-left 200ms var(--ease-soft) both;
}
.bubble.is-shown .typing { display: none; }
.typing i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: 0.4;
  animation: typing-dot 1s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: 150ms; }
.typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

@media (min-width: 960px) {
  .message .section-title { font-size: clamp(3.5rem, 5vw, 5rem); }
  .message-intro .section-lede { margin-top: 24px; }
  .msg-thread { margin: 64px auto 0; }
  .msg-thread .chat-log { gap: 20px; }
  .step-bubble { max-width: 62%; gap: 18px; padding: 22px 26px 24px; font-size: 1.0625rem; }
  .msg-num { width: 44px; height: 44px; font-size: 1.125rem; }
  .step-bubble h3 { font-size: 1.5rem; }
}

/* =========================================================
   Lower sections. Each block keeps its own responsive rules
   (mobile first, then 640px / 960px) so it can be read alone.
   ========================================================= */

/* ---------- Why TAAL+ (pale green, plum accents) ---------- */
.why { background: var(--lime-soft); color: var(--ink); }

/* Five reasons as an editorial numbered list: number · heading · text.
   Stacked on phones; three columns in one row on desktop. */
.why-list {
  --why-pad: 24px;   /* item top padding */
  --why-dot: 48px;   /* circle size */
  --why-rail: 12px;  /* rail thickness */
  position: relative;
  margin-top: 40px;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--ink);
}
.why-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 12px;
  padding: var(--why-pad) 0;
}

/* Scroll progress rail, running from the first circle's centre to the last.
   ::before is the faint track, ::after the green fill. main.js measures the circles
   and sets --rail-top / --rail-h / --rail-fill as you scroll, and marks each item
   .is-active once the fill reaches its circle. Without JS there is no rail and the
   circles simply stay green. */
.why-list::before,
.why-list::after {
  content: "";
  position: absolute;
  left: calc(var(--why-dot) / 2 - var(--why-rail) / 2);
  top: var(--rail-top, 0);
  width: var(--why-rail);
  border-radius: 999px;
}
.why-list::before { height: var(--rail-h, 0); background: rgba(50, 26, 56, 0.12); }
.why-list::after  { height: var(--rail-fill, 0); background: var(--lime); }

.why-num {
  position: relative; /* sits above the rail */
  z-index: 1;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: var(--why-dot);
  height: var(--why-dot);
  border-radius: 50%;
  background: var(--lime);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  transition:
    background-color var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-soft);
}
/* Tracking on: circles wait light until the fill reaches them, then pop to green */
.why-list.is-tracking .why-num {
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 2px rgba(50, 26, 56, 0.14);
}
.why-list.is-tracking .why-item.is-active .why-num {
  background: var(--lime);
  color: var(--ink);
  box-shadow: none;
  animation: why-pop 450ms var(--ease-soft);
}
@keyframes why-pop {
  50% { transform: scale(1.15); }
}

.why-item h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.why-item p { margin-top: 8px; line-height: 1.6; color: var(--muted); }

@media (min-width: 960px) {
  .why-list {
    --why-pad: 36px;
    --why-dot: 80px;
    margin-top: 72px;
  }
  .why-item {
    grid-template-columns: 120px 1fr 1.2fr;
    column-gap: 40px;
    align-items: start;
  }
  .why-num { grid-row: auto; font-size: 1.75rem; }
  .why-item h3 { font-size: 2rem; }
  .why-item p { margin-top: 0; font-size: 1.0625rem; }
}

/* ---------- Your privacy (TAAL green, aurora + grain) ----------
   Same effect as "Take the first step": lime sweep with an ivory glow behind the
   heading, a slowly turning blurred lime-and-ivory wheel (right side on desktop, low
   down on phones), and film grain on top. */
.privacy {
  --aurora: min(100vmin, 820px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(640px 520px at 20% 18%, rgba(255, 248, 238, 0.7), rgba(255, 248, 238, 0) 70%),
    var(--grad-lime-sweep);
}
.privacy::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: var(--aurora);
  height: var(--aurora);
  top: 62%; /* sits behind the card, below the heading and intro text */
  margin-top: calc(var(--aurora) / -2);
  right: calc(var(--aurora) / -5);
  border-radius: 50%;
  background: var(--wheel-lime);
  filter: blur(70px);
  opacity: 0.9;
  animation: aurora-turn 36s linear infinite;
  pointer-events: none;
}
@media (max-width: 959px) {
  .privacy {
    background:
      radial-gradient(90% 30% at 30% 8%, rgba(255, 248, 238, 0.7), rgba(255, 248, 238, 0) 70%),
      var(--grad-lime-sweep);
  }
  .privacy::before { width: 140vw; height: 140vw; top: auto; bottom: -45vw; margin-top: 0; right: -60vw; }
}
@media (prefers-reduced-motion: reduce) {
  .privacy::before { animation: none; }
}
.privacy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.22 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Green highlight would vanish on green, so it flips to plum */
.privacy .section-title .hl { background: var(--ink); color: var(--lime); }
/* Grey text is too faint on green, so body copy here stays plum */
.privacy .section-lede { color: var(--ink); font-weight: 500; }

/* Worries as questions, each answered plainly: question left, answer right
   (stacked on phones), rows split by thin plum lines. */
/* Frosted card (like the callback form) so the plum text stays readable over the
   colour wheel */
.privacy-qa {
  margin: 40px 0 0;
  padding: 0 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 30px 60px -30px rgba(50, 26, 56, 0.45);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .privacy-qa {
    background: rgba(255, 253, 249, 0.8);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.6),
      0 30px 60px -30px rgba(50, 26, 56, 0.45);
  }
}
.privacy-row {
  display: grid;
  gap: 10px;
  padding: 24px 0;
  border-top: 1px solid rgba(50, 26, 56, 0.14);
}
.privacy-row:first-child { border-top: 0; }
.privacy-row dt {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
/* Icon before each question: plum circle, green line icon; pops in with its row */
.privacy-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
}
.privacy-icon svg { display: block; }
.privacy-row.is-in .privacy-icon {
  animation: who-check-pop 450ms var(--ease-soft) calc(var(--delay, 0ms) + 150ms) both;
}
.privacy-row dd {
  margin: 0;
  max-width: 56ch;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-soft);
}
.privacy-row dd strong { font-weight: 800; color: var(--ink); }

.privacy-link { margin-top: 28px; font-weight: 600; }
.privacy-link a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (min-width: 960px) {
  .privacy-qa { margin-top: 72px; padding: 8px 48px; }
  .privacy-row {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 36px 0;
  }
  .privacy-row dt { gap: 20px; font-size: 2.25rem; }
  .privacy-icon { width: 60px; height: 60px; }
  .privacy-icon svg { width: 28px; height: 28px; }
  .privacy-row dd { font-size: 1.125rem; }
  .privacy-link { margin-top: 36px; font-size: 1.0625rem; }
}


/* ---------- FAQ (ivory) ---------- */
.faq-list {
  margin-top: 40px;
  border-top: 3px solid var(--ink);
}
.faq-list details { border-bottom: 1px solid rgba(50, 26, 56, 0.14); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
/* Plus / minus toggle */
.faq-list summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  transition: transform var(--dur-base) var(--ease-soft), background-color var(--dur-base) var(--ease-soft);
}
.faq-list details[open] summary::after {
  content: "–";
  background: var(--lime);
  color: var(--ink);
}
.faq-answer {
  padding: 0 52px 24px 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
}

@media (min-width: 640px) {
  .faq-list summary { padding: 26px 0; font-size: 1.5rem; }
  .faq-list summary::after { width: 42px; height: 42px; }
  .faq-answer { font-size: 1.0625rem; max-width: 64ch; }
}
@media (min-width: 960px) {
  .faq-inner {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: start;
  }
  .faq-intro { position: sticky; top: calc(var(--header-h) + 24px); }
  .faq-intro .section-title { font-size: clamp(4rem, 5.6vw, 5.5rem); }
  .faq-list { margin-top: 0; }
}

/* ---------- Take the first step + form (TAAL green, aurora + grain) ----------
   Three layers:
   1. Section: lime sweep with an ivory glow top-left, where the heading sits.
   2. ::before: a big blurred lime-and-ivory wheel that slowly turns behind the
      form, so the colours keep flowing into each other.
   3. ::after: fine film grain over everything, so it reads rich, not flat. */
.first-step {
  /* Effects are anchored to the content, not the screen edges, so they stay
     behind the heading and the form however wide the screen is.
     --cw is the content width; the form's centre is 50% + cw/4, the copy's 50% - cw/4. */
  --cw: min(100vw, var(--container));
  --aurora: min(100vmin, 820px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(640px 520px at calc(50% - var(--cw) / 4) 38%, rgba(255, 248, 238, 0.7), rgba(255, 248, 238, 0) 70%),
    var(--grad-lime-sweep);
}
.first-step::before {
  content: "";
  position: absolute;
  z-index: -2;
  /* a big circle centred behind the form */
  width: var(--aurora);
  height: var(--aurora);
  left: calc(50% + var(--cw) / 4 - var(--aurora) / 2);
  top: 50%;
  margin-top: calc(var(--aurora) / -2);
  border-radius: 50%;
  background: var(--wheel-lime);
  filter: blur(70px);
  opacity: 0.9;
  animation: aurora-turn 36s linear infinite;
  pointer-events: none;
}
@keyframes aurora-turn {
  to { transform: rotate(360deg); }
}
/* Phones/tablets: text on top, form below, so the wheel sits low, behind the form */
@media (max-width: 959px) {
  .first-step {
    background:
      radial-gradient(90% 30% at 30% 12%, rgba(255, 248, 238, 0.7), rgba(255, 248, 238, 0) 70%),
      var(--grad-lime-sweep);
  }
  .first-step::before {
    width: 140vw;
    height: 140vw;
    left: -20vw;
    top: auto;
    bottom: -45vw;
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-step::before { animation: none; }
}
.first-step::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.22 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Green highlight would vanish on green, so it flips to plum */
.first-step .section-title .hl { background: var(--ink); color: var(--lime); }
.first-step .section-lede { color: var(--ink); font-weight: 500; }

.first-step-inner { display: grid; gap: 48px; }
.first-step-ctas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.first-step-ctas .btn { width: 100%; white-space: normal; padding-inline: 28px; }

.callback {
  padding: 28px 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(50, 26, 56, 0.45);
}
/* Frosted glass where supported: the blurred colours glow softly through the card.
   Kept mostly opaque so the form stays easy to read. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .callback {
    background: rgba(255, 253, 249, 0.8);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.6),
      0 30px 60px -30px rgba(50, 26, 56, 0.45);
  }
}
.callback h3 {
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.callback label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
}
.callback input:not([type="checkbox"]),
.callback select,
.callback textarea {
  display: block;
  width: 100%;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 2px solid rgba(50, 26, 56, 0.2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px stops iOS zooming into fields */
  transition: border-color var(--dur-fast) var(--ease-soft);
}
.callback input:focus,
.callback select:focus,
.callback textarea:focus { outline: none; border-color: var(--ink); }
.callback textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.callback .label-hint { font-weight: 500; color: var(--muted); }
/* Problem fields: red outline (same red as the error message), cleared on edit */
.callback input[aria-invalid="true"] { border-color: #C0392B; background-color: #FFF6F4; }
.callback .consent input[aria-invalid="true"] { outline: 2px solid #C0392B; outline-offset: 2px; }
/* Required-field asterisk */
.req { margin-left: 2px; font-weight: 700; color: #C0392B; }

/* No-JS fallback: the native select, with our own chevron */
.callback select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23321A38' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

/* Custom dropdown (main.js builds it over each select; the hidden select still submits).
   Closed: looks like the other fields. Open: an ivory card of options under it. */
.select {
  position: relative;
  margin-bottom: 18px;
}
.callback .select > select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}
.select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid rgba(50, 26, 56, 0.2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft);
}
.select-btn:hover,
.select-btn:focus-visible,
.select.is-open .select-btn { outline: none; border-color: var(--ink); }
.select-chevron {
  flex: none;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.select.is-open .select-chevron { transform: rotate(180deg); }

.select-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 16px;
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px rgba(50, 26, 56, 0.1),
    0 20px 40px -16px rgba(50, 26, 56, 0.35);
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition:
    opacity var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft),
    visibility 0s linear var(--dur-fast);
}
.select.is-open .select-list {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.select-list:focus { outline: none; }
.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
/* Highlighted (mouse or arrow keys): pale green. Chosen: bold, with a lime tick. */
.select-option.is-active { background: var(--lime-soft); }
.select-option[aria-selected="true"] { font-weight: 700; }
.select-option[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23321A38' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.callback .consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 20px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--ink);
}
.consent a { text-decoration: underline; }

.form-error {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(242, 96, 79, 0.14);
  color: #9B2C1F;
  font-size: 0.9375rem;
  font-weight: 600;
}
.form-success {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--lime-soft);
  color: var(--ink);
  font-weight: 600;
}
.callback .btn-block { font-size: 1.0625rem; }
.callback-sub { margin-bottom: 24px; font-size: 0.9375rem; color: var(--muted); }
.callback-note { margin-top: 16px; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }

/* ---------- WhatsApp pop-up (PrEP and PEP pages) ----------
   A native <dialog>: the page dims and blurs behind it, and the form card (same look
   as the callback form) rises in. Scrolls inside itself on short screens. */
.wa-modal {
  width: min(100% - 32px, 460px);
  max-width: none;
  max-height: calc(100dvh / var(--zoom) - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--ink);
  overflow: hidden; /* the form scrolls inside, so the scrollbar stays within the card */
}
.wa-modal::backdrop {
  background: rgba(38, 18, 43, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.wa-modal[open] .wa-form { animation: wa-in 380ms var(--ease-soft) both; }
@keyframes wa-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
/* Solid card here: frosted glass over a blurred backdrop reads muddy. The card is the
   scroll area on short screens; position: static lets the close button pin to the
   dialog instead of scrolling away with the form. */
.wa-modal .wa-form {
  position: static;
  max-height: calc(100dvh / var(--zoom) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Slim plum scrollbar on a clear track */
  scrollbar-width: thin;
  scrollbar-color: rgba(50, 26, 56, 0.35) transparent;
}
.wa-modal .wa-form::-webkit-scrollbar { width: 12px; }
.wa-modal .wa-form::-webkit-scrollbar-track {
  margin-block: 20px; /* keeps the bar clear of the rounded corners */
  background: transparent;
}
.wa-modal .wa-form::-webkit-scrollbar-thumb {
  border: 4px solid var(--surface); /* inset look: a 4px thumb floating in a 12px lane */
  border-radius: var(--radius-pill);
  background: rgba(50, 26, 56, 0.3);
}
.wa-modal .wa-form::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

/* After sending: the fields hide and the "Open WhatsApp" panel takes their place */
.wa-form.is-sent > :not(.wa-success):not(.wa-close) { display: none; }
.wa-success { animation: wa-in 380ms var(--ease-soft) both; }
.wa-success .callback-sub { margin-top: 4px; }
.wa-success .callback-note a {
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--lime-600);
  text-underline-offset: 3px;
}
.wa-modal h3 { padding-right: 40px; }
.wa-badge {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
}
.wa-close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 24px; /* clear of the scrollbar lane */
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(50, 26, 56, 0.06);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft);
}
.wa-close:hover,
.wa-close:focus-visible { outline: none; background: var(--lime); }
/* Page behind the pop-up doesn't scroll while it's open */
.has-modal,
.has-modal body { overflow: hidden; }

@media (min-width: 640px) {
  .first-step-ctas { display: flex; flex-wrap: wrap; }
  .first-step-ctas .btn { width: auto; white-space: nowrap; }
  .callback { padding: 40px; }
}
@media (min-width: 960px) {
  .first-step-inner {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .first-step .section-title { font-size: clamp(3.5rem, 4.8vw, 4.75rem); }
  .first-step-copy .section-lede { margin-top: 28px; }
  .callback { padding: 48px; }
}

/* Paired CTAs ("Book a consultation" + "Talk to us on WhatsApp"): always the same
   width. Side by side, each takes half the row (never less than its own text);
   when the row is too narrow they wrap, and each fills the row. Phones already
   stack them full width. */
@media (min-width: 640px) {
  .hero-cta,
  .first-step-ctas { max-width: 620px; }
  .hero-cta .btn,
  .first-step-ctas .btn { flex: 1 1 0; min-width: max-content; }
}

/* ---------- Privacy policy page ---------- */
.policy-hero {
  padding-block: 40px 48px;
  background: var(--lime-soft);
}
.policy-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}
.policy-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.policy-updated {
  margin-top: 20px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.policy-hero .section-lede { color: var(--ink); }

/* Placeholders still to be filled in: easy to spot on the page */
.policy-todo {
  padding: 0 4px;
  border-radius: 4px;
  background: #FFE08A;
  color: var(--ink);
}

.policy { padding-block: 48px 72px; }
.policy-layout { display: grid; gap: 40px; }

/* Contents list: a card on top on phones, pinned on the left on desktop */
.policy-toc {
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(50, 26, 56, 0.1);
}
.policy-toc-label {
  margin-bottom: 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.policy-toc ol { margin: 0; padding-left: 1.5em; }
.policy-toc li { padding-block: 4px; font-size: 0.9375rem; color: var(--muted); }
.policy-toc li::marker { font-weight: 700; color: var(--lime-600); }
.policy-toc a { color: var(--ink); }
.policy-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }

.policy-body { max-width: 72ch; }
.policy-body section {
  padding-block: 32px;
  border-top: 1px solid rgba(50, 26, 56, 0.14);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.policy-body section:first-child { padding-top: 0; border-top: 0; }
.policy-body h2 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.policy-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lime);
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.policy-body h3 {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.policy-body p,
.policy-body ul { margin-top: 14px; line-height: 1.7; color: var(--muted); }
.policy-body ul { padding-left: 0; }
.policy-body li {
  position: relative;
  padding-left: 22px;
}
.policy-body li + li { margin-top: 10px; }
.policy-body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime-600);
}
.policy-body strong { font-weight: 700; color: var(--ink); }
.policy-body a:not(.btn) {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--lime-600);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Key promises stand out in a pale green note */
.policy-body .policy-callout {
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--lime-soft);
  font-weight: 500;
  color: var(--ink);
}
.policy-contact { display: grid; gap: 12px; margin-top: 16px; }
.policy-contact div {
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(50, 26, 56, 0.1);
}
.policy-contact dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.policy-contact dd { margin: 4px 0 0; font-size: 1.0625rem; }

@media (min-width: 640px) {
  .policy-hero { padding-block: 56px 64px; }
  .policy-contact { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .policy-hero { padding-block: 72px 88px; }
  .policy-hero .section-lede { margin-top: 20px; }
  .policy { padding-block: 72px 112px; }
  .policy-layout {
    grid-template-columns: 300px 1fr;
    gap: 72px;
    align-items: start;
  }
  .policy-toc { position: sticky; top: calc(var(--header-h) + 24px); }
  .policy-body h2 { font-size: 2rem; }
  .policy-num { width: 42px; height: 42px; }
  .policy-body p,
  .policy-body ul { font-size: 1.0625rem; }
}

/* ---------- Thank-you page ----------
   Same lime aurora as "Take the first step", with a frosted card in the middle.
   On load: the tick circle pops, the tick draws, sparks burst out and two rings
   ripple, then the text and steps rise in one after another (--d sets each delay). */
.ty {
  --aurora: min(110vmin, 900px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 48px 72px;
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(255, 248, 238, 0.7), rgba(255, 248, 238, 0) 70%),
    var(--grad-lime-sweep);
}
.ty::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: var(--aurora);
  height: var(--aurora);
  left: 50%;
  top: 55%;
  margin: calc(var(--aurora) / -2) 0 0 calc(var(--aurora) / -2);
  border-radius: 50%;
  background: var(--wheel-lime);
  filter: blur(70px);
  opacity: 0.9;
  animation: aurora-turn 36s linear infinite;
  pointer-events: none;
}
.ty::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0 0.22 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.ty-card {
  max-width: 720px;
  margin-inline: auto;
  padding: 40px 24px 32px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 30px 60px -30px rgba(50, 26, 56, 0.45);
  text-align: center;
  animation: ty-card-in 700ms var(--ease-soft) both;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ty-card {
    background: rgba(255, 253, 249, 0.85);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.6),
      0 30px 60px -30px rgba(50, 26, 56, 0.45);
  }
}
@keyframes ty-card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Tick */
.ty-check {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--lime);
  animation: ty-pop 600ms var(--ease-soft) 250ms both;
}
.ty-check svg { width: 48px; height: 48px; overflow: visible; }
.ty-check path {
  stroke: var(--ink);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: who-check-draw 450ms ease-out 650ms both;
}
/* Two rings ripple out from the circle, three times */
.ty-check::before,
.ty-check::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--lime-600);
  opacity: 0;
  animation: ty-ripple 1.8s var(--ease-soft) 900ms 3;
}
.ty-check::after { animation-delay: 1.2s; }
/* Sparks: small dots fly out from the centre along --a, then fade */
.ty-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  animation: ty-spark 800ms var(--ease-soft) 600ms both;
}
.ty-spark:nth-child(even) { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--lime-600); }
@keyframes ty-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes ty-ripple {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes ty-spark {
  0%   { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-78px) scale(0.4); }
}

/* Text and steps rise in, one after another */
.ty-in { animation: ty-rise 700ms var(--ease-soft) var(--d, 0ms) both; }
@keyframes ty-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.ty-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ty-title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
}
.ty-title .hl {
  display: inline-block;
  margin-top: 0.1em;
  padding: 0.02em 0.14em 0.1em;
  border-radius: 0.14em;
  background: var(--lime);
}
.ty-lede {
  max-width: 50ch;
  margin: 20px auto 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
}

.ty-next {
  margin-top: 36px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ty-steps {
  margin-top: 16px;
  padding: 0;
  list-style: none;
  text-align: left;
  border-top: 1px solid rgba(50, 26, 56, 0.14);
}
.ty-steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(50, 26, 56, 0.14);
}
.ty-step-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--font-display);
  font-weight: 800;
}
.ty-steps h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ty-steps p { margin-top: 4px; line-height: 1.55; color: var(--muted); }

.ty-note { margin-top: 24px; font-weight: 500; color: var(--ink); }
.ty-note a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--lime-600);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ty-ctas {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
.ty-ctas .btn { width: 100%; padding-inline: 28px; white-space: normal; }
/* Ivory button needs an edge on the light card */
.ty-ctas .btn-light { box-shadow: inset 0 0 0 2px rgba(50, 26, 56, 0.14); }
.ty-ctas .btn-light:hover { box-shadow: inset 0 0 0 2px var(--ink); }
/* After the WhatsApp pop-up: a line under the heading, then the WhatsApp button */
.ty-wa-lead {
  max-width: 46ch;
  margin: 16px auto 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
}
.ty-card.is-wa .ty-ctas { margin-bottom: 8px; }

@media (min-width: 640px) {
  .ty { padding-block: 72px 96px; }
  .ty-card { padding: 56px 48px 48px; }
  .ty-lede { font-size: 1.125rem; }
  .ty-ctas { grid-template-columns: 1fr 1fr; }
  .ty-ctas .btn { white-space: nowrap; }
}
@media (min-width: 960px) {
  .ty { padding-block: 96px 128px; }
  .ty-card { padding: 64px 64px 56px; }
  .ty-check { width: 104px; height: 104px; }
  .ty-check svg { width: 56px; height: 56px; }
  .ty-steps h3 { font-size: 1.375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ty::before,
  .ty-check::before,
  .ty-check::after { animation: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 64px 0 40px;
  background: var(--ink);
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
}
.footer-grid { display: grid; gap: 40px; }
/* Logo on a small ivory card: the file has a white background, which would show as
   a white box on plum. On ivory, multiply blends the white away. */
.footer-logo {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--ivory);
  line-height: 0;
}
.footer-logo img { display: block; width: auto; height: 36px; mix-blend-mode: multiply; }
.footer-name { margin-top: 12px; font-weight: 700; color: var(--ivory); }
.site-footer address { max-width: 44ch; margin-top: 8px; font-style: normal; line-height: 1.7; }
/* Contacts (left column, under the address): Call · WhatsApp · Email. Plain, no
   card: small icon circle, lime title, short line and the number/address. Stacked
   and left-aligned on phones; three across and centred from 640px. */
.footer-contacts {
  display: grid;
  gap: 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: var(--on-dark-muted);
}
/* Icon sits in front of the title, on the same line */
.contact-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 248, 238, 0.1);
  color: var(--lime);
  transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.contact-icon svg { width: 14px; height: 14px; }
.contact-head + .contact-desc { margin-top: 4px; }
.contact-card:hover .contact-icon,
.contact-card:focus-visible .contact-icon { background: var(--lime); color: var(--ink); }
.contact-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--lime);
}
.contact-desc { font-size: 0.75rem; line-height: 1.4; }
/* Email breaks after the @ (a <wbr> in the HTML) when the column is narrow */
.contact-value {
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ivory);
}
.site-footer .contact-card:hover { color: var(--on-dark-muted); }
.site-footer .contact-card:hover .contact-value { color: var(--lime); }
@media (min-width: 640px) {
  /* Each column sized to its content, spread edge to edge, so the email fits on one line */
  .footer-contacts { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 16px; }
  .contact-card { align-items: center; text-align: center; }
}
/* Right column: "View on Google Maps" link sitting on top of the embedded map */
.footer-mapcol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* Google Maps link: green pin + underlined label */
.footer-map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ivory);
}
.footer-map svg { flex: none; color: var(--lime); }
.footer-map span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* Embedded Google map with the clinic pin: under the details on phones, in the right
   column from 960px. Rounded, with a hairline ivory border so it sits on the plum. */
.footer-mapbox {
  display: flex;
  flex: 1;
  align-self: stretch;
  overflow: hidden;
  min-height: 260px;
  border-radius: var(--radius-card);
  background: var(--ink-soft);
  box-shadow: 0 0 0 1px var(--line-dark);
}
.footer-mapbox iframe {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 260px;
  border: 0;
}
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: stretch; }
  .footer-mapbox,
  .footer-mapbox iframe { min-height: 320px; }
}
/* Privacy policy link: its own line under the contact cards, left column only */
.footer-legal { margin-top: 20px; }
/* Contact and legal links read as links: ivory, underlined */
.footer-legal a {
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.site-footer a { transition: color var(--dur-fast) var(--ease-soft); }
.site-footer a:hover { color: var(--lime); }
.disclaimer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.8125rem;
  line-height: 1.6;
}
.disclaimer p + p { margin-top: 10px; }
.disclaimer a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.copyright { margin-top: 20px; font-size: 0.8125rem; }

@media (min-width: 960px) {
  .site-footer { padding: 96px 0 48px; }
  .footer-logo img { height: 44px; }
  .disclaimer { margin-top: 64px; }
}

/* ---------- Back to top (fixed, bottom left) ---------- */
.to-top {
  position: fixed;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  line-height: 0;
  background: var(--ink);
  color: var(--lime);
  box-shadow: 0 6px 20px rgba(50, 26, 56, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-soft),
    background-color var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft),
    visibility 0s linear var(--dur-base);
}
.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* Over plum sections it flips to lime so it never blends in (main.js sets .on-dark) */
.to-top.on-dark {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
/* The arrow's head carries most of its visual weight, so nudge it down 1px to look centred */
.to-top svg { margin-top: 1px; transition: transform var(--dur-base) var(--ease-soft); }
.to-top:hover svg { transform: translateY(-3px); }
@media (min-width: 960px) {
  .to-top { left: 32px; bottom: 32px; width: 56px; height: 56px; }
}

/* ---------- Floating WhatsApp button (fixed, bottom right) ----------
   Always visible on the landing pages. It's a normal wa.me link, so main.js
   opens the WhatsApp pop-up form from it like every other WhatsApp button. */
.wa-float {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366; /* WhatsApp green, so it's recognised at a glance */
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transition: transform var(--dur-fast) var(--ease-soft);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float:active { transform: scale(0.96); }
.wa-float:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (min-width: 960px) {
  .wa-float { right: 32px; bottom: 32px; width: 64px; height: 64px; }
  .wa-float svg { width: 32px; height: 32px; }
}

/* ---------- Reveal motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-soft) var(--delay, 0ms),
    transform var(--dur-slow) var(--ease-soft) var(--delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* No-JS fallback: always show content */
.no-js .reveal { opacity: 1; transform: none; }

/* Very small phones (under 360px): compact header button so it clears the logo */
@media (max-width: 359px) {
  .header-actions { gap: 4px; }
  .header-actions .btn-sm { padding: 9px 12px; font-size: 0.8125rem; }
  .logo { font-size: 1.375rem; }
}

/* =========================================================
   sm — 640px+
   ========================================================= */
@media (min-width: 640px) {
  :root { --gutter: 32px; --header-h: 72px; }
  .logo--img img { height: 34px; }

  .hero { padding-block: 48px 80px; }

  .hero-title { font-size: clamp(3.5rem, 9vw, 4.75rem); }
  .hero-lede  { font-size: 1.1875rem; }

  .hero-cta { display: flex; flex-wrap: wrap; }
  .hero-cta .btn { width: auto; white-space: nowrap; }

  /* Single column: keep the photo's full 4:5 shape, centred and not too tall */
  .hero-media { width: min(100%, 440px); margin-inline: auto; }

  .section { padding-block: 96px; }
  .section-title { font-size: clamp(4rem, 11vw, 5rem); }
  .section-lede { font-size: 1.125rem; }

  .acronym { gap: 20px; margin-top: 64px; }
  .acronym dt { font-size: clamp(6rem, 16vw, 8rem); }
  .acronym dd { font-size: 0.9375rem; }

  .prep-not { margin-top: 64px; padding: 40px; }
  .prep-not-label { font-size: 2.5rem; }
  .prep-not-body { margin-top: 18px; font-size: 1.25rem; }

  .image-break-chip { left: 24px; bottom: 24px; padding: 12px 20px; font-size: 0.9375rem; }

  .who-cta .btn { width: auto; white-space: nowrap; }
  .who-list li { padding: 24px 0; font-size: 1.625rem; gap: 20px; }
  .who-check { width: 34px; height: 34px; margin-top: -2px; }
  .who-note { padding: 24px 28px; font-size: 1.0625rem; }

  .how-grid { margin-top: 56px; }
  .how-image-frame { aspect-ratio: 16 / 10; border-radius: 32px; }
  .steps { gap: 48px; margin-top: 56px; }
  .step { grid-template-columns: 120px 1fr; gap: 24px; }
  .step-num { font-size: 5rem; }
  .step h3 { font-size: 1.875rem; }
  .step p { font-size: 1.0625rem; max-width: 46ch; }
}

/* =========================================================
   md — 960px+   (two-column hero)
   ========================================================= */
@media (min-width: 960px) {
  :root { --gutter: 48px; --header-h: 84px; }
  .logo--img img { height: 40px; }

  .btn-sm { padding: 13px 24px; font-size: 0.9375rem; }

  /* Hero fits the first screen: text starts right under the header and the
     buttons stay above the fold on a typical laptop/desktop */
  .hero { padding-block: 24px 112px; }
  .hero-inner {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
    gap: 56px;
  }
  .hero-copy { padding-top: 24px; }

  .br-lg { display: inline; }
  .hero-title { font-size: clamp(3.25rem, 4.6vw, 4.5rem); }
  .hero-lede  { margin-top: 20px; font-size: 1.1875rem; max-width: 40ch; }
  .hero-cta   { margin-top: 28px; }

  /* Full 4:5 photo (nothing cropped), sized so its height fits the screen and it
     never towers over the text. Width = available height × 4/5. */
  .hero-media {
    width: min(100%, calc((100svh / var(--zoom) - var(--header-h) - 64px) * 0.8));
    margin-inline: auto 0;
  }

  .section { padding-block: 128px; }
  .section-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: end;
  }
  .section-title { font-size: clamp(5rem, 8vw, 7rem); }
  .section-lede { margin-top: 0; font-size: 1.1875rem; }

  .acronym { margin-top: 80px; gap: 24px; }
  .acronym dt { font-size: clamp(8rem, 13vw, 11.5rem); }
  .acronym dd { margin-top: 16px; font-size: 1rem; }

  /* Label left, explanation right */
  .prep-not {
    display: grid;
    grid-template-columns: 0.35fr 0.65fr;
    align-items: center;
    column-gap: 56px;
    margin-top: 80px;
    padding: 48px 56px;
  }
  .prep-not-label { font-size: clamp(2.75rem, 4vw, 3.5rem); }
  .prep-not-body { margin-top: 0; max-width: none; font-size: 1.375rem; }


  /* Heading + CTA pinned on the left while the list scrolls on the right */
  .who-inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 80px;
    align-items: start;
  }
  .who-intro { display: block; position: sticky; top: calc(var(--header-h) + 24px); }
  .who-body { margin-top: 0; }
  .who-cta { margin-top: 32px; }
  .who-intro .section-title { font-size: clamp(3.75rem, 5.4vw, 5rem); }
  .who-intro .section-lede { margin-top: 24px; }
  .who-list li { font-size: 1.75rem; }

  /* Portrait photo pinned on the left, steps scroll on the right */
  .how-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: start;
    margin-top: 80px;
  }
  .how-image { position: sticky; top: calc(var(--header-h) + 24px); }
  .how-image-frame { aspect-ratio: 4 / 5; }
  .steps { gap: 64px; margin-top: 0; padding-top: 8px; }
  .step { grid-template-columns: 140px 1fr; }
  .step-num { font-size: 6.5rem; }
  .step h3 { font-size: 2.25rem; }
  .step p { font-size: 1.125rem; }
}

/* =========================================================
   lg — 1200px+
   ========================================================= */
@media (min-width: 1200px) {
  .hero { padding-block: 32px 136px; }
  .hero-inner { gap: 80px; }
}

/* =========================================================
   Big screens (Full HD, 1440p, 4K): use more of the width.
   Up to 1920px the content column widens; beyond that the whole page scales up
   with zoom, so a 4K screen shows the same layout at ~66–70% of its width
   instead of a small strip in the middle. --zoom tells the few screen-height
   based sizes (hero photo, pop-up) to undo the zoom, so they still fit.
   ========================================================= */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
}
@media (min-width: 1920px) {
  :root { --container: 1440px; }
}
@media (min-width: 2400px) {
  :root { --zoom: 1.25; }
  html { zoom: 1.25; }
}
@media (min-width: 3200px) {
  :root { --zoom: 1.75; }
  html { zoom: 1.75; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .who-list li .who-check,
  .who-list li .who-check path,
  .why-num,
  .privacy-icon { animation: none !important; }

  /* No auto-scroll: let people swipe the strip instead */
  .trust-strip { overflow-x: auto; scrollbar-width: none; }
  .trust-marquee { animation: none; padding-inline: var(--gutter); }
  .trust-list[aria-hidden="true"] { display: none; }
}

/* ---------- Phones: no photos ----------
   The hero photo and the "How it works" photo are
   hidden below 640px to keep the page short and fast; tablets and desktop keep them.
   (display: none also stops the browser downloading the lazy-loaded ones.) */
@media (max-width: 639px) {
  .hero-media,
  .how-image { display: none; }

  /* Close up the space the photos leave behind */
  .how .steps { margin-top: 0; }

  /* Smaller eyebrow above the hero heading, so it sits on one line */
  .hero-eyebrow { margin-bottom: 12px; font-size: 0.6875rem; letter-spacing: 0.1em; }

  /* Trust strip peeks in at the bottom edge of the first screen: it sticks to the
     bottom of the viewport until the page scrolls to its real place under the hero,
     then scrolls away as normal. Stays below the sticky header (z-index 50). */
  .trust-strip {
    position: sticky;
    bottom: 0;
    z-index: 40;
  }
}