/* =====================================================================
   Torgal — Complete Design System (style.css)
   Combined: tokens + reset + typography + utilities + components
   Version: 1.0 — June 2026
   Usage: <link rel="stylesheet" href="style.css">
   ===================================================================== */

/* =====================================================================
   Torgal — Global Design System
   File: style.css
   Purpose: Tokens, reset, typography, utilities, responsive base.
   Author: Design system v1.0 — June 2026
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;900&family=Inter:wght@400;600;700;900&display=swap');

/* =====================================================================
   DESIGN TOKENS
   ===================================================================== */
:root {
  /* Color — brand */
  --color-primary: #1F3864;            /* Deep navy — headlines, dark sections */
  --color-primary-90: rgba(31, 56, 100, 0.90);
  --color-primary-65: rgba(31, 56, 100, 0.65); /* Hero image overlay */
  --color-secondary: #2E75B6;          /* Mid blue — CTAs, H3, accents */
  --color-secondary-dark: #245C92;     /* CTA hover */

  /* Color — surface */
  --color-white: #FFFFFF;
  --color-bg-light: #F5F7FA;           /* Alternating section */
  --color-bg-section: #EBF3FA;         /* Subtle blue-tinted section */

  /* Color — text */
  --color-text: #595959;               /* Body text */
  --color-text-light: #888888;         /* Meta / captions */
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-dim: rgba(255, 255, 255, 0.72);

  /* Color — structure */
  --color-border: #CCCCCC;
  --color-border-soft: #E4E7EC;

  /* Type families */
  --font-hebrew: 'Heebo', 'Arial', sans-serif;        /* Primary Hebrew */
  --font-numeric: 'Inter', 'Heebo', sans-serif;       /* Numbers & English */

  /* Type scale (fluid) */
  --font-size-h1: clamp(2.4rem, 5vw, 4rem);           /* 38–64px */
  --font-size-h2: clamp(1.8rem, 3.5vw, 2.5rem);       /* 29–40px */
  --font-size-h3: clamp(1.3rem, 2vw, 1.6rem);         /* 21–26px */
  --font-size-body: 1.05rem;                          /* 16.8px */
  --font-size-small: 0.95rem;                         /* 15.2px */
  --font-size-label: 0.875rem;                        /* 14px floor */
  --line-height-body: 1.75;
  --line-height-tight: 1.2;

  /* Hero stat numbers */
  --stat-number-size: clamp(3rem, 6vw, 5rem);         /* 48–80px */

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;

  /* Layout */
  --section-padding: clamp(60px, 8vw, 120px);          /* Vertical rhythm */
  --container-max: 1200px;
  --nav-height: 72px;

  /* Shape */
  --radius-card: 2px;                                  /* Quiet, industrial */
  --radius-input: 2px;
  --border-accent-width: 4px;

  /* Motion */
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Elevation — used very sparingly */
  --shadow-card: 0 1px 2px rgba(31, 56, 100, 0.06), 0 4px 12px rgba(31, 56, 100, 0.04);
  --shadow-card-hover: 0 2px 4px rgba(31, 56, 100, 0.08), 0 12px 24px rgba(31, 56, 100, 0.08);
}

/* =====================================================================
   RESET — minimal, intentional
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }                /* Predictable sizing */
html { -webkit-text-size-adjust: 100%; }                          /* iOS auto-zoom guard */
body { margin: 0; }                                               /* Strip UA margin */
img, svg, video { display: block; max-width: 100%; height: auto; }/* Fluid media */
button { font: inherit; cursor: pointer; }                        /* Inherit type, signal action */
input, textarea, select, button { font: inherit; color: inherit; }/* Form parity */
a { color: inherit; text-decoration: none; }                      /* Style links per-context */
ul, ol { padding: 0; margin: 0; list-style: none; }               /* Lists reset, opt back in */
h1, h2, h3, h4, h5, h6, p { margin: 0; }                          /* Spacing via utilities */

/* =====================================================================
   RTL BASE
   ===================================================================== */
html[dir="rtl"] body { text-align: right; }                       /* Default text dir */
html[lang="he"] {
  font-family: var(--font-hebrew);                                /* Hebrew first */
  font-size: 16px;                                                /* Root scale */
}

