/* ============================================================
   EL FAREED FOR FOOD SAFETY — design system v4 "Green Dominant"
   EXACT 2026 Brand Guideline palette:
     PRIMARY green #378134 · SECONDARY blue #0C345E
     bright green #8CC646 · yellow #FFDE59 · orange #E26237
     grey #9AA49A · light grey #DBDBDB
   Role vars kept: --green-* = GREEN (dominant surfaces: hero, footer,
   headings), --gold-* = BLUE (accents & buttons).
   ============================================================ */
:root {
  --green-950: #204E1C;
  /* deep green (shade of primary) — hero / footer / headings */
  --green-900: #378134;
  /* PRIMARY brand green (#378134) */
  --green-800: #4C9A3E;
  --green-600: #8CC646;
  /* bright secondary green (#8CC646) */
  --sage: #9AA49A;
  /* brand grey */
  --green-50: #EAF3DE;
  --gold-700: #08294A;
  /* dark blue — hover */
  --gold-600: #0C345E;
  /* SECONDARY brand blue (#0C345E) — buttons / accent */
  --gold-500: #4C86C6;
  /* light blue — accents on dark */
  --gold-50: #E9F0F8;
  --orange: #E26237;
  /* Firey Orange (guideline) */
  --yellow: #FFDE59;
  /* brand yellow (guideline) */
  --ivory: #F5F8F2;
  --paper: #FFFFFF;
  --ink: #14202B;
  --ink-soft: #51606E;
  --line: #DBDBDB;
  /* brand light grey */
  --radius: 6px;
  --shadow: 0 14px 34px -12px rgba(20, 52, 24, .20);
  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Questrial", "Century Gothic", Tahoma, sans-serif;
  --font-ar: "Cairo", Tahoma, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

html[dir="rtl"] body {
  font-family: var(--font-ar)
}

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

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

ul {
  list-style: none
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  color: var(--green-950);
  font-weight: 400;
  letter-spacing: .005em
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: var(--font-ar);
  font-weight: 700;
  letter-spacing: 0
}

/* icon helper (SVG injected by main.js) */
[data-ic] svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* ---------- header ---------- */
.topbar {
  background: var(--green-950);
  color: #fff;
  font-size: .78rem;
  padding: .5rem 0;
  letter-spacing: .02em;
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap
}

.topbar a {
  color: #fff
}

.topbar a:hover {
  color: var(--yellow)
}

header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.navwrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  /* padding traded into the logo below — the logo grew, the bar height did not */
  padding: 0
}

/* The header band needs more room than the 1180px body column: logo + six
   nav items + language + CTA don't fit, which is what made "EVENTS & NEWS"
   collide with the buttons. Give the header (and the ribbon above it, so
   they stay aligned) a wider track on large screens. */
.topbar .container,
header.site .navwrap {
  width: min(1760px, 96%)
}

/* ---- logo lockup: bright emblem + wordmark beside it ---- */
.brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  /* never let a long nav (FR) squeeze the logo — it must keep its ratio */
  flex: 0 0 auto;
}

/* logo-header.png is the artwork trimmed to its own bounding box — the old
   old.png was a 2000x2000 square that was 65% empty transparent padding,
   which is why it looked tiny and needed negative margins to compensate. */
.brand img,
.brand picture {
  display: block;
  flex: 0 0 auto;
}

.brand img {
  height: 96px;
  width: auto;
  max-width: none;
  object-fit: contain;
  margin: 0
}

.brand .wm {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: .18rem
}

.brand .wm b {
  font-family: var(--font-display);
  font-size: 1.62rem;
  letter-spacing: .02em;
  color: var(--gold-600);
  font-weight: 400;
}

.brand .wm span {
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-600);
}

html[lang="ar"] .brand .wm b {
  font-family: var(--font-ar);
  font-weight: 800
}

html[lang="ar"] .brand .wm span {
  letter-spacing: .05em
}

/* the nav — not the logo — is what gives way when space runs short */
nav.main {
  flex: 1 1 auto;
  min-width: 0
}

.header-cta {
  flex: 0 0 auto
}

@media(max-width:1700px) {
  nav.main a.navlink {
    padding: .9rem .68rem;
    font-size: .82rem;
    letter-spacing: .07em
  }
}

@media(max-width:1400px) {
  nav.main a.navlink {
    padding: .9rem .5rem;
    font-size: .78rem;
    letter-spacing: .05em
  }

  .header-cta .btn {
    padding: .7rem 1rem;
    font-size: .68rem
  }
}

@media(max-width:1280px) {
  .brand img {
    height: 70px
  }

  nav.main a.navlink {
    padding: .9rem .45rem;
    font-size: .75rem;
    letter-spacing: .04em
  }
}

@media(max-width:1180px) {
  .brand img {
    height: 64px
  }

  nav.main a.navlink {
    padding: .9rem .34rem;
    font-size: .72rem;
    letter-spacing: .03em
  }

  .header-cta .btn,
  .lang button {
    padding: .42rem .65rem;
    font-size: .72rem
  }

  .brand .wm b {
    font-size: 1.35rem
  }
}

/* below 1020px the nav collapses into the burger — the logo gets the room back */
@media(max-width:1020px) {
  .brand img {
    height: 74px
  }
}

@media(max-width:560px) {
  .brand img {
    height: 56px
  }

  .brand .wm span {
    letter-spacing: .22em
  }

  /* keep logo + language + CTA + burger on one line without overflowing */
  .navwrap {
    gap: .5rem
  }

  .header-cta {
    gap: .45rem
  }

  .header-cta .btn {
    padding: .6rem .75rem;
    font-size: .62rem
  }

  .lang button {
    font-size: .7rem;
    padding: .4rem .5rem
  }

  .lang button span[data-ic] {
    display: none
  }
}

@media(max-width:400px) {
  .brand img {
    height: 46px
  }

  .header-cta .btn {
    padding: .55rem .6rem;
    font-size: .58rem;
    letter-spacing: .06em
  }
}

nav.main ul {
  display: flex;
  gap: .3rem;
  align-items: center;
  /* the links are nowrap, so without this the list overflows its flex item and
     slides underneath the language picker / Get a Quote button. Wrapping is the
     safety net: if it ever runs out of room it drops a line instead of colliding. */
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0
}

nav.main>ul>li {
  position: relative
}

nav.main a.navlink {
  display: block;
  padding: .9rem .85rem;
  font-weight: 600;
  font-size: .84rem;
  color: #111;
  transition: color .2s;
  text-transform: uppercase;
  letter-spacing: .09em;
  white-space: nowrap;
}

html[lang="ar"] nav.main a.navlink {
  text-transform: none;
  letter-spacing: 0;
  font-size: .92rem
}

/* Top menu: black words; active keeps the green underline. */
nav.main a.navlink:hover {
  color: var(--green-900)
}

nav.main li.active>a.navlink {
  color: var(--green-900);
  box-shadow: inset 0 -2px 0 var(--green-900)
}

.dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 230px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: .4rem 0;
  border-radius: 0 0 var(--radius) var(--radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .2s;
}

nav.main li:hover .dropdown,
nav.main li:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.dropdown a {
  display: block;
  padding: .55rem 1.1rem;
  font-size: .86rem;
  color: var(--ink-soft);
  border-inline-start: 2px solid transparent;
  transition: .15s
}

.dropdown a:hover {
  color: var(--green-900);
  border-inline-start-color: var(--gold-600);
  background: var(--ivory)
}

.header-cta {
  display: flex;
  align-items: center;
  gap: .8rem
}

/* Language picker and Get a Quote are one matched pair — equal-width grid
   columns size both to the wider of the two, so they stay identical in
   English, Arabic and French without hard-coding a width. */
@media(min-width:1021px) {
  .header-cta {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: .6rem;
    align-items: center;
  }

  .header-cta .lang {
    display: block
  }

  .header-cta .lang button,
  .header-cta .btn {
    width: 100%
  }
}

/* Get a Quote and the language picker are one matched pair — identical box:
   same height, padding, radius, font size, weight and tracking. */
.header-cta .btn,
.header-cta .lang button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 .9rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* language switcher */
.lang {
  position: relative
}

.lang button {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  background: var(--gold-600);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: .45rem .85rem;
  font-weight: 700;
  font-size: .78rem;
  color: #fff;
  font-family: inherit;
  letter-spacing: .06em;
}

.lang button:hover {
  background: var(--gold-700)
}

.lang button [data-ic] {
  width: 15px;
  height: 15px;
  display: inline-block
}

.lang .dropdown {
  inset-inline-end: 0;
  inset-inline-start: auto;
  min-width: 130px;
  border-radius: var(--radius)
}

.lang:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.lang .dropdown a {
  cursor: pointer
}

.lang .dropdown a.current {
  color: var(--gold-700);
  font-weight: 700
}

.btn {
  display: inline-block;
  padding: .85rem 1.9rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: .25s;
  font-family: inherit;
  line-height: 1.4;
}

html[lang="ar"] .btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: .9rem
}

.btn-gold {
  background: var(--gold-600);
  color: #fff
}

.btn-gold:hover {
  background: var(--gold-700)
}

.btn-outline {
  border-color: var(--green-900);
  color: var(--green-900);
  background: transparent
}

.btn-outline:hover {
  background: var(--green-900);
  color: #fff
}

.btn-light {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  background: transparent
}

.btn-light:hover {
  background: #fff;
  color: var(--green-950);
  border-color: #fff
}

/* mobile nav */
.burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.6rem;
  color: var(--green-900)
}

@media(max-width:1020px) {
  .burger {
    display: block
  }

  /* drop the panel exactly below the header, whatever height the logo makes it
     (the old hard-coded top:72px covered the burger on small screens) */
  nav.main {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    bottom: auto;
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 1.2rem;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  nav.main.open {
    display: block
  }

  nav.main ul {
    flex-direction: column;
    align-items: stretch
  }

  /* IMPORTANT: scope this to the main nav only. Unscoped, it also caught the
     language picker's dropdown in the header — forcing English/العربية/Français
     permanently visible and in-flow, which is what was shoving the mobile
     header apart and overlapping the logo. */
  nav.main .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding-inline-start: 1rem
  }

  .topbar {
    display: none
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(118deg, var(--green-950) 0%, var(--green-900) 55%, var(--green-800) 100%);
}

/* rotating photo background */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden
}

