/* ─── AnthologyRX — Brand Variables ─────────────────────────────────────── */
:root {
  --bg:          #1E1E1E;
  --bg-surface:  #242424;
  --bg-raised:   #2A2A2A;
  --border:      #333333;
  --border-subtle: #2A2A2A;

  --text:        #E8DCC8;   /* sand */
  --text-muted:  #9A8E7A;
  --text-faint:  #8C8274;

  --gold:        #C4952A;
  --gold-hover:  #D4A843;
  --gold-dim:    #8A6E1A;

  --bone:        #F2EDE4;

  --font-display: 'Unbounded', sans-serif;
  --font-body:    'Epilogue', sans-serif;

  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.8125rem,0.75rem + 0.3vw,  0.9375rem);
  --text-base: clamp(0.9375rem,0.875rem + 0.3vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,  1.375rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.2vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-hero: clamp(2.8rem,   1rem    + 6vw,     7rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content: 1200px;
  --gutter: clamp(var(--space-6), 5vw, var(--space-16));

  /* ─── Shared aliases (single source of truth) ────────────────────────────
     Inner pages historically defined their own :root blocks with divergent
     variable names. These aliases reconcile every name used across the site
     so a page can drop its local :root and still resolve every var(). */

  /* Color aliases */
  --sand:        #E8DCC8;                 /* = --text */
  --sand-dim:    #9C9082;                 /* muted sand (inner-page name) */
  --gold-h:      #D4A843;                 /* = --gold-hover (inner-page name) */
  --gold-glow:   rgba(196,149,42,0.15);   /* translucent gold wash */
  --gold-light:  rgba(196,149,42,0.15);   /* light gold alias */
  --rule:        #373430;                 /* border rule (inner-page name) */

  /* Background aliases */
  --bg-card:     #262422;                 /* = --bg-surface (inner-page name) */
  --bg-hero:     #181614;                 /* deep hero background */
  --bg-deep:     #181614;                 /* deep background alias */
  --bg-dark:     #181614;                 /* dark background alias */

  /* Layout aliases */
  --max:         1200px;                  /* = --content (inner-page name) */
  --max-w:       1200px;                  /* content max-width alias */
  --nav-h:       68px;                    /* nav height */

  /* Font aliases */
  --font-disp:   'Unbounded', sans-serif; /* = --font-display (inner-page name) */

  /* Radius aliases */
  --radius:      4px;                      /* generic radius (inner-page name) */
  --r:           3px;                      /* small radius alias */

  /* Timing aliases */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --t:           0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-top: 80px;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  min-height: 100dvh;
}
img, svg { display: block; max-width: 100%; }
ul[role="list"] { list-style: none; }
h1,h2,h3,h4 { text-wrap: balance; line-height: 1.15; }
p, li { text-wrap: pretty; max-width: 68ch; }
a { color: inherit; text-decoration: none; }
input, button, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* ─── Logo ───────────────────────────────────────────────────────────────── */
.nav-logo {
  display: flex;
  align-items: baseline;
  gap: 0;
  letter-spacing: 0.04em;
  transition: opacity var(--transition);
}
.nav-logo:hover { opacity: 0.85; }
.logo-main {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.08em;
}
.logo-rx {
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 0.45rem + 0.3vw, 0.65rem);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  position: relative;
  top: -0.4em;
  margin-left: 0.1em;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
/* Single canonical gold button — use class="btn btn--gold" everywhere */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Unbounded', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.btn--gold { background: var(--gold); color: var(--bg); }
.btn--gold:hover { background: var(--gold-hover); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn--outline:hover { border-color: var(--gold); color: var(--gold); }

/* Aliases — legacy class names map to canonical styles */
.btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); font-family: 'Unbounded', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 30px; border-radius: var(--radius-sm); transition: background var(--transition), transform var(--transition); white-space: nowrap; cursor: pointer; border: none; text-decoration: none; background: var(--gold); color: var(--bg); }
.btn-primary:hover { background: var(--gold-hover); transform: translateY(-1px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
  white-space: nowrap;
}
.btn-ghost:hover { color: var(--text); }

.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.btn-ghost-sm:hover { color: var(--gold-hover); border-color: var(--gold-hover); }

/* btn-gold alias — legacy treatment card class, maps to canonical */
.btn-gold { display: inline-flex; align-items: center; gap: var(--space-2); font-family: 'Unbounded', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 30px; border-radius: var(--radius-sm); transition: background var(--transition), transform var(--transition); white-space: nowrap; cursor: pointer; border: none; text-decoration: none; background: var(--gold); color: var(--bg); }
.btn-gold:hover { background: var(--gold-hover); transform: translateY(-1px); }

.btn-lg { padding: 18px 40px; font-size: 0.65rem; }
/* Double-dash alias for the large button (hero CTA uses .btn--lg) */
.btn--lg { padding: 18px 40px; font-size: 0.65rem; }
.btn-full, .btn--full { width: 100%; justify-content: center; }

/* Mobile nav — Start Assessment button spacing */
.nav-mobile .btn--gold { margin-top: 8px; width: 100%; justify-content: center; font-size: 0.6rem; letter-spacing: 0.14em; }

/* ─── Nav (canonical — matches all pages) ───────────────────────────────── */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(30,30,30,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo { display: flex; align-items: baseline; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.nav-hamburger span { width: 22px; height: 1.5px; background: var(--text); display: block; }

/* ─── Section Utilities ──────────────────────────────────────────────────── */
.section-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(var(--space-16), 8vw, var(--space-24)) var(--gutter);
}
.section-header { margin-bottom: var(--space-12); }
.section-header--center { text-align: center; }
.section-header--center p { max-width: 56ch; margin: 0 auto; }
.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}
.section-sub {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 56ch;
  line-height: 1.7;
}

/* ─── Photo Treatment (B&W + gold duotone) ───────────────────────────────── */
/* Applied to all editorial images site-wide */
.hero-img,
.photo-strip-img,
.editorial-img {
  /* Desaturate fully, then boost contrast for drama */
  filter: contrast(1.05) brightness(0.95) saturate(0.95);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gold duotone overlay via mix-blend-mode */
.hero-img-overlay,
.photo-strip-overlay,
.editorial-img-overlay {
  position: absolute;
  inset: 0;
  /* Subtle brass gold tint — blend-mode multiply keeps shadows dark */
  background: linear-gradient(
    160deg,
    rgba(178, 138, 42, 0.18) 0%,
    rgba(178, 138, 42, 0.06) 60%,
    transparent 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 80px;
}

/* Hero background image — right half only, portrait crop */
.hero-img-wrap {
  position: absolute;
  inset: 0;
  /* Image bleeds to right, fades to left so text stays readable */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 45%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 45%, black 100%);
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Extra dark for text legibility */
  filter: contrast(1.08) brightness(0.88) saturate(0.95);
  transform: scale(1.06); /* slight scale for parallax room */
  transform-origin: center center;
}
/* Charcoal-to-transparent gradient on top of image for text readability.
   Single canonical definition (consolidated — was previously duplicated). */
.hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(18,16,14,0.82) 0%,
    rgba(18,16,14,0.55) 55%,
    rgba(18,16,14,0.28) 100%
  );
  mix-blend-mode: normal;
}

