/* Source: site.css — unchanged rules */

@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/plex-mono.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--paper:#F5F2EC;--ink:#141414;--stone:#D9D4CB;--mid:#6E6A64;--copper:#B4532A;--white:#fff;
 --serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
 --pad:clamp(1.25rem,4vw,3.5rem);--hh:4rem}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--sans);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.005em}
h2{font-size:clamp(2.125rem,4.4vw,3.75rem);line-height:1.04}
p{margin:0}
.mono{font-family:var(--mono);font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{font-family:var(--mono);font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-bottom:1.125rem;display:flex;align-items:center;gap:0.625rem}
.eyebrow::before{content:"";width:1.375rem;height:0.0625rem;background:currentColor}
.lead{color:var(--mid);font-size:clamp(1.0625rem,1.4vw,1.1875rem);max-width:38.75rem;margin-top:1.125rem}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
section{position:relative}
.sec{padding-top:clamp(5rem,10vw,8.75rem);padding-bottom:clamp(5rem,10vw,8.75rem);border-top:0.0625rem solid var(--stone)}
:focus-visible{outline:0.125rem solid var(--copper);outline-offset:0.1875rem}
.sr{position:absolute;width:0.0625rem;height:0.0625rem;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


.btn{display:inline-flex;align-items:center;gap:0.625rem;background:var(--copper);color:var(--white);border:0.0625rem solid var(--copper);padding:0.8125rem 1.375rem;border-radius:0.125rem;text-decoration:none;font:500 0.9375rem/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.link{font:500 0.9375rem/1 var(--sans);text-decoration:none;border-bottom:0.0625rem solid currentColor;padding-bottom:0.1875rem}
.link:hover{color:var(--copper)}


.hdr{position:fixed;inset:0 0 auto 0;height:var(--hh);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);color:var(--paper);transition:background .3s,color .3s,border-color .3s;border-bottom:0.0625rem solid transparent}
.hdr.solid{background:rgba(245,242,236,.97);color:var(--ink);border-bottom-color:var(--stone)}
.logo{font:400 1.5rem/1 var(--serif);text-decoration:none;display:flex;align-items:baseline;gap:0.5rem}
.logo small{font:400 0.625rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.nav{display:flex;gap:1.75rem;font-size:0.875rem}
.nav a{text-decoration:none;opacity:.85}.nav a:hover{opacity:1;color:var(--copper)}
.hdr-r{display:flex;align-items:center;gap:0.875rem}
.qbtn{position:relative;background:none;border:0.0625rem solid currentColor;color:inherit;border-radius:0.125rem;height:2.5rem;padding:0 0.875rem;font:400 0.75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:0.5rem}
.badge{min-width:1.25rem;height:1.25rem;padding:0 0.375rem;border-radius:0.625rem;background:var(--copper);color:#fff;display:inline-grid;place-items:center;font:500 0.6875rem/1 var(--mono);letter-spacing:0}
.badge.bump{animation:bump .45s ease}
@keyframes bump{30%{transform:scale(1.45)}}
.hdr .btn{padding:0.6875rem 1.125rem;font-size:0.875rem}





.hero{height:100vh;min-height:38.75rem;max-height:68.75rem;overflow:hidden;color:var(--paper);background:var(--ink);--mx:62%;--my:42%}
.hero picture,.hero .hero-img{position:absolute;inset:0;width:100%;height:100%}
.hero .hero-img{object-fit:cover;object-position:60% 50%}
.hero .dim{position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(0,0,0,0) 0,rgba(0,0,0,0) 9%,rgba(10,8,6,.5) 34%,rgba(10,8,6,.66) 100%);pointer-events:none}
.hero .spec{position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,248,232,1) 0,rgba(255,226,176,.8) 4%,rgba(255,206,140,.35) 11%,rgba(255,206,140,0) 20%);mix-blend-mode:overlay;pointer-events:none}
.hero .spec2{position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,236,200,.42) 0,rgba(255,220,170,.12) 4%,rgba(255,220,170,0) 9%);mix-blend-mode:screen;pointer-events:none}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,11,8,.78) 0,rgba(14,11,8,.45) 38%,rgba(14,11,8,0) 64%),linear-gradient(0deg,rgba(14,11,8,.5) 0,rgba(14,11,8,0) 30%);pointer-events:none}
.hero-txt{position:absolute;left:var(--pad);bottom:clamp(3rem,9vh,6.875rem);max-width:40rem}
.hero .eyebrow{color:#E7B79C}
.hero h1{font-size:clamp(2.875rem,6.4vw,6rem);line-height:.98}
.hero h1 em{font-style:italic;color:#F0C9A8}
.hero .lead{color:rgba(245,242,236,.82)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.375rem;margin-top:2rem}
.hero .btn.ghost{color:var(--paper)}
.hero .btn.ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.facts{margin-top:1.625rem;font:400 0.75rem/1.6 var(--mono);letter-spacing:.06em;color:rgba(245,242,236,.75)}
.hint{position:absolute;right:var(--pad);bottom:1.75rem;font:400 0.6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,236,.7)}


.nums{padding-top:0;padding-bottom:0}
.ngrid{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:0.0625rem solid var(--stone)}
.ngrid>div{padding:clamp(1.75rem,3.6vw,3.25rem) 1.125rem clamp(1.75rem,3.6vw,3rem) 0;border-right:0.0625rem solid var(--stone);padding-left:1.125rem}
.ngrid>div:first-child{padding-left:0}.ngrid>div:last-child{border-right:0}
.nv{font:400 clamp(2.5rem,4.6vw,4rem)/1 var(--serif);white-space:nowrap}
.nv small{font-size:.5em;margin-left:0.25rem}
.nl{margin-top:0.75rem;color:var(--mid)}
.nnote{margin-top:0.625rem;font:400 0.6875rem/1.5 var(--mono);color:var(--copper);letter-spacing:.02em}


.proc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;flex-wrap:wrap}
.story{position:relative;height:1000vh;margin-top:2.5rem}
.stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(12.5rem,3fr) 4fr 5fr;gap:clamp(1.25rem,3vw,3rem);padding:calc(var(--hh) + 1.75rem) var(--pad) 2rem;align-items:center}
.steps{list-style:none;margin:0;padding:0;border-left:0.0625rem solid var(--stone)}
.steps li{position:relative;padding:0.5rem 0 0.5rem 1.125rem;color:var(--mid);font-size:0.9375rem;transition:color .25s,transform .25s;cursor:pointer}
.steps li .n{font:400 0.6875rem/1 var(--mono);display:inline-block;width:1.875rem;letter-spacing:.06em}
.steps li.done{color:var(--mid)}
.steps li.on{color:var(--ink);transform:translateX(0.25rem)}
.steps li.on::before{content:"";position:absolute;left:-0.125rem;top:0.4375rem;bottom:0.4375rem;width:0.1875rem;background:var(--copper)}
.canvas{position:relative;height:min(70vh,40rem);display:grid;place-items:center}
.canvas svg{width:min(56vh,27.5rem,100%);height:auto;overflow:visible}
.pbar{position:absolute;top:0;left:0;right:0;height:0.125rem;background:var(--stone)}
.pbar i{display:block;height:100%;width:0;background:var(--copper)}
.pcount{position:absolute;bottom:0;left:0;font:400 0.75rem/1 var(--mono);color:var(--mid);letter-spacing:.1em}
.photo{display:flex;flex-direction:column;gap:0.875rem;max-width:calc(44vh * 4 / 3 + 2.5rem)}
.frame{position:relative;aspect-ratio:4/3;background:var(--paper);overflow:hidden}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease,transform 1.2s ease;transform:scale(1.03)}
.frame img.on{opacity:1;transform:scale(1)}
.cap .num{font:400 0.75rem/1 var(--mono);color:var(--copper);letter-spacing:.1em}
.cap h3{font-size:clamp(1.625rem,2.4vw,2.125rem);margin-top:0.5rem}
.cap p{color:var(--mid);margin-top:0.375rem;max-width:28.75rem}
.cap .hard{margin-top:0.75rem;font:400 0.75rem/1.4 var(--mono);color:var(--copper);letter-spacing:.06em;text-transform:uppercase}
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.625rem;opacity:0;transform:translateY(0.5rem);transition:opacity .35s,transform .35s;pointer-events:none}
.wall.on{opacity:1;transform:none;pointer-events:auto}
.wall figure{margin:0;background:#fff;border:0.0625rem solid var(--stone);transition:border-color .25s}
.wall figure.on{border-color:var(--copper)}
.wall img{aspect-ratio:1;object-fit:cover;width:100%}
.wall figcaption{font:400 max(.875rem,14px)/1.4 var(--mono);letter-spacing:.035em;text-transform:uppercase;padding:0.5rem}
.wallnote{font:400 0.6875rem/1.5 var(--mono);color:var(--mid);margin-top:0.375rem}
.photo .wallbox{max-width:min(100%,46vh)}
.stage .wallnote{opacity:0;transition:opacity .35s}.stage .wall.on+.wallnote{opacity:1}
.stage .cap p{min-height:3.1em}

.cards{display:none;list-style:none;margin:2.5rem 0 0;padding:0 var(--pad)}
.cards li{display:grid;grid-template-columns:1fr;gap:0.875rem;padding:1.75rem 0;border-top:0.0625rem solid var(--stone)}
.cards img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cards .wall{opacity:1;transform:none;pointer-events:auto}


.cym{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.chips{display:flex;flex-direction:column;gap:0.625rem;margin-top:2.125rem}
.chip{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;width:100%;background:transparent;border:0.0625rem solid var(--stone);border-radius:0.125rem;padding:1rem 1.125rem;font:400 1rem/1.35 var(--sans);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.chip::after{content:"→";font-family:var(--mono);transition:transform .2s}
.chip:hover{border-color:var(--ink)}
.chip:hover::after{transform:translateX(0.25rem)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.answer{border:0.0625rem solid var(--stone);background:var(--white);padding:clamp(1.5rem,3vw,2.75rem);min-height:22.5rem;position:relative}
.answer .ph{color:var(--mid);display:grid;place-items:center;height:100%;min-height:17.5rem;text-align:center;font:400 0.8125rem/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ans{animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(0.625rem)}}
.ans .q{font:400 0.75rem/1.4 var(--mono);color:var(--copper);letter-spacing:.08em;text-transform:uppercase}
.ans h3{font-size:clamp(1.875rem,3vw,2.625rem);margin-top:0.75rem;line-height:1.05}
.ans dl{display:grid;grid-template-columns:7.5rem 1fr;gap:0;margin:1.75rem 0 0;border-top:0.0625rem solid var(--stone)}
.ans dt,.ans dd{padding:0.875rem 0;border-bottom:0.0625rem solid var(--stone);margin:0}
.ans dt{font:400 0.6875rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.ans .act{margin-top:1.625rem;display:flex;gap:1.125rem;align-items:center;flex-wrap:wrap}


.dev{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:3rem}
.devframe{position:relative;height:min(70vh,38.75rem);background:var(--white);border:0.0625rem solid var(--stone);overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none}
.devframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3%;background:var(--white);visibility:hidden;pointer-events:none}
.devframe img:first-child{visibility:visible}
.handle{position:absolute;z-index:3;top:0;bottom:0;left:0;width:0.125rem;background:var(--copper);opacity:0;pointer-events:none;transform:translateX(-0.0625rem)}
.handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2.375rem;height:2.375rem;border-radius:50%;background:var(--paper);border:0.125rem solid var(--copper);display:grid;place-items:center;font:400 1rem/1 var(--sans);color:var(--copper)}
.devtag{position:absolute;z-index:4;left:0.875rem;top:0.875rem;font:400 0.6875rem/1 var(--mono);letter-spacing:.1em;background:var(--paper);padding:0.4375rem 0.5625rem;border:0.0625rem solid var(--stone)}
.scrub{margin-top:1.375rem}
.ticks{display:grid;grid-template-columns:repeat(4,1fr);margin-top:0.625rem}
.ticks button{background:none;border:0;padding:0.375rem 0;text-align:left;font:400 0.6875rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mid);cursor:pointer}
.ticks button:nth-child(2),.ticks button:nth-child(3){text-align:center}.ticks button:last-child{text-align:right}
.ticks button.on{color:var(--copper)}
input[type=range].rng{-webkit-appearance:none;appearance:none;width:100%;height:1.75rem;background:transparent;cursor:pointer;margin:0}
.rng::-webkit-slider-runnable-track{height:0.125rem;background:linear-gradient(90deg,var(--copper) var(--fill,0%),var(--stone) var(--fill,0%))}
.rng::-moz-range-track{height:0.125rem;background:var(--stone)}
.rng::-moz-range-progress{height:0.125rem;background:var(--copper)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--paper);border:0.125rem solid var(--copper);margin-top:-0.625rem;box-shadow:none}
.rng::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:50%;background:var(--paper);border:0.125rem solid var(--copper)}
.devcap .st{font:400 0.75rem/1 var(--mono);color:var(--copper);letter-spacing:.1em}
.devcap h3{font-size:clamp(1.75rem,2.8vw,2.5rem);margin-top:0.625rem}
.devcap p{color:var(--mid);margin-top:0.5rem;min-height:3.2em}
.devhint{margin-top:1.625rem;font:400 0.6875rem/1.5 var(--mono);color:var(--mid);letter-spacing:.06em;text-transform:uppercase}


