/* =============================================================================
   LABORATORY INCUBATOR — "PRECISION" design system
   -----------------------------------------------------------------------------
   The public-facing visual language of the Laboratory Incubator platform
   (labsincu): the global marketplace for laboratories, testing, inspection,
   calibration and accreditation.

   Identity notes
     · Palette: a single brand hue (#75418F, 280deg) stepped by lightness — deep
       aubergine ink, the brand purple itself, and a bright lilac used for accents
       on dark panels. Surfaces, hairlines and muted text are tinted from the same
       hue so nothing reads as dead grey. A single amber is reserved for alerts,
       validation and discount flags; it is deliberately NOT part of the brand
       ramp, so a warning never reads as decoration.
     · Type: Space Grotesk carries the display voice — geometric, instrument-panel
       precision, set in SENTENCE case with tight tracking. IBM Plex Sans runs the
       body copy and IBM Plex Mono every measured figure (counts, prices, SKUs,
       accreditation codes), which is what makes the platform read as laboratory
       instrumentation rather than consumer retail. IBM Plex Sans Arabic and
       Readex Pro carry the same engineered feel in RTL.
     · Motifs: graph paper, ruler tick rules, the hexagonal lattice (molecular /
       accreditation seal), the meniscus curve, and specimen-label blocks whose
       code sits in mono. Cards are capped by a hairline rule that fills on hover
       — a measurement being taken — rather than a leading side bar.
     · Geometry: 12px radii on panels, 8px on controls; soft, cool elevation.

   Loaded LAST so it governs the storefront chrome and all public pages.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Readex+Pro:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------- 0 · Tokens */
:root {
    /* brand — one hue (#75418F, 280deg), stepped by lightness */
    --lx-brand: #75418F;
    --lx-brand-400: #8A4CA9;
    --lx-brand-600: #623678;
    --lx-brand-700: #4E2B5F;
    --lx-accent: #D7A6F0;      /* bright lilac, for accents on the dark panels */
    --lx-accent-200: #E6C4F7;
    --lx-orange: #E8820C;      /* semantic alert colour, not part of the brand ramp */

    /* ink & surfaces — tinted from the brand hue, never neutral grey */
    --lx-ink: #1C0F24;
    --lx-ink-2: #2A1733;
    --lx-ink-3: #3A2145;
    --lx-paper: #F7F4F9;
    --lx-paper-2: #EFE8F3;
    --lx-card: #FFFFFF;
    --lx-line: #E2D8E9;
    --lx-line-2: #CBBAD6;
    --lx-muted: #665B6E;
    --lx-muted-2: #8A7E92;

    /* type */
    --lx-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
    --lx-display-ar: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
    --lx-head: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
    --lx-sans: 'IBM Plex Sans', 'Space Grotesk', sans-serif;
    --lx-sans-ar: 'IBM Plex Sans Arabic', 'Readex Pro', sans-serif;
    --lx-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

    /* geometry */
    --lx-r: 8px;
    --lx-r-lg: 12px;
    --lx-container: 1240px;
    --lx-shadow: 0 1px 2px rgba(28, 15, 36, .06), 0 16px 34px -24px rgba(28, 15, 36, .45);
    --lx-shadow-hi: 0 26px 56px -28px rgba(28, 15, 36, .46);

    /* keep legacy variables in step so inherited components stay on-palette */
    --primary-color: #75418F;
    --secondary-color: #1C0F24;
}

/* ------------------------------------------------------------- 1 · Base ---- */
body {
    font-family: var(--lx-sans);
    color: #241C29;
    background: var(--lx-paper);
}

[dir="rtl"] body { font-family: var(--lx-sans-ar); }

.lx-page,
.home-page, .about-page, .services-page, .suppliers-page,
.training-page, .events-page, .media-page, .faq-page,
.contact-page, .product-list-page, .recruitment-page,
.research-page, .laboratories-page {
    background: var(--lx-paper);
    overflow-x: clip;
}

.lx-container {
    width: 100%;
    max-width: var(--lx-container);
    margin-inline: auto;
    padding-inline: 20px;
}

/* Display type — Space Grotesk in sentence case, tightened. The uppercase,
   condensed voice of the previous theme is deliberately gone: laboratory work
   is quiet and exact, so the headings are too. */
.lx-page h1, .lx-page h2, .lx-page h3,
.lx-display {
    font-family: var(--lx-display);
    font-weight: 600;
    letter-spacing: -.022em;
    color: var(--lx-ink);
    text-transform: none;
    line-height: 1.12;
}

[dir="rtl"] .lx-page h1,
[dir="rtl"] .lx-page h2,
[dir="rtl"] .lx-page h3,
[dir="rtl"] .lx-display {
    font-family: var(--lx-display-ar);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.45;
}

.lx-page p { color: #443A4C; line-height: 1.75; }

/* Every measured figure on the site runs in mono — the single strongest signal
   that the platform deals in instruments and results, not merchandise. */
.lx-num,
.lx-stats__value, .lx-hero__stat-value, .lx-targets__value,
.lx-product__price, .lx-step__no, .lx-point__no {
    font-family: var(--lx-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
}

/* micro label — the kicker above every section heading, carrying a ruler rule */
.lx-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--lx-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lx-brand-600);
    margin-bottom: 15px;
}
[dir="rtl"] .lx-kicker {
    font-family: var(--lx-sans-ar);
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 600;
}
/* a measurement tick rule, not a skewed speed bar */
.lx-kicker::before {
    content: "";
    width: 30px;
    height: 9px;
    display: block;
    flex: 0 0 30px;
    background-image: repeating-linear-gradient(90deg,
        var(--lx-brand) 0 1.5px, transparent 1.5px 8px);
    border-bottom: 1.5px solid var(--lx-brand);
}

