/* ==========================================================================
   HOME — homepage sections only. Loaded on the front page and nowhere else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   03 — Hero
   Full-bleed, pulled up under the transparent header. `min-height` uses svh
   so mobile browser chrome does not crop the CTAs.
   ------------------------------------------------------------------------ */
/* BPN's hero is a fixed ~750px band with the copy vertically centred on the
   left — not a full-viewport panel with the copy pinned to the bottom, which
   is what this was. The fixed height also means the sections below start above
   the fold on a laptop, which is how the page earns its scroll. */
.g1-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  margin-top: -68px;
  padding-top: 68px;
  overflow: hidden;
  background: var(--g1-dark);
}

@media (min-width: 768px) {
  .g1-hero { min-height: 660px; }
}

@media (min-width: 1024px) {
  /* Cancel the header so it floats over the hero image. Must match the header
     height exactly — a hard-coded 72px against an 88px header left a 16px
     strip of white page showing under the announcement bar. */
  .g1-hero {
    margin-top: calc(var(--g1-header-h) * -1);
    padding-top: var(--g1-header-h);
    min-height: 750px;
  }
}

.g1-hero__media { position: absolute; inset: 0; }
.g1-hero__media img,
.g1-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g1-hero__media .g1-placeholder { height: 100%; border: 0; }

/* Scrim.
   The hero image is product photography, not a purpose-shot lifestyle plate —
   it is busy, high-contrast and light in places. An earlier, gentler gradient
   left the sub-headline sitting directly on the tub artwork and effectively
   unreadable at 360px. These stops are deliberately heavy: legibility of the
   copy wins over showing every pixel of the pack, which the PDP gallery does
   properly anyway.

   Three layers:
     1. bottom-up, carrying the headline and CTAs
     2. top-down, keeping the transparent header legible
     3. left-to-right on wide screens, giving the left-aligned copy a bed */
.g1-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(12, 12, 12, 0.97) 0%,
      rgba(12, 12, 12, 0.88) 38%,
      rgba(12, 12, 12, 0.55) 70%,
      rgba(12, 12, 12, 0.30) 100%),
    linear-gradient(to bottom,
      rgba(12, 12, 12, 0.78) 0%,
      rgba(12, 12, 12, 0) 26%);
}

@media (min-width: 900px) {
  .g1-hero__media::after {
    background:
      linear-gradient(to right,
        rgba(12, 12, 12, 0.92) 0%,
        rgba(12, 12, 12, 0.72) 38%,
        rgba(12, 12, 12, 0.15) 70%,
        rgba(12, 12, 12, 0) 100%),
      linear-gradient(to top,
        rgba(12, 12, 12, 0.85) 0%,
        rgba(12, 12, 12, 0.45) 45%,
        rgba(12, 12, 12, 0.20) 100%),
      linear-gradient(to bottom,
        rgba(12, 12, 12, 0.7) 0%,
        rgba(12, 12, 12, 0) 22%);
  }
}

.g1-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--g1-space-7);
}

/* Copy column sits in the left ~45%, leaving the right of the frame for the
   product lineup in the photograph. */
.g1-hero__copy { max-width: 34rem; }

/* BPN's hero eyebrow is white and bold, not the red used elsewhere — red on a
   busy photograph is the first thing to lose legibility. */
.g1-hero .g1-eyebrow {
  color: var(--g1-text-invert);
  font-size: var(--g1-text-body-s);
  letter-spacing: var(--g1-tracking-wide);
  margin-bottom: var(--g1-space-3);
}

.g1-hero__title { max-width: 14ch; margin-bottom: var(--g1-space-4); color: var(--g1-text-invert); }

.g1-hero__sub {
  max-width: 42ch;
  font-size: var(--g1-text-body-l);
  line-height: 1.3;   /* BPN: 20px type on a 26px line */
  color: rgba(255, 255, 255, 0.86);
}

.g1-hero__cta { display: flex; flex-wrap: wrap; gap: var(--g1-space-3); margin-top: var(--g1-space-6); }

