:root{
  --ivory:#faf8ed;--ivory2:#f3efdd;--ink:#262321;--ink2:#5a5651;--line:#d9d2bb;
  --orange:#f35b1b;--orange-d:#c9440c;--indigo:#30339a;--wheat:#b98d43;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fa:Vazirmatn,"Segoe UI",Tahoma,"Noto Naskh Arabic","Noto Sans Arabic",Arial,sans-serif;
  --pad:clamp(20px,5vw,88px);--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--fa);line-height:1.7;overflow-x:hidden;
  background-image:radial-gradient(rgba(120,100,50,.05) 1px,transparent 1px);background-size:3px 3px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--orange);outline-offset:6px;border-radius:2px}
[lang=en]{font-family:var(--sans)}

.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:50;pointer-events:none}
.progress i{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:right;will-change:transform}

.top{position:absolute;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:clamp(14px,2.4vw,32px) var(--pad)}
.logo img{width:clamp(110px,11vw,160px);mix-blend-mode:multiply}
.top-mail,.mail-text{font:500 15px/1.4 var(--sans);letter-spacing:.04em}
.top-mail{position:relative;padding:6px 0}
.top-mail::after,.mail-text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(.0);transform-origin:left;transition:transform .5s var(--ease)}
.top-mail:hover::after,.top-mail:focus-visible::after{transform:scaleX(1)}
.top-mail:hover{color:var(--orange-d)}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(16px,4vw,72px);padding:clamp(100px,14vh,150px) var(--pad) clamp(40px,7vh,80px);max-width:1760px;margin:auto}
.hero-copy{position:relative;z-index:2;min-width:0}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 clamp(14px,3vh,34px);font-size:clamp(15px,1.3vw,19px);color:var(--ink2);letter-spacing:.02em}
.rule{display:block;width:48px;height:1px;background:var(--orange);transform-origin:right}
.wordmark{margin:0;font:400 clamp(46px,7.4vw,150px)/1 var(--serif);letter-spacing:.05em;max-width:100%;color:var(--ink);text-align:left}
.mask{display:block;overflow:hidden;padding:.06em 0 .12em}
.line{display:block}
.sub{margin:clamp(10px,2vh,22px) 0 0;font:400 clamp(13px,1.45vw,22px)/1.4 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--indigo);text-align:left}
.sub-fa{margin:clamp(18px,3vh,34px) 0 0;font-size:clamp(18px,1.9vw,30px);color:var(--ink2);max-width:28ch}
.cue{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(28px,6vh,64px);font:500 13px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.cue .rule{width:56px;transition:width .5s var(--ease)}
.cue:hover .rule,.cue:focus-visible .rule{width:96px}

.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-width:0}
.art-wrap{position:relative;width:min(100%,640px);will-change:transform;transition:transform .6s var(--ease)}
.art{width:100%;mix-blend-mode:multiply;will-change:transform}
.halo{position:absolute;inset:6% -8% 6% -8%;border-radius:50%;background:radial-gradient(closest-side,rgba(185,141,67,.20),rgba(185,141,67,0));z-index:-1}

