/* DeVo Stage — horizontal gallery-walk front page */
:root{
  --bone:#ece6dc; --bone-2:#e2dacd; --ink:#14110f; --ink-2:#1d1916; --red:#e0262d; --gold:#d9a441;
  --muted:#6f675e; --line:rgba(20,17,15,.14);
  --display:"Bebas Neue",Impact,sans-serif; --serif:"Instrument Serif",Georgia,serif; --sans:Inter,system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --pad:clamp(20px,4vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.devo-stage-body{overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
em{font-family:var(--serif);font-style:italic;font-weight:400}
#wpadminbar{display:none}
html{margin-top:0!important}

.skip{position:fixed;left:12px;top:-60px;z-index:100;background:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{top:12px}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- top bar ---- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);color:var(--ink);transition:color .4s;pointer-events:none}
.bar>*{pointer-events:auto}
.bar__logo img{height:38px;width:auto;transition:filter .4s}
[data-tone=dark] .bar,[data-tone=dark] .dock{color:var(--bone)}
[data-tone=dark] .bar__logo img{filter:invert(1)}
.bar__nav{display:flex;gap:clamp(14px,2.4vw,34px)}
.bar__nav button{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.85;transition:opacity .2s}
.bar__nav button:hover{opacity:1}

/* ---- stage / track ---- */
.stage{position:fixed;inset:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;outline:0;scrollbar-width:none}
.stage::-webkit-scrollbar{display:none}
.track{display:flex;height:100%;width:max-content;will-change:transform}
.engine .stage{overflow:hidden;overflow:clip;scroll-snap-type:none}
.engine .panel{overflow:clip}
/* Craft's floating objects may drift past their section edge instead of being sliced by the next section */
.panel--craft,.engine .panel--craft{overflow:visible;z-index:2}
.panel{position:relative;flex:0 0 auto;height:100%;display:flex;align-items:center;overflow:hidden;scroll-snap-align:start;padding:0 var(--pad)}
[data-depth]{will-change:transform}
.engine [data-depth]{transform:translate3d(calc(var(--p,0) * var(--d,0) * -55vw),0,0)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(56px,9vw,150px);line-height:.88;letter-spacing:.005em;margin:.15em 0 .3em;text-transform:uppercase}
h2 em{text-transform:none;font-size:1.04em;letter-spacing:0;color:var(--red)}
.panel p{font-size:clamp(15px,1.15vw,18px);line-height:1.55;max-width:34ch}

/* ---- 01 hero ---- */
.panel--hero{width:100vw;background:var(--bone);padding-top:80px}
.hero__mark{position:absolute;right:calc(var(--pad) * -1);top:50%;height:112vh;width:auto;max-width:none;transform:translateY(-50%);opacity:.96}
.engine .hero__mark{transform:translate3d(calc(var(--p,0) * -.35 * -55vw),-50%,0)}
.hero__copy{position:relative;z-index:2;max-width:60vw}
.kicker{font-size:12px!important;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--muted);margin:0 0 1.2em}
h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(88px,19vw,330px);line-height:.8;letter-spacing:-.005em;text-transform:uppercase}
h1 span{color:var(--ink);-webkit-text-stroke:0}
.lede{font-size:clamp(18px,1.7vw,26px)!important;line-height:1.35!important;max-width:34ch!important;margin:1.6em 0 1.4em}
.rot{display:inline-block;position:relative;color:var(--red);font-size:1.25em;line-height:1}
.rot span{display:inline-block;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.rot span.out{transform:translateY(-40%);opacity:0}
.btn{display:inline-flex;gap:.7em;align-items:center;background:var(--ink);color:var(--bone);padding:15px 26px;border-radius:99px;font-size:14px;font-weight:500;transition:transform .3s var(--ease),background .2s}
.btn:hover{background:var(--red);transform:translateX(4px)}
.hint{position:absolute;right:var(--pad);bottom:76px;z-index:3;font-size:12px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- 02 work ---- */
.panel--work{background:var(--bone-2);gap:6vw;padding-right:14vw}
.work__head{flex:0 0 min(34vw,520px)}
.work__rail{display:flex;gap:4.5vw;align-items:center;perspective:1600px}
.device{flex:0 0 auto;width:min(40vw,700px);text-align:left;transform:translateY(calc((var(--i) % 2) * 9vh - 4vh)) rotateY(calc(var(--p,0) * -9deg));transform-style:preserve-3d;transition:transform .5s var(--ease)}
.device:hover{transform:translateY(calc((var(--i) % 2) * 9vh - 6vh)) rotateY(calc(var(--p,0) * -9deg)) scale(1.025)}
.device__img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 28px rgba(20,17,15,.22))}
.device__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px;padding:0 4px}
.device__meta strong{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.4vw,38px);letter-spacing:.02em;text-transform:uppercase}
.device__meta small{font-size:12px;color:var(--muted);letter-spacing:.04em}