/* Auto-width buttons, matching the reference. Full-width CTAs read as a form,
   not a hero. */
.g1-hero__cta .g1-btn { height: 48px; padding-inline: var(--g1-space-6); }

@media (max-width: 420px) {
  .g1-hero__cta .g1-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Shop by category — light band, square tiles
   ------------------------------------------------------------------------ */
/* BPN measures 32px top and bottom on this band. */
.g1-cats-band { padding-block: var(--g1-section-y-band); }

.g1-cats__heading {
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-bold);
  letter-spacing: var(--g1-tracking-wider);
  text-transform: uppercase;
  color: var(--g1-text-muted);
  text-align: center;
  margin-bottom: var(--g1-space-5);
}

.g1-cats {
  display: grid;
  gap: var(--g1-grid-gap);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .g1-cats { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   Trust strip — light band, icon left / text right, vertical rules
   BPN's is ~176px tall. The previous dark stacked version was roughly three
   times that for the same three facts.
   ------------------------------------------------------------------------ */
/* BPN measures 24px top and bottom, on #F0F0F0. */
.g1-trust-band { padding-block: var(--g1-space-5); background: var(--g1-band-alt); }

.g1-trust {
  display: grid;
  gap: var(--g1-space-5);
  grid-template-columns: 1fr;
}

.g1-trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--g1-space-4);
  padding-block: var(--g1-space-2);
}

.g1-trust__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--g1-text);
}

.g1-trust__title {
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-body);
  font-weight: var(--g1-weight-bold);
  letter-spacing: var(--g1-tracking-wide);
  text-transform: uppercase;
  color: var(--g1-text);
  margin-bottom: var(--g1-space-2);
}

.g1-trust__text p {
  font-size: var(--g1-text-body-s);
  line-height: 1.55;
  color: var(--g1-text-muted);
  max-width: 34ch;
}

@media (min-width: 860px) {
  .g1-trust { grid-template-columns: repeat(3, 1fr); gap: 0; }

  /* Thin rules between the columns, as in the reference. */
  .g1-trust__item + .g1-trust__item {
    border-left: 1px solid rgba(45, 42, 38, 0.14);
    padding-left: var(--g1-space-6);
  }
  .g1-trust__item { padding-right: var(--g1-space-6); }
}

/* --------------------------------------------------------------------------
   08 — Brand belief band
   ------------------------------------------------------------------------ */
.g1-belief { position: relative; overflow: hidden; }

/* Optional background texture. The band stays a light section; the image is
   knocked right back so the black display type keeps its contrast — the
   contrast suite checks this section and a heavier image fails it. */
.g1-belief__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  filter: grayscale(1);
  pointer-events: none;
}
.g1-belief--has-bg > .g1-container { position: relative; z-index: 1; }

.g1-belief__grid {
  display: grid;
  gap: var(--g1-space-7);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .g1-belief__grid { grid-template-columns: 1fr 1fr; gap: var(--g1-space-9); }
}

.g1-belief__title { margin-bottom: var(--g1-space-5); }
.g1-belief__body { color: var(--g1-text-muted); font-size: var(--g1-text-body-l); max-width: 52ch; }
.g1-belief__body p + p { margin-top: var(--g1-space-4); }

.g1-belief__quotes { display: grid; gap: var(--g1-grid-gap); }

@media (min-width: 560px) {
  .g1-belief__quotes { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   09 — Story / video
   ------------------------------------------------------------------------ */
.g1-story__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--g1-radius-sm);
  overflow: hidden;
  background: var(--g1-surface-2);
}
.g1-story__media img { width: 100%; height: 100%; object-fit: cover; }

