/* ============================================================
   EXTREME ENGINEERING INDUSTRY — PREMIUM INDUSTRIAL CINEMATIC
   v2.0  |  Maximum wow-factor flagship brand experience
   All rules strictly scoped to .extreme-page — zero bleed.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   §1  DESIGN TOKENS
   ──────────────────────────────────────────────────────────── */
.extreme-page {

  /* ORANGE — brand anchor */
  --ex-orange:           #F26522;
  --ex-orange-dk:        #C44E14;
  --ex-orange-lt:        #FF8C50;
  --ex-orange-tint:      #FFD4B8;
  --ex-orange-glow:      rgba(242,101,34,.45);
  --ex-orange-soft:      rgba(242,101,34,.10);
  --ex-orange-glass:     rgba(242,101,34,.16);
  --ex-amber:            #FFB347;
  --ex-amber-dk:         #E28B25;

  /* DARK SURFACES */
  --ex-void:             #060402;
  --ex-charcoal:         #1A1A1A;
  --ex-graphite:         #232323;
  --ex-steel:            #2E2E2E;
  --ex-ink:              #1E1E1E;
  --ex-ink-soft:         #3A3A3A;

  /* WARM TEXT — keep exact names used by existing HTML */
  --ex-muted-warm:       #6B6357;
  --ex-light-warm:       #9C9387;
  --ex-faint:            #BFB8AF;

  /* LIGHT SURFACES */
  --ex-white:            #FFFFFF;
  --ex-cream:            #FFF8F1;
  --ex-warm-bg:          #FAF6F0;
  --ex-warm-2:           #F5EFE6;
  --ex-warm-border:      #EEE4D8;
  --ex-warm-line:        #E8DDD0;

  /* GLASS */
  --ex-glass:            rgba(255,255,255,.04);
  --ex-glass-md:         rgba(255,255,255,.08);
  --ex-glass-border:     rgba(255,255,255,.10);
  --ex-glass-border-lg:  rgba(255,255,255,.18);
  --ex-glass-white:      rgba(255,255,255,.92);

  /* SHADOWS — layered for depth */
  --ex-shadow-card:      0 2px 8px rgba(26,26,26,.06), 0 10px 32px -10px rgba(26,26,26,.12);
  --ex-shadow-hover:     0 8px 24px -8px rgba(26,26,26,.16), 0 32px 72px -24px rgba(26,26,26,.26);
  --ex-shadow-glow:      0 8px 32px -8px rgba(242,101,34,.50);
  --ex-shadow-glow-lg:   0 20px 60px -12px rgba(242,101,34,.55);
  --ex-shadow-float:     0 40px 100px -30px rgba(26,26,26,.40);

  /* MOTION SYSTEM */
  --ex-ease:             cubic-bezier(0.16, 1, 0.3, 1);
  --ex-spring:           cubic-bezier(0.34, 1.56, 0.64, 1);
  --ex-smooth:           cubic-bezier(0.22, 1, 0.36, 1);
  --ex-inout:            cubic-bezier(0.85, 0, 0.15, 1);
  --ex-dur-xs:           150ms;
  --ex-dur-sm:           300ms;
  --ex-dur-md:           550ms;
  --ex-dur-lg:           900ms;
  --ex-dur-xl:           1400ms;

  background: var(--ex-cream);
  color: var(--ex-charcoal);
  overflow-x: hidden;
}


/* ────────────────────────────────────────────────────────────
   §2  PRELOADER — Extreme branded
   ──────────────────────────────────────────────────────────── */
.ex-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--ex-void);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  pointer-events: none;
  transition: opacity .6s var(--ex-ease), visibility .6s;
}

.ex-preloader.is-done {
  opacity: 0;
  visibility: hidden;
}

.ex-preloader__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(242,101,34,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,101,34,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

.ex-preloader__brand {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ex-white);
  text-align: center;
  opacity: 0;
  animation: ex-pre-brand .8s var(--ex-ease) .2s forwards;
}

.ex-preloader__brand span {
  background: linear-gradient(90deg, var(--ex-orange-lt), var(--ex-amber));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ex-preloader__sub {
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  position: relative;
  z-index: 1;
}

.ex-preloader__bar-wrap {
  position: relative;
  z-index: 1;
  width: min(320px, 60vw);
  height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}

.ex-preloader__bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ex-orange), var(--ex-amber));
  border-radius: 2px;
  animation: ex-pre-bar 1.8s var(--ex-ease) .4s forwards;
  box-shadow: 0 0 16px var(--ex-orange-glow);
}

@keyframes ex-pre-brand {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ex-pre-bar {
  to { width: 100%; }
}


/* ────────────────────────────────────────────────────────────
   §3  SCROLL PROGRESS BAR
   ──────────────────────────────────────────────────────────── */
.ex-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--ex-orange), var(--ex-amber), var(--ex-orange-lt));
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 12px var(--ex-orange-glow);
  transition: width .08s linear;
}


/* ────────────────────────────────────────────────────────────
   §4  NAVBAR OVERRIDES
   ──────────────────────────────────────────────────────────── */
.extreme-page .navbar {
  transition: background var(--ex-dur-md) var(--ex-ease),
              border-color var(--ex-dur-md) var(--ex-ease),
              box-shadow var(--ex-dur-md) var(--ex-ease);
}

.extreme-page .navbar.is-scrolled {
  background: rgba(26,26,26,.94);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(242,101,34,.35);
  box-shadow: 0 4px 24px -8px rgba(0,0,0,.5), 0 1px 0 rgba(242,101,34,.2);
}

