/* ==========================================================================
   ZYDEX GLOBAL DESIGN SYSTEM v1.0
   --------------------------------------------------------------------------
   This file defines the foundational design tokens and base styles shared
   by every current and future page of the Zydex Group website.

   DO NOT add page-specific rules here. Page-specific styling belongs in the
   page's own stylesheet (e.g. home.css). Reusable UI components (buttons,
   cards, navigation, footer, etc.) belong in zydex-components.css.

   Load order on every page:
     1. zydex-design-system.css   (this file — tokens + base)
     2. zydex-components.css      (reusable components)
     3. [page].css                (page-specific layout)
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------------- */
:root {

  /* --- BRAND COLOUR PALETTE ---------------------------------------------
     Primary   — Zydex Ink: a deep marine/petrol blue. Scientific, precise,
                 institutional. Used for wordmark, key UI, dark sections.
     Secondary — Zydex Graphite: a warm near-black for text and the deepest
                 backgrounds. Never pure #000.
     Accent    — Zydex Verdigris: a desaturated teal-green representing the
                 conservation/sustainability thread. Used sparingly as a
                 signal colour — never as a decorative wash.
     ------------------------------------------------------------------- */
  --zx-color-primary: #0B2B3C;
  --zx-color-primary-light: #133F56;
  --zx-color-primary-dark: #071B26;

  --zx-color-secondary: #171A1C;
  --zx-color-secondary-light: #262B2E;

  --zx-color-accent: #4C8C7B;
  --zx-color-accent-light: #6FA893;
  --zx-color-accent-dark: #396A5D;

  /* --- NEUTRALS / TEXT / SURFACE ---------------------------------------- */
  --zx-color-text-primary: #14181B;
  --zx-color-text-secondary: #545E5D;
  --zx-color-text-muted: #7B8482;
  --zx-color-text-on-dark: #F4F5F2;
  --zx-color-text-on-dark-muted: #AAB3B0;

  --zx-color-background: #F5F5F2;
  --zx-color-surface: #FFFFFF;
  --zx-color-surface-alt: #EFEFEA;
  --zx-color-border: #DEDED7;
  --zx-color-border-on-dark: rgba(244, 245, 242, 0.16);

  --zx-color-dark-section: #0E1517;
  --zx-color-dark-section-alt: #0B2B3C;
  --zx-color-light-section: #F5F5F2;

  /* --- PASTEL BACKGROUND FAMILY -------------------------------------------
     A controlled set of near-white, barely-there section tints — used to
     break up an otherwise white-dominant page without ever reading as
     "colourful." Each is intended for ONE section's background at a time,
     never for cards/boxes/icons within a section. Text on top of any
     pastel still uses the standard --zx-color-text-primary / -secondary
     tokens; contrast was checked against text-primary for each.
     ------------------------------------------------------------------- */
  --zx-color-warm-white: #FAF8F4;     /* a touch warmer than pure white */
  --zx-color-pastel-blue: #EEF3F6;    /* very pale blue — cool, technical */
  --zx-color-pastel-sage: #EFF3EE;    /* very pale sage — sustainability */
  --zx-color-pastel-stone: #F6F1E9;   /* warm stone/sand — human warmth */
  --zx-color-pastel-aqua: #EAF3F1;    /* extremely light aqua — global/water */
  --zx-color-pastel-grey: #F1F2F0;    /* subtle cool grey — neutral break */

  --zx-color-focus: #4C8C7B;
  --zx-color-overlay: rgba(11, 21, 23, 0.55);

  /* --- TYPOGRAPHY --------------------------------------------------------
     Display / heading  — "Newsreader" (serif): editorial, institutional,
                           used for headlines that carry the brand voice.
     UI / body           — "Inter" (grotesk sans): precise and highly
                           legible for body copy, navigation and interface.
     ------------------------------------------------------------------- */
  --zx-font-display: 'Newsreader', 'Georgia', serif;
  --zx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --zx-fs-display: clamp(2.75rem, 1.9rem + 3.6vw, 5.5rem);
  --zx-fs-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --zx-fs-h2: clamp(1.85rem, 1.5rem + 1.6vw, 2.75rem);
  --zx-fs-h3: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  --zx-fs-h4: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  --zx-fs-body-lg: clamp(1.1rem, 1.02rem + 0.3vw, 1.3rem);
  --zx-fs-body: 1.0625rem;
  --zx-fs-small: 0.9rem;
  --zx-fs-nav: 0.95rem;
  --zx-fs-label: 0.8125rem;
  --zx-fs-button: 0.95rem;
  --zx-fs-stat: clamp(2.5rem, 2rem + 2vw, 4rem);

  --zx-lh-display: 1.05;
  --zx-lh-heading: 1.15;
  --zx-lh-body: 1.65;
  --zx-lh-tight: 1.3;

  --zx-fw-regular: 400;
  --zx-fw-medium: 500;
  --zx-fw-semibold: 600;
  --zx-fw-display-regular: 400;
  --zx-fw-display-medium: 500;

  --zx-ls-label: 0.06em;
  --zx-ls-tight: -0.01em;
  --zx-ls-display: -0.015em;

  /* --- SPACING SCALE (4px base) ------------------------------------------ */
  --zx-space-3xs: 0.25rem;   /* 4px */
  --zx-space-2xs: 0.5rem;    /* 8px */
  --zx-space-xs: 0.75rem;    /* 12px */
  --zx-space-sm: 1rem;       /* 16px */
  --zx-space-md: 1.5rem;     /* 24px */
  --zx-space-lg: 2.25rem;    /* 36px */
  --zx-space-xl: 3.5rem;     /* 56px */
  --zx-space-2xl: 5rem;      /* 80px */
  --zx-space-3xl: 7.5rem;    /* 120px */
  --zx-space-4xl: 10rem;     /* 160px */

  --zx-section-padding-y: clamp(3rem, 1.6rem + 6vw, 8rem);
  --zx-section-padding-y-sm: clamp(2.25rem, 1.4rem + 4vw, 5rem);

  /* --- CONTAINER WIDTHS --------------------------------------------------- */
  --zx-container-max: 1600px;
  --zx-container-wide: 1360px;
  --zx-container-normal: 1160px;
  --zx-container-text: 720px;
  --zx-container-gutter: clamp(1.5rem, 1rem + 2.5vw, 4rem);

  /* --- BORDER RADIUS (v2.1 — rounded, card-based system) --------------------
     Superseded from the v1.0 "restrained" 2–6px scale by explicit
     management direction: rounded corners are now a deliberate part of
     the Zydex visual language, used consistently across the card system
     (see zydex-components.css "CARD SYSTEM"). Buttons and small controls
     keep a tighter radius so they don't read as pill-shaped.
     ------------------------------------------------------------------- */
  --zx-radius-xs: 8px;    /* small controls: tags, chips, small media crops */
  --zx-radius-sm: clamp(12px, 1.2vw + 8px, 16px);   /* small/supporting cards: insight cards */
  --zx-radius-md: clamp(14px, 1.6vw + 10px, 20px);  /* standard cards: stat, business, innovation */
  --zx-radius-lg: clamp(16px, 2.4vw + 10px, 28px);  /* large feature cards: case study, sustainability */
  --zx-radius-xl: clamp(18px, 3vw + 10px, 32px);    /* hero card, final CTA — the largest containers */
  --zx-radius-pill: 999px;

  /* --- SHADOWS (sophisticated, subtle only) -------------------------------- */
  --zx-shadow-sm: 0 1px 2px rgba(14, 21, 23, 0.06);
  --zx-shadow-md: 0 8px 24px rgba(14, 21, 23, 0.08);
  --zx-shadow-lg: 0 20px 48px rgba(14, 21, 23, 0.12);
  --zx-shadow-card: 0 2px 12px rgba(14, 21, 23, 0.05);
  --zx-shadow-card-hover: 0 12px 32px rgba(14, 21, 23, 0.09);
  --zx-shadow-focus: 0 0 0 3px rgba(76, 140, 123, 0.35);

  /* --- CARD SPACING (v2.1) --------------------------------------------------
     The gap between card modules, and the internal padding within a card,
     are distinct from the general spacing scale so the "card rhythm" can
     be tuned in one place. Both are still built from the base scale.
     ------------------------------------------------------------------- */
  --zx-card-gap: var(--zx-space-lg);
  --zx-card-gap-lg: var(--zx-space-xl);
  --zx-card-padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --zx-card-padding-lg: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);

  /* --- TRANSITIONS ---------------------------------------------------------- */
  --zx-ease: cubic-bezier(0.35, 0.02, 0.14, 1);
  --zx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --zx-duration-fast: 180ms;
  --zx-duration-base: 320ms;
  --zx-duration-slow: 620ms;

  /* --- Z-INDEX SCALE ---------------------------------------------------------- */
  --zx-z-nav: 100;
  --zx-z-overlay: 200;
  --zx-z-modal: 300;
}

