/* وودي v2 — الأقسام */

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:transform .8s cubic-bezier(.7,0,.2,1);animation:ldsafe .01s linear 4s forwards}
.loader.done{transform:translateY(-101%)}
.loader.gone{display:none}
.loader .lm{width:112px;aspect-ratio:550/355;background:url(../img/mark.webp) center/contain no-repeat;clip-path:polygon(0 100%,0 100%,0 100%);animation:ldmark .9s var(--ease) .1s forwards}
.loader .word{width:150px;--c:var(--peach);opacity:0;animation:ldword .5s ease .65s forwards}
@keyframes ldmark{to{clip-path:polygon(0 100%,0 -130%,230% 100%)}}
@keyframes ldword{to{opacity:1}}
@keyframes ldsafe{to{visibility:hidden}}

/* ---------- nav ---------- */
.nav{position:fixed;top:12px;inset-inline:0;z-index:80;pointer-events:none}
.nav .bar{pointer-events:auto;position:relative;width:calc(100% - 24px);max-width:1240px;margin-inline:auto;height:58px;border-radius:19px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-inline:18px 9px;overflow:hidden;
  background:rgba(255,245,236,.88);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 0 0 1px rgba(43,39,36,.07),0 18px 30px -22px rgba(43,39,36,.55);transition:background .4s,color .4s,box-shadow .4s}
.nav.dark .bar{background:rgba(24,21,19,.72);color:var(--cream);box-shadow:0 0 0 1px var(--lineD)}
.nav.dark .word{--c:var(--peach)}
.nav .links{display:flex;gap:4px;font-size:.9rem;font-weight:500}
.nav .links a{padding:.5em .85em;border-radius:10px;opacity:.75;transition:opacity .2s,background .2s}
.nav .links a:hover,.nav .links a.cur{opacity:1;background:rgba(242,160,102,.18)}
.nav .act{display:flex;align-items:center;gap:8px}
.nav .prog{position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(var(--sp,0));transform-origin:right}
.menu{display:none;width:40px;height:40px;border-radius:12px;border:0;background:rgba(242,160,102,.16);position:relative}
.menu i{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:currentColor;top:15px;transition:transform .3s,top .3s}
.menu i+i{top:23px}
.nav.open .menu i{top:19px;transform:rotate(45deg)}.nav.open .menu i+i{transform:rotate(-45deg)}

