/* ============================================================
   Schoberth · Design System v4 (light)
   Product first: paper ground, ink type, the renders carry colour.
   One family, Archivo, used through its width axis:
   condensed capitals for display, normal width for reading.
   Signal red only marks scroll progress and hover.

   Every page runs on this file; the old dark system (nisco.css)
   is gone. The configurator keeps its own stylesheet in lab/zone/.
   ============================================================ */

:root {
  --paper: #fafaf9;
  --surface: #f1f0ee;
  --ink: #0e0d0b;
  --ink-2: #43423f;      /* body copy, 9.6:1 on paper */
  --ink-3: #646361;      /* captions, 5.8:1 on paper */
  --mute: #c5c4c2;       /* decorative only, never for text that must be read */
  --line: #dfdedc;
  --signal: #db2d23;
  --dim-dark: #a5a4a2;   /* on ink, 7.8:1 */
  --line-dark: #4e4d4b;
  --foot-dark: #81807d;  /* on ink, 4.9:1 */

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1rem, 3.33vw, 3rem);
  --max: 1680px;
  --gap: 1.5rem;
  --section: clamp(6rem, 12.5vw, 11.25rem);

  --display: clamp(3rem, 8.33vw, 7.5rem);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --ease-pop: cubic-bezier(.3, 1.6, .5, 1);
  --alert-dark: #f0736b;  /* error on ink, 6.2:1 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.site {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--signal); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 700; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.section { padding-top: var(--section); }

/* Display type: condensed capitals */
.display {
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;   /* last resort, never let a word push the page wider */
}
/* German compounds in condensed capitals ("PRODUKTVISUALISIERUNG" is 373px at
   the smallest display size, the phone column is 343px). Hyphenate instead. */
html[lang="de"] .display { -webkit-hyphens: auto; hyphens: auto; }
.h-display { font-size: var(--display); }
.lead { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.5; color: var(--ink-2); }
.body { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.caption { font-size: 0.9375rem; color: var(--ink-3); }
.inline-link { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

/* Buttons */
/* Hover: a colour sweep runs in from the left and leaves to the right; the arrow
   nudges forward. Press: the button gives a little. See "Micro-interactions". */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3.5rem; padding: 0 1.875rem;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
  border: 2px solid transparent; border-radius: 0; cursor: pointer;
  transition: color .35s var(--ease-out), border-color .35s, transform .25s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: var(--signal); transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--ease-io);
}
.btn--primary, .btn--light { padding-right: 1.5rem; }
.btn--primary::after, .btn--light::after { content: "→"; display: inline-block; transition: transform .45s var(--ease-out); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { color: var(--paper); }
.btn--ghost { padding-inline: 1.125rem; color: var(--ink); background: transparent; }
.btn--ghost::before { inset: auto 1.125rem 0.875rem; height: 2px; background: currentColor; }
.btn--ghost:hover { color: var(--ink); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline::before { background: var(--ink); }
.btn--outline:hover { color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { color: var(--paper); }
@media (hover: hover) {
  .btn:hover::before { transform: scaleX(1); transform-origin: left center; }
  .btn:hover::after { transform: translateX(0.3rem); }
}
.btn:active { transform: scale(0.96); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.5rem; }
.nav__brand { display: flex; align-items: center; gap: 0.875rem; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.005em; }
.nav__brand img { width: 22px; height: 40px; transition: transform .6s var(--ease-pop); }
.nav__brand:hover { color: var(--ink); }
@media (hover: hover) { .nav__brand:hover img { transform: rotate(-10deg) scale(1.08); } }
.nav__links { display: flex; align-items: center; gap: 2.25rem; font-size: 1rem; font-weight: 500; }
/* Reading progress along the bottom edge of the bar, fed by js/site.js */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--signal); transform: scaleX(var(--scroll, 0)); transform-origin: left center;
}
@media (min-width: 1024px) {
  .nav__links > a { position: relative; }
  .nav__links > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.375rem; height: 2px;
    background: currentColor; transform: scaleX(0); transform-origin: right center;
    transition: transform .45s var(--ease-io);
  }
  .nav__links > a:hover::after, .nav__links > a[aria-current]::after, .nav__links > a.is-here::after { transform: scaleX(1); transform-origin: left center; }
  .nav__links > a.is-here { color: var(--ink); }
}
.nav__lang { display: flex; gap: 0.25rem; color: var(--ink-3); }
.nav__lang a { display: inline-flex; min-width: 2.25rem; min-height: 2.75rem; align-items: center; justify-content: center; }
.nav__lang a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.nav__toggle { display: none; }

