@charset "UTF-8";
/* =========================================================================
   RIGHT VISION — design system
   =========================================================================

   The concept is a manufacturer's spec sheet.

   The buyer's question on this site is never "is this pretty" — it is "can
   you supply what I need, at the size I need, consistently." So the design
   answers like a well-set technical document: facts stated plainly, generous
   structure, hierarchy carried by type rather than by ornament.

   Three rules follow from that, and every component here obeys them.

   1. The packshots are the only colour. They are cut out to transparency and
      photographed against a sweep; the interface stays white, grey and green
      so the product is the brightest thing on any screen.
   2. Green is structural, not wallpaper. It marks, rules and labels. The one
      place it fills is where the page deliberately changes register.
   3. Nothing is drawn that could be built. No textures, no strokes imitating
      a hand — the logo is a mosaic of flat vegetable cut-outs and carries no
      drawn line anywhere in it.

   Written in logical properties throughout, so one sheet serves the Arabic
   (RTL) and English (LTR) sides with no mirrored copy.
   ====================================================================== */

:root {
	/* ---- Colour -------------------------------------------------------
	   Two brand values sampled off the logo — the leaf green of the
	   monogram and the grey of the wordmark — plus the steps needed to
	   build with them.

	   The green splits in two, and the split is the important part: 400 is
	   the mark's own green and is a FILL. At 2.2:1 on white it can never
	   carry text. 600 is the same hue taken down until it clears 4.5:1 and
	   is the only green type is allowed to use. */
	--g-50:  #f3faf0;
	--g-100: #e3f4dc;
	--g-200: #c4e8b9;
	--g-300: #93d580;
	--g-400: #5ebb49;   /* logo green — fills only */
	--g-500: #47a336;
	--g-600: #327a24;   /* the green type may use */
	--g-700: #276120;
	--g-800: #1d4a1b;
	--g-900: #123212;

	/* Neutrals carry a trace of the brand hue, so greys sit beside the
	   green instead of reading as a second, colder palette. */
	--ink:      #121a15;
	--ink-2:    #45514a;
	--ink-3:    #667169;
	--line:     #e4eae3;
	--line-2:   #ccd6cb;
	--paper:    #ffffff;
	--paper-2:  #f6f9f5;
	--paper-3:  #edf3eb;
	--grey:     #969696;   /* the logo's second colour */
	--tomato:   #d83a31;
	--gold:     #d7ad45;

	/* ---- Type ---------------------------------------------------------
	   Two families. Arabic is the primary language and Cairo covers display
	   and text on its own; Inter does the same for Latin. */
	--font:       "Cairo", "Inter", system-ui, -apple-system, sans-serif;
	--font-latin: "Inter", "Cairo", system-ui, -apple-system, sans-serif;

	/* 1.25 ratio, fluid between a 360px and a 1440px viewport. */
	--t-xs:   clamp(0.75rem, 0.72rem + 0.12vw, 0.82rem);
	--t-sm:   clamp(0.875rem, 0.85rem + 0.14vw, 0.95rem);
	--t-base: clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
	--t-lg:   clamp(1.12rem, 1.06rem + 0.3vw, 1.3rem);
	--t-xl:   clamp(1.35rem, 1.2rem + 0.65vw, 1.72rem);
	--t-2xl:  clamp(1.65rem, 1.4rem + 1.15vw, 2.3rem);
	--t-3xl:  clamp(2rem, 1.6rem + 1.9vw, 3.05rem);
	--t-4xl:  clamp(2.4rem, 1.85rem + 2.8vw, 4rem);

	/* ---- Space --------------------------------------------------------
	   A 4px base. Every margin, gap and pad comes from here, which is what
	   stops a layout drifting into 13px and 27px gaps. */
	--s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
	--s5: 1.5rem;   --s6: 2rem;     --s7: 2.5rem;   --s8: 3rem;
	--s9: 4rem;     --s10: 5rem;    --s11: 6.5rem;

	--gutter:  clamp(1.25rem, 4vw, 3.5rem);
	--section: clamp(3.5rem, 7vw, 6rem);
	--wrap:    1240px;
	--wrap-narrow: 760px;

	/* ---- Radius -------------------------------------------------------
	   Three steps and a pill. The mark is built from rounded organic
	   shapes, so nothing is square — and nothing is a blob either. */
	--r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

	/* ---- Elevation ----------------------------------------------------
	   Tinted with the ink rather than pure black, so a shadow over the pale
	   green surfaces does not grey them out. */
	--sh-sm: 0 1px 2px rgba(18, 26, 21, 0.06);
	--sh-md: 0 4px 16px -6px rgba(18, 26, 21, 0.13);
	--sh-lg: 0 18px 40px -22px rgba(18, 26, 21, 0.26);

	/* ---- Motion -------------------------------------------------------
	   One curve for everything that moves, so the site has a single sense
	   of weight rather than one per component. */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fast: 0.18s;
	--mid:  0.32s;
}

/* Latin leads with Inter; Arabic keeps Cairo for both roles. */
.lang-en { --font: var(--font-latin); }

/* =========================================================================
   Reset
   ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-block-start: 6rem;   /* clears the fixed header */
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--t-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
::selection { background: var(--g-200); color: var(--g-900); }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--ink);
}
/* Arabic letterforms need the heavier cut to hold next to Latin at the same
   size, more leading to clear the descenders, and no negative tracking —
   which breaks the joins between letters. */
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4 {
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--g-600); outline-offset: 3px; border-radius: var(--r-sm); }

.skip-link {
	position: absolute;
	inset-inline-start: var(--s4);
	top: -100px;
	z-index: 999;
	padding: var(--s3) var(--s5);
	background: var(--g-600);
	color: #fff;
	font-weight: 700;
	border-radius: var(--r-sm);
	transition: top var(--fast);
}
.skip-link:focus { top: var(--s4); }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* =========================================================================
   Layout
   ====================================================================== */

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); }

.section { padding-block: var(--section); }
.section--tint { background: var(--paper-2); }

.section__head { margin-bottom: var(--s7); max-width: 62ch; }
.section__head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s5);
	max-width: none;
}
@media (max-width: 640px) {
	.section__head--split { flex-direction: column; align-items: flex-start; }
}

.section__title { font-size: var(--t-2xl); }
.section__title--sm { font-size: var(--t-xl); }
.section__lede { margin-top: var(--s3); font-size: var(--t-lg); color: var(--ink-2); }

/* The label above a heading. Small, spaced and in the type-safe green, so it
   reads as a marker rather than as a second headline. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s3);
	margin: 0 0 var(--s3);
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--g-600);
}
.lang-ar .eyebrow { letter-spacing: 0; text-transform: none; }
.eyebrow::before {
	content: "";
	inline-size: var(--s6);
	block-size: 2px;
	flex: none;
	border-radius: 2px;
	background: var(--g-400);
}

/*
 * The emphasis inside a headline. A colour change rather than a highlight
 * block: rv_headline() can wrap words anywhere in the line, and a background
 * breaks into two ragged pieces the moment the line wraps.
 */
.hl { color: var(--g-600); font-style: normal; }
[data-dark] .hl { color: var(--g-300); }

.link-more {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	flex: none;
	font-size: var(--t-sm);
	font-weight: 700;
	color: var(--g-600);
	transition: gap var(--mid) var(--ease);
}
.link-more:hover { gap: var(--s3); }

.prose { font-size: var(--t-lg); line-height: 1.85; color: var(--ink-2); }
.prose h2 { font-size: var(--t-xl); margin-block: var(--s7) var(--s3); color: var(--ink); }
.prose h3 { font-size: var(--t-lg); margin-block: var(--s6) var(--s2); color: var(--ink); }
.prose ul, .prose ol { padding-inline-start: 1.4rem; list-style: revert; }
.prose li { margin-bottom: var(--s2); }
.prose img { border-radius: var(--r-lg); margin-block: var(--s6); }
.prose a { color: var(--g-600); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Buttons
   ====================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: 52px;
	padding-inline: var(--s6);
	background: var(--g-600);
	color: #fff;
	font-size: var(--t-sm);
	font-weight: 700;
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	transition: background var(--fast), color var(--fast), border-color var(--fast),
		transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.btn:hover { background: var(--g-700); transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

/* The arrow points the way the language runs, so it flips with direction
   rather than being two glyphs in the markup. */
.btn__arrow { display: inline-flex; transition: transform var(--mid) var(--ease); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
.btn:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* On a green ground the solid button inverts, or it is green on green. */
.btn--light { background: #fff; color: var(--g-700); }
.btn--light:hover { background: var(--g-50); color: var(--g-800); }

.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost:hover { background: currentColor; color: var(--g-800); }
[data-dark] .btn--ghost:hover { color: var(--g-800); }

/* =========================================================================
   Header
   ====================================================================== */

.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	border-block-end: 1px solid var(--line);
	transition: transform 0.5s var(--ease), background var(--mid), border-color var(--mid);
}
/* Over the hero the bar drops out entirely so the section reads full bleed;
   it only becomes a surface once content is scrolling under it. Dark zones
   also swap the logo/nav to their light-on-dark colours; light zones (a
   bright hero) just lose the surface and keep the normal dark colours. */
.site-header.is-transparent:not(.is-stuck) {
	background: transparent;
	backdrop-filter: none;
	border-color: transparent;
}
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
	min-height: 74px;
}

.brand { display: block; flex: none; }
.brand__mark { inline-size: auto; block-size: clamp(38px, 4.6vw, 50px); object-fit: contain; }
.brand__mark--light { display: none; }
.site-header.is-over-dark:not(.is-stuck) .brand__mark { display: none; }
.site-header.is-over-dark:not(.is-stuck) .brand__mark--light { display: block; }

/* =========================================================================
   Navigation
   ====================================================================== */

.nav { display: flex; align-items: center; gap: var(--s5); }
.nav__list { display: flex; align-items: center; gap: clamp(var(--s4), 2vw, var(--s6)); }

.nav__list a {
	position: relative;
	display: inline-block;
	padding-block: var(--s2);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--ink-2);
	transition: color var(--fast);
}
.nav__list a:hover, .nav__list .is-current a { color: var(--g-600); }
.site-header.is-over-dark:not(.is-stuck) .nav__list a { color: rgba(255, 255, 255, 0.88); }
.site-header.is-over-dark:not(.is-stuck) .nav__list a:hover,
.site-header.is-over-dark:not(.is-stuck) .nav__list .is-current a { color: #fff; }

/* The underline grows from the reading-start edge, so it runs right-to-left
   on the Arabic side with no mirrored rule. */
.nav__list a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	inline-size: 0;
	block-size: 2px;
	border-radius: 2px;
	background: var(--g-400);
	transition: inline-size var(--mid) var(--ease);
}
.nav__list a:hover::after, .nav__list .is-current a::after { inline-size: 100%; }

.lang-switch {
	display: inline-flex;
	align-items: center;
	padding: var(--s2) var(--s4);
	border: 1.5px solid var(--line-2);
	border-radius: var(--r-pill);
	font-size: var(--t-xs);
	font-weight: 700;
	color: var(--ink-2);
	transition: border-color var(--fast), color var(--fast);
}
.lang-switch:hover { border-color: var(--g-400); color: var(--g-600); }
.site-header.is-over-dark:not(.is-stuck) .lang-switch { border-color: rgba(255, 255, 255, 0.4); color: #fff; }

.nav-toggle { display: none; position: relative; inline-size: 44px; block-size: 44px; border-radius: var(--r-sm); }
.nav-toggle span:not(.sr-only) {
	position: absolute;
	inset-inline: 11px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--ink);
	transition: transform var(--mid) var(--ease), opacity var(--fast);
}
.nav-toggle span:not(.sr-only):nth-child(1) { top: 15px; }
.nav-toggle span:not(.sr-only):nth-child(2) { top: 21px; }
.nav-toggle span:not(.sr-only):nth-child(3) { top: 27px; }
.site-header.is-over-dark:not(.is-stuck) .nav-toggle span:not(.sr-only) { background: #fff; }
.nav-toggle[aria-expanded="true"] span:not(.sr-only) { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
	.nav-toggle { display: block; z-index: 2; }
	.nav {
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: center;
		gap: var(--s7);
		background: var(--paper);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.45s var(--ease), visibility 0.45s;
	}
	[dir="rtl"] .nav { transform: translateX(-100%); }
	.nav.is-open { transform: translateX(0); visibility: visible; }
	.nav__list { flex-direction: column; gap: var(--s5); }
	.nav__list a, .site-header.is-over-dark:not(.is-stuck) .nav.is-open .nav__list a {
		font-size: var(--t-xl);
		color: var(--ink);
	}
}

/* =========================================================================
   Hero
   ====================================================================== */

.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(88svh, 820px);
	padding-block: clamp(7rem, 12vh, 9.5rem) clamp(3.5rem, 7vh, 5.5rem);
	background: var(--g-800);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(88% 70% at 20% 26%, var(--g-700) 0%, transparent 66%),
		radial-gradient(70% 62% at 88% 88%, var(--g-900) 0%, transparent 60%);
}
/* Produce line-work tiled as a watermark. Low enough that it reads as texture
   in the corner of the eye and never competes with the packshot. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/hero-pattern.webp") center / 620px auto repeat;
	opacity: 0.14;
	pointer-events: none;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: clamp(var(--s5), 4vw, var(--s9));
}
@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; text-align: center; }
	.hero .eyebrow, .hero__actions { justify-content: center; }
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s3);
	margin: 0 0 var(--s4);
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--g-200);
}
.lang-ar .hero__eyebrow { letter-spacing: 0; }
.hero__eyebrow::before {
	content: "";
	inline-size: var(--s7);
	block-size: 2px;
	flex: none;
	border-radius: 2px;
	background: var(--g-400);
}
@media (max-width: 900px) { .hero__eyebrow { justify-content: center; } }

.hero__title { font-size: var(--t-4xl); color: #fff; margin-bottom: var(--s5); }
.hero__lede {
	max-width: 48ch;
	margin-bottom: var(--s7);
	font-size: var(--t-lg);
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.84);
}
@media (max-width: 900px) { .hero__lede { margin-inline: auto; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.hero__stage { display: grid; place-items: center; }
.hero__product {
	max-block-size: min(56vh, 500px);
	inline-size: auto;
	object-fit: contain;
	filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.45));
}
@media (max-width: 900px) { .hero__stage { display: none; } }

/* =========================================================================
   Capability bar

   The four facts a buyer checks first, stated as facts. Sits directly under
   the hero because it is the answer to "can you actually supply me".
   ====================================================================== */

.capability { background: var(--ink); color: #fff; padding-block: var(--s5); }
.capability__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--s4) var(--s6);
}
.capability__item { display: flex; align-items: center; gap: var(--s3); }
.capability__icon {
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	flex: none;
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, 0.1);
	color: var(--g-300);
}
.capability__text { display: flex; flex-direction: column; min-width: 0; }
.capability__value {
	font-size: var(--t-lg);
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
	direction: ltr;
	unicode-bidi: isolate;
}
.lang-ar .capability__value { direction: inherit; }
.capability__label { font-size: var(--t-xs); color: rgba(255, 255, 255, 0.66); }

