/* ==========================================================================
   Servana design system
   One stylesheet. No framework. Tokens first, then primitives, then pages.
   ========================================================================== */

@font-face {
  font-family: 'Magnetik';
  src: url('../font/Magnetik-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lazare';
  src: url('../font/LazareGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lazare';
  src: url('../font/LazareGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --ink: #121311;
  --ink-2: #3a3b38;
  --muted: #6f706b;
  --faint: #a3a49e;

  --paper: #ffffff;
  --paper-2: #f5f4f0;
  --line: #e6e4de;
  --line-strong: #cfcdc5;

  --accent: #b4402a;
  --accent-ink: #8f2f1d;
  --accent-soft: #f6e6e1;

  --dark: #0f100f;
  --dark-2: #171816;
  --dark-line: rgba(255, 255, 255, 0.12);
  --dark-muted: rgba(255, 255, 255, 0.62);
  --dark-faint: rgba(255, 255, 255, 0.4);

  --display: 'Magnetik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Lazare', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Motion. Built-in easings are too weak; these have intent. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 160ms;
  --t: 220ms;
  --t-reveal: 520ms;

  --wrap: 1440px;
  --gutter: clamp(20px, 4vw, 48px);
  --gutter-wide: clamp(20px, 5vw, 80px);
  --spine: 80px;
  --section: clamp(72px, 10vw, 136px);

  --r: 6px;
  --r-lg: 14px;
  --nav-h: 72px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  line-height: 0.98;
}

h2 {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.04;
}

h3 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h4 {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}

.section--tight {
  padding-block: calc(var(--section) * 0.6);
}

.section--paper-2 {
  background: var(--paper-2);
}

/* Dynava's beige: warm, a step deeper than paper-2, ink stays readable. */
.section--beige {
  --line: #d9cfbf;
  --line-strong: #c4b7a3;
  --paper-2: #e2d9c9;
  background: #ece5d8;
}

.section--beige .chapter__num::before {
  background: #ece5d8;
}

.section--dark {
  background: var(--dark);
  color: #fff;
}

.section--dark .eyebrow {
  color: var(--dark-muted);
}

.section--dark .muted {
  color: var(--dark-muted);
}

.section--dark .line {
  border-color: var(--dark-line);
}

.grid {
  display: grid;
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--5-7 {
  grid-template-columns: 5fr 7fr;
}

.grid--4-8 {
  grid-template-columns: 4fr 8fr;
}

.grid--7-5 {
  grid-template-columns: 7fr 5fr;
}

@media (max-width: 900px) {
  .grid--3,
  .grid--4,
  .grid--5-7,
  .grid--4-8,
  .grid--7-5 {
    grid-template-columns: 1fr;
  }
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .grid--2,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

.stack > * + * {
  margin-top: var(--stack, 20px);
}

.measure {
  max-width: 62ch;
}

.measure--wide {
  max-width: 78ch;
}

.line {
  border-top: 1px solid var(--line);
}

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

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.eyebrow--plain::before {
  display: none;
}

.lead {
  font-weight: 300;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink-2);
}

.section--dark .lead {
  color: rgba(255, 255, 255, 0.82);
}

.statement {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.small {
  font-size: 0.9375rem;
}

.tiny {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.num {
  font-variant-numeric: tabular-nums;
}

.text-link {
  position: relative;
  display: inline-block;
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t) var(--ease-out), color var(--t-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover {
    background-size: 0 1px;
    background-position: 100% 100%;
    color: var(--accent-ink);
  }
  .section--dark .text-link:hover {
    color: #fff;
  }
}

/* --------------------------------------------------------------------------
   Buttons. Every pressable thing answers the press.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-border: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  white-space: nowrap;
  user-select: none;
  transition:
    transform var(--t-fast) var(--ease-out),
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color var(--t-fast) ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--t) var(--ease-out);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--line-strong);
}

.btn--sm {
  height: 38px;
  padding: 0 16px;
  font-size: 0.875rem;
}

.section--dark .btn,
.hero .btn,
.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-border: #fff;
}

.section--dark .btn--ghost,
.hero .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.28);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    --btn-bg: var(--ink-2);
    --btn-border: var(--ink-2);
  }
  .btn--ghost:hover {
    --btn-bg: transparent;
    --btn-border: var(--ink);
  }
  .section--dark .btn:hover,
  .hero .btn:hover,
  .btn--light:hover {
    --btn-bg: rgba(255, 255, 255, 0.9);
    --btn-border: rgba(255, 255, 255, 0.9);
  }
  .section--dark .btn--ghost:hover,
  .hero .btn--ghost:hover {
    --btn-bg: transparent;
    --btn-border: #fff;
  }
  .btn:hover svg {
    transform: translateX(3px);
  }
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  color: var(--ink);
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t) ease,
    border-color var(--t) ease,
    color var(--t) ease;
}

.nav.is-scrolled,
.nav.is-open {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}

/* Over a dark hero the nav is white until it scrolls. */
body[data-nav='dark'] .nav:not(.is-scrolled):not(.is-open) {
  color: #fff;
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.nav__brand svg,
.nav__brand img {
  height: 26px;
  width: auto;
}

.nav__logo {
  height: 26px;
  width: auto;
  fill: currentColor;
}

@media (max-width: 900px) {
  .nav__brand svg,
  .nav__brand img,
  .nav__logo {
    height: 22px;
  }
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.9375rem;
  transition: background-color var(--t-fast) ease, opacity var(--t-fast) ease;
}

.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover {
    background: rgba(18, 19, 17, 0.06);
  }
  body[data-nav='dark'] .nav:not(.is-scrolled) .nav__link:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

.nav__link svg {
  width: 12px;
  height: 12px;
  transition: transform var(--t) var(--ease-out);
}

.nav__item {
  position: relative;
}

.nav__item.is-open > .nav__link svg {
  transform: rotate(180deg);
}

/* Dropdown: scales in from its trigger, not from center. */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 300px;
  padding: 8px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 2px rgba(18, 19, 17, 0.04),
    0 12px 32px -8px rgba(18, 19, 17, 0.16);
  transform-origin: top left;
  opacity: 0;
  transform: scale(0.96) translateY(-4px);
  pointer-events: none;
  transition:
    opacity var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}

.nav__item.is-open > .nav__dropdown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav__dropdown a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background-color var(--t-fast) ease;
}

.nav__dropdown a strong {
  font-weight: 400;
  font-size: 0.9375rem;
}

.nav__dropdown a span {
  grid-column: 2;
  font-size: 0.8125rem;
  color: var(--muted);
}

.nav__dropdown a i {
  grid-row: span 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color var(--t-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav__dropdown a:hover {
    background: var(--paper-2);
  }
  .nav__dropdown a:hover i {
    background: var(--accent);
  }
}

.nav__dropdown a[aria-current='page'] i {
  background: var(--accent);
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: 50%;
  place-items: center;
  transition: background-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}

.nav__toggle:active {
  transform: scale(0.94);
}

.nav__toggle span {
  position: relative;
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t) var(--ease-in-out), background-color var(--t) ease;
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t) var(--ease-in-out), top var(--t) var(--ease-in-out);
}

.nav__toggle span::before {
  top: -6px;
}

.nav__toggle span::after {
  top: 6px;
}

.nav.is-open .nav__toggle span {
  background: transparent;
}

.nav.is-open .nav__toggle span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav.is-open .nav__toggle span::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav__mobile {
  display: none;
}

@media (max-width: 900px) {
  .nav__menu {
    display: none;
  }
  .nav__toggle {
    display: grid;
  }
  .nav__mobile {
    display: block;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    padding: 16px var(--gutter) 40px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out);
  }
  .nav.is-open + .nav__mobile {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav__mobile a,
  .nav__mobile .nav__mobile-group > span {
    display: block;
    padding: 14px 0;
    font-size: 1.25rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__mobile .nav__mobile-group > span {
    color: var(--muted);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-top: 28px;
    border-bottom: 0;
  }
  .nav__mobile .nav__mobile-group a {
    font-size: 1.0625rem;
    padding: 12px 0;
  }
}

/* --------------------------------------------------------------------------
   Hero: full-bleed keynote footage, subject framed right, type on the dark left
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
}

.hero__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + 32px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--dark);
  background-size: cover;
  background-position: 78% top;
}

.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% top;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero__media video.is-active {
  opacity: 1;
}

/* Scrim: the curtain is already dark on the left; this only guarantees contrast
   under the type and keeps the subject clean on the right. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 16, 15, 0.9) 0%, rgba(15, 16, 15, 0.72) 30%, rgba(15, 16, 15, 0.28) 55%, rgba(15, 16, 15, 0) 75%),
    linear-gradient(180deg, rgba(15, 16, 15, 0.45) 0%, rgba(15, 16, 15, 0) 22%, rgba(15, 16, 15, 0) 70%, rgba(15, 16, 15, 0.55) 100%);
}

.hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__body h1 {
  max-width: 12ch;
  margin-top: 20px;
}

.hero__lead {
  max-width: 46ch;
  margin-top: 28px;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* Narrow screens: the footage becomes a band above the type instead of
   behind it, so the headline never crosses the speaker's face. */
@media (max-width: 900px) {
  .hero__stage {
    display: block;
    padding-top: 0;
    padding-bottom: 40px;
  }
  .hero__media {
    position: relative;
    height: 52svh;
    min-height: 320px;
    background-position: 70% top;
  }
  .hero__media video {
    object-position: 70% top;
  }
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(15, 16, 15, 0.55) 0%, rgba(15, 16, 15, 0) 30%, rgba(15, 16, 15, 0) 60%, rgba(15, 16, 15, 1) 100%);
  }
  .hero__body {
    margin-top: -48px;
  }
  .hero__body h1 {
    margin-top: 14px;
  }
  .hero__lead {
    margin-top: 20px;
  }
  .hero__actions {
    margin-top: 28px;
  }
}

.hero__stats {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--dark-line);
  background: var(--dark);
}

.hero__stats .hero__stats-row {
  display: grid;
  grid-template-columns: var(--spine) repeat(4, 1fr);
  align-items: start;
}

.hero__stat {
  padding: 22px 0;
  border-left: 1px solid var(--dark-line);
  padding-left: 20px;
}

.hero__stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.hero__stat strong em {
  font-style: normal;
  font-size: 0.5em;
  color: var(--dark-muted);
}

.hero__stat strong {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero__stat > span {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--dark-muted);
}

@media (max-width: 900px) {
  .hero__stats .hero__stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__stat:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .hero__stat:nth-child(n + 3) {
    border-top: 1px solid var(--dark-line);
  }
}

/* --------------------------------------------------------------------------
   Section header
   -------------------------------------------------------------------------- */
.section-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.section-head h2 {
  max-width: 22ch;
}

.section-head--row {
  grid-template-columns: 1fr auto;
  align-items: end;
}

@media (max-width: 700px) {
  .section-head--row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}

.card--link:active {
  transform: scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
  .card--link:hover {
    border-color: var(--line-strong);
  }
}

.card__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.card h3 {
  margin-top: 4px;
}

.card p {
  color: var(--ink-2);
}

.card__foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
}

.card__foot svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .card--link:hover .card__foot svg {
    transform: translateX(3px);
  }
}

