/* ==========================================================================
   Home page — assets/css/pages/home.css
   An overview and a way in: hero · proposition · proof strip (results) ·
   gateway (one row per menu section) · testimonials.
   Uses the tokens and components in main.css; nothing here hard-codes colour.
   ========================================================================== */

/* ------------------------------------------------------------------- Hero
   Desktop: the hero is exactly one screen. The data field is a full-bleed band
   anchored to the bottom and sized only from viewport units, so hero-field.js
   geometry never depends on text metrics. Its upper part (empty once the intro
   scatter resolves) sits behind the copy; the type is sized in svh to stay clear
   of the readout. ≤900px: copy and field simply stack.                       */

.hero {
  --field-h: 62svh;

  position: relative;
  min-height: max(100svh, 44rem);
  overflow: hidden;
}

/* Grain sits above the canvas so the texture is continuous. */
.hero.grain::after {
  z-index: 3;
}

/* The Field: a quiet dot grid on the open right side, fading before the braid. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 30% 40%;
  z-index: 2;
  background-image: radial-gradient(circle at 1px 1px, rgb(245 242 234 / 22%) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 70% at 70% 35%, #000 10%, transparent 75%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 3;
  padding-top: calc(var(--header-h) + 9svh);
}

.hero__title {
  font-size: min(var(--fs-display-xl), 9.8svh, 8.3vw);
}

.hero__title em {
  padding-right: 0.04em;

  /* "pressure points." never splits across lines (no lone "points." widow on phones). */
  white-space: nowrap;
}

.hero__sub {
  max-width: 33em;
  margin-top: 3.4svh;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.6svh;
}


.hero__scroll {
  position: absolute;
  bottom: 0.85rem;
  left: max(var(--gutter), calc((100% - var(--max)) / 2));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 2.75rem;
  font-size: var(--fs-mono-min);
  color: var(--muted);
  transition: color 0.3s;
}

.hero__scroll:hover {
  color: var(--text);
}

.hero__scroll-line {
  position: relative;
  width: 3rem;
  height: 1px;
  overflow: hidden;
  background: var(--ink-line-strong);
}

/* A few passes, then still: motion that explains, not a loop. */
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--on-ink);
  transform: translateX(-100%);
  animation: hero-scroll 2.4s var(--ease-in-out) 2.6s 3;
}

@keyframes hero-scroll {
  0% {
    transform: translateX(-100%);
  }

  55% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}

.hero__field {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: var(--field-h);
}

.hero-field canvas {
  position: absolute;
  inset: 0;
}

.hero-field__labels {
  list-style: none;
  padding: 0;
}

.hero-field__label {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-min);
  font-weight: 450;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-ink-muted);
}

.hero-field__label--pressure {
  color: var(--signal);
}

.hero-field__short {
  display: none;
}

/* Without JS the canvas is blank: lay the labels out as a quiet static chain. */
html:not(.js) .hero-field__labels {
  position: absolute;
  inset: 72% var(--gutter) auto;
  display: flex;
  justify-content: space-between;
}

html:not(.js) .hero-field__label {
  position: static;
  transform: none;
}

/* Hide labels until hero-field.js has positioned them, then fade in with the intro. */
.js .hero-field [data-hero-label]:not([style]) {
  visibility: hidden;
}

.js .hero-field__label {
  animation: home-fade 1.2s var(--ease-out) 1.6s backwards;
}

@keyframes home-fade {
  from {
    opacity: 0;
  }
}

@media (height <= 800px) and (width > 900px) {
  .hero__title {
    font-size: min(var(--fs-display-xl), 9svh, 8.3vw);
  }

  .hero__sub {
    margin-top: 2.6svh;
    font-size: 1.0625rem;
  }

  .hero__actions {
    margin-top: 2svh;
  }
}

@media (width <= 900px) {
  .hero {
    min-height: 0;
  }

  .hero__content {
    padding-top: calc(var(--header-h) + clamp(2.25rem, 6vw, 4rem));
  }

  .hero__title {
    font-size: clamp(2.4rem, 1rem + 7.4vw, 5.25rem);
  }

  .hero__sub {
    margin-top: 1.75rem;
  }

  .hero__actions {
    margin-top: 1.75rem;
  }

  /* The field's empty upper band tucks under the hero actions. */
  .hero__field {
    position: relative;
    inset: auto;
    height: clamp(20rem, 42vw, 27rem);
    margin-top: clamp(-6rem, -8vw, -4rem);
  }

  .hero__scroll {
    display: none;
  }
}

@media (width <= 720px) {
  .hero__sub {
    font-size: 1.125rem;
  }

  /* The long primary CTA may wrap rather than run off a narrow screen. */
  .hero__actions .btn {
    max-width: 100%;
    white-space: normal;
  }

  .hero-field__label {
    letter-spacing: 0.06em;
  }
}

/* Phones: the field's empty upper band tucks under the hero actions. */
@media (width <= 560px) {
  .hero__field {
    margin-top: -6.5rem;
  }
}

@media (width <= 480px) {
  .hero-field__full {
    display: none;
  }

  .hero-field__short {
    display: inline;
  }
}

/* Very narrow: the station labels are decorative (aria-hidden) and may drop to 10px to fit. */
@media (width <= 400px) {
  .hero-field__label {
    font-size: 0.625rem;
    letter-spacing: 0.02em;
  }
}

/* ------------------------------------------------------------ Proposition */

.proposition__eyebrow {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.proposition__statement {
  max-width: 16.5em;
}

.proposition__statement em {
  font-weight: 380;
}

.proposition__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  margin-top: clamp(4rem, 3rem + 5vw, 7.5rem);
}

.proposition__fact {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.proposition__fact dt {
  color: var(--muted);
}

.proposition__n {
  margin-right: 0.9em;
  color: var(--teal);
}

.proposition__fact dd {
  margin-top: 0.85rem;
  max-width: 24em;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text);
}