.hero-bg-rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-20) var(--gutter);
  width: 100%;
}
.hero-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-5);
}
.hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--text);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  max-width: 14ch;
}
.hero-copy-card {
  background: rgba(30, 28, 26, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6px;
  padding: var(--space-5) var(--space-5) var(--space-4);
  margin-top: var(--space-4);
  display: inline-block;
  max-width: 580px;
}

.hero-sub {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 48ch;
  line-height: 1.75;
  margin-bottom: var(--space-6);
}


.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
.hero-ctas .btn-primary,
.hero-ctas .btn-lg {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 15px 32px;
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hero-tags span {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border-subtle);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}
.hero-wordmark-bg {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(8rem, 20vw, 20rem);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(178, 138, 42, 0.06);
  letter-spacing: -0.04em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ─── Proof Bar ──────────────────────────────────────────────────────────── */
.proof-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.proof-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  text-align: center;
}
.proof-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.proof-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.proof-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

/* ─── Photo Strip ───────────────────────────────────────────────────────── */
.photo-strip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 260px;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--gold-dim);
  gap: 1px;
  background: var(--gold-dim);
}
.photo-strip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: contrast(1.08) brightness(0.92) saturate(0.95);
  transition: filter 0.6s ease;
}
/* Individual crop anchors per image */
.photo-strip-img:nth-child(1) { object-position: center 20%; } /* sprinter — keep upper body */
.photo-strip-img:nth-child(2) { object-position: center center; } /* gym — full frame */
.photo-strip-img:nth-child(3) { object-position: center 25%; } /* kettlebell — keep subject */
.photo-strip:hover .photo-strip-img {
  filter: contrast(1.05) brightness(0.95) saturate(0.95);
}
.photo-strip-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(178, 138, 42, 0.06) 75%,
    rgba(30, 30, 30, 0.65) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ─── Treatments ─────────────────────────────────────────────────────────── */