/* ---- 03 lab ---- */
.panel--lab{background:var(--ink);color:var(--bone);gap:3vw;padding-right:6vw}
.lab__head{flex:0 0 min(28vw,420px)}
.lab__head .lab__ask{font-size:13px!important;opacity:.85;margin-top:1.4em}
.lab__ask button{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.lab__ask button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.lab__cards{display:flex;gap:2vw;align-items:center}
.lcard{position:relative;flex:0 0 50vw;width:50vw;height:min(78vh,52vw);border-radius:22px;overflow:hidden;background:var(--bg);isolation:isolate;container-type:size;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8)}
.lcard .code{position:absolute;inset:0;margin:0;padding:5cqw 5cqw 0;z-index:0;font:500 clamp(9px,.78vw,13px)/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--acc);opacity:.5;overflow:hidden;white-space:pre;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.5));mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.5))}
.code .in{display:block;will-change:transform}
.code .k{color:#fff;opacity:.95}.code .s{color:#ffd479}.code .n{color:#9ad1ff}.code .c{opacity:.55;font-style:italic}
.code .cur{display:inline-block;width:.55em;height:1.1em;vertical-align:-.18em;background:var(--acc);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.lcard .art{position:absolute;inset:0;z-index:1;pointer-events:none}
.lcard .art>*{position:absolute;display:block;max-width:none}
.lcard .i{height:auto;filter:drop-shadow(0 2.4cqw 3cqw rgba(0,0,0,.55));animation:bob 9s ease-in-out infinite alternate}
.lcard .i:nth-of-type(2n){animation-duration:11s;animation-delay:-3s}
@keyframes bob{from{translate:0 -.7cqw}to{translate:0 .9cqw}}
.lcard .glow{inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;mix-blend-mode:screen;filter:none;animation:none}
.phone{aspect-ratio:9/19.5;padding:.9cqw;border-radius:5.4cqw;background:#050505;box-shadow:0 0 0 .15cqw #2b2b2e,0 3cqw 5cqw rgba(0,0,0,.65);animation:bob 10s ease-in-out infinite alternate}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:4.5cqw}
.lcard__txt{position:absolute;z-index:3;padding:5cqw;max-width:62cqw}
.lcard__txt--tl{left:0;top:0}
.lcard__txt--bl{left:0;bottom:0;padding-top:12cqw;right:0;max-width:none;background:linear-gradient(to top,rgba(0,0,0,.88) 30%,rgba(0,0,0,0))}
.lcard__txt small{display:block;font-size:max(10px,1.45cqw);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.lcard__txt h3{font-family:var(--display);font-weight:400;font-size:max(30px,6.4cqw);line-height:.95;margin:.18em 0 .2em;letter-spacing:.02em;text-transform:uppercase;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.6)}
.lcard__txt p{font-size:max(12px,1.8cqw)!important;line-height:1.45!important;color:#d9d1c5;margin:0;max-width:44ch}

/* Jumping Light: product, boards, app over the night-time light arc */
/* looping night-yard video behind everything (the typing code sits above it) */
.lcard--jl1 .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 62%;z-index:0;background:#05070b}
.lcard--jl1 .vid-shade{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,14,.72) 0,rgba(5,8,14,.28) 34%,rgba(5,8,14,.1) 100%),linear-gradient(90deg,rgba(5,8,14,.5),rgba(5,8,14,0) 58%)}
/* The fixture is a grounded object: it doesn't float, and it casts shadows onto the ground it stands on. */
.jl1-obj{left:15cqw;bottom:5cqh;height:92cqh;aspect-ratio:1600/1400}
.jl1-obj .product{position:absolute;inset:0;width:100%;height:100%;animation:none;filter:brightness(1.38) contrast(1.08) saturate(1.1) drop-shadow(1.4cqw .9cqw 1cqw rgba(0,0,0,.55))}
.gl{position:absolute;display:block;border-radius:50%;pointer-events:none}
.gl--pool{left:-30%;top:90%;width:130%;height:20%;background:radial-gradient(closest-side,rgba(170,200,190,.26),rgba(170,200,190,.08) 60%,rgba(170,200,190,0))}
.gl--soft{left:5%;top:96%;width:66%;height:7%;background:radial-gradient(closest-side,rgba(0,0,0,.78),rgba(0,0,0,0));filter:blur(.6cqw)}
.gl--body{left:36%;top:97%;width:24%;height:3%;background:rgba(0,0,0,.55);filter:blur(.7cqw)}
.gl--rod{left:35%;top:98.2%;width:46%;height:.5%;border-radius:99px;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,0));filter:blur(.25cqw);rotate:2deg;transform-origin:0 50%}
.gl--contact{left:26%;top:97.6%;width:17%;height:2.4%;background:rgba(0,0,0,.85);filter:blur(.3cqw)}
.lcard--jl1 .lcard__txt{max-width:44cqw}
.board--a{right:3cqw;top:4cqh;width:27cqw;rotate:7deg}
.board--b{right:29cqw;top:4cqh;width:21cqw;rotate:-8deg}
.phone--jl1{left:5cqw;right:auto;bottom:9cqh;height:40cqh}

