/* ===================================================
   WIMAC EX-PROOF — DESIGN SYSTEM v3
   Light pro header + wimac.fr hero + mixed sections
   =================================================== */


:root {
  --dark-bg: #0d0d0d;
  --dark-card: #161616;
  --dark-elevated: #1f1f1f;
  --dark-border: #2a2a2a;
  --dark-border-light: #353535;
  --dark-text: #ffffff;
  --dark-text-muted: #9a9a9a;
  --dark-text-dim: #6a6a6a;

  --light-bg: #ffffff;
  --light-bg-alt: #f6f6f7;
  --light-card: #ffffff;
  --light-border: #e5e5e7;
  --light-border-strong: #d1d1d3;
  --light-text: #0d0d0d;
  --light-text-muted: #5a5a60;
  --light-text-dim: #8a8a90;

  --accent: #ffe900;
  --accent-hover: #fff04d;
  --accent-deep: #f0d800;

  --header-height: 76px;
  --utility-height: 38px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--light-bg);
  color: var(--light-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Homepage-only section dividers — thin grey hairline between
   each major light-themed section so the now-all-white stack
   reads as distinct blocks instead of one continuous slab.
   The dark hero already separates itself; only put a border on
   the sections AFTER it. */
body.page-home .ex-section--light,
body.page-home .wm-products,
body.page-home .wm-videos {
  border-top: 1px solid var(--light-border);
}

/* Homepage: kill the footer's top margin so the gallery section
   sits flush against the dark footer (no grey strip showing the
   body background through). Other pages keep the original 100 px
   breathing room above the footer. */
body.page-home .ex-footer { margin-top: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 28px; }

/* ============================================================
   HEADER — Refined industrial header
   ============================================================ */
.wm-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--light-bg);
  transition: box-shadow 0.3s;
}
.wm-header.is-scrolled {
  box-shadow: 0 1px 0 var(--light-border), 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* ===== UTILITY BAR (dark) ===== */
.wm-header__utility {
  background: #0a0a0a;
  height: 40px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 233, 0, 0.18);
}
.wm-header__utility-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wm-header__utility-left,
.wm-header__utility-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.wm-header__utility-right { gap: 18px; }

.wm-header__util-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.wm-header__util-item:not(.wm-header__util-item--static):hover { color: var(--accent); }
.wm-header__util-item i {
  font-size: 12px;
  color: var(--accent);
}
.wm-header__util-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
}

.wm-header__cert-strip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
}
.wm-header__cert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255, 233, 0, 0.6);
  animation: certPulse 2.4s ease-in-out infinite;
  margin-right: 4px;
  flex-shrink: 0;
}
.wm-header__cert-item {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(255, 233, 0, 0.06);
  border: 1px solid rgba(255, 233, 0, 0.18);
  border-radius: 4px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.wm-header__cert-item:hover {
  background: rgba(255, 233, 0, 0.14);
  border-color: rgba(255, 233, 0, 0.35);
  color: #fff5a0;
}
.wm-header__cert-item--ex {
  padding: 2px 8px;
  text-decoration: none;
  background: transparent;
  border: 0;
}
.wm-header__cert-item--ex:hover {
  background: transparent;
  border: 0;
}
.wm-header__cert-item--ex img {
  height: 16px;
  width: auto;
  display: block;
}
@keyframes certPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 233, 0, 0.6); }
  50% { box-shadow: 0 0 14px rgba(255, 233, 0, 0.9); }
}

.wm-header__lang-wrap { position: relative; }
.wm-header__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px 4px 6px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.wm-header__lang-flag {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.wm-header__lang i { font-size: 9px; color: var(--accent); }
.wm-header__lang:hover {
  background: rgba(255, 233, 0, 0.1);
  color: var(--accent);
  border-color: rgba(255, 233, 0, 0.25);
}

/* Dropdown menu */
.wm-header__lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.wm-header__lang-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.wm-header__lang-item {
  display: grid;
  grid-template-columns: 24px 1fr 14px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.wm-header__lang-item img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
}
.wm-header__lang-item:hover {
  background: rgba(255, 233, 0, 0.08);
  color: var(--accent);
}
.wm-header__lang-item.is-active {
  color: var(--accent);
}
.wm-header__lang-item i {
  font-size: 11px;
  color: var(--accent);
}

/* ===== MAIN BAR ===== */
.wm-header__main {
  background: var(--light-bg);
  height: 88px;
  position: relative;
}
.wm-header__main::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e0e0e2 20%, #e0e0e2 80%, transparent);
}
.wm-header__main-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 40px;
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
}

/* LOGO */
.wm-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.wm-header__logo-img {
  height: 44px;
  width: auto;
}

/* NAV */
.wm-header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: center;
}
/* Hide mobile-only elements on desktop (always wins) */
.wm-mobile-lang,
.wm-mobile-footer,
.wm-mobile-backdrop {
  display: none !important;
}
.wm-header__nav-item {
  position: relative;
}
.wm-header__nav-link {
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a1e;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: color 0.15s;
}
.wm-header__nav-link:hover { color: #0a0a0a; }
.wm-header__nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 3px;
  background: var(--accent);
  transition: width 0.25s ease, left 0.25s ease;
}
.wm-header__nav-link:hover::after,
.wm-header__nav-link.active::after {
  width: calc(100% - 36px);
  left: 18px;
}
.wm-header__nav-caret {
  font-size: 10px;
  color: #999;
  transition: transform 0.2s;
}
.wm-header__nav-link:hover .wm-header__nav-caret { transform: rotate(180deg); }

/* DROPDOWN — dark panel, sharp corners */
.wm-header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 340px;
  background: #0a0a0a;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 110;
  margin-top: 8px;
}
.wm-header__dropdown::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 36px;
  width: 14px;
  height: 14px;
  background: #0a0a0a;
  transform: rotate(45deg);
}
.wm-header__nav-item--has-dropdown:hover .wm-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wm-header__dropdown a {
  display: grid;
  grid-template-columns: 38px 1fr 18px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  position: relative;
  transition: background 0.2s ease, padding 0.2s ease;
}
.wm-header__dropdown a + a { margin-top: 2px; }
.wm-header__dropdown a:hover {
  background: rgba(255, 233, 0, 0.08);
  padding-left: 22px;
}

.wm-header__dd-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.wm-header__dropdown a:hover .wm-header__dd-num { opacity: 1; }

.wm-header__dd-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
  transition: color 0.2s;
}
.wm-header__dropdown a:hover .wm-header__dd-title { color: var(--accent); }

.wm-header__dd-arrow {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  transform: translateX(-4px);
  opacity: 0;
  transition: opacity 0.2s, transform 0.25s ease, color 0.2s;
}
.wm-header__dropdown a:hover .wm-header__dd-arrow {
  color: var(--accent);
  opacity: 1;
  transform: translateX(0);
}

/* RIGHT SIDE */
.wm-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wm-header__divider {
  width: 1px;
  height: 28px;
  background: #e8e8ea;
}
.wm-header__icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #1a1a1e;
  background: transparent;
  border: 1px solid #e8e8ea;
  transition: all 0.2s;
}
.wm-header__icon-btn:hover {
  background: #0a0a0a;
  color: var(--accent);
  border-color: #0a0a0a;
  transform: translateY(-1px);
}

.wm-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 24px;
  background: #0a0a0a;
  color: #fff;
  border-radius: 0;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  transition: padding 0.2s;
  position: relative;
  overflow: hidden;
}
.wm-header__cta::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
  transition: width 0.28s ease;
}
.wm-header__cta:hover { padding-left: 28px; }
.wm-header__cta:hover::before { width: 100%; }
.wm-header__cta span,
.wm-header__cta i {
  position: relative;
  transition: color 0.25s;
}
.wm-header__cta:hover span,
.wm-header__cta:hover i { color: #0a0a0a; }
.wm-header__cta i { font-size: 12px; }

/* BURGER */
.wm-header__burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  transition: background 0.2s;
}
.wm-header__burger:hover { background: var(--light-bg-alt); }
.wm-header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--light-text);
  border-radius: 2px;
  transition: all 0.3s;
}
.wm-header__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wm-header__burger.is-active span:nth-child(2) { opacity: 0; }
.wm-header__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   HERO — Full-width background image with left-aligned text
   ============================================================ */
.wm-hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background: #0a0a0a;
  display: flex;
  align-items: center;
}

/* Background image layer */
.wm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.7) 45%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0.2) 100%),
    url('../img/home/hero-bg.jpg') center right / cover no-repeat;
}

/* ============================================================
   HERO SLIDER (only applies when .wm-hero--slider is present)
   ============================================================ */
.wm-hero--slider .wm-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wm-hero--slider .wm-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 6.5s cubic-bezier(0.2, 0, 0.2, 1),
              visibility 0s linear 1.1s;
  will-change: opacity, transform;
}
.wm-hero--slider .wm-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 6.5s cubic-bezier(0.2, 0, 0.2, 1),
              visibility 0s linear 0s;
}
/* Dark gradient shade for text legibility (replaces the static bg gradient) */
.wm-hero--slider .wm-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.30) 72%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(13, 13, 13, 0.55) 100%);
  pointer-events: none;
}
.wm-hero--slider .wm-hero__grain { z-index: 2; }
.wm-hero--slider .wm-hero__inner { z-index: 3; }

/* Prev / next arrows */
.wm-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.2s ease;
}
.wm-hero__nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--light-text);
  transform: translateY(-50%) scale(1.06);
}
.wm-hero__nav--prev { left: 28px; }
.wm-hero__nav--next { right: 28px; }

/* Dots */
.wm-hero__dots {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(13, 13, 13, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wm-hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.25s ease, width 0.3s ease;
}
.wm-hero__dot:hover { background: rgba(255, 255, 255, 0.65); }
.wm-hero__dot.is-active {
  background: var(--accent);
  width: 24px;
  border-radius: 6px;
}

/* Progress bar */
.wm-hero__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.wm-hero__progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.1s linear;
}

@media (max-width: 768px) {
  .wm-hero__nav { width: 44px; height: 44px; }
  .wm-hero__nav--prev { left: 14px; }
  .wm-hero__nav--next { right: 14px; }
  .wm-hero__dots { bottom: 22px; padding: 6px 10px; gap: 8px; }
  .wm-hero__dot { width: 7px; height: 7px; }
  .wm-hero__dot.is-active { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-hero--slider .wm-hero__slide {
    transition: opacity 0.2s linear;
    transform: none;
  }
  .wm-hero__progress-bar { transition: none; }
}

/* Film grain */
.wm-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Bottom yellow accent line */
.wm-hero__bottomline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 0, 0.45), transparent);
  z-index: 4;
}

/* Inner wrapper */
.wm-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 100px 0 110px;
}

/* Content column — left-aligned, max 580px wide */
.wm-hero__content {
  max-width: 580px;
  text-align: left;
}

/* Eyebrow pill — small black rounded badge with yellow icon */
.wm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--accent);
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 28px;
}
.wm-hero__eyebrow i {
  font-size: 12px;
  color: var(--accent);
}

/* Title — sized to fit two lines cleanly */
.wm-hero__title {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--dark-text);
  margin: 0 0 24px;
}
.wm-hero__title-accent {
  color: var(--accent);
  position: relative;
  display: inline-block;
}
.wm-hero__title-accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 4px;
  background: var(--accent);
  opacity: 0.25;
  border-radius: 2px;
}

/* Description */
.wm-hero__desc {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.1rem;
  line-height: 1.65;
  margin: 0 0 36px;
}
.wm-hero__desc strong { color: var(--dark-text); font-weight: 600; }