/* -----------------------------------------------------------------------
   2. BREAKPOINTS (reference — used inside media queries throughout)
   -----------------------------------------------------------------------
   Desktop wide   : 1920px and up
   Desktop        : 1440px
   Laptop         : 1280px
   Tablet landscape: 1024px
   Tablet         : 768px
   Mobile large   : 430px
   Mobile         : 390px
   Small mobile   : 360px
   ------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--zx-font-body);
  font-size: var(--zx-fs-body);
  line-height: var(--zx-lh-body);
  color: var(--zx-color-text-primary);
  background-color: var(--zx-color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--zx-fw-display-regular);
}

p {
  margin: 0;
}

/* -----------------------------------------------------------------------
   4. TYPOGRAPHY UTILITY CLASSES
   ----------------------------------------------------------------------- */
.zx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--zx-space-2xs);
  font-family: var(--zx-font-body);
  font-size: var(--zx-fs-label);
  font-weight: var(--zx-fw-medium);
  letter-spacing: var(--zx-ls-label);
  text-transform: uppercase;
  color: var(--zx-color-accent-dark);
}

.zx-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

.zx-on-dark .zx-eyebrow {
  color: var(--zx-color-accent-light);
}

.zx-display {
  font-family: var(--zx-font-display);
  font-size: var(--zx-fs-display);
  line-height: var(--zx-lh-display);
  letter-spacing: var(--zx-ls-display);
  font-weight: var(--zx-fw-display-regular);
  color: var(--zx-color-text-primary);
}