.extreme-page .navbar.is-scrolled .navbar__link,
.extreme-page .navbar.is-scrolled .navbar__brand-name,
.extreme-page .navbar.is-scrolled .navbar__brand-sub,
.extreme-page .navbar.is-scrolled .navbar__phone,
.extreme-page .navbar.is-scrolled .navbar__hamburger { color: rgba(255,255,255,.9); }

.extreme-page .navbar__link { position: relative; }
.extreme-page .navbar__link::after { background: var(--ex-orange); }
.extreme-page .navbar__brand-sub { color: rgba(255,255,255,.6); }
.extreme-page .navbar.is-scrolled .navbar__brand-sub { color: rgba(255,255,255,.6); }

/* Buttons */
.extreme-page .btn--primary {
  background: linear-gradient(135deg, var(--ex-orange), var(--ex-orange-dk));
  color: var(--ex-white);
  box-shadow: var(--ex-shadow-glow);
  position: relative;
  overflow: hidden;
  transition: transform var(--ex-dur-sm) var(--ex-ease),
              box-shadow var(--ex-dur-sm) var(--ex-ease);
}

.extreme-page .btn--primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .5s var(--ex-ease);
}

.extreme-page .btn--primary:hover {
  background: linear-gradient(135deg, var(--ex-orange-lt), var(--ex-orange));
  box-shadow: var(--ex-shadow-glow-lg);
  transform: translateY(-2px);
}

.extreme-page .btn--primary:hover::after { left: 100%; }

.extreme-page .btn--ghost {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.20);
  color: var(--ex-white);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--ex-dur-sm) var(--ex-ease);
}

.extreme-page .btn--ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-2px);
}

/* MTC official logo — navbar link to Multitek Controls */
.extreme-page .navbar__mtc-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .7rem;
  background: rgba(255,255,255,.92);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 250ms var(--ex-ease),
              box-shadow 250ms var(--ex-ease),
              background 250ms var(--ex-ease);
}

.extreme-page .navbar__mtc-logo img {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.extreme-page .navbar__mtc-logo:hover {
  transform: scale(1.05);
  background: #fff;
  box-shadow: 0 0 18px -2px rgba(242,101,34,.55);
}

@media (max-width: 1339px) {
  .extreme-page .navbar__mtc-logo { padding-block: .55rem; }
  .extreme-page .navbar__mtc-logo img { width: 112px; }
}

.extreme-page .btn--outline {
  color: var(--ex-charcoal);
  border-color: var(--ex-warm-border);
  transition: all var(--ex-dur-sm) var(--ex-ease);
}
.extreme-page .btn--outline:hover {
  background: var(--ex-charcoal);
  color: var(--ex-white);
  border-color: var(--ex-charcoal);
  transform: translateY(-2px);
}

/* Mobile menu */
.extreme-page .mobile-menu { background: var(--ex-charcoal); }
.extreme-page .mobile-menu__nav a:hover { color: var(--ex-orange); }

/* Logo */
.extreme-page .navbar__logo-icon { width: auto; min-width: 2.5rem; height: 2.5rem; }
.extreme-page .navbar__logo-img  { width: 100%; height: 100%; object-fit: contain; }
.extreme-page .navbar__brand--logo-only .navbar__brand-text { display: none; }
.extreme-page .navbar__brand--logo-only .navbar__logo-icon {
  width: 11rem; height: 4.5rem; overflow: visible; border-radius: 0;
}
.extreme-page .footer__brand .navbar__logo-icon {
  width: 18rem; height: 7rem; overflow: visible; border-radius: 0; flex-shrink: 0;
}
.extreme-page .footer__brand-name,
.extreme-page .footer__brand-sub { display: none; }
.extreme-page .footer__brand > div { display: none; }


/* ────────────────────────────────────────────────────────────
   §5  HERO — CINEMATIC INDUSTRIAL
   ──────────────────────────────────────────────────────────── */
.ex-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 5rem) 0 6rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--ex-white);
  background: var(--ex-void);
}

/* Photo layer */
.ex-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  background:
    linear-gradient(125deg, rgba(6,4,2,.96) 0%, rgba(6,4,2,.75) 50%, rgba(6,4,2,.55) 100%),
    url('../images/extreme/hero.jpg') center / cover no-repeat;
  transform-origin: center;
}

/* Fine engineering grid */
.ex-hero__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(242,101,34,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,101,34,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, #000 0%, transparent 80%);
}

/* Orange angular accents */
.ex-hero__accent { position: absolute; z-index: 1; pointer-events: none; }

.ex-hero__accent--1 {
  top: 0; right: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(135deg,
    transparent 0%, transparent 35%,
    rgba(242,101,34,.35) 58%,
    var(--ex-orange) 100%);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  opacity: .9;
  mix-blend-mode: screen;
}

.ex-hero__accent--2 {
  top: 0; right: 0;
  width: 25%;
  height: 100%;
  background: linear-gradient(155deg, transparent 45%, rgba(196,78,20,.95) 100%);
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 28% 100%);
  opacity: .85;
}

/* Horizontal glowing separator line */
.ex-hero__accent--line {
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ex-orange) 25%, rgba(255,179,71,.8) 50%, var(--ex-orange) 75%, transparent);
  opacity: .25;
  animation: ex-line-travel 8s ease-in-out infinite;
}

@keyframes ex-line-travel {
  0%, 100% { opacity: .15; transform: scaleX(.8); }
  50%       { opacity: .35; transform: scaleX(1); }
}