/* Actions */
.wm-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.wm-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: 8px;
  transition: all 0.25s;
}
.wm-hero__btn--primary {
  background: var(--accent);
  color: var(--light-text);
  box-shadow: 0 10px 32px rgba(255, 233, 0, 0.2);
}
.wm-hero__btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(255, 233, 0, 0.35);
}
.wm-hero__btn--primary i { transition: transform 0.2s; }
.wm-hero__btn--primary:hover i { transform: translateX(4px); }
.wm-hero__btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--dark-text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wm-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   SMALL LAPTOP — keep the design's exact proportions, but pull
   the content in from the screen edges so every section has
   visible left/right margins (no flush-to-bezel feeling on
   1280-1440 px laptop screens). One declaration only — typography,
   padding, hero height and everything else stay desktop-sized.
   Must come BEFORE the 1024 px block so the mobile breakpoints
   still win via cascade order.
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1700px) {
  /* Cut the whole rem-based type scale to ~81 % of desktop. */
  html { font-size: 13px; }

  /* Container is fluid: always 100 px from each viewport edge so the
     content scales WITH the screen instead of getting trapped at a
     fixed narrow cap. Capped at the original 1320 px desktop width
     on the upper end. */
  .container { max-width: calc(100vw - 200px); width: 100%; padding: 0 24px; }
  .wm-header__utility-inner,
  .wm-header__main-inner    { max-width: calc(100vw - 200px); width: 100%; padding: 0 24px; }
  .wim-explore__container   { max-width: calc(100vw - 200px); width: 100%; padding: 0 24px; }

  /* Tighten section vertical padding so sections don't feel huge. */
  .ex-section { padding: 56px 0; }
  .ex-section__header { margin-bottom: 36px; }
  .ex-page-header { padding: 48px 0 36px; }
  .ex-page-header h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
  .ex-page-header p { font-size: 0.95rem; }
  .wm-hero { min-height: 460px; }
  .wm-hero__inner { padding: 52px 0 60px; }
  .wm-hero__title { font-size: clamp(1.4rem, 3vw, 2.2rem); }
  .wm-hero__desc { font-size: 0.92rem; }
  .wm-hero__btn { padding: 12px 22px; font-size: 0.85rem; }
  .ex-footer { padding: 48px 0 20px; margin-top: 64px; }
  .ex-footer__grid { gap: 28px; margin-bottom: 28px; }
  .ex-footer__col h4 { font-size: 0.78rem; }
  .ex-footer__col p, .ex-footer__col a { font-size: 0.85rem; }
  .ex-footer__bottom { font-size: 0.78rem; }

  /* Product pages (px-based — root font cut doesn't reach these). */
  .product-section-tag { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 12px; }
  .product-section-title { font-size: 32px; letter-spacing: -0.5px; }
  .product-content-text p { font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
  .product-feature-card h4,
  .product-feature-card h3 { font-size: 15px; }
  .product-feature-card p { font-size: 13px; }
  .product-feature-card { padding: 22px; }
  .product-feature-icon { width: 44px; height: 44px; font-size: 18px; }
  .product-image-block h3,
  .product-image-block h2 { font-size: 22px; margin-bottom: 10px; }
  .product-image-block > p { font-size: 14px; margin-bottom: 22px; }

  /* Sidebar cards on product pages */
  .product-specs-header h4,
  .product-specs-header h3 { font-size: 15px; }
  .product-spec-label { font-size: 12px; }
  .product-spec-value { font-size: 12px; }
  .product-spec-row { padding: 10px 18px; }
  .product-downloads-header h4,
  .product-downloads-header h3 { font-size: 14px; }
  .product-download-item { padding: 12px 18px; }
  .product-download-info span { font-size: 13px; }
  .product-download-info small { font-size: 10px; }
  .product-cta-card { padding: 24px; }
  .product-cta-card h4,
  .product-cta-card h3 { font-size: 17px; }
  .product-cta-card p { font-size: 13px; }
  .product-cta-phone { font-size: 20px; }
  .product-cta-availability { font-size: 11px; }
  .product-cta-icon { width: 56px; height: 56px; font-size: 22px; }

  /* Image gallery strip */
  .product-gallery-strip { padding: 28px 0 48px; }

  /* wim-explore section — already partially shrunk, lower the labels too */
  .wim-explore__item-label { font-size: 0.88rem; }
  .wim-explore__item-sub   { font-size: 0.7rem; }

  /* Header — shrink type + chrome so it stays proportional inside
     the fluid header column. */
  .wm-header__utility       { height: 36px; font-size: 11.5px; }
  .wm-header__util-item     { font-size: 11.5px; }
  .wm-header__cert-strip    { font-size: 11px; }
  .wm-header__main          { height: 72px; }
  .wm-header__logo-img      { height: 36px; }
  .wm-header__nav           { gap: 2px; }
  .wm-header__nav-link      { padding: 10px 12px; font-size: 15px; white-space: nowrap; }
  .wm-header__nav-caret     { font-size: 9px; }
  .wm-header__dropdown      { min-width: 280px; }
  .wm-header__cta           { padding: 11px 18px 11px 20px; font-size: 12.5px; gap: 8px; }
  .wm-header__cta i         { font-size: 11px; }
  .wm-header__lang          { padding: 8px 11px; font-size: 12px; }
  .wm-header__lang-flag     { width: 20px; height: 14px; }

  /* wim-explore section — its container is set fluidly at the top
     of this block. Shrink the chrome only. */
  .wim-explore                { padding: 56px 0; }
  .wim-explore__layout        { grid-template-columns: 1fr minmax(280px, 320px); gap: 32px; }

  /* Sidebar item cards */
  .wim-explore__nav .ex-tag-pill-set { margin-bottom: 16px; }
  .wim-explore__list          { gap: 8px; }
  .wim-explore__item          { padding: 12px 14px; gap: 12px; border-radius: 10px; }
  .wim-explore__item-num      { font-size: 16px; width: 30px; }
  .wim-explore__item-label    { font-size: 0.9rem; }
  .wim-explore__item-sub      { font-size: 0.72rem; }
  .wim-explore__item-arrow    { width: 26px; height: 26px; font-size: 9px; }

  /* Hotspot dots */
  .wim-explore__dot           { width: 40px; height: 40px; }
  .wim-explore__dot-core      { font-size: 13px; inset: 4px; }

  /* Corner badge */
  .wim-explore__badge         { padding: 6px 11px 6px 8px; font-size: 11.5px; gap: 7px; top: 12px; left: 12px; }
}

/* ============================================================
   SMALLEST DESKTOP (992 – 1280 px) — header is still too chunky
   after the 1700 px shrink at this width. Pull every chrome item
   down one more step so nothing wraps and the bar feels balanced.
   Sits AFTER the 1700 px block so cascade order is preserved.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1280px) {
  /* Text-only shrink — heights, logo, padding all stay as the 1700 px
     block set them. Just pull the typography down one more notch so
     the nav fits without wrapping at this width. */
  .wm-header__util-item     { font-size: 10px; }
  .wm-header__cert-strip    { font-size: 9.5px; }
  .wm-header__nav-link      { font-size: 12px; }
  .wm-header__nav-caret     { font-size: 8px; }
  .wm-header__cta           { font-size: 10.5px; }
  .wm-header__cta i         { font-size: 9.5px; }
  .wm-header__lang          { font-size: 10px; }

  /* Nav dropdown — proportional shrink so the panel doesn't look
     oversized hanging off a 12 px nav link. */
  .wm-header__dropdown        { min-width: 240px; padding: 6px; }
  .wm-header__dropdown a      { padding: 10px 12px; gap: 10px; grid-template-columns: 30px 1fr 14px; }
  .wm-header__dropdown a:hover { padding-left: 16px; }
  .wm-header__dd-num          { font-size: 9.5px; letter-spacing: 0.04em; }
  .wm-header__dd-title        { font-size: 12.5px; }
  .wm-header__dd-arrow        { font-size: 9.5px; }
}

@media (max-width: 1024px) {
  .wm-hero__bg {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.85) 100%),
      url('../img/home/hero-bg.jpg') center center / cover no-repeat;
  }
}
@media (max-width: 768px) {
  .wm-hero { min-height: 560px; }
  .wm-hero__inner { padding: 64px 0 80px; }
  .wm-hero__content { max-width: 100%; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.ex-section { padding: 100px 0; }
.ex-section--light { background: var(--light-bg); color: var(--light-text); }
.ex-section--light-alt { background: var(--light-bg-alt); color: var(--light-text); }
.ex-section--dark { background: var(--dark-bg); color: var(--dark-text); }
.ex-section--dark-alt { background: var(--dark-card); color: var(--dark-text); }

.ex-section__header { text-align: center; margin-bottom: 64px; }
.ex-section__tag {
  display: inline-block;
  color: var(--accent-deep);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}
.ex-section--dark .ex-section__tag,
.ex-section--dark-alt .ex-section__tag { color: var(--accent); }

.ex-section__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.ex-section__title span {
  background: linear-gradient(120deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ex-section--dark .ex-section__title span,
.ex-section--dark-alt .ex-section__title span {
  background: none;
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
}
.ex-section__desc {
  font-size: 1.1rem;
  max-width: 640px;
  margin: 0 auto;
  color: var(--light-text-muted);
}
.ex-section--dark .ex-section__desc,
.ex-section--dark-alt .ex-section__desc { color: var(--dark-text-muted); }

/* ============================================================
   PAGE HEADER (for inner pages — dark theme)
   ============================================================ */
.ex-page-header {
  padding: 80px 0 64px;
  background: var(--dark-bg);
  color: var(--dark-text);
  border-bottom: 1px solid var(--dark-border);
  position: relative;
  overflow: hidden;
}
.ex-page-header::before {
  content: '';
  position: absolute;
  top: 0; right: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 233, 0, 0.15), transparent 65%);
  pointer-events: none;
}
.ex-page-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 0, 0.4), transparent);
  pointer-events: none;
}
.ex-page-header > .container { position: relative; }
.ex-page-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--dark-text);
}
.ex-page-header h1 span {
  color: var(--accent);
}
.ex-page-header p {
  color: var(--dark-text-muted);
  font-size: 1.1rem;
  max-width: 720px;
}

/* ============================================================
   BUTTONS (utility class)
   ============================================================ */
