/* =====================================================================
   SOMA Regenerative — shared design system
   Derived from Figma file 2Tbzb3Re8apAuFsPdHRKwK ("Soma Regenerative")
   Brand font is "Uber Move" (proprietary); Inter is loaded as the
   visual fallback so the layout matches when Uber Move isn't installed.
   ===================================================================== */

/* ---------- Fonts ----------
   Uber Move is the brand face from Figma, self-hosted from
   /assets/fonts (woff2, with the supplied .otf as a fallback source).
   Only Medium and Bold exist, so each face claims a weight *range*: without
   that, body copy at 400 and the 600 used on some labels would silently drop
   to the Inter fallback and the page would mix two typefaces.
     400–500 → Medium   ·   600–700 → Bold
   Inter still loads via <link> in Base.astro as the fallback during swap. */
@font-face {
  font-family: 'Uber Move';
  src: url('/assets/fonts/UberMoveMedium.woff2') format('woff2'),
       url('/assets/fonts/UberMoveMedium.otf') format('opentype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Uber Move';
  src: url('/assets/fonts/UberMoveBold.woff2') format('woff2'),
       url('/assets/fonts/UberMoveBold.otf') format('opentype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --font-sans: 'Uber Move', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Brand palette */
  --green-900: #1c2f05;   /* deep olive — brand base */
  --green-700: #2f4a12;
  --sage:      #87a07c;   /* footer eyebrow / muted accent */
  --accent:    #c1694f;   /* terracotta — accent links, announce-bar CTA.
                             Also redeclared by several page stylesheets; this
                             is the shared definition so main.css can use it. */
  --cream:     #ebecdd;   /* footer card / light section bg */
  --off-white: #f6f6f1;
  --paper:     #fffff5;   /* page background — warm off-white, not pure white */
  --plate:     #faf9f2;   /* raised card fill, a shade under --paper (sampled
                             from the Figma "Button / On Light" component) */
  --ink:       #030303;   /* near-black text */
  --ink-2:     #0a0a0a;
  --gray-400:  #d9d9d9;   /* hero secondary text / hairlines */
  --gray-500:  #6f6f6f;
  --gray-600:  #4a4a4a;

  /* Radii */
  --r-pill: 24.81px;
  --r-nav: 64px;
  --r-lg: 32px;
  --r-md: 24px;
  --r-sm: 12px;
  --r-xs: 10px;

  /* Layout */
  --page-max: 1400px;
  --gutter: 20px;

  /* Hero insets. `--hero-inset` is the distance from the window edge to the
     hero's text column, so the header can line its logo and quiz button up
     with the hero content instead of hugging the viewport edge. */
  --hero-gutter: clamp(12px, 1.4vw, 20px);   /* .hero — outer page gutter */
  --hero-pad:    clamp(24px, 3.5vw, 50px);   /* .hero__inner — inner padding */
  --hero-inset:  calc(var(--hero-gutter) + var(--hero-pad));

  --shadow-xs: 0 1px 2px 0 rgba(10, 13, 20, 0.03);
  --shadow-card: 0 20px 60px -20px rgba(28, 47, 5, 0.18);
  --shadow-btn: 0 1px 2px rgba(10,13,20,0.08);
  --shadow-pop: 0 10px 30px -12px rgba(28,47,5,0.30);

  /* Fluid type scale — smoothly interpolates between mobile and the Figma
     desktop sizes, then caps at the desktop value on wide screens so the
     1400px design stays pixel-faithful. */
  --fs-display: clamp(2rem, 1.30rem + 2.9vw, 3rem);     /* 32 → 48 */
  --fs-section: clamp(1.75rem, 1.25rem + 2.0vw, 2.5rem);  /* 28 → 40 */
  --fs-card:    clamp(1.25rem, 1.13rem + 0.55vw, 1.375rem); /* 20 → 22 */

  /* Fluid rhythm */
  --space-section: clamp(56px, 4rem + 2vw, 96px);
  --space-section-tight: clamp(44px, 3rem + 1.4vw, 64px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p { margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

/* Visually hidden but still announced — for labels on inputs whose purpose is
   carried by a placeholder, which screen readers don't reliably expose. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus — visible ring everywhere, never on mouse click */
:focus-visible {
  outline: 2px solid var(--green-900);
  outline-offset: 3px;
  border-radius: 4px;
}
:where(a, button, summary, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Page frame ----------
   `main` spans the full viewport so full-bleed image sections (hero, lab,
   science) grow edge-to-edge on big screens / when zoomed out. Text-heavy
   sections stay readable via their own `.container` max-width. */
:root { --page-frame: 1440px; }
main { width: 100%; }
/* The footer CTA carries the full-bleed cell image, so it spans the viewport
   edge-to-edge at every width. Its contents stay framed by their own
   max-widths (.footer-cta__head, .footer) rather than by a cap out here. */
.footer-cta { width: 100%; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-section-tight); }

/* Eyebrow / pill label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: var(--green-900);
}
.eyebrow--light { color: #fff; }
/* Accent eyebrow with leading dot. Seven page stylesheets each declared their
   own identical copy of this, so any page without one (e.g. /treatments) got
   an unstyled dot; shared from here instead. */
.eyebrow--accent { color: var(--accent); }
.eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); display: inline-block; flex-shrink: 0;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(28, 47, 5, 0.06);
  color: var(--green-900);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.1px;
}

/* Headings */
.h-display { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -1px; font-weight: 500; }
.h-section { font-size: var(--fs-section); line-height: 1.1; letter-spacing: -1px; font-weight: 500; }
.h-card    { font-size: var(--fs-card); line-height: 1.27; letter-spacing: -0.5px; font-weight: 500; }
.lead { font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); line-height: 1.5; color: var(--gray-600); letter-spacing: -0.1px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.4;
  transition: transform .15s ease, background-color .2s ease, opacity .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: #fff; color: var(--ink); box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: #f0f0ea; box-shadow: 0 4px 14px -4px rgba(10,13,20,0.22); }
.btn--dark { background: var(--green-900); color: #fff; box-shadow: var(--shadow-btn); }
.btn--dark:hover { background: var(--green-700); box-shadow: 0 6px 18px -6px rgba(28,47,5,0.5); }
.btn--glass { background: rgba(255,255,255,0.85); color: var(--ink); backdrop-filter: blur(21px); }
.btn--ghost { background: rgba(255,255,255,0.10); color: #fff; backdrop-filter: blur(4px); }
.btn--ghost-dark { background: rgba(28,47,5,0.06); color: var(--green-900); }
.btn--wide { min-width: 250px; }
.btn--block { width: 100%; }
.btn-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--green-900); }
.btn-link svg, .btn-link .arrow { transition: transform .15s ease; }
.btn-link:hover .arrow { transform: translateX(3px); }

/* =====================================================================
   HEADER  (overlays the top of each page's hero)
   ===================================================================== */
.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 47px;
  padding: 12px 20px;
  background: var(--paper);
  color: #000;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-align: center;
}
.announce a {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(193,105,79,0.5);
}
.announce a:hover { text-decoration-color: var(--accent); }

.site-header {
  position: absolute;
  inset-inline: 0;
  z-index: 50;
  /* side padding tracks the hero's text inset so the logo and quiz button sit
     on the same left/right margins as .hero__content */
  padding: 16px var(--hero-inset) 0;
}
.site-header__inner {
  /* full width so the logo + quiz stay pinned near the window edges (a constant
     distance set by .site-header's side padding) instead of drifting inward on
     wide screens / when zoomed out */
  max-width: none;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.site-header__logo { display: inline-flex; align-items: center; }
/* size by height + width:auto so the wordmark keeps its aspect ratio and never squishes */
.site-header__logo svg, .site-header__logo img { height: 40px; width: auto; display: block; }
.nav-pill {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 8px 16px;
  border-radius: var(--r-nav);
  background: rgba(28, 47, 5, 0.10);
  backdrop-filter: blur(6px);
}
.nav-pill a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 22px;
  opacity: .92;
  transition: opacity .15s ease;
}
.nav-pill a:hover, .nav-pill a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.site-header__cta { display: flex; align-items: center; gap: 16px; }
.nav-quiz {
  background: #fff; color: #000;
  padding: 8px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  min-width: 165px; text-align: center;
}
.nav-quiz:hover { background: #f0f0ea; }
/* Quiz link that lives inside the dropdown nav — only shown in the mobile menu */
.nav-pill__quiz { display: none; }

/* Header variant for light-background pages (in-flow, dark-on-light).
   Self-contained so any page can opt in via <Header variant="solid" />. */
.site-header--solid { position: relative; padding-top: 0; }
.site-header--solid .site-header__inner { padding-block: 14px; }
.site-header--solid .site-header__logo img { filter: brightness(0); }
.site-header--solid .nav-pill { background: rgba(28,47,5,0.06); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header--solid .nav-pill a { color: var(--ink); opacity: 1; }
.site-header--solid .nav-quiz { background: var(--green-900); color: #fff; }
.site-header--solid .nav-quiz:hover { background: var(--green-700); }
.site-header--solid .nav-toggle { background: rgba(28,47,5,0.85); }

.nav-toggle { display: none; }

/* ---------- Dynamic sticky navbar ----------
   Header.astro adds `.nav-stuck` to <html> once the page scrolls past the
   announce bar. The header then detaches into a fixed bar that animates down
   and adopts a light, solid background (recoloring its white-over-hero
   contents so they stay legible). Because the resting header is out of normal
   flow (absolute), going fixed causes no layout jump. */
.site-header { transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease; }
.nav-stuck .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  padding-top: 8px; padding-bottom: 8px;
  background: rgba(246, 246, 241, 0.85);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 rgba(28,47,5,0.06), 0 14px 30px -22px rgba(28,47,5,0.5);
  animation: navDrop .38s cubic-bezier(.2,.7,.2,1);
}
@keyframes navDrop {
  from { transform: translateY(-100%); opacity: .2; }
  to   { transform: translateY(0);     opacity: 1;  }
}
.nav-stuck .site-header__logo img { filter: brightness(0); }
.nav-stuck .nav-pill { background: rgba(28,47,5,0.06); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-stuck .nav-pill a { color: var(--ink); opacity: 1; }
.nav-stuck .nav-quiz { background: var(--green-900); color: #fff; }
.nav-stuck .nav-toggle { background: rgba(28,47,5,0.12); }
.nav-stuck .nav-toggle span,
.nav-stuck .nav-toggle span::before,
.nav-stuck .nav-toggle span::after { background: var(--green-900); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
  .nav-stuck .site-header { animation: none; }
}

/* ---------- Floating announcement ----------
   Mirrors the top announce bar. Hidden at rest; slides up from the bottom once
   the announce banner has scrolled out of view (reuses the .nav-stuck state
   that Header.astro toggles at the same threshold). */
.peptide-badge {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: min(760px, calc(100vw - 24px));
  padding: 10px 12px 10px 20px;
  border-radius: 999px;
  background: var(--green-900); color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: -0.1px; line-height: 1.35;
  text-decoration: none;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.20);
  opacity: 0; transform: translate(-50%, calc(100% + 24px));
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.nav-stuck .peptide-badge {
  opacity: 1; transform: translate(-50%, 0); pointer-events: auto;
}
.peptide-badge__cta {
  flex-shrink: 0; white-space: nowrap;
  background: var(--cream); color: var(--green-900);
  padding: 7px 15px; border-radius: 999px; font-weight: 600;
}
.peptide-badge:hover .peptide-badge__cta { background: #fff; }
@media (max-width: 560px) {
  .peptide-badge { flex-direction: column; text-align: center; border-radius: 20px; font-size: 12.5px; gap: 8px; padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .peptide-badge { transition: opacity .2s ease; transform: translate(-50%, 0); }
}

/* =====================================================================
   HERO (shared base — pages can extend)
   ===================================================================== */
.hero { padding: 0 var(--hero-gutter) clamp(16px, 2vw, 32px); }
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(40px, 6vw, 80px);
  min-height: clamp(560px, 82vh, 920px);
  padding: clamp(120px, 14vw, 180px) var(--hero-pad) clamp(24px, 2.2vw, 32px);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Full-bleed, full-height, left-aligned hero shared across pages. The doubled
   `.hero.hero--fill` selector (specificity 0,3,0) outranks each page's own
   `.<page>-hero .hero__inner` min-height override. Fills the viewport beneath
   the announce banner (--announce-h), a touch short so white space shows below. */
.hero.hero--fill .hero__inner {
  min-height: calc(94dvh - var(--announce-h, 47px));
  height: auto;                 /* clear any page-specific fixed height */
  justify-content: flex-end;    /* content sits at the bottom, like home */
  align-items: flex-start;
}
.hero.hero--fill .hero__content { align-items: flex-start; text-align: left; }
/* Eyebrow-through-buttons sits centred in the space above the callouts, which
   stay pinned to the bottom. Auto block margins absorb the free space either
   side of the text block, so `justify-content` keeps the callouts at the end. */
.hero.hero--fill .hero__inner > .hero__content { margin-block: auto; }

/* `.hero--center` — left-aligned but vertically centred, per Figma on Method
   and Treatments (the home hero stays bottom-anchored). The base hero's heavy
   top padding exists to clear the overlaid header while content sits at the
   bottom; centring needs it balanced or the block reads low. */
.hero.hero--fill.hero--center .hero__inner {
  justify-content: center;
  padding-block: clamp(140px, 16vh, 200px);
}
.hero--center .hero__heading { gap: 20px; }
/* Blog-height banners for pages without the three bottom callouts. Allow
   content to expand the card when text zoom or narrow screens require it. */
.hero.hero--compact .hero__inner {
  min-height: 557px;
  height: auto;
  justify-content: center;
  gap: 0;
  padding: 64px var(--hero-pad) 32px;
}
.hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.15); }
.hero__content { position: relative; max-width: 500px; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.hero__heading { display: flex; flex-direction: column; gap: 16px; }
.hero__title { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -1px; font-weight: 500; }
.hero__sub { font-size: 15px; line-height: 24px; color: rgba(255,255,255,.92); max-width: 420px; }
.hero__buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* Phones: heroes go full-bleed — edge-to-edge width, no rounding, flush with
   the section below (no side/bottom gutter). */
@media (max-width: 768px) {
  /* Full-bleed heroes drop the outer gutter, so the header's inset collapses
     to the hero's inner padding alone and the two still line up. */
  :root { --hero-gutter: 0px; }
  .hero { padding: 0; }
  .hero__inner { border-radius: 0; }
}

/* Hero USP row */
.usps { position: relative; display: flex; gap: 32px; flex-wrap: wrap; }
.usp { padding-right: 32px; border-right: .5px solid var(--gray-400); }
.usp:last-child { border-right: 0; }
.usp strong { display: block; font-size: 15px; font-weight: 500; color: #fff; line-height: 24px; }
.usp span { display: block; font-size: 15px; color: var(--gray-400); line-height: 24px; }

/* =====================================================================
   FAQ — one section, one style, on every page. Rendered by
   src/components/FaqSection.astro; the copy comes from src/lib/faqs.ts.
   Heading column on the left, questions on the right, hairline dividers
   between rows. This used to be reimplemented in eight page stylesheets
   under five different class names, which is how /blog and /method drifted.
   ===================================================================== */
.faq__inner {
  display: grid;
  /* the 537px comes from the track, so the head only needs a max-width — as a
     flex-basis it became the heading's *height* once the layout stacked */
  grid-template-columns: 537px 1fr;
  gap: 96px;
  align-items: start;
  max-width: var(--page-max);
}
/* Overrides the shared .sec-head (same specificity, later in the file): the
   FAQ heading is a left-aligned column, not a centred block. */
.faq__head {
  max-width: 537px;
  margin: 0;
  gap: 14px;
  text-align: left;
  align-items: flex-start;
}
.faq__lead {
  font-size: 18px; line-height: 24px; letter-spacing: -0.1px;
  color: #7e7c78;
  max-width: none;
}
.faq__list { display: flex; flex-direction: column; }

/* Rows are dividers, not cards. No rule above the first or below the last, so
   the list reads as separated rather than boxed in. */
.faq-item {
  border: 0;
  border-bottom: 1px solid rgba(28, 47, 5, 0.14);
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  font-size: 20px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
}
.faq-item:first-child summary { padding-top: 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; background: var(--ink);
  transition: opacity .2s ease, transform .2s ease;
}
.faq-item__icon::before { top: 11px; left: 4px; width: 16px; height: 2px; }
.faq-item__icon::after  { left: 11px; top: 4px; width: 2px; height: 16px; }
.faq-item[open] .faq-item__icon::after { opacity: 0; transform: rotate(90deg); }
.faq-item > p {
  padding: 0 0 24px; margin: 0;
  font-size: 15px; line-height: 24px; letter-spacing: -0.1px;
  color: var(--gray-600);
  max-width: 90%;
}
@media (max-width: 1100px) {
  .faq__inner { grid-template-columns: 1fr; gap: 40px; }
  .faq__head { max-width: 100%; }
}
@media (max-width: 620px) {
  .faq-item summary { font-size: 18px; }
  .faq-item > p { max-width: 100%; }
}

/* =====================================================================
   FOOTER  (CTA band + footer card) — identical on every page
   ===================================================================== */
/* `cta={false}`: no banner image or headline, so the section collapses to just
   the footer card and loses the padding that framed the band. */
.footer-cta--bare {
  padding-top: clamp(32px, 4vw, 56px);
  gap: 0;
  min-height: 0;
}
.footer-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 12vw, 180px);
  align-items: center;
  justify-content: flex-end;
  padding: clamp(56px, 7vw, 100px) clamp(12px, 2.2vw, 32px) clamp(12px, 2.2vw, 32px);
  overflow: hidden;
}
.footer-cta__bg { position: absolute; inset: 0; }
.footer-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.footer-cta__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.10); }
.footer-cta__head {
  position: relative;
  width: 100%;
  max-width: 1336px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-inline: clamp(16px, 2.4vw, 32px);
}
.footer-cta__title { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -1px; font-weight: 500; color: #fff; max-width: 480px; }
.footer-cta__buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-cta .btn--cta-ghost { background: rgba(255,255,255,0.30); color: var(--ink-2); backdrop-filter: blur(4px); }

.footer {
  position: relative;
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 3.2vw, 40px) clamp(28px, 3.2vw, 40px);
  border-radius: var(--r-md);
  background: var(--cream);
}
/* Figma layout: brand + disclaimer stacked on the left, link columns with the
   newsletter beneath them on the right, then a full-width legal bar. */
.footer__top { display: flex; gap: clamp(40px, 6vw, 96px); align-items: flex-start; }
.footer__brand { flex: 0 1 520px; display: flex; flex-direction: column; gap: 22px; }
/* `align-self` stops the column-flex `stretch` default from blowing the logo
   out to the full brand column width. */
.footer__logo { height: 40px; width: auto; display: block; align-self: flex-start; }
.footer__tagline { font-size: 15px; line-height: 22px; color: #000; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(28,47,5,0.06);
  transition: background .15s ease;
}
.footer__social a:hover { background: rgba(28,47,5,0.14); }
.footer__social img { width: 18px; height: 18px; }
.footer__brand .disclaimer {
  margin-top: 12px;
  font-size: 10px; line-height: 22px; color: #000; max-width: 520px;
}
.footer__brand .disclaimer b { font-weight: 700; }

.footer__right { flex: 1; display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
/* Four equal tracks with equal gutters. As a flex row the columns sized to
   their own content — Treatments holds two lists, so it came out much wider
   than Home and Learn More and `space-between` distributed what was left
   unevenly. Treatments now spans two of the four tracks. */
.footer__links {
  /* One gap value drives both this grid and the Treatments split below, so all
     four link columns land on the same rhythm. With a smaller inner gap the
     split's two columns were wider than the outer tracks and the spacing came
     out 198 / 190 / 206px instead of even. */
  --footer-col-gap: clamp(24px, 3vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--footer-col-gap);
}
.footer__col { display: flex; flex-direction: column; gap: 16px; }
/* Treatments is a single heading over two columns of links */
.footer__col--wide { grid-column: span 2; }
.footer__col ul.footer__col-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: 4px var(--footer-col-gap);
}
.footer__col h4 {
  font-size: 13px; font-weight: 500; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--sage);
}
/* The generic `.footer__col a` rule below sets black link text, which would win
   over the sage on the h4 now that the headings are links — inherit instead. */
.footer__col h4 a { color: inherit; }
.footer__col h4 a:hover { color: var(--green-900); text-decoration: underline; }
.footer__col ul { display: flex; flex-direction: column; gap: 4px; }
.footer__col a { font-size: 15px; line-height: 22px; color: #000; }
.footer__col a:hover { color: var(--green-900); text-decoration: underline; }

/* ---- Newsletter ---- */
.footer__news { display: flex; flex-direction: column; gap: 10px; }
.footer__news-eyebrow {
  font-size: 13px; font-weight: 500; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--sage);
}
.footer__news-sub { font-size: 13px; line-height: 20px; color: #000; }
.footer__news-form { display: flex; gap: 12px; margin-top: 6px; }
.footer__news-input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 15px;
  padding: 14px 22px;
  border: 1px solid rgba(3,3,3,0.55);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
}
.footer__news-input::placeholder { color: rgba(3,3,3,0.55); }
.footer__news-input:focus {
  outline: none;
  border-color: var(--green-900);
  box-shadow: 0 0 0 3px rgba(28,47,5,0.12);
}
.footer__news-btn {
  flex-shrink: 0;
  padding: 14px 34px;
  border: 0; border-radius: 999px;
  background: var(--ink); color: #fff;
  font: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.footer__news-btn:hover { background: #1c1c1c; }
.footer__news-btn:disabled { opacity: .6; cursor: default; }
.footer__news-status { font-size: 13px; line-height: 20px; color: var(--green-900); }

.footer__legal {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  font-size: 13px; line-height: 22px; color: #000;
}
.footer__legal .links { display: flex; gap: 24px; }
.footer__legal .links a:hover { text-decoration: underline; }

/* Input + button side by side needs ~420px; below that the button overflows
   the card, so stack them. */
@media (max-width: 560px) {
  .footer__news-form { flex-direction: column; }
  .footer__news-btn { width: 100%; }
}

@media (max-width: 980px) {
  .footer__top { flex-direction: column; }
  .footer__brand { flex: 1 1 auto; }
  .footer__links { justify-content: flex-start; flex-wrap: wrap; row-gap: 32px; }
  .footer__links { justify-content: flex-start; }
}

/* =====================================================================
   Generic cards / grids reused across pages
   ===================================================================== */
.card { background: var(--paper); border-radius: var(--r-sm); overflow: hidden; }
.card--cream { background: var(--cream); }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Section heading block */
.sec-head { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin-bottom: 40px; }

/* =====================================================================
   Testimonials carousel — home + every treatment page
   (Figma node 192863-974). Autoplaying, no controls: the progress bar
   under the track is the only indicator, with the count to its right.
   ===================================================================== */
.testi-head { max-width: 686px; margin-bottom: 32px; gap: 14px; }

.testi-carousel { --testi-gap: 16px; }
.testi-viewport { overflow: hidden; }
.testi-track {
  display: flex;
  gap: var(--testi-gap);
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
  cursor: grab;
  touch-action: pan-y;
}
/* Drag tracking and the wrap-around snap both need the slide to land with no
   animation; the class is removed again on the next scripted advance. */
.testi-track.is-instant { transition: none; }
.testi-track.is-grabbing { cursor: grabbing; }
.testi-track.is-grabbing .testi-card { user-select: none; }
.testi-track.is-grabbing img { pointer-events: none; }

.testi-card {
  /* two-up: each card takes half the viewport minus the gap between them */
  flex: 0 0 calc((100% - var(--testi-gap)) / 2);
  min-width: 0;
  display: flex; flex-direction: column; gap: 20px;
}
/* No card background in the design — the photo and the copy sit straight on
   the page, so only the media is rounded and clipped. */
.testi-card__media {
  position: relative;
  aspect-ratio: 680 / 346;
  border-radius: 16px;
  overflow: hidden;
}
.testi-card__media img { width: 100%; height: 100%; object-fit: cover; }
.testi-card__cat {
  position: absolute; top: 16px; left: 16px;
  min-width: 211px; max-width: calc(100% - 32px);
  height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 12px;
  font-size: 13px; line-height: 22px; font-weight: 500;
  text-transform: uppercase; white-space: nowrap;
  color: var(--paper);
  background: rgba(17, 17, 17, 0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 5px;
}
.testi-card__body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 15px 16px 16px;
}
.testi-card__name    { font-size: 18px; line-height: 31px; letter-spacing: -0.5px; font-weight: 500; color: #000; }
.testi-card__quote   { font-size: 18px; line-height: 24px; letter-spacing: -0.1px; color: #000; }
.testi-card__caption { font-size: 13px; line-height: 24px; letter-spacing: -0.1px; color: #7e7c78; }

/* Progress bar: the current slide's segment stretches, the rest stay short.
   Inset to 16px so it lines up with the card copy above it. */
.testi-bar {
  display: flex; align-items: center; gap: 9px;
  margin-top: 20px;
  padding-left: 16px;
}
.testi-bar__seg {
  height: 3px; width: 80px; border-radius: 1px;
  background: rgba(126, 124, 120, 0.5);
  transition: width .5s ease, background-color .5s ease;
}
.testi-bar__seg.is-active { width: 286px; background: #000; }
.testi-bar__count {
  margin-left: 28px;
  font-size: 12px; line-height: 22px; letter-spacing: -0.1px;
  color: #7e7c78;
}

@media (max-width: 768px) {
  /* one card at a time */
  .testi-card { flex-basis: 100%; }
  .testi-bar__seg { width: 40px; }
  .testi-bar__seg.is-active { width: 120px; }
  .testi-bar__count { margin-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  /* keep the rotation (it is the only way to see all four) but drop the slide */
  .testi-track, .testi-bar__seg { transition: none; }
}

/* ---------- Mobile nav ---------- */
@media (max-width: 900px) {
  .site-header { padding: 12px var(--hero-inset) 0; }
  /* Full-width mobile nav: the panel drops below the header — JS sets
     --nav-top to the header's bottom edge — and spans the whole viewport. */
  .nav-pill {
    display: none;
    position: fixed;
    top: var(--nav-top, 96px);
    left: 0; right: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--nav-top, 96px));
    overflow-y: auto;
    background: rgba(28,47,5,0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 22px 44px -18px rgba(0,0,0,0.55);
  }
  .nav-pill.open { display: flex; }
  .nav-pill a { color: #fff; opacity: .95; padding: 15px 14px; border-radius: 12px; line-height: 1.2; font-size: 17px; }
  .nav-pill a:hover, .nav-pill a[aria-current="page"] { background: rgba(255,255,255,0.10); text-decoration: none; opacity: 1; }
  /* The desktop "solid"/"stuck" pill rules give .nav-pill a faint translucent
     background + dark links — correct for the inline desktop pill, but on
     mobile that turns this dropdown into a near-invisible panel with dark
     text on dark. Re-assert the opaque dropdown for both states here. */
  .site-header--solid .nav-pill,
  .nav-stuck .nav-pill {
    background: rgba(28,47,5,0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .site-header--solid .nav-pill a,
  .nav-stuck .nav-pill a { color: #fff; opacity: .95; }
  .site-header--solid .nav-pill a:hover,
  .site-header--solid .nav-pill a[aria-current="page"],
  .nav-stuck .nav-pill a:hover,
  .nav-stuck .nav-pill a[aria-current="page"] { background: rgba(255,255,255,0.10); opacity: 1; }
  /* surface the quiz CTA at the bottom of the dropdown. The generic
     `.nav-pill a` / state rules set white link text (specificity 0,1,1+),
     which would win over a plain `.nav-pill__quiz`, painting this white pill's
     label white-on-white — so qualify it with `a` to keep the label dark. */
  .nav-pill a.nav-pill__quiz,
  .site-header--solid .nav-pill a.nav-pill__quiz,
  .nav-stuck .nav-pill a.nav-pill__quiz {
    display: block; margin-top: 12px; text-align: center;
    background: #fff; color: #000; font-weight: 600; opacity: 1;
    padding: 15px 14px;
  }
  .nav-pill a.nav-pill__quiz:hover,
  .site-header--solid .nav-pill a.nav-pill__quiz:hover,
  .nav-stuck .nav-pill a.nav-pill__quiz:hover { background: #f0f0ea; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(28,47,5,0.85); border: 0;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 18px; height: 2px; background: #fff; position: relative;
  }
  .nav-toggle span::before { position: absolute; top: -6px; }
  .nav-toggle span::after { position: absolute; top: 6px; }
}
@media (max-width: 600px) {
  /* below this the logo + 165px quiz button + hamburger no longer fit;
     the quiz CTA still lives in the dropdown menu */
  .site-header__cta .nav-quiz { display: none; }

  /* Keep mobile CTAs sized to their labels and allow pairs to wrap. */
  .hero__buttons,
  .footer-cta__buttons { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .hero__buttons .btn,
  .footer-cta__buttons .btn { width: auto; min-width: 0; }
}

.announce-mobile { display: none; }
@media (max-width: 768px) {
  .announce-desktop { display: none; }
  .announce-mobile { display: inline; }
  .announce { padding: 10px 8px; gap: 8px; font-size: 12px; white-space: nowrap; min-height: 38px; }
  .peptide-badge { flex-direction: row; white-space: nowrap; gap: 8px; padding: 8px 10px; font-size: 12px; border-radius: 999px; }
  .peptide-badge__cta { padding: 7px 10px; }
  .hero--portrait .usps, .tx-hero .usps { display: none; }
  .footer__links { grid-template-columns: 1fr; gap: 28px; }
  .footer__col--wide { grid-column: auto; }
  .footer__col ul.footer__col-split { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .footer__col a { white-space: nowrap; }
}

@media (max-width: 768px) {
  .btn--wide { min-width: 0; width: auto; align-self: center; }
  .footer__news-btn { width: auto; align-self: flex-start; }
}

/* Feedback review: unobtrusive progress for question requests. */
.step-pending-status{display:flex;align-items:center;gap:.6rem;font-size:.9rem;margin:.8rem 0;color:#445134}
.step-pending-status::before{content:"";width:1rem;height:1rem;border:2px solid #dce1d2;border-top-color:#24350c;border-radius:50%;animation:step-progress .7s linear infinite}
@keyframes step-progress{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.step-pending-status::before{animation:none}}
.area-result-heading{margin:1.2rem 0 .4rem}.area-result-introduction{margin:0 0 1.4rem}.area-result-detail{padding-top:1rem}.area-result-detail h5{font-size:1.1rem;margin:0 0 .5rem}.area-question-label{margin:0 0 .35rem}
@media print{.step-pending-status{display:none}}