/* Two authored palettes. The hero deliberately takes the opposite surface. */
:root {
 --surface:#e8ebf1;--raised:#ffffff;--nav-ink:#1c1f25;--nav-fill:#ecececa6;
 --nav-hover:#ffffff55;--nav-rule:#ffffffb8;--hero-ink:#f4f7fd;
 --hero-muted:#d2d5db;--footer-surface:#e8ebf1;--card-shadow:#10101020;
 --error:#a12525;--input-rule:#878a90;
 color-scheme:light;
}
:root[data-theme=dark] {
 --paper:#0c0f15;--ink:#eaedf3;--muted:#abaeb4;--line:#34373d;
 --surface:#1e2127;--raised:#292c32;--blue:#b4b7bd;
 --nav-ink:#f1f4fa;--nav-fill:#1f1f1fc4;--nav-hover:#ffffff12;--nav-rule:#d2d2d24d;
 --hero-ink:#1c1f25;--hero-muted:#404349;--footer-surface:#191c22;
 --card-shadow:#00000060;--error:#ffabab;--input-rule:#6d7076;
 color-scheme:dark;
}
body { background:var(--paper);color:var(--ink); }
.theme-toggle { display:grid;place-items:center;flex:0 0 42px;width:42px;height:44px;position:relative;border-radius:50%;background:transparent;color:var(--nav-ink); }
.theme-toggle svg { width:20px;height:20px;transition:transform 200ms cubic-bezier(.23,1,.32,1),opacity 160ms; }
.theme-sun { position:absolute;opacity:0;transform:rotate(-90deg) scale(.5); }
[data-theme=dark] .theme-moon { opacity:0;transform:rotate(90deg) scale(.5); }
[data-theme=dark] .theme-sun { opacity:1;transform:none; }
.theme-toggle:is(:hover,:focus-visible) { background:var(--nav-hover); }
/* A transparent body, a bright curved rim, and a soft transmitted backdrop. */
.site-header { top:20px; }
.glass-nav { position:relative;gap:14px;padding:7px 8px 7px 15px;border-color:var(--nav-rule);border-radius:19px;background:var(--nav-fill);color:var(--nav-ink);backdrop-filter:blur(18px) saturate(1.65);-webkit-backdrop-filter:blur(18px) saturate(1.65);transition:box-shadow 250ms ease; }
.glass-nav:before { content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(128deg,#ffffff35,transparent 28% 72%,#ffffff0a); }
.glass-nav > * { position:relative; }
.is-scrolled .glass-nav { background:var(--nav-fill); }
.nav-contact { background:#1b1e24;color:#f5f8fe;transition:box-shadow 200ms ease; }
[data-theme=dark] .nav-contact { background:#e6e9ef;color:#1b1e24; }
[data-theme=dark] .brand img { filter:brightness(0) invert(1); }
.nav-links a[aria-current] { color:var(--nav-ink); }
.nav-contact:is(:hover,.is-active) { background:#54575d;color:white; }
/* Tighten the opening composition, while leaving the material its own field. */
.hero-frame { min-height:680px;height:calc(100svh - 20px);max-height:1000px;color:var(--hero-ink); }
.hero-copy { top:20%; }
.hero-copy h1 { font-size:clamp(74px,9.6vw,164px);line-height:.99;max-width:10em; }
.hero-bottom { bottom:32px; }
.hero-duck { position:absolute;right:7%;top:38%;width:clamp(250px,26vw,430px);height:clamp(290px,29vw,480px);pointer-events:none; }
.hero-duck svg { width:100%;height:100%;color:#dbab57;opacity:.8;transition:opacity 300ms ease; }
.hero-frame:has(.scene-ready) .hero-duck svg { opacity:0;transition:none; }
.hero-person { font-size:14px; }
.hero-note { max-width:290px;line-height:1.5; }
.hero-line:last-child { padding-left:.52em; }
.hero-person p span,.hero-note { color:var(--hero-muted); }
[data-theme=dark] .hero-frame { background:#e2e5eb; }
[data-theme=dark] .hero-poster { filter:brightness(1.13) saturate(.68) contrast(.88); }
.hero-art canvas { filter:none;transition:none; }
.hero-poster { transition:none; }
[data-theme=dark] .hero-duck svg { color:#93969c; }
[data-theme=dark] .round-arrow { border-color:#20202055; }
[data-theme=dark] .hero-explore:hover .round-arrow { background:#1c1f25;color:white; }
.motion-toggle { display:none; }
/* The displacement map is generated from the lens boundary on resize only. */
.glass-nav.has-backdrop-optics { backdrop-filter:url('#dintsen-nav-glass') saturate(1.35);-webkit-backdrop-filter:url('#dintsen-nav-glass') saturate(1.35);background:#e6e6e680; }
[data-theme=dark] .glass-nav.has-backdrop-optics { background:#1f1f1fb8; }
.glass-nav.has-backdrop-optics:before { background:linear-gradient(116deg,#f7f7f74a,transparent 24% 75%,#ffcfae22); }
.glass-nav:after { content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(115deg,#f4f4f4dd,transparent 28%,#ffffffba var(--glass-light-x,55%),#c8c8c880 76%,#ffd7a28c);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; }
.nav-contact:active,.theme-toggle:active,.menu-toggle:active { transform:scale(.97); }
.roll-label > span { transition:transform 200ms cubic-bezier(.23,1,.32,1); }
:is(a,button):focus-visible .roll-label > span:first-child { transform:none;transition:none; }
:is(a,button):focus-visible .roll-label > span:last-child { transform:translateY(125%) rotate(6deg);transition:none; }
@media(hover:none),(pointer:coarse) {
 :is(a,button):hover .roll-label > span:first-child { transform:none; }
 :is(a,button):hover .roll-label > span:last-child { transform:translateY(125%) rotate(6deg); }
}
/* The hero's identity is already running while its real first frame is prepared. */
body[data-intro=preparing] .hero-copy,body[data-intro=preparing] .hero-bottom { opacity:0; }
.portfolio-loader { background:transparent!important;pointer-events:none; }
.portfolio-loader .loader-panel { display:none; }
.portfolio-loader .loader-word { position:absolute;left:50%;transform:translateX(-50%);top:auto;bottom:13%;font-size:clamp(24px,3vw,46px);letter-spacing:-.055em;color:var(--hero-ink); }
.loader-status { position:absolute;bottom:8%;left:50%;transform:translateX(-50%);font-size:13px;color:var(--hero-muted); }
.loader-skip { position:absolute;right:var(--gutter);bottom:6%;min-width:70px;min-height:44px;padding:10px 14px;pointer-events:auto;background:transparent;color:var(--hero-ink); }
.loader-skip:focus-visible { outline:2px solid currentColor;outline-offset:2px; }
.loader-ready .loader-word,.loader-ready .loader-status,.loader-ready .loader-skip { opacity:0;transition:opacity 180ms ease; }
.loader-ready .loader-word { transform:translateX(-50%); }
@media(prefers-reduced-motion:reduce) {
 .hero-duck svg,.theme-toggle svg { transition:none; }
 body[data-intro=preparing] .hero-copy,body[data-intro=preparing] .hero-bottom { opacity:1; }
}
/* The design process becomes a continuous blue chapter, rather than an accordion. */
.process-story { display:block;margin:140px 10px 0;padding:0;background:transparent;border-radius:0; }
.process-story .approach-intro { display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:8vw;margin:0 calc(var(--gutter) - 10px) 55px; }
.process-story .approach-intro h2,.process-story .approach-intro h1 { font-size:clamp(56px,6.4vw,104px);line-height:.98; }
.process-story .approach-intro > p { margin:0 0 6px;max-width:390px;font-size:18px; }
.process-scroll { position:relative;height:230svh; }
.process-sticky { position:sticky;top:104px;height:calc(100svh - 124px);min-height:610px;max-height:950px;overflow:hidden;border-radius:12px;color:#f4f7fd;background:#2e3137;isolation:isolate; }
.process-story .process-art { position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;border-radius:0;z-index:-3; }
.process-shade { position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#161616cf,transparent 73%),linear-gradient(90deg,#16161640,transparent 60%); }
.process-stage-top { position:absolute;top:32px;left:calc(var(--gutter) - 10px);right:calc(var(--gutter) - 10px);display:flex;justify-content:space-between;font-size:15px; }
.process-scenes { position:absolute;left:calc(var(--gutter) - 10px);right:calc(var(--gutter) - 10px);bottom:138px; }
.process-panel { display:grid;grid-template-columns:1.6fr 1fr;gap:5vw;align-items:end;outline-offset:8px; }
.process-panel h3 { font-size:clamp(64px,9vw,156px);letter-spacing:-.055em;line-height:1.04;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em; }
.process-panel h3 > span { display:block; }
.process-panel p { font-size:clamp(15px,1.35vw,21px);line-height:1.5;max-width:415px;padding-bottom:10px; }
.process-controls { position:absolute;left:calc(var(--gutter) - 10px);right:calc(var(--gutter) - 10px);bottom:34px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px; }
.process-tab { display:flex;align-items:center;gap:15px;padding:17px 0 0;border-top:1px solid #dfdfdf55;text-align:left;background:transparent;color:#dfdfdfd9;position:relative; }
.process-tab:before { content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:white;transform:scaleX(0);transform-origin:left;transition:transform 450ms var(--ease); }
.process-tab[aria-selected=true] { color:white; }
.process-tab[aria-selected=true]:before { transform:scaleX(1); }
.step-index { font-size:12px; }
.step-name { font-size:clamp(14px,1.5vw,22px);letter-spacing:-.025em; }
.process-tab:focus-visible { outline-color:white; }
.process-progress { position:absolute;inset:auto 0 0;height:3px;background:#ffffff12; }
.process-progress > span { display:block;height:100%;background:#dfe2e8;transform:scaleX(var(--process-progress,0));transform-origin:left; }
.process-scroll:not(.scroll-enhanced) { height:auto; }
.process-scroll:not(.scroll-enhanced) .process-sticky { position:relative;top:0; }
.process-scroll:not(.process-interactive) .process-sticky { height:auto;min-height:0;padding:35px calc(var(--gutter) - 10px); }
.process-scroll:not(.process-interactive) .process-stage-top { position:static;margin-bottom:35px; }
.process-scroll:not(.process-interactive) .process-scenes { position:relative;inset:auto; }
.process-scroll:not(.process-interactive) .process-panel { margin-bottom:40px; }
.process-scroll:not(.process-interactive) .process-panel h3 { font-size:clamp(42px,6vw,84px); }
.process-scroll:not(.process-interactive) .process-controls { display:none; }
/* The source eight is a real silhouette; projects pass through its upper opening. */
.about-section { padding-top:130px; }
.experience-scroll { height:185svh;position:relative;margin-bottom:70px; }
.experience-stage { position:sticky;top:100px;height:calc(100svh - 120px);min-height:590px;max-height:930px;overflow:clip;perspective:950px;isolation:isolate; }
.experience-kicker { position:absolute;top:28px;left:0;right:0;display:flex;justify-content:flex-end;font-size:14px;z-index:5; }
.experience-eight { position:absolute;left:50%;top:50%;width:min(32vw,430px);height:min(46.67vw,627px);background:var(--ink);mask:url('../images/8.webp') center / contain no-repeat;-webkit-mask:url('../images/8.webp') center / contain no-repeat;transform:translate(-50%,-50%);transform-origin:50% 29.4%;z-index:1; }
.experience-caption { position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;font-size:clamp(26px,3.5vw,58px);letter-spacing:-.045em;line-height:1.05;z-index:2; }
.experience-word { display:block;white-space:nowrap; }
.experience-letter { display:inline-block; }
.experience-flight { position:absolute;inset:0;transform-style:preserve-3d;z-index:3;pointer-events:none; }
.experience-resolution { position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:clamp(44px,6.4vw,100px);line-height:1.02;letter-spacing:-.06em;text-align:center;z-index:4;opacity:0;white-space:nowrap; }
.experience-card { position:absolute;left:50%;top:35%;width:clamp(170px,20vw,300px);height:clamp(215px,25vw,375px);margin:0;overflow:hidden;border-radius:9px;background:var(--raised);transform-style:preserve-3d;z-index:3; }
.experience-card img { width:100%;height:100%;object-fit:cover; }
.experience-card figcaption { position:absolute;left:10px;bottom:10px;font-size:13px;padding:7px 11px;border-radius:4px;background:#f5f5f5ed;color:#1c1f25; }
.experience-card figcaption { left:14px;right:14px;bottom:14px;background:var(--raised);color:var(--ink);border-radius:0;padding:8px 10px; }
.experience-footnote { position:absolute;bottom:28px;left:0;font-size:14px;color:var(--muted);line-height:1.5;z-index:5; }
.experience-scroll:not(.scroll-enhanced) { height:650px; }
.experience-scroll:not(.scroll-enhanced) .experience-stage { position:relative;top:0; }
.experience-scroll:not(.scroll-enhanced) .experience-flight { display:none; }
.experience-scroll:not(.scroll-enhanced) .experience-resolution { display:none; }
.about-intro { margin-bottom:60px; }
.about-art { height:clamp(420px,45vw,780px);margin-top:24px; }
.about-art .scene-poster { width:215%;left:50%;transform:translateX(-50%);object-fit:contain; }
[data-theme=dark] .about-art .scene-poster { mix-blend-mode:normal;filter:brightness(.47) saturate(1.6); }
.bio-panels { overflow:visible; }
/* Spacious opposing logo streams, original links once, inert repeated artwork. */
.logo-marquee { display:block;overflow:hidden;margin:0 calc(-1 * var(--gutter));padding:18px 0; }
.logo-lane { display:flex;gap:70px;width:max-content;animation:logo-stream 38s linear infinite;animation-play-state:paused; }
.logo-lane:nth-child(2) { animation-direction:reverse;animation-duration:43s;margin-top:18px; }
.logo-marquee.is-in-view .logo-lane { animation-play-state:running; }
.logo-marquee:is(:hover,:focus-within) .logo-lane { animation-play-state:paused; }
.logo-set { display:flex;align-items:center;gap:70px;flex-shrink:0; }
.logo-marquee .about-logo-block { width:240px;height:135px;flex-shrink:0;border:0; }
.logo-marquee .about-inner { width:100%;height:125px; }
.logo-marquee .web3-tag { left:50%;transform:translateX(-50%);top:3px;letter-spacing:.06em; }
@keyframes logo-stream { to { transform:translateX(calc(-50% - 35px)); } }
/* Pass has a dark full-width product stage in both themes. */
.pass-feature { position:relative;isolation:isolate;margin:130px 10px 0;padding:75px calc(var(--gutter) - 10px) 70px;min-height:680px;grid-template-columns:.9fr 1.25fr;gap:5vw;border:0;border-radius:12px;overflow:hidden;background:#090c12;color:#f0f3f9; }
.pass-feature:before { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 83% 30%,#3232327a,transparent 65%); }
.pass-feature h2 { font-size:clamp(54px,6vw,108px);line-height:1; }
.pass-feature .pass-kicker { margin:0 0 40px;font-size:13px;color:#c7cad0;letter-spacing:.055em; }
.pass-feature .pass-copy > p:not(.pass-kicker) { font-size:17px;color:#b1b4ba;max-width:360px;margin:32px 0 24px; }
.pass-feature .text-button { color:#f0f3f9; }
.pass-feature .text-button:is(:hover,:focus-visible) { color:#e2e5eb; }
.pass-feature .pass-image { position:relative;min-height:460px;display:flex;align-items:end;overflow:visible; }
.pass-image img { width:115%;max-width:none;margin-left:-5%;position:relative;z-index:1; }
.pass-mark { position:absolute;top:0;left:13%;font-size:clamp(100px,16vw,280px);line-height:1;letter-spacing:-.08em;color:#86868650; }
.pass-mark > span { font-size:.12em;vertical-align:top;display:inline-block;letter-spacing:0;margin-top:.4em; }
/* The water composition now occupies the central contact stage. */
footer { background:var(--footer-surface);padding-top:75px; }
.footer-top { grid-template-columns:1fr 1fr;gap:0 30px;min-height:clamp(700px,100svh,1100px); }
.footer-top h2 { position:relative;z-index:2;font-size:clamp(65px,8vw,136px); }
.footer-contact { align-self:start;color:var(--ink);transition:border-color 200ms ease; }
.footer-art { position:absolute;grid-column:1 / -1;top:6%;left:50%;transform:translateX(-50%);width:calc(100% + 2 * var(--gutter));height:clamp(660px,95svh,1050px);margin:0;aspect-ratio:auto;mask-image:radial-gradient(ellipse at 50% 62%,#000 39%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse at 50% 62%,#000 39%,transparent 73%); }
[data-theme=dark] .footer-art .scene-poster { filter:brightness(.28) saturate(1.6); }
.footer-links { padding-top:5px; }
.footer-wordmark { display:flex;align-items:flex-start;font-size:30.5vw;line-height:1.02;letter-spacing:-.067em; }
.footer-wordmark span { flex-shrink:0;font-size:.17em;line-height:1;padding:0;letter-spacing:0;margin:.1em 0 0 -.045em; }
.footer-bottom { border-color:var(--line);color:var(--muted); }
.contact-dialog { background:var(--paper);color:var(--ink); }
.contact-dialog input,.contact-dialog textarea { border-color:var(--input-rule); }
.submit-button { background:var(--ink);color:var(--paper); }
.w-form-fail { color:var(--error); }
.process-list details { border-color:var(--line); }
.portfolio-case .login-container { background:var(--surface); }
.case-cover-art { background:var(--surface); }
.portfolio-case .project-copy > .f-body,.portfolio-case .login-container .f-h2 { color:var(--ink); }
.portfolio-case .login-container label { color:var(--muted); }
.portfolio-case .login-container input:not([type=submit]) { background:var(--paper);color:var(--ink);border-color:var(--input-rule); }
@media(min-width:1025px) {
 [data-theme=dark] .work-card:is(:nth-child(6n+1),:nth-child(6n+4)) .work-caption,[data-theme=dark] .work-card:is(:nth-child(6n+1),:nth-child(6n+4)) > p { color:#15181e; }
 [data-theme=dark] .work-card:is(:nth-child(6n+1),:nth-child(6n+4)) .work-caption > span { color:#5a5d63; }
 [data-theme=dark] .work-grid.is-filtered .work-caption,[data-theme=dark] .work-grid.is-filtered .work-card > p { color:var(--ink); }
 [data-theme=dark] .work-grid.is-filtered .work-caption > span { color:var(--muted); }
}
[data-theme=dark] .text-button:is(:hover,:focus-visible),[data-theme=dark] .footer-contact:is(:hover,.is-active) { color:var(--blue); }
[data-theme=dark] .about-art { mask-image:radial-gradient(ellipse,#000 55%,transparent 76%);-webkit-mask-image:radial-gradient(ellipse,#000 55%,transparent 76%); }
[data-page=about] .about-section { padding-top:130px; }
[data-page=approach] .process-story { margin-top:150px; }
@media(min-width:1800px) { .experience-eight { width:450px;height:656px; } }
@media(max-width:1024px) {
 .hero-copy h1 { font-size:10.2vw; }
 .hero-duck { right:4%;top:45%;width:29vw;height:33vw; }
 .hero-bottom { gap:22px; }
 .process-panel { grid-template-columns:1.35fr 1fr;gap:25px; }
 .process-panel h3 { font-size:9vw; }
 .process-controls { gap:12px; }
 .process-tab { gap:10px; }
 .experience-eight { width:39vw;height:57vw; }
 .pass-feature { grid-template-columns:1fr 1fr;min-height:580px; }
 .pass-feature .pass-image { min-height:390px; }
 .footer-top { min-height:clamp(690px,95svh,1000px); }
}
@media(max-width:640px) {
 .site-header { inset:16px 16px auto; }
 .glass-nav { gap:4px;padding:6px 6px 6px 10px;border-radius:16px; }
 .theme-toggle { flex-basis:44px;width:44px; }
 .nav-contact { margin-left:0;padding:0 12px;gap:13px; }
 .brand { margin-right:auto; }
 .menu-toggle span { background:var(--nav-ink); }
 .hero-frame { margin:7px;min-height:740px;height:calc(100svh - 14px);max-height:1050px; }
 .hero-copy { left:22px;right:18px;top:20%; }
 .hero-copy h1 { font-size:clamp(38px,11.5vw,74px);line-height:1.03;letter-spacing:-.06em; }
 .hero-duck { width:200px;height:230px;right:8%;top:43%; }
 .hero-bottom { left:22px;right:22px;bottom:24px;grid-template-columns:1fr;gap:17px; }
 .hero-note { display:none; }
 .hero-person img { width:36px;height:36px; }
 .hero-explore { min-height:44px; }
 .loader-skip { bottom:8%; }
 .portfolio-loader .loader-word { bottom:19%; }
 .loader-status { bottom:14%; }
 .process-story { margin-top:85px; }
 .process-story .approach-intro { display:block;margin:0 22px 35px; }
 .process-story .approach-intro h2,.process-story .approach-intro h1 { font-size:clamp(42px,12vw,63px); }
 .process-story .approach-intro > p { margin-top:24px;font-size:16px; }
 .process-scroll { height:230svh; }
 .process-sticky { top:95px;min-height:590px;height:calc(100svh - 108px);max-height:780px;border-radius:8px; }
 .process-stage-top { top:23px;left:22px;right:22px;font-size:13px; }
 .process-scenes { left:22px;right:22px;bottom:124px; }
 .process-panel { display:block; }
 .process-panel h3 { font-size:clamp(47px,12.8vw,78px); }
 .process-panel p { font-size:15px;line-height:1.5;margin-top:22px;padding:0;min-height:113px; }
 .process-controls { left:14px;right:14px;bottom:24px;gap:9px; }
 .process-tab { display:block;min-height:57px;padding-top:11px; }
 .step-index { display:block;font-size:11px;margin-bottom:7px; }
 .step-name { display:block;font-size:10.5px; }
 .about-section { padding-top:75px; }
 .experience-scroll { height:160svh;margin:0 -15px 45px; }
 .experience-stage { top:92px;min-height:580px;height:calc(100svh - 106px); }
 .experience-kicker { top:23px;left:15px;right:15px;font-size:12px; }
 .experience-eight { width:65vw;height:95vw;max-height:510px; }
 .experience-caption { top:39%;font-size:28px; }
 .experience-card { width:145px;height:190px; }
 .experience-footnote { left:15px;bottom:24px;font-size:12px; }
 .about-art { height:min(112vw,580px);margin-top:28px; }
 .about-intro { margin-bottom:30px; }
 .logo-marquee { margin:0 -22px;padding:10px 0; }
 .logo-lane,.logo-set { gap:30px; }
 .logo-marquee .about-logo-block { width:165px;height:105px; }
 .logo-marquee .about-inner { height:100px; }
 .logo-lane:nth-child(2) { margin-top:10px; }
 @keyframes logo-stream { to { transform:translateX(calc(-50% - 15px)); } }
 .pass-feature { margin:75px 7px 0;padding:44px 22px 25px;display:block;min-height:0; }
 .pass-feature h2 { font-size:clamp(45px,12vw,65px); }
 .pass-feature .pass-kicker { margin-bottom:32px;font-size:12px; }
 .pass-feature .pass-copy > p:not(.pass-kicker) { font-size:16px;margin:27px 0 16px; }
 .pass-feature .pass-image { min-height:300px;margin-top:30px; }
 .pass-image img { width:119%;margin-left:-7%; }
 .pass-mark { font-size:145px;top:18px;left:12%; }
 footer { padding-top:55px; }
 .footer-top { display:flex;flex-direction:column;gap:0;min-height:0; }
 .footer-top h2 { font-size:clamp(52px,14vw,76px); }
 .footer-contact { font-size:42px;margin-top:25px;gap:30px; }
 .footer-art { position:relative;top:auto;left:auto;transform:none;width:calc(100% + 2 * var(--gutter));height:clamp(340px,105vw,520px);align-self:center;margin:12px 0 0; }
 .footer-links { padding-top:15px; }
 .footer-wordmark { font-size:28.8vw;line-height:1.1; }
 .footer-wordmark span { font-size:.20em;margin-top:.14em; }
 [data-theme=dark] .work-card:is(:nth-child(6n+1),:nth-child(6n+4)) .work-caption,[data-theme=dark] .work-card:is(:nth-child(6n+1),:nth-child(6n+4)) > p { color:var(--ink); }
 [data-theme=dark] .work-card:is(:nth-child(6n+1),:nth-child(6n+4)) .work-caption > span { color:var(--muted); }
 [data-page=approach] .process-story { margin-top:130px; }
 [data-page=about] .about-section { padding-top:120px; }
}
@media(prefers-reduced-motion:reduce) {
 .process-scroll.scroll-enhanced,.experience-scroll.scroll-enhanced { height:auto; }
 .experience-scroll:not(.scroll-enhanced) { height:auto; }
 .process-sticky,.experience-stage { position:relative;top:0; }
 .experience-flight { display:none; }
 .logo-lane { animation:none!important;transform:none!important; }
 .logo-set[aria-hidden] { display:none; }
 .logo-lane,.logo-set { flex-wrap:wrap;width:auto;justify-content:center;gap:10px; }
 .logo-marquee { margin:0; }
}

/* v33: one central typographic field, framed by moving glass ribbons. */
.hero-copy { top:45%;left:var(--gutter);right:var(--gutter);transform:translateY(-50%);text-align:center; }
.hero-copy h1 { font-size:clamp(58px,8.6vw,154px);line-height:1.01;max-width:none;letter-spacing:-.065em; }
.hero-line:last-child { padding-left:0; }
.hero-note { display:block;max-width:425px;margin:28px auto 0;font-size:16px;line-height:1.5; }
.hero-bottom { grid-template-columns:1fr auto;align-items:center; }
.hero-person { gap:12px; }
.hero-explore .round-arrow { overflow:hidden; }
.hero-explore .round-arrow svg { transition:transform 260ms cubic-bezier(.23,1,.32,1); }
.site-header > .theme-toggle { position:fixed;top:25px;right:24px;width:52px;height:52px;pointer-events:auto;background:var(--nav-fill);border:1px solid var(--nav-rule);backdrop-filter:blur(14px); }
.glass-nav { background:#e4e4e45e;isolation:isolate; }
.glass-nav.has-backdrop-optics { background:#e4e4e466; }
[data-theme=dark] .glass-nav.has-backdrop-optics { background:#1c1c1c99; }
.glass-nav .nav-optics { position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;border-radius:inherit; }
.glass-nav > :not(.nav-optics) { z-index:1; }
.glass-nav:after { opacity:.45; }
.nav-links a { min-height:46px; }
.nav-contact { gap:23px; }
.nav-contact > span { transition:transform 220ms cubic-bezier(.23,1,.32,1); }
body[data-intro=preparing] .site-header { opacity:0;pointer-events:none; }
body[data-intro=revealing] .site-header { animation:nav-arrive 650ms cubic-bezier(.22,1,.36,1) both;animation-delay:650ms; }
@keyframes nav-arrive { from { opacity:0;transform:translateY(-18px); } to { opacity:1;transform:none; } }
.loader-duck { position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:260px;height:320px; }
.portfolio-loader .loader-word { bottom:13%;font-size:19vw;line-height:1;letter-spacing:-.07em;white-space:nowrap; }
.portfolio-loader .loader-word .letter-mask > span { animation-duration:750ms;animation-delay:calc(80ms + var(--letter-index)*42ms); }
.loader-status { bottom:7%;font-size:12px;letter-spacing:.025em; }
.loader-skip { bottom:6%;right:24px; }
.loader-ready .loader-word { opacity:1;transition:none; }
.loader-ready .loader-word .letter-mask > span { animation:loader-letter-exit 650ms cubic-bezier(.76,0,.24,1) both;animation-delay:calc(var(--letter-index)*35ms); }
@keyframes loader-letter-exit { to { transform:translateY(-120%) rotate(-8deg);opacity:0; } }
.is-arriving .hero-line .letter-mask > span { animation-duration:900ms;animation-delay:calc(230ms + var(--letter-index)*14ms); }
.hero-line:nth-child(2) .letter-mask > span { --hero-line-delay:100ms; }
body[data-intro=preparing] .hero-note,body[data-intro=preparing] .hero-bottom { opacity:0; }
.intro-arrival .hero-note,.intro-arrival .hero-bottom { animation:intro-copy-arrive 400ms ease both;animation-delay:950ms; }
.intro-arrival .hero-line .letter-mask > span { animation-delay:calc(850ms + var(--letter-index)*14ms); }
.loader-ready .loader-status,.loader-ready .loader-skip { visibility:hidden; }
@keyframes intro-copy-arrive { from { opacity:0; } to { opacity:1; } }
.page-shutter { background:transparent;color:#f3f6fc;overflow:hidden; }
.shutter-plane { position:absolute;inset:-3%;z-index:-1;background:#2e3137; }
.shutter-plane:last-of-type { background:#171a20; }
.page-shutter > span { position:relative;font-size:clamp(54px,14vw,220px); }
.page-shutter .shutter-letter { display:inline-block; }
.page-shutter.is-releasing .letter-mask > span { animation:shutter-letter-exit 620ms cubic-bezier(.76,0,.24,1) both;animation-delay:calc(var(--letter-index)*18ms); }
@keyframes shutter-letter-exit { to { transform:translateY(-1.2em) rotate(-6deg); } }
/* Filters are compact controls with a clear selected surface. */
.filters,.bio-tabs { gap:4px;padding:5px;border:1px solid var(--line);border-radius:9px;width:max-content;max-width:100%;background:var(--surface); }
.filters button,.bio-tabs button { padding:10px 17px;min-height:46px;border-radius:5px;font-size:14px;transition:background 180ms ease,color 180ms ease; }
.filters button[aria-pressed=true],.bio-tabs button[aria-pressed=true] { background:var(--ink);color:var(--paper); }
.filters button:after,.bio-tabs button:after { display:none; }
.work-tools { align-items:center; }
.work-total { font-size:13px; }
.work-image { perspective:1000px; }
.work-open { background:var(--ink);color:var(--paper);border:0;padding:15px 20px;gap:24px; }
.work-indicator { transition:transform 220ms cubic-bezier(.23,1,.32,1),opacity 180ms; }
.work-card:focus-visible .work-open { opacity:1;transform:none; }
.work-card:focus-visible .work-indicator { opacity:0; }
.service-rows { position:relative; }
.service-rows > a { position:relative;min-height:164px;grid-template-columns:1.25fr 1fr 100px; }
.service-preview { position:absolute;right:1%;width:260px;height:260px;pointer-events:none;z-index:4;opacity:0;transition:opacity 180ms ease; }
.service-preview.is-visible { opacity:1; }
.service-preview canvas { display:block;width:100%;height:100%; }
.services-have-3d > a > svg { opacity:0; }
.service-rows > a:focus-visible { outline-offset:7px; }
/* The owner updated the experience count: a large zero becomes the portal. */
.experience-ten { mask-image:none;-webkit-mask-image:none;background:none;color:var(--ink);width:max-content;height:auto;max-height:none;display:flex;align-items:baseline;justify-content:center;gap:.025em;font-size:min(68vw,86svh);line-height:.85;letter-spacing:-.055em;transform-origin:67% 50%; }
.experience-digit { display:block;font:inherit;letter-spacing:inherit; }
.experience-digit:first-child { font:inherit;margin-right:0; }
.experience-caption { top:47%;left:61%;font-size:clamp(25px,3.4vw,52px); }
.experience-resolution { top:47%; }
.about-identity { display:none; }
.about-intro { display:grid;grid-template-columns:1fr 1.12fr;gap:0 5vw;align-items:center;margin-bottom:90px; }
.about-profile { grid-row:1 / 3;min-width:0; }
.about-art { margin:0;height:clamp(420px,43vw,750px); }
.about-intro > p[data-scroll-fill] { font-size:clamp(32px,3.7vw,62px);line-height:1.17;letter-spacing:-.045em;margin:0;align-self:end; }
.scroll-word { display:inline;background:linear-gradient(90deg,var(--ink) var(--fill,0%),var(--muted) var(--fill,0%));background-clip:text;-webkit-background-clip:text;color:transparent; }
.about-intro .about-support { grid-column:2;font-size:15px;line-height:1.6;max-width:360px;margin:30px 0 0;color:var(--muted);align-self:start; }
.bio-tabs { margin-bottom:52px; }
.logo-marquee { padding:30px 0 45px; }
.logo-marquee .about-logo-block { width:clamp(280px,27vw,440px);height:clamp(165px,19vw,240px); }
.logo-marquee .about-inner { height:100%; }
.logo-marquee .web3-tag { top:20px;left:auto;right:15px;transform:none;padding:5px 9px;border-radius:5px;background:var(--ink);color:var(--paper);font-size:10px;letter-spacing:0; }
.about-tab-01 > .f-body { max-width:450px;line-height:1.6;font-size:17px;margin:32px 0 0; }
.pass-feature { min-height:85svh;padding-top:90px;align-items:center;grid-template-columns:.9fr 1.3fr; }
.pass-feature .pass-copy > p { max-width:345px; }
.pass-feature .pass-image { min-height:500px; }
.pass-image img { width:122%;margin-left:-8%; }
/* Water gets the complete contact stage; the name and registration stay together. */
footer { padding-top:85px;padding-bottom:16px; }
.footer-top { min-height:clamp(660px,90svh,980px); }
.footer-art { top:0;height:100%;mask-image:linear-gradient(transparent,#000 9% 87%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 9% 87%,transparent); }
.footer-wordmark { display:flex;justify-content:center;align-items:flex-start;font-size:28vw;line-height:.88;letter-spacing:-.067em;margin:44px 0 25px;padding:0;overflow:clip; }
.footer-wordmark .wordmark-name { display:inline-block;font-size:1em;line-height:inherit;letter-spacing:inherit;margin:0;padding:0; }
.footer-wordmark .wordmark-registration { font-size:.13em;line-height:1;letter-spacing:0;margin:.07em 0 0 -.12em;padding:0; }
.footer-wordmark .wordmark-base { display:block;font:inherit;letter-spacing:inherit;line-height:inherit;visibility:hidden;margin:0;padding:0; }
.footer-wordmark .wordmark-name.wordmark-sliced { position:relative; }
.footer-wordmark .wordmark-slice { position:absolute;inset:0;display:block;font:inherit;line-height:inherit;letter-spacing:inherit;margin:0;padding:0; }
.gallery-section { padding-top:145px; }
.gallery-section .section-heading h1 { font-size:clamp(64px,8.4vw,150px);letter-spacing:-.055em;line-height:1.02; }
.gallery-section .section-heading > p { max-width:300px; }
.gallery-archive-link { display:flex;width:max-content;margin:45px auto 0; }
.gallery-enhanced .gallery-scroll { height:964svh;position:relative; }
.gallery-enhanced .gallery-stage { position:sticky;top:0;height:100svh;overflow:clip;perspective:1500px; }
.gallery-enhanced .work-grid { position:absolute;inset:0;display:block;transform-style:preserve-3d; }
.gallery-enhanced .work-card { position:absolute;left:50%;top:46%;width:min(62vw,860px);transform-origin:center;backface-visibility:hidden; }
.gallery-enhanced .work-grid .work-card:nth-child(n) { padding:0;margin:0; }
.gallery-enhanced .work-grid .work-card:nth-child(n) .work-image > img { position:static;width:100%;height:100%;max-width:100%;object-fit:contain; }
.gallery-enhanced .work-grid .work-card:nth-child(n) .work-caption { position:static;width:auto;flex-direction:row;align-items:baseline;gap:12px;margin-top:20px; }
.gallery-enhanced .work-grid .work-card:nth-child(n) .work-caption h3 { font-size:clamp(25px,2.5vw,43px); }
.gallery-enhanced .work-grid .work-card:nth-child(n) > p { position:static;width:auto;font-size:14px; }
.gallery-enhanced .work-card .work-image { height:min(52svh,510px);aspect-ratio:auto; }
.gallery-enhanced .work-card .work-image > img { object-fit:contain; }
.gallery-enhanced .work-card .work-caption { margin-top:20px; }
.gallery-enhanced .work-card[aria-hidden=true] .work-caption,.gallery-enhanced .work-card[aria-hidden=true] > p { opacity:0; }
.gallery-controls { position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:28px; }
.gallery-controls[hidden] { display:none; }
.gallery-controls button { width:50px;height:50px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-size:24px; }
.gallery-controls button:disabled { opacity:.3;cursor:default; }
.gallery-current { min-width:125px;text-align:center;font-size:16px; }
.morph-text { display:block;white-space:nowrap; }
.morph-text > span { display:inline-block; }
@media(max-width:640px){.gallery-section{padding-top:112px}.gallery-enhanced .gallery-stage{perspective:800px}.gallery-enhanced .work-card{width:77vw;top:44%}.gallery-enhanced .work-card .work-image{height:39svh}.gallery-controls{bottom:70px;gap:20px}.gallery-current{font-size:14px;min-width:100px}}
.footer-wordmark .letter-mask { padding-bottom:.1em;margin-bottom:-.1em; }
.footer-bottom { padding-top:18px;font-size:12px;border:0; }
.footer-links { padding-top:10px; }
@media(hover:hover) and (pointer:fine) {
 .nav-contact:hover > span { transform:translate(3px,-3px); }
 .hero-explore:hover .round-arrow svg { transform:translateY(3px); }
 .filters button:not([aria-pressed=true]):hover,.bio-tabs button:not([aria-pressed=true]):hover { background:var(--raised);color:var(--ink); }
 .work-card:hover .work-indicator { transform:translate(8px,-8px) scale(.7);opacity:0; }
 .work-card:hover .work-image > img { transform:scale(1.04);transition-duration:700ms; }
 .work-card:hover .work-open { opacity:1;transform:none; }
 .work-card:hover .work-caption h3 { transform:translateX(7px); }
 .work-caption h3 { transition:transform 220ms cubic-bezier(.23,1,.32,1); }
}
@media(max-width:1024px) {
 .hero-copy h1 { font-size:8.7vw; }
 .about-intro { grid-template-columns:.85fr 1.15fr; }
 .service-rows > a { grid-template-columns:1fr 1fr 80px;min-height:145px; }
 .service-preview { width:210px;height:210px; }
 .footer-wordmark { font-size:27.3vw; }
}
@media(max-width:640px) {
 .site-header { inset:16px 16px auto; }
 .site-header > .theme-toggle { top:auto;right:17px;bottom:18px;width:48px;height:48px; }
 .hero-frame { min-height:690px; }
 .hero-copy { top:43%;left:19px;right:19px; }
 .hero-copy h1 { font-size:11.2vw;line-height:1.08;letter-spacing:-.06em; }
 .hero-note { display:block;font-size:14px;max-width:280px;margin-top:24px; }
 .hero-bottom { grid-template-columns:1fr;bottom:25px;gap:18px; }
 .hero-person { font-size:13px; }
 .hero-explore { justify-content:space-between; }
 .hero-explore .round-arrow { margin-right:62px; }
 .loader-duck { top:36%;width:200px;height:250px; }
 .portfolio-loader .loader-word { bottom:25%;font-size:20vw; }
 .loader-status { bottom:18%; }
 .loader-skip { bottom:8%;right:20px; }
 .filters { width:100%;justify-content:space-between;gap:1px;padding:4px; }
 .filters button { padding:10px 9px;font-size:12px;min-height:44px; }
 .bio-tabs { width:100%;justify-content:space-between;padding:4px;gap:0; }
 .bio-tabs button { padding:10px 12px;font-size:12px;min-height:44px; }
 .service-rows > a { grid-template-columns:1fr 50px;min-height:144px;padding:28px 0; }
 .service-rows h3 { font-size:30px; }
 .service-rows p { font-size:13px; }
 .service-preview { width:140px;height:140px;right:-15px; }
 .experience-ten { width:max-content;height:auto;font-size:min(115vw,67svh); }
 .experience-digit,.experience-digit:first-child { font:inherit; }
 .experience-caption { left:61%;top:47%;font-size:22px; }
 .experience-footnote { font-size:11px;max-width:205px; }
 .about-intro { display:flex;flex-direction:column;gap:30px;margin-bottom:60px; }
 .about-profile { width:100%; }
 .about-art { height:95vw;max-height:480px; }
 .about-intro > p[data-scroll-fill] { font-size:34px;line-height:1.22; }
 .about-intro .about-support { margin:0;align-self:start;max-width:270px;font-size:14px; }
 .logo-marquee .about-logo-block { width:240px;height:150px; }
 .logo-marquee .web3-tag { top:5px;right:7px; }
 .about-tab-01 > .f-body { font-size:15px;max-width:285px; }
 .pass-feature { min-height:0;padding-top:50px; }
 .pass-feature .pass-image { min-height:300px; }
 .footer-top { min-height:0; }
 .footer-art { height:105vw;min-height:350px;max-height:480px; }
 .footer-wordmark { font-size:26.6vw;margin-top:35px;margin-bottom:22px; }
 .footer-bottom { padding-top:8px;font-size:10px;padding-right:48px; }
}
@media(prefers-reduced-motion:reduce) {
 .site-header,.theme-toggle,.nav-contact > span,.work-image > img,.work-caption h3,.work-indicator,.loader-word .letter-mask > span,.shutter-letter { animation:none!important;transition:none!important;transform:none!important; }
 .scroll-word { background:none;color:var(--ink); }
 .footer-wordmark .letter-mask > span { animation:none!important;transform:none!important; }
}
/* Readiness choreography: the sculpture forms before the word releases. */
.hero-phrases { display:grid; }
.hero-phrase { grid-area:1 / 1;display:none; }
.hero-phrase.is-current { display:block; }
.hero-phrase > span { display:block; }
.intro-arrival .hero-phrases { animation:intro-copy-arrive 600ms cubic-bezier(.22,1,.36,1) both;animation-delay:850ms; }
body[data-intro=preparing] .hero-motion-toggle,body[data-intro=revealing] .hero-motion-toggle { visibility:hidden; }
.hero-motion-toggle { color:var(--hero-muted);background:none;font-size:12px;min-height:44px;padding:6px 12px;margin-top:4px; }
.hero-motion-toggle[hidden] { display:none; }
.glass-nav,.glass-nav.has-backdrop-optics { background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:24px;transition:padding 700ms cubic-bezier(.16,1,.3,1),border-radius 700ms cubic-bezier(.16,1,.3,1); }
[data-theme=dark] .glass-nav.has-backdrop-optics { background:transparent; }
.glass-nav:before { background:#ffffff40;z-index:1; }
[data-theme=dark] .glass-nav:before { background:#ffffff14; }
body:has(.hero-frame) .site-header:not(.is-scrolled) .glass-nav { --nav-ink:#f3f6fc;color:var(--nav-ink); }
body:has(.hero-frame) .site-header:not(.is-scrolled) .brand img { filter:brightness(0) invert(1); }
[data-theme=dark] body:has(.hero-frame) .site-header:not(.is-scrolled) .glass-nav { --nav-ink:#1b1e24;color:var(--nav-ink); }
[data-theme=dark] body:has(.hero-frame) .site-header:not(.is-scrolled) .brand img { filter:none; }
.glass-nav .nav-liquid-backdrop { position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); }
.glass-nav.has-backdrop-optics .nav-liquid-backdrop { filter:url('#dintsen-liquid-distortion'); }
.glass-nav .nav-optics { z-index:2; }
.glass-nav > :not(.nav-optics,.nav-liquid-backdrop) { z-index:3; }
@media(hover:hover) and (pointer:fine){.glass-nav:hover{padding:11px 12px 11px 19px;border-radius:32px}.brand img{transition:transform 700ms cubic-bezier(.16,1,.3,1)}.brand:hover img{transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.glass-nav,.brand img{transition:none!important}.glass-nav:hover{padding:7px 8px 7px 15px}}
.sound-toggle { position:fixed;top:25px;right:88px;display:grid;place-items:center;width:52px;height:52px;pointer-events:auto;color:var(--nav-ink);background:var(--nav-fill);border:1px solid var(--nav-rule);border-radius:50%;backdrop-filter:blur(14px); }
.sound-toggle svg { width:22px;height:22px; }
.sound-toggle .sound-wave { display:none; }
.sound-toggle[aria-pressed=true] .sound-wave { display:block; }
.sound-toggle[aria-pressed=true] .sound-muted { display:none; }
.sound-toggle:focus-visible { outline:2px solid var(--blue);outline-offset:4px; }
.sound-toggle:disabled { opacity:.4; }
.loader-duck { width:clamp(260px,34vw,480px);height:clamp(300px,52svh,450px);top:38%; }
@media(max-width:1024px){.sound-toggle{top:auto;right:82px;bottom:18px;width:48px;height:48px}.site-header > .theme-toggle{top:auto;right:18px;bottom:18px;width:48px;height:48px}}
@media(max-width:640px){.loader-duck{width:68vw;height:38svh;top:36%}.gallery-current{max-width:42vw}.morph-text{white-space:normal}}