/* ============================================================================
   Al-Naseem landing — main stylesheet
   Converted from the original canvas design; enhanced per the pre-build audit:
   - accessible ink tokens (headings/labels/buttons pass WCAG AA in light mode)
   - Arabic-tuned display type (line-height 1.3, no negative tracking)
   - real mobile navigation (hamburger + sheet) below 900px
   ========================================================================== */

/* ── design tokens ─────────────────────────────────────────────────────── */
:root{
  --bg:#FAFBF6; --bg2:#F0F5E4; --surf:#FFFFFF;
  --ink:#111111; --ink2:#4A573A; --line:#DFE7CD;

  /* brand greens — decorative (backgrounds, strokes, fills) */
  --g:#84B023; --g-d:#647F0F; --g-l:#92C540; --g-soft:#EDF5DA; --onG:#FFFFFF;

  /* accessible greens — anything that is TEXT uses these
     (#4A6B10 ≈ 6:1 and #5C730E ≈ 5.2:1 on --bg; the old --g/--g-l sat
     below 3:1 and made every heading and label the faintest ink on the page) */
  --head:#4A6B10;        /* section headings */
  --acc-ink:#5C730E;     /* labels, stat numbers, green micro-text */
  --btn:#5C730E; --btn-hov:#4A5E0B; /* primary button ground, white text on top */

  --shadow:0 30px 70px -40px rgba(20,26,8,.45); --sheen:rgba(255,255,255,.55);
  --deep:#161A0E; --onDeep:#FAFBF6; --glow:color-mix(in oklab,var(--g) 70%,transparent);

  --dis:'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic','Readex Pro',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
html[data-theme="dark"]{
  --bg:#151A0E; --bg2:#1C2313; --surf:#232D17;
  --ink:#F0F4E6; --ink2:#B8C79B; --line:#394822;
  --g:#A2CF48; --g-d:#84B023; --g-l:#C0E27A; --g-soft:#2B3916; --onG:#161A06;
  --head:#C0E27A; --acc-ink:#B9DB6E;
  --btn:#A2CF48; --btn-hov:#C0E27A;
  --deep:#1C2313; --onDeep:#F0F4E6; --glow:color-mix(in oklab,var(--g) 34%,transparent);
  --shadow:0 30px 70px -40px rgba(0,0,0,.8); --sheen:color-mix(in oklab,var(--g-l) 13%,transparent);
}

/* ── base ──────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
a{color:var(--acc-ink);text-decoration:none}
a:hover{color:var(--g-d)}
p{text-wrap:pretty;margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--dis);font-weight:600;line-height:1.15;
  letter-spacing:-.02em;text-wrap:balance}
/* Arabic display type needs air: taller lines, no Latin tracking */
[data-lang="ar"] :is(h1,h2,h3,h4){line-height:1.3;letter-spacing:0}
::selection{background:var(--g);color:var(--onG)}
:focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:10px}

.container{width:min(1300px,100%);margin-inline:auto}

/* anchored sections stop below the fixed header */
section[id]{scroll-margin-top:96px}

/* ── bilingual copy: only the active language paints ───────────────────── */
[data-l]{display:none}
[data-lang="ar"] [data-l="ar"]{display:inline}
[data-lang="en"] [data-l="en"]{display:inline}

/* Arabic never uses the Latin mono face — it breaks joining at label sizes */
.label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--acc-ink)}
[data-lang="ar"] .label:not([dir="ltr"]){font-family:var(--body);font-size:13.5px;
  font-weight:500;letter-spacing:0;text-transform:none}

/* ── section scaffold ──────────────────────────────────────────────────── */
.section-head{display:flex;flex-direction:column;gap:16px}
.section-head h2{font-size:clamp(34px,4.6vw,64px);color:var(--head)}
.section-head .lede{color:var(--ink2);max-width:46ch;font-size:clamp(16px,1.35vw,19px)}