/* Diagonal light beam */
.ex-hero__beam {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.ex-hero__beam--1 {
  top: -20%; left: 10%;
  width: 1px;
  height: 140%;
  background: linear-gradient(180deg, transparent, rgba(242,101,34,.30) 40%, rgba(255,179,71,.20) 60%, transparent);
  transform: rotate(25deg);
  animation: ex-beam-pulse 6s ease-in-out infinite;
}

.ex-hero__beam--2 {
  top: -20%; left: 22%;
  width: 1px;
  height: 140%;
  background: linear-gradient(180deg, transparent, rgba(242,101,34,.15) 40%, transparent);
  transform: rotate(25deg);
  animation: ex-beam-pulse 6s ease-in-out 1.5s infinite;
}

.ex-hero__beam--3 {
  top: -20%; right: 35%;
  width: 1px;
  height: 140%;
  background: linear-gradient(180deg, transparent, rgba(242,101,34,.12) 50%, transparent);
  transform: rotate(20deg);
  animation: ex-beam-pulse 7s ease-in-out 3s infinite;
}

@keyframes ex-beam-pulse {
  0%, 100% { opacity: 0; }
  40%, 60% { opacity: 1; }
}

/* Horizontal scan line */
.ex-hero__scan {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,101,34,.6) 30%, rgba(255,179,71,.8) 50%, rgba(242,101,34,.6) 70%, transparent);
  z-index: 2;
  top: 0;
  animation: ex-scan 8s linear infinite;
  pointer-events: none;
  opacity: 0;
}

@keyframes ex-scan {
  0%   { top: 0%;   opacity: 0; }
  5%   { opacity: .7; }
  95%  { opacity: .4; }
  100% { top: 100%; opacity: 0; }
}

/* Engineering geometry overlay (right side) */
.ex-hero__geo {
  position: absolute;
  right: 0; top: 0;
  width: 45%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: .45;
}

.ex-hero__geo svg {
  width: 100%;
  height: 100%;
}

/* Particle dots container */
.ex-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ex-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--ex-orange);
  opacity: 0;
  animation: ex-particle-float linear infinite;
}

/* Glow spot — ambient warm light */
.ex-hero__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 1;
}

.ex-hero__glow--1 {
  width: 500px; height: 400px;
  background: radial-gradient(circle, rgba(242,101,34,.22), transparent 70%);
  top: 20%; right: 25%;
  animation: ex-glow-breathe 8s ease-in-out infinite;
}

.ex-hero__glow--2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,179,71,.12), transparent 70%);
  bottom: 15%; left: 5%;
  animation: ex-glow-breathe 10s ease-in-out 2s infinite;
}

@keyframes ex-glow-breathe {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%       { transform: scale(1.15); opacity: 1; }
}

@keyframes ex-particle-float {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: var(--p-opacity, .4); }
  90%  { opacity: var(--p-opacity, .4); }
  100% { transform: translateY(-80px) scale(0.6); opacity: 0; }
}

/* Content layer */
.ex-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 900px;
}

/* Eyebrow badge */
.ex-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem 1.2rem;
  border: 1px solid rgba(242,101,34,.30);
  background: rgba(242,101,34,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ex-orange-lt);
}

.ex-hero__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ex-orange);
  box-shadow: 0 0 0 4px rgba(242,101,34,.25), 0 0 12px var(--ex-orange-glow);
  animation: ex-dot-pulse 2.5s ease-in-out infinite;
}

@keyframes ex-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(242,101,34,.25), 0 0 8px var(--ex-orange-glow); }
  50%       { box-shadow: 0 0 0 7px rgba(242,101,34,.15), 0 0 16px var(--ex-orange-glow); }
}

/* Main headline — massive and powerful */
.ex-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9.5vw, 7.5rem);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-top: 2rem;
  color: var(--ex-white);
}

.ex-hero__title .ex-word {
  display: inline-block;
  overflow: hidden;
  line-height: 1;
  margin-right: .25em;
}

.ex-hero__title-accent {
  background: linear-gradient(90deg, var(--ex-orange-lt) 0%, var(--ex-amber) 60%, var(--ex-orange-lt) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  animation: ex-gradient-shift 4s ease-in-out infinite;
}

@keyframes ex-gradient-shift {
  0%, 100% { background-position: 0% center; }
  50%       { background-position: 100% center; }
}

/* Description */
.ex-hero__desc {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.75;
  color: rgba(255,255,255,.72);
  max-width: 52ch;
  margin-top: 2rem;
}

/* CTA row */
.ex-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.75rem;
}

/* Stats strip */
.ex-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.10);
  max-width: 520px;
}

.ex-hero__stat {
  padding: 0 2rem 0 0;
  position: relative;
}

.ex-hero__stat + .ex-hero__stat {
  padding-left: 2rem;
  border-left: 1px solid rgba(255,255,255,.10);
}

.ex-hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: var(--ex-orange-lt);
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}

.ex-hero__stat-label {
  display: block;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(255,255,255,.45);
  margin-top: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
}

/* Scroll indicator */
.ex-hero__scroll {
  position: absolute;
  left: 2.5rem;
  bottom: 2.5rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  writing-mode: vertical-lr;
}

.ex-hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, var(--ex-orange), transparent);
  animation: ex-scroll-drop 2.4s ease-in-out infinite;
}

@keyframes ex-scroll-drop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}


/* ────────────────────────────────────────────────────────────
   §6  TICKER / MARQUEE STRIP
   ──────────────────────────────────────────────────────────── */
.ex-ticker {
  background: var(--ex-charcoal);
  border-top: 1px solid rgba(242,101,34,.20);
  border-bottom: 1px solid rgba(242,101,34,.12);
  overflow: hidden;
  padding: .9rem 0;
  position: relative;
}

.ex-ticker::before,
.ex-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}

.ex-ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--ex-charcoal), transparent);
}

.ex-ticker::after {
  right: 0;
  background: linear-gradient(270deg, var(--ex-charcoal), transparent);
}

