/* Stupidesigner site · v2 */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dm-sans-latin-wght-normal.woff2') format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
:root{--ink:#0B0B0B;--ink2:#151412;--ink3:#211F1B;--cream:#F5F1E9;--cream2:#ECE6DA;--amber:#FDA501;--pink:#FB6472;--grey:#6E675E;--ld:rgba(245,241,233,.13);--ll:rgba(11,11,11,.12);--g:clamp(16px,4vw,40px);--r:26px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{background:var(--ink);color:var(--cream);font:400 17px/1.55 'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:min(1240px,100% - 2*var(--g));margin:0 auto;position:relative}
section{position:relative}
.dark{background:var(--ink);color:var(--cream)}
.light{background:var(--cream);color:var(--ink)}
.amber{background:var(--amber);color:var(--ink)}
.pad{padding:clamp(80px,10vw,140px) 0}
.label{font:500 13px 'DM Mono',monospace;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.display{font-family:'Archivo';font-weight:900;font-stretch:125%;letter-spacing:-.025em;line-height:.92}
.h1{font-size:clamp(46px,8.2vw,118px)}
.h2{font-family:'Archivo';font-weight:850;font-stretch:125%;font-size:clamp(36px,5.4vw,76px);letter-spacing:-.025em;line-height:.95}
.h3{font-family:'Archivo';font-weight:800;font-stretch:118%;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.01em;line-height:1.05}
.lead{font-size:clamp(18px,1.7vw,22px);line-height:1.5;max-width:640px}
.muted{opacity:.7}
.am{color:var(--amber)}
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:999px;font:700 17px 'DM Sans';padding:17px 28px;white-space:nowrap;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--amber);color:var(--ink);box-shadow:0 10px 30px rgba(253,165,1,.25)}
.btn.primary:hover{box-shadow:0 16px 40px rgba(253,165,1,.4)}
.btn.ghost{border:1.5px solid currentColor}
.btn.inkb{background:var(--ink);color:var(--cream)}
.btn .dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.row{display:flex;align-items:center}
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* cursor glow */
.cglow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:90;background:radial-gradient(circle,rgba(253,165,1,.13),rgba(253,165,1,.04) 40%,transparent 68%);mix-blend-mode:screen;opacity:0;transition:opacity .4s}
.cglow.on{opacity:1}
@media (hover:none){.cglow{display:none}}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:92px;display:flex;align-items:center;transition:background .3s,height .3s,box-shadow .3s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between}
.nav.scrolled{background:rgba(11,11,11,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);height:76px;box-shadow:0 1px 0 var(--ld)}
.nav .logo img{height:38px;width:auto}
.skip{position:fixed;left:16px;top:12px;z-index:200;background:var(--amber);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700;transform:translateY(-160%);opacity:0;pointer-events:none}
.skip:focus{transform:none;opacity:1;pointer-events:auto}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.nav .links{display:flex;gap:42px;font:600 18px 'DM Sans'}
.nav .links a{opacity:.85;transition:opacity .2s,color .2s}
.nav .links a:hover,.nav .links a.on{opacity:1;color:var(--amber)}
.nav .btn{padding:14px 24px;font-size:16px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ld);position:relative}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--cream);transition:transform .3s,top .3s}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:25px}
.menu-open .burger i:nth-child(1){top:21px;transform:rotate(45deg)}.menu-open .burger i:nth-child(2){top:21px;transform:rotate(-45deg)}
/* phone menu */
.mmenu{position:fixed;inset:0;z-index:70;background:radial-gradient(110% 55% at 100% 100%,rgba(253,165,1,.16),transparent 62%),var(--ink);display:flex;flex-direction:column;padding:calc(72px + 14px) var(--g) calc(22px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s;overflow-y:auto;overscroll-behavior:contain}
.menu-open .mmenu{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s}
body.menu-open{overflow:hidden}
.menu-open .nav{background:var(--ink);box-shadow:0 1px 0 var(--ld)}
.mm-links{display:flex;flex-direction:column}
.mm-links a{display:flex;align-items:center;gap:14px;padding:15px 2px;border-bottom:1px solid var(--ld);font:800 clamp(26px,7.4vw,34px)/1.1 'Archivo';font-stretch:100%;letter-spacing:-.01em;color:var(--cream);opacity:0;translate:0 12px;transition:opacity .35s,translate .45s cubic-bezier(.2,.7,.2,1),color .2s}
.menu-open .mm-links a{opacity:1;translate:0 0;transition-delay:calc(var(--i) * 45ms + 60ms)}
.mm-links .n{font:500 12px 'DM Mono';letter-spacing:.08em;color:var(--amber);min-width:24px}
.mm-links .ar{margin-left:auto;font:400 22px 'DM Sans';opacity:.35;transition:translate .25s,opacity .25s}
.mm-links a.on .t,.mm-links a.on .ar{color:var(--amber)}
.mm-links a.on .ar,.mm-links a:hover .ar,.mm-links a:active .ar{opacity:1;translate:4px 0}
.mm-oops{align-self:flex-end;height:min(150px,19vh);width:auto;margin:auto 4px 0 0;animation:float 6.5s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6));opacity:0;transition:opacity .5s .25s}
.menu-open .mm-oops{opacity:1}
.mm-foot{display:flex;flex-direction:column;gap:16px;padding-top:14px}
.mm-cta{justify-content:center;width:100%;padding:17px 20px}
.mm-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 12px;font:500 11.5px 'DM Mono';letter-spacing:.02em}
.mm-meta a{opacity:.72}
@media (max-height:660px){.mm-oops{display:none}.mm-foot{margin-top:auto}}
@media (min-width:600px){.mmenu{padding-left:max(var(--g),calc(50% - 280px));padding-right:max(var(--g),calc(50% - 280px))}.mm-links a{font-size:44px;padding:20px 2px}.mm-oops{height:min(220px,22vh)}.mm-meta{font-size:13px}}
@media (prefers-reduced-motion:reduce){.mm-links a{transition:none;translate:0 0}.mm-oops{animation:none}}
@media (max-width:900px){.nav .links,.nav .btn{display:none}.burger{display:block}.nav .logo img{height:28px}.nav{height:72px}}
/* upwork proof */
.up{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#001e00;border-radius:999px;padding:8px 16px 8px 10px;font:600 15px 'DM Sans';box-shadow:0 6px 20px rgba(0,0,0,.25)}
.up img{height:24px;width:24px}
.up .uw{font-weight:700;letter-spacing:-.01em}
.up .tr,.up .js{display:inline-flex;align-items:center;gap:7px;color:#001e00;font-weight:700}
.up svg{flex:none}
.up .sep{width:1px;height:18px;background:#d5e0d5}
/* trust band */
.band{padding:56px 0 64px;border-top:1px solid var(--ld);overflow:hidden}
.marq{white-space:nowrap;font:900 clamp(40px,5vw,64px) 'Archivo';font-stretch:125%;color:transparent;-webkit-text-stroke:1.3px rgba(245,241,233,.45);margin-top:40px;display:flex;width:max-content;animation:marq 40s linear infinite}
.marq span{color:var(--amber);-webkit-text-stroke:0;font-size:.6em;margin:0 26px;align-self:center}
@keyframes marq{to{transform:translateX(-50%)}}
/* thumbnails */
.th{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#1d1b18;box-shadow:0 18px 40px rgba(0,0,0,.3);transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.th img{width:100%;height:100%;object-fit:cover}
.th .cat{position:absolute;top:10px;right:12px;font:500 10.5px 'DM Mono';letter-spacing:.08em;background:rgba(0,0,0,.62);color:#fff;padding:4px 8px;border-radius:6px;text-transform:uppercase;opacity:0;transform:translateY(-4px);transition:.3s}
.th:hover .cat{opacity:1;transform:none}
.th:hover{box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 2px rgba(253,165,1,.5)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1.5px solid currentColor;border-radius:999px;padding:9px 16px;font:500 13.5px 'DM Mono';letter-spacing:.03em;opacity:.8;transition:.2s}
.chip.on,.chip:hover{opacity:1;background:var(--ink);color:var(--cream);border-color:var(--ink)}
.dark .chip.on,.dark .chip:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.bento{display:grid;grid-template-columns:2.1fr 1fr;gap:22px;margin-top:56px}
.bento .stack{display:grid;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.bento{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid3{grid-template-columns:1fr}}
.hide{display:none!important}
/* process infographic */
.proc{overflow:hidden}
.collage{position:absolute;inset:-10%;display:grid;grid-template-columns:repeat(8,1fr);gap:14px;opacity:.09;transform:rotate(-8deg) scale(1.15);filter:grayscale(.3)}
.collage img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.proc .veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(11,11,11,.55),var(--ink) 75%)}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 26px;margin-top:70px;position:relative;z-index:2;counter-reset:s}
.step{position:relative;border-radius:var(--r);border:1px solid var(--ld);padding:32px;background:linear-gradient(160deg,rgba(29,27,24,.92),rgba(15,14,13,.92));backdrop-filter:blur(4px)}
.step .k{font:500 13px 'DM Mono';letter-spacing:.14em;color:var(--amber)}
.step .h3{margin:16px 0 10px}
.step p{opacity:.72;font-size:16.5px}
.step .ic{position:absolute;right:20px;top:-34px;height:86px;width:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
.flowline{position:absolute;left:5%;right:5%;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.35;z-index:1}
@media (max-width:900px){.flow{grid-template-columns:1fr}.flowline{display:none}}
/* before / after */
.bas{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px}
.ba{position:relative;border-radius:22px;overflow:hidden;--pos:50%;user-select:none;touch-action:pan-y;box-shadow:0 24px 50px rgba(0,0,0,.18);background:#ddd}
.ba img{width:100%;height:100%;object-fit:cover;aspect-ratio:var(--ar,4/3)}
.ba .b4{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--amber)}
.ba .knob{position:absolute;top:50%;left:var(--pos);width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--amber);color:var(--ink);display:flex;align-items:center;justify-content:center;font:800 18px 'DM Sans';box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ba .tag{position:absolute;top:14px;font:500 12px 'DM Mono';letter-spacing:.12em;background:rgba(0,0,0,.65);color:#fff;padding:6px 10px;border-radius:7px}
.ba .tag.l{left:14px}.ba .tag.r{right:14px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .cap{position:absolute;left:14px;bottom:14px;font:700 15px 'DM Sans';background:rgba(245,241,233,.92);color:var(--ink);padding:7px 12px;border-radius:10px}
@media (max-width:760px){.bas{grid-template-columns:1fr}}
/* services */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:60px}
.card{border-radius:var(--r);border:1px solid var(--ld);background:var(--ink2);padding:32px;position:relative;transition:transform .35s,border-color .35s}
.light .card{border-color:var(--ll);background:#fff}
.card:hover{transform:translateY(-6px);border-color:rgba(253,165,1,.45)}
.price{font:900 clamp(34px,3.2vw,46px) 'Archivo';font-stretch:122%;margin:16px 0 10px;letter-spacing:-.02em}
.card ul{list-style:none;margin-top:16px}
.card li{padding:10px 0;border-top:1px solid var(--ld);font-size:16px}
.light .card li{border-color:var(--ll)}
.badge{display:inline-block;font:500 11.5px 'DM Mono';letter-spacing:.1em;text-transform:uppercase;background:var(--amber);color:var(--ink);padding:6px 10px;border-radius:7px}
@media (max-width:1100px){.svc{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.svc{grid-template-columns:1fr}}
/* how it works */
.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:70px;position:relative}
.journey .card{min-height:250px}
.journey .n{font:900 56px 'Archivo';font-stretch:125%;opacity:.13;line-height:1}
.jline{position:absolute;left:4%;right:4%;top:-28px;height:4px;border-radius:2px;background:var(--amber);transform-origin:left;transform:scaleX(var(--p,0));transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
@media (max-width:1100px){.journey{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.journey{grid-template-columns:1fr}}
/* reviews */
.revs{columns:3 320px;column-gap:22px;margin-top:56px}
.rev{break-inside:avoid;margin-bottom:22px;border-radius:20px;overflow:hidden;border:1px solid var(--ld);background:var(--ink2)}
.rev img{width:100%}
.rev.ph{padding:30px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
/* person */
.person{display:grid;grid-template-columns:minmax(260px,460px) 1fr;gap:70px;align-items:center}
.person .ph{border-radius:30px;overflow:hidden;aspect-ratio:4/5;background:#1d1b18;position:relative}
.person .ph img{width:100%;height:118%;object-fit:cover;filter:blur(calc(var(--b,1) * 16px)) grayscale(calc(var(--b,1) * .4));transform:translateY(calc(var(--py,-7) * 1%)) scale(calc(1.02 + var(--b,1) * .06));will-change:transform,filter}
@media (max-width:860px){.person{grid-template-columns:1fr;gap:36px}}
/* faq */
.faq details{border-top:1px solid var(--ll)}
.faq details:last-child{border-bottom:1px solid var(--ll)}
.dark .faq details{border-color:var(--ld)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:26px 0;font:700 clamp(19px,1.8vw,24px) 'DM Sans';cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:400 30px 'DM Sans';line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{font-size:18px;line-height:1.6;opacity:.75;margin:-6px 0 26px;max-width:860px}
/* footer */
.footer{padding:90px 0 50px;border-top:1px solid var(--ld)}
.footer .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;margin-top:60px;font-size:17px;line-height:1.9}
.footer .cols b{display:block;font:500 12.5px 'DM Mono';letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:10px}
.footer .cols a:hover{color:var(--amber)}
.footer .base{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:60px;padding-top:24px;border-top:1px solid var(--ld);font:400 13.5px 'DM Mono';opacity:.6}
/* coverflow */
.cflow{position:relative;height:clamp(220px,30vw,380px);margin-top:70px;perspective:1600px}
.cflow .it{position:absolute;left:50%;top:50%;width:clamp(260px,36vw,540px);aspect-ratio:16/9;border-radius:16px;overflow:hidden;transform:translate(-50%,-50%) translateX(calc(var(--o) * 58%)) rotateY(calc(var(--o) * -32deg)) scale(calc(1 - var(--a) * .12));z-index:calc(10 - var(--a));opacity:calc(1 - var(--a) * .22);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s;box-shadow:0 40px 80px rgba(0,0,0,.55);cursor:pointer}
.cflow .it img{width:100%;height:100%;object-fit:cover}
/* category walls (work page) */
.catw{margin-top:100px;scroll-margin-top:110px}
.catw .wall3d{perspective:1800px;margin-top:30px}
.catw .wall3d .g{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;transform:rotateX(34deg) rotateZ(-4deg) scale(.9);transform-origin:center 30%;opacity:.35;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
.catw.in .wall3d .g{transform:none;opacity:1}
@media (max-width:900px){.catw .wall3d .g{grid-template-columns:1fr 1fr}}
/* reveal */
[data-reveal]{opacity:0;transform:translateY(34px) rotateX(8deg);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}.drift{animation:none}}
.ig{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.ig .th{aspect-ratio:16/9}
@media (max-width:760px){.ig{grid-template-columns:1fr 1fr}}

/* ---------- v2 additions ---------- */
.navcta{margin-left:8px}
.flogo{width:100%;max-width:1240px;height:auto}
.footer .fright{text-align:right}
@media (max-width:700px){.footer .fright{text-align:left}}
.fine{margin-top:28px;font:500 13.5px 'DM Mono';letter-spacing:.04em;opacity:.65}
.price.soon{font-size:clamp(26px,2.4vw,32px)}
.per{font:500 16px 'DM Mono';opacity:.6;letter-spacing:.02em}
.card.hot{border-color:rgba(253,165,1,.55);box-shadow:0 0 0 1px rgba(253,165,1,.2),0 30px 60px rgba(253,165,1,.08)}
.card .more{display:inline-block;margin-top:18px;font-weight:700;color:var(--amber)}
.badge.inv{background:var(--ink);color:var(--amber)}
.svc.two{grid-template-columns:repeat(2,1fr)}
.svc.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.svc.two,.svc.three{grid-template-columns:1fr}}
.orb{position:absolute;width:700px;height:700px;transform:translateY(-50%);background:radial-gradient(circle,rgba(253,165,1,.24),transparent 65%);pointer-events:none}
/* Mr. Oops: always a little alive */
.oops{animation:float 6.5s ease-in-out infinite;animation-delay:var(--fd,0s);transform-origin:50% 90%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.28));transition:scale .3s}
.dark .oops{filter:drop-shadow(0 28px 36px rgba(0,0,0,.6))}
.oops:hover{animation:wiggle .7s ease-in-out}
@keyframes float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -14px;rotate:-3deg}}
@keyframes wiggle{0%,100%{rotate:0deg}25%{rotate:-9deg}50%{rotate:7deg}75%{rotate:-4deg}}
[data-reveal].oops:not(.in){animation:none}
/* hero scroll cue */
.scrollcue{position:absolute;left:50%;bottom:26px;width:28px;height:46px;margin-left:-14px;border:1.5px solid rgba(245,241,233,.4);border-radius:20px;z-index:6}
.scrollcue span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:var(--amber);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@media (max-width:900px){.scrollcue{display:none}}
/* process path */
.flowpath{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.flowpath path{fill:none;stroke:var(--amber);stroke-width:2;stroke-dasharray:6 10;opacity:.35;animation:dash 30s linear infinite}
@keyframes dash{to{stroke-dashoffset:-600}}
.step{z-index:1}
@media (max-width:900px){.flowpath{display:none}.step .ic{height:74px;top:-26px}}
.flow{row-gap:58px}
/* reviews placeholder */
.rev.ph .stars{color:var(--amber);letter-spacing:.2em;font-size:18px}
.rev.ph p{font:600 21px/1.4 'DM Sans';margin:18px 0 26px;opacity:.85}
/* work hero */
.workhero{position:relative;overflow:hidden;padding:clamp(150px,16vw,210px) 0 clamp(70px,8vw,100px);min-height:88vh;display:flex;align-items:flex-end}
.chip .n{opacity:.55;margin-left:4px}
.idx{font:500 15px 'DM Mono';letter-spacing:.1em;color:var(--amber);margin-right:14px;vertical-align:middle;background:var(--ink);padding:5px 9px;border-radius:8px}
.th .ttl{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font:600 13px/1.3 'DM Sans';color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transform:translateY(8px);transition:.3s}
.th:hover .ttl{opacity:1;transform:none}
@media (hover:none){.th .ttl{display:none}}
.midcta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:100px;padding:28px 34px;border-radius:var(--r);background:#fff;border:1px solid var(--ll)}
.midcta > div{flex:1;min-width:240px}
.endcta{padding:clamp(90px,10vw,130px) 0;overflow:hidden;border-top:1px solid var(--ld)}
/* page heroes */
.pagehero{position:relative;padding:clamp(150px,16vw,210px) 0 clamp(80px,9vw,120px);overflow:hidden}
.heromascot{position:absolute;right:5vw;bottom:12%;height:min(320px,24vw);width:auto;z-index:1}
@media (max-width:900px){.heromascot{display:none}}
.pagehero .wrap{z-index:2}
.ticks{list-style:none;margin-top:20px;font-size:18px}
.ticks li{padding:13px 0 13px 34px;border-top:1px solid var(--ld);position:relative}
.ticks li::before{content:'';position:absolute;left:2px;top:19px;width:16px;height:9px;border-left:2.5px solid var(--amber);border-bottom:2.5px solid var(--amber);transform:rotate(-45deg)}
.ticks.light li,.light .ticks li{border-color:var(--ll)}
.light .ticks li::before{border-color:var(--ink)}
/* studio */
.studiohero{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
@media (max-width:900px){.studiohero{grid-template-columns:1fr}}
.stats{padding:46px 0}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.statrow b{display:block;font:900 clamp(46px,5.4vw,80px)/1 'Archivo';font-stretch:125%;color:var(--amber);letter-spacing:-.02em}
.statrow span{display:block;margin-top:10px;font:500 13px 'DM Mono';letter-spacing:.08em;text-transform:uppercase;opacity:.7;max-width:230px}
@media (max-width:800px){.statrow{grid-template-columns:1fr 1fr}}
.beliefs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:80px}
.beliefs .card{padding-top:60px}
.beliefs .k{font:500 13px 'DM Mono';letter-spacing:.14em;color:var(--grey)}
.beliefs .ic2{position:absolute;right:16px;top:-44px;height:96px;width:auto}
@media (max-width:1100px){.beliefs{grid-template-columns:1fr 1fr;row-gap:70px}}
@media (max-width:620px){.beliefs{grid-template-columns:1fr}}
.poses{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:70px}
.poses figure{border-radius:22px;border:1px solid var(--ld);background:var(--ink2);padding:26px 18px 20px;text-align:center}
.poses img{height:150px;width:auto;margin:0 auto}
.poses figcaption{margin-top:18px}
.poses b{display:block;font:800 16px/1.2 'Archivo';font-stretch:115%}
.poses span{display:block;margin-top:6px;font-size:14px;opacity:.65}
@media (max-width:1100px){.poses{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.poses{grid-template-columns:1fr 1fr}.poses img{height:120px}}
/* consultation */
.consulthero{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:center}
.ticket{position:relative;border-radius:30px;padding:38px;background:linear-gradient(160deg,#1d1b18,#121110);border:1px solid rgba(253,165,1,.4);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.ticket .tk{position:absolute;right:18px;top:-60px;height:130px;width:auto}
@media (max-width:900px){.consulthero{grid-template-columns:1fr}}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:70px}
@media (max-width:860px){.twocol{grid-template-columns:1fr;gap:60px}}
/* 404 */
.nf{min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:120px 0 80px}
.nf .orb{transform:translate(-50%,-50%)}
.cta{padding:clamp(90px,11vw,150px) 0;text-align:center}
.cta .lead{margin-left:auto;margin-right:auto}

.price small{font:700 15px 'DM Sans';font-stretch:100%;letter-spacing:0;opacity:.6;margin-right:8px;vertical-align:.35em}
.svc .card{display:flex;flex-direction:column}
.card .more{margin-top:auto;padding-top:20px;font-weight:700;color:var(--amber)}
.light .card .more{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* reviews */
.revhead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.profile{display:block;width:min(453px,100%);border-radius:18px;overflow:hidden;border:1px solid var(--ld);box-shadow:0 30px 60px rgba(0,0,0,.45);transition:transform .35s}
.profile:hover{transform:translateY(-4px)}
.profile img{width:100%;height:auto}
.revs2{columns:2 460px;column-gap:20px;margin-top:56px}
.revs2 .rev{break-inside:avoid;margin:0 0 20px;border-radius:18px;overflow:hidden;border:1px solid var(--ld);background:#1a1a1a}
.revs2 .rev img{width:100%;height:auto}
.revs2 .q{display:none}
.revfoot{margin-top:26px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
@media (max-width:700px){
 .revs2 .q{display:block;padding:22px 22px 16px;font:500 18px/1.5 'DM Sans';color:var(--cream)}
 .revs2 .q .stars{display:block;color:#f2662d;letter-spacing:.15em;font-size:15px;margin-bottom:10px}
 .revs2 .rev img{opacity:.9;border-top:1px solid var(--ld)}
}
.quote{margin-top:34px;max-width:560px;padding:20px 24px;border-left:3px solid var(--amber);background:rgba(245,241,233,.04);border-radius:0 14px 14px 0}
.quote p{font:500 18px/1.5 'DM Sans';font-style:italic}
.quote span{display:block;margin-top:10px;font:500 12.5px 'DM Mono';letter-spacing:.1em;text-transform:uppercase;opacity:.6}

@media (max-width:480px){.up{gap:7px;padding:7px 12px 7px 8px;font-size:12.5px}.up .uw{display:none}.up svg{width:20px;height:20px}.up img{width:22px;height:22px}.trustrow{margin-top:44px}}

/* ---------- v3: hero with a full-screen moving wall ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;padding:130px 0 100px}
.wallbg{position:absolute;inset:0;overflow:hidden;perspective:1500px;pointer-events:none;will-change:opacity}
.wallbg .plane{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(52deg) rotateZ(-22deg);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.wallbg .track{--gap:24px;display:grid;grid-template-columns:repeat(7,300px);gap:var(--gap);animation:flow 80s linear infinite;will-change:transform}
.wallbg.deep .track{animation-duration:95s}
@keyframes flow{from{transform:translateY(0)}to{transform:translateY(calc(-33.3333% - var(--gap) / 3))}}
.wallbg .t{width:300px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#1d1b18;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.wallbg .t img{width:100%;height:100%;object-fit:cover}
.hshade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,11,11,.88) 0%,rgba(11,11,11,.7) 36%,rgba(11,11,11,.38) 66%,rgba(11,11,11,.22) 100%),linear-gradient(180deg,rgba(11,11,11,.55) 0%,transparent 20%,transparent 72%,var(--ink) 100%)}
.hglow{position:absolute;width:900px;height:900px;right:-12vw;top:8vh;background:radial-gradient(circle,rgba(253,165,1,.22),transparent 62%);pointer-events:none}
.herogrid{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:30px;align-items:center}
.hero .h1{font-size:clamp(44px,6.5vw,112px)}
.hero .eyebrow{font:500 14px 'DM Mono';letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.trustrow{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:56px}
/* Mr. Oops standing on a lit floor */
.oopsstand{position:relative;justify-self:center;align-self:center;padding-bottom:26px;isolation:isolate}
.oopsstand .tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.oopsstand img{display:block;height:clamp(240px,36vh,420px);width:auto;margin:0 auto;animation:hover 5.5s ease-in-out infinite;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.oopsstand .floor{position:absolute;left:50%;bottom:0;width:92%;height:40px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.75) 0%,rgba(0,0,0,.4) 34%,rgba(253,165,1,.32) 52%,rgba(253,165,1,.08) 64%,transparent 72%);animation:floor 5.5s ease-in-out infinite;z-index:-1}
.oopsstand::before{content:'';position:absolute;left:-12%;right:-12%;top:4%;bottom:8%;background:radial-gradient(circle,rgba(253,165,1,.22),transparent 64%);z-index:-2;pointer-events:none}
@keyframes hover{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes floor{0%,100%{scale:1;opacity:1}50%{scale:.84;opacity:.75}}
.oopsstand.studio-oops img{height:clamp(260px,40vh,460px)}
.oopsstand.fan-oops{position:absolute;right:2%;bottom:-6px;z-index:8;padding-bottom:18px}
.oopsstand.fan-oops img{height:clamp(170px,22vw,280px)}
.oopsstand.fan-oops .floor{height:24px}
@media (max-width:900px){
 .hero{align-items:flex-start;padding:118px 0 70px}
 .herogrid{grid-template-columns:1fr}
 .hero-oops{justify-self:end;margin-top:26px}
 .hero-oops img{height:200px}
 .hshade{background:linear-gradient(180deg,rgba(11,11,11,.82) 0%,rgba(11,11,11,.64) 55%,rgba(11,11,11,.78) 82%,var(--ink) 100%)}
 .wallbg .track{--gap:18px;grid-template-columns:repeat(7,220px)}
 .wallbg .t{width:220px}
}
@media (max-width:480px){.up{gap:7px;padding:7px 12px 7px 8px;font-size:12.5px}.up .uw{display:none}.up svg{width:20px;height:20px}.up img{width:22px;height:22px}.trustrow{margin-top:40px}}
/* numbers band */
.band .statrow{padding-bottom:10px}
.statrow b{font-variant-numeric:tabular-nums}
/* tools */
.toolrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:44px;position:relative;z-index:2}
.tools{display:flex;flex-wrap:wrap;gap:10px}
.tool{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 9px;border-radius:12px;border:1px solid var(--ld);background:rgba(245,241,233,.05);font:600 15px 'DM Sans';backdrop-filter:blur(6px)}
.tool i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px rgba(253,165,1,.7)}
.tool img{height:28px;width:28px;border-radius:22%;box-shadow:0 0 0 1px rgba(245,241,233,.1)}
.light .tool{border-color:var(--ll);background:#fff}
/* person facts */
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.facts span{padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--ll);font-size:15px}
.facts b{font-weight:800}
/* two-column text + mascot rows */
.duo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:50px;align-items:center}
@media (max-width:760px){.duo{grid-template-columns:1fr}.duo > img{justify-self:start;height:min(300px,70vw)!important}}
/* makeover */
.mkgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);align-items:center}
.mkitems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mk{border-radius:20px;border:1px solid var(--ld);background:linear-gradient(160deg,#1d1b18,#131210);padding:24px 22px;transition:transform .35s,border-color .35s}
.mk:hover{transform:translateY(-4px);border-color:rgba(253,165,1,.45)}
.mkic{display:inline-flex;width:56px;height:56px;border-radius:16px;align-items:center;justify-content:center;background:rgba(253,165,1,.1);color:var(--amber);margin-bottom:16px}
.mk .h3{font-size:21px}
.mk p{margin-top:8px;font-size:15.5px;opacity:.68}
@media (max-width:900px){.mkgrid{grid-template-columns:1fr}}
@media (max-width:520px){.mkitems{grid-template-columns:1fr}}
/* work page ending */
.endwork{position:relative;padding:clamp(90px,10vw,140px) 0;overflow:hidden;border-top:1px solid var(--ld)}
.endgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center;position:relative;z-index:2}
.endwork .toolrow{margin-top:30px}
.fan{position:relative;height:clamp(320px,34vw,470px);perspective:1400px}
.card3{position:absolute;width:58%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);animation:fanfloat 8s ease-in-out infinite}
.card3 img{width:100%;height:100%;object-fit:cover}
.card3.c1{left:0;top:6%;transform:rotateY(16deg) rotateZ(-9deg);z-index:1}
.card3.c2{left:36%;top:0;transform:rotateY(-14deg) rotateZ(5deg);z-index:2;animation-delay:-2s}
.card3.c3{left:14%;top:30%;transform:rotateY(10deg) rotateZ(-3deg);z-index:3;animation-delay:-4s}
.card3.c4{left:40%;top:40%;transform:rotateY(-12deg) rotateZ(7deg);z-index:4;animation-delay:-1s}
.card3.c5{left:4%;top:58%;transform:rotateY(14deg) rotateZ(-5deg);z-index:5;animation-delay:-3s}
@keyframes fanfloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media (max-width:900px){.endgrid{grid-template-columns:1fr}.fan{height:clamp(300px,70vw,420px)}}
@media (prefers-reduced-motion:reduce){.wallbg .track{animation:none}}

/* round 3: four packages, contact buttons, the real channel */
.price small.per{font:500 15px 'DM Mono';font-stretch:100%;letter-spacing:.02em;margin:0 0 0 10px;vertical-align:baseline;opacity:.6}
.svc .card > .badge{align-self:flex-start}
.svc:not(.two):not(.three) .price small.per{display:block;margin:8px 0 0}
.cardcta{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.cardcta .btn{justify-content:center;padding:15px 20px;font-size:16px;white-space:normal;text-align:center}
.cardcta .more{margin:0;padding:0;align-self:center;font-size:15px}
.mkgrid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.mkitems{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(44px,6vw,80px)}
@media (max-width:900px){.mkgrid{grid-template-columns:1fr}.mkitems{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mkitems{grid-template-columns:1fr}}
.chshot{margin:0;position:relative;isolation:isolate}
.chshot::before{content:"";position:absolute;inset:8% 4% -6%;background:radial-gradient(closest-side,rgba(253,165,1,.26),transparent);filter:blur(34px);z-index:-1}
.chshot img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--ld);box-shadow:0 40px 80px -30px rgba(0,0,0,.85);transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.chshot:hover img{transform:perspective(1400px) rotateY(0) rotateX(0)}
.chshot figcaption{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px;font-size:15.5px}
.chshot figcaption span:not(.badge){opacity:.78}
.chshot figcaption a{color:var(--amber);font-weight:700;margin-left:auto}
@media (max-width:900px){.chshot img{transform:none}.chshot figcaption a{margin-left:0}}
@media (max-width:1100px) and (min-width:901px){.nav .links{gap:26px;font-size:16.5px}.nav .btn{padding:12px 18px;font-size:15px}.nav .logo img{height:32px}}

/* suresh.psd: the photo builds itself like a thumbnail, layer by layer, then comes into focus */
.psdsec{overflow-x:clip}
.person.v2{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,5.5vw,84px)}
@media (max-width:960px){.person.v2{grid-template-columns:1fr;gap:40px}}
.psd{margin:0;container-type:inline-size;--p:1}
.psd .stage{position:relative;aspect-ratio:16/9;perspective:1700px;perspective-origin:50% 30%}
.psd .stack{position:absolute;inset:0;transform-style:preserve-3d;--q:calc(1 - var(--p));
 transform:translateY(calc(var(--q) * 5cqw)) rotateX(calc(var(--q) * 54deg + var(--rx, 0deg))) rotateY(var(--ry, 0deg)) rotateZ(calc(var(--q) * -28deg)) scale(calc(1 - var(--q) * .2));
 transition:transform .18s ease-out}
.psd .ly{position:absolute;inset:0;border-radius:clamp(10px,1.8cqw,18px);overflow:hidden;
 --l:clamp(0, calc((var(--p) - var(--i) * .07) / .62), 1);
 transform:translateZ(calc((1 - var(--l)) * var(--i) * 8cqw))}
.psd .ly::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid rgba(11,11,11,.42);background:rgba(11,11,11,.035);opacity:calc(1 - var(--l));pointer-events:none}
.psd .bgl{background:#0b0b0b;box-shadow:0 3cqw 7cqw -2.5cqw rgba(11,11,11,.55)}
.psd .bgl::after{border-color:rgba(253,165,1,.6)}
.psd .bgl img{width:100%;height:100%;object-fit:cover}
.psd .glow{--gx:75.5%;--gy:43%;background:radial-gradient(40% 72% at var(--gx) var(--gy),rgba(253,165,1,.6),rgba(253,165,1,.2) 46%,transparent 72%)}
.psd .glow .ring{position:absolute;left:var(--gx);top:var(--gy);width:37cqw;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:.55cqw solid rgba(253,165,1,.9);box-shadow:0 0 2.6cqw rgba(253,165,1,.55),inset 0 0 2.6cqw rgba(253,165,1,.4)}
.psd .me img{position:absolute;bottom:-15%;right:-10%;height:112%;width:auto;max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 17%);mask-image:linear-gradient(90deg,transparent,#000 17%);
 --bl:calc((1 - clamp(0, calc((var(--p) - .55) / .45), 1)) * 2.4cqw);
 filter:blur(var(--bl)) contrast(1.04)}
.psd .ttl .words{position:absolute;left:4.4cqw;top:6.4cqw;display:flex;flex-direction:column;align-items:flex-start;gap:.3cqw;font:900 4cqw/.86 'Archivo';font-stretch:100%;text-transform:uppercase;color:var(--cream);letter-spacing:-.005em;text-shadow:0 .05em 0 rgba(0,0,0,.55),0 .1em .4em rgba(0,0,0,.6)}
.psd .ttl .s{font-size:3.9cqw;letter-spacing:.04em}
.psd .ttl .m{font-size:5cqw}
.psd .ttl .l{font-size:7.3cqw}
.psd .ttl .xl{font-size:9.2cqw}
.psd .ttl .xxl{font-size:12.4cqw}
.psd .ttl .am{color:var(--amber)}
.psd .mo .fig{position:absolute;height:41%;left:35%;bottom:8%}
.psd .mo .fig img{display:block;height:100%;width:auto;rotate:-5deg;filter:drop-shadow(0 1.2cqw 1.2cqw rgba(0,0,0,.5));animation:psdfloat 3.4s ease-in-out infinite}
.psd .mo .oshadow{position:absolute;left:46%;bottom:-10%;width:72%;height:10%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(253,165,1,.6),rgba(253,165,1,.18) 55%,rgba(253,165,1,0));animation:psdshadow 3.4s ease-in-out infinite}
.psd.side-r .mo .oshadow{left:60%}
@keyframes psdfloat{0%,100%{translate:0 0}50%{translate:0 -7%}}
@keyframes psdshadow{0%,100%{scale:1;opacity:.95}50%{scale:.72;opacity:.5}}
.psd .ui .dur{position:absolute;right:2cqw;bottom:3.2cqw;font:500 2.2cqw/1 'DM Mono';letter-spacing:.04em;background:rgba(11,11,11,.88);color:#fff;padding:.55cqw .9cqw;border-radius:.7cqw}
.psd .ui .bar{position:absolute;left:0;right:0;bottom:0;height:1cqw;background:rgba(245,241,233,.3)}
.psd .ui .bar i{display:block;height:100%;width:calc(var(--p) * 100%);background:var(--amber)}
.psd .ui::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:skewX(-18deg);opacity:0}
.psd.built .ui::before{animation:psdshine 1.1s ease-out 1}
@keyframes psdshine{0%{left:-40%;opacity:1}100%{left:125%;opacity:0}}
.psd.side-l .glow{--gx:20%;--gy:37%}
.psd.side-l .glow .ring{width:33cqw}
.psd.side-l .me img{right:auto;left:-14%;height:118%;bottom:-20%;-webkit-mask-image:linear-gradient(270deg,transparent,#000 14%);mask-image:linear-gradient(270deg,transparent,#000 14%)}
.psd.side-l .ttl .words{left:auto;right:4.4cqw;align-items:flex-end;text-align:right}
.psd.side-l .mo .fig{left:auto;right:26%;height:39%}
.psd.side-l .mo .fig img{rotate:5deg}
.psd .panel{position:absolute;right:-1cqw;bottom:-1cqw;display:flex;flex-direction:column;gap:6px;background:var(--ink);color:var(--cream);border-radius:14px;padding:14px 16px 12px;font:500 12px/1.2 'DM Mono';letter-spacing:.05em;text-transform:uppercase;box-shadow:0 20px 40px -18px rgba(11,11,11,.6);opacity:clamp(0, calc((1 - var(--p)) * 3 - .3), 1);pointer-events:none;z-index:2}
.psd .panel b{font:700 11px 'DM Mono';letter-spacing:.14em;color:var(--amber);margin-bottom:4px}
.psd .panel span{display:flex;align-items:center;gap:9px;--l:clamp(0, calc((var(--p) - var(--i) * .07) / .62), 1);opacity:calc(.45 + var(--l) * .55)}
.psd .panel span::before{content:"";width:9px;height:9px;border-radius:3px;border:1.5px solid var(--amber);background:rgba(253,165,1,calc(var(--l)))}
.psd.side-l .panel{right:auto;left:-1cqw}
.psd figcaption{margin-top:20px;opacity:clamp(0, calc((var(--p) - .7) / .3), 1);display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline;font:500 13px/1.4 'DM Mono';letter-spacing:.05em;text-transform:uppercase}
.psd figcaption b{font-weight:500;color:var(--ink);background:var(--amber);padding:3px 8px;border-radius:6px}
.psd figcaption span{opacity:.62}
@media (max-width:600px){.psd .panel{display:none}}
@media (prefers-reduced-motion:reduce){.psd{--p:1 !important}.psd .stack{transition:none}.psd .mo .fig img,.psd .mo .oshadow{animation:none}}