/* ==========================================================================
   Exerkine homepage
   Values extracted from assets/exerkine-home-v02.psd (1920px design).
   PSD px map 1:1 to CSS px at >=1920 viewports; clamp() scales below.
   Type: Barlow 400/500/700 (the design's actual face — via Google Fonts).
   ========================================================================== */

:root {
  --navy: #1a2535;        /* dark section bg (matches bg-*.svg tile fill) */
  --brand: #00558c;       /* primary blue: headlines, nav, stats, footer */
  --orange: #d74e09;      /* CTAs, eyebrows, rules, stat bars */
  --orange-dark: #b94207;
  --ink: #3d3d3d;         /* all dark text (headings AND body, per PSD) */
  --blue-light: #679ac9;  /* light blue: eyebrows on dark, labels, sci heads */
  --bg-gray: #ececea;     /* services bg */
  --divider: rgba(255, 255, 255, .28);

  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --container: 1400px;    /* 260px margins on the 1920 design */
  --pad: clamp(20px, 4vw, 48px);
  --header-h: clamp(72px, 5.21vw, 100px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Reveal animations park elements slightly off-canvas (±30px drifts); clip
   stray horizontal overflow so the page never scrolls sideways. `clip` (not
   `hidden`) leaves no scroll container, so position:sticky keeps working. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(17px, 1.146vw, 22px);   /* PSD: 22 */
  font-weight: 400;
  line-height: 1.4545;                      /* PSD: 32/22 */
  color: var(--ink);
  background: #fff;
}

img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: calc(var(--container) + var(--pad) * 2);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

/* --------------------------------------------------------------------------
   Shared type + buttons
   -------------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 clamp(10px, .99vw, 19px);
  font-size: clamp(14px, 1.042vw, 20px);    /* PSD: 20 Medium */
  font-weight: 500;
  text-transform: uppercase;
}
.eyebrow--light  { color: var(--blue-light); }
.eyebrow--orange { color: var(--orange); }

.section-title {
  margin: 0;
  font-size: clamp(30px, 3.02vw, 58px);     /* PSD: 58 Bold */
  font-weight: 700;
  line-height: 1.115;                       /* PSD: 64.7/58 */
  text-transform: uppercase;
  color: var(--ink);
}
.section-title--light { color: #fff; }
.section-title--rule::after {
  content: "";
  display: block;
  width: clamp(40px, 3.23vw, 62px);         /* PSD: 62x6 */
  height: clamp(4px, .31vw, 6px);
  margin-top: clamp(10px, .99vw, 19px);
  background: var(--orange);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font);
  font-size: clamp(14px, 1.042vw, 20px);    /* PSD: 20 */
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border: 0;                                /* reset native <button> border */
  border-radius: 10px;                      /* match card corners */
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid {
  background: var(--orange);
  color: #fff;
  padding: clamp(15px, 1.09vw, 21px) clamp(22px, 1.67vw, 32px);  /* PSD: 272x63 btn */
}
.btn--solid:hover { background: var(--orange-dark); }
.btn--outline {
  border: 2px solid var(--brand);           /* PSD: 2px stroke */
  color: var(--brand);
  padding: clamp(12px, .89vw, 17px) clamp(18px, 1.41vw, 27px);   /* PSD: 224x55 btn */
  background: transparent;
}
.btn--outline:hover { background: var(--brand); color: #fff; }
/* CTA variants (used by the WP theme's button options) */
.btn--solid-blue { background: var(--brand); }
.btn--solid-blue:hover { background: #003e66; }
.btn--outline-orange { border-color: var(--orange); color: var(--orange); }
.btn--outline-orange:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn__arrow { width: clamp(18px, 1.09vw, 21px); height: 12px; flex: none; }

/* Dark sections + background patterns (SVG tiles at native design scale) */
.section--dark { background-color: var(--navy); color: #fff; }
.section--hex  { background-image: url("assets/img/bg-hex.svg"); }
.section--grid { background-image: url("assets/img/bg-thin-grid.svg"); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
}
.site-header.is-scrolled { box-shadow: 0 2px 12px rgba(26, 37, 53, .1); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}
.header__logo img { width: auto; height: clamp(44px, 3.125vw, 60px); }  /* PSD: 60 */

.header__nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 1.77vw, 34px);
}
.header__nav a {
  font-size: clamp(16px, 1.042vw, 20px);    /* PSD: 20 Bold */
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brand);
  transition: color .15s ease;
}
.header__nav a:hover { color: var(--orange); }

.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
}
.header__burger span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--brand);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-open .header__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .header__burger span:nth-child(2) { opacity: 0; }
.nav-open .header__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero — full-bleed photo + #679ac9 alpha gradient overlay (PSD: -37°)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: #eef2f5;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(53deg,
    rgba(103, 154, 201, .50) 0%,
    rgba(103, 154, 201, .28) 38%,
    rgba(103, 154, 201, 0) 72%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* Substantial hero: ~78% of the viewport, capped at the photo's native
     904px height so it never upscales. Mobile overrides below. */
  min-height: min(calc(78vh - var(--header-h)), 800px);
  padding-top: clamp(56px, 5.83vw, 112px);    /* PSD: 112 */
  padding-bottom: clamp(58px, 5.99vw, 115px); /* PSD: 115 */
}
.hero h1 {
  margin: 0 0 clamp(22px, 2.03vw, 39px);
  max-width: 9.9em;                           /* PSD: 806px @ 82px */
  font-size: clamp(36px, 4.27vw, 82px);       /* PSD: 82 Bold */
  font-weight: 700;
  line-height: .951;                          /* PSD: 78/82 */
  color: var(--brand);
}
.hero .btn--solid { font-weight: 500; }       /* PSD: hero CTA is Medium */

