/* ============================================================
   HIND EXPORTERS — EDITORIAL CORPORATE DESIGN SYSTEM
   ============================================================
   A restrained, print-inspired identity for an international
   trading house. Flat ink-on-ivory, hairline rules, a single
   bronze accent, serif headlines over a clean sans UI.

   Deliberately avoided: vivid gradients, glassmorphism, heavy
   shadows, pill-shaped everything, decorative motion.

   Layout uses CSS logical properties throughout so that the
   Arabic RTL layout is a genuine mirror, not a patch.
   ============================================================ */

/* ============================================================
   1. TOKENS & COLOUR THEMES
   ============================================================
   All five palettes are drawn from the container-port photograph
   used in the hero: navy harbour water, cargo-crane yellow,
   container orange / red / green, and asphalt black.

   >>> TO CHANGE THE SITE COLOURS, DO NOT EDIT THIS FILE. <<<
   Open  js/theme-config.js  and change the single number there.
   ============================================================ */
:root {
    /* --- Type --- */
    --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Thai', 'Noto Sans SC',
               'Noto Sans Devanagari', 'Helvetica Neue', Arial, sans-serif;

    /* --- Measure: tight vertical rhythm so more fits on screen --- */
    --wrap: 1280px;
    --gutter: 1.15rem;
    --section-y: 2.75rem;
    --header-h: 62px;
    --ticker-h: 36px;

    /* --- Shared --- */
    --white:        #FFFFFF;
    --accent-4:     var(--accent-2);   /* 4th palette colour; themes may override */
    --on-ticker:    #FFFFFF;           /* fallback text colour on the ticker      */

    /* Ticker type colours. Default to white, which suits the dark ticker
       strips in themes 2-5; theme 1 overrides them for its yellow strip. */
    --tick-1-ink: #FFFFFF;
    --tick-2-ink: #FFFFFF;
    --tick-3-ink: #FFFFFF;
    --tick-4-ink: #FFFFFF;
    --wa:           #12A150;
    --wa-dark:      #0E8442;

    /* --- Geometry --- */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;

    /* --- Motion: one easing curve everywhere --- */
    --ease:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --t-fast: 0.18s var(--ease-out);
    --t:      0.34s var(--ease);
    --t-slow: 0.6s  var(--ease);

    /* --- Layers --- */
    --z-header: 900;
    --z-tabbar: 910;
    --z-float: 920;
    --z-drawer: 950;
    --z-lightbox: 980;
}

/* ============================================================
   COLOUR ROLES
   ------------------------------------------------------------
   Each theme paints four SOLID surfaces rather than multi-hue
   gradients. Solid blocks read as one deliberate colour system;
   gradients that travelled across three hues made the page feel
   scattered and left the CTA band indistinguishable from the
   footer. Each band now has its own job:

     --surface-hero    inner-page hero        (primary brand tone)
     --surface-ticker  the marquee strip      (warm accent tone)
     --surface-cta     "talk to us" band      (secondary tone)
     --surface-footer  footer                 (deepest tone)

   They step darker from hero to footer, so the page has an
   obvious rhythm and no two adjacent bands share a colour.
   ============================================================ */

/* ============================================================
   OPTION 1 — OCEAN   the four supplied brand colours
   ------------------------------------------------------------
     #03AED2  bright cyan     #F8DE22  yellow
     #F45B26  orange          #D12052  crimson

   The two dark surfaces (hero, footer) are deeper shades of the
   cyan, so "ocean blue" carries the structure while all four
   supplied colours do the work in the light sections.

   Note the ticker: white on #03AED2 is only about 2.4:1, so that
   strip uses deep ocean text instead (--on-ticker).
   ============================================================ */
:root,
[data-theme="theme-1"] {
    --ink:          #013A4A;   /* deepest ocean         */
    --ink-rgb:      1 58 74;   /* --ink as channels; used by the hero scrim fallback */
    --ink-2:        #025E75;
    --ink-3:        #037E99;

    --accent:       #D12052;   /* crimson  - buttons, links   */
    --accent-2:     #03AED2;   /* cyan     - labels, import   */
    --accent-3:     #F8DE22;   /* yellow   - highlights       */
    --accent-4:     #F45B26;   /* orange   - export, icons    */
    --accent-soft:  #FCE3EA;
    --on-accent:    #FFFFFF;

    /* Tinted paper, never pure white. */
    --paper:        #F2FAFC;
    --paper-2:      #DFF3F8;
    --paper-3:      #C4E7F0;

    --text:         #06303D;
    --text-muted:   #456D7B;
    --text-faint:   #7BA2AF;
    --text-invert:  #F2FAFC;

    --line:         #CCE7EF;
    --line-strong:  #9FD3E2;
    --line-invert:  rgba(242, 250, 252, 0.2);
    --focus:        #D12052;

    --surface-hero:   #025E75;   /* deep ocean    */
    --surface-ticker: #F8DE22;   /* yellow strip  */
    --surface-cta:    #D12052;   /* crimson       */
    --surface-footer: #013A4A;   /* deepest ocean */
    --on-ticker:      #013A4A;
    --glow:           rgba(3, 174, 210, 0.3);

    /* The marquee cycles all four brand colours. Cyan and yellow are
       too light for white type, so those two segments take deep ocean
       text; orange and crimson keep white. */
    --tick-1-ink: #013A4A;   /* deep ocean  */
    --tick-2-ink: #D12052;   /* crimson     */
    --tick-3-ink: #B8410F;   /* deep orange - #F45B26 is too light on yellow */
    --tick-4-ink: #026E85;   /* deep teal   - #03AED2 is too light on yellow */
}

/* ============================================================
   OPTION 2 — HARBOUR   deep navy · warm gold · steel blue
   The quiet, premium alternative.
   ============================================================ */
[data-theme="theme-2"] {
    --ink:          #0B2239;   /* deep navy           */
    --ink-rgb:      11 34 57;
    --ink-2:        #143A5C;
    --ink-3:        #1F5A8A;
    --accent:       #C08A2E;   /* warm gold           */
    --accent-2:     #1F6F8B;   /* steel blue          */
    --accent-3:     #D9A441;
    --accent-soft:  #F5E9D2;
    --on-accent:    #FFFFFF;

    --paper:        #FBFAF8;
    --paper-2:      #F2EFE9;
    --paper-3:      #E3DED3;

    --text:         #10243A;
    --text-muted:   #4F6379;
    --text-faint:   #8393A5;
    --text-invert:  #F8FAFC;

    --line:         #E5E1D8;
    --line-strong:  #C7C0B0;
    --line-invert:  rgba(248, 250, 252, 0.2);
    --focus:        #C08A2E;

    --surface-hero:   #0B2239;
    --surface-ticker: #1F6F8B;
    --surface-cta:    #143A5C;
    --surface-footer: #071726;
    --glow:           rgba(192, 138, 46, 0.26);
}

/* ============================================================
   OPTION 3 — TERMINAL   dock teal · container green · orange
   ============================================================ */
[data-theme="theme-3"] {
    --ink:          #07332F;
    --ink-rgb:      7 51 47;
    --ink-2:        #0D4F47;
    --ink-3:        #0E6B63;
    --accent:       #E8641C;
    --accent-2:     #1B7F4B;
    --accent-3:     #2FA8A0;
    --accent-soft:  #D6F0E6;
    --on-accent:    #FFFFFF;

    --paper:        #F7FBFA;
    --paper-2:      #EAF5F1;
    --paper-3:      #D4E9E1;

    --text:         #0E2F2B;
    --text-muted:   #4B6A65;
    --text-faint:   #7D9A94;
    --text-invert:  #F2FBF9;

    --line:         #DAEAE5;
    --line-strong:  #B2D3CA;
    --line-invert:  rgba(242, 251, 249, 0.2);
    --focus:        #E8641C;

    --surface-hero:   #0E6B63;
    --surface-ticker: #E8641C;
    --surface-cta:    #1B7F4B;
    --surface-footer: #07332F;
    --glow:           rgba(14, 107, 99, 0.26);
}

