/* =========================================================================
   THEME — consolidated stylesheet.
   =========================================================================
   Loads AFTER style.css (tokens) and site.css (main visual layer).
   Single-file override organized top-down by page.

   Sections:
     1. Tokens & fonts
     2. Global resets & site-layer neutralization
     3. Navigation
     4. Shared components (buttons, gradient emphasis, pillars)
     5. Homepage
     6. Company page
     7. Products overview page
     8. Individual product detail pages
     9. News section
    10. Motion helpers (scroll arrow, zoom)
   ========================================================================= */

/* =========================================================================
   1. TOKENS & FONTS
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap');

:root {
  --metis-blue: #19A3DD;
  --metis-blue-dark: #1A478D;
  --metis-blue-light: #00c2ff;
  --metis-blue-pale: #7fd4ff;
  --gold: #F4BF18;

  /* Headline <em> gradient. Swap this one line to flip between blue and gold.
     Blue (active):   linear-gradient(135deg, #108fd4 0%, #00c2ff 50%, #0a7dc4 100%)
     Gold (alt):      linear-gradient(135deg, #B8860B 0%, #F4BF18 50%, #FFD54A 100%) */
  --headline-gradient: linear-gradient(135deg, #108fd4 0%, #00c2ff 50%, #0a7dc4 100%);

  --ink: #1d1d1f;
  --muted: #6e6e73;
  --rule: #e3e7ec;
  --paper: #ffffff;
  --paper-2: #f5f5f7;
  --dark: #050608;
  --dark-2: #0c0f14;
  --dark-3: #141821;
  --font-heading: 'Montserrat', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-body:    'Open Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
}

html, body,
p, li, dt, dd, td, th, span, a, input, select, textarea, button,
blockquote, figcaption, label, small {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6,
.sec-head__title, .hero__text h1, .page-hero h1, .product-hero h1,
.industries__title, .news-card__title, .product-card__title,
.location-card h3, .component h3, .component h4, .about__quote,
.footer-brand, .footer-col h4, .pillar__value, .hero__meta-item .n,
.metric__num, .apple-showcase h2, .apple-showcase__slide h3,
.timeline__title, .cta-banner h2, .faq-item summary,
.spec-compare-apple__tab {
  font-family: var(--font-heading);
}


/* =========================================================================
   2. GLOBAL RESETS
   ========================================================================= */

.topbar { display: none !important; }
body { margin: 0; cursor: auto !important; }

/* Anti-scraper decoy: visible in raw HTML, hidden from humans (and from
   user's clipboard via user-select:none). A regex-based email scraper that
   reads textContent will extract a junk address; the JS hydrator wipes this
   and replaces with the clean mailto at runtime. */
.no-scrape {
  display: none !important;
}
.cursor-glow { display: none !important; }
a, button, input, select, textarea { cursor: pointer; }
input[type="text"], input[type="email"], textarea { cursor: text; }

/* Remove numbered eyebrow prefixes ("01 / About" etc) site-wide */
.hero__text .eyebrow,
.page-hero .eyebrow,
.product-hero .eyebrow,
.industries__header .eyebrow,
.sec-head .eyebrow,
.cta-banner .eyebrow {
  display: none !important;
}

/* EXCEPTION: On products overview page, section eyebrows ARE the category labels
   (Measuring Equipment / Magnetizing Systems / Custom Solutions) — show them */
body.is-products section#measuring-equipment .sec-head .eyebrow,
body.is-products section#magnetizing-systems .sec-head .eyebrow,
body.is-products section#custom-solutions .sec-head .eyebrow {
  display: block !important;
  color: var(--metis-blue) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  opacity: 1 !important;
}


/* =========================================================================
   3. NAVIGATION — bigger links with blue underline hover
   ========================================================================= */

.site-header { height: auto; }
.nav { padding: 16px 22px; min-height: 84px; align-items: center; gap: 48px; }
.brand {
  margin-right: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.brand__img {
  height: 52px !important;
  width: auto !important;
  max-width: 260px;
  object-fit: contain;
  display: block;
}

.nav__links { gap: 36px; font-size: 15px; font-weight: 500; }
.nav__links a {
  padding: 8px 2px;
  position: relative;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--metis-blue);
  transition: width .35s var(--ease);
  display: block !important;
}
.nav__links a:hover { color: var(--metis-blue); }
.nav__links a:hover::after,
.nav__links a.active::after { width: 100%; }
.nav__links a.active { color: var(--metis-blue); }

.nav__cta {
  background: var(--metis-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s;
}
.nav__cta:hover {
  background: var(--metis-blue-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(25,163,221,.5);
}

/* Language selector */
.nav__lang { position: relative; margin-right: 14px; }
.nav__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all .3s var(--ease);
}
.nav__lang-btn:hover { border-color: var(--metis-blue); color: var(--metis-blue); }
.nav__lang-btn svg { transition: transform .3s var(--ease); }
.nav__lang.is-open .nav__lang-btn { border-color: var(--metis-blue); color: var(--metis-blue); }
.nav__lang.is-open .nav__lang-btn svg { transform: rotate(180deg); }
.nav__lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 6px;
  margin: 0;
  list-style: none;
  min-width: 160px;
  box-shadow: 0 12px 32px -8px rgba(11,18,32,.15);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  z-index: 120;
}
.nav__lang.is-open .nav__lang-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__lang-menu li { margin: 0; padding: 0; }
.nav__lang-menu button {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background .2s, color .2s;
}
.nav__lang-menu button:hover { background: rgba(25,163,221,.08); color: var(--metis-blue); }
.nav__lang-menu button.is-active { color: var(--metis-blue); font-weight: 600; }
.nav__lang-menu button.is-active::after { content: '✓'; float: right; }


/* =========================================================================
   4. SHARED COMPONENTS
   ========================================================================= */

/* Buttons */
.btn, a.btn, button.btn {
  border-radius: 6px !important;
  padding: 13px 28px !important;
  font-weight: 500 !important;
  transition: transform .35s var(--ease),
              box-shadow .35s var(--ease),
              background .3s !important;
}
.btn:hover, a.btn:hover, button.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(25,163,221,.45);
}

