/* ==========================================================================
   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);
  /* Anchored to the trigger's right edge and opening leftwards, so a menu on
     the far right of the nav never runs past the viewport. */
  right: 0;
  left: auto;
  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 right;
  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);
}

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

.section--dark .numbered > li::before {
  color: var(--dark-muted);
}

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

@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) {
  a.index__row:hover::before {
    opacity: 1;
  }
  a.index__row:hover .index__name {
    color: var(--accent-ink);
  }
  a.index__row:hover .index__arrow {
    transform: translateX(4px);
    color: var(--ink);
  }
}

a.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, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.dynava {
  max-width: 58ch;
}

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

.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-wrap {
  max-width: 520px;
  width: 100%;
  justify-self: end;
}

.dynava__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  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;
}

/* Verksamhet: the film runs as a wide block above the text. */
.dynava__media-wrap--wide {
  max-width: none;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.dynava__media--wide {
  aspect-ratio: 21 / 9;
}

.dynava__intro .figures--3 {
  margin-top: 8px;
}

/* Figures on a light background: ink for the number, muted ink for the rest. */
.section--beige .figure::before,
.section--paper-2 .figure::before,
.section--beige .figure,
.section--paper-2 .figure {
  background-color: transparent;
  border-top-color: var(--line);
}

.section--beige .figure::before,
.section--paper-2 .figure::before {
  background: var(--line);
}

.section--beige .figure strong em,
.section--beige .figure > span,
.section--paper-2 .figure strong em,
.section--paper-2 .figure > span {
  color: var(--ink-2);
}

.dynava__intro .grid--2 + .stack {
  margin-top: 8px;
}

@media (max-width: 900px) {
  .dynava__media--wide {
    aspect-ratio: 16 / 10;
  }
}

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

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

/* Homepage: the Dynava chapter runs the film as a portrait beside the text. */
.dynava-home {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 48px);
}

.dynava__media-wrap--portrait {
  max-width: 420px;
  justify-self: start;
}

.dynava__media--portrait {
  aspect-ratio: 3 / 4;
}

.dynava-home .dynava__logo {
  height: 36px;
}

.dynava-home .lead {
  max-width: 50ch;
}

@media (max-width: 900px) {
  .dynava-home {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dynava__media-wrap--portrait {
    max-width: none;
  }
  .dynava__media--portrait {
    aspect-ratio: 16 / 10;
  }
}

/* ---- 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 {
  width: 100%;
  max-width: 700px;
  /* Negative bottom margin lets the office row tuck under the faded rim. */
  margin: clamp(-40px, -3vw, -16px) 0 clamp(-120px, -8vw, -48px) auto;
  aspect-ratio: 1;
}

/* The globe sits a little high so the office row can tuck under its rim. */
.chapter--globe .globe-grid {
  align-items: start;
}

.chapter--globe .globe-grid__text {
  padding-top: 24px;
}

.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;
}

/* Offices per country in one horizontal row under the globe. The negative
   margin pulls the row up over the globe's faded lower rim. */
.places--row {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px clamp(20px, 2.5vw, 40px);
  margin-top: 36px;
  padding-top: 0;
  border-top: 0;
}

.places--row li {
  display: block;
  padding: 0;
}

.places--row li::before {
  display: none;
}

.places--row .places__country {
  display: block;
  margin-bottom: 8px;
}

.places--row .places__cities {
  display: block;
  line-height: 1.5;
}

.places__country {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-muted);
}

.places__cities {
  color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 900px) {
  .globe--bleed {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
  .chapter--globe .globe-grid__text {
    padding-top: 0;
  }
  .places--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    padding-top: 24px;
    border-top: 1px solid var(--dark-line);
  }
  .globe--bleed {
    margin-bottom: -16px;
  }
  .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;
}

/* ==========================================================================
   Om Servana: dark header with the mark in particles, three-column strategy,
   horizontal timeline. Each block gets its own shape so the page has a rhythm.
   ========================================================================== */
.page-head--about {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(56px, 9vw, 120px));
  padding-bottom: clamp(56px, 8vw, 112px);
}

.about-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.about-head__text h1 {
  max-width: 14ch;
}

/* The canvas is drawn larger than its box so displaced particles and the glow
   never clip, and the mark can run past the container's edge. */
