/* ==========================================================================
   JUSHI Automation Theme - Main CSS Entry Point
   Processed by PostCSS (postcss-import, postcss-nesting)
   ========================================================================== */

/* ==========================================================================
   Design Tokens — Precision Lab v1
   ==========================================================================

   A constrained, precision-instrument palette built for industrial-tech B2B.
   References: Teenage Engineering, Leica, Braun, Nothing, IDEO.

   Principles:
     1. Warm neutrals — not pure white/black (paper + graphite).
     2. ONE signal color — deep cobalt, used for links / focus / active state.
     3. Buttons are monochrome graphite fills, NOT colored — only rare "hot"
        CTAs use ember orange and only once per page.
     4. Almost no rounded corners (max 6px). Radii belong to consumer apps.
     5. Almost no shadows — elevation comes from hairlines and whitespace.
     6. Typographic hierarchy via size + tracking, not color or weight spam.

   Backwards-compat: the old v3 semantic tokens (--color-primary etc.) are
   re-aliased at the bottom of :root so legacy component CSS keeps working
   while we migrate component-by-component.
   ========================================================================== */

:root {

  /* ========================================================================
     PRIMITIVE PALETTE — paper + ink + signal + hot
     ======================================================================== */

  /* Paper — warm neutrals for backgrounds / surfaces / rules */
  --paper-50:  #FBFAF7;   /* body background — paper white */
  --paper-100: #F5F3EE;   /* raised cards / inset wells */
  --paper-200: #EBE8E0;   /* default borders / hairlines */
  --paper-300: #D9D5C9;   /* hovered borders / dividers */

  /* Ink — warm graphite, not pure black */
  --ink-100: #C0BDB3;     /* disabled text */
  --ink-300: #8B887F;     /* tertiary / captions */
  --ink-500: #56544D;     /* secondary body */
  --ink-700: #2D2B26;     /* primary body + headings */
  --ink-900: #14130F;     /* display text / button fills */

  /* Signal — single accent. Deep cobalt, precision-instrument feel. */
  --signal-50:   #EDF1F8;
  --signal-100:  #D1DCEF;
  --signal-500:  #1B3B6F;  /* primary accent */
  --signal-600:  #15305A;  /* hover */
  --signal-700:  #0F2647;  /* active / pressed */

  /* Hot — molten orange, reserved for THE ONE hot CTA per page */
  --hot-500:  #D9480F;
  --hot-600:  #B03A0A;

  /* Status (used rarely, desaturated) */
  --status-success: #2F6B4F;
  --status-warning: #A06A1F;
  --status-error:   #8B2323;

  /* White / black — never used directly for text; only absolute surfaces */
  --white: #FFFFFF;
  --black: #000000;

  /* ========================================================================
     SEMANTIC ALIASES — what components should reference
     ======================================================================== */

  /* Surfaces */
  --color-bg:         var(--paper-50);   /* body canvas */
  --color-bg-raised:  var(--white);      /* raised cards on top of paper */
  --color-bg-sunken:  var(--paper-100);  /* inset areas / hero blocks */
  --color-bg-invert:  var(--ink-900);    /* reverse / dark panels */

  /* Text */
  --color-text:         var(--ink-700);
  --color-text-display: var(--ink-900);
  --color-text-muted:   var(--ink-500);
  --color-text-subtle:  var(--ink-300);
  --color-text-disabled:var(--ink-100);
  --color-text-invert:  var(--paper-50);

  /* Lines */
  --color-border:       var(--paper-200);
  --color-border-hover: var(--paper-300);
  --color-border-strong:var(--ink-700);

  /* Accents */
  --color-accent:         var(--signal-500);
  --color-accent-hover:   var(--signal-600);
  --color-accent-active:  var(--signal-700);
  --color-accent-tint:    var(--signal-50);
  --color-accent-soft:    var(--signal-100);

  --color-hot:        var(--hot-500);
  --color-hot-hover:  var(--hot-600);

  /* CTAs — monochrome by default, hot only when declared .btn--hot */
  --color-cta-bg:     var(--ink-900);
  --color-cta-text:   var(--paper-50);
  --color-cta-hover:  var(--ink-700);

  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */

  /* Font families — Inter for everything, Mono for specs + numbers.
     'Inter Fallback' uses @font-face { size-adjust + ascent-override } in
     _typography.css to pre-render system Arial at Inter metrics — eliminates
     CLS when Inter swaps in (was 0.413 on desktop home, now ~0). */
  --font-display: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body:    'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Monaco,
                  'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* Legacy aliases — keeps _typography.css and legacy components alive */
  --font-heading: var(--font-display);
  --font-sans:    var(--font-body);

  /* Type scale — modular 1.25 */
  --text-xs:   0.75rem;     /* 12px — eyebrows, micro */
  --text-sm:   0.875rem;    /* 14px — captions, chips */
  --text-base: 1rem;        /* 16px — body */
  --text-lg:   1.125rem;    /* 18px — lead */
  --text-xl:   1.25rem;     /* 20px — section subtitle */
  --text-2xl:  1.5rem;      /* 24px — H4 */
  --text-3xl:  1.875rem;    /* 30px — H3 */
  --text-4xl:  2.25rem;     /* 36px — H2 */
  --text-5xl:  3rem;        /* 48px — H1 mobile */
  --text-6xl:  3.75rem;     /* 60px — display */
  --text-7xl:  4.5rem;      /* 72px — hero desktop */
  --text-8xl:  6rem;        /* 96px — editorial feature */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.08;   /* display */
  --leading-snug:    1.2;    /* headings */
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.65;   /* long-form prose */

  /* Letter spacing */
  --tracking-tighter: -0.04em;  /* 48px+ display */
  --tracking-tight:   -0.02em;  /* H1/H2 */
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-widest:   0.12em;  /* uppercase eyebrows */

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  /* 700 not loaded — semibold is the heaviest in-house weight */

  /* ========================================================================
     SPACING — 4px base
     ======================================================================== */

  --space-0: 0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-14: 3.5rem;    /* 56 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */
  --space-40: 10rem;     /* 160 */

  /* Rhythmic section spacing — generous Precision Lab cadence */
  --section-y-mobile:  4rem;   /* 64 */
  --section-y-tablet:  6rem;   /* 96 */
  --section-y:         8rem;   /* 128 desktop default */
  --section-y-grand:  10rem;   /* 160 hero-adjacent */

  /* Block rhythm inside sections */
  --block-y-sm: 1.5rem;
  --block-y-md: 2.5rem;
  --block-y-lg: 4rem;

  /* ========================================================================
     LAYOUT
     ======================================================================== */

  --container-max:     1440px;   /* wide — hero, full bleed */
  --container-narrow:  1200px;   /* default content */
  --container-content:  720px;   /* long-form prose */

  --gutter-mobile:  1rem;       /* 16 */
  --gutter-tablet:  1.5rem;     /* 24 */
  --gutter-desktop: 3rem;       /* 48 */

  /* ========================================================================
     RADIUS — Precision Lab is anti-rounded
     ======================================================================== */

  --radius-none: 0;
  --radius-sm:   2px;   /* chips, inline */
  --radius-md:   4px;   /* buttons, cards */
  --radius-lg:   6px;   /* reserved max — modals, panels */
  --radius-pill: 9999px;

  /* ========================================================================
     SHADOWS — hairlines > fills
     ======================================================================== */

  --shadow-none:       none;
  --shadow-hairline:   0 0 0 1px var(--paper-200);
  --shadow-subtle:     0 1px 2px rgba(20, 19, 15, 0.04);
  --shadow-card:       0 0 0 1px var(--paper-200), 0 1px 2px rgba(20, 19, 15, 0.03);
  --shadow-card-hover: 0 0 0 1px var(--paper-300), 0 4px 12px rgba(20, 19, 15, 0.06);
  --shadow-popover:    0 0 0 1px var(--paper-200), 0 8px 24px rgba(20, 19, 15, 0.08);
  --shadow-focus:      0 0 0 3px var(--signal-100);

  /* ========================================================================
     MOTION — minimal, purposeful
     ======================================================================== */

  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-accel:     cubic-bezier(0.4, 0, 1, 1);
  --ease-decel:     cubic-bezier(0, 0, 0.2, 1);

  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-medium:  300ms;
  --dur-slow:    500ms;

  /* ========================================================================
     Z-INDEX scale — single source of truth
     ======================================================================== */

  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  900;
  --z-header:  1000;
  --z-backdrop:1050;
  --z-nav:     1100;
  --z-overlay: 1200;
  --z-toast:   1300;

  /* ========================================================================
     LEGACY ALIASES — keep v3 token names alive while components migrate
     ======================================================================== */

  --color-primary:   var(--ink-900);          /* was deep navy → now ink */
  --color-cta:       var(--hot-500);          /* was orange — kept for .btn--hot */
  --color-secondary: var(--signal-500);       /* was teal → now cobalt signal */
  --color-bg-light:  var(--paper-100);
  --color-white:     var(--white);
  --color-black:     var(--black);

  --text-base-legacy: 16px;
  --line-height:      var(--leading-normal);

  --container-width: var(--container-narrow);
  --section-spacing: var(--section-y-tablet);

  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-card);

  --btn-radius:  var(--radius-md);
  --btn-padding: 0.875rem 1.75rem;    /* 14px 28px */
}

/* ==========================================================================
   Minimal Reset
   ========================================================================== */

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

html {
  font-size: var(--text-base);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Matches fixed .site-header height (45 utility + 109 middle = 154). */
  padding-top: 154px;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

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

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   Focus Indicators (V4 — UI-2, WCAG 2.4.7)
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--color-secondary, #0D9488);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   Typography — Precision Lab v1
   ==========================================================================

   Self-hosted Inter only. Poppins is no longer loaded (files on disk are
   retained so older pages in /wp-content/uploads referencing them don't
   400, but @font-face declarations are removed — nothing should trigger
   a fetch).

   Max weight is 600 (semibold). 700+ is intentionally absent — Precision
   Lab hierarchy is built from size + tracking + whitespace, not weight.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}

/* ==========================================================================
   Fallback metric adjustment — eliminate CLS when Inter swaps in
   Measured overrides calibrated to Arial so fallback pre-renders at the
   same visual height as Inter. Before: homepage desktop CLS 0.413.
   Reference: https://www.industrialempathy.com/perfect-ish-font-fallback/
   ========================================================================== */

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.4%;
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

/* ==========================================================================
   Base — body prose
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: 'cv11', 'ss01';   /* Inter: single-story a, open digits */
}

/* ==========================================================================
   Headings — display hierarchy
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-display);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-4xl);         /* 36 mobile */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-3xl);         /* 30 mobile */
}

h3 {
  font-size: var(--text-2xl);         /* 24 */
}

h4 {
  font-size: var(--text-xl);          /* 20 */
  letter-spacing: var(--tracking-normal);
}

h5 {
  font-size: var(--text-lg);          /* 18 */
  letter-spacing: var(--tracking-normal);
}

h6 {
  font-size: var(--text-base);        /* 16 */
  letter-spacing: var(--tracking-normal);
}

@media (min-width: 768px) {
  h1 { font-size: var(--text-5xl); }  /* 48 tablet */
  h2 { font-size: var(--text-4xl); }  /* 36 tablet */
  h3 { font-size: var(--text-3xl); }  /* 30 tablet */
  h4 { font-size: var(--text-2xl); }  /* 24 tablet */
}

@media (min-width: 1024px) {
  h1 {
    font-size: var(--text-6xl);       /* 60 desktop */
    letter-spacing: var(--tracking-tighter);
  }
  h2 { font-size: var(--text-5xl); }  /* 48 desktop */
  h3 { font-size: var(--text-3xl); }  /* 30 desktop — deliberately unchanged */
}

/* ==========================================================================
   Body prose primitives
   ========================================================================== */

p {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

strong, b {
  font-weight: var(--weight-semibold);
  color: var(--color-text-display);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-text-display);
}

/* ==========================================================================
   Utility type scales — opt-in display sizes
   ========================================================================== */

.text-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.text-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 62ch;
}

@media (min-width: 1024px) {
  .text-lead {
    font-size: var(--text-xl);
  }
}

.text-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';
}

.text-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
}

