/* =========================================================
   Our Science page styles
   Depends on styles.css being loaded first.

   Editorial, alternating-pillar layout. No card grid — the
   "Not All Stem Cells Are Created Equal" content from the
   homepage has been re-cast as paragraph-led editorial
   sections with premium image placeholders.
   ========================================================= */


/* ---------- HERO ---------- */

.our-science-hero {
  background: var(--color-cream);
  padding-top: clamp(140px, 16vw, 200px);
  padding-bottom: clamp(72px, 9vw, 112px);
  border-bottom: 1px solid rgba(29, 40, 54, 0.08);
  text-align: center;
}

.our-science-hero__inner {
  max-width: 820px;
}

.our-science-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 22px;
}

.our-science-hero__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 28px;
  color: var(--color-navy);
  text-wrap: balance;
}

.our-science-hero__lede {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0 auto;
  color: rgba(29, 40, 54, 0.78);
  text-wrap: pretty;
}


/* ---------- BODY WRAPPER ---------- */

.our-science-body {
  background: var(--color-cream);
  padding-block: clamp(24px, 3vw, 40px);
}

/* Thin hairline between consecutive editorial sections — gives the
   page the cadence of a long-form publication. */
.our-science-body .container > section + section {
  border-top: 1px solid rgba(29, 40, 54, 0.10);
}


/* ---------- PILLAR (text + image placeholder) ---------- */

.our-science-pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(64px, 8vw, 112px);
}

/* Reverse modifier flips text/image columns. order:-1 puts the
   media on the left even though it appears second in DOM. */
.our-science-pillar--reverse .our-science-pillar__media {
  order: -1;
}

.our-science-pillar__text {
  max-width: 520px;
}

.our-science-pillar__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 400;
  margin: 14px 0 20px;
  color: var(--color-navy);
  text-wrap: balance;
}

.our-science-pillar__body {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  margin: 0;
  color: rgba(29, 40, 54, 0.78);
  text-wrap: pretty;
}


/* ---------- TEXT-ONLY EDITORIAL SECTION ---------- */
/* Sits between pillars; centered, narrower measure, more breathing
   room. Reads as an editorial "interstitial" rather than another
   pillar — keeps the page from feeling like a relentless grid. */

.our-science-section {
  padding-block: clamp(56px, 7vw, 96px);
  text-align: center;
}

.our-science-section__inner {
  max-width: 720px;
  margin-inline: auto;
}

.our-science-section__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.2;
  font-weight: 400;
  margin: 14px 0 22px;
  color: var(--color-navy);
  text-wrap: balance;
}

.our-science-section__body {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  margin: 0;
  color: rgba(29, 40, 54, 0.78);
  text-wrap: pretty;
}


/* ---------- SECTION EYEBROW ---------- */
/* Numbered chapter label — "01 · Source", "02 · Cells", etc.
   Reads as a scientific table of contents marker. */

.our-science-section-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 4px;
}


/* ---------- IMAGE PLACEHOLDER ---------- */
/* Premium, intentional — not a gray box. Soft pale-sage fill,
   hairline corner brackets, and an editorial caption ("Figure 01"
   over a descriptive label). Designed to look at home in a
   scientific/clinical editorial spread. */

.science-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, #f0f4ec 0%, #e8efe5 100%);
  border: 1px solid rgba(29, 40, 54, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(20px, 3vw, 40px);
  margin: 0;
  overflow: hidden;
}

/* Hairline corner brackets — top-left and bottom-right. */
.science-img::before,
.science-img::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(29, 40, 54, 0.30);
}
.science-img::before {
  top: 14px;
  left: 14px;
  border-right: 0;
  border-bottom: 0;
}
.science-img::after {
  bottom: 14px;
  right: 14px;
  border-left: 0;
  border-top: 0;
}

.science-img__label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(29, 40, 54, 0.55);
  max-width: 80%;
  text-wrap: pretty;
}

.science-img__label strong {
  display: block;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 10px;
}


