/* ==========================================================================
   Esper Healthcare: design system
   Palette authority: Esper navy (#0B2C5C, sampled from the official logo) is the
   brand anchor; royal blue (#1D4ED8) is the requested primary action colour.
   Everything else is a derived tint/shade or a neutral. No third hue.
   ========================================================================== */

:root {
  /* Brand */
  --navy-900: #0b2c5c;
  --navy-800: #123a72;
  --navy-700: #1a4a8c;
  --royal-600: #1d4ed8;
  --royal-700: #1740b0;
  --royal-100: #e8eefe;
  --royal-050: #f4f7fe;

  /* Neutrals */
  --ink: #101c33;
  --muted: #4f6180;
  --line: #e1e8f5;
  --surface: #ffffff;
  --surface-alt: #f7f9fd;

  /* Spacing scale: 4px base. Nothing off this scale. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;
  --s-10: 96px;
  --s-11: 120px;

  /* Section rhythm */
  --sec-y: var(--s-10);
  --gutter: var(--s-5);
  --container: 1200px;

  /* Radius: corporate pharma reads restrained, so the scale is deliberately tight */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Elevation: low and diffuse; no dramatic lifts on a clinical page */
  --sh-1: 0 1px 2px rgba(11, 44, 92, .04), 0 6px 16px rgba(11, 44, 92, .045);
  --sh-2: 0 12px 34px rgba(11, 44, 92, .09);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .25s;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Every title and heading is balanced: the browser evens out the line lengths so a
   two-line heading never leaves one orphan word on the second line. Applied at the
   element level so anything added later inherits it without being remembered. */
h1, h2, h3, h4, h5, h6 {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  color: var(--navy-900);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 4.4vw, 52px); font-weight: 800; }
h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 700; }
h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }

p, figure, dl, dd { margin: 0; }

/* Body copy gets `pretty` rather than `balance`: it keeps the last line from
   ending on a single orphan word without re-flowing the whole paragraph, which is
   what `balance` would do (and what it refuses to do past a few lines anyway). */
p, li, dd, dt, blockquote, figcaption, summary, label, td, th {
  text-wrap: pretty;
}

a { color: var(--royal-600); text-decoration: none; }
a:hover { color: var(--royal-700); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--royal-600);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -120px;
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); color: #fff; }

/* ---------- Layout primitives ---------- */

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

.section { padding-block: var(--sec-y); }
.section--tint { background: var(--surface-alt); }
.section--brand { background: var(--navy-900); }

/* A full-bleed photograph behind a dark section. The navy stays as the section
   background so the type is still legible if the image never loads, and the
   scrim carries the contrast rather than the photo being dimmed in Photoshop.

   The three layers are stacked with POSITIVE z-index (photo 0, scrim 1, content 2)
   rather than pulling the photo behind the section with a negative index. Negative
   z-index children are the fragile version: a browser that mispaints them, or a
   stale cached stylesheet, drops the photo out of the stack and it reappears as a
   band above the section instead of behind the content. Keep it positive. */
.section--photo { position: relative; isolation: isolate; overflow: hidden; }
.section--photo > .container { position: relative; z-index: 2; }
.section__bg { position: absolute; inset: 0; z-index: 0; }
.section__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(102deg, rgba(11, 44, 92, .96) 0%, rgba(11, 44, 92, .9) 46%, rgba(11, 44, 92, .74) 100%);
}

.section-head { max-width: 720px; margin-bottom: var(--s-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--s-4); color: var(--muted); }

/* Section labels are bordered pills. `currentColor` on the border means the
   outline follows the label colour automatically (royal on light sections, the
   pale blue on the dark evidence band) with no second rule to maintain. */
