/* Revive Clinical Wellness — built from the revivme.com blueprint
   (see the old project's design-blueprints/revivme.com/00-blueprint.md).
   One blue does everything: headings, body, rules, pills, footer. */

:root {
  --blue: #0a4d96;          /* her royal blue. The document names this hex and the logo artwork samples to #084890, which is the same colour; the site had been using #1237b9, which matches neither */
  --ink: #141c33;           /* deep navy ink: all reading text */
  --blue-deep: #073a73;
  --blue-hover: #0c5cb2;
  --blue-pale: #dce7f5;     /* pill hover fill */
  --blue-fade: #dfe9f6;     /* link hover */
  --panel: #f1f5fa;         /* retuned from lavender to her blue's hue */
  --aqua: #00b8c4;          /* the one colour outside her palette that survives: decorative marks only, never text.
                               Retiring it flattened the site for no visible gain, so it stays as the single spark against the navy */
  --aqua-ink: #0a4d96;      /* small labels and figures take her blue */
  --aqua-pale: #e8eff8;     /* tinted panel in her hue, ink on it reads 14.6:1 */
  --aqua-wash: linear-gradient(135deg, #f1f5fb 0%, #e3ecf7 100%);
  --line: #e5e7eb;
  --white: #ffffff;
  --shadow: 0 -1px 10px rgba(172, 171, 171, 0.3);

  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;

  --fs-12: 0.8125rem; --fs-13: 0.875rem; --fs-14: 0.9375rem; --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem;   --fs-30: 1.875rem;  --fs-36: 2.25rem;  --fs-48: 3rem;
  --fs-display: clamp(3rem, 8.4vw, 7.75rem);
  --fs-stat: clamp(3rem, 6vw, 5rem);

  --container: 82rem;      /* 1312px content column, 64px gutters at 1440 */
  --gutter: clamp(1.25rem, 4.4vw, 4rem);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s var(--ease);
  --t-base: 0.3s ease;
  --t-slow: 0.5s var(--ease);

  --header-main: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-18);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-main);
}


img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.tabular { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--blue); color: #fff; padding: 0.6rem 1rem; border-radius: 999px; }
.skip:focus { top: 1rem; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 52rem; }

/* ---------- Type roles ---------- */
.h-display { font-size: var(--fs-display); line-height: 1.0; letter-spacing: -0.035em; font-weight: 300; text-align: center; margin: 0 auto; text-wrap: initial; }
.h-48 { font-size: clamp(2rem, 4vw, var(--fs-48)); line-height: 1.12; font-weight: 300; letter-spacing: -0.02em; }
.h-36 { font-size: clamp(1.75rem, 3vw, var(--fs-36)); font-weight: 300; letter-spacing: -0.015em; }
.h-30 { font-size: var(--fs-30); }
.h-24 { font-size: var(--fs-24); }
.lead { font-size: var(--fs-20); line-height: 1.5; }
.small { font-size: var(--fs-14); line-height: 1.45; }
.tiny { font-size: var(--fs-13); letter-spacing: 0.02em; }
.b { font-weight: 700; }
.measure { max-width: 34rem; }
.measure-wide { max-width: 60rem; }