.hero-slides .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  background-size: 0 0;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1.2s ease;
}

.hero-slides .slide::after {
  /* photo fills the hero edge to edge — `cover` crops rather than letterboxing,
     which is what removed the blurred bands that used to sit top and bottom */
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  will-change: transform;
}

.hero-slides .slide.active {
  opacity: 1;
  z-index: 1
}

.hero-slides .slide.active::after {
  animation: hero-kenburns 10s linear forwards
}

@keyframes hero-kenburns {
  from {
    transform: scale(1)
  }

  to {
    transform: scale(1.03)
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-slides .slide.active::after {
    animation: none
  }
}

/* The full-cover dark shade was removed so the photos read at full colour.
   Legibility now comes from the type itself (3D relief on the h1, shadows on
   the supporting text) plus this narrow gradient hugging the bottom edge,
   which only darkens where the stats strip sits. */
.hero-shade {
  display: none
}

.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 42%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6, 30, 13, .72) 0%, rgba(6, 30, 13, .3) 45%, transparent 100%);
}

.hero::before {
  /* fine grain */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .5;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 22px 22px;
}

.hero .container {
  position: relative;
  z-index: 2;
  padding: 6.5rem 0 7rem;
  max-width: 62rem
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

.hero .eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: #fff
}

html[lang="ar"] .hero .eyebrow {
  letter-spacing: .02em;
  text-transform: none;
  font-size: .9rem
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  max-width: 17ch;
  text-transform: uppercase;
  /* 3D extrusion — stacked hard shadows build the depth, the final soft shadow
     lifts the whole word off the photo. Replaces the old full-screen shade. */
  text-shadow:
    1px 1px 0 rgba(4, 26, 11, .70),
    2px 2px 0 rgba(4, 26, 11, .62),
    3px 3px 0 rgba(4, 26, 11, .54),
    4px 4px 0 rgba(4, 26, 11, .44),
    5px 5px 0 rgba(4, 26, 11, .34),
    6px 6px 0 rgba(4, 26, 11, .24),
    0 8px 26px rgba(0, 0, 0, .55);
  paint-order: stroke fill;
  -webkit-text-stroke: .6px rgba(4, 26, 11, .35);
}

/* the supporting hero copy lost the shade too — give it its own contrast
   so it doesn't disappear over the bright areas of a photo */
.hero .eyebrow,
.hero p.lead {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 2px 12px rgba(0, 0, 0, .45)
}

.hero .hero-foot .hf span {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7)
}

/* stat numbers are brand blue — light halo so they read on the photo */
.hero .hero-foot .hf b {
  text-shadow:
    0 1px 2px rgba(255, 255, 255, .85),
    0 0 12px rgba(255, 255, 255, .70),
    0 0 26px rgba(255, 255, 255, .45)
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-500)
}

.hero p.lead {
  margin: 1.6rem 0 2.6rem;
  font-size: 1.08rem;
  color: #fff;
  max-width: 52ch;
  font-weight: 400
}

.hero .wheat-mark {
  position: absolute;
  inset-inline-end: -50px;
  bottom: -60px;
  width: 460px;
  opacity: .08;
  z-index: 1;
}

.hero .hero-foot {
  margin-top: 3.6rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(.7rem, 1.8vw, 2rem);
  /* 6 stats must sit on ONE row. The hero .container is capped at 62rem, which
     is too narrow for six — so break out of it and centre on the viewport.
     Percentage margins resolve against the parent, and the parent is centred,
     so 50% - 47vw lands a 94vw-wide row symmetrically on the page. */
  flex-wrap: nowrap;
  width: 94vw;
  margin-inline: calc(50% - 47vw);
  padding-top: 2.4rem;
  text-align: center;
}

.hero .hero-foot .hf {
  flex: 1 1 0;
  min-width: 0
}

/* captions stay on one line too — they are what forces the wrap */
.hero .hero-foot .hf span {
  white-space: nowrap;
  font-size: clamp(.62rem, .82vw, .82rem);
  letter-spacing: .04em;
}

/* below this the row genuinely can't hold six — fall back to wrapping 3+3 */
@media(max-width:900px) {
  .hero .hero-foot {
    flex-wrap: wrap;
    width: auto;
    margin-inline: 0;
    gap: 1.6rem 1rem;
  }

  .hero .hero-foot .hf {
    flex: 0 1 calc(33.333% - 1rem)
  }

  .hero .hero-foot .hf span {
    white-space: normal
  }
}

.hero .hero-foot .hf {
  font-size: .92rem;
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}

html[lang="ar"] .hero .hero-foot .hf {
  letter-spacing: 0;
  text-transform: none
}

.hero .hero-foot .hf b {
  display: block;
  font-family: var(--font-display);
  /* trimmed from 2.6–3.6rem so six numbers clear one row without crowding */
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  line-height: 1.05;
  margin-bottom: .35rem;
  color: #0D3F71;
  font-weight: 600
}

@media(max-width:560px) {
  .hero .hero-foot {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem 1rem;
    margin-top: 2.4rem;
    padding-top: 1.8rem;
    width: auto;
    margin-inline: 0;
  }

  .hero .hero-foot .hf {
    font-size: .74rem;
    letter-spacing: .04em
  }

  .hero .hero-foot .hf b {
    font-size: 2.2rem
  }
}

/* The English figures are Anton, which the browser also fake-bolds — very heavy.
   Cairo at 600 came out far lighter and the Arabic hero looked weak next to it.
   Cairo 800 is loaded in the font link and is the closest real weight. */
html[lang="ar"] .hero .hero-foot .hf b {
  font-family: var(--font-ar);
  font-weight: 800
}

/* page hero (inner pages) */
.page-hero {
  background: linear-gradient(118deg, var(--green-950), var(--green-800));
  color: #fff;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 22px 22px
}

.page-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 560
}

.page-hero .crumb {
  color: #CFE4B8;
  font-size: .78rem;
  margin-bottom: .7rem;
  position: relative;
  z-index: 2;
  letter-spacing: .14em;
  text-transform: uppercase
}

html[lang="ar"] .page-hero .crumb {
  letter-spacing: 0;
  text-transform: none
}

.page-hero .crumb a:hover {
  color: var(--gold-500)
}

.page-hero .container {
  position: relative;
  z-index: 2
}

/* Per-page ribbon colours (brand palette) */
.page-hero.ph-about {
  background: linear-gradient(118deg, #6FAF2E, #8CC646)
}

/* About — light green */
.page-hero.ph-products {
  background: linear-gradient(118deg, #08294A, #0C345E)
}

/* Products — blue */
.page-hero.ph-solutions {
  background: linear-gradient(118deg, #F5CE2A, #FFDE59)
}

/* Solutions — yellow */
.page-hero.ph-events {
  background: linear-gradient(118deg, #2B6A28, #378134)
}

/* Events & News — dark green */
.page-hero.ph-contact {
  background: linear-gradient(118deg, #828D82, #9AA49A)
}

/* Contact — grey */
/* Dark text on the light ribbons (yellow / light green / grey) for legibility */
.page-hero.ph-solutions h1,
.page-hero.ph-about h1,
.page-hero.ph-contact h1 {
  color: var(--green-950)
}

.page-hero.ph-solutions .crumb,
.page-hero.ph-about .crumb,
.page-hero.ph-contact .crumb {
  color: rgba(15, 40, 15, .7)
}

.page-hero.ph-solutions .crumb a:hover,
.page-hero.ph-about .crumb a:hover,
.page-hero.ph-contact .crumb a:hover {
  color: #000
}

.page-hero.ph-solutions::before,
.page-hero.ph-about::before,
.page-hero.ph-contact::before {
  opacity: .18
}

/* ---------- sections ---------- */
section.block {
  padding: 5.2rem 0
}

.sec-head {
  max-width: 46rem;
  margin-bottom: 3rem
}

.sec-head .kicker {
  color: var(--gold-700);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: .72rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
}

html[lang="ar"] .sec-head .kicker {
  letter-spacing: .02em;
  text-transform: none;
  font-size: .88rem
}

.sec-head .kicker::before {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--gold-600)
}

.sec-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem)
}

.sec-head p {
  color: var(--ink-soft);
  margin-top: 1rem;
  font-size: 1.02rem
}

.sec-head.center {
  margin-inline: auto;
  text-align: center
}

.sec-head.center .kicker {
  justify-content: center
}

/* profile / about split */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 4rem;
  align-items: center
}

@media(max-width:880px) {
  .split {
    grid-template-columns: 1fr
  }
}

.photo-card {
  border-radius: var(--radius);
  min-height: 380px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(7, 42, 77, .18), rgba(7, 42, 77, .55)),
    linear-gradient(118deg, var(--green-800), var(--green-950));
  box-shadow: var(--shadow);
  border: 1px solid var(--green-900);
}

.photo-card::before {
  /* contour field lines */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  background:
    repeating-radial-gradient(ellipse 140% 60% at 50% 115%, transparent 0 34px, rgba(255, 255, 255, .35) 34px 35px);
}

.photo-card::after {
  /* gold frame inset */
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(76, 144, 62, .45);
  border-radius: 3px;
  pointer-events: none;
}

.photo-card .ph-label {
  position: absolute;
  inset-inline-start: 1.6rem;
  bottom: 1.5rem;
  color: var(--gold-50);
  z-index: 2;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
}

html[lang="ar"] .photo-card .ph-label {
  letter-spacing: .02em;
  text-transform: none;
  font-size: .9rem
}

.photo-card .ph-ic {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 96px;
  height: 96px;
  color: rgba(255, 255, 255, .4)
}

/* real company photo (HQ & feed mill, Mansoura) — shown at its own aspect
   ratio, never cropped. Overrides the decorative placeholder card. */
.photo-card.has-img {
  min-height: 0;
  background: none;
  border: 0;
  overflow: visible;
  box-shadow: none;
}
.photo-card.has-img::before,
.photo-card.has-img::after { display: none }
.photo-card.has-img img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.photo-card.has-img .ph-label {
  position: static;
  display: block;
  margin-top: .85rem;
  color: var(--ink-soft);
  text-align: center;
}

/* solution panels (photo + green icon/title/text)
   EVERY source file in assets/solutions is SQUARE (900x900 / 1080x1080).
   The old `min-height:360px` made the box ~550x360, so `cover` threw away
   roughly a third of the image height and decapitated the animal. Matching the
   box to the source aspect ratio means nothing is cropped at all. If you ever
   drop in a non-square photo here, crop it square first. */