@media (min-width: 768px) {
  .text-display { font-size: var(--text-6xl); }
}

@media (min-width: 1024px) {
  .text-display {
    font-size: var(--text-7xl);
    letter-spacing: var(--tracking-tighter);
  }
}

/* ==========================================================================
   Prose — WordPress editor / long-form content
   ========================================================================== */

.prose {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: var(--container-content);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.prose h1:first-child,
.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose p {
  margin-bottom: var(--space-5);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
}

.prose ul { list-style: disc; }

.prose ol { list-style: decimal; }

.prose li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.prose blockquote {
  margin: var(--space-8) 0;
  padding: 0 0 0 var(--space-6);
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-text-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-style: normal;
  letter-spacing: var(--tracking-tight);
}

.prose img {
  margin: var(--space-8) 0;
  border-radius: var(--radius-sm);
}

.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-accent-soft);
  transition: text-decoration-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.prose a:hover {
  text-decoration-color: var(--color-accent);
}

.prose hr {
  margin: var(--space-10) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.prose table {
  width: 100%;
  margin: var(--space-8) 0;
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
  font-size: var(--text-sm);
}

.prose table th,
.prose table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.prose table th {
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom-color: var(--color-border-strong);
}

.prose code {
  padding: 0.15em 0.35em;
  background-color: var(--paper-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875em;
}

.prose pre {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-invert);
  color: var(--color-text-invert);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.prose pre code {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
}

/* ==========================================================================
   Selection — warm paper feel
   ========================================================================== */

::-moz-selection {
  background-color: var(--signal-100);
  color: var(--color-text-display);
}

::selection {
  background-color: var(--signal-100);
  color: var(--color-text-display);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.section {
  padding: 48px 0;
}

@media (min-width: 768px) {
  .section {
    padding: var(--section-spacing) 0;
  }
}

/* Card Grids */

.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card-grid--2col {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .card-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Header — Precision Lab v1  (Atlas Copco 2-layer geometry, new palette)
   ==========================================================================

   Geometry is UNCHANGED (the user has locked the Atlas Copco 2-layer
   architecture: 45px utility bar + 109px middle bar = 154px fixed shell,
   right-aligned utility, breadcrumb inlined in middle-bar center-block,
   pill-shaped "Menu" trigger on the right). Only the palette migrates:

     Before (legacy teal)            → After (Precision Lab)
     -----------------------------------------------------------
     #5B6770  nav / text grey        → var(--ink-500)
     #2F363A  nav hover / current    → var(--ink-900)
     #0a7e8c  logo text / brd hover  → var(--color-text-display)
     #006f8f  breadcrumb link        → var(--color-accent)      (cobalt signal)
     #E5E7E8  dropdown border        → var(--color-border)
     #F5F0EB  dropdown hover bg      → var(--paper-100)
     #8a8f94  breadcrumb separator   → var(--ink-300)
     teal gradient pill              → var(--ink-900) monochrome

   The 100px-radius pill is kept as-is: it's the literal Atlas Copco Menu
   pill geometry the user signed off on, and it's the single intentional
   exception to the "max 6px radius" rule in Precision Lab v1.
   ========================================================================== */

/* Fixed (not sticky): scrolled-down state changes must NOT alter document
   flow or the viewport jitters when toggling near the threshold. Body has
   matching padding-top: 154px (see _reset.css). */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: var(--color-bg-raised);
  transition: box-shadow var(--dur-medium) var(--ease-standard);
  font-family: var(--font-body);
  color: var(--color-text);
}

/* WP admin bar compensation */

body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.site-header--sticky {
  box-shadow: 0 1px 0 0 var(--color-border), 0 2px 8px rgba(20, 19, 15, 0.04);
}

/* -----------------------------------------------------------
   Layer 1 — Utility Bar (transparent, right-aligned)
----------------------------------------------------------- */

.site-header__utility-bar {
  height: 45px;
  background-color: transparent;
  border-bottom: 0;
}

.site-header__utility-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  max-width: 1484px;
  margin: 0 auto;
  padding: 0 22px;
  gap: 28px;
}

.site-header__utility-local ul {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__utility-local a,
.site-header__utility-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-text-muted);
  text-transform: capitalize;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.site-header__utility-local a:hover,
.site-header__utility-item:hover {
  color: var(--color-text-display);
}

.site-header__utility-global {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__utility-icon {
  fill: currentColor;
}

/* -----------------------------------------------------------
   Layer 2 — Middle Bar (white, 3-block flex)
----------------------------------------------------------- */

.site-header__middle-bar {
  background-color: var(--color-bg-raised);
}

.site-header__middle-inner {
  display: flex;
  align-items: center;
  max-width: 1484px;
  margin: 0 auto;
  padding: 10px 22px;
  min-height: 89px; /* 89 + 10*2 padding = 109px, matches atlas */
  gap: 24px;
}

/* Left block: logo */

.site-header__middle-bar__left-block,
.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-width: 166px;
}

.site-header__logo img {
  max-height: 80px;
  width: auto;
}

/* Text fallback when no logo image is set */

.site-header__site-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  text-decoration: none;
}

/* Center block: primary nav on top, breadcrumb below */

.site-header__middle-bar__center-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  gap: 4px;
}

/* Primary nav */

.header-nav {
  display: flex;
  align-items: center;
}

.header-nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav__item {
  position: relative;
}

.header-nav__link {
  display: block;
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
  text-transform: none;
  border-bottom: 3px solid transparent;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.header-nav__link:hover,
.header-nav__link:focus-visible,
.current-menu-item > .header-nav__link,
.header-nav__link--active {
  border-bottom-color: var(--color-accent);      /* cobalt signal */
  color: var(--color-text-display);
}

/* Kill legacy wp-custom-css artifacts on nav links (black ::after tick, orange box-shadow). */

.header-nav__link::before,
.header-nav__link::after {
  content: none !important;
}

.header-nav__link[href*="contact"] {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Dropdown (submenu) */

.header-nav__dropdown {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav__dropdown--open {
  display: block;
}

@media (min-width: 1024px) {
  .header-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 8px 0;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-popover);
    z-index: 10;
  }

  .header-nav__item:hover > .header-nav__dropdown,
  .header-nav__dropdown--open {
    display: block;
  }
}

.header-nav__dropdown-link {
  display: block;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.header-nav__dropdown-link:hover {
  background-color: var(--paper-100);
  color: var(--color-text-display);
}

/* Right block: Menu pill (always visible on desktop, mobile toggle).
   The 100px radius is the ONE intentional rounded exception in Precision
   Lab v1 — it preserves the Atlas Copco pill the user signed off on. */

.site-header__middle-bar__right-block {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: auto;
}

.site-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 110px;
  height: 44px;
  padding: 10px 14px 10px 18px;
  border: 0;
  border-radius: 100px;
  background: var(--ink-900);
  color: var(--paper-50);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.site-header__menu-btn:hover {
  background: var(--ink-700);
}

.site-header__menu-btn:active {
  transform: scale(0.97);
}

.site-header__menu-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.site-header__menu-btn-text {
  display: inline-block;
}

.site-header__menu-btn-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
}

.site-header__menu-btn-icon > span {
  display: block;
  height: 2px;
  background: var(--paper-50);
  border-radius: 2px;
  transition:
    transform var(--dur-medium) var(--ease-standard),
    opacity var(--dur-medium) var(--ease-standard);
}

.site-header__menu-btn[aria-expanded="true"] .site-header__menu-btn-icon > span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.site-header__menu-btn[aria-expanded="true"] .site-header__menu-btn-icon > span:nth-child(2) {
  opacity: 0;
}

.site-header__menu-btn[aria-expanded="true"] .site-header__menu-btn-icon > span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* -----------------------------------------------------------
   Breadcrumb — inlined inside middle-bar center-block
----------------------------------------------------------- */

.site-header__middle-bar__center-block .breadcrumbs {
  display: block;
}

.site-header__middle-bar__center-block .breadcrumbs .container {
  padding: 0;
  max-width: none;
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

/* › separator — NOT applied inside the single-item home list (atlas parity). */

.breadcrumbs__list:not(.breadcrumbs__list--home) .breadcrumbs__item + .breadcrumbs__item::before {
  content: "›";
  margin: 0 10px;
  color: var(--ink-300);
  font-size: 18px;
  line-height: 1;
}

.breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.breadcrumbs__link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Front-page home label — sits next to the home icon link, no separator. */

.breadcrumbs__home-label {
  margin-left: 6px;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

/* !important defends against any legacy wp-custom-css rules still surviving
   in the Customizer option (historical Rank Math / older theme styles).
   Memory says wp-custom-css is clean now, but keeping the guard is free. */

.breadcrumbs__list .breadcrumbs__item--home .breadcrumbs__link,
.breadcrumbs__list .breadcrumbs__item--home .breadcrumbs__link:visited {
  color: var(--color-text-muted) !important;
}

.breadcrumbs__list .breadcrumbs__item--home .breadcrumbs__link:hover,
.breadcrumbs__list .breadcrumbs__item--home .breadcrumbs__link:focus-visible {
  color: var(--color-text-display) !important;
  text-decoration: none;
}

.breadcrumbs__list .breadcrumbs__link {
  color: var(--color-accent) !important;
}

.breadcrumbs__list .breadcrumbs__link:hover {
  color: var(--color-accent-hover) !important;
}

.breadcrumbs__item--home svg {
  fill: currentColor;
  display: block;
}

.breadcrumbs__item--current {
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

/* -----------------------------------------------------------
   Responsive
----------------------------------------------------------- */

/* < 1024px — inline nav collapses into left-slide panel */

@media (max-width: 1023.98px) {
  .header-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    padding: 80px 24px 24px;
    background: var(--color-bg-raised);
    box-shadow: 2px 0 16px rgba(20, 19, 15, 0.12);
    transform: translateX(-100%);
    transition: transform var(--dur-medium) var(--ease-standard);
    z-index: var(--z-nav);
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
  }

  .header-nav--open {
    display: flex;
    transform: translateX(0);
  }

  .header-nav--open .header-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }

  .header-nav--open .header-nav__link {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .header-nav__dropdown {
    padding-left: 16px;
  }

  /* Tablet: breadcrumb still inline in center-block but full width */
  .site-header__middle-bar__center-block {
    align-items: stretch;
  }

  .breadcrumbs__list {
    padding: 0;
  }
}

/* < 768px — hide utility bar entirely, shrink middle-bar */

@media (max-width: 767.98px) {
  .site-header__utility-bar {
    display: none;
  }

  .site-header__middle-inner {
    min-height: 64px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 12px;
  }

  .site-header__logo {
    min-width: 0;
  }

  .site-header__site-name {
    font-size: 22px;
  }

  .breadcrumbs__list {
    font-size: 13px;
  }
}

/* Backdrop when menu is open */

.is-nav-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(20, 19, 15, 0.4);
  z-index: var(--z-backdrop);
  animation: jushi-fade var(--dur-medium) var(--ease-standard);
}

@keyframes jushi-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   Footer — Precision Lab v1
   ==========================================================================

   Ink-900 surface, paper text. Columns are a disciplined 4-up grid with
   mono-label column headings and regular text for links.
   ========================================================================== */

.site-footer {
  background-color: var(--color-bg-invert);
  color: var(--paper-200);
  padding-top: var(--section-y-mobile);
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .site-footer {
    padding-top: var(--section-y-tablet);
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding-top: var(--section-y);
  }
}

/* ----------------------------------------------------------------
   Columns
---------------------------------------------------------------- */

.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
}

@media (min-width: 640px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .footer-columns {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

.footer-columns__heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--paper-300);
  margin-bottom: var(--space-4);
}

.footer-columns__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-columns__link {
  font-size: var(--text-sm);
  color: var(--paper-200);
  transition: color var(--dur-fast) var(--ease-standard);
  line-height: var(--leading-normal);
}

.footer-columns__link:hover {
  color: var(--paper-50);
}

.footer-columns__text {
  font-size: var(--text-sm);
  color: var(--paper-200);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* WhatsApp / contact inline */

.footer-columns__whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--paper-200);
  transition: color var(--dur-fast) var(--ease-standard);
}

.footer-columns__whatsapp a:hover {
  color: var(--paper-50);
}

