/* ══════════════════════════════════════════════════════════
   TrimStim — styles.css
   Design system: Soft Futurism, metallic steel/copper palette
   Typeface: Plus Jakarta Sans (Google Fonts)
   Palette rebrand: 2026-06-10 — green → steel blue + copper
   Original green palette saved in palette-backup-green.md
   ══════════════════════════════════════════════════════════ */

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CUSTOM PROPERTIES ───────────────────────────────────── */
:root {
  /* Backgrounds — warm white stays per brand direction */
  --bg:          #F5F8F4;
  --bg-2:        #ECEDEE;
  --bg-3:        #E2E4E8;

  /* Text */
  --text-1:      #1A1C20;
  --text-2:      #4E5C6E;
  --text-3:      #7A8A9E;

  /* Brand metals — steel blue primary, copper accent */
  --moss:        #2E6FA0;
  --fern:        #1A3D5C;
  --sage:        #8BAEC8;
  --lichen:      #B4C4D4;
  --clay:        #8B7D6B;
  --stone:       #96A2B0;

  /* Utilities */
  --font:        'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --nav-h:       120px;
  --radius-card: 16px;
  --radius-btn:  100px;
  --max-w:       1280px;
  --pad-x:       48px;
}

/* ── BASE ────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img   { display: block; max-width: 100%; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }

/* ── CONTAINER ───────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 20px;
}

h1 {
  font-size: clamp(38px, 5.2vw, 70px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text-1);
  margin-bottom: 28px;
}

h2 {
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--text-1);
  margin-bottom: 20px;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 12px;
}

p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-2);
}

.body-lg {
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.7;
  color: var(--text-2);
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease;
  white-space: nowrap;
  border: none;
  line-height: 1;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background:
    linear-gradient(135deg, #A8845A 0%, #C8A060 45%, #8A6840 100%) padding-box,
    linear-gradient(135deg, #7A5A30 0%, #9A7030 50%, #5E4018 100%) border-box;
  border: 1.5px solid transparent;
  color: #1C1410;
  box-shadow: 0 2px 14px rgba(168, 132, 90, 0.35);
}
.btn-primary:hover {
  background:
    linear-gradient(135deg, #BC9468 0%, #DCB070 45%, #9A7848 100%) padding-box,
    linear-gradient(135deg, #8A6838 0%, #AA8038 50%, #6E4C20 100%) border-box;
  box-shadow: 0 4px 22px rgba(168, 132, 90, 0.50);
}

.btn-secondary {
  background: transparent;
  color: var(--fern);
  border: 1.5px solid rgba(26, 61, 92, 0.45);
}
.btn-secondary:hover {
  border-color: var(--fern);
  background: rgba(26, 61, 92, 0.07);
}

.btn-sm { padding: 10px 22px; font-size: 14px; }

/* ── LOGO ────────────────────────────────────────────────── */
.logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.logo-img {
  display: block;
  width: auto;
  height: 96px;
}

.logo-img--footer {
  height: 38px;
}

/* ── NAVIGATION ──────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(245, 248, 244, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(26, 30, 25, 0.09);
  box-shadow: 0 1px 0 rgba(26, 30, 25, 0.04);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  gap: 40px;
}

.nav-links {
  display: flex;
  gap: 36px;
  margin: 0 auto;
}

.nav-links li {
  display: flex;
  align-items: center;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--text-1); }

.nav-cta { flex-shrink: 0; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-1);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  transform-origin: center;
}

.nav-toggle.open span:first-child {
  transform: rotate(45deg) translate(4.5px, 4.5px);
}
.nav-toggle.open span:last-child {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
}

/* Mobile nav panel */
.nav-mobile {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: rgba(245, 248, 244, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(26, 30, 25, 0.09);
  padding: 24px 24px 32px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-mobile.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.nav-mobile ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
}

.nav-mobile ul a {
  display: block;
  padding: 14px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-1);
  border-bottom: 1px solid rgba(26, 30, 25, 0.06);
}

.nav-mobile .btn { width: 100%; margin-top: 4px; }

