/* ============================================================
   HOMEPAGE — WS5 full-screen hero + trust strip (Pass 10)
   Homepage only (body[data-page="index"]). The hero image is never
   opacity/transform-animated. Overlay header is a html.js enhancement;
   without JS the standard solid header shows and nav stays usable.
   ============================================================ */

/* ---- Full-screen frame (override the v4.0 inset image card) ---- */
.hero-home--index {
  width: 100%; max-width: none; margin: 0; padding: 0;
  border-radius: 0; overflow: hidden;
  min-height: 100svh;
  position: relative;
  display: block;
  background-color: var(--green-dark);
}
.hero-home--index .hero-home__bg { position: absolute; inset: 0; z-index: var(--z-content); overflow: hidden; }
.hero-home--index .hero-home__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Ambient hero drift (Pass 11 B2) — a slow 1.0→1.05 breath added POST-load; paused while the
   hero is off-screen; never runs under reduced motion (image still never entrance-animates). */
@media screen and (prefers-reduced-motion: no-preference) {
  html.js .hero-home--index.hero-drift-on .hero-home__bg img {
    animation: hero-drift 24s ease-in-out infinite alternate; animation-play-state: paused; will-change: transform;
  }
  html.js .hero-home--index.hero-drift-on.is-onscreen .hero-home__bg img { animation-play-state: running; }
}
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.05); } }

/* ---- Scrims: deep-green top (~20%), deeper bottom (~35%) — both AA-verified ---- */
.hero-home--index::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 22%; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--rgb-green), 0.55) 0%, rgba(var(--rgb-green), 0) 100%);
}
.hero-home--index::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(22, 41, 42, 0.78) 0%, rgba(22, 41, 42, 0.28) 45%, rgba(22, 41, 42, 0) 100%);
}

/* ---- Content zones: tagline bottom-left, CTA bottom-right ---- */
.hero-home--index .hero-home__inner {
  position: absolute; inset: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  gap: var(--space-8);
  padding-block: clamp(2.5rem, 10vh, 6rem) clamp(3.5rem, 10vh, 6rem);
}
.hero-home--index .hero-tagline-zone { grid-column: 1; justify-self: center; align-self: end; max-width: 34ch; }
.hero-home--index .hero-cta-zone { grid-column: 2; justify-self: center; align-self: end; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); width: min(20rem, 90%); }

/* ---- Tagline (single h1): line 1 light cream, line 2 bold, "fresh air!" yellow ---- */
.hero-home--index .summit-tagline {
  color: var(--paper); font-size: var(--fs-h1); line-height: 1.05; max-width: none; margin: 0;
  letter-spacing: var(--tracking-tight); text-wrap: balance;
  /* AA-large safety over the lightest patches of the scrimmed photo (matches the Trail Index
     over-photo labels); the scrim already handles the median, this covers the top ~10%. */
  text-shadow: 0 1px 4px rgba(22, 41, 42, 0.75);
}
.summit-tagline__lead { display: block; font-weight: var(--fw-normal); }
.summit-tagline__main { display: block; font-weight: 900; }
.summit-tagline__accent { color: var(--highlight); }

/* ---- CTA stack + proof chip ---- */
.hero-cta-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.hero-cta-stack .btn { width: 100%; }
.btn--cream { background-color: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--cream:hover { background-color: var(--surface-yellow); border-color: var(--surface-yellow); color: var(--ink); }
.hero-proof {
  align-self: center; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.4rem 0.9rem; border-radius: var(--radius-lg);
  background-color: var(--paper); color: var(--ink);
  font-size: var(--text-sm); font-weight: var(--fw-bold); text-decoration: none;
}
.hero-proof__stars { color: var(--surface-orange); }
.hero-proof:hover { color: var(--ink); background-color: var(--surface-yellow); }

/* ---- Trust strip (yellow band directly below the hero) ---- */
.trust-strip { background-color: var(--surface-yellow); padding-block: var(--space-4); }
.trust-strip__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-3) var(--space-6);
  list-style: none; margin: 0; padding-inline: var(--gutter);
  max-width: var(--container); margin-inline: auto;
  color: var(--ink); font-weight: var(--fw-bold); font-size: var(--text-sm);
}
.trust-strip__list li { position: relative; }
.trust-strip__list li + li::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-3) - 0.15rem); top: 50%; transform: translateY(-50%);
  width: 0.4rem; height: 0.4rem; border-radius: var(--radius-round); background-color: var(--surface-orange);
}
@media (max-width: 640px) {
  .trust-strip__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); text-align: center; }
  .trust-strip__list li + li::before { display: none; }
}

/* ---- Overlay header (html.js enhancement; solid fallback with JS off) ---- */
html.js body[data-page="index"] .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  background-color: transparent; border-bottom-color: transparent; box-shadow: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
/* Paper nav links are ONLY for the desktop header bar sitting over the hero photo. On mobile
   (<=900px) the nav-pills live in the opened cream `.primary-nav` sheet, where they must stay
   the readable base green (paper-on-cream = 1.08:1, illegible) — so this is desktop-scoped. */
@media (min-width: 901px) {
  html.js body[data-page="index"] .site-header .nav-pill { color: var(--paper); }
  html.js body[data-page="index"] .site-header .nav-pill:hover,
  html.js body[data-page="index"] .site-header .nav-pill.is-active { color: var(--highlight); background-color: transparent; }
}
/* logo 200% on the homepage */
html.js body[data-page="index"] .site-logo img { height: 100px; width: 100px; }
/* header Call button keeps solid dark green over the hero (per WS5) */
html.js body[data-page="index"] .site-header__call { background-color: var(--green); border-color: var(--green); color: var(--paper); }
html.js body[data-page="index"] .site-header__call:hover { background-color: var(--green-dark); border-color: var(--green-dark); color: var(--paper); }
/* solidify on scroll: revert to the standard solid sticky header */
html.js body[data-page="index"] .site-header.is-scrolled {
  position: sticky; background-color: var(--ground-header); border-bottom-color: var(--green); box-shadow: var(--horizon-below);
}
html.js body[data-page="index"] .site-header.is-scrolled .nav-pill { color: var(--green); }
html.js body[data-page="index"] .site-header.is-scrolled .nav-pill.is-active { color: var(--highlight); background-color: var(--green); }
html.js body[data-page="index"] .site-header.is-scrolled .site-logo img { height: 50px; width: 50px; }
html.js body[data-page="index"] .site-header.is-scrolled .site-header__call { background-color: var(--surface-orange); border-color: var(--surface-orange); color: var(--ink-deep); }
@media (prefers-reduced-motion: reduce) {
  html.js body[data-page="index"] .site-header { transition: none; }
}

/* ---- Mobile: single centered column inside the bottom scrim; logo scales down ---- */
@media (max-width: 767px) {
  html.js body[data-page="index"] .site-logo img { height: 60px; width: 60px; }
  html.js body[data-page="index"] .site-header.is-scrolled .site-logo img { height: 44px; width: 44px; }
  .hero-home--index .hero-home__inner {
    grid-template-columns: 1fr; align-items: end; justify-items: center; text-align: center;
    padding-bottom: calc(3.5rem + var(--space-6));   /* clear the mobile action bar */
    gap: var(--space-5);
  }
  .hero-home--index .hero-tagline-zone, .hero-home--index .hero-cta-zone { grid-column: 1; justify-self: center; align-self: end; }
  .hero-home--index .hero-cta-zone { width: min(22rem, 92%); order: 3; }
  .hero-home--index .hero-tagline-zone { order: 1; max-width: 26ch; }
  .hero-home--index .hero-proof { order: 2; }
}