/* Social icons — hairline squares, no colored pill */

.footer-columns__social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.footer-columns__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background-color: transparent;
  border: 1px solid var(--ink-700);
  color: var(--paper-200);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.footer-columns__social-link:hover {
  background-color: var(--paper-50);
  color: var(--ink-900);
  border-color: var(--paper-50);
}

.footer-columns__social-link svg {
  width: 16px;
  height: 16px;
}

/* ----------------------------------------------------------------
   Bottom bar
---------------------------------------------------------------- */

.footer-bottom {
  border-top: 1px solid var(--ink-700);
  padding: var(--space-5) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--paper-300);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-bottom__copy {
  color: var(--paper-300);
}

.footer-bottom__links {
  display: flex;
  gap: var(--space-5);
}

.footer-bottom__link {
  color: var(--paper-300);
  transition: color var(--dur-fast) var(--ease-standard);
}

.footer-bottom__link:hover {
  color: var(--paper-50);
}

/* ==========================================================================
   Buttons — Precision Lab v1
   ==========================================================================

   Rules
     1. Default buttons are MONOCHROME — ink-900 fill, paper text. They are
        NEVER the cobalt accent. The accent color is reserved for links and
        focus rings, not button fills.
     2. .btn--ghost is the low-emphasis secondary — hairline border, ink text.
     3. .btn--hot is the ONE orange CTA on a page (Get Quote / Talk to Sales).
        Use sparingly. One per view.
     4. Radius max 4px. No rounded pills, no gradients.
     5. Shadows are hairline + subtle lift on hover, never heavy.

   Legacy selectors .btn--primary and .btn--outline are preserved so
   existing templates keep working, but they now resolve to the monochrome
   ink / ghost styles respectively.
   ========================================================================== */

.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8125rem 1.5rem;               /* 13px × 24px */
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-cta-text);
  background-color: var(--color-cta-bg);
  border: 1px solid var(--color-cta-bg);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.btn:hover,
.button:hover {
  background-color: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
  color: var(--color-cta-text);
}

.btn:focus-visible,
.button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:active,
.button:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn--disabled,
.button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----------------------------------------------------------------
   Primary (default — monochrome ink)
   .btn--primary is kept as an explicit alias for templates that
   opt in, but .btn alone already resolves to this.
---------------------------------------------------------------- */

.btn--primary {
  background-color: var(--color-cta-bg);
  border-color: var(--color-cta-bg);
  color: var(--color-cta-text);
}

.btn--primary:hover {
  background-color: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
}

/* ----------------------------------------------------------------
   Ghost / Outline — low emphasis secondary
---------------------------------------------------------------- */

.btn--ghost,
.btn--outline {
  background-color: transparent;
  color: var(--color-text-display);
  border-color: var(--color-border-strong);
}

.btn--ghost:hover,
.btn--outline:hover {
  background-color: var(--color-text-display);
  color: var(--color-text-invert);
  border-color: var(--color-text-display);
}

/* ----------------------------------------------------------------
   Hot — the single orange page-level CTA (use sparingly)
---------------------------------------------------------------- */

.btn--hot {
  background-color: var(--color-hot);
  border-color: var(--color-hot);
  color: var(--white);
}

.btn--hot:hover {
  background-color: var(--color-hot-hover);
  border-color: var(--color-hot-hover);
  color: var(--white);
}

/* ----------------------------------------------------------------
   Link-style button — for utility affordances (e.g. "Read spec →")
---------------------------------------------------------------- */

.btn--link {
  padding: 0;
  min-height: 0;
  background: none;
  border: 0;
  color: var(--color-accent);
  letter-spacing: 0;
}

.btn--link:hover {
  background: none;
  border: 0;
  color: var(--color-accent-hover);
  transform: none;
}

.btn--link:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------
   Sizes
---------------------------------------------------------------- */

.btn--sm {
  padding: 0.5rem 1rem;
  min-height: 36px;
  font-size: var(--text-xs);
}

.btn--lg {
  padding: 1rem 2rem;
  min-height: 52px;
  font-size: var(--text-base);
}

/* ----------------------------------------------------------------
   Block / full-width
---------------------------------------------------------------- */

.btn--block {
  display: flex;
  width: 100%;
}

/* ----------------------------------------------------------------
   Icon-only — square
---------------------------------------------------------------- */

.btn--icon {
  padding: 0;
  width: 44px;
  min-height: 44px;
}

.btn--icon.btn--sm {
  width: 36px;
  min-height: 36px;
}

/* ----------------------------------------------------------------
   Reverse — for use on dark (ink-900 / navy) backgrounds
---------------------------------------------------------------- */

.btn--reverse {
  background-color: var(--paper-50);
  color: var(--ink-900);
  border-color: var(--paper-50);
}

.btn--reverse:hover {
  background-color: var(--paper-200);
  border-color: var(--paper-200);
  color: var(--ink-900);
}

.btn--reverse.btn--ghost {
  background-color: transparent;
  color: var(--paper-50);
  border-color: var(--paper-200);
}

.btn--reverse.btn--ghost:hover {
  background-color: var(--paper-50);
  color: var(--ink-900);
  border-color: var(--paper-50);
}

/* ==========================================================================
   Cards — Precision Lab v1
   ==========================================================================

   Card elevation comes from a hairline (1px paper-200) + paper vs surface
   contrast, NOT from drop shadows. Hover: border tightens to paper-300,
   shadow becomes a hint. No translateY lift (it's too consumer-y).
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

.card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-card-hover);
}

/* ----------------------------------------------------------------
   Media
---------------------------------------------------------------- */

.card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--paper-100);
}

.card__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-standard);
}

.card:hover .card__image img {
  transform: scale(1.02);
}

.card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-invert);
  background-color: var(--color-text-display);
  border-radius: var(--radius-sm);
  z-index: 1;
}

/* Hot-only badge (specials / flagship) */

.card__badge--hot {
  background-color: var(--color-hot);
  color: var(--white);
}

/* ----------------------------------------------------------------
   Body
---------------------------------------------------------------- */

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}

.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-1);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  margin: 0;
}

.card__excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ----------------------------------------------------------------
   Inline link — reveals arrow on hover
---------------------------------------------------------------- */

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-display);
  transition: color var(--dur-fast) var(--ease-standard);
}

.card__link::after {
  content: '→';
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease-standard);
}

.card__link:hover {
  color: var(--color-accent);
}

.card__link:hover::after {
  transform: translateX(4px);
}

/* ----------------------------------------------------------------
   Product Card — tightened spec chips
---------------------------------------------------------------- */

.card--product .card__body {
  padding: var(--space-6);
}

.card--product .card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3);
}

.card--product .card__spec-tag {
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  background-color: var(--paper-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------
   Application Card
---------------------------------------------------------------- */

.card--application .card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  color: var(--color-text-display);
  stroke-width: 1.5;
}

/* ----------------------------------------------------------------
   Blog Card
---------------------------------------------------------------- */

.card--blog .card__image {
  aspect-ratio: 16 / 9;
}

.card--blog .card__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

/* ----------------------------------------------------------------
   Placeholder Card — dashed hairline, not noisy
---------------------------------------------------------------- */

.card--placeholder {
  background-color: var(--paper-50);
  border: 1px dashed var(--color-border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.card--placeholder:hover {
  border-color: var(--color-border-hover);
  box-shadow: none;
}

.card--placeholder__text {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}

/* ----------------------------------------------------------------
   Flat card variant — no border, pure whitespace separation
---------------------------------------------------------------- */

.card--flat {
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

.card--flat:hover {
  border: 0;
  box-shadow: none;
}

.card--flat .card__image {
  border-radius: var(--radius-md);
}

.card--flat .card__body {
  padding: var(--space-4) 0 0;
}

/* ----------------------------------------------------------------
   Sunken card — sits in paper-100 wells / alt sections
---------------------------------------------------------------- */

.card--sunken {
  background-color: var(--paper-100);
  border-color: var(--paper-200);
}

.card--sunken:hover {
  background-color: var(--color-bg-raised);
}

/* ==========================================================================
   Forms — Precision Lab v1
   ==========================================================================

   Input style: hairline border, paper-50 fill, 2px anchor-line focus ring
   (no blur shadow). Error = desaturated --status-error. No orange.
   ========================================================================== */

.form {
  width: 100%;
}

.form__field {
  margin-bottom: var(--space-5);
}

.form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form__required {
  color: var(--status-error);
  margin-left: 2px;
}

.form__input,
.form__textarea,
.form__select {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-display);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.form__input::-moz-placeholder, .form__textarea::-moz-placeholder {
  color: var(--color-text-subtle);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-text-subtle);
}

.form__input:hover,
.form__textarea:hover,
.form__select:hover {
  border-color: var(--color-border-hover);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.form__input--error,
.form__textarea--error,
.form__select--error {
  border-color: var(--status-error);
  box-shadow: 0 0 0 3px rgba(139, 35, 35, 0.12);
}

.form__input--success,
.form__textarea--success,
.form__select--success {
  border-color: var(--status-success);
}

.form__textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--leading-relaxed);
}

.form__select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* Chevron matched to --ink-500 / 86 84 77 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2356544d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.form__file {
  display: block;
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-md);
  background-color: var(--paper-100);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.form__file:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-bg);
}

/* Inline validation */

.form__error {
  display: none;
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--status-error);
}

.form__field--error .form__error {
  display: block;
}

/* Feedback banner */

.form__feedback {
  display: none;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
}

.form__feedback--success {
  display: block;
  background-color: rgba(47, 107, 79, 0.08);
  color: var(--status-success);
  border: 1px solid rgba(47, 107, 79, 0.35);
}

.form__feedback--error {
  display: block;
  background-color: rgba(139, 35, 35, 0.06);
  color: var(--status-error);
  border: 1px solid rgba(139, 35, 35, 0.3);
}

/* Submit row */

.form__submit {
  margin-top: var(--space-4);
}

/* Two-column row */

.form__row--2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .form__row--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Checkbox / Radio */

.form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.form__checkbox input[type="checkbox"],
.form__checkbox input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal--open {
  display: flex;
  opacity: 1;
}

.modal__container {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  background-color: var(--color-white);
  border-radius: var(--card-radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s ease;
}

.modal--open .modal__container {
    transform: translateY(0) scale(1);
  }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  color: var(--color-text);
  transition: background-color 0.2s ease;
}

.modal__close:hover {
    background-color: var(--color-bg-light);
  }

.modal__close:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
  }

.modal__close svg {
    width: 20px;
    height: 20px;
  }

.modal__body {
  padding: 24px;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}

/* Body lock when modal is open */

body.modal-open {
  overflow: hidden;
}

/* Entrance animation keyframe */

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal--open .modal__container {
  animation: modalFadeIn 0.3s ease forwards;
}

/* ==========================================================================
   Hero — Precision Lab v1
   ==========================================================================

   Default hero is PAPER, not navy. Editorial-magazine composition: one big
   display headline with tight tracking, a short lead, at most two actions.
   The accent color appears only in the eyebrow rule and the inline link,
   never as a background fill.

   Modifiers:
     .hero--inverted  → ink-900 surface, paper text (only for product /
                        high-drama pages, never the homepage by default)
     .hero--bg-image  → image background with paper-tint gradient
     .hero--split     → text left, image right (was the default before)
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  padding: var(--section-y-mobile) 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero { padding: var(--section-y-tablet) 0; }
}

@media (min-width: 1024px) {
  .hero { padding: var(--section-y-grand) 0 var(--section-y) 0; }
}

/* ----------------------------------------------------------------
   Eyebrow rule — short label over a short horizontal line
---------------------------------------------------------------- */

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--color-text-muted);
}

/* ----------------------------------------------------------------
   Layout — default is column (editorial), .hero--split goes to row
---------------------------------------------------------------- */

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hero--split .hero__inner {
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .hero--split .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-16);
  }
  .hero--split .hero__content,
  .hero--split .hero__image {
    flex: 1;
    min-width: 0;
  }
}

.hero__content {
  max-width: 820px;
}

/* ----------------------------------------------------------------
   Display headline — the star of the composition
---------------------------------------------------------------- */

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  margin: 0 0 var(--space-5);
}