.ex-ticker__track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: ex-ticker-scroll 28s linear infinite;
  will-change: transform;
}

.ex-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0 1.75rem;
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.ex-ticker__sep {
  color: var(--ex-orange);
  font-size: .55rem;
  opacity: .7;
}

@keyframes ex-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ────────────────────────────────────────────────────────────
   §7  SECTION SYSTEM
   ──────────────────────────────────────────────────────────── */
.ex-section {
  position: relative;
  padding: 6rem 0;
  background: var(--ex-cream);
}

@media (min-width: 768px)  { .ex-section { padding: 8rem 0; } }
@media (min-width: 1280px) { .ex-section { padding: 10rem 0; } }

.ex-section--white { background: var(--ex-white); }
.ex-section--warm  { background: var(--ex-warm-bg); }
.ex-section--dark  { background: var(--ex-charcoal); color: var(--ex-white); }

/* Section header */
.ex-section-header {
  margin-bottom: 4.5rem;
  max-width: 780px;
}

/* Overline — refined */
.ex-overline {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ex-orange);
}

.ex-overline::before {
  content: '';
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--ex-orange), var(--ex-amber));
  border-radius: 2px;
}

/* Section title — large and powerful */
.ex-section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-top: 1.1rem;
  color: var(--ex-charcoal);
  text-transform: uppercase;
}

.ex-section-title--white { color: var(--ex-white); }

.ex-section-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ex-muted-warm);
  margin-top: 1.5rem;
  max-width: 58ch;
}

.ex-section-body--white { color: rgba(255,255,255,.65); }

/* Subtle separator */
.ex-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ex-warm-border) 20%, var(--ex-warm-border) 80%, transparent);
  border: none;
  margin: 0;
}


/* ────────────────────────────────────────────────────────────
   §8  ABOUT SECTION
   ──────────────────────────────────────────────────────────── */
.ex-about {
  position: relative;
  overflow: hidden;
}

.ex-about::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(ellipse 80% 60% at 80% 50%, rgba(242,101,34,.04), transparent 70%);
  pointer-events: none;
}

.ex-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .ex-about__grid { grid-template-columns: 6fr 5fr; gap: 5rem; }
}

/* Image panel */
.ex-about__visual {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--ex-warm-2);
  box-shadow: var(--ex-shadow-hover);
}

.ex-about__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}

.ex-about__visual:hover img { transform: scale(1.06); }

.ex-about__visual::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(135deg, transparent 40%, rgba(242,101,34,.45) 100%);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
  pointer-events: none;
}

/* Glowing corner line */
.ex-about__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(242,101,34,.0);
  border-radius: 4px;
  transition: border-color .5s var(--ex-ease);
  z-index: 2;
  pointer-events: none;
}

.ex-about__visual:hover::after { border-color: rgba(242,101,34,.3); }

/* Year badge */
.ex-about__badge {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background: linear-gradient(135deg, var(--ex-orange), var(--ex-orange-dk));
  color: var(--ex-white);
  padding: 1.65rem 2rem;
  border-radius: 4px;
  font-family: var(--font-display);
  z-index: 3;
  box-shadow: var(--ex-shadow-glow-lg);
}

.ex-about__badge-num {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.ex-about__badge-label {
  display: block;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-top: .4rem;
  opacity: .9;
}

/* Content side */
.ex-feature-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.ex-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: .97rem;
  color: var(--ex-ink-soft);
  line-height: 1.6;
  padding: .85rem 1rem;
  border-radius: 6px;
  transition: background var(--ex-dur-sm) var(--ex-ease);
}

.ex-feature-list li:hover { background: var(--ex-warm-bg); }

.ex-feature-list__tick {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 4px;
  background: var(--ex-orange-soft);
  color: var(--ex-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9rem;
  transition: background var(--ex-dur-sm) var(--ex-ease),
              box-shadow var(--ex-dur-sm) var(--ex-ease);
}

.ex-feature-list li:hover .ex-feature-list__tick {
  background: var(--ex-orange);
  color: var(--ex-white);
  box-shadow: 0 4px 12px -4px var(--ex-orange-glow);
}

/* Sister concern strip */
.ex-sister-strip {
  margin-top: 2.5rem;
  padding: 1.6rem 2rem;
  border-left: 3px solid var(--ex-orange);
  background: var(--ex-warm-bg);
  border-radius: 0 8px 8px 0;
  position: relative;
  overflow: hidden;
}

.ex-sister-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(242,101,34,.04), transparent 60%);
  pointer-events: none;
}

.ex-sister-strip__label {
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ex-orange);
}

.ex-sister-strip__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ex-charcoal);
  margin-top: .45rem;
  letter-spacing: -0.01em;
}

.ex-sister-strip__sub {
  display: block;
  font-size: .85rem;
  color: var(--ex-muted-warm);
  margin-top: .35rem;
}


/* ────────────────────────────────────────────────────────────
   §9  WHY EXTREME — FEATURE GRID
   ──────────────────────────────────────────────────────────── */
.ex-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px)  { .ex-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ex-feature-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.ex-feature-card {
  position: relative;
  background: var(--ex-white);
  border: 1px solid var(--ex-warm-border);
  border-radius: 10px;
  padding: 2.2rem 2rem;
  overflow: hidden;
  transition:
    transform var(--ex-dur-md) var(--ex-ease),
    box-shadow var(--ex-dur-md) var(--ex-ease),
    border-color var(--ex-dur-md) var(--ex-ease);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Top bar animation */
.ex-feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0%; height: 3px;
  background: linear-gradient(90deg, var(--ex-orange), var(--ex-amber));
  transition: width var(--ex-dur-md) var(--ex-ease);
  border-radius: 0 2px 0 0;
}

/* Ambient glow on hover */
.ex-feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 30% 100%, rgba(242,101,34,.06), transparent 70%);
  opacity: 0;
  transition: opacity var(--ex-dur-md) var(--ex-ease);
}

