/* Liquid-glass inspired interaction system. Built with CSS only; no third-party shader code. */
.liquid-control{--glass-radius:12px;position:relative;isolation:isolate;overflow:hidden;border-radius:var(--glass-radius);background-image:linear-gradient(140deg,color-mix(in srgb,var(--accent) 8%,transparent),rgba(255,255,255,.035) 36%,rgba(255,255,255,.008) 70%,color-mix(in srgb,var(--accent) 7%,transparent));background-clip:padding-box;backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.035),0 5px 18px rgba(0,0,0,.12);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease,background-color .28s ease}
.liquid-control::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,transparent 16%,rgba(255,255,255,.13) 31%,transparent 43%),radial-gradient(ellipse at 18% 0%,rgba(255,255,255,.13),transparent 48%);opacity:.55;transition:opacity .35s ease,transform .55s ease;transform:translateX(-8%)}
.liquid-control:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 65%,white);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 18px color-mix(in srgb,var(--accent) 9%,transparent),0 10px 26px rgba(0,0,0,.25),0 0 20px var(--mood-glow,rgba(216,253,103,.12))}
.liquid-control:hover::after{opacity:.9;transform:translateX(8%)}
.liquid-control:active{transform:translateY(0) scale(.975);transition-duration:.1s}
.liquid-control:focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent),inset 0 1px 0 #ffffff40}
.liquid-control[aria-pressed="true"],.liquid-control[aria-selected="true"],.liquid-control[open]{border-color:color-mix(in srgb,var(--accent) 76%,white);box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent) 12%,transparent),0 0 18px var(--mood-glow,rgba(216,253,103,.12))}
.site-header .main-nav a{--glass-radius:999px;padding:10px 15px;border:1px solid rgba(255,255,255,.09);color:#e4e7df;text-decoration:none}
.site-header .header-cta,.hero-actions .btn,.service-cta .btn,.contact-buttons a,.dialog-footer button,.dialog-close,.deck-controls button,.mood-reset{border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.2))}
.hero-actions .btn,.service-cta .btn{background-color:var(--accent);background-image:linear-gradient(135deg,rgba(255,255,255,.32),transparent 42%,rgba(0,0,0,.06));color:var(--dark)}
.deck-controls button{--glass-radius:50%;width:42px;height:42px;color:var(--text);background-color:rgba(12,15,12,.76)}
.edit-notes summary{--glass-radius:9px;padding-inline:12px;background-color:rgba(255,255,255,.025)}
.contact-buttons a{--glass-radius:10px;display:inline-flex;align-items:center;padding:14px 20px;background-color:rgba(255,255,255,.035)}
.dialog-close,.dialog-footer button,.mood-reset{background-color:rgba(255,255,255,.045)}
.project-enquiry,.outline-link{--glass-radius:7px;padding-inline:10px;text-decoration:none}
.liquid-control[disabled],.liquid-control[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;filter:none}

