/* ─────────────────────────────────────────────────────────────────────
   MBK TOOLS — REDESIGN STYLES (style-v2.css)
   Consumes tokens.css. Never use raw values that aren't tokens.
   ───────────────────────────────────────────────────────────────────── */


/* ─────────────────── FONT BRIDGE ─────────────────── */
/* Remap old --fh token (Montserrat) to Geist so secondary-page body content
   inherits the same display font as the redesigned home page. */
:root {
  --fh: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
}

/* ─────────────────── RESET & BASE ─────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Lenis manages scrolling — disable native smooth */
  scroll-behavior: auto;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-page);
  overflow-x: hidden;
  font-feature-settings: 'cv11', 'ss01', 'ss02';
}

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; }

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

::selection { background: var(--accent-orange); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* ─────────────────── UTILITIES ─────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 25px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
/* Orange tick before each eyebrow label */
.eyebrow::before {
  content: '';
  width: 40px;
  height: 3px;
  background: var(--accent-orange);
  border-radius: 1px;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.text-muted { color: var(--text-muted); }


/* ─────────────────── BUTTONS ─────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart);
  will-change: transform;
}

.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--accent-orange);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset,
              0 8px 24px -8px var(--accent-orange-glow);
}
.btn--primary:hover { background: var(--accent-orange-hover); }

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn--ghost:hover {
  background: var(--text-primary);
  color: var(--text-inverse);
  border-color: var(--text-primary);
}

/* Magnetic CTA — JS adds transform via Motion One on cursor proximity */
.btn--magnetic { transform: translate3d(0,0,0); }

.btn__arrow { transition: transform var(--dur-fast) var(--ease-out-quart); }
.btn:hover .btn__arrow { transform: translateX(3px); }


/* ─────────────────── NAVBAR ─────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-navbar);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: color var(--dur-med) var(--ease-out-quart),
              border-color var(--dur-med) var(--ease-out-quart),
              background var(--dur-med) var(--ease-out-quart),
              backdrop-filter var(--dur-med) var(--ease-out-quart),
              padding var(--dur-med) var(--ease-out-quart);
  border-bottom: 1px solid transparent;
}

/* ── Hero: full-size logo, white text ── */
.nav[data-state="hero"] {
  color: var(--text-inverse);
}

/* ── Scrim layer ──
   Keeps the nav reading as transparent/floating while stopping page content
   from tangling with the links. Opaque at the very top, faded to nothing by
   the bottom edge, so there is no hard bar edge.

   It lives on a pseudo-element rather than on .nav itself for two reasons:
   backdrop-filter applies to the whole element box, so it needs the same
   mask as the gradient or the blur stops on a visible straight line; and
   masking .nav directly would fade the logo and links along with it. */
/* NOTE: ::before is already taken by the orange hairline further down this
   file, so the scrim uses ::after. Putting it on ::before collapses it to a
   1.5px strip (the hairline's height wins on cascade order) and clobbers the
   hairline's own gradient. */
.nav::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;                 /* behind .nav__inner, still above the page */
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out-quart);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}

/* ── Post-hero dark sections: compact logo, white text ── */
.nav[data-state="over-dark"] {
  color: var(--text-inverse);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
.nav[data-state="over-dark"]::after {
  opacity: 1;
  background: linear-gradient(to bottom,
              rgba(14, 20, 38, 0.92) 0%,      /* --navy-deep */
              rgba(14, 20, 38, 0.60) 55%,
              rgba(14, 20, 38, 0)   100%);
}

/* ── Light sections: compact logo, dark text ── */
.nav[data-state="over-light"] {
  color: var(--text-primary);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
.nav[data-state="over-light"]::after {
  opacity: 1;
  background: linear-gradient(to bottom,
              rgba(251, 250, 247, 0.94) 0%,   /* --bg-page */
              rgba(251, 250, 247, 0.64) 55%,
              rgba(251, 250, 247, 0)   100%);
}

.nav__inner {
  max-width: var(--container-bleed);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__logo {
  height: 110px;
  width: auto;
  max-width: min(84vw, 540px);
  object-fit: contain;
  transition: height var(--dur-med) var(--ease-out-quart),
              filter var(--dur-med) var(--ease-out-quart);
}
/* Hero: full 110px logo */
.nav[data-state="hero"] .nav__logo {
  height: 110px;
}
/* Off-hero: compact 80px */
.nav[data-state="over-dark"] .nav__logo,
.nav[data-state="over-light"] .nav__logo {
  height: 80px;
}
/* Dark sections: invert logo to white+white */
.nav[data-state="hero"] .nav__logo,
.nav[data-state="over-dark"] .nav__logo {
  filter: brightness(0) invert(1);
}
/* Light sections: original navy+orange logo */
.nav[data-state="over-light"] .nav__logo {
  filter: none;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  position: relative; /* anchor for floating pill */
}
.nav__links a {
  position: relative;
  padding: 4px var(--space-3);
  z-index: 1;
  opacity: 0.78;
  transition: opacity var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart);
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: var(--space-3); right: var(--space-3);
  height: 1.5px;
  background: var(--accent-orange);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 1px;
  transition: transform var(--dur-med) var(--ease-out-expo);
}
.nav__links a:hover { opacity: 1; }
.nav[data-state="over-light"] .nav__links a:hover { color: var(--accent-orange); }
.nav__links a:hover::after { transform: scaleX(1); }

/* Active page indicator */
.nav__links a[aria-current="page"] {
  opacity: 1;
  color: var(--accent-orange);
}
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav[data-state="over-dark"] .nav__links a[aria-current="page"] {
  color: var(--accent-orange);
}

/* Floating pill that tracks the hovered link (positioned by JS) */
.nav__highlight {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 80px;
  border-radius: var(--radius-pill);
  background: var(--accent-orange-soft);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.nav__actions { flex-shrink: 0; }

/* Hamburger (mobile) */
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}
.nav__burger:hover { background: rgba(0,0,0,0.06); }
.nav[data-state="hero"] .nav__burger:hover,
.nav[data-state="over-dark"] .nav__burger:hover { background: rgba(255,255,255,0.08); }
.nav__burger:active { transform: scale(0.92); }
.nav__burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1.75px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-out-expo),
              top var(--dur-med) var(--ease-out-expo),
              bottom var(--dur-med) var(--ease-out-expo),
              opacity var(--dur-fast) var(--ease-out-quart);
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { bottom: 16px; }
/* Force white X when overlay is open regardless of nav state */
.nav__burger[aria-expanded="true"] span { background: var(--text-inverse); }
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
  bottom: 21px;
  transform: rotate(-45deg);
}

/* Mobile overlay */
.nav__overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-navbar) - 1);
  background: var(--bg-inverse);
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--space-4) var(--space-6) var(--space-12);
  overflow-y: auto;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out-expo),
              opacity var(--dur-med) var(--ease-out-quart),
              visibility 0s linear var(--dur-slow);
}
.nav__overlay.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out-expo),
              opacity var(--dur-med) var(--ease-out-quart),
              visibility 0s linear 0s;
}