.ex-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s;
  cursor: pointer;
}
.ex-btn--primary { background: var(--light-text); color: var(--light-bg); }
.ex-btn--primary:hover { background: var(--accent); color: var(--light-text); transform: translateY(-2px); }
.ex-btn--accent { background: var(--accent); color: #000; }
.ex-btn--accent:hover { background: var(--accent-hover); transform: translateY(-2px); }
/* Ghost CTA — mirrors the header Contact Us button: dark slab,
   sharp corners, yellow stripe expanding from the left on hover,
   label + icon flip to black as the fill takes over.
   `isolation: isolate` + `::before { z-index: -1 }` ensures bare
   text nodes inside the <a> stay above the sliding fill. */
.ex-btn--ghost {
  background: #0a0a0a;
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 13px 22px 13px 24px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: padding 0.2s, color 0.25s;
}
.ex-btn--ghost::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
  transition: width 0.28s ease;
  z-index: -1;
}
.ex-btn--ghost > i {
  font-size: 12px;
  transition: color 0.25s, transform 0.2s;
}
.ex-btn--ghost:hover {
  padding-left: 28px;
  background: #0a0a0a;
  color: #0a0a0a;
}
.ex-btn--ghost:hover::before { width: 100%; }
.ex-btn--ghost:hover > i { color: #0a0a0a; }

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.ex-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ex-product-card {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s;
  display: block;
  position: relative;
}
.ex-product-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.ex-section--dark .ex-product-card,
.ex-section--dark-alt .ex-product-card {
  background: var(--dark-card);
  border-color: var(--dark-border);
}

.ex-product-card__img {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
  display: block;
  position: relative;
  overflow: hidden;
}
.ex-product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ex-product-card:hover .ex-product-card__img img { transform: scale(1.05); }

.ex-product-card__img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.4) 100%);
  z-index: 1;
  pointer-events: none;
}
.ex-product-card__img::after {
  content: '';
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  background-image: url('../img/home/ex.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.ex-product-card__body { padding: 28px; }
.ex-product-card__tag {
  display: inline-block;
  background: rgba(255, 233, 0, 0.18);
  color: var(--accent-deep);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.ex-section--dark .ex-product-card__tag,
.ex-section--dark-alt .ex-product-card__tag {
  background: rgba(255, 233, 0, 0.1);
  color: var(--accent);
}
.ex-product-card h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 12px; color: var(--light-text); }
.ex-section--dark .ex-product-card h3,
.ex-section--dark-alt .ex-product-card h3 { color: var(--dark-text); }
.ex-product-card p { color: var(--light-text-muted); font-size: 0.95rem; margin-bottom: 20px; }
.ex-section--dark .ex-product-card p,
.ex-section--dark-alt .ex-product-card p { color: var(--dark-text-muted); }
.ex-product-card__link {
  color: var(--accent-deep);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s;
}
.ex-section--dark .ex-product-card__link,
.ex-section--dark-alt .ex-product-card__link { color: var(--accent); }
.ex-product-card:hover .ex-product-card__link { gap: 12px; }

/* ============================================================
   APPLICATIONS GRID
   ============================================================ */
.ex-app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ex-app-card {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  padding: 28px 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s;
}
.ex-app-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.ex-section--dark .ex-app-card,
.ex-section--dark-alt .ex-app-card {
  background: var(--dark-card);
  border-color: var(--dark-border);
}
.ex-app-card__icon {
  width: 48px;
  height: 48px;
  background: var(--light-text);
  color: var(--accent);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.ex-app-card__name { font-weight: 600; font-size: 1rem; color: var(--light-text); }
.ex-section--dark .ex-app-card__name,
.ex-section--dark-alt .ex-app-card__name { color: var(--dark-text); }

/* ============================================================
   CERTIFICATION PILLS
   ============================================================ */
.ex-certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}
.ex-cert-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--light-text);
}
.ex-cert-pill i { color: var(--accent-deep); }
.ex-section--dark .ex-cert-pill,
.ex-section--dark-alt .ex-cert-pill {
  background: var(--dark-card);
  border-color: var(--dark-border);
  color: var(--dark-text);
}
.ex-section--dark .ex-cert-pill i,
.ex-section--dark-alt .ex-cert-pill i { color: var(--accent); }

/* ============================================================
   FEATURE PANEL (two-column)
   ============================================================ */
.ex-feature-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

/* ============================================================
   About section — homepage modifier.
   - Very light silvery background (cooler than the default white)
   - Slightly tighter vertical padding so it doesn't feel as airy
   - Image on the LEFT, content on the RIGHT (source order keeps
     the text first for SEO; CSS `order` swaps the visual position)
   ============================================================ */
.ex-section--about {
  background: #f6f8fa;
  padding-top: 70px;
  padding-bottom: 70px;
}
.ex-section--about .ex-feature-panel__title {
  font-weight: 700;
}
.ex-section--about .ex-feature-panel > div:first-child {
  order: 2;       /* text column: visually second (right) */
}
.ex-section--about .ex-feature-panel > .ex-visual-card {
  order: 1;       /* image: visually first (left) */
}
@media (max-width: 768px) {
  /* Stack on mobile — keep text BEFORE image so the heading leads. */
  .ex-section--about .ex-feature-panel > div:first-child  { order: 1; }
  .ex-section--about .ex-feature-panel > .ex-visual-card  { order: 2; }
  .ex-section--about { padding-top: 48px; padding-bottom: 48px; }
}
.ex-feature-panel__title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ex-feature-panel__title span {
  background: linear-gradient(120deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ex-section--dark .ex-feature-panel__title span,
.ex-section--dark-alt .ex-feature-panel__title span {
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  background: none;
}
.ex-feature-panel__text {
  font-size: 1.05rem;
  margin-bottom: 24px;
  color: var(--light-text-muted);
}
.ex-section--dark .ex-feature-panel__text,
.ex-section--dark-alt .ex-feature-panel__text { color: var(--dark-text-muted); }

.ex-visual-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 1.45 / 1;
  background: var(--light-text);
  box-shadow: none;
}
.ex-visual-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ex-visual-card:hover img { transform: scale(1.03); }
.ex-visual-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 60%, rgba(255, 233, 0, 0.15) 100%),
    linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.35) 100%);
}
.ex-visual-card__badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: var(--accent);
  color: var(--light-text);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 2;
}

/* ============================================================
   ZONE TABLE
   ============================================================ */
.ex-zone-table-wrapper {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  overflow: hidden;
}
.ex-section--dark .ex-zone-table-wrapper,
.ex-section--dark-alt .ex-zone-table-wrapper {
  background: var(--dark-card);
  border-color: var(--dark-border);
}
.ex-zone-table { width: 100%; border-collapse: collapse; }
.ex-zone-table th {
  background: var(--accent);
  color: #000;
  padding: 16px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 0.95rem;
}
.ex-zone-table td {
  padding: 16px 20px;
  border-top: 1px solid var(--light-border);
  color: var(--light-text-muted);
  font-size: 0.95rem;
}
.ex-section--dark .ex-zone-table td,
.ex-section--dark-alt .ex-zone-table td {
  border-top-color: var(--dark-border);
  color: var(--dark-text-muted);
}
.ex-zone-table tr:hover td { background: var(--light-bg-alt); color: var(--light-text); }
.ex-section--dark .ex-zone-table tr:hover td,
.ex-section--dark-alt .ex-zone-table tr:hover td { background: var(--dark-elevated); color: var(--dark-text); }
.ex-zone-table td:first-child { font-weight: 700; color: var(--accent-deep); }
.ex-section--dark .ex-zone-table td:first-child,
.ex-section--dark-alt .ex-zone-table td:first-child { color: var(--accent); }
.ex-zone-table .grouped { background: rgba(255, 233, 0, 0.05); }

/* ============================================================
   MARKING DIAGRAM — Full SVG technical diagram (Gas/Dust)
   ============================================================ */
.ex-marking-diagram {
  background: var(--dark-bg);
  border: 1px solid var(--dark-border);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.ex-marking-diagram__intro {
  color: var(--dark-text-muted);
  font-size: 0.95rem;
  text-align: center;
  max-width: 520px;
  line-height: 1.55;
  margin: 0 auto;
  padding: 32px 24px 24px;
}
.ex-marking-diagram__intro em {
  font-style: italic;
  color: var(--accent);
}
.ex-marking-diagram__band {
  background: var(--accent);
  color: var(--light-text);
  text-align: center;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  padding: 12px 0;
}
.ex-marking-diagram__band--top {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.ex-marking-diagram__band--bottom {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.ex-marking-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--dark-bg);
}

/* SVG text styles */
.ex-marking-diagram__svg .mk-label {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  fill: #ffffff;
}
.ex-marking-diagram__svg .mk-line {
  stroke-linejoin: miter;
  stroke-linecap: square;
}

@media (max-width: 1024px) {
  .ex-marking-diagram__intro {
    position: static;
    transform: none;
    padding: 32px 24px 0;
  }
  .ex-marking-diagram__svg .mk-label { font-size: 18px; }
}
@media (max-width: 768px) {
  .ex-marking-diagram { overflow-x: auto; }
  .ex-marking-diagram__svg { min-width: 800px; }
}

/* ============================================================
   SPEC TABLE
   ============================================================ */
.ex-spec-table-wrapper {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  overflow: hidden;
}
.ex-section--dark .ex-spec-table-wrapper,
.ex-section--dark-alt .ex-spec-table-wrapper {
  background: var(--dark-card);
  border-color: var(--dark-border);
}
.ex-spec-table-header {
  background: var(--accent);
  color: #000;
  padding: 16px 24px;
  font-weight: 700;
}
.ex-spec-table { width: 100%; border-collapse: collapse; }
.ex-spec-table tr { border-bottom: 1px solid var(--light-border); }
.ex-section--dark .ex-spec-table tr,
.ex-section--dark-alt .ex-spec-table tr { border-bottom-color: var(--dark-border); }
.ex-spec-table tr:last-child { border-bottom: none; }
.ex-spec-table td { padding: 14px 24px; font-size: 0.95rem; }
.ex-spec-table td:first-child { font-weight: 600; color: var(--light-text); width: 38%; }
.ex-section--dark .ex-spec-table td:first-child,
.ex-section--dark-alt .ex-spec-table td:first-child { color: var(--dark-text); }
.ex-spec-table td:last-child { color: var(--light-text-muted); }
.ex-section--dark .ex-spec-table td:last-child,
.ex-section--dark-alt .ex-spec-table td:last-child { color: var(--dark-text-muted); }
.ex-spec-table tr:hover { background: var(--light-bg-alt); }
.ex-section--dark .ex-spec-table tr:hover,
.ex-section--dark-alt .ex-spec-table tr:hover { background: var(--dark-elevated); }

/* ============================================================
   COMPONENT LIST
   ============================================================ */
.ex-component-list { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ex-component-row {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  transition: all 0.3s;
}
.ex-component-row:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); }
.ex-section--dark .ex-component-row,
.ex-section--dark-alt .ex-component-row {
  background: var(--dark-card);
  border-color: var(--dark-border);
}
.ex-component-row__visual {
  aspect-ratio: 1;
  background: var(--light-text);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 3.5rem;
  color: var(--accent);
}
.ex-component-row__title-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}
.ex-component-row__tag-dark {
  background: var(--light-text);
  color: var(--light-bg);
  padding: 6px 14px;
  border-radius: 999px 0 0 999px;
  font-size: 0.85rem;
  font-weight: 700;
}
.ex-component-row__tag-light {
  background: var(--accent);
  color: var(--light-text);
  padding: 6px 14px;
  border-radius: 0 999px 999px 0;
  font-size: 0.85rem;
  font-weight: 700;
}
.ex-component-row h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; color: var(--light-text); }
.ex-section--dark .ex-component-row h3,
.ex-section--dark-alt .ex-component-row h3 { color: var(--dark-text); }
.ex-component-row__subtitle {
  color: var(--accent-deep);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ex-section--dark .ex-component-row__subtitle,
.ex-section--dark-alt .ex-component-row__subtitle { color: var(--accent); }
.ex-component-row p { color: var(--light-text-muted); font-size: 0.95rem; }
.ex-section--dark .ex-component-row p,
.ex-section--dark-alt .ex-component-row p { color: var(--dark-text-muted); }

/* ============================================================
   TAG PILL (dark/yellow split)
   ============================================================ */
.ex-tag-pill-set { display: inline-flex; margin-bottom: 32px; }
.ex-tag-pill-set .dark {
  background: var(--light-text);
  color: var(--light-bg);
  padding: 10px 18px;
  border-radius: 999px 0 0 999px;
  font-weight: 700;
  font-size: 0.95rem;
}
.ex-tag-pill-set .light {
  background: var(--accent);
  color: var(--light-text);
  padding: 10px 18px;
  border-radius: 0 999px 999px 0;
  font-weight: 700;
  font-size: 0.95rem;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.ex-cta-banner {
  background: linear-gradient(135deg, var(--light-text) 0%, #222 100%);
  color: var(--dark-text);
  padding: 64px 48px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 64px;
  position: relative;
  overflow: hidden;
}
.ex-cta-banner::before {
  content: 'Ex';
  position: absolute;
  right: -40px;
  bottom: -80px;
  font-size: 18rem;
  font-weight: 900;
  font-style: italic;
  color: rgba(255, 233, 0, 0.08);
  pointer-events: none;
}
.ex-cta-banner h3 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
  position: relative;
}
.ex-cta-banner h3 span { color: var(--accent); }
.ex-cta-banner p { color: var(--dark-text-muted); font-size: 1.05rem; position: relative; }
.ex-cta-banner__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  position: relative;
}

/* Primary yellow CTA — uses the same header-style sweep hover */
.ex-cta-banner__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--light-text);
  padding: 16px 24px 16px 28px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  transition: padding 0.2s;
  z-index: 1;
}
.ex-cta-banner__btn::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #0a0a0a;
  transition: width 0.28s ease;
  z-index: -1;
}
.ex-cta-banner__btn:hover {
  padding-left: 32px;
}
.ex-cta-banner__btn:hover::before {
  width: 100%;
}
.ex-cta-banner__btn > * {
  position: relative;
  transition: color 0.25s;
}
.ex-cta-banner__btn:hover {
  color: var(--accent);
}

