/* ==========================================================================
   Liquid Case — project pages only.
   One material system for all seven case studies: frosted liquid glass over a
   slow ambient tint taken from each project's own hero image, plus viscous,
   spring-driven interaction (liquid-case.js). Everything is scoped to
   `.project-dialog.lq`; removing that class restores the previous design.
   ========================================================================== */

@property --lq-hl{syntax:'<number>';inherits:false;initial-value:0}

.project-dialog.lq{
 --lq-paper:#f3f3f1;
 --lq-ink:#0b0b0b;
 --lq-muted:#5f5f5c;
 --lq-faint:#8c8c88;
 --lq-glass:rgba(255,255,255,.46);
 --lq-glass-strong:rgba(255,255,255,.7);
 --lq-blur:blur(22px) saturate(1.7);
 --lq-rim:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.035),inset 0 0 0 1px rgba(255,255,255,.5);
 --lq-shadow:0 1px 1px rgba(20,20,20,.03),0 10px 26px -12px rgba(20,20,20,.14),0 34px 70px -38px rgba(20,20,20,.22);
 --lq-shadow-lift:0 1px 1px rgba(20,20,20,.03),0 18px 40px -16px rgba(20,20,20,.2),0 50px 90px -40px rgba(20,20,20,.28);
 --lq-r:30px;
 --lq-r-sm:20px;
 --lq-spring:cubic-bezier(.34,1.56,.64,1);
 --lq-ease:cubic-bezier(.22,1,.36,1);
 background:var(--lq-paper)!important;
 color:var(--lq-ink);
 scrollbar-width:none;
}
.project-dialog.lq::-webkit-scrollbar{display:none}
.project-dialog.lq.liquid-opening{background:transparent!important}

/* ---------- page canvas: ambient tint + viscous cursor field ---------- */
.lq .project-page{background:var(--lq-paper)!important;position:relative;isolation:isolate}
.lq-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lq-ambient i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;background:var(--lq-art) center/cover no-repeat;filter:blur(80px) saturate(1.6);opacity:.36;will-change:transform}
.lq-ambient i:nth-child(1){left:-18vmax;top:-22vmax;animation:lq-drift-a 38s ease-in-out infinite alternate}
.lq-ambient i:nth-child(2){right:-24vmax;top:18vh;opacity:.28;background-position:80% 70%;animation:lq-drift-b 46s ease-in-out infinite alternate}
.lq-ambient i:nth-child(3){left:20vw;bottom:-36vmax;opacity:.22;background-position:20% 20%;animation:lq-drift-c 52s ease-in-out infinite alternate}
.lq-ambient::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(243,243,241,0) 40%,rgba(243,243,241,.7) 100%)}
@keyframes lq-drift-a{to{transform:translate3d(14vw,10vh,0) scale(1.12) rotate(18deg)}}
@keyframes lq-drift-b{to{transform:translate3d(-12vw,-8vh,0) scale(.92) rotate(-22deg)}}
@keyframes lq-drift-c{to{transform:translate3d(-8vw,-14vh,0) scale(1.08) rotate(12deg)}}

.lq-goo{position:fixed;left:0;top:0;width:100vw;height:100dvh;z-index:0;pointer-events:none;overflow:visible;opacity:0;transition:opacity .4s}
.lq-goo.on{opacity:.9}
.lq #project-content{position:relative;z-index:1}

/* ---------- shared glass material ---------- */
.lq :is(.dialog-brand,.dialog-nav .close-button,.case-sidebar,.case-role>div,.process-item,.result-item,.honest-note,.learning,.case-next,.lq-stage,.lq-btn,.case-reading-progress){
 --mx:50%;--my:0%;
 background-color:var(--lq-glass)!important;
 background-image:
  radial-gradient(260px circle at var(--mx) var(--my),rgba(255,255,255,calc(var(--lq-hl)*.85)),rgba(255,255,255,0) 70%),
  linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 42%,rgba(255,255,255,0) 60%,rgba(255,255,255,.18))!important;
 -webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);
 box-shadow:var(--lq-rim),var(--lq-shadow)!important;
 border:0!important;
 transition:--lq-hl .45s var(--lq-ease),box-shadow .5s var(--lq-ease);
}
.lq .lq-hot{--lq-hl:1}
.lq :is(.process-item,.result-item,.case-next,.lq-btn).lq-hot{box-shadow:var(--lq-rim),var(--lq-shadow-lift)!important}

