/* =========================================
   AtbFinder — Pixel-perfect stylesheet
   Font: Creato Display
   Breakpoint: 1400px fixed design
   ========================================= */

@font-face {
  font-family: 'Creato Display';
  src: url('creato_display/CreatoDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('creato_display/CreatoDisplay-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('creato_display/CreatoDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --red: #DB2C2F;
  --dark-grey: #4D4D4D;
  --black: #000000;
  --white: #FFFFFF;
  --bg-light: #F7F7F7;
  --divider: rgba(0, 0, 0, 0.15);
  --font: 'Creato Display', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
body {
  font-family: var(--font);
  color: var(--dark-grey);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
p { margin: 0; }

/* ---- Page frame ---- */
.page {
  position: relative;
  width: 100%;
  min-width: 1400px;
  margin: 0;
  background: var(--white);
  overflow: hidden;
}

/* =========================================
   NAVIGATION (shared)
   ========================================= */
.nav {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  width: 100%;
  height: 48px;
  z-index: 100;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

/* Logo */
.logo {
  position: absolute;
  top: 0;
  left: 40px;
  width: 70px;
  height: 30px;
  display: flex;
  align-items: center;
}
.logo svg { width: 100%; height: 100%; }
/* Larger logo on main / patients / testing-menu per Figma (93×40) */
.logo--lg { width: 93px; height: 40px; }

/* Center pill group */
.nav-pills {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  align-items: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 12px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 120ms var(--ease);
}
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: scale(0.97); }

/* Pills on white pages */
.pill--default { background: rgba(0, 0, 0, 0.03); color: var(--black); }
.pill--default:hover { background: rgba(0, 0, 0, 0.07); }

/* Active state on white pages */
.pill--active { background: var(--black); color: var(--white); }

/* Pills on red hero (Main page) */
.pill--on-dark { background: rgba(255, 255, 255, 0.1); color: var(--white); }
.pill--on-dark:hover { background: rgba(255, 255, 255, 0.2); }

/* Contact button (right) */
.contact-btn {
  position: absolute;
  top: 0;
  right: 40px;
  padding: 11px 12px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 200ms var(--ease), transform 120ms var(--ease);
}
.contact-btn:hover { transform: translateY(-1px); }

.contact-btn--on-red { background: var(--white); color: var(--red); }
.contact-btn--on-red:hover { background: #f8e5e5; }

.contact-btn--red { background: var(--red); color: var(--white); }
.contact-btn--red:hover { background: #b81f22; }

.contact-btn--active { background: var(--black); color: var(--white); }

/* =========================================
   TYPOGRAPHY
   ========================================= */
.t-nav { font-weight: 700; font-size: 8px; line-height: 1.2; letter-spacing: 0.8px; text-transform: uppercase; }
.t-body { font-weight: 500; font-size: 15px; line-height: 1.35; letter-spacing: 0.15px; }
.t-lead { font-weight: 500; font-size: 24px; line-height: 1.25; }
.t-label { font-weight: 500; font-size: 28px; line-height: 1.15; }
.t-mid { font-weight: 500; font-size: 40px; line-height: 1.15; }
.t-stat { font-weight: 400; font-size: 80px; line-height: 1.03; letter-spacing: -1.6px; }
.t-hero { font-weight: 500; font-size: 90px; line-height: 1.03; letter-spacing: -0.9px; }
.t-large { font-weight: 500; font-size: 64px; line-height: 1.15; }
.c-red { color: var(--red); }
.c-grey { color: var(--dark-grey); }
.c-black { color: var(--black); }
.c-white { color: var(--white); }

/* =========================================
   LAYOUT — common section pattern
   Left label (349px) + Right content (650px)
   Container: 1320px, padding 40px sides
   ========================================= */
.section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.section__label {
  width: 349px;
  flex-shrink: 0;
}
.section__content {
  width: 650px;
  flex-shrink: 0;
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--divider);
}

/* List item with number + text (two-column inside content) */
.item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.item--row { flex-direction: row; gap: 40px; }
.item__num { color: var(--red); font-weight: 500; font-size: 28px; line-height: 1.15; }
.item__text { color: var(--dark-grey); font-weight: 500; font-size: 28px; line-height: 1.15; }

/* Stat block */
.stat {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.stat__num {
  color: var(--red);
  font-weight: 400;
  font-size: 80px;
  line-height: 1.03;
  letter-spacing: -1.6px;
  white-space: nowrap;
}
.stat__label {
  color: var(--dark-grey);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
}

/* Small list row with divider */
.row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.row p {
  color: var(--dark-grey);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
}
.row p.c-red { color: var(--red); }

/* =========================================
   PAGE: MAIN (index.html)
   ========================================= */
.page--main { height: 9300px; }

.hero {
  position: relative;
  width: 100%;
  min-width: 1400px;
  height: 800px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  animation: heroZoom 2s var(--ease) forwards;
}
.hero__title {
  position: absolute;
  top: 176px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  text-align: center;
  font-weight: 500;
  font-size: 90px;
  line-height: 1.03;
  letter-spacing: -0.9px;
  white-space: nowrap;
}
.hero__subtitle {
  position: absolute;
  top: 394px;
  left: 50%;
  transform: translateX(-50%);
  width: 248px;
  color: var(--white);
  text-align: center;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0.24px;
}
.hero__subtitle.reveal { transform: translate(-50%, 30px); }
.hero__subtitle.reveal.is-visible { transform: translate(-50%, 0); }
.hero__decoration {
  position: absolute;
  top: 89px;
  left: 50%;
  margin-left: -311px;
  width: 622px;
  height: 622px;
  pointer-events: none;
}
.hero__award {
  position: absolute;
  left: 40px;
  top: 700px;
  width: 260px;
  color: var(--white);
}
.hero__award p {
  width: 260px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.15px;
  white-space: pre-wrap;
}

@keyframes heroZoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

/* Main content sections */
.main-content {
  position: absolute;
  top: 880px;
  left: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 160px;
}

/* Section 3 on index.html — label sits right of content */
.section--label-right { flex-direction: row-reverse; }

/* Bullet list */
.bullet-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0.7;
}
.bullet-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bullet-list__item::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--dark-grey);
  border-radius: 50%;
  flex-shrink: 0;
}

/* =========================================
   PAGE: PATIENTS
   ========================================= */
.page--patients { height: 5800px; }
.hero-center {
  padding-top: 120px;
  text-align: center;
}
.hero-center .hero__title {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: block;
  color: var(--dark-grey);
  mix-blend-mode: normal;
  white-space: normal;
  width: 1156px;
  margin: 0 auto;
}
.hero-center .hero__subtitle {
  position: absolute;
  top: 439px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  color: var(--dark-grey);
  width: 466px;
  margin: 0;
}
.hero-center .hero__subtitle.reveal { transform: translate(-50%, 30px); }
.hero-center .hero__subtitle.reveal.is-visible { transform: translate(-50%, 0); }

/* =========================================
   PAGE: CLINICIANS
   ========================================= */
.page--clinicians { height: 6500px; }

.hero-clinicians {
  padding-top: 120px;
  text-align: center;
}
.hero-clinicians__title {
  width: 1292px;
  margin: 0 auto;
  color: var(--dark-grey);
  font-weight: 500;
  font-size: 90px;
  line-height: 1.03;
  letter-spacing: -0.9px;
}
.hero-clinicians__accent {
  display: block;
  color: var(--red);
  font-size: 96px;
  line-height: normal;
  margin-top: 0;
}

/* =========================================
   PAGE: TESTING MENU
   ========================================= */
.page--testing-menu { height: 2050px; }

.tm-hero {
  padding-top: 120px;
  text-align: center;
}
.tm-hero__title {
  width: 916px;
  margin: 0 auto;
  font-weight: 500;
  font-size: 90px;
  line-height: 1.03;
  letter-spacing: -0.9px;
  color: var(--dark-grey);
}
.tm-hero__title--red { color: var(--red); }
.tm-hero__subtitle {
  width: 350px;
  margin: 19px auto 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.15px;
  color: var(--dark-grey);
}

.tm-cards-heading {
  position: absolute;
  top: 338px;
  left: 50%;
  transform: translateX(-50%);
  width: 1319px;
  margin: 0;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.15;
  text-align: center;
  color: var(--dark-grey);
}

.tm-grid {
  position: absolute;
  left: 40px;
  top: 372px;
  display: grid;
  grid-template-columns: repeat(3, 426px);
  gap: 20px 20px;
}
.tm-card {
  width: 426px;
  height: 426px;
  background: var(--bg-light);
  border-radius: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.tm-card__asterisk {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 60px;
  height: 60px;
}
.tm-card__title {
  padding: 28px;
  min-height: 116px;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  color: var(--dark-grey);
  white-space: pre;
}
.tm-card__title--dark { color: var(--black); }
.tm-card__list {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}
.tm-card__list .divider { width: 100%; }
.tm-card__list-item {
  padding: 12px 28px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.15px;
  color: var(--dark-grey);
  white-space: nowrap;
}
.tm-card__list-item--dark { color: var(--black); }
.tm-card__list-item--highlight { color: var(--black); font-weight: 500; }

/* Feature cards row (Antibiotics, Combinations, Concentrations) */
.tm-features-wrapper {
  position: absolute;
  left: 40px;
  top: 1364px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 1321px;
}
.tm-features-heading {
  width: 893px;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.15;
  color: var(--dark-grey);
}
.tm-features {
  display: flex;
  gap: 20px;
}
.tm-feature {
  position: relative;
  width: 427px;
  height: 460px;
  background: var(--bg-light);
  border-radius: 20px;
}
.tm-feature__asterisk {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 60px;
  height: 60px;
}
.tm-feature__text {
  position: absolute;
  left: 0;
  top: 233px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tm-feature__title {
  color: var(--red);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.15;
}
.tm-feature__desc {
  width: 280px;
  color: var(--dark-grey);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.15px;
}
.tm-feature--combinations .tm-feature__text { top: 273px; }
.tm-feature--concentrations .tm-feature__text { top: 273px; }

/* =========================================
   PAGE: CONTACT
   ========================================= */
.page--contact { height: 800px; }

.contact-hero {
  padding-top: 120px;
  text-align: center;
}
.contact-hero__title {
  width: 1072px;
  margin: 0 auto;
  font-weight: 500;
  font-size: 90px;
  line-height: 1.03;
  letter-spacing: -0.9px;
  color: var(--dark-grey);
}
.contact-hero__title .c-red { color: var(--red); }

.contact-email {
  position: absolute;
  left: 0;
  right: 0;
  top: 370px;
  margin: 0 auto;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.contact-email p {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  color: var(--dark-grey);
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.contact-email:hover p { color: var(--red); }
.contact-email__underline {
  width: 220px;
  height: 2px;
  background: var(--red);
  transition: width 300ms var(--ease);
}
.contact-email:hover .contact-email__underline { width: 280px; }

.contact-address {
  position: absolute;
  top: 654px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.16px;
  text-align: center;
  color: var(--dark-grey);
  white-space: nowrap;
}
.contact-address p { margin: 0; }

/* =========================================
   REVEAL / ENTRANCE ANIMATIONS
   ========================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }

.line-reveal {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 600ms var(--ease);
}
.line-reveal.is-visible { transform: scaleX(1); }

/* Hero word reveal */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: heroWord 900ms var(--ease) forwards;
}
@keyframes heroWord {
  to { opacity: 1; transform: translateY(0); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .line-reveal { transform: scaleX(1); }
  .hero-word { opacity: 1; transform: none; animation: none; }
}

/* =========================================
   BURGER + MOBILE NAV MENU (shell; visibility controlled by media queries)
   ========================================= */
.burger {
  display: none;
  position: absolute;
  top: 4px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 210;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 250ms var(--ease), opacity 200ms var(--ease), background-color 200ms var(--ease);
}
.burger--on-dark span { background: var(--white); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.nav-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 205;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 80px 28px 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease);
}
.nav-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.nav-menu__close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 32px;
  line-height: 1;
  color: var(--black);
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-menu__link {
  color: var(--dark-grey);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.3px;
  transition: color 200ms var(--ease);
}
.nav-menu__link:hover,
.nav-menu__link:active {
  color: var(--red);
}
.nav-menu__link--active {
  color: var(--red);
}
.nav-menu__link--contact {
  margin-top: 16px;
  padding: 12px 20px;
  background: var(--red);
  color: var(--white);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nav-menu__link--contact:hover,
.nav-menu__link--contact:active {
  background: #b81f22;
  color: var(--white);
}
body.nav-open {
  overflow: hidden;
}

/* =========================================
   LARGE DESKTOP (≥1440px)
   Пропорционально масштабирует весь сайт по ширине
   экрана, используя 1440px (13" MBP) как базу дизайна.
   На 2560×1440 ≈ 1.78x, full-bleed без полей.
   ========================================= */
@media (min-width: 1440px) {
  .page {
    zoom: calc(100vw / 1440px);
  }
}

/* =========================================
   TABLET (768–1399) — compact desktop layout
   ========================================= */
@media (max-width: 1399px) {
  .page { min-width: auto; }
  .page--main,
  .page--patients,
  .page--clinicians,
  .page--testing-menu,
  .page--contact { height: auto; min-height: 100vh; }

  .hero { min-width: auto; }
}

@media (min-width: 768px) and (max-width: 1399px) {
  /* Nav spacing */
  .logo { left: 24px; }
  .contact-btn { right: 24px; }

  /* Hero — index */
  .hero { height: 720px; }
  .hero__title {
    font-size: 64px;
    letter-spacing: -0.6px;
    white-space: normal;
    width: calc(100% - 80px);
    text-align: center;
    top: 180px;
  }
  .hero__subtitle { top: auto; bottom: 180px; }
  .hero__decoration {
    width: 480px;
    height: 480px;
    margin-left: -240px;
    top: 120px;
  }
  .hero__award { top: auto; bottom: 32px; left: 24px; }

  /* Hero — other pages */
  .hero-center .hero__title,
  .hero-clinicians__title,
  .tm-hero__title,
  .contact-hero__title {
    width: calc(100% - 80px) !important;
    max-width: calc(100% - 80px) !important;
    font-size: 72px;
    letter-spacing: -0.7px;
  }
  .hero-clinicians__accent { font-size: 76px; }
  .hero-center .hero__subtitle,
  .page--clinicians > .hero__subtitle,
  .page--patients > .hero__subtitle {
    top: auto !important;
    bottom: auto !important;
    position: relative !important;
    transform: none !important;
    width: calc(100% - 80px) !important;
    max-width: calc(100% - 80px) !important;
    margin: 32px auto 0 !important;
    left: auto !important;
    display: block;
  }

  /* Neutralize any inline pixel widths inside tablet main content */
  .main-content [style*="width:"],
  .hero-center [style*="width:"],
  .hero-clinicians [style*="width:"],
  .tm-hero [style*="width:"] {
    max-width: 100% !important;
  }

  /* Main content — sections */
  .main-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 80px 40px 80px !important;
    gap: 120px !important;
  }
  .section__label { width: 220px !important; }
  .section__content { width: auto !important; flex: 1; min-width: 0; max-width: none; }
  .section__content [style*="width:"] { max-width: 100% !important; }
  .main-content > .section { gap: 20px; }

  /* Typography scale-down */
  .t-hero { font-size: 64px; letter-spacing: -0.6px; }
  .t-stat { font-size: 64px; letter-spacing: -1.2px; }
  .t-mid { font-size: 32px; }
  .t-large { font-size: 52px; }
  .stat__num { font-size: 64px; letter-spacing: -1.2px; }

  .section__content[style*="width:650px"],
  .section__content > div[style*="width:650px"],
  .section__content p[style*="width:650px"],
  .section__content p[style*="width:609px"],
  .section__content p[style*="width:606px"],
  .section__content p[style*="width:586px"],
  .section__content p[style*="width:576px"],
  .section__content p[style*="width:639px"],
  .section__content div[style*="width:586px"],
  .section__content div[style*="width:576px"],
  .section__content div[style*="width:650px"] {
    width: 100% !important;
    max-width: 100%;
  }

  /* Testing menu */
  .tm-cards-heading {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    margin: 60px 40px 0;
    font-size: 32px;
    line-height: 1.2;
  }
  .tm-grid {
    position: relative !important;
    left: auto !important;
    right: auto;
    top: auto !important;
    margin: 24px 40px 0;
    width: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .tm-card { width: 100%; }
  .tm-features-wrapper {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto;
    margin: 60px 40px 60px;
  }
  .tm-features { flex-wrap: wrap; }
  .tm-feature { width: calc(50% - 10px); }

  /* Contact */
  .contact-email { top: 360px; }
  .contact-address { top: auto; bottom: 40px; }
}

/* =========================================
   MOBILE (≤767)
   ========================================= */
@media (max-width: 767px) {
  /* Enable burger, hide desktop nav */
  .burger { display: flex; }
  .nav-menu { display: flex; }
  .nav-pills { display: none; }
  .contact-btn { display: none; }

  /* Logo sizing */
  .logo { left: 20px; top: 8px; width: 70px; height: 30px; }
  .logo--lg { width: 70px; height: 30px; }

  /* Page frame — remove fixed heights, no horizontal scroll */
  .page,
  .page--main,
  .page--patients,
  .page--clinicians,
  .page--testing-menu,
  .page--contact {
    min-width: auto;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* =====================
     HERO — index.html
     ===================== */
  .hero {
    min-width: auto;
    height: 600px;
  }
  .hero__decoration {
    width: 340px;
    height: 340px;
    margin-left: -170px;
    top: 100px;
  }
  .hero__title {
    top: 170px;
    left: 20px;
    right: 20px;
    transform: none;
    width: auto;
    font-size: 44px;
    letter-spacing: -0.4px;
    line-height: 1.05;
    white-space: normal;
    text-align: center;
  }
  .hero__subtitle {
    top: auto;
    bottom: 120px;
    left: 20px;
    right: 20px;
    transform: none;
    width: auto;
    font-size: 20px;
    line-height: 1.25;
  }
  .hero__subtitle.reveal { transform: translateY(30px); }
  .hero__subtitle.reveal.is-visible { transform: translateY(0); }
  .hero__award {
    top: auto;
    bottom: 24px;
    left: 20px;
    right: 20px;
    width: auto;
  }
  .hero__award p {
    width: 100%;
    font-size: 13px;
    line-height: 1.35;
  }

  /* =====================
     HERO — other pages
     ===================== */
  .hero-center,
  .hero-clinicians,
  .tm-hero,
  .contact-hero {
    padding-top: 90px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-center .hero__title,
  .hero-clinicians__title,
  .tm-hero__title,
  .contact-hero__title {
    width: 100%;
    font-size: 40px;
    line-height: 1.08;
    letter-spacing: -0.4px;
    white-space: normal;
  }
  .hero-clinicians__accent {
    font-size: 44px;
    line-height: 1.05;
  }
  .hero-center .hero__subtitle,
  .page--clinicians > .hero__subtitle,
  .page--patients > .hero__subtitle {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px 0 0 !important;
    padding: 0 20px !important;
    font-size: 18px;
    display: block;
    box-sizing: border-box;
  }
  .hero-center .hero__subtitle.reveal { transform: translateY(30px); }
  .hero-center .hero__subtitle.reveal.is-visible { transform: translateY(0); }
  .tm-hero__subtitle { width: 100%; padding: 0 20px; box-sizing: border-box; }

  /* =====================
     MAIN CONTENT — stack sections
     ===================== */
  .main-content {
    position: static !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    padding: 60px 20px 80px !important;
    gap: 72px !important;
    align-items: stretch !important;
  }
  .section,
  .section--label-right {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }
  .section__label { width: 100% !important; }
  .section__content { width: 100% !important; }

  /* Force ANY inline-styled pixel width to fluid on mobile */
  .main-content [style*="width:"],
  .hero-center [style*="width:"],
  .hero-clinicians [style*="width:"],
  .tm-hero [style*="width:"],
  .tm-grid [style*="width:"],
  .tm-features-wrapper [style*="width:"],
  h1[style*="width:"],
  p[style*="width:"],
  div[style*="width:"],
  ul[style*="width:"] {
    width: 100% !important;
    max-width: 100%;
  }

  /* =====================
     TYPOGRAPHY — smaller on mobile
     ===================== */
  .t-hero { font-size: 40px; letter-spacing: -0.4px; line-height: 1.08; }
  .t-large { font-size: 36px; line-height: 1.12; }
  .t-mid { font-size: 26px; line-height: 1.2; }
  .t-stat { font-size: 48px; letter-spacing: -0.8px; line-height: 1.05; }
  .t-label { font-size: 22px; line-height: 1.2; }
  .t-lead { font-size: 20px; line-height: 1.25; }

  .stat__num {
    font-size: 48px;
    letter-spacing: -0.8px;
    white-space: normal;
  }
  .stat__label { font-size: 15px; }
  .item__num,
  .item__text { font-size: 22px; line-height: 1.2; }
  .item--row { flex-direction: row; gap: 20px; }
  .row p { font-size: 15px; }

  /* Long URL-heavy references text */
  .section__content p[style*="font-size:16px"] {
    font-size: 14px !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* =====================
     TESTING MENU — 1 column
     ===================== */
  .tm-cards-heading {
    position: static;
    transform: none;
    width: 100%;
    padding: 0 20px;
    margin: 40px 0 0;
    font-size: 24px;
    line-height: 1.2;
    box-sizing: border-box;
  }
  .tm-grid {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 20px 0;
    box-sizing: border-box;
  }
  .tm-card {
    width: 100%;
    height: auto;
    min-height: 360px;
  }
  .tm-card__title {
    padding: 24px;
    min-height: 90px;
    font-size: 22px;
    white-space: normal;
  }
  .tm-card__asterisk {
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
  }
  .tm-card__list-item {
    padding: 10px 24px;
    font-size: 14px;
    white-space: normal;
  }

  .tm-features-wrapper {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    padding: 48px 20px 0;
    gap: 28px;
    box-sizing: border-box;
  }
  .tm-features-heading {
    width: 100%;
    font-size: 28px;
    line-height: 1.2;
  }
  .tm-features {
    flex-direction: column;
    gap: 16px;
  }
  .tm-feature {
    width: 100%;
    height: auto;
    min-height: 380px;
  }
  .tm-feature__asterisk {
    top: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
  }
  .tm-feature__text {
    position: relative;
    top: auto;
    left: auto;
    padding: 180px 24px 28px;
    gap: 16px;
  }
  .tm-feature--combinations .tm-feature__text,
  .tm-feature--concentrations .tm-feature__text {
    top: auto;
    padding: 220px 24px 28px;
  }
  .tm-feature__title { font-size: 32px; }
  .tm-feature__desc { width: 100%; font-size: 14px; }

  /* =====================
     CONTACT
     ===================== */
  .contact-email {
    position: static;
    margin: 72px auto 0;
    padding: 0 20px;
  }
  .contact-email p {
    font-size: 18px;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    word-break: break-all;
  }
  .contact-email__underline { width: 180px; }
  .contact-email:hover .contact-email__underline { width: 220px; }

  .contact-address {
    position: static;
    padding: 48px 20px 32px;
    margin: 56px auto 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }

  /* Pause hero parallax by locking decoration transform target via CSS.
     (JS still writes transforms, but on mobile the decoration is small enough
      that parallax doesn't disrupt composition.) */
}