/* Continuous 3D journey, readable HTML content and service-specific imagery. */
:root { --cinema-ink:#080b10; --cinema-ice:#c6f9f4; --cinema-purple:#c6b5ef; }
html { scroll-padding-top:96px; }
body { background:var(--cinema-ink); }
.cinema-header { position:fixed; inset:0 0 auto; z-index:80; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 4vw; background:linear-gradient(#080b10d9,transparent); pointer-events:none; }
.cinema-header>* { pointer-events:auto; }
.cinema-brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:white; }
.cinema-brand>img { width:29px; height:40px; object-fit:contain; }
.cinema-brand>span { font-size:27px; line-height:1; letter-spacing:-1.4px; font-weight:600; }
.cinema-brand>span>span { color:#d0baef; }
.cinema-brand small { display:block; font:7px Consolas,monospace; letter-spacing:1.4px; color:#bdc1ca; margin-top:7px; }
.cinema-nav { display:flex; align-items:center; gap:4px; background:#0b0f18c9; border:1px solid #ffffff24; padding:5px; border-radius:32px; backdrop-filter:blur(18px); }
.cinema-nav>* { background:transparent; color:#e0e0e6; border:0; border-radius:24px; font-size:11px; padding:11px 18px; text-decoration:none; cursor:pointer; transition:background .25s; }
.cinema-nav>*:hover { background:#ffffff12; }
.cinema-nav>button>span { margin-left:8px; }
.cinema-quote { display:flex; align-items:center; gap:10px; font-size:11px; background:#0a0e17b8; color:#e6e0ef; border:1px solid #ffffff2e; border-radius:25px; padding:13px 16px; cursor:pointer; }
.cinema-header .quote-count { background:none; color:var(--cinema-ice); width:auto; height:auto; box-shadow:none; border-radius:0; }
.cinema-quote .icon { width:13px; height:13px; }
.cinema-header.commerce-mode { background:#080b10f2; backdrop-filter:blur(18px); border-bottom:1px solid #ffffff20; }

.cinematic-journey { height:800svh; position:relative; isolation:isolate; }
.cinema-stage { position:sticky; top:0; height:100dvh; min-height:650px; overflow:hidden; background:#080b10; contain:layout paint; }
.cinema-topline { position:absolute; top:112px; left:5vw; right:5vw; display:flex; justify-content:space-between; z-index:5; color:#9b9da8; font:8px Consolas,monospace; letter-spacing:1.5px; pointer-events:none; }
.intro-photo { position:absolute; right:0; top:0; width:64%; height:100%; overflow:hidden; opacity:.65; transition:opacity .6s; }
.intro-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.intro-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#080b10 0%,#080b1066 30%,#080b101a 75%),linear-gradient(0deg,#080b10 0%,transparent 45%,#080b1077); }
.cinema-stage:not([data-chapter="0"]) .intro-photo { opacity:0; visibility:hidden; }
#cinema-canvas { position:absolute; top:15%; right:5%; width:49%; height:68%; z-index:2; opacity:0; pointer-events:none; transition:opacity .6s; }
.cinema-stage[data-ready="true"] #cinema-canvas { opacity:1; }

.cinema-fallback { position:absolute; top:15%; right:5%; width:49%; height:68%; z-index:1; transition:opacity .6s; }
.cinema-fallback>img { width:100%; height:100%; object-fit:contain; padding:45px; }
.cinema-stage[data-ready="true"][data-logo-ready="true"] .cinema-fallback,.cinema-stage:not([data-chapter="0"]) .cinema-fallback { opacity:0; }
.cinema-panels { position:absolute; inset:0; z-index:5; pointer-events:none; }
.cinema-panel { position:absolute; left:5vw; width:34%; max-width:500px; top:50%; opacity:0; visibility:hidden; transform:translate3d(0,calc(-50% + 24px),0); transition:opacity .45s,transform .65s; pointer-events:none; }
.cinema-panel.is-current { opacity:1; visibility:visible; transform:translate3d(0,-50%,0); }
.cinema-panel.is-current button,.cinema-panel.is-current a { pointer-events:auto; }
.intro-panel { width:43%; max-width:610px; top:51%; }
.cinema-kicker { color:#cfb8ee; font:9px Consolas,monospace; letter-spacing:1.8px; line-height:1.6; margin:0 0 22px; }
.intro-panel h1 { margin:0; color:#faf9fc; font-size:clamp(58px,6.8vw,98px); line-height:.98; letter-spacing:-5px; font-weight:400; }
.intro-panel h1 em { color:#d8c7fa; font-style:normal; }
.world-panel h2 { font-size:clamp(42px,4.65vw,68px); line-height:1.06; letter-spacing:-3px; font-weight:400; color:#f5f3f7; margin:0 0 24px; }
.cinema-description { max-width:370px; font-size:14px; line-height:1.8; color:#b5b5c2; margin:0 0 24px; }
.intro-panel .cinema-description { font-size:15px; max-width:350px; margin:24px 0; }
.cinema-enter,.cinema-action { display:inline-flex; align-items:center; justify-content:space-between; gap:26px; text-decoration:none; border:1px solid #e7d4fb55; padding:15px 20px; border-radius:4px; color:#e9ddf7; background:#ceb1ee0d; font-size:12px; cursor:pointer; transition:background .25s,border-color .25s,transform .25s; }
.cinema-enter { background:#d6bbf4; color:#180e27; border-color:#d6bbf4; font-size:13px; }
.cinema-enter>span,.cinema-action>span { font-size:18px; }
.cinema-enter:hover,.cinema-action:hover { background:#e6d2ff; color:#1b1125; border-color:#e6d2ff; transform:translateY(-2px); }
.cinema-services { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:24px; }
.cinema-services button { border:0; border-bottom:1px solid #ffffff26; background:none; color:#aeb1be; padding:8px 0; cursor:pointer; font-size:10px; display:flex; gap:15px; align-items:center; }
.cinema-services button:hover { color:#fff; border-color:#d6bbf4; }
.project-world .cinema-action { display:flex; width:max-content; max-width:100%; margin-top:18px; }
.project-world .cinema-action:last-child { background:none; border:0; padding-inline:0; margin-top:4px; font-size:11px; }

.cinema-media { position:absolute; inset:0; z-index:3; pointer-events:none; }
.cinema-shot { position:absolute; left:44%; right:5vw; top:19%; bottom:17%; margin:0; opacity:0; visibility:hidden; transform:translate3d(0,35px,0) scale(.96); transition:opacity .55s,transform .75s cubic-bezier(.2,.7,.2,1); }
.cinema-shot.is-current { opacity:1; visibility:visible; transform:translateZ(0) scale(1); }
.shot-image { width:100%; height:100%; display:block; position:relative; overflow:hidden; border:0; padding:0; background:#121820; border-radius:5px; box-shadow:0 25px 65px #0006; }
.shot-image>img { width:100%; height:100%; object-fit:cover; object-position:center; transform:translateY(var(--shot-shift,0px)) scale(1.09); transition:transform .6s ease-out; }
.cinema-shot.is-current .shot-image { pointer-events:auto; }
.project-shot { top:25%; bottom:auto; aspect-ratio:1265/712; }
.project-shot .shot-image { cursor:pointer; border:1px solid #ffffff24; }
.project-shot .shot-image>img { object-fit:contain; object-position:top; transform:none; }
.shot-open { position:absolute; right:18px; bottom:18px; background:#080b10dd; border:1px solid #fff3; color:#fff; font-size:11px; padding:12px 16px; border-radius:3px; }
.project-shot .shot-image:hover .shot-open { background:#d6bbf4; color:#180e27; }
.cinema-shot figcaption { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:18px; color:#d1cfd8; font-size:11px; }
.cinema-shot figcaption small { color:#7e8290; font-size:9px; }
.cinema-shot[data-cinema-media="2"] .shot-image>img { object-position:center 68%; }
.cinema-shot[data-cinema-media="4"] .shot-image>img { object-position:75% center; }
.cinema-shot[data-cinema-media="6"] .shot-image>img { object-position:60% center; }

.cinema-footer { position:absolute; bottom:30px; left:5vw; right:5vw; display:flex; justify-content:space-between; align-items:center; gap:20px; z-index:6; color:#818895; font:9px Consolas,monospace; }
.cinema-next { display:flex; align-items:center; gap:16px; border:0; color:#c4c5ce; background:transparent; font:8px Consolas,monospace; letter-spacing:1px; padding:10px 0; cursor:pointer; }
.cinema-next>b { font-size:20px; font-weight:400; }
.cinema-position { display:flex; align-items:center; gap:9px; font-size:9px; }
.cinema-position>b { color:#d6bbf4; font-weight:400; }
.cinema-position>i { width:25px; height:1px; margin-inline:7px; background:#5d526e; }
.cinema-options { display:flex; gap:16px; }
.cinema-options button { background:none; border:0; color:#b1aebd; padding:10px 0; display:flex; align-items:center; gap:8px; font-size:10px; cursor:pointer; }
.cinema-stage:not([data-chapter="0"]) #finish-toggle { display:none; }
.cinema-scene-progress { position:absolute; left:5vw; right:5vw; bottom:83px; height:1px; background:#ffffff15; z-index:6; }
.cinema-scene-progress>span { display:block; width:calc(var(--chapter-progress,0) * 100%); height:1px; background:#c6b5ef; transition:width .15s; }
.cinema-rail { position:absolute; z-index:6; right:13px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:1px; }
.cinema-rail button { position:relative; width:28px; height:30px; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
.cinema-rail button i { width:4px; height:4px; background:#5d566b; border-radius:50%; }
.cinema-rail button[aria-current="step"] i { background:#dfc7ff; width:6px; height:6px; box-shadow:0 0 10px #ba8feb66; }
.cinema-rail button span { position:absolute; right:35px; color:#ebe2f4; background:#0b0e16ed; font-size:10px; padding:8px 11px; white-space:nowrap; opacity:0; transition:opacity .2s; pointer-events:none; border:1px solid #ffffff20; }
.cinema-rail button:hover span,.cinema-rail button:focus-visible span { opacity:1; }
.cinema-load-status { position:absolute; right:18%; top:75%; font:9px Consolas,monospace; color:#d4c5ea; z-index:5; }
.cinema-load-status[hidden] { display:none; }
.cinema-stage:not([data-chapter="0"]) .cinema-load-status { display:none; }
.cinema-load-status>span { display:block; height:1px; width:110px; background:#d4c5ea; margin-top:12px; }
.cinema-nav :focus-visible,.cinema-quote:focus-visible,.cinema-rail button:focus-visible,.cinema-action:focus-visible,.cinema-enter:focus-visible,.cinema-services button:focus-visible,.cinema-options button:focus-visible,.shot-image:focus-visible { outline:2px solid #d6bbf4; outline-offset:5px; }
.skip { z-index:300; }
.categories-section,.sectors-section { display:none; }
.catalog-gateway { padding-block:75px 48px; display:grid; grid-template-columns:1fr auto; gap:18px; border-top:1px solid #ffffff18; }
.catalog-gateway>span { color:#c6b5ef; font:9px Consolas,monospace; letter-spacing:1.5px; grid-column:1/-1; }
.catalog-gateway h2 { font-weight:400; font-size:clamp(30px,4vw,56px); letter-spacing:-2px; margin:0; }
.catalog-gateway a { align-self:center; font-size:11px; color:#aaa8ba; text-decoration:none; }
.catalog-section { background:#0d1018; }
.section-title h2 { font-weight:400!important; }
.catalog-section,.projects-section { scroll-margin-top:90px; }
.catalog-tools { background:#131520; }
.service-image.service-photo,.detail-media .service-image.service-photo { width:100%; height:100%; object-fit:cover; padding:0; opacity:1; filter:none; transform:none; }
.service-image-button { background:#131722; }
.offer-tag { position:absolute; top:10px; left:10px; z-index:3; display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid #d1b7ed4a; border-radius:4px; background:#15131ce8; color:#d9c9ef; font-size:10px; font-weight:400; letter-spacing:0; line-height:1.3; pointer-events:none; }
.offer-tag:before { content:""; width:4px; height:4px; border-radius:50%; background:#cbb0ed; }
.service-image:not(.service-photo) { padding:12px; object-fit:contain; background:#121722; }
.image-reference--photo { font-size:8px; color:#ddd; }
.detail-media:has(.service-photo) { padding:0; height:auto; }
.detail-media .service-photo { max-height:320px; aspect-ratio:16/9; object-fit:cover; }
.detail-media figcaption { padding:13px 18px; font-size:10px; }
.specialty-photo,.sector-art--photo { object-fit:cover!important; padding:0!important; border-radius:4px; }
.menu-preview { transform:none; background:#131521; border:1px solid #ffffff20; border-radius:5px; }
.menu-preview-image img.photo-preview { object-fit:cover; padding:0; filter:none; border-radius:4px; }
.bundle-card { border-radius:5px; background:#141522!important; }
.bundle-art { width:100%; height:195px; top:0; right:0; object-fit:cover; opacity:.9; }
.bundle-number { position:relative; background:#0a0e18bc; padding:9px 12px; width:max-content; max-width:none; margin-bottom:177px; }
.bundle-card h3 { font-size:28px; }
.motion-paused .cinema-panel,.motion-paused .cinema-shot,.motion-paused .shot-image>img { transition:none; }

@media(min-width:1500px) { .cinema-shot { left:46%; right:6vw; } .cinema-panel { left:6vw; } }
@media(max-width:1050px) and (min-width:761px) { .cinema-header { padding-inline:30px; gap:10px; } .cinema-nav>* { padding-inline:12px; } .cinema-quote>span { display:none; } .cinema-panel { width:36%; } .world-panel h2 { font-size:46px; letter-spacing:-2px; } .cinema-description { font-size:12px; } .cinema-shot { left:46%; right:6vw; } .intro-panel h1 { font-size:67px; letter-spacing:-3px; } }
@media(max-width:760px) {
  .cinema-stage { min-height:740px; }
  .cinema-header { padding:16px 20px; gap:12px; }
  .cinema-brand>img { width:24px; height:34px; }
  .cinema-brand>span { font-size:23px; }
  .cinema-brand small { display:none; }
  .cinema-nav { padding:3px; }
  .cinema-nav>* { font-size:9px; padding:9px 12px; }
  .cinema-nav>[data-flight] { display:none; }
  .cinema-quote { padding:10px 12px; font-size:10px; }
  .cinema-quote>span,.cinema-quote .icon { display:none; }
  .cinema-topline { top:83px; left:24px; right:24px; font-size:6px; letter-spacing:.7px; }
  .cinema-topline>span:last-child { display:none; }
  .intro-photo { top:8%; height:47%; width:100%; opacity:.75; }
  .intro-photo:after { background:linear-gradient(0deg,#080b10 0%,transparent 70%),linear-gradient(90deg,#080b1066,transparent); }
  #cinema-canvas,.cinema-fallback { top:8%; right:15%; width:70%; height:42%; }
  .cinema-fallback>img { padding:25px; }
  .cinema-panel,.intro-panel { top:auto; left:24px; right:43px; width:auto; max-width:none; bottom:121px; transform:translate3d(0,24px,0); }
  .cinema-panel.is-current { transform:translateZ(0); }
  .intro-panel { bottom:132px; }
  .intro-panel h1 { font-size:60px; line-height:1; letter-spacing:-3px; }
  .intro-panel .cinema-description { font-size:13px; max-width:300px; margin:16px 0 20px; }
  .cinema-kicker { font-size:7px; letter-spacing:1.2px; margin-bottom:12px; }
  .world-panel h2 { font-size:37px; line-height:1.04; letter-spacing:-1.7px; margin-bottom:12px; }
  .cinema-description { font-size:11px; line-height:1.65; max-width:330px; margin-bottom:14px; }
  .cinema-enter,.cinema-action { font-size:11px; padding:12px 15px; }
  .cinema-services { margin-top:13px; gap:8px 16px; }
  .cinema-services button { font-size:9px; padding-block:6px; }
  .cinema-shot { left:24px; right:43px; top:13%; bottom:auto; height:31%; }
  .shot-image { border-radius:4px; }
  .cinema-shot figcaption { padding-top:10px; font-size:8px; gap:8px; }
  .cinema-shot figcaption small { font-size:7px; }
  .project-shot { top:14%; height:26%; aspect-ratio:auto; }
  .shot-open { font-size:9px; padding:8px 11px; right:12px; bottom:12px; }
  .project-world h2 { font-size:37px; }
  .project-world .cinema-services { gap:5px 14px; }
  .project-world .cinema-action { margin-top:11px; }
  .project-world .cinema-action:last-child { display:none; }
  .cinema-footer { bottom:20px; left:24px; right:24px; display:grid; grid-template-columns:1fr auto; gap:8px; }
  .cinema-position { grid-column:1/-1; grid-row:1; font-size:8px; margin-bottom:5px; }
  .cinema-position>i { width:25px; }
  .cinema-next { font-size:7px; gap:12px; }
  .cinema-options { gap:13px; }
  .cinema-options button { font-size:9px; }
  .cinema-options .motion-label { display:none; }
  .cinema-scene-progress { left:24px; right:24px; bottom:98px; }
  .cinema-rail { right:4px; top:31%; }
  .cinema-rail button { width:29px; height:27px; }
  .cinema-load-status { top:44%; right:30%; font-size:7px; }
  .catalog-gateway { padding-block:50px 30px; grid-template-columns:1fr; }
  .catalog-gateway h2 { font-size:30px; letter-spacing:-1px; }
  .catalog-gateway>span { font-size:7px; }
  .bundle-number { margin-bottom:177px; }
  .bundle-card { min-height:430px; }
  .bundle-art { width:100%; height:195px; top:0; right:0; }
  .bundle-card h3,.bundle-card p,.bundle-tags { max-width:none; }
  .bundle-button { width:100%; max-width:none; }
}
@media(min-width:761px) and (max-width:1000px) and (orientation:portrait) {
  .cinema-panel { top:auto; bottom:145px; width:auto; right:70px; transform:translate3d(0,25px,0); }
  .cinema-panel.is-current { transform:none; }
  .cinema-shot { top:15%; left:5vw; right:7vw; bottom:auto; height:36%; }
  .world-panel h2 { font-size:52px; }
  .cinema-description { font-size:14px; max-width:500px; }
  .intro-photo { width:100%; top:5%; height:65%; }
  .intro-photo:after { background:linear-gradient(0deg,#080b10,transparent 90%); }
  #cinema-canvas,.cinema-fallback { top:9%; right:18%; width:64%; height:48%; }
  .intro-panel { bottom:150px; }
  .intro-panel h1 { font-size:74px; }
}
@media(max-height:750px) and (min-width:761px) and (orientation:landscape) { .cinema-stage { min-height:600px; } .world-panel h2 { font-size:48px; margin-bottom:17px; } .cinema-description { font-size:12px; margin-bottom:17px; } .cinema-services { margin-top:17px; } .cinema-kicker { margin-bottom:16px; } .intro-panel h1 { font-size:75px; } }
@media(max-width:370px) { .cinema-header { padding-inline:16px; gap:7px; } .cinema-nav>* { padding-inline:9px; } .cinema-brand>span { font-size:21px; } .intro-panel h1 { font-size:54px; } .world-panel h2 { font-size:33px; } .cinema-panel { right:38px; } .cinema-shot { right:38px; } }
@media(max-width:760px) and (max-height:760px) {
  .cinema-stage { min-height:0; }
  .cinema-header { padding-block:13px; }
  .cinema-topline { top:76px; }
  .cinema-shot,.project-shot { top:100px; height:22%; aspect-ratio:auto; }
  .cinema-shot figcaption { padding-top:8px; font-size:7px; }
  .cinema-shot figcaption small { font-size:6px; }
  .cinema-panel { bottom:111px; }
  .world-panel h2,.project-world h2 { font-size:30px; margin-bottom:10px; letter-spacing:-1.4px; }
  .cinema-description { font-size:10px; line-height:1.55; margin-bottom:12px; }
  .cinema-kicker { font-size:6px; margin-bottom:9px; }
  .cinema-action { padding:10px 13px; font-size:10px; }
  .cinema-services { margin-top:10px; gap:6px 13px; }
  .cinema-services button { font-size:8px; padding-block:5px; }
  .project-world .cinema-action { margin-top:9px; }
  .project-world .cinema-action:last-child { margin-top:2px; font-size:9px; padding-block:4px; }
  .intro-panel { bottom:119px; }
  .intro-panel h1 { font-size:49px; letter-spacing:-2.5px; }
  .intro-panel .cinema-description { font-size:11px; margin:14px 0 18px; }
  #cinema-canvas,.cinema-fallback { top:10%; height:34%; }
  .cinema-load-status { top:40%; }
  .cinema-footer { bottom:16px; }
}
@media(min-width:761px) and (max-height:650px) {
  .cinema-stage { min-height:0; }
  .cinema-topline { top:86px; }
  .world-panel h2 { font-size:36px; margin-bottom:13px; }
  .cinema-kicker { font-size:7px; margin-bottom:12px; }
  .cinema-description { font-size:11px; margin-bottom:13px; }
  .cinema-action { padding:11px 16px; }
  .cinema-services { margin-top:14px; }
  .intro-panel h1 { font-size:62px; }
  .cinema-footer { bottom:17px; }
  .cinema-scene-progress { bottom:65px; }
}
@media(max-width:760px) and (max-height:600px) {
  .cinema-shot,.project-shot { top:94px; height:14%; }
  .cinema-shot figcaption { position:absolute; left:0; right:0; bottom:0; justify-content:flex-end; background:linear-gradient(transparent,#080b10cc); padding:12px 8px 6px; }
  .cinema-shot figcaption>span { display:none; }
  .cinema-shot figcaption small { color:#efebf4; font-size:6px; }
  .project-shot .shot-open { display:none; }
  .world-panel h2,.project-world h2 { font-size:26px; margin-bottom:9px; }
  .cinema-description { font-size:9.5px; line-height:1.5; margin-bottom:10px; }
  .cinema-action { padding:9px 12px; }
  .cinema-services { margin-top:8px; }
  .cinema-panel { bottom:108px; }
  .intro-panel { bottom:113px; }
  .intro-panel h1 { font-size:44px; }
  .intro-panel .cinema-description { font-size:10px; margin:12px 0 16px; }
  #cinema-canvas,.cinema-fallback { height:30%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .cinema-panel,.cinema-shot,.shot-image>img,.intro-photo,#cinema-canvas,.cinema-fallback { transition:none; } }

/* The canvas spans every chapter; screens are rendered in perspective there. */
#cinema-stage #cinema-canvas { inset:0; width:100%; height:100%; visibility:visible; transition:opacity .4s; }
.cinema-stage[data-ready="fallback"] #cinema-canvas { opacity:0; }
.cinema-shot,.cinema-shot.is-current { transform:none; transition:opacity .35s; }
.shot-image>img { object-fit:contain; transform:none; transition:opacity .25s; }
.cinema-stage[data-ready="true"] .cinema-shot[data-screen-ready="true"] .shot-image { background:transparent; box-shadow:none; border-color:transparent; }
.cinema-stage[data-ready="true"] .cinema-shot[data-screen-ready="true"] .shot-image>img { opacity:0; }
.cinema-panel:before { content:""; position:absolute; inset:-22px; background:#080b10e8; filter:blur(20px); z-index:-1; pointer-events:none; }
.service-image.service-media { padding:0; object-fit:contain; background:#0c1019; filter:none; opacity:1; transform:none; }
.service-image.service-media[data-media-fit="cover"] { object-fit:cover; }
.detail-media:has(.service-media) { padding:0; height:auto; }
.detail-media .service-media { height:auto; max-height:360px; aspect-ratio:auto; object-fit:contain; }
.specialty-media,.sector-media,.media-preview { object-fit:contain!important; }
.bundle-art { object-fit:contain; background:#0b101a; }
@media(max-width:760px) { .cinema-stage { min-height:0; } }