/* ============================================================
   OPTION 4 — SUNRISE   golden-hour orange · amber · deep blue
   ============================================================ */
[data-theme="theme-4"] {
    --ink:          #10344E;
    --ink-rgb:      16 52 78;
    --ink-2:        #17496C;
    --ink-3:        #1B6FA8;
    --accent:       #E8641C;
    --accent-2:     #F2A007;
    --accent-3:     #38A3D1;
    --accent-soft:  #FDE7D4;
    --on-accent:    #FFFFFF;

    --paper:        #FDFAF7;
    --paper-2:      #F8EFE6;
    --paper-3:      #EEDCC9;

    --text:         #2A2318;
    --text-muted:   #6B5C4E;
    --text-faint:   #9B8C7C;
    --text-invert:  #FFF8F1;

    --line:         #EFE1D2;
    --line-strong:  #D9C2A6;
    --line-invert:  rgba(255, 248, 241, 0.22);
    --focus:        #E8641C;

    --surface-hero:   #1B6FA8;
    --surface-ticker: #E8641C;
    --surface-cta:    #C2410C;
    --surface-footer: #10344E;
    --glow:           rgba(27, 111, 168, 0.26);
}

/* ============================================================
   OPTION 5 — STEEL   slate · signal red · crane yellow
   ============================================================ */
[data-theme="theme-5"] {
    --ink:          #1F2A36;
    --ink-rgb:      31 42 54;
    --ink-2:        #2C3B4B;
    --ink-3:        #3F566E;
    --accent:       #C0392B;
    --accent-2:     #F2B705;
    --accent-3:     #4E7FA8;
    --accent-soft:  #F7DEDA;
    --on-accent:    #FFFFFF;

    --paper:        #F9FAFB;
    --paper-2:      #EDF1F5;
    --paper-3:      #DCE3EA;

    --text:         #1C2630;
    --text-muted:   #55626E;
    --text-faint:   #85919D;
    --text-invert:  #F6F8FA;

    --line:         #E0E6EB;
    --line-strong:  #C0C9D3;
    --line-invert:  rgba(246, 248, 250, 0.2);
    --focus:        #C0392B;

    --surface-hero:   #3F566E;
    --surface-ticker: #C0392B;
    --surface-cta:    #8C2C21;
    --surface-footer: #1F2A36;
    --glow:           rgba(192, 57, 43, 0.24);
}

/* Legacy alias: some rules still reference --gold. */
:root { --gold: var(--accent); --gold-bright: var(--accent-2); --gold-pale: var(--accent-soft); }

@media (min-width: 768px) {
    :root { --gutter: 1.75rem; --section-y: 3.5rem; --header-h: 70px; --ticker-h: 40px; }
}

@media (min-width: 1200px) {
    :root { --wrap: 1360px; --section-y: 4rem; --header-h: 74px; --ticker-h: 42px; }
}

@media (min-width: 1600px) {
    :root { --wrap: 1480px; }
}


/* ============================================================
   2. LANGUAGE-SWITCH STATES
   ============================================================
   i18n-pending is set by an inline <head> script before first
   paint when a non-English language is stored, so the visitor
   never sees English text swap to their language. It is removed
   by i18n.js, by the CSS animation failsafe below, and by the
   window load handler - three independent releases, so the page
   can never stay hidden. */

html.i18n-pending body {
    visibility: hidden;
    animation: i18n-failsafe 0s linear 1.4s forwards;
}

@keyframes i18n-failsafe { to { visibility: visible; } }

html.i18n-switching body {
    opacity: 0.999;               /* keeps layout, avoids repaint flicker */
}

/* ============================================================
   3. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--ticker-h) + var(--header-h) + 12px);
}

body {
    font-family: var(--font-ui);
    padding-top: calc(var(--ticker-h) + var(--header-h));   /* fixed ticker + header */
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-bottom: 64px;         /* room for the mobile tab bar */
}

@media (min-width: 992px) {
    body { padding-bottom: 0; }
}

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

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

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.55rem, 3.1vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.125rem; }

p { text-wrap: pretty; }

.lede {
    font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
    line-height: 1.6;
    color: var(--text-muted);
}

.prose p + p { margin-top: 1.1rem; }
.prose p { color: var(--text-muted); }

/* Non-Latin scripts: the serif has no coverage, so use the UI
   stack for headings and let the script's own font take over. */
html[data-lang="ar"] h1, html[data-lang="ar"] h2,
html[data-lang="ar"] h3, html[data-lang="ar"] h4,
html[data-lang="zh"] h1, html[data-lang="zh"] h2,
html[data-lang="zh"] h3, html[data-lang="zh"] h4,
html[data-lang="th"] h1, html[data-lang="th"] h2,
html[data-lang="th"] h3, html[data-lang="th"] h4,
html[data-lang="ru"] h1, html[data-lang="ru"] h2,
html[data-lang="ru"] h3, html[data-lang="ru"] h4,
html[data-lang="hi"] h1, html[data-lang="hi"] h2,
html[data-lang="hi"] h3, html[data-lang="hi"] h4 {
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Arabic and Thai need a little more leading to breathe. */
html[data-lang="ar"] body,
html[data-lang="th"] body { line-height: 1.85; }

/* ============================================================
   5. LAYOUT PRIMITIVES
   ============================================================ */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--text-invert); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--text-invert); }
.section--ink p { color: rgba(247, 245, 240, 0.72); }

.rule { height: 1px; background: var(--line); border: 0; }

/* --- Eyebrow: the "01 — LABEL" editorial device --- */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.25rem;
}

.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line-strong);
    max-width: 88px;
}

.eyebrow__num {
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}

.section--ink .eyebrow { color: var(--gold-bright); }
.section--ink .eyebrow::after { background: var(--line-invert); }
.section--ink .eyebrow__num { color: rgba(247, 245, 240, 0.45); }

/* --- Section header --- */
.sec-head { max-width: 46rem; margin-bottom: 2.1rem; }
.sec-head p { margin-top: 0.9rem; color: var(--text-muted); font-size: 1.0625rem; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .eyebrow::after { display: none; }

/* --- Grid --- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .grid { gap: 2rem; }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Editorial split: asymmetric, not 50/50 --- */
.split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 992px) {
    .split { grid-template-columns: 1.08fr 0.92fr; gap: 4.5rem; }
    .split--reverse > *:first-child { order: 2; }
}

/* ============================================================
   6. BUTTONS & LINKS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.8rem 1.6rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), transform var(--t-fast);
}

.btn:active { transform: translateY(1px); }

.btn--ink { background: var(--ink); color: var(--text-invert); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink-3); border-color: var(--ink-3); }

.btn--gold { background: var(--gold); color: var(--white); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn--wa { background: var(--wa); color: var(--white); border-color: var(--wa); }
.btn--wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); }

.btn--line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: var(--text-invert); }

.btn--ghost-invert { background: transparent; color: var(--text-invert); border-color: var(--line-invert); }
.btn--ghost-invert:hover { background: var(--text-invert); color: var(--ink); border-color: var(--text-invert); }

.btn--sm { min-height: 40px; padding: 0.55rem 1.1rem; font-size: 0.75rem; }
.btn--full { width: 100%; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* --- Text link with a travelling arrow --- */
.tlink {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--line-strong);
    transition: color var(--t-fast), border-color var(--t-fast);
}

.tlink i { transition: transform var(--t-fast); font-size: 1em; }
.tlink:hover { color: var(--gold); border-color: var(--gold); }
.tlink:hover i { transform: translateX(3px); }

/* --- RTL: directional icons must point the other way ---------------
   A right-pointing arrow means "forward" in Latin scripts and
   "backward" in Arabic, so every horizontal arrow is flipped. The
   hover nudge is restated so it composes with the flip. */
html.is-rtl .bi-arrow-right,
html.is-rtl .bi-arrow-left,
html.is-rtl .bi-chevron-right,
html.is-rtl .bi-chevron-left { transform: scaleX(-1); }

html.is-rtl .tlink:hover i { transform: scaleX(-1) translateX(3px); }

/* ============================================================
   7. HEADER
   ============================================================ */