@media (min-width: 768px) {
  .hero__title {
    font-size: var(--text-6xl);
  }
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: var(--text-7xl);
    letter-spacing: var(--tracking-tighter);
  }
}

/* Optional inline accent span inside the title — cobalt only here */

.hero__title em,
.hero__title .hero__title-accent {
  font-style: normal;
  color: var(--color-accent);
}

.hero__subtitle {
  max-width: 58ch;
  margin: 0 0 var(--space-8);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .hero__subtitle {
    font-size: var(--text-xl);
    margin-bottom: var(--space-10);
  }
}

/* ----------------------------------------------------------------
   Actions — primary (ink) + ghost, at most one hot
---------------------------------------------------------------- */

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .hero__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }
}

/* ----------------------------------------------------------------
   Image block — hairline framed, anti-rounded, slightly inset
---------------------------------------------------------------- */

.hero__image {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--paper-100);
  overflow: hidden;
}

.hero__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------------------
   Inverted variant — ink-900 surface, paper text
   (reserved for high-drama pages; NEVER default)
---------------------------------------------------------------- */

.hero--inverted {
  background-color: var(--color-bg-invert);
  color: var(--color-text-invert);
}

.hero--inverted .hero__eyebrow,
.hero--inverted .hero__eyebrow::before {
  color: var(--paper-300);
  background-color: var(--paper-300);
}

.hero--inverted .hero__title {
  color: var(--paper-50);
}

.hero--inverted .hero__subtitle {
  color: var(--paper-200);
}

.hero--inverted .hero__title em,
.hero--inverted .hero__title .hero__title-accent {
  color: var(--signal-100);   /* legible signal tint on dark */
}

/* ----------------------------------------------------------------
   Background-image variant — tinted paper gradient, no dark overlay
---------------------------------------------------------------- */

.hero--bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero--bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(251, 250, 247, 0.92) 0%,
    rgba(251, 250, 247, 0.75) 60%,
    rgba(251, 250, 247, 0.55) 100%
  );
  z-index: 1;
}

.hero--bg-image .hero__inner {
  position: relative;
  z-index: 2;
}

/* Inverted + bg-image (navy overlay) */

.hero--inverted.hero--bg-image::before {
  background: linear-gradient(
    180deg,
    rgba(20, 19, 15, 0.85) 0%,
    rgba(20, 19, 15, 0.65) 60%,
    rgba(20, 19, 15, 0.45) 100%
  );
}

/* ----------------------------------------------------------------
   Breadcrumb shim (when a hero hosts a breadcrumb instead of header)
---------------------------------------------------------------- */

.hero__breadcrumb {
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
}

.hero__breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-standard);
}

.hero__breadcrumb a:hover {
  color: var(--color-text-display);
}

.hero__breadcrumb span {
  margin: 0 var(--space-2);
  color: var(--color-text-subtle);
}

.hero--inverted .hero__breadcrumb {
  color: var(--paper-300);
}

.hero--inverted .hero__breadcrumb a {
  color: var(--paper-200);
}

.hero--inverted .hero__breadcrumb a:hover {
  color: var(--paper-50);
}

/* ----------------------------------------------------------------
   Spec strip — the four-number bar under the hero on product pages
   (Precision Lab signature: monospace figures on a hairline)
---------------------------------------------------------------- */

.hero__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: var(--space-10);
  padding: 0;
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero__specs {
    grid-template-columns: repeat(4, 1fr);
  }
}

.hero__spec {
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg-raised);
}

.hero__spec-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 4px;
}

.hero__spec-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  color: var(--color-text-display);
  font-feature-settings: 'tnum', 'zero';
  line-height: 1.1;
}

.hero--inverted .hero__specs {
  background-color: var(--ink-700);
  border-color: var(--ink-700);
}

.hero--inverted .hero__spec {
  background-color: var(--ink-900);
}

.hero--inverted .hero__spec-label {
  color: var(--paper-300);
}

.hero--inverted .hero__spec-value {
  color: var(--paper-50);
}

/* ==========================================================================
   Sections — Precision Lab v1
   ==========================================================================

   Each named block is recomposed around the new token system:
     - Monochrome first, accent only where it adds meaning
     - Hairlines over shadows
     - Mono type for numbers / labels, Inter for prose
     - No rounded balloons — radii max 4px
   ========================================================================== */

/* ==========================================================================
   STATS BAR — dark ink strip with mono figures
   ========================================================================== */

.stats-bar {
  background-color: var(--color-bg-invert);
  color: var(--color-text-invert);
  padding: var(--space-10) 0;
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
}

.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
  text-align: left;
}

@media (min-width: 768px) {
  .stats-bar__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

.stats-bar__item {
  padding-left: var(--space-4);
  border-left: 1px solid var(--ink-700);
}

.stats-bar__number {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  color: var(--paper-50);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-feature-settings: 'tnum', 'zero';
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .stats-bar__number { font-size: var(--text-5xl); }
}

.stats-bar__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--paper-300);
}

/* ==========================================================================
   FEATURE CARD — hairline, icon + text
   ========================================================================== */

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard);
}

.feature-card:hover {
  border-color: var(--color-border-hover);
}

.feature-card__icon {
  width: 32px;
  height: 32px;
  color: var(--color-text-display);
  stroke-width: 1.5;
}

.feature-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  margin: 0;
}

.feature-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

/* ==========================================================================
   TRUST BAR — customer / standards logos
   ========================================================================== */

.trust-bar {
  padding: var(--space-8) 0;
  background-color: var(--paper-100);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .trust-bar__inner {
    gap: var(--space-12);
  }
}

.trust-bar__item {
  color: var(--color-text-muted);
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.trust-bar__item:hover {
  opacity: 1;
  color: var(--color-text-display);
}

.trust-bar__item img {
  height: 28px;
  width: auto;
  filter: grayscale(1);
}

.trust-bar__item:hover img {
  filter: grayscale(0);
}

.trust-bar__divider {
  width: 1px;
  height: 20px;
  background-color: var(--color-border-hover);
  opacity: 1;
}

@media (min-width: 768px) {
  .trust-bar__item img { height: 34px; }
}

/* ==========================================================================
   TESTIMONIAL — editorial pull-quote (no italics, no fancy quote mark)
   ========================================================================== */

.testimonial {
  padding: var(--space-8) 0 var(--space-8) var(--space-6);
  border-left: 2px solid var(--color-text-display);
  background: transparent;
  border-radius: 0;
}

.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  margin: 0 0 var(--space-5);
}

@media (min-width: 1024px) {
  .testimonial__quote { font-size: var(--text-2xl); }
}

.testimonial__quote::before {
  content: none;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.testimonial__name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-display);
  letter-spacing: var(--tracking-normal);
}

.testimonial__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */

.timeline {
  position: relative;
  padding-left: var(--space-6);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background-color: var(--color-border);
}

@media (min-width: 768px) {
  .timeline {
    padding-left: var(--space-8);
  }
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-8);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 7px;
  width: 7px;
  height: 7px;
  background-color: var(--color-text-display);
  border-radius: 0;   /* squares, not dots */
}

@media (min-width: 768px) {
  .timeline__item::before { left: -35px; }
}

.timeline__date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-1);
}

.timeline__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  margin: 0 0 var(--space-2);
}

.timeline__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* ==========================================================================
   DECISION GRID
   ========================================================================== */

.decision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .decision-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .decision-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.decision-grid__item {
  padding: var(--space-6);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
}

.decision-grid__item:hover {
  border-color: var(--color-border-strong);
}

.decision-grid__icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-4);
  color: var(--color-text-display);
  stroke-width: 1.5;
}

.decision-grid__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-display);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-2);
}

.decision-grid__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* ==========================================================================
   GALLERY GRID
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gallery-grid__item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--paper-100);
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-standard);
}

.gallery-grid__item:hover img {
  transform: scale(1.04);
}

/* ==========================================================================
   LOGO WALL
   ========================================================================== */

.logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .logo-wall { gap: var(--space-12); }
}

.logo-wall__item {
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-standard);
  filter: grayscale(1);
}

.logo-wall__item:hover {
  opacity: 1;
  filter: grayscale(0);
}

.logo-wall__item img {
  height: 32px;
  width: auto;
}

/* ==========================================================================
   CASE STUDY
   ========================================================================== */

.case-study {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-8);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .case-study {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-10);
    padding: var(--space-10);
  }
}

.case-study__image {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--paper-100);
}

.case-study__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.case-study__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

.case-study__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  margin: 0 0 var(--space-4);
}

@media (min-width: 1024px) {
  .case-study__title { font-size: var(--text-3xl); }
}

.case-study__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}

.case-study__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 480px) {
  .case-study__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.case-study__stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  color: var(--color-text-display);
  font-feature-settings: 'tnum', 'zero';
  letter-spacing: var(--tracking-tight);
  margin-bottom: 4px;
}

.case-study__stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ==========================================================================
   PAIN CARD — monochrome left-rule (was orange)
   ========================================================================== */

.pain-card {
  padding: var(--space-5) var(--space-6);
  border-left: 2px solid var(--color-text-display);
  background-color: var(--paper-100);
  border-radius: 0;
}

.pain-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  margin: 0 0 var(--space-2);
}

.pain-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

/* ==========================================================================
   SOLUTION POINTS
   ========================================================================== */

.solution-points {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.solution-points__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  border-radius: 0;
}

.solution-points__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-accent);
  stroke-width: 1.5;
}

.solution-points__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* ==========================================================================
   CERT GRID
   ========================================================================== */

.cert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .cert-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .cert-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cert-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.cert-grid__image {
  width: 48px;
  height: 48px;
  -o-object-fit: contain;
     object-fit: contain;
}

.cert-grid__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ==========================================================================
   SCREW TYPES
   ========================================================================== */

.screw-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .screw-types {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .screw-types {
    grid-template-columns: repeat(4, 1fr);
  }
}

.screw-types__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard);
}

.screw-types__item:hover {
  border-color: var(--color-border-hover);
}

.screw-types__image {
  width: 64px;
  height: 64px;
  -o-object-fit: contain;
     object-fit: contain;
}

.screw-types__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

/* ==========================================================================
   SUPPORT LIST
   ========================================================================== */

.support-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .support-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.support-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.support-list__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--paper-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-display);
}

.support-list__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  margin: 0 0 var(--space-1);
}

.support-list__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* ==========================================================================
   SECTION LAYOUT PRIMITIVES — generous Precision Lab rhythm
   ========================================================================== */

.section {
  padding-top: var(--section-y-mobile);
  padding-bottom: var(--section-y-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--section-y-tablet);
    padding-bottom: var(--section-y-tablet);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }
}

.section--sunken {
  background-color: var(--paper-100);
}

.section--inverted {
  background-color: var(--color-bg-invert);
  color: var(--color-text-invert);
}

.section--bordered {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section__header {
  max-width: 720px;
  margin-bottom: var(--space-12);
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.section__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background-color: var(--color-text-muted);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  margin: 0 0 var(--space-4);
}

@media (min-width: 768px) {
  .section__title { font-size: var(--text-4xl); }
}

@media (min-width: 1024px) {
  .section__title { font-size: var(--text-5xl); }
}

.section__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 62ch;
  margin: 0;
}

/* ==========================================================================
   MODULES — Design System v1 components (2026-04-19)

   - .screw-compat        · Screw Compatibility Module (component #07)
   - .six-dim             · 6-Dimension Customization (component #08)
   - .industry-hero       · Industry Pillar Hero (component #09)
   - .market-hero         · Market (country) Hero (component #12)
   - .case-card           · Case Study Card (component #14)

   Uses Precision Lab v1 tokens from _variables.css.
   Mobile-first, progressively enhanced.
   ========================================================================== */

/* ========================================================================
   SCREW COMPATIBILITY MODULE
   ======================================================================== */

.screw-compat {
  padding-block: var(--section-y-mobile);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .screw-compat {
    padding-block: var(--section-y-tablet);
  }
}

.screw-compat__header {
  margin-bottom: var(--space-8);
}

.screw-compat__header h2 {
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--color-text-display);
}

.screw-compat__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 65ch;
}

.screw-compat__lead a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.screw-compat__feeders {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block: var(--space-8);
}