/* Spring-driven jelly offsets written by liquid-case.js. `translate`/`scale`
   compose with the existing scroll-reveal `transform` instead of replacing it. */
.lq :is(.lq-btn,.case-sidebar a,.dialog-brand,.dialog-nav .close-button,.process-item,.result-item,.case-next,.case-hero-media,.gallery-figure .asset-enlarge){
 translate:var(--lq-tx,0px) var(--lq-ty,0px);
 scale:var(--lq-sx,1) var(--lq-sy,1);
}

/* ---------- top bar: two floating glass pills ---------- */
.lq .dialog-nav{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:18px 24px!important;pointer-events:none;z-index:30!important}
.lq .dialog-nav>*{pointer-events:auto}
.lq .dialog-brand{display:inline-flex!important;align-items:center;gap:10px;padding:11px 18px!important;border-radius:999px!important;font-size:12px!important;letter-spacing:.02em!important;font-weight:500!important;color:var(--lq-ink)!important;outline:0!important}
.lq .dialog-brand span{margin:0!important;color:var(--lq-faint)!important;font-size:11px!important}
.lq .dialog-nav .close-button{display:inline-flex!important;align-items:center;gap:12px;padding:11px 14px 11px 18px!important;border-radius:999px!important;font-size:12px!important;color:var(--lq-ink)!important;text-decoration:none!important}
.lq .dialog-nav .close-button span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(10,10,10,.86);color:#fff;font-size:13px;line-height:1;transition:transform .5s var(--lq-spring)}
.lq .dialog-nav .close-button:hover span{transform:rotate(90deg)}
.lq :is(.dialog-brand,.dialog-nav .close-button):focus-visible{outline:2px solid var(--lq-ink)!important;outline-offset:3px}

/* reading progress: a thin glass tube with a bead of liquid */
.lq .case-reading-progress{right:12px!important;top:96px!important;bottom:28px!important;width:6px!important;border-radius:9px!important;z-index:25!important;padding:0}
.lq .case-reading-progress i{background:linear-gradient(180deg,rgba(10,10,10,.6),rgba(10,10,10,.28))!important;border-radius:9px!important;width:2px!important;margin:0 auto;transform:scaleY(var(--reading,0))}
.lq .case-reading-progress b{left:-2px!important;width:10px!important;height:16px!important;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#d7d7d3 55%,#9b9b96 100%)!important;box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* ---------- typography ---------- */
.lq .eyebrow{color:var(--lq-faint)!important;font-size:11px!important;letter-spacing:.14em!important;font-weight:500!important;text-transform:uppercase}
.lq .case-title:focus{outline:none}
.lq .case-title{font-size:clamp(48px,6.6vw,104px)!important;letter-spacing:-.055em!important;line-height:.98!important;font-weight:400!important;margin:18px 0 26px!important;color:var(--lq-ink)!important}
.lq .case-lede{font-size:clamp(17px,1.45vw,21px)!important;line-height:1.55!important;color:#3d3d3a!important;max-width:34ch}
.lq .case-section h2{font-size:clamp(30px,3.6vw,52px)!important;letter-spacing:-.045em!important;line-height:1.04!important;color:var(--lq-ink)!important;margin:12px 0 22px!important}
.lq .case-section>p,.lq .case-section .long-copy{font-size:16px!important;line-height:1.75!important;color:var(--lq-muted)!important;max-width:62ch}
.lq .case-section figcaption{font-size:11px!important;color:var(--lq-faint)!important;line-height:1.55!important}

/* ---------- hero ---------- */
.lq .case-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)!important;gap:clamp(32px,5vw,80px)!important;padding-top:56px!important;padding-bottom:72px!important;align-items:center!important}
.lq .case-role{display:flex!important;flex-wrap:wrap;gap:10px!important;border:0!important;padding-top:0!important;margin-top:30px!important}
.lq .case-role>div{flex:1 1 220px;border-radius:var(--lq-r-sm);padding:16px 18px;font-size:13px;line-height:1.55;color:#2b2b29}
.lq .case-role span{font-size:10px!important;letter-spacing:.14em;color:var(--lq-faint)!important;margin-bottom:6px!important}
.lq .case-quick-actions{margin-top:26px!important;gap:12px!important;align-items:center}

/* glass pill buttons (WebGL `.glass-cta` buttons keep their own lens renderer) */
.lq .lq-btn{display:inline-flex!important;align-items:center!important;gap:12px!important;padding:14px 22px!important;border-radius:999px!important;font-size:14px!important;font-weight:500!important;color:var(--lq-ink)!important;border:0!important;opacity:1!important;text-decoration:none!important;cursor:pointer}
.lq .lq-btn.primary{background-color:rgba(12,12,12,.88)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -10px rgba(0,0,0,.45)!important}
.lq .lq-btn span,.lq .lq-btn svg{font-size:16px!important;transition:transform .5s var(--lq-spring)}
.lq .lq-btn:hover span,.lq .lq-btn:hover>svg{transform:translate(2px,-2px)}
.lq .lq-btn:focus-visible{outline:2px solid var(--lq-ink)!important;outline-offset:3px}

/* ---------- body + floating section rail ---------- */
.lq .case-body{border:0!important;grid-template-columns:200px minmax(0,1fr)!important;gap:clamp(36px,5vw,84px)!important;padding-top:24px!important}
.lq .case-sidebar{top:96px!important;padding:8px!important;border-radius:26px!important;gap:2px!important;position:sticky;isolation:isolate}
.lq .case-sidebar a{position:relative;z-index:1;display:block;padding:10px 14px!important;border-radius:999px!important;font-size:12.5px!important;color:var(--lq-muted)!important;border:0!important;text-decoration:none!important;transition:color .35s}
.lq .case-sidebar a::after{display:none!important}
.lq .case-sidebar a[aria-current]{color:var(--lq-ink)!important}
.lq .case-sidebar a:hover{color:var(--lq-ink)!important}
.lq-indicator{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.72));box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.05),0 4px 14px -6px rgba(0,0,0,.2);pointer-events:none;will-change:transform,width,height;opacity:0;transition:opacity .3s}
.lq-indicator.on{opacity:1}