/* PRODUCTS */
.products,.contact{max-width:1760px;margin:auto;padding:clamp(72px,12vh,150px) var(--pad)}
.section-head{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:6px 28px;margin-bottom:clamp(36px,6vh,72px)}
.kicker{margin:0;font:500 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--wheat);grid-column:1/-1}
h2{margin:0;font-weight:500;font-size:clamp(30px,3.6vw,56px);line-height:1.3}
.hline{display:block;height:1px;background:var(--line);transform-origin:right;margin-bottom:.9em}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line)}
.item{position:relative;display:flex;flex-direction:column;gap:6px;padding:clamp(22px,3vw,44px) clamp(14px,1.8vw,28px) clamp(26px,3.4vw,52px);border-inline-start:1px solid var(--line);transition:background .5s var(--ease),transform .5s var(--ease)}
.item:first-child{border-inline-start:0}
.num{font:400 13px/1 var(--sans);letter-spacing:.2em;color:var(--wheat);margin-bottom:clamp(30px,6vw,90px);transition:color .4s}
.item .fa{font-size:clamp(22px,2.2vw,34px);font-weight:500;line-height:1.4;color:var(--ink)}
.item .en{font:400 clamp(14px,1.2vw,19px)/1.4 var(--sans);letter-spacing:.08em;color:var(--ink2);text-align:start}
.item .en{text-align:right}
.bar{position:absolute;inset:auto 0 0 0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
@media(hover:hover){
  .item:hover{background:var(--ivory2);transform:translateY(-6px)}
  .item:hover .bar{transform:scaleX(1)}
  .item:hover .num{color:var(--orange-d)}
}

/* STATEMENT */
.statement{position:relative;background:var(--ink);color:var(--ivory);overflow:hidden;padding:clamp(80px,16vh,190px) var(--pad)}
.furrows{position:absolute;inset:-20% -10%;background:repeating-linear-gradient(112deg,transparent 0 46px,rgba(185,141,67,.10) 46px 47px);animation:drift 60s linear infinite;pointer-events:none}
@keyframes drift{to{transform:translate3d(94px,0,0)}}
.statement-inner{position:relative;max-width:1100px;margin:auto}
.big-fa{margin:0;font-size:clamp(28px,4.4vw,72px);line-height:1.5;font-weight:500}
.big-en{margin:clamp(16px,3vh,32px) 0 0;font:300 clamp(15px,1.6vw,24px)/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#d4b778;text-align:right}

/* CONTACT */
.contact{text-align:center;padding-bottom:clamp(90px,16vh,190px)}
.contact .kicker{text-align:center}
.mail{display:inline-flex;align-items:center;gap:.5em;margin-top:clamp(24px,5vh,48px);padding:.3em .1em;font:300 clamp(22px,5.2vw,84px)/1.2 var(--serif);letter-spacing:.01em;max-width:100%}
.mail-text{position:relative;font:inherit;letter-spacing:inherit;padding-bottom:.12em;overflow-wrap:anywhere}
.mail-text::after{height:2px;background:var(--orange);transform:scaleX(1);transform-origin:left;transition:transform .6s var(--ease)}
.arrow{color:var(--orange);font-family:var(--sans);transition:transform .5s var(--ease)}
.mail:hover .arrow,.mail:focus-visible .arrow{transform:translateX(.3em)}
.mail:hover .mail-text{color:var(--orange-d)}
.mail:hover .mail-text::after,.mail:focus-visible .mail-text::after{background:var(--orange-d)}

.foot{display:flex;align-items:center;justify-content:center;gap:16px;padding:28px var(--pad) 36px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2);letter-spacing:.14em}
.dot{width:4px;height:4px;border-radius:50%;background:var(--orange)}

/* MOTION (JS-gated so content is always visible without JS) */
.js .reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0s) + var(--i,0)*.09s)}
.js .reveal.in{opacity:1;transform:none}
.js .line{transform:translate3d(0,105%,0);transition:transform 1.3s var(--ease);transition-delay:var(--d,0s)}
.js .go .line{transform:none}
.js .rule,.js .hline{transform:scaleX(0);transition:transform 1.2s var(--ease) .2s}
.js .go .rule,.js .reveal.in .rule,.js .in .hline,.js .section-head.in .hline{transform:scaleX(1)}
.js .hero-art{opacity:0;transition:opacity 1.8s var(--ease) .3s}
.js .go .hero-art{opacity:1}
.js .art{transform:scale(1.04);transition:transform 2.4s var(--ease) .3s}
.js .go .art{transform:none}

/* RESPONSIVE */
@media(max-width:1100px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .item{grid-column:span 2}
  .item:nth-child(n+4){grid-column:span 3}
  .item:nth-child(4){border-inline-start:0}
  .item:nth-child(n+4){border-top:1px solid var(--line)}
  .num{margin-bottom:40px}
}
@media(max-width:820px){
  .hero{grid-template-columns:1fr;min-height:0;gap:8px;padding-top:110px}
  .hero-art{order:-1;margin-bottom:0}
  .art-wrap{width:min(62vw,340px)}
  .hero-copy{text-align:start}
  .wordmark{font-size:clamp(40px,13.4vw,110px);letter-spacing:.04em}
  .sub{letter-spacing:.22em}
}
@media(max-width:600px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .item,.item:nth-child(n+4){grid-column:auto;border-top:1px solid var(--line);border-inline-start:0}
  .item:nth-child(even){border-inline-start:1px solid var(--line)}
  .item:nth-child(1),.item:nth-child(2){border-top:0}
  .item:last-child{grid-column:1/-1;border-inline-start:0}
  .num{margin-bottom:22px}
  .top-mail{font-size:13px}
  .section-head{grid-template-columns:1fr}.hline{display:none}
}
@media(max-width:360px){.top-mail{display:none}.sub{letter-spacing:.14em}}
@media(min-width:1500px){.hero{min-height:min(100svh,1080px)}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .line,.js .hero-art,.js .art,.js .rule,.js .hline{opacity:1!important;transform:none!important}
  .progress{display:none}
}