/* Oqba Perfumes — byoqba.com · rev. 3: Poppins only (brand book), one light palette, no dark band */
:root{
  /* Brand Book V3.1 palette (9 Oct 2026, COLOUR-ALIGNMENT-v3.1.md). Only these codes: #5D3432 (7631), tints #D5C7C6 / #E6DDDC / #EFEAE7, caramel #B17D56, tan #C6A38A. #423930 (2479) is dark work only. */
  --cream:#EFEAE7; --warm-grey:#E6DDDC; --blush:#E6DDDC; --porcelain:#EFEAE7; --rose:#E6DDDC; --dusty-rose:#D5C7C6;
  --brown:#5D3432; --chocolate:#5D3432; --caramel:#B17D56; --tan:#C6A38A;
  --ink-80:rgba(93,52,50,.82);
  --hair:rgba(93,52,50,.26); --hair-20:rgba(93,52,50,.18); --hair-12:rgba(93,52,50,.11);
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ar:"Noto Kufi Arabic","Poppins",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --margin:64px; --nav-h:88px; --pad:152px;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 6.1 6.6.7-4.9 4.5 1.4 6.5L12 17.1l-5.9 3.3 1.4-6.5-4.9-4.5 6.6-.7z'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--chocolate);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,ol,ul,figure,blockquote,address,dl,dd{margin:0;padding:0}
ol,ul{list-style:none}
address{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--caramel);outline-offset:4px;border-radius:1px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--chocolate);color:var(--cream);padding:10px 16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;transition:top .2s}
.skip:focus{top:12px}
[id]{scroll-margin-top:var(--nav-h)}
#top{scroll-margin-top:0}
.wrap{width:100%;max-width:calc(1312px + 2*var(--margin));margin:0 auto;padding:0 var(--margin)}
.wrap--1040{max-width:calc(1040px + 2*var(--margin))}

/* ---------- micro type ---------- */
.ne{width:7px;height:7px;flex:none;fill:none;stroke:currentColor;stroke-width:1.1;transition:transform .15s var(--ease)}
.arrow{width:22px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1;transition:transform .15s var(--ease)}
html[dir=rtl] .arrow,html[dir=rtl] .ne{transform:scaleX(-1)}
.fig{font-size:10px;font-weight:500;letter-spacing:.24em;color:var(--caramel)}
.fig-name{font-size:10px;font-weight:500;letter-spacing:.24em;color:var(--chocolate)}
.fig-meta{font-size:11px;font-weight:300;color:var(--ink-80)}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);transition:background-color .25s,border-color .25s,backdrop-filter .25s;border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(239,234,231,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--hair-12)}
.nav__inner{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--margin)}
.nav__left,.nav__right{display:flex;align-items:center;gap:26px}
.nav__right{gap:28px}
.nav a,.lang{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--chocolate);line-height:1}
.nav__left a{position:relative;padding:12px 0}
.nav__left a::after{content:"";position:absolute;left:50%;bottom:-1px;width:24px;height:1px;background:var(--caramel);transform:translateX(-50%) scaleX(0);transition:transform .18s var(--ease)}
.nav__left a:hover::after,.nav__left a.is-active::after{transform:translateX(-50%) scaleX(1)}
.nav .ext{display:inline-flex;align-items:center;gap:6px;padding:12px 0;transition:color .16s}
.nav .ext:hover{color:var(--brown)}
.nav .ext:hover .ne{transform:translate(2px,-2px)}
html[dir=rtl] .nav .ext:hover .ne{transform:scaleX(-1) translate(2px,-2px)}
.nav__rule{width:1px;height:16px;background:var(--hair)}
.lang-switch{display:inline-flex;align-items:center;gap:4px;line-height:1}
.lang-btn{background:none;border:0;padding:6px 6px;cursor:pointer;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--chocolate);opacity:.42;transition:opacity .18s var(--ease),color .18s var(--ease);position:relative}
.lang-btn[data-lang-code="ar"]{font-family:var(--ar);font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400}
.lang-btn:hover{opacity:.95;color:var(--brown)}
.lang-btn.is-active{opacity:1;font-weight:500;color:var(--chocolate)}
.lang-btn.is-active::after{content:"";position:absolute;left:6px;right:6px;bottom:1px;height:1.5px;background:var(--caramel)}
.lang-switch__sep{font-size:10px;opacity:.28;color:var(--chocolate);user-select:none}
.nav__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px}
.nav__logo img{width:120px;height:auto}
.nav__burger,.lang-switch--mob{display:none}

.drawer{position:fixed;inset:0;z-index:60;background:var(--cream);padding:88px var(--margin) 40px;display:flex;flex-direction:column}
.drawer[hidden]{display:none}
.drawer nav{display:flex;flex-direction:column;border-top:1px solid var(--hair-20)}
.drawer nav a{height:58px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--hair-20);font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase}
.drawer__close{position:absolute;top:10px;inset-inline-end:10px;width:44px;height:44px;display:grid;place-items:center}
.drawer__close svg{width:16px;height:16px;fill:none;stroke:var(--chocolate);stroke-width:1.2}
.drawer.is-open{animation:drawerIn .32s var(--ease) both}
@keyframes drawerIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* ---------- HERO (desktop canvas 1440×900) ---------- */
.hero{
  --h:clamp(780px,100svh,1000px); --floor:150px;
  --bh:calc(var(--h) - 300px); --bw:calc(var(--bh) * .4265);
  position:relative;height:var(--h);overflow:hidden;
  background:radial-gradient(circle 1050px at 50% 46%, var(--cream) 0%, var(--cream) 30%, var(--warm-grey) 100%);
}
.hero__stage{position:absolute;inset:0}
.hero__word{position:absolute;left:0;right:0;bottom:calc(var(--floor) + 147px);text-align:center;font-weight:100;font-size:320px;line-height:1;letter-spacing:.04em;padding-left:.04em;color:var(--tan);pointer-events:none;user-select:none;white-space:nowrap;animation:fadeWord .6s .08s ease both}
.hero__bottle{position:absolute;left:50%;bottom:var(--floor);height:var(--bh);width:var(--bw);transform:translateX(-50%);z-index:2}
.hero__bottle img,.savoir__bottle img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}
.hero__bottle img{animation:bottleIn .42s var(--ease) both}
.hero__bottle::before,.savoir__bottle::before{content:"";position:absolute;left:50%;bottom:-22px;width:210%;height:44px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(93,52,50,.16),rgba(93,52,50,.06) 55%,rgba(93,52,50,0) 100%);z-index:1}
.hero__bottle::after,.savoir__bottle::after{content:"";position:absolute;left:50%;bottom:-7px;width:102%;height:14px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(93,52,50,.55),rgba(93,52,50,.18) 60%,rgba(93,52,50,0) 100%);z-index:1}
.hero__floor{position:absolute;left:var(--margin);right:var(--margin);bottom:var(--floor);height:1px;background:rgba(93,52,50,.25);z-index:1}
.hero__fig{position:absolute;z-index:3;inset-inline-start:calc(50% + var(--bw) / 2 + 28px);bottom:calc(var(--floor) + 10px);display:flex;flex-direction:column;gap:2px;line-height:16px;animation:fadeUp .4s .3s var(--ease) both}
html[dir=rtl] .hero__fig{inset-inline-start:auto;left:calc(50% + var(--bw) / 2 + 28px)}

