/* A centered stage, built from light instead of image covers. */
.section-pad{padding-left:clamp(28px,8vw,154px);padding-right:clamp(28px,8vw,154px)}
.portal-base,.section-heading,.gallery-heading,.process,.case-dialog,footer{text-align:center}
.section-label{justify-content:center;position:relative}
.section-label .text-button{position:absolute;right:0;letter-spacing:0}
.section-heading{display:block!important;margin:25px auto 30px}
.section-heading h2,.gallery-heading h2{max-width:none;font-size:clamp(60px,8.1vw,128px);line-height:.99;letter-spacing:-.055em;font-weight:500}
.section-heading>p,.directions .section-heading p,.process .section-heading p{max-width:620px;margin:23px auto 0;padding:0;line-height:1.6}
.section-heading h2 em,.gallery-heading h2 em{font-weight:350}
.hero>.portal-base{min-height:0;padding:28px 5.2% 48px}
.hero-brand{margin:0;font-size:20px;letter-spacing:-.7px;z-index:1}
.hero-stage{position:relative;width:100%;max-width:1460px;height:clamp(300px,31vw,470px);margin:22px auto -16px;pointer-events:none}
canvas[data-led-scene]{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-stage .stage-fallback{position:absolute;inset:0;display:grid;place-content:center;margin:0;font-size:clamp(64px,8vw,130px);line-height:1;letter-spacing:-.05em}
.hero-stage.scene-ready>.stage-fallback{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;inset:auto;filter:none!important}
.hero-content{max-width:920px;margin:auto}
.hero-subtitle{font-size:clamp(33px,4.2vw,64px);line-height:1.06;letter-spacing:-.045em;font-weight:450;color:#adc2e0}
.hero-subtitle em{color:#789ac8;font-weight:350}
.portal-lit .hero-subtitle{color:#eaf3ff}.portal-lit .hero-subtitle em{color:#b5d8ff}
.hero-description{max-width:620px;font-size:16px;line-height:1.6;margin:21px auto 0}
.hero-actions{justify-content:center;margin-top:23px}
.hero-meta{justify-content:center;max-width:none;margin:22px auto 0;gap:18px;font-size:12px}
.hero-meta li+li:before{margin-right:18px}
.hero-foot{position:static;justify-content:center;margin:30px auto 0;padding:0;gap:26px;font-size:12px}
.hero-foot .interaction-hint{max-width:none}.hero-foot .scroll-link{font-size:12px;opacity:.8}
.interaction-hint i{width:15px;height:20px;opacity:.65}.interaction-hint i:before{left:6px;width:1px;height:5px}
.directions>.portal-base{padding-top:52px;padding-bottom:68px}
.directions .section-heading{margin-bottom:15px}
.directions h2{font-size:clamp(56px,7.1vw,114px);line-height:1.02}
.direction-studios{gap:clamp(34px,5vw,82px);max-width:1250px;margin:auto;align-items:stretch}
.direction-studio{display:flex;flex-direction:column}
.direction-studio[data-direction=digital]{margin-top:0}
.direction-art{height:270px;margin:0 -12px -12px;mask-image:none;transform:rotate(-4deg)}
.direction-studio[data-direction=digital] .direction-art{transform:rotate(4deg)}
.direction-studio.is-pointed .direction-art{transform:rotate(0deg) scale(1.035)}
.direction-art:after{display:none}
.direction-content{display:flex;align-items:center;flex:1;flex-direction:column}
.direction-number{margin:0 0 13px;font-size:11px;color:var(--direction-color)}
.direction-studio h3{font-size:clamp(41px,4.6vw,74px);line-height:1.01;letter-spacing:-.045em;margin-bottom:20px}
.direction-studio p{margin:0 auto;max-width:460px;line-height:1.6}
.direction-deliverables{justify-content:center;margin:19px auto 12px;max-width:440px;line-height:1.5}
.direction-deliverables li{font-size:12px}
.direction-cta{margin-top:auto;gap:22px;min-height:63px}
.portal-surface:has(.portal-base a:hover)>.portal-base a:hover{background:transparent}
.portal-surface>.portal-base .button:hover{background:#254474}
.portal-projection>.portal-base .primary{background:#a7ccff;color:#081321;border-color:#a7ccff}
/* Reading blocks remain fully readable inside the portal. */
.reading-zone{position:relative;z-index:4;background:linear-gradient(180deg,#101a2c 0%,#0a101c 12%,#0a111d 88%,#101a2c 100%);isolation:isolate}
.reading-zone:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,#284c7d33,transparent 32%),radial-gradient(ellipse at 50% 100%,#284c7d2b,transparent 25%)}
.works{padding-top:33px;padding-bottom:48px}
.gallery-heading{margin:24px 0 0;text-align:center}
.gallery-heading h2{font-size:clamp(58px,7.6vw,118px)}
.gallery-heading p{margin-top:23px;line-height:1.6}
.case-filters{margin:24px 0 8px}
.gallery{height:570px}.case-card{top:30px}
.case-bottom{align-items:center;position:relative;padding:20px 36px}
.case-bottom>div{width:100%;text-align:center}
.case-bottom h3{font-size:21px}.case-bottom p{line-height:1.45}
.gallery-instruction{margin-top:15px}
.process{padding-top:48px;padding-bottom:42px}
.process .section-heading{margin-bottom:23px}
.process-mode{justify-content:center;margin:20px 0}
.node-canvas{background:radial-gradient(ellipse at 50% 50%,#17315750,transparent 68%),radial-gradient(#5e7ca92a .7px,transparent .7px);background-size:auto,20px 20px;border-color:#3a506d66;border-radius:0}
.node-detail{text-align:center}.node-detail p{line-height:1.55}
.experience-strip{padding-top:40px;gap:25px}
.experience-strip>div{display:flex;flex-direction:column;justify-content:center;gap:14px}
.experience-strip strong{font-size:clamp(65px,7vw,102px)}.experience-strip p{margin:0}
.contact>.portal-base{padding-top:56px;padding-bottom:46px}
.contact .section-heading{margin-bottom:0}
.contact h2{font-size:clamp(82px,11vw,174px);line-height:.93}
.contact-grid{grid-template-columns:1fr;gap:0;max-width:1250px;margin:auto}
.contact-visual{height:350px;min-height:0;border:0;border-radius:0;mask-image:none;margin:4px 0 -10px}
.contact-visual canvas{mask-image:none}
.contact-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0;max-width:1080px;width:100%;margin:auto}
.contact-card>a,.contact-card>button{position:relative;flex-direction:column;justify-content:center;text-align:center;gap:14px;min-height:133px;padding:17px 12px;border-top:1px solid #47699166;border-bottom:0;transition:background .35s,color .35s,border-color .35s}
.contact-card>a:hover,.contact-card>button:hover,.contact-card>a:focus-visible,.contact-card>button:focus-visible{background:linear-gradient(#426a9b26,transparent)!important;border-color:#a9d5ff;color:#d9eeff}
.contact-card svg{width:22px;height:22px}.contact-card strong{font-size:24px;font-weight:450}
.contact-card small{font-size:14px;margin-top:5px}
.contact-card .copy-mark{position:absolute;right:15px;top:20px;font-size:16px;opacity:.5}
.contact-card>div{grid-column:1/-1;justify-content:center;text-align:center;min-height:0;padding:23px 0 0;border:0;gap:14px}
.contact-card>div svg{width:19px;height:19px;opacity:.6}
.contact-card>div strong{font-size:14px}.contact-card>div small{font-size:12px;margin-top:3px}
footer{display:flex;flex-direction:column;align-items:center;gap:24px;padding:28px 8% 100px}
footer>div:first-child>p{font-size:12px;margin-top:9px}.footer-legal{text-align:center}
footer details{margin:10px 0}.back-top{font-size:12px}
.case-dialog h2{margin-left:auto;margin-right:auto}.project-tags{justify-content:center}
@media(min-width:1800px){.hero>.portal-base{padding-top:34px}.hero-brand{margin-bottom:0}}
@media(max-width:1150px){.section-pad{padding-left:78px;padding-right:78px}.hero-stage{height:330px}.section-heading h2{font-size:8vw}.direction-art{height:230px}.direction-studios{gap:30px}.direction-studio h3{font-size:44px}.direction-studio p{font-size:15px}.contact-card{gap:12px}.contact-card small{font-size:12px}.contact h2{font-size:11vw}}
@media(max-width:760px){
 .section-pad{padding-left:24px;padding-right:24px}.section-label{font-size:10px;letter-spacing:1.7px}
 .section-label .text-button{position:static;font-size:11px}.process .section-label{flex-wrap:wrap;gap:8px 20px}
 .section-heading{margin:23px auto 26px}.section-heading h2,.directions h2,.gallery-heading h2{font-size:clamp(39px,10.5vw,72px);line-height:1.05;letter-spacing:-.04em}
 .section-heading>p,.directions .section-heading p,.process .section-heading p{font-size:15px;line-height:1.55;margin-top:20px}
 .hero>.portal-base{padding:25px 20px 37px;min-height:0}.hero-brand{font-size:18px;margin:0}
 .hero-stage{height:clamp(185px,48vw,300px);width:calc(100% + 24px);margin:37px -12px 9px}
 .hero-stage .stage-fallback{font-size:12vw}.hero-subtitle{font-size:clamp(30px,8.4vw,51px);letter-spacing:-.045em;line-height:1.1}
 .hero-description{font-size:15px;line-height:1.6;max-width:460px;margin-top:20px}.hero-actions{gap:9px;margin-top:24px}.hero-actions .button{font-size:13px;min-height:48px;padding:13px 19px}
 .hero-meta{font-size:10px;gap:9px 12px;line-height:1.5;margin-top:21px}.hero-meta li+li:before{margin-right:12px}
 .hero-foot{margin-top:23px;font-size:10px}.hero-foot .interaction-hint{max-width:none}.hero-foot .scroll-link{display:none}
 .directions>.portal-base{padding-top:32px;padding-bottom:42px}.directions .section-heading{margin-bottom:12px}
 .direction-studios{grid-template-columns:1fr;gap:37px}.direction-art{height:245px;max-width:500px;width:100%;margin:0 auto -9px}
 .direction-studio h3{font-size:clamp(44px,12vw,65px);line-height:1.01;margin-bottom:18px}.direction-number{margin-bottom:12px}.direction-studio p{font-size:15px;max-width:440px}
 .direction-deliverables{margin:17px auto 10px}.direction-deliverables li{font-size:12px}.direction-cta{font-size:15px;min-height:60px;gap:23px}

 .works{padding-top:30px;padding-bottom:33px}.gallery-heading{margin-top:23px;text-align:center}.gallery-heading h2 br{display:block}.gallery-heading p{font-size:15px;line-height:1.55;margin-top:20px}
 .case-filters{margin:23px 12px 5px}.case-filters button{font-size:12px;padding:10px 14px}.gallery{height:423px}.case-card{top:25px}.case-bottom{padding:16px 29px 12px 5px}.case-bottom h3{font-size:16px;line-height:1.22}.case-bottom p{font-size:11px}
 .gallery-controls{gap:25px}.round-button{width:43px;height:43px}.gallery-instruction{font-size:12px}
 .process{padding-top:36px;padding-bottom:35px}.process-mode{margin:21px 0 19px;gap:6px}.process-mode button{flex:0 1 auto;font-size:12px;padding:10px 12px}
 .experience-strip{grid-template-columns:repeat(3,1fr);gap:13px;padding-top:31px}.experience-strip>div{padding:0;border:0;display:flex;gap:12px}.experience-strip strong{font-size:clamp(40px,12vw,70px);min-width:0}.experience-strip p{font-size:10px;line-height:1.5;margin:0}
 .contact>.portal-base{padding-top:42px;padding-bottom:34px}.contact .section-heading h2{font-size:clamp(65px,17vw,108px);line-height:.98}.contact .section-heading p{max-width:400px}
 .contact-visual{height:clamp(165px,43vw,270px);min-height:0;margin:22px -10px 4px}.contact-grid{gap:0}
 .contact-card{grid-template-columns:1fr;gap:0;padding:0}.contact-card>a,.contact-card>button{flex-direction:row;min-height:87px;gap:18px;padding:15px 18px}.contact-card strong{font-size:22px}.contact-card small{font-size:13px}.contact-card .copy-mark{display:none}
 .contact-card>div{padding-top:26px;min-height:0;gap:13px}.contact-card>div strong{font-size:13px}.contact-card>div small{font-size:11px}
 footer{padding:28px 24px 95px;gap:22px}.case-dialog h2{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.interaction-hint{display:none}.hero-stage{pointer-events:none}}
@media(forced-colors:active){canvas[data-led-scene]{display:none}.hero-stage.scene-ready>.stage-fallback{inset:0;width:auto;height:auto;clip-path:none;white-space:normal;color:CanvasText!important}}

/* The archive's electric palette lives exclusively in the illuminated state. */
:root{--bg:#070707;--ink:#f1f1f1;--muted:#a4a4a4;--line:#303030;--blue:#4387ff;--portal-accent:#4387ff;--portal-tint:#02050a;--portal-rgb:19,104,255;--portal-red:#9b56ff;--portal-cyan:#249dff}
body[data-portal-tone=stage]{--portal-accent:#9b58ff;--portal-tint:#080310;--portal-rgb:127,77,255;--portal-red:#b346ff;--portal-cyan:#764dff}
body[data-portal-tone=digital]{--portal-accent:#00e1b1;--portal-tint:#010d0b;--portal-rgb:0,218,172;--portal-red:#12eea2;--portal-cyan:#00bddd}
body{background:#070707;color:#f1f1f1}
::selection{background:#626262;color:white}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline-color:#ddd}
.portal-lit{background:radial-gradient(ellipse at 50% 42%,rgba(var(--portal-rgb),.16),transparent 70%),var(--portal-tint)}
.portal-global-outline{color:#dedede}.portal-global-outline .portal-halo{opacity:.14}
.portal-lit>.portal-projection h2{color:#f5f7fb}.portal-lit>.portal-projection h2 em{color:#4387ff;font-weight:450}
.portal-lit .directions h2 em{color:var(--portal-accent)}
.portal-projection .brand span{color:#4387ff;text-shadow:0 0 22px #1368ff55}
.portal-projection>.portal-base .primary{background:#1368ff;color:#fff;border-color:#3d83ff;box-shadow:0 8px 40px #1368ff30}
.portal-projection>.portal-base .secondary{color:#f1f5ff;border-color:#4387ff;background:#06152b}
.portal-projection .hero-description,.portal-projection .section-heading>p{color:#ccd4e3}
.portal-projection .hero-meta{color:#91a6c8}
.portal-projection .section-label{color:#6b92d1}
.portal-projection .direction-studio{--direction-color:#a05bff;--direction-rgb:143,67,255}
.portal-projection .direction-studio[data-direction=digital]{--direction-color:#00ddb0;--direction-rgb:0,221,176}
.portal-projection .direction-studio h3{color:var(--direction-color)}
.portal-projection .direction-studio .direction-cta{background:var(--direction-color);border-color:var(--direction-color);color:#fff;box-shadow:0 8px 36px rgba(var(--direction-rgb),.25)}
.portal-projection .direction-studio[data-direction=digital] .direction-cta{color:#002b23}
.portal-projection .contact-card svg{color:#4387ff}.portal-projection .contact-card small{color:#aabbd4}
.portal-projection .contact-card>a,.portal-projection .contact-card>button{border-top-color:#1368ff80}
.portal-projection .contact-card strong{color:#f5f7fb}

/* No full-page grayscale filter: neutral colors avoid another compositing layer. */
.portal-surface:not(.portal-projection)>.portal-base{color:#ededed}
.portal-surface:not(.portal-projection) .brand span{color:#ededed}
.portal-surface:not(.portal-projection) :is(.hero-description,.hero-meta,.section-label,.section-heading>p,.direction-studio p,.direction-deliverables li){color:#a5a5a5}
.portal-surface:not(.portal-projection) .hero-meta li:before{color:#555}
.portal-surface:not(.portal-projection) .direction-studio{--direction-color:#d1d1d1;--direction-rgb:170,170,170}
.portal-surface:not(.portal-projection) .direction-studio h3{color:#c6c6c6}
.portal-surface:not(.portal-projection)>.portal-base .button{background:transparent;color:#ddd;border-color:#666;box-shadow:none}
.portal-surface:not(.portal-projection)>.portal-base .button:hover{background:#242424;color:white;border-color:#aaa}
.portal-surface:not(.portal-projection) .contact-card :is(svg,small,.copy-mark){color:#a7a7a7}
.portal-surface:not(.portal-projection) .contact-card>a,.portal-surface:not(.portal-projection) .contact-card>button{border-color:#454545}
.side-nav,.contact-dock{border-color:#3e3e3e;background:#161616e8;box-shadow:0 6px 30px #0006}
.side-nav a,.contact-dock>a,.contact-dock>button{color:#aaa}
.side-nav a:hover,.side-nav a[aria-current],.contact-dock>:hover{background:#333;color:#fff}
.nav-label,[data-tooltip]:before,.copy-status{background:#191919;border-color:#555;color:#ddd}
.scroll-progress{background:#d6d6d6}.hold-cursor{border-color:#fff}
footer{background:#090909;border-color:#2b2b2b;color:#a1a1a1}
footer .brand,footer .brand span,footer summary{color:#ddd}

/* An edge-to-edge LED mosaic between the identity and introduction. */
.hero-stage{height:clamp(370px,43vw,660px);width:calc(100% + 10.4vw);max-width:none;margin:12px -5.2vw 6px}
.hero-content{margin-top:0}.hero-description{margin-top:12px;font-size:17px}
.hero-stage .stage-fallback span{display:block;font-size:.35em;line-height:1.3;letter-spacing:-.01em;margin-top:28px}
.hero>.portal-base{padding-bottom:43px}
.hero-actions .button,.direction-cta.button{min-height:56px;font-size:15px;font-weight:550;padding:16px 29px}
.hero-meta{font-size:12px}
.direction-number{font-size:12px}
.direction-deliverables{margin-bottom:25px}
.direction-cta.button{margin-top:auto;gap:0;line-height:1.4;align-self:center}
.direction-art{height:290px}

/* Machined edges replace the repeated pattern at the reading area's boundaries. */
.reading-zone{background:linear-gradient(180deg,#101010,#090b10 17%,#090b10 84%,#101010)}
.reading-zone:before{background:radial-gradient(ellipse at 50% 0%,#ffffff06,transparent 29%),radial-gradient(ellipse at 50% 100%,#ffffff05,transparent 23%)}
.works{padding-top:29px}
.works,.case-dialog{--case-accent:#4387ff;--case-rgb:19,104,255;--case-dark:#041632}
.works[data-tone=stage],.case-dialog[data-tone=stage]{--case-accent:#a467ff;--case-rgb:143,67,255;--case-dark:#1c0b35}
.works[data-tone=digital],.case-dialog[data-tone=digital]{--case-accent:#00deb2;--case-rgb:0,222,178;--case-dark:#02281f}
.case-filters button[data-filter=stage]{--filter-color:#a467ff;--filter-rgb:143,67,255}
.case-filters button[data-filter=digital]{--filter-color:#00deb2;--filter-rgb:0,222,178}
.case-filters button[data-filter=all]{--filter-color:#4387ff;--filter-rgb:19,104,255}
.works .case-card{border-radius:5px;background:linear-gradient(145deg,rgba(var(--case-rgb),.13),transparent),#080f1c}
.works .case-card.is-active{box-shadow:0 20px 85px rgba(var(--case-rgb),.15)}
.case-filters button[aria-pressed=true]{background:rgba(var(--filter-rgb),.2);color:var(--filter-color)}
.node-canvas{border:1px solid #ffffff18;background:radial-gradient(ellipse at 50% 48%,#1368ff0c,transparent 60%),#080c13;background-size:auto;border-radius:0}
.node-canvas:before{content:'';position:absolute;inset:12px;pointer-events:none;border:1px solid #ffffff08}
.node-detail{border-color:#305693;background:linear-gradient(155deg,#101e34,#080f1c);box-shadow:0 20px 75px #0008;border-radius:4px}
.node-detail:after{background:linear-gradient(90deg,transparent,#1368ff,#4387ff,transparent)}
.ring-path{display:none}.node-wire{stroke:#31425e}.node-wire.active{stroke:#4387ff}
.process-node{background:#0d1727;border-color:#344761;color:#c3d0e2}
.process-node.selected{background:#1368ff;border-color:#4387ff;box-shadow:0 0 35px #1368ff40;color:#fff}
.process-mode button[aria-pressed=true]{background:#1368ff24;border-color:#4387ff;color:#d9e7ff}
.experience-strip strong{color:#f1f5fc}.experience-strip strong span{color:#4387ff}
.portal-projection .button{transition:background-color .2s,border-color .2s,box-shadow .25s}
.portal-projection>.portal-base .primary.is-pointed{background:#2879ff;border-color:#77a9ff;box-shadow:0 0 32px #1368ff66,0 8px 45px #1368ff33}
.portal-projection>.portal-base .secondary.is-pointed{background:#0c2854;border-color:#83b0ff;color:#fff;box-shadow:0 0 28px #1368ff33}
.portal-projection .direction-studio .direction-cta.is-pointed{background:var(--direction-color);border-color:#e6d3ff;color:#fff;box-shadow:0 0 35px rgba(var(--direction-rgb),.5),0 8px 42px rgba(var(--direction-rgb),.25)}
.portal-projection .direction-studio[data-direction=digital] .direction-cta.is-pointed{color:#002b23;border-color:#a9ffe9}
.portal-projection .contact-card>.is-pointed{background:linear-gradient(#1368ff29,transparent);border-color:#72a7ff}
.portal-projection .contact-card>.is-pointed svg{color:#8db7ff}
.skip-link{background:#292929}
@media(max-width:1150px){.hero-stage{height:clamp(280px,47vw,540px)}.direction-art{height:250px}}
@media(max-width:760px){
 .hero-stage{height:clamp(200px,58vw,440px);width:calc(100% + 40px);margin:12px -20px 8px}
 .hero-stage .stage-fallback span{font-size:.38em;margin-top:18px}
 .hero-description{font-size:16px;line-height:1.6;margin-top:10px}
 .hero>.portal-base{padding-bottom:34px}
 .hero-actions .button,.direction-cta.button{font-size:14px;min-height:51px;padding:14px 21px}
 .hero-meta{font-size:12px;max-width:350px;gap:7px 12px}.hero-meta li+li:before{margin-right:12px}
 .direction-art{height:245px}.direction-deliverables{margin-bottom:23px}
 .section-label{font-size:12px;letter-spacing:1px}
 .works{padding-top:23px}.node-canvas:before{inset:8px}
}

/* Accessible title stays available to readers without flashing before canvas. */
.hero-stage>.stage-fallback{position:absolute!important;inset:auto!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;filter:none!important}
.hero-stage.scene-unavailable>.stage-fallback{inset:0!important;width:auto!important;height:auto!important;clip-path:none;white-space:normal}
@media(forced-colors:active){.hero-stage>.stage-fallback{inset:0!important;width:auto!important;height:auto!important;clip-path:none;white-space:normal;color:CanvasText!important}}