.gal{border-top:0.0625rem solid var(--stone)}
.galpin{position:relative}
.galstage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:var(--hh)}
.galhead{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,4vh,2.75rem)}
.track{display:flex;gap:1.25rem;padding:0 var(--pad);will-change:transform}
.card{flex:0 0 clamp(15rem,22vw,20rem);background:var(--white);border:0.0625rem solid var(--stone);position:relative}
.card .im{overflow:hidden;aspect-ratio:1;background:#fff}
.card .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .im img{transform:scale(1.55)}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;padding:0.875rem 1rem;border-top:0.0625rem solid var(--stone)}
.card .sku{font:400 0.75rem/1 var(--mono);letter-spacing:.08em;color:var(--copper)}
.card .nm{font:500 0.875rem/1.35 var(--sans);margin-top:0.375rem}
.add{flex:0 0 2.5rem;width:2.5rem;height:2.5rem;border-radius:50%;border:0.0625rem solid var(--ink);background:transparent;font:300 1.375rem/1 var(--sans);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.add:hover{background:var(--ink);color:var(--paper)}
.add[aria-pressed="true"]{background:var(--copper);border-color:var(--copper);color:#fff;font-size:1rem}
.galprog{margin:clamp(1.25rem,4vh,2.25rem) var(--pad) 0;height:0.125rem;background:var(--stone)}
.galprog i{display:block;height:100%;width:0;background:var(--copper)}
.galnote{padding:0 var(--pad);margin-top:0.75rem;font:400 0.6875rem/1.5 var(--mono);color:var(--mid);letter-spacing:.06em;text-transform:uppercase}


.qwrap{display:grid;grid-template-columns:8fr 4fr;gap:clamp(2rem,5vw,4.5rem);margin-top:3rem;align-items:start}
.wiz{background:var(--white);border:0.0625rem solid var(--stone);padding:clamp(1.375rem,3vw,2.75rem)}
.wsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;margin-bottom:1.875rem}
.wsteps span{font:400 0.6875rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mid);padding-top:0.75rem;border-top:0.125rem solid var(--stone)}
.wsteps span.on{color:var(--ink);border-top-color:var(--copper)}
.wsteps span.done{color:var(--mid);border-top-color:var(--ink)}
fieldset{border:0;padding:0;margin:0 0 1.625rem}
legend{font:400 1.625rem/1.15 var(--serif);margin-bottom:0.875rem;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:0.5rem}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{display:inline-block;border:0.0625rem solid var(--stone);padding:0.625rem 0.875rem;border-radius:0.125rem;font-size:0.9375rem;transition:border-color .2s,background .2s,color .2s}
.opt input:hover+span{border-color:var(--ink)}
.opt input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt input:focus-visible+span{outline:0.125rem solid var(--copper);outline-offset:0.125rem}
.fld{display:grid;gap:0.375rem;margin-bottom:0.875rem}
.fld label{font:400 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.fld input,.fld textarea{font:400 1rem/1.4 var(--sans);border:0.0625rem solid var(--stone);border-radius:0.125rem;padding:0.75rem;background:var(--paper);color:var(--ink);width:100%}
.fld textarea{min-height:6rem;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem}
.hintline{font:400 0.75rem/1.5 var(--mono);color:var(--mid);margin-top:0.5rem}
.err{color:var(--copper);font:400 0.8125rem/1.4 var(--sans);min-height:1.4em;margin-top:0.375rem}
.wnav{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;margin-top:0.625rem;padding-top:1.375rem;border-top:0.0625rem solid var(--stone)}
.wnav .back{background:none;border:0;font:500 0.9375rem/1 var(--sans);cursor:pointer;color:var(--mid);padding:0.625rem 0}
.wnav .back:hover{color:var(--ink)}
.skus{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.375rem}
.skus .tag{display:inline-flex;align-items:center;gap:0.5rem;font:400 0.75rem/1 var(--mono);border:0.0625rem solid var(--copper);color:var(--copper);padding:0.5rem 0.625rem;border-radius:0.125rem}
.skus .tag button{background:none;border:0;color:inherit;cursor:pointer;font-size:0.875rem;padding:0;line-height:1}
.skus .none{font-size:0.875rem;color:var(--mid)}
.wpane[hidden]{display:none}
.sum{animation:rise .4s ease both}
.sum h3{font-size:clamp(1.875rem,3vw,2.5rem)}
.sum dl{display:grid;grid-template-columns:9.375rem 1fr;margin:1.375rem 0 0;border-top:0.0625rem solid var(--stone)}
.sum dt,.sum dd{margin:0;padding:0.75rem 0;border-bottom:0.0625rem solid var(--stone)}
.sum dt{font:400 0.6875rem/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.sum pre{white-space:pre-wrap;font:400 0.8125rem/1.55 var(--mono);background:var(--paper);border:0.0625rem solid var(--stone);padding:0.875rem;margin:1.25rem 0 0;max-height:13.75rem;overflow:auto}
.sum .act{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.375rem;align-items:center}
.toast{font:400 0.75rem/1.5 var(--mono);color:var(--copper);margin-top:0.75rem;min-height:1.5em}
.side img{width:100%;aspect-ratio:4/3;object-fit:cover}
.contact{margin-top:1.375rem;border-top:0.0625rem solid var(--stone);padding-top:1.125rem;font-size:0.9375rem;line-height:1.7}
.contact b{font-weight:500}
.contact .mono{color:var(--mid);display:block;margin-bottom:0.375rem}


.drawer{position:fixed;top:0;right:0;bottom:0;width:min(26.25rem,100%);background:var(--paper);border-left:0.0625rem solid var(--stone);z-index:70;transform:translateX(100%);transition:transform .35s ease;display:flex;flex-direction:column;padding:1.5rem}
.drawer.open{transform:none}
.drawer h3{font-size:1.875rem}
.drawer ul{list-style:none;margin:1.25rem 0;padding:0;overflow:auto;flex:1}
.drawer li{display:grid;grid-template-columns:4rem 1fr auto;gap:0.75rem;align-items:center;padding:0.625rem 0;border-bottom:0.0625rem solid var(--stone)}
.drawer li img{width:4rem;height:4rem;object-fit:cover;background:#fff}
.drawer .x{background:none;border:0;font-size:1.125rem;cursor:pointer;color:var(--mid)}
.drawer .close{position:absolute;right:1.125rem;top:1.125rem;background:none;border:0;font-size:1.375rem;cursor:pointer}
.veil{position:fixed;inset:0;background:rgba(20,20,20,.35);z-index:65;opacity:0;pointer-events:none;transition:opacity .3s}
.veil.on{opacity:1;pointer-events:auto}


.ftr{background:var(--ink);color:var(--paper);padding:4rem var(--pad) 3rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;font-size:0.875rem;line-height:1.7}
.ftr .logo{font-size:1.875rem}
.ftr .mono{color:var(--mid);display:block;margin-bottom:0.625rem}
.ftr a{text-decoration:none}.ftr a:hover{color:#E7B79C}
.ftr .fine{grid-column:1/-1;border-top:0.0625rem solid var(--stone);padding-top:1.125rem;color:var(--mid);font:400 0.6875rem/1.6 var(--mono);letter-spacing:.04em}


.rv{opacity:0;transform:translateY(1rem);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}


@media (max-width:1100px){.ngrid{grid-template-columns:repeat(3,1fr)}.ngrid>div:nth-child(3n){border-right:0}.ngrid>div:nth-child(3n+1){padding-left:0}.ngrid>div:nth-child(-n+3){border-bottom:0.0625rem solid var(--stone)}.nav{display:none}}
@media (max-width:900px){
 :root{--hh:3.625rem}
 .hdr .btn{display:none}
 .story{height:auto;margin-top:0}.stage{display:none}.cards{display:block}
 .cym,.dev,.qwrap{grid-template-columns:1fr}
 .answer{min-height:0}.answer .ph{min-height:7.5rem}
 .galpin{height:auto!important}.galstage{position:relative;height:auto;padding:clamp(4.375rem,12vw,7.5rem) 0}
 .track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding-bottom:0.75rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .track::-webkit-scrollbar{display:none}
 .card{scroll-snap-align:start;flex-basis:72vw}
 .ftr{grid-template-columns:1fr}
 .hero-txt{right:var(--pad)}
 .hero .scrim{background:linear-gradient(0deg,rgba(14,11,8,.85) 0,rgba(14,11,8,.55) 45%,rgba(14,11,8,.1) 75%)}
 .hint{display:none}
}
@media (max-width:560px){
 .ngrid{grid-template-columns:1fr 1fr}.ngrid>div{padding-left:0.875rem!important;border-right:0.0625rem solid var(--stone)!important;border-bottom:0.0625rem solid var(--stone)}.ngrid>div:nth-child(2n){border-right:0!important}.ngrid>div:nth-child(2n+1){padding-left:0!important}.ngrid>div:nth-last-child(-n+2){border-bottom:0}
 .two{grid-template-columns:1fr}
 .sum dl,.ans dl{grid-template-columns:1fr}.sum dt,.ans dt{border-bottom:0;padding-bottom:0}
 .qbtn .lbl{display:none}
 .hero h1{font-size:2.75rem}
}

.rm .story{height:auto;margin-top:0}.rm .stage{display:none}.rm .cards{display:block}
.rm .galpin{height:auto!important}.rm .galstage{position:relative;height:auto;padding:clamp(4.375rem,12vw,7.5rem) 0}
.rm .track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding-bottom:0.75rem}
.rm .card{scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .rv{opacity:1;transform:none}
 .card:hover .im img{transform:none}
}
.mob{display:none}
@media (max-width:900px){.dsk{display:none}.mob{display:inline}}


:root{--mat:var(--tile);--tile:#F0EBE3}


.ed{margin:0;padding:0;background:none;border:0}
.ed-in{position:relative;overflow:hidden;background:var(--paper);
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%);
 -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%);mask-composite:intersect}

.ed-in::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,0) 70%,rgba(20,20,20,.06) 100%)}
.ed figcaption{font:400 0.65625rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);padding:0.5rem 0.125rem 0;display:flex;justify-content:space-between;gap:0.75rem;border-top:0.0625rem solid var(--stone);margin-top:0.375rem}
.ed figcaption::after{content:"Northmelon";color:var(--mid)}