.doors{position:absolute;inset:auto var(--margin) var(--floor) var(--margin);display:flex;justify-content:space-between;pointer-events:none;z-index:4}
.door{pointer-events:auto;position:relative;width:320px;height:156px;padding:22px 28px 16px;display:flex;flex-direction:column;border:1px solid rgba(93,52,50,.32);background:rgba(239,234,231,0);transition:border-color .15s,background-color .12s;animation:fadeUp .4s .16s var(--ease) both}
.door:hover{border-color:var(--chocolate);background:rgba(239,234,231,.6)}
.door:hover .arrow{transform:translateX(4px)}
html[dir=rtl] .door:hover .arrow{transform:scaleX(-1) translateX(4px)}
.door__eyebrow{font-size:9.5px;font-weight:500;letter-spacing:.26em;color:var(--chocolate);line-height:1}
.door__title{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px}
.door__name{font-weight:200;font-size:50px;line-height:.92;color:var(--brown);letter-spacing:-.02em}
.door__ar{font-family:var(--ar);font-weight:300;font-size:21px;color:var(--chocolate);line-height:1}
.door__rule{display:block;height:1px;background:rgba(93,52,50,.16);margin-top:auto}
.door__foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;color:var(--chocolate)}
.door__url{font-size:13px;font-weight:400;letter-spacing:.04em;line-height:1}
.door__main{position:absolute;inset:0;z-index:1}
.door__main:focus-visible{outline-offset:3px}
.door > span{pointer-events:none}
.door__foot{position:relative;z-index:2}
.door__go{display:inline-flex;align-items:center;gap:12px}
.door__wa{pointer-events:auto;position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 0;margin:-8px 0;font-size:9px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1;color:var(--chocolate);transition:color .15s}
.door__wa::after{content:"";position:absolute;left:19px;right:.24em;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
html[dir=rtl] .door__wa::after{left:.24em;right:19px;transform-origin:right}
.door__wa:hover,.door__wa:focus-visible{color:var(--brown)}
.door__wa:hover::after,.door__wa:focus-visible::after{transform:scaleX(1)}
.wa{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:.9;stroke-linejoin:round}
html[lang=ar] .door__wa{font-family:var(--ar);letter-spacing:0;font-size:12px;font-weight:400}
.soon{position:absolute;top:19px;inset-inline-end:28px;font-size:9.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;line-height:1;color:var(--brown);display:inline-flex;align-items:center;gap:8px}
.soon::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--caramel)}
html[lang=ar] .soon{font-family:var(--ar);letter-spacing:0;font-size:12px;font-weight:400}

.hero__caption{position:absolute;left:var(--margin);right:var(--margin);top:calc(var(--h) - var(--floor) + 62px);display:flex;justify-content:space-between;z-index:3;animation:fadeIn .5s .3s ease both}
.cap{display:flex;flex-direction:column;gap:8px}
.cap__t{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--chocolate);line-height:1}
.cap__s{font-size:11px;font-weight:300;color:var(--ink-80);line-height:1.2}
.cap--ar .cap__t{font-family:var(--ar);font-weight:400;letter-spacing:0;font-size:14px}
.cap--ar .cap__s{font-family:var(--ar);font-size:12px}
.hero__scroll{position:absolute;left:50%;top:calc(var(--h) - var(--floor) + 40px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:3;padding:0 12px 8px;animation:fadeIn .5s .4s ease both}
.hero__scroll-line{width:1px;height:40px;background:rgba(93,52,50,.45);transform-origin:top;animation:scrollCue 2.6s 1.2s var(--ease) infinite}
.hero__scroll-t{font-size:9px;font-weight:500;letter-spacing:.3em;padding-left:.3em;color:rgba(93,52,50,.65);line-height:1}

@keyframes bottleIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeWord{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scrollCue{0%{transform:scaleY(0);opacity:1}45%{transform:scaleY(1);opacity:1}80%,100%{transform:scaleY(1);opacity:0}}

/* ---------- SECTIONS ---------- */
.sec{position:relative;padding:var(--pad) 0}
.sec__head{text-align:center;display:flex;flex-direction:column;align-items:center}
.eyebrow{font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--brown);line-height:1;margin-bottom:32px}
.title{font-weight:200;font-size:54px;line-height:1.14;color:var(--brown);letter-spacing:-.025em;max-width:780px;text-wrap:balance}
.title--xl{font-size:72px;letter-spacing:-.03em}
.title-rule{display:block;width:40px;height:1px;background:var(--caramel);opacity:.7;margin-top:32px}
.deck{max-width:600px;margin-top:32px;font-size:16px;line-height:1.8;color:var(--chocolate)}

/* The House — the photo's own backdrop is #E6DDDC, so it sits on the section with no edge */
.house{background:var(--warm-grey)}
.house__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center}
.house__text{grid-column:1 / span 5;max-width:500px}
.house__body{margin-top:36px;font-size:16px;line-height:1.85;color:var(--chocolate)}
.house__body--2{margin-top:18px}
.house__photo{grid-column:7 / span 6;position:relative;height:680px;margin:-40px 0 0;--hbh:540px}
.house__bottle{position:absolute;left:50%;bottom:64px;height:var(--hbh);width:calc(var(--hbh) * .4144);transform:translateX(-50%);z-index:2}
.house__bottle img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}
.house__bottle::before{content:"";position:absolute;left:50%;bottom:-22px;width:210%;height:44px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(93,52,50,.16),rgba(93,52,50,.06) 55%,rgba(93,52,50,0) 100%);z-index:1}
.house__bottle::after{content:"";position:absolute;left:50%;bottom:-7px;width:102%;height:14px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(93,52,50,.55),rgba(93,52,50,.18) 60%,rgba(93,52,50,0) 100%);z-index:1}
.house__floor{position:absolute;left:0;right:0;bottom:64px;height:1px;background:rgba(93,52,50,.25);z-index:1}
.house__fig{position:absolute;z-index:3;inset-inline-start:0;bottom:24px;display:flex;gap:14px;align-items:baseline;line-height:16px}
.facts{grid-column:1 / -1;margin-top:120px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair-20)}
.fact{padding:40px 0 0;display:flex;flex-direction:column}
.fact + .fact{padding-inline-start:40px;border-inline-start:1px solid var(--hair-12)}
.fact dt{font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--brown);line-height:1}
.fact dd{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.fact__n{font-weight:100;font-size:88px;line-height:.9;letter-spacing:-.04em;color:var(--brown)}
.fact__s{font-size:13px;font-weight:300;color:var(--ink-80);letter-spacing:.02em}

/* Savoir-faire */
.savoir{background:var(--cream);overflow:hidden}
.savoir__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center}
.savoir__stage{grid-column:1 / span 6;position:relative;height:680px;--sbh:500px}
.savoir__num{position:absolute;left:-40px;right:-40px;bottom:var(--num-b,64px);text-align:center;font-weight:100;font-size:var(--num-fs,440px);line-height:.74;letter-spacing:.22em;padding-left:.22em;color:var(--tan);user-select:none;pointer-events:none;white-space:nowrap}
.savoir__bottle{position:absolute;left:50%;bottom:64px;height:var(--sbh);width:calc(var(--sbh) * .4385);transform:translateX(-50%);z-index:2}
.savoir__floor{position:absolute;left:0;right:0;bottom:64px;height:1px;background:rgba(93,52,50,.25);z-index:1}
.savoir__fig{position:absolute;z-index:3;inset-inline-start:0;bottom:24px;display:flex;gap:14px;align-items:baseline;line-height:16px}
.savoir__text{grid-column:8 / span 5}
.savoir__lead{margin-top:36px;font-size:16px;line-height:1.85;color:var(--chocolate);max-width:470px}
.steps{margin-top:48px;border-top:1px solid var(--hair-20)}
.step{display:grid;grid-template-columns:56px 1fr;padding:24px 0;border-bottom:1px solid var(--hair-20)}
.step__i{font-size:10px;font-weight:500;letter-spacing:.24em;color:var(--caramel);line-height:22px}
.step__t{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--chocolate);line-height:22px}
.step__b{margin-top:6px;font-size:15px;line-height:1.75;color:var(--ink-80)}