/* Orange accent line at top of overlay */
.nav__overlay::before {
  content: '';
  position: absolute;
  top: 0; left: var(--space-8); right: var(--space-8);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-orange) 30%, var(--accent-orange) 70%, transparent);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out-quart) 200ms;
}
.nav__overlay.is-open::before { opacity: 1; }

.nav__overlay-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(28px, 9vw, 52px);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin-bottom: var(--space-8);
}
.nav__overlay-links a {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity var(--dur-med) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-quart);
  transition-delay: 0ms;
  color: rgba(255,255,255,0.82);
  padding: var(--space-2) 0;
  display: block;
}
.nav__overlay-links a:hover { color: #fff; }
.nav__overlay-links a[aria-current="page"] {
  color: var(--accent-orange);
  opacity: 1;
}
.nav__overlay.is-open .nav__overlay-links a {
  opacity: 1;
  transform: none;
}
/* Active page stays orange even after reveal animation */
.nav__overlay.is-open .nav__overlay-links a[aria-current="page"] { color: var(--accent-orange); }
.nav__overlay.is-open .nav__overlay-links a:nth-child(1) { transition-delay: 55ms; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(2) { transition-delay: 90ms; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(3) { transition-delay: 125ms; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(4) { transition-delay: 160ms; }
.nav__overlay.is-open .nav__overlay-links a:nth-child(5) { transition-delay: 195ms; }

/* CTA button inside overlay */
.nav__overlay-cta {
  margin-bottom: var(--space-8);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity var(--dur-med) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: 0ms;
}
.nav__overlay.is-open .nav__overlay-cta {
  opacity: 1;
  transform: none;
  transition-delay: 235ms;
}
.nav__overlay-cta .btn--primary {
  width: 100%;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: 15px;
}

/* Divider */
.nav__overlay-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-bottom: var(--space-6);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out-quart) 0ms;
}
.nav__overlay.is-open .nav__overlay-divider {
  opacity: 1;
  transition-delay: 255ms;
}

/* Contact meta */
.nav__overlay-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.45);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity var(--dur-med) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: 0ms;
}
.nav__overlay.is-open .nav__overlay-meta {
  opacity: 1;
  transform: none;
  transition-delay: 280ms;
}
.nav__overlay-meta a {
  transition: color var(--dur-fast) var(--ease-out-quart);
  color: rgba(255,255,255,0.45);
}
.nav__overlay-meta a:hover { color: var(--accent-orange); }

/* Close button row */
.nav__overlay-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 68px;
  flex-shrink: 0;
  margin-bottom: var(--space-6);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-med) var(--ease-out-expo);
  transition-delay: 0ms;
}
.nav__overlay.is-open .nav__overlay-header {
  opacity: 1;
  transform: scale(1);
  transition-delay: 40ms;
}
.nav__overlay-close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}
.nav__overlay-close:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.nav__overlay-close:active { transform: scale(0.88); }

/* ─── NAVBAR · ORANGE HAIRLINE (fades in on scroll) ─── */
.nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-orange) 22%,
    var(--accent-orange) 78%,
    transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out-quart);
  pointer-events: none;
}
.nav[data-state="over-light"]::before { opacity: 0.42; }




/* ─────────────────── HERO ─────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: linear-gradient(150deg,
    #0B1322 0%,
    var(--navy-deep) 28%,
    var(--navy-mid) 64%,
    var(--accent-navy) 100%);
  color: var(--text-inverse);
  display: flex;
  /* safe center: centers on tall screens, but pins below the navbar (never
     overflowing upward into the logo) when content is taller than the viewport */
  align-items: center;
  align-items: safe center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--space-32) + var(--space-6)) var(--space-6) var(--space-16);
  isolation: isolate;
}

/* Subtle dot lattice */
.hero__lattice {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at center,
    rgba(255,255,255,0.10) 1px,
    transparent 1.2px
  );
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  pointer-events: none;
  z-index: -2;
}

.hero__cog-wrap {
  position: absolute;
  right: -8vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(480px, 68vw, 880px);
  aspect-ratio: 1;
  color: rgba(224, 132, 56, 0.6);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
/* Thicken the cog strokes so they read on the dark navy (viewBox units, scales up) */
.hero__cog circle,
.hero__cog rect,
.hero__cog path {
  stroke-width: 0.8;
}
/* warm orange glow behind the cog */
.hero__cog-wrap::after {
  content: '';
  position: absolute;
  inset: 14%;
  background: radial-gradient(circle, var(--accent-orange-glow), transparent 60%);
  filter: blur(50px);
  opacity: 0.6;
}
.hero__cog {
  width: 100%; height: 100%;
}

.hero__content {
  position: relative;
  max-width: var(--container-base);
  width: 100%;
  margin-inline: auto;
  padding-left: clamp(0px, 5vw, 72px);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--space-8);
}
.hero__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 0 12px var(--accent-orange-glow);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.02;
  margin-bottom: var(--space-6);
  max-width: 15ch;
}
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;   /* room for italic accent descenders */
}
.hero__line-i {
  display: block;
}
/* Bigger initial offset so the line-mask reveal fully clears the headline height */
.hero__line-i[data-reveal] {
  transform: translateY(105%);
}
.hero__accent {
  color: var(--accent-orange);
  font-style: italic;
  font-weight: var(--weight-black);
}

.hero__sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: var(--leading-normal);
  color: rgba(255,255,255,0.65);
  max-width: 52ch;
  margin-bottom: var(--space-10);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.hero .btn--ghost {
  color: var(--text-inverse);
  border-color: rgba(255,255,255,0.20);
}
.hero .btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.40);
  color: var(--text-inverse);
}

/* Chip (shared utility) */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}


/* ─────────────────── STATS BAND ─────────────────── */

.statband {
  background: linear-gradient(135deg, #C8651B 0%, #A9530F 100%);
  color: #fff;
  padding: var(--space-16) var(--space-6);
  position: relative;
  overflow: hidden;
}
/* subtle dot texture on the orange band */
.statband::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1.3px);
  background-size: 26px 26px;
  opacity: 0.6;
  pointer-events: none;
}
.statband__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  position: relative;
  z-index: 1;
}
.statband__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-5);
  border-left: 2px solid rgba(255,255,255,0.35);
}
.statband__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.statband__lbl {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,0.88);
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.35);
}
.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.45));
  transform-origin: top;
  animation: scroll-pulse 2.4s var(--ease-in-out-quart) infinite;
}
.hero__scroll-text {
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(1);   opacity: 0.5; }
  50%       { transform: scaleY(0.4); opacity: 1; }
}

/* Reveal-on-load helper (JS toggles .is-revealed via GSAP batch onComplete) */
/* No CSS transition here — GSAP owns opacity+transform exclusively */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Line-mask reveal for section headings (JS splits text into masked lines) */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;   /* room for descenders/italics */
}
.line-inner {
  display: block;
  will-change: transform, filter;
}


