/* DropForce Systems, website v2
   Basis: styles/tokens.css (generated, never edit by hand).
   Rules: docs/entscheidungen.md (binding) and docs/relaunch-plan.md §4.
   Cyan budget: primary button, DropForce lane in the race, focus ring, "On demand." in the hero H1.
   Corner brackets (.frame): at most one per page, on the index HUD. */

/* ── Fonts (self-hosted) ─────────────────────────────────────────────── */
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('../assets/fonts/SpaceGrotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../assets/fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../assets/fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../assets/fonts/Inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-weight: 400; font-display: swap; src: url('../assets/fonts/RobotoMono-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-weight: 500; font-display: swap; src: url('../assets/fonts/RobotoMono-500.woff2') format('woff2'); }

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Contrast fix (plan §4.10): faint text passes AA 4.5:1 on every dark surface. */
  --df-ui-text-faint: #7A8FA8;
  --focus: #22D3EE;

  /* Type scale, 7 steps */
  --fs-display: clamp(2.75rem, 6.4vw, 5.5rem);   /* hero H1 only */
  --fs-h1: clamp(2.25rem, 4.2vw, 3.75rem);       /* subpage H1 */
  --fs-h2: clamp(1.75rem, 3vw, 2.625rem);        /* every H2 */
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-mono: .8125rem;
  --fs-lead: clamp(1.0625rem, 1.3vw, 1.1875rem); /* .lead, hero lead, press boilerplate */
  --fs-figure: 1.75rem;                          /* the race end figure */

  /* Spacing */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 160px;
  --sec-gap: var(--s7);
  --sec-gap-lg: var(--s8);

  /* Layout */
  --gutter: clamp(16px, 5vw, 72px);
  --max: 1280px;
  --col-gap: var(--s3);
  --nav-h: 72px;
  --bleed: max(var(--gutter), (100vw - var(--max)) / 2);
  --bracket: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --hero-veil:
    linear-gradient(90deg, rgb(5 10 18 / .86) 0%, rgb(5 10 18 / .72) 38%, rgb(5 10 18 / .22) 72%, rgb(5 10 18 / .08) 100%),
    linear-gradient(180deg, rgb(5 10 18 / .35) 0%, rgb(5 10 18 / 0) 28%, rgb(5 10 18 / .6) 100%);
}
/* Re-declared after :root, otherwise the :root override above would also win in light mode. */
[data-theme="light"] {
  --df-ui-text-faint: #6B6150;   /* 5.2:1 on #F1EDE4 */
  --focus: #0B879F;
}

/* ── Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--s3)); }
body {
  margin: 0;
  background: var(--df-ui-bg-0);
  color: var(--df-ui-text);
  font: 400 var(--fs-body)/1.6 var(--df-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 {
  margin: 0; font-family: var(--df-font-display); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
sup { font-size: .72em; line-height: 0; vertical-align: super; }
button { font: inherit; }

a {
  color: var(--df-ui-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  transition: text-decoration-color .2s;
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--df-ui-text); color: var(--df-ui-bg-0); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -120px; z-index: 100;
  padding: 12px 16px; background: var(--df-ui-bg-2); color: var(--df-ui-text);
  font: 600 var(--fs-small)/1 var(--df-font-body); text-decoration: none;
  border: 1px solid var(--df-ui-line-strong);
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ── 12-column grid helpers ──────────────────────────────────────────── */
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s5); }
.span-5 { grid-column-end: span 5; } .span-6 { grid-column-end: span 6; } .span-7 { grid-column-end: span 7; }
.start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; }

/* ── Text helpers ────────────────────────────────────────────────────── */
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--df-ui-text-dim); max-width: 40rem; text-wrap: pretty; }
.dim { color: var(--df-ui-text-dim); }
.note { font-family: var(--df-font-mono); font-size: var(--fs-mono); line-height: 1.5; color: var(--df-ui-text-dim); font-variant-numeric: tabular-nums; }
.more { margin-top: var(--s4); font-weight: 600; }
/* Touch targets (44 px) for standalone text links, without changing the line layout. */
.more a:not(.btn), .contact-direct dd a, .faq__a p > a:only-child { display: inline-block; padding-block: 12px; margin-block: -12px; }
/* Only for impressum/datenschutz/privacy: a legally required field that is still missing. */
.missing { font-family: var(--df-font-mono); font-size: var(--fs-mono); color: var(--df-ui-text-faint); border-bottom: 1px dashed currentColor; }

.prose { max-width: 36rem; }
.prose > * + * { margin-top: 1em; }
.prose p, .prose li { text-wrap: pretty; }
.prose h3 { margin-top: var(--s5); }
.prose h3 + * { margin-top: var(--s1); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--df-ui-text-faint); }

/* ── Buttons and controls ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 var(--s3);
  font: 600 .9375rem/1.1 var(--df-font-body); letter-spacing: 0;
  text-decoration: none; text-align: center;
  border: 1.5px solid transparent; background: transparent; color: var(--df-ui-text);
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.btn--primary { background: var(--df-cyan); border-color: var(--df-cyan); color: var(--df-navy); }
.btn--primary:hover { background: color-mix(in srgb, var(--df-cyan) 78%, #fff); border-color: color-mix(in srgb, var(--df-cyan) 78%, #fff); }
.btn--outline { border-color: var(--df-ui-line-strong); color: var(--df-ui-text); }
.btn--outline:hover { border-color: var(--df-ui-text); }

.ctl {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  font: 600 var(--fs-small)/1 var(--df-font-body);
  color: var(--df-ui-text); background: transparent;
  border: 1px solid var(--df-ui-line-strong); cursor: pointer;
  transition: border-color .2s;
}
.ctl:hover { border-color: currentColor; }
.ctl svg { width: 14px; height: 14px; flex: none; }
.ctl .i-play { display: none; }
.ctl.is-paused .i-play { display: block; }
.ctl.is-paused .i-pause { display: none; }
/* Controls only make sense with JS. */
html:not(.js) [data-video-toggle], html:not(.js) .race__ctl { display: none; }

/* ── Corner brackets: HUD only ───────────────────────────────────────── */
.frame { position: relative; }
.frame::before, .frame::after {
  content: ""; position: absolute; width: var(--bracket); height: var(--bracket);
  border: 0 solid rgb(232 240 229 / .5); pointer-events: none;
}
.frame::before { top: -7px; left: -7px; border-top-width: 1.5px; border-left-width: 1.5px; }
.frame::after { bottom: -7px; right: -7px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* ── Navigation ──────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
/* Solid when scrolled or open, on subpages (data-solid), and always without JS (site.js sets the states). */
.nav.is-scrolled, .nav.is-menu, .nav[data-solid], html:not(.js) .nav {
  background: color-mix(in srgb, var(--df-ui-bg-0) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: var(--df-ui-line);
}
.nav__in { height: 100%; display: flex; align-items: center; gap: var(--s3); }
.nav__logo { display: flex; align-items: center; flex: none; height: 44px; text-decoration: none; }
.nav__logo img { height: 34px; width: auto; }
.nav__menu { margin-left: auto; }
.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font: 600 .9375rem/1 var(--df-font-body); color: var(--df-ui-text-dim); text-decoration: none;
}
.nav__links a:hover { color: var(--df-ui-text); }
.nav__links a[aria-current="page"] { color: var(--df-ui-text); text-decoration: underline; text-underline-offset: .5em; text-decoration-color: currentColor; }
.nav__tools { display: flex; align-items: center; gap: 2px; flex: none; }
.iconbtn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: transparent; border: 1px solid transparent; color: var(--df-ui-text-dim); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.iconbtn:hover { color: var(--df-ui-text); border-color: var(--df-ui-line); }
.iconbtn svg { width: 20px; height: 20px; }
.theme .sun { display: none; }
[data-theme="light"] .theme .sun { display: block; }
[data-theme="light"] .theme .moon { display: none; }
.burger { display: none; }

/* Logo variants: off-white lockup on dark ground, "hell" lockup on light ground. */
.logo-light { display: none; }
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: block; }

/* Transparent nav over the hero video (index only: no data-solid, not scrolled). Always the dark look.
   A short navy gradient behind the bar keeps links, icons and the focus ring readable over the bright sky.
   The hero and its veil stay as approved. */
.nav::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: calc(100% + var(--s3)); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(5 10 18 / .72) 0%, rgb(5 10 18 / .6) 55%, rgb(5 10 18 / 0) 100%);
  opacity: 0; transition: opacity .3s;
}
.js .nav:not([data-solid]):not(.is-scrolled):not(.is-menu)::before { opacity: 1; }
.js .nav:not([data-solid]):not(.is-scrolled):not(.is-menu) { --focus: var(--df-cyan); }
.js .nav:not([data-solid]):not(.is-scrolled):not(.is-menu) .nav__links a,
.js .nav:not([data-solid]):not(.is-scrolled):not(.is-menu) .iconbtn { color: var(--df-off-white); }
[data-theme="light"] .nav:not([data-solid]):not(.is-scrolled):not(.is-menu) .logo-dark { display: block; }
[data-theme="light"] .nav:not([data-solid]):not(.is-scrolled):not(.is-menu) .logo-light { display: none; }

.nav__mobile {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49;
  max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
  background: var(--df-ui-bg-1); border-bottom: 1px solid var(--df-ui-line);
  padding: var(--s1) var(--gutter) var(--s3);
}
.nav__mobile[hidden] { display: none; }
.nav__mobile ul { list-style: none; }
.nav__mobile a {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--df-ui-line);
  font: 600 var(--fs-body)/1.2 var(--df-font-body); color: var(--df-ui-text); text-decoration: none;
}
.nav__mobile a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; }

/* ── Hero (index) ────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: grid; isolation: isolate; overflow: hidden; background: var(--df-navy); color: var(--df-off-white); }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--hero-veil); }
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); row-gap: var(--s5);
  min-height: 100svh; padding-block: calc(var(--nav-h) + var(--s6)) var(--s6);
}
.hero__box { align-self: center; max-width: 44rem; }
.hero h1 { font-size: var(--fs-display); line-height: .95; letter-spacing: -0.03em; color: var(--df-off-white); }
.hero h1 span { display: block; }
.hero h1 .accent { color: var(--df-cyan); }
.hero__lead { margin-top: var(--s4); max-width: 34rem; font-size: var(--fs-lead); line-height: 1.55; color: #E8F0F8; text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s5); }
.hero a:not(.btn) { color: var(--df-off-white); font-weight: 600; }
.hero__ctas a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.hero .ctl { color: rgb(232 240 229 / .85); border-color: transparent; padding-inline: 0; margin-top: var(--s4); }
.hero .ctl:hover { color: var(--df-off-white); }
.hero .ctl span { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgb(232 240 229 / .4); }

/* HUD: solid navy, corner brackets, values in off-white. Same look in both themes. */
.hud {
  align-self: end; width: 23rem; max-width: 100%;
  padding: var(--s2) var(--s3) var(--s2);
  background: rgb(8 15 26 / .94); border: 1px solid rgb(232 240 229 / .14);
  font: 400 var(--fs-mono)/1.4 var(--df-font-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: rgb(232 240 229 / .72);
}
.hud__title { padding-bottom: var(--s1); color: rgb(232 240 229 / .62); }
.hud__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 9px 0; border-top: 1px solid rgb(232 240 229 / .1); }
.hud__row dt { min-width: 0; }
.hud__row dd { color: var(--df-off-white); font-weight: 500; white-space: nowrap; }
.hud__foot { margin-top: 2px; padding-top: 10px; border-top: 1px solid rgb(232 240 229 / .1); font-size: var(--fs-mono); line-height: 1.45; color: rgb(232 240 229 / .62); }
/* Typing (site.js): labels type once, values fade in per row, a thin caret, no layout change. */
.hud__ghost { visibility: hidden; }
.hud__typed { position: relative; }
.hud__row.is-active .hud__typed::after { content: ""; position: absolute; right: -2px; top: .05em; bottom: 0; width: 1.5px; background: rgb(232 240 229 / .7); }
.hud.is-typing .hud__row dd { opacity: 0; transition: opacity .45s var(--ease); }
.hud.is-typing .hud__row.is-done dd { opacity: 1; }