/* Philosophy */
.philosophy{background:var(--blush);overflow:hidden}
.philosophy__pattern{position:absolute;top:0;bottom:0;right:0;width:180px;background:url(../pattern/rings-brown-on-cream.svg) repeat;background-size:44px 44px;opacity:.09;pointer-events:none;-webkit-mask-image:linear-gradient(to left,#000 30%,transparent);mask-image:linear-gradient(to left,#000 30%,transparent)}
html[dir=rtl] .philosophy__pattern{right:auto;left:0;-webkit-mask-image:linear-gradient(to right,#000 30%,transparent);mask-image:linear-gradient(to right,#000 30%,transparent)}
.principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:104px;border-top:1px solid var(--hair-20)}
.principle{padding:44px 36px 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.principle + .principle{border-inline-start:1px solid var(--hair-12)}
.principle:nth-child(3n+1){border-inline-start:0}
.principle:nth-child(n+4){margin-top:56px;padding-top:56px;border-top:1px solid var(--hair-12)}
.philosophy__lead{max-width:720px;margin-top:40px;font-weight:200;font-size:26px;line-height:1.5;letter-spacing:-.01em;color:var(--brown);text-wrap:balance}
html[lang=ar] .philosophy__lead{font-family:var(--ar);font-weight:300;font-size:22px;line-height:1.8;letter-spacing:0}
.principle__i{font-weight:200;font-size:30px;line-height:1;letter-spacing:.04em;color:var(--caramel)}
.principle__t{margin-top:26px;font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--chocolate);line-height:1.3}
.principle__b{margin-top:16px;font-size:15px;line-height:1.75;color:var(--ink-80);max-width:32ch;text-wrap:pretty}
.philosophy__close{margin:112px auto 0;max-width:760px;text-align:center;font-weight:200;font-size:34px;line-height:1.4;letter-spacing:-.015em;color:var(--brown);text-wrap:balance;position:relative;padding-top:64px}
.philosophy__close::before{content:"";position:absolute;top:0;left:50%;width:1px;height:40px;background:rgba(93,52,50,.3)}

/* Wholesale & private label */
.wholesale{background:var(--rose);--pad:120px}
.wholesale__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
.wholesale__text{grid-column:1 / span 5}
.wholesale__steps{grid-column:7 / span 6;padding-top:6px}
.wholesale__steps .steps{margin-top:0}
.wholesale__lead{margin-top:36px;font-size:16px;line-height:1.85;color:var(--chocolate);max-width:470px}
.offer{margin-top:32px;display:flex;flex-direction:column;gap:12px}
.offer li{position:relative;padding-inline-start:24px;font-size:14.5px;line-height:1.6;color:var(--ink-80)}
.offer li::before{content:"";position:absolute;inset-inline-start:0;top:.8em;width:12px;height:1px;background:var(--caramel)}
.wholesale__for{margin-top:32px;font-size:13px;line-height:1.7;color:var(--ink-80);max-width:470px}
.wholesale__for-l{font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--brown);margin-inline-end:8px}
.cta{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 28px;border:1px solid rgba(93,52,50,.32);transition:border-color .15s,background-color .12s}
.cta:hover{border-color:var(--chocolate);background:rgba(239,234,231,.6)}
.cta:hover .arrow{transform:translateX(4px)}
html[dir=rtl] .cta:hover .arrow{transform:scaleX(-1) translateX(4px)}
.cta__l{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--brown)}
.cta__m{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:400;letter-spacing:.03em;color:var(--chocolate)}
html[lang=ar] .wholesale__lead{font-size:18px;line-height:1.9}
html[lang=ar] .offer li,html[lang=ar] .wholesale__for{font-family:var(--ar);font-size:15px}
html[lang=ar] .cta__l,html[lang=ar] .wholesale__for-l{font-family:var(--ar);letter-spacing:0;font-size:14px;font-weight:400}

/* FAQ */
.faq{background:var(--cream);--pad:112px}
.faq__grid{display:grid;grid-template-columns:1fr 1.7fr;gap:64px;align-items:start}
.faq__list{border-top:1px solid var(--hair-20)}
.faq__item{border-bottom:1px solid var(--hair-20)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:17px;font-weight:300;line-height:1.5;color:var(--brown)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--chocolate)}
.faq__ico{position:relative;flex:none;width:12px;height:12px}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;left:0;top:50%;width:12px;height:1px;background:var(--caramel);transition:transform .2s var(--ease)}
.faq__ico::after{transform:rotate(90deg)}
.faq__item[open] .faq__ico::after{transform:rotate(0)}
.faq__a{padding:0 40px 26px 0;font-size:15px;line-height:1.8;color:var(--ink-80);max-width:62ch}
html[dir=rtl] .faq__a{padding:0 0 26px 40px}
html[lang=ar] .faq__item summary{font-family:var(--ar);font-size:17px}
html[lang=ar] .faq__a{font-family:var(--ar);font-size:16px;line-height:1.9}

/* Reviews */
.reviews{background:var(--porcelain)}
.reviews__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--hair-20)}
.rating{display:flex;align-items:center;gap:22px;padding:6px 0}
.rating__n{font-weight:100;font-size:96px;line-height:.8;letter-spacing:-.04em;color:var(--brown)}
.rating__meta{display:flex;flex-direction:column;gap:9px}
.rating__c{font-size:12px;font-weight:300;color:var(--ink-80);line-height:1}
.rating__link{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--chocolate);line-height:1;position:relative;padding-bottom:4px;width:max-content}
.rating__link::after{content:"";position:absolute;left:0;right:13px;bottom:0;height:1px;background:var(--caramel);transform:scaleX(.35);transform-origin:left;transition:transform .2s var(--ease)}
html[dir=rtl] .rating__link::after{left:13px;right:0;transform-origin:right}
.rating:hover .rating__link::after{transform:scaleX(1)}
.stars{display:inline-flex;gap:4px;line-height:0}
.star{width:11px;height:11px;background:var(--caramel);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.stars--45 .star:last-child{background:linear-gradient(90deg,var(--caramel) 50%,rgba(177,125,86,.25) 50%)}
html[dir=rtl] .stars--45 .star:last-child{background:linear-gradient(270deg,var(--caramel) 50%,rgba(177,125,86,.25) 50%)}
.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.review{padding:56px 48px 8px 0;display:flex;flex-direction:column}
.review + .review{padding-inline-start:48px;border-inline-start:1px solid var(--hair-12)}
.review:last-child{padding-inline-end:0}
.review__q{margin-top:28px;font-weight:300;font-size:17px;line-height:1.75;color:var(--chocolate);flex:1}
.review__q p::before{content:"\201C"}
.review__q p::after{content:"\201D"}
.review__by{margin-top:32px;display:flex;flex-direction:column;gap:6px}
.review__name{font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--chocolate);line-height:1.2}
.review__src{font-size:12px;font-weight:300;color:var(--ink-80);line-height:1.2}