/* ── NAV DROPDOWN (e.g. "Other Applications") ────────────── */
.nav-item-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: var(--text-2);
  background: transparent;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: color 0.2s ease;
}
.nav-dropdown-toggle:hover { color: var(--text-1); }

.nav-dropdown-chevron { transition: transform 0.2s ease; }

.nav-item-dropdown.open .nav-dropdown-chevron,
.nav-item-dropdown:hover .nav-dropdown-chevron {
  transform: rotate(180deg);
}

/* Outer bridge — starts flush against the trigger (no gap) so the cursor
   never leaves :hover while moving down from "Other Applications" into
   the menu. Its padding-top provides the visual spacing instead of a
   margin/offset, which would otherwise create a dead zone. */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 210;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: all;
}

/* Inner panel — the visible, styled box */
.nav-dropdown-panel {
  min-width: 210px;
  background: rgba(245, 248, 244, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(26, 30, 25, 0.09);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(26, 30, 25, 0.12);
  transform: translateY(-6px);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item-dropdown:hover .nav-dropdown-panel,
.nav-item-dropdown.open .nav-dropdown-panel {
  transform: translateY(0);
}

.nav-dropdown-panel a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-panel a:hover { background: rgba(26, 30, 25, 0.06); color: var(--text-1); }

/* Mobile — nested group under a non-link label */
.nav-mobile-group-label {
  display: block;
  padding: 14px 0 4px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-1);
  border-bottom: 1px solid rgba(26, 30, 25, 0.06);
}

.nav-mobile .nav-mobile-sublist { margin-bottom: 0; }

.nav-mobile .nav-mobile-sublist a {
  padding-left: 16px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-2);
}

/* ── SECTIONS ────────────────────────────────────────────── */
.section         { padding: 72px 0; background: var(--bg); }
.section-alt     { padding: 72px 0; background: var(--bg-2); }
.section-tertiary{ padding: 72px 0; background: var(--bg-3); }

/* Centered section header */
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 72px;
}
.section-header .eyebrow { margin-bottom: 20px; }

/* ── REVEAL ANIMATIONS ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── SERIF ACCENT (Cormorant Garamond italic gradient) ───── */
.serif-accent {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(135deg, #B8C6D8 0%, #607DAA 45%, #14285C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
}

/* ── HERO — centered title card ──────────────────────────── */
.section-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
}

#hero-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Centered text pane */
.hero-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 160px 40px 60px;
  max-width: 920px;
  width: 100%;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 32px;
  display: block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.75s ease 1.0s, transform 0.75s ease 1.0s;
}

.hero-headline {
  font-size: clamp(42px, 5.2vw, 70px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin-bottom: 30px;
}

.hero-line1 {
  display: block;
  font-weight: 700;
  color: var(--text-1);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s ease 1.4s, transform 0.85s ease 1.4s;
}

.hero-line2 {
  display: block;
  font-weight: 300;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s ease 1.85s, transform 0.85s ease 1.85s;
}

.hero-sub {
  max-width: 580px;
  margin-bottom: 48px;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.75s ease 2.4s, transform 0.75s ease 2.4s;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s ease 2.9s, transform 0.65s ease 2.9s;
}

/* Right: full-height immersive suit panel */
.hero-product {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gradient fade — suit bleeds into page */
.hero-product::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to bottom, transparent 0%, rgba(245,248,244,0.55) 55%, var(--bg) 100%);
  pointer-events: none;
  z-index: 2;
}

.suit-glow {
  position: absolute;
  width: 460px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(46,111,160,0.22) 0%, rgba(180,196,212,0.10) 48%, transparent 72%);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
              transform 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

/* Suit fills the right column — cropped to chest/torso close-up */
.suit-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.suit-img {
  width: auto;
  height: 118%;
  max-width: none;
  margin-top: -4%;
  display: block;
  will-change: transform;
  /* Entrance start: blurred, translated down, invisible */
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  filter: blur(10px) drop-shadow(-20px 40px 80px rgba(28,25,23,0.18))
                     drop-shadow(-6px 10px 24px rgba(28,25,23,0.10));
  transition: opacity 3.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              transform 3.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              filter 3.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

/* Trigger entrance when .hero-loaded is added */
.section-hero.hero-loaded .hero-eyebrow,
.section-hero.hero-loaded .hero-line1,
.section-hero.hero-loaded .hero-line2,
.section-hero.hero-loaded .hero-sub,
.section-hero.hero-loaded .hero-ctas {
  opacity: 1;
  transform: translateY(0);
}

.section-hero.hero-loaded .suit-img {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px) drop-shadow(-20px 40px 80px rgba(28,25,23,0.18))
                    drop-shadow(-6px 10px 24px rgba(28,25,23,0.10));
}