@media (max-width: 1023px) {
  .nav__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 3rem; height: 3rem; padding: 0 0.75rem; border: 0; background: transparent; cursor: pointer;
  }
  .nav__toggle span { display: block; height: 2px; background: var(--ink); transition: transform .45s var(--ease-io), opacity .3s; }
  .nav__toggle span:nth-child(2) { transform-origin: right center; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { transform: scaleX(0); opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav__toggle:active { transform: scale(0.9); }
  .nav.is-open { background: var(--paper); }
  /* Full-screen menu: the panel wipes down, the links rise in one after another */
  .nav__links {
    position: fixed; left: 0; right: 0; top: 5.5rem; height: calc(100dvh - 5.5rem); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem var(--gutter) 2rem; background: var(--paper);
    font-size: clamp(2.75rem, 13vw, 5rem); font-weight: 800; font-stretch: 62%;
    line-height: 0.95; text-transform: uppercase;
    visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path .5s var(--ease-io), visibility 0s .5s;
  }
  .nav.is-open .nav__links { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .6s var(--ease-io); }
  .nav__links > a, .nav__lang { opacity: 0; transform: translate3d(0, 2.5rem, 0); transition: opacity .2s, transform .2s; }
  .nav__links > a { padding: 0.75rem 0; border-bottom: 2px solid var(--line); }
  .nav__links > a:active { color: var(--signal); }
  .nav.is-open .nav__links > a, .nav.is-open .nav__lang {
    opacity: 1; transform: none;
    transition: opacity .5s calc(.18s + var(--i, 0) * .06s), transform .7s var(--ease-out) calc(.18s + var(--i, 0) * .06s);
  }
  .nav__links > :nth-child(2) { --i: 1; }
  .nav__links > :nth-child(3) { --i: 2; }
  .nav__links > :nth-child(4) { --i: 3; }
  .nav__links > :nth-child(5) { --i: 4; }
  .nav__links > :nth-child(6) { --i: 5; }
  .nav__lang { padding-top: 1.5rem; font-size: 1.25rem; font-stretch: 100%; text-transform: none; }
  html.nav-open { overflow: hidden; }
  .nav__cta { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); align-items: end; }
.hero__title { grid-column: span 8; font-size: clamp(3.5rem, 11.4vw, 10.25rem); line-height: 0.86; }
/* "UND AGENTUREN" runs a letter longer than "AND AGENCIES" and would strand
   "UND" on its own line; a touch smaller keeps the German title at three lines. */
html[lang="de"] .hero__title { font-size: clamp(3.25rem, 10.1vw, 9.125rem); }
.hero__side { grid-column: span 4; display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 0.875rem; }
.hero__note { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-3); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
@media (max-width: 1023px) {
  .hero__title, .hero__side { grid-column: 1 / -1; }
}

/* ---------- Intro: headline, then the showreel opens to full screen ----------
   Markup contract with js/hero-showreel.js: .hero-media, #hero-showreel, .hero-reel-toggle.
   Pinned mode: the media layer covers the whole sticky stage, and a clip-path fed by
   --ct/--cr/--cb/--cl from js/site.js cuts it down to the slot under the headline.
   The opening is symmetric by construction and never changes layout.
   Static mode (phones, reduced motion, no JS): a plain 16:9 player under the headline. */
.intro__media { background: #000; overflow: hidden; }
.intro__media .hero-poster, .intro__media .hero-poster img, .intro__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.intro__media video { opacity: 0; transition: opacity .4s; }
.intro__media.has-video-frame video { opacity: 1; }
.intro__media.has-video-frame .hero-poster { visibility: hidden; }
.hero-reel-toggle {
  position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 2;
  min-height: 3rem; padding: 0 1.25rem;
  border: 0; background: var(--paper); color: var(--ink);
  font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.hero-reel-toggle:hover { background: var(--ink); color: var(--paper); }
.hero-reel-toggle[hidden] { display: none; }
.reel__meta { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; }

.intro:not(.is-static) .intro__track { height: 260vh; }
.intro:not(.is-static) .intro__stage { position: sticky; top: 5.5rem; height: calc(100svh - 5.5rem); display: flex; flex-direction: column; overflow: hidden; }
.intro:not(.is-static) .hero { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: 2rem; }
.intro:not(.is-static) .intro__content { position: relative; z-index: 1; transform: translate3d(0, calc(var(--e, 0) * -14vh), 0); opacity: calc(1 - var(--e, 0) * 1.3); will-change: transform, opacity; }
.intro:not(.is-static) .intro__bottom { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 1.25rem; }
.intro:not(.is-static) .intro__slot { flex: 1; min-height: 11rem; }
.intro:not(.is-static) .intro__media { position: absolute; inset: 0; z-index: 3; clip-path: inset(var(--ct, 0px) var(--cr, 0px) var(--cb, 0px) var(--cl, 0px)); will-change: clip-path; }
.intro:not(.is-static) .hero-reel-toggle { right: calc(var(--cr, 0px) + 1.25rem); bottom: calc(var(--cb, 0px) + 1.25rem); }
.intro:not(.is-static) .reel__meta { opacity: calc(1 - var(--e, 0) * 3); }

.intro.is-static .intro__slot { position: relative; aspect-ratio: 16 / 9; }
.intro.is-static .intro__media { position: absolute; inset: 0; }
@media (max-width: 767px) {
  .intro.is-static .intro__slot { aspect-ratio: 9 / 16; max-height: 80vh; margin-inline: auto; }
  .hero-reel-toggle { right: 1rem; bottom: 1rem; }
  .reel__meta span:last-child { display: none; }
}

/* ---------- Work ---------- */
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding-bottom: 3rem; }
.section-head__aside { max-width: 24rem; }
@media (max-width: 767px) { .section-head { flex-direction: column; align-items: start; padding-bottom: 2rem; } }

.work { display: grid; grid-template-columns: minmax(0, 1.43fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.work__side { display: grid; gap: 3.5rem; }
.work__wide { grid-column: 1 / -1; padding-top: 2rem; }
.case__media { position: relative; overflow: hidden; background: var(--surface); }
.case__media img, .case__media video { width: 100%; height: 100%; object-fit: cover; }
/* Cards lift in as they enter; images drift inside their frames (parallax).
   Without JS or motion the cards sit still and images are shown uncropped. */
.case[data-scrub]:not(.is-static) { transform: translate3d(0, calc((1 - var(--p, 1)) * 4.5rem), 0); will-change: transform; }
.case__media[data-scrub]:not(.is-static) > img, .case__media[data-scrub]:not(.is-static) > video {
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -8%), 0) scale(1.12); will-change: transform;
}
.case--lead .case__media { aspect-ratio: 776 / 1000; }
.case--side .case__media { aspect-ratio: 544 / 440; }
.case__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.case__pair .case__media { aspect-ratio: 1; }
.case__media--film { aspect-ratio: 16 / 9; }
/* Portrait film next to a landscape still at the same height (9:16 + 16:9) */
.case__duo { display: grid; grid-template-columns: minmax(0, 0.3164fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.case__duo .case__media:first-child { aspect-ratio: 9 / 16; }
@media (max-width: 559px) {
  .case__duo { grid-template-columns: minmax(0, 1fr); }
  .case__duo .case__media:last-child { aspect-ratio: 16 / 9; }
}
.case__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; }
.case__name { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1; }
.case__desc { max-width: 38rem; padding-top: 0.625rem; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.case__link {
  display: inline-block; margin-top: 0.875rem; font-weight: 600;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0% 2px;
  transition: background-size .45s var(--ease-io), color .3s;
}
.case__link::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: transform .45s var(--ease-out); }
@media (hover: hover) {
  .case__link:hover { background-size: 100% 2px; }
  .case__link:hover::after { transform: translateX(0.3em); }
}
.case__media > img, .case__media > video { transition: scale 1.1s var(--ease-out); }
@media (hover: hover) { .case:hover .case__media > img, .case:hover .case__media > video { scale: 1.045; } }
@media (max-width: 1023px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .case__head { flex-direction: column; gap: 0.25rem; }
}
@media (max-width: 559px) { .case__pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Storyboard: clay draft to final film ----------
   Both films play; scroll moves the wipe between them. The draft and the final cut
   are edited differently, so this is a before/after transition, not a frame match.
   The wipe runs between 14 % and 86 % of the pin so each end holds for a moment. */
.story { --w: clamp(0, calc((var(--p, 0) - 0.14) / 0.72), 1); }
.story__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); }
.story__word { margin: 0; font-size: clamp(4rem, 11vw, 11rem); line-height: 0.85; }
.story__word--a { text-align: right; }
.story__frame { position: relative; overflow: hidden; background: #bcbcbc; aspect-ratio: 9 / 16; }
.story__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__final { clip-path: inset(0 0 0 calc((1 - var(--w)) * 100%)); }
.story__line { position: absolute; top: 0; bottom: 0; left: calc((1 - var(--w)) * 100%); width: 3px; margin-left: -1px; background: var(--signal); opacity: calc(min(var(--w) * 20, (1 - var(--w)) * 20, 1)); }
.story__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.story__steps li { display: grid; gap: 0.25rem; padding-top: 0.75rem; border-top: 2px solid var(--line); color: var(--ink-3); font-size: 0.9375rem; line-height: 1.4; transition: color .3s, border-color .3s; }
.story__steps strong { font-size: 1.0625rem; }
.story__steps li.is-active { color: var(--ink); border-top-color: var(--signal); }

.story:not(.is-static) .story__track { height: 340vh; }
.story:not(.is-static) .story__pin { position: sticky; top: 5.5rem; height: calc(100vh - 5.5rem); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
.story:not(.is-static) .story__frame { height: min(calc(100vh - 5.5rem - 9rem), 860px); transform: scale(calc(0.9 + min(var(--p, 0) / 0.14, 1) * 0.1)); will-change: transform; }
.story:not(.is-static) .story__word--a { opacity: calc(1 - var(--w) * 0.85); transform: translate3d(calc(var(--w) * -3vw), 0, 0); }
.story:not(.is-static) .story__word--b { opacity: calc(0.15 + var(--w) * 0.85); transform: translate3d(calc((1 - var(--w)) * 3vw), 0, 0); }

.story.is-static .story__pin { padding-top: 1rem; }
.story.is-static .story__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.story.is-static .story__word { grid-row: 1; font-size: clamp(2.5rem, 8vw, 5rem); text-align: left; }
.story.is-static .story__word--b { grid-column: 2; }
.story.is-static .story__frame { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; aspect-ratio: auto; background: none; overflow: visible; }
.story.is-static .story__frame video { position: static; aspect-ratio: 9 / 16; clip-path: none; background: #bcbcbc; }
.story.is-static .story__line { display: none; }
.story.is-static .story__steps { padding-top: 2rem; }
.story.is-static .story__steps li { color: var(--ink); }
@media (max-width: 767px) { .story__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; } }

/* ---------- Services ---------- */
.rows { border-top: 3px solid var(--ink); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: baseline; padding: 1.875rem 0; border-bottom: 2px solid var(--line); }
.row__title { grid-column: span 7; font-weight: 700; font-stretch: 75%; font-size: clamp(2rem, 4.44vw, 4rem); line-height: 1; }
.row__text { grid-column: span 5; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.row { position: relative; }
.row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: right center; transition: transform .6s var(--ease-io);
}
.row__title, .row__text { transition: transform .6s var(--ease-out), color .3s; }
@media (hover: hover) {
  a.row:hover .row__title { color: var(--signal); transform: translateX(1.25rem); }
  a.row:hover .row__text { transform: translateX(0.5rem); }
  a.row:hover::after { transform: scaleX(1); transform-origin: left center; }
}
a.row:active .row__title { color: var(--signal); }
a.row:active::after { transform: scaleX(1); transform-origin: left center; transition-duration: .3s; }
.agency-note { max-width: 46rem; padding-top: 2rem; }
@media (max-width: 767px) { .row__title, .row__text { grid-column: 1 / -1; } .row { gap: 0.5rem; } }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; align-content: start; gap: 0.625rem; }
.steps__num { font-size: 4rem; line-height: 1; color: var(--mute); }
.steps li:last-child .steps__num { color: var(--signal); }
.steps h3 { font-size: 1.1875rem; }
.steps p { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1199px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3rem; } }
@media (max-width: 599px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Process as a horizontal rail: pinned, the six steps slide sideways as you scroll.
   js/site.js sets the rail height and --dist (px the list travels). Without JS,
   on narrow screens and under reduced motion (.is-static) the plain grid above applies. */
.rail:not(.is-static) .rail__pin { position: sticky; top: 5.5rem; height: calc(100vh - 5.5rem); display: flex; align-items: center; overflow: hidden; }
.rail:not(.is-static) .steps { display: flex; gap: 2.5rem; will-change: transform; transform: translate3d(calc(var(--dist, 0) * var(--p, 0) * -1px), 0, 0); }
.rail:not(.is-static) .steps li { flex: 0 0 clamp(18rem, 27vw, 25rem); padding-top: 1.5rem; border-top: 3px solid var(--ink); }
.rail:not(.is-static) .steps__num { font-size: clamp(4.5rem, 7vw, 6.5rem); }
.rail:not(.is-static) .steps h3 { font-size: clamp(1.375rem, 1.8vw, 1.75rem); }
.rail:not(.is-static) .steps p { font-size: 1.0625rem; }
.rail:not(.is-static) .steps li { transition: border-color .3s; }
.rail:not(.is-static) .steps li .steps__num, .rail:not(.is-static) .steps li:last-child .steps__num { color: var(--mute); transition: color .3s; }
.rail:not(.is-static) .steps li.is-active { border-top-color: var(--signal); }
.rail:not(.is-static) .steps li.is-active .steps__num { color: var(--ink); }
.rail:not(.is-static) .rail__pin::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2.5rem; height: 3px; background: linear-gradient(var(--ink), var(--ink)) 0 0 / calc(var(--p, 0) * 100%) 100% no-repeat, var(--line); }

/* One render, every format: a pinned frame recuts itself 1:1, 4:5, 9:16, 16:9.
   js/site.js sizes the first frame; static mode shows all four side by side. */
.formats__track { height: 340vh; }
.formats__pin { position: sticky; top: 5.5rem; height: calc(100vh - 5.5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.formats__list { grid-column: span 3; display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.formats__list li { display: grid; gap: 0.25rem; color: var(--ink-3); transition: color .25s; }
.formats__list strong { font-weight: 800; font-stretch: 62%; font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1; }
.formats__list li.is-active { color: var(--ink); }
.formats__stage { grid-column: 4 / -1; height: 100%; display: flex; align-items: center; justify-content: center; }
.formats__frame { position: relative; overflow: hidden; background: var(--surface); }
.formats__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.formats:not(.is-static) .formats__frame + .formats__frame { display: none; }
.formats:not(.is-static) .formats__frame::after { content: attr(data-label); position: absolute; left: 1rem; bottom: 1rem; padding: 0.25rem 0.625rem; background: var(--paper); font-size: 0.875rem; font-weight: 600; }
.formats.is-static .formats__track { height: auto; }
.formats.is-static .formats__pin { position: static; height: auto; padding-top: 3rem; }
.formats.is-static .formats__list { display: none; }
.formats.is-static .formats__stage { grid-column: 1 / -1; height: auto; display: grid; grid-template-columns: 1fr 0.8fr 0.5625fr 1.7778fr; gap: 0.75rem; align-items: end; }
.formats.is-static .formats__frame { width: 100%; }
.formats.is-static .formats__frame::after { content: attr(data-label); display: block; padding-top: 0.5rem; font-size: 0.875rem; font-weight: 600; background: none; position: static; }
.formats.is-static .formats__frame { overflow: visible; background: none; }
.formats.is-static .formats__frame img { position: static; display: block; aspect-ratio: var(--r); height: auto; }
@media (max-width: 767px) {
  .formats.is-static .formats__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- About ---------- */
.about { align-items: center; }
.about__photo { grid-column: span 5; }
.about__photo img { width: 100%; aspect-ratio: 1200 / 896; object-fit: cover; }
.about__text { grid-column: 7 / span 6; display: grid; gap: 1.5rem; }
/* Two numbers side by side, the worded credential on its own row: long words
   like "Jahrgangsbester" would otherwise overflow a third column. */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem var(--gap); padding-top: 1.5rem; border-top: 3px solid var(--ink); margin-top: 0.5rem; }
.stats > div:nth-child(3) { grid-column: 1 / -1; }
.stats__v { display: block; font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1; }
.stats__k { display: block; padding-top: 0.5rem; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-3); }
@media (max-width: 1023px) { .about__photo, .about__text { grid-column: 1 / -1; } }
@media (max-width: 559px) { .stats { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Scopes ---------- */
.scopes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.scope { display: grid; align-content: start; gap: 0.875rem; padding: 2rem; background: var(--surface); }
.scope--featured { background: var(--ink); color: var(--paper); }
.scope--featured .scope__text, .scope--featured li { color: var(--dim-dark); }
.scope__tier { font-size: 0.9375rem; color: var(--ink-3); }
.scope--featured .scope__tier { color: var(--dim-dark); }
.scope__title { font-weight: 700; font-stretch: 75%; font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.05; }
.scope__text { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.scope ul { display: grid; gap: 0.375rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--ink-2); }
.scope li::before { content: "— "; }
.scopes-note { max-width: 52rem; padding-top: 1.25rem; }
@media (max-width: 1023px) { .scopes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Voices ---------- */
.quote-lead { grid-column: 2 / span 10; }
.quote-lead p { font-weight: 500; font-stretch: 75%; font-size: clamp(1.75rem, 4.7vw, 4.25rem); line-height: 1.06; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.quote-lead footer { padding-top: 1.75rem; }
.quotes { grid-column: 2 / span 10; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding-top: 4rem; }
.quotes blockquote { margin: 0; padding-top: 1.5rem; border-top: 3px solid var(--ink); }
.quotes p { font-size: 1.1875rem; line-height: 1.5; }
.quotes footer { padding-top: 1rem; }
@media (max-width: 1023px) { .quote-lead, .quotes { grid-column: 1 / -1; } }
@media (max-width: 767px) { .quotes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq__title { grid-column: span 4; font-size: clamp(2.5rem, 5.5vw, 5rem); }
.faq__list { grid-column: 5 / span 8; border-top: 3px solid var(--ink); }
.faq-item { border-bottom: 2px solid var(--line); }
.faq-q {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.625rem 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: inherit; font-size: clamp(1.1875rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.3; text-align: left;
}
.faq-q:hover { color: var(--signal); }
.faq-q > span:first-child { transition: transform .5s var(--ease-out); }
@media (hover: hover) { .faq-q:hover > span:first-child { transform: translateX(0.5rem); } }
.faq-q:active .faq-icon { transform: scale(0.8); }
.faq-icon { flex: 0 0 20px; width: 20px; height: 20px; position: relative; transition: transform .6s var(--ease-io); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 1px; right: 1px; top: 9px; height: 2.5px; background: currentColor; }
.faq-icon::after { transform: rotate(90deg); transition: transform .6s var(--ease-io); }
.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-item.is-open .faq-icon::after { transform: rotate(0deg); }
.faq-a { padding: 0 0 1.875rem; max-width: 44rem; }
.faq-a[hidden] { display: none; }
@media (max-width: 1023px) { .faq__title, .faq__list { grid-column: 1 / -1; } .faq__title { margin-bottom: 2rem; } }

/* ---------- Journal ---------- */
.articles { border-top: 3px solid var(--ink); }
.article-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: baseline; padding: 1.75rem 0; border-bottom: 2px solid var(--line); }
.article-row__tag { grid-column: span 2; font-size: 0.9375rem; color: var(--ink-3); }
.article-row__title { grid-column: span 8; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.25; }
.article-row__time { grid-column: span 2; text-align: right; font-size: 0.9375rem; color: var(--ink-3); }
.article-row__title { transition: transform .6s var(--ease-out), color .3s; }
@media (hover: hover) { a.article-row:hover .article-row__title { color: var(--signal); transform: translateX(0.75rem); } }
a.article-row:active .article-row__title { color: var(--signal); }
@media (max-width: 767px) {
  .article-row__tag, .article-row__time { grid-column: span 6; }
  .article-row__time { text-align: right; }
  .article-row__title { grid-column: 1 / -1; order: -1; }
}

/* ============================================================
   Subpage building blocks (service pages first, case studies next)
   ============================================================ */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.625rem; padding-top: clamp(2rem, 3.9vw, 3.5rem); margin: 0; padding-left: 0; list-style: none; font-size: 0.9375rem; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 0.625rem; }
.crumbs a { color: var(--ink-3); }

.page-hero { padding-top: 2rem; padding-bottom: clamp(3rem, 5vw, 4.5rem); align-items: end; }
.page-hero__title { grid-column: 1 / -1; font-size: clamp(3rem, 8.6vw, 7.75rem); line-height: 0.88; text-wrap: balance; }
.page-hero__lead { grid-column: span 6; margin-top: 2.5rem; font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); }
.page-hero__cta { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
@media (max-width: 1023px) { .page-hero__lead, .page-hero__cta { grid-column: 1 / -1; } .page-hero__cta { justify-content: flex-start; } }

.h2 { font-size: clamp(2.75rem, 6.67vw, 6rem); }
.h2--s { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.stack { display: grid; gap: 1.5rem; align-content: start; }

.band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.band img { width: 100%; aspect-ratio: 432 / 580; object-fit: cover; background: var(--surface); }
@media (max-width: 767px) { .band { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } }

.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.cards2 > div { display: grid; gap: 0.75rem; align-content: start; padding: 2rem 3rem 2.5rem 0; border-top: 3px solid var(--ink); }
.cards2 h3 { font-stretch: 75%; font-size: clamp(1.875rem, 3vw, 2.75rem); line-height: 1; }
@media (max-width: 767px) { .cards2 { grid-template-columns: minmax(0, 1fr); } .cards2 > div { padding-right: 0; } }

.cols4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.cols4 > div { display: grid; gap: 0.75rem; align-content: start; padding-top: 1.5rem; border-top: 3px solid var(--ink); }
.cols4 h3 { font-size: 1.375rem; line-height: 1.2; }
.cols4 p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.cols4.cols4--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1023px) { .cols4, .cols4.cols4--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }
@media (max-width: 559px) { .cols4, .cols4.cols4--5 { grid-template-columns: minmax(0, 1fr); } }

.split { align-items: center; }
.split__text { grid-column: span 6; }
.split__media { grid-column: 8 / span 5; }
.split__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 1023px) { .split__text, .split__media { grid-column: 1 / -1; } }

.prose { grid-column: 2 / span 8; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.prose p { font-size: 1.1875rem; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 1023px) { .prose { grid-column: 1 / -1; } }

.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding-top: 3rem; }
.figs figure { margin: 0; }
.figs img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface); }
.figs figcaption { padding-top: 0.875rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); }
.figs figcaption a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 559px) { .figs { grid-template-columns: minmax(0, 1fr); } }

.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.proof__card { display: grid; gap: 0.875rem; align-content: start; color: var(--ink); }
.proof__card img { width: 100%; aspect-ratio: 432 / 520; object-fit: cover; background: var(--surface); }
.proof__name { font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1; }
.proof__text { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.proof__card img { clip-path: inset(0); transition: clip-path .7s var(--ease-io); }
.proof__name { transition: color .3s; }
a.proof__card:hover .proof__name, a.proof__card:active .proof__name { color: var(--signal); }
@media (hover: hover) { a.proof__card:hover img { clip-path: inset(0.75rem); } }
@media (max-width: 1023px) { .proof { grid-template-columns: minmax(0, 1fr); max-width: 32rem; } }

/* FAQ with a long question-style heading: title above, list indented */
.faq--stacked .faq__title { grid-column: 1 / -1; max-width: 60rem; margin-bottom: 3rem; font-size: clamp(2.5rem, 5.5vw, 5rem); }

.scopes--compact .scope { gap: 0.75rem; }

.cta__text { grid-column: span 8; }
.cta__side { grid-column: 9 / span 4; display: grid; gap: 1.75rem; align-content: end; }
.cta__side p { font-size: 1.125rem; line-height: 1.55; color: var(--dim-dark); }
.cta__side .btn { justify-self: start; }
@media (max-width: 1023px) { .cta__text, .cta__side { grid-column: 1 / -1; } }

/* ---------- Contact + footer (dark block) ---------- */
.contact { margin-top: var(--section); background: var(--ink); color: var(--paper); padding: clamp(5rem, 8.3vw, 7.5rem) 0 3rem; }
.contact a:hover { color: var(--paper); }
.contact__info a, .footer__col a, .form__check a {
  background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0% 1px;
  transition: background-size .45s var(--ease-io), color .3s;
}
.contact__info a:hover, .footer__col a:hover { background-size: 100% 1px; background-position-x: left; }
.contact__text { grid-column: span 5; display: grid; align-content: start; gap: 2.5rem; }
.contact__title { font-size: clamp(2.75rem, 6.67vw, 6rem); }
.contact__lead { font-size: 1.125rem; line-height: 1.55; color: var(--dim-dark); }
.contact__info { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.875rem 1.5rem; margin: 0; font-size: 1rem; }
.contact__info dt { color: var(--dim-dark); }
.contact__info dd { margin: 0; }
.contact__info a { font-weight: 600; }

.form { grid-column: 7 / span 6; display: grid; gap: 2.25rem; align-content: start; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
.field { display: grid; gap: 0.625rem; }
/* Fields: on focus a light line draws across the underline and the label lights up.
   js/site.js marks fields once they have been left: .is-ok (required and valid, a tick
   pops in) or .is-bad (red). Nothing turns red before someone has typed or submitted. */
.field__label { font-size: 0.875rem; color: var(--dim-dark); transition: color .3s; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.5rem; padding: 0.75rem 0;
  border: 0; border-bottom: 2px solid var(--line-dark); border-radius: 0;
  color: var(--paper);
  background: linear-gradient(var(--line-bar, var(--paper)), var(--line-bar, var(--paper))) no-repeat left bottom / 0% 2px;
  background-origin: border-box;
  font: inherit; font-size: 1.0625rem;
  -webkit-appearance: none; appearance: none;
  transition: background-size .55s var(--ease-io), border-color .3s;
}
.field textarea { min-height: 8.75rem; resize: vertical; line-height: 1.5; }
.field select {
  background-image:
    linear-gradient(var(--line-bar, var(--paper)), var(--line-bar, var(--paper))),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%23a5a4a2' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left bottom, right 0.25rem center;
  background-size: 0% 2px, 14px 8px; background-origin: border-box, padding-box;
  padding-right: 2rem; cursor: pointer;
}
.field select option { color: var(--ink); background: var(--paper); }
.field input:focus, .field textarea:focus { outline: none; background-size: 100% 2px; }
.field select:focus { outline: none; background-size: 100% 2px, 14px 8px; }
.field:focus-within .field__label, .field.has-value .field__label { color: var(--paper); }
.field:hover :is(input, select, textarea) { border-bottom-color: var(--foot-dark); }
.field.is-ok .field__label::after {
  content: ""; display: inline-block; width: 0.75em; height: 0.4em; margin: 0 0 0.2em 0.5em;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); animation: tick-in .45s var(--ease-pop) both;
}
.field.is-bad { --line-bar: var(--alert-dark); }
.field.is-bad :is(input, select, textarea) { border-bottom-color: var(--alert-dark); }
.field.is-bad .field__label { color: var(--alert-dark); }
@keyframes tick-in { from { opacity: 0; transform: rotate(-45deg) scale(0); } }

/* Consent: the native checkbox stays in place for keyboard, screen readers and the
   browser's required check, invisible over a drawn box whose tick strokes itself in. */
.form__check { position: relative; display: flex; gap: 0.875rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; color: var(--dim-dark); cursor: pointer; transition: color .3s; }
.form__check input { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.check {
  flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center;
  border: 2px solid var(--line-dark);
  transition: border-color .25s, background-color .25s, transform .3s var(--ease-pop);
}
.check svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s var(--ease-io); }
.form__check:hover .check { border-color: var(--paper); }
.form__check:active .check { transform: scale(0.85); }
.form__check input:checked + .check { background: var(--paper); border-color: var(--paper); animation: check-pop .45s var(--ease-pop); }
.form__check input:checked + .check svg { stroke-dashoffset: 0; transition-delay: .08s; }
.form__check:has(input:checked) { color: var(--paper); }
.form__check input:focus-visible + .check { outline: 2px solid var(--signal); outline-offset: 3px; }
.form__check a { text-decoration: underline; text-underline-offset: 0.2em; }
.form.was-submitted .form__check input:invalid + .check { border-color: var(--alert-dark); }
@keyframes check-pop { 40% { transform: scale(1.2); } }
.is-shaking { animation: shake .45s var(--ease-out); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* Submit: while the form is on its way the arrow turns into a spinner */
.btn.is-sending { pointer-events: none; }
.btn.is-sending::after { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Copy button next to the email address, added by js/site.js */
.copy {
  margin-left: 0.75rem; padding: 0.25rem 0.625rem; min-height: 1.75rem;
  border: 1px solid var(--line-dark); background: transparent; color: var(--dim-dark);
  font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; vertical-align: 0.1em;
  transition: color .25s, border-color .25s, background-color .25s, transform .25s var(--ease-pop);
}
.copy:hover { color: var(--paper); border-color: var(--paper); }
.copy:active { transform: scale(0.92); }
.copy.is-done { background: var(--paper); border-color: var(--paper); color: var(--ink); animation: check-pop .45s var(--ease-pop); }
.form__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form__req { font-size: 0.875rem; color: var(--dim-dark); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 1023px) { .contact__text, .form { grid-column: 1 / -1; } .form { padding-top: 3rem; } }
@media (max-width: 599px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.footer { padding-top: clamp(5rem, 8vw, 7.5rem); }
.footer__statement { max-width: 44rem; padding-bottom: 3.5rem; }
.footer__statement h2 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 500; line-height: 1.2; }
.footer__statement p { padding-top: 1rem; color: var(--dim-dark); line-height: 1.6; }
.footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); padding: 2.5rem 0; border-top: 2px solid var(--line-dark); }
.footer__col h3 { font-size: 0.9375rem; font-weight: 600; color: var(--dim-dark); padding-bottom: 1rem; }
.footer__col ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-top: 2rem; border-top: 2px solid var(--line-dark); font-size: 0.875rem; color: var(--foot-dark); }
.footer__brand { display: flex; align-items: center; gap: 0.75rem; }
.footer__brand img { width: 16px; height: 28px; }
.socials { display: flex; gap: 0.5rem; }
.socials a { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; }
.socials img { width: 18px; height: 18px; filter: invert(1) brightness(0.9); }
@media (max-width: 1023px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }

/* ---------- Headings fill word by word as they scroll past ----------
   js/site.js wraps each word; unfilled words are decorative mute until reached.
   Static mode leaves the heading as plain ink text. */
.fill-word { transition: color .35s ease; }
[data-fill]:not(.is-static) .fill-word { color: var(--mute); }
[data-fill]:not(.is-static) .fill-word.is-filled { color: inherit; }
[data-fill]:not(.is-static) { color: var(--ink); }

/* ============================================================
   Remaining pages: articles, cases, about, legal
   ============================================================ */
.page-hero__title--s { font-size: clamp(2.5rem, 5.6vw, 5.25rem); line-height: 0.92; max-width: 72rem; }
.page-hero__meta { grid-column: 1 / -1; margin-bottom: -0.5rem; }
.page-hero__lead + .page-hero__lead { margin-top: 1rem; grid-column: 1 / span 6; }
.kicker { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.measure { max-width: 46rem; }
.lead.measure + .lead.measure { padding-top: 1rem; }
.note { color: var(--ink-3); }
.subhead { padding: 3rem 0 1.5rem; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; }
.link-row { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; padding-top: 1.5rem; }
.link-row .case__link { margin-top: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 2rem; }
.split--media-first .split__media { grid-column: 1 / span 5; grid-row: 1; }
.split--media-first .split__text { grid-column: 7 / span 6; }
.split__media video { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface); }
.split__text .case__link { justify-self: start; }
.cols4.cols4--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols4.cols4--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap) calc(var(--gap) * 3); align-items: start; }
.cols2 .stack { gap: 1rem; }
.cols2 figure { margin: 0; max-width: 28rem; justify-self: end; }
.cols2 figure img, .cols2 figure video { width: 100%; height: auto; background: var(--surface); }
@media (max-width: 1023px) { .cols2 figure { justify-self: start; } }
.figs video { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface); }
.figs figcaption strong { display: block; color: var(--ink); font-weight: 600; }
.figs.figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Case stills keep their portrait format instead of a square crop */
.figs--case { max-width: 64rem; }
.figs--case.figs--3 { max-width: none; }
.figs--case img, .figs--case video { aspect-ratio: auto; height: auto; }
.stats.stats--4 > div:nth-child(3) { grid-column: auto; }
.stats.stats--4 { max-width: 60rem; }
@media (min-width: 1024px) { .stats.stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .split--media-first .split__media, .split--media-first .split__text { grid-column: 1 / -1; grid-row: auto; }
  .cols4.cols4--3 { grid-template-columns: minmax(0, 1fr); }
  .cols2, .figs.figs--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Long-form text: journal articles, focus pages, legal */
.prose--article, .prose--legal { gap: 1.125rem; }
/* The text starts right under the page head, not a full section further down */
.page-hero + .section:has(.prose--article, .prose--legal) { padding-top: 0; }
.page-hero:has(.page-hero__title--s) { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.prose--article h2, .prose--legal h2 {
  margin-top: 2.5rem; font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 0.95; overflow-wrap: break-word;
}
html[lang="de"] .prose--article h2 { -webkit-hyphens: auto; hyphens: auto; }
.prose--legal h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 2rem; }
.prose--article > :first-child, .prose--legal > :first-child { margin-top: 0; }
.prose--article h3, .prose--legal h3 { margin-top: 1rem; font-size: 1.375rem; line-height: 1.25; }
.prose--article ul, .prose--article ol, .prose--legal ul { display: grid; gap: 0.625rem; margin: 0; padding-left: 1.25rem; font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); }
.prose--article li::marker { color: var(--signal); }
.prose--article strong { color: var(--ink); }
.prose--article p a:not(.btn), .prose--legal p a:not(.btn), .prose--article li a { text-decoration: underline; text-underline-offset: 0.2em; }
.prose--article p.note { color: var(--ink-3); }
.prose--article figure { margin: 1.5rem 0; }
.prose--article figure img, .prose--article figure video { width: 100%; height: auto; background: var(--surface); }
.prose--article figcaption { padding-top: 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); }
.prose__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 1.5rem 0; }
.prose__pair figure { margin: 0; }
.prose__pair img, .prose__pair video { aspect-ratio: 1; object-fit: cover; }
.prose--legal p { font-size: 1.0625rem; }
@media (max-width: 559px) { .prose__pair { grid-template-columns: minmax(0, 1fr); } }

