/* About — øverst #d92323 (video), tekst #dc3231 — som forsiden hero → hvorfor os */
.about-page {
  --a-accent: #dc3231;
  --a-hero-red: #d92323;
  --a-ink: #0a0a0a;
  --a-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--a-hero-red);
  color: #fff;
}

.about-page > main {
  background: transparent;
}

@keyframes about-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* —— Story: samme hero-titel-typografi som work.html (.work-hero__title) —— */
.about-story {
  background: var(--a-hero-red);
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2.5rem)
    clamp(1.25rem, 3vw, 2rem);
  position: relative;
}

.about-story__inner {
  max-width: 50rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Matcher .work-hero__title (work.css): størrelse, caps, letter-spacing */
.about-story__est {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.65rem, 4.5vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  margin: 0 0 clamp(1.25rem, 3vw, 1.85rem);
  max-width: 100%;
  animation: about-work-title-in 0.75s var(--a-ease) 0.06s both;
}

@keyframes about-work-title-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Vimeo 9:16 — samme bredde som ét felt i .work-row--phones (work.css / .work-bento) */
.about-story__video {
  --about-phone-gap: clamp(0.85rem, 2vw, 1.35rem);
  --about-bento-cap: 43.2rem;
  width: 100%;
  max-width: calc(
    (min(var(--about-bento-cap), 60vw) - var(--about-phone-gap)) / 2
  );
  margin: 0 auto;
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  background: #050505;
  animation: about-fade-up 0.9s var(--a-ease) 0.08s both;
}

@media (max-width: 640px) {
  .about-story__video {
    max-width: min(13rem, 88vw);
  }
}

.about-story__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Fuld sektion som .why-us på forsiden (why-us.css) */
.about-narrative {
  background-color: var(--a-accent);
  color: #fff;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1rem, 3vw, 1.75rem)
    clamp(2.75rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.about-narrative__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(50rem, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-prose {
  --about-prose-fs: clamp(1rem, 1.25vw, 1.125rem);
  font-family: var(--font-sans);
  font-size: var(--about-prose-fs);
  line-height: 1.65;
  font-weight: 400;
  color: var(--a-ink);
  text-align: center;
  width: 100%;
  max-width: 36rem;
  margin: 0;
  padding: clamp(1.65rem, 4vw, 2.5rem) clamp(1.35rem, 4vw, 2rem);
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  -webkit-font-smoothing: antialiased;
}

/* Åbning + standout: samme skala og vægt (fx lead vs «Men det har også…») */
.about-prose__lead,
.about-prose__standout {
  font-size: var(--about-prose-fs);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: normal;
}

.about-prose__lead {
  font-family: var(--font-sans);
  margin: 0 0 clamp(0.85rem, 2.2vw, 1.15rem);
  color: var(--a-ink);
  text-align: center;
  animation: about-fade-up 0.85s var(--a-ease) 0.08s both;
}

.about-prose__lead-line {
  display: block;
}

.about-prose__lead-line + .about-prose__lead-line {
  margin-top: 0.02em;
}

.about-prose > p:not(.about-prose__lead) {
  margin: 0 0 clamp(0.65rem, 1.75vw, 0.95rem);
}

.about-prose > p:not(.about-prose__lead):last-child {
  margin-bottom: 0;
}

.about-prose strong {
  font-weight: 700;
  color: var(--a-ink);
}

.about-prose__standout {
  color: var(--a-ink);
  margin-top: clamp(0.85rem, 2.2vw, 1.15rem);
  margin-bottom: clamp(0.85rem, 2.2vw, 1.15rem) !important;
}

/* —— Closing block —— samme typografiske rytme som brødtekst —— */
.about-closing {
  margin-top: clamp(1rem, 2.75vw, 1.5rem);
  padding-top: 0;
  text-align: center;
  border-top: none;
  position: relative;
}

.about-closing__highlight {
  font-family: var(--font-sans);
  font-size: var(--about-prose-fs);
  font-weight: 400;
  font-style: normal;
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--a-ink);
  max-width: none;
  margin: 0 0 clamp(0.65rem, 1.75vw, 0.95rem);
}

.about-signature {
  font-family: var(--font-sans);
  font-size: var(--about-prose-fs);
  font-weight: 500;
  font-style: normal;
  color: rgba(10, 10, 10, 0.72);
  margin: 0;
  line-height: 1.65;
}

.about-page .site-header {
  color: var(--a-ink);
  background: #fff;
}

.about-page .logo__text {
  color: var(--a-ink);
}

.about-page .nav__link {
  color: var(--a-ink);
}

.about-page .nav-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
}

.about-page .nav-toggle__bar {
  background: var(--a-ink);
}

.about-page .nav-mobile {
  background: #fff;
}

.about-page .nav-mobile__link {
  color: var(--a-ink);
}

@media (prefers-reduced-motion: reduce) {
  .about-story__est,
  .about-prose__lead,
  .about-story__video {
    animation: none;
  }
}