/* The landing page (views/pages/home.php). Its sections run the full width of the screen,
   each with its own .container inside, so the page drops the usual container and padding. */

.page:has(> .home) {
  max-width: none;
  padding: 0;
}

.home > section > .container {
  padding-block: var(--sp-16);
}

/* ==========================================================================
   Hero: Dr. Beran's photo with the eyebrow, title and buttons over it.
   Each part below has all its own rules together, phones first, then the larger screens.
   The hero runs the full width of the screen, starts at the very top behind the frosted header,
   and has a set height for each screen size (tokens --hero-h-*, plus the header).
   ========================================================================== */

/* --- Header: on the landing page it floats over the photo, frosted, and stays there on scroll. --- */
body:has(.home) .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--c-glass-header);
  backdrop-filter: blur(var(--glass-blur));
}

/* --- Hero box --- */
.hero {
  position: relative;
  overflow: hidden; /* clips the glow, which is larger than the hero */
  isolation: isolate; /* keeps the photo, glow, blur and words in their own layer, so all of it scrolls under the header */
  box-shadow: var(--shadow-hero);
  display: grid;
  align-items: end;
  /* phones: the whole screen, the photo running up behind the frosted header; never less than --hero-h-sm below it */
  height: calc(var(--hero-h-sm) + var(--header-h));
  height: max(calc(var(--hero-h-sm) + var(--header-h)), 100vh);
  height: max(calc(var(--hero-h-sm) + var(--header-h)), 100dvh);
}

@media (min-width: 768px) {
  .hero {
    height: calc(var(--hero-h-md) + var(--header-h)); /* the photo runs up behind the frosted header */
  }
}

@media (min-width: 992px) {
  .hero {
    height: calc(var(--hero-h-lg) + var(--header-h));
  }
}

@media (min-width: 1200px) {
  .hero {
    height: calc(var(--hero-h-xl) + var(--header-h));
  }
}

/* From 1400px: 700px, but on wider screens it grows with the width, so the pair do not drop lower and get
   cut off higher up as the screen widens. Never taller than the screen, so the trust strip still peeks in. */
@media (min-width: 1400px) {
  .hero {
    height: calc(var(--hero-h-xxl) + var(--header-h));
    height: max(calc(var(--hero-h-xxl) + var(--header-h)), min(var(--hero-h-wide), 100vh));
    height: max(calc(var(--hero-h-xxl) + var(--header-h)), min(var(--hero-h-wide), 100dvh));
  }
}

/* --- Photo: on phones a 3:4 crop of the pair fills the hero's full height, zoomed in (not stretched), centred.
   From 768px the wide photo fills the hero's width; it is set taller than the hero (Christopher's values per
   screen size) so the pair are larger, and only the bottom is trimmed, so their heads stay in. --- */
.hero__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* zooms in to fill, keeping the photo's shape */
  object-position: center top;
}

@media (min-width: 768px) {
  .hero__photo {
    height: 145%;
    object-position: 75% top; /* hero-6: brings her in from the right edge */
  }
}

@media (min-width: 992px) {
  .hero__photo {
    height: 140%;
    object-position: center top;
  }
}

@media (min-width: 1200px) {
  .hero__photo {
    height: 125%;
  }
}

/* --- Fade, phones: white and blurred behind the words only, fading out over a short band just above them,
   so it follows the words however many lines they take. --- */
@media (max-width: 767.98px) {
  .home > .hero > .hero__inner::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--sp-16)) 0 0; /* the fade band: 64px above the words */
    z-index: -1;
    background-color: var(--c-glow-phone);
    backdrop-filter: blur(var(--glass-blur));
    mask-image: linear-gradient(to top, rgb(0, 0, 0) calc(100% - var(--sp-24)), transparent); /* fully white from 32px below the top of the words */
  }
}

/* --- Buttons, 768 to 991px: side by side, bottom right, level with the bottom of the title. --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero .intro__actions {
    position: absolute;
    right: var(--sp-6); /* lined up with the header's Create account */
    bottom: var(--sp-10);
    flex-wrap: nowrap;
  }
}