/* Ghost button on dark news section: blue text → white on hover with subtle outline */
section.news-section .btn--ghost,
section.news-wrap .btn--ghost {
  background: transparent !important;
  color: var(--metis-blue-light) !important;
  border: 1px solid rgba(25,163,221,.5) !important;
  padding: 13px 28px !important;
}
section.news-section .btn--ghost:hover,
section.news-wrap .btn--ghost:hover {
  background: var(--metis-blue) !important;
  color: #fff !important;
  border-color: var(--metis-blue) !important;
}

/* Gradient emphasis on <em> in headlines (non-italic to avoid clipping).
   Overrides any inline style="color: var(--accent)" via !important. */
h1 em, h2 em, h3 em, h4 em,
.sec-head__title em, .hero__text h1 em, .page-hero h1 em, .product-hero h1 em,
.apple-showcase h2 em, .apple-showcase__slide h3 em {
  display: inline !important;
  white-space: normal !important;
  font-style: normal !important;
  font-weight: inherit !important;
  font-family: var(--font-heading) !important;
  background: var(--headline-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  /* Prevent right-edge glyph clipping where background-clip: text crops the
     final character's anti-aliased edge. */
  padding-right: 0.06em;
  margin-right: -0.06em;
}

/* product.js's word-reveal wraps each heading word in a .word-reveal span,
   including words inside <em>. That breaks background-clip: text on the em
   (glyphs are rendered by the span, not the em) and the gradient disappears.
   Re-apply the gradient to .word-reveal children of em so the text renders. */
h1 em .word-reveal, h2 em .word-reveal, h3 em .word-reveal, h4 em .word-reveal,
.sec-head__title em .word-reveal, .hero__text h1 em .word-reveal,
.page-hero h1 em .word-reveal, .product-hero h1 em .word-reveal,
.apple-showcase h2 em .word-reveal, .apple-showcase__slide h3 em .word-reveal {
  background: var(--headline-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Pillars — numbered PILLAR 01..04 via CSS counter */
.pillars { counter-reset: pillar-counter; }
.pillar,
section:nth-of-type(even) .pillar {
  counter-increment: pillar-counter;
  background: var(--paper-2) !important;
  border-radius: 18px !important;
  border: 1px solid var(--rule) !important;
  text-align: center;
  padding: 32px 24px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s !important;
  color: var(--ink) !important;
}
.pillar:hover {
  transform: translateY(-4px);
  background: #fff !important;
  box-shadow: 0 22px 44px -20px rgba(11,18,32,.15) !important;
}
.pillar__num { display: none !important; }
.pillar__label { font-size: 0 !important; line-height: 1 !important; }
.pillar__label::before {
  content: 'PILLAR ' counter(pillar-counter, decimal-leading-zero);
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--metis-blue);
  margin-bottom: 6px;
  line-height: 1.2;
  font-family: var(--font-mono);
}
.pillar__value {
  color: var(--ink) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}

/* Company page: keep pillars on the light/home-page treatment even when the
   containing section has been auto-promoted to .apple-feature by site.js.
   site.css:1106 would otherwise give them a dark background without the
   lift-and-shadow hover. Specificity: 0,0,3,1 beats section.apple-feature
   .pillar (0,0,2,1). */
body.is-company section.apple-feature .pillar {
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
}
body.is-company section.apple-feature .pillar:hover {
  background: #fff !important;
  border-color: var(--rule) !important;
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -20px rgba(11,18,32,.15) !important;
}
body.is-company section.apple-feature .pillar h3,
body.is-company section.apple-feature .pillar .pillar__value {
  color: var(--ink) !important;
}
body.is-company section.apple-feature .pillar p {
  color: var(--muted) !important;
}


/* =========================================================================
   5. HOMEPAGE
   ========================================================================= */

body.is-home .hero {
  position: relative;
  min-height: 100vh;
  padding-top: 140px;
  padding-bottom: 120px;
  overflow: hidden;
  background: var(--dark) !important;
}
body.is-home .hero__bg {
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1800px, 100%);
  background-image: url('img/hero-windings.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(0.2) contrast(1.05);
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
body.is-home .hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,6,8,.55) 0%, rgba(5,6,8,.72) 80%, rgba(5,6,8,.85) 100%),
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(16,143,212,.15), transparent 60%);
}
body.is-home .hero__grid,
body.is-home .hero__glow,
body.is-home .data-console { display: none !important; }