.table-scroll { margin: 1rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.compare th, .compare td { padding: 0.875rem 1.25rem 0.875rem 0; border-bottom: 2px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); }
.compare thead th { padding-top: 0; border-bottom: 3px solid var(--ink); color: var(--ink); font-weight: 700; }
.compare td:first-child { color: var(--ink); font-weight: 600; }
.compare tbody tr { transition: background-color .25s; }
@media (hover: hover) { .compare tbody tr:hover { background: var(--surface); } }

/* Case studies */
.case-hero { padding-top: 2rem; padding-bottom: clamp(3rem, 5vw, 4.5rem); align-items: start; }
.case-hero__text { grid-column: span 6; display: grid; gap: 1.5rem; align-content: start; justify-items: start; }
.case-hero__title { font-size: clamp(3rem, 6.4vw, 6rem); line-height: 0.9; text-wrap: balance; }
.case-hero__media { grid-column: 8 / span 5; margin: 0; }
.case-hero__media .player, .case-hero__media > img, .case-hero__media figcaption { width: min(100%, calc((100svh - 12.5rem) * 9 / 16)); margin-left: auto; }
.case-hero__media video, .case-hero__media img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--surface); }
.case-hero__media figcaption { padding-top: 0.75rem; }
/* Landscape case film and stills across the full width */
.case-film { margin: 0; padding-top: 1rem; }
.case-film video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case-film figcaption { padding-top: 0.75rem; }
.figs--case.figs--wide { max-width: none; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--gap); width: 100%; margin: 0.5rem 0 0.5rem; padding-top: 1.25rem; border-top: 3px solid var(--ink); }
.facts dt { font-size: 0.875rem; color: var(--ink-3); }
.facts dd { margin: 0.25rem 0 0; font-weight: 600; line-height: 1.35; }
@media (max-width: 1023px) {
  .case-hero__text, .case-hero__media { grid-column: 1 / -1; }
  .case-hero__media { max-width: 26rem; }
  .case-hero__media .player, .case-hero__media > img, .case-hero__media figcaption { width: 100%; margin-left: 0; }
}