.lq .case-section{margin-bottom:clamp(72px,9vw,128px)!important;scroll-margin-top:96px!important}
.lq .scroll-reveal{filter:none!important}

/* process: a row of glass cards */
.lq .process-list{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;border:0!important;margin-top:30px!important}
.lq .process-item{display:flex!important;flex-direction:column;gap:22px!important;padding:24px 24px 26px!important;border-radius:var(--lq-r)!important;border:0!important}
.lq .process-item .step{display:grid!important;place-items:center;width:40px;height:40px;border-radius:50%;font-size:13px!important;color:var(--lq-ink)!important;background:radial-gradient(circle at 35% 30%,#fff 0 30%,rgba(255,255,255,.4) 70%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 4px 12px -6px rgba(0,0,0,.25)!important;font-variant-numeric:tabular-nums}
.lq .process-item h3{font-size:18px!important;letter-spacing:-.02em;margin-bottom:10px!important;color:var(--lq-ink)}
.lq .process-item p{font-size:13.5px!important;line-height:1.65!important;color:var(--lq-muted)!important}

/* gallery: one consistent rhythm for every project */
.lq .case-images{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;margin-top:36px!important;align-items:start!important;border-radius:0!important}
.lq .case-images>.gallery-figure{grid-column:auto!important;margin:0!important;width:auto!important;justify-self:stretch!important}
.lq .case-images:has(>.gallery-figure:last-child:nth-child(odd))>.gallery-figure:first-child{grid-column:1/-1!important}
.lq .case-images:has(>.gallery-figure:only-child)>.gallery-figure{grid-column:1/-1!important}
/* interactive studies sit on one glass stage */
.lq .lq-stage{border-radius:calc(var(--lq-r) + 6px)!important;padding:clamp(18px,2.6vw,36px)!important;margin-top:28px!important}
.lq .lq-stage .lq-stage{background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0!important}

/* outcome */
.lq .result-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:14px!important;margin:32px 0!important}
.lq .result-item{border-radius:var(--lq-r)!important;padding:26px 24px!important}
.lq .result-value{font-size:clamp(34px,3.4vw,48px)!important;letter-spacing:-.05em!important;font-weight:400!important}
.lq .result-item h3{font-size:13px!important;font-weight:500!important}
.lq .result-item p{font-size:12px!important;color:var(--lq-muted)!important}
.lq .honest-note{position:relative;border-radius:var(--lq-r-sm)!important;padding:22px 24px 22px 52px!important;font-size:14px!important;line-height:1.7!important;color:#33332f!important;margin:28px 0!important}
.lq .honest-note::before{content:"";position:absolute;left:22px;top:26px;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:radial-gradient(circle at 35% 30%,#fff 0 20%,#bdbdb8 70%);box-shadow:0 2px 5px rgba(0,0,0,.2)}
.lq #case-outcome figure .game-preview{border-radius:calc(var(--lq-r) + 4px)!important;overflow:hidden;background:#e7e7e4!important}
.lq #case-outcome figure .game-preview img{border-radius:0!important}
.lq .play-disc{background:rgba(255,255,255,.7)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--lq-rim),0 10px 30px -10px rgba(0,0,0,.4)!important;color:var(--lq-ink)!important}

/* what I learned: a large calm slab */
.lq .case-section.learning{border:0!important;border-radius:calc(var(--lq-r) + 10px)!important;padding:clamp(28px,5vw,64px)!important}
.lq .case-section.learning h2{font-style:normal!important;max-width:18ch}
.lq .case-section.learning>p:not(.eyebrow){font-size:clamp(17px,1.5vw,21px)!important;line-height:1.6!important;color:#33332f!important;max-width:52ch}

/* next project: a liquid card you can pull on */
.lq .case-next{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center!important;gap:24px!important;padding:16px 16px 16px clamp(24px,3vw,40px)!important;border-radius:calc(var(--lq-r) + 10px)!important;color:var(--lq-ink)!important;text-decoration:none!important;margin-bottom:24px;overflow:hidden}
.lq .case-next h3{font-size:clamp(30px,4vw,56px)!important;letter-spacing:-.05em!important;line-height:1!important;margin:12px 0 18px!important;font-weight:400!important}
.lq .case-next .lq-next-cta{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--lq-muted);transition:color .3s,gap .5s var(--lq-spring)}
.lq .case-next.lq-hot .lq-next-cta{color:var(--lq-ink);gap:16px}
.lq .case-next img{width:clamp(160px,24vw,320px);aspect-ratio:4/3;object-fit:cover;border-radius:var(--lq-r);display:block;transition:transform 1s var(--lq-ease)}
.lq .case-next.lq-hot img{transform:scale(1.04) rotate(-1deg)}
.lq .case-next:focus-visible{outline:2px solid var(--lq-ink);outline-offset:4px}

/* ---------- responsive ---------- */
@media(max-width:1100px){
 .lq .case-body{grid-template-columns:170px minmax(0,1fr)!important}
}
@media(max-width:860px){
 .lq .dialog-nav{padding:12px 14px!important}
 .lq .dialog-brand span{display:none!important}
 .lq .case-hero{grid-template-columns:1fr!important;padding-top:24px!important;padding-bottom:48px!important}
 .lq .case-body{grid-template-columns:1fr!important;gap:24px!important}
 .lq .case-sidebar{position:sticky!important;top:66px!important;z-index:20;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;border-bottom:0!important;padding:5px!important;margin:0 -4px}
 .lq .case-sidebar::-webkit-scrollbar{display:none}
 .lq .case-sidebar a{white-space:nowrap;padding:9px 13px!important;font-size:12px!important}
 .lq .case-images{grid-template-columns:1fr!important}
 .lq .case-images>.gallery-figure{grid-column:1/-1!important}
 .lq .case-reading-progress{display:none}
}
@media(max-width:560px){
 .lq .case-next{grid-template-columns:1fr;padding:22px!important}
 .lq .case-next img{width:100%;order:-1}
 .lq .process-item{padding:20px!important}
 .lq .lq-stage{border-radius:var(--lq-r)!important;padding:14px!important}
}
@media(prefers-reduced-motion:reduce){
 .lq-ambient i{animation:none}
 .lq .case-hero-image,.lq .case-next img{transition:none}
}
@media(prefers-reduced-transparency:reduce){
 .lq :is(.dialog-brand,.dialog-nav .close-button,.case-sidebar,.case-role>div,.process-item,.result-item,.honest-note,.learning,.case-next,.lq-stage,.lq-btn){background-color:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
 .lq-ambient{display:none}
}

/* ---------- interactive studies: beat the older #case-explore panel rules ---------- */
.lq #project-content .lq-stage{
 background-color:var(--lq-glass)!important;
 background-image:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,calc(var(--lq-hl)*.7)),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.18) 30%,rgba(255,255,255,.08))!important;
 border-radius:calc(var(--lq-r) + 6px)!important;border:0!important;
 box-shadow:var(--lq-rim),var(--lq-shadow)!important;
 overflow:visible;
}
.lq #project-content .lq-stage :is(.experience,.blade-study,.flower-lab,.circular-system,.dispenser-explorer,.loop-narrative,.cycle-panel,.circular-panel,.demo-panel,.showcase-panel,.explorer-panel,.material-panel){
 background:transparent!important;border:0!important;box-shadow:none!important;
}
.lq #project-content .lq-stage:is(.experience,.blade-study,.flower-lab,.circular-system,.dispenser-explorer){padding:clamp(18px,2.6vw,36px)!important}
.lq #project-content .lq-stage :is(.comparison-table-wrap){border-radius:var(--lq-r-sm);overflow:hidden}
.lq #case-explore .compare{border-radius:calc(var(--lq-r) - 6px)!important;border:0!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.lq #project-content .lq-stage :is(.system-node,.circular-node){border-radius:16px!important}
.lq #project-content .lq-stage :is(.ice-image-stage,.step-picture,.petal-viewport){border-radius:calc(var(--lq-r) - 8px);overflow:hidden}

