/* BC Nutra — visual refinement: bright, restrained, tactile. Loaded last so it overrides earlier page styles. */

/* ─── Palette ─── */
:root {
  --rf-ivory: #F8F5EF;
  --rf-stone: #F1ECE4;
  --rf-teal: #245754;
  --rf-mist: #E5EFEB;
  --rf-ink: #252823;
  --rf-ink-2: #53574F;
  --rf-gold: #A38550;
  --rf-gold-text: #7D6438;
  --rf-forest: #1E3A2C;
  --rf-line: rgba(37, 40, 35, 0.12);
}
html, body { background: var(--rf-ivory); }
.hx, .ix, .sp {
  --hx-ivory: var(--rf-ivory);
  --hx-stone: var(--rf-stone);
  --hx-ink: var(--rf-ink);
  --hx-muted: var(--rf-ink-2);
  --hx-accent: var(--rf-gold-text);
  --hx-line: var(--rf-line);
  --hx-deep: var(--rf-teal);
  --hx-aqua: var(--rf-mist);
  background: var(--rf-ivory);
  color: var(--rf-ink);
}
.navbar { background: rgba(248, 245, 239, 0.94); border-bottom-color: var(--rf-line); }

/* ─── Type & rhythm ─── */
.hx-section { padding: 88px 0; }
.hx-title { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.1; }
.hx-line { display: block; }
.hx-eyebrow { color: var(--rf-gold-text); }
.hx-btn-dark, .sp-add { background: var(--rf-ink); color: var(--rf-ivory); border-color: var(--rf-ink); }
.hx-btn-dark:hover { background: #3a3d37; border-color: #3a3d37; color: var(--rf-ivory); }
.sp-add:hover, .sp-add.is-added { background: #3a3d37; color: var(--rf-ivory); border-color: #3a3d37; }
.hx-btn-outline { border-color: var(--rf-ink); color: var(--rf-ink); }

/* Reveal motion is decorative only — content never disappears during fast scroll */
.hx-js .hx-reveal { opacity: 1; transform: translateY(10px); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hx-js .hx-reveal.is-in { transform: none; }

/* ─── Footer: forest green, brighter links and tagline ─── */
.screen7, .site-footer { background: var(--rf-forest); border-top: 1px solid rgba(163, 133, 80, 0.35); }
.ft-col a, .ft-news p, .ft-tagline, .ft-pending-text, .ft-policy-note { color: rgba(255, 255, 255, 0.9); }
.ft-soon, .ft-soon-tag, .ft-news .ft-news-note { color: rgba(255, 255, 255, 0.68); }
.ft-tagline { color: #D9C394; }

/* ═══════════ HOME ═══════════ */
.hx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: min(calc(100svh - 82px), 720px);
  background: var(--rf-teal);
  color: var(--rf-ivory);
  overflow: hidden;
}
.hx-hero::after { display: none; }
.hx-hero .hx-ripple { position: relative; inset: auto; grid-column: 2; grid-row: 1; background: var(--rf-stone); }
.hx-hero .hx-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 1; filter: none; animation: none; transform: none; }
.hx-ripple-rings, .hx-ripple-sheen { display: none; }
.hx-hero .hx-hero-inner {
  grid-column: 1; grid-row: 1;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 26px;
  width: auto; max-width: none; margin: 0;
  padding: 72px clamp(24px, 5vw, 80px);
}
.hx-hero .hx-hero-inner > * { max-width: 540px; }
.hx-hero .hx-hero-title { font-size: clamp(2.4rem, 3.8vw, 3.35rem); line-height: 1.06; color: var(--rf-ivory); }
.hx-hero .hx-hero-pain { color: var(--rf-ivory); }
.hx-hero .hx-eyebrow, .hx-hero .hx-eyebrow-light { color: #D9C394; }
.hx-hero .hx-hero-lede, .hx-hero .hx-hero-note { color: rgba(248, 245, 239, 0.86); }

/* Signals: unified landscape crop */
.hx-signal-media { aspect-ratio: auto; height: 240px; }
.hx-signal-media img { object-position: 50% 40%; }

/* Philosophy: compact transition, no image wash */
.hx-philosophy { padding: 64px 0; background: var(--rf-stone); }
.hx-philosophy::before { display: none; }
.hx-philosophy-inner { padding-top: 0; padding-bottom: 0; gap: 20px; }

/* Products: same studio ratio */
.hx-product-media { aspect-ratio: 4 / 3; }
.hx-product-studio { background: #fff; padding: 5%; }

/* Life vision: light horizontal row */
.hx-stories { background: var(--rf-stone); }
.hx-story-media { aspect-ratio: 3 / 2; }

/* Closing: short */
.hx-closing { padding: 72px 0; background: var(--rf-ivory); }
.hx-closing-ripple { display: none; }
.hx-closing-inner { gap: 22px; }

/* ═══════════ INNER (Science · Lab · About) ═══════════ */
.ix-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: min(calc(100svh - 82px), 640px);
  background: var(--rf-ivory);
  color: var(--rf-ink);
}
.ix-hero::after, .ix-hero--right::after { display: none; }
.ix-hero .ix-hero-img { position: relative; inset: auto; grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.ix-hero .ix-hero-inner, .ix-hero--right .ix-hero-inner {
  grid-column: 1; grid-row: 1;
  align-items: flex-start; justify-content: center;
  width: auto; max-width: none; margin: 0;
  padding: 64px clamp(24px, 5vw, 80px);
}
.ix-hero-copy { max-width: 520px; gap: 22px; }
.ix-hero .ix-hero-title { font-size: clamp(2.1rem, 3.2vw, 3rem); line-height: 1.08; color: var(--rf-ink); text-shadow: none; }
.ix-hero-title--lines > span { display: block; }
.ix-hero .ix-hero-lede, .ix-hero .ix-hero-copy p { color: var(--rf-ink-2); text-shadow: none; }
.ix-hero .hx-eyebrow, .ix-hero .hx-eyebrow-light { color: var(--rf-gold-text); }
.ix-hero .hx-btn-light { background: var(--rf-ink); color: var(--rf-ivory); border-color: var(--rf-ink); }
.ix-hero .hx-btn-outline-light { border-color: var(--rf-ink); color: var(--rf-ink); }
.ix-hero .hx-btn-outline-light:hover { background: rgba(37, 40, 35, 0.05); }
/* Science gets the mist text panel */
.ix-hero--mist { background: var(--rf-mist); }

/* Dark bands become light, compact sections */
.ix-dark, .ix-band { background: var(--rf-stone); color: var(--rf-ink); }
.ix-dark .hx-title, .ix-band .hx-title { color: var(--rf-ink); }
.ix-dark .hx-eyebrow, .ix-band .hx-eyebrow, .ix-dark .hx-eyebrow-light { color: var(--rf-gold-text); }
.ix-dark p, .ix-band .ix-lede, .ix-dark .ix-lede { color: var(--rf-ink-2); }
.ix-band img, .ix-band::after { display: none; }
.ix-dark .hx-btn-light { background: var(--rf-ink); color: var(--rf-ivory); border-color: var(--rf-ink); }
.ix-dark .hx-btn-outline-light { border-color: var(--rf-ink); color: var(--rf-ink); }
.ix-cta-rings { display: none; }
.ix-band, .ix-cta { padding: 64px 0; }

/* Science timeline: numbered nodes, line only between first and last */
.ix-stages { counter-reset: ix-stage; position: relative; }
.ix-stages li { counter-increment: ix-stage; background: var(--rf-ivory); border-top: 0; padding-top: 72px; }
.ix-stages li::before {
  content: counter(ix-stage, decimal-leading-zero);
  position: absolute; top: 18px; left: 28px;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--rf-gold); background: var(--rf-ivory);
  font-family: var(--font-serif); font-size: 1rem; color: var(--rf-gold-text);
}
.ix-stages li:not(:last-child)::after { top: 38px; right: -24px; width: 24px; background: var(--rf-gold); }
.ix-stages li + li { box-shadow: inset 0 0 0 0 transparent; }
.ix-stages li:not(:last-child) { border-right: 0; }
.ix-stage-n { display: none; }

/* Research cards: equal landscape frames */
.ix-evi-media { margin: 0; overflow: hidden; aspect-ratio: auto; height: 236px; }
.ix-evidence img { display: block; width: 100%; height: 236px; aspect-ratio: auto; object-fit: cover; }

/* Lab: quality / team images lower weight, near-square crops */
.ix-quality-media img { aspect-ratio: auto; height: 420px; }
.ix-team img, .ix-team-media img, .ix-split-media img, .ix-context img { max-height: 460px; object-fit: cover; }

/* About values: 4:3 frames */
.ix-values img, .ix-value img, .ix-value-media img { width: 100%; height: 260px; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; }

/* ═══════════ SHOP ═══════════ */
.sp-hero { padding: 40px 0 24px; }
.sp-hero-inner { gap: 10px; }
.sp-hero .hx-title { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.sp-hero-lede { font-size: 1rem; }
.sp-grid-section { padding: 0 0 72px; }
.sp-grid { gap: 28px; }
.sp-card .sp-stage { aspect-ratio: auto; height: 280px; }
.sp-stage img { height: 88%; }
.sp-stage img[src*="bundle"] { height: 88%; }
.sp-body { padding: 22px 28px 26px; gap: 10px; display: grid; grid-template-rows: auto auto auto auto 1fr auto; }
.sp-name { font-size: 1.65rem; }
.sp-trust { padding: 64px 0; }
.sp-trust-inner { align-items: center; text-align: center; gap: 16px; }
.sp-trust-inner .hx-actions, .sp-trust-inner .hx-link { align-self: center; justify-content: center; }
.sp-disclaimer { padding-top: 32px; }

/* ═══════════ PRODUCT DETAIL ═══════════ */
.pd-crumb { padding-top: 28px; }
.pd-hero { padding: 24px 0 72px; }
.pd-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pd-media { background: #fff; }
.pd-media .sp-stage { aspect-ratio: 1 / 1; height: auto; }
.pd-buy { gap: 18px; }
.pd-position { color: var(--rf-gold-text); }
.pd-price strong, .pd-specs dd { color: var(--rf-ink); }
.pd-section { padding: 72px 0; }
.pd-head { margin-bottom: 32px; gap: 12px; }
.pd-cards li { border-top: 1px solid var(--rf-gold); padding: 26px 24px; }
.pd-panel { padding: 30px; }
.pd-final { padding: 64px 0; background: var(--rf-stone); color: var(--rf-ink); border-top: 1px solid var(--rf-line); }
.pd-final h2 { color: var(--rf-ink); }
.pd-final p { color: var(--rf-ink-2); }
.pd-final .pd-qty { border-color: var(--rf-ink); }
.pd-final .pd-qty button, .pd-final .pd-qty input { color: var(--rf-ink); }
.pd-final .pd-qty button:hover { background: var(--rf-ivory); }
.pd-final .pd-qty input { border-color: var(--rf-line); }
.pd-final .sp-add { background: var(--rf-ink); color: var(--rf-ivory); border-color: var(--rf-ink); }
.pd-final .sp-add:hover, .pd-final .sp-add.is-added { background: #3a3d37; color: var(--rf-ivory); }

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1024px) {
  .hx-hero .hx-hero-inner, .ix-hero .ix-hero-inner { padding: 56px 40px; }
  .ix-hero-title--lines > span { white-space: normal; }
}
@media (max-width: 860px) {
  .hx-hero, .ix-hero { grid-template-columns: 1fr; min-height: 0; }
  .hx-hero .hx-ripple, .ix-hero .ix-hero-img { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .hx-hero .hx-hero-inner, .ix-hero .ix-hero-inner { grid-column: 1; grid-row: 2; padding: 40px 24px 56px; }
  .hx-section { padding: 64px 0; }
  .ix-stages li:not(:last-child)::after { display: block; top: auto; bottom: -24px; left: 47px; right: auto; width: 1px; height: 24px; }
  .ix-quality-media img { height: 300px; }
  .pd-media { order: -1; }
}
@media (max-width: 768px) {
  .sp-hero { padding: 32px 0 20px; }
  .sp-card .sp-stage { height: 260px; }
  .hx-signal-media { height: 220px; }
}