/* A viewing room for image, motion and sound. */
:root { --bg:#0c0d0e; --surface:#141618; --text:#f1f0eb; --muted:#aaa9a5; --line:#343638; --accent:#e7dfcb; --loop-ease:cubic-bezier(.23,1,.32,1); }
body { background:var(--bg); }
body.intro-open { overflow:hidden; }
html:not(.js) .desktop-nav { display:flex; }
.header { position:fixed; width:100%; background:none; border:0; z-index:40; pointer-events:none; }
/* A dark glass layer keeps navigation readable over moving images and text. */
.header::before { content:''; position:absolute; inset:0 0 -18px; pointer-events:none; background:linear-gradient(180deg,#0c0d0ef5 0%,#0c0d0ee8 70%,#0c0d0e00 100%); }
.header__inner { position:relative; z-index:1; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .header::before { background:linear-gradient(180deg,#171a1dc9 0%,#0c0d0e9c 72%,#0c0d0e40 100%); -webkit-backdrop-filter:blur(22px) saturate(135%); backdrop-filter:blur(22px) saturate(135%); -webkit-mask-image:linear-gradient(#000 0%,#000 70%,transparent 100%); mask-image:linear-gradient(#000 0%,#000 70%,transparent 100%); box-shadow:inset 0 1px 0 #ffffff12; }
}
.header .languages button { color:#c6c8c5; }
.header .languages button[aria-pressed=true] { color:#fff; }
.header__inner { height:96px; padding-inline:32px; max-width:none; }
.header a,.header button,.header .languages { pointer-events:auto; }
.brand img { width:124px; }
.desktop-nav,.header-contact { display:none; }
.header__right { margin-left:auto; gap:18px; }
.languages button { font-size:11px; min-width:30px; }
.languages>span { color:#777; }
.js .menu-button { display:flex; width:92px; height:44px; border:0; border-radius:30px; background:#eeeee9; color:#111; align-items:center; justify-content:center; gap:11px; }
.menu-button .menu-button__label { position:static; width:auto; height:auto; background:none; font-size:13px; transform:none!important; }
.menu-button .menu-button__dot { width:5px; height:5px; border-radius:50%; background:currentColor; transition:transform 220ms var(--loop-ease); }
.menu-button[aria-expanded=true] .menu-button__dot { transform:scale(1.5); }
.mobile-menu { z-index:39; top:84px; left:auto; right:32px; width:410px; height:min(560px,calc(100dvh - 104px)); max-height:none; padding:58px 28px 28px; color:#141516; background:#eeeee9; border:0; border-radius:22px; transform-origin:top right; }
.mobile-menu a { font-size:54px; line-height:1.1; letter-spacing:-.04em; padding-block:10px; }
.mobile-menu a:focus-visible { outline-color:#161819; }
.menu-note { position:absolute; bottom:28px; left:28px; font-size:12px; color:#555650; }
.viewer { border-color:#353739; background:#101214; border-radius:16px; }
.viewer__shell { padding:22px; }
.viewer::backdrop { background:#030405e8; }
.hero[hidden] { display:none!important; }

.loop-screen { position:relative; isolation:isolate; height:100svh; min-height:680px; max-height:1300px; overflow:hidden; background:#0c0d0e; color:#f1f0eb; }
.loop-screen::before { content:''; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 50% 44%,#272a2b70 0%,#0c0d0e00 62%); pointer-events:none; }
.loop-screen::after { content:''; position:absolute; inset:auto 0 0; height:180px; background:linear-gradient(transparent,#0c0d0e); pointer-events:none; z-index:2; }
.loop-canvas { position:absolute; width:100%; height:100%; inset:0; display:block; touch-action:pan-y; cursor:grab; outline:0; }
.loop-canvas:active { cursor:grabbing; }
.loop-canvas:focus-visible { outline:1px solid #e7dfcb; outline-offset:-100px; }
.loop-switch { position:absolute; z-index:5; top:28px; left:50%; transform:translateX(-50%); display:flex; align-items:center; padding:4px; gap:3px; background:#1b1d1d; border:1px solid #323435; border-radius:28px; }
.loop-switch button { min-height:36px; padding:0 19px; color:#b3b4b1; font-size:12px; border-radius:23px; transition:background 220ms var(--loop-ease),color 180ms ease; }
.loop-switch button[aria-pressed=true] { background:#eeeee9; color:#161819; }
.loop-corner { position:absolute; z-index:3; left:34px; top:125px; font-size:12px; line-height:1.6; pointer-events:none; color:#bbbcb8; }
.loop-corner span { display:block; color:#707575; }
.loop-heading { position:absolute; z-index:0; top:45%; left:50%; transform:translate(-50%,-50%); width:100%; margin:0; text-align:center; font:400 clamp(70px,12vw,190px)/1 Onest,Arial,sans-serif; letter-spacing:-.04em; color:#ffffff06; pointer-events:none; user-select:none; }
.loop-aperture { position:absolute; z-index:1; top:0; left:0; border:1px solid #e9e0c226; border-radius:10px; pointer-events:none; box-shadow:0 10px 42px #06070845,inset 0 0 0 1px #ffffff03; }
.loop-aperture::before,.loop-aperture::after { content:''; position:absolute; width:27px; height:19px; border-color:#f5e9cc; border-style:solid; opacity:.68; }
.loop-aperture::before { top:-1px; left:-1px; border-width:1px 0 0 1px; border-top-left-radius:10px; }
.loop-aperture::after { bottom:-1px; right:-1px; border-width:0 1px 1px 0; border-bottom-right-radius:10px; }
.loop-aperture-label { position:absolute; top:-24px; left:0; font-size:9px; color:#858a88; text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; }
.loop-caption { position:absolute; z-index:4; bottom:103px; left:50%; transform:translateX(-50%); width:min(560px,calc(100% - 40px)); text-align:center; pointer-events:none; }
.loop-caption p { color:#a3a7a5; font-size:11px; margin-bottom:8px; }
.loop-open { pointer-events:auto; display:inline-flex; align-items:center; gap:18px; min-height:48px; font-size:clamp(23px,2.7vw,38px); letter-spacing:-.035em; line-height:1.15; }
.loop-open svg { width:22px; height:22px; transition:transform 240ms var(--loop-ease); }
.loop-counter { display:flex; align-items:center; justify-content:center; gap:15px; margin-top:12px; color:#a3a7a5; font-variant-numeric:tabular-nums; font-size:10px; }
.loop-meter { width:66px; height:1px; background:#393d3c; overflow:hidden; }
.loop-meter i { display:block; width:100%; height:100%; background:#e7dfcb; transform-origin:left; }
.loop-floor { position:absolute; z-index:5; bottom:24px; left:32px; right:32px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.loop-explore { display:flex; align-items:center; gap:12px; font-size:12px; min-height:44px; }
.loop-explore svg { width:18px; height:18px; transition:transform 220ms var(--loop-ease); }
.loop-instruction { display:flex; align-items:center; gap:10px; font-size:11px; color:#888e8b; }
.loop-instruction svg { width:15px; height:20px; }
.loop-utilities { display:flex; gap:8px; }
.loop-control { display:grid; place-items:center; width:44px; height:44px; border:1px solid #424645; border-radius:50%; color:#ecece6; background:#111516; transition:background 180ms ease,transform 140ms var(--loop-ease); }
.loop-control svg { width:17px; height:17px; }
.loop-control:active { transform:scale(.95); }
.loop-control:disabled { opacity:.3; }
.loop-sound { margin-left:8px; background:#edede6; color:#101214; border-color:transparent; }
.loop-sound[aria-pressed=true] .sound-slash { display:none; }
.loop-tooltip { position:absolute; z-index:6; top:0; left:0; padding:9px 13px; background:#eeeee9; color:#131516; font-size:12px; border-radius:9px; pointer-events:none; opacity:0; transition:opacity 120ms ease; white-space:nowrap; }
.loop-tooltip.is-visible { opacity:1; }
.loop-index { position:absolute; z-index:4; inset:135px max(24px,15vw) 112px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:15px; }
.loop-index a { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:67px; padding:15px 2px; border-bottom:1px solid #343839; font-size:clamp(20px,2.9vw,40px); letter-spacing:-.03em; }
.loop-index a>span:last-child { font-size:10px; color:#a6aaa6; letter-spacing:0; text-align:right; white-space:nowrap; }
.loop-index a:hover { color:#d7d2c4; }
.loop-index a:focus-visible { outline-offset:-2px; }
.loop-screen[data-view=index] .loop-canvas,.loop-screen[data-view=index] .loop-aperture,.loop-screen[data-view=index] .loop-caption,.loop-screen[data-view=index] .loop-instruction { visibility:hidden; }
.loop-screen[data-view=index] .loop-heading { opacity:.3; }
.loop-screen[data-view=index] .loop-prev,.loop-screen[data-view=index] .loop-next { display:none; }
.loop-fallback { display:none; position:absolute; left:50%; top:47%; width:min(460px,72vw); transform:translate(-50%,-50%); border-radius:8px; overflow:hidden; }
.loop-fallback img { width:100%; height:100%; object-fit:contain; }
.loop-screen.is-fallback .loop-fallback { display:block; }
.loop-screen.is-fallback .loop-canvas { visibility:hidden; }
.loop-screen[data-view=index] .loop-fallback { display:none; }

.loop-intro { inset:0; margin:0; padding:30px; width:100%; height:100dvh; max-width:none; max-height:none; border:0; color:#f1f0eb; background:#0c0d0efb; overflow:hidden; z-index:60; }
.loop-intro::backdrop { background:#0c0d0e; }
.loop-intro[open] { display:flex; align-items:center; justify-content:center; }
.loop-intro__content { text-align:center; max-width:600px; }
.loop-intro__identity { display:block; margin-bottom:38px; color:#939792; font-size:11px; letter-spacing:.03em; }
.loop-mark { position:relative; width:104px; height:70px; margin:0 auto 37px; transform:perspective(400px) rotateY(-18deg) rotateX(12deg) rotateZ(-8deg); border:2px solid #d7d1bd; border-radius:7px; box-shadow:7px 10px 0 -2px #313633,7px 10px 0 0 #777e73,0 18px 35px #d2d0b315; background:#101619; }
.loop-mark::before { content:''; position:absolute; inset:6px; border:1px solid #777f77; border-radius:2px; background:linear-gradient(130deg,#c0cfb912,#14191a 40%,#bdab871e); }
.loop-mark::after { content:''; position:absolute; top:5px; bottom:5px; left:50%; width:1px; background:#f4f2df; box-shadow:0 0 18px 3px #f0edd765; animation:exposure-scan 3.8s var(--loop-ease) infinite alternate; }
.loop-intro h2 { font:400 clamp(29px,4vw,48px)/1.09 Onest,Arial,sans-serif; letter-spacing:-.035em; margin:0 auto 18px; }
.loop-intro__role { font-size:13px; color:#a5aaa5; line-height:1.7; }
.loop-enter { display:inline-flex; align-items:center; gap:18px; margin-top:37px; background:#eeeee7; color:#151819; min-height:49px; padding:0 22px; border-radius:28px; font-size:13px; transition:transform 160ms var(--loop-ease),background 160ms ease; }
.loop-enter svg { width:16px; height:16px; }
.loop-enter .sound-slash { display:none; }
.loop-enter:active { transform:scale(.97); }
.loop-enter-quiet { display:block; margin:13px auto 0; min-height:44px; font-size:11px; color:#aaa; text-decoration:underline; text-underline-offset:4px; }
.loop-intro__footer { position:absolute; bottom:28px; left:30px; right:30px; display:flex; justify-content:space-between; font-size:10px; color:#737b75; }
.loop-intro.is-closing { pointer-events:none; }
@keyframes exposure-scan { 0%,12%{transform:translateX(-36px);opacity:.1} 85%,100%{transform:translateX(36px);opacity:.9} }
html[data-motion=reduced] .loop-mark::after { animation:none; opacity:.6; }
html[data-motion=reduced] .loop-tooltip { transition:none; }
@media(hover:hover) and (pointer:fine) {
  .loop-control:hover:not(:disabled) { background:#292e2d; }
  .loop-sound:hover { background:#fff; }
  .loop-open:hover svg { transform:translate(3px,-3px); }
  .loop-explore:hover svg { transform:translateY(3px); }
  .loop-enter:hover { background:#fff; transform:translateY(-2px); }
}
@media(min-width:1800px) { .loop-caption { bottom:130px; } .loop-screen { max-height:none; } }
@media(max-width:900px) {
  .header__inner { height:84px; padding-inline:24px; }
  .loop-switch { top:22px; }
  .loop-corner { left:24px; top:108px; font-size:11px; }
  .loop-floor { left:24px; right:24px; }
  .loop-index { inset:115px 7vw 110px; }
}
@media(max-width:640px) {
  .header__inner { height:78px; padding-inline:20px; gap:10px; }
  .brand img { width:99px; }
  .header__right { gap:8px; }
  .header .languages { display:flex; }
  .header .languages button { min-width:25px; font-size:10px; }
  .js .menu-button { width:76px; height:44px; }
  .menu-button .menu-button__label { font-size:12px; }
  .mobile-menu { top:72px; left:12px; right:12px; width:auto; height:calc(100dvh - 88px); padding:60px 25px 30px; border-radius:18px; }
  .mobile-menu a { font-size:clamp(36px,12vw,56px); padding-block:13px; }
  .loop-screen { min-height:660px; height:100svh; max-height:1050px; }
  .loop-switch { top:88px; padding:3px; gap:1px; }
  .loop-switch button { min-height:38px; padding:0 17px; font-size:11px; }
  .loop-corner { display:none; }
  .loop-corner span { display:none; }
  .loop-heading { font-size:72px; top:46%; }
  .loop-caption { bottom:106px; }
  .loop-open { font-size:26px; gap:12px; }
  .loop-open svg { width:19px; height:19px; }
  .loop-caption p { font-size:10px; margin-bottom:5px; }
  .loop-counter { margin-top:8px; gap:12px; }
  .loop-floor { left:20px; right:20px; bottom:max(20px,env(safe-area-inset-bottom)); gap:8px; }
  .loop-instruction { position:absolute; bottom:49px; left:0; right:0; justify-content:center; display:flex; font-size:9px; }
  .loop-instruction svg { display:none; }
  .loop-explore { font-size:11px; gap:7px; }
  .loop-utilities { gap:6px; }
  .loop-control { width:44px; height:44px; }
  .loop-sound { margin-left:4px; }
  .loop-index { inset:145px 24px 100px; padding-right:8px; }
  .loop-index a { min-height:64px; padding-block:17px; font-size:21px; gap:12px; }
  .loop-index a>span:last-child { font-size:9px; }
  .loop-aperture-label { top:-21px; font-size:8px; }
  .loop-tooltip { display:none; }
  .loop-intro { padding:24px; }
  .loop-intro__identity { margin-bottom:36px; }
  .loop-intro h2 { font-size:34px; }
  .loop-intro__role { font-size:12px; }
  .loop-intro__footer { left:24px; right:24px; bottom:24px; font-size:9px; flex-direction:column; gap:7px; }
  .viewer__shell { padding:16px; }
}
@media(max-width:359px) {
  .brand img { width:89px; }
  .loop-corner { font-size:9px; }
  .loop-floor { left:14px; right:14px; }
  .loop-control { width:44px; height:44px; min-width:44px; }
  .loop-open { font-size:23px; }
}
@media(max-height:740px) and (min-width:641px) {
  .loop-screen { min-height:600px; }
  .loop-caption { bottom:85px; }
  .loop-corner { top:108px; }
}