/* =============================================================
   MS GROUP — Export site
   style.css : design tokens, base, components, sections
   Layout uses CSS logical properties throughout so that the
   Arabic (dir="rtl") layout is a real RTL layout, not a mirror.
   ============================================================= */

/* ---------- 1. Tokens ---------------------------------------- */
:root {
  /* Brand — orange sampled from images/Logo.png (#D87126).
     --brand is the graphic accent and the orange used on the dark
     ink background (4.99:1 there). Orange text or a white-on-orange
     fill needs a deeper shade to clear WCAG AA on light surfaces,
     which is what --brand-dark (5.47:1 on white) and --brand-deep
     (7.4:1) are for. */
  --brand: #d87126;
  --brand-dark: #a9500f;
  --brand-deep: #8a400c;
  --brand-tint: #fdf2e8;
  --brand-line: #f0d6bd;

  /* Deep charcoal-green: the corporate anchor tone */
  --ink: #14211c;
  --ink-2: #1e302a;
  --ink-3: #2b403a;

  /* Fresh / agricultural green */
  --leaf: #2f6b4f;
  --leaf-dark: #24543e;
  --leaf-tint: #eef4f1;

  /* Neutrals */
  --paper: #ffffff;
  --sand: #f8f6f2;
  --sand-2: #f1ede6;
  --line: #e4dfd7;
  --line-soft: #efebe4;
  --text: #22302b;
  --muted: #66736e;
  --muted-2: #6b7772;

  /* Typography */
  --font-latin: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", "Tahoma", system-ui, sans-serif;
  --font: var(--font-latin);

  /* Radii — deliberately restrained */
  --r-xs: 2px;
  --r-sm: 3px;
  --r: 6px;
  --r-lg: 10px;

  /* Elevation — one subtle level, one lifted level */
  --shadow: 0 1px 2px rgba(20, 33, 28, .05), 0 6px 20px -12px rgba(20, 33, 28, .18);
  --shadow-lg: 0 2px 4px rgba(20, 33, 28, .05), 0 18px 44px -20px rgba(20, 33, 28, .3);

  /* Rhythm */
  --gutter: 24px;
  --maxw: 1240px;
  --nav-h: 74px;

  --ease: cubic-bezier(.32, .72, .32, 1);
}

html[dir="rtl"] { --font: var(--font-arabic); }

/* ---------- 2. Reset / base ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[dir="rtl"] body { line-height: 1.85; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}
html[dir="rtl"] :is(h1, h2, h3, h4, h5) { letter-spacing: 0; line-height: 1.35; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r);
  font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- 3. Layout helpers -------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(44px, 6vw, 76px); }
.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: #d8e2dd; }
.section--ink :is(h2, h3, h4) { color: #fff; }

.section-head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head--split > div { max-width: 620px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-dark);
  margin-bottom: 14px;
}
html[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: 13px; }
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: currentColor;
  flex: none;
}
/* On the dark ink surfaces the lighter brand orange is the legible one. */
.section--ink .eyebrow,
.hero .eyebrow,
.pagehead .eyebrow { color: var(--brand); }

.h2 { font-size: clamp(28px, 3.4vw, 42px); }
.h3 { font-size: clamp(21px, 2vw, 26px); }