.site-header {
    position: fixed;
    inset-inline: 0;
    top: var(--ticker-h);          /* sits directly under the ticker */
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow var(--t), background var(--t), border-color var(--t);
}

/* A hairline of brand colour along the very top edge. */
.site-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: var(--accent);
    opacity: 0;
    transition: opacity var(--t);
}

.site-header.is-stuck {
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    box-shadow: 0 6px 24px -12px var(--glow), 0 1px 0 var(--line);
}

.site-header.is-stuck::after { opacity: 1; }

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-h);
}

/* --- Wordmark --- */
.brand {
    display: flex;
    flex-direction: column;
    line-height: 1;
    flex-shrink: 0;
}

.brand__name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

@media (min-width: 768px) { .brand__name { font-size: 1.5rem; } }

.brand__name em { font-style: normal; color: var(--gold); }

.brand__tag {
    margin-top: 5px;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* --- Desktop nav --- */
.nav { display: none; }

@media (min-width: 992px) {
    .nav { display: flex; align-items: center; gap: 2rem; }
}

.nav__link {
    position: relative;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-block: 0.5rem;
    transition: color var(--t-fast);
}

.nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--t);
}

.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ink); font-weight: 600; }

/* --- Header actions --- */
.header-actions { display: flex; align-items: center; gap: 0.5rem; }

@media (min-width: 992px) { .header-actions { gap: 0.9rem; } }

.header-actions .btn--wa { display: none; }

@media (min-width: 1100px) { .header-actions .btn--wa { display: inline-flex; } }

/* --- Language selector --- */
.lang { position: relative; }

.lang__toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ink);
    transition: border-color var(--t-fast);
}

.lang__toggle:hover { border-color: var(--line-strong); }
.lang__toggle i:first-child { font-size: 1rem; color: var(--gold); }
.lang__toggle i:last-child { font-size: 0.7rem; color: var(--text-faint); transition: transform var(--t-fast); }
.lang__toggle[aria-expanded="true"] i:last-child { transform: rotate(180deg); }

/* The label is hidden on small screens - the globe is enough. */
.lang__label { display: none; }

@media (min-width: 768px) { .lang__label { display: inline; } }

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 50;
    min-width: 232px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.4rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.lang-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    color: var(--text);
    text-align: start;
    transition: background var(--t-fast), color var(--t-fast);
}

.lang-option:hover { background: var(--paper-2); }

.lang-option.is-active { background: var(--ink); color: var(--text-invert); }
.lang-option.is-active .lang-option__code { color: var(--gold-bright); }

.lang-option__code {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* --- Burger --- */
.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    font-size: 1.25rem;
    color: var(--ink);
}

@media (min-width: 992px) { .burger { display: none; } }

/* ============================================================
   8. MOBILE DRAWER
   ============================================================ */
.drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: rgba(14, 27, 46, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t), visibility var(--t);
}

.drawer-scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--z-drawer);
    width: min(86vw, 360px);
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--text-invert);
    transform: translateX(100%);
    transition: transform var(--t);
    overflow-y: auto;
    overscroll-behavior: contain;
}

html.is-rtl .drawer { transform: translateX(-100%); }

.drawer.is-open { transform: translateX(0); }

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem var(--gutter);
    border-bottom: 1px solid var(--line-invert);
}

.drawer__head .brand__name { color: var(--text-invert); }
.drawer__head .brand__tag { color: rgba(247, 245, 240, 0.5); }

.drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-invert);
    border-radius: var(--r-sm);
    color: var(--text-invert);
    font-size: 1.1rem;
}

.drawer__nav { padding: 0.5rem var(--gutter) 1.5rem; }

.drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line-invert);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-invert);
    transition: color var(--t-fast), padding-inline-start var(--t-fast);
}

.drawer__link i { font-size: 0.85rem; color: rgba(247, 245, 240, 0.35); transition: color var(--t-fast); }

.drawer__link:hover,
.drawer__link.is-active { color: var(--gold-bright); padding-inline-start: 6px; }
.drawer__link:hover i, .drawer__link.is-active i { color: var(--gold-bright); }

.drawer__foot { margin-top: auto; padding: 1.5rem var(--gutter) 2rem; }

.drawer__contact {
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: rgba(247, 245, 240, 0.65);
}

.drawer__contact a { color: var(--text-invert); }

/* ============================================================
   9. HERO (homepage)
   ============================================================ */
.hero {
    position: relative;
    padding-block: 2rem 0;
    background: var(--paper);
    overflow: hidden;
}

@media (min-width: 992px) { .hero { padding-block: 3rem 0; } }

.hero__grid { display: grid; gap: 2.5rem; align-items: center; }

@media (min-width: 992px) {
    .hero__grid { grid-template-columns: 1.06fr 0.94fr; gap: 4rem; }
}

.hero__title {
    font-size: clamp(2rem, 4.4vw, 3.05rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.hero__title em { font-style: italic; color: var(--gold); }

.hero__lede {
    margin-top: 1.25rem;
    max-width: 34rem;
    font-size: clamp(1rem, 1.5vw, 1.0625rem);
    line-height: 1.65;
    color: var(--text-muted);
}

/* --- Hero credentials: hairline-separated, not chips --- */
.hero__marks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.hero__mark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
}

.hero__mark i { color: var(--gold); font-size: 0.9rem; }

/* --- Hero visual --- */
.hero__visual { position: relative; }

.hero__frame {
    position: relative;
    border: 1px solid var(--line);
    background: var(--white);
    padding: 0.5rem;
}

.hero__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-3);
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--t);
}

.hero__media img.is-shown { opacity: 1; }

/* --- Hero tabs: a quiet, typographic switcher --- */
.hero__tabs {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--line);
    margin-top: 0.5rem;
}

.hero__tab {
    flex: 1;
    padding: 0.85rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    border-top: 2px solid transparent;
    margin-top: -1px;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.hero__tab + .hero__tab { border-inline-start: 1px solid var(--line); }
.hero__tab:hover { color: var(--ink); }
.hero__tab.is-active { color: var(--ink); border-top-color: var(--gold); }

.hero__caption {
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero__caption i { color: var(--gold); }

/* --- Stats ribbon --- */
.stats {
    margin-top: 2.5rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper-2);
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
    padding: 1.15rem 0.75rem;
    text-align: center;
    border-inline-end: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.stat:nth-child(2n) { border-inline-end: 0; }

@media (min-width: 768px) {
    .stat { border-bottom: 0; padding-block: 1.5rem; }
    .stat:nth-child(2n) { border-inline-end: 1px solid var(--line); }
    .stat:last-child { border-inline-end: 0; }
}

.stat__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat__label {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* ============================================================
   10. PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
    position: relative;
    isolation: isolate;
    background: var(--surface-hero);
    color: var(--text-invert);
    padding-block: 2.6rem 2.4rem;
    overflow: hidden;
}

@media (min-width: 992px) { .page-hero { padding-block: 3.4rem 3rem; } }

/* A bright edge instead of a flat border. */
.page-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: var(--accent);
}

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

.page-hero h1 {
    color: var(--text-invert);
    max-width: none;
    text-wrap: nowrap;        /* one line wherever it fits */
}

/* Below the desktop breakpoint the longest titles cannot fit on one line,
   so let them wrap and balance instead of overflowing. */
@media (max-width: 991px) {
    .page-hero h1 { text-wrap: balance; white-space: normal; }
}

.page-hero__lede {
    margin-top: 1.25rem;
    max-width: 44rem;
    font-size: clamp(1rem, 1.8vw, 1.1875rem);
    color: rgba(247, 245, 240, 0.72);
}

.page-hero .eyebrow { color: var(--gold-bright); }
.page-hero .eyebrow::after { background: var(--line-invert); }

/* --- Breadcrumb --- */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(247, 245, 240, 0.5);
}

.crumbs a { color: rgba(247, 245, 240, 0.75); transition: color var(--t-fast); }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; color: rgba(247, 245, 240, 0.3); }
.crumbs [aria-current="page"] { color: var(--text-invert); }

/* ============================================================
   11. CARDS
   ============================================================ */