/* Ghost variant — outlined, fills with accent on hover */
.ex-cta-banner__btn--ghost {
  background: transparent;
  border: 2px solid var(--dark-border-light);
  color: var(--dark-text);
}
.ex-cta-banner__btn--ghost::before {
  background: var(--accent);
}
.ex-cta-banner__btn--ghost:hover {
  color: var(--light-text);
  border-color: var(--accent);
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.ex-contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; }
.ex-contact-info { display: grid; gap: 20px; align-content: start; }
.ex-contact-info__block {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  gap: 16px;
  transition: all 0.2s;
}
.ex-contact-info__block:hover { border-color: var(--accent); }
.ex-contact-info__icon {
  width: 44px;
  height: 44px;
  background: var(--light-text);
  color: var(--accent);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ex-contact-info__label {
  font-size: 0.85rem;
  color: var(--light-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.ex-contact-info__value { font-weight: 600; color: var(--light-text); }

.ex-contact-map {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--light-border);
  background: var(--light-bg-alt);
  min-height: 560px;
  height: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.ex-contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 560px;
  filter: grayscale(0.15);
  transition: filter 0.3s;
}
.ex-contact-map:hover iframe { filter: grayscale(0); }

.ex-form {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 40px;
}
.ex-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ex-form__field { margin-bottom: 20px; }
.ex-form__field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--light-text);
}
.ex-form__field input,
.ex-form__field select,
.ex-form__field textarea {
  width: 100%;
  background: var(--light-bg-alt);
  border: 1px solid var(--light-border);
  color: var(--light-text);
  padding: 12px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}
.ex-form__field input:focus,
.ex-form__field select:focus,
.ex-form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--light-bg);
}
.ex-form__field textarea { resize: vertical; min-height: 120px; }
.ex-form button[type="submit"] {
  background: var(--light-text);
  color: var(--accent);
  padding: 14px 32px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.2s;
  width: 100%;
}
.ex-form button[type="submit"]:hover { background: var(--accent); color: var(--light-text); }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.ex-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 0;
  margin-bottom: 28px;
}
.ex-breadcrumb a {
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.15s;
}
.ex-breadcrumb a:hover { color: var(--accent); }
.ex-breadcrumb i { font-size: 0.65rem; color: rgba(255, 255, 255, 0.3); }
.ex-breadcrumb .current { color: var(--accent); font-weight: 600; }

/* ============================================================
   CRANE PANEL — Creative layout per type
   ============================================================ */
.crane-panel {
  position: relative;
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 24px;
  padding: 48px 56px 40px;
  margin-bottom: 64px;
  overflow: hidden;
}

.crane-panel__bg-text {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(8rem, 18vw, 18rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--light-text);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}

.crane-panel__header {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

/* Top feature callout (Cross Travel Wheels) */
.crane-panel__feature {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 16px;
  max-width: 560px;
  margin-bottom: 24px;
}
.crane-panel__feature--right {
  margin-left: auto;
  text-align: right;
}
.crane-panel__feature--right { grid-template-columns: 1fr 4px; }
.crane-panel__feature--right .crane-panel__feature-marker { order: 2; }

.crane-panel__feature-marker {
  width: 4px;
  background: var(--accent);
  border-radius: 2px;
  min-height: 28px;
}
.crane-panel__feature-body h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--light-text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.crane-panel__feature-body p {
  font-size: 0.9rem;
  color: var(--light-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Stage — main image area with floating callouts */
.crane-panel__stage {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
  margin: 16px 0 32px;
}
.crane-panel__main {
  max-width: 70%;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.18));
}

/* Floating callout — circle with image + label */
.crane-panel__callout {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.crane-panel__callout--left      { left: 2%;  top: 35%; }
.crane-panel__callout--right     { right: 2%; top: 50%; }
.crane-panel__callout--left-low  { left: 6%;  bottom: 8%; }

.crane-panel__callout-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--light-text);
  letter-spacing: -0.01em;
}
.crane-panel__callout-label .bar {
  width: 4px;
  height: 16px;
  background: var(--accent);
  border-radius: 2px;
}

.crane-panel__callout-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--light-bg);
  border: 2px solid var(--accent);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}
.crane-panel__callout-circle:hover { transform: scale(1.05); }
.crane-panel__callout-circle--sm { width: 110px; height: 110px; }
.crane-panel__callout-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hook row at bottom — label on left, 5 hook thumbnails on right */
.crane-panel__hook-row {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--light-border);
}
.crane-panel__hook-label {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 14px;
  align-items: start;
}
.crane-panel__hook-marker {
  width: 4px;
  background: var(--accent);
  border-radius: 2px;
  min-height: 36px;
}
.crane-panel__hook-label h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--light-text);
  margin: 0 0 6px;
}
.crane-panel__hook-label p {
  font-size: 0.88rem;
  color: var(--light-text-muted);
  line-height: 1.5;
  margin: 0;
}
.crane-panel__hook-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  background: var(--light-bg-alt);
  border-radius: 16px;
  padding: 16px;
}
.crane-panel__hook-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.crane-panel__hook-strip img:hover {
  transform: translateY(-4px) scale(1.05);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .crane-panel { padding: 36px 32px 32px; }
  .crane-panel__stage { min-height: 380px; }
  .crane-panel__main { max-width: 78%; }
  .crane-panel__callout-circle { width: 110px; height: 110px; }
  .crane-panel__callout-circle--sm { width: 88px; height: 88px; }
  .crane-panel__callout-label { font-size: 0.8rem; }
}
@media (max-width: 768px) {
  .crane-panel { padding: 28px 20px 24px; border-radius: 18px; margin-bottom: 40px; }
  .crane-panel__bg-text { font-size: 5rem; opacity: 0.05; top: 30%; }
  .crane-panel__feature { max-width: 100%; }
  .crane-panel__feature--right { text-align: left; grid-template-columns: 4px 1fr; }
  .crane-panel__feature--right .crane-panel__feature-marker { order: 0; }

  .crane-panel__stage {
    flex-direction: column;
    gap: 24px;
    min-height: auto;
  }
  .crane-panel__main { max-width: 100%; margin: 0 auto; }
  .crane-panel__callout {
    position: static;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    width: 100%;
  }
  .crane-panel__callout-circle { width: 80px; height: 80px; flex-shrink: 0; }
  .crane-panel__callout-circle--sm { width: 70px; height: 70px; }

  .crane-panel__hook-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .crane-panel__hook-strip {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 10px;
  }
}

/* ============================================================
   COMPONENT SECTIONS
   ============================================================ */
.comp-section { margin-bottom: 64px; }
.comp-section__heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--light-border);
}
.ex-section--dark .comp-section__heading,
.ex-section--dark-alt .comp-section__heading { border-bottom-color: var(--dark-border); }
.comp-section__num {
  width: 44px;
  height: 44px;
  background: var(--accent);
  color: var(--light-text);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.1rem;
}
.comp-section__title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }

/* ============================================================
   INDUSTRY CARDS (with images)
   ============================================================ */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.industry-card {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}
.industry-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}
.industry-card:hover .industry-card__media img {
  transform: scale(1.05);
}
.ex-section--dark .industry-card,
.ex-section--dark-alt .industry-card {
  background: var(--dark-card);
  border-color: var(--dark-border);
}

/* Media (image area) */
.industry-card__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--light-bg-alt);
}
.industry-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.industry-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.industry-card__zone-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  background: var(--accent);
  color: var(--light-text);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Body */
.industry-card__body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.industry-card__title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.industry-card__icon {
  width: 44px;
  height: 44px;
  background: var(--light-text);
  color: var(--accent);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.industry-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--light-text);
  letter-spacing: -0.01em;
}
.ex-section--dark .industry-card h3,
.ex-section--dark-alt .industry-card h3 { color: var(--dark-text); }

.industry-card p {
  color: var(--light-text-muted);
  font-size: 0.95rem;
  margin-bottom: 18px;
  flex: 1;
}
.ex-section--dark .industry-card p,
.ex-section--dark-alt .industry-card p { color: var(--dark-text-muted); }

.industry-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--light-border);
}
.ex-section--dark .industry-card__tags,
.ex-section--dark-alt .industry-card__tags { border-top-color: var(--dark-border); }
.industry-card__tag {
  font-size: 0.78rem;
  color: var(--light-text-muted);
  font-weight: 500;
  padding: 4px 12px;
  background: var(--light-bg-alt);
  border: 1px solid var(--light-border);
  border-radius: 999px;
}
.ex-section--dark .industry-card__tag,
.ex-section--dark-alt .industry-card__tag {
  background: var(--dark-bg);
  border-color: var(--dark-border);
  color: var(--dark-text-muted);
}

/* ============================================================
   FIRE TRIANGLE
   ============================================================ */
.fire-triangle-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: center;
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 48px;
}
.ex-section--dark .fire-triangle-container,
.ex-section--dark-alt .fire-triangle-container {
  background: var(--dark-card);
  border-color: var(--dark-border);
}
.fire-triangle-quotes { display: grid; gap: 20px; }
.fire-quote {
  border-left: 3px solid var(--accent);
  padding: 8px 16px;
  color: var(--light-text-muted);
  font-size: 0.95rem;
}
.ex-section--dark .fire-quote,
.ex-section--dark-alt .fire-quote { color: var(--dark-text-muted); }
.fire-quote strong { color: var(--light-text); }
.ex-section--dark .fire-quote strong,
.ex-section--dark-alt .fire-quote strong { color: var(--dark-text); }

.req-list { list-style: none; counter-reset: req; margin: 24px 0; }
.req-list li {
  counter-increment: req;
  padding-left: 48px;
  position: relative;
  margin-bottom: 16px;
  color: var(--light-text-muted);
}
.req-list li::before {
  content: counter(req, lower-alpha) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: var(--light-text);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ex-footer {
  background: var(--dark-bg);
  color: var(--dark-text);
  border-top: 4px solid var(--accent);
  padding: 64px 0 24px;
  margin-top: 100px;
}
.ex-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.ex-footer__col h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 20px;
  font-weight: 700;
}
.ex-footer__col p {
  color: var(--dark-text-muted);
  font-size: 0.95rem;
  margin-bottom: 10px;
  display: block;
}
/* Footer links — animated underline-on-hover ported from wimaccrane.eu
   (.footer-links a + ::after pattern). `width: fit-content` keeps the
   <a> as a block-level item (so the column still stacks vertically)
   while sizing the box to the text — that way the underline spans
   exactly the text, not the whole column. */
.ex-footer__col a {
  color: var(--dark-text-muted);
  font-size: 0.95rem;
  margin-bottom: 10px;
  display: block;
  width: fit-content;
  max-width: 100%;
  position: relative;
  transition: color 0.3s ease;
}
.ex-footer__col a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.ex-footer__col a:hover { color: var(--accent); }
.ex-footer__col a:hover::after { width: 100%; }

.ex-footer__bottom {
  border-top: 1px solid var(--dark-border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--dark-text-dim);
  font-size: 0.85rem;
}