/* ── Sections ────────────────────────────────────────────────────────── */
.sec { border-top: 1px solid var(--df-ui-line); padding-bottom: var(--sec-gap); }
.sec--end-lg { padding-bottom: var(--sec-gap-lg); }
/* Section label: a title block on the section's top hairline (plan §4.3). No box, not sticky. */
.sec-label {
  display: block; margin: 0 0 var(--s3); padding: var(--s1) 0 0; border: 0;
  font: 500 var(--fs-mono)/1.2 var(--df-font-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--df-ui-text-dim);
}
h2.sec-label { font-family: var(--df-font-mono); font-weight: 500; font-size: var(--fs-mono); letter-spacing: .04em; }
.sec-head { max-width: 46rem; margin-bottom: var(--s5); }
.sec-head > * + * { margin-top: var(--s3); }

/* Off-white band (brand #E8F0E5). Navy text, no cyan text, darker focus ring. */
.band-light {
  color-scheme: light;
  background: var(--df-off-white); color: var(--df-navy);
  --df-ui-text: #080F1A;
  --df-ui-text-dim: #4A5866;
  --df-ui-text-faint: #4A5866;
  --df-ui-line: rgb(8 15 26 / .14);
  --df-ui-line-strong: rgb(8 15 26 / .3);
  --df-ui-bg-1: #F3F7F1;
  --df-ui-bg-2: #FFFFFF;
  --focus: #0B879F;
}
/* The band has no hairline for the label to sit on, so the label moves inside the band. */
.band-light.sec { border-top-color: transparent; padding-top: var(--s6); }
/* Light mode: the band inverts to navy, so it still separates from the #F1EDE4 ground. */
[data-theme="light"] .band-light {
  color-scheme: dark;
  background: var(--df-navy); color: var(--df-off-white);
  --df-ui-text: #E8F0F8;
  --df-ui-text-dim: #A9B8C9;
  --df-ui-text-faint: #A9B8C9;
  --df-ui-line: rgb(232 240 229 / .14);
  --df-ui-line-strong: rgb(232 240 229 / .3);
  --df-ui-bg-1: #0C1729;
  --df-ui-bg-2: #101F36;
  --focus: #22D3EE;
}

/* ── Page head (subpages): typographic, H1 + lead, no label ──────────── */
.page-head { padding-top: calc(var(--nav-h) + var(--s7)); padding-bottom: var(--s6); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: var(--s3); }

/* ── Figure: caption below the image, mono, dim ──────────────────────── */
.figure { --ratio: 3 / 2; }
.figure > img, .figure > video { width: 100%; height: auto; aspect-ratio: var(--ratio); object-fit: cover; background: var(--df-ui-bg-2); }
.figure--16x9 { --ratio: 16 / 9; }
.figure--4x5 { --ratio: 4 / 5; }
.figure figcaption, .figure__foot { margin-top: 12px; font: 400 var(--fs-mono)/1.45 var(--df-font-mono); color: var(--df-ui-text-dim); }
.figure__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); }
/* Bleeds off the right edge of the viewport (use inside .wrap). */
.figure--bleed-right { margin-right: calc(-1 * var(--bleed)); }
.figure--bleed-right figcaption { padding-right: var(--bleed); }

/* ── Split: asymmetric image/text, 5/7 or 7/5 ────────────────────────── */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s5); align-items: start; }
.split--5-7 > :first-child { grid-column: 1 / span 5; padding-right: var(--s3); }
.split--5-7 > :last-child { grid-column: 6 / span 7; }
.split > .sec-head { margin-bottom: 0; }

/* ── Spec: hairline label/value table, mono, tabular figures ─────────── */
.spec { border-top: 1px solid var(--df-ui-line); font: 400 var(--fs-mono)/1.45 var(--df-font-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.spec > div { display: grid; grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 3fr); gap: var(--s2); padding: 10px 0; border-bottom: 1px solid var(--df-ui-line); }
.spec dt { color: var(--df-ui-text-dim); }
.spec dd { color: var(--df-ui-text); }
.spec + .note { margin-top: 10px; }

/* ── FAQ as a visible definition list ────────────────────────────────── */
.dl-faq { border-top: 1px solid var(--df-ui-line); }
.dl-faq > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--df-ui-line); }
.dl-faq dt { grid-column: 1 / span 5; font-weight: 600; line-height: 1.45; padding-right: var(--s3); }
.dl-faq dd { grid-column: 6 / span 7; max-width: 36rem; color: var(--df-ui-text-dim); text-wrap: pretty; }

/* ── Timeline: mono time + text rows ─────────────────────────────────── */
.timeline { list-style: none; border-top: 1px solid var(--df-ui-line); max-width: 46rem; }
.timeline li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--df-ui-line); }
.timeline time, .timeline .timeline__t { font: 500 var(--fs-mono)/1.9 var(--df-font-mono); font-variant-numeric: tabular-nums; color: var(--df-ui-text); }
.timeline p { max-width: 36rem; text-wrap: pretty; }

/* ── Production cells ────────────────────────────────────────────────── */
/* .cell-row: one production cell as image + text + spec. Body first in the DOM. */
.cell-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s4); align-items: start; }
.cell-row__body { grid-column: 1 / span 5; grid-row: 1; padding-right: var(--s3); }
.cell-row__media { grid-column: 6 / span 7; grid-row: 1; }
.cell-row--flip .cell-row__body { grid-column: 8 / span 5; padding-right: 0; padding-left: var(--s3); }
.cell-row--flip .cell-row__media { grid-column: 1 / span 7; }
.cell-row__body > p { margin-top: var(--s2); color: var(--df-ui-text-dim); max-width: 36rem; text-wrap: pretty; }
.cell-row__body .spec { margin-top: var(--s4); }
/* Lead variant (index): narrower text column, larger image. */
.cell-row--lead .cell-row__body { grid-column: 1 / span 4; }
.cell-row--lead .cell-row__media { grid-column: 5 / span 8; }

/* .cell-pair: two smaller cells side by side, under the image column of a .cell-row. */
.cell-pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s5); margin-top: var(--s6); }
.cell-pair > .cell-item:nth-child(1) { grid-column: 5 / span 4; grid-row: 1; }
.cell-pair > .cell-item:nth-child(2) { grid-column: 9 / span 4; grid-row: 1; }
/* Closes the section under the Van/Container pair, on the image column. */
.cell-pair__aside { grid-column: 5 / -1; grid-row: 2; align-self: start; padding-right: 0; }
.cell-pair__aside > p:first-child { max-width: 36rem; text-wrap: pretty; }
.cell-item h3 { margin-top: var(--s3); }
.cell-item > p { margin-top: var(--s1); font-size: var(--fs-small); color: var(--df-ui-text-dim); text-wrap: pretty; }
.cell-item .spec { margin-top: var(--s3); }

/* ── STURM 01 block (index) ──────────────────────────────────────────── */
.sturm { align-items: start; }
.sturm__text { grid-column: 1 / span 6; padding-right: var(--s4); }
.sturm__text .prose { margin-top: var(--s3); color: var(--df-ui-text-dim); }
.sturm__media { grid-column: 7 / span 6; }

/* ── Founders: compact boxes, 148 px photo left, text right ──────────── */
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 25rem)); gap: var(--s3); }
.founder { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s3); padding: var(--s3); background: var(--df-ui-bg-1); border: 1px solid var(--df-ui-line); align-items: start; }
.founder__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--df-ui-bg-2); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Display crops only (the press downloads stay uncropped): same eye line (about 45 %) and head size in both boxes. */
.founder__photo--jakub img { transform: scale(1.27); transform-origin: 50% 0; }
.founder__photo--christian img { transform: scale(1.1); transform-origin: 50% 100%; }
.founder__body { min-width: 0; padding-top: 2px; }
.founder__role { margin-top: 6px; font: 600 .9375rem/1.4 var(--df-font-body); color: var(--df-ui-text-dim); }
.founder__bio { margin-top: var(--s2); font-size: var(--fs-small); line-height: 1.5; color: var(--df-ui-text-dim); }
.founder__mail { margin-top: var(--s2); font-family: var(--df-font-mono); font-size: .8125rem; }

/* ── Race: drones available at the point of use, first 24 h (index §01) ─ */
.race { --race-cols: minmax(9rem, 13rem) minmax(0, 1fr) minmax(11rem, 15rem); --seg-gap: 2px; margin-top: var(--s6); }
.race__title { margin-bottom: var(--s2); font: 500 var(--fs-mono)/1.4 var(--df-font-mono); letter-spacing: .02em; color: var(--df-ui-text-dim); }
.race__chart { border-top: 1px solid var(--df-ui-line); }
.lane { display: grid; grid-template-columns: var(--race-cols); column-gap: var(--s4); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--df-ui-line); }
.lane__name { font: 600 var(--fs-small)/1.35 var(--df-font-body); color: var(--df-ui-text); text-wrap: balance; }
.lane__end { font: 400 var(--fs-mono)/1.35 var(--df-font-mono); color: var(--df-ui-text-dim); }
.lane--df .lane__end { color: var(--df-ui-text); white-space: nowrap; }
.lane--df .lane__end b { font: 700 var(--fs-figure)/1 var(--df-font-display); letter-spacing: -0.02em; margin-right: 4px; vertical-align: -2px; }
.track {
  position: relative; display: block; height: 32px;
  background: linear-gradient(90deg, var(--df-ui-line) 1px, transparent 1px) 0 0 / 25% 100% repeat-x;
  border-right: 1px solid var(--df-ui-line);
}
.track__fill, .track__hatch { position: absolute; left: 0; right: 0; top: 6px; bottom: 6px; }
/* One segment per 20-minute cycle: 72 in 24 h. */
/* --df-ui-accent: #22D3EE on dark, #0B879F (brand cyan for light ground) in light mode. */
.track__fill { background: linear-gradient(90deg, var(--df-ui-accent) calc(100% - var(--seg-gap)), transparent 0) 0 0 / calc(100% / 72) 100% repeat-x; }
.track__hatch { background: repeating-linear-gradient(135deg, var(--df-ui-line-strong) 0 1px, transparent 1px 7px); }
.track__head { position: absolute; top: 0; bottom: 0; left: 100%; width: 1.5px; margin-left: -1px; background: var(--df-ui-text-dim); }
.race__scale { display: grid; grid-template-columns: var(--race-cols); column-gap: var(--s4); padding-top: 10px; }
.race__axis { grid-column: 2; position: relative; height: 1.4em; font: 400 var(--fs-mono)/1.4 var(--df-font-mono); color: var(--df-ui-text-dim); font-variant-numeric: tabular-nums; }
.race__axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.race__axis span:nth-child(1) { left: 0; transform: none; }
.race__axis span:nth-child(2) { left: 25%; }
.race__axis span:nth-child(3) { left: 50%; }
.race__axis span:nth-child(4) { left: 75%; }
.race__axis span:nth-child(5) { left: 100%; transform: translateX(-100%); }
.race__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.race__notes { max-width: 44rem; }
.race__caption + .race__caption { margin-top: 4px; }
.race__caption { max-width: 44rem; font: 400 var(--fs-mono)/1.5 var(--df-font-mono); color: var(--df-ui-text-dim); }
.race__ctl { display: flex; gap: var(--s1); flex: none; }