.section-hero.hero-loaded .suit-glow {
  opacity: 1;
  transform: scale(1);
}

/* ── PROBLEM ─────────────────────────────────────────────── */
.problem-inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: start;
}

.problem-text .eyebrow { margin-bottom: 24px; }
.problem-text h2 { margin-bottom: 28px; }

.problem-text p {
  margin-bottom: 20px;
}
.problem-text p:last-child { margin-bottom: 0; }

/* Stat callout card — Navy steel gradient */
.stat-callout {
  background: linear-gradient(135deg, rgba(7,17,28,0.82) 0%, rgba(28,60,94,0.72) 100%);
  border: 1px solid rgba(100, 160, 220, 0.30);
  border-radius: var(--radius-card);
  padding: 40px 36px;
}

.stat-callout-number {
  display: block;
  font-size: clamp(44px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 18px;
  white-space: nowrap;
}

.stat-callout-label {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
}

.problem-patient-photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: 20px;
  background: var(--bg-2);
  aspect-ratio: 1844 / 2304;
}

.problem-patient-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Landscape variant — how-it-works.html cycling photo (1376x768), distinct
   from the portrait Gemini lifestyle photo used in this same slot on the homepage */
.problem-patient-photo.is-landscape {
  aspect-ratio: 1376 / 768;
}

.problem-patient-photo.is-landscape img {
  object-fit: cover;
}

/* ── PRODUCT OVERVIEW ────────────────────────────────────── */
.product-inner {
  /* single column flow */
}

.product-body { max-width: 620px; }

/* Centered product image */
.product-patient-card {
  position: relative;
  width: 100%;
  height: 460px;
  margin: 64px 0 72px;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
}

.product-patient-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 28, 20, 0.10) 0%,
    rgba(20, 28, 20, 0.52) 100%
  );
}

.product-patient-quote {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
  z-index: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: 580px;
}

/* 4-pillar grid */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.pillar-card {
  background: var(--bg-2);
  border: 1px solid rgba(26, 30, 25, 0.07);
  border-radius: var(--radius-card);
  padding: 32px 36px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(46, 111, 160, 0.10);
}

.pillar-headline {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 12px;
}

.pillar-copy {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-2);
}

/* ── DIFFERENTIATOR ──────────────────────────────────────── */
.diff-body {
  max-width: 640px;
  margin-top: 20px;
}

.diff-grid {
  margin-top: 48px;
}

.diff-list {
  max-width: 680px;
  margin: 0 auto;
}

.diff-card {
  background: var(--bg);
  border: 1px solid rgba(26, 30, 25, 0.07);
  border-radius: var(--radius-card);
  padding: 36px 40px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* 5th card spans full width, centered */
.diff-card:last-child {
  grid-column: 1 / -1;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.diff-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(46, 111, 160, 0.10);
}

.diff-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C07040;
  margin-bottom: 16px;
}

.diff-headline {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 12px;
}

.diff-copy {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-2);
}

.diff-cta-wrap {
  margin-top: 48px;
  text-align: center;
}

/* ── HOW IT WORKS ────────────────────────────────────────── */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.step-number {
  display: block;
  font-size: 52px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #C07040;
  margin-bottom: 28px;
  opacity: 0.80;
}

.step-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 14px;
}

.step-copy {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-2);
}

/* ── GETTING STARTED (patients page) ────────────────────── */
.gs-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: start;
}

.gs-text h2 {
  margin-bottom: 24px;
}

.gs-text > p {
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-2);
  margin-bottom: 40px;
}

.gs-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.gs-questions {
  background: var(--bg-3);
  border-radius: var(--radius-card);
  padding: 36px 32px 28px;
}