.sol-photo {
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.sol-photo::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 4px;
  pointer-events: none
}

.sol-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .6rem
}

.sol-ico {
  width: calc(48px * var(--ics, 1));
  height: calc(48px * var(--ics, 1));
  flex: none;
  color: var(--green-900)
}

.sol-ico svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

.sol-head h2 {
  color: var(--green-900);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0
}

html[lang="ar"] .sol-head h2 {
  font-family: var(--font-ar)
}

.sol-block {
  margin-bottom: 3.4rem
}

/* Every solution panel uses the SAME layout: copy on the left, photo on the
   right. The HTML alternates photo-first / text-first, so the order is forced
   here instead of rewriting each block. Client request 2026-07-30. */
.sol-block > * { order: 1 }
.sol-block > .sol-photo { order: 2 }

.sol-block .badge-soon {
  display: inline-block;
  margin-inline-start: .6rem;
  padding: .15rem .6rem;
  border-radius: 20px;
  background: var(--yellow);
  color: var(--green-950);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  font-family: var(--font-body)
}

.lede {
  font-size: 1.05rem;
  color: var(--ink-soft)
}

/* stats */
.stats {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}

.stats .stat {
  padding: 2.6rem 1.4rem;
  text-align: center;
  border-inline-start: 1px solid var(--line)
}

.stats .stat:first-child {
  border-inline-start: 0
}

.stats b {
  display: block;
  font-size: 2.7rem;
  font-weight: 560;
  color: var(--green-900);
  font-family: var(--font-display);
  line-height: 1.1
}

html[lang="ar"] .stats b {
  font-family: var(--font-ar);
  font-weight: 700
}

.stats span {
  font-size: .78rem;
  color: var(--ink-soft);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: .4rem;
  display: inline-block
}

html[lang="ar"] .stats span {
  letter-spacing: 0;
  text-transform: none;
  font-size: .88rem
}

@media(max-width:760px) {
  .stats {
    grid-template-columns: repeat(2, 1fr)
  }

  .stats .stat:nth-child(3) {
    border-inline-start: 0
  }
}

/* grids */
.grid {
  display: grid;
  gap: 1.2rem
}

.grid.cols-5 {
  grid-template-columns: repeat(5, 1fr)
}

.grid.cols-4 {
  grid-template-columns: repeat(4, 1fr)
}

.grid.cols-3 {
  grid-template-columns: repeat(3, 1fr)
}

.grid.cols-2 {
  grid-template-columns: repeat(2, 1fr)
}

@media(max-width:1020px) {
  .grid.cols-5 {
    grid-template-columns: repeat(3, 1fr)
  }

  .grid.cols-4 {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:680px) {

  .grid.cols-5,
  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2 {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:460px) {

  .grid.cols-5,
  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2 {
    grid-template-columns: 1fr
  }
}

/* product category card */
.cat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.4rem;
  text-align: center;
  transition: .25s;
  position: relative;
}

.cat-card::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 1.4rem;
  height: 2px;
  background: var(--gold-600);
  transform: scaleX(0);
  transition: .3s;
  transform-origin: center;
}

.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow)
}

.cat-card:hover::before {
  transform: scaleX(1)
}

.cat-card .ic {
  width: 54px;
  height: 54px;
  margin: 0 auto 1.1rem;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--green-800);
  background: var(--ivory);
  transition: .25s;
}

.cat-card:hover .ic {
  color: var(--gold-700);
  border-color: var(--gold-600)
}

.cat-card h3 {
  font-size: 1.02rem
}

.cat-card p {
  font-size: .82rem;
  color: var(--ink-soft);
  margin-top: .5rem
}

/* product circles (arshinefeed-style PRODUCT LIST) */
.circle-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem 1.2rem;
  justify-items: center;
  margin-top: 1rem;
}

@media(max-width:900px) {
  .circle-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:560px) {
  .circle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem .8rem
  }
}

.pcircle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  text-align: center;
  text-decoration: none;
  color: var(--green-950);
  width: 100%;
  max-width: 190px;
}

.pcircle img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  transition: transform .25s;
}

.pcircle:hover img {
  transform: translateY(-5px) scale(1.03)
}

.pcircle span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .02em;
  line-height: 1.15;
  text-transform: uppercase;
}

html[lang="ar"] .pcircle span {
  font-family: var(--font-ar);
  text-transform: none
}

.pcircle:hover span {
  color: var(--green-900)
}

.pcircle small {
  display: block;
  font-size: .72rem;
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: -.2rem;
  letter-spacing: .04em
}

.pcircle.soon {
  cursor: default
}

.pcircle.soon:hover img {
  transform: none
}

.mini-quote {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--green-900);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: .2s;
}

html[lang="ar"] .mini-quote {
  letter-spacing: 0;
  text-transform: none;
  font-size: .84rem
}

.mini-quote:hover {
  background: var(--green-900);
  border-color: var(--green-900);
  color: #fff
}

/* solutions */
.sol-card {
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(165deg, var(--green-800) 0%, var(--green-950) 78%);
  background-size: cover;
  background-position: center;
  transition: .3s;
  border: 1px solid var(--green-900);
}

.sol-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 52, 94, .28) 0%, rgba(5, 20, 40, .15) 45%, rgba(5, 20, 40, .35) 100%)
}

.sol-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow)
}

.sol-card .sol-ic {
  position: absolute;
  top: 1.5rem;
  inset-inline-start: 1.5rem;
  width: 46px;
  height: 46px;
  color: var(--gold-500);
  z-index: 2;
}

.sol-card .body {
  padding: 1.7rem;
  background: linear-gradient(transparent, rgba(5, 20, 40, .92) 45%);
  width: 100%;
  position: relative;
  z-index: 2
}

.sol-card h3 {
  color: #fff;
  font-size: 1.45rem;
  margin-bottom: .5rem;
  font-weight: 560
}

.sol-card p {
  font-size: .85rem;
  color: #DDEBCF
}

.sol-card .more {
  display: inline-block;
  margin-top: 1rem;
  color: var(--gold-500);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-600);
  padding-bottom: .2rem;
}

html[lang="ar"] .sol-card .more {
  letter-spacing: 0;
  text-transform: none;
  font-size: .84rem
}

/* homepage SOLUTION strip — expanding columns, full-width edge-to-edge */
.sol-section {
  background: var(--paper)
}

.sol-section .sol-strip {
  width: 100%;
  margin: 0;
  padding: 0
}

.sol-strip {
  display: flex;
  gap: 0;
  height: 520px;
  border-radius: 0;
  overflow: hidden
}

.sol-col {
  flex: 1 1 0%;
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: #fff;
  transition: flex-basis .5s cubic-bezier(.4, 0, .2, 1), flex-grow .5s cubic-bezier(.4, 0, .2, 1);
}

/* When ANY column is hovered, let non-hovered ones shrink to share remaining space */
.sol-strip:hover .sol-col {
  flex-grow: 1;
  flex-basis: 0%
}

/* Hovered column becomes exactly 520px wide (perfect 1:1 square to show the full image without zoom) */
.sol-strip .sol-col:hover {
  flex-grow: 0;
  flex-basis: 520px
}

.sol-col-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.sol-col::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(transparent 20%, rgba(5, 20, 40, .88));
  transition: .4s
}

.sol-col:hover::before {
  background: linear-gradient(transparent 10%, rgba(5, 20, 40, .92))
}

.sol-col-in {
  position: relative;
  z-index: 2;
  padding: 1.2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .4rem
}

.sol-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-bottom: .15rem
}

.sol-col h3 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap
}

html[lang="ar"] .sol-col h3 {
  font-family: var(--font-ar);
  text-transform: none
}

.sol-desc {
  color: rgba(255, 255, 255, .88);
  font-size: .78rem;
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease, opacity .4s;
  opacity: 0
}

.sol-col:hover .sol-desc {
  max-height: 350px;
  opacity: 1
}

.sol-col .more {
  color: var(--yellow);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transition: .3s
}

.sol-col:hover .more {
  opacity: 1
}

@media(max-width:760px) {
  .sol-strip {
    flex-direction: column;
    height: auto
  }

  .sol-col {
    height: auto;
    min-height: 160px;
    flex: 1 1 auto;
    width: 100%
  }

  .sol-strip:hover .sol-col {
    flex-grow: 1;
    flex-basis: auto
  }

  .sol-strip .sol-col:hover {
    flex-grow: 1;
    flex-basis: auto
  }

  .sol-col .more {
    opacity: 1
  }

  .sol-desc {
    max-height: none;
    opacity: 1;
    padding-top: 0.5rem
  }

  /* long species names ("Premium Forage Range") must wrap, not overflow */
  .sol-col h3 {
    white-space: normal;
    font-size: 1.15rem
  }

  .sol-icon {
    width: 36px;
    height: 36px
  }
}

/* strengths tabs */
.tabs {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2.2rem;
  background: var(--paper)
}

.tabs button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: .8rem 1.9rem;
  font-weight: 700;
  font-size: .78rem;
  color: var(--ink-soft);
  transition: .2s;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[lang="ar"] .tabs button {
  letter-spacing: 0;
  text-transform: none;
  font-size: .9rem
}

.tabs button.on {
  background: var(--green-900);
  color: #fff
}

.tabpanes .pane {
  display: none
}

.tabpanes .pane.on {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  animation: fade .4s
}

@media(max-width:880px) {
  .tabpanes .pane.on {
    grid-template-columns: 1fr
  }
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.strength {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.7rem;
  position: relative;
}

.strength::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 42px;
  height: 2px;
  background: var(--gold-600)
}

/* colour is stated explicitly so it visibly matches the section h2 above the
   cards — the same token at 1.1rem optically reads lighter than it does at
   2.6rem, and uppercase closes the rest of that gap.
   (The global html[lang="ar"] rule cancels the transform — Arabic has no caps.) */