/* ---------- B-PAGE PROOF-GRID OVERRIDE ---------- */
/* On our-science-b.html the .proof section sits directly under the hero
   with no .proof__title or .proof__intro above the grid. Reduce the
   default .proof top padding so the cards don't float in dead space. */
.proof--page {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
}


/* ---------- IMAGE-FILLED VARIANT ---------- */
/* Applied when a real photograph is dropped into the placeholder frame.
   Removes the pale-sage gradient + hairline corner brackets + caption label,
   then lets the image cover the figure with a subtle saturation pull-back
   so the photography harmonises with the page's cream/sage palette and
   doesn't read as overly vivid stock imagery. */
.science-img--has-image {
  background: none;
  border-color: rgba(29, 40, 54, 0.12);
}
.science-img--has-image::before,
.science-img--has-image::after {
  display: none;
}
.science-img--has-image .science-img__label {
  display: none;
}
.science-img--has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.88) contrast(0.97);
}


/* ---------- CTA ---------- */

.our-science-cta {
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: clamp(72px, 9vw, 120px);
  text-align: center;
}

.our-science-cta__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 18px;
  color: var(--color-white);
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

.our-science-cta__text {
  font-size: 17px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto clamp(28px, 3vw, 40px);
  color: rgba(255, 255, 255, 0.78);
  text-wrap: pretty;
}


/* ---------- DISCLAIMERS ---------- */
/* The FDA + Utah disclaimer block on this page uses the shared
   .legal-disclaimer treatment defined in styles.css so the homepage
   and this page render identically. The old .our-science-disclaimers
   styles have been removed in favor of that shared class. */


/* =========================================================
   RESPONSIVE — TABLET (<= 1023px)
   ========================================================= */
@media (max-width: 1023px) {

  .our-science-pillar {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 36px);
    padding-block: clamp(48px, 7vw, 72px);
  }

  /* Reverse modifier no longer needed in single-column layout —
     let the DOM order (text first, then image) dictate flow. */
  .our-science-pillar--reverse .our-science-pillar__media {
    order: 0;
  }

  .our-science-pillar__text {
    max-width: none;
  }
}


/* =========================================================
   RESPONSIVE — MOBILE (<= 767px)
   ========================================================= */
@media (max-width: 767px) {

  .our-science-hero {
    padding-top: clamp(110px, 28vw, 140px);
    padding-bottom: 56px;
  }
  .our-science-hero__title {
    font-size: clamp(30px, 8vw, 42px);
  }
  .our-science-hero__lede {
    font-size: 16px;
  }

  .our-science-section {
    padding-block: clamp(40px, 10vw, 56px);
  }

  .science-img {
    aspect-ratio: 4 / 3;
  }
  .science-img::before,
  .science-img::after {
    width: 20px;
    height: 20px;
    top: 10px;
    left: 10px;
  }
  .science-img::after {
    top: auto;
    left: auto;
    bottom: 10px;
    right: 10px;
  }
}


/* =========================================================
   OUR SCIENCE — A-PAGE OVERRIDES
   Scoped exclusively to body.page-our-science--a so our-science.html
   and our-science-b.html stay exactly as they were. Two goals:
   (1) Hero on navy with light type for a stronger, brand-aligned
       opening that mirrors the homepage's final CTA section.
   (2) Tighten section + heading + media rhythm ~15-25% across the
       page so it reads as refined and intentional, not airy.
   ========================================================= */

/* ---- Hero: navy ground, light type ---- */
.page-our-science--a .our-science-hero {
  background: var(--color-navy);
  border-bottom-color: rgba(255, 255, 255, 0.10);
  /* Trim hero padding ~17/25% top/bottom */
  padding-top: clamp(120px, 13vw, 168px);
  padding-bottom: clamp(56px, 7vw, 84px);
}
.page-our-science--a .our-science-eyebrow {
  /* Brand green has too little contrast on navy — use a muted cream
     tone so the eyebrow still reads as a quiet supporting label. */
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 16px;
}
.page-our-science--a .our-science-hero__title {
  color: var(--color-cream);
  margin-bottom: 20px;
}
.page-our-science--a .our-science-hero__lede {
  color: rgba(255, 255, 255, 0.78);
}