body.is-home .hero__inner {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 60px !important;
  align-items: start !important;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  text-align: left !important;
}
body.is-home .hero__text { text-align: left; }
body.is-home .hero__text h1 {
  color: #fff !important;
  font-size: clamp(40px, 6vw, 84px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.02 !important;
  margin: 0 0 28px !important;
  max-width: 18ch;
}
body.is-home .hero__lead {
  color: rgba(255,255,255,.75) !important;
  font-size: clamp(18px, 1.5vw, 22px) !important;
  max-width: 680px;
  margin: 0 0 36px !important;
}
body.is-home .hero__cta { justify-content: flex-start; margin-top: 0; }
body.is-home .hero__cta .btn {
  background: var(--metis-blue) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 30px !important;
}
body.is-home .hero__cta .btn:hover { background: var(--metis-blue-dark) !important; }
body.is-home .hero__cta .btn--light {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}
body.is-home .hero__cta .btn--light:hover {
  background: #fff !important;
  color: var(--dark) !important;
  border-color: #fff !important;
}
body.is-home .hero__meta {
  margin-top: 80px !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(255,255,255,.15) !important;
  justify-content: flex-start !important;
  gap: 32px !important;
  flex-wrap: nowrap !important;
}
body.is-home .hero__meta-item {
  flex: 1 1 0;
  min-width: 0;
}
body.is-home .hero__meta-item .n {
  color: #fff !important;
  font-size: clamp(24px, 2.4vw, 36px) !important;
  white-space: nowrap;
}
body.is-home .hero__meta-item .l {
  color: rgba(255,255,255,.55) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap;
}
body.is-home .hero__visual {
  justify-self: end;
  max-width: 520px;
  width: 100%;
  margin-top: 20px;
}

@media (max-width: 900px) {
  body.is-home .hero__inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  body.is-home .hero__visual { justify-self: stretch; max-width: 100%; }
}

/* BH widget */
body.is-home .interactive-bh {
  background: var(--dark-2) !important;
  border: 1px solid #1a1f2b !important;
  padding: 40px !important;
  position: relative;
  aspect-ratio: 1 !important;
  max-width: 520px !important;
  color: #e8ebf0;
  font-family: var(--font-mono);
  border-radius: 0 !important;
}
body.is-home .interactive-bh svg { width: 100%; height: 100%; overflow: visible; }
body.is-home .interactive-bh .bh-axis { stroke: rgba(255,255,255,.15); stroke-width: 1; fill: none; }
body.is-home .interactive-bh .bh-grid { stroke: rgba(255,255,255,.05); stroke-width: 1; fill: none; }
body.is-home .interactive-bh .bh-curve {
  fill: none;
  stroke: var(--metis-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(25,163,221,.5));
  transition: d .6s cubic-bezier(.2,.9,.2,1), stroke .3s;
}
body.is-home .interactive-bh .bh-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: rgba(255,255,255,.55);
  letter-spacing: 0.12em;
}
body.is-home .interactive-bh .bh-label--accent { fill: var(--metis-blue); }
body.is-home .interactive-bh .bh-controls {
  display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap;
}
body.is-home .interactive-bh .bh-chip {
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: all .3s;
}
body.is-home .interactive-bh .bh-chip:hover { color: #fff; border-color: rgba(255,255,255,.4); }
body.is-home .interactive-bh .bh-chip.is-active {
  background: var(--metis-blue);
  border-color: var(--metis-blue);
  color: #fff;
}
body.is-home .interactive-bh .bh-readout {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  text-align: right;
  line-height: 1.6;
  font-family: var(--font-mono);
}
body.is-home .interactive-bh .bh-readout span { color: var(--metis-blue); font-weight: 600; }

/* About section */
body.is-home section.about-wrap {
  background: var(--paper) !important;
  padding: clamp(100px, 12vw, 160px) 0 !important;
  text-align: center;
}
body.is-home section.about-wrap::before { display: none !important; }
body.is-home section.about-wrap .wrap { max-width: 1100px; margin: 0 auto; }
body.is-home section.about-wrap .sec-head {
  grid-template-columns: 1fr !important;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 80px !important;
  padding-bottom: 0 !important;
  border: none !important;
  gap: 18px !important;
}
body.is-home section.about-wrap .sec-head__title {
  color: var(--ink) !important;
  font-size: clamp(44px, 5.2vw, 76px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.02 !important;
  margin: 0 !important;
}
body.is-home section.about-wrap .sec-head__desc {
  color: var(--muted) !important;
  font-size: clamp(19px, 1.6vw, 24px) !important;
  max-width: 760px;
  margin: 0 auto !important;
}
body.is-home section.about-wrap .about {
  grid-template-columns: 1fr !important;
  text-align: center;
  gap: 48px !important;
  max-width: 900px;
  margin: 0 auto;
}
body.is-home section.about-wrap .about__quote {
  font-family: var(--font-heading) !important;
  font-size: clamp(24px, 2.8vw, 36px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--ink) !important;
  text-align: center !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin: 0 auto 40px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  max-width: 820px;
}
body.is-home section.about-wrap .about__body { text-align: center; }
body.is-home section.about-wrap .about__body .lead { margin: 0 auto; color: #424245 !important; }

/* Industries section */
body.is-home section.industries {
  background: var(--paper) !important;
  color: var(--ink) !important;
  padding: clamp(100px, 12vw, 160px) 0 !important;
  overflow: visible;
}
body.is-home section.industries::before { display: none !important; }
body.is-home .industries__header {
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px !important;
  gap: 12px !important;
}
body.is-home .industries__title {
  color: var(--ink) !important;
  font-size: clamp(40px, 5vw, 68px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  margin: 0 !important;
  max-width: none !important;
}
body.is-home .industries__desc {
  color: var(--muted) !important;
  font-size: clamp(18px, 1.5vw, 22px) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  max-width: 600px;
  line-height: 1.4;
}
body.is-home .industries__list {
  background: transparent !important;
  border: none !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px !important;
}
body.is-home .industry {
  background: var(--paper-2) !important;
  border-radius: 18px !important;
  padding: 32px 18px !important;
  text-align: center;
  align-items: center !important;
  transition: all .35s var(--ease);
}
body.is-home .industry:hover {
  background: rgba(25,163,221,.08) !important;
  transform: translateY(-4px);
}
body.is-home .industry__num { display: none !important; }
body.is-home .industry__name,
body.is-home .industry span:last-child {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

@media (max-width: 900px) {
  body.is-home .industries__list { grid-template-columns: repeat(3, 1fr); }
}

/* Apple showcase carousel */
body.is-home .apple-showcase h2,
body.is-home .apple-showcase .sec-head__title {
  font-size: clamp(44px, 5.2vw, 76px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
}

/* CTA banner */
body.is-home .cta-banner { padding-block: 100px; }
body.is-home .cta-banner h2 {
  font-size: clamp(34px, 4vw, 56px) !important;
  font-weight: 700 !important;
}


/* =========================================================================
   6. COMPANY PAGE
   ========================================================================= */

body.is-company .page-hero {
  position: relative;
  overflow: hidden;
  padding: 160px 0 120px !important;
  background: var(--dark) !important;
}
body.is-company .page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/team-portrait.jpg');
  background-size: cover;
  background-position: center top;
  filter: contrast(1.03) saturate(0.9);
  z-index: 0;
}
body.is-company .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(5,6,8,.88) 0%, rgba(5,6,8,.72) 45%, rgba(5,6,8,.35) 100%),
    radial-gradient(ellipse 50% 70% at 20% 50%, rgba(16,143,212,.12), transparent 60%);
  z-index: 1;
}
body.is-company .page-hero > .wrap { position: relative; z-index: 2; }
body.is-company .page-hero h1 {
  font-size: clamp(50px, 6.8vw, 96px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  color: #fff !important;
  margin: 0 0 22px !important;
}
body.is-company .page-hero p {
  color: rgba(255,255,255,.8) !important;
  font-size: clamp(19px, 1.6vw, 26px) !important;
}

body.is-company h2, body.is-company .sec-head__title {
  font-size: clamp(36px, 4.4vw, 64px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}
body.is-company h3 { font-size: clamp(22px, 2vw, 30px) !important; }
body.is-company .sec-head {
  text-align: center;
  grid-template-columns: 1fr !important;
  max-width: 900px;
  margin: 0 auto 60px !important;
}

body.is-company section.apple-feature {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
body.is-company section.apple-feature::before {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(16,143,212,.08), transparent 60%) !important;
}
body.is-company section.apple-feature .sec-head__title,
body.is-company section.apple-feature h2 { color: var(--ink) !important; }
body.is-company section.apple-feature .sec-head__desc { color: var(--muted) !important; }
body.is-company section.apple-feature .about__quote { color: var(--ink) !important; }
body.is-company section.apple-feature .lead,
body.is-company section.apple-feature p { color: #424245 !important; }

/* Timeline polish */
body.is-company .timeline__item { transition: padding-left .5s var(--ease); }
body.is-company .timeline__item:hover { padding-left: 68px; }
body.is-company .timeline__item::before {
  transition: transform .5s var(--ease), background .3s;
}
body.is-company .timeline__item:hover::before {
  transform: scale(1.4);
  background: var(--metis-blue);
  box-shadow: 0 0 0 8px rgba(25,163,221,.12);
}


/* =========================================================================
   7. PRODUCTS OVERVIEW PAGE
   ========================================================================= */

body.is-products .page-hero {
  background: var(--dark) !important;
  position: relative;
  overflow: hidden;
}
body.is-products .page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/products-hero.jpg');
  background-size: cover;
  background-position: center;
  filter: contrast(1.05) saturate(0.95);
  z-index: 0;
}
body.is-products .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,6,8,.78) 0%, rgba(5,6,8,.82) 100%),
    radial-gradient(ellipse 55% 55% at 50% 50%, rgba(16,143,212,.15), transparent 65%);
  z-index: 1;
}
body.is-products .page-hero > .wrap { position: relative; z-index: 2; }
body.is-products .page-hero h1 {
  color: #fff !important;
  font-size: clamp(50px, 6.5vw, 88px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
}
body.is-products .page-hero p { color: rgba(255,255,255,.8) !important; }

/* Sticky 3-link products menu */
body.is-products .products-menu {
  position: sticky;
  top: 84px;
  z-index: 80;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 18px 0;
}
body.is-products .products-menu .section-nav__inner {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
body.is-products .products-menu .section-nav__link {
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: all .3s var(--ease);
}
body.is-products .products-menu .section-nav__link:hover {
  color: var(--metis-blue);
  border-color: var(--metis-blue);
  background: rgba(25,163,221,.04);
  transform: translateY(-1px);
}
body.is-products .products-menu .section-nav__link.is-active {
  background: var(--metis-blue);
  color: #fff;
  border-color: var(--metis-blue);
  box-shadow: 0 6px 16px -6px rgba(25,163,221,.5);
}

body.is-products section[id] { scroll-margin-top: 160px; }

body.is-products .sec-head {
  grid-template-columns: 1fr !important;
  text-align: left !important;
  gap: 20px !important;
  max-width: none;
  margin-bottom: 60px !important;
}
body.is-products .sec-head__title {
  font-size: clamp(34px, 4vw, 56px) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.035em !important;
}
body.is-products .sec-head__desc {
  font-size: clamp(17px, 1.4vw, 20px);
  max-width: 680px;
  margin: 0;
  color: var(--muted) !important;
}

/* Product cards — tight grid with hairline dividers */
body.is-products .products-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: var(--rule) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  overflow: hidden;
}
body.is-products section#magnetizing-systems .products-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
/* Measuring Equipment now has 4 products (HyMPulse 4.0, HyMPulse, HyMAC, MSAT) — 2×2 */
body.is-products section#measuring-equipment .products-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
body.is-products .product-card:first-child { grid-column: auto !important; }

/* Related-products strip on product detail pages now has 4 cards — make the
   grid 4 columns on wide screens, 2 on mid, 1 on mobile. */
body.is-product-detail .products-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1000px) {
  body.is-product-detail .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  body.is-product-detail .products-grid { grid-template-columns: 1fr !important; }
}

body.is-products .product-card {
  background: var(--paper) !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  cursor: pointer;
  transition: box-shadow .5s var(--ease), transform .5s var(--ease) !important;
}
body.is-products .product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,143,212,.06), transparent);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
  z-index: 2;
}
body.is-products .product-card:hover::before { opacity: 1; }
body.is-products .product-card:hover {
  border: none !important;
  box-shadow: 0 30px 60px -30px rgba(11,18,32,.22) !important;
  transform: translateY(-4px) !important;
}

