/* ==========================================================================
   Design tokens — the ONLY place for colours, fonts and sizes.
   Colours from "SPS_08 specification" (logo package). When the designer
   delivers final values, change them here; nothing else needs to change.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cyrillic subset: downloaded only on pages that contain Cyrillic text (BG). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* Brand colours (SPS_08 specification, sRGB) */
  --c-ink: #202c32;        /* anthracite: text, headings, logo letters */
  --c-accent: #00aee5;     /* cyan: rules, icons, button fill. NEVER as text on light bg (2.6:1) */
  --c-on-dark: #c8cdd2;    /* light grey: text on dark background */
  --c-dark: #12181d;       /* dark background: footer only */
  --c-bg: #ffffff;
  --c-bg-alt: #f4f6f8;     /* alternate section background */

  /* Derived colours (not in the brand spec; chosen for WCAG AA) */
  --c-link: #006c94;       /* dark cyan for text links: 5.9:1 on white, 5.4:1 on --c-bg-alt */
  --c-muted: #5a6670;      /* secondary text: 5.9:1 on white, 5.4:1 on --c-bg-alt */
  --c-muted-on-dark: #8a949c; /* secondary text on dark: 5.8:1 */
  --c-line: #d5dadf;       /* borders, table rules (decorative, no contrast requirement) */
  --c-todo: #fff3bf;       /* highlight for [TODO] markers during review */

  /* Typography */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* serial numbers, codes */

  --fs-sm: 0.875rem;   /* 14px: captions, footer */
  --fs-base: 1.0625rem;/* 17px: body */
  --fs-lg: 1.25rem;    /* 20px: lead text */
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h1: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --lh-tight: 1.2;
  --lh-base: 1.6;
  --fw-regular: 400;
  --fw-bold: 600;

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  /* Layout */
  --container: 72rem;      /* 1152px */
  --container-text: 44rem; /* readable line length for running text */
  --gutter: 1.25rem;
  --radius: 2px;           /* almost square: engineering look */
  --rule: 2px;             /* thickness of cyan accent rules */
}

/* ==========================================================================
   Base: reset and element defaults. No classes here.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

h1, h2, h3, h4 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p, ul, ol, dl, table { margin: 0 0 var(--sp-4); }

a { color: var(--c-link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--c-link);
  outline-offset: 2px;
}

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

code, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); }
th { font-weight: var(--fw-bold); }

hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-8) 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Layout: container, sections, grid. Mobile first.
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sp-12); }
.section--alt { background: var(--c-bg-alt); }
@media (min-width: 48rem) { .section { padding-block: var(--sp-16); } }

.prose { max-width: var(--container-text); }
.lead { font-size: var(--fs-lg); color: var(--c-muted); max-width: var(--container-text); }

/* Simple responsive grid: 1 column on phones, 2 on tablets, n on desktop */
.grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Two columns: text + aside (contact page, product pages) */
.split { display: grid; gap: var(--sp-8); }
@media (min-width: 64rem) { .split { grid-template-columns: 3fr 2fr; gap: var(--sp-12); } }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100%;
  background: var(--c-ink); color: #fff; padding: var(--sp-2) var(--sp-4); z-index: 10;
}
.skip-link:focus { top: var(--sp-2); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   Components. One block per component, BEM-style names.
   ========================================================================== */

/* --- Header ------------------------------------------------------------ */
.site-header { border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 4.5rem;
}
.site-header__logo { display: block; flex: none; }
.site-header__logo img { width: 8.5rem; } /* monogram: above the 100px minimum from the logo spec */

.nav-toggle {
  display: none; /* shown only when JS is available, see .js rule below */
  font: inherit; font-weight: var(--fw-bold); color: var(--c-ink);
  background: none; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); cursor: pointer;
}

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-6); }
.site-nav a { color: var(--c-ink); text-decoration: none; font-weight: var(--fw-bold); padding-block: var(--sp-2); display: inline-block; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { box-shadow: inset 0 calc(-1 * var(--rule)) 0 var(--c-accent); }

.lang-switch { display: flex; gap: var(--sp-1); font-size: var(--fs-sm); }
.lang-switch > a, .lang-switch > span {
  display: inline-block; padding: var(--sp-1) var(--sp-2); text-decoration: none;
  color: var(--c-ink); border: 1px solid transparent; border-radius: var(--radius);
}
.lang-switch > a:hover { border-color: var(--c-line); }
.lang-switch [aria-current="true"] { border-color: var(--c-ink); font-weight: var(--fw-bold); }

/* Mobile: with JS the nav collapses behind the toggle button; without JS it stays visible. */
@media (max-width: 63.99rem) {
  .site-header__inner { flex-wrap: wrap; gap: var(--sp-3); }
  .site-header__logo img { width: 7rem; } /* 112px: still above the 100px monogram minimum */
  /* phone order: logo · language · menu button, then the opened menu on its own row */
  .lang-switch { order: 1; margin-left: auto; }
  .nav-toggle { order: 2; }
  .site-nav { order: 3; }
  .js .nav-toggle { display: inline-block; }
  .js .site-nav { display: none; flex-basis: 100%; padding-bottom: var(--sp-4); }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; }
}
@media (min-width: 64rem) {
  .site-nav { margin-left: auto; }
}

