/* One spatial stage. The document supplies accessible reading order. */
:root {
  --paper:#edece6;
  --muted:#a8afbb;
  --blue:#738bff;
  --line:#edece62b;
  --edge:clamp(24px,4.5vw,82px);
  --font:Manrope,sans-serif;
  --display:Manrope,sans-serif;
  --vh:100svh;
  color-scheme:dark
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:auto;
  background:#090d16;
  scrollbar-color:#65759a #111723
}
body {
  margin:0;
  color:var(--paper);
  font:400 15px/1.75 var(--font);
  background:#090d16;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  background:none;
  border:0
}
a,button {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:2px solid #91a7ff;
  outline-offset:7px
}
h1,h2,p,dl,dd {
  margin:0
}
h1,h2 {
  font-family:var(--display);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.055em
}
::selection {
  background:#576cbe;
  color:white
}
.skip-link {
  position:fixed;
  z-index:200;
  inset:-100px auto auto 20px;
  background:#31478a;
  padding:12px
}
.skip-link:focus {
  top:20px
}
#world {
  position:fixed;
  inset:0;
  z-index:0;
  background:#090d16;
  overflow:hidden
}
#world-canvas {
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1.4s
}
body.world-ready #world-canvas {
  opacity:1
}
.world-fallback {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse at 50% 30%,#293653,#090d16 70%)
}
.world-fallback img {
  width:clamp(180px,30vw,450px);
  filter:drop-shadow(25px 40px 0 #152140);
  transform:perspective(900px) rotateY(-15deg)
}
.world-ready .world-fallback {
  visibility:hidden
}
.fallback-arches {
  position:absolute;
  inset:5% 15% 20%;
  border:1px solid #8ba2e944;
  border-radius:50% 50% 0 0;
  box-shadow:0 0 0 40px #9baeed05,0 0 0 80px #9baeed04
}
.film-frame {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(#070b1355,transparent 22%,transparent 55%,#070b1370);
  box-shadow:inset 0 0 120px #04060944
}
.scroll-progress {
  position:fixed;
  inset:0 0 auto;
  height:2px;
  z-index:100;
  background:#ffffff08
}
.scroll-progress span {
  display:block;
  height:100%;
  width:0;
  background:#8fa4ff;
  box-shadow:0 0 12px #8fa4ff66
}
.header {
  position:fixed;
  inset:0 var(--edge) auto;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  z-index:50;
  border-bottom:1px solid #ffffff16
}
.header:before {
  content:'';
  position:absolute;
  inset:0 calc(-1 * var(--edge));
  z-index:-1;
  background:linear-gradient(#070c16d0,#070c1600);
  pointer-events:none
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  direction:ltr
}
.brand img {
  width:44px;
  height:32px;
  object-fit:contain
}
.brand>span {
  font:800 17px/1 Manrope,sans-serif;
  letter-spacing:.02em
}
.brand small {
  display:block;
  font:500 6px/1 Manrope,sans-serif;
  letter-spacing:.18em;
  margin-top:8px
}
.header-location {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:8px;
  letter-spacing:.16em;
  opacity:.7
}
.live-dot {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#a7b9fc;
  box-shadow:0 0 10px #8fa4ff88
}
.header-actions {
  display:flex;
  align-items:center;
  gap:34px
}
.language-button {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0
}
.language-alt {
  color:#b1b9cc;
  border-inline-start:1px solid #ffffff2b;
  padding-inline-start:12px
}
.index-button {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:12px;
  padding:12px 0
}
.index-button i {
  display:flex;
  flex-direction:column;
  gap:5px
}
.index-button b {
  display:block;
  width:24px;
  height:1px;
  background:#d5dbed;
  transition:transform .3s
}
.index-button[aria-expanded=true] b:first-child {
  transform:translateY(3px) rotate(45deg)
}
.index-button[aria-expanded=true] b:last-child {
  transform:translateY(-3px) rotate(-45deg)
}
.chapter-index {
  position:fixed;
  inset:0;
  z-index:40;
  background:#0d1422f5;
  backdrop-filter:blur(28px);
  padding:140px max(var(--edge),12vw) 65px;
  overflow-y:auto
}
.chapter-index[hidden] {
  display:none
}
.index-label {
  font-size:9px;
  letter-spacing:.16em;
  color:#8f9cb8;
  margin-bottom:30px
}
.index-links {
  max-width:1000px
}
.index-links>a {
  display:flex;
  align-items:center;
  gap:24px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font:400 clamp(21px,3.2vw,43px)/1.5 var(--display);
  letter-spacing:-.03em;
  transition:color .2s,padding .3s
}
.index-links>a:hover {
  color:#a4b6ff;
  padding-inline-start:12px
}
.index-links small {
  font:10px monospace;
  color:#7d8eae
}
.index-links b {
  font-weight:400;
  font-size:26px;
  margin-inline-start:auto;
  color:#8e9fd3
}
.index-footer {
  margin-top:35px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  font-size:10px;
  color:#a3acc0
}
.reading-button {
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:10px
}
.scene-rail {
  position:fixed;
  inset:50% var(--edge) auto auto;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:18px;
  z-index:10;
  direction:ltr
}
.scene-rail a {
  display:flex;
  align-items:center;
  justify-content:end;
  gap:12px;
  font:8px monospace;
  color:#9ba9c0
}
.scene-rail a span {
  opacity:0;
  transition:opacity .3s
}
.scene-rail a i {
  display:block;
  width:13px;
  height:1px;
  background:#bbc8e550;
  transition:width .4s,background .4s
}
.scene-rail a:hover span,.scene-rail a.active span {
  opacity:1
}
.scene-rail a.active i {
  width:25px;
  background:#d7e1ff
}
.journey-hud {
  position:fixed;
  inset:auto var(--edge) 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:15;
  gap:25px;
  font-size:8px;
  letter-spacing:.13em;
  pointer-events:none
}
.journey-hud a,.journey-hud button {
  pointer-events:auto
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:8px;
  color:#c2c9d7
}
.scroll-line {
  position:relative;
  width:1px;
  height:31px;
  background:#ffffff25;
  overflow:hidden
}
.scroll-line:after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:12px;
  background:#b6c4ff;
  animation:scroll-line 2.4s ease-in-out infinite
}
.chapter-status {
  display:flex;
  align-items:center;
  gap:14px;
  color:#c5cee0;
  direction:ltr;
  font-size:8px
}
.status-number {
  font:12px monospace
}
.status-divider {
  width:38px;
  height:1px;
  background:#b6c4e147
}
.status-total {
  color:#6c7993
}
.motion-button {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:9px;
  color:#b7c2d6;
  letter-spacing:0
}
.motion-icon {
  font:12px monospace;
  color:#9cb2ff
}
.credits-button {
  position:fixed;
  inset:auto auto 82px var(--edge);
  z-index:15;
  font-size:8px;
  letter-spacing:.08em;
  color:#8a96ae;
  padding:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s
}
body[data-world=airport] .credits-button,body[data-world=bridge] .credits-button {
  opacity:1;
  pointer-events:auto
}
.credits-dialog {
  width:min(560px,calc(100% - 40px));
  padding:45px;
  border:1px solid #b9c9ff38;
  background:#121b2a;
  color:#c4cfe2;
  font:13px/1.9 var(--font);
  box-shadow:0 30px 150px #0009
}
.credits-dialog::backdrop {
  background:#05080fc9;
  backdrop-filter:blur(10px)
}
.credits-dialog h2 {
  font-size:28px;
  margin-bottom:25px
}
.credits-dialog p {
  margin:15px 0
}
.credits-dialog a {
  text-decoration:underline;
  text-underline-offset:3px
}
.close-dialog {
  position:absolute;
  top:10px;
  right:15px;
  font-size:28px
}
.world-annotation {
  position:fixed;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  font:8px/1.5 var(--font);
  letter-spacing:.12em;
  color:#bbc8e5;
  pointer-events:none;
  opacity:0;
  max-width:220px;
  text-shadow:0 1px 8px #000
}
.world-annotation i {
  width:5px;
  height:5px;
  border:1px solid #ccd8ff;
  border-radius:50%;
  box-shadow:0 0 0 5px #8aa7ff12
}
.world-annotation:before {
  content:'';
  position:absolute;
  left:2px;
  bottom:16px;
  width:1px;
  height:32px;
  background:linear-gradient(transparent,#c6d7ff60)
}
.world-hover {
  position:fixed;
  padding:8px 13px;
  background:#121d32cc;
  border:1px solid #9ab5ff40;
  font-size:9px;
  backdrop-filter:blur(15px);
  z-index:30;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s
}
.world-hover.visible {
  opacity:1
}
main {
  position:relative;
  z-index:2;
  pointer-events:none
}
.chapter {
  height:calc(var(--vh) * (1 + var(--beats) * .82));
  position:relative
}
.chapter-stage {
  position:sticky;
  top:0;
  height:var(--vh);
  overflow:clip;
  pointer-events:none
}
.chapter-heading {
  position:absolute;
  inset:135px var(--edge) auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  text-transform:uppercase;
  font-size:8px;
  letter-spacing:.18em;
  color:#c1cbdf88
}
.chapter-heading>span:first-child {
  color:#ccd5e5
}
.scene-copy {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:160px max(100px,8vw) 110px;
  visibility:hidden;
  pointer-events:none;
  opacity:0
}
.scene-copy.active {
  visibility:visible;
  opacity:1
}
.copy-inner {
  width:clamp(300px,32vw,480px);
  position:relative;
  pointer-events:none
}
.copy-inner:before {
  content:'';
  position:absolute;
  inset:-60px -80px;
  z-index:-1;
  background:radial-gradient(ellipse,#060c16a8,transparent 72%);
  pointer-events:none
}
.copy-inner a,.copy-inner button {
  pointer-events:auto
}
.eyebrow {
  font:9px/1.7 var(--font);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#aabbe2;
  margin-bottom:25px
}
.scene-copy h2 {
  font-size:clamp(37px,4.2vw,66px);
  margin-bottom:26px;
  max-width:650px;
  text-wrap:balance
}
.scene-copy .body-copy {
  font-size:clamp(12px,1.05vw,15px);
  line-height:1.95;
  color:#c3cad8;
  max-width:460px;
  text-shadow:0 2px 18px #070c18
}
.scene-copy .body-copy+.body-copy {
  margin-top:18px
}
.hero {
  align-items:end;
  padding:0 var(--edge) 150px
}
.hero .copy-inner {
  width:100%;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  align-items:end;
  column-gap:60px
}
.hero .copy-inner:before {
  inset:-80px -100px;
  background:linear-gradient(0deg,#050a16ba,transparent)
}
.hero .eyebrow {
  grid-column:1/-1;
  margin-bottom:21px;
  font-size:8px
}
.hero h1 {
  font-size:clamp(42px,5.2vw,82px);
  line-height:1.04;
  max-width:850px;
  grid-row:2/span 2;
  text-wrap:balance
}
.hero-subtitle {
  font-size:clamp(15px,1.7vw,26px);
  letter-spacing:-.02em;
  color:#b6c5f0;
  max-width:290px;
  justify-self:end;
  padding-bottom:24px
}
.enter-link {
  display:inline-flex;
  align-items:center;
  gap:28px;
  justify-self:end;
  font-size:11px;
  padding-bottom:11px;
  border-bottom:1px solid #bac9e666;
  transition:color .25s
}
.enter-link i {
  font:24px/1 var(--font);
  font-style:normal;
  transition:transform .4s
}
.enter-link:hover {
  color:#b3c4ff
}
.enter-link:hover i {
  transform:translate(3px,-3px)
}
.service-tags {
  display:flex;
  gap:20px;
  list-style:none;
  padding:24px 0 0;
  margin:0;
  font-size:8px;
  letter-spacing:.09em;
  color:#9fb2df
}
.service-tags li {
  border-bottom:1px solid #a2b8ed40;
  padding-bottom:7px
}
.case-details {
  margin-top:28px
}
.case-details>div {
  padding:15px 0;
  border-top:1px solid #afc1ed30
}
.case-details dt {
  font-size:11px;
  color:#e1e6f1;
  margin-bottom:7px
}
.case-details dd {
  font-size:12px;
  line-height:1.8;
  color:#b7c4dd;
  max-width:440px
}
.development-badge {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#b8b8a2;
  border:1px solid #d8d3b342;
  padding:5px 10px;
  font-size:8px;
  letter-spacing:.11em;
  margin-bottom:22px
}
.development-badge i {
  width:4px;
  height:4px;
  background:#d6ccb1;
  border-radius:50%
}
.project h2 {
  font-size:clamp(35px,4vw,60px)
}
.project .eyebrow {
  margin-bottom:18px
}
.chapter-beats {
  position:absolute;
  left:max(100px,8vw);
  bottom:105px;
  display:flex;
  gap:18px;
  pointer-events:auto;
  direction:ltr
}
.chapter-beats button {
  padding:0;
  display:flex;
  align-items:center;
  gap:8px;
  font:8px monospace;
  color:#8d9bb5
}
.chapter-beats button span {
  opacity:.55
}
.chapter-beats button i {
  width:20px;
  height:1px;
  background:#a3b6e53a;
  transition:background .3s,width .3s
}
.chapter-beats button.active i {
  width:43px;
  background:#bbcbf7
}
.chapter-beats button.active span {
  color:#e8edff;
  opacity:1
}
.chapter-home .chapter-beats,.chapter-connected .chapter-beats,.chapter-contact .chapter-beats {
  display:none
}
.world-disclaimer {
  position:absolute;
  bottom:105px;
  right:var(--edge);
  font-size:7px;
  letter-spacing:.12em;
  color:#a1afc6
}
.finale {
  align-items:end;
  justify-content:center;
  text-align:center;
  padding-bottom:125px
}
.finale .copy-inner {
  width:100%;
  max-width:800px
}
.finale .eyebrow {
  margin-bottom:15px
}
.finale h2 {
  font-size:clamp(60px,7vw,108px);
  margin-bottom:12px
}
.finale .body-copy {
  max-width:100%;
  font-size:10px;
  letter-spacing:.11em
}
.finale .enter-link {
  margin-top:25px
}
.contact {
  align-items:end;
  padding:160px var(--edge) 88px
}
.contact .copy-inner {
  width:100%;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  column-gap:12vw;
  align-items:end
}
.contact .copy-inner:before {
  background:linear-gradient(0deg,#070d1be8,transparent);
  inset:-50px -100px
}
.contact .eyebrow {
  grid-column:1/-1
}
.contact h2 {
  font-size:clamp(60px,7.4vw,116px);
  margin-bottom:0
}
.contact .body-copy {
  font-size:13px;
  max-width:370px;
  padding-bottom:10px
}
.contact-links {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr 1.1fr;
  gap:40px;
  margin-top:45px;
  border-top:1px solid var(--line);
  padding-top:23px
}
.contact-links>div>span {
  display:block;
  font-size:8px;
  letter-spacing:.16em;
  color:#8498c0;
  margin-bottom:13px
}
.contact-links a {
  font-size:17px;
  white-space:nowrap
}
.contact-links address {
  font-size:11px;
  color:#adb9cf;
  font-style:normal;
  line-height:1.9
}
.contact-links .map-link {
  font-size:9px;
  display:inline-block;
  margin-top:9px;
  color:#a4b9ff
}
footer {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:8px;
  color:#7e90b3;
  margin-top:35px
}
.chapter-contact {
  height:calc(var(--vh) * 1.5)
}
.loading-mark {
  position:fixed;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  z-index:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:8px;
  letter-spacing:.2em;
  color:#a8b9e3;
  pointer-events:none
}
.loading-mark i {
  width:30px;
  height:1px;
  background:#607bb4;
  animation:loading 1s ease-in-out infinite
}
.world-ready .loading-mark,.world-unavailable .loading-mark {
  display:none
}
.world-unavailable .world-annotation {
  display:none
}
.no-script {
  position:relative;
  z-index:100;
  background:#0f182a;
  min-height:100vh;
  padding:15vh 10vw
}
.no-script img {
  width:150px
}
.no-script h1 {
  font-size:50px;
  max-width:800px;
  margin:45px 0
}
.no-script p {
  max-width:700px;
  margin:30px 0
}
.no-script a {
  text-decoration:underline
}
.reading-mode .chapter {
  height:auto!important;
  min-height:100svh;
  background:#0a1223c9
}
.reading-mode .chapter-stage {
  height:auto;
  position:relative;
  padding:125px var(--edge) 100px;
  overflow:visible
}
.reading-mode .scene-copy {
  position:relative;
  visibility:visible;
  opacity:1!important;
  padding:35px 0;
  display:block
}
.reading-mode .copy-inner {
  width:100%;
  max-width:850px;
  display:block
}
.reading-mode .scene-copy h2 {
  font-size:45px
}
.reading-mode .scene-copy .body-copy {
  max-width:750px;
  font-size:15px
}
.reading-mode .hero h1 {
  font-size:60px;
  margin:35px 0
}
.reading-mode .hero-subtitle {
  padding-bottom:30px
}
.reading-mode .chapter-heading {
  position:relative;
  inset:auto;
  margin-bottom:40px
}
.reading-mode .chapter-beats,.reading-mode .world-annotation,.reading-mode .world-disclaimer,.reading-mode .scene-rail {
  display:none
}
.reading-mode .copy-inner:before {
  display:none
}
.reading-mode .contact-links {
  display:grid
}
.reading-mode footer {
  display:flex
}
.reading-mode .journey-hud {
  background:#0b1426e8;
  padding:12px 0
}
.reading-mode .finale {
  text-align:start
}
.reading-mode .scene-copy .copy-inner>* {
  opacity:1!important;
  transform:none!important
}
[dir=rtl] {
  --font:Cairo,sans-serif;
  --display:Cairo,sans-serif
}
[dir=rtl] h1,[dir=rtl] h2 {
  line-height:1.35;
  letter-spacing:-.035em
}
[dir=rtl] .eyebrow,[dir=rtl] .chapter-heading,[dir=rtl] .body-copy,[dir=rtl] .service-tags {
  letter-spacing:0
}
[dir=rtl] .scene-copy {
  justify-content:start
}
[dir=rtl] .hero .copy-inner {
  grid-template-columns:1.5fr 1fr
}
[dir=rtl] .hero {
  justify-content:stretch
}
[dir=rtl] .hero-subtitle {
  justify-self:end
}
[dir=rtl] .scene-rail {
  inset:50% auto auto var(--edge)
}
[dir=rtl] .chapter-beats {
  left:auto;
  right:max(100px,8vw)
}
[dir=rtl] .world-disclaimer {
  right:auto;
  left:var(--edge)
}
[dir=rtl] .contact .copy-inner {
  grid-template-columns:1.4fr 1fr
}
[dir=rtl] .finale {
  justify-content:center
}
[dir=rtl] .hero h1 {
  font-size:clamp(48px,5.4vw,80px)
}
[dir=rtl] .contact h2 {
  font-size:clamp(55px,7vw,100px)
}
[dir=rtl] .credits-button {
  left:auto;
  right:var(--edge)
}
[dir=rtl] .header-location {
  letter-spacing:0
}
@keyframes scroll-line {
  0% {
    transform:translateY(-12px)
  }
  70%,100% {
    transform:translateY(35px)
  }
}
@keyframes loading {
  50% {
    opacity:.3;
    transform:scaleX(.35)
  }
}
@media(min-width:1800px) {
  .scene-copy {
    padding-inline:10vw
  }
  .copy-inner {
    width:500px
  }
  .scene-copy h2 {
    font-size:72px
  }
  .scene-copy .body-copy {
    font-size:16px
  }
}
@media(max-width:1100px) {
  .header {
    height:85px
  }
  .header-location {
    font-size:7px
  }
  .scene-copy {
    padding-inline:var(--edge)
  }
  .copy-inner {
    width:360px
  }
  .scene-copy h2 {
    font-size:44px
  }
  .scene-copy .body-copy {
    font-size:13px
  }
  .chapter-heading {
    top:112px
  }
  .chapter-beats {
    left:var(--edge)
  }
  [dir=rtl] .chapter-beats {
    right:var(--edge)
  }
  .hero {
    padding-bottom:135px
  }
  .hero h1 {
    font-size:61px
  }
  .hero .copy-inner {
    column-gap:40px
  }
  .hero-subtitle {
    font-size:21px
  }
  .contact {
    padding-bottom:100px
  }
  .contact .copy-inner {
    column-gap:7vw
  }
  .contact h2 {
    font-size:76px
  }
  .contact-links {
    gap:25px
  }
  .contact-links a {
    font-size:15px
  }
}
@media(max-width:700px) {
  :root {
    --edge:24px
  }
  .header {
    height:78px;
    gap:20px
  }
  .brand img {
    width:34px;
    height:26px
  }
  .brand>span {
    font-size:14px
  }
  .brand small {
    font-size:5px;
    margin-top:7px
  }
  .header-location {
    display:none
  }
  .header-actions {
    gap:23px
  }
  .language-button {
    font-size:9px;
    gap:8px
  }
  .language-alt {
    padding-inline-start:8px
  }
  .index-button {
    font-size:10px;
    gap:11px
  }
  .index-button b {
    width:20px
  }
  .chapter-index {
    padding:110px 28px 70px
  }
  .index-label {
    font-size:7px;
    margin-bottom:20px
  }
  .index-links>a {
    padding:12px 0;
    font-size:23px;
    gap:16px
  }
  .index-footer {
    font-size:9px;
    gap:22px
  }
  .scene-rail {
    display:none
  }
  .journey-hud {
    bottom:22px;
    gap:12px
  }
  .scroll-cue {
    font-size:6px;
    gap:9px;
    max-width:110px;
    letter-spacing:.09em
  }
  .scroll-line {
    height:25px
  }
  .chapter-status {
    font-size:6px;
    gap:8px
  }
  .status-number {
    font-size:10px
  }
  .status-divider {
    width:18px
  }
  .status-name {
    max-width:105px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .status-total {
    display:none
  }
  .motion-button {
    font-size:0;
    gap:0;
    padding:10px
  }
  .motion-icon {
    font-size:11px
  }
  .chapter-heading {
    inset:104px var(--edge) auto;
    font-size:6px;
    letter-spacing:.1em
  }
  .chapter-heading>span:last-child {
    max-width:130px;
    text-align:end
  }
  .scene-copy {
    padding:130px var(--edge) 105px;
    align-items:end
  }
  .copy-inner {
    width:100%;
    max-width:440px
  }
  .copy-inner:before {
    inset:-60px -60px;
    background:linear-gradient(0deg,#060d1de8,#060d1db0 60%,transparent)
  }
  .eyebrow {
    font-size:7px;
    letter-spacing:.12em;
    margin-bottom:15px
  }
  .scene-copy h2 {
    font-size:36px;
    max-width:380px;
    margin-bottom:18px;
    line-height:1.09
  }
  .scene-copy .body-copy {
    font-size:11px;
    line-height:1.9;
    max-width:380px
  }
  .scene-copy .body-copy+.body-copy {
    margin-top:10px
  }
  .hero {
    padding-bottom:130px
  }
  .hero .copy-inner {
    display:block;
    max-width:100%
  }
  .hero h1 {
    font-size:44px;
    max-width:410px;
    line-height:1.03
  }
  .hero .eyebrow {
    font-size:6px;
    letter-spacing:.12em;
    margin-bottom:17px
  }
  .hero-subtitle {
    font-size:17px;
    max-width:100%;
    margin-top:15px;
    padding:0;
    color:#bac9ef
  }
  .enter-link {
    font-size:10px;
    gap:28px;
    margin-top:25px;
    padding-bottom:9px
  }
  .enter-link i {
    font-size:19px
  }
  .chapter-beats {
    bottom:76px;
    left:var(--edge);
    gap:13px
  }
  .chapter-beats button {
    font-size:7px;
    gap:6px
  }
  .chapter-beats button i {
    width:13px
  }
  .chapter-beats button.active i {
    width:27px
  }
  .service-tags {
    font-size:6px;
    gap:15px;
    padding-top:18px
  }
  .case-details {
    margin-top:18px
  }
  .case-details>div {
    padding:10px 0
  }
  .case-details dt {
    font-size:9px;
    margin-bottom:4px
  }
  .case-details dd {
    font-size:10px;
    line-height:1.8
  }
  .project h2 {
    font-size:33px
  }
  .project .body-copy {
    font-size:10.5px
  }
  .development-badge {
    font-size:6px;
    letter-spacing:.1em;
    margin-bottom:15px
  }
  .world-disclaimer {
    bottom:78px;
    right:24px;
    font-size:5px;
    max-width:90px;
    text-align:end
  }
  .world-annotation {
    font-size:6px;
    letter-spacing:.08em;
    max-width:160px
  }
  .world-annotation:before {
    height:20px
  }
  .credits-button {
    bottom:58px;
    font-size:6px
  }
  .credits-dialog {
    padding:35px 25px;
    font-size:11px
  }
  .finale {
    padding-bottom:115px
  }
  .finale h2 {
    font-size:64px
  }
  .finale .body-copy {
    font-size:8px
  }
  .finale .eyebrow {
    font-size:6px
  }
  .contact {
    padding:130px var(--edge) 75px
  }
  .contact .copy-inner {
    display:block;
    max-width:100%
  }
  .contact h2 {
    font-size:47px;
    margin-bottom:16px
  }
  .contact .eyebrow {
    margin-bottom:12px
  }
  .contact .body-copy {
    font-size:10px;
    max-width:340px
  }
  .contact-links {
    grid-template-columns:1fr 1fr;
    gap:20px 10px;
    margin-top:23px;
    padding-top:18px
  }
  .contact-links>div:last-child {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:15px
  }
  .contact-links>div:last-child>span {
    grid-column:1/-1
  }
  .contact-links>div>span {
    font-size:6px;
    margin-bottom:8px;
    letter-spacing:.1em
  }
  .contact-links a {
    font-size:11px;
    white-space:normal
  }
  .contact-links address {
    font-size:8px;
    line-height:1.9
  }
  .contact-links .map-link {
    font-size:7px;
    margin-top:0;
    align-self:center
  }
  footer {
    margin-top:23px;
    gap:20px;
    font-size:6px
  }
  .world-fallback img {
    transform:translateY(-130px) perspective(700px) rotateY(-15deg);
    width:230px
  }
  .film-frame {
    background:linear-gradient(#070b1355,transparent 20%,transparent 40%,#070b1370)
  }
  [dir=rtl] .scene-copy h2 {
    font-size:32px;
    line-height:1.35
  }
  [dir=rtl] .hero h1 {
    font-size:43px;
    line-height:1.35
  }
  [dir=rtl] .hero .copy-inner {
    display:block
  }
  [dir=rtl] .contact .copy-inner {
    display:block
  }
  [dir=rtl] .contact h2 {
    font-size:41px;
    line-height:1.3
  }
  [dir=rtl] .body-copy {
    font-size:11px;
    line-height:1.95
  }
  [dir=rtl] .contact .body-copy {
    font-size:10px
  }
  [dir=rtl] .case-details dt {
    font-size:10px
  }
  [dir=rtl] .case-details dd {
    font-size:10px
  }
  [dir=rtl] .finale h2 {
    font-size:52px
  }
  [dir=rtl] .chapter-beats {
    right:24px
  }
  .reading-mode .scene-copy {
    padding:30px 0
  }
  .reading-mode .scene-copy h2 {
    font-size:34px
  }
  .reading-mode .hero h1 {
    font-size:45px
  }
  .reading-mode .scene-copy .body-copy {
    font-size:13px
  }
  .reading-mode .chapter-stage {
    padding-top:110px
  }
  .reading-mode .contact-links {
    grid-template-columns:1fr
  }
  .reading-mode .contact-links>div:last-child {
    display:block;
    grid-column:auto
  }
  .reading-mode .contact-links a {
    font-size:15px
  }
  .reading-mode .contact-links address {
    font-size:11px
  }
  .reading-mode .contact h2 {
    font-size:42px
  }
}
@media(max-height:700px) and (min-width:701px) {
  .header {
    height:75px
  }
  .chapter-heading {
    top:96px
  }
  .scene-copy {
    padding-top:130px;
    padding-bottom:105px
  }
  .scene-copy h2 {
    font-size:38px;
    margin-bottom:18px
  }
  .scene-copy .body-copy {
    font-size:11px
  }
  .eyebrow {
    margin-bottom:13px
  }
  .hero {
    padding-bottom:105px
  }
  .hero h1 {
    font-size:56px
  }
  .hero-subtitle {
    font-size:18px
  }
  .case-details>div {
    padding:10px 0
  }
  .case-details dd {
    font-size:10px
  }
  .contact h2 {
    font-size:65px
  }
  .contact-links {
    margin-top:25px;
    padding-top:15px
  }
  .contact-links address {
    font-size:10px
  }
  .contact-links a {
    font-size:13px
  }
  .contact .body-copy {
    font-size:11px
  }
  footer {
    margin-top:20px
  }
  .chapter-beats,.world-disclaimer {
    bottom:78px
  }
  .journey-hud {
    bottom:20px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  html {
    scroll-behavior:auto
  }
}