/* =========================================================================
   Labels
   ====================================================================== */

.labels__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--s5);
}

.label-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--mid);
}
.label-card:hover { transform: translateY(-5px); border-color: var(--g-300); box-shadow: var(--sh-lg); }

/*
 * Each mark sits on the ground it needs, set per label in rv_labels():
 * Ponto is a black wordmark and has to be on white, while the Nano crest is
 * drawn with a white keyline that only separates on something dark.
 */
.label-card__mark {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	/* A flex item sizes to its content first, so a portrait crest pushed the
	   panel past its ratio and left the two cards' footers on different
	   lines. Pinning the box and fitting the image inside it holds them
	   level whatever shape the artwork is. */
	position: relative;
	min-block-size: 0;
	overflow: hidden;
	background: var(--label-bg, var(--paper-2));
}
.label-card__mark img {
	/* Taken out of flow so the panel's aspect-ratio is what sizes it. Left in
	   flow, a percentage height has no definite box to resolve against and
	   the artwork falls back to its intrinsic size, which the panel then
	   clips. */
	position: absolute;
	inset: var(--s6);
	inline-size: calc(100% - var(--s6) * 2);
	block-size: calc(100% - var(--s6) * 2);
	object-fit: contain;
	transition: transform 0.5s var(--ease);
}
.label-card:hover .label-card__mark img { transform: scale(1.04); }
.label-card__fallback { font-size: var(--t-xl); font-weight: 800; color: var(--ink); }

.label-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s4) var(--s5);
	border-block-start: 3px solid var(--label-accent, var(--g-400));
}
.label-card__text { display: grid; gap: 2px; }
.label-card__name { font-size: var(--t-lg); font-weight: 800; }
.label-card__count { font-size: var(--t-sm); color: var(--ink-3); }
.label-card__arrow {
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	flex: none;
	border-radius: var(--r-pill);
	background: var(--g-100);
	color: var(--g-700);
	transition: background var(--fast), color var(--fast);
}
.label-card:hover .label-card__arrow { background: var(--g-600); color: #fff; }

/* =========================================================================
   Range by type
   ====================================================================== */

.range__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--s3);
}
.type-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s4) var(--s5);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--r-md);
	font-weight: 700;
	transition: border-color var(--fast), transform var(--mid) var(--ease);
}
.type-card:hover { border-color: var(--g-400); transform: translateY(-3px); }
.type-card__name { font-size: var(--t-sm); }
.type-card__count {
	flex: none;
	min-inline-size: 26px;
	padding: 1px var(--s2);
	text-align: center;
	font-size: var(--t-xs);
	font-weight: 700;
	color: var(--g-700);
	background: var(--g-100);
	border-radius: var(--r-pill);
	direction: ltr;
}

/* =========================================================================
   Product grid
   ====================================================================== */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--s4);
}
@media (max-width: 520px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3); } }

.product-card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--mid);
}
.product-card:hover { transform: translateY(-4px); border-color: var(--g-300); box-shadow: var(--sh-lg); }

/* The packshots are cut to transparency, so the media box gives them a tinted
   ground rather than leaving them floating on white. */
.product-card__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: var(--s5);
	background: var(--paper-2);
}
.product-card__media img {
	max-block-size: 100%;
	inline-size: auto;
	object-fit: contain;
	transition: transform 0.5s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__placeholder { color: var(--g-300); }

/* The pack size is the single most-checked fact on a card, so it is on the
   image where the eye already is, not buried in the caption. */
.product-card__size {
	position: absolute;
	inset-block-start: var(--s3);
	inset-inline-start: var(--s3);
	padding: 2px var(--s2);
	font-size: var(--t-xs);
	font-weight: 700;
	color: var(--g-800);
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--r-sm);
	direction: ltr;
	unicode-bidi: isolate;
}

.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-block-size: 96px;
	padding: var(--s4);
	text-align: center;
}
.product-card__label {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--g-600);
}
.lang-ar .product-card__label { letter-spacing: 0; text-transform: none; }
.product-card__name { font-size: var(--t-sm); font-weight: 800; line-height: 1.4; }

/* =========================================================================
   Redesigned home
   ====================================================================== */

.home-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(88svh, 830px);
	padding-block: clamp(7rem, 12vh, 9rem) clamp(3rem, 6vh, 5rem);
	background: var(--g-800);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(112deg, rgba(14, 40, 15, 0.98) 0%, rgba(28, 72, 27, 0.94) 48%, rgba(17, 24, 19, 0.98) 100%),
		url("../img/hero-pattern.webp") center / 560px auto repeat;
}
.home-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	block-size: 64px;
	z-index: -1;
	background: linear-gradient(to top, var(--paper), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.home-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
	align-items: center;
	gap: clamp(var(--s6), 5vw, var(--s10));
}
.home-hero__copy { max-width: 680px; }
.home-hero__title {
	max-width: 13ch;
	margin-bottom: var(--s5);
	font-size: clamp(2.45rem, 4.35vw, 5rem);
	line-height: 1.12;
	color: #fff;
}
.lang-ar .home-hero__title {
	max-width: 14ch;
	line-height: 1.25;
}
.home-hero__lede {
	max-width: 56ch;
	margin-bottom: var(--s6);
	font-size: var(--t-lg);
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.82);
}
.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin-bottom: var(--s6);
}
.home-hero__ticks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	max-width: 680px;
}
.home-hero__ticks li {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: 38px;
	padding-inline: var(--s3);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--t-xs);
	font-weight: 700;
}
.home-hero__ticks svg { color: var(--g-300); flex: none; }
.home-hero__visual {
	position: relative;
	min-block-size: clamp(430px, 56vh, 610px);
	isolation: isolate;
}
.home-hero__visual::before {
	content: "";
	position: absolute;
	inset: 15% 3% 13%;
	z-index: -2;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: var(--r-md);
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
		linear-gradient(28deg, rgba(11, 27, 13, 0.72), rgba(255, 255, 255, 0.02) 58%, rgba(216, 58, 49, 0.13));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 36px 80px -58px #000;
	transform: skewY(-2deg);
}
.home-hero__visual::after {
	content: "";
	position: absolute;
	inset-inline: 12% 12%;
	inset-block-end: 13%;
	z-index: -1;
	block-size: 22px;
	border-radius: var(--r-pill);
	background: rgba(0, 0, 0, 0.32);
	filter: blur(15px);
}
.home-hero__pack {
	position: absolute;
	display: grid;
	place-items: center;
	margin: 0;
}
.home-hero__pack img {
	inline-size: auto;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.34));
}
.home-hero__pack--1 {
	inset-inline-start: 29%;
	inset-block: 3% 12%;
	inline-size: 48%;
	z-index: 3;
}
.home-hero__pack--2 {
	inset-inline-start: 4%;
	inset-block-end: 14%;
	inline-size: 31%;
	opacity: 0.96;
	z-index: 2;
}
.home-hero__pack--3 {
	inset-inline-end: 4%;
	inset-block-start: auto;
	inset-block-end: 13%;
	inline-size: 29%;
	opacity: 0.94;
	z-index: 2;
}
.home-hero__orbit {
	display: none;
}
.home-hero__orbit span {
	inline-size: max-content;
	padding: 3px var(--s3);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.09);
	color: rgba(255, 255, 255, 0.74);
	font-size: 0.72rem;
	font-weight: 800;
}
.home-hero__plate {
	position: absolute;
	inset-inline-start: 5%;
	inset-inline-end: auto;
	inset-block-end: 4%;
	z-index: 3;
	display: grid;
	gap: 2px;
	max-inline-size: 210px;
	padding: var(--s3) var(--s4);
	border-block-start: 3px solid var(--tomato);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.94);
	color: var(--ink);
	box-shadow: var(--sh-lg);
}
.home-hero__plate b { font-size: var(--t-sm); line-height: 1.35; }
.home-hero__plate span {
	font-family: var(--font-latin);
	font-size: var(--t-xs);
	font-weight: 800;
	color: var(--g-600);
}