.strength h3 {
  font-size: 1.06rem;
  margin-bottom: 1rem;
  display: flex;
  gap: .7rem;
  align-items: center;
  color: var(--green-950);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.strength h3 .s-ic {
  width: 24px;
  height: 24px;
  color: var(--gold-700);
  flex-shrink: 0
}

/* supplied black line-art icons, tinted via alpha mask (see assets/strengths/icons) */
.strength h3 .s-ic.s-ic-img {
  width: 28px;
  height: 28px;
  background: var(--gold-700);
  -webkit-mask: var(--ic) center/contain no-repeat;
  mask: var(--ic) center/contain no-repeat;
}

.strength ul {
  display: grid;
  gap: .6rem
}

.strength li {
  font-size: .88rem;
  color: var(--ink-soft);
  padding-inline-start: 1.15rem;
  position: relative
}

.strength li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--gold-600);
  font-size: .75rem;
  top: .1rem
}

/* news */
.news-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem;
  transition: .25s;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  position: relative;
}

.news-card::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 1.7rem;
  height: 2px;
  background: var(--gold-600);
  transform: scaleX(0);
  transition: .3s;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow)
}

.news-card:hover::before {
  transform: scaleX(1)
}

.news-card .tag {
  align-self: flex-start;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
  border: 1px solid var(--gold-600);
  border-radius: 2px;
  padding: .2rem .65rem;
}

html[lang="ar"] .news-card .tag {
  letter-spacing: 0;
  text-transform: none;
  font-size: .78rem
}

.news-card time {
  font-size: .75rem;
  color: var(--ink-soft);
  letter-spacing: .08em
}

/* matches .strength h3 — same green as the section h2, uppercase to close the
   optical gap that makes the same colour read lighter at small sizes */
.news-card h3 {
  font-size: 1.02rem;
  color: var(--green-950);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.news-card p {
  font-size: .86rem;
  color: var(--ink-soft)
}

/* CTA band */
.cta-band {
  background: var(--green-950);
  border-radius: var(--radius);
  padding: 3.4rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--green-900);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 20px 20px
}

.cta-band>* {
  position: relative;
  z-index: 2
}

.cta-band h3 {
  font-size: 1.7rem;
  color: #fff;
  font-weight: 560
}

.cta-band p {
  color: #CFE4B8;
  margin-top: .4rem
}

.cta-band .btn {
  background: var(--gold-600);
  color: #fff
}

.cta-band .btn:hover {
  background: var(--gold-500)
}

/* quote form */
.quote {
  background: var(--paper);
  border-top: 1px solid var(--line)
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  max-width: 780px;
  margin-inline: auto
}

.form-grid .full {
  grid-column: 1/-1
}

@media(max-width:640px) {
  .form-grid {
    grid-template-columns: 1fr
  }
}

input,
textarea,
select {
  width: 100%;
  font-family: inherit;
  font-size: .92rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ivory);
  color: var(--ink);
  transition: .2s;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold-600);
  background: #fff
}

textarea {
  min-height: 130px;
  resize: vertical
}

label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--green-900);
  display: block;
  margin-bottom: .4rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

html[lang="ar"] label {
  letter-spacing: 0;
  text-transform: none;
  font-size: .84rem
}

/* badge cards (certs, mission, team) */
.badge-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.1rem 1.6rem;
  text-align: center;
  transition: .25s;
}

.badge-card:hover {
  box-shadow: var(--shadow)
}

.badge-card .b-ic {
  width: 52px;
  height: 52px;
  margin: 0 auto 1.1rem;
  padding: 12px;
  color: var(--gold-700);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ivory);
}

.badge-card h3 {
  font-size: 1.05rem
}

.badge-card p {
  font-size: .85rem;
  color: var(--ink-soft);
  margin-top: .5rem
}

/* icon slot for supplied black-on-transparent PNGs (tinted via alpha mask) */
.badge-card .b-ic.b-ic-img {
  padding: 0;
  background: var(--ivory);
  position: relative;
}

.badge-card .b-ic.b-ic-img::before {
  content: "";
  position: absolute;
  inset: 13px;
  background: var(--green-900);
  -webkit-mask: var(--ic) center/contain no-repeat;
  mask: var(--ic) center/contain no-repeat;
}

/* Mission / Vision / Core Values — no icon, oversized display headings */
.mvv-card {
  padding: 2.6rem 1.8rem
}

.mvv-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--green-900);
  margin-bottom: .35rem;
}

html[lang="ar"] .mvv-card h3 {
  font-family: var(--font-ar);
  font-weight: 800
}

.mvv-card p {
  font-size: .95rem;
  line-height: 1.8
}

/* =========================================================================
   OUR STRENGTHS — bare black artwork, no circle / border / tile
   ========================================================================= */
.str-grid {
  gap: 3rem 3.4rem;
  align-items: start
}

.strength-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
}

.strength-card:hover {
  box-shadow: none
}

/* the badge (green ring + white ring + navy disc + icon) is baked into the
   SVG itself, exactly as in the deck — do not add borders or backgrounds */
.strength-card .s-ic {
  display: block;
  margin: 0 auto 1.5rem;
  width: 152px;
  height: 152px;
  max-width: 100%;
}

.strength-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--green-900);
}

html[lang="ar"] .strength-card h3 {
  font-family: var(--font-ar);
  font-weight: 800
}

.strength-card p {
  font-size: .92rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-top: .9rem;
  text-align: start;
}

@media(max-width:680px) {

  .grid.str-grid,
  .grid.cols-2.str-grid {
    grid-template-columns: 1fr;
    gap: 2.6rem
  }

  .strength-card .s-ic {
    width: 120px;
    height: 120px;
    margin-bottom: 1.2rem
  }
}

/* flex + centred so a strip with only one or two real logos sits in the middle
   instead of hugging the left edge of a 6-column grid */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem
}

.logo-strip > * {
  flex: 0 1 calc((100% - 5rem) / 6);
  min-width: 190px
}

@media(max-width:800px) {
  .logo-strip > * {
    flex: 0 1 calc((100% - 2rem) / 3)
  }
}

.logo-strip .slot {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA7B4;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* a slot holding a real logo: solid white card (logo art has a white ground),
   solid border instead of the placeholder dash */
.logo-strip .slot.has-logo {
  background: #fff;
  border-style: solid;
  padding: .9rem 1.1rem;
}

.logo-strip .slot.has-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform .18s ease;
}

.logo-strip .slot.has-logo a:hover {
  transform: scale(1.04)
}

.logo-strip .slot.has-logo a,
.logo-strip .slot.has-logo picture,
.logo-strip .slot.has-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

html[lang="ar"] .logo-strip .slot {
  letter-spacing: 0;
  text-transform: none;
  font-size: .8rem
}

/* product list page */
.prod-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 2.4rem;
  align-items: start
}

@media(max-width:900px) {
  .prod-layout {
    grid-template-columns: 1fr
  }
}

.side-cats {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 96px
}

.side-cats h3 {
  background: var(--green-950);
  color: #fff;
  padding: 1.1rem 1.3rem;
  font-size: .78rem;
  font-family: var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}

html[lang="ar"] .side-cats h3 {
  font-family: var(--font-ar);
  letter-spacing: 0;
  text-transform: none;
  font-size: .92rem
}

.side-cats a {
  display: block;
  padding: .72rem 1.3rem;
  font-size: .87rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  border-inline-start: 2px solid transparent;
  transition: .15s;
}

.side-cats a:hover {
  color: var(--green-900);
  border-inline-start-color: var(--gold-600);
  background: var(--ivory)
}

/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem
}

@media(max-width:860px) {
  .contact-grid {
    grid-template-columns: 1fr
  }
}

.info-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.3rem
}

.info-card .row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.3rem;
  align-items: flex-start
}

.info-card .row .ic {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: var(--radius);
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--ivory);
  color: var(--gold-700);
}

.info-card .row b {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-900)
}

html[lang="ar"] .info-card .row b {
  letter-spacing: 0;
  text-transform: none;
  font-size: .86rem
}

.map-frame {
  border: 1px solid var(--line);
  width: 100%;
  height: 400px;
  border-radius: var(--radius)
}

/* footer */
footer.site {
  background: var(--green-950);
  color: #CFE4B8;
  margin-top: 5rem;
  position: relative
}

footer.site::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-600), transparent)
}

.f-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.6rem;
  padding: 4rem 0 3rem
}

@media(max-width:880px) {
  .f-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:560px) {
  .f-grid {
    grid-template-columns: 1fr
  }
}

footer h4 {
  color: #fff;
  font-size: .74rem;
  margin-bottom: 1.3rem;
  font-family: var(--font-body);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
}

html[lang="ar"] footer h4 {
  font-family: var(--font-ar);
  letter-spacing: 0;
  text-transform: none;
  font-size: .92rem
}

footer a:hover {
  color: var(--gold-500)
}

footer .f-links li {
  margin-bottom: .6rem;
  font-size: .88rem
}

.f-brand .f-logo {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.3rem
}

.f-brand .f-logo img {
  height: 210px;
  width: auto
}

.f-brand .f-logo .wm {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: .2rem
}

.f-brand .f-logo .wm b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  font-weight: 400;
  letter-spacing: .02em
}

.f-brand .f-logo .wm span {
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff
}

.f-brand>p {
  font-size: .9rem;
  line-height: 1.75;
  max-width: 36ch
}

/* footer socials */
.socials {
  display: flex;
  gap: .6rem;
  margin-top: 1.4rem
}