.card--link > a.cover {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.section--dark .card {
  background: var(--dark-2);
  border-color: var(--dark-line);
}

.section--dark .card p {
  color: rgba(255, 255, 255, 0.72);
}

/* Numbered list (strategy) */
.numbered {
  counter-reset: n;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.numbered > li {
  counter-increment: n;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

.numbered > li::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--faint);
  padding-top: 4px;
}

.numbered h3 {
  margin-bottom: 10px;
}

.numbered p {
  max-width: 62ch;
  color: var(--ink-2);
}

@media (max-width: 600px) {
  .numbered > li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Big numbers */
.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.figure {
  padding: 28px 0 0;
  border-top: 1px solid var(--dark-line);
}

.figure strong {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.figure strong em {
  font-style: normal;
  font-size: 0.5em;
  color: var(--dark-muted);
  margin-left: 4px;
}

.figure > span {
  display: block;
  margin-top: 14px;
  color: var(--dark-muted);
  font-size: 0.9375rem;
  max-width: 24ch;
}

@media (max-width: 700px) {
  .figures {
    grid-template-columns: 1fr;
  }
}

.quote {
  border-left: 1px solid var(--dark-line);
  padding-left: 24px;
}

.quote p {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.quote footer {
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--dark-muted);
}

.section--paper-2 .quote,
.section:not(.section--dark) .quote {
  border-color: var(--line-strong);
}

.section:not(.section--dark) .quote footer {
  color: var(--muted);
}

/* Media strip */
.media-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: clamp(40px, 5vw, 64px);
}

.media-strip figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
}

.media-strip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 700px) {
  .media-strip {
    grid-template-columns: 1fr;
  }
  .media-strip figure {
    aspect-ratio: 16 / 10;
  }
}