/* section shell */
.lx-section { padding: 88px 0; position: relative; }
.lx-section--tight { padding: 60px 0; }
.lx-section--alt { background: var(--lx-paper-2); }
.lx-section--dark { background: var(--lx-ink); }
.lx-section--dark h2, .lx-section--dark h3 { color: #fff; }
.lx-section--dark p { color: #C8BAD1; }

/* faint graph paper behind the alternate band — laboratory notebook stock */
.lx-section--alt::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        repeating-linear-gradient(90deg, rgba(117, 65, 143, .05) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(0deg, rgba(117, 65, 143, .05) 0 1px, transparent 1px 32px);
}
.lx-section--alt > * { position: relative; }

.lx-section__head { max-width: 780px; margin-bottom: 46px; }
.lx-section__head--center { margin-inline: auto; text-align: center; }
.lx-section__head--center .lx-kicker { justify-content: center; }
.lx-section__head h2 { font-size: clamp(28px, 3.7vw, 44px); margin: 0 0 14px; }
.lx-section__head p { font-size: 16.5px; margin: 0; max-width: 72ch; }
.lx-section__head--center p { margin-inline: auto; }

/* ------------------------------------------------------------ 2 · Buttons -- */
.lx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    font-family: var(--lx-head);
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: -.01em;
    text-transform: none;
    border: 1.5px solid transparent;
    border-radius: var(--lx-r);
    cursor: pointer;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
[dir="rtl"] .lx-btn {
    font-family: var(--lx-sans-ar);
    font-weight: 600;
    letter-spacing: 0;
    font-size: 15px;
}
.lx-btn:hover { text-decoration: none; }

.lx-btn--primary { background: var(--lx-brand); color: #fff; }
.lx-btn--primary:hover {
    background: var(--lx-brand-600); color: #fff;
    box-shadow: 0 8px 20px -10px rgba(117, 65, 143, .7);
}

.lx-btn--accent { background: var(--lx-accent); color: var(--lx-ink); }
.lx-btn--accent:hover { background: var(--lx-accent-200); color: var(--lx-ink); }

.lx-btn--ghost { background: transparent; color: var(--lx-ink); border-color: var(--lx-line-2); }
.lx-btn--ghost:hover { border-color: var(--lx-brand); color: var(--lx-brand-700); background: rgba(117, 65, 143, .05); }

.lx-btn--on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.lx-btn--on-dark:hover { border-color: var(--lx-accent); color: var(--lx-accent); background: rgba(215, 166, 240, .08); }

.lx-btn--sm { padding: 10px 18px; font-size: 14px; }

/* Bootstrap's form-select is LTR-only: move the dropdown caret to the left and
   right-align the text/padding in RTL so Arabic selects read correctly. */
[dir="rtl"] .form-select {
    background-position: left 0.75rem center;
    padding-inline: 0.75rem 2.25rem;
    text-align: right;
}

/* Bootstrap's form-check is LTR-only in this build: flip the checkbox/radio to
   the right of its label in RTL. */
[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.5em;
}
[dir="rtl"] .form-check .form-check-input {
    float: right;
    margin-left: 0;
    margin-right: -1.5em;
}

/* ------------------------------------------------------------- 3 · Header -- */
.site-header-sticky { position: relative; z-index: 1200; }

.top-bar {
    background: var(--lx-ink);
    color: #DCD2E3;
    font-size: 13.5px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.top-bar .container { max-width: var(--lx-container); }
.top-bar .top-menu { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; }
.top-bar a, .top-bar .dropdown-toggle { color: #DCD2E3; text-decoration: none; }
.top-bar .dropdown-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--lx-r); }
.top-bar .dropdown-toggle:hover { color: var(--lx-accent); background: rgba(255, 255, 255, .06); }
.top-bar img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }
.top-bar .dropdown-content {
    background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg);
    box-shadow: var(--lx-shadow-hi); padding: 6px 0; min-width: 170px;
}
.top-bar .dropdown-content a { color: #241C29; display: block; padding: 9px 16px; font-size: 14px; }
.top-bar .dropdown-content a:hover { background: var(--lx-paper-2); color: var(--lx-brand-700); }
.top-bar .top-register-btn {
    background: var(--lx-brand); color: #fff; padding: 8px 17px; border-radius: var(--lx-r);
    font-family: var(--lx-head); font-weight: 600; letter-spacing: -.01em; font-size: 14px;
}
[dir="rtl"] .top-bar .top-register-btn { font-family: var(--lx-sans-ar); letter-spacing: 0; }
.top-bar .top-register-btn:hover { background: var(--lx-accent); color: var(--lx-ink); }
.top-bar .user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.navbar {
    background: #fff;
    border-bottom: 1px solid var(--lx-line);
    padding: 0;
    box-shadow: 0 1px 0 rgba(28, 15, 36, .03);
}
.navbar > .container {
    max-width: var(--lx-container);
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px;
}

/* brand lockup */
.lx-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lx-brand__mark { width: 42px; height: 42px; flex: 0 0 42px; }

/* The mark's three colours, so one SVG works on light and dark chrome. The brand
   purple is dark, so on the dark footer the ring moves up the ramp to keep its
   edge visible. */
:root {
    --lx-mark-shield: var(--lx-ink);
    --lx-mark-ring: var(--lx-brand);
    --lx-mark-chevron: var(--lx-accent);
}
.lx-footer {
    --lx-mark-shield: var(--lx-ink-2);
    --lx-mark-ring: #A87FBD;
    --lx-mark-chevron: var(--lx-accent);
}
.lx-brand__text { display: flex; flex-direction: column; line-height: 1; }
.lx-brand__name {
    font-family: var(--lx-display); font-weight: 700; font-size: 21px; letter-spacing: -.03em;
    text-transform: none; color: var(--lx-ink);
}
[dir="rtl"] .lx-brand__name { font-family: var(--lx-display-ar); font-weight: 600; font-size: 20px; letter-spacing: 0; }
.lx-brand__tag {
    font-family: var(--lx-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--lx-brand-600); margin-top: 6px; font-weight: 500;
}
[dir="rtl"] .lx-brand__tag { font-family: var(--lx-sans-ar); letter-spacing: 0; font-size: 12px; text-transform: none; }

/* Scoped under .navbar so these win over the legacy "modern refresh" rules in
   minimal.css (.navbar .main-menu a / .navbar .main-menu — specificity 0,2,x),
   which otherwise override the gap, font-size and padding set here and the
   responsive tightening below, leaving the full link set to collide with the
   brand and the cart. labs-precision.css loads after minimal.css, so matching
   the specificity is enough to govern. */
.navbar .main-menu { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; justify-content: center; min-width: 0; }
.navbar .main-menu > a, .navbar .nav-more-toggle {
    font-family: var(--lx-head);
    font-weight: 500;
    font-size: 15.5px;
    letter-spacing: -.012em;
    text-transform: none;
    color: #2E2438;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: var(--lx-r);
    position: relative;
    white-space: nowrap;
}
.navbar [dir="rtl"] .main-menu > a, .navbar [dir="rtl"] .nav-more-toggle {
    font-family: var(--lx-sans-ar); font-weight: 500; font-size: 15px; letter-spacing: 0;
}
/* a 2px measurement underline that grows from the inline start */
.navbar .main-menu > a::after {
    content: ""; position: absolute; inset-inline: 12px; bottom: 5px; height: 2px;
    background: var(--lx-brand); transform: scaleX(0); transform-origin: inline-start;
    transition: transform .18s ease;
}
.navbar .main-menu > a:hover { color: var(--lx-brand-700); }
.navbar .main-menu > a:hover::after, .navbar .main-menu > a.is-active::after { transform: scaleX(1); }

.nav-more-dropdown .nav-more-menu {
    background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg);
    box-shadow: var(--lx-shadow-hi); padding: 7px 0; min-width: 210px;
}
.nav-more-dropdown .nav-more-menu a { font-family: var(--lx-sans); font-size: 14.5px; color: #2E2438; padding: 10px 18px; }
.nav-more-dropdown .nav-more-menu a:hover { background: var(--lx-paper-2); color: var(--lx-brand-700); }

.navbar .add-product-btn, .add-product-btn {
    background: var(--lx-brand); color: #fff; padding: 12px 20px; border-radius: var(--lx-r);
    font-family: var(--lx-head); font-weight: 600; font-size: 14.5px; letter-spacing: -.01em;
    text-transform: none; text-decoration: none; white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}
[dir="rtl"] .add-product-btn { font-family: var(--lx-sans-ar); letter-spacing: 0; font-weight: 600; }
.add-product-btn:hover { background: var(--lx-ink); color: #fff; }

.navbar .logo { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* The navbar container is capped at --lx-container, so beyond that width the bar
   never gets roomier — the full link set plus brand and CTA do not fit at the
   default spacing at any desktop width. Tighten padding, gap and type across the
   desktop range so the menu stays inside the bar. */
@media (min-width: 1300px) {
    .top-bar .container, .navbar > .container { max-width: 1440px; }
    .navbar > .container { gap: 8px; }
    .navbar .main-menu { gap: 0; }
    .navbar .main-menu > a, .navbar .nav-more-toggle { padding: 10px 6px; font-size: 13.5px; }
    .navbar [dir="rtl"] .main-menu > a, .navbar [dir="rtl"] .nav-more-toggle { font-size: 13px; }
    .navbar .add-product-btn, .add-product-btn { padding: 11px 14px; font-size: 13px; }
}
.mobile-menu-icon { display: none; font-size: 22px; color: var(--lx-ink); cursor: pointer; }
.cart-icon-link { position: relative; color: var(--lx-ink); font-size: 19px; text-decoration: none; padding: 8px; }
.cart-icon-link:hover { color: var(--lx-brand); }
.cart-icon-badge {
    position: absolute; top: 0; inset-inline-end: 0; background: var(--lx-orange); color: #fff;
    font-family: var(--lx-mono); font-size: 10px; font-weight: 600; min-width: 17px; height: 17px;
    border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* --------------------------------------------------------------- 4 · Hero -- */
.lx-hero {
    position: relative;
    background: linear-gradient(145deg, var(--lx-ink) 0%, var(--lx-ink-2) 50%, var(--lx-ink-3) 100%);
    color: #fff;
    overflow: hidden;
    padding: 108px 0 96px;
    isolation: isolate;
}
/* graph paper — a laboratory notebook page, finer than the old pitch markings */
.lx-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2; opacity: .6;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.032) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 140px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 140px);
}
/* hexagonal lattice glow — the molecular / accreditation-seal motif */
.lx-hero::after {
    content: ""; position: absolute; z-index: -1;
    inset-inline-end: -140px; top: -120px; width: 620px; height: 620px;
    background:
        radial-gradient(circle at 50% 50%, rgba(215, 166, 240, .12) 0%, transparent 62%);
    clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0% 50%);
    border: 1px solid rgba(215, 166, 240, .1);
}
/* The banner is a single column of copy and calls to action. The measure is
   capped so the headline and lede stay readable instead of running the full
   width of the container. */
.lx-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 54px; align-items: center; }
.lx-hero__grid > * { max-width: 72ch; }
/* Hero with a visual column: text and image side by side. */
.lx-hero__grid--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.lx-hero__grid--split > * { max-width: none; }
.lx-hero__media img { width: 100%; height: auto; display: block; border-radius: var(--lx-r-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, .38); }
.lx-hero__brandline {
    font-family: var(--lx-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
    color: #fff; margin-bottom: 20px; display: flex; align-items: center; gap: 12px;
}
[dir="rtl"] .lx-hero__brandline { font-family: var(--lx-sans-ar); letter-spacing: 0; font-size: 15px; text-transform: none; color: #fff; }
.lx-hero__brandline::before {
    content: ""; width: 36px; height: 9px; flex: 0 0 36px;
    background-image: repeating-linear-gradient(90deg, var(--lx-accent) 0 1.5px, transparent 1.5px 9px);
    border-bottom: 1.5px solid var(--lx-accent);
}

.lx-hero h1 {
    font-family: var(--lx-display); font-size: clamp(34px, 4.9vw, 64px); line-height: 1.06;
    color: #fff; text-transform: none; margin: 0 0 22px; letter-spacing: -.03em; font-weight: 600;
}
[dir="rtl"] .lx-hero h1 { font-family: var(--lx-display-ar); font-weight: 600; line-height: 1.4; font-size: clamp(28px, 4.1vw, 52px); letter-spacing: 0; }
.lx-hero__lede { max-width: 62ch; }
.lx-hero__lede p { color: #D0C4D8; font-size: 16.5px; line-height: 1.82; margin: 0 0 14px; }
.lx-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
/* the secondary calls: tighter, lighter, set apart from the main pair */
.lx-hero__cta--more { margin-top: 14px; gap: 10px; }
.lx-hero__cta--more .lx-btn:not(:hover) { border-color: rgba(255, 255, 255, .2); color: #D0C4D8; }

/* Instrument readout panel. No longer used by the home banner, which is now copy
   and calls to action only — the Research page's AI section still renders it. */
.lx-hero__board {
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .035);
    border-radius: var(--lx-r-lg);
    padding: 10px;
    backdrop-filter: blur(4px);
    position: relative;
}
/* a calibration strip across the top of the readout */
.lx-hero__board::before {
    content: ""; position: absolute; top: 0; inset-inline: 10px; height: 7px;
    background-image: repeating-linear-gradient(90deg, rgba(215, 166, 240,.5) 0 1px, transparent 1px 12px);
}
.lx-hero__board-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
.lx-hero__stat {
    padding: 24px 20px; border-radius: var(--lx-r);
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
}
.lx-hero__stat-value {
    font-family: var(--lx-mono); font-weight: 500; font-size: 36px; color: var(--lx-accent); line-height: 1;
    display: flex; align-items: baseline; gap: 2px; letter-spacing: -.04em;
}
.lx-hero__stat-value sup { font-size: 17px; top: -.5em; font-weight: 400; }
.lx-hero__stat-label {
    margin-top: 11px; font-size: 12.5px; color: #B8A9C2; line-height: 1.5;
    font-family: var(--lx-mono); letter-spacing: .07em; text-transform: uppercase;
}
[dir="rtl"] .lx-hero__stat-label { font-family: var(--lx-sans-ar); letter-spacing: 0; text-transform: none; font-size: 13.5px; }

/* ---------------------------------------------------- 5 · Stat strip ------ */
.lx-stats { background: var(--lx-ink-2); padding: 0; }
.lx-stats__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.lx-stats__item {
    padding: 34px 22px; text-align: center; color: #fff;
    border-inline-end: 1px solid rgba(255, 255, 255, .07);
    position: relative;
}
/* a tick above each reading, as on a graduated cylinder */
.lx-stats__item::before {
    content: ""; position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(-50%);
    width: 28px; height: 2px; background: rgba(215, 166, 240, .4);
}
.lx-stats__item:last-child { border-inline-end: 0; }
.lx-stats__icon { color: var(--lx-accent); font-size: 18px; margin-bottom: 12px; display: block; }
.lx-stats__value { font-family: var(--lx-mono); font-weight: 500; font-size: 36px; line-height: 1; color: #fff; }
.lx-stats__value sup { color: var(--lx-accent); font-size: 17px; top: -.55em; }
.lx-stats__label { margin-top: 11px; font-size: 12.5px; color: #B3A3BC; line-height: 1.45; }

/* national-programme target band, sitting flush under the hero */
.lx-targets { background: var(--lx-ink-2); color: #fff; padding: 30px 0; border-top: 1px solid rgba(255,255,255,.07); }
.lx-targets__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 36px; align-items: center; }
.lx-targets__label p { color: #B3A3BC; font-size: 14.5px; margin: 0; }
.lx-targets__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lx-targets__item { display: flex; gap: 16px; align-items: center; }
.lx-targets__item i { color: var(--lx-accent); font-size: 23px; flex: 0 0 auto; }
.lx-targets__value { font-family: var(--lx-mono); font-weight: 500; font-size: 30px; line-height: 1; color: #fff; }
.lx-targets__value sup { color: var(--lx-accent); font-size: 15px; top: -.6em; }
.lx-targets__text { font-size: 13.5px; color: #B3A3BC; margin-top: 7px; line-height: 1.45; }
@media (max-width: 1024px) {
    .lx-targets__inner { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
    .lx-targets__items { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------------------------------------------- 6 · Sector / card grids --- */
.lx-grid { display: grid; gap: 18px; }
.lx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* panel capped by a hairline rule that fills on hover — a reading being taken */
.lx-card {
    background: var(--lx-card);
    border: 1px solid var(--lx-line);
    border-radius: var(--lx-r-lg);
    padding: 26px 24px;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    height: 100%;
    display: flex; flex-direction: column;
}
.lx-card::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--lx-brand) 0%, var(--lx-accent) 100%);
    transform: scaleX(0); transform-origin: inline-start;
    transition: transform .26s ease;
}
.lx-card:hover { transform: translateY(-4px); border-color: var(--lx-line-2); box-shadow: var(--lx-shadow); }
.lx-card:hover::before { transform: scaleX(1); }
.lx-card__icon {
    width: 48px; height: 48px; border-radius: var(--lx-r);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lx-paper-2); color: var(--lx-brand-600); font-size: 19px; margin-bottom: 18px;
    transition: background .18s ease, color .18s ease;
}
.lx-card:hover .lx-card__icon { background: var(--lx-brand); color: #fff; }
.lx-card h3 {
    font-family: var(--lx-head); font-weight: 600; font-size: 18.5px; letter-spacing: -.02em;
    text-transform: none; color: var(--lx-ink); margin: 0 0 10px; line-height: 1.3;
}
[dir="rtl"] .lx-card h3 { font-family: var(--lx-sans-ar); font-weight: 600; letter-spacing: 0; font-size: 18px; }
.lx-card p { font-size: 14.5px; color: var(--lx-muted); margin: 0; line-height: 1.68; }
.lx-card__desc { font-size: 14.5px; color: var(--lx-muted); line-height: 1.68; }
.lx-card__link {
    margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--lx-head); font-weight: 600; font-size: 14px; letter-spacing: -.01em;
    text-transform: none; color: var(--lx-brand-600); text-decoration: none;
}
[dir="rtl"] .lx-card__link { font-family: var(--lx-sans-ar); letter-spacing: 0; }
.lx-card__link i { transition: transform .18s ease; }
[dir="rtl"] .lx-card__link i { transform: scaleX(-1); }
.lx-card:hover .lx-card__link i { transform: translateX(4px); }
[dir="rtl"] .lx-card:hover .lx-card__link i { transform: scaleX(-1) translateX(4px); }

/* two actions sharing the card footer */
.lx-card__actions {
    margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap;
    align-items: center; gap: 8px 16px;
}
.lx-card__actions .lx-card__link { margin-top: 0; padding-top: 0; }
.lx-card__link--alt { color: var(--lx-muted); }
.lx-card__link--alt:hover { color: var(--lx-brand-700); }

/* nested bullet list inside a card — square graduation marks, not skewed slivers */
.lx-card__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.lx-card__list li {
    font-size: 14px; color: var(--lx-muted); display: flex; gap: 10px; align-items: flex-start; line-height: 1.55;
}
.lx-card__list li::before {
    content: ""; width: 7px; height: 7px; flex: 0 0 7px; margin-top: 8px; border-radius: 2px;
    border: 1.5px solid var(--lx-brand);
}

/* compact tile used for long taxonomy lists */
.lx-tile {
    background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg);
    padding: 18px; display: flex; align-items: center; gap: 14px;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
    text-decoration: none; height: 100%;
}
.lx-tile:hover { border-color: var(--lx-brand); transform: translateY(-3px); box-shadow: var(--lx-shadow); text-decoration: none; }
.lx-tile i { color: var(--lx-brand-600); font-size: 17px; flex: 0 0 auto; width: 22px; text-align: center; }
.lx-tile span {
    font-family: var(--lx-head); font-weight: 500; font-size: 15.5px; letter-spacing: -.015em;
    text-transform: none; color: var(--lx-ink); line-height: 1.35;
}
[dir="rtl"] .lx-tile span { font-family: var(--lx-sans-ar); font-weight: 500; letter-spacing: 0; font-size: 15px; }

/* numbered "point" row — the Why / benefits lists. The index runs in mono so it
   reads as a numbered protocol step. */
.lx-point { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--lx-line); }
.lx-point:last-child { border-bottom: 0; }
.lx-point__no {
    font-family: var(--lx-mono); font-weight: 500; font-size: 15px; color: var(--lx-brand);
    line-height: 1.6; flex: 0 0 auto; min-width: 34px; padding-top: 2px; letter-spacing: 0;
}
.lx-point__icon { color: var(--lx-brand-600); font-size: 17px; flex: 0 0 24px; padding-top: 3px; }
.lx-point p { margin: 0; font-size: 15.5px; color: #3D3345; }

/* journey / steps — a protocol sequence */
.lx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.lx-step {
    padding: 28px 22px; border: 1px solid var(--lx-line); margin: -1px 0 0 -1px;
    background: var(--lx-card); position: relative;
    transition: background .18s ease;
}
.lx-step__no {
    font-family: var(--lx-mono); font-weight: 500; font-size: 26px; color: var(--lx-line-2);
    line-height: 1; display: block; margin-bottom: 12px;
}
.lx-step h4 {
    font-family: var(--lx-head); font-weight: 600; font-size: 16.5px; text-transform: none;
    letter-spacing: -.015em; color: var(--lx-ink); margin: 0; line-height: 1.35;
}
[dir="rtl"] .lx-step h4 { font-family: var(--lx-sans-ar); letter-spacing: 0; font-size: 16px; }
.lx-step:hover { background: var(--lx-ink); }
.lx-step:hover .lx-step__no { color: var(--lx-accent); }
.lx-step:hover h4 { color: #fff; }

/* ------------------------------------------------------- 7 · Page banner -- */
.lx-banner {
    background: linear-gradient(135deg, var(--lx-ink) 0%, var(--lx-ink-3) 100%);
    color: #fff; padding: 76px 0 68px; position: relative; overflow: hidden;
}
/* graph paper rather than diagonal speed hatching */
.lx-banner::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.032) 0 1px, transparent 1px 30px);
}
.lx-banner .lx-container { position: relative; }
.lx-banner__kicker {
    font-family: var(--lx-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--lx-accent); margin-bottom: 15px; display: block;
}
[dir="rtl"] .lx-banner__kicker { font-family: var(--lx-sans-ar); letter-spacing: 0; text-transform: none; font-size: 15px; }
.lx-banner h1 { font-size: clamp(30px, 4.2vw, 52px); color: #fff; margin: 0 0 16px; max-width: 24ch; }
.lx-banner p { color: #C8BAD1; max-width: 68ch; margin: 0; font-size: 16.5px; }
.lx-banner__crumbs { margin-top: 24px; font-size: 13.5px; color: #8A7E92; font-family: var(--lx-mono); }
[dir="rtl"] .lx-banner__crumbs { font-family: var(--lx-sans-ar); }
.lx-banner__crumbs a { color: #DCD2E3; text-decoration: none; }
.lx-banner__crumbs a:hover { color: var(--lx-accent); }

/* --------------------------------------------------- 8 · Split / feature -- */
.lx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lx-split__media {
    position: relative; border-radius: var(--lx-r-lg); overflow: hidden; min-height: 340px;
    background: linear-gradient(145deg, var(--lx-ink) 0%, var(--lx-brand-700) 100%);
    display: flex; align-items: center; justify-content: center;
}
.lx-split__media::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 36px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 36px);
}
/* the meniscus — a liquid line across the lower third of the panel */
.lx-split__media::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 32%;
    background: linear-gradient(180deg, rgba(215, 166, 240,.1) 0%, rgba(215, 166, 240,.03) 100%);
    border-top: 1.5px solid rgba(215, 166, 240, .3);
    border-start-start-radius: 50% 18px; border-start-end-radius: 50% 18px;
}
.lx-split__media i { font-size: 86px; color: rgba(215, 166, 240, .55); position: relative; z-index: 1; }
.lx-split__body h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 18px; }
.lx-split__body p { font-size: 16px; margin: 0 0 14px; }

/* vision / mission pair */
.lx-vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lx-vm__card {
    background: var(--lx-ink); color: #fff; border-radius: var(--lx-r-lg); padding: 38px 34px;
    position: relative; overflow: hidden;
}
.lx-vm__card::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--lx-brand-400) 0%, var(--lx-accent) 100%);
}
.lx-vm__card:nth-child(2) { background: var(--lx-brand-700); }
.lx-vm__card i { font-size: 25px; color: var(--lx-accent); margin-bottom: 18px; display: block; }
.lx-vm__card h3 { color: #fff; font-size: 25px; margin: 0 0 14px; }
.lx-vm__card p { color: rgba(255, 255, 255, .84); font-size: 15.5px; margin: 0; line-height: 1.8; }

/* --------------------------------------------------------------- 9 · CTA -- */
.lx-cta {
    background: var(--lx-accent); color: var(--lx-ink); padding: 68px 0; position: relative; overflow: hidden;
}
/* hexagonal lattice outline instead of the old circle */
.lx-cta::before {
    content: ""; position: absolute; inset-inline-end: -100px; top: -80px;
    width: 400px; height: 400px; border: 2px solid rgba(28, 15, 36, .08);
    clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0% 50%);
}
.lx-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; position: relative; }
.lx-cta h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 12px; color: var(--lx-ink); }
.lx-cta p { margin: 0; max-width: 62ch; color: #2E1C38; font-size: 16px; }
.lx-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.lx-cta .lx-btn--primary { background: var(--lx-ink); }
.lx-cta .lx-btn--primary:hover { background: var(--lx-brand-700); box-shadow: none; }
.lx-cta .lx-btn--ghost { border-color: rgba(28, 15, 36, .3); }
.lx-cta .lx-btn--ghost:hover { background: rgba(28, 15, 36, .06); border-color: var(--lx-ink); color: var(--lx-ink); }

/* ------------------------------------------------------------ 10 · FAQ ---- */
.lx-faq { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; }
.lx-faq__item { background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); overflow: hidden; }
.lx-faq__q {
    width: 100%; text-align: start; background: none; border: 0; cursor: pointer;
    padding: 21px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    font-family: var(--lx-head); font-weight: 600; font-size: 17px; letter-spacing: -.018em;
    text-transform: none; color: var(--lx-ink);
}
[dir="rtl"] .lx-faq__q { font-family: var(--lx-sans-ar); letter-spacing: 0; font-size: 16.5px; }
.lx-faq__q i { color: var(--lx-brand); transition: transform .2s ease; flex: 0 0 auto; }
.lx-faq__item.is-open .lx-faq__q { background: var(--lx-paper-2); }
.lx-faq__item.is-open .lx-faq__q i { transform: rotate(45deg); }
.lx-faq__a { display: none; padding: 0 24px 24px; }
.lx-faq__item.is-open .lx-faq__a { display: block; }
.lx-faq__a p { margin: 0; font-size: 15.5px; color: var(--lx-muted); }