/* ---------- Pills, links, rules ---------- */
.pill { max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.9rem; padding: 0.7rem 1.75rem; border-radius: 999px;
  background: var(--blue); color: #fff; border: 1px solid var(--blue);
  font-size: var(--fs-18); line-height: 1; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
/* Hover inverted the button to a pale fill, so on a white card the primary action almost
   vanished at the moment someone reached for it. Deepens instead: white on blue-deep is
   11.9:1 against 9.2:1 at rest, so it reads as pressed rather than switched off. */
.pill:hover { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.pill--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.pill--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill--on-blue { background: #fff; color: var(--blue); border-color: #fff; }
.pill--on-blue:hover { background: var(--blue-pale); color: var(--blue-hover); border-color: var(--blue-pale); }
.pill--hero { min-height: 5.25rem; padding: 1.5rem clamp(1.5rem, 6vw, 3.75rem); font-size: clamp(1.25rem, 2.2vw, 2rem); white-space: normal; }
.pill--sm { min-height: 2.5rem; padding: 0.5rem 1.25rem; font-size: var(--fs-14); }
/* On a phone this is the booking button on every page, so it holds the 44px target the
   rest of the header now holds. */
@media (max-width: 63.99em) { .mainbar .pill--sm { min-height: 44px; } }
.ulink { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.ulink:hover { text-decoration-thickness: 2px; color: var(--blue); }
.rule { border: 0; border-top: 1px solid var(--blue); margin: 0; }
.rule--soft { border-top-color: var(--line); }

/* ---------- Header: two tiers, fixed ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); }

.mainbar { height: var(--header-main); border-bottom: 1px solid var(--line); }
.mainbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 100%; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 2.25rem; width: auto; }
.nav { display: none; align-items: center; gap: 2rem; font-size: var(--fs-14); }
.nav a { padding: 0.25rem 0; border-bottom: 1px solid transparent; transition: border-color var(--t-fast), color var(--t-fast); }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--blue); }
@media (min-width: 64em) { .nav { display: flex; } }
/* The header is fixed, so this button is the only CTA permanently on screen. It was
   hidden below 40em, which took it off exactly the device a mobile IV service is booked
   on: on a phone there was no way to book without scrolling to a band or opening the
   burger. Shown at every width, tightened under 40em so it still fits beside the logo. */
.mainbar .pill--sm { display: inline-flex; }
@media (max-width: 39.99em) {
  .mainbar .pill--sm { padding: 0.5rem 0.85rem; font-size: var(--fs-13); white-space: nowrap; }
  .mainbar .brand img { height: 30px; width: auto; }
}
/* The number was only in the footer and on the contact page, so a visitor who wanted to
   speak to someone before letting a clinician into their home had to scroll to the bottom
   to find it. On a phone the digits are dropped and the icon alone carries the tap target,
   because the logo, the number and Book now will not all fit beside the burger at 360px. */
.mainbar__tel { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; min-width: 44px; font-size: var(--fs-14); font-weight: 500; color: var(--blue);
  text-decoration: none; white-space: nowrap; transition: color 0.3s ease; }
.mainbar__tel svg { width: 17px; height: 17px; flex: none; }
.mainbar__tel:hover { color: var(--blue-hover); }
@media (max-width: 47.99em) { .mainbar__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
.burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; padding: 0.6rem; margin-right: -0.6rem; min-width: 44px; min-height: 44px; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); }
@media (min-width: 64em) { .burger { display: none; } }
.menu { position: fixed; inset: var(--header-main) 0 0 0; background: #fff; z-index: 49; padding: 2rem var(--gutter); overflow: auto; display: none; }
.menu[data-open="true"] { display: block; }
.menu ul { display: grid; gap: 0.25rem; }
.menu a { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-24); }
.menu .menu-secondary a { font-size: var(--fs-18); }
.menu .pill { max-width: 100%; margin-top: 1.5rem; }
body[data-menu-open="true"] { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(44rem, 88vh); display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; background: var(--blue-deep); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,42,146,0.35), rgba(13,42,146,0.55)); }
.hero__body { position: relative; padding: 6rem var(--gutter); display: grid; gap: 2.25rem; justify-items: center; max-width: 100%; box-sizing: border-box; }
.hero h1 { font-weight: 300; font-size: clamp(2rem, 3.8vw, 3.4rem); letter-spacing: -0.015em; line-height: 1.12; max-width: 22ch; }
.hero__note { font-size: var(--fs-14); opacity: 0.85; letter-spacing: 0.01em; max-width: 58ch; }

/* ---------- Section rhythm ---------- */
.section { padding: clamp(4rem, 8vw, 7.5rem) 0; }
.section--tight { padding: clamp(3rem, 5vw, 5rem) 0; }
.section--panel { background: var(--panel); }
.eyebrow-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--blue); flex-wrap: wrap; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: clamp(1.4rem, 2.2vw, var(--fs-30)); }
.eyebrow .dot { font-size: 0.55em; line-height: 1; }
.eyebrow svg { width: 0.7em; height: 0.7em; transition: transform var(--t-base); }
.eyebrow:hover svg { transform: translate(2px, -2px); }
.arrows { display: flex; gap: 0.6rem; margin-left: auto; }
.arrow { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--blue); display: grid; place-items: center; color: var(--blue); transition: background var(--t-fast), color var(--t-fast); }
.arrow:hover { background: var(--blue); color: #fff; }
.arrow svg { width: 1rem; height: 1rem; }

/* ---------- Product cards / rail ---------- */
.rail { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2rem 0 1rem; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > li { flex: 0 0 auto; width: min(80vw, 19rem); scroll-snap-align: start; }
@media (min-width: 64em) { .rail > li { width: calc((100% - 4.5rem) / 4); } }
.grid-cards { display: grid; gap: 1.5rem; }
@media (min-width: 40em) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
.card { height: 100%; display: flex; flex-direction: column; text-align: center; border: 1px solid var(--line); background: #fff; padding: 1rem 1rem 1.5rem; transition: border-color var(--t-base); }
.card:hover { border-color: var(--blue); }
.card__art { aspect-ratio: 1; background: var(--panel); display: grid; place-items: center; }
.card__art svg { width: 44%; height: auto; }
.card__name { margin-top: 1.25rem; font-size: var(--fs-24); font-weight: 300; min-height: 2.2em; display: grid; align-content: center; }
.card__name a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 0.25em; }
.card .rule { margin: 0.9rem 0 1rem; }
/* The price and the duration were one string, "£100 · 45 to 60 minutes", set at 20px bold.
   It wrapped mid-phrase in every card and the figure competed with the duration instead of
   leading it. Split, with the price given the weight and the duration receding. */
.card__price { font-size: clamp(1.75rem, 2.4vw, 2.125rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.card__dur { margin-top: 0.45rem; font-size: var(--fs-13); line-height: 1.3; color: var(--ink); opacity: 0.7; white-space: nowrap; }
.card__body { margin-top: 0.9rem; font-size: var(--fs-14); line-height: 1.55; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .pill { max-width: 100%; margin-top: 1.25rem; align-self: center; }

/* ---------- Display statement ---------- */
.statement { padding: clamp(5rem, 11vw, 10.5rem) 0; }

/* ---------- Service cards (photo + panel) ---------- */
.services { display: grid; gap: 1.5rem; }
@media (min-width: 64em) { .services { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.service { display: flex; flex-direction: column; }
.service__img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.service__panel { background: var(--panel); padding: 1.5rem 1.5rem 1.6rem; display: grid; gap: 0.75rem; flex: 1; }
.service__panel h3 { font-size: var(--fs-24); font-weight: 500; letter-spacing: -0.01em; }
.service__panel .small { max-width: 30rem; }
.service__panel .ulink { justify-self: end; font-size: var(--fs-14); margin-top: 0.5rem; }

/* ---------- Authority statement ---------- */
.authority { font-size: clamp(1.6rem, 3.3vw, var(--fs-48)); line-height: 1.22; letter-spacing: -0.015em; max-width: 60rem; font-weight: 300; }

/* ---------- Facts + about composition ---------- */


/* ---------- Two-column editorial (how it works / experts slot) ---------- */
.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 64em) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.split__copy { display: grid; gap: 1.5rem; }
.split__copy p { font-size: var(--fs-14); line-height: 1.6; max-width: 30rem; }
.split__copy .pill { max-width: 100%; justify-self: start; }
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.collage img { width: 100%; object-fit: cover; }
.collage .wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.collage .sq { aspect-ratio: 1; }
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
.step { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.step__n { font-size: var(--fs-13); opacity: 0.8; padding-top: 0.35rem; }
.step h3 { font-size: var(--fs-24); font-weight: 500; letter-spacing: -0.01em; }
.step p { font-size: var(--fs-14); margin-top: 0.35rem; }

/* ---------- Closing split ---------- */
.closing { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 64em) { .closing { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.closing__img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.closing__copy { display: grid; gap: 1.25rem; }
.closing__copy .pill { max-width: 100%; justify-self: start; }
.closing__copy .rule--soft { margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #fff; padding: 4rem 0 2.5rem; margin-top: 2rem; }
.footer a { color: #fff; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.25em; }
.footer__brand img { height: 2.5rem; width: auto; }
.footer__cols { display: grid; gap: 2.5rem 2rem; margin-top: 2.5rem; }
@media (min-width: 40em) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .footer__cols { grid-template-columns: repeat(4, 1fr); } }
.footer h2 { font-size: var(--fs-14); font-weight: 600; display: flex; align-items: center; gap: 0.6rem; }
.footer h2::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--aqua); flex: none; }
.footer ul { margin-top: 0.9rem; display: grid; gap: 0.45rem; font-size: var(--fs-14); line-height: 1.45; }
.footer hr { border: 0; border-top: 1px solid rgba(255,255,255,0.35); margin: 3rem 0 2rem; }
.footer__legal { display: grid; gap: 1.5rem; font-size: var(--fs-13); line-height: 1.6; }
@media (min-width: 64em) { .footer__legal { grid-template-columns: 1fr auto; align-items: end; gap: 4rem; } }
.footer__legal p { max-width: 52ch; }

/* ---------- Inner pages ---------- */
.page-head { padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.page-head h1 { font-size: clamp(2.75rem, 5.6vw, 5.25rem); letter-spacing: -0.025em; font-weight: 300; line-height: 1.02; }
.page-head p { margin: 1.25rem auto 0; max-width: 42rem; font-size: var(--fs-14); line-height: 1.55; }
.page-head .pill { max-width: 100%; margin-top: 2rem; }
.page-head--band { background: var(--panel); }
.page-head--left { text-align: left; }
.page-head--left p { margin-left: 0; }
.crumb { font-size: var(--fs-13); margin-bottom: 1.25rem; display: flex; gap: 0.5rem; align-items: center; }
.crumb a { text-decoration: underline; text-underline-offset: 0.25em; }
.tier-block + .tier-block { margin-top: 4rem; }
.tier-block .eyebrow-row { margin-bottom: 2rem; }

.detail { display: grid; gap: 3rem; }
@media (min-width: 64em) { .detail { grid-template-columns: 0.9fr 1.1fr; gap: 5rem; align-items: start; } }
.detail__art { background: var(--panel); aspect-ratio: 1; display: grid; place-items: center; position: sticky; top: calc(var(--header-main) + 2rem); }
.detail__art svg { width: 46%; height: auto; }
.detail__copy { display: grid; gap: 1.5rem; }
.detail__meta { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-size: var(--fs-20); }
.detail__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.kv { display: grid; gap: 0; }
.kv > div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); font-size: var(--fs-14); }
.kv > div:last-child { border-bottom: 1px solid var(--line); }
.ing { display: grid; gap: 0; }
.ing > li { display: grid; gap: 0.25rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.ing > li:last-child { border-bottom: 1px solid var(--line); }
.ing h3 { font-size: var(--fs-24); font-weight: 500; letter-spacing: -0.01em; }
.ing p { font-size: var(--fs-14); }

/* Benefit list. Same two-row shape as .ing so "What to expect" and "Key ingredients" read
   alike, but the title stays in the body face and bold rather than the display serif,
   because these are claims about the treatment, not nutrient names. */
.blist { list-style: none; margin: 0; padding: 0; display: grid; }
.blist > li { display: grid; gap: 0.3rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.blist > li:first-child { border-top: 0; padding-top: 0.25rem; }
.blist h3 { font-family: var(--font); font-size: var(--fs-18); font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.3; color: var(--ink); }
.blist p { margin: 0; font-size: var(--fs-14); line-height: 1.6; text-wrap: pretty; }
.benefits { display: grid; gap: 1.5rem; }
@media (min-width: 40em) { .benefits { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.benefit { border-top: 1px solid var(--blue); padding-top: 1rem; }
.benefit h3 { font-size: var(--fs-24); font-weight: 500; letter-spacing: -0.01em; }
.benefit p { font-size: var(--fs-14); margin-top: 0.5rem; }
.note { font-size: var(--fs-14); background: var(--panel); padding: 1rem 1.25rem; }

.two-col { display: grid; gap: 2rem; }
@media (min-width: 64em) { .two-col { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; align-items: start; } }
.prose { display: grid; gap: 1.25rem; }
.prose p, .prose li { font-size: var(--fs-18); line-height: 1.6; }
.prose ul { display: grid; gap: 0.5rem; padding-left: 1.25rem; list-style: disc; }
.prose h2, .prose h3 { margin-top: 1rem; }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.1rem 0; font-size: var(--fs-24); font-weight: 500; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; font-weight: 300; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 0 1.5rem; max-width: 46rem; font-size: var(--fs-18); }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.table th, .table td { text-align: left; padding: 0.85rem 0.75rem 0.85rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 1px solid var(--line); }
.table th { font-weight: 700; }
.table .num { text-align: right; padding-right: 0; }

.form { display: grid; gap: 1.25rem; }
.form label { display: grid; gap: 0.4rem; font-size: var(--fs-14); font-weight: 500; }
.form input, .form select, .form textarea { font: inherit; font-size: var(--fs-18); color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 0.75rem 0.9rem; border-radius: 4px; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-pale); }
.form textarea { min-height: 8rem; resize: vertical; }
.form .row { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .form .row { grid-template-columns: 1fr 1fr; } }
.form .check { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-weight: 400; }
.form .check input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.form legend { font-size: var(--fs-14); font-weight: 600; margin-bottom: 0.5rem; }
.form .pill { max-width: 100%; justify-self: start; }

.list-cols { display: grid; gap: 2rem; }
@media (min-width: 40em) { .list-cols { grid-template-columns: 1fr 1fr; } }
.list-cols ul { display: grid; gap: 0.5rem; font-size: var(--fs-18); }
.list-cols h3 { font-size: var(--fs-14); font-weight: 600; margin-bottom: 0.75rem; }

.cta-band { background: var(--blue); color: #fff; padding: 4rem 0; }
.cta-band .container { display: grid; gap: 1.5rem; }
@media (min-width: 64em) { .cta-band .container { grid-template-columns: 1fr auto; align-items: center; gap: 3rem; } }
.cta-band h2 { font-size: clamp(1.75rem, 3vw, var(--fs-36)); }
.cta-band p { opacity: 0.9; margin-top: 0.5rem; }


/* ===================== Site-map pass: dropdown navigation ===================== */
.nav { gap: 0; }
.nav__item { position: relative; display: inline-flex; align-items: center; }
.nav__link { display: inline-flex; align-items: center; padding: 1.35rem 0.25rem 1.35rem 1rem; border-bottom: 0 !important; }
.nav__toggle svg { width: 0.7rem; height: 0.7rem; transition: transform var(--t-fast); display: block; }
.nav__item:hover .nav__link, .nav__item:focus-within .nav__link, .nav__link[aria-current="page"] { color: var(--blue); }
.nav__item[data-open="true"] .nav__toggle svg, .nav__item:hover .nav__toggle svg { transform: rotate(180deg); }
.nav__toggle { display: inline-flex; align-items: center; padding: 1.35rem 1rem 1.35rem 0.35rem; color: inherit; }
.nav__item:hover .nav__toggle, .nav__item:focus-within .nav__toggle { color: var(--blue); }
.menu-panel { --menu-gap: 8px; position: absolute; top: 100%; left: 0; min-width: 18rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(20, 28, 51, 0.08); padding: 1rem 1.15rem; border-radius: 1.75rem; display: none; z-index: 60; }
.menu-panel--wide { min-width: 44rem; left: 50%; transform: translateX(-50%); }
.menu-panel--xwide { min-width: 58rem; left: 50%; transform: translateX(-50%); }
.nav__item:hover .menu-panel, .nav__item:focus-within .menu-panel, .nav__item[data-open="true"] .menu-panel { display: block; }
.menu-item { display: grid; gap: 0.05rem; padding: 0.35rem 0.6rem; border-radius: 4px; transition: background var(--t-fast); }
.menu-item:hover, .menu-item:focus-visible { background: var(--panel); color: var(--ink); }
.menu-panel--anchor { min-width: 21rem; }
.menu-panel--anchor .menu-item__desc { opacity: 0.75; }
.menu-item__name { font-size: var(--fs-14); font-weight: 600; }
.menu-item__desc { font-size: var(--fs-12); opacity: 0.85; }
.menu-panel__all { display: block; margin: 0.55rem 0.75rem 0; padding-top: 0.55rem; border-top: 1px solid var(--line); font-size: var(--fs-13); text-align: center; }
.menu-sections { display: grid; gap: 0.5rem; }
.menu-section + .menu-section { border-top: 1px solid var(--line); padding-top: 0.5rem; }
.menu-group__title { font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); text-align: center; padding: 0 0 0.3rem; }
.menu-row { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.menu-row--short { grid-template-columns: repeat(var(--row), calc((100% - (var(--cols) - 1) * 1.25rem) / var(--cols))); justify-content: center; }
.menu-item[style*="--start"] { grid-column-start: var(--start); }
.menu-row--half > .menu-item { grid-column-end: span 2; }
.menu-row > .menu-item { text-align: center; }
.menu .menu-secondary { margin-top: 1rem; }
.menu details { border-bottom: 1px solid var(--line); }
.menu details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0; font-size: var(--fs-24); }
.menu details summary::-webkit-details-marker { display: none; }
.menu details summary::after { content: "+"; font-weight: 300; }
.menu details[open] summary::after { content: "\2013"; }
.menu details ul { padding: 0 0 1rem 1rem; gap: 0; }
.menu details ul a { font-size: var(--fs-18); padding: 0.5rem 0; border: 0; }
.menu > nav > ul > li > a.menu__top { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-24); }

/* Full-bleed photo band */
.bleed { width: 100%; height: clamp(18rem, 56vw, 50rem); object-fit: cover; display: block; }

/* "How is it administered" row: copy | product | benefits accordion */
.admin-row { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 64em) { .admin-row { grid-template-columns: 1fr 0.8fr 1fr; gap: 3rem; } }
.admin-row__art { display: grid; place-items: center; }
.admin-row__art svg { width: 60%; max-width: 16rem; height: auto; }
/* The photograph replacing the drawn bag renders small, 187px wide on desktop, so it is
   sized to match what the drawing occupied rather than filling the column. */
.admin-row__photo { width: 60%; max-width: 16rem; height: auto; border-radius: 1.25rem; }
.admin-row h2 { font-size: var(--fs-30); }
.admin-row p { font-size: var(--fs-14); margin-top: 1rem; max-width: 26rem; }

/* Accordion with + circles (the reference's benefits and FAQ pattern) */
.acc { display: grid; }
.acc details { border-top: 1px solid var(--blue); }
.acc details:last-child { border-bottom: 1px solid var(--blue); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font-size: var(--fs-18); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border: 1px solid var(--blue); border-radius: 999px; display: grid; place-items: center; font-weight: 300; font-size: 1.4rem; line-height: 1; }
.acc details[open] summary::after { content: "\2013"; }
.acc .acc__body { padding: 0 0 1.25rem; font-size: var(--fs-14); line-height: 1.6; display: grid; gap: 0.6rem; max-width: 46rem; }
.acc--soft details { border-color: var(--line); }
.acc--soft details:last-child { border-bottom-color: var(--line); }
.acc--soft summary { font-size: var(--fs-24); font-weight: 500; padding: 1.25rem 0; }
.acc--soft summary::after { border: 0; width: auto; height: auto; font-size: 1.6rem; }

/* Label card: the reference's small product tile */
/* The card was a forced square with the name crammed top-left, the price detached in the
   top-right corner and a small droplet stranded bottom-right, which left a large dead
   middle. At 256px on a detail page that is a lot of space saying very little.

   It now hugs its content instead of holding a square, the droplet becomes a large soft
   watermark filling the space behind rather than an item stranded in a corner, and
   everything centres over it. Used on 42 pages, so this is one change across all of them. */
.label-card { position: relative; overflow: hidden; width: 7.5rem; border: 1px solid var(--line);
  border-radius: 1.75rem; background: var(--aqua-wash); padding: 1.1rem 0.9rem;
  display: grid; gap: 0.3rem; justify-items: center; text-align: center;
  font-size: var(--fs-12); line-height: 1.25; flex: 0 0 auto; }
.label-card__mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.label-card__mark svg { width: 72%; height: auto; color: var(--blue); opacity: 0.09; }
.label-card > :not(.label-card__mark) { position: relative; }
.label-card__cat { font-size: var(--fs-12); letter-spacing: 0.09em; text-transform: uppercase; color: var(--aqua-ink); }
.label-card__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-18);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--blue); }
.label-card__num { font-weight: 700; font-size: var(--fs-14); }

.label-card--lg { width: min(14rem, 100%); padding: 1.9rem 1.4rem; gap: 0.5rem; }
.label-card--lg .label-card__cat { font-size: var(--fs-13); }
.label-card--lg .label-card__name { font-size: var(--fs-30); }
.label-card--lg .label-card__num { font-size: var(--fs-20); }

/* Two-column panel list (category index) */
.plist { display: grid; gap: 1.5rem; }
@media (min-width: 64em) { .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
/* An odd count leaves the last card stranded in the left column. Centre it instead. */
@media (min-width: 64em) { .plist--centre-last > .plist__item:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc((100% - 2.5rem) / 2); margin-inline: auto; } }
.plist__item { background: var(--panel); padding: 2rem 1.75rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.plist__item > * { min-width: 0; }
.plist__head h3 { overflow-wrap: anywhere; }
@media (max-width: 40em) { .plist__item { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; gap: 0.75rem; }
  /* The label card is decoration here: the category is the section heading, and the name,
     price and summary are all in the row below it. Stacked on a phone it was most of the
     card's height. */
  .plist__item .label-card { display: none; } }
.plist__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.plist__head h3 { font-size: var(--fs-30); font-weight: 300; letter-spacing: -0.01em; }
.plist__body .rule { margin: 0.75rem 0 1rem; }
.plist__body .b { font-size: var(--fs-14); }
.plist__body .small { margin-top: 0.25rem; }
.plist__body .ulink { font-size: var(--fs-14); white-space: nowrap; }

/* Product hero: image left, pale panel right */
.phero { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.phero__grid { display: grid; gap: 2rem; align-items: stretch; }
@media (min-width: 64em) { .phero__grid { grid-template-columns: 2fr 1fr; gap: 2rem; } }
/* The art panel held a 26rem minimum and then stretched to whatever the copy column
   needed, so on an add-on page a small card floated in the middle of roughly 770px of
   empty grey. Where the art is a photograph it should still fill; where it is the drawn
   card it now hugs it and sits at the top. */
.phero__art { background: var(--aqua-wash); border-radius: 1.75rem; display: grid; place-items: center; min-height: 26rem; padding: clamp(1.25rem, 4vw, 3rem); }
.phero__art:has(.label-card) { min-height: 0; align-self: start; padding: clamp(2rem, 4vw, 3rem); }
.phero__art svg { width: 38%; max-width: 15rem; height: auto; }
.phero__art .label-card--lg { width: min(16rem, 100%); }
.phero__panel { background: var(--panel); padding: 2.25rem 1.75rem 2rem; display: grid; gap: 1rem; align-content: start; }
.phero__name { font-size: clamp(2rem, 3.2vw, 2.9rem); letter-spacing: -0.02em; font-weight: 300; line-height: 1.05; }
.phero__tag { font-size: var(--fs-24); line-height: 1.3; }
.phero__panel .small { line-height: 1.55; }
.phero__price { font-size: var(--fs-18); font-weight: 600; }
.phero__cta { margin-top: 0.5rem; display: flex; justify-content: center; }
.phero__cta .pill { max-width: 100%; min-width: min(14rem, 100%); box-shadow: 0 0 0 10px #fff; }
.phero .acc summary { font-size: var(--fs-18); font-weight: 600; padding: 0.85rem 0; }
.phero .acc summary::after { border: 0; width: auto; height: auto; font-size: 1.3rem; }
.phero .acc details { border-color: var(--line); }
.phero .acc details:last-child { border-bottom-color: var(--line); }

/* Centred narrow formulation block */
.centre-block { max-width: 46rem; margin: 0 auto; display: grid; gap: 1.25rem; }
.centre-block h2 { font-size: var(--fs-36); font-weight: 300; letter-spacing: -0.015em; }
.centre-block .pill { max-width: 100%; justify-self: center; margin-top: 1rem; min-width: min(22rem, 100%); white-space: normal; text-align: center; }
.centre-block .pill--lg { min-height: 3.75rem; font-size: var(--fs-20); }

/* FAQ tabs row */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 1rem 1.25rem; font-size: var(--fs-14); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover, .tabs a[aria-current="true"] { border-bottom-color: var(--blue); color: var(--blue); }

/* Service pages */
.cta-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
.cta-strip .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; font-size: var(--fs-18); }
.svc { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 64em) { .svc { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; } .svc__img { margin-right: calc(-1 * var(--gutter)); } }
.svc__copy { display: grid; gap: 1.25rem; }
.svc__copy .kicker { font-size: var(--fs-14); }
.svc__copy h2 { font-size: clamp(2rem, 4vw, var(--fs-48)); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }
.svc__copy p, .svc__copy li { font-size: var(--fs-14); line-height: 1.6; }
.svc__copy h3 { font-size: var(--fs-14); font-weight: 600; margin-top: 0.5rem; }
.svc__copy ul { padding-left: 1.5rem; display: grid; gap: 0.5rem; }
.svc__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.quote-comp { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 64em) { .quote-comp { grid-template-columns: 1.6fr 1fr; gap: 3rem; } }
.quote-comp__media { position: relative; }
/* The file is a 2:3 portrait. A 4/3 box cover-cropped it to the middle half of its height,
   so on a phone the room became a strip. 3/4 matches the desktop box and trims about a
   tenth instead. */
.quote-comp__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 64em) { .quote-comp__media img { width: 72%; aspect-ratio: 3 / 4; } }
.quote-box { background: #fff; padding: 1.5rem 0 0; font-size: clamp(1.25rem, 2vw, var(--fs-24)); line-height: 1.35; display: grid; gap: 1rem; }
@media (min-width: 64em) { .quote-box { position: absolute; right: 0; bottom: 0; width: 46%; padding: 2.5rem 0 0 2.5rem; } }
.quote-box .attrib { font-size: var(--fs-18); }
.quote-comp__side { display: grid; gap: 1.25rem; }
.quote-comp__side h2 { font-size: var(--fs-24); }
.quote-comp__side ul { display: grid; gap: 0.35rem; font-size: var(--fs-14); }
.quote-comp__side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-top: 1rem; }

/* Contact page cards */
.pill-panel { background: var(--panel); border-radius: 2rem; padding: 1.75rem 2rem; display: grid; gap: 1rem; justify-items: center; text-align: center; max-width: 24rem; margin: 0 auto; }
.pill-panel .pill { max-width: 100%; width: 100%; }
.ccard { background: var(--panel); border-radius: 1.25rem; padding: 2rem 1.75rem; display: grid; gap: 1rem; }
.ccard h2 { font-size: var(--fs-14); font-weight: 600; display: flex; align-items: center; gap: 0.6rem; }
.ccard h2::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--blue); }
.ccard p, .ccard li { font-size: var(--fs-14); line-height: 1.6; }
.ccard ul { display: grid; gap: 0.25rem; }
.ccards { display: grid; gap: 1.5rem; max-width: 36rem; margin: 0 auto; }
.ccard .form { margin-top: 0.5rem; }

/* Nutrient page */
.nut-band { background: var(--aqua-wash); padding: clamp(2.5rem, 4vw, 4rem) 0; }
.nut-band .container { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 64em) { .nut-band .container { grid-template-columns: 1fr auto; gap: 4rem; } }
.nut-band h1 { font-size: clamp(2.5rem, 5.6vw, 5rem); font-weight: 300; letter-spacing: -0.025em; }
.nut-band p { font-size: var(--fs-14); margin-top: 1.25rem; max-width: 34rem; }
.nut-band ul { margin-top: 1rem; display: grid; gap: 0.25rem; font-size: var(--fs-14); padding-left: 1rem; list-style: disc; }
.found-in { display: grid; gap: 2.5rem; }
@media (min-width: 64em) { .found-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 5rem; } }
/* Vitamin C is in five infusions, so the fifth sat alone in the left column with 649px of
   nothing beside it. Same rule as the add-ons list and the treatment tiers. */
@media (min-width: 64em) {
  .found-in > .found-in__item:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - 5rem) / 2); margin-inline: auto; }
}
.found-in__item { display: grid; gap: 0.6rem; align-content: start; }
.found-in__item h3 { font-size: var(--fs-24); font-weight: 300; }
.found-in__item p { font-size: var(--fs-14); }
.found-in__item .rule { margin-top: 0.75rem; }
.found-in__item .ulink { justify-self: end; font-size: var(--fs-14); }
.footnote { text-align: center; font-size: var(--fs-13); padding: 2rem 0; }