/* --------------------------------------------------------------------------
   Welcome
   -------------------------------------------------------------------------- */

.welcome {
  padding: clamp(48px, 4.17vw, 80px) 0 clamp(46px, 4.01vw, 77px);
}
.welcome__grid {
  display: grid;
  grid-template-columns: 1fr clamp(320px, 28vw, 540px);
  gap: clamp(40px, 5vw, 100px);
  align-items: center;
}
.welcome__image-wrap,
.science__img-wrap {
  position: relative;
  display: block;
  margin: 0;
  border-radius: 50%;                                /* lets outer box-shadow follow the circle */
}
.welcome__image-wrap {
  /* outer lift on light background */
  box-shadow:
    0 18px 38px -10px rgba(0, 0, 0, .35),
    0 6px 14px -4px rgba(0, 0, 0, .22);
}
.science__img-wrap {
  /* subtle blue ambient halo + soft drop on dark navy */
  box-shadow:
    0 0 36px rgba(103, 154, 201, .18),
    0 14px 30px -8px rgba(0, 0, 0, .55);
}
.welcome__image-wrap::after,
.science__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 90px 15px rgba(0, 0, 0, .7),           /* deeper inner vignette */
    inset 0 0 0 1px rgba(255, 255, 255, .12);        /* polished rim highlight */
  pointer-events: none;
}
.welcome__image,
.science__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
.welcome__body {
  max-width: 720px;
  margin: 0;
  font-weight: 500;                           /* PSD: Medium */
}

.welcome .stats { justify-content: flex-start; }
.welcome .stats li { text-align: left; }

/* --------------------------------------------------------------------------
   Science (Research & Technology)
   -------------------------------------------------------------------------- */

.science { padding: clamp(48px, 4.17vw, 80px) 0 clamp(56px, 5vw, 96px); }

.science__row {
  display: grid;
  grid-template-columns: clamp(240px, 19.7vw, 378px) 1fr;
  gap: clamp(32px, 3.18vw, 61px);
  align-items: center;
  margin-top: clamp(40px, 3.75vw, 72px);
}
.science__row--flip { grid-template-columns: 1fr clamp(240px, 19.7vw, 378px); }
.science__row--flip .science__img-wrap { order: 2; }


.science__text h3 {
  margin: 0 0 clamp(10px, .99vw, 19px);
  font-size: clamp(23px, 1.875vw, 36px);      /* PSD: 36 Bold */
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue-light);
}
.science__text p { margin: 0; max-width: 978px; }