/* --------------------------------------------------------- 11 · Contact --- */
.lx-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 44px; align-items: start; }
.lx-contact-card {
    background: var(--lx-ink); color: #fff; border-radius: var(--lx-r-lg); padding: 36px 32px;
    position: relative; overflow: hidden;
}
.lx-contact-card::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--lx-brand-400) 0%, var(--lx-accent) 100%);
}
.lx-contact-card h3 { color: #fff; font-size: 23px; margin: 0 0 22px; }
.lx-contact-item { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.lx-contact-item:last-of-type { border-bottom: 0; }
.lx-contact-item i { color: var(--lx-accent); font-size: 17px; flex: 0 0 22px; padding-top: 3px; }
.lx-contact-item a, .lx-contact-item span { color: #DCD2E3; text-decoration: none; font-size: 15px; line-height: 1.6; }
.lx-contact-item a:hover { color: var(--lx-accent); }

/* ---- Forms. Labels run in mono small-caps, like a specimen request form ---- */
.lx-form { background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); padding: 34px 32px; }
.lx-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lx-field { margin-bottom: 18px; }
.lx-field label {
    display: block; font-family: var(--lx-mono); font-weight: 500; font-size: 11.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--lx-brand-700); margin-bottom: 8px;
}
[dir="rtl"] .lx-field label {
    font-family: var(--lx-sans-ar); letter-spacing: 0; text-transform: none;
    font-size: 14px; font-weight: 600; color: var(--lx-ink);
}
.lx-field input, .lx-field select, .lx-field textarea {
    width: 100%; padding: 13px 15px; border: 1px solid var(--lx-line-2); border-radius: var(--lx-r);
    font-family: inherit; font-size: 15px; color: #241C29; background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lx-field input:focus, .lx-field select:focus, .lx-field textarea:focus {
    outline: none; border-color: var(--lx-brand); box-shadow: 0 0 0 3px rgba(117, 65, 143, .14);
}
.lx-field textarea { min-height: 130px; resize: vertical; }
.lx-field__hint { font-size: 13px; color: var(--lx-muted-2); margin-top: 6px; }
.lx-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #3D3345; }
.lx-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--lx-brand); flex: 0 0 auto; }

