:root {
  --ink: #070707;
  --ink-soft: #101012;
  --bone: #f2efe8;
  --bone-dim: #d8d3c8;
  --paper: #e8e3d9;
  --blue: #315fe8;
  --blue-bright: #7697ff;
  --copper: #b8784e;
  --copper-bright: #dea071;
  --muted: #9ea3ad;
  --line: rgba(245, 242, 235, .2);
  --line-dark: rgba(7, 7, 7, .18);
  --max: 1560px;
  --pad: clamp(22px, 4.4vw, 72px);
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --serif: "Iowan Old Style", Baskerville, "Palatino Linotype", Palatino, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: auto; background: var(--ink); }
body { margin: 0; overflow-x: clip; background: var(--ink); color: var(--bone); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
em { font-family: var(--serif); font-weight: 400; }
main > section:not(.hero) { scroll-margin-top: 78px; }

.skip-link { position: fixed; z-index: 1000; top: 0; left: 16px; display: inline-flex; padding: 14px 18px; background: var(--bone); color: var(--ink); text-decoration: none; transform: translateY(-110%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 4px; }
main[tabindex="-1"]:focus { outline: none; }

.section-shell { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--pad); }
.section-index, .eyebrow, .overline, .story-kicker { margin: 0; font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.section-index { color: var(--blue); }
.section-index.copper { color: var(--copper-bright); }
.light-section .section-index { color: #2349bd; }
.overline { color: rgba(7, 7, 7, .67); }

.site-header { position: fixed; z-index: 100; inset: 0 var(--pad) auto; height: 78px; display: flex; align-items: center; border-bottom: 1px solid var(--line); isolation: isolate; transform: translate3d(0,0,0); transition: background-color .3s ease, border-color .3s ease; }
.site-header::before { content: ""; position: fixed; z-index: -1; inset: 0 0 auto; height: 78px; background: rgba(7, 7, 7, .68); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); }
.wordmark { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--bone); font-size: 17px; font-weight: 300; letter-spacing: -.045em; text-decoration: none; white-space: nowrap; transform: translate3d(0,0,0); }
.wordmark img { width: 34px; height: 34px; flex: 0 0 34px; }
.wordmark .brand-name { display: inline-block; }
.wordmark strong { font-weight: 620; }
.site-footer .wordmark img { width: 30px; height: 30px; flex-basis: 30px; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(20px, 2.35vw, 38px); }
.desktop-nav a, .mobile-nav a { position: relative; color: rgba(242, 239, 232, .78); font-size: 13px; text-decoration: none; }
.desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 1px; background: var(--blue-bright); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.language-switch { display: flex; gap: 10px; margin-left: clamp(20px, 2.3vw, 34px); padding-left: clamp(18px, 2vw, 30px); border-left: 1px solid var(--line); font-size: 10px; letter-spacing: .14em; }
.language-switch a, .language-switch span { text-decoration: none; color: rgba(242, 239, 232, .68); }
.language-switch [aria-current="page"] { color: var(--bone); }
.menu-toggle, .mobile-nav { display: none; }

.hero { --portal-progress: 0; --camera-track: 0; --camera-dolly: 0; --camera-right: 0; --camera-turn: 0; --copy-exit: 0; --label-exit: 0; --control-collapse: 0; --route-exit: 0; --pointer-x: 0; --pointer-y: 0; --route-progress: .08; --zone-spread: 0; position: relative; height: 420svh; background: var(--ink); }
.hero-stage { position: sticky; top: 0; min-height: 720px; height: 100svh; overflow: hidden; isolation: isolate; perspective: 1500px; perspective-origin: calc(72% + var(--camera-turn) * 14%) 52%; background: var(--ink); }



.world-shade { position: absolute; z-index: -8; inset: 0; background: linear-gradient(90deg, rgba(7,7,7,.97) 0%, rgba(7,7,7,.87) 29%, rgba(7,7,7,.28) 54%, rgba(7,7,7,.02) 76%), linear-gradient(0deg, rgba(7,7,7,.72) 0%, transparent 35%, rgba(7,7,7,.1) 72%, rgba(7,7,7,.5) 100%); opacity: 1; pointer-events: none; }






























.hero-grid { position: absolute; z-index: -1; inset: 78px var(--pad) 0; border-inline: 1px solid rgba(242,239,232,.08); opacity: calc(1 - var(--copy-exit) * .82); pointer-events: none; }
.hero-grid::before, .hero-grid::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(242,239,232,.07); }
.hero-grid::before { left: 33.333%; }
.hero-grid::after { left: 66.666%; }