/* --------------------------------------------------------------------------
   Key/value list
   -------------------------------------------------------------------------- */
.kv {
  margin: 0;
  border-top: 1px solid var(--line);
}

.kv > div {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.kv dt {
  color: var(--muted);
  font-size: 0.9375rem;
}

.kv dd {
  margin: 0;
}

.section--dark .kv,
.section--dark .kv > div {
  border-color: var(--dark-line);
}

.section--dark .kv dt {
  color: var(--dark-muted);
}

/* --------------------------------------------------------------------------
   Release list. Rows, not cards: the content is the design.
   -------------------------------------------------------------------------- */
.releases {
  border-top: 1px solid var(--line);
}

.release {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast) ease;
}

.release.is-hidden {
  display: none;
}

.release time {
  color: var(--muted);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.release h3 {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-wrap: pretty;
}

.release h3 a {
  transition: color var(--t-fast) ease;
}

.release h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.release p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.release__arrow {
  width: 16px;
  height: 16px;
  color: var(--faint);
  align-self: center;
  transition: transform var(--t) var(--ease-out), color var(--t-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .release:hover h3 a {
    color: var(--accent-ink);
  }
  .release:hover .release__arrow {
    transform: translateX(3px);
    color: var(--ink);
  }
}

@media (max-width: 700px) {
  .release {
    grid-template-columns: 1fr auto;
  }
  .release time {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  vertical-align: middle;
  margin-left: 8px;
  white-space: nowrap;
}

.badge--reg {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* Filters */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.filter {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-2);
  transition:
    background-color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-out);
}

.filter:active {
  transform: scale(0.96);
}

.filter[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.filter:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .filter:not([aria-pressed='true']):not(:disabled):hover {
    border-color: var(--line-strong);
  }
}

.empty {
  padding: 48px 0;
  color: var(--muted);
  text-align: center;
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Prose (press release body)
   -------------------------------------------------------------------------- */
.prose {
  max-width: 70ch;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.prose > * + * {
  margin-top: 1.2em;
}

.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.125rem;
  margin-top: 2em;
}

.prose p {
  margin: 0;
}

.prose p + p {
  margin-top: 1.2em;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--t-fast) ease;
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.prose th,
.prose td {
  padding: 10px 12px 10px 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose th {
  font-weight: 400;
  color: var(--muted);
}

.prose img {
  border-radius: var(--r);
}

.prose strong,
.prose b {
  font-weight: 400;
}

/* Attachments */
.files {
  display: grid;
  gap: 10px;
}

.file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}

.file:active {
  transform: scale(0.99);
}

.file svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}

.file span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file small {
  color: var(--muted);
  font-size: 0.8125rem;
}

@media (hover: hover) and (pointer: fine) {
  .file:hover {
    border-color: var(--line-strong);
  }
}

/* --------------------------------------------------------------------------
   Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 96px));
  padding-bottom: clamp(36px, 5vw, 64px);
}

.page-head h1 {
  margin-top: 18px;
  max-width: 16ch;
}

.page-head .lead {
  margin-top: 22px;
  max-width: 58ch;
}

.page-head--ir h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--muted);
}

.crumbs svg {
  width: 12px;
  height: 12px;
  color: var(--faint);
}

.crumbs a {
  transition: color var(--t-fast) ease;
}

.crumbs a:hover {
  color: var(--ink);
}

/* IR sub navigation */
.subnav {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.subnav ul {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0;
}

.subnav ul::-webkit-scrollbar {
  display: none;
}

.subnav a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--ink-2);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}

.subnav a[aria-current='page'] {
  background: var(--ink);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .subnav a:not([aria-current='page']):hover {
    background: var(--paper-2);
    color: var(--ink);
  }
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  gap: 0;
}

.timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 24px 0 24px 28px;
  border-left: 1px solid var(--line);
}

