@font-face {
  font-family: "Hanken Faltung";
  src: url("/assets/hanken-grotesk-latin-wght-normal-CaVRRdDk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root { color-scheme: light; --faltung-ground: #f7f8fa; --faltung-ink: #22212a; --faltung-rail: clamp(24px, 5.4vw, 108px); }
.faltung-world { background: var(--faltung-ground); isolation: isolate; }
.faltung-hero { position: relative; display: grid; place-items: center; height: 100svh; min-height: 740px; overflow: hidden; color: var(--faltung-ink); font-family: "Hanken Faltung", Arial, sans-serif; }
.faltung-frame { position: absolute; inset: 0 var(--faltung-rail); border-inline: 1px solid rgb(34 33 42 / .1); pointer-events: none; }
.faltung-header { position: absolute; z-index: 3; inset: 0 var(--faltung-rail) auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px clamp(22px, 3.4vw, 60px); border-bottom: 1px solid rgb(34 33 42 / .1); }
.faltung-wordmark { padding-block: 11px; font-size: 23px; font-weight: 700; letter-spacing: -.065em; text-decoration: none; white-space: nowrap; }
.faltung-wordmark span { font-weight: 450; }
.faltung-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 52px); font-size: 14px; }
.faltung-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; text-underline-offset: 6px; }
.faltung-nav a:hover { text-decoration: underline; }
.faltung-hero a:focus-visible, .motion-toggle:focus-visible { outline: 2px solid #365f78; outline-offset: 6px; }
.faltung-content { position: relative; z-index: 2; width: min(100% - 2 * var(--faltung-rail) - 40px, 1160px); padding-top: 60px; padding-bottom: 28px; text-align: center; }
.faltung-eyebrow { margin: 0 0 27px; font-size: 12px; font-weight: 550; letter-spacing: .15em; text-transform: uppercase; }
.faltung-title { margin: 0; font-size: clamp(65px, 7.4vw, 142px); font-weight: 400; line-height: .92; letter-spacing: -.062em; text-transform: uppercase; }
.faltung-title span { display: block; }
.faltung-description { max-width: 560px; margin: 34px auto 0; font-size: clamp(17px, 1.3vw, 21px); font-weight: 400; line-height: 1.45; text-wrap: balance; }
.faltung-cta { display: inline-flex; align-items: center; justify-content: center; min-width: 232px; min-height: 62px; margin-top: 43px; padding: 16px 28px; border: 1px solid #34313d; background: rgb(247 248 250 / .5); text-decoration: none; font-size: 13px; font-weight: 550; line-height: 1.3; text-transform: uppercase; letter-spacing: .115em; transition: background-color 180ms ease, color 180ms ease; }
.faltung-cta:hover { background: #22212a; color: #fff; }
.faltung-cta:active { background: #365363; }
.folds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.folds::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 37% 39% at 50% 53%, rgb(247 248 250 / .95) 0%, rgb(247 248 250 / .85) 43%, rgb(247 248 250 / .22) 80%, transparent 100%), linear-gradient(180deg, rgb(247 248 250 / .65), transparent 20%, transparent 86%, var(--faltung-ground)); }
.fold { position: absolute; left: var(--x); top: var(--y); width: var(--size); margin-left: calc(var(--size) / -2); }
.faltung-hero[data-motion] .fold { top: 0; animation: fold-travel var(--duration) linear var(--start) infinite; animation-play-state: paused; }
.fold-turn { transform: rotate(var(--angle)); animation: fold-turn 44s ease-in-out var(--phase) infinite alternate; animation-play-state: paused; }
.fold svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 17px rgb(43 69 85 / .055)); }
.faltung-hero[data-motion="running"] .fold, .faltung-hero[data-motion="running"] .fold-turn { animation-play-state: running; }
.motion-toggle { position: absolute; z-index: 3; right: calc(var(--faltung-rail) + 24px); bottom: 24px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(34 33 42 / .22); border-radius: 50%; padding: 0; background: rgb(247 248 250 / .85); color: #34313d; cursor: pointer; transition: background-color 180ms ease; }
.motion-toggle[hidden], .motion-toggle .play-icon { display: none; }
.motion-toggle:hover { background: #e4ebef; }
.motion-toggle[data-paused="true"] .pause-icon { display: none; }
.motion-toggle[data-paused="true"] .play-icon { display: block; }
.faltung-world > .pixel-cut { margin-top: -1px; background: var(--faltung-ground); }

/* One full circuit takes 231–285 seconds: 5.6–6.9 px/s at 900px.
   Both endpoints are outside the clipped hero; copy never moves. */
@keyframes fold-travel {
  from { transform: translate3d(calc(-1 * var(--drift)), calc(100svh + 350px), 0); }
  to { transform: translate3d(var(--drift), -350px, 0); }
}
@keyframes fold-turn {
  from { transform: rotate(calc(var(--angle) - 9deg)) rotateY(-14deg); }
  to { transform: rotate(calc(var(--angle) + 9deg)) rotateY(14deg); }
}
@media (min-width: 2100px) { .fold { width: calc(var(--size) * 1.3); } }
@media (max-width: 1100px) {
  .faltung-hero { min-height: 700px; }
  .faltung-title { font-size: clamp(62px, 7.6vw, 84px); }
  .fold { width: calc(var(--size) * .8); }
  .faltung-description { max-width: 500px; }
}
@media (max-width: 700px) {
  :root { --faltung-rail: 19px; }
  .faltung-hero { min-height: 680px; }
  .faltung-header { padding: 15px 15px; gap: 14px; }
  .faltung-wordmark { font-size: 18px; }
  .faltung-nav { gap: 17px; font-size: 11px; }
  .faltung-content { width: calc(100% - 52px); padding-top: 35px; padding-bottom: 0; }
  .faltung-eyebrow { margin-bottom: 24px; font-size: 10px; }
  .faltung-title { font-size: clamp(38px, 8.5vw, 61px); line-height: .98; letter-spacing: -.065em; }
  .faltung-description { width: min(100%, 360px); margin-top: 27px; font-size: 16px; line-height: 1.5; }
  .faltung-cta { min-width: 195px; min-height: 56px; margin-top: 31px; font-size: 11px; }
  .fold { width: calc(var(--size) * .58); margin-left: calc(var(--size) * -.29); }
  .fold:nth-child(3), .fold:nth-child(5), .fold:nth-child(10) { display: none; }
  .folds::after { background: radial-gradient(ellipse 75% 35% at 50% 51%, rgb(247 248 250 / .96) 10%, rgb(247 248 250 / .86) 52%, transparent 100%), linear-gradient(180deg, rgb(247 248 250 / .65), transparent 20%, transparent 86%, var(--faltung-ground)); }
  .motion-toggle { right: 33px; bottom: 22px; }
}
@media (max-width: 370px) {
  :root { --faltung-rail: 12px; }
  .faltung-header { padding-inline: 12px; gap: 10px; }
  .faltung-wordmark { font-size: 16px; }
  .faltung-nav { gap: 12px; font-size: 10px; }
  .faltung-content { width: calc(100% - 42px); }
  .faltung-title { font-size: 36px; }
  .faltung-description { font-size: 15px; }
  .motion-toggle { right: 26px; }
}
@media (max-height: 760px) and (min-width: 1101px) {
  .faltung-hero { min-height: 620px; }
  .faltung-title { font-size: 86px; }
  .faltung-eyebrow { margin-bottom: 22px; }
  .faltung-description { margin-top: 25px; }
  .faltung-cta { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .faltung-hero[data-motion] .fold, .fold, .fold-turn { animation: none; top: var(--y); }
  .motion-toggle { display: none; }
  .faltung-cta { transition: none; }
}