/* =========================================================
   Engine Primer — cross-site neutral foundation (NO skin)
   ---------------------------------------------------------
   This stylesheet is the SHARED ENGINE, deliberately neutral:
   no brand palette, no component/section styles, no homepage
   structure. Every site's skin (header/footer, cards, hero,
   homepage sections, color system) is GENERATED PER PROJECT
   by homepage-designer from DESIGN.md (industry signal +
   competitor analysis) — never cloned from this scaffold.

   What lives here (engine, shared, NO namespace prefix):
     - CSS reset
     - :root neutral design tokens (grayscale only)
     - base typography + link color
     - layout primitives: .container / .container--narrow /
       .section / .visually-hidden / .skip-link
     - generic a11y helpers (focus-visible, reduced-motion)

   What does NOT live here (skin → per-site CSS, prefixed with the
   site namespace, e.g. zcn-): the brand-a component/section classes
   (buttons, cards, hero, facts band, company, cert band, category
   cards, header, footer, quick-contact, solutions, faq, inquiry,
   cta strip, product grid, feature grid, spec tables, blog grid,
   downloads, contact cards, social row …) — all deleted from the
   engine; they are regenerated per site with a namespace prefix.

   Only transform & opacity are animated (GPU-friendly) where
   the skin opts in; the primer itself adds no motion.
   ========================================================= */

:root {
  /* Neutral palette — grayscale ONLY. Set --brand per site in DESIGN.md. */
  --brand: #6b7280;            /* placeholder accent; override per site */
  --ink: #1A1A1A;              /* primary text (16.7:1 on white) */
  --ink-soft: #444444;
  --gray: #666666;             /* secondary text (5.74:1 on white) */
  --line: #E5E7EB;             /* borders */
  --bg: #FFFFFF;
  --bg-soft: #F6F7F9;          /* alt section bg */
  --bg-dark: #0E1116;          /* dark surfaces */
  --on-dark: #FFFFFF;

  /* Type scale — 8px baseline, 12–44px */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 30px;
  --fs-2xl: 36px;
  --fs-3xl: 44px;

  /* Spacing — 8px scale (more vertical breathing for premium rhythm) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 72px;

  --r: 10px;       /* default radius */
  --r-lg: 18px;
  --r-xl: 24px;

  /* Neutral "premium" shadows (dark-based, brand-agnostic) */
  --shadow-sm: 0 1px 2px rgba(17,20,24,.04), 0 4px 12px rgba(17,20,24,.05);
  --shadow-md: 0 8px 24px rgba(17,20,24,.10);
  --shadow-lg: 0 18px 48px rgba(17,20,24,.16);

  --maxw: 1200px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 var(--s-2); }
ul { margin: 0; padding: 0; list-style: none; }

/* Base heading gradient (skin may override per section) */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--s-2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(30px, 4.6vw, var(--fs-3xl)); }
h2 { font-size: clamp(26px, 3.6vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

/* ---------- Accessible helpers (engine, shared) ---------- */
.visually-hidden, .skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); z-index: 200;
}
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout primitives (engine, shared — no namespace prefix) ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-2); }
.container--narrow { max-width: 820px; }
.section { padding: var(--s-6) 0; }

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

/* =========================================================
   Site chrome — shared header / footer / nav / utilities
   ---------------------------------------------------------
   WHY THIS LIVES IN THE ENGINE (2026-08-31):
   The de-templatization scaffold keeps this file as a neutral "engine primer"
   and expects every site's skin (header/footer/nav…) to be GENERATED PER
   PROJECT. But common.HEADER / common.FOOTER / the quick-contact widget are
   injected into EVERY page from common.py, while the per-site skin
   (home.css) is scoped to `body.zlb-home` and does NOT carry these GLOBAL
   components. A site that only ships the primer therefore renders vertically
   stacked menus + a broken logo on every page, and none of the other gates
   catch it because they do not inspect CSS.

   So the global chrome is promoted to the engine: it is deliberately generic
   and brand-neutral (accent colour comes from --brand, which each site
   overrides in DESIGN.md). The per-site skin still owns sections/hero/cards
   and may override any of these rules.

   Maintainer note: if you add a class to common.HEADER/FOOTER/QC, add its rule
   here too — and keep audit_css_coverage.py (Gate) green so the next site
   cannot ship an unstyled shell.
   ========================================================= */

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; line-height: 1;
  padding: 12px 20px; border-radius: var(--r); border: 0;
  background: var(--brand); color: #fff; cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--sm { padding: 8px 14px; font-size: var(--fs-sm); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--bg-soft); }