.socials a {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #CFE4B8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}

.socials a:hover {
  background: var(--gold-600);
  border-color: var(--gold-600);
  color: #fff
}

/* footer contact-us button (Information column) */
footer .btn-light {
  margin-top: .4rem
}

/* copyright bar */
.copyright {
  border-top: 1px solid rgba(255, 255, 255, .14);
  margin-top: 1.5rem;
  padding: 1.15rem 1.4rem;
  text-align: center;
  font-size: .78rem;
  color: #9DBD8C;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* designer credit, bottom right */
.copyright .sig {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-size: .74rem;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .02em;
  transition: color .2s;
}
.copyright .sig b { font-weight: 700; color: rgba(255, 255, 255, .72) }
.copyright .sig span {
  color: var(--green-600);
  border-bottom: 1px solid transparent;
}
.copyright .sig:hover { color: rgba(255, 255, 255, .8) }
.copyright .sig:hover span { border-bottom-color: var(--green-600) }

@media(max-width:640px) {
  .copyright { justify-content: center; text-align: center }
  .copyright .sig { margin-inline-start: 0 }
}

/* =========================================================================
   GET A QUOTE  (quote.html)
   ========================================================================= */
.quote-hero {
  background: linear-gradient(122deg, var(--green-950) 0%, var(--green-900) 58%, var(--green-800) 100%);
  color: #fff;
  padding: 3.4rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.quote-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background: repeating-linear-gradient(64deg, transparent 0 46px, rgba(255,255,255,.5) 46px 47px);
}
.quote-hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 3rem;
  align-items: center;
}
.qh-kicker {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-600);
  font-weight: 700;
  margin-bottom: .6rem;
}
.quote-hero h1 { color: #fff; font-size: 3rem; line-height: 1.04; text-transform: uppercase; margin-bottom: .9rem }
.qh-copy p { color: #D9E8CE; font-size: 1rem; line-height: 1.72; max-width: 56ch }
.qh-mail {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.3rem; padding: .6rem 1.1rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  border-radius: 40px;
}
.qh-mail span { width: 20px; height: 20px; color: var(--green-600); display: block }
.qh-mail span svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7 }
.qh-mail a { color: #fff; font-weight: 700; font-size: .93rem }
.qh-mail a:hover { color: var(--yellow) }

.qh-stats { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem }
.qh-stats li {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.qh-stats strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 1.85rem; line-height: 1; color: #fff; letter-spacing: .01em;
}
.qh-stats strong em { font-style: normal; font-size: .95rem; color: var(--green-600) }
.qh-stats span { display: block; margin-top: .35rem; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #BFD6AE }

/* layout */
.quote-wrap { display: grid; grid-template-columns: 1.35fr .85fr; gap: 2.6rem; align-items: start }

/* form */
.quote-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 2.1rem 2.2rem; box-shadow: var(--shadow);
}
.quote-card h2 { font-size: 1.7rem; margin-bottom: .4rem }
.q-sub { font-size: .86rem; color: var(--ink-soft); margin-bottom: 1.6rem }
.q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem }
.q-field { display: block }
.q-field.q-span { grid-column: 1 / -1 }
.q-field > span {
  display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--green-900); font-weight: 700; margin-bottom: .35rem;
}
.q-field input, .q-field select, .q-field textarea {
  width: 100%; font-family: var(--font-body); font-size: .92rem; color: var(--ink);
  background: var(--ivory); border: 1px solid var(--line); border-radius: 4px;
  padding: .7rem .85rem; transition: .16s;
}
.q-field textarea { resize: vertical }
.q-field input:focus, .q-field select:focus, .q-field textarea:focus {
  outline: 0; background: #fff; border-color: var(--green-900);
  box-shadow: 0 0 0 3px rgba(55,129,52,.13);
}
.q-submit { margin-top: 1.6rem; width: 100%; justify-content: center; font-size: .92rem }
.q-alt { margin-top: .9rem; font-size: .82rem; color: var(--ink-soft); text-align: center }
.q-alt a { color: var(--gold-600); font-weight: 700 }
.q-alt a:hover { text-decoration: underline }

/* aside */
.quote-side { display: grid; gap: 1.4rem; position: sticky; top: 96px }
.q-steps, .q-contact, .q-ship {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; background: #fff;
}
.q-steps { background: var(--ivory) }
.quote-side h3 { font-size: 1.05rem; margin-bottom: 1rem }
.q-steps ol { list-style: none; display: grid; gap: 1rem }
.q-steps li { display: flex; gap: .85rem; align-items: flex-start }
.q-steps li > span {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-900); color: #fff; font-size: .78rem; font-weight: 700;
  display: grid; place-items: center; margin-top: .1rem;
}
.q-steps strong { display: block; font-size: .89rem; color: var(--green-950); margin-bottom: .12rem }
.q-steps em { font-style: normal; font-size: .82rem; color: var(--ink-soft); line-height: 1.55 }

.q-line { display: flex; gap: .8rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--line) }
.q-contact .q-line:first-of-type { border-top: 0; padding-top: 0 }
.q-line > span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--green-50); color: var(--green-900); display: grid; place-items: center }
.q-line > span svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7 }
.q-line strong { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700 }
.q-line em { font-style: normal; font-size: .9rem; color: var(--green-950); font-weight: 700 }
.q-line:not(.q-static):hover em { color: var(--gold-600) }
.q-static { cursor: default }
.q-static em { font-weight: 400; font-size: .84rem; color: var(--ink-soft) }

.q-ship table { width: 100%; border-collapse: collapse; font-size: .85rem }
.q-ship th, .q-ship td { padding: .5rem .2rem; text-align: start; border-bottom: 1px solid var(--line) }
.q-ship th { color: var(--green-900); font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; width: 30% }
.q-ship td { color: var(--ink-soft) }
.q-fine { margin-top: .7rem; font-size: .75rem; color: var(--sage); line-height: 1.5 }

@media(max-width:1100px) {
  .quote-wrap { grid-template-columns: 1fr }
  .quote-side { position: static }
  .quote-hero .container { grid-template-columns: 1fr; gap: 2rem }
  .qh-stats { grid-template-columns: repeat(4, 1fr) }
}
@media(max-width:700px) {
  .quote-hero h1 { font-size: 2.15rem }
  .qh-stats { grid-template-columns: repeat(2, 1fr) }
  .q-grid { grid-template-columns: 1fr }
  .quote-card { padding: 1.4rem 1.2rem 1.6rem }
}

/* ---- packaging & export (brochure slides 78 / 79) ---- */
.pack-sec { background: var(--ivory); border-top: 1px solid var(--line) }
.pack-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; margin-bottom: 2.8rem }
.pack-lead { font-size: .95rem; color: var(--ink-soft); line-height: 1.78; margin-bottom: 1.6rem }
.pack-points { list-style: none; display: grid; gap: 1rem }
.pack-points li { display: flex; gap: .9rem; align-items: flex-start }
.pack-points li > span {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); color: var(--green-900);
  display: grid; place-items: center;
}
.pack-points li > span svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7 }
.pack-points strong { display: block; font-size: .92rem; color: var(--green-950); margin-bottom: .15rem }
.pack-points em { font-style: normal; font-size: .85rem; color: var(--ink-soft); line-height: 1.55 }
.pack-photo { margin: 0 }
.pack-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow) }

.freight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem }
.freight-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem }
.freight-card h3 { font-size: 1.16rem; margin-bottom: 1rem }
.fr-nums { display: flex; gap: 2rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line) }
.fr-nums strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 1.7rem; line-height: 1; color: var(--green-900); letter-spacing: .01em;
}
.fr-nums strong em { font-style: normal; font-size: .9rem; color: var(--gold-600) }
.fr-nums span { display: block; margin-top: .3rem; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft) }
.freight-card p { font-size: .87rem; color: var(--ink-soft); line-height: 1.68 }
.freight-note {
  margin-top: 1.6rem; padding: .95rem 1.2rem; background: #fff;
  border-inline-start: 3px solid var(--orange); border-radius: 4px;
  font-size: .83rem; color: var(--ink-soft); line-height: 1.65;
}
.freight-note strong { color: var(--orange) }

@media(max-width:900px) {
  .pack-split { grid-template-columns: 1fr; gap: 2rem }
  .freight-grid { grid-template-columns: 1fr }
}

/* floating WhatsApp */
.wa-float {
  position: fixed;
  bottom: 22px;
  inset-inline-end: 22px;
  z-index: 90;
  width: 56px;
  height: 56px;
  padding: 13px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}

/* the WhatsApp mark is a solid glyph, not a line icon — never stroke it */
[data-ic="wa"] svg {
  fill: currentColor !important;
  stroke: none !important;
}
.wa-float svg {
  width: 100%;
  height: 100%;
}

.wa-float:hover {
  background: var(--green-900);
  transform: translateY(-2px)
}

/* scroll-to-top button */
.to-top {
  position: fixed;
  bottom: 88px;
  inset-inline-end: 22px;
  z-index: 90;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--green-900);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}

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

.to-top:hover {
  background: var(--green-950);
  transform: translateY(-2px)
}

.to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* utilities */
.muted {
  color: var(--ink-soft)
}

.mt-2 {
  margin-top: 2rem
}

.center {
  text-align: center
}

a.btn.mt-2 {
  display: inline-block
}

/* strengths tabs section wrapper */
.tabs-wrap {
  padding: 4.5rem 0
}

/* chairman's message */
.ceo-msg {
  background: var(--paper);
  border-top: 1px solid var(--line)
}

/* half quote / half portrait */
.ceo-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 2rem;
  max-width: 1180px;
  margin: 0 auto;
}

.ceo-quote {
  margin: 0;
  padding: 3rem 3.2rem 2.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ivory);
  border-inline-start: 4px solid var(--green-900);
  border-radius: var(--radius);
}

.ceo-quote::before,
.ceo-quote::after {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--green-600);
  position: absolute;
  opacity: .55;
}

.ceo-quote::before {
  content: "\201C";
  top: .6rem;
  inset-inline-start: 1.2rem;
}

.ceo-quote::after {
  content: "\201D";
  bottom: -.6rem;
  inset-inline-end: 1.4rem;
}

/* portrait fills its half — the photo is a transparent cut-out, so it sits
   on a brand backdrop and is contained (never cropped) rather than covered */
/* the portrait is now a full studio rectangle, not a transparent cut-out —
   so it fills the frame edge to edge instead of floating on a gradient */
.ceo-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 420px;
  background: var(--ivory);
}

.ceo-photo picture {
  display: block;
  height: 100%;
}

.ceo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.ceo-quote p {
  font-size: 1.06rem;
  line-height: 1.9;
  color: var(--ink);
  text-align: justify
}

.ceo-quote footer {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  align-items: flex-end;
}

.ceo-quote cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--green-950);
  letter-spacing: .02em;
}

html[lang="ar"] .ceo-quote cite {
  font-family: var(--font-ar);
  font-weight: 800
}

.ceo-quote footer span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-600);
}

html[lang="ar"] .ceo-quote footer span {
  letter-spacing: 0;
  text-transform: none;
  font-size: .86rem
}

@media(max-width:900px) {
  .ceo-wrap {
    grid-template-columns: 1fr
  }

  .ceo-photo {
    min-height: 0;
    order: -1
  }

  .ceo-photo img {
    height: auto;
    max-height: 460px;
    object-fit: cover
  }
}

@media(max-width:640px) {
  .ceo-quote {
    padding: 2.4rem 1.4rem 2rem
  }

  .ceo-quote p {
    text-align: start
  }
}