/* --- Product card --- */
.pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    transition: border-color var(--t), transform var(--t);
}

.pcard:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.pcard__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-3);
}

.pcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.pcard:hover .pcard__media img { transform: scale(1.045); }

.pcard__tag {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    padding: 0.35rem 0.7rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
}

.pcard__tag--export { background: var(--ink); }
.pcard__tag--import { background: var(--gold); }

.pcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.4rem;
}

.pcard__cat {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

.pcard__title {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.25;
}

.pcard__text {
    margin-top: 0.7rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.pcard__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: auto;
    padding-top: 1.25rem;
}

.pcard__wa {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wa);
    transition: color var(--t-fast);
}

.pcard__wa:hover { color: var(--wa-dark); }

/* --- Division block (import / export) --- */
.division {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--ink);
}

.division--import { border-top-color: var(--gold); }

@media (min-width: 768px) { .division { padding: 2.75rem; } }

.division__num {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--paper-3);
}

.division h3 { margin-top: 1rem; font-size: clamp(1.5rem, 3vw, 1.9rem); }
.division p { margin-top: 0.9rem; color: var(--text-muted); }

.division__list { margin-top: 1.5rem; }

.division__list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    color: var(--text);
}

.division__list i { color: var(--gold); font-size: 0.85rem; }

.division .tlink { margin-top: 1.75rem; align-self: flex-start; }

/* --- Value card (why us / capabilities) --- */
.vcard {
    height: 100%;
    padding: 1.75rem;
    background: var(--white);
    border: 1px solid var(--line);
    transition: border-color var(--t);
}

.vcard:hover { border-color: var(--gold); }

.vcard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-size: 1.15rem;
    color: var(--gold);
    margin-bottom: 1.25rem;
}

.vcard h3 { font-size: 1.1875rem; }
.vcard p { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--text-muted); }

/* --- Numbered strength row --- */
.strength {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line);
}

.strength__num {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

.strength h4 { font-family: var(--font-display); font-size: 1.1875rem; }
.strength p { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--text-muted); }

/* --- Region card --- */
.region {
    height: 100%;
    padding: 1.6rem;
    background: var(--white);
    border: 1px solid var(--line);
    transition: border-color var(--t);
}

.region:hover { border-color: var(--line-strong); }

.region__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
}

.region__title { font-size: 1.1875rem; }

.region__count {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.region__countries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}

.chip {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.region__note { margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted); }

/* ============================================================
   12. GALLERY & LIGHTBOX
   ============================================================ */
.gal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}

.gal-filter {
    min-height: 40px;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: all var(--t-fast);
}

.gal-filter:hover { border-color: var(--line-strong); color: var(--ink); }
.gal-filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--text-invert); }

.gal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) { .gal-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1200px) { .gal-grid { grid-template-columns: repeat(4, 1fr); } }

.gal-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--paper-3);
    border: 1px solid var(--line);
    cursor: zoom-in;
}

.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gal-item:hover img { transform: scale(1.06); }

.gal-item__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0.9rem;
    background: linear-gradient(to top, rgba(14, 27, 46, 0.78), rgba(14, 27, 46, 0) 55%);
    opacity: 0;
    transition: opacity var(--t);
}

.gal-item:hover .gal-item__veil { opacity: 1; }

.gal-item__veil span {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-invert);
}

.gal-item.is-hidden { display: none; }

/* --- Lightbox --- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: var(--gutter);
    background: rgba(10, 18, 30, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t), visibility var(--t);
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox img {
    max-width: min(1100px, 92vw);
    max-height: 78vh;
    object-fit: contain;
    border: 1px solid var(--line-invert);
}

.lightbox__caption { color: rgba(247, 245, 240, 0.8); font-size: 0.875rem; text-align: center; }

.lightbox__close {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-invert);
    border-radius: var(--r-sm);
    color: var(--text-invert);
    font-size: 1.2rem;
}

.lightbox__close:hover { background: var(--text-invert); color: var(--ink); }

/* ============================================================
   13. PRODUCT DETAIL
   ============================================================ */
.pd-grid { display: grid; gap: 2.5rem; }

@media (min-width: 992px) { .pd-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

.pd-media { border: 1px solid var(--line); background: var(--white); padding: 0.5rem; }
.pd-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.pd-title { margin-top: 0.75rem; font-size: clamp(1.65rem, 3.2vw, 2.25rem); }
.pd-summary { margin-top: 1.25rem; font-size: 1.0625rem; color: var(--text-muted); }

.pd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.pd-badge {
    padding: 0.35rem 0.7rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
}

.pd-badge--export { background: var(--ink); }
.pd-badge--import { background: var(--gold); }

.pd-cat {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.specs { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }

.specs th, .specs td {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    text-align: start;
    vertical-align: top;
}

.specs th { width: 42%; font-weight: 600; color: var(--ink); }
.specs td { color: var(--text-muted); }

.enquiry-box {
    padding: 1.75rem;
    background: var(--paper-2);
    border: 1px solid var(--line);
}

.enquiry-box h3 { font-size: 1.25rem; }
.enquiry-box p { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--text-muted); }
.enquiry-box .btn { margin-top: 1rem; }

.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1rem; }
.pd-thumbs img { aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--line); cursor: zoom-in; }

/* ============================================================
   14. CONTACT
   ============================================================ */
.contact-list { margin-top: 2rem; border-top: 1px solid var(--line); }

.contact-row {
    display: flex;
    gap: 1.25rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--line);
}

.contact-row__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--gold);
    font-size: 1.05rem;
}

.contact-row__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.contact-row__value {
    margin-top: 0.3rem;
    font-size: 1.0625rem;
    color: var(--ink);
    font-weight: 500;
    overflow-wrap: anywhere;
}

a.contact-row__value:hover { color: var(--gold); }

.map {
    border: 1px solid var(--line);
    background: var(--paper-3);
    line-height: 0;
}

.map iframe { width: 100%; height: 380px; border: 0; }

@media (min-width: 992px) { .map iframe { height: 460px; } }

/* ============================================================
   15. CTA BAND
   ============================================================ */
.cta-band {
    background: var(--ink);
    color: var(--text-invert);
    padding-block: var(--section-y);
    border-top: 3px solid var(--gold);
}

.cta-band h2 { color: var(--text-invert); max-width: 30ch; }
.cta-band p { margin-top: 1rem; max-width: 46rem; color: rgba(247, 245, 240, 0.72); font-size: 1.0625rem; }

/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: rgba(247, 245, 240, 0.72); padding-block: 3.5rem 0; }

.footer-grid { display: grid; gap: 2.5rem; }

@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 3rem; } }

.site-footer .brand__name { color: var(--text-invert); }
.site-footer .brand__tag { color: rgba(247, 245, 240, 0.5); }

.footer-about { margin-top: 1.25rem; font-size: 0.9375rem; max-width: 34ch; }

.footer-head {
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 1.25rem;
}

.footer-links li + li { margin-top: 0.7rem; }

.footer-links a {
    font-size: 0.9375rem;
    color: rgba(247, 245, 240, 0.72);
    transition: color var(--t-fast);
    display: inline-flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.footer-links a:hover { color: var(--gold-bright); }
.footer-links i { font-size: 0.9rem; padding-top: 3px; color: rgba(247, 245, 240, 0.4); }

.footer-social { display: flex; gap: 0.5rem; margin-top: 1.5rem; }

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-invert);
    border-radius: var(--r-sm);
    color: rgba(247, 245, 240, 0.72);
    transition: all var(--t-fast);
}

.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }

.footer-bottom {
    margin-top: 3rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--line-invert);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(247, 245, 240, 0.5);
}

@media (min-width: 768px) {
    .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

.footer-bottom a { color: var(--gold-bright); }

/* ============================================================
   17. MOBILE TAB BAR
   ============================================================ */
.tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-tabbar);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--white);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 992px) { .tabbar { display: none; } }

.tabbar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 60px;
    padding: 0.4rem 0.2rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-faint);
    transition: color var(--t-fast);
}