/* ─────────────────── CATEGORIES (BENTO) ─────────────────── */

.categories {
  padding: var(--section-y-lg) var(--space-6);
  background: var(--bg-sunken);
}

.categories__inner {
  max-width: var(--container-bleed);
  margin-inline: auto;
}

.categories__head {
  max-width: var(--container-text);
  margin-bottom: var(--space-16);
}
.categories__head .eyebrow { margin-bottom: var(--space-4); }
.categories__title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
  color: var(--heading);
}
.categories__intro {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 64ch;
}

/* Bento grid: 4 cols × 3 rows asymmetric */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(220px, auto) minmax(220px, auto) minmax(220px, auto);
  gap: var(--space-3);
  grid-template-rows: minmax(220px, auto) minmax(220px, auto) minmax(220px, auto) auto;
  grid-template-areas:
    "trans trans fast  fast"
    "trans trans elec  elec"
    "steel steel tools tools"
    "cat   cat   cat   cat";
}
.bento > :nth-child(1) { grid-area: trans; }
.bento > :nth-child(2) { grid-area: fast;  }
.bento > :nth-child(3) { grid-area: elec;  }
.bento > :nth-child(4) { grid-area: steel; }
.bento > :nth-child(5) { grid-area: tools; }
.bento > :nth-child(6) { grid-area: cat;   }

.bento-card {
  position: relative;
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out-expo),
              border-color var(--dur-med) var(--ease-out-quart),
              box-shadow var(--dur-med) var(--ease-out-quart);
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  isolation: isolate;
}
.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--spotlight-x) var(--spotlight-y),
    var(--accent-orange-soft),
    transparent 50%
  );
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out-quart);
  pointer-events: none;
  z-index: 0;
}
/* navy→orange accent bar that sweeps in on hover */
.bento-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-orange), var(--accent-navy));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out-expo);
  z-index: 2;
}
.bento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 101, 27, 0.32);
  box-shadow: var(--shadow-e3),
              0 18px 50px -18px var(--accent-orange-glow);
}
.bento-card:hover::before { opacity: 1; }
.bento-card:hover::after  { transform: scaleX(1); }

.bento-card__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: var(--space-8) var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bento-card__overline {
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.bento-card__title {
  font-family: var(--font-display);
  font-size: var(--text-heading-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.05;
  color: var(--heading);
  padding-right: var(--space-14);   /* clear the top-right icon badge */
}
.bento-card__desc {
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 36ch;
}

/* Sub-category tag chips */
.bento-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}
.bento-card__tags span {
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(44, 62, 107, 0.05);
  border: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}
.bento-card:hover .bento-card__tags span {
  border-color: rgba(200, 101, 27, 0.25);
}

.bento-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  transition: gap var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart);
}
.bento-card:hover .bento-card__cta {
  gap: var(--space-3);
  color: var(--accent-orange);
}

/* Icon badge (orange-soft box, fills solid on hover) */
.bento-card__icon {
  position: absolute;
  top: var(--space-6); right: var(--space-6);
  box-sizing: content-box;
  width: 26px; height: 26px;
  padding: 15px;
  border-radius: 14px;
  background: var(--accent-orange-soft);
  color: var(--accent-orange);
  z-index: 1;
  transition: color var(--dur-med) var(--ease-out-quart),
              background var(--dur-med) var(--ease-out-quart),
              transform var(--dur-med) var(--ease-out-expo);
}
.bento-card:hover .bento-card__icon {
  background: var(--accent-orange);
  color: #fff;
  transform: rotate(8deg);
}

/* Big faded watermark number, bottom-right (fills space, opposite the icon) */
.bento-card__no {
  position: absolute;
  bottom: -14px;
  right: var(--space-4);
  font-family: var(--font-display);
  font-size: 104px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: rgba(26, 39, 71, 0.20);
  pointer-events: none;
  z-index: 0;
}
.bento-card--lg .bento-card__no { font-size: 168px; bottom: -28px; }

/* keep all text above the watermark number */
.bento-card__overline,
.bento-card__title,
.bento-card__desc,
.bento-card__tags,
.bento-card__cta { position: relative; z-index: 1; }

/* Bento card sizes inherit grid-area placement; tweak typography for prominence */
.bento-card--lg .bento-card__title,
.bento > :nth-child(1) .bento-card__title {
  font-size: var(--text-display-md);
  max-width: 12ch;
}


/* ── Catalogue gateway CTA card ── */
.bento-card--cta {
  background: var(--navy-deep);
  border-color: transparent;
  overflow: hidden;
  cursor: pointer;
}
.bento-card--cta::before,
.bento-card--cta::after { display: none; }
.bento-card--cta:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 101, 27, 0.45);
  box-shadow: 0 0 0 1px rgba(200, 101, 27, 0.18),
              0 20px 48px -16px rgba(200, 101, 27, 0.35);
}
.bento-cta__body {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  height: 100%;
}
.bento-cta__stat {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-1);
}
.bento-cta__num {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-black);
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.bento-cta__num sup {
  font-size: 0.45em;
  color: var(--accent-orange);
  vertical-align: super;
  letter-spacing: 0;
}
.bento-cta__sub {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.45);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.bento-cta__divider {
  width: 1px;
  height: 52px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.bento-cta__marquee-wrap {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg,
    transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.bento-cta__marquee {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  white-space: nowrap;
  animation: bento-marquee 28s linear infinite;
}
.bento-card--cta:hover .bento-cta__marquee {
  animation-play-state: paused;
}
.bento-cta__marquee span {
  font-family: var(--font-display);
  font-size: var(--text-body-md);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.bento-cta__marquee .bento-cta__sep {
  color: var(--accent-orange);
  opacity: 0.7;
}
.bento-cta__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--accent-orange);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out-quart),
              gap var(--dur-fast) var(--ease-out-expo),
              box-shadow var(--dur-fast) var(--ease-out-quart);
}
.bento-card--cta:hover .bento-cta__link {
  background: #B85A16;
  gap: var(--space-3);
  box-shadow: 0 4px 16px -4px rgba(200, 101, 27, 0.55);
}
@keyframes bento-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bento-cta__marquee { animation: none; }
}

/* ─────────────────── WHO WE ARE ─────────────────── */

.about {
  padding: var(--section-y-lg) var(--space-6);
  background: var(--bg-page);
}
.about__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
}
.about__head {
  margin-bottom: var(--space-16);
}
.about__head .eyebrow { margin-bottom: var(--space-4); }
.about__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-20);
  align-items: center;
}
.about__title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--heading);
}
.about__lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  max-width: 56ch;
}
.about__body {
  font-size: var(--text-body-md);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  max-width: 56ch;
}
.about__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