/* soft veil under the floating pills so scrolled copy never collides with them */
.lq .dialog-nav::before{content:"";position:absolute;inset:0 0 -34px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(243,243,241,.92),rgba(243,243,241,.6) 55%,rgba(243,243,241,0));-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
@media(max-width:860px){.lq .dialog-nav::before{inset:0 0 -64px 0}}

/* ==========================================================================
   v2 — edge-to-edge imagery, liquid sliders and meters, tidier studies
   ========================================================================== */

/* ---------- images: no bezels, no letterbox, just the photograph ---------- */
.lq .case-hero-media{justify-self:center;width:fit-content;max-width:100%;border-radius:calc(var(--lq-r) + 4px);overflow:hidden;box-shadow:var(--lq-shadow);isolation:isolate;position:relative;transition:box-shadow .5s var(--lq-ease)}
.lq .case-hero-media .case-hero-image{display:block;width:auto!important;max-width:100%!important;height:auto!important;max-height:min(76vh,700px)!important;object-fit:contain!important;background:none!important;border-radius:0!important;padding:0!important}
.lq .gallery-figure .asset-enlarge{position:relative;display:block!important;width:fit-content!important;max-width:100%!important;margin:0 auto!important;padding:0!important;background:none!important;border:0!important;border-radius:calc(var(--lq-r) - 2px)!important;overflow:hidden;cursor:zoom-in;isolation:isolate;box-shadow:var(--lq-shadow)!important;transition:box-shadow .5s var(--lq-ease)}
.lq .gallery-figure .asset-enlarge img{display:block;width:auto!important;max-width:100%!important;height:auto!important;max-height:min(70vh,680px)!important;object-fit:contain!important;padding:0!important;margin:0!important;background:none!important;border-radius:0!important;transform:translate3d(0,var(--image-drift,0px),0) scale(var(--image-scale,1))}
.lq :is(.case-hero-media,.gallery-figure .asset-enlarge).lq-hot{box-shadow:var(--lq-shadow-lift)!important}
/* a moving sheen instead of a frame: glass reflection that follows the pointer */
.lq :is(.case-hero-media,.gallery-figure .asset-enlarge)::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.28),rgba(255,255,255,0) 60%);opacity:0;transition:opacity .5s var(--lq-ease)}
.lq :is(.case-hero-media,.gallery-figure .asset-enlarge).lq-hot::before{opacity:1}
.lq .gallery-figure figcaption{max-width:62ch;margin:12px auto 0 4px!important}
.lq .case-images{align-items:start!important;gap:22px 16px!important}

