/*!
 * BonAgro — core.css  (design v2: no gold, sharper corners, corporate tone)
 * Fonts · design tokens · reset · base typography · layout primitives ·
 * site header & navigation · site footer · flags · global utilities.
 * Shared by the static site, the landing page, the Laravel admin and /api/docs.
 * Contract: docs/DESIGN-V2.md (supersedes the colour/shape parts of docs/SPEC.md). No external requests.
 *
 * TOKEN API (use these; never hard-code colours):
 *   Palette ....... --c-white · --c-cream-50/100/200/300 · --c-sand-400 · --c-taupe-500/600 ·
 *                   --c-brown-950/900/800/700/600/500 · --c-text-brown · --c-green-900…50
 *   Semantic ...... --color-bg · --color-surface · --color-surface-alt · --color-text · --color-text-muted
 *                   (--color-muted = same, v1 name) · --color-heading · --color-lead · --color-border ·
 *                   --color-border-strong · --color-primary(-hover) · --color-accent(-hover|-soft) ·
 *                   --color-accent-ink (accent for small text/icons, AA on every surface) · --color-link(-hover) ·
 *                   --color-eyebrow · --focus-ring (outline colour) · --focus-ring-shadow (inputs) · --focus-offset
 *   Category ...... --cat-{herbicides|insecticides|fungicides|nematicides|regulators}(-rgb|-ink); local --cat /
 *                   --cat-rgb / --cat-ink set by any `*--{category}` class or [data-category]
 *   Gradients ..... --grad-brand · --grad-leaf · --grad-leaf-deep · --grad-dark · --grad-land · --grad-cream
 *   Patterns ...... --pattern-rows (light surfaces) · --pattern-rows-dark (espresso) — crop-row lines ≤5 % opacity
 *   Shape ......... --radius-xs 2 · sm 4 · md 6 · lg 8 · xl 10 (max) · --radius-round 50 % (pins/dots/radios only)
 *   Elevation ..... --shadow-xs · sm · md · lg · xl
 *   Motion ........ --ease-out-expo · --ease-out · --ease-in-out · --ease-in · --dur-1…6
 *   Dark scope .... .section--brown · .on-dark · .page-hero--dark · .cta-band · .site-footer · .calc__result ·
 *                   .mega__aside · .topbar re-map the semantic tokens for espresso backgrounds.
 * Deprecated v1 names (gold / caramel / pill / glow / spring tokens, retired classes) live ONLY in the
 * "deprecated-aliases" marker block at the end of this file (§12). Never reference them in new CSS or markup.
 */

/* == 01. FONTS — self-hosted variable fonts (wght 100–900), latin + latin-ext == */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/montserrat-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/montserrat-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/montserrat-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/montserrat-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* == 02. DESIGN TOKENS (DESIGN-V2 §1–§3) == */
/* Background photographs are per element and must never leak into nested elements (see sitegen/backgrounds.py) */
@property --bg-photo{syntax:"*";inherits:false}
@property --bg-photo-sm{syntax:"*";inherits:false}
@property --bg-photo-xs{syntax:"*";inherits:false}