/* About visual card */
.about__card {
  position: relative;
  background: var(--accent-navy);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  overflow: hidden;
  box-shadow: var(--shadow-e4);
  isolation: isolate;
}
.about__card-year {
  position: absolute;
  top: var(--space-4); right: var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(80px, 12vw, 160px);
  font-weight: var(--weight-black);
  line-height: 1;
  color: rgba(255,255,255,0.05);
  z-index: -1;
  letter-spacing: var(--tracking-tight);
}
.about__card-label {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-orange);
  font-weight: var(--weight-bold);
}
.about__card-h {
  font-family: var(--font-display);
  font-size: var(--text-heading-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.2;
  margin-top: var(--space-2);
  margin-bottom: var(--space-8);
}
.about__card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.about__card-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-md);
  color: rgba(255,255,255,0.82);
  line-height: var(--leading-snug);
}
.about__card-list svg {
  color: var(--accent-orange);
  flex-shrink: 0;
  margin-top: 2px;
}


/* ─────────────────── WHY CHOOSE US ─────────────────── */

.why {
  padding: var(--section-y-lg) var(--space-6);
  background: var(--bg-page);
}
.why__inner {
  max-width: var(--container-bleed);
  margin-inline: auto;
}
.why__head {
  margin-bottom: var(--space-16);
}
.why__head .eyebrow { margin-bottom: var(--space-4); }
.why__title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--heading);
}
.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.why-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  min-height: 280px;
  display: flex;
  flex-direction: column;     /* content flows from the top */
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out-expo),
              border-color var(--dur-med) var(--ease-out-quart),
              box-shadow var(--dur-med) var(--ease-out-quart);
}
.why-card::after {
  content: '';
  position: absolute;
  top: 0; left: var(--space-8); right: var(--space-8);
  height: 3px;
  background: var(--accent-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out-expo);
}
.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 101, 27, 0.32);
  box-shadow: var(--shadow-e3);
}
.why-card:hover::after { transform: scaleX(1); }

/* Big number watermark in the BOTTOM-right — fills empty space, never near the icon */
.why-card__num {
  position: absolute;
  bottom: -6px;
  right: var(--space-5);
  font-family: var(--font-display);
  font-size: 104px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: rgba(26, 39, 71, 0.20);
  pointer-events: none;
  z-index: 0;
}

/* Icon in a rounded badge (padding + bg applied to the inline SVG itself) */
.why-card__icon {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  box-sizing: content-box;
  width: 26px;
  height: 26px;
  padding: 15px;
  border-radius: 16px;
  background: var(--accent-orange-soft);
  color: var(--accent-orange);
  margin-bottom: var(--space-6);
  transition: background var(--dur-med) var(--ease-out-quart),
              color var(--dur-med) var(--ease-out-quart);
}
.why-card:hover .why-card__icon {
  background: var(--accent-orange);
  color: #fff;
}
.why-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.15;
  margin-bottom: var(--space-3);
  color: var(--heading);
}
.why-card__desc {
  position: relative;
  z-index: 1;
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 32ch;
}


/* ─────────────────── CTA BAND ─────────────────── */

.cta-band {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  padding: var(--section-y-lg) var(--space-6);
  position: relative;
  overflow: hidden;
}
.cta-band__inner {
  max-width: var(--container-text);
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.cta-band__lattice {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255,255,255,0.08) 1px, transparent 1.2px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}
.cta-band__accent {
  color: var(--accent-orange);
  font-style: italic;
}
.cta-band__sub {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.60);
  max-width: 48ch;
  margin: 0 auto var(--space-10);
  line-height: var(--leading-normal);
}
.cta-band__ctas {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.cta-band .btn--ghost {
  color: var(--text-inverse);
  border-color: rgba(255,255,255,0.20);
}
.cta-band .btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.40);
  color: var(--text-inverse);
}


/* Helpers for dark (navy) sections */
.text-muted-light { color: rgba(255,255,255,0.42); }
.eyebrow--light { color: var(--accent-orange); }
.eyebrow--light::before { background: var(--accent-orange); }

/* ─── EYEBROW SCRAMBLE REVEAL ─── */
/* Orange tick line extends in from the left when .is-revealed is added via JS */
.eyebrow[data-reveal-scramble]::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out-expo) 0.1s;
}
.eyebrow[data-reveal-scramble].is-revealed::before {
  transform: scaleX(1);
}
.chip--dark {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.86);
}
.btn--ghost-light {
  color: var(--text-inverse);
  border-color: rgba(255,255,255,0.22);
}
.btn--ghost-light:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.42);
  color: var(--text-inverse);
}


/* ─────────────────── FEATURED CAROUSEL ─────────────────── */

.carousel {
  --g: clamp(20px, 5vw, 120px);
  background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  color: var(--text-inverse);
  padding: var(--section-y-lg) 0;
  overflow: hidden;
}
.carousel__head {
  padding-inline: var(--g);
  margin-bottom: var(--space-12);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
}
.carousel__head .eyebrow { margin-bottom: var(--space-4); }
.carousel__title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-inverse);
}
.carousel__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  flex-shrink: 0;
}

.carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--g);
  padding-inline: var(--g);
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel__track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
}

.rcard {
  scroll-snap-align: start;
  flex: 0 0 340px;
  min-height: 300px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-med) var(--ease-out-expo),
              border-color var(--dur-med) var(--ease-out-quart),
              background var(--dur-med) var(--ease-out-quart);
}
.rcard:hover {
  transform: translateY(-5px);
  border-color: rgba(200,101,27,0.45);
  background: rgba(255,255,255,0.055);
}
.rcard__no {
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--accent-orange);
}
.rcard__name {
  font-family: var(--font-display);
  font-size: var(--text-heading-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.1;
  color: var(--text-inverse);
  margin-top: var(--space-4);
}
.rcard__desc {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: rgba(255,255,255,0.58);
  margin-top: var(--space-3);
  flex-grow: 1;
}
.rcard__brands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.rcard__brands span {
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.70);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
.rcard--cta {
  justify-content: space-between;
  background: linear-gradient(160deg, rgba(200,101,27,0.16), rgba(200,101,27,0.04));
  border-color: rgba(200,101,27,0.30);
}
.rcard--cta .rcard__name { margin-top: 0; }


/* ─────────────────── GLOBAL PRESENCE ─────────────────── */

.globe {
  background: linear-gradient(150deg, var(--navy-deep) 0%, #14213f 60%, var(--navy-mid) 100%);
  color: var(--text-inverse);
  padding: var(--section-y-lg) var(--space-6);
  overflow: hidden;
}
.globe__inner {
  max-width: var(--container-base);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
}
.globe__copy { max-width: 840px; }
.globe__copy .eyebrow { margin-bottom: var(--space-4); }
.globe__title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-inverse);
  margin-bottom: var(--space-5);
}
.globe__lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: rgba(255,255,255,0.58);
  max-width: 60ch;
  margin: 0 auto var(--space-6);
}
.globe__countries {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  max-width: 760px;
  margin: 0 auto var(--space-8);
}
.globe__map { width: 100%; max-width: 680px; }
.globe__svg { width: 100%; height: auto; display: block; overflow: visible; }