/* Loop (site.js adds .is-run once the race is in view). Without JS: static end state. */
.race.is-run .track__fill { animation: df-fill 9s linear infinite, df-fillfade 9s linear infinite; }
.race.is-run .lane--df .track__head { animation: df-head 9s linear infinite; }
/* The ordered lane has no time: no marker, so nothing reads as a delivery at 24 h (decision A3). */
.lane--order .track__head { display: none; }
/* Same specificity as the run rules above, so pause also holds the head (the shorthand resets play-state). */
.race.is-paused .track__fill, .race.is-paused .lane--df .track__head,
.race.is-off .track__fill, .race.is-off .lane--df .track__head { animation-play-state: paused; }
@keyframes df-fill { 0% { clip-path: inset(0 100% 0 0); } 72%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes df-fillfade { 0%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes df-head { 0% { left: 0; } 72%, 100% { left: 100%; } }

/* ── Contact module ──────────────────────────────────────────────────── */
.contact-module { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s5); align-items: start; }
.routes { grid-column: 1 / span 7; list-style: none; border-top: 1px solid var(--df-ui-line); }
.routes li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s3); padding: 10px 0; border-bottom: 1px solid var(--df-ui-line); }
.routes a { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--fs-body)/1.3 var(--df-font-body); }
.routes__note { font: 400 var(--fs-mono)/1.45 var(--df-font-mono); color: var(--df-ui-text-dim); }
.contact-direct { grid-column: 9 / span 4; border-top: 1px solid var(--df-ui-line); }
.contact-direct > div { padding: 12px 0; border-bottom: 1px solid var(--df-ui-line); }
.contact-direct dt { font: 400 var(--fs-mono)/1.45 var(--df-font-mono); color: var(--df-ui-text-dim); }
.contact-direct dd { margin-top: 2px; line-height: 1.5; }
.contact-module__notice { grid-column: 1 / span 7; font-size: var(--fs-small); color: var(--df-ui-text-dim); max-width: 36rem; }
/* Short closing line for subpages without the full module. */
.closing { border-top: 1px solid var(--df-ui-line); padding-block: var(--s6) var(--sec-gap); }
.closing p { max-width: 40rem; font-size: var(--fs-h3); line-height: 1.45; }
.closing .btn { margin-top: var(--s3); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--df-ui-line); background: var(--df-ui-bg-1); padding-block: var(--s5) var(--s4); }
.foot__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3) var(--s5); }
.foot__logo { display: flex; align-items: center; justify-self: start; height: 44px; text-decoration: none; }
.foot__logo img { height: 36px; width: auto; }
.foot__claim { font: 700 var(--fs-body)/1.3 var(--df-font-display); letter-spacing: -0.01em; color: var(--df-ui-text-dim); }
.foot__links ul { display: flex; flex-wrap: wrap; gap: 4px var(--s3); list-style: none; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--fs-small)/1 var(--df-font-body); color: var(--df-ui-text-dim); text-decoration: none; }
.foot__links a:hover, .foot__links a[aria-current="page"] { color: var(--df-ui-text); text-decoration: underline; text-underline-offset: .3em; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--df-ui-line); font: 400 var(--fs-mono)/1.5 var(--df-font-mono); color: var(--df-ui-text-dim); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* Stacked hero: the text spans most of the width, so the veil runs top to bottom. */
  :root { --hero-veil: linear-gradient(180deg, rgb(5 10 18 / .55) 0%, rgb(5 10 18 / .62) 30%, rgb(5 10 18 / .62) 70%, rgb(5 10 18 / .8) 100%); }
  /* Without JS the burger cannot open the menu: show the mobile list in the flow instead. */
  html:not(.js) .burger { display: none; }
  html:not(.js) .nav__mobile[hidden] { display: block; position: relative; inset: auto; margin-top: var(--nav-h); max-height: none; }
  .nav__menu { display: none; }
  .nav__tools { margin-left: auto; }
  .burger { display: grid; }
  .hero__in { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .hero__box { grid-row: 1; }
  .hud { grid-row: 2; justify-self: start; align-self: start; width: 100%; max-width: 28rem; }
}
@media (min-width: 1101px) {
  .nav__mobile { display: none !important; }
}
@media (max-width: 1024px) {
  .cell-row--lead .cell-row__media { grid-column: 1 / -1; grid-row: 1; }
  .cell-row--lead .cell-row__body { grid-column: 1 / span 9; grid-row: 2; padding-right: 0; }
  .cell-pair > .cell-item:nth-child(1) { grid-column: 1 / span 6; }
  .cell-pair > .cell-item:nth-child(2) { grid-column: 7 / span 6; }
  .cell-pair__aside { grid-column: 1 / -1; grid-row: auto; }
  .founders { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .routes, .contact-module__notice { grid-column: 1 / span 12; }
  .contact-direct { grid-column: 1 / span 12; }
  .foot__top { grid-template-columns: auto minmax(0, 1fr); }
  .foot__links { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  :root { --hero-veil: linear-gradient(180deg, rgb(5 10 18 / .55) 0%, rgb(5 10 18 / .74) 45%, rgb(5 10 18 / .9) 100%); }
  .g12 > *, .split > *, .cell-row > *, .cell-pair > *, .dl-faq > div > * { grid-column: 1 / -1 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .cell-pair > * { grid-row: auto !important; }
  /* A bare H2 stacked over its text: 24 px, as in .sec-head (plan §4.6). */
  .g12:has(> h2:first-child), .split:has(> h2:first-child) { row-gap: var(--s3); }
  .split > figure { order: -1; }
  .cell-row__media { grid-row: 1; }
  .cell-row__body { grid-row: 2; }
  .sturm__text, .sturm__media { grid-column: 1 / -1; padding-right: 0; }
  .figure--bleed-right { margin-right: calc(-1 * var(--gutter)); }
  .figure--bleed-right figcaption { padding-right: var(--gutter); }
  .lane { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .lane .track { grid-column: 1 / -1; grid-row: 2; }
  .lane__end { text-align: right; }
  .lane--order .lane__end { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .race__scale { grid-template-columns: minmax(0, 1fr); }
  .race__axis { grid-column: 1; }
  .race { --seg-gap: 1px; }
}
@media (max-width: 640px) {
  :root { --nav-h: 64px; --sec-gap: var(--s6); --sec-gap-lg: var(--s7); }
  .nav__logo img { height: 30px; }
  .hero__in { padding-block: calc(var(--nav-h) + var(--s5)) var(--s5); }
  .sec-label { margin-bottom: var(--s3); }
  .band-light.sec { padding-top: var(--s5); }
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .spec > div { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s2); }
  .timeline li { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s2); }
  .routes li { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .founder { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s2); padding: var(--s2); }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .race .track__fill, .race .track__head { animation: none !important; }
  .race__ctl { display: none; }
  .hud.is-typing .hud__row dd { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════
   v3 — High-end layer (redesign branch). Scale, full-bleed media, one idea per screen.
   References: Helsing, Anduril, Shield AI, Quantum Systems, ARX (see docs/research).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --max: 1440px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --fs-mega: clamp(3.5rem, 13vw, 13rem);        /* STURM 01 stage title */
  --fs-stmt: clamp(2.5rem, 6vw, 6.25rem);        /* statement screens */
  --fs-big: clamp(2.25rem, 4.6vw, 4.5rem);       /* section H2 on the landing */
  --fs-num: clamp(4.5rem, 10vw, 9.5rem);         /* key figures */
  --pad-sec: clamp(96px, 11vw, 176px);
}

/* Navigation: mono, uppercase, small — bordered briefing button */
.nav__links a {
  font: 500 .75rem/1 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.nav__cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; margin-left: 12px; flex: none;
  font: 500 .75rem/1 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--df-cyan); border: 1px solid var(--df-cyan); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.nav__cta:hover { background: var(--df-cyan); color: var(--df-navy); }
[data-theme="light"] .nav[data-solid] .nav__cta, [data-theme="light"] .nav.is-scrolled .nav__cta { color: var(--df-ui-accent); border-color: var(--df-ui-accent); }
@media (max-width: 1100px) { .nav__cta { display: none; } }

/* Section labels: cyan mono with a leading rule */
.sec-label {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--df-ui-accent); letter-spacing: .14em; font-size: .75rem;
}
.sec-label::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* Buttons */
.btn--outline { border-color: var(--df-ui-line-strong); font: 500 .75rem/1 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.btn--outline:hover { border-color: var(--df-ui-accent); color: var(--df-ui-accent); }
.btn--outline-light { border: 1px solid rgb(232 240 229 / .55); color: var(--df-off-white); font: 500 .75rem/1 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.btn--outline-light:hover { border-color: var(--df-off-white); background: rgb(232 240 229 / .08); }
.btn--primary { font: 500 .8125rem/1 var(--df-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ctl--light { color: rgb(232 240 229 / .85); border-color: rgb(232 240 229 / .3); }

/* Hero: bigger claim, same composition */
.home .hero h1 { font-size: clamp(3rem, 7.4vw, 7.75rem); line-height: .92; }
.home .hero__box { max-width: 52rem; }
.home .hero__lead { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); max-width: 36rem; }

/* Reveal (site.js adds .reveal-ready; without JS everything is visible) */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* 01 — Statement screen */
.stmt { padding-block: var(--pad-sec) calc(var(--pad-sec) * .6); border-top: 1px solid var(--df-ui-line); }
.stmt__box { margin-top: var(--s6); padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px); --bracket: 36px; }
.stmt__box::before { top: 0; left: 0; border-color: var(--df-ui-accent); }
.stmt__box::after { bottom: 0; right: 0; border-color: var(--df-ui-accent); }
.stmt h2 { font-size: var(--fs-stmt); line-height: 1; letter-spacing: -0.035em; max-width: 16ch; }
.stmt__lead { margin-top: var(--s5); margin-left: auto; max-width: 30rem; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--df-ui-text-dim); }

/* Key figures + race */
.figures { padding-bottom: var(--pad-sec); }
.figures__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--df-ui-line); border-bottom: 1px solid var(--df-ui-line); }
.figures__row > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s2); padding: var(--s5) var(--s4) var(--s5) 0; }
.figures__row > div + div { border-left: 1px solid var(--df-ui-line); padding-left: var(--s4); }
.figures__row dt { font: 500 .75rem/1.4 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--df-ui-text-dim); }
.figures__row dd { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.figures__row dd b { font: 700 var(--fs-num)/.85 var(--df-font-display); letter-spacing: -0.05em; color: var(--df-ui-text); }
.figures__row > div.is-accent dd b { color: var(--df-ui-accent); }
.figures__row dd span { font: 500 clamp(1rem, 1.6vw, 1.5rem)/1 var(--df-font-mono); color: var(--df-ui-text-dim); }
.figures .race { margin-top: var(--s7); }
.figures .lane--df .lane__end b { font-size: clamp(2rem, 3vw, 2.75rem); color: var(--df-ui-accent); }
.figures .track { height: 44px; }
.figures .track__fill, .figures .track__hatch { top: 8px; bottom: 8px; }

/* Section top (label + large H2 + lead on the right) */
.sec-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s3); align-items: end; margin-bottom: var(--s6); }
.sec-top .sec-label { grid-column: 1 / -1; }
.sec-top h2 { grid-column: 1 / span 8; font-size: var(--fs-big); line-height: 1.02; letter-spacing: -0.03em; }
.sec-top__lead { grid-column: 9 / span 4; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.55; color: var(--df-ui-text-dim); }
.sec-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); }

/* 02 — Cells mosaic */
.cells { padding-block: var(--pad-sec); border-top: 1px solid var(--df-ui-line); }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; height: clamp(520px, 62vw, 860px); }
.tile { position: relative; overflow: hidden; display: block; background: var(--df-navy); color: var(--df-off-white); text-decoration: none; isolation: isolate; }
.tile--lg { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.tile:not(.tile--lg) { grid-column: 9 / span 4; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); z-index: -2; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(5 10 18 / 0) 45%, rgb(5 10 18 / .85) 100%); }
.tile:hover img { transform: scale(1.035); }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: clamp(18px, 2.2vw, 32px); }
.tile__name { font: 700 clamp(1.5rem, 2.4vw, 2.25rem)/1.05 var(--df-font-display); letter-spacing: -0.02em; }
.tile--lg .tile__name { font-size: clamp(2rem, 4vw, 3.75rem); }
.tile__fig { font: 500 .8125rem/1.3 var(--df-font-mono); letter-spacing: .04em; color: rgb(232 240 229 / .8); }
.tile:focus-visible { outline-offset: 4px; }

/* 03 — STURM 01 stage: full viewport, bench video as background */
.stage { position: relative; min-height: 100svh; display: grid; align-items: end; isolation: isolate; overflow: hidden; background: var(--df-navy); color: var(--df-off-white); }
.stage__media { position: absolute; inset: 0; z-index: -1; }
.stage__media video { width: 100%; height: 100%; object-fit: cover; }
.stage__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(5 10 18 / .78) 0%, rgb(5 10 18 / .35) 50%, rgb(5 10 18 / .05) 100%),
  linear-gradient(180deg, rgb(5 10 18 / .5) 0%, rgb(5 10 18 / 0) 30%, rgb(5 10 18 / .7) 100%); }