.timeline > li::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 34px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
}

.timeline > li:first-child::before {
  background: var(--accent);
  border-color: var(--accent);
}

.timeline time {
  color: var(--muted);
  font-size: 0.9375rem;
  padding-top: 3px;
}

.timeline h3 {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0;
}

.timeline p {
  margin-top: 6px;
  color: var(--ink-2);
  max-width: 60ch;
}

@media (max-width: 600px) {
  .timeline > li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* --------------------------------------------------------------------------
   People
   -------------------------------------------------------------------------- */
.people {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.person {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.person__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0;
}

.person h3 {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0;
}

.person__role {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.person p:not(.person__role) {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (max-width: 800px) {
  .people {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */
.events {
  border-top: 1px solid var(--line);
}

.event {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.event__date {
  display: grid;
  line-height: 1;
}

.event__date strong {
  font-family: var(--display);
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.event__date span {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.event--past {
  color: var(--muted);
}

.event--past .event__date strong {
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer > .wrap {
  max-width: 1680px;
  padding-inline: var(--gutter-wide);
}

.footer {
  background: var(--dark);
  color: #fff;
  padding: clamp(56px, 8vw, 96px) 0 32px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--dark-line);
}

.footer__logo {
  height: 22px;
  width: auto;
  fill: #fff;
}

.footer__tag {
  margin-top: 20px;
  max-width: 30ch;
  color: var(--dark-muted);
  font-size: 0.9375rem;
}

.footer h4 {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-faint);
  margin-bottom: 18px;
}

.footer ul {
  display: grid;
  gap: 10px;
}

.footer li a {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--t-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer li a:hover {
    color: #fff;
  }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.8125rem;
  color: var(--dark-faint);
}

@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .footer__top {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   Reveal on scroll. Small distance, strong ease-out, staggered by --i.
   Decorative only: never blocks interaction.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
  will-change: opacity, transform;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Reduced motion: keep opacity, drop movement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal] {
    transform: none;
    transition-duration: 200ms;
    transition-delay: 0ms;
  }
  .nav__dropdown,
  .nav__mobile {
    transform: none;
  }
  .btn:active,
  .filter:active,
  .card--link:active,
  .file:active {
    transform: none;
  }
  .hero__media video,
  .media-strip video {
    display: none;
  }
}

/* ==========================================================================
   Animation layer
   Rare-tier delight (hero, first view), scroll-driven depth, page transitions,
   and micro-feedback. transform / opacity / clip-path only. Every curve is a token.
   ========================================================================== */

/* ---- Hero: word reveal on first view ------------------------------------ */
[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

[data-split] .w__in {
  display: inline-block;
  transform: translateY(110%);
  animation: word-in 900ms var(--ease-out) forwards;
  animation-delay: calc(min(var(--i, 0), 10) * 45ms + 60ms);
  will-change: transform;
}

@keyframes word-in {
  to {
    transform: none;
  }
}

/* Words are hidden until the script has split them: no flash of unsplit text. */
html:not(.no-js) [data-split]:not(.is-split) {
  opacity: 0;
}

/* ---- Counters: the number is the star, so nothing else moves ------------- */
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* ---- Hero: scroll-driven parallax and fade (CSS only, off main thread) --- */
@supports (animation-timeline: scroll()) {
  .hero__media {
    animation: hero-media linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  .hero__body {
    animation: hero-body linear both;
    animation-timeline: scroll(root);
    animation-range: 0 70vh;
  }
  @keyframes hero-media {
    to {
      transform: scale(1.05);
      opacity: 0.12;
    }
  }
  @keyframes hero-body {
    to {
      transform: translateY(-32px);
      opacity: 0;
    }
  }
}

/* ---- Reading progress on long articles ----------------------------------- */
.read-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  z-index: 101;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .read-progress {
    animation: read-progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes read-progress {
    to {
      transform: scaleX(1);
    }
  }
}

/* ---- Timeline: the line draws itself as the reader moves through it ------ */
.timeline {
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
  transform-origin: top;
  transform: scaleY(0);
}

@supports (animation-timeline: view()) {
  .timeline::before {
    animation: draw-line linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 70%;
  }
  @keyframes draw-line {
    to {
      transform: scaleY(1);
    }
  }
}

/* ---- Figures: rule draws in with the number ----------------------------- */
.figure {
  position: relative;
  border-top: 0;
}

.figure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--dark-line);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.figure.is-in::before {
  transform: scaleX(1);
}

/* ---- Media strip: clip reveal from the bottom ---------------------------- */
[data-clip] figure {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease-in-out);
}

[data-clip] figure:nth-child(2) {
  transition-delay: 80ms;
}

[data-clip] figure:nth-child(3) {
  transition-delay: 160ms;
}

[data-clip].is-in figure {
  clip-path: inset(0 0 0 0);
}

[data-clip] video {
  transition: transform 600ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  [data-clip] figure:hover video {
    transform: scale(1.03);
  }
}

/* ---- Release rows: a surface rises under the row on hover ---------------- */
.release {
  isolation: isolate;
}

.release::before {
  content: '';
  position: absolute;
  inset: 0 -16px;
  z-index: -1;
  border-radius: 10px;
  background: var(--paper-2);
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}

.section--paper-2 .release::before {
  background: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
  .release:hover::before {
    opacity: 1;
  }
}

/* Re-entry after a filter change is driven by WAAPI in servana.js. */

/* ---- Cards: a two-pixel lift, gated to fine pointers --------------------- */
@media (hover: hover) and (pointer: fine) {
  .card--link:hover {
    transform: translateY(-2px);
  }
  .card--link:hover:active {
    transform: translateY(-2px) scale(0.99);
  }
  .file:hover svg {
    color: var(--accent);
  }
}

/* ---- Filter pills: the pressed state settles, not snaps ------------------ */
.filter[aria-pressed='true'] {
  transition-duration: var(--t);
}

/* ---- Mobile menu: links arrive in order ---------------------------------- */
@media (max-width: 900px) {
  .nav__mobile a,
  .nav__mobile .nav__mobile-group > span {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out);
  }
  .nav.is-open + .nav__mobile a,
  .nav.is-open + .nav__mobile .nav__mobile-group > span {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 28ms + 40ms);
  }
}

/* ---- Cross-document page transitions ------------------------------------- */
@view-transition {
  navigation: auto;
}

.nav {
  view-transition-name: nav;
}

.subnav a[aria-current='page'] {
  view-transition-name: subnav-active;
}

::view-transition-old(root) {
  animation: 140ms var(--ease-out) both vt-out;
}

::view-transition-new(root) {
  animation: 240ms var(--ease-out) both vt-in;
}

::view-transition-group(subnav-active) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease-in-out);
}

@keyframes vt-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---- Reduced motion: keep the fades, drop the travel --------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-split] .w__in {
    transform: none;
    animation: none;
  }
  html:not(.no-js) [data-split]:not(.is-split) {
    opacity: 1;
  }
  .hero__media,
  .hero__body,
  .timeline::before {
    animation: none;
  }
  .timeline::before {
    transform: scaleY(1);
  }
  .figure::before {
    transform: scaleX(1);
    transition: none;
  }
  [data-clip] figure {
    clip-path: none;
    transition: none;
  }
  .card--link:hover {
    transform: none;
  }
  .nav__mobile a,
  .nav__mobile .nav__mobile-group > span {
    transform: none;
    transition-delay: 0ms !important;
  }
  @view-transition {
    navigation: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}


/* ==========================================================================
   Landing page: the thread
   One line runs from the first fact under the hero to the share information.
   Chapters hang off it. It turns horizontal once (the model) and becomes
   bars once (the proof). Nothing on this page decorates without arguing.
   ========================================================================== */

.wrap--full {
  max-width: none;
  padding-inline: var(--gutter-wide);
}

/* Wider than the reading column, but capped: content stops scaling at 1680px
   and centres beyond that, while the nav and hero keep running edge to edge. */
.wrap--wide {
  max-width: 1680px;
  padding-inline: var(--gutter-wide);
}

/* ---- Wide hero ----------------------------------------------------------- */
.hero--wide .hero__body h1 {
  font-size: clamp(2.6rem, 6vw, 6.4rem);
  max-width: 12ch;
  margin-top: 28px;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: calc(-1 * var(--gutter-wide));
}

.hero__kicker .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.hero__kicker-line {
  flex: none;
  width: calc(var(--gutter-wide) - 14px);
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out) 200ms;
}

.hero__kicker.is-in .hero__kicker-line {
  transform: scaleX(1);
}

.hero__row {
  display: grid;
  grid-template-columns: minmax(0, 52ch) auto;
  align-items: end;
  justify-content: space-between;
  gap: 32px 64px;
  margin-top: 36px;
}

.hero--wide .hero__lead {
  margin-top: 0;
}

.hero--wide .hero__actions {
  margin-top: 0;
}

.hero__stats-row {
  display: grid;
  grid-template-columns: var(--spine) repeat(4, 1fr);
  align-items: start;
}

.hero--wide .hero__stat:first-of-type {
  border-left: 0;
  padding-left: 0;
}

.hero--wide .hero__stat {
  border-left: 1px solid var(--dark-line);
  padding-left: 20px;
}

@media (max-width: 900px) {
  .hero__row {
    grid-template-columns: 1fr;
  }
  .hero__stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero--wide .hero__stat:nth-child(2),
  .hero--wide .hero__stat:nth-child(4) {
    border-left: 0;
    padding-left: 0;
  }
  .hero--wide .hero__stat:nth-child(n + 4) {
    border-top: 1px solid var(--dark-line);
  }
  .hero__kicker {
    margin-left: calc(-1 * var(--gutter));
  }
  .hero__kicker-line {
    width: calc(var(--gutter) - 14px);
  }
  .hero--wide .hero__body {
    padding-inline: var(--gutter);
  }
}

/* ---- Thread nodes and the pen line --------------------------------------- */
.thread-node {
  position: relative;
  display: block;
  width: 9px;
  height: 9px;
  margin-top: 30px;
  border-radius: 50%;
  background: var(--accent);
}

.thread-node--end {
  margin: 0 0 0 auto;
  align-self: center;
}

.thread {
  position: absolute;
  z-index: 3;
  width: 1px;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(0);
  pointer-events: none;
  will-change: transform;
}

main {
  position: relative;
}

/* ---- Chapters ------------------------------------------------------------ */
.chapter__grid {
  display: grid;
  grid-template-columns: var(--spine) minmax(0, 1fr);
  gap: 0 clamp(24px, 3vw, 48px);
}

.chapter__spine {
  position: relative;
}

/* The grey guide that the red line is drawn on top of. It runs through the
   section padding so consecutive chapters read as one continuous rule. */
.chapter__spine::before {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(-1 * var(--section));
  bottom: calc(-1 * var(--section));
  width: 1px;
  background: var(--line);
}

.section--dark .chapter__spine::before {
  background: var(--dark-line);
}

.chapter--last .chapter__spine::before {
  bottom: auto;
  height: calc(var(--section) + 100%);
}

.chapter__num {
  position: absolute;
  left: 0;
  top: 0.15em;
  display: block;
  padding-left: 24px;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  transition: color var(--t) ease;
}

.chapter__num::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  transition: background-color var(--t) ease, border-color var(--t) ease, transform var(--t) var(--ease-out);
}