body.is-products .product-card__img {
  order: 0 !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #f4f6f9 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100%;
  flex: 0 0 auto !important;
}
body.is-products .product-card__img img {
  width: 100%; height: 100%;
  object-fit: contain !important;
  padding: 8px;
  transition: transform 1.5s var(--ease), filter .6s !important;
  filter: saturate(.95);
}
body.is-products .product-card:hover .product-card__img img {
  transform: scale(1.04) !important;
  filter: saturate(1.05);
}

body.is-products .product-card__body {
  order: 1 !important;
  padding: 32px 28px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  text-align: left !important;
  flex: 1 1 auto !important;
}
body.is-products .product-card__tag {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--metis-blue) !important;
  font-weight: 500 !important;
  margin: 0 0 2px !important;
  display: inline-block;
  max-width: max-content;
}
body.is-products .product-card__title {
  font-family: var(--font-heading) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 2px 0 4px !important;
  max-width: none !important;
  text-align: left !important;
}
body.is-products .product-card__desc {
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: none !important;
  text-align: left !important;
}
body.is-products .product-card__arrow {
  margin-top: 18px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  transition: transform .4s var(--ease), color .3s !important;
}
body.is-products .product-card:hover .product-card__arrow {
  transform: translateX(8px);
  color: var(--metis-blue) !important;
}