.btn--block { width: 100%; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(6px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header[data-elevate="true"] {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: 16px;
}

/* ---- Brand ---- */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 18px; letter-spacing: -.015em;
  color: var(--ink); white-space: nowrap;
  flex: 0 0 auto;            /* PC: stop the header mark collapsing to 0 width */
}
.brand:hover { text-decoration: none; }
.brand__mark { display: flex; align-items: center; flex: 0 0 auto; }
.brand__logo { height: 40px; width: auto; display: block; flex: 0 0 auto; }
.brand__name { line-height: 1; }

/* ---- Navigation ---- */
.nav { flex: 1; display: flex; justify-content: flex-end; }
.nav__list {
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.nav__list > li > a,
.nav__has-menu > a {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: var(--r);
  font-weight: 500; font-size: var(--fs-sm);
  color: var(--ink-soft); transition: color .15s ease, background .15s ease;
}
.nav__list > li > a:hover,
.nav__has-menu > a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.nav__has-menu { position: relative; }
.nav__has-menu > a::after {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; opacity: .6;
  margin-left: 5px;
}
.nav__submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-md); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.nav__has-menu:hover > .nav__submenu,
.nav__has-menu:focus-within > .nav__submenu,
.nav__has-menu.is-open > .nav__submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__submenu a {
  display: block; padding: 8px 12px; border-radius: 6px;
  font-size: var(--fs-sm); color: var(--ink-soft);
}
.nav__submenu a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }

/* Nav top-level labels must never wrap — "Case Studies" broke into two
   lines when the desktop row got tight (the space inside the label is a
   wrap opportunity). Submenu flyout labels keep normal wrapping. */
.nav__list > li > a,
.nav__has-menu > a { white-space: nowrap; }

/* Narrow-desktop squeeze (901px–1180px): 10 top-level items + actions
   overflow at this range — tighten spacing instead of wrapping. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav__list { gap: 2px; }
  .nav__list > li > a,
  .nav__has-menu > a { padding: 8px 8px; }
  .site-header__actions { gap: 6px; }
  .site-header__actions .whatsapp-link { padding: 8px 10px; }
}

/* Tightest desktop tier (901px–985px): even the squeeze above overflows
   (~920px clipped the WhatsApp button) — drop to 13px labels, 6px padding,
   and icon-only WhatsApp, mirroring the ≤900px mobile behavior. */
@media (min-width: 901px) and (max-width: 985px) {
  .nav__list > li > a,
  .nav__has-menu > a { padding: 8px 6px; font-size: 13px; }
  .brand__name { font-size: 16px; }
  .site-header__actions .whatsapp-link__text { display: none; }
}

/* 3rd-level flyout — nested hub (Burners ▸ Fuel/Gas/Dual). Desktop only; the
   mobile media query keeps .nav__submenu static, so this never applies there. */
.nav__submenu .nav__has-menu { position: relative; }
.nav__submenu .nav__has-menu > .nav__submenu {
  top: -8px; left: calc(100% + 8px);
}
.nav__submenu .nav__has-menu:hover > .nav__submenu,
.nav__submenu .nav__has-menu:focus-within > .nav__submenu,
.nav__submenu .nav__has-menu.is-open > .nav__submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Footer Products column — hub group titles (non-link <li>).
   Footer is on-dark, so the label must use a light tone (NOT var(--ink),
   which is the dark ink for light backgrounds and would blend into the
   dark footer). */