body {
  font-family: var(--font-hebrew);                                /* Primary face */
  font-size: var(--font-size-body);                               /* Body size */
  line-height: var(--line-height-body);                           /* Readable rhythm */
  color: var(--color-text);                                       /* Mid-grey body */
  background: var(--color-white);                                 /* Default white canvas */
  -webkit-font-smoothing: antialiased;                            /* Crisper Hebrew on macOS */
  font-feature-settings: "kern" 1;                                /* Enable kerning */
}

/* =====================================================================
   TYPOGRAPHY SCALE
   ===================================================================== */
h1, .h1 {
  font-family: var(--font-hebrew);                                /* Hebrew display */
  font-size: var(--font-size-h1);                                 /* Largest scale */
  font-weight: 700;                                               /* Bold authority */
  line-height: var(--line-height-tight);                          /* Tight for impact */
  color: var(--color-primary);                                    /* Navy headline */
  letter-spacing: -0.01em;                                        /* Optical tightening */
}
h2, .h2 {
  font-family: var(--font-hebrew);
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary);
}
h3, .h3 {
  font-family: var(--font-hebrew);
  font-size: var(--font-size-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-secondary);                                  /* Blue accent rank */
}
p { color: var(--color-text); }                                   /* Body default */
small, .label {
  font-size: var(--font-size-label);                              /* 14px floor */
  color: var(--color-text-light);                                 /* Muted */
  letter-spacing: 0.02em;                                         /* Slight tracking */
}

/* Eyebrow / tag label — small uppercase Latin or normal Hebrew */
.eyebrow {
  display: inline-block;                                          /* Sizing */
  font-size: var(--font-size-label);                              /* Small */
  font-weight: 500;                                               /* Medium */
  color: var(--color-secondary);                                  /* Blue accent */
  letter-spacing: 0.04em;                                         /* Tracked */
  text-transform: none;                                           /* Hebrew has no case */
}
.eyebrow--light { color: var(--color-text-on-dark-dim); }         /* On dark backgrounds */

/* Numeric / English runs inside Hebrew flow */
.num, .en {
  font-family: var(--font-numeric);                               /* Inter */
  font-feature-settings: "tnum" 1, "lnum" 1;                      /* Tabular, lining */
  font-weight: 700;                                               /* Always bold */
}

/* =====================================================================
   LAYOUT UTILITIES
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);                                /* 1200px cap */
  margin-inline: auto;                                            /* Center */
  padding-inline: clamp(20px, 4vw, 40px);                         /* Fluid gutter */
}

.section {
  padding-block: var(--section-padding);                          /* 80px+ vertical */
}
.section--tight { padding-block: clamp(40px, 5vw, 72px); }        /* Inline mini-sections */
.section--dark {
  background: var(--color-primary);                               /* Navy block */
  color: var(--color-text-on-dark);                               /* White text */
}
.section--dark h1, .section--dark h2, .section--dark h3 {
  color: var(--color-text-on-dark);                               /* White headings */
}
.section--light { background: var(--color-bg-light); }            /* Soft grey */
.section--blue-tint { background: var(--color-bg-section); }      /* Subtle blue */

/* Visually hidden but accessible to screen readers */
.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;
}

/* Skip-to-content link — appears on focus */
.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -100px;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 18px;
  z-index: 1000;
  transition: top var(--transition-base);
}
.skip-link:focus { top: 12px; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex;                                           /* Icon + label */
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;                                               /* Mobile a11y floor */
  padding: 14px 28px;                                             /* Generous tap target */
  font-family: var(--font-hebrew);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--radius-card);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible {
  outline: 2px solid var(--color-secondary);                      /* Visible focus */
  outline-offset: 3px;
}

/* Primary — solid navy */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn--primary:hover { background: #182d52; border-color: #182d52; }

/* Secondary — solid blue (used for persistent BOM CTA in nav) */
.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}
.btn--secondary:hover {
  background: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

/* Ghost — outline only, used as secondary action next to primary */
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--ghost:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Ghost on dark background */
.btn--ghost-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.6);
}
.btn--ghost-light:hover {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
}

.btn--lg { min-height: 56px; padding: 16px 36px; font-size: 1.1rem; }
.btn--block { display: flex; width: 100%; }

/* =====================================================================
   FORM ELEMENTS — used by contact form
   ===================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;                                                       /* Label–input gap */
}
.field__label {
  font-size: var(--font-size-label);                              /* 14px */
  font-weight: 500;
  color: var(--color-primary);                                    /* Navy label */
}
.field__required { color: var(--color-secondary); }               /* Asterisk accent */