.stage__in { padding-block: var(--s8) var(--s7); }
.stage .sec-label { color: var(--df-cyan); }
.stage__title { margin-top: var(--s3); font-size: var(--fs-mega); line-height: .82; letter-spacing: -0.055em; color: var(--df-off-white); white-space: nowrap; }
.stage__text { margin-top: var(--s4); max-width: 34rem; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.55; color: rgb(232 240 229 / .88); }
.stage__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s5); }
.stage .btn, .stage .ctl { min-height: 48px; }

/* 04 — Applications: image left, big list right */
.fields { padding-block: var(--pad-sec); }
.fields__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.fields__media { grid-column: 1 / span 6; margin-left: calc(-1 * var(--bleed)); aspect-ratio: 4 / 5; overflow: hidden; }
.fields__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.fields__body { grid-column: 8 / span 5; }
.fields h2 { margin-top: var(--s3); font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -0.025em; }
.fields__list { list-style: none; margin: var(--s5) 0; border-top: 1px solid var(--df-ui-line); }
.fields__list li { padding: 16px 0; border-bottom: 1px solid var(--df-ui-line); font: 700 clamp(1.25rem, 1.9vw, 1.75rem)/1.2 var(--df-font-display); letter-spacing: -0.015em; }

/* 05 — Company */
.team { padding-block: var(--pad-sec); border-top: 1px solid var(--df-ui-line); }
.team__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s5); align-items: end; }
.team__head { grid-column: 1 / span 6; }
.team__head h2 { margin-top: var(--s3); margin-bottom: var(--s5); font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.02; letter-spacing: -0.03em; }
.team .founders { grid-column: 7 / span 6; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* 06 — Contact */
.cta { padding-block: var(--pad-sec) var(--s7); border-top: 1px solid var(--df-ui-line); }
.cta__title { margin-top: var(--s4); font-size: var(--fs-stmt); line-height: .95; letter-spacing: -0.04em; }
.cta__lead { margin-top: var(--s4); margin-bottom: var(--s7); max-width: 40rem; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--df-ui-text-dim); }
.home .routes a { font: 700 clamp(1.25rem, 2vw, 1.75rem)/1.2 var(--df-font-display); letter-spacing: -0.015em; text-decoration: none; }
.home .routes a::after { content: "→"; margin-left: 14px; color: var(--df-ui-accent); transition: margin-left .25s var(--ease); }
.home .routes a:hover::after { margin-left: 20px; }
.home .routes li { padding: 14px 0; }

/* Footer: always dark, large official wordmark */
.foot { background: var(--df-navy); color: var(--df-off-white);
  --df-ui-text: #E8F0F8; --df-ui-text-dim: #8DA3BD; --df-ui-line: rgba(80,170,220,.14); }
[data-theme="light"] .foot .logo-dark { display: block; }
[data-theme="light"] .foot .logo-light { display: none; }
.foot__mark { width: 100%; height: auto; margin-top: var(--s7); }

/* Responsive for the v3 layer */
@media (max-width: 1024px) {
  .sec-top h2, .sec-top__lead { grid-column: 1 / -1; }
  .fields__media { grid-column: 1 / span 6; }
  .fields__body { grid-column: 7 / span 6; }
  .team__head, .team .founders { grid-column: 1 / -1; }
  .team .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .figures__row { grid-template-columns: 1fr; }
  .figures__row > div + div { border-left: 0; border-top: 1px solid var(--df-ui-line); padding-left: 0; }
  .mosaic { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .tile--lg, .tile:not(.tile--lg) { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; }
  .fields__in { row-gap: var(--s5); }
  .fields__media, .fields__body { grid-column: 1 / -1; }
  .fields__media { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); aspect-ratio: 16 / 10; }
  .team .founders { grid-template-columns: 1fr; }
  .stage__title { white-space: normal; }
  .stmt__lead { margin-left: 0; }
}
/* v3 tweaks after first review */
.stmt h2 { font-size: clamp(2.75rem, 7vw, 7.25rem); max-width: 17ch; }
.team .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team .founder { grid-template-columns: 1fr; padding: 12px; }
.team .founder__photo { aspect-ratio: 4 / 5; }
.team .founder__body { padding: 4px 4px 8px; }
@media (max-width: 480px) { .team .founders { grid-template-columns: 1fr 1fr; gap: 8px; } }
.team .founders { max-width: 30rem; justify-self: end; width: 100%; }
@media (max-width: 1024px) { .team .founders { justify-self: start; } }

/* ════════ v3 — Subpages ════════ */
/* Page hero with full-bleed media (cells, sturm-01, applications) */
.phero { position: relative; min-height: 86svh; display: grid; align-items: end; isolation: isolate; overflow: hidden; background: var(--df-navy); color: var(--df-off-white); }
.phero__media { position: absolute; inset: 0; z-index: -1; }
.phero__media img, .phero__media video { width: 100%; height: 100%; object-fit: cover; }
.phero__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(5 10 18 / .82) 0%, rgb(5 10 18 / .45) 50%, rgb(5 10 18 / .1) 100%),
  linear-gradient(180deg, rgb(5 10 18 / .55) 0%, rgb(5 10 18 / 0) 30%, rgb(5 10 18 / .75) 100%); }
.phero__in { padding-block: calc(var(--nav-h) + var(--s8)) var(--s7); }
.phero .sec-label { color: var(--df-cyan); }
.phero h1 { margin-top: var(--s3); font-size: clamp(3rem, 9vw, 9.5rem); line-height: .88; letter-spacing: -0.05em; color: var(--df-off-white); max-width: 14ch; }
.phero__lead { margin-top: var(--s4); max-width: 36rem; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.55; color: rgb(232 240 229 / .88); }
.phero .stage__title { margin-top: var(--s3); }

/* Typographic page head (company, press, legal) */
.page-head { padding-top: calc(var(--nav-h) + clamp(96px, 12vw, 180px)); padding-bottom: var(--s7); }
.page-head h1 { font-size: clamp(2.75rem, 7.5vw, 7.5rem); line-height: .92; letter-spacing: -0.045em; max-width: 16ch; }
.page-head .lead { margin-top: var(--s4); font-size: clamp(1.0625rem, 1.35vw, 1.25rem); max-width: 40rem; }

/* Sections on subpages */
.sec { padding-top: var(--s5); padding-bottom: var(--pad-sec); }
.sec-head { max-width: 62rem; }
.sec-head h2, .sec > .wrap > h2:not(.sec-label), .g12 > h2, .split h2 { font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
.lead { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }

/* Process steps: big times, cyan accent on the rhythm */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--df-ui-line); }
.steps li { padding: var(--s5) var(--s4) var(--s4) 0; }
.steps li + li { border-left: 1px solid var(--df-ui-line); padding-left: var(--s4); }
.steps__t { display: block; font: 700 clamp(3rem, 6.5vw, 6rem)/.9 var(--df-font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--df-ui-text); }
.steps__t--accent { color: var(--df-ui-accent); }
.steps p { margin-top: var(--s3); max-width: 22rem; color: var(--df-ui-text-dim); font-size: clamp(1rem, 1.2vw, 1.125rem); }

.figures__note { margin-top: var(--s2); }

/* Large spec rows */
.spec--lg { font-family: var(--df-font-body); }
.spec--lg > div { padding: 18px 0; align-items: baseline; }
.spec--lg dt { font: 500 .75rem/1.4 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.spec--lg dd { font: 700 clamp(1.25rem, 1.8vw, 1.625rem)/1.2 var(--df-font-display); letter-spacing: -0.015em; }
.spec--on-dark { --df-ui-line: rgb(232 240 229 / .22); color: var(--df-off-white); }
.spec--on-dark dt { color: rgb(232 240 229 / .7); }
.spec--on-dark dd { color: var(--df-off-white); }

/* Split 7/5: bleeding image left, text right */
.split7 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s5); align-items: center; }
.split7__media { grid-column: 1 / span 7; margin-left: calc(-1 * var(--bleed)); aspect-ratio: 4 / 3; overflow: hidden; }
.split7__media img, .split7__media video { width: 100%; height: 100%; object-fit: cover; }
.split7__body { grid-column: 9 / span 4; }
.split7__body h2 { margin-top: var(--s3); font-size: clamp(1.75rem, 3.2vw, 3rem); line-height: 1.04; letter-spacing: -0.03em; }
.split7__body .spec, .split7__body .prose { margin-top: var(--s5); }
.split7--flip .split7__media { grid-column: 6 / span 7; margin-left: 0; margin-right: calc(-1 * var(--bleed)); order: 2; }
.split7--flip .split7__body { grid-column: 1 / span 4; order: 1; }

/* Stage with a still image and split content */
.stage--image { min-height: 92svh; }
.stage__media img { width: 100%; height: 100%; object-fit: cover; }
.stage__in--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s5); align-items: end; }
.stage__in--split > :first-child { grid-column: 1 / span 7; }
.stage__in--split > :last-child { grid-column: 9 / span 4; }
.stage__h2 { margin-top: var(--s3); font-size: clamp(2.25rem, 5vw, 5rem); line-height: .98; letter-spacing: -0.04em; color: var(--df-off-white); }

/* FAQ, larger */
.dl-faq > div { padding: var(--s4) 0; }
.dl-faq dt { font: 700 clamp(1.125rem, 1.6vw, 1.5rem)/1.25 var(--df-font-display); letter-spacing: -0.015em; }
.dl-faq dd { font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.6; }

/* Closing CTA band */
.closing { border-top: 1px solid var(--df-ui-line); padding-block: var(--pad-sec); }
.closing h2, .closing p { max-width: 20ch; font: 700 clamp(2.25rem, 5vw, 5rem)/1 var(--df-font-display); letter-spacing: -0.04em; color: var(--df-ui-text); }
.closing .btn { margin-top: var(--s5); }

@media (max-width: 1024px) {
  .split7__media, .split7--flip .split7__media { grid-column: 1 / -1; margin-right: calc(-1 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); order: 0; }
  .split7__body, .split7--flip .split7__body { grid-column: 1 / span 10; order: 1; }
  .stage__in--split > :first-child, .stage__in--split > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .steps li + li { border-left: 0; border-top: 1px solid var(--df-ui-line); padding-left: 0; }
  .split7__body { grid-column: 1 / -1; }
  .phero { min-height: 78svh; }
}
.phero--tall { min-height: 100svh; }
.phero .stage__title { color: var(--df-off-white); }
.figures__row dd b { white-space: nowrap; }
.spec--wide { max-width: none; }
.spec--wide > div { grid-template-columns: minmax(12rem, 4fr) minmax(0, 8fr); }
.closing .sec-label { margin-bottom: var(--s4); }
.closing__lead { margin-top: var(--s4); max-width: 38rem; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--df-ui-text-dim); }
.more .btn { padding-block: 0; margin-block: 0; }

/* 04 — Applications: use-case video stage, hover/focus switches the background video */
.uc { position: relative; min-height: 100svh; display: grid; align-items: center; isolation: isolate; overflow: hidden; background: var(--df-navy); color: var(--df-off-white); }
.uc__media { position: absolute; inset: 0; z-index: -1; }
.uc__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease); }
.uc__vid.is-active { opacity: 1; }
.uc__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(5 10 18 / .82) 0%, rgb(5 10 18 / .55) 45%, rgb(5 10 18 / .25) 100%),
  linear-gradient(180deg, rgb(5 10 18 / .4) 0%, rgb(5 10 18 / 0) 25%, rgb(5 10 18 / .5) 100%); }