.eyebrow {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--royal-600);
}

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn--primary { background: var(--royal-600); color: #fff; }
.btn--primary:hover { background: var(--royal-700); color: #fff; }

.btn--ghost { background: transparent; color: var(--navy-900); border-color: var(--line); }
.btn--ghost:hover { background: var(--royal-050); border-color: var(--royal-600); color: var(--navy-900); }

.btn--on-dark { background: #fff; color: var(--navy-900); }
.btn--on-dark:hover { background: var(--royal-100); color: var(--navy-900); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.btn--sm { padding: var(--s-2) var(--s-5); font-size: 15px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: 15px;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* On the Home page the bar floats over the hero instead of pushing it down, so it
   is taken out of flow. Pages without a hero keep the sticky bar above. */
.header--overlay { position: fixed; left: 0; right: 0; }

/* Over the hero photograph the bar is glass on white type. main.js swaps the class
   back off as soon as the page scrolls past the hero, so the solid bar above is the
   state everywhere else. The logo is single-colour navy, so inverting it gives a
   clean white lockup without shipping a second file. */
.header--over-hero {
  background: transparent;
  border-bottom-color: transparent;
}
.header--over-hero .header__logo img { filter: brightness(0) invert(1); }
.header--over-hero .nav {
  background: rgba(11, 44, 92, .42);
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(14px);
}
.header--over-hero .nav__link { color: rgba(255, 255, 255, .88); }
.header--over-hero .nav__link:hover,
.header--over-hero .nav__link[aria-expanded="true"] { background: rgba(255, 255, 255, .16); color: #fff; }
.header--over-hero .nav__link[aria-current="page"],
.header--over-hero .nav__link[aria-current="page"]:hover { background: #fff; color: var(--navy-900); }
.header--over-hero .burger { color: #fff; border-color: rgba(255, 255, 255, .45); }
.header--over-hero .dropdown .dropdown__link { color: var(--navy-900); }

/* The header is fixed, so the sections after the hero need the bar's height back. */
.section[id] { scroll-margin-top: 84px; }

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 84px;
}

/* Where there is a nav, three tracks instead, so the nav capsule sits on the true
   centre of the page rather than in the middle of whatever space the logo leaves
   behind. Pages without a nav (design-notes.html) keep the flex bar above. */
.header__bar:has(.nav) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

/* Official horizontal lockup, 665x168. It carries the "Benchmark in Healthcare"
   tagline inside the artwork, so it needs a little more height than a bare
   wordmark would to stay legible. Capped again on small screens (see queries). */
.header__logo img { height: 58px; width: auto; }

/* The nav is a single capsule with the links as pills inside it. The current
   page is the filled pill. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1);
  background: rgba(11, 44, 92, .03);
  border: 1px solid rgba(11, 44, 92, .22);
  border-radius: var(--r-pill);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { background: var(--royal-050); color: var(--royal-600); }
.nav__link[aria-current="page"] { background: var(--navy-900); color: #fff; }
.nav__link[aria-current="page"]:hover { background: var(--navy-900); color: #fff; }
span.nav__link { cursor: default; user-select: none; }

.nav__item { position: relative; }

.nav__toggle {
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav__caret { display: inline-flex; }
.nav__toggle svg { transition: transform var(--dur) var(--ease); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + var(--s-3));
  left: 0;
  min-width: 340px;
  padding: var(--s-3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown__group + .dropdown__group { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }

.dropdown__label {
  display: block;
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.dropdown__link {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--navy-900);
  font-size: 15px;
  font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dropdown__link span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.dropdown__link:hover { background: var(--royal-050); color: var(--royal-600); }
.dropdown__link:hover span { color: var(--muted); }

/* Holds the burger only; the header enquiry button was removed on 2026-09-10. */
.header__cta { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--navy-900);
}

/* ---------- Hero ----------
   Full-bleed photograph with the headline over it, a product card top right, the
   introduction bottom right. Layout follows the reference supplied on 2026-09-10. The scrim below is the only
   thing keeping the white type legible, so do not weaken it if the photo changes.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(84px + var(--s-9)) var(--s-9);
  overflow: hidden;
  background: var(--navy-900);
  color: #fff;
}

/* Photo 0, scrim 1, content 2: the same positive stack as the other two
   photographic bands. See the note above .section--photo for why. */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.hero__inner { position: relative; z-index: 2; }

/* Two-part scrim: a heavy wash from the left for the headline, and a softer lift
   from the bottom so the introduction stays readable. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgba(11, 44, 92, .92) 0%,
      rgba(11, 44, 92, .78) 34%,
      rgba(11, 44, 92, .42) 62%,
      rgba(11, 44, 92, .30) 100%),
    linear-gradient(to top,
      rgba(11, 44, 92, .70) 0%,
      rgba(11, 44, 92, .12) 38%,
      rgba(11, 44, 92, 0) 62%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
  gap: var(--s-9) var(--s-8);
}

.hero__lead { grid-column: 1; grid-row: 1 / span 2; align-self: center; }

.hero h1 { color: #fff; font-size: clamp(40px, 5.2vw, 64px); line-height: 1.06; }

.hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-5);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(6px);
}
.hero__tagline::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8fb2ff;
}

/* The pill CTA from the reference: label plus a filled circular arrow. */
.btn--pill {
  margin-top: var(--s-7);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  background: var(--royal-600);
  color: #fff;
  border-radius: var(--r-pill);
  gap: var(--s-4);
}
.btn--pill:hover { background: var(--royal-700); color: #fff; }
.btn__dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--royal-600);
  transition: transform var(--dur) var(--ease);
}
.btn--pill:hover .btn__dot { transform: translateX(3px); }

/* Introduction block, bottom right. The lead product card that used to sit above
   it was removed on Jennie's instruction (round 12), so the introduction now owns
   the whole right-hand column and hangs off its bottom edge. */
.hero__intro { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 420px; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.hero__intro p { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .88); }

/* Inner-page hero: the same photo + scrim treatment as Home, but one column and
   roughly half the height, so a secondary page never competes with the homepage.
   Everything else (.hero__bg, .hero__tagline, the scrim) is inherited. */
/* One fixed floor for every inner-page hero (About, Products, Contact), so the three
   run the same height whatever the length of their copy. Content centres inside it.
   Floors are set just above the tallest of the three at each breakpoint. */
.hero--page { min-height: 540px; padding-block: calc(84px + var(--s-9)) var(--s-9); }
.hero--page .hero__inner { grid-template-columns: minmax(0, 760px); }
.hero--page .hero__lead { grid-row: 1; }
.hero--page h1 { font-size: clamp(36px, 4.4vw, 54px); }
.hero__standfirst {
  margin-top: var(--s-5);
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
}

/* ---------- Contact: enquiry form + company details ---------- */

/* Both columns are stretched to the same height so the white form card and the navy
   details card end on the same line. The form keeps its rows at their natural size
   (align-content: start) rather than spreading them, and the details card pushes its
   social block to the bottom, so the extra height is absorbed as breathing space. */
.contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-7); align-items: stretch; }

.form {
  display: grid;
  align-content: start;
  gap: var(--s-5);
  padding: var(--s-7);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

.field { display: grid; gap: var(--s-2); }
.field label { font-size: 14px; font-weight: 600; color: var(--navy-900); }
.field label span { color: var(--royal-600); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  /* background-color, never the `background` shorthand: the shorthand resets
     background-image and wipes the select chevron set further down. */
  background-color: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(11, 44, 92, .22); }
.field input:focus, .field select:focus, .field textarea:focus {
  background-color: #fff;
  border-color: var(--royal-600);
  outline: none;
  box-shadow: 0 0 0 3px var(--royal-100);
}
.field input::placeholder, .field textarea::placeholder { color: #8b9ab5; }

/* The browser's own bubble is suppressed (novalidate), so an invalid field is
   flagged only after a submit attempt rather than while it is being typed in. */
.field input.is-invalid, .field textarea.is-invalid { border-color: #b4232a; background-color: #fdf4f4; }

/* Native select arrows differ wildly between platforms; one chevron instead. */
.field select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: 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='%230b2c5c' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
}

/* Multi-select (Product). A native <select multiple> renders as a scrolling box
   that looks nothing like the other fields and is unusable on a phone, so the
   control is a button plus a checkbox panel dressed to match .field select
   exactly: same padding, border, radius and chevron. */
.field__label { font-size: 14px; font-weight: 600; color: var(--navy-900); }
.multi { position: relative; }
.multi__trigger {
  width: 100%;
  padding: var(--s-3) var(--s-8) var(--s-3) var(--s-4);
  background-color: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background-image: 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='%230b2c5c' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.multi__trigger:hover { border-color: rgba(11, 44, 92, .22); }
.multi__trigger:focus-visible,
.multi__trigger[aria-expanded="true"] {
  background-color: #fff;
  border-color: var(--royal-600);
  outline: none;
  box-shadow: 0 0 0 3px var(--royal-100);
}
.multi__trigger.is-empty { color: #8b9ab5; }

.multi__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  max-height: 260px;
  overflow-y: auto;
  padding: var(--s-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 40px rgba(11, 44, 92, .16);
}
.multi__panel[hidden] { display: none; }

/* These are <label>s and <input>s inside .field, so the plain field styling
   further up would otherwise turn every checkbox into a full-width text box. */
.field .multi__option {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.field .multi__option:hover { background: var(--royal-050); }
.field .multi__option input {
  width: 18px;
  height: 18px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  accent-color: var(--royal-600);
  cursor: pointer;
}

.form__submit { justify-self: start; margin-top: 0; border: 0; }
.form__status { font-size: 15px; color: var(--muted); }
.form__status:empty { display: none; }
.form__status.is-error { color: #b4232a; }
.form__note { font-size: 14px; color: var(--muted); }

/* Company details card. Deliberately navy rather than another white panel, so the
   two halves of the section read as form and facts, not as two forms. */
.info {
  display: flex;
  flex-direction: column;
  padding: var(--s-7);
  background: var(--navy-900);
  border-radius: var(--r-lg);
  color: #fff;
}
.info__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fb2ff;
}
.info__title { margin-top: var(--s-2); color: #fff; }

.info__list { display: grid; gap: var(--s-5); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.info__item { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; }
.info__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-sm);
  color: #fff;
}
.info__body { display: grid; gap: var(--s-1); }
.info__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.info__value { font-size: 16px; line-height: 1.6; color: #fff; font-weight: 600; }
a.info__value:hover { color: #8fb2ff; }
.info__value--plain { font-weight: 400; color: rgba(255, 255, 255, .88); }

/* margin-top: auto keeps "Follow us" pinned to the foot of the stretched card. */
.info__social { margin-top: auto; padding-top: var(--s-6); border-top: 1px solid rgba(255, 255, 255, .16); }
.info__list { margin-bottom: var(--s-7); }
.info__social .social__label { color: rgba(255, 255, 255, .62); }
.info__social .social__list { display: flex; flex-wrap: nowrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.info__social .social__link { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #fff; }
.info__social a.social__link:hover,
.info__social a.social__link:focus-visible { background: #fff; border-color: #fff; color: var(--navy-900); }

/* ---------- Map ---------- */

.map {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.map iframe { display: block; width: 100%; height: 440px; border: 0; }
.map__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}

/* ---------- Split (about) ---------- */

/* Stretch, not centre: the photo should start and end level with the text
   column beside it rather than floating in the middle of it. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: stretch; }
.split__body > p { margin-top: var(--s-4); color: var(--muted); }

.split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  min-height: 420px;
  background: var(--royal-050);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Photo on the left, copy on the right. Order, not DOM order, so the reading order
   stays copy-first when the section stacks on a phone. */
.split--reverse .split__media { order: -1; }

/* A portrait photo would otherwise run to its own intrinsic height and tower over a
   short copy column, so it is cropped square instead. */
.split__media--square { aspect-ratio: 1 / 1; }

/* Copy column carries the weight on its own (no photo beside it), so the two
   columns are weighted towards the prose rather than split 50/50. */
.split--narrow { grid-template-columns: 1.05fr .95fr; align-items: center; }

/* Opening paragraph of a section: a step up in size from the body copy so the
   eye lands on it before the supporting paragraphs. */
.split__body > p.lede { font-size: 19px; color: var(--ink); }

/* Two portrait photos side by side inside one media frame, as they sit on the
   client's own About us slide. A 2px gap reads as a seam, not as two cards. */
.split__media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.split__media--pair img { width: 100%; height: 100%; object-fit: cover; }

/* Photo with a credential badge tucked into its lower-left corner. The photo needs
   the padding so the badge never sits on the very edge of the frame. */
.split__media--badged { position: relative; }
.split__badge {
  position: absolute;
  left: var(--s-5);
  bottom: var(--s-5);
  display: grid;
  gap: 2px;
  padding: var(--s-4) var(--s-5);
  background: rgba(255, 255, 255, .95);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
}
.split__badge-value {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.split__badge-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The numbers were stranded at the foot of the copy column; as a full-width band
   under the split they read as the section's headline facts. */
.factband {
  margin-top: var(--s-8);
  padding: var(--s-7) var(--s-6);
  background: var(--royal-050);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.factband .stats { grid-template-columns: repeat(4, 1fr); margin-top: 0; }

/* "What we do": three labelled rows in place of the second stacked photo split,
   so the page does not run two identical photo-and-copy blocks back to back. */
.doing {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.doing__item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.doing__item:hover { border-color: var(--royal-600); box-shadow: var(--sh-1); }
.doing__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--royal-100);
  color: var(--royal-600);
}
.doing__item h3 { font-size: 19px; margin-bottom: var(--s-2); }
.doing__item p { font-size: 15px; color: var(--muted); }

/* Arrow link closing a split column. */
.split__body > p.split__link { margin-top: var(--s-6); }

/* Quality and distribution (about): copy left as two labelled points, the six
   standards right as a 3x2 grid of white tiles. The marks come in mixed colours,
   so they sit on white rather than directly on navy. */
.quality { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: var(--s-9); align-items: stretch; }
/* The eyebrow spans both columns, so the heading and the first row of tiles start on
   one line, and the tile grid stretches to end level with the Distribution point. */
.quality > .eyebrow { grid-column: 1 / -1; justify-self: start; margin-bottom: var(--s-5); }
.quality__points { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.quality__point { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-5); align-items: start; }
.quality__point + .quality__point { padding-top: var(--s-6); border-top: 1px solid rgba(255, 255, 255, .14); }
.quality__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: rgba(143, 178, 255, .14);
  color: #8fb2ff;
}
.quality__point h3 { font-size: 19px; margin-bottom: var(--s-2); }
.quality__point p { font-size: 16px; color: rgba(255, 255, 255, .78); }

.quality__marks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.quality__mark {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: #fff;
  border-radius: var(--r);
  text-align: center;
}
/* The cap has to be a length, not `max-height: 100%`: inside a centred grid area the
   percentage resolves against an indefinite height and is dropped, so a tall mark
   (the USP triangle) spills out of the tile. */
.quality__logo { display: grid; place-items: center; height: 56px; }
/* Fixed box + contain: an SVG with no intrinsic pixel size collapses to 0 under
   width/height auto, which is how the FDA mark vanished on the first pass. */
.quality__logo img { width: 120px; height: 52px; object-fit: contain; }
.quality__logo--type {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--navy-900);
}
.quality__name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  align-self: start;
  width: 100%;
  min-height: 64px;
  width: 100%;
}

/* Two buttons side by side under the CTA copy. */
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.cta__actions .btn--pill { margin-top: 0; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-7); }
.stats__item { padding-left: var(--s-5); border-left: 3px solid var(--royal-600); }
.stats__value {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.stats__label { margin-top: var(--s-2); font-size: 14px; color: var(--muted); white-space: nowrap; }

/* ---------- Cards ---------- */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { border-color: var(--royal-600); box-shadow: var(--sh-1); }
.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s-5);
  background: var(--royal-050);
  border-radius: var(--r-sm);
  color: var(--royal-600);
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--muted); font-size: 16px; }
/* Beside a 46px icon, a phone leaves a card heading barely twenty characters of
   room. The longest title carries a shorter phrasing for that width; both are in
   the markup and only one is ever shown. */
.card h3 .on-phone { display: none; }

/* A line break that only exists on phones, for copy that needs a different
   wrap at narrow widths than it does on desktop. */
br.on-phone { display: none; }

/* ---------- Therapeutic area tiles ----------
   One icon per area, a plain-English label, the clinical term underneath, and the
   named treatments Esper actually supplies into that area. */

.area {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: center;
  align-items: center;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.area:hover { border-color: var(--royal-600); box-shadow: var(--sh-1); }

.area__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: var(--s-5);
  background: var(--royal-050);
  border: 1px solid var(--royal-100);
  border-radius: var(--r-pill);
  color: var(--royal-600);
}
.area__icon svg { width: 40px; height: 40px; display: block; }
/* Client-supplied anatomical icons (PNG on alpha, already brand royal). */
/* Slightly larger than the old 40px SVGs: this art has interior detail that
   goes muddy below ~46px. */
.area__icon img { width: 46px; height: 46px; display: block; object-fit: contain; }

.area h3 { margin-bottom: var(--s-3); }
.area p { flex: 1; font-size: 15px; color: var(--muted); }

/* ---------- Product cards ---------- */

.product {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.product:hover { border-color: var(--royal-600); box-shadow: var(--sh-1); }

/* Packshots arrive at wildly different intrinsic sizes (square bottles, long
   syringe cartons). A FIXED-height stage plus a per-shape cap is what makes them
   all read at the same visual weight. aspect-ratio alone did not, because the
   flex content could override it and squares filled the full height. */
.product__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  padding: var(--s-6);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.product__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Tall/square packshots would otherwise tower over the landscape ones. */
.product__media--square img { max-height: 86%; }
/* Wide, short packshots need the full width to carry any presence at all. */
.product__media--wide img { max-width: 100%; max-height: 100%; }

.product__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-6); }
/* Same bordered-pill treatment as the section labels, one step smaller so it
   sits under the product name rather than competing with it. */
.product__cat {
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--royal-600);
}
.product__body h3 { margin: var(--s-3) 0 var(--s-3); }
.product__body p { flex: 1; font-size: 15px; color: var(--muted); }

.product__specs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.product__specs li {
  padding: var(--s-1) var(--s-3);
  background: var(--royal-050);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
}
.product__link { margin-top: var(--s-5); }

/* ---------- Evidence band (dark) ---------- */

.section--brand h2, .section--brand h3 { color: #fff; }
.section--brand .eyebrow { color: #8fb2ff; }
.section--brand .section-head p { color: rgba(255, 255, 255, .78); }

.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.figure {
  padding: var(--s-6);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r);
}
.figure__value {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.figure__value small { font-size: 17px; font-weight: 700; }
.figure__label { margin-top: var(--s-3); font-size: 15px; color: rgba(255, 255, 255, .8); }
.figure__note { margin-top: var(--s-2); font-size: 13px; color: rgba(255, 255, 255, .6); }

/* ---------- CTA band ---------- */

/* A photographic panel with a soft-cornered white card floating on it, per the
   reference. The photograph is a real element rather than a background-image so
   it can be lazy-loaded and sized like every other image on the page. */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s-8);
  align-items: center;
  padding: var(--s-9);
  background: var(--navy-900);
  border-radius: 28px;
  color: #fff;
}
/* Same positive stack as .section--photo: photo 0, scrim 1, content 2. object-fit
   is what keeps the photograph on its own aspect ratio inside a panel that is a
   different shape, so it crops rather than squashing. */
.cta__bg { position: absolute; inset: 0; z-index: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cta__lead, .cta__card { position: relative; z-index: 2; }
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(11, 44, 92, .96) 0%, rgba(11, 44, 92, .88) 44%, rgba(11, 44, 92, .6) 100%);
}
.cta h2 { color: #fff; }
.cta__lead > p { margin-top: var(--s-4); max-width: 46ch; color: rgba(255, 255, 255, .84); }
.cta__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-5);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(6px);
}
.cta__lead .btn--pill { margin-top: var(--s-6); }

.cta__card {
  padding: var(--s-7);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 26px 60px rgba(6, 20, 44, .3);
  color: var(--navy-900);
}
.cta__card-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--royal-600);
}
.cta__card-mail {
  display: inline-block;
  margin-top: var(--s-3);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  word-break: break-word;
}
.cta__card-mail:hover { color: var(--royal-600); }
.cta__card-text { margin-top: var(--s-4); font-size: 15px; color: var(--muted); }
.cta__card .link-arrow { margin-top: var(--s-5); }

/* ---------- Footer ---------- */

.footer { padding-block: var(--s-9) var(--s-6); background: var(--surface-alt); border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); }
.footer__logo img { height: 54px; width: auto; }
.footer__blurb { margin-top: var(--s-4); max-width: 38ch; font-size: 15px; color: var(--muted); }
.footer h4 { margin-bottom: var(--s-4); font-size: 15px; }

/* Social row: circular icon buttons, no third hue, icons inherit currentColor */
.social { margin-top: var(--s-5); }
.social__label {
  margin-bottom: var(--s-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Specificity has to beat `.footer ul` below, which is a grid and would stack these vertically */
.footer .social__list { display: flex; flex-wrap: nowrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.footer .social__list li { display: block; }
.social__link {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--navy-900);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social__link svg { width: 15px; height: 15px; fill: currentColor; display: block; }
/* Anchors only: X and YouTube are non-clickable <span>s and must not react to hover.
   The `.footer a.social__link` copies are there to beat `.footer a:hover` below, which is
   more specific than a bare `.social__link:hover` and was repainting the icon royal on
   royal, i.e. making it vanish. Keep both selectors if this rule is ever edited. */
a.social__link:hover,
a.social__link:focus-visible,
.footer a.social__link:hover,
.footer a.social__link:focus-visible {
  background: var(--royal-600);
  border-color: var(--royal-600);
  color: #fff;
  transform: translateY(-2px);
}
span.social__link { cursor: default; }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.footer a { color: var(--muted); font-size: 15px; }
.footer a:hover { color: var(--royal-600); }

/* Opening hours sit in the same column as the email, so they match its size and colour */
.footer__hours,
.footer__branch { display: grid; gap: 2px; color: var(--muted); font-size: 15px; }
.footer__branch { margin-bottom: var(--s-2); }
.footer__hours { margin-top: var(--s-2); }
.footer__hours-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.footer__note { max-width: 70ch; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  :root { --sec-y: var(--s-9); --gutter: var(--s-5); }

  .header__bar { min-height: 72px; }
  .header__bar:has(.nav) { grid-template-columns: auto 1fr; }
  .header__logo img { height: 50px; }
  .nav { display: none; }
  .burger { display: flex; }

  /* The drawer is a full-width panel, so the desktop capsule (pill border, blur,
     tight padding) is unwound here. */
  .nav {
    position: fixed;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-1);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    padding: var(--s-5) var(--s-5) var(--s-7);
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: var(--sh-2);
  }
  .nav.is-open { display: flex; }
  .nav__link { padding: var(--s-3) var(--s-4); font-size: 17px; border-radius: var(--r-sm); }
  .nav__link[aria-current="page"] { background: var(--royal-050); color: var(--royal-600); }
  .nav__toggle { width: 100%; justify-content: space-between; }
  /* In the drawer the word opens the page and the chevron expands the list, so the
     chevron gets a finger-sized target of its own. */
  .nav__caret { padding: var(--s-3) var(--s-4); margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-4)); }

  .dropdown {
    position: static;
    min-width: 0;
    margin-top: var(--s-2);
    padding: var(--s-2);
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__item.is-open .dropdown { display: block; }

  /* The drawer has its own white panel, so the over-hero white type must not follow
     the links into it. */
  .header--over-hero .nav { background: #fff; border-color: transparent; border-bottom-color: var(--line); backdrop-filter: none; }
  .header--over-hero .nav .nav__link { color: var(--navy-900); }
  .header--over-hero .nav .nav__link:hover,
  .header--over-hero .nav .nav__link[aria-expanded="true"] { background: var(--royal-050); color: var(--royal-600); }
  .header--over-hero .nav .nav__link[aria-current="page"],
  .header--over-hero .nav .nav__link[aria-current="page"]:hover { background: var(--royal-050); color: var(--royal-600); }

  .hero { min-height: 660px; padding-block: calc(72px + var(--s-8)) var(--s-10); }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--s-7) var(--s-6); }
  .hero__intro { max-width: none; }

  .hero--page { min-height: 460px; padding-block: calc(72px + var(--s-8)) var(--s-8); }
  .hero--page .hero__inner { grid-template-columns: minmax(0, 1fr); }

  .contact { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .map iframe { height: 380px; }

  .split { grid-template-columns: 1fr; gap: var(--s-7); }
  /* Single column: nothing to line up with, so the photo goes back to a
     fixed shape instead of stretching. */
  .split__media { order: -1; min-height: 0; aspect-ratio: 5 / 4; }

  .factband { padding: var(--s-6) var(--s-5); }
  .factband .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-5); }

  .quality { grid-template-columns: 1fr; row-gap: var(--s-8); }
  .quality > .eyebrow { margin-bottom: calc(var(--s-5) - var(--s-8)); }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .product__media { height: 240px; }

  .cta { grid-template-columns: 1fr; padding: var(--s-7); border-radius: 22px; }
  /* Stacked, the copy sits above the card rather than beside it, so the scrim
     has to run top-to-bottom instead of left-to-right. */
  .cta::before { background: linear-gradient(168deg, rgba(11, 44, 92, .96) 0%, rgba(11, 44, 92, .88) 100%); }

  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}