.ex-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ex-shadow-hover);
  border-color: rgba(242,101,34,.30);
}

.ex-feature-card:hover::before { width: 100%; }
.ex-feature-card:hover::after  { opacity: 1; }

/* Icon */
.ex-feature-card__icon {
  position: relative;
  z-index: 1;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 10px;
  background: var(--ex-orange-soft);
  color: var(--ex-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--ex-dur-sm) var(--ex-ease),
    color var(--ex-dur-sm) var(--ex-ease),
    box-shadow var(--ex-dur-sm) var(--ex-ease),
    transform var(--ex-dur-sm) var(--ex-spring);
}

.ex-feature-card__icon svg { width: 22px; height: 22px; }

.ex-feature-card:hover .ex-feature-card__icon {
  background: linear-gradient(135deg, var(--ex-orange), var(--ex-orange-dk));
  color: var(--ex-white);
  box-shadow: 0 10px 28px -8px var(--ex-orange-glow);
  transform: scale(1.1) rotate(-3deg);
}

.ex-feature-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--ex-charcoal);
  margin-top: 1.3rem;
  letter-spacing: -0.015em;
}

.ex-feature-card__body {
  position: relative;
  z-index: 1;
  font-size: .9rem;
  color: var(--ex-muted-warm);
  line-height: 1.7;
  margin-top: .6rem;
}


/* ────────────────────────────────────────────────────────────
   §10  STATS BAND — Maximum impact
   ──────────────────────────────────────────────────────────── */
.ex-stats {
  background: var(--ex-charcoal);
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  color: var(--ex-white);
}

/* Ambient glows */
.ex-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 80% at 80% 15%, rgba(242,101,34,.22), transparent 60%),
    radial-gradient(ellipse 40% 60% at 5%  85%, rgba(255,179,71,.10), transparent 60%),
    radial-gradient(ellipse 30% 50% at 50% 50%, rgba(242,101,34,.06), transparent 60%);
  pointer-events: none;
}

/* Grid overlay */
.ex-stats::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.ex-stats__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

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

.ex-stat {
  padding: 1.5rem 2.5rem;
  position: relative;
}

@media (min-width: 768px) {
  .ex-stat + .ex-stat { border-left: 1px solid rgba(255,255,255,.08); }
}

.ex-stat__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--ex-orange-lt) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: block;
}

.ex-stat__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  margin-top: .6rem;
  color: var(--ex-white);
  letter-spacing: -0.01em;
}

.ex-stat__sub {
  display: block;
  font-size: .72rem;
  color: rgba(255,255,255,.40);
  margin-top: .3rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}


/* ────────────────────────────────────────────────────────────
   §11  CAPABILITIES / PROCESS STEPS
   ──────────────────────────────────────────────────────────── */
.ex-step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  position: relative;
}

@media (min-width: 640px)  { .ex-step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ex-step-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

/* Timeline connector on desktop */
@media (min-width: 1024px) {
  .ex-step-grid::before {
    content: '';
    position: absolute;
    top: 2.6rem;
    left: calc(12.5% + .5rem);
    right: calc(12.5% + .5rem);
    height: 1px;
    background: linear-gradient(90deg, var(--ex-orange), rgba(242,101,34,.2), var(--ex-orange));
    z-index: 0;
    opacity: .4;
  }
}

.ex-step-card {
  position: relative;
  z-index: 1;
  background: var(--ex-white);
  border: 1px solid var(--ex-warm-border);
  border-radius: 10px;
  padding: 2rem 1.8rem;
  transition:
    transform var(--ex-dur-md) var(--ex-ease),
    box-shadow var(--ex-dur-md) var(--ex-ease),
    border-color var(--ex-dur-md) var(--ex-ease);
  backface-visibility: hidden;
}

.ex-step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ex-shadow-hover);
  border-color: rgba(242,101,34,.3);
}

.ex-step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ex-orange), var(--ex-orange-dk));
  color: var(--ex-white);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .95rem;
  box-shadow: 0 8px 24px -8px var(--ex-orange-glow);
  transition: transform var(--ex-dur-sm) var(--ex-spring),
              box-shadow var(--ex-dur-sm) var(--ex-ease);
}

.ex-step-card:hover .ex-step-card__num {
  transform: scale(1.12);
  box-shadow: 0 12px 32px -8px var(--ex-orange-glow);
}

.ex-step-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ex-charcoal);
  margin-top: 1.2rem;
  letter-spacing: -0.015em;
}

.ex-step-card__body {
  font-size: .875rem;
  color: var(--ex-muted-warm);
  line-height: 1.7;
  margin-top: .55rem;
}

.ex-step-card__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px dashed var(--ex-warm-border);
  display: grid;
  gap: .4rem;
}

.ex-step-card__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .78rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ex-ink-soft);
}

.ex-step-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5rem;
  width: 5px; height: 5px;
  background: var(--ex-orange);
  border-radius: 50%;
}


/* ────────────────────────────────────────────────────────────
   §12  PRODUCTS GRID — Premium cards
   ──────────────────────────────────────────────────────────── */
.ex-products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px)  { .ex-products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ex-products__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* Card */
.ex-product-card {
  position: relative;
  background: var(--ex-white);
  border: 1px solid var(--ex-warm-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--ex-dur-md) var(--ex-ease),
    box-shadow var(--ex-dur-md) var(--ex-ease),
    border-color var(--ex-dur-md) var(--ex-ease);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ex-product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ex-shadow-hover);
  border-color: rgba(242,101,34,.30);
}