.draft { margin-top: 2.5rem; border-top: 3px solid var(--ink); border-bottom: 2px solid var(--line); }
.draft summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem); font-weight: 600; transition: color .3s;
}
.draft summary::-webkit-details-marker { display: none; }
.draft summary:hover { color: var(--signal); }
.draft[open] .faq-icon { transform: rotate(180deg); }
.draft[open] .faq-icon::after { transform: rotate(0deg); }
.draft__body { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: calc(var(--gap) * 2); padding-bottom: 2rem; animation: rise-in .6s var(--ease-out) both; }
.draft__media video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--surface); }
@media (max-width: 767px) { .draft__body { grid-template-columns: minmax(0, 1fr); } .draft__media { max-width: 20rem; } }

/* Case film player: two buttons over the picture instead of native controls */
.player { position: relative; overflow: hidden; background: var(--surface); }
.player video { display: block; cursor: pointer; }
.player__controls { position: absolute; left: 0.75rem; bottom: 0.75rem; display: flex; gap: 0.375rem; transition: opacity .35s var(--ease-out); }
.player.is-playing .player__controls { opacity: 0.8; }
.player:hover .player__controls, .player:focus-within .player__controls { opacity: 1; }
.player__btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .25s, color .25s, transform .3s var(--ease-pop);
}
.player__btn svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
@media (hover: hover) { .player__btn:hover { background: var(--ink); color: var(--paper); transform: scale(1.06); } }
.player__btn:active { transform: scale(0.88); }
.player__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.player__btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* Pages without a closing call to action: the dark block carries only the footer */
.contact--foot { padding-top: 0; }