body.is-products .spec-compare-apple {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 18px;
}
body.is-products .spec-compare-apple__tabs {
  background: var(--paper-2) !important;
  border-bottom: 1px solid var(--rule) !important;
}
body.is-products .spec-compare-apple__tab {
  color: var(--muted) !important;
}
body.is-products .spec-compare-apple__tab:hover {
  color: var(--ink) !important;
}
body.is-products .spec-compare-apple__tab.is-active {
  color: var(--ink) !important;
}
body.is-products .spec-compare-apple__panel dt {
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.is-products .spec-compare-apple__panel dd {
  color: var(--ink) !important;
}



/* Section 8 (per-page product detail overrides) was removed on 2026-04-22.
   Individual product pages now use product.css directly,
   so there is nothing to override here. Zoom behaviour lives in
   theme.js (installProductZoom) with its CSS in Section 13 below. */

/* =========================================================================
   9. NEWS SECTION (site-wide)
   ========================================================================= */

section.news-section,
section.news-wrap {
  background: var(--dark) !important;
  color: #fff !important;
  padding: clamp(100px, 12vw, 160px) 0 !important;
}
section.news-section::before,
section.news-wrap::before { display: none !important; }

section.news-section .sec-head,
section.news-wrap .sec-head {
  grid-template-columns: 1fr !important;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 70px !important;
  padding-bottom: 0 !important;
  border: none !important;
}
section.news-section .sec-head__title,
section.news-wrap .sec-head__title {
  color: #fff !important;
  font-size: clamp(40px, 5vw, 68px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  margin: 0 0 18px !important;
}
section.news-section .sec-head__desc,
section.news-wrap .sec-head__desc {
  color: rgba(255,255,255,.65) !important;
  font-size: clamp(18px, 1.5vw, 22px) !important;
  max-width: 700px;
  margin: 0 auto !important;
}

section.news-section .news-card,
section.news-wrap .news-card {
  background: var(--dark-2) !important;
  border: 1px solid #1a1f2b !important;
  border-radius: 18px !important;
  transition: all .45s var(--ease);
}
section.news-section .news-card:hover,
section.news-wrap .news-card:hover {
  background: var(--dark-3) !important;
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(25,163,221,.3);
}
section.news-section .news-card__date,
section.news-wrap .news-card__date { color: var(--metis-blue) !important; }
section.news-section .news-card__title,
section.news-wrap .news-card__title { color: #fff !important; }
section.news-section .news-card__excerpt,
section.news-section .news-card__desc,
section.news-wrap .news-card__excerpt,
section.news-wrap .news-card__desc { color: rgba(255,255,255,.7) !important; }
section.news-section .news-card__link,
section.news-wrap .news-card__link { color: var(--metis-blue) !important; }



/* Section 10 (motion helpers — scroll-arrow, hover-scale zoom, hotspot overlay)
   was removed on 2026-04-22. The hotspot-injection JS was removed on
   2026-04-22 as well. Product detail pages now use the product-page layout
   directly, and the new zoom behaviour lives in Section 13 (product-image
   zoom / lightbox). */

/* Magnifier-lens inspector on product-hero images. JS in theme.js creates
   one .product-hero__lens inside each .product-hero__img on product pages and
   sets backgroundImage + backgroundSize + backgroundPosition on mousemove. */
.product-hero__img { position: relative; }
.product-hero__lens {
  position: absolute;
  pointer-events: none;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.95);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.2),
    inset 0 0 0 1px rgba(255,255,255,.4),
    0 16px 40px -6px rgba(0,0,0,.45);
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .15s;
  z-index: 5;
}
.product-hero__lens.is-active { opacity: 1; }

/* =========================================================================
   11. DARK-BACKGROUND SECTION FIXES
   Any section with inline style="background: var(--ink)..." (e.g. resources
   newsletter signup) gets its inherited dark headings flipped to white so
   they read correctly on the dark background.
   ========================================================================= */

section[style*="background: var(--ink)"] h1,
section[style*="background: var(--ink)"] h2,
section[style*="background: var(--ink)"] h3,
section[style*="background: var(--ink)"] h4,
section[style*="background:var(--ink)"] h1,
section[style*="background:var(--ink)"] h2,
section[style*="background:var(--ink)"] h3,
section[style*="background:var(--ink)"] h4 {
  color: #fff !important;
}

section[style*="background: var(--ink)"] p,
section[style*="background:var(--ink)"] p {
  color: rgba(255,255,255,.72) !important;
}

/* Newsletter signup input — make text legible + lift the border */
section[style*="background: var(--ink)"] input[type="email"],
section[style*="background:var(--ink)"] input[type="email"] {
  color: #fff !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 6px !important;
  transition: border-color .25s, background .25s;
}
section[style*="background: var(--ink)"] input[type="email"]::placeholder,
section[style*="background:var(--ink)"] input[type="email"]::placeholder {
  color: rgba(255,255,255,.4) !important;
}
section[style*="background: var(--ink)"] input[type="email"]:focus,
section[style*="background:var(--ink)"] input[type="email"]:focus {
  border-color: var(--metis-blue) !important;
  background: rgba(25,163,221,.08) !important;
  outline: none;
}


/* =========================================================================
   12. CONTACT PAGE — LOCATIONS MAP + 3-UP GRID
   Subtle stylized world map with pulsing pins marking the three offices.
   ========================================================================= */

/* 3-column location grid */
.contact-grid--3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
@media (max-width: 900px) {
  .contact-grid--3 { grid-template-columns: 1fr !important; }
}

/* 2-column location grid (Leuven + US consolidated) */
.contact-grid--2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 800px) {
  .contact-grid--2 { grid-template-columns: 1fr !important; }
}

