:root{color-scheme:dark;--ink:#edf7f5;--sub:#b9cbcf;--cyan:#60dce2;--line:rgba(169,231,229,.3)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#06131d;color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{font:inherit}button{cursor:pointer}#world{position:fixed;inset:0;display:block;width:100vw;height:100dvh;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,#02091191 100%),linear-gradient(#04111b90,transparent 19% 81%,#04111bd0);z-index:1}.topbar{position:fixed;z-index:7;inset:0 0 auto;height:80px;display:flex;align-items:center;gap:30px;padding:18px clamp(20px,3.4vw,52px);background:linear-gradient(#06141ce8,transparent)}.brand{display:block;width:138px;flex:none}.brand img{width:100%;height:auto;display:block}.topnote{font-size:11px;font-weight:700;letter-spacing:.19em;color:#d7e5e8}.topnote i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--cyan);margin:0 12px;vertical-align:middle}.site-link{margin-left:auto;text-decoration:none;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.14em;border-bottom:1px solid var(--cyan);padding-bottom:5px}#experience{position:fixed;inset:0;z-index:2;pointer-events:none}.face-copy{position:absolute;left:clamp(20px,4.5vw,72px);top:15%;width:min(430px,32vw);transition:opacity .35s,transform .35s;text-shadow:0 2px 14px #011018;pointer-events:auto}.face-copy.changing{opacity:0;transform:translateY(-12px)}.eyebrow{color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.2em;line-height:1.5}.face-copy #face-title{font:650 clamp(30px,3.5vw,56px)/1.07 'Arial Black',Arial,Helvetica,sans-serif;letter-spacing:-.055em;margin:12px 0 14px}.face-copy p{font-size:clamp(15px,1.05vw,18px);line-height:1.54;color:#e0eaec;margin:0;max-width:420px}.project-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}.project-tabs button{border:1px solid #8dd5d675;background:#0b2731c9;color:#d4e7e8;padding:9px 11px;font-size:11px;font-weight:700;letter-spacing:.08em;min-height:36px}.project-tabs button.active{background:var(--cyan);color:#061b23;border-color:var(--cyan)}.frame-tools{position:absolute;right:clamp(22px,5vw,78px);bottom:16%;display:flex;align-items:center;gap:15px;pointer-events:auto}.info-button{border:1px solid var(--cyan);background:#071c25e5;color:var(--cyan);padding:15px 19px;font-size:12px;font-weight:800;letter-spacing:.14em;box-shadow:0 8px 36px #0007}.info-button:hover{background:var(--cyan);color:#051820}.info-button span{margin-left:20px}.frame-tools>span{font-size:10px;letter-spacing:.15em;color:#b3d5d7;max-width:115px;line-height:1.5}.face-nav{position:absolute;left:clamp(20px,4.5vw,72px);bottom:34px;display:flex;gap:5px;pointer-events:auto}.face-nav button{border:0;border-top:1px solid #88bdc580;background:transparent;color:#a8c4c7;padding:10px 9px 3px 0;margin-right:12px;text-align:left;min-width:65px;font-size:11px;letter-spacing:.1em;font-weight:800;opacity:.7}.face-nav button span{display:block;font-size:9px;margin-top:6px}.face-nav button.active{border-color:var(--cyan);color:var(--cyan);opacity:1}.face-nav button:hover{opacity:1}.controls{position:absolute;right:clamp(20px,3.4vw,52px);bottom:26px;display:flex;align-items:center;gap:12px;pointer-events:auto}.controls button{border:1px solid var(--line);background:#09202bd0;color:white;width:44px;height:44px;font-size:21px}.controls button:disabled{opacity:.4}.controls button:not(:disabled):hover{border-color:var(--cyan)}#step-label{font-size:11px;letter-spacing:.18em;color:#cfe1e3}.navigate-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;font-size:10px;letter-spacing:.14em;color:#b6d0d3;white-space:nowrap}.preview-host{position:fixed;z-index:3;overflow:hidden;opacity:0;transition:opacity .3s;pointer-events:none;border:1px solid #9fe7e577;box-shadow:0 0 38px #24bcca35}.preview-host.visible{opacity:1}.preview-host iframe,.preview-host video{display:block;width:100%;height:100%;border:0;object-fit:cover;pointer-events:none}#screen-hit{position:fixed;z-index:4;opacity:0;pointer-events:none}#screen-hit.enabled{pointer-events:auto}.loading{position:fixed;inset:0;z-index:30;display:grid;place-content:center;justify-items:center;gap:24px;background:#081721;color:#cce3e5;font-size:11px;font-weight:800;letter-spacing:.2em;transition:opacity .5s,visibility .5s}.loading.done{opacity:0;visibility:hidden}.loading-logo{width:74px;height:74px;object-fit:contain;animation:turn 2.1s linear infinite;filter:drop-shadow(0 0 22px #2fc6d76b)}@keyframes turn{to{transform:rotateY(360deg)}}.fallback{position:fixed;z-index:20;inset:15% 12%;background:#0c222d;padding:30px;pointer-events:auto}.fallback a{display:block;padding:12px;color:var(--cyan)}.scrim{position:fixed;z-index:11;inset:0;background:#020b13c9;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}.scrim.open{opacity:1;visibility:visible}.project-modal{position:fixed;z-index:12;left:50%;top:50%;width:min(850px,calc(100vw - 40px));max-height:min(88dvh,800px);overflow:auto;padding:clamp(26px,4vw,55px);background:linear-gradient(145deg,#102c38f5,#071922f9);border:1px solid #8fe6e4a6;box-shadow:0 25px 90px #000c,0 0 80px #50d6da22;opacity:0;visibility:hidden;transform:translate(-50%,-45%) perspective(900px) rotateY(-9deg) scale(.9);transition:transform .4s,opacity .4s,visibility .4s}.project-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) perspective(900px) rotateY(0) scale(1)}.close{position:absolute;right:22px;top:20px;border:1px solid var(--line);color:white;background:transparent;width:42px;height:42px;font-size:26px}.project-modal h2{font:650 clamp(32px,4vw,52px)/1.08 'Arial Black',Arial,Helvetica,sans-serif;letter-spacing:-.045em;max-width:660px;margin:14px 0 20px}.project-modal p{font-size:17px;line-height:1.64;color:#deedef;max-width:730px}.modal-preview img{display:block;width:100%;max-height:230px;object-fit:cover;border:1px solid var(--line);margin:24px 0}.model-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0}.model-metrics div{border:1px solid var(--line);background:#0b2834;padding:16px}.model-metrics strong{display:block;color:var(--cyan);font:650 25px 'Arial Black',Arial,Helvetica,sans-serif}.model-metrics span{font-size:11px;letter-spacing:.1em;color:#bed8da}.modal-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.modal-links a,.modal-links button{display:inline-block;background:var(--cyan);color:#06202a;border:1px solid var(--cyan);padding:13px 15px;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.11em}.modal-links button{background:transparent;color:var(--cyan)}.video-modal{position:fixed;z-index:22;inset:0;background:#020910f2;display:none;align-items:center;justify-content:center;padding:65px 20px}.video-modal.open{display:flex}.video-modal iframe{width:min(1100px,100%);aspect-ratio:16/9;border:1px solid var(--line)}.video-modal button{position:absolute;right:25px;top:22px;color:white;background:transparent;border:1px solid var(--line);padding:12px 16px;font-size:11px;letter-spacing:.15em}:focus-visible{outline:2px solid #aafaff;outline-offset:3px}
@media(max-width:900px){.topnote{display:none}.face-copy{top:11%;width:min(390px,45vw)}.frame-tools{bottom:17%}.navigate-hint{display:none}}@media(max-width:700px){.topbar{height:65px;padding:12px 20px}.brand{width:108px}.site-link{font-size:10px}.face-copy{top:74px;left:18px;right:18px;width:auto;text-shadow:0 2px 16px #00131b}.face-copy #face-title{font-size:clamp(27px,8vw,40px);margin:7px 0}.face-copy p{font-size:15px;line-height:1.4;max-width:480px}.project-tabs{margin-top:10px;gap:5px}.project-tabs button{font-size:10px;padding:7px 8px;min-height:33px}.frame-tools{left:18px;right:auto;bottom:138px}.frame-tools>span{display:none}.info-button{padding:12px 14px;font-size:10px}.face-nav{left:17px;right:17px;bottom:72px;justify-content:space-between;gap:2px}.face-nav button{min-width:0;margin:0;padding:6px 2px;font-size:11px}.face-nav button span{display:none}.controls{right:17px;bottom:18px}.controls button{width:42px;height:42px}.project-modal{padding:63px 22px 26px}.project-modal p{font-size:15px}.project-modal h2{font-size:30px}.modal-preview img{max-height:190px}.model-metrics strong{font-size:20px}}@media(max-width:400px){.face-copy #face-title{font-size:26px}.face-copy p{font-size:14px}.face-nav{bottom:74px}.frame-tools{bottom:132px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Legibility is independent of the depth of the 3D scene. */
.face-copy{z-index:10;width:min(410px,30vw);padding:20px 22px 22px;margin:-20px 0 0 -22px;background:linear-gradient(90deg,#06141df0 0%,#071924e6 88%,#071924b5 100%);border-left:2px solid #5dc8db;box-shadow:0 18px 50px #020a1280;backdrop-filter:blur(9px)}
.face-copy #face-title{font-size:clamp(30px,3vw,50px)}
.face-copy p{font-size:clamp(16px,1vw,18px)}
.project-tabs button{font-size:12px}
.frame-tools,.face-nav,.controls,.navigate-hint{z-index:9}
.preview-host{z-index:3}
#screen-hit{z-index:4}
.frame-tools{bottom:14%}
.contact-mode .frame-tools{right:24%;bottom:18%;transform:translateX(50%)}
.contact-mode .frame-tools>span{display:none}
.contact-mode .face-copy .project-tabs{display:none}
@media(max-width:900px){.face-copy{width:min(365px,38vw)}}
@media(max-width:700px){.face-copy{top:70px;left:16px;right:16px;width:auto;max-height:35dvh;overflow:auto;margin:0;padding:14px 16px 15px;background:#06141df0;box-shadow:0 12px 35px #000a}.face-copy #face-title{font-size:clamp(26px,8vw,38px)}.face-copy p{font-size:16px}.project-tabs button{font-size:12px}.frame-tools{left:50%;right:auto;bottom:16%;transform:translateX(-50%)}.frame-tools .info-button{white-space:nowrap}.contact-mode .frame-tools{left:50%;right:auto;bottom:18%;transform:translateX(-50%)}.face-nav,.controls{z-index:11}.face-nav{bottom:70px;background:#06141de0;padding:6px;border-radius:2px}.controls{bottom:12px}}
@media(max-width:400px){.face-copy{max-height:37dvh}.face-copy p{font-size:15px}.face-nav{bottom:67px}}
@media(min-width:701px){.contact-mode .frame-tools{right:35%;bottom:17%}}

.modal-preview iframe{display:block;width:100%;aspect-ratio:16/9;max-height:360px;border:1px solid var(--line);margin:24px 0}
/* Spatial interaction and audio controls */
.top-actions{display:flex;align-items:center;gap:22px;margin-left:auto}
.top-actions .site-link{margin-left:0}
#sound-toggle{border:1px solid #6bd7e089;background:#081e2bd9;color:#9be9f0;font-size:11px;font-weight:800;letter-spacing:.12em;padding:9px 12px;white-space:nowrap}
#sound-toggle[aria-pressed="false"]{color:#b7c6ce;border-color:#667b88}
#sound-toggle span{font-size:14px;margin-left:7px}
#brand-center{display:none;position:absolute;z-index:5;left:50%;top:45%;transform:translate(-50%,-50%);width:min(440px,45vw);pointer-events:none}
#brand-center img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 16px #2885ad30)}
.contact-mode #brand-center{display:block}
#model-hit{display:none;position:absolute;z-index:6;left:1%;top:16%;width:41%;height:69%;cursor:grab;touch-action:none;pointer-events:auto}
#model-hit:active{cursor:grabbing}
.has-model #model-hit{display:block}
#model-hint{display:none;position:absolute;z-index:8;left:22%;bottom:11%;transform:translateX(-50%);padding:7px 10px;color:#9ddbe5;background:#051522c9;font-size:11px;font-weight:700;letter-spacing:.1em;white-space:nowrap;pointer-events:none}
.has-model #model-hint{display:block}
.frame-tools{z-index:9}
.frame-tools>span{display:none}
#screen-hit.enabled{opacity:1;display:flex;align-items:flex-end;justify-content:center;padding:0 15px 18px;background:linear-gradient(transparent 70%,#041420ac);color:#e6faff;font-size:13px;letter-spacing:.12em;font-weight:800;text-shadow:0 2px 8px #000;cursor:pointer}
#screen-hit.enabled:empty{background:transparent}
@media(max-width:900px){.top-actions{gap:8px}#sound-toggle{font-size:10px;padding:8px}.top-actions .site-link{font-size:10px}}
@media(max-width:700px){.topbar{gap:8px}.top-actions .site-link{display:none}#sound-toggle{font-size:10px;padding:8px 9px}#brand-center{width:min(72vw,390px);top:46%}#model-hit{left:0;top:37%;width:100%;height:39%}#model-hint{left:50%;bottom:12%;font-size:10px}.frame-tools{white-space:nowrap}}
@media(min-width:701px){.centered-face .face-copy{left:50%;top:9%;transform:translateX(-50%);width:min(680px,72vw);margin:0;text-align:center;border-left:0;border-top:2px solid #5dc8db;background:#06141ddf}.centered-face .face-copy.changing{transform:translate(-50%,-12px)}.centered-face .project-tabs{justify-content:center}}
@media(max-width:700px){.centered-face .face-copy{text-align:center}.centered-face .project-tabs{justify-content:center}}
#sound-toggle .sound-indicator{display:inline-block;width:29px;height:16px;border-radius:20px;background:#73dae4;vertical-align:middle;position:relative;margin-left:8px}
#sound-toggle .sound-indicator::after{content:"";position:absolute;top:3px;left:16px;width:10px;height:10px;border-radius:50%;background:#061b27;transition:left .2s}
#sound-toggle[aria-checked="false"] .sound-indicator{background:#324a5b}
#sound-toggle[aria-checked="false"] .sound-indicator::after{left:3px;background:#b7c6ce}
#model-hit:focus-visible{outline:2px solid #73dae4;outline-offset:2px}
#sound-toggle[aria-checked="false"]{color:#b7c6ce;border-color:#667b88}
/* The content occupies one centered editorial stage on every cube face. */
.face-copy,.centered-face .face-copy{left:50%;top:clamp(82px,9.5dvh,132px);width:min(810px,calc(100vw - 56px));max-width:810px;margin:0;padding:0 14px;background:none;border:0;box-shadow:none;backdrop-filter:none;text-align:center;transform:translateX(-50%);text-shadow:0 2px 16px #00101d,0 0 28px #00101d}
.face-copy.changing,.centered-face .face-copy.changing{transform:translate(-50%,-12px)}
.face-copy #face-title{font-size:clamp(30px,3.3vw,52px);margin:7px 0 7px}
.face-copy p{max-width:770px;margin:auto;font-size:clamp(15px,1.1vw,19px);line-height:1.38;color:#f0f7f8}
.service-line{margin:11px auto 0;color:#7cdae7;font-size:11px;line-height:1.4;font-weight:800;letter-spacing:.15em}
.project-tabs,.centered-face .project-tabs{justify-content:center;margin-top:12px}
.project-tabs button{background:#071a26e8;box-shadow:0 0 12px #1d98b21f}
.frame-tools{flex-direction:column;gap:7px;text-align:center}
.frame-tools>span{display:block;max-width:360px;font-size:10px;color:#a9e2e9;background:#061520cf;padding:4px 8px}
.preview-host{border:0;box-shadow:0 0 14px #52cddd45,0 0 48px #52cddd28}
#model-hit{left:25%;top:31%;width:50%;height:47%}
.client-strip{display:none;position:absolute;z-index:8;left:50%;bottom:14%;transform:translateX(-50%);width:min(940px,calc(100vw - 52px));text-align:center;padding:10px 15px;color:#dcecee;background:#061521bb;pointer-events:none}
.contact-mode .client-strip{display:block}
.client-strip span{display:block;color:#7cdae7;letter-spacing:.17em;font-size:10px;font-weight:800;margin-bottom:6px}
.client-strip div{font-size:clamp(12px,1.05vw,15px);font-weight:700;line-height:1.5}
.client-strip small{display:block;color:#9bbac3;font-size:10px;margin-top:4px}
#brand-center{top:48%;width:min(370px,40vw)}
#brand-center img{filter:drop-shadow(0 0 15px #4dccdf53)}
@media(max-height:800px) and (min-width:701px){.face-copy,.centered-face .face-copy{top:78px}.face-copy #face-title{font-size:clamp(29px,3vw,42px)}.face-copy p{font-size:15px}.service-line{margin-top:7px}.project-tabs{margin-top:8px}.project-tabs button{min-height:29px;padding:5px 8px}.client-strip{bottom:13%;padding:5px}.client-strip small{display:none}}
@media(max-width:700px){.face-copy,.centered-face .face-copy{left:50%;right:auto;top:70px;width:calc(100vw - 30px);max-height:31dvh;overflow:auto;margin:0;padding:0 8px;background:none;text-align:center}.face-copy #face-title{font-size:clamp(25px,7vw,36px);margin:5px 0}.face-copy p{font-size:13px;line-height:1.3}.service-line{font-size:9px;letter-spacing:.09em;margin-top:6px}.project-tabs{margin-top:7px;gap:4px}.project-tabs button{font-size:10px;padding:5px 7px;min-height:28px}.frame-tools>span{display:none}#model-hit{left:10%;top:34%;width:80%;height:38%}#brand-center{top:43%;width:min(72vw,350px)}.client-strip{bottom:15%;width:calc(100vw - 30px);padding:6px}.client-strip div{font-size:11px;line-height:1.28}.client-strip small{display:none}}
/* Graphite atmosphere and the extra narrative stations. */
html,body{background:#101216}
.vignette{background:radial-gradient(ellipse at center,transparent 42%,#080a0ec9 100%),linear-gradient(#1012169e,transparent 22% 78%,#101216d6)}
.topbar{background:linear-gradient(#101216ed,transparent)}
.loading{background:#101216}
.face-nav{max-width:calc(100vw - 230px)}
.face-nav button{min-width:clamp(43px,4vw,72px);margin-right:5px}
.face-copy,.centered-face .face-copy{top:clamp(75px,8dvh,104px)}
.face-copy #face-title{font-size:clamp(30px,3.1vw,49px)}
.project-tabs{margin-top:9px}
.team-grid{display:none;position:absolute;z-index:8;left:50%;top:34%;transform:translateX(-50%);width:min(1030px,calc(100vw - 72px));grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px);pointer-events:auto}
.team-mode .team-grid{display:grid}
.team-mode .project-tabs,.team-mode .frame-tools{display:none}
.person-card{text-align:center;min-width:0;padding:10px 10px 14px;background:#15191dd9;border:1px solid #6edce43f;box-shadow:0 12px 40px #0005}
.person-photo{height:clamp(150px,23dvh,235px);display:grid;place-items:center;background:linear-gradient(145deg,#202a30,#111519);border:1px solid #6edce42c;color:#77d8df;letter-spacing:.12em;font:600 clamp(34px,5vw,70px) 'Arial Black',Arial,Helvetica,sans-serif}
.person-card h2{font:700 clamp(16px,1.45vw,22px)/1.2 'Arial Black',Arial,Helvetica,sans-serif;margin:13px 0 3px}
.person-card strong{display:block;color:#75dce6;text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.person-bio{min-height:45px;margin:12px 0 0;color:#9eaeb5;font-size:12px;line-height:1.35}
.client-strip{bottom:13%}
@media(max-height:800px) and (min-width:701px){.face-copy,.centered-face .face-copy{top:76px}.face-copy #face-title{font-size:clamp(28px,2.7vw,40px)}.face-copy p{font-size:14px;line-height:1.34}.service-line{margin-top:6px}.project-tabs{margin-top:6px}.team-grid{top:33%}.person-photo{height:150px}.person-bio{min-height:32px}}
@media(max-width:900px) and (min-width:701px){.face-nav button span{display:none}.face-nav button{min-width:34px}.face-nav{max-width:calc(100vw - 180px)}}
@media(max-width:700px){.face-copy,.centered-face .face-copy{top:67px;max-height:29dvh}.face-copy p{font-size:12px}.face-nav{max-width:none;overflow-x:auto;scrollbar-width:none;gap:0}.face-nav button{min-width:32px;font-size:10px;margin:0}.team-grid{left:0;top:35%;transform:none;width:100vw;display:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 15vw 10px}.team-mode .team-grid{display:flex}.person-card{scroll-snap-align:center;flex:0 0 70vw;padding:8px}.person-photo{height:22dvh;min-height:130px}.person-bio{min-height:34px}.client-strip{bottom:15%}}
.project-modal{background:linear-gradient(145deg,#1c2529f7,#0f1418fc)}
.project-tabs button,.info-button,.controls button,#sound-toggle{background:#141c20e8}
.client-strip,.frame-tools>span{background:#10161bcf}
@media(max-width:700px){.face-nav{background:#10161be8}}
/* The case narrative is readable without opening a detail panel. */
.project-story{position:absolute;z-index:10;left:50%;top:67%;transform:translateX(-50%);width:min(1040px,calc(100vw - 92px));max-height:19dvh;overflow:auto;pointer-events:auto;background:linear-gradient(90deg,#101519ed,#182027e8,#101519ed);border-top:1px solid #77dce288;padding:13px 22px 15px;text-align:center;box-shadow:0 16px 40px #0008;scrollbar-color:#5bb9c1 #172027}
.project-story[hidden]{display:none}.story-label{color:#7fdee5;font-size:12px;letter-spacing:.15em;font-weight:800}.project-story h2{font:700 clamp(17px,1.35vw,22px)/1.2 'Arial Black',Arial,Helvetica,sans-serif;margin:5px 0}.project-story p{font-size:clamp(16px,1.04vw,18px);line-height:1.45;color:#e4eef0;margin:0 auto;max-width:980px}.story-footer{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:9px;color:#88dce2;font-size:12px;letter-spacing:.07em;font-weight:700}.story-footer a{color:#e9fafd;text-decoration:none;border-bottom:1px solid #86dce2;padding-bottom:2px;white-space:nowrap}.story-footer a:hover{color:#73e9ed}.frame-tools{display:none}.contact-mode .frame-tools{display:flex}
.heritage-mode #model-hit{left:12%;top:29%;width:76%;height:35%}.heritage-mode .project-story{top:66%}
@media(max-height:800px) and (min-width:701px){.project-story{top:65%;max-height:22dvh;padding:8px 18px}.project-story p{font-size:15px;line-height:1.34}.project-story h2{font-size:17px;margin:3px}.story-footer{margin-top:5px}}
@media(max-width:700px){.face-copy,.centered-face .face-copy{top:68px;max-height:26dvh}.face-copy #face-title{font-size:clamp(25px,6vw,34px)}.face-copy p{font-size:15px;line-height:1.35}.service-line{font-size:11px}.project-tabs button{font-size:12px}.project-story,.heritage-mode .project-story{top:57%;width:calc(100vw - 26px);max-height:27dvh;padding:10px 14px 12px;text-align:left}.project-story p{font-size:16px;line-height:1.4}.story-footer{font-size:12px;justify-content:flex-start;flex-wrap:wrap;gap:6px 15px}.heritage-mode #model-hit{left:4%;top:33%;width:92%;height:22%}.face-nav{bottom:65px}.contact-mode .frame-tools{display:flex}}
@media(max-width:700px) and (max-height:700px){.face-copy,.centered-face .face-copy{max-height:23dvh}.project-story,.heritage-mode .project-story{top:55%;max-height:29dvh}}

@media(max-width:700px){.project-story,.heritage-mode .project-story{top:61%;max-height:23dvh}}
@media(max-width:700px) and (max-height:700px){.project-story,.heritage-mode .project-story{top:59%;max-height:25dvh}}
/* Editorial case strip: three readable columns below the 3D stage. */
.project-story,.heritage-mode .project-story{top:auto;bottom:clamp(84px,11.5dvh,112px);left:50%;width:min(1320px,calc(100vw - 90px));max-height:24dvh;overflow:visible;padding:0;border:0;background:none;box-shadow:none;text-align:left;opacity:0;transform:translate(-50%,38dvh);transition:transform .78s cubic-bezier(.17,.74,.24,1),opacity .55s ease;will-change:transform,opacity}
.project-story.is-visible{opacity:1;transform:translate(-50%,0)}
.story-content{position:relative;display:grid;grid-template-columns:minmax(200px,.9fr) minmax(0,2.5fr);column-gap:clamp(22px,3vw,54px);align-items:start;opacity:0;text-shadow:0 2px 15px #03080cf5,0 0 30px #03080c}
.project-story.is-visible .story-content{animation:storyCopyIn .52s .42s both}
.story-heading{border-left:2px solid #69d9e0;padding:2px 0 3px 16px}
.story-label{font-size:12px;line-height:1.35;letter-spacing:.13em}
.project-story h2{font-size:clamp(20px,1.65vw,29px);line-height:1.16;margin:10px 0 0}
.project-story p{max-width:none;margin:0;color:#f1f7f8;font-size:clamp(16px,1.04vw,18px);line-height:1.48;column-count:2;column-gap:clamp(18px,2.5vw,42px);text-align:justify;text-justify:inter-word;hyphens:auto;overflow-wrap:break-word}
.story-footer{grid-column:2;justify-content:flex-start;margin-top:12px;gap:20px;font-size:12px;line-height:1.35}
.story-tiles{position:absolute;inset:-8px 0;display:grid;grid-template-columns:repeat(20,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:5px;pointer-events:none;overflow:hidden}
.story-tiles span{background:linear-gradient(135deg,#70dce855,#397c9340);box-shadow:0 0 15px #39cfeb35;opacity:0;transform:translateY(140px) scale(.25);transform-origin:bottom}
.project-story.is-visible .story-tiles span{animation:storyTile .78s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--delay)*14ms)}
@keyframes storyTile{0%{opacity:0;transform:translateY(140px) scale(.25)}38%{opacity:.45;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-7px) scale(1)}}
@keyframes storyCopyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* Structural arcs sit behind every piece of project content. */
@media(max-height:820px) and (min-width:901px){.face-copy,.centered-face .face-copy{top:clamp(50px,6dvh,74px)}.face-copy #face-title{font-size:clamp(29px,2.8vw,43px)}.face-copy p{font-size:16px}.project-story,.heritage-mode .project-story{bottom:clamp(82px,10dvh,96px);max-height:25dvh}.project-story p{font-size:16px;line-height:1.37}.project-story h2{font-size:22px}}
@media(max-width:900px) and (min-width:701px){.project-story,.heritage-mode .project-story{width:calc(100vw - 68px);bottom:88px;max-height:25dvh}.story-content{grid-template-columns:minmax(175px,.8fr) minmax(0,2fr);gap:22px}.project-story p{font-size:15px;column-gap:18px}.project-story h2{font-size:20px}}
@media(max-width:700px){.project-story,.heritage-mode .project-story{top:auto;bottom:clamp(93px,14dvh,125px);width:calc(100vw - 34px);max-height:26dvh;overflow:auto;padding:0 3px 2px;scrollbar-width:thin}.story-content{display:block}.story-heading{padding-left:12px}.project-story h2{font-size:20px;margin:4px 0 8px}.project-story p{column-count:1;text-align:left;font-size:16px;line-height:1.4}.story-footer{display:flex;flex-wrap:wrap;margin:9px 0 0;font-size:12px}.story-tiles{height:100%;min-height:120px;position:fixed}.face-copy,.centered-face .face-copy{top:66px;max-height:23dvh}}
@media(max-width:700px) and (max-height:700px){.project-story,.heritage-mode .project-story{bottom:84px;max-height:26dvh}.face-copy,.centered-face .face-copy{max-height:22dvh}}
@media(prefers-reduced-motion:reduce){.project-story{transition:none}.project-story.is-visible .story-content{animation:none;opacity:1}.project-story.is-visible .story-tiles span{animation:none}}

/* Two editorial stations inside the 3D atlas. Text always sits above the WebGL world. */
.services-mode .project-tabs,.quote-mode .project-tabs,.services-mode .frame-tools,.quote-mode .frame-tools,.services-mode #model-hit,.quote-mode #model-hit{display:none}
.services-mode .face-copy,.quote-mode .face-copy{top:clamp(75px,8dvh,100px)}
.services-mode .face-copy #face-title,.quote-mode .face-copy #face-title{font-size:clamp(30px,2.9vw,46px)}
.services-mode .face-copy p,.quote-mode .face-copy p{font-size:clamp(15px,1vw,17px)}
.atlas-panel{display:none;position:absolute;z-index:12;left:50%;top:clamp(215px,25dvh,280px);bottom:clamp(85px,10dvh,110px);transform:translateX(-50%);width:min(1160px,calc(100vw - 76px));overflow:hidden;background:#11171bee;border:1px solid #9dcdd45e;box-shadow:0 25px 70px #000a;backdrop-filter:blur(14px);pointer-events:auto;color:#eef7f8}
.services-mode .services-panel,.quote-mode .quote-panel{display:flex;flex-direction:column;opacity:0;pointer-events:none}
.services-mode.stage-ready .services-panel,.quote-mode.stage-ready .quote-panel{opacity:1;pointer-events:auto;animation:atlasPanelIn .8s cubic-bezier(.18,.75,.25,1) both}
@keyframes atlasPanelIn{from{opacity:0;transform:translate(-50%,46px) rotateX(-6deg)}to{opacity:1;transform:translate(-50%,0) rotateX(0)}}
.panel-topline{display:flex;justify-content:space-between;gap:16px;flex:none;padding:19px 26px;color:#92e1e7;border-bottom:1px solid #7fb8be5e;font-size:12px;letter-spacing:.14em;font-weight:800}
.services-layout{display:grid;grid-template-columns:minmax(270px,.38fr) minmax(0,.62fr);min-height:0;flex:1}
.service-choices{min-height:0;overflow:auto;scrollbar-color:#667e84 #141c20;border-right:1px solid #83adb14a;padding:10px}
.service-choice{display:grid;grid-template-columns:34px minmax(0,1fr) 24px;align-items:center;text-align:left;gap:12px;width:100%;min-height:68px;border:1px solid transparent;border-bottom-color:#b4ced12f;background:transparent;color:#ebf3f4;padding:12px 16px;font-size:clamp(15px,1.13vw,18px);font-weight:700;line-height:1.2}
.service-choice:hover,.service-choice:focus-visible{background:#243238;border-color:#8edce3}.service-choice.selected{background:#25353b;border-left:3px solid #8fe5ea;color:#fff}
.service-number,.service-arrow{color:#83dbe2;font-size:12px;font-weight:800;letter-spacing:.08em}.service-arrow{text-align:right;font-size:19px}
.service-detail{position:relative;min-height:0;overflow:auto;padding:clamp(24px,2.7vw,42px) clamp(24px,3.6vw,52px);scrollbar-color:#6aabb0 #141c20}
.service-detail-body{position:relative;z-index:1}.service-detail.is-open .service-detail-body{animation:detailCopyIn .55s .35s both}
@keyframes detailCopyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.detail-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(4,1fr);gap:3px;pointer-events:none;overflow:hidden}
.detail-tiles i{opacity:0;background:#63c9d22c;transform:translateY(60px) rotateX(50deg)}.service-detail.is-open .detail-tiles i{animation:detailTile .6s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--i)*14ms)}
@keyframes detailTile{0%{opacity:0;transform:translateY(60px) rotateX(50deg)}45%{opacity:.75;transform:none}100%{opacity:0;transform:translateY(-7px)}}
.detail-index{color:#80dce2;font-size:12px;letter-spacing:.14em;font-weight:800}.service-detail h2{font:800 clamp(24px,2.25vw,36px)/1.1 'Arial Black',Arial,Helvetica,sans-serif;letter-spacing:-.035em;margin:13px 0 19px}
.service-detail p{font-size:clamp(16px,1.14vw,19px);line-height:1.55;color:#e6f0f1;margin:0 0 19px}.service-detail .detail-lead{font-size:clamp(18px,1.4vw,22px);line-height:1.4;color:#fff;font-weight:700}.service-detail h3{font-size:12px;letter-spacing:.15em;color:#89dfe6;margin:24px 0 9px}.service-invite{margin-top:35px!important}
.quote-panel{width:min(940px,calc(100vw - 76px));overflow:auto;scrollbar-color:#6aabb0 #141c20}.quote-progress{height:3px;flex:none;background:#2c3d42;margin:0 26px}.quote-progress span{display:block;height:100%;background:#7fe2e9;transition:width .3s}
#quote-content{padding:clamp(20px,2.8vw,36px) clamp(26px,4vw,52px) 18px;flex:1;min-height:0;overflow:auto;scrollbar-color:#6aabb0 #141c20}#quote-content h2{font:800 clamp(25px,2.6vw,38px)/1.16 'Arial Black',Arial,Helvetica,sans-serif;margin:0 0 24px;letter-spacing:-.04em}
.quote-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quote-option{display:grid;grid-template-columns:28px 1fr 23px;align-items:center;gap:9px;min-height:62px;padding:12px 17px;background:#1b262b;border:1px solid #8facb358;color:#f2f9fa;text-align:left;font-size:clamp(15px,1.1vw,18px);font-weight:700}.quote-option:hover,.quote-option:focus-visible{border-color:#9bebef;background:#2a3b42}.quote-option-index,.quote-option-arrow{color:#7ddce4;font-size:12px}.quote-option-arrow{font-size:18px;text-align:right}
.quote-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex:none;border-top:1px solid #7fb8be5e;padding:15px 26px 18px;background:#141c20}.quote-bottom strong{font-size:11px;color:#87dce4;letter-spacing:.14em}.quote-bottom p{margin:6px 0 0;font-size:14px;line-height:1.35;color:#e2eeee}.quote-bottom button{flex:none;background:none;border:1px solid #8db5b9;color:#effafb;padding:10px 14px;font-size:12px;font-weight:800}.quote-bottom button[hidden]{display:none}
.quote-fields{max-width:690px;margin:auto}.quote-guidance{font-size:16px;line-height:1.5;color:#dce9eb;margin:0 0 20px}.quote-field{display:block;margin:13px 0;color:#eef8f9;font-size:14px;font-weight:700}.quote-field span{display:block;margin-bottom:7px}.quote-field input,.quote-field textarea{display:block;width:100%;min-height:44px;padding:11px 13px;background:#0d1519;border:1px solid #93b7bd;color:#fff;font:16px/1.4 Arial,Helvetica,sans-serif;border-radius:0}.quote-field textarea{resize:vertical;min-height:90px}.quote-field input:focus,.quote-field textarea:focus{outline:2px solid #8ee6ec;outline-offset:2px}.quote-submit{background:#80e2e9;color:#0b1a1f;border:0;padding:14px 20px;font-size:13px;font-weight:800;letter-spacing:.08em;margin-top:7px}.quote-submit:hover{background:#b8f5f8}.quote-fallback{color:#dce9eb;line-height:1.4}.quote-fallback a{color:#91e7ec}
@media(max-width:700px){.services-mode .face-copy,.quote-mode .face-copy{top:67px;max-height:none;overflow:visible}.services-mode .face-copy #face-title,.quote-mode .face-copy #face-title{font-size:clamp(25px,7vw,34px)}.services-mode .face-copy p,.quote-mode .face-copy p{font-size:14px;line-height:1.3}.services-mode .service-line,.quote-mode .service-line{display:none}.atlas-panel{top:clamp(205px,29dvh,265px);bottom:115px;width:calc(100vw - 24px)}.panel-topline{font-size:10px;padding:13px 16px}.services-layout{display:flex;flex-direction:column}.service-choices{display:flex;flex:none;overflow-x:auto;overflow-y:hidden;min-height:76px;max-height:76px;padding:6px;gap:6px;border-right:0;border-bottom:1px solid #83adb14a;scroll-snap-type:x mandatory}.service-choice{flex:0 0 min(235px,72vw);scroll-snap-align:center;min-height:60px;padding:9px;gap:6px;grid-template-columns:24px 1fr 16px;font-size:14px}.service-detail{flex:1;padding:20px 22px}.service-detail h2{font-size:25px;margin:8px 0 13px}.service-detail p{font-size:16px;line-height:1.43;margin-bottom:14px}.service-detail .detail-lead{font-size:17px}.service-detail h3{margin:15px 0 5px}.quote-panel{width:calc(100vw - 24px)}#quote-content{padding:21px 18px 16px}#quote-content h2{font-size:26px;margin-bottom:18px}.quote-options{grid-template-columns:1fr;gap:8px}.quote-option{min-height:52px;font-size:16px}.quote-bottom{padding:12px 16px;gap:8px}.quote-bottom p{font-size:12px}.quote-bottom button{padding:9px;font-size:10px}.quote-progress{margin:0 16px}.quote-guidance{font-size:14px}.quote-field{font-size:13px;margin:9px 0}.quote-field input,.quote-field textarea{font-size:16px}.quote-field textarea{min-height:70px}}
@media(max-width:700px) and (max-height:700px){.atlas-panel{top:190px;bottom:95px}.services-mode .face-copy p,.quote-mode .face-copy p{display:none}}
@media(prefers-reduced-motion:reduce){.services-mode.stage-ready .services-panel,.quote-mode.stage-ready .quote-panel,.service-detail.is-open .service-detail-body,.service-detail.is-open .detail-tiles i{animation:none;opacity:1;transform:none}.service-detail.is-open .detail-tiles i{opacity:0}}
@media(max-width:700px){.story-tiles{position:absolute;inset:0;min-height:120px}}
/* Project selection is a deliberate control, not part of the background. */
html,body{background:#0a0d11}.vignette{background:radial-gradient(ellipse at center,transparent 35%,#04070ab8 100%),linear-gradient(#080b0fe8,transparent 20% 78%,#080b0fe8)}.topbar{background:linear-gradient(#080b0ff2,transparent)}.loading{background:#0a0d11}
.project-tabs,.centered-face .project-tabs{gap:9px;margin-top:15px;position:relative;z-index:12}
.project-tabs button{background:#253039f5;color:#f4fbfc;border:1px solid #83969b;box-shadow:0 5px 18px #0009, inset 0 1px #ffffff17;border-radius:3px;padding:10px 15px;min-height:40px;font-size:13px;font-weight:800;letter-spacing:.025em;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
.project-tabs button:hover,.project-tabs button:focus-visible{background:#344750;border-color:#86ecf2;box-shadow:0 0 18px #4fd7e288;transform:translateY(-2px)}
.project-tabs button.active{background:#8ce6ec;color:#091317;border-color:#c9f9fa;box-shadow:0 0 0 2px #89eaf225,0 0 24px #5bd8e1ac,0 7px 22px #0009}
#story-view-switch{border:1px solid #83dfe7;background:#14252b;color:#a8f0f3;padding:4px 8px;cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.05em}#story-view-switch:hover{background:#67d4dc;color:#091418}#story-view-switch[hidden]{display:none}
@media(max-width:700px){.project-tabs{gap:5px;margin-top:8px}.project-tabs button{font-size:11px;padding:7px 9px;min-height:34px}}
.video-modal.portrait iframe{width:min(440px,90vw);height:min(80dvh,782px);aspect-ratio:9/16}
/* Branded kinetic opening, rendered with DOM and CSS rather than a video file. */
.intro-active .topbar,.intro-active #experience{visibility:hidden}
.intro{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#090c10;color:#eef8f9;isolation:isolate;transition:opacity .7s,visibility .7s}
.intro.finished{opacity:0;visibility:hidden;pointer-events:none}
.intro::before{content:"";position:absolute;inset:-40%;z-index:-1;background:radial-gradient(circle at 50% 48%,#1b485155,transparent 29%),radial-gradient(circle at 74% 72%,#12313b55,transparent 34%);animation:introEther 8s ease-in-out infinite alternate}
.intro-grid{position:absolute;inset:0;background:linear-gradient(90deg,#78dce613 1px,transparent 1px),linear-gradient(#78dce60c 1px,transparent 1px);background-size:8vw 8vw;mask-image:radial-gradient(circle,#0009,transparent 80%);opacity:.35}
.intro-index{position:absolute;top:clamp(20px,4vh,42px);left:clamp(20px,4vw,70px);color:#91c3c8;font-size:12px;letter-spacing:.24em;font-weight:800}
.intro-phrase{position:relative;width:min(1100px,88vw);text-align:center;font:800 clamp(48px,9vw,152px)/.9 'Arial Black',Arial,Helvetica,sans-serif;letter-spacing:-.075em;text-transform:uppercase;filter:drop-shadow(0 0 35px #4bd5df25)}
.intro-phrase span{display:block;animation:introType 1.7s cubic-bezier(.19,.8,.2,1) both}
.intro-phrase span:nth-child(2){color:#7cdae3;animation-delay:.1s}
.intro[data-beat="2"] .intro-phrase{font-style:italic}.intro[data-beat="3"] .intro-phrase{font-size:clamp(47px,8vw,132px)}
.intro-mark{display:none;position:absolute;width:min(650px,76vw);aspect-ratio:489/153;place-items:center;filter:drop-shadow(0 0 38px #50cdda75)}.intro-mark img{width:100%;height:100%;object-fit:contain;animation:introLogoIn .75s ease-out both}
.intro.logo .intro-phrase{display:none}.intro.logo .intro-mark{display:grid}
.intro-fragments{position:absolute;inset:0;display:grid;grid-template-columns:repeat(20,1fr);grid-template-rows:repeat(7,1fr);opacity:0;pointer-events:none}
.intro-fragments i{background-image:url('assets/bonomi-studio-logo.svg');background-repeat:no-repeat;background-size:2000% 700%;display:block;min-width:0;min-height:0}
.intro.shatter .intro-mark img{opacity:0}.intro.shatter .intro-fragments{opacity:1}
.intro.shatter .intro-fragments i{animation:introShatter .9s ease-in both;animation-delay:var(--delay)}
.intro-progress{position:absolute;left:clamp(20px,4vw,70px);right:clamp(20px,4vw,70px);bottom:clamp(31px,5vh,56px);height:2px;background:#678e9640;overflow:hidden}
.intro-progress::before{content:"";display:block;width:100%;height:100%;background:#75dfe5;transform:scaleX(0);transform-origin:left;animation:introProgress 10.2s linear forwards;box-shadow:0 0 18px #60dde7}
#intro-skip,#intro-audio{position:absolute;bottom:clamp(46px,8vh,82px);border:0;background:transparent;color:#9fe6ea;font-size:12px;letter-spacing:.15em;font-weight:800;z-index:1}
#intro-skip{right:clamp(20px,4vw,70px)}#intro-audio{left:clamp(20px,4vw,70px)}#intro-audio[hidden]{display:none}
@keyframes introType{0%{opacity:0;transform:translate3d(0,65px,0) skewX(-9deg) scale(1.16);filter:blur(12px)}24%{opacity:1;filter:blur(0)}65%{opacity:1;transform:none}100%{opacity:0;transform:translate3d(0,-25px,0) scale(.96)}}
@keyframes introLogoIn{from{opacity:0;transform:scale(1.24);filter:blur(12px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes introShatter{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:0;transform:translate3d(var(--x),var(--y),0) rotate(var(--r)) scale(.25)}}
@keyframes introEther{to{transform:translate3d(6%,-4%,0) rotate(9deg)}}
@keyframes introProgress{to{transform:scaleX(1)}}
@media(max-width:700px){.intro-phrase{font-size:clamp(44px,13vw,80px);line-height:.96}.intro[data-beat="3"] .intro-phrase{font-size:clamp(43px,11vw,75px)}.intro-index{font-size:10px;max-width:75vw}.intro-mark{width:78vw}}
@media(prefers-reduced-motion:reduce){.intro-phrase span{animation-duration:.2s}.intro-progress::before{animation:none;transform:scaleX(1)}.intro.shatter .intro-fragments i{animation-duration:.2s}}
/* Kinetic opening: seven original Bonomi Studio chapters. */
.intro{background:#07090c;transition:opacity .7s,visibility .7s,background .2s;color:#f4f7f7}
.intro::before{opacity:.24}.intro-grid{opacity:0;transition:opacity .2s}
.intro-index,.intro-counter{z-index:5;font:700 clamp(9px,.8vw,12px)/1.4 'Arial Black',Arial,Helvetica,sans-serif;letter-spacing:.17em}
.intro-counter{position:absolute;right:clamp(20px,4vw,70px);top:clamp(20px,4vh,42px);text-align:right;color:#b6c9ce}
.intro-phrase{position:absolute;z-index:3;width:min(1240px,90vw);font-size:clamp(48px,9.4vw,160px);line-height:.88;text-align:center;filter:none}
.intro-phrase span{color:inherit!important;animation:kineticIn .85s cubic-bezier(.16,1,.3,1) both!important}
.intro-phrase span:nth-child(2){animation-delay:.08s!important}
.intro-orbit{position:absolute;inset:0;z-index:2;display:block;pointer-events:none}
.intro-orbit span{position:absolute;width:min(9vw,100px);height:min(5vw,56px);min-width:54px;min-height:32px;background:#09acd2;left:48%;top:44%;box-shadow:0 0 40px #07abd855;animation:orbitJump 2.8s cubic-bezier(.3,.05,.5,.9) both}
.intro-orbit i{position:absolute;left:40%;top:39%;width:19%;height:18%;border-top:2px dotted #bdd4dc72;border-radius:50%;transform:rotate(-19deg);opacity:.5}
.intro[data-phase]:not([data-phase="opening"]) .intro-orbit{display:none}
.intro[data-phase="statement"]{background:#04a0c5;color:#061318}
.intro[data-phase="statement"]::before{opacity:0}
.intro[data-phase="statement"] .intro-index,.intro[data-phase="statement"] .intro-counter{color:#06313b}
.intro[data-phase="statement"] .intro-phrase{text-align:left;left:7%;font-size:clamp(65px,10vw,177px);width:90%;letter-spacing:-.087em;text-shadow:3px 0 #c4f7ff55}
.intro[data-phase="statement"] .intro-phrase span:nth-child(2){color:#f5fdff!important}
.intro-dense{display:none;position:absolute;inset:-20%;overflow:hidden;transform:rotate(-7deg) scale(1.1);z-index:1}
.intro-dense span{display:block;white-space:nowrap;font:900 clamp(36px,5.5vw,100px)/1.12 'Arial Black',Arial,Helvetica,sans-serif;letter-spacing:-.075em;color:#121d23;animation:denseDrift 2.3s linear infinite alternate}
.intro-dense span:nth-child(even){color:transparent;-webkit-text-stroke:1.3px #303b42;transform:translateX(-15%);animation-direction:alternate-reverse}
.intro-dense span:nth-child(4n){color:#0b9cc3;-webkit-text-stroke:0}
.intro[data-phase="typography"]{background:#e9eff1;color:#0d1b21}
.intro[data-phase="typography"] .intro-dense{display:block}
.intro[data-phase="typography"] .intro-phrase{font-size:clamp(36px,6.5vw,112px);background:#ebf1f2eb;padding:.17em .3em;box-shadow:14px 14px 0 #049ac3}
.intro[data-phase="typography"] .intro-index,.intro[data-phase="typography"] .intro-counter{color:#233e47}
.intro[data-phase="grid"]{background:#090d11}.intro[data-phase="grid"] .intro-grid{opacity:1;background-image:radial-gradient(#bbd7db 1px,transparent 1px);background-size:18px 18px;mask-image:none}
.intro[data-phase="grid"] .intro-phrase{font-size:clamp(66px,12vw,195px)}
.intro[data-phase="grid"] .intro-phrase span:first-child{background:radial-gradient(circle,#20badb 42%,transparent 47%) 0 0/10px 10px;-webkit-background-clip:text;background-clip:text;color:transparent!important}
.intro[data-phase="grid"] .intro-phrase span:last-child{font-size:.25em;letter-spacing:.35em;margin-top:.75em;color:white!important}
.intro[data-phase="liquid"]{background:radial-gradient(ellipse at 68% 30%,#80d3d2 0,transparent 27%),radial-gradient(ellipse at 22% 74%,#077ba2 0,transparent 43%),radial-gradient(ellipse at 58% 70%,#564f85 0,transparent 43%),#1a2f42;color:#071319}
.intro[data-phase="liquid"]::before{opacity:1;background:radial-gradient(ellipse at 20% 20%,#c4fcf6a8,transparent 34%),radial-gradient(ellipse at 80% 80%,#0497c4dd,transparent 42%);filter:blur(50px);animation:introEther 2s linear infinite alternate}
.intro[data-phase="liquid"] .intro-phrase{text-align:left;left:8%;font-style:italic;text-shadow:10px 0 28px #f5ffff7d}
.intro-particles{display:none;position:absolute;inset:0;overflow:hidden;z-index:1}
.intro-particles i{position:absolute;left:50%;top:50%;width:2px;height:2px;background:#a4eaf4;border-radius:50%;box-shadow:0 0 10px #59d7ee;animation:particleBurst 1.6s var(--d) ease-out both}
.intro-particles i:nth-child(3n){width:3px;height:3px;background:white}.intro-particles i:nth-child(7n){background:#568799}
.intro[data-phase="particles"] .intro-particles{display:block}
.intro[data-phase="particles"] .intro-phrase{font-size:clamp(52px,8vw,140px);color:#f4ffff;text-shadow:0 0 30px #35bddd}
.intro[data-phase="impact"]{background:#e3e9ea;color:#056c89}
.intro[data-phase="impact"] .intro-phrase{font-size:clamp(75px,17vw,300px);width:100%;letter-spacing:-.09em;animation:impactShake .25s 2}
.intro[data-phase="impact"] .intro-index,.intro[data-phase="impact"] .intro-counter{color:#153b47}
.intro[data-phase="logo"]{background:radial-gradient(circle at 50% 50%,#1b333d,#080c10 66%)}
.intro[data-phase="logo"] .intro-phrase{display:none}
.intro[data-phase="logo"] .intro-mark{display:flex;flex-direction:column;gap:clamp(20px,4vh,44px);width:min(720px,78vw);aspect-ratio:auto;align-items:center;justify-content:center;filter:none;animation:kineticIn .9s ease-out both}
.intro-mark img{width:100%;height:auto;object-fit:contain;animation:none;filter:drop-shadow(0 0 18px #24b5d548)}
.intro-mark small{font:700 clamp(11px,1.2vw,18px)/1.2 'Arial Black',Arial,Helvetica,sans-serif;letter-spacing:.28em;color:#e7f2f3;text-align:center}
.intro-rule{position:absolute;left:-17vw;right:-17vw;top:31%;height:1px;background:linear-gradient(90deg,transparent,#07afd5 25%,transparent 43%,transparent 57%,#07afd5 75%,transparent);pointer-events:none}
.intro-fragments{top:0;bottom:auto;width:100%;aspect-ratio:8264.4/2564.5;opacity:0}
.intro-fragments i{background-image:url('assets/bonomi-studio-logo.svg');background-size:2000% 700%}
.intro.shatter .intro-mark img{visibility:hidden!important;opacity:0!important;animation:none!important}
.intro.shatter .intro-fragments{opacity:1}
.intro.shatter .intro-mark small,.intro.shatter .intro-rule{opacity:0;transition:opacity .12s}
.intro.shatter .intro-fragments i{animation:introShatter 1s ease-in both;animation-delay:var(--delay)}
.intro-progress::before{animation-duration:17.5s}
@keyframes orbitJump{0%{transform:translate(-8vw,12vh) scale(.55) rotate(-12deg);border-radius:3px}35%{transform:translate(1vw,-9vh) scale(1) rotate(22deg)}64%{transform:translate(4vw,3vh) scale(.88) rotate(-5deg)}85%{transform:translate(0,0) scale(1.2);border-radius:0}100%{transform:translate(0,0) scale(45,38);border-radius:0}}
@keyframes kineticIn{from{opacity:0;filter:blur(9px);transform:translate3d(0,55px,0) skewX(-8deg) scale(1.08)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes denseDrift{to{transform:translateX(-17%)}}
@keyframes particleBurst{from{opacity:0;transform:translate3d(20vw,0,0) scale(.2)}25%{opacity:1}to{opacity:0;transform:translate3d(var(--x),var(--y),0) scale(1.7)}}
@keyframes impactShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* The last two rooms assemble after the camera settles. */
.team-mode .person-card{opacity:0;transform:perspective(800px) translateY(70px) rotateX(-52deg) scale(.76);filter:blur(12px)}
.team-mode.stage-ready .person-card{animation:teamAssemble .82s cubic-bezier(.16,1,.3,1) both}
.team-mode.stage-ready .person-card:nth-child(2){animation-delay:.13s}.team-mode.stage-ready .person-card:nth-child(3){animation-delay:.26s}
.contact-mode #brand-center img,.contact-mode .frame-tools,.contact-mode .client-strip{opacity:0;transform:translateY(35px) scale(.85);filter:blur(12px)}
.contact-mode.stage-ready #brand-center img{animation:brandAssemble .95s cubic-bezier(.16,1,.3,1) both}
.contact-mode.stage-ready .frame-tools{animation:contactButton .65s .35s ease-out both}
.contact-mode.stage-ready .client-strip{animation:contactAssemble .7s .5s ease-out both}
@keyframes teamAssemble{0%{opacity:0;transform:perspective(800px) translateY(70px) rotateX(-52deg) scale(.76);filter:blur(12px);clip-path:inset(0 0 100% 0)}50%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;transform:none;filter:blur(0);clip-path:inset(0 0 0 0)}}
@keyframes brandAssemble{0%{opacity:0;transform:translateY(60px) rotateX(-25deg) scale(.6);filter:blur(16px);clip-path:inset(0 0 100% 0)}70%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;transform:none;filter:drop-shadow(0 0 15px #4dccdf53);clip-path:inset(0 0 0 0)}}
@keyframes contactAssemble{to{opacity:1;transform:none;filter:none}}
@media(max-width:700px){.intro-counter{font-size:8px;max-width:40vw}.intro[data-phase="statement"] .intro-phrase{font-size:clamp(48px,12vw,80px)}.intro[data-phase="grid"] .intro-phrase{font-size:clamp(65px,14vw,95px)}.intro[data-phase="impact"] .intro-phrase{font-size:20vw}.intro[data-phase="logo"] .intro-mark{width:84vw}.intro-mark small{font-size:10px;letter-spacing:.13em}.intro-rule{left:-7vw;right:-7vw}}
@media(prefers-reduced-motion:reduce){.intro-orbit span,.intro-dense span,.intro-particles i{animation-duration:.15s}.team-mode.stage-ready .person-card,.contact-mode.stage-ready #brand-center img,.contact-mode.stage-ready .frame-tools,.contact-mode.stage-ready .client-strip{animation-duration:.15s}}

@keyframes contactButton{to{opacity:1;filter:none}}

/* Crisp brand system: sans-serif typography and hard edges throughout. */
html,body{font-family:Arial,Helvetica,sans-serif}
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important;filter:none!important;backdrop-filter:none!important}
.intro::before{display:none}
.intro-orbit i{display:none}
.intro-orbit span,.intro-progress::before{animation-play-state:paused}
.intro.started .intro-orbit span,.intro.started .intro-progress::before{animation-play-state:running}
.loading{z-index:60;background:#090d11}
.loading-logo{width:80px;height:80px;animation:turn 1.7s linear infinite;transform-style:preserve-3d;backface-visibility:visible}
.loading{perspective:520px}
.intro[data-phase="liquid"] .intro-phrase{font-style:normal}
/* Contact: an accessible, draggable carousel of the supplied client marks. */
.client-strip,.contact-mode .client-strip{left:50%;bottom:8%;width:min(860px,calc(100vw - 120px));height:155px;transform:translateX(-50%);padding:0;background:none;pointer-events:auto;overflow:visible}
.client-strip h2{margin:0;text-align:center;color:#eef4f4;font:700 clamp(14px,1.25vw,18px)/1.1 'Arial Black',Arial,sans-serif;letter-spacing:.12em}
.client-carousel{position:relative;width:100%;height:105px;margin:2px auto 0;overflow:hidden;perspective:760px;touch-action:pan-y;cursor:grab;user-select:none;mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%)}
.client-carousel.dragging{cursor:grabbing}
.client-carousel:focus-visible{outline:1px solid #9ed6df;outline-offset:3px}
.client-logo{position:absolute;left:50%;top:52%;width:190px;height:95px;pointer-events:none;transform-style:preserve-3d;transition:opacity .13s linear;will-change:transform,opacity}
.client-logo img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:240px;height:240px;object-fit:contain;max-width:none;max-height:none;user-select:none}
.client-logo.portrait img{width:145px;height:145px}
.client-strip .client-logo img{filter:brightness(0) invert(.92)!important}
.client-strip small{display:block;margin:-3px 0 0;color:#8caeb6;text-align:center;font-size:10px;letter-spacing:.12em}
.contact-mode.stage-ready .client-strip{animation:clientStripEnter .7s .5s ease-out both}
@keyframes clientStripEnter{from{opacity:0;transform:translate(-50%,34px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:700px){.client-strip,.contact-mode .client-strip{bottom:12%;width:calc(100vw - 18px);height:135px}.client-strip h2{font-size:13px}.client-carousel{height:90px}.client-logo{width:150px;height:80px}.client-logo img{width:210px;height:210px}.client-logo.portrait img{width:125px;height:125px}.client-strip small{font-size:9px}}
/* Intro refinements: denser halftone, flat brand ground and unobstructed mark. */
.intro[data-phase="grid"] .intro-phrase{font-size:clamp(132px,24vw,390px);width:min(1600px,96vw)}
.intro[data-phase="grid"] .intro-phrase span:first-child{background-size:6px 6px;background-image:radial-gradient(circle,#20badb 43%,transparent 48%)}
.intro[data-phase="liquid"]{background:#111a20;color:#ecf4f5}
.intro[data-phase="liquid"] .intro-phrase{color:#ecf4f5}
.intro-rule{display:none!important}
@media(max-width:700px){.intro[data-phase="grid"] .intro-phrase{font-size:clamp(92px,25vw,190px);line-height:.9}}
/* Final face: logo, explanation, contact action and client dial each have a zone. */
.contact-mode .face-copy{top:clamp(72px,7dvh,94px)}
.contact-mode .face-copy p,.contact-mode .face-copy .service-line{display:none}
#brand-center,.contact-mode #brand-center{top:30%;width:min(575px,58vw)}
.contact-summary{display:none;position:absolute;z-index:9;left:50%;top:42%;transform:translateX(-50%);width:min(850px,82vw);grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,70px);pointer-events:none}
.contact-mode .contact-summary{display:grid}
.contact-summary p{margin:0;color:#e8eff0;font:400 clamp(15px,1.18vw,18px)/1.5 Arial,Helvetica,sans-serif;text-align:left}
.client-strip,.contact-mode .client-strip{bottom:7%;height:145px}
.client-strip h2{font:700 clamp(12px,1vw,15px)/1.2 'Arial Black',Arial,sans-serif;letter-spacing:.12em}
@media(max-width:700px){.contact-mode .face-copy{top:69px}.contact-mode .face-copy #face-title{font-size:clamp(24px,6.7vw,34px)}#brand-center,.contact-mode #brand-center{top:29%;width:min(82vw,410px)}.contact-summary{top:41%;width:calc(100vw - 40px);gap:16px}.contact-summary p{font-size:clamp(12px,3.1vw,14px);line-height:1.33}.client-strip,.contact-mode .client-strip{bottom:10%;height:132px}.client-strip h2{font-size:12px}}
@media(max-height:700px){.contact-summary{top:42%}.contact-summary p{font-size:12px;line-height:1.24}.client-strip,.contact-mode .client-strip{bottom:8%;height:120px}.client-carousel{height:78px}}
.client-strip .client-logo img{filter:brightness(0) invert(.66)!important}
.contact-mode .contact-summary{opacity:0}
.contact-mode.stage-ready .contact-summary{animation:contactSummaryIn .72s .2s cubic-bezier(.17,.74,.24,1) both}
@keyframes contactSummaryIn{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-height:800px) and (min-width:701px){#brand-center,.contact-mode #brand-center{top:28%;width:min(470px,50vw)}.contact-summary{top:43%;width:min(820px,84vw)}.contact-summary p{font-size:clamp(14px,1.1vw,16px);line-height:1.38}.client-strip,.contact-mode .client-strip{bottom:6%}}
/* Graphite black preserves the cyan and silver accents without a navy cast. */
html,body{background:#050607}
.vignette{background:radial-gradient(ellipse at center,transparent 41%,#010203b8 100%),linear-gradient(#040506c9,transparent 21% 78%,#040506d9)}
.topbar{background:linear-gradient(#050607ed,transparent)}
/* Final face follows the supplied hierarchy: mark, invitation, explanation, action, clients. */
.contact-mode .face-copy{top:37%;width:min(760px,78vw);max-width:none}
.contact-mode .face-copy .eyebrow{display:none}
.contact-mode .face-copy #face-title{font-size:clamp(37px,3.1vw,52px);line-height:1.02;margin:0 auto;max-width:720px}
#brand-center,.contact-mode #brand-center{top:25%;width:min(590px,58vw)}
.contact-summary,.contact-mode .contact-summary{top:49%;width:min(760px,80vw);gap:clamp(34px,5vw,92px)}
.contact-summary p{font-size:clamp(15px,1vw,17px);line-height:1.5}
.client-strip,.contact-mode .client-strip{bottom:5%;height:205px;width:min(980px,calc(100vw - 120px))}
.client-strip h2{font-size:13px;letter-spacing:.17em}
.client-carousel{height:130px;margin:12px auto 0}
.client-strip .client-logo img{filter:brightness(0) invert(.68)!important;opacity:.87}
@media(max-height:800px) and (min-width:701px){
  .contact-mode .face-copy{top:35%}.contact-mode .face-copy #face-title{font-size:clamp(31px,2.8vw,41px)}
  #brand-center,.contact-mode #brand-center{top:24%;width:min(470px,50vw)}
  .contact-summary,.contact-mode .contact-summary{top:47%}.contact-summary p{font-size:14px;line-height:1.4}
  .client-strip,.contact-mode .client-strip{bottom:4%;height:170px}.client-carousel{height:105px}
}
@media(max-width:700px){
  .contact-mode .face-copy{top:33%;width:calc(100vw - 32px);max-height:none;overflow:visible}
  .contact-mode .face-copy #face-title{font-size:clamp(26px,7.3vw,37px);line-height:1.06}
  #brand-center,.contact-mode #brand-center{top:23%;width:min(82vw,410px)}
  .contact-summary,.contact-mode .contact-summary{top:44%;width:calc(100vw - 32px);gap:16px}
  .contact-summary p{font-size:clamp(12px,3.3vw,15px);line-height:1.34}
  .client-strip,.contact-mode .client-strip{bottom:9%;height:120px;width:calc(100vw - 18px)}
  .client-carousel{height:80px;margin:7px auto 0}.client-strip h2{font-size:12px}
}
/* Video stays inside the clear space between the service copy and project explanation. */
.preview-host{border:0!important;background:transparent;aspect-ratio:16/9}
.preview-host iframe{aspect-ratio:16/9}

/* Atlas v26: stable media stage, clear call to action, and an accessible direct inquiry. */
.preview-host{z-index:1;background:#11191d center / cover no-repeat;box-shadow:none;border:0;isolation:isolate}
#screen-hit{z-index:1}
.preview-host iframe{position:relative;z-index:1}
.quote-status{min-height:1.5em;color:#a7e9ec;font-size:14px;line-height:1.4}
.services-mode .services-panel,.quote-mode .quote-panel{visibility:hidden}
.services-mode.stage-ready .services-panel,.quote-mode.stage-ready .quote-panel{visibility:visible}
.atlas-panel{transform-origin:center center}
.quote-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
#generic-inquiry{justify-self:center;background:#81e7eb;color:#061519;border:1px solid #c5f8f9;font-size:12px;font-weight:800;letter-spacing:.075em;padding:12px 20px;white-space:nowrap;box-shadow:0 4px 18px #0008}
#generic-inquiry:hover,#generic-inquiry:focus-visible{background:#c7f8f9}
#quote-back{justify-self:end}
.contact-panel{display:none;position:absolute;z-index:18;left:50%;top:50%;transform:translate(-50%,-50%);width:min(570px,calc(100vw - 32px));max-height:calc(100dvh - 145px);overflow:auto;padding:clamp(22px,3vw,36px);background:#111a1eff;border:1px solid #91d7db;box-shadow:0 24px 80px #000d;color:#f3f9f9;pointer-events:auto}
.contact-mode.stage-ready .contact-panel.open{display:block;animation:contactFormIn .55s ease-out both}
@keyframes contactFormIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.contact-panel h2{font:800 clamp(24px,2.8vw,38px)/1.13 'Arial Black',Arial,Helvetica,sans-serif;letter-spacing:-.035em;margin:12px 36px 8px 0}
.contact-panel p{font-size:15px;line-height:1.45;color:#cedfe1;margin:0 0 18px}
.contact-close{position:absolute;right:17px;top:14px;width:36px;height:36px;color:#ecf7f8;background:#1c292d;border:1px solid #8fb7bc;font-size:25px;line-height:1}
.contact-panel label{display:block;font-size:13px;font-weight:700;margin:12px 0}
.contact-panel input:not([type=checkbox]),.contact-panel textarea{display:block;width:100%;margin-top:6px;min-height:44px;background:#0b1215;border:1px solid #87aeb3;color:white;font:16px/1.35 Arial,Helvetica,sans-serif;padding:10px 12px;resize:vertical}
.contact-panel textarea{min-height:100px}
.contact-panel form>button{width:100%;padding:13px 18px;background:#83e4e9;border:0;color:#071417;font-size:13px;font-weight:800;letter-spacing:.09em}
.contact-panel form>button:disabled{opacity:.55;cursor:wait}
.contact-panel #contact-status{min-height:1.3em;margin:10px 0 0;color:#a5e8ea}
.form-honeypot{position:absolute!important;left:-9999px;opacity:0;pointer-events:none}
.site-copyright{display:none;position:absolute;z-index:12;left:50%;bottom:3px;transform:translateX(-50%);width:max-content;max-width:94vw;color:#a7bdc2;font-size:10px;letter-spacing:.03em;text-align:center;pointer-events:none}
.contact-mode .site-copyright{display:block}
@media(max-width:700px){
 .topbar{height:60px}.brand{width:100px}#sound-toggle{font-size:10px;padding:8px}
 .services-mode .face-copy,.quote-mode .face-copy{top:64px;max-height:none;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
 .services-mode .face-copy #face-title,.quote-mode .face-copy #face-title{font-size:clamp(22px,6vw,30px);margin:5px 0}
 .services-mode .face-copy p,.quote-mode .face-copy p{font-size:13px;line-height:1.22}
 .atlas-panel{top:clamp(168px,25dvh,225px);bottom:96px;width:calc(100vw - 18px)}
 .service-choices{min-height:67px;max-height:67px}.service-choice{min-height:54px}
 .service-detail{padding:15px 17px}.service-detail h2{font-size:clamp(21px,6vw,27px)}.service-detail p{font-size:15px;line-height:1.38}
 .quote-bottom{grid-template-columns:1fr auto;gap:8px;padding:9px 12px}.quote-bottom>div{grid-column:1/-1;min-width:0}.quote-bottom p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#generic-inquiry{grid-column:1;grid-row:2;padding:9px 10px;font-size:10px}#quote-back{grid-column:2;grid-row:2}
 .quote-panel #quote-content{padding:13px 15px}.quote-options{gap:6px}.quote-option{min-height:46px;padding:8px 11px}
 .contact-panel{top:47%;max-height:calc(100dvh - 124px);padding:20px}.contact-panel h2{font-size:25px}.contact-panel p{font-size:13px;margin-bottom:10px}.contact-panel label{margin:9px 0}.contact-panel textarea{min-height:75px}
 .site-copyright{bottom:2px;font-size:8px}
}
@media(max-width:700px) and (max-height:680px){.services-mode .face-copy p,.quote-mode .face-copy p{display:none}.atlas-panel{top:132px;bottom:81px}.contact-panel{max-height:calc(100dvh - 110px)}}
@media(prefers-reduced-motion:reduce){.contact-mode.stage-ready .contact-panel.open{animation:none;opacity:1;transform:translate(-50%,-50%)}}
/* A useful reading path when WebGL is unavailable. */
.fallback{inset:0;z-index:25;overflow:auto;padding:clamp(26px,5vw,75px);background:#0b1013;color:#edf6f6}
.fallback[hidden]{display:none}
.fallback h2{font:800 clamp(27px,4vw,54px)/1.06 'Arial Black',Arial,Helvetica,sans-serif;max-width:800px;letter-spacing:-.04em;margin:18px 0 12px}
.fallback>p{font-size:clamp(16px,1.5vw,20px);line-height:1.45;color:#bdd0d3;max-width:720px}
.fallback-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:28px 0}
.fallback-grid a{display:flex;flex-direction:column;min-width:0;padding:0 0 18px;border:1px solid #789fa5;background:#172126;color:#e9f5f5;text-decoration:none;overflow:hidden}
.fallback-grid img{width:100%;height:clamp(100px,13vw,190px);object-fit:cover;display:block}
.fallback-grid strong{font:800 18px/1.2 'Arial Black',Arial,Helvetica,sans-serif;margin:18px 16px 8px}
.fallback-grid span{font-size:15px;line-height:1.4;margin:0 16px;color:#d6e9eb}
.fallback-contact{display:inline-block;padding:15px 22px;background:#85e3e7;color:#091518!important;font-size:13px;font-weight:800;letter-spacing:.08em;text-decoration:none}
@media(max-width:800px){.fallback-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.fallback{padding:25px 17px}.fallback-grid{gap:9px}.fallback-grid img{height:110px}.fallback-grid strong{font-size:14px;margin:11px 10px 6px}.fallback-grid span{font-size:12px;margin:0 10px}}
/* Narrow screens: one scrollable story, with the 3D world kept behind it. */
#mobile-media-slot,#mobile-contact{display:none}
@media(max-width:1024px), (pointer:coarse) and (max-width:1366px){
 html,body{overscroll-behavior:none}
 .topbar{height:64px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));gap:12px;background:#070b0de8}
 .brand{width:clamp(104px,22vw,140px)}.topnote{display:none}
 #experience{position:fixed;inset:64px 0 calc(70px + env(safe-area-inset-bottom));z-index:2;display:flex;flex-direction:column;align-items:center;gap:0;overflow-x:hidden;overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;touch-action:auto;scrollbar-color:#477179 transparent;pointer-events:auto;padding:0 max(16px,env(safe-area-inset-right)) 30px max(16px,env(safe-area-inset-left))}
 .face-copy,.centered-face .face-copy,.services-mode .face-copy,.quote-mode .face-copy,.contact-mode .face-copy{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;order:1;width:min(100%,760px);max-width:none;max-height:none;overflow:visible;margin:0;padding:24px 0 18px;transform:none;text-align:left;background:none;border:0;box-shadow:none;backdrop-filter:none;text-shadow:0 2px 9px #000}
 .face-copy.changing{opacity:0;transform:translateY(-10px)}
 .face-copy #face-title,.centered-face .face-copy #face-title,.contact-mode .face-copy #face-title{font-size:clamp(28px,5.4vw,49px);line-height:1.08;margin:10px 0 12px}
 .face-copy p,.services-mode .face-copy p,.quote-mode .face-copy p{display:block;font-size:clamp(15px,2.1vw,18px);line-height:1.45}
 .service-line{font-size:11px;line-height:1.4;letter-spacing:.07em;margin-top:12px}
 .project-tabs{display:flex;justify-content:flex-start;gap:8px;margin-top:18px}
 .project-tabs button{font-size:12px;padding:9px 11px;min-height:40px}
 #mobile-media-slot{display:block;position:relative;order:2;flex:none;width:min(100%,760px);aspect-ratio:16/9;margin:12px auto 22px;background:transparent;border:0}
 .media-video #mobile-media-slot{background:transparent}
 .media-model #mobile-media-slot{aspect-ratio:4/3;max-height:470px;background:transparent;border:0}
 .team-mode #mobile-media-slot,.services-mode #mobile-media-slot,.quote-mode #mobile-media-slot,.contact-mode #mobile-media-slot{display:none}
 .project-story,.heritage-mode .project-story{position:relative;order:3;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:min(100%,760px);max-height:none;overflow:visible;margin:0 auto 24px;padding:0;transform:translateY(18px);text-align:left}
 .project-story.is-visible{transform:none}
 .story-content{display:block;opacity:1}.story-heading{margin-bottom:15px}.project-story h2{font-size:clamp(23px,3vw,30px)}
 .project-story p{font-size:clamp(16px,2vw,19px);line-height:1.5;column-count:1;text-align:left}
 .story-footer{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:10px 18px;margin-top:20px;font-size:12px}
 .story-tiles{position:absolute;inset:0;min-height:0}
 .frame-tools,.contact-mode .frame-tools{position:relative;order:4;inset:auto;left:auto;right:auto;top:auto;bottom:auto;transform:none;justify-content:center;width:min(100%,760px);margin:0 auto 22px}
 .frame-tools>span{display:none}
 .face-nav,.navigate-hint{display:none}
 .controls{position:fixed;z-index:18;left:0;right:0;bottom:0;top:auto;display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:12px;width:100%;padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#080d10f5;border-top:1px solid #75b8bd59;transform:none;pointer-events:auto}
 .controls button{width:56px;height:46px;font-size:24px;background:#17272c;border:1px solid #8ebdc06b}
 .controls #mobile-contact{display:block;width:100%;font-size:12px;font-weight:800;letter-spacing:.14em;color:#071417;background:#83e4e9;border-color:#a2eff1}
 #step-label{display:none}
 #model-hit,.heritage-mode #model-hit{position:fixed;z-index:6;inset:auto;width:auto;height:auto;touch-action:none}
 #screen-hit{position:fixed;z-index:6}
 .team-grid,.team-mode .team-grid{position:relative;order:2;inset:auto;left:auto;top:auto;bottom:auto;width:min(100%,760px);display:none;transform:none;overflow:visible;padding:0;gap:16px;margin:6px auto 25px;scroll-snap-type:none}
 .team-mode .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
 .person-card{min-width:0;width:auto;flex:none}.person-photo{height:200px;min-height:0}.person-bio{min-height:0}
 .atlas-panel,.services-mode .services-panel,.quote-mode .quote-panel{position:relative;order:2;inset:auto;left:auto;top:auto;bottom:auto;width:min(100%,760px);height:auto;min-height:0;max-height:none;overflow:visible;transform:none;margin:4px auto 28px;backdrop-filter:blur(10px)}
 .services-mode .services-panel,.quote-mode .quote-panel{display:block}
 .services-mode.stage-ready .services-panel,.quote-mode.stage-ready .quote-panel{animation:mobilePanelIn .7s cubic-bezier(.18,.75,.25,1) both}
 @keyframes mobilePanelIn{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
 .services-layout{display:block;min-height:0}
 .service-choices{display:flex;flex:none;overflow-x:auto;overflow-y:hidden;min-height:78px;max-height:78px;border-right:0;border-bottom:1px solid #83adb14a;scroll-snap-type:x mandatory}
 .service-choice{flex:0 0 min(255px,72vw);min-height:58px;scroll-snap-align:center}
 .service-detail{display:block;min-height:0;height:auto;max-height:none;overflow:visible;padding:24px}
 .quote-panel #quote-content{display:block;min-height:0;height:auto;overflow:visible;padding:20px clamp(16px,4vw,32px)}
 .quote-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
 .quote-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px 18px}
 .quote-bottom>div{grid-column:1/-1}.quote-bottom p{white-space:normal;overflow:visible}
 #generic-inquiry{grid-column:1;grid-row:2;justify-self:start;font-size:11px}#quote-back{grid-column:2;grid-row:2}
 #brand-center,.contact-mode #brand-center{position:relative;order:2;display:none;inset:auto;left:auto;top:auto;bottom:auto;width:min(75%,450px);transform:none;margin:0 auto 10px}
 .contact-mode #brand-center{display:block}
 .contact-summary,.contact-mode .contact-summary{position:relative;order:4;display:none;inset:auto;left:auto;top:auto;bottom:auto;width:min(100%,760px);transform:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;margin:10px auto 26px}
 .contact-mode .contact-summary{display:grid}
 .contact-summary p{font-size:clamp(15px,2vw,18px);line-height:1.45}
 .contact-mode .frame-tools{order:3;display:flex;opacity:1;filter:none;animation:none;margin:8px auto 12px}
 .client-strip,.contact-mode .client-strip{position:relative;order:5;inset:auto;left:auto;top:auto;bottom:auto;width:min(100%,760px);height:180px;transform:none;margin:0 auto 25px;opacity:1;filter:none;animation:none}
 .client-carousel{height:125px}.client-strip small{display:block}
 .contact-panel,.contact-mode.stage-ready .contact-panel.open{position:relative;order:6;inset:auto;left:auto;top:auto;bottom:auto;width:min(100%,570px);max-height:none;overflow:visible;transform:none;margin:10px auto 26px;animation:none}
 .contact-panel:not(.open){display:none}
 .site-copyright,.contact-mode .site-copyright{position:relative;order:7;inset:auto;left:auto;bottom:auto;display:none;transform:none;width:min(100%,760px);max-width:none;margin:0 auto;color:#a7bdc2;font-size:10px;line-height:1.4}
 .contact-mode .site-copyright{display:block}
 .contact-mode.stage-ready .frame-tools,.contact-mode.stage-ready .contact-summary,.contact-mode.stage-ready .client-strip{animation:mobilePanelIn .7s ease-out both}
}
@media(max-width:600px){
 #experience{padding-left:16px;padding-right:16px}
 .face-copy,.centered-face .face-copy,.services-mode .face-copy,.quote-mode .face-copy,.contact-mode .face-copy{padding-top:18px}
 .face-copy #face-title,.centered-face .face-copy #face-title,.contact-mode .face-copy #face-title{font-size:clamp(27px,8vw,38px)}
 .project-tabs button{font-size:11px;padding:8px 9px;min-height:36px}
 .media-model #mobile-media-slot{max-height:none}
 .team-mode .team-grid{grid-template-columns:1fr}.person-photo{height:220px}
 .panel-topline{padding:14px 16px}.service-detail{padding:20px}
 .client-strip,.contact-mode .client-strip{height:155px}.client-carousel{height:105px}
}

/* Atlas mobile layout v38: native flow, independent navigation and non-overlapping marks. */
#mobile-services,#mobile-dock,#mobile-dock-trigger{display:none}
@media(max-width:1024px), (pointer:coarse) and (max-width:1366px){
 #experience{bottom:calc(82px + var(--atlas-visual-bottom,0px) + env(safe-area-inset-bottom));padding-bottom:28px}
 .controls{display:none!important}
 #mobile-dock{position:fixed;left:0;right:0;bottom:calc(var(--atlas-visual-bottom,0px) + env(safe-area-inset-bottom));z-index:40;display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,1.18fr) minmax(0,1fr);gap:8px;align-items:center;padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));background:#080d10f7;border-top:1px solid #86e6ecc2;box-shadow:0 -2px 13px #55d4dc4a,0 -16px 35px #0009;pointer-events:auto;transition:transform .35s ease,opacity .35s ease}
 #mobile-dock button{min-width:0;min-height:50px;padding:7px 5px;border:1px solid #9bbfc486;background:#17262c;color:#f4fafa;font-size:18px;font-weight:800;white-space:nowrap}
 #mobile-dock button span{font-size:clamp(10px,1.6vw,13px);letter-spacing:.09em}
 #mobile-dock #mobile-quote{font-size:12px;letter-spacing:.12em;background:#86e2e8;color:#07151a;border-color:#b9f1f3}
 #mobile-dock button:disabled{opacity:.45}
 #mobile-dock-trigger{display:block;position:fixed;left:50%;bottom:calc(var(--atlas-visual-bottom,0px) + env(safe-area-inset-bottom));z-index:40;transform:translate(-50%,110%);min-width:155px;height:32px;padding:6px 14px;border:1px solid #8cdbdf;border-bottom:0;background:#101c20;color:#e9f9f9;box-shadow:0 -2px 12px #5bcbd455;font-size:11px;font-weight:800;letter-spacing:.12em;pointer-events:auto;transition:transform .35s ease}
 .dock-collapsed #mobile-dock{transform:translateY(110%);opacity:0;pointer-events:none}
 .dock-collapsed #mobile-dock-trigger{transform:translate(-50%,0)}
 .intro-active #mobile-dock,.intro-active #mobile-dock-trigger{visibility:hidden}
 .services-mode .services-panel{display:none!important}
 #mobile-services{position:relative;order:2;width:min(100%,760px);margin:5px auto 26px;pointer-events:auto}
 .services-mode.stage-ready #mobile-services{display:block;animation:mobilePanelIn .6s ease-out both}
 .mobile-service{width:100%;margin:0 0 9px;border:1px solid #7aaeb480;background:#10181ce8;color:#f0f8f8}
 .mobile-service summary{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;align-items:center;gap:10px;list-style:none;min-height:63px;padding:12px 16px;font-size:clamp(15px,2vw,18px);font-weight:700;line-height:1.3;cursor:pointer}
 .mobile-service summary::-webkit-details-marker{display:none}
 .mobile-service summary:focus-visible{outline:2px solid #95e9ee;outline-offset:2px}
 .mobile-service-number,.mobile-service-icon{color:#81dce3;font-size:14px;font-weight:800}
 .mobile-service-icon{text-align:right;font-size:22px;line-height:1}
 .mobile-service[open]{border-color:#8ce4e9;background:#14242a}
 .mobile-service[open] .mobile-service-icon{transform:rotate(45deg)}
 .mobile-service-content{padding:1px 18px 17px 58px;border-top:1px solid #84b9bd45;overflow-wrap:anywhere}
 .mobile-service-content p{font-size:16px;line-height:1.5;color:#e4eff0;margin:14px 0 0}
 .mobile-service-content .mobile-service-lead{font-weight:700;color:#fff}
 .mobile-service-content h3{font-size:12px;letter-spacing:.12em;color:#8ce1e7;margin:19px 0 0}
 .quote-mode .quote-panel{display:block!important;width:min(100%,760px)!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;transform:none!important}
 .quote-mode.stage-ready .quote-panel{animation:mobilePanelIn .6s ease-out both!important;opacity:1!important;visibility:visible!important}
 .quote-panel .panel-topline,.quote-panel #quote-content,.quote-panel .quote-bottom{position:relative;width:100%;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;background:#111b20f2;border:1px solid #86b6bb78}
 .quote-panel .panel-topline{border-bottom:0;padding:16px 18px}
 .quote-panel .quote-progress{margin:0;background:#2b3b40}
 .quote-panel #quote-content{display:block!important;flex:none!important;padding:22px clamp(17px,4vw,30px)!important;overflow-wrap:anywhere}
 .quote-panel #quote-content .quote-options{grid-template-columns:1fr}
 .quote-panel .quote-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:18px;margin-top:10px}
 .quote-panel .quote-bottom>div{min-width:0}
 .client-carousel{height:125px;mask-image:none}
 .client-logo{width:170px;height:105px}
 .client-logo img{width:180px;height:140px}
 .client-logo.portrait img{width:130px;height:110px}
}
@media(max-width:600px){
 #mobile-dock{gap:5px;padding-left:10px;padding-right:10px}
 #mobile-dock button{min-height:48px}
 #mobile-dock button span{font-size:10px}
 .mobile-service-content{padding-left:18px}
 .quote-panel .quote-bottom{grid-template-columns:1fr 1fr}
 .quote-panel #generic-inquiry{grid-column:1;min-width:0}
 .quote-panel #quote-back{grid-column:2;min-width:0}
 .client-carousel{height:124px}
 .client-logo{width:min(78vw,260px);height:110px}
 .client-logo img{width:min(64vw,230px);height:115px}
 .client-logo.portrait img{width:min(50vw,160px);height:105px}
}

/* Team portraits and direct contact, shared by desktop and compact layouts. */
.person-photo{overflow:hidden;padding:0}
.person-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.person-specialty{display:block;margin:9px auto 0;color:#d9edf0;font-size:clamp(12px,1vw,14px);font-weight:700;line-height:1.35}
.person-bio{font-size:clamp(13px,1.05vw,15px);line-height:1.46;color:#d1e1e4;margin:11px 0 0}
.team-grid{top:31%}
.person-photo{height:clamp(150px,21dvh,215px)}
.contact-direct{display:flex;flex-wrap:wrap;gap:9px 17px;margin:8px 0 21px}
.contact-direct a{color:#a2e8ec;font-size:14px;font-weight:700;text-decoration:none;border-bottom:1px solid #79c8cd79;padding-bottom:3px}
.contact-direct a:hover,.contact-direct a:focus-visible{color:#fff;border-color:#fff}
.fallback{overflow:auto}
.fallback-contact{border:0;cursor:pointer}
.fallback-form{max-width:560px;margin:18px 0 0;padding:20px;background:#111b20;border:1px solid #91d7db}
.fallback-form[hidden]{display:none}
.fallback-form label{display:block;margin:0 0 13px;font-size:14px;font-weight:700}
.fallback-form input:not([type=checkbox]),.fallback-form textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;background:#091418;border:1px solid #88b9be;color:#fff;font:16px/1.4 Arial,Helvetica,sans-serif}
.fallback-form button{border:0;padding:13px 20px;background:#85e3e7;color:#091518;font-size:13px;font-weight:800}
@media(max-width:1024px), (pointer:coarse) and (max-width:1366px){
 .team-grid{top:auto}
 .person-photo{height:clamp(190px,35vw,280px)}
 .person-specialty{font-size:14px}
 .person-bio{font-size:15px}
}
@media(max-width:600px){.person-photo{height:clamp(220px,65vw,340px)}.contact-direct{flex-direction:column;align-items:flex-start}}

/* Complete team portraits: grayscale until hover, focus or tap. */
.team-grid{width:min(1160px,calc(100vw - 72px))}
.person-photo{display:block;width:100%;height:clamp(240px,37dvh,340px);appearance:none;cursor:pointer;background:#0c1318;border:1px solid #6edce42c}
.person-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:grayscale(1);transition:filter .35s ease}
.person-photo.is-color img,.person-photo:focus-visible img{filter:grayscale(0)}
@media(hover:hover){.person-photo:hover img{filter:grayscale(0)}}
.person-photo:focus-visible{outline:2px solid #9ce9ec;outline-offset:3px}
@media(max-width:1024px), (pointer:coarse) and (max-width:1366px){
 .team-grid,.team-mode .team-grid{width:min(100%,760px)}
 .person-photo{height:clamp(280px,45vw,420px)}
}
@media(max-width:600px){.person-photo{height:min(112vw,460px)}}

/* Team card proportions and photo color state. The presentation reset above uses !important. */
.team-grid{width:min(900px,calc(100vw - 48px));gap:20px}
.person-card{padding:0 0 18px}
.person-photo{display:block;width:100%;height:auto;aspect-ratio:1122/1402;border:0}
.person-photo img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1)!important}
.person-photo.is-color img,.person-photo:focus-visible img{filter:grayscale(0)!important}
@media(hover:hover){.person-photo:hover img{filter:grayscale(0)!important}}
.person-card h2{padding:0 10px;margin-top:15px}
.person-card strong,.person-card .person-specialty{padding:0 12px}
.person-card .person-bio{text-align:justify;text-justify:inter-word;hyphens:auto;padding:0 15px}
@media(max-width:1024px), (pointer:coarse) and (max-width:1366px){
 .team-grid,.team-mode .team-grid{width:min(100%,760px)}
 .person-photo{height:auto;aspect-ratio:1122/1402}
}
@media(max-width:600px){.person-photo{height:auto;aspect-ratio:1122/1402}}

/* v42: keep the work itself dominant when browser UI scaling reduces usable height. */
.brand{appearance:none;border:0;background:none;padding:0;text-align:left;cursor:pointer}
#brand-center{appearance:none;border:0;background:none;padding:0;cursor:pointer}
.contact-mode #brand-center{pointer-events:auto}
#brand-center:hover img,#brand-center:focus-visible img{opacity:.82}
.videoart-mode .project-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#7bdce2 transparent;padding:2px 0 7px}
.videoart-mode .project-tabs button{flex:none;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.videoart-mode .face-copy{text-align:center}
.videoart-mode .face-copy p{max-width:750px;margin-inline:auto}
.navigate-hint{display:none}
@media (min-width:1025px) and (max-height:1100px){
 .face-copy,.centered-face .face-copy{top:clamp(52px,6dvh,76px)}
 .face-copy #face-title,.centered-face .face-copy #face-title{font-size:clamp(29px,3.7dvh,42px);margin:6px 0 8px}
 .face-copy p,.centered-face .face-copy p{font-size:clamp(12px,1.5dvh,15px);line-height:1.33}
 .service-line{font-size:10px;line-height:1.35;margin-top:5px}
 .project-tabs{margin-top:7px;gap:5px}
 .project-tabs button{font-size:10px;min-height:29px;padding:5px 8px}
 .project-story,.heritage-mode .project-story{bottom:clamp(79px,9dvh,96px);max-height:19dvh}
 .project-story h2{font-size:clamp(17px,2.2dvh,22px);margin:4px 0 0}
 .project-story p{font-size:clamp(12px,1.55dvh,15px);line-height:1.36}
 .story-footer{font-size:10px;margin-top:7px}
 .team-grid,.team-mode .team-grid{top:clamp(240px,27dvh,340px);width:min(900px,calc(90dvh),calc(100vw - 72px));gap:16px}
 .person-card h2{font-size:clamp(15px,1.75dvh,19px);margin-top:10px}
 .person-card strong{font-size:10px;margin-top:2px}
 .person-card .person-specialty{font-size:clamp(10px,1.3dvh,13px);line-height:1.28;min-height:2.56em;display:block;margin-top:7px}
 .person-card .person-bio{font-size:clamp(11px,1.33dvh,13px);line-height:1.37;margin-top:7px;text-align:left;hyphens:none}
}
@media (min-width:1025px) and (max-height:760px){
 .team-grid,.team-mode .team-grid{top:30dvh;width:min(680px,90dvh,calc(100vw - 60px));gap:10px}
 .person-card .person-bio{font-size:11px;line-height:1.3}
 .person-card .person-specialty{font-size:10px}
 .project-story,.heritage-mode .project-story{max-height:22dvh}
}
@media(max-width:1024px), (pointer:coarse) and (max-width:1366px){
 .videoart-mode .project-tabs{justify-content:flex-start}
 .videoart-mode .project-tabs button{max-width:200px}
 #brand-center,.contact-mode #brand-center{align-self:center}
}


/* v43 — a compact depth carousel uses the same camera rectangle in every video face. */
@media(min-width:1025px) and (pointer:fine){
 .media-carousel-mode .project-tabs{display:none}
 .project-tabs:has(button:only-child){display:none}
 #media-carousel{position:fixed;inset:0;z-index:2;pointer-events:none}
 .media-carousel-mode.stage-ready #media-carousel .carousel-card{visibility:visible;opacity:1}
 .carousel-card{position:fixed;appearance:none;visibility:hidden;opacity:0;overflow:hidden;padding:0;border:1px solid #9bb6bb7d;background:#10171b;box-shadow:0 18px 50px #000b;color:#f1fbfc;text-align:left;pointer-events:auto;transition:left .55s cubic-bezier(.2,.7,.2,1),top .55s,width .55s,height .55s,opacity .35s,filter .3s,transform .3s;transform:perspective(900px) rotateY(13deg) scale(.94)}
 .carousel-card.right{transform:perspective(900px) rotateY(-13deg) scale(.94)}
 .carousel-card img{display:block;width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.47) saturate(.75);transform:scale(1.06);transition:filter .3s,transform .3s}
 .carousel-card:hover img,.carousel-card:focus-visible img{filter:blur(1px) brightness(.7) saturate(.9);transform:scale(1.03)}
 .carousel-card:hover,.carousel-card:focus-visible{border-color:#8de6eb;filter:brightness(1.1)}
 .carousel-name{position:absolute;left:12px;right:35px;bottom:10px;font-size:clamp(11px,.95vw,14px);line-height:1.25;font-weight:800;text-shadow:0 2px 12px #000,0 0 7px #000}
 .carousel-arrow{position:absolute;right:12px;bottom:9px;font-size:22px;line-height:1;color:#a3e9ec}
}
.videoart-mode .project-tabs{scrollbar-width:none}
.videoart-mode .project-tabs::-webkit-scrollbar{display:none}
#media-carousel{display:none}
@media(min-width:1025px) and (pointer:fine){.media-carousel-mode #media-carousel{display:block}}
/* The project title occupies the narrow column; all prose forms one justified column. */
.story-content{grid-template-columns:minmax(340px,42%) minmax(0,1fr);column-gap:clamp(20px,2.5vw,42px)}
.project-story p{column-count:1;column-gap:0;text-align:justify;text-justify:inter-word;hyphens:auto}
.story-footer{grid-column:2}
.project-story h2{font-size:clamp(18px,1.28vw,25px);line-height:1.17;overflow-wrap:normal;hyphens:none}
@media(max-width:1024px), (pointer:coarse) and (max-width:1366px){
 .story-content{display:block}.project-story p{text-align:justify;hyphens:auto}
 .story-footer{grid-column:auto}
}
/* Contact dialog is legible against the same dimmed, blurred scene. */
#contact-backdrop{display:none}
@media(min-width:1025px){
 #contact-backdrop{display:block;position:fixed;inset:0;z-index:17;opacity:0;visibility:hidden;pointer-events:none;background:#010508ac;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);transition:opacity .28s,visibility .28s}
 #experience:has(.contact-panel.open) #contact-backdrop{opacity:1;visibility:visible;pointer-events:auto}
}
.video-modal{padding:48px 3vw}
.video-modal iframe{width:min(94vw,1800px,calc(177.78dvh - 178px));max-height:calc(100dvh - 100px);aspect-ratio:16/9}
.video-modal.portrait iframe{width:min(540px,90vw,calc(56.25dvh - 45px));height:min(86dvh,960px);aspect-ratio:9/16}
/* Large landscape cards recede behind the active screen, with a soft edge fade. */
@media(min-width:1025px) and (pointer:fine){
 .media-carousel-mode.stage-ready #media-carousel .carousel-card.left,
 .media-carousel-mode.stage-ready #media-carousel .carousel-card.right{visibility:visible;opacity:1}
.media-carousel-mode #media-carousel .carousel-card.center,
 .media-carousel-mode #media-carousel .carousel-card.hidden{visibility:hidden;opacity:0;pointer-events:none}
 .carousel-card{border:0;box-shadow:0 22px 60px #000b;transition:left 1.1s cubic-bezier(.45,0,.2,1),top 1.1s cubic-bezier(.45,0,.2,1),width 1.1s cubic-bezier(.45,0,.2,1),height 1.1s cubic-bezier(.45,0,.2,1),clip-path 1.1s cubic-bezier(.45,0,.2,1),opacity .9s ease,filter .9s ease,transform 1.1s cubic-bezier(.45,0,.2,1),border-color .9s ease;transform:perspective(1300px) rotateY(17deg) scale(.98)}
 .carousel-card[data-kind="video"]{border:2px solid #859397}
 .carousel-card[data-kind="video"].left,.carousel-card[data-kind="video"].right{filter:grayscale(1)}
 .carousel-card[data-kind="model"]{border:0;box-shadow:none;background:transparent}
 .carousel-card.right{transform:perspective(1300px) rotateY(-17deg) scale(.98)}
 .carousel-card.center,.carousel-card.hidden{transform:perspective(1300px) rotateY(0) scale(.84)}
 .carousel-card.left,.carousel-card.right{mask-image:none;-webkit-mask-image:none}
 .carousel-card.left::after,.carousel-card.right::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1}
 .carousel-card.left::after{background:linear-gradient(to right,#050607 0%,#050607ee 18%,#0506079c 48%,transparent 94%)}
 .carousel-card.right::after{background:linear-gradient(to left,#050607 0%,#050607ee 18%,#0506079c 48%,transparent 94%)}
 .carousel-card img{filter:blur(2.5px) brightness(.52);transition:filter 1.1s ease,transform 1.1s ease}
 .carousel-card[data-kind="video"].left img,.carousel-card[data-kind="video"].right img{filter:grayscale(1) blur(2.5px) brightness(.52)}
 .carousel-card[data-kind="video"]:hover img,.carousel-card[data-kind="video"]:focus-visible img{filter:grayscale(1) blur(1px) brightness(.7)}
 .carousel-card[data-kind="model"]:hover img,.carousel-card[data-kind="model"]:focus-visible img{filter:blur(1px) brightness(.7)}
 #media-carousel.traveling{z-index:5}
 #media-carousel.traveling .carousel-card:not(.is-arriving){pointer-events:none}
 .media-carousel-mode.stage-ready #media-carousel .carousel-card.is-occluded{opacity:0;visibility:hidden}
 .media-carousel-mode.stage-ready #media-carousel .carousel-card.is-circling{animation:carousel-backtrack 1.1s ease-in-out both}
 @keyframes carousel-backtrack{0%{opacity:1}25%,65%{opacity:0}100%{opacity:1}}
 .media-carousel-mode.stage-ready #media-carousel .carousel-card.is-arriving{z-index:2;visibility:visible;opacity:1;clip-path:inset(0);mask-image:none;-webkit-mask-image:none;transform:perspective(1300px) rotateY(0) scale(1);filter:grayscale(0);pointer-events:none}
 .carousel-card.is-arriving::after{opacity:0;transition:opacity 1.1s ease}
 .carousel-card.is-arriving[data-kind="video"]{border-color:var(--cyan)}
 .media-carousel-mode.stage-ready #media-carousel .carousel-card.is-arriving img{filter:grayscale(0) blur(0) brightness(1);transform:scale(1)}
 .media-carousel-mode.stage-ready #media-carousel .carousel-card.carousel-cover{z-index:6;pointer-events:none}
 .carousel-name{left:clamp(22px,2.2vw,40px);bottom:clamp(20px,2vw,35px);right:55px;font-size:clamp(14px,1.4vw,22px)}
 .carousel-arrow{right:clamp(20px,2vw,36px);bottom:clamp(18px,2vw,34px);font-size:28px}
 .carousel-name,.carousel-arrow{z-index:2}
 .carousel-card.left .carousel-name{right:50%}
 .carousel-card.left .carousel-arrow{right:auto;left:clamp(20px,2vw,36px);bottom:auto;top:14px}
 .carousel-card.right .carousel-name{left:50%;right:clamp(22px,2.2vw,40px);text-align:right}
 .carousel-card.right .carousel-arrow{bottom:auto;top:14px}
}
/* The active screen sits in front of both carousel wings and stays centered. */
@media(min-width:1025px) and (pointer:fine){
 .media-carousel-mode #preview-host{z-index:3}
 .media-carousel-mode #screen-hit{z-index:4}
 .media-carousel-mode .preview-host.visible{border:2px solid var(--cyan)!important;box-shadow:0 0 15px #60dce245;transition:opacity .3s,border-color 1s ease}
 .media-carousel-mode .preview-host.visible.carousel-covered{border-color:transparent!important;box-shadow:none}
 .media-carousel-mode .preview-host.carousel-exiting{transition:left 1.1s cubic-bezier(.45,0,.2,1),top 1.1s cubic-bezier(.45,0,.2,1),width 1.1s cubic-bezier(.45,0,.2,1),height 1.1s cubic-bezier(.45,0,.2,1),clip-path 1.1s cubic-bezier(.45,0,.2,1),transform 1.1s cubic-bezier(.45,0,.2,1),filter 1.1s ease,border-color 1.1s ease;z-index:4;border-color:#859397!important}
}
/* One continuous orbital carousel. Card positions and desaturation come from
   the same angle; CSS never teleports a card to refill an empty side. */
@media(min-width:1025px) and (pointer:fine){
 .media-carousel-mode #media-carousel{z-index:5;opacity:0;transition:opacity .45s ease}
 .media-carousel-mode.stage-ready #media-carousel{opacity:1}
 .media-carousel-mode #media-carousel .carousel-card.ring-card{
  display:block;position:fixed;box-sizing:border-box;overflow:hidden;
  border:2px solid #859397;background:#10171b;
  mask-image:none;-webkit-mask-image:none;clip-path:none;
  box-shadow:0 22px 60px #000b
 }
 .media-carousel-mode #media-carousel .carousel-card.ring-card[data-kind="model"]{border:0;box-shadow:none;background:transparent}
 .media-carousel-mode #media-carousel .carousel-card.ring-card img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:none;transform:none;transition:none
 }
 .media-carousel-mode #media-carousel .carousel-card.ring-card::after{display:none}
 .media-carousel-mode #media-carousel .carousel-card.ring-card[data-side="left"] .carousel-name{right:34%}
 .media-carousel-mode #media-carousel .carousel-card.ring-card[data-side="right"] .carousel-name{left:34%;right:24px;text-align:right}
 .media-carousel-mode #media-carousel .carousel-card.ring-card[data-side="left"] .carousel-arrow{left:22px;right:auto;top:14px;bottom:auto}
 .media-carousel-mode #media-carousel .carousel-card.ring-card[data-side="right"] .carousel-arrow{right:22px;top:14px;bottom:auto}
 .media-carousel-mode #preview-host{z-index:6}
 .media-carousel-mode #preview-host.carousel-moving{z-index:4;border:0!important;box-shadow:none;aspect-ratio:auto}
 .media-carousel-mode .preview-host.visible{transition:opacity 1s ease,border-color 1s ease}
 .media-carousel-mode #screen-hit{z-index:7}
}
/* Every dialog separates foreground content from the scene in the same way. */
.scrim{background:rgba(1,4,6,.83);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.video-modal{background:rgba(1,4,6,.85);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
@media(min-width:1025px){
 #contact-backdrop{background:rgba(1,4,6,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
}
/* Give the portraits enough width for whole Italian words and make the client
   marks readable while keeping three separate logos in the contact view. */
@media(min-width:1025px){
 .team-grid,.team-mode .team-grid{width:min(1060px,calc(100vw - 72px))}
 .person-card .person-bio{hyphens:none;word-break:normal;overflow-wrap:normal;text-align:left;font-size:clamp(11px,1.28dvh,14px)}
 .client-strip,.contact-mode .client-strip{bottom:clamp(38px,6dvh,82px);height:clamp(215px,25dvh,260px);width:min(1440px,calc(100vw - 80px))}
 .client-strip h2{font-size:clamp(14px,1.15vw,18px)}
 .client-carousel{height:clamp(160px,18dvh,205px);margin-top:12px}
 .client-logo{width:clamp(260px,25vw,380px);height:180px}
 .client-logo img{width:480px;height:480px}
 .client-logo.portrait img{width:290px;height:290px}
}
@media(min-width:1025px) and (max-height:760px){
 .team-grid,.team-mode .team-grid{width:min(940px,calc(100vw - 60px))}
 .client-strip,.contact-mode .client-strip{bottom:35px;height:205px}
 .client-carousel{height:150px}
}

/* The driving scene sits above the environmental WebGL layer. */
#drive-panel{position:fixed;z-index:4;left:50%;top:clamp(205px,26dvh,295px);bottom:clamp(78px,10dvh,110px);width:min(1100px,calc(100vw - 90px));transform:translateX(-50%);overflow:hidden;border:1px solid #55b5bd;background:#10191d;pointer-events:auto;box-shadow:0 22px 70px #000b}
#drive-panel[hidden]{display:none!important}
.drive-phone-message{display:none}
#drive-canvas{display:block;width:100%;height:100%;touch-action:none}
.drive-hud{position:absolute;top:15px;left:16px;right:16px;display:flex;gap:14px;justify-content:space-between;align-items:start;pointer-events:none;color:#e8f4f4;font:700 12px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.12em;text-shadow:0 1px 6px #000}
.drive-hud span{background:#07151ab8;padding:9px 11px}
.drive-hud #drive-score{color:#7ce4e9}
.drive-commands{position:absolute;bottom:15px;left:16px;display:flex;gap:12px;align-items:center;background:#07151ab8;padding:8px;color:#d8e4e6;font-size:12px;letter-spacing:.08em}
.drive-commands button{background:#78dce1;color:#071b20;border:1px solid #a7e9ed;font-weight:800;padding:10px 15px}
.drive-commands button[hidden]{display:none}
.drive-touch{display:none}
.game-mode .project-tabs,.game-mode .frame-tools,.game-mode #model-hit,.game-mode #screen-hit{display:none}
.game-mode .face-copy{width:min(980px,calc(100vw - 90px));top:clamp(80px,10dvh,120px)}
.game-mode .face-copy #face-title{font-size:clamp(27px,2.6vw,43px);margin:5px 0}
.game-mode .face-copy p{max-width:850px;font-size:clamp(14px,.95vw,16px);line-height:1.3}
.game-mode .service-line{margin-top:6px}
@media(min-width:901px) and (max-width:1250px){.face-nav button{min-width:53px;margin-right:5px;font-size:10px}.face-nav button span{font-size:8px}}
@media(max-width:900px){
 #drive-panel{top:clamp(230px,34dvh,340px);bottom:80px;width:calc(100vw - 30px)}
 .game-mode .face-copy{width:calc(100vw - 40px);top:75px;left:20px;max-height:28dvh}
 .drive-commands span{display:none}
 .drive-touch{position:absolute;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;right:10px;bottom:12px;width:min(210px,52%)}
 .drive-touch button{touch-action:none;background:#07171ccc;border:1px solid #8cdde1;color:white;min-height:46px;font-size:22px}
}
@media(max-width:700px){
 .game-mode #mobile-media-slot{display:none}
 .game-mode .face-copy,.game-mode.centered-face .face-copy{position:fixed;top:69px;width:calc(100vw - 36px);max-height:25dvh;overflow:auto;margin:0}
 .game-mode .face-copy #face-title{font-size:24px}
 .game-mode .face-copy p{font-size:14px}
 #drive-panel{top:32dvh;bottom:calc(88px + env(safe-area-inset-bottom));width:calc(100vw - 20px)}
 .drive-hud{font-size:10px;left:7px;right:7px;top:7px}
 .drive-hud span{padding:6px}
 .drive-commands{left:8px;bottom:12px}
 .drive-commands button{font-size:11px;padding:10px 8px}
}

/* The city is a full-viewport layer within the Atlas space, with soft edges. */
#drive-panel{inset:0;width:100vw;height:100dvh;transform:none;border:0;box-shadow:none;background:transparent;overflow:visible;pointer-events:none;z-index:3}
#drive-canvas{position:absolute;inset:0;mask-image:radial-gradient(ellipse 79% 80% at 50% 57%,#000 58%,transparent 100%);pointer-events:auto;cursor:grab}
#drive-canvas:active{cursor:grabbing}
.game-mode .face-copy{z-index:5;pointer-events:none;text-shadow:0 2px 18px #000,0 3px 24px #000}
.game-mode .face-nav,.game-mode .controls{z-index:5}
.drive-hud{top:clamp(185px,25dvh,330px);left:clamp(22px,10vw,250px);right:clamp(22px,10vw,250px)}
.drive-commands{left:clamp(22px,10vw,250px);bottom:clamp(70px,13dvh,160px)}
.drive-commands button,.drive-touch button{pointer-events:auto}
.drive-hud{display:block;left:0;right:0;top:0}
.drive-hud #drive-score{position:absolute;top:clamp(178px,23dvh,280px);right:clamp(26px,7vw,150px);font:900 clamp(54px,7.4vw,115px)/.85 Arial,Helvetica,sans-serif;letter-spacing:-.08em;color:#64d7df;background:none;padding:0;text-shadow:0 3px 18px #000a}
.drive-hud #drive-status{position:absolute;top:clamp(180px,24dvh,285px);left:clamp(22px,8vw,165px);font-size:13px;background:#07151ac9}
@media(max-width:900px){
 #drive-panel{inset:0;width:100vw;height:100dvh}
 .drive-hud{top:30dvh;left:18px;right:18px}
 .drive-commands{left:18px;bottom:calc(104px + env(safe-area-inset-bottom))}
 .drive-touch{bottom:calc(104px + env(safe-area-inset-bottom));right:18px}
 .drive-hud #drive-score{top:30dvh;right:18px;font-size:clamp(44px,9vw,72px)}
 .drive-hud #drive-status{top:31dvh;left:18px}
}
@media(max-width:700px){
 #drive-panel{inset:0;width:100vw;height:100dvh}
 #drive-panel #drive-canvas,#drive-panel .drive-hud,#drive-panel .drive-commands,#drive-panel .drive-touch{display:none}
 #drive-panel .drive-phone-message{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86vw,420px);margin:0;padding:24px 22px;border:1px solid #6edce47a;background:#10191de8;color:#e8f7f8;text-align:center;font:600 clamp(17px,5vw,22px)/1.45 Arial,Helvetica,sans-serif}
 #drive-canvas{mask-image:linear-gradient(to bottom,transparent 18%,#000 34% 82%,transparent 98%)}
 .drive-hud{top:31dvh;left:12px;right:12px}
 .drive-commands{left:12px;bottom:calc(100px + env(safe-area-inset-bottom))}
 .drive-touch{right:12px;bottom:calc(100px + env(safe-area-inset-bottom))}
 .drive-hud #drive-score{top:32dvh;right:12px;font-size:clamp(40px,12vw,58px)}
 .drive-hud #drive-status{top:32dvh;left:12px;font-size:10px}
}

/* Agency migration: a dedicated web gallery, separate from each experience. */
.language-switch{display:flex;gap:4px;align-items:center;pointer-events:auto}
.language-switch a{font:700 12px Arial,sans-serif;letter-spacing:.04em;color:#bbc4c9;padding:7px 8px;border:1px solid transparent;text-decoration:none}
.language-switch a[aria-current]{color:#75dce6;border-color:#75dce65c;background:#172329}
.language-switch a:focus-visible{outline:2px solid #75dce6;outline-offset:2px}
.web-gallery{display:none;position:absolute;left:50%;top:33%;width:min(970px,calc(100vw - 100px));transform:translateX(-50%);z-index:8;perspective:1200px}
.web-mode .web-gallery{display:block}
.web-mode .frame-tools,.web-mode .project-tabs,.web-mode #mobile-media-slot{display:none}
.web-experience-card{display:grid;grid-template-columns:1.12fr 1fr;color:#e8f1f4;text-decoration:none;background:#101418f5;border:1px solid #63949b8f;overflow:hidden;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .2s ease,border-color .2s ease;transform-style:preserve-3d}
.web-experience-card:hover,.web-experience-card:focus-visible{border-color:#72d8e0}
.web-card-image{position:relative;min-height:270px;overflow:hidden;background:#07090b}
.web-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.web-card-tag{position:absolute;left:20px;bottom:20px;padding:7px 10px;background:#0b1118e6;color:#79d9e0;font:700 11px Arial,sans-serif;letter-spacing:.1em}
.web-card-copy{padding:28px 30px;align-self:center}.web-card-copy h2{font:800 clamp(24px,2.2vw,34px)/1.08 Arial,sans-serif;margin:16px 0}.web-card-copy p{font:400 clamp(15px,1.05vw,18px)/1.5 Arial,sans-serif;color:#c5d0d5;margin:0 0 24px}.web-card-action{font:700 13px Arial,sans-serif;letter-spacing:.08em;color:#75dce6}
.web-mode.stage-ready .web-gallery{animation:webArrival .8s ease both}
@keyframes webArrival{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}
@media(max-height:800px) and (min-width:1025px){.web-gallery{top:37%;width:min(870px,calc(100vw - 100px))}.web-card-image{min-height:230px}.web-card-copy{padding:20px 24px}.web-card-copy p{font-size:14px;line-height:1.4}.web-card-copy h2{font-size:27px}}
@media(max-width:1024px),(pointer:coarse) and (max-width:1366px){.web-gallery{position:relative;inset:auto;width:min(100%,760px);transform:none;order:2;margin:16px auto 32px}.web-mode.stage-ready .web-gallery{animation:mobilePanelIn .7s ease both}.web-card-copy{padding:24px}.web-card-copy p{font-size:17px}}
@media(max-width:700px){.topnote{display:none}.top-actions{gap:5px}.language-switch a{padding:6px;font-size:11px}.web-experience-card{grid-template-columns:1fr}.web-card-image{min-height:0;aspect-ratio:16/9}.web-card-copy{padding:24px}.web-card-copy h2{font-size:28px}.web-card-copy p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.web-experience-card{transform:none!important}.web-mode.stage-ready .web-gallery{animation:none}}
.web-mode:not(.stage-ready) .web-gallery{visibility:hidden;pointer-events:none}
.static-overview{position:fixed;z-index:120;inset:0;overflow:auto;background:#080b0e;padding:40px max(20px,calc((100vw - 1000px)/2));color:#e8f1f4}
.static-overview h1{font:800 clamp(26px,4vw,44px)/1.15 Arial,sans-serif}.static-overview h2{font:700 22px/1.2 Arial,sans-serif;margin:32px 0 12px}.static-overview p{font:400 17px/1.55 Arial,sans-serif;max-width:960px}.static-overview a{color:#75dce6}
@media(max-width:380px){.topbar .brand{width:96px}.language-switch a{padding:5px 4px}.top-actions #sound-toggle{font-size:9px;letter-spacing:.02em;padding:7px 6px}.top-actions #sound-toggle .sound-indicator{margin-left:5px}}
/* WEB samples: four independently shareable experiences. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.web-gallery{top:31%;width:min(1120px,calc(100vw - 100px))}.web-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.web-demo-grid .web-experience-card{grid-template-columns:.85fr 1fr;min-height:185px}.web-demo-grid .web-card-image{min-height:185px}.web-demo-grid .web-card-copy{padding:18px}.web-card-copy h3{font:700 clamp(18px,1.3vw,22px)/1.15 Arial,sans-serif;margin:0 0 12px}.web-demo-grid .web-card-copy p{font-size:14px;line-height:1.45;margin:0 0 14px}.web-demo-grid .web-card-tag{font-size:10px;left:10px;bottom:10px;padding:6px}.web-experience-card:focus-visible{outline:3px solid #67d4dc;outline-offset:4px}
@media(max-height:800px) and (min-width:1025px){.web-gallery{top:32%;width:min(1080px,calc(100vw - 80px))}.web-demo-grid .web-experience-card,.web-demo-grid .web-card-image{min-height:150px}.web-demo-grid .web-card-copy{padding:12px}.web-demo-grid .web-card-copy p{font-size:13px;margin-bottom:8px}.web-card-copy h3{font-size:18px}}
@media(max-width:1024px),(pointer:coarse) and (max-width:1366px){.web-gallery{position:relative;top:auto;width:100%}.web-demo-grid{grid-template-columns:1fr}.web-demo-grid .web-card-copy p{font-size:16px}.web-demo-grid .web-card-image{min-height:190px}}
@media(max-width:700px){.web-demo-grid .web-experience-card{grid-template-columns:1fr}.web-demo-grid .web-card-image{min-height:0}.web-demo-grid .web-card-copy{padding:20px}.web-card-copy h3{font-size:23px}}
.fallback-services{max-width:1000px;margin:32px auto;text-align:left}.fallback-services article{padding:16px 0;border-top:1px solid #33464c}.fallback-services h2{font:700 26px Arial}.fallback-services h3{font:700 19px Arial}.fallback-services p{font:400 16px/1.6 Arial;color:#d0dde1}
@media(prefers-reduced-motion:reduce){.web-demo-grid .web-experience-card{transition:none;transform:none!important}}
.web-gallery{pointer-events:auto}
.studio-information-trigger{pointer-events:auto;color:#d5e6e8;border:1px solid #53676c;padding:8px 10px;text-decoration:none;font:700 12px/1.2 Arial;white-space:nowrap}
.studio-information-trigger:focus-visible,.studio-information-close:focus-visible{outline:2px solid #6cdae0;outline-offset:4px}
.studio-information{position:fixed;inset:0;width:min(1050px,calc(100% - 32px));max-width:none;height:auto;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid #53676c;background:#0b1013;color:#edf6f6;overflow:auto;overscroll-behavior:contain;pointer-events:auto}
.studio-information::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(18px)}
.studio-information-close{position:sticky;top:12px;float:right;margin:12px 12px 0 0;width:44px;height:44px;border:1px solid #53676c;background:#0b1013;color:white;font:28px Arial;cursor:pointer;z-index:1}
.studio-information-body{padding:clamp(24px,5vw,64px);clear:both}
.studio-information h2{font:700 clamp(24px,3vw,36px)/1.2 Arial;margin:24px 0 16px;letter-spacing:normal}
.studio-information h3{font:700 20px/1.35 Arial;margin:22px 0 10px}
.studio-information p{font:400 16px/1.65 Arial;color:#d0dde1;max-width:80ch}
.studio-information a{color:#91e7ec}
.studio-information .fallback-services{margin:28px 0}
.studio-info-compact{display:none}
@media(max-width:1024px){.studio-info-full{display:none}.studio-info-compact{display:inline}}
@media(max-width:700px){.studio-information-trigger{font-size:10px;padding:7px 6px}.studio-information{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}.studio-information-body{padding:20px}.studio-information h3{font-size:18px}}
/* WEB gallery: six cards share the same dimensions and a desktop-only Y tilt. */
.web-gallery{top:clamp(190px,29dvh,300px);bottom:88px;width:min(1400px,calc(100vw - 80px));overflow:auto;padding:12px;overscroll-behavior:contain}
.web-demo-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(210px,1fr);gap:16px}
.web-demo-grid .web-experience-card{height:100%;min-height:210px;grid-template-columns:.8fr 1.2fr;transform:perspective(1100px) rotateY(var(--tilt-y,0deg));transition:transform .3s ease,box-shadow .3s ease}
.web-demo-grid .web-card-image{min-height:0;height:100%}.web-demo-grid .web-card-image img{width:100%;height:100%;object-fit:cover}
.web-demo-grid .web-card-copy{display:flex;flex-direction:column;padding:16px;min-width:0}.web-demo-grid .web-card-copy h3{font-size:18px;line-height:1.2}.web-demo-grid .web-card-copy p{font-size:14px;line-height:1.4}.web-demo-grid .web-card-action{margin-top:auto;padding-top:10px}
@media(hover:hover) and (pointer:fine){.web-demo-grid .web-experience-card:hover{box-shadow:0 18px 30px #0008}}
@media(max-width:1024px),(pointer:coarse) and (max-width:1366px){.web-gallery{position:relative;inset:auto;width:100%;overflow:visible;padding:10px 0}.web-demo-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}.web-demo-grid .web-experience-card{grid-template-columns:1fr;transform:none!important}.web-demo-grid .web-card-image{height:auto;aspect-ratio:16/9}.web-demo-grid .web-card-copy{padding:20px}.web-demo-grid .web-card-copy p{font-size:16px}}
@media(max-width:700px){.web-demo-grid{grid-template-columns:1fr}.web-demo-grid .web-card-copy h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.web-demo-grid .web-experience-card{transform:none!important}}

/* Dense typography fills portrait and landscape intro frames. */
.intro-dense{min-height:160dvh}

/* WEB header and cards share a flow: text height always reserves real space. */
.section-flow{display:contents}
.web-mode .section-flow{position:absolute;inset:80px 0 88px;display:flex;flex-direction:column;align-items:center;overflow:auto;overscroll-behavior:contain;pointer-events:auto;scrollbar-color:#477179 transparent;padding:18px max(28px,calc((100vw - 1400px)/2)) 24px}
.web-mode .section-flow>.face-copy{position:relative;inset:auto;left:auto;top:auto;order:1;flex:none;transform:none;width:min(810px,100%);max-height:none;overflow:visible;margin:0;padding:0 12px 24px}
.web-mode .section-flow>.web-gallery{position:relative;inset:auto;left:auto;top:auto;order:2;flex:none;transform:none;width:100%;overflow:visible;margin:0;padding:12px;bottom:auto}
.web-mode.stage-ready .section-flow>.web-gallery{animation:mobilePanelIn .7s ease both}
@media(max-width:1024px),(pointer:coarse) and (max-width:1366px){.web-mode .section-flow{position:relative;inset:auto;width:100%;overflow:visible;padding:0;flex:none}.web-mode .section-flow>.face-copy{padding:24px 0 18px;text-align:left}.web-mode .section-flow>.web-gallery{padding:10px 0}}
@media(prefers-reduced-motion:reduce){.web-mode.stage-ready .section-flow>.web-gallery{animation:none}}

/* Real fallback navigation uses ordinary links; 3D controls cannot operate without a scene. */
body.atlas-fallback #mobile-dock,body.atlas-fallback #mobile-dock-trigger,body.atlas-fallback .face-nav,body.atlas-fallback #prev,body.atlas-fallback #next{display:none!important}
.fallback-navigation{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.fallback-navigation a{padding:12px 18px;border:1px solid #789fa5;background:#172126;color:#edf6f6;text-decoration:none;font-size:16px}
/* Presentation navigation uses no 3D dependencies. */
.fallback-navigation button,.fallback-controls button,.fallback-cards button{min-height:44px;padding:12px 16px;border:1px solid #789fa5;background:#172126;color:#edf6f6;font:700 13px/1.3 Arial;cursor:pointer}
.fallback-navigation button[aria-pressed=true]{background:#85e3e7;color:#091518}
.fallback-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1000px;margin:20px 0}
.fallback-slide[hidden]{display:none!important}.fallback-slide h3{font:800 clamp(24px,3vw,42px)/1.1 Arial;margin:24px 0 12px;color:#85e3e7}.fallback-slide>p{max-width:800px;line-height:1.6}
.fallback-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;margin:24px 0}
.fallback-card{border:1px solid #789fa5;background:#172126;overflow:hidden;padding-bottom:18px;min-width:0}.fallback-card img{width:100%;height:220px;object-fit:cover;display:block}.fallback-card h4{font-size:21px;margin:20px 18px 12px}.fallback-card p{margin:12px 18px;line-height:1.6;color:#d6e9eb}.fallback-card a{margin:0 6px}.fallback-card img[src*="/team/"]{object-position:top}

.fallback-client-logos{grid-column:1/-1;display:flex;gap:18px;overflow-x:auto;padding:18px 0}.fallback-client-logos>div{flex:0 0 160px;padding:16px;border:1px solid #789fa5;background:#172126;text-align:center}.fallback-client-logos img{display:block;width:100%;height:80px;object-fit:contain;margin-bottom:12px}.fallback-client-logos span{font-size:14px}

.fallback-team-card .person-photo{width:100%;height:auto;aspect-ratio:4/5;padding:0;background:#0c1318;cursor:pointer}.fallback-team-card .person-photo img{height:100%;object-fit:contain;filter:grayscale(1)!important}.fallback-team-card .person-photo.is-color img,.fallback-team-card .person-photo:focus-visible img{filter:grayscale(0)!important}@media(hover:hover){.fallback-team-card .person-photo:hover img{filter:grayscale(0)!important}}

/* Unified Atlas controls: shared with the Dashboard, including fallback. */
button,.language-switch a,.studio-information-trigger,.modal-links a,
.fallback-navigation a,.atlas-document-bar a,.atlas-detail .actions a{
 border-radius:var(--ui-control-radius);border-width:var(--ui-border-width);box-sizing:border-box;
}
.top-actions .studio-information-trigger,.top-actions #sound-toggle,.language-switch a{
 display:inline-flex;align-items:center;justify-content:center;min-height:var(--ui-control-height);line-height:1.2;
}
.language-switch a{min-width:36px}.top-actions{gap:12px}
.controls button,.close,.studio-information-close{width:var(--ui-control-height);height:var(--ui-control-height)}
.project-tabs button,.info-button,.modal-links a,.modal-links button,.video-modal button,
.quote-submit,#generic-inquiry,#quote-back,.fallback-controls button,.fallback-navigation button{
 min-height:var(--ui-control-height);line-height:1.3;
}
.face-nav button{border:var(--ui-border-width) solid var(--line);min-height:var(--ui-control-height);padding:8px;background:#141c20e8}
.service-choice.selected{border-left-width:var(--ui-border-width);border-color:#8fe5ea}
.quote-submit{border:var(--ui-border-width) solid var(--cyan)}
.quote-options{grid-auto-rows:1fr}.quote-option{height:100%}
.atlas-panel,.studio-information,.project-modal,.contact-panel,.person-card,.web-experience-card,
.fallback-card,.fallback-client-logos>div,.preview-host,.model-metrics>div,
.quote-field input,.quote-field textarea,.contact-panel input:not([type=checkbox]),.contact-panel textarea{
 border-radius:var(--ui-radius);border-width:var(--ui-border-width);
}
.person-card{overflow:hidden}.person-photo{border-radius:var(--ui-control-radius)}
.quote-panel .panel-topline{border-radius:var(--ui-radius) var(--ui-radius) 0 0}
.quote-panel .quote-bottom{border-radius:0 0 var(--ui-radius) var(--ui-radius)}
@media(max-width:700px){
 .top-actions{gap:5px}
 .top-actions .studio-information-trigger,.top-actions #sound-toggle,.language-switch a{min-height:var(--ui-control-compact-height)}
 .language-switch a{min-width:26px;padding:6px 4px}
 .topbar{padding-top:10px;padding-bottom:10px}
}

/* The lower section strip remains a light separator navigation. */
.face-nav button,.face-nav button.active,.face-nav button:hover{
 background:transparent;border:0;border-right:var(--ui-border-width) solid var(--line);
 border-radius:0;box-shadow:none;padding:8px;min-height:var(--ui-control-height);
}
.face-nav button.active{border-right-color:var(--cyan)}
.person-card{border-radius:var(--ui-control-radius)}
.person-card .person-photo{border-radius:var(--ui-control-radius) var(--ui-control-radius) 0 0}
/* Team entries in the non-WebGL presentation use compact portraits. */
.fallback-team-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 16px;padding:16px;align-content:start;border-radius:var(--ui-control-radius)}
.fallback-team-card .person-photo,.fallback-team-card>img{grid-column:1;grid-row:1/4;width:96px;height:120px;min-height:0;aspect-ratio:4/5;border:0;border-radius:var(--ui-control-radius);overflow:hidden;margin:0;padding:0;object-fit:contain}
.fallback-team-card h4,.fallback-team-card p{grid-column:2;margin:0;overflow-wrap:anywhere}
.fallback-team-card h4{font-size:18px;line-height:1.25}.fallback-team-card p{font-size:14px;line-height:1.5}
.studio-information .team-grid{position:static;inset:auto;transform:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));width:100%;gap:14px;padding:0}
.studio-information .person-card{display:grid;grid-template-columns:84px minmax(0,1fr);gap:6px 14px;padding:14px;text-align:left}
.studio-information .person-card .person-photo{grid-column:1;grid-row:1/5;width:84px;height:105px;min-height:0;aspect-ratio:4/5;border-radius:var(--ui-control-radius)}
.studio-information .person-card h2,.studio-information .person-card strong,.studio-information .person-card .person-specialty,.studio-information .person-card .person-bio{grid-column:2;margin:0;padding:0;min-height:0;font-size:14px;line-height:1.4}
.studio-information .person-card h2{font-size:18px}.studio-information .person-card strong{font-size:11px}

.web-card-image:has(.spaces-portal){position:relative}.spaces-portal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.web-card-image:has(.spaces-portal) .web-card-tag{z-index:2;position:absolute}

.spaces-entry{display:none;position:fixed;z-index:18;left:50%;bottom:23%;transform:translateX(-50%);border:1px solid #67d4dc99;border-radius:10px;padding:12px 20px;color:#67d4dc;background:#080c11cc;text-decoration:none;font:600 12px Arial}.spaces-room .spaces-entry{display:block}.spaces-mode #project-tabs,.spaces-mode #project-story,.spaces-mode #screen-hit,.spaces-mode .controls,.spaces-mode #interaction-hint,.spaces-mode #client-carousel{display:none!important}@media(max-width:700px){.spaces-entry{bottom:25%;font-size:11px}.spaces-mode .face-copy{max-width:90%;}}

.spaces-entry{bottom:max(104px,13vh)}
@media(max-width:700px){.spaces-entry{bottom:max(118px,14vh)}}
@media(max-width:1024px),(pointer:coarse) and (max-width:1366px){
 .spaces-mode #mobile-media-slot{aspect-ratio:16/15.3;touch-action:none;pointer-events:auto}
 .spaces-mode .spaces-entry{position:relative;inset:auto;order:3;flex:none;transform:none;margin:0 auto 24px;align-self:center}
}