body:has(.spatial-stage) .site-header { background: #080f16; color: #f2f7fa; }
body:has(.spatial-stage) .menu-toggle { color: #f2f7fa; border-color: #42505b; background: #121e29; }
body:has(.spatial-stage) #site-nav { color: #171717; }
.spatial-hero { position: relative; isolation: isolate; background: #080f16; color: #f3f8fc; overflow: clip; min-height: 610px; }
.spatial-world,.spatial-atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spatial-atmosphere { background: linear-gradient(180deg,transparent 65%,#080f16 100%); }
.spatial-fallback { position: absolute; inset: 0; pointer-events: none; background: #030509; }
.spatial-fallback i { position: absolute; left: 52%; top: 27%; width: 34px; height: 80px; background: #fff6dc; box-shadow: 0 4px 24px #fff3c8a0,0 30px 70px #dfb77750; }
[data-renderer="webgl"] .spatial-fallback { visibility: hidden; }
[data-renderer="fallback"] .spatial-world { visibility: hidden; }
.spatial-content { position: relative; z-index: 1; padding-top: 35px; padding-bottom: 28px; }
.spatial-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 120px; }
.spatial-heading h1 { font-size: clamp(38px,4.3vw,62px); line-height: 1.16; letter-spacing: -.04em; font-weight: 600; }
.spatial-intro { max-width: 450px; padding-bottom: 3px; }
.spatial-intro p { color: #c0ced9; font-size: 16px; line-height: 1.8; }
.spatial-intro strong { color: #f3f8fc; font-weight: 550; }
.spatial-intro a { display: inline-flex; align-items: center; gap: 18px; margin-top: 18px; font-size: 14px; color: #bcebdc; min-height: 34px; }
.spatial-intro svg,.portal-arrow svg { width: 22px; height: 22px; }
.spatial-portals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; perspective: 1300px; padding: 8px 0 14px; }
.spatial-portal { position: relative; display: block; min-width: 0; height: 300px; border: 1px solid #a6c7d450; border-radius: 28px; background: #14232e; overflow: hidden; isolation: isolate; transform: rotateX(3deg) rotateY(var(--portal-ry,0deg)) translateY(var(--portal-y,0px)); box-shadow: 0 22px 36px #0006,inset 0 1px 0 #e5ffff4a; transition: transform .55s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s; }
.spatial-interaction { --portal-ry: 7deg; --portal-y: 7px; }
.spatial-experience { --portal-y: -5px; }
.spatial-service { --portal-ry: -7deg; --portal-y: 7px; }
.portal-image { position: absolute; inset: 0; overflow: hidden; }
.portal-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.spatial-interaction img { object-position: 50% 20%; }
.spatial-experience img { object-position: 50% 65%; }
.spatial-service img { object-position: 75% 50%; }
.portal-glass { position: absolute; inset: 0; background: linear-gradient(180deg,#07131a05 0%,#08121c28 28%,#07111bea 77%); box-shadow: inset 0 1px 0 #ffffff4d,inset 1px 0 0 #ffffff1a; border-radius: inherit; }
.portal-copy { position: absolute; left: 25px; right: 22px; bottom: 25px; }
.portal-copy h2 { font-size: clamp(27px,2.6vw,36px); font-weight: 600; line-height: 1.3; letter-spacing: -.035em; }
.portal-copy p { margin-top: 8px; color: #d5e0e9; font-size: 14px; line-height: 1.6; }
.portal-copy > span { display: block; margin-top: 14px; padding-right: 35px; font-size: 13px; color: #b9d7d1; }
.portal-arrow { position: absolute; bottom: 22px; right: 22px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #a2c7cf70; border-radius: 50%; background: #bde6df14; }
.spatial-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 27px; font-size: 13px; color: #a9bfcd; }
.spatial-motion { min-height: 44px; padding: 8px 16px; color: #d6e7ef; background: #1c2b34; border: 1px solid #627989; border-radius: 25px; font-size: 13px; }
.spatial-hero a:focus-visible,.spatial-motion:focus-visible { outline: 3px solid #b0f1df; outline-offset: 5px; }
.spatial-hero + .portfolio-section { padding-top: 76px; }
@media(hover:hover) { .spatial-portal:hover { transform: rotateX(0) rotateY(0) translateY(-10px); border-color: #baf5e6; box-shadow: 0 30px 45px #0009,inset 0 1px 0 #fff8; } .spatial-portal:hover img { transform: scale(1.08); } }
@media(max-width:980px) { .spatial-heading { gap: 25px; } .spatial-heading h1 { font-size: 43px; } .spatial-intro { max-width: 290px; } .spatial-desktop-break { display:none; } .spatial-portals { gap: 14px; } .spatial-portal { height: 285px; border-radius: 22px; } .portal-copy { left: 17px; right: 15px; } .portal-copy p { min-height: 44px; } .portal-copy h2 { font-size: 27px; } .portal-copy > span { max-width: 165px; } }
@media(max-width:700px) { .spatial-hero { min-height: 0; } .spatial-content { padding-top: 22px; padding-bottom: 22px; } .spatial-heading { display: block; margin-bottom: 24px; } .spatial-heading h1 { font-size: clamp(32px,8vw,44px); } .spatial-intro { max-width: 100%; margin-top: 18px; } .spatial-intro p { font-size: 14px; } .spatial-intro a { margin-top: 8px; } .spatial-portals { grid-template-columns: 1fr; gap: 14px; perspective: none; padding: 0; } .spatial-portal { height: 132px; transform: none; border-radius: 21px; } .portal-image { left: 48%; } .portal-glass { background: linear-gradient(90deg,#101f2c 12%,#101f2cf5 43%,#101f2c25 100%); } .portal-copy { top: 17px; bottom: 15px; left: 20px; right: 50px; } .portal-copy h2 { font-size: 27px; } .portal-copy p { font-size: 13px; margin-top: 5px; min-height: 0; } .portal-copy > span { font-size: 13px; margin-top: 7px; max-width: none; } .portal-arrow { right: 15px; bottom: 16px; width: 30px; height: 30px; } .spatial-bottom { margin-top: 18px; align-items: flex-start; gap: 12px; } .spatial-bottom p { max-width: 170px; line-height: 1.7; } .spatial-motion { white-space: nowrap; padding: 8px 12px; } .spatial-hero + .portfolio-section { padding-top: 48px; } }
@media(prefers-reduced-motion:reduce) { .spatial-portal,.portal-image img { transition: none; transform: none!important; } }

.portal-product { display: inline-block; white-space: nowrap; }
.portal-copy { word-break: keep-all; }

@media(max-width:700px) { .spatial-heading { margin-bottom:120px; } .spatial-portal { height:112px; } .spatial-fallback i { top:28%; left:63%; width:23px; height:55px; } }

/* The reference is an architectural light corridor, not a doorway vignette. */
.spatial-hero { min-height:690px; }
.spatial-atmosphere { background:linear-gradient(90deg,#02070d96 0%,transparent 48%),linear-gradient(180deg,#03080c65 0%,transparent 34%,#080f16dd 100%); }
.spatial-heading { margin-bottom:185px; }
.spatial-portal { height:195px; background:#091724; }
.portal-image { left:42%; opacity:.8; }
.portal-glass { background:linear-gradient(90deg,#0b1b29 7%,#0b1b29df 45%,#0b1b294a 100%); }
.portal-copy { left:24px; bottom:23px; }
.portal-copy h2 { font-size:32px; }
.portal-copy p { max-width:240px; }
.spatial-fallback { perspective:600px; overflow:hidden; background:radial-gradient(ellipse at 50% 40%,#07394a 0%,#03080d 55%); }
.spatial-fallback i,.spatial-fallback::before,.spatial-fallback::after { content:'';position:absolute;left:15%;top:4%;width:70%;height:85%;background:none;border:2px solid #37cde57a;box-shadow:0 0 16px #21bad53a,inset 0 0 16px #21bad53a; }
.spatial-fallback::before { transform:translateZ(-160px); }
.spatial-fallback::after { transform:translateZ(-400px); }
@media(max-width:980px) and (min-width:701px) { .spatial-portal { height:205px; } .portal-copy { left:17px; } .portal-copy h2 { font-size:27px; } .portal-image { left:25%;opacity:.6; } }
@media(max-width:700px) { .spatial-hero { min-height:0; } .spatial-heading { margin-bottom:130px; } .spatial-portal { height:112px; } .portal-image { left:48%;opacity:.8; } .portal-copy { left:20px;top:17px;bottom:15px; } .portal-copy h2 { font-size:27px; } .portal-copy p { max-width:none; } .spatial-fallback i { left:15%;top:4%;width:70%;height:85%; } }
.spatial-atmosphere { background:linear-gradient(90deg,#02070d66 0%,transparent 48%),linear-gradient(180deg,#03080de0 0%,#03080d55 31%,transparent 55%,#080f16dd 100%); }

/* Quiet fixed world: content owns the foreground; the corridor only guides. */
body:has(.spatial-stage) { background:#04090f; }
.spatial-stage { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
body:has(.spatial-stage) #main,body:has(.spatial-stage) .site-footer { position:relative;z-index:1; }
.spatial-hero { background:transparent;min-height:650px; }
.spatial-atmosphere { background:linear-gradient(180deg,#02070d88,transparent 45%,#03080d55); }
.spatial-heading { margin-bottom:70px; }
.spatial-portal { height:275px;background:#14212b;border:1px solid #d2e6ed59;box-shadow:0 22px 45px #0009,inset 0 1px 0 #ffffff3b; }
.portal-image { inset:0;opacity:1; }
.portal-glass { background:linear-gradient(180deg,#07121a05 5%,#08131d22 30%,#08131de6 70%,#08131d 100%); }
.portal-copy { bottom:24px;left:24px;right:24px; }
.portal-copy h2 { font-size:34px;color:#fff; }
.portal-copy p { color:#e1ebf2;max-width:100%; }
.portal-copy>span { color:#c6ded8; }
.portal-arrow { background:#e6f6f2; color:#10241f; border-color:#f1fffb; }
body:has(.spatial-stage) #main>section:not(.spatial-hero) { width:calc(100% - 96px); max-width:1440px; margin:48px auto; border-radius:30px; overflow:hidden;box-shadow:0 20px 50px #0005; }
body:has(.spatial-stage) .portfolio-section { padding-top:48px;padding-bottom:48px;background:#f7f9fa; }
body:has(.spatial-stage) .site-footer { background:#080f16;color:#c9d9e2; }
body:has(.spatial-stage) .site-footer a { color:#e1edf5; }
.spatial-fallback i,.spatial-fallback::before,.spatial-fallback::after { border-width:1px;border-color:#31859a38;box-shadow:none; }
@media(max-width:980px) and (min-width:701px) { .spatial-portal { height:275px; } .portal-image { inset:0;opacity:1; } .portal-copy { left:17px;right:17px; } .portal-copy h2 { font-size:28px; } body:has(.spatial-stage) #main>section:not(.spatial-hero) { width:calc(100% - 48px); } }
@media(max-width:700px) { .spatial-hero { min-height:0; } .spatial-heading { margin-bottom:45px; } .spatial-portal { height:132px; } .portal-image { left:48%;opacity:1; } .portal-glass { background:linear-gradient(90deg,#101e2b 10%,#101e2bf0 47%,#101e2b22 100%); } .portal-copy { top:17px;bottom:15px;left:20px;right:45px; } .portal-copy h2 { font-size:27px; } body:has(.spatial-stage) #main>section:not(.spatial-hero) { width:calc(100% - 28px); margin:28px auto;border-radius:22px; } body:has(.spatial-stage) .portfolio-section { padding:28px 18px; } }

body:has(.spatial-stage) .site-footer .footer-details { color:#adc1ce; }
body:has(.spatial-stage) .portfolio-section { padding-inline:48px; }
@media(max-width:980px) and (min-width:701px) { body:has(.spatial-stage) .portfolio-section { padding-inline:32px; } .capabilities-section .section-heading { grid-template-columns:1fr;gap:18px; } }
@media(max-width:700px) { body:has(.spatial-stage) .portfolio-section { padding-inline:18px; } }

@media(max-width:980px) and (min-width:701px) { .capabilities-section .section-heading { display:grid;grid-template-columns:1fr;gap:18px; } }

/* Shared detail surfaces sit above the same quiet viewport-fixed world. */
body:has(.spatial-stage) .product-detail { color:#eff6fb;padding:24px 0 64px; }
body:has(.spatial-stage) .product-detail>.container { width:calc(100% - 96px);max-width:1312px; }
.product-detail>.container:first-child { background:#13212ced;border:1px solid #7a98ac38;border-radius:28px;padding:28px 36px 36px;box-shadow:0 20px 44px #0007; }
.product-topline { display:flex;justify-content:space-between;align-items:center;gap:20px; }
.product-topline .product-back { margin:0;color:#c1d9e4; }
body:has(.spatial-stage) .product-intro { padding:32px 0 0;gap:48px; }
body:has(.spatial-stage) .product-category { color:#b2cdc6; }
body:has(.spatial-stage) .product-intro-copy>p+p { color:#c8d8e2; }
body:has(.spatial-stage) .product-actions .text-link { color:#bcebdc; }
.product-art { margin-top:28px;border-radius:26px;overflow:hidden;background:#101c24;border:1px solid #7799aa40; }
.product-art img { display:block;width:100%;height:350px;object-fit:cover;object-position:50% 38%; }
.product-art figcaption { padding:16px 24px;color:#bbceda;font-size:13px; }
body:has(.spatial-stage) .product-visual { margin-top:28px; }
body:has(.spatial-stage) .product-visual .product-figure { background:#f7f9fa;border-radius:26px;overflow:hidden;box-shadow:0 18px 40px #0006; }
body:has(.spatial-stage) .product-visual .image-zoom { background:#edf1f4; }
body:has(.spatial-stage) .product-visual figcaption { padding:16px 22px;margin:0;color:#3a4b58;font-size:14px; }
body:has(.spatial-stage) .product-notes { padding-top:28px;display:grid;gap:20px; }
body:has(.spatial-stage) .product-note { margin:0;padding:30px 32px;background:#13212cf5;border:1px solid #789aab36;border-radius:24px;gap:36px; }
body:has(.spatial-stage) .product-note>p,body:has(.spatial-stage) .product-points ul { color:#cad9e2; }
body:has(.spatial-stage) .product-closing { background:#e6f1ed;color:#142b24;border-radius:26px;padding:36px;margin-top:28px;margin-bottom:28px; }
body:has(.spatial-stage) .product-closing p { color:#40594e; }
body:has(.spatial-stage) .product-related { padding-bottom:0; }
body:has(.spatial-stage) .product-related>div { gap:16px; }
body:has(.spatial-stage) .product-related a { padding:24px;background:#13212cf0;border:1px solid #789aab36;border-radius:22px; }
body:has(.spatial-stage) .product-related a span>span { color:#b3cad7; }
body:has(.spatial-stage) .soulmaps-directions { margin-top:28px;padding:30px 32px;background:#13212cf5;border:1px solid #789aab36;border-radius:26px; }
body:has(.spatial-stage) .soulmaps-directions>h2 { margin-bottom:24px;font-size:28px; }
body:has(.spatial-stage) .direction-grid { gap:28px; }
body:has(.spatial-stage) .direction-grid h3 { font-size:24px; }
body:has(.spatial-stage) .direction-grid .direction-title+p,body:has(.spatial-stage) .direction-engine { color:#c0d3df; }
body:has(.spatial-stage) .direction-engine a { color:#bcebdc; }
body:has(.spatial-stage) .product-detail a:focus-visible { outline:3px solid #b7efdc;outline-offset:5px; }
@media(max-width:980px) { body:has(.spatial-stage) .product-detail>.container { width:calc(100% - 48px); } body:has(.spatial-stage) .product-intro { grid-template-columns:1fr;gap:22px; } body:has(.spatial-stage) .product-note,body:has(.spatial-stage) .product-closing { grid-template-columns:1fr;gap:18px; } body:has(.spatial-stage) .direction-grid { grid-template-columns:1fr; } }
@media(max-width:600px) { body:has(.spatial-stage) .product-detail { padding:18px 0 40px; } body:has(.spatial-stage) .product-detail>.container { width:calc(100% - 28px); } .product-detail>.container:first-child { padding:22px;border-radius:22px; } .product-topline { gap:10px;flex-wrap:wrap; } .product-topline .spatial-motion { font-size:13px;padding:8px 12px; } body:has(.spatial-stage) .product-note,body:has(.spatial-stage) .product-closing,body:has(.spatial-stage) .soulmaps-directions { padding:24px 22px;border-radius:22px; } body:has(.spatial-stage) .product-intro { padding-top:24px; } .product-art img { height:260px; } .product-art figcaption { padding:14px 20px; } body:has(.spatial-stage) .product-related a { padding:22px; } }