/* ============================================================
   Micro-interactions and small motion
   ============================================================ */

/* Blocks rise in as they reach the viewport. js/site.js adds .rv only when motion
   is allowed, so without JS or under reduced motion nothing is ever hidden. */
.rv { opacity: 0; transform: translate3d(0, 2.25rem, 0); transition: opacity .8s var(--ease-out) var(--d, 0s), transform 1s var(--ease-out) var(--d, 0s); }
.rv.is-in { opacity: 1; transform: none; }

/* First paint: headline and hero copy rise in */
@media (prefers-reduced-motion: no-preference) {
  .hero__title, .page-hero__title { animation: rise-in 1.1s var(--ease-out) both; }
  .hero__side > *, .page-hero__lead, .page-hero__cta, .crumbs { animation: rise-in 1s var(--ease-out) both; }
  .crumbs { animation-delay: 0s; }
  .hero__side > :nth-child(1), .page-hero__lead { animation-delay: .15s; }
  .hero__side > :nth-child(2), .page-hero__cta { animation-delay: .25s; }
  .hero__side > :nth-child(3) { animation-delay: .35s; }
  .reel__meta { animation: fade-in 1s .5s both; }
}
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 2.5rem, 0); } }
@keyframes fade-in { from { opacity: 0; } }

.inline-link { transition: text-underline-offset .3s var(--ease-out), text-decoration-thickness .3s; }
.inline-link:hover { text-underline-offset: 0.4em; text-decoration-thickness: 2px; }
.hero-reel-toggle { transition: background-color .3s, color .3s, transform .25s var(--ease-out); }
.hero-reel-toggle:active { transform: scale(0.94); }