.lede {
  margin-top: 16px;
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  color: var(--muted);
  line-height: 1.75;
}
.section--ink .lede { color: #a8b8b2; }

/* ---------- 4. Buttons --------------------------------------- */
.btn {
  --btn-bg: var(--brand-dark);
  --btn-fg: #fff;
  --btn-bd: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  min-height: 48px;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  text-align: center;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { --btn-bg: var(--brand-deep); --btn-bd: var(--brand-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .i { flex: none; }
html[dir="rtl"] .btn .i--arrow { transform: scaleX(-1); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }

.btn--onink { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .38); }
.btn--onink:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

.btn--leaf { --btn-bg: var(--leaf); --btn-bd: var(--leaf); }
.btn--leaf:hover { --btn-bg: var(--leaf-dark); --btn-bd: var(--leaf-dark); }

.btn--sm { min-height: 42px; padding: 10px 18px; font-size: 13.5px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--brand-dark);
  padding-block: 4px;
}
.link-arrow .i { transition: transform .22s var(--ease); }
html[dir="rtl"] .link-arrow .i { transform: scaleX(-1); }
.link-arrow:hover .i { transform: translateX(4px); }
html[dir="rtl"] .link-arrow:hover .i { transform: scaleX(-1) translateX(4px); }

/* ---------- 5. Top utility bar ------------------------------- */
.topbar {
  background: var(--ink);
  color: #9fb0aa;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
  flex-wrap: wrap;
}
.topbar__list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; }
.topbar__item a:hover { color: #fff; }
.topbar__item .i { color: var(--brand); flex: none; }
.topbar__socials { display: flex; align-items: center; gap: 6px; }
.topbar__socials a {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.topbar__socials a:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

/* ---------- 6. Navbar ---------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
/* The blur lives on a pseudo-element, not on .nav itself. A
   backdrop-filter makes its element the containing block for
   position:fixed descendants, which would trap the mobile drawer
   inside the navbar strip instead of letting it fill the screen. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: saturate(1.4) blur(10px);
  pointer-events: none;
}
.nav.is-stuck { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(20, 33, 28, .5); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--nav-h);
}

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand__mark { width: 46px; height: 46px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink);
}
html[dir="rtl"] .brand__name { letter-spacing: 0; }
.brand__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
html[dir="rtl"] .brand__tag { letter-spacing: 0; text-transform: none; font-size: 12px; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}
.nav__link {
  position: relative;
  display: block;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  border-radius: var(--r-sm);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: var(--brand-dark); background: var(--brand-tint); }
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--o, left) center;
  transition: transform .25s var(--ease);
}
html[dir="rtl"] .nav__link::after { --o: right; }
.nav__link[aria-current="page"] { color: var(--brand-dark); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* The in-menu CTA belongs to the mobile drawer only; the desktop
   bar carries its own .btn--nav so the two never both appear. */
.nav__cta { display: none; }

.nav__actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Language switcher */
.lang {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper);
}
.lang__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--muted);
  cursor: pointer;
  min-height: 40px;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang__btn + .lang__btn { border-inline-start: 1.5px solid var(--line); }
.lang__btn:hover { background: var(--sand); color: var(--ink); }
.lang__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  cursor: pointer;
}
.nav__toggle span {
  position: relative;
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: background-color .2s var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform .28s var(--ease), top .2s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 33, 28, .45);
  opacity: 0;
  visibility: hidden;
  z-index: 88;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.nav__backdrop.is-open { opacity: 1; visibility: visible; }

/* ---------- 7. Home hero ------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #cfdcd7;
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed supplied hero photograph */
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* Scrim: heaviest on the side the copy sits on, so the produce in
   the photograph stays visible while the text keeps its contrast. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right,
      rgba(13, 22, 18, .95) 0%,
      rgba(13, 22, 18, .9) 34%,
      rgba(13, 22, 18, .66) 58%,
      rgba(13, 22, 18, .46) 100%),
    linear-gradient(to bottom,
      rgba(13, 22, 18, .55) 0%,
      rgba(13, 22, 18, .18) 42%,
      rgba(13, 22, 18, .62) 100%);
}
html[dir="rtl"] .hero::before {
  background:
    linear-gradient(to left,
      rgba(13, 22, 18, .95) 0%,
      rgba(13, 22, 18, .9) 34%,
      rgba(13, 22, 18, .66) 58%,
      rgba(13, 22, 18, .46) 100%),
    linear-gradient(to bottom,
      rgba(13, 22, 18, .55) 0%,
      rgba(13, 22, 18, .18) 42%,
      rgba(13, 22, 18, .62) 100%);
}

.hero__inner {
  padding-block: clamp(64px, 9vw, 132px);
  min-height: clamp(520px, 76vh, 760px);
  display: flex;
  align-items: center;
}
.hero__copy { max-width: 660px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #d9e5e0;
  margin-bottom: 22px;
}
html[dir="rtl"] .hero__eyebrow { padding: 7px 8px 7px 14px; letter-spacing: 0; text-transform: none; }
.hero__eyebrow b {
  display: inline-grid;
  place-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-dark);
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
}
html[dir="rtl"] .hero__eyebrow b { letter-spacing: 0; }

.hero h1 {
  font-size: clamp(34px, 5.1vw, 62px);
  line-height: 1.05;
  color: #fff;
  letter-spacing: -.03em;
}
html[dir="rtl"] .hero h1 { line-height: 1.28; letter-spacing: 0; }
.hero h1 em { font-style: normal; color: var(--brand); }

.hero__text {
  margin-top: 22px;
  max-width: 56ch;
  font-size: clamp(15.5px, 1.25vw, 18px);
  line-height: 1.75;
  color: #a9bab4;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 28px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero__stat b {
  display: block;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.hero__stat span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #90a49d;
}