.science__divider {
  border: 0;
  border-top: 4px solid var(--divider);
  margin: clamp(24px, 2.03vw, 39px) 0 calc(clamp(18px, 1.61vw, 31px) - clamp(40px, 3.75vw, 72px));
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about { padding: clamp(48px, 4.17vw, 80px) 0 clamp(52px, 4.64vw, 89px); }

.about__grid {
  display: grid;
  grid-template-columns: 1fr clamp(220px, 14.7vw, 282px);
  gap: clamp(40px, 6vw, 115px);
  align-items: center;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 2.4vw, 46px);
  list-style: none;
  margin: clamp(26px, 2.24vw, 43px) 0 clamp(34px, 3.07vw, 59px);
  padding: 0;
}
.stats li {
  border-left: clamp(4px, .31vw, 6px) solid var(--orange);   /* PSD: 6x68 bar */
  padding-left: clamp(18px, 1.46vw, 28px);
}
/* Desktop: keep all three stats on a single row; let labels wrap within their cells */
@media (min-width: 881px) {
  .stats { flex-wrap: nowrap; }
  .stats li { min-width: 0; }
}
.stats strong {
  display: block;
  font-size: clamp(26px, 1.875vw, 36px);      /* PSD: 36 Bold */
  font-weight: 700;
  line-height: 1.05;
  color: var(--brand);
}
.stats em { font-style: italic; }
.stats span {
  display: block;
  margin-top: 10px;
  font-size: clamp(14px, 1.146vw, 22px);      /* PSD: 22 Regular */
  font-weight: 400;
  text-transform: uppercase;
  color: var(--blue-light);
}

.about__body {
  max-width: 916px;                           /* PSD text box */
  margin: 0 0 clamp(26px, 2.4vw, 46px);
  font-weight: 500;                           /* PSD: Medium */
}

.about__portrait { margin: 0; text-align: center; }
.about__portrait img {
  width: 100%;
  max-width: 278px;
  aspect-ratio: 1 / 1;                   /* keep a true circle even when source is rectangular */
  object-fit: cover;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid var(--blue-light);   /* PSD: Ellipse 1 stroke, 1px #679ac9 */
}
.about__portrait figcaption {
  margin-top: clamp(24px, 2.34vw, 45px);
  line-height: 1.22;                          /* PSD: 22/18 */
  color: var(--ink);
}
.about__portrait strong {
  display: block;
  font-size: clamp(17px, 1.146vw, 22px);      /* PSD: 22 Bold */
  font-weight: 700;
}
.about__portrait span {
  display: block;
  margin-top: 6px;
  font-size: clamp(14px, .9375vw, 18px);      /* PSD: 18 Medium */
  font-weight: 500;
}
.about__portrait em {
  display: block;
  margin-top: 4px;
  font-size: clamp(14px, .9375vw, 18px);      /* PSD: 18 MediumItalic */
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Brand (StayAbove Nutrition)
   -------------------------------------------------------------------------- */

.brand {
  padding: clamp(48px, 4.17vw, 80px) 0 clamp(50px, 4.43vw, 85px);
  text-align: center;
}
.brand__copy {
  max-width: 917px;                           /* PSD text box */
  margin: clamp(14px, 1.15vw, 22px) auto clamp(18px, 1.51vw, 29px);
  font-weight: 500;                           /* PSD: Medium */
}
.brand__products {
  width: min(568px, 82%);                     /* PSD: 568x435 */
  margin: clamp(32px, 2.86vw, 55px) auto 0;
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.services {
  padding: clamp(48px, 4.17vw, 80px) 0 clamp(48px, 4.11vw, 79px);
  background: var(--bg-gray);
}

.services__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(22px, 1.82vw, 35px);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px 2px;                               /* PSD: cards nearly touch */
  list-style: none;
  margin: 0;
  padding: 0;
}
.card {
  background: #fff;
  border-radius: 10px;                        /* PSD: 10 */
  padding: clamp(26px, 2.08vw, 40px);         /* PSD: 40 */
}
.card__num {
  margin: 0 0 clamp(4px, .36vw, 7px);
  font-size: clamp(15px, .9375vw, 18px);      /* PSD: 18 Bold */
  font-weight: 700;
  color: var(--orange);
}
.card__title {
  margin: 0 0 clamp(12px, 1.04vw, 20px);
  font-size: clamp(15px, .9375vw, 18px);      /* PSD: 18 Bold */
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink);
}
.card__body {
  margin: 0;
  font-size: clamp(15px, .9375vw, 18px);      /* PSD: 18 Regular */
  line-height: 1.556;                         /* PSD: 28/18 */
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--brand);
  color: #fff;
  padding: clamp(28px, 2.14vw, 41px) 0 clamp(26px, 1.98vw, 38px);
  font-size: clamp(14px, .9375vw, 18px);      /* PSD: 18 Medium */
  font-weight: 500;
}
.footer a { color: #fff; }

.footer__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.footer__logo { width: auto; height: clamp(40px, 3.125vw, 60px); }  /* PSD: 60 */
.footer__copyright { margin: clamp(18px, 1.61vw, 31px) 0 0; }
.footer__legal { margin: clamp(8px, .73vw, 14px) 0 0; display: flex; gap: 18px; }

.footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(14px, 1.3vw, 25px);
  align-self: stretch;
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, .94vw, 18px);
}
.footer__nav a { text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; }
.footer__nav span { color: rgba(255, 255, 255, .55); }

.footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.footer__social svg { width: 20px; height: 20px; display: block; }   /* PSD: 20x20 */

/* --------------------------------------------------------------------------
   Sub-pages (about.html, services.html)
   -------------------------------------------------------------------------- */

.page-hero {
  padding: clamp(64px, 5.7vw, 110px) 0 clamp(48px, 4.17vw, 80px);
  background:
    linear-gradient(180deg,
      rgba(103, 154, 201, .12) 0%,
      rgba(103, 154, 201, .06) 60%,
      transparent 100%);
}
.page-hero__title {
  margin: clamp(14px, 1.25vw, 24px) 0 clamp(22px, 2vw, 38px);
  font-size: clamp(40px, 4.27vw, 82px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}
.page-hero__intro {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.founder { padding: clamp(56px, 5vw, 96px) 0 clamp(64px, 5.5vw, 105px); }
.founder__grid {
  display: grid;
  grid-template-columns: clamp(240px, 22vw, 360px) 1fr;
  gap: clamp(40px, 4.7vw, 90px);
  align-items: start;
  margin-top: clamp(32px, 2.7vw, 52px);
}
.founder__portrait {
  position: relative;
  display: block;
  margin: 0;
  border-radius: 50%;
  box-shadow:
    0 0 36px rgba(103, 154, 201, .18),
    0 14px 30px -8px rgba(0, 0, 0, .55);
}
.founder__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 90px 15px rgba(0, 0, 0, .7),
    inset 0 0 0 1px rgba(255, 255, 255, .12);
  pointer-events: none;
}
.founder__portrait-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
.founder__bio { color: #fff; }
.founder__bio p {
  margin: 0 0 clamp(16px, 1.4vw, 26px);
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 400;
  line-height: 1.65;
}
.founder__bio p:last-child { margin-bottom: 0; }
.founder__bio strong { font-weight: 700; }
.founder__bio em { font-style: italic; }

.team {
  padding: clamp(56px, 5vw, 96px) 0;
  background: var(--bg-gray);
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.4vw, 40px);
  margin: clamp(36px, 3vw, 60px) 0 0;
}
.team__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: clamp(28px, 2.6vw, 44px) clamp(24px, 2.2vw, 36px);
  box-shadow:
    0 4px 20px -6px rgba(0, 0, 0, .10),
    0 2px 6px -2px rgba(0, 0, 0, .06);
}
.team__portrait {
  position: relative;
  display: block;
  width: clamp(140px, 14vw, 200px);
  aspect-ratio: 1 / 1;
  margin: 0 auto clamp(20px, 1.7vw, 30px);
  border-radius: 50%;
  box-shadow:
    0 0 26px rgba(103, 154, 201, .18),
    0 10px 22px -8px rgba(0, 0, 0, .22);
}
.team__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 60px 10px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .14);
  pointer-events: none;
}
.team__portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.team__portrait--placeholder {
  background: linear-gradient(135deg, #1A2535 0%, #00558C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team__avatar-initials {
  font-size: clamp(44px, 4.2vw, 78px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .92);
}
.team__name {
  margin: 0 0 6px;
  font-size: clamp(20px, 1.5vw, 26px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
.team__title {
  margin: 0 0 4px;
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--orange);
}
.team__credentials {
  margin: 0 0 clamp(14px, 1.2vw, 22px);
  font-size: clamp(12px, .85vw, 15px);
  font-style: italic;
  color: var(--ink);
  opacity: .65;
}
.team__bio {
  position: relative;
  margin: 0;
  padding-top: clamp(18px, 1.5vw, 26px);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.62;
  color: var(--ink);
  text-align: left;
}
.team__bio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(32px, 2.4vw, 44px);
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
}
.team__bio em { font-style: italic; }

.partners {
  padding: clamp(48px, 4vw, 80px) 0 clamp(64px, 5.5vw, 105px);
  background: var(--bg-gray);
}
.partners__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.25vw, 22px);
  margin: clamp(28px, 2.5vw, 46px) 0 0;
  padding: 0;
  list-style: none;
}
.partners__logo {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: clamp(16px, 1.4vw, 26px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.partners__logo a {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.partners__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Services sub-page — single-column white cards, echoing home-page cards */
.services-list {
  padding: clamp(40px, 3.5vw, 70px) 0 clamp(56px, 5vw, 96px);
  background: var(--bg-gray);
}
.services-list .container {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.3vw, 22px);
}
.service {
  display: grid;
  grid-template-columns: clamp(180px, 22vw, 320px) 1fr;
  gap: clamp(24px, 2.2vw, 42px);
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: clamp(24px, 2vw, 36px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
/* Service image frame — <figure> wraps <img> so we can layer a brand-tint overlay and clip transformed crops cleanly */
.service__image-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
  background:
    linear-gradient(135deg,
      rgba(0, 85, 140, .10) 0%,
      rgba(103, 154, 201, .22) 50%,
      rgba(0, 85, 140, .08) 100%);
}
.service__image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(0, 85, 140, .12) 0%,
      rgba(103, 154, 201, .06) 100%);
  pointer-events: none;
}
img.service__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.55) contrast(.98);
}
/* Photo-specific crop tweak — per-image scale/origin/nudge via inline CSS custom properties */
.service__image--zoom {
  transform: translate(var(--sv-x, 0), var(--sv-y, 0)) scale(var(--sv-scale, 1.5));
  transform-origin: var(--sv-origin, 45% 60%);
}
.service__num {
  margin: 0 0 clamp(10px, .8vw, 14px);
  font-size: clamp(15px, .9375vw, 18px);    /* matches home card__num */
  font-weight: 700;
  color: var(--orange);
}
.service__title {
  margin: 0 0 clamp(14px, 1.15vw, 22px);
  font-size: clamp(22px, 1.8vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}
.service__body {
  margin: 0;
  max-width: 900px;
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
}

/* Contact sub-page */
.contact { padding: clamp(48px, 4vw, 80px) 0 clamp(64px, 5.5vw, 105px); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
  margin-top: clamp(32px, 2.7vw, 52px);
  align-items: start;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.8vw, 28px);
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 1.8vw, 28px);
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, .5vw, 10px);
}
.contact-form__label {
  font-size: clamp(13px, .94vw, 16px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
}
.contact-form__input {
  width: 100%;
  padding: clamp(12px, 1vw, 16px) clamp(14px, 1.1vw, 18px);
  font-family: inherit;
  font-size: clamp(15px, 1.04vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 6px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.contact-form__input:focus {
  outline: 0;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(215, 78, 9, .15);
}
.contact-form__input::placeholder { color: rgba(61, 61, 61, .45); }
.contact-form__textarea {
  min-height: 160px;
  resize: vertical;
}
.contact-form__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(4px, .5vw, 10px);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.4vw, 42px);
  padding-top: clamp(8px, .8vw, 14px);
}
.contact-info__block .eyebrow {
  margin: 0 0 clamp(8px, .65vw, 12px);
}
.contact-info__value {
  margin: 0;
  font-size: clamp(16px, 1.1vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}
.contact-info__value a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 85, 140, .3);
  transition: border-color 150ms ease;
}
.contact-info__value a:hover { border-bottom-color: var(--brand); }
.contact-info__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 0;
}
.contact-info__social:hover { color: var(--orange); }
.contact-info__social svg { width: 22px; height: 22px; display: block; }