.gs-questions-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--moss);
  margin-bottom: 20px;
}

.gs-questions-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.gs-questions-list li {
  position: relative;
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid rgba(46, 111, 160, 0.15);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}

.gs-questions-list li:last-child {
  border-bottom: none;
}

.gs-questions-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moss);
  opacity: 0.55;
}

.gs-questions-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
  font-style: italic;
}

/* ── TRACTION ────────────────────────────────────────────── */
.traction-inner { text-align: center; }

.traction-inner .eyebrow { margin-bottom: 52px; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}

/* Dividers between stats */
.stats-row .stat-item + .stat-item {
  border-left: 1px solid rgba(26, 30, 25, 0.1);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
}

.stat-item:first-child { padding-left: 0; }
.stat-item:last-child  { padding-right: 0; }

.stat-number {
  display: block;
  font-size: clamp(36px, 3.8vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--moss);
}

.stat-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.traction-body {
  max-width: 540px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-2);
}

/* ── FOOTER CTA ──────────────────────────────────────────── */
.footer-cta-section {
  padding: 64px 0;
  text-align: center;
}

.footer-cta-inner {
  max-width: 640px;
  margin: 0 auto;
}

.footer-cta-inner h2 { margin-bottom: 20px; }

.footer-cta-inner .body-lg {
  margin-bottom: 28px;
}

.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.legal-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
}

/* ── FOOTER ──────────────────────────────────────────────── */
.footer {
  background: var(--bg-3);
  padding: 64px 0 40px;
  border-top: 1px solid rgba(26, 30, 25, 0.07);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(26, 30, 25, 0.07);
  margin-bottom: 32px;
}

/* footer logo handled by .logo-img--footer */

.footer-tagline {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-3);
  max-width: 320px;
  text-align: right;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--text-1); }

.footer-legal {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
  text-align: right;
  max-width: 440px;
}

/* ── SECTION METALLIC GRADIENTS ──────────────────────────── */

/* #problem — Muted Brushed Chrome background, Copper E stat card */
#problem {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg,
    #7E7C79 0%,
    #A4A09C 12%,
    #BFBBB6 28%,
    #CECAC6 40%,
    #C0BCB8 52%,
    #C8C5C0 64%,
    #A8A5A0 76%,
    #BCBAB6 88%,
    #908E8A 100%
  ) !important;
}

/* Shimmer — continuous slow ripple left→right */
#problem::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 65%;
  height: 100%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.12) 55%,
    rgba(255, 255, 255, 0.03) 80%,
    transparent 100%
  );
  animation: chrome-shimmer 11s linear infinite;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
}

/* Keep section content above the shimmer layer */
#problem .container { position: relative; z-index: 2; }

@keyframes chrome-shimmer {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(270%); }
}
#problem .eyebrow { color: rgba(120, 60, 20, 0.85); }
#problem h2 { color: #1C1917; }
#problem .problem-text p { color: rgba(28, 25, 23, 0.72); }
/* Stat callout: Navy steel */
#problem .stat-callout {
  background: linear-gradient(135deg, #07111C 0%, #0F2035 35%, #1C3C5E 55%, #0F2035 70%, #07111C 100%);
  border-color: rgba(100, 160, 220, 0.45);
}
#problem .stat-callout .stat-callout-number { color: #EDF2F8; }
#problem .stat-callout .stat-callout-label  { color: rgba(210, 228, 245, 0.72); }

/* #nmes — Neutral bg + Black Chrome F mechanism cards (how-it-works) */
#nmes {
  background: var(--bg) !important;
}
#nmes .eyebrow { color: rgba(160, 90, 40, 0.85); }
#nmes h2 { color: var(--text-1); }
#nmes .body-lg { color: var(--text-2); }
#nmes .mechanism-card {
  background: linear-gradient(135deg, #07111C 0%, #112236 50%, #1C3C5E 100%);
  border-color: rgba(192, 112, 64, 0.30);
}
#nmes .mechanism-number { color: rgba(192, 112, 64, 0.70); opacity: 1; }
#nmes .mechanism-title  { color: #ffffff; }
#nmes .mechanism-body   { color: rgba(255, 255, 255, 0.72); }