/* --- Footer ------------------------------------------------------------ */
.site-footer { background: var(--c-dark); color: var(--c-on-dark); font-size: var(--fs-sm); padding-block: var(--sp-12) var(--sp-8); }
.site-footer a { color: var(--c-on-dark); }
.site-footer__logo { width: 15rem; margin-bottom: var(--sp-6); } /* full logo: at the 240px minimum */
.site-footer__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted-on-dark); margin-bottom: var(--sp-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-block; padding-block: var(--sp-1); } /* ≥24px touch target (WCAG 2.5.8) */
.site-footer address { font-style: normal; }
.site-footer__legal { border-top: 1px solid #2a343c; margin-top: var(--sp-8); padding-top: var(--sp-4); color: var(--c-muted-on-dark); }

/* --- Page head (title block at the top of inner pages) ------------------- */
.page-head { padding-block: var(--sp-12) var(--sp-8); border-bottom: 1px solid var(--c-line); }
.page-head h1 { max-width: 40rem; }
.breadcrumb { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--c-muted); }

/* --- Section heading with short cyan rule (the one accent per section) -- */
.eyebrow {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: ""; display: block; width: 2.5rem; height: var(--rule);
  background: var(--c-accent); margin-bottom: var(--sp-3);
}

/* --- Hero (home) ------------------------------------------------------- */
.hero { padding-block: var(--sp-16) var(--sp-12); }
.hero h1 { max-width: 46rem; }
.hero .split { align-items: center; }
.hero .lead { margin-bottom: var(--sp-8); }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-block; font: inherit; font-weight: var(--fw-bold); text-decoration: none;
  padding: var(--sp-3) var(--sp-6); border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; line-height: 1.2;
}
/* Primary: cyan fill with anthracite text (5.6:1). White text on cyan would fail AA. */
.btn--primary { background: var(--c-accent); color: var(--c-ink); }
.btn--primary:hover { background: #33c0eb; }
.btn--secondary { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--secondary:hover { background: var(--c-bg-alt); }

/* --- Card -------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-6);
}
.section--alt .card { border-color: transparent; }
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--c-muted); }
.card__link { margin-top: auto; font-weight: var(--fw-bold); }
.card .photo-placeholder { margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-6); }

/* --- Numbered steps ("How we work") ------------------------------------ */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--sp-6); }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(5, 1fr); } }
.steps li { counter-increment: step; border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
.steps li::before {
  content: counter(step, decimal-leading-zero); display: block;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-2);
}

/* --- Facts list (trust block, technical frame) ------------------------- */
.facts { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 48rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
.facts li { padding-left: var(--sp-4); border-left: var(--rule) solid var(--c-accent); }

/* --- Spec table (product technical data) ------------------------------- */
.spec-table th { width: 40%; color: var(--c-muted); font-weight: var(--fw-regular); }
.spec-table td { font-weight: var(--fw-bold); }

/* --- Serial number / code ---------------------------------------------- */
.serial {
  font-family: var(--font-mono); font-size: 0.95em; white-space: nowrap;
  background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 0.1em 0.4em;
}

/* --- Photo placeholder (until real photos exist) ----------------------- */
.photo-placeholder {
  margin: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(45deg, var(--c-bg-alt), var(--c-bg-alt) 10px, #eceff2 10px, #eceff2 20px);
  border: 1px dashed #aab2b9; color: var(--c-muted); font-size: var(--fs-sm); padding: var(--sp-4);
  width: 100%;
}
.prose .photo-placeholder, .prose picture { margin-block: var(--sp-8); }
.prose picture { display: block; }
.prose h2 { margin-top: var(--sp-8); }
.photo-placeholder__id { display: block; font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--c-ink); }
picture img { width: 100%; height: auto; }
.gallery { display: grid; gap: var(--sp-6); align-content: start; }

/* --- TODO marker (visible during review; must be gone before launch) ---- */
mark.todo { background: var(--c-todo); padding: 0 0.25em; border-radius: var(--radius); font-size: 0.95em; }

/* --- Form fields (used on Contact; full form in step 4) ---------------- */
.field { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field label { font-weight: var(--fw-bold); }
.field__hint { font-size: var(--fs-sm); color: var(--c-muted); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--c-ink); background: var(--c-bg);
  border: 1px solid #8a949c; /* 3.2:1 against white: meets the 3:1 rule for input borders */
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-2); }
.field--check input { width: 1.25rem; height: 1.25rem; margin-top: 0.2em; }
.field--check label { font-weight: var(--fw-regular); }
.enquiry .btn { margin-top: var(--sp-2); }

/* Heading styled one level down (keeps the document outline correct) */
.h3 { font-size: var(--fs-h3); }
.field__error { color: #b3261e; font-size: var(--fs-sm); } /* 6.4:1 on white */
.field__error:empty { display: none; }

/* --- Team (About page) --------------------------------------------------- */
.team { list-style: none; padding: 0; margin: 0; }
.team__card h3 { margin-bottom: var(--sp-2); }
.team__card p { margin: 0; }
.team__dept { font-size: var(--fs-sm); color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-1); }
.team__photo { margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-4); }
.team__photo .photo-placeholder { margin: 0; } /* the wrapper already bleeds to the card edges */
.team__photo img { aspect-ratio: 4 / 5; object-fit: cover; }