.g1-story__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 12, 12, 0.35);
  transition: background-color var(--g1-duration-base) var(--g1-ease-out);
}
.g1-story__play:hover { background: rgba(12, 12, 12, 0.5); }
.g1-story__play span {
  display: grid;
  place-items: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--g1-red);
  color: var(--g1-text);
  transition: transform var(--g1-duration-base) var(--g1-ease-out);
}
.g1-story__play:hover span { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   10 — One Performance System
   A four-panel ecosystem row. Each panel is a goal, not a product.
   ------------------------------------------------------------------------ */
.g1-system { display: grid; gap: 1px; background: var(--g1-line); border: var(--g1-border); }

@media (min-width: 640px) { .g1-system { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .g1-system { grid-template-columns: repeat(4, 1fr); } }

.g1-system__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--g1-space-4);
  padding: var(--g1-space-6) var(--g1-space-5);
  background: var(--g1-bg);
  transition: background-color var(--g1-duration-base) var(--g1-ease-out);
}
.g1-system__panel:hover { background: var(--g1-surface-2); }

/* Red rule that grows on hover — a small, cheap signal of interactivity. */
.g1-system__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--g1-red);
  transition: width var(--g1-duration-slow) var(--g1-ease-out);
}
.g1-system__panel:hover::before { width: 100%; }

.g1-system__num {
  font-family: var(--g1-font-mono);
  font-size: var(--g1-text-micro);
  color: var(--g1-text-subtle);
  letter-spacing: var(--g1-tracking-wider);
}
.g1-system__title {
  font-family: var(--g1-font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: var(--g1-leading-display);
  letter-spacing: var(--g1-tracking-display);
  text-transform: uppercase;
}
.g1-system__text { color: var(--g1-text-muted); font-size: var(--g1-text-body-s); flex: 1; }
.g1-system__link {
  min-height: 44px;
  color: var(--g1-red-text);
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-bold);
  letter-spacing: var(--g1-tracking-wider);
  text-transform: uppercase;
  color: var(--g1-red-text);
  display: inline-flex;
  align-items: center;
  gap: var(--g1-space-2);
}

/* --------------------------------------------------------------------------
   11 — Science section
   ------------------------------------------------------------------------ */
.g1-science { display: grid; gap: var(--g1-space-7); grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .g1-science { grid-template-columns: 0.9fr 1.1fr; gap: var(--g1-space-9); align-items: start; }
}

.g1-science__pillars {
  display: grid;
  gap: var(--g1-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .g1-science__pillars { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   13 — Reviews
   ------------------------------------------------------------------------ */
.g1-reviews { display: grid; gap: var(--g1-grid-gap); grid-template-columns: 1fr; }

@media (min-width: 640px) { .g1-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .g1-reviews { grid-template-columns: repeat(3, 1fr); } }

.g1-review {
  display: flex;
  flex-direction: column;
  gap: var(--g1-space-3);
  padding: var(--g1-space-5);
  background: var(--g1-surface-2);
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
  height: 100%;
}
.g1-review__title {
  font-family: var(--g1-font-ui);
  font-weight: var(--g1-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--g1-tracking-wide);
}
.g1-review__text { color: var(--g1-text-muted); font-size: var(--g1-text-body-s); flex: 1; }
.g1-review__by { font-size: var(--g1-text-micro); color: var(--g1-text-subtle); }

/* --------------------------------------------------------------------------
   14 — Quiz / new-to-Gen1 CTA
   ------------------------------------------------------------------------ */
.g1-quiz {
  display: grid;
  gap: var(--g1-space-7);
  grid-template-columns: 1fr;
  align-items: center;
  padding: var(--g1-space-7) var(--g1-space-6);
  background: var(--g1-band-alt);
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
}

@media (min-width: 900px) {
  .g1-quiz { grid-template-columns: 1.2fr 0.8fr; padding: var(--g1-space-9) var(--g1-space-8); }
}

.g1-quiz__goals { display: flex; flex-wrap: wrap; gap: var(--g1-space-2); margin-top: var(--g1-space-5); }

/* --------------------------------------------------------------------------
   Shared: full-bleed band inside a constrained page
   ------------------------------------------------------------------------ */
.g1-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}