/* Dispenser: frame the packaging shot on the product, not the empty wall */
.lq .gallery-figure img[src$="dispenser-real.jpg"]{width:100%!important;aspect-ratio:1.49;object-fit:cover!important;object-position:50% 64%}
.lq .gallery-figure .asset-enlarge:has(img[src$="dispenser-real.jpg"]){width:100%!important}

/* ---------- liquid range: glass tube + droplet thumb (all projects) ---------- */
.lq #project-content input[type=range].lq-range{
 --p:.5;--fill:calc(12px + (100% - 24px) * var(--p));
 -webkit-appearance:none;appearance:none;display:block;width:100%;height:30px!important;margin:4px 0 18px!important;padding:0!important;
 background:transparent!important;border:0!important;box-shadow:none!important;cursor:grab;accent-color:auto;outline-offset:6px;touch-action:pan-y;
}
.lq #project-content input[type=range].lq-range:active{cursor:grabbing}
.lq #project-content input[type=range].lq-range::-webkit-slider-runnable-track{
 height:10px;border-radius:999px;border:0;
 background:
  linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%) 0 0/var(--fill) 100% no-repeat,
  linear-gradient(90deg,#191918,#4b4b48) 0 0/var(--fill) 100% no-repeat,
  rgba(20,20,20,.07);
 box-shadow:inset 0 1px 2px rgba(0,0,0,.16),inset 0 -1px 0 rgba(255,255,255,.9),0 1px 0 rgba(255,255,255,.7);
}
.lq #project-content input[type=range].lq-range::-webkit-slider-thumb{
 -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-8px;border:0;border-radius:50%;
 background:radial-gradient(circle at 34% 28%,#fff 0 20%,rgba(255,255,255,.92) 34%,rgba(232,232,229,.9) 62%,rgba(176,176,171,.95) 100%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 -3px 6px rgba(0,0,0,.08),0 6px 14px -4px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.18);
 transform:scale(var(--lq-thumb-sx,1),var(--lq-thumb-sy,1));transition:transform .5s var(--lq-spring);
}
.lq #project-content input[type=range].lq-range:active::-webkit-slider-thumb{border-radius:50%}
.lq #project-content input[type=range].lq-range::-moz-range-track{height:10px;border-radius:999px;background:rgba(20,20,20,.07);box-shadow:inset 0 1px 2px rgba(0,0,0,.16),inset 0 -1px 0 rgba(255,255,255,.9)}
.lq #project-content input[type=range].lq-range::-moz-range-progress{height:10px;border-radius:999px;background:linear-gradient(90deg,#191918,#4b4b48)}
.lq #project-content input[type=range].lq-range::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 20%,rgba(255,255,255,.92) 34%,rgba(232,232,229,.9) 62%,rgba(176,176,171,.95) 100%);box-shadow:inset 0 0 0 1px #fff,0 6px 14px -4px rgba(0,0,0,.38);transform:scale(var(--lq-thumb-sx,1),var(--lq-thumb-sy,1))}
.lq #project-content input[type=range].lq-range:focus-visible{outline:2px solid var(--lq-ink)!important;border-radius:999px}
/* compact variant for the Petal Puff joint sliders */
.lq #project-content .petal-3d-lab input[type=range].lq-range{height:22px!important;margin:4px 0!important;--fill:calc(9px + (100% - 18px) * var(--p))}
.lq #project-content .petal-3d-lab input[type=range].lq-range::-webkit-slider-runnable-track{height:6px}
.lq #project-content .petal-3d-lab input[type=range].lq-range::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6px}
.lq #project-content .range-label{display:flex!important;justify-content:space-between;align-items:baseline;font-size:12px!important;color:var(--lq-muted)!important;margin:26px 0 6px!important;font-family:inherit!important}
.lq #project-content .range-label span,.lq #project-content .range-label output{font-variant-numeric:tabular-nums;color:var(--lq-ink)!important;font-size:12px}

