@keyframes sc-shine { 
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media print{
@page { margin: 0.5cm; }
#dc-root, #dc-root > .sc-host { height: auto; }
* { print-color-adjust: exact; backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; }
}
html, body { height: 100%; margin: 0px; }
#dc-root, #dc-root > .sc-host { height: 100%; }
:root { --fa-forest-50: #EEF3EE; --fa-forest-100: #D6E3D6; --fa-forest-200: #AEC6AE; --fa-forest-300: #7FA37F; --fa-forest-400: #4F7D50; --fa-forest-500: #2E5E30; --fa-forest-600: #225224; --fa-forest-700: #1A4A1C; --fa-forest-800: #144416; --fa-forest-900: #0F3D0E; --fa-forest-950: #082408; --fa-leaf-50: #F2F8E8; --fa-leaf-100: #E2F0CC; --fa-leaf-200: #C4E199; --fa-leaf-300: #A0CD5E; --fa-leaf-400: #7DB52B; --fa-leaf-500: #66A30F; --fa-leaf-600: #539300; --fa-leaf-700: #427700; --fa-leaf-800: #345C05; --fa-leaf-900: #274409; --fa-silver: #D1D3D4; --fa-rice-0: #FFFFFF; --fa-rice-25: #FCFBF7; --fa-rice-50: #F7F5EE; --fa-rice-100: #EFECE2; --fa-rice-200: #E2DED1; --fa-rice-300: #CCC7B7; --fa-rice-400: #A9A493; --fa-rice-500: #858170; --fa-ink-900: #16201A; --fa-ink-700: #3C4A3F; --fa-ink-500: #667268; --fa-ink-400: #8E978F; --fa-grain-100: #FBF0D6; --fa-grain-500: #D9A441; --fa-grain-700: #8F6414; --fa-success-600: #3F7F00; --fa-success-50: #EDF6E1; --fa-warning-600: #B87A00; --fa-warning-50: #FDF3DC; --fa-danger-600: #B3362A; --fa-danger-50: #FBE9E6; --fa-info-600: #2D6A88; --fa-info-50: #E6F1F6; --surface-page: var(--fa-rice-50); --surface-card: var(--fa-rice-0); --surface-sunken: var(--fa-rice-100); --surface-raised: var(--fa-rice-0); --surface-inverse: var(--fa-forest-900); --surface-brand-tint: var(--fa-leaf-50); --text-primary: var(--fa-ink-900); --text-secondary: var(--fa-ink-700); --text-muted: var(--fa-ink-500); --text-disabled: var(--fa-ink-400); --text-inverse: var(--fa-rice-25); --text-brand: var(--fa-forest-900); --text-accent: var(--fa-leaf-700); --text-link: var(--fa-forest-700); --text-link-hover: var(--fa-leaf-700); --border-subtle: var(--fa-rice-200); --border-default: var(--fa-rice-300); --border-strong: var(--fa-ink-500); --border-focus: var(--fa-leaf-500); --action-primary: var(--fa-forest-900); --action-primary-hover: var(--fa-forest-700); --action-primary-press: var(--fa-forest-950); --action-accent: var(--fa-leaf-600); --action-accent-hover: var(--fa-leaf-700); --action-accent-press: var(--fa-leaf-800); --action-secondary-bg: var(--fa-rice-0); --action-secondary-hover: var(--fa-rice-100); --focus-ring: 0 0 0 3px rgba(102,163,15,.35); --overlay-scrim: rgba(8,36,8,.48); }
:root { --font-display: 'Rubik','IBM Plex Sans Arabic',system-ui,sans-serif; --font-body: 'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif; --font-arabic: 'IBM Plex Sans Arabic','Rubik',system-ui,sans-serif; --font-mono: 'IBM Plex Mono',ui-monospace,monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; --text-display-xl: 64px; --lh-display-xl: 1.04; --text-display-l: 48px; --lh-display-l: 1.08; --text-h1: 36px; --lh-h1: 1.15; --text-h2: 28px; --lh-h2: 1.2; --text-h3: 22px; --lh-h3: 1.3; --text-h4: 18px; --lh-h4: 1.35; --text-body-l: 18px; --lh-body-l: 1.55; --text-body: 16px; --lh-body: 1.5; --text-body-s: 14px; --lh-body-s: 1.45; --text-caption: 12px; --lh-caption: 1.4; --tracking-display: -0.02em; --tracking-label: 0.08em; }
:root { --space-0: 0; --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15,61,16,.08); --shadow-md: 0 1px 3px rgba(15,61,16,.06),0 4px 12px -2px rgba(15,61,16,.12); --shadow-lg: 0 2px 6px rgba(15,61,16,.06),0 16px 32px -8px rgba(15,61,16,.20); --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in-out: cubic-bezier(.45,0,.25,1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --container-max: 1240px; --control-h-sm: 32px; --control-h-md: 40px; --control-h-lg: 48px; }
html { color: var(--text-primary); background: var(--surface-page); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
[data-fa-theme="dark"] { --surface-page: #0C160D; --surface-card: #142016; --surface-sunken: #0F1A10; --surface-raised: #182619; --text-primary: #EEF1EA; --text-secondary: #C4CCC2; --text-muted: #95A095; --text-disabled: #6B766D; --text-brand: #F3F1E8; --text-accent: #A0CD5E; --text-link: #A0CD5E; --text-link-hover: #C4E199; --border-subtle: #223124; --border-default: #33453A; --border-strong: #8E978F; --action-primary: #427700; --action-primary-hover: #539300; --action-primary-press: #345C05; --action-secondary-bg: #182619; --action-secondary-hover: #213223; --fa-forest-50: #1C2B1E; --fa-forest-100: #C9D7C9; --fa-rice-100: #1C2A1E; --fa-rice-200: #243326; --fa-leaf-50: #1A2E12; --fa-leaf-700: #A0CD5E; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 1px 3px rgba(0,0,0,.3),0 4px 12px -2px rgba(0,0,0,.5); --shadow-lg: 0 2px 6px rgba(0,0,0,.3),0 16px 32px -8px rgba(0,0,0,.6); color-scheme: dark; }
body { margin: 0px; background: rgb(247, 245, 238); }
a { color: var(--text-link); }
* { box-sizing: border-box; }
[dir="rtl"], :lang(ar) { font-family: var(--font-arabic); }
@media print{#dc-root, #dc-root > .sc-host { height: auto; }*, ::before, ::after { print-color-adjust: exact; backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; }}
html, body { margin: 0px; height: 100%; background: rgb(247, 245, 238); }
/* ---------------------------------------------------------------------
   Added for the published site: the bar's menu folds behind one button on a
   phone, and the drawer it opens.
   --------------------------------------------------------------------- */
.site-menu-btn, .site-drawer { display:none }
@media (max-width:860px) {
  header nav, header .site-hide-phone { display:none !important }
  /* The language sits at the end of the bar, with the menu button beside it. */
  .site-bar-extras { margin-inline-start:auto; gap:8px }
  .site-lang-btn { padding-inline:10px !important }
  .site-menu-btn {
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:44px; height:44px; padding:0 12px; margin-inline-start:8px;
    border:1px solid var(--border-default, #d9d2c6); border-radius:12px;
    background:transparent; color:inherit; cursor:pointer;
  }
  /* The bars take the page's own ink, so they show in light and in dark. */
  .site-menu-btn span { display:block; height:2px; background:var(--text-primary, #1f3b1d); border-radius:2px }
  .site-drawer:not([hidden]) {
    display:flex;
  }
  .site-drawer {
    position:absolute; inset-inline:0; top:100%; z-index:40;
    display:flex; flex-direction:column; padding:8px;
    background:var(--surface-page, #fff); border-bottom:1px solid var(--border-default, #d9d2c6);
    box-shadow:0 14px 30px rgba(15, 40, 14, .12);
  }
  .site-drawer[hidden] { display:none }
  .site-drawer button {
    text-align:start; padding:12px 14px; border:0; background:transparent; cursor:pointer;
    font:600 15px/1.4 var(--font-body, system-ui), sans-serif; color:inherit; border-radius:10px;
  }
  .site-drawer button:hover { background:var(--surface-sunken, rgba(0,0,0,.04)) }
  header { position:relative }
}

/* On a phone a product card stacks: the photograph on top, the product's
   details underneath. Side by side, as the desktop has it, leaves each half
   about 140px wide - too narrow to read or to show the pack. */
@media (max-width:720px) {
  .site-card {
    width: min(340px, 86vw) !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .site-card > *:first-child { height: 210px !important; min-height: 0 !important }
  .site-card > *:first-child img { width: 100% !important; height: 100% !important; object-fit: cover !important }
  .site-card > *:last-child { padding: 20px !important }
}

/* On the Arabic pages a photograph faces the way the page reads - but only
   one of them can. The sack in the hero and the lorry both carry the FoodAgro
   mark, and the packs carry their own printing; mirrored, all of that reads
   backwards. The rice plant is the one picture with no writing in it. */
[data-site-lang="ar"] img[src$="rice-plant.jpg"] { transform: scaleX(-1); }

/* ---------------------------------------------------------------------
   The sign-in page. It is the design's own page, so it is dressed by the
   stylesheet above; these are the two things it needs that the design did not
   draw - a "Show password" that reads as words rather than a grey browser
   button, and a phone layout that is only the form.
   --------------------------------------------------------------------- */
.loginpage #login-showpw {
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer;
  /* It shares its row with "Forgot password?", so it is set the same way and
     the two read as a pair rather than a label and a button. */
  font: 600 14px var(--font-body) !important;
}
.loginpage #login-showpw:hover {
  color: var(--text-link-hover, #427700);
  text-decoration: underline !important; text-underline-offset: 3px;
}

@media (max-width: 860px) {
  /* On a phone the sign-in page is the form and nothing else: the bar comes
     down to the mark, and the photograph beside the form goes - the form
     itself barely fits otherwise. */
  .loginpage .login-nav, .loginpage .login-extras { display: none !important }
  .loginpage aside { display: none !important }
  .loginpage [style*="grid-template-columns"] { grid-template-columns: 1fr !important }
  .loginpage main { padding: 28px 20px !important; min-height: 0 !important }
  .loginpage main > * { width: 100% !important; max-width: 420px !important; margin-inline: auto !important }
  /* The site's full footer under a sign-in form is a page of its own; on a
     phone it comes down to the mark and the line beneath it. */
  .loginpage footer > div > div:first-child > :not(img):not(p) { display: none !important }
  .loginpage footer > div > div > div:not(:first-child) { display: none !important }
}

/* The design sets display on its own blocks inline, and an inline display
   outranks the hidden attribute. Without this the "Request sent" note stands
   beside the form it is meant to replace, on a page nobody has sent anything
   from yet. */
[hidden] { display: none !important }

/* The design sets its small codes - the short address, the pack unit, the
   registration numbers - in IBM Plex Mono, a face the published site does not
   load, so they came out in the browser's own typewriter letters beside a page
   set in IBM Plex Sans. They take the page's face instead. */
:root { --font-mono: var(--font-body) }

/* ---------------------------------------------------------------------
   The opening film: the company's own few seconds, over the page, once a
   visit. It covers the screen whatever shape the screen is, and the way past
   it is always in the corner.
   --------------------------------------------------------------------- */
.site-intro {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #0F3D0E;
  opacity: 1;
  transition: opacity 760ms cubic-bezier(.4, 0, .2, 1), transform 900ms cubic-bezier(.2, .8, .2, 1);
}
.site-intro[data-fading="true"] { opacity: 0; transform: scale(1.09); pointer-events: none }
.site-intro video { width: 100%; height: 100%; object-fit: cover; display: block }
.site-intro-skip {
  position: absolute; top: 20px; inset-inline-end: 20px;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .28);
  color: #fff; font: 600 14px/1 var(--font-body, system-ui), sans-serif;
  cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.site-intro-skip:hover { background: rgba(0, 0, 0, .45) }
/* Nothing scrolls behind the film. */
.site-intro-open, .site-intro-open body { overflow: hidden }

/* The handover. The film opens outwards and dissolves while the page rises
   into its place, so arriving reads as one movement rather than a cut. */
.site-intro-arriving [data-fa-theme] {
  animation: site-arriving 800ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes site-arriving {
  from { opacity: 0; transform: scale(1.03) translateY(10px) }
  to   { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .site-intro-arriving [data-fa-theme] { animation: none }
}

/* ---------------------------------------------------------------------
   The lorry lies behind the bulk offer rather than beside it: the whole
   section is the photograph, with the words over it. The design gave it a
   box - a tall one on the home page, a four-by-three card on the bulk page -
   which showed the middle of the trailer and cropped the rest.
   --------------------------------------------------------------------- */
section:has(img[src*="/panel"]) {
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}
/* The scrim: the section's own green, laid over the photograph so the words
   keep their contrast and the lorry still reads through it. */
section:has(img[src*="/panel"])::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(15, 61, 14, .93) 0%, rgba(15, 61, 14, .86) 50%, rgba(15, 61, 14, .93) 100%);
}
/* The box that held the lorry holds nothing now. */
div:has(> img[src*="/panel"][style*="position: absolute"]) {
  position: static !important;
  min-height: 0 !important;
  margin: 0 !important;
}
img[src*="/panel"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  z-index: -1;
  /* Turned down so the words carry the section and the lorry sits behind
     them rather than beside them. */
  filter: brightness(.56) saturate(.9);
}
/* Everything the section says sits above the photograph. */
section:has(img[src*="/panel"]) > * { position: relative; z-index: 1 }