.uc__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s6); align-items: center; padding-block: var(--pad-sec); }
.uc__head { grid-column: 1 / span 5; }
.uc .sec-label { color: var(--df-cyan); }
.uc__head h2 { margin-top: var(--s3); margin-bottom: var(--s5); font-size: clamp(2rem, 3.8vw, 3.75rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--df-off-white); }
.uc__list { grid-column: 7 / span 6; list-style: none; border-top: 1px solid rgb(232 240 229 / .18); }
.uc__list li { border-bottom: 1px solid rgb(232 240 229 / .18); }
.uc__item { display: block; width: 100%; padding: 18px 0; background: none; border: 0; text-align: left; cursor: pointer; color: rgb(232 240 229 / .5); transition: color .35s var(--ease), padding-left .35s var(--ease); }
.uc__name { font: 700 clamp(1.375rem, 2.4vw, 2.25rem)/1.1 var(--df-font-display); letter-spacing: -0.02em; }
.uc__item:hover, .uc__item.is-active { color: var(--df-off-white); }
.uc__item.is-active { padding-left: 10px; }
.uc__item:focus-visible { outline-offset: -2px; }
.uc__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(232 240 229 / .1); }
.uc__progress span { display: block; height: 100%; width: 0; background: var(--df-cyan); }
.uc.is-cycling .uc__progress span { animation: uc-progress var(--uc-dur, 6s) linear forwards; }
@keyframes uc-progress { from { width: 0; } to { width: 100%; } }
@media (max-width: 1024px) { .uc__head, .uc__list { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .uc__vid { transition: none; } .uc__progress { display: none; } }

/* closing: only the headline is display-size */
.closing p:not([class]) { max-width: 20ch; font: 700 clamp(2.25rem, 5vw, 5rem)/1 var(--df-font-display); letter-spacing: -0.04em; }
.closing p.sec-label, .closing p.closing__lead { max-width: none; font-family: revert; }
.closing p.sec-label { font: 500 .75rem/1.2 var(--df-font-mono); letter-spacing: .14em; }
.closing p.closing__lead { font: 400 clamp(1.0625rem, 1.3vw, 1.25rem)/1.55 var(--df-font-body); letter-spacing: 0; color: var(--df-ui-text-dim); max-width: 38rem; }

/* Company: founder cards with bios */
.team .founder__bio { font-size: var(--fs-small); }
.team .founder__mail { font-size: .8125rem; }

/* Applications page: video tiles, play on hover/focus */
.fgrid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ftile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--df-navy); color: var(--df-off-white); isolation: isolate; }
.ftile__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85) brightness(.8); transform: scale(1.02); transition: filter .6s var(--ease), transform 1.2s var(--ease); }
.ftile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(5 10 18 / .15) 0%, rgb(5 10 18 / 0) 35%, rgb(5 10 18 / .88) 100%); }
.ftile:hover .ftile__vid, .ftile.is-playing .ftile__vid { filter: none; transform: scale(1.06); }
.ftile__cap { position: absolute; inset: auto 0 0 0; padding: clamp(18px, 2vw, 28px); }
.ftile h3 { font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--df-off-white); }
.ftile p { margin-top: var(--s1); font-size: var(--fs-small); line-height: 1.45; color: rgb(232 240 229 / .8); max-width: 22rem; }
@media (max-width: 1024px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; } .ftile { aspect-ratio: 4 / 3; } }
/* Legal pages: calmer scale */
.legal-page .page-head h1 { font-size: clamp(2.5rem, 5.5vw, 5rem); }
.legal-page .sec h2:not(.sec-label) { font-size: clamp(1.375rem, 2.2vw, 2rem); letter-spacing: -0.015em; }
.legal-page .sec { padding-bottom: var(--s7); }
.founder__mail { overflow-wrap: anywhere; } @media (max-width: 480px) { .team .founder__mail { font-size: .6875rem; } }

/* ════════ v3.1 — feedback 28.09. ════════ */
/* Key figures: smaller, centred */
.figures__row > div { align-items: center; text-align: center; padding: var(--s4) var(--s3); }
.figures__row > div + div { padding-left: var(--s3); }
.figures__row dd { justify-content: center; }
.figures__row dd b { font-size: clamp(3rem, 5.6vw, 5.25rem); }
.figures__row dd span { font-size: clamp(.9375rem, 1.3vw, 1.25rem); }
.figures { padding-bottom: var(--s7); }

/* Race: DropForce loop vs continuous conventional bar */
.figures .race { margin-top: var(--s6); }
.race__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); margin-bottom: var(--s2); }
.race__head .race__title { margin: 0; }
.race__clock { font: 500 .75rem/1.4 var(--df-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--df-ui-text-dim); font-variant-numeric: tabular-nums; }
.race__clock b { color: var(--df-ui-text); font-weight: 500; margin-left: 8px; }
.lane { grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) 7.5rem 8.5rem; column-gap: var(--s3); padding: var(--s2) 0; }
.lane__name { font: 600 var(--fs-small)/1.35 var(--df-font-body); }
.figures .track, .track { height: 30px; background: rgb(128 160 190 / .06); border: 1px solid var(--df-ui-line); border-right-width: 1px; }
.figures .track__fill, .track__fill {
  position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; animation: none !important;
  transform-origin: left center; transform: scaleX(1);
  background: linear-gradient(90deg, rgb(34 211 238 / .35), var(--df-ui-accent));
}
.track__fill--conv { transform: scaleX(.0833); background: linear-gradient(90deg, rgb(141 163 189 / .18), rgb(141 163 189 / .55)); }
.race.is-live .track__fill { transform: scaleX(0); }
.lane__end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; }
.lane__end b { font: 700 clamp(1.25rem, 1.8vw, 1.625rem)/1 var(--df-font-display); letter-spacing: -0.02em; margin: 0; vertical-align: 0; }
.figures .lane--df .lane__end b, .lane--df .lane__end b { font-size: clamp(1.25rem, 1.8vw, 1.625rem); color: var(--df-ui-accent); }
.lane--conv .lane__end b { color: var(--df-ui-text-dim); }
.lane__count { font: 400 .75rem/1.3 var(--df-font-mono); letter-spacing: .06em; color: var(--df-ui-text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.lane__count b { display: inline-block; min-width: 2ch; margin-left: 6px; font-weight: 500; color: var(--df-ui-text); }
/* The drone that pops up when the DropForce bar is full */
.dronepop { position: relative; width: 26px; height: 26px; flex: none; opacity: 0; transform: scale(.4); }
.dronepop::before, .dronepop::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; background: var(--df-ui-accent); }
.dronepop::before { transform: rotate(45deg); } .dronepop::after { transform: rotate(-45deg); }
.dronepop i { position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--df-ui-accent); border-radius: 50%; }
.dronepop i:nth-child(1) { top: 0; left: 0; } .dronepop i:nth-child(2) { top: 0; right: 0; }
.dronepop i:nth-child(3) { bottom: 0; left: 0; } .dronepop i:nth-child(4) { bottom: 0; right: 0; }
.race.is-done .dronepop { opacity: 1; transform: scale(1); transition: opacity .25s ease-out, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.race.is-done .dronepop i { animation: df-rotor .22s linear infinite; }
@keyframes df-rotor { 0% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(.6); opacity: .5; } }
.race__foot { margin-top: var(--s2); }
.race__caption { max-width: 52rem; }
@media (max-width: 860px) {
  .lane { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .lane .track { grid-column: 1 / -1; grid-row: 2; }
  .lane__end { grid-column: 2; grid-row: 1; }
  .lane__count { grid-column: 1 / -1; grid-row: 3; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .race.is-done .dronepop i { animation: none; } }

/* Production cells: fits one screen */
.cells { padding-block: var(--s7); }
.cells .sec-top { margin-bottom: var(--s4); }
.cells .sec-top h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); }
.mosaic { height: clamp(400px, 40vw, 580px); }

/* Use-case stage: lighter veil so the footage reads */
.uc__media::after { background:
  linear-gradient(90deg, rgb(5 10 18 / .7) 0%, rgb(5 10 18 / .35) 45%, rgb(5 10 18 / .08) 100%),
  linear-gradient(180deg, rgb(5 10 18 / .3) 0%, rgb(5 10 18 / 0) 25%, rgb(5 10 18 / .35) 100%); }
.ftile__vid { filter: saturate(.95) brightness(.95); }
.ftile::after { background: linear-gradient(180deg, rgb(5 10 18 / 0) 40%, rgb(5 10 18 / .82) 100%); }
@media (max-width: 1024px) {
  .uc__media::after { background: linear-gradient(180deg, rgb(5 10 18 / .55) 0%, rgb(5 10 18 / .45) 40%, rgb(5 10 18 / .75) 100%); }
}
.figures .track__fill--conv, .track__fill.track__fill--conv { background: linear-gradient(90deg, rgb(141 163 189 / .16), rgb(141 163 189 / .5)); }
.cells { padding-block: var(--s6) var(--s7); }
.cells .sec-top { row-gap: var(--s2); }
.mosaic { height: clamp(360px, min(42vw, calc(100svh - var(--nav-h) - 250px)), 600px); }
@media (max-width: 860px) { .mosaic { height: auto; } }

/* ════════ cells.html v3.2 ════════ */
.steps--compact li { padding-block: var(--s4); }
.steps--compact .steps__t { font-size: clamp(2.5rem, 4.4vw, 4.25rem); }
.steps--compact h3 { margin-top: var(--s3); font-size: clamp(1.25rem, 1.8vw, 1.625rem); letter-spacing: -0.015em; }
.steps--compact p { margin-top: var(--s1); }

/* 24-hour tally: 72 drones light up one by one */
.output { padding-bottom: var(--s7); }
.tally { border-top: 1px solid var(--df-ui-line); border-bottom: 1px solid var(--df-ui-line); padding: var(--s4) 0 var(--s3); }
.tally__grid { list-style: none; display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: clamp(6px, .9vw, 14px); }
.tally__grid li { aspect-ratio: 1; display: grid; place-items: center; color: rgb(141 163 189 / .22); transition: color .35s var(--ease), transform .35s var(--ease); }
.tally__grid svg { width: 100%; height: 100%; }
.tally__grid li.is-on { color: var(--df-ui-accent); }
.tally__grid li.is-new { transform: scale(1.18); }
.tally__foot { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); font: 500 .75rem/1.4 var(--df-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--df-ui-text-dim); font-variant-numeric: tabular-nums; }
.tally__foot b { margin-left: 8px; color: var(--df-ui-text); font-weight: 500; }
html:not(.js) .tally__grid li { color: var(--df-ui-accent); }

/* Cell stage: full-viewport, tabs switch image + spec panel */
.cs { position: relative; min-height: 100svh; display: grid; isolation: isolate; overflow: hidden; background: var(--df-navy); color: var(--df-off-white); }
.cs__media { position: absolute; inset: 0; z-index: -1; }
.cs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1s var(--ease), transform 6s linear; }
.cs__img.is-active { opacity: 1; transform: scale(1); }
.cs__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(5 10 18 / .62) 0%, rgb(5 10 18 / .18) 38%, rgb(5 10 18 / 0) 60%),
  linear-gradient(180deg, rgb(8 15 26 / .25) 0%, rgb(8 15 26 / 0) 22%, rgb(8 15 26 / 0) 55%, rgb(8 15 26 / .7) 82%, rgb(8 15 26) 100%); }
.cs__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s5); align-items: end; padding-block: calc(var(--nav-h) + var(--s7)) var(--s7); }
.cs__head { grid-column: 1 / span 7; align-self: center; }
.cs .sec-label { color: var(--df-cyan); }
.cs__tabs { list-style: none; margin-top: var(--s4); }
.cs__tab { display: block; width: 100%; padding: 10px 0; background: none; border: 0; text-align: left; cursor: pointer; color: rgb(232 240 229 / .38); transition: color .35s var(--ease), transform .35s var(--ease); }
.cs__name { font: 700 clamp(2.25rem, 5.2vw, 5.25rem)/1 var(--df-font-display); letter-spacing: -0.04em; }
.cs__tab:hover, .cs__tab.is-active { color: var(--df-off-white); }
.cs__tab.is-active { transform: translateX(10px); }
.cs__panels { grid-column: 9 / span 4; }
.cs__panel { background: rgb(8 15 26 / .72); border: 1px solid rgb(232 240 229 / .16); padding: var(--s4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cs__panel[hidden] { display: none; }
html:not(.js) .cs__panel + .cs__panel { margin-top: 12px; }
.js .cs__panel:not(.is-active) { display: none; }
.cs__panel.is-active { animation: cs-in .5s var(--ease); }
@keyframes cs-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cs__desc { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.5; color: rgb(232 240 229 / .9); }
.cs__spec { margin-top: var(--s4); border-top: 1px solid rgb(232 240 229 / .16); }
.cs__spec > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s2); padding: 12px 0; border-bottom: 1px solid rgb(232 240 229 / .16); align-items: baseline; }
.cs__spec dt { font: 500 .6875rem/1.4 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgb(232 240 229 / .6); }
.cs__spec dd { font: 700 1.0625rem/1.3 var(--df-font-display); color: var(--df-off-white); }
.cs__spec dd small { display: inline-block; margin-left: 6px; font: 400 .6875rem/1 var(--df-font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgb(232 240 229 / .6); }
.cs__bar { display: block; height: 4px; margin-top: 8px; background: rgb(232 240 229 / .12); position: relative; }
.cs__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--df-cyan); }
.cs.is-cycling .uc__progress span { animation: uc-progress var(--cs-dur, 7s) linear forwards; }
@media (max-width: 1024px) {
  .cs__head, .cs__panels { grid-column: 1 / -1; }
  .cs__in { align-items: start; }
  .tally__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tally__grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .cs__img { transition: none; transform: none; } .cs__panel.is-active { animation: none; } }