.home-proof {
	position: relative;
	z-index: 2;
	margin-block-start: calc(var(--s8) * -1);
	padding-block-end: var(--s8);
}
.home-proof__grid {
	display: grid;
	gap: var(--s4);
}
.home-proof__intro,
.home-proof__facts {
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--sh-md);
}
.home-proof__intro {
	order: 2;
	text-align: center;
	margin: 0;
	padding: var(--s5);
	color: var(--ink-2);
	font-size: var(--t-lg);
	font-weight: 700;
	line-height: 1.8;
}
.home-proof__facts {
	order: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	overflow: hidden;
}
.home-proof__facts li {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: var(--s2);
	min-block-size: 176px;
	padding: var(--s5) var(--s4);
	border-inline-start: 1px solid var(--line);
	text-align: center;
}
.home-proof__facts li:first-child { border-inline-start: 0; }
.home-proof__icon {
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	margin-bottom: var(--s2);
	color: var(--g-700);
}
.home-proof__facts b {
	font-size: var(--t-xl);
	font-weight: 900;
	line-height: 1.15;
	color: var(--ink);
	direction: ltr;
	unicode-bidi: isolate;
}
.lang-ar .home-proof__facts b { direction: inherit; }
.home-proof__facts span {
	font-size: var(--t-xs);
	font-weight: 700;
	color: var(--ink-3);
}

.home-labels { padding-block-start: var(--s6); }
.home-labels__note {
	max-width: 38ch;
	margin: 0;
	color: var(--ink-2);
	font-size: var(--t-base);
	line-height: 1.8;
}
.home-labels__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s4);
}
.home-label {
	display: grid;
	grid-template-columns: 1fr;
	min-block-size: 520px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--paper);
	transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--mid);
}
.home-label:hover { transform: translateY(-4px); border-color: var(--g-300); box-shadow: var(--sh-lg); }
.home-label__media {
	position: relative;
	display: grid;
	align-items: center;
	min-block-size: 300px;
	padding: var(--s7);
	background:
		radial-gradient(circle at 88% 76%, rgba(216, 58, 49, 0.18), transparent 30%),
		linear-gradient(135deg, rgba(50, 122, 36, 0.05), rgba(216, 58, 49, 0.08)),
		var(--paper-2);
	overflow: hidden;
}
.home-label--dark .home-label__media {
	background:
		radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.18), transparent 30%),
		linear-gradient(135deg, rgba(50, 122, 36, 0.62), rgba(18, 50, 18, 0.98)),
		var(--g-900);
}
.home-label__mark {
	position: relative;
	z-index: 3;
	max-inline-size: 9ch;
	color: var(--tomato);
	font-family: var(--font-latin);
	font-size: clamp(2.35rem, 4vw, 4.2rem);
	font-weight: 800;
	line-height: 0.98;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.home-label--dark .home-label__mark {
	color: #fff;
	text-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.home-label__product {
	position: absolute;
	inset-inline-end: var(--s5);
	inset-block-end: var(--s5);
	z-index: 2;
	display: grid;
	place-items: end;
	inline-size: 48%;
	block-size: 70%;
	pointer-events: none;
}
.home-label__product img {
	position: static;
	z-index: auto;
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
	filter: drop-shadow(0 16px 16px rgba(18, 26, 21, 0.18));
}
.home-label--dark .home-label__product img {
	filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.28));
}
.home-label__stamp {
	position: absolute;
	inset-inline: auto var(--s5);
	inset-block: var(--s4) auto;
	transform: none;
	z-index: 1;
	color: rgba(18, 26, 21, 0.075);
	font-size: clamp(5rem, 11vw, 9rem);
	font-weight: 900;
	line-height: 1.05;
	text-align: end;
}
.home-label--dark .home-label__stamp { color: rgba(255, 255, 255, 0.1); }
.home-label__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--s2);
	padding: var(--s5) var(--s6) var(--s6);
}
.home-label__body b { font-size: var(--t-xl); line-height: 1.25; }
.home-label__body strong {
	color: var(--ink);
	font-size: var(--t-base);
	line-height: 1.5;
}
.home-label__body span {
	color: var(--ink-2);
	font-size: var(--t-sm);
	line-height: 1.8;
}
.home-label__body em {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	margin-top: var(--s2);
	color: var(--g-600);
	font-size: var(--t-sm);
	font-style: normal;
	font-weight: 800;
}

.home-supply {
	position: relative;
	background: var(--ink);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.home-supply::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(18, 26, 21, 0.9), rgba(18, 50, 18, 0.86)),
		url("../img/hero-pattern.webp") center / 520px auto repeat;
	opacity: 0.95;
}
.home-supply__grid {
	display: grid;
	grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
	gap: clamp(var(--s6), 5vw, var(--s9));
	align-items: start;
}
.home-supply__head { position: sticky; top: 105px; }
.home-supply__head .eyebrow { color: var(--g-200); }
.home-supply__head h2 {
	margin-bottom: var(--s4);
	font-size: var(--t-3xl);
	color: #fff;
}
.home-supply__head p {
	max-width: 48ch;
	color: rgba(255, 255, 255, 0.76);
	font-size: var(--t-lg);
	line-height: 1.85;
}
.home-supply__cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	padding-block: var(--s5) var(--s7);
}
.home-supply__cards::after {
	content: "";
	position: absolute;
	inset-inline: 7%;
	inset-block-end: var(--s4);
	block-size: 1px;
	background: linear-gradient(90deg, transparent, rgba(94, 187, 73, 0.35), transparent);
}
.home-supply__card {
	position: relative;
	display: grid;
	align-content: start;
	min-block-size: 320px;
	padding: var(--s5);
	border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0));
}
.home-supply__card:first-child { border-inline-start: 0; }
.home-supply__card::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: calc(var(--s4) - 5px);
	inline-size: 10px;
	block-size: 10px;
	border-radius: var(--r-pill);
	background: var(--g-400);
	box-shadow: 0 0 0 5px rgba(94, 187, 73, 0.12), 0 0 18px rgba(94, 187, 73, 0.5);
}
.home-supply__num {
	margin-bottom: var(--s4);
	color: var(--g-400);
	font-family: var(--font-latin);
	font-size: var(--t-xl);
	font-weight: 900;
	line-height: 1;
	direction: ltr;
}
.home-supply__icon {
	display: grid;
	place-items: center;
	inline-size: 68px;
	block-size: 68px;
	margin-bottom: var(--s4);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--r-pill);
	background: rgba(94, 187, 73, 0.1);
	color: var(--g-300);
}
.home-supply__card:nth-child(2) .home-supply__icon,
.home-supply__card:nth-child(4) .home-supply__icon {
	background: rgba(216, 58, 49, 0.14);
	color: #ffaaa4;
}
.home-supply__card h3 {
	margin-bottom: var(--s2);
	color: #fff;
	font-size: var(--t-lg);
}
.home-supply__card p {
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--t-sm);
	line-height: 1.8;
}

.home-range__grid {
	display: grid;
	grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr);
	gap: clamp(var(--s6), 5vw, var(--s9));
	align-items: center;
}
.home-range__copy .btn { margin-top: var(--s4); }
.home-range__panel {
	display: grid;
	grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1.15fr);
	gap: var(--s4);
	align-items: stretch;
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper);
	box-shadow: var(--sh-md);
}
.home-range__types {
	display: grid;
	gap: 0;
	align-content: start;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}
