/* ============================================================
   RestartME, Home (luxe light "clearing skies")
   The hero is type-led over the ambient silk, no dark scene, no gold.
   ============================================================ */

/* ---- HERO (light, type-led, floats over the silk) --------- */
.home-hero {
  position: relative;
  min-height: clamp(600px, 92vh, 920px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(7rem, 12vh, 11rem) clamp(3rem, 8vh, 6rem);
}
.home-hero__grid {
  position: relative; z-index: 2; width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    ".       film"
    "eyebrow film"
    "copy    film"
    "cta     film"
    "rail    film"
    ".       film";
  grid-template-rows: 1fr auto auto auto auto 1fr;
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 0;
}
.home-hero__eyebrow { grid-area: eyebrow; }
.home-hero__copy { grid-area: copy; max-width: 38rem; }
.home-hero__cta  { grid-area: cta; }
.home-hero__rail { grid-area: rail; }
.home-hero__film { grid-area: film; align-self: stretch; }
/* Let grid items shrink so long text (the eyebrow) never forces the column wide
   and overflows on mobile. */
.home-hero__grid > * { min-width: 0; }
.home-hero .eyebrow { color: var(--sky-ink); }

/* Eyebrow centring — enforced here (fresh-loading file) so it wins over any
   stale cached base.css .eyebrow--center rule. .partners/.home-cta (0,2,0) beats
   .eyebrow (0,1,0). display:block + text-align is the simplest, can't-fail centre. */
.partners .eyebrow, .home-cta .eyebrow { display: block; width: 100%; text-align: center; }
/* The leaf-branch emblem that replaces the rule under "In partnership with" */
.partners__emblem { display: block; width: clamp(120px, 16vw, 152px); height: auto; margin: 1.1rem auto 0; }
.partners__emblem svg { display: block; width: 100%; height: auto; overflow: visible; }
.pe-stem { stroke: var(--sky-deep); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.pe-leaf { fill: var(--sky); }
.pe-leaf--deep { fill: var(--sky-deep); }
.pe-tip { fill: var(--sky-deep); }
.pe-node { fill: var(--sky-ink); }
.home-hero__title {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(2.75rem, 1.2rem + 5.4vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 1.4rem 0 0;
  max-width: 15ch;
  text-wrap: balance;
}
.home-hero__emph { color: var(--sky-deep); font-style: italic; }
.home-hero .lead {
  color: var(--slate);
  max-width: 50ch;
  margin: 1.6rem 0 0;
  font-size: var(--text-lg);
}
.home-hero__cta { margin-top: 2.2rem; }

/* Glass credential rail, gives the hero substance. Stays one row. */
.home-hero__rail {
  margin-top: clamp(2rem, 4vh, 3.25rem);
  display: flex; flex-wrap: nowrap; align-items: stretch;
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  padding: 1.2rem clamp(1.25rem, 2.4vw, 1.9rem);
  border-radius: var(--radius-lg);
  text-align: left;
}
.home-hero__stat { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 0; min-width: 0; }
.home-hero__stat + .home-hero__stat { padding-left: clamp(0.9rem, 1.8vw, 1.6rem); border-left: 1px solid var(--hairline-accent); }
.home-hero__stat-num { font-family: var(--font-display); font-weight: 360; font-size: var(--text-xl); line-height: 1; color: var(--ink); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.home-hero__stat-num span { color: var(--sky-deep); }
.home-hero__stat-label { font-size: var(--text-xs); color: var(--text-muted); max-width: 16ch; letter-spacing: 0.01em; line-height: 1.3; }

/* ---- HERO FILMSTRIP (real portraits, drifting, brand-tinted) ---- */
.home-hero__film {
  position: relative;
  height: clamp(440px, 64vh, 660px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
.filmstrip { position: relative; overflow: hidden; }
.filmstrip__track {
  display: flex; flex-direction: column;
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
  animation: filmUp 46s linear infinite;
  will-change: transform;
}
.filmstrip--down .filmstrip__track { animation-name: filmDown; }
/* The second column is offset so the two ribbons never line up */
.filmstrip--up .filmstrip__track { animation-duration: 54s; }
.home-hero__film:hover .filmstrip__track { animation-play-state: paused; }

.filmstrip__cell {
  position: relative; flex: 0 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline-accent), var(--shadow-md);
}
.filmstrip__cell img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
  transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
/* Sky wash binds the strip into one brand-coloured ribbon */
.filmstrip__cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--sky-deep) 28%, transparent),
    color-mix(in srgb, var(--sky-ink) 34%, transparent));
  mix-blend-mode: multiply; opacity: 0.55;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.filmstrip__cell:hover img { filter: none; transform: scale(1.05); }
.filmstrip__cell:hover::after { opacity: 0; }

@keyframes filmUp    { from { transform: translateY(0); }     to { transform: translateY(-50%); } }
@keyframes filmDown  { from { transform: translateY(-50%); }  to { transform: translateY(0); } }
@keyframes filmLeft  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes filmRight { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .filmstrip__track { animation: none; }
}

/* ---- IMPACT — "measured in lives" (bespoke animated SVG per stat) ----
   Each cell: a documentary photo (the lives) with a hand-drawn diagram that
   explains its own metric drawn over it, the whole scene dissolving down into
   a warm-white readout (no mask-image — iOS-safe gradient fade). */
.impact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); margin-top: var(--space-2xl); }