.photo{max-width:calc(44vh * 4 / 3 + 2.5rem)}
.frame{aspect-ratio:4/3}
.frame img{opacity:1;clip-path:inset(0 0 0 100%);transform:scale(1.06);transition:clip-path .85s cubic-bezier(.77,0,.18,1),transform 9s cubic-bezier(.2,.6,.2,1)}
.frame img.on{clip-path:inset(0 0 0 0);transform:scale(1);z-index:1}
.frame img.prev{clip-path:inset(0 0 0 0);z-index:0;transition:none}
.cap .hard::before{content:"";display:inline-block;width:0.875rem;height:0.0625rem;background:currentColor;vertical-align:middle;margin-right:0.5rem}
.cards .ed img,.side .ed img{width:100%;aspect-ratio:4/3;object-fit:cover}
.plx img{transform:translate3d(0,var(--py,0rem),0) scale(1.1);will-change:transform}
.rv-clip .ed-in{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.rv-clip.in .ed-in{clip-path:inset(0 0 0 0)}


.card{background:var(--tile);border-color:var(--stone);box-shadow:0 1.125rem 2.125rem -1.75rem rgba(20,20,20,.35);transition:box-shadow .4s,transform .4s}
.card:hover{box-shadow:0 1.625rem 2.75rem -1.75rem rgba(20,20,20,.4);transform:translateY(-0.1875rem)}
.card .im{background:var(--tile);padding:6%}
.card .meta{background:var(--paper);border-top-color:var(--stone)}
.wall figure{background:var(--tile);border-color:var(--stone);padding:0.375rem}
.wall figure.on{border-color:var(--copper);box-shadow:0 0.75rem 1.375rem -1.125rem rgba(20,20,20,.45)}
.truecol{font:400 0.65625rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-top:0.5rem;display:flex;align-items:center;gap:0.5rem}
.truecol::before{content:"";width:0.5rem;height:0.5rem;border:0.0625rem solid var(--mid);border-radius:50%}
.galhead .truecol{margin-top:0.875rem}


.devframe{background:var(--tile);border-color:var(--stone)}
.devframe img{background:var(--tile);padding:3%}


.hero{background:var(--paper)}
.hero picture{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%)}
.hero .scrim{background:linear-gradient(180deg,rgba(14,12,10,.5) 0,rgba(14,12,10,0) 12%),linear-gradient(90deg,rgba(14,12,10,.84) 0,rgba(14,12,10,.74) 30%,rgba(14,12,10,.4) 47%,rgba(14,12,10,0) 62%);
 -webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%)}
.hero-txt{bottom:clamp(5.625rem,17vh,10.625rem);z-index:5}
.hero .scrollcue,.hero .cursor-hint{z-index:5}
.hero .scrollcue{bottom:clamp(5.625rem,15vh,9.375rem)}
.hero-img{animation:heroKB 18s cubic-bezier(.2,.6,.2,1) both}
@keyframes heroKB{from{transform:scale(1.05)}to{transform:scale(1)}}
@media (max-width:900px){
 .hero .scrim{background:linear-gradient(180deg,rgba(14,12,10,.5) 0,rgba(14,12,10,0) 10%),linear-gradient(0deg,rgba(14,12,10,0) 0,rgba(14,12,10,.8) 14%,rgba(14,12,10,.72) 62%,rgba(14,12,10,.35) 76%,rgba(14,12,10,0) 86%);-webkit-mask-image:none;mask-image:none}
 .hero-txt{bottom:clamp(4.375rem,12vh,7.5rem)}
 .hero .scrollcue{bottom:1.75rem}
}


.hintx{font:400 0.6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper);transition:opacity .6s ease,transform .6s ease}
.hintx.gone{opacity:0!important;transform:translateY(-0.25rem);pointer-events:none}
.dot{display:inline-block;width:0.375rem;height:0.375rem;border-radius:50%;background:var(--copper);margin-right:0.5625rem;vertical-align:0.0625rem;animation:dotp 1.8s ease-in-out infinite}
@keyframes dotp{0%,100%{box-shadow:0 0 0 0 rgba(180,83,42,.5)}60%{box-shadow:0 0 0 0.4375rem rgba(180,83,42,0)}}