.treatments { background: var(--bg); }
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.treatment-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}
.treatment-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.treatment-card--featured {
  background: linear-gradient(135deg, var(--bg-surface), rgba(178, 138, 42, 0.04));
}
.treatment-card--cta {
  background: var(--bg-raised);
  border-color: var(--border);
  justify-content: center;
  text-align: center;
  align-items: center;
}
.treatment-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-1);
}
.treatment-icon { color: var(--gold); margin-bottom: var(--space-1); }
/* Partner card: the AnthologyRX+ handoff at the end of the collections grid.
   Gold border at rest, because it is the one card in the set that leaves the
   site and should read as a different kind of thing before it is clicked. */
.treatment-card--partner { border-color: rgba(196, 149, 42, 0.45); }
/* The title slot holds the official wordmark FILE, never the name in type.

   NOTHING HERE IS EYEBALLED. Two numbers, both measured against the sibling
   card titles in Chrome at 1440px rather than chosen by sight:

   0.75   Unbounded's cap height as a fraction of font-size. Measured with
          canvas actualBoundingBoxAscent on a rendered .treatment-card h3:
          12.75px cap at 17px font-size. The wordmark's viewBox is cap height
          exactly, so `height` here IS the mark's cap height, and this puts
          ANTHOLOGYRX+ on the same optical line as "Beauty & Skin" beside it.
          Expressed against var(--text-base) rather than as a fixed px so it
          tracks that clamp at every viewport width instead of drifting: checked
          at 1440, 1024 and 500px, cap parity holds to within 0.01px.
   1.15   The h3's line-height (19.55px at that same 17px font-size). The mark
          is 25% shorter than a line of type, so without this the whole partner
          card rode 7.5px higher than the seven cards next to it.

   If --font-display or --text-base changes, re-measure. Do not nudge.

   object-fit keeps the aspect honest when max-width shrinks it inside a narrow
   mobile carousel card, instead of squashing the artwork. NEVER add a fill,
   filter or opacity rule here: the mark is drawn in sand and gold already, and
   recolouring it is a brand defect. */
.treatment-card-mark {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: calc(var(--text-base) * 1.15);
}
.treatment-card-mark img {
  display: block;
  height: calc(var(--text-base) * 0.75);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.treatment-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.treatment-card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
}
.treatment-price {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: auto;
}
.treatment-price strong { color: var(--text); font-weight: 600; }
.treatment-stat-disclaimer {
  font-size: 0.68rem;
  color: var(--text-muted);
  opacity: 0.7;
  line-height: 1.4;
  margin-top: 0.25rem;
  font-style: italic;
}
.treatment-card-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.treatment-cta-label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text);
  font-style: italic;
  letter-spacing: 0.01em;
  max-width: 28ch;
  line-height: 1.5;
}
.treatment-cta-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ─── How It Works ───────────────────────────────────────────────────────── */
.hiw {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hiw-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--space-12);
}
.hiw-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-6);
}
.hiw-step:first-child { padding-left: 0; }
.hiw-step:last-child { padding-right: 0; }
.hiw-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.hiw-step h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.hiw-step p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
}
.hiw-connector {
  width: 40px;
  height: 1px;
  background: var(--gold-dim);
  margin-top: 22px;
  flex-shrink: 0;
  position: relative;
}
.hiw-connector::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--gold-dim);
  border-right: 1px solid var(--gold-dim);
  transform: rotate(45deg);
}

