:root{
  --brand:#A87C45; --brand-deep:#7E5C2F; --brand-light:#C9A76A;
  --bg:#EFE7D8; --bg-sunk:#E6DBC7; --surface:#F8F3E9; --surface-warm:#E9DCC4; --ink:#1C1610;
  --text:#241C15; --text-2:#5C5041; --text-3:#847766;
  --text-inv:#F8F3E9; --text-inv-2:rgba(248,243,233,.7); --text-inv-3:rgba(248,243,233,.45);
  --border:rgba(110,97,82,.2); --border-strong:rgba(168,124,69,.32); --border-inv:rgba(201,167,106,.22);
  --display:'Fraunces',Georgia,serif; --ui:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --ar-display:'SIM Amiri','Amiri',Georgia,serif; --ar-ui:'SIM Tajawal','Tajawal',-apple-system,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:104px;
  --e1:0 1px 2px rgba(36,28,21,.05); --e2:0 10px 26px -10px rgba(36,28,21,.2);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-emph:cubic-bezier(.2,.8,.22,1);
  --maxw:1120px; --head:66px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);font-size:.97rem;
  font-weight:400;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.ar{font-family:var(--ar-ui);line-height:1.85}
body:has(#langtog:checked){font-family:var(--ar-ui);line-height:1.85}
body.ar h1,body.ar h2,body.ar h3{font-family:var(--ar-display);font-weight:700;letter-spacing:0;line-height:1.5}
body:has(#langtog:checked) h1,body:has(#langtog:checked) h2,body:has(#langtog:checked) h3{font-family:var(--ar-display);font-weight:700;letter-spacing:0;line-height:1.5}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.018em;line-height:1.2;color:var(--text)}
p{margin:0}ul{margin:0;padding:0;list-style:none}a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:rgba(168,124,69,.25)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s6)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{scroll-margin-top:var(--head)}

/* header */
header{position:sticky;top:0;z-index:100;background:rgba(239,231,216,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:background .3s var(--ease),border-color .3s var(--ease)}
header.stuck{background:rgba(240,232,219,.95);border-bottom-color:var(--border)}
.headbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  max-width:var(--maxw);margin:0 auto;padding:var(--s3) var(--s6);min-height:var(--head)}
#navtog{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
body.menu-open{overflow:hidden}
.burger:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:2px}
/* ── brand lockup: SIN monogram + inscriptional wordmark ── */
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;line-height:1}
.bmono{height:44px;width:auto;flex-shrink:0;transition:transform .4s var(--ease-emph)}
.brand:hover .bmono{transform:translateY(-2px)}
.bword{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:.94rem;letter-spacing:.2em;
  white-space:nowrap;color:var(--brand-deep)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .bword{background:linear-gradient(180deg,#C9A262 0%,#A87C45 48%,#7E5C2F 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.nav{display:flex;gap:var(--s6)}
.nav a{font-size:.87rem;font-weight:500;color:var(--text-2);padding:5px 0;position:relative;white-space:nowrap;
  transition:color .25s var(--ease)}
.nav a:after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--brand);
  transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease-emph)}