/* --- Glow: the mock-up's radial glow, measured from the Figma file: centred at 66% across and 37.6% down,
   clear there and white at its edge 61% of the hero's width away sideways and 122% up and down,
   turned 20.5 degrees so the bottom left gets the most white. A square three times the hero's width
   holds it, so the radii below are those distances divided by 3. From 768px; phones get an even wash
   instead (the glow is too strong on a narrow, tall hero), which lifts the photo by the same amount. --- */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--c-hero-wash);
}

@media (min-width: 768px) {
  .hero::after {
    inset: auto;
    left: 66%;
    top: 37.6%;
    width: 300%;
    aspect-ratio: 1;
    background-color: transparent;
    background-image: radial-gradient(ellipse 20.3% 40.6% at 50% 50%, var(--c-glow-clear), var(--c-glow));
    transform: translate(-50%, -50%) rotate(-20.5deg);
  }
}

/* --- Blur: softens the photo behind the words so they read well. From 768px: full on the left third,
   fading to sharp halfway across, before Dr. Beran (phones: see Fade). Strength: --glass-blur. --- */
@media (min-width: 768px) {
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(var(--glass-blur));
    mask-image: linear-gradient(to right, rgb(0, 0, 0) 30%, transparent 52%);
  }
}

/* 768 to 991px: the blur fans out from the bottom left, so the top left of the photo stays sharp. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero::before {
    mask-image: radial-gradient(ellipse 60% 90% at left bottom, rgb(0, 0, 0) 50%, transparent);
  }
}

/* --- Text column: holds the eyebrow, title and buttons, above the glow and blur. Width: --hero-text-w.
   Up to 991px it runs the full width of the screen, lined up with the header. --- */
.home > .hero > .hero__inner {
  position: relative;
  z-index: 2;
  padding-block: var(--sp-8);
}

@media (max-width: 991.98px) {
  .home > .hero > .hero__inner {
    max-width: none;
    padding-inline: var(--sp-6);
  }
}

@media (min-width: 768px) {
  .home > .hero > .hero__inner {
    padding-block: var(--sp-10);
  }

  .hero__intro {
    max-width: min(45%, var(--hero-text-w)); /* stays left of Dr. Beran */
    grid-template-columns: minmax(0, 1fr); /* the one-line eyebrow may run past the column without widening the title */
  }
}

/* 768 to 991px: the column is as wide as the title (--hero-title-w-lg), so it fits on three lines;
   Dr. Beran sits further right here. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero__intro {
    max-width: var(--hero-title-w-lg);
  }
}

/* --- Eyebrow: its look (capitals, spacing, size, deep blue) is .intro__eyebrow in components/intro.css.
   In the hero it is a step smaller, and from 768px it stays on one line. --- */
.hero .intro__eyebrow {
  font-size: var(--fs-xs);
}

@media (min-width: 768px) {
  .hero .intro__eyebrow {
    white-space: nowrap;
  }
}

/* --- Title: one step down and narrower from 768px, back up a step and full width from 1200px
   (sizes: --fs-* in tokens.css), letters drawn tighter. --- */
.hero__title {
  font-size: var(--fs-h1); /* phones: a step down, so the words take less of the photo */
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 576px) {
  .hero__title {
    font-size: var(--fs-display);
  }
}

@media (min-width: 768px) {
  .hero__title {
    max-width: var(--hero-title-w-lg); /* narrower, so it breaks over three lines like on larger screens */
    font-size: var(--fs-h2);
  }
}

@media (min-width: 1200px) {
  .hero__title {
    max-width: none;
    font-size: var(--fs-h1);
  }
}

/* --- Buttons: their shared look is .button in components/button.css. In the hero the text is smaller,
   and over the photo the secondary button is frosted white, like the header, with no outline. --- */
.hero .button {
  font-size: var(--fs-small);
}

@media (min-width: 768px) {
  .hero .button--secondary {
    background-color: var(--c-glass);
    border-color: transparent;
    backdrop-filter: blur(var(--glass-blur));
  }

  .hero .button--secondary:hover {
    background-color: var(--c-menu-button); /* like every main button's hover (button.css) */
    border-color: var(--c-menu-button-border);
  }
}

/* ==========================================================================
   Trust strip: four facts under the hero, in a rounded half-white box over a faint dot texture.
   Phones: one under another; from 576px two across; from 768px three across (full width up to 991px);
   from 1400px four across; lines between them.
   ========================================================================== */
