/* ==========================================================================
   EVO — Layout & components (v5). Reference width 1920px. Values from tokens.css.
   Stages are CSS sticky (viewport-tall) inside tall sections; JS maps scroll
   progress to frame sequences, highlights and the 3D mark. Without JS the
   page is a complete static document with posters in place of sequences.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { color: var(--t-fg); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--t-fg);
  background: var(--c-deep-blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: color var(--dur-theme) var(--ease-in-out);
}
html.is-loading body { overflow: hidden; height: 100vh; }

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd, blockquote, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 4px; border-radius: var(--r-1); }
.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; }
.skip-link { position: fixed; top: var(--s-3); left: var(--s-3); z-index: 1000; padding: var(--s-2) var(--s-4); background: var(--c-white); color: var(--c-deep-blue); transform: translateY(-200%); transition: transform var(--dur-fast); }
.skip-link:focus { transform: none; }

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

/* ---- Theme layer ---------------------------------------------------- */
.theme-bg { position: fixed; inset: 0; z-index: var(--z-theme); background: var(--t-bg); transition: background-color var(--dur-theme) var(--ease-in-out); }
/* Footer reveal: the footer sits pinned to the bottom of the window behind the
   page; the last section slides up over it and uncovers it. */
main { position: relative; z-index: calc(var(--z-content) + 1); }
.footer { position: sticky; bottom: 0; z-index: var(--z-content); }

/* ---- Type ----------------------------------------------------------- */
/* Section label: a 6px marker and 16px text, as in the Figma "Label / Marker". */
.label { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-label); font-weight: 400; line-height: 1.6; color: var(--t-fg); }
.label--caps { display: inline-block; font-size: var(--fs-caps); font-weight: 400; letter-spacing: var(--ls-caps); text-transform: uppercase; line-height: 1.5; }
.marker { display: inline-block; flex: none; width: 6px; height: 6px; background: currentColor; }
.title { font-family: var(--f-display); font-weight: 400; line-height: var(--lh-title); letter-spacing: var(--ls-display); text-wrap: balance; }

.split-word { display: inline-block; vertical-align: bottom; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.split-word > span { display: inline-block; will-change: transform; }

/* ---- Preloader ------------------------------------------------------ */
.preloader { position: fixed; inset: 0; z-index: var(--z-preloader); background: var(--c-deep-blue); color: var(--c-white); display: grid; place-items: center; padding: var(--gutter); }
.preloader__mark { display: grid; place-items: center; gap: var(--s-7); }
.preloader__symbol { width: clamp(72px, 6.25vw, 120px); height: auto; overflow: visible; }
.preloader__path { fill: var(--c-beige); fill-opacity: 0; stroke: var(--c-beige); stroke-width: 0.55; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.preloader__wordmark { height: 40px; width: auto; opacity: 0; }
.preloader__meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-6); color: var(--c-beige-3); }
.preloader__meta .label--caps { color: inherit; }
.preloader__count { font-variant-numeric: tabular-nums; }
.preloader.is-done { pointer-events: none; }
@media (max-width: 599px) { .preloader__meta { flex-direction: column; align-items: flex-start; gap: var(--s-2); } }

/* ---- Nav ------------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-8);
  padding: var(--s-5) var(--gutter);
  color: var(--c-white);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-theme);
}
.nav.is-gone { visibility: hidden; pointer-events: none; }
.nav__cluster {
  grid-column: 3; display: none; align-items: center; gap: var(--s-6);
  padding: 6px 6px 6px var(--s-6);
  background: color-mix(in srgb, var(--c-deep-blue) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-2);
  color: var(--c-white);
}
.nav__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5);
  background: var(--c-beige); color: var(--c-deep-blue);
  border-radius: var(--r-1);
  font-size: var(--fs-body); font-weight: 400; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nav__cta:hover { background: var(--c-white); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.nav__wordmark { height: 22px; width: auto; }
.nav__links { display: flex; gap: var(--s-6); }
.nav__links a { font-size: var(--fs-body); font-weight: 400; opacity: 0.92; transition: opacity var(--dur-fast); }
.nav__links a:hover { opacity: 1; }
/* Letter scatter (trionn): on hover the label's letters blur apart and
   reassemble left to right; the other items dim meanwhile. */
.scatter { white-space: nowrap; }
.scatter__l { display: inline-block; will-change: transform, filter, opacity; }
.nav__links:hover a:not(:hover) { opacity: 0.4; }
.nav__toggle { grid-column: 3; width: 44px; height: 44px; margin-inline-start: auto; display: grid; place-items: center; gap: 6px; align-content: center; }
.nav__toggle-line { width: 22px; height: 1.5px; background: currentColor; transition: transform var(--dur-base) var(--ease-out); }
.nav__toggle[aria-expanded="true"] .nav__toggle-line:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 1024px) {
  .nav__cluster { display: flex; }
  .nav__toggle { display: none; }
}

/* Menu (phones and tablets): a numbered list with hairlines, letter scatter on
   hover, and the beige CTA underneath. */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu); overflow-y: auto;
  padding: calc(var(--s-5) * 2 + 44px + var(--s-7)) var(--gutter) var(--s-8);
  background: var(--c-deep-blue); color: var(--c-white);
  display: flex; flex-direction: column; gap: var(--s-7);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav { display: grid; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.mobile-menu__nav a {
  display: flex; align-items: center; gap: var(--s-5); min-height: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 1.125rem; font-weight: 400; line-height: 1.2;
  transition: opacity var(--dur-fast);
}
.mobile-menu__num { min-width: 2ch; font-size: var(--fs-caps); color: var(--c-beige-3); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .mobile-menu__nav:hover a:not(:hover) { opacity: 0.35; } }
.mobile-menu__cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 var(--s-5);
  background: var(--c-beige); color: var(--c-deep-blue);
  font-size: var(--fs-body); white-space: nowrap;
  transition: background var(--dur-fast);
}
.mobile-menu__cta:hover { background: var(--c-white); }

