/* The supplied site's composition, media scenes and scroll effects remain the foundation. */
.portfolio-interactive .hero-content{isolation:isolate}
.hero-webgl{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .7s}
.hero-magic-ready .hero-webgl{opacity:1}
.portfolio-interactive .hero-image{transform:translateY(4vh) scale(1.08);transform-origin:center center;transition:opacity .7s}
.hero-magic-ready .hero-image{opacity:0}
.portfolio-interactive .hero-content>.h1{z-index:5;top:3.8vw;left:20vw;right:auto;width:60vw;max-width:60vw;font-size:10vw;line-height:.8;letter-spacing:-.04em;pointer-events:none}
.hero-portfolio-label{position:absolute;z-index:5;top:13vw;left:0;width:100%;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#d1d0e0;pointer-events:none}
.portfolio-interactive .top-gradient{z-index:3;pointer-events:none}
.portfolio-interactive .bottom-gradient{pointer-events:none}
.portfolio-interactive .scroll-block{z-index:10}
.portfolio-interactive .scroll-inner{border:0;background:transparent;color:inherit;min-height:52px;min-width:170px;padding:14px 24px;cursor:pointer}
.portfolio-interactive [data-open-catalog]{color:inherit;background:transparent;border:0;text-decoration:none;cursor:pointer}
.portfolio-interactive .logo-wrapper>[data-open-catalog]{padding:0;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.portfolio-interactive .menu-inner [data-open-catalog]{text-align:left}
.portfolio-interactive .section-hero .heading-large{max-width:73vw;font-size:6.5vw}
.portfolio-interactive .section-reviews .heading-large{font-size:7vw}
.portfolio-interactive .section-form .heading-medium{font-size:6.8vw}
.portfolio-interactive .studio-footer-note a{min-height:44px;display:flex;align-items:center}
.portfolio-interactive .portfolio-actions{margin-top:-3vw;padding-bottom:5vw}
body:has(.catalog-dialog[open]){overflow:hidden}
.catalog-dialog{inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:30px 4vw 20px;margin:0;border:0;background:#080e1bf7;overflow:hidden;display:none;flex-direction:column;color:#f0eff6}
.catalog-dialog[open]{display:flex}
.catalog-dialog::backdrop{background:#03060df5;backdrop-filter:blur(20px)}
.catalog-header{display:flex;justify-content:space-between;align-items:center;gap:25px;z-index:4;flex:0 0 auto}
.catalog-eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a8afc2;margin:0 0 9px}
.catalog-header h2{font-size:32px;font-weight:100;line-height:1.1;letter-spacing:-.025em;margin:0;text-transform:uppercase}
.catalog-header-actions{display:flex;align-items:center;gap:20px}
.catalog-filter{margin:0;display:block}
.catalog-filter select{max-width:260px;border:1px solid #bfc6e42f;border-radius:0;background:#11192a;color:#e3e5f0;min-height:44px;padding:10px 32px 10px 14px;font:12px/1.4 'Helvetica Neue',Arial,sans-serif}
.catalog-close,.catalog-navigation button,#catalog-open-project{background:transparent;color:inherit;border:1px solid #c3c8df45;min-height:46px;padding:12px 25px;font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.catalog-close:hover,.catalog-navigation button:hover,#catalog-open-project:hover{background:#dcd8f00d}
.catalog-stage{position:relative;flex:1 1 auto;min-height:200px;perspective:1300px;isolation:isolate;margin-top:12px;overflow:clip;touch-action:pan-y pinch-zoom;cursor:grab;outline-offset:-4px;user-select:none;-webkit-user-select:none}
.catalog-stage:focus:not(:focus-visible){outline:none}
.catalog-stage:focus-visible{outline:1px solid #c3c8df68}
.catalog-stage.is-dragging{cursor:grabbing}
.catalog-floor{position:absolute;z-index:-1;inset:20% -10% -20%;pointer-events:none;background:radial-gradient(ellipse at 50% 70%,#716ba51f,transparent 58%)}
.catalog-fallback{position:absolute;inset:0;transform-style:preserve-3d;perspective:1300px;pointer-events:none}
.catalog-card{position:absolute;left:50%;top:45%;width:var(--catalog-card-width,300px);height:var(--catalog-card-height,400px);padding:0;border:0;background:transparent;color:inherit;transform-style:preserve-3d;transform:translate(-50%,-50%);transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .4s;pointer-events:auto;user-select:none;-webkit-user-select:none}
.is-dragging .catalog-card{transition:none}
.catalog-sheet{display:block;position:absolute;inset:0;overflow:hidden;border-radius:3px;border:1px solid #cdd4ed47;box-shadow:0 15px 60px #0005;backface-visibility:hidden}
.catalog-sheet img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.catalog-card-reflection{display:block;position:absolute;top:calc(100% + 12px);left:0;right:0;height:100%;opacity:.18;transform:scaleY(-1);mask-image:linear-gradient(transparent 45%,#000);pointer-events:none;overflow:hidden}
.catalog-card-reflection img{width:100%;height:100%;object-fit:cover}
.catalog-webgl{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;z-index:2}
.catalog-webgl canvas{width:100%;height:100%;display:block;pointer-events:none}
.catalog-stage.is-webgl .catalog-webgl{opacity:1}
.catalog-stage.is-webgl .catalog-sheet,.catalog-stage.is-webgl .catalog-card-reflection{opacity:0}
.catalog-bottom{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center;gap:30px;position:relative;z-index:3;padding-top:14px;flex:0 0 auto}
.catalog-current{text-align:left;min-width:0}
.catalog-current p{margin:0;color:#aeb6c9;font-size:10px;letter-spacing:.06em;line-height:1.4;text-transform:uppercase}
.catalog-current h3{font-weight:100;font-size:30px;letter-spacing:-.02em;line-height:1.1;text-transform:uppercase;margin:9px 0;overflow-wrap:anywhere}
.catalog-navigation{display:flex;justify-content:center;align-items:center;gap:20px;white-space:nowrap}
.catalog-navigation button{border:0;padding:12px 8px;min-width:60px}
.catalog-navigation p{font-size:11px;letter-spacing:.04em;color:#c5cad8;margin:0;font-variant-numeric:tabular-nums}
#catalog-open-project{justify-self:end;min-width:170px}
#catalog-hint{text-align:center;font-size:10px;color:#8993aa;letter-spacing:.015em;line-height:1.5;margin:17px 0 0;text-transform:none;flex:0 0 auto}
.catalog-empty{position:absolute;top:45%;left:5%;right:5%;text-align:center;font-size:20px;color:#b9c0d0;letter-spacing:-.01em;text-transform:none}
.catalog-dialog:has(~ #project-dialog[open]) .catalog-stage{pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:991px){.portfolio-interactive .logo-wrapper.is--mob_hide{display:flex!important;align-items:center}.portfolio-interactive .logo-wrapper>[data-open-catalog]{display:inline-flex!important;align-items:center;min-height:44px}.portfolio-interactive .logo-wrapper>[data-open-catalog] .link-text{font-size:11px;white-space:nowrap}}
@media(max-width:991px){.portfolio-interactive .hero-content>.h1{top:9vw;left:6vw;width:88vw;max-width:88vw;font-size:21vw;text-align:left}.hero-portfolio-label{top:29vw;text-align:left;left:7vw;width:85%;font-size:10px}.portfolio-interactive .section-hero .heading-large{font-size:11vw;max-width:90vw}.portfolio-interactive .section-reviews .heading-large{font-size:12vw}.portfolio-interactive .section-form .heading-medium{font-size:12vw}.portfolio-interactive .portfolio-actions{margin-top:28px;padding-bottom:45px}.catalog-dialog{padding:24px 24px 18px}.catalog-bottom{grid-template-columns:1fr auto;gap:18px 24px}.catalog-navigation{grid-column:1/-1;grid-row:2;gap:40px}.catalog-current h3{font-size:26px}.catalog-stage{margin-top:20px}.catalog-header h2{font-size:28px}.catalog-header-actions{gap:12px}}
@media(max-width:600px){.catalog-dialog{padding:20px 20px 16px}.catalog-header{align-items:flex-start}.catalog-header h2{font-size:24px;max-width:8ch}.catalog-eyebrow{font-size:9px;letter-spacing:.08em}.catalog-header-actions{flex-direction:column-reverse;align-items:flex-end;gap:14px}.catalog-close{min-height:40px;padding:10px 16px;font-size:10px}.catalog-filter select{font-size:10px;padding:9px 24px 9px 10px;min-height:38px;max-width:150px}.catalog-stage{margin-top:0}.catalog-bottom{gap:12px;align-items:center}.catalog-current h3{font-size:clamp(20px,6.15vw,24px);max-width:12ch}.catalog-current p{font-size:9px;max-width:22ch}.catalog-current #catalog-year{display:none}.catalog-navigation{gap:30px}.catalog-navigation button{font-size:10px;min-height:44px}.catalog-navigation p{font-size:10px}#catalog-open-project{min-width:0;padding:12px 16px;font-size:9px;min-height:44px;max-width:130px}#catalog-hint{font-size:9px;max-width:29ch;align-self:center;margin-top:9px}.portfolio-interactive .section-reviews .heading-large{font-size:13vw}.portfolio-interactive .scroll-inner{min-width:150px;min-height:54px}.hero-portfolio-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-webgl{display:none}.catalog-card,.catalog-webgl{transition:none}.portfolio-interactive .hero-image{opacity:1!important}}

/* Personal portfolio: preserve the cinematic canvas while giving the works priority. */
.portfolio-interactive .hero-content{height:min(100svh,960px);min-height:620px;max-height:none}
.portfolio-hero-picture{display:contents}
.portfolio-interactive .hero-image{margin-top:0;transform:none;object-position:center;image-rendering:auto}
.portfolio-interactive .hero-content>.h1{top:90px;left:6vw;right:auto;width:auto;max-width:88vw;font-size:clamp(100px,13vw,230px);text-align:left;margin:0;line-height:.84;letter-spacing:-.04em}
.hero-portfolio-label{top:calc(105px + min(13vw,230px));left:6vw;width:auto;text-align:left;font-size:11px;letter-spacing:.14em}
.portfolio-interactive .top-gradient{height:42%;opacity:.7}
.portfolio-interactive .bottom-gradient{height:28%}
.portfolio-interactive .section-hero{padding-bottom:0}
.portfolio-interactive .scroll-block{bottom:0;transform:none;height:150px}
.portfolio-interactive .scroll-inner{font-size:12px}
.portfolio-interactive .section-showcase{padding-top:95px;scroll-margin-top:80px}
.portfolio-interactive .section-showcase .tag-block{margin:0;min-height:50px}
.portfolio-interactive .section-showcase .heading-medium{font-size:clamp(42px,6.5vw,104px);line-height:1.02;max-width:90vw;letter-spacing:-.025em}
.portfolio-interactive .section-showcase .padding-block{padding-top:30px}
.portfolio-interactive .portfolio-actions{margin-top:10px;padding-bottom:65px}
.portfolio-interactive .portfolio-actions p{font-size:10px;letter-spacing:.04em;max-width:85vw;text-align:center}
.portfolio-interactive .project-open .project-image{aspect-ratio:3/4;object-fit:cover;filter:none;image-rendering:auto}
.portfolio-about{display:grid;grid-template-columns:1fr .72fr;align-items:center;gap:10vw;padding:110px 8vw 130px;scroll-margin-top:60px}
.portfolio-eyebrow{font-size:11px;letter-spacing:.12em;color:#aeb6c9;text-transform:uppercase;margin:0 0 30px}
.portfolio-about .heading-large{font-size:clamp(42px,6.1vw,88px);line-height:1.02;letter-spacing:-.025em;margin:0 0 30px;max-width:10ch}
.portfolio-about-text{font-size:15px;line-height:1.8;letter-spacing:0;text-transform:none;color:#c2c7d6;max-width:45ch;margin:0 0 36px}
.portfolio-about-art{margin:0;perspective:1200px;transform-style:preserve-3d}
.portfolio-about-art img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;display:block;transform:perspective(1200px) rotateY(var(--art-y,0deg)) rotateX(var(--art-x,0deg));transition:transform .25s ease-out;will-change:transform}
.portfolio-about-art figcaption{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#98a3bb;margin-top:18px}
.portfolio-interactive .section-form{padding:90px 8vw 110px;background:#0a1120;scroll-margin-top:60px}
.portfolio-interactive .section-form .padding-block{padding:0}
.portfolio-interactive .section-form .container{max-width:none;padding:0}
.portfolio-interactive .section-form .heading-medium{font-size:clamp(50px,7vw,104px);line-height:1.05}
.portfolio-interactive .section-form .layout{gap:50px 7vw}
.portfolio-interactive .section-form p{max-width:45ch}
.portfolio-interactive .section-form #custom-button{font-size:13px;min-height:48px}
.portfolio-interactive #project-photo{height:68dvh;max-height:880px;object-fit:contain;image-rendering:auto;filter:none}
.portfolio-interactive .catalog-sheet img{image-rendering:auto;filter:none}
@media(max-width:991px){.portfolio-interactive .hero-content{height:88svh;min-height:600px;max-height:none}.portfolio-interactive .hero-content>.h1{top:88px;font-size:20vw;left:6vw;max-width:88vw}.hero-portfolio-label{top:calc(104px + 17vw);left:6vw;width:auto;font-size:10px}.portfolio-interactive .scroll-block{height:125px}.portfolio-about{gap:7vw;padding:80px 6vw 100px;grid-template-columns:1fr .8fr}.portfolio-about .heading-large{font-size:6vw}.portfolio-about-text{font-size:14px;line-height:1.7}.portfolio-interactive .section-showcase{padding-top:65px}.portfolio-interactive .section-showcase .heading-medium{font-size:8vw}.portfolio-interactive .section-form{padding:75px 6vw 85px}.portfolio-interactive .section-form .heading-medium{font-size:10vw}.portfolio-interactive .portfolio-actions{padding-bottom:35px}}
@media(max-width:600px){.portfolio-interactive .hero-content{height:91svh;min-height:570px}.portfolio-interactive .hero-content>.h1{font-size:23vw;top:92px}.hero-portfolio-label{top:calc(108px + 20vw)}.portfolio-interactive .section-showcase .heading-medium{font-size:11vw}.portfolio-about{grid-template-columns:1fr;gap:45px;padding:70px 6vw 75px}.portfolio-about .heading-large{font-size:12vw;max-width:11ch}.portfolio-about-text{max-width:none}.portfolio-about-art{width:78%;margin-inline:auto}.portfolio-interactive .section-form .heading-medium{font-size:14vw}.portfolio-interactive .section-form .layout{gap:36px}.portfolio-interactive #project-photo{height:55dvh}.portfolio-interactive .scroll-block{height:115px}}
@media(prefers-reduced-motion:reduce){.portfolio-about-art img{transform:none!important;transition:none;will-change:auto}}

.portfolio-interactive .scroll-block{height:125px;align-items:center;justify-content:center}
.portfolio-interactive .scroll-inner{border:1px solid #d8dcec80;min-width:185px;min-height:50px;background:#080e1b80;backdrop-filter:blur(8px)}
.portfolio-interactive .scroll-inner .text-small{font-size:12px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase}
.portfolio-interactive .section-showcase .tag .text-small,.portfolio-interactive .case-description .text-small,.portfolio-interactive .footer .text-small{font-size:11px;line-height:1.5;letter-spacing:.035em}
.portfolio-interactive .section-form input,.portfolio-interactive .section-form textarea{font-size:14px;line-height:1.6;letter-spacing:0;text-transform:none}
@media(max-width:600px){.portfolio-interactive .scroll-block{height:100px}.portfolio-interactive .scroll-inner{min-height:48px;min-width:172px}.portfolio-interactive .scroll-inner .text-small{font-size:11px}.portfolio-interactive .section-form input,.portfolio-interactive .section-form textarea{font-size:16px}}

.portfolio-interactive #works{scroll-margin-top:105px}
.portfolio-interactive .logo-wrapper,.portfolio-interactive .logo-wrapper>[data-open-catalog]{opacity:1!important;visibility:visible!important}
@media(max-width:991px){.portfolio-interactive .logo-wrapper>[data-open-catalog] [link-hover],.portfolio-interactive .logo-wrapper>[data-open-catalog] .char{opacity:1!important;transform:none!important}}

.portfolio-interactive .section-form .is--hide_mobile:not(.hide){font-size:14px;line-height:1.7;letter-spacing:0;text-transform:none;max-width:34ch}
.portfolio-interactive .section-form #custom-button p{font-size:12px;line-height:1.4;letter-spacing:.02em;text-transform:none}

/* Keep catalog buttons clickable inside the reference scroll overlay. */
.portfolio-interactive [data-open-catalog]{pointer-events:auto}