.input, .textarea, .select {
  width: 100%;
  min-height: 48px;                                               /* Tap-target floor */
  padding: 12px 14px;
  font-family: var(--font-hebrew);
  font-size: 1rem;
  color: var(--color-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.input::placeholder, .textarea::placeholder { color: #A8AEB8; }   /* Soft placeholder */
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(46, 117, 182, 0.15);                 /* Soft focus ring */
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

/* Checkbox row */
.checkbox-group {
  display: grid;
  grid-template-columns: 1fr 1fr;                                 /* 2-up by default */
  gap: var(--space-3);
}
.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-body);
  color: var(--color-text);
}
.checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--color-secondary);
  cursor: pointer;
}

.field__hint { font-size: var(--font-size-label); color: var(--color-text-light); }
.field__error { font-size: var(--font-size-label); color: #B22; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Tablet 769–1024px — handled by clamp() + grid auto-fit; nothing special required here */

/* Mobile ≤ 768px */
@media (max-width: 768px) {
  body { font-size: 1rem; }                                       /* 16px floor */
  .btn { min-height: 48px; }                                      /* Re-affirm tap floor */
  .checkbox-group { grid-template-columns: 1fr; }                 /* Stack checkboxes */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* =====================================================================
   COMPONENTS
   ===================================================================== */

/* =====================================================================
   Torgal — Component Stylesheet
   File: components.css
   Depends on: style.css (must be imported first)
   ===================================================================== */

/* =====================================================================
   NAV — sticky header, 72px, navy, RTL aware
   ===================================================================== */
.nav {
  position: sticky;                                               /* Stays on scroll */
  top: 0;
  z-index: 100;
  height: var(--nav-height);                                      /* 72px exactly */
  background: var(--color-primary);                               /* Navy */
  color: var(--color-white);
  border-block-end: 1px solid rgba(255, 255, 255, 0.06);          /* Hairline edge */
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 100%;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-hebrew);
  font-weight: 900;                                               /* Strong wordmark */
  font-size: 1.5rem;
  color: var(--color-white);
  letter-spacing: 0.02em;
}
.nav__brand-mark {
  display: inline-block;
  width: 28px; height: 28px;
  background: var(--color-secondary);
  position: relative;
}
.nav__brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--color-primary);
}
.nav__brand-tag {
  font-family: var(--font-numeric);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-on-dark-dim);
  letter-spacing: 0.12em;
  margin-inline-start: 4px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-7);                                            /* Roomy link spacing */
}
.nav__link {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-on-dark-dim);
  padding-block: 8px;
  border-block-end: 2px solid transparent;                        /* Reserve underline space */
  transition: color var(--transition-base), border-color var(--transition-base);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--color-white);
  border-block-end-color: var(--color-secondary);                 /* Blue underline */
}

.nav__cta { white-space: nowrap; }                                /* Don't wrap BOM CTA */

.nav__hamburger {
  display: none;                                                  /* Desktop hidden */
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-card);
  align-items: center;
  justify-content: center;
}
.nav__hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--color-white);
  box-shadow: 0 -6px 0 var(--color-white), 0 6px 0 var(--color-white);
}

@media (max-width: 768px) {
  .nav__links { display: none; }                                  /* Hide desktop links */
  .nav__cta { display: none; }                                    /* Move CTA into menu */
  .nav__hamburger { display: inline-flex; }
}

/* =====================================================================
   HERO — full bleed with overlay, RTL text right
   ===================================================================== */
.hero {
  position: relative;
  isolation: isolate;                                             /* Contain stacking */
  min-height: 560px;
  background: var(--color-primary);                               /* Fallback solid */
  color: var(--color-white);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-primary);                               /* Image goes here */
  overflow: hidden;
}
/* Striped placeholder until a real factory photo is dropped in */
.hero__media[data-placeholder] {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.04) 0 12px,
      rgba(255, 255, 255, 0.00) 12px 24px
    ),
    linear-gradient(135deg, #1F3864 0%, #14254A 100%);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary-65);                            /* 65% navy overlay */
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--section-padding);
  max-width: 820px;                                               /* Readable measure */
}
.hero--compact { min-height: 360px; }                             /* Sub-pages */
.hero--compact .hero__inner { padding-block: clamp(48px, 6vw, 96px); }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-card);
  font-size: var(--font-size-label);
  color: var(--color-white);
  margin-block-end: var(--space-5);
}
.hero__eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-secondary);
}
.hero__title {
  font-size: var(--font-size-h1);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-white);
  margin-block-end: var(--space-5);
  text-wrap: balance;
}
.hero__subtitle {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--color-text-on-dark-dim);
  margin-block-end: var(--space-7);
  max-width: 680px;
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* =====================================================================
   STAT BAR — 4 hero numbers on navy
   ===================================================================== */