.hero__seal {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 26px;
  padding: 12px 18px 12px 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r);
}
html[dir="rtl"] .hero__seal { padding: 12px 14px 12px 18px; }
.hero__seal .i { color: var(--brand); flex: none; }
.hero__seal span { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #d8e4df; }

/* ---------- 8. Interior page header -------------------------- */
.pagehead {
  position: relative;
  background: var(--ink);
  color: #b9c9c3;
  overflow: hidden;
  isolation: isolate;
}
.pagehead__bg { position: absolute; inset: 0; z-index: -2; }
.pagehead__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(13, 22, 18, .95) 0%, rgba(13, 22, 18, .86) 45%, rgba(13, 22, 18, .64) 100%),
    linear-gradient(to bottom, rgba(13, 22, 18, .5), rgba(13, 22, 18, .72));
}
html[dir="rtl"] .pagehead::before {
  background:
    linear-gradient(to left, rgba(13, 22, 18, .95) 0%, rgba(13, 22, 18, .86) 45%, rgba(13, 22, 18, .64) 100%),
    linear-gradient(to bottom, rgba(13, 22, 18, .5), rgba(13, 22, 18, .72));
}
.pagehead__inner {
  padding-block: clamp(44px, 5.6vw, 78px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}
.pagehead h1 {
  font-size: clamp(30px, 4vw, 48px);
  color: #fff;
  letter-spacing: -.025em;
}
html[dir="rtl"] .pagehead h1 { letter-spacing: 0; }
.pagehead__text { margin-top: 14px; max-width: 62ch; color: #9aaba5; font-size: 16px; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #8b9c96;
  margin-bottom: 16px;
}
.crumbs a:hover { color: var(--brand); }
.crumbs [aria-current] { color: #fff; font-weight: 600; }
.crumbs .sep { color: #7f918a; }
html[dir="rtl"] .crumbs .sep { transform: scaleX(-1); display: inline-block; }

.pagehead__badge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 26px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .04);
  text-align: center;
}
.pagehead__badge b { font-size: 30px; font-weight: 800; color: #fff; line-height: 1.1; }
.pagehead__badge span { font-size: 12px; color: #93a49e; }

/* Light breadcrumb strip (product details) */
.crumbbar { background: var(--sand); border-bottom: 1px solid var(--line); }
.crumbbar .crumbs { margin: 0; padding-block: 15px; color: var(--muted); }
.crumbbar .crumbs a:hover { color: var(--brand-dark); }
.crumbbar .crumbs [aria-current] { color: var(--ink); }
.crumbbar .crumbs .sep { color: var(--muted-2); }

/* ---------- 8b. Certifications & compliance ------------------- */
.certs { border-bottom: 1px solid var(--line-soft); }
.certs__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: end;
  gap: clamp(16px, 3vw, 48px);
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.certs__note {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  padding-bottom: 6px;
}

.certs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.cert {
  background: #fff;
  padding: clamp(24px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color .3s var(--ease);
}
.cert:hover { background: var(--sand); }

.cert__badge {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  margin-bottom: 4px;
  transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.cert:hover .cert__badge {
  background: var(--brand-dark);
  color: #fff;
  transform: translateY(-3px) scale(1.06);
}

.cert__name {
  font-size: 17.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.cert__desc { font-size: 14.5px; color: var(--muted); line-height: 1.7; }

/* ---------- 9. Product cards --------------------------------- */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 24px;
}

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-line); }

.pcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sand);
  overflow: hidden;
}
.pcard__medialink { display: block; width: 100%; height: 100%; }
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .75s var(--ease);
}
.pcard__media img.is-cutout { object-fit: contain; padding: 14px; mix-blend-mode: multiply; }
.pcard:hover .pcard__media img { transform: scale(1.075); }