/* ---- Shared: guides, markers, CTA (Figma "Label box" in EVO colours) ---- */
.guide { position: relative; }
.corner { position: absolute; width: 6px; height: 6px; background: var(--c-white); }
.corner--tl { top: -3px; left: -3px; } .corner--tr { top: -3px; right: -3px; } .corner--bl { bottom: -3px; left: -3px; } .corner--br { bottom: -3px; right: -3px; }
.cta {
  justify-self: start;
  --cta-bg: transparent; --cta-fg: var(--t-fg); --cta-bd: transparent; --cta-ibg: var(--c-deep-blue); --cta-ifg: var(--c-white);
  display: inline-flex; align-items: stretch; padding: 2px 2px 2px 0;
  background: var(--cta-bg); border: 1px solid var(--cta-bd); color: var(--cta-fg);
  font-size: var(--fs-body); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-caps); white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.cta > span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5); }
.cta > i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; min-height: 44px; font-style: normal; background: var(--cta-ibg); color: var(--cta-ifg); transition: background var(--dur-fast), color var(--dur-fast); }
/* White label box with a deep blue icon box: the standard CTA of the layout. */
.cta--light { --cta-bg: var(--c-white); --cta-fg: var(--c-deep-blue); --cta-ibg: var(--c-deep-blue); --cta-ifg: var(--c-white); }
.cta--light:hover { --cta-bg: var(--c-beige-2); }
/* Deep blue label box with a white icon box (paper sections). */
.cta--dark { --cta-bg: var(--c-deep-blue); --cta-fg: var(--c-white); --cta-ibg: var(--c-white); --cta-ifg: var(--c-deep-blue); }
.cta--dark:hover { --cta-bg: var(--c-deep-blue-4); }
/* Send: white label, beige icon box (the form). */
.cta--send { --cta-ibg: var(--c-beige); --cta-ifg: var(--c-deep-blue); }
/* Ghost: hairline box, sentence case. */
.cta--ghost { --cta-bg: rgba(255,255,255,0.1); --cta-bd: var(--c-deep-blue); --cta-fg: var(--c-deep-blue); padding: 0; text-transform: none; letter-spacing: 0; }
.cta--ghost:hover { --cta-bg: var(--c-deep-blue); --cta-fg: var(--c-white); }
.cta[disabled] { opacity: 0.6; cursor: progress; }
.tag { display: inline-block; padding: 9px 12px 7px; background: var(--c-beige); color: var(--c-deep-blue); border-radius: var(--r-1); font-size: var(--fs-body); line-height: 1.6; transition: background var(--dur-fast), color var(--dur-fast); }

/* ---- Hero + film (one sticky stage, two phases) --------------------- */
/* The next section slides over the last screen of the hero (negative margin);
   the film finishes just before it arrives (see the ScrollTrigger end). */
/* 608svh: 408 of film up to the end of Gas, then the next sections slide over
   the climb into the clouds (main.js maps the last 100svh to the rest of it). */
.hero { position: relative; z-index: 0; height: 608svh; margin-bottom: -100svh; }
.hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--c-deep-blue); }
.hero__canvas, .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__canvas { will-change: transform, filter; transform-origin: 50% 50%; }
.js .hero__poster { opacity: 0; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.08) 28%, rgba(0,0,0,0.08) 62%, rgba(0,0,0,0.7) 100%);
}
.hero__content { position: absolute; inset: 0; color: var(--c-white); }
.hero__bottom { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 60px; display: grid; gap: 40px; }
/* 117px on a 1920 frame = 6.09vw: the line keeps its proportion to the width. */
.hero__title { font-family: var(--f-display); font-weight: 400; font-size: 6.09vw; line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.hero__kpis { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--s-4) 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.23); font-size: var(--fs-body); }
.hero__kpis li + li::before { content: "·"; margin-right: 26px; font-size: 1.25em; }
@media (max-width: 1023px) {
  .hero__bottom { bottom: var(--s-8); gap: var(--s-6); }
  .hero__title { font-size: var(--fs-h1); white-space: normal; }
  .hero__kpis { gap: var(--s-2) var(--s-4); font-size: var(--fs-caps); line-height: 1.5; }
  .hero__kpis li + li::before { content: none; }
}

/* A flat, translucent navy layer over the whole film while a phrase stands;
   it fades in and out with the word (JS). */
.fly__veil { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: rgba(14,22,43,0.42); }
.fly {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0 var(--gutter);
  text-align: center;
  pointer-events: none;
  visibility: hidden;
}
/* Both phrases sit in the same cell, dead centre; JS crossfades them. */
.fly__item {
  grid-area: 1 / 1;
  display: grid; justify-items: center; gap: var(--s-5);
  opacity: 0; transform: translateY(34px);
  color: var(--c-white);
}
.fly__word { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-hero); line-height: 1; letter-spacing: 0; text-transform: uppercase; text-shadow: 0 2px 40px rgba(0,0,0,0.35); }
.fly__text { display: block; max-width: 746px; font-size: clamp(1rem, 0.94vw, 1.125rem); line-height: 1.6; text-shadow: 0 1px 20px rgba(0,0,0,0.45); text-wrap: pretty; }

/* Film cards: a 250px perspective scene; each card flies from far (z −500)
   past the camera (z +200) toward its own corner of the frame. */
.fly-scene {
  position: absolute; inset: 0;
  perspective: 250px; perspective-origin: 50% 50%;
  pointer-events: none; visibility: hidden;
  transform-style: preserve-3d;
}
.fly-card {
  --card-w: clamp(220px, 27.2vw, 522px);
  position: absolute; left: 50%; top: 50%;
  width: var(--card-w); aspect-ratio: 522 / 318;
  margin: calc(var(--card-w) * -0.3046) 0 0 calc(var(--card-w) * -0.5);
  opacity: 0;
  will-change: transform, opacity;
  background: var(--c-deep-blue-2);
}
.fly-card--small { --card-w: clamp(150px, 15vw, 288px); }
.fly-card img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .fly-card { --card-w: 56vw; } .fly-card--small { --card-w: 34vw; }
  .fly { place-items: start center; padding-top: 24svh; }
  .fly__text { font-size: var(--fs-body); }
}
/* Phones on their side: no lower half to land in, so the phrase keeps the
   centre column and the smaller cards fly to the sides (JS uses the desktop
   anchors when the window is wider than tall). */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 600px) {
  .fly { place-items: center; padding-top: 0; }
  .fly__text { max-width: 40vw; }
  .fly-card { --card-w: 30vw; } .fly-card--small { --card-w: 20vw; }
}