[dir=rtl] .nav a:after{transform-origin:right center}
:root:has(#langtog:checked) .nav a:after{transform-origin:right center}
.nav a:hover{color:var(--text)}
.nav a:hover:after,.nav a.on:after{transform:scaleX(1)}
.nav a.on{color:var(--text)}
.acts{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang{border:1px solid var(--border-strong);color:var(--brand-deep);font-size:.78rem;font-weight:600;
  padding:7px 13px;border-radius:999px;white-space:nowrap;transition:background .25s,color .25s}
.lang:hover{background:var(--brand-deep);color:var(--text-inv);border-color:var(--brand-deep)}
.burger{display:none;width:44px;height:44px;position:relative;cursor:pointer;margin-inline-end:-10px}
.burger i{position:absolute;left:10px;right:10px;height:2px;background:var(--text);display:block;
  transition:transform .3s var(--ease-emph),opacity .2s}
.burger i:nth-child(1){top:13px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:29px}
#navtog:checked ~ .acts .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
#navtog:checked ~ .acts .burger i:nth-child(2){opacity:0}
#navtog:checked ~ .acts .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* the menu also opens/closes with no JavaScript at all (phone quick-look previewers):
   the burger is a link to #menu, and tapping any menu link changes the target, which closes it */
.menu-anchor{position:fixed;top:0;left:0;width:0;height:0;overflow:hidden}
.burger-wrap{position:relative;display:inline-flex}
.burger-close{display:none}
:root:has(#menu:target) .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
:root:has(#menu:target) .burger i:nth-child(2){opacity:0}
:root:has(#menu:target) .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
:root:has(#menu:target) .wa-float{opacity:0;pointer-events:none}
@media (max-width:1040px){ /* nav collapses to the menu button (6 links need ~1010px) */
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--surface);box-shadow:0 18px 30px -18px rgba(36,28,21,.35);
    flex-direction:column;gap:0;max-height:0;overflow:hidden;transition:max-height .32s var(--ease-emph)}
  #navtog:checked ~ .nav{max-height:440px;border-bottom:1px solid var(--border)}
  :root:has(#menu:target) .nav{max-height:440px;border-bottom:1px solid var(--border)}
  :root:has(#menu:target) .burger-close{display:block;position:absolute;inset:0;z-index:2}
  .nav a{padding:15px var(--s6);border-top:1px solid var(--border);font-size:.95rem}
  .nav a:after{display:none}
  .burger{display:block}
}
@media (max-width:620px){.acts .headcta{display:none}} /* .acts prefix: must out-rank .btn{display:inline-block}, which comes later */

/* buttons */
.btn{display:inline-block;padding:14px 26px;font-size:.86rem;font-weight:600;text-align:center;
  border-radius:2px;transition:background .25s var(--ease),color .25s,border-color .25s,transform .15s var(--ease),box-shadow .25s}
.btn-primary{background:var(--text);color:var(--text-inv);box-shadow:var(--e1)}
.btn-primary:hover{background:var(--brand-deep);box-shadow:var(--e2);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{border:1px solid var(--border-strong);color:var(--text)}
.btn-secondary:hover{border-color:var(--brand);background:rgba(168,124,69,.07);transform:translateY(-2px)}
.headcta{padding:10px 17px;font-size:.78rem}
.on-dark .btn-primary{background:var(--brand-light);color:var(--ink)}
.on-dark .btn-primary:hover{background:#DCBE86}
.link{font-size:.85rem;font-weight:600;color:var(--brand-deep);position:relative;padding-bottom:2px}
.link:after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease-emph)}
[dir=rtl] .link:after{transform-origin:right center}
:root:has(#langtog:checked) .link:after{transform-origin:right center}
.link:hover:after{transform:scaleX(1)}

/* sections */
.band{padding:var(--s9) 0}
.band-sunk{background:var(--bg-sunk)}
.band-dark{background:var(--ink);color:var(--text-inv-2)}
.band-dark h2{color:var(--text-inv)}
.eyebrow{display:block;font-size:.68rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brand-deep);margin-bottom:var(--s4)}
body.ar .eyebrow{letter-spacing:0;text-transform:none;font-size:.8rem}
body:has(#langtog:checked) .eyebrow{letter-spacing:0;text-transform:none;font-size:.8rem}
.h-sec{font-size:clamp(1.5rem,2.9vw,2.2rem);max-width:20ch}
.lead{font-size:1.05rem;color:var(--text-2);max-width:56ch;margin-top:var(--s4)}
.band-dark .lead{color:var(--text-inv-2)}

/* motion — restrained, but perceptible.
   Only `.anim` hides things, and JS adds `.anim` only once it has an
   observer ready to un-hide them. */
.anim [data-r]{opacity:0;transform:translateY(26px);
  transition:opacity .65s var(--ease) calc(var(--i,0)*80ms),transform .8s var(--ease-emph) calc(var(--i,0)*80ms)}
.anim [data-r].in{opacity:1;transform:none}
.anim .imgr{clip-path:inset(0 0 100% 0);transition:clip-path .95s var(--ease-emph) calc(var(--i,0)*80ms)}
.anim .imgr.in{clip-path:inset(0 0 0 0)}
.anim .imgr img{transform:scale(1.1);transition:transform 1.3s var(--ease-emph) calc(var(--i,0)*80ms)}
.anim .imgr.in img{transform:scale(1)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;background:var(--surface-warm)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;gap:var(--s5);padding-block:var(--s9);padding-inline:var(--s8) var(--s7)}
.hero-t{font-size:clamp(2rem,4.7vw,3.5rem);line-height:1.13;max-width:15ch;font-weight:600}
.hero-s{font-size:1.06rem;color:var(--text-2);max-width:40ch}
.hero-c{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.hero-v{padding-block:var(--s7);padding-inline-end:var(--s7)}
.hero-v img{width:100%;height:auto;aspect-ratio:3/2;box-shadow:0 22px 48px -24px rgba(36,28,21,.45)}
.anim .hero-copy>*{opacity:0;animation:up .85s var(--ease-emph) forwards}
.anim .hero-copy>*:nth-child(1){animation-delay:.08s}
.anim .hero-copy>*:nth-child(2){animation-delay:.2s}
.anim .hero-copy>*:nth-child(3){animation-delay:.32s}
.anim .hero-copy>*:nth-child(4){animation-delay:.44s}
.anim .hero-v{opacity:0;animation:heroIn 1.1s var(--ease) .2s forwards}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@media (max-width:940px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:var(--s8) var(--s5) var(--s6);gap:var(--s4)}
  .hero-v{padding:0 var(--s5) var(--s7)}
}

/* mission */
.mission{text-align:center;padding-block:var(--s9)}
.mglyph{width:auto;height:84px;margin:0 auto var(--s5)}
.mtext{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,2vw,1.48rem);
  max-width:58ch;margin:0 auto;line-height:1.75}
body.ar .mtext{font-family:var(--ar-display);line-height:1.95}
body:has(#langtog:checked) .mtext{font-family:var(--ar-display);line-height:1.95}
.mtext p{margin-bottom:var(--s4)}
.mtext p:last-child{margin-bottom:0;color:var(--brand-deep)}

/* editorial figures */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);margin-top:var(--s7)}
@media (max-width:980px){.figs{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s5)}}
@media (max-width:520px){.figs{grid-template-columns:1fr;gap:var(--s5)}}
.figt{font-family:var(--ui);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-top:var(--s3)}
body.ar .figt{font-family:var(--ar-ui);letter-spacing:0;text-transform:none;font-size:.82rem}
body:has(#langtog:checked) .figt{font-family:var(--ar-ui);letter-spacing:0;text-transform:none;font-size:.82rem}
.fig{border-top:1px solid var(--border-strong);padding-top:var(--s4)}
[dir=rtl] .fign{text-align:right}
:root:has(#langtog:checked) .fign{text-align:right}
.fign{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.3vw,2.6rem);color:var(--brand-deep);line-height:1}
.figl{margin-top:var(--s2);color:var(--text-2);font-size:.9rem;line-height:1.6}
.srcs{margin-top:var(--s6);font-size:.8rem;color:var(--text-3);max-width:80ch}
.srch{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:var(--s2)}
body.ar .srch{letter-spacing:0;text-transform:none;font-size:.8rem}
body:has(#langtog:checked) .srch{letter-spacing:0;text-transform:none;font-size:.8rem}
.srcs li{position:relative;padding-block:3px;padding-inline-start:16px;line-height:1.6}
.srcs li:before{content:"";position:absolute;inset-inline-start:0;top:.78em;width:5px;height:5px;border-radius:50%;background:var(--brand)}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7)}
@media (max-width:860px){.tiers{grid-template-columns:1fr}}
.tcard{background:var(--surface);border:1px solid var(--border);padding:var(--s6) var(--s5);
  display:flex;flex-direction:column;transition:transform .3s var(--ease-emph),box-shadow .3s,border-color .3s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:var(--border-strong)}
.tcard h3{font-size:1.2rem}
.tcard .cap{color:var(--brand-deep);font-size:.88rem;font-weight:600;margin-top:var(--s1)}
.tcard p{margin-top:var(--s3);color:var(--text-2);font-size:.9rem;flex:1}
.tcard .link{margin-top:var(--s5);align-self:flex-start}

/* about */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
@media (max-width:880px){.about-grid{grid-template-columns:1fr;gap:var(--s6)}}
.about-grid .facts{margin-top:var(--s5)}
.about-img{overflow:hidden;width:100%;max-width:380px;justify-self:center}
.about-img img{width:100%;height:auto}
@media (max-width:880px){.about-img{max-width:320px;margin-inline:auto}}
.h-sub{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-top:var(--s9)}
.celln{display:block;font-family:var(--display);font-weight:500;font-size:1.3rem;color:var(--brand);margin-bottom:var(--s2)}
/* facts + guarantee */
.two{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s8);align-items:start}
@media (max-width:880px){.two{grid-template-columns:1fr;gap:var(--s5)}}
.facts li{display:flex;gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--border);
  font-size:.96rem;color:var(--text-2)}
.facts li:last-child{border-bottom:1px solid var(--border)}
.facts .dot{width:5px;height:5px;border-radius:50%;background:var(--brand);margin-top:11px;flex-shrink:0}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);margin-top:var(--s7)}
@media (max-width:860px){.g3{grid-template-columns:1fr;gap:var(--s5)}}
.cell{border-top:1px solid var(--border-strong);padding-top:var(--s4)}
.cell h3{font-size:1.08rem}
.cell ul{margin-top:var(--s3)}
.cell li{font-size:.9rem;color:var(--text-2);padding:var(--s2) 0;line-height:1.6;position:relative;padding-inline-start:15px}
.cell li:before{content:"";position:absolute;inset-inline-start:0;top:14px;width:7px;height:1px;background:var(--brand)}