/* Booking wizard */
.wizard__steps { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.wizard__steps li { padding: 0.9rem 1.25rem 0.9rem 0; margin-right: 1.25rem; font-size: var(--fs-14); display: flex; gap: 0.6rem; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.wizard__steps li span:first-child { width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 1px solid var(--blue); display: grid; place-items: center; font-size: var(--fs-12); }
.wizard__steps li[aria-current="step"] { border-bottom-color: var(--blue); }
.wizard__steps li[aria-current="step"] span:first-child, .wizard__steps li[data-done="true"] span:first-child { background: var(--blue); color: #fff; }
.wizard__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 64em) { .wizard__grid { grid-template-columns: 1.2fr 0.8fr; gap: 4rem; } }
.wizard fieldset { display: grid; gap: 1rem; }
.wizard legend { font-size: var(--fs-24); margin-bottom: 1rem; }
.is-enhanced .wizard fieldset[data-step]:not([data-active="true"]) { display: none; }
.choice { display: grid; gap: 0.75rem; }
.choice--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 40em) { .choice--3 { grid-template-columns: 1fr; } }
.choice label { display: grid; gap: 0.25rem; border: 1px solid var(--line); padding: 1rem 1.1rem; cursor: pointer; font-size: var(--fs-14); font-weight: 400; position: relative; }
.choice label:has(input:checked) { border-color: var(--blue); background: var(--panel); }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice .b { font-size: var(--fs-18); }
.choice--list label { grid-template-columns: 1fr auto; align-items: center; }
.choice--list .price { text-align: right; }
.wizard__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.wizard__summary { background: var(--panel); padding: 2rem 1.75rem; display: grid; gap: 1rem; position: sticky; top: calc(var(--header-main) + 2rem); }
.wizard__summary h2 { font-size: var(--fs-18); font-weight: 600; }
.wizard__summary dl { display: grid; gap: 0.5rem; font-size: var(--fs-14); }
.wizard__summary dl div { display: grid; grid-template-columns: 6rem 1fr; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.wizard__summary dt { opacity: 0.8; }
.wizard__summary .note { background: #fff; }
/* The sidebar names the add-ons; the pinned strip counts them. */
.wizard__summary .sum-brief { display: none; }

/* On a phone the summary is the second grid item, so it landed below the whole form and
   its sticky position never helped: the client answered three steps with nothing on
   screen saying what they had chosen. Above the form and pinned instead, collapsed to the
   one line that matters. */
@media (max-width: 63.99em) {
  .wizard__grid { grid-template-rows: auto auto; }
  .wizard__summary { order: -1; position: sticky; top: var(--header-main); z-index: 5;
    padding: 0.75rem 1rem; gap: 0.35rem; border-radius: 0 0 1rem 1rem;
    box-shadow: 0 8px 20px rgba(20, 28, 51, 0.06); }
  /* One line, no labels, infusion first: on a strip this narrow the labels cost more room
     than they explain, and the infusion is the thing they must not lose track of. */
  .wizard__summary h2, .wizard__summary .note, .wizard__summary dt { display: none; }
  .wizard__summary dl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.55rem;
    font-size: var(--fs-13); line-height: 1.45; }
  .wizard__summary dl div { display: flex; flex: 0 0 auto; gap: 0; padding: 0; border-top: 0; }
  /* The browser gives dd a 40px start margin. The grid layout absorbed it; flex did not,
     and it showed up as a ragged gap between every pair. */
  .wizard__summary dd { margin: 0; }
  .wizard__summary dd { font-weight: 600; }
  .wizard__summary dl div:not(:last-child) dd::after { content: "·"; margin-left: 0.55rem; font-weight: 400; opacity: 0.35; }
  /* The infusion is first in the DOM now, so no reorder is needed. */
  .wizard__summary [data-sum=infusion] { color: var(--blue); }
  .wizard__summary .sum-full { display: none; }
  .wizard__summary .sum-brief { display: inline; }
}

/* Perfect pairings inside the infusion step. */
/* On the pairings panel the fieldset legend would read "Which infusion?" over a list of
   add-ons, so it stands down and the panel heading leads. */
fieldset.is-pairing > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-pairing .pairpick { margin-top: 0; }
.pairpick { margin-top: 1.25rem; }
.pairpick__set { background: var(--aqua-wash); border-radius: 1.5rem; padding: 1.5rem 1.35rem; display: grid; gap: 1rem; }
.pairpick__lead { margin: 0; font-size: var(--fs-14); line-height: 1.55; max-width: 52ch; }
.pairpick__lead .kicker { display: block; font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua-ink); margin-bottom: 0.3rem; }
.pairpick__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pairpick__row { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 0.85rem 1rem; cursor: pointer;
  transition: border-color var(--t-base); }
.pairpick__row:hover, .pairpick__row:focus-within { border-color: var(--blue); }
.pairpick__row input { margin-top: 0.15rem; width: 1.15rem; height: 1.15rem; accent-color: var(--blue); }
.pairpick__body { display: grid; gap: 0.2rem; min-width: 0; }
.pairpick__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-weight: 600; font-size: var(--fs-14); }
.pairpick__price { margin-left: auto; color: var(--blue); font-weight: 700; }
.pairpick__why { font-size: var(--fs-13); line-height: 1.5; opacity: 0.8; text-wrap: pretty; }
/* Saying no is a row in the same list rather than a second Continue button, so there is
   one way to move on and one visual language for the choice. */
.pairpick__row--skip { background: transparent; border-style: dashed; margin-top: 0.25rem; }
.pairpick__row--skip .pairpick__name { font-weight: 500; opacity: 0.85; }
.pairpick__row--skip:hover, .pairpick__row--skip:focus-within { border-style: solid; }

.h-display--sentence { text-transform: none; letter-spacing: -0.035em; line-height: 1.02; }
.svc--flip { direction: rtl; } .svc--flip > * { direction: ltr; }
@media (min-width: 64em) { .svc--flip .svc__img { margin-right: 0; margin-left: calc(-1 * var(--gutter)); } }