.pcard__media--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--sand), var(--sand-2));
  color: var(--muted-2);
}
.pcard__media--empty .i { opacity: .5; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--leaf-tint);
  color: var(--leaf-dark);
}
html[dir="rtl"] .tag { letter-spacing: 0; text-transform: none; font-size: 12px; }
.tag--fresh { background: var(--brand-tint); color: var(--brand-deep); }
.tag--float {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(20, 33, 28, .12);
}

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px 20px 22px;
  flex: 1;
}
.pcard__name { font-size: 19px; font-weight: 800; }
.pcard__desc {
  font-size: 14px;
  line-height: 1.62;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pcard__kcal { font-size: 12.5px; color: var(--muted-2); font-weight: 600; }

/* ---------- 10. Feature / why-us ----------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(28px, 4vw, 56px); }

.feature {
  padding: 30px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.feature:hover { border-color: var(--brand-line); transform: translateY(-3px); box-shadow: var(--shadow); }
.feature__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-tint);
  color: var(--brand-dark);
  margin-bottom: 18px;
}
.feature h3 { font-size: 18px; margin-bottom: 9px; }
.feature p { font-size: 14.5px; line-height: 1.68; color: var(--muted); }

/* ---------- 11. Export process ------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r);
  overflow: hidden;
}
.step {
  position: relative;
  padding: 32px 26px 34px;
  background: var(--ink);
  transition: background-color .3s var(--ease);
}
.step:hover { background: var(--ink-2); }
.step__num {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .2);
  color: var(--brand);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 18px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.step:hover .step__num { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.step h3 { font-size: 17px; margin-bottom: 9px; }
.step p { font-size: 14px; line-height: 1.68; color: #9aaba5; }

/* ---------- 12. Split / about media -------------------------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(30px, 5vw, 66px); align-items: center; }
.split--reverse > :first-child { order: 2; }

.media-stack { position: relative; }
.media-stack__main {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sand);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3.2;
}
.media-stack__main img { width: 100%; height: 100%; object-fit: cover; }
.media-stack__inset {
  position: absolute;
  inset-block-end: -26px;
  inset-inline-end: -18px;
  width: 44%;
  max-width: 210px;
  border-radius: var(--r);
  overflow: hidden;
  border: 6px solid var(--paper);
  box-shadow: var(--shadow-lg);
  background: var(--sand);
  aspect-ratio: 1 / 1;
}
.media-stack__inset img { width: 100%; height: 100%; object-fit: cover; }
.media-stack__rule {
  position: absolute;
  inset-block-start: -18px;
  inset-inline-start: -18px;
  width: 46%; height: 46%;
  border: 1.5px solid var(--brand-line);
  border-radius: var(--r);
  z-index: -1;
}

.ticks { display: grid; gap: 14px; margin-top: 26px; }
.tick { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.62; }
.tick .i { flex: none; margin-top: 3px; color: var(--leaf); }
.section--ink .tick { color: #b8c8c2; }
.section--ink .tick .i { color: var(--brand); }

/* ---------- 13. CTA band ------------------------------------- */
.ctaband {
  position: relative;
  background: var(--leaf-dark);
  color: #dceae3;
  overflow: hidden;
  isolation: isolate;
}
.ctaband::before {
  content: "";
  position: absolute;
  inset-block: -80%;
  inset-inline-start: 30%;
  width: 60%;
  background: radial-gradient(closest-side, rgba(216, 113, 38, .34), transparent 70%);
  z-index: -1;
}
.ctaband__inner {
  padding-block: clamp(48px, 6vw, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
.ctaband h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); max-width: 20ch; }
.ctaband p { margin-top: 12px; max-width: 52ch; color: #b9d0c4; font-size: 16px; }
.ctaband__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ctaband .btn--onink:hover { --btn-fg: var(--leaf-dark); }

/* ---------- 14. Filters / search ----------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  appearance: none;
  padding: 9px 17px;
  min-height: 42px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip__count { opacity: .72; font-weight: 600; margin-inline-start: 5px; }

.search {
  position: relative;
  min-width: 260px;
  flex: 0 1 320px;
}
.search .i {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}
.search input {
  width: 100%;
  min-height: 46px;
  padding: 11px 16px;
  padding-inline-start: 42px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search input::placeholder { color: var(--muted-2); }
.search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(216, 113, 38, .16);
}

.result-note { font-size: 14px; color: var(--muted); margin-bottom: 22px; }

.empty-state {
  padding: 64px 24px;
  text-align: center;
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background: var(--sand);
}
.empty-state h3 { font-size: 19px; margin-bottom: 8px; }
.empty-state p { color: var(--muted); font-size: 15px; }

/* ---------- 15. Product details ------------------------------ */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4.5vw, 64px); align-items: start; }

.pd__gallery { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 14px; }
.pd__stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sand);
  aspect-ratio: 4 / 3.3;
}
.pd__stage img { width: 100%; height: 100%; object-fit: cover; }
.pd__stage img.is-cutout { object-fit: contain; padding: 26px; mix-blend-mode: multiply; }
.pd__thumbs { display: flex; gap: 12px; flex-wrap: wrap; }
.pd__thumb {
  width: 88px; height: 76px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sand);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.pd__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd__thumb img.is-cutout { object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.pd__thumb[aria-pressed="true"] { border-color: var(--brand); }
.pd__thumb:hover { border-color: var(--ink-3); }

.pd__title { font-size: clamp(28px, 3.6vw, 42px); margin-block: 14px 0; }
.pd__lede { margin-top: 16px; font-size: 17px; line-height: 1.72; color: var(--muted); }
.pd__body { margin-top: 18px; font-size: 15.5px; line-height: 1.8; color: var(--text); }

.pd__block { margin-top: 38px; }
.pd__block > h2 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1.5px solid var(--line);
}
html[dir="rtl"] .pd__block > h2 { letter-spacing: 0; text-transform: none; font-size: 15px; }
.pd__sub {
  margin-inline-start: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-2);
}