@media (min-width: 768px) {
  .screw-compat__feeders {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.feeder-card {
  padding: var(--space-6);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.feeder-card__title {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--color-text-display);
}

.feeder-card__specs {
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-2);
}

.feeder-card__specs > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.feeder-card__specs > div:last-child {
  border-bottom: none;
}

.feeder-card__specs dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.feeder-card__specs dd {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.feeder-card__triggers {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.feeder-card__triggers li {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.feeder-card__triggers li:last-child {
  border-bottom: none;
}

.feeder-card__triggers li::before {
  content: "→ ";
  color: var(--color-accent);
  margin-right: var(--space-2);
}

.feeder-card__note {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.screw-compat__heads {
  margin-block: var(--space-8);
}

.screw-compat__heads h3 {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-4);
  color: var(--color-text-display);
}

.head-types {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2) var(--space-4);
}

.head-types li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  color: var(--color-text);
}

.head-types__check,
.head-types__excl {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  width: 1.25em;
  display: inline-block;
  text-align: center;
}

.head-types__check {
  color: var(--status-success);
}

.head-types__excl {
  color: var(--color-text-subtle);
}

.head-types__reason {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin-left: auto;
}

.screw-compat__warnings {
  padding: var(--space-6);
  background: var(--color-bg-sunken);
  border-left: 3px solid var(--status-warning);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.screw-compat__warnings h3 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
  color: var(--color-text-display);
}

.screw-compat__warnings ul {
  margin: 0;
  padding-left: var(--space-5);
}

.screw-compat__warnings li {
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.screw-compat__fallback {
  padding: var(--space-6);
  background: var(--color-bg-sunken);
  border-radius: var(--radius-md);
}

.screw-compat__dims {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: grid;
  gap: var(--space-3);
}

.screw-compat__dims li {
  line-height: var(--leading-relaxed);
  padding-left: var(--space-4);
  position: relative;
}

.screw-compat__dims li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-text-subtle);
}

.screw-compat__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* ========================================================================
   SIX-DIMENSION CUSTOMIZATION
   ======================================================================== */

.six-dim {
  padding-block: var(--section-y-mobile);
  background: var(--color-bg);
}

@media (min-width: 1024px) {
  .six-dim {
    padding-block: var(--section-y-tablet);
  }
}

.six-dim__header {
  max-width: 65ch;
  margin: 0 auto var(--space-10);
  text-align: center;
}

.six-dim__header h2 {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--color-text-display);
}

@media (max-width: 640px) {
  .six-dim__header h2 {
    font-size: var(--text-4xl);
  }
}

.six-dim__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.six-dim__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .six-dim__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .six-dim__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.dim-card {
  padding: var(--space-6);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard);
}

.dim-card:hover {
  border-color: var(--color-border-hover);
}

.dim-card__index {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-3);
}

.dim-card__title {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--color-text-display);
}

.dim-card__options {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-2);
}

.dim-card__options li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.dim-card__options li:last-child {
  border-bottom: none;
}

.dim-card__code {
  display: inline-block;
  min-width: 2.5em;
  padding: 2px var(--space-2);
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
}

.dim-card__note {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.six-dim__cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* ========================================================================
   INDUSTRY PILLAR HERO
   ======================================================================== */

.industry-hero {
  padding-block: var(--space-10) var(--section-y-mobile);
}

@media (min-width: 1024px) {
  .industry-hero {
    padding-block: var(--space-12) var(--section-y-tablet);
  }
}

.industry-hero__eyebrow {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}

.industry-hero__eyebrow a {
  color: inherit;
  text-decoration: none;
}

.industry-hero__eyebrow a:hover {
  color: var(--color-accent);
}

.industry-hero__title {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-8);
  color: var(--color-text-display);
  max-width: 18ch;
}

@media (max-width: 640px) {
  .industry-hero__title {
    font-size: var(--text-4xl);
  }
}

.industry-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .industry-hero__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-12);
    align-items: start;
  }
}

.industry-hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin: 0 0 var(--space-8);
}

.industry-hero__pain-heading {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--color-text-display);
}

.industry-hero__pain-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: grid;
  gap: var(--space-3);
}

.industry-hero__pain-list li {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-raised);
  border-left: 2px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: var(--leading-normal);
}

.industry-hero__pain-list strong {
  color: var(--color-text-display);
  font-weight: var(--weight-semibold);
  display: block;
}

.industry-hero__pain-detail {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.industry-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.industry-hero__visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-bg-raised);
}

/* ========================================================================
   MARKET HERO (country page)
   ======================================================================== */

.market-hero {
  padding-block: var(--space-10) var(--section-y-mobile);
}

@media (min-width: 1024px) {
  .market-hero {
    padding-block: var(--space-12) var(--section-y-tablet);
  }
}

.market-hero__eyebrow {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}

.market-hero__eyebrow a {
  color: inherit;
  text-decoration: none;
}

.market-hero__eyebrow a:hover {
  color: var(--color-accent);
}

.market-hero__title {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-8);
  color: var(--color-text-display);
  max-width: 20ch;
}

@media (max-width: 640px) {
  .market-hero__title {
    font-size: var(--text-4xl);
  }
}

.market-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .market-hero__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-12);
    align-items: start;
  }
}

.market-hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}

.market-hero__facts {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}

.market-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.market-hero__fact-label {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.market-hero__industries {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-8);
}

.market-hero__industries strong {
  color: var(--color-text-display);
  font-weight: var(--weight-semibold);
  margin-right: var(--space-2);
}

.market-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.market-hero__visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-bg-raised);
}

/* ========================================================================
   CASE CARD
   ======================================================================== */

.case-card {
  padding: var(--space-6);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-4);
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}

.case-card:hover {
  border-color: var(--color-border-hover);
  transform: translateY(-2px);
}

.case-card__header {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.case-card__logo {
  max-height: 48px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 0 var(--space-2);
}

.case-card__logo--placeholder {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-display);
  height: 48px;
  display: flex;
  align-items: center;
}

.case-card__label {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.case-card__machine {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.case-card__metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4);
}

.case-card__metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.case-card__metric-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  line-height: var(--leading-tight);
}

.case-card__metric-label {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.case-card__metrics-pending {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  font-style: italic;
  margin: 0;
}

.case-card__quote {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  font-size: var(--text-base);
  background: var(--color-bg-sunken);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.case-card__footer {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.case-card__link {
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.case-card__link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ========================================================================
   MONO UTILITY (used across modules)
   ======================================================================== */

.mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
}

/* ========================================================================
   RFQ FORM — 4-step progressive form (component #17)
   ======================================================================== */

.rfq-wrap {
  max-width: var(--container-content);
  margin: 0 auto;
  padding-block: var(--space-10);
}

.rfq-progress {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  counter-reset: step;
}

.rfq-progress__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  position: relative;
  opacity: 0.5;
  transition: opacity var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}

.rfq-progress__step.is-active {
  opacity: 1;
  border-color: var(--color-accent);
}

.rfq-progress__step.is-done {
  opacity: 0.85;
  border-color: var(--status-success);
}

.rfq-progress__step.is-done::after {
  content: "✓";
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  color: var(--status-success);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}

.rfq-progress__num {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-widest);
}

.rfq-progress__label {
  font-size: var(--text-sm);
  color: var(--color-text-display);
  font-weight: var(--weight-medium);
}

@media (max-width: 640px) {
  .rfq-progress {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1);
  }
  .rfq-progress__step {
    padding: var(--space-2);
  }
  .rfq-progress__label {
    font-size: var(--text-xs);
  }
}

.form--rfq {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

@media (max-width: 640px) {
  .form--rfq {
    padding: var(--space-5);
  }
}

.rfq-step {
  display: none;
  border: none;
  padding: 0;
  margin: 0;
}

.rfq-step.is-active {
  display: block;
  animation: rfq-fade-in var(--dur-medium) var(--ease-standard);
}

@keyframes rfq-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rfq-step__title {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-display);
  margin: 0 0 var(--space-3);
  padding: 0;
}

.rfq-step__intro {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-8);
  max-width: 60ch;
}

.form__row {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.form__row--2col {
  grid-template-columns: 1fr;
}

.form__row--3col {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .form__row--2col { grid-template-columns: repeat(2, 1fr); }
  .form__row--3col { grid-template-columns: repeat(3, 1fr); }
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.form__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-display);
}

.form__required {
  color: var(--status-error);
}

.form__input,
.form__select,
.form__textarea {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.form__input.has-error,
.form__select.has-error,
.form__textarea.has-error {
  border-color: var(--status-error);
}

.form__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
  line-height: var(--leading-normal);
}

.form__file {
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.rfq-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.rfq-disclaimer {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--color-bg-sunken);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-border-hover);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-6) 0;
}

.form__feedback {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  display: none;
}

.form__feedback--error,
.form__feedback--success {
  display: block;
}

.form__feedback--error {
  background: #fef0f0;
  border: 1px solid var(--status-error);
  color: var(--status-error);
}

.form__feedback--success {
  background: #eef7f1;
  border: 1px solid var(--status-success);
  color: var(--status-success);
}

/* ========================================================================
   MARKETS OVERVIEW + COUNTRY PAGES
   ======================================================================== */

.market-overview-hero {
  padding-block: var(--space-12) var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.market-overview-hero__eyebrow {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

.market-overview-hero__title {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--color-text-display);
}

.market-overview-hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 70ch;
  margin: 0;
}

.market-list {
  padding-block: var(--section-y-mobile);
}

@media (min-width: 1024px) {
  .market-list {
    padding-block: var(--section-y-tablet);
  }
}

.market-region {
  margin-bottom: var(--space-12);
}

.market-region__title {
  font-size: var(--text-2xl);
  color: var(--color-text-display);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  letter-spacing: var(--tracking-tight);
}

.market-region__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .market-region__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .market-region__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.market-region__item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}

.market-region__item a:hover {
  border-color: var(--color-accent);
  transform: translateX(2px);
}

.market-region__item a:hover .market-region__arrow {
  color: var(--color-accent);
  transform: translateX(2px);
}

.market-region__country {
  font-weight: var(--weight-medium);
  color: var(--color-text-display);
}

.market-region__arrow {
  color: var(--color-text-subtle);
  transition: color var(--dur-base), transform var(--dur-base);
}

.market-overview-cta {
  padding-block: var(--section-y-mobile);
  background: var(--color-bg-sunken);
  text-align: center;
}

.market-overview-cta h2 {
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-3);
  color: var(--color-text-display);
}

.market-overview-cta p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 auto var(--space-6);
}

/* Country page sections */

.market-machines,
.market-logistics,
.market-faq,
.market-cta {
  padding-block: var(--space-10) 0;
}

.market-machines h2,
.market-logistics h2,
.market-faq h2,
.market-cta h2 {
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
  color: var(--color-text-display);
}

.machine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

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

@media (min-width: 1024px) {
  .machine-grid { grid-template-columns: repeat(3, 1fr); }
}

.machine-card a {
  display: block;
  padding: var(--space-5);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-standard);
}

.machine-card a:hover {
  border-color: var(--color-accent);
}

.machine-card__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.machine-card__title {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2);
  color: var(--color-text-display);
  letter-spacing: var(--tracking-tight);
}

.machine-card__intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-normal);
}

.logistics-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
}

@media (min-width: 768px) {
  .logistics-list { grid-template-columns: repeat(2, 1fr); }
}

.logistics-list > div {
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.logistics-list dt {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.logistics-list dd {
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-normal);
}

.market-cta {
  padding-block: var(--section-y-mobile);
  text-align: center;
}

.market-cta p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 auto var(--space-6);
}

/* ========================================================================
   FAQ ACCORDION (shared across product / industry / market pages)
   ======================================================================== */