/* ---------- Marquee: craft words drift sideways, faster and in the direction you scroll ---------- */
.marquee { overflow: hidden; padding-top: var(--section); user-select: none; -webkit-user-select: none; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__item {
  flex: none; display: flex; align-items: center; margin: 0; white-space: nowrap;
  font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(5rem, 17vw, 16rem); line-height: 0.9; letter-spacing: -0.01em;
}
.marquee__item span:nth-of-type(even) { color: transparent; -webkit-text-stroke: clamp(1.5px, 0.18vw, 3px) var(--ink); }
.marquee__item i { display: inline-block; width: 0.16em; height: 0.16em; margin: 0 0.3em; border-radius: 50%; background: var(--signal); }

/* ---------- Real time: the ZONE model, turnable right on the homepage ----------
   A 140 KB loop recorded from the configurator holds the place. js/site.js loads the
   configurator in model-only mode (data-mode="model": no controls, spins until grabbed)
   about a screen before the section, under the loop, which fades once it is ready.
   Same flat surface as the work cards, so the handover is invisible. */
.rt__text { grid-column: span 4; display: grid; gap: 1.25rem; align-content: start; }
.rt__text .case__link { justify-self: start; margin-top: 0.25rem; }
.rt__stage { grid-column: 5 / -1; min-width: 0; position: relative; }
.rt__preview, .rt .zc-stage, .rt .zc--boot { aspect-ratio: 16 / 10; }
.rt__preview { position: relative; overflow: hidden; background: var(--surface); }
.rt__preview video { position: absolute; inset: 0; margin: auto; height: 100%; width: auto; aspect-ratio: 1; object-fit: cover; }
.rt__stage.is-loading .rt__preview { position: absolute; left: 0; right: 0; top: 0; z-index: 3; transition: opacity .7s var(--ease-out); }
.rt__preview.is-out { opacity: 0; pointer-events: none; }
.rt__start { position: absolute; left: 1.25rem; bottom: 1.25rem; }
.rt__start[hidden] { display: none; }
.rt__hint { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.875rem; }
.rt__hint::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--signal); animation: live 1.8s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.25; transform: scale(0.7); } }
.rt .zc { animation: fade-in .6s var(--ease-out) both; }
/* Phones: sideways drags turn the model, vertical swipes still scroll the page */
.rt .zc-stage canvas { touch-action: pan-y; }
@media (max-width: 1023px) { .rt__text, .rt__stage { grid-column: 1 / -1; } .rt__stage { padding-top: 1.5rem; } }
@media (max-width: 767px) { .rt__preview, .rt .zc-stage, .rt .zc--boot { aspect-ratio: 1; } .rt__preview video { width: 100%; height: 100%; } }