/* ===================== Section 2: ink plus one accent =====================
   Reading text is ink. The brand blue is kept for what signals: pills, hairlines,
   figures, the eyebrow, the wizard's active step, and one moment per page (the
   display statement on the homepage, the blue band on inner pages). */
.h-display, .eyebrow, .eyebrow a, .card__price, .phero__price, .plist__body .b, .label-card__num, .tiny, .kicker, .step__n, .about-box h2, .cta-band .pill--on-blue { color: var(--blue); }
.cta-band .pill--on-blue:hover { color: var(--blue-hover); }
.cta-band, .cta-band h2, .cta-band p { color: #fff; }
.card__name a:hover { color: var(--blue); }
.ulink:hover { color: var(--blue); }
.acc summary::after { border-color: var(--ink); }
.acc details { border-color: var(--ink); }
.acc details:last-child { border-bottom-color: var(--ink); }
.phero .acc details, .phero .acc details:last-child { border-color: var(--line); }
.arrow { color: var(--ink); border-color: var(--ink); }
.arrow:hover { background: var(--ink); color: #fff; }
.eyebrow-row, .rule, .benefit, .found-in__item .rule { border-color: var(--blue); }
.wizard__steps li span:first-child { border-color: var(--ink); }
.wizard__steps li[aria-current="step"] span:first-child, .wizard__steps li[data-done="true"] span:first-child { background: var(--blue); border-color: var(--blue); }
.wizard__steps li[aria-current="step"] { border-bottom-color: var(--blue); }
.hero__scrim { background: linear-gradient(180deg, rgba(20,28,51,0.42), rgba(20,28,51,0.62)); }
.footer hr { border-top-color: rgba(255,255,255,0.25); }
.ccard h2::before, .footer h2::before { background: var(--blue); }
.footer h2::before { background: #fff; }
.card__art, .phero__art, .admin-row__art, .detail__art { color: var(--blue); }
.rule--soft { border-top-color: var(--line); }

.prose p, .prose li, .split__copy p, .svc__copy p, .about-box p, .quote-comp__side p, .page-head p { max-width: 70ch; }

/* Section 4: the rail card closes with a quiet link, not a pill */
.card__link { margin-top: 1.25rem; align-self: center; font-size: var(--fs-14); }
.card__body { flex: 1; }

/* ===================== Section 5: motion =====================
   One orchestrated entrance on the hero (pure CSS, runs without JavaScript),
   staggered rail cards and slow scroll reveals that only apply once the script
   has added `html.js`, so the page is complete with scripts off. Everything
   collapses to its final state under prefers-reduced-motion. */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.045); } to { transform: none; } }
@keyframes fadein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hero__img { animation: settle 1.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero h1 { animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero .pill--hero { animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
.hero__note { animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both; }
/* The shared fadein keyframe ends on `transform: none`, which wiped the translateX(-50%)
   that centres a wide panel and threw it off the right of the screen. Panels fade on
   opacity only so their own transform survives. */
@keyframes panelIn { from { opacity: 0; } to { opacity: 1; } }
.menu-panel { animation: panelIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .rail > li { opacity: 0; transform: translateY(16px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 60ms); }
html.js .rail.is-visible > li { opacity: 1; transform: none; }
.pill, .ulink, .arrow, .card, .menu-item { transition-duration: 0.25s; }
@media (prefers-reduced-motion: reduce) {
  .hero__img, .hero h1, .hero .pill--hero, .hero__note, .menu-panel { animation: none; }
  html.js .reveal, html.js .rail > li { opacity: 1; transform: none; transition: none; }
}

/* ===================== Display face: Bodoni Moda =====================
   One high-contrast serif for what is read as a statement: page titles, the
   display line, section headings and product names. Geist stays for everything
   that is read as information: body, menus, labels, prices, forms. */
.h-display, .page-head h1, .nut-band h1, .hero h1, .phero__name, .h-48, .h-36, .h-30, .h-24, .card__name, .plist__head h3, .found-in__item h3, .centre-block h2, .svc__copy h2, .about-box h2, .cta-band h2, .admin-row h2, .quote-box p:first-child, .wizard legend, .closing__copy h2, .split__copy h2 {
  font-family: var(--font-display); font-weight: 500; letter-spacing: 0; font-feature-settings: "kern" 1;
}
.h-display { line-height: 1.02; letter-spacing: -0.01em; }
.hero h1 { font-weight: 600; font-size: clamp(2.6rem, 4.9vw, 4.6rem); letter-spacing: 0; line-height: 1.1; }
.page-head h1 { font-size: clamp(3.4rem, 6.8vw, 6.5rem); letter-spacing: 0; line-height: 1.02; }
.h-48 { font-size: clamp(2.5rem, 5vw, 3.9rem); letter-spacing: 0; line-height: 1.1; }
.h-36 { font-size: clamp(2.1rem, 3.7vw, 2.95rem); letter-spacing: 0; line-height: 1.14; }
.h-30 { font-size: 2.1rem; }
.h-24 { font-size: 1.65rem; }
.phero__name { font-size: clamp(2.5rem, 4vw, 3.7rem); line-height: 1.04; }
.card__name { font-size: 1.95rem; }
.plist__head h3 { font-size: 2.1rem; }
.found-in__item h3 { font-size: 1.7rem; }
.svc__copy h2 { font-size: clamp(2.25rem, 4.4vw, 3.4rem); }
.cta-band h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.wizard legend { font-size: 1.7rem; }
.about-box h2 { font-size: 1.7rem; }
.quote-box p:first-child { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.3; }
/* Cormorant carried 14 of roughly 280 text elements, so the face that gives the brand its
   character was effectively absent. It now takes every heading at 18px and up. Anything
   smaller stays in Geist, where a light serif would cost legibility. */
.menu-item__name, .footer h2, .wizard__summary h2 { font-family: var(--font); }
.eyebrow, .step h3, .benefit h3, .ing h3, .service__panel h3, .acc summary, .ccard h2, .list-cols h3, .faq summary { font-family: var(--font-display); }

@media (max-width: 40em) { .h-display br { display: none; } }

/* ===================== Photographic hero =====================
   One pale photograph, the headline set in ink on its calm left half, the blue
   pill as the only colour. The veil lifts the left side a little for contrast
   and fades to nothing so the photograph stays a photograph. */
/* The hero image is now a dark macro, so the type goes back to white on it, which is what
   the base rule does. Measured on the file: the band the headline occupies has an average
   luminance of 0.03 and a 95th percentile of 0.31 at its brightest, so a modest veil
   clears the 3:1 that large text needs without flattening the picture. */
.hero { color: #fff; background: var(--ink); place-items: center; min-height: min(46rem, 90vh); }
.hero__img { object-position: 50% 50%; }
.hero__scrim { background: radial-gradient(120% 95% at 50% 56%, rgba(20,28,51,0.55) 0%, rgba(20,28,51,0.38) 55%, rgba(20,28,51,0.18) 100%); }
.hero__body { width: 100%; max-width: var(--container); margin: 0 auto; padding: 6rem var(--gutter); justify-items: center; text-align: center; gap: 2rem; }
.hero h1 { color: #fff; font-weight: 500; max-width: 26ch; text-wrap: balance; }
.hero__note { color: #fff; opacity: 0.9; max-width: 52ch; }
@media (max-width: 40em) {
  .hero__scrim { background: linear-gradient(180deg, rgba(20,28,51,0.30) 0%, rgba(20,28,51,0.52) 55%, rgba(20,28,51,0.38) 100%); }
  .hero h1 { max-width: 16ch; }
}

/* ===================== Quieter header =====================
   One bar. On the homepage it floats transparent over the photograph and turns
   white once the page scrolls (script sets html[data-scrolled]); without the
   script it stays transparent, which still reads over a pale page. Inner pages
   keep the white bar. */
body.home { padding-top: 0; }
body.home .hero { padding-top: var(--header-main); }
body.home .header { background: transparent; backdrop-filter: none; transition: background 0.3s ease; }
body.home .mainbar { border-bottom-color: transparent; transition: border-color 0.3s ease; }
/* The homepage header floats transparent over the hero, which was fine while the hero was
   pale. The hero is now a dark macro, so at the top of the page the nav and the logo go
   white, and revert the moment the white bar appears on scroll. */
html:not([data-scrolled="true"]) body.home .nav__link,
html:not([data-scrolled="true"]) body.home .nav__toggle,
html:not([data-scrolled="true"]) body.home .mainbar__tel,
html:not([data-scrolled="true"]) body.home .burger span { color: #fff; }
html:not([data-scrolled="true"]) body.home .burger span { background: #fff; }
html:not([data-scrolled="true"]) body.home .brand img { filter: brightness(0) invert(1); }
html:not([data-scrolled="true"]) body.home .nav__link,
html:not([data-scrolled="true"]) body.home .nav__toggle { transition: color 0.3s ease; }
html:not([data-scrolled="true"]) body.home .brand img { transition: filter 0.3s ease; }

html[data-scrolled="true"] body.home .header { background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); }
html[data-scrolled="true"] body.home .mainbar { border-bottom-color: var(--line); }
.mainbar .container { padding-top: 0; padding-bottom: 0; }
.mainbar { height: 4.5rem; }
:root { --header-main: 72px; }

/* The line about who delivers treatment sits under the hero rather than inside it,
   so the hero carries one heading and one action. */
.assurance { background: var(--panel); }
.assurance .container { padding-top: 1.4rem; padding-bottom: 1.4rem; }
.assurance p { margin: 0 auto; max-width: 68ch; text-align: center; font-size: var(--fs-14); line-height: 1.55; color: var(--ink); }

/* Treatment art: a photograph fills the square; the drawn fallback keeps its pale panel. */
.card__art { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--panel); }
.card__art--drawn { display: grid; place-items: center; color: var(--blue); }
.card__art--drawn svg { width: 44%; height: auto; }
.phero__art { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--panel); }
/* aspect-ratio governs the square; the old 26rem floor forced it wider than a phone. */
.phero__art--drawn { display: grid; place-items: center; color: var(--blue); min-height: 0; min-width: 0; }
/* The rule above sets aspect-ratio 1 for the photograph case, and it lands after the
   :has() override, which is why the panel stayed a 769px square with a small card adrift
   in it. Released only where the panel holds the drawn card. */
.phero__art:has(.label-card) { aspect-ratio: auto; min-height: 0; align-self: start; }
.phero__art--drawn svg { width: 46%; height: auto; }

/* ===================== Contact tiles =====================
   Four rounded tiles, centred, generous padding, one hairline. Sized so the row
   holds together on a laptop and stacks two-up on a phone. */
.page-head--centre { text-align: center; }
.page-head--centre p { margin-left: auto; margin-right: auto; }
.ctiles { display: grid; gap: 1.25rem; max-width: 58rem; margin: 0 auto; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 34em) { .ctiles { grid-template-columns: 1fr; } }
.ctile { background: var(--panel); border: 1px solid transparent; border-radius: 1.75rem; padding: 2.5rem 2rem; text-align: center; display: grid; gap: 0.75rem; align-content: center; min-height: 11rem; transition: border-color var(--t-base), background var(--t-base); }
.ctile:hover { border-color: var(--blue); background: #fff; }
.ctile h2 { font-family: var(--font); font-size: var(--fs-13); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin: 0; }
.ctile p { margin: 0; font-size: var(--fs-20); line-height: 1.5; color: var(--blue); }
.ctile p .ulink { color: var(--blue); }
.ctile p .ulink:hover { color: var(--ink); }
.ctiles__cta { text-align: center; margin: 2.5rem 0 0; }
.form--centred { max-width: 40rem; margin: 2rem auto 0; }
.form--centred .pill { justify-self: center; }

/* Contact: close the dead gap under the intro and hold the intro to a short measure
   so the eye goes head, tiles, action without a pause in between. */
.page-head--centre p { max-width: 46ch; }
.ctile { min-height: 12rem; }
.ctiles__cta { margin-top: 2rem; }

/* The email address is one long unbreakable token; on a 320px screen its min-content
   width was forcing the tile wider than the viewport. */
.ctile { min-width: 0; }
.ctile p { overflow-wrap: anywhere; }
@media (max-width: 24em) { .ctile p { font-size: var(--fs-18); } .ctile { padding: 2rem 1.25rem; } }

/* ===================== Our services =====================
   Three equal rounded tiles, centred, each the same height with its action pinned to
   the bottom so the row reads as one symmetrical set. */
.lede { max-width: 58ch; margin: 0 auto 3rem; text-align: center; font-size: var(--fs-20); line-height: 1.55; color: var(--ink); }
.stiles { display: grid; gap: 1.5rem; max-width: 72rem; margin: 0 auto; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
@media (max-width: 60em) { .stiles { grid-template-columns: 1fr; max-width: 34rem; } }
.stile { background: var(--panel); border: 1px solid transparent; border-radius: 1.75rem; padding: 2.75rem 2rem 2.5rem; text-align: center; display: grid; grid-template-rows: auto 1fr auto; gap: 1.25rem; min-width: 0; transition: border-color var(--t-base), background var(--t-base); }
.stile:hover { border-color: var(--blue); background: #fff; }
.stile h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-30); line-height: 1.1; color: var(--blue); margin: 0; }
.stile p { margin: 0; font-size: var(--fs-14); line-height: 1.65; color: var(--ink); text-wrap: pretty; }
/* Each button was sized to its own label, so the three came out 268, 252 and 280px wide
   and the row read as ragged, most obviously on hover. They now take the card's content
   width, which also makes the tap target the same on all three. */
/* Stretching to the card width is right in the three-up grid, where the card is about
   368px. In the single-column layout the card is 544px and the button became a 478px
   banner, so it is capped and centred instead. */
.stile .pill { justify-self: center; width: 100%; max-width: 20rem; text-align: center; }

/* Services page: the closing band is centred too, so the whole page holds one axis. */
.cta-band--centre .container { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.75rem; }
.cta-band--centre p { margin-left: auto; margin-right: auto; max-width: 52ch; }
/* the intro and the lede share one measure so the two stacked paragraphs align */
.page-head--centre p, .lede { max-width: 52ch; }

/* "Explore corporate wellness" does not fit one line in a padded tile at several widths,
   and the narrowest case is not the phone: in the three-up grid at 1024 the card is 295px
   with 231px inside it, tighter than a 390px phone's 286px. Keyed to the viewport the rule
   missed that, and the button overflowed its own card. It wraps at every width instead. */
.stile { min-width: 0; }
.stile .pill { white-space: normal; padding-left: 1.1rem; padding-right: 1.1rem; line-height: 1.3; }
@media (max-width: 24em) { .stile { padding: 2.25rem 1.1rem 2rem; } }

/* ===================== Group bookings =====================
   Centred prose on one measure, and the occasions she listed as a sentence set as
   rounded chips so the page has structure without inventing claims. */
.prose-centred { max-width: 62ch; margin: 0 auto; text-align: center; display: grid; gap: 1.25rem; }
.prose-centred p { margin: 0; font-size: var(--fs-18); line-height: 1.7; color: var(--ink); }
.centre-title { text-align: center; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-30); color: var(--blue); margin: 0 0 2rem; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; max-width: 56rem; margin: 0 auto; padding: 0; list-style: none; }
.chip { background: var(--panel); border: 1px solid transparent; border-radius: 999px; padding: 0.7rem 1.5rem; font-size: var(--fs-14); color: var(--ink); transition: border-color var(--t-base), background var(--t-base); }
.chip:hover { border-color: var(--blue); background: #fff; }
.page-head--band.page-head--centre { text-align: center; }

/* The enquiry block is one centred column rather than a left/right split, so the page
   keeps a single axis all the way down. */
.enquiry { display: grid; gap: 2rem; max-width: 44rem; margin: 0 auto; text-align: center; }
.enquiry__head h2 { text-align: center; }
.enquiry__head p { max-width: 48ch; margin: 0.75rem auto 0; }
.enquiry .form { text-align: left; }
.enquiry .form .check { text-align: left; }

/* Closing panel: rounded, centred, matching the service and contact tiles. */
.plan-tile { background: var(--panel); border: 1px solid transparent; border-radius: 1.75rem; padding: 3rem 2rem; max-width: 44rem; margin: 0 auto; text-align: center; display: grid; gap: 1rem; justify-items: center; transition: border-color var(--t-base), background var(--t-base); }
.plan-tile:hover { border-color: var(--blue); background: #fff; }
.plan-tile h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-30); color: var(--blue); margin: 0; }
.plan-tile p { margin: 0; max-width: 46ch; font-size: var(--fs-14); line-height: 1.65; color: var(--ink); }
.plan-tile .pill { margin-top: 0.5rem; }

/* Chips and long labels must fit a 320px screen. */
@media (max-width: 24em) {
  .chip { padding: 0.6rem 1rem; font-size: var(--fs-13); }
  .plan-tile { padding: 2.25rem 1.1rem; }
  .plan-tile .pill { white-space: normal; padding-left: 1.1rem; padding-right: 1.1rem; line-height: 1.3; }
}
.chips { padding-left: 0.25rem; padding-right: 0.25rem; }
.plan-tile { min-width: 0; }

/* ===================== One vertical rhythm =====================
   Every gap between stacked blocks is the same: each block pads --rhythm top and
   bottom, so the space between any two is exactly twice that. The page head uses the
   same bottom padding as a section, so the first gap matches every later one. */
:root { --rhythm: clamp(3rem, 5vw, 5rem); }
.section--tight { padding: var(--rhythm) 0; }
.page-head { padding-bottom: var(--rhythm); }
.cta-band { padding: var(--rhythm) 0; }
.assurance .container { padding-top: 1.4rem; padding-bottom: 1.4rem; }

/* The two closing tiles sit as a matched pair, same width and corner, stacked with the
   same gap the rest of the page uses. */
.plan-tiles { display: grid; gap: 1.5rem; max-width: 44rem; margin: 0 auto; }
.plan-tiles .plan-tile { max-width: none; margin: 0; }
.plan-tile--signoff { gap: 0.5rem; }
.plan-tile--signoff .signoff { font-family: var(--font-display); font-style: italic; font-size: var(--fs-20); color: var(--blue); max-width: none; }

/* Brand sign-off tile: same rounded, centred panel, just quieter. */
.signoff-tile { gap: 0.6rem; padding: 2.75rem 2rem; }
.signoff { font-style: italic; font-size: var(--fs-18); color: var(--blue); opacity: 0.9; }

/* Vitamin shots: rounded tiles on a centred grid, same corners as everywhere else. */
.shots { display: grid; gap: 1.25rem; max-width: 58rem; margin: 0 auto; grid-template-columns: repeat(2, 1fr); padding: 0; list-style: none; }
@media (max-width: 34em) { .shots { grid-template-columns: 1fr; } }
/* The IM group holds one item, which left it stranded in the left column under a centred
   heading. An odd last tile now spans both columns at one column's width and centres. */
@media (min-width: 34.0625em) {
  .shots > li:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc((100% - 1.25rem) / 2); margin-inline: auto; }
}
.shot { background: var(--panel); border: 1px solid transparent; border-radius: 1.75rem; padding: 2rem 1.75rem; text-align: center; display: grid; gap: 0.5rem; align-content: center; min-height: 8.5rem; min-width: 0; transition: border-color var(--t-base), background var(--t-base); }
.shot:hover { border-color: var(--blue); background: #fff; }
.shot h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-24); color: var(--ink); margin: 0; }
.shot p { margin: 0; font-size: var(--fs-20); color: var(--blue); font-weight: 500; }

/* A band, not a wall: the old bleed ran to 800px on a laptop and pushed the actual
   catalogue two screens down the page. */
.bleed--band { height: clamp(12rem, 22vw, 20rem); }

/* Nav spacing: plain items carry no toggle button, so without this they butt straight
   into the next label ('Vitamin ShotsPackages'). */
.nav__item > .nav__link { padding-right: 0.9rem; }
.nav__item.has-menu > .nav__link { padding-right: 0.15rem; }
.nav__item + .nav__item { margin-left: 0.5rem; }

/* A wide panel centred on its own nav item runs off the screen when that item sits near
   the right edge. Clamp it to the viewport instead of the item. */
.nav__item { position: static; }
.nav__item.is-anchored { position: relative; }
.mainbar .container { position: relative; }
.menu-panel--wide, .menu-panel--xwide { left: 50%; transform: translateX(-50%); max-width: min(72rem, calc(100vw - 2rem)); }
.menu-panel--wide::before, .menu-panel--xwide::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--menu-gap)); height: var(--menu-gap); }
.menu-panel--xwide { min-width: min(58rem, calc(100vw - 2rem)); }
.menu-panel--wide { min-width: min(44rem, calc(100vw - 2rem)); }
/* narrow panels still hang off their own item, so those keep a positioned ancestor */
.nav__item:not(.has-menu) { position: static; }


/* ---------- accent and motion ----------
   The palette was two colours: brand blue and near-black on white, with one pale panel.
   The accent below adds a vibrant third that stays in the cool family, so nothing fights
   the blue. It carries no text at 2.4:1, only fills, marks and gradients; --aqua-ink is
   the 4.95:1 version used where an accent has to be readable. Motion was entrance-only,
   so nothing responded to the pointer; the hovers here are transform and opacity, both
   composited, and the whole block is already covered by the reduced-motion rule above. */

.eyebrow .dot { color: var(--aqua); }
.eyebrow-row { border-bottom: 0; position: relative; }
.eyebrow-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--aqua) 60%, rgba(0, 184, 196, 0) 100%); }
.footer h2 .dot, .list-cols h3 .dot { color: var(--aqua); }