/* Footer-bottom-links — credit / Privacy / Terms / Sitemap. Same
   underline-on-hover treatment as the main footer column links. */
.ex-footer__bottom-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.ex-footer__bottom-links p {
  margin: 0;
  color: var(--dark-text-dim);
  font-size: 0.85rem;
}
.ex-footer__bottom-links p a {
  margin-left: 4px;
}
.ex-footer__bottom-links a {
  color: var(--dark-text-dim);
  font-size: 0.85rem;
  position: relative;
  transition: color 0.3s ease;
}
.ex-footer__bottom-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.ex-footer__bottom-links a:hover { color: var(--accent); }
.ex-footer__bottom-links a:hover::after { width: 100%; }
.ex-footer__logo-img {
  height: 36px;
  width: auto;
  margin-bottom: 16px;
}
.ex-footer__brand-desc {
  max-width: 360px;
  color: var(--dark-text-muted);
  font-size: 0.95rem;
}
.ex-footer__atex-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #000;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.85rem;
  margin-top: 16px;
}

/* ============================================================
   COMPONENTS PAGE — PRODUCT GALLERIES, BLOCKS, MOTORS, BRANDS
   ============================================================ */

/* Product gallery (1-2 isolated product photos on white) */
.ex-product-gallery {
  display: grid;
  gap: 20px;
}
.ex-product-gallery--two { grid-template-columns: 1fr 1fr; }
.ex-product-gallery--inline {
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 180px);
  align-items: start;
  justify-content: flex-end;
  gap: 16px;
}

.ex-product-shot {
  background: var(--light-bg);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  padding: 20px;
  margin: 0;
  transition: all 0.25s;
}
.ex-product-shot:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.ex-product-shot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
}
.ex-product-shot figcaption {
  display: inline-block;
  background: var(--accent);
  color: var(--light-text);
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  margin-top: 8px;
}
.ex-product-shot--sm {
  aspect-ratio: 1;
  padding: 14px;
}
.ex-product-shot--sm figcaption {
  font-size: 0.72rem;
  padding: 4px 10px;
}
.ex-product-shot--situ {
  aspect-ratio: 16/10;
  padding: 0;
  background: #1a1a1a;
}
.ex-product-shot--situ img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  max-height: none;
}

/* Product block (card with header + gallery + description) */
.ex-product-block {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 20px;
  transition: border-color 0.2s;
}
.ex-product-block:hover { border-color: var(--accent); }
.ex-product-block__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--light-border);
}
.ex-product-block__subtitle {
  color: var(--light-text-dim);
  font-size: 0.9rem;
  font-weight: 500;
  font-style: italic;
  margin: 4px 0 0;
}
.ex-product-block > p {
  color: var(--light-text-muted);
  font-size: 0.95rem;
  margin: 0;
  max-width: 920px;
}

/* Motor 4-up grid */
.ex-motor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.ex-motor-card {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 16px 16px 20px;
  margin: 0;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ex-motor-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.ex-motor-card__img {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 12px;
}
.ex-motor-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ex-motor-card__label {
  background: var(--accent);
  color: var(--light-text);
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* Brand mark (CEMP WEG Group, etc.) */
.ex-brand-mark {
  text-align: right;
  line-height: 1.1;
}
.ex-brand-mark strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0066b3;
  letter-spacing: -0.02em;
}
.ex-brand-mark span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--light-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Brand block (HBC / JUUKO with logo + flag + product photo) */
.ex-brand-block {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: center;
  transition: border-color 0.2s;
}
.ex-brand-block:hover { border-color: var(--accent); }
.ex-brand-block__id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.ex-brand-block__logo {
  max-width: 180px;
  height: auto;
}
.ex-brand-block__origin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--light-bg-alt);
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--light-text);
}
.ex-brand-block__origin img {
  width: 24px;
  height: auto;
  border-radius: 3px;
}
.ex-brand-block__product {
  width: 100%;
  aspect-ratio: 16/8;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--light-bg);
  border-radius: 12px;
  border: 1px solid var(--light-border);
}
.ex-brand-block__product img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


@media (max-width: 1200px) {
  .wm-header__main-inner { gap: 24px; }
  /* .wm-header__nav-link sizing is owned by the 1700 px and
     992–1280 px blocks above — do NOT override it here. */
  .wm-header__util-item:nth-child(5) { display: none; }
  .wm-header__util-sep:nth-of-type(2) { display: none; }
}

/* ============================================================
   MOBILE HEADER MENU — slide-in panel from right
   ============================================================ */
@media (max-width: 1024px) {
  .wm-header__utility-left { display: none; }
  .wm-header__icon-btn,
  .wm-header__divider { display: none; }
  .wm-header__cta { padding: 12px 18px; font-size: 13px; }

  /* The burger button — solid yellow, more prominent */
  .wm-header__burger { display: flex; }

  /* ===== Nav panel — fixed full-height drawer ===== */
  .wm-header__nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 88vw);
    flex-direction: column;
    background: #ffffff;
    padding: 0;
    gap: 0;
    border: none;
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
    visibility: hidden;
  }
  .wm-header__nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Backdrop — dark overlay behind the panel */
  .wm-mobile-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    z-index: 998;
    transition: opacity 0.35s ease, visibility 0.35s;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .wm-mobile-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* Body lock when menu open */
  body.menu-open {
    overflow: hidden;
  }

  /* ===== Top bar inside the panel ===== */
  .wm-header__nav::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
    flex-shrink: 0;
  }

  /* Each nav item is a row with full width */
  .wm-header__nav-item {
    width: 100%;
    border-bottom: 1px solid #f0f0f2;
  }
  .wm-header__nav-item:last-of-type {
    border-bottom: none;
  }

  .wm-header__nav-link {
    width: 100%;
    padding: 20px 28px;
    border-radius: 0;
    font-size: 15px;
    font-weight: 600;
    color: #0d0d0d;
    letter-spacing: -0.01em;
    text-transform: none;
    justify-content: space-between;
    transition: background 0.18s, color 0.18s, padding-left 0.2s;
  }
  .wm-header__nav-link::after { display: none; }
  .wm-header__nav-link:hover,
  .wm-header__nav-link:focus {
    background: #fafafb;
    padding-left: 32px;
    color: var(--accent-deep);
  }
  .wm-header__nav-link.is-active {
    color: var(--accent-deep);
    background: rgba(255, 233, 0, 0.06);
  }

  /* Caret rotates when dropdown is open */
  .wm-header__nav-caret {
    font-size: 11px;
    color: var(--accent);
    transition: transform 0.25s ease;
  }
  .wm-header__nav-item--has-dropdown.is-expanded .wm-header__nav-caret {
    transform: rotate(180deg);
  }

  /* ===== Dropdown — accordion style, light, clean ===== */
  .wm-header__nav-item--has-dropdown .wm-header__dropdown {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: #f6f6f8;
    margin: 0;
    padding: 0;
    border-radius: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .wm-header__nav-item--has-dropdown.is-expanded .wm-header__dropdown {
    max-height: 500px;
  }
  .wm-header__nav-item--has-dropdown .wm-header__dropdown::before { display: none; }
  .wm-header__nav-item--has-dropdown .wm-header__dropdown a {
    padding: 16px 28px 16px 44px;
    color: #2a2a2a;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: padding-left 0.2s, background 0.18s, color 0.18s;
  }
  .wm-header__nav-item--has-dropdown .wm-header__dropdown a:last-child {
    border-bottom: none;
  }
  .wm-header__nav-item--has-dropdown .wm-header__dropdown a:hover {
    background: #ffffff;
    padding-left: 48px;
    color: var(--accent-deep);
  }
  .wm-header__nav-item--has-dropdown .wm-header__dropdown .wm-header__dd-num {
    color: var(--accent);
    font-weight: 700;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    min-width: 24px;
  }
  .wm-header__nav-item--has-dropdown .wm-header__dropdown .wm-header__dd-title {
    flex: 1;
  }
  .wm-header__nav-item--has-dropdown .wm-header__dropdown .wm-header__dd-arrow {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.25);
    transition: transform 0.2s, color 0.2s;
  }
  .wm-header__nav-item--has-dropdown .wm-header__dropdown a:hover .wm-header__dd-arrow {
    color: var(--accent-deep);
    transform: translateX(3px);
  }

  /* ===== Footer area inside the panel (CTA + contact info) ===== */
  .wm-mobile-footer {
    display: flex !important;
    flex-direction: column;
    margin-top: auto;
    padding: 24px 28px 32px;
    background: #0d0d0d;
    color: #fff;
  }
  .wm-mobile-footer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--accent);
    color: #0d0d0d;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 20px;
    transition: background 0.2s, transform 0.15s;
  }
  .wm-mobile-footer__cta:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
  }
  .wm-mobile-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .wm-mobile-footer__contact > a,
  .wm-mobile-footer__contact > .wm-mobile-footer__contact-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
  }
  .wm-mobile-footer__contact > a:hover {
    color: var(--accent);
  }
  .wm-mobile-footer__contact i {
    color: var(--accent);
    width: 16px;
    font-size: 13px;
    flex-shrink: 0;
  }
  .wm-mobile-footer__cert {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .wm-mobile-footer__cert::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }

  /* Hide the main bar's lang dropdown — it's now only in the panel */
  .wm-header__lang-wrap-desktop { display: none; }

  /* Lang switcher inside the mobile panel */
  .wm-mobile-lang {
    display: block !important;
    padding: 20px 28px;
    background: #fafafb;
    border-top: 1px solid #f0f0f2;
    border-bottom: 1px solid #f0f0f2;
  }
  .wm-mobile-lang__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a7a80;
    margin-bottom: 12px;
  }
  .wm-mobile-lang__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .wm-mobile-lang__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    background: #ffffff;
    border: 1px solid #e8e8eb;
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.15s;
  }
  .wm-mobile-lang__item img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
  }
  .wm-mobile-lang__item span {
    font-size: 10px;
    font-weight: 700;
    color: #2a2a2a;
    letter-spacing: 0.04em;
  }
  .wm-mobile-lang__item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  .wm-mobile-lang__item.is-active {
    border-color: var(--accent);
    background: rgba(255, 233, 0, 0.08);
  }

  /* Layout fixes for the rest of the page */
  .ex-feature-panel { grid-template-columns: 1fr; gap: 48px; }
  .ex-product-grid { grid-template-columns: repeat(2, 1fr); }
  .ex-app-grid { grid-template-columns: repeat(2, 1fr); }
  .ex-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ex-contact-grid { grid-template-columns: 1fr; }
  .ex-cta-banner { grid-template-columns: 1fr; }
  .ex-component-row { grid-template-columns: 1fr; }
  .ex-component-row__visual { max-width: 280px; }
  .crane-panel__layout { grid-template-columns: 1fr; gap: 40px; }
  .crane-panel { padding: 36px; }
  .industry-grid { grid-template-columns: 1fr; }
  .ex-motor-grid { grid-template-columns: repeat(2, 1fr); }
  .ex-brand-block { grid-template-columns: 1fr; gap: 24px; }
  .ex-product-block__head { grid-template-columns: 1fr; gap: 20px; }
  .ex-product-gallery--inline { justify-content: flex-start; }
  .ex-product-gallery--two { grid-template-columns: 1fr; }
  .fire-triangle-container { grid-template-columns: 1fr; padding: 32px; }
  .fire-triangle-container > div:first-child { justify-self: center; }
}