/* ---------- the dark room (hero) ---------- */
.room{position:relative;overflow:hidden;background:#0b0908;color:var(--cream);transition:background 1.4s ease}
.room .slats{position:absolute;inset:0;background:url(../img/slats.webp) left center/cover no-repeat;opacity:.05;transition:opacity 1.8s ease .2s}
.room .slats:after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#14110f 0%,rgba(20,17,15,.92) 40%,rgba(20,17,15,.3) 72%,rgba(20,17,15,.45) 100%)}
.room.on{background:var(--ink)}.room.on .slats{opacity:.95}
.room .wrap{z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:30px;align-items:center;min-height:min(860px,var(--vh));padding-block:96px 56px}
.room .say{position:relative;z-index:6}
.room .eyebrow{color:var(--orange)}
.room h1{font-size:3.7rem;margin:12px 0 14px}
.room .lead{font-size:1.08rem;color:rgba(255,245,236,.72);max-width:29em;min-height:3.5em}
.go{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;align-items:stretch}
.go .field{flex:1 1 250px;max-width:330px}
.go .btn{min-height:58px}
.pw{width:1.05em;height:1.05em;border:2.5px solid currentColor;border-radius:50%;border-top-color:transparent;position:relative;display:inline-block;flex:none}
.pw:after{content:"";position:absolute;left:50%;top:-.34em;width:2.5px;height:.6em;margin-left:-1.25px;background:currentColor;border-radius:2px}
.room:not(.on) #gobtn{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,160,102,.55)}50%{box-shadow:0 0 0 16px rgba(242,160,102,0)}}
.after{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
[hidden]{display:none!important}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;padding-top:20px;border-top:1px solid var(--lineD);font-size:.84rem;color:rgba(255,245,236,.62);list-style:none}
.facts li{display:flex;align-items:center;gap:.6em;white-space:nowrap}
.facts li:before{content:"";width:.5em;height:.5em;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.scene{position:relative;height:640px;perspective:1400px;scroll-margin-top:76px}
.scene .halo{position:absolute;left:50%;top:50%;width:980px;height:980px;margin:-490px 0 0 -490px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,196,128,.5),rgba(242,160,102,.16) 46%,transparent 72%);opacity:0;transform:scale(.35);transition:opacity 1.2s ease .3s,transform 1.8s var(--ease) .3s}
.room.on .halo{opacity:1;transform:none}
.scene .planks{--t:150px;--a:#F2A066;--b:#D98A55;--c:#B97245;left:50%;top:50%;margin:-256px 0 0 -300px;opacity:.04;transition:opacity 1.2s ease .5s}
.room.on .planks{opacity:.5}
.scene .mirror{--w:214px;position:absolute;left:50%;top:50%;margin:-214px 0 0 -107px;transform:rotateY(-16deg) rotateX(4deg) rotateZ(1.5deg);transform-style:preserve-3d;z-index:3;transition:transform 1s var(--ease)}
.scene .mirror .body{box-shadow:10px 0 0 -1px #e9e4de,11px 2px 0 0 #cfc8c0,26px 30px 40px -8px rgba(0,0,0,.6)}
.scene .mirror.cam{transform:none}
.scene .mirror video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:none}
.scene .mirror.cam video{display:block}
.room .o3{opacity:0;transition:opacity .7s ease var(--in,.5s)}
.room .o3 img{scale:.6;transition:scale .9s cubic-bezier(.2,1.5,.3,1) var(--in,.5s)}
.room.on .o3{opacity:1}.room.on .o3 img{scale:1}
.room.camon .o3{opacity:0;transition-delay:0s}
.scene .hand{width:44%;right:-2%;bottom:1%;--s:8s;--r0:-2deg;--r1:2deg;z-index:4}
.scene .hash{width:27%;left:1%;top:5%;--s:6.5s;--r0:-7deg;--r1:-1deg}
.scene .mega{width:22%;right:6%;top:2%;--s:7.5s;--dl:-2s;--r0:4deg;--r1:10deg}
.scene .heart{width:16%;left:9%;bottom:15%;--s:5.5s;--dl:-1s;z-index:4}
.scene .cap{width:17%;left:33%;top:-3%;--s:6s;--dl:-3s;--r0:6deg;--r1:12deg}
.cue{position:absolute;z-index:3;left:50%;bottom:16px;width:2px;height:38px;margin-left:-1px;background:rgba(248,210,182,.2);overflow:hidden;border-radius:2px}
.cue:after{content:"";position:absolute;inset:0;background:var(--orange);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- shared section bits ---------- */
.sec{padding:96px 0;position:relative}
.shead{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:38px;flex-wrap:wrap}
.shead h2{margin-top:8px}
.shead p{color:var(--mute);max-width:30em}
.on-dark .shead p{color:rgba(255,245,236,.65)}
.on-dark .eyebrow{color:var(--orange)}

/* ---------- story (pinned) ---------- */
.story{position:relative;background:var(--sand);height:calc(var(--vh)*4.4)}
.st-sticky{position:sticky;top:0;height:var(--vh);display:flex;align-items:center;overflow:hidden;padding-top:60px}
.st-grid{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
.st-text h2{margin:8px 0 8px}
.st-text>p{color:var(--mute);max-width:26em}
.st-rail{height:3px;border-radius:2px;background:var(--line);margin:22px 0 18px;overflow:hidden;max-width:440px}
.st-rail i{display:block;height:100%;background:var(--ember);transform-origin:right;transform:scaleX(var(--p,0))}
.st-steps{list-style:none;display:grid;gap:6px;max-width:470px}
.st-steps li{display:grid;grid-template-columns:42px 1fr;gap:4px 16px;padding:12px 16px;border-radius:18px;opacity:.42;transition:opacity .4s,background .4s,box-shadow .4s}
.st-steps li b{grid-row:1/3;align-self:start;width:42px;height:42px;border-radius:13px;background:var(--wood);color:var(--orange);display:grid;place-items:center;font-family:"MO";font-weight:700;font-size:.9rem;transition:background .4s,color .4s}
.st-steps h3{font-size:1.3rem;line-height:42px}
.st-steps p{grid-column:2;font-size:.92rem;color:var(--mute);max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.st-steps li.on{opacity:1;background:#fff;box-shadow:0 20px 34px -26px rgba(43,39,36,.5)}
.st-steps li.on b{background:var(--orange);color:var(--wood)}
.st-steps li.on p{max-height:6em}
.st-box{width:calc(560px*var(--sc,1));height:calc(600px*var(--sc,1));direction:ltr;flex:none}
.st-stage{position:relative;width:560px;height:600px;transform:scale(var(--sc,1));transform-origin:top left;direction:ltr;border-radius:36px;background:var(--ink) url(../img/slats.webp) left center/cover;overflow:hidden;box-shadow:0 40px 60px -34px rgba(43,39,36,.8)}
.st-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 45%,rgba(255,190,120,.22),rgba(20,17,15,.72) 78%)}
.st-mirror{position:absolute;left:50%;top:50%;margin:-190px 0 0 -95px;transition:transform .9s var(--ease),opacity .6s}
.st-mirror .mirror{--w:190px}
.st-vf{position:absolute;inset:70px 130px;opacity:0;transition:opacity .4s;
  background:linear-gradient(#fff,#fff) 0 0/34px 3px,linear-gradient(#fff,#fff) 0 0/3px 34px,linear-gradient(#fff,#fff) 100% 0/34px 3px,linear-gradient(#fff,#fff) 100% 0/3px 34px,linear-gradient(#fff,#fff) 0 100%/34px 3px,linear-gradient(#fff,#fff) 0 100%/3px 34px,linear-gradient(#fff,#fff) 100% 100%/34px 3px,linear-gradient(#fff,#fff) 100% 100%/3px 34px;background-repeat:no-repeat}
.st-shut{position:absolute;left:50%;bottom:22px;width:58px;height:58px;margin-left:-29px;border-radius:50%;border:4px solid #fff;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s var(--ease)}
.st-shut:after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.st-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9}
.st-flash.go{animation:flash .55s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
.st-phone{position:absolute;left:50%;top:50%;margin:-196px 0 0 -110px;opacity:0;transform:translateY(60%) rotate(8deg);transition:transform .9s var(--ease),opacity .5s}
.st-phone .tagm{transform:translateX(-50%) rotate(-5deg) scale(0);transition:transform .6s cubic-bezier(.2,1.6,.3,1) .55s}
.st-heart{position:absolute;width:64px;left:var(--x);bottom:60px;opacity:0;z-index:5}
.st-heart img{width:100%}
.st-stand{position:absolute;left:38px;bottom:54px;transform:translateY(50px) scale(.78);transform-origin:bottom left;opacity:0;transition:transform .9s var(--ease) .1s,opacity .5s .1s;display:flex;flex-direction:column;align-items:center}
.st-stand .qbox:after{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(rgba(242,160,102,0),rgba(242,160,102,.65));opacity:0}
.st-notif{position:absolute;top:22px;left:50%;width:330px;margin-left:-165px;transform:translateY(-150%);background:#fff;color:var(--wood);border-radius:18px;padding:12px 14px;display:flex;gap:12px;align-items:center;direction:rtl;box-shadow:0 20px 34px -14px rgba(0,0,0,.6);transition:transform .7s cubic-bezier(.2,1.3,.3,1) .9s;z-index:8}
.st-notif i{flex:none;width:40px;height:40px;border-radius:12px;background:var(--wood3);display:grid;place-items:center}
.st-notif i .mark{width:24px}
.st-notif b{display:block;font-size:.9rem}.st-notif span{font-size:.8rem;color:var(--mute)}
.st-notif .acc{font-family:"MO";font-weight:700;color:var(--ember)}
.story[data-step="2"] .st-vf{opacity:1}
.story[data-step="2"] .st-shut{opacity:1;transform:none}
.story[data-step="3"] .st-mirror{transform:translateX(150px) scale(.72);opacity:.35}
.story[data-step="3"] .st-phone,.story[data-step="4"] .st-phone{opacity:1;transform:none}
.story[data-step="3"] .st-phone .tagm,.story[data-step="4"] .st-phone .tagm{transform:translateX(-50%) rotate(-5deg) scale(1)}
.story[data-step="3"] .st-heart{animation:rise 2.6s ease-in var(--hd,0s) infinite}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-360px) scale(1.1) rotate(var(--hr,10deg))}}
.story[data-step="4"] .st-mirror{transform:translateX(150px) scale(.72);opacity:0}
.story[data-step="4"] .st-phone{transform:translateX(128px) scale(.86)}
.story[data-step="4"] .st-stand{opacity:1;transform:scale(.78)}
.story[data-step="4"] .st-stand .qbox:after{animation:scan 1.9s ease-in-out .6s infinite}
@keyframes scan{0%{opacity:0;transform:translateY(-100%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(460%)}}
.story[data-step="4"] .st-notif{transform:none}

/* ---------- studio ---------- */
.studio{position:relative;background:var(--ink);color:var(--cream);padding:96px 0 90px;overflow:hidden}
.studio .bg{position:absolute;inset:0;background:url(../img/slats.webp) left center/cover no-repeat}
.studio .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,var(--ink) 0%,rgba(20,17,15,.95) 40%,rgba(20,17,15,.4) 72%,rgba(20,17,15,.55) 100%)}
.studio .wrap{z-index:2}
.tabs{display:inline-flex;background:rgba(255,245,236,.06);border:1px solid var(--lineD);border-radius:16px;padding:5px;gap:4px}
.tab{border:0;background:none;color:var(--cream);opacity:.7;padding:.6em 1.25em;border-radius:12px;font-weight:600;font-size:.94rem;white-space:nowrap;transition:background .25s,color .25s,opacity .25s}
.tab:hover{opacity:1}
.tab[aria-selected=true]{background:var(--orange);color:var(--wood);opacity:1}
.tp{display:none;grid-template-columns:minmax(0,1fr) 470px;gap:40px;align-items:center;min-height:600px}
.tp.on{display:grid;animation:tpin .5s var(--ease)}
@keyframes tpin{from{opacity:0;transform:translateY(14px)}}
.tp h3{font-size:2rem;margin-bottom:8px}
.tp .lead{color:rgba(255,245,236,.7);max-width:30em;margin-bottom:22px}
.stagebox{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-width:0;min-height:600px;perspective:1500px}
.stagebox .mirror{--bw:260px;--w:calc(var(--bw)*var(--k,1));transform:rotateY(var(--ry,0deg));transition:height .5s var(--ease),width .5s var(--ease)}
.stagebox .mirror .body{box-shadow:calc(var(--ry,0deg)/-2deg*1px) 0 0 0 #d9d2ca}
.dim{position:absolute;left:0;bottom:6px;font-family:"MO";font-weight:500;font-size:.78rem;color:rgba(255,245,236,.5);direction:ltr}
.board{position:relative;width:100%;aspect-ratio:4/3.5;border-radius:var(--r-xl);overflow:hidden;background:url(../img/wall.webp) center 40%/cover;display:grid;place-items:center;padding:28px;box-shadow:0 40px 60px -34px #000}
.board:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,15,.05),rgba(20,17,15,.4))}
.tagprev{position:relative;display:inline-flex;flex-direction:column;align-items:center;transform:rotate(-3deg);max-width:100%}
.tagprev .t{font-family:"AX";font-weight:800;font-size:var(--fs,3.4rem);line-height:1.5;color:var(--k,#F2A066);white-space:nowrap;-webkit-text-stroke:13px #fff;paint-order:stroke fill;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25)) drop-shadow(0 14px 14px rgba(0,0,0,.4));padding:0 .3em}
.tagprev .y{font-family:"MO";font-weight:700;font-size:1.05rem;background:var(--wood);color:#fff;border:4px solid #fff;border-radius:999px;padding:.12em 1em;margin-top:-.55em;position:relative;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35))}
.tagprev .capi{position:absolute;width:70px;top:-26px;right:-10px;transform:rotate(14deg);filter:drop-shadow(0 8px 8px rgba(0,0,0,.4));z-index:2}
.board .note{position:absolute;inset-inline:0;bottom:12px;text-align:center;font-size:.72rem;color:rgba(255,255,255,.75)}
.swatch{display:flex;gap:10px}
.swatch button{width:40px;height:40px;border-radius:50%;border:3px solid var(--ink);box-shadow:0 0 0 1.5px rgba(248,210,182,.3);background:var(--k)}
.swatch button[aria-pressed=true]{box-shadow:0 0 0 2.5px var(--orange)}
.row2{display:grid;grid-template-columns:1fr 130px;gap:10px;max-width:460px}
.plats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:460px}
.plat{display:flex;align-items:center;gap:8px;border:1.5px solid rgba(248,210,182,.25);background:rgba(28,25,23,.5);color:var(--cream);border-radius:13px;padding:9px 12px;font-size:.88rem;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.plat svg{width:20px;height:20px;flex:none}
.plat[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:var(--wood)}
.standwrap{display:flex;flex-direction:column;align-items:center}

/* ---------- tools (horizontal) ---------- */
.tools{position:relative;background:var(--cream);height:calc(var(--vh)*4.4)}
.tl-sticky{position:sticky;top:0;height:var(--vh);display:flex;flex-direction:column;justify-content:center;gap:22px;overflow:hidden;padding-top:64px}
.tl-head{display:flex;justify-content:space-between;align-items:end;gap:20px}
.tl-head h2{margin-top:6px}
.tl-count{font-family:"MO";font-weight:700;font-size:.9rem;color:var(--mute);direction:ltr;white-space:nowrap}
.tl-count b{font-size:1.5rem;color:var(--wood)}
.tl-track{display:flex;gap:24px;padding-inline:max(clamp(18px,4vw,40px),calc((100vw - 1240px)/2 + 40px));will-change:transform}
.tl-panel{flex:none;width:min(1040px,82vw);height:min(620px,calc(var(--vh) - 250px));border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:46% 1fr;background:var(--wood);color:var(--cream);box-shadow:0 30px 50px -36px rgba(43,39,36,.7)}
.tl-panel .ph{position:relative;overflow:hidden;background:var(--wood3)}
.tl-panel .ph img{position:absolute;inset:0 -6%;width:112%;max-width:none;height:100%;object-fit:cover;transform:translateX(calc(var(--pp,0)*26px))}
.tl-panel .ph.cut{background:linear-gradient(160deg,#F8D2B6,#FFE9D8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.tl-panel .ph.cut img{position:static;width:76%;height:auto;transform:none;filter:drop-shadow(0 16px 18px rgba(43,39,36,.28))}
.tl-panel .ph.cut img.capi{position:absolute;width:20%;top:7%;left:9%;transform:rotate(-14deg)}
.tl-panel .tx{padding:40px 44px;display:flex;flex-direction:column;justify-content:center;gap:13px}
.tl-num{font-family:"MO";font-weight:700;font-size:.8rem;color:var(--orange);direction:ltr;text-align:right}
.tl-job{font-size:.82rem;font-weight:700;color:var(--orange)}
.tl-panel h3{font-size:2rem;margin-top:-6px}
.tl-panel p{font-size:.98rem;color:rgba(255,245,236,.72);max-width:28em}
.tl-panel .meta{font-size:.84rem;color:rgba(255,245,236,.55)}
.tl-panel .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.tl-panel.lt{background:#fff;color:var(--wood)}
.tl-panel.lt p{color:var(--mute)}.tl-panel.lt .meta{color:var(--mute)}.tl-panel.lt .tl-num,.tl-panel.lt .tl-job{color:#B5461A}
.tl-panel.pk{background:var(--orange);color:var(--wood)}
.tl-panel.pk p{color:rgba(43,39,36,.8)}.tl-panel.pk .meta{color:rgba(43,39,36,.7)}.tl-panel.pk .tl-num,.tl-panel.pk .tl-job{color:var(--wood)}
.tl-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tl-price b{font-family:"TS";font-weight:900;font-size:3.4rem;line-height:1.1}
.tl-price s{opacity:.6}
.tl-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tl-list li{background:rgba(43,39,36,.1);border-radius:12px;padding:9px 13px;font-size:.9rem;display:flex;justify-content:space-between;gap:8px;align-items:center}
.tl-list em{font-style:normal;font-size:.72rem;font-weight:700;background:var(--wood);color:var(--orange);padding:.2em .7em;border-radius:6px;white-space:nowrap}
.tl-bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.tl-bar i{display:block;height:100%;background:var(--ember);transform-origin:right;transform:scaleX(var(--p,0))}
.tl-dots{display:none;justify-content:center;gap:7px}
.tl-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,width .3s}
.tl-dots i.on{background:var(--ember);width:22px;border-radius:4px}

/* ---------- reels ---------- */
.reels{background:var(--wood3);color:var(--cream);overflow:hidden}
.rl-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.reel{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:0;padding:0;background:#000 center/cover;color:#fff;transition:transform .45s var(--ease),box-shadow .45s}
.reel:nth-child(even){margin-top:34px}
.reel video{width:100%;height:100%;object-fit:cover}
.reel:hover{transform:translateY(-8px);box-shadow:0 30px 40px -20px #000}
.reel .cap{position:absolute;inset-inline:0;bottom:0;padding:44px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.82));display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;font-size:.92rem;text-align:start}
.reel .play{flex:none;width:36px;height:36px;border-radius:50%;background:var(--orange);position:relative}
.reel .play:after{content:"";position:absolute;left:14px;top:11px;border:7px solid transparent;border-left:11px solid var(--wood);border-right:0}
.rdlg{border:0;background:transparent;padding:0;max-width:none;max-height:none;overflow:visible;margin:auto}
.rdlg::backdrop{background:rgba(10,8,7,.88)}
.rdlg .box{position:relative;height:min(86vh,820px);aspect-ratio:9/16;max-width:92vw;border-radius:24px;overflow:hidden;background:#000}
.rdlg video{width:100%;height:100%;object-fit:contain}
.rdlg .x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:1.3rem;line-height:1;z-index:2}

/* ---------- workshop ---------- */
.wshop{background:var(--cream);overflow:hidden}
.wshop .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.wshop h2{margin:8px 0 12px}
.wshop .lead{color:var(--mute);font-size:1.02rem;max-width:30em}
.wshop .dio img{width:100%;max-width:560px;margin-inline:auto;filter:drop-shadow(0 40px 34px rgba(43,39,36,.2))}
.made{list-style:none;margin-top:26px;display:grid;gap:12px;position:relative}
.made:before,.made:after{content:"";position:absolute;inset-inline-start:26px;top:26px;bottom:26px;width:2px;background:var(--line)}
.made:after{background:var(--orange);transform-origin:top;transform:scaleY(var(--p,0))}
.made li{position:relative;z-index:1;display:grid;grid-template-columns:54px 1fr;gap:16px;align-items:center}
.made li b{width:54px;height:54px;border-radius:16px;background:var(--wood);color:var(--orange);display:grid;place-items:center;font-family:"MO";font-weight:700}
.made li span{background:#fff;border-radius:16px;padding:12px 18px;box-shadow:0 1px 0 var(--line);font-size:.95rem}
.made li strong{display:block;font-weight:700}
.made li small{color:var(--mute);font-size:.85rem}

/* ---------- faq ---------- */
.faq{background:var(--sand)}
.fq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.fq-side{position:sticky;top:110px}
.fq-side h2{margin:8px 0 10px}.fq-side p{color:var(--mute);margin-bottom:22px;max-width:24em}
.faq details{background:#fff;border-radius:18px;margin-bottom:10px;box-shadow:0 1px 0 var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:17px 22px;font-weight:700;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:none;width:10px;height:10px;border:solid var(--ember);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-top:-5px;transition:transform .3s,margin .3s}
.faq details[open] summary:after{transform:rotate(-135deg);margin-top:5px}
.faq details p{padding:0 22px 19px;color:var(--mute);font-size:.95rem;max-width:44em}

/* ---------- final ---------- */
.final{text-align:center;padding:100px 0;background:var(--peach);position:relative;overflow:hidden}
.final h2{font-size:2.6rem;margin-bottom:8px}
.final p{color:var(--wood2);margin-bottom:26px}
.final .o3.a{width:150px;left:7%;top:16%;--s:7s}
.final .o3.b{width:120px;right:9%;bottom:12%;--s:6s;--dl:-2s}
.final .o3.c{width:90px;right:21%;top:12%;--s:8s;--dl:-1s}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  h2{font-size:2.1rem}
  .room h1{font-size:3.1rem}.scene{height:560px}.scene .mirror{--w:190px;margin:-190px 0 0 -95px}
  .nav .links a{padding:.5em .6em}
  .st-grid{gap:30px}
  .tp{grid-template-columns:minmax(0,1fr) 380px}.stagebox .mirror{--bw:215px}
  .rl-row{gap:12px}.reel .cap{font-size:.8rem}
}
@media(max-width:900px){
  .sec{padding:64px 0}h2{font-size:1.9rem}
  .nav .links{position:absolute;display:none}
  .menu{display:block}
  .nav .bar{overflow:visible}
  .nav.open .links{display:grid;position:absolute;top:66px;inset-inline:0;background:var(--wood3);color:var(--cream);border-radius:18px;padding:10px;gap:2px;box-shadow:0 20px 40px -14px rgba(0,0,0,.6)}
  .nav.open .links a{padding:.85em 1em;font-size:1rem;opacity:1}
  .nav .prog{border-radius:0 0 19px 19px;inset-inline:14px}
  .room .wrap{grid-template-columns:1fr;gap:6px;min-height:0;padding-block:78px 44px}
  .room h1{font-size:2.6rem}.room .lead{min-height:0}
  .scene{order:-1;height:420px;max-width:480px;width:100%;margin-inline:auto}.scene .mirror{--w:150px;margin:-150px 0 0 -75px}
  .scene .planks{--t:110px;margin:-188px 0 0 -220px}
  .room .slats:after{background:linear-gradient(180deg,rgba(20,17,15,.4),rgba(20,17,15,.75) 45%,var(--ink) 70%)}.room .slats{background-size:auto 70%;background-position:left top}
  .cue{display:none}
  .story{height:calc(var(--vh)*4)}
  .st-sticky{align-items:flex-start;padding-top:82px}
  .st-grid{grid-template-columns:1fr;gap:14px;justify-items:center}
  .st-text{order:2;width:100%}.st-text>.eyebrow,.st-text h2,.st-text>p{display:none}
  .st-rail{margin:4px 0 10px;max-width:none}
  .st-steps{max-width:none}.st-steps li{display:none}.st-steps li.on{display:grid}
  .st-top{display:block!important;width:100%}
  .studio{padding:64px 0}
  .tp,.tp.on{grid-template-columns:minmax(0,1fr);min-height:0;gap:8px}
  .stagebox{order:-1;min-height:0;padding:30px 0 26px}.stagebox .mirror{--bw:150px}
  .tp .lead{display:none}.tp h3{font-size:1.6rem}
  .field,.row2,.plats{max-width:none}
  .studio .bg{background-size:auto 46%;background-position:left 150px}
  .studio .bg:after{background:linear-gradient(180deg,var(--ink) 0,rgba(20,17,15,.5) 16%,rgba(20,17,15,.6) 34%,var(--ink) 52%)}
  .tools{height:auto;padding:64px 0}
  .tl-sticky{position:static;height:auto;padding-top:0;overflow:visible;gap:18px}
  .tl-track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding-inline:18px;gap:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tl-track::-webkit-scrollbar{display:none}
  .tl-panel{width:86vw;height:auto;grid-template-columns:1fr;scroll-snap-align:center}
  .tl-panel .ph{aspect-ratio:1/.92}.tl-panel .ph img{transform:none;inset:0;width:100%}
  .tl-panel .tx{padding:24px 22px 26px}.tl-panel h3{font-size:1.6rem}.tl-price b{font-size:2.8rem}
  .tl-bar,.tl-count{display:none}.tl-dots{display:flex}
  .rl-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-18px;padding-inline:18px;scrollbar-width:none}
  .rl-row::-webkit-scrollbar{display:none}
  .reel{flex:none;width:56vw;scroll-snap-align:center}.reel:nth-child(even){margin-top:0}
  .wshop .wrap{grid-template-columns:1fr;gap:26px}.wshop .dio{order:-1}
  .fq-grid{grid-template-columns:1fr;gap:26px}.fq-side{position:static}
  .fab{width:50px;min-height:50px;padding:0;border-radius:50%;font-size:0;gap:0}.fab svg{width:23px;height:23px}
  .final{padding:72px 0}.final h2{font-size:2rem}
  .final .o3.a{width:96px;left:-4%;top:5%}.final .o3.b{width:84px;right:-2%;bottom:4%}.final .o3.c{display:none}
}
@media(max-width:560px){
  .room h1{font-size:2.3rem;margin:6px 0 10px}.room .lead{font-size:1rem}
  .go{margin-top:16px}.go .btn,.after .btn{flex:1 1 100%}.go .field{max-width:none;flex-basis:100%}
  .scene{height:318px}.scene .mirror{--w:128px;margin:-128px 0 0 -64px}.scene .planks{--t:92px;margin:-157px 0 0 -184px}
  .facts{margin-top:20px;padding-top:14px;gap:6px 16px;font-size:.78rem}
  .tabs{display:flex;width:100%}.tab{flex:1;padding:.6em .4em}
  .chip{flex:1 1 30%;min-width:0;padding:9px 10px}.chip b{font-size:1.2rem}.total .btn{flex:1 1 100%}.total .sum b{font-size:2.3rem}
  .plat{padding:9px 8px;font-size:.8rem;gap:6px}
  .tagprev .t{-webkit-text-stroke-width:10px}
  .tl-list{grid-template-columns:1fr}
  .made:before,.made:after{inset-inline-start:22px}.made li{grid-template-columns:46px 1fr;gap:12px}.made li b{width:46px;height:46px}
}
.st-top{display:none}
.st-top h2{font-size:1.5rem;margin-top:2px}
@media(prefers-reduced-motion:reduce){.loader{display:none}.cue:after,.room:not(.on) #gobtn,.st-flash.go{animation:none}}
html.shot .room .o3,html.shot .halo{transition:none!important}

/* ===== carried over: what + footer ===== */
.what{background:var(--cream);overflow:hidden}
.what .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;align-items:stretch}
.wcard{position:relative;background:var(--wood);color:var(--cream);border-radius:30px;padding:44px 44px 40px;display:flex;flex-direction:column;overflow:hidden}
.wcard .eyebrow{color:var(--orange)}
.wcard h2{font-size:2.4rem;margin:10px 0 12px}
.wcard>p{font-size:1.05rem;color:rgba(255,245,236,.75);max-width:27em}
.vs{margin-top:auto;padding-top:34px;display:grid;gap:18px}
.vs .row{display:grid;grid-template-columns:7.2em 1fr;gap:6px 14px;align-items:center}
.vs span{font-size:.9rem;font-weight:600;color:rgba(255,245,236,.7);white-space:nowrap}
.vs .w span{color:var(--orange)}
.vs .track{position:relative;height:14px;border-radius:7px;background:rgba(255,245,236,.08);overflow:hidden}
.vs .track i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:7px;width:0;transition:width 1.4s cubic-bezier(.2,.7,.2,1) .35s}
.vs .ad{background:rgba(255,245,236,.38)}
.vs .pc{background:linear-gradient(270deg,#FFB375,#F2A066);box-shadow:0 0 18px rgba(242,160,102,.7)}
.wcard.in .ad{width:34%}.wcard.in .pc{width:100%}
.vs em{grid-column:2;font-style:normal;font-size:.8rem;color:rgba(255,245,236,.5)}
.vs .w em{color:var(--peach)}
.wlist{display:grid;gap:14px}
.wi{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:center;background:#fff;border-radius:24px;padding:18px 24px;box-shadow:0 1px 0 var(--line),0 20px 34px -28px rgba(43,39,36,.4)}
.wi img{width:104px;filter:drop-shadow(0 12px 12px rgba(43,39,36,.2))}
.wi b{font-family:"MO";font-weight:700;font-size:.74rem;color:var(--ember)}
.wi h3{font-size:1.5rem;line-height:1.45}
.wi p{font-size:.93rem;color:var(--mute);line-height:1.65}

@media(max-width:900px){.what .wrap{grid-template-columns:1fr}.wcard{padding:30px 24px}.wcard h2{font-size:1.9rem}.vs{padding-top:26px}}
@media(max-width:560px){.wi{grid-template-columns:76px 1fr;gap:14px;padding:16px 18px}.wi img{width:76px}.wi h3{font-size:1.3rem}.vs .row{grid-template-columns:1fr}.vs em{grid-column:1}}
/* footer: tiles + family + lit wordmark */
.foot2{position:relative;overflow:hidden;background:#100d0c;color:var(--cream);padding:60px 0 0}
.foot2 .planks{--t:230px;--a:rgba(255,179,117,.07);--b:rgba(255,206,166,.05);--c:rgba(255,216,183,.035);inset-inline-start:-240px;top:-150px}
.ftiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ftl{position:relative;display:flex;flex-direction:column;gap:1px;min-height:0;padding:16px 20px;border-radius:18px;background:rgba(255,245,236,.05);border:1px solid rgba(248,210,182,.14);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s}
.ftl:hover{transform:translateY(-3px);background:rgba(255,245,236,.09);border-color:rgba(248,210,182,.4)}
.ftl small{font-size:.72rem;font-weight:600;color:var(--orange)}
.ftl b{font-family:"MO";font-weight:700;font-size:1.2rem;line-height:1.6;white-space:nowrap}
.ftl b.ltr{display:block;text-align:right}.ftl b.sm{font-size:1.05rem;line-height:1.8}
.ftl b.ar{font-family:"TS",serif;font-weight:900;font-size:1.25rem;line-height:1.5}
.ftl span{margin-top:2px;font-size:.8rem;color:rgba(255,245,236,.65)}
.ftl .go2{position:absolute;inset-inline-end:20px;top:50%;margin-top:-16px;width:32px;height:32px;border-radius:10px;background:rgba(242,160,102,.16);transform:rotate(45deg);transition:background .3s}
.ftl .go2:after{content:"";position:absolute;inset:11px;border:solid var(--orange);border-width:0 0 2px 2px;transform:translate(2px,-2px)}
.ftl:hover .go2{background:var(--orange)}.ftl:hover .go2:after{border-color:var(--wood)}
.ftl.wa{background:var(--orange);color:var(--wood);border-color:transparent}
.ftl.wa small{color:var(--wood);opacity:.75}.ftl.wa span{color:rgba(43,39,36,.8)}
.ftl.wa .go2{background:var(--wood)}.ftl.wa .go2:after{border-color:var(--orange)}
.ftl.wa:hover{background:var(--p1)}.ftl.wa:hover .go2{background:var(--wood)}.ftl.wa:hover .go2:after{border-color:var(--orange)}
.fam{position:relative;display:grid;grid-template-columns:auto 1fr 150px;gap:22px;align-items:center;margin-top:14px;padding:18px 22px;border-radius:18px;background:linear-gradient(100deg,#2B2724,#1f1b19);border:1px solid rgba(248,210,182,.14);overflow:hidden}
.lock{display:flex;align-items:center;direction:ltr;--t:3.2s}
.lock .lw{position:relative;width:60px;height:60px;border-radius:50%;background:var(--wood3);display:grid;place-items:center;box-shadow:0 0 0 1.5px rgba(248,210,182,.35);animation:lkw var(--t) ease-in-out infinite}
.lock .lw .mark{width:36px;animation:lkm var(--t) ease-in-out infinite}
.lock .ln{position:relative;width:46px;height:2px;background:repeating-linear-gradient(90deg,rgba(242,160,102,.75) 0 5px,transparent 5px 10px);background-size:10px 2px;animation:lkd .7s linear infinite}
.lock .ln:after{content:"";position:absolute;top:-4px;left:100%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#FFE3B0;box-shadow:0 0 10px 3px rgba(255,190,120,.9);animation:lkp var(--t) cubic-bezier(.5,0,.4,1) infinite}
.lock img{position:relative;width:60px;height:60px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(248,210,182,.35),0 12px 24px -8px #000;animation:lkg var(--t) ease-in-out infinite}
@keyframes lkd{to{background-position:-10px 0}}
@keyframes lkp{0%,12%{left:100%;opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1)}58%{left:0;opacity:1;transform:scale(1)}66%,100%{left:0;opacity:0;transform:scale(.4)}}
@keyframes lkg{0%,100%{box-shadow:0 0 0 1.5px rgba(248,210,182,.35),0 12px 24px -8px #000}10%{box-shadow:0 0 0 3px rgba(247,181,0,.75),0 0 22px 4px rgba(247,181,0,.45)}26%{box-shadow:0 0 0 1.5px rgba(248,210,182,.35),0 12px 24px -8px #000}}
@keyframes lkw{0%,54%,100%{box-shadow:0 0 0 1.5px rgba(248,210,182,.35)}66%{box-shadow:0 0 0 3px rgba(242,160,102,.9),0 0 26px 6px rgba(242,160,102,.55)}86%{box-shadow:0 0 0 1.5px rgba(248,210,182,.35)}}
@keyframes lkm{0%,56%,100%{transform:none}66%{transform:scale(1.16)}78%{transform:none}}
@media(prefers-reduced-motion:reduce){.lock .lw,.lock .lw .mark,.lock .ln,.lock .ln:after,.lock img{animation:none}.lock .ln:after{display:none}}
.ftx small{display:block;font-size:.8rem;font-weight:600;color:var(--orange);margin-bottom:2px}
.ftx strong{display:block;font-family:"TS",serif;font-weight:900;font-size:1.3rem;line-height:1.5}
.ftx p{font-size:.86rem;color:rgba(248,210,182,.72)}
.dio2{width:150px;margin:-22px 0 -42px;filter:drop-shadow(0 20px 20px rgba(0,0,0,.5))}
.giant{position:relative;max-width:360px;margin:36px auto 0;padding-inline:clamp(18px,4vw,40px);filter:drop-shadow(0 0 0 rgba(255,190,120,0));transition:filter 1.2s ease .4s}
.giant .word{width:100%;background:rgba(248,210,182,.07);transition:background 1s ease}
.giant.on{filter:drop-shadow(0 0 16px rgba(255,190,120,.5)) drop-shadow(0 0 50px rgba(242,160,102,.3))}
.giant.on .word{background:linear-gradient(180deg,#FFE9D2,#F8D2B6 45%,#F2A066);animation:lit .95s linear both}
.ftx strong a,.sig2 a{color:var(--orange);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;transition:color .2s}
.ftx strong a:hover,.sig2 a:hover{color:var(--cream)}
.sig2 a{color:var(--peach)}
.sig2{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:30px 0 26px;font-size:.8rem;color:rgba(248,210,182,.5)}
@media(prefers-reduced-motion:reduce){.giant.on .word{animation:none}}
@media(max-width:1100px){.fam{grid-template-columns:auto 1fr}.dio2{display:none}}
@media(max-width:900px){.foot2{padding-top:56px}.ftiles{grid-template-columns:1fr;gap:10px}.fam{grid-template-columns:1fr;gap:14px;padding:18px}.giant{margin-top:26px;max-width:220px}}