.nutri { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.nutri__cell { background: var(--paper); padding: 15px 16px; }
.nutri__cell dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
html[dir="rtl"] .nutri__cell dt { letter-spacing: 0; text-transform: none; font-size: 13px; }
.nutri__cell dd { margin: 4px 0 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.nutri__cell--accent { background: var(--brand-tint); }
.nutri__cell--accent dt { color: var(--brand-deep); }
.nutri__cell--accent dd { color: var(--brand-dark); }

.note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--leaf-tint);
  border-inline-start: 3px solid var(--leaf);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--leaf-dark);
}
.note .i { flex: none; margin-top: 2px; }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table.spec { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
table.spec th, table.spec td { padding: 13px 18px; text-align: start; border-bottom: 1px solid var(--line-soft); }
table.spec thead th {
  background: var(--sand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
html[dir="rtl"] table.spec thead th { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
table.spec tbody tr:last-child :is(td, th) { border-bottom: 0; }
table.spec tbody tr:hover { background: var(--sand); }
table.spec td:first-child { font-weight: 700; color: var(--ink); }

.pd__cta {
  margin-top: 34px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sand);
}
.pd__cta h2 { font-size: 21px; }
.pd__cta p { margin-top: 8px; font-size: 14.5px; color: var(--muted); max-width: 46ch; }
.pd__cta .row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

.pd__meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- 16. Gallery -------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
}
.gitem {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sand);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gitem:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand-line); }
/* Wide photographs of the whole range read better across two cells */
.gitem--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.gitem img.is-cutout { object-fit: contain; padding: 18px; mix-blend-mode: multiply; }
.gitem:hover img { transform: scale(1.06); }
.gitem__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 30px 16px 13px;
  /* The label sits over unknown photography, so the scrim has to
     carry the contrast on its own — it must stay dark enough at
     the text baseline whatever the image underneath is. */
  background: linear-gradient(
    to bottom,
    rgba(20, 33, 28, 0) 0%,
    rgba(20, 33, 28, .62) 45%,
    rgba(20, 33, 28, .93) 100%);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  font-size: 13.5px;
  font-weight: 700;
  text-align: start;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.gitem:hover .gitem__label,
.gitem:focus-visible .gitem__label { opacity: 1; transform: translateY(0); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(12, 20, 17, .94);
}
.lightbox.is-open { display: grid; animation: lbIn .25s var(--ease); }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox__figure {
  position: relative;
  max-width: min(1000px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--r);
  background: #fff;
  animation: lbZoom .3s var(--ease);
}
@keyframes lbZoom { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lightbox__cap { text-align: center; color: #d3ded9; font-size: 14.5px; }
.lightbox__cap b { display: block; color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 3px; }

.lb-btn {
  position: absolute;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, .26);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.lb-btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.lb-close { inset-block-start: clamp(12px, 3vw, 26px); inset-inline-end: clamp(12px, 3vw, 26px); position: fixed; }
.lb-prev, .lb-next { position: fixed; top: 50%; transform: translateY(-50%); }
.lb-prev { inset-inline-start: clamp(10px, 2.5vw, 26px); }
.lb-next { inset-inline-end: clamp(10px, 2.5vw, 26px); }
html[dir="rtl"] :is(.lb-prev, .lb-next) .i { transform: scaleX(-1); }
.lb-count {
  position: fixed;
  inset-block-end: clamp(12px, 3vw, 26px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #9fb0aa;
}

/* ---------- 17. Contact -------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

.infocard {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
}
.infocard__head { padding: 24px 26px 20px; background: var(--ink); color: #b6c6c0; }
.infocard__head h2 { font-size: 20px; color: #fff; }
.infocard__head p { margin-top: 7px; font-size: 14px; }
.infoitem {
  display: flex;
  gap: 15px;
  padding: 19px 26px;
  border-bottom: 1px solid var(--line-soft);
}
.infoitem:last-of-type { border-bottom: 0; }
.infoitem__icon {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.infoitem__k {
  margin: 0 0 3px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
html[dir="rtl"] .infoitem__k { letter-spacing: 0; text-transform: none; font-size: 13px; }
.infoitem__v { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--ink); word-break: break-word; }
.infoitem__v a:hover { color: var(--brand-dark); }
.infoitem__v [dir] { unicode-bidi: plaintext; }

.location-list { display: grid; gap: 4px; }
.location-list .infoitem { padding-inline: 0; border-bottom: 0; padding-block: 10px; }

.socials { display: flex; gap: 10px; padding: 20px 26px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.socials a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }

.formcard { padding: clamp(26px, 3vw, 38px); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field .req { color: var(--brand-dark); margin-inline-start: 2px; }
.field .opt { color: var(--muted-2); font-weight: 500; margin-inline-start: 4px; }
.field :is(input, textarea, select) {
  width: 100%;
  padding: 12px 15px;
  min-height: 48px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.65; }
.field :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(216, 113, 38, .16);
}
.field input[dir], .field textarea[dir] { unicode-bidi: plaintext; }
.field.has-error :is(input, textarea, select) { border-color: #c0392b; background: #fdf4f3; }
.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #c0392b;
}
.field.has-error .field__error { display: flex; }
.field__hint { font-size: 12.5px; color: var(--muted-2); }

.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.form-status {
  display: none;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 22px;
}
.form-status.is-visible { display: flex; }
.form-status--ok { background: var(--leaf-tint); border-inline-start: 3px solid var(--leaf); color: var(--leaf-dark); }
.form-status--err { background: #fdf1ef; border-inline-start: 3px solid #c0392b; color: #96281b; }
.form-status .i { flex: none; margin-top: 2px; }

/* ---------- 18. Map ------------------------------------------ */
.mapwrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sand);
  min-height: 380px;
}
.mapwrap iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }
.map-fallback {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  min-height: 380px;
  padding: 48px 28px;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(47, 107, 79, .045) 18px 36px),
    var(--sand);
}
.map-fallback__pin {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--brand-line);
  color: var(--brand-dark);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.map-fallback h3 { font-size: 19px; }