/* ---- Logos band --------------------------------------------------------- */
.logos { position: relative; overflow: hidden; height: 228px; display: flex; align-items: center; background: var(--c-deep-blue); color: var(--c-white); }
.logos__track { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.logos__row { display: flex; align-items: center; gap: clamp(2.5rem, 4.5vw, 5.5rem); width: max-content; padding-right: clamp(2.5rem, 4.5vw, 5.5rem); will-change: transform; }
/* Each logo is a white transparent PNG; --h on the img sets its height so
   wordmarks and round marks read at the same visual weight. */
.logos__row li { flex: none; display: flex; align-items: center; opacity: 0.85; }
.logos__row img { display: block; height: var(--h, 40px); width: auto; }
@media (max-width: 1023px) { .logos__row img { height: calc(var(--h, 40px) * 0.8); } }
@media (max-width: 1023px) { .logos { height: 150px; } }

/* ---- Kundenstimmen ------------------------------------------------------ */
.reviews { position: relative; overflow: hidden; padding: var(--section-y) 0 var(--s-10); background: var(--c-deep-blue); color: var(--c-white); border-bottom: 1px solid rgba(255, 255, 255, 0.19); }
.reviews__inner { display: grid; gap: var(--s-7); margin-bottom: clamp(3rem, 4.16vw, 5rem); /* 80 @1920 */ }
.reviews__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); }
.reviews__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: 0; }
.rating { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border: 1px solid var(--c-beige); border-radius: var(--r-pill); font-size: 1.125rem; font-weight: 600; line-height: 1; }
.rating__stars, .review__stars { display: inline-flex; gap: 2px; }
.rating__stars i, .review__stars i { display: inline-block; width: 17px; height: 17px; background: var(--c-beige); clip-path: polygon(50% 2%, 63% 36%, 98% 37%, 70% 59%, 80% 94%, 50% 74%, 20% 94%, 30% 59%, 2% 37%, 37% 36%); }
.review__stars i { width: 16px; height: 16px; clip-path: none; background: url("../assets/img/icons/star.svg") 0 0 / 100% 100% no-repeat; }
/* The row overflows the page on purpose; with the pointer over it the wheel
   moves it sideways (JS). Scrollbars are hidden, the keyboard still works. */
.reviews__track { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track.is-dragging { cursor: grabbing; }
.reviews__row { display: flex; gap: 40px; width: max-content; padding: 0 var(--gutter); user-select: none; -webkit-user-select: none; }
.reviews__row img { -webkit-user-drag: none; user-drag: none; }
/* Paper cards, 510 × 650 as in the Figma (4355:222). The chamfers alternate:
   odd cards cut top-right and bottom-left, even cards top-left and
   bottom-right. Inside: stars + KPI on top, quote at the foot of a 430px
   block, then the author 44px below it. */
.review {
  --cut: 60px;
  flex: none; width: 510px; height: 650px;
  display: flex; flex-direction: column;
  padding: 56px 48px 67px;
  background: var(--c-paper); color: var(--c-deep-blue);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.review:nth-child(even) { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.review__kpi { margin-top: 30px; font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: 0; text-wrap: pretty; }
.review__quote { margin-top: auto; display: grid; gap: 20px; }
.review__quote::before { content: ""; width: 26px; height: 18.57px; background: url("../assets/img/icons/quote.svg") 0 0 / 100% 100% no-repeat; }
.review__quote p { font-size: var(--fs-body); line-height: 1.6; opacity: 0.8; }
.review__who { display: flex; align-items: center; gap: 20px; margin-top: 44px; }
.review__who img { width: 53px; height: 53px; object-fit: cover; }
.review__who span { display: grid; gap: 10px; }
.review__who strong { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; line-height: 1; }
.review__who small { font-size: var(--fs-small); line-height: 1.5; text-transform: uppercase; letter-spacing: 0; }
@media (max-width: 1023px) {
  .reviews__head { flex-direction: column; align-items: flex-start; }
  .review { width: min(420px, 82vw); height: auto; padding: 40px 28px; --cut: 40px; }
  .review__quote { margin-top: var(--s-7); }
  .review__who { margin-top: var(--s-6); }
  .reviews__row { gap: 20px; }
}

/* ---- Warum EVO ---------------------------------------------------------- */
.why { position: relative; overflow: clip; padding: var(--section-y) 0 var(--s-9); background: var(--c-deep-blue); color: var(--c-white); border-bottom: 1px solid rgba(255, 255, 255, 0.19); }
/* Stroke shapes from the Figma section (group at 689,28 in the 1920 frame). */
.why__lines { position: absolute; z-index: 0; left: 35.9%; top: 28px; width: 64.99%; height: auto; aspect-ratio: 1247.91 / 1606.92; fill: none; stroke: var(--c-deep-blue-3); stroke-width: 0.91; pointer-events: none; }
/* Figma 4355:319: 60 between label, content and button; 80 head → cards. */
.why__inner { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 3.125vw, 3.75rem); }
.why__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-8); }
.why__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: 0; max-width: 725px; }
.why__text { flex: none; width: 459px; max-width: 100%; font-size: var(--fs-body); line-height: 1.6; }
/* Four paper cards, 6px apart. The open card is 712 wide and the others 343
   at 1920 (grow 2.4 : 1 on top of the 80px padding each card keeps); the
   open card shows its text, hover opens a card. */