.faq details {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

.faq details[open] {
  background: var(--color-bg-raised);
}

.faq summary {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-display);
  cursor: pointer;
  padding: var(--space-3) 0;
  list-style: none;
  position: relative;
  padding-right: var(--space-8);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-standard);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details > div {
  padding: var(--space-2) var(--space-6) var(--space-4);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   HOMEPAGE MODULES — Day 6 · 2026-04-20 · Industrial Editorial
   - .home-hero
   - .home-results
   - .home-industries + .industry-card
   - .home-logos + .logo-card
   - .home-factory
   ========================================================================== */

/* Small-caps eyebrow label — reused across home sections */

.home-hero__eyebrow,
.home-industries__eyebrow,
.home-factory__eyebrow,
.home-logos__eyebrow {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--color-muted, #5f6c73);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* ---------- Home Hero ---------- */

.home-hero {
  padding-block: clamp(3rem, 5vw, 6rem) clamp(2.5rem, 4vw, 5rem);
  border-bottom: 1px solid var(--color-border);
}

.home-hero__container {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .home-hero__container {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.home-hero__title {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: clamp(2.2rem, 5.5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-text, #0A1F2C);
  font-weight: 600;
  margin: 0 0 var(--space-6);
}

.home-hero__title-emph {
  color: var(--color-accent, #0A7E8C);
  font-style: normal;
}

.home-hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-text, #0A1F2C);
  max-width: 42rem;
  margin: 0 0 var(--space-8);
}

.home-hero__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-6);
  margin: 0 0 var(--space-8);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home-hero__specs > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.home-hero__specs dt {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted, #5f6c73);
}

.home-hero__specs dd {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text, #0A1F2C);
  margin: 0;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-hero__figure {
  margin: 0;
  position: relative;
}

.home-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-surface, #f6f3ed);
}

.home-hero__figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted, #5f6c73);
}

/* ---------- Home Results Bar ---------- */

.home-results {
  padding-block: clamp(2.5rem, 4vw, 4rem);
  background: var(--color-surface, #f6f3ed);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home-results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
}

.home-results__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-right: var(--space-4);
  border-right: 1px solid var(--color-border);
}

.home-results__item:last-child {
  border-right: 0;
}

@media (max-width: 800px) {
  .home-results__item {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-4);
  }
  .home-results__item:last-child { border-bottom: 0; }
}

.home-results__value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}

.home-results__number {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-text, #0A1F2C);
  letter-spacing: -0.03em;
}

.home-results__unit {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted, #5f6c73);
}

.home-results__label {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--color-text, #0A1F2C);
  margin: 0;
}

/* ---------- Home Industries ---------- */

.home-industries {
  padding-block: clamp(3rem, 5vw, 6rem);
}

.home-industries__header {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.home-industries__title {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text, #0A1F2C);
  margin: 0 0 var(--space-4);
}

.home-industries__lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-muted, #5f6c73);
  margin: 0;
}

.home-industries__grid {
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .home-industries__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .home-industries__grid { grid-template-columns: 1fr 1fr 1fr; }
}

.industry-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  background: var(--color-bg, #f0ece6);
  transition: background var(--dur-base, 180ms) var(--ease-standard, ease);
}

.industry-card:hover {
  background: var(--color-surface, #f6f3ed);
}

.industry-card__ref {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted, #5f6c73);
}

.industry-card__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text, #0A1F2C);
  margin: 0;
  letter-spacing: -0.01em;
}

.industry-card__desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text, #0A1F2C);
  margin: 0;
  flex: 1;
}

.industry-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-accent, #0A7E8C);
  text-decoration: none;
  margin-top: var(--space-2);
}

.industry-card__link:hover,
.industry-card__link:focus {
  text-decoration: underline;
}

/* ---------- Home Logo Wall ---------- */

.home-logos {
  padding-block: clamp(3rem, 5vw, 6rem);
  background: var(--color-surface, #f6f3ed);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home-logos__header {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.home-logos__title {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text, #0A1F2C);
  margin: 0 0 var(--space-4);
}

.home-logos__lead {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-muted, #5f6c73);
  margin: 0;
}

.home-logos__grid {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 700px) {
  .home-logos__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .home-logos__grid { grid-template-columns: repeat(4, 1fr); }
}

.logo-card {
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg, #f0ece6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 6rem;
}

.logo-card__name {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: baseline;
}

.logo-card__brand {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text, #0A1F2C);
  letter-spacing: -0.01em;
}

.logo-card__country {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--color-muted, #5f6c73);
  text-transform: uppercase;
}

.logo-card__zh {
  font-size: 0.82rem;
  color: var(--color-muted, #5f6c73);
}

.logo-card__industry {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-muted, #5f6c73);
  margin-top: auto;
}

.home-logos__footnote {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-muted, #5f6c73);
  max-width: 42rem;
  margin: 0;
}

.home-logos__footnote a {
  color: var(--color-accent, #0A7E8C);
  text-decoration: none;
  font-weight: 500;
}

.home-logos__footnote a:hover { text-decoration: underline; }

/* ---------- Home Factory ---------- */

.home-factory {
  padding-block: clamp(3rem, 5vw, 6rem);
}

.home-factory__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .home-factory__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.home-factory__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-surface, #f6f3ed);
}

.home-factory__figcaption {
  margin-top: var(--space-3);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted, #5f6c73);
}

.home-factory__title {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text, #0A1F2C);
  margin: 0 0 var(--space-5);
}

.home-factory__lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text, #0A1F2C);
  margin: 0 0 var(--space-6);
}

.home-factory__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.home-factory__stats > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.home-factory__stat-value {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text, #0A1F2C);
}

.home-factory__stat-label {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-muted, #5f6c73);
  margin: 0;
}

.home-factory__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-accent, #0A7E8C);
  text-decoration: none;
}

.home-factory__link:hover,
.home-factory__link:focus { text-decoration: underline; }

/* ---------- Utility ---------- */

.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;
}

.mono {
  font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
}

/* ==========================================================================
   REQUEST A QUOTE PAGE — Day 6 Part B · Industrial Editorial
   ========================================================================== */

.rfq-page__hero {
  padding-block: clamp(3rem, 5vw, 5rem) clamp(2rem, 3vw, 3.5rem);
  border-bottom: 1px solid var(--color-border);
}

.rfq-page__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted, #5f6c73);
  margin-bottom: var(--space-4);
}

.rfq-page__title {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text, #0A1F2C);
  margin: 0 0 var(--space-6);
  max-width: 22ch;
}

.rfq-page__lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--color-text, #0A1F2C);
  max-width: 46rem;
  margin: 0 0 var(--space-8);
}

.rfq-page__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.rfq-page__trust li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text, #0A1F2C);
}

