/* A shared visual journey, with ordinary document flow as the fallback. */
.project-transfer { position:fixed; inset:0; z-index:90; background:transparent; pointer-events:none; }
.project-transfer img { position:absolute; max-width:none; object-fit:contain; transform-origin:top left; box-shadow:0 24px 70px #17191c28; }
.project-arriving main,.project-arriving .header,.project-arriving .footer { opacity:0; }
.project-image:focus-visible { outline:3px solid var(--blue); outline-offset:6px; }
.portal-track { position:relative; }
.portal-enabled:not(.motion-paused) .portal-track { height:210svh; }
.portal-enabled:not(.motion-paused) .portal-track>.hero { position:sticky; top:0; max-height:none; height:var(--portal-height); min-height:0; background:var(--portal-bg,#e9edef); }
.portal-enabled:not(.motion-paused) .portal-track>.hero.portal-pinned { position:fixed; top:0; left:0; width:100%; z-index:20; }
.portal-enabled:not(.motion-paused) .portal-track>.hero.portal-passed { visibility:hidden; pointer-events:none; }
.portal-peek { display:none; }
.portal-enabled:not(.motion-paused) .portal-peek { position:absolute; top:var(--portal-peek-top); left:0; right:0; display:flex; align-items:center; gap:25px; min-height:90px; padding:16px 4%; background:#17c0d9; }
.portal-peek span { margin-right:auto; font:600 11px var(--display); }
.portal-peek strong { font-size:15px; }
.portal-peek img { width:90px; height:auto; }
.portal-enabled:not(.motion-paused) .hero-copy { opacity:var(--portal-copy,1); transform:translateY(calc((1 - var(--portal-copy,1)) * -45px)); }
.portal-enabled:not(.motion-paused) .scene { top:var(--portal-scene-top,0px); bottom:var(--portal-scene-bottom,0px); }
.portal-enabled:not(.motion-paused) .hero-bottom,.portal-enabled:not(.motion-paused) .scene-caption { opacity:var(--portal-copy,1); }
.portal-screen { position:absolute; max-width:none; height:auto; opacity:0; pointer-events:none; z-index:1; box-shadow:0 24px 70px #17191c20; }
.portal-label { position:absolute; left:4%; right:4%; bottom:34px; opacity:0; display:flex; align-items:center; justify-content:space-between; gap:24px; font:500 12px var(--display); pointer-events:none; }
.portal-label strong { font:700 25px var(--body); }
.portal-skip { position:absolute; left:4%; top:30px; display:none; font-size:12px; z-index:3; padding:12px 0; }
.portal-enabled .portal-skip.is-visible { display:block; }
.motion-paused .portal-screen,.motion-paused .portal-label,.motion-paused .portal-skip { display:none; }
.cinematic-ready .work-reel { height:720svh; }
.reel-feature { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity:0; }
.reel-feature>img { position:absolute; max-width:none; max-height:none; box-shadow:0 25px 60px #0003; }
.reel-feature-label { position:absolute; left:0; right:0; text-align:center; font-size:12px; font-weight:600; color:var(--reel-ink); }
.reel-frame.has-feature .reel-image { opacity:var(--primary-opacity,1); }
.reel-frame.has-feature .reel-image-arrow { opacity:var(--primary-opacity,1); }
.reel-frame.has-feature { --feature-focus:0; }
.reel-feature-marker { position:absolute; width:40px; height:40px; border:2px solid #214de3; border-radius:50%; background:#214de329; opacity:var(--marker-opacity,0); transform:translate(-50%,-50%) scale(var(--marker-scale,1)); }
.reel-feature-marker::after { content:''; position:absolute; inset:11px; background:var(--blue); border-radius:50%; }
.reel-focus { position:absolute; border:2px solid #f5a000; box-shadow:0 0 0 999px #0007; pointer-events:none; }
.feature-story { background:#17191c; color:white; padding:85px 6%; }
.feature-story h2 { font-size:34px; margin:15px 0 12px; }
.feature-story>p:not(.overline) { color:#bec6ce; font-size:14px; max-width:700px; }
.feature-view { position:relative; margin:38px 0 20px; display:grid; place-items:center; height:560px; background:#e9edef; overflow:hidden; }
.feature-view img { width:auto; height:auto; max-width:94%; max-height:92%; }
.feature-tabs { display:flex; flex-wrap:wrap; gap:0; border-top:1px solid #ffffff40; }
.feature-tabs button { flex:1; min-width:140px; text-align:left; padding:20px 18px 20px 0; color:#bec6ce; border-top:3px solid transparent; font-size:13px; }
.feature-tabs button[aria-selected=true] { border-color:var(--amber); color:white; }
.feature-tabs span { font:600 11px var(--display); color:var(--amber); margin-right:10px; }
.feature-story>.feature-explanation { min-height:6em; max-width:900px; margin:15px 0 0; padding-left:18px; border-left:2px solid var(--amber); color:#e9edef; line-height:1.9; }
.assembly-canvas { position:absolute; inset:0; z-index:0; pointer-events:none; }
.assembly-canvas canvas,.closing-world canvas { display:block; width:100%; height:100%; }
.experience-playing .assembly-stage.has-world { background:#e9edef; color:var(--ink); margin-left:-6.82%; margin-right:-6.82%; height:100svh; top:0; }
.experience-playing .assembly-stage.has-world .chapter-source>li { padding:0 6%; justify-content:flex-start; padding-top:95px; transform:none; }
.experience-playing .assembly-stage.has-world .chapter-source h3 { font-size:42px; margin:12px 0; max-width:520px; }
.experience-playing .assembly-stage.has-world .chapter-source>li>p { font-size:15px; color:#505961; max-width:570px; text-wrap:pretty; }
.experience-playing .assembly-stage.has-world .chapter-source>li>span { position:static; font-size:12px; opacity:1; color:var(--blue); }
.experience-playing .assembly-stage.has-world .chapter-backword { top:auto; bottom:70px; left:5%; opacity:.06; font-size:130px; }
.experience-playing .assembly-stage.has-world .chapter-meta { left:6%; right:6%; z-index:2; }
.assembly-stage.has-world .chapter-progress { background:#17191c30; }
.assembly-stage.has-world .chapter-progress>span { background:var(--blue); }
.assembly-skip { position:absolute; right:6%; top:35px; z-index:4; font-size:11px; padding:10px; border-bottom:1px solid #17191c50; }
.assembly-notes { position:absolute; inset:0; pointer-events:none; }
.assembly-note { position:absolute; background:#fff; padding:14px 18px; font-size:13px; color:var(--ink); box-shadow:0 12px 28px #17191c12; opacity:var(--note-opacity,1); transform:translate(-50%,-50%); white-space:nowrap; }
.assembly-note:nth-child(2) { background:#214de3; color:white; }
.assembly-note:nth-child(3) { background:#f5a000; }
.motion-paused .assembly-canvas,.motion-paused .assembly-notes,.motion-paused .assembly-skip { display:none; }
.closing-world { position:relative; height:540px; margin:-78px -6.82% 20px; background:#e9edef; isolation:isolate; overflow:hidden; }
.closing-world::after { content:''; position:absolute; left:8%; right:8%; bottom:30px; height:1px; background:#17191c26; }
.closing-label { position:absolute; top:32px; left:6%; font:600 11px var(--display); }
.closing-copy { font:800 50px/1.5 var(--body); margin:18px 0 35px; }
.cinematic-ready .contact { background:#f5a000; }
.cinematic-ready .contact>h2 { font-size:65px; margin:22px 0 0; }
.cinematic-ready .contact>h2,.cinematic-ready .contact::before { transform:none; clip-path:none; }
.cinematic-ready .contact::before { display:none; }
.closing-fallback { position:absolute; inset:65px 8%; display:flex; justify-content:center; align-items:center; gap:24px; }
.closing-fallback img { width:20%; height:auto; }
.closing-world.world-ready .closing-fallback { display:none; }
.bespoke-section { background:#e9edef; }
.bespoke-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px 40px; margin:22px 0 38px; }
.bespoke-heading h2 { font-size:46px; line-height:1.45; }
.bespoke-heading h2 span { display:block; }
.bespoke-heading>p { flex:none; padding-bottom:12px; border-bottom:3px solid var(--amber); font-size:22px; font-weight:700; }
.bespoke-story { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:50px; align-items:center; }
.bespoke-story figure { margin:0; }
.bespoke-story figure>a { display:block; }
.bespoke-story img { width:100%; height:auto; }
.bespoke-story figcaption { display:flex; justify-content:space-between; gap:18px; font-size:12px; padding:18px 0; border-bottom:1px solid var(--line); }
.bespoke-story figcaption strong { white-space:nowrap; }
.bespoke-copy>p { font-size:15px; line-height:2; }
.bespoke-copy dl { margin:22px 0; }
.bespoke-copy dl>div { display:grid; grid-template-columns:72px 1fr; gap:15px; border-top:1px solid var(--line); padding:15px 0; font-size:13px; }
.bespoke-copy dt { color:var(--blue); font-weight:700; }
.bespoke-copy dd { margin:0; }
.bespoke-links { display:flex; flex-wrap:wrap; gap:20px 30px; }
.bespoke-links a { font-size:13px; }
.bespoke-note { border-top:1px solid var(--line); margin-top:32px; padding-top:20px; font-size:12px; line-height:1.9; color:#505961; }
@media(min-width:1700px) { .experience-playing .assembly-stage.has-world .chapter-source h3 { font-size:52px; max-width:620px; } .closing-world { height:650px; } }
@media(max-width:1250px) {
  .closing-world { margin-left:-5.5555%; margin-right:-5.5555%; }
  .experience-playing .assembly-stage.has-world { margin-left:-5.5555%; margin-right:-5.5555%; }
}
@media(max-width:760px) {
  .hero { --portal-scene-top:365px; --portal-scene-bottom:62px; }
  .portal-enabled:not(.motion-paused) .portal-track { height:185svh; }
  .portal-label { left:22px; right:22px; bottom:65px; flex-direction:column; align-items:flex-start; gap:10px; font-size:10px; }
  .portal-label strong { font-size:21px; }
  .portal-peek strong { font-size:11px; }
  .portal-peek img { width:65px; }
  .portal-enabled:not(.motion-paused) .portal-peek { gap:14px; min-height:70px; padding:12px 22px; }
  .portal-peek span { font-size:8px; }
  .portal-skip { left:22px; top:18px; font-size:10px; }
  .cinematic-ready .work-reel { height:660svh; }
  .reel-feature-label { font-size:10px; }
  .reel-feature-marker { width:28px; height:28px; }
  .reel-feature-marker::after { inset:8px; }
  .feature-story { padding:50px 22px; }
  .feature-story h2 { font-size:25px; }
  .feature-view { height:360px; }
  .feature-tabs button { font-size:11px; min-width:100px; padding:14px 6px 14px 0; }
  .experience-playing .assembly-stage.has-world { margin-left:-22px; margin-right:-22px; }
  .experience-playing .assembly-stage.has-world .chapter-source>li { padding:76px 22px 0; }
  .experience-playing .assembly-stage.has-world .chapter-source h3 { font-size:28px; }
  .experience-playing .assembly-stage.has-world .chapter-source>li>p { font-size:13px; max-width:100%; }
  .experience-playing .assembly-stage.has-world .chapter-backword { font-size:66px; bottom:70px; }
  .assembly-note { padding:9px 12px; font-size:10px; }
  .assembly-skip { top:22px; right:22px; }
  .closing-world { height:340px; margin:-50px -22px 25px; }
  .closing-label { left:22px; top:24px; font-size:10px; }
  .cinematic-ready .contact>h2 { font-size:43px; }
  .closing-copy { font-size:29px; margin:18px 0 25px; }
  .bespoke-heading { display:block; margin:18px 0 28px; }
  .bespoke-heading h2 { font-size:29px; }
  .bespoke-heading>p { display:inline-block; font-size:18px; margin-top:20px; padding-bottom:7px; }
  .bespoke-story { grid-template-columns:minmax(0,1fr); gap:22px; }
  .bespoke-story figcaption { flex-wrap:wrap; gap:5px 20px; font-size:11px; }
  .bespoke-copy>p { font-size:14px; }
  .bespoke-copy dl>div { grid-template-columns:62px 1fr; gap:10px; font-size:12px; }
}
@media(max-height:600px) and (min-width:761px) {
  .hero { height:calc(100svh - 125px); min-height:240px; }
  .hero-copy { padding:15px 0 10px 4%; width:55%; }
  .hero h1 { display:flex; gap:10px; font-size:48px; line-height:1; }
  .hero h2 { font-size:20px; line-height:1.4; }
  .hero .overline { font-size:8px; margin-bottom:10px; }
  .hero-category { margin:9px 0 10px; font-size:10px; }
  .hero-description { display:none; }
  .hero-link { margin-top:12px; font-size:11px; }
  .hero-link .arrow-disc { width:32px; height:32px; }
  .hero-bottom,.scene-caption { display:none; }
  .experience-playing .assembly-stage.has-world .chapter-source>li { padding-top:45px; }
  .experience-playing .assembly-stage.has-world .chapter-source h3 { font-size:29px; max-width:320px; }
  .experience-playing .assembly-stage.has-world .chapter-source>li>p { font-size:12px; max-width:300px; }
  .closing-world { height:330px; }
  .portal-label { bottom:22px; }
}
@media(max-width:380px) {
  .hero { --portal-scene-top:344px; }
  .closing-world { margin-left:-18px; margin-right:-18px; }
  .experience-playing .assembly-stage.has-world { margin-left:-18px; margin-right:-18px; }
}
@media(prefers-reduced-motion:reduce) {
  .portal-track { height:auto!important; }
  .portal-screen,.portal-label,.portal-skip,.assembly-canvas,.assembly-notes,.assembly-skip { display:none; }
  .project-transfer { display:none; }
}