.footer__group-title {
  list-style: none;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
  padding: 10px 12px 2px; margin-top: 2px;
}
.footer__group-title a {
  /* The hub title is itself a link — render it as a brighter heading so it
     reads as a section label, distinct from the .72 child links below. */
  color: rgba(255,255,255,.88);
}
.footer__group-title a:hover { color: #fff; text-decoration: underline; }
.footer__group-title:first-child { margin-top: 0; padding-top: 0; }

/* ---- Header actions ---- */
.site-header__actions {
  display: flex; align-items: center; gap: 10px;
}
.lang-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 12px; font-weight: 700;
  color: var(--ink-soft);
}
.whatsapp-link { gap: 6px; }
.whatsapp-link::before {
  content: "";
  width: 16px; height: 16px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url(assets/whatsapp.svg) center / contain no-repeat;
          mask: url(assets/whatsapp.svg) center / contain no-repeat;
}
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  width: 40px; height: 40px; gap: 5px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }

/* ---- Footer ---- */
.site-footer { background: var(--bg-dark); color: var(--on-dark); padding: var(--s-5) 0 var(--s-2); }
.site-footer a { color: var(--on-dark); }
.site-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.site-footer__brand p { color: rgba(255,255,255,.72); font-size: var(--fs-sm); }
.site-footer__col h3 { font-size: var(--fs-base); margin-bottom: var(--s-2); color: #fff; }
.site-footer__col ul { list-style: none; }
.site-footer__col li + li { margin-top: 6px; }
.site-footer__col a { color: rgba(255,255,255,.72); font-size: var(--fs-sm); }
.site-footer__col a:hover { color: #fff; text-decoration: underline; }
.site-footer__contact { margin-top: var(--s-2); }
.site-footer__bar { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--s-2); }
.site-footer__bar p { margin: 0; font-size: var(--fs-xs); color: rgba(255,255,255,.5); }

/* ---- Quick contact widget ---- */
.qc__fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 110;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand); color: #fff; border: 0;
  box-shadow: var(--shadow-md); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.qc__fab::before {
  content: "";
  width: 22px; height: 22px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url(assets/chat.svg) center / contain no-repeat;
          mask: url(assets/chat.svg) center / contain no-repeat;
}
.qc__hp { position: absolute; left: -9999px; opacity: 0; }
.qc__panel {
  position: fixed; right: 18px; bottom: 86px; z-index: 111;
  width: min(360px, calc(100vw - 36px)); max-height: calc(100vh - 110px);
  overflow: auto; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: var(--s-3);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.qc__panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.qc__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-2); }
.qc__title { font-size: var(--fs-lg); margin: 0; }
.qc__close { background: transparent; border: 0; font-size: 24px; line-height: 1; cursor: pointer; }
.qc__form .field { margin-bottom: var(--s-2); }
.qc__form label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
.qc__form input,
.qc__form select,
.qc__form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; background: #fff;
}
.qc__msg { margin: var(--s-2) 0 0; font-size: var(--fs-sm); }
.qc__msg--ok { color: #15803d; }
.qc__msg--err { color: #b91c1c; }

/* ---- Forms ---- */
.field { margin-bottom: var(--s-2); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
.field input,
.field select,
.field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; background: #fff;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.field__error { display: block; min-height: 18px; font-size: var(--fs-xs); color: #b91c1c; margin-top: 2px; }
.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: #b91c1c; }
.consent { display: flex; align-items: flex-start; gap: 8px; }
.consent input { width: auto; margin-top: 3px; }
.consent label { font-weight: 400; margin: 0; }
.form__msg { margin-top: var(--s-2); font-size: var(--fs-sm); }
.form__msg--ok { color: #15803d; }
.form__msg--err { color: #b91c1c; }

/* ---- Breadcrumb ---- */
.breadcrumb {
  list-style: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 0; margin: 0 0 var(--s-2);
  font-size: var(--fs-sm); color: var(--gray);
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current="page"] { color: var(--gray); }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.9); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 90vw; max-height: 85vh; border-radius: var(--r); }
.lightbox__close,
.lightbox__nav {
  position: absolute; background: rgba(255,255,255,.15); color: #fff;
  border: 0; width: 44px; height: 44px; border-radius: 50%;
  font-size: 28px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }

/* ---- Mobile navigation ---- */
@media (max-width: 900px) {
  .nav { position: fixed; inset: 68px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); display: none; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2); }
  .nav__list > li > a,
  .nav__has-menu > a { padding: 12px; border-radius: 6px; justify-content: space-between; }
  .nav__submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-left: 12px; display: none; }
  .nav__has-menu.is-open > .nav__submenu { display: block; }
  .site-header__actions .whatsapp-link__text { display: none; }
  .nav-toggle { display: flex; }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-3); }
}