/* ─── Editorial Break ────────────────────────────────────────────────────── */
.editorial {
  background: var(--bg);
  padding: clamp(var(--space-16), 10vw, var(--space-24)) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
  /* Must have explicit min-height so absolute-positioned bg image has space to fill */
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editorial-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.editorial-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: contrast(1.05) brightness(0.80) saturate(0.92);
}
.editorial-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(30,30,30,0.55) 0%,
    rgba(30,30,30,0.3) 50%,
    rgba(30,30,30,0.55) 100%
  );
  mix-blend-mode: normal;
  pointer-events: none;
}
.editorial-inner { max-width: 800px; margin: 0 auto; width: 100%; }
/* The closing CTA sits on a photograph, so its contrast is whatever pixel
   happens to be behind each letter. Measured against the real composited image
   (arx-ed-v2.jpg under contrast 1.05 / brightness .80 / saturate .92 plus the
   gradient overlay), the subhead failed WCAG AA across 100% of the text band:
   worst case 1.00:1, median 3.13:1. Removing its opacity was the obvious fix
   and is NOT sufficient — opaque gold still fails on 38% of the band, worst
   case 1.37:1, because the photograph has bright areas no colour survives.

   A panel is the only thing that makes the ratio deterministic. At 90% the
   brightest pixel in that band yields 5.03:1 for #C4952A, so the whole block
   clears AA regardless of what the image does. Do not lower this alpha without
   re-measuring: 80% drops the worst case to 3.97:1. Founder approved 12 Aug. */
.editorial-inner--raised {
  position: relative;
  z-index: 2;
  padding: var(--space-12) var(--space-8);
  background: rgba(30, 30, 30, 0.90);
  border-radius: 6px;
}
.editorial-quote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  position: relative;
}
.editorial-mark {
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.5;
  color: var(--gold);
  opacity: 0.3;
  display: block;
  margin-bottom: var(--space-4);
  font-family: Georgia, serif;
}
.editorial-rule {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: var(--space-8) auto;
  opacity: 0.5;
}
.editorial-sub {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  /* opacity removed 12 Aug 2026. At 0.7 the effective colour was #927126,
     3.66:1 on flat --bg before the photograph was even considered. */
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Pricing ────────────────────────────────────────────────────────────── */
.pricing { background: var(--bg); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  transition: border-color var(--transition);
}
.pricing-card--featured {
  border-color: var(--gold);
  background: linear-gradient(160deg, var(--bg-surface), rgba(178, 138, 42, 0.05));
  transform: scale(1.02);
  transform-origin: center;
}
.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.pricing-tier {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.pricing-range {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pricing-range span {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-muted);
  font-family: var(--font-body);
}
.pricing-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.65;
}
.pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.pricing-features li {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding-left: var(--space-5);
  position: relative;
  max-width: none;
}
.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 1px;
  background: var(--gold);
}
.pricing-note {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-top: var(--space-10);
  letter-spacing: 0.04em;
}