/* Jumping Light: a glowing multicolour (RGB LED) edge that slowly cycles round the card */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --g1{syntax:"<color>";inherits:true;initial-value:#ff3b30}
@property --g2{syntax:"<color>";inherits:true;initial-value:#0a84ff}
.lcard--jl1{animation:rgbglow 9s linear infinite;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 38px -4px var(--g1,#ff3b30),0 0 90px -10px var(--g2,#0a84ff)}
.lcard--jl1::before,.lcard--jl1::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--a),#ff3b30,#ff9f0a,#ffe600,#30d158,#0a84ff,#bf5af2,#ff2d9b,#ff3b30);animation:rgbspin 7s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lcard--jl1::before{padding:.28cqw}
.lcard--jl1::after{padding:3.6cqw;filter:blur(2.4cqw);opacity:.66}
@keyframes rgbspin{to{--a:360deg}}
@keyframes rgbglow{0%{--g1:#ff3b30;--g2:#0a84ff}20%{--g1:#ffe600;--g2:#bf5af2}40%{--g1:#30d158;--g2:#ff2d9b}60%{--g1:#0a84ff;--g2:#ff9f0a}80%{--g1:#bf5af2;--g2:#30d158}100%{--g1:#ff3b30;--g2:#0a84ff}}

/* Cricket Finder: logo, app, and a laser sweep */
.lcard--cf{background:radial-gradient(120% 90% at 30% 20%,#10170a,#07090a 60%)}
.lcard--cf .logo{left:6cqw;top:7cqh;width:68cqw;border-radius:2cqw;box-shadow:0 0 0 .15cqw rgba(141,255,26,.35),0 0 6cqw rgba(141,255,26,.25);filter:none}
.phone--cf{right:6cqw;bottom:6cqh;height:68cqh}
.laser{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.beam{position:absolute;display:block;background:linear-gradient(90deg,transparent,#8dff1a 18%,#d6ff9a 50%,#8dff1a 82%,transparent);box-shadow:0 0 1.2cqw .25cqw rgba(141,255,26,.75),0 0 4cqw 1cqw rgba(141,255,26,.35);border-radius:9cqw}
.beam--h{left:-10%;right:-10%;height:.28cqw;top:0;animation:sweep 5.5s cubic-bezier(.45,0,.55,1) infinite alternate}
.beam--v{top:-10%;bottom:-10%;width:.28cqw;left:0;background:linear-gradient(180deg,transparent,#8dff1a 18%,#d6ff9a 50%,#8dff1a 82%,transparent);animation:sweepx 7.5s cubic-bezier(.45,0,.55,1) infinite alternate}
.beam--d{left:12cqw;top:44cqh;width:60cqw;height:.22cqw;transform-origin:0 50%;rotate:-18deg;opacity:.9;animation:aim 4s ease-in-out infinite alternate}
.ping{position:absolute;left:70cqw;top:30cqh;width:3cqw;height:3cqw;margin:-1.5cqw;border-radius:50%;border:.2cqw solid #8dff1a;animation:ping 2.2s ease-out infinite}
@keyframes sweep{from{top:6%}to{top:94%}}
@keyframes sweepx{from{left:6%}to{left:94%}}
@keyframes aim{from{rotate:-24deg}to{rotate:-8deg}}
@keyframes ping{from{transform:scale(.2);opacity:.9}to{transform:scale(5);opacity:0}}

/* QuickLUT: macro lens, desktop windows, iPhone */
.lcard--ql .glow{opacity:.5;object-position:60% 50%}
.desk{border-radius:1.6cqw;box-shadow:0 0 0 .12cqw rgba(255,255,255,.12)}
.desk--a{left:4cqw;top:27cqh;width:66cqw;rotate:-1.5deg}
.desk--b{left:9cqw;bottom:-14cqh;width:46cqw;rotate:2deg}
.phone--ql{right:4cqw;bottom:5cqh;height:68cqh}

/* DSLR Connect: the web page plus the Mac app */
.lcard--dc{background:radial-gradient(90% 70% at 30% 20%,#0b2412,#050806 65%)}
.page{left:4cqw;top:6cqh;width:42cqw;border-radius:1.6cqw;box-shadow:0 0 0 .12cqw rgba(255,255,255,.14)}
.app--a{right:4cqw;top:8cqh;width:50cqw;border-radius:1.4cqw}
.app--b{right:26cqw;top:33cqh;width:25cqw;border-radius:1.4cqw}
.app--c{right:4cqw;top:37cqh;width:22cqw;border-radius:1.4cqw}

/* Amoeba macro video: the gear train turning, behind everything */
.lcard--am .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#0c0c0e;opacity:.3}
.lcard--am .vid-shade{display:none}
/* Amoeba: burgundy anodised-aluminium edge, like the phone's finish */
.lcard--am{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 40px -12px rgba(150,70,85,.45),0 40px 80px -30px rgba(0,0,0,.8)}
.lcard--am::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.3cqw;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.09) 1px 2px,rgba(255,255,255,0) 2px 3px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.07) 1px 2px,rgba(255,255,255,0) 2px 3px),linear-gradient(135deg,#3a131c 0%,#8a4752 8%,#f6d6da 14%,#a8626d 21%,#3a131c 30%,#2a0d15 38%,#7a3a47 46%,#e8b9bf 53%,#fff1f2 56%,#c58b93 60%,#5a2531 70%,#2a0d15 78%,#6a2f3b 86%,#d9a3ab 93%,#4b1d28 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lcard--am::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;box-shadow:inset 0 .12cqw 0 rgba(255,235,238,.55),inset 0 -.12cqw 0 rgba(0,0,0,.7),inset .12cqw 0 0 rgba(255,225,230,.25),inset -.12cqw 0 0 rgba(0,0,0,.45),inset 0 0 0 1.3cqw rgba(0,0,0,0),inset 0 0 2.4cqw 1.3cqw rgba(0,0,0,.45)}
/* Amoeba: concept-stage polarizer cover. Blueprint backdrop, render, exploded view, in-context and lever detail */
.lcard--am{background:radial-gradient(90% 80% at 72% 18%,#26221a,#0c0c0e 62%)}
.lcard--am .plan{right:-14cqw;bottom:-12cqh;width:78cqw;opacity:.3;mix-blend-mode:screen;filter:invert(1) sepia(.6) saturate(1.2);animation:none}
.lcard--am .hero{right:4cqw;top:10cqh;width:50cqw}
.lcard--am .expl{left:3cqw;top:35cqh;width:40cqw;height:auto}
.lcard--am .ctx,.lcard--am .lev{border-radius:1.6cqw;box-shadow:0 0 0 .12cqw rgba(255,255,255,.14),0 2.4cqw 3cqw rgba(0,0,0,.55)}
.lcard--am .ctx{left:36cqw;bottom:4cqh;width:38cqw;rotate:-1.5deg}
.lcard--am .lev{right:3cqw;bottom:10cqh;width:25cqw;rotate:2deg}
.lcard--am h3 .mk{display:inline-block;height:.78em;width:auto;margin-right:.3em;vertical-align:-.04em;filter:brightness(0) invert(1);opacity:.9}
.lcard--am .lcard__txt{max-width:46cqw}
.lcard--am .spec{display:block;margin-top:1.1cqw;font:500 max(10px,1.3cqw)/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:var(--acc)}
.lcard--am .note{display:block;margin-top:.8cqw;font-size:max(9px,1.05cqw);line-height:1.4;color:#9a9285;max-width:44ch}

/* ---- 04 craft ---- */
.panel--craft{background:#0b0a09;color:var(--bone);gap:3vw;padding-right:6vw}
/* the desk photo, faded into the dark neighbours at both ends */
.panel--craft::before,.panel--craft::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.panel--craft::before{background:url(img/craft-bg-sd.jpg) 50% 62%/cover no-repeat;filter:brightness(1.55) contrast(1.05);opacity:.9}
.panel--craft::after{background:linear-gradient(90deg,#0b0a09 0,rgba(11,10,9,0) 22%,rgba(11,10,9,0) 78%,#0b0a09 100%),linear-gradient(180deg,rgba(11,10,9,.55) 0,rgba(11,10,9,0) 30%,rgba(11,10,9,0) 70%,rgba(11,10,9,.65) 100%)}
.craft__inner{z-index:1}
.craft__head h2,.craft__head p{text-shadow:0 2px 26px rgba(0,0,0,.75)}
.craft__head .craft__head h2 em{color:#ff5a60}
.craft__head p{color:#e8e1d5}
.panel--craft .chips li{border-color:rgba(236,230,220,.55);color:var(--bone);background:rgba(11,10,9,.35);backdrop-filter:blur(4px)}
.craft__head{flex:0 0 min(30vw,460px);position:relative;z-index:30}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:1.4em 0 0}
.chips li{font-size:12px;border:1px solid var(--ink);border-radius:99px;padding:7px 15px}
.space{position:absolute;left:0;top:0;width:2000px;height:100%;pointer-events:none;z-index:40}
.obj{position:absolute;left:var(--x);top:var(--y);width:max(var(--w),var(--min,0px));margin:0;z-index:calc(var(--z) * 10)}
.obj .f{display:block;animation:drift var(--dur) ease-in-out var(--del) infinite alternate;transition:scale .5s var(--ease);filter:drop-shadow(0 calc(var(--z) * 1.5vw) calc(var(--z) * 1.6vw) rgba(40,28,18,calc(.1 + var(--z) * .1)))}
.obj img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.obj.is-far .f{filter:blur(1.4px) drop-shadow(0 .8vw 1.1vw rgba(40,28,18,.12));opacity:.82}
@keyframes drift{from{translate:0 calc(var(--amp) * -1);rotate:calc(var(--r) - 2.5deg)}to{translate:calc(var(--amp) * .55) var(--amp);rotate:calc(var(--r) + 3deg)}}
/* app icons: free-floating, no tile around them */
.obj--i{--min:50px;pointer-events:auto;cursor:default}
.obj--i .f{filter:drop-shadow(0 calc(var(--z) * 1.5vw) calc(var(--z) * 1.8vw) rgba(0,0,0,.55))}
.obj--i::after{content:attr(data-name);position:absolute;left:50%;top:100%;translate:-50% 4px;padding:5px 11px;border-radius:99px;background:var(--ink);color:var(--bone);font-size:11px;letter-spacing:.06em;white-space:nowrap;opacity:0;transition:opacity .25s,translate .25s var(--ease);pointer-events:none}
.obj--i:hover .f{scale:1.16}
.obj--i:hover::after{opacity:1;translate:-50% 10px}
/* design samples: bare images in loose shapes, not cards */
.obj--s{--min:120px}
.shape-circle .f{overflow:hidden;border-radius:50%}
.shape-circle img{aspect-ratio:1;object-fit:cover;transform:scale(1.45)}
.shape-pill img{border-radius:999px;aspect-ratio:16/9;object-fit:cover}
.shape-arch img{border-radius:999px 999px 0 0;aspect-ratio:1/1.05;object-fit:cover}
.shape-hex img{aspect-ratio:1;object-fit:cover;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}
.shape-soft img{border-radius:2.2vw}
.shape-free .f{filter:drop-shadow(0 calc(var(--z) * 1.2vw) calc(var(--z) * 1.5vw) rgba(40,28,18,.2))}
/* floating dust */
.obj--d{width:var(--w);aspect-ratio:1;--min:7px;pointer-events:none}
.obj--d .f{width:100%;height:100%;border-radius:50%;filter:blur(.4px);opacity:.7;background:var(--red)}
.shape-ink .f{background:var(--ink);opacity:.55}.shape-gold .f{background:#c9a03a}
.shape-ring .f{background:none;border:1.5px solid var(--ink);opacity:.35}

.craft__inner{position:relative;display:flex;align-items:center;gap:3vw;width:2000px;height:100%;will-change:transform}
.engine .craft__inner{transform:translate3d(calc(var(--cq,0) * 45vw),0,0)}
/* ---- 05 contact ---- */
.panel--contact{width:100vw;background:var(--red);color:var(--bone);position:relative;z-index:4;margin-left:-38vw;box-shadow:-1.6vw 0 5vw rgba(0,0,0,.3)}
.contact__mark{position:absolute;left:-6vw;bottom:-18vh;height:110vh;width:auto;max-width:none;opacity:.22;mix-blend-mode:soft-light}
.contact__copy{position:relative;margin-left:auto;margin-right:6vw;display:flex;align-items:center;gap:5vw;width:min(66vw,1040px)}
.contact__title{flex:1 1 48%}
.contact__copy h2{font-size:clamp(54px,7.4vw,130px)}
.contact__copy h2 em{color:var(--ink)}
.fine{font-size:12px!important;opacity:.8;margin-top:2.4em}
.contact__form{flex:1 1 48%;max-width:520px}
.contact__form .wpcf7 form{display:grid;gap:16px;margin:0}
.contact__form .hidden-fields-container{display:none}
.contact__form label{display:block;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.contact__form input[type=text],.contact__form input[type=email],.contact__form textarea{display:block;width:100%;margin-top:8px;padding:12px 14px;border:0;border-bottom:1.5px solid rgba(236,230,220,.75);border-radius:6px 6px 0 0;background:rgba(20,17,15,.2);color:var(--bone);font:400 16px/1.3 var(--sans);letter-spacing:0;text-transform:none;transition:background .25s,border-color .25s}
.contact__form textarea{height:92px;resize:vertical}
.contact__form input:focus,.contact__form textarea:focus{outline:0;background:rgba(20,17,15,.36);border-bottom-color:#fff}
.contact__form .wpcf7-submit{justify-self:start;margin-top:4px;padding:15px 32px;border:0;border-radius:99px;background:var(--bone);color:var(--ink);font:500 14px var(--sans);letter-spacing:.02em;cursor:pointer;transition:background .25s,color .25s,transform .3s var(--ease)}
.contact__form .wpcf7-submit:hover{background:var(--ink);color:var(--bone);transform:translateX(4px)}
.contact__form .wpcf7-spinner{display:none}
.contact__form .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:12px;letter-spacing:0;text-transform:none;color:#ffe9b0}
.contact__form .wpcf7 form .wpcf7-response-output{margin:2px 0 0;padding:10px 14px;border:1.5px solid rgba(236,230,220,.75);border-radius:8px;font-size:14px;letter-spacing:0;text-transform:none}
.contact__form .wpcf7 form.sent .wpcf7-response-output{background:rgba(20,17,15,.28)}

/* ---- dock (pagination) ---- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:22px;padding:16px var(--pad) 20px;color:var(--ink);transition:color .4s}
.dock__bar{flex:1;height:1px;background:currentColor;opacity:1;position:relative;order:2}
.dock__bar{background:linear-gradient(currentColor,currentColor) 0 0/100% 1px no-repeat;opacity:.9}
.dock__bar i{position:absolute;left:0;top:-1px;height:3px;width:100%;background:currentColor;transform-origin:left;transform:scaleX(0)}
.dock__list{order:1;display:flex;gap:6px;margin:0;padding:0;list-style:none}
.dock__list button{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:99px;opacity:.55;transition:opacity .25s,background .25s,color .25s}
.dock__list button:hover{opacity:1}
.dock__list .on button{opacity:1;background:var(--ink);color:var(--bone)}
[data-tone=dark] .dock__list .on button{background:var(--bone);color:var(--ink)}
.dock__list .on button{-webkit-background-clip:padding-box}
.dock__list .on button span{mix-blend-mode:normal}
.dock__count{order:3;font:500 12px var(--sans);letter-spacing:.14em;font-variant-numeric:tabular-nums}

/* ---- case sheet ---- */
.sheet{border:0;padding:0;border-radius:20px;width:min(1100px,92vw);max-height:88vh;overflow:auto;background:var(--bone);color:var(--ink);box-shadow:0 50px 120px rgba(0,0,0,.5)}
.sheet[open]{animation:sheet .55s var(--ease)}
.sheet::backdrop{background:rgba(10,8,7,.7);backdrop-filter:blur(8px)}
@keyframes sheet{from{opacity:0;transform:translateY(40px) rotateX(8deg)}}
.sheet__shot{background:var(--bone-2);padding:clamp(16px,3vw,40px)}
.sheet__shot img{width:100%;max-height:56vh;object-fit:contain}
.sheet__body{padding:28px clamp(22px,4vw,48px) 40px}
.sheet small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.sheet h3{font-family:var(--display);font-weight:400;font-size:clamp(44px,6vw,84px);line-height:.95;margin:.1em 0 .3em;text-transform:uppercase}
.sheet p{font-size:17px;line-height:1.6;max-width:62ch}
.sheet__x{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;font-size:24px;line-height:1}
.sheet form{margin:0}

/* ---- touch / small: native swipe with snap ---- */
@media (max-width:820px){
  body.devo-stage-body{overflow:hidden}
  .panel{padding-left:20px;padding-right:20px}
  .panel--hero,.panel--contact{width:100vw}
  .hero__copy{max-width:100%}
  .hero__mark{height:80vh;opacity:.9;right:-30vw;top:62%}
  .panel--work{flex-direction:column;justify-content:center;gap:2vh;width:auto;padding-right:20px}
  .panel--work,.panel--lab,.panel--craft{flex-direction:row;align-items:center}
  .work__head,.lab__head,.craft__head{flex-basis:82vw}
  .device{width:78vw;transform:none!important}
  .lcard{flex-basis:84vw;width:84vw;height:min(74vh,118vw)}
  /* Craft on a phone: exactly two screens wide, icons floating inside it */
  .panel--craft{padding-left:0;padding-right:0}
  .craft__inner{width:200vw;padding-left:20px;box-sizing:border-box}
  .space{width:200vw}
  .obj--i{--min:40px}
  /* Contact on a phone: start at the top, tighten up, and scroll vertically if still too tall */
  .panel--contact{align-items:flex-start;padding:88px 20px 100px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .contact__mark{top:auto;bottom:0;height:78%;left:-26vw}
  .contact__copy{gap:14px}
  .contact__copy h2{font-size:clamp(40px,12vw,60px)}
  .fine{margin-top:.8em}
  .contact__form .wpcf7 form{gap:11px}
  .contact__form input[type=text],.contact__form input[type=email],.contact__form textarea{padding:10px 12px;margin-top:6px}
  .contact__form textarea{height:72px}
  .obj{--w-scale:1.5}
  .dock__list{display:none}
  /* phone menu: the four section links stay, just tighter */
  .bar{padding:14px 16px}
  .bar__logo img{height:32px}
  .bar__nav{gap:13px}
  .bar__nav button{font-size:10.5px;letter-spacing:.1em;padding:8px 0;opacity:1}
  .contact__copy{margin:0;flex-direction:column;align-items:flex-start;gap:20px;width:84vw}
  .contact__copy h2{font-size:clamp(46px,14vw,70px)}
  .contact__form{width:100%}
  .panel--contact{margin-left:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .lcard .i,.phone,.beam,.ping,.code .cur,.lcard--jl1,.lcard--jl1::before,.lcard--jl1::after{animation:none}
  .rot span,.btn,.device,.tile img{transition:none}
  .sheet[open]{animation:none}
}