.section--paper-2 .chapter__num::before {
  background: var(--paper-2);
}

.section--dark .chapter__num::before {
  background: var(--dark);
  border-color: var(--dark-faint);
}

.chapter.is-passed .chapter__num {
  color: var(--accent);
}

.chapter.is-passed .chapter__num::before {
  background: var(--accent);
  border-color: var(--accent);
}

.section--dark .chapter.is-passed .chapter__num,
.section--dark.chapter.is-passed .chapter__num {
  color: rgba(255, 255, 255, 0.7);
}

.chapter__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.chapter__label-num {
  display: none;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.chapter__head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.chapter__head h2 {
  max-width: 22ch;
}

.chapter__head--row {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.chapter__head--row > div {
  display: grid;
  gap: 18px;
}

.statement--xl {
  font-size: clamp(1.9rem, 3.8vw, 3.6rem);
  line-height: 1.08;
  max-width: 24ch;
  margin-top: 24px;
}

@media (max-width: 900px) {
  .chapter__grid {
    grid-template-columns: 1fr;
  }
  .chapter__spine,
  .thread,
  .thread-node {
    display: none;
  }
  .chapter__label-num {
    display: inline;
  }
  .chapter__head--row {
    grid-template-columns: 1fr;
  }
}

/* ---- The model: the thread turns horizontal ------------------------------ */
.model {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 32px;
}

.model::before,
.model::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
}

.model::after {
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1400ms var(--ease-in-out);
}

.model.is-in::after {
  transform: scaleX(1);
}

.model__step {
  position: relative;
}

.model__node {
  position: absolute;
  top: -37px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  transition: background-color var(--t) ease, border-color var(--t) ease;
}

.model.is-in .model__step:nth-child(1) .model__node { transition-delay: 100ms; }
.model.is-in .model__step:nth-child(2) .model__node { transition-delay: 600ms; }
.model.is-in .model__step:nth-child(3) .model__node { transition-delay: 1100ms; }

.model.is-in .model__node {
  background: var(--accent);
  border-color: var(--accent);
}

.model__step h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.model__step p {
  margin-top: 12px;
  color: var(--ink-2);
  max-width: 34ch;
}

@media (max-width: 900px) {
  .model {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 0;
  }
  .model::before,
  .model::after {
    width: 1px;
    height: 100%;
    left: 4px;
  }
  .model::after {
    transform-origin: top;
    transform: scaleY(0);
  }
  .model.is-in::after {
    transform: scaleY(1);
  }
  .model__step {
    padding-left: 32px;
  }
  .model__node {
    top: 0.5em;
  }
}

/* ---- The index: businesses as rows, not cards ---------------------------- */
.index {
  border-top: 1px solid var(--line-strong);
}

.index__row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 48px minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr) 24px;
  gap: 24px;
  align-items: baseline;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