@media (max-width: 768px) {
  .wm-header__utility { display: none; }
  .wm-header__main { height: 72px; }
  .wm-header__logo-img { height: 38px; }

  /* Burger gets a little more thumb-friendly */
  .wm-header__burger {
    width: 44px;
    height: 44px;
  }
  .wm-header__cta {
    /* On very small screens, replace with icon-only */
    padding: 10px 14px;
    font-size: 12px;
  }
  .wm-header__cta span { display: none; }

  .ex-product-grid { grid-template-columns: 1fr; }
  .ex-app-grid { grid-template-columns: 1fr; }
  .ex-form__row { grid-template-columns: 1fr; }
  .ex-motor-grid { grid-template-columns: 1fr; }
  .ex-product-block { padding: 24px; }
  .ex-brand-block { padding: 24px; }
  .ex-section { padding: 64px 0; }
  .ex-footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ============================================================
   SMOOTH SCROLL SYSTEM — Lenis glue + progress bar + to-top
   ============================================================ */

/* Lenis html state classes — required for momentum scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* Thin yellow scroll progress bar pinned to top */
.wm-scroll-progress { display: none; }

/* Scroll-to-top button */
.wm-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--light-text);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1rem;
  z-index: 199;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.85);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s, background 0.2s;
  box-shadow: 0 8px 24px rgba(255, 233, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.wm-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.wm-to-top:hover {
  background: var(--light-text);
  color: var(--accent);
  transform: translateY(-4px) scale(1.05);
}

/* Parallax helper */
[data-parallax] { will-change: transform; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
  .wm-scroll-progress { display: none; }
}
@media (max-width: 640px) {
  .wm-to-top { bottom: 18px; right: 18px; width: 46px; height: 46px; }
}

/* ============================================================
   FAQ — Accordion (SEO FAQPage friendly)
   ============================================================ */
.ex-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}
.ex-faq {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ex-faq:hover { border-color: var(--accent); }
.ex-faq[open] {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.ex-section--dark .ex-faq,
.ex-section--dark-alt .ex-faq {
  background: var(--dark-card);
  border-color: var(--dark-border);
}
.ex-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--light-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.15s;
}
.ex-section--dark .ex-faq summary,
.ex-section--dark-alt .ex-faq summary { color: var(--dark-text); }
.ex-faq summary::-webkit-details-marker { display: none; }
.ex-faq summary::after {
  content: '\f067'; /* plus */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--accent-deep);
  width: 28px;
  height: 28px;
  background: var(--light-bg-alt);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.25s, background 0.2s, color 0.2s;
}
.ex-section--dark .ex-faq summary::after,
.ex-section--dark-alt .ex-faq summary::after { background: var(--dark-bg); color: var(--accent); }
.ex-faq[open] summary::after {
  content: '\f068'; /* minus */
  background: var(--accent);
  color: var(--light-text);
  transform: rotate(180deg);
}
.ex-faq__a {
  padding: 0 28px 22px;
  color: var(--light-text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}
.ex-section--dark .ex-faq__a,
.ex-section--dark-alt .ex-faq__a { color: var(--dark-text-muted); }
.ex-faq__a a {
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ex-section--dark .ex-faq__a a,
.ex-section--dark-alt .ex-faq__a a { color: var(--accent); }

/* ============================================================
   FAQ — TWO-COLUMN SPLIT LAYOUT (homepage modifier)
   Left column = heading + lead. Right column = flat, line-divided
   question list (no card backgrounds, no rounded corners — each
   question is a row separated by hairline rules, with a square
   plus/minus toggle on the right). Add `.ex-faq-section--split`
   to the section AND `.ex-faq-grid--flat` to the list container.
   ============================================================ */
.ex-faq-section--split .ex-faq-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.ex-faq-section--split .ex-faq-split__left {
  position: sticky;
  top: 120px;
}
.ex-faq-section--split .ex-section__tag {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.5);
}
.ex-faq-section--split .ex-section__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #0a0a0a;
  margin: 0 0 18px;
  text-align: left;
}
.ex-faq-section--split .ex-section__title span {
  display: inline;
}
.ex-faq-section--split .ex-section__desc {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(10, 10, 10, 0.65);
  margin: 0;
  text-align: left;
  max-width: 420px;
}

/* Flat (refined) question list — hairline-divided rows, no card
   chrome. The question line is generous; a clean circular +/-
   toggle sits at the right and flips solid yellow on open. */
.ex-faq-grid--flat {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
  margin: 0;
}
.ex-faq-grid--flat .ex-faq {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.09);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none !important;
  transition: background 0.3s ease;
}
.ex-faq-grid--flat .ex-faq:first-child {
  border-top: 1px solid rgba(10, 10, 10, 0.09);
}
.ex-faq-grid--flat .ex-faq:hover,
.ex-faq-grid--flat .ex-faq[open] {
  background: rgba(10, 10, 10, 0.022);
}

/* Question row — back to flex layout (override the block layout
   we briefly used for the boxed-cell variant). Generous padding,
   slightly larger question text. */
.ex-faq-grid--flat .ex-faq summary {
  display: flex;
  position: static;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: #0a0a0a;
  cursor: pointer;
  gap: 28px;
}
.ex-faq-grid--flat .ex-faq summary:hover { color: #0a0a0a; }

/* +/- toggle — clean borderless circle, no boxed cell, no vertical
   rule. Flips solid yellow on open and rotates 180°. */
.ex-faq-grid--flat .ex-faq summary::after {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid rgba(10, 10, 10, 0.18);
  border-radius: 50%;
  background: transparent;
  color: rgba(10, 10, 10, 0.55);
  font-size: 0.85rem;
  display: grid;
  place-items: center;
  transform: none;
  transition:
    background 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ex-faq-grid--flat .ex-faq:hover summary::after {
  border-color: rgba(10, 10, 10, 0.42);
  color: #0a0a0a;
}
.ex-faq-grid--flat .ex-faq[open] summary::after {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  transform: rotate(180deg);
}

/* Answer block — comfortable horizontal inset, capped width for
   readability. Sits flush below the question line. */
.ex-faq-grid--flat .ex-faq__a {
  padding: 0 16px 32px;
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(10, 10, 10, 0.7);
  max-width: 720px;
}

/* Stack on small screens — left column drops above the questions. */
@media (max-width: 900px) {
  .ex-faq-section--split .ex-faq-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ex-faq-section--split .ex-faq-split__left {
    position: static;
  }
}


/* ============================================================
   CORPORATE PAGES (About, Mission, Vision, Certificates)
   ============================================================ */
.corp-content {
  max-width: 880px;
  margin: 0 auto;
}
.corp-lead {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--light-text);
  margin: 24px 0 32px;
  letter-spacing: -0.01em;
}
.corp-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--light-text-muted);
  margin-bottom: 20px;
}

/* Numbered mission/vision statements */
.corp-statements {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.corp-statement {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.corp-statement:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.corp-statement__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  min-width: 36px;
}
.corp-statement p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--light-text);
  margin: 0;
}

/* Feature cards (4-up grid) */
.ex-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.ex-feature-card {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.ex-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.ex-feature-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 233, 0, 0.12);
  color: var(--accent-deep);
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.ex-feature-card h3 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--light-text);
  margin: 0 0 12px;
}
.ex-feature-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--light-text-muted);
  margin: 0;
}

/* Certificate grid */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cert-card {
  display: flex;
  flex-direction: column;
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cert-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.cert-card__image {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: linear-gradient(135deg, #f4f4f6 0%, #e8e8eb 100%);
  display: grid;
  place-items: center;
}
.cert-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cert-card:hover .cert-card__image img {
  transform: scale(1.04);
}
.cert-card__label {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--light-border);
}
.cert-card__type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--accent);
  color: var(--light-text);
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.cert-card__name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--light-text);
}

/* CTA banner text styles (used inside corporate pages — banner itself uses original gradient style) */
.ex-cta-banner__text h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dark-text);
  margin: 0 0 8px;
}
.ex-cta-banner__text h2 span { color: var(--accent); }
.ex-cta-banner__text p {
  font-size: 1rem;
  color: var(--dark-text-muted);
  margin: 0;
}

/* Responsive */
@media (max-width: 968px) {
  .ex-features-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .ex-cta-banner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .ex-cta-banner__actions { justify-content: center; }
}
@media (max-width: 600px) {
  .ex-features-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr; gap: 16px; }
  .corp-statement {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px;
  }
  .corp-lead { font-size: 1.1rem; }
  .ex-cta-banner__actions { flex-direction: column; }
}


/* ============================================================
   HUB CATEGORY PAGES (Services category lists)
   ============================================================ */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hub-card {
  display: flex;
  flex-direction: column;
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.hub-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.hub-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--light-text);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.3;
}
.hub-card p {
  font-size: 0.92rem;
  color: var(--light-text-muted);
  line-height: 1.55;
  margin: 0 0 20px;
  flex: 1;
}
.hub-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: gap 0.25s ease;
}
.hub-card:hover .hub-card__cta {
  gap: 12px;
}
.hub-card__cta i {
  font-size: 0.75rem;
}

/* ============================================================
   SERVICE ARTICLE (deep content pages)
   New layout: image + Related Topics side-by-side at top,
   body text flows full-width below.
   ============================================================ */
.service-article {
  max-width: 1100px;
  margin: 0 auto;
}

/* TOP ROW: image (left, flex-grow) + related sidebar (right, fixed width) */
.service-article__top {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: stretch;
  margin-bottom: 48px;
}

/* Image block — fills full height of the row */
.service-article__hero {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
  min-height: 360px;
}
.service-article__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.service-article__hero:hover img {
  transform: scale(1.03);
}
/* Yellow corner accent (brand mark) */
.service-article__hero::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  z-index: 2;
  box-shadow: 0 0 20px rgba(255, 233, 0, 0.4);
}

/* Related sidebar — now a card next to the image, not sticky */
.service-article__related {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.service-article__related-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--light-text);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--accent);
  display: block;
}
.service-article__related-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--light-bg);
  border: 1px solid var(--light-border);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.related-card:hover {
  background: var(--light-bg-alt);
  border-color: var(--accent);
  transform: translateX(3px);
}
.related-card__arrow {
  color: var(--accent-deep);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.95rem;
}
.related-card__text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--light-text);
  line-height: 1.4;
}

/* BODY: full-width below the top row */
.service-article__body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--light-text);
  max-width: 820px;
}
.service-article__body p {
  margin: 0 0 22px;
}
.service-article__body p:first-child {
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--light-text);
  letter-spacing: -0.005em;
}
.service-article__body p:first-child::first-letter {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--accent-deep);
}
.service-article__body strong {
  color: var(--light-text);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 968px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .service-article__top {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 36px;
  }
  .service-article__hero {
    min-height: 280px;
    aspect-ratio: 16 / 9;
  }
  .service-article__hero img {
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 600px) {
  .service-article__hero { min-height: auto; aspect-ratio: 4 / 3; border-radius: 12px; }
  .service-article__related { padding: 18px 16px; border-radius: 12px; }
  .service-article__body p:first-child { font-size: 1.05rem; }
}
@media (max-width: 600px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card { padding: 24px 20px; }
  .service-article__body p:first-child { font-size: 1rem; }
}


/* ============================================================
   SERVICE HERO (image banner below page header)
   ============================================================ */
.service-hero {
  background: var(--light-bg);
  padding: 0 0 8px;
  margin-top: -56px;
  position: relative;
  z-index: 5;
}
.service-hero .container {
  max-width: 1180px;
}
.service-hero__image {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  max-height: 480px;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.service-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.25) 100%
  );
  pointer-events: none;
}
.service-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.service-hero__image:hover img {
  transform: scale(1.03);
}

/* Optional yellow accent corner mark — matches site identity */
.service-hero__image::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  width: 36px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  z-index: 2;
  box-shadow: 0 0 24px rgba(255, 233, 0, 0.4);
}

/* ============================================================
   HOMEPAGE GALLERY (preserves 10 indexed image URLs)
   ============================================================ */
.home-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 40px;
}
.home-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  background: var(--light-bg-alt);
}