/* #for-whom — Muted Brushed Chrome (patients) */
#for-whom {
  background: linear-gradient(160deg,
    #7E7C79 0%,
    #A4A09C 12%,
    #BFBBB6 28%,
    #CECAC6 40%,
    #C0BCB8 52%,
    #C8C5C0 64%,
    #A8A5A0 76%,
    #BCBAB6 88%,
    #908E8A 100%
  ) !important;
  padding: 64px 0 !important;
}
#for-whom .eyebrow         { color: rgba(120, 60, 20, 0.85); }
#for-whom h2               { color: #1C1917; }
#for-whom .for-whom-text p { color: rgba(28, 25, 23, 0.72); }

/* MCS and Program are adjacent same-background sections — collapse gap between them */

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* ── LARGE TABLET ────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --pad-x: 40px; }

  .hero-headline { font-size: clamp(42px, 5.8vw, 72px); }

  .problem-inner {
    grid-template-columns: 1fr 280px;
    gap: 56px;
  }
}

/* ── TABLET / MOBILE ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --pad-x: 24px; }

  /* Typography */
  h1 { font-size: 36px; letter-spacing: -0.025em; }
  h2 { font-size: 28px; }

  /* Sections */
  .section,
  .section-alt,
  .section-tertiary { padding: 48px 0; }

  .section-header { margin-bottom: 48px; }

  /* Nav — show hamburger, hide links */
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-inner  { padding: 0 24px; }
  /* Shrink logo on mobile */
  :root { --nav-h: 72px; }
  .logo-img { height: 48px; }

  /* Hero */
  .section-hero {
    min-height: 100vh;
  }

  .hero-text {
    padding: 120px 28px 80px;
  }

  .hero-headline { font-size: clamp(36px, 9vw, 56px); }

  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
  .hero-ctas .btn { width: 100%; max-width: 300px; }

  /* Problem */
  .problem-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .stat-callout {
    position: static;
    padding: 28px;
  }

  /* Product */
  .product-patient-card { height: 320px; margin: 40px 0 52px; }
  .product-patient-quote { font-size: clamp(20px, 5vw, 28px); bottom: 28px; left: 24px; right: 24px; }

  .pillars-grid {
    grid-template-columns: 1fr;
  }

  /* Differentiator */
  .diff-grid {
    grid-template-columns: 1fr;
  }
  .diff-card:last-child {
    max-width: 100%;
  }
  .diff-card { padding: 28px; }


  /* How it works */
  .steps-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Getting started */
  .gs-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Stats */
  .stats-row {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 36px;
  }

  .stats-row .stat-item + .stat-item {
    border-left: none;
    border-top: 1px solid rgba(26, 30, 25, 0.1);
    padding-top: 28px;
  }

  .stat-item { padding: 0; }
  .stat-item:first-child { padding: 0; }

  /* Footer CTA */
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; }

  /* Footer */
  .footer { padding: 48px 0 32px; }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-tagline { text-align: left; max-width: 100%; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer-legal { text-align: left; max-width: 100%; }
}

/* ── SMALL MOBILE ────────────────────────────────────────── */
@media (max-width: 480px) {
  .pillar-card { padding: 24px; }
  .stat-callout { padding: 24px; }
  .step-number { font-size: 44px; margin-bottom: 20px; }

  /* Suit image — constrain tighter on very small screens */
  .sf-suit-img { max-width: 260px; }

  /* Careers section tighten further */
  .careers-section { padding: 56px 20px; }

  /* Detail/modality cards — less internal padding on tiny screens */
  .modality-card, .detail-card, .mechanism-card { padding: 24px 20px; }

  /* Contact form submit button — full width */
  .contact-form .btn { width: 100%; }

  /* Patient split content padding */
  .patient-split-content { padding: 36px 24px; }
}

/* ══════════════════════════════════════════════════════════
   INNER PAGES — shared styles
   ══════════════════════════════════════════════════════════ */

/* ── PAGE HERO (inner pages — shorter than homepage) ─────── */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: 52px;
  background: var(--bg);
  text-align: center;
  overflow: hidden;
}