/* Company origin: then → now */
.origin { padding-block: var(--pad-sec); border-top: 1px solid var(--df-ui-line); }
.origin h2 { margin-top: var(--s4); max-width: 22ch; font-size: clamp(2.25rem, 4.8vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; }
.origin h2 .accent { color: var(--df-ui-accent); }
.origin__cmp { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s5); margin-top: var(--s7); padding-block: var(--s5); border-top: 1px solid var(--df-ui-line); border-bottom: 1px solid var(--df-ui-line); }
.origin__tag { font: 500 .75rem/1 var(--df-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--df-ui-text-dim); }
.origin__col--now .origin__tag { color: var(--df-ui-accent); }
.origin__num { margin-top: var(--s2); font: 700 clamp(4rem, 10vw, 9rem)/.9 var(--df-font-display); letter-spacing: -0.05em; white-space: nowrap; }
.origin__num small { margin-left: 10px; font: 500 clamp(1rem, 1.8vw, 1.75rem)/1 var(--df-font-mono); letter-spacing: 0; color: var(--df-ui-text-dim); }
.origin__col--then .origin__num { color: var(--df-ui-text-dim); }
.origin__col--then s { position: relative; text-decoration: none; }
.origin__col--then s::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: .07em; background: var(--df-ui-accent); transform-origin: left; transform: scaleX(1); }
.reveal-ready .origin__col--then s::after { transform: scaleX(0); transition: transform .9s .5s var(--ease); }
.reveal-ready .origin__col--then.is-in s::after { transform: scaleX(1); }
.origin__col--now .origin__num { color: var(--df-ui-accent); }
.origin__txt { margin-top: var(--s3); max-width: 24rem; color: var(--df-ui-text-dim); font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.5; }
.origin__arrow { width: clamp(40px, 5vw, 72px); color: var(--df-ui-accent); }
.origin__close { margin-top: var(--s5); max-width: 40rem; font: 700 clamp(1.25rem, 2vw, 1.75rem)/1.3 var(--df-font-display); letter-spacing: -0.015em; }
@media (max-width: 860px) {
  .origin__cmp { grid-template-columns: 1fr; gap: var(--s4); }
  .origin__arrow { transform: rotate(90deg); }
}
.sec-h { font: 700 clamp(1.25rem, 2vw, 1.75rem)/1.2 var(--df-font-display); letter-spacing: -0.015em; margin-bottom: var(--s3); }

/* Nav with six links: never wrap a link; tighten the spacing just above the burger breakpoint. */
.nav__links a, .nav__cta { white-space: nowrap; }
@media (max-width: 1260px) and (min-width: 1101px) {
  .nav__links { gap: 0; }
  .nav__links a { padding: 0 9px; letter-spacing: .08em; }
  .nav__cta { margin-left: 8px; padding: 0 12px; letter-spacing: .08em; }
}

/* Large spec tables on narrow phones: label above value, never wider than the screen. */
.spec dd { overflow-wrap: break-word; }
@media (max-width: 560px) {
  .spec--lg > div, .spec--wide > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 0; }
}

/* Tablet portrait (641–860): use the width instead of stacking like a phone. */
@media (min-width: 641px) and (max-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { padding-right: var(--s3); }
  .steps li + li { border-top: 0; border-left: 1px solid var(--df-ui-line); padding-left: var(--s3); }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--lg { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .tile:not(.tile--lg) { grid-column: auto; aspect-ratio: 4 / 3; }
}
@media (min-width: 701px) and (max-width: 860px) {
  .figures__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figures__row > div + div { border-top: 0; border-left: 1px solid var(--df-ui-line); padding-left: var(--s3); }
}
/* Tall portrait tablets: full-screen stages would be mostly empty image; cap them near the width. */
@media (orientation: portrait) and (min-width: 641px) and (max-width: 1100px) {
  .stage { min-height: min(100svh, 100vw); }
  .phero--tall { min-height: min(100svh, 110vw); }
}
/* Company founders on phones: one card per row, photo left and text right, so bios and e-mails do not break mid-word. */
@media (max-width: 560px) {
  #founders.team .founders { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: none; }
  #founders.team .founder { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px; }
  #founders.team .founder__body { padding: 0; }
  #founders.team .founder__mail { font-size: .75rem; overflow-wrap: normal; }
}
/* Company origin: press quote under the close */
.origin__press { margin: var(--s6) 0 0; padding-left: var(--s3); border-left: 2px solid var(--df-ui-line-strong); max-width: 44rem; }
.origin__press blockquote { margin: 0; }
.origin__press p { font: 400 clamp(1.125rem, 1.6vw, 1.375rem)/1.45 var(--df-font-body); color: var(--df-ui-text); text-wrap: pretty; }
.origin__press figcaption { margin-top: var(--s2); font: 400 .8125rem/1.5 var(--df-font-mono); color: var(--df-ui-text-dim); }
.origin__press figcaption a { color: var(--df-ui-text); }
.origin__press figcaption a + a { margin-left: .75em; }

/* ── Two ways to get drones (landing): order STURM 01, or keep a production cell on site.
      A monthly-volume slider highlights the fitting way (threshold 10 a month, client decision 29.09.2026).
      Line-art scenes in the store drawing style; the drone is an abstract mark (patent pending).
      Static final frame without motion or JS; loops run only in view, with a pause control (WCAG 2.2.2). ── */
.ways { padding-block: var(--pad-sec); border-top: 1px solid var(--df-ui-line); }
.ways__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* volume picker */
.ways__pick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col-gap); row-gap: 10px; align-items: center; margin-bottom: var(--s5); padding: var(--s3) 0; border-top: 1px solid var(--df-ui-line); border-bottom: 1px solid var(--df-ui-line); }
.ways__label { font: 500 .75rem/1.4 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--df-ui-text-dim); }
.ways__slider { display: flex; align-items: center; gap: var(--s3); }
.ways__slider input { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; accent-color: var(--df-ui-accent); cursor: pointer; }
.ways__num { min-width: 3ch; font: 700 clamp(2.25rem, 3.4vw, 3rem)/1 var(--df-font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-align: right; }
.ways__rec { grid-column: 1 / -1; font: 600 clamp(1.0625rem, 1.4vw, 1.25rem)/1.45 var(--df-font-body); color: var(--df-ui-text); text-wrap: pretty; }
.ways__rec b { font-weight: 700; }
.ways__note { grid-column: 1 / -1; font: 400 .75rem/1.45 var(--df-font-mono); color: var(--df-ui-text-dim); }
.ways__note[hidden] { display: block; visibility: hidden; }
html:not(.js) .ways__slider, html:not(.js) .ways__label { display: none; }
@media (max-width: 860px) { .ways__pick { grid-template-columns: minmax(0, 1fr); } }

.ways__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.way { display: flex; flex-direction: column; min-width: 0; transition: opacity .4s var(--ease); }
.way__scene { position: relative; background: var(--df-ui-bg-2); padding: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px) clamp(14px, 1.6vw, 20px); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .4s var(--ease); }
.way.is-rec .way__scene { box-shadow: inset 0 0 0 1px var(--df-ui-accent); }
.way__fits { position: absolute; top: 10px; left: 10px; padding: 5px 8px; background: var(--df-cyan); color: var(--df-navy); font: 500 .6875rem/1 var(--df-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.way__fits:empty { display: none; }
.way__svg { width: 100%; height: auto; color: var(--df-ui-text-faint); overflow: visible; }
.way__caps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 2.7em; align-items: start; margin-top: 8px; font: 500 .6875rem/1.35 var(--df-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--df-ui-text-dim); text-align: center; }
.way__caps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.way__caps li:first-child { text-align: left; }
.way__caps li:last-child { text-align: right; }
.way__body { display: flex; flex-direction: column; flex: 1; padding-top: var(--s3); }
.way__body h3 { font: 700 clamp(1.625rem, 2.4vw, 2.25rem)/1.05 var(--df-font-display); letter-spacing: -0.03em; }
.way__body p { margin-top: 12px; max-width: 34rem; color: var(--df-ui-text-dim); text-wrap: pretty; }
.way__pros { list-style: none; margin-top: var(--s2); max-width: 34rem; border-top: 1px solid var(--df-ui-line); }
.way__pros li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--df-ui-line); font-size: var(--fs-small); line-height: 1.45; color: var(--df-ui-text); }
.way__pros li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 10px; height: 2px; background: var(--df-ui-accent); }
.way__body .way__fit { margin-top: var(--s2); font: 400 .8125rem/1.5 var(--df-font-mono); color: var(--df-ui-text); }
.way__link { align-self: flex-start; margin-top: auto; padding-top: var(--s3); font-weight: 600; }
.way__link::after { content: " \2192"; }
.ways__foot { display: flex; justify-content: flex-end; margin-top: var(--s3); }
html:not(.js) .ways__foot { display: none; }
@media (max-width: 860px) { .ways__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); } }
@media (max-width: 480px) { .way__caps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; } .way__caps--4 li { text-align: left !important; } }

/* scene parts (renderAt(t) in site.js drives every frame; this is the static frame) */
.way__svg { overflow: hidden; }
.s-ground { opacity: .3; }
.s-line { color: var(--df-ui-text-faint); }
.s-acc { color: var(--df-ui-accent); }
.s-trail { stroke: var(--df-ui-accent); stroke-width: 2; stroke-dasharray: 0 999; }
.s-print { stroke: var(--df-ui-accent); stroke-width: 2.4; }
.s-door { fill: var(--df-ui-bg-2); color: var(--df-ui-text-faint); }
.s-barbg { fill: currentColor; stroke: none; opacity: .25; }
.s-bar { fill: var(--df-ui-accent); stroke: none; }
.s-board { stroke: var(--df-ui-accent); }
.s-snap { stroke: var(--df-ui-accent); opacity: 0; }
.s-tag { fill: var(--df-ui-accent); stroke: none; font: 500 13px var(--df-font-mono); letter-spacing: .04em; }
.s-fly { stroke-dasharray: 2 5; opacity: .45; }
.s-far { color: var(--df-ui-text-faint); opacity: .7; }
.blade { stroke-width: 1.2; }
@media (prefers-reduced-motion: reduce) { .ways__foot { display: none; } }

/* Two ways, compact (Kunde 10.10.2026: „viel zu viel und unnötig groß“). */
.ways__pick { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: 4px; padding: 14px 0; margin-bottom: var(--s4); }
.ways__pick input { width: 100%; height: 36px; margin: 0; accent-color: var(--df-ui-accent); cursor: pointer; }
.ways__num { min-width: 2.5ch; font: 700 1.5rem/1 var(--df-font-display); letter-spacing: -0.02em; text-align: right; font-variant-numeric: tabular-nums; }
.ways__rec { grid-column: 1 / -1; font: 400 var(--fs-small)/1.4 var(--df-font-body); color: var(--df-ui-text-dim); }
.ways__rec b { color: var(--df-ui-text); font-weight: 600; }
html:not(.js) .ways__pick input, html:not(.js) .ways__num { display: none; }
.way__scene { padding: 10px 14px 10px; }
.way__caps { margin-top: 4px; min-height: 0; font-size: .625rem; }
.way__body { padding-top: var(--s2); }
.way__body h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.way__body p { margin-top: 6px; font-size: var(--fs-small); }
.way__link { padding-top: var(--s2); font-size: var(--fs-small); }
.way__fits { top: 8px; left: 8px; padding: 4px 6px; font-size: .625rem; }
.ways__foot { margin-top: var(--s2); }
@media (max-width: 860px) { .ways__grid { row-gap: var(--s5); } .ways__pick { grid-template-columns: minmax(0, 1fr) auto; } .ways__label { grid-column: 1 / -1; } }
.ways { padding-block: var(--s7); }
.way__svg { max-height: 190px; }
.s-fill { fill: var(--df-ui-bg-2); }