.tabbar__link i { font-size: 1.15rem; }
.tabbar__link.is-active { color: var(--ink); }
.tabbar__link.is-active i { color: var(--gold); }
.tabbar__link--wa { color: var(--wa); }

/* ============================================================
   18. FLOATING WHATSAPP
   ============================================================ */
.wa-float {
    position: fixed;
    inset-inline-end: 1rem;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-float);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--wa);
    color: var(--white);
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(18, 140, 75, 0.35);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--t), transform var(--t), background var(--t-fast);
}

.wa-float.is-shown { opacity: 1; transform: scale(1); }
.wa-float:hover { background: var(--wa-dark); }

@media (min-width: 992px) {
    .wa-float { inset-inline-end: 1.75rem; bottom: 1.75rem; width: 58px; height: 58px; font-size: 1.65rem; }
}

/* ============================================================
   19. BACK TO TOP
   ============================================================ */
.to-top {
    position: fixed;
    inset-inline-start: 1rem;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-float);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t), visibility var(--t);
}

.to-top.is-shown { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--ink); color: var(--text-invert); border-color: var(--ink); }

@media (min-width: 992px) { .to-top { inset-inline-start: 1.75rem; bottom: 1.75rem; } }

/* ============================================================
   20. REVEAL ANIMATION
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* ============================================================
   21. UTILITIES
   ============================================================ */
.u-center { text-align: center; }
.u-mt-lg { margin-top: 3rem; }
.u-hide { display: none !important; }

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: var(--text-invert);
    font-size: 0.875rem;
}

.skip-link:focus { inset-inline-start: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   22. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    /* The failsafe must still fire, so restate it outside the blanket rule. */
    html.i18n-pending body { animation: i18n-failsafe 0s linear 1.4s forwards !important; }
}

/* ============================================================
   23. PRINT
   ============================================================ */
@media print {
    .site-header, .tabbar, .wa-float, .to-top, .drawer, .drawer-scrim, .cta-band { display: none !important; }
    body { padding: 0; background: #fff; }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   24. DECORATIVE PATTERNS
   ============================================================
   Cheap, GPU-friendly layers behind the heroes: soft colour blobs
   for depth and a fine dot grid for texture. Pure CSS gradients,
   so there is no extra network request.
   ============================================================ */
.hero {
    position: relative;
    isolation: isolate;
}

.hero::before,
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Dot grid + glow over the painted page heroes. */
.page-hero::before {
    background-image:
        /* keeps the headline legible over the brightest palettes */
        linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, transparent 60%),
        radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.14) 0%, transparent 46%),
        radial-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 22px 22px;
}

/* Soft colour wash behind the homepage hero. */
.hero::before {
    background-image:
        radial-gradient(60% 55% at 12% 8%,  color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 70%),
        radial-gradient(52% 48% at 92% 18%, color-mix(in srgb, var(--accent-2) 38%, transparent) 0%, transparent 72%),
        radial-gradient(46% 44% at 72% 92%, color-mix(in srgb, var(--accent-3) 34%, transparent) 0%, transparent 70%);
    /* a very slow drift keeps it alive without being distracting */
    animation: wash 26s var(--ease) infinite alternate;
}

@keyframes wash {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(0, -1.4%, 0) scale(1.05); }
}

/* Faint grid texture on alternate sections. */
.section--paper2 {
    position: relative;
    isolation: isolate;
}

.section--paper2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--line-strong) 45%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--line-strong) 45%, transparent) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
    mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
    opacity: 0.5;
}

/* ============================================================
   25. TICKER
   ============================================================
   A seamless marquee: the same track rendered twice inside a
   viewport translated by exactly -50%, so the loop has no seam.
   Only `transform` animates, so it stays on the compositor.
   ============================================================ */
.ticker {
    position: relative;
    overflow: hidden;
    background: var(--surface-ticker);
    border-block: 1px solid rgba(0, 0, 0, 0.16);
}

.ticker__viewport {
    display: flex;
    width: max-content;
    animation: ticker-scroll 46s linear infinite;
    will-change: transform;
}

.ticker:hover .ticker__viewport,
.ticker:focus-within .ticker__viewport { animation-play-state: paused; }

@keyframes ticker-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* RTL reads the other way, so the marquee does too. */
html.is-rtl .ticker__viewport { animation-direction: reverse; }

.ticker__track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    /* Contiguous blocks: symmetric padding and no gap, so the colours
       butt up against each other instead of floating on a base colour. */
    padding-block: 0.62rem;
    padding-inline: 1.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--on-ticker);
}


.ticker__item i {
    font-size: 0.72rem;
    color: inherit;
    opacity: 0.7;
}

@media (min-width: 768px) {
    .ticker__item { font-size: 0.82rem; padding-block: 0.72rem; }
}

/* ============================================================
   27. MOTION POLISH
   ============================================================
   Reveals animate transform + opacity only, on a long ease-out so
   they settle rather than stop. Stagger comes from transition
   delays, not separate animations.
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
    will-change: transform, opacity;
}

.reveal.is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

.reveal-d1 { transition-delay: 0.07s; }
.reveal-d2 { transition-delay: 0.14s; }
.reveal-d3 { transition-delay: 0.21s; }

/* Buttons and cards lift slightly on hover. */
.btn {
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
                transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px var(--glow); }
.btn:active { transform: translateY(0); }

.btn--ink { background: var(--ink); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink-3); border-color: var(--ink-3); }
.btn--gold { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--gold:hover { background: var(--accent-2); border-color: var(--accent-2); }

.pcard { transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.pcard:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 22px 40px -26px var(--glow);
}

.vcard { transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.vcard:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 18px 34px -24px var(--glow);
}

.region:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* Accent-tinted card icons. */
.vcard__icon {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
}

/* Division blocks pick up the palette. */
.division { border-top-color: var(--accent); }
.division--import { border-top-color: var(--accent-2); }
.division__num {
    color: var(--accent);
    opacity: 0.55;
}

/* Product badges use the two accents. */
.pcard__tag--export, .pd-badge--export { background: var(--accent); }
.pcard__tag--import, .pd-badge--import { background: var(--accent-2); }

/* CTA band and footer become painted panels. */
.cta-band {
    position: relative;
    isolation: isolate;
    background: var(--surface-cta);
    border-top: 0;
    overflow: hidden;
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, transparent 65%),
        radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
    background-size: 100% 100%, 24px 24px;
    -webkit-mask-image: radial-gradient(80% 70% at 30% 50%, #000, transparent 75%);
    mask-image: radial-gradient(80% 70% at 30% 50%, #000, transparent 75%);
}

.site-footer { background: var(--surface-footer); }

/* The hero headline accent follows the palette. */
.hero__title em {
    color: var(--accent);
    font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
    .ticker__viewport,
    .ticker,
    .page-hero::after,
    .hero::before { animation: none; }
    .btn:hover, .pcard:hover, .vcard:hover { transform: none; }
}

/* The page hero is now a saturated gradient, so the eyebrow needs to
   be white rather than accent-coloured to stay legible on it. */
.page-hero .eyebrow { color: rgba(255, 255, 255, 0.92); }
.page-hero .eyebrow::after { background: rgba(255, 255, 255, 0.38); }
.page-hero .eyebrow__num { color: rgba(255, 255, 255, 0.6); }
.page-hero__lede { color: rgba(255, 255, 255, 0.86); }
.cta-band .eyebrow { color: rgba(255, 255, 255, 0.92); }
.cta-band .eyebrow::after { background: rgba(255, 255, 255, 0.38); }
.cta-band .eyebrow__num { color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   28. SMALL-SCREEN HERO ACTIONS
   ============================================================
   The two hero CTAs sit side by side on phones rather than
   stacking. They share the row equally, and the type tightens
   just enough for both to fit at 360px without truncating.
   ============================================================ */
@media (max-width: 575px) {
    .hero .btn-row {
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .hero .btn-row .btn {
        flex: 1 1 0;
        min-width: 0;            /* lets the flex item shrink below its text width */
        padding-inline: 0.65rem;
        gap: 0.35rem;
        font-size: 0.68rem;
        letter-spacing: 0.02em;
    }

    /* The arrow is decorative; dropping it buys the label the room it needs. */
    .hero .btn-row .btn .bi-arrow-right { display: none; }

    .hero .btn-row .btn i { font-size: 0.95em; }
}

/* ============================================================
   29. FOOTER & PAINTED PANELS — THEME-SAFE COLOURS
   ============================================================
   The footer and CTA band are solid surfaces now. Two problems had
   to be solved for the text sitting on them:

     1. Headings and links were painted with --accent / --accent-2.
        An orange heading on a green band (or a red one on blue)
        clashes, and it changed character with every theme.
     2. White text is fine over the dark end of the gradient but
        drops to roughly 2:1 contrast over the bright end, where
        the contact column sits.

   Both are fixed the same way: an even scrim behind the content so
   the band stays colourful but never too light, and text painted in
   white at varying opacities rather than in an accent colour. White
   harmonises with all five palettes, so nothing needs per-theme
   tuning here.
   ============================================================ */

.site-footer {
    position: relative;
    isolation: isolate;
    color: rgba(255, 255, 255, 0.8);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 55%);
}

/* --- Wordmark --- */
.site-footer .brand__name { color: #fff; }
.site-footer .brand__name em { color: rgba(255, 255, 255, 0.66); }
.site-footer .brand__tag { color: rgba(255, 255, 255, 0.55); }
.site-footer .footer-about { color: rgba(255, 255, 255, 0.76); }

/* --- Column headings: white, with a short accent rule so the
       palette still shows without colouring the type itself. --- */
.site-footer .footer-head {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.site-footer .footer-head::after {
    content: "";
    flex: 1;
    max-width: 34px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.45);
}

/* --- Links --- */
.site-footer .footer-links a { color: rgba(255, 255, 255, 0.78); }
.site-footer .footer-links a:hover { color: #fff; }
.site-footer .footer-links i { color: rgba(255, 255, 255, 0.5); }

/* --- Social --- */
.site-footer .footer-social a {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.82);
}

.site-footer .footer-social a:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}

/* --- Bottom bar --- */
.site-footer .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.62);
}

.site-footer .footer-bottom a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    transition: text-decoration-color var(--t-fast);
}