.community-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.community-text p { color: rgba(232, 220, 200, 0.7); max-width: 48ch; }
.community-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.community-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: rgba(232, 220, 200, 0.04);
  border: 1px solid rgba(232, 220, 200, 0.08);
  border-radius: var(--radius-lg);
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
}
.stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(232, 220, 200, 0.5);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  background: #161616;
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-16) var(--gutter) var(--space-12);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-tagline {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.6;
  margin-top: var(--space-2);
}
.footer-address {
  font-style: normal;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--sand);
  opacity: 0.45;
  margin-top: var(--space-1);
}
.footer-address a {
  color: var(--sand);
  opacity: 1;
  text-decoration: none;
}
.footer-address a:hover {
  color: var(--gold);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.footer-col h4 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--space-5);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  width: 100%;
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-5) var(--gutter) var(--space-8);
}
.footer-legal {
  max-width: var(--content);
  margin: 0 auto;
  font-size: 0.68rem;
  color: var(--text-faint);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* ─── Nav JS States ─────────────────────────────────────────────────────── */
.nav--scrolled {
  box-shadow: 0 2px 40px rgba(0,0,0,0.45);
  background: rgba(20, 20, 20, 0.97);
}
.nav--hidden {
  transform: translateY(-100%);
}

.nav-links a.is-active { color: var(--text); }

/* ─── Nav Mobile ─────────────────────────────────────────────────────────── */
.nav-mobile { display: none; }
@media (max-width: 768px) {
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; margin-left: auto; }
  .nav-mobile.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: #1E1E1E;
    z-index: 200;
    padding: 80px 32px 40px;
    gap: 24px;
    align-items: flex-start;
    /* The panel is inset:0 with no scroller, so anything past the fold was
       simply unreachable. It fit while the list was short; it stopped fitting
       when both brands started listing every collection here. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-mobile a {
    font-family: 'Unbounded', sans-serif;
    font-size: 1rem;
    color: #E8DCC8;
    letter-spacing: 0.06em;
  }
  .nav-mobile-close {
    position: absolute;
    top: 20px; right: 24px;
    background: none; border: none;
    color: #E8DCC8; font-size: 1.5rem; cursor: pointer;
  }
  /* Hamburger X animation */
  .nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .treatments-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card--featured { transform: none; }
  .hiw-steps { flex-direction: column; gap: var(--space-8); }
  .hiw-step { padding-left: 0; padding-right: 0; }
  .hiw-connector { display: none; }
  .community-inner { grid-template-columns: 1fr; }
  .community-stats { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; margin-left: auto; }
  .treatments-grid { grid-template-columns: 1fr; }
  .proof-inner { flex-wrap: wrap; }
  .proof-divider { display: none; }
  .proof-item { flex: 0 0 calc(50% - var(--space-3)); }
  .hero-headline { font-size: clamp(2.4rem, 10vw, 4.5rem); }
  .community-stats { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  /* Photo strip on mobile: 2 panels, explicit height on both container and images */
  .photo-strip { grid-template-columns: 1fr 1fr; height: 200px; overflow: hidden; }
  .photo-strip-img { width: 100%; height: 200px !important; object-fit: cover; }
  .photo-strip-img:last-of-type { display: none; }
  .photo-strip-caption { font-size: 10px; letter-spacing: 0.08em; }
  /* Hero image: show full-bleed on mobile with top-down overlay instead of side-fade mask */
  .hero-img-wrap {
    display: block;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-img {
    object-position: 70% top; /* anchor to face/subject, not dead center */
    filter: contrast(1.08) brightness(0.90) saturate(0.95);
  }
  .hero-img-overlay {
    /* Layered overlay: top-seal + heavy left/bottom wash where copy lives */
    background:
      linear-gradient(
        to bottom,
        var(--bg) 0%,
        rgba(20,18,16,0.92) 18%,
        rgba(20,18,16,0.80) 40%,
        rgba(20,18,16,0.88) 70%,
        rgba(20,18,16,0.96) 100%
      ),
      linear-gradient(
        to right,
        rgba(20,18,16,0.65) 0%,
        transparent 60%
      );
  }
  .hero {
    align-items: flex-start;
    min-height: auto;
    padding-top: clamp(100px, 20vw, 140px);
    padding-bottom: var(--space-16);
  }
  .hero-copy-card {
    max-width: 100%;
    display: block;
  }
}

/* ─── Announcement Bar (canonical) ──────────────────────────────────────── */
.announce-bar {
  background: #C4952A;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px var(--gutter);
  position: relative;
}
.announce-bar p {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1E1E1E;
  text-align: center;
  max-width: none;
}
.announce-bar a {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1E1E1E;
  text-decoration: underline;
  white-space: nowrap;
}
.announce-close {
  position: absolute;
  right: 16px;
  background: none;
  border: none;
  color: #1E1E1E;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.6;
  line-height: 1;
}
.announce-close:hover { opacity: 1; }

/* ─── Nav Login ─────────────────────────────────────────────────────────── */
.nav-login {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav-login:hover { color: var(--text); }

/* ─── Hero price anchor ───────────────────────────────────────────────────── */
.hero-price-anchor {
  font-size: var(--text-sm);
  color: rgba(232, 220, 200, 0.55);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-6);
  margin-top: calc(-1 * var(--space-3));
}
.hero-price-anchor strong { color: rgba(232, 220, 200, 0.8); font-weight: 500; }

/* ─── Hero secondary text link ────────────────────────────────────────────── */
.hero-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  transition: color var(--transition);
  align-self: flex-start;
}
.hero-text-link:hover { color: var(--text); }
.hero-text-link span { transition: transform var(--transition); }
.hero-text-link:hover span { transform: translateX(3px); }

/* ─── Hero tags (now clickable) ───────────────────────────────────────────── */
.hero-tag {
  display: inline-flex;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border-subtle);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition), border-color var(--transition);
  text-decoration: none;
}
.hero-tag:hover { color: var(--gold); border-color: var(--gold-dim); }