/* Configurator page: heading row above the full-width configurator */
.cfg { padding-top: clamp(1rem, 3vw, 2.5rem); scroll-margin-top: 6.5rem; }
.cfg__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; padding-bottom: 2rem; }
.cfg__head h2 { grid-column: span 7; }
.cfg__head p { grid-column: 9 / span 4; }
@media (max-width: 1023px) { .cfg__head h2, .cfg__head p { grid-column: 1 / -1; } }

/* ---------- Narrow screens get their own scroll motion ----------
   Below 1024px the desktop pins would not fit, so data-scrub-narrow picks a phone mode:
   the showreel opens like a window (reveal), the storyboard, process and formats pin
   in a portrait layout. js/site.js sets .is-narrow on the section while this runs. */
.intro.is-narrow .intro__slot { clip-path: inset(calc((1 - var(--p, 1)) * 14%) calc((1 - var(--p, 1)) * 10%)); will-change: clip-path; }
.intro.is-narrow .intro__media > * { transform: scale(calc(1 + (1 - var(--p, 1)) * 0.25)); }
.intro.is-narrow .hero-reel-toggle { transform: none; opacity: var(--p, 1); }

@media (max-width: 1023px) {
  /* work: images open from a smaller window as the card comes in */
  .case[data-scrub]:not(.is-static) .case__media { clip-path: inset(calc((1 - var(--p, 1)) * 10%) calc((1 - var(--p, 1)) * 8%)); }
  .case[data-scrub]:not(.is-static) { transform: translate3d(0, calc((1 - var(--p, 1)) * 2.5rem), 0); }

  /* storyboard: words on top, the film in the middle, one step at a time underneath */
  .story:not(.is-static) .story__track { height: 280vh; }
  .story:not(.is-static) .story__pin { top: 5.5rem; height: calc(100svh - 5.5rem); gap: 1rem; padding-block: 0.75rem; }
  .story:not(.is-static) .story__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: 0.75rem; flex: 1; min-height: 0; }
  .story:not(.is-static) .story__word { grid-row: 1; font-size: clamp(3rem, 15vw, 6rem); }
  .story:not(.is-static) .story__word--a { text-align: left; }
  .story:not(.is-static) .story__word--b { grid-column: 2; text-align: right; }
  .story:not(.is-static) .story__frame { grid-row: 2; grid-column: 1 / -1; justify-self: center; height: 100%; max-width: 100%; }
  .story:not(.is-static) .story__steps { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 4.5rem; }
  .story:not(.is-static) .story__steps li { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 0.75rem, 0); transition: opacity .4s, transform .5s var(--ease-out), border-color .3s; }
  .story:not(.is-static) .story__steps li.is-active { opacity: 1; transform: none; }

  /* process: cards slide sideways under the thumb */
  .rail:not(.is-static) .rail__pin { top: 5.5rem; height: calc(100svh - 5.5rem); }
  .rail:not(.is-static) .steps { gap: 1rem; }
  .rail:not(.is-static) .steps li { flex: 0 0 min(78vw, 22rem); }
  .rail:not(.is-static) .steps__num { font-size: clamp(4.5rem, 22vw, 6.5rem); }
  .rail:not(.is-static) .rail__pin::after { bottom: 1.5rem; }

  /* formats: the four ratios as tabs above one recutting frame */
  .formats:not(.is-static) .formats__track { height: 300vh; }
  .formats:not(.is-static) .formats__pin { top: 5.5rem; height: calc(100svh - 5.5rem); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 1rem; padding-block: 1rem; }
  .formats:not(.is-static) .formats__list { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
  .formats:not(.is-static) .formats__list li { padding-top: 0.5rem; border-top: 2px solid var(--line); font-size: 0.75rem; line-height: 1.25; transition: color .25s, border-color .25s; }
  .formats:not(.is-static) .formats__list li.is-active { border-top-color: var(--signal); }
  .formats:not(.is-static) .formats__list strong { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .formats:not(.is-static) .formats__stage { grid-column: 1 / -1; min-height: 0; }
}

/* Touch feedback where hover never happens */
@media (hover: none) {
  .case:active .case__media > img, .case:active .case__media > video { scale: 1.03; transition-duration: .4s; }
  .proof__card:active img { clip-path: inset(0.5rem); transition-duration: .3s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}