/* ---------- liquid meters (Running Blade) and reservoir (Dispenser) ---------- */
.lq #project-content .metric-rail.lq-meter,.lq #project-content .dose-reservoir.lq-tube{
 position:relative;height:14px!important;margin:16px 0 12px!important;border:0!important;border-radius:999px!important;overflow:visible!important;
 background:rgba(20,20,20,.07)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.16),inset 0 -1px 0 rgba(255,255,255,.95),0 1px 0 rgba(255,255,255,.7)!important;
}
.lq #project-content .metric-rail.lq-meter i,.lq #project-content .dose-reservoir.lq-tube i{
 display:block;position:relative;height:100%;min-width:14px;border-radius:999px!important;opacity:1!important;
 background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),linear-gradient(90deg,#1b1b1a,#4d4d4a)!important;
 box-shadow:0 2px 8px -3px rgba(0,0,0,.45)!important;border:0!important;
}
.lq #project-content .metric-rail.lq-meter i{transition:width 1.1s var(--lq-spring)}
.lq #project-content .metric-rail.lq-meter i::after,.lq #project-content .dose-reservoir.lq-tube i::after{
 content:""!important;display:block!important;position:absolute;right:-5px;top:50%;width:22px;height:22px;transform:translateY(-50%);border-radius:50%;animation:none!important;
 background:radial-gradient(circle at 34% 28%,#fff 0 20%,rgba(255,255,255,.92) 34%,rgba(232,232,229,.9) 62%,rgba(176,176,171,.95) 100%)!important;
 box-shadow:inset 0 0 0 1px #fff,0 5px 12px -4px rgba(0,0,0,.4)!important;
}
.lq #project-content .metric-rail.lq-meter b{position:absolute;top:-8px!important;width:2px!important;height:30px!important;margin-left:-1px;background:var(--lq-ink)!important;border-radius:2px;z-index:3!important}
.lq #project-content .metric-rail.lq-meter b::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;transform:translateX(-50%);border-radius:50%;background:var(--lq-ink)}
.lq #project-content .metric-track{margin-bottom:22px}
.lq #project-content .metric-track>div:first-child{display:flex;justify-content:space-between;align-items:baseline}
.lq #project-content .metric-track>div:first-child span{font-size:13px;color:var(--lq-muted)}
.lq #project-content .metric-track>div:first-child strong{font-size:clamp(24px,2.2vw,32px)!important;font-weight:400!important;letter-spacing:-.04em!important}
.lq #project-content .metric-track small{display:flex;justify-content:space-between;font-size:11px!important;color:var(--lq-faint)!important}
.lq #project-content .metric-track small em{font-style:normal;color:var(--lq-ink)}
/* dispenser: the reservoir is literal liquid */
.lq #project-content .dose-reservoir.lq-tube{height:18px!important;margin:0!important}
.lq #project-content .dose-reservoir.lq-tube i{background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),linear-gradient(90deg,#d9a908,#f4cf2b)!important;box-shadow:0 2px 10px -3px rgba(201,150,0,.6)!important}
.lq #project-content .dose-reservoir.lq-tube[data-fill="0"] i::after{opacity:.0}