.section--panel { background: var(--aqua-wash); }
.card__art { background: var(--aqua-wash); overflow: hidden; }
.card__art img, .card__art picture { transition: transform 0.6s var(--ease); }

.card { transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.card:hover { border-color: var(--aqua); box-shadow: 0 14px 34px rgba(20, 28, 51, 0.09); transform: translateY(-6px); }
.card:hover .card__art img { transform: scale(1.05); }

.plist__item { transition: box-shadow var(--t-base), transform var(--t-base); position: relative; }
.plist__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--aqua); opacity: 0; transition: opacity var(--t-base); }
.plist__item:hover { box-shadow: 0 12px 30px rgba(20, 28, 51, 0.08); transform: translateY(-3px); }
.plist__item:hover::before { opacity: 1; }

.pill { transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.pill:hover { box-shadow: 0 10px 24px rgba(18, 55, 185, 0.22); transform: translateY(-2px); }

.acc summary::after, .faq summary::after { color: var(--aqua-ink); transition: transform var(--t-base), color var(--t-base); }
details[open] > summary::after { transform: rotate(45deg); }


/* The hero image drifts very slowly so the first screen is never completely still. */
@keyframes heroDrift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.2%, -1%, 0); } }
.hero__img { animation: heroDrift 26s ease-in-out infinite alternate; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .hero__img { animation: none; } }


/* The one large block of solid colour on most pages carries the accent too, which is
   where the extra vibrancy actually shows rather than in hairlines. White on the darkest
   stop of this gradient is 9.2:1 and on the lightest 6.4:1, so the copy stays AA at any
   point across it. */
.cta-band { background: linear-gradient(115deg, var(--blue-deep) 0%, var(--blue) 45%, #0b6f9e 100%); }

/* About and Treatments stayed almost entirely white after the accent went in, because
   neither carries a panel section. The page header runs across every inner page, so
   tinting it lifts the whole site at once, and the pull-quote band picks up the rest of
   About. Ink on the palest stop of this wash measures 12.9:1. */
.page-head { background: var(--aqua-wash); }
.statement { background: var(--aqua-wash); }

/* The footer ran 4, 4, 1 and 9 links across its columns, so two sat almost empty while
   Resources ran three times the depth of anything beside it. Regrouped to 4, 4, 5, 4,
   with the one-item social column folded up beside the logo. */
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.footer__reach { display: flex; flex-wrap: wrap; gap: 1.75rem; font-size: var(--fs-14); }

/* ---------- About page ---------- */
.about-open { padding-block: clamp(3rem, 5.5vw, 4.5rem) clamp(2rem, 3.5vw, 3rem); text-align: center; }
.about-open .kicker { justify-content: center; text-align: center; }
.about-open__lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 4.4vw, 3.9rem);
  line-height: 1.12; letter-spacing: -0.02em; max-width: 30ch; margin: 1.25rem auto 0; color: var(--blue); text-wrap: balance; }
.about-open__sub { max-width: 62ch; margin: 1.25rem auto 0; font-size: var(--fs-18); line-height: 1.65; }

.bleed--tall { height: clamp(16rem, 32vw, 24rem); }

/* The old page ran three identical 505/617 splits in a row. A wider copy column and a
   narrower image, flipped on the second one, gives the page a rhythm. */
@media (min-width: 64em) { .svc--wide { grid-template-columns: 1.15fr 0.85fr; gap: 4.5rem; align-items: center; } }

.centre-kicker { justify-content: center; text-align: center; }
.centre-h { text-align: center; margin-top: 0.75rem; }

/* Four commitments were 13 to 15px headings stacked in a column beside a photograph,
   the smallest type on the page carrying its most persuasive content. */
.pcards { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 52em) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.pcard { background: var(--aqua-wash); border-radius: 1.75rem; padding: 2.25rem 2rem;
  display: grid; gap: 0.75rem; align-content: start; transition: transform var(--t-base), box-shadow var(--t-base); }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(20, 28, 51, 0.08); }
.pcard__n { font-family: var(--font-display); font-size: var(--fs-24); color: var(--aqua-ink); line-height: 1; }
.pcard h3 { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 500; letter-spacing: -0.01em; color: var(--blue); }
.pcard p { font-size: var(--fs-14); line-height: 1.65; margin: 0; }