/* ---- Body wrapper: tighter outer rhythm ---- */
.page-our-science--a .our-science-body {
  padding-block: clamp(16px, 2vw, 28px);
}

/* ---- Pillars (text + image): trim block padding + column gap ---- */
.page-our-science--a .our-science-pillar {
  gap: clamp(28px, 4vw, 56px);              /* was 36–80 */
  padding-block: clamp(48px, 6vw, 84px);    /* was 64–112 */
}
.page-our-science--a .our-science-pillar__title {
  margin: 10px 0 14px;                      /* was 14 0 20 */
}

/* ---- Editorial interstitials (centered text-only sections) ---- */
.page-our-science--a .our-science-section {
  padding-block: clamp(40px, 5vw, 72px);    /* was 56–96 */
}
.page-our-science--a .our-science-section__title {
  margin: 10px 0 16px;                      /* was 14 0 22 */
}

/* ---- Image placeholders: slightly tighter internal padding ---- */
.page-our-science--a .science-img {
  padding: clamp(16px, 2.4vw, 32px);        /* was 20–40 */
}

/* ---- Bottom CTA: trim block padding ---- */
.page-our-science--a .our-science-cta {
  padding-block: clamp(56px, 7vw, 96px);    /* was 72–120 */
}
.page-our-science--a .our-science-cta__title {
  margin-bottom: 14px;                       /* was 18 */
}


/* ---- Tablet (<= 1023px) ---- */
@media (max-width: 1023px) {
  .page-our-science--a .our-science-pillar {
    gap: clamp(20px, 3vw, 28px);             /* was 24–36 */
    padding-block: clamp(40px, 6vw, 60px);   /* was 48–72 */
  }
}


/* ---- Mobile (<= 767px) ---- */
@media (max-width: 767px) {
  .page-our-science--a .our-science-hero {
    padding-top: clamp(96px, 22vw, 124px);  /* was 110–140 */
    padding-bottom: 44px;                    /* was 56 */
  }
  .page-our-science--a .our-science-pillar {
    gap: 16px;
    padding-block: clamp(32px, 8vw, 48px);
  }
  .page-our-science--a .our-science-section {
    padding-block: clamp(32px, 8vw, 44px);   /* was 40–56 */
  }
  .page-our-science--a .our-science-cta {
    padding-block: clamp(48px, 11vw, 72px);
  }
}


/* =========================================================
   OUR SCIENCE A — UNSCROLLED NAV ON NAVY HERO
   The default header is tuned for the cream homepage hero
   (dark-brown nav text, logo, hairline, and hamburger). Now
   that Our Science A opens on navy, the unscrolled state
   needs to flip to off-white for legibility. The .is-scrolled
   state is intentionally NOT targeted — the existing frosted
   header behavior is preserved exactly as-is.
   ========================================================= */

/* Nav links → cream */
.page-our-science--a .site-header:not(.is-scrolled) .site-nav__list a {
  color: var(--color-cream);
}

/* Logo → white silhouette via filter (no asset swap) */
.page-our-science--a .site-header:not(.is-scrolled) .site-header__logo img {
  filter: brightness(0) invert(1);
}

/* Hairline divider → low-opacity cream across the full width */
.page-our-science--a .site-header:not(.is-scrolled)::after {
  background: rgba(243, 240, 234, 0.30);
}

/* Hamburger bars → cream (overrides the mobile dark-brown rule) */
.page-our-science--a .site-header:not(.is-scrolled) .nav-toggle span {
  background: rgba(243, 240, 234, 0.92);
}

/* Schedule CTA in the unscrolled header → cream text + cream border,
   transparent fill. Mirrors the homepage's outline-on-image treatment
   inverted for a dark surface; the frosted scrolled state still uses
   the dark-green pill defined globally in styles.css. */
.page-our-science--a .site-header:not(.is-scrolled) .btn--outline {
  color: var(--color-cream);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(243, 240, 234, 0.70);
}
.page-our-science--a .site-header:not(.is-scrolled) .btn--outline:hover {
  background: rgba(255, 255, 255, 0.16);
}