/* CTA band */
.cta {
  padding: clamp(56px, 5vw, 96px) 0;
  text-align: center;
}
.cta__title {
  margin: 0 0 clamp(14px, 1.2vw, 22px);
  font-size: clamp(30px, 3.02vw, 58px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
}
.cta__body {
  margin: 0 0 clamp(26px, 2vw, 38px);
  font-size: clamp(17px, 1.15vw, 22px);
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
  .hero::after {
    background: linear-gradient(53deg,
      rgba(103, 154, 201, .62) 0%,
      rgba(103, 154, 201, .42) 45%,
      rgba(103, 154, 201, .18) 100%);
  }
  .hero h1 { max-width: 100%; color: #fff; }

  .header__burger { display: flex; }
  .header__nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--pad) 16px;
    background: #fff;
    box-shadow: 0 12px 18px rgba(26, 37, 53, .12);
    display: none;
  }
  .nav-open .header__nav { display: flex; }
  .header__nav a { padding: 12px 0; font-size: 20px; }

  .science__row,
  .science__row--flip { grid-template-columns: 1fr; gap: 28px; }
  .science__row--flip .science__img-wrap { order: 0; }
  .science__img-wrap { max-width: 300px; margin: 0 auto; }
  .science__divider { margin: clamp(24px, 2.03vw, 39px) 0 0; }

  .about__grid { grid-template-columns: 1fr; }
  .about__portrait { order: 2; }

  /* Welcome: stack to single column on mobile, image below text */
  .welcome__grid { grid-template-columns: 1fr; }
  .welcome__image-wrap { max-width: 320px; margin: 0 auto; order: 2; }

  .services__head { flex-direction: column; align-items: flex-start; }
  .cards { grid-template-columns: repeat(2, 1fr); }

  .footer__grid { flex-direction: column; }
  .footer__right { align-items: flex-start; }

  /* Sub-pages */
  .founder__grid { grid-template-columns: 1fr; gap: 28px; }
  .founder__portrait { max-width: 260px; margin: 0 auto; }
  .partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }

  /* Services list: stack image above content on tablet/mobile */
  .service { grid-template-columns: 1fr; gap: 20px; }
  .service__image-frame { max-width: 420px; }
}