.stat-bar {
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: clamp(56px, 7vw, 96px);
}
.stat-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);       /* RTL-safe divider */
}
.stat:first-child { border-inline-start: 0; }
.stat__number {
  font-family: var(--font-numeric);
  font-size: var(--stat-number-size);
  font-weight: 900;
  line-height: 1;
  color: var(--color-white);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.stat__label {
  font-size: var(--font-size-body);
  color: var(--color-text-on-dark-dim);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .stat-bar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); }
  .stat { border-inline-start: 0; padding-inline: 0; }
}

/* =====================================================================
   SERVICE CARD — 3-up, border-top accent
   ===================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-top: var(--border-accent-width) solid var(--color-secondary); /* Accent */
  padding: var(--space-7) var(--space-6);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.service-card:hover {
  transform: translateY(-2px);                                    /* Quiet lift */
  box-shadow: var(--shadow-card-hover);
}
.service-card__icon {
  display: inline-flex;
  width: 44px; height: 44px;
  background: var(--color-bg-section);
  color: var(--color-secondary);
  align-items: center;
  justify-content: center;
  margin-block-end: var(--space-3);
}
.service-card__title {
  font-size: var(--font-size-h3);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.3;
}
.service-card__title-en {
  display: block;
  font-family: var(--font-numeric);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-secondary);
  letter-spacing: 0.06em;
  margin-block-end: var(--space-2);
}
.service-card__body { color: var(--color-text); flex: 1; }
.service-card__link {
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.service-card__link:hover { color: var(--color-secondary-dark); }
.service-card__link-arrow { font-family: var(--font-numeric); font-weight: 700; }

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

/* =====================================================================
   APPROVALS STRIP — dark band, defence-sector logos / wordmarks
   ===================================================================== */
.approvals-strip {
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: clamp(40px, 5vw, 72px);
}
.approvals-strip__label {
  text-align: center;
  font-size: var(--font-size-label);
  color: var(--color-text-on-dark-dim);
  letter-spacing: 0.08em;
  margin-block-end: var(--space-6);
}
.approvals-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);
}
.approvals-strip__item {
  font-family: var(--font-hebrew);
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.approvals-strip__dot {
  width: 4px; height: 4px;
  background: var(--color-secondary);
  border-radius: 50%;
}

/* =====================================================================
   CTA SECTION — centered call-to-action block
   ===================================================================== */
.cta-section {
  text-align: center;
  background: var(--color-white);
  padding-block: var(--section-padding);
}
.cta-section--dark {
  background: var(--color-primary);
  color: var(--color-white);
}
.cta-section__inner {
  max-width: 720px;
  margin-inline: auto;
}
.cta-section__title {
  font-size: var(--font-size-h2);
  font-weight: 700;
  margin-block-end: var(--space-4);
  color: var(--color-primary);
}
.cta-section--dark .cta-section__title { color: var(--color-white); }
.cta-section__body {
  font-size: 1.1rem;
  color: var(--color-text);
  margin-block-end: var(--space-7);
}
.cta-section--dark .cta-section__body { color: var(--color-text-on-dark-dim); }
.cta-section__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* =====================================================================
   SPLIT — service detail / about story (image + text)
   ===================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-7), 6vw, var(--space-10));
  align-items: center;
}
.split--reverse > :first-child { order: 2; }                      /* Flip media side */
.split__media { position: relative; }
.split__title { margin-block-end: var(--space-4); }
.split__lead {
  font-size: 1.1rem;
  color: var(--color-text);
  margin-block-end: var(--space-5);
  line-height: 1.7;
}
.split__list { display: flex; flex-direction: column; gap: var(--space-3); }
.split__list-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--color-text);
  line-height: 1.6;
}
.split__list-bullet {
  flex: 0 0 auto;
  margin-block-start: 10px;
  width: 6px; height: 6px;
  background: var(--color-secondary);
}
.split__actions { margin-block-start: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
}