/* Enquiries */
.enquiries{background:var(--cream)}
.routes{display:grid;grid-template-columns:1fr 1fr;margin-top:80px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.route{position:relative;min-height:320px;padding:64px 48px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:background-color .16s}
.route + .route{border-inline-start:1px solid var(--hair)}
.route:hover{background:var(--porcelain)}
.route:focus-visible{outline-offset:-6px}
.route__i{font-size:10px;font-weight:500;letter-spacing:.26em;color:var(--caramel);line-height:1}
.route__t{margin-top:24px;font-weight:200;font-size:36px;line-height:1.15;letter-spacing:-.02em;color:var(--brown);white-space:nowrap}
.route__ar{margin-top:12px;font-family:var(--ar);font-weight:300;font-size:17px;line-height:1.5;color:var(--ink-80)}
.route__rule{display:block;width:24px;height:1px;background:var(--caramel);margin-top:28px}
.route__mail{margin-top:28px;display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:400;letter-spacing:.03em;color:var(--chocolate)}
.route__addr{position:relative}
.route__addr::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--caramel);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.route:hover .route__addr::after,.route:focus-visible .route__addr::after{transform:scaleX(1)}
.route:hover .arrow{transform:translateX(4px)}
.routes--minor{grid-template-columns:repeat(3,1fr);margin-top:0;border-top:0}
.route--sm{min-height:240px;padding:48px 32px}
.route--sm .route__rule{display:block;width:20px;margin-top:20px}
.route--sm + .route--sm{border-inline-start:1px solid var(--hair-12)}
.route--sm .route__t{margin-top:18px;font-size:22px;white-space:normal;text-wrap:balance}
.route--sm .route__ar{margin-top:8px;font-size:14px}
.route--sm .route__mail{margin-top:20px;font-size:13.5px;gap:10px}
.route--sm .arrow{width:18px}
html[dir=rtl] .route:hover .arrow{transform:scaleX(-1) translateX(4px)}
.offices{display:grid;grid-template-columns:1fr 1fr;margin-top:72px;border-bottom:1px solid var(--hair-12)}
.office{padding:0 48px 48px;text-align:center}
.office + .office{padding-inline:48px;border-inline-start:1px solid var(--hair-12)}
.office .detail__l{display:flex;justify-content:center;align-items:baseline;gap:14px}
.office__ar{display:inline-block;margin-inline-start:0;font-family:var(--ar);font-weight:400;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-80)}
.office__co{display:block;margin-bottom:8px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--brown)}
html[lang=ar] .office__co{font-family:var(--ar);letter-spacing:0;font-size:14px;text-transform:none}
.office__tel{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:15px;font-weight:300;color:var(--chocolate)}
html[lang=ar] .office__ar{display:none}
.detail__l{font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--brown);line-height:1;margin-bottom:20px}
.detail__v{font-size:15px;line-height:1.75;color:var(--chocolate)}
.plain{transition:color .16s}
.plain:hover{color:var(--brown)}
.social{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--chocolate);line-height:1;padding:6px 0;transition:color .16s}
.social::after{content:"";position:absolute;left:0;right:13px;bottom:2px;height:1px;background:var(--caramel);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
html[dir=rtl] .social::after{left:13px;right:0;transform-origin:right}
.social:hover{color:var(--brown)}
.social:hover::after{transform:scaleX(1)}
.social:hover .ne{transform:translate(2px,-2px)}
.social-list li{height:32px;display:flex;align-items:center}
.phones{display:flex;flex-direction:column;gap:18px}
.phone{display:grid;grid-template-columns:56px auto;column-gap:16px;align-items:baseline}
.phone dd{grid-column:2}
.phone__c{grid-row:1 / span 2;font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-80);line-height:1.7;padding-top:3px}

/* Footer */
.footer{padding:72px 0 100px;border-top:1px solid var(--hair-20);background:var(--cream)}
.footer__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.footer__logo{justify-self:start;padding:4px 0}
.footer__logo img{width:96px;height:auto}
.footer__tag{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.footer__tag-en{font-size:10px;font-weight:500;letter-spacing:.26em;line-height:1}
.footer__tag-ar{font-family:var(--ar);font-weight:300;font-size:13px;line-height:1.4}
.footer__social{grid-column:1 / -1;justify-self:center;display:flex;align-items:center;flex-wrap:nowrap;margin-top:28px}

.footer__social li{display:flex;align-items:center}
.footer__social li + li::before{content:"·";color:rgba(93,52,50,.4);margin:0 16px}
.footer__bottom{margin-top:44px;padding-top:32px;padding-inline-end:80px;border-top:1px solid var(--hair-12);display:flex;justify-content:space-between;gap:16px;font-size:11px;font-weight:300;color:var(--ink-80);line-height:1.6}
.footer__meta{display:flex;align-items:center;gap:14px}
.footer__legal{display:flex;gap:10px}
.footer__legal a{letter-spacing:.04em}
.dot{opacity:.4;color:var(--chocolate)}

/* ---------- PRIVACY PAGE ---------- */
.legal-hero{padding:calc(var(--nav-h) + 120px) 0 88px;background:radial-gradient(circle 900px at 50% 0%, var(--cream) 0%, var(--cream) 35%, var(--warm-grey) 100%);text-align:center}
.legal-hero .title{margin:0 auto}
.legal-hero .title-rule{margin:32px auto 0}
.legal-meta{margin-top:28px;font-size:12px;color:var(--ink-80);letter-spacing:.02em}
.legal{padding:104px 0 152px}
.legal__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.toc{grid-column:1 / span 3;position:sticky;top:calc(var(--nav-h) + 40px);align-self:start}
.toc p{font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--brown);margin-bottom:18px}
.toc ol{counter-reset:toc;border-top:1px solid var(--hair-20)}
.toc li{counter-increment:toc;border-bottom:1px solid var(--hair-12)}
.toc a{display:flex;gap:14px;padding:10px 0;font-size:13px;line-height:1.45;color:var(--ink-80);transition:color .16s}
.toc a::before{content:counter(toc,decimal-leading-zero);font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--caramel);padding-top:2px;min-width:20px}
.toc a:hover{color:var(--brown)}
.legal__body{grid-column:5 / span 7;max-width:720px}
.legal__intro{font-weight:200;font-size:24px;line-height:1.55;letter-spacing:-.01em;color:var(--brown)}
.clause{padding-top:56px;margin-top:56px;border-top:1px solid var(--hair-20)}
.clause .clause__n{margin:0;font-size:10px;font-weight:500;letter-spacing:.26em;color:var(--caramel);line-height:1}
.clause h2{margin-top:16px;font-weight:200;font-size:32px;line-height:1.25;letter-spacing:-.02em;color:var(--brown)}
.clause h3{margin-top:28px;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--chocolate)}
.clause p,.clause li{font-size:15.5px;line-height:1.85;color:var(--chocolate)}
.clause p{margin-top:16px}
.clause ul{margin-top:14px;border-top:1px solid var(--hair-12)}
.clause li{padding:12px 0 12px 22px;border-bottom:1px solid var(--hair-12);position:relative}
.clause li::before{content:"";position:absolute;left:2px;top:24px;width:8px;height:1px;background:var(--caramel)}
.clause a{border-bottom:1px solid rgba(177,125,86,.6);transition:color .16s,border-color .16s}
.clause a:hover{color:var(--brown);border-color:var(--brown)}
.clause strong{font-weight:500}
.clause address{margin-top:16px;font-size:15.5px;line-height:1.85}

