:root{color-scheme:dark;--cyan:#72e7ff;--gold:#ffce8b}*{box-sizing:border-box}html{scrollbar-width:thin;background:#070b16}body{margin:0;color:#f1f6ff;font-family:Segoe UI,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}header{position:fixed;z-index:20;top:0;left:0;right:0;padding:25px 4vw;display:flex;align-items:center;gap:24px;background:linear-gradient(#060d1cbb,transparent);pointer-events:none}header>*{pointer-events:auto}.brand{font-size:25px;letter-spacing:5px;font-weight:700;color:white;text-decoration:none}.brand>span{color:var(--cyan)}.brand small{display:block;font-size:8px;letter-spacing:2.2px;font-weight:400;margin-top:6px;color:#d1e2f0}nav{margin-left:auto;display:flex;gap:25px}nav button{border:0;background:none;color:#dce8f5;font-size:13px}nav button:last-child{border:1px solid #91ddf866;border-radius:25px;padding:11px 20px;background:#0c263566}nav span{color:var(--cyan);padding-left:12px}.preview-label{position:absolute;top:8px;right:4vw;font-size:8px;letter-spacing:2px;color:#afc5da}#journey{height:170svh}.world{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;background:#071023}.landing,#intro,.shade,#globe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.landing{opacity:0;transition:opacity .4s}#intro{opacity:1}.shade{background:linear-gradient(180deg,#030a1c88,transparent 38%,#030b1b33 62%,#040c1def);pointer-events:none}.intro-copy{position:absolute;top:30%;left:8%;text-shadow:0 4px 30px #020916;transition:opacity .4s,transform .4s;max-width:650px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--gold)}h1{font-size:clamp(38px,5.2vw,78px);font-weight:400;letter-spacing:-2px;line-height:1.08;margin:20px 0}p{font-size:15px;line-height:1.8;color:#d2deed}.arrival-copy{position:absolute;top:14%;width:100%;text-align:center;opacity:0;pointer-events:none;transition:opacity .7s}h2{font-size:clamp(22px,2.5vw,38px);font-weight:400;letter-spacing:-.7px;margin:12px 0 0}.arrival-copy p{font-size:12px;margin-top:6px}#globe{opacity:0;pointer-events:none;transition:opacity .7s}#ring{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s;perspective:1100px}.holo-card{position:absolute;left:50%;top:52%;width:210px;height:270px;margin:-135px 0 0 -105px;text-align:left;color:#eefaff;border:1px solid #7edfff66;border-radius:18px;padding:22px;background:linear-gradient(145deg,#0e3446ce,#101b33ee);box-shadow:inset 0 0 24px #5acffb12,0 12px 38px #02081666;backdrop-filter:blur(13px);transform:translate(var(--x),var(--y)) scale(var(--s)) rotateY(var(--ry));opacity:var(--o);transition:transform .8s cubic-bezier(.2,.75,.25,1),opacity .6s,border-color .3s;pointer-events:auto;display:flex;flex-direction:column;gap:12px}.holo-card[data-kind=work]{border-color:#d694ff88;background:linear-gradient(145deg,#392451cf,#111c32ee)}.holo-card[data-kind=world]{border-color:#ffd69588}.holo-card[data-kind=contact]{border-color:#ff9dcb88}.card-top{font-size:8px;letter-spacing:2px;color:#a7d8eb}.card-icon{font-size:34px;color:var(--cyan);line-height:1}.holo-card strong{font-size:20px;font-weight:500;letter-spacing:-.5px}.card-desc{font-size:12px;line-height:1.7;color:#c5d7e3}.card-action{margin-top:auto;font-size:10px;letter-spacing:.5px;color:#a9e8fc}.ring-controls{position:absolute;bottom:17%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;opacity:0;pointer-events:none;transition:opacity .6s}.ring-controls>button{width:38px;height:38px;border-radius:50%;border:1px solid #b0eaff55;background:#0b2034aa;color:white}#dots{display:flex;gap:10px}#dots button{width:7px;height:7px;padding:0;border-radius:50%;border:0;background:#a9c1d466}#dots button.active{background:var(--cyan);box-shadow:0 0 9px var(--cyan)}footer{position:absolute;bottom:25px;left:4vw;right:4vw;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#8aa8c0}.progress{position:absolute;bottom:0;width:100%;height:2px;background:#c8e7ff11}.progress i{display:block;height:100%;width:var(--progress,0%);background:linear-gradient(90deg,var(--cyan),#db9dff);box-shadow:0 0 14px var(--cyan)}.arrived .landing,.arrived #globe,.arrived #ring,.arrived .arrival-copy,.arrived .ring-controls{opacity:1}.arrived #ring,.arrived .ring-controls{pointer-events:auto}.arrived .intro-copy{opacity:0;transform:translateY(-15px);pointer-events:none}.arrived #intro{opacity:0}.ambient{opacity:0;transition:opacity 1s}.arrived .ambient{opacity:1}.ambient i{position:absolute;width:5px;height:5px;border-radius:50%;background:#67e9ff;box-shadow:0 0 14px 4px #4cddff88;animation:pulse 4s infinite;left:14%;top:67%}.ambient i:nth-child(2){left:90%;top:81%;animation-delay:-2s}.ambient i:nth-child(3){left:83%;top:45%;animation-delay:-1s}dialog{max-width:760px;width:calc(100% - 36px);max-height:85svh;padding:45px;border:1px solid #77d5ff66;border-radius:22px;background:linear-gradient(140deg,#102b3a,#0a1122);color:#e9f3fc;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#030918b8;backdrop-filter:blur(8px)}.close{position:absolute;right:15px;top:12px;background:none;border:0;color:#c8e6f7;font-size:28px}dialog h2{margin-bottom:18px}dialog .options{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:24px 0}dialog article{border:1px solid #92dcff33;border-radius:12px;padding:20px}dialog h3{font-size:17px;font-weight:500;margin:0 0 10px}dialog p{font-size:13px}dialog a{display:inline-block;color:var(--cyan);font-size:13px;margin:8px 16px 8px 0;text-decoration:none}dialog .note{color:#90aabd;font-size:11px}.no-script{position:fixed;bottom:0;background:#122839;padding:15px;z-index:40}@keyframes bob{50%{transform:translateY(5px)}}@keyframes pulse{50%{opacity:.25;transform:scale(.6)}}@media(max-width:700px){header{padding:25px 20px}.brand{font-size:19px;letter-spacing:3px}.brand small{font-size:6px}nav{gap:10px}nav button{font-size:10px}nav button:first-child{display:none}nav button:last-child{padding:8px 12px}.intro-copy{left:7%;top:30%;right:7%}.intro-copy p{font-size:12px}.arrival-copy{top:15%;padding:0 14px}.arrival-copy p{font-size:10px}.holo-card{width:174px;height:234px;margin:-117px 0 0 -87px;padding:17px;gap:10px}.holo-card strong{font-size:17px}.card-desc{font-size:11px}.ring-controls{bottom:19%}footer span:last-child{display:none}dialog{padding:35px 22px}dialog .options{grid-template-columns:1fr}.world{min-height:560px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#journey{height:100svh}}
.metal-window{--accent:#76ddff;--sheen-x:35%;--sheen-y:20%;border:6px solid transparent!important;background:linear-gradient(140deg,#102839ee,#07101df5) padding-box,linear-gradient(135deg,#edf9ff,#70838e 8%,#14232f 20%,var(--accent) 28%,#354651 34%,#080f18 49%,#9daeb8 68%,#eaf5fa 72%,#354651 79%,#090f18 94%) border-box!important;box-shadow:inset 2px 2px 3px #000c,inset -2px -2px 2px #b8ebff35,2px 3px 0 #405260,4px 6px 0 #111b25,7px 10px 12px -5px #000e!important;isolation:isolate}.metal-window::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:5px;background:radial-gradient(ellipse at var(--sheen-x) var(--sheen-y),#ffffffed,#c7f3ff88 12%,transparent 45%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}.holo-card[data-kind=work]{--accent:#bba1ff}.holo-card[data-kind=contact]{--accent:#ffd38b}.holo-card{cursor:pointer;height:300px;margin-top:-150px;padding:17px;gap:8px;font-family:inherit}.card-icon{height:70px;display:block}.motion-icon{display:block;position:relative;width:80px;height:70px}.motion-icon img,.motion-icon video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s}.motion-icon video{opacity:0}.motion-icon.moving video{opacity:1}.motion-icon.moving img{opacity:0}.holo-card.expanded{height:390px;margin-top:-175px}.card-enter{display:grid;gap:8px;margin-top:auto;animation:detail-rise .35s ease-out}.card-enter[hidden]{display:none}.card-enter button,#scene-panel button,#travel-controls button{color:#eefaff;background:#123344;border:1px solid #78cddd77;border-radius:9px;padding:10px 12px;font:inherit;cursor:pointer;font-size:12px}.holo-card.expanded .card-action{display:none}.holo-card:focus-visible{outline:2px solid #fff;outline-offset:5px}@keyframes detail-rise{from{opacity:0;transform:translateY(15px)}}
#scene-video,#scene-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}#scene-still{z-index:1}#scene-video{z-index:2}.shade{z-index:3}#scene-video.visible,#scene-still.visible{opacity:1}.at-scene #ring,.at-scene #globe,.at-scene .arrival-copy,.at-scene .ring-controls,.at-scene .journey-controls,.at-scene .ambient{visibility:hidden!important;pointer-events:none!important}#scene-panel{position:fixed;top:125px;left:4vw;width:min(490px,45vw);max-height:calc(100svh - 160px);overflow:auto;z-index:12;padding:25px;border-radius:19px;color:#eff8ff;font-family:Segoe UI,Arial,sans-serif}#scene-panel[hidden],#travel-controls[hidden]{display:none}.scene-toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:25px}#scene-panel>.motion-icon{float:right;width:95px;height:90px;margin-left:12px}#scene-panel h2{font-size:30px;line-height:1.15;margin-top:14px}#scene-panel p{font-size:13px;line-height:1.65}#scene-panel a{color:#88e9ff;display:inline-block;text-decoration:none;font-size:13px;margin:10px 8px 10px 0}.service-pair{display:grid;gap:10px}.service-pair article,.demo-item{border:1px solid #78cdff33;border-radius:12px;padding:14px;background:#142b3f88}.service-pair h3,.demo-item h3{font-size:17px;margin:4px 0}.demo-grid{display:grid;gap:12px}.demo-item .motion-icon{float:right;width:65px;height:65px}.demo-item p{clear:both}.scene-links{display:flex;flex-wrap:wrap;gap:7px;border-top:1px solid #78ddff33;margin-top:20px;padding-top:18px}#travel-controls{position:fixed;z-index:21;bottom:45px;left:50%;transform:translateX(-50%);padding:12px 16px;background:#071b2be8;border:1px solid #72dfff66;border-radius:14px;display:flex;gap:20px;align-items:center;color:#eaf8ff;font:12px Segoe UI,sans-serif}.travelling~footer{visibility:hidden}
@media(max-width:700px){#scene-panel{top:auto;bottom:18px;left:4vw;width:92vw;max-height:57svh;padding:20px}.holo-card{height:280px}.holo-card.expanded{height:365px}#scene-panel h2{font-size:25px}.scene-toolbar{margin-bottom:12px}#travel-controls{width:90vw;bottom:25px}.motion-icon{width:65px;height:60px}.card-icon{height:60px}}
@media(prefers-reduced-motion:reduce){.motion-icon video{display:none}.metal-window{--sheen-x:35%!important;--sheen-y:20%!important}}

/* screening room: the ORRIS world video list (2026-10-06 mapping) */
.video-list video{width:100%;aspect-ratio:16/9;border-radius:12px;background:#000;display:block}
.video-picks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.video-picks button.playing{border-color:var(--accent,#76ddff);box-shadow:0 0 10px #72e7ff55}
@media(max-width:700px){.video-picks{grid-template-columns:1fr}}

/* screening room v2 (2026-10-06 James): thumbnails scroll inside their
   own card; player pinned at the card top. */
.video-card{--accent:#76ddff;border-radius:16px;padding:12px;display:grid;gap:10px}
.video-card video{width:100%;aspect-ratio:16/9;border-radius:10px;background:#000;display:block}
.video-rail{max-height:228px;overflow-y:auto;display:grid;gap:8px;padding-right:4px;scrollbar-width:thin}
.video-rail button{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:center;text-align:left;padding:6px!important}
.video-rail img{width:118px;aspect-ratio:16/9;object-fit:cover;border-radius:7px;display:block}
.video-rail .vr-text{display:grid;gap:2px}
.video-rail strong{font-size:12.5px;font-weight:500}
.video-rail small{font-size:10px;color:#9fb6cb}
.video-rail button.playing{border-color:var(--accent);box-shadow:0 0 10px #72e7ff55}
@media(max-width:700px){.video-rail{max-height:190px}.video-rail button{grid-template-columns:92px 1fr}.video-rail img{width:92px}}

/* ===== 2026-10-06 James's definition pass =====================
   Window title headers, per-window colour identities, a single
   stylised button system (equal sizing, glow on press), text links
   become buttons, contact card, placeholder state. */

/* per-window tint: accent bleeds into the glass so windows separate */
.metal-window{background:linear-gradient(145deg,color-mix(in srgb,var(--accent,#76ddff) 16%,#0e2534) ,#07101df5) padding-box,linear-gradient(135deg,#edf9ff,#70838e 8%,#14232f 20%,var(--accent) 28%,#354651 34%,#080f18 49%,#9daeb8 68%,#eaf5fa 72%,#354651 79%,#090f18 94%) border-box!important}

/* orbit cards: stronger colour separation per kind */
.holo-card[data-kind=services]{--accent:#76ddff}
.holo-card[data-kind=work]{--accent:#bba1ff}
.holo-card[data-kind=world]{--accent:#ffd38b}
.holo-card[data-kind=contact]{--accent:#ff9dcb}

/* window title header bar */
.win-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-6px -6px 12px;padding:9px 12px;border-radius:12px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent,#76ddff) 26%,#0a1a26),#0a141fd8);border:1px solid color-mix(in srgb,var(--accent,#76ddff) 45%,transparent)}
.win-title{font-size:13px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:color-mix(in srgb,var(--accent,#76ddff) 70%,white)}
.win-tools{display:flex;gap:8px}

/* THE button system: every button and link-button shares one style,
   equal widths in its row, glow + press animation */
#scene-panel button,#scene-panel .scene-body a,.card-enter button,#travel-controls button{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;text-decoration:none;color:#eefaff;background:linear-gradient(145deg,color-mix(in srgb,var(--accent,#76ddff) 22%,#10222e),#0b1722);border:1px solid color-mix(in srgb,var(--accent,#76ddff) 55%,transparent);border-radius:11px;padding:12px 14px;font:inherit;font-size:12.5px;cursor:pointer;transition:box-shadow .2s,transform .12s,border-color .2s}
#scene-panel button:hover,#scene-panel .scene-body a:hover,.card-enter button:hover{border-color:var(--accent,#76ddff);box-shadow:0 0 14px color-mix(in srgb,var(--accent,#76ddff) 40%,transparent)}
#scene-panel button:active,#scene-panel .scene-body a:active,.card-enter button:active{transform:scale(.955);box-shadow:0 0 22px var(--accent,#76ddff),inset 0 0 12px color-mix(in srgb,var(--accent,#76ddff) 30%,transparent)}
.win-tools button{padding:8px 12px;font-size:11px}

/* equal spacing: stacks and shortcut rows fill the window evenly */
.btn-stack{display:grid;gap:9px;margin-top:4px}
.scene-body>button,.scene-body .btn-stack a,.scene-body .btn-stack button{width:100%}
.scene-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin-top:14px}
.links-label{grid-column:1/-1;font-size:9px;letter-spacing:3px;color:#8fb4c8;margin-bottom:-2px}
button.placeholder,button[disabled].placeholder{opacity:.55;cursor:default;border-style:dashed}
button.placeholder:active{transform:none;box-shadow:none}

/* orbit card action line becomes a button box that glows on press */
.card-action{display:flex;align-items:center;justify-content:center;margin-top:auto;padding:11px 12px;border-radius:11px;font-size:11px;letter-spacing:.5px;color:#eafaff;background:linear-gradient(145deg,color-mix(in srgb,var(--accent,#76ddff) 24%,#10222e),#0b1722);border:1px solid color-mix(in srgb,var(--accent,#76ddff) 55%,transparent);transition:box-shadow .2s,transform .12s}
.holo-card:hover .card-action{border-color:var(--accent,#76ddff);box-shadow:0 0 12px color-mix(in srgb,var(--accent,#76ddff) 40%,transparent)}
.holo-card:active .card-action{transform:scale(.955);box-shadow:0 0 22px var(--accent,#76ddff)}

/* the new contact card */
.contact-mini{--accent:#ffd38b;display:grid;gap:9px;padding:14px;border-radius:14px}
.contact-mini input,.contact-mini textarea{font:inherit;font-size:12.5px;color:#f1f6ff;background:#0a141fcc;border:1px solid #ffd38b55;border-radius:10px;padding:11px 12px;resize:vertical}
.contact-mini input:focus-visible,.contact-mini textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.contact-mini .ct-status{font-size:11px;color:#bfe9d2;min-height:14px}
.contact-mini .ct-status.err{color:#ffb3a1}

/* ===== 2026-10-06 release round ================================= */
/* bigger metal-effect ring arrows */
.ring-controls>button{width:58px;height:58px;font-size:22px;font-weight:700;color:#eafaff;border:3px solid transparent;background:linear-gradient(150deg,#1b3242,#0a141f) padding-box,linear-gradient(135deg,#edf9ff,#70838e 12%,#14232f 30%,#9daeb8 55%,#eaf5fa 68%,#354651 82%,#090f18) border-box;box-shadow:inset 1px 1px 2px #b8ebff35,inset -1px -1px 2px #000c,2px 3px 6px #000b;transition:box-shadow .2s,transform .12s}
.ring-controls>button:hover{box-shadow:0 0 16px #72e7ff66,inset 1px 1px 2px #b8ebff35}
.ring-controls>button:active{transform:scale(.93);box-shadow:0 0 24px #72e7ff}
/* stronger per-window hue separation */
.metal-window{background:linear-gradient(145deg,color-mix(in srgb,var(--accent,#76ddff) 30%,#0c2130),color-mix(in srgb,var(--accent,#76ddff) 8%,#07101d) 70%) padding-box,linear-gradient(135deg,#edf9ff,#70838e 8%,#14232f 20%,var(--accent) 28%,#354651 34%,#080f18 49%,#9daeb8 68%,#eaf5fa 72%,#354651 79%,#090f18 94%) border-box!important}
/* faint footer policy links */
.policy-links{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:9px;letter-spacing:1.5px;color:#c3dced;opacity:.95;z-index:3}
.policy-links a{color:#dcefff;text-decoration:none}
.policy-links a:hover{color:var(--cyan)}
@media(max-width:700px){.policy-links{bottom:10px;font-size:8px}}

/* window frame fix (James: frame locking over text on scroll): the
   header stays pinned, only .win-scroll scrolls inside the frame. */
#scene-panel{overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.win-scroll{overflow-y:auto;scrollbar-width:thin;padding:2px 4px 8px;min-height:0}

/* ===== 2026-10-06 release fixes ================================= */
/* 1. stop the browser jumping the view on first scroll (scroll anchoring) */
html{overflow-anchor:none}

/* 2. the ring arrows are the primary navigation now — make them sing */
.ring-controls{gap:30px;bottom:15%}
.ring-controls>button{width:68px;height:68px;font-size:26px;font-weight:800;color:#eafaff;border:3px solid transparent;background:linear-gradient(150deg,#1f3a4d,#0a141f) padding-box,linear-gradient(135deg,#eef9ff,#8fd6ee 10%,#14232f 28%,#72e7ff 46%,#9daeb8 60%,#eef9ff 70%,#243742 86%,#070d16) border-box;box-shadow:inset 1px 1px 2px #cdefff55,inset -1px -1px 3px #000d,0 4px 10px #000a,0 0 16px #46c9f255;animation:arrowpulse 2.8s ease-in-out infinite}
.ring-controls>button:hover{box-shadow:inset 1px 1px 2px #cdefff55,0 0 26px #72e7ff99;transform:scale(1.06)}
.ring-controls>button:active{transform:scale(.9);box-shadow:0 0 30px #72e7ff,inset 0 0 14px #46c9f2aa}
@keyframes arrowpulse{0%,100%{box-shadow:inset 1px 1px 2px #cdefff55,inset -1px -1px 3px #000d,0 4px 10px #000a,0 0 14px #46c9f244}50%{box-shadow:inset 1px 1px 2px #cdefff55,inset -1px -1px 3px #000d,0 4px 10px #000a,0 0 24px #72e7ff88}}
#dots button{width:9px;height:9px}
#dots button.active{transform:scale(1.25)}

/* the front card reads as pressable; the action label looks like a go button */
.holo-card{cursor:pointer}
.holo-card .card-action{transition:box-shadow .2s,transform .12s,background .2s}

/* 3. demo-grid: not-ready games show a disabled chip, never a link out */
.demo-item button.placeholder{width:100%;margin-top:8px;opacity:.6;border-style:dashed;cursor:default}
.demo-item button.placeholder:active{transform:none;box-shadow:none}
.demo-empty{font-size:12px;color:#9fb6cb;padding:8px 2px}

/* 4. MOBILE: no expand panel now, so cards never drop below the arrows.
   Keep the ring compact and the arrows clear of the globe + cards. */
@media(max-width:700px){
 .ring-controls{bottom:12%;gap:22px}
 .ring-controls>button{width:60px;height:60px;font-size:23px}
 .holo-card{width:168px;height:286px}
 #dots{gap:12px}
 #dots button{width:11px;height:11px}
}

/* ===== 2026-10-06 night round ================================== */
/* screening room: scrolling video thumbnails -> tap = fullscreen play */
.vid-thumbs{display:grid;gap:10px;max-height:340px;overflow-y:auto;scrollbar-width:thin;padding:2px 4px 2px 2px}
.vid-thumb{position:relative;display:block;width:100%;padding:0!important;border-radius:12px;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent,#76ddff) 45%,transparent);background:#0a141f;cursor:pointer}
.vid-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.vid-thumb .vt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;display:grid;place-items:center;border-radius:50%;font-size:20px;padding-left:4px;color:#eafaff;background:rgba(6,13,34,.55);border:1.5px solid color-mix(in srgb,var(--accent,#76ddff) 80%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent,#76ddff) 45%,transparent);transition:transform .2s,background .2s}
.vid-thumb:hover .vt-play,.vid-thumb:focus-visible .vt-play{transform:translate(-50%,-50%) scale(1.12);background:color-mix(in srgb,var(--accent,#76ddff) 35%,rgba(6,13,34,.6))}
.vid-thumb .vt-text{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:1px;padding:20px 12px 8px;text-align:left;background:linear-gradient(to top,rgba(4,9,20,.92),rgba(4,9,20,0))}
.vid-thumb .vt-text strong{font-size:13px;font-weight:600;color:#eafaff}
.vid-thumb .vt-text small{font-size:10.5px;color:#adc4d6}
.vid-fs{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:#020611f2;padding:16px}
.vid-fs video{width:100%;height:100%;max-width:100vw;max-height:100svh;object-fit:contain;background:#000}
.vid-fs-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:16px;z-index:2;width:46px;height:46px;border-radius:50%;border:1.5px solid #76ddff88;background:rgba(7,11,32,.85);color:#eafaff;font-size:20px;cursor:pointer}

/* mobile + landscape: scene window near-fullscreen so the room shows
   only at the edges (James: window was half-size / vanished in landscape) */
@media(max-width:700px){#scene-panel{top:10px;bottom:10px;left:3vw;right:3vw;width:auto;max-height:none;height:auto;padding:16px}}
@media(max-height:560px) and (orientation:landscape){#scene-panel{top:8px;bottom:8px;left:4vw;right:4vw;width:auto;max-height:none;height:auto;padding:12px}.win-scroll{max-height:none}}

/* ===== 2026-10-07 UI finishing pass ============================
   One typography system, coordinated card colours, a header
   quick-links window + replay icon, and a decrowded phone layout. */

/* --- self-hosted type (CSP font-src 'self'; no external CDN) --- */
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/space-grotesk-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/space-grotesk-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{--font-head:'Space Grotesk',ui-sans-serif,system-ui,'Segoe UI',sans-serif;--font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
body{font-family:var(--font-body)}
h1,h2,h3,.brand,.win-title,.holo-card strong,#scene-panel h2,.demo-item h3,.service-pair h3,.vt-text strong{font-family:var(--font-head)}
.eyebrow,.card-top,.links-label{font-family:var(--font-head);font-weight:500}
nav button,.quick-links button,#scene-panel button,#scene-panel .scene-body a,.card-action,#travel-controls button,.win-tools button{font-family:var(--font-head);font-weight:500;letter-spacing:.3px}
h1{font-weight:700;letter-spacing:-.5px;line-height:1.06}
h2,#scene-panel h2{font-weight:500;letter-spacing:-.3px}
h3,.service-pair h3,.demo-item h3{font-weight:500}
.brand{font-weight:700}
.holo-card strong{font-weight:500}
p{color:#d7e3f1}
.intro-copy p{color:#e9f0fb}

/* --- card colours: coordinated cyan / amber / violet / teal; the hue
   reads in the glass surface, not only in the border + glow --- */
.holo-card[data-kind=services]{--accent:#5fd9ff}
.holo-card[data-kind=work]{--accent:#b49cff}
.holo-card[data-kind=world]{--accent:#ffc271}
.holo-card[data-kind=contact]{--accent:#46e0c4}
.holo-card{background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 50%,#0c1f2e),color-mix(in srgb,var(--accent) 24%,#0a1623) 52%,color-mix(in srgb,var(--accent) 11%,#070f1b)) padding-box,linear-gradient(135deg,#edf9ff,#70838e 8%,#14232f 20%,var(--accent) 28%,#354651 34%,#080f18 49%,#9daeb8 68%,#eaf5fa 72%,#354651 79%,#090f18 94%) border-box!important}
.holo-card strong{color:#f5fbff}
.card-desc{color:#e0eef8}

/* --- header quick-links: compact window frame matching the site windows --- */
.quick-links{--accent:#76ddff;position:relative;display:flex;align-items:center;gap:4px;padding:6px 8px;border-width:4px!important;border-radius:14px;box-shadow:inset 1px 1px 2px #000a,inset -1px -1px 2px #b8ebff30,0 4px 12px -5px #000c!important}
.quick-links button{border:0;background:none;color:#e7f2fb;font-size:12px;padding:8px 11px;border-radius:9px;transition:background .2s,color .2s,transform .12s}
.quick-links button:hover{background:color-mix(in srgb,var(--accent) 20%,transparent);color:#fff}
.quick-links button:active{transform:scale(.96)}
.quick-links .ql-cta{color:#eafaff;padding:8px 13px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 22%,#0c2130)}
.quick-links .ql-cta span{color:var(--accent);padding-left:4px}

/* --- replay entrance: compact refresh icon, header-right --- */
.replay-btn{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;font-size:18px;line-height:1;color:#eafaff;border:1px solid #9fdcff66;background:#0c2435b0;transition:box-shadow .2s,transform .25s,background .2s}
.replay-btn:hover{background:#123247cc;box-shadow:0 0 14px #5fd9ff66}
.replay-btn:active{transform:rotate(-200deg)}
.replay-btn[hidden]{display:none}

/* --- scroll robustness: clamp rubber-band, contain inner scroll --- */
html{overscroll-behavior-y:none}
.win-scroll,.vid-thumbs,.video-rail{overscroll-behavior:contain}

/* --- phone layout: clear zones, safe areas, no overlap / overflow --- */
@media(max-width:700px){
 header{padding:12px 14px;gap:8px 10px;flex-wrap:wrap;align-items:center;background:linear-gradient(#060d1cea,transparent)}
 .brandblock{order:1}
 .replay-btn{order:2;margin-left:auto;width:34px;height:34px;font-size:16px}
 .quick-links{order:3;flex:1 1 100%;margin-left:0;justify-content:center;padding:5px 6px}
 .quick-links button:first-child{display:inline-flex}
 .quick-links button{font-size:11px;padding:7px 9px}
 .intro-copy{top:22%;left:7%;right:7%}
 h1{font-size:clamp(27px,7.6vw,40px);letter-spacing:-.3px}
 .intro-copy p{font-size:13px;line-height:1.7}
 .holo-card{width:166px;height:384px;margin-top:-192px;padding:15px;gap:7px}
 .card-desc{font-size:10.5px;line-height:1.48}
 .holo-card strong{font-size:16px}
 .card-icon{height:48px}
 .holo-card .motion-icon{width:56px;height:48px}
 .card-action{padding:9px 10px;font-size:10.5px}
 .world{min-height:0}
 .ring-controls{bottom:calc(13% + env(safe-area-inset-bottom,0px))}
 footer span:not(.policy-links){display:none}
 .policy-links{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}

/* ===== 2026-10-07 journey & window refine =======================
   Big title header + home icon, holographic-soft windows, per-item
   content windows, black-glass text backing, rebuilt media windows. */

/* --- 1. header: big title + stable subtitle; nav never collides --- */
header{align-items:flex-start;gap:12px 20px;flex-wrap:wrap}
.brandblock{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;padding-top:2px}
.brand{font-family:var(--font-head);font-weight:700;color:#fff;letter-spacing:.4px;font-size:clamp(20px,3.3vw,38px);line-height:1.02;text-decoration:none;text-shadow:0 2px 18px #030a1c}
.brand .dot{color:var(--cyan)}
.brand-sub{font-family:var(--font-head);font-size:clamp(8px,.95vw,11px);letter-spacing:3px;color:#c2d8e9;font-weight:500}
.quick-links{align-self:center}
.nav-home{display:grid;place-items:center;padding:5px 7px!important;border:0!important;background:color-mix(in srgb,var(--accent) 18%,transparent)!important}
.nav-home img{width:22px;height:22px;display:block;filter:drop-shadow(0 1px 2px #000a)}
.nav-home:hover{background:color-mix(in srgb,var(--accent) 32%,transparent)!important}

/* --- 6. windows: brighter, softer, holographic (metal sheen kept) --- */
.metal-window{background:linear-gradient(150deg,color-mix(in srgb,var(--accent,#76ddff) 34%,rgba(14,30,46,.78)),color-mix(in srgb,var(--accent,#76ddff) 12%,rgba(8,16,29,.82)) 74%) padding-box,linear-gradient(135deg,#eef9ff,#8fb8c9 10%,#1b2d3b 24%,var(--accent,#76ddff) 46%,#9db0bc 64%,#eef9ff 74%,#243742 90%) border-box!important;box-shadow:inset 1px 1px 2px #ffffff22,inset -1px -1px 3px #0009,0 12px 32px -14px #000b,0 0 20px -9px color-mix(in srgb,var(--accent,#76ddff) 45%,transparent)!important}
.holo-card{background:linear-gradient(152deg,color-mix(in srgb,var(--accent) 44%,rgba(15,32,49,.76)),color-mix(in srgb,var(--accent) 17%,rgba(8,17,30,.82)) 74%) padding-box,linear-gradient(135deg,#eef9ff,#8fb8c9 10%,#1b2d3b 24%,var(--accent) 46%,#9db0bc 64%,#eef9ff 74%,#243742 90%) border-box!important}
.holo-card strong{text-shadow:0 2px 12px #040c1c}

/* black-glass backing behind body text (readable over the bright world) */
.glass-text{background:rgba(5,12,24,.5);border:1px solid #ffffff14;border-radius:12px;padding:12px 14px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.glass-text p{margin:0 0 9px;color:#e8eff9}
.glass-text p:last-child{margin-bottom:0}
.card-desc{background:rgba(5,12,24,.44);border-radius:9px;padding:7px 9px}
.intro-copy p{display:inline-block;background:rgba(5,11,22,.44);border-radius:12px;padding:12px 15px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* --- section container: a soft glass backdrop; items are the windows --- */
#scene-panel{border:0!important;background:linear-gradient(160deg,rgba(8,16,30,.72),rgba(5,11,22,.82))!important;box-shadow:0 24px 70px -22px #000d!important;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
#scene-panel::before{display:none!important}
.win-head{align-items:center}
.win-close{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;font-size:17px;color:#eafaff;background:color-mix(in srgb,var(--accent) 20%,#0b1a26);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);cursor:pointer;transition:box-shadow .2s,transform .12s}
.win-close:hover{box-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)}
.win-close:active{transform:scale(.92)}
.section-intro{font-size:12.5px;line-height:1.55;color:#d4e3f0;margin:0 0 14px;padding:11px 13px;background:rgba(5,12,24,.5);border-radius:12px;border:1px solid #ffffff12}

/* --- 7/8. per-item content windows stacked inside the section --- */
.item-stack{display:grid;gap:15px}
.item-win{position:relative;border-radius:16px;padding:16px;display:grid;gap:9px}
.item-win h3{font-family:var(--font-head);font-weight:600;font-size:17px;margin:0;color:#f4fbff}
.item-sub{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 62%,#d8e7f3);font-family:var(--font-head);margin-top:-3px}
.item-win .glass-text{font-size:12.5px;line-height:1.58}
.item-logo{width:50px;height:50px;border-radius:11px;object-fit:cover;background:#0a1626;border:1px solid #ffffff1a}
.item-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.item-actions a,.item-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;text-decoration:none;font-family:var(--font-head);font-weight:500;font-size:12.5px;color:#eafaff;background:color-mix(in srgb,var(--accent) 24%,#0c1c28);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:11px;padding:11px 14px;cursor:pointer;transition:box-shadow .2s,transform .12s,border-color .2s}
.item-actions a:hover,.item-actions button:hover{border-color:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 40%,transparent)}
.item-actions a:active,.item-actions button:active{transform:scale(.96)}
.item-actions .placeholder{opacity:.55;border-style:dashed;cursor:default}
.item-actions .placeholder:active{transform:none;box-shadow:none}

/* --- media: each film its own window (thumbnail + title + Play) --- */
.vid-win{gap:11px}
.vid-win .vid-thumb{position:relative;display:block;width:100%;padding:0!important;border:0;border-radius:12px;overflow:hidden;background:#0a141f;cursor:pointer}
.vid-win .vid-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.vid-win .vt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;display:grid;place-items:center;border-radius:50%;font-size:20px;padding-left:4px;color:#eafaff;background:rgba(6,13,34,.5);border:1.5px solid color-mix(in srgb,var(--accent) 80%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent);transition:transform .2s,background .2s}
.vid-win .vid-thumb:hover .vt-play{transform:translate(-50%,-50%) scale(1.1);background:color-mix(in srgb,var(--accent) 35%,rgba(6,13,34,.6))}
.vid-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vid-titles{display:grid;gap:2px;min-width:0}
.vid-titles strong{font-family:var(--font-head);font-weight:600;font-size:13.5px;color:#f4fbff}
.vid-titles small{font-size:11px;color:#aac2d6}
.vid-play{flex:0 0 auto;font-family:var(--font-head);font-weight:500;font-size:12.5px;color:#eafaff;background:color-mix(in srgb,var(--accent) 26%,#0c1c28);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);border-radius:11px;padding:10px 15px;cursor:pointer;transition:box-shadow .2s,transform .12s}
.vid-play:hover{box-shadow:0 0 14px color-mix(in srgb,var(--accent) 45%,transparent)}
.vid-play:active{transform:scale(.95)}
.vid-fs-err{position:absolute;left:0;right:0;bottom:64px;text-align:center;color:#ffb3a1;font-size:14px;padding:0 20px}

/* wider section panel on desktop so stacked windows breathe */
@media(min-width:701px){#scene-panel{width:min(560px,46vw)}}

/* --- phones: nav on its own row, comfortable item windows --- */
@media(max-width:700px){
 .brand{font-size:clamp(18px,6.2vw,30px)}
 .brandblock{flex:1 1 100%}
 .quick-links{order:3;flex:1 1 100%;align-self:stretch;flex-wrap:wrap;justify-content:center}
 .item-win{padding:14px}
 .section-intro{font-size:12px}
 /* a near-fullscreen section owns the screen; hide the fixed header so it
    cannot overlap the section's own title + close (the × returns home) */
 body.in-section header{display:none}
}

/* ===== 2026-10-07 nav + card tweak ==============================
   refresh icon lives inside the nav menu; nav sits higher; shorter
   selection cards so they stop fighting the nav for space. */
.quick-links .replay-btn{order:9;flex:0 0 auto;width:34px;height:34px;font-size:16px;margin:0 0 0 2px}
header{padding-top:15px}
.quick-links{align-self:flex-start}
.holo-card{height:258px;margin-top:-129px}
@media(max-width:700px){
 .replay-btn{order:9;margin-left:0}
 .quick-links .replay-btn{width:32px;height:32px;font-size:15px}
 .holo-card{height:300px;margin-top:-150px}
}

/* ===== 2026-10-07 travel + arrows ==============================
   walking-steps animation while travelling, a white Skip-travel link,
   and an active edge-glow on the ring arrows (they looked inactive). */
#travel-controls{gap:14px}
.walk-steps{display:inline-flex;align-items:center;gap:6px;height:16px}
.walk-steps i{width:8px;height:12px;border-radius:60% 60% 55% 55%/70% 70% 42% 42%;background:var(--cyan,#72e7ff);box-shadow:0 0 8px #72e7ff;opacity:.16;animation:stepwalk 1.5s infinite}
.walk-steps i:nth-child(odd){transform:translateY(-3px) rotate(-11deg)}
.walk-steps i:nth-child(even){transform:translateY(3px) rotate(11deg)}
.walk-steps i:nth-child(2){animation-delay:.2s}
.walk-steps i:nth-child(3){animation-delay:.4s}
.walk-steps i:nth-child(4){animation-delay:.6s}
.walk-steps i:nth-child(5){animation-delay:.8s}
@keyframes stepwalk{0%,65%,100%{opacity:.16}22%{opacity:1}}

/* Skip travel: a plain white text link, not a filled button */
#skip-travel{background:none!important;border:0!important;box-shadow:none!important;color:#fff!important;font-family:var(--font-head);font-weight:500;font-size:12.5px;letter-spacing:.3px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ffffff77;padding:4px 2px!important}
#skip-travel:hover{text-decoration-color:var(--cyan,#72e7ff);box-shadow:none!important;transform:none!important}
#skip-travel:active{transform:scale(.97)!important;box-shadow:none!important}

/* ring arrows: brighter, pulsing edge-glow so they read as active */
.ring-controls>button{box-shadow:inset 1px 1px 2px #cdefff66,inset -1px -1px 3px #000d,0 4px 12px #000a,0 0 20px 2px #5fd9ffbb,0 0 40px -6px #72e7ff!important;animation:arrowglow 2.4s ease-in-out infinite}
@keyframes arrowglow{0%,100%{box-shadow:inset 1px 1px 2px #cdefff66,inset -1px -1px 3px #000d,0 4px 12px #000a,0 0 18px 1px #46c9f2aa,0 0 34px -6px #72e7ffaa}50%{box-shadow:inset 1px 1px 2px #cdefff66,inset -1px -1px 3px #000d,0 4px 12px #000a,0 0 30px 5px #72e7ff,0 0 54px -4px #72e7ff}}
.ring-controls>button:hover{box-shadow:inset 1px 1px 2px #cdefff66,0 0 36px 6px #72e7ff!important;transform:scale(1.07)}
@media(prefers-reduced-motion:reduce){.walk-steps i{opacity:.6}}

/* ===== 2026-10-07 minimal travel (James) =======================
   lose the window: just the walking steps + a white Skip link. */
#travel-controls{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;bottom:42px;gap:14px}
#travel-controls span[role=status]{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#skip-travel{text-decoration:underline!important;text-shadow:0 1px 6px #000c}
.walk-steps i{width:9px;height:13px}

/* ===== 2026-10-07 card desc tidy =================================
   drop the ragged per-line glass boxes on the courtyard cards; the
   card surface already darkens the world, so a text-shadow is enough.
   Descriptions shortened in the HTML to fit the smaller cards. */
.card-desc{background:none!important;padding:0!important;text-shadow:0 1px 8px #040c1c}

/* ===== 2026-10-07 nav hue + mobile tuck ========================= */
.quick-links{--accent:#b088ff}
@media(max-width:700px){body.nav-hide .quick-links{display:none!important}}