/* ── buttons ───────────────────────────────────────────────────────────── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  white-space:nowrap;height:54px;padding-inline:28px;border-radius:14px;
  font-family:var(--dis);font-weight:500;font-size:15px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,
    background .3s ease,border-color .3s ease,color .3s ease}
.cta--primary{background:var(--btn);color:var(--onG);
  box-shadow:0 14px 30px -20px var(--glow)}
.cta--primary:hover{background:var(--btn-hov);color:var(--onG);
  transform:translateY(-3px);box-shadow:0 20px 38px -20px var(--glow)}
.cta--ghost{border:1px solid var(--line);color:var(--ink)}
.cta--ghost:hover{background:var(--g-soft);border-color:var(--g);color:var(--ink);
  transform:translateY(-3px)}
.cta .dash{display:block;width:16px;height:1.6px;background:currentColor}

/* ── intro: simple brand reveal ────────────────────────────────────────── */
html[data-intro="off"] .intro{display:none}
.intro{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:var(--bg);
  animation:introOut .65s 1.85s cubic-bezier(.76,0,.24,1) forwards,
    introGone .01s 2.55s forwards}
.intro__stack{display:grid;justify-items:center;gap:22px}
.intro__stack img{height:104px;width:auto;opacity:0;
  animation:introWord .8s .15s cubic-bezier(.2,.7,.2,1) both}
.intro__bar{width:150px;height:3px;border-radius:99px;background:var(--g-soft);
  overflow:hidden;opacity:0;animation:introWord .5s .45s ease both}
.intro__bar i{display:block;width:100%;height:100%;border-radius:99px;
  background:var(--g);transform-origin:0 50%;transform:scaleX(0);
  animation:introLine 1.1s .5s cubic-bezier(.4,0,.2,1) forwards}
.intro .label{white-space:nowrap;opacity:0;letter-spacing:.32em;color:var(--ink2);
  animation:introWord .7s .6s ease both}

/* ── header / nav ──────────────────────────────────────────────────────── */
.site-header{position:fixed;top:14px;left:50%;z-index:400;width:min(1300px,95vw);
  transform:translateX(-50%);
  transition:transform .55s cubic-bezier(.5,0,.2,1),opacity .4s ease;
  will-change:transform}
.nav{position:relative;height:70px;display:flex;align-items:center;
  padding-inline:190px 168px;border-radius:20px;border:1px solid var(--line);
  background:color-mix(in oklab,var(--surf) 62%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 18px 44px -30px rgba(11,30,18,.4)}
.nav__logo{position:absolute;inset-inline-start:12px;top:50%;
  transform:translateY(-50%);display:flex;align-items:center;padding:5px;
  border-radius:14px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav__logo:hover{transform:translateY(-50%) scale(1.04)}
.nav__logo span{display:grid;place-items:center;width:160px;height:60px;overflow:hidden}
.nav__logo img{height:58px;width:auto;max-width:160px;object-fit:contain}
.nav__links{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;
  font-size:14.5px;font-weight:500}
.nav__links a{padding:9px 14px;border-radius:11px;color:var(--ink);
  transition:color .25s ease,background .25s ease,transform .25s ease}
.nav__links a:hover{background:var(--g-soft);color:var(--acc-ink);transform:translateY(-2px)}
.nav__links a[data-cur="1"]{color:var(--acc-ink);background:var(--g-soft)}
.nav__tools{position:absolute;top:50%;
  transform:translateY(-50%);display:flex;align-items:center;gap:8px}
/* the tools row is dir="ltr" for its own content, so its inline-end would
   resolve to the wrong side — position it from the page direction instead */
#root[dir="rtl"] .nav__tools{left:12px;right:auto}
#root[dir="ltr"] .nav__tools{right:12px;left:auto}
.lang-switch{display:flex;align-items:center;gap:3px;padding:4px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--line)}
.lang-switch button{min-width:44px;height:36px;border-radius:9px;
  font-family:var(--dis);font-size:13px;font-weight:600;color:var(--ink2);
  transition:all .25s ease}
.lang-switch button:hover{color:var(--acc-ink)}
.lang-switch button[lang="en"]{font-family:var(--mono);font-size:12px;font-weight:500}
[data-lang="ar"] .lang-switch button[lang="ar"],
[data-lang="en"] .lang-switch button[lang="en"]{background:var(--btn);color:var(--onG)}
.theme-toggle{width:44px;height:44px;border-radius:12px;display:grid;
  place-items:center;background:var(--bg2);border:1px solid var(--line);
  transition:all .3s cubic-bezier(.2,.7,.2,1)}
.theme-toggle:hover{background:var(--g-soft);transform:translateY(-2px) rotate(-12deg)}
html[data-theme="dark"] [data-ico="sun"]{display:none}
html:not([data-theme="dark"]) [data-ico="moon"]{display:none}

/* burger — hidden on desktop */
.nav__burger{display:none;width:44px;height:44px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--line);place-items:center}
.nav__burger i{position:relative;display:block;width:18px;height:2px;border-radius:2px;
  background:var(--ink);transition:background .2s ease}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;left:0;
  width:18px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav__burger i::before{top:-6px}
