:root{font-family:Arial,Helvetica,sans-serif;color:#f4f4f4;background:#000;--background:#000;--ink:#f4f4f4;--panel:rgba(20,20,20,.88);--line:rgba(255,255,255,.23);color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--ink)}html{overflow-anchor:none;scroll-behavior:auto}header{position:fixed;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:28px 3.5vw;pointer-events:none}.wordmark{font-size:27px;font-weight:800;letter-spacing:-2px;color:inherit;text-decoration:none;pointer-events:auto}.wordmark span{font-size:10px;vertical-align:top;margin-left:5px;letter-spacing:0}.studio-label{font-size:12px;letter-spacing:.13em}#gallery{position:relative;margin:0 3.5vw;isolation:isolate}.gallery-item{position:absolute;margin:0;will-change:transform;overflow:visible}.gallery-item :is(img,video){width:100%;height:100%;object-fit:contain;display:block;transform:scaleY(var(--stretch,1));transition:filter .3s;will-change:transform}.gallery-item:hover :is(img,video){filter:contrast(1.035)}#stage{position:fixed;inset:12vh 23vw;z-index:2;pointer-events:none;outline:none}#stage canvas{width:100%;height:100%;display:block}#status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px}#status[hidden]{display:none}.noise{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.settings{position:fixed;right:3.5vw;bottom:26px;z-index:10;width:260px;color:var(--ink)}.settings summary{list-style:none;cursor:pointer;font-size:14px;padding:10px 15px;border:1px solid var(--line);border-radius:30px;background:var(--panel);backdrop-filter:blur(18px);width:max-content;margin-left:auto;user-select:none}.settings summary::-webkit-details-marker{display:none}.settings summary span{margin-right:9px;font-size:16px}.settings[open] summary{margin-bottom:10px}.controls{padding:22px;background:var(--panel);backdrop-filter:blur(22px);border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column;gap:23px}.control label{font-size:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}.control output{font-size:12px;font-variant-numeric:tabular-nums;opacity:.6}input[type=range]{appearance:none;display:block;width:100%;height:1px;background:var(--line);margin:16px 0 2px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;background:var(--ink);border-radius:50%}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--ink);border:0;border-radius:50%}.color-field{display:flex;align-items:center;gap:9px}input[type=color]{width:23px;height:23px;border:1px solid var(--line);padding:0;background:none;border-radius:50%;cursor:pointer;overflow:hidden}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}button{font:inherit;font-size:12px;color:inherit;cursor:pointer;background:none;border:0;padding:0;text-align:left;opacity:.6}button:hover{opacity:1}:focus-visible{outline:2px solid var(--ink);outline-offset:6px}input:disabled,button:disabled{opacity:.3}.scroll-hint{position:fixed;bottom:35px;left:3.5vw;z-index:4;font-size:12px;letter-spacing:.08em;pointer-events:none;background:var(--panel);padding:6px 8px}.gallery-error{padding:30vh 10vw;font-size:16px}.gallery-item[aria-hidden=true]{pointer-events:none}@media(max-width:700px){header{padding:20px 6vw}#gallery{margin:0 6vw}#stage{inset:22vh 12vw}.settings{right:6vw;bottom:20px}.scroll-hint{left:6vw;bottom:27px}.studio-label{font-size:10px}}@media(prefers-reduced-motion:reduce){.gallery-item :is(img,video){transform:none!important;transition:none}}
/* Grain is deliberately visible over the white background and the photographs. */
.noise{opacity:.14;background-size:192px 192px;background-repeat:repeat;mix-blend-mode:normal}
html{background:var(--background);overflow-x:clip}
body{min-width:280px;overflow-x:clip;overscroll-behavior-x:none}
.settings{max-width:calc(100vw - 32px);bottom:max(26px,env(safe-area-inset-bottom));}
.controls{max-height:calc(100svh - 120px);overflow-y:auto;overscroll-behavior:contain}
.settings summary{min-height:44px;display:flex;align-items:center}
input[type=range]{height:36px;margin:5px 0 0;background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat;touch-action:pan-y}
input[type=color]{width:32px;height:32px}
#reset{min-height:36px;font-size:14px}
@media(max-width:700px){
 header{padding:calc(18px + env(safe-area-inset-top)) 20px 18px}
 #gallery{margin:0 20px}
 #stage{inset:auto;top:50%;left:50%;width:78vw;height:58svh;transform:translate(-50%,-50%)}
 .settings{right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:252px}
 .controls{padding:18px;gap:14px}
 .scroll-hint{left:20px;bottom:calc(23px + env(safe-area-inset-bottom));font-size:10px;max-width:calc(100vw - 140px)}
 .studio-label{font-size:11px}
 input[type=range]{height:44px}
 input[type=range]::-webkit-slider-thumb{width:17px;height:17px}
 input[type=range]::-moz-range-thumb{width:17px;height:17px}
 input[type=color]{width:44px;height:44px}
 #reset{min-height:44px}
}
@media(max-height:500px) and (orientation:landscape){
 #stage{inset:auto;left:50%;top:50%;width:45vw;height:78svh;transform:translate(-50%,-50%)}
 .controls{max-height:calc(100svh - 100px);gap:8px;padding:14px}
 header{padding-top:12px}
}
.noise{opacity:.09}
@media(max-width:700px){body:has(.settings[open]) .scroll-hint{visibility:hidden}.wordmark{background:var(--panel);padding:3px 7px;border-radius:3px}}
/* Animated grain: 15% less opacity than the previous 0.09. */
.noise{inset:-192px;opacity:.0765;animation:grain-shift .8s steps(1,end) infinite;will-change:transform}
@keyframes grain-shift{
  0%,100%{transform:translate(0,0)}
  12.5%{transform:translate(-73px,41px)}
  25%{transform:translate(57px,-89px)}
  37.5%{transform:translate(-119px,-23px)}
  50%{transform:translate(31px,107px)}
  62.5%{transform:translate(101px,-53px)}
  75%{transform:translate(-47px,131px)}
  87.5%{transform:translate(83px,17px)}
}
@media(prefers-reduced-motion:reduce){.noise{animation:none;will-change:auto}}
/* Keep the brand outside the header stacking context so it blends with the gallery. */
header{justify-content:flex-end;min-height:94.67px}
.wordmark{position:fixed;left:3.5vw;top:28px;z-index:6;width:68.4365px;height:44.4705px;display:block;padding:0;background:transparent;border-radius:0;mix-blend-mode:difference}
.wordmark img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;filter:invert(1)}
@media(max-width:700px){.wordmark{left:20px;top:calc(18px + env(safe-area-inset-top));background:transparent;padding:0}header{min-height:74.67px}}
@media(max-height:500px) and (orientation:landscape){.wordmark{top:12px}}
/* Contact stays visible while Studio opens above it. */
.chat-cta{position:fixed;right:3.5vw;bottom:calc(24px + env(safe-area-inset-bottom));z-index:21;display:flex;align-items:center;gap:14px;min-height:56px;padding:0 23px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:#171918;color:#fff;opacity:1;font-size:16px;letter-spacing:-.02em;text-decoration:none;box-shadow:0 5px 22px #0002;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.chat-cta:hover{transform:translateY(-3px);background:#252a27;box-shadow:0 8px 28px #0003}
.chat-cta:active{transform:translateY(-1px)}
.chat-cta:focus-visible{outline:2px solid #73cf98;outline-offset:5px}
.availability{position:relative;width:8px;height:8px;border-radius:50%;background:#94e7b1;flex-shrink:0;box-shadow:0 0 8px #94e7b133}
.availability::after{content:'';position:absolute;inset:-5px;border:1px solid #94e7b1;border-radius:50%;animation:available-pulse 2.8s ease-out infinite}
.chat-icon{margin-left:3px;opacity:.8;transition:transform .25s ease}
.chat-cta:hover .chat-icon{transform:rotate(-7deg)}
@keyframes available-pulse{0%{transform:scale(.5);opacity:0}20%{opacity:.65}80%,100%{transform:scale(1.65);opacity:0}}
.settings{bottom:calc(94px + env(safe-area-inset-bottom))}
.controls{max-height:calc(100svh - 185px)}
@media(max-width:700px){.chat-cta{right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));min-height:54px;padding:0 20px;gap:12px}.settings{bottom:calc(82px + env(safe-area-inset-bottom))}.scroll-hint{max-width:calc(100vw - 235px);font-size:9px}}
@media(max-width:360px){.scroll-hint{display:none}}
@media(prefers-reduced-motion:reduce){.availability::after{animation:none;opacity:.3}.chat-cta,.chat-icon{transition:none}.chat-cta:hover,.chat-cta:hover .chat-icon{transform:none}}
/* White text in difference mode inverts the gallery beneath the original wordmark. */
.wordmark{color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:31.05px;font-weight:800;letter-spacing:-2.3px;line-height:1.25;mix-blend-mode:difference}
.wordmark span{font-size:11.5px;margin-left:5.75px;letter-spacing:0;vertical-align:top}
.chat-cta{left:3.5vw;right:auto}
@media(max-width:700px){.chat-cta{left:max(16px,env(safe-area-inset-left));right:auto}}
.night-shift{position:relative;display:flex;align-items:center;gap:11px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);backdrop-filter:blur(16px);font-size:12px;letter-spacing:.01em;cursor:pointer;pointer-events:auto;user-select:none}
.night-shift input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.night-track{display:block;width:32px;height:18px;border:1px solid var(--line);border-radius:20px;background:var(--line);transition:background .25s ease;pointer-events:none}
.night-track::after{content:'';display:block;width:12px;height:12px;margin:2px;border-radius:50%;background:var(--ink);transition:transform .25s ease}
.night-shift input:checked+.night-track::after{transform:translateX(14px)}
.night-shift:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.night-track,.night-track::after{transition:none}}
.night-shift{width:64px;height:44px;justify-content:center;padding:0;gap:0;background:#171918;color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:0 5px 22px #0002;transition:background .25s ease,box-shadow .25s ease}
.night-shift:hover{background:#252a27;box-shadow:0 8px 28px #0003}
.night-track{width:34px;height:20px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.night-track::after{width:14px;height:14px;background:#fff;transition:transform .25s ease,background .25s ease}
.night-shift input:checked+.night-track::after{background:#94e7b1}
.night-shift:has(input:focus-visible){outline-color:#73cf98}
@media(prefers-reduced-motion:reduce){.night-shift,.night-track::after{transition:none}}
:root{--background:#000;--ink:#f4f4f4;--panel:rgba(20,20,20,.88);--line:rgba(255,255,255,.23);color:#f4f4f4;color-scheme:dark;background:var(--background)}
.night-shift{width:80px}
.night-track{width:46px}
.night-shift input:checked+.night-track::after{transform:translateX(26px)}
.cursor-feedback{position:fixed;inset:0;z-index:100;pointer-events:none;mix-blend-mode:difference;visibility:hidden}
.cursor-feedback.is-visible{visibility:visible}
.cursor-feedback span{position:absolute;top:0;left:0;display:block;background:#fff;border-radius:50%;pointer-events:none;will-change:transform}
@media(hover:hover) and (pointer:fine){html.custom-cursor,html.custom-cursor *{cursor:none!important}}
@media(hover:none),(pointer:coarse){.cursor-feedback{display:none}}
.cursor-feedback .cursor-trail{filter:blur(3px)}
/* Touch devices recycle individual tiles without resetting native scroll momentum. */
html.mobile-gallery,html.mobile-gallery body{height:100%;overflow:hidden;overscroll-behavior-y:none}
.mobile-gallery #gallery{position:fixed;top:0;bottom:0;left:0;right:0;height:100%;overflow:hidden;touch-action:pinch-zoom}
.mobile-gallery .settings{touch-action:pan-y}

/* Mobile feed: one full-width image per row, with no side gutters. */
.mobile-gallery #gallery{margin:0}

/* Navigation and About page. */
.settings[hidden]{display:none!important}
header{gap:22px}
.header-link{pointer-events:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--ink);font-size:14px;text-decoration:none}
.header-link:hover{text-decoration:underline;text-underline-offset:5px}
.about-content{max-width:1200px;margin:0 auto;padding:170px 7vw 80px}
.about-eyebrow{font-size:12px;letter-spacing:.15em;margin:0 0 32px}
.about-content h1{font-size:clamp(64px,10vw,144px);font-weight:500;letter-spacing:-.065em;line-height:.95;margin:0 0 64px}
.about-intro{max-width:720px;margin-left:auto;font-size:clamp(23px,3vw,38px);line-height:1.4;letter-spacing:-.025em}
.about-intro p{margin:0 0 36px}
.about-contact,.about-back{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding:16px 0;max-width:720px;margin-left:auto}
.about-contact{font-size:clamp(18px,2.2vw,26px);margin-top:64px}
.about-back{font-size:14px;border:0;margin-top:16px}
.about-contact:hover,.about-back:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:700px){header{gap:16px}.about-content{padding:140px 20px 48px}.about-content h1{margin-bottom:44px}.about-contact{margin-top:40px}}
.about-content h1{font-size:clamp(48px,8vw,112px);overflow-wrap:break-word}
/* Keep mobile distortion within the space available between images. */
.mobile-gallery .gallery-item :is(img,video){transform:scaleY(min(var(--stretch,1),var(--max-stretch,1.16)))}
/* Compact desktop gallery and softly blurred colour wheel. */
@media(min-width:701px){html:not(.mobile-gallery) #gallery{margin:0 2vw}}
.loader{display:block;flex:none;width:54px;height:54px;border-radius:50%;background:conic-gradient(#ff5374,#ffb84d,#f5ed68,#69dba2,#57bafa,#9473ee,#ff5374);filter:blur(5px);box-shadow:0 0 24px #b99aff35;animation:loader-spin 1.25s linear infinite}
#status:has(.loader) #status-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#status-text{text-align:center;max-width:32ch;line-height:1.5}
@keyframes loader-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loader{animation:none}}
/* Subtle green glow around the contact button. */
.chat-cta{box-shadow:0 5px 22px #0002,0 0 16px rgba(148,231,177,.18),0 0 32px rgba(148,231,177,.08)}
.chat-cta:hover{box-shadow:0 8px 28px #0003,0 0 20px rgba(148,231,177,.28),0 0 40px rgba(148,231,177,.12)}
/* Persistent green underglow, concentrated below the contact button. */
.chat-cta{box-shadow:0 5px 18px #0002,0 10px 20px -5px rgba(148,231,177,.55),0 20px 38px -9px rgba(106,225,150,.38)}
.chat-cta:hover{box-shadow:0 8px 22px #0003,0 12px 24px -5px rgba(148,231,177,.65),0 22px 42px -9px rgba(106,225,150,.46)}
/* A soft green glow travels around the button over eight seconds. */
.chat-cta{animation:contact-glow-orbit 8s linear infinite}
@keyframes contact-glow-orbit{
  0%,100%{box-shadow:0 5px 18px #0002,0 12px 22px -5px rgba(148,231,177,.60),0 20px 38px -9px rgba(106,225,150,.40)}
  25%{box-shadow:0 5px 18px #0002,-13px 0 22px -5px rgba(148,231,177,.60),-20px 0 38px -9px rgba(106,225,150,.40)}
  50%{box-shadow:0 5px 18px #0002,0 -12px 22px -5px rgba(148,231,177,.60),0 -20px 38px -9px rgba(106,225,150,.40)}
  75%{box-shadow:0 5px 18px #0002,13px 0 22px -5px rgba(148,231,177,.60),20px 0 38px -9px rgba(106,225,150,.40)}
}
@media(prefers-reduced-motion:reduce){.chat-cta{animation:none}}
/* Gotham typography and supplied SVG identity. */
@font-face{font-family:Gotham;src:url('./assets/fonts/GothamBook.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gotham;src:url('./assets/fonts/GothamMedium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gotham;src:url('./assets/fonts/GothamBold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{font-family:Gotham,Arial,sans-serif}
body,button,input,select,textarea,.wordmark{font-family:Gotham,Arial,sans-serif}
.wordmark{width:112px;height:44px;display:flex;align-items:center}
.wordmark img{height:auto;filter:brightness(0) invert(1);transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (pointer:fine){.wordmark:hover img{transform:translateY(-2px) rotate(-3deg) scale(1.045)}}
.wordmark:focus-visible img{transform:translateY(-2px) scale(1.045)}
@media(prefers-reduced-motion:reduce){.wordmark img{transition:none}.wordmark:hover img,.wordmark:focus-visible img{transform:none}}
/* Medium weight for interactive labels. */
a,button,summary,.night-shift,input[type=button],input[type=submit]{font-family:Gotham,Arial,sans-serif;font-weight:500}
.wordmark img{width:auto;max-width:100%;height:44px;object-fit:contain}
/* First appearance: staggered photo reveal, independent of scroll distortion. */
.image-pending{opacity:0}
.image-entering{animation:image-reveal 1s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms) both}
.mobile-gallery .image-entering{animation:mobile-video-reveal 300ms ease-out both}
@keyframes mobile-video-reveal{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.mobile-gallery .image-entering{animation:none}}
@keyframes image-reveal{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.image-pending{opacity:1}.image-entering{animation:none}}
/* Keep loading feedback hidden while the white, logo-free view is selected. */
body:has(#night-shift:not(:checked)) #status{display:none}
/* Desktop hover: independent scale preserves the scroll distortion. */
@media(hover:hover) and (pointer:fine){
 html:not(.mobile-gallery) .gallery-item{isolation:isolate}
 html:not(.mobile-gallery) .gallery-item::before{content:'';position:absolute;inset:-24px;z-index:-1;pointer-events:none;background:radial-gradient(circle 160px at calc(var(--glow-x,50%) + 24px) calc(var(--glow-y,50%) + 24px),rgba(111,244,156,.75),rgba(111,244,156,.25) 45%,transparent 75%);filter:blur(22px);opacity:0;transition:opacity .4s ease}
 html:not(.mobile-gallery) .gallery-item :is(img,video){transition:scale .5s cubic-bezier(.2,.7,.2,1),filter .3s;transform-origin:center}
 html:not(.mobile-gallery) .gallery-item.is-hovered{z-index:1}
 html:not(.mobile-gallery) .gallery-item.is-hovered::before{opacity:1}
 html:not(.mobile-gallery) .gallery-item.is-hovered :is(img,video){scale:1.025}
}
@media(prefers-reduced-motion:reduce){html:not(.mobile-gallery) .gallery-item.is-hovered :is(img,video){scale:1}html:not(.mobile-gallery) .gallery-item::before{transition:none}}
/* Recycled desktop copies must receive hover just like the original images. */
@media(hover:hover) and (pointer:fine){html:not(.mobile-gallery) .gallery-item[aria-hidden=true]{pointer-events:auto}}
/* A separate halo preserves green around the difference-blended SVG logo. */
.link-hover-halo{position:fixed;left:0;top:0;width:100px;height:100px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(111,244,156,.34),rgba(111,244,156,.14) 40%,transparent 72%);filter:blur(12px);pointer-events:none;z-index:22;opacity:0;transition:opacity .3s ease}
.link-hover-halo.is-active{opacity:1}
@media(hover:hover) and (pointer:fine){
 .header-link,.about-contact,.about-back{transition:scale .35s ease;transform-origin:center}
 .header-link.link-hovered,.about-contact.link-hovered,.about-back.link-hovered{scale:1.025}
 .chat-cta{transition:transform .25s ease,box-shadow .25s ease,background .25s ease,scale .35s ease}
 .chat-cta.link-hovered{scale:1.025}
}
@media(prefers-reduced-motion:reduce){.link-hover-halo{transition:none}.header-link.link-hovered,.about-contact.link-hovered,.about-back.link-hovered,.chat-cta.link-hovered{scale:1}}
/* Project titles and rounded project viewer. */
.project-caption{position:absolute;left:12px;bottom:12px;padding:10px 15px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(20,20,20,.7);backdrop-filter:blur(14px);color:#fff;font-size:13px;font-weight:500;opacity:0;translate:0 5px;transition:opacity .25s,translate .25s;pointer-events:none}
.gallery-item:hover .project-caption,.gallery-item:focus-visible .project-caption{opacity:1;translate:0 0}
.gallery-item{cursor:pointer}
html.project-open{overflow:hidden}
.project-dialog{position:fixed;inset:0;width:min(1100px,calc(100vw - 40px));max-height:88svh;padding:0;border:1px solid var(--line);border-radius:24px;background:var(--background);color:var(--ink);overflow:auto;box-shadow:0 30px 100px #0006}
.project-dialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(12px)}
.project-dialog[open]{animation:project-open .3s ease both}
.project-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr)}
.project-full-image{display:block;width:100%;height:100%;max-height:85svh;object-fit:contain;background:#101010}
.project-details{padding:72px 32px 40px}
.project-kicker{font-size:10px;letter-spacing:.14em;opacity:.6}
.project-details h2{font-weight:500;font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;line-height:1.15;margin:20px 0 44px}
.project-details h3{font-size:12px;font-weight:500;opacity:.65}
.project-details p{line-height:1.6;font-size:14px}
.project-close{position:absolute;right:12px;top:12px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#202020;color:#fff;border:1px solid #ffffff30;font-size:28px;opacity:1;text-align:center}
@keyframes project-open{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:700px){.project-dialog{width:calc(100vw - 24px);border-radius:20px}.project-layout{grid-template-columns:1fr}.project-full-image{max-height:58svh}.project-details{padding:24px}.project-details h2{margin:12px 0 24px}}
@media(hover:none){.project-caption{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.project-dialog[open]{animation:none}.project-caption{transition:none}}
/* Compact text-only dialog; keep its close control above all content. */
.project-dialog{inset:0;margin:auto;width:min(520px,calc(100vw - 48px));height:fit-content;max-height:calc(100svh - 80px);border-radius:24px;overscroll-behavior:contain;touch-action:pan-y}
.project-layout{display:block}
.project-details{padding:64px 36px 36px}
.project-close{position:absolute;inset:12px 12px auto auto;z-index:10;pointer-events:auto;touch-action:manipulation;cursor:pointer;opacity:1}
.project-close:hover{background:#383838}
html.custom-cursor .project-dialog,html.custom-cursor .project-dialog *{cursor:auto!important}
html.custom-cursor .project-dialog button{cursor:pointer!important}
@media(max-width:700px){.project-dialog{width:calc(100vw - 40px);max-height:calc(100svh - 80px);border-radius:20px}.project-details{padding:64px 24px 28px}}
/* Frosted project card with a drifting green glow. */
.project-dialog{background:rgba(20,24,22,.60);color:#f4f4f4;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);box-shadow:0 24px 80px #0005,0 18px 42px -18px #82e9a84d;isolation:isolate}
.project-dialog::before{content:'';position:absolute;left:12%;bottom:-48px;width:70%;height:115px;border-radius:50%;background:radial-gradient(ellipse,rgba(115,245,161,.5),rgba(115,245,161,.12) 55%,transparent 75%);filter:blur(26px);z-index:-1;pointer-events:none;animation:project-glow 7s ease-in-out infinite alternate}
.project-dialog::backdrop{background:rgba(0,0,0,.24);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:project-backdrop-in .45s ease both}
.project-dialog[open]{animation:project-enter .55s cubic-bezier(.2,.7,.2,1) both}
.project-dialog[open].is-closing{animation:project-exit .36s ease both;pointer-events:none}
.project-dialog.is-closing::backdrop{animation:project-backdrop-out .36s ease both}
.project-close{background:rgba(30,38,33,.65);backdrop-filter:blur(12px)}
@keyframes project-enter{from{opacity:0;filter:blur(12px);transform:translateY(14px) scale(.97)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes project-exit{from{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}to{opacity:0;filter:blur(12px);transform:translateY(10px) scale(.98)}}
@keyframes project-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes project-backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes project-glow{from{transform:translateX(-20%) scale(.9);opacity:.65}to{transform:translateX(35%) scale(1.15);opacity:1}}
@media(prefers-reduced-motion:reduce){.project-dialog[open],.project-dialog[open].is-closing,.project-dialog::before,.project-dialog::backdrop{animation:none}}
/* Match the page grain inside the dialog's top layer. */
.project-noise{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:20;background-repeat:repeat;background-size:192px 192px;opacity:.0765;animation:project-grain .8s steps(1,end) infinite}
@keyframes project-grain{0%,100%{background-position:0 0}12.5%{background-position:-73px 41px}25%{background-position:57px -89px}37.5%{background-position:-119px -23px}50%{background-position:31px 107px}62.5%{background-position:101px -53px}75%{background-position:-47px 131px}87.5%{background-position:83px 17px}}
@media(prefers-reduced-motion:reduce){.project-noise{animation:none}}
/* Keep the project card scrollable without a visible scrollbar. */
.project-dialog{scrollbar-width:none}
.project-dialog::-webkit-scrollbar{display:none;width:0;height:0}
/* Reserve the desktop scrollbar space while the dialog locks page scrolling. */
html{scrollbar-gutter:stable}
html.mobile-gallery{scrollbar-gutter:auto}
.cursor-feedback[popover]{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:visible;color:inherit;pointer-events:none}
.cursor-feedback[popover]::backdrop{background:transparent;pointer-events:none}
@supports selector(:popover-open){@media(hover:hover) and (pointer:fine){html.custom-cursor .project-dialog,html.custom-cursor .project-dialog *{cursor:none!important}}}
.project-dialog::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(circle 180px at var(--pointer-glow-x,50%) var(--pointer-glow-y,50%),rgba(111,244,156,.38),rgba(111,244,156,.13) 45%,transparent 75%);filter:blur(20px);opacity:0;transition:opacity .35s ease}
.project-dialog.has-pointer-glow::after{opacity:1}
@media(prefers-reduced-motion:reduce){.project-dialog::after{transition:none}}
/* Glass contact button and theme switch. */
.chat-cta,.night-shift{background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(255,255,255,.10)),rgba(22,32,27,.34);backdrop-filter:blur(22px) saturate(1.65);-webkit-backdrop-filter:blur(22px) saturate(1.65);border:1px solid rgba(255,255,255,.35);color:#fff;text-shadow:0 1px 5px #0006}
.chat-cta::before,.night-shift::before{content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.48),inset 0 -1px 1px rgba(255,255,255,.10)}
.chat-cta:hover,.night-shift:hover{background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,.08) 50%,rgba(255,255,255,.15)),rgba(22,32,27,.32)}
.night-shift{box-shadow:0 8px 24px #0002,inset 0 1px 0 #ffffff30}
.night-track{background:rgba(0,0,0,.14);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 4px #0002}
.night-track::after{background:linear-gradient(145deg,#fff,#d6e3dc);box-shadow:0 2px 5px #0003}
.night-shift input:checked+.night-track::after{background:linear-gradient(145deg,#d5ffe2,#94e7b1)}
.chat-icon{opacity:1;filter:brightness(0) invert(1);width:21px;height:21px}
/* Page grain over the glass contact surface, without intercepting clicks. */
.chat-cta .contact-noise{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background-repeat:repeat;background-size:192px 192px;opacity:.0765;animation:project-grain .8s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){.chat-cta .contact-noise{animation:none}}
/* Softly rounded gallery photographs. */
.gallery-item :is(img,video){border-radius:12px}
/* Equal desktop gutters and local liquid image surface. */
@media(min-width:701px){html:not(.mobile-gallery) #gallery{margin:0 30px}}
.liquid-image{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;pointer-events:none;z-index:0}
.liquid-active>:is(img,video){opacity:0}
.project-caption{z-index:2}
/* Restore the pre-liquid layout and keep hovered photos crisp. */
@media(min-width:701px){html:not(.mobile-gallery) #gallery{margin:0 2vw}}
.gallery-item:hover :is(img,video){filter:none}
/* Soft silhouette shadow follows the 3D model and its fade animation. */
#stage canvas{filter:drop-shadow(0 10px 12px rgba(0,0,0,.28))}
/* Uniform desktop gutters; preserve mobile spacing. */
@media(min-width:701px){html:not(.mobile-gallery) #gallery{margin:0 30px}}
/* Grain reduced by 35% from 0.0765 across all surfaces. */
.noise,.project-noise,.chat-cta .contact-noise{opacity:.049725}
/* Curtain transition with persistent contact and grain layers. */
@view-transition{navigation:none}
:root{view-transition-name:root}
.noise{view-transition-name:page-grain}
.chat-cta{view-transition-name:persistent-contact}







@keyframes page-curtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.about-content{padding-bottom:140px}
@media(prefers-reduced-motion:reduce){::view-transition-new(root){animation:none}}
/* Circular reveal, with navigation and controls outside the transition. */
html,body{background-color:#000}
header{view-transition-name:persistent-navigation}
.wordmark{view-transition-name:persistent-brand}




@keyframes page-circle{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}



.night-shift:has(input:disabled){cursor:default}
.night-shift input:disabled{cursor:default}
@media(prefers-reduced-motion:reduce){::view-transition-new(root){animation:none}}
/* Keep the circular exit; reveal the destination content with fade and blur. */
@view-transition{navigation:none}
.page-exit-circle{position:fixed;inset:0;background:#000;z-index:4;pointer-events:auto;animation:exit-circle .8s cubic-bezier(.65,0,.25,1) both}
@keyframes exit-circle{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(150% at 50% 50%)}}
.about-content>.about-eyebrow,.about-content>h1,.about-content>.about-intro,.about-content>.about-contact,.about-content>.about-back{animation:about-reveal .9s cubic-bezier(.2,.7,.2,1) both}
.about-content>.about-eyebrow{animation-delay:.08s}
.about-content>h1{animation-delay:.18s}
.about-content>.about-intro{animation-delay:.3s}
.about-content>.about-contact{animation-delay:.42s}
.about-content>.about-back{animation-delay:.52s}
@keyframes about-reveal{from{opacity:0;filter:blur(12px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}
@media(prefers-reduced-motion:reduce){.page-exit-circle,.about-content>.about-eyebrow,.about-content>h1,.about-content>.about-intro,.about-content>.about-contact,.about-content>.about-back{animation:none}}
/* Shared glass capsule for navigation and the 3D switch. */
.header-capsule{position:relative;display:flex;align-items:center;gap:12px;padding:5px 10px 5px 20px;min-height:56px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(255,255,255,.10)),rgba(22,32,27,.34);backdrop-filter:blur(22px) saturate(1.65);-webkit-backdrop-filter:blur(22px) saturate(1.65);box-shadow:0 8px 24px #0002,inset 0 1px 1px #ffffff70;pointer-events:auto}
.header-capsule .header-link{color:#fff;text-shadow:0 1px 5px #0006;font-size:14px;padding:0 8px 0 0}
.header-capsule .night-shift{width:58px;height:44px;min-height:44px;border:0;border-left:1px solid #ffffff26;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-left:12px}
.header-capsule .night-shift:hover{background:transparent;box-shadow:none}
.header-capsule .night-shift::before{display:none}
.header-capsule .night-track{flex-shrink:0}
@media(max-width:700px){.header-capsule{min-height:54px;padding:4px 10px 4px 16px;gap:8px}.header-capsule .header-link{font-size:13px}}
/* Match the two glass capsules: orbiting glow, lift and gentle enlargement. */
.header-capsule{animation:contact-glow-orbit 8s linear infinite;transition:transform .25s ease,scale .35s ease,background .25s ease,box-shadow .25s ease}
@media(hover:hover) and (pointer:fine){
 .header-capsule:hover{transform:translateY(-3px);scale:1.025;background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,.08) 50%,rgba(255,255,255,.15)),rgba(22,32,27,.32)}
 .header-capsule .header-link.link-hovered{scale:1}
 .header-capsule .header-link:hover{text-decoration:none}
}
.header-capsule:active{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.header-capsule{animation:none;transition:none}.header-capsule:hover,.header-capsule:active{transform:none;scale:1}}
/* About follows the gallery's rounded surfaces and green glass accents. */
.about-redesign{max-width:1440px;padding:150px 30px 140px}
.about-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;margin-bottom:30px}
.about-heading .about-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:30px}
.about-dot{width:6px;height:6px;border-radius:50%;background:#94e7b1;box-shadow:0 0 14px #94e7b180}
.about-heading h1{font-size:clamp(46px,6.3vw,88px);line-height:1.04;margin:0 0 24px;font-weight:500;letter-spacing:-.065em}
.about-heading h1 span{color:#94e7b1}
.about-tagline{font-size:14px;color:#ffffff99;line-height:1.6}
.about-art{position:relative;display:block;min-width:0;overflow:hidden;aspect-ratio:1.15;border-radius:24px;border:1px solid #ffffff20;background:#141714;box-shadow:0 20px 70px #84e9a50a}
.about-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.about-art:hover img{transform:scale(1.035)}
.about-art-label{position:absolute;bottom:18px;left:18px;right:18px;display:flex;justify-content:space-between;padding:16px 20px;border:1px solid #ffffff35;background:#18201c80;backdrop-filter:blur(22px);border-radius:999px;font-size:13px;color:#fff}
.about-bottom{display:grid;grid-template-columns:1.1fr 1fr;gap:30px}
.about-glass{border-radius:24px;border:1px solid #ffffff24;background:linear-gradient(135deg,#ffffff0e,#ffffff03),#11181370;backdrop-filter:blur(22px);padding:36px;box-shadow:inset 0 1px 0 #ffffff12}
.about-glass .about-eyebrow{color:#ffffff80;font-size:10px;margin:0 0 24px}
.about-bio>p:not(.about-eyebrow){font-size:clamp(19px,2vw,26px);line-height:1.55;letter-spacing:-.025em;margin:0}
.about-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.about-tags span{padding:9px 14px;border:1px solid #ffffff20;border-radius:999px;font-size:11px;color:#ffffffb3}
.about-connect{background:radial-gradient(ellipse at 100% 100%,#94e7b119,transparent 70%),#11181370}
.about-connect h2{font-size:clamp(25px,3vw,38px);line-height:1.18;font-weight:500;letter-spacing:-.04em;margin:0 0 26px}
.about-email,.about-work-link{display:flex;justify-content:space-between;gap:16px;text-decoration:none;color:#f4f4f4;font-size:14px;padding:12px 0;min-height:44px}
.about-email{border-bottom:1px solid #ffffff20}
.about-work-link{font-size:12px;color:#94e7b1;margin-top:8px}
.about-email:hover,.about-work-link:hover{color:#94e7b1}
.about-heading,.about-art,.about-bio,.about-connect{animation:about-reveal .9s cubic-bezier(.2,.7,.2,1) both}
.about-art{animation-delay:.12s}.about-bio{animation-delay:.24s}.about-connect{animation-delay:.36s}
@media(max-width:700px){.about-redesign{padding:128px 20px 130px}.about-hero,.about-bottom{grid-template-columns:1fr;gap:24px}.about-hero{margin-bottom:24px}.about-heading h1{font-size:clamp(46px,11vw,72px)}.about-art{aspect-ratio:1.2;border-radius:20px}.about-glass{padding:26px;border-radius:20px}}
@media(prefers-reduced-motion:reduce){.about-heading,.about-art,.about-bio,.about-connect{animation:none}.about-art img{transition:none}.about-art:hover img{transform:none}}
/* Pointer-following green glow within the About cards. */
.about-glass,.about-art{position:relative;isolation:isolate}
.about-glass::after,.about-art::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle 190px at var(--box-glow-x,50%) var(--box-glow-y,50%),rgba(111,244,156,.3),rgba(111,244,156,.1) 45%,transparent 75%);filter:blur(18px);opacity:0;transition:opacity .35s ease;z-index:-1}
.about-art::after{z-index:1}
.about-glass.box-glowing::after,.about-art.box-glowing::after{opacity:1}
@media(prefers-reduced-motion:reduce){.about-glass::after,.about-art::after{transition:none}}
/* Loading feedback follows the desktop cursor; touch retains the centered wheel. */
.cursor-feedback .cursor-loader{display:none;width:30px;height:30px;background:conic-gradient(#ff5374,#ffb84d,#f5ed68,#69dba2,#57bafa,#9473ee,#ff5374);filter:blur(3px);translate:-50% -50%;box-shadow:0 0 16px #b99aff35}
@media(hover:hover) and (pointer:fine){
 .cursor-loading #status>.loader{display:none}
 .cursor-loading .cursor-feedback{mix-blend-mode:normal}
 .cursor-loading .cursor-feedback .cursor-loader{display:block}
 .cursor-loading .cursor-feedback .cursor-head,.cursor-loading .cursor-feedback .cursor-trail{opacity:0!important}
}

html{color-scheme:dark;background:#000}body{background:#000}
/* Avoid native touch highlights and focus rings on media; keep keyboard focus visible. */
.gallery-item,.gallery-item video{-webkit-tap-highlight-color:transparent}
.gallery-item:focus:not(:focus-visible){outline:none}
#gallery.pointer-interaction .gallery-item:focus{outline:none}
.gallery-item video{pointer-events:none;border:0;outline:none;-webkit-user-select:none;user-select:none}
/* Shared page gutters and a common vertical center for brand and navigation. */
:root{--page-gutter:30px;--header-top:28px;--nav-height:56px}
header{padding:var(--header-top) max(var(--page-gutter),env(safe-area-inset-right)) 0;min-height:0}
.wordmark{left:max(var(--page-gutter),env(safe-area-inset-left));top:calc(var(--header-top) + (var(--nav-height) - 44px)/2)}
.header-capsule{height:var(--nav-height);min-height:var(--nav-height)}
.chat-cta{left:max(var(--page-gutter),env(safe-area-inset-left))}
.project-caption{margin:0;left:16px;bottom:16px;max-width:calc(100% - 32px);padding:10px 15px;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:700px){
 :root{--page-gutter:20px;--header-top:calc(18px + env(safe-area-inset-top));--nav-height:54px}
 .project-caption{left:12px;bottom:12px;max-width:calc(100% - 24px)}
}
@media(max-height:500px) and (orientation:landscape){:root{--header-top:calc(12px + env(safe-area-inset-top))}}
@media(min-width:600px){.mobile-gallery #gallery{margin:0 20px}}
/* Mobile Pinterest-style trial: two compact masonry lanes. */
@media(min-width:1440px) and (pointer:fine){
 :root{--nav-height:80px}
 .wordmark{width:170px;height:66px;top:calc(var(--header-top) + (var(--nav-height) - 66px)/2)}
 .wordmark img{height:66px}
 .header-capsule{padding:9px 20px 9px 30px;gap:20px;background-color:rgba(22,32,27,.7)}
 .header-capsule .header-link{font-size:20px}
 .header-capsule .night-shift{width:82px;height:60px;min-height:60px;padding-left:20px}
 .header-capsule .night-track{transform:scale(1.2)}
 .chat-cta{min-height:78px;padding:0 34px;gap:18px;font-size:22px;background-color:rgba(22,32,27,.7)}
 .chat-icon{width:29px;height:29px}
 .chat-cta .availability{width:10px;height:10px}
}
@media(max-width:599px){
 .mobile-gallery #gallery{margin:0 12px}
 .gallery-item :is(img,video){border-radius:12px}
 .project-caption{left:8px;bottom:8px;max-width:calc(100% - 16px);padding:6px 8px;font-size:10px;line-height:1.3}
}
@media(max-height:500px) and (orientation:landscape){
 #stage{inset:auto;left:50%;top:50%;width:36vw;height:72svh;transform:translate(-50%,-50%)}
 .chat-cta{min-height:44px;padding:0 18px;bottom:max(12px,env(safe-area-inset-bottom));font-size:14px}
 .project-caption{left:12px;bottom:12px;padding:8px 12px;font-size:12px}
}
/* Primary contact action stays distinct from the navigation controls. */
.chat-cta{isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#ffffff28,#ffffff08 48%,#ffffff18),rgba(22,32,27,.58);color:#fff;border-color:#ffffff59;font-weight:500;text-shadow:0 1px 5px #0008;backdrop-filter:blur(22px) saturate(1.65);-webkit-backdrop-filter:blur(22px) saturate(1.65);animation:contact-presence 6s ease-in-out infinite}
.chat-cta:hover{background:linear-gradient(145deg,#ffffff38,#ffffff10 48%,#ffffff22),rgba(22,32,27,.65);color:#fff}
.chat-cta::after{content:'';position:absolute;inset:-70% -35%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 25% 35%,#94e7b19c,transparent 48%),radial-gradient(ellipse at 75% 65%,#89c9ff80,transparent 45%),radial-gradient(ellipse at 50% 80%,#c5a2ef70,transparent 42%);filter:blur(18px);animation:contact-dispersion 10s ease-in-out infinite alternate}
.chat-cta .chat-icon{filter:brightness(0) invert(1)}
.chat-cta .availability{background:#94e7b1;box-shadow:0 0 12px #94e7b180}
.chat-cta:focus-visible{outline:3px solid #fff;outline-offset:5px}
@keyframes contact-presence{0%,100%{box-shadow:0 8px 28px #0005,0 0 18px #94e7b12b}50%{box-shadow:0 8px 28px #0005,0 0 32px #94e7b161}}
@keyframes contact-dispersion{0%{transform:translate(-12%,-8%) rotate(-12deg) scale(.95)}50%{transform:translate(10%,8%) rotate(12deg) scale(1.15)}100%{transform:translate(-3%,12%) rotate(-5deg) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.chat-cta{animation:none;box-shadow:0 8px 28px #0005,0 0 18px #94e7b12b}.chat-cta::after{animation:none}}
/* Black controls with a travelling rim light inspired by the reference. */
@property --contact-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.header-capsule,.header-capsule:hover,.chat-cta,.chat-cta:hover{background:#000;backdrop-filter:none;-webkit-backdrop-filter:none}
.header-capsule{animation:none;box-shadow:0 8px 24px #0005,inset 0 1px 0 #ffffff18}
.chat-cta{overflow:visible;animation:none;border:1px solid #ffffff26;box-shadow:0 8px 28px #0006}
.chat-cta::before,.chat-cta::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--contact-angle),transparent 0deg,transparent 245deg,#8250df80 280deg,#bba0ff 310deg,#fff 330deg,transparent 355deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:contact-rim 4.5s linear infinite;transform:none;box-shadow:none;z-index:0}
.chat-cta::before{filter:none}
.chat-cta::after{inset:-3px;padding:4px;filter:blur(5px);opacity:.65}
.chat-cta:hover::after{opacity:1}
@keyframes contact-rim{to{--contact-angle:360deg}}
@media(prefers-reduced-motion:reduce){.chat-cta::before,.chat-cta::after{animation:none;--contact-angle:40deg}}
/* Keep the rim below the label and apply mask composition after both shorthands (Safari). */
.chat-cta::before,.chat-cta::after{
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
}
.chat-cta>span:not(.contact-noise),.chat-cta>.chat-icon{position:relative;z-index:3}
@media(hover:none),(pointer:coarse){
 .chat-cta::after{display:none}
 .chat-cta::before{padding:1.5px;filter:none}
 .chat-cta:hover{transform:none}
 .link-hover-halo{display:none}
}
#project-description,#project-credits{white-space:pre-line}
#project-description:empty,#project-credits:empty,#project-client:empty{display:none}