/* Sub-locations inside the US office card */
.us-locations {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.us-location {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 16px;
  border-left: 2px solid var(--metis-blue);
}
.us-location__city {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.us-location__role {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* World map container */
.locations-map {
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 32px;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  border: 1px solid var(--rule);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.locations-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(16,143,212,.08) 1px, transparent 0);
  background-size: 20px 20px;
  opacity: 0.5;
  pointer-events: none;
}

/* Container for the two layers — dots (img) + overlay (SVG pins & arcs) */
.locations-map__dots,
.locations-map__overlay {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.locations-map__dots {
  color: rgba(25,163,221,.55);  /* SVG uses currentColor for fill */
  filter: saturate(1.1);
}
.locations-map__overlay {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  bottom: 32px;
  width: calc(100% - 64px);
  z-index: 2;
  pointer-events: none;
}
.locations-map__overlay > g { pointer-events: auto; }

/* Thin equator/grid line */
.locations-map .map-grid line {
  stroke: rgba(25,163,221,.18);
  stroke-width: 1;
  stroke-dasharray: 1 5;
}

/* Arcs connecting offices */
.locations-map .map-arcs path {
  fill: none;
  stroke: var(--metis-blue);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  opacity: 0.6;
  animation: map-dash 20s linear infinite;
}
@keyframes map-dash {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -140; }
}

/* Pins */
.locations-map .map-pin__dot {
  fill: var(--metis-blue);
  stroke: #fff;
  stroke-width: 2;
}
.locations-map .map-pin--hq .map-pin__dot {
  fill: var(--metis-blue);
  r: 7;
}
.locations-map .map-pin__pulse {
  fill: none;
  stroke: var(--metis-blue);
  stroke-width: 1.5;
  opacity: 0;
  animation: map-pulse 2.8s ease-out infinite;
}
.locations-map .map-pin--hq .map-pin__pulse {
  animation-delay: 0s;
}
.locations-map .map-pin:nth-of-type(2) .map-pin__pulse {
  animation-delay: 0.9s;
}
.locations-map .map-pin:nth-of-type(3) .map-pin__pulse {
  animation-delay: 1.8s;
}
@keyframes map-pulse {
  0%   { r: 6; opacity: 0.7; }
  100% { r: 22; opacity: 0; }
}
.locations-map .map-pin__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  fill: var(--ink);
  letter-spacing: 0.04em;
  /* White halo via stroke-under-fill — cuts through the continent dots
     so labels stay legible wherever a pin lands. */
  stroke: #fff;
  stroke-width: 3.5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.locations-map .map-pin__sublabel {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  fill: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
/* Explicit white backdrop pill behind each label — used for pins that
   sit on top of dense continent dots (e.g. Leuven over Europe). */
.locations-map .map-pin__labelbg {
  fill: #fff;
  opacity: 0.92;
}

/* Hide map on small screens — pins overlap and lose all meaning */
@media (max-width: 700px) {
  .locations-map { display: none; }
}


/* =========================================================================
   12c. PRODUCT HERO TITLE — never wraps
   Product detail pages always render their title on a single line. The h1
   font-size also has a tighter ceiling here (vs. the global 84px max) so
   longer names like "Magnetizing Fixtures" don't visually overflow the
   half-column hero grid at wide viewports.
   ========================================================================= */

body.is-product-detail .product-hero h1 {
  white-space: nowrap !important;
  font-size: clamp(32px, 4.5vw, 64px) !important;
}

/* =========================================================================
   13. PRODUCT IMAGE ZOOM — magnifier loupe + click lightbox
   Applies to .product-hero__img on all product detail pages.
   ========================================================================= */

.product-hero__img.has-zoom {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
}

/* "Click to zoom" badge — bottom right corner */
.product-hero__img .zoom-badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(15, 20, 28, 0.82);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease, cubic-bezier(.22,1,.36,1)),
              transform .3s var(--ease, cubic-bezier(.22,1,.36,1));
}
.product-hero__img.has-zoom:hover .zoom-badge {
  opacity: 1;
  transform: translateY(0);
}
.product-hero__img .zoom-badge svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Circular magnifier loupe that follows the cursor */
.product-hero__img .zoom-loupe {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.2),
    0 14px 34px -10px rgba(0,0,0,.45);
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .2s ease, transform .25s var(--ease, cubic-bezier(.22,1,.36,1));
  z-index: 3;
  left: 0;
  top: 0;
  will-change: transform, background-position;
}
.product-hero__img.is-zoom-active .zoom-loupe {
  opacity: 1;
  transform: scale(1);
}
/* Hide loupe on touch devices — there's no hover */
@media (hover: none) {
  .product-hero__img .zoom-loupe { display: none; }
  .product-hero__img .zoom-badge { opacity: 1; transform: none; }
}

/* Full-screen lightbox (triggered on click) */
.product-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 8, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease, cubic-bezier(.22,1,.36,1)),
              background .4s var(--ease, cubic-bezier(.22,1,.36,1)),
              backdrop-filter .4s var(--ease, cubic-bezier(.22,1,.36,1));
}
.product-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(5, 6, 8, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.product-lightbox__inner {
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.9);
  transition: transform .4s var(--ease, cubic-bezier(.22,1,.36,1));
}
.product-lightbox.is-open .product-lightbox__inner {
  transform: scale(1);
}
.product-lightbox__img {
  max-width: 100%;
  max-height: 88vh;
  display: block;
  border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
  cursor: zoom-out;
}
.product-lightbox__close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s, transform .25s;
  z-index: 10001;
}
.product-lightbox__close:hover {
  background: rgba(255,255,255,0.22);
  transform: rotate(90deg);
}
.product-lightbox__hint {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 10001;
}


/* =========================================================================
   14. HYMPULSE HERO IMAGE — prevent cropping of the full workstation photo
   The new image has specific composition (workstation + cabinet + coil) that
   should not get cropped. Use `contain` instead of base `cover`.
   ========================================================================= */

body.is-hympulse .product-hero__img {
  background: var(--paper);
  padding: 20px;
}
body.is-hympulse .product-hero__img img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* All product cards show the full product photo (no cropping). The
   container fills empty space (letterboxing) with paper-2 so the image
   reads as "product cutout on paper" instead of a tightly-cropped
   thumbnail. Filename-specific overrides below can opt out (e.g. the
   HyMPulse 4.0 photo, which is on a black background).
   Selectors are scoped per page-class to win against the page-specific
   rules (body.is-products, body.is-product-detail) that previously set
   object-fit: cover. */
.product-card__img,
body.is-products .product-card__img,
body.is-product-detail .product-card__img,
body.is-home .product-card__img {
  background: var(--paper-2) !important;
}
.product-card__img img,
body.is-products .product-card__img img,
body.is-product-detail .product-card__img img,
body.is-home .product-card__img img {
  object-fit: contain !important;
  padding: 8px !important;
}

/* =========================================================================
   14b. HYMPULSE 4.0 PAGE
   ========================================================================= */

/* Hero image — product shot was a black-background photo, keep the black
   so it reads as a "product cutout" against the paper section. */
body.is-hympulse-4 .product-hero__img {
  background: #000;
  padding: 20px;
  border-radius: 14px;
  overflow: hidden;
}
body.is-hympulse-4 .product-hero__img img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* HyMPulse 4.0 product card — its photo was shot on a black backdrop, so
   the letterbox bg should be black to blend cleanly with the image rather
   than the default paper-2. *= matches WordPress's size-suffixed filenames
   like hympulse-4-0-635x1024.jpg / hympulse-4-0.jpg / hympulse-4-0.webp. */