.home-range__types a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	min-block-size: 58px;
	padding: var(--s3) var(--s4);
	border-block-start: 1px solid var(--line);
	background: var(--paper);
	font-weight: 800;
	transition: border-color var(--fast), transform var(--mid) var(--ease), background var(--fast);
}
.home-range__types li:first-child a { border-block-start: 0; }
.home-range__types a:hover {
	border-color: var(--g-300);
	background: var(--g-50);
}
.home-range__types span {
	overflow-wrap: anywhere;
	font-size: var(--t-sm);
}
.home-range__types b {
	display: grid;
	place-items: center;
	min-inline-size: 34px;
	block-size: 30px;
	padding-inline: var(--s2);
	border-radius: var(--r-sm);
	background: var(--ink);
	color: #fff;
	font-family: var(--font-latin);
	font-size: var(--t-xs);
}
.home-range__products {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s5) var(--s3);
	padding: var(--s5);
	border-radius: var(--r-sm);
	background:
		linear-gradient(180deg, transparent calc(50% - 3px), rgba(122, 84, 42, 0.28) calc(50% - 3px), rgba(122, 84, 42, 0.28) calc(50% + 3px), transparent calc(50% + 3px)),
		linear-gradient(180deg, transparent calc(100% - 18px), rgba(122, 84, 42, 0.26) calc(100% - 18px), rgba(122, 84, 42, 0.26) calc(100% - 12px), transparent calc(100% - 12px)),
		linear-gradient(135deg, rgba(50, 122, 36, 0.08), rgba(216, 58, 49, 0.05)),
		var(--paper-2);
	overflow: hidden;
}
.home-range__products a {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: var(--s3);
	border-radius: var(--r-sm);
	background: transparent;
	transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.home-range__products a:hover { transform: translateY(-3px); }
.home-range__products img {
	max-block-size: 100%;
	inline-size: auto;
	object-fit: contain;
	filter: drop-shadow(0 14px 18px rgba(18, 26, 21, 0.14));
}

.home-audiences__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s6);
}
.home-audiences__grid::before {
	content: "";
	position: absolute;
	inset-inline: 12%;
	inset-block-start: 54px;
	block-size: 1px;
	background: repeating-linear-gradient(90deg, rgba(50, 122, 36, 0.35) 0 8px, transparent 8px 16px);
}
.home-audience {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	min-block-size: 290px;
	padding: var(--s2) var(--s4) var(--s4);
	text-align: center;
	transition: transform var(--mid) var(--ease);
}
.home-audience:hover {
	transform: translateY(-4px);
}
.home-audience__num {
	position: absolute;
	inset-block-start: 40px;
	inset-inline-start: calc(50% + 52px);
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--paper-2);
	color: var(--g-600);
	font-family: var(--font-latin);
	font-size: var(--t-sm);
	font-weight: 900;
	direction: ltr;
}
.home-audience__icon {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 108px;
	block-size: 108px;
	margin-bottom: var(--s5);
	border: 1px solid rgba(50, 122, 36, 0.18);
	border-radius: var(--r-pill);
	background: var(--g-100);
	color: var(--g-700);
	box-shadow: 0 0 0 14px rgba(50, 122, 36, 0.05);
}
.home-audience:nth-child(2) .home-audience__icon { background: #f9ece7; color: var(--tomato); }
.home-audience:nth-child(3) .home-audience__icon { background: #f8f1dc; color: #8b6816; }
.home-audience h3 { margin-bottom: var(--s2); font-size: var(--t-xl); }
.home-audience p {
	max-width: 34ch;
	color: var(--ink-2);
	font-size: var(--t-sm);
	line-height: 1.8;
}
.home-audience__more {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	margin-top: var(--s3);
	padding-top: var(--s4);
	color: var(--g-600);
	font-size: var(--t-sm);
	font-weight: 800;
}

@media (max-width: 1020px) {
	.home-hero__grid,
	.home-proof__grid,
	.home-supply__grid,
	.home-range__grid,
	.home-range__panel {
		grid-template-columns: 1fr;
	}
	.home-hero__copy { max-width: none; }
	.home-hero__title,
	.lang-ar .home-hero__title { max-width: 14ch; }
	.home-hero__visual {
		inline-size: min(100%, 620px);
		margin-inline: auto;
	}
	.home-proof { margin-block-start: 0; padding-block-start: var(--s5); }
	.home-proof__facts { grid-template-columns: repeat(2, 1fr); }
	.home-proof__facts li:nth-child(odd) { border-inline-start: 0; }
	.home-supply__head { position: static; }
	.home-supply__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-supply__card:nth-child(odd) { border-inline-start: 0; }
	.home-audiences__grid { grid-template-columns: 1fr; gap: var(--s5); }
	.home-audiences__grid::before { display: none; }
	.home-audience { min-block-size: 0; padding-block: var(--s4); }
	.home-audience__num {
		inset-block-start: var(--s4);
		inset-inline-start: calc(50% + 46px);
	}
}
@media (max-width: 760px) {
	.home-hero {
		min-height: auto;
		padding-block: 7rem var(--s7);
	}
	.home-hero__title,
	.lang-ar .home-hero__title {
		max-width: 100%;
		font-size: clamp(2.15rem, 10vw, 3.7rem);
	}
	.home-hero__visual {
		min-block-size: 330px;
		margin-block-start: var(--s3);
	}
	.home-hero__visual::before { inset: 13% 0 13%; }
	.home-hero__visual::after { inset-block-end: 13%; }
	.home-hero__pack--1 {
		inset-inline-start: 29%;
		inset-block: 7% 15%;
		inline-size: 46%;
	}
	.home-hero__pack--2 {
		inset-inline-start: 4%;
		inset-block-end: 17%;
		inline-size: 31%;
	}
	.home-hero__pack--3 {
		inset-inline-end: 4%;
		inset-block-end: 17%;
		inline-size: 30%;
	}
	.home-hero__orbit { display: none; }
	.home-hero__plate {
		inset-inline: var(--s4) auto;
		inset-block-end: 0;
		max-inline-size: 220px;
	}
	.home-labels__grid,
	.home-label,
	.home-supply__cards,
	.home-range__panel {
		grid-template-columns: 1fr;
	}
	.home-label { min-block-size: 0; }
	.home-label__media { min-block-size: 180px; }
	.home-label__product { inline-size: 34%; block-size: 50%; }
	.home-range__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-supply__cards {
		grid-template-columns: 1fr;
		padding-block: 0;
	}
	.home-supply__cards::after { display: none; }
	.home-supply__card,
	.home-supply__card:nth-child(odd) {
		min-block-size: 0;
		border-inline-start: 0;
		border-block-start: 1px solid rgba(255, 255, 255, 0.14);
	}
	.home-supply__card:first-child { border-block-start: 0; }
	.home-supply__card::after { display: none; }
}
@media (max-width: 520px) {
	.home-hero__actions .btn { inline-size: 100%; }
	.home-hero__ticks { display: none; }
	.home-hero__visual { display: none; }
	.home-proof__facts { grid-template-columns: 1fr; }
	.home-proof__facts li,
	.home-proof__facts li:nth-child(odd) {
		border-inline-start: 0;
		border-block-start: 1px solid var(--line);
	}
	.home-proof__facts li:first-child { border-block-start: 0; }
	.home-proof__facts li {
		min-block-size: 148px;
		padding: var(--s4);
	}
	.home-proof__intro { font-size: var(--t-base); }
	.home-range__panel { padding: var(--s3); }
	.home-range__products { gap: var(--s3); padding: var(--s3); }
	.home-audience__icon {
		inline-size: 92px;
		block-size: 92px;
	}
	.home-audience__num {
		inline-size: 36px;
		block-size: 36px;
		inset-inline-start: calc(50% + 38px);
	}
}

/* =========================================================================
   Catalogue filters
   ====================================================================== */

.filters { display: grid; gap: var(--s4); margin-bottom: var(--s7); }
.filters__row { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.filters__legend {
	flex: none;
	min-inline-size: 4.5rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.lang-ar .filters__legend { letter-spacing: 0; text-transform: none; }
.filters__set { display: flex; flex-wrap: wrap; gap: var(--s2); }

.filter {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: 40px;
	padding-inline: var(--s4);
	font-size: var(--t-sm);
	font-weight: 700;
	color: var(--ink-2);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--r-pill);
	transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.filter:hover { border-color: var(--g-300); color: var(--g-700); }
.filter.is-active { background: var(--g-600); border-color: var(--g-600); color: #fff; }
.filter__count { font-size: var(--t-xs); opacity: 0.7; direction: ltr; }

.catalogue__empty { padding-block: var(--s9); text-align: center; color: var(--ink-3); }
.product-grid__cell[hidden] { display: none; }

/* =========================================================================
   Single product
   ====================================================================== */

.product__crumbs { margin-bottom: var(--s5); }
.product__crumbs a {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--ink-3);
	transition: color var(--fast);
}
.product__crumbs a:hover { color: var(--g-600); }

.product__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--s6), 5vw, var(--s9));
	align-items: start;
}
@media (max-width: 860px) { .product__layout { grid-template-columns: 1fr; } }

.product__media {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: var(--s8);
	background: var(--paper-2);
	border-radius: var(--r-xl);
}
.product__image { max-block-size: 100%; inline-size: auto; object-fit: contain; }
.product__placeholder { color: var(--g-300); }

.product__label {
	display: inline-block;
	margin-bottom: var(--s3);
	padding: var(--s1) var(--s3);
	font-size: var(--t-xs);
	font-weight: 700;
	color: var(--g-700);
	background: var(--g-100);
	border-radius: var(--r-pill);
}
.product__title { font-size: var(--t-3xl); }
.product__alt {
	margin-top: var(--s2);
	font-family: var(--font-latin);
	font-size: var(--t-lg);
	color: var(--ink-3);
	unicode-bidi: isolate;
}
.product__desc { margin-block: var(--s5); }

/* The spec table is the point of the page, so it is a real definition list
   with rules — not three pills that lose the pairing between name and value. */
.product__spec { margin-block: var(--s6); border-block-start: 1.5px solid var(--line); }
.product__spec > div {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: var(--s4);
	padding-block: var(--s3);
	border-block-end: 1.5px solid var(--line);
}
@media (max-width: 480px) { .product__spec > div { grid-template-columns: 1fr; gap: var(--s1); } }
.product__spec dt { font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); }
.product__spec dd { font-size: var(--t-base); font-weight: 700; color: var(--ink); }
.product__spec dd a { color: var(--g-600); }

.product__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* =========================================================================
   Routes
   ====================================================================== */

.routes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s5); }

.route {
	display: flex;
	flex-direction: column;
	padding: var(--s7);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color var(--mid), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.route:hover { border-color: var(--g-400); transform: translateY(-4px); box-shadow: var(--sh-md); }
.route__icon {
	display: grid;
	place-items: center;
	inline-size: 54px;
	block-size: 54px;
	margin-bottom: var(--s4);
	border-radius: var(--r-md);
	background: var(--g-100);
	color: var(--g-700);
}
.route__title { font-size: var(--t-xl); margin-bottom: var(--s3); }
.route__body { font-size: var(--t-base); line-height: 1.75; color: var(--ink-2); }
.route__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	margin-top: var(--s5);
	font-size: var(--t-sm);
	font-weight: 700;
	color: var(--g-600);
	transition: gap var(--mid) var(--ease);
}
.route:hover .route__cta { gap: var(--s3); }

/* =========================================================================
   How we work
   ====================================================================== */

.how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); }
.how__item { position: relative; padding-block-start: var(--s5); border-block-start: 3px solid var(--g-400); }
.how__num {
	font-family: var(--font-latin);
	font-size: var(--t-sm);
	font-weight: 800;
	color: var(--g-500);
	direction: ltr;
}
.how__icon { display: block; margin-block: var(--s3); color: var(--g-600); }
.how__title { font-size: var(--t-lg); margin-bottom: var(--s2); }
.how__body { font-size: var(--t-sm); line-height: 1.75; color: var(--ink-2); }

/* =========================================================================
   Page head
   ====================================================================== */

.page-head {
	position: relative;
	padding-block: clamp(7rem, 13vh, 9.5rem) var(--s8);
	background: var(--g-800);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.page-head::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(78% 70% at 18% 22%, var(--g-700) 0%, transparent 68%),
		url("../img/hero-pattern.webp") center / 540px auto repeat;
	opacity: 0.95;
}
.page-head .eyebrow { color: var(--g-200); }
.page-head__title { font-size: var(--t-3xl); color: #fff; }
.page-head__lede {
	max-width: 58ch;
	margin-top: var(--s3);
	font-size: var(--t-lg);
	color: rgba(255, 255, 255, 0.82);
}

/* =========================================================================
   Contact band
   ====================================================================== */

.contact-band {
	position: relative;
	background: var(--g-700);
	color: #fff;
	padding-block: var(--s9);
	overflow: hidden;
	isolation: isolate;
}
.contact-band::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -6vw;
	inline-size: 66%;
	z-index: -1;
	border-start-end-radius: 120px;
	border-end-end-radius: 120px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
		url("../img/hero-pattern.webp") center / 520px auto repeat;
	opacity: 0.42;
}
.contact-band__inner {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) auto;
	align-items: center;
	justify-content: space-between;
	gap: var(--s6);
}
.contact-band__title { font-size: var(--t-2xl); color: #fff; }
.contact-band__body { margin-top: var(--s2); font-size: var(--t-lg); color: rgba(255, 255, 255, 0.82); max-width: 46ch; }
.contact-band__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.contact-band__benefits {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--s4);
	margin-top: var(--s2);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--t-sm);
	font-weight: 700;
}
.contact-band__benefits li {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
}
.contact-band__benefits svg { color: #ffaaa4; flex: none; }

@media (max-width: 1020px) {
	.contact-band__inner { grid-template-columns: 1fr; text-align: center; }
	.contact-band__body { margin-inline: auto; }
	.contact-band__actions { justify-content: center; }
}
@media (max-width: 760px) {
	.contact-band__benefits { display: grid; justify-content: stretch; text-align: start; }
}
@media (max-width: 520px) {
	.contact-band__actions .btn { inline-size: 100%; }
}

/* =========================================================================
   Footer
   ====================================================================== */

.site-footer {
	position: relative;
	background: #111812;
	color: rgba(255, 255, 255, 0.72);
	padding-block: var(--s9) var(--s5);
	overflow: hidden;
	isolation: isolate;
}
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(135deg, rgba(94, 187, 73, 0.14), transparent 42%),
		linear-gradient(315deg, rgba(216, 58, 49, 0.12), transparent 38%);
	pointer-events: none;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(280px, 1.45fr) minmax(180px, 0.75fr) minmax(260px, 1fr);
	gap: clamp(var(--s6), 5vw, var(--s9));
	padding-block-end: var(--s7);
	border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--s6); } }

.site-footer .brand img { block-size: 72px; inline-size: auto; }
.site-footer__blurb {
	max-width: 48ch;
	margin-top: var(--s4);
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--t-sm);
	line-height: 1.9;
}
.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin-top: var(--s5);
}
.site-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	color: #fff;
	font-size: var(--t-sm);
	font-weight: 800;
	transition: color var(--fast), transform var(--mid) var(--ease);
}
.site-footer__social a:hover {
	transform: translateY(-2px);
	color: var(--g-300);
}

