/* ==========================================================
   KRAFABLE — site styles
   Colours, fonts and every animation live in this one file.
   ========================================================== */

@font-face{font-family:'Satoshi';src:url(../fonts/Satoshi-Variable.woff2) format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(../fonts/PlayfairDisplay-Italic-latin.ttf) format('truetype');font-style:italic;font-weight:400 900;font-display:swap}
@font-face{font-family:'Amiri';src:url(../fonts/Amiri-Bold-Arabic.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --ground:#FBFAF7; --ink:#111111; --ink-2:#3A3A3C; --muted:#55555A; --muted-2:#6B6B70;
  --line:#E1DCD1; --line-2:#ECE8E0; --card:#FFFFFF; --sand:#F3F0E9; --stone:#EEEBE4;
  --gold:#A8803A; --gold-deep:#8A6420; --gold-light:#E9D3A0; --night:#0F0F0F; --wa:#1F7A4D;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.22,1,.36,1);
  --grain-light:url(../textures/grain-dark-30.png); --grain-dark:url(../textures/grain-light-30.png);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground) var(--grain-light);background-size:256px 256px;color:var(--ink);font-family:'Satoshi','Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--gold-deep)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.wrap.wide{max-width:1360px}
.serif{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-0.02em}
.eyebrow{margin:0;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.eyebrow.on-dark{color:#D9B56A}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.lock{overflow:hidden}
[hidden]{display:none !important}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:15px;font-weight:500;white-space:nowrap;transition:transform .35s var(--ease),background .3s ease,color .3s ease,border-color .3s ease}
.btn:hover{transform:translateY(-2px);background:#2A2A2A;color:#fff}
.btn:active{transform:translateY(0) scale(.98)}
.btn.sm{height:40px;padding:0 18px;font-size:14px}
.btn.lg{height:56px;padding:0 30px;font-size:16px}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:#EDE8DE;color:var(--ink)}
.btn.wa{background:var(--wa);border-color:var(--wa)}
.btn.wa:hover{background:#18633E;color:#fff}
.btn.block{width:100%}
.btn svg{flex:none}
.round{width:44px;height:44px;border-radius:50%;border:1px solid #1D1D1F;background:transparent;color:#1D1D1F;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background .25s ease,color .25s ease,transform .2s ease}
.round:hover{background:#1D1D1F;color:#fff}
.round:active{transform:scale(.92)}
.round.sm{width:40px;height:40px}
.round.on-dark{border-color:#fff;color:#fff}.round.on-dark:hover{background:#fff;color:var(--ink)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(251,250,247,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line-2);transition:box-shadow .4s ease}
.site-header.scrolled{box-shadow:0 10px 30px -24px rgba(40,30,10,.5)}
.hd-row{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:14px;color:var(--ink-2);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1);transform-origin:left}
.nav a.on{color:var(--ink);font-weight:600}
.hd-actions{display:flex;align-items:center;gap:6px}
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;border:0;background:transparent;align-items:center;justify-content:center;color:var(--ink)}
.menu-btn:hover{background:#EFECE5}
.menu-btn .bars{position:relative;width:20px;height:14px}
.menu-btn .bars i{position:absolute;left:0;right:0;height:1.6px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease),opacity .3s ease,top .45s var(--ease)}
.menu-btn .bars i:nth-child(1){top:0}.menu-btn .bars i:nth-child(2){top:6px}.menu-btn .bars i:nth-child(3){top:12px}
.menu-open .menu-btn .bars i:nth-child(1){top:6px;transform:rotate(45deg)}
.menu-open .menu-btn .bars i:nth-child(2){opacity:0}
.menu-open .menu-btn .bars i:nth-child(3){top:6px;transform:rotate(-45deg)}
.m-nav{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out);border-top:1px solid transparent}
.m-nav>div{overflow:hidden}
.menu-open .m-nav{grid-template-rows:1fr;border-top-color:var(--line-2)}
.m-nav .wrap{display:flex;flex-direction:column;padding-top:4px;padding-bottom:22px}
.mlink{display:block;padding:15px 0;border-bottom:1px solid var(--line-2);font-size:19px;font-weight:500;color:var(--ink);opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .5s var(--ease)}
.menu-open .mlink{opacity:1;transform:none}
.menu-open .mlink:nth-child(2){transition-delay:.03s}.menu-open .mlink:nth-child(3){transition-delay:.06s}.menu-open .mlink:nth-child(4){transition-delay:.09s}.menu-open .mlink:nth-child(5){transition-delay:.12s}.menu-open .mlink:nth-child(6){transition-delay:.15s}.menu-open .mlink:nth-child(7){transition-delay:.18s}
.mlink.on{color:var(--gold-deep)}
.m-nav .btn{margin-top:18px}

/* ---------- Footer ---------- */
.site-footer{background:var(--night) var(--grain-dark);background-size:256px 256px;color:#fff;padding:52px 0 26px}
.site-footer .wrap{display:flex;flex-direction:column;gap:28px}
.f-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.f-row+.f-row{padding-top:22px;border-top:1px solid #262626}
.f-links{display:flex;flex-wrap:wrap;gap:8px 26px}
.f-links a{color:#C7C7CC;font-size:14px}
.f-links a:hover{color:#fff}
.f-meta{font-size:13px;color:#8E8E93}
.f-meta a{color:#C7C7CC;white-space:nowrap}
.f-social{display:flex;gap:4px}
.f-social a{width:42px;height:42px;border-radius:999px;color:#C7C7CC;display:inline-flex;align-items:center;justify-content:center;transition:background .3s ease,color .3s ease}
.f-social a:hover{background:#1E1E1E;color:#fff}
.site-footer .logo img{height:28px}

/* ---------- Scroll reveal (only when JS is on) ---------- */
.js .reveal{opacity:0;transform:translate3d(0,42px,0);transition:opacity .9s ease,transform 1.1s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}
.rise{animation:rise 1.1s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}

/* ---------- Shared section type ---------- */
.sec-title{margin:0;font-size:56px;line-height:1.02;font-weight:600;letter-spacing:-0.04em}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.sec-head .eyebrow{margin-bottom:14px}
.lead{margin:0;font-size:17px;line-height:1.7;color:var(--muted)}
.ph{position:relative;overflow:hidden;background:var(--stone)}
.ph>img,.ph>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
a.ph:hover>img,.zoom:hover .ph>img{transform:scale(1.06)}
.arrow-ic{width:16px;height:16px}

/* ---------- Popups (estimate + quick view) ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:32px;background:rgba(12,12,12,.0);visibility:hidden;transition:background .45s ease,visibility 0s linear .45s}
.modal.open{visibility:visible;background:rgba(12,12,12,.82);transition:background .45s ease,visibility 0s}
.modal .sheet{opacity:0;transform:translate3d(0,22px,0) scale(.985);transition:opacity .4s ease,transform .6s var(--ease-out)}
.modal.open .sheet{opacity:1;transform:none}
.est-card{width:min(440px,100%);background:var(--ground);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:16px;max-height:100%;overflow:auto}
.est-card h3{margin:0;font-size:26px;line-height:1.1;font-weight:600;letter-spacing:-0.03em}
.est-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.est-head>div{display:flex;flex-direction:column;gap:6px}
.picked{display:none;align-items:center;gap:12px;padding:10px;border-radius:16px;background:var(--sand)}
.picked.on{display:flex}
.picked .ph{width:52px;height:52px;border-radius:10px;flex:none}
.picked small{display:block;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em}
.picked b{font-size:15px;font-weight:600}
.lbl{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field{width:100%;height:50px;border-radius:14px;border:1px solid #DAD6CD;background:#fff;color:var(--ink);font-size:16px;padding:0 16px;transition:border-color .25s ease,box-shadow .25s ease}
.field:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.08)}
textarea.field{height:96px;padding:14px 16px;resize:vertical}
.err{margin:0;font-size:13px;color:#A33A2B;min-height:0}
.err:empty{display:none}
.wa-fallback{display:none;margin:0;font-size:13px;color:var(--muted);text-align:center}
.wa-fallback.on{display:block}
.wa-fallback a{color:var(--wa);font-weight:600}
.fine{margin:0;font-size:12px;color:#8E8E93;text-align:center}

/* ==========================================================
   HOME
   ========================================================== */
.s-hero{padding:44px 0 96px;position:relative}
.bsm-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-bottom:40px}
.bsm-row{display:flex;align-items:center;gap:20px}
.bsm{margin:0;font-family:'Amiri',serif;font-size:52px;line-height:1.7;font-weight:700;display:flex;gap:.32em}
.bw{display:inline-block;animation:bw 1.3s var(--ease-out) both}
.bw:nth-child(1){animation-delay:.15s}.bw:nth-child(2){animation-delay:.4s}.bw:nth-child(3){animation-delay:.65s}.bw:nth-child(4){animation-delay:.9s}
@keyframes bw{from{opacity:0;transform:translate3d(0,18px,0) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.shine{display:inline-block;padding:.12em .06em;background:linear-gradient(100deg,var(--gold) 35%,#F1DFAE 50%,var(--gold) 65%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out 2.4s infinite}
@keyframes shine{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.orn{height:1px;width:96px;background:var(--gold);animation:orn 1.4s var(--ease-out) 1s both}
.orn.l{transform-origin:right center}.orn.r{transform-origin:left center}
@keyframes orn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bsm-sub{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);animation:fadein 1.2s ease 1.3s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* 3D hero ring (desktop) */
.h3d{position:relative;height:640px;margin-top:-8px}
.h3d-stage{position:absolute;left:-80px;right:-80px;top:0;height:560px;perspective:1700px;perspective-origin:50% 40%}
.h3d-glow{position:absolute;left:50%;top:40px;width:1100px;height:620px;margin-left:-550px;border-radius:50%;background:radial-gradient(closest-side,rgba(241,223,174,.34),rgba(241,223,174,0));pointer-events:none}
.h3d-group{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform;
  transform:rotateY(calc(var(--hx,0) * 13deg)) rotateX(calc(var(--hy,0) * -7deg)) translate3d(calc(var(--hx,0) * 16px),calc(var(--hy,0) * -6px),0)}
.h3d-floor{position:absolute;left:50%;top:500px;width:820px;height:80px;margin-left:-410px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,45,20,.22),rgba(60,45,20,0));pointer-events:none;will-change:transform;
  transform:translateX(calc(var(--hx,0) * -60px)) scaleX(calc(1 + var(--hxa,0) * .12))}
.c3d{position:absolute;left:-200px;top:-210px;width:400px;height:400px;border:0;padding:0;border-radius:26px;overflow:hidden;background:var(--stone);display:block;cursor:pointer;color:var(--ink);transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform 1.15s var(--ease-out),opacity 1.15s ease,filter 1.15s ease,box-shadow 1.15s ease;box-shadow:0 40px 80px -40px rgba(40,30,10,.45)}
.c3d img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c3d .gloss{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle at calc(50% + var(--hx,0) * 45%) calc(40% + var(--hy,0) * 45%),rgba(255,255,255,.8),rgba(255,255,255,0) 55%)}
.c3d .edge{position:absolute;inset:0;border-radius:26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none}
.c3d .lbl{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:10px;padding:7px 15px 7px 7px;border-radius:999px;background:rgba(255,255,255,.92);font-size:14px;font-weight:600;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .5s ease .3s,transform .6s var(--ease) .3s}
.c3d .lbl i{width:30px;height:30px;border-radius:999px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.c3d[data-slot="0"]{transform:translate3d(0,0,110px);opacity:1;z-index:7;box-shadow:0 60px 120px -40px rgba(40,30,10,.55)}
.c3d[data-slot="0"] .gloss,.c3d[data-slot="0"] .lbl{opacity:1;transform:none}
.c3d[data-slot="1"]{transform:translate3d(330px,8px,-120px) rotateY(-30deg) scale(.84);z-index:6;filter:saturate(.9) brightness(.97)}
.c3d[data-slot="2"]{transform:translate3d(575px,18px,-380px) rotateY(-46deg) scale(.7);opacity:.9;z-index:4;filter:saturate(.75) brightness(.93)}
.c3d[data-slot="3"]{transform:translate3d(170px,-26px,-600px) rotateY(-14deg) scale(.6);opacity:.45;z-index:2;filter:saturate(.6) brightness(.9)}
.c3d[data-slot="4"]{transform:translate3d(-170px,-26px,-600px) rotateY(14deg) scale(.6);opacity:.45;z-index:2;filter:saturate(.6) brightness(.9)}
.c3d[data-slot="5"]{transform:translate3d(-575px,18px,-380px) rotateY(46deg) scale(.7);opacity:.9;z-index:4;filter:saturate(.75) brightness(.93)}
.c3d[data-slot="6"]{transform:translate3d(-330px,8px,-120px) rotateY(30deg) scale(.84);z-index:6;filter:saturate(.9) brightness(.97)}
.c3d:not([data-slot="0"]):hover{filter:none}
.h3d-foot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.h3d-copy{display:flex;flex-direction:column;gap:12px;max-width:360px}
.h3d-copy .eyebrow{font-size:13px;letter-spacing:.14em}
.h3d-title{margin:0;font-size:44px;line-height:1.02;font-weight:600;letter-spacing:-0.04em;white-space:pre-line;min-height:2.04em}
.swap{transition:opacity .35s ease,transform .5s var(--ease)}
.swap.out{opacity:0;transform:translate3d(0,10px,0)}
.h3d-ctrl{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.h3d-ctrl .row{display:flex;gap:12px}
.h3d-ctrl .arrows{display:flex;gap:8px}
.h3d-hint{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;align-items:center;gap:8px;pointer-events:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

/* Hero slider (tablet + mobile) */
.hero-slider{display:none;position:relative;margin:0 -32px;aspect-ratio:4/3;overflow:hidden;background:var(--stone);touch-action:pan-y}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity 1.1s ease,transform 1.8s var(--ease-out)}
.slide.on{opacity:1;transform:none;z-index:1}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .pill{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;background:rgba(255,255,255,.9);font-size:14px;font-weight:600;color:var(--ink)}
.slide .pill i{width:30px;height:30px;border-radius:999px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.sl-count{position:absolute;top:18px;right:18px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(17,17,17,.72);color:#fff;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.sl-dots{position:absolute;left:0;right:0;bottom:16px;z-index:2;display:flex;justify-content:flex-end;gap:6px;padding:0 20px}
.sl-dots button{width:22px;height:3px;border:0;padding:0;border-radius:2px;background:rgba(255,255,255,.5);overflow:hidden;position:relative}
.sl-dots button.on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:dot var(--dur,5s) linear forwards}
@keyframes dot{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Categories bento */
.s-cat{padding:40px 0 120px}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:2/1;gap:20px;grid-template-areas:'a a b b' 'a a c d'}
.tile{display:block;border-radius:28px;color:var(--ink)}
.tile.a{grid-area:a}.tile.b{grid-area:b}.tile.c{grid-area:c}.tile.d{grid-area:d}
.tile.x{grid-area:x;background:var(--ink) var(--grain-dark);background-size:256px 256px;color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.tile.x b{font-size:24px;line-height:1.15;font-weight:600;letter-spacing:-0.02em}
.tile.x b .serif{color:var(--gold-light)}
.tile.x:hover{color:#fff}
.tile.x .go{background:#fff;color:var(--ink);flex:none}
.tile.x{overflow:hidden;position:relative}
.tile.x .x-mark{position:absolute;right:-48px;top:50%;width:220px;height:220px;margin-top:-110px;opacity:.07;pointer-events:none;transition:transform 1.2s var(--ease)}
.tile.x:hover .x-mark{transform:rotate(45deg)}
.tile.x .x-top,.tile.x .x-foot{position:relative;z-index:1}
.tile.x .x-top{display:flex;flex-direction:column;gap:10px}
.tile.x small{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#D9B56A}
.tile.x .x-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.tile.x .x-foot>span:first-child{font-size:14px;line-height:1.5;color:#B5B5BA;max-width:230px}
.tile:not(.a) .t-foot{left:14px;right:14px;bottom:14px}
.tile:not(.a) .cat-label{padding:10px 14px;border-radius:14px}
.tile:not(.a) .cat-label b{font-size:18px}
.tile:not(.a) .cat-label small{font-size:13px}
.tile:not(.a) .go{width:40px;height:40px}
.tile .t-foot{position:absolute;left:24px;right:24px;bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.cat-label{padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cat-label b{display:block;font-size:22px;font-weight:600;letter-spacing:-0.02em}
.cat-label small{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.go{width:48px;height:48px;flex:none;border-radius:999px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:transform .5s var(--ease)}
.tile:hover .go{transform:rotate(45deg)}

/* Top products — vertical marquee */
.s-show{background:var(--night) var(--grain-dark);background-size:256px 256px;color:#fff;padding:120px 0;overflow:hidden}
.show-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:64px;align-items:center}
.show-copy{display:flex;flex-direction:column;gap:28px}
.show-copy .sec-title{font-size:60px;line-height:1;color:#fff}
.show-copy p{margin:0;max-width:420px;font-size:17px;line-height:1.6;color:#B5B5BA}
.show-list{display:flex;flex-direction:column;border-top:1px solid #2A2A2A}
.show-list a{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #2A2A2A;color:#fff;font-size:16px;transition:padding .4s var(--ease),color .3s ease}
.show-list a:hover{padding-left:8px;color:var(--gold-light)}
.show-list span{display:flex;gap:16px}.show-list em{font-style:normal;color:#8E8E93;font-variant-numeric:tabular-nums}
.mq{height:740px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.col{display:flex;flex-direction:column;gap:20px;animation:mq-up 48s linear infinite;will-change:transform;backface-visibility:hidden}
.col.rev{animation-name:mq-down;animation-duration:54s}
.col.slow{animation-duration:60s}
.mq.paused .col{animation-play-state:paused}
@keyframes mq-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - 10px),0)}}
@keyframes mq-down{from{transform:translate3d(0,calc(-50% - 10px),0)}to{transform:translate3d(0,0,0)}}
.mcard{display:block;border-radius:24px;overflow:hidden;background:#1A1A1A;color:#fff;flex:none}
.mcard .ph{background:#222;aspect-ratio:1/1}
.mcard div.cap{padding:16px 18px 18px}
.mcard small{display:block;font-size:12px;color:#8E8E93;text-transform:uppercase;letter-spacing:.1em}
.mcard b{display:block;margin-top:6px;font-size:16px;font-weight:600}
.mcard:hover{color:#fff}
.mcard:hover .ph>img{transform:scale(1.06)}

/* About short */
.s-about{padding:140px 0}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;align-items:center}
.about-img{aspect-ratio:1/1;border-radius:32px}
.about-card{position:absolute;right:-24px;bottom:-32px;width:220px;padding:24px;border-radius:24px;background:var(--ink);color:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.about-card small{display:block;font-size:13px;color:#B5B5BA}
.about-card b{display:block;margin-top:6px;font-size:44px;font-weight:600;letter-spacing:-0.03em;line-height:1.1}
.about-copy{display:flex;flex-direction:column;gap:28px}
.about-copy .sec-title{font-size:54px}
.feat{display:flex;flex-direction:column;gap:20px}
.feat>div{display:flex;gap:16px;align-items:flex-start}
.feat i{width:44px;height:44px;flex:none;border-radius:14px;background:#F1ECE1;display:inline-flex;align-items:center;justify-content:center;color:var(--gold-deep)}
.feat b{display:block;font-size:16px;font-weight:600}
.feat span{display:block;margin-top:4px;font-size:15px;color:var(--muted-2)}

/* Best sellers carousel */
.s-best{padding:0 0 140px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:40px;padding:0 18px;border-radius:999px;border:1px solid #DAD6CD;background:transparent;color:var(--ink);font-size:14px;font-weight:500;flex:none;display:inline-flex;align-items:center;gap:8px;transition:background .3s ease,color .3s ease,border-color .3s ease}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip .n{font-size:12px;opacity:.6;font-variant-numeric:tabular-nums}
.car-nav{display:flex;justify-content:flex-end;gap:8px;margin:0 0 20px}
.rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 calc((100% - 72px)/4);scroll-snap-align:start}
.pcard{border-radius:24px;background:#fff;border:1px solid var(--line-2);overflow:hidden;display:flex;flex-direction:column;transition:transform .6s var(--ease),box-shadow .6s ease}
.pcard:hover{transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(17,17,17,.25)}
.pcard .ph{aspect-ratio:1/1}
.pcard .tag{position:absolute;left:14px;top:14px;padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:500}
.pcard .body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard small{font-size:12px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em}
.pcard h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-0.01em}
.pcard .code{font-size:13px;color:var(--muted-2)}
.pcard .row{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pcard .row span{font-size:15px;font-weight:600}
.rail.fade>*{animation:fadein .5s ease both}

/* Reviews (shown only when real reviews are added in data.js) */
.s-testi{padding:120px 0;background:var(--sand) var(--grain-light);background-size:256px 256px}
.testi-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:40px;align-items:start}
.tcard{margin:0;padding:28px;border-radius:24px;background:#fff;border:1px solid #E6E2D9;display:flex;flex-direction:column;gap:20px}
.tcard blockquote{margin:0;font-size:17px;line-height:1.6;color:#2A2A2C;flex:1}
.tcard figcaption{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid #EFEBE3}
.tcard figcaption i{width:44px;height:44px;border-radius:999px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:600}
.tcard figcaption b{display:block;font-size:15px}.tcard figcaption small{font-size:13px;color:var(--muted-2)}
.trail>*{flex:0 0 calc((100% - 40px)/3)}

/* ==========================================================
   CATALOGUE
   ========================================================== */
.cover-sec{padding:56px 0 48px}
.cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.cover-copy{display:flex;flex-direction:column;gap:22px}
.cover-title{margin:0;font-size:76px;line-height:.95;font-weight:600;letter-spacing:-0.05em}
.cover-copy p.intro{margin:0;max-width:460px;font-size:17px;line-height:1.6;color:var(--muted)}
.stats{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:14px;padding-top:18px;border-top:1px solid var(--line)}
.stats b{font-weight:600}.stats span span{color:var(--muted-2)}
.deck{position:relative;height:460px;perspective:1400px;perspective-origin:50% 35%}
.deck-g{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d;will-change:transform;
  transform:rotateX(calc(8deg - var(--dy,0) * 9deg)) rotateY(calc(var(--dx,0) * 16deg)) translate3d(calc(var(--dx,0) * 14px),0,0)}
.dk{position:absolute;left:-115px;top:-115px;width:230px;height:230px;padding:0;border:0;border-radius:18px;overflow:hidden;background:var(--stone);transform-style:preserve-3d;backface-visibility:hidden;
  transform:translate3d(calc(var(--o) * 108px),calc(var(--ao) * 12px),calc(var(--ao) * -70px)) rotateY(calc(var(--o) * -11deg)) rotateZ(calc(var(--o) * 2.2deg));
  transition:transform .9s var(--ease-out),box-shadow .6s ease;box-shadow:0 30px 60px -30px rgba(40,30,10,.5)}
.dk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dk .gl{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:0;transition:opacity .5s ease;pointer-events:none;
  background:radial-gradient(circle at calc(50% + var(--dx,0) * 45%) calc(40% + var(--dy,0) * 45%),rgba(255,255,255,.8),rgba(255,255,255,0) 60%)}
.dk .tag{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:11px;font-weight:600;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.dk.hot{z-index:20 !important;box-shadow:0 50px 90px -30px rgba(40,30,10,.6);
  transform:translate3d(calc(var(--o) * 108px),calc(var(--ao) * 12px - 26px),calc(var(--ao) * -70px + 120px)) rotateY(calc(var(--o) * -11deg)) rotateZ(calc(var(--o) * 2.2deg))}
.dk.hot .gl,.dk.hot .tag{opacity:1;transform:none}
.deck-floor{position:absolute;left:50%;top:400px;width:640px;height:60px;margin-left:-320px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,45,20,.22),rgba(60,45,20,0));pointer-events:none;
  transform:translateX(calc(var(--dx,0) * -50px)) scaleX(calc(1 + var(--dxa,0) * .1))}
.deck-hint{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8E8E93}
.strip{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.strip .ph{aspect-ratio:1/1;border-radius:22px}
.strip .ph:nth-child(2){margin-top:40px}

.bar{position:sticky;top:68px;z-index:30;background:rgba(251,250,247,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid #E6E2D9}
.bar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.search{height:40px;width:270px;border-radius:999px;border:1px solid #DAD6CD;background:#fff;padding:0 16px 0 40px;font-size:14px;color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B6B70' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M14 14l-3.2-3.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:16px 50%;transition:border-color .25s ease}
.search:focus{outline:none;border-color:var(--ink)}
.grid-sec{padding:28px 0 72px}
.grid-sec .wrap{display:flex;flex-direction:column;gap:28px}
.gal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.gt{position:relative;display:block;width:100%;padding:0;border:0;border-radius:18px;overflow:hidden;background:var(--stone);aspect-ratio:1/1;text-align:left;color:var(--ink)}
.gt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .6s ease;opacity:0}
.gt img.ld{opacity:1}
.gt:hover img{transform:scale(1.06)}
.gt .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.62),rgba(10,10,10,0) 55%);opacity:0;transition:opacity .4s ease}
.gt:hover .ov,.gt:focus-visible .ov{opacity:1}
.gt .meta{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s var(--ease)}
.gt:hover .meta,.gt:focus-visible .meta{opacity:1;transform:none}
.gt .meta b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.gt .meta small{display:block;font-size:12px;opacity:.8;margin-top:2px}
.gt .code{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.9);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.plus{width:34px;height:34px;flex:none;border-radius:999px;background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.gt.enter{animation:tilein .7s var(--ease-out) both}
@keyframes tilein{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.more-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.more-wrap p{margin:0;font-size:14px;color:var(--muted-2)}
.prog{height:2px;width:220px;background:#E1DCD1;border-radius:2px;overflow:hidden}
.prog span{display:block;height:100%;width:0;background:var(--ink);transition:width .6s var(--ease)}
.empty{display:none;padding:56px 24px;border:1px dashed #DAD6CD;border-radius:20px;text-align:center;flex-direction:column;align-items:center;gap:12px}
.empty.on{display:flex}
.empty p{margin:0;font-size:18px;font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step{padding:22px 20px;display:flex;gap:14px;align-items:baseline;border-left:1px solid var(--line)}
.step:first-child{border-left:0;padding-left:0}
.step .no{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:26px;color:var(--gold);line-height:1}
.step b{display:block;font-size:15px;font-weight:600}
.step span span{display:block;margin-top:4px;font-size:13px;color:var(--muted-2);line-height:1.5}
.guide-sec{padding:88px 0;border-top:1px solid var(--line)}
.guide-sec>.wrap{display:flex;flex-direction:column;gap:64px}
.guide-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:start}
.guide h2,.faq h2{margin:0 0 22px;font-size:40px;line-height:1.08;font-weight:600;letter-spacing:-0.035em}
.guide .eyebrow,.faq .eyebrow{margin-bottom:14px}
.guide p{margin:0 0 16px;font-size:16px;line-height:1.75;color:#3F3F44}
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.pt{padding:18px;border-radius:18px;background:#fff;border:1px solid #E6E2D9}
.pt b{display:block;margin-bottom:4px;font-size:15px;font-weight:600}
.pt span{font-size:14px;line-height:1.55;color:var(--muted-2)}
.faq-list{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;font-size:16px;font-weight:600;color:var(--ink)}
.faq-q svg{flex:none;transition:transform .45s var(--ease)}
.faq-q[aria-expanded="true"] svg{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 0 20px;font-size:15px;line-height:1.7;color:var(--muted)}
.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
.others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.oc{display:block;height:220px;border-radius:22px;color:#fff}
.oc span{position:absolute;left:14px;bottom:14px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:14px;font-weight:600}
.est-band{padding:88px 0;background:var(--night) var(--grain-dark);background-size:256px 256px;color:#fff}
.est-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.est-band .txt{display:flex;flex-direction:column;gap:14px;max-width:620px}
.est-band h2{margin:0;font-size:48px;line-height:1.04;font-weight:600;letter-spacing:-0.04em}
.est-band h2 .serif{color:var(--gold-light)}
.est-band p{margin:0;font-size:16px;line-height:1.6;color:#B5B5BA}

/* Quick view */
.qv-card{width:min(880px,100%);max-height:100%;background:var(--ground);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.qv-img{position:relative;min-height:460px;background:#1A1A1A;overflow:hidden;touch-action:pan-y}
.qv-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s ease}
.qv-img img.bg{object-fit:cover;filter:blur(28px) brightness(.8) saturate(1.1);transform:scale(1.2)}
.qv-img img.fade{opacity:0}
.qv-nav{position:absolute;left:14px;bottom:14px;display:flex;gap:8px;z-index:2}
.qv-nav button,.qv-x{width:40px;height:40px;padding:0;border-radius:50%;border:0;background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -6px rgba(0,0,0,.4);transition:transform .2s ease}
.qv-nav button:active,.qv-x:active{transform:scale(.92)}
.qv-x{position:absolute;right:14px;top:14px;z-index:2}
.qv-count{position:absolute;right:14px;bottom:14px;z-index:2;padding:5px 10px;border-radius:999px;background:rgba(17,17,17,.72);color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
.qv-body{padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.qv-title{margin:0;font-size:26px;line-height:1.1;font-weight:600;letter-spacing:-0.03em}
.qv-desc{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.qv-dl{display:grid;grid-template-columns:84px minmax(0,1fr);gap:6px 12px;margin:2px 0 10px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;line-height:1.4}
.qv-dl dt{color:var(--muted-2)}.qv-dl dd{margin:0}
.qv-body .btn{margin-top:auto;height:46px;flex:none}

/* ==========================================================
   ABOUT
   ========================================================== */
.sec{padding:104px 0}
.ab-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.ab-title{margin:0;font-size:72px;line-height:.98;font-weight:600;letter-spacing:-0.05em}
.ab-imgs{position:relative;padding-bottom:40px}
.ab-imgs .main{position:relative;margin-left:auto;width:82%;aspect-ratio:1/1;border-radius:30px}
.ab-imgs .inset{position:absolute;left:0;bottom:0;width:42%;aspect-ratio:1/1;border-radius:24px;border:6px solid var(--ground)}
.ab-story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.h2{margin:0;font-size:48px;line-height:1.04;font-weight:600;letter-spacing:-0.04em}
.ab-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cat-card{display:block;aspect-ratio:1/1;border-radius:26px;color:#fff}
.cat-card .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.62),rgba(10,10,10,0) 55%)}
.cat-card .t-foot{position:absolute;left:20px;right:20px;bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;color:#fff}
.cat-card b{display:block;font-size:21px;font-weight:600;letter-spacing:-0.02em}
.cat-card small{display:block;margin-top:4px;font-size:13px;opacity:.85}
.cat-card .go{width:40px;height:40px;background:#fff;color:var(--ink)}
.cat-card:hover{color:#fff}
.cat-card:hover .go{transform:rotate(-45deg)}
.ab-band{background:var(--sand) var(--grain-light);background-size:256px 256px}
.ab-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ab-step{padding:26px;border-radius:22px;background:#fff;border:1px solid #E6E2D9;display:flex;flex-direction:column;gap:10px}
.ab-step .no{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:34px;line-height:1;color:var(--gold)}
.ab-step b{font-size:17px;font-weight:600}
.ab-step span{font-size:14px;line-height:1.6;color:var(--muted-2)}
.ab-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.ab-values>div{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--ink)}
.ab-values b{font-size:22px;font-weight:600;letter-spacing:-0.02em}
.ab-values span{font-size:15px;line-height:1.7;color:var(--muted)}
.cta-band{padding:88px 0;background:var(--night) var(--grain-dark);background-size:256px 256px;color:#fff}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.cta-band .h2{color:#fff}.cta-band .h2 .serif{color:var(--gold-light)}

/* ==========================================================
   CONTACT
   ========================================================== */
.ct-hero{padding:64px 0 40px}
.ct-title{margin:0;font-size:76px;line-height:.96;font-weight:600;letter-spacing:-0.05em}
.ct-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:start}
.ct-cards{display:flex;flex-direction:column;gap:12px}
.ct-card{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:22px;background:#fff;border:1px solid #E6E2D9;color:var(--ink);width:100%;text-align:left;transition:border-color .3s ease,transform .4s var(--ease)}
a.ct-card:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.ct-ic{width:44px;height:44px;flex:none;border-radius:999px;background:var(--sand);color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.ct-ic.wa{background:var(--wa);color:#fff}
.ct-k{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.ct-v{display:block;font-size:17px;font-weight:600}
.ct-go{display:block;font-size:13px;color:var(--wa);font-weight:600}
.ct-photo{display:block;padding:0;overflow:hidden;flex-direction:column;align-items:stretch}
.ct-photo .ph{height:240px}
.ct-photo .cap{padding:18px 22px 22px;display:flex;flex-direction:column;gap:6px}
.ct-form{display:flex;flex-direction:column;gap:18px;padding:36px;border-radius:28px;background:#fff;border:1px solid #E6E2D9}
.ct-form h2{margin:0;font-size:36px;line-height:1.05;font-weight:600;letter-spacing:-0.04em}
.ct-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.interest{display:flex;flex-wrap:wrap;gap:8px}
.interest .chip{background:#fff}
.interest .chip.on{background:var(--ink)}

/* ==========================================================
   TABLET  (≤1000px)
   ========================================================== */
@media (max-width:1000px){
  .nav,.hd-actions .btn{display:none}
  .menu-btn{display:inline-flex}
  .h3d{display:none}
  .hero-slider{display:block}
  .bsm-sub{display:none}
  .bsm-wrap{margin-bottom:28px}
  .s-hero{padding:32px 0 80px}
  .sec-title{font-size:46px}
  .bento{gap:14px}
  .tile.x b{font-size:18px}
  .tile.x{padding:16px}
  .tile.x .x-foot>span:first-child{display:none}
  .tile.x .x-foot{justify-content:flex-end}
  .tile.x .go{width:36px;height:36px}
  .tile:not(.a) .cat-label small{display:none}
  .tile:not(.a) .cat-label b{font-size:16px}
  .tile:not(.a) .go{width:36px;height:36px}
  .s-cat{padding:24px 0 96px}
  .show-grid,.testi-grid{grid-template-columns:1fr;gap:40px}
  .s-show{padding:96px 0}
  .show-copy .sec-title{font-size:46px}
  .s-about{padding:112px 0}
  .s-best{padding:0 0 112px}
  .rail>*{flex:0 0 calc((100% - 24px)/2)}
  .trail>*{flex:0 0 340px}
  .cover{grid-template-columns:1fr;gap:32px}
  .deck{display:none}
  .strip{display:grid}
  .gal{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bar-row{flex-wrap:wrap}
  .search{width:100%}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:nth-child(3){border-left:0;padding-left:0}
  .step:nth-child(n+3){border-top:1px solid var(--line)}
  .guide-grid{grid-template-columns:1fr;gap:40px}
  .qv-card{grid-template-columns:1fr;width:min(520px,100%);overflow-y:auto}
  .qv-img{min-height:0;height:min(40vh,340px)}
  .qv-body{padding:20px 22px 22px;gap:10px}
  .qv-title{font-size:22px}
  .qv-dl{font-size:13px;margin-bottom:8px}
  .ab-hero,.ab-story{grid-template-columns:1fr;gap:40px}
  .ab-cats,.ab-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-values{grid-template-columns:1fr;gap:28px}
  .ab-title{font-size:58px}
  .ct-grid{grid-template-columns:1fr}
  .ct-form{order:-1}
  .ct-title{font-size:60px}
}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;gap:56px}
}

/* ==========================================================
   MOBILE  (≤640px)
   ========================================================== */
@media (max-width:640px){
  .wrap{padding:0 20px}
  .hd-row{height:62px}
  .bar{top:62px}
  .logo img{height:26px}
  .bsm{font-size:28px;gap:.22em;line-height:1.6}
  .orn{width:20px}
  .bsm-row{gap:10px}
  .bsm-wrap{margin-bottom:20px}
  .hero-slider{margin:0 -20px;aspect-ratio:1/1}
  .s-hero{padding:22px 0 64px}
  .sec-title{font-size:34px}
  .sec-head{margin-bottom:28px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;aspect-ratio:auto;grid-template-areas:'a b' 'c d';gap:12px}
  .tile{aspect-ratio:1/1}
  .tile.x{display:none}
  .tile{border-radius:18px}
  .tile .t-foot{left:10px;right:10px;bottom:10px}
  .tile .go{display:none}
  .cat-label{padding:8px 12px;border-radius:12px}
  .cat-label b{font-size:14px;letter-spacing:-0.01em}
  .cat-label small{display:none}
  .tile:not(.a) .cat-label{padding:8px 12px;border-radius:12px}
  .tile:not(.a) .cat-label b{font-size:14px}
  .tile:not(.a) .t-foot{left:10px;right:10px;bottom:10px}
  .s-cat{padding:16px 0 80px}
  .s-show{padding:80px 0}
  .show-copy .sec-title{font-size:36px}
  .show-copy{gap:22px}
  .mq{height:600px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .col{gap:12px}
  .col.third{display:none}
  .mcard{border-radius:18px}
  .s-about{padding:80px 0 96px}
  .about-img{border-radius:24px}
  .about-card{right:12px;bottom:-24px;width:180px;padding:18px}
  .about-card b{font-size:36px}
  .about-copy .sec-title{font-size:34px}
  .s-best{padding:0 0 88px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:0 20px;scrollbar-width:none;max-width:calc(100% + 40px)}
  .tabs::-webkit-scrollbar{display:none}
  .rail{gap:14px}
  .rail>*{flex:0 0 84%}
  .trail>*{flex:0 0 86%}
  .s-testi{padding:72px 0}
  .tcard{padding:20px;gap:12px;border-radius:20px}
  .tcard blockquote{font-size:15px;line-height:1.55}
  .f-row{flex-direction:column;align-items:center;text-align:center}
  .f-links{justify-content:center;gap:8px 18px}
  .cover-sec{padding:40px 0 40px}
  .cover-title{font-size:48px}
  .strip .ph{border-radius:16px}
  .strip .ph:nth-child(2){margin-top:0}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .gt{border-radius:14px}
  .gt .meta{display:none}
  .steps{grid-template-columns:1fr}
  .step{border-left:0 !important;padding-left:0 !important;border-top:1px solid var(--line)}
  .step:first-child{border-top:0}
  .guide-sec{padding:56px 0}
  .guide h2,.faq h2{font-size:30px}
  .points{grid-template-columns:1fr}
  .others{grid-template-columns:1fr}
  .oc{height:170px}
  .est-band{padding:56px 0}
  .est-band h2{font-size:34px}
  .modal{padding:0;align-items:flex-end}
  .modal .sheet{transform:translate3d(0,40px,0)}
  .est-card{border-radius:24px 24px 0 0;padding:24px;width:100%}
  .qv-card{border-radius:24px 24px 0 0;max-height:92%;width:100%}
  .qv-img{height:min(34vh,260px)}
  .qv-body{padding:16px 18px 20px;gap:8px}
  .qv-title{font-size:20px}
  .qv-desc{font-size:13px;line-height:1.5}
  .qv-dl{grid-template-columns:70px minmax(0,1fr);gap:4px 10px;font-size:13px;padding-top:10px;margin-bottom:8px}
  .qv-body .btn{height:44px;font-size:14px}
  .qv-nav button,.qv-x{width:36px;height:36px}
  .sec{padding:64px 0}
  .h2{font-size:34px}
  .ab-title{font-size:42px}
  .ab-imgs{padding-bottom:28px}
  .ab-cats{gap:10px}
  .cat-card{border-radius:18px}
  .cat-card small,.cat-card .go{display:none}
  .cat-card b{font-size:17px}
  .ab-steps{grid-template-columns:1fr}
  .cta-band{padding:64px 0}
  .ct-hero{padding:40px 0 28px}
  .ct-title{font-size:46px}
  .ct-two{grid-template-columns:1fr}
  .ct-form{padding:22px;border-radius:22px}
  .ct-form h2{font-size:30px}
}


/* Home — Makrana marble section (SEO) */
.hero-h1{margin:14px 0 0;max-width:720px;font-size:13px;line-height:1.5;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.s-mk{padding:120px 0;border-top:1px solid var(--line)}
.mk-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.mk-copy{display:flex;flex-direction:column;gap:18px}
.mk-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.mk-facts>div{padding:18px;border-radius:18px;background:#fff;border:1px solid #E6E2D9;display:flex;flex-direction:column;gap:4px}
.mk-facts b{font-size:22px;font-weight:600;letter-spacing:-0.02em}
.mk-facts span{font-size:13px;line-height:1.45;color:var(--muted-2)}
.mk-faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start;margin-top:72px}
.mk-faq h2{margin:0;font-size:40px;line-height:1.08;font-weight:600;letter-spacing:-0.035em}
.mk-faq .eyebrow{margin-bottom:14px}
@media (max-width:1000px){.mk-grid,.mk-faq{grid-template-columns:1fr;gap:32px}.s-mk{padding:96px 0}}
@media (max-width:640px){.s-mk{padding:72px 0}.mk-facts{grid-template-columns:1fr}.mk-faq{margin-top:48px}.mk-faq h2{font-size:30px}.hero-h1{font-size:11px;letter-spacing:.1em;margin-top:6px}}


/* Map + address (local SEO) */
.map-box{position:relative;height:240px;background:var(--stone);overflow:hidden}
.map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}
.map-box.big{height:auto;aspect-ratio:4/3;border-radius:28px;border:1px solid #E6E2D9}
.s-visit{padding:0 0 120px}
.visit-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.visit-copy{display:flex;flex-direction:column;gap:22px}
.visit-nap{font-style:normal;font-size:17px;line-height:1.6;color:var(--ink);padding:20px 22px;border-radius:20px;background:#fff;border:1px solid #E6E2D9}
.visit-nap a{font-weight:600}
address.f-meta{font-style:normal;line-height:1.6}
@media (max-width:1000px){.visit-grid{grid-template-columns:1fr;gap:32px}.s-visit{padding:0 0 96px}}
@media (max-width:640px){.s-visit{padding:0 0 72px}.map-box.big{aspect-ratio:1/1;border-radius:20px}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
  .col{animation:none !important}
}

/* ---------- No-crop rule ----------
   Every photo is shown in full. When a frame's shape differs from the photo,
   site.js adds .fit: the photo sits whole in the middle (contain) and a soft
   blurred copy of the same photo fills the empty sides. */
.fit{isolation:isolate}
.fit::before{content:"";position:absolute;inset:-24px;z-index:0;background:var(--bg) center/cover no-repeat;filter:blur(22px) brightness(.92) saturate(1.05);pointer-events:none}
.fit>img,.fit>picture>img{object-fit:contain !important;z-index:1}
.fit>:not(img):not(picture){z-index:2}

/* ---------- Shop by category: matched to the reference layout ---------- */
.s-cat .wrap{max-width:1424px}
.s-cat .sec-head{margin-bottom:32px;align-items:flex-end}
.s-cat .cat-more{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:700;border-bottom:1px solid;padding-bottom:5px;line-height:1.3}
.s-cat .cat-more svg{width:15px;height:15px}
.s-cat .bento{aspect-ratio:auto;grid-template-rows:320px 320px;gap:20px}
.s-cat .tile{border-radius:24px;background:#D3C9BB}
.s-cat .tile.fit::before{inset:0;filter:none;background:linear-gradient(rgba(246,243,237,.72),rgba(246,243,237,.72)),var(--bg) center/cover no-repeat}
.s-cat .cat-chip{position:absolute;left:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:14px;max-width:calc(100% - 36px);padding:13px 13px 13px 17px;border-radius:15px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#111}
.s-cat .cat-chip>span:first-child{min-width:0}
.s-cat .cat-chip b{display:block;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0}
.s-cat .cat-chip small{display:block;margin-top:3px;font-size:16px;line-height:1.35;color:#777}
.s-cat .cat-arrow{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;transition:transform .5s var(--ease)}
.s-cat .cat-arrow svg{width:16px;height:16px}
.s-cat .tile:hover .cat-arrow{transform:rotate(45deg)}
@media (max-width:1000px){
  .s-cat .bento{grid-template-rows:280px 280px;gap:16px}
  .s-cat .tile.c .cat-chip small,.s-cat .tile.d .cat-chip small,.s-cat .tile.c .cat-arrow,.s-cat .tile.d .cat-arrow{display:none}
}
@media (max-width:640px){
  .s-cat .sec-head{display:block;margin-bottom:22px}
  .s-cat .cat-more{font-size:15px;margin-top:15px}
  .s-cat .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'a b' 'c d';grid-template-rows:210px 210px;gap:12px}
  .s-cat .tile{aspect-ratio:auto;border-radius:18px}
  .s-cat .cat-chip{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:9px 12px;border-radius:999px}
  .s-cat .cat-chip small,.s-cat .cat-arrow{display:none}
  .s-cat .cat-chip b{font-size:15px;white-space:nowrap}
}