.about-head__mark {
  position: relative;
  aspect-ratio: 1;
  max-width: 600px;
  width: 100%;
  justify-self: end;
  margin-right: calc(-1 * var(--gutter) - 2vw);
}

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

/* The canvas covers the whole header; the mark box only says where the S
   gathers. Text sits above the canvas, pointer events reach the section. */
.about-head__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.about-head__canvas.mark--off {
  display: none;
}

.page-head--about .about-head {
  position: relative;
  z-index: 1;
}

/* Wide statement, then the two columns sit under the right-hand 8/12. */
.about-what .statement--xl {
  max-width: 30ch;
}

.about-what__cols {
  margin-top: clamp(32px, 4vw, 56px);
}

/* The strategy model sits under its own head, not under a chapter statement. */
.section-head + .model {
  margin-top: 0;
}

.section--beige .model__node {
  background: #ece5d8;
}

/* ---- Horizontal timeline -------------------------------------------------- */
.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  padding-top: 32px;
}

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

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

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

.tl-row li {
  position: relative;
  display: block;
}

.tl-row li::before {
  content: '';
  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;
  transition-delay: calc(200ms + var(--i, 0) * 280ms);
}

.tl-row.is-in li::before {
  background: var(--accent);
  border-color: var(--accent);
}

.tl-row time {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tl-row h3 {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0;
  margin-top: 14px;
}

.tl-row p {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

@media (max-width: 1100px) {
  .tl-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 40px;
  }
  .tl-row li:nth-child(n + 4)::before {
    top: -21px;
  }
}

@media (max-width: 900px) {
  .about-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .about-head__mark {
    max-width: 340px;
    justify-self: center;
    margin-right: 0;
  }
  .about-what__cols {
    grid-template-columns: 1fr;
  }
  .about-what__cols > div:first-child {
    display: none;
  }
}

@media (max-width: 700px) {
  .tl-row {
    grid-template-columns: 1fr;
    padding-top: 0;
    padding-left: 24px;
    row-gap: 32px;
  }
  .tl-row::before,
  .tl-row::after {
    width: 1px;
    height: 100%;
    transform-origin: top;
  }
  .tl-row.is-in::after {
    transform: scaleY(1);
  }
  .tl-row::after {
    transform: scaleX(1) scaleY(0);
  }
  .tl-row li::before,
  .tl-row li:nth-child(n + 4)::before {
    top: 4px;
    left: -28px;
  }
}

/* ==========================================================================
   Verksamhet: dark header with the group as a particle map, the film in the
   wide container, LAB solutions as a grid, the four tools as cards.
   ========================================================================== */
.page-head--ops {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(48px, 7vw, 96px);
}

.ops-head__text h1 {
  max-width: 16ch;
}

.dynava__media-wrap--wide + .wrap,
#dynava > .wrap--wide + .wrap {
  margin-top: clamp(40px, 5vw, 72px);
}

#dynava .dynava__media-wrap--wide {
  margin-bottom: 0;
}

/* LAB solutions: three across, hairline tops, small numbers. */
.lab-grid {
  counter-reset: lab;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px clamp(20px, 2.5vw, 40px);
}

.lab-grid li {
  counter-increment: lab;
  padding-top: 18px;
  border-top: 1px solid var(--dark-line);
}

.lab-grid li::before {
  content: counter(lab, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 14px;
}

.lab-grid h3 {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.86);
}

.lab-grid p {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  max-width: 30ch;
}

/* Tools: an editorial index. Rows draw in one after another, the number and
   name warm on hover, and the row washes with the section colour. */
.tools-index .index__row {
  color: inherit;
  text-decoration: none;
  scroll-margin-top: calc(var(--nav-h) + 24px);
  grid-template-columns: 48px minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr) 24px;
  align-items: start;
}

.tools-index .index__name {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.tools-index .index__row::before {
  background: var(--paper-2);
  border-radius: 0;
}

.tools-index .index__n {
  padding-top: 8px;
  transition: color var(--t-fast) ease;
}

.tools-index .index__fact {
  padding-top: 6px;
}

.tools-index .index__arrow {
  align-self: start;
  margin-top: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .tools-index a.index__row:hover .index__n {
    color: var(--accent);
  }
  .tools-index a.index__row:hover .index__arrow {
    transform: translate(3px, -3px);
  }
}

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

@media (max-width: 1100px) {
  .lab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
}

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

/* ---- Dynava LAB: the flow --------------------------------------------------- */
.lab-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.labflow {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.labflow canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.labflow__label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  transition: color 400ms ease;
}

.labflow__label--lg {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.92);
}