.why__cards { display: flex; gap: 6px; align-items: stretch; margin-top: clamp(0.5rem, 1.04vw, 1.25rem); }
.why-card {
  flex: 1 1 0; min-width: 0; min-height: 439px;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-7);
  padding: 40px;
  background: var(--c-paper); color: var(--c-deep-blue);
  transition: flex-grow 0.7s var(--ease-out);
}
.why-card.is-open { flex-grow: 2.4; }
.why-card__icon { width: 60px; height: 60px; color: var(--c-deep-blue); }
.why-card__body { grid-row: 3; display: grid; gap: 40px; }
.why-card__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h5); line-height: 1.2; letter-spacing: 0; transition: font-size 0.5s var(--ease-out); text-wrap: balance; }
.why-card.is-open .why-card__title { font-size: var(--fs-h4); }
.why-card__text { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.6s var(--ease-out), opacity 0.4s var(--ease-out); }
.why-card__text > span { display: block; overflow: hidden; min-height: 0; font-size: var(--fs-body); line-height: 1.6; opacity: 0.8; }
.why-card.is-open .why-card__text { grid-template-rows: 1fr; opacity: 1; transition-delay: 0.1s; }
/* Small laptops and tablets on their side: four columns get too narrow for
   the titles, so the cards sit two by two with every text shown. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .why__cards { display: grid; grid-template-columns: 1fr 1fr; }
  .why-card { min-height: 0; grid-template-rows: auto auto; gap: var(--s-6); }
  .why-card__body { grid-row: auto; gap: 16px; }
  .why-card .why-card__title, .why-card.is-open .why-card__title { font-size: var(--fs-h5); }
  .why-card .why-card__text { grid-template-rows: 1fr; opacity: 1; }
}
@media (max-width: 1023px) {
  .why__head { flex-direction: column; align-items: flex-start; gap: var(--s-6); }
  .why__text { width: auto; }
  .why__cards { flex-direction: column; gap: 6px; }
  .why-card { flex: none; min-height: 0; grid-template-rows: auto auto; gap: var(--s-6); padding: 28px; }
  .why-card__body { grid-row: auto; gap: 16px; }
  .why-card .why-card__title, .why-card.is-open .why-card__title { font-size: 1.25rem; }
  .why-card .why-card__text { grid-template-rows: 1fr; opacity: 1; }
  .why-card__text > span { font-size: var(--fs-small); }
  .why__lines { left: 20%; width: 120%; top: 40%; stroke-width: 2; }
}

/* ---- Vorgehen + banner (one sticky mark) -------------------------------- */
.stack { position: relative; z-index: 2; background: var(--c-deep-blue); color: var(--c-white); }
.stack__stage { position: sticky; top: 0; height: 100svh; z-index: 3; pointer-events: none; }
.stack__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stack__body { position: relative; z-index: 1; margin-top: -100svh; }
.props { padding-block: var(--s-10) var(--s-9); }
.props__inner { display: grid; gap: 0; }
.props__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: 0; text-transform: uppercase; max-width: 680px; margin: var(--s-6) 0 var(--s-10); }
.props__list { display: grid; gap: 4px; }
/* A step: 339px tall, text vertically centred. The step in focus moves 80px
   to the right, takes the raised blue, a beige edge and a beige title. */
.prop {
  position: relative; min-height: 339px;
  display: grid; align-content: center; gap: 20px;
  padding: 40px 40px 40px 80px; margin-left: 0;
  border: 1px solid rgba(255,255,255,0.04); border-left: 4px solid transparent;
  background: var(--c-deep-blue);
  transition: margin-left 0.9s var(--ease-out), background-color 0.9s var(--ease-out), border-color 0.9s var(--ease-out);
}
.prop.is-active { margin-left: 80px; background: var(--c-deep-blue-4); border-color: var(--c-beige); border-top-color: rgba(255,255,255,0.06); border-right-color: rgba(255,255,255,0.06); border-bottom-color: rgba(255,255,255,0.06); }
.prop__check { position: absolute; top: 28px; left: 28px; width: 23px; height: 27px; color: var(--c-beige); opacity: 0; transform: scale(0.6); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.prop.is-active .prop__check { opacity: 1; transform: none; }
.prop__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--c-white); transition: color 0.9s var(--ease-out); }
.prop.is-active .prop__title { color: var(--c-beige); }
.prop__text { max-width: 900px; font-size: var(--fs-lead); font-weight: 300; line-height: 1.3; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); transition: color 0.9s var(--ease-out); }
.prop.is-active .prop__text { color: rgba(255,255,255,0.72); }
/* Below 1440 the turning mark reaches into the steps; their text stops
   before it. */
@media (min-width: 1024px) and (max-width: 1439px) { .prop__text, .banner .banner__title { max-width: calc(60vw - 160px); } }
.banner { padding-block: var(--s-9) var(--s-10); }
.banner__panel {
  position: relative; min-height: 686px;
  padding: 80px 64px;
  background: var(--c-beige); border: 1px solid rgba(255,255,255,0.18); color: var(--c-deep-blue);
  display: grid; grid-template-rows: auto auto auto; align-content: start; gap: 20px;
}
.banner__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2s); line-height: 1.2; letter-spacing: 0; text-transform: uppercase; max-width: 680px; }
.banner__text { font-size: var(--fs-body); line-height: 1.6; max-width: 371px; }
/* Figma: actions row, then the contact row, both left, 40px under the text. */
.banner__foot { display: grid; justify-items: start; gap: 20px; padding-top: 20px; }
.banner__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.banner__contact { display: flex; flex-wrap: wrap; gap: 40px; }
.banner__contact a { display: inline-flex; align-items: center; gap: 0; color: var(--c-deep-blue); font-size: var(--fs-body); }
.banner__contact svg { width: 40px; height: 40px; flex: none; }
.banner__contact span { position: relative; }
.banner__contact span::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease-out); }
.banner__contact a:hover span::after { transform: scaleX(1); }
@media (max-width: 1023px) {
  .prop { min-height: 0; padding: 32px 24px 32px 40px; }
  .prop.is-active { margin-left: 16px; }
  .prop__check { top: 12px; left: 10px; width: 16px; height: 19px; }
  .prop__text { letter-spacing: 0.02em; font-size: var(--fs-text-l); }
  .banner__panel { min-height: 0; padding: var(--s-7) var(--s-5); }
  .banner__foot { flex-direction: column; align-items: flex-start; }
}
/* Below 1024 the steps take the full width, so the mark gets its own box
   above them instead of turning over the text (phones and portrait tablets). */