/* ---------- Dispenser studies: grouped, calmer layout ---------- */
.lq #project-content .dose-lab{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;gap:clamp(20px,3vw,44px)!important;min-height:0!important;align-items:center}
.lq #project-content .dose-product{display:flex!important;flex-direction:column;align-items:stretch;justify-content:center;gap:14px;min-height:0!important;background:transparent!important}
.lq #project-content .dose-product .ice-image-stage{height:clamp(320px,36vw,460px)!important}
.lq #project-content .experience-tag{position:static!important;padding-left:6px;font-size:10px;letter-spacing:.14em;color:var(--lq-faint)}
.lq #project-content .dose-interface{padding:8px 0!important}
.lq #project-content .dose-interface h3,.lq #project-content .assembly-copy h3{font-size:clamp(28px,2.8vw,40px)!important;line-height:1.08!important;letter-spacing:-.045em!important;font-weight:400!important;margin:10px 0 18px!important}
.lq #project-content .dose-dial{margin:18px auto 6px!important}
.lq #project-content .pour-readout{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;margin:14px 0 18px!important;padding:16px 18px;border-radius:var(--lq-r-sm);background:rgba(255,255,255,.42);box-shadow:var(--lq-rim)}
.lq #project-content .pour-readout output{margin:0!important;min-width:76px;font-size:30px!important;text-align:left;line-height:1}
.lq #project-content .pour-readout output small{margin-top:6px!important}
.lq #project-content .dose-feedback{font-size:13px!important;color:var(--lq-muted)!important;min-height:0!important;margin-top:12px}
.lq #project-content .experience-footnote{font-size:11px!important;color:var(--lq-faint)!important}
.lq #project-content .assembly-study{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;gap:clamp(20px,3vw,44px)!important;align-items:center;min-height:0!important}
.lq #project-content .assembly-picture{background:transparent!important;min-height:0}
.lq #project-content .assembly-picture .ice-image-stage{height:clamp(300px,32vw,420px)!important}
.lq #project-content .assembly-copy{padding:8px 0!important}
.lq #project-content .assembly-copy>p:not(.eyebrow){font-size:15px!important;line-height:1.65!important;color:var(--lq-muted)!important}
.lq #project-content .sequence-legend{margin-top:8px}