/* reveal-on-scroll (only hides when JS is running — html.js set by main.js) */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease
}

html.js .reveal.in {
  opacity: 1;
  transform: none
}

@media(prefers-reduced-motion:reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none
  }
}

html[lang="ar"] .f-brand .f-logo .wm b {
  font-family: var(--font-ar);
  font-weight: 800
}

/* ============ CERTIFICATES GALLERY ============ */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.cert-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line, #e3e6e0);
  border-radius: var(--radius);
  padding: .9rem .9rem 1rem;
  text-align: center;
  cursor: zoom-in;
  box-shadow: 0 2px 10px rgba(2, 54, 100, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}

.cert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(2, 54, 100, .14)
}

.cert-card img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}

.cert-card figcaption {
  margin-top: .7rem;
  font-family: var(--font-display);
  font-size: .92rem;
  letter-spacing: .03em;
  color: var(--green-950);
}

html[lang="ar"] .cert-card figcaption {
  font-family: var(--font-ar);
  font-weight: 800;
  letter-spacing: 0
}

.cert-card .c-sub {
  display: block;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-top: .15rem
}

html[lang="ar"] .cert-card .c-sub {
  letter-spacing: 0;
  text-transform: none;
  font-size: .78rem
}

@media(max-width:1024px) {
  .cert-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:640px) {
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem
  }
}

/* cert lightbox */
.cert-lb {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 26, 16, .82);
  padding: 2.2rem;
  cursor: zoom-out;
}

.cert-lb.open {
  display: flex
}

.cert-lb img {
  max-width: min(92vw, 760px);
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  background: #fff
}

.cert-lb .lb-close {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1.2rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.cert-lb .lb-close:hover {
  background: rgba(255, 255, 255, .28)
}

/* =========================================================================
   PRODUCT CATALOGUE  (catalogue.html + product.html)
   ========================================================================= */
.cat-intro {
  max-width: 74ch;
  margin-bottom: 2.4rem
}

.cat-intro .kicker {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-900);
  margin-bottom: .7rem;
}

.cat-intro p {
  color: var(--ink-soft);
  font-size: .97rem;
  line-height: 1.75
}

.cat-layout {
  display: grid;
  grid-template-columns: 278px 1fr;
  gap: 2.4rem;
  align-items: start
}

/* --- sidebar --- */
.cat-side {
  position: sticky;
  top: 96px
}

.cat-side-head {
  font-family: var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--green-900);
  color: #fff;
  padding: .85rem 1.1rem;
  font-size: .95rem;
  border-radius: var(--radius) var(--radius) 0 0;
}

.cat-side nav {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  background: #fff
}

.side-cat+.side-cat {
  border-top: 1px solid var(--line)
}

.side-cat-h {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  padding: .8rem 1.1rem;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  color: var(--green-950);
  transition: .15s;
}

.side-cat-h:hover {
  background: var(--ivory);
  color: var(--green-900)
}

.side-cat-h em {
  font-style: normal;
  font-size: .72rem;
  color: var(--ink-soft);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: .1rem .5rem;
  flex: none;
}

.side-cat.open .side-cat-h {
  background: var(--green-50);
  color: var(--green-900)
}

.side-cat-list {
  list-style: none;
  display: none;
  padding: .2rem 0 .7rem;
  background: var(--ivory)
}

.side-cat.open .side-cat-list {
  display: block
}

.side-cat-list a {
  display: block;
  padding: .42rem 1.1rem .42rem 1.5rem;
  font-size: .82rem;
  color: var(--ink-soft);
  border-inline-start: 2px solid transparent;
  line-height: 1.45;
}

.side-cat-list a:hover {
  color: var(--green-900);
  border-inline-start-color: var(--gold-600);
  background: #fff
}

.side-cat-list a.on {
  color: var(--gold-600);
  font-weight: 700;
  border-inline-start-color: var(--gold-600);
  background: #fff
}

.side-cta {
  margin-top: 1.4rem;
  padding: 1.3rem;
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--green-950), var(--green-900));
  color: #fff;
}

.side-cta h4 {
  color: #fff;
  font-size: 1.12rem;
  margin-bottom: .5rem
}

.side-cta p {
  font-size: .83rem;
  color: #D9E8CE;
  margin-bottom: .9rem;
  line-height: 1.6
}

/* --- toolbar + chips --- */
.cat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.4rem;
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem
}

.chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 30px;
  cursor: pointer;
  padding: .42rem .95rem;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--ink-soft);
  transition: .15s;
}

.chip:hover {
  border-color: var(--green-900);
  color: var(--green-900)
}

.chip em {
  font-style: normal;
  opacity: .6;
  font-size: .74rem;
  margin-inline-start: .25rem
}

.chip.on {
  background: var(--green-900);
  border-color: var(--green-900);
  color: #fff
}

.chip.on em {
  opacity: .85
}

.cat-count {
  font-size: .82rem;
  color: var(--ink-soft);
  white-space: nowrap
}

.cat-count span {
  font-weight: 700;
  color: var(--green-900)
}

.cat-blurb {
  margin-bottom: 1.6rem
}

.cat-blurb h2 {
  font-size: 1.5rem;
  margin-bottom: .5rem
}

.cat-blurb h2 small {
  font-family: var(--font-ar);
  font-size: .95rem;
  color: var(--sage);
  margin-inline-start: .5rem
}

.cat-blurb p {
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.7;
  max-width: 70ch
}

/* --- product cards --- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem
}

.prod-grid.rel {
  grid-template-columns: repeat(4, 1fr)
}

.pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: .2s;
}

.pcard:hover {
  border-color: var(--green-900);
  box-shadow: var(--shadow);
  transform: translateY(-3px)
}

.pcard-img {
  position: relative;
  background: var(--ivory);
  padding: 1rem;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center
}

/* <picture> is an inline wrapper, so IT was the grid item, not the <img>.
   max-height:100% then had no definite parent height to resolve against, the
   700px image escaped the square, and its min-content width stretched the card
   to ~700px tall on narrow screens. display:contents makes the <img> the real
   grid item so both constraints resolve against the square. */
.pcard-img picture {
  display: contents
}

.pcard-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  display: block
}

.pcard-pro {
  position: absolute;
  top: .7rem;
  inset-inline-start: .7rem;
  background: var(--gold-600);
  color: #fff;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .03em;
  padding: .2rem .55rem;
  border-radius: 3px;
}

/* download cards grid (catalogs page) + catalogue sidebar download block */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
  align-items: stretch
}

/* every card the same height, and the download buttons line up across the row:
   the description flexes to absorb the difference instead of the card growing */
.dl-grid .q-dl {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0
}

.dl-grid .q-dl > p:first-of-type {
  flex: 1 0 auto
}

/* every white download button the same size, whatever the label length —
   84px fits a two-line title + the PDF meta line without growing */
.dl-grid .q-dl-btn {
  min-height: 84px;
  box-sizing: border-box
}

/* the profile cards have no "send the form to" block, so the button would sit
   at the top with dead green below it — auto margins centre it instead */
.dl-grid .q-dl > .q-dl-btn:last-child {
  margin-block: auto
}

.cat-side .side-dl {
  margin-bottom: 1.2rem
}

/* ---- product line badge: Diamond gem / Super star, as on the brochure bag.
   Sits opposite the protein chip so the two never collide. ---- */
.tier-badge {
  position: absolute;
  top: .55rem;
  inset-inline-end: .55rem;
  width: 44px;
  height: 44px;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(6, 30, 13, .28));
  z-index: 2;
}

.tier-badge picture {
  display: block
}

.tier-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block
}

.tier-badge-lg {
  width: 78px;
  height: 78px;
  top: 1rem;
  inset-inline-end: 1rem
}

@media(max-width:560px) {
  .tier-badge {
    width: 34px;
    height: 34px
  }

  .tier-badge-lg {
    width: 56px;
    height: 56px
  }
}

.pcard-body {
  padding: .95rem 1rem 1rem;
  flex: 1
}

.pcard-body h3 {
  font-size: 1.02rem;
  line-height: 1.22;
  margin-bottom: .4rem
}

.pcard:hover .pcard-body h3 {
  color: var(--green-900)
}

.pcard-meta {
  font-size: .78rem;
  color: var(--ink-soft)
}

.pcard-code {
  font-size: .7rem;
  color: var(--sage);
  margin-top: .35rem;
  letter-spacing: .02em
}

.pcard-go {
  display: block;
  padding: .6rem 1rem;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--gold-600);
  font-weight: 700;
}

.pcard:hover .pcard-go {
  background: var(--gold-600);
  color: #fff;
  border-top-color: var(--gold-600)
}

/* =========================================================================
   PRODUCT DETAIL
   ========================================================================= */
.pd-top {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 2.4rem;
  align-items: start;
  margin-bottom: 2.6rem
}

.pd-shot {
  position: relative;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  display: grid;
  place-items: center
}

.pd-shot picture {
  display: contents
}

.pd-shot img {
  max-width: 100%;
  height: auto;
  min-width: 0;
  display: block
}

.pd-cat {
  display: inline-block;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-900);
  font-weight: 700;
  margin-bottom: .5rem;
}

.pd-head h2 {
  font-size: 2rem;
  margin-bottom: .9rem
}

.pd-lead {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.75;
  margin-bottom: 1.4rem
}

.pd-quick {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-bottom: 1.5rem
}

.pd-quick li {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .9rem
}

.pd-quick span {
  display: block;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .2rem
}

.pd-quick strong {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--green-950);
  letter-spacing: .01em
}

.pd-actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap
}

.pd-body {
  display: grid;
  gap: 2.2rem
}

.pd-sec h3 {
  font-size: 1.28rem;
  margin-bottom: .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--green-600);
  display: inline-block;
}

.pd-list {
  list-style: none;
  display: grid;
  gap: .55rem
}

.pd-list li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.6
}

.pd-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-600);
}

.pd-p {
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 78ch
}

.pd-small {
  font-size: .82rem;
  color: var(--sage);
  margin-top: .7rem
}

.pd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .89rem
}

.pd-table th,
.pd-table td {
  border: 1px solid var(--line);
  padding: .62rem .9rem;
  text-align: start
}

.pd-table th {
  background: var(--ivory);
  color: var(--green-950);
  font-weight: 700;
  width: 40%
}

.pd-table td {
  color: var(--ink-soft)
}