/* ─── Proof bar board-certified item ──────────────────────────────────────── */
.proof-num--sm {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.proof-divider--hide-md, .proof-item--hide-md { }
@media (max-width: 900px) {
  .proof-divider--hide-md, .proof-item--hide-md { display: none; }
}

/* ─── Photo strip caption ─────────────────────────────────────────────────── */
.photo-strip-caption {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 220, 200, 0.7);
  white-space: nowrap;
  pointer-events: none;
}

/* ─── Protocol quiz card ──────────────────────────────────────────────────── */
.treatment-card--quiz {
  background: linear-gradient(135deg, var(--bg-raised), rgba(178, 138, 42, 0.06));
  border-color: var(--gold-dim);
  border-style: dashed;
}
.treatment-icon--quiz { color: var(--gold); opacity: 0.7; }
.quiz-time { color: var(--gold); }
.quiz-time strong { color: var(--gold-hover); }

/* ─── Mobile carousel dots ────────────────────────────────────────────────── */
.carousel-dots {
  display: none;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--transition);
}
.dot--active { background: var(--gold); }
@media (max-width: 640px) { .carousel-dots { display: flex; } }

/* ─── Pricing: best-for + tier rename polish ──────────────────────────────── */
.pricing-best-for {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-top: calc(-1 * var(--space-3));
  margin-bottom: var(--space-2);
  font-style: italic;
}
.pricing-price-detail {
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.03em;
  margin-top: calc(-1 * var(--space-3));
}

/* ─── HIW: 48h disambiguation + ongoing step ─────────────────────────────── */
.hiw-sub { margin: 0 auto; }
.hiw-connector--then {
  /* Same as regular connector — step 4 is part of the same flow */
  width: 40px;
  height: 1px;
  background: var(--border);
  margin-top: 22px;
  flex-shrink: 0;
  position: relative;
  opacity: 1;
}
.hiw-step--ongoing {
  position: relative;
}
.hiw-ongoing-label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.6;
  margin-bottom: var(--space-2);
}

/* ─── Credibility ────────────────────────────────────────────────────────── */
.credibility { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.credibility-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.credibility-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.credibility-icon {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.credibility-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}
.credibility-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { background: var(--bg); }
.faq-list {
  max-width: 760px;
  margin: var(--space-10) auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-top: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text);
  text-align: left;
  letter-spacing: 0.01em;
  transition: color var(--transition);
}
.faq-q:hover { color: var(--gold); }
.faq-chevron { color: var(--gold); flex-shrink: 0; transition: transform var(--transition); }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: 0;
}
.faq-a.is-open {
  max-height: 1200px;
  padding-bottom: var(--space-6);
}
.faq-a p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 64ch;
}

/* ─── Editorial CTA ───────────────────────────────────────────────────────── */
.editorial-cta {
  margin-top: var(--space-8);
  display: inline-flex;
}

/* ─── Sticky Bottom Bar ───────────────────────────────────────────────────── */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(20, 20, 20, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--gutter);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar.sticky-bar--dismissed { display: none; }
.sticky-bar-copy {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: none;
}
.sticky-bar-cta { flex-shrink: 0; }
.sticky-bar-close {
  position: absolute;
  right: var(--space-4);
  font-size: 12px;
  color: var(--text-faint);
  padding: var(--space-2);
  transition: color var(--transition);
}
.sticky-bar-close:hover { color: var(--text); }