.site-footer__heading {
	margin-bottom: var(--s4);
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}
.lang-ar .site-footer__heading { letter-spacing: 0; text-transform: none; }
.site-footer__list { display: grid; gap: var(--s2); }
.site-footer__list a {
	display: inline-flex;
	align-items: center;
	min-block-size: 34px;
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--t-sm);
	transition: color var(--fast), transform var(--mid) var(--ease);
}
.site-footer__list a:hover { color: var(--g-300); transform: translateX(3px); }
[dir="rtl"] .site-footer__list a:hover { transform: translateX(-3px); }
.site-footer__list--contact { gap: var(--s3); }
.site-footer__list--contact a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: center;
	gap: var(--s2);
	padding: var(--s3);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.04);
}
.site-footer__list--contact a:hover { background: rgba(255, 255, 255, 0.07); transform: none; }
.site-footer__list--contact svg { flex: none; color: var(--g-400); }
.site-footer__list--contact span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding-block-start: var(--s5);
	font-size: var(--t-xs);
	color: rgba(255, 255, 255, 0.55);
}
.site-footer__bottom p { margin: 0; }
.site-footer__iso { font-family: var(--font-latin); letter-spacing: 0.04em; }

/* Floating WhatsApp. Clears the home indicator on phones. */
.wa-float {
	position: fixed;
	inset-block-end: calc(var(--s5) + env(safe-area-inset-bottom));
	right: var(--s5);
	left: auto;
	z-index: 90;
	display: none;
	place-items: center;
	inline-size: 54px;
	block-size: 54px;
	border-radius: var(--r-pill);
	background: #25d366;
	color: #fff;
	box-shadow: var(--sh-lg);
	transition: transform var(--mid) var(--ease);
}
.wa-float:hover { transform: scale(1.06); }
@media (max-width: 640px) {
	.wa-float { display: none; }
}

/* =========================================================================
   Reference homepage
   ====================================================================== */

.rv-home-reference {
	--rv-ref-green: #429533;
	--rv-ref-dark: #073f24;
	--rv-ref-deep: #032a19;
	--rv-ref-muted: #607064;
	--rv-ref-line: #e5ece2;
	background: #fff;
	color: #17201a;
	font-family: var(--font-latin);
	line-height: 1.55;
}
.rv-home-reference h1,
.rv-home-reference h2,
.rv-home-reference h3 {
	font-family: var(--font-latin);
	letter-spacing: 0;
	line-height: 1.04;
}
.rv-home-reference p { color: var(--rv-ref-muted); }
.rv-home-reference span { color: inherit; }

.rv-ref-kicker,
.rv-ref-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	margin: 0 0 var(--s3);
	color: var(--rv-ref-green);
	font-family: var(--font-latin);
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}
.rv-ref-eyebrow::before { display: none; }
.rv-ref-btn,
.rv-ref-mini-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	border-radius: var(--r-pill);
	font-family: var(--font-latin);
	font-size: 0.82rem;
	font-weight: 900;
	white-space: nowrap;
	transition: transform var(--mid) var(--ease), background var(--fast), color var(--fast), border-color var(--fast), box-shadow var(--mid) var(--ease);
}
.rv-ref-btn {
	min-height: 52px;
	padding-inline: var(--s6);
	border: 1.5px solid transparent;
}
.rv-ref-btn:hover,
.rv-ref-mini-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--sh-md);
}
.rv-ref-btn--solid {
	background: var(--rv-ref-green);
	color: #fff;
}
.rv-ref-btn--solid:hover { background: var(--g-700); }
.rv-ref-btn--outline,
.rv-ref-mini-btn {
	border: 1.5px solid rgba(66, 149, 51, 0.45);
	color: var(--g-700);
	background: #fff;
}
.rv-ref-btn--outline:hover,
.rv-ref-mini-btn:hover { border-color: var(--rv-ref-green); background: var(--g-50); }
.rv-ref-btn--ghost-light {
	border-color: rgba(255, 255, 255, 0.42);
	color: #fff;
	background: transparent;
}
.rv-ref-btn--ghost-light:hover {
	background: #fff;
	color: var(--g-800);
}
.rv-ref-mini-btn {
	min-height: 42px;
	padding-inline: var(--s5);
	font-size: 0.74rem;
}
.rv-ref-mini-btn--center {
	display: flex;
	width: max-content;
	margin: var(--s5) auto 0;
}

.rv-ref-hero {
	position: relative;
	/* A full first screen. svh rather than vh so the mobile browser's own
	   chrome does not push the buttons below the fold; vh stays as the
	   fallback for anything that has not shipped the newer unit. min- rather
	   than a fixed height, so a short landscape window scrolls instead of
	   clipping the copy. */
	min-block-size: 100vh;
	min-block-size: 100svh;
	/* Flex rather than grid to do the centring: a grid item is sized from its
	   own content first, which let the copy push the wrapper wider than a
	   narrow viewport and spill off the side. A column flex item stretches to
	   the container instead, and .wrap keeps its own max width from there. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 112px var(--s6);
	overflow: hidden;
	background: #fff;
	isolation: isolate;
	/* This section's copy and background photo are only laid out for a
	   left-to-right reading order; letting the page's RTL direction flip the
	   grid here would slide the headline over the product photo instead of
	   the light side of the image. */
	direction: ltr;
}
.rv-ref-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: right center;
}
.rv-ref-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 38%, rgba(255, 255, 255, 0.08) 76%),
		linear-gradient(180deg, rgba(255, 255, 255, 0) 78%, #fff 100%);
	pointer-events: none;
}
.rv-ref-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(330px, 0.86fr) minmax(0, 1.14fr);
	align-items: center;
}
.rv-ref-hero__copy {
	position: relative;
	z-index: 3;
	max-width: 530px;
}
.rv-ref-hero h1 {
	margin-bottom: var(--s4);
	color: #202326;
	font-size: clamp(2.4rem, 3.6vw, 3.9rem);
	font-weight: 900;
	text-transform: uppercase;
}
.rv-ref-hero h1 span {
	display: block;
	color: var(--rv-ref-green);
}
.rv-ref-hero__copy p:not(.rv-ref-kicker) {
	max-width: 42ch;
	margin-bottom: var(--s5);
	font-size: 1rem;
	line-height: 1.75;
	color: #47504a;
}
.rv-ref-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
}
.rv-ref-about {
	padding-block: var(--s7);
	background: #f8faf7;
}
.rv-ref-about__grid {
	display: grid;
	grid-template-columns: minmax(300px, 0.48fr) minmax(0, 1fr);
	align-items: stretch;
	gap: var(--s7);
}
.rv-ref-about__copy {
	display: grid;
	align-content: center;
	max-width: 420px;
}
.rv-ref-about h2,
.rv-ref-section-head h2,
.rv-ref-certs h2 {
	margin-bottom: var(--s3);
	color: #202326;
	font-size: clamp(2rem, 3.15vw, 3.15rem);
	font-weight: 900;
}
.rv-ref-about h2 span,
.rv-ref-section-head h2 span,
.rv-ref-certs h2 span,
.rv-ref-manufacturing h2 span,
.rv-ref-cta h2 span {
	color: var(--rv-ref-green);
}
.rv-ref-about__copy p {
	margin-bottom: var(--s5);
	font-size: 0.94rem;
	line-height: 1.86;
}
.rv-ref-about__visual {
	position: relative;
	min-height: 390px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--paper-2);
}
.rv-ref-about__visual > img {
	inline-size: 100%;
	block-size: 100%;
	min-height: 390px;
	object-fit: cover;
}
.rv-ref-stats {
	position: absolute;
	inset-block: 34px 0;
	inset-inline-end: 36px;
	display: grid;
	align-content: center;
	gap: var(--s4);
	inline-size: 250px;
	padding: var(--s6);
	border-radius: 8px 8px 0 0;
	background: linear-gradient(160deg, #084929, #032d1b);
	color: #fff;
}
.rv-ref-stats li {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	column-gap: var(--s3);
	align-items: center;
}
.rv-ref-stats svg {
	grid-row: span 2;
	color: var(--g-300);
}
.rv-ref-stats b {
	font-size: 1.38rem;
	font-weight: 900;
	line-height: 1;
}
.rv-ref-stats span {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.25;
}

.rv-ref-products {
	padding-block: var(--s8) var(--s9);
	background: #fff;
}
.rv-ref-section-head {
	position: relative;
	margin-bottom: var(--s6);
}
.rv-ref-section-head--center {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}
.rv-ref-section-head p:not(.rv-ref-eyebrow) { font-size: 0.9rem; }
.rv-ref-product-row {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 42px;
	align-items: center;
	gap: var(--s3);
}
.rv-ref-slider-btn {
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	border: 1.5px solid rgba(66, 149, 51, 0.5);
	border-radius: var(--r-pill);
	color: var(--g-700);
	background: #fff;
}
.rv-ref-slider-btn--next {
	background: var(--rv-ref-green);
	color: #fff;
	border-color: var(--rv-ref-green);
}
.rv-ref-product-list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--s5);
}
.rv-ref-product {
	display: grid;
	justify-items: center;
	gap: var(--s2);
	min-width: 0;
	padding: 0 0 var(--s3);
	text-align: center;
	transition: transform var(--mid) var(--ease);
}
.rv-ref-product:hover { transform: translateY(-4px); }
.rv-ref-product__media {
	display: grid;
	place-items: center;
	inline-size: 100%;
	aspect-ratio: 0.8;
	padding: var(--s5);
	border: 1.5px solid transparent;
	border-radius: 8px;
	background: #f8f8f8;
	transition: border-color var(--fast), box-shadow var(--mid) var(--ease), background var(--fast);
}
.rv-ref-product.is-featured .rv-ref-product__media {
	border-color: var(--rv-ref-green);
	background: #fff;
	box-shadow: 0 14px 32px -28px rgba(18, 26, 21, 0.45);
}
.rv-ref-product__img {
	inline-size: auto;
	max-inline-size: 100%;
	max-block-size: 230px;
	object-fit: contain;
	filter: drop-shadow(0 14px 16px rgba(18, 26, 21, 0.12));
}
.rv-ref-packshot__missing {
	display: grid;
	place-items: center;
	color: var(--g-300);
}
.rv-ref-product b {
	margin-top: var(--s2);
	color: #202326;
	font-size: 0.9rem;
	font-weight: 900;
}
.rv-ref-product span:last-child {
	color: #657069;
	font-size: 0.72rem;
	font-weight: 700;
}