@media (max-width: 599px) {
  .site-header__inner { min-height: 60px; }
  .brand__name { font-size: 16px; }
  .brand__logo { height: 34px; }
  .site-header__actions .btn--ghost { padding: 6px 10px; }
  .nav { inset: 60px 0 auto 0; }
}

/* =========================================================
   Shared components — generic, brand-neutral vocabulary
   ---------------------------------------------------------
   These non-namespaced classes are the SHARED component layer used
   by build_top_pages / build_categories / build_products / homepage
   section HTML. They were dropped during de-templatization (only the
   zlb- homepage skin survived), which is exactly what
   audit_css_coverage.py (Gate) now catches. Promoted to the engine
   here and styled entirely from :root tokens, so every site inherits
   a coherent, brand-neutral baseline; a per-site skin may override
   any rule. (zlb- prefixed gaps live in HOME_CSS_TEXT instead.)
   ========================================================= */

/* ---- Section helpers ---- */
.section--soft { background: var(--bg-soft); }
.section__head { max-width: 760px; margin: 0 auto var(--s-3); text-align: center; }
.section__head h2 { margin-bottom: var(--s-1); }
.section__intro { color: var(--gray); font-size: var(--fs-md); line-height: 1.6; }
.eyebrow {
  display: inline-block; margin-bottom: var(--s-1);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}

/* ---- Page hero (inner pages) ---- */
.page-hero { padding: calc(var(--s-6) + 40px) 0 var(--s-5); background: var(--bg-soft); }
.page-hero__inner { max-width: 860px; }
.page-hero__lead { margin-top: var(--s-2); font-size: var(--fs-lg); color: var(--gray); }

/* ---- Split (text + media) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: center; }
/* `height: auto` is load-bearing: the <img> width/height attributes act as a
   fixed CSS height when no author height is declared, so a 551x735 photo in a
   ~560px column rendered 568x735 (3% stretch) and stretched badly below that
   width. Never set a width on an img without neutralising the attribute. */
.split__media img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }

/* ---- Prose (long-form body copy) ---- */
.prose { max-width: 760px; line-height: 1.75; }
.prose p { margin: 0 0 var(--s-2); }
.prose ul, .prose ol { margin: 0 0 var(--s-2); padding-left: 1.25em; }
/* The global `ul { list-style: none }` reset above kills markers site-wide;
   prose lists keep their 1.25em indent, so restore the bullet rather than
   leave indented-but-unmarked lines. ol keeps the UA decimal marker. */
.prose ul { list-style: disc; }
.prose ul li::marker { color: var(--zho-accent, #1E5AA8); }
.prose li { margin: 0 0 8px; }
.prose h2, .prose h3 { margin-top: var(--s-3); }

/* ---- Bullets (custom-marked list) ---- */
.bullets { list-style: none; display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 24px; }
.bullets li::before {
  content: ""; position: absolute; left: 4px; top: .6em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--brand);
}

/* ---- Chip / tag ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--fs-sm); color: var(--ink-soft); background: #fff;
}

/* ---- Buttons: extra variants (base .btn lives in chrome) ---- */
.btn--primary { background: var(--brand); color: #fff; }
.btn--dark { background: var(--bg-dark); color: #fff; }
.btn--outline { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.btn--outline:hover { background: var(--brand); color: #fff; text-decoration: none; }

/* ---- Cards + grids ---- */
.product-grid, .solution-grid, .feature-grid, .contact-grid, .blog-grid, .brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-3);
}
.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Same trap as .split__media: without `height: auto` the width/height
   attributes (600x450) win over aspect-ratio, so every card <img> rendered
   272x450 (portrait) and `object-fit: cover` then ate ~40% of a square product
   photo off the left and right — 16/16 cards on /products were cropped.
   Square frame + contain shows the whole photo; the near-square 610x640
   sources letterbox by <3% per side. */
.card__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.card__title { margin: var(--s-2) var(--s-2) 0; font-size: var(--fs-lg); }
.card__desc { margin: var(--s-1) var(--s-2) var(--s-2); color: var(--gray); font-size: var(--fs-sm); flex: 1; }
.card__link { display: block; margin: 0 var(--s-2) var(--s-2); font-weight: 600; color: var(--brand); }
.card__link:hover { text-decoration: underline; }
.product-grid__empty { grid-column: 1 / -1; padding: var(--s-4); text-align: center; color: var(--gray); border: 1px dashed var(--line); border-radius: var(--r-lg); }

/* ---- Feature item ---- */
.feature { text-align: center; }
.feature__icon {
  width: 56px; height: 56px; margin: 0 auto var(--s-2);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-soft); color: var(--brand);
  font-size: 24px; font-weight: 800;
}

/* ---- Brand grid (logos / credentials) ---- */
.brand-grid__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
}
.brand-grid__item--text { justify-content: center; }
.brand-grid__name { font-weight: 700; }
.brand-grid__tag { font-size: var(--fs-sm); color: var(--gray); }

/* ---- FAQ ---- */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-2); }
.faq__item h3 { margin: 0; font-size: var(--fs-md); }