.page-hero-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(26, 30, 25, 0.07);
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}

.page-hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 28px;
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s ease 0.2s, transform 0.65s ease 0.2s;
}

.page-hero-headline {
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}

.page-hero-line1 {
  display: block;
  font-weight: 700;
  color: var(--text-1);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s ease 0.55s, transform 0.75s ease 0.55s;
}

.page-hero-line2 {
  display: block;
  font-weight: 300;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s ease 0.9s, transform 0.75s ease 0.9s;
}

.page-hero-sub {
  max-width: 600px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s ease 1.3s, transform 0.65s ease 1.3s;
}

/* Entrance trigger */
.page-hero.hero-loaded .page-hero-eyebrow,
.page-hero.hero-loaded .page-hero-line1,
.page-hero.hero-loaded .page-hero-line2,
.page-hero.hero-loaded .page-hero-sub {
  opacity: 1;
  transform: translateY(0);
}

/* ── TRACTION HEADLINE (used in hiw clinical section) ────── */
.traction-headline {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-1);
  margin-bottom: 52px;
}

/* ── MECHANISMS GRID (hiw — NMES science) ────────────────── */
/* ── MCS Split Layout ─────────────────────────────────── */
.mcs-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.mcs-intro h2 {
  margin-top: 12px;
  margin-bottom: 16px;
}

.mcs-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mcs-item {
  padding: 24px 0;
  border-bottom: 1px solid rgba(26, 48, 80, 0.1);
}

.mcs-item:first-child { padding-top: 0; }
.mcs-item:last-child  { border-bottom: none; }

.mcs-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.mcs-item-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .mcs-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ─────────────────────────────────────────────────────── */
.mechanisms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.mechanism-card {
  background: var(--bg-2);
  border: 1px solid rgba(26, 30, 25, 0.07);
  border-radius: var(--radius-card);
  padding: 36px 32px;
}

/* mechanism-card first-child styling handled via #nmes section override below */

.mechanism-number {
  display: block;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--moss);
  opacity: 0.5;
  margin-bottom: 24px;
}

.mechanism-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 12px;
  line-height: 1.3;
}

.mechanism-body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-2);
}

/* ── CITATIONS STRIP (hiw — nmes section) ───────────────── */
.citations-page-wrap {
  background: var(--bg);
  padding: 32px 0 40px;
}

.citations-strip {
  padding-top: 24px;
  border-top: 1px solid rgba(26, 30, 25, 0.10);
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.citations-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.citations-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.citation-chip {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid rgba(26, 30, 25, 0.10);
  border-radius: 20px;
  padding: 3px 11px;
  white-space: nowrap;
}

/* ── MODALITIES GRID (hiw — multimodal) ──────────────────── */
.modalities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.modality-card {
  background: var(--bg);
  border: 1px solid rgba(26, 30, 25, 0.09);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modality-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(46, 111, 160, 0.10);
}

.modality-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #28343E;
  background: linear-gradient(135deg, rgba(20,24,32,0.09) 0%, rgba(40,52,62,0.07) 100%);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 20px;
}

.modality-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-1);
  margin-bottom: 14px;
  line-height: 1.25;
}

.modality-body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-2);
}

/* ── FOR WHOM (patients page) ────────────────────────────── */
.for-whom-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: stretch;
}

.for-whom-image {
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.for-whom-image img {
  height: 100%;
  width: auto;
  max-width: 600px;
  object-fit: contain;
  display: block;
}

.for-whom-text .eyebrow { margin-bottom: 24px; }
.for-whom-text h2 { margin-bottom: 24px; }
.for-whom-text p { color: var(--text-2); line-height: 1.75; }

.candidates-card {
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: var(--radius-card);
  padding: 32px;
  margin-top: 32px;
}

.candidates-intro {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1A3D5C;
  margin-bottom: 20px;
}

.candidates-list {
  list-style: none;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 40px;
}

.candidates-list li {
  font-size: 15px;
  line-height: 1.6;
  color: #1A3050;
  padding-left: 20px;
  position: relative;
}

.candidates-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2E6FA0;
  opacity: 0.8;
}

.candidates-note {
  font-size: 13px;
  line-height: 1.6;
  color: #1A3D5C;
  font-style: italic;
}