@media (max-width: 968px) {
  .home-gallery { grid-template-columns: repeat(3, 1fr); }
  .service-hero { margin-top: -36px; }
  .service-hero__image { aspect-ratio: 16 / 9; border-radius: 14px; }
}
@media (max-width: 600px) {
  .home-gallery { grid-template-columns: repeat(2, 1fr); }
  .service-hero { margin-top: -24px; }
  .service-hero__image { border-radius: 10px; aspect-ratio: 4 / 3; }
  .service-hero__image::before { width: 24px; height: 3px; top: 12px; left: 12px; }
}


/* ============================================================
   HERO IMAGES (service pages + hub banners)
   ============================================================ */
.service-article__hero {
  margin: 0 0 32px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f4f4f6 0%, #e8e8eb 100%);
  border: 1px solid var(--light-border);
}
.service-article__hero img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hub-hero-banner {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #f4f4f6 0%, #e8e8eb 100%);
  border: 1px solid var(--light-border);
  margin-bottom: 8px;
}
.hub-hero-banner img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

@media (max-width: 768px) {
  .service-article__hero img { aspect-ratio: 4 / 3; }
  .hub-hero-banner img { aspect-ratio: 16 / 9; }
}


/* ======================================================================
   SCROLL REVEAL — generic [data-reveal] reveal system
   ====================================================================== */

/* ============================================================
   SCROLL REVEAL — generic, attribute-driven reveal system.

   Attach [data-reveal] to any element. It starts hidden and
   transitions in when scrolled into view (one-shot — does not
   re-hide when scrolling back up). Variants control the entry
   direction. Optional [data-reveal-delay="ms"] staggers.

   Variants:
     data-reveal="fade-up"       — slide up + fade in   (default-feel)
     data-reveal="fade-down"     — slide down + fade in
     data-reveal="fade-left"     — slide in from the right
     data-reveal="fade-right"    — slide in from the left
     data-reveal="fade-scale"    — zoom in slightly + fade
     data-reveal="fade"          — pure fade, no movement

   Stagger:
     [data-reveal-stagger="80"]  — on a parent, auto-assigns
                                   data-reveal-delay = index * 80ms
                                   to every direct child (the JS
                                   adds data-reveal="fade-up" too
                                   if a child doesn't have one).

   Accessibility:
     - prefers-reduced-motion -> instantly visible, no transitions.
   ============================================================ */

[data-reveal] {
  opacity: 0;
  /* Smooth, slightly snappy ease — quicker than spring, gentler
     than linear. 700 ms is the readable sweet-spot for content blocks. */
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal="fade-up"]    { transform: translate3d(0,  36px, 0); }
[data-reveal="fade-down"]  { transform: translate3d(0, -36px, 0); }
[data-reveal="fade-left"]  { transform: translate3d( 36px, 0, 0); }
[data-reveal="fade-right"] { transform: translate3d(-36px, 0, 0); }
[data-reveal="fade-scale"] { transform: scale(0.94); }
[data-reveal="fade"]       { transform: none; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Drop the will-change after the animation has played, so we
   don't keep paying for compositor layers indefinitely. */
[data-reveal].is-revealed { will-change: auto; }

/* Honor user preference — instant content, no motion. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ======================================================================
   HERO SLIDER — creative redesign (.wm-hero--creative overrides)
   ====================================================================== */

/* ============================================================
   HERO SLIDER — CREATIVE REDESIGN
   Additive overrides on top of .wm-hero / .wm-hero--slider in
   style.css. Strictly preserves:
     - .wm-hero min-height (640 px)
     - .wm-hero__inner padding
     - .wm-hero__content max-width
     - .wm-hero__title / __eyebrow / __desc / __btn font sizes
   Only motion, decoration and structure are reworked.
   ============================================================ */

/* ============================================================
   1. SLIDE TRANSITION — long ken-burns + smooth crossfade.
   The heavy blur effect has been dropped — it was distracting
   on slow devices. The new version is just a clean opacity
   crossfade over a slow continuous zoom on the active slide.
   ============================================================ */
.wm-hero--creative .wm-hero__slide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.06);
  transition:
    opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 10s cubic-bezier(0.16, 0.84, 0.44, 1),
    visibility 0s linear 1.2s;
  will-change: opacity, transform;
}
.wm-hero--creative .wm-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition:
    opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 10s cubic-bezier(0.16, 0.84, 0.44, 1),
    visibility 0s linear 0s;
}

/* ============================================================
   2. CONTENT ENTRANCE — staggered cascade on every slide change.
   Each child of .wm-hero__content starts hidden + offset and
   only animates in when its parent .wm-hero__slide gets .is-active.
   ============================================================ */