/* A faint dot grid behind the strip, like paper texture: one soft, blurred dot every 8px,
   fading out towards the edges and the bottom. */
.trust {
  position: relative;
  overflow-x: clip; /* the holder lines below reach the page edge; this stops them adding a sideways scroll */
}

.trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--c-texture-dot), transparent calc(var(--border-1) * 3)); /* fades from the centre out to 3px: a soft, blurred dot */
  background-size: var(--sp-2) var(--sp-2);
  mask-image: radial-gradient(ellipse at top, var(--c-page), transparent 75%);
  pointer-events: none;
}

.trust__inner {
  position: relative; /* above the dots */
  padding-block: var(--sp-12);
}

/* --- The box: rounded, half-white, with lines between the facts that run right up to its edge. --- */
.trust__list {
  display: grid;
  background-color: var(--c-trust-box);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
}

@media (min-width: 576px) {
  .trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 768 to 991px: the strip runs the full width of the screen, lined up with the header. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .trust__inner {
    max-width: none;
    padding-inline: var(--sp-6);
  }
}

/* From 768px three across (the fourth fact, Worldwide, is left out: four are too tight here); from 1400px all four. */
@media (min-width: 768px) {
  .trust__list {
    position: relative; /* for the holder lines */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust__item:nth-child(4) {
    display: none;
  }
}

@media (min-width: 1400px) {
  .trust__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .trust__item:nth-child(4) {
    display: grid;
  }
}

/* Holder lines: from 992px a 1px line from the side of the page to the middle of a box's side.
   Used here and by the What we do box, the bio-partner benefits and the bio-partner chip
   (each box is position: relative; its section has overflow-x: clip). Lines to the left are ::before,
   lines to the right are ::after. */
@media (min-width: 992px) {
  .trust__list::before,
  .trust__list::after,
  .steps__box::before,
  .steps__box::after,
  .partners__items::after,
  .partners .intro__eyebrow::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 100vw; /* longer than needed; the section clips the rest */
    border-top: var(--border-1) solid var(--c-line);
  }

  .trust__list::before,
  .steps__box::before,
  .partners .intro__eyebrow::before {
    right: 100%;
  }

  .trust__list::after,
  .steps__box::after,
  .partners__items::after {
    left: 100%;
  }
}

/* --- One fact: the value on the left and its icon at the far right, then the small caps label and a line of text under both.
   Lines between facts: phones above each fact after the first; from 576px (two across) left of the
   right-hand column and above the second row; from 768px (three or four across) left of each fact after the first. --- */
.trust__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  align-items: center;
  align-content: start;
  padding: var(--sp-10);
}

.trust__item + .trust__item {
  border-top: var(--border-1) solid var(--c-line);
}

@media (min-width: 576px) {
  .trust__item + .trust__item {
    border-top: 0;
  }

  .trust__item:nth-child(even) {
    border-left: var(--border-1) solid var(--c-line);
  }

  .trust__item:nth-child(n + 3) {
    border-top: var(--border-1) solid var(--c-line);
  }
}

@media (min-width: 768px) {
  .trust__item:nth-child(n + 3) {
    border-top: 0;
  }

  .trust__item + .trust__item {
    border-left: var(--border-1) solid var(--c-line);
  }
}

.trust__item .bi {
  grid-area: 1 / 2; /* right of the value */
  font-size: var(--fs-h4);
  line-height: 1;
  color: var(--c-menu-button);
}

.trust__value {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--c-heading);
}

.trust__unit {
  grid-column: 1 / -1; /* under the icon and the value */
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-accent-text);
}

.trust__text {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* ==========================================================================
   Our areas of expertise: a centred intro, then three cards (one under another, three across from 992px),
   each with an icon, title, text and a button across its bottom border on the right, like the help cards.
   ========================================================================== */
.areas .intro {
  justify-items: center;
  max-width: var(--areas-title-w); /* wider than other intros, so the title breaks over two lines */
  margin-inline: auto;
  text-align: center;
}

.areas__list {
  display: grid;
  gap: var(--sp-12); /* room for the buttons that hang below each card */
  margin-top: var(--sp-12);
}

@media (min-width: 992px) {
  .areas__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-8);
  }
}