.pd-note {
  list-style: none;
  margin-top: .9rem;
  font-size: .8rem;
  color: var(--sage);
  display: grid;
  gap: .25rem
}

.pd-related {
  margin-top: 2.4rem
}

.pd-cta {
  margin-top: 2.4rem
}

.pd-missing {
  text-align: center;
  padding: 4rem 1rem
}

.pd-missing h2 {
  margin-bottom: .7rem
}

.pd-missing p {
  color: var(--ink-soft);
  margin-bottom: 1.4rem
}

/* =========================================================================
   SOLUTIONS — species icon switcher
   ========================================================================= */
/* Species switcher — arshinefeed style: bare black artwork + label, no card,
   no tile, no circle. Active/hover turns the icon and label brand green and
   draws an underline under the label. */
.sol-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2.2rem 3.2rem;
  margin-bottom: 3.4rem;
}

.sol-ibtn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  min-width: 92px;
  padding: .3rem 0 .95rem;
  border: 0;
  border-radius: 0;
  background: none;
  transition: .2s;
}

/* underline that appears on the active species */
.sol-ibtn::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--green-900);
  transform: scaleX(0);
  transition: transform .25s ease;
}

.sol-ibtn.on::after {
  transform: scaleX(1)
}

/* Fixed-height icon slot. --ics optically rescales individual icons (the corn
   cob is set smaller than the animal heads), and without a fixed slot that
   shorter icon dragged its caption up out of line with its neighbours — visible
   on "Premium Forage Range" in both EN and AR. The slot height is constant, the
   artwork scales inside it, so every caption sits on the same line. */
.sol-ibtn .sol-ib-ic {
  width: auto;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
  place-items: initial;
}

.sol-ibtn .sol-ib-ic::before {
  content: "";
  display: block;
  /* --icw widens the box for icons that are two animals side by side
     (Small Ruminant), so they don't read half-size next to single heads */
  /* --ics optically rescales a single icon (dense artwork like the corn cob
     reads larger than sparse line-art heads at the same box size) */
  width: calc(var(--icw, 68px) * var(--ics, 1));
  height: calc(68px * var(--ics, 1));
  background: #111;
  -webkit-mask: var(--ic) center/contain no-repeat;
  mask: var(--ic) center/contain no-repeat;
  transition: background .2s ease;
}

.sol-ibtn:hover .sol-ib-ic::before,
.sol-ibtn.on .sol-ib-ic::before {
  background: var(--green-900)
}

.sol-ibtn em {
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--ink);
  font-weight: 400;
  transition: color .2s ease;
}

html[lang="ar"] .sol-ibtn em {
  font-family: var(--font-ar)
}

.sol-ibtn:hover em,
.sol-ibtn.on em {
  color: var(--green-900)
}

.sol-ibtn.on em {
  font-weight: 700
}

.sol-ico-img {
  background: var(--green-900);
  -webkit-mask: var(--ic) center/contain no-repeat;
  mask: var(--ic) center/contain no-repeat;
}

.sol-ibtn.soon {
  opacity: .75
}

html.js .sol-switch .sol-hide {
  display: none
}

.sol-extra {
  margin: 0 0 3rem
}

/* solutions page lede (brochure slide 17) */
.sol-lede {
  max-width: 80ch;
  margin-bottom: 2.4rem
}

.sol-tagline {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: .07em;
  color: var(--green-900);
  margin-bottom: 1.2rem;
}

html[lang="ar"] .sol-tagline {
  font-family: var(--font-ar);
  font-weight: 800;
  letter-spacing: 0
}

.sol-lede p {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.78
}

.sol-lede p+p {
  margin-top: .9rem
}

/* brochure content inside each species panel — no boxes, clean typography */
.sol-prog {
  display: grid;
  gap: 2.4rem;
  margin: 1.4rem 0 .4rem
}

.sol-brief {
  /* deliberately unstyled container — the old .sol-card rules above are a dead
     homepage class; do NOT reuse that name here or the dark gradient leaks in */
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  color: inherit;
  display: block;
}

.sol-brief+.sol-brief {
  border-top: 1px solid var(--line);
  padding-top: 2.2rem
}

.sol-kicker {
  display: block;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin-bottom: .4rem;
}

.sol-brief h3 {
  font-size: 1.28rem;
  color: var(--green-900);
  margin-bottom: .7rem;
  line-height: 1.22
}

.sol-brief p {
  font-size: .93rem;
  color: var(--ink-soft);
  line-height: 1.72
}

.sol-brief>*+* {
  margin-top: .85rem
}

/* one green for every heading inside a species panel — the product title, the
   "The Formula:" label and the per-product sub-titles all read as the same
   level. Do not reintroduce --green-950 here; it looked like a second colour. */
.sol-brief strong {
  color: var(--green-900)
}

/* "The Formula:" / "Performance Target:" — label + text, no chrome */
.sol-formula strong,
.sol-target strong,
.sol-range strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green-900);
  margin-bottom: .18rem;
}

.sol-target {
  border-inline-start: 3px solid var(--green-600);
  padding-inline-start: .9rem;
}

.sol-range {
  font-size: .9rem
}

.sol-range,
.sol-formula {
  max-width: 80ch
}

.sol-items {
  list-style: none;
  display: grid;
  gap: .8rem
}

.sol-items li {
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.62
}

.sol-items strong {
  display: block;
  color: var(--green-900);
  margin-bottom: .1rem
}

.sol-ben h4 {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green-900);
  margin-bottom: .45rem;
  font-family: var(--font-body);
  font-weight: 700;
}

.sol-ben ul {
  list-style: none;
  display: grid;
  gap: .36rem
}

.sol-ben li {
  position: relative;
  padding-inline-start: 1.25rem;
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.55
}

.sol-ben li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
}

/* the real feed bags from the brochure slide */
.sol-bags {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: flex-end;
  margin-top: 1.3rem !important;
}

/* height-based so single bags, pairs and composite crops all line up */
.sol-bags figure {
  margin: 0;
  flex: 0 0 auto;
  transition: transform .2s
}

.sol-bags figure:hover {
  transform: translateY(-5px)
}

.sol-bags img {
  height: 162px;
  width: auto;
  max-width: 100%;
  display: block
}

.sol-products {
  margin-top: 2rem
}

.sol-products-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem
}

.sol-products-h h3 {
  font-size: 1.16rem
}

.sol-products-h h3 em {
  font-style: normal;
  font-size: .76rem;
  color: #fff;
  background: var(--green-900);
  border-radius: 20px;
  padding: .1rem .55rem;
  margin-inline-start: .45rem;
  vertical-align: middle;
  font-family: var(--font-body);
  font-weight: 700;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:1100px) {
  .cat-layout {
    grid-template-columns: 1fr
  }

  .cat-side {
    position: static
  }

  .prod-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .prod-grid.rel {
    grid-template-columns: repeat(3, 1fr)
  }

  .pd-top {
    grid-template-columns: 320px 1fr;
    gap: 1.8rem
  }

  .sol-icons {
    gap: 2rem 2.6rem
  }
}

@media(max-width:820px) {

  .prod-grid,
  .prod-grid.rel {
    grid-template-columns: repeat(2, 1fr)
  }

  .pd-top {
    grid-template-columns: 1fr
  }

  .pd-shot {
    max-width: 340px
  }

  .pd-head h2 {
    font-size: 1.6rem
  }

  .sol-icons {
    gap: 1.8rem 2.2rem
  }

  .sol-ibtn .sol-ib-ic::before {
    width: calc(58px * var(--ics, 1));
    height: calc(58px * var(--ics, 1))
  }

  .sol-prog {
    gap: 1.9rem
  }

  .sol-bags img {
    height: 126px
  }
}

@media(max-width:560px) {

  .prod-grid,
  .prod-grid.rel {
    grid-template-columns: 1fr 1fr;
    gap: .9rem
  }

  .pcard-body {
    padding: .7rem .75rem .8rem
  }

  .pcard-body h3 {
    font-size: .88rem
  }

  .pcard-go {
    display: none
  }

  .pd-quick {
    grid-template-columns: 1fr
  }

  .sol-icons {
    gap: 1.5rem 1.6rem
  }

  .sol-ibtn {
    min-width: 78px;
    gap: .7rem;
    padding: .2rem 0 .7rem
  }

  .sol-ibtn .sol-ib-ic::before {
    width: calc(48px * var(--ics, 1));
    height: calc(48px * var(--ics, 1))
  }

  .sol-ibtn em {
    font-size: .86rem
  }

  .cat-bar {
    gap: .6rem
  }
}
/* ============================================================
   DOWNLOADABLE FORMS — RFQ (quote.html) + Distributor application
   (distributors.html). Card lives in the .quote-side aside.
   ============================================================ */
.q-dl {
  background: var(--green-900);
  color: #fff;
  border-radius: 14px;
  padding: 1.5rem 1.4rem;
  margin-bottom: 1.6rem
}

.q-dl h3 {
  color: #fff;
  margin: 0 0 .5rem;
  font-size: 1.05rem
}

.q-dl p {
  font-size: .86rem;
  line-height: 1.6;
  opacity: .9;
  margin: 0 0 1rem
}

.q-dl-btn {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: #fff;
  border-radius: 10px;
  padding: .85rem 1rem;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease
}

.q-dl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18)
}

.q-dl-btn [data-ic] {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--green-900)
}

.q-dl-btn [data-ic] svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.q-dl-btn strong {
  display: block;
  color: var(--green-900);
  font-size: .95rem;
  line-height: 1.2
}

.q-dl-btn em {
  display: block;
  font-style: normal;
  color: var(--ink-soft);
  font-size: .76rem;
  margin-top: .15rem
}

/* Secondary link under a download button: the same form in Arabic.
   Deliberately quieter than the white primary button — it is an
   alternative, not a competing call to action. */
.q-dl-ar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .65rem;
  color: #fff;
  opacity: .85;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .15s ease
}

.q-dl-ar:hover {
  opacity: 1
}

.q-dl-ar [data-ic] {
  width: 16px;
  height: 16px;
  flex: none
}

.q-dl-ar [data-ic] svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.q-dl-send {
  margin: 1rem 0 .2rem !important;
  font-size: .78rem !important;
  opacity: .75 !important;
  text-transform: uppercase;
  letter-spacing: .06em
}

.q-dl-mail {
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all
}