/* ── DETAILS GRID (patients — what to expect) ────────────── */
.details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.detail-card {
  background: var(--bg-2);
  border: 1px solid rgba(26, 30, 25, 0.07);
  border-radius: var(--radius-card);
  padding: 36px 32px;
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 12px;
  line-height: 1.3;
}

.detail-body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-2);
}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-inner { max-width: 720px; margin: 0 auto; }

.faq-list {
  margin-top: 0;
  border-top: 1px solid rgba(26, 30, 25, 0.09);
}

.faq-item {
  border-bottom: 1px solid rgba(26, 30, 25, 0.09);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.4;
  transition: color 0.2s;
}

.faq-question:hover { color: var(--moss); }

.faq-chevron {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  color: var(--moss);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-answer {
  max-height: 400px;
}

.faq-answer p {
  padding-bottom: 24px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-2);
}

/* ── MISSION (company page) ──────────────────────────────── */
#mission {
  padding: 64px 0;
  background: linear-gradient(140deg, #07111C 0%, #112236 30%, #1C3C5E 55%, #112236 75%, #07111C 100%) !important;
}

#mission .eyebrow { color: #C8A060; }

.mission-inner {
  max-width: 760px;
  margin: 0 auto;
}

.mission-content .eyebrow { margin-bottom: 32px; }

.mission-statement {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: #ffffff;
  border-left: 3px solid rgba(200, 160, 96, 0.55);
  padding-left: 28px;
  margin: 0 0 36px;
  font-style: normal;
}

.mission-content > p {
  font-size: 17px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.68);
}

/* ── TEAM GRID (company page) ────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 0;
}

.team-member {
  display: block;
  background: var(--bg-2);
  border: 1px solid rgba(26, 30, 25, 0.07);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-member:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(46, 111, 160, 0.12);
}

.team-avatar {
  width: 80px;
  height: 104px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--lichen) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 20px;
}

.team-avatar--photo {
  background: transparent;
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.team-initials {
  font-size: 22px;
  font-weight: 600;
  color: var(--moss);
  letter-spacing: 0.02em;
}

.team-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-1);
  margin-bottom: 4px;
  line-height: 1.25;
}

.team-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}

.team-affiliation {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 16px;
  display: block;
}

.team-bio {
  font-size: 14px;
  line-height: 1.72;
  color: var(--text-2);
}

/* ── PARENT COMPANY (company page) ──────────────────────── */
#stabilis {
  padding: 64px 0;
}

.parent-inner {
  max-width: 760px;
  margin: 0 auto;
}

.parent-content .eyebrow { margin-bottom: 24px; }
.parent-content h2 { margin-bottom: 24px; }
.parent-content p { margin-bottom: 36px; color: var(--text-2); line-height: 1.75; }

.parent-cta { display: inline-flex; }

/* ── CAREERS (company page) ──────────────────────────────── */
.careers-section {
  padding: 96px 64px;
  background: linear-gradient(160deg, #07111C 0%, #112236 40%, #1C3C5E 70%, #07111C 100%);
  text-align: center;
}

.careers-inner {
  max-width: 760px;
  margin: 0 auto;
}

.careers-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(244, 237, 229, 0.45);
  margin-bottom: 24px;
}

.careers-headline {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: #F4EDE5;
  margin-bottom: 28px;
}

.careers-headline .serif-accent {
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  display: block;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #D0DCE8 0%, #88AACE 45%, #4870A0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.careers-subhead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(244, 237, 229, 0.72);
  margin-bottom: 48px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.careers-perks {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.careers-perk {
  font-size: 13px;
  font-weight: 500;
  color: rgba(244, 237, 229, 0.50);
  letter-spacing: 0.04em;
}

.btn-careers {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: #1C1917;
  background: #F4EDE5;
  border: none;
  border-radius: var(--radius-btn);
  padding: 18px 48px;
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.btn-careers:hover { opacity: 0.90; transform: translateY(-1px); }

/* ── EDITORIAL PAUSE ─────────────────────────────────────── */
.editorial-pause {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.editorial-pause::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26, 30, 25, 0.40);
}

.pause-line {
  position: relative;
  z-index: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 820px;
  padding: 0 48px;
  line-height: 1.25;
}

/* ── PATIENT SPLIT ───────────────────────────────────────── */
.patient-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  overflow: hidden;
}

.patient-split-photo {
  overflow: hidden;
}

.patient-split-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.patient-split-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 64px;
  background: var(--bg-2);
}