@keyframes hqPulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.6); }
}
.hq-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: hqPulse 2.6s var(--ease-out-quart) infinite;
}
.hq-ring--2 { animation-delay: 0.9s; }
.globe__dots .dot {
  transform-box: fill-box;
  transform-origin: center;
}


/* ─────────────────── TESTIMONIALS ─────────────────── */

.quotes {
  background: var(--bg-sunken);
  padding: var(--section-y-lg) var(--space-6);
}
.quotes__inner {
  max-width: var(--container-bleed);
  margin-inline: auto;
}
.quotes__head { margin-bottom: var(--space-16); }
.quotes__head .eyebrow { margin-bottom: var(--space-4); }
.quotes__title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--heading);
}
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.qcard {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-med) var(--ease-out-expo),
              border-color var(--dur-med) var(--ease-out-quart),
              box-shadow var(--dur-med) var(--ease-out-quart);
}
.qcard:hover {
  transform: translateY(-4px);
  border-color: rgba(200,101,27,0.30);
  box-shadow: var(--shadow-e3);
}
.qcard__mark {
  color: var(--accent-orange);
  opacity: 0.35;
  margin-bottom: var(--space-4);
}
.qcard__quote {
  font-size: var(--text-body-lg);
  line-height: var(--leading-loose);
  color: var(--text-primary);
  flex-grow: 1;
}
.qcard__by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.qcard__avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}
.qcard__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--text-body-sm);
}
.qcard__meta strong {
  font-weight: var(--weight-semibold);
  color: var(--heading);
}
.qcard__meta span { color: var(--text-tertiary); }


/* ─────────────────── INDUSTRIES WE SERVE ─────────────────── */

.industries {
  padding: var(--section-y-lg) var(--space-6);
  background: var(--bg-sunken);
}
.industries__inner {
  max-width: var(--container-bleed);
  margin-inline: auto;
}
.industries__head { margin-bottom: var(--space-14); max-width: var(--container-text); }
.industries__head .eyebrow { margin-bottom: var(--space-4); }
.industries__title {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--heading);
  margin-bottom: var(--space-5);
}
.industries__lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 56ch;
}
.industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.ind-tile {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out-expo),
              border-color var(--dur-med) var(--ease-out-quart),
              box-shadow var(--dur-med) var(--ease-out-quart);
}
.ind-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 101, 27, 0.30);
  box-shadow: var(--shadow-e3);
}
/* big faded watermark number, bottom-right (fills space, matches other cards) */
.ind-tile__no {
  position: absolute;
  bottom: -16px;
  right: var(--space-4);
  font-family: var(--font-display);
  font-size: 112px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: rgba(26, 39, 71, 0.18);
  pointer-events: none;
  z-index: 0;
}
/* sub-supply tag chips */
.ind-tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-5);
}
.ind-tile__tags span {
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(44, 62, 107, 0.05);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.ind-tile:hover .ind-tile__tags span { border-color: rgba(200, 101, 27, 0.25); }
/* keep all content above the watermark number */
.ind-tile__icon,
.ind-tile__name,
.ind-tile__desc,
.ind-tile__tags { position: relative; z-index: 1; }
.ind-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--accent-orange-soft);
  color: var(--accent-orange);
  margin-bottom: var(--space-6);
  transition: background var(--dur-med) var(--ease-out-quart),
              color var(--dur-med) var(--ease-out-quart);
}
.ind-tile:hover .ind-tile__icon {
  background: var(--accent-orange);
  color: #fff;
}
.ind-tile__name {
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--heading);
  margin-bottom: var(--space-2);
}
.ind-tile__desc {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-width: 34ch;
}


/* ─────────────────── FAQ ─────────────────── */

.faq {
  padding: var(--section-y-lg) var(--space-6);
  background: linear-gradient(160deg, var(--navy-deep) 0%, #14213f 70%, var(--navy-mid) 100%);
  color: var(--text-inverse);
}
.faq__inner { max-width: var(--container-text); margin-inline: auto; }
.faq__head { max-width: 58ch; margin-bottom: var(--space-12); }
.faq__title {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 900;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-top: var(--space-3);
}

.faq__list { border-top: 1px solid var(--border-inverse); }
.faq__item { border-bottom: 1px solid var(--border-inverse); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 700;
  color: var(--text-inverse);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.faq__q:hover { color: var(--accent-orange); }
.faq__q:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 4px; }

.faq__icon {
  flex-shrink: 0;
  color: var(--accent-orange);
  transition: transform var(--dur-med) var(--ease-out-expo);
}
.faq__item.is-open .faq__icon { transform: rotate(135deg); }

/* Height is animated by GSAP (js/main-v2.js) — the 0 here is just the closed
   rest state so there's no flash of full content before JS initialises. */
.faq__a { height: 0; overflow: hidden; opacity: 0; }
.faq__a p {
  padding-bottom: var(--space-6);
  padding-right: var(--space-10);
  font-size: var(--text-body-md);
  line-height: var(--leading-loose);
  color: rgba(255, 255, 255, 0.6);
  max-width: 62ch;
}


/* ─────────────────── HOW WE WORK (PROCESS) ─────────────────── */

.process {
  padding: var(--section-y-lg) var(--space-6);
  background: linear-gradient(160deg, var(--navy-deep) 0%, #14213f 70%, var(--navy-mid) 100%);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}
/* faint blueprint grid behind the process */
.process::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 75%);
  pointer-events: none;
}
.process__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.process__head { text-align: center; margin-bottom: var(--space-16); }
.process__head .eyebrow { margin-bottom: var(--space-4); justify-content: center; }
.process__title {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-inverse);
  margin-bottom: var(--space-5);
}
.process__lead {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.58);
  max-width: 56ch;
  margin: 0 auto;
  line-height: var(--leading-normal);
}
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  position: relative;
}
/* the connecting rail behind the nodes */
.process__rail {
  position: absolute;
  top: 32px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(200,101,27,0.5) 12%,
    rgba(200,101,27,0.5) 88%,
    transparent);
}
.pstep {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pstep__desc { max-width: 30ch; }
.pstep__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--navy-deep);
  border: 2px solid rgba(200,101,27,0.6);
  color: var(--accent-orange);
  margin-bottom: var(--space-5);
  transition: background var(--dur-med) var(--ease-out-quart),
              color var(--dur-med) var(--ease-out-quart),
              border-color var(--dur-med) var(--ease-out-quart);
}
.pstep:hover .pstep__node {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #fff;
}
.pstep__code {
  font-family: var(--font-mono), monospace;
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  color: var(--accent-orange);
  margin-bottom: var(--space-2);
}
.pstep__title {
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--text-inverse);
  margin-bottom: var(--space-2);
}
.pstep__desc {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: rgba(255,255,255,0.55);
}


/* ─────────────────── FOOTER ─────────────────── */

.footer {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}