.labflow__label.is-hot {
  color: #f08a68;
}

.lab-body {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--dark-line);
}

.lab-how {
  gap: clamp(28px, 5vw, 80px);
  align-content: start;
  max-width: 900px;
}

.ticks {
  display: grid;
  gap: 10px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
}

.ticks li {
  position: relative;
  padding-left: 24px;
}

/* Bullets drawn like the contacts in the flow above: a soft coral point with
   a faint halo, breathing gently. */
.ticks li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #f6a889 0%, #f08a68 45%, rgba(240, 138, 104, 0) 100%);
  box-shadow: 0 0 6px 3px rgba(240, 138, 104, 0.28);
  animation: contact-breathe 3.6s ease-in-out infinite;
}

.ticks li:nth-child(2)::before { animation-delay: -1.2s; }
.ticks li:nth-child(3)::before { animation-delay: -2.4s; }

@keyframes contact-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 6px 3px rgba(240, 138, 104, 0.22); }
  50% { transform: scale(1.25); box-shadow: 0 0 9px 4px rgba(240, 138, 104, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .ticks li::before {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .lab-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .lab-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lab-how {
    grid-template-columns: 1fr;
  }
  .labflow {
    aspect-ratio: 4 / 3;
  }
  .labflow__label {
    font-size: 0.625rem;
  }
}

/* ---- Verksamhet, Dynava: logo column, everything else in the text column --- */
.dynava__brand {
  display: grid;
  gap: 18px;
  align-content: start;
  padding-top: 6px;
}

.dynava__logo--lg {
  height: clamp(44px, 4.6vw, 64px);
}

.dynava__intro h2 {
  max-width: 20ch;
}

.dynava__figs {
  margin-top: 16px;
  gap: clamp(20px, 3vw, 40px);
}

.dynava__figs .figure strong {
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
}

.dynava__figs .figure {
  padding-top: 20px;
}

@media (max-width: 900px) {
  .dynava__figs {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .dynava__figs .figure strong {
    font-size: 1.8rem;
  }
}

/* ---- Cookie consent ------------------------------------------------------ */
.consent {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 16, 15, 0);
  transition: background 240ms ease;
  pointer-events: none;
}

.consent.is-open {
  background: rgba(15, 16, 15, 0.65);
  pointer-events: auto;
}

.consent__card {
  width: min(720px, 100%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(18, 19, 17, 0.35);
  padding: clamp(20px, 3vw, 28px);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

.consent.is-open .consent__card {
  opacity: 1;
  transform: none;
}

.consent__logo-svg {
  height: 22px;
  width: auto;
  display: block;
  color: var(--ink);
}

.consent__tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-top: 16px;
}

.consent__tab {
  appearance: none;
  background: none;
  border: 0;
  flex: 1;
  padding: 12px 8px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.consent__tab.is-active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}

.consent__body {
  max-height: min(38vh, 320px);
  overflow-y: auto;
  padding: 16px 2px 4px;
}

.consent__panel h2 {
  font-size: 1.125rem;
  margin: 0 0 10px;
}

.consent__panel p {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 12px;
}

.consent__category {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.consent__category:last-child {
  border-bottom: 0;
}

.consent__category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.consent__category-head h3 {
  font-size: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.consent__count {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}

.consent__switch {
  appearance: none;
  flex: none;
  width: 44px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  cursor: pointer;
  transition: background var(--t-fast) ease;
}

.consent__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform var(--t-fast) var(--ease-out);
}

.consent__switch.is-on {
  background: var(--accent);
}

.consent__switch.is-on::after {
  transform: translateX(20px);
}

.consent__switch.is-locked {
  background: var(--accent-soft);
  cursor: default;
}

.consent__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.consent__btn {
  justify-content: center;
  width: 100%;
}

@media (min-width: 720px) {
  .consent__actions {
    flex-direction: row-reverse;
  }
  .consent__btn {
    width: auto;
    flex: 1;
  }
}

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

/* The .btn display rule must not defeat the hidden attribute. */
.consent [hidden] {
  display: none !important;
}