/* Corner accent */
.ex-product-card__corner {
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  background: linear-gradient(135deg, transparent 50%, var(--ex-orange) 50%);
  z-index: 2;
  transition: transform var(--ex-dur-md) var(--ex-spring);
}

.ex-product-card:hover .ex-product-card__corner { transform: scale(1.1); }

.ex-product-card__num {
  position: absolute;
  top: 10px; right: 12px;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 800;
  color: var(--ex-white);
  z-index: 3;
}

/* Image area */
.ex-product-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ex-warm-2);
}

.ex-product-card__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;  /* fill the frame so object-fit has a box to work in */
  padding: .9rem;             /* breathing room — never touches edges (border-box) */
  object-fit: contain;        /* fit whole product, never crop/distort */
  object-position: center;    /* stay centred */
  opacity: 0;
  transition: opacity .7s var(--ex-ease),
              transform 1s cubic-bezier(.22,1,.36,1);
}

/* Opt-out: keep the old full-bleed (cover) framing for a specific card,
   e.g. the Cutting Table whose photo suits an edge-to-edge crop. */
.ex-product-card__img.ex-product-card__img--cover {
  padding: 0;
  object-fit: cover;
}

.ex-product-card__img.is-active { opacity: 1; }
.ex-product-card:hover .ex-product-card__img.is-active { transform: scale(1.09); }

.ex-product-card__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(26,26,26,.55) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--ex-dur-md) var(--ex-ease);
  pointer-events: none;
}

.ex-product-card:hover .ex-product-card__img-wrap::after { opacity: 1; }

/* Storage Racks carousel */
.ex-product-carousel__control,
.ex-product-carousel__dots {
  position: absolute;
  z-index: 4;
}

.ex-product-carousel__control {
  top: 50%;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 26, 26, .68);
  color: var(--ex-white);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--ex-dur-md) var(--ex-ease), background var(--ex-dur-md) var(--ex-ease);
}

.ex-product-carousel__control:hover { background: var(--ex-orange); }
.ex-product-carousel:hover .ex-product-carousel__control,
.ex-product-carousel__control:focus-visible { opacity: 1; }
.ex-product-carousel__control--prev { left: .75rem; }
.ex-product-carousel__control--next { right: .75rem; }

.ex-product-carousel__dots {
  display: flex;
  gap: .4rem;
  bottom: .8rem;
  left: 50%;
  transform: translateX(-50%);
}

.ex-product-carousel__dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 1px solid var(--ex-white);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.ex-product-carousel__dot.is-active { background: var(--ex-white); }

@media (max-width: 767px) {
  .ex-product-carousel__control { opacity: 1; }
}

/* Placeholder */
.ex-product-card__placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ex-light-warm);
  background: var(--ex-warm-bg);
}

/* Body */
.ex-product-card__body {
  padding: 1.65rem 1.75rem 1.85rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ex-product-card__title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--ex-charcoal);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.ex-product-card__desc {
  font-size: .85rem;
  color: var(--ex-muted-warm);
  line-height: 1.7;
  margin-top: .6rem;
}

/* Chips */
.ex-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1rem;
}

.ex-chip {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .38rem .7rem;
  border-radius: 4px;
  background: var(--ex-orange-soft);
  color: var(--ex-orange);
  transition: background var(--ex-dur-xs) var(--ex-ease);
}

.ex-product-card:hover .ex-chip {
  background: var(--ex-orange-glass);
}

/* CTA link */
.ex-product-card__cta {
  margin-top: auto;
  padding-top: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ex-orange);
  transition: gap var(--ex-dur-sm) var(--ex-ease);
}

.ex-product-card:hover .ex-product-card__cta { gap: .75rem; }

.ex-product-card__cta svg {
  width: 14px; height: 14px;
  transition: transform var(--ex-dur-sm) var(--ex-ease);
}

.ex-product-card:hover .ex-product-card__cta svg { transform: translateX(4px); }


/* ────────────────────────────────────────────────────────────
   §13  INDUSTRIES — Dark glass chips
   ──────────────────────────────────────────────────────────── */
.ex-industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px)  { .ex-industry-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ex-industry-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }

.ex-industry-chip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 1.4rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  transition:
    background var(--ex-dur-sm) var(--ex-ease),
    border-color var(--ex-dur-sm) var(--ex-ease),
    transform var(--ex-dur-sm) var(--ex-ease);
  cursor: default;
}

.ex-industry-chip:hover {
  background: rgba(242,101,34,.10);
  border-color: rgba(242,101,34,.30);
  transform: translateY(-3px);
}

.ex-industry-chip__num {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ex-orange);
  background: rgba(242,101,34,.18);
  padding: .4rem .6rem;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background var(--ex-dur-xs) var(--ex-ease);
}

.ex-industry-chip:hover .ex-industry-chip__num {
  background: rgba(242,101,34,.30);
}

.ex-industry-chip__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ex-white);
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.ex-region-strip {
  margin-top: 2.5rem;
  padding: 1.4rem 2rem;
  border-left: 3px solid var(--ex-orange);
  background: rgba(242,101,34,.06);
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.75rem;
  align-items: baseline;
}

.ex-region-strip__label {
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ex-orange);
}

.ex-region-strip__list {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: rgba(255,255,255,.80);
  letter-spacing: .01em;
}


/* ────────────────────────────────────────────────────────────
   §14  GALLERY
   ──────────────────────────────────────────────────────────── */
.ex-masonry {
  columns: 1;
  column-gap: 1.25rem;
}

@media (min-width: 640px)  { .ex-masonry { columns: 2; } }
@media (min-width: 1024px) { .ex-masonry { columns: 3; } }