.cursor-hint{position:absolute;left:calc(var(--hx,64%) + 1.125rem);top:calc(var(--hy,44%) + 1.125rem);display:flex;align-items:center;gap:0.625rem;color:#F0C9A8;background:rgba(20,14,10,.55);padding:0.5rem 0.75rem 0.5rem 0.625rem;border:0.0625rem solid rgba(240,201,168,.35)}
.cursor-hint svg{animation:cur 2.4s ease-in-out infinite}
@keyframes cur{0%,100%{transform:translate(0,0)}35%{transform:translate(-0.375rem,-0.3125rem)}70%{transform:translate(0.3125rem,-0.125rem)}}
@media (pointer:coarse){.cursor-hint{display:none}}
.scrollcue{position:absolute;right:var(--pad);bottom:2.75rem;display:flex;flex-direction:column;align-items:center;gap:0.625rem;color:rgba(245,242,236,.85)}
.scrollcue i{position:relative;display:block;width:0.0625rem;height:2.875rem;background:rgba(245,242,236,.3);overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:0;top:-40%;width:0.0625rem;height:40%;background:#F0C9A8;animation:cue 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{to{top:100%}}
@media (max-width:900px){.scrollcue{display:flex;right:auto;left:50%;transform:translateX(-50%);bottom:0.875rem}.scrollcue span{display:none}.scrollcue i{height:1.875rem}}


.stagehint{position:absolute;top:0.875rem;left:0;color:var(--copper)}
.stagehint b{display:inline-block;font-weight:400;margin-left:0.375rem;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(0.25rem)}}
.pcount::before{content:"Step ";}


.hintline2{margin-top:1.875rem;margin-bottom:-1.125rem}


.dragpill{position:absolute;z-index:5;left:50%;bottom:1.125rem;transform:translateX(-50%);background:var(--paper);border:0.0625rem solid var(--copper);padding:0.625rem 1rem;display:flex;gap:0.625rem;align-items:center;pointer-events:none}
.dragpill.gone{transform:translateX(-50%) translateY(0.375rem)}
.dragpill b{font-weight:400}
.dragpill .la{animation:la 1.4s ease-in-out infinite}.dragpill .ra{animation:ra 1.4s ease-in-out infinite}
@keyframes la{50%{transform:translateX(-0.25rem)}}@keyframes ra{50%{transform:translateX(0.25rem)}}
.handle{opacity:0;transition:opacity .2s}


.galhint{margin:0 0 0.875rem}
.add.pulse{animation:addp 1.6s ease-out infinite}
@keyframes addp{0%{box-shadow:0 0 0 0 rgba(180,83,42,.55)}70%,100%{box-shadow:0 0 0 0.75rem rgba(180,83,42,0)}}


.qwrapb{position:relative}
.qtoast{position:absolute;right:0;top:calc(100% + 0.625rem);white-space:nowrap;font:400 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:0.5625rem 0.6875rem;opacity:0;transform:translateY(-0.25rem);transition:opacity .3s,transform .3s;pointer-events:none}
.qtoast.on{opacity:1;transform:none}
.qbtn.flash{border-color:var(--copper);color:var(--copper)}


.wtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.875rem}
.wtop .mono{color:var(--mid)}.wtop .wtip{color:var(--copper)}
.wsteps span{display:flex;align-items:center;gap:0.625rem}
.wsteps em{font-style:normal;display:inline-grid;place-items:center;width:1.375rem;height:1.375rem;border-radius:50%;border:0.0625rem solid currentColor;font-size:0.6875rem;letter-spacing:0;flex:0 0 1.375rem}
.wsteps span.on em{background:var(--copper);border-color:var(--copper);color:#fff}
.wsteps span.done em{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.wsteps span.done em::before{content:"\2713"}.wsteps span.done em{font-size:0}.wsteps span.done em::before{font-size:0.6875rem}


@media (prefers-reduced-motion:reduce){
 .frame img{transition:none;transform:none}
 .hero-img{animation:none}
 .plx img{transform:none!important}
 .rv-clip .ed-in{clip-path:none}
 .card:hover{transform:none}
}

.hero-txt h1,.hero-txt .lead,.hero-txt .eyebrow,.hero-txt .facts{text-shadow:0 0.0625rem 0.875rem rgba(0,0,0,.35)}

/* Shared production shell and page layouts. The supplied reference owns the home composition. */
:root{--hh:5.125rem;--pad:max(1.75rem,calc((100vw - 80rem)/2));--tile:#F0EBE3}
::selection{background:var(--copper);color:var(--paper)}
body{caret-color:var(--copper);scrollbar-color:var(--stone) var(--paper)}
[hidden]{display:none!important}
button,input,textarea{font:inherit}
button,a,input,textarea{touch-action:manipulation}
button{color:inherit}
h2{font-size:clamp(1.875rem,3.4vw,3rem)}
.sec{padding-top:7.5rem;padding-bottom:7.5rem}
.wrap{max-width:100%}
.btn{min-height:3rem;justify-content:center;color:var(--paper)}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.skip{position:fixed;top:0.5rem;left:0.5rem;z-index:100;background:var(--paper);padding:0.75rem;transform:translateY(-180%)}
.skip:focus{transform:none}
.hdr .logo,.ftr .logo{display:flex;flex-direction:column;align-items:flex-start;gap:0.4375rem;flex-shrink:0}
.logo small{opacity:1;font-size:0.5625rem}
.hdr .nav{gap:1.25rem;font-size:0.8125rem}
.hdr-r{gap:0.75rem}.hdr .btn{padding:0.75rem 1rem}
.header-catalog{font-size:0.8125rem;white-space:nowrap}
.menu-toggle{display:none;width:2.75rem;height:2.75rem;border:0.0625rem solid currentColor;background:none;padding:0.75rem}
.menu-toggle span{display:block;width:1.125rem;height:0.0625rem;background:currentColor;margin:0.3125rem 0}
.mobile-nav{position:fixed;inset:var(--hh) 0 0;background:var(--paper);z-index:49;display:flex;flex-direction:column;padding:2.25rem var(--pad);gap:1.5rem;overflow:auto}
.mobile-nav>a:not(.btn){font-size:1.5rem;text-decoration:none}
.mobile-nav .btn{align-self:flex-start}
.ftr{background:var(--paper);color:var(--ink);border-top:0.0625rem solid var(--stone);grid-template-columns:1.2fr .8fr 1.4fr .7fr;padding-top:4.5rem;padding-bottom:1.875rem;gap:2rem}
.ftr p{margin-top:1.25rem;max-width:32ch;color:var(--mid)}
.ftr .mono,.ftr .fine{color:var(--mid)}
.ftr>div:nth-child(2)>a{display:block;margin:0.4375rem 0}
.ftr .contact{margin:0;padding:0;border:0;overflow-wrap:anywhere}
.ftr .fine{display:flex;justify-content:space-between;border-color:var(--stone);margin-top:1.25rem}
.ftr a:hover{color:var(--copper)}
.whatsapp{position:fixed;right:1.375rem;bottom:1.375rem;width:2.75rem;height:2.75rem;display:grid;place-items:center;background:var(--ink);color:var(--paper);z-index:45}
.whatsapp:hover{color:var(--copper)}
.steps li{padding:0;cursor:default}
.steps button{position:relative;width:100%;text-align:left;background:none;border:0;padding:0.5rem 0 0.5rem 1.125rem;min-height:2.5rem;color:inherit;font-size:0.9375rem;cursor:pointer}
.steps li:has(button.on){transform:translateX(0.25rem);color:var(--ink)}
.steps button.on::before{content:"";position:absolute;left:-0.125rem;top:0.4375rem;bottom:0.4375rem;width:0.1875rem;background:var(--copper)}
.steps button.done{color:var(--mid)}
.steps button.on{color:var(--ink)}
.frame img{opacity:1}
.devframe img{pointer-events:auto}
.wall{opacity:1;visibility:hidden;transform:translateY(0.5rem);transition:transform .35s}
.wall.on,.cards .wall{visibility:visible;transform:none}
.stage .wallbox{display:none}
.stage .wallbox.active{display:block}
.stage .photo:has(.wallbox.active){max-width:min(100%,calc(30vh * 4 / 3))}
.stage .wallnote{opacity:1}
.answer,.wiz{background:var(--paper)}
.ans[hidden]{display:none}
.rv{opacity:1;transform:none}
.js .rv:not(.in){opacity:0;transform:translateY(1rem)}
.js-only{display:none}
.js .js-only{display:grid}
html:not(.js) .story{display:block;height:auto}
html:not(.js){scroll-behavior:auto}
html:not(.js) *,html:not(.js) *::before,html:not(.js) *::after{animation:none!important;transition:none!important}
html:not(.js) .hdr{background:var(--paper);color:var(--ink);border-bottom:0.0625rem solid var(--stone)}
html:not(.js) .stage{display:none}
html:not(.js) .cards{display:block}
html:not(.js) .galpin{height:auto}
html:not(.js) .galstage{position:relative;height:auto;padding:4.5rem 0}
html:not(.js) .track{overflow-x:auto}
html:not(.js) .rv-clip .ed-in{clip-path:none}
html:not(.js) .wtop,html:not(.js) .wsteps,html:not(.js) #wback{display:none}
html:not(.js) .ans+.ans{border-top:0.0625rem solid var(--stone);padding-top:1.875rem;margin-top:1.875rem}
.wpane,.qwrap,.dev>div,.cym>div,.split>*{min-width:0}
.drawer[aria-hidden=true]{visibility:hidden}
.drawer.open{visibility:visible}
.drawer .close,.drawer .x,.skus .tag button{min-width:2.5rem;min-height:2.5rem}
.skus .tag{padding:0 0 0 0.625rem}
.skus .tag button{font-size:1.25rem}
.drawer .unknown{grid-template-columns:1fr auto}
.drawer .mono{margin-top:0.75rem}
.qtoast{max-width:min(21.25rem,calc(100vw - 2rem));white-space:normal;line-height:1.4}
.wtop{gap:1.25rem;align-items:flex-start;line-height:1.5}
.wtop .wtip{text-align:right}
.wsteps span{color:var(--mid)}
.wnav button{min-height:2.75rem}
.sum pre{overflow-wrap:anywhere}
.sum .act .link{background:none;border:0;border-bottom:0.0625rem solid currentColor;min-height:2.5rem;cursor:pointer}
.wiz[aria-busy=true]{cursor:progress}
.btn:disabled{cursor:wait;background:var(--mid);border-color:var(--mid)}
.contact a{overflow-wrap:anywhere}
.hintline a{color:var(--copper)}
.page-hero{padding-top:calc(var(--hh) + 4.75rem);padding-bottom:6.25rem;display:grid;grid-template-columns:6fr 6fr;align-items:center;gap:5rem}
.page-hero h1,.prose h1{font-size:clamp(2.625rem,5vw,4.5rem);line-height:1.02;max-width:12ch}
.page-hero .lead{font-size:1.0625rem}
.page-hero.full{display:block}
.page-hero.full>div{max-width:48.75rem}
.page-hero.full h1{max-width:16ch}
.page-hero.full>figure{margin-top:3rem}
.page-hero.full>figure img{width:100%;max-height:41.25rem;object-fit:cover}
.page-hero:not(:has(img)){grid-template-columns:1fr;padding-bottom:4rem}
.product-hero{max-width:35rem;width:100%;background:var(--tile);padding:6%;border:0.0625rem solid var(--stone)}
.product-hero img{width:100%;height:auto;object-fit:contain}
.act{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin-top:1.75rem}
.content-top{margin-top:2.625rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.ed-in img{width:100%;aspect-ratio:4/3;object-fit:cover}
.material-list>div{padding:1.375rem 0;border-top:0.0625rem solid var(--stone);font:400 1.875rem/1.2 var(--serif)}
.material-list small{display:block;font:400 0.75rem/1.5 var(--mono);color:var(--mid);margin-top:0.75rem}
.category-list>a{display:flex;justify-content:space-between;gap:1.25rem;padding:1.25rem 0;border-top:0.0625rem solid var(--stone);text-decoration:none}
.category-list>a:hover{color:var(--copper)}
.category-list span{transition:transform .2s}
.category-list>a:hover span{transform:translateX(0.25rem)}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin-top:2.5rem}
.product-grid .card{min-width:0}
.product-grid .meta{padding:0.875rem 0.75rem;gap:0.5rem}
.spec-list{display:grid;grid-template-columns:minmax(10.625rem,1fr) 3fr;margin:2.25rem 0 0}
.spec-list dt,.spec-list dd{margin:0;padding:1.125rem 0;border-top:0.0625rem solid var(--stone)}
.spec-list dt{font:400 0.75rem/1.55 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mid);padding-right:1.375rem}
.send-list{display:grid;grid-template-columns:1fr 1fr;gap:0 4rem;list-style-position:inside;padding:0;margin:2.25rem 0}
.send-list li{padding:1.0625rem 0;border-top:0.0625rem solid var(--stone)}
.starting-points{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.5rem;border-bottom:0.0625rem solid var(--stone)}
.starting-points button{border:0;border-top:0.0625rem solid var(--stone);border-right:0.0625rem solid var(--stone);padding:1.875rem;text-align:left;background:none;cursor:pointer}
.starting-points button:first-child{padding-left:0}
.starting-points button:last-child{border-right:0}
.starting-points button:hover{color:var(--copper)}
.starting-points strong{font:400 1.875rem/1.15 var(--serif);display:block;margin-bottom:1rem}
.starting-points span{color:var(--mid);display:block}
.six-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;padding:0;list-style:none;margin:2.5rem 0 3.25rem}
.six-steps li{border-top:0.0625rem solid var(--stone);padding-top:1.125rem}
.six-steps .mono{color:var(--copper)}
.six-steps h3{font-size:1.625rem;margin:1rem 0 0.75rem}
.six-steps p{font-size:0.9375rem;color:var(--mid)}
.plain-list{margin:2rem 0;padding-left:1.375rem;line-height:2}
.faq{margin-top:2.5rem}
.faq details{border-top:0.0625rem solid var(--stone);padding:1.375rem 0}
.faq details:last-child{border-bottom:0.0625rem solid var(--stone)}
.faq summary{cursor:pointer;font-size:1.25rem;min-height:2.5rem}
.faq p{max-width:75ch;margin-top:1.25rem;color:var(--mid)}
.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem 3rem;margin-top:3rem}
.process-grid article>.cap{margin-top:1.5rem}
.process-grid .wallbox{margin-top:1.5rem}
.film{margin:0}
.film video{display:block;width:100%;height:auto;background:var(--paper)}
.film figcaption{color:var(--mid);margin-top:1rem;line-height:1.6}
.park-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 1.75rem;margin-top:2.5rem}
.next-steps{list-style-position:inside;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;margin-top:2.5rem}
.next-steps li{border-top:0.0625rem solid var(--stone);padding:1.5rem 0}
.prose{max-width:56.25rem;margin:auto;padding:calc(var(--hh) + 5.25rem) 1.75rem 7.5rem}
.prose h2{font-size:2rem;margin:3rem 0 1.125rem}
.prose h1{max-width:none}
.prose p{color:var(--mid);max-width:75ch}
.truecol{line-height:1.55}
.hero .dim,.hero .spec,.hero .spec2{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%)}
.rm .rv,.rm .js .rv,.rm .rv:not(.in){opacity:1;transform:none}
.rm .rv-clip .ed-in{clip-path:none}
.rm .plx img{transform:none}
.rm .hero-img{animation:none}
.rm .frame img{transform:none}
.rm .hintx,.rm .dot,.rm .add,.rm .badge{animation:none}
@media(pointer:coarse){.card:hover .im img{transform:none}.card:hover{transform:none}}
@media(min-width:901px) and (max-width:1250px){.hdr .nav{gap:0.75rem;font-size:0.75rem}.hdr-r{gap:0.5rem}.header-catalog{display:none}.hdr .nav{display:flex}.stage{gap:1.5rem;grid-template-columns:2.6fr 3fr 4fr}.steps button{font-size:0.8125rem}}
@media(max-width:900px){
 :root{--pad:1.5rem;--hh:4.25rem}
 body{font-size:1rem}.sec{padding-top:4.5rem;padding-bottom:4.5rem}
 .hdr .nav,.header-catalog,.hdr-r>.btn{display:none}.menu-toggle{display:block}.hdr-r{gap:0.75rem}
 .hdr .logo{font-size:1.5625rem}.hdr .logo small{font-size:0.5rem}
 .ftr{grid-template-columns:1fr 1fr;padding-top:3.5rem;gap:2.25rem 1.5rem}
 .page-hero{padding-top:calc(var(--hh) + 3rem);padding-bottom:4rem;grid-template-columns:1fr;gap:2.5rem}
 .page-hero h1,.prose h1{font-size:2.625rem;max-width:14ch}
 .split,.process-grid{grid-template-columns:1fr;gap:2.25rem}
 .park-grid{grid-template-columns:1fr 1fr}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
 .six-steps{grid-template-columns:1fr 1fr}
 .starting-points{grid-template-columns:1fr}.starting-points button{padding:1.5rem 0;border-right:0}
 .next-steps{grid-template-columns:1fr 1fr}
 .hero .lead{font-size:1.0625rem}.hero .eyebrow{font-size:0.6875rem;line-height:1.6}
 .hero-txt{bottom:clamp(4.375rem,12vh,7.5rem)}
 .qwrap{margin-top:2rem}.qtoast{right:-3.5rem}
}
@media(max-width:560px){
 :root{--pad:1.25rem}
 h2{font-size:1.875rem}.hero h1{font-size:2.75rem}
 .ftr,.park-grid{grid-template-columns:1fr}
 .hero-cta{gap:1.375rem;flex-direction:column;align-items:flex-start}.hero-cta .btn{font-size:0.9375rem}
 .product-grid{gap:1.25rem 0.75rem}.product-grid .meta{padding:0.75rem 0.5rem;align-items:flex-start;flex-wrap:wrap}
 .product-grid .nm{font-size:0.8125rem}.product-grid .sku{font-size:0.6875rem}
 .product-grid .add{margin-left:auto}
 .spec-list{grid-template-columns:1fr}
 .spec-list dt{border-bottom:0;padding-bottom:0}.spec-list dd{border-top:0;padding-top:0.5rem}
 .send-list,.six-steps,.next-steps{grid-template-columns:1fr}
 .two{grid-template-columns:1fr}
 .wtop .mono{font-size:0.625rem}.wsteps span{font-size:0.625rem;gap:0.3125rem;letter-spacing:.03em}
 .wiz{padding:1.375rem 1.125rem}.ticks button{min-height:2.75rem;font-size:0.625rem}
 .devframe{height:30rem;max-height:65vh}
 .drawer{padding:1.5rem 1.25rem}.drawer li{gap:0.625rem}
 .whatsapp{right:1rem;bottom:1rem}
}
@media(prefers-reduced-motion:reduce){.js .rv:not(.in){opacity:1;transform:none}.card:hover{transform:none}.plx img{will-change:auto}.rv-clip .ed-in{clip-path:none}.story{height:auto}.stage{display:none}.cards{display:block}.galpin{height:auto!important}.galstage{position:relative;height:auto;padding:4.5rem 0}.track{overflow-x:auto;transform:none!important;scroll-snap-type:x mandatory}}

/* The reference remains unchanged through 1440 CSS pixels. Body text keeps its
   existing cap; only the process story uses the separately approved wider stage. */