.index__row::before {
  content: '';
  position: absolute;
  inset: 0 -20px;
  z-index: -1;
  border-radius: 12px;
  background: var(--paper);
  opacity: 0;
  transition: opacity var(--t-fast) ease;
}

.index__n {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.index__name {
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  transition: color var(--t-fast) ease;
}

.index__what {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 52ch;
}

.index__fact {
  font-size: 0.9375rem;
  color: var(--muted);
}

.index__fact strong {
  font-weight: 400;
  color: var(--ink);
}

.index__arrow {
  width: 20px;
  height: 20px;
  align-self: center;
  color: var(--faint);
  transition: transform var(--t) var(--ease-out), color var(--t-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .index__row:hover::before {
    opacity: 1;
  }
  .index__row:hover .index__name {
    color: var(--accent-ink);
  }
  .index__row:hover .index__arrow {
    transform: translateX(4px);
    color: var(--ink);
  }
}

.index__row:active {
  transform: scale(0.995);
}

@media (max-width: 900px) {
  .index__row {
    grid-template-columns: 1fr 24px;
    gap: 8px 16px;
    padding: 24px 0;
  }
  .index__n {
    grid-column: 1;
  }
  .index__arrow {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
  .index__name,
  .index__what,
  .index__fact {
    grid-column: 1;
  }
}

/* ---- Bars: the thread becomes the proof ---------------------------------- */
.bars {
  display: grid;
  gap: 22px;
}

.bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 20px;
  align-items: baseline;
}

.bar__label {
  font-size: 0.875rem;
  color: var(--dark-muted);
}

.bar__val {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bar__track {
  grid-column: 1 / -1;
  display: block;
  height: 2px;
  background: var(--dark-line);
}

.bar__track i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-out);
}

.bar--target .bar__track i {
  background: var(--dark-faint);
}

.bar--target .bar__val {
  color: var(--dark-muted);
}

.bars.is-in .bar:nth-child(1) .bar__track i { transform: scaleX(calc(var(--v) / 100)); transition-delay: 100ms; }
.bars.is-in .bar:nth-child(2) .bar__track i { transform: scaleX(calc(var(--v) / 100)); transition-delay: 300ms; }
.bars.is-in .bar:nth-child(3) .bar__track i { transform: scaleX(calc(var(--v) / 100)); transition-delay: 500ms; }

/* ---- Ledger: the thread ends ---------------------------------------------- */
.ledger {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.ledger > div {
  padding: 22px 20px 22px 0;
  border-left: 1px solid var(--line);
  padding-left: 20px;
}

.ledger > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.ledger dt {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ledger dd {
  margin: 8px 0 0;
  font-size: 1.0625rem;
}

.ledger__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

@media (max-width: 900px) {
  .ledger {
    grid-template-columns: 1fr 1fr;
  }
  .ledger > div {
    border-left: 0;
    padding-left: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 520px) {
  .ledger {
    grid-template-columns: 1fr;
  }
}

/* ---- Reduced motion: the line is simply there --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .thread {
    transform: none;
  }
  .hero__kicker-line,
  .model::after,
  .bar__track i {
    transition: none;
  }
  .hero__kicker .hero__kicker-line {
    transform: none;
  }
  .model::after {
    transform: none;
  }
  .bars .bar .bar__track i {
    transform: scaleX(calc(var(--v) / 100));
  }
}


/* ---- 03 · Närvaro: the globe ---------------------------------------------- */
.globe-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.globe {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin-left: auto;
  aspect-ratio: 1;
}

.globe::before {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(180, 64, 42, 0.1) 0%, rgba(180, 64, 42, 0) 60%);
  pointer-events: none;
}

.section--dark .globe::before {
  background: radial-gradient(circle at 50% 45%, rgba(180, 64, 42, 0.16) 0%, rgba(180, 64, 42, 0) 60%);
}

.globe--off {
  display: none;
}

.globe__canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out);
}

.globe.is-in .globe__canvas {
  opacity: 1;
  transform: none;
}

.offices {
  border-top: 1px solid var(--dark-line);
}

.office {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--dark-line);
  font-size: 0.9375rem;
}