.statement--tight { padding-block: clamp(3.5rem, 7vw, 6rem); text-align: center; }
.statement--tight .statement__quote { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--blue); max-width: 34ch; margin: 0 auto; text-wrap: balance; }
.statement--tight .statement__by { margin-top: 1.25rem; font-size: var(--fs-13); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--aqua-ink); }

.clinician { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 64em) { .clinician { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; } }
/* Was a dashed box reading "portrait goes here", which the public could see. It now styles
   a real photograph, and the block drops to one column when there is none. */
.clinician__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.75rem; }
.clinician--nophoto { grid-template-columns: 1fr; max-width: 46rem; }
@media (min-width: 64em) { .clinician--nophoto { grid-template-columns: 1fr; } }
.clinician__copy .small { color: var(--aqua-ink); }

/* Trims the About page's own rhythm without touching the shared section scale. */
.about-open + .bleed--tall { margin-top: 0; }
.pcards { margin-top: 2rem; }
.pcard { padding: 1.9rem 1.75rem; }
.clinician__photo { aspect-ratio: 1 / 1; }

/* The summaries ran from one line to seven, so the link sat at a different height in every
   card. The name reserves two lines, the summary is clamped to three, and the link is
   pushed to the bottom, which lines all four up. */
.card__link { margin-top: auto; padding-top: 1.25rem; }

/* The 50% deposit was disclosed only in the side panel, which on mobile sat at 1120px,
   below the fold and after all four questions. Someone answered the lot before learning
   money was involved. This states it before they start, and says what is not happening
   yet, which is the part that was missing entirely. */
.booknote { max-width: 62ch; margin: 0 0 2.5rem; padding: 1.1rem 1.35rem; font-size: var(--fs-14);
  line-height: 1.6; background: var(--aqua-wash); border-radius: 1.25rem; }
.booknote strong { font-weight: 700; }

/* ---------- page atmosphere ----------
   Gradients alone read flat however far the opacity is pushed; what stops a long page
   feeling plain is light and dark alternating down it. Three layers here: a fixed bloom
   behind everything, a tint on alternate content sections, and the pull-quote inverted so
   each page that has one gets a dark moment mid-scroll.

   Brand blue measures 1.83:1 on the ink ground, so nothing blue survives inside a dark
   section. White is 16.89:1 and the aqua accent 6.96:1, and both are used instead. */

body { position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(105% 72% at 90% -6%, rgba(0, 184, 196, 0.22) 0%, rgba(18, 55, 185, 0.12) 36%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(85% 55% at 0% 102%, rgba(18, 55, 185, 0.10) 0%, rgba(255, 255, 255, 0) 60%);
}

/* Alternate the content sections only. Anything that already carries its own ground is
   excluded, or it would be tinted twice. */
.section:nth-of-type(even):not(.section--panel):not(.cta-band):not(.about-open):not(.hero) {
  background: linear-gradient(135deg, rgba(238, 241, 251, 0.72) 0%, rgba(230, 247, 249, 0.72) 100%);
}

.statement { background: var(--ink); }
.statement h2, .statement .h-display, .statement .statement__quote { color: #fff; }
.statement .statement__by { color: var(--aqua); }

/* The sign-off band. Same ink ground as the pull-quote, so the same rule applies: nothing
   blue inside it, white at 16.89:1 and the aqua accent at 6.96:1 instead. */
.dark-band { background: var(--ink); color: #fff; padding: clamp(3rem, 5vw, 4.5rem) 0; }
/* Copy hard left and the button hard right left a wide void between them, so the action
   read as an afterthought rather than the point of the band. Centred and stacked, with the
   button directly under the line that asks for it. */
.dark-band .container { display: grid; gap: 1.25rem; justify-items: center; text-align: center; }
.dark-band .pill { margin-top: 0.5rem; }
.dark-band h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, var(--fs-36)); color: #fff; }
.dark-band p { margin-top: 0.6rem; font-size: var(--fs-14); color: #fff; opacity: 0.88; max-width: 46ch; margin-inline: auto; }
.dark-band .dark-band__kicker { margin: 0 0 0.6rem; font-size: var(--fs-13); letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua); opacity: 1; }

/* ---------- add-on detail ----------
   The page was a small drawn card adrift in a tinted panel beside a short column of
   collapsed accordions, so most of it was empty. Everything below is filled from data the
   site already holds: what the nutrient contributes to, and which infusions contain it. */
.ahead { max-width: 46rem; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 0.75rem; }
.ahead .kicker { justify-content: center; }
.ahead__role { font-size: var(--fs-18); line-height: 1.6; max-width: 34em; }
/* Price and caption sat on one line, so the line centred but the figure itself did not.
   Stacked, which puts the price on the centre axis with the caption under it. */
.ahead__price { font-family: var(--font-display); font-size: clamp(2.2rem, 3.8vw, 3.1rem); line-height: 1;
  color: var(--blue); margin-top: 0.75rem; display: grid; justify-items: center; gap: 0.4rem; }
.ahead__price span { display: block; font-family: var(--font); font-size: var(--fs-14);
  color: var(--ink); opacity: 0.75; letter-spacing: 0.01em; }
.ahead .pill { margin-top: 0.75rem; }

/* Suggested add-ons with Laura's reason under each one. A name-and-price row cannot carry
   a sentence, so the pairs become a list: name and price on the baseline, the reason
   beneath in the smaller size, a hairline between rows. */
.pairs { list-style: none; margin: 0.25rem 0 1.25rem; padding: 0; display: grid; }
.pairs__item { padding: 0.9rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.35rem; }
.pairs__item:first-child { border-top: 0; padding-top: 0.25rem; }
.pairs__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  margin: 0; font-size: var(--fs-18); }
.pairs__head .ulink { font-weight: 500; }
.pairs__price { margin-left: auto; color: var(--blue); font-weight: 600; }
.pairs__best { font-size: var(--fs-12); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--aqua-ink); border: 1px solid currentColor; border-radius: 999px;
  padding: 0.15rem 0.6rem; line-height: 1.4; }
.pairs__why { margin: 0; font-size: var(--fs-14); line-height: 1.55; max-width: 60ch;
  opacity: 0.85; text-wrap: pretty; }

/* Her sign-off, which closes the "Why choose Revive" copy in the source document the same
   way it closes this column. Sits between the prose and the utility link, with a short
   rule to separate it from the paragraph above rather than a heading. */
.strapline, .svc__copy .strapline { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15; color: var(--blue); letter-spacing: -0.01em;
  margin-top: 1.75rem; margin-bottom: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* ---------- treatment detail ----------
   The photograph took two thirds of the hero and squeezed the copy into a third-width
   column, so the reading matter ran narrow while the page ran long. The header now leads
   with type across the full width and the detail accordion gets a wide centred column. */
.thead { max-width: 48rem; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 0.85rem; }
.thead .tiny { margin: 0; }
.thead__tag { text-wrap: balance; font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--aqua-ink); }
.thead__lede { font-size: var(--fs-18); line-height: 1.6; max-width: 38em; text-wrap: pretty; }
.thead .pill { margin-top: 0.5rem; }

/* Course prices under the single price: quiet, so the single price stays the headline, but
   present at the point someone is deciding rather than only in a table of its own. */
.thead__course { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0.4rem 1.25rem; font-size: var(--fs-14); margin-top: -0.25rem; }
/* Opacity on the span made a stacking context the price inside could not opt out of, so
   the blue was washed to #477ab0 and missed 4.5:1. A muted colour does the same job and
   leaves the price at full strength. */
.thead__course span { color: #4a5068; }
.thead__course b { font-weight: 600; color: var(--blue); margin-left: 0.3rem; }
.tdetail .acc { max-width: 60rem; margin-inline: auto; }
.tdetail .acc summary { font-size: var(--fs-24); font-weight: 500; padding: 1.25rem 0; }
.tdetail .acc summary::after { border: 0; width: auto; height: auto; font-size: 1.6rem; }
/* The summary rules run the full 60rem but the body is capped at a readable measure, so
   it hung left with a third of the row empty beside it. Centred under the rule instead,
   which also puts it on the same axis as the centred header above. */
/* Text lines up under its heading (6 Oct); it was a centred block of left-aligned text, which read as an odd indent. */
.tdetail .acc .acc__body { max-width: 68ch; margin-inline: 0; font-size: var(--fs-14); }

.afacts { display: grid; gap: 1.25rem; max-width: 62rem; margin: 0 auto; }
@media (min-width: 48em) { .afacts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.afact { background: var(--aqua-wash); border-radius: 1.75rem; padding: 1.9rem 1.5rem; text-align: center; display: grid; gap: 0.3rem; align-content: start; }
.afact__k { font-size: var(--fs-13); letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua-ink); margin: 0; }
.afact__v { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; color: var(--blue); margin: 0.2rem 0 0; }
.afact__v--sm { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.afact__n { font-size: var(--fs-14); margin: 0; opacity: 0.8; }

.tick { display: grid; gap: 0.5rem; margin: 0.75rem auto 0; padding: 0; list-style: none; max-width: 34em; text-align: left; }
.tick li { font-size: var(--fs-14); }
.tick li::before { content: "— "; color: var(--aqua-ink); }

/* .centre-block centres the block but leaves its text at start, so the heading and the
   label sat on the left edge while the tick list, which has its own narrower measure and
   auto margins, floated in the middle. On the add-on pages everything above this section
   is centred, so the section follows it: contents on the centre axis, list items still
   ranged left inside their own block for reading. */
.abox { text-align: center; justify-items: center; }
.abox .tick { text-align: left; justify-self: center; }
.abox .b { margin-bottom: 0; }

/* What the nutrient does was buried mid-page in a small bold label and a list of dashes.
   It is the thing someone is on the page to read, so it now sits immediately under the
   name at a size that cannot be missed. Only 4 of the 11 add-ons carry the "Contributes
   to x, y and z" shape; the other 7 have a plain sentence, which gets the same
   prominence as a single large line instead of tiles. */
.contrib__grid { display: grid; gap: 1rem; max-width: 66rem; margin: 1.25rem auto 0; padding: 0; list-style: none; justify-content: center; }
@media (min-width: 40em) { .contrib__grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem; } }
.contrib__item { background: var(--aqua-wash); border-radius: 1.75rem; padding: 2rem 1.5rem;
  text-align: center; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--blue);
  display: grid; place-items: center; min-height: 7.5rem; }
.contrib__lede { max-width: 42rem; margin: 1.25rem auto 0; text-align: center;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.3; letter-spacing: -0.015em; color: var(--blue); }

/* Each tile is a link now, so it needs to say so and to lift like everything else. */
.shot { display: grid; gap: 0.35rem; position: relative; text-decoration: none; color: inherit;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.shot:hover { border-color: var(--aqua); box-shadow: 0 12px 30px rgba(20, 28, 51, 0.09); transform: translateY(-3px); }
.shot__go { position: absolute; top: 1rem; right: 1.1rem; width: 0.85rem; height: 0.85rem;
  color: var(--aqua-ink); opacity: 0; transition: opacity var(--t-base); }
.shot:hover .shot__go, .shot:focus-visible .shot__go { opacity: 1; }

/* The meta line read "Core Wellness Infusions · 45 to 60 minutes" in bold blue, which
   wrapped mid-phrase in most cards, competed with the name above it, and repeated the
   section heading directly above every card. The category is gone, and the price, which
   was only legible in the small drawn label, now leads. Neither part can wrap. */
.plist__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.7rem; margin: 0; }
.plist__meta { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 500;
  line-height: 1.1; letter-spacing: -0.01em; color: var(--blue); white-space: nowrap; }
.plist__meta span { font-family: var(--font); font-size: var(--fs-13); font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--aqua-ink); white-space: nowrap; }
.plist__body .small { margin-top: 0.6rem; }

/* The three steps between clicking Book and actually being booked lived only on the thanks
   page, which a visitor reaches after committing. They now sit above the form. */