@media (width > 1440px) {
 :root {
  font-size:clamp(16px,0.42vw + 10px,22px);
  --wide-shell:min(92vw,1680px);
  --wide-gutter:clamp(24px,4vw,96px);
  --wide-content:calc(var(--wide-shell) - 2 * var(--wide-gutter));
  --pad:calc((100vw - var(--wide-content)) / 2);
 }
 .wrap {
  width:var(--wide-shell);max-width:var(--wide-shell);margin-inline:auto;
  padding-inline:var(--wide-gutter);
 }
 .whatsapp svg{width:1.5rem;height:1.5rem}
 .cursor-hint svg{width:1.375rem;height:1.375rem}
 .hero{max-height:none}
 .hero-txt{max-width:40rem;width:40rem}
 .hero h1{font-size:clamp(3.5rem,5.2vw,8rem)}
 .hero .lead{max-width:40rem}
 /* A wider, image-led stage is distinct from the readable body container.
    Keep the whole reference SVG (chain and QC badge included) inside its column. */
 .story{height:calc(100vh + 10 * clamp(600px,75vh,1000px))}
 .stage{
  --process-shell:min(94vw,3400px);
  --process-gutter:clamp(32px,2.5vw,96px);
  --process-art:min(clamp(520px,25vw,880px),calc((100vh - var(--hh) - 6rem) / 1.2));
  --process-inner:calc(var(--process-shell) - 2 * var(--process-gutter));
  --process-photo:min(calc(62vh * 4 / 3),calc((100vh - var(--hh) - 20rem) * 4 / 3),calc(var(--process-inner) - 14rem - var(--process-art) - 4rem));
  width:var(--process-shell);max-width:var(--process-shell);margin-inline:auto;
  grid-template-columns:14rem var(--process-art) var(--process-photo);
  justify-content:space-between;gap:2rem;
  padding:calc(var(--hh) + 2rem) var(--process-gutter) 2rem;
 }
 .stage>*{min-width:0}
 .stage .canvas{height:min(74vh,calc(100vh - var(--hh) - 6rem))}
 .stage .canvas svg{width:100%;max-width:100%}
 .stage .photo,.stage .photo:has(.wallbox.active){
  width:100%;max-width:100%;
 }
 /* The finish comparison belongs beside its explanation, below the same photo.
    This avoids shrinking the photo when step 08 becomes active. */
 .stage .photo:has(.wallbox.active){display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem;align-items:start}
 .stage .photo>figure{grid-column:1/-1}
 .stage .photo .cap{max-width:36rem}
 .stage .frame{aspect-ratio:4/3;flex-shrink:0}
 .stage .photo .wallbox{max-width:100%}
}
/* Candidate B: on ultra-wide screens, explain the process before its photograph.
   Caption columns mirror the art/photo columns; all three groups share one grid.
   Smaller screens retain the already verified A composition. */