.site-footer .footer-bottom a:hover { text-decoration-color: #fff; }

/* --- The CTA band shares the same gradient, so give it the same
       treatment for its links. --- */
.cta-band .btn--ghost-invert {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.cta-band .btn--ghost-invert:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}

/* ============================================================
   30. INNER-PAGE HERO — CENTRED
   ============================================================
   Only the inner pages centre their hero. The homepage keeps its
   asymmetric two-column layout, where the copy has to stay left
   because it sits beside the product image.
   ============================================================ */
.page-hero { text-align: center; }

.page-hero .eyebrow { justify-content: center; }
.page-hero .eyebrow::after { display: none; }

.page-hero h1 { margin-inline: auto; }
.page-hero__lede { margin-inline: auto; }
.page-hero .crumbs { justify-content: center; }

/* The CTA band is centred too, so it reads as a deliberate
   full-width statement rather than a second footer. */
.cta-band { text-align: center; }
.cta-band h2 { margin-inline: auto; }
.cta-band p { margin-inline: auto; }
.cta-band .eyebrow { justify-content: center; }
.cta-band .eyebrow::after { display: none; }
.cta-band .btn-row { justify-content: center; }

/* ============================================================
   31. VIVID LIGHT SURFACES
   ============================================================
   The dark bands carried all the colour and the sections between
   them were plain white, so the page filmed as a white screen.
   Everything here puts colour back into the light areas: tinted
   panels, coloured card edges, filled badges and chips, accent
   icons. All of it is driven by the theme tokens, so it follows
   whichever palette is selected.
   ============================================================ */

/* --- Stats ribbon: a tinted band, accent numerals --- */
.stats { background: var(--paper-2); border-color: var(--line-strong); }
.stat { border-color: var(--line-strong); }
.stat__num { color: var(--accent); }
.stat__label { color: var(--ink-3); }

/* --- Section headings pick up the palette --- */
.sec-head h2, .split h2 { color: var(--ink); }
.eyebrow__num { color: var(--accent-2); }

/* --- Product cards: white panel, coloured top edge and footer --- */
.pcard {
    background: #fff;
    border-color: var(--line);
    border-top: 3px solid var(--accent-4);   /* orange */
}

.pcard--import { border-top-color: var(--accent-2); }

.pcard__cat { color: var(--accent-4); }
.pcard__title a { color: var(--ink); }

.pcard__foot {
    border-top: 1px solid var(--line);
    margin-top: auto;
    padding-top: 1rem;
}

/* --- Badges: solid fills, not outlines --- */
.pcard__tag, .pd-badge {
    border-radius: 0 0 var(--r-sm) 0;
    letter-spacing: 0.1em;
}

/* --- Value cards: tinted panel with an accent icon chip --- */
.vcard {
    background: #fff;
    border-color: var(--line);
    border-top: 3px solid var(--accent-2);   /* cyan */
}

.vcard__icon {
    background: var(--accent-soft);
    color: var(--accent);
    border: 0;
    border-radius: var(--r-sm);
}

.vcard h3 { color: var(--ink); }

/* --- Region cards --- */
.region {
    background: #fff;
    border-color: var(--line);
    border-top: 3px solid var(--accent-3);   /* yellow */
}

.region__title { color: var(--ink); }
.region__count { color: var(--accent); }

/* --- Country chips: filled, not outlined --- */
.chip {
    background: var(--paper-2);
    border-color: var(--line-strong);
    color: var(--ink-3);
    font-weight: 600;
}

/* --- Division blocks --- */
.division { background: #fff; }
.division h3 { color: var(--ink); }
.division__list i { color: var(--accent-4); }

/* --- Numbered strengths --- */
.strength__num { color: var(--accent); }
.strength h4 { color: var(--ink); }

/* --- Contact rows --- */
.contact-row__icon {
    background: var(--accent-soft);
    color: var(--accent);
    border: 0;
}

.contact-row__label { color: var(--accent-2); }
.contact-row__value { color: var(--ink); }

/* --- Gallery --- */
.gal-item { border-color: var(--line); }

.gal-filter {
    background: #fff;
    border-color: var(--line-strong);
    color: var(--ink-3);
}

.gal-filter:hover { border-color: var(--accent); color: var(--accent); }

.gal-filter.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* --- Product detail --- */
.specs th { color: var(--ink); }
.specs tr:nth-child(odd) td,
.specs tr:nth-child(odd) th { background: var(--paper-2); }
.specs th, .specs td { padding-inline: 0.75rem; border-color: var(--line); }

.pd-media { border-color: var(--line); background: #fff; }
.pd-cat { color: var(--accent-2); }

.enquiry-box {
    background: var(--paper-2);
    border: 1px solid var(--line-strong);
    border-top: 3px solid var(--accent);
}

.enquiry-box h3 { color: var(--ink); }

/* --- Map frame --- */
.map { border: 1px solid var(--line-strong); }

/* --- Hero framing on the homepage --- */
.hero__frame { border-color: var(--line-strong); background: #fff; }
.hero__tab.is-active { border-top-color: var(--accent); color: var(--ink); }
.hero__caption i { color: var(--accent); }
.hero__mark i { color: var(--accent); }
.hero__marks { border-top-color: var(--line-strong); }

/* --- Section rhythm: alternate tinted and plain so the page has
       visible bands of colour rather than one flat white run. --- */
.section--paper2 { background: var(--paper-2); }

.section--paper2::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--ink-3) 14%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink-3) 14%, transparent) 1px, transparent 1px);
}

/* --- Outline buttons get colour rather than grey --- */
.btn--line {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}

.btn--line:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* --- Text links --- */
.tlink { color: var(--accent); border-bottom-color: var(--accent); }
.tlink:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Breadcrumb / header active state --- */
.nav__link.is-active { color: var(--accent); }
.nav__link::after { background: var(--accent); }