/* inline alerts */
.lx-alert {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--lx-r-lg);
    margin-bottom: 24px; font-size: 15px; border: 1px solid transparent;
}
.lx-alert--success { background: rgba(117, 65, 143, .09); border-color: rgba(117, 65, 143, .28); color: var(--lx-brand-700); }
.lx-alert--error { background: rgba(232, 130, 12, .1); border-color: rgba(232, 130, 12, .3); color: #A65C06; }

/* ------------------------------------------------------------ 12 · News --- */
.lx-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lx-news__item {
    background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); overflow: hidden;
    display: flex; flex-direction: column; text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lx-news__item:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow); border-color: var(--lx-line-2); text-decoration: none; }
.lx-news__media {
    height: 180px; background: linear-gradient(145deg, var(--lx-ink) 0%, var(--lx-brand-700) 100%);
    position: relative; display: flex; align-items: center; justify-content: center;
}
.lx-news__media::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px);
}
.lx-news__media i { font-size: 38px; color: rgba(215, 166, 240,.5); position: relative; }
.lx-news__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.lx-news__cat {
    font-family: var(--lx-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--lx-brand-600); font-weight: 500; margin-bottom: 10px;
}
[dir="rtl"] .lx-news__cat { font-family: var(--lx-sans-ar); letter-spacing: 0; text-transform: none; font-size: 13px; }
.lx-news__item h3 { font-size: 17.5px; margin: 0 0 10px; line-height: 1.35; }
.lx-news__item p { font-size: 14.5px; color: var(--lx-muted); margin: 0 0 14px; }
.lx-news__date { margin-top: auto; font-size: 12.5px; color: var(--lx-muted-2); font-family: var(--lx-mono); }
[dir="rtl"] .lx-news__date { font-family: var(--lx-sans-ar); }