@media (max-width: 640px) {
  /* Phones: separate text and scientist VERTICALLY - taller hero, her face
     in the clear top half, text anchored to the bottom over the desk area,
     and the blue overlay weighted to the text zone instead of her face. */
  .hero__photo { object-position: 72% center; }
  .hero::after {
    background: linear-gradient(to top,
      rgba(84, 133, 179, .82) 0%,
      rgba(90, 140, 187, .55) 42%,
      rgba(103, 154, 201, .08) 78%,
      rgba(103, 154, 201, 0) 100%);
  }
  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: min(84vh, 640px);
    padding-top: 280px;
  }
  .hero h1 { max-width: 100%; color: #fff; }
  /* "Commercialization" must fit one line on narrow phones. */
  .page-hero__title { font-size: clamp(28px, 8.5vw, 40px); }
  .stats { flex-direction: column; gap: 22px; }
  /* Punch up the stat labels on phones; vw-clamped so the longest label
     ("Products Commercially Available") stays on one line down to 320px. */
  .stats span {
    font-size: clamp(12px, 4vw, 16px);
    font-weight: 600;
    color: var(--brand);
  }
  .cards { grid-template-columns: 1fr; }
  .brand__products { width: min(420px, 92%); }
  .partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-form__row { grid-template-columns: 1fr; gap: 20px; }
}

/* --------------------------------------------------------------------------
   Motion — progressive enhancement. script.js adds .anim to <html> (skipped
   entirely under prefers-reduced-motion), tags elements with .rv and a
   per-element --rv-delay, then reveals them via IntersectionObserver.
   Without JS nothing here applies and every element renders as normal.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .anim .rv {
    opacity: 0;
    transform: translate(var(--rv-x, 0), var(--rv-y, 22px)) scale(var(--rv-s, 1));
    transition:
      opacity .7s ease var(--rv-delay, 0ms),
      transform .8s cubic-bezier(.22, .61, .36, 1) var(--rv-delay, 0ms);
    will-change: opacity, transform;
  }
  .anim .rv--in {
    opacity: 1;
    transform: none;
  }

  /* Hero entrance (load-time, not scroll) */
  .anim .hero__photo         { animation: exkHeroPhoto 1.8s cubic-bezier(.22,.61,.36,1) both; }
  .anim .hero__inner h1      { animation: exkRiseIn .9s cubic-bezier(.22,.61,.36,1) .15s both; }
  .anim .hero__inner .btn    { animation: exkRiseIn .9s cubic-bezier(.22,.61,.36,1) .4s both; }
  .anim .page-hero .eyebrow          { animation: exkRiseIn .8s cubic-bezier(.22,.61,.36,1) .05s both; }
  .anim .page-hero .page-hero__title { animation: exkRiseIn .9s cubic-bezier(.22,.61,.36,1) .18s both; }
  .anim .page-hero .page-hero__intro { animation: exkRiseIn .9s cubic-bezier(.22,.61,.36,1) .34s both; }

  @keyframes exkRiseIn {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes exkHeroPhoto {
    from { opacity: .55; transform: scale(1.05); }
    to   { opacity: 1;   transform: none; }
  }
}