.impact-cell {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: var(--radius-xl);
  background: var(--warm-white);
  border: 1px solid var(--hairline-accent);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.impact-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Scene = full-colour photo; the bespoke diagram sits as a soft sky watermark in
   the card's bottom-right corner (see .impact-cell__diagram). */
.impact-cell__scene { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.impact-cell__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 32%;
  transition: transform 0.7s var(--ease-out);
}
.impact-cell:hover .impact-cell__photo { transform: scale(1.05); }
.impact-cell__scene--branches .impact-cell__photo { object-position: center 42%; }

/* Bottom-only fade into the card surface before the readout */
.impact-cell__scene::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 80%, color-mix(in srgb, var(--warm-white) 70%, transparent) 92%, var(--warm-white) 100%);
}

/* The bespoke diagram as a refined sky watermark anchored to the bottom-right of
   the whole card (over the readout's open corner). It sits below the readout text
   (z-1 < z-4), so the words always stay crisp on top. */
.impact-cell__diagram {
  position: absolute; right: clamp(0.6rem, 2vw, 1.15rem); bottom: clamp(0.55rem, 2vw, 1.1rem);
  z-index: 1; width: clamp(118px, 27%, 172px); aspect-ratio: 1.52;
  opacity: 0.9; pointer-events: none;
}
.impact-cell__diagram .dgm { width: 100%; height: 100%; display: block; overflow: visible; }

/* Readout */
.impact-cell__readout {
  position: relative; z-index: 4; margin-top: -1.4rem;
  padding: 0 clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.4vw, 1.9rem);
  text-align: left;
}
.impact-cell__num {
  font-family: var(--font-display); font-weight: 360; line-height: 1;
  font-size: clamp(2.1rem, 1.1rem + 3.2vw, 3.1rem);
  color: var(--ink); letter-spacing: var(--tracking-tight);
}
.impact-cell__tag { margin-top: 0.45rem; font-size: var(--text-base); font-weight: 700; color: var(--sky-ink); letter-spacing: 0.01em; }
.impact-cell__label { margin-top: 0.3rem; font-size: var(--text-sm); color: var(--text-muted); max-width: 42ch; line-height: 1.45; }

/* ---- Diagram paint — fine LIGHT-BLUE luxe line-art on the warm-white card ----- */
.dgm-spoke, .dgm-link, .dgm-thread, .dgm-stem, .dgm-orbit, .dgm-pin-body, .dgm-leaf, .dgm-pulse {
  fill: none; stroke: var(--sky); stroke-linecap: round; stroke-linejoin: round;
}
.dgm-spoke, .dgm-link { stroke-width: 0.9; opacity: 0.95; }
.dgm-thread { stroke-width: 1; stroke-dasharray: 0.5 6; opacity: 0.95; }
.dgm-stem { stroke-width: 1.3; }
.dgm-orbit { stroke-width: 0.8; stroke-dasharray: 2.5 5; opacity: 0.55; }
.dgm-pin-body { stroke-width: 1.1; fill: color-mix(in srgb, var(--sky) 15%, transparent); }
.dgm-leaf { stroke-width: 1.2; fill: color-mix(in srgb, var(--sky) 15%, transparent); }
.dgm-pulse { stroke-width: 0.9; }
.dgm-node, .dgm-pin-dot, .dgm-spark { fill: var(--sky-deep); }
/* Partner nodes: soft sky plate, deep-sky acronym */
.dgm-inst-box { fill: color-mix(in srgb, var(--sky) 14%, transparent); stroke: var(--sky); stroke-width: 0.8; }
.dgm-inst-text { fill: var(--sky-ink); font-family: var(--font-body); font-size: 8.5px; font-weight: 700; letter-spacing: 0.2px; }
/* The RestartME mark in its natural sky-blue (no white silhouette over the card) */
.dgm-logo { filter: none; }