@media (max-width: 720px) {
  :root { --sec-y: var(--s-8); --gutter: var(--s-4); }

  body { font-size: 16px; }

  /* Keep the wide lockup clear of the burger on phones. */
  .header__logo img { height: 40px; }
  .footer__logo img { height: 46px; }

  /* One column on phones: headline, then the introduction. */
  .hero { min-height: 0; padding-block: calc(72px + var(--s-7)) var(--s-7); }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero__lead, .hero__intro { grid-column: 1; grid-row: auto; }
  .btn--pill { margin-top: var(--s-6); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .figures { grid-template-columns: 1fr; }

  /* The three about-figures stay on one row on phones, so the numbers read as a
     set. The labels have to be free to wrap at that width. */
  .stats { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .stats__item { padding-left: var(--s-3); border-left-width: 2px; }
  .stats__value { font-size: 26px; }
  .stats__label { font-size: 13px; line-height: 1.35; white-space: normal; }

  /* Four facts will not fit on one phone row, so the band goes two by two. */
  .factband .stats { grid-template-columns: repeat(2, 1fr); }
  .split__badge { left: var(--s-4); bottom: var(--s-4); padding: var(--s-3) var(--s-4); }
  .doing__item { grid-template-columns: 44px 1fr; gap: var(--s-4); }
  .doing__icon { width: 44px; height: 44px; }

  .quality__point { grid-template-columns: 44px 1fr; gap: var(--s-4); }
  .quality__icon { width: 44px; height: 44px; }
  .quality__marks { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .quality__mark { padding: var(--s-4) var(--s-3); }
  .quality__logo { height: 60px; }
  .quality__logo img { width: 104px; height: 44px; }
  .quality__logo--type { font-size: 28px; }
  .quality__name { font-size: 11px; }

  .section-head { margin-bottom: var(--s-6); }
  .card, .area, .product__body, .product__media { padding: var(--s-5); }

  /* Full-width stacked cards waste the space beside a 52px icon, so on phones the
     icon and heading share a row and the body copy runs under both. */
  .card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--s-4);
  }
  .card__icon { width: 46px; height: 46px; margin-bottom: 0; }
  .card h3 { margin-bottom: 0; }
  .card h3 .on-phone { display: inline; }
  .card h3 .on-desktop { display: none; }
  br.on-phone { display: inline; }
  br.on-desktop { display: none; }
  .card p { grid-column: 1 / -1; margin-top: var(--s-4); }
  .product__media { height: 220px; }
  /* Stacked cards run the full width, so the light end of the scrim would sit
     under body copy. Even it out on phones. */
  .section--photo::before { background: linear-gradient(168deg, rgba(11, 44, 92, .95) 0%, rgba(11, 44, 92, .88) 100%); }

  .hero--page { min-height: 480px; padding-block: calc(72px + var(--s-7)) var(--s-7); }
  .hero__standfirst { font-size: 16px; }

  /* Two fields side by side leave about 20 characters each on a phone. */
  .form { padding: var(--s-5); gap: var(--s-4); }
  .form__row { grid-template-columns: 1fr; gap: var(--s-4); }
  .form__submit { justify-self: stretch; justify-content: center; }
  .info { padding: var(--s-5); }
  .map iframe { height: 300px; }
  .map__caption { padding: var(--s-4); }

  .cta { padding: var(--s-6); border-radius: 18px; }
  .cta__card { padding: var(--s-6); }
  /* The address is a single unbreakable token, so it has to come down a step on
     a phone rather than split across two lines mid-word. */
  .cta__card-mail { font-size: 17px; }

  .footer__top { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer__bottom { margin-top: var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Products page (redesign, 2026-09-22) ----------
   One grid for the whole page. Every product block is the same two tracks (5 : 7),
   so the product photos, the side headings and the cards all start and end on the
   same three vertical lines: container left, the gutter, container right.
   Colour: white only (Jennie, round 38), royal for figures, navy for headings. */

.page-products sup { font-size: .55em; line-height: 0; vertical-align: super; margin-left: 1px; }

/* The range (round 40, Jennie's reference): heading left / intro right, then six
   centred cards - category pill, name, packshot, "View details" pill, type line.
   Each card scrolls to its product section below. */
.pp-range { padding-bottom: var(--sec-y); }
.pp-range__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}
.pp-range__head h2 { margin: 0; }
.pp-range__head p { margin: 0; max-width: 46ch; justify-self: end; color: var(--muted); }
.pp-range__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--navy-900);
  text-align: center;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pp-tile:hover { border-color: var(--royal-600); box-shadow: var(--sh-1); color: var(--navy-900); }
.pp-tile__cat {
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  color: var(--royal-600);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pp-tile__name {
  margin-top: var(--s-3);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.pp-tile__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  margin: var(--s-5) 0;
}
/* min-width/min-height 0: a replaced element is a flex item here, and the default
   min-width:auto is its intrinsic width, which stops wide packshots from shrinking
   to max-width:100% and lets them bleed out of the card. */
.pp-tile__media img { width: auto; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-tile__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--navy-900);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background var(--dur) var(--ease);
}
.pp-tile:hover .pp-tile__btn { background: var(--royal-600); }
.pp-tile__type { margin-top: var(--s-3); font-size: 13px; color: var(--muted); line-height: 1.45; }

/* One product = one section, divided from the next by a hairline. */
.pp { border-top: 1px solid var(--line); }
.section.pp[id] { scroll-margin-top: 0; } /* html scroll-padding alone clears the header */
.pp + #partner { padding-top: 0; }

/* Product name row: number, name, rule underneath. */
.pp__head {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-8);
  border-bottom: 1px solid var(--line);
}
.pp__index {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--royal-600);
  border-radius: 50%;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--royal-600);
}
.pp__head h2 { font-size: clamp(30px, 3.4vw, 42px); }

/* The shared 5 : 7 grid. */
.pp__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-8);
  align-items: start;
}
.pp__block { margin-top: var(--s-10); }

/* Stacked block: centred copy, full-width figure underneath (BioRed packaging). */
.pp__stack { text-align: center; }
.pp__stack .pp__aside { max-width: 760px; margin-inline: auto; }
.pp__stack .pp-chips { justify-content: center; }
.pp__stack .pp__main.pp-figure { margin-top: var(--s-7); }
.pp__stack .pp-figure img { max-width: 1100px; margin-inline: auto; }

/* Product photo: same box for every product, whatever the packshot's shape, and
   never upscaled past the source file. Sticks while the longer copy scrolls past. */
.pp__media {
  position: sticky;
  top: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  padding: var(--s-7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}
.pp__media img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Copy column and side column share one type ladder. */
.pp__copy h3 { font-size: clamp(24px, 2.4vw, 30px); }
.pp__aside h3 { font-size: clamp(22px, 2.2vw, 26px); }
.pp__copy > p, .pp__aside > p { margin-top: var(--s-4); color: var(--muted); }
.pp__copy > p.pp__lede { margin-top: var(--s-5); font-size: 19px; line-height: 1.6; color: var(--ink); }
.pp__copy > p.pp__for { margin-top: var(--s-3); font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 700; color: var(--royal-600); }
.pp__aside .eyebrow { margin-bottom: var(--s-4); }

/* Chips: one style for body areas, conditions and "protected against". */
.pp-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.pp-chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-900);
}
.pp-chips li svg { color: var(--royal-600); }
.pp-chips--sm { margin-top: var(--s-4); }
.pp-chips--sm li { padding: 6px var(--s-3); font-size: 13px; }

/* Headline figures. */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
}
.pp-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-stats:has(> .pp-stat:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 280px; }
.pp-stat {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.pp-stat dt { font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pp-stat__value {
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--navy-900);
}
.pp-stat__value small { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--royal-600); white-space: nowrap; }
.pp-stat__note { margin-top: var(--s-2); font-size: 14px; line-height: 1.5; color: var(--muted); }
.pp__copy > p.pp-stats__heading {
  margin-top: var(--s-6);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--royal-600);
}
.pp-stats__heading + .pp-stats { margin-top: var(--s-3); }

/* Cards (bioactives, formula). Heading left, figure right, on one line. */
.pp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.pp-card { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r); }
.pp-card--wide { grid-column: 1 / -1; }
.pp-card__kicker { display: block; margin-bottom: var(--s-2); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--royal-600); }
.pp-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.pp-card h4 { font-size: 18px; line-height: 1.3; }
.pp-card__value { flex: none; font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 800; color: var(--royal-600); white-space: nowrap; }
.pp-card p { margin-top: var(--s-3); font-size: 15px; line-height: 1.6; color: var(--muted); }
.pp-card p.pp-card__spec { color: var(--ink); }