/* Two ways, premium/minimal (Kunde 10.10.2026) */
.ways__pick { display: block; padding: 0; margin: 0 0 var(--s5); border: 0; max-width: 44rem; }
.ways__q { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.ways__q label { font: 500 .75rem/1.4 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--df-ui-text-dim); }
.ways__num { font: 700 clamp(2.5rem, 4vw, 3.5rem)/1 var(--df-font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--df-ui-text); }
.ways__track { position: relative; margin-top: 14px; }
.ways__track::before { content: ""; position: absolute; left: 15.25%; top: 8px; width: 1px; height: 22px; background: var(--df-ui-line-strong); pointer-events: none; }
.ways__track input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --p: 18.6%; }
.ways__track input::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--df-ui-accent) var(--p), var(--df-ui-line-strong) var(--p)); }
.ways__track input::-moz-range-track { height: 1px; background: var(--df-ui-line-strong); }
.ways__track input::-moz-range-progress { height: 1px; background: var(--df-ui-accent); }
.ways__track input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6.5px; border-radius: 50%; background: var(--df-ui-bg-0); border: 1.5px solid var(--df-ui-accent); transition: transform .2s var(--ease); }
.ways__track input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--df-ui-bg-0); border: 1.5px solid var(--df-ui-accent); }
.ways__track input:active::-webkit-slider-thumb, .ways__track input:hover::-webkit-slider-thumb { transform: scale(1.25); }
.ways__track input:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.ways__zones { display: grid; grid-template-columns: 15.25% 1fr; margin-top: 8px; font: 500 .6875rem/1.3 var(--df-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--df-ui-text-faint); }
.ways__zones span { transition: color .3s var(--ease); white-space: nowrap; }
.ways__zones span + span { padding-left: 10px; }
.ways__zones .is-on { color: var(--df-ui-accent); }
html:not(.js) .ways__track, html:not(.js) .ways__num { display: none; }
.way__scene, .way.is-rec .way__scene { background: none; padding: 0; box-shadow: none; }
.way__svg { stroke-width: 1.2; max-height: 200px; }
.s-ground { opacity: .22; }
.way__body { padding-top: var(--s3); border-top: 1px solid var(--df-ui-line); margin-top: 6px; }
.way__body h3 { display: flex; align-items: center; gap: 10px; }
.way__body h3::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--df-ui-line-strong); transition: background .3s var(--ease); flex: none; }
.way.is-rec .way__body h3::before { background: var(--df-ui-accent); }
.ways__grid { column-gap: var(--s6); }
.ways__foot .ctl { min-height: 32px; padding: 0 2px; border: 0; font: 500 .6875rem/1 var(--df-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--df-ui-text-dim); }
.ways__foot .ctl:hover { color: var(--df-ui-text); }
.ways__foot .ctl svg { width: 11px; height: 11px; }
.ways__track input { height: 32px; }
.ways__track::before { top: 13px; }

/* ── Type scale v4: calmer, premium, consistent across pages (Kunde 10.10.2026: „manche Seiten passen gar nicht“).
      Display sizes roughly halved at the top end; section rhythm tighter. Overrides the earlier layers. ── */
:root {
  --fs-big: clamp(1.75rem, 2.8vw, 2.75rem);
  --fs-num: clamp(2.75rem, 5vw, 4.5rem);
  --fs-mega: clamp(3rem, 7vw, 6.5rem);
  --pad-sec: clamp(72px, 8vw, 128px);
}
.home .hero h1 { font-size: clamp(2.5rem, 5.2vw, 5rem); line-height: .95; }
.phero h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: .95; letter-spacing: -0.04em; max-width: 16ch; }
.page-head h1 { font-size: clamp(2.25rem, 4.4vw, 4.25rem); line-height: .98; letter-spacing: -0.035em; }
.legal-page .page-head h1 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.stmt h2 { font-size: clamp(2rem, 4vw, 3.75rem); }
.sec-head h2, .sec > .wrap > h2:not(.sec-label), .g12 > h2, .split h2, .cells .sec-top h2 { font-size: var(--fs-big); }
.closing h2, .closing p:not([class]) { font-size: clamp(1.75rem, 3vw, 3rem); }
.stage__h2 { font-size: clamp(1.75rem, 3.2vw, 3.25rem); }
.uc__head h2, .team__head h2 { font-size: clamp(1.75rem, 2.8vw, 2.75rem); }
.uc__name { font-size: clamp(1.125rem, 1.6vw, 1.5rem); }
.cs__name { font-size: clamp(1.75rem, 3.4vw, 3.25rem); }
.origin h2 { font-size: clamp(1.75rem, 3vw, 3rem); }
.origin__num { font-size: clamp(3rem, 6vw, 5.5rem); }
.figures__row dd b { font-size: var(--fs-num); }
.steps__t, .steps--compact .steps__t { font-size: clamp(2rem, 3.2vw, 3rem); }
.tile--lg .tile__name { font-size: clamp(1.5rem, 2.6vw, 2.5rem); }
.tile__name { font-size: clamp(1.25rem, 1.8vw, 1.75rem); }
.dl-faq dt { font-size: clamp(1rem, 1.3vw, 1.25rem); }
.ftile h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.home .routes a { font-size: clamp(1.125rem, 1.6vw, 1.5rem); }
.spec--lg dd { font-size: clamp(1.125rem, 1.5vw, 1.375rem); }
.cta h2, .cta .cta__title { font-size: clamp(1.75rem, 3vw, 3rem); }
.tally__grid { max-width: 760px; }

/* Subpage heroes: text and product no longer overlap. Image anchored right, calm veil on the text side, lower hero. */
.phero { min-height: min(78svh, 760px); }
.phero--tall { min-height: min(88svh, 860px); }
.phero__in { padding-block: calc(var(--nav-h) + var(--s7)) var(--s6); }
@media (min-width: 761px) {
  .phero__media img, .phero__media video { object-position: 78% 50%; }
  .phero__media::after { background:
    linear-gradient(90deg, rgb(5 10 18 / .94) 0%, rgb(5 10 18 / .82) 32%, rgb(5 10 18 / .35) 58%, rgb(5 10 18 / .1) 100%),
    linear-gradient(180deg, rgb(5 10 18 / .45) 0%, rgb(5 10 18 / 0) 22%, rgb(5 10 18 / 0) 70%, rgb(5 10 18 / .7) 100%); }
  .phero h1, .phero .stage__title { max-width: 12ch; }
  .phero__lead { max-width: 30rem; }
}

/* Image heroes fill the full screen; image clearly visible, shade only behind the text (Kunde 11.10.2026). */
.phero, .phero--tall { min-height: 100svh; }
.phero__in { padding-block: calc(var(--nav-h) + var(--s7)) var(--s7); }
@media (min-width: 761px) {
  .phero__media img, .phero__media video { object-position: 60% 50%; }
  .phero__media::after { background:
    linear-gradient(90deg, rgb(5 10 18 / .78) 0%, rgb(5 10 18 / .5) 30%, rgb(5 10 18 / 0) 55%),
    linear-gradient(180deg, rgb(5 10 18 / .4) 0%, rgb(5 10 18 / 0) 18%, rgb(5 10 18 / 0) 80%, rgb(5 10 18 / .55) 100%); }
}
@media (orientation: portrait) and (min-width: 641px) and (max-width: 1100px) { .phero, .phero--tall { min-height: min(100svh, 110vw); } }

/* Supporting grey text: smaller and more compact (Kunde 12.10.2026). Hero leads stay readable on images. */
.lead, .page-head .lead, .stmt__lead, .sec-top__lead, .cta__lead, .closing__lead, .closing p.closing__lead,
.prose.dim, .faq__a, .steps p, .origin__txt, .dl-users dd, .cs__desc, .way__body p { font-size: .9375rem; line-height: 1.5; }
.home .hero__lead, .phero__lead, .stage__text { font-size: 1rem; line-height: 1.5; }
.stmt__lead { max-width: 26rem; margin-top: var(--s4); }
.sec-top__lead, .cta__lead, .closing__lead { max-width: 32rem; }
.cta__lead { margin-bottom: var(--s5); }
.lead, .page-head .lead, .stmt__lead, .sec-top__lead, .cta__lead, .closing__lead, .closing p.closing__lead,
.prose.dim, .faq__a, .steps p, .origin__txt, .dl-users dd, .cs__desc, .way__body p { font-size: .875rem; line-height: 1.5; }
.stmt__lead { max-width: 24rem; }
.steps__t small { margin-left: 6px; font: 500 .8125rem/1 var(--df-font-mono); letter-spacing: 0; color: var(--df-ui-text-dim); }
.steps__t--accent small { color: var(--df-ui-accent); }

/* STURM 01: frame + kit assembly drawing (replaces the repeated photo). Loop: apart → together → hold. */
.asm { position: relative; aspect-ratio: 4 / 3; background: var(--df-ui-bg-2); color: var(--df-ui-text-faint); margin-left: 0; }
.asm__svg { position: absolute; inset: 6% 6% 14%; width: 88%; height: 80%; stroke-width: 1.1; }
.asm .draw-marks { opacity: .5; }
.asm .kit-frame { stroke-dasharray: 3 4; color: var(--df-ui-accent); transition: transform 1.1s var(--ease); transform: translateY(0); }
.asm .kit-guides { stroke-dasharray: 2 4; opacity: .5; transition: opacity .5s; }
.asm .kit-parts { color: var(--df-ui-text); transition: transform 1.1s var(--ease); }
.asm .draw-trace { stroke: var(--df-ui-accent); stroke-width: 1.6; transition: opacity .5s; }
.asm .prop__blade { stroke-width: 1.2; }
.asm.is-joined .kit-frame { transform: translateY(-17px); stroke-dasharray: none; }
.asm.is-joined .kit-parts { transform: translateY(14px) !important; }
.asm.is-joined .kit-guides, .asm.is-joined .draw-trace { opacity: 0; }
.asm__cap { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 28px; font: 500 .6875rem/1 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--df-ui-text-faint); }
.asm__cap span { transition: color .4s; }
.asm__cap .is-on { color: var(--df-ui-accent); }
@media (prefers-reduced-motion: reduce) { .asm .kit-frame, .asm .kit-parts { transition: none; } }

/* Applications hero: the six field videos crossfade (no repeated drone photo). */
.hcyc__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.hcyc__v.is-on { opacity: 1; }
.hcyc__cap { position: absolute; right: var(--gutter); bottom: var(--s5); z-index: 2; margin: 0; font: 500 .6875rem/1 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgb(232 240 229 / .75); }
.hcyc__cap span { display: none; }
.hcyc__cap span.is-on { display: inline; }
.hcyc__cap span.is-on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--df-cyan); vertical-align: 1px; }
@media (max-width: 640px) { .hcyc__cap { right: auto; left: var(--gutter); bottom: var(--s3); } }
@media (prefers-reduced-motion: reduce) { .hcyc__v { transition: none; } }
.asm .kit-frame { transform: translateY(17px); }
.asm .kit-parts { transform: translateY(-14px); }
.asm.is-joined .kit-frame, .asm.is-joined .kit-parts { transform: translateY(0) !important; }
.asm.is-joined .kit-frame { stroke-dasharray: none; color: var(--df-ui-text); }