@media (max-width: 1023px) {
  .stack__stage { position: relative; height: min(62svh, 560px); }
  .stack__body { margin-top: 0; }
  .props { padding-top: 0; }
}
@media (max-width: 599px) {
  /* "UNTERNEHMEN," is the longest word of the page: the banner title scales
     with the width so it never leaves the panel. */
  .banner__title { font-size: min(2rem, 9vw); }
}

/* ---- Der Markt (paper, film panel, stacking cards) ---------------------- */
.market { position: relative; background: var(--c-paper); color: var(--c-deep-blue); }
/* The section itself has two cut corners (71px in Figma): navy triangles at
   the top right and bottom left, where the neighbouring sections show. */
.market::before, .market::after { content: ""; position: absolute; z-index: 5; width: 0; height: 0; border-style: solid; pointer-events: none; }
.market::before { top: 0; right: 0; border-width: 0 71px 71px 0; border-color: transparent var(--c-deep-blue) transparent transparent; }
.market::after { bottom: 0; left: 0; border-width: 71px 0 0 71px; border-color: transparent transparent transparent var(--c-deep-blue); }
.js .market[data-pinned] { height: 400svh; }
.market__stage { position: relative; min-height: 898px; padding: 27px 0; display: flex; align-items: center; }
.js .market[data-pinned] .market__stage { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }
/* The copy keeps at least 380px (the panel gives way, never the text); the
   panel is 1138 wide at 1920 and never taller than the window allows. */
.market__inner { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(0, 1138px); align-items: stretch; gap: 0; width: min(100% - 2 * var(--gutter), var(--container) - 2 * var(--gutter)); margin-left: max(var(--gutter), calc((100% - (var(--container) - 2 * var(--gutter))) / 2)); margin-right: 0; }
.market__copy { display: grid; align-content: start; gap: 0; padding: clamp(40px, 4.9vw, 94px) 40px 0 21px; }
.market__copy .label { margin-bottom: 16px; }
.market__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: 0; max-width: 631px; }
.market__text { max-width: 494px; margin: 64px 0; font-size: var(--fs-body); line-height: 1.6; }
.market__panel {
  --cut: 64px;
  /* 844 at 1920x1080; shorter windows get a shorter panel, and the stacked
     cards below scale with it, so the last card always fits. */
  --ph: min(844px, calc(100svh - 54px));
  position: relative; overflow: hidden; height: var(--ph); margin-right: calc(25px - var(--gutter)); width: calc(100% + var(--gutter) - 25px);
  background: var(--c-deep-blue) url("../assets/video/market-poster-v8.jpg") 50% 50% / cover no-repeat;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.market__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .market__video { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.js .market__video.is-playing { opacity: 1; }
.market__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,22,43,0.04), rgba(14,22,43,0.22)); }
/* Figma at 1138x844: cards 161 from the left, 826 wide, from 92 down, a 126
   step, 282 tall. Kept as shares of the panel so narrower and shorter
   panels hold the same composition. */
.market__cards { position: absolute; left: 14.15%; top: calc(var(--ph) * 0.109); width: 72.6%; height: calc(100% - var(--ph) * 0.109); perspective: 1400px; perspective-origin: 50% 20%; transform-style: preserve-3d; }
.mcard {
  --step: calc(var(--ph) * 0.1493);
  position: absolute; left: 0; width: 100%; min-height: calc(var(--ph) * 0.334);
  display: grid; align-content: start; gap: 0; padding: clamp(24px, 2.08vw, 40px);
  background: var(--c-deep-blue); border-top: 2px solid var(--c-white); color: var(--c-white);
  will-change: transform, opacity;
}
.mcard:nth-child(1) { top: 0; } .mcard:nth-child(2) { top: var(--step); } .mcard:nth-child(3) { top: calc(var(--step) * 2); } .mcard:nth-child(4) { top: calc(var(--step) * 3); }
.mcard__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: 0; }
.mcard__text { padding-top: clamp(20px, calc(var(--ph) * 0.116), 98px); font-size: var(--fs-text-l); line-height: 1.6; max-width: 746px; }
@media (max-width: 1023px) {
  .js .market[data-pinned] { height: auto; }
  .js .market[data-pinned] .market__stage { position: relative; height: auto; overflow: visible; }
  .market__stage { min-height: 0; padding: var(--s-9) 0; display: block; }
  .market__inner { display: grid; grid-template-columns: 1fr; gap: var(--s-7); width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .market__copy { padding: 0; }
  .market__title { font-size: var(--fs-h2); }
  .market__text { margin: var(--s-6) 0; }
  .market__panel { height: auto; width: auto; margin: 0; padding: 20px; --cut: 32px; }
  .market__cards { position: relative; left: 0; top: 0; width: 100%; height: auto; display: grid; gap: 12px; }
  .mcard { position: relative; top: auto !important; min-height: 0; padding: 24px; transform: none !important; opacity: 1 !important; }
  .mcard__text { padding-top: 20px; font-size: var(--fs-body); }
}

/* ---- Leistungen (textured deep blue) --------------------------------- */
/* The Figma fill is a 300px noise tile under #0e162b in linear burn; CSS has
   no linear burn, so the tile ships already burned (identical to Figma's render). */
.opp { position: relative; overflow: clip; background: var(--c-deep-blue) url("../assets/img/texture/opportunity-noise.webp") 0 0 / 300px 300px repeat; color: var(--c-white); }
/* The background is a viewport-tall sticky stage (its own copy of the texture,
   anchored to it, so it holds still); the statement and the rows scroll over it. */
.opp__stage { position: sticky; top: 0; z-index: 1; height: 100svh; margin-bottom: -100svh; overflow: hidden; background: inherit; pointer-events: none; }
/* Stroke shapes placed as in the Figma section (group at 892,571 in a 1920
   frame), scaled with the width; strokes draw with scroll. */
.opp__lines { position: absolute; left: 46.46%; top: 29.7vw; width: 53.53%; height: auto; aspect-ratio: 1027.8 / 1034.9; fill: none; stroke: var(--c-deep-blue-3); stroke-width: 1.5; pointer-events: none; }
.opp__inner { position: relative; z-index: 2; display: grid; gap: var(--s-9); padding-block: var(--s-10); }
.opp .label { color: var(--c-white); }
.opp__statement { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.4; letter-spacing: 0; max-width: 1760px; }
.opp__soft { color: var(--c-beige); }
/* Four rows. On hover a row turns white and a beige icon box slides in at its left. */
.rows { display: grid; gap: 40px; }
.row { display: flex; align-items: stretch; min-height: 170px; }
.row__icon { flex: none; width: 0; margin-right: 0; overflow: hidden; display: grid; place-items: center; background: var(--c-beige); color: var(--c-deep-blue); transition: width 0.6s var(--ease-out), margin-right 0.6s var(--ease-out); }
.row__icon svg { width: 46px; height: 46px; flex: none; }
.row__body {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 616px; align-items: center; gap: 40px;
  padding: 40px 40px 40px 40px;
  background: var(--c-deep-blue); border: 1px solid rgba(255,255,255,0.44); color: var(--c-white);
  transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), padding 0.6s var(--ease-out);
}
.row__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: 0; }
/* The title's button opens the row on phones (main.js); on wide screens it is plain text. */
.row__btn { display: block; padding: 0; text-align: left; cursor: inherit; }
.row__text { font-size: var(--fs-text-l); line-height: 1.6; }
/* Below 1440 the 616px text column would squeeze the titles; the columns
   share the row instead. */