.rv-ref-manufacturing {
	display: grid;
	grid-template-columns: minmax(320px, 0.42fr) minmax(0, 1fr);
	min-height: 510px;
	background: #0b3e25;
}
.rv-ref-manufacturing__copy {
	display: grid;
	align-content: center;
	padding: clamp(var(--s6), 5vw, var(--s9));
	background:
		linear-gradient(160deg, rgba(2, 42, 24, 0.96), rgba(4, 63, 36, 0.95)),
		url("../img/hero-pattern.webp") center / 520px auto repeat;
	color: #fff;
}
.rv-ref-manufacturing h2 {
	margin-bottom: var(--s4);
	color: #fff;
	font-size: clamp(2rem, 3.25vw, 3.5rem);
	font-weight: 900;
}
.rv-ref-manufacturing p {
	max-width: 42ch;
	margin-bottom: var(--s5);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.9rem;
	line-height: 1.72;
}
.rv-ref-manufacturing__features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s3);
	margin-bottom: var(--s5);
}
.rv-ref-manufacturing__features li {
	display: grid;
	justify-items: center;
	gap: var(--s2);
	padding-inline: var(--s2);
	border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--g-300);
	text-align: center;
}
.rv-ref-manufacturing__features li:first-child { border-inline-start: 0; }
.rv-ref-manufacturing__features span {
	color: #fff;
	font-size: 0.62rem;
	font-weight: 900;
	line-height: 1.2;
}
.rv-ref-manufacturing__image {
	position: relative;
	min-width: 0;
	overflow: hidden;
}
.rv-ref-manufacturing__image > img {
	inline-size: 100%;
	block-size: 100%;
	min-height: 510px;
	object-fit: cover;
}
.rv-ref-process {
	position: absolute;
	inset-inline: 8%;
	inset-block-end: 34px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--s2);
	padding: var(--s4);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--sh-lg);
}
.rv-ref-process li {
	display: grid;
	justify-items: center;
	gap: var(--s2);
	color: var(--g-600);
	text-align: center;
}
.rv-ref-process span {
	color: #2d3931;
	font-size: 0.66rem;
	font-weight: 900;
	line-height: 1.18;
}

.rv-ref-standards {
	padding-block: var(--s9);
	background: #fbfcfa;
}
.rv-ref-standards__grid {
	display: grid;
	grid-template-columns: minmax(260px, 0.76fr) minmax(320px, 1fr) minmax(420px, 1.15fr);
	align-items: center;
	gap: var(--s7);
}
.rv-ref-certs p:not(.rv-ref-eyebrow) {
	margin-bottom: var(--s5);
	font-size: 0.84rem;
	line-height: 1.72;
}
.rv-ref-cert-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s3);
}
.rv-ref-cert-list li {
	display: grid;
	place-items: center;
	gap: var(--s2);
	aspect-ratio: 1;
	border: 1.5px solid rgba(66, 149, 51, 0.25);
	border-radius: var(--r-pill);
	background:
		radial-gradient(circle, rgba(66, 149, 51, 0.11), rgba(255, 255, 255, 0.9) 68%),
		#fff;
	text-align: center;
}
.rv-ref-cert-list b {
	color: var(--g-700);
	font-size: 0.98rem;
	font-weight: 900;
	line-height: 1.05;
}
.rv-ref-cert-list span {
	max-width: 9ch;
	color: #556158;
	font-size: 0.62rem;
	font-weight: 800;
	line-height: 1.2;
}
.rv-ref-partners {
	padding-inline-start: var(--s7);
	border-inline-start: 1.5px solid var(--rv-ref-line);
}
.rv-ref-partners ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s5) var(--s6);
	align-items: center;
}
.rv-ref-partners li {
	color: #7a7d7b;
	font-size: clamp(1rem, 1.5vw, 1.6rem);
	font-weight: 900;
	line-height: 1;
	filter: grayscale(1);
}

.rv-ref-news {
	padding-block: var(--s8) var(--s9);
	background: #fff;
}
.rv-ref-news .rv-ref-section-head { max-width: none; }
.rv-ref-news .rv-ref-section-head > p:not(.rv-ref-eyebrow) {
	max-width: 620px;
	margin-inline: auto;
}
.rv-ref-news__all {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: var(--s3);
}
.rv-ref-news__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s5);
}
.rv-ref-news-card {
	display: grid;
	grid-template-columns: 42% minmax(0, 1fr);
	min-height: 156px;
	overflow: hidden;
	border: 1px solid #edf1ea;
	border-radius: 8px;
	background: #f8f8f8;
	box-shadow: 0 1px 0 rgba(18, 26, 21, 0.02);
}
.rv-ref-news-card img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.rv-ref-news-card div {
	display: grid;
	align-content: center;
	gap: var(--s2);
	padding: var(--s4);
}
.rv-ref-news-card time {
	color: #8a928c;
	font-size: 0.68rem;
	font-weight: 700;
}
.rv-ref-news-card h3 {
	color: #202326;
	font-size: 0.96rem;
	font-weight: 900;
	line-height: 1.35;
}
.rv-ref-news-card a {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	color: var(--g-600);
	font-size: 0.72rem;
	font-weight: 900;
}

.rv-ref-cta {
	background: linear-gradient(90deg, #074629, #0a4e2b 58%, #093a23);
	color: #fff;
}
.rv-ref-cta__inner {
	display: grid;
	grid-template-columns: 82px minmax(240px, 0.7fr) minmax(230px, 0.62fr) minmax(320px, 0.9fr);
	align-items: center;
	gap: var(--s5);
	min-height: 120px;
}
.rv-ref-cta__icon {
	display: grid;
	place-items: center;
	inline-size: 82px;
	block-size: 82px;
	border: 10px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--g-700);
}
.rv-ref-cta h2 {
	color: #fff;
	font-size: clamp(1.35rem, 2vw, 2rem);
	font-weight: 900;
	line-height: 1.2;
}
.rv-ref-cta p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.86rem;
}
.rv-ref-subscribe {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--r-pill);
	background: rgba(0, 0, 0, 0.12);
}
.rv-ref-subscribe input,
.rv-ref-subscribe button {
	min-height: 50px;
	border: 0;
	font-family: var(--font-latin);
}
.rv-ref-subscribe input {
	min-width: 0;
	padding-inline: var(--s5);
	color: #fff;
	background: transparent;
	outline: 0;
}
.rv-ref-subscribe input::placeholder { color: rgba(255, 255, 255, 0.5); }
.rv-ref-subscribe button {
	padding-inline: var(--s6);
	background: var(--g-400);
	color: #fff;
	font-weight: 900;
}

.site-footer--home {
	padding-block: var(--s7) var(--s4);
	background: #052d1b;
}
.site-footer--home::before {
	background:
		linear-gradient(90deg, rgba(94, 187, 73, 0.18), transparent 38%),
		linear-gradient(270deg, rgba(255, 255, 255, 0.07), transparent 48%);
}
.home-footer__grid {
	display: grid;
	grid-template-columns: minmax(240px, 1.25fr) minmax(150px, 0.74fr) minmax(150px, 0.72fr) minmax(250px, 1fr);
	gap: clamp(var(--s5), 3vw, var(--s8));
	padding-block-end: var(--s6);
	border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}
.home-footer__brand .brand img {
	block-size: 62px;
	inline-size: auto;
}
.home-footer__brand p {
	margin-top: var(--s3);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.82rem;
	line-height: 1.8;
}
.home-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4);
}
.home-footer__legal a { color: rgba(255, 255, 255, 0.62); }

@media (max-width: 1180px) {
	.site-header--home .nav__list { gap: var(--s3); }
	.site-header--home .nav__list a { font-size: 0.76rem; }
	.home-header-cta { padding-inline: var(--s4); }
	.rv-ref-standards__grid {
		grid-template-columns: 1fr;
		gap: var(--s6);
	}
	.rv-ref-partners {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
	.home-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
	.home-topbar { display: none; }
	.site-header--home .site-header__inner { min-height: 76px; }
	.site-header--home .nav { background: var(--paper); }
	.site-header--home .nav__list a,
	.site-header.is-over-dark:not(.is-stuck) .nav.is-open .nav__list a {
		font-size: var(--t-xl);
	}
	.site-header--home .home-header-cta { display: none; }
	.rv-ref-hero { padding-block-start: 110px; }
	.rv-ref-hero__inner,
	.rv-ref-about__grid,
	.rv-ref-manufacturing {
		grid-template-columns: 1fr;
	}
	.rv-ref-hero__inner { gap: var(--s5); }
	.rv-ref-hero__copy { max-width: 620px; }
	.rv-ref-product-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.rv-ref-about__copy { max-width: none; }
	.rv-ref-manufacturing__image > img { min-height: 420px; }
	.rv-ref-news__grid,
	.rv-ref-cta__inner {
		grid-template-columns: 1fr;
	}
	.rv-ref-cta__inner {
		padding-block: var(--s6);
		text-align: center;
		justify-items: center;
	}
	.rv-ref-subscribe { width: min(100%, 560px); }
}
@media (max-width: 760px) {
	.site-header--home .brand__mark {
		inline-size: 42px;
		block-size: 42px;
	}
	.home-brand__text strong { font-size: 1rem; }
	.home-brand__text small { font-size: 0.45rem; }
	.rv-ref-hero {
		padding-block: 96px var(--s7);
	}
	.rv-ref-hero::after {
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.86) 48%, rgba(255, 255, 255, 0.32) 100%),
			linear-gradient(180deg, rgba(255, 255, 255, 0) 78%, #fff 100%);
	}
	.rv-ref-hero h1 { font-size: clamp(2rem, 8.6vw, 2.9rem); }
	.rv-ref-about,
	.rv-ref-products,
	.rv-ref-standards,
	.rv-ref-news {
		padding-block: var(--s7);
	}
	.rv-ref-stats {
		position: static;
		inline-size: auto;
		border-radius: 0;
	}
	.rv-ref-product-row { grid-template-columns: 1fr; }
	.rv-ref-slider-btn { display: none; }
	.rv-ref-product-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s3);
	}
	.rv-ref-product__media { padding: var(--s3); }
	.rv-ref-product__img { max-block-size: 180px; }
	.rv-ref-manufacturing__features,
	.rv-ref-process,
	.rv-ref-cert-list,
	.rv-ref-partners ul,
	.rv-ref-news__grid,
	.home-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
	.rv-ref-process {
		position: static;
		border-radius: 0;
	}
	.rv-ref-news__all {
		position: static;
		margin-top: var(--s4);
	}
	.rv-ref-news-card { grid-template-columns: 1fr; }
	.rv-ref-news-card img { aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
	.rv-ref-hero__actions .rv-ref-btn,
	.rv-ref-mini-btn--center,
	.rv-ref-subscribe,
	.rv-ref-subscribe button {
		width: 100%;
	}
	.rv-ref-product-list,
	.rv-ref-manufacturing__features,
	.rv-ref-process,
	.rv-ref-cert-list,
	.rv-ref-partners ul,
	.home-footer__grid {
		grid-template-columns: 1fr;
	}
	.rv-ref-subscribe {
		grid-template-columns: 1fr;
		border-radius: 8px;
	}
	.rv-ref-product-list,
	.rv-ref-cert-list,
	.rv-ref-partners ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================================
   Homepage polish pass
   ====================================================================== */

.site-header--home .home-topbar__inner { justify-content: center; }
.site-header--home .home-topbar__proof { justify-content: center; }
.site-header--home .nav__list { gap: clamp(var(--s5), 2.5vw, var(--s8)); }
.site-header--home .nav__list a { font-size: 0.88rem; }

.rv-ref-hero {
	padding-block-start: 112px;
}
.rv-ref-hero::after {
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.88) 34%, rgba(255, 255, 255, 0.08) 74%),
		/* A light scrim behind the transparent header, so the logo stays
		   readable over the photo half even where the left-right fade above
		   has already gone clear. */
		linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0) 82%, #fff 100%);
}
.rv-ref-hero__copy {
	max-width: 560px;
	padding-block-start: var(--s4);
}
.rv-ref-hero h1 {
	font-size: clamp(2.4rem, 3.75vw, 4.05rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
}
.rv-ref-hero__copy p:not(.rv-ref-kicker) {
	max-width: 44ch;
	color: #3f4b43;
	font-weight: 600;
}
.rv-ref-about__visual > img {
	object-position: center;
}
.rv-ref-stats {
	inset-block: auto 0;
	inline-size: 230px;
	border-radius: 8px 0 0 0;
	background: linear-gradient(160deg, rgba(8, 73, 41, 0.96), rgba(3, 45, 27, 0.98));
	backdrop-filter: blur(6px);
}

.rv-ref-product-carousel {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	align-items: center;
	gap: var(--s3);
}
.rv-ref-product-viewport {
	--rv-ref-card: clamp(180px, 18vw, 245px);
	min-width: 0;
	overflow: hidden;
	padding-block: var(--s3) var(--s4);
	touch-action: pan-y;
	cursor: grab;
}
.rv-ref-product-viewport:active { cursor: grabbing; }
.rv-ref-product-list {
	display: flex;
	grid-template-columns: none;
	gap: var(--s5);
	width: max-content;
	padding-inline: calc((100% - var(--rv-ref-card)) / 2);
	will-change: transform;
}
.rv-ref-product-list.is-dragging .rv-ref-product { pointer-events: none; }
.rv-ref-product {
	flex: 0 0 var(--rv-ref-card);
	opacity: 0.62;
	transform: scale(0.92);
}
.rv-ref-product:hover { transform: scale(0.94) translateY(-3px); }
.rv-ref-product.is-active {
	opacity: 1;
	transform: scale(1);
}
.rv-ref-product__media {
	aspect-ratio: 0.84;
	background:
		radial-gradient(circle at 50% 70%, rgba(50, 122, 36, 0.08), transparent 44%),
		#f8faf7;
}
.rv-ref-product.is-active .rv-ref-product__media {
	border-color: var(--rv-ref-green);
	background: #fff;
	box-shadow: 0 20px 40px -30px rgba(18, 26, 21, 0.5);
}
.rv-ref-product__img { max-block-size: min(250px, calc(var(--rv-ref-card) * 0.95)); }
.rv-ref-slider-btn {
	z-index: 3;
	box-shadow: 0 8px 20px -16px rgba(18, 26, 21, 0.4);
	transition: transform var(--mid) var(--ease), background var(--fast), color var(--fast), border-color var(--fast);
}
.rv-ref-slider-btn:hover {
	transform: translateY(-2px);
	background: var(--g-50);
	border-color: var(--rv-ref-green);
}
.rv-ref-slider-btn--next:hover { background: var(--g-700); color: #fff; }

.rv-ref-standards {
	padding-block: clamp(4rem, 7vw, 7rem);
	background:
		linear-gradient(180deg, #fbfcfa, #fff);
}
.rv-ref-standards__panel {
	display: grid;
	grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1fr);
	gap: var(--s6);
	align-items: stretch;
	padding: var(--s5);
	border: 1px solid var(--rv-ref-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 22px 60px -48px rgba(18, 26, 21, 0.32);
}
.rv-ref-certs {
	display: grid;
	align-content: center;
	padding: clamp(var(--s5), 4vw, var(--s8));
}
.rv-ref-certs p:not(.rv-ref-eyebrow) {
	max-width: 42ch;
	color: #56635b;
	font-weight: 600;
}
.rv-ref-cert-visual {
	position: relative;
	min-height: 360px;
	border-radius: 8px;
	overflow: hidden;
	background: #eef5ed;
	box-shadow: inset 0 0 0 1px rgba(50, 122, 36, 0.14);
}
.rv-ref-cert-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(2, 45, 27, 0.02), rgba(2, 45, 27, 0.16)),
		linear-gradient(90deg, rgba(50, 122, 36, 0.18), transparent 42%);
}
.rv-ref-cert-visual img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.rv-ref-cert-list {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s3);
}
.rv-ref-cert-list li {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	place-items: initial;
	align-items: center;
	gap: 2px var(--s3);
	aspect-ratio: auto;
	min-height: 96px;
	padding: var(--s4);
	border: 1px solid rgba(50, 122, 36, 0.16);
	border-radius: 8px;
	background: #f8faf7;
	text-align: start;
}
.rv-ref-cert-list__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--g-700);
	box-shadow: 0 10px 20px -18px rgba(18, 26, 21, 0.4);
}
.rv-ref-cert-list b {
	color: #1f2a22;
	font-size: 1rem;
}
.rv-ref-cert-list span:not(.rv-ref-cert-list__icon) {
	max-width: none;
	color: #5d6a61;
	font-size: 0.72rem;
}