:root{
  /* Palette — logo neutrals, browns and greens only. NO gold, NO caramel. */
  --c-white:#FFFFFF;
  --c-cream-50:#FAF9F7;--c-cream-100:#F5F3EF;--c-cream-200:#ECEAE7;--c-cream-300:#E0DCD5;
  --c-sand-400:#C9C0B4;--c-taupe-500:#8C7F72;--c-taupe-600:#6B5D4F;
  --c-brown-950:#1F160B;--c-brown-900:#2B1F10;--c-brown-800:#463319;--c-brown-700:#583D28;--c-brown-600:#6A4C2A;--c-brown-500:#73532F;
  --c-text-brown:#4F3423;
  --c-green-900:#234A2B;--c-green-800:#2F6237;--c-green-700:#417F4B;--c-green-600:#5E9150;--c-green-500:#7FA561;
  --c-green-400:#92BB6E;--c-green-300:#A6C48A;--c-green-200:#C9DDB4;--c-green-100:#E8F1DE;--c-green-50:#F3F8EE;

  /* Semantic colours — light surfaces (dark scopes in §02b re-map them) */
  --color-bg:var(--c-cream-50);
  --color-surface:#FFFFFF;
  --color-surface-alt:var(--c-cream-100);
  --color-text:#231A10;
  --color-text-muted:var(--c-taupe-600);
  --color-muted:var(--c-taupe-600);              /* v1 name of --color-text-muted — still supported */
  --color-heading:var(--c-brown-900);
  --color-lead:var(--c-text-brown);
  --color-border:#E4DFD8;
  --color-border-strong:#CFC7BC;
  --color-primary:var(--c-brown-800);
  --color-primary-hover:var(--c-brown-900);
  --color-accent:var(--c-green-700);
  --color-accent-hover:var(--c-green-800);
  --color-accent-soft:var(--c-green-100);
  --color-accent-ink:var(--c-green-800);          /* accent for small text: ≥4.5:1 on white and every cream */
  --color-link:var(--c-green-800);
  --color-link-hover:var(--c-brown-700);
  --color-eyebrow:var(--c-green-800);
  --focus-ring:var(--c-green-700);                /* outline colour (3px, offset --focus-offset) */
  --focus-ring-shadow:0 0 0 3px rgba(65,127,75,.45); /* inputs: border → green-700 + this ring */
  --focus-offset:2px;

  /* Product categories — colour · rgb triplet (tints: rgb(var(--cat-rgb) / .12)) · ink (AA text on tints) */
  --cat-herbicides:#5E9150;--cat-herbicides-rgb:94 145 80;--cat-herbicides-ink:#2F6237;
  --cat-insecticides:#6A4C2A;--cat-insecticides-rgb:106 76 42;--cat-insecticides-ink:#583D28;
  --cat-fungicides:#463319;--cat-fungicides-rgb:70 51 25;--cat-fungicides-ink:#463319;
  --cat-nematicides:#7D6B5D;--cat-nematicides-rgb:125 107 93;--cat-nematicides-ink:#6B5D4F;
  --cat-regulators:#2F6237;--cat-regulators-rgb:47 98 55;--cat-regulators-ink:#234A2B;
  --cat:var(--c-green-700);--cat-rgb:65 127 75;--cat-ink:var(--c-green-800); /* default = brand accent */

  /* Gradients — sparingly; flat colour is the default */
  --grad-brand:linear-gradient(90deg,#3A2A16 0%,#583D28 50%,#3A2A16 100%);
  --grad-leaf:linear-gradient(135deg,#7FA561 0%,#417F4B 100%);
  --grad-leaf-deep:linear-gradient(135deg,#5E9150 0%,#2F6237 100%);
  --grad-dark:linear-gradient(180deg,#2B1F10 0%,#1F160B 100%);
  --grad-land:linear-gradient(90deg,#EBE6DF 0%,#D9D1C6 55%,#C7BBAD 100%);
  --grad-cream:linear-gradient(180deg,#FAF9F7 0%,#F5F3EF 100%);
  --grad-brown:var(--grad-dark);                  /* v1 name — still supported */
  /* Photo backgrounds (client, 2026-10-04: photographs instead of oblique lines, never the same image twice on
     a page). The build gives each background-bearing element a class bgp-<slot> from the generated photos.css,
     which sets --bg-photo (1600w) / --bg-photo-sm (1024w) / --bg-photo-xs (640w); see sitegen/backgrounds.py. */
  /* Washes laid over photos so text keeps its contrast (cream ≈ 8–14 % photo, espresso ≈ 10–20 % photo) */
  --wash-cream:linear-gradient(90deg,rgb(250 249 247 / .93) 0%,rgb(250 249 247 / .9) 55%,rgb(245 243 239 / .86) 100%);
  --wash-dark:linear-gradient(180deg,rgb(31 22 11 / .84) 0%,rgb(31 22 11 / .9) 100%);
  /* Retired crop-row line patterns: kept as `none` so a leftover reference draws nothing */
  --pattern-rows:none;
  --pattern-rows-dark:none;

  /* Typography — Montserrat 700 (h1–h2) / 600 (h3–h6), Inter body 16–17px/1.6 */
  --font-display:"Montserrat","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-2xs:.6875rem;
  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-md:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --fs-lg:clamp(1.125rem,1.05rem + .4vw,1.3125rem);
  --fs-xl:clamp(1.3125rem,1.17rem + .65vw,1.625rem);
  --fs-2xl:clamp(1.625rem,1.35rem + 1.3vw,2.25rem);
  --fs-3xl:clamp(1.875rem,1.45rem + 2vw,3.25rem);  /* h1 — max 3.25rem */
  --fs-4xl:clamp(2.125rem,1.6rem + 2.4vw,3.5rem);
  --fs-5xl:clamp(2.375rem,1.7rem + 2.8vw,3.75rem);
  --fw-heading:700;--fw-subheading:600;
  --lh-tight:1.15;--lh-snug:1.3;--lh-base:1.6;
  --tracking-tight:-.01em;--tracking-wide:.08em;--tracking-wider:.12em;

  /* Spacing scale (4px base) + fluid rhythm */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
  --space-7:2rem;--space-8:2.5rem;--space-9:3rem;--space-10:4rem;--space-11:5rem;--space-12:6rem;--space-13:8rem;
  --section-y:clamp(3.5rem,2.2rem + 5.5vw,6.5rem);
  --section-y-tight:clamp(2.5rem,1.8rem + 3vw,4.5rem);
  --gap:clamp(1rem,.6rem + 1.6vw,1.75rem);
  --gutter:16px;
  --container:1200px;
  --container-narrow:820px;

  /* Radii — 10px is the maximum; 50% only for genuinely circular things */
  --radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;
  --radius-round:50%;

  /* Shadows — neutral espresso tint, soft and short */
  --shadow-xs:0 1px 2px rgba(35,26,16,.06);
  --shadow-sm:0 1px 3px rgba(35,26,16,.08),0 1px 2px rgba(35,26,16,.04);
  --shadow-md:0 6px 16px rgba(35,26,16,.08);
  --shadow-lg:0 14px 36px rgba(35,26,16,.12);
  --shadow-xl:0 24px 56px rgba(35,26,16,.14);

  /* Motion — no overshoot curves; decorative motion 300–600ms */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-in:cubic-bezier(.55,0,1,.45);
  --dur-1:120ms;--dur-2:180ms;--dur-3:280ms;--dur-4:400ms;--dur-5:600ms;--dur-6:900ms;

  /* Layers & header metrics */
  --z-dropdown:20;--z-float:80;--z-overlay:90;--z-header:100;--z-progress:120;--z-skip:200;
  --topbar-h:40px;
  --header-h:72px;
  --header-h-scrolled:64px;
  /* Deprecated v1 token names are defined in §12 (deprecated-aliases block) — never reference them. */
}
@media (min-width:640px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:32px}}
@media (min-width:1100px){:root{--header-h:84px;--header-h-scrolled:68px}}

/* == 02b. DARK SURFACES — espresso containers re-map the semantic tokens (components inherit them) == */
.section--brown,.on-dark,.page-hero--dark,.cta-band,.site-footer,.calc__result,.mega__aside,.topbar{
  --color-heading:#FFFFFF;
  --color-text:rgba(245,243,239,.86);
  --color-lead:rgba(245,243,239,.86);
  --color-text-muted:rgba(245,243,239,.7);
  --color-muted:rgba(245,243,239,.7);
  --color-border:rgba(255,255,255,.14);
  --color-border-strong:rgba(255,255,255,.28);
  --color-link:var(--c-green-300);
  --color-link-hover:#FFFFFF;
  --color-accent-ink:var(--c-green-300);
  --color-eyebrow:var(--c-green-300);
  --focus-ring:var(--c-green-300);
  --cat-ink:var(--c-green-300);
  color:var(--color-text)}

/* Category context: any `*--{category}` modifier (badge, card, hero, cal-cell…) sets the local accent */
[class*="--herbicides"],[data-category="herbicides"],[data-filter-value="herbicides"]{--cat:var(--cat-herbicides);--cat-rgb:var(--cat-herbicides-rgb);--cat-ink:var(--cat-herbicides-ink);--cat-on:var(--cat-herbicides-on,#fff);--cat-grad-end:var(--cat-herbicides-grad-end,var(--cat-herbicides-ink))}
[class*="--insecticides"],[data-category="insecticides"],[data-filter-value="insecticides"]{--cat:var(--cat-insecticides);--cat-rgb:var(--cat-insecticides-rgb);--cat-ink:var(--cat-insecticides-ink);--cat-on:var(--cat-insecticides-on,#fff);--cat-grad-end:var(--cat-insecticides-grad-end,var(--cat-insecticides-ink))}
[class*="--fungicides"],[data-category="fungicides"],[data-filter-value="fungicides"]{--cat:var(--cat-fungicides);--cat-rgb:var(--cat-fungicides-rgb);--cat-ink:var(--cat-fungicides-ink);--cat-on:var(--cat-fungicides-on,#fff);--cat-grad-end:var(--cat-fungicides-grad-end,var(--cat-fungicides-ink));--cat-accent-on:var(--cat-fungicides-accent-on)}
[class*="--nematicides"],[data-category="nematicides"],[data-filter-value="nematicides"]{--cat:var(--cat-nematicides);--cat-rgb:var(--cat-nematicides-rgb);--cat-ink:var(--cat-nematicides-ink);--cat-on:var(--cat-nematicides-on,#fff);--cat-grad-end:var(--cat-nematicides-grad-end,var(--cat-nematicides-ink))}
[class*="--regulators"],[data-category="regulators"],[data-filter-value="regulators"]{--cat:var(--cat-regulators);--cat-rgb:var(--cat-regulators-rgb);--cat-ink:var(--cat-regulators-ink);--cat-on:var(--cat-regulators-on,#fff);--cat-grad-end:var(--cat-regulators-grad-end,var(--cat-regulators-ink))}
/* Côte d'Ivoire range colour code (client request): herbicides green, insecticides pink, fungicides yellow,
   nematicides and growth regulators blue, as on its packshots (media/packshots3d.COUNTRY_COLORS; the UI shades are
   deepened so white text keeps >= 5:1). The one sanctioned yellow on the site (DESIGN-V2 §1 exception, exempted by
   qa design): text and icons on it are dark (--cat-fungicides-on). */
html[data-country="ci"]{--cat-herbicides:#2A7F38;--cat-herbicides-rgb:42 127 56;--cat-herbicides-ink:#1E6B2B;--cat-insecticides:#C2367A;--cat-insecticides-rgb:194 54 122;--cat-insecticides-ink:#A82765;--cat-fungicides:#F2C20F;--cat-fungicides-rgb:242 194 15;--cat-fungicides-ink:#6B5300;--cat-fungicides-on:#1F160B;--cat-fungicides-grad-end:#E3AE00;--cat-fungicides-accent-on:#1F160B;--cat-nematicides:#1F6FB4;--cat-nematicides-rgb:31 111 180;--cat-nematicides-ink:#174F80;--cat-regulators:#1F6FB4;--cat-regulators-rgb:31 111 180;--cat-regulators-ink:#174F80}

/* == 03. RESET (modern, minimal) == */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light;hanging-punctuation:first}
/* Keep focused / targeted content clear of the sticky header (header + 20px). /admin and /api/docs keep the html
   scroll-padding (docs.css sets its own). Public pages use scroll-margin on everything OUTSIDE .site-header instead:
   with html scroll-padding, focusing a control inside the sticky header (the menu toggle when Esc closes the mobile
   nav, Shift+Tab back into the header) scrolled the page by half a viewport, and anchors got the offset twice. */
:where(html:not([data-country],[data-lang])){scroll-padding-top:calc(var(--header-h-scrolled) + 1.25rem)}
:where(html[data-country],html[data-lang])>:where(body)>:where(:not(.site-header)),
:where(html[data-country],html[data-lang])>:where(body)>:where(:not(.site-header)) *{scroll-margin-top:calc(var(--header-h-scrolled) + 1.25rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{min-height:100vh;min-height:100dvh;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--fs-base);font-weight:400;line-height:var(--lh-base);font-kerning:normal;font-feature-settings:"kern","liga","calt";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-wrap:break-word}
/* Public site only (country pages + 404 carry html[data-country], the landing html[data-lang]): clip stray
   horizontal overflow on BOTH html and body — with html clipping, body keeps its own clip instead of handing it to
   the viewport, so nothing can widen document.scrollWidth. Zero specificity; /admin and /api/docs are untouched. */
:where(html[data-country],html[data-lang]),:where(html[data-country],html[data-lang])>body{overflow-x:clip}
img,picture,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}
input,button,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
textarea{resize:vertical}
table{border-collapse:collapse;border-spacing:0}
summary{cursor:pointer}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
iframe{border:0}
[hidden]{display:none!important}
:where(ul,ol)[role="list"]{list-style:none;padding:0}
::selection{background:var(--c-green-100);color:var(--c-brown-950)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:var(--focus-offset)}
:focus:not(:focus-visible){outline:none}
:target{scroll-margin-top:calc(var(--header-h-scrolled) + 1.25rem)}
input,select,textarea{accent-color:var(--c-green-700)}

/* == 04. BASE TYPOGRAPHY — Montserrat headings (700 / 600), Inter body, French-friendly == */
:where(h1,h2,h3,h4,h5,h6){font-family:var(--font-display);font-weight:var(--fw-heading);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);color:var(--color-heading);text-wrap:balance;hyphens:manual}
:where(h1){font-size:var(--fs-3xl)}
:where(h2){font-size:var(--fs-2xl)}
:where(h3){font-size:var(--fs-xl);font-weight:var(--fw-subheading);line-height:var(--lh-snug)}
:where(h4){font-size:var(--fs-lg);font-weight:var(--fw-subheading);line-height:var(--lh-snug)}
:where(h5){font-size:var(--fs-md);font-weight:var(--fw-subheading);line-height:var(--lh-snug);letter-spacing:0}
:where(h6){font-size:var(--fs-sm);font-weight:var(--fw-subheading);letter-spacing:var(--tracking-wide);text-transform:uppercase}
:where(p,li,dd,blockquote,figcaption,td){text-wrap:pretty}
:where(a){color:var(--color-link);text-decoration-thickness:.075em;text-underline-offset:.2em;transition:color var(--dur-2) ease,text-decoration-color var(--dur-2) ease}
:where(a):hover{color:var(--color-link-hover)}
:where(strong,b){font-weight:700}
:where(small){font-size:.8125em}
:where(em,i,cite){font-style:italic}
:where(h1,h2,h3,h4,h5,h6) :where(em,i){font-weight:inherit}
:where(code,kbd,samp,pre){font-family:var(--font-mono);font-size:.875em}
:where(code){padding:.12em .4em;border-radius:var(--radius-xs);background:var(--c-cream-200);color:var(--c-brown-800)}
:where(kbd){padding:.1em .4em;border:1px solid var(--color-border-strong);border-bottom-width:2px;border-radius:var(--radius-xs);background:#fff}
:where(abbr[title]){text-decoration:underline dotted;text-underline-offset:.2em;cursor:help}
:where(mark){background:var(--c-green-100);color:inherit;padding:0 .15em;border-radius:var(--radius-xs)}
:where(hr){height:1px;border:0;background:var(--color-border);margin-block:var(--space-8)}
:where(ul,ol){padding-left:1.25em}
:where(li)::marker{color:var(--color-accent-ink)} /* ol numbers are text: green-800 on light (≥5.9:1), green-300 on dark */
:where(blockquote){padding-left:1.25rem;border-left:3px solid var(--color-accent);font-size:var(--fs-md);color:var(--color-lead)}
:where(time,td,th,.tabular){font-variant-numeric:tabular-nums}
:lang(fr) q{quotes:"\00AB\00A0" "\00A0\00BB" "\201C" "\201D"}
:lang(en) q{quotes:"\201C" "\201D" "\2018" "\2019"}
/* Vertical rhythm between flowing content (zero specificity: components override freely) */
:where(p,ul,ol,dl,blockquote,pre,figure,table,.table-wrap,.alert,.notice)+:where(p,ul,ol,dl,blockquote,pre,figure,table,.table-wrap,.alert,.notice){margin-block-start:.9em}
:where(p,ul,ol,dl,blockquote,figure,.table-wrap)+:where(h2,h3,h4,h5,h6){margin-block-start:1.6em}
:where(h2,h3,h4,h5,h6)+:where(p,ul,ol,dl,.table-wrap){margin-block-start:.6em}

.lead{font-size:var(--fs-md);line-height:1.6;color:var(--color-lead)}
.muted{color:var(--color-text-muted)}
.small{font-size:var(--fs-sm)}
/* No gradient text in v2: the class now marks the (single) accent-coloured phrase of a heading */
.text-gradient{color:var(--color-accent-ink);background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor}
/* Eyebrow: Inter 600 .75rem uppercase, accent colour, short 24×2px rule */
.eyebrow{display:inline-flex;align-items:center;gap:.625rem;font:600 var(--fs-xs)/1.3 var(--font-body);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-eyebrow)}
.eyebrow::before{content:"";flex:none;width:24px;height:2px;background:currentColor}
.prose{max-width:68ch}
.prose :where(h2){font-size:var(--fs-xl);margin-top:1.8em}
.prose :where(h3){font-size:var(--fs-lg);margin-top:1.5em}
.prose :where(li+li){margin-top:.35em}
.prose :where(img,figure){border-radius:var(--radius-md)}

/* == 05. LAYOUT PRIMITIVES == */
.container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:calc(var(--container-narrow) + var(--gutter) * 2)}

.section{position:relative;padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--cream{background:var(--color-surface-alt)}
.section--white{background:var(--color-surface)}
.section--leaf{background:var(--color-surface);border-block:1px solid var(--color-border)} /* v1 name: white band + hairline rules (DESIGN-V2 §3 surfaces are white / cream-100 / espresso) */
/* Light band over a washed field photograph (was crop-row lines) */
.section--pattern{background:var(--wash-cream),var(--bg-photo-sm,none) center/cover no-repeat,var(--c-cream-50)}
/* Espresso band over a darkened field photograph. Tokens re-mapped in §02b. */
.section--brown{isolation:isolate;overflow:hidden;background:var(--wash-dark),var(--bg-photo,none) center/cover no-repeat,var(--c-brown-900)}
@media (max-width:700px){.section--brown{background-image:var(--wash-dark),var(--bg-photo-sm,none)}}

.section-header{max-width:46rem;margin-bottom:clamp(2rem,1.4rem + 2vw,3rem)}
.section-header--center{margin-inline:auto;text-align:center}
.section-header--center .section-header__eyebrow{justify-content:center}
.section-header__eyebrow{display:flex;align-items:center;gap:.625rem;font:600 var(--fs-xs)/1.3 var(--font-body);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-eyebrow)}
.section-header__eyebrow::before{content:"";flex:none;width:24px;height:2px;background:currentColor}
.section-header__title{margin-top:.55rem;font-size:var(--fs-2xl)}
.section-header__lead{margin-top:.9rem;font-size:var(--fs-md);line-height:1.6;color:var(--color-text-muted)}
.section-header__actions{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem}
.section-header--center .section-header__actions{justify-content:center}
.section-header--split{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}

.grid{display:grid;gap:var(--grid-gap,var(--gap));grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--grid-min,17rem)),1fr))}
.grid--5{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
@media (min-width:1200px){.grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.grid--center{align-items:center}

.split{display:grid;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}.split--reverse>:first-child{order:2}.split--top{align-items:start}}

.stack>*{margin-block:0}
.stack>*+*{margin-block-start:var(--stack-gap,1rem)}
.stack--sm{--stack-gap:.5rem}
.stack--lg{--stack-gap:2rem}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster-gap,.75rem)}
.cluster--between{justify-content:space-between}
.cluster--center{justify-content:center}

/* == 06. UTILITIES == */
.sr-only,.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.text-center{text-align:center}
.text-balance{text-wrap:balance}
.nowrap{white-space:nowrap}
.mx-auto{margin-inline:auto}
.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}
.mt-sm{margin-top:var(--space-3)!important}.mt-md{margin-top:var(--space-6)!important}.mt-lg{margin-top:var(--space-9)!important}.mt-xl{margin-top:var(--space-11)!important}
.w-full{width:100%}
.relative{position:relative}
.overflow-hidden{overflow:hidden}

/* == 07. SKIP LINK · SCROLL PROGRESS · BACK TO TOP == */
.skip-link{position:fixed;left:1rem;top:1rem;z-index:var(--z-skip);padding:.75rem 1.2rem;border-radius:var(--radius-sm);background:var(--c-brown-900);color:#fff;font:600 var(--fs-sm)/1 var(--font-display);text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-220%);transition:transform var(--dur-3) var(--ease-out-expo)}
.skip-link:focus,.skip-link:focus-visible{transform:none;color:#fff;outline-color:var(--c-green-400)}

.scroll-progress{position:fixed;inset:0 0 auto;z-index:var(--z-progress);height:3px;pointer-events:none;background:var(--color-accent);transform:scaleX(var(--progress,0));transform-origin:0 50%;will-change:transform}

/* app.js toggles .is-visible (> 600px) and sets --progress (0..1): square button, green progress rule along its base */
.back-to-top{--btt-bg:var(--c-brown-900);position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:var(--z-float);display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:var(--radius-md);background:linear-gradient(var(--c-green-400),var(--c-green-400)) 0 100% / calc(var(--progress,0) * 100%) 3px no-repeat,var(--btt-bg);color:#fff;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;translate:0 .5rem;cursor:pointer;transition:opacity var(--dur-3) ease,translate var(--dur-4) var(--ease-out-expo),visibility 0s linear var(--dur-3)}
.back-to-top::before{content:"";width:.6rem;height:.6rem;margin-top:.3rem;border-left:2px solid currentColor;border-top:2px solid currentColor;rotate:45deg}
.back-to-top>svg{display:none}
.back-to-top.is-visible{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.back-to-top:hover{--btt-bg:var(--c-brown-700)}

/* == 08. SITE HEADER — topbar, main bar, brand, navigation, mega menu — Markup: .site-header[data-header] > .topbar + .site-header__main > .site-header__inner == */
.site-header{position:sticky;top:calc(var(--topbar-h) * -1);z-index:var(--z-header);transition:transform var(--dur-4) var(--ease-out-expo),margin var(--dur-4) var(--ease-out-expo)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header.is-scrolled{--header-h:var(--header-h-scrolled);margin-bottom:calc(var(--header-h-base,84px) - var(--header-h-scrolled))}
@media (max-width:1099.98px){.site-header.is-scrolled{margin-bottom:8px}}
.nav-open .site-header,.nav-open .site-header.is-hidden{transform:none}

/* Topbar (dark scope, §02b) */
.topbar{position:relative;z-index:3;height:var(--topbar-h);background:var(--c-brown-950);color:rgba(245,243,239,.86);font-size:var(--fs-xs);font-weight:500;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar>.container,.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:100%}
.topbar__group{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);min-width:0}
.topbar a{display:inline-flex;align-items:center;gap:.45em;color:inherit;text-decoration:none;white-space:nowrap}
.topbar a:hover{color:var(--c-green-300)}
.topbar .icon{width:1rem;height:1rem;color:var(--c-green-400)}
.topbar__tagline{font-weight:500;letter-spacing:.01em;color:rgba(245,243,239,.66)}
@media (max-width:767.98px){.topbar__tagline{display:none}.topbar a[href^="mailto:"]>span:not(.icon){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (max-width:419.98px){.topbar a[href^="tel:"]>span:not(.icon){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* Main bar (frosted surface drawn on a pseudo-element so fixed children keep the viewport as containing block) */
.site-header__main{position:relative;isolation:isolate}
.site-header__main::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(250,249,247,.95);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--color-border);transition:background-color var(--dur-3) ease,box-shadow var(--dur-3) ease}
.site-header.is-scrolled .site-header__main::before{background:rgba(255,255,255,.96);box-shadow:var(--shadow-sm)}
.nav-open .site-header__main{z-index:4}
.site-header__inner{position:relative;display:flex;align-items:center;gap:clamp(.75rem,2vw,2rem);height:var(--header-h);transition:height var(--dur-4) var(--ease-out-expo)}
.site-header__actions{display:flex;align-items:center;gap:.6rem;margin-left:auto;flex:none}
.site-header__actions .btn{--btn-h:2.625rem;--btn-px:1.1rem;font-size:.875rem}
@media (max-width:559.98px){.site-header__actions .btn{display:none}}

/* Brand — the logo image is never rounded or transformed */
.brand{display:inline-flex;align-items:center;gap:.75rem;flex:none;color:inherit;text-decoration:none;border-radius:var(--radius-xs)}
.brand__logo{display:block;height:44px;width:auto;border-radius:0;transition:height var(--dur-4) var(--ease-out-expo)}
.brand__country{display:inline-flex;align-items:center;gap:.45rem;padding-left:.75rem;border-left:1px solid var(--color-border);font:600 var(--fs-2xs)/1.2 var(--font-body);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-green-800);white-space:nowrap}
.site-header.is-scrolled .brand__logo{height:38px}
@media (min-width:1100px){.brand__logo{height:50px}.site-header.is-scrolled .brand__logo{height:42px}}
@media (min-width:1100px) and (max-width:1279.98px){.site-header .brand__country{display:none}}
@media (max-width:379.98px){.brand__country{display:none}}

/* Desktop navigation — 2px accent underline on hover / current */
.main-nav__list{display:flex;align-items:center;gap:.15rem;margin:0;padding:0;list-style:none}
.main-nav__item{position:relative}
.main-nav__link{position:relative;display:inline-flex;align-items:center;gap:.3em;padding:.6rem .6rem;border-radius:var(--radius-sm);font:600 .9375rem/1.2 var(--font-display);color:var(--c-brown-800);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color var(--dur-2) ease,background-color var(--dur-2) ease}
.main-nav__link::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.15rem;height:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur-3) var(--ease-out-expo)}
.main-nav__link:hover{color:var(--c-brown-950)}
.main-nav__link:hover::after,.main-nav__link[aria-current="page"]::after,.main-nav__item.is-active>.main-nav__link::after,.main-nav__item.is-open>.main-nav__link::after{transform:scaleX(1)}
.main-nav__link[aria-current="page"],.main-nav__item.is-active>.main-nav__link{color:var(--c-brown-950)}
.main-nav__caret{display:inline-grid;place-items:center;flex:none;width:1em;height:1em;color:var(--c-taupe-600);transition:rotate var(--dur-3) var(--ease-out-expo)}
button.main-nav__caret{width:1.75rem;height:1.75rem;border-radius:var(--radius-sm)}
button.main-nav__caret:hover{background:var(--c-cream-200)}
.main-nav__caret .icon{width:1em;height:1em}
.main-nav__item.is-open .main-nav__caret,[aria-expanded="true"]>.main-nav__caret,.main-nav__caret[aria-expanded="true"]{rotate:180deg}
.main-nav__cta{display:none}

/* Mega menu & simple dropdowns */
.mega{--color-heading:var(--c-brown-900);--color-text:#231A10;--color-text-muted:var(--c-taupe-600);--color-muted:var(--c-taupe-600);--focus-ring:var(--c-green-700);color:var(--color-text)}
.mega__grid{display:grid;gap:.25rem}
.mega__item{display:flex;align-items:flex-start;gap:.85rem;padding:.7rem .75rem;border-radius:var(--radius-md);color:var(--color-text);text-decoration:none;transition:background-color var(--dur-2) ease}
.mega__item:hover{background:var(--c-cream-100);color:var(--color-text)}
.mega__item:hover .mega__icon{background:rgb(var(--cat-rgb) / .2)}
.mega__item[aria-current="page"]{background:var(--c-cream-100)}
.mega__icon{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-md);background:rgb(var(--cat-rgb) / .12);color:var(--cat-ink);transition:background-color var(--dur-2) ease}
.mega__icon .icon{width:1.3rem;height:1.3rem}
.mega__text{display:flex;flex-direction:column;gap:.15rem;min-width:0;font-size:var(--fs-sm);line-height:1.4;color:var(--color-text-muted)}
.mega__text strong{font:600 .9375rem/1.25 var(--font-display);color:var(--color-heading)}
/* Aside: flat espresso panel (dark scope, §02b) */
.mega__aside{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;padding:1.25rem;border-radius:var(--radius-md);background:var(--wash-dark),var(--bg-photo-xs,none) center/cover no-repeat,var(--c-brown-900);font-size:var(--fs-sm)}
.mega__aside :where(strong,h2,h3,h4,p:first-child){font:700 1.0625rem/1.25 var(--font-display);color:#fff}
.mega__aside a:not(.btn){color:var(--c-green-300);font-weight:600;text-decoration:none}
.mega__aside a:not(.btn):hover{color:#fff}
.mega__aside .btn{align-self:flex-start;margin-top:.5rem}

@media (min-width:1100px){
  .mega{position:absolute;top:calc(100% + .9rem);left:-1rem;z-index:var(--z-dropdown);width:max-content;min-width:16rem;max-width:min(48rem,calc(100vw - 3rem));padding:.6rem;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;translate:0 8px;transition:opacity var(--dur-3) ease,translate var(--dur-3) var(--ease-out-expo),visibility 0s linear var(--dur-3)}
  .mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:1rem}
  .mega:has(.mega__aside){display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:.6rem;width:min(48rem,calc(100vw - 3rem))}
  .mega:has(.mega__aside) .mega__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .main-nav__item.is-open>.mega,.no-js .main-nav__item:focus-within>.mega{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
}
@media (min-width:1100px) and (hover:hover){.main-nav__item:hover>.mega{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}}

/* Hamburger (bars drawn in CSS; put an accessible label inside or on aria-label) */
.nav-toggle{display:none;position:relative;z-index:2;flex:none;width:2.75rem;height:2.75rem;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--color-border-strong);color:var(--c-brown-900);transition:background-color var(--dur-2) ease,border-color var(--dur-2) ease}
.nav-toggle:hover{background:var(--c-cream-100);border-color:var(--c-taupe-500)}
.nav-toggle::before,.nav-toggle::after{content:"";position:absolute;left:50%;top:50%;width:1.25rem;height:2px;margin:-1px 0 0 -.625rem;background:currentColor;transition:transform var(--dur-3) var(--ease-out-expo),box-shadow var(--dur-3) ease}
.nav-toggle::before{transform:translateY(-6px);box-shadow:0 6px 0 currentColor}
.nav-toggle::after{transform:translateY(6px)}
.nav-toggle[aria-expanded="true"]::before,.nav-open .nav-toggle::before{transform:rotate(45deg);box-shadow:0 0 0 transparent}
.nav-toggle[aria-expanded="true"]::after,.nav-open .nav-toggle::after{transform:rotate(-45deg)}
.nav-toggle>svg{display:none}
.nav-toggle>:not(svg){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Mobile / tablet: off-canvas panel (< 1100px).
   The closed panel stays in place (no off-screen translate) and is hidden with visibility + clip-path, so it can
   never widen the document — even while the hidden header's transform makes it the panel's containing block. */
@media (max-width:1099.98px){
  .nav-toggle{display:inline-grid;place-items:center}
  .main-nav{position:fixed;inset:0 0 0 auto;z-index:1;width:min(25rem,88vw);padding:calc(var(--topbar-h) + var(--header-h) + .5rem) 1.25rem 2.5rem;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--c-cream-50);box-shadow:var(--shadow-xl);visibility:hidden;opacity:0;clip-path:inset(0 0 0 100%);transition:clip-path var(--dur-4) var(--ease-out-expo),opacity var(--dur-3) ease,visibility 0s linear var(--dur-4)}
  .main-nav::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--color-accent)}
  .main-nav.is-open,.main-nav:target{visibility:visible;opacity:1;clip-path:inset(0 0 0 -4rem);transition-delay:0s}
  .main-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .main-nav__item{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--color-border)}
  .main-nav.is-open .main-nav__item{animation:ba-slide-in-right var(--dur-5) var(--ease-out-expo) both;animation-delay:calc(var(--i,0) * 40ms + 60ms)}
  .main-nav__item:nth-child(2){--i:1}.main-nav__item:nth-child(3){--i:2}.main-nav__item:nth-child(4){--i:3}.main-nav__item:nth-child(5){--i:4}.main-nav__item:nth-child(6){--i:5}.main-nav__item:nth-child(7){--i:6}.main-nav__item:nth-child(8){--i:7}
  .main-nav__link{flex:1;justify-content:space-between;padding:1rem .25rem;font-size:1.0625rem;border-radius:0}
  .main-nav__link::after{display:none}
  .main-nav__link[aria-current="page"]{color:var(--c-green-800)}
  button.main-nav__caret{width:2.75rem;height:2.75rem}
  .mega{flex-basis:100%;display:none;padding:0 0 1rem}
  .main-nav__item.is-open>.mega{display:block;animation:ba-slide-down var(--dur-4) var(--ease-out-expo)}
  .mega__item{padding:.6rem .5rem}
  .mega__icon{width:2.25rem;height:2.25rem}
  .mega__aside{margin-top:.5rem}
  .main-nav__cta{display:block;margin-top:1.5rem}
  .main-nav__cta .btn{width:100%}
  body.nav-open{overflow:hidden}
  /* Public site (html clips, see §03): lock the viewport through html and keep body a non-scrolling box,
     otherwise body would become the sticky header's scroll container while the panel is open. */
  :where(html[data-country],html[data-lang]):has(>body.nav-open){overflow:hidden}
  :where(html[data-country],html[data-lang])>body.nav-open{overflow:visible;overflow-x:clip}
  body::before{content:"";position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(31,22,11,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-4) ease,visibility 0s linear var(--dur-4)}
  body.nav-open::before{opacity:1;visibility:visible;transition-delay:0s}
  /* Without JS the navigation stays reachable as a static list */
  .no-js .site-header__inner{flex-wrap:wrap;height:auto;padding-block:.75rem}
  .no-js .nav-toggle{display:none}
  .no-js .main-nav{position:static;order:3;width:100%;padding:0;visibility:visible;opacity:1;clip-path:none;box-shadow:none;background:none}
  .no-js .main-nav::before{display:none}
  .no-js .main-nav__item:focus-within>.mega{display:block}
}

/* Country switcher (topbar dropdown) */
.country-switch{position:relative;flex:none}
.country-switch__toggle{display:inline-flex;align-items:center;gap:.5em;height:2rem;padding:0 .7rem;border-radius:var(--radius-sm);border:1px solid var(--color-border-strong);background:#fff;color:var(--c-brown-800);font:600 .8125rem/1 var(--font-display);white-space:nowrap;transition:background-color var(--dur-2) ease,border-color var(--dur-2) ease}
.country-switch__toggle .icon{width:.9rem;height:.9rem;transition:rotate var(--dur-3) var(--ease-out-expo)}
.country-switch.is-open .country-switch__toggle .icon{rotate:180deg}
.topbar .country-switch__toggle{height:1.75rem;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;font-size:var(--fs-xs)}
.topbar .country-switch__toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.topbar .country-switch .icon{color:var(--c-green-300)}
.country-switch__menu{position:absolute;right:0;top:calc(100% + .5rem);z-index:var(--z-dropdown);min-width:15.5rem;margin:0;padding:.35rem;list-style:none;background:#fff;color:#231A10;border:1px solid #E4DFD8;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);opacity:0;visibility:hidden;translate:0 6px;transition:opacity var(--dur-3) ease,translate var(--dur-3) var(--ease-out-expo),visibility 0s linear var(--dur-3);--focus-ring:var(--c-green-700)}
.country-switch.is-open>.country-switch__menu,.no-js .country-switch:focus-within>.country-switch__menu{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
@media (hover:hover){.country-switch:hover>.country-switch__menu{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}}
.country-switch__menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:.7rem}
.country-switch__menu a{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:var(--radius-sm);color:#231A10;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-2) ease}
.country-switch__menu a:hover{background:var(--c-cream-100);color:var(--c-brown-950)}
.country-switch__menu a[aria-current]{background:var(--c-green-50);color:var(--c-green-900);font-weight:600}
.country-switch__menu small{margin-left:auto;padding:.15em .45em;border-radius:var(--radius-xs);background:var(--c-cream-200);font:600 var(--fs-2xs)/1.2 var(--font-body);letter-spacing:.06em;color:var(--c-brown-600)}
.country-switch__menu li:last-child:not(:first-child){margin-top:.3rem;padding-top:.3rem;border-top:1px solid #E4DFD8}
.country-switch__menu li:last-child a .icon{color:var(--c-green-700)}

/* == 09. SITE FOOTER — flat espresso, straight top edge with a 3px green rule (dark scope, §02b) == */
.site-footer{position:relative;margin-top:clamp(3.5rem,6vw,5.5rem);border-top:3px solid var(--c-green-700);background:var(--c-brown-950);font-size:var(--fs-sm);
  --color-link:rgba(245,243,239,.86);--color-link-hover:var(--c-green-300)}
.site-footer a{color:var(--color-link);text-decoration:none}
.site-footer a:hover{color:var(--color-link-hover)}
/* Organised footer (2026-10-05): brand · 3 link columns · contact. Phones: 2 columns, brand and contact full width;
   tablets: brand row, then the link columns and contact side by side; desktop: one row of five. */
.site-footer__grid{display:grid;gap:2.25rem 1.75rem;padding-block:clamp(2.75rem,2.4rem + 2.5vw,4.25rem) 2.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.site-footer__grid>.site-footer__brand,.site-footer__grid>.site-footer__col--contact{grid-column:1/-1}
@media (min-width:640px){
  .site-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer__grid>.site-footer__brand{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);align-items:start;column-gap:2.5rem;max-width:none}
  .site-footer__grid>.site-footer__brand>a{grid-column:1}
  .site-footer__grid>.site-footer__brand>p{grid-column:2;grid-row:1 / span 2;margin:0;max-width:34rem}
  .site-footer__grid>.site-footer__col--contact .site-footer__contact{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
}
@media (min-width:1024px){
  .site-footer__grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.85fr)) minmax(0,1.3fr);column-gap:2.25rem}
  .site-footer__grid>.site-footer__brand,.site-footer__grid>.site-footer__col--contact{grid-column:auto}
  .site-footer__grid>.site-footer__brand{display:flex;flex-direction:column}
  .site-footer__grid>.site-footer__brand>p{max-width:19rem}
  .site-footer__grid>.site-footer__col--contact .site-footer__contact{grid-template-columns:minmax(0,1fr)}
}

.site-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:22rem}
.site-footer__brand img{height:56px;width:auto;padding:6px 10px;border-radius:0;background:var(--c-cream-200)}
.site-footer__brand p{color:var(--color-text-muted);line-height:1.6}
.site-footer__title{margin-bottom:1rem;font:600 var(--fs-xs)/1.3 var(--font-body);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-eyebrow)}
.site-footer__col ul{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.site-footer__col li{display:flex;align-items:flex-start;gap:.55rem}
.site-footer__col .icon{flex:none;width:1rem;height:1rem;margin-top:.2em;color:var(--c-green-400)}
.site-footer__col a{position:relative;background:linear-gradient(var(--c-green-300),var(--c-green-300)) 0 100%/0 1px no-repeat;transition:color var(--dur-2) ease,background-size var(--dur-3) var(--ease-out-expo)}
.site-footer__col a:hover{background-size:100% 1px}
.site-footer__countries{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-block:1.4rem;border-top:1px solid var(--color-border)}
.site-footer__countries>p{margin-right:.5rem;font:600 var(--fs-xs)/1.3 var(--font-body);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-eyebrow)}
.site-footer__countries ul{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.site-footer__countries a{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .75rem;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);font-weight:500;transition:background-color var(--dur-2) ease,border-color var(--dur-2) ease}
.site-footer__countries a:hover{background:rgba(255,255,255,.08);border-color:rgba(166,196,138,.5)}
.site-footer__countries a[aria-current]{border-color:var(--c-green-500);color:#fff}
/* Legal bar: safety warning as a quiet callout, then copyright (left) and notices (right) */
.site-footer__bottom{display:grid;gap:1rem;padding-block:1.25rem 1.75rem;border-top:1px solid var(--color-border);font-size:var(--fs-xs);color:rgba(245,243,239,.62)}
.site-footer__bottom .site-footer__disclaimer{margin:0;padding:.7rem .9rem;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);background:rgba(255,255,255,.035);line-height:1.5}
.site-footer__bottom .site-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.6rem 2.5rem;max-width:none}
.site-footer__copy{margin:0;color:rgba(245,243,239,.78);font-weight:500}
/* one line only where it fits: the French copyright (≈ 380px) would widen the legal bar past a phone screen */
@media (min-width:640px){.site-footer__copy{white-space:nowrap}}
.site-footer__notes{display:grid;gap:.3rem;max-width:44rem}
.site-footer__notes p{margin:0;line-height:1.5}
@media (min-width:900px){.site-footer__notes{text-align:right}}
.site-footer__bottom ul{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:0;padding:0;list-style:none}
.site-footer__disclaimer{display:flex;align-items:center;gap:.5rem;color:rgba(245,243,239,.78);font-weight:500}
.site-footer__disclaimer .icon{color:var(--c-green-300)}

/* Newsletter form (footer + news page band) */
.newsletter-form{display:flex;flex-wrap:wrap;gap:.6rem;max-width:30rem}
.newsletter-form label:not(.sr-only):not(.check){flex-basis:100%;font:600 var(--fs-sm)/1.3 var(--font-display);color:var(--color-heading)}
.newsletter-form input[type="email"],.newsletter-form input[type="text"]{flex:1 1 12rem;min-width:0;height:3rem;padding:0 1rem;border-radius:var(--radius-sm);border:1px solid var(--color-border-strong);background:#fff;color:#231A10;transition:border-color var(--dur-2) ease,box-shadow var(--dur-2) ease}
.newsletter-form input:focus{outline:none;border-color:var(--c-green-700);box-shadow:var(--focus-ring-shadow)}
.newsletter-form input::placeholder{color:var(--c-taupe-600);opacity:1} /* explicit: browser defaults fall under 4.5:1 */
.newsletter-form .btn{flex:none;height:3rem}
.newsletter-form>p,.newsletter-form [data-form-status],.newsletter-form .check{flex-basis:100%}
:is(.site-footer,.section--brown,.on-dark) .newsletter-form input:not([type="checkbox"]){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:#fff}
:is(.site-footer,.section--brown,.on-dark) .newsletter-form input:not([type="checkbox"]):focus{border-color:var(--c-green-300);box-shadow:0 0 0 3px rgba(166,196,138,.35)}
:is(.site-footer,.section--brown,.on-dark) .newsletter-form input::placeholder{color:rgba(245,243,239,.6)}

/* == 10. FLAGS — pure CSS (official flag colours are the only non-brand colours), flat, 2px corners == */
.flag{position:relative;display:inline-block;flex:none;width:1.5em;height:1em;overflow:hidden;vertical-align:-.15em;border-radius:var(--radius-xs);background:var(--c-cream-300);box-shadow:inset 0 0 0 1px rgba(31,22,11,.14)}
.flag::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(31,22,11,.12);pointer-events:none}
.flag--ci{background:linear-gradient(90deg,#F77F00 0 33.34%,#FFFFFF 33.34% 66.67%,#009E60 66.67%)}
.flag--gh{background:linear-gradient(180deg,#CE1126 0 33.34%,#FCD116 33.34% 66.67%,#006B3F 66.67%)}
.flag--ng{background:linear-gradient(90deg,#008751 0 33.34%,#FFFFFF 33.34% 66.67%,#008751 66.67%)}
.flag--cm{background:linear-gradient(90deg,#007A5E 0 33.34%,#CE1126 33.34% 66.67%,#FCD116 66.67%)}
.flag--ug{background:linear-gradient(180deg,#000 0 16.67%,#FCDC04 16.67% 33.34%,#D90000 33.34% 50%,#000 50% 66.67%,#FCDC04 66.67% 83.34%,#D90000 83.34%)}
/* Tanzania: the 50 % line of a "to bottom right" gradient is the lower-left -> upper-right diagonal; band widths of
   the official 72×48 drawing (black 13, yellow 3 + 3) measured across it (gradient line 79.88) */
.flag--tz{background:linear-gradient(to bottom right,#1EB53A 0 38.11%,#FCD116 38.11% 41.86%,#000 41.86% 58.14%,#FCD116 58.14% 61.89%,#00A3DD 61.89%)}
.flag--gh::after,.flag--cm::after{content:"";position:absolute;left:50%;top:50%;width:var(--star,28%);aspect-ratio:1;translate:-50% -50%;clip-path:polygon(50% 0,61.23% 34.55%,97.55% 34.55%,68.16% 55.9%,79.39% 90.45%,50% 69.1%,20.61% 90.45%,31.84% 55.9%,2.45% 34.55%,38.77% 34.55%)}
.flag--gh::after{--star:23%;background:#000}
.flag--cm::after{--star:17.6%;background:#FCD116}
/* Uganda: white disc (official r = 93.5 on a 600-high flag) with a simplified crowned crane facing the hoist:
   yellow-and-red crown, black head and neck, grey body, red tail, black leg */
.flag--ug::after{content:"";position:absolute;left:50%;top:50%;width:20.8%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(ellipse 9% 6% at 47% 11%,#FCDC04 98%,#0000),radial-gradient(ellipse 7% 4% at 46% 16%,#D90000 98%,#0000),radial-gradient(ellipse 8% 7% at 41% 23%,#000 98%,#0000),linear-gradient(#000 0 0) 46% 36%/6% 26% no-repeat,radial-gradient(ellipse 20% 13% at 56% 57%,#9CA69C 98%,#0000),radial-gradient(ellipse 10% 9% at 73% 60%,#D90000 98%,#0000),linear-gradient(#000 0 0) 52% 92%/4% 24% no-repeat,#FFFFFF}
.flag--lg{width:2.25em;height:1.5em}
.flag--xl{width:3.6em;height:2.4em}

/* == 11. PRINT == */
@media print{
  .topbar,.nav-toggle,.main-nav,.scroll-progress,.back-to-top,.skip-link,.newsletter-form{display:none!important}
  .site-header{position:static}
  body{background:#fff;color:#000}
  .js [data-reveal]{opacity:1!important}
}
@media (forced-colors:active){.flag{forced-color-adjust:none}}

/* == 12. DEPRECATED ALIASES (design v1) — compatibility only ==
   Kept so markup and stylesheets that are not migrated yet keep rendering. Never reference these names in new
   CSS or markup. Gold / caramel map to lightness-matched greens or browns of the v2 palette (no gold anywhere). */
/* deprecated-aliases:start */
:root{
  --c-gold-100:var(--c-green-50);
  --c-gold-200:var(--c-green-100);
  --c-gold-300:var(--c-green-300);
  --c-gold-400:var(--c-green-500);
  --c-gold-500:var(--c-green-600);
  --c-caramel-300:var(--c-green-700);
  --c-caramel-400:var(--c-brown-600);
  --grad-gold:var(--grad-leaf);
  --grad-pill:var(--grad-brand);
  --grad-earth:var(--grad-land);
  --grad-pill-text:linear-gradient(90deg,var(--c-brown-800),var(--c-brown-800));
  --grad-gold-text:linear-gradient(90deg,var(--c-green-300),var(--c-green-300));
  --text-gradient:linear-gradient(90deg,var(--c-green-800),var(--c-green-800));
  --shadow-glow:var(--shadow-md);
  --ease-spring:var(--ease-out);          /* no overshoot any more */
  --radius-pill:4px;                      /* pills are gone */
  --color-surface-2:var(--color-surface-alt);
}
.site-footer__wave{display:none}                     /* v1 wave retired; the element may stay in old markup */
.flag--round{width:1.5em;height:1em}                 /* round flags are gone: standard 3:2 flag */
.text-gradient.anim-gradient-pan{animation:none}     /* nothing left to pan on solid text */
/* deprecated-aliases:end */
.site-footer__contact a,.site-footer__contact span{overflow-wrap:anywhere}  /* long e-mail addresses never overflow narrow columns */