/* Marquee strip */
.footer__marquee {
  border-top: 1px solid var(--border-inverse);
  border-bottom: 1px solid var(--border-inverse);
  padding: var(--space-6) 0;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  will-change: transform;
  font-family: var(--font-display);
  font-size: var(--text-heading-2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: rgba(255,255,255,0.30);
}
.marquee__track:hover { animation-play-state: paused; }
.marquee__item { transition: color var(--dur-fast) var(--ease-out-quart); }
.marquee__item:hover { color: rgba(255,255,255,0.85); }
.marquee__sep { color: var(--accent-orange); opacity: 0.55; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Main footer body */
.footer__main {
  max-width: var(--container-bleed);
  margin-inline: auto;
  padding: var(--space-20) var(--space-6) var(--space-12);
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: var(--space-16);
}

.footer__brand-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 0.9;
  color: rgba(255,255,255,0.92);
}
.footer__wordmark-sub {
  display: block;
  margin-top: var(--space-2);
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--accent-orange);
}
.footer__tagline {
  font-size: var(--text-body-md);
  color: rgba(255,255,255,0.50);
  line-height: var(--leading-normal);
  max-width: 32ch;
}

.footer__newsletter {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-pill);
  padding: 4px 4px 4px var(--space-4);
  max-width: 380px;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart);
}
.footer__newsletter:focus-within {
  border-color: var(--accent-orange);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 4px rgba(200,101,27,0.12);
}
.footer__newsletter-cap {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-mono), monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.40);
}
.footer__newsletter button.is-done {
  background: #1f9d55;
}
.footer__newsletter input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  /* 16px, not --text-body-sm (14px) — anything smaller triggers iOS Safari's
     auto-zoom on focus */
  font-size: 16px;
  color: var(--text-inverse);
  padding: var(--space-2) 0;
  min-width: 0;
}
.footer__newsletter input::placeholder { color: rgba(255,255,255,0.35); }
.footer__newsletter button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  background: var(--accent-orange);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  transition: background var(--dur-fast) var(--ease-out-quart);
}
.footer__newsletter button:hover { background: var(--accent-orange-hover); }
.footer__newsletter-msg {
  font-size: var(--text-body-sm);
  color: var(--accent-orange);
  margin-top: var(--space-2);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-med) var(--ease-out-expo);
}
.footer__newsletter-msg.is-shown {
  opacity: 1;
  transform: none;
}

/* 4-column mega menu */
.footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.footer__col h3 {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-5);
}
.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__col a {
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.78);
  transition: color var(--dur-fast) var(--ease-out-quart);
  display: inline-block;
  padding: 6px 0;
  margin: -6px 0;
}
.footer__col a:hover { color: var(--accent-orange); }
.footer__contact li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.78);
  line-height: var(--leading-snug);
}
.footer__contact-label {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}

/* Footer bottom row */
.footer__bottom {
  max-width: var(--container-bleed);
  margin-inline: auto;
  padding: var(--space-6);
  border-top: 1px solid var(--border-inverse);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}
.footer__copy { text-align: left; }
.footer__loc  { text-align: right; }
.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: center;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: rgba(255,255,255,0.65);
  transition: color var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart);
}
.footer__social a:hover {
  color: var(--accent-orange);
  background: rgba(255,255,255,0.04);
}


/* ═══════════════════════════════════════════════════════
   SECONDARY PAGES — PREMIUM ELEMENT UPGRADES
   ═══════════════════════════════════════════════════════ */

/* ── Page Hero ── */
.page-hero {
  background: var(--navy-deep);
}
.page-hero::before {
  top: 0; right: 0; width: 100%; height: 100%; border-radius: 0;
  background: radial-gradient(ellipse at 68% 40%, rgba(200,101,27,0.16) 0%, transparent 55%),
              radial-gradient(ellipse at 10% 100%, rgba(44,62,107,0.45) 0%, transparent 50%);
}
.page-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: var(--space-5);
}
.page-hero-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent-orange);
  border-radius: 1px;
  flex-shrink: 0;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 7.5vw, 84px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}
.page-hero p {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.75;
  max-width: 580px;
}

/* ── Stats Bar ── */
.stats-bar {
  background: linear-gradient(135deg, var(--accent-orange) 0%, #A9530F 100%);
  padding: var(--space-10) 0;
}
.stats-bar .container {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
}
.stats-bar .stat {
  text-align: center;
  padding: var(--space-4) var(--space-8);
  border-right: 1px solid rgba(255,255,255,0.22);
  flex: 1;
  min-width: 130px;
}
.stats-bar .stat:last-child { border-right: none; }
.stats-bar .stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
}
.stats-bar .stat-lbl {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Section Labels & Titles ── */
.sec-label {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--accent-orange) !important;
  margin-bottom: var(--space-3) !important;
}
.sec-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  flex-shrink: 0;
}
.sec-title {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 4vw, 50px) !important;
  font-weight: 900 !important;
  color: var(--navy-ink) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: var(--space-4) !important;
}
.sec-title span { color: var(--accent-orange) !important; }
.sec-sub {
  font-size: var(--text-body-md);
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 58ch;
}

/* ── Product Cards ── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}
.pcard {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--dur-med) var(--ease-out-quart),
              box-shadow var(--dur-med) var(--ease-out-quart),
              transform var(--dur-med) var(--ease-out-expo);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.pcard:hover {
  border-color: rgba(200,101,27,0.3);
  box-shadow: 0 8px 36px rgba(200,101,27,0.1), 0 2px 8px rgba(0,0,0,0.05);
  transform: translateY(-3px);
}
.pcard-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(200,101,27,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent-orange);
  margin-bottom: var(--space-4);
  transition: background var(--dur-med) var(--ease-out-quart),
              color var(--dur-med) var(--ease-out-quart);
}
.pcard:hover .pcard-icon { background: var(--accent-orange); color: #fff; }
.pcard-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-ink);
  margin-bottom: var(--space-2);
}
.pcard-makes {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.pcard-types { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ptype {
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-page);
  color: var(--accent-navy);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.pcard:hover .ptype { border-color: rgba(200,101,27,0.25); }
.pcard-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.72;
}

/* ── Tab Buttons ── */
.tab-btn {
  font-family: var(--font-display) !important;
  border-radius: var(--radius-md) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  background: #fff !important;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart) !important;
}
.tab-btn:hover {
  border-color: var(--accent-orange) !important;
  color: var(--accent-orange) !important;
  background: rgba(200,101,27,0.04) !important;
}
.tab-btn.active {
  background: var(--accent-orange) !important;
  border-color: var(--accent-orange) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(200,101,27,0.35) !important;
}

/* ── Elec & Other badges ── */
.elec-badge {
  background: var(--bg-page) !important;
  color: var(--navy-ink) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  border: 1px solid var(--border-subtle) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart) !important;
  cursor: default;
}
.elec-badge:hover {
  border-color: rgba(200,101,27,0.4) !important;
  color: var(--accent-orange) !important;
}
.other-item {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart) !important;
  cursor: default;
}