/* --- Mobile tab bar --- */
.tabbar { background: #fff; border-top-color: var(--line-strong); }
.tabbar__link.is-active { color: var(--accent); }
.tabbar__link.is-active i { color: var(--accent); }

/* Export and import badges take two different palette colours so the
   two catalogues are distinguishable at a glance. */
.pcard__tag--export, .pd-badge--export { background: var(--accent-4); color: #fff; }
.pcard__tag--import, .pd-badge--import { background: var(--accent-2); color: var(--ink); }

/* Import cards get the cyan edge to match their badge. */
.pcard:has(.pcard__tag--import) { border-top-color: var(--accent-2); }

/* A yellow underline under section headings adds a fourth colour to
   the light areas without shouting. */
.sec-head h2::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin-top: 0.7rem;
    border-radius: 2px;
    background: var(--accent-3);
}

.sec-head--center h2::after { margin-inline: auto; }

/* ============================================================
   32. COLOUR CELLS
   ============================================================
   A reusable set of six background/text pairs used by the stats
   ribbon and the global-reach cards.

   The default text colour is the cell's own hue mixed down to
   ~22% against black. That keeps the type in the same colour
   family as its panel while guaranteeing it stays dark enough to
   read, whatever palette a theme supplies — no per-theme tuning,
   and no risk of an unreadable pairing when someone adds a sixth
   theme later.
   ============================================================ */
:root {
    --cell-a-bg:  var(--accent-2);
    --cell-b-bg:  var(--accent-3);
    --cell-c-bg:  var(--accent-4);
    --cell-d-bg:  var(--accent);
    --cell-e-bg:  var(--ink-2);
    --cell-f-bg:  var(--ink-3);

    --cell-a-ink: color-mix(in srgb, var(--cell-a-bg) 22%, #000);
    --cell-b-ink: color-mix(in srgb, var(--cell-b-bg) 22%, #000);
    --cell-c-ink: color-mix(in srgb, var(--cell-c-bg) 22%, #000);
    --cell-d-ink: color-mix(in srgb, var(--cell-d-bg) 22%, #000);
    --cell-e-ink: #FFFFFF;
    --cell-f-ink: #FFFFFF;
}

/* Orange and crimson are dark enough that white type looks better
   on them than the tinted-black default. */
[data-theme="theme-1"] {
    --cell-c-ink: #FFFFFF;
    --cell-d-ink: #FFFFFF;
}

/* ============================================================
   33. TICKER — YELLOW STRIP, MULTICOLOUR TYPE
   ============================================================
   The strip is one solid colour and the words carry the palette.
   Each text colour is dark enough to clear 4:1 on the yellow;
   the bright cyan and orange themselves are not, so their darker
   siblings are used for the type.
   ============================================================ */
#site-ticker {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: calc(var(--z-header) + 1);
}

/* A fixed height means the header can be offset by exactly this
   much without measuring anything at runtime. */
.ticker {
    height: var(--ticker-h);
    border-block: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}

.ticker__viewport,
.ticker__track { height: 100%; }

.ticker__item {
    height: 100%;
    padding-block: 0;
    background: none;          /* one solid strip, not coloured blocks */
}

.ticker__item i { opacity: 1; }

/* The four type colours cycle; icons inherit from the item. */
.ticker__item:nth-child(4n + 1) { color: var(--tick-1-ink); }
.ticker__item:nth-child(4n + 2) { color: var(--tick-2-ink); }
.ticker__item:nth-child(4n + 3) { color: var(--tick-3-ink); }
.ticker__item:nth-child(4n + 4) { color: var(--tick-4-ink); }

/* ============================================================
   34. STATS RIBBON — COLOURED CELLS
   ============================================================ */
.stats { background: none; border: 0; }
.stats__grid { border: 0; }

.stat {
    border: 0;
    padding-block: 1.4rem;
}

.stat:nth-child(4n + 1) { background: var(--cell-a-bg); color: var(--cell-a-ink); }
.stat:nth-child(4n + 2) { background: var(--cell-b-bg); color: var(--cell-b-ink); }
.stat:nth-child(4n + 3) { background: var(--cell-c-bg); color: var(--cell-c-ink); }
.stat:nth-child(4n + 4) { background: var(--cell-d-bg); color: var(--cell-d-ink); }

/* Both lines inherit the cell's text colour instead of the accent. */
.stat__num,
.stat__label { color: inherit; }
.stat__label { opacity: 0.82; }

@media (min-width: 768px) {
    .stat { padding-block: 1.6rem; }
}

/* ============================================================
   35. GLOBAL REACH — COLOURED REGION CARDS
   ============================================================
   Six cards, six cells. Everything inside inherits the cell's
   text colour, and the country chips become translucent white so
   they read on any of the six backgrounds.
   ============================================================ */
#global-reach .region,
.region {
    border: 0;
    border-radius: var(--r-md);
    padding: 1.5rem;
}

.region:nth-child(6n + 1) { background: var(--cell-a-bg); color: var(--cell-a-ink); }
.region:nth-child(6n + 2) { background: var(--cell-b-bg); color: var(--cell-b-ink); }
.region:nth-child(6n + 3) { background: var(--cell-c-bg); color: var(--cell-c-ink); }
.region:nth-child(6n + 4) { background: var(--cell-d-bg); color: var(--cell-d-ink); }
.region:nth-child(6n + 5) { background: var(--cell-e-bg); color: var(--cell-e-ink); }
.region:nth-child(6n + 6) { background: var(--cell-f-bg); color: var(--cell-f-ink); }

.region:hover { transform: translateY(-3px); }

.region__head {
    border-bottom: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 30%, transparent);
}

.region__title,
.region__count,
.region__note { color: inherit; }

.region__count { opacity: 0.7; }
.region__note { opacity: 0.85; }

/* Chips sit on six different grounds, so they borrow the card's
   own text colour at low opacity rather than a fixed tint. */
.region .chip {
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-color: color-mix(in srgb, currentColor 26%, transparent);
    color: inherit;
}

/* ============================================================
   36. IMPORT / EXPORT TABS + HERO SLIDESHOW DOTS
   ============================================================
   Both the hero and the catalogue are split the same way the
   business is: one side exports, the other imports. The two
   switchers look related but not identical - the hero one sits
   inside a frame and stays typographic, the catalogue one is a
   pill pair that can carry the palette.
   ============================================================ */

.tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    inline-size: fit-content;
    margin-inline: auto;
    box-shadow: 0 1px 2px rgb(1 58 74 / 0.06);
}

.tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
    background: transparent;
    transition: color var(--t-fast), background-color var(--t-fast),
                box-shadow var(--t-fast);
}

.tabs__btn i { font-size: 0.95rem; }
.tabs__btn:hover { color: var(--ink); }

.tabs__btn.is-active {
    color: var(--white);
    background: var(--accent-2);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-2) 34%, transparent);
}

/* The import side gets the warm half of the palette so the two
   tabs read as two different trades, not two states of one. */
.tabs__btn[data-grid="import"].is-active {
    background: var(--accent-4);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-4) 34%, transparent);
}

/* --- Hero slideshow dots --- */
/* A dark pill behind the dots, because the slides run from pale
   potato sacks to near-black scrap and plain white dots vanish
   against half of them. */
.hero__dots {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline: 0;
    inline-size: fit-content;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border-radius: 999px;
    background: rgb(1 58 74 / 0.42);
    backdrop-filter: blur(3px);
    z-index: 2;
}

.hero__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.62);
    transition: inline-size var(--t-fast), background-color var(--t-fast);
}

.hero__dot:hover { background: var(--white); }

.hero__dot.is-active {
    inline-size: 1.4rem;
    border-radius: 999px;
    background: var(--accent-3);
}

/* The catalogue switcher shrinks rather than wraps on a phone. */
@media (max-width: 480px) {
    .tabs { inline-size: 100%; }
    .tabs__btn { flex: 1; justify-content: center; padding-inline: 0.75rem; }
}

.btn-row--center { justify-content: center; }