.zx-h1 {
  font-family: var(--zx-font-display);
  font-size: var(--zx-fs-h1);
  line-height: var(--zx-lh-heading);
  letter-spacing: var(--zx-ls-tight);
  font-weight: var(--zx-fw-display-regular);
}

.zx-h2 {
  font-family: var(--zx-font-display);
  font-size: var(--zx-fs-h2);
  line-height: var(--zx-lh-heading);
  letter-spacing: var(--zx-ls-tight);
  font-weight: var(--zx-fw-display-regular);
}

.zx-h3 {
  font-family: var(--zx-font-display);
  font-size: var(--zx-fs-h3);
  line-height: var(--zx-lh-heading);
  font-weight: var(--zx-fw-display-medium);
}

.zx-h4 {
  font-family: var(--zx-font-body);
  font-size: var(--zx-fs-h4);
  line-height: var(--zx-lh-tight);
  font-weight: var(--zx-fw-semibold);
}

.zx-body-lg {
  font-size: var(--zx-fs-body-lg);
  line-height: var(--zx-lh-body);
  color: var(--zx-color-text-secondary);
  font-weight: var(--zx-fw-regular);
}

.zx-body {
  font-size: var(--zx-fs-body);
  line-height: var(--zx-lh-body);
  color: var(--zx-color-text-secondary);
}

.zx-small {
  font-size: var(--zx-fs-small);
  color: var(--zx-color-text-muted);
}

.zx-on-dark {
  color: var(--zx-color-text-on-dark);
}

.zx-on-dark .zx-body,
.zx-on-dark .zx-body-lg {
  color: var(--zx-color-text-on-dark-muted);
}

.zx-on-dark.zx-display,
.zx-on-dark .zx-h1,
.zx-on-dark .zx-h2,
.zx-on-dark .zx-h3 {
  color: var(--zx-color-text-on-dark);
}

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

.zx-container--wide {
  max-width: var(--zx-container-wide);
}

.zx-container--max {
  max-width: var(--zx-container-max);
}

.zx-container--text {
  max-width: var(--zx-container-text);
}

.zx-section {
  position: relative;
  padding-block: var(--zx-section-padding-y);
}

.zx-section--sm {
  padding-block: var(--zx-section-padding-y-sm);
}

.zx-section--light {
  background-color: var(--zx-color-light-section);
}

.zx-section--surface {
  background-color: var(--zx-color-surface);
}

.zx-section--warm {
  background-color: var(--zx-color-warm-white);
}

.zx-section--pastel-blue {
  background-color: var(--zx-color-pastel-blue);
}

.zx-section--pastel-sage {
  background-color: var(--zx-color-pastel-sage);
}

.zx-section--pastel-stone {
  background-color: var(--zx-color-pastel-stone);
}

.zx-section--pastel-aqua {
  background-color: var(--zx-color-pastel-aqua);
}

.zx-section--pastel-grey {
  background-color: var(--zx-color-pastel-grey);
}

.zx-section--dark {
  background-color: var(--zx-color-dark-section);
}

.zx-section--dark-blue {
  background-color: var(--zx-color-dark-section-alt);
}

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

.zx-skip-link {
  position: absolute;
  left: var(--zx-space-sm);
  top: -100px;
  z-index: var(--zx-z-modal);
  background: var(--zx-color-primary);
  color: var(--zx-color-text-on-dark);
  padding: var(--zx-space-xs) var(--zx-space-md);
  border-radius: var(--zx-radius-md);
  transition: top var(--zx-duration-fast) var(--zx-ease);
}

.zx-skip-link:focus {
  top: var(--zx-space-sm);
}

/* -----------------------------------------------------------------------
   6. ACCESSIBILITY — FOCUS STATES
   ----------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--zx-color-focus);
  outline-offset: 3px;
  border-radius: var(--zx-radius-sm);
}

.zx-on-dark :focus-visible {
  outline-color: var(--zx-color-accent-light);
}

/* -----------------------------------------------------------------------
   7. 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;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------
   8. REVEAL-ON-SCROLL PRIMITIVE (progressively enhanced via JS)
   ----------------------------------------------------------------------- */
.zx-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--zx-duration-slow) var(--zx-ease-out),
              transform var(--zx-duration-slow) var(--zx-ease-out);
}

.zx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.zx-js-disabled .zx-reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .zx-reveal {
    opacity: 1;
    transform: none;
  }
}