.site-footer--home .home-footer__grid {
	grid-template-columns: minmax(260px, 1.35fr) minmax(170px, 0.8fr) minmax(170px, 0.8fr) minmax(280px, 1.15fr);
}
.home-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin-top: var(--s5);
}
.home-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 900;
}
.home-footer__social svg { color: #fff; }
.site-footer--home .site-footer__list a {
	color: rgba(255, 255, 255, 0.82);
	font-weight: 800;
}
.site-footer--home .site-footer__list a:hover {
	color: #fff;
	transform: translateX(3px);
}
.site-footer--home .site-footer__list--contact a {
	display: inline-flex;
	min-block-size: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-weight: 900;
}
.site-footer--home .site-footer__list--contact a:hover { background: transparent; color: #fff; }
.site-footer--home .site-footer__list--contact svg { color: #fff; }

@media (max-width: 1020px) {
	.site-header--home .nav__list { gap: var(--s5); }
	.rv-ref-product-carousel { grid-template-columns: 42px minmax(0, 1fr) 42px; }
	.rv-ref-product-viewport { --rv-ref-card: min(64vw, 250px); }
	.rv-ref-standards__panel { grid-template-columns: 1fr; }
	.rv-ref-cert-visual { min-height: 320px; }
	.rv-ref-cert-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer--home .home-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.rv-ref-hero {
		padding-block-start: 98px;
	}
	.rv-ref-hero__bg { object-position: 62% center; }
	.rv-ref-stats {
		position: absolute;
		inset-inline: auto 0;
		inset-block: auto 0;
		inline-size: min(100%, 245px);
	}
	.rv-ref-product-carousel { grid-template-columns: 38px minmax(0, 1fr) 38px; }
	.rv-ref-slider-btn {
		display: grid;
		inline-size: 38px;
		block-size: 38px;
	}
	.rv-ref-cert-list { grid-template-columns: 1fr; }
	.rv-ref-cert-list li { min-height: 84px; }
}
@media (max-width: 520px) {
	.rv-ref-hero__bg { object-position: 68% center; }
	.rv-ref-product-viewport { --rv-ref-card: min(70vw, 235px); }
	.rv-ref-product-list,
	.rv-ref-cert-list,
	.rv-ref-partners ul,
	.home-footer__grid {
		grid-template-columns: none;
	}
	.site-footer--home .home-footer__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   News

   Cards, not a list of titles: a food manufacturer's news is a new line, a
   new pack or a trade fair, and all three are things you look at.
   ====================================================================== */

.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--s6);
}
.news-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--sh-sm);
	transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.news-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-md);
}
.news-card__media {
	display: block;
	overflow: hidden;
	background: var(--paper-3);
}
.news-card__media img {
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform var(--mid) var(--ease);
}
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--s2);
	padding: var(--s5);
}
.news-card__date {
	color: var(--ink-3);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.news-card__title {
	font-size: var(--t-lg);
	line-height: 1.35;
}
.news-card__title a:hover { color: var(--g-600); }
.news-card__excerpt {
	flex: 1;
	margin: 0;
	color: var(--ink-2);
	font-size: var(--t-sm);
	line-height: 1.75;
}
.news-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	color: var(--g-600);
	font-size: var(--t-sm);
	font-weight: 800;
}
/* The arrow is drawn pointing right; forward is the other way in Arabic. */
[dir="rtl"] .news-card__more svg,
[dir="rtl"] .rv-ref-news-card a svg { transform: scaleX(-1); }

.empty {
	padding-block: var(--s9);
	color: var(--ink-3);
	text-align: center;
}

.pager { margin-top: var(--s8); }
.pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	justify-content: center;
}
.pager .page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink-2);
	font-weight: 700;
	transition: all var(--fast) var(--ease);
}
.pager a.page-numbers:hover {
	border-color: var(--g-400);
	color: var(--g-700);
}
.pager .page-numbers.current {
	border-color: var(--g-600);
	background: var(--g-600);
	color: #fff;
}
[dir="rtl"] .pager .page-numbers svg { transform: scaleX(-1); }

/* --- one article ------------------------------------------------------ */

.page-head--article { padding-block-end: var(--s9); }
.article__meta {
	margin: var(--s4) 0 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--t-sm);
	font-weight: 700;
}
.article__figure {
	margin-block-start: calc(var(--s9) * -1);
	margin-block-end: calc(var(--section) * -0.5);
}
.article__figure img {
	inline-size: 100%;
	max-block-size: 520px;
	object-fit: cover;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
}
.article__back { margin-block-start: var(--s8); }
.link-back {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	color: var(--g-600);
	font-weight: 800;
}
.link-back:hover { color: var(--g-800); }

/* =========================================================================
   Buttons — light-ground outline

   `.btn--ghost` inverts on hover, which only works over a dark section. This
   is the same shape for a white one.
   ====================================================================== */

.btn--outline {
	background: transparent;
	color: var(--g-700);
	border-color: var(--line-2);
	box-shadow: none;
}
.btn--outline:hover {
	background: var(--g-50);
	border-color: var(--g-400);
	color: var(--g-800);
	box-shadow: var(--sh-sm);
}

/* =========================================================================
   About
   ====================================================================== */

.about-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	/* Stretched, so the photograph runs the full height of the copy beside it
	   rather than leaving a third of the column empty. */
	align-items: stretch;
	gap: clamp(var(--s7), 5vw, var(--s10));
}
.about-story__copy .section__title { margin-block: var(--s3) var(--s5); }
.about-story__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin-block-start: var(--s6);
}
.about-story__visual {
	position: relative;
	margin: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-lg);
}
.about-story__visual > img {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 420px;
	object-fit: cover;
}
.about-story__caption {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s5);
	background: linear-gradient(180deg, rgba(8, 40, 22, 0) 0%, rgba(8, 40, 22, 0.82) 55%, rgba(6, 32, 18, 0.95) 100%);
	color: #fff;
	font-size: var(--t-sm);
	font-weight: 700;
	line-height: 1.45;
}
.about-story__caption svg { flex: none; color: var(--g-300); }

.about-pillars__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s5);
}
.pillar {
	display: grid;
	align-content: start;
	gap: var(--s3);
	padding: var(--s7) var(--s6);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--sh-sm);
}
.pillar__icon {
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: var(--r-md);
	background: var(--g-50);
	color: var(--g-600);
}
.pillar__title { font-size: var(--t-lg); }
.pillar__body {
	margin: 0;
	color: var(--ink-2);
	line-height: 1.8;
}

