@font-face{font-family:"Young Serif";src:url(../fonts/YoungSerif-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url(../fonts/WorkSans-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#e9e7e2;--bg2:#dedbd4;--ink:#1d1b18;--mute:#5b554c;--rust:#b4471d;--rust2:#cf5e2c;--line:#c8c3b9;--steel:#c9ccce}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17.5px/1.62 "Work Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[data-lang=ms] .en,[data-lang=en] .ms{display:none!important}
a{color:inherit}img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:var(--bg);padding:8px 12px}
.ps{background:#f4dc9e;color:#5a3a00;padding:0 .3em;border-radius:3px;font-size:.82em;font-weight:500}
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:14px;padding:14px clamp(18px,4vw,48px);background:linear-gradient(#e9e7e2f0,#e9e7e200)}
.brand{font:400 21px/1 "Young Serif",serif;text-decoration:none;letter-spacing:-.01em}
.badge{font-size:13px;font-weight:500;color:var(--mute);border:1px solid var(--line);border-radius:99px;padding:2px 9px}
.top nav{margin-left:auto}.top nav a{font-size:15px;text-decoration:none;color:var(--mute)}
.lang{background:none;border:1px solid var(--line);color:var(--mute);border-radius:99px;padding:5px 11px;font:500 14px "Work Sans";cursor:pointer}.lang b{color:var(--ink);font-weight:500}
.h1,.h2,h3,.step h2{font-family:"Young Serif",serif;font-weight:400;letter-spacing:-.015em;line-height:1.08;margin:0}
.h1{font-size:clamp(42px,6.4vw,84px);max-width:13ch}
.h1 .w{display:inline-block}
.h2{font-size:clamp(32px,4vw,48px);margin-bottom:28px;max-width:16ch}
h3{font-size:24px;line-height:1.2;margin-bottom:8px}
.sub{color:var(--mute);max-width:34ch;margin:18px 0 26px}
.btn{display:inline-block;background:var(--ink);color:#fff6ec;text-decoration:none;font-weight:500;padding:13px 22px;border-radius:99px;transition:background .2s,transform .2s}.btn:hover{background:var(--rust);transform:translateY(-2px)}
.ctas{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.cue{font-size:15px;color:var(--mute)}
/* scene */
.scene{position:relative}.scene.live{height:520svh}.scene.live .stage{position:sticky;top:0}
.stage{position:relative;height:100svh;min-height:560px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:4vw;padding:96px clamp(18px,5vw,72px) 40px;overflow:hidden}
.copy{position:relative;min-height:380px;display:grid;align-items:center}
.copy>*{grid-area:1/1}
.steps{list-style:none;margin:0;padding:0;display:grid}
.step{grid-area:1/1;opacity:0;transform:translateY(24px);transition:opacity .45s,transform .45s}
.step.on{opacity:1;transform:none}
.step .n{font-size:14px;color:var(--rust2);font-weight:500;font-variant-numeric:tabular-nums}
.step h2{font-size:clamp(40px,5.6vw,76px);margin:8px 0 10px}
.step p{margin:0;max-width:30ch;font-size:19px}.step .state{margin-top:14px;font-size:15px;color:var(--mute)}
.jaw{position:absolute;inset:0 0 6px;border-radius:5px;background:linear-gradient(#f2efe9 0,#b9b4ab 18%,#6d6861 55%,#2c2925 100%);box-shadow:inset 0 1px 0 #fff9,0 8px 14px #000b}
.jaw::after{content:"";position:absolute;left:8%;right:8%;top:3px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.8}
.heat{position:absolute;left:6px;right:6px;bottom:3px;height:4px;border-radius:2px;background:#ff8a3d;box-shadow:0 0 6px #ff8a3d,0 0 18px #ff5a1f,0 0 34px #ff5a1f88;opacity:0}
.static .hero-copy{position:relative}
/* sections */
.sec{padding:clamp(72px,10vw,140px) clamp(18px,5vw,72px)}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;background:var(--bg2)}
.mq-track{white-space:nowrap;font:400 clamp(24px,3vw,36px)/1.2 "Young Serif",serif;letter-spacing:-.01em;color:var(--mute);animation:mq 38s linear infinite;width:max-content}
@keyframes mq{to{transform:translateX(-50%)}}
.fgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--line)}
.fgrid li{background:var(--bg);padding:28px 24px 32px}.fgrid p{margin:0;color:var(--mute)}
.products{background:var(--bg2)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:22px}
.prod{margin:0}.plinth{aspect-ratio:4/5;display:grid;place-items:center;border-radius:20px;background:radial-gradient(70% 60% at 50% 40%,#f7f6f3,#d9d6cf 75%);position:relative;overflow:hidden;padding:12% 14% 16%}
.plinth::after{content:"";position:absolute;bottom:9%;left:20%;right:20%;height:18px;background:radial-gradient(closest-side,#0006,transparent)}
.plinth img{max-height:100%;width:auto;position:relative;z-index:1;filter:drop-shadow(0 18px 16px #0005)}
.missing{margin-top:22px;color:var(--mute);font-size:16px;border-top:1px solid var(--line);padding-top:14px}
.ph .plinth{border:1.5px dashed #5a4636;color:var(--mute);text-align:center;font-size:15px;background:#15110e}
.prod figcaption{margin-top:12px;font-size:17px}
.note{color:var(--mute);margin-top:28px}
.chat{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:5vw;align-items:center}
.chat-copy p{color:var(--mute);max-width:36ch}
.phone{color:#ede6da;background:#1d1a17;border:1px solid var(--line);border-radius:28px;padding:16px;min-height:520px;box-shadow:0 40px 80px #000a}
.ph-head{display:flex;gap:10px;align-items:center;padding:4px 6px 14px;border-bottom:1px solid var(--line)}
.convo{display:flex;flex-direction:column;gap:10px;padding-top:14px;font-size:16px}
.msg{max-width:86%;padding:10px 14px;border-radius:18px;line-height:1.45;animation:pop .35s ease-out}
.msg.u{align-self:flex-end;background:var(--rust);color:#fff6ec;border-bottom-right-radius:6px}
.msg.b{align-self:flex-start;background:#34302b;border-bottom-left-radius:6px}
.typing{color:var(--mute);font-size:14px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
.faq details{border-top:1px solid var(--line);padding:18px 0;max-width:760px}.faq summary{cursor:pointer;font-size:19px;font-weight:500}.faq p{color:var(--mute);margin:10px 0 0}
.foot{padding:48px clamp(18px,5vw,72px) 96px;border-top:1px solid var(--line);color:var(--mute)}.small{font-size:14px}
.fab{position:fixed;right:16px;bottom:16px;z-index:20;background:var(--rust);color:#fff6ec;text-decoration:none;font-weight:500;padding:12px 18px;border-radius:99px;box-shadow:0 10px 30px #000a}

.fab{transition:opacity .3s,transform .3s}.in-scene .fab,.in-chat .fab{opacity:0;transform:translateY(20px);pointer-events:none}
@media (max-width:899px){
 .stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding-top:74px;padding-bottom:16px;gap:4px;align-items:stretch}
 .copy{min-height:0;align-items:start}
 .h1{font-size:clamp(40px,11vw,48px)}.sub{margin:12px 0 16px}
 .step h2{font-size:44px}.step p{font-size:18px}
 .chat{grid-template-columns:1fr}.phone{min-height:470px}
 .top nav{display:none}.lang{margin-left:auto}
}
html:not(.js) .step,.static .step{opacity:1;transform:none;position:relative}
html:not(.js) .steps,.static .steps{gap:28px}
html:not(.js) .copy>*,.static .copy>*{grid-area:auto}
html:not(.js) .step,.static .step{grid-area:auto}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- v6 scene (light steel) ---------- */
body{background:var(--bg)}
.scene{background:linear-gradient(180deg,#eeece8 0%,#e3e0da 70%,#d7d3cb 100%)}
.scene::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000000a 0 1px,transparent 1px 88px);pointer-events:none}
.visual{position:relative;height:min(82svh,700px);width:100%;max-width:660px;justify-self:center}
.counter{position:absolute;left:-10%;right:-10%;bottom:4%;height:16%;background:linear-gradient(#cfd2d3,#aeb2b4 30%,#8f9496);border-top:1px solid #f4f5f5;box-shadow:0 -1px 0 #9aa0a2,0 30px 50px -20px #0004;z-index:0}
.rig{position:absolute;left:calc(52% - min(27%,180px));bottom:9%;width:min(54%,360px);aspect-ratio:773/992}
.rig picture{position:absolute;inset:0;z-index:3}.rig picture:nth-of-type(2){z-index:4}.rig img{position:absolute;inset:0;width:100%;height:100%}
.rig .body{z-index:3;filter:drop-shadow(0 22px 18px #0005)}
.rig .lid{z-index:4;transform-origin:3% 36%;filter:drop-shadow(0 10px 12px #0004)}
.mouth{position:absolute;z-index:1;left:12%;right:9%;top:28.5%;height:14%;border-radius:50%;background:radial-gradient(60% 70% at 50% 60%,#050505,#1a1a1a 60%,#5a5f62 86%,#c9cdcf 96%);opacity:0}
.heatbloom{position:absolute;z-index:2;left:-30%;right:-30%;top:-20%;bottom:-10%;background:radial-gradient(closest-side,#ff7a2e55,#ff7a2e18 55%,transparent 72%);opacity:0;pointer-events:none}
.pouch{position:absolute;z-index:6;left:3%;bottom:9%;width:min(22%,130px);transform-origin:50% 100%;opacity:0;will-change:transform}
.pouch img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 10px #0005)}
.pouch .crimp{position:absolute;left:4%;right:4%;top:3.5%;height:4%;background:repeating-linear-gradient(90deg,#a7aaab 0 2px,#e7e8e8 2px 4px);border-radius:2px;opacity:0;transform:scaleX(.2)}
.sealer{position:absolute;z-index:7;left:-2%;bottom:9%;width:min(62%,400px);aspect-ratio:840/691;opacity:0}
.sealer img{position:absolute;inset:0;width:100%;height:100%}
.sealer .arm{transform-origin:15.9% 49.1%;transform:rotate(-14deg)}
.sealer .flash{position:absolute;left:22%;right:8%;top:47%;height:5%;transform:rotate(-9.5deg);background:#ffb070;border-radius:9px;filter:blur(6px);opacity:0;mix-blend-mode:screen}
.shelf{position:absolute;z-index:5;right:-6%;bottom:30%;width:min(50%,330px);opacity:0}
.shelf img.plank{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 14px #0004)}
.shelf .stock{position:absolute;bottom:62%;width:20%;filter:drop-shadow(0 6px 6px #0004)}
.shelf .stock.a{left:52%}.shelf .stock.b{left:72%}
.cshadow{position:absolute;z-index:5;width:16%;height:10px;border-radius:50%;background:radial-gradient(closest-side,#0006,transparent);opacity:0}
.gauge{position:absolute;z-index:8;width:min(170px,30%);height:auto;right:0;top:2%;filter:drop-shadow(0 10px 14px #0003)}
.g-ps{position:absolute;z-index:8;right:0;top:calc(2% + min(170px,30%) + 6px);margin:0;opacity:0;font-size:14px}
.bignum{position:absolute;z-index:1;left:46%;top:24%;transform:translate(-50%,-50%);font:400 clamp(150px,21vw,290px)/1 "Young Serif",serif;letter-spacing:-.02em;color:transparent;background:linear-gradient(to top,#d2501c,#f08a3c 48%,#bdb7ad 52%);background-size:100% 230%;background-position:0 0;-webkit-background-clip:text;background-clip:text;opacity:.35;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;pointer-events:none}
.tag{position:absolute;right:0;bottom:0;font-size:13px;color:var(--mute);z-index:9}
.step .n{color:var(--rust)}
@media (max-width:899px){
 .visual{height:100%;min-height:0;max-width:none}
 .rig{width:56%;left:24%;bottom:10%}
 .pouch{width:21%}
 .sealer{width:64%}
 .shelf{width:50%;bottom:30%;right:-8%}
 .gauge{width:28%}
 .g-ps{top:auto;bottom:1%;right:auto;left:0}
 .bignum{font-size:40vw;top:22%}
}
.static .pouch,.static .shelf{opacity:1}.static .g-ps{opacity:1}.static .mouth{opacity:0}
.static .stage{height:auto;min-height:100svh}.static .visual{height:560px}.static .bignum{opacity:.8;background-position:0 100%}