/* machines */
.tiergroup{margin-top:var(--s8);scroll-margin-top:calc(var(--head) + 24px)}
.tierhead{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;padding-bottom:var(--s3);border-bottom:1px solid var(--border)}
.tierhead h3{font-size:1.22rem}
.tierhead .r{color:var(--brand-deep);font-size:.86rem;font-weight:600}
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s5)}
@media (max-width:880px){.models{grid-template-columns:1fr}}
.model{border:1px solid var(--border);background:var(--surface);overflow:hidden;
  transition:border-color .3s,box-shadow .3s,transform .3s var(--ease-emph)}
.model:hover{border-color:var(--border-strong);box-shadow:var(--e2);transform:translateY(-4px)}
.mimg{overflow:hidden;background:#DCC9A6}
.mimg img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .8s var(--ease-emph)}
.model:hover .mimg img{transform:scale(1.04)}
.specs{padding:var(--s4) var(--s5) var(--s5)}
.specs li{display:flex;justify-content:space-between;gap:var(--s3);padding:8px 0;font-size:.8rem;
  border-top:1px solid var(--border);color:var(--text-2)}
.specs li:first-child{border-top:none}
.specs li b{font-weight:600;color:var(--text)}
.specs li span{text-align:end}

/* fragrances */
.fr-banner{margin:var(--s6) auto 0;max-width:720px;overflow:hidden;border:1px solid var(--border)}
.fr-banner img{display:block;width:100%;height:auto}
.frags{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5);margin-top:var(--s5)}
.frags>.frag{flex:0 0 calc((100% - 2 * var(--s5)) / 3 - .1px);min-width:0}
@media (max-width:880px){.frags>.frag{flex-basis:calc((100% - var(--s5)) / 2 - .1px)}}
@media (max-width:560px){.frags>.frag{flex-basis:100%}}
.frag{border:1px solid var(--border);background:var(--surface);overflow:hidden;
  transition:border-color .3s,box-shadow .3s,transform .3s var(--ease-emph)}