.bsteps { display: grid; gap: 0.9rem; max-width: 62rem; margin: 0 0 2.5rem; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 52em) { .bsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.bsteps li { display: grid; gap: 0.4rem; padding: 1.1rem 1.25rem; border-radius: 1.25rem; background: var(--aqua-wash); align-content: start; }
.bsteps__n { font-family: var(--font-display); font-size: var(--fs-20); line-height: 1; color: var(--aqua-ink); }
.bsteps p { margin: 0; font-size: var(--fs-14); line-height: 1.55; }
.bsteps strong { font-weight: 700; }
/* On a phone the three steps stacked as three cards and pushed the first question 1,221px
   down the page. The words stay; the cards go, and the number sits beside the line rather
   than above it. */
@media (max-width: 51.99em) {
  .bsteps { gap: 1.1rem; margin-bottom: 1.5rem; }
  .bsteps li { grid-template-columns: auto 1fr; gap: 0.6rem; padding: 0; background: none; align-items: baseline; }
  .bsteps__n { font-size: var(--fs-14); font-weight: 600; }
  .bsteps p { font-size: var(--fs-13); line-height: 1.5; }
  .booknote { margin-bottom: 1.5rem; padding: 0.9rem 1.1rem; }
}

/* The sign-off band is the most repeated CTA on the site, on 56 pages, and carried nothing
   to trust. These are the service's own standing facts, not testimonials: there are none
   yet. White on the ink ground measures 16.9:1. */
.dark-band__proof { display: grid; gap: 0.5rem 2rem; margin: 1.5rem 0 0; padding: 0; list-style: none;
  font-size: var(--fs-13); color: #fff; opacity: 0.85; }
@media (min-width: 52em) { .dark-band__proof { grid-auto-flow: column; justify-content: center; } }
.dark-band__proof li { position: relative; padding-left: 1.1rem; }
.dark-band__proof li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px;
  border-radius: 999px; background: var(--aqua); }

/* Two consents, not four and not one: the three documents share a tick, and the clinical
   acknowledgement keeps its own, because it is an acknowledgement rather than acceptance
   of terms. */


/* ============================================================================
   Colour and motion, blue only.

   Her document specifies exactly two colours, white #FFFFFF and royal blue
   #0a4d96, so none of this introduces a third. Measured before it went in: the
   page opener was plain white on 53 of the 74 pages, which is why an inner page
   read as colourless until the navy band at the very bottom.

   Every keyframe below is prefixed rv-. site.css already owns "rise", "settle",
   "fadein", "panelIn" and "heroDrift", and reusing one of those names silently
   hijacks the element it belongs to.
   ========================================================================= */

/* Pages open in blue. Three different openers exist: .page-head on 21 pages,
   .phero on the 31 treatment and add-on pages, and .about-open. The 20 nutrient
   pages already carry a wash through --aqua-wash and are deliberately left. */
.page-head { background: linear-gradient(180deg, #dfe9f6 0%, #eef3fa 58%, #fff 100%); }
.page-head--band { background: linear-gradient(180deg, #dbe6f4 0%, #eaf0f8 62%, #fff 100%); }
.phero { background: linear-gradient(180deg, #dfe9f6 0%, #eef3fa 62%, #fff 100%); }
.about-open { background: linear-gradient(180deg, #dfe9f6 0%, #eef3fa 58%, #fff 100%); }

/* Fluid travelling down the line: the divider that introduces the navy band.
   The one motif on the site that comes from the thing being sold. */
.drip { display: grid; place-items: center; padding: 3.25rem 0 3.5rem; }
.drip__cap { width: 10px; height: 10px; border: 2px solid var(--blue); border-radius: 50%; background: #fff; }
.drip__line { position: relative; width: 2px; height: 150px; background: var(--blue-pale); border-radius: 2px; overflow: hidden; }
.drip__line::after { content: ""; position: absolute; left: -1px; width: 4px; height: 40px; border-radius: 4px;
  background: linear-gradient(180deg, transparent, var(--blue) 45%, #4b8fd6 62%, transparent);
  animation: rv-drip 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes rv-drip { 0% { top: -44px; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { top: 160px; opacity: 0; } }

/* Bubbles rising in the two dark surfaces. Both are the ink navy with white on
   them, so there is contrast to spare: measured, the band heading goes 16.89:1
   to 10.49:1 and the footer's dimmest text 16.89:1 to 10.13:1, against a 4.5:1
   requirement. The elements are injected by site.js because they are purely
   decorative and do not belong in the markup. */
.dark-band, .footer { position: relative; overflow: hidden; }
.dark-band > .container, .footer > .container { position: relative; z-index: 2; }
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.bubbles i { position: absolute; bottom: -6%; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.42), rgba(255,255,255,0.10) 62%, rgba(255,255,255,0) 74%);
  opacity: 0; animation: rv-bubble var(--d) linear var(--delay) infinite; }
@keyframes rv-bubble { 0% { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0; } 14% { opacity: var(--o); }
  86% { opacity: var(--o); } 100% { transform: translate3d(var(--sway), calc(var(--rise, 340px) * -1), 0) scale(1.08); opacity: 0; } }

/* Rules draw themselves in blue as they arrive. Gated on html.js so that without
   the script every rule is simply the solid blue line it has always been, rather
   than an empty grey one that never fills. */
html.js hr.rule { position: relative; height: 1px; border-top-color: transparent; background: var(--line); overflow: hidden; }
html.js hr.rule::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--blue);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
html.js hr.rule.is-drawn::after { width: 100%; }
html.js hr.rule--soft { background: var(--line); }
html.js hr.rule--soft::after { background: var(--blue-pale); }

/* An oversized drip bag in line, very pale, off the right edge of one section.
   Adds blue and a sense of scale without a background effect. */
.mark-host { position: relative; overflow: hidden; }
.mark-host > .container { position: relative; z-index: 1; }
.mark-host__art { position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  width: clamp(190px, 26vw, 330px); height: auto; opacity: 0.07; color: var(--blue); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .drip__line::after { animation: none; top: 55px; }
  .bubbles { display: none; }
  html.js hr.rule::after { transition: none; width: 100%; }
}


/* The email and telephone on the home page itself. The band under the hero already
   exists and is styled, so this is one line inside it rather than a new surface. */
.assurance__reach { margin: 0.6rem auto 0; text-align: center; font-size: var(--fs-14); color: var(--ink); }
.assurance__reach a { white-space: nowrap; }

/* 1.1 asks for a larger mark. A sharper file was not supplied, so only the size moves. */
.brand img { height: 2.6rem; }


/* "Recharge Refuel Revive" is a strapline under the headline, not a caption. At 15px
   it measured 3.92:1 on a phone, under the 4.5:1 small text needs over a photograph;
   set as a strapline it is large text, which needs 3.0:1, and it reads as intended. */
.hero__note { font-size: clamp(1.5rem, 2.4vw, 1.75rem); letter-spacing: 0.06em; opacity: 1; }


/* Vitamin C is supplied at three strengths. They sit inside the price fact that
   already exists rather than becoming three separate add-ons, which would break the
   eleven pairings and the nutrient cross-links that key on the one slug. */
.afact__tiers { list-style: none; margin: 0.75rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.35rem; }
.afact__tiers li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-14); }
.afact__tiers b { font-weight: 600; color: var(--blue); }


/* The second booking note carries the email and telephone route. It is the same
   component, quieter, so the first note keeps its emphasis. */
.booknote--alt { background: none; border: 1px solid var(--line); }


/* The group note sits under its list, in the footnote style the site already uses. */
.tier-block__note { margin-top: 1rem; max-width: 46rem; }

/* 7.1 "What Our Clients Say". Four across on a desktop, two on a tablet, one on a phone. */
.says { display: grid; gap: 1.75rem; margin-top: 2.75rem; list-style: none; padding: 0; }
@media (min-width: 48em) { .says { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } }
@media (min-width: 64em) { .says { grid-template-columns: repeat(4, 1fr); } }
.says__item { display: grid; gap: .6rem; align-content: start; border-top: 1px solid var(--blue-pale); padding-top: 1.1rem; }
.says__stars { color: var(--blue); letter-spacing: .14em; font-size: var(--fs-18); }
.says blockquote { margin: 0; }
.says blockquote p { font-size: var(--fs-18); line-height: 1.5; }
.says .attrib { font-size: var(--fs-16); color: var(--blue-deep); display: grid; }
.says .attrib span { color: var(--ink); opacity: .65; }

/* An unpriced treatment reads "Price at consultation", a sentence in a slot built for a
   figure. The figure styles are nowrap and sized for "£180", so it overflowed the card. */
.card__price--quote, .plist__meta--quote, .ahead__price--quote { white-space: normal; letter-spacing: 0; }
.card__price--quote { font-size: var(--fs-18); font-weight: 600; line-height: 1.25; }
.plist__meta--quote { font-size: var(--fs-18); line-height: 1.3; }
.ahead__price--quote { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }

/* The top bar was reading as two ragged lines: nothing held "Add-ons", "Our Services",
   "B12 Shot", "About Us" and "Contact Us" on one line, and the links carried uneven side
   padding (1rem left against 0.25rem right), so the labels bunched toward their chevrons.
   Below 80em the full phone number also left no room, and FAQs sat underneath it. Labels
   now hold one line with even padding, and the number keeps its icon until there is room
   for the digits — the same fallback it already used on a phone. */
.nav__link { white-space: nowrap; padding-left: 0.6rem; padding-right: 0.6rem; }
.nav { gap: 0.15rem; }
.mainbar__tel span { white-space: nowrap; }
@media (max-width: 79.99em) {
  .mainbar__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); }
}

/* Booking step 3: the time window gets its own label and her explanation above the four options. */
.timepref { display: grid; gap: .4rem; margin-top: 1rem; }
.timepref label { font-weight: 500; }
.timepref .small { margin: 0; }
/* Confirmation page: the health screening form is the next thing to do, so it sits first. */
.screenform { display: grid; gap: 1.25rem; justify-items: center; text-align: center; }

/* The 1 October menu gives every infusion a tagline, a description and an ingredient line; the
   ingredient line sits under the description, labelled, in the menu's own order. */
.thead__ing { font-size: var(--fs-14); line-height: 1.5; color: var(--ink); max-width: 38rem; margin: .25rem auto 0; }
.thead__ing span { font-weight: 600; color: var(--blue); margin-right: .4em; }

/* Add-on pages: her description under the name, and her note under a Supports list. */
.ahead__desc { max-width: 36rem; margin: .5rem auto 0; font-size: var(--fs-18); line-height: 1.5; }
.contrib__note { text-align: center; max-width: 40rem; margin: 1.25rem auto 0; }

/* A send button that has already been pressed looks it, while the request is on its way. */
form[action^="/thanks/"] button[type=submit][aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* Top bar, 6 Oct. Laura asked for a bigger, royal blue logo. The bar was squeezing the logo
   (to nothing between about 1,000 and 1,150px wide) and crowding it against the menu, so the
   logo no longer shrinks, sits nearer the left edge with more room before the menu, and the
   full menu waits for a screen wide enough to hold it: measured, the bar needs about 1,240px
   without the phone digits and 1,320px with them, so both switch a little above that. */
.mainbar .container { max-width: none; padding-left: clamp(1.25rem, 2.5vw, 2.5rem); padding-right: clamp(1.25rem, 2.5vw, 2.5rem); }
.brand { flex-shrink: 0; }
@media (min-width: 80em) { .brand { margin-right: 1rem; } }
.brand img { height: 3.25rem; }
@media (max-width: 39.99em) { .mainbar .brand img { height: 36px; } .mainbar .container { gap: 1rem; } }
@media (max-width: 22.49em) { .mainbar .brand img { height: 30px; } .mainbar .container { gap: 0.5rem; } }
@media (max-width: 79.99em) { .nav { display: none; } .burger { display: inline-flex; } .mainbar__tel { margin-left: auto; } }
@media (max-width: 83.99em) { .mainbar__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
/* The Revive logo above the home page heading, white on the dark water. 14rem is the
   artwork's own width at 2x, so it stays sharp on a retina screen. */
.hero__logo { display: block; width: 14rem; height: auto; margin: 0 auto 1.75rem; }
@media (max-width: 39.99em) { .hero__logo { width: 10rem; margin-bottom: 1.25rem; } }

/* Nutrients page, 6 Oct. It read as spaced out on a monitor: each group's title sat in a narrow
   left column beside a long one-line list, leaving most of the page empty. The title now sits
   above its nutrients, the nutrients are cards (three across on a monitor, two on a tablet, one
   on a phone), and the gaps and the title band are tighter. Scoped to this page; the shared list
   and heading styles are untouched. */
.page-head--compact { padding-top: clamp(2.5rem, 4.5vw, 4rem); padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.nutgroup + .nutgroup { margin-top: 3rem; }
.nutgroup__head { max-width: 46rem; margin-bottom: 1.25rem; }
.nutgroup__blurb { margin-top: 0.5rem; }
.nutgrid { gap: 1rem; }
/* Symmetrical boxes (Archie, 6 Oct): every box in a group is the same height, and a short last
   row sits in the middle rather than hanging left. The grid runs in half-columns (each box spans
   two) so a lone box or a pair can be centred: three across on a laptop, two on a tablet. */
@media (min-width: 40em) {
  .nutgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .nutgrid > li { grid-column: span 2; }
  .nutgrid > li:last-child:nth-child(2n+1) { grid-column: 2 / span 2; }
}
@media (min-width: 64em) {
  .nutgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
  .nutgrid > li:last-child:nth-child(2n+1) { grid-column: span 2; }
  .nutgrid > li:last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
  .nutgrid > li:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
}
.nutgrid > li, .nutgrid > li:last-child { border: 0; background: var(--aqua-wash); border-radius: 1.25rem; padding: 1.4rem 1.5rem; align-content: start; }
/* Add-on pages, 6 Oct: the two "Decided at your consultation" boxes read centred, like the
   heading above them. Only these boxes; the About page cards keep their left alignment. */
.pcards--centre .pcard { text-align: center; }

/* The DNA image (Archie, 7 Oct): darkened with a navy wash so it sits with the home page's water
   photo, and faded into the page at its edges instead of ending on a hard line. Nutrients has it
   behind the title; Our Services as a band under the title. */
.page-head--image { position: relative; overflow: hidden; background: var(--blue-deep);
  padding-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: clamp(4.5rem, 9vw, 7rem);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.page-head--image .page-head__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.page-head--image .page-head__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 26, 60, 0.74) 0%, rgba(7, 26, 60, 0.6) 100%); }
.page-head--image .container { position: relative; }
.page-head--image h1, .page-head--image p { color: #fff; }
.img-band { position: relative; overflow: hidden; height: clamp(11rem, 22vw, 18rem);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.img-band__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
.img-band::after { content: ""; position: absolute; inset: 0; background: rgba(7, 26, 60, 0.35); }

/* Infusion pages, 7 Oct: each page shows its own drip photograph, the same one its card uses on
   the home page, beside the introduction on a laptop and above it on a phone. */
.thero { display: grid; gap: 2rem; justify-items: center; }
.thero__photo { order: -1; width: min(100%, 15rem); }
.thero__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1.5rem; box-shadow: 0 18px 40px rgba(20, 28, 51, 0.12); }
@media (min-width: 64em) {
  .thero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 4rem; }
  .thero__photo { order: 0; width: 100%; max-width: 30rem; justify-self: end; }
}

/* Nutrient pages, 7 Oct (item 2 of the site review). The band: quick facts under the
   description, set as a ruled row on a laptop and a two-column list on a phone, and a bigger
   label beside them, centred on the text instead of floating at the top right. */
@media (min-width: 64em) { .nut-band .container { align-items: center; } }
.nutfacts { margin-top: 2rem; max-width: 40rem; border-top: 1px solid rgba(10, 77, 150, 0.3); border-bottom: 1px solid rgba(10, 77, 150, 0.3); }
.nutfacts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.8rem 0; }
.nutfacts > div + div { border-top: 1px solid rgba(10, 77, 150, 0.14); }
.nutfacts dt { flex: 0 0 auto; white-space: nowrap; font-size: var(--fs-12); letter-spacing: 0.09em; text-transform: uppercase; color: var(--aqua-ink); }
.nutfacts dd { margin: 0; text-align: right; font-family: var(--font-display); font-size: var(--fs-20); font-weight: 500; line-height: 1.2; color: var(--ink); }
@media (min-width: 40em) {
  .nutfacts { display: flex; max-width: 48rem; }
  .nutfacts > div { display: block; flex: 1 1 auto; padding: 0.9rem 1.5rem; }
  .nutfacts > div:first-child { padding-left: 0; }
  .nutfacts > div + div { border-top: 0; border-left: 1px solid rgba(10, 77, 150, 0.14); }
  .nutfacts > div + div dd { white-space: nowrap; }
  .nutfacts dd { margin-top: 0.3rem; text-align: left; font-size: 1.4rem; }
}
.nut-band .label-card--lg { width: min(15rem, 100%); background: #fff; border-color: rgba(10, 77, 150, 0.16);
  box-shadow: 0 22px 48px -26px rgba(10, 77, 150, 0.45); }
.nut-band .label-card--lg .label-card__mark svg { width: 88%; opacity: 0.08; }
.label-card__foot { width: 100%; margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid var(--line);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 64em) { .nut-band .label-card--lg { width: 16rem; padding: 2.25rem 1.6rem; } }
@media (min-width: 80em) {
  .nut-band .label-card--lg { width: 19rem; min-height: 20rem; align-content: center; padding: 2.5rem 1.9rem; gap: 0.7rem; }
  .nut-band .label-card--lg .label-card__name { font-size: 2.6rem; }
  .nut-band .label-card__foot { margin-top: 1.4rem; }
}

/* "Can be found in": each infusion's photo on its card. Beside the title on a phone, down the
   left of the card from a small tablet up. */
.found-in__item--photo { grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: 1rem; align-items: center;
  grid-template-areas: "img title" "body body" "rule rule" "link link"; }
.found-in__item--photo > picture, .found-in__item--photo > .found-in__img--drawn { grid-area: img; display: block; }
.found-in__item--photo > h3 { grid-area: title; }
.found-in__item--photo > p { grid-area: body; }
.found-in__item--photo > .rule { grid-area: rule; }
.found-in__item--photo > .ulink { grid-area: link; }
.found-in__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.9rem;
  box-shadow: 0 12px 26px -16px rgba(10, 77, 150, 0.55); }
.found-in__img--drawn { color: var(--blue); background: var(--panel); padding: 0.75rem; }
@media (min-width: 40em) {
  .found-in__item--photo { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1.75rem; align-items: start;
    grid-template-areas: "img title" "img body" "img rule" "img link"; grid-template-rows: auto auto auto 1fr; }
  .found-in__img { border-radius: 1.1rem; }
}

/* A nutrient sold only as an add-on: the add-on itself, with its price, instead of one line. */
.footnote.nut-note { padding: 0; margin-top: 2rem; }
.nut-addon { display: flex; align-items: center; gap: 1.5rem; max-width: 34rem; margin: 1.75rem auto 0; padding: 1.5rem 1.75rem;
  background: #fff; border: 1px solid rgba(10, 77, 150, 0.14); border-radius: 1.5rem; box-shadow: 0 18px 40px -28px rgba(10, 77, 150, 0.5); }
.nut-addon h3 { font-family: var(--font-display); font-size: var(--fs-30); font-weight: 300; line-height: 1.1; }
.nut-addon__price { margin-top: 0.35rem; font-weight: 700; color: var(--blue); }
.nut-addon__price span { font-weight: 400; font-size: var(--fs-14); color: var(--ink); }
.nut-addon .ulink { display: inline-block; margin-top: 0.75rem; font-size: var(--fs-14); }
@media (max-width: 39.99em) { .nut-addon .label-card { display: none; } .nut-addon { padding: 1.25rem 1.4rem; } }

/* The disclaimer: a narrow footnote under the content rather than a 170-character line. */
.footnote.nut-disclaimer { max-width: 38rem; margin: 3rem auto 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(10, 77, 150, 0.14); }

/* The end of the page: the rest of the group, then the booking button. This is the page's
   tinted panel, so the pale drip-bag mark lands here, clear of the disclaimer. */
.nut-more .centre-h { margin-top: 0; }
/* Below laptop width the centred heading and names fill the section, so there is no clear
   place for the mark; it is left out there rather than drawn behind the text. */
@media (max-width: 63.99em) { .nut-more .mark-host__art { display: none; } }
.nut-more__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; max-width: 50rem; margin: 2rem auto 0; padding: 0; list-style: none; }
.nut-more__list a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.55rem 1.4rem; border-radius: 999px;
  background: #fff; border: 1px solid rgba(10, 77, 150, 0.18); color: var(--blue); font-size: var(--fs-14);
  transition: border-color var(--t-base), background var(--t-base); }
/* Seven names split four and three rather than six and one left alone. */
.nut-more__list--narrow { max-width: 32rem; }
.nut-more__list a:hover { border-color: var(--blue); background: var(--blue-pale); }
.nut-more__cta { margin-top: 2.5rem; text-align: center; }

/* Group bookings, 7 Oct (item 3): the sign-off box under "Plan your group experience" becomes
   a photograph. Its words stay, over the calm sky at the top, on a soft white fade so they
   read on any part of the photo. */
.plan-tile--photo { position: relative; overflow: hidden; padding: 0; aspect-ratio: 3 / 2; align-content: start; }
.plan-tile--photo > picture { position: absolute; inset: 0; }
.plan-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.plan-tile--photo::before { content: ""; position: absolute; inset: 0 0 auto; height: 48%; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(255, 255, 255, 0) 100%); }
.plan-tile__words { position: relative; z-index: 2; display: grid; gap: 0.5rem; justify-items: center; padding: 2rem 1.5rem 0; }
@media (max-width: 39.99em) { .plan-tile--photo { aspect-ratio: 4 / 3; } .plan-tile__words { padding-top: 1.4rem; } }

/* B12 Shot, 7 Oct (item 4): the space beside "A separate treatment" was empty, so the photo
   sits there: text left and photo right on a laptop, the photo above the text on a phone.
   The pale drip-bag mark would land behind the photo, so it is left out of this section. */
.b12-split { display: grid; gap: 2.5rem; justify-items: center; }
.b12-split__photo { order: -1; width: min(100%, 20rem); }
.b12-split__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 70%;
  border-radius: 1.5rem; box-shadow: 0 18px 40px rgba(20, 28, 51, 0.12); }
@media (min-width: 64em) {
  .b12-split { max-width: 76rem; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); align-items: center; gap: 4rem; }
  .b12-split > .centre-block { margin: 0; max-width: none; }
  .b12-split__photo { order: 0; width: 100%; }
}
.mark-host:has(.b12-split) .mark-host__art { display: none; }

/* Packages and Service area, 7 Oct (Archie): no pale drip-bag drawing behind the price tables. */
.pk-prices .mark-host__art, .sa-travel .mark-host__art { display: none; }

/* Service area, 7 Oct: the lounge photo fills the empty space under "Locations we regularly serve". */
.sa-photo { display: block; width: 100%; max-width: 28rem; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 2rem;
  border-radius: 1.5rem; box-shadow: 0 18px 40px rgba(20, 28, 51, 0.12); }

/* Our Services, 7 Oct (option B): a photo at the top of each service box, inside its padding
   with the same rounded corners, in place of the DNA strip that sat above the boxes. */
.stile--photo { grid-template-rows: auto auto 1fr auto; padding-top: 1.5rem; }
.stile__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1.25rem; margin-bottom: 0.75rem; }