.about-plant {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: stretch;
	background: var(--g-800);
	color: #fff;
}
.about-plant__copy {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: var(--s4);
	padding: var(--s10) clamp(var(--s6), 5vw, var(--s9));
}
.about-plant__copy .eyebrow { color: var(--g-200); }
.about-plant__copy .section__title { color: #fff; }
.about-plant__copy .section__lede {
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.8);
}
.about-plant__steps {
	display: grid;
	gap: var(--s1);
	inline-size: 100%;
	margin-block: var(--s4);
}
.about-plant__steps li {
	display: grid;
	grid-template-columns: 34px 30px minmax(0, 1fr);
	align-items: baseline;
	column-gap: var(--s3);
	padding-block: var(--s3);
	border-block-end: 1px solid rgba(255, 255, 255, 0.14);
}
.about-plant__steps li:last-child { border-block-end: 0; }
.about-plant__num {
	color: var(--g-300);
	font-size: var(--t-xs);
	font-weight: 900;
	letter-spacing: 0.1em;
}
.about-plant__icon {
	align-self: center;
	color: var(--g-200);
}
.about-plant__steps b {
	color: #fff;
	font-size: var(--t-base);
	font-weight: 800;
	line-height: 1.4;
}
.about-plant__note {
	grid-column: 3;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--t-sm);
	line-height: 1.6;
}
.about-plant__visual {
	position: relative;
	min-block-size: 480px;
}
.about-plant__visual img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
/* A wash of the section's own green, so the photograph reads as part of the
   panel rather than a rectangle dropped beside it. */
.about-plant__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(29, 74, 27, 0.85) 0%, rgba(29, 74, 27, 0.24) 34%, rgba(29, 74, 27, 0.06) 100%);
}
[dir="rtl"] .about-plant__visual::after { transform: scaleX(-1); }

.about-standards__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(var(--s7), 5vw, var(--s10));
}
.about-standards__grid .section__title { margin-block: var(--s3) var(--s4); }
.about-standards__list {
	display: grid;
	/* Four marks, so two rows of two — auto-fit lands on three across and
	   leaves the fourth stranded on a row of its own. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s4);
	margin-block-start: var(--s7);
}
.about-standards__list li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--s3);
	align-items: center;
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--paper-2);
}
.about-standards__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--g-600);
	box-shadow: var(--sh-sm);
}
.about-standards__list b {
	font-size: var(--t-base);
	font-weight: 900;
}
.about-standards__list span:last-child {
	color: var(--ink-3);
	font-size: var(--t-xs);
	line-height: 1.4;
}
.about-standards__visual {
	margin: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-lg);
}
.about-standards__visual img {
	inline-size: 100%;
	min-block-size: 420px;
	object-fit: cover;
}

/* =========================================================================
   Contact
   ====================================================================== */

.contact-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
	align-items: start;
	gap: clamp(var(--s6), 4vw, var(--s8));
}
.contact-page__routes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s4);
	align-content: start;
}
.contact-card {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--s4);
	row-gap: 2px;
	align-content: center;
	min-block-size: 116px;
	padding: var(--s5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--sh-sm);
	transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--fast) var(--ease);
}
.contact-card:hover {
	transform: translateY(-2px);
	border-color: var(--g-300);
	box-shadow: var(--sh-md);
}
.contact-card__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: var(--r-md);
	background: var(--g-50);
	color: var(--g-600);
}
.contact-card__label {
	color: var(--ink-3);
	font-size: var(--t-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.contact-card--wide { grid-column: 1 / -1; }
.contact-card__value {
	color: var(--ink);
	font-size: var(--t-base);
	font-weight: 800;
	line-height: 1.5;
	/* An address on one line, a long mailbox broken rather than overflowing. */
	overflow-wrap: anywhere;
}

.contact-aside {
	display: grid;
	gap: var(--s4);
	align-content: start;
}
.contact-aside__wa {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: center;
	gap: var(--s4);
	padding: var(--s5);
	border-radius: var(--r-lg);
	background: #1faa53;
	color: #fff;
	box-shadow: var(--sh-md);
	transition: transform var(--mid) var(--ease), background var(--fast) var(--ease);
}
.contact-aside__wa:hover { background: #17904a; transform: translateY(-2px); }
.contact-aside__wa b { display: block; font-size: var(--t-base); font-weight: 900; }
.contact-aside__wa small {
	display: block;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--t-xs);
}
.contact-aside__hours,
.contact-aside__social {
	padding: var(--s5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper-2);
}
.contact-aside__heading {
	display: flex;
	align-items: center;
	gap: var(--s2);
	margin-block-end: var(--s3);
	color: var(--ink);
	font-size: var(--t-sm);
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.contact-aside__heading svg { color: var(--g-600); }
.contact-aside__hours dl { display: grid; gap: var(--s2); }
.contact-aside__hours dl > div {
	display: flex;
	justify-content: space-between;
	gap: var(--s3);
	padding-block: var(--s2);
	border-block-end: 1px dashed var(--line);
	font-size: var(--t-sm);
}
.contact-aside__hours dl > div:last-child { border-block-end: 0; }
.contact-aside__hours dt { color: var(--ink-2); }
.contact-aside__hours dd { font-weight: 800; }
.contact-aside__social ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
.contact-aside__social a {
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--ink-2);
	transition: all var(--fast) var(--ease);
}
.contact-aside__social a:hover {
	border-color: var(--g-400);
	background: var(--g-600);
	color: #fff;
}

.contact-form-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: start;
	gap: clamp(var(--s7), 5vw, var(--s9));
}
.contact-form-section__head .section__title { margin-block: var(--s3) var(--s4); }
.contact-form-section__points {
	display: grid;
	gap: var(--s2);
	margin-block-start: var(--s6);
}
.contact-form-section__points li {
	display: flex;
	align-items: center;
	gap: var(--s3);
	color: var(--ink-2);
	font-size: var(--t-sm);
	font-weight: 700;
}
.contact-form-section__points svg { flex: none; color: var(--g-600); }

.contact-form-wrap {
	padding: clamp(var(--s5), 3vw, var(--s7));
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--sh-md);
}
.contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s4);
}
.contact-form__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
.field { margin: 0; display: grid; gap: var(--s2); }
.field--full { grid-column: 1 / -1; }
.field label {
	color: var(--ink-2);
	font-size: var(--t-sm);
	font-weight: 800;
}
.field__req { color: var(--tomato); }
.field input,
.field textarea {
	inline-size: 100%;
	padding: var(--s3) var(--s4);
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	background: var(--paper-2);
	color: var(--ink);
	font: inherit;
	font-size: var(--t-sm);
	transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.field textarea { resize: vertical; min-block-size: 140px; line-height: 1.7; }
.field input:focus,
.field textarea:focus {
	border-color: var(--g-500);
	background: #fff;
	outline: none;
	box-shadow: 0 0 0 3px var(--g-100);
}
.contact-form__submit { margin-block-start: var(--s2); }
.contact-form__submit .btn { inline-size: max-content; }

.form-notice {
	display: flex;
	align-items: center;
	gap: var(--s3);
	margin-block-end: var(--s5);
	padding: var(--s4) var(--s5);
	border-radius: var(--r-md);
	font-size: var(--t-sm);
	font-weight: 700;
}
.form-notice--ok {
	border: 1px solid var(--g-200);
	background: var(--g-50);
	color: var(--g-800);
}
.form-notice--error {
	border: 1px solid #f3c9c6;
	background: #fdf2f1;
	color: #9b2c24;
}

.contact-map {
	position: relative;
	block-size: clamp(320px, 42vh, 460px);
	background: var(--paper-3);
}
/* A caption over the map, because a pin alone does not say whose it is — and
   the embed is not always precise enough to stand on its own. */
.contact-map__pin {
	position: absolute;
	z-index: 2;
	/* Physical right in both directions: Google parks its own "Open in Maps"
	   button in the top-left corner of the embed, and a logical property
	   would slide this straight under it on the Arabic side. */
	inset-block-start: var(--s5);
	right: var(--s5);
	left: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s2) var(--s3);
	max-inline-size: min(100% - var(--s8), 460px);
	margin: 0;
	padding: var(--s3) var(--s4);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, 0.95);
	box-shadow: var(--sh-md);
	font-size: var(--t-sm);
	font-weight: 700;
	line-height: 1.5;
}
.contact-map__pin svg { flex: none; color: var(--g-600); }
.contact-map__pin a {
	color: var(--g-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.contact-map__pin a:hover { color: var(--g-800); }
.contact-map iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	/* The embed is a Google map — grey it back a touch so it sits with the
	   page instead of shouting from the bottom of it. */
	filter: saturate(0.9);
}

@media (max-width: 1020px) {
	.about-story__grid,
	.about-standards__grid,
	.about-plant,
	.contact-page__grid,
	.contact-form-section__grid {
		grid-template-columns: 1fr;
	}
	.about-plant__copy { padding-block: var(--s9); }
	.about-plant__visual { min-block-size: 300px; }
	.about-standards__visual { order: -1; }
	.article__figure { margin-block-end: 0; }
}
@media (max-width: 760px) {
	/* Two columns leave a phone number breaking over three lines. */
	.contact-page__routes { grid-template-columns: 1fr; }
	.contact-card { min-block-size: 0; }
}
@media (max-width: 640px) {
	.contact-form { grid-template-columns: 1fr; }
	.contact-form__submit .btn { inline-size: 100%; }
	.about-story__visual > img { min-block-size: 300px; }
	.article__figure {
		margin-block-start: calc(var(--s8) * -1);
	}
}

/* =========================================================================
   The reference home page in Arabic

   The whole section set was drawn for English: Inter throughout, uppercase
   labels, 1.04 leading, and a hero locked to left-to-right so the copy sat on
   the pale half of the photograph. None of that survives translation, so the
   Arabic side gets its own type and its own mirror.
   ====================================================================== */

.lang-ar .rv-home-reference,
.lang-ar .rv-home-reference h1,
.lang-ar .rv-home-reference h2,
.lang-ar .rv-home-reference h3,
.lang-ar .rv-ref-kicker,
.lang-ar .rv-ref-eyebrow {
	font-family: var(--font);
}
/* Arabic has no case to raise and joins that negative tracking breaks, and
   its descenders need the leading back. */
.lang-ar .rv-home-reference h1,
.lang-ar .rv-home-reference h2,
.lang-ar .rv-home-reference h3 {
	line-height: 1.4;
	letter-spacing: 0;
}
.lang-ar .rv-ref-hero h1,
.lang-ar .rv-ref-kicker,
.lang-ar .rv-ref-eyebrow {
	text-transform: none;
	letter-spacing: 0;
}
.lang-ar .rv-ref-kicker,
.lang-ar .rv-ref-eyebrow { font-size: 0.84rem; }

/*
 * The hero mirrors instead of staying locked left-to-right: the copy belongs
 * on the side the reader starts from. The photograph is flipped with it so
 * the pale half still lands under the headline, and the scrim follows.
 * Nothing in the picture reads as text, so mirroring it costs nothing.
 */
.lang-ar .rv-ref-hero { direction: rtl; }
.lang-ar .rv-ref-hero__bg,
.lang-ar .rv-ref-hero::after { transform: scaleX(-1); }

/* Every arrow on this page is drawn pointing right, which is backwards once
   the page reads the other way. */
.lang-ar .rv-ref-slider-btn svg,
.lang-ar .rv-ref-news-card a svg { transform: scaleX(-1); }

/* =========================================================================
   Print

   Distributors print and forward the catalogue more than anyone expects, so
   the page has to survive it: no dark grounds eating toner, no fixed header
   covering the first line.
   ====================================================================== */

@media print {
	.site-header, .wa-float, .nav-toggle, .contact-band, .hero::after { display: none !important; }
	.hero, .page-head, .capability, .site-footer { background: none !important; color: #000 !important; }
	.hero__title, .page-head__title, .capability__value { color: #000 !important; }
	.product-card, .label-card, .route, .type-card { border: 1px solid #999; break-inside: avoid; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}