.map-fallback p { font-size: 14.5px; color: var(--muted); max-width: 44ch; }

.map-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  height: 100%;
}

/* ---------- 19. Footer --------------------------------------- */
.footer { background: var(--ink); color: #9aaba5; font-size: 14.5px; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 72px);
}
.footer__brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer__brand img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 50%; padding: 3px; }
.footer__brand b { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: .04em; }
html[dir="rtl"] .footer__brand b { letter-spacing: 0; }
.footer__about { max-width: 42ch; line-height: 1.75; }
.footer h3 {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
html[dir="rtl"] .footer h3 { letter-spacing: 0; text-transform: none; font-size: 15px; }
.footer__list { display: grid; gap: 6px; }
.footer__list a {
  display: inline-block;
  padding-block: 4px;      /* keeps the tap target comfortable on phones */
  transition: color .2s var(--ease), padding-inline-start .2s var(--ease);
}
.footer__list a:hover { color: var(--brand); padding-inline-start: 4px; }
.footer__contact { display: grid; gap: 14px; }
.footer__contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer__contact .i { color: var(--brand); flex: none; margin-top: 3px; }
.footer__contact a:hover { color: #fff; }
.footer__contact span[dir] { unicode-bidi: plaintext; }
.footer__socials { display: flex; gap: 9px; margin-top: 20px; }
.footer__socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.footer__socials a:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
/* Three tracks so the copyright is centred on the row itself, not on
   whatever space the credit badge happens to leave beside it. The
   empty third track is what keeps it honest. */
.footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 13.5px;
  color: #7c8d87;
}
.footer__bottom .devcredit { grid-column: 1; justify-self: start; }
.footer__copy { grid-column: 2; text-align: center; }
.footer__bottom a { color: #a9bab4; }
.footer__bottom a:hover { color: var(--brand); }

/* Studio credit, the last line on the page, under the copyright */
.footer__studio {
  padding-block: 0 24px;
  font-size: 12.5px;
  color: #6d7d78;
  text-align: center;
}
.footer__studio a { color: #8b9a95; text-decoration: none; }
.footer__studio a:hover { color: var(--brand); }

/* ---------- 19b. Build credit -------------------------------- */
.devcredit {
  --dev-accent: var(--brand);
  --dev-surface: #101a16;
  /* Anchor for the card, which floats rather than sitting in flow so
     opening it never reflows the footer. */
  position: relative;
  display: inline-flex;
}

.devbadge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-sm);
  background: var(--dev-surface);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .35s var(--ease-land);
}
.devbadge:hover { border-color: var(--dev-accent); transform: translateY(-2px); }

.devbadge__label {
  color: #6f817b;
  font-size: 12px;
  letter-spacing: .01em;
}
.devbadge__name { font-weight: 700; font-style: italic; letter-spacing: -.01em; }
.devbadge__code {
  color: var(--dev-accent);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: -.04em;
}

/* Floats above the footer instead of occupying space in it: opening
   the card must not push the copyright or anything else around. */
.devcard {
  position: absolute;
  inset-block-end: calc(100% + 10px);   /* clears the badge */
  inset-inline-start: 0;                /* leading edges align; mirrors in RTL */
  z-index: 40;
  width: min(268px, calc(100vw - 40px));
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-sm);
  background: var(--dev-surface);
  /* Heavier than a flow element needs: it now sits over other content
     and the shadow is what separates it from the footer behind. */
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .35);
  animation: dev-pop .2s var(--ease);
}
.devcard[hidden] { display: none; }

/* Opacity only — a transform here would fight the centring transform
   the card takes on at narrow widths. */
@keyframes dev-pop { from { opacity: 0; } }

.devcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.devcard__id { min-width: 0; }
.devcard__name {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
}
.devcard__role {
  margin-top: 3px;
  color: var(--dev-accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[dir="rtl"] .devcard__role { letter-spacing: 0; font-size: 12px; text-transform: none; }

.devcard__avatar {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--dev-accent);
  color: #12211c;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
}

/* Scoped through .devcredit so it outranks `.footer__bottom a`
   rather than needing !important to win the colour. */
.devcredit .devcard__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .04);
  color: #d5e0dc;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease-land);
}
.devcredit .devcard__btn:hover {
  background: var(--dev-accent);
  border-color: var(--dev-accent);
  color: #12211c;
  transform: translateY(-2px);
}

/* ---------- 20. Motion --------------------------------------- */
/* Everything here is scoped to .js (set by an inline script in
   <head>) so that with JavaScript unavailable the content is simply
   visible rather than stuck at opacity 0 waiting for an observer
   that never runs. Every effect is switched off wholesale under
   prefers-reduced-motion at the end of this section. */

/* A springy curve for arrivals: overshoots very slightly, which is
   what makes an element read as "landing" rather than fading. */
:root { --ease-land: cubic-bezier(.16, .84, .3, 1.06); }

/* --- scroll reveal, with directional variants ----------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(38px) scale(.985);
  will-change: opacity, transform;
}
.js .reveal--left { transform: translateX(-52px); }
.js .reveal--right { transform: translateX(52px); }
.js .reveal--scale { transform: translateY(24px) scale(.92); }
.js .reveal--fade { transform: none; }
/* rises and straightens at the same time — used on the process steps */
.js .reveal--tilt { transform: translateY(44px) rotate(-1.6deg); transform-origin: 50% 100%; }

/* Mirror the horizontal variants so Arabic slides the natural way */
html[dir="rtl"].js .reveal--left { transform: translateX(52px); }
html[dir="rtl"].js .reveal--right { transform: translateX(-52px); }
html[dir="rtl"].js .reveal--tilt { transform: translateY(44px) rotate(1.6deg); }

/* `html.js` rather than `.js` on purpose: the RTL mirrors above are
   (0,3,1) selectors, so a plain `.js .reveal.is-in` would lose to
   them and the Arabic reveals would never settle back to no offset. */
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .62s var(--ease),
    transform .82s var(--ease-land);
  transition-delay: var(--d, 0ms);
  will-change: auto;
}

/* NOTE: there is deliberately no reveal effect on the large section
   photographs. Hiding a `loading="lazy"` image behind opacity and a
   collapsed clip-path makes the browser defer the download for as
   long as it stays hidden, so the picture never arrives at all. Those
   images are left to paint as soon as they load. */

/* --- hero: a short entrance sequence on load ------------------ */
@keyframes ms-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.js .hero__copy > * {
  animation: ms-rise .85s var(--ease) backwards;
}
.js .hero__eyebrow { animation-delay: .05s; }
.js .hero h1 { animation-delay: .16s; }
.js .hero__text { animation-delay: .27s; }
.js .hero__cta { animation-delay: .38s; }
.js .hero__seal { animation-delay: .48s; }
.js .hero__stats { animation-delay: .56s; }

/* A very slow drift on the hero photograph. Small enough to read as
   depth rather than movement. */
@keyframes ms-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.13) translate3d(0, -1.2%, 0); }
}
.js .hero__bg img {
  animation: ms-drift 26s var(--ease) forwards;
}

/* --- counters hold their box while they tick ------------------ */
.js [data-count-to] { font-variant-numeric: tabular-nums; }

