@font-face{font-family:Instrument Serif;src:url('/showcase-static/noctra/fonts/instrument-serif-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Instrument Serif;src:url('/showcase-static/noctra/fonts/instrument-serif-italic-latin.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
:root{--scene-ground:#0c0c10;--scene-ink:#f4f1ea;--scene-accent:#c4b2fa;--scene-muted:#aaa7b2}
body{background:var(--scene-ground)}
button{font:inherit}
.scene-world{background:var(--scene-ground);overflow:hidden;isolation:isolate}
.facetten-hero{--tile-height:clamp(88px,calc((100svh - 500px)/4),180px);--gallery-gap:12px;min-height:100svh;color:var(--scene-ink);display:flex;flex-direction:column;padding-bottom:8px}
.scene-header{height:72px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-inline:clamp(24px,4.7vw,90px)}
.scene-wordmark{font-size:17px;font-weight:600;letter-spacing:-.045em;text-decoration:none;line-height:1.1}
.scene-wordmark span{font-family:Instrument Serif,Georgia,serif;font-size:25px;font-style:italic;font-weight:400;letter-spacing:-.015em}
.scene-nav{display:flex;gap:32px;font-size:12px;font-weight:450}
.scene-navigation{display:flex;align-items:center;gap:20px}
.scene-nav a{padding-block:14px;text-decoration:none;color:#d6d3dc;text-underline-offset:6px}
.scene-nav a:hover{text-decoration:underline;color:#fff}
.gallery{display:grid;grid-template-rows:repeat(2,var(--tile-height));gap:var(--gallery-gap);width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-row{height:var(--tile-height);overflow:hidden}
.marquee-track{display:flex;width:max-content;height:100%;animation:gallery-drift var(--duration,68s) linear infinite;animation-delay:var(--delay,0s);animation-play-state:paused;will-change:transform}
.marquee-row[data-direction=right] .marquee-track{animation-direction:reverse}
.marquee-group{display:flex;gap:var(--gallery-gap);padding-right:var(--gallery-gap);flex:none;height:100%}
.portrait{width:calc(var(--tile-height)*1.5);height:100%;margin:0;flex:none;overflow:hidden;border-radius:10px;background:#242329}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.facetten-hero[data-motion=running] .gallery[data-visible=true] .marquee-track{animation-play-state:running}
@keyframes gallery-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.scene-copy{position:relative;text-align:center;padding:22px 24px 25px;margin:auto 0;flex:none}
.scene-eyebrow{margin:0 0 12px;color:var(--scene-muted);font-size:10px;font-weight:500;line-height:1.4;letter-spacing:.25em;text-transform:uppercase}
.scene-copy h1{margin:0;font-family:Instrument Serif,Georgia,serif;font-weight:400;font-size:clamp(64px,6.1vw,98px);line-height:.91;letter-spacing:-.035em}
.scene-copy h1 span{--title-shift:clamp(64px,7vw,144px);display:block;transform:translateX(calc(-1*var(--title-shift)))}
.scene-copy h1 span+span{transform:translateX(var(--title-shift))}
.scene-copy h1 em{font-weight:400;color:var(--scene-accent)}
.scene-description{max-width:520px;margin:18px auto 0;color:#bcb9c4;font-size:15px;line-height:1.55;text-wrap:pretty}
.scene-cta{display:inline-flex;align-items:center;justify-content:center;min-width:180px;min-height:48px;margin-top:18px;padding:13px 30px;border:1px solid var(--scene-accent);border-radius:99px;background:var(--scene-accent);color:#17131f;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.065em;transition:background-color 180ms ease,color 180ms ease,transform 180ms ease}
.scene-cta:hover{background:#e0d4ff;color:#0c0c10;transform:translateY(-2px)}
.scene-cta:active{transform:translateY(0)}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:44px;padding:10px;border:0;background:none;color:var(--scene-muted);cursor:pointer;flex:none}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{color:var(--scene-ink)}
.motion-toggle:focus-visible{outline:2px solid var(--scene-accent);outline-offset:3px;border-radius:3px}
.motion-icon{width:9px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.motion-toggle[aria-pressed=true] .motion-icon{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor;border-right:0}
.scene-world .pixel-cut{margin-top:18px}
@media(min-width:1900px){.facetten-hero{--tile-height:clamp(112px,calc((100svh - 540px)/4),190px)}.scene-copy{padding-block:28px}.scene-copy h1{font-size:112px}.scene-description{font-size:15px;max-width:540px}.scene-cta{font-size:12px;min-height:48px}}
@media(min-width:761px) and (max-height:850px){
  .facetten-hero{--tile-height:clamp(64px,calc((100svh - 405px)/4),112px)}
  .scene-header{height:60px}
  .scene-copy{padding-block:16px}
  .scene-copy h1{font-size:clamp(64px,5.5vw,82px);line-height:.92}
  .scene-eyebrow{margin-bottom:10px}
  .scene-description{font-size:13px;line-height:1.5;margin-top:12px;max-width:470px}
  .scene-cta{min-height:44px;margin-top:14px;padding-block:11px}
}
@media(max-width:760px){
  .facetten-hero{--tile-height:clamp(78px,10svh,102px);--gallery-gap:8px;min-height:100svh;padding-bottom:6px}
  .scene-header{height:66px;padding-inline:22px;gap:18px}
  .scene-wordmark{font-size:14px}.scene-wordmark span{font-size:21px}
  .scene-nav{gap:18px;font-size:11px}.scene-nav a{padding-block:15px}
  .scene-navigation{gap:8px}.motion-toggle{width:28px;padding:8px}
  .gallery{mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .portrait{border-radius:7px}
  .scene-copy{padding:25px 20px 28px}
  .scene-copy h1{font-size:clamp(56px,12vw,80px);line-height:.96;letter-spacing:-.04em}
  .scene-copy h1 span{--title-shift:clamp(14px,5vw,32px)}
  .scene-eyebrow{font-size:9px;letter-spacing:.2em;margin-bottom:14px}
  .scene-description{max-width:355px;font-size:12px;line-height:1.6;margin-top:17px}
  .scene-cta{min-height:46px;font-size:11px;margin-top:18px;padding-inline:27px}
  .scene-world .pixel-cut{margin-top:22px}
}
@media(max-width:380px){.scene-header{padding-inline:16px;gap:12px}.scene-nav{gap:12px;font-size:10px}.scene-wordmark{font-size:12px}.scene-wordmark span{font-size:19px}.scene-copy{padding-inline:18px}.scene-copy h1{font-size:53px}.scene-description{font-size:11.5px;max-width:285px}.scene-navigation{gap:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene-cta{transition:none}.scene-cta:hover{transform:none}}