.areas__card {
  position: relative; /* holds the button */
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  isolation: isolate; /* keeps the photo behind the words */
  padding: var(--sp-8) var(--sp-8) var(--sp-12); /* room at the bottom for the button's top half */
  color: var(--c-on-dark);
  background-color: var(--c-dark); /* shows while the photo loads */
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-hero);
}

/* The card's photo, blurred and shaded graphite behind the words. Its own box clips the blur,
   so the card itself does not, and the button can still hang over the bottom edge. */
.areas__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
}

.areas__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--c-areas-shade);
}

.areas__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(var(--areas-blur));
  scale: 1.1; /* hides the blur's soft edges */
}

.areas__icon {
  font-size: var(--fs-h3);
  line-height: 1;
}

.areas__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-h3);
  color: var(--c-on-dark);
}

.areas__text {
  color: var(--c-on-dark-muted);
}

/* 992 to 1199px, where the cards are narrower: the title and text one size smaller (as the help cards). */
@media (min-width: 992px) {
  .areas__title {
    font-size: var(--fs-h4);
  }

  .areas__text {
    font-size: var(--fs-small);
  }
}

@media (min-width: 1200px) {
  .areas__title {
    font-size: var(--fs-h3);
  }

  .areas__text {
    font-size: var(--fs-body);
  }
}

.areas__button {
  position: absolute;
  right: var(--sp-8);
  bottom: 0;
  translate: 0 50%;
}

/* ==========================================================================
   What we do: an intro, then the four steps (test, treat, retest, feel better), with space above it.
   The steps are a full-width bar of tabs; picking one slides the blue pill to it and shows that step's panel below.
   No JavaScript: each tab is a label for a hidden radio button, and :has() shows the matching panel.
   The intro is centred.
   ========================================================================== */
.process {
  position: relative;
  isolation: isolate; /* keeps the helix (z-index -1) behind the section's content but above the page */
  margin-top: var(--sp-12);
  overflow-x: clip; /* the box's holder lines reach the page edge (see the trust strip) */
}

/* The DNA helix, very faint and upside down behind the whole section, fading in from the top. It runs on into the space
   above the testimonials, whose graphite band cuts it off at the bottom. */
.process::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--sp-32));
  z-index: -1;
  background: url("../../img/whatwedo/background-1.jpeg") center bottom / cover no-repeat;
  opacity: var(--helix-opacity);
  mask-image: linear-gradient(var(--c-page) 50%, transparent); /* reads top to bottom before the flip, so the fade ends up at the top */
  transform: scaleY(-1); /* flipped upside down */
  pointer-events: none;
}

.process .intro__text {
  font-size: var(--fs-body); /* a step smaller than other intros */
}

.process .intro {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.steps {
  margin-top: var(--sp-12);
}

/* --- The bar: four equal tabs in a grey-edged pill; ::before is the sliding blue pill behind the chosen tab.
   Full width on phones; from 768px only as wide as the tabs need, centred. --- */
.steps__bar {
  --step: 0; /* which tab is chosen, counted from 0; set below */
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--sp-1);
  background-color: var(--c-page); /* solid, so the helix behind does not show through */
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-pill);
}

@media (min-width: 768px) {
  .steps__bar {
    width: fit-content;
    margin-inline: auto;
  }
}

.steps__bar::before {
  content: "";
  position: absolute;
  top: var(--sp-1);
  bottom: var(--sp-1);
  left: var(--sp-1);
  width: calc((100% - 2 * var(--sp-1)) / 4);
  --gradient-top: var(--c-menu-button-light);
  --gradient-bottom: var(--c-menu-button);
  background-image: linear-gradient(var(--gradient-top), var(--gradient-bottom)); /* like .button--gradient (button.css), without its shadow */
  border-radius: var(--radius-pill);
  transform: translateX(calc(var(--step) * 100%));
  transition: transform var(--duration-slow) var(--ease), --gradient-top var(--duration-slow) var(--ease), --gradient-bottom var(--duration-slow) var(--ease);
}

/* Hovering the chosen tab fades the pill's gradient upside down, like the gradient buttons. */
.steps__bar:has(.steps__input:checked + .steps__tab:hover)::before {
  --gradient-top: var(--c-menu-button);
  --gradient-bottom: var(--c-menu-button-light);
}