/* --- reading-progress bar under the navbar -------------------- */
.progress {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
html[dir="rtl"] .progress { transform-origin: right center; }
.nav.is-stuck .progress { opacity: 1; }

/* --- mobile drawer: links arrive one after another ------------ */
@keyframes ms-drawer-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
.js .nav__menu.is-open li {
  animation: ms-drawer-in .4s var(--ease) backwards;
}
.js .nav__menu.is-open li:nth-child(1) { animation-delay: .06s; }
.js .nav__menu.is-open li:nth-child(2) { animation-delay: .11s; }
.js .nav__menu.is-open li:nth-child(3) { animation-delay: .16s; }
.js .nav__menu.is-open li:nth-child(4) { animation-delay: .21s; }
.js .nav__menu.is-open li:nth-child(5) { animation-delay: .26s; }
.js .nav__menu.is-open li:nth-child(6) { animation-delay: .31s; }

/* --- section headings draw their short rule on arrival --------- */
/* The rule is 22px by default (see .eyebrow::before above) and only
   starts collapsed inside a reveal that has not arrived yet, so an
   eyebrow outside a reveal is never left without it. */
.js .eyebrow::before { transition: width .6s var(--ease) .1s; }
.js .reveal:not(.is-in) .eyebrow::before { width: 0; }

/* --- buttons: a light sweep on hover -------------------------- */
.btn { position: relative; overflow: hidden; }
.btn > * { position: relative; z-index: 1; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }
html[dir="rtl"] .btn::after { transform: translateX(120%); }
html[dir="rtl"] .btn:hover::after { transform: translateX(-120%); }

/* The arrow in a button leans forward on hover, in whichever
   direction "forward" happens to be. */
.btn:hover [data-icon="arrow"] { transform: translateX(4px); }
html[dir="rtl"] .btn:hover [data-icon="arrow"] { transform: translateX(-4px); }
.btn [data-icon="arrow"] { transition: transform .3s var(--ease-land); }
html[dir="rtl"] .btn [data-icon="arrow"] svg { transform: scaleX(-1); }

/* --- cards lift and their picture pushes in ------------------- */
.pcard { transition: transform .42s var(--ease-land), box-shadow .42s var(--ease), border-color .3s var(--ease); }
.pcard:hover { transform: translateY(-8px); }
/* the category tag rises with the card */
.pcard .tag--float { transition: transform .38s var(--ease-land), background-color .3s var(--ease); }
.pcard:hover .tag--float { transform: translateY(-3px); }

/* --- gallery tiles ------------------------------------------- */
.gitem img { transition: transform .8s var(--ease); }
.gitem:hover img { transform: scale(1.09); }

/* --- feature / why-us cards ---------------------------------- */
.feature { transition: transform .42s var(--ease-land), box-shadow .42s var(--ease), border-color .3s var(--ease); }
.feature:hover { transform: translateY(-6px); }
.feature__icon { transition: transform .5s var(--ease-land), background-color .3s var(--ease), color .3s var(--ease); }
.feature:hover .feature__icon { transform: translateY(-4px) rotate(-6deg) scale(1.08); }

/* --- process steps ------------------------------------------- */
.step { transition: transform .42s var(--ease-land), background-color .3s var(--ease); }
.step:hover { transform: translateY(-6px); }
.step__num { transition: transform .5s var(--ease-land), color .3s var(--ease), opacity .3s var(--ease); }
.step:hover .step__num { transform: scale(1.18) translateY(-2px); opacity: 1; }

/* --- certification cards ------------------------------------- */
.cert { transition: background-color .3s var(--ease), transform .42s var(--ease-land); }
.cert:hover { transform: translateY(-5px); }

/* --- nav links grow an underline ------------------------------ */
.nav__link { position: relative; }
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 6px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  /* transform-origin takes no logical keywords, so RTL is stated */
  transform-origin: left center;
  transition: transform .34s var(--ease-land);
}
html[dir="rtl"] .nav__link::after { transform-origin: right center; }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* --- the logo tips on hover ---------------------------------- */
.brand__mark { transition: transform .5s var(--ease-land); }
.brand:hover .brand__mark { transform: rotate(-7deg) scale(1.07); }

/* --- social and contact icons -------------------------------- */
.topbar__socials a,
.socials a { transition: transform .35s var(--ease-land), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.topbar__socials a:hover,
.socials a:hover { transform: translateY(-3px); }

.infoitem { transition: transform .35s var(--ease-land), background-color .3s var(--ease); }
.infoitem:hover { transform: translateY(-3px); }

/* --- filter chips -------------------------------------------- */
.chip { transition: transform .3s var(--ease-land), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.chip:hover { transform: translateY(-2px); }

/* --- form fields --------------------------------------------- */
.field input,
.field select,
.field textarea { transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.field input:focus,
.field select:focus,
.field textarea:focus { transform: translateY(-1px); }

/* --- honour the system preference ----------------------------- */
/* One switch for the whole section: anything that moves is pinned to
   its resting state rather than being individually unwound. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .hero__copy > *,
  .js .hero__bg img,
  .js .nav__menu.is-open li,
  .devcard { animation: none; }
  .js .eyebrow::before { width: 22px; transition: none; }
  .btn::after { display: none; }
  .progress { transition: none; }

  .pcard, .pcard__media img, .pcard .tag--float,
  .gitem img, .feature, .feature__icon, .step, .step__num,
  .cert, .cert__badge, .brand__mark, .infoitem, .chip,
  .topbar__socials a, .socials a,
  .btn [data-icon="arrow"],
  .field input, .field select, .field textarea {
    transition: none;
  }
  .pcard:hover, .feature:hover, .step:hover, .cert:hover,
  .infoitem:hover, .chip:hover,
  .topbar__socials a:hover, .socials a:hover { transform: none; }
  .pcard:hover .pcard__media img,
  .gitem:hover img,
  .feature:hover .feature__icon,
  .step:hover .step__num,
  .brand:hover .brand__mark,
  .cert:hover .cert__badge,
  .btn:hover [data-icon="arrow"] { transform: none; }
  .nav__link::after { transition: none; }
}

/* ---------- 21. Misc ----------------------------------------- */
.loading {
  padding: 60px 0;
  text-align: center;
  color: var(--muted-2);
  font-size: 15px;
}
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }