/* /om-os — scrollbar Om os-side: statement → coda-bro → team → CTA */

.about-page {
  background: var(--ink);
  color: var(--on-dark);
}

/* Om os-blokken får solid ink (ingen WebGL-baggrund her). */
.about-page__about.about.section {
  background: var(--ink);
  min-height: min(92svh, 52rem);
  padding-block:
    calc(var(--hdr-h) + clamp(4rem, 12vh, 8rem))
    clamp(3rem, 8vh, 5rem);
}

/* ---------- Bro: coda som sticky overgang ---------- */

.about-bridge {
  position: relative;
  z-index: 2;
  height: 160vh;
  background: var(--ink);
}

.about-bridge__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--gut);
  overflow: hidden;
}

.about-bridge__coda {
  margin: 0;
  text-align: center;
  font-size: clamp(2.8rem, 9vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--on-dark);
  /* --bridge sættes af about-bridge.js: 0 = ink, 1 = bone-klar */
  opacity: calc(0.35 + var(--bridge, 0) * 0.65);
  transform: scale(calc(0.92 + var(--bridge, 0) * 0.08));
  transition: none;
}

.about-bridge__coda span {
  display: block;
}

.about-bridge__veil {
  position: absolute;
  inset: 0;
  background: var(--bone);
  opacity: var(--bridge, 0);
  pointer-events: none;
  z-index: -1;
}

/* Når broen er færdig, skal team-bone kunne tage over uden hul. */
.about-page .team.section {
  margin-top: 0;
}

/* Team-pin uden wipe: lad kortene stå i normal flow-højde. */
.about-page__team-pin .team-pin__track {
  height: auto;
}

.about-page__team-pin .team-frame {
  position: relative;
  top: auto;
  min-height: 0;
  padding-bottom: clamp(3rem, 8vh, 5rem);
}

/* ---------- Afslutning ---------- */

.about-close {
  position: relative;
  z-index: 3;
  background: var(--ink);
  color: var(--on-dark);
  padding:
    clamp(5rem, 14vh, 9rem)
    var(--gut)
    clamp(4rem, 10vh, 7rem);
}

.about-close__inner {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.about-close__eyebrow {
  margin: 0 0 1rem;
  color: var(--on-dark-dim);
}

.about-close__title {
  margin: 0 0 1.75rem;
  color: var(--on-dark);
}

.about-close__cta {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .about-bridge__coda {
    opacity: 1;
    transform: none;
  }
  .about-bridge__veil {
    opacity: 1;
  }
}