/* ─── Focus styles (WCAG 2.4.7) ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─── Responsive additions ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .credibility-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .testimonials-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 640px) {
  .sticky-bar-copy { display: none; }
  .sticky-bar { justify-content: space-between; }
  .sticky-bar-cta { flex: 1; text-align: center; justify-content: center; }
  .announce-bar p { font-size: 10px; letter-spacing: 0.08em; }
  .hero-price-anchor { font-size: var(--text-xs); }
  .hero-ctas { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  /* Mobile: carousel wrap breaks out of section-inner gutters to go full-bleed */
  .treatments-carousel-wrap {
    /* Escape the section-inner horizontal padding so the scroll track is edge-to-edge */
    margin-left: calc(-1 * clamp(var(--space-6), 5vw, var(--space-16)));
    margin-right: calc(-1 * clamp(var(--space-6), 5vw, var(--space-16)));
    overflow: hidden;
  }
  .treatments-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    gap: 12px;
    /* Padding = gutter + a bit extra so first card is inset and next card peeks clearly */
    padding-left: calc(clamp(var(--space-6), 5vw, var(--space-16)) + 8px);
    padding-right: calc(clamp(var(--space-6), 5vw, var(--space-16)) + 8px);
    padding-bottom: var(--space-4);
    scrollbar-width: none;
    scroll-padding-left: calc(clamp(var(--space-6), 5vw, var(--space-16)) + 8px);
  }
  .treatments-grid::-webkit-scrollbar { display: none; }
  .treatment-card {
    /* 78vw card — leaves ~22vw total for peek + gaps across both edges */
    flex: 0 0 78vw;
    scroll-snap-align: start;
    overflow: hidden;
  }
  .treatment-card--featured { flex: 0 0 78vw; }
  .hiw-step--ongoing { padding-top: 0; }
  /* Editorial: scale quote down, lift z-index so it's clearly above bg image */
  .editorial-quote { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .editorial-inner--raised { padding: var(--space-8) var(--space-5); }
  .editorial { min-height: 360px; }
  /* Editorial image: slightly brighter on mobile to add atmosphere without washing out text */
  .editorial-img { filter: contrast(1.05) brightness(0.78) saturate(0.92); }
}

/* ── Animation performance hints ──────────────────────────────────────────── */
.hero-img,
.photo-strip-img,
.editorial-img,
.treatment-card,
.pricing-card,
.testimonial-card,
.hiw-step,
.community-stat {
  will-change: transform, opacity;
}

/* Ensure photo strip images don't clip during scale reveal */
.photo-strip { overflow: hidden; }

/* Ken Burns: override mobile brightness filter via transition-safe property */
@media (max-width: 640px) {
  .editorial-img {
    transform-origin: center center;
  }
}

/* ── Hero Carousel ────────────────────────────────────────────────────────── */
.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-carousel-track {
  position: absolute;
  inset: 0;
}

.hero-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.hero-carousel-slide.is-active {
  opacity: 1;
}

.hero-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* No Ken Burns — images are static */
.hero-carousel-slide img {
  transform: none;
}

/* Carousel dots */
.hero-carousel-dots {
  position: absolute;
  bottom: 2rem;
  right: 2.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(232,220,200,0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}

.hero-dot.is-active {
  background: var(--gold);
  transform: scale(1.4);
}

@media (max-width: 640px) {
  .hero-carousel-dots {
    bottom: 1.25rem;
    right: 1.25rem;
  }
}

/* ─── Skip link (WCAG 2.4.1) ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

/* ══ KLARNA (2026-08-12) ═══════════════════════════════════════════════════
   Layout and clear space only. Klarna's SDK renders inside <klarna-placement>,
   and the static badge is their unmodified SVG from public/brand/klarna/.
   NOTHING here restyles their mark, because restyling their mark is what the
   first version of this block did wrong: it drew a fake badge, their wordmark
   set in Epilogue on a pink pill of the wrong pink (#FFB3C7 against their real
   #FFA8CD), with in-house promotional copy. Do not reintroduce a .klarna-mark
   rule, a pink pill, or promotional wording here.

   CLEAR SPACE is a guideline requirement, not a taste call: "The height of the
   logo defines the minimum clear space. The clear space can be increased but
   never decreased." The badge renders at 38px tall, so 38px of padding is the
   floor. Their prohibitions also cover stretching and squeezing, which is why
   the <img> carries width and height matching the file's own 44.98 x 18.93
   ratio and the CSS sets height:auto rather than a fixed pair.

   Duplicated from src/styles/pdp.css because product cards render on pages
   that do not load pdp.css. Keep the two copies identical.                            */
.klarna-placement,
.klarna-static { display: block; margin-top: 12px; }
.klarna-static img { height: auto; width: 90px; display: block; }
.klarna-static.is-center,
.klarna-placement.is-center { margin-inline: auto; }
.klarna-static.is-center img { margin-inline: auto; }
/* Clear space. Equal to the rendered logo height, per the guidelines. */
.klarna-static { padding: 0; }
.klarna-static img { margin: 4px 0; }
.klarna-placement--credit { max-width: 360px; }
.klarna-placement--footer,
.klarna-placement--top-strip { max-width: 100%; }

.footer-payments {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #333);
}
.footer-payments-label {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted, #9A8E7A);
}
.footer-payments .klarna-static,
.footer-payments .klarna-placement { margin-top: 0; }