.product-card:has(img[src*="hympulse-4-0"]) .product-card__img {
  background: #000 !important;
}
.product-card__img img[src*="hympulse-4-0"] {
  padding: 10px !important;
}

/* "New" eyebrow badge for the flagship release */
.eyebrow--new {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #108fd4 0%, #00c2ff 100%);
  color: #fff !important;
  padding: 5px 12px !important;
  border-radius: 4px;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
}
.eyebrow--new::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: newPulse 2s ease-in-out infinite;
}
@keyframes newPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Comparison table — mirrors the PDF's 3-column checklist layout */
.hymp4-compare {
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 4px 20px -12px rgba(0,0,0,0.08);
}
.hymp4-compare__header,
.hymp4-compare__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: stretch;
}
.hymp4-compare__header {
  background: var(--metis-blue);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hymp4-compare__header .hymp4-compare__col {
  padding: 18px 24px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.hymp4-compare__header .hymp4-compare__col:last-child {
  border-right: none;
}
.hymp4-compare__header .hymp4-compare__col--label {
  text-align: left;
}
.hymp4-compare__header .hymp4-compare__col--new {
  background: var(--gold);
  color: #1d1d1f;
  font-weight: 700;
}

.hymp4-compare__row {
  border-top: 1px solid var(--rule);
}
.hymp4-compare__row:nth-child(even) { background: var(--paper-2); }
.hymp4-compare__row .hymp4-compare__col {
  padding: 15px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-right: 1px solid var(--rule);
}
.hymp4-compare__row .hymp4-compare__col:last-child {
  border-right: none;
}
.hymp4-compare__row .hymp4-compare__col--label {
  justify-content: flex-start;
  font-weight: 500;
  color: var(--ink);
}
.hymp4-compare__row .hymp4-compare__col--new {
  background: rgba(245,166,35,0.05);
  border-left: 2px solid rgba(245,166,35,0.4);
  border-right: 2px solid rgba(245,166,35,0.4);
}

.hymp4-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2bb673;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.hymp4-x {
  color: rgba(0,0,0,0.25);
  font-size: 16px;
  font-weight: 400;
}

@media (max-width: 640px) {
  .hymp4-compare__header,
  .hymp4-compare__row {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
  .hymp4-compare__row .hymp4-compare__col,
  .hymp4-compare__header .hymp4-compare__col {
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* Advantages grid — 2 or 3 column depending on width */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 24px;
}
@media (max-width: 900px) {
  .advantages-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .advantages-grid { grid-template-columns: 1fr; }
}
.advantage {
  background: var(--paper);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .3s var(--ease);
}
.advantage:hover { background: var(--paper-2); }
.advantage__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--metis-blue);
  margin-bottom: 6px;
}
.advantage h3 {
  font-family: var(--font-heading);
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.25;
  color: var(--ink) !important;
  margin: 0 !important;
}
.advantage p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 4px 0 0;
}


/* =========================================================================
   15. NEWS ARCHIVE PAGE  (body.is-news)
   ========================================================================= */

body.is-news .page-hero {
  background: var(--paper) !important;
  padding: 100px 0 60px !important;
  position: relative;
}
body.is-news .page-hero::before,
body.is-news .page-hero::after { display: none !important; }
body.is-news .page-hero .breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
body.is-news .page-hero .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color .25s;
}
body.is-news .page-hero .breadcrumb a:hover { color: var(--metis-blue); }
body.is-news .page-hero .eyebrow {
  display: inline-block !important;
  color: var(--metis-blue) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px;
}
body.is-news .page-hero h1 {
  font-size: clamp(48px, 6vw, 84px) !important;
  color: var(--ink) !important;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0 auto 24px !important;
  max-width: 18ch;
}
body.is-news .page-hero .lead {
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto;
}

/* Filter bar */
.news-filters-section {
  background: var(--paper);
  padding: 20px 0 50px !important;
  position: sticky;
  top: 84px;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--rule);
}
.news-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.news-filter {
  background: transparent;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .3s var(--ease);
}
.news-filter:hover {
  color: var(--metis-blue);
  border-color: var(--metis-blue);
}
.news-filter.is-active {
  background: var(--metis-blue);
  color: #fff;
  border-color: var(--metis-blue);
}

/* News archive grid */
.news-archive {
  background: var(--paper);
  padding: 60px 0 100px !important;
}
.news-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 800px) {
  .news-archive__grid { grid-template-columns: 1fr; }
}
.news-archive__card {
  background: var(--paper);
  padding: 40px 36px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .3s var(--ease), transform .35s var(--ease);
  position: relative;
  overflow: hidden;
}
.news-archive__card:hover {
  background: var(--paper-2);
}
.news-archive__card.is-hidden { display: none; }
.news-archive__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.news-archive__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(25,163,221,.1);
  color: var(--metis-blue);
}
.news-archive__tag--event {
  background: rgba(30, 30, 40, 0.06);
  color: #3a3a45;
}
.news-archive__date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.news-archive__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.4vw, 32px) !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.news-archive__card:hover .news-archive__title {
  color: var(--metis-blue);
}
.news-archive__excerpt {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.news-archive__location {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink);
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  margin-top: 4px;
}
.news-archive__read {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--metis-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.news-archive__read .arrow {
  transition: transform .3s var(--ease);
}
.news-archive__card:hover .news-archive__read .arrow {
  transform: translateX(6px);
}

.news-archive__empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted);
}
.news-archive__empty p { margin: 0; font-size: 16px; }
.news-archive__empty a { color: var(--metis-blue); }


/* =========================================================================
   16. NEWS DETAIL PAGE  (body.is-news-detail)
   ========================================================================= */

body.is-news-detail {
  background: var(--paper);
}
body.is-news-detail .news-detail__hero {
  background: var(--paper);
  padding: 100px 0 60px;
  border-bottom: 1px solid var(--rule);
}
body.is-news-detail .breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
body.is-news-detail .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color .25s;
}
body.is-news-detail .breadcrumb a:hover { color: var(--metis-blue); }

