:root{color-scheme:dark;--paper:#f3f3e9;--acid:#d6f85b;--midnight:#070e30}
*{box-sizing:border-box}body{margin:0;background:var(--midnight);color:var(--paper);font-family:Arial,Helvetica,sans-serif}button,a,input{ -webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--acid);outline-offset:6px}main{min-height:100svh;overflow:clip;background:radial-gradient(ellipse at 65% 40%,#183eae 0%,#102269 40%,#070e30 80%);position:relative}main:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:80px 80px}main:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}header,footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:0 4vw}header{height:105px;border-bottom:1px solid #ffffff20}.wordmark{font-size:36px;font-weight:800;letter-spacing:-2px;text-decoration:none}.wordmark span{font-size:12px;vertical-align:top;letter-spacing:0;margin-left:5px}.edition,.eyebrow,footer,.project-label>span{font-size:10px;letter-spacing:1.7px}header button{border:1px solid #ffffff35;border-radius:30px;padding:12px 18px;background:transparent;font-size:12px}header button span{margin-left:16px}.hero{display:grid;grid-template-columns:42% 58%;min-height:calc(100svh - 171px);align-items:center;position:relative}.intro{padding:55px 0 60px 4vw;z-index:2}.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:32px}.eyebrow i{width:6px;height:6px;background:var(--acid);border-radius:50%}h1{font-size:clamp(46px,5.5vw,90px);letter-spacing:-.07em;line-height:1.02;font-weight:600;margin:0}h1 em{font-style:normal;color:var(--acid)}.description{font-size:14px;color:#bdc8eb;line-height:1.7;margin:30px 0}.cta{background:var(--acid);color:#15210a;border:0;border-radius:30px;padding:16px 24px;font-size:13px}.cta span{margin-left:36px}.stage{position:relative;width:100%;align-self:stretch;min-height:580px;touch-action:pan-y}.scene{position:absolute;inset:0;perspective:1100px;isolation:isolate;--hero-x:37;--hero-y:52;--hero-size:81;--screen-x:77;--screen-y:39;--screen-size:54;--angle:-19;--crt-x:15;--crt-y:28;--crt-size:23;--cursor-x:0px;--cursor-y:0px;--approach-x:0px;--approach-y:0px}.layer{position:absolute;transform:translate(-50%,-50%);}.layer img{display:block;width:100%;height:auto;user-select:none}.character{left:calc(var(--hero-x)*1%);top:calc(var(--hero-y)*1%);width:calc(var(--hero-size)*1%);z-index:1;pointer-events:none}.screen-position{left:calc(var(--screen-x)*1%);top:calc(var(--screen-y)*1%);width:calc(var(--screen-size)*1%);z-index:2;transform:translate(-50%,-50%) translate(var(--approach-x),var(--approach-y));transition:transform .65s cubic-bezier(.2,.8,.2,1)}.screen{display:block;width:100%;padding:0;border:0;background:transparent;transform:translate(var(--cursor-x),var(--cursor-y)) rotateY(calc(var(--angle)*1deg)) rotateZ(-5deg);transition:transform .65s,filter .65s;animation:float 6s ease-in-out infinite}.screen img{width:100%;height:auto}.screen-position.active .screen{filter:drop-shadow(0 12px 28px #04092380);transform:translate(var(--cursor-x),var(--cursor-y)) rotateY(calc(var(--angle)*.6deg)) rotateZ(-2deg) scale(1.035)}.sidekick{left:calc(var(--crt-x)*1%);top:calc(var(--crt-y)*1%);width:calc(var(--crt-size)*1%);z-index:3}.sidekick img{animation:bob 5s ease-in-out infinite}.project-label{position:absolute;right:8%;bottom:8%;z-index:3}.project-label>span{color:#a6b4dd;display:block;margin-bottom:10px}.project-label strong{font-size:18px;font-weight:400}.project-label strong span{color:var(--acid);margin-left:20px}footer{height:66px;border-top:1px solid #ffffff20;color:#a6b4dd;font-size:9px;letter-spacing:1px}.still .screen,.still .sidekick img{animation:none}.still .screen,.still .screen-position{transition:none}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -7px}}@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}[hidden]{display:none!important}aside{position:fixed;z-index:10;right:18px;top:20px;bottom:20px;width:min(350px,calc(100vw - 36px));background:#101831f5;backdrop-filter:blur(20px);border:1px solid #ffffff25;border-radius:18px;padding:22px;overflow-y:auto;box-shadow:0 30px 100px #0008}.panel-heading{display:flex;align-items:center;justify-content:space-between}h2{font-size:21px;margin:0}.panel-heading button{border:0;background:none;font-size:27px}aside p{font-size:12px;line-height:1.6;color:#afbdd8}aside label{display:block;font-size:12px;margin:17px 0}aside output{float:right;color:var(--acid)}input[type=range]{display:block;width:100%;accent-color:var(--acid);margin-top:10px}input[type=file]{display:block;width:100%;font-size:10px;margin-top:8px}.toggle{display:flex;align-items:center;gap:8px}.panel-actions{display:flex;gap:8px;margin-top:20px}.panel-actions button{border:1px solid #ffffff25;border-radius:8px;background:#ffffff08;padding:10px;font-size:11px}summary{font-size:13px;cursor:pointer;margin-top:25px}.note{border-top:1px solid #ffffff20;padding-top:15px}
@media(min-width:1500px){.hero{max-width:1800px;margin:auto}}
@media(max-width:760px){header{height:78px;margin:0 6vw}.wordmark{font-size:29px}.edition{display:none}header button{font-size:11px;padding:10px 13px}.hero{display:flex;flex-direction:column;min-height:0}.intro{align-self:flex-start;padding:38px 6vw 0}.eyebrow{font-size:8px;margin-bottom:22px}h1{font-size:clamp(42px,11vw,70px)}.description{font-size:12px;margin:20px 0}.cta{padding:13px 20px;font-size:12px}.stage{min-height:0;height:112vw;max-height:670px;margin-top:8px;align-self:auto}.project-label{right:6%;bottom:6%}.project-label>span{font-size:8px}.project-label strong{font-size:15px}footer{margin:0 6vw;height:72px;gap:12px;flex-wrap:wrap;padding:15px 0;font-size:8px}footer span:nth-child(2){order:3;width:100%;font-size:9px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Independent project objects: touch-first layout, subtle physical depth. */
.aje-position{left:calc(var(--aje-x)*1%);top:calc(var(--aje-y)*1%);width:calc(var(--aje-size)*1%);z-index:2}.screen-position{z-index:3}.aje-screen{transform:rotateY(-12deg) rotateZ(4deg);animation-delay:-2s}.screen-caption{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:8px 12px;background:#0b163bd9;border:1px solid #ffffff24;border-radius:10px;font-size:12px;letter-spacing:.3px}.screen-caption b{color:var(--acid);font-size:19px}.screen:hover,.screen:focus-visible{filter:drop-shadow(0 8px 16px #0005)}.project-label{bottom:3%;right:7%}.character img{width:100%}dialog{width:min(900px,92vw);max-height:90svh;overflow:auto;border:1px solid #ffffff30;border-radius:20px;padding:24px;background:#0d1734;color:var(--paper)}dialog::backdrop{background:#03071cbf;backdrop-filter:blur(8px)}body:has(dialog[open]){overflow:hidden}.project-heading{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2px}.project-heading button{height:44px;width:44px;background:#ffffff0b;border:1px solid #ffffff25;border-radius:50%;font-size:26px}dialog h2{margin:10px 0 20px;font-size:28px}dialog img{width:100%;height:auto;display:block}dialog p{color:#b6c3df;font-size:13px;line-height:1.6}
@media(max-width:760px){.intro{padding-top:26px}h1{font-size:clamp(39px,10vw,64px)}.description{margin:15px 0}.stage{height:125vw;min-height:400px;max-height:700px;margin-top:12px}.scene{perspective:1400px}.screen{animation:none;transition:none;transform:rotateY(8deg) rotateZ(-3deg)}.aje-screen{transform:rotateY(-7deg) rotateZ(3deg)}.screen-caption{font-size:11px;padding:8px;min-height:44px}.screen-position{transform:translate(-50%,-50%)}.project-label{bottom:2%;right:6%}.project-label strong{font-size:13px}dialog{padding:16px;border-radius:16px}dialog h2{font-size:24px}.cta{min-height:44px}header button{min-height:44px}}

.case-content{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:24px 0}.case-content h3{font-size:17px;font-weight:500}.project-heading{position:sticky;top:0;background:#0d1734;z-index:1;padding-bottom:8px}dialog>.cta{margin:12px 0 20px}
@media(max-width:760px){dialog{width:100%;height:100svh;max-width:100%;max-height:100svh;margin:0;border:0;border-radius:0;padding:18px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}.case-content{grid-template-columns:1fr;gap:8px;padding:12px 0}.case-content h3{margin-bottom:6px}.case-content p{margin-top:6px}}

/* The selected project owns the foreground; both remain reachable. */
.screen-position,.aje-position{transition:transform .65s cubic-bezier(.2,.8,.2,1);transform:translate(-50%,-50%)}
.screen,.aje-screen{transition:transform .65s cubic-bezier(.2,.8,.2,1);filter:none!important}
.screen img{filter:drop-shadow(0 0 2px #c9eaffc0) drop-shadow(0 0 7px #6a9fff90) drop-shadow(0 10px 20px #050b3280);transition:filter .65s}
.scene[data-front=eclat] .screen-position{z-index:4}
.scene[data-front=eclat] .screen-position .screen{transform:translate(var(--cursor-x),var(--cursor-y)) rotateY(12deg) rotateZ(-4deg) scale(1.04)}
.scene[data-front=eclat] .aje-position{z-index:2}
.scene[data-front=eclat] .aje-screen{transform:rotateY(-16deg) rotateZ(5deg) scale(.87)}
.scene[data-front=aje] .aje-position{z-index:4}
.scene[data-front=aje] .aje-screen{transform:translate(var(--cursor-x),var(--cursor-y)) rotateY(-7deg) rotateZ(1deg) scale(1.16)}
.scene[data-front=aje] .screen-position{z-index:2}
.scene[data-front=aje] .screen-position .screen{transform:rotateY(21deg) rotateZ(-6deg) scale(.86)}
.scene[data-front=eclat] .aje-screen img,.scene[data-front=aje] #screen img{filter:drop-shadow(0 0 1px #c9eaff80) drop-shadow(0 0 4px #6a9fff50) drop-shadow(0 8px 15px #050b3260)}
.scene[data-front=aje] .aje-screen .screen-caption,.scene[data-front=eclat] #screen .screen-caption{border-color:#b4d9ff80;background:#152a5ee6}
.still .screen-position,.still .aje-position,.still .screen,.still .screen img{transition:none}
@media(max-width:760px){.scene[data-front=eclat] .screen-position .screen{transform:rotateY(5deg) rotateZ(-3deg) scale(1.03)}.scene[data-front=eclat] .aje-screen{transform:rotateY(-8deg) rotateZ(3deg) scale(.92)}.scene[data-front=aje] .aje-screen{transform:rotateY(-4deg) rotateZ(1deg) scale(1.06)}.scene[data-front=aje] .screen-position .screen{transform:rotateY(9deg) rotateZ(-4deg) scale(.92)}}

/* The character introduces and opens the selected project. */
.character{transform:translate(-50%,-50%);transition:transform .8s cubic-bezier(.2,.8,.2,1);transform-origin:50% 85%}
.scene[data-front=eclat] .character{transform:translate(-50%,-50%) rotate(-1deg)}
.scene[data-front=aje] .character{transform:translate(-49%,-49%) rotate(1deg)}
.character-invite{position:absolute;right:4%;bottom:11%;z-index:5;max-width:240px;padding:14px 16px;background:#0a153cd9;border:1px solid #ffffff24;border-radius:16px;box-shadow:0 8px 30px #020a2826}.character-invite>span{display:block;font-size:10px;color:#aebde1;margin-bottom:8px;letter-spacing:.3px}.character-invite button{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:44px;padding:0;border:0;background:transparent;color:var(--paper);font-size:14px}.character-invite button span{color:var(--acid);font-size:20px}.project-label{display:none}.still .character{transition:none;transform:translate(-50%,-50%)!important}
@media(max-width:760px){.character-invite{right:6%;bottom:0;max-width:230px;padding:9px 13px}.character-invite>span{font-size:9px;margin-bottom:2px}.character-invite button{font-size:12px}.stage{margin-bottom:20px}}

/* Cutout cast: no embedded blue rectangle; mobile prioritizes projects. */
#cast{display:block;width:100%;margin-top:9px;border:1px solid #ffffff30;background:#15203e;color:var(--paper);border-radius:8px;padding:12px;font:inherit}.sidekick{pointer-events:none;transition:transform .7s ease}.scene[data-front=eclat] .sidekick{transform:translate(-50%,-50%) rotate(-3deg)}.scene[data-front=aje] .sidekick{transform:translate(-56%,-46%) rotate(3deg)}.still .sidekick{transition:none}.scene[data-cast=solo] .screen-position{left:42%;top:34%;width:60%}.scene[data-cast=solo] .aje-position{left:55%;top:65%;width:44%}.scene[data-cast=solo] .sidekick{left:83%;top:26%;width:22%}.scene[data-cast=solo] .character-invite{right:5%;bottom:5%}
@media(max-width:760px){.scene[data-cast=solo] .screen-position{left:40%;top:33%;width:66%}.scene[data-cast=solo] .aje-position{left:55%;top:65%;width:55%}.scene[data-cast=solo] .sidekick{left:83%;top:17%;width:22%}.scene[data-cast=solo] .character-invite{bottom:0;right:6%}.scene[data-cast=duo] .character-invite{bottom:0}}

/* Shared exported backgrounds: use these same PNGs in the mockup. */
main{background:#050c16}main:before,main:after{display:none}.hero-shell{background:#070e30 url('assets/hero-background-desktop.webp') center/cover no-repeat}.selected-projects{position:relative;z-index:2;padding:36px 4vw 46px;background:#050c16;border-top:1px solid #ffffff1c}.projects-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.projects-heading h2{display:flex;align-items:center;gap:20px;font-size:11px;font-weight:400;letter-spacing:1.8px;text-transform:uppercase}.projects-heading h2 span{color:#9bacbf}.projects-heading h2:after{content:'';height:1px;width:110px;background:#ffffff65}.projects-count{font-size:11px;color:#bdc8d5}.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.project-card{position:relative;width:100%;min-width:0;aspect-ratio:2.5;border:1px solid #ffffff32;border-radius:7px;overflow:hidden;padding:0;background:#0c1630;text-align:left}.card-art{position:absolute;inset:0;overflow:hidden}.card-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.project-card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 20%,#030811df)}.card-number{position:absolute;top:18px;left:20px;font-size:10px;letter-spacing:2px;z-index:1}.card-info{position:absolute;bottom:20px;left:22px;z-index:1;display:grid;gap:7px}.card-info strong{font-size:clamp(18px,2vw,28px);font-weight:500}.card-info>span{font-size:12px;color:#d0d8e4}.card-arrow{position:absolute;bottom:20px;right:22px;z-index:1;border:1px solid #ffffffb0;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:22px}.project-card:hover .card-art img,.project-card:focus-visible .card-art img{transform:scale(1.035)}.project-card:hover .card-arrow{background:#ffffff15}
@media(max-width:760px){.hero-shell{background-image:url('assets/hero-background-mobile.webp')}.selected-projects{padding:28px 6vw 32px}.projects-heading{align-items:flex-start;margin-bottom:18px}.projects-heading h2{font-size:9px;gap:8px;line-height:1.6;flex-wrap:wrap}.projects-heading h2:after{display:none}.projects-count{font-size:9px;max-width:95px;text-align:right;line-height:1.6}.projects-grid{grid-template-columns:1fr;gap:12px}.project-card{aspect-ratio:2.3}.card-info{bottom:16px;left:16px}.card-info strong{font-size:20px}.card-info>span{font-size:11px}.card-number{top:14px;left:16px;font-size:9px}.card-arrow{right:16px;bottom:16px}}

/* JD landscape theme: original desktop/mobile images with frosted controls. */
:root{--acid:#dceaff}
.hero-shell{background-image:url('assets/hero-landscape-desktop.webp');background-position:center;position:relative;color:#152c3b;isolation:isolate}
.hero-shell:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#eaf3f8b8 0%,#eef6fc70 28%,#ffffff08 58%,transparent 80%)}
.hero-shell header{border-bottom-color:#17344930}.hero-shell header button{color:#153044;border-color:#ffffffa0;background:#ffffff40;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #ffffffb0,0 6px 20px #233f4e10}.hero-shell .description{color:#234457}.hero-shell h1 em{color:#245575}.hero-shell .eyebrow i{background:#315e70}.hero-shell .edition{color:#203c4d}
.cta{color:#183447;background:linear-gradient(135deg,#ffffffa8,#ffffff54);border:1px solid #ffffffc0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffffd0,0 8px 24px #25465a1c;transition:background .25s,box-shadow .25s}.cta:hover{background:linear-gradient(135deg,#ffffffcc,#ffffff80);box-shadow:inset 0 1px 0 #fff,0 10px 28px #25465a26}.hero-shell button:focus-visible,.hero-shell a:focus-visible{outline-color:#173e5d}
.hero-shell .screen-caption{color:#153044;background:#ffffff70;border-color:#ffffffb0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffffb0,0 4px 14px #29495620}.hero-shell .screen-caption b{color:#234e68}.hero-shell .scene[data-front=aje] .aje-screen .screen-caption,.hero-shell .scene[data-front=eclat] #screen .screen-caption{background:#ffffffa0;border-color:#ffffffe0}
.hero-shell .character-invite{background:#ffffff85;border-color:#ffffffc0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffffc0,0 8px 28px #29495625}.hero-shell .character-invite>span{color:#2b4b60}.hero-shell .character-invite button{color:#153044}.hero-shell .character-invite button span{color:#234e68}
dialog>.cta{background:#ffffff18;color:#eef5ff;border-color:#ffffff45;box-shadow:inset 0 1px 0 #ffffff28}.panel-actions button{background:#ffffff0c;backdrop-filter:blur(12px)}
@supports not (backdrop-filter:blur(1px)){.hero-shell .screen-caption,.hero-shell .character-invite,.hero-shell header button,.hero-shell .cta{background:#eaf2f1ed}}
@media(max-width:760px){.hero-shell{background-image:url('assets/hero-landscape-mobile.webp');background-position:center top}.hero-shell:before{background:linear-gradient(180deg,#eaf4fbbd 0%,#eef6fb90 29%,#ffffff18 50%,transparent 73%)}.hero-shell h1{color:#163344}.hero-shell .description{color:#27495d}.hero-shell .screen-caption{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}

/* Selected projects continues the soft landscape palette. */
.selected-projects{color:#183447;background:radial-gradient(ellipse at 85% 0%,#e1eaf2 0%,transparent 65%),linear-gradient(135deg,#f6f3e9,#eaf1ec);border-top:1px solid #ffffffb0}.projects-heading h2 span{color:#4d6874}.projects-heading h2:after{background:#31576a60}.projects-count{color:#34566a}.selected-projects button:focus-visible{outline-color:#173e5d}.project-card{background:#ffffff50;border-color:#ffffffd9;box-shadow:inset 0 1px 0 #fff,0 8px 24px #29495612;color:#f7f9fb;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.project-card:after{background:linear-gradient(180deg,#071a241a 0%,transparent 20%,#071a24dc 100%)}.card-arrow{background:#ffffff16;border-color:#ffffffa0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #ffffff40}.project-card:hover .card-arrow{background:#ffffff32}.card-info>span{color:#edf2f4}.card-number{text-shadow:0 1px 5px #041321}
footer{color:#38586b;border-top-color:#34566a25}main{background:#eaf1ec}

/* Landscape fades into the shared project-section surface. */
.hero-shell:after{content:'';position:absolute;inset:auto 0 0;height:clamp(100px,16vw,240px);background:linear-gradient(180deg,#edf1ec00 0%,#edf1ec24 25%,#edf1ec94 66%,#edf1ec 100%);pointer-events:none;z-index:-1}.selected-projects{border-top:0;background:linear-gradient(180deg,#edf1ec 0%,#f0f2ec 35%,#eaf1ec 100%)}
@media(max-width:760px){.hero-shell:after{height:150px;background:linear-gradient(180deg,#edf1ec00,#edf1ec70 50%,#edf1ec 100%)}}

/* Services: editorial typography on the continuous pale surface. */
.services{position:relative;padding:38px 4vw 76px;background:linear-gradient(180deg,#eaf1ec,#f3f1e8);color:#183447}.services-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:26px;border-top:1px solid #29495630;margin-bottom:42px}.services-heading h2{display:flex;align-items:center;gap:20px;font-size:11px;font-weight:400;letter-spacing:1.8px;text-transform:uppercase}.services-heading h2 span{color:#4d6874}.services-heading h2:after{content:'';height:1px;width:110px;background:#31576a60}.services-heading>p{font-size:12px;color:#34566a;margin:0}.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.service{padding:0 32px 8px;border-left:1px solid #29495630}.service:first-child{padding-left:0;border-left:0}.service:last-child{padding-right:0}.service-index{display:block;font-size:10px;color:#597482;letter-spacing:1.5px;margin-bottom:23px}.service h3{font-size:clamp(24px,2.6vw,42px);font-weight:500;line-height:1.12;letter-spacing:-1.2px;margin:0 0 20px}.service p{font-size:14px;line-height:1.75;max-width:33ch;color:#3b5967;margin:0}.services+footer{background:#f3f1e8}main{background:#f3f1e8}
@media(max-width:760px){.services{padding:24px 6vw 48px}.services-heading{padding-top:22px;margin-bottom:26px;align-items:flex-start}.services-heading h2{gap:8px;font-size:9px}.services-heading h2:after{width:40px}.services-heading>p{font-size:11px;max-width:120px;text-align:right;line-height:1.5}.services-grid{grid-template-columns:1fr}.service,.service:first-child,.service:last-child{padding:25px 0 28px;border-left:0;border-top:1px solid #29495625}.service:first-child{border-top:0;padding-top:0}.service:last-child{padding-bottom:0}.service-index{margin-bottom:14px}.service h3{font-size:32px;letter-spacing:-1px;margin-bottom:14px}.service p{font-size:13px;line-height:1.7;max-width:39ch}}

/* Secondary projects: editorial image slots, ready for final key art. */
.more-projects{background:linear-gradient(180deg,#f3f1e8,#eaf0ee);color:#183447;padding:28px 4vw 80px}.more-heading{display:flex;justify-content:space-between;align-items:flex-start;border-top:1px solid #29495630;padding-top:26px;margin-bottom:38px;gap:24px}.more-heading h2{display:flex;align-items:center;gap:20px;font-size:11px;font-weight:400;letter-spacing:1.8px;text-transform:uppercase}.more-heading h2 span{color:#4d6874}.more-heading h2:after{content:'';height:1px;width:110px;background:#31576a60}.more-heading>p{margin:0;font-size:14px;line-height:1.5;color:#34566a}.editorial-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:54px 28px;align-items:start}.editorial-project{min-width:0}.midas{grid-column:1/8}.motion{grid-column:9/13;margin-top:100px}.woven{grid-column:1/6;margin-top:10px}.streetwear{grid-column:7/13;margin-top:75px}.art-slot{position:relative;overflow:hidden;aspect-ratio:1.5;border:1px solid #ffffffb0;border-radius:8px;background:linear-gradient(135deg,#d5e1e5,#e7eeea);box-shadow:inset 0 1px 0 #ffffffb0}.art-slot:before{content:'';position:absolute;inset:18px;border:1px solid #34566a18;pointer-events:none}.motion .art-slot{aspect-ratio:.85;background:linear-gradient(145deg,#dae1e5,#c7d4dc)}.woven .art-slot{aspect-ratio:1.05;background:linear-gradient(130deg,#ebe4d6,#e2e7dc)}.streetwear .art-slot{aspect-ratio:1.4;background:linear-gradient(140deg,#c9d7d2,#e1e8e1)}.slot-number{position:absolute;top:30px;left:30px;font-size:9px;letter-spacing:1.4px;color:#4b6572}.slot-note{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;letter-spacing:2px;color:#546e79;white-space:nowrap}.editorial-caption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:16px}.editorial-caption h3{font-weight:500;font-size:23px;letter-spacing:-.7px;margin:0}.editorial-caption>span{color:#4c6876;font-size:11px;text-align:right}.art-slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.art-slot:has(>img) .slot-note,.art-slot:has(>img) .slot-number{display:none}.more-projects+footer{background:#eaf0ee}main{background:#eaf0ee}
@media(max-width:760px){.more-projects{padding:22px 6vw 48px}.more-heading{padding-top:22px;margin-bottom:26px}.more-heading h2{font-size:9px;gap:8px}.more-heading h2:after{display:none}.more-heading>p{font-size:11px;text-align:right}.editorial-grid{grid-template-columns:minmax(0,1fr);gap:30px}.midas,.motion,.woven,.streetwear{grid-column:1;margin-top:0}.midas .art-slot,.streetwear .art-slot{aspect-ratio:1.3}.motion .art-slot,.woven .art-slot{aspect-ratio:1.1}.editorial-caption{padding-top:12px}.editorial-caption h3{font-size:21px}.editorial-caption>span{font-size:10px}.slot-number{top:26px;left:26px}}

/* Lab: a looser pastel rhythm, simple linear reading on phones. */
.lab{position:relative;background:radial-gradient(ellipse at 10% 50%,#dce7ef90,transparent 60%),linear-gradient(180deg,#eaf0ee,#eeeaf0);color:#183447;padding:32px 4vw 64px}.lab-heading{border-top:1px solid #29495630;padding-top:28px;margin-bottom:38px;max-width:760px}.lab-marker{font-size:10px;letter-spacing:1.8px;color:#4d6874;margin:0 0 24px}.lab-heading h2{font-size:clamp(38px,5vw,72px);letter-spacing:-2.5px;font-weight:500;line-height:1.05;margin:0 0 22px}.lab-heading h2 span{color:#607887}.lab-intro{font-size:15px;line-height:1.7;color:#3b5967;margin:0;max-width:55ch}.lab-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:start}.lab-item{border:1px solid #ffffffe0;border-radius:20px;padding:30px;background:#ffffff60;box-shadow:inset 0 1px 0 #ffffffd0,0 8px 32px #29495608;min-width:0}.lab-images{grid-column:1/8;background:linear-gradient(140deg,#e4ecf3d9,#f5eff1a0);transform:rotate(-.6deg)}.lab-content{grid-column:8/13;margin-top:44px;background:linear-gradient(135deg,#f2e7ddd9,#f7efe6a0);transform:rotate(.7deg)}.lab-interaction{grid-column:1/7;margin-left:26px;background:linear-gradient(135deg,#e1ece6d9,#edf2e6a0);transform:rotate(.4deg)}.lab-volume{grid-column:7/13;margin-top:34px;background:linear-gradient(135deg,#e7e2f0d9,#f0e9f3a0);transform:rotate(-.5deg)}.lab-index{display:block;font-size:9px;letter-spacing:1.6px;color:#4d6874;margin-bottom:38px}.lab-item h3{font-size:clamp(25px,3vw,43px);line-height:1.08;font-weight:500;letter-spacing:-1.3px;margin:0 0 18px}.lab-item>p{font-size:13px;line-height:1.7;color:#3b5967;max-width:43ch;margin:0 0 26px}.lab-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}.lab-tags li{font-size:10px;line-height:1.5;border:1px solid #ffffffb0;border-radius:20px;padding:7px 11px;background:#ffffff45;color:#34566a}.lab-footnote{margin:38px 0 0;color:#597482;font-size:11px}.lab+footer{background:#eeeaf0}main{background:#eeeaf0}
@media(max-width:760px){.lab{padding:22px 6vw 44px}.lab-heading{padding-top:22px;margin-bottom:26px}.lab-marker{font-size:9px;margin-bottom:20px}.lab-heading h2{font-size:38px;letter-spacing:-1.8px}.lab-intro{font-size:13px}.lab-grid{grid-template-columns:minmax(0,1fr);gap:14px}.lab-item,.lab-images,.lab-content,.lab-interaction,.lab-volume{grid-column:1;margin:0;transform:none;padding:24px;border-radius:16px}.lab-index{margin-bottom:24px}.lab-item h3{font-size:29px;letter-spacing:-.9px}.lab-item>p{font-size:12px;line-height:1.7;margin-bottom:20px;max-width:none}.lab-tags{gap:6px}.lab-tags li{font-size:10px;padding:6px 9px}.lab-footnote{margin-top:24px}}

/* About lives on the homepage, with the supplied portrait intact. */
.about{background:linear-gradient(180deg,#eeeaf0,#eef0e9);color:#183447;padding:32px 4vw 80px}.about-marker{margin:0 0 38px;padding-top:28px;border-top:1px solid #29495630;font-size:10px;letter-spacing:1.8px;color:#4d6874}.about-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,100px);align-items:center}.about-portrait{margin:0;max-width:450px;justify-self:center;width:100%;padding:10px;background:#ffffff60;border:1px solid #ffffffe0;border-radius:20px;box-shadow:inset 0 1px 0 #fff,0 16px 45px #29495614}.about-portrait img{display:block;width:100%;height:auto;border-radius:12px}.about-portrait figcaption{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 8px 7px}.about-portrait figcaption>span:first-child{font-size:20px;font-weight:600;letter-spacing:-.8px}.about-portrait figcaption>span:last-child{font-size:9px;color:#456171;text-align:right;line-height:1.5}.about-copy{max-width:680px}.about-copy h2{font-size:clamp(31px,3.5vw,54px);line-height:1.08;letter-spacing:-1.8px;font-weight:500;margin:0 0 28px}.about-copy h2 span{color:#607887}.about-copy>p{font-size:15px;line-height:1.8;max-width:57ch;color:#345362;margin:0 0 20px}.about-exploration{margin-top:28px;padding:22px 24px;background:#ffffff50;border:1px solid #ffffffc0;border-radius:16px}.about-note-label{font-size:9px;letter-spacing:1.5px;color:#4d6874}.about-exploration p{font-size:13px;line-height:1.75;color:#3b5967;margin:12px 0 16px}.about-exploration a{display:inline-flex;align-items:center;gap:20px;min-height:44px;color:#183447;text-decoration:none;font-size:12px;border-bottom:1px solid #34566a40}.about a:focus-visible{outline-color:#173e5d}.about+footer{background:#eef0e9}main{background:#eef0e9}
@media(max-width:760px){.about{padding:22px 6vw 44px}.about-marker{padding-top:22px;margin-bottom:26px;font-size:9px}.about-layout{grid-template-columns:minmax(0,1fr);gap:28px}.about-portrait{max-width:310px;padding:8px;border-radius:16px}.about-portrait img{border-radius:10px}.about-portrait figcaption{padding:12px 5px 5px}.about-portrait figcaption>span:last-child{font-size:8px}.about-copy h2{font-size:32px;letter-spacing:-1.1px;margin-bottom:22px}.about-copy>p{font-size:13px;line-height:1.8}.about-exploration{padding:20px;margin-top:24px}.about-exploration p{font-size:12px}}

/* Supplied transparent avatar sits directly on the About surface. */
#about-style{display:block;width:100%;margin-top:9px;border:1px solid #ffffff30;background:#15203e;color:var(--paper);border-radius:8px;padding:12px;font:inherit}.about[data-portrait=cutout] .about-portrait{position:relative;max-width:490px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate}.about[data-portrait=cutout] .about-portrait:before{content:'';position:absolute;z-index:-1;left:15%;right:12%;bottom:7%;height:4%;background:#233f4e20;border-radius:50%;filter:blur(12px)}.about[data-portrait=cutout] .about-portrait img{border-radius:0}.about[data-portrait=cutout] .about-portrait figcaption{padding:10px 28px 0}.about[data-portrait=cutout] .about-layout{align-items:center}
@media(max-width:760px){.about[data-portrait=cutout] .about-portrait{max-width:300px}.about[data-portrait=cutout] .about-portrait figcaption{padding:8px 16px 0}.about[data-portrait=cutout] .about-layout{gap:28px}}

/* Contact: a quiet final invitation, with email as the primary action. */
.contact{background:linear-gradient(180deg,#eef0e9,#edf1ef);color:#183447;padding:32px 4vw 72px}.contact-marker{border-top:1px solid #29495630;padding-top:28px;margin:0 0 42px;font-size:10px;letter-spacing:1.8px;color:#4d6874}.contact h2{font-size:clamp(42px,6vw,92px);line-height:1.04;font-weight:500;letter-spacing:-.055em;margin:0 0 26px;max-width:1000px}.contact h2 span{color:#607887}.contact-intro{font-size:15px;line-height:1.7;max-width:54ch;margin:0 0 34px;color:#3b5967}.contact-email{display:inline-block;color:#183447;text-decoration:none;border-bottom:1px solid #31576a70;padding:0 0 10px;font-size:clamp(22px,3.5vw,52px);letter-spacing:-.035em;line-height:1.3;overflow-wrap:anywhere;max-width:100%;transition:color .2s,border-color .2s}.contact-email:hover{color:#50788e;border-color:#50788e}.contact a:focus-visible{outline-color:#173e5d}.contact-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:46px}.availability{display:flex;align-items:center;gap:10px;font-size:11px;color:#456171;margin:0}.availability>span{flex:0 0 6px;height:6px;border-radius:50%;background:#597f70}.contact-socials{display:flex;gap:28px;font-size:12px;color:#34566a}.contact-socials a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:inherit}.social-pending{display:inline-flex;align-items:center;min-height:44px;color:#647883}.contact+footer{background:#edf1ef}main{background:#edf1ef}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:760px){.contact{padding:22px 6vw 44px}.contact-marker{padding-top:22px;font-size:9px;margin-bottom:32px}.contact h2{font-size:clamp(36px,9.7vw,60px);margin-bottom:22px}.contact-intro{font-size:13px;margin-bottom:28px}.contact-email{font-size:clamp(21px,6.4vw,32px);padding-bottom:9px}.contact-bottom{flex-direction:column;align-items:flex-start;gap:14px;margin-top:30px}.availability{font-size:10px}.contact-socials{gap:26px;font-size:12px}footer{flex-wrap:nowrap}footer span:first-child{max-width:70%;line-height:1.6}footer span:last-child{white-space:nowrap}}

/* Minimal footer, reusing the original Hero landscape. */
.contact+.site-footer{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0;padding:54px 4vw 36px;min-height:180px;height:auto;border:0;background:#dce9e8 url('assets/hero-landscape-desktop.webp') center 72%/cover no-repeat;color:#183447;letter-spacing:0}.site-footer:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#edf1ef 0%,#edf1efb8 35%,#edf1ef8c 100%)}.footer-identity{display:grid;gap:12px}.site-footer .footer-logo{font-size:34px;font-weight:700;letter-spacing:-1.8px;max-width:none}.site-footer .footer-description{font-size:12px;line-height:1.6;color:#34566a}.site-footer .footer-copyright{font-size:11px;white-space:nowrap}
@media(max-width:760px){.contact+.site-footer{background-image:url('assets/hero-landscape-mobile.webp');background-position:center 80%;padding:42px 6vw 28px;min-height:200px;align-items:flex-start;flex-direction:column;gap:24px}.site-footer .footer-identity{max-width:100%}.site-footer .footer-logo{font-size:30px}.site-footer .footer-description{font-size:11px;max-width:30ch}.site-footer .footer-copyright{font-size:10px}}

/* Visual-led case studies, matching JD's pale glass palette. */
#project-dialog{width:100%;max-width:100%;height:100svh;max-height:100svh;margin:0;border:0;border-radius:0;padding:0 4vw 48px;background:linear-gradient(150deg,#edf1ef,#f4f1e9 55%,#eaeaf0);color:#183447;overscroll-behavior:contain}#project-dialog .project-heading{position:sticky;top:0;margin:0 -4vw;padding:16px 4vw;display:flex;gap:20px;background:#edf1efd9;border-bottom:1px solid #ffffffb0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);letter-spacing:0;z-index:4}#project-dialog .project-heading>span{font-size:22px;font-weight:600;letter-spacing:-1px}#project-dialog .project-heading button{color:#183447;background:#ffffff55;border-color:#ffffffc0}#project-dialog .project-heading .case-back{width:auto;min-height:44px;border:0;border-radius:0;background:none;font-size:12px;padding:0}#project-dialog button:focus-visible,#project-title:focus-visible{outline-color:#173e5d}.case-intro{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:8vw;padding:64px 0 48px;max-width:1500px;margin:auto}.case-category{font-size:10px!important;text-transform:uppercase;letter-spacing:1.6px;margin:0 0 18px!important}#project-dialog h2{font-size:clamp(40px,6vw,90px);font-weight:500;letter-spacing:-.06em;line-height:1.05;margin:0 0 26px}#project-dialog .case-intro p{color:#3b5967;font-size:14px;line-height:1.8;max-width:55ch}.case-role{align-self:end;padding-bottom:12px}.case-role>span{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#597482}.case-media{display:grid;gap:24px;max-width:1500px;margin:auto}.case-media-item{overflow:hidden;border-radius:10px;background:#ffffff45;border:1px solid #ffffffa0}.case-media-item img,.case-media-item video{display:block;width:100%;height:auto}.case-placeholder{aspect-ratio:1.75;display:grid;place-items:center;background:linear-gradient(140deg,#dce6e8,#e9ece6)}.case-placeholder span{font-size:11px;color:#5b7380;letter-spacing:.8px}.case-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.case-duo .case-placeholder{aspect-ratio:1.1}.case-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.case-gallery .case-placeholder{aspect-ratio:1}.case-next{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;max-width:1500px;margin:48px auto 0;padding:30px 0;border:0;border-top:1px solid #34566a30;background:none;color:#183447;text-align:left}.case-next>span{font-size:12px}.case-next strong{font-size:clamp(25px,3vw,46px);font-weight:500;letter-spacing:-1px}
@media(max-width:760px){#project-dialog{padding:0 6vw max(28px,env(safe-area-inset-bottom))}#project-dialog .project-heading{margin:0 -6vw;padding:12px 6vw;padding-top:max(12px,env(safe-area-inset-top))}.case-intro{grid-template-columns:minmax(0,1fr);gap:18px;padding:36px 0 28px}#project-dialog h2{font-size:44px;letter-spacing:-2px;margin-bottom:20px}#project-dialog .case-intro p{font-size:13px}.case-role{padding:0}.case-role p{margin:7px 0 0}.case-media{gap:14px}.case-duo,.case-gallery{grid-template-columns:minmax(0,1fr);gap:14px}.case-placeholder{aspect-ratio:1.3}.case-duo .case-placeholder,.case-gallery .case-placeholder{aspect-ratio:1.2}.case-media-item{border-radius:7px}.case-next{margin-top:28px;padding:24px 0;align-items:flex-start;flex-direction:column;gap:12px}.case-next strong{font-size:28px}}

/* Minimal in-page navigation; mobile uses a native disclosure button. */
html{scroll-behavior:smooth;scroll-padding-top:24px}.site-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}.site-nav a{display:inline-flex;align-items:center;min-height:44px;color:#203c4d;font-size:12px;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}.site-nav a:hover{border-bottom-color:#31576a70}.site-nav a:last-child{font-weight:600}.menu-toggle{display:none}.hero-shell header{z-index:8;gap:24px}#settings-toggle{white-space:nowrap}
@media(max-width:760px){.hero-shell header{gap:12px}.hero-shell header .wordmark{margin-right:auto}.menu-toggle{display:inline-flex;align-items:center;gap:10px}.hero-shell header #settings-toggle{font-size:0;width:44px;height:44px;padding:0;display:grid;place-items:center}.hero-shell header #settings-toggle>span{font-size:19px;margin:0}.site-nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);padding:12px 18px;background:#eef5f3f2;border:1px solid #ffffffd0;border-radius:16px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 35px #29495620;flex-direction:column;align-items:stretch;gap:0}.site-nav a{min-height:48px;padding:0 8px;font-size:14px;border-bottom:1px solid #29495618}.site-nav a:last-child{border-bottom:0}header[data-menu=open] .site-nav{display:flex}}

/* Original chrome logo, sized for the header without distortion. */
.hero-shell header .wordmark{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:94px;min-height:44px;line-height:0}.wordmark img{display:block;width:100%;height:auto;max-height:72px;object-fit:contain}
@media(max-width:760px){.hero-shell header .wordmark{width:72px}.wordmark img{max-height:56px}}

/* Reversible editorial typography. Small labels remain sans-serif. */
:root{--font-sans:Arial,Helvetica,sans-serif;--font-editorial:Georgia,'Times New Roman',serif}#typography-style{display:block;width:100%;margin-top:9px;border:1px solid #ffffff30;background:#15203e;color:var(--paper);border-radius:8px;padding:12px;font:inherit}body[data-typography=editorial] .description,body[data-typography=editorial] .service p,body[data-typography=editorial] .lab-intro,body[data-typography=editorial] .lab-item>p,body[data-typography=editorial] .about-copy>p,body[data-typography=editorial] .about-exploration p,body[data-typography=editorial] .contact-intro,body[data-typography=editorial] #project-intro{font-family:var(--font-editorial);font-weight:400;letter-spacing:0;font-size:17px;line-height:1.75}body[data-typography=editorial] .service p,body[data-typography=editorial] .lab-item>p,body[data-typography=editorial] .about-exploration p{font-size:16px}body[data-typography=editorial] #project-dialog #project-intro{font-family:var(--font-editorial);font-size:18px;line-height:1.75}body[data-typography=editorial] .services-heading>p,body[data-typography=editorial] .more-heading>p{font-family:var(--font-editorial);font-size:15px;line-height:1.5}
@media(max-width:760px){body[data-typography=editorial] .description,body[data-typography=editorial] .service p,body[data-typography=editorial] .lab-intro,body[data-typography=editorial] .lab-item>p,body[data-typography=editorial] .about-copy>p,body[data-typography=editorial] .about-exploration p,body[data-typography=editorial] .contact-intro{font-size:16px;line-height:1.7}body[data-typography=editorial] #project-dialog #project-intro{font-size:17px}body[data-typography=editorial] .services-heading>p,body[data-typography=editorial] .more-heading>p{font-size:13px}}

/* MIDAS: real vertical films and a clean logo family. */
.portrait-video{display:grid;place-items:center;background:#dce5e3;padding:24px}.portrait-video video{width:min(100%,380px);aspect-ratio:9/16;object-fit:contain;max-height:76svh;background:#102127;border-radius:8px}.case-duo .portrait-video video{width:min(100%,320px)}.logo-study{display:grid;place-items:center;background:#fff;min-height:200px;padding:34px 22px}.logo-study img{width:100%;height:auto;object-fit:contain}.case-gallery:has(.logo-study){gap:16px}
@media(max-width:760px){.portrait-video{padding:12px}.portrait-video video,.case-duo .portrait-video video{width:100%;max-height:75svh}.logo-study{min-height:170px;padding:30px 24px}}

/* Center the supplied portrait GIF as an animated project key art. */
.motion-art{background:#fafafa!important}.motion-art:before{display:none}.motion-art>img{object-fit:cover;object-position:50% 50%;transform:scale(1.15)}.motion-art .motion-poster{display:none}body.static-motion .motion-art .motion-animated{display:none}body.static-motion .motion-art .motion-poster{display:block}
@media(prefers-reduced-motion:reduce){.motion-art .motion-animated{display:none}.motion-art .motion-poster{display:block}}
@media(max-width:760px){.motion-art>img{transform:scale(1.05)}}

/* Lightweight media gallery, rather than a case study. */
.gallery-trigger{display:block;border:0;padding:0;background:transparent;color:inherit;text-align:left;font:inherit;width:100%}.gallery-trigger .editorial-caption strong{font-weight:500;font-size:23px;letter-spacing:-.7px}.gallery-trigger:focus-visible{outline-color:#173e5d}.gallery-trigger:hover .art-slot{box-shadow:0 8px 24px #29495618}.gallery-trigger .editorial-caption>span{border-bottom:1px solid #34566a40;min-height:32px}#media-gallery{width:min(1050px,94vw);max-width:94vw;max-height:92svh;padding:0 28px 28px;background:#edf1ef;color:#183447;border:1px solid #ffffffc0;border-radius:20px}#media-gallery::backdrop{background:#14283588;backdrop-filter:blur(12px)}.gallery-heading{position:sticky;top:0;z-index:2;background:#edf1efed;backdrop-filter:blur(18px);display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid #34566a25;margin-bottom:22px}.gallery-heading p{font:9px Arial,Helvetica,sans-serif;letter-spacing:1.5px;color:#597482;margin:0 0 8px}.gallery-heading h2{font-size:28px;font-weight:500;letter-spacing:-1px;margin:0}.gallery-heading button{flex-shrink:0;width:44px;height:44px;border:1px solid #ffffffc0;border-radius:50%;background:#ffffff80;color:#183447;font-size:26px}.gallery-heading button:focus-visible{outline-color:#173e5d}.gallery-media-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.gallery-media-list>figure{margin:0;min-width:0}.gallery-media-list>figure:only-child{grid-column:1/-1;width:min(100%,440px);justify-self:center}.gallery-media-list img,.gallery-media-list video{display:block;width:100%;height:auto;max-height:72svh;object-fit:contain;background:#fff;border-radius:10px}.gallery-media-list figcaption{font-size:12px;line-height:1.5;color:#456171;padding-top:12px}body:has(#media-gallery[open]){overflow:hidden}
@media(max-width:760px){.gallery-trigger .editorial-caption strong{font-size:21px}#media-gallery{width:100%;max-width:100%;height:100svh;max-height:100svh;margin:0;border:0;border-radius:0;padding:0 6vw max(24px,env(safe-area-inset-bottom))}.gallery-heading{padding:16px 0;padding-top:max(16px,env(safe-area-inset-top));margin-bottom:18px}.gallery-heading h2{font-size:25px}.gallery-heading p{font-size:8px}.gallery-media-list{grid-template-columns:minmax(0,1fr);gap:28px}.gallery-media-list>figure:only-child{width:100%}.gallery-media-list img,.gallery-media-list video{max-height:75svh;border-radius:7px}}

/* AJE's logo has breathing space; product render backgrounds stay intact. */
.case-media>.logo-study{min-height:320px;padding:64px 24px}.case-media>.logo-study img{width:min(100%,480px)}
@media(max-width:760px){.case-media>.logo-study{min-height:240px;padding:40px 24px}.case-media>.logo-study img{width:min(100%,340px)}}

/* AI / UGC cover: keep the entire original composition and bottle. */
.lab-content:has(.lab-keyart){padding-top:12px}.lab-keyart{margin:0 -18px 26px;border-radius:13px;overflow:hidden;background:#e6e9e6}.lab-keyart img{display:block;width:100%;height:auto;object-fit:contain}.lab-content:has(.lab-keyart) .lab-index{margin-bottom:22px}
@media(max-width:760px){.lab-content:has(.lab-keyart){padding-top:10px}.lab-keyart{margin:0 -14px 24px;border-radius:10px}.lab-keyart img{width:100%;height:auto}}

/* Desktop Lab: balanced row heights with an uncropped compact portrait. */
@media(min-width:761px){.lab-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}.lab-images,.lab-content,.lab-interaction,.lab-volume{grid-column:auto;margin:0;transform:none}.lab-item{display:flex;flex-direction:column}.lab-item .lab-tags{margin-top:auto}.lab-content:has(.lab-keyart){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);column-gap:24px;align-content:center;padding:26px}.lab-content .lab-keyart{grid-column:1;grid-row:1/5;align-self:center;margin:0;border-radius:12px;background:transparent}.lab-content .lab-keyart img{width:100%;height:auto;max-height:290px;object-fit:contain}.lab-content:has(.lab-keyart) .lab-index{grid-column:2;margin-bottom:18px;align-self:end}.lab-content:has(.lab-keyart) h3{grid-column:2;font-size:clamp(23px,2.3vw,34px);margin-bottom:14px}.lab-content:has(.lab-keyart)>p{grid-column:2;margin-bottom:18px;font-size:12px}.lab-content:has(.lab-keyart) .lab-tags{grid-column:2;margin-top:0}}

/* AI / UGC: open the shared gallery from the entire card. */
.lab-content{position:relative}.lab-gallery-open{grid-column:2;justify-self:start;align-self:start;margin-top:18px;padding:8px 0;border:0;border-bottom:1px solid #34566a50;background:transparent;color:#34566a;font:12px Arial,Helvetica,sans-serif;cursor:pointer}.lab-gallery-open::after{content:"";position:absolute;inset:0;border-radius:20px}.lab-content:has(.lab-gallery-open):hover{box-shadow:inset 0 1px 0 #ffffffd0,0 8px 32px #29495618}.lab-content:has(.lab-gallery-open:focus-visible){outline:2px solid #34566a;outline-offset:4px}.lab-gallery-open:focus-visible{outline:none}@media(max-width:760px){.lab-gallery-open::after{border-radius:16px}}

#media-gallery.gallery-single-column .gallery-media-list{grid-template-columns:minmax(0,1fr)}

/* Keep the AI / UGC tag and gallery button compact within the grid. */
.lab-content .lab-tags{align-self:start;align-items:center;justify-self:start}.lab-content .lab-tags li{flex:none;align-self:center;white-space:nowrap}.lab-gallery-open{display:inline-flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;min-height:44px;flex:none;align-self:flex-start;padding:11px 16px;border:1px solid #ffffffc0;border-radius:999px;background:#ffffff65;box-shadow:inset 0 1px 0 #ffffffb0;font-size:12px;line-height:20px;white-space:nowrap}@media(min-width:761px){.lab-content .lab-keyart{grid-row:1/6}.lab-gallery-open{align-self:start}}

.lab-images:has(.lab-keyart){padding-top:12px}@media(min-width:761px){.lab-images:has(.lab-keyart){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);column-gap:24px;align-content:center;padding:26px}.lab-images .lab-keyart{grid-column:1;grid-row:1/5;align-self:center;margin:0;border-radius:12px;background:transparent}.lab-images .lab-keyart img{width:100%;height:auto;max-height:290px;object-fit:contain}.lab-images:has(.lab-keyart) .lab-index{grid-column:2;margin-bottom:18px;align-self:end}.lab-images:has(.lab-keyart) h3{grid-column:2;font-size:clamp(23px,2.3vw,34px);margin-bottom:14px}.lab-images:has(.lab-keyart)>p{grid-column:2;margin-bottom:18px;font-size:12px}.lab-images:has(.lab-keyart) .lab-tags{grid-column:2;margin-top:0;align-self:start;align-items:center}}@media(max-width:760px){.lab-images:has(.lab-keyart){padding-top:10px}}

.lab-images{position:relative}.lab-images:has(.lab-gallery-open):hover{box-shadow:inset 0 1px 0 #ffffffd0,0 8px 32px #29495618}.lab-images:has(.lab-gallery-open:focus-visible){outline:2px solid #34566a;outline-offset:4px}@media(min-width:761px){.lab-images:has(.lab-gallery-open) .lab-keyart{grid-row:1/6}}

.lab-volume:has(.lab-keyart){padding-top:12px}@media(min-width:761px){.lab-volume:has(.lab-keyart){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);column-gap:24px;align-content:center;padding:26px}.lab-volume .lab-keyart{grid-column:1;grid-row:1/5;align-self:center;margin:0;border-radius:12px;background:transparent}.lab-volume .lab-keyart img{width:100%;height:auto;max-height:290px;object-fit:contain}.lab-volume:has(.lab-keyart) .lab-index{grid-column:2;margin-bottom:18px;align-self:end}.lab-volume:has(.lab-keyart) h3{grid-column:2;font-size:clamp(23px,2.3vw,34px);margin-bottom:14px}.lab-volume:has(.lab-keyart)>p{grid-column:2;margin-bottom:18px;font-size:12px}.lab-volume:has(.lab-keyart) .lab-tags{grid-column:2;margin-top:0;align-self:start;align-items:center}}@media(max-width:760px){.lab-volume:has(.lab-keyart){padding-top:10px}}

.lab-volume{position:relative}.lab-volume:has(.lab-gallery-open):hover{box-shadow:inset 0 1px 0 #ffffffd0,0 8px 32px #29495618}.lab-volume:has(.lab-gallery-open:focus-visible){outline:2px solid #34566a;outline-offset:4px}@media(min-width:761px){.lab-volume:has(.lab-gallery-open) .lab-keyart{grid-row:1/6}}

.woven .art-slot{aspect-ratio:3369/4763;background:#0b1b28}.woven .art-slot>img{object-fit:contain}.woven .art-slot:before{display:none}

#media-gallery .gallery-intro{color:#3b5967;font-size:14px;line-height:1.75;max-width:70ch;margin:0 0 28px}

.streetwear .art-slot{aspect-ratio:1;background:#000}.streetwear .art-slot>img{object-fit:contain}.streetwear .art-slot:before{display:none}

.midas .art-slot{aspect-ratio:1050/600}.midas .art-slot>img{object-fit:contain}.midas .art-slot:before{display:none}

/* Lueur: actual game capture and direct access to the playable prototype. */
.lab-interaction{position:relative}.lab-interaction:has(.lab-keyart){padding-top:12px}.lab-interaction h3 small{display:block;font-size:.55em;line-height:1.4;letter-spacing:-.3px;margin-top:8px}.lab-interaction .lab-gallery-open{text-decoration:none}.lab-interaction:has(.lab-gallery-open):hover{box-shadow:inset 0 1px 0 #ffffffd0,0 8px 32px #29495618}.lab-interaction:has(.lab-gallery-open:focus-visible){outline:2px solid #34566a;outline-offset:4px}
@media(min-width:761px){.lab-interaction:has(.lab-keyart){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);column-gap:24px;align-content:center;padding:26px}.lab-interaction .lab-keyart{grid-column:1;grid-row:1/6;align-self:center;margin:0;border-radius:12px;background:#1b2c28}.lab-interaction .lab-keyart img{width:100%;height:auto;max-height:290px;object-fit:contain}.lab-interaction:has(.lab-keyart) .lab-index{grid-column:2;margin-bottom:18px;align-self:end}.lab-interaction:has(.lab-keyart) h3{grid-column:2;font-size:clamp(23px,2.3vw,34px);margin-bottom:14px}.lab-interaction:has(.lab-keyart)>p{grid-column:2;margin-bottom:18px;font-size:12px}.lab-interaction:has(.lab-keyart) .lab-tags{grid-column:2;margin-top:0;align-self:start;align-items:center}}
@media(max-width:760px){.lab-interaction:has(.lab-keyart){padding-top:10px}}

/* Hero promise guides visitors from the creative scene to selected work. */
.hero-shell .intro>.cta{display:inline-flex;align-items:center;text-decoration:none}.hero-shell .description{max-width:42ch}.hero-shell h1{font-size:clamp(40px,4.6vw,76px);letter-spacing:-.055em}.hero-shell .eyebrow{line-height:1.6;flex-wrap:wrap}
@media(max-width:760px){.hero-shell h1{font-size:clamp(35px,8.8vw,62px)}.hero-shell .description{max-width:38ch}}

/* Project headers share the home page chrome logo. */
#project-dialog .project-heading>.case-brand{display:flex;align-items:center;justify-content:center;width:84px;flex-shrink:0;line-height:0}#project-dialog .case-brand img{display:block;width:100%;height:auto;max-height:54px;object-fit:contain}
@media(max-width:760px){#project-dialog .project-heading>.case-brand{width:64px}#project-dialog .case-brand img{max-height:42px}}

/* Footer uses the same original JD logo as the home header. */
.site-footer .footer-logo{display:block;width:94px;line-height:0}.site-footer .footer-logo img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:760px){.site-footer .footer-logo{width:78px}}

/* Chibi card shares the original JD logo. */
.about-portrait figcaption .about-logo{display:block;width:64px;flex-shrink:0;line-height:0}.about-portrait figcaption .about-logo img{display:block;width:100%;height:auto;max-height:42px;object-fit:contain}

/* Concrete services with equal emphasis and a path to collaboration. */
.service{display:flex;flex-direction:column}.service .service-deliverables{margin-top:24px;padding-top:16px;border-top:1px solid #29495625;font:11px/1.8 Arial,Helvetica,sans-serif;color:#456171;max-width:38ch}.services-collaboration{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:46px;padding-top:28px;border-top:1px solid #29495630}.services-collaboration h3{font-size:20px;font-weight:500;line-height:1.35;letter-spacing:-.5px;margin:0 0 12px}.services-collaboration p{font-size:13px;line-height:1.75;color:#3b5967;max-width:65ch;margin:0}.services-collaboration .cta{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none;min-height:44px}.services-collaboration .cta span{margin-left:20px}
@media(max-width:760px){.service .service-deliverables{margin-top:18px;max-width:none}.services-collaboration{flex-direction:column;align-items:flex-start;gap:22px;margin-top:30px;padding-top:24px}.services-collaboration h3{font-size:19px}.services-collaboration p{font-size:12px}}

/* Project context explains the intention before the visual work. */
.case-context{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;padding:28px 0 36px;border-top:1px solid #34566a25}.case-context h3{font-size:18px;font-weight:500;margin:0 0 14px;letter-spacing:-.4px}.case-context p{font-size:14px;line-height:1.8;color:#3b5967;max-width:58ch;margin:0}
@media(max-width:760px){.case-context{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 0 28px}.case-context p{font-size:13px}}

.case-media-caption{font-size:12px;line-height:1.6;color:#456171;margin:0;padding:14px 18px;background:#ffffff65}

/* Contact is available after either featured project. */
.case-contact{max-width:1500px;margin:40px auto 0}.case-contact .cta{display:inline-flex;align-items:center;text-decoration:none;min-height:44px}.case-contact .cta span{margin-left:20px}
@media(max-width:760px){.case-contact{margin-top:28px}}
/* Lab cards lift only on devices with a real hover pointer. */
.lab .lab-item {transition:translate .28s ease,box-shadow .28s ease,border-color .28s ease;}
@media(hover:hover) and (pointer:fine) {
  .lab .lab-item:hover,.lab .lab-item:has(.lab-gallery-open:focus-visible) {
    translate:0 -6px;
    border-color:#fff;
    box-shadow:inset 0 1px 0 #fff,0 16px 36px #29495620;
  }
}
@media(hover:none) {
  .lab .lab-item:has(.lab-gallery-open:active) {
    border-color:#7893a3;
    box-shadow:inset 0 0 0 1px #7893a350,0 8px 24px #29495612;
  }
}
@media(prefers-reduced-motion:reduce) {
  .lab .lab-item {translate:none!important;}
}