.patient-split-content .eyebrow {
  margin-bottom: 16px;
}

.patient-split-content h2 {
  font-size: clamp(24px, 2.6vw, 38px);
  margin-bottom: 20px;
}

.patient-split-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 440px;
}

@media (max-width: 768px) {
  .patient-split {
    grid-template-columns: 1fr;
  }
  .patient-split-photo {
    height: 320px;
  }
  .patient-split-content {
    padding: 48px 32px;
  }
  .pause-line {
    padding: 0 28px;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — INNER PAGES
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .mechanisms-grid,
  .modalities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* Page hero */
  .page-hero {
    padding-top: calc(var(--nav-h) + 48px);
    padding-bottom: 64px;
  }
  .page-hero-headline { font-size: clamp(32px, 8.5vw, 52px); }

  /* Grids collapse to 1 col */
  .mechanisms-grid,
  .modalities-grid,
  .details-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }

  /* For whom */
  .for-whom-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .for-whom-image {
    height: auto;
    display: block;
  }
  .for-whom-image img {
    height: auto;
    width: 100%;
    max-width: 100%;
  }
  .candidates-list {
    grid-template-columns: 1fr;
  }

  /* Mission statement */
  .mission-statement {
    font-size: clamp(18px, 4.5vw, 24px);
    padding-left: 20px;
  }

  /* Team members go vertical */
  .team-member {
    flex-direction: column;
    gap: 20px;
  }

  /* FAQ */
  .faq-question { font-size: 15px; }

  /* Careers */
  .careers-section { padding: 64px 28px; }
  .careers-headline { font-size: clamp(32px, 8vw, 52px); }

  /* Mechanisms / modalities gap on small screens */
  .mechanisms-grid,
  .modalities-grid { gap: 16px; }

  /* Suit feature within 768px (already handled at 900px, just reinforce) */
  .suit-feature-visual { margin-top: 0; margin-bottom: 0; }
}

/* ── CONTACT FORM ────────────────────────────────────────── */
.contact-form {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text-1);
  background: #fff;
  border: 1.5px solid rgba(46, 111, 160, 0.18);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(46, 111, 160, 0.10);
}

.form-input::placeholder { color: var(--text-3); }

.form-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.contact-form .btn {
  width: 100%;
  margin-top: 6px;
}

.form-status {
  min-height: 20px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-2);
}

.form-status.success { color: #2e6b3e; }
.form-status.error   { color: #a83232; }

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}


/* ── SUIT FEATURE SECTION ────────────────────────────────── */
.suit-feature-section {
  overflow: visible;
  background: var(--bg);
  padding: 0;
}

.suit-feature-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  align-items: center;
  min-height: 680px;
}

.suit-feature-copy {
  padding: 40px 0;
}

.suit-feature-copy h2 {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-1);
  margin-bottom: 18px;
}

.suit-feature-copy .body-lg {
  margin-bottom: 44px;
  max-width: 440px;
}

.sf-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sf-feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.sf-feature-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--moss);
  margin-top: 3px;
  min-width: 26px;
  flex-shrink: 0;
}

.sf-feature-text h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 5px;
}

.sf-feature-text p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
  max-width: 380px;
}

.suit-feature-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -120px;
  margin-bottom: -100px;
}

.sf-suit-img {
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 78%, transparent 100%);
}

@media (max-width: 900px) {
  .suit-feature-section { overflow: hidden; }
  .suit-feature-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 0;
  }
  .suit-feature-copy { padding: 56px 0 24px; }
  .suit-feature-visual {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 48px;
  }
  .sf-suit-img {
    max-width: 340px;
    margin: 0 auto;
    display: block;
  }
}

/* hero mobile override */
@media (max-width: 900px) {
  .hero-text { padding: 120px 28px 64px; }
}