/* ---------- Running Blade study: no stray panels ---------- */
.lq #project-content .blade-study :is(.variant-visual,.variant-analysis,.variant-panel){background:transparent!important;box-shadow:none!important;border:0!important}
.lq #project-content .blade-study .comparison-table-wrap{background:transparent!important;border-radius:0}
.lq #project-content .blade-study .variant-analysis h3{font-size:clamp(26px,2.4vw,36px)!important;letter-spacing:-.04em!important;font-weight:400!important}

@media(max-width:860px){
 .lq #project-content :is(.dose-lab,.assembly-study){grid-template-columns:1fr!important}
 .lq .case-hero-media{width:100%}
 .lq .case-hero-media .case-hero-image{width:100%!important;max-height:none!important}
}
.lq .gallery-figure .asset-enlarge{aspect-ratio:auto!important;height:auto!important}
.lq .gallery-figure .asset-enlarge img{position:static!important;inset:auto!important}
/* artwork shot on pure white (renders, line drawings) dissolves into the page instead of sitting in a white box */
.lq :is(.gallery-figure .asset-enlarge,.case-hero-media).lq-onwhite{box-shadow:none!important;border-radius:0!important;overflow:visible}
.lq :is(.gallery-figure .asset-enlarge,.case-hero-media).lq-onwhite img{mix-blend-mode:multiply}
.lq :is(.gallery-figure .asset-enlarge,.case-hero-media).lq-onwhite::before{display:none}
.lq #project-content .lq-stage .ice-image-stage{isolation:auto!important}
.lq #project-content .metric-rail.lq-meter i::after{width:16px;height:16px;right:-2px}

/* Petal Puff live servo angles: read-only glass gauges, same family as the sliders */
.lq #project-content .gesture-axis{grid-template-columns:78px 1fr 40px!important;gap:14px!important}
.lq #project-content .gesture-axis>span{font-family:inherit!important;font-size:11px!important;color:var(--lq-muted)!important}
.lq #project-content .gesture-axis>div{height:6px!important;border-radius:999px;background:rgba(20,20,20,.07)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.14),inset 0 -1px 0 rgba(255,255,255,.9)}
.lq #project-content .gesture-axis i{top:50%!important;width:14px!important;height:14px!important;border:0!important;border-radius:50%!important;transform:translate(-50%,-50%)!important;background:radial-gradient(circle at 34% 28%,#fff 0 20%,rgba(255,255,255,.92) 34%,rgba(232,232,229,.9) 62%,rgba(176,176,171,.95) 100%)!important;box-shadow:inset 0 0 0 1px #fff,0 3px 8px -2px rgba(0,0,0,.35)!important}
.lq #project-content .gesture-axis output{font-size:11px!important;color:var(--lq-ink)!important}
/* Coupé top view is stored sideways; rotate inside a landscape frame that fills edge to edge */
.lq .gallery-coupe .asset-enlarge.landscape-photo{width:100%!important;aspect-ratio:4/3!important;background:#0b0b0b!important}
.lq .gallery-coupe .landscape-photo>img{position:absolute!important;left:50%!important;top:50%!important;width:auto!important;height:133.4%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;transform:translate(-50%,-50%) rotate(90deg)!important}