/* Company page v2 (Kunde 12.10.2026: „viel viel besser“) */
.co-head__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s5); align-items: end; }
.co-head__main { grid-column: 1 / span 7; }
.co-facts { grid-column: 9 / span 4; border-top: 1px solid var(--df-ui-line-strong); }
.co-facts > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--df-ui-line); }
.co-facts dt { font: 500 .6875rem/1.5 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--df-ui-text-dim); }
.co-facts dd { font: 600 .875rem/1.45 var(--df-font-body); color: var(--df-ui-text); }
.co-founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.co-founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s3); padding: var(--s3); background: var(--df-ui-bg-1); border: 1px solid var(--df-ui-line); }
.co-founder__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--df-ui-bg-2); }
.co-founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.co-founder__photo--jakub img { transform: scale(1.18); transform-origin: 50% 10%; }
.co-founder__photo--christian img { transform: scale(1.06); transform-origin: 50% 100%; }
.co-founder__body { display: flex; flex-direction: column; min-width: 0; }
.co-founder h3 { font: 700 clamp(1.25rem, 1.8vw, 1.625rem)/1.1 var(--df-font-display); letter-spacing: -0.02em; }
.co-founder__role { margin-top: 6px; font: 500 .6875rem/1.4 var(--df-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--df-ui-accent); }
.co-founder__bio { margin-top: var(--s2); font-size: .875rem; line-height: 1.55; color: var(--df-ui-text); }
.co-founder__prev { margin-top: 10px; font-size: .8125rem; line-height: 1.5; color: var(--df-ui-text-dim); }
.co-founder__mail { margin-top: auto; padding-top: var(--s2); font: 400 .8125rem/1.4 var(--df-font-mono); }
@media (max-width: 1024px) { .co-head__main, .co-facts { grid-column: 1 / -1; } .co-facts { max-width: 34rem; } .co-founders { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .co-founder { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s2); padding: var(--s2); } .co-facts > div { grid-template-columns: 8rem minmax(0, 1fr); } }
.co-founder__role { color: var(--df-ui-text-dim); }

/* STURM 01 printed parts: assembled drone, printed spacers + module mount draw in cyan, modules swap (no labels). */
.asm2 { position: relative; aspect-ratio: 4 / 3; background: var(--df-ui-bg-2); color: var(--df-ui-text-faint); }
.asm2 .asm__svg { position: absolute; inset: 4%; width: 92%; height: 92%; stroke-width: 1.1; }
.asm2 .draw-marks { opacity: .5; }
.asm2 .ln, .asm2 .ln-fade { opacity: 1; stroke-dasharray: none; }
.asm2 .pr { stroke: var(--df-ui-accent); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.asm2 .pr-fill { fill: none; stroke: var(--df-ui-accent); stroke-width: 1.6; }
.asm2 .mods { color: var(--df-ui-text); }
.asm2 .mod { opacity: 0; }
.asm2 .mod--a { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .asm2 .pr { stroke-dashoffset: 1; }
  .js .asm2 .pr-fill { opacity: 0; }
  .js .asm2.is-on .pr { animation: pr-draw 1s var(--ease) var(--d) forwards; }
  .js .asm2.is-on .pr-fill { animation: pr-fade .4s var(--ease) var(--d) forwards; }
  .js .asm2 .mod { opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); transform: translateY(4px); }
  .js .asm2 .mod.is-on { opacity: 1; transform: none; }
}
@keyframes pr-draw { to { stroke-dashoffset: 0; } }
@keyframes pr-fade { to { opacity: 1; } }
.asm2 .mod--a { opacity: 0; } .asm2 .mods .mod:first-child { opacity: 1; } .js .asm2 .mods .mod:first-child:not(.is-on) { opacity: 0; }
.co-founder__mail { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.co-founder__li::after { content: " \2197"; }
.co-founder__mail a { display: inline-flex; align-items: center; min-height: 32px; }

/* van gallery (13.10.2026) */
figure.tile { margin: 0; }
#van-inside .mosaic, #container-inside .mosaic { margin-top: var(--s5, 40px); }

/* cell stage: no hard edge at the bottom (13.10.2026) */
.cs .uc__progress { background: transparent; }

/* Inside the cells: van/container switch (13.10.2026) */
.inside__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3, 16px) var(--s4, 24px); margin-top: var(--s5, 40px); margin-bottom: var(--s4, 24px); }
.inside__tabs { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid rgb(232 240 229 / .16); background: rgb(8 15 26 / .6); }
.inside__tab { min-height: 40px; padding: 0 18px; border: 0; background: transparent; color: rgb(232 240 229 / .62); font: 500 .8125rem/1 var(--df-font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.inside__tab:hover { color: var(--df-off-white); }
.inside__tab.is-active { background: rgb(232 240 229 / .1); color: var(--df-off-white); box-shadow: inset 0 -2px 0 var(--df-cyan); }
.inside__tab:focus-visible { outline: 2px solid var(--df-cyan); outline-offset: 2px; }
.inside__note { margin: 0; max-width: 60ch; font-size: .875rem; color: var(--df-ui-text-dim); }
.inside__panel[hidden] { display: none; }
.js .inside__panel.is-entering { animation: inside-in .5s var(--ease) both; }
@keyframes inside-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html:not(.js) .inside__tabs, html:not(.js) .inside__note[data-inside-note] { display: none; }
html:not(.js) .inside__panel + .inside__panel { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .js .inside__panel.is-entering { animation: none; } }
.inside__tab { white-space: nowrap; }
@media (max-width: 480px) { .inside__tabs { width: 100%; } .inside__tab { flex: 1; padding: 0 10px; font-size: .75rem; letter-spacing: .05em; } }


/* Company: full-screen intro, founders below the fold, details at the end (14.10.2026) */
.co-head { min-height: 100svh; display: grid; align-content: center; padding-block: var(--s7); }
.co-head__main { grid-column: 1 / span 9; }
.co-founder__photo--jakub img, .co-founder__photo--christian img { transform: none; }
.co-founder__photo img { object-position: 50% 30%; }
.co-details .sec-top { margin-bottom: var(--s4); }
.co-details .co-facts { grid-column: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--df-ui-line-strong); }
.co-details .co-facts > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; border-bottom: 0; }
@media (max-width: 1024px) { .co-details .co-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .co-details .co-facts > div { border-bottom: 1px solid var(--df-ui-line); } }
@media (max-width: 560px) { .co-details .co-facts { grid-template-columns: minmax(0, 1fr); } .co-details .co-facts > div { grid-template-columns: 8rem minmax(0, 1fr); } .co-head { min-height: calc(100svh - var(--nav-h)); } }
.co-head__main { grid-column: 1 / span 6; align-self: center; }
.co-head__photo { grid-column: 8 / span 5; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--df-ui-line); background: var(--df-ui-bg-1); }
.co-head__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 1024px) { .co-head__main, .co-head__photo { grid-column: 1 / -1; } .co-head__photo { max-width: 560px; } }

/* language switch EN | DE (14.10.2026) */
.lang { display: inline-flex; align-items: center; margin-right: 6px; border: 1px solid var(--df-ui-line); }
.lang__opt { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 30px; padding: 0 8px; font: 500 .6875rem/1 var(--df-font-mono); letter-spacing: .12em; color: var(--df-ui-text-dim); text-decoration: none; }
.lang__opt + .lang__opt { border-left: 1px solid var(--df-ui-line); }
.lang__opt:hover { color: var(--df-ui-text); }
.lang__opt.is-active { color: var(--df-ui-text); background: rgb(232 240 229 / .08); }
.lang__opt:focus-visible { outline: 2px solid var(--df-cyan); outline-offset: 2px; }
.js .nav:not([data-solid]):not(.is-scrolled):not(.is-menu) .lang__opt.is-active { color: var(--df-off-white); }
.lang--mobile { margin: var(--s3, 16px) var(--gutter, 20px) 0; }
.lang--mobile .lang__opt { min-height: 40px; min-width: 52px; font-size: .8125rem; }
@media (max-width: 860px) { .nav__tools .lang { display: none; } }
@media (min-width: 861px) { .lang--mobile { display: none; } }
/* Production-cells stage on phones and tablets: image as its own block, tabs as a segmented row, panel below (14.10.2026) */
@media (max-width: 1024px) {
  .cs { display: block; min-height: 0; padding-top: var(--nav-h); }
  .cs__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; overflow: hidden; }
  .cs__media::after { background: linear-gradient(180deg, rgb(8 15 26 / 0) 60%, rgb(8 15 26) 100%); }
  .cs__in { display: block; padding-block: 0 var(--s6); }
  .cs__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; border: 1px solid rgb(232 240 229 / .16); }
  .cs__tabs li + li .cs__tab { border-left: 1px solid rgb(232 240 229 / .16); }
  .cs__tab { height: 100%; min-height: 52px; padding: 8px 6px; text-align: center; color: rgb(232 240 229 / .6); }
  .cs__tab.is-active { transform: none; background: rgb(232 240 229 / .08); box-shadow: inset 0 -2px 0 var(--df-cyan); }
  .cs__name { display: block; font-size: .9375rem; line-height: 1.15; letter-spacing: -0.01em; }
  .cs__panels { margin-top: var(--s4); }
  .cs__panel { padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cs__spec > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .cs__media { aspect-ratio: 16 / 9; }
  .cs__name { font-size: 1.125rem; }
}
/* Mobile/tablet audit fixes (14.10.2026) */
.ways__track::before { top: 11px; }
.ways__track input { height: 44px; }
.ways__track input::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -11.5px; }
.ways__foot .ctl { min-height: 44px; }
.way__link { padding-block: 12px; }
.inside__tab { min-height: 44px; }
.tally__foot b { white-space: nowrap; }
.btn--outline { line-height: 1.4; text-align: center; }
.lang--mobile { margin: var(--s3, 16px) 0 0; }
.closing h2 { max-width: 24ch; text-wrap: balance; }
.legal-page .sec h2 + h3 { margin-top: var(--s3); }
@media (pointer: coarse) { .nav .lang__opt { min-height: 44px; min-width: 44px; } }
@media (max-width: 640px) { .ways__zones [data-zone="cell"] { text-align: right; } }
@media (max-width: 480px) {
  .spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tally__foot { flex-direction: column; gap: 4px; }
  .cs__name { font-size: .875rem; }
}
@media (max-width: 1180px) {
  .phero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(5 10 18 / .8) 0, rgb(5 10 18 / .45) 45%, transparent 75%); }
}
/* Landing hero on phones: video visible, short lead, content at the bottom, no HUD (14.10.2026) */
@media (max-width: 640px) {
  :root { --hero-veil: linear-gradient(180deg, rgb(5 10 18 / .45) 0%, rgb(5 10 18 / .1) 22%, rgb(5 10 18 / .2) 42%, rgb(5 10 18 / .78) 66%, rgb(5 10 18 / .94) 100%); }
  .hero__in { align-content: end; padding-block: calc(var(--nav-h) + var(--s5)) var(--s6); }
  .hero__box { align-self: end; }
  .hero h1 { font-size: clamp(2.25rem, 10.8vw, 3.25rem); }
  .hero__more { display: none; }
  .hero__lead { margin-top: var(--s3); font-size: 1.0625rem; line-height: 1.5; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: var(--s1); margin-top: var(--s4); }
  .hero__ctas .btn { justify-content: center; text-align: center; }
  .hero__ctas a:not(.btn) { justify-content: center; }
  .hero .ctl { position: absolute; top: calc(var(--nav-h) + 8px); right: var(--gutter); margin: 0; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; background: rgb(5 10 18 / .45); border: 1px solid rgb(232 240 229 / .2); }
  .hero .ctl span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero .hud { display: none; }
}
/* FAQ as accordion on all devices (14.10.2026) */
.faq { border-top: 1px solid var(--df-ui-line); }
.faq__item { border-bottom: 1px solid var(--df-ui-line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; padding: var(--s3) 0; cursor: pointer; list-style: none; font: 700 clamp(1rem, 1.3vw, 1.25rem)/1.3 var(--df-font-display); letter-spacing: -0.015em; color: var(--df-ui-text); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; color: var(--df-ui-text-dim); transition: transform .3s var(--ease), color .2s; }
.faq__item[open] > .faq__q::after { transform: rotate(45deg); color: var(--df-ui-accent); }
.faq__q:hover::after { color: var(--df-ui-accent); }
.faq__q:focus-visible { outline: 2px solid var(--df-ui-accent); outline-offset: 4px; }
.faq__a { max-width: 44rem; padding: 0 var(--s5) var(--s4) 0; color: var(--df-ui-text-dim); line-height: 1.6; text-wrap: pretty; }
.faq__item[open] > .faq__a { animation: faq-in .35s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } .faq__item[open] > .faq__a { animation: none; } }