/* ------------------------------------------------ 12b · Article / aside --- */
.lx-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.lx-article__cover {
    border-radius: var(--lx-r-lg); overflow: hidden; margin-bottom: 28px;
    background: linear-gradient(145deg, var(--lx-ink) 0%, var(--lx-brand-700) 100%);
    min-height: 260px; display: flex; align-items: center; justify-content: center; position: relative;
}
.lx-article__cover::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 32px);
}
.lx-article__cover img { width: 100%; height: 100%; object-fit: cover; position: relative; }
.lx-article__cover i { font-size: 56px; color: rgba(215, 166, 240,.5); position: relative; }
.lx-article__meta {
    display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
    font-family: var(--lx-mono); font-size: 12.5px; color: var(--lx-muted-2);
    padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--lx-line);
}
[dir="rtl"] .lx-article__meta { font-family: var(--lx-sans-ar); }
.lx-article__meta span { display: inline-flex; align-items: center; gap: 7px; }
.lx-article__body p, .lx-article__body li { font-size: 16px; color: #443A4C; line-height: 1.85; }
.lx-article__body h2 { font-size: 26px; margin: 34px 0 14px; }
.lx-article__body h3 { font-size: 21px; margin: 28px 0 12px; }
.lx-article__body img { max-width: 100%; height: auto; border-radius: var(--lx-r-lg); margin: 22px 0; }

.lx-aside__card {
    background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg);
    padding: 24px 22px; margin-bottom: 20px;
}
.lx-aside__card h4 {
    font-family: var(--lx-head); font-weight: 600; font-size: 16px; letter-spacing: -.015em;
    color: var(--lx-ink); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--lx-line);
}
[dir="rtl"] .lx-aside__card h4 { font-family: var(--lx-sans-ar); letter-spacing: 0; }
.lx-aside__item {
    display: block; padding: 11px 0; font-size: 14.5px; color: #3D3345;
    text-decoration: none; border-bottom: 1px solid var(--lx-line);
    transition: color .15s ease, padding .15s ease;
}
.lx-aside__item:last-child { border-bottom: 0; }
.lx-aside__item:hover { color: var(--lx-brand-700); padding-inline-start: 5px; text-decoration: none; }

