/* ============================================================
   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. */
  /* extrusion is brand blue #0D3F71 — letters stay white */
  text-shadow:
    1px 1px 0 rgba(13, 63, 113, .92),
    2px 2px 0 rgba(13, 63, 113, .86),
    3px 3px 0 rgba(13, 63, 113, .78),
    4px 4px 0 rgba(13, 63, 113, .68),
    5px 5px 0 rgba(13, 63, 113, .56),
    6px 6px 0 rgba(13, 63, 113, .42),
    0 8px 26px rgba(13, 63, 113, .45);
  paint-order: stroke fill;
  -webkit-text-stroke: .6px rgba(13, 63, 113, .40);
}

/* 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 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 2px 12px rgba(0, 0, 0, .45)
}

/* no white glow — the navy lead sits on its own frosted panel instead, so it
   stays legible on light AND dark slides */
.hero p.lead {
  text-shadow: none
}

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

/* stat numbers are brand blue now — 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 {
  /* block + fit-content: panel hugs the text, but still forces its own line so
     the CTAs sit UNDER it, not beside it */
  display: block;
  width: fit-content;
  margin: 1.6rem 0 2.6rem;
  font-size: 1.08rem;
  color: #0D3F71;
  max-width: 52ch;
  font-weight: 600;
  padding: 1rem 1.5rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 6px 26px rgba(6, 30, 13, .18);
}

.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(1.6rem, 6vw, 5rem);
  flex-wrap: wrap;
  padding-top: 2.4rem;
  text-align: center;
}

.hero .hero-foot .hf {
  font-size: .92rem;
  color: #CFE4B8;
  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);
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  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;
  }

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

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

html[lang="ar"] .hero .hero-foot .hf b {
  font-family: var(--font-ar)
}

/* 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) */
.sol-photo {
  border-radius: var(--radius);
  min-height: 360px;
  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;
  font-weight: 600
}

.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)
}

.strength h3 {
  font-size: 1.12rem;
  margin-bottom: 1rem;
  display: flex;
  gap: .7rem;
  align-items: center;
  font-weight: 600
}

.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
}

.news-card h3 {
  font-size: 1.08rem;
  font-weight: 600
}

.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;
  font-weight: 600
}

.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 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(280px, 1fr));
  gap: 1.4rem;
  align-items: start
}

.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)
}

.sol-ibtn .sol-ib-ic {
  width: auto;
  height: auto;
  display: block;
  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
}

.sol-brief strong {
  color: var(--green-950)
}

/* "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-950);
  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
}

.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 }
}