.hero-copy { position: absolute; z-index: 4; left: var(--pad); top: clamp(116px, 16vh, 170px); width: min(650px, 48vw); transform: translateY(calc(var(--copy-exit) * -32px)); opacity: calc(1 - var(--copy-exit)); will-change: transform, opacity; }
.hero-copy:focus-within { transform: none; opacity: 1; }
.eyebrow { color: var(--copper-bright); }
.hero h1 { margin: 24px 0 28px; font-size: clamp(54px, 6.3vw, 100px); line-height: .96; font-weight: 400; letter-spacing: -.062em; }
.hero h1 span { display: block; white-space: nowrap; }
.hero h1 span:last-child { margin-top: .16em; color: var(--bone-dim); font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; }
.hero-deck { max-width: 560px; margin: 0; color: rgba(242,239,232,.72); font-size: clamp(16px, 1.32vw, 21px); line-height: 1.5; letter-spacing: -.018em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 4vh, 38px); }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 0 22px; border: 1px solid transparent; border-radius: 3px; color: var(--bone); font-size: 14px; font-weight: 560; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); }
.button-primary:hover { background: #456de8; }
.button-ghost { background: rgba(7,7,7,.3); border-color: rgba(242,239,232,.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.button-ghost:hover { background: rgba(242,239,232,.09); border-color: rgba(242,239,232,.7); }
.hero-proof { max-width: 510px; margin: 22px 0 0; padding-left: 16px; border-left: 1px solid var(--copper); color: rgba(242,239,232,.62); font-size: 12px; line-height: 1.45; }

.portal-story { position: absolute; z-index: 5; bottom: 86px; left: var(--pad); right: var(--pad); padding: 0; color: var(--bone); }
.story-kicker { margin: 0 0 16px; color: rgba(242,239,232,.6); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.portal-story ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; }
.portal-story li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 15px 0 0; border-top: 1px solid rgba(242,239,232,.3); color: rgba(242,239,232,.65); }
.portal-story li > span { grid-row: span 2; color: currentColor; font-size: 10px; }
.portal-story strong { font-size: 15px; font-weight: 520; }
.portal-story small { max-height: none; color: rgba(242,239,232,.7); font-size: 12px; line-height: 1.5; opacity: 1; }
.hero[data-portal-state="threshold"] [data-story-step="0"], .hero[data-portal-state="build"] [data-story-step="1"], .hero[data-portal-state="verify"] [data-story-step="2"], .hero[data-portal-state="handover"] [data-story-step="3"] { color: var(--bone); transform: translateX(-4px); }
.hero[data-portal-state="threshold"] [data-story-step="0"] small, .hero[data-portal-state="build"] [data-story-step="1"] small, .hero[data-portal-state="verify"] [data-story-step="2"] small, .hero[data-portal-state="handover"] [data-story-step="3"] small { max-height: none; opacity: 1; }

.hero-interface { position: absolute; z-index: 6; right: var(--pad); bottom: 30px; left: var(--pad); display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 20px; }
.portal-status { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.portal-status span { color: var(--copper-bright); font-size: 10px; letter-spacing: .14em; }
.portal-status strong { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 36px); font-weight: 400; }
.replay-button { display: none; min-width: 40px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(242,239,232,.32); border-radius: 999px; background: rgba(7,7,7,.36); color: rgba(242,239,232,.84); cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.motion-ready .replay-button { display: inline-flex; align-items: center; gap: 10px; }

.replay-label { display: block; white-space: nowrap; }
.replay-button:hover { border-color: var(--blue-bright); color: var(--bone); }
.replay-button.is-playing { border-color: var(--copper-bright); color: var(--copper-bright); }
.scroll-cue { display: flex; align-items: center; gap: 10px; margin: 0; color: rgba(242,239,232,.55); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; opacity: calc(1 - var(--copy-exit) * 2.7); transform: translateX(calc(var(--copy-exit) * 24vw)); will-change: transform, opacity; }
.scroll-cue i { width: 28px; height: 1px; background: var(--blue-bright); transform-origin: left;  }

@keyframes cue-line { 0%, 100% { transform: scaleX(.35); opacity: .35; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes replay-spin { to { transform: rotate(360deg); } }

.hero-ending { position:absolute; z-index:4; top:clamp(124px,22vh,230px); left:var(--pad); width:min(580px,44vw); opacity:var(--ending-entry,0); transform:translateY(calc((1 - var(--ending-entry,0)) * 28px)); }
.hero-ending h2 { margin:24px 0; font-size:clamp(48px,5.5vw,88px); line-height:1; letter-spacing:-.05em; font-weight:400; }
.hero-ending h2 em { font-family:var(--serif); font-weight:400; color:var(--bone-dim); }
.hero-ending p { max-width:40ch; color:rgba(242,239,232,.78); font-size:18px; line-height:1.6; }
.hero-ending .button { margin-top:28px; }
.portal-story li::before { content:""; position:absolute; top:-1px; left:0; height:1px; width:calc(var(--chapter-fill,0) * 100%); background:var(--copper-bright); }
@media(min-width:821px) and (max-height:800px) { .hero-copy { top:112px; } .hero h1 { font-size:clamp(50px,5.2vw,72px); margin:16px 0; } .hero-deck { font-size:16px; } .hero-actions { margin-top:20px; } .portal-story { bottom:72px; } .story-kicker { display:none; } .hero-ending { top:145px; } }
.light-section { color: var(--ink); background: var(--paper); }
.studio-section { position: relative; z-index: 5; padding: clamp(110px, 14vw, 220px) 0; }
.studio-layout { display: grid; grid-template-columns: minmax(110px, .35fr) 1.72fr .78fr; gap: clamp(30px, 4.5vw, 78px); align-items: start; }
.studio-head h2 { margin: 30px 0 0; max-width: 980px; font-family: var(--serif); font-size: clamp(43px, 4.8vw, 78px); line-height: 1.01; font-weight: 400; letter-spacing: -.055em; }
.studio-copy { padding-top: 45px; }
.studio-copy > p { margin: 0; color: rgba(7,7,7,.67); font-size: clamp(17px, 1.45vw, 22px); line-height: 1.6; }
.studio-statement { display: grid; margin-top: 56px; border-block: 1px solid var(--line-dark); }
.studio-statement span { padding: 15px 0; border-bottom: 1px solid var(--line-dark); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.studio-statement span:last-child { border-bottom: 0; }

.capabilities { --workspace-copy-exit: 0; position: relative; height: 520svh; overflow: clip; background: var(--ink); }
.capabilities-sticky { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; padding: clamp(76px, 8vw, 132px) 0 84px; }
.capabilities-sticky::after { content: ""; position: absolute; z-index: 1; inset: 34% 0 0; background: linear-gradient(180deg, rgba(7,7,7,0) 0%, rgba(7,7,7,.22) 24%, rgba(7,7,7,.76) 72%, rgba(7,7,7,.94) 100%); pointer-events: none; }

.capabilities-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,7,.96) 0%, rgba(7,7,7,.74) 29%, rgba(7,7,7,.08) 60%, rgba(7,7,7,.17)), linear-gradient(0deg, rgba(7,7,7,.86) 0%, transparent 43%, rgba(7,7,7,.46)); }
.capabilities-shell { position: relative; z-index: 2; height: 100%; min-height: 0; display: flex; flex-direction: column; row-gap: 40px; }
.capabilities-intro { position: relative; z-index: 3; width: min(520px, 39vw); opacity: calc(1 - var(--workspace-copy-exit)); transform: translateX(calc(var(--workspace-copy-exit) * -16vw)); will-change: transform, opacity; }
.capabilities-intro:focus-within { opacity: 1; transform: none; }
.capabilities-intro h2 { margin: 35px 0 28px; font-size: clamp(59px, 7vw, 110px); line-height: .88; letter-spacing: -.07em; font-weight: 350; }
.capabilities-intro h2 em { color: var(--bone-dim); }
.capabilities-intro > p:last-child { max-width: 470px; margin: 0; color: rgba(242,239,232,.65); font-size: 19px; line-height: 1.55; }
.workspace-map { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px); list-style: none; margin: auto 0 0; padding: 0; pointer-events: auto; transform: none; }
.workspace-map li { position: relative; min-width: 0; padding: 16px 0 0; color: var(--bone); border-top: 1px solid rgba(242,239,232,.34); opacity: 1; transform: none; transition: color .3s ease, border-color .3s ease; }
.workspace-map li::before { content: ""; position: absolute; top: -1px; left: 0; width: calc(var(--chapter-fill, 0) * 100%); height: 1px; background: var(--copper-bright); transition: width .18s linear; }
.workspace-map li > span { color: var(--copper-bright); font-size: 9px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.workspace-map h3 { margin: 17px 0 8px; font-family: var(--serif); font-size: clamp(25px, 2.2vw, 36px); line-height: 1; font-weight: 400; letter-spacing: -.04em; }
.workspace-map p { margin: 0; color: rgba(242,239,232,.67); font-size: 13px; line-height: 1.5; }
.workspace-switcher { position: relative; z-index: 2; padding: 28px var(--pad); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 32px; border-block: 1px solid var(--line); background: var(--ink); }
.workspace-switcher a { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(242,239,232,.18); text-decoration: none; transition: padding-left .25s ease, border-color .25s ease; }
.workspace-switcher a:hover { padding-left: 9px; border-color: var(--blue-bright); }
.workspace-switcher span { color: var(--copper-bright); font-size: 8px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.workspace-switcher strong { min-width: 0; overflow-wrap: anywhere; color: var(--bone); font-family: var(--serif); font-size: 19px; font-weight: 400; }

.process { --process-progress: 0; --process-turn: 0; position: relative; height: 720svh; background: #0b0b0c; }
.process-sticky { position: sticky; top: 0; min-height: 720px; height: 100svh; overflow: hidden; perspective: 1600px; perspective-origin: calc(58% + var(--process-turn) * 30%) 50%; }

.process-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,7,.985) 0%, rgba(7,7,7,.91) 38%, rgba(7,7,7,.32) 68%, rgba(7,7,7,.38)), linear-gradient(0deg, rgba(7,7,7,.9) 0%, transparent 48%, rgba(7,7,7,.42) 100%); }











.process-shell { position: relative; z-index: 3; height: 100%; padding-top: clamp(112px, 15vh, 155px); padding-bottom: 35px; display: block; }
.process-shell > .section-index { grid-column: 1; }
.process-heading { width: min(700px, 52vw); }
.process-heading h2 { margin: 24px 0 16px; font-size: clamp(54px, 6.5vw, 100px); line-height: .88; font-weight: 350; letter-spacing: -.075em; }
.process-heading h2 em { color: var(--bone-dim); }
.process-heading > p { margin: 0; color: rgba(242,239,232,.62); font-size: 15px; }
.process-list { position: absolute; right: var(--pad); top: clamp(118px, 15vh, 152px); bottom: auto; width: min(520px, 38vw); list-style: none; margin: 0; padding: 0 0 0 28px; display: block; border-left: 1px solid rgba(242,239,232,.28); }
.process-list li { position: relative; min-height: 119px; padding: 0 0 22px 0; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; align-content: start; color: rgba(242,239,232,.62); transition: color .3s ease, transform .3s ease; }
.process-list li::before { content: ""; position: absolute; top: 4px; left: -33px; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; background: var(--ink); }
.process-list span { grid-row: 1 / 3; color: currentColor; font-size: 10px; padding-top: 4px; }
.process-list h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 25px; font-weight: 400; }
.process-list p { margin: 0; color: currentColor; font-size: 12px; line-height: 1.45; }
.process[data-process-state="0"] [data-process-step="0"], .process[data-process-state="1"] [data-process-step="1"], .process[data-process-state="2"] [data-process-step="2"] { color: var(--bone); transform: translateX(7px); }
.process[data-process-state="0"] [data-process-step="0"]::before, .process[data-process-state="1"] [data-process-step="1"]::before, .process[data-process-state="2"] [data-process-step="2"]::before { border-color: var(--copper-bright); background: var(--copper-bright); }
.process-statement { position: absolute; left: var(--pad); bottom: clamp(72px, 8vh, 96px); max-width: 500px; margin: 0; color: rgba(242,239,232,.66); font-family: var(--serif); font-size: clamp(24px, 2.15vw, 34px); line-height: 1.08; }
.process-statement strong { color: var(--copper-bright); font-weight: 400; }

.project { --project-heading-exit: 0; position: relative; background: var(--ink); }
.project-cinema { position: relative; height: 600svh; }
.project-sticky { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }

.projects-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,7,.79) 0%, rgba(7,7,7,.12) 35%, rgba(7,7,7,.22) 72%, rgba(7,7,7,.9) 100%), linear-gradient(90deg, rgba(7,7,7,.67), transparent 48%, rgba(7,7,7,.1)); }
.project-layout { position: relative; z-index: 2; height: 100%; min-height: 0; }
.project-heading { position: absolute; top: clamp(96px, 9vw, 142px); left: var(--pad); width: min(680px, 50vw); opacity: calc(1 - var(--project-heading-exit)); transform: translateX(calc(var(--project-heading-exit) * -17vw)); will-change: transform, opacity; }
.project-heading .overline { margin-top: 30px; color: rgba(242,239,232,.58); }
.project-heading h2 { margin: 18px 0 0; font-family: var(--serif); font-size: clamp(65px, 7vw, 108px); line-height: .84; font-weight: 400; letter-spacing: -.067em; }
.project-details { position: relative; z-index: 2; padding-top: clamp(76px, 9vw, 140px); padding-bottom: clamp(96px, 12vw, 180px); }
.project-details > .project-module { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .75fr); grid-template-rows: auto auto 1fr auto; column-gap: clamp(34px, 7vw, 110px); align-items: start; width: auto; min-height: 0; margin: 0; padding: clamp(42px, 6vw, 92px) 0; color: var(--bone); border: 0; border-top: 1px solid rgba(242,239,232,.24); background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; transform: none; }
.project-details > .project-module:last-child { border-bottom: 1px solid rgba(242,239,232,.24); }
.project-details > .project-module:focus-within, .project-details > .project-module:target { opacity: 1; transform: none; }
.project-details .project-module[id] { scroll-margin-top: 90px; }
.project-status { grid-column: 1; grid-row: 1; margin: 0; color: var(--copper-bright); font-size: 9px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.project-details .project-module h3 { grid-column: 1; grid-row: 2; min-width: 0; overflow-wrap: anywhere; margin: 21px 0 16px; font-family: var(--serif); font-size: clamp(35px, 4vw, 68px); line-height: .9; font-weight: 400; letter-spacing: -.055em; }
.project-details .project-module > p:not(.project-status) { grid-column: 1; grid-row: 3; max-width: 58ch; margin: 0; color: rgba(242,239,232,.68); font-size: 15px; line-height: 1.52; }
.project-details .text-link { grid-column: 1; grid-row: 4; justify-self: start; }
.project-details > .project-module > img, .project-details > .project-module > .time-device, .project-details > .project-module > .lotto-device, .project-details > .project-module > .zeiger-device { grid-column: 2; grid-row: 1 / 5; align-self: center; justify-self: end; }
.project-details > .project-module > img { width: min(100%, 560px); height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.86) contrast(1.05); }
.project-details .time-device { position: relative; right: auto; bottom: auto; width: min(220px, 100%); height: auto; aspect-ratio: 556 / 800; padding: 5px; overflow: hidden; border: 2px solid rgba(226,231,242,.8); border-radius: 18px; background: #11131a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 52px rgba(0,0,0,.5), 0 0 40px rgba(31,91,255,.12); transform: none; }
.time-device::before { content: ""; position: absolute; z-index: 2; top: 7px; left: 50%; width: 22px; height: 3px; border-radius: 3px; background: rgba(3,5,10,.72); transform: translateX(-50%); }
.screen-reel { isolation: isolate; }
.screen-reel img { position: absolute; inset: 5px; display: block; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 12px; object-fit: cover; filter: saturate(.96) contrast(1.02); opacity: 0; animation: none; }
.screen-reel img:first-child { opacity: 1; }
.screen-reel.is-playing img { animation-duration: 12s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; animation-play-state: running; }
.screen-reel.reel-3.is-playing img { animation-name: screen-reel-frame-3; animation-duration: 9s; }
.screen-reel.reel-4.is-playing img { animation-name: screen-reel-frame-4; }
.screen-reel.reel-3.is-playing img:nth-child(1) { animation-delay: 0s; }
.screen-reel.reel-3.is-playing img:nth-child(2) { animation-delay: -3s; }
.screen-reel.reel-3.is-playing img:nth-child(3) { animation-delay: -6s; }
.screen-reel.reel-4.is-playing img:nth-child(1) { animation-delay: 0s; }
.screen-reel.reel-4.is-playing img:nth-child(2) { animation-delay: -3s; }
.screen-reel.reel-4.is-playing img:nth-child(3) { animation-delay: -6s; }
.screen-reel.reel-4.is-playing img:nth-child(4) { animation-delay: -9s; }
@keyframes screen-reel-frame-3 {
  0%, 33.2% { opacity: 1; transform: none; }
  33.3%, 100% { opacity: 0; transform: none; }
}
@keyframes screen-reel-frame-4 {
  0%, 24.9% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: none; }
}
.project-details .lotto-device, .project-details .zeiger-device { position: relative; right: auto; bottom: auto; width: min(190px, 100%); height: auto; aspect-ratio: 368 / 800; padding: 5px; overflow: hidden; border: 2px solid rgba(226,231,242,.8); border-radius: 18px; background: #11131a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 52px rgba(0,0,0,.5); transform: none; }
.project-details > .project-module:nth-child(even) { grid-template-columns: minmax(250px, .75fr) minmax(0, 1fr); }
.project-details > .project-module:nth-child(even) > .project-status, .project-details > .project-module:nth-child(even) > h3, .project-details > .project-module:nth-child(even) > p:not(.project-status), .project-details > .project-module:nth-child(even) > .text-link { grid-column: 2; }
.project-details > .project-module:nth-child(even) > img, .project-details > .project-module:nth-child(even) > .time-device, .project-details > .project-module:nth-child(even) > .lotto-device, .project-details > .project-module:nth-child(even) > .zeiger-device { grid-column: 1; justify-self: start; }
.text-link { display: inline-flex; align-items: center; gap: 50px; margin-top: 32px; padding-bottom: 9px; border-bottom: 1px solid currentColor; color: inherit; font-size: 14px; text-decoration: none; }
.text-link span { color: var(--blue); transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px, -3px); }