/* ------------------------------------------------- 13 · Partner / logos --- */
.lx-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.lx-logo-card {
    border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg); background: #fff;
    padding: 24px 16px; text-align: center; text-decoration: none;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.lx-logo-card:hover { border-color: var(--lx-brand); transform: translateY(-3px); box-shadow: var(--lx-shadow); text-decoration: none; }
/* the mark sits in a hexagon — the accreditation seal motif at tile scale */
.lx-logo-card__mark {
    width: 54px; height: 54px; margin: 0 auto 14px;
    background: var(--lx-paper-2); color: var(--lx-brand-700);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--lx-mono); font-weight: 600; font-size: 18px;
    clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0% 50%);
}
.lx-logo-card:hover .lx-logo-card__mark { background: var(--lx-brand); color: #fff; }
.lx-logo-card__name { font-size: 14.5px; font-weight: 600; color: var(--lx-ink); line-height: 1.35; }
.lx-logo-card__type { font-size: 12.5px; color: var(--lx-muted-2); margin-top: 5px; }

/* --------------------------------------------------------- 14 · Footer ---- */
.lx-footer { background: var(--lx-ink); color: #C8BAD1; padding-top: 72px; position: relative; overflow: hidden; }
.lx-footer::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--lx-brand-700) 0%, var(--lx-brand) 40%, var(--lx-accent) 100%);
}
.lx-footer__top { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 52px; }
.lx-footer .lx-brand__name { color: #fff; }
.lx-footer .lx-brand__tag { color: var(--lx-accent); }
.lx-footer__about { margin: 20px 0 24px; font-size: 14.5px; line-height: 1.8; color: #B3A3BC; max-width: 46ch; }
.lx-footer h4 {
    font-family: var(--lx-mono); font-weight: 500; font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: #fff; margin: 0 0 20px;
}
[dir="rtl"] .lx-footer h4 { font-family: var(--lx-sans-ar); letter-spacing: 0; text-transform: none; font-size: 16px; font-weight: 600; }
.lx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.lx-footer ul a { color: #B3A3BC; text-decoration: none; font-size: 14.5px; transition: color .15s ease, padding .15s ease; }
.lx-footer ul a:hover { color: var(--lx-accent); padding-inline-start: 5px; }

.lx-footer__contact { display: grid; gap: 12px; margin-bottom: 24px; }
.lx-footer__contact a { display: inline-flex; gap: 10px; align-items: center; color: #DCD2E3; text-decoration: none; font-size: 14.5px; }
.lx-footer__contact a:hover { color: var(--lx-accent); }
.lx-footer__contact i { color: var(--lx-brand-400); width: 18px; }

.lx-footer__social { display: flex; gap: 9px; margin-top: 4px; }
.lx-footer__social a {
    width: 38px; height: 38px; border-radius: var(--lx-r); border: 1px solid rgba(255,255,255,.15);
    display: inline-flex; align-items: center; justify-content: center; color: #DCD2E3; font-size: 15px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lx-footer__social a:hover { background: var(--lx-accent); color: var(--lx-ink); border-color: var(--lx-accent); }

.lx-footer__apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lx-footer__apps a {
    display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px;
    border-radius: var(--lx-r); border: 1px solid rgba(255,255,255,.15);
    color: #DCD2E3; text-decoration: none; font-size: 14px; font-weight: 500;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lx-footer__apps a i { font-size: 18px; color: var(--lx-brand-400); transition: color .15s ease; }
.lx-footer__apps a:hover { background: var(--lx-accent); color: var(--lx-ink); border-color: var(--lx-accent); }
.lx-footer__apps a:hover i { color: var(--lx-ink); }

.lx-footer__newsletter { display: flex; margin: 22px 0 6px; max-width: 360px; }
.lx-footer__newsletter input {
    flex: 1; padding: 13px 15px; border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.045);
    color: #fff; border-radius: var(--lx-r) 0 0 var(--lx-r); font-size: 14.5px;
}
[dir="rtl"] .lx-footer__newsletter input { border-radius: 0 var(--lx-r) var(--lx-r) 0; }
.lx-footer__newsletter input::placeholder { color: #7D6B86; }
.lx-footer__newsletter input:focus { outline: none; border-color: var(--lx-brand-400); }
.lx-footer__newsletter button {
    padding: 0 20px; background: var(--lx-brand); color: #fff; border: 0;
    border-radius: 0 var(--lx-r) var(--lx-r) 0; cursor: pointer; font-size: 16px;
}
[dir="rtl"] .lx-footer__newsletter button { border-radius: var(--lx-r) 0 0 var(--lx-r); }
.lx-footer__newsletter button:hover { background: var(--lx-accent); color: var(--lx-ink); }

.lx-footer__bar { border-top: 1px solid rgba(255,255,255,.09); padding: 22px 0; }
.lx-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; }
.lx-footer__bar a { color: #B3A3BC; text-decoration: none; }
.lx-footer__bar a:hover { color: var(--lx-accent); }
.lx-footer__policies { display: flex; gap: 20px; flex-wrap: wrap; }
.lx-footer__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.lx-footer__pay span {
    border: 1px solid rgba(255,255,255,.15); border-radius: 4px; padding: 4px 10px;
    font-family: var(--lx-mono); font-size: 11px; letter-spacing: .05em; color: #B3A3BC;
}
.lx-footer__copy { border-top: 1px solid rgba(255,255,255,.09); padding: 18px 0; text-align: center; font-size: 13.5px; color: #7D6B86; }
.lx-footer__copy a { color: var(--lx-accent); text-decoration: none; }

/* ----------------------------------------------- 15 · Marketplace cards --- */
/* Product cards carry no photography in the seeded catalogue, so the media area
   is a generated, on-brand panel keyed to the product's category icon. */
.lx-product-media {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--lx-r) var(--lx-r) 0 0; overflow: hidden;
    background: linear-gradient(145deg, var(--lx-ink) 0%, var(--lx-brand-700) 100%);
    display: flex; align-items: center; justify-content: center;
}
.lx-product-media::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 24px);
}
.lx-product-media i { font-size: 44px; color: rgba(215, 166, 240,.55); position: relative; }
.lx-product-media img { width: 100%; height: 100%; object-fit: cover; position: relative; }

/* Marketplace category filter chips — small clickable cards (icon + name, no description). */
.lx-sector-chips {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0 0 26px;
}
.lx-sector-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px;
    background: #fff; border: 1px solid var(--lx-line); border-radius: 999px;
    color: var(--lx-ink); font-size: 14.5px; font-weight: 600; line-height: 1;
    cursor: pointer; white-space: nowrap;
    transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.lx-sector-chip i { font-size: 15px; color: var(--lx-brand); transition: color .16s ease; }
.lx-sector-chip:hover { border-color: var(--lx-brand-400); box-shadow: var(--lx-shadow); transform: translateY(-1px); }
.lx-sector-chip.is-active { background: var(--lx-brand); border-color: var(--lx-brand); color: #fff; }
.lx-sector-chip.is-active i { color: #fff; }
[dir="rtl"] .lx-sector-chip { font-family: var(--lx-sans-ar); font-weight: 600; }

.lx-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lx-products.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }
.lx-products .fi-mkt-empty { grid-column: 1 / -1; text-align: center; color: var(--lx-muted); padding: 30px 0; margin: 0; }

.lx-product {
    background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lx-product:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow); border-color: var(--lx-line-2); }
.lx-product__link { text-decoration: none; display: flex; flex-direction: column; flex: 1; color: inherit; }
.lx-product__link:hover { text-decoration: none; }
.lx-product .lx-product-media { border-radius: 0; }

.lx-product__badge {
    position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
    background: var(--lx-orange); color: #fff; font-family: var(--lx-mono); font-weight: 600;
    font-size: 11.5px; letter-spacing: .04em; padding: 4px 9px; border-radius: 4px;
}
.lx-product__bulk {
    position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 2;
    background: rgba(215, 166, 240, .94); color: var(--lx-ink);
    font-family: var(--lx-mono); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 4px;
}
.lx-product__body { padding: 16px 16px 14px; display: flex; flex-direction: column; flex: 1; }
/* the category line reads as a specimen label code */
.lx-product__sector {
    font-family: var(--lx-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--lx-brand-600); font-weight: 500; margin-bottom: 8px;
}
[dir="rtl"] .lx-product__sector { font-family: var(--lx-sans-ar); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
/* Product names stay sentence-case and in the body face — scannability first. */
.lx-page h3.lx-product__name, h3.lx-product__name {
    font-family: var(--lx-sans); font-weight: 500; font-size: 15px; line-height: 1.45;
    color: var(--lx-ink); margin: 0 0 12px; text-transform: none; letter-spacing: -.005em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[dir="rtl"] .lx-page h3.lx-product__name, [dir="rtl"] h3.lx-product__name {
    font-family: var(--lx-sans-ar); font-weight: 600; letter-spacing: 0;
}
.lx-product__meta { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lx-product__price { font-family: var(--lx-mono); font-weight: 600; font-size: 17px; color: var(--lx-brand-700); }
.lx-product__price-was { font-size: 13px; color: var(--lx-muted-2); text-decoration: line-through; margin-inline-start: 7px; font-weight: 400; }
.lx-product__rating { font-size: 13px; color: var(--lx-muted); white-space: nowrap; }
.lx-product__rating i { color: #F5A623; }

.lx-product__actions { display: flex; gap: 8px; padding: 0 16px 16px; }
.lx-product__cart {
    flex: 1; min-width: 0; border: 0; background: var(--lx-brand); color: #fff; border-radius: var(--lx-r);
    padding: 11px 10px; font-family: var(--lx-head); font-weight: 600; font-size: 13.5px;
    letter-spacing: -.01em; text-transform: none; cursor: pointer; transition: background .15s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[dir="rtl"] .lx-product__cart { font-family: var(--lx-sans-ar); letter-spacing: 0; }
.lx-product__cart:hover { background: var(--lx-ink); }
.lx-product__cart:disabled { opacity: .6; cursor: not-allowed; }
.lx-product__wish {
    width: 42px; flex: 0 0 42px; border: 1px solid var(--lx-line-2); background: #fff;
    border-radius: var(--lx-r); color: var(--lx-muted); cursor: pointer; transition: all .15s ease;
}
.lx-product__wish:hover, .lx-product__wish.is-active { border-color: var(--lx-orange); color: var(--lx-orange); }

@media (max-width: 1024px) { .lx-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .lx-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 420px)  { .lx-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* --------------------------------------------------------- 16 · Utility --- */
.lx-divider { height: 1px; background: var(--lx-line); border: 0; margin: 0; }
.lx-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px;
    background: var(--lx-paper-2); color: var(--lx-brand-700);
    font-family: var(--lx-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
[dir="rtl"] .lx-badge { font-family: var(--lx-sans-ar); letter-spacing: 0; text-transform: none; font-size: 13px; }
.lx-badge--accent { background: rgba(215, 166, 240, .22); color: var(--lx-brand-700); }
.lx-prose h3 { font-size: 21px; margin: 32px 0 12px; }
.lx-prose h2 { font-size: 27px; margin: 36px 0 14px; }
.lx-prose p, .lx-prose li { font-size: 15.5px; color: #443A4C; line-height: 1.82; }
.lx-prose ul, .lx-prose ol { padding-inline-start: 22px; margin: 0 0 16px; }
.lx-prose li { margin-bottom: 8px; }

/* ------------------------------------------------------- 17 · Responsive -- */
@media (max-width: 1200px) {
    .lx-stats__grid { grid-template-columns: repeat(3, 1fr); }
    .lx-stats__item:nth-child(3) { border-inline-end: 0; }
    .lx-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lx-article__layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
}

@media (max-width: 1024px) {
    .lx-hero { padding: 76px 0 70px; }
    .lx-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .lx-hero__grid--split { grid-template-columns: 1fr; }
    .lx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-split { grid-template-columns: 1fr; gap: 34px; }
    .lx-contact-grid { grid-template-columns: 1fr; gap: 28px; }
    .lx-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
    .lx-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-article__layout { grid-template-columns: 1fr; gap: 36px; }
}

/* The full top link set plus the brand and the CTA only fit comfortably on a
   wide desktop. Below that, use the hamburger / offcanvas (which already lists
   every link) instead of squeezing the horizontal bar until items collide. */
@media (max-width: 1299px) {
    .main-menu { display: none !important; }
    .mobile-menu-icon { display: inline-flex; }
}

@media (max-width: 768px) {
    .lx-section { padding: 58px 0; }
    .lx-section__head { margin-bottom: 30px; }
    .lx-grid--2, .lx-grid--3, .lx-grid--4 { grid-template-columns: 1fr; }
    /* Grids tagged --m2 stay two-up on phones (e.g. the training objective tiles). */
    .lx-grid.lx-grid--m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    /* Corporate values cards stay two-up on phones. */
    .lx-grid.lx-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    /* Two dozen category cards stacked one-up makes the home page enormous on a
       phone, so they become a compact two-up index there. */
    .lx-grid.lx-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .lx-sectors .lx-card { padding: 18px 15px; }
    .lx-sectors .lx-card p { font-size: 13px; line-height: 1.55; }
    .lx-sectors .lx-card__icon { width: 38px; height: 38px; font-size: 16px; margin-bottom: 12px; }
    .lx-sectors .lx-card h3 { font-size: 15px; }
    .lx-sectors .lx-card__actions { gap: 6px; padding-top: 12px; }
    .lx-sectors .lx-card__link { font-size: 12.5px; }
    .lx-sectors .lx-card__link--alt { display: none; }
    .lx-vm { grid-template-columns: 1fr; }
    .lx-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .lx-stats__item { border-inline-end: 1px solid rgba(255,255,255,.07) !important; }
    .lx-stats__item:nth-child(2n) { border-inline-end: 0 !important; }
    .lx-hero__board-grid { grid-template-columns: repeat(2, 1fr); }
    .lx-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-news { grid-template-columns: 1fr; }
    .lx-steps { grid-template-columns: 1fr; }
    .lx-form__row { grid-template-columns: 1fr; }
    .lx-form { padding: 24px 20px; }
    .lx-cta__inner { flex-direction: column; align-items: flex-start; }
    /* minmax(0,1fr), not a bare 1fr: an auto-min track refuses to shrink below
       its content's min-content width, so the wide footer logo image plus the
       no-wrap brand name pushed this single column past the viewport. Since
       .lx-footer has overflow:hidden the column was clipped (the brand sat half
       off the inline-start edge) rather than scrolling. Let the track shrink,
       let the brand lockup wrap, and cap the logo image to its column. */
    .lx-footer__top { grid-template-columns: minmax(0, 1fr); }
    .lx-footer .lx-brand { flex-wrap: wrap; }
    .lx-footer .lx-brand__name { white-space: normal; }
    .lx-footer .lx-brand__mark { max-width: 100%; }
    .lx-banner { padding: 52px 0 46px; }
    .lx-container { padding-inline: 16px; }
    .navbar > .container { min-height: 64px; }
    .lx-brand__mark { width: 36px; height: 36px; flex: 0 0 36px; }
    .lx-brand__name { font-size: 18px; }
    .lx-brand__tag { font-size: 9.5px; }
    .add-product-btn { display: none; }
}

@media (max-width: 480px) {
    .lx-hero__cta { flex-direction: column; align-items: stretch; }
    .lx-hero__cta .lx-btn { width: 100%; }
    /* The two main calls go full width; the secondary trio becomes a tidy,
       equal-width 2-up grid so the buttons line up instead of wrapping into a
       lone, offset block. The odd last button spans the full row. */
    .lx-hero__cta--more {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .lx-hero__cta--more .lx-btn {
        width: 100%;
        flex: none;
        padding-inline: 10px;
    }
    .lx-hero__cta--more .lx-btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .lx-footer__newsletter { max-width: none; }
    .lx-grid.lx-sectors { grid-template-columns: 1fr; }
}

/* ---------------------------------------- 18 · Small-screen header fit ----- */
/* The header bar is hamburger + brand lockup + cart. On a 375px phone the
   brand name and the mono tagline together are wider than the space left over,
   which pushed the bar ~75px past the viewport and gave the whole page a
   horizontal scroll. Let the lockup shrink, step the type down, and drop the
   tagline on the narrowest phones — the wordmark alone still identifies the
   platform there. */
@media (max-width: 768px) {
    .navbar .logo { min-width: 0; flex: 1 1 auto; overflow: hidden; }
    .lx-brand { min-width: 0; gap: 10px; }
    .lx-brand__text { min-width: 0; }
    .lx-brand__name {
        font-size: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lx-brand__tag {
        font-size: 9px;
        letter-spacing: .08em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cart-icon-link { flex: 0 0 auto; }
}

@media (max-width: 420px) {
    .lx-brand__mark { width: 32px; height: 32px; flex: 0 0 32px; }
    .lx-brand__name { font-size: 15.5px; }
    .lx-brand__tag { display: none; }
}

/* Belt and braces: nothing on the storefront may introduce a sideways scroll.
   `clip` rather than `hidden`, and on body only — setting overflow-x:hidden on
   both html and body turns body into a scroll container, which makes body's
   clientHeight the whole document and breaks any position:sticky descendant.
   `clip` suppresses the sideways scroll without creating a scroll container. */
body { max-width: 100%; overflow-x: clip; }