/* ---- CTA strip ---- */
.cta-strip { background: var(--brand); color: #fff; padding: var(--s-5) 0; }
.cta-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.cta-strip h2 { color: #fff; margin: 0; }
.cta-strip .btn { background: #fff; color: var(--brand); }

/* ---- Forms (section-level) ---- */
.form { max-width: 640px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.field--full { grid-column: 1 / -1; }
.inquiry { max-width: 720px; }

/* ---- Specs ---- */
.spec-table { width: 100%; border-collapse: collapse; margin: var(--s-2) 0; }
.spec-table th, .spec-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.spec-table th { background: var(--bg-soft); font-weight: 600; width: 38%; }
.spec-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-2); }
.spec-facts div { padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }

/* ---- Cert status ---- */
.cert-status-wrap { margin: var(--s-2) 0; }
.cert-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cert-status__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid var(--line); color: var(--ink-soft); background: #fff;
}
.cert-status__badge--ask { color: #92600a; border-color: #f3d28b; background: #fdf6e3; }
.cert-status__badge--expired { color: var(--gray); }
.cert-status__badge--none { color: #b91c1c; border-color: #f3b4b4; background: #fdeaea; }

/* ---- Downloads ---- */
.downloads { display: grid; gap: var(--s-2); }
.download { display: flex; align-items: center; gap: 12px; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.download__name { font-weight: 600; }

/* ---- Search ---- */
.search { position: relative; max-width: 420px; margin: 0 auto var(--s-4); }
.search input { width: 100%; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; }
.search__icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--gray); pointer-events: none; }

/* ---- Category filter bar (data-driven, sits above the product grid) ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 920px; margin: 0 auto var(--s-4); }
.filter-bar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font: inherit; font-size: var(--fs-sm); line-height: 1;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.filter-bar__btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-bar__btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-bar__count { font-size: 11px; opacity: .6; }
.filter-bar__btn.is-active .filter-bar__count { opacity: .85; }
@media (max-width: 560px) { .filter-bar { gap: 6px; } .filter-bar__btn { padding: 7px 11px; font-size: var(--fs-xs); } }

/* ---- Quick-contact wrapper + related + social rows ---- */
.qc { font-family: var(--font); }
.related { margin: var(--s-4) 0; }
.related h2 { font-size: var(--fs-lg); }
.social, .site-footer__social { display: flex; flex-wrap: wrap; gap: 10px; }
.social a, .site-footer__social a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
}
.social a:hover, .site-footer__social a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }

/* ---- Misc helpers ---- */
.sep { color: var(--gray); }
.req { color: #b91c1c; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Flow (process steps) ---- */
.flow { display: grid; gap: var(--s-3); }
.flow__step { display: flex; gap: var(--s-2); align-items: flex-start; }
.flow__num {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-weight: 700;
}
.flow__body { flex: 1; }
.flow__body h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.flow__body p { margin: 0; color: var(--gray); }

/* ---- Contact card ---- */
.contact-card { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.contact-card h3 { margin-top: 0; font-size: var(--fs-md); }