/* ============================================================
   37. HOMEPAGE HERO — DARK, PHOTOGRAPHIC, GLASS
   ============================================================
   The hero carries the slide photo across the whole band: the
   same image the frame is showing, blown up behind everything,
   slowly scaling in and out. A scrim and a glass panel sit
   between it and the type so the headline stays readable no
   matter which product photo is up.

   Scoped to `.hero`, which only index.html uses - the inner
   pages keep `.page-hero` and are untouched.
   ============================================================ */

.hero {
    background: var(--surface-footer);
    color: var(--text-invert);
}

/* --- The photograph --- */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero__bg-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.9s var(--ease);
    /* grow in, grow out - `alternate` reverses it rather than snapping back */
    animation: heroKen 20s var(--ease) infinite alternate;
    will-change: transform;
}

.hero__bg-img.is-shown { opacity: 1; }

@keyframes heroKen {
    from { transform: scale(1.05) translate3d(0, 0, 0); }
    to   { transform: scale(1.20) translate3d(0, -1.5%, 0); }
}

/* Scrim. Two jobs: hold white type over a bright photo, and make the band
   read as the theme's own dark family rather than as "a photo". The diagonal
   pass runs deepest ink -> the brand tone -> deepest ink again, so there is
   colour movement inside the dark instead of one flat sheet; the vertical
   pass weights the top and bottom edges. The photo survives underneath as
   texture. Sits above the images but still inside the -2 layer, so the
   colour wash and the pattern stay on top. */
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Legibility fallback. color-mix() is only ~2023-era; where it is missing
       the whole `background` below is dropped and the headline would sit on a
       bare photo. rgb() with a slash alpha goes back years further, so this
       line keeps the band dark and the type readable. */
    background: rgb(var(--ink-rgb) / 0.9);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--ink) 93%, transparent) 0%,
            color-mix(in srgb, var(--surface-hero) 88%, transparent) 46%,
            color-mix(in srgb, var(--ink) 96%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink) 58%, transparent) 0%,
            transparent 40%,
            color-mix(in srgb, var(--ink) 72%, transparent) 100%);
}

/* Pattern. A 22px dot grid on the same rhythm the inner-page heroes use,
   crossed with a fine diagonal weave for an industrial, shipping-crate
   feel. Masked to fade downward so it is crisp under the header and gone
   before it reaches the stats ribbon. Sits above the scrim, below content. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(rgb(255 255 255 / 0.15) 1px, transparent 1px),
        repeating-linear-gradient(135deg,
            rgb(255 255 255 / 0.05) 0 1px,
            transparent 1px 13px),
        repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--accent-2) 8%, transparent) 0 1px,
            transparent 1px 26px);
    background-size: 22px 22px, auto, auto;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.5) 58%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.5) 58%, transparent 92%);
}

/* The existing colour wash is tuned for a pale hero; over a photo it only
   needs to tint, so it drops to a fraction of its old strength. */
.hero::before {
    background-image:
        radial-gradient(60% 55% at 12% 8%,  color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%),
        radial-gradient(52% 48% at 92% 18%, color-mix(in srgb, var(--accent-2) 15%, transparent) 0%, transparent 72%);
}

/* --- Glass --- */
.hero__glass,
.hero__frame {
    background: rgb(255 255 255 / 0.08);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: var(--r-md);
    box-shadow: 0 20px 50px rgb(0 0 0 / 0.32);
}

.hero__glass { padding: 1.6rem 1.4rem; }

@media (min-width: 992px) { .hero__glass { padding: 2.25rem 2rem; } }

/* Without backdrop-filter the panel would be a flat milky box over the
   photo, so fall back to a solid tint of the band colour instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero__glass,
    .hero__frame {
        background: rgb(var(--ink-rgb) / 0.78);
        background: color-mix(in srgb, var(--surface-footer) 78%, transparent);
    }
}

/* --- Type on the dark band --- */
.hero .eyebrow { color: rgb(255 255 255 / 0.72); }
.hero .eyebrow::after { background: rgb(255 255 255 / 0.26); }
.hero .eyebrow__num { color: color-mix(in srgb, var(--accent-2) 55%, #fff); }

.hero__title { color: var(--text-invert); }

/* Lightened toward white so the accent keeps its hue but still clears
   contrast on every one of the five palettes. */
.hero__title em { color: color-mix(in srgb, var(--accent) 42%, #fff); }

.hero__lede { color: rgb(255 255 255 / 0.84); }
.hero__marks { border-top-color: rgb(255 255 255 / 0.18); }
.hero__mark { color: rgb(255 255 255 / 0.80); }
.hero__mark i { color: color-mix(in srgb, var(--accent-3) 55%, #fff); }
.hero__caption { color: rgb(255 255 255 / 0.74); }
.hero__caption i { color: color-mix(in srgb, var(--accent-3) 55%, #fff); }

/* The solid dark button disappears against a dark band - invert it. */
.hero .btn--ink {
    background: var(--text-invert);
    color: var(--ink);
    border-color: var(--text-invert);
}
.hero .btn--ink:hover { background: #fff; border-color: #fff; }

/* --- Frame, tabs --- */
.hero__frame { padding: 0.5rem; }
.hero__media { border-radius: calc(var(--r-md) - 4px); }
.hero__tabs { border-top-color: rgb(255 255 255 / 0.18); }
.hero__tab { color: rgb(255 255 255 / 0.62); }
.hero__tab + .hero__tab { border-inline-start-color: rgb(255 255 255 / 0.18); }
.hero__tab:hover { color: #fff; }
.hero__tab.is-active {
    color: #fff;
    border-top-color: color-mix(in srgb, var(--accent-3) 60%, #fff);
}

/* --- Prev / next --- */
.hero__arrow {
    position: absolute;
    inset-block-start: 50%;
    z-index: 3;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.3);
    background: rgb(4 24 32 / 0.42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1.05rem;
    opacity: 0.55;
    transition: opacity var(--t-fast), background-color var(--t-fast),
                border-color var(--t-fast);
}

/* Logical insets, so the pair mirrors itself in Arabic. The chevron glyphs
   are already flipped for RTL further up the file. */
.hero__arrow--prev { inset-inline-start: 0.6rem; }
.hero__arrow--next { inset-inline-end: 0.6rem; }

.hero__media:hover .hero__arrow { opacity: 1; }

.hero__arrow:hover,
.hero__arrow:focus-visible {
    opacity: 1;
    background: rgb(4 24 32 / 0.68);
    border-color: rgb(255 255 255 / 0.55);
}

/* Touch has no hover, so keep them legible there without a tap. */
@media (hover: none) { .hero__arrow { opacity: 0.9; } }

/* --- Full-bleed stats ribbon --- */
.stats { margin-top: 2.5rem; }
.stats__grid { inline-size: 100%; }

@media (prefers-reduced-motion: reduce) {
    .hero__bg-img { animation: none; transform: scale(1.05); }
}

/* ============================================================
   38. MOBILE FIXES — HEADER FIT, HERO ORDER
   ============================================================ */

/* --- Header clipping ---
   `.brand` is flex-shrink: 0 and the tagline is a long, heavily tracked
   string - 313px at 360px wide. The brand therefore refused to give up
   any space and pushed the language button and burger 99px past the right
   edge, which is the clipping seen on phones.

   Two changes: the tagline stands down on narrow screens (the wordmark
   still carries the brand, and the drawer and footer both still show it),
   and the brand is allowed to shrink with an ellipsis as a backstop so no
   translation can ever push the controls off-screen again. */
.site-header .brand {
    min-width: 0;
    flex-shrink: 1;
}

.site-header .brand__name,
.site-header .brand__tag {
    max-inline-size: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 559px) {
    .site-header .brand__tag { display: none; }
}

/* The actions must always keep their intrinsic width. */
.site-header .header-actions { flex-shrink: 0; }

/* --- Hero stacking order on phones ---
   Single column below 992px. The product photo leads and the copy follows,
   so the first thing on screen is the goods rather than a block of text.
   DOM order is untouched, so the reading order for screen readers and the
   tab sequence still run headline -> copy -> buttons -> slider. */
@media (max-width: 991px) {
    .hero__visual { order: -1; }
    .hero__grid { gap: 1.75rem; }
}