@media (min-width: 1024px) and (max-width: 1439px) { .row__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
@media (hover: hover) {
  .row:hover .row__icon { width: 170px; margin-right: 20px; }
  .row:hover .row__body { background: var(--c-white); color: var(--c-deep-blue); border-color: var(--c-white); padding-left: 60px; }
}
.row.is-on .row__icon { width: 170px; margin-right: 20px; }
.row.is-on .row__body { background: var(--c-white); color: var(--c-deep-blue); border-color: var(--c-white); padding-left: 60px; }
/* Phones and tablets (Figma 4409:2): every row starts closed, a navy bar
   with its title; a tap opens it (one at a time): the beige icon box beside
   the title on white, the text on white underneath, 7px apart. */
@media (max-width: 1023px) {
  .opp__lines { stroke-width: 3; left: 20%; width: 110%; top: 30%; }
  .opp__inner { gap: 56px; }
  .opp__statement { font-size: 1.25rem; line-height: 1.4; }
  .rows { gap: 16px; }
  /* Closed: the icon column and both gaps are 0 and the text row is 0fr.
     Open: they grow to 84px / 7px / 1fr, so the icon box slides in beside
     the title and the text unfolds below it, as the hover does on desktop. */
  .rows .row {
    display: grid; grid-template-columns: 0px minmax(0, 1fr); grid-template-rows: auto 0fr; column-gap: 0; row-gap: 0;
    min-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: grid-template-columns 0.6s var(--ease-out), grid-template-rows 0.6s var(--ease-out), column-gap 0.6s var(--ease-out), row-gap 0.6s var(--ease-out);
  }
  .rows .row.is-on { grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 7px; row-gap: 7px; }
  /* After the reveal, [data-cards] sets its own transition list on the
     rows; keep the reveal's opacity/transform and add the grid tracks. */
  .js .rows[data-cards].is-in > .row { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), grid-template-columns 0.6s var(--ease-out), grid-template-rows 0.6s var(--ease-out), column-gap 0.6s var(--ease-out), row-gap 0.6s var(--ease-out); }
  .row__body { display: contents; }
  .rows .row .row__icon { display: grid; grid-column: 1; grid-row: 1; width: auto; height: auto; min-height: 101px; margin: 0; overflow: hidden; transition: none; }
  .rows .row .row__icon svg { transform: scale(0.6) rotate(-12deg); opacity: 0; transition: transform 0.6s var(--ease-out), opacity 0.4s var(--ease-out); }
  .rows .row.is-on .row__icon svg { transform: none; opacity: 1; transition-delay: 0.15s; }
  .row__title {
    grid-column: 2; grid-row: 1; display: flex; align-items: center; min-height: 101px; padding: 12px 20px 12px 40px;
    background: var(--c-deep-blue); border-top: 0.5px solid rgba(255, 255, 255, 0.44); color: var(--c-white); font-size: 2rem; line-height: 1.2;
    transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), padding 0.6s var(--ease-out);
  }
  .row__btn { all: unset; display: block; width: 100%; cursor: pointer; }
  .row__btn:focus-visible { outline: 2px solid var(--c-beige); outline-offset: 6px; }
  .row__text {
    grid-column: 1 / -1; grid-row: 2; min-height: 0; overflow: hidden; padding: 0 20px;
    background: var(--c-white); color: var(--c-deep-blue); font-size: 1.25rem; line-height: 1.6;
    opacity: 0; transform: translateY(-10px);
    transition: padding 0.6s var(--ease-out), opacity 0.35s var(--ease-out), transform 0.6s var(--ease-out);
  }
  .row.is-on .row__title { padding-left: 20px; background: var(--c-white); color: var(--c-deep-blue); border-top-color: transparent; }
  .row.is-on .row__text { padding: 40px 20px; opacity: 1; transform: none; transition-delay: 0s, 0.12s, 0.05s; }
}

