/* BC Nutra — full-bleed hero media for Home, Science, The Lab and About. Loaded after refine.css. */
:root {
  --hm-teal: #0E4B4C;
  --hm-teal-dark: #093839;
  --hm-teal-ink: #2C4746;
}

/* ═══════════ HOME — water loop video ═══════════ */
.hx-hero.hm-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(calc(100svh - 82px), 760px);
  background: #E3EEEA;
  color: var(--hm-teal);
  overflow: hidden;
}
.hm-media { position: absolute; inset: 0; overflow: hidden; background: #E3EEEA; }
.hm-poster, .hm-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.hm-video { opacity: 0; transition: opacity .9s ease; }
.hm-hero.is-playing .hm-video { opacity: 1; }
.hm-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(248, 245, 239, 0.5) 0%, rgba(248, 245, 239, 0.22) 38%, rgba(248, 245, 239, 0) 58%);
}
.hm-hero .hx-hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1360px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 26px;
  padding: 88px clamp(24px, 5vw, 80px);
}
.hm-hero .hx-hero-inner > * { max-width: 560px; }
.hm-hero .hx-hero-title { color: var(--hm-teal); text-shadow: none; }
.hm-hero .hx-hero-pain { color: var(--hm-teal); }
.hm-hero .hx-hero-lede { color: var(--hm-teal-ink); }
.hm-hero .hx-eyebrow, .hm-hero .hx-eyebrow-light { color: #7D6438; }
.hm-hero .hx-btn-light { background: var(--hm-teal); color: #F8F5EF; border-color: var(--hm-teal); }
.hm-hero .hx-btn-light:hover { background: var(--hm-teal-dark); border-color: var(--hm-teal-dark); }
.hm-hero .hx-btn-outline-light { border-color: var(--hm-teal); color: var(--hm-teal); background: rgba(248, 245, 239, 0.35); }
.hm-hero .hx-btn-outline-light:hover { background: rgba(248, 245, 239, 0.7); border-color: var(--hm-teal-dark); }
.hm-hero .hx-btn:focus-visible { outline-color: var(--hm-teal); }

@media (prefers-reduced-motion: reduce) {
  .hm-video { display: none; }
}

/* ═══════════ INNER — continuous full-width photos ═══════════ */
.ix-hero.hm-full {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(calc(100svh - 82px), 720px);
  background: #F8F5EF;
  overflow: hidden;
}
.ix-hero.hm-full .ix-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; min-height: 0;
  object-fit: cover;
  object-position: 50% 50%;
}
.ix-hero.hm-full .ix-hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1360px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 72px clamp(24px, 5vw, 80px);
}
.hm-full .ix-hero-copy { max-width: 500px; }

/* Science — copy on the quiet wall at left, woman and green view on the right */
.hm-full--sci .ix-hero-img { object-position: 60% 10%; }
.hm-full--sci .ix-hero-copy { max-width: 430px; gap: 22px; }
.ix-hero.hm-full--sci .ix-hero-inner { padding-bottom: 120px; }
.hm-full--sci .ix-hero-lede, .hm-full--lab .ix-hero-lede, .hm-full--about .ix-hero-lede { color: #3A3833; }

/* The Lab — copy in the quiet upper-left; samples, equipment and both hands stay in frame */
.ix-hero.hm-full--lab { align-items: flex-start; }
.hm-full--lab .ix-hero-img { object-position: 50% 50%; }
.ix-hero.hm-full--lab .ix-hero-inner { padding-top: 56px; }
.hm-full--lab .ix-hero-copy { max-width: 400px; gap: 16px; }
.hm-full--lab .ix-hero-title { font-size: clamp(2rem, 2.6vw, 2.5rem); }
.hm-full--lab .ix-hero-lede { font-size: 1rem; line-height: 1.6; }
.hm-full--lab::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 42% 60% at 16% 30%, rgba(248, 245, 239, 0.78), rgba(248, 245, 239, 0) 75%);
  pointer-events: none;
}

/* About — faces on the left, copy on the quiet wall at right */
.hm-full--about .ix-hero-img { object-position: 30% 50%; }
.ix-hero.hm-full--about .ix-hero-inner { align-items: flex-end; }
.hm-full--about .ix-hero-copy { max-width: 400px; }

/* About second section — morning-bag photo in the existing slot */
.hm-story-media img { object-position: 52% 50%; }

/* ═══════════ Tablet ═══════════ */
@media (max-width: 1024px) {
  .hm-hero .hx-hero-inner { padding: 72px 40px; }
  .hm-hero .hx-hero-inner > * { max-width: 460px; }
  .hm-poster, .hm-video { object-position: 66% 50%; }
  .ix-hero.hm-full { min-height: 600px; }
  .ix-hero.hm-full .ix-hero-inner { padding: 56px 40px; }
  .hm-full .ix-hero-copy, .hm-full--sci .ix-hero-copy { max-width: 400px; }
  .hm-full--sci .ix-hero-img { object-position: 66% 40%; }
  .hm-full--lab .ix-hero-copy { max-width: 380px; }
  .hm-full--about .ix-hero-copy { max-width: 360px; }
  .hm-full--about .ix-hero-img { object-position: 24% 50%; }
}

/* ═══════════ Phone — photo above, copy below so subjects stay visible ═══════════ */
@media (max-width: 720px) {
  .hx-hero.hm-hero { min-height: min(calc(100svh - 72px), 680px); align-items: flex-end; }
  .hm-poster, .hm-video { object-position: 72% 50%; }
  .hm-media::after {
    background: linear-gradient(180deg, rgba(248, 245, 239, 0) 0%, rgba(248, 245, 239, 0.55) 38%, rgba(248, 245, 239, 0.78) 100%);
  }
  .hm-hero .hx-hero-inner { padding: 120px 24px 56px; gap: 22px; }
  .hm-hero .hx-actions { width: 100%; }
  .hm-hero .hx-actions .hx-btn { flex: 1 1 100%; justify-content: center; }

  .ix-hero.hm-full, .ix-hero.hm-full--lab { flex-direction: column; align-items: stretch; min-height: 0; }
  .ix-hero.hm-full .ix-hero-img { position: relative; inset: auto; aspect-ratio: 4 / 3; height: auto; }
  .hm-full--lab::before { display: none; }
  .ix-hero.hm-full .ix-hero-inner,
  .ix-hero.hm-full--lab .ix-hero-inner,
  .ix-hero.hm-full--about .ix-hero-inner { align-items: flex-start; padding: 36px 24px 52px; }
  .hm-full .ix-hero-copy, .hm-full--sci .ix-hero-copy, .hm-full--lab .ix-hero-copy, .hm-full--about .ix-hero-copy { max-width: none; }
  .hm-full--sci .ix-hero-img { object-position: 74% 40%; }
  .hm-full--lab .ix-hero-img { object-position: 58% 50%; }
  .hm-full--about .ix-hero-img { object-position: 22% 50%; }
}