/* What is inside (BioRed): centred heading, two cards either side of the softgel diagram. */
.pp-inside__head { text-align: center; }
.pp-inside__head .eyebrow { margin-bottom: var(--s-4); }
.pp-inside__head h3 { font-size: clamp(22px, 2.2vw, 26px); }
.pp-inside__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: stretch;
  margin-top: var(--s-7);
}
.pp-inside__cards { display: grid; grid-auto-rows: max-content; align-content: center; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.pp-inside__cards .pp-card { display: flex; flex-direction: column; min-height: 188px; padding: var(--s-6); background: #fff; box-shadow: 0 8px 24px rgba(11, 44, 92, .06); }
.pp-inside__cards .pp-card__top { gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.pp-inside__cards .pp-card h4 { min-width: 0; font-size: 19px; }
.pp-inside__cards .pp-card__value { font-size: 20px; }
.pp-inside__cards .pp-card p { margin-top: var(--s-4); }
.pp-inside__figure { margin: 0; align-self: center; }
.pp-inside__figure img { width: 100%; height: auto; max-width: 520px; margin-inline: auto; }

/* Instylan ergonomic packaging (Jennie, round 101): the same two-up-either-side layout
   as BioRed, but the numbered callouts from the client's own slide. The Instylan section
   is white, so the cards take a hairline instead of the shadow they use on the tint. */
.pp-ergo .pp-inside__cards .pp-card { min-height: 0; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
/* Round 103 (Jennie): the numbers are gone — each callout now carries a green arrow
   pointing at the product in the middle, following her reference slide. So the arrow
   sits on the INNER edge of every card: right-hand side of the left column,
   left-hand side of the right column. */
.pp-ergo .pp-card__top { align-items: center; justify-content: flex-start; gap: var(--s-4); }
.pp-ergo__arrow { flex: none; width: 31px; height: 31px; color: #a2d76a; }
.pp-ergo__arrow svg { display: block; width: 100%; height: 100%; }
/* row-reverse puts the arrow (first in the DOM) against the card's right edge. */
.pp-ergo .pp-inside__cards--left .pp-card__top { flex-direction: row-reverse; }
.pp-ergo .pp-inside__cards--right .pp-ergo__arrow { rotate: 180deg; }
/* Round 107 (Jennie): numbers are back, alongside the arrows. The circle and the
   heading live in one wrapper so the number always sits immediately before its own
   text — outer edge on the left column, inside the arrow on the right. */
.pp-ergo__label { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.pp-ergo .pp-card__num { width: 28px; height: 28px; font-size: 14px; }
/* Round 104 (Jennie): the slide's closing line, added under the right-hand callouts.
   It is a plain note, not a card, so it carries none of the .pp-card chrome. */
.pp-ergo__note { font-size: 15px; line-height: 1.6; color: var(--muted); }
.pp-ergo__note a { color: var(--royal-600); font-weight: 600; }
.pp-card__list { margin: var(--s-4) 0 0; padding-left: var(--s-5); font-size: 15px; line-height: 1.6; color: var(--muted); }
.pp-card__list li { padding: 2px 0; }
.pp-card__list--two { columns: 2; column-gap: var(--s-6); }
@media (max-width: 720px) { .pp-card__list--two { columns: 1; } }
/* A pull-quote sitting between a block title and its content. */
.pp__block-lede { max-width: 760px; margin: calc(-1 * var(--s-2)) 0 var(--s-5); font-size: 17px; line-height: 1.7; color: var(--muted); }
/* The pack photo is 3.1:1, so it needs a wider middle column than BioRed's softgel. */
.pp-ergo .pp-inside__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr); }
/* Round 102 (Jennie): the callouts carry the client's slide wording verbatim, so most
   are a single line of text with no description under them. The heading is the whole
   callout, hence the softer weight, the tighter card and the flush number circle. */
/* Round 108 (Jennie): callout text a touch smaller — 17px next to a 30px circle and a
   34px arrow read heavier than the slide. The arrow and circle drop with it so the
   three stay in proportion. */
.pp-ergo .pp-inside__cards .pp-card h4 { font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.pp-ergo .pp-inside__cards .pp-card { padding: var(--s-5); }
/* Three of the four callouts are heading-only, so the divider would be a rule under
   nothing. It stays on card 4, which still has its list below it. */
.pp-ergo .pp-inside__cards .pp-card__top:last-child { padding-bottom: 0; border-bottom: 0; }
.pp-ergo .pp-inside__figure img { max-width: 100%; mix-blend-mode: multiply; }

/* Product film: one framed player, the same hairline frame as the diagram figures. */
/* Round 102 (Jennie): the player was full block width and dominated the page. Capped
   and centred instead — the frame, not the video, carries the max-width so the
   16/9 box stays intact. */
.pp-video__frame { margin: 0 auto; max-width: 760px; }
.pp-video .pp__block-title { text-align: center; }
.pp-video__frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #000;
}

.pp-dose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.pp-dose li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--navy-900); }
.pp-dose strong { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; color: var(--royal-600); white-space: nowrap; }

/* Clinical-study findings: the dashed bullet list under a study heading. */
.pp-findings { max-width: 860px; margin: calc(-1 * var(--s-2)) 0 0; padding-left: var(--s-5); }
.pp-findings li { padding: var(--s-2) 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
.pp-findings strong { font-weight: 700; color: var(--ink); }

/* Round 106 (Jennie): the two clinical-study blocks run as two columns — the heading,
   findings, table and reference on one side, the chart on the other — instead of one
   centred stack. The second block mirrors the first so the two charts alternate sides. */
.pp-study--split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: var(--s-6) var(--s-7);
  text-align: left;
}
/* Round 111 (Jennie): the chart card no longer stretches to the text column's height.
   Stretching plus centring left a deep band of empty white above and below the curve.
   The card now hugs the artwork, and the KL-grade table moved under the chart so the
   two columns end at roughly the same point without any filler space. */
.pp-study--split .pp-study__media {
  display: block;
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.pp-study__col {
  display: grid;
  align-content: start;
  gap: var(--s-5);
  min-width: 0;
}
.pp-study__col { grid-column: 2; }
.pp-study--split .pp-study__text { align-self: start; }

/* Round 112 (Jennie): the WOMAC block's two columns now finish level. The text column
   ran ~50px past the table because both columns were sized by their own content. The
   chart+table column spreads to the block height, and the reference list is pushed to
   the foot of the text column, so the bottom edges line up. Only the WOMAC block —
   the mirrored SF-36 block has no second card to spread, and stretching its figure is
   what caused round 111's empty white. */
.pp-study--split:not(.pp-study--flip) { align-items: stretch; }
.pp-study--split:not(.pp-study--flip) .pp-study__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.pp-study--split:not(.pp-study--flip) .pp-refs--inline { margin-top: auto; }
.pp-study--split:not(.pp-study--flip) .pp-study__col { align-content: space-between; }
/* The two study blocks are one story, so they sit closer than the page's block rhythm. */
.pp-study--split + .pp-study--split { margin-top: var(--s-8); }
.pp-study--split .pp__block-title,
.pp-study--split .pp__block-lede { max-width: none; margin-inline: 0; }
/* Round 113 (Jennie): the lede sat 40px clear of the first dash — the lede's own
   24px bottom margin stacking on the list's top margin and the li padding. Tightened
   so the title-to-first-point gap matches the gap between the points themselves. */
.pp-study--split .pp__block-lede { font-weight: 700; color: var(--navy-900); margin-bottom: var(--s-2); }
.pp-study--split .pp-findings--dash { margin-top: 0; }
.pp-study--split .pp-study__media { margin-top: 0; }
.pp-study--split .pp-figure figcaption { max-width: none; margin-inline: 0; text-align: center; }
/* Mirrored block: the figure is first in the source (so it reads chart-then-text on a
   phone) and is placed back into column one on desktop. */
.pp-study--flip .pp-study__media { grid-column: 1; }
.pp-study--flip .pp-study__text { grid-column: 2; }

/* Findings as a dashed list, matching the deck. */
.pp-findings--dash { max-width: none; margin: var(--s-2) 0 0; padding-left: 0; list-style: none; }
.pp-findings--dash li { display: flex; gap: var(--s-3); padding: var(--s-2) 0; }
.pp-findings--dash li::before {
  content: "";
  flex: 0 0 14px;
  height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--teal-500, #3BBEB5);
}

.pp-study--split .pp-table { margin-top: 0; }
.pp-study--split .pp-refs--inline { margin-top: var(--s-6); border-top: 0; padding-top: 0; }
/* Round 111: the near-square radar was setting the second block's height on its own.
   Capped, so the chart and the text beside it read as one compact pair. */
.pp-study--flip .pp-study__media img {
  width: auto;
  max-width: 100%;
  max-height: 420px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .pp-study--split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .pp-study__col { grid-column: 1; }
  .pp-study--flip .pp-study__media,
  .pp-study--flip .pp-study__text { grid-column: 1; }
  .pp-study--split + .pp-study--split { margin-top: var(--s-7); }
}

/* Inline line chart, drawn rather than cropped so it stays sharp at any width. */
.pp-line { display: block; width: 100%; height: auto; }

/* Small data table from the deck. Scrolls sideways rather than squashing on phones. */
.pp-table { margin-top: var(--s-6); overflow-x: auto; }
.pp-table table { width: 100%; min-width: 440px; border-collapse: collapse; }
.pp-table th, .pp-table td {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  font-size: 15px;
  /* Round 105 (Jennie): values are centred in their columns. The first column keeps its
     left edge because it holds the row labels, not data. */
  text-align: center;
}
.pp-table thead th:first-child,
.pp-table tbody th { text-align: left; }
.pp-table thead th { background: var(--tint, #f5f8fd); font-weight: 700; color: var(--navy-900); }
.pp-table tbody th { font-weight: 600; color: var(--navy-900); }
.pp-table tbody td { color: var(--muted); }
/* Round 104 (Jennie): the KL-grade table sat on the page background and read as loose
   text. A tinted panel around it marks it out as its own section. */
.pp-table--panel {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--royal-100);
}
.pp-table--panel table { background: var(--surface); }
.pp-table--panel th, .pp-table--panel td { border-color: #d5e0f8; }
.pp-table--panel thead th { background: var(--royal-050); }

/* Reference list, verbatim from the deck. */
.pp-refs { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.pp-refs h4 { margin: 0 0 var(--s-3); font-size: 14px; font-weight: 700; color: var(--navy-900); }
.pp-refs ol { margin: 0; padding-left: var(--s-5); }
.pp-refs li { font-size: 13px; line-height: 1.7; color: var(--muted); }

/* Figures from the deck. */
.pp-figure { margin-top: var(--s-6); }
.pp-figure img { width: 100%; height: auto; }
.pp-figure figcaption { margin-top: var(--s-4); font-size: 14px; line-height: 1.6; color: var(--muted); }
.pp__main.pp-figure { margin-top: 0; }
.pp-figure--framed { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pp-figure--framed img { border-radius: var(--r-sm); }
.pp-figure--round { max-width: 360px; }
.pp-figure--tall img, .pp-figure--diagram img { width: auto; max-width: 100%; max-height: 380px; margin-inline: auto; }

/* Emphasised phrases inside product body copy stay legible on muted paragraphs. */
.pp p strong { font-weight: 700; color: var(--ink); }

/* Indications: one card per figure, text left and the figure right. */
.pp-inds { display: grid; gap: var(--s-4); }
.pp-ind {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pp-ind h4 { font-size: 19px; line-height: 1.3; }
.pp-ind__text > p { margin-top: var(--s-2); font-size: 15px; color: var(--muted); }
.pp-ind__figure img { width: 100%; height: auto; max-height: 340px; object-fit: contain; }
/* Desktop: heading on top, the two indication cards side by side, text above figure. */
.pp-indsec { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.pp-indsec .pp-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.pp-indsec .pp-ind { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; }
.pp-indsec .pp-ind__figure { margin: 0; align-self: center; }
.pp-indsec .pp-ind__figure img { max-height: 320px; }

/* ALA vs Ginkgo. */
.pp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.pp-compare__card { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pp-compare__card h4 { font-size: 19px; line-height: 1.3; }
.pp-compare__card h4 span { color: var(--royal-600); }
.pp-compare__card dl { margin: var(--s-4) 0 0; }
.pp-compare__card dl > div { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.pp-compare__card dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--royal-600); }
.pp-compare__card dd { margin-top: var(--s-1); font-size: 15px; line-height: 1.6; color: var(--ink); }
.pp-compare__card dd.pp-compare__figure { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 800; color: var(--navy-900); }

@media (max-width: 1024px) {
  .pp-range__grid { grid-template-columns: repeat(2, 1fr); }
  .pp__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .pp__media { position: static; aspect-ratio: 4 / 3; width: 100%; max-width: 560px; }
  .pp__block { margin-top: var(--s-9); }
  .pp-figure--round { margin-inline: auto; }
  .pp-inside__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-inside__figure { grid-column: 1 / -1; order: -1; }
  .pp-indsec .pp-inds { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .pp__head { gap: var(--s-4); margin-bottom: var(--s-7); }
  .pp__index { width: 40px; height: 40px; font-size: 14px; }
  .pp__grid { gap: var(--s-6); }
  .pp__block { margin-top: var(--s-8); }
  .pp__media { padding: var(--s-6); }
  .pp__copy > p.pp__lede { font-size: 17px; }
  .pp-cards, .pp-compare, .pp-dose, .pp-inside__layout { grid-template-columns: minmax(0, 1fr); }
  .pp-card__top { flex-wrap: wrap; row-gap: var(--s-1); }
  .pp-inside__cards .pp-card { min-height: 0; padding: var(--s-5); }
  .pp-stats--3 { grid-template-columns: 1fr 1fr; }
  .pp-stat__value { font-size: 26px; }
  .pp-ind { grid-template-columns: 1fr; padding: var(--s-5); gap: var(--s-5); }
  .pp-compare__card { padding: var(--s-5); }
  .pp-figure--framed { padding: var(--s-4); }
}

/* ALA vs Ginkgo: the two cards share one set of row lines (subgrid), so Type, Half life
   and Key actions sit level across both even when one name wraps to two lines. */
.pp-compare { grid-template-rows: repeat(4, auto); row-gap: 0; }
.pp-compare__card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.pp-compare__card dl { display: contents; }
.pp-compare__card h4 { padding-bottom: var(--s-4); }
.pp-compare__card dl > div:last-child { padding-bottom: 0; }

@media (max-width: 720px) {
  .pp-compare { grid-template-rows: none; row-gap: var(--s-4); }
  .pp-compare__card { grid-row: auto; grid-template-rows: none; }
  .pp-range__grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  /* Round 98 (Jennie): the range grid's own bottom padding stacked on top of the CTA
     section's top padding, so "Our range" and "Get in touch" sat 128px apart on phones.
     One section rhythm instead, matching the .pp + #partner rule used on product pages. */
  .pp-range + #partner { padding-top: 0; }
  .pp-range__head { grid-template-columns: 1fr; gap: var(--s-4); margin-bottom: var(--s-6); }
  .pp-range__head p { justify-self: start; }
  .pp-tile { padding: var(--s-4) var(--s-3); }
  .pp-tile__cat { font-size: 9px; padding: 2px 7px; letter-spacing: .04em; white-space: nowrap; }
  .pp-tile__name { font-size: 16px; }
  .pp-tile__media { height: 100px; margin: var(--s-3) 0; }
  .pp-tile__btn { padding: var(--s-2) var(--s-3); font-size: 13px; }
  .pp-tile__type { display: none; }
  .pp-stats, .pp-stats--3 { grid-template-columns: 1fr; }
  .pp-stats:has(> .pp-stat:only-child) { max-width: none; }

  /* Round 86 (Jennie, "rearrange these three cards, the right side has too much empty
     space"): stacked one per row, the three Diart figures put the label on one line and
     the number on another, so the whole right half of each card was blank and the group
     ran very tall. They now read as fact bars - label left, figure right behind a
     hairline - the same shape as the BioRed freshness cards, so each card is filled
     across its full width and the three sit as a compact, even stack. */
  .pp-stats--3 { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-stats--3 .pp-stat {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    column-gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
  }
  .pp-stats--3 .pp-stat dt { grid-column: 1; grid-row: 1; }
  .pp-stats--3 .pp-stat__value {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    padding: 0 0 0 var(--s-4);
    border-left: 1px solid var(--line);
    text-align: right;
    font-size: 26px;
  }
}

/* Quality and freshness (BioRed): big heading, figures top-aligned in lifted cards, framed deck image.
   Round 82 (Jennie, "align it, make it balance"): the two stat cards moved out of the copy column
   into a full-width row under both columns, so the copy and the framed image are near enough the
   same height and their tops and bottoms line up instead of the copy running 180px past the image. */
.pp-fresh__top { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); align-items: center; }
/* Round 85 (Jennie, "why does this section look so empty"): the two cards stacked label, value
   and note down the left edge, leaving half of each card blank. They now read as fact bars -
   label and note on the left, the figure set large on the right behind a hairline rule - so the
   text fills the full width of the card and the numbers carry the weight. */
.pp-fresh__stats { margin-top: var(--s-7); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-fresh .pp-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-6);
  padding: var(--s-6);
  border-color: rgba(11,44,92,.06);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 30px -12px rgba(11,44,92,.18);
}
.pp-fresh .pp-stat dt { grid-column: 1; grid-row: 1; }
.pp-fresh .pp-stat__note { grid-column: 1; grid-row: 2; margin-top: var(--s-2); }
.pp-fresh .pp-stat__value {
  white-space: nowrap;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: center;
  gap: 6px;
  margin-top: 0;
  padding-top: 0;
  padding-left: var(--s-6);
  border-left: 1px solid var(--line);
  font-size: 40px;
}
.pp-fresh .pp-stat__value small { font-size: 16px; }
.pp-fresh .pp-figure--framed { padding: var(--s-4) var(--s-4) var(--s-5); border-color: rgba(11,44,92,.06); border-radius: 20px; box-shadow: 0 18px 44px -18px rgba(11,44,92,.22); }
.pp-fresh .pp-figure--framed img { border: 1px solid var(--line); border-radius: var(--r); }
.pp-fresh .pp-figure figcaption { padding-inline: var(--s-2); }
@media (max-width: 1040px) {
  .pp-fresh__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pp-fresh .pp-stat__value { font-size: 32px; }
  .pp-fresh__stats { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-6); }
}
@media (max-width: 460px) {
  .pp-fresh .pp-stat { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-3); padding: var(--s-5); }
  .pp-fresh .pp-stat dt { grid-row: 1; }
  .pp-fresh .pp-stat__value { grid-column: 1; grid-row: 2; padding-left: 0; border-left: 0; }
  .pp-fresh .pp-stat__note { grid-column: 1; grid-row: 3; margin-top: 0; }
}

/* Ice and Heat Wrap: centred copy over the wide feature image (2026-09-22). */
.pp-wrap .pp__aside { max-width: 820px; }
.pp-wrap .pp__main.pp-figure { margin-top: var(--s-7); }
.pp-wrap .pp-figure img { max-width: 820px; }

/* Round 100 (Jennie): the wrap now lives on the Diart One page as a second product,
   so it gets its own h2 to break it away from the Diart One story.
   Round 114 (Jennie): that break is now a full-bleed WHITE band instead of a hairline
   on the .pp#diart-one tint. The block sits inside .container, so the band is painted
   by a huge spread box-shadow rather than a 100vw pseudo-element - a shadow never adds
   to scroll width, so this cannot produce a horizontal scrollbar; clip-path trims it to
   the horizontal axis only. The hairline is gone on purpose - the colour change
   separates the two products on its own. */
.pp__block#diart-wrap {
  padding-block: var(--s-9);
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface);
  clip-path: inset(0 -100vmax);
}
.pp__block-title { margin-bottom: var(--s-5); }
@media (max-width: 720px) {
  .pp__block#diart-wrap { padding-block: var(--s-7); }
}

/* INSTYLAN molecular-weight chart: plain HTML bars, one highlighted, one axis. */
.pp-chart__head { max-width: 760px; margin-inline: auto; text-align: center; }
.pp-chart__head h3 { font-size: clamp(22px, 2.2vw, 26px); }
.pp-chart__head p { margin-top: var(--s-3); color: var(--muted); font-size: 15px; }
.pp-chart__figure {
  max-width: 900px;
  margin: var(--s-7) auto 0;
  padding: var(--s-7) var(--s-7) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  background: #fff;
  box-shadow: 0 10px 30px rgba(11, 44, 92, .06);
}
/* Unit label lives inside the card, top-left, so it reads as the axis unit (2026-09-23). */
.pp-chart__unit {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  /* Round 82 (Jennie): centred over the plot, not left-aligned in the card. The 48px matches
     .pp-chart__plot's own left margin (the axis-label gutter), so it centres on the bars. */
  margin-left: 48px;
  text-align: center;
}
.pp-chart__plot { position: relative; height: 340px; margin-left: 48px; margin-top: var(--s-7); }
.pp-chart__axis { position: absolute; inset: 0 0 0 -48px; pointer-events: none; }
/* Each tick = its value on the left + a hairline across the plot at that height. */
.pp-chart__axis span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--v) / var(--max, 2000) * 100%);
  height: 0;
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
}
.pp-chart__axis span { translate: 0 -6px; }
.pp-chart__axis span::after {
  content: "";
  position: absolute;
  left: 48px;
  right: 0;
  top: 6px;
  border-top: 1px solid var(--line);
}
.pp-chart__axis span[style*="--v: 0"]::after { border-top-color: #b9c4d8; }
.pp-chart__bars,
.pp-chart__labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.pp-chart__bars { position: relative; height: 100%; align-items: end; padding-inline: var(--s-4); }
.pp-chart__col { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.pp-chart__bar {
  width: min(100%, 96px);
  height: calc(var(--v) / var(--max, 2000) * 100%);
  border-radius: 4px 4px 0 0;
  background: #b9c4d8;
}
.pp-chart__col.is-lead .pp-chart__bar { background: var(--royal-600); }
/* Diart One molecular-weight chart only: lead bar in teal (Jennie, round 99). */
#diart-one-weight .pp-chart__col.is-lead .pp-chart__bar { background: #3BBEB5; }
/* Instylan molecular-weight chart only: lead bar in the Instylan green (Jennie, round 101). */
#instylan-weight .pp-chart__col.is-lead .pp-chart__bar { background: #a2d76a; }
/* Label floats above its bar so the bar itself is measured against the full plot height. */
.pp-chart__value {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--v) / var(--max, 2000) * 100% + var(--s-2));
  text-align: center;
  line-height: 1.2;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.pp-chart__col.is-lead .pp-chart__value { font-size: 22px; color: var(--navy-900); }
/* Optional icon before a value (Diart One gel ball). */
.pp-chart__value:has(.pp-chart__icon) { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
.pp-chart__icon { width: 30px; height: 30px; flex: none; }
@media (max-width: 720px) { .pp-chart__icon { width: 20px; height: 20px; } .pp-chart__value:has(.pp-chart__icon) { gap: var(--s-1); } }
/* Stacked variant: icon above the value (INSTYLAN bird). Plot gets extra headroom for it. */
.pp-chart__value--stack:has(.pp-chart__icon) { flex-direction: column; gap: var(--s-1); }
.pp-chart__icon--bird { width: 72px; height: auto; }
.pp-chart__plot:has(.pp-chart__value--stack) { margin-top: 96px; }
@media (max-width: 720px) { .pp-chart__icon--bird { width: 44px; height: auto; } .pp-chart__plot:has(.pp-chart__value--stack) { margin-top: 80px; } }
.pp-chart__labels { margin: var(--s-4) 0 0 48px; padding-inline: var(--s-4); text-align: center; }
.pp-chart__labels span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-chart__labels span.is-lead { color: var(--navy-900); }
.pp-chart__labels span:not(.is-lead) small { color: var(--muted); font-weight: 600; }
.pp-chart__labels small {
  display: block;
  margin-top: var(--s-1);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--royal-600);
}
@media (max-width: 720px) {
  .pp-chart__figure { padding: var(--s-5) var(--s-4) var(--s-5); }
  .pp-chart__plot { height: 260px; margin-left: 36px; }
  /* Round 93d (Jennie): on a phone the 36px axis gutter pushed this title visibly
     off-centre and made it wrap. Centre it on the card instead of on the bars. */
  .pp-chart__unit { margin-left: 0; }
  .pp-chart__axis { left: -36px; }
  .pp-chart__axis span::after { left: 36px; }
  .pp-chart__labels { margin-left: 36px; }
  .pp-chart__bars, .pp-chart__labels { gap: var(--s-3); padding-inline: 0; }
  .pp-chart__value { font-size: 14px; }
  .pp-chart__col.is-lead .pp-chart__value { font-size: 16px; }
  .pp-chart__labels span, .pp-chart__labels small { font-size: 11px; letter-spacing: 0; }
}

/* Round 116 (Jennie): on a phone the graphs were too small to read. Two causes — the
   chart cards gave up ~80px of a 390px screen to the page gutter plus their own side
   padding, and the WOMAC line chart is an SVG, so its labels shrink with the card.
   The cards now sit nearer the screen edges with tighter side padding (~14% more chart
   width), the bar plot is taller, and the SVG's type is drawn a size up. Phone only —
   nothing above 720px moves. */
@media (max-width: 720px) {
  .pp-chart__figure,
  .pp-study--split .pp-study__media {
    margin-inline: calc(-1 * var(--gutter) + 6px);
    padding-inline: var(--s-3);
  }
  .pp-chart__plot { height: 300px; }

  .pp-line__ticks { font-size: 24px; }
  .pp-line__values { font-size: 24px; }
  .pp-line__labels { font-size: 21px; letter-spacing: 0.02em; }
  .pp-line__callout { font-size: 34px; }
  .pp-line__curve { stroke-width: 4; }
}

/* Product photo with a round claim badge hanging off its top-right corner (Diart One). */
.pp__media--badged .pp__badge {
  position: absolute;
  top: -20px;
  right: -14px;
  width: clamp(76px, 7vw, 104px);
  max-width: none;
  max-height: none;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(11, 44, 92, .18));
}
@media (max-width: 1040px) {
  .pp__media--badged { position: relative; }
}
@media (max-width: 720px) {
  .pp__media--badged .pp__badge { top: -12px; right: -6px; width: 68px; }
}

/* BioRed, Diart One and Diart inner pages on a very light blue (Jennie, 2026-09-22;
   carried down through the closing CTA to the footer, and dropped from Ice and Heat
   Wrap, 2026-09-24). White cards/frames stay white; the white-backed deck images are
   multiplied so they sit on the tint without a box.
   Scoped to .pp sections: Home's product cards share these ids and must stay white. */
.pp#biored, .pp#diart-one, .pp#diart,
.pp#biored + #partner, .pp#diart-one + #partner, .pp#diart + #partner { background: var(--royal-050); }
.pp#biored .pp-figure--framed, .pp#biored .pp-stat,
.pp#diart-one .pp-figure--framed, .pp#diart-one .pp-stat,
.pp#diart .pp-stat { background: #fff; }
.pp#biored .pp-inside__figure img, .pp#biored #biored-packaging img { mix-blend-mode: multiply; }

/* Narrow phones (<=380px): the About h1 runs to four lines, so the shared inner-page
   hero floor steps up to keep all three heroes equal. */
@media (max-width: 380px) {
  .hero--page { min-height: 520px; }
}

/* DIART: portrait two-carton image, box runs the full height of the copy column so the
   image and the text start and end level (Jennie, 2026-09-22). */
.pp__grid:has(> .pp__media--fill) { align-items: stretch; }
.pp__media--fill { position: relative; top: auto; aspect-ratio: auto; padding: var(--s-6); }
.pp__media--fill img:not(.pp__badge) { position: absolute; inset: var(--s-6); width: calc(100% - 2 * var(--s-6)); height: calc(100% - 2 * var(--s-6)); max-width: none; max-height: none; object-fit: contain; }
@media (max-width: 1024px) {
  .pp__media--fill { aspect-ratio: 986 / 1146; max-width: 420px; }
}

/* Nervzflo intro (Jennie, round 101): the packshot fills more of its frame. The frame,
   its border and its position are untouched — only the image's inset shrinks. */
#nervzflo .pp__media--fill { padding: var(--s-2); }
#nervzflo .pp__media--fill img:not(.pp__badge) {
  inset: var(--s-2);
  width: calc(100% - 2 * var(--s-2));
  height: calc(100% - 2 * var(--s-2));
}

/* Diart One intro (Jennie, 2026-09-22): packshot box levelled with the copy (same --fill
   behaviour as DIART), and the badge locked to a true circle so it can never be distorted. */
.pp__media--badged .pp__badge { aspect-ratio: 1 / 1; object-fit: contain; border-radius: 50%; }
@media (max-width: 1024px) {
  .pp__media--fill-wide { aspect-ratio: 16 / 9; max-width: none; }
}

/* Round 62 (Jennie): one spacing rhythm on the Products page. Sections all use --sec-y
   (96/80/64), blocks inside a section are --sec-y apart, and every block heading sits
   48px above its content (32px on phones, matching the side-by-side blocks there). */
@media (max-width: 720px) {
  .pp__stack .pp__main.pp-figure,
  .pp-wrap .pp__main.pp-figure,
  .pp-chart__figure { margin-top: var(--s-6); }
  .pp-inside__layout { margin-top: var(--s-6); }
}

/* Round 63 (Jennie): Diart One soft-crosslinking. Image column narrower and the framed
   figure stretched to run level with the copy (eyebrow top to stat card bottom), with the
   diagram vertically centred inside it and capped smaller. */
.pp-xlink { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: stretch; }
.pp-xlink .pp-figure--diagram { display: flex; flex-direction: column; justify-content: center; margin: 0; }
.pp-xlink .pp-figure--diagram img { max-height: 340px; }
/* Round 82 (Jennie, "align and balance"): the lone ratio stat was a narrow card floating under
   the copy. It now fills the copy column and reads as a horizontal fact bar.
   Round 85 (Jennie, "this section layout also weird"): pushing that bar to the bottom of the
   column left a ~150px hole between the paragraph and the card. The copy column is now centred
   as one group against the figure, and the bar uses the same label/note-left, figure-right
   layout as the BioRed freshness cards so the note no longer dangles on its own row. */
.pp-xlink .pp__aside { display: flex; flex-direction: column; justify-content: center; }
.pp-xlink .pp__aside .pp-stats {
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  margin-top: var(--s-7);
}
.pp-xlink .pp-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-6);
  padding: var(--s-6);
  border-color: rgba(11,44,92,.06);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 30px -12px rgba(11,44,92,.18);
}
.pp-xlink .pp-stat dt { grid-column: 1; grid-row: 1; }
.pp-xlink .pp-stat__note { grid-column: 1; grid-row: 2; margin-top: var(--s-2); }
.pp-xlink .pp-stat__value {
  white-space: nowrap;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: center;
  gap: 6px;
  margin-top: 0;
  padding-top: 0;
  padding-left: var(--s-6);
  border-left: 1px solid var(--line);
  font-size: 40px;
}
.pp-xlink .pp-stat__value small { font-size: 16px; }
@media (max-width: 1024px) {
  .pp-xlink { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .pp-xlink .pp-stat { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-3); padding: var(--s-5); }
  .pp-xlink .pp-stat__value { grid-column: 1; grid-row: 2; padding-left: 0; border-left: 0; font-size: 32px; }
  .pp-xlink .pp-stat__note { grid-column: 1; grid-row: 3; margin-top: 0; }
}