/* ---- Kunden (news layout) -------------------------------------------- */
.news { padding-block: clamp(5rem, 7.3vw, 8.75rem); background: var(--c-paper); color: var(--c-deep-blue); }
.news__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); margin-bottom: var(--s-9); }
.news__cta { flex: none; }
.news__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: 0; margin-top: var(--s-6); max-width: 1018px; }
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.card-news { display: grid; grid-template-rows: auto auto 1fr; gap: 24px; align-content: start; color: inherit; text-decoration: none; }
.card-news__media { --cut: 44px; position: relative; display: block; aspect-ratio: 545 / 343; overflow: hidden; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.card-news__media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; transition: transform 1s var(--ease-out), filter 1s var(--ease-out); }
.card-news__media::after { content: ""; position: absolute; inset: 0; background: var(--c-deep-blue); opacity: 0; transition: opacity 0.6s var(--ease-out); }
.card-news__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-4); }
.card-news__note { flex: none; }
.card-news__title { position: relative; display: block; font-size: var(--fs-body); line-height: 1.6; opacity: 0.8; padding-bottom: var(--s-3); }
.card-news__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.6s var(--ease-out); }
.card-news:hover .card-news__media img { transform: scale(1.06); filter: saturate(1.1); }
.card-news:hover .card-news__media::after { opacity: 0.18; }
.card-news:hover .tag { background: var(--c-deep-blue); color: var(--c-white); }
.card-news:hover .card-news__title::after { transform: scaleX(1); }
@media (max-width: 1023px) { .news__grid { grid-template-columns: 1fr; gap: var(--s-7); } .news__head { flex-direction: column; align-items: flex-start; } .news__title { font-size: 2rem; } }

/* ---- FAQ --------------------------------------------------------------- */
.faq { padding-block: 40px; background: var(--c-paper); color: var(--c-deep-blue); }
/* The FAQ column is 564 at 1920 and narrows with the page so the questions
   keep a comfortable measure on laptops and tablets. */