.steps:has(#step-2:checked) .steps__bar { --step: 1; }
.steps:has(#step-3:checked) .steps__bar { --step: 2; }
.steps:has(#step-4:checked) .steps__bar { --step: 3; }

/* The radio buttons: hidden from sight but still reachable by keyboard and screen readers. */
.steps__input {
  position: absolute;
  width: var(--border-1);
  height: var(--border-1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.steps__tab {
  position: relative; /* above the sliding pill */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--button-h);
  padding-inline: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-button-text);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--duration-base) var(--ease);
}

.steps__tab .bi {
  display: none; /* no room on phones */
}

@media (min-width: 576px) {
  .steps__tab .bi {
    display: inline;
  }
}

@media (min-width: 768px) {
  .steps__tab {
    min-height: var(--button-h-lg);
    padding-inline: var(--sp-8);
    font-size: var(--fs-body);
  }
}

.steps__input:checked + .steps__tab {
  color: var(--c-menu-button-text);
}

.steps__input:focus-visible + .steps__tab {
  box-shadow: var(--focus-ring);
}

/* --- The panel for the chosen step: the step chip, centred under the bar, then the grey box.
   In the box: its title and a line on the left, two points on the right from 992px. --- */
.steps__panel {
  display: none;
  margin-top: var(--sp-6);
  animation: steps-fade var(--duration-slow) var(--ease-out);
}

.steps:has(#step-1:checked) #panel-1,
.steps:has(#step-2:checked) #panel-2,
.steps:has(#step-3:checked) #panel-3,
.steps:has(#step-4:checked) #panel-4 {
  display: grid;
}

@keyframes steps-fade {
  from {
    opacity: 0;
  }
}

/* The step chip: white with a grey edge, sitting across the box's top border.
   A fixed height (--button-h-sm, 32px) so it can be pulled down by exactly half of it. */
.steps__number {
  position: relative; /* above the box */
  z-index: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  min-height: var(--button-h-sm);
  margin-bottom: calc(-1 * var(--button-h-sm) / 2);
  padding-inline: var(--sp-4);
  line-height: 1;
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-accent-text);
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-pill);
}

/* A 1px line from the bottom of the bar down to the chip, in the middle. */
.steps__number::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  height: var(--sp-6); /* the space between the bar and the chip */
  border-left: var(--border-1) solid var(--c-line);
  transform: translateX(-50%);
}

.steps__box {
  position: relative; /* for its holder lines (see the trust strip) */
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-8);
  background-color: var(--c-panel);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-hero);
}

/* From 992px more padding, the title and text on the left (a wider column), the two points on the
   right, both blocks centred on each other. */
@media (min-width: 992px) {
  .steps__box {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    padding: var(--sp-12);
  }
}

.steps__title {
  font-size: var(--fs-h2); /* a step up from other h3s */
}

.steps__text {
  margin-top: var(--sp-3);
  color: var(--c-text-muted);
}

/* 992 to 1199px: a smaller title and text, so the three columns fit in one row. */
@media (min-width: 992px) {
  .steps__title {
    font-size: var(--fs-h3);
  }

  .steps__text {
    font-size: var(--fs-small);
  }
}

@media (min-width: 1200px) {
  .steps__title {
    font-size: var(--fs-h2);
  }

  .steps__text {
    font-size: var(--fs-body);
  }
}

.steps__items {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .steps__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* From 992px more room between the two points and space from the title column. */
@media (min-width: 992px) {
  .steps__items {
    column-gap: var(--sp-12);
    padding-left: var(--sp-8);
  }
}

/* One point: its icon and title side by side, the text under both. */
.steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-items: center;
  align-content: start; /* no extra space between the rows when the box is taller */
}

.steps__item .bi {
  font-size: var(--fs-h4);
  line-height: 1;
  color: var(--c-heading);
}

.steps__item-title {
  font-family: var(--font-body); /* the sans-serif, not the headings' serif */
  font-size: var(--fs-body);
  font-weight: 600;
}

.steps__item-text {
  grid-column: 1 / -1; /* under the icon and the title */
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* --- The button under the box, centred, joined to the box by a 1px line like the chip above it. --- */
.process__actions {
  --gap: var(--sp-12); /* clear of the box's shadow; the line fills it */
  display: flex;
  justify-content: center;
  margin-top: var(--gap);
}

/* Its colours and hover come from .button--gradient (button.css). */
.process__actions .button {
  position: relative;
  font-size: var(--fs-body); /* a step down from the large button's text */
}

.process__actions .button::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  height: var(--gap); /* the space between the box and the button */
  border-left: var(--border-1) solid var(--c-line);
  transform: translateX(-50%);
}

/* ==========================================================================
   What clients say: a graphite band showing one big quote at a time; the quotes fade from one to the next
   on their own (CSS animation, no JavaScript), and pause while the pointer or keyboard focus is on them.
   The dots under the quotes show which one is showing.
   All quotes stay in the page, so screen readers read every one. With reduced motion, only the first shows.
   The animation is written for three quotes: with a different number, change --reviews-count and the
   keyframe percentages below.
   ========================================================================== */
.reviews {
  --reviews-count: 3;
  margin-top: var(--sp-32);
  padding-block: var(--sp-32);
  color: var(--c-on-dark);
  background-color: var(--c-dark);
  position: relative;
  background-image: linear-gradient(var(--c-dark), var(--c-dark-light)); /* graphite, a touch lighter at the bottom */
}

/* Graph paper: 16px squares of 1px lines in --c-texture-on-dark, softly blurred,
   strongest at the top of the band and gone by halfway down. */
.reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, var(--c-texture-on-dark) var(--border-1), transparent var(--border-1)),
    linear-gradient(var(--c-texture-on-dark) var(--border-1), transparent var(--border-1));
  background-size: var(--sp-4) var(--sp-4);
  filter: blur(var(--texture-blur));
  mask-image: linear-gradient(var(--c-page), transparent 50%);
  pointer-events: none;
}

.reviews__inner {
  position: relative; /* above the graph paper */
}

.reviews .intro {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.reviews .intro__eyebrow {
  font-family: var(--font-body); /* it is the section's heading, but looks like the other eyebrows */
}

/* All the quotes sit in the same spot, so the band is as tall as the longest. */
.reviews__slider {
  display: grid;
  max-width: var(--container-lg);
  margin: var(--sp-10) auto 0;
  text-align: center;
}

/* --- One quote: the words in the heading serif, then who said it. --- */
.reviews__quote {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  align-content: start;
  opacity: 0;
  animation: reviews-cycle calc(var(--duration-review) * var(--reviews-count)) var(--ease) infinite;
}

.reviews__quote:nth-child(2) {
  animation-delay: var(--duration-review);
}

.reviews__quote:nth-child(3) {
  animation-delay: calc(var(--duration-review) * 2);
}

/* Each quote's third of the cycle: fade in, stay, fade out. */
@keyframes reviews-cycle {
  0% { opacity: 0; }
  4%, 30% { opacity: 1; }
  34%, 100% { opacity: 0; }
}

.reviews__text {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  text-wrap: balance;
  color: var(--c-on-dark);
}

/* Who said it: initials in a ring, centred above the name and the programme. */
.reviews__who {
  display: grid;
  justify-items: center;
  margin-top: var(--sp-8);
}

.reviews__avatar {
  display: grid;
  place-items: center;
  width: var(--sp-12);
  aspect-ratio: 1;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 600;
  border: var(--border-1) solid var(--c-on-dark-muted);
  border-radius: 50%;
}

.reviews__name {
  font-size: var(--fs-small);
  font-weight: 600;
}

.reviews__role {
  font-size: var(--fs-xs);
  color: var(--c-on-dark-muted);
}

/* --- Dots: one per quote; the showing one grows into a pale blue bar, in step with the quotes. --- */
.reviews__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
}

.reviews__dot {
  width: var(--sp-2);
  height: var(--sp-2);
  background-color: var(--c-on-dark-muted);
  border-radius: var(--radius-pill);
  animation: reviews-dot calc(var(--duration-review) * var(--reviews-count)) var(--ease) infinite;
}

.reviews__dot:nth-child(2) {
  animation-delay: var(--duration-review);
}

.reviews__dot:nth-child(3) {
  animation-delay: calc(var(--duration-review) * 2);
}

@keyframes reviews-dot {
  0%, 34%, 100% { width: var(--sp-2); background-color: var(--c-on-dark-muted); }
  4%, 30% { width: var(--sp-6); background-color: var(--c-accent); }
}