/* ---------- ARABIC ---------- */
html[lang=ar] body{font-family:var(--ar)}
html[lang=ar] .eyebrow,html[lang=ar] .principle__t,html[lang=ar] .step__t,html[lang=ar] .detail__l,html[lang=ar] .social,html[lang=ar] .fact dt,html[lang=ar] .nav__left a,html[lang=ar] .drawer nav a,html[lang=ar] .nav .ext span,html[lang=ar] .rating__link,html[lang=ar] .phone__c{font-family:var(--ar);letter-spacing:0;text-transform:none}
html[lang=ar] .eyebrow{font-size:13px;font-weight:400}
html[lang=ar] .nav__left a,html[lang=ar] .nav .ext span{font-size:13px;font-weight:400}
html[lang=ar] .title{font-family:var(--ar);font-weight:300;font-size:42px;line-height:1.5;letter-spacing:0;max-width:18ch}
html[lang=ar] .title--xl{font-size:52px}
html[lang=ar] .deck,html[lang=ar] .house__body,html[lang=ar] .savoir__lead{font-size:18px;line-height:1.9}
html[lang=ar] .principle__t,html[lang=ar] .step__t{font-size:16px;font-weight:500}
html[lang=ar] .principle__b,html[lang=ar] .step__b{font-size:16px;line-height:1.85}
html[lang=ar] .philosophy__close{font-family:var(--ar);font-weight:300;font-size:26px;line-height:1.8;letter-spacing:0}
html[lang=ar] .fact dt{font-size:13px;font-weight:400}
html[lang=ar] .fact__s,html[lang=ar] .rating__c,html[lang=ar] .review__src{font-family:var(--ar)}
html[lang=ar] .route__t{font-family:var(--ar);font-weight:300;font-size:30px;line-height:1.5;white-space:normal;letter-spacing:0}
html[lang=ar] .route--sm .route__t{font-size:20px}
html[lang=ar] .route__ar{display:none}
html[lang=ar] .detail__l{font-size:13px;font-weight:500}
html[lang=ar] .detail__v{font-size:16px;line-height:1.9}
html[lang=ar] .social,html[lang=ar] .rating__link{font-size:13px;font-weight:400}
html[lang=ar] .phone__c{font-size:13px}
html[lang=ar] .review__q{direction:ltr;text-align:left}
html[lang=ar] .footer__bottom{font-size:12px}