/* ── Values Cards ── */
.val-card {
  border-radius: var(--radius-lg) !important;
  padding: var(--space-7) var(--space-6) !important;
  transition: transform var(--dur-med) var(--ease-out-expo),
              border-color var(--dur-med) var(--ease-out-quart),
              box-shadow var(--dur-med) var(--ease-out-quart) !important;
  cursor: default;
}
.val-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(200,101,27,0.28) !important;
  box-shadow: 0 8px 32px rgba(200,101,27,0.1), 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* ── Contact form elements ── */
.cf-field input, .cf-field textarea, .cf-field select {
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--border-subtle) !important;
  transition: border-color var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart) !important;
}
.cf-field input:focus, .cf-field textarea:focus {
  outline: none;
  border-color: var(--accent-orange) !important;
  box-shadow: 0 0 0 3px rgba(200,101,27,0.12) !important;
}

/* ── Secondary CTA Band ── */
.sec-cta-band {
  background: var(--navy-deep);
  padding: var(--space-20) var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sec-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(200,101,27,0.22) 0%, transparent 60%);
  pointer-events: none;
}
.sec-cta-band__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-inline: auto;
}
.sec-cta-band__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: var(--space-4);
}
.sec-cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}
.sec-cta-band__sub {
  font-size: var(--text-body-md);
  color: rgba(255,255,255,0.58);
  line-height: 1.75;
  margin-bottom: var(--space-8);
  max-width: 500px;
  margin-inline: auto;
}
.sec-cta-band__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* btn--ghost for CTA band secondary action */
.btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.82);
}
.btn--ghost:hover {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
  background: rgba(255,255,255,0.06);
}

/* ─────────────────── RESPONSIVE ─────────────────── */

@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__actions { display: none; }
  .nav__burger { display: block; }

  .hero__title { max-width: 18ch; }

  .statband__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--space-8); }

  .about__head { margin-bottom: var(--space-10); }
  .about__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .about__card { order: -1; }

  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .why-card { min-height: 240px; }

  .quotes__grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }

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

  .process__steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-12) var(--space-8); }
  .process__rail { display: none; }

  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "trans trans"
      "fast  fast"
      "elec  steel"
      "tools tools"
      "cat   cat";
  }
  .bento-card--lg .bento-card__title,
  .bento > :nth-child(1) .bento-card__title { font-size: var(--text-heading-1); }

  .footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

@media (max-width: 720px) {
  /* ── Nav ── */
  .nav[data-state="hero"] .nav__logo { height: 66px; }
  .nav[data-state="over-dark"] .nav__logo,
  .nav[data-state="over-light"] .nav__logo { height: 58px; }

  /* ── Hero ── */
  .hero {
    padding-top: calc(var(--space-20) + var(--space-4)); /* 96px — clears 66px nav */
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-12);
  }
  .hero__content { padding-left: 0; }     /* remove asymmetric left indent */
  .hero__scroll-hint { display: none; }   /* no room on mobile */
  .hero__cog-wrap {
    right: -12vw;
    width: clamp(280px, 90vw, 500px);
    opacity: 0.8;                          /* tone down on small screens */
  }

  /* ── Statband ── */
  .statband { padding: var(--space-12) var(--space-5); }
  .statband__inner { gap: var(--space-8); }
  .statband__num { font-size: clamp(36px, 11vw, 52px); }

  /* ── Categories ── */
  .categories { padding: var(--section-y-md) var(--space-4); }
  .categories__head { margin-bottom: var(--space-10); }
  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "trans"
      "fast"
      "elec"
      "steel"
      "tools"
      "cat";
    gap: var(--space-2);
  }
  .bento-card__inner { padding: var(--space-5) var(--space-5) var(--space-6); }
  /* The stat + divider + marquee + "Browse" link don't fit one row on mobile —
     the marquee is decorative (aria-hidden) so it's the first to go; stack
     the remaining stat/link instead of letting the row overflow and get
     clipped by .bento-card--cta's own overflow:hidden. */
  .bento-cta__body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
  }
  .bento-cta__divider,
  .bento-cta__marquee-wrap { display: none; }
  .bento-card__no { font-size: 80px; }             /* reduce watermark on mobile */
  .bento-card--lg .bento-card__no { font-size: 96px; }

  /* Card description copy sitewide sits at --text-body-sm (14px) — a touch
     under comfortable reading size on mobile. Bumped here rather than at the
     token level since --text-body-sm is also used for non-body UI chrome
     (tags, meta text) that shouldn't grow. */
  .rcard__desc, .ind-tile__desc, .why-card__desc, .pstep__desc { font-size: 15px; }

  /* ── Carousel ── */
  .carousel { padding: var(--section-y-md) 0; }
  .carousel__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    padding-left: var(--space-4);          /* align with body padding */
  }
  .carousel__hint { display: none; }
  .rcard { flex-basis: 82vw; min-height: 0; padding: var(--space-6); }

  /* ── Industries ── */
  .industries { padding: var(--section-y-md) var(--space-4); }
  .industries__head { margin-bottom: var(--space-10); }
  .industries__grid { grid-template-columns: 1fr; }
  .ind-tile__no { font-size: 80px; }              /* reduce watermark on mobile */

  /* ── About ── */
  .about { padding: var(--section-y-md) var(--space-4); }
  .about__card { padding: var(--space-8); }

  /* ── Globe ── */
  .globe { padding: var(--section-y-md) var(--space-4); }
  .globe__inner { gap: var(--space-6); }
  .globe__map { max-width: 100%; }        /* fill full width on mobile */

  /* ── Why ── */
  .why { padding: var(--section-y-md) var(--space-4); }
  .why__head { margin-bottom: var(--space-10); }
  .why__grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .why-card { min-height: 0; padding: var(--space-6); }
  .why-card__num { font-size: 80px; }             /* reduce watermark on mobile */

  /* ── Process ── */
  .process { padding: var(--section-y-md) var(--space-4); }
  .process__head { margin-bottom: var(--space-10); }
  .process__steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .pstep { align-items: flex-start; text-align: left; } /* left-aligned in single col */
  .pstep__desc { max-width: 100%; }

  /* ── Quotes ── */
  .quotes { padding: var(--section-y-md) var(--space-4); }
  .quotes__head { margin-bottom: var(--space-10); }

  /* ── CTA Band ── */
  .cta-band { padding: var(--section-y-md) var(--space-4); }

  /* ── Footer ── */
  .footer__main {
    padding: var(--space-14) var(--space-4) var(--space-10);
  }
  .footer__newsletter {
    max-width: 100%;           /* was fixed 380px — fills column on mobile */
  }
  .footer__columns {
    grid-template-columns: 1fr 1fr;  /* 2-col still works at 720px */
    gap: var(--space-8);
  }
  .footer__bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer__copy, .footer__loc { text-align: center; }
  .footer__social { justify-self: center; }
}