@media (width <= 1080px) {
  .proposition__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 560px) {
  .proposition__facts {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ------------------------------------------------------------ Proof strip
   Straight after "What is a Justice Audit?": four sourced results and who has commissioned
   the work. Reuses the .result cards; the full country story stays in "Where we work".     */

.proof__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: clamp(2rem, 3vw, 2.75rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--text);
}

.proof__title {
  font-size: var(--fs-h3);
  letter-spacing: -0.015em;
}

.proof__reach {
  font-size: var(--fs-mono-min);
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* The one key figure on the strip. */
.proof .result:first-child .result__value {
  color: var(--signal-text);
}

.proof__funders {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.proof__funders-label {
  font-size: var(--fs-mono-min);
  letter-spacing: 0.12em;
  color: var(--muted);
}

.proof__funders-list {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
}

/* --------------------------------------------------- Results (evidence strip) */

.results__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem var(--gutter);
  list-style: none;
  padding: 0;
}

.result {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
}

.result__value {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2.25rem + 3vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.result__unit {
  margin-left: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.28em;
  letter-spacing: 0;
  color: var(--muted);
}

.result__label {
  max-width: 22em;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.result__source {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--fs-mono-min);
  color: var(--muted);
}

@media (width <= 1080px) {
  .results__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 560px) {
  .results__list {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* ------------------------------------------------------------ Testimonials */

.voices__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: 3rem var(--gutter);
}

.voices__head {
  grid-column: 1 / span 4;
  grid-row: 1;
}

.voices__title {
  margin-top: 1.5rem;
}

.voices__lead {
  max-width: 22em;
  margin-top: 1.5rem;
  color: var(--muted);
}

.voices__stage {
  position: relative;
  grid-column: 6 / -1;
  grid-row: 1 / span 2;
  padding-top: clamp(3.5rem, 2rem + 4vw, 5.5rem);
}

/* Oversized opening quote, quiet in teal. */
.voices__stage::before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.06em;
  font-family: var(--font-display);
  font-size: clamp(7rem, 5rem + 6vw, 11rem);
  line-height: 0.8;
  color: var(--teal);
  opacity: 0.85;
}

.voices__track {
  display: grid;
}

.voice {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.js .voice {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.9s var(--ease-out),
    visibility 0s 0.7s;
}

.js .voice.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.9s var(--ease-out) 0.15s,
    transform 1.1s var(--ease-out) 0.15s,
    visibility 0s;
}

.voice__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.05rem + 2.2vw, 3.25rem);
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: pretty;
}

.voice__quote p::after {
  content: "”";
}

.voice__cite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2rem, 3vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.voice__source {
  font-weight: 560;
  letter-spacing: -0.01em;
}

.voice__meta {
  color: var(--muted);
}

.voice__product {
  margin-left: auto;
  color: var(--text);
  transition:
    border-color 0.3s,
    background-color 0.3s;
}

.voice__product:hover {
  border-color: var(--text);
  background: var(--paper);
}

.voices__controls {
  grid-column: 1 / span 4;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.voices__controls[hidden],
.voices__btn[hidden] {
  display: none;
}

.voices__btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  transition:
    background-color 0.35s var(--ease-out),
    border-color 0.35s,
    color 0.35s;
}

.voices__btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.voices__btn svg {
  width: 1rem;
  height: 1rem;
}

.voices__icon-play,
.voices__btn--toggle.is-paused .voices__icon-pause {
  display: none;
}

.voices__btn--toggle.is-paused .voices__icon-play {
  display: block;
}

.voices__count {
  margin-left: 1rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.voices__count span:first-child {
  color: var(--text);
}

.voices__progress {
  position: relative;
  flex-basis: 100%;
  height: 1px;
  margin-top: 1.25rem;
  overflow: hidden;
  background: var(--line-strong);
}

.voices__progress-fill {
  position: absolute;
  inset: 0;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
}

@media (width <= 900px) {
  .voices__inner {
    grid-template-rows: none;
    row-gap: 2.5rem;
  }

  .voices__head,
  .voices__stage,
  .voices__controls {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .voice {
    justify-content: flex-start;
  }

  .voice__product {
    margin-left: 0;
  }
}

/* ------------------------------------------------------- Hero "How it works" link */

.hero__how {
  color: var(--on-ink);
}

.hero__actions .hero__how {
  margin-left: 0.75rem;
}

/* ------------------------------------------------------------ Gateway
   The home page's way in (generated by tools/partials.mjs from partials/structure.json,
   @gateway): one numbered row per menu section. The left of each row is one big link to the
   section page (plate, name, line); the pages inside the section sit as plain links on the right. */

.gateway {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.gateway__item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem var(--gutter);
  align-items: center;
  padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-bottom: 1px solid var(--line-strong);
}

.gateway__main {
  --frame-color: var(--signal);
  --frame-size: 12px;
  --frame-gap: 8px;

  grid-column: 1 / span 8;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  align-items: center;
}

.gateway__plate {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
}

.gateway__plate img {
  transition: transform 1.2s var(--ease-out);
}

.gateway__main:hover .gateway__plate img,
.gateway__main:focus-visible .gateway__plate img {
  transform: scale(1.04);
}

.gateway__plate--applications img {
  object-position: 50% 72%;
}

.gateway__text {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.gateway__n {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  color: var(--signal-text);
}

.gateway__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.gateway__line {
  max-width: 38ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--muted);
}

.gateway__go {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.4rem;
  font-weight: 500;
}

.gateway__go span {
  background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.45s var(--ease-out);
}

.gateway__go svg {
  width: 1rem;
  height: 1rem;
  color: var(--signal);
  transition: transform 0.45s var(--ease-out);
}

.gateway__main:hover .gateway__go span,
.gateway__main:focus-visible .gateway__go span {
  background-size: 100% 1px;
}

.gateway__main:hover .gateway__go svg,
.gateway__main:focus-visible .gateway__go svg {
  transform: translateX(4px);
}

.gateway__links {
  grid-column: 9 / -1;
  align-self: center;
  list-style: none;
  padding: 0 0 0 clamp(1rem, 0.5rem + 1vw, 1.75rem);
  border-left: 1px solid var(--line);
}

.gateway__links a {
  display: block;
  padding-block: 0.5rem;
  font-size: 1rem;
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.gateway__links a:hover {
  color: var(--text);
  text-decoration-color: currentcolor;
}

@media (width <= 900px) {
  .gateway__main,
  .gateway__links {
    grid-column: 1 / -1;
  }

  .gateway__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    padding-left: 0;
    border-left: 0;
  }
}

@media (width <= 600px) {
  .gateway__main {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  .gateway__plate {
    aspect-ratio: 1;
  }

  .gateway__line {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after {
    animation: none;
  }
}