.ex-masonry-item {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  background: var(--ex-warm-2);
  transition: transform var(--ex-dur-md) var(--ex-ease), box-shadow var(--ex-dur-md) var(--ex-ease);
}

/* Do not leave labelled empty cards behind when a gallery image is unavailable. */
.ex-masonry-item:has(.ex-masonry-item__placeholder) { display: none; }

.ex-masonry-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--ex-shadow-hover);
}

.ex-masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}

.ex-masonry-item:hover img { transform: scale(1.06); }

.ex-masonry-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(242,101,34,.55) 0%, transparent 65%);
  opacity: 0;
  transition: opacity var(--ex-dur-md) var(--ex-ease);
  pointer-events: none;
}

.ex-masonry-item:hover::after { opacity: 1; }

.ex-masonry-item__placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  align-items: center;
  justify-content: center;
  color: var(--ex-light-warm);
  background: var(--ex-warm-bg);
  border: 2px dashed var(--ex-warm-border);
  padding: 1.5rem;
  text-align: center;
}

.ex-masonry-item__placeholder-text {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* ────────────────────────────────────────────────────────────
   §15  CONTACT CARDS
   ──────────────────────────────────────────────────────────── */
.ex-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

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

.ex-contact-card {
  position: relative;
  background: var(--ex-white);
  border: 1px solid var(--ex-warm-border);
  border-radius: 10px;
  padding: 2.2rem 1.8rem;
  overflow: hidden;
  transition:
    transform var(--ex-dur-md) var(--ex-ease),
    box-shadow var(--ex-dur-md) var(--ex-ease),
    border-color var(--ex-dur-md) var(--ex-ease);
}

.ex-contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ex-shadow-hover);
  border-color: rgba(242,101,34,.30);
}

.ex-contact-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--ex-orange), var(--ex-amber));
  transition: height var(--ex-dur-lg) var(--ex-ease);
  border-radius: 0 2px 2px 0;
}

.ex-contact-card:hover::before { height: 100%; }

.ex-contact-card__icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ex-orange) 0%, var(--ex-orange-dk) 100%);
  color: var(--ex-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ex-shadow-glow);
  transition: transform var(--ex-dur-sm) var(--ex-spring),
              box-shadow var(--ex-dur-sm) var(--ex-ease);
}

.ex-contact-card:hover .ex-contact-card__icon {
  transform: scale(1.08) rotate(-5deg);
  box-shadow: var(--ex-shadow-glow-lg);
}

.ex-contact-card__label {
  display: block;
  font-family: var(--font-display);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ex-muted-warm);
  margin-top: 1.6rem;
}

.ex-contact-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ex-charcoal);
  margin-top: .4rem;
  line-height: 1.6;
  word-break: break-word;
}

.ex-contact-card__value a { color: inherit; transition: color var(--ex-dur-xs) var(--ex-ease); }
.ex-contact-card__value a:hover { color: var(--ex-orange); }

/* Keep the full email address together within the four-column contact grid. */
.ex-contact-card__value--email {
  font-size: .875rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* Map */
.ex-map {
  margin-top: 4rem;
  height: 380px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ex-warm-2);
  position: relative;
  border: 1px solid var(--ex-warm-border);
}

.ex-map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
  justify-content: center;
  color: var(--ex-muted-warm);
  background:
    linear-gradient(135deg, var(--ex-warm-bg) 25%, transparent 25%) -10px 0,
    linear-gradient(225deg, var(--ex-warm-bg) 25%, transparent 25%) -10px 0;
  background-size: 24px 24px;
  background-color: var(--ex-warm-2);
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* ────────────────────────────────────────────────────────────
   §16  CTA BANNER — Cinematic closer
   ──────────────────────────────────────────────────────────── */
.ex-cta-banner {
  position: relative;
  border-radius: 12px;
  padding: 4rem 2.5rem;
  color: var(--ex-white);
  overflow: hidden;
  border: 1px solid rgba(242,101,34,.18);
  background:
    radial-gradient(ellipse 55% 70% at 95% 105%, rgba(242,101,34,.50), transparent 55%),
    radial-gradient(ellipse 35% 50% at 5%   -5%, rgba(255,179,71,.18), transparent 55%),
    linear-gradient(135deg, var(--ex-void) 0%, var(--ex-charcoal) 100%);
}

@media (min-width: 640px)  { .ex-cta-banner { padding: 4.5rem 3rem; } }
@media (min-width: 1024px) { .ex-cta-banner { padding: 5rem 4.5rem; } }

/* Grid overlay */
.ex-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Orange angular wedge */
.ex-cta-banner::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 28%;
  height: 100%;
  background: linear-gradient(135deg, transparent 40%, rgba(242,101,34,.50) 100%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.ex-cta-banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) { .ex-cta-banner__inner { grid-template-columns: 7fr 4fr; } }

.ex-cta-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ex-white);
  margin-top: .9rem;
}

.ex-cta-banner__desc {
  margin-top: 1rem;
  font-size: 1rem;
  color: rgba(255,255,255,.62);
  max-width: 52ch;
  line-height: 1.75;
}

.ex-cta-banner__actions {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  width: 100%;
  max-width: 300px;
}

@media (min-width: 1024px) { .ex-cta-banner__actions { margin-left: auto; } }
.ex-cta-banner__actions .btn { width: 100%; min-height: 54px; }


/* ────────────────────────────────────────────────────────────
   §17  FOOTER OVERRIDES
   ──────────────────────────────────────────────────────────── */
.extreme-page .footer {
  background:
    radial-gradient(ellipse 55% 50% at 95% 0%, rgba(242,101,34,.10), transparent 55%),
    var(--ex-charcoal);
}