.office__city {
  color: #fff;
}

.office__country {
  color: var(--dark-muted);
}

.office__time {
  color: var(--dark-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .globe-grid {
    grid-template-columns: 1fr;
  }
  .globe {
    max-width: 480px;
    margin: 8px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .globe__canvas {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ---- 02 · Dynava: light chapter, footage in a framed panel ---------------- */
.dynava-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.dynava {
  max-width: 58ch;
}

.dynava__logo {
  height: 40px;
  width: auto;
  margin-top: 28px;
}

.dynava h2 {
  margin-top: 22px;
}

.dynava .lead {
  margin-top: 20px;
  max-width: 50ch;
}

.dynava__facts {
  margin-top: 32px;
}

.dynava__facts > div {
  grid-template-columns: 140px 1fr;
}

.dynava__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* The clip lives on the figure; the observed element is its wrapper, because
   a fully clipped target never reports an intersection. */
.dynava__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  clip-path: inset(0 0 100% 0 round var(--r-lg));
  transition: clip-path 1000ms var(--ease-in-out);
}

.dynava__media-wrap.is-in .dynava__media {
  clip-path: inset(0 0 0 0 round var(--r-lg));
}

.dynava__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}

@media (max-width: 900px) {
  .dynava-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dynava__media {
    aspect-ratio: 16 / 10;
  }
  .dynava__logo {
    height: 34px;
    margin-top: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dynava__media {
    clip-path: none;
    transition: none;
  }
  .dynava__media video {
    display: none;
  }
}

/* ---- 04 · Närvaro: the globe on its own --------------------------------- */
.globe-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}

.globe-grid__text h2 {
  margin-top: 18px;
}

.globe-grid__text .lead {
  margin-top: 22px;
  max-width: 40ch;
}

.places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.section--dark .places {
  border-top-color: var(--dark-line);
  color: rgba(255, 255, 255, 0.82);
}

.places li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.places li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Two dark chapters meet here: a hairline keeps the film band and the globe apart. */
.chapter--dynava + .chapter--globe {
  border-top: 1px solid var(--dark-line);
}

.globe {
  max-width: 860px;
}

@media (max-width: 900px) {
  .dynava__facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .globe-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .globe {
    max-width: 520px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter--dynava .chapter__media video {
    display: none;
  }
}


/* ---- Small-screen spacing corrections ------------------------------------- */
@media (max-width: 900px) {
  .hero__kicker .eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
  .numbered > li {
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding: 24px 0;
  }
  .numbered > li::before {
    font-size: 1.1rem;
    padding-top: 6px;
  }
  .chapter__head--row > .btn,
  .section-head--row > .btn {
    justify-self: start;
  }
  .statement--xl {
    margin-top: 16px;
  }
  .model {
    margin-top: 40px;
  }
  .dynava__facts {
    margin-top: 28px;
  }
  .dynava__actions {
    margin-top: 28px;
  }
}


/* ---- 03 · Koncernen i siffror: bigger globe, faded at the rim ------------ */
.globe--bleed {
  max-width: none;
  width: calc(100% + var(--gutter) + 6vw);
  margin-right: calc(-1 * var(--gutter) - 6vw);
  aspect-ratio: 1;
}

.globe--bleed .globe__canvas {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, rgba(0, 0, 0, 0.6) 64%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, rgba(0, 0, 0, 0.6) 64%, transparent 74%);
}

.globe--bleed::before {
  inset: -6%;
  background: radial-gradient(circle at 50% 50%, rgba(180, 64, 42, 0.18) 0%, rgba(180, 64, 42, 0) 55%);
}

.figures--3 {
  margin-top: 36px;
}

.figures--3 .figure strong {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
}

.figures--3 .figure {
  padding-top: 20px;
}

.figures--3 .figure > span {
  margin-top: 10px;
}

.globe-grid__text .places {
  margin-top: 36px;
}

@media (max-width: 900px) {
  .globe--bleed {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
  .figures--3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .figures--3 .figure strong {
    font-size: 2rem;
  }
}

/* ---- 04 · Teknik & AI: the stage stays put on the left while the text scrolls
   past on the right, so the whole transition can be followed. -------------- */
.tech-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.tech-stage {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.tech-scroll {
  display: grid;
  gap: 0;
}

.tech-block {
  padding: clamp(40px, 8vh, 96px) 0;
  border-top: 1px solid var(--line);
}

.tech-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.tech-block h2 {
  margin-top: 18px;
  max-width: 16ch;
}

.tech-block .lead {
  margin-top: 22px;
  max-width: 44ch;
}

.tech-block h3 {
  margin-top: 12px;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
}

.tech-block > p:not(.lead):not(.chapter__label) {
  margin-top: 12px;
  color: var(--ink-2);
  max-width: 44ch;
}

.tech-cols__n {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.tech-actions {
  margin-top: 28px;
}

@media (max-width: 900px) {
  .tech-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tech-stage {
    position: static;
    margin-bottom: 8px;
  }
  .tech-block {
    padding: 40px 0;
  }
  .tech-block:first-child {
    padding-top: 24px;
  }
}

.names {
  position: relative;
  width: 100%;
  padding: 0 0 52px;
}

.names--off {
  display: none;
}

.names__canvas {
  display: block;
  width: min(100%, 620px);
  aspect-ratio: 1;
  margin: 0 auto;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

.names.is-in .names__canvas {
  opacity: 1;
  transform: none;
}

.names__legend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 28px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.names__legend li {
  position: relative;
  padding-top: 12px;
  transition: color var(--t) ease;
}

.names__legend li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color var(--t) ease, transform var(--t) var(--ease-out);
}

.names__legend li.is-active {
  color: var(--ink);
}

.names__legend li.is-active::before {
  background: var(--accent);
  transform: scale(1.4);
}

@media (max-width: 900px) {
  .names__canvas {
    width: min(100%, 400px);
  }
  .names {
    padding-bottom: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .names__canvas {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.tech-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
}

.tech-cols__n {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.tech-cols h3 {
  margin-top: 12px;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.tech-cols p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 36ch;
}

.tech-actions {
  margin-top: clamp(32px, 4vw, 48px);
}

@media (max-width: 900px) {
  .names__canvas {
    aspect-ratio: 16 / 9;
  }
  .names {
    padding-bottom: 40px;
  }
  .tech-cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .names__canvas {
    opacity: 1;
    transition: none;
  }
}

/* Bleeding globe and the names stage never cause sideways scroll. */
.chapter--globe,
.chapter--tech {
  overflow-x: clip;
}


/* ---- FAQ (share page): question headings, plain answers ------------------- */
.faq h2 {
  margin-bottom: 24px;
}

.faq__list {
  margin: 0;
  border-top: 1px solid var(--line);
}

.faq__list > div {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.faq__list dt h3 {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0;
}

.faq__list dd {
  margin: 10px 0 0;
  color: var(--ink-2);
  max-width: 70ch;
}