.news-detail__meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.news-detail__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(25,163,221,.12);
  color: var(--metis-blue);
}
.news-detail__tag--event {
  background: rgba(30, 30, 40, 0.08);
  color: #3a3a45;
}
.news-detail__date,
.news-detail__location {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
body.is-news-detail h1 {
  font-size: clamp(40px, 5.4vw, 68px) !important;
  color: var(--ink) !important;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 22px !important;
  max-width: 22ch;
}
body.is-news-detail .lead {
  font-size: clamp(18px, 1.6vw, 22px);
  color: #4a4a52;
  max-width: 70ch;
  line-height: 1.55;
  margin: 0;
}

/* Body: content + aside */
.news-detail__body {
  padding: 80px 0 60px !important;
}
.news-detail__wrap {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(260px, 1fr);
  gap: 72px;
  align-items: start;
}
@media (max-width: 900px) {
  .news-detail__wrap { grid-template-columns: 1fr; gap: 40px; }
}

.news-detail__content h2 {
  font-size: clamp(24px, 2.4vw, 32px) !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 40px 0 16px !important;
  font-weight: 700;
}
.news-detail__content h2:first-child { margin-top: 0 !important; }
.news-detail__content h3 {
  font-size: 19px !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 28px 0 10px !important;
  font-weight: 600;
}
.news-detail__content p {
  font-size: 17px;
  line-height: 1.65;
  color: #4a4a52;
  margin: 0 0 18px;
}
.news-detail__content p strong { color: var(--ink); font-weight: 600; }
.news-detail__content a { color: var(--metis-blue); }
.news-detail__list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.news-detail__list li {
  font-size: 16px;
  line-height: 1.6;
  color: #4a4a52;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.news-detail__list li:last-child { border-bottom: none; }
.news-detail__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 12px;
  height: 2px;
  background: var(--metis-blue);
}
.news-detail__list li strong {
  color: var(--ink);
  font-weight: 600;
}

/* Aside */
.news-detail__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
}
@media (max-width: 900px) {
  .news-detail__aside { position: static; }
}
.news-detail__aside-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px;
}
.news-detail__aside-card h3 {
  font-family: var(--font-mono);
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px !important;
}
.news-detail__aside-card dl {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
.news-detail__aside-card dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}
.news-detail__aside-card dt:first-child { margin-top: 0; }
.news-detail__aside-card dd {
  color: var(--ink);
  margin: 4px 0 0;
  font-weight: 500;
}
.news-detail__product-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-detail__product-links li {
  margin-bottom: 8px;
}
.news-detail__product-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--metis-blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: transform .25s var(--ease);
}
.news-detail__product-links a:hover { transform: translateX(4px); }
.news-detail__product-links .arrow { font-size: 13px; }
.news-detail__aside-card--link { padding: 18px 24px; }
.news-detail__aside-card--link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--metis-blue);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Related news strip */
.news-related {
  background: var(--paper-2);
  padding: 80px 0 100px !important;
  border-top: 1px solid var(--rule);
}
.news-related__title {
  font-size: 22px !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 32px !important;
}
.news-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 800px) {
  .news-related__grid { grid-template-columns: 1fr; }
}
.news-related__card {
  background: var(--paper);
  padding: 28px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .3s var(--ease);
}
.news-related__card:hover { background: var(--paper-2); }
.news-related__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.news-related__card h3 {
  font-size: 20px !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.3;
}
.news-related__card:hover h3 { color: var(--metis-blue); }
.news-related__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: auto;
}
.news-related__card--all {
  background: var(--paper-2);
}
.news-related__card--all h3 { color: var(--metis-blue) !important; }

/* Make homepage news cards clickable (they're now <a>) */
section.news-section a.news-card,
section.news-wrap a.news-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}


/* =========================================================================
   17. FOOTER LOGO — swap to white version on dark footers
   Product detail pages use base style.css where .site-footer has a dark
   background. The colored logo disappears there. Use the inverted version.
   ========================================================================= */

/* Default (pages with light footer): keep the colored logo */
.footer-brand img {
  content: url('img/metis-logo.png');
  height: 48px !important;
  width: auto !important;
  max-width: 200px;
}

/* Product detail pages load base style.css dark footer → swap to white logo */
body.is-product-detail .footer-brand img,
body.is-hympulse .footer-brand img {
  content: url('img/metis-logo-on-dark.png');
}


/* =========================================================================
   "New product" badge for HyMPulse 4.0 product cards
   ========================================================================= */

.product-card--new {
  position: relative;
}
/* Uses ::after — ::before is claimed by product.css for the hover overlay
   (inset:0, blue gradient, opacity 0→1 on hover). Reusing ::before here let
   the inset:0 leak through and balloon the badge to cover the whole card. */
.product-card--new::after {
  content: 'NEW';
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: linear-gradient(135deg, #108fd4, #00c2ff);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0 4px 12px -4px rgba(25,163,221,0.5);
  pointer-events: none;
}

.product-card__tag--new {
  background: linear-gradient(90deg, rgba(16,143,212,.12), rgba(0,194,255,.12)) !important;
  color: var(--metis-blue) !important;
  font-weight: 600 !important;
}

/* =========================================================================
   17. LINKEDIN FEED (homepage + news archive)
   Footnote-style strip below the news section. Visually subordinate so
   it reads as "more from us" rather than peer content.
   ========================================================================= */

.linkedin-feed {
  padding: clamp(40px, 5vw, 70px) 0 clamp(60px, 7vw, 100px);
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
/* Match the title sizing used by the news section above so the LinkedIn
   strip doesn't read as a louder peer than the section it follows. */
.linkedin-feed .sec-head { margin-bottom: 36px !important; }
.linkedin-feed .sec-head__title {
  font-size: clamp(40px, 5vw, 68px) !important;
}
.linkedin-feed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 900px) { .linkedin-feed__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .linkedin-feed__grid { grid-template-columns: 1fr; } }
.linkedin-feed__card {
  background: var(--paper-2);
  border-radius: 12px;
  padding: 6px;
  overflow: hidden;
  /* Grid items default to min-width: auto, which respects the iframe's
     intrinsic 504px width and breaks the multi-column layout. */
  min-width: 0;
}
.linkedin-feed__caption {
  color: var(--muted);
  font-size: 12px;
  margin: 3px 10px 6px;
}
.linkedin-feed__embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  /* Natural LinkedIn embed height — full post content (header, body,
     media, engagement row) renders without an internal scrollbar. */
  height: 540px !important;
  min-height: 540px !important;
  border: 0;
  display: block;
  border-radius: 8px;
}