/* ---- Diagram motion (draws in on reveal, then idles alive) ---- */
/* Lines: hidden, drawn on .is-visible (staggered by --i) */
.dgm-spoke, .dgm-link, .dgm-stem {
  stroke-dasharray: 240; stroke-dashoffset: 240;
  transition: stroke-dashoffset 0.8s var(--ease-out) calc(var(--i, 0) * 70ms + 0.45s);
}
.impact-cell.is-visible .dgm-spoke,
.impact-cell.is-visible .dgm-link,
.impact-cell.is-visible .dgm-stem { stroke-dashoffset: 0; }

/* The archipelago route stays dotted; capital crawls north→south along it */
.impact-cell.is-visible .dgm-thread { animation: dgmThread 1.8s linear infinite; }
@keyframes dgmThread { to { stroke-dashoffset: -7; } }

/* The white mark settles in first as the anchor */
.dgm-logo { opacity: 0; transition: opacity 0.55s ease 0.15s; }
.impact-cell.is-visible .dgm-logo { opacity: 1; }

/* Map pins drop down the chain, staggered (outer g animates, inner g positions) */
.dgm-pin {
  transform-box: fill-box; transform-origin: center bottom;
  opacity: 0; transform: translateY(-13px) scale(0.7);
  transition: transform 0.55s var(--ease-out) calc(var(--i, 0) * 0.12s + 0.3s), opacity 0.4s ease calc(var(--i, 0) * 0.12s + 0.3s);
}
.impact-cell.is-visible .dgm-pin { opacity: 1; transform: none; }

/* Nodes & partner plates pop in */
.dgm-node, .dgm-inst {
  transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
  transition-delay: calc(var(--i, 0) * 70ms + 0.55s);
}
.impact-cell.is-visible .dgm-node,
.impact-cell.is-visible .dgm-inst { transform: scale(1); opacity: 1; }

/* Leaves & bud unfurl from their stem attach-point */
.dgm-leaf { transform-box: fill-box; transform: scale(0); opacity: 0; transition: transform 0.6s var(--ease-out) 0.7s, opacity 0.4s ease 0.7s; }
.dgm-leaf--l { transform-origin: 100% 100%; }
.dgm-leaf--r { transform-origin: 0% 100%; transition-delay: 0.92s; }
.dgm-leaf--t { transform-origin: 50% 100%; transition-delay: 1.12s; }
.impact-cell.is-visible .dgm-leaf { transform: scale(1); opacity: 1; }

/* Idle loops (subtle, reduced-motion safe) */
.dgm-pulse { transform-box: fill-box; transform-origin: center; opacity: 0; }
.impact-cell.is-visible .dgm-pulse { animation: dgmPulse 3.6s var(--ease-out) infinite; }
.impact-cell.is-visible .dgm-pulse--2 { animation-delay: 1.8s; }
@keyframes dgmPulse { 0% { transform: scale(0.4); opacity: 0.5; } 70% { opacity: 0; } 100% { transform: scale(3); opacity: 0; } }