/* ---------- TABLET 768–1199 ---------- */
@media (max-width:1199px){
  :root{--margin:40px;--pad:128px}
  .nav__left{gap:22px}
  .nav__right{gap:18px}
  .nav a,.lang{letter-spacing:.2em}
  .hero{--h:auto;height:auto;padding-top:var(--nav-h)}
  .hero__stage{position:relative;inset:auto;height:620px;--bh:520px;--bw:222px}
  .hero__bottle{bottom:0;height:var(--bh)}
  .hero__floor{bottom:0;left:var(--margin);right:var(--margin)}
  .hero__word{bottom:250px;font-size:190px;letter-spacing:.03em;padding-left:.03em}
  .hero__fig{bottom:10px}
  .doors{position:relative;inset:auto;margin:28px var(--margin) 0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .door{width:auto}
  .hero__caption{position:relative;inset:auto;margin:36px var(--margin) 0}
  .hero__scroll{position:relative;left:auto;top:auto;transform:none;margin:28px auto 0;width:max-content;padding-bottom:28px}
  .title{font-size:46px}
  .title--xl{font-size:60px}
  .house__text{grid-column:1 / span 6}
  .house__photo{grid-column:7 / span 6;margin-top:0;height:580px;--hbh:440px}
  .fact__n{font-size:72px}
  .savoir__stage{grid-column:1 / span 6;height:560px;--sbh:380px}
  .savoir__num{font-size:380px}
  .savoir__fig{display:flex}
  .savoir__text{grid-column:7 / span 6}
  .principle{padding:40px 24px 0}
  .review{padding-inline-end:32px}
  .review + .review{padding-inline-start:32px}
  .route{padding:56px 24px}
  .route__t{font-size:30px}
  .route--sm{padding:40px 16px}
  .wholesale__text{grid-column:1 / span 6}
  .wholesale__steps{grid-column:7 / span 6}
  .faq__grid{grid-template-columns:1fr;gap:40px}
  .route--sm .route__t{font-size:19px}
  .route--sm .route__mail{font-size:12.5px}
  .legal__body{grid-column:4 / span 9}
}


/* nav fit (rev. 4: five section links) */
@media (max-width:1399px){ .nav__left a[href="#savoir-faire"]{display:none} }
@media (min-width:768px) and (max-width:1023px){
  .nav__left,.nav__right{display:none}
  .nav__burger{display:flex;flex-direction:column;justify-content:center;gap:7px;width:44px;height:44px;margin-inline-start:-10px;padding:0 10px}
  .nav__burger span{display:block;width:22px;height:1px;background:var(--chocolate)}
  .lang-switch--mob{display:inline-flex;align-items:center}
}

/* ---------- MOBILE ≤767 (canvas 390×844) ---------- */
@media (max-width:767px){
  :root{--margin:22px;--nav-h:60px;--pad:104px}
  body{font-size:15.5px;line-height:1.75}
  .nav__left,.nav__right{display:none}
  .nav__burger{display:flex;flex-direction:column;justify-content:center;gap:7px;width:44px;height:44px;margin-inline-start:-10px;padding:0 10px}
  .nav__burger span{display:block;width:22px;height:1px;background:var(--chocolate)}
  .lang-switch--mob{display:inline-flex;align-items:center}
  .nav__logo img{width:88px}
  .drawer{padding:72px var(--margin) 32px}
  .drawer__lang{margin-top:auto;padding-top:20px;border-top:1px solid var(--hair-12);display:flex;align-items:center;justify-content:space-between}
  .drawer__lang-label{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-80)}
  .hero__stage{height:514px;--bh:430px;--bw:184px}
  .hero__word{bottom:296px;font-size:104px;letter-spacing:.02em;padding-left:.02em}
  .hero__fig{inset-inline-start:auto;left:auto;right:var(--margin);bottom:10px;text-align:right;gap:4px}
  html[dir=rtl] .hero__fig{left:var(--margin);right:auto;text-align:left}
  .hero__fig .fig,.hero__fig .fig-name{font-size:9px}
  .hero__fig .fig-meta{display:none}
  .doors{margin:24px var(--margin) 0;gap:14px}
  .door{height:132px;padding:14px 14px 12px}
  .door__eyebrow{font-size:7.5px;letter-spacing:.22em}
  .door__title{flex-direction:column;align-items:stretch;margin-top:10px}
  .door__name{font-size:36px;line-height:1}
  .door__ar{font-size:14px;align-self:flex-end;margin-top:2px}
  .door__url{font-size:11px}
  .door__foot{padding-top:8px}
  .door .arrow{width:20px}
  .door__go .arrow{display:none}
  .door__wa{font-size:7.5px;letter-spacing:.18em;gap:5px}
  .door__wa::after{left:15px}
  .wa{width:10px;height:10px}
  html[lang=ar] .door__wa{font-size:11px}
  .soon{top:auto;bottom:46px;inset-inline-start:14px;inset-inline-end:auto;font-size:7.5px;letter-spacing:.2em;gap:6px}
  .soon::before{width:4px;height:4px}
  .hero__caption{margin:28px var(--margin) 0;align-items:flex-start}
  .cap__t{font-size:9px}
  .cap--ar .cap__t{font-size:12px}
  .cap__s{display:none}
  .hero__scroll{margin-top:20px;padding-bottom:20px}
  .hero__scroll-t{display:none}

  .title{font-size:34px;line-height:1.18;max-width:none}
  .title--xl{font-size:46px}
  .eyebrow{margin-bottom:24px}
  .title-rule{margin-top:26px}
  .deck{font-size:15.5px;margin-top:26px}

  .house{padding-bottom:88px}
  .house__grid{display:block}
  .house__photo{margin:56px 0 0;height:500px;--hbh:380px}
  .house__fig{bottom:20px;flex-wrap:wrap;gap:4px 12px}
  .house__fig .fig-meta{display:none}
  .house__body{margin-top:28px;font-size:15.5px}
  .facts{grid-template-columns:1fr;margin-top:88px;border-top:0}
  .fact{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:22px 0;border-top:1px solid var(--hair-20)}
  .fact + .fact{padding-inline-start:0;border-inline-start:0}
  .fact:last-child{border-bottom:1px solid var(--hair-20)}
  .fact dt{padding-bottom:6px}
  .fact dd{margin:0;align-items:flex-end;gap:6px;text-align:end}
  .fact__n{font-size:56px}
  .fact__s{font-size:12px}

  .savoir{padding-top:72px}
  .savoir__grid{display:flex;flex-direction:column}
  .savoir__stage{width:100%;height:440px;--sbh:300px}
  .savoir__num{font-size:300px;bottom:84px}
  .savoir__bottle,.savoir__floor{bottom:40px}
  .savoir__text{margin-top:56px;width:100%}
  .savoir__lead{font-size:15.5px;margin-top:28px}
  .steps{margin-top:40px}
  .step{grid-template-columns:44px 1fr;padding:20px 0}

  .philosophy__pattern{display:none}
  .principles{grid-template-columns:1fr;margin-top:64px}
  .principle{padding:36px 0;border-bottom:1px solid var(--hair-12)}
  .principle + .principle{border-inline-start:0}
  .principle__t{margin-top:20px}
  .philosophy__close{font-size:26px;margin-top:72px;padding-top:56px}
  .philosophy__lead{font-size:21px;margin-top:32px}

  .reviews__head{flex-direction:column;align-items:flex-start;gap:36px;padding-bottom:40px}
  .rating__n{font-size:76px}
  .reviews__grid{grid-template-columns:1fr}
  .review,.review + .review{padding:40px 0;border-inline-start:0;border-bottom:1px solid var(--hair-12)}
  .review__q{margin-top:22px;font-size:16px}
  .review__by{margin-top:22px}

  .routes{grid-template-columns:1fr;margin-top:56px}
  .route{min-height:220px;padding:48px 0}
  .route + .route{border-inline-start:0;border-top:1px solid var(--hair)}
  .route__t{font-size:28px;white-space:normal}
  .route__ar{font-size:15px}
  .route__mail{font-size:15.5px}
  .route .arrow{width:20px}
  .routes--minor{grid-template-columns:1fr;margin-top:0}
  /* design notes v4 (mobile) */
  .route{min-height:0;padding:40px 0}
  .route__t{font-size:26px}
  .route--sm{min-height:0;padding:28px 0}
  .route--sm .route__t{font-size:19px}
  .route__rule,.route--sm .route__rule{margin-top:20px}
  .route__mail,.route--sm .route__mail{margin-top:20px}
  .door__wa{font-size:9px;letter-spacing:.2em;gap:6px;padding:14px 0;margin:-14px 0}
  .door__wa::after{left:17px}
  .savoir__num{font-size:220px;letter-spacing:.12em;padding-left:.12em;bottom:96px}
  .savoir__fig{bottom:4px;flex-wrap:wrap;gap:4px 12px}
  .savoir__fig .fig-meta{display:none}
  .principle{padding:28px 0}
  .principle:nth-child(n+4){padding-top:28px}
  .principle__i{font-size:24px}
  .principle__t{margin-top:14px}
  .principle__b{margin-top:10px;max-width:34ch}
  .philosophy__lead{font-size:19px;line-height:1.55}
  .principles{margin-top:48px}
  .philosophy__close{margin-top:56px;padding-top:48px}
  .house{padding-bottom:var(--pad)}
  .savoir{padding-top:88px}
  .wholesale,.faq{--pad:88px}
  .wholesale__grid{display:flex;flex-direction:column}
  .wholesale__steps{margin-top:48px;width:100%}
  .wholesale__lead{font-size:15.5px;margin-top:28px}
  .cta{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 22px}
  .faq__item summary{font-size:16px;padding:20px 0}
  .faq__a{padding-inline-end:0}
  .route--sm{min-height:0;padding:32px 0}
  .route--sm + .route--sm{border-inline-start:0;border-top:1px solid var(--hair-12)}
  .routes--minor .route--sm:first-child{border-top:0}
  .route--sm .route__t{font-size:21px}
  .principle:nth-child(n+4){margin-top:0;padding-top:36px;border-top:0}
  .offices{grid-template-columns:1fr;margin-top:56px}
  .office{padding:0 0 36px}
  .office + .office{padding:36px 0;border-inline-start:0;border-top:1px solid var(--hair-12)}

  .footer{padding:56px 0 84px}
  .footer__top{grid-template-columns:1fr;justify-items:center;gap:28px}
  .footer__logo{justify-self:center}
  .footer__spacer{display:none}
  .footer__social{justify-self:center;margin-top:0;display:grid;grid-template-columns:auto auto;column-gap:36px;row-gap:6px}
  .footer__social li{justify-content:center}
  .footer__social li + li::before{display:none}
  .footer__bottom{flex-direction:column;align-items:center;text-align:center;gap:8px;padding-inline-end:0}

  .legal-hero{padding:calc(var(--nav-h) + 72px) 0 64px}
  .legal{padding:56px 0 104px}
  .legal__grid{display:block}
  .toc{position:static;margin-bottom:56px}
  .legal__intro{font-size:20px}
  .clause{padding-top:44px;margin-top:44px}
  .clause h2{font-size:26px}

  html[lang=ar] .title{font-size:30px}
  html[lang=ar] .title--xl{font-size:38px}
  html[lang=ar] .route__t{font-size:24px}
  html[lang=ar] .philosophy__lead{font-size:18px}
  html[lang=ar] .philosophy__close{font-size:21px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero__scroll-line{animation:none}
}
.clause code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:rgba(93,52,50,.06);padding:1px 5px;border-radius:2px}
/* Latin display elements keep Poppins in both languages */
.hero__word,.savoir__num,.fact__n,.rating__n,.door__name,.door__eyebrow,.door__url,.fig,.fig-name,.fig-meta,.review__q,.review__name,.route__addr,.route__i,.step__i,.principle__i,.cap--en,.footer__tag-en{font-family:var(--sans)}
html[dir=rtl] .house__fig,html[dir=rtl] .savoir__fig{inset-inline-start:auto;right:0}
html[dir=rtl] .fact__n{text-align:right}

