@font-face{font-family:Manrope;src:url('assets/manrope-light.ttf') format('truetype');font-style:normal;font-weight:300;font-display:swap}
:root{color-scheme:dark;font-family:Manrope,'Helvetica Neue',Arial,sans-serif;font-weight:300;background:#101412;color:#f3f4f0}
*{box-sizing:border-box}html,body{margin:0;padding:0}html{overscroll-behavior-y:none}body{min-width:280px;-webkit-font-smoothing:antialiased}html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0}html,body{scrollbar-width:none}
.story{height:950vh;height:950svh;position:relative}
.viewport{position:sticky;top:0;width:100%;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:#101412}
.scene,.poster,.poster img,.video-stack,.video-stack video,.shade,.transition-shade{position:absolute;inset:0;width:100%;height:100%}
.scene{overflow:hidden;will-change:opacity}.scene-waterfall{z-index:1}.scene-crowd{z-index:2;opacity:0}.scene-path{z-index:3;opacity:0}
.poster img,.video-stack video{object-fit:cover;object-position:50% 50%}.scene-crowd .poster img,.scene-crowd video{object-position:48.45% 50%}
.poster{z-index:0}.video-stack{z-index:1;pointer-events:none}.video-stack video{opacity:0}.video-stack video::-webkit-media-controls{display:none!important}
.shade{z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(4,9,8,.5),rgba(4,9,8,.11) 50%,transparent 75%),linear-gradient(180deg,rgba(0,0,0,.1),transparent 35%,transparent 75%,rgba(0,0,0,.12))}
.scene-crowd .shade{background:linear-gradient(90deg,rgba(0,0,0,.43),rgba(0,0,0,.12) 49%,rgba(0,0,0,.04) 75%)}
.copy-position{position:absolute;z-index:3;left:8.2%;top:26%;right:7%;pointer-events:none}.copy{max-width:790px;font-size:clamp(36px,3.6vw,62px);line-height:1.25;letter-spacing:-.045em;font-weight:300;text-wrap:pretty;text-shadow:0 2px 24px #0000001c}
.phrase{display:block;opacity:0;transform:translate3d(0,8px,0)}.phrase-second{margin-top:.22em}.copy-crowd{top:23%}.copy-crowd .copy{max-width:720px}.copy-crowd .phrase-second{margin-top:.34em}
.ready .scene-waterfall .phrase-first{animation:appear 1.1s cubic-bezier(.22,.61,.36,1) .8s both}.ready .scene-waterfall .phrase-second{animation:appear 1.1s cubic-bezier(.22,.61,.36,1) 1.9s both}
.crowd-entered .scene-crowd .phrase-first{animation:appear 1s cubic-bezier(.22,.61,.36,1) .25s both}.crowd-entered .scene-crowd .phrase-second{animation:appear 1s cubic-bezier(.22,.61,.36,1) 1.25s both}
.path-entered .scene-path .phrase-first{animation:appear 1.2s cubic-bezier(.22,.61,.36,1) .45s both}
.transition-shade{z-index:4;background:#0b100f;opacity:0;pointer-events:none;will-change:opacity}
.scroll-mark {
  position: absolute; z-index: 5; left: 50%; bottom: max(0px, env(safe-area-inset-bottom));
  transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center;
  gap: clamp(7px, 1.2svh, 13px); min-height: 44px; padding: 0 10px; border: 0;
  background: transparent; color: #eee3d1; cursor: pointer; white-space: nowrap;
  font: 480 clamp(11px, 1vw, 14px) / 1.2 Onest, sans-serif;
  text-transform: uppercase; letter-spacing: .30em; text-indent: .30em;
  text-shadow: 0 1px 3px #08100ff2, 0 0 8px #08100fcc;
  animation: scroll-tone 3.2s ease-in-out infinite;
}
.scroll-mark::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -22px -48px 0; background: radial-gradient(ellipse at 50% 48%, #0b12135c, transparent 72%);
}
.scroll-mark::after {
  content: ''; width: 1px; height: clamp(30px, 6.2svh, 82px);
  background: linear-gradient(currentColor, transparent); filter: drop-shadow(0 0 1px #28252288);
}
.viewport.with-credits .scroll-mark::after { height: clamp(18px, 3.2svh, 36px); }
@keyframes scroll-tone { 0%, 100% { color: #d4c8b3; } 50% { color: #fff8ec; } }
.scroll-mark:focus-visible { outline: 1px solid #fffc; outline-offset: -3px; border-radius: 3px; }
.playback-resume {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
  z-index: 6; padding: 10px 16px; min-height: 44px; border: 1px solid #f1e6d766; border-radius: 3px;
  color: #f6eee1; background: #20221ed9; font: 400 14px Onest, sans-serif; cursor: pointer;
}
.playback-resume::before { content: '▶'; margin-right: 8px; font-size: .8em; }
.playback-resume[hidden], .video-stack[hidden] { display: none; }
body.video-enabled .video-stack:not([hidden]) { display: block; }
.mobile-break{display:none}.accessible-story{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes appear{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(min-width:1800px){.copy-position{left:10%;top:29%}.copy{font-size:66px}.copy-crowd{top:26%}}
@media(max-width:1050px) and (orientation:portrait){.copy-position{left:8%;right:8%;top:15%}.copy{font-size:clamp(32px,4.8vw,48px);line-height:1.3;max-width:670px;letter-spacing:-.035em}.copy-crowd{top:17%}.shade{background:linear-gradient(180deg,rgba(0,0,0,.27),rgba(0,0,0,.35) 15%,rgba(0,0,0,.22) 32%,transparent 48%,transparent 85%,rgba(0,0,0,.08))}.scene-crowd .shade{background:linear-gradient(180deg,rgba(0,0,0,.19),rgba(0,0,0,.38) 18%,rgba(0,0,0,.23) 38%,transparent 53%,transparent 85%,rgba(0,0,0,.08))}}
@media(max-width:600px) and (orientation:portrait){.copy-position{top:14.8%;left:8%;right:6%}.copy{font-size:clamp(26px,7.3vw,36px);line-height:1.32;max-width:none;letter-spacing:-.035em}.mobile-break{display:block}.phrase-second{margin-top:.45em;max-width:12em}.copy-crowd{top:17%}.copy-crowd .phrase-second{margin-top:.55em;max-width:10em}.scene-crowd .poster img,.scene-crowd video{object-position:50% 50%}}
@media(max-height:500px) and (orientation:landscape){.copy-position{top:22%;left:7%}.copy{font-size:clamp(24px,4.2vw,36px);max-width:600px}.copy-crowd{top:18%}.scroll-mark{left:auto;right:max(8px,env(safe-area-inset-right));transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.phrase{opacity:1;transform:none}.video-stack{display:none}.scene{will-change:auto}}


@font-face {
  font-family: Onest;
  src: url('assets/onest.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
.scene-path { background: #1e221f; }
.film-plane {
  position: absolute; left: 50%; top: 50%;
  width: min(100%, 178svh); height: min(100%, 218vw);
  transform: translate(-50%, -50%); overflow: hidden;
}
.team-office {
  --unit: 1px; --sign: 0; --details: 1; --names: 0; --promise: 0;
  /* The soles are at y=943 in the 1872 × 1104 office frame. */
  --sole-y: calc(50% + var(--unit) * 391);
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  color: #ebe4d7; font-family: Onest, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wall-sign, .wall-promise {
  position: absolute; left: calc(50% - var(--unit) * 44); margin: 0;
  width: min(90%, max(265px, calc(var(--unit) * 490)));
  text-align: center; text-shadow: 0 1px 2px #181613a0;
  transform: translateX(-50%);
}
.wall-sign { top: var(--title-y, 5%); opacity: var(--title-opacity, 0); }
.wall-sign h2 {
  margin: 0; font-weight: 400; font-size: clamp(26px, calc(var(--unit) * 49), 61px);
  line-height: 1.06; letter-spacing: -.045em;
  transform: scale(var(--title-scale, 1)); transform-origin: center top;
}
.wall-details { opacity: var(--details); }
.wall-details p {
  font-size: clamp(11px, calc(var(--unit) * 16), 19px); font-weight: 350;
  line-height: 1.25; letter-spacing: .065em; text-transform: uppercase;
  margin: clamp(5px, calc(var(--unit) * 8), 12px) 0;
}
.contact-strip {
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid #291e1366;
  border-radius: 4px; box-shadow: inset 1px 1px 2px #140d0840, 1px 1px 1px #eee1cc1c;
  color: #efe6d6; padding: 0 3px;
}
.contact-strip a { display: grid; place-items: center; width: 44px; height: 44px; color: inherit; pointer-events: auto; border-radius: 3px; }
.contact-strip a:hover { color: #fff7e8; background: #efe2c512; }
.contact-strip a:focus-visible { outline: 2px solid #f0e4cc; outline-offset: -3px; }
.contact-strip svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.road-loop-stack { position: absolute; inset: 0; }
.wall-promise {
  top: var(--promise-y, 10%); opacity: var(--promise); line-height: 1.24;
  font-size: clamp(18px, calc(var(--unit) * 28), 37px); letter-spacing: -.024em; font-weight: 340;
}
.credit-shade {
  position: absolute; inset: calc(var(--sole-y) - 12px) 0 0;
  background: linear-gradient(transparent, #121411a8 34%, #121411b8 70%, #121411a8);
  opacity: var(--names);
}
.partner {
  position: absolute; top: calc(var(--sole-y) + clamp(5px, var(--unit) * 12, 16px));
  transform: translateX(-50%); opacity: var(--names);
  text-align: center; white-space: nowrap; color: #fff;
  text-shadow: 0 1px 3px #11130fe6;
  font: 450 clamp(15px, calc(var(--unit) * 20), 25px) / 1.22 Onest, sans-serif;
}
.partner-andrey { left: calc(50% - var(--unit) * 126); }
.partner-taimuraz { left: calc(50% + var(--unit) * 122); }
.partner::before {
  content: ''; display: block; width: clamp(22px, calc(var(--unit) * 36), 47px);
  height: 1px; background: #c8b999bf; margin: 0 auto clamp(5px, .75vh, 10px);
}
.partner strong {
  display: block; margin-top: .1em; font-size: 1.26em;
  text-transform: uppercase; font-weight: 550; letter-spacing: .035em;
}
@media (orientation: portrait) {
  .wall-sign, .wall-promise { left: 50%; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .wall-sign, .wall-promise { left: 20%; width: 34%; }
  .wall-sign h2 { font-size: clamp(20px, 3.4vw, 26px); }
  .wall-promise { font-size: 18px; }
  .team-office::before {
    content: ''; position: absolute; inset: 0 60% 0 0;
    background: linear-gradient(90deg,#11140fb0,#14150f73,transparent); opacity: var(--sign);
  }
  .partner { top: calc(var(--sole-y) + 3px); font-size: clamp(12px, 2.8svh, 14px); }
  .partner::before { display: none; }
}

.wall-promise .phrase-group { white-space: nowrap; }

.copy-waterfall, .copy-path { text-align: left; }
.copy-crowd { right: 8.2%; text-align: right; }
.copy-crowd .copy, .copy-crowd .phrase { margin-inline-start: auto; }
@media (min-width: 1800px) { .copy-crowd { right: 10%; } }
@media (max-width: 1050px) and (orientation: portrait) { .copy-crowd { right: 8%; } }
@media (max-height: 500px) and (orientation: landscape) { .copy-crowd { right: 7%; } }