.nav__burger i::after{top:6px}
.nav__burger[aria-expanded="true"] i{background:transparent}
.nav__burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:390;display:none;flex-direction:column;
  gap:8px;padding:110px 8vw 40px;background:var(--bg);overflow-y:auto}
.sheet[data-open="1"]{display:flex}
.sheet a{display:flex;align-items:baseline;gap:14px;padding:14px 4px;
  border-bottom:1px solid var(--line);color:var(--ink);
  font-family:var(--dis);font-weight:600;font-size:clamp(22px,6vw,30px)}
.sheet a:hover{color:var(--acc-ink)}
.sheet a .num{font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--acc-ink)}
.sheet__tools{display:flex;align-items:center;gap:12px;margin-top:22px}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;display:grid;align-items:center;
  padding:130px 5vw 56px}
.hero__halo{position:absolute;top:-18vh;inset-inline-end:-10vw;width:70vw;height:70vw;
  max-width:900px;max-height:900px;border-radius:50%;
  background:radial-gradient(circle,var(--g-soft),transparent 68%);pointer-events:none}
.hero product-scene{position:absolute;inset:0;z-index:1}
.hero__inner{position:relative;z-index:3}
.hero__stage{position:relative;min-height:min(70vh,600px)}

.slide{position:absolute;inset:0;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.slide[data-on="0"]{opacity:0;transform:translateY(16px) scale(.985);pointer-events:none}
.slide[data-on="1"]{z-index:4}
.slide__grid{height:100%;display:grid;align-items:center}
.slide__copy{display:flex;flex-direction:column;gap:22px;width:min(46%,560px)}
.slide__kicker{display:flex;align-items:center;gap:12px}
.slide__kicker .tick{width:26px;height:1px;background:var(--g)}
.slide__copy h1{font-size:clamp(42px,7.2vw,96px);font-weight:600}
.slide__copy .tagline{font-size:clamp(16px,1.45vw,20px);color:var(--ink2);max-width:44ch}
.slide__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* the poster slides paint a saturated fruit field, so copy inverts to
   light-on-field with a soft shadow for contrast */
.slide--poster .slide__copy{color:#fff}
.slide--poster .slide__copy h1{color:#fff;text-shadow:0 2px 18px rgba(22,32,4,.5),0 1px 3px rgba(22,32,4,.4)}
.slide--poster .slide__copy .tagline{color:#fff;text-shadow:0 1px 12px rgba(22,32,4,.55),0 1px 2px rgba(22,32,4,.45)}
.slide--poster .slide__copy .label{color:#EFF9D3;text-shadow:0 1px 10px rgba(22,32,4,.5)}
.slide--poster .slide__kicker .tick{background:#EFF9D3}
.slide--poster .cta--primary{background:#FFFFFF;color:#39500A;
  box-shadow:0 16px 34px -18px rgba(24,36,4,.62)}
.slide--poster .cta--primary:hover{background:#F8FDEC;color:#39500A}
.slide--poster .cta--ghost{background:rgba(28,40,6,.44);
  border-color:rgba(255,255,255,.62);color:#fff}
.slide--poster .cta--ghost:hover{background:rgba(28,40,6,.64);border-color:#fff;color:#fff}

/* hero copy masks in after the scene flood — fires when a slide becomes current */
@keyframes copyIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.slide[data-on="1"] .slide__copy>*{animation:copyIn .85s cubic-bezier(.16,1,.3,1) both}
.slide[data-on="1"] .slide__copy>*:nth-child(1){animation-delay:1.80s}
.slide[data-on="1"] .slide__copy>*:nth-child(2){animation-delay:1.92s}
.slide[data-on="1"] .slide__copy>*:nth-child(3){animation-delay:2.04s}
.slide[data-on="1"] .slide__copy>*:nth-child(4){animation-delay:2.16s}
.slide[data-on="0"] .slide__copy>*{opacity:0}

.hero__controls{display:flex;flex-direction:column-reverse;align-items:center;
  justify-content:center;gap:16px;margin-top:34px}
.hero__arrows{display:flex;gap:8px}
.hero__arrows button{width:52px;height:52px;border-radius:50%;display:grid;
  place-items:center;background:#FFFFFF;color:#3B4A12;
  box-shadow:0 10px 26px -10px rgba(16,24,4,.5);
  transition:all .3s cubic-bezier(.2,.7,.2,1)}
.hero__arrows button:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 16px 30px -10px rgba(16,24,4,.55)}
.chev{display:block;width:9px;height:9px;border-top:1.6px solid currentColor}
.chev--l{border-left:1.6px solid currentColor;transform:rotate(-45deg)}
.chev--r{border-right:1.6px solid currentColor;transform:rotate(45deg)}
.hero__dots{display:flex;align-items:center;gap:7px}
.hero__dots button{width:12px;height:7px;border-radius:99px;
  background:rgba(59,74,18,.35);transition:all .4s cubic-bezier(.2,.7,.2,1)}
.hero__dots button:hover{background:rgba(59,74,18,.6)}
.hero__dots button[data-on="1"]{width:44px;height:9px;background:#3B4A12;
  box-shadow:0 4px 14px -6px rgba(16,24,4,.4)}
html[data-theme="dark"] .hero__dots button{background:rgba(240,244,230,.3)}
html[data-theme="dark"] .hero__dots button:hover{background:rgba(240,244,230,.55)}
html[data-theme="dark"] .hero__dots button[data-on="1"]{background:var(--g-l)}

/* ── award strip (the company's proudest asset gets a permanent home) ──── */
.award{padding:0 5vw;margin-top:clamp(18px,3vw,34px)}
.award__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 22px;padding:18px 26px;border-radius:18px;border:1px solid var(--line);
  background:var(--surf);box-shadow:0 18px 44px -36px rgba(11,30,18,.4)}
.award__medal{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;
  place-items:center;background:var(--g-soft);color:var(--acc-ink)}
.award__text{font-family:var(--dis);font-weight:600;font-size:clamp(15px,1.6vw,18px);
  color:var(--ink);text-align:center}
.award__link{font-size:14px;color:var(--acc-ink);white-space:nowrap;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.award__link:hover{color:var(--g-d)}

/* ── about ─────────────────────────────────────────────────────────────── */
.about{position:relative;padding:clamp(70px,9vw,130px) 5vw}
.about__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(30px,5vw,72px);align-items:start}
.about__story{display:flex;flex-direction:column;gap:22px}
.about__story .lead{font-size:clamp(17px,1.5vw,21px);color:var(--ink2);max-width:52ch}
.about__story p{color:var(--ink2);max-width:52ch}
.about__story .cta{align-self:flex-start}
.about__facts{display:grid;gap:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.stat{padding:26px 22px;border-radius:20px;background:var(--surf);
  border:1px solid var(--line)}
.stat__num{font-family:var(--dis);font-size:clamp(30px,3.4vw,42px);font-weight:600;
  color:var(--acc-ink);line-height:1}
.stat__num--word{font-size:clamp(22px,2.6vw,30px);line-height:1.15}
.stat__cap{font-size:13px;color:var(--ink2);margin-top:6px}
.mission{position:relative;overflow:hidden;border-radius:22px;
  border:1px solid var(--line);background:var(--surf);padding:28px;
  display:flex;flex-direction:column;gap:12px}
.mission__grain{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,var(--g-soft) 0 1px,transparent 1px 14px);
  opacity:.7}
.mission__sheen{position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(90deg,transparent,var(--sheen),transparent);
  animation:sheen 6s 1s ease-in-out infinite}
.mission .label,.mission p{position:relative}
.mission p{font-family:var(--dis);font-size:clamp(17px,1.7vw,22px);line-height:1.45;
  color:var(--ink)}

/* ── products ──────────────────────────────────────────────────────────── */
.products{position:relative;padding:clamp(60px,7vw,110px) 0;background:var(--bg2)}
.products .container{padding-inline:5vw}
.products__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px}
.products__stage{margin-top:44px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.chips button{padding:9px 18px;border-radius:99px;border:1px solid var(--line);
  background:var(--surf);color:var(--ink2);font-size:14px;font-weight:500;
  transition:all .25s ease}
.chips button:hover{border-color:var(--g);color:var(--acc-ink)}
.chips button[data-on="1"]{background:var(--btn);border-color:var(--btn);color:var(--onG)}
.products__all{display:flex;justify-content:center;margin-top:26px}

/* ── quality / professionals band ──────────────────────────────────────── */
.pillars{padding:clamp(50px,6vw,80px) 5vw 0}
.pillars__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px}
.pillar{display:flex;gap:18px;align-items:flex-start;padding:26px;
  border-radius:20px;border:1px solid var(--line);background:var(--surf)}
.pillar__icon{flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;
  place-items:center;background:var(--g-soft);color:var(--acc-ink)}
.pillar h3{font-size:18px;margin-bottom:6px}
.pillar p{font-size:14.5px;color:var(--ink2)}

/* ── blog ──────────────────────────────────────────────────────────────── */
.blog{position:relative;padding:clamp(70px,9vw,130px) 5vw;overflow:hidden}
.blog .section-head{margin-bottom:48px}
.blog__all{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  margin-top:4px;padding:12px 20px;border-radius:13px;border:1px solid var(--g);
  color:var(--acc-ink);font-family:var(--dis);font-weight:500;font-size:14.5px;
  transition:all .3s cubic-bezier(.2,.7,.2,1)}
.blog__all:hover{background:var(--btn);border-color:var(--btn);color:var(--onG);
  transform:translateY(-2px)}
.blog__all .dash{display:block;width:14px;height:1.6px;background:currentColor}
.blog__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:22px}
.post{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;
  background:var(--surf);border:1px solid var(--line);color:var(--ink);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.post:hover{transform:translateY(-8px);box-shadow:var(--shadow);color:var(--ink)}
.post__media{position:relative;height:212px;overflow:hidden;background:var(--bg2)}
.post__media img{width:100%;height:100%;object-fit:cover}
.post__date{position:absolute;top:14px;inset-inline-start:14px;padding:7px 12px;
  border-radius:99px;background:var(--btn);color:var(--onG);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em}
[data-lang="ar"] .post__date{font-family:var(--body);font-size:12px;letter-spacing:0}
.post__body{padding:24px;display:flex;flex-direction:column;gap:10px}
.post__body h3{font-size:20px;line-height:1.3}
.post__body p{font-size:14px;color:var(--ink2)}
.post__more{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--acc-ink);margin-top:4px}
[data-lang="ar"] .post__more{font-family:var(--body);font-size:13.5px;
  font-weight:500;letter-spacing:0}

/* ── contact / footer ──────────────────────────────────────────────────── */
.contact{position:relative;
  padding:clamp(60px,7vw,110px) 5vw clamp(30px,4vw,50px);
  background:var(--deep);color:var(--onDeep)}
.contact .container{display:flex;flex-direction:column;gap:clamp(38px,5vw,64px)}
.contact__top{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:28px}
.contact__title{display:flex;flex-direction:column;gap:14px}
.contact .label{color:var(--g-l)}
.contact__title h2{font-size:clamp(34px,4.6vw,64px);color:var(--g-l)}
.newsletter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.newsletter label{display:flex;flex-direction:column;gap:8px}
.newsletter input{height:52px;width:min(300px,70vw);padding-inline:18px;
  border-radius:14px;
  border:1px solid color-mix(in oklab,var(--onDeep) 22%,transparent);
  background:color-mix(in oklab,var(--onDeep) 8%,transparent);
  color:var(--onDeep);font-family:var(--body);font-size:15px;outline:none;
  transition:all .3s ease}
.newsletter input:focus{border-color:var(--g-l);
  background:color-mix(in oklab,var(--onDeep) 14%,transparent)}
.newsletter button{height:52px;padding-inline:24px;border-radius:14px;
  background:var(--g);color:#161A06;font-family:var(--dis);font-weight:600;
  font-size:15px;transition:all .3s cubic-bezier(.2,.7,.2,1)}
.newsletter button:hover{transform:translateY(-3px);background:var(--g-l)}
/* status colors are literals: the contact ground (--deep) is dark in BOTH
   themes, so theme-flipping tokens would break here */
.newsletter__status{width:100%;min-height:22px;font-size:14px}
.newsletter__status[data-kind="ok"]{color:#B9DB6E}
.newsletter__status[data-kind="err"]{color:#E5A092}

.contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(28px,4vw,56px);padding-block:clamp(30px,4vw,48px);
  border-top:1px solid color-mix(in oklab,var(--onDeep) 17%,transparent);
  border-bottom:1px solid color-mix(in oklab,var(--onDeep) 17%,transparent)}
.contact__col{display:flex;flex-direction:column;gap:18px}
.contact__col h3{font-family:var(--mono);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--g-l);font-weight:400}
[data-lang="ar"] .contact__col h3{font-family:var(--body);font-size:13.5px;
  font-weight:500;letter-spacing:0;text-transform:none}
.contact__col a{color:var(--onDeep);font-size:15px;line-height:1.55;
  transition:color .25s ease}
.contact__col a:hover{color:var(--g-l)}
.contact__phones{display:flex;flex-direction:column;gap:4px;
  font-family:var(--mono);font-size:13.5px}
.contact__small{display:flex;flex-direction:column;gap:5px;font-size:14px;
  color:color-mix(in oklab,var(--onDeep) 74%,transparent)}
.contact__small .mono{font-family:var(--mono);font-size:13px}
.contact__small a{color:var(--g-l);font-family:var(--mono);font-size:13px}
.contact__nav{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.contact__nav a{padding:7px 0;transition:all .25s ease}
.contact__nav a:hover{transform:translateX(4px)}
[data-lang="ar"] .contact__nav a:hover{transform:translateX(-4px)}
.socials{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.socials a{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;
  border-radius:14px;
  border:1px solid color-mix(in oklab,var(--onDeep) 20%,transparent);
  color:var(--onDeep);font-size:14.5px;
  transition:all .3s cubic-bezier(.2,.7,.2,1)}
.socials a:hover{background:var(--g);border-color:var(--g);color:#161A06;
  transform:translateY(-2px)}
.socials .badge{width:26px;height:26px;border-radius:8px;
  background:color-mix(in oklab,var(--onDeep) 14%,transparent);display:grid;
  place-items:center;font-family:var(--mono);font-size:12px}
.contact__foot{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:18px}
.contact__foot .label{color:color-mix(in oklab,var(--onDeep) 58%,transparent);
  letter-spacing:.14em;font-size:11.5px}

/* ── animations ────────────────────────────────────────────────────────── */
@keyframes introLine{to{transform:scaleX(1)}}
@keyframes introWord{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes introOut{0%{transform:translateY(0)}100%{transform:translateY(-102%)}}
@keyframes introGone{to{visibility:hidden;pointer-events:none}}
@keyframes sheen{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}

/* scroll reveal (visible by default; JS opts elements in) */
[data-reveal]{transition:opacity .8s cubic-bezier(.2,.7,.2,1),
  transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal][data-in="0"]{opacity:0;transform:translateY(26px)}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .nav__links{gap:0;font-size:13px}
  .nav{padding-inline:150px 130px}
}
@media (max-width:900px){
  /* the desktop pill can't hold five labels plus controls — switch to sheet */
  .nav{height:62px;padding-inline:96px 12px;border-radius:16px}
  .nav__logo span{width:120px;height:52px}
  .nav__logo img{height:44px;max-width:120px}
  .nav__links{display:none}
  .nav__tools .theme-toggle{display:none} /* lives in the sheet on mobile */
  .nav__tools .lang-switch{display:none}
  .nav__burger{display:grid}
}
@media (max-width:820px){
  .slide__grid{grid-template-columns:1fr}
  .slide__copy{width:100%}
  .hero{padding-bottom:44vh;align-items:start}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}