.impact-cell.is-visible .dgm-orbit { animation: dgmSpin 50s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dgmSpin { to { transform: rotate(360deg); } }

.impact-cell.is-visible .dgm-spark { animation: dgmTwinkle 3s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
.impact-cell.is-visible .dgm-spark.s2 { animation-delay: 1.4s; }
@keyframes dgmTwinkle { 0%, 100% { transform: scale(0.6) rotate(0); opacity: 0.3; } 50% { transform: scale(1.15) rotate(90deg); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .dgm-spoke, .dgm-link, .dgm-stem { transition: none; stroke-dashoffset: 0; }
  .dgm-node, .dgm-inst, .dgm-leaf, .dgm-pin { transition: none; transform: none; opacity: 1; }
  .dgm-logo { transition: none; opacity: 1; }
  .dgm-pulse, .dgm-orbit, .dgm-spark, .dgm-thread { animation: none !important; }
  .dgm-pulse { opacity: 0; }
  .impact-cell:hover { transform: none; }
}

/* ---- PROGRAMS preview ------------------------------------- */
.prog-list { margin-top: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-lg); }
.prog-row {
  display: grid; grid-template-columns: auto 180px 1fr auto;
  align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: var(--space-lg) var(--space-xl);
  background: var(--warm-white);
  border: 1px solid var(--divider);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.prog-row__index { font-size: var(--text-xl); opacity: 0.7; }
.prog-row__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/10; }
.prog-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.prog-row:hover .prog-row__media img { transform: scale(1.06); }
.prog-row__body h3 { margin: 0.5rem 0; }
.prog-row__body p { max-width: 52ch; }
.prog-row__arrow { color: var(--accent); }
.prog-row__arrow svg { width: 26px; height: 26px; transition: transform var(--dur-base) var(--ease-out); }
.prog-row:hover .prog-row__arrow svg { transform: translate(4px, -4px); }

/* ---- STORIES (testimonials) ------------------------------- */
.stories__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.stories__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.story-card { display: flex; flex-direction: column; }
.story-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sky-soft); }
.story-card__media > img:not(.story-card__logo) { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.story-card:hover .story-card__media > img:not(.story-card__logo) { transform: scale(1.05); }
/* Soft scrim anchors the superimposed mark so it reads on any photo */
.story-card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim-soft); pointer-events: none; }
/* The transparent sky mark, flipped to a crisp white stamp = premium */
.story-card__logo {
  position: absolute; left: var(--space-md); bottom: var(--space-md); z-index: 2;
  width: clamp(34px, 4.2vw, 46px); height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 3px 12px rgba(8,26,39,0.5));
  opacity: 0.96;
}
.story-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.story-card__mark svg { width: 26px; height: 26px; color: var(--sky-deep); }
.story-card__quote { font-family: var(--font-display); font-style: italic; font-size: var(--text-base); line-height: 1.5; color: var(--text); }
.story-card__by { margin-top: auto; padding-top: var(--space-sm); }
.story-card__name { display: block; font-weight: 600; color: var(--ink); font-size: var(--text-sm); }
.story-card__meta { display: block; font-size: var(--text-xs); color: var(--text-faint); margin-top: 0.15rem; }

/* ---- CLOSING CTA (luminous, light) ------------------------ */
.home-cta { text-align: center; }
.home-cta .display-hero { color: var(--ink); }
.home-cta .home-hero__emph { color: var(--sky-deep); }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 1024px) {
  .impact__grid { grid-template-columns: repeat(2, 1fr); }
  .stories__grid { grid-template-columns: repeat(2, 1fr); }
  .prog-row { grid-template-columns: auto 1fr auto; }
  .prog-row__media { display: none; }
  /* Narrower filmstrip so the copy keeps room */
  .home-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 3vw, 3rem); }
  .home-hero__film { height: clamp(380px, 56vh, 520px); }
}
@media (max-width: 860px) {
  /* Stack: eyebrow → filmstrip → copy (title + paragraph) → buttons, airy spacing.
     Rail is hidden on mobile (it's a desktop flourish). */
  .home-hero { min-height: auto; padding-top: clamp(5.5rem, 10vh, 8rem); }
  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "film" "copy" "cta";
    grid-template-rows: auto auto auto auto;
    row-gap: 0;
  }
  .home-hero__eyebrow { margin-bottom: clamp(1.5rem, 5vw, 2.25rem); }
  .home-hero__copy { max-width: 100%; }
  .home-hero__title { margin-top: 0; }
  .home-hero__rail { display: none; }
  .home-hero__cta { margin-top: clamp(1.5rem, 5vw, 2.2rem); }

  .home-hero__film {
    display: flex; flex-direction: column;
    height: auto; margin: 0 0 clamp(1.9rem, 6vw, 2.9rem); gap: clamp(0.6rem, 2vw, 0.9rem);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .filmstrip__track {
    flex-direction: row;
    height: clamp(132px, 36vw, 188px);
    align-items: stretch;
  }
  .filmstrip--down .filmstrip__track { animation-name: filmLeft;  animation-duration: 40s; }
  .filmstrip--up   .filmstrip__track { animation-name: filmRight; animation-duration: 48s; }
  .filmstrip__cell { height: 100%; width: auto; aspect-ratio: 4 / 5; }
}
@media (max-width: 768px) {
  .home-hero__rail { width: 100%; }
}
@media (max-width: 620px) {
  /* One rich cell per row on phones — each stat is a feature, not a tile */
  .impact__grid { grid-template-columns: 1fr; gap: 1rem; }
  /* Reserve the bottom-right diagram's column so the readout text wraps to a new
     line and never runs into the SVG. */
  .impact-cell__readout { padding-right: clamp(7.5rem, 34%, 10rem); }
}
@media (max-width: 560px) {
  .stories__grid { grid-template-columns: 1fr; }
  .prog-row { grid-template-columns: 1fr; }
  .prog-row__arrow { display: none; }
  .home-hero__rail { flex-direction: column; gap: var(--space-md); }
  .home-hero__stat + .home-hero__stat { padding-left: 0; border-left: 0; padding-top: var(--space-md); border-top: 1px solid var(--hairline-accent); }
}