/*
  Homepage-only styles. Shared chrome (header/footer/nav) lives in site-shell.css.
  Layout primitives (.container, .section, .stack, .on-dark, .btn, .section-heading)
  live in layout.css and are reused by every page, not just the homepage.
*/

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24)) clamp(var(--space-8), 6vw, var(--space-16));
}

.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.hero__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-4);
  padding: var(--space-1) var(--space-3);
  color: var(--color-graphite);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-soft-gray);
  border-radius: var(--radius-sm);
}

.hero__headline {
  max-width: 18ch;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  letter-spacing: -0.01em;
}

.hero__subhead {
  max-width: 34ch;
  margin-block-end: var(--space-6);
  color: var(--color-graphite);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.hero__body {
  max-width: var(--container-reading);
  margin-block-end: var(--space-8);
  color: var(--color-slate);
  font-size: var(--font-size-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 18rem;
  padding: var(--space-6);
  background: var(--color-soft-gray);
  border-radius: var(--radius-md);
}

.hero__art img {
  width: 100%;
  max-width: 20rem;
  height: auto;
}

@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .hero__art { min-height: 26rem; }
}

/* ---------- Trust strip ---------- */

.trust-strip {
  padding-block: var(--space-8);
  border-block: var(--border-width) solid var(--border-color);
}

.trust-strip__list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-strip__list dt {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.trust-strip__list dd {
  margin: var(--space-1) 0 0;
  color: var(--color-slate);
  font-size: var(--font-size-sm);
}

@media (min-width: 48rem) {
  .trust-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Six-card fan ("Who it's for") ---------- */

.card-fan {
  position: relative;
  /* 6 cards, ~55vh of scroll distance to reveal each one, plus one viewport to pin against. */
  min-height: calc(100vh + 330vh);
}

.card-fan--static { min-height: 0; }

.card-fan__card:nth-child(1) { --rot: -4deg; --dx: -0.75rem; z-index: 1; }
.card-fan__card:nth-child(2) { --rot: 3deg; --dx: 0.5rem; z-index: 2; }
.card-fan__card:nth-child(3) { --rot: -3deg; --dx: -0.25rem; z-index: 3; }
.card-fan__card:nth-child(4) { --rot: 4deg; --dx: 1rem; z-index: 4; }
.card-fan__card:nth-child(5) { --rot: -2deg; --dx: -1rem; z-index: 5; }
.card-fan__card:nth-child(6) { --rot: 3deg; --dx: 0.25rem; z-index: 6; }

.card-fan__pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-block: var(--space-12);
  overflow: hidden;
}

.card-fan__heading {
  position: relative;
  z-index: 0;
  margin-inline: auto;
  text-align: center;
}

.card-fan__stack {
  position: relative;
  width: 100%;
  max-width: 22rem;
  height: clamp(16rem, 40vh, 22rem);
  margin: var(--space-8) auto 0;
}

.card-fan__card {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  width: clamp(12rem, 60vw, 17rem);
  height: 100%;
  padding: var(--space-6);
  color: var(--color-ink);
  background: var(--color-soft-gray);
  border-radius: var(--radius-md);
  box-shadow: 0 1.25rem 2.5rem rgba(17, 19, 21, 0.16);
  will-change: transform, opacity;
}

.card-fan__card h3 {
  margin-block-end: var(--space-3);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
}

.card-fan__card p {
  margin: 0;
  max-width: none;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}

.card-fan__card--dark {
  color: var(--color-white);
  background: var(--color-charcoal);
}

.card-fan__card--dark.card-fan__card--alt { background: var(--color-graphite); }
.card-fan__card--light.card-fan__card--alt { background: var(--color-white); border: var(--border-width) solid var(--border-color); }

/* JS sets --progress (0–1) per card via inline custom property; see scripts/home.js */
.card-fan__card {
  --p: 0;
  --rot: 0deg;
  --dx: 0px;
  opacity: var(--p);
  transform:
    translate(calc(-50% + (var(--dx) * var(--p))), calc((1 - var(--p)) * 2.5rem))
    rotate(calc(var(--rot) * var(--p)));
}

/* Static, non-animated fallback: prefers-reduced-motion, or JS unavailable/disabled. */
.card-fan--static .card-fan__pin {
  position: static;
  min-height: 0;
  padding-block: 0;
}

.card-fan--static .card-fan__stack {
  display: grid;
  gap: var(--space-4);
  max-width: none;
  height: auto;
}

.card-fan--static .card-fan__card {
  position: static;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
}

@media (min-width: 48rem) {
  .card-fan--static .card-fan__stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .card-fan--static .card-fan__stack { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card-fan--static .card-fan__card h3 { font-size: var(--font-size-md); }
}

/* ---------- Services ---------- */

.services { background: var(--color-charcoal); }

.services__scroller {
  display: flex;
  gap: var(--space-4);
  margin: 0 calc(var(--page-gutter) * -1);
  padding: var(--space-2) var(--page-gutter) var(--space-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--page-gutter);
  -webkit-overflow-scrolling: touch;
}

.services__card-wrap {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.services__card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(20rem, 82vw);
  padding: var(--space-6);
  color: var(--color-white);
  text-decoration: none;
  background: var(--color-graphite);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
}

.services__card:hover { background: var(--color-charcoal); outline: var(--border-width) solid var(--color-gray); }

.services__card img {
  width: 3rem;
  height: 3rem;
  margin-block-end: var(--space-4);
}

.services__card h3 {
  margin-block-end: var(--space-2);
  font-size: var(--font-size-lg);
}

.services__card p {
  max-width: none;
  margin-block-end: var(--space-4);
  color: var(--color-gray);
  font-size: var(--font-size-sm);
}

.services__card .services__link {
  margin-block-start: auto;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-underline-offset: 0.2em;
}

.services__controls {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.services__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-white);
  background: transparent;
  border: var(--border-width) solid var(--color-gray);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.services__nav-btn:hover { background: var(--color-graphite); }

.services__nav-btn svg { width: 1rem; height: 1rem; }

/* ---------- Four-column value section ---------- */

.value__grid {
  display: grid;
  gap: var(--space-6);
}

.value__item {
  padding: var(--space-6);
  border-block-start: 2px solid var(--color-ink);
}

.value__item h3 {
  margin-block-end: var(--space-2);
  font-size: var(--font-size-md);
}

.value__item p {
  max-width: none;
  color: var(--color-slate);
  font-size: var(--font-size-sm);
}

@media (min-width: 48rem) {
  .value__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .value__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Story bands ---------- */

.story {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: clamp(var(--space-12), 8vw, var(--space-16));
}

.story--alt { background: var(--color-soft-gray); }

.story__step {
  display: inline-block;
  margin-block-end: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
}

.story__slogan { margin-block-end: var(--space-2); font-size: clamp(1.5rem, 3vw, 2.25rem); }

.story__punch {
  margin-block-end: var(--space-4);
  color: var(--color-graphite);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
}

.story__body { max-width: 40ch; color: var(--color-slate); }

.story__art {
  display: flex;
  justify-content: center;
}

.story__art img {
  width: 100%;
  max-width: 16rem;
  height: auto;
}

@media (min-width: 64rem) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: 0; }
  .story__copy { padding-inline-start: var(--page-gutter); }
  .story__art { padding-inline-end: var(--page-gutter); }
  .story--alt .story__copy { order: 2; padding-inline: 0 var(--page-gutter); }
  .story--alt .story__art { padding-inline: var(--page-gutter) 0; }
}

/* ---------- Closing CTA ---------- */

.cta-band {
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  text-align: center;
  background: var(--color-charcoal);
}

.cta-band__title { max-width: 24ch; margin-inline: auto; }

.cta-band__body {
  max-width: 40ch;
  margin: var(--space-3) auto var(--space-8);
  color: var(--color-gray);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .card-fan__card { transition: none !important; }
}