/* Sculptures retain their original geometry and controls; highlights add a chrome-like moving skin. */
.service-sculpture .sculpture-core{filter:drop-shadow(0 0 10px var(--mood-glow,rgba(216,253,103,.18)));}
.service-sculpture .sculpture-core::before,.finale-sculpture .finale-orb span::after{content:"";position:absolute;inset:-4%;border-radius:50%;pointer-events:none;background:conic-gradient(from var(--metal-angle,0deg),transparent 0 15%,rgba(255,255,255,.58) 19%,color-mix(in srgb,var(--accent) 62%,white) 22%,transparent 28% 53%,rgba(255,255,255,.34) 58%,transparent 64% 100%);mix-blend-mode:screen;opacity:.62;filter:blur(1.4px);animation:metal-flow 9s linear infinite}
.finale-sculpture .finale-orb span{overflow:hidden;background:radial-gradient(ellipse at 30% 24%,#fff 0 2%,#dce4dc 7%,#727c76 18%,#1a211d 36%,#050706 52%,#89938c 66%,#1d241f 78%,#080a09 100%);box-shadow:inset -13px -17px 25px #000c,inset 5px 6px 13px #ffffff40,0 0 42px var(--mood-glow,rgba(216,253,103,.2));animation:metal-breathe 5s ease-in-out infinite alternate}
.finale-sculpture .finale-orb span::after{inset:-20%;opacity:.4;animation-duration:13s}
.finale-sculpture .finale-orb i{border-color:color-mix(in srgb,var(--accent) 64%,#e9eee9);box-shadow:inset 0 0 14px rgba(255,255,255,.12),0 0 18px var(--mood-glow,rgba(216,253,103,.18));filter:drop-shadow(0 0 2px rgba(255,255,255,.22))}
.service-sculpture .sculpture-core,.finale-sculpture .finale-orb span{transition:filter .35s ease,box-shadow .35s ease}
.service-sculpture:hover .sculpture-core,.finale-sculpture:hover .finale-orb span{filter:brightness(1.2) drop-shadow(0 0 16px var(--mood-glow,rgba(216,253,103,.3)))}
.service-sculpture .is-dragging .sculpture-core,.finale-sculpture.is-dragging .finale-orb span{filter:brightness(1.3) saturate(1.15) drop-shadow(0 0 20px var(--mood-glow,rgba(216,253,103,.38)))}
@keyframes metal-flow{to{--metal-angle:360deg}}
@keyframes metal-breathe{from{filter:brightness(.92) saturate(.9)}to{filter:brightness(1.13) saturate(1.12)}}
@property --metal-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@media(hover:none){.liquid-control:hover{transform:none}.liquid-control:hover::after{transform:none}}
@media(prefers-reduced-motion:reduce){.liquid-control,.liquid-control::after{transition:none}.liquid-control:hover,.liquid-control:active{transform:none}.service-sculpture .sculpture-core::before,.finale-sculpture .finale-orb span,.finale-sculpture .finale-orb span::after{animation:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.liquid-control{background-color:rgba(25,29,24,.96)}}
/* Refined header: background optics are isolated from the readable controls. */
.site-header{isolation:isolate;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid #ffffff30;box-shadow:0 12px 35px #0004}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,#ffffff14,#ffffff03 38%,var(--mood-glow,#d8fd6712) 75%,#ffffff12),#11161088;backdrop-filter:blur(18px) saturate(1.65);-webkit-backdrop-filter:blur(18px) saturate(1.65);box-shadow:inset 0 1px #ffffff55,inset 0 -1px #ffffff10}
@supports(backdrop-filter:url("#header-refraction")){.site-header::before{backdrop-filter:url("#header-refraction") blur(12px) saturate(1.5)}}
.site-header .header-cta{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;padding:12px 20px;line-height:1;flex-shrink:0}
.site-header .header-cta span{display:inline-flex;align-items:center;justify-content:center;margin:0;width:18px;height:18px;line-height:1}
.site-header .brand{overflow:visible;background:none;box-shadow:none;backdrop-filter:none}
.color-node{backdrop-filter:none;-webkit-backdrop-filter:none}
.project-visual,.deck-card{border-radius:16px;border-color:#ffffff50;box-shadow:inset 0 0 0 1px #ffffff15,0 18px 45px #0006}
.project-visual:hover,.deck-card:hover{border-color:var(--accent)}
.deck-play,.play-button{background:linear-gradient(135deg,#ffffff60,#ffffff08),color-mix(in srgb,var(--accent) 72%,transparent);backdrop-filter:blur(12px);box-shadow:inset 0 2px 2px #ffffff80,0 6px 18px #0005;border:1px solid #ffffff65}
.service-sculpture .sculpture-core::before{display:none}
.service-sculpture .sculpture-core span{background:linear-gradient(115deg,#89918c 12%,#fff 24%,#252c28 32%,var(--accent) 42%,#f6fff8 48%,#343d36 53%,#e0ebe2 68%,#78867c 78%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none;animation:chrome-sweep 8s ease-in-out infinite alternate}
.service-sculpture .sculpture-core i{border:2px solid color-mix(in srgb,var(--accent) 45%,#dae7dd);box-shadow:inset 0 1px 2px #fff8,0 1px 3px #000a}
.aperture-sculpture i:nth-child(n){background:linear-gradient(125deg,#101713 5%,#aab9b0 18%,#f6fff9 25%,#39473f 34%,var(--accent) 44%,#202c25 51%,#dce7df 65%,#fff 70%,#354138 82%);background-size:220% 100%;animation:chrome-sweep 10s ease-in-out infinite alternate;animation-delay:calc(var(--blade) * -.7s)}
@keyframes chrome-sweep{from{background-position:0% 50%}to{background-position:100% 50%}}
.service-sculpture .sculpture-core span,.aperture-sculpture i:nth-child(n),.finale-sculpture .finale-orb span,.finale-sculpture .finale-orb span::after{animation-play-state:paused}
.sculpture-running .sculpture-core span,.sculpture-running .aperture-sculpture i:nth-child(n),.sculpture-running .finale-orb span,.sculpture-running .finale-orb span::after{animation-play-state:running}
@media(max-width:700px){.site-header .header-cta{padding:10px 13px;gap:8px;min-height:44px}.site-header .main-nav a{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.service-sculpture .sculpture-core span,.aperture-sculpture i:nth-child(n){animation:none}}
@media(forced-colors:active){.liquid-control{border:1px solid ButtonText}.site-header::before{background:Canvas}.service-sculpture .sculpture-core span{color:CanvasText}}
/* Review refinements: keep glass selective and preserve readable actions. */
.site-header .main-nav a{background:none;border:0;border-radius:0;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header .header-cta{background:transparent;border:1px solid #9ba68c;border-radius:4px;box-shadow:none}
.site-header .header-cta:hover{background:var(--accent);color:#111}
.contact-buttons a{background:#151714;color:#fff;border:1px solid #151714;border-radius:4px;padding:17px 20px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.contact-buttons a:hover{background:#252a22;color:#fff}
.contact-buttons a:focus-visible{outline:2px solid #151714;outline-offset:4px}
#resetMood{background:transparent;border:0;border-radius:0;box-shadow:none;padding:8px 0;min-height:44px}
#resetMood:hover{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.about .outline-link{align-items:center;justify-content:flex-start;gap:20px;padding:14px 0;border:0;border-radius:0;background:none;box-shadow:none;position:relative;min-height:48px;transition:color .2s}
.about .outline-link::after{content:"";position:absolute;bottom:3px;left:0;right:0;height:1px;background:var(--accent);transform:scaleX(.24);transform-origin:left;opacity:.65;transition:transform .35s ease,opacity .35s ease}
.about .outline-link:is(:hover,:focus-visible)::after{transform:scaleX(1);opacity:1}
.about .outline-link span{display:inline-block;border:0;border-radius:0;width:auto;height:auto;color:var(--accent);font-size:20px;line-height:1;transition:transform .25s}
.about .outline-link:hover span{transform:translate(3px,-3px)}
.service-sculpture .sculpture-core,.service-sculpture:hover .sculpture-core{filter:none}
.service-sculpture .sculpture-core::before{display:none}
.service-sculpture .sculpture-core span{background:none;color:var(--accent);animation:none;text-shadow:0 0 50px var(--mood-glow,#b8e35b66)}
.service-sculpture .sculpture-core i{border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:none}
::-webkit-scrollbar-thumb{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,#31382c),var(--accent),color-mix(in srgb,var(--accent) 65%,#31382c));border:2px solid #10140f;border-radius:12px;box-shadow:inset 1px 0 1px #ffffff60}
@media(prefers-reduced-motion:reduce){.about .outline-link span{transition:none}.about .outline-link:hover span{transform:none}}

@media(prefers-reduced-motion:reduce){.about .outline-link::after{transition:none}}
