@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#10151d;--muted:#6f7680;--blue:#1265fa;--paper:#f6f7f8;--line:#dce0e5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #24b8ff;outline-offset:5px}button{border:0}img{max-width:100%;display:block}.skip{position:fixed;top:-100px;z-index:100;background:white;padding:20px}.skip:focus{top:0}.preview-note{background:#152238;color:#bcd2f2;font-size:9px;letter-spacing:.15em;padding:9px 5%;display:flex;justify-content:space-between}.preview-note span{letter-spacing:.02em}header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#080c11;color:white;border-bottom:1px solid #ffffff12}.brand{font-family:Manrope,sans-serif;font-size:23px;font-weight:800;letter-spacing:-1.5px;display:block}.brand span{color:#23b4ff}.brand img{width:124px;height:64px;object-fit:contain}.brand b{font-size:23px}nav{display:flex;gap:35px;font-size:12px;color:#bfc7d0}.bag-button{color:white;background:transparent;font-size:12px}.bag-button span{display:inline-grid;place-items:center;background:#ffffff18;border-radius:50%;width:24px;height:24px;margin-left:10px}.hero{background:#080c11;color:white;padding:36px 5% 0;overflow:hidden}.hero-top,.hero-title,.hero-bottom{display:flex;justify-content:space-between;align-items:center}.eyebrow,.tiny{font-size:10px;letter-spacing:.17em;font-weight:600}.eyebrow i{display:inline-block;width:6px;height:6px;background:#37baff;border-radius:50%;margin-right:9px;box-shadow:0 0 14px #008bff}.hero-top .tiny{color:#5f6e80}.hero-title{position:relative;z-index:2;align-items:flex-end;margin:24px 0 0}.hero h1{font:500 clamp(58px,6.8vw,108px)/.99 Manrope,sans-serif;letter-spacing:-.065em;margin:0}.hero em,h2 em{font-style:normal;color:#8fa3b7}.hero-title p{color:#99a6b6;font-size:15px;line-height:1.8;margin-bottom:14px}.hero-stage{position:relative;height:470px;max-width:1450px;margin:-5px auto 0;perspective:1100px}.stage-halo{position:absolute;inset:20% 5% 0;background:radial-gradient(ellipse,#0652a848,transparent 66%);filter:blur(25px);animation:breathe 9s ease-in-out infinite}.stage-lines{position:absolute;inset:8% -20% 0;background:repeating-linear-gradient(90deg,transparent 0 99px,#8299b410 100px),repeating-linear-gradient(0deg,transparent 0 99px,#8299b410 100px);transform:rotateX(64deg);mask-image:radial-gradient(ellipse,black,transparent 66%)}.hero-product{position:absolute;inset:-50px 10% 10px;display:grid;place-items:center;transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform 1s ease-out;pointer-events:none}.hero-product img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 30px 30px #0006);animation:float 8s ease-in-out infinite}.hero-caption{position:absolute;bottom:24px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;z-index:3}.hero-caption h2{font-size:25px;font-weight:500;margin:6px 0 0}.hero-caption .tiny{color:#798ba0}.coordinate{position:absolute;top:40%;font-size:12px;letter-spacing:.15em;line-height:1.8;color:#9bacc0;z-index:2}.coordinate small{font-size:7px}.coordinate.left{left:0}.coordinate.right{right:0;text-align:right}.hero-select{display:flex;gap:9px}.swatch{width:25px;height:25px;border-radius:50%;background:var(--sw);border:3px solid #080c11;outline:1px solid #405064;transition:transform .3s}.swatch.active{outline:2px solid #48bfff;transform:scale(1.15)}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:36px;padding:17px 23px;font-size:12px;font-weight:600;border-radius:6px;transition:background .25s,box-shadow .25s}.button.white{background:#f8faff;color:#0c1621}.button.white:hover{background:#dfefff;box-shadow:0 4px 25px #1c8fff30}.button.blue{background:var(--blue);color:white;width:100%}.button.blue:hover{background:#0856d9}.hero-bottom{padding:22px 0;border-top:1px solid #ffffff18;font-size:9px;letter-spacing:.12em;color:#9da9b6}.hero-bottom i{padding:0 12px;color:#3298ff}.section{padding:100px 6%;max-width:1600px;margin:auto}.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:45px;gap:35px}h2{font:500 clamp(36px,4.3vw,62px)/1.05 Manrope,sans-serif;letter-spacing:-.05em;margin:20px 0}.collection h2 em,.measure h2 em{color:#969ca4}.head-aside p,.section-head>p{color:var(--muted);font-size:14px;line-height:1.8}.filters{display:flex;gap:4px;margin-top:24px;background:#e9ecf0;padding:4px;border-radius:40px}.filters button{font-size:11px;background:transparent;border-radius:30px;padding:10px 15px;color:#626b77}.filters button.active{background:white;color:#10151d;box-shadow:0 2px 5px #00000008}.product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:35px 22px}.product-card{grid-column:span 2;min-width:0}.product-card:nth-child(-n+2){grid-column:span 3}.product-image{position:relative;width:100%;aspect-ratio:1.42;background:#e9edf1;overflow:hidden;border-radius:10px;display:block}.product-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}.product-image:hover img{transform:scale(1.045)}.product-image .plus{position:absolute;right:16px;bottom:16px;width:34px;height:34px;border-radius:50%;background:#fff;color:#152238;display:grid;place-items:center;font-size:20px}.product-tag{position:absolute;top:15px;left:16px;background:#ffffffca;font-size:9px;letter-spacing:.09em;border-radius:30px;padding:8px 12px}.product-meta{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 2px}.product-meta h3{font-size:20px;font-weight:500;letter-spacing:-.03em;margin:0 0 5px}.product-meta p{font-size:11px;color:#7b8490;margin:0}.product-meta strong{font-weight:500;font-size:18px}.studio{display:grid;grid-template-columns:.8fr 1.2fr;background:#0c1119;color:white;min-height:650px;overflow:hidden}.studio-copy{padding:85px 10% 85px 15%}.studio-copy>p:not(.eyebrow){font-size:14px;line-height:1.8;color:#97a5b8;max-width:340px}.studio h2{font-size:clamp(36px,4vw,58px)}.surface-toggle{display:flex;background:#1a2432;padding:4px;border-radius:6px;width:max-content;margin:25px 0}.surface-toggle button{background:none;color:#8d9aae;font-size:11px;padding:11px 20px;border-radius:4px}.surface-toggle button.active{background:#394b62;color:white}.studio-picks{display:flex;gap:11px;margin:25px 0}.studio-copy .button{margin-top:15px}.desk{background:radial-gradient(ellipse at 50% 40%,#303843,#111720 75%);position:relative;min-height:620px;overflow:hidden;transition:background .8s}.desk.light{background:radial-gradient(ellipse at 50% 40%,#f6f3ed,#bdbab4)}.desk-label{position:absolute;top:32px;left:35px;z-index:2;font-size:9px;color:#8793a3;letter-spacing:.18em}.monitor{position:absolute;top:50px;left:15%;width:70%;height:150px;background:#141b24;border:6px solid #0d1117;border-radius:8px;box-shadow:0 25px 30px #0005;transform:perspective(900px) rotateX(-12deg)}.monitor div{height:100%;background:radial-gradient(ellipse at 60% 90%,#0067d966,transparent 65%),linear-gradient(150deg,#172c46,#080e18)}.monitor:after{content:'';position:absolute;height:60px;width:20%;left:40%;bottom:-65px;background:#1b2531;clip-path:polygon(30% 0,70% 0,85% 85%,100% 100%,0 100%,15% 85%)}#desk-mat{position:absolute;left:2%;top:200px;width:96%;height:350px;object-fit:contain;mix-blend-mode:screen;transition:opacity .3s,transform .7s;transform:rotate(-5deg)}.desk.light #desk-mat{mix-blend-mode:multiply}.keyboard{position:absolute;top:330px;left:22%;width:35%;height:105px;border:7px solid #202936;border-radius:7px;background:repeating-linear-gradient(90deg,transparent 0 15px,#18222d 16px 18px),repeating-linear-gradient(0deg,#435266 0 15px,#18222d 16px 18px);transform:rotate(-5deg) skewX(-7deg);box-shadow:4px 12px 14px #0006;pointer-events:none}.mouse{position:absolute;top:355px;right:22%;width:40px;height:66px;border-radius:45% 45% 42% 42%;background:linear-gradient(90deg,#303c49,#657589 60%,#34414e);transform:rotate(-5deg);box-shadow:3px 10px 12px #0006;pointer-events:none}.mouse:after{content:'';position:absolute;top:8px;left:18px;width:4px;height:12px;background:#8ca5bb;border-radius:3px}.desk-note{position:absolute;bottom:25px;right:25px;font-size:8px;letter-spacing:.15em;color:#7e8d9f}.measure-visual{position:relative;padding:25px 70px;max-width:1000px;margin:40px auto}.measure-visual img{width:100%;max-height:450px;object-fit:contain;mix-blend-mode:multiply}.width-rule{position:absolute;left:12%;right:12%;top:0;border-top:1px solid #a9b3bf;text-align:center;font-size:10px;letter-spacing:.2em;padding-top:10px}.height-rule{position:absolute;right:6%;top:30%;bottom:20%;border-right:1px solid #a9b3bf;writing-mode:vertical-rl;font-size:10px;letter-spacing:.15em;padding-right:12px;text-align:center}.use-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid var(--line);padding-top:32px}.use-cases span{font-size:10px;color:#8c98a6}.use-cases h3{font-weight:500;font-size:18px}.use-cases p{color:#737e8b;font-size:13px;line-height:1.6}.closing{background:#0756d1;color:white;position:relative;overflow:hidden;padding:80px 6%;min-height:440px}.closing h2{font-size:clamp(50px,7vw,94px);position:relative;z-index:1}.closing h2 em{color:#9fcaff}.closing .button{position:relative;z-index:1}.closing-mark{position:absolute;right:-5%;bottom:-60px;font-size:clamp(200px,32vw,470px);font-weight:800;font-family:Manrope;letter-spacing:-.12em;color:#ffffff09;transform:rotate(-8deg);pointer-events:none}.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:70px}.faq h2{font-size:40px}.faq details{padding:24px 0;border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-size:14px}summary::-webkit-details-marker{display:none}details p{font-size:13px;line-height:1.8;color:#667380;max-width:600px}footer{margin:0 6%;border-top:1px solid var(--line);padding:32px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}footer p,footer>span{font-size:11px;color:#76808c}dialog{border:0;border-radius:15px;padding:0;width:min(950px,94vw);max-height:90vh;background:#f8fafc;color:var(--ink);box-shadow:0 35px 100px #0005}dialog::backdrop{background:#070e19b8;backdrop-filter:blur(8px)}.close{position:absolute;top:15px;right:15px;z-index:5;border-radius:50%;width:34px;height:34px;background:#e8edf2;font-size:25px;color:#324255}.modal-layout{display:grid;grid-template-columns:1.15fr 1fr}.modal-image{background:#e8edf3;display:grid;place-items:center;min-height:420px}.modal-image img{width:100%}.modal-copy{padding:65px 35px 40px}.modal-copy h2{font-size:44px}.modal-copy>p{font-size:13px;line-height:1.7;color:#6d7a8b}.price-row{display:flex;justify-content:space-between;align-items:center;padding:25px 0;border-bottom:1px solid var(--line)}.price-row strong{font-size:28px;font-weight:500}.price-row span{font-size:12px}.small,.modal-copy .small{font-size:11px;color:#85909e;line-height:1.7}.detail-note{font-size:11px!important;margin:20px 0}#bag-modal{width:min(500px,94vw);padding:45px 30px}#bag-modal h2{font-size:36px}.bag-item{display:grid;grid-template-columns:90px 1fr 30px;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}.bag-item img{border-radius:5px}.bag-item h3{margin:0 0 5px;font-size:15px}.bag-item p{margin:0;font-size:11px;color:#77818d}.bag-item button{background:none;font-size:23px}.bag-total{display:flex;justify-content:space-between;padding:25px 0}.bag-total strong{font-size:25px}#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,100px);background:#15253c;color:#fff;padding:15px 25px;font-size:12px;border-radius:7px;z-index:100;transition:transform .4s;pointer-events:none}#toast.show{transform:translate(-50%,0)}@keyframes float{50%{transform:translateY(-12px) rotate(.7deg)}}@keyframes breathe{50%{opacity:.5;transform:scale(1.1)}}
@media(min-width:1600px){.hero-title,.hero-top,.hero-bottom{max-width:1450px;margin-left:auto;margin-right:auto}}@media(max-width:800px){header{height:72px}nav{display:none}.hero{padding:24px 5% 0}.hero-top .tiny{display:none}.hero-title{display:block}.hero h1{font-size:clamp(48px,10vw,76px)}.hero-title p{font-size:13px;margin-top:22px}.hero-stage{height:350px;margin-top:0}.hero-product{inset:-30px -14% 65px}.coordinate{display:none}.hero-caption{bottom:20px;gap:10px;flex-wrap:wrap}.hero-caption h2{font-size:20px}.hero-caption .button{padding:13px 17px;font-size:10px;gap:15px}.hero-select{gap:7px}.swatch{width:21px;height:21px}.hero-bottom{font-size:7px;gap:10px;line-height:1.6}.section{padding:65px 6%}.section-head{display:block}.head-aside{margin-top:25px}.filters{width:max-content}.product-grid{grid-template-columns:1fr 1fr;gap:24px 15px}.product-card,.product-card:nth-child(-n+2){grid-column:span 1}.product-card:last-child{grid-column:span 2;max-width:100%}.product-meta h3{font-size:17px}.product-meta strong{font-size:15px}.product-meta p{font-size:9px}.product-image{aspect-ratio:1.1}.product-card:last-child .product-image{aspect-ratio:1.8}.product-tag{font-size:7px;padding:6px 8px;left:8px;top:8px}.product-image .plus{width:27px;height:27px;right:9px;bottom:9px}.studio{grid-template-columns:1fr}.studio-copy{padding:55px 6% 30px}.studio-copy h2{font-size:42px}.desk{min-height:510px}.monitor{top:40px;height:120px}#desk-mat{top:150px;height:300px}.keyboard{top:270px;height:80px}.mouse{top:285px;width:34px;height:55px}.measure-visual{padding:20px 10px;margin:25px 0}.height-rule{right:0}.use-cases{grid-template-columns:1fr;gap:24px}.use-cases div{display:grid;grid-template-columns:25px 1fr;column-gap:10px}.use-cases h3{margin:0}.use-cases p{grid-column:2;margin:8px 0 0}.closing{padding:60px 6%;min-height:390px}.faq{display:block}.faq>div+div{margin-top:30px}footer{flex-wrap:wrap}footer p{width:100%;order:3;margin:0}.modal-layout{display:block}.modal-image{min-height:0;height:250px}.modal-image img{max-height:250px;object-fit:contain}.modal-copy{padding:25px}.modal-copy h2{margin:10px 0;font-size:34px}.preview-note{font-size:7px;letter-spacing:.08em}.preview-note span{font-size:7px}.brand img{width:100px}.bag-button{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Product cutouts retain their own colour on every surface. */
.hero-product{min-height:0;display:block}.hero-product img{min-height:0;mix-blend-mode:normal}.product-image img{object-fit:contain;padding:12px;filter:drop-shadow(0 15px 12px #101a2920)}#desk-mat,.desk.light #desk-mat,.measure-visual img{mix-blend-mode:normal;filter:drop-shadow(0 12px 14px #0003)}#toast{visibility:hidden}#toast.show{visibility:visible}.hero-product{inset:-25px 10% 65px}@media(max-width:800px){.hero-product{inset:0 -4% 85px}.product-image{aspect-ratio:1.3}.product-tag{font-size:6px}.product-meta p{line-height:1.5}}

/* Split hero: editorial copy left, floating product right. */
@media(min-width:801px){
.hero{display:grid;grid-template-columns:43% 57%;column-gap:0}
.hero-top,.hero-bottom{grid-column:1/-1;width:100%}
.hero-title{grid-column:1;grid-row:2;display:block;align-self:center;padding:20px 0 100px;z-index:2}
.hero h1{font-size:clamp(52px,5.6vw,86px);line-height:1.04}
.hero-title p{margin-top:28px}
.hero-stage{grid-column:2;grid-row:2;width:100%;height:550px;margin:0;align-self:center}
.hero-product{inset:35px -3% 120px;transform:translate3d(var(--mx,0px),var(--my,0px),0) rotateX(13deg) rotateY(-13deg) rotateZ(-8deg);transform-style:preserve-3d}
.hero-product img{filter:drop-shadow(0 24px 3px #0007) drop-shadow(0 42px 32px #005cbe28)}
.hero-caption{bottom:30px;left:8%;gap:15px;flex-wrap:wrap}
.coordinate{top:12%;font-size:10px}.coordinate.left{left:8%}.coordinate.right{right:4%}
}
@media(min-width:1600px){.hero-title{margin-left:0;margin-right:0}}
/* Keep the mat planar and level; depth comes from a gentle backward tilt. */
@media(min-width:801px){.hero-product{transform:translate3d(var(--mx,0px),var(--my,0px),0) rotateX(12deg);transform-style:preserve-3d}}
@keyframes float{50%{transform:translateY(-8px)}}
/* Original signal-inspired type reveal; the semantic heading stays intact. */
.signal-word{display:inline-block;white-space:nowrap}
.signal-letter{display:inline-block;position:relative;transform-origin:50% 85%;will-change:transform,opacity,filter}
.signal-letter::after{content:attr(data-letter);position:absolute;inset:0;color:#48bfff;pointer-events:none;opacity:0;text-shadow:0 0 14px #149dff}
.signal-letter.is-resolving::after{animation:signal-trace 650ms ease-out both}
@keyframes signal-trace{0%{opacity:.7;clip-path:inset(90% 0 0);transform:translateY(3px)}45%{opacity:.8;clip-path:inset(0 0 55%)}100%{opacity:0;clip-path:inset(0 0 100%);transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.signal-letter{will-change:auto}}
/* A more compact, illuminated hero composition. */
.hero{position:relative;isolation:isolate}
.hero::before{content:'';position:absolute;z-index:-1;inset:-20%;pointer-events:none;background:radial-gradient(ellipse at 75% 45%,#075ab82a,transparent 37%),radial-gradient(ellipse at 15% 70%,#1647a719,transparent 40%);animation:hero-atmosphere 14s ease-in-out infinite alternate}
.stage-halo{background:radial-gradient(ellipse,#0778e650,transparent 65%);animation:breathe 7s ease-in-out infinite}
.stage-lines{animation:grid-drift 18s ease-in-out infinite alternate}
.hero h1 em{color:#7ccfff;text-shadow:0 0 25px #147ae52b}
.hero h1 em .signal-letter{animation:next-move-light 4.8s ease-in-out infinite;animation-delay:calc(1.7s + var(--letter-index,0)*85ms)}
@keyframes next-move-light{0%,65%,100%{color:#89bddd;text-shadow:0 0 0 transparent;translate:0 0}30%{color:#edfbff;text-shadow:0 0 18px #269fff90,0 0 40px #0566db50;translate:0 -2px}45%{color:#5cbfff;text-shadow:0 0 12px #169fff55;translate:0 0}}
@keyframes hero-atmosphere{from{transform:translate(-2%,-2%) scale(1)}to{transform:translate(4%,3%) scale(1.1)}}
@keyframes grid-drift{from{transform:rotateX(64deg) translateY(-12px)}to{transform:rotateX(64deg) translateY(18px)}}
@media(min-width:801px){.hero-stage{height:455px}.hero-title{padding:0 0 65px}.hero-product{inset:-30px -7% 95px}.hero-caption{bottom:20px}.coordinate{top:5%}.hero-top{margin-bottom:10px}.hero{padding-top:24px}}
@media(max-width:800px){.hero-stage{height:300px;margin-top:-15px}.hero-product{inset:-12px -7% 65px}.hero-caption{bottom:12px}.hero-title p{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.hero::before,.stage-lines,.stage-halo,.hero h1 em .signal-letter{animation:none!important}}
@media(min-width:801px){.hero-product{left:2%;right:-7%}}
/* Calm headline: a single reveal, no repeating letter pulses. */
.hero h1 em .signal-letter{animation:none!important;color:#89cfff;text-shadow:none;translate:none}
.signal-letter.is-resolving::after{animation:none;opacity:0}
/* Photographic studio plate with a compositor-only lighting pass. */
.hero{background-color:#080c11;background-image:linear-gradient(90deg,#080c11 0%,#080c11f5 25%,#080c1190 48%,#080c1120 100%),url('assets/hero-studio.png');background-size:cover;background-position:center}
.hero::before{inset:0;z-index:-1;background:radial-gradient(ellipse at 77% 48%,#027cff20,transparent 43%);animation:hero-atmosphere 16s ease-in-out infinite alternate}
.hero::after{content:'';position:absolute;right:-12%;top:0;width:57%;height:100%;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 38%,#58cfff00 44%,#58cfff16 50%,#58cfff00 56%,transparent 63%);transform:translate3d(-15%,0,0);animation:studio-light 12s ease-in-out infinite;will-change:transform,opacity}
.stage-lines{display:none}.stage-halo{opacity:.5;filter:blur(35px)}
@keyframes studio-light{0%,100%{transform:translate3d(-22%,0,0);opacity:.15}50%{transform:translate3d(18%,0,0);opacity:.8}}
@media(max-width:800px){.hero{background-position:65% center;background-image:linear-gradient(180deg,#080c11 0%,#080c11ef 30%,#080c1190 60%,#080c11c9 100%),url('assets/hero-studio.png')}.hero::after{width:100%;right:-25%}}
@media(prefers-reduced-motion:reduce){.hero::after{animation:none;opacity:.3;will-change:auto}}
/* Frame and mat occupy one plane, sharing all movement. */
.hero-product{display:flex;align-items:center;justify-content:center}
.mat-rig{position:relative;width:100%;flex-shrink:0;animation:float 8s ease-in-out infinite;transform-style:preserve-3d;--frame:7.3% 1.5% 10.3% 1.5%}
.hero-product .mat-rig img{width:100%;height:auto;max-height:none;display:block;animation:none;filter:drop-shadow(0 23px 16px #0008)}
.mat-rig::after{content:'';position:absolute;inset:var(--frame);border:2px solid #37caff;border-radius:18px;box-shadow:0 0 8px #23bcffb0,0 0 23px #006eff65,inset 0 0 8px #1d9dff35;pointer-events:none}
@media(min-width:801px){.hero-product{transform:translate3d(var(--mx,0px),var(--my,0px),0) rotateX(10deg) rotateY(-8deg) rotateZ(-4deg);left:5%;right:-4%}}
@media(max-width:800px){.hero-product{left:0;right:0}.mat-rig::after{border-width:1px;border-radius:9px}}
@media(prefers-reduced-motion:reduce){.mat-rig{animation:none}}
@media(min-width:801px){.coordinate{top:0}}
/* Studio light belongs behind the product, not to its physical edge. */
.mat-rig::after{border:0;box-shadow:none;inset:auto 9% -12%;height:20%;border-radius:50%;background:radial-gradient(ellipse,#1499ff55,transparent 68%);filter:blur(16px);transform:translateZ(-45px);opacity:.65}
.hero-product{transform:translate3d(var(--mx,0px),var(--my,0px),0) rotateX(37deg) rotateY(-13deg);transform-style:preserve-3d}
.mat-rig img{backface-visibility:hidden}
@media(min-width:801px){.hero-stage{perspective:1000px;perspective-origin:55% 35%}.hero-product{inset:-28px -3% 80px;left:4%}.hero-product .mat-rig img{filter:drop-shadow(0 6px 1px #010308) drop-shadow(0 35px 20px #0008)}}
@media(max-width:800px){.hero-stage{perspective:750px;perspective-origin:50% 30%}.hero-product{transform:translate3d(var(--mx,0px),var(--my,0px),0) rotateX(30deg) rotateY(-10deg);left:0;right:0}.mat-rig::after{filter:blur(10px)}}
/* Face-on product with a slight horizontal turn into the studio. */
.hero-product{transform:translate3d(var(--mx,0px),var(--my,0px),0) rotateY(-12deg)}
@media(max-width:800px){.hero-product{transform:translate3d(var(--mx,0px),var(--my,0px),0) rotateY(-9deg)}}
/* Normalize the actual product bounds, rather than the PNG canvas. */
.mat-window{display:block;position:relative;aspect-ratio:3/1;overflow:hidden;border-radius:12px;width:100%;--l:2.35;--t:8.15;--w:95.26;--h:80.66}
.mat-window:has(img[src*="obsidian"]){--l:4.95;--t:26.46;--w:90.1;--h:47.66}
.mat-window:has(img[src*="porcelain"]){--l:2.99;--t:26.17;--w:94.08;--h:47.66}
.mat-window:has(img[src*="orbit"]){--l:1.7;--t:6.91;--w:96.55;--h:85.63}
.mat-window:has(img[src*="drift"]){--l:1.89;--t:10.08;--w:96.27;--h:79.28}
.mat-window img,.hero-product .mat-window img{position:absolute;max-width:none;width:calc(10000% / var(--w));height:calc(10000% / var(--h));left:calc(-100% * var(--l) / var(--w));top:calc(-100% * var(--t) / var(--h));object-fit:fill;padding:0;filter:none}
.product-image{display:flex;align-items:center;justify-content:center;padding:24px}
.product-image .mat-window{box-shadow:0 16px 20px #14243625}
.product-image:hover img{transform:none}
.product-card:nth-child(-n+2){grid-column:span 2}
.hero-product .mat-rig{overflow:visible;aspect-ratio:3/1;width:94%;filter:drop-shadow(0 20px 18px #0008)}
.hero-product .mat-rig img{clip-path:inset(calc(var(--t)*1%) calc((100 - var(--l) - var(--w))*1%) calc((100 - var(--t) - var(--h))*1%) calc(var(--l)*1%) round 12px)}
.modal-image .mat-window{width:90%}.bag-item .mat-window{width:90px}.measure-visual .mat-window{width:90%;margin:50px auto}
@media(max-width:800px){.product-card:nth-child(-n+2){grid-column:span 1}.product-image{padding:14px}.mat-window{border-radius:7px}.hero-product .mat-rig{width:94%}}
@media(max-width:800px){.product-card:last-child{grid-column:span 1}.product-card:last-child .product-image{aspect-ratio:1.3}}
.checkout{max-width:1300px;margin:auto;padding:70px 6% 90px;display:grid;grid-template-columns:1fr 380px;gap:8%}.checkout h1{font:500 clamp(48px,6vw,78px)/1 Manrope;letter-spacing:-.06em}.checkout-intro,.checkout aside p{color:#697584;line-height:1.7}.checkout aside{background:#e9edf2;border-radius:14px;padding:30px;height:max-content}.checkout aside h2{font-size:30px}.checkout-total{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid #cdd4df}.checkout button:disabled{opacity:.55;cursor:not-allowed}.checkout-back{display:block;margin-top:22px}.checkout-item{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid #d9dfe6}.checkout-item img{width:180px;background:#e7ebf0;border-radius:8px}.checkout-item p{color:#697584}.checkout-item button{background:none;padding:0;text-decoration:underline;color:#536279}@media(max-width:800px){.checkout{grid-template-columns:1fr;padding-top:40px;gap:35px}.checkout-item{grid-template-columns:110px 1fr auto}.checkout-item img{width:110px}}
.section{padding-top:72px;padding-bottom:72px}.measure-visual{margin:10px auto}.measure-visual .mat-window{margin:20px auto}@media(max-width:800px){.section{padding-top:50px;padding-bottom:50px}}