/* Shared chrome for the three homepage concepts: tokens, header, buttons, footer. Each concept overrides tokens and adds its own layout. */
:root{--bg:#f4ead9;--s1:#ece0cb;--s2:#e2d3b8;--tx:#2a2018;--mu:#76664f;--gold:#c4962f;--gold-d:#8a6414;--hl:rgba(42,32,24,.16);--ease:cubic-bezier(.23,1,.32,1);--gut:clamp(20px,5vw,72px);--nav:72px;--ink-on-gold:#1d1406}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--bg)}
body{font-family:'Outfit','Tajawal',system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.55;font-weight:300;overflow-x:hidden}
html[lang=ar] body{font-family:'Tajawal','Outfit',system-ui,sans-serif;line-height:1.7}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}
.wrap{padding-inline:var(--gut);max-width:1600px;margin-inline:auto}
.cr{overflow:hidden}.cr img{width:100%;height:112%;object-fit:cover;object-position:50% 0}
/* buttons: square, one primary */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 30px;background:var(--gold);color:var(--ink-on-gold);font-weight:500;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;transition:transform .16s var(--ease),background .2s}
html[lang=ar] .btn{letter-spacing:0;font-size:1rem}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1px currentColor}
@media(hover:hover) and (pointer:fine){.btn:hover{filter:brightness(1.08)}}
/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gut);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hl);color:var(--tx)}
.mark img{height:46px;width:auto}
.nav{display:flex;gap:34px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
html[lang=ar] .nav{letter-spacing:0;font-size:1rem}
.nav a{position:relative;padding:8px 0}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
html[dir=rtl] .nav a::after{transform-origin:right}
@media(hover:hover) and (pointer:fine){.nav a:hover::after{transform:scaleX(1)}}
.hr{display:flex;align-items:center;gap:14px}
.lang,.cartb{min-width:44px;min-height:44px;font-size:.78rem;letter-spacing:.1em;box-shadow:inset 0 0 0 1px var(--hl);padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cartb b{font-weight:500;color:var(--gold-d)}
.burger{display:none;width:44px;height:44px;position:relative}
.burger i{position:absolute;inset-inline:11px;height:1px;background:var(--tx);transition:transform .4s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:26px}
.menu-open .burger i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}.menu-open .burger i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
.sheet{position:fixed;inset:var(--nav) 0 0;z-index:55;background:var(--bg);display:none;flex-direction:column;justify-content:center;gap:8px;padding:var(--gut)}
.sheet a{font-size:2rem;font-weight:200;padding:8px 0}
.menu-open .sheet{display:flex}
@media(max-width:860px){.nav{display:none}.burger{display:block}}
/* all-concepts control */
.bkc{position:fixed;inset-inline-start:16px;top:calc(var(--nav) + 12px);z-index:70;min-height:44px;padding:0 18px;display:inline-flex;align-items:center;background:var(--tx);color:var(--bg);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;transition:transform .16s var(--ease)}
.bkc:active{transform:scale(.97)}html[lang=ar] .bkc{letter-spacing:0;font-size:.95rem}
/* reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{transform:none;transition:opacity .3s}html{scroll-behavior:auto}}
/* footer (visit) */
.ft{background:var(--ft-bg,var(--s1));color:var(--ft-tx,var(--tx));padding:clamp(56px,9vw,120px) 0 28px}
.ft__big{display:block;font-weight:200;font-size:clamp(2.2rem,7vw,6rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:clamp(32px,5vw,64px)}
.ft__g{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-bottom:40px;border-bottom:1px solid var(--hl)}
.ft h3{font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);margin-bottom:10px}
html[lang=ar] .ft h3{letter-spacing:0;font-size:1rem}
.ft p,.ft a{display:block;margin-bottom:4px}
.ft__f{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.88rem;color:var(--mu)}
.ft__f nav{display:flex;gap:22px}
@media(max-width:760px){.ft__g{grid-template-columns:1fr 1fr}}
/* scroll + link craft (shared) */
[id]{scroll-margin-top:calc(var(--nav) + 12px)}
.sp{position:fixed;inset:0 0 auto 0;height:3px;z-index:80;background:var(--gold);transform-origin:left;transform:scaleX(0);pointer-events:none}
html[dir=rtl] .sp{transform-origin:right}
.nav a.cur::after{transform:scaleX(1)}
.ln{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease);padding-bottom:2px}
html[dir=rtl] .ln{background-position:100% 100%}
@media(hover:hover) and (pointer:fine){.ln:hover{background-size:100% 1px}}
.ln.on{background-size:100% 1px}
.arw{display:inline-block;transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){a:hover>.arw,.btn:hover>.arw{transform:translateX(5px)}html[dir=rtl] a:hover>.arw,html[dir=rtl] .btn:hover>.arw{transform:translateX(-5px)}}
html[dir=rtl] .arw{transform:scaleX(-1)}
[data-par]{will-change:transform}
.zoom{overflow:hidden}.zoom>img,.zoom>.zi{transition:transform 1.1s var(--ease)}
@media(hover:hover) and (pointer:fine){.zoom:hover>img,.zoom:hover>.zi{transform:scale(1.045)}}
.page-in{animation:pin .6s var(--ease) both}@keyframes pin{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.page-in{animation:none}[data-par]{transform:none!important}}
/* in-page dot rail */
.rl{position:fixed;inset-inline-end:18px;top:50%;transform:translateY(-50%);z-index:50;display:grid;gap:4px}
.rl a{position:relative;display:grid;place-items:center;width:28px;height:28px}
.rl a::before{content:"";width:7px;height:7px;background:var(--mu);opacity:.5;transition:transform .3s var(--ease),opacity .3s,background .3s}
.rl a.cur::before{background:var(--gold);opacity:1;transform:scale(1.7)}
.rl a span{position:absolute;inset-inline-end:34px;white-space:nowrap;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:var(--tx);color:var(--bg);padding:5px 10px;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
html[dir=rtl] .rl a span{transform:translateX(-6px)}
@media(hover:hover) and (pointer:fine){.rl a:hover span{opacity:1;transform:none}}
@media(max-width:860px){.rl{display:none}}
@media(max-width:860px){.bkc{top:auto;bottom:10px;min-height:34px;padding:0 12px;font-size:.66rem}}
/* shop + about: luxury theme (champagne, carpet red, gold) */
:root{--red:#7a101c;--red-d:#4d0912;--cream:#fbf5e9;--bg:#f4ead9;--s1:#ede0c8;--s2:#e2d1b0;--ft-bg:#2a1410;--ft-tx:#f4ead9}
body{background:var(--bg)}
.ft{--hl:rgba(244,234,217,.22)}.ft__f{color:#c9b8a0}.ft h3{color:#e3b95a}
h1,h2,h3{font-weight:200;letter-spacing:-.02em}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{font-weight:500}
small.k{display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);font-weight:500;margin-bottom:14px}
html[lang=ar] small.k{letter-spacing:0;font-size:1rem}
/* carpet banner */
.cb{position:relative;overflow:hidden;color:#f6ecda;padding:calc(var(--nav) + clamp(48px,10svh,110px)) 0 clamp(48px,8svh,90px);background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 70%,rgba(0,0,0,.4)),repeating-linear-gradient(45deg,transparent 0 46px,rgba(217,169,62,.16) 46px 47px),repeating-linear-gradient(-45deg,transparent 0 46px,rgba(217,169,62,.16) 46px 47px),var(--red)}
.cb::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:#d9a93e}
.cb h1{font-size:clamp(2.8rem,8vw,8rem);line-height:.96;max-width:12ch;text-shadow:0 4px 40px rgba(0,0,0,.35)}
html[lang=ar] .cb h1{line-height:1.2}
.cb p{color:#ecdcc4;max-width:44ch;margin-top:20px;font-size:1.08rem}
.cb small.k{color:#e8c56a}
/* shop */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:30px}
.tabs button{position:relative;min-height:46px;padding:0 20px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#e9dac0;transition:color .3s}
html[lang=ar] .tabs button{letter-spacing:0;font-size:1rem}
.tabs button::after{content:"";position:absolute;inset-inline:20px;bottom:6px;height:2px;background:#e3b95a;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
html[dir=rtl] .tabs button::after{transform-origin:right}
.tabs button[aria-pressed=true]{color:#fff}.tabs button[aria-pressed=true]::after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){.tabs button:hover{color:#fff}}
.pg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);padding-block:clamp(40px,7vw,90px)}
.pg.flt .pd{grid-column:span 6}.pg.flt .pd.wide{grid-column:1 / -1}
.pd.wide{grid-column:1 / -1;grid-template-columns:1fr 1fr;grid-template-rows:auto}.pd.wide .pd__i{aspect-ratio:auto;min-height:420px;border-bottom:0;border-inline-end:2px solid var(--gold)}.pd.wide .pd__t{align-content:center;padding:clamp(24px,4vw,56px)}.pd.wide .pd__t h2{font-size:clamp(2rem,4vw,3.4rem)}
.pd{grid-column:span 4;display:grid;grid-template-rows:auto 1fr;background:var(--cream);box-shadow:0 0 0 1px var(--hl),0 40px 60px -48px rgba(42,32,24,.6);transition:transform .5s var(--ease)}
.pd.big{grid-column:span 6}.pd[hidden],.trio[hidden]{display:none}
.pd__i{position:relative;aspect-ratio:4/4.5;overflow:hidden;background:var(--s2);border-bottom:2px solid var(--gold);cursor:pointer}
.pd__i img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;object-position:50% 0;transition:opacity .7s var(--ease),transform 1.3s var(--ease)}
.pd__i img+img{opacity:0}
.pd__i .tag{position:absolute;z-index:2;inset-block-start:14px;inset-inline-start:14px;padding:6px 12px;background:var(--red);color:#f6ecda;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
html[lang=ar] .pd__i .tag{letter-spacing:0;font-size:.9rem}
@media(hover:hover) and (pointer:fine){.pd:hover{transform:translateY(-6px)}.pd:hover .pd__i img{transform:scale(1.045)}.pd:hover .pd__i img+img{opacity:1}}
.pd__t{padding:22px 24px 26px;display:grid;gap:10px;align-content:start}
.pd__t small{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);font-weight:500}html[lang=ar] .pd__t small{letter-spacing:0;font-size:.95rem}
.pd__t h2{font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:1.05}.pd__t p{color:var(--mu);max-width:36ch}
.nt{display:flex;gap:6px;flex-wrap:wrap}.nt span{padding:4px 11px;box-shadow:inset 0 0 0 1px var(--hl);font-size:.82rem;color:var(--mu)}
.pd__f{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px;flex-wrap:wrap}
.pd__f b{font-weight:400;font-size:1.25rem}
.pd__f .btn{min-height:48px;padding:0 22px;font-size:.74rem}
.trio{grid-column:1 / -1;display:grid;grid-template-columns:5fr 7fr;background:var(--red);color:#f6ecda;overflow:hidden;box-shadow:0 40px 70px -50px rgba(42,32,24,.7)}
.trio .cr{min-height:340px}.trio .cr img{object-position:50% 40%}
.trio__t{display:grid;gap:14px;align-content:center;padding:clamp(24px,4vw,56px);background:repeating-linear-gradient(45deg,transparent 0 40px,rgba(217,169,62,.14) 40px 41px),repeating-linear-gradient(-45deg,transparent 0 40px,rgba(217,169,62,.14) 40px 41px),var(--red)}
.trio h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.04}.trio p{color:#ecdcc4;max-width:34em}.trio small.k{color:#e8c56a}
.trio .row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.trio b{font-weight:300;font-size:2rem;color:#f0d28a}
.trio .btn{background:#f6ecda;color:#2a1410}
.mk{padding:0 0 clamp(60px,10vw,120px)}.mk h2{font-size:clamp(1.9rem,3.8vw,3.2rem);margin-bottom:12px}.mk>.wrap>p{color:var(--mu);max-width:40em;margin-bottom:24px}
.mk__l{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mk__c{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:84px;padding:0 24px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--hl);font-size:1.3rem;font-weight:300;text-align:start;transition:background .3s,color .3s,transform .16s var(--ease)}
.mk__c:active{transform:scale(.98)}.mk__c span:last-child{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);transition:color .3s}html[lang=ar] .mk__c span:last-child{letter-spacing:0;font-size:.95rem}
@media(hover:hover) and (pointer:fine){.mk__c:hover{background:var(--red);color:#f6ecda}.mk__c:hover span:last-child{color:#f0d28a}}
dialog.qv{border:0;padding:0;background:var(--cream);color:var(--tx);width:min(900px,94vw);max-height:90svh;margin:auto;overflow:hidden;opacity:0;transform:scale(.97);transition:opacity .25s,transform .3s var(--ease),display .3s allow-discrete,overlay .3s allow-discrete}
dialog.qv[open]{opacity:1;transform:none}@starting-style{dialog.qv[open]{opacity:0;transform:scale(.97)}}
dialog.qv::backdrop{background:rgba(30,12,8,.7)}
.qv__g{display:grid;grid-template-columns:1fr 1fr}.qv__g .cr{min-height:100%}.qv__g .cr img{height:100%;object-position:50% 0}.qv__t{display:grid;gap:14px;align-content:center;padding:clamp(24px,4vw,48px)}
.qv__t h2{font-size:2.2rem;line-height:1.05}.qv__t p{color:var(--mu)}.qv__t .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.qv__t b{font-weight:400;font-size:1.3rem}
.qx{position:absolute;inset-block-start:8px;inset-inline-end:8px;width:44px;height:44px;font-size:1.8rem;line-height:1;z-index:2;background:rgba(251,245,233,.85)}
/* about */
.sm{height:230svh;position:relative}.sm__p{position:sticky;top:0;height:100svh;display:grid;align-content:center}
.sm p{font-size:clamp(2rem,5vw,4.8rem);font-weight:300;letter-spacing:-.03em;line-height:1.1;max-width:18em}
.sm p span{opacity:.16;transition:opacity .25s linear}.sm p span.on{opacity:1}
.sp2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,100px);align-items:center;padding:clamp(56px,9vw,130px) 0}
.sp2 .cr{aspect-ratio:4/5;box-shadow:0 0 0 1px var(--gold),0 0 0 10px var(--cream),0 0 0 11px rgba(184,139,42,.5),0 40px 70px -40px rgba(42,32,24,.6)}
.sp2 h2{font-size:clamp(2rem,4.4vw,3.8rem);line-height:1.02;margin-bottom:20px}.sp2 p{color:var(--mu);max-width:40em;font-size:1.08rem}
.pil{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);padding-bottom:clamp(56px,9vw,130px)}
.pil a{position:relative;display:grid;align-content:end;aspect-ratio:3/4;overflow:hidden;color:#fff8e8;padding:26px;background:#2a1410}
.pil img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;object-position:50% 0;transition:transform 1.3s var(--ease)}
.pil a::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(30,10,6,.88),rgba(30,10,6,0) 60%)}
.pil div{position:relative;z-index:2;display:grid;gap:8px}.pil h3{font-size:clamp(1.8rem,2.6vw,2.6rem)}.pil p{color:#ecdcc4;max-width:24em;font-size:.98rem}
.pil em{font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f0d28a}html[lang=ar] .pil em{letter-spacing:0;font-size:1rem}
@media(hover:hover) and (pointer:fine){.pil a:hover img{transform:scale(1.05)}}
.band{position:relative;aspect-ratio:2.62/1;overflow:hidden;background:var(--s2)}.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vis{background-color:var(--red);color:#f6ecda;padding:clamp(48px,8vw,100px) 0;background-image:repeating-linear-gradient(45deg,transparent 0 46px,rgba(217,169,62,.14) 46px 47px),repeating-linear-gradient(-45deg,transparent 0 46px,rgba(217,169,62,.14) 46px 47px)}
.vis__g{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(20px,4vw,60px);align-items:start}
.vis h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.04}.vis h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#e8c56a;font-weight:500;margin-bottom:10px}html[lang=ar] .vis h3{letter-spacing:0;font-size:1rem}
.vis p,.vis a.t{display:block;margin-bottom:4px}.vis .btn{background:#f6ecda;color:#2a1410;width:max-content;margin-top:16px}
@media(max-width:900px){.pg{grid-template-columns:1fr 1fr}.pd,.pd.big,.pg.flt .pd{grid-column:span 1}.pd.wide,.pg.flt .pd.wide{grid-template-columns:1fr}.pd.wide .pd__i{min-height:0;aspect-ratio:4/3;border-inline-end:0;border-bottom:2px solid var(--gold)}.trio{grid-template-columns:1fr}.mk__l{grid-template-columns:1fr 1fr}.qv__g,.sp2,.vis__g{grid-template-columns:1fr}.qv__g .cr{aspect-ratio:16/10;min-height:0}.pil{grid-template-columns:1fr}.pil a{aspect-ratio:4/3}}
@media(max-width:560px){.pg{grid-template-columns:1fr}.mk__l{grid-template-columns:1fr}}