/* ---- Become a Distributor page ---- */
.ds-why,
.ds-steps {
  margin-top: 2rem
}

.ds-why h3,
.ds-steps h3 {
  font-size: 1.1rem;
  margin: 0 0 1rem
}

.ds-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem
}

.ds-list li {
  border-inline-start: 3px solid var(--green-900);
  padding-inline-start: 1rem
}

.ds-list strong {
  display: block;
  font-size: .95rem
}

.ds-list em {
  display: block;
  font-style: normal;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.6;
  margin-top: .2rem
}

.q-steps-ol {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 1rem
}

.q-steps-ol li {
  display: flex;
  gap: .9rem;
  align-items: flex-start
}

.q-steps-ol li>span {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-900);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .85rem
}

.q-steps-ol strong {
  display: block;
  font-size: .95rem
}

.q-steps-ol em {
  display: block;
  font-style: normal;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.6;
  margin-top: .15rem
}

/* "Become a Distributor" cross-sell card on the Get a Quote page */
.q-dist {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem;
  margin-bottom: 1.6rem
}

.q-dist h3 {
  margin: 0 0 .5rem;
  font-size: 1.05rem
}

.q-dist p {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1rem
}

.q-dist .btn {
  width: 100%
}

/* ---------- MEET THE TEAM (about.html #team) ---------- */
.team-group { margin-top: 4rem }
.team-group:first-of-type { margin-top: 1rem }   /* department cards removed above */
.team-group + .team-group { margin-top: 4.5rem }

.team-intro { max-width: 860px; margin: 0 auto 2.2rem; text-align: center }
.team-intro h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  margin-bottom: .9rem;
  color: var(--green-900)
}
.team-intro p {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink-soft)
}

/* flex (not grid) so a row with fewer than 4 people centres instead of
   hugging the left edge — all groups share one portrait size */
.people {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem
}

.person {
  margin: 0;
  flex: 0 1 calc(25% - 1.2rem)
}
.person picture { display: block }
.person img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--paper)
}
.person figcaption {
  margin-top: .9rem;
  text-align: center
}
.person figcaption b {
  display: block;
  font-size: .97rem;
  font-weight: 600;
  color: var(--green-900);
  line-height: 1.35
}
.person figcaption span {
  display: block;
  margin-top: .25rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft)
}

@media(max-width:1020px) {
  .people { gap: 1.4rem }
  .person { flex: 0 1 calc(50% - .7rem) }
}
@media(max-width:560px) {
  .person { flex: 0 1 100%; max-width: 320px }
}

/* ==========================================================================
   ARABIC TYPOGRAPHY — global safeguards
   Arabic letters CONNECT. Any positive letter-spacing pulls the joins apart
   and visually shatters the word, which is why tracking must be zeroed for
   the whole document rather than patched selector by selector (44 rules in
   this stylesheet applied tracking with no RTL counterpart).
   Arabic also has NO uppercase, so text-transform is a silent no-op there —
   hierarchy has to come from weight, size and colour instead.
   ========================================================================== */
html[lang="ar"] body,
html[lang="ar"] body * {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* …but these runs stay Latin even on the Arabic site, so they keep their
   tracking and casing: product codes, e-mail/phone, and the logo wordmark. */
html[lang="ar"] .pcard-code,
html[lang="ar"] .pd-quick strong,
html[lang="ar"] .q-dl-mail,
html[lang="ar"] .brand .wm b,
html[lang="ar"] .brand .wm span,
html[lang="ar"] .f-brand .f-logo .wm b,
html[lang="ar"] .f-brand .f-logo .wm span {
  letter-spacing: revert !important;
  text-transform: revert !important;
}

/* Arabic needs more leading than Latin — taller ascenders, deeper descenders.
   Ref: 1.6–1.8 where Latin sits at 1.4–1.5. */
html[lang="ar"] body {
  line-height: 1.85;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .hero h1 {
  line-height: 1.4;
}

/* ---------- Arabic-Indic numerals ----------
   js/main.js wraps every numeric run in <bdi class="num" dir="ltr"> and swaps
   the glyphs to ٠١٢٣. The wrapper alone is not enough: Arabic-Indic digits
   carry Unicode bidi class AN, and inside an RTL paragraph that let the
   "+" jump to the wrong end and swapped the two phone numbers around the "·".
   isolate-override does both jobs — cuts the run off from the surrounding RTL
   text AND forces strict left-to-right order inside it, so the number reads
   exactly as it does on the English site, only with Arabic glyphs.
   Safe here because these runs contain digits and punctuation only — never
   apply isolate-override to a run that contains Arabic letters. */
html[lang="ar"] bdi.num {
  unicode-bidi: isolate-override;
  direction: ltr;
}

/* …and this is the run that DOES contain Arabic letters: a spelled-out unit
   (كجم، طن، جم، قدم). main.js tags it .num-ar.
   2026-08-19 — the bug this fixes: it used to get the override above, and an
   override lays every character out left-to-right in logical order, so the
   word came out mirrored — كجم printed as مجك, طن as نط, قدم as مدق.
   Plain `isolate` keeps the run sealed off from the surrounding text (the two
   halves of "٢٥ كجم - ٥٠ كجم" still cannot trade places) but lets the bidi
   algorithm run normally inside it, so the letters are shaped the right way
   round and the unit sits to the LEFT of its digits — i.e. after the number
   when you read right-to-left, which is how Arabic writes a unit.
   ⚠️ Never merge this back into the rule above. */
html[lang="ar"] bdi.num.num-ar {
  unicode-bidi: isolate;
  direction: rtl;
}

/* ---------- the sign must be the SAME TYPEFACE as the digits beside it
   2026-08-19 (Ibrahim): "the percentage sign looks bold, the Arabic numbers are
   not — it looks weird."
   Cause: the display face is Anton (--font-display), used on the protein badge,
   the spec values, the hero and quote stats. **Anton has no Arabic-Indic
   digits**, so ٠-٩ silently fall back to Cairo at the inherited weight, while
   "%" and "+" — which Anton DOES have — keep rendering in Anton, a very heavy
   condensed face. Two typefaces inside one figure: ١٩.٥٪ with a fat sign.
   Fixing the weight would not have fixed it; the mismatch is the FAMILY.
   Pinning the isolate to Cairo makes the sign fall in with its digits, and it
   changes nothing anywhere else — in body copy the digits were already Cairo.
   Weight is deliberately NOT set here: each run inherits its box's weight, so
   the hero (Cairo 800) stays heavy and body figures stay regular. */
html[lang="ar"] bdi.num {
  font-family: var(--font-ar);
}

/* The protein badge is a standalone chip with nothing beside it to clash with,
   so it keeps Anton's presence via Cairo 700 (a real loaded weight — asking a
   400-only face for 700 gets an ugly synthetic bold instead).
   ⚠️ NOT applied to `.pd-quick strong`: that grid sets the bag sizes right next
   to the feed form (حبيبات, فتات صغيرة), which is plain Cairo 400. Bolding the
   figure there made the two boxes look like different type sizes. Everything in
   that grid stays at the inherited weight. */
html[lang="ar"] .pcard-pro bdi.num {
  font-weight: 700;
}

/* Inside that Arabic-ordered run, each FIGURE is still English-ordered: a "+" or
   a "%" counts as English and stays to the RIGHT of its digits (Ibrahim, and the
   half of the rule that did NOT change). Without this, "٤٠+ كجم" prints the plus
   on the left the moment the run turns RTL, and a range can flip to "٢٧-٢٦".
   Digits and punctuation only — never any letters — so the override is safe. */
html[lang="ar"] bdi.num-ar > bdi.fig {
  unicode-bidi: isolate-override;
  direction: ltr;
}

/* ---------- Phone numbers never break in half ----------
   2026-08-10: the footer rendered "… +20 10 9177 7772 · +20" / "10 9177 7773",
   splitting a number across two lines. The "·" separator is now a <br> so each
   number owns its line; nowrap is the belt-and-braces so a single number can
   never wrap internally no matter how narrow the column gets.
   Scoped to phone lines only — .q-line em also carries the postal address and
   the distributor e-mail, which MUST stay wrappable or they overflow.
   2026-08-19: this comment used to be closed one line early. The leftover text
   then ran into the selector list below, so the whole nowrap rule was invalid
   and the browser threw it away — phones were free to break in half again. */
.f-links a[href^="tel:"],
.info-card .row a[href^="tel:"],
.info-card .row a[href*="wa.me"],
.q-line[href^="tel:"] em,
.q-line[href*="wa.me"] em {
  white-space: nowrap;
}

/* ---------- Arabic: the stat boxes where the UNIT IS ITS OWN ELEMENT
   `<strong>26–27&nbsp;<em data-i18n="u_t">t</em></strong>` — the unit is a
   separate element, so main.js's regex cannot pull it into the number's isolate
   and only CSS can decide which side it lands on.

   These boxes used to be `direction: ltr`, from the first reading of Ibrahim's
   rule ("a unit sits to the RIGHT of the digits, as in English"). That is right
   for a LATIN unit — but in Arabic these keys translate: u_kg → كجم, u_t → طن.
   2026-08-19, his correction: a unit spelled in ARABIC LETTERS goes to the LEFT
   of the number, because it is not English. So on the Arabic site the box is
   RTL and the unit falls after the digits, exactly as Arabic is written.
   The figure itself is unaffected: main.js has already wrapped it in a
   bdi.num LTR isolate, so "٤٠+" keeps its plus on the right and "٢٦–٢٧" cannot
   flip, whichever way the box runs.
   ⚠️ If a unit is ever LATIN on the Arabic site, it needs the old ltr treatment
   in a separate rule — do not flip this one back. */
html[lang="ar"] .qh-stats strong,
html[lang="ar"] .fr-nums strong,
html[lang="ar"] .hero-foot .hf b,
html[lang="ar"] .stats b,
html[lang="ar"] .pd-quick em,
html[lang="ar"] .q-ship td {
  direction: rtl;
  unicode-bidi: isolate;
}
/* breathing room between the digits and the unit that follows them. The box
   above is direction:rtl on the Arabic site, so inline-start == right == the
   number side — still the gap between the figure and its unit. */
html[lang="ar"] .qh-stats strong em,
html[lang="ar"] .fr-nums strong em { margin-inline-start: .3em }

/* the table cell still has to hug the right edge of an RTL table */
html[lang="ar"] .q-ship td { text-align: right }