/* Round 82 (Jennie): Nervzflo formula. Heading sits on top of the block, not beside it, and the
   three ingredients read as a numbered 1-2-3 row, each with the deck's own ingredient photo. */
.pp-formula__head { max-width: 820px; }
.pp-formula__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-7); }
.pp-formula__cards .pp-card { display: flex; flex-direction: column; padding: var(--s-6); }
.pp-formula__cards .pp-card__top { flex-wrap: wrap; row-gap: var(--s-1); }
.pp-formula__cards .pp-dose { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.pp-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--royal-600);
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 800;
}
.pp-card__thumb { flex: none; width: 84px; height: 84px; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 1024px) {
  .pp-formula__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pp-formula__cards { grid-template-columns: minmax(0, 1fr); }
  .pp-card__thumb { width: 60px; height: 60px; }
}

/* ==========================================================================
   Diart inner page, round 117 (Jennie: "follow the reference exactly")
   Rebuilt from her brochure reference. Three pieces:
   - .hero--diart      : the knee/ankle banner needs a centred crop, not the
                         site default 70% 40%, or the highlighted joint is cut.
   - .pp-oa            : ring + copy on the left, the source study on the right,
                         the three explanatory cards as one row underneath.
   - .pp-kl            : three KL-grade rings across, the DIART group under the
                         first and the comparison group under the other two.
                         The groups grid is 1fr / 2fr with the same gap as the
                         ring grid, which is what keeps the two rows aligned.
   ========================================================================== */

.hero--diart .hero__bg img { object-position: 55% 50%; }

/* Lasting pain relief and OA prevention ----------------------------------- */
.pp-oa__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.pp-oa .pp__block-title { margin-bottom: var(--s-4); }
.pp-oa__ring { margin: 0 0 var(--s-6); }
.pp-oa__ring img { display: block; width: 100%; max-width: 230px; height: auto; }
.pp-oa__text > p { margin-top: var(--s-4); line-height: 1.7; color: var(--muted); }

.pp-oa__study {
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pp-oa__study-title {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--navy-900);
}
.pp-oa__study-authors { margin-top: var(--s-3); font-size: 14px; line-height: 1.6; color: var(--muted); }
.pp-oa__figure { margin: var(--s-5) 0 0; }
.pp-oa__figure img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  mix-blend-mode: multiply;
}
.pp-oa__quote {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}
.pp-oa__quote strong { font-weight: 700; color: var(--navy-900); }

.pp-oa__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-7); }
.pp-oa__cards .pp-card { padding: var(--s-6); background: #fff; border-radius: var(--r-lg); }

/* Development of degenerative changes ------------------------------------- */
.pp__block-title--center { margin-bottom: var(--s-7); text-align: center; }
.pp-kl__rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.pp-kl__when {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy-900);
}
.pp-kl__ring img {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: var(--s-4) auto 0;
}

.pp-kl__groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--s-6);
  margin-top: var(--s-7);
}
.pp-kl__group {
  padding: var(--s-5) var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid #e0555f;
  border-radius: var(--r-lg);
}
.pp-kl__group--lead { border-top-color: #3bbeb5; }
.pp-kl__group h4 { font-size: 19px; line-height: 1.3; }
.pp-kl__group h4 span { color: var(--royal-600); }
.pp-kl__group p { margin-top: var(--s-3); font-size: 15px; line-height: 1.6; color: var(--muted); }
.pp-kl__protocol { font-style: italic; }

@media (max-width: 1024px) {
  .pp-oa__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .pp-oa__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-oa__study { max-width: 720px; }
}

@media (max-width: 720px) {
  .pp-oa__cards { grid-template-columns: minmax(0, 1fr); }
  .pp-oa__cards .pp-card { padding: var(--s-5); }
  .pp-oa__ring img { max-width: 180px; }
  .pp-oa__study { padding: var(--s-5); }
  .pp-kl__rings { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .pp-kl__ring img { max-width: 210px; }
  .pp-kl__groups { grid-template-columns: minmax(0, 1fr); }
  .pp-kl__group { padding: var(--s-5); }
}

/* ---------------------------------------------------------------------------
   Round 118 (Jennie, 2026-09-30): superscript reference marks on a block title,
   and the closing quote + packshot panel that sits just above References.
   --------------------------------------------------------------------------- */
.pp__refmark {
  margin-left: 4px;
  font-size: .42em;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: super;
  color: var(--royal-600);
}

.pp-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-7);
  padding: var(--s-7);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pp-close__quote {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 21px;          /* round 120: Jennie asked for the quote and packshot a size down */
  line-height: 1.45;
  font-weight: 800;
  color: var(--navy-900);
}
.pp-close__media { margin: 0; }
.pp-close__media img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .pp-close {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
    padding: var(--s-6);
    text-align: center;
  }
  .pp-close__quote { font-size: 19px; }
  .pp-close__media img { max-width: 300px; }
}

/* ---------------------------------------------------------------------------
   Round 119, recoloured round 120 (Jennie): filled card variant. Used on the
   "Sodium succinate" card in the DIART mechanism row. Teal #3bbeb5 fill, with
   navy type rather than white - white on this teal is only 2.3:1, navy is 6:1.
   The selector is doubled because `.pp-oa__cards .pp-card` is two classes and
   would otherwise beat a single-class modifier. Keep both if this is edited.
   --------------------------------------------------------------------------- */
.pp-card--teal,
.pp-oa__cards .pp-card--teal {
  background: #3bbeb5;
  border-color: #3bbeb5;
  color: var(--navy-900);
}
.pp-card--teal h4,
.pp-card--teal p,
.pp-card--teal .pp-card__list,
.pp-card--teal .pp-card__list li,
.pp-card--teal .pp-card__value,
.pp-card--teal .pp-card__kicker,
.pp-card--teal strong { color: var(--navy-900); }
.pp-card--teal .pp-card__list li::marker { color: rgba(11, 44, 92, .55); }

/* ---------------------------------------------------------------------------
   Round 120 (Jennie, 2026-09-30): DIART Secretome section on product-diart.html,
   built to her brochure reference. Four parts, in her order:
     .sc-banner   - dark band, claim + runner
     .sc-ing      - the three bioactive ingredients, orb + copy
     .sc-ben      - the six cellular-level benefits, icon disc + copy
     .sc-close    - pack shot + "Stronger joints. Better life."
   Teal #3bbeb5 / deep teal #12707a are the two colours already present in the
   supplied artwork - no new hue is introduced by this block.
   --------------------------------------------------------------------------- */
.sc { --sc-teal: #3bbeb5; --sc-deep: #12707a; }

/* Banner ------------------------------------------------------------------- */
.sc-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-7);
  padding: var(--s-8) var(--s-8) 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--navy-900) 0%, #0e3f63 48%, var(--sc-deep) 100%);
  color: #fff;
}
.sc-banner__copy { padding-bottom: var(--s-8); }
.sc-banner__brand {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc-teal);
}
.sc-banner__title {
  margin-top: var(--s-4);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.sc-banner__sub {
  margin-top: var(--s-4);
  max-width: 34ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.sc-checks {
  margin: var(--s-6) 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  list-style: none;
  display: grid;
  gap: var(--s-3);
}
.sc-checks li {
  position: relative;
  padding-left: var(--s-6);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
}
.sc-checks li span { display: block; font-weight: 400; color: rgba(255, 255, 255, .75); }
.sc-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--sc-teal);
  border-bottom: 2.5px solid var(--sc-teal);
  transform: rotate(-45deg);
}
.sc-banner__media { margin: 0; align-self: end; }
.sc-banner__media img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-inline: auto;
}

/* The three bioactive ingredients ------------------------------------------ */
.sc-science__head { max-width: 62ch; }
.sc-ing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
}
.sc-ing__item {
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.sc-ing__orb { display: block; width: 92px; height: 92px; margin-bottom: var(--s-5); border-radius: 50%; }
.sc-ing__body h4 { font-size: 19px; line-height: 1.3; color: var(--navy-900); }
.sc-ing__role {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--sc-deep);
}
.sc-ing__body > p:last-child { margin-top: var(--s-3); font-size: 15px; line-height: 1.65; color: var(--muted); }

.sc-synergy {
  margin-top: var(--s-6);
  padding: var(--s-6);
  border: 2px solid var(--sc-teal);
  border-radius: var(--r-lg);
  background: #fff;
}
.sc-synergy h4 { font-size: 20px; line-height: 1.3; color: var(--sc-deep); }
.sc-synergy p { margin-top: var(--s-3); max-width: 90ch; font-size: 16px; line-height: 1.7; color: var(--muted); }

/* The six cellular-level benefits ------------------------------------------ */
.sc-ben {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-ben__item { display: flex; gap: var(--s-5); align-items: flex-start; }
.sc-ben__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--sc-deep);
}
.sc-ben__icon img { width: 30px; height: auto; }
.sc-ben__body h4 { font-size: 17px; line-height: 1.35; color: var(--sc-deep); }
.sc-ben__body p { margin-top: var(--s-2); font-size: 15px; line-height: 1.65; color: var(--muted); }

/* Pack shot + closing line -------------------------------------------------- */
.sc-close {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-7);
  padding: var(--s-7);
  background: var(--royal-050);
  border-radius: var(--r-lg);
}
.sc-close__media { margin: 0; }
.sc-close__media img { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; }
.sc-close__copy { text-align: center; }
.sc-close__orb { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto var(--s-5); }
.sc-close__copy h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  font-weight: 800;
  color: var(--navy-900);
}
.sc-close__copy p { margin-top: var(--s-3); font-size: 17px; color: var(--muted); }

@media (max-width: 1024px) {
  .sc-banner { grid-template-columns: minmax(0, 1fr); padding: var(--s-7) var(--s-7) 0; text-align: center; }
  .sc-banner__copy { padding-bottom: 0; }
  .sc-banner__sub { margin-inline: auto; }
  .sc-checks li { display: inline-block; text-align: left; }
  .sc-banner__media img { max-width: 380px; }
  .sc-ing { grid-template-columns: minmax(0, 1fr); }
  .sc-ben { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .sc-close { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .sc-banner { padding: var(--s-6) var(--s-5) 0; }
  .sc-ing__item { padding: var(--s-5); }
  .sc-ing__orb { width: 72px; height: 72px; margin-bottom: var(--s-4); }
  .sc-ben { grid-template-columns: minmax(0, 1fr); }
  .sc-synergy { padding: var(--s-5); }
  .sc-close { padding: var(--s-5); gap: var(--s-6); }
  .sc-close__orb { max-width: 150px; }
}

/* ---------------------------------------------------------------------------
   Round 121 (Jennie, 2026-09-30). Appended at the END for the same specificity
   reason as rounds 117-120 - do not move these earlier in the file.

   1. Teal card type is now WHITE, as asked. This reverses round 120's navy
      (chosen then for contrast); she has asked for white explicitly, so the
      body copy is pure #fff rather than a tint, which is the most legible
      white available on this teal.
   2. .sc-ing relayed out: orb and name sit on ONE header row, the description
      drops below a hairline rule. Round 120 rejected orb-left because the copy
      column went too narrow - that does not apply here, only the TITLE sits
      beside the orb and the copy still runs the full card width.
   3. .sc-ben items now each sit in a thin bordered box.
   --------------------------------------------------------------------------- */

/* 1. White type on the teal mechanism card --------------------------------- */
.pp-card--teal,
.pp-oa__cards .pp-card--teal { color: #fff; }
.pp-card--teal h4,
.pp-card--teal p,
.pp-card--teal .pp-card__list,
.pp-card--teal .pp-card__list li,
.pp-card--teal .pp-card__value,
.pp-card--teal .pp-card__kicker,
.pp-card--teal strong { color: #fff; }
.pp-card--teal .pp-card__list li::marker { color: rgba(255, 255, 255, .75); }

/* 2. Ingredient cards: header row + rule + copy ---------------------------- */
.sc-ing { gap: var(--s-5); }
.sc-ing__item { display: flex; flex-direction: column; padding: var(--s-6); }
.sc-ing__head { display: flex; align-items: center; gap: var(--s-4); }
.sc-ing__orb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  margin-bottom: 0;
}
.sc-ing__names { min-width: 0; }
.sc-ing__names h4 { font-size: 18px; line-height: 1.25; color: var(--navy-900); }
.sc-ing__names .sc-ing__role { margin-top: 3px; }
.sc-ing__text {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

/* 3. A thin border box around every cellular-level benefit ----------------- */
.sc-ben { gap: var(--s-5); }
.sc-ben__item {
  padding: var(--s-6);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  align-items: flex-start;
  gap: var(--s-4);
}
.sc-ben__icon { width: 54px; height: 54px; }
.sc-ben__icon img { width: 26px; }

/* The ingredient cards keep three across further down now that the copy is no
   longer squeezed beside the orb; round 120 dropped them to one at 1024. */
@media (max-width: 1024px) {
  .sc-ing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sc-ing { grid-template-columns: minmax(0, 1fr); }
  .sc-ben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sc-ing__item { padding: var(--s-5); }
  .sc-ing__orb { width: 56px; height: 56px; }
  .sc-ben { grid-template-columns: minmax(0, 1fr); }
  .sc-ben__item { padding: var(--s-5); }
}

/* ==========================================================================
   ROUND 122 - 2026-09-30 (Jennie)
   Appended at the END for the same specificity reason as rounds 117-121.

   1. "The science of knee regeneration" head block spans the FULL container
      width - the same left/right edges as the header/navigation bar and as
      the ingredient cards below it. Was capped at 62ch on the wrapper and
      760px on the lede, which made it the only narrow block on the page.
   ========================================================================== */

.sc-science__head { max-width: none; }
.sc-science__head .pp__block-lede { max-width: none; }

/* ---------------------------------------------------------------------------
   Round 123 (Jennie, 2026-09-30). Appended at the END for the same specificity
   reason as rounds 117-122 - do not move these earlier in the file.

   "Make it slightly smaller and reduce its height a little" - the .sc-close
   pack-shot band at the foot of product-diart.html. Scaled the artwork down and
   trimmed the vertical padding/gaps so the band sits lower without changing the
   layout or the copy.
   ========================================================================== */

.sc-close {
  gap: var(--s-6);
  padding: var(--s-6) var(--s-7);
}
.sc-close__media img { max-width: 430px; }
.sc-close__orb { max-width: 150px; margin-bottom: var(--s-4); }
.sc-close__copy h3 { font-size: clamp(22px, 2.1vw, 28px); }
.sc-close__copy p { font-size: 16px; }

@media (max-width: 720px) {
  .sc-close { padding: var(--s-5); gap: var(--s-5); }
  .sc-close__orb { max-width: 124px; }
}

/* ---------------------------------------------------------------------------
   Round 126 - Instylan "Comfort - Ergonomic packaging": the four built cards
   and the small pack shot are replaced by the client's own labelled diagram,
   with the instylan.com.my line centred underneath it.
   Appended at the end so it wins over the .pp-ergo rules above.
   --------------------------------------------------------------------------- */
.pp-ergo__diagram { margin: var(--s-7) 0 0; }
.pp-ergo__diagram img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin-inline: auto;
  mix-blend-mode: multiply;
}
.pp-ergo__visit {
  margin-top: var(--s-5);
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.pp-ergo__visit a { color: var(--royal-600); font-weight: 600; }

@media (max-width: 720px) {
  .pp-ergo__diagram { margin-top: var(--s-6); }
  .pp-ergo__visit { margin-top: var(--s-4); font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Round 127 - Diart One WOMAC figure: the "Figure 2..." source caption and the
   "Pain reduction was significantly reduced by 60.58%..." finding are two
   separate statements, so they are now two separate lines, not one run-on.
   --------------------------------------------------------------------------- */
.pp-figcap__line { display: block; }
.pp-figcap__line + .pp-figcap__line { margin-top: .6em; }

/* ---------------------------------------------------------------------------
   Round 129 - Instylan packaging block: the "Comfort - Ergonomic packaging"
   <h3> is removed (the client's diagram carries the title itself), so the
   figure is now the block's first child and no longer needs its heading gap.
   --------------------------------------------------------------------------- */
.pp-ergo__diagram:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Round 132 (Jennie) - the "www.instylan.com.my" link under the Instylan
   ergonomic diagram turns green instead of royal blue. Round 133: she asked
   for the light green, having been told the darkened #4A7C16 was for
   legibility. This is the Instylan brand green #a2d76a, which measures
   1.68:1 on white (WCAG AA needs 4.5:1) - her explicit choice, so do not
   silently darken it again. Weight bumped to 700 to claw back what little
   legibility is available at this lightness.
   --------------------------------------------------------------------------- */
.pp-ergo__visit a { color: #a2d76a; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Round 135 (Jennie) - Home About photo is now the client's product-range
   group shot. It is a wide cut-out on white, so it is contained on a white
   panel rather than cover-cropped, which would slice products off the ends.
   The BioRed second intro paragraph takes her requested ink #101c33.
   --------------------------------------------------------------------------- */
.split__media--range { background: #fff; display: flex; align-items: center; }
.split__media--range img { height: auto; object-fit: contain; padding: var(--s-3); }
@media (max-width: 720px) { .split__media--range { aspect-ratio: auto; } }
.pp__copy p.pp__copy-ink { color: #101c33; }

/* ---------------------------------------------------------------------------
   Round 136 (Jennie): BioRed intro shows the 70-softgel pack only, larger.
   Same tight inset as Nervzflo; on tablet/phone the frame follows the image ratio.
   --------------------------------------------------------------------------- */
#biored .pp__media--fill { padding: var(--s-2); }
#biored .pp__media--fill img:not(.pp__badge) {
  inset: var(--s-2);
  width: calc(100% - 2 * var(--s-2));
  height: calc(100% - 2 * var(--s-2));
}
@media (max-width: 1024px) {
  #biored .pp__media--fill { aspect-ratio: 849 / 706; max-width: 560px; }
}

/* Round 138 (Jennie): Nervzflo intro now matches Diart One - the carton alone in the card,
   and the wheel as a round badge hanging off the card's top-right corner. The wheel has text,
   so the badge is larger than Diart One's. Tablet/phone frame follows the carton's shape. */
#nervzflo .pp__media--badged .pp__badge { top: -28px; right: -22px; width: clamp(120px, 12vw, 170px); }
/* keep the carton clear of the badge: it sits in the lower part of the card */
#nervzflo .pp__media--badged img:not(.pp__badge) { top: calc(var(--s-2) + clamp(80px, 9vw, 130px)); height: calc(100% - 2 * var(--s-2) - clamp(80px, 9vw, 130px)); }
@media (max-width: 1024px) {
  #nervzflo .pp__media--fill-wide { aspect-ratio: 1356 / 900; }
}
@media (max-width: 720px) {
  #nervzflo .pp__media--badged .pp__badge { top: -16px; right: -8px; width: 104px; }
}

/* ---- Round 140 (Jennie, 2026-10-07): Diart One intro image swaps between two shots ----
   Pure CSS crossfade, 10s cycle, each image ~4.5s with a 0.5s fade. Both slides run the
   same keyframes; the second is offset half a cycle. Pauses on hover; reduced-motion
   users see the first image only. */
@keyframes pp-swap {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
.pp__media--swap .pp__slide { animation: pp-swap 10s ease-in-out infinite; }
.pp__media--swap .pp__slide + .pp__slide { animation-delay: -5s; }
.pp__media--swap:hover .pp__slide { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .pp__media--swap .pp__slide { animation: none; }
  .pp__media--swap .pp__slide + .pp__slide { opacity: 0; }
}

/* ---- Round 149 (Jennie, 2026-10-09): prev/next arrows on the Diart One image swap ----
   main.js adds .is-js and takes over from the CSS crossfade: it shows .is-active, advances
   every 5s, and an arrow click jumps and restarts the timer. Without JS the arrows are hidden
   and the round-140 crossfade still runs. */
.pp__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--navy, #0B2C5C);
  box-shadow: 0 4px 14px rgba(11, 44, 92, .12);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.pp__arrow:hover, .pp__arrow:focus-visible { background: var(--royal-600); border-color: var(--royal-600); color: #fff; }
.pp__arrow--prev { left: -22px; }
.pp__arrow--next { right: -22px; }
.pp__media--swap.is-js .pp__arrow { display: grid; }
.pp__media--swap.is-js .pp__slide { animation: none; opacity: 0; transition: opacity .5s ease-in-out; }
.pp__media--swap.is-js .pp__slide.is-active { opacity: 1; }
@media (max-width: 720px) {
  .pp__arrow { width: 36px; height: 36px; margin-top: -18px; }
  .pp__arrow--prev { left: -10px; }
  .pp__arrow--next { right: -10px; }
}

/* ---- Round 144 centring rule removed in round 147 (Jennie): the 7th card (DIART Secretome)
   now sits in column 1, directly under Ice and Heat Wrap ---- */

/* ---- Round 149 (Jennie, 2026-10-09): Instylan page, content brought over from
   instylan.com.my (IC/PBS, higher efficacy, QOL, recurrent UTI, hemorrhagic
   radiocystitis, administration, references). Reuses pp-study / pp-findings / pp-refs;
   these rules only cover the few pieces those don't. ---- */
.instylan-gag img { width: 100%; max-width: 840px; height: auto; margin-inline: auto; }
.instylan-gag figcaption { max-width: 760px; margin-inline: auto; text-align: center; }
.instylan-efficacy { text-align: center; }
.instylan-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.instylan-groups .pp-figure { margin: 0; padding: var(--s-3); }
.instylan-groups img { width: 100%; height: auto; }
.instylan-note { margin-top: var(--s-4); font-size: 14px; line-height: 1.6; color: var(--muted); }
.instylan-efficacy .instylan-note { margin-inline: auto; max-width: 640px; }
#instylan-qol .pp-study__media img,
#hemorrhagic-radiocystitis .pp-study__media img,
#recurrent-urinary .pp-study__media img,
#mode .pp-study__media img { width: 100%; height: auto; }
.instylan-quote {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid #a2d76a;
  background: var(--surface-alt, #f7f9fd);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: italic;
  color: var(--navy-900);
}
.instylan-steps { margin: var(--s-3) 0 0; padding: 0; list-style: none; counter-reset: step; }
.instylan-steps li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) 44px;
  counter-increment: step;
}
.instylan-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--s-2);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--royal-600);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 720px) {
  .instylan-groups { grid-template-columns: minmax(0, 1fr); max-width: 380px; margin-inline: auto; }
}
#interstitial-cystitis .pp-study__text p + p,
#recurrent-urinary .pp-study__text p + p { margin-top: var(--s-3); }

/* ---- Round 151 (Jennie, 2026-10-09): Instylan topics on one consistent layout.
   Every topic: left-aligned heading, text column left, framed figure right, a hairline
   rule between topics. Replaces the round-149 mix of centred / mirrored blocks. ---- */
.ins-topic { padding-top: var(--s-8); border-top: 1px solid var(--line); text-align: left; }
.ins-topic .pp__block-title { max-width: 820px; margin-inline: 0; text-align: left; }
.ins-topic__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-8);
  align-items: start;
  margin-top: var(--s-5);
}
.ins-topic__text p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.ins-topic__text .pp-findings--dash { margin-top: 0; }
.ins-topic__media { margin: 0; }
.ins-topic__media img { width: 100%; height: auto; }
.ins-topic__media figcaption { text-align: left; }
.ins-topic__media figcaption strong { color: var(--navy-900); }
.ins-topic__lede { margin: var(--s-3) 0 0; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--navy-900); }
.ins-topic__text .ins-topic__lede { margin-top: 0; }
.ins-topic__sub {
  margin: var(--s-7) 0 var(--s-4);
  font-size: 19px;
  line-height: 1.4;
  color: var(--navy-900);
}
.ins-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ins-points li {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-top: 3px solid #a2d76a;
  border-radius: var(--r-lg);
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.ins-stat { font-size: 18px; line-height: 1.5; color: var(--navy-900) !important; }
.ins-stat strong {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: var(--royal-600);
  margin-bottom: var(--s-2);
}
.ins-topic .instylan-groups { margin-top: 0; }
.ins-topic .instylan-note { text-align: left; max-width: none; margin-inline: 0; }
/* The two packaging/chart blocks between topics keep their own centred design;
   the topic after them gets its rule back from the shared padding above. */
#instylan-weight + .ins-topic, #instylan-packaging + .ins-topic { margin-top: var(--s-9); }
@media (max-width: 900px) {
  .ins-topic__body { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .ins-points { grid-template-columns: minmax(0, 1fr); }
  .ins-topic { padding-top: var(--s-7); }
  .ins-stat strong { font-size: 52px; }
}
/* IC/PBS: the GAG-layer diagram is 3.8:1, too small in a half column, so it runs full
   width under the paragraph. */
.ins-topic__body--stack { grid-template-columns: minmax(0, 1fr); }
.ins-topic__body--stack .ins-topic__text { max-width: 900px; }
.ins-topic__body--stack .ins-topic__media img { max-width: 840px; margin-inline: auto; }

/* ---- Round 152 (Jennie, 2026-10-09): Instylan topic tweaks. ---- */
/* Centred topics: IC/PBS, the 95% pain-group charts, Quality of Life. */
.ins-topic--center .pp__block-title { max-width: 900px; margin-inline: auto; text-align: center; }
.ins-topic--center .ins-topic__text { margin-inline: auto; text-align: center; }
.ins-topic--center .instylan-note { text-align: center; }
.ins-topic--center .ins-points li { text-align: left; }
/* "Regeneration of the mucous membrane..." is a second heading at h2 size. */
.ins-topic__subhead { margin-top: var(--s-8); }
/* Quality of Life: title, chart, then the 83% statement as a heading-weight line. */
.ins-qol__chart { max-width: 560px; margin: 0 auto; }
.ins-qol__chart img { width: 100%; height: auto; }
.ins-qol__stat {
  max-width: 900px;
  margin: var(--s-6) auto 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-900);
  text-align: center;
}
.ins-qol__stat strong { color: var(--royal-600); }
/* Recurrent UTI: paragraph full width, then the cell photos left and the caption right. */
#recurrent-urinary .ins-topic__text { max-width: none; }
.ins-fig-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-8);
  align-items: center;
}
.ins-fig-side figcaption { margin-top: 0; font-size: 16px; line-height: 1.75; }
/* Hemorrhagic: text column and chart card the same height, caption above the chart. */
.ins-topic__body--even { align-items: stretch; }
.ins-topic__body--even .ins-topic__text { display: flex; flex-direction: column; justify-content: space-between; }
.ins-topic__body--even .instylan-quote { margin-bottom: 0; }
.ins-fig-captop { display: flex; flex-direction: column; }
.ins-fig-captop figcaption { margin: 0 0 var(--s-4); }
.ins-fig-captop img { margin-block: auto; }
/* Mode of administration: steps and packshot centred on each other, CTA under the steps. */
.ins-topic__body--middle { align-items: center; }
.ins-mode__cta { margin-top: var(--s-6); }
@media (max-width: 900px) {
  .ins-fig-side { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .ins-topic__body--even .ins-topic__text { display: block; }
  .ins-topic__body--even .instylan-quote { margin-top: var(--s-5); }
}

/* ---------------------------------------------------------------------------
   Round 153 (Jennie) - Instylan "Mode of administration" step numbers and the
   "Get Started Now" button take the Instylan green #a2d76a instead of royal.
   Type on the green is navy, not white: white on #a2d76a is 1.68:1, navy ~8:1.
   --------------------------------------------------------------------------- */
.instylan-steps li::before { background: #a2d76a; color: var(--navy-900); }
.btn--pill.ins-mode__cta { background: #a2d76a; color: var(--navy-900); }
.btn--pill.ins-mode__cta:hover { background: #8fc855; color: var(--navy-900); }
.ins-mode__cta .btn__dot { background: #fff; color: var(--navy-900); }


/* ===== Revision 1 (review panel, 2026-10-15) ===== */
/* rev1 ew5dm: header is solid white with the navy logo on every page, also over the hero */
.header, .header--overlay { background: #fff; backdrop-filter: none; border-bottom-color: var(--line); }

/* rev1 qowgr: area tiles are clickable; the matching product cards glow light blue */
.area--link { position: relative; cursor: pointer; }
.area__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.area__link:focus-visible { outline: 3px solid var(--royal-600); outline-offset: 3px; }
.product.is-picked { border-color: #7cb4ff; box-shadow: 0 0 0 3px rgba(124, 180, 255, .45), 0 0 28px rgba(124, 180, 255, .55); }

/* rev1 bnuye: BioRed hero tagline in white */
.hero__standfirst--white { color: #fff; font-size: 20px; font-weight: 600; }

/* rev1 7q8vc / 0u0ae: right-hand Bioactives cards hug their text, equal space above and below */
#biored-bioactives .pp-inside__cards--right .pp-card { min-height: 0; justify-content: center; padding-block: var(--s-6); }

/* rev1 2pmz1: DIART ONE set photo under the wrap diagram */
.pp-wrap__set { grid-column: 1 / -1; margin: var(--s-6) auto 0; max-width: 460px; }
.pp-wrap__set img { width: 100%; height: auto; }


/* ===== Revision 1 (review panel, 2026-10-15) ===== */
/* rev1 166pn / skkay: only the Facebook icon, in Facebook blue */
.social__link[aria-label*="Facebook"], .social__link[aria-label*="Facebook"]:hover { background: #1877f2; border-color: #1877f2; color: #fff; }

/* rev1 9jd9d: the introduction sits under the headline, above the button */
.hero__lead .hero__intro--under { grid-column: auto; grid-row: auto; max-width: 560px; margin: var(--s-5) 0 var(--s-6); }
.hero__lead .hero__intro--under + .btn { margin-top: 0; }
.hero__intro--under .hero__intro-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; line-height: 1.3; color: #fff; }
.hero__intro--under p:not(.hero__intro-title) { margin-top: var(--s-2); font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .9); }

/* rev1 1eb61 / ruhz0 / 8qbzz: three figure + label pairs side by side; "International" is a word, so the figures are a touch smaller */
.stats--words { grid-template-columns: auto auto auto; justify-content: start; column-gap: var(--s-6); }
.stats--words .stats__value { font-size: clamp(26px, 2.4vw, 36px); white-space: nowrap; }
@media (max-width: 720px) { .stats--words { grid-template-columns: repeat(3, auto); column-gap: var(--s-3); } .stats--words .stats__value { font-size: 20px; } }

/* rev1 bb59l: "THE EVIDENCE" label larger, heavy white (heading face: Inter is only loaded to 600) */
.section--brand .eyebrow--strong { padding: 12px 30px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: .1em; color: #fff; border-width: 3.5px; -webkit-text-stroke: 1.1px #fff; }

/* rev1 0hf4k: round cGMP logo larger; the logo row is taller on every tile so the names stay level */
.quality__logo { height: 92px; }
.quality__logo img.quality__img--round { width: 88px; height: 88px; }
@media (max-width: 720px) { .quality__logo { height: 76px; } .quality__logo img.quality__img--round { width: 72px; height: 72px; } }

/* rev1 0p8ki: round BIORED logo in front, off the intro card's top-left corner */
#biored .pp__media--badged .pp__badge--left { top: -34px; left: -30px; right: auto; z-index: 2; width: clamp(104px, 9.5vw, 136px); }
@media (max-width: 720px) { #biored .pp__media--badged .pp__badge--left { top: -16px; left: -8px; width: 76px; } }

/* rev1 yp73s: "Bioactives in BIORED" sits in the middle column above the diagram */
#biored-bioactives .pp-inside__layout { margin-top: 0; }
.pp-inside__center { align-self: center; text-align: center; }
.pp-inside__center h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: var(--s-7); }
@media (max-width: 1024px) { .pp-inside__center { grid-column: 1 / -1; order: -1; } .pp-inside__center h3 { margin-bottom: var(--s-5); } }

/* rev1 9alx2: amber bottle vs PVC picture smaller */
#biored-packaging .pp-figure--compact { max-width: 760px; margin-inline: auto; }

/* rev1 a3l1z: NERVZFLO intro to the client's layout - centred heading, packs + wheel row, centred copy */
.nz-intro { text-align: center; }
.nz-intro__title { font-size: clamp(28px, 3vw, 38px); }
.nz-intro__for { margin-top: var(--s-2); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; color: var(--royal-600); }
.nz-intro__media { margin: var(--s-7) auto var(--s-6); max-width: 1100px; }
.nz-intro__media img { width: 100%; height: auto; mix-blend-mode: multiply; }
.nz-intro__copy { max-width: 900px; margin-inline: auto; }
.nz-intro__copy .pp__lede { font-size: clamp(18px, 1.5vw, 21px); }
.nz-intro__copy p + p { margin-top: var(--s-4); }


/* ===== Revision 1 (review panel, 2026-10-15) ===== */
/* rev1 jlkfo: ALA and Ginkgo boxes in the team's NERVZFLO gradient (cyan bottom-left -> green-teal top-right), white text */
#nervzflo-antioxidants .pp-compare__card { background: linear-gradient(45deg, #02acbe 0%, #039fa3 40%, #049692 60%, #0b826e 100%); border-color: transparent; color: #fff; text-shadow: 0 1px 2px rgba(0, 40, 45, .28); }
#nervzflo-antioxidants .pp-compare__card h4,
#nervzflo-antioxidants .pp-compare__card h4 span,
#nervzflo-antioxidants .pp-compare__card dd,
#nervzflo-antioxidants .pp-compare__card dd.pp-compare__figure { color: #fff; }
#nervzflo-antioxidants .pp-compare__card dt { color: rgba(255, 255, 255, .78); }
#nervzflo-antioxidants .pp-compare__card dl > div { border-top-color: rgba(255, 255, 255, .28); }


/* ===== Revision 1b (review panel, 2026-10-27) ===== */
@media (max-width: 1024px) {
  #diart .pp__media--fill { aspect-ratio: 5 / 4; max-width: 560px; }
}

#instylan-weight .pp-chart__col.is-lead .pp-chart__bar { background: #bcda5c; }

.instylan-steps li::before { background: #bcda5c; }

.btn--pill.ins-mode__cta { background: #bcda5c; }
.btn--pill.ins-mode__cta:hover { background: #a9c84a; }

.split__media--pair img[src*="photo-esper-signage"] { object-position: 100% 50%; }


/* ===== Revision 1b (review panel, 2026-10-27) ===== */
#nervzflo .product__media img { max-width: 80%; max-height: 80%; }


/* ===== Revision 1b (review panel, 2026-10-27) ===== */
@media (min-width: 1025px) {
  #about .split:has(.split__media--range) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #about .stats--words { column-gap: var(--s-3); }
  #about .stats--words .stats__item { padding-left: var(--s-4); }
  #about .stats--words .stats__value { font-size: clamp(24px, 1.9vw, 28px); }
  .split__media--range { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .split__media--range img { width: 112%; max-width: none; margin-left: -10%; padding: 0; }
}
@media (min-width: 1025px) and (max-width: 1359px) {
  #about .stats--words .stats__label { white-space: normal; }
}