/* ────────────── 480PX — NARROW PHONES (iPhone SE, Galaxy A) ────────────── */
@media (max-width: 480px) {
  /* Hero: a little less top padding on very short/narrow screens */
  .hero {
    padding-top: calc(var(--space-16) + var(--space-4)); /* 80px */
    padding-bottom: var(--space-10);
  }

  /* Eyebrow line: shorter on very narrow */
  .eyebrow::before { width: 28px; }

  /* Statband: stack to 1 column */
  .statband__inner { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .statband__item { padding-left: var(--space-4); }

  /* Bento cards: even tighter */
  .bento-card__inner { padding: var(--space-4) var(--space-4) var(--space-5); }

  /* Process node: slightly smaller */
  .pstep__node { width: 52px; height: 52px; }

  /* Footer: single column link grid */
  .footer__columns { grid-template-columns: 1fr; gap: var(--space-6); }

  /* Footer newsletter: wrap the input+button stacked */
  .footer__newsletter {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .footer__newsletter input {
    padding: var(--space-3) var(--space-2);
  }
  .footer__newsletter button {
    border-radius: var(--radius-md);
    justify-content: center;
    width: 100%;
    padding: 10px var(--space-4);
  }

  /* Footer bottom: tighter */
  .footer__bottom { padding: var(--space-4); }

  /* Why cards: slightly less padding */
  .why-card { padding: var(--space-5); }

  /* rcard: wider on very narrow */
  .rcard { flex-basis: 88vw; padding: var(--space-5); }
}


/* ═══════════════════════════════════════════════════════
   PHOTOGRAPHY LAYERS (populated by js/imageLoader.js)

   Every [data-img] element is an empty box until the loader
   injects an <img>. If the manifest is missing the loader
   removes the box entirely, so these rules simply stop
   applying and each section renders as it did before
   photography existed.
   ═══════════════════════════════════════════════════════ */

[data-img] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
[data-img] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Shimmer skeleton — navy base with a sweeping highlight, shown
   only while an image is in flight. */
[data-img].is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,0)    20%,
      rgba(255,255,255,0.07) 45%,
      rgba(255,255,255,0)    70%)
    var(--navy-ink);
  background-size: 220% 100%;
  animation: img-shimmer 1.5s ease-in-out infinite;
}
[data-img].is-loaded::before { content: none; }

@keyframes img-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* Dev-only marker — appears when a category's image has been swapped locally
   via photo-picker.html (localStorage 'mbk-photo-overrides' or a live
   BroadcastChannel message), so it never reads as a real, shipped choice.
   Appended as a SIBLING of [data-img] (see imageLoader.js badgeHost()), not
   a child of it — [data-img] sits at the same low z-index tier as the photo
   itself (0), below each context's real foreground content (co-card text at
   1, .page-hero-inner at 2). A child can never outrank its own ancestor's
   tier no matter its own z-index, so living inside [data-img] left it
   rendering under the card title. z-index:5 here clears every tier above. */
.live-preview-badge {
  /* !important on position + z-index: products.html's own inline
     .co-card > *:not(.co-card__media) rule (0,2,0 specificity, and it loads
     after this external stylesheet besides) also matches this badge — it's
     a direct child of .co-card that isn't .co-card__media — and sets
     position:relative + z-index:1. Without !important that rule wins,
     silently turning this into an in-flow relative box (appearing near the
     bottom of the card, after all its real content, and — worse — actually
     taking up layout space instead of floating over it). Confirmed via the
     live matched-rules list, not guessed. Both properties need !important;
     top/right have no competing rule so they don't. */
  position: absolute !important;
  top: 10px;
  right: 10px;
  z-index: 5 !important;
  background: var(--accent-orange);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  pointer-events: none;
}

/* ── Homepage hero ──
   .hero has isolation:isolate with lattice at -2 and cog at -1,
   so -3 tucks the photo behind both without escaping the section. */
.hero__photo { z-index: -3; }
/* Two-axis scrim. The vertical pass sets the mood; the horizontal pass
   is what guarantees legibility — all hero copy is left-aligned, so the
   left edge is darkened hardest and the photo stays visible on the right.
   Measured: at full strength this lifts body copy from 2.78:1 to
   comfortably past 4.5:1 even against a pure-white photo region — the
   opacity below scales that same calibrated shape down uniformly rather
   than hand-tuning each stop, so it stays smoothly animatable on hover. */
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(15,20,40,0.92) 0%,
      rgba(15,20,40,0.72) 45%,
      rgba(15,20,40,0.30) 100%),
    linear-gradient(to bottom,
      rgba(15,20,40,0.62) 0%,
      rgba(15,20,40,0.88) 100%);
  opacity: 0.8;
  transition: opacity var(--dur-med) var(--ease-out-quart);
}
.hero:hover .hero__photo::after { opacity: 0.55; }
/* Touch devices never fire :hover, so without this the brighter state above
   is simply unreachable on mobile — show it as the permanent default there
   instead of gating it behind an interaction that can't happen. */
@media (hover: none) {
  .hero__photo::after { opacity: 0.55; }
}

/* ── Subpage heroes (about / global / contact / products) ──
   .page-hero::before already carries the radial tint; it and the
   content are lifted above the new photo layer. */
.page-hero__photo { z-index: 0; }
/* Same two-axis approach as the homepage hero — see note above. */
.page-hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(15,20,40,0.92) 0%,
      rgba(15,20,40,0.72) 45%,
      rgba(15,20,40,0.30) 100%),
    linear-gradient(to bottom,
      rgba(15,20,40,0.62) 0%,
      rgba(15,20,40,0.88) 100%);
  opacity: 0.8;
  transition: opacity var(--dur-med) var(--ease-out-quart);
}
.page-hero:hover .page-hero__photo::after { opacity: 0.55; }
@media (hover: none) {
  .page-hero__photo::after { opacity: 0.55; }
}
.page-hero::before { z-index: 1; }
.page-hero-inner   { z-index: 2; }

/* ── Footer photo attribution ──
   Its own row: .footer__bottom is a 1fr/auto/1fr grid, so this can't
   live inside it without breaking that three-column balance. */
/* Visible-but-subtle SEO copy — same quiet tier as the photo credit line
   right below it, not a banner. Deliberately placed after the real NAP/
   nav footer content, never before it. */
.footer__seo-text {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-5);
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,0.32);
}

.footer__photo-credit {
  max-width: var(--container-bleed);
  margin-inline: auto;
  padding: 0 var(--space-6) var(--space-6);
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.30);
  letter-spacing: 0.01em;
}
.footer__photo-credit a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}
.footer__photo-credit a:hover {
  color: var(--accent-orange);
  border-bottom-color: var(--accent-orange);
}


/* ─────────────────── REDUCED MOTION OVERRIDES ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; }
  .hero__scroll-line { animation: none; opacity: 0.4; }
  [data-reveal] { opacity: 1; transform: none; }
  [data-img].is-loading::before { animation: none; }
}