@media (width >= 2200px) {
 .stage{
  --process-shell:min(92vw,2800px);
  --process-art:clamp(400px,18vw,640px);
  --process-photo:min(calc(48vh * 4 / 3),calc((100vh - var(--hh) - 20rem) * 4 / 3),calc(var(--process-inner) - 14.5rem - var(--process-art) - 5rem));
  --process-body:calc(var(--process-photo) * .75 + 3rem);
  --process-finish:0rem;
  grid-template-columns:14.5rem var(--process-art) var(--process-photo);
  grid-template-rows:auto var(--process-body);
  justify-content:center;align-content:center;align-items:start;
  gap:2rem 2.5rem;
 }
 .stage:has(.wallbox.active){--process-finish:calc(var(--process-art) / 3 + 6rem)}
 .stage .steps{grid-column:1;grid-row:1/3;align-self:start;padding-top:2rem}
 .stage .steps button{font-size:1rem;line-height:1.5;padding-block:.65rem}
 .stage .steps button.on{font-weight:600}
 .stage .photo,.stage .photo:has(.wallbox.active){display:contents}
 .stage .photo .cap{
  grid-column:2/4;grid-row:1;max-width:none;
  display:grid;grid-template-columns:var(--process-art) var(--process-photo);
  column-gap:2.5rem;row-gap:.5rem;
 }
 .stage .cap .num{grid-column:1;grid-row:1;font-size:1rem;line-height:1.2}
 .stage .cap h3{grid-column:1;grid-row:2;font-size:clamp(2.5rem,2.2vw,4rem);line-height:1.04;margin:0}
 .stage .cap .hard{grid-column:1;grid-row:3;font-size:1rem;line-height:1.5;margin:0;color:var(--ink);letter-spacing:.04em}
 .stage .cap p{grid-column:2;grid-row:1/4;align-self:center;font-size:1.25rem;line-height:1.55;max-width:42ch;min-height:0;margin:0}
 .stage .photo>figure{grid-column:3;grid-row:2;margin:0}
 .stage .canvas{grid-column:2;grid-row:2;height:100%;padding:1rem 0 calc(1rem + var(--process-finish))}
 .stage .canvas svg{width:min(100%,calc((var(--process-body) - 2rem - var(--process-finish)) / 1.2));max-height:100%}
 .stage .pcount{bottom:calc(var(--process-finish) + .25rem)}
 .stage .photo .wallbox.active{grid-column:2;grid-row:2;align-self:end;max-width:100%;margin:0}
}
/* B readability candidate: role-specific type, preserving the stage composition. */
@media (width > 1440px) {
 .stage{--process-reading:#49443e;--process-secondary:#625d55}
 .stage .steps button{
  font-size:1.25rem;line-height:1.45;color:var(--process-reading);
  padding-left:3rem;text-indent:-1.875rem;
 }
 .stage .steps button.done{color:var(--process-reading)}
 .stage .steps button.on{color:var(--ink);font-weight:600}
 .stage .steps .n{font-size:.875rem;color:var(--process-secondary);text-indent:0}
 .stage .cap p{font-size:1.25rem;line-height:1.6;color:var(--process-reading)}
 .stage .photo>figure>figcaption{
  font-size:.8125rem;line-height:1.5;letter-spacing:.08em;color:var(--process-secondary);
 }
 .stage .photo>figure>figcaption::after{color:var(--process-secondary)}
 .stage .pcount{font-size:.875rem;line-height:1.4;color:var(--process-secondary);letter-spacing:.06em}
}
@media (width >= 2200px) {
 .stage .cap p{font-size:1.4rem}
}

/* Local pages candidate. The accepted process stage and <=1440px stay unchanged. */
@media (width > 1440px) {
 .page-hero.wrap,.sec.wrap,.nums.wrap,.gal .wrap {
  --page-shell:min(92vw,2080px);
  width:var(--page-shell);max-width:var(--page-shell);
  --mid:#625d55;
 }
 .page-hero,.sec.wrap{font-size:1.2rem;line-height:1.6}
 .page-hero{gap:3rem;padding-top:calc(var(--hh) + 3.5rem);padding-bottom:4rem}
 .sec.wrap{padding-block:5.5rem}
 .page-hero h1{font-size:4.5rem}
 .page-hero .lead,.sec.wrap .lead{font-size:1.25rem;line-height:1.6;max-width:44rem}
 .page-hero.full>div{max-width:48rem}
 .page-hero .btn,.sec.wrap .btn,.sec.wrap .link{font-size:1.05rem}
 .page-hero .eyebrow,.sec.wrap .eyebrow{font-size:.85rem}
 .nums .nl{font-size:.85rem;line-height:1.5}
 .nums .nnote{font-size:.8rem;line-height:1.55}
 .gal{--pad:calc((100vw - (min(92vw,2080px) - 2 * var(--wide-gutter))) / 2);--mid:#625d55}
 .gal .lead{font-size:1.25rem;line-height:1.6;max-width:44rem}
 .gal .card .nm{font-size:1.05rem;line-height:1.4}
 .gal .card .sku,.gal .eyebrow,.galnote,.gal .mono{font-size:.85rem;line-height:1.5}
 .product-hero{max-width:36rem;justify-self:end}
 .sec.wrap .mono,.sec.wrap figcaption{font-size:.85rem;line-height:1.5}
 .material-list small,.spec-list dt{font-size:.9rem;line-height:1.55}
 .sec.wrap .cap p{font-size:1.15rem;line-height:1.6;max-width:65ch}
 .sec.wrap .cap .hard{font-size:.9rem;line-height:1.5}
 .product-grid .nm{font-size:1.05rem;line-height:1.4}
 .product-grid .sku{font-size:.85rem}
 .starting-points span,.six-steps p{font-size:1.05rem;line-height:1.6}
 .six-steps{gap:1.5rem}
 .six-steps h3{font-size:1.8rem;line-height:1.15}
 .faq summary{font-size:1.35rem}
 .faq p{max-width:65ch}
 /* People at the photograph's edge should not be lost to the parallax crop. */
 .sec.wrap .ed-in img[src*="about-team-"],.sec.wrap .ed-in img[src*="about-designers"]{aspect-ratio:auto;height:auto;transform:none!important}
 #make .chip{font-size:1.15rem}
 #make .answer .ph,#make .ans .q,#make .ans dt{font-size:.9rem}
 #dev .ticks button,#dev .devhint,#dev .devtag{font-size:.85rem;line-height:1.5}
 #dev .devcap .st{font-size:.9rem}
 #quote .wsteps span{font-size:.85rem;line-height:1.4;letter-spacing:.04em}
 #quote .wtop .mono,#quote .fld label,#quote .hintline,#quote .sum dt{font-size:.85rem;line-height:1.5}
 #quote .opt span,#quote .fld input,#quote .fld textarea,#quote .contact{font-size:1.1rem}
 #quote .skus .none,#quote .sum pre,#quote .err{font-size:1rem;line-height:1.55}
 .page-hero:not(:has(img)){padding-bottom:2.5rem}
 .page-hero:not(:has(img))+#quote{padding-top:3rem}
 .page-hero:not(:has(img))+#quote .qwrap{margin-top:2rem}
}

/* Buyer readability round: preserve the established composition and process stage. */
:root{--mid:#625d55;--copper:#ad5028}
.ed-in{-webkit-mask-image:none;mask-image:none}
.ed-in::before{display:none}
.sec.wrap .ed-in img[src*="about-team-"],.sec.wrap .ed-in img[src*="about-designers"]{aspect-ratio:auto;height:auto;transform:none!important}
.ed figcaption{font-size:max(.75rem,12px);line-height:1.6;letter-spacing:.06em}
.ed figcaption::after{display:none}
.hintline,.truecol,.material-list small,.spec-list dt,.ans dt,.ans .q,.cap .hard{font-size:max(.875rem,14px);line-height:1.6}
.ftr .fine,.ftr .mono,.ftr .contact{font-size:max(.875rem,14px);line-height:1.6}
.fld label,.wtop .mono,.skus .mono,.sum dt{font-size:max(.875rem,14px);line-height:1.5}
.fld input,.fld textarea{font-size:max(1rem,16px);line-height:1.5;min-height:48px}
.opt span{font-size:max(1rem,16px);min-height:48px;display:flex;align-items:center;line-height:1.4}
.wsteps span{font-size:max(.8125rem,13px);line-height:1.45;letter-spacing:.025em;align-items:flex-start}
.wsteps em{margin-top:.125rem}
.ticks button{font-size:max(.8125rem,13px);line-height:1.5;min-height:48px;letter-spacing:0}
.chip{min-height:48px;line-height:1.5}
.ans dd{line-height:1.65}
.ans h3{text-wrap:balance}
.js #answer{display:grid;align-content:start;min-height:0}
.js #answer .ans{grid-area:1/1;min-width:0;animation:none}
.js #answer .ans[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.js #answer:not([data-ready]) .ans:not([data-answer="photo"]){visibility:hidden;pointer-events:none}
html:not(.js) #make .chips,html:not(.js) #chipHint{display:none}
.btn,.qbtn{min-height:48px}
@media(min-width:901px) and (max-width:1440px){
 .hdr .nav{font-size:14px;gap:clamp(10px,1.4vw,20px)}
 .steps button{font-size:16px;line-height:1.4;min-height:44px}
 .cap p,.six-steps p{font-size:16px;line-height:1.65}
}
@media(min-width:901px) and (max-width:1120px){.header-catalog{display:none}.hdr .nav{gap:10px}.hdr-r{gap:8px}.hdr .btn{padding:12px}}
@media(max-width:900px){
 .sec{padding-top:64px;padding-bottom:64px}
 .hintline,.truecol,.cap .hard,.ans .q,.ans dt{font-size:14px}
 .ed figcaption{font-size:12px}
 .product-grid .nm{font-size:16px;line-height:1.45}
 .product-grid .sku{font-size:13px}
 .wtop{gap:12px}.wtop .mono{font-size:13px;letter-spacing:.025em}
 .wsteps{gap:10px}.wsteps span{font-size:13px;flex-direction:column;gap:6px}
 .ticks{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
 .ticks button{text-align:left;padding:8px}
 .ans dl{grid-template-columns:1fr}.ans dt{border-bottom:0;padding-bottom:0}.ans dd{padding-top:4px}
 #answer{padding:24px 20px}.ans .act{align-items:flex-start}
 .whatsapp{bottom:12px;right:12px}
}

/* Missing process evidence keeps its existing frame without substituting another operation. */
.process-photo-note{display:grid;place-items:center;min-height:16rem;aspect-ratio:4/3;padding:2rem;text-align:center;background:var(--bg,#f4f1ea);color:inherit;box-sizing:border-box}.process-photo-note p{margin:0;font-size:1.1rem;line-height:1.6}.process-photo-note span{font-size:.9rem}#frame>.process-photo-note{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;opacity:0;visibility:hidden}#frame>.process-photo-note.on{opacity:1;visibility:visible;z-index:2}

/* Keep the documented rotary tool in view when the source is cropped by the existing frame. */
img[src$="hand-finishing.jpg"]{object-position:50% 0%!important}

/* Audit follow-up: readable supporting information and deliberate video loading. */
.facts{font-size:max(.875rem,14px);line-height:1.65;color:rgba(245,242,236,.9)}
.hintline,.truecol,.devcap .st,#chipHint{font-size:max(.875rem,14px);line-height:1.5}
.ed figcaption,.film figcaption{font-size:max(.875rem,14px);line-height:1.6;letter-spacing:.035em}
.add{flex-basis:2.75rem;width:2.75rem;height:2.75rem;min-width:44px;min-height:44px}
.film-player{position:relative}.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:48px;white-space:nowrap}
.film-play[hidden]{display:none}#factory-video-status:empty{display:none}
#factory-video-status{font-size:1rem;margin-top:.75rem}

.wallnote,.galhint,.b3-drag-hint,#dev .ticks button{font-size:max(.875rem,14px);line-height:1.5}

/* Release candidate: no Hero photograph; retain the approved text and geometry. */
.hero.hero--image-empty{background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 86%,var(--paper) 100%)}

/* Homepage refinement 2026-10-27: functional type and generous standalone targets. */
body[data-page="index"] .eyebrow{font-size:.8125rem;line-height:1.5}
body[data-page="index"] .hdr .qbtn{font-size:.8125rem}
body[data-page="index"] .badge{font-size:.8125rem;min-width:22px;height:22px}
body[data-page="index"] main .link{display:inline-flex;align-items:center;min-height:44px;line-height:1.4}
@media(max-width:767px){
 body[data-page="index"] .hdr .qbtn{padding-inline:10px;gap:6px;letter-spacing:.02em}
 body[data-page="index"] .hdr .qbtn .lbl{display:inline}
 body[data-page="index"] .hdr .qbtn .quote-long{display:none}
 body[data-page="index"] .ftr a,body[data-page="index"] main a[href^="mailto:"],body[data-page="index"] main a[href^="https://wa.me/"]{display:inline-flex;align-items:center;min-height:44px;line-height:1.4}
}

/* Contact keeps its reserved row throughout the collapsed-navigation range. */
.whatsapp .wa-label{display:none}
@media(max-width:900px){
 :root{--hh:7rem}
 .hdr{padding-bottom:44px}
 .hdr .qbtn{font-size:13px;padding-inline:10px;gap:6px;letter-spacing:.02em}
 .hdr .qbtn .lbl{display:inline}
 .hdr .qbtn .quote-long{display:none}
 .hdr .badge{font-size:13px;min-width:22px;height:22px}
 .whatsapp{top:calc(var(--hh) - 44px);bottom:auto;left:var(--pad);right:auto;width:auto;height:44px;display:flex;gap:8px;background:transparent;color:var(--ink);z-index:55}
 .whatsapp svg{width:20px;height:20px}
 .whatsapp .wa-label{display:inline;font:500 14px/1.4 var(--sans)}
}

@media(max-width:900px){main [id]{scroll-margin-top:calc(var(--hh) + 16px)}}

/* Keep the Privacy contact-link focus ring clear of viewport edges during keyboard scrolling. */
body[data-page="privacy"] .prose a{scroll-margin-block:calc(var(--hh) + 16px) 24px}

/* R6: Contact labels use reading roles; field names, stages and validation stay intact. */
body[data-page="contact"] #wiz .wtop .mono{font:400 14px/1.5 var(--sans);letter-spacing:0;text-transform:none}
body[data-page="contact"] #wiz .wsteps>span{font:500 14px/1.4 var(--sans);letter-spacing:0;text-transform:none}
body[data-page="contact"] #wiz .wsteps>span>i{font-family:var(--mono)}
body[data-page="about"] .b2-photo figcaption,body[data-page="manufacturing"] .b2-photo figcaption,body[data-page="contact"] .b2-photo figcaption{font:400 14px/1.6 var(--sans);letter-spacing:0;text-transform:none}

/* Recovery: separate footer navigation into comfortable mobile tap targets. */
@media(max-width:700px){.ftr>div:nth-child(2){display:flex;flex-direction:column;align-items:flex-start;gap:4px}.ftr>div:nth-child(2)>a{display:inline-flex;align-items:center;min-height:44px}.ftr .contact>a{max-width:100%;overflow-wrap:anywhere}.mobile-nav{max-height:calc(100dvh - var(--hh));overflow-y:auto;overscroll-behavior:contain}.hdr .logo{flex-shrink:0}}

@media(max-width:700px){body .hdr,body .hdr.solid{background:var(--paper)!important;backdrop-filter:none}}


/* Source: batch2.css — unchanged rules */
/* Grok Batch 2. Additive candidate; existing wide-screen B-type dimensions retained. */
:root{--b2-panel:#E9E2D7;--b2-radius:8px;--b2-shadow:0 20px 40px -24px rgba(40,30,20,.18)}
.b2-photo{isolation:isolate;overflow:visible}
.b2-photo .photo-seat{position:relative;isolation:isolate;margin-right:24px;margin-bottom:24px}
.b2-photo .photo-seat::before{content:"";position:absolute;inset:24px -24px -24px 24px;background:var(--b2-panel);border-radius:var(--b2-radius);z-index:-1}
.b2-photo .ed-in{border-radius:var(--b2-radius);box-shadow:var(--b2-shadow);clip-path:none!important;mask:none!important;-webkit-mask:none!important;overflow:hidden}
.b2-photo .ed-in::before{display:none}
.b2-photo .ed-in img{object-fit:cover;object-position:var(--photo-focus,50% 65%);transform:none}
.b2-photo:not(.b2-pinned) .ed-in img{width:100%;height:auto;aspect-ratio:4/3}
.b2-photo figcaption{margin-top:1rem;line-height:1.6}
.b2-photo-grid{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:4rem 2.5rem!important;align-items:start!important}
.b2-photo-grid>*{grid-column:span 7;min-width:0;margin-top:0}
.b2-photo-grid>*:nth-child(4n+2),.b2-photo-grid>*:nth-child(4n+3){grid-column:span 5;margin-top:80px}
.b2-photo-grid>*:nth-child(4n+2) .ed-in img,.b2-photo-grid>*:nth-child(4n+3) .ed-in img{aspect-ratio:4/5}
.b2-photo-grid.b2-mirror>*:first-child{grid-column:span 5;margin-top:80px}
.b2-photo-grid.b2-mirror>*:nth-child(2){grid-column:span 7;margin-top:0}
.b2-photo-grid.b2-mirror>*:first-child .ed-in img{aspect-ratio:4/5}
.b2-photo-grid.b2-mirror>*:nth-child(2) .ed-in img{aspect-ratio:4/3}
/* Full-width group photographs cannot be safely cover-cropped to either class.
   Retain the requested frame ratio, but contain the complete photograph. */
.b2-photo.b2-people .ed-in{background:var(--tile)}
.b2-photo.b2-people .ed-in img{object-fit:contain!important;aspect-ratio:4/3!important;transform:none!important}
.b2-photo-grid>*:nth-child(2).b2-people .ed-in img{aspect-ratio:4/5!important}
.process-grid .b2-photo figcaption,#cards .b2-photo figcaption{display:none}
.process-grid article>.cap,#cards li>.cap{margin-top:0}
.b2-stepcard{position:relative;z-index:2;background:var(--paper);margin:-64px 2rem 1.25rem;padding:1.25rem 1.5rem;max-width:calc(100% - 4rem);width:fit-content}
.b2-stepcard h3{margin:.5rem 0 0;font-size:clamp(1.6rem,2vw,2.5rem);line-height:1.15}
.b2-stepcard .num{font-size:.875rem;line-height:1.5}
.process-grid .cap>p,.process-grid .cap>.hard{margin-inline:2rem}
.b2-pinned .photo-seat{margin-right:24px;margin-bottom:24px}
.b2-pinned .b2-stepcard{margin:-64px 1.5rem 1rem;padding:.75rem 1rem;max-width:calc(100% - 3rem)}
.b2-pinned .b2-stepcard strong{font:500 1rem/1.4 var(--sans);display:block}
.b2-pinned .b2-stepcard span{font:400 .75rem/1.5 var(--mono)}
.b2-pinned figcaption{margin-top:.5rem}
/* Already-visible defaults: animation is applied only when an observer fires. */
@keyframes b2-enter{from{opacity:.35;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes b2-image{from{transform:scale(1.04)}to{transform:scale(1)}}
.b2-photo.b2-enter{animation:b2-enter 700ms ease-out both}
.b2-photo.b2-enter:not(.b2-people):not(.b2-pinned) .ed-in img{animation:b2-image 700ms ease-out both}

.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin-top:2.5rem}
.category-tile{display:block;color:var(--ink);text-decoration:none;min-width:0}
.category-tile .category-image{background:#F0EBE3;padding:.75rem;aspect-ratio:1;display:block;overflow:hidden;border-radius:6px}
.category-tile img{width:100%;height:100%;object-fit:contain;display:block}
.category-tile h3{font-size:1.5rem;line-height:1.2;margin:1rem 0 .4rem}
.category-tile p{font-size:1rem;line-height:1.5;margin:0;color:var(--mid)}
.category-tile:focus-visible{outline:2px solid var(--copper);outline-offset:6px}
.category-tile:hover h3{text-decoration:underline;text-underline-offset:.2em}
.view-large{display:inline-flex;min-height:44px;align-items:center;gap:.5rem;text-decoration:underline;text-underline-offset:.2em;font-size:.875rem;line-height:1.4;color:var(--ink);padding:.5rem 0}
.card .view-large{padding:.5rem 1rem}.dev-large{margin-top:1rem}
.choose-entry{display:block;margin:1.5rem 0;padding:1.25rem;background:var(--tile);border:1px solid var(--stone);border-radius:4px;cursor:pointer;font-size:1rem;line-height:1.55}
.choose-entry input{width:1.125rem;height:1.125rem;vertical-align:middle;margin-right:.5rem;accent-color:var(--copper)}
.choose-entry small{display:block;margin-top:.5rem;color:var(--mid);font-size:.875rem}
.project-details{margin:1.5rem 0;border-block:1px solid var(--stone)}
.project-details summary{padding:1rem 0;cursor:pointer;font-size:1.125rem;min-height:48px}
.project-details .two{padding-block:.5rem 1.5rem;gap:1.25rem}
.project-details input,.project-details select{width:100%;font:inherit;min-height:48px;background:var(--paper);border:1px solid var(--stone);padding:.75rem;color:var(--ink)}
.b2-after{margin-top:2rem}.b2-after ol{padding-left:1.5rem;line-height:1.7}.b2-after p{font-size:.875rem;line-height:1.6;color:var(--mid)}
.lightbox{border:0;padding:1rem;background:var(--paper);color:var(--ink);max-width:95vw;max-height:95vh;width:fit-content}
.lightbox::backdrop{background:rgba(20,20,20,.8)}
.lightbox img{display:block;max-width:88vw;max-height:78vh;object-fit:contain;margin:1rem auto}
.lightbox button{font:inherit;min-height:44px;padding:.5rem 1rem;border:1px solid var(--stone);background:var(--paper);color:var(--ink);cursor:pointer}
.lightbox p{max-width:65ch;line-height:1.6;margin:.75rem 0}
[id]{scroll-margin-top:calc(var(--hh) + 1.5rem)}
@media(max-width:900px){
 .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}.category-tile h3{font-size:1.25rem}.category-tile p{font-size:.875rem}
 .b2-photo-grid{grid-template-columns:1fr!important;gap:3rem!important}
 .b2-photo-grid>*,.b2-photo-grid.b2-mirror>*{grid-column:1!important;margin-top:0!important}
 .b2-photo .photo-seat{margin-right:24px}
 .b2-photo-grid .b2-photo.b2-people .ed-in img{aspect-ratio:auto!important}
 .b2-stepcard{margin:-64px 1rem 1rem;padding:1rem;max-width:calc(100% - 2rem)}
 .process-grid .cap>p,.process-grid .cap>.hard{margin-inline:1rem}
 .project-details .two{grid-template-columns:1fr}.b2-after ol{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.b2-photo.b2-enter,.b2-photo.b2-enter .ed-in img{animation:none!important;transform:none!important}}

/* No coloured lighting blend over the factory hero. The existing neutral text scrim remains for legibility. */
.hero .spec,.hero .spec2{display:none}
.b2-pinned .frame img{transform:scale(1.04);transition:clip-path 700ms ease,opacity 700ms ease,transform 700ms ease}
.b2-pinned .frame img.on{transform:scale(1)}

.b2-no-observer .rv{opacity:1;transform:none}
.b2-no-observer .rv-clip .ed-in{clip-path:none!important}
.b2-no-observer .story{display:none}
.b2-no-observer .cards{display:block}

/* Keep every face and raised hand, but remove artificial fixed-ratio matting. */
body[data-page="about"] .b2-people .ed-in img,
body[data-page="about"] .ed-in img[data-original="assets/p1/about-designers.webp"]{display:block;width:100%;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;transform:none!important}
body[data-page="about"] .b2-photo-grid>.b2-people:nth-child(2){margin-top:2.5rem}
@media(max-width:900px){body[data-page="about"] .b2-photo-grid>.b2-people:nth-child(2){margin-top:0}}

/* sizes=auto enables size containment: declare the exact source ratio instead of auto. */
body[data-page="about"] .sec.wrap .b2-photo-grid .b2-photo.b2-people .ed-in img[data-original="assets/p1/about-team-workshop.webp"]{aspect-ratio:1600/995!important}
body[data-page="about"] .sec.wrap .b2-photo-grid .b2-photo.b2-people .ed-in img[data-original="assets/p1/about-team-office.webp"]{aspect-ratio:900/703!important}
body[data-page="about"] .sec.wrap .b2-photo .ed-in img[data-original="assets/p1/about-designers.webp"]{aspect-ratio:1600/900!important}

/* R6 photo candidate A: preserve the complete designer photograph and its source ratio. */
body[data-page="about"] #design-team .split{align-items:start}
body[data-page="about"] #design-team .split>.lead{align-self:start}
body[data-page="about"] #design-team .photo-seat{margin-right:8px;margin-bottom:8px}
body[data-page="about"] #design-team .photo-seat::before{inset:8px -8px -8px 8px}


/* Source: batch3.css — unchanged rules */
/* Batch 3 reference composition. Leopard assets are served byte-for-byte. */
#story{height:calc(100vh + 10 * 75vh);margin-top:0}
#story>.stage{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));display:flex;align-items:center;padding:0;overflow:hidden;max-width:none;width:100%;margin:0;filter:none;mix-blend-mode:normal}
#story .b3-layout{display:grid;grid-template-columns:minmax(9.5rem,.16fr) minmax(0,.34fr) minmax(0,.5fr);gap:clamp(.75rem,1.5vw,2.5rem);align-items:center;width:100%;max-width:min(92vw,105rem);max-height:100%;margin-inline:auto;padding-inline:clamp(1.25rem,3vw,3rem);filter:none;mix-blend-mode:normal}
#story .b3-layout>*{min-width:0}
#story #steps{grid-area:auto;margin:0;padding:0 0 0 1rem;align-self:center}
#story #steps button{font-size:.9375rem;line-height:1.45;min-height:44px;padding:.5rem 0;color:#777169;text-indent:0}
#story #steps button.done{color:#4c4944}#story #steps button.on{color:var(--ink)}
#story #steps .n{font-size:.68rem;margin-right:.9rem;color:inherit}
#story .b3-canvas{position:relative;height:var(--b3-group-height,36rem);display:grid;align-items:center;filter:none;mix-blend-mode:normal;container-type:inline-size}
#story .pbar{display:none}
#story .pbar i{display:block;height:100%;width:0;background:var(--ink)}
.b3-ctop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;min-height:1.6rem}
.b3-tag{display:inline-flex;align-items:center;gap:.5rem;font:400 .68rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);padding:.35rem .6rem;border:1px dashed #BDB6AA;max-width:100%}
.b3-tag i{flex:none;width:.5rem;height:.5rem;border:1px solid currentColor;border-radius:50%}.b3-tag b{font-weight:400}
.b3-tag.real{border-style:solid;border-color:var(--ink);color:var(--ink)}.b3-tag.real i{background:var(--ink)}
#story #stageHint{position:static;max-width:none;font-size:.68rem;line-height:1.4;transition:opacity .6s}
#story #stageHint.gone{display:none}
.b3-pstage{position:relative;width:100%;height:var(--b3-product-height,min(48vh,43.2rem,117.17728cqw));display:grid;place-items:center;filter:none;mix-blend-mode:normal}
.b3-grid{position:absolute;inset:0;opacity:0;background-image:linear-gradient(#DDD7CC 1px,transparent 1px),linear-gradient(90deg,#DDD7CC 1px,transparent 1px);background-size:1.5rem 1.5rem;mask-image:radial-gradient(closest-side,#000 55%,transparent);pointer-events:none}
.b3-pend{position:relative;/* Center the unchanged 80% product without a reserved QC slot. */height:100%;aspect-ratio:581/851;transform-origin:50% 55%;filter:none;mix-blend-mode:normal}
.b3-pend img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;filter:none;mix-blend-mode:normal;pointer-events:none}
.b3-pend img.b3-real{z-index:8;filter:none;mix-blend-mode:normal}
.b3-sweep{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:130% 0;mask:url(assets/p1/leopard/mask.png) center/100% 100% no-repeat;-webkit-mask:url(assets/p1/leopard/mask.png) center/100% 100% no-repeat;z-index:7}
.b3-sweep.run{visibility:visible;animation:b3-sweep 2.4s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes b3-sweep{0%{background-position:130% 0}70%,100%{background-position:-30% 0}}
.b3-glint{position:absolute;left:49.5%;top:21.5%;width:2.6rem;height:2.6rem;margin:-1.3rem 0 0 -1.3rem;opacity:0;visibility:hidden;pointer-events:none;z-index:7;background:radial-gradient(circle,#fff 0 12%,rgba(255,240,200,.9) 18%,rgba(255,200,120,.35) 40%,transparent 65%)}
.b3-glint::before,.b3-glint::after{content:"";position:absolute;left:50%;top:50%;width:180%;height:2px;margin:-1px 0 0 -90%;background:linear-gradient(90deg,transparent,#fff,transparent)}.b3-glint::after{transform:rotate(90deg)}
.b3-glint.run{visibility:visible;animation:b3-glint 1.4s ease-in-out infinite}@keyframes b3-glint{0%,100%{transform:scale(.7) rotate(0)}50%{transform:scale(1.1) rotate(20deg)}}
.b3-qc-static .b3-loupe{width:1.8rem;height:1.8rem;color:var(--copper)}
.b3-qct{font:400 .62rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin:.4rem 0 .5rem}
.b3-qc-static ul{list-style:none;margin:0;padding:0;font-size:.82rem}
#cards .b3-qc-static li{display:flex;grid-template-columns:none;align-items:center;gap:.5rem;padding:.22rem 0;border-top:1px solid #ECE6DC}
.b3-qc-static li::before{content:"✓";color:var(--copper);font-size:.8rem}
#story .pcount{display:none}
#story .photo,#story .photo:has(.wallbox.active){display:block;grid-area:auto;width:auto;max-width:none;margin:0;align-self:center}
#story .photo>figure{grid-area:auto;margin:0;width:100%}
#story #frame{width:100%;height:auto;aspect-ratio:4/3;mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent),linear-gradient(180deg,transparent 0,#000 4.5%,#000 95.5%,transparent);mask-composite:intersect}
#story #frame img{height:100%;width:100%;object-fit:cover;transform:scale(1.06);clip-path:inset(0 0 0 100%);transition:clip-path .85s cubic-bezier(.77,0,.18,1),transform 9s cubic-bezier(.2,.7,.2,1)}
#story #frame img.on{clip-path:inset(0);transform:scale(1);z-index:1}
#story #frame img.prev{clip-path:inset(0);z-index:0;transition:none}
#story .photo>figure>figcaption{font:400 .66rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);padding:.5rem 0 0;border-top:1px solid var(--stone);margin-top:.4rem}
#story .cap{display:block;grid-area:auto;max-width:none;margin-top:clamp(1rem,2.2vh,1.8rem);padding:0}
#story .cap .num{font:400 .72rem/1.4 var(--mono);letter-spacing:.12em;color:var(--copper)}
#story .cap h3{font-size:clamp(1.9rem,2.4vw,3.2rem);line-height:1.05;margin:.35rem 0 .6rem}
#story .cap p{font-size:1.125rem;line-height:1.55;min-height:0;max-width:34rem;color:var(--mid);margin:0}
#story .cap .hard{font:400 .7rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-top:.8rem}
.b3-sub{font:400 .7rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin:-.2rem 0 .6rem}.b3-sub:empty{display:none}
#cards>.b3-tile{min-width:0}#cards .b3-tile{background:var(--tile);display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem 6% 6%;position:relative;filter:none;mix-blend-mode:normal}
#cards .b3-tile.b3-cad{background-image:linear-gradient(#DDD7CC 1px,transparent 1px),linear-gradient(90deg,#DDD7CC 1px,transparent 1px);background-size:1.25rem 1.25rem}
#cards .b3-tile>.b3-tag{align-self:stretch;background:var(--paper)}
#cards .b3-tile>img{width:auto;height:min(56vh,54rem);max-width:100%;aspect-ratio:581/851;object-fit:contain;filter:none;mix-blend-mode:normal}
.b3-qc-static{width:100%;background:#FBF9F5;border:1px solid var(--stone);padding:1rem}
/* Ordinary document flow: only the ten-process story remains scroll-driven. */
#gallery .galpin{height:auto!important}#gallery .galstage{position:relative;top:auto;height:auto;overflow:visible;display:block;padding:clamp(4.375rem,8vw,7.5rem) 0}
#gallery #track{overflow-x:auto;overflow-y:hidden;transform:none!important;will-change:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);padding-block:.5rem 1.5rem;scrollbar-width:thin;scrollbar-color:var(--stone) transparent;touch-action:pan-x pan-y;cursor:grab}
#gallery #track::-webkit-scrollbar{display:block;height:5px}#gallery #track::-webkit-scrollbar-thumb{background:var(--stone)}
#gallery #track.dragging{cursor:grabbing;user-select:none;scroll-snap-type:none}
#gallery .card{scroll-snap-align:start}#gallery .card[hidden]{display:none!important}
#gallery .galprog{display:none}.b3-gallery-controls{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1rem}.b3-gallery-controls[hidden]{display:none}
.b3-filters{display:flex;flex-wrap:wrap;gap:.5rem}.b3-filters button{border:1px solid var(--stone);background:transparent;color:var(--ink);padding:.5rem .8rem;font:inherit;font-size:.875rem;min-height:44px}
.b3-filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.b3-gallery-arrows{display:flex;gap:.5rem;flex:none}.b3-gallery-arrows button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--stone);background:transparent;color:var(--ink)}.b3-gallery-arrows button:disabled{opacity:.35;cursor:default}
.b3-gallery-arrows svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.b3-drag-hint.gone{display:none}
@media(min-width:901px) and (max-height:760px){#story #steps button{padding:.3rem 0;min-height:36px}}
@media(max-width:900px){#story{height:auto}#story>.stage{display:none}#cards{display:block}#gallery .b3-gallery-controls{align-items:flex-end}.b3-filters button{font-size:.8rem;padding:.4rem .6rem}}
@media(prefers-reduced-motion:reduce){#story{height:auto}#story>.stage{display:none}#cards{display:block}.b3-sweep,.b3-glint{animation:none!important}#gallery .card{animation:none!important}}
@media(min-width:901px) and (prefers-reduced-motion:reduce){#cards>li{grid-template-columns:1fr 1fr 1fr;align-items:center;gap:2rem}}
html:not(.js) #story{height:auto}html:not(.js) #story>.stage{display:none}html:not(.js) #cards{display:block}

/* The reference counter already contains its Step label. */
#story .pcount::before{content:none}

/* A quiet source caption, with no divider or boxed label. Static mobile tiles keep their disclosures. */
#story .b3-ctop{position:absolute;top:calc(50% + var(--b3-product-height,24rem)/2 + .65rem);left:0;width:100%;display:block;text-align:center;min-height:0}
#story>.stage .b3-tag{display:block;border:0;padding:0;font:400 .75rem/1.4 var(--sans);letter-spacing:.015em;text-transform:none;color:var(--mid)}
#story>.stage .b3-tag i{display:none}
#story #stageHint{position:absolute;top:100%;left:0;width:100%;font-size:.7rem;margin-top:.4rem}
/* Measured maxima reserve copy space across all ten steps, so the photo and headings never jump. */
#story .photo>figure>figcaption{min-height:var(--b3-fig-height,2.8em)}
#story .cap h3{min-height:var(--b3-title-height,1.05em)}
#story .cap .b3-sub{min-height:var(--b3-sub-height,1.4em)}
#story .cap .b3-sub:empty{display:block;visibility:hidden}
#story .cap p{min-height:var(--b3-body-height,3.1em)}
#story .cap .hard{min-height:var(--b3-hard-height,1.5em)}

/* Subject-aware process framing: preserve the operation, not a generic centre crop.
   Source files and the established frame feathering remain unchanged. */
#story img[data-original="assets/p1/process-01-design-cad.webp"]{object-position:70% 50%}
#story img[data-original="assets/process-verified/hand-finishing.jpg"]{object-position:50% 0%}
#story img[data-original="assets/p1/process-06b-plasma-machine.webp"]{object-position:85% 50%}
#story img[data-original="assets/process-verified/ring-polishing.webp"]{object-position:50% 100%}
/* Category gallery: only one selected collection is mounted at a time. */
#gallery .gallery-count{font:.8rem/1.5 var(--mono);color:var(--mid);margin-bottom:1rem}
#gallery .card .gallery-links{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.4rem 0}
#gallery .card .gallery-links a{min-height:44px;display:inline-flex;align-items:center;font-size:.8rem;text-underline-offset:.2em}
#gallery .b3-gallery-controls{align-items:flex-end}
#gallery .b3-filters{min-width:0}
#gallery .card img{object-fit:contain}
@media(max-width:600px){#gallery .b3-gallery-controls{flex-wrap:wrap}#gallery .b3-gallery-arrows{margin-left:auto}}

/* Evidence photo/caption switch atomically. Preserve feathering and focal points. */
#story #frame img{opacity:0;clip-path:none;transform:none;transition:none}
#story #frame img.on{opacity:1;clip-path:none;transform:none;z-index:1}
#story #frame img:not(.on){opacity:0;z-index:0}
#story .photo>figure>figcaption{font-size:max(.875rem,14px);line-height:1.5;letter-spacing:.035em}
#story .cap .num,#story .cap .hard,#story .b3-sub{font-size:max(.8125rem,13px);line-height:1.5;letter-spacing:.06em}
#story>.stage .b3-tag,#story #stageHint{font-size:max(.8125rem,13px)}
#story #steps button{color:#625d56}#story #steps button.on{color:var(--ink)}


#gallery .gallery-count,#gallery .card .gallery-links a{font-size:max(.875rem,14px);line-height:1.5}
.gallery-mobile-category{display:none}
@media(max-width:600px){
 #gallery .b3-filters{display:none}
 #gallery .b3-gallery-controls{display:flex;flex-wrap:nowrap;gap:.75rem;align-items:flex-end;margin-bottom:.75rem}
 #gallery .gallery-mobile-category{display:flex;flex:1;min-width:0;flex-direction:column;gap:.25rem;font-size:.875rem;line-height:1.4}
 #gallery .gallery-mobile-category select{width:100%;min-width:0;min-height:44px;padding:.5rem;background:var(--paper);color:var(--ink);border:1px solid var(--stone);font:inherit;font-size:1rem}
 #gallery .b3-gallery-arrows{margin:0;gap:.4rem}
 #gallery .gallery-count{margin-bottom:.5rem}

}



/* Source: case-hammer.css — unchanged rules */
/* Handle only: retain the existing range rail, labels, photo and section geometry. */
#dev .scrub.has-hammer{position:relative;--hs:3.6rem}
#dev .has-hammer #rng{touch-action:none}
#dev .has-hammer #rng::-webkit-slider-thumb{opacity:0}
#dev .has-hammer #rng::-moz-range-thumb{opacity:0}
#dev .case-hammer{position:absolute;top:0;left:0;width:var(--hs);height:var(--hs);min-width:44px;min-height:44px;transform:translate3d(var(--hammer-x),var(--hammer-y),0) translate(-37.5%,-80%);cursor:grab;outline:none;border-radius:6px;touch-action:none;z-index:4}
#dev .hammer-dragging .case-hammer{cursor:grabbing}
#dev .case-scrub-help{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.25rem 0 .4rem;font:400 max(.875rem,14px)/1.5 var(--sans);color:#62584e;text-align:center}
#dev .case-scrub-help svg{flex:none;width:24px;height:16px}
#dev .case-touch-help{display:none}
@media(pointer:coarse),(max-width:767px){#dev .case-mouse-help{display:none}#dev .case-touch-help{display:inline}#dev .case-scrub-help{align-items:flex-start;text-align:left}#dev .case-scrub-help svg{margin-top:.2rem}}
#dev .case-hammer:focus-visible{box-shadow:0 0 0 1.5px #B4532A;border-radius:12px}
#dev .case-hammer svg{width:100%;height:100%;display:block;overflow:visible}
#dev .case-hammer .hammer-body{transform-box:view-box;transform-origin:34.2px 13.7px;transition:transform .16s ease;--rest:0deg}
#dev .case-hammer:hover .hammer-body{transform:rotate(5deg)}
#dev .hammer-dragging .case-hammer .hammer-body{transform:rotate(14deg);--rest:14deg}
#dev .case-hammer .hammer-body.tap{animation:case-hammer-tap .26s cubic-bezier(.4,0,.3,1)}
@keyframes case-hammer-tap{0%{transform:rotate(18deg)}42%{transform:rotate(0deg)}68%{transform:rotate(5deg)}100%{transform:rotate(var(--rest))}}
#dev .case-hammer .spark{opacity:0;transform-box:view-box;transform-origin:15px 32px}
#dev .case-hammer .spark.go{animation:case-hammer-spark .24s ease-out .1s both}
@keyframes case-hammer-spark{0%{opacity:0;transform:scale(.45)}25%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){#dev .case-hammer .hammer-body,#dev .case-hammer .hammer-body.tap,#dev .hammer-dragging .hammer-body,#dev .case-hammer:hover .hammer-body{animation:none!important;transform:none!important;transition:none!important}#dev .case-hammer .spark{display:none}}


/* Source: gallery-grid.css — unchanged rules */
/* Only What we make: bounded two-row gallery, existing card image zoom preserved. */
#gallery .galstage{padding-block:3.5rem}
#gallery .gg-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1rem}
#gallery .gg-tabs button{min-height:44px;padding:.4rem .8rem;border:1px solid var(--line,#d8cfc2);border-radius:999px;background:transparent;font:inherit;font-size:.88rem;cursor:pointer}
#gallery .gg-tabs button[aria-pressed=true]{background:var(--ink,#29251f);color:var(--bg,#faf7f1)}
#gallery .gg-mobile-filter{display:none}
#gallery .gallery-count{margin-block:.5rem .75rem;font-size:max(.875rem,14px)}
#gallery-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
#gallery .gg-row{min-width:0}
#gallery .gg-viewport{position:relative;overflow:hidden;touch-action:pan-y;cursor:grab;border-radius:8px}
#gallery .gg-viewport:active{cursor:grabbing}
#gallery .gg-set{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;position:relative;align-items:stretch}
#gallery .gg-outgoing{position:absolute;inset:0;pointer-events:none}
#gallery .gg-set .card{min-width:0;width:auto;max-width:none;flex:none;transform:none;margin:0;border-radius:8px;box-shadow:none}
#gallery .gg-set .im{aspect-ratio:1.55;padding:3%;background:var(--cream,#f4efe7)}
#gallery .gg-set .im img{width:100%;height:100%;object-fit:contain;filter:none}
#gallery .gg-set .meta{padding:.6rem .7rem;gap:.5rem;align-items:start;display:grid;grid-template-columns:minmax(0,1fr) 44px}
#gallery .gg-set .sku{font-size:max(.875rem,14px);line-height:1.4;letter-spacing:.015em;overflow-wrap:anywhere}
#gallery .gg-set .nm{font-size:max(.88rem,14px);line-height:1.4;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#gallery .gg-set .add{flex:none;width:44px;height:44px;min-width:44px;min-height:44px}
#gallery .gg-set .card .gallery-links{display:flex;flex-wrap:wrap;gap:0 .65rem;padding:0 .7rem .25rem;font-size:max(.875rem,14px)}
#gallery .gg-set .card .gallery-links a{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0}
#gallery .gg-controls{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;margin-top:.25rem}
#gallery .gg-controls>button{height:44px;width:44px;background:transparent;border:1px solid var(--line,#d8cfc2);border-radius:50%;font-size:1.1rem;cursor:pointer}
#gallery .gg-dots{display:flex;align-items:center;max-width:55%;min-width:0;overflow:hidden}
#gallery .gg-dots button[hidden]{display:none}
#gallery .gg-dots button{padding:0;width:44px;min-width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
#gallery .gg-dots button:after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#b8aa96;left:50%;top:50%;transform:translate(-50%,-50%)}
#gallery .gg-dots button[aria-current=true]:after{background:var(--accent,#b86130);width:8px;height:8px}
#gallery .gg-page{font-size:max(.875rem,14px);min-width:6rem;color:#655c50}
#gallery button:focus-visible,#gallery .gg-viewport:focus-visible,#gallery select:focus-visible{outline:2px solid var(--accent,#b86130);outline-offset:2px}
@media(min-width:1441px){#gallery .gg-set .im{aspect-ratio:1.55}#gallery .gg-set .nm{font-size:.95rem}}
@media(max-width:767px){#gallery .galstage{padding-block:3rem}#gallery .gg-tabs{display:none}#gallery .gg-mobile-filter{display:flex;gap:.75rem;align-items:center;margin-block:1rem}#gallery .gg-mobile-filter select{min-height:44px;min-width:0;flex:1;background:transparent;border:1px solid #c5b9a7;padding:.4rem;font:inherit}#gallery .gg-set{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}#gallery .gg-set .im{aspect-ratio:1}#gallery .gg-set .meta{padding:.5rem;align-items:start}#gallery .gg-set .nm,#gallery .gg-set .sku{font-size:max(.875rem,14px)}#gallery .gg-set .add{width:44px;min-width:44px}#gallery .gallery-links{padding-inline:.5rem;gap:.5rem;font-size:max(.875rem,14px)}#gallery .gg-page{grid-column:1/-1;text-align:center;min-width:auto;font-size:max(.875rem,14px)}#gallery .gg-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:.2rem}#gallery .gg-dots{max-width:none;justify-content:center}#gallery .gg-dots button{min-width:44px}#gallery .gg-row:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){#gallery .card,#gallery .card img{transition:none}}

/* 2026-10-27: match the JS set size at every breakpoint; preserve image pixels. */
#gallery .gg-set .meta>div{display:contents}
#gallery .gg-set .sku{grid-column:1;grid-row:1;min-height:44px;display:flex;align-items:center}
#gallery .gg-set .add{grid-column:2;grid-row:1}
#gallery .gg-set .nm{grid-column:1/-1;grid-row:2;margin-top:0}
@media(max-width:359px){#gallery .gg-set .sku{min-height:4.2em}}
@media(min-width:768px) and (max-width:1199px){#gallery .gg-set{grid-template-columns:repeat(3,minmax(0,1fr))}#gallery .gg-set .im{aspect-ratio:1.2}}

/* R6: make the product itself larger without changing column counts or source crops. */
@media(min-width:1200px){#gallery .gg-set .im{aspect-ratio:1.2}}