.extreme-page .footer__social:hover {
  background: var(--ex-orange);
  border-color: var(--ex-orange);
  box-shadow: 0 10px 28px -8px var(--ex-orange-glow);
}

.extreme-page .footer__divider {
  background-image: linear-gradient(90deg, transparent, rgba(242,101,34,.45), transparent);
}


/* ────────────────────────────────────────────────────────────
   §18  FLOATING ACTIONS
   ──────────────────────────────────────────────────────────── */
.extreme-page .float-wa {
  background: var(--ex-orange);
  box-shadow: 0 8px 24px -8px var(--ex-orange-glow);
  transition: transform var(--ex-dur-sm) var(--ex-spring),
              box-shadow var(--ex-dur-sm) var(--ex-ease);
}

.extreme-page .float-wa:hover {
  transform: scale(1.12);
  box-shadow: 0 12px 32px -8px var(--ex-orange-glow);
}

.extreme-page .float-top {
  background: var(--ex-graphite);
  border: 1px solid rgba(255,255,255,.10);
}

.extreme-page .float-top:hover {
  background: var(--ex-orange);
  border-color: var(--ex-orange);
}


/* ────────────────────────────────────────────────────────────
   §19  GLOBAL ANIMATION HELPERS
   ──────────────────────────────────────────────────────────── */
/* Glowing separator line */
.ex-glow-line {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--ex-orange) 25%,
    var(--ex-amber) 50%,
    var(--ex-orange) 75%,
    transparent);
  background-size: 200% 100%;
  animation: ex-line-shimmer 5s ease-in-out infinite;
  opacity: .5;
}

@keyframes ex-line-shimmer {
  0%, 100% { background-position: 0% 0; }
  50%       { background-position: 100% 0; }
}

/* Floating shapes */
.ex-floating-shape {
  position: absolute;
  pointer-events: none;
  opacity: .06;
  z-index: 0;
  animation: ex-float 16s ease-in-out infinite;
}

@keyframes ex-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%       { transform: translate(18px, -14px) rotate(6deg); }
  66%       { transform: translate(-12px, 10px) rotate(-4deg); }
}


/* ────────────────────────────────────────────────────────────
   §20  REVEAL SYSTEM (CSS fallback — GSAP replaces when loaded)
   ──────────────────────────────────────────────────────────── */
.extreme-page .reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .9s var(--ex-ease),
    transform .9s var(--ex-ease);
}

.extreme-page .reveal-up.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* When GSAP is loaded, disable CSS transition (GSAP drives it) */
html.has-gsap .extreme-page .reveal-up {
  transition: none;
}


/* ────────────────────────────────────────────────────────────
   §21  RESPONSIVE
   ──────────────────────────────────────────────────────────── */

/* Hero scroll indicator — hide on tiny screens */
@media (max-width: 640px) {
  .ex-hero__scroll { display: none; }
  .ex-hero__geo    { width: 60%; opacity: .25; }
  .ex-hero__beam   { opacity: .4; }
  .ex-hero__title  {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }
}

/* Stats: 2-column on mobile, 4 on desktop */
@media (max-width: 767px) {
  .ex-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .ex-stat {
    padding: 1rem 1.25rem;
    border-left: 2px solid var(--ex-orange);
  }
}

/* About: switch column order on mobile */
@media (max-width: 1023px) {
  .ex-about__visual { margin-bottom: 2rem; }
  .ex-about__badge  { bottom: -.75rem; left: -.75rem; }
}

/* Products: collapse gap on mobile */
@media (max-width: 639px) {
  .ex-products__grid { gap: 1rem; }
  .ex-cta-banner     { padding: 2.5rem 1.5rem; }
}

/* Ticker — don't pause on reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ex-ticker__track { animation-duration: 60s; }
  .ex-hero__scan,
  .ex-hero__beam,
  .ex-hero__glow--1,
  .ex-hero__glow--2 { animation: none; opacity: .3; }
  .ex-particle { animation: none !important; opacity: 0 !important; }
}


/* ────────────────────────────────────────────────────────────
   §22  OUR CUSTOMERS  (mirrors the Multitek Controls customers
        section — pages.css — for a consistent brand identity.
        pages.css is NOT loaded on the Extreme page, so the same
        rules are reproduced here, scoped to the customer classes.)
   ──────────────────────────────────────────────────────────── */
.customers-trust {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.customers-trust__num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--electric);
}

.customers-trust__label {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.customers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

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

.customer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1rem 1.25rem;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.customer-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(77,123,247,.3);
  box-shadow:
    0 18px 40px -16px rgba(11,17,31,.18),
    0 0 30px -12px rgba(77,123,247,.35);
}

.customer-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  margin-bottom: .9rem;
}

.customer-card__logo {
  max-width: 80%;
  max-height: 100%;
  object-fit: contain;
}

.customer-card__name {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  /* Reserve two lines so long names don't make rows taller than others */
  min-height: 2.6em;
  display: flex;
  align-items: center;
}

/* Monogram fallback — shown until a real logo image is supplied.
   Rendered by each <img>'s onerror handler. Replace an image simply
   by dropping the file at the path in the card's src attribute. */
.customer-card__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--off-white), #E7EDFA);
  border: 1px solid var(--border);
  color: var(--electric);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .04em;
}

/* Backdrop plate for white / transparent logos (opt-in via tint:true in
   the data array) so they stay visible on the white card. */
.customer-card__logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 100%;
  padding: .5rem .9rem;
  border-radius: 10px;
  background: #141b2e;
}
.customer-card__logo-plate .customer-card__logo {
  max-width: 100%;
}