/* ---------- rev. 4 (11 Oct 2026): ring pattern + Oryx editorial ---------- */
/* Philosophy: two faint fields of the Oqba ring pattern (caramel tint), faded to nothing with a radial mask */
.philosophy__pattern{top:-140px;left:-180px;right:auto;bottom:auto;width:680px;height:680px;background:url(../pattern/rings-caramel.svg) repeat;background-size:66px 66px;opacity:.34;-webkit-mask-image:radial-gradient(circle closest-side,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%)}
.philosophy__pattern--b{top:auto;left:auto;right:-200px;bottom:-180px;width:620px;height:620px}
html[dir=rtl] .philosophy__pattern{left:auto;right:-180px;-webkit-mask-image:radial-gradient(circle closest-side,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%)}
html[dir=rtl] .philosophy__pattern--b{right:auto;left:-200px}
.philosophy .wrap{position:relative;z-index:1}

@media (max-width:767px){
  .philosophy__pattern{display:block;width:420px;height:420px;top:-120px;left:-170px;background-size:52px 52px;opacity:.28}
  .philosophy__pattern--b{display:none}
  html[dir=rtl] .philosophy__pattern{left:auto;right:-170px}
}

/* ---------- rev. 5 (11 Oct 2026): one blush background + varied bottle compositions ---------- */
/* Single background: the blush #E6DDDC everywhere, hero surround included (hero image untouched) */
body,.house,.savoir,.philosophy,.reviews,.wholesale,.faq,.enquiries,.footer,.drawer{background:var(--blush)}
.nav.is-scrolled{background:rgba(230,221,220,.92)}
.route:hover{background:rgba(93,52,50,.03)}
.door:hover,.cta:hover{background:rgba(93,52,50,.03)}
.house + .savoir,.savoir + .philosophy,.philosophy + .reviews,.reviews + .wholesale,.wholesale + .faq,.faq + .enquiries{border-top:1px solid var(--hair-12)}

/* The House: Rosemary Oud pushed to the outer edge, large thin type to its side */
.house__photo{--hbh:600px}
.house__bottle{left:auto;inset-inline-end:-40px;transform:none}
.house__floor{right:-40px}
html[dir=rtl] .house__floor{right:0;left:-40px}
.house__word{position:absolute;inset-inline-start:-8px;bottom:64px;font-weight:100;font-size:190px;line-height:.74;letter-spacing:.08em;color:var(--tan);opacity:.8;pointer-events:none;user-select:none;white-space:nowrap;z-index:1}
.house__fig{bottom:auto;top:56px;flex-direction:column;gap:6px}


/* Wholesale: a stepped pair, Khor on the floor and Joud raised on a second line */
.duo{margin-top:72px;position:relative;display:flex;align-items:flex-end;gap:56px;padding-bottom:40px;--dh:400px}
.duo__item{position:relative;height:var(--dh);width:calc(var(--dh) * .4346)}
.duo__item img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}
.duo__item::before{content:"";position:absolute;left:50%;bottom:-18px;width:200%;height:36px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(93,52,50,.14),rgba(93,52,50,0));z-index:1}
.duo__item::after{content:"";position:absolute;inset-inline-start:-28px;inset-inline-end:-28px;bottom:0;height:1px;background:rgba(93,52,50,.25);z-index:1}
.duo__item--b{margin-bottom:96px}
.duo__fig{position:absolute;inset-inline-start:0;top:calc(100% + 14px);display:flex;gap:10px;align-items:baseline;line-height:16px;white-space:nowrap}

@media (max-width:1199px){
  .house__photo{--hbh:480px}
  .house__bottle{inset-inline-end:-24px}
  .house__floor{right:-24px}
  html[dir=rtl] .house__floor{right:0;left:-24px}
  .house__word{font-size:150px}
  .duo{--dh:340px;gap:40px}
}
@media (max-width:767px){
  .house__photo{height:520px;--hbh:420px}
  .house__bottle{inset-inline-end:-8px}
  .house__floor{right:-8px}
  html[dir=rtl] .house__floor{right:0;left:-8px}
  .house__word{font-size:84px}
  .house__fig{top:24px}
  .duo{--dh:300px;gap:36px;margin-top:56px}
  .duo__item--b{margin-bottom:64px}
}
/* Wholesale layout: text + stepped pair side by side, the four steps as one row beneath */
.wholesale__grid{align-items:end}
.duo{grid-column:7 / span 6;justify-content:center;margin-top:0}
.wholesale__steps{grid-column:1 / -1;padding-top:0;margin-top:104px}
.wholesale__steps .steps{display:grid;grid-template-columns:repeat(4,1fr);column-gap:40px}
.wholesale__steps .step{border-bottom:0;padding:32px 0 0;grid-template-columns:44px 1fr}
.wholesale__steps .cta{max-width:640px;margin-top:56px}
@media (max-width:1199px){
  .wholesale__steps .steps{grid-template-columns:repeat(2,1fr);row-gap:8px}
}
@media (max-width:767px){
  .duo{justify-content:flex-start;margin-top:56px}
  .wholesale__steps{margin-top:56px}
  .wholesale__steps .steps{grid-template-columns:1fr}
  .wholesale__steps .step{padding:20px 0;border-bottom:1px solid var(--hair-20)}
}
.house,.wholesale{overflow:hidden}

/* ---------- rev. 6 (11 Oct 2026): blush hero surround + uniform enquiry routes ---------- */
.hero,.legal-hero{background:var(--blush)}
.door:hover{background:rgba(93,52,50,.03)}
/* Every enquiry route uses the same title and address type, desktop, tablet, mobile and Arabic */
.route__t,.route--sm .route__t{margin-top:22px;font-weight:200;font-size:30px;line-height:1.2;letter-spacing:-.02em;white-space:normal;text-wrap:balance}
.route__ar,.route--sm .route__ar{margin-top:10px;font-size:15px}
.route__rule,.route--sm .route__rule{width:24px;margin-top:24px}
.route__mail,.route--sm .route__mail{margin-top:24px;font-size:15px;font-weight:400;letter-spacing:.03em;gap:12px}
.route .arrow,.route--sm .arrow{width:20px}
html[lang=ar] .route__t,html[lang=ar] .route--sm .route__t{font-size:26px;font-weight:300;letter-spacing:0;line-height:1.5}
@media (max-width:1199px){
  .route__t,.route--sm .route__t{font-size:24px}
  .route__mail,.route--sm .route__mail{font-size:14px}
  html[lang=ar] .route__t,html[lang=ar] .route--sm .route__t{font-size:22px}
}
@media (max-width:767px){
  .route__t,.route--sm .route__t{font-size:24px}
  .route__mail,.route--sm .route__mail{font-size:15px}
  html[lang=ar] .route__t,html[lang=ar] .route--sm .route__t{font-size:22px}
}