.contact { position: relative; min-height: 100svh; overflow: hidden; color: var(--bone); background: var(--ink); }
.contact-world { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.contact-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,7,.98) 0%, rgba(7,7,7,.84) 39%, rgba(7,7,7,.22) 69%, rgba(7,7,7,.05)), linear-gradient(0deg, rgba(7,7,7,.76), transparent 42%); }
.contact-layout { position: relative; z-index: 2; min-height: 100svh; padding-top: clamp(110px, 16vh, 170px); padding-bottom: 70px; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: auto 1fr; gap: 0 70px; }
.contact-layout > .section-index { grid-column: 1 / -1; }
.contact h2 { align-self: center; margin: 30px 0; font-size: clamp(60px, 7.4vw, 116px); line-height: .86; font-weight: 350; letter-spacing: -.073em; }
.contact h2 span, .contact h2 em { display: block; }
.contact h2 em { color: var(--blue); }
.contact-action { align-self: end; margin-bottom: 25px; }
.contact-action > p { max-width: 430px; margin: 0 0 32px; color: rgba(242,239,232,.7); font-size: 17px; line-height: 1.55; }
.contact-email { display: inline-block; margin-bottom: 18px; color: var(--bone); font-family: var(--serif); font-size: clamp(24px, 2.2vw, 34px); text-underline-offset: 7px; }
.contact-action .contact-note { margin: 0; color: rgba(242,239,232,.52); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.button-copper { width: fit-content; background: var(--copper); color: #fff; }
.button-copper:hover { background: #9f6540; }

.site-footer { padding: 34px 0; border-top: 1px solid rgba(242,239,232,.14); background: var(--ink); }
.footer-layout { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.footer-layout nav { display: flex; gap: 26px; }
.footer-layout nav a { color: rgba(242,239,232,.62); font-size: 12px; text-decoration: none; }
.footer-layout p { justify-self: end; margin: 0; color: rgba(242,239,232,.62); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(35px); transition: opacity .8s cubic-bezier(.16,.74,.25,1), transform .8s cubic-bezier(.16,.74,.25,1); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(49px, 6vw, 72px); }
  .process-list { width: 50vw; }
  .process-statement { max-width: 330px; }
}

@media (min-width: 821px) {
  main > section.capabilities, main > section.project { scroll-margin-top: 0; }
}

@media (max-width: 820px), (max-width: 1100px) and (max-height: 650px) {
  :root { --pad: 20px; }
  .site-header { height: 66px; transform: none; }
  .site-header::before { height: 66px; }
  .desktop-nav { position: absolute; top: 66px; right: 0; left: 0; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 10px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); background: rgba(7,7,7,.92); }
  .desktop-nav a { font-size: 10px; }
  .motion-ready .desktop-nav { display: none; }
  .language-switch { margin-left: auto; }
  .motion-ready .language-switch { margin-left: 18px; }
  .motion-ready .menu-toggle { width: 42px; height: 42px; margin-left: 10px; display: grid; place-content: center; gap: 6px; border: 1px solid rgba(242,239,232,.25); border-radius: 50%; background: rgba(7,7,7,.35); color: var(--bone); }
  .menu-toggle span { width: 17px; height: 1px; background: currentColor; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav { position: fixed; z-index: 95; inset: 66px 0 0; padding: 50px var(--pad); overflow-y: auto; background: var(--ink); }
  .mobile-nav:not([hidden]) { display: flex; flex-direction: column; gap: 26px; }
  .mobile-nav a { font-family: var(--serif); font-size: 35px; }
  .mobile-nav .mobile-language { margin-top: 20px; padding-top: 25px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 13px; }

  .hero { height: auto; min-height: 0; --portal-progress: .75; --route-progress: .82; --zone-spread: .75; }
  .hero-stage { position: relative; min-height: 0; height: auto; padding: 104px var(--pad) 34px; display: flex; flex-direction: column; }



  .world-shade { background: linear-gradient(180deg, rgba(7,7,7,.93) 0%, rgba(7,7,7,.83) 36%, rgba(7,7,7,.17) 64%, rgba(7,7,7,.78) 100%); opacity: 1; }








  .hero-grid { inset: 66px var(--pad) 0; }
  .hero-grid::before { left: 50%; }
  .hero-grid::after { display: none; }
  .hero-copy { position: relative; left: auto; top: auto; width: 100%; transform: none; opacity: 1; }
  .eyebrow { font-size: 9px; }
  .hero h1 { margin: 18px 0 16px; font-size: clamp(43px, 12.6vw, 62px); line-height: .89; }
  .hero h1 span { white-space: normal; }
  .hero-deck { max-width: 520px; font-size: 16px; line-height: 1.42; }
  .hero-actions { margin-top: 21px; }
  .button { min-height: 48px; padding-inline: 18px; font-size: 13px; }
  .hero-proof { margin-top: 16px; font-size: 11px; }
  .portal-story { position: relative; left:auto; bottom:auto; right: auto; top: auto; width: 100%; margin-top: clamp(200px, 34vh, 290px); padding: 14px; background: rgba(7,7,7,.52); transform: none; }
  .portal-story ol { display: grid; grid-template-columns: 1fr 1fr; }
  .portal-story li { padding: 11px 8px; }
  .portal-story li:nth-child(odd) { border-right: 1px solid rgba(242,239,232,.13); }
  .portal-story li { color: rgba(242,239,232,.78); transform: none !important; }
  .portal-story small { max-height: none; opacity: 1; }
  .hero-interface { position: relative; right: auto; bottom: auto; left: auto; grid-template-columns: 1fr auto; margin-top: 18px; }
  .portal-status { display: none; }
  .scroll-cue { display: none; }

  .studio-layout { grid-template-columns: 1fr; gap: 32px; }
  .studio-head h2 { font-size: clamp(46px, 12vw, 72px); }
  .studio-copy { padding-top: 0; }
  .studio-statement { grid-template-columns: repeat(3, 1fr); }
  .studio-statement span { padding: 14px 7px; border-bottom: 0; border-right: 1px solid var(--line-dark); font-size: 9px; text-align: center; }
  .studio-statement span:last-child { border-right: 0; }

  .capabilities { height: auto; min-height: 0; }
  .capabilities-sticky { position: relative; top: auto; height: auto; min-height: 0; padding: 105px 0 80px; }

  .capabilities-shell { height: auto; min-height: 0; }
  .capabilities-intro { width: 100%; opacity: 1; transform: none; }
  .capabilities-intro h2 { font-size: clamp(60px, 18vw, 92px); }
  .workspace-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; transform: none; }
  .workspace-map h3 { font-size: clamp(28px, 6vw, 38px); }
  .workspace-switcher { display: grid; grid-template-columns: 1fr; }
  .workspace-switcher a { grid-template-columns: 132px 1fr; }

  .process { height: auto; --process-progress: 1; }
  .process-sticky { position: relative; height: auto; min-height: 0; padding: 105px 0; }

  .process-shade { background: linear-gradient(180deg, rgba(7,7,7,.97), rgba(7,7,7,.55) 43%, rgba(7,7,7,.92)); }


  .process-shell { height: auto; min-height: 0; padding-top: 0; padding-bottom: 0; display: block; }
  .process-heading h2 { margin-top: 25px; font-size: clamp(57px, 16vw, 88px); }
  .process-list { position: relative; right: auto; top: auto; bottom: auto; width: 100%; margin-top: 72px; padding-left: 28px; display: block; }
  .process-list li { min-height: 124px; color: var(--bone); }
  .process-list li { transform: none !important; }
  .process-statement { position: relative; left: auto; bottom: auto; max-width: 560px; margin-top: 34px; }

  .project { height: auto; min-height: 0; }
  .project-cinema { height: auto; }
  .project-sticky { position: relative; top: auto; height: auto; min-height: 0; padding: 100px 0 70px; }

  .project-layout { height: auto; min-height: 0; }
  .project-heading { position: relative; inset: auto; width: auto; opacity: 1; transform: none; }
  .project-heading h2 { font-size: clamp(63px, 17vw, 96px); }
  .project-details { padding-top: 0; padding-bottom: 80px; }
  .project-details > .project-module, .project-details > .project-module:nth-child(even) { display: block; padding: 40px 0; }
  .project-details .project-module h3 { margin: 16px 0 14px; font-size: clamp(36px, 11vw, 58px); }
  .project-details .project-module > p:not(.project-status) { max-width: none; font-size: 14px; line-height: 1.5; }
  .project-details .text-link { margin-top: 26px; }
  .project-details > .project-module > img { width: min(100%, 520px); margin: 28px 0 0; }
  .project-details > .project-module > .time-device, .project-details > .project-module > .lotto-device, .project-details > .project-module > .zeiger-device { margin: 28px 0 0; justify-self: auto; }
  .project-details .time-device { width: min(220px, 100%); }
  .project-details .lotto-device, .project-details .zeiger-device { width: min(180px, 100%); }
  .contact { min-height: 0; }
  .contact-world { object-position: 64% center; opacity: .7; }
  .contact-shade { background: linear-gradient(180deg, rgba(7,7,7,.96), rgba(7,7,7,.7) 62%, rgba(7,7,7,.94)); }
  .contact-layout { min-height: 860px; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .contact h2 { font-size: clamp(57px, 16vw, 88px); }
  .contact-action { align-self: end; }
  .footer-layout { grid-template-columns: 1fr auto; }
  .footer-layout p { display: none; }
  html:not(.motion-ready) .hero-stage { padding-top: 132px; }
  html:not(.motion-ready) main > section:not(.hero) { scroll-margin-top: 118px; }
}

@media (max-width: 360px) {
  .wordmark { gap: 7px; font-size: 15px; }
  .wordmark img { width: 30px; height: 30px; flex-basis: 30px; }
}

html:not(.motion-ready) .hero { height: auto; --portal-progress: .8; --camera-right: .86; --camera-turn: .9; --route-progress: 1; --zone-spread: .9; }
html:not(.motion-ready) .site-header .wordmark { z-index: 3; }
html:not(.motion-ready) .hero-stage { position: relative; }

html:not(.motion-ready) .hero-copy { transform: none; opacity: 1; }
html:not(.motion-ready) .portal-story li { color: rgba(242,239,232,.82); transform: none; }
html:not(.motion-ready) .portal-story small { max-height: none; opacity: 1; }
html:not(.motion-ready) .portal-status, html:not(.motion-ready) .scroll-cue { display: none; }
html:not(.motion-ready) .process { height: auto; --process-progress: 1; }
html:not(.motion-ready) .process-sticky { position: relative; }
html:not(.motion-ready) .process-list li { color: var(--bone); }
html:not(.motion-ready) .capabilities, html:not(.motion-ready) .project-cinema { height: auto; }
html:not(.motion-ready) .capabilities-sticky { position: relative; top: auto; height: auto; min-height: 0; }
html:not(.motion-ready) .project-sticky { position: relative; top: auto; height: 100svh; min-height: 0; }
html:not(.motion-ready) .capabilities-intro, html:not(.motion-ready) .workspace-switcher, html:not(.motion-ready) .project-heading { opacity: 1; transform: none; }

@media (max-width: 420px) {
  .motion-ready .language-switch { display: none; }
  .hero-stage { padding-top: 86px; }
  .hero h1 { font-size: clamp(39px, 12.2vw, 51px); }
  .hero-deck { font-size: 14px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .button { width: 100%; }
  .hero-proof { display: none; }
  .portal-story { margin-top: 190px; }
  .portal-story small { display: block; grid-column: 2; font-size: 11px; }
  .portal-story li { grid-template-columns: 28px 1fr; }

  .studio-statement { grid-template-columns: 1fr; }
  .studio-statement span { border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .process-list { grid-template-columns: 1fr; }
  .process-list li { min-height: 130px; border-right: 0; border-bottom: 1px solid rgba(242,239,232,.17); }
  .process-list li:last-child { border-bottom: 0; }
  .process-list h3 { margin-top: 20px; }
  .workspace-map { grid-template-columns: 1fr; }
  .workspace-map li { min-height: 0; }
  .footer-layout { grid-template-columns: 1fr; }
  .footer-layout nav { justify-content: space-between; }
  html:not(.motion-ready) .hero-stage { padding-top: 122px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero { height: auto; --portal-progress: .8; --camera-right: .86; --camera-turn: .9; --route-progress: 1; --zone-spread: .9; }
  .hero-stage { position: relative; }


  .hero-copy { transform: none; opacity: 1; }
  .portal-story li { color: rgba(242,239,232,.82); transform: none !important; }
  .portal-story small { max-height: none; opacity: 1; }
  .motion-ready .replay-button, .scroll-cue { display: none; }
  .process { height: auto; --process-progress: 1; }
  .process-sticky { position: relative; }
  .process-list li { color: var(--bone); }
  .capabilities, .project-cinema { height: auto; }
  .capabilities-sticky { position: relative; top: auto; height: auto; min-height: 0; }
  .project-sticky { position: relative; top: auto; height: 100svh; min-height: 0; }
  .capabilities-intro, .workspace-switcher, .project-heading { opacity: 1; transform: none; }
  .motion-ready .reveal { opacity: 1; transform: none; }
}

@media (max-width: 900px) {

}

@media (prefers-reduced-motion: reduce) {

}


.reduced-motion-forced { scroll-behavior: auto; }
.reduced-motion-forced *, .reduced-motion-forced *::before, .reduced-motion-forced *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.reduced-motion-forced .hero { height: auto; --portal-progress: .8; --camera-right: .86; --camera-turn: .9; --route-progress: 1; --zone-spread: .9; }
.reduced-motion-forced .hero-stage { position: relative; }


.reduced-motion-forced .hero-copy { transform: none; opacity: 1; }
.reduced-motion-forced .portal-story li { color: rgba(242,239,232,.82); transform: none !important; }
.reduced-motion-forced .portal-story small { max-height: none; opacity: 1; }
.reduced-motion-forced .replay-button, .reduced-motion-forced .scroll-cue { display: none; }
.reduced-motion-forced .process { height: auto; --process-progress: 1; }
.reduced-motion-forced .process-sticky { position: relative; }
.reduced-motion-forced .process-list li { color: var(--bone); }
.reduced-motion-forced .reveal { opacity: 1; transform: none; }
  .reduced-motion-forced .capabilities, .reduced-motion-forced .project-cinema { height: auto; }
  .reduced-motion-forced .capabilities-sticky { position: relative; top: auto; height: auto; min-height: 0; }
  .reduced-motion-forced .project-sticky { position: relative; top: auto; height: 100svh; min-height: 0; }
  .reduced-motion-forced .capabilities-intro, .reduced-motion-forced .workspace-switcher, .reduced-motion-forced .project-heading { opacity: 1; transform: none; }

@media (forced-colors: active) { .contact-world{ opacity: .15; }
  .button, .portal-story, .process-list { border: 1px solid CanvasText; }
  .workspace-map { border-block: 1px solid CanvasText; }
  .project-details > .project-module { border-block-color: CanvasText; }
}

@media(max-width:820px), (max-width:1100px) and (max-height:650px), (prefers-reduced-motion:reduce) { .hero-ending { display:none; } }
html:not(.motion-ready) .hero-ending, .reduced-motion-forced .hero-ending { display:none; }

/* Rendered room films: camera movement lives in the footage, not CSS planes. */
.room-media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-stage > .room-media { z-index: -10; }
.room-media img, .room-media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; transform: none; filter: none; }
.room-media video { opacity: 0; }
.room-media video.is-ready { opacity: 1; }
.project .room-media::after { content: ""; position: absolute; z-index: 1; inset: 42% 0 0; background: linear-gradient(180deg, transparent 0%, rgba(7,7,7,.12) 28%, rgba(7,7,7,.68) 100%); }
.project-film-callout { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.project-film-callout.is-visible { opacity: 1; }
.project-film-callout line { stroke: rgba(219, 158, 91, .86); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; will-change: opacity; }
.project-film-caption { position: absolute; z-index: 3; inset: 0; color: var(--bone); font-family: var(--serif); font-size: clamp(24px, 2.1vw, 32px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; pointer-events: none; text-shadow: 0 2px 12px #070707, 0 0 3px #070707; }
.project-film-caption-item { --project-caption-opacity: 0; --project-caption-x: 0px; --project-caption-y: 0px; position: absolute; bottom: 0; left: 0; display: block; width: min(320px, 26vw); overflow-wrap: anywhere; opacity: var(--project-caption-opacity); transform: translate(var(--project-caption-x), var(--project-caption-y)); will-change: opacity, transform; }
.project-film-caption-item small { display: block; margin: 0 0 10px; color: var(--copper-bright); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; line-height: 1; }
video:not(.is-ready) ~ .project-film-callout, video:not(.is-ready) ~ .project-film-caption .project-film-caption-item { opacity: 0; }
html:not(.motion-ready) .project-film-callout, html:not(.motion-ready) .project-film-caption, html.reduced-motion-static .project-film-callout, html.reduced-motion-static .project-film-caption { display: none; }
.room-play { display: none; position: absolute; z-index: 8; right: var(--pad); bottom: 26px; min-height: 44px; padding: 0 18px; border: 1px solid rgba(242,239,232,.55); border-radius: 30px; background: rgba(7,7,7,.76); color: var(--bone); font: 500 13px/1.2 var(--sans); cursor: pointer; }
.motion-ready .room-play:not([hidden]) { display: inline-flex; align-items: center; }
html.motion-ready.reduced-motion-static .room-play, html.motion-ready.reduced-motion-static .replay-button, .motion-ready .room-play[hidden], .motion-ready .replay-button[hidden] { display: none; }
html.reduced-motion-static .room-media video { display: none; }
@media (prefers-reduced-motion: reduce) { .room-media video, .room-play, .project-film-callout, .project-film-caption { display: none !important; } }
@media (min-width: 821px) and (min-height: 651px), (min-width: 1101px) {
  .process-list { top: 310px; left: var(--pad); right: auto; width: min(430px, 34vw); }
  .process-shade { background: linear-gradient(90deg,rgba(7,7,7,.87),rgba(7,7,7,.58) 29%,transparent 53%),linear-gradient(0deg,rgba(7,7,7,.5),transparent 20%); }
}
@media (max-width: 820px), (max-width: 1100px) and (max-height: 650px) {
  .room-media img, .room-media video { object-position: 58% center; }
  .process .room-media img, .process .room-media video { object-position: 61% center; }
  .room-play { bottom: 20px; }
}
/* Keep the complete landscape composition visible on compact screens. */
@media (max-width: 820px), (max-width: 1100px) and (max-height: 650px) {
  .hero-stage, .capabilities-sticky, .process-sticky, .project-sticky { display: flex; flex-direction: column; perspective: none; }
  .room-media, .hero-stage > .room-media { position: relative; z-index: 0; inset: auto; width: 100%; aspect-ratio: 16 / 9; flex: none; order: 2; }
  .hero-stage > .room-media { width: calc(100% + var(--pad) * 2); margin: 30px calc(var(--pad) * -1) 0; }
  .room-media img, .room-media video, .process .room-media img, .process .room-media video { object-fit: contain; object-position: center; }
  .project .room-media::after { inset: 35% 0 0; }
  .project-film-caption { font-size: clamp(13px, 3.5vw, 22px); line-height: 1.08; }
  .project-film-caption-item { width: 42%; max-width: 290px; }
  .project-film-caption-item[data-project-callout-anchor="tablet"] { width: 56%; max-width: 340px; }
  .project-film-caption-item small { margin-bottom: 5px; font-size: 8px; }
  .hero-copy, .capabilities-intro, .process-heading, .project-heading { order: 1; }
  .hero-stage > .world-shade, .hero-grid, .capabilities-shade, .capabilities-sticky::after, .process-shade, .projects-shade { display: none; }
  .hero-interface { order: 3; margin: 16px 0 0; }
  .portal-story { order: 4; margin-top: 30px; padding: 0; background: none; }
  .capabilities-intro, .process-heading, .project-heading { width: auto; margin: 0 var(--pad) 30px; }
  .process-sticky > .process-shell > .section-index { order: 0; margin: 0 var(--pad); }
  .process-heading h2 { font-size: clamp(48px, 12vw, 76px); line-height: 1; }
  .room-play { position: relative; inset: auto; align-self: flex-end; order: 3; margin: 16px var(--pad) 0; }
  .capabilities-shell, .process-shell, .project-layout { display: contents; }
  html:not(.motion-ready) .project-sticky, html.reduced-motion-static .project-sticky, .reduced-motion-forced .project-sticky { height: auto; }
  .workspace-map, .process-list { order: 4; width: auto; margin: 38px var(--pad) 0; }
  .process-list h3 { margin-top: 10px; }
}

/* Itemello keeps its original two-look artwork in a separate project box. */
.project-details > .wyo-itemello-project { margin-block: 28px; padding: clamp(24px, 4vw, 56px); border: 1px solid var(--line); border-radius: 12px; background: var(--ink-soft); }
.project-details > .wyo-itemello-project > .wyo-itemello-looks { height: auto; aspect-ratio: 1600 / 1100; object-fit: contain; filter: none; border-radius: 8px; }
@media (max-width: 820px), (max-width: 1100px) and (max-height: 650px) {
 .project-details > .wyo-itemello-project { padding: 24px; }
}

/* Playback remains available to keyboard users without visible play buttons. */
.motion-ready .replay-button:not(:focus-visible),
.motion-ready .room-play:not(:focus-visible) {
  position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0;
  padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}