/* =====================================================================
   FIGURE PLACEHOLDER — striped panel for factory photos
   ===================================================================== */
.figure-placeholder {
  margin: 0;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-bg-section) 0 14px,
      var(--color-bg-light)  14px 28px
    );
  border: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}
.figure-placeholder__caption {
  font-family: var(--font-numeric);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-secondary);
  letter-spacing: 0.06em;
  background: var(--color-white);
  padding: 8px 14px;
  border: 1px solid var(--color-border-soft);
}

/* =====================================================================
   CONTACT FORM — split 40/60
   ===================================================================== */
.contact-split {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: clamp(var(--space-7), 5vw, var(--space-9));
  align-items: start;
}
@media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; } }

.contact-info { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-info__block { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-info__label {
  font-size: var(--font-size-label);
  color: var(--color-text-light);
  letter-spacing: 0.04em;
}
.contact-info__value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.4;
}
.contact-info__value .num { font-family: var(--font-numeric); }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  border-top: var(--border-accent-width) solid var(--color-secondary);
}
.contact-form .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } }

.form-success {
  display: none;                                                  /* JS toggles */
  padding: var(--space-4);
  background: var(--color-bg-section);
  border-inline-start: 4px solid var(--color-secondary);
  color: var(--color-primary);
  font-weight: 500;
  margin-block-end: var(--space-5);
  grid-column: 1 / -1;
}
.form-success.is-visible { display: block; }

/* =====================================================================
   FOOTER — 4-col dark
   ===================================================================== */
.footer {
  background: var(--color-primary);
  color: var(--color-text-on-dark-dim);
  padding-block: var(--space-9) var(--space-6);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
}
.footer__col-title {
  font-size: var(--font-size-label);
  color: var(--color-white);
  letter-spacing: 0.08em;
  margin-block-end: var(--space-4);
  font-weight: 600;
}
.footer__brand-line {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-block: var(--space-3) var(--space-4);
}
.footer__since {
  display: inline-block;
  font-family: var(--font-numeric);
  font-weight: 700;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
.footer__list { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__list a {
  color: var(--color-text-on-dark-dim);
  font-size: 0.95rem;
  transition: color var(--transition-base);
}
.footer__list a:hover { color: var(--color-white); }
.footer__contact-line { font-size: 0.95rem; line-height: 1.7; }
.footer__contact-line .num { font-family: var(--font-numeric); color: var(--color-white); }
.footer__bottom {
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  font-size: var(--font-size-label);
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   TIMELINE — About page company history
   ===================================================================== */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--color-border-soft);
}
.timeline__item { position: relative; display: flex; flex-direction: column; gap: 4px; }
.timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-6) - 6px);            /* Centered on rail */
  top: 6px;
  width: 12px; height: 12px;
  background: var(--color-secondary);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-secondary);
}
.timeline__year {
  font-family: var(--font-numeric);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}
.timeline__body { color: var(--color-text); }

/* =====================================================================
   APPROVALS GRID — 2x3 certification cards
   ===================================================================== */
.approvals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.approval-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-inline-start: var(--border-accent-width) solid var(--color-secondary);
  padding: var(--space-6);
}
.approval-card__name { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); }
.approval-card__role { font-size: 0.95rem; color: var(--color-text); }
@media (max-width: 900px) { .approvals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .approvals-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   WHY-CHOOSE GRID — 4 blocks, About page
   ===================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.why-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.why-card__num {
  font-family: var(--font-numeric);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--color-secondary);
  line-height: 1;
}
.why-card__title { font-size: 1.15rem; font-weight: 700; color: var(--color-primary); }
.why-card__body { font-size: 0.98rem; color: var(--color-text); }

@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); } }
@media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   MAP EMBED
   ===================================================================== */
.map-section { padding-block: var(--space-9); background: var(--color-bg-light); }
.map-section__label {
  font-size: 1.1rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-block-end: var(--space-4);
}
.map-embed {
  height: 300px;
  background:
    repeating-linear-gradient(45deg, #DDE6F2 0 16px, #E8EEF7 16px 32px);
  border: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  font-family: var(--font-numeric);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* =====================================================================
   PAGE LEAD — small intro under sub-page heros
   ===================================================================== */
.page-lead { max-width: 720px; }
.page-lead__title { color: var(--color-white); margin-block-end: var(--space-3); }
.page-lead__body { color: var(--color-text-on-dark-dim); font-size: 1.1rem; }