.frag:hover{border-color:var(--border-strong);box-shadow:var(--e2);transform:translateY(-4px)}
/* text-only scent cards: a thin gold rule on top carries them now the photos are gone */
.frag{border-top:2px solid var(--brand-light)}
.fb{padding:var(--s5)}
.fb h3{font-size:1.02rem}
.fb .notes{color:var(--brand-deep);font-size:.8rem;margin-top:var(--s1);font-weight:600}
.fr-cta{margin-top:var(--s6);text-align:center;color:var(--text-2);font-size:1rem}
.fr-cta .link{margin-inline-start:var(--s2);white-space:nowrap}
.fb .fd{color:var(--text-2);font-size:.88rem;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border);line-height:1.6}

/* process */
.proc{margin-top:var(--s6)}
.pi{display:grid;grid-template-columns:72px 1fr;gap:var(--s5);padding:var(--s6) 0;border-top:1px solid var(--border)}
.pi:last-child{border-bottom:1px solid var(--border)}
.pn{font-family:var(--display);font-weight:500;font-size:1.8rem;color:var(--brand);line-height:1}
.pi h3{font-size:1.08rem;margin-bottom:var(--s2)}
.pi p{color:var(--text-2);font-size:.93rem;max-width:60ch}
@media (max-width:620px){.pi{grid-template-columns:42px 1fr;gap:var(--s3);padding:var(--s5) 0}.pn{font-size:1.35rem}}