/* Booking page, 7 Oct (fixes 1 to 4): the two notes become one box, centred under the centred
   heading, with a short divider between them; the email and phone line no longer breaks
   mid-phrase ("or / telephone on"); and the three steps centre under the box. Same words. */
.booknotes { max-width: 44rem; margin: 0 auto 2.5rem; padding: 1.4rem 2rem; border-radius: 1.25rem; background: var(--aqua-wash); text-align: center; }
.booknotes .booknote { max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.booknotes .booknote--alt { margin-top: 1rem; }
.booknotes .booknote--alt::before { content: ""; display: block; width: 60%; margin: 0 auto 1rem; border-top: 1px solid rgba(10, 77, 150, 0.18); }
.booknotes__keep { white-space: nowrap; }
@media (min-width: 24em) { .booknotes__email { white-space: nowrap; } }
.booknotes + .bsteps { max-width: 56rem; margin-left: auto; margin-right: auto; }
@media (max-width: 51.99em) { .booknotes { margin-bottom: 1.5rem; padding: 1.1rem 1.2rem; } }

/* Booking page, 7 Oct (Archie): once an infusion is picked, a bar at the foot of the screen
   names it with its price and a Next that does what Continue does. Below the header and the
   phone menu, above the page; clear of the phone's home bar. */
.pickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff;
  border-top: 1px solid rgba(10, 77, 150, 0.12); box-shadow: 0 -12px 30px rgba(20, 28, 51, 0.14);
  padding-bottom: env(safe-area-inset-bottom); }
.pickbar[hidden] { display: none; }
.pickbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.8rem; padding-bottom: 0.8rem; }
.pickbar__txt { margin: 0; min-width: 0; }
.pickbar__k { display: block; font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua-ink); }
.pickbar__name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.pickbar__price { margin-left: 0.3rem; font-size: var(--fs-14); font-weight: 600; color: var(--blue); white-space: nowrap; }
.pickbar__next { flex: 0 0 auto; }
.pickbar__add { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; }
.pickbar__add b { font-family: var(--font); font-size: var(--fs-14); font-weight: 600; color: var(--blue); white-space: nowrap; }
.pickbar__total { flex: 0 0 auto; margin-left: auto; font-size: var(--fs-14); font-weight: 700; color: var(--blue); white-space: nowrap; }
.pickbar__total[hidden] { display: none; }
/* On a narrow phone, with add-ons ticked, the description takes the full width and the total
   sits beside Next underneath, instead of the words stacking five lines deep beside the button. */
@media (max-width: 29.99em) {
  .pickbar__in:has(.pickbar__total:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "txt txt" "total next"; row-gap: 0.35rem; column-gap: 1rem; align-items: center; }
  .pickbar__in:has(.pickbar__total:not([hidden])) .pickbar__txt { grid-area: txt; }
  .pickbar__in:has(.pickbar__total:not([hidden])) .pickbar__total { grid-area: total; margin-left: 0; }
  .pickbar__in:has(.pickbar__total:not([hidden])) .pickbar__next { grid-area: next; }
}

/* Service area, 7 Oct (Archie): the strip's Book now centred, with its line centred above it. */
.cta-strip--centre .container { flex-direction: column; justify-content: center; text-align: center; gap: 0.85rem; }

/* Phone menu, 7 Oct (Archie): its Book now picked up the menu's text-link rule (no side padding,
   24px text, a grey bottom border), so the words sat against its left edge. It gets the button's
   own look back: full width, words centred, the same size as every other Book now. */
.menu a.pill { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 3.25rem;
  padding: 0.7rem 1.75rem; border: 1px solid var(--blue); font-size: var(--fs-18); line-height: 1; }