/* Pause while someone is reading: pointer over the quotes, or keyboard focus inside them. */
.reviews__inner:hover :is(.reviews__quote, .reviews__dot),
.reviews__inner:focus-within :is(.reviews__quote, .reviews__dot) {
  animation-play-state: paused;
}

/* Reduced motion: no fading, just the first quote. */
@media (prefers-reduced-motion: reduce) {
  .reviews__quote,
  .reviews__dot {
    animation: none;
  }

  .reviews__quote:first-child {
    opacity: 1;
  }

  .reviews__quote:not(:first-child),
  .reviews__dots {
    display: none;
  }
}

/* ==========================================================================
   Become a bio-partner: a photo on the left; the intro, button and four benefits on the right from 992px.
   Phones and tablets: the words first, then the photo under them.
   ========================================================================== */
.partners {
  position: relative;
  padding-block: var(--sp-32);
  background-image: linear-gradient(var(--c-page) 40%, var(--c-panel)); /* white, fading into the help band's off-white */
  overflow-x: clip; /* the holder lines reach the page edge (see the trust strip) */
}

/* A faint texture of small medical crosses (+) along the top of the section, just under the testimonials,
   fading out downwards and to the sides. The cross shape is a tiny SVG used as a mask (its fill only sets the shape);
   the colour is --c-texture-dot. One cross every 12px, 7px across, 1px lines. */
.partners::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--sp-32) * 3);
  background-color: var(--c-texture-dot);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 3h1v7H6zM3 6h7v1H3z'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at top, var(--c-page), transparent 75%); /* fades down and to the sides, like the trust dots */
  mask-size: var(--sp-3) var(--sp-3), 100% 100%;
  mask-repeat: repeat, no-repeat;
  mask-composite: intersect;
  pointer-events: none;
}

/* The eyebrow as a white chip, with a holder line from the left edge of the page (it passes behind the photo). */
.partners .intro__eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--button-h-sm);
  padding-inline: var(--sp-4);
  line-height: 1;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-pill);
}

.partners__inner {
  position: relative; /* above the crosses */
  display: grid;
  gap: var(--sp-12);
}

.partners .intro__text {
  font-size: var(--fs-body); /* like What we do's intro */
}

.partners__photo {
  order: 1; /* under the words until 992px */
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5; /* the JPEGs are already cropped to 4:5 from the full-length PNG, clear of its white top edge */
  object-fit: cover;
  background-color: var(--c-surface); /* shows while the photo loads */
  border-radius: var(--radius-2);
}

@media (min-width: 992px) {
  .partners__photo {
    position: relative;
    z-index: 1; /* above the chip's holder line */
  }

  .partners__inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--sp-16);
    align-items: center;
  }

  .partners__photo {
    order: 0;
  }

  /* 992 to 1199px: a narrower photo beside the words, and the benefits box across the full width below
     both (beside the words its two columns were too tight). The words wrapper steps aside so the
     intro and the box can each take their own place in the grid. */
  .partners__words {
    display: contents;
  }

  .partners__items {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* From 1200px: photo and words half and half, the benefits box under the words. */
@media (min-width: 1200px) {
  .partners__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partners__words {
    display: block;
  }

  .partners__items {
    grid-column: auto;
    margin-top: var(--sp-10);
  }
}

/* --- The four benefits, in a bordered box with a holder line to the right edge of the page:
   two columns from 576px; each has its icon and title side by side, the text under both. --- */
.partners__items {
  position: relative; /* for its holder line */
  display: grid;
  margin-top: var(--sp-10);
  background-color: var(--c-panel); /* the same off-white as the What we do box */
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
}

@media (min-width: 576px) {
  .partners__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr; /* equal rows, so the row line sits at the middle and meets the holder line */
  }
}

.partners__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-items: center;
  align-content: start;
  padding: var(--sp-8);
}

/* 992 to 1199px, where the box runs the full width: a little more room inside each item. */
@media (min-width: 992px) {
  .partners__item {
    padding: var(--sp-10);
  }
}

@media (min-width: 1200px) {
  .partners__item {
    padding: var(--sp-8);
  }
}