.faq__inner { display: grid; grid-template-columns: clamp(200px, 29.4vw, 564px) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.faq__side { position: sticky; top: 40px; }
.faq__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h1); line-height: 1; letter-spacing: 0; }
.faq__main { display: grid; gap: var(--s-9); }
.faq__list { display: grid; gap: 8px; }
.faq__item { background: rgba(14,22,43,0.06); border: 1px solid rgba(14,22,43,0.16); }
.faq__q { width: 100%; min-height: 90px; display: grid; grid-template-columns: auto 1fr 40px; align-items: center; gap: 40px; padding: 24px 24px 24px 16px; text-align: left; }
.faq__num { min-width: 2ch; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.faq__label { font-size: var(--fs-h5); font-weight: 500; line-height: 1.3; }
.faq__plus { position: relative; width: 40px; height: 40px; background: var(--c-deep-blue); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-white); transform: translate(-50%, -50%); transition: transform var(--dur-base) var(--ease-out); }
.faq__plus::before { width: 14px; height: 1.4px; } .faq__plus::after { width: 1.4px; height: 14px; }
.faq__q[aria-expanded="true"] .faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__a { padding: 0 24px 28px calc(16px + 2ch + 40px); font-size: var(--fs-body); line-height: 1.6; opacity: 0.85; max-width: 72ch; }
.faq__a[hidden] { display: none; }
.faq__reach { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-5); }
.faq__reach .label--caps { font-size: var(--fs-body); letter-spacing: 0; }
@media (max-width: 1023px) {
  .faq { padding-block: var(--s-9); }
  .faq__inner { grid-template-columns: 1fr; }
  .faq__side { position: static; }
  .faq__q { gap: 16px; min-height: 64px; padding: 16px 12px 16px 12px; }
  .faq__label { font-size: 1.125rem; }
  .faq__a { padding-left: 12px; }
  .faq__reach { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---- Beratung anfragen (Funnel 1) ------------------------------------- */
.funnel { padding-block: 100px; background: var(--c-paper); color: var(--c-white); }
.funnel__panel {
  --cut: 65px;
  position: relative; min-height: 822px;
  /* The copy keeps 340px at least; the form (803 at 1920) gives way. */
  display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 803px); gap: var(--s-8); align-items: start;
  padding: clamp(64px, 5.3vw, 102px) clamp(40px, 4.16vw, 80px) clamp(64px, 5.2vw, 100px);
  background: var(--c-deep-blue);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.funnel .label { color: var(--c-white); }
.funnel__copy { display: grid; gap: 32px; max-width: 656px; }
.funnel__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: 0; }
.funnel__text { max-width: 499px; font-size: var(--fs-text-l); line-height: 1.6; }
.form { display: grid; gap: 24px; padding-top: 52px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field { display: grid; gap: 8px; align-content: start; }
.field label, .field legend { font-size: var(--fs-small); color: var(--c-beige-2); }
.field input { width: 100%; height: 48px; padding: 0 16px; color: var(--c-white); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.11); border-radius: var(--r-1); font-size: var(--fs-text-l); transition: border-color var(--dur-fast), background var(--dur-fast); }
.field input::placeholder { color: rgba(255,255,255,0.5); }
.field input:focus { outline: none; border-color: var(--c-beige); background: rgba(255,255,255,0.09); }
.field input[aria-invalid="true"] { border-color: var(--c-error); }
.field__hint { font-size: var(--fs-caps); color: rgba(255,255,255,0.46); }
.options { display: flex; flex-wrap: wrap; gap: 8px; }
.option { position: relative; display: inline-flex; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.11); font-size: var(--fs-text-l); color: var(--c-white); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.option:hover span { border-color: rgba(255,255,255,0.4); }
.option input:checked + span { background: var(--c-beige); color: var(--c-deep-blue); border-color: var(--c-beige); }
.option input:focus-visible + span { outline: 2px solid var(--c-beige); outline-offset: 2px; }
.consent { display: flex; align-items: flex-start; gap: 12px; padding-top: 8px; font-size: var(--fs-caps); line-height: 1.45; cursor: pointer; }
.consent input { flex: none; appearance: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--c-white); background: transparent; display: grid; place-items: center; cursor: pointer; }
.consent input:checked { background: var(--c-beige); border-color: var(--c-beige); }
.consent input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--c-deep-blue); border-top: 0; border-right: 0; transform: translateY(-2px) rotate(-45deg); }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.field__error { font-size: var(--fs-small); color: var(--c-error); }
.field__error:empty { display: none; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding-top: 32px; }
.form__status { font-size: var(--fs-small); color: var(--c-beige-2); }
.form__status:empty { display: none; }
@media (max-width: 1279px) { .funnel__panel { grid-template-columns: 1fr; } .form { padding-top: 0; } }
@media (max-width: 1023px) {
  .funnel { padding-block: var(--s-9); }
  .funnel__panel { min-height: 0; padding: var(--s-8) var(--s-5) var(--s-8); --cut: 36px; gap: var(--s-7); }
  .form__row { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Footer ------------------------------------------------------------ */
.footer { overflow: hidden; min-height: min(754px, 100svh); padding-top: 125px; color: var(--c-white); background: var(--c-deep-blue); }
/* The lines are the footer's bottom layer: everything else paints over them. */
.footer__lines { position: absolute; z-index: 0; top: -5.9%; left: 29.9%; width: 51.5%; height: auto; aspect-ratio: 1111.22 / 1210.65; fill: none; stroke: #2e3750; stroke-width: 1.42; pointer-events: none; }
.footer__inner { position: relative; z-index: 1; display: grid; gap: 96px; padding-bottom: 125px; }
.footer__cols { display: flex; gap: 40px; }
.footer__block { width: 376px; max-width: 100%; display: grid; gap: 24px; align-content: start; justify-items: start; }
.footer__head { font-size: var(--fs-body); line-height: 1.6; color: var(--c-beige-2); }
.footer__mail { font-size: var(--fs-h5); font-weight: 500; line-height: 1.3; color: var(--c-white); }
.footer__address { font-size: 1.125rem; line-height: 1.5; color: var(--c-beige-2); }
.footer__social { display: flex; gap: 24px; margin-top: 56px; font-size: 1.25rem; font-weight: 500; }
.footer__links2 { display: grid; grid-template-columns: 140px 140px; gap: 96px; }
.footer__links2 div { display: grid; gap: 12px; justify-items: start; }
.footer__links2 a { font-size: var(--fs-h5); font-weight: 500; line-height: 1.3; color: var(--c-white); }
.footer__bottom { display: flex; align-items: flex-end; gap: 97px; }
.footer__brand { display: flex; align-items: center; gap: 16px; }
.footer__copy { font-size: var(--fs-body); line-height: 1.6; color: var(--c-beige-2); }
.footer__legal { display: flex; gap: 24px; font-size: var(--fs-body); }
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
.footer a { position: relative; }
/* The wordmark stands on its side at the right edge, centred on the footer. */
.footer__mark { position: absolute; z-index: 1; right: 0; top: 50%; width: clamp(160px, 16.25vw, 312px); height: clamp(384px, 39vw, 749px); transform: translateY(-50%); pointer-events: none; }
.footer__wordmark {
  position: absolute; left: 50%; top: 50%; display: block; width: clamp(384px, 39vw, 749px); height: clamp(160px, 16.25vw, 312px);
  transform: translate(-50%, -50%) rotate(-90deg); fill: var(--c-white); overflow: visible;
}
@media (max-width: 1023px) {
  /* On phones the footer is taller than the window: pinned, its top would
     never show, so it follows the page instead. */
  .footer { position: relative; min-height: 0; padding-top: var(--s-9); }
  .footer__inner { gap: var(--s-8); padding-bottom: var(--s-9); }
  .footer__cols { flex-direction: column; gap: var(--s-8); }
  .footer__block { width: 100%; }
  .footer__social { margin-top: var(--s-5); line-height: 1.3; }
  .footer__links2 { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-6); }
  .footer__lines { top: auto; bottom: 0; left: 8%; width: 110%; }
  .footer__mark { position: relative; right: auto; top: auto; transform: none; width: auto; height: auto; margin: var(--s-4) var(--gutter) var(--s-6); }
  .footer__wordmark { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; aspect-ratio: 519.562 / 216.333; }
}

/* ---- Section entrance / exit (JS scrubs; no JS = static) --------------- */
.js [data-fx] { will-change: transform, opacity, filter; }
.js [data-fx] > * { will-change: transform, opacity, filter; }
.split-word > span { will-change: transform, filter; }

/* ---- Reveal defaults (JS animates; no JS = visible) ------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-cards] > * { opacity: 0; transform: translateY(28px); }
.js [data-cards].is-in > * { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), flex-grow 0.7s var(--ease-out); }
.js [data-cards].is-in > :nth-child(2) { transition-delay: 90ms, 90ms, 0ms; }
.js [data-cards].is-in > :nth-child(3) { transition-delay: 180ms, 180ms, 0ms; }
.js [data-cards].is-in > :nth-child(4) { transition-delay: 270ms, 270ms, 0ms; }
.js [data-cards].is-in > :nth-child(5) { transition-delay: 360ms, 360ms, 0ms; }
.js [data-cards].is-in > :nth-child(6) { transition-delay: 450ms, 450ms, 0ms; }
/* The cards of Warum EVO keep the reveal, then the transition is theirs. */
.js .why__cards.is-in > * { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), flex-grow 0.7s var(--ease-out); }

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js [data-reveal], .js [data-cards] > * { opacity: 1; transform: none; }
  .js .hero__poster { opacity: 1; }
  .hero__canvas { display: none; }
  .hero { height: auto; margin-bottom: 0; }
  .hero__stage { position: relative; }
  .fly { position: relative; visibility: visible; opacity: 1; padding-block: var(--s-9); }
  .fly__item { opacity: 1; transform: none; }
  .js .market[data-pinned] { height: auto; }
  .js .market[data-pinned] .market__stage { position: relative; height: auto; }
  .mcard { position: relative; top: auto !important; transform: none !important; opacity: 1 !important; }
  .market__cards { position: relative; display: grid; gap: 12px; height: auto; }
}