.rfq-page__trust .mono {
  color: var(--color-muted, #5f6c73);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.rfq-page__form {
  padding-block: clamp(2.5rem, 4vw, 4rem);
  background: var(--color-surface, #f6f3ed);
  border-bottom: 1px solid var(--color-border);
}

.rfq-page__next {
  padding-block: clamp(3rem, 5vw, 5rem);
}

.rfq-page__subtitle {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--color-text, #0A1F2C);
  margin: 0 0 clamp(2rem, 3vw, 3rem);
}

.rfq-page__next-grid {
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .rfq-page__next-grid { grid-template-columns: repeat(3, 1fr); }
}

.rfq-page__next-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--color-bg, #f0ece6);
  color: var(--color-text, #0A1F2C);
  text-decoration: none;
  transition: background var(--dur-base, 180ms) var(--ease-standard, ease);
}

.rfq-page__next-card:hover,
.rfq-page__next-card:focus {
  background: var(--color-surface, #f6f3ed);
}

.rfq-page__next-card .mono {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--color-muted, #5f6c73);
}

.rfq-page__next-card strong {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rfq-page__next-card span:last-child {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-muted, #5f6c73);
}

/* ==========================================================================
   2026-04-20 · Day 6 Part E
   Insights / Case Studies / News / Press — first-principles per content type
   ========================================================================== */

/* ---------- Shared · chip filters ---------- */

.chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #4a5763);
    text-decoration: none;
    background: transparent;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.chip:hover { border-color: var(--color-text); color: var(--color-text); }

.chip--active { background: var(--color-text); color: #fff; border-color: var(--color-text); }

.chip__count { font-size: 10px; opacity: 0.7; }

/* ---------- container variants ---------- */

.container--narrow { max-width: 760px; margin: 0 auto; }

/* ============================================================
   INSIGHTS — Magazine-style long-form reading experience
   ============================================================ */

.insight-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 100;
    background: transparent;
    pointer-events: none;
}

.insight-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-accent, #0A7E8C);
    transition: width 80ms linear;
}

.insights-hero {
    padding: clamp(3rem, 5vw, 6rem) 0 clamp(2rem, 4vw, 4rem);
    border-bottom: 1px solid var(--color-border);
}

.insights-hero__eyebrow { color: var(--color-text-muted, #4a5763); font-size: 11px; letter-spacing: 0.14em; margin: 0 0 12px; }

.insights-hero__title   { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; }

.insights-hero__lede    { font-size: clamp(1rem, 1.4vw, 1.25rem); max-width: 720px; color: var(--color-text-muted, #4a5763); margin: 0 0 20px; }

.insights-hero__meta a  { color: var(--color-accent, #0A7E8C); text-decoration: none; }

.insights-featured {
    padding: clamp(2rem, 4vw, 4rem) 0;
    border-bottom: 1px solid var(--color-border);
}

.insights-featured__card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    background: var(--color-surface, #f6f3ed);
    padding: clamp(1.5rem, 3vw, 3rem);
    border: 1px solid var(--color-border);
}

@media (min-width: 900px) {
    .insights-featured__card { grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
}

.insights-featured__media img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; -o-object-fit: cover; object-fit: cover; }

.insights-featured__eyebrow  { color: var(--color-accent, #0A7E8C); font-size: 11px; letter-spacing: 0.14em; margin: 0 0 12px; }

.insights-featured__title    { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; margin: 0 0 16px; }

.insights-featured__title a  { color: inherit; text-decoration: none; }

.insights-featured__title a:hover { color: var(--color-accent, #0A7E8C); }

.insights-featured__tldr     { font-size: 1rem; line-height: 1.55; margin: 0 0 16px; color: var(--color-text-muted, #4a5763); }

.insights-featured__meta     { font-size: 11px; letter-spacing: 0.12em; color: var(--color-text-muted, #4a5763); margin: 0 0 20px; }

.insights-filter {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    border-bottom: 1px solid var(--color-border);
}

.insights-filter__label { font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 12px; }

.insights-filter__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.insights-grid-wrap { padding: clamp(2rem, 4vw, 4rem) 0; }

.insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

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

@media (min-width: 1024px) { .insights-grid { grid-template-columns: repeat(3, 1fr); } }

.insight-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid transparent;
    transition: border-color 150ms ease;
}

.insight-card:hover { border-color: var(--color-border); }

.insight-card__media { display: block; overflow: hidden; }

.insight-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; -o-object-fit: cover; object-fit: cover; transition: transform 400ms ease; }

.insight-card:hover .insight-card__media img { transform: scale(1.03); }

.insight-card__body    { padding: 0 12px 20px; display: flex; flex-direction: column; gap: 10px; }

.insight-card__format  { align-self: flex-start; font-size: 10px; letter-spacing: 0.14em; color: var(--color-accent, #0A7E8C); border: 1px solid var(--color-accent, #0A7E8C); padding: 3px 8px; }

.insight-card__title   { font-size: 1.2rem; line-height: 1.25; margin: 0; font-weight: 600; }

.insight-card__title a { color: inherit; text-decoration: none; }

.insight-card__title a:hover { color: var(--color-accent, #0A7E8C); }

.insight-card__tldr    { font-size: 0.93rem; line-height: 1.55; color: var(--color-text-muted, #4a5763); margin: 0; }

.insight-card__meta    { font-size: 10px; letter-spacing: 0.12em; color: var(--color-text-muted, #4a5763); margin-top: auto; }

.insights-pagination { margin-top: clamp(2rem, 4vw, 4rem); display: flex; justify-content: center; }

.insights-empty { text-align: center; padding: 3rem 0; color: var(--color-text-muted, #4a5763); }

/* --- Single Insight --- */

.insight__hero { padding: clamp(3rem, 5vw, 6rem) 0 clamp(2rem, 3vw, 3rem); }

.insight__eyebrow { font-size: 11px; letter-spacing: 0.14em; margin: 0 0 16px; color: var(--color-text-muted, #4a5763); }

.insight__format { color: var(--color-accent, #0A7E8C); font-weight: 600; }

.insight__title { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 24px; }

.insight__tldr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 20px 24px;
    margin: 0 0 24px;
    background: var(--color-surface, #f6f3ed);
    border-left: 3px solid var(--color-accent, #0A7E8C);
}

.insight__tldr-label { font-size: 10px; letter-spacing: 0.14em; color: var(--color-accent, #0A7E8C); font-weight: 700; padding-top: 2px; }

.insight__tldr-body  { margin: 0; font-size: 1rem; line-height: 1.55; }

.insight__byline { display: flex; gap: 16px; align-items: center; margin-top: 24px; }

.insight__author-avatar { border-radius: 50%; flex-shrink: 0; }

.insight__byline-text   { display: flex; flex-direction: column; gap: 4px; }

.insight__author-name   { margin: 0; font-weight: 600; }

.insight__byline-meta   { margin: 0; font-size: 10px; letter-spacing: 0.12em; color: var(--color-text-muted, #4a5763); }

.insight__cover { margin: clamp(2rem, 3vw, 3rem) 0; }

.insight__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; }

.insight__body-wrap { padding: clamp(2rem, 4vw, 4rem) 0; }

.insight__body-grid { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1100px; }

@media (min-width: 1024px) {
    .insight__body-grid { grid-template-columns: 220px 1fr; gap: 60px; }
}

.insight__toc {
    position: sticky; top: 100px; align-self: start;
    max-height: calc(100vh - 140px); overflow-y: auto;
    padding-right: 12px;
}

.insight__toc-label { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 12px; font-family: var(--font-mono); }

.insight-toc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.insight-toc__link {
    display: block;
    padding: 4px 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #4a5763);
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    padding-left: 12px;
    margin-left: -12px;
    transition: color 120ms, border-color 120ms;
}

.insight-toc__link.is-active { color: var(--color-accent, #0A7E8C); border-left-color: var(--color-accent, #0A7E8C); }

.insight-toc__link:hover     { color: var(--color-text); }

.insight-toc__item--h3 .insight-toc__link { padding-left: 28px; font-size: 0.8rem; }

.insight__content { max-width: 720px; font-size: 1.0625rem; line-height: 1.7; }

.insight__content h2 { font-size: 1.6rem; margin: 2rem 0 1rem; line-height: 1.2; letter-spacing: -0.01em; }

.insight__content h3 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }

.insight__content p  { margin: 0 0 1rem; }

.insight__content ul, .insight__content ol { padding-left: 1.5em; margin: 0 0 1rem; }

.insight__content a  { color: var(--color-accent, #0A7E8C); text-decoration: underline; text-underline-offset: 3px; }

.insight__content blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--color-surface, #f6f3ed); border-left: 3px solid var(--color-accent, #0A7E8C); font-style: normal; }

.insight__footer { padding: clamp(2rem, 4vw, 4rem) 0 0; border-top: 1px solid var(--color-border); }

.insight__author-card {
    display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
    padding: 28px; background: var(--color-surface, #f6f3ed); margin-bottom: 24px;
}

.insight__author-card img { border-radius: 50%; }

.insight__author-label { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 4px; }

.insight__author-card-name { margin: 0 0 4px; font-weight: 600; font-size: 1.1rem; }

.insight__author-role     { margin: 0 0 4px; font-size: 0.9rem; color: var(--color-text-muted, #4a5763); }

.insight__author-worksfor { margin: 0; font-size: 10px; letter-spacing: 0.12em; color: var(--color-text-muted, #4a5763); }

.insight__pillar-link  { font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); }

.insight__pillar-link a { color: var(--color-accent, #0A7E8C); text-decoration: none; font-weight: 600; }

.insight-related { padding: clamp(3rem, 5vw, 5rem) 0; background: var(--color-surface, #f6f3ed); border-top: 1px solid var(--color-border); }

.insight-related__heading { font-size: clamp(1.4rem, 2.5vw, 1.75rem); margin: 0 0 28px; }

.insight-related__grid    { display: grid; grid-template-columns: 1fr; gap: 24px; }

@media (min-width: 768px) { .insight-related__grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   CASE STUDIES — KPI-first evidence layout
   ============================================================ */

.case-hero {
    padding: clamp(3rem, 5vw, 6rem) 0 clamp(2rem, 4vw, 4rem);
    border-bottom: 1px solid var(--color-border);
}

.case-hero__eyebrow { font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 12px; }

.case-hero__title   { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.02em; }

.case-hero__lede    { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--color-text-muted, #4a5763); max-width: 760px; margin: 0 0 20px; }

.case-hero__meta    { font-size: 11px; letter-spacing: 0.14em; color: var(--color-accent, #0A7E8C); margin: 0; }

.case-filter { padding: 1.5rem 0; border-bottom: 1px solid var(--color-border); }

.case-filter__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }

.case-filter__group { display: flex; flex-direction: column; gap: 6px; }

.case-filter__label { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); }

.case-filter__form select { padding: 8px 12px; border: 1px solid var(--color-border); background: #fff; font-size: 0.9rem; min-width: 180px; }

.case-filter__clear { font-size: 11px; letter-spacing: 0.12em; color: var(--color-text-muted, #4a5763); text-decoration: none; padding: 8px 0; }

.case-grid-wrap { padding: clamp(2rem, 4vw, 4rem) 0; }

.case-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 768px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1100px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }

.case-card {
    border: 1px solid var(--color-border);
    padding: 28px 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 150ms ease, transform 200ms ease;
}

.case-card:hover { border-color: var(--color-accent, #0A7E8C); transform: translateY(-2px); }

.case-card__header { display: flex; flex-direction: column; gap: 10px; min-height: 84px; }

.case-card__logo img { max-height: 48px; width: auto; max-width: 160px; filter: grayscale(0.3); }

.case-card__logo-fallback { font-weight: 700; font-size: 1.1rem; margin: 0; letter-spacing: -0.01em; }

.case-card__classifier { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0; }

.case-card__title { margin: 0; font-size: 1.05rem; line-height: 1.3; font-weight: 600; }

.case-card__title a { color: inherit; text-decoration: none; }

.case-card__title a:hover { color: var(--color-accent, #0A7E8C); }

.case-card__subtitle { font-size: 0.85rem; color: var(--color-text-muted, #4a5763); margin: 0; }

.case-card__kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 8px 0; padding: 0; }

.case-card__kpi  { display: flex; flex-direction: column; gap: 2px; }

.case-card__kpi-label  { font-size: 10px; letter-spacing: 0.08em; color: var(--color-text-muted, #4a5763); margin: 0; line-height: 1.2; }

.case-card__kpi-value  { margin: 0; font-weight: 700; line-height: 1; }

.case-card__kpi-number { font-size: 1.4rem; }

.case-card__kpi-unit   { font-size: 0.85rem; color: var(--color-text-muted, #4a5763); margin-left: 2px; }

.case-card__kpi-delta  { margin: 0; font-size: 10px; color: var(--color-accent, #0A7E8C); letter-spacing: 0.04em; }

.case-card__locked { font-size: 10px; letter-spacing: 0.12em; color: var(--color-text-muted, #4a5763); margin: 0; padding: 12px; background: var(--color-surface, #f6f3ed); text-align: center; }

.case-card__products { font-size: 10px; letter-spacing: 0.1em; color: var(--color-text-muted, #4a5763); margin: 0; }

.case-card__cta a { font-size: 13px; color: var(--color-accent, #0A7E8C); text-decoration: none; font-weight: 600; }

.case-card__cta a:hover { text-decoration: underline; }

.case-pagination { margin-top: clamp(2rem, 4vw, 4rem); display: flex; justify-content: center; }

.case-empty      { text-align: center; padding: 3rem 0; color: var(--color-text-muted, #4a5763); }

/* --- Single Case Study --- */

.case__hero {
    padding: clamp(3rem, 5vw, 6rem) 0 clamp(2rem, 4vw, 4rem);
    border-bottom: 1px solid var(--color-border);
}

.case__hero-header { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 28px; }

.case__customer-logo img { max-height: 64px; width: auto; max-width: 220px; }

.case__classifier  { font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0; }

.case__title       { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.08; margin: 0 0 12px; letter-spacing: -0.02em; }

.case__customer-sub{ font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--color-text-muted, #4a5763); margin: 0 0 32px; }

.case__kpi-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    padding: 28px;
    background: var(--color-surface, #f6f3ed);
    border-top: 3px solid var(--color-accent, #0A7E8C);
}

.case__kpi { display: flex; flex-direction: column; gap: 4px; }

.case__kpi-label  { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0; }

.case__kpi-value  { margin: 0; font-weight: 700; line-height: 1; }

.case__kpi-number { font-size: clamp(2rem, 4vw, 3rem); }

.case__kpi-unit   { font-size: 1rem; color: var(--color-text-muted, #4a5763); margin-left: 4px; }

.case__kpi-delta  { margin: 0; font-size: 11px; letter-spacing: 0.08em; color: var(--color-accent, #0A7E8C); }

.case__locked-notice { text-align: center; padding: 1.5rem; background: var(--color-surface, #f6f3ed); font-size: 11px; letter-spacing: 0.12em; color: var(--color-text-muted, #4a5763); }

.case__products { padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--color-border); }

.case__products-label { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 12px; }

.case__products-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }

.case__products-list a { display: inline-block; padding: 8px 16px; border: 1px solid var(--color-border); color: inherit; text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: border-color 120ms; }

.case__products-list a:hover { border-color: var(--color-accent, #0A7E8C); color: var(--color-accent, #0A7E8C); }

.case__narrative { padding: clamp(3rem, 5vw, 5rem) 0; }

.case__section   { margin-bottom: 2.5rem; }

.case__section-heading { font-size: 1.5rem; margin: 0 0 0.75rem; }

.case__section-body    { font-size: 1.0625rem; line-height: 1.7; margin: 0; color: var(--color-text); }

.case__quote {
    margin: 3rem 0;
    padding: 2rem;
    border-left: 4px solid var(--color-accent, #0A7E8C);
    background: var(--color-surface, #f6f3ed);
}

.case__quote-text { font-size: 1.2rem; line-height: 1.5; font-weight: 500; margin: 0 0 1rem; font-style: italic; }

.case__quote-attr { font-style: normal; font-size: 11px; letter-spacing: 0.12em; color: var(--color-text-muted, #4a5763); }

.case__customer-link { text-align: center; padding: 2rem 0; font-size: 11px; letter-spacing: 0.14em; }

.case__customer-link a { color: var(--color-accent, #0A7E8C); text-decoration: none; font-weight: 600; }

.case-related { padding: clamp(3rem, 5vw, 5rem) 0; background: var(--color-surface, #f6f3ed); border-top: 1px solid var(--color-border); }

.case-related__heading { font-size: clamp(1.4rem, 2.5vw, 1.75rem); margin: 0 0 28px; }

.case-related__grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

.case-card--related    { padding: 20px; gap: 10px; }

.case-card__kpi-preview { font-size: 0.95rem; font-weight: 600; color: var(--color-accent, #0A7E8C); margin: 0; }

/* ============================================================
   NEWS — Timeline-style dated announcements
   ============================================================ */

.news-hero {
    padding: clamp(3rem, 5vw, 6rem) 0 clamp(2rem, 4vw, 4rem);
    border-bottom: 1px solid var(--color-border);
}

.news-hero__eyebrow { font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 12px; }

.news-hero__title   { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.02em; }

.news-hero__lede    { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--color-text-muted, #4a5763); max-width: 760px; margin: 0 0 20px; }

.news-hero__meta a  { color: var(--color-accent, #0A7E8C); text-decoration: none; font-size: 11px; letter-spacing: 0.12em; }

.news-filter { padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--color-border); }

.news-filter__label { font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 12px; }

.news-filter__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.news-featured { padding: clamp(2rem, 4vw, 4rem) 0; }

.news-featured__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

@media (min-width: 800px) { .news-featured__grid { grid-template-columns: repeat(3, 1fr); } }

.news-featured__card { display: flex; flex-direction: column; gap: 14px; }

.news-featured__media img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; }

.news-featured__meta  { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0; display: flex; gap: 8px; align-items: center; }

.news-featured__type  { color: var(--color-accent, #0A7E8C); font-weight: 700; }

.news-featured__title { margin: 0; font-size: 1.2rem; line-height: 1.25; font-weight: 600; }

.news-featured__title a { color: inherit; text-decoration: none; }

.news-featured__title a:hover { color: var(--color-accent, #0A7E8C); }

.news-featured__excerpt { font-size: 0.93rem; line-height: 1.55; color: var(--color-text-muted, #4a5763); margin: 0; }

.news-timeline-wrap { padding: clamp(2rem, 4vw, 4rem) 0; border-top: 1px solid var(--color-border); }

.news-timeline { display: flex; flex-direction: column; gap: 40px; }

.news-timeline__heading {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--color-text-muted, #4a5763);
    margin: 0 0 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.news-timeline__list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }

.news-timeline__item article { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 20px; border-left: 2px solid var(--color-border); transition: border-left-color 150ms ease; }

.news-timeline__item:hover article { border-left-color: var(--color-accent, #0A7E8C); }

.news-timeline__date  { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; background: var(--color-surface, #f6f3ed); }

.news-timeline__day   { font-size: 1.5rem; font-weight: 700; line-height: 1; }

.news-timeline__mon   { font-size: 10px; letter-spacing: 0.14em; margin-top: 4px; }

.news-timeline__meta  { font-size: 10px; letter-spacing: 0.14em; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }

.news-timeline__type  { font-weight: 700; color: var(--color-accent, #0A7E8C); padding: 2px 8px; border: 1px solid var(--color-accent, #0A7E8C); }

.news-timeline__type--trade-show    { color: #A06B00; border-color: #A06B00; }

.news-timeline__type--product-launch { color: #2E7D32; border-color: #2E7D32; }

.news-timeline__type--press-release { color: #6A1B9A; border-color: #6A1B9A; }

.news-timeline__ended { padding: 2px 6px; background: #999; color: #fff; font-size: 9px; letter-spacing: 0.1em; }

.news-timeline__title { margin: 0 0 6px; font-size: 1.1rem; line-height: 1.3; }

.news-timeline__title a { color: inherit; text-decoration: none; }

.news-timeline__title a:hover { color: var(--color-accent, #0A7E8C); }

.news-timeline__excerpt { font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted, #4a5763); margin: 0; }

.news-pagination { margin-top: clamp(2rem, 4vw, 4rem); display: flex; justify-content: center; }

.news-empty      { text-align: center; padding: 3rem 0; color: var(--color-text-muted, #4a5763); }

/* --- Single News --- */

.news__hero { padding: clamp(3rem, 5vw, 6rem) 0 clamp(2rem, 3vw, 3rem); }

.news__back a { font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); text-decoration: none; }

.news__back a:hover { color: var(--color-accent, #0A7E8C); }

.news__meta { margin: 20px 0 24px; font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); display: flex; gap: 10px; align-items: center; }

.news__type { color: var(--color-accent, #0A7E8C); font-weight: 700; padding: 2px 8px; border: 1px solid var(--color-accent, #0A7E8C); }

.news__type--trade-show    { color: #A06B00; border-color: #A06B00; }

.news__type--product-launch { color: #2E7D32; border-color: #2E7D32; }

.news__type--press-release { color: #6A1B9A; border-color: #6A1B9A; }

.news__ended { padding: 2px 6px; background: #999; color: #fff; font-size: 9px; letter-spacing: 0.1em; }

.news__title { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 20px; letter-spacing: -0.02em; }

.news__lede  { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--color-text-muted, #4a5763); margin: 0 0 32px; }

.news__event-card {
    margin: 24px 0;
    padding: 20px 24px;
    background: var(--color-surface, #f6f3ed);
    border-left: 3px solid var(--color-accent, #0A7E8C);
}

.news__event-label { font-size: 10px; letter-spacing: 0.14em; color: var(--color-accent, #0A7E8C); margin: 0 0 14px; }

.news__event-grid  { margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }

.news__event-grid dt { font-size: 10px; letter-spacing: 0.12em; color: var(--color-text-muted, #4a5763); text-transform: uppercase; margin-bottom: 2px; }

.news__event-grid dd { margin: 0 0 8px; font-weight: 500; }

.news__cover { margin: clamp(1.5rem, 3vw, 2.5rem) 0; }

.news__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; }

.news__body-wrap { padding: clamp(1rem, 3vw, 3rem) 0 clamp(3rem, 5vw, 5rem); }

.news__body { font-size: 1.0625rem; line-height: 1.7; }

.news__body h2 { font-size: 1.35rem; margin: 1.5rem 0 0.75rem; }

.news__body p  { margin: 0 0 1rem; }

.news__body ul, .news__body ol { padding-left: 1.5em; margin: 0 0 1rem; }

.news-related { padding: clamp(3rem, 5vw, 5rem) 0; background: var(--color-surface, #f6f3ed); border-top: 1px solid var(--color-border); }

.news-related__heading { font-size: clamp(1.4rem, 2.5vw, 1.75rem); margin: 0 0 28px; }

.news-related__grid    { display: grid; grid-template-columns: 1fr; gap: 20px; }

@media (min-width: 768px) { .news-related__grid { grid-template-columns: repeat(3, 1fr); } }

.news-related__card    { padding: 20px; border: 1px solid var(--color-border); }

.news-related__meta    { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 8px; display: flex; gap: 8px; }

.news-related__title   { margin: 0; font-size: 1rem; line-height: 1.35; }

.news-related__title a { color: inherit; text-decoration: none; }

/* ============================================================
   PRESS / MEDIA CENTER
   ============================================================ */

.press-hero {
    padding: clamp(3rem, 5vw, 6rem) 0 clamp(2.5rem, 4vw, 4rem);
    border-bottom: 1px solid var(--color-border);
}

.press-hero__eyebrow { font-size: 11px; letter-spacing: 0.14em; color: var(--color-accent, #0A7E8C); margin: 0 0 12px; }

.press-hero__title   { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.02em; }

.press-hero__lede    { font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--color-text-muted, #4a5763); max-width: 760px; margin: 0 0 24px; }

.press-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.press-hero__sla     { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); }

.press-facts { padding: clamp(3rem, 5vw, 5rem) 0; }

.press-facts__heading { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 32px; }

.press-facts__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

@media (min-width: 640px) { .press-facts__grid { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1024px) { .press-facts__grid { grid-template-columns: repeat(4, 1fr); } }

.press-facts__item { padding: 20px; border-top: 3px solid var(--color-accent, #0A7E8C); background: var(--color-surface, #f6f3ed); }

.press-facts__item dt { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 6px; font-family: var(--font-mono); }

.press-facts__item dd { margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 500; }

.press-kit { padding: clamp(3rem, 5vw, 5rem) 0; background: var(--color-surface, #f6f3ed); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

.press-kit__heading { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 12px; }

.press-kit__lede    { font-size: 1rem; color: var(--color-text-muted, #4a5763); margin: 0 0 28px; max-width: 760px; }

.press-kit__list    { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 768px) { .press-kit__list { grid-template-columns: repeat(2, 1fr); } }

.press-kit__item {
    display: flex; flex-direction: column; gap: 16px;
    padding: 24px; background: #fff; border: 1px solid var(--color-border);
}

.press-kit__item-title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 600; }

.press-kit__item-desc  { margin: 0; font-size: 0.93rem; color: var(--color-text-muted, #4a5763); line-height: 1.55; }

.press-news { padding: clamp(3rem, 5vw, 5rem) 0; border-bottom: 1px solid var(--color-border); }

.press-news__heading { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 28px; }

.press-news__list    { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }

.press-news__item    { padding: 20px 0; border-bottom: 1px solid var(--color-border); }

.press-news__item:last-child { border-bottom: none; }

.press-news__meta    { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 6px; display: flex; gap: 8px; }

.press-news__item-title { margin: 0; font-size: 1.1rem; line-height: 1.35; }

.press-news__item-title a { color: inherit; text-decoration: none; }

.press-news__item-title a:hover { color: var(--color-accent, #0A7E8C); }

.press-news__more  { font-size: 10px; letter-spacing: 0.14em; margin: 20px 0 0; }

.press-news__more a { color: var(--color-accent, #0A7E8C); text-decoration: none; }

.press-contact { padding: clamp(3rem, 5vw, 5rem) 0; }

.press-contact__heading { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 28px; }

.press-contact__grid    { display: grid; grid-template-columns: 1fr; gap: 20px; }

@media (min-width: 800px) { .press-contact__grid { grid-template-columns: repeat(3, 1fr); } }

.press-contact__card    { padding: 28px; background: var(--color-surface, #f6f3ed); border-top: 3px solid var(--color-accent, #0A7E8C); }

.press-contact__label   { font-size: 10px; letter-spacing: 0.14em; color: var(--color-text-muted, #4a5763); margin: 0 0 12px; }

.press-contact__detail  { font-size: 1.1rem; margin: 0 0 12px; font-weight: 600; }

.press-contact__detail a{ color: var(--color-accent, #0A7E8C); text-decoration: none; word-break: break-all; }

.press-contact__sla     { font-size: 10px; letter-spacing: 0.12em; color: var(--color-text-muted, #4a5763); margin: 0; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.spec-table {
  width: 100%;
  min-width: 480px;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}

.spec-table thead {
  background-color: var(--color-primary);
}

.spec-table th {
  padding: 12px 16px;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-white);
  text-align: left;
  white-space: nowrap;
}

.spec-table td {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.spec-table tbody tr:last-child td {
  border-bottom: none;
}

.spec-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-light);
}

.spec-table tbody tr {
  transition: background-color 0.2s ease;
}

:is(.spec-table tbody tr):hover {
    background-color: rgba(13, 148, 136, 0.05);
  }

/* Highlight column */

.spec-table__highlight {
  font-weight: 600;
  color: var(--color-primary);
}

/* ==========================================================================
   Blog
   ========================================================================== */

.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .blog-layout {
    grid-template-columns: 1fr 300px;
    gap: 48px;
  }
}

/* Blog Post */

.blog-post .blog-post__header {
    margin-bottom: 24px;
  }

.blog-post .blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.8125rem;
    color: rgba(51, 51, 51, 0.6);
  }

.blog-post .blog-post__category {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-secondary);
    background-color: rgba(13, 148, 136, 0.1);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

.blog-post .blog-post__title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
  }

@media (min-width: 768px) {
    .blog-post .blog-post__title {
      font-size: 2.25rem;
    }
  }

.blog-post .blog-post__featured-image {
    width: 100%;
    border-radius: var(--card-radius);
    margin-bottom: 32px;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
  }

.blog-post .blog-post__content {
    /* Uses .prose styles for rich content */
  }

.blog-post .blog-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
  }

.blog-post .blog-post__tag {
    padding: 4px 12px;
    font-size: 0.8125rem;
    color: var(--color-text);
    background-color: var(--color-bg-light);
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

:is(.blog-post .blog-post__tag):hover {
      background-color: var(--color-secondary);
      color: var(--color-white);
    }

/* Category Filter Pills */

.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.category-filter__pill {
  display: inline-block;
  padding: 8px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.category-filter__pill:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
  }

.category-filter__pill--active {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* Sidebar */

.sidebar-blog .sidebar-blog__section {
    margin-bottom: 32px;
  }

.sidebar-blog .sidebar-blog__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-secondary);
  }

.sidebar-blog .sidebar-blog__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

.sidebar-blog .sidebar-blog__link {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-text);
    transition: color 0.2s ease;
  }

:is(.sidebar-blog .sidebar-blog__link):hover {
      color: var(--color-cta);
    }

.sidebar-blog .sidebar-blog__widget {
    padding: 20px;
    background-color: var(--color-bg-light);
    border-radius: var(--card-radius);
  }

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Screen reader only */

.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;
}

/* Text alignment */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Margin top */

.mt-0 { margin-top: 0; }

.mt-1 { margin-top: 8px; }

.mt-2 { margin-top: 16px; }

.mt-3 { margin-top: 24px; }

.mt-4 { margin-top: 32px; }

/* Margin bottom */

.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: 8px; }

.mb-2 { margin-bottom: 16px; }

.mb-3 { margin-bottom: 24px; }

.mb-4 { margin-bottom: 32px; }

/* Responsive visibility */

.show-on-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .show-on-desktop {
    display: block;
  }
}

.show-on-mobile {
  display: block;
}

@media (min-width: 1024px) {
  .show-on-mobile {
    display: none;
  }
}