/* Dividing lines between the items, edge to edge (like the trust strip): rows on phones, rows and columns from 576px. */
.partners__item + .partners__item {
  border-top: var(--border-1) solid var(--c-line);
}

@media (min-width: 576px) {
  .partners__item:nth-child(2) {
    border-top: 0;
  }

  .partners__item:nth-child(even) {
    border-left: var(--border-1) solid var(--c-line);
  }
}

.partners__item .bi {
  font-size: var(--fs-h4);
  line-height: 1;
  color: var(--c-heading);
}

.partners__item-title {
  font-family: var(--font-body); /* the sans-serif, not the headings' serif */
  font-size: var(--fs-body);
  font-weight: 600;
}

.partners__item-text {
  grid-column: 1 / -1; /* under the icon and the title */
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* ==========================================================================
   How we can help: an off-white band (the bio-partner section fades into it), a centred intro,
   then three cards (Consultations, Shop, Learning). Each card's button sits
   on its bottom border, on the right. From 992px a 1px line runs across the page at the line under
   the cards' photos, showing at the sides and in the gaps between the cards.
   ========================================================================== */
.help {
  position: relative;
  padding-block: var(--sp-12) var(--sp-32);
  overflow-x: clip; /* the line across reaches the page edge (see the trust strip) */
  background-color: var(--c-panel);
}

.help .intro {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.help__list {
  position: relative; /* for the line across */
  container-type: inline-size; /* the line's height is worked out from the list's width */
  display: grid;
  gap: var(--sp-12);
  margin-top: var(--sp-16);
}

@media (min-width: 992px) {
  .help__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-8);
  }

  /* The line across: at the photos' bottom line. A card is a third of the list less the two gaps;
     its photo is 4:3 inside the card's 1px sides. The cards (white) hide it where they sit. */
  .help__list::before {
    content: "";
    position: absolute;
    top: calc(((100cqi - 2 * var(--sp-8)) / 3 - 2 * var(--border-1)) * 3 / 4);
    left: 50%;
    width: 100vw;
    border-top: var(--border-1) solid var(--c-line);
    translate: -50% 0;
  }
}

.help__card {
  position: relative; /* above the line across; holds the button */
  display: grid;
  grid-template-rows: auto 1fr;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-hero);
}

.help__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--c-surface); /* shows while the photo loads */
  border-bottom: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2) var(--radius-2) 0 0;
}

.help__body {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-8) var(--sp-12); /* room at the bottom for the button's top half */
}

.help__title {
  font-size: var(--fs-h3);
}

.help__text {
  color: var(--c-text-muted);
}

/* 992 to 1199px, where the cards are narrower: the title and text one size smaller. */
@media (min-width: 992px) {
  .help__title {
    font-size: var(--fs-h4);
  }

  .help__text {
    font-size: var(--fs-small);
  }
}

@media (min-width: 1200px) {
  .help__title {
    font-size: var(--fs-h3);
  }

  .help__text {
    font-size: var(--fs-body);
  }
}

/* The button sits across the card's bottom border, on the right. */
.help__button {
  position: absolute;
  right: var(--sp-8);
  bottom: 0;
  translate: 0 50%;
}

/* ==========================================================================
   Frequently asked questions: a centred intro, then the questions in a list with a thin line between
   each. Each one opens with a click (a native details element, no JavaScript); its plus turns to a cross.
   ========================================================================== */
.faq {
  padding-block: var(--sp-24);
}

.faq .intro {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.faq__link {
  color: var(--c-accent-text);
}

.faq__list {
  max-width: var(--faq-w);
  margin: var(--sp-12) auto 0;
  border-top: var(--border-1) solid var(--c-line);
}

.faq__item {
  border-bottom: var(--border-1) solid var(--c-line);
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
  font-size: var(--fs-lead);
  color: var(--c-heading);
  cursor: pointer;
  list-style: none; /* no browser triangle */
}

/* Safari: its own triangle ignores list-style. */
.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.faq__icon {
  flex-shrink: 0;
  font-size: var(--fs-h4);
  line-height: 1;
  transition: rotate var(--duration-base) var(--ease);
}

.faq__item[open] .faq__icon {
  rotate: 45deg;
}

.faq__answer {
  max-width: var(--text-w);
  padding-bottom: var(--sp-6);
  color: var(--c-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .faq__icon {
    transition: none;
  }
}