/* ==========================================================================
   LUXURY MINIMALIST PRELOADER & SENIOR DEV POLISH
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}

.preloader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__logo {
  width: 124px;
  height: auto;
  opacity: 0.95;
  animation: preloaderPulse 1.6s ease-in-out infinite alternate;
}

.preloader__track {
  width: 130px;
  height: 1.5px;
  background: var(--hair-20);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.preloader__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--caramel);
  border-radius: 2px;
  animation: preloaderFill 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes preloaderPulse {
  0% { opacity: 0.75; transform: scale(0.985); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes preloaderFill {
  0% { width: 0%; }
  55% { width: 72%; }
  100% { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    display: none !important;
  }
}

/* ==========================================================================
   RTL & ARABIC LITERARY TYPOGRAPHY POLISH
   ========================================================================== */
html[lang="ar"] {
  font-family: var(--ar);
}

html[lang="ar"] body {
  font-family: var(--ar);
  letter-spacing: 0;
  line-height: 1.85;
}

html[lang="ar"] .title,
html[lang="ar"] .hero__word,
html[lang="ar"] .cap__t {
  letter-spacing: 0;
}

html[lang="ar"] .eyebrow {
  letter-spacing: 0.08em;
  font-weight: 500;
}

html[lang="ar"] .door__name {
  font-family: var(--ar);
  font-size: 38px;
  font-weight: 400;
}

html[lang="ar"] .step__t,
html[lang="ar"] .principle__t {
  letter-spacing: 0;
}

/* ==========================================================================
   BACK TO TOP WITH CIRCULAR SCROLL PROGRESS
   ========================================================================== */
.back-to-top {
  position: fixed;
  bottom: 96px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(239, 234, 231, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hair-20);
  box-shadow: 0 4px 20px rgba(93, 52, 50, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.92);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: var(--cream);
  border-color: var(--caramel);
  box-shadow: 0 8px 24px rgba(93, 52, 50, 0.14);
  transform: translateY(-2px) scale(1.04);
}

.back-to-top:active {
  transform: translateY(0) scale(0.98);
}

.back-to-top__progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.back-to-top__track {
  fill: none;
  stroke: var(--hair-20);
  stroke-width: 2.25;
}

.back-to-top__indicator {
  fill: none;
  stroke: var(--caramel);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 125.66;
  transition: stroke-dashoffset 0.06s linear;
}

.back-to-top__arrow {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--chocolate);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ease), stroke 0.2s;
  position: relative;
  z-index: 1;
}

.back-to-top:hover .back-to-top__arrow {
  transform: translateY(-2px);
  stroke: var(--brown);
}

html[dir="rtl"] .back-to-top {
  right: auto;
  left: 30px;
}

@media (max-width: 767px) {
  .back-to-top {
    bottom: 86px;
    right: 24px;
    width: 44px;
    height: 44px;
  }
  html[dir="rtl"] .back-to-top {
    right: auto;
    left: 24px;
  }
  .back-to-top__arrow {
    width: 13px;
    height: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.2s, visibility 0.2s;
  }
  .back-to-top__indicator {
    transition: none;
  }
  .back-to-top:hover {
    transform: none;
  }
}

/* ==========================================================================
   FLOATING WHATSAPP CONCIERGE WIDGET (DUAL-REGION)
   ========================================================================== */
.wa-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.wa-widget * {
  pointer-events: auto;
}

/* Floating Action Button (FAB) */
.wa-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.38), 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s;
  outline: none;
}

.wa-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.48), 0 4px 12px rgba(0, 0, 0, 0.16);
  background: #20ba5a;
}

.wa-btn:active {
  transform: scale(0.96);
}

.wa-btn__icon {
  width: 28px;
  height: 28px;
  fill: #ffffff;
}

/* Pulse Beacon */
.wa-btn__pulse {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 13px;
  height: 13px;
  background-color: #ffffff;
  border: 2px solid #25D366;
  border-radius: 50%;
}

.wa-btn__pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.75;
  animation: wa-pulse 2s infinite ease-out;
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Card Popup */
.wa-card {
  position: absolute;
  bottom: 64px;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 36px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(93, 52, 50, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--hair-20);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

.wa-card.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.wa-card__header {
  background: #5D3432;
  color: #ffffff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.wa-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.wa-card__avatar svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
}

.wa-card__header-text {
  flex: 1;
  min-width: 0;
}

.wa-card__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ffffff;
  line-height: 1.25;
}

.wa-card__subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 3px;
  line-height: 1.2;
}

.wa-card__close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s, background-color 0.15s;
}

.wa-card__close:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Card Body */
.wa-card__body {
  padding: 12px;
  background: #faf8f7;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wa-card__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--hair-20);
  border-radius: 12px;
  text-decoration: none;
  color: #5D3432;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.wa-card__item:hover {
  border-color: var(--caramel);
  background-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(93, 52, 50, 0.08);
}

.wa-card__flag {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.wa-card__item-info {
  flex: 1;
  min-width: 0;
}

.wa-card__item-title {
  font-size: 13px;
  font-weight: 700;
  color: #5D3432;
  line-height: 1.3;
}

.wa-card__item-sub {
  font-size: 11px;
  color: #7E6A68;
  margin-top: 2px;
}

.wa-status {
  color: #25D366;
  font-weight: 600;
}

.wa-card__item-arrow {
  color: #B17D56;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.wa-card__item:hover .wa-card__item-arrow {
  transform: translateX(3px);
}

html[dir="rtl"] .wa-card__item:hover .wa-card__item-arrow {
  transform: translateX(-3px);
}

.wa-card__footer {
  padding: 10px 14px;
  background: #ffffff;
  border-top: 1px solid var(--hair-20);
  font-size: 11px;
  color: #8C7876;
  text-align: center;
}

/* Bilingual switching */
.wa-card__t-ar,
.wa-card__sub-ar,
.wa-item-t-ar,
.wa-card__f-ar {
  display: none;
}

html[lang="ar"] .wa-card__t-en,
html[lang="ar"] .wa-card__sub-en,
html[lang="ar"] .wa-item-t-en,
html[lang="ar"] .wa-card__f-en {
  display: none;
}

html[lang="ar"] .wa-card__t-ar,
html[lang="ar"] .wa-card__sub-ar,
html[lang="ar"] .wa-item-t-ar,
html[lang="ar"] .wa-card__f-ar {
  display: block;
}

/* RTL layout adjustments */
html[dir="rtl"] .wa-widget {
  right: auto;
  left: 28px;
  align-items: flex-start;
}

html[dir="rtl"] .wa-card {
  right: auto;
  left: 0;
  transform-origin: bottom left;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .wa-widget {
    bottom: 20px;
    right: 20px;
  }
  html[dir="rtl"] .wa-widget {
    right: auto;
    left: 20px;
  }
  .wa-btn {
    width: 48px;
    height: 48px;
  }
  .wa-btn__icon {
    width: 25px;
    height: 25px;
  }
  .wa-card {
    bottom: 58px;
    width: 295px;
  }
}