.wm-hero--creative .wm-hero__content > * {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wm-hero--creative .wm-hero__slide.is-active .wm-hero__content > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.wm-hero--creative .wm-hero__slide.is-active .wm-hero__eyebrow { transition-delay: 0.35s; }
.wm-hero--creative .wm-hero__slide.is-active .wm-hero__title   { transition-delay: 0.50s; }
.wm-hero--creative .wm-hero__slide.is-active .wm-hero__desc    { transition-delay: 0.70s; }
.wm-hero--creative .wm-hero__slide.is-active .wm-hero__actions { transition-delay: 0.85s; }

/* ============================================================
   3. CORNER BRACKETS — yellow L-shapes top-left + bottom-right
   that "draw in" on each slide change, framing the active slide
   like a viewfinder.
   ============================================================ */
.wm-hero__brackets {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.wm-hero__bracket {
  position: absolute;
  width: 36px;
  height: 36px;
  opacity: 0.7;
}
.wm-hero__bracket::before,
.wm-hero__bracket::after {
  content: '';
  position: absolute;
  background: var(--accent);
  /* Animated fill — re-runs whenever the .is-active class flickers. */
  animation: wmHeroBracket 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.wm-hero__bracket--tl { top: 40px; left: 40px; }
.wm-hero__bracket--tl::before {
  top: 0; left: 0; width: 100%; height: 1px;
  transform-origin: left center;
}
.wm-hero__bracket--tl::after  {
  top: 0; left: 0; width: 1px; height: 100%;
  transform-origin: top center;
}
.wm-hero__bracket--br { bottom: 40px; right: 40px; }
.wm-hero__bracket--br::before {
  bottom: 0; right: 0; width: 100%; height: 1px;
  transform-origin: right center;
}
.wm-hero__bracket--br::after  {
  bottom: 0; right: 0; width: 1px; height: 100%;
  transform-origin: bottom center;
}
@keyframes wmHeroBracket {
  0%   { transform: scaleX(0) scaleY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scaleX(1) scaleY(1); opacity: 1; }
}
/* TL second pseudo is vertical, so its scale axis is Y; rebuild
   the keyframe ratios so both sides draw smoothly. */
.wm-hero__bracket--tl::after,
.wm-hero__bracket--br::after { animation-name: wmHeroBracketV; }
@keyframes wmHeroBracketV {
  0%   { transform: scaleY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
.wm-hero__bracket--tl::before,
.wm-hero__bracket--br::before { animation-name: wmHeroBracketH; }
@keyframes wmHeroBracketH {
  0%   { transform: scaleX(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* ============================================================
   4. SIDE METER — slide counter + label on the right edge.
   "01 / 05" with a vertical text label above it. The counter
   number morphs (slides up) when slides change.
   ============================================================ */
.wm-hero__side {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  user-select: none;
}
.wm-hero__side-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 2px 0;
  border-left: 1px solid rgba(255, 233, 0, 0.35);
  border-right: 1px solid rgba(255, 233, 0, 0.35);
  /* re-mounts on slide change to retrigger reveal */
  animation: wmHeroSideLabel 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.4s;
}
@keyframes wmHeroSideLabel {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wm-hero__side-num {
  display: flex;
  align-items: baseline;
  font-family: 'JetBrains Mono', 'Outfit', monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.wm-hero__side-current {
  font-size: 44px;
  font-weight: 800;
  color: var(--accent);
  display: inline-block;
  overflow: hidden;
}
.wm-hero__side-current span {
  display: inline-block;
  animation: wmHeroNumberIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes wmHeroNumberIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.wm-hero__side-divider {
  font-size: 14px;
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}
.wm-hero__side-total {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   5. SCROLL CUE — vertical "SCROLL" text + bouncing line on
   the bottom-right. Subtle, anchored to a section link.
   ============================================================ */
.wm-hero__scroll-cue {
  position: absolute;
  right: 38px;
  bottom: 28px;
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
}
.wm-hero__scroll-cue:hover { color: var(--accent); }
.wm-hero__scroll-cue::before {
  content: '';
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: wmHeroScrollLine 1.8s ease-in-out infinite;
}
@keyframes wmHeroScrollLine {
  0%, 100% { transform: scaleY(0.4) translateY(-6px); opacity: 0.4; }
  50%      { transform: scaleY(1)   translateY(6px);  opacity: 1; }
}

/* ============================================================
   6. DOTS — slim horizontal bars instead of circles. The active
   bar widens and fills left-to-right with brand yellow over the
   autoplay duration (6 s), giving a precise progress signal that
   reads more "editorial / industrial" than the old conic ring.
   ============================================================ */
.wm-hero--creative .wm-hero__dots {
  bottom: 32px;
  padding: 10px 18px;
  gap: 10px;
}
.wm-hero--creative .wm-hero__dot {
  width: 24px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.25s ease;
}
.wm-hero--creative .wm-hero__dot:hover {
  background: rgba(255, 255, 255, 0.45);
}
.wm-hero--creative .wm-hero__dot.is-active {
  width: 56px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}
/* Yellow fill that sweeps left-to-right showing autoplay progress.
   Restarted by JS on every slide change by toggling --restart class. */
.wm-hero--creative .wm-hero__dot.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--accent);
  animation: wmHeroDotFill 6s linear forwards;
}
@keyframes wmHeroDotFill {
  from { width: 0; }
  to   { width: 100%; }
}
.wm-hero--creative .wm-hero__dot.is-active.wm-hero__dot--restart::before {
  animation: none;
}

/* ============================================================
   6b. BOTTOM CONTROLS STRIP — replaces dots + side counter.
   Layout: [ big counter "01 / 05" ] · [ progress hairline ] ·
   [ circular outline arrow buttons ]. Sits as a single row at
   the bottom of the slider, full container width.
   ============================================================ */
.wm-hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(28px, 4vh, 48px);
  z-index: 5;
  pointer-events: none; /* opt children back in below */
}
.wm-hero__controls > .container {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}
.wm-hero__controls > .container > * { pointer-events: auto; }

/* Counter — "01 / 05" with the current number much larger than
   the divider + total. */
.wm-hero__counter {
  display: flex;
  align-items: baseline;
  color: #fff;
  font-family: 'JetBrains Mono', 'Outfit', monospace;
  font-variant-numeric: tabular-nums;
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
}
.wm-hero__counter-current {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: #fff;
  display: inline-block;
  overflow: hidden;
  /* JS re-wraps the inner text in a <span> on slide change to
     retrigger the slide-up animation. */
}
.wm-hero__counter-current span {
  display: inline-block;
  animation: wmHeroCounterIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes wmHeroCounterIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.wm-hero__counter-sep {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 6px;
}
.wm-hero__counter-total {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

/* Progress track — thin hairline. The fill is yellow and animates
   from width: 0 -> 100% over the 6 s autoplay interval. JS toggles
   the --restart class for one frame on slide change to reset. */
.wm-hero__progress-track {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  overflow: hidden;
}
.wm-hero__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  animation: wmHeroProgressFill 6s linear forwards;
}
@keyframes wmHeroProgressFill {
  from { width: 0; }
  to   { width: 100%; }
}
.wm-hero__progress-fill.wm-hero__progress-fill--restart {
  animation: none;
}

/* Arrow group — sits at the end of the strip. */
.wm-hero__nav-group {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Override base .wm-hero__nav (which is absolutely positioned at
   mid-height of the slider) to sit inline inside the controls strip
   as a circular outline button. */
.wm-hero--creative .wm-hero__nav {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.wm-hero--creative .wm-hero__nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  transform: none;
  box-shadow: none;
}

/* Smaller-viewport tightening: shrink counter + arrow size. */
@media (max-width: 768px) {
  .wm-hero__controls       { left: 18px; right: 18px; bottom: 22px; gap: 16px; }
  .wm-hero__counter-current { font-size: 26px; }
  .wm-hero--creative .wm-hero__nav { width: 40px; height: 40px; font-size: 12px; }
}

/* ============================================================
   7. AMBIENT VIGNETTE — soft yellow glow behind content column.
   Adds depth without changing text or dimensions.
   ============================================================ */
.wm-hero--creative::before {
  content: '';
  position: absolute;
  left: -10%;
  top: 50%;
  width: 60%;
  height: 80%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse at center,
              rgba(255, 233, 0, 0.08) 0%,
              rgba(255, 233, 0, 0.025) 35%,
              transparent 65%);
  pointer-events: none;
  z-index: 1;
  filter: blur(40px);
}

/* ============================================================
   8. TITLE ACCENT — animated brush sweep behind the yellow word.
   Bar underneath the highlighted word fills in left-to-right when
   the slide activates.
   ============================================================ */
.wm-hero--creative .wm-hero__title-accent::after {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.3, 1);
  transition-delay: 0.85s;
}
.wm-hero--creative .wm-hero__slide.is-active .wm-hero__title-accent::after {
  transform: scaleX(1);
}

/* ============================================================
   9. NAV ARROWS — refresh with a thinner ring, yellow stroke on
   hover, and a soft yellow halo.
   ============================================================ */
.wm-hero--creative .wm-hero__nav {
  background: rgba(13, 13, 13, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.wm-hero--creative .wm-hero__nav:hover {
  box-shadow: 0 0 0 2px var(--accent), 0 12px 32px rgba(255, 233, 0, 0.18);
}

/* ============================================================
   10. SQUARE-EDGE CTA BUTTONS — drop the 8 px corner radius from
   the hero action buttons (Learn More, Request a Demo, etc.) for
   a sharper, editorial look.
   ============================================================ */
.wm-hero--creative .wm-hero__btn { border-radius: 0; }

/* ============================================================
   11. PRIMARY CTA SWEEP HOVER — yellow base, white slides in from
   the left on hover (same idea as the header Contact CTA). Text
   stays black throughout so the label doesn't flicker.
   ============================================================ */
.wm-hero--creative .wm-hero__btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.wm-hero--creative .wm-hero__btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: -1;
}
.wm-hero--creative .wm-hero__btn--primary:hover::before {
  transform: translateX(0);
}
.wm-hero--creative .wm-hero__btn--primary span,
.wm-hero--creative .wm-hero__btn--primary i {
  position: relative;
  z-index: 1;
}
/* Override the base "go darker yellow + yellow halo" hover so the
   underlying background stays yellow (so the trailing edge of the
   sweep doesn't reveal a different tint) and the shadow shifts to
   a neutral dark glow that suits a white face. */
.wm-hero--creative .wm-hero__btn--primary:hover {
  background: var(--accent);
  color: var(--light-text);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

/* ============================================================
   RESPONSIVE — small viewports get the side counter and scroll
   cue hidden / shrunk so the slider doesn't feel cramped.
   No content text size is changed.
   ============================================================ */
@media (max-width: 992px) {
  .wm-hero__bracket--tl { top: 24px; left: 24px; }
  .wm-hero__bracket--br { bottom: 24px; right: 24px; }
  .wm-hero__side       { right: 28px; gap: 16px; }
  .wm-hero__side-current { font-size: 32px; }
  .wm-hero__scroll-cue { right: 22px; bottom: 22px; }
}
@media (max-width: 768px) {
  .wm-hero__brackets   { display: none; }
  .wm-hero__side       { display: none; }
  .wm-hero__scroll-cue { display: none; }
  .wm-hero--creative::before { display: none; }
}

/* Reduce-motion safety net */
@media (prefers-reduced-motion: reduce) {
  .wm-hero--creative .wm-hero__slide,
  .wm-hero--creative .wm-hero__content > *,
  .wm-hero__bracket::before,
  .wm-hero__bracket::after,
  .wm-hero__side-label,
  .wm-hero__side-current span,
  .wm-hero__scroll-cue::before,
  .wm-hero--creative .wm-hero__dot.is-active::before {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ======================================================================
   WM-VIDEOS — featured-videos section (lite-YouTube + playlist)
   ====================================================================== */

/* ============================================================
   WM-VIDEOS — featured-videos section for the homepage.
   Layout: big lite-YouTube player on the left, vertical playlist
   on the right. Click a playlist row → swaps the main player's
   thumbnail. Click the main play button → loads the real iframe
   (lazy embed pattern — keeps initial paint clean).
   ============================================================ */
.wm-videos {
    background: #ffffff;
    padding: 90px 0 0;
    position: relative;
}

.wm-videos__header {
    margin-bottom: 56px;
    max-width: 760px;
}
.wm-videos__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: rgba(10, 10, 10, 0.5);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.wm-videos__title {
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 700;
    color: #0a0a0a;
    margin: 0 0 22px;
    line-height: 1.05;
    letter-spacing: -1px;
}
.wm-videos__lead {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(10, 10, 10, 0.6);
    margin: 0;
    max-width: 600px;
}
.wm-videos__title span {
    position: relative;
    display: inline-block;
    color: #0a0a0a;
}
.wm-videos__title span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 12px;
    background: var(--accent, #ffe900);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.7, 0, 0.3, 1);
    transition-delay: 0.4s;
    z-index: -1;
}
.wm-videos__title.is-revealed span::after { transform: scaleX(1); }

/* ============================================================
   Layout — main player + playlist
   ============================================================ */
.wm-videos__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: stretch;
}

/* ============================================================
   Lite-YouTube player — placeholder thumbnail + play button.
   Replaces itself with a real <iframe> on click via JS.
   On desktop the player matches the playlist height instead of
   locking to 16:9 (so the two columns align). On narrower
   viewports the layout stacks and the player goes back to 16:9.
   ============================================================ */
.wm-videos__player {
    position: relative;
    height: 100%;
}
.wm-lite-yt {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;  /* fallback / mobile */
    background: #0a0a0a;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
}
@media (min-width: 992px) {
    /* Desktop: drop the aspect-ratio so the player height tracks the
       playlist column (the taller of the two via align-items: stretch). */
    .wm-lite-yt { aspect-ratio: auto; }
}
.wm-lite-yt > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s cubic-bezier(0.16, 0.84, 0.44, 1),
                opacity 0.35s ease;
    will-change: transform;
}
.wm-lite-yt:hover > img {
    transform: scale(1.04);
}
.wm-lite-yt > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Subtle dark scrim across the bottom so the caption is legible */
.wm-lite-yt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(0, 0, 0, 0.15) 0%,
                rgba(0, 0, 0, 0) 35%,
                rgba(0, 0, 0, 0) 60%,
                rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.wm-lite-yt.is-playing::after,
.wm-lite-yt.is-playing > .wm-lite-yt__play,
.wm-lite-yt.is-playing > .wm-lite-yt__caption,
.wm-lite-yt.is-playing > img {
    opacity: 0;
    pointer-events: none;
}

/* Big yellow play button — centred, pulsing halo at rest,
   scales + reveals a stronger halo on hover. */
.wm-lite-yt__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--accent, #ffe900);
    color: #0a0a0a;
    border: 0;
    display: grid;
    place-items: center;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35),
                0 0 0 0 rgba(255, 233, 0, 0.4);
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                opacity 0.3s ease;
}
.wm-lite-yt__play i { transform: translateX(3px); /* optical centre */ }
.wm-lite-yt__play::before,
.wm-lite-yt__play::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--accent, #ffe900);
    opacity: 0;
    animation: wmVideosHalo 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    pointer-events: none;
}
.wm-lite-yt__play::after { animation-delay: 1.3s; }
@keyframes wmVideosHalo {
    0%   { transform: scale(1);    opacity: 0.6; }
    100% { transform: scale(1.55); opacity: 0; }
}
.wm-lite-yt:hover .wm-lite-yt__play {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4),
                0 0 0 14px rgba(255, 233, 0, 0.2);
}

/* Caption on the bottom-left of the player — eyebrow + title */
.wm-lite-yt__caption {
    position: absolute;
    left: 24px;
    bottom: 24px;
    right: 24px;
    z-index: 2;
    color: #fff;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.wm-lite-yt__tag {
    display: inline-block;
    background: var(--accent, #ffe900);
    color: #0a0a0a;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 10px;
    margin-bottom: 12px;
}
.wm-lite-yt__title {
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: #fff;
    max-width: 80%;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Playlist column — clean vertical list. Each row: 16:9 thumb +
   title + small uppercase tag. No card chrome, no boxed cells.
   Active row gets a yellow vertical accent bar on the left and
   a slightly elevated title; hover gives a subtle bg wash.
   ============================================================ */
.wm-videos__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wm-videos__item-btn {
    position: relative;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 144px 1fr;
    gap: 18px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    transition: background 0.25s ease;
    color: inherit;
    font: inherit;
    border-radius: 0;
}
.wm-videos__item-btn:hover {
    background: rgba(10, 10, 10, 0.035);
}
.wm-videos__item.is-active .wm-videos__item-btn {
    background: rgba(10, 10, 10, 0.025);
}
/* Vertical yellow accent on the active row — left edge. */
.wm-videos__item.is-active .wm-videos__item-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--accent, #ffe900);
}

/* Thumbnail */
.wm-videos__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0a0a0a;
    overflow: hidden;
}
.wm-videos__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wm-videos__item-btn:hover .wm-videos__thumb img {
    transform: scale(1.05);
}
/* Dark scrim across the thumb on the inactive rows so the bright
   YouTube preview doesn't outshout the text next to it. Lifted on
   active and on hover. */
.wm-videos__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.28);
    transition: opacity 0.25s ease;
}
.wm-videos__item-btn:hover .wm-videos__thumb::after,
.wm-videos__item.is-active .wm-videos__thumb::after {
    opacity: 0;
}

/* Meta column */
.wm-videos__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wm-videos__item-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(10, 10, 10, 0.55);
    line-height: 1.35;
    margin: 0;
    /* clamp at 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}
.wm-videos__item-btn:hover .wm-videos__item-title,
.wm-videos__item.is-active .wm-videos__item-title {
    color: #0a0a0a;
}
.wm-videos__date {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: rgba(10, 10, 10, 0.45);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.wm-videos__item.is-active .wm-videos__date {
    color: var(--accent-deep, #f0d800);
}

/* ============================================================
   Responsive — stack at narrow viewports
   ============================================================ */
@media (max-width: 991px) {
    .wm-videos__layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .wm-videos__list {
        gap: 8px;
    }
}
@media (max-width: 600px) {
    .wm-videos { padding: 60px 0 70px; }
    .wm-videos__header { margin-bottom: 36px; }
    .wm-lite-yt__play  { width: 64px; height: 64px; font-size: 18px; }
    .wm-lite-yt__caption { left: 16px; right: 16px; bottom: 16px; }
    .wm-videos__item-btn {
        grid-template-columns: 116px 1fr;
        gap: 14px;
        padding: 10px 12px;
    }
    .wm-videos__item-title { font-size: 14px; }
    .wm-videos__date       { font-size: 9.5px; }
}

/* Reduce-motion: kill the yellow-underline sweep + thumb zooms. */
@media (prefers-reduced-motion: reduce) {
    .wm-videos__title span::after { transition: none; transform: scaleX(1); }
    .wm-lite-yt > img,
    .wm-videos__thumb img { transition: none; }
}