/* contact */
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s8);margin-top:var(--s7)}
@media (max-width:900px){.cgrid{grid-template-columns:1fr;gap:var(--s6)}}
.f{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.f label{font-size:.8rem;font-weight:600;color:var(--text-2)}
input,select,textarea{font-family:var(--ui);font-size:16px;padding:12px 13px;width:100%;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:2px;
  transition:border-color .2s,box-shadow .2s}
body.ar input,body.ar select,body.ar textarea{font-family:var(--ar-ui)}
body:has(#langtog:checked) input,body:has(#langtog:checked) select,body:has(#langtog:checked) textarea{font-family:var(--ar-ui)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(168,124,69,.14)}
textarea{resize:vertical;min-height:100px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.ferr{display:none;font-size:.78rem;color:#9C3B2E}
.f.invalid .ferr{display:block}
.f.invalid input{border-color:#9C3B2E}
.f.invalid input:focus{box-shadow:0 0 0 3px rgba(156,59,46,.14)}
@media (max-width:560px){.frow{grid-template-columns:1fr}#cform .btn{width:100%}.fsubmit{flex-direction:column;align-items:stretch;text-align:center}}
.ok{display:none;margin-top:var(--s4);padding:14px 16px;background:rgba(79,107,69,.09);
  border:1px solid rgba(79,107,69,.28);color:#4F6B45;font-size:.9rem}
.ok.show{display:block;animation:up .45s var(--ease-emph) both}
.cinfo{border:1px solid var(--border);padding:var(--s6) var(--s5);background:var(--surface-warm);height:fit-content}
.cinfo h3{font-size:1.04rem;margin-bottom:var(--s4)}
.fsubmit{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.cact{display:flex;align-items:center;gap:14px;padding:14px 12px;margin-inline:-12px;border-radius:3px;
  transition:background .25s var(--ease),transform .25s var(--ease-emph)}
.cact+.cact{border-top:1px solid var(--border)}
.cact:hover{background:rgba(168,124,69,.1)}
.cico{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border);color:var(--brand-deep)}
.cico svg{width:18px;height:18px}
.ctx{display:flex;flex-direction:column;flex:1;min-width:0}
.cval{font-size:.95rem;font-weight:600;color:var(--text);overflow-wrap:anywhere}
[dir=rtl] .cval{text-align:right}
:root:has(#langtog:checked) .cval{text-align:right} /* numbers stay LTR for reading order but align with their Arabic labels */
.cgo{font-size:.78rem;font-weight:700;color:var(--brand-deep);white-space:nowrap}
.cgo:after{content:" \2192"}
[dir=rtl] .cgo:after{content:" \2190"}
:root:has(#langtog:checked) .cgo:after{content:" \2190"}
.cact-wa{background:var(--text);color:var(--text-inv);margin-bottom:var(--s2);box-shadow:var(--e2)}
.cact-wa:hover{background:#3A2E23;transform:translateY(-2px)}
.cact-wa .cico{background:#25D366;border-color:#25D366;color:#10281A}
.cact-wa .ilab{color:rgba(248,243,233,.62)}
.cact-wa .cval{color:var(--text-inv)}
.cact-wa .cgo{color:#6EE7A0}
.cact-wa+.cact{border-top:none}
.irow{padding:var(--s3) 0;border-top:1px solid var(--border);font-size:.9rem}
.irow:first-of-type{border-top:none}
.irow a{transition:color .25s var(--ease)}
.irow a:hover{color:var(--brand-deep)}
.ilab{color:var(--text-3);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:2px}
body.ar .ilab{text-transform:none;letter-spacing:0;font-size:.76rem}
body:has(#langtog:checked) .ilab{text-transform:none;letter-spacing:0;font-size:.76rem}

/* closing cta */
.ctab{position:relative;overflow:hidden;text-align:center;background:var(--ink)}
.ctab>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:.38}
.ctab:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,22,16,.3),rgba(28,22,16,.68))}
.ctab .wrap{position:relative;z-index:2}
.ctab h2{max-width:22ch;margin:0 auto;color:var(--text-inv)}
.ctab .btn{margin-top:var(--s5)}

/* footer — port of AnimatedWaveFooter.
   bg: gradient from background to primary/10; two seamless wave layers
   drift at different speeds; content sits above on z-index. */
.wfoot{position:relative;overflow:hidden;padding:80px 0 0;color:var(--text-2);
  background:linear-gradient(180deg,var(--bg) 0%,#E4D5BB 100%)}
.waves{position:absolute;left:0;right:0;bottom:0;height:320px;pointer-events:none;z-index:0}
.wave{position:absolute;bottom:0;left:0;width:200%;height:100%;will-change:transform}
.wave svg{display:block;width:100%;height:100%}
.w1{color:var(--brand);opacity:.07;animation:wave 26s linear infinite}
.w2{color:var(--brand);opacity:.11;animation:wave 38s linear infinite}
.wave path{fill:currentColor}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.wf-inner{position:relative;z-index:1}
.wf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
@media (max-width:600px){.wf-grid{grid-template-columns:1fr;gap:var(--s6)}}
.wf-col h3{font-family:var(--ui);font-size:1.02rem;font-weight:600;letter-spacing:0;margin-bottom:var(--s4);color:var(--text)}
body.ar .wf-col h3{font-family:var(--ar-ui)}
body:has(#langtog:checked) .wf-col h3{font-family:var(--ar-ui)}


.wf-links a{display:block;width:fit-content;font-size:.9rem;padding:4px 0;color:var(--text-2);
  transition:color .25s var(--ease)}
.wf-links a:hover{color:var(--brand-deep)}
.wf-addr{font-style:normal;font-size:.9rem;line-height:1.55}
.wf-addr p{padding:4px 0}
.wf-addr a{color:var(--brand-deep);text-decoration:underline;text-decoration-color:rgba(126,92,47,.35);text-underline-offset:3px;transition:color .25s var(--ease),text-decoration-color .25s}
.wf-addr a:hover{color:var(--text);text-decoration-color:currentColor}

.wf-social{display:flex;gap:var(--s2)}
.wf-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--text-2);transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease-emph)}
.wf-icon svg{width:17px;height:17px}
.wf-icon:hover{background:rgba(168,124,69,.14);color:var(--brand-deep);transform:translateY(-2px)}

.wf-bottom{margin-top:var(--s7);border-top:1px solid var(--border);padding:var(--s6) 0 96px;
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);text-align:center}
.wf-logo{width:132px;height:auto}
.wf-bottom p{font-size:.84rem;color:var(--text-3)}

/* floating WhatsApp — on every page */
.wa-float{position:fixed;z-index:90;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-end:20px;
  display:flex;align-items:center;gap:10px;height:54px;padding-inline:16px 20px;border-radius:999px;
  background:var(--text);color:var(--text-inv);font-size:.86rem;font-weight:700;
  box-shadow:0 12px 30px -10px rgba(36,28,21,.5);transition:transform .25s var(--ease-emph),background .25s var(--ease)}
.wa-float svg{width:24px;height:24px;color:#25D366;flex-shrink:0}
.wa-float:hover{transform:translateY(-3px);background:#3A2E23}
body.menu-open .wa-float{opacity:0;pointer-events:none}

/* our systems in action — two video slots */
.vids{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s6);margin-top:var(--s7)}
.vid{margin:0;flex:0 1 380px;min-width:0}
.vframe video:not([controls]){cursor:pointer}
.vframe{position:relative;aspect-ratio:9/16;background:var(--ink);border:1px solid var(--border);overflow:hidden}
.vframe video{display:block;width:100%;height:100%;object-fit:contain;background:var(--ink)}
.vframe img{display:block;width:100%;height:100%;object-fit:cover}
/* full screen: tap a tile → it becomes a black, edge-to-edge viewer (CSS :target, no script needed) */
.vid{position:relative}
.mopen{position:absolute;inset:0;z-index:2;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.mopen:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.mclose{display:none}
.vid:target .vframe{position:fixed;inset:0;z-index:10000;width:auto;height:auto;aspect-ratio:auto;border:0;background:#000;clip-path:none}
.vid:target .vframe video,.vid:target .vframe img{width:100%;height:100%;object-fit:contain;background:#000;transform:none}
.vid:target .mopen{display:none}
.vid:target .mclose{display:flex;align-items:center;justify-content:center;position:fixed;z-index:10001;
  top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font:300 32px/1 Arial,sans-serif;text-decoration:none}
:root:has(.vid:target){overflow:hidden}
:root:has(.vid:target) .wa-float{display:none}
.vid figcaption{margin-top:var(--s3);font-size:.86rem;color:var(--text-2);text-align:center}
.soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  background:radial-gradient(ellipse at 50% 42%,#3A2A1E 0%,var(--ink) 72%);color:rgba(248,243,233,.6);
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
body.ar .soon{letter-spacing:0;text-transform:none;font-size:.86rem}
body:has(#langtog:checked) .soon{letter-spacing:0;text-transform:none;font-size:.86rem}
.soon svg{width:46px;height:46px;color:var(--brand-light);opacity:.85}


@media (max-width:760px){
  :root{--s9:64px;--s8:48px}
  .wa-float{width:56px;height:56px;padding:0;justify-content:center}
  .wa-label{display:none}
  .wrap{padding:0 var(--s5)}
  .headbar{padding:10px var(--s5)}
  .hero-t,.hero-s,.h-sec{max-width:none}
  .hero-c{flex-direction:column;align-items:stretch}
  .mission{padding-block:var(--s8)}
  .cinfo{padding:var(--s5) var(--s4)}
  .wfoot{padding-top:var(--s8)}
  .waves{height:220px}
}
@media (max-width:520px){.bmono{height:38px}.bword{font-size:.82rem;letter-spacing:.16em}}
@media (max-width:380px){.bword{font-size:.74rem;letter-spacing:.12em}.brand{gap:8px}}
@media (max-width:350px){.bword{font-size:.66rem;letter-spacing:.08em}.brand{gap:6px}.bmono{height:34px}.acts .lang{padding:12px 10px}.acts{gap:6px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wave{animation:none!important}
  *,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .anim [data-r],.anim .hero-copy>*,.anim .hero-v{opacity:1!important;transform:none!important}
  .anim .imgr{clip-path:none!important}
  .anim .imgr img{transform:none!important}
}

/* Arabic: letter-spacing breaks cursive joining, so it is always 0 on translated text */
body.ar [data-ar],body.ar [data-ar] *{letter-spacing:0}
so it is always 0 on translated text */
body:has(#langtog:checked) [data-ar],body:has(#langtog:checked) [data-ar] *{letter-spacing:0}

/* ───────── phones ─────────
   Swipeable rows for machines and fragrances (instead of a very long stack),
   44px tap targets, nothing under 12px, no sticky hover effects on touch. */
.cdots{display:none}
@media (max-width:760px){
  .models{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;gap:var(--s4);margin-inline:calc(-1 * var(--s5));padding:4px var(--s5) var(--s2);
    scroll-padding-inline:var(--s5);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .models::-webkit-scrollbar{display:none}
  .models>.model{flex:0 0 84%;scroll-snap-align:start;min-width:0}
  /* cards inside a swipe row are always shown; they don't wait for the scroll reveal */
  .anim .models [data-r]{opacity:1;transform:none}
  .anim .models .imgr{clip-path:none}
  .anim .models .imgr img{transform:none}
  .cdots{display:flex;justify-content:center;gap:8px;margin-top:var(--s4)}
  .cdots i{width:7px;height:7px;border-radius:50%;background:var(--border-strong);transition:background .25s,transform .25s}
  .cdots i.on{background:var(--brand-deep);transform:scale(1.25)}
  .model:hover,.frag:hover{transform:none;box-shadow:none}
  .model:hover .mimg img{transform:none}

  /* video: a comfortable size instead of a full-screen-tall frame */
  /* video and photo stay side by side on phones */
  .vids{flex-wrap:nowrap;gap:var(--s3)}
  .vid{flex:1 1 0}

  /* tap targets */
  .lang{padding:12px 14px}
  .link{display:inline-block;padding-block:12px}
  .tcard .link{margin-top:var(--s2)}
  .wf-links a{padding:10px 0}
  .wf-addr a{display:inline-block;padding-block:10px}
  .wf-addr p{padding:0}

  /* legibility: nothing below 12px */
  .eyebrow,.srch,.ilab{font-size:.75rem}
  .figt{font-size:.78rem}
  .srcs li{font-size:.8rem}
  body.ar .mtext{font-size:1.14rem}
body:has(#langtog:checked) .mtext{font-size:1.14rem}
}
@media (max-width:440px){
  /* contact rows: the row itself is the button, so keep just the arrow and give the value the room */
  .cgo{font-size:0}
  .cgo:after{font-size:1rem}
  .cval{font-size:.92rem;overflow-wrap:anywhere}
}

/* both languages live in the page; the checkbox decides which one shows */
.langtog{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.lang{cursor:pointer;user-select:none;-webkit-user-select:none}
:root:has(.langtog:focus-visible) .lang{outline:2px solid var(--brand);outline-offset:3px}
.t-en{display:contents}.t-ar{display:none}
.t-ar-el{display:none}
:root:has(#langtog:checked){direction:rtl}
:root:has(#langtog:checked) .t-en{display:none}
:root:has(#langtog:checked) .t-ar{display:contents}
:root:has(#langtog:checked) .t-en-el{display:none}
:root:has(#langtog:checked) .t-ar-el{display:block}