/* GlobalXGears — base + layout primitives */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gx-bg);
  color: var(--gx-text-2);
  font-family: var(--gx-font);
  font-size: var(--gx-fs-body);
  line-height: var(--gx-lh-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, p { margin: 0; }

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

/* In-page jumps glide instead of snapping, and every anchor target clears
   the sticky header rather than landing under it. Motion off -> instant. */
html { scroll-behavior: smooth; }
:target,
[id]:where(section, main, div, form, h1, h2, h3) {
  scroll-margin-top: calc(var(--gx-header-h) + var(--gx-space-6));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.gx-wrap {
  width: 100%;
  max-width: calc(var(--gx-container) + var(--gx-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gx-gutter);
}

.gx-eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-eyebrow);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-eyebrow);
  text-transform: uppercase;
}

.gx-skip {
  position: absolute; left: -9999px;
  background: var(--gx-lime); color: var(--gx-bg-ink);
  padding: var(--gx-space-3) var(--gx-space-5); z-index: 100;
}
.gx-skip:focus { left: var(--gx-gutter); top: var(--gx-space-3); }

/* ---------- HEADER ------------------------------------------------ */

/* WordPress wraps every template part in an element of its own, and a sticky
   element can only travel inside its parent's box. That wrapper is exactly the
   header's height, so there was nowhere to stick: the header scrolled away
   with it. The prototype has no such wrapper, which is why it only shows up
   once the markup is a block theme — this selector matches nothing here.
   display:contents removes the wrapper's box without touching the header, so
   the containing block becomes the page and sticky behaves. */
header.wp-block-template-part { display: contents; }

/* Logged in, WordPress puts a 32px fixed bar above everything; a header stuck
   at 0 would sit underneath it. Below 783px the bar scrolls with the page, so
   no offset is wanted there. */
body.admin-bar .gx-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .gx-header { top: 0; }
}

.gx-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--gx-header-h);
  background: var(--gx-bg-header);
  border-bottom: 1px solid var(--gx-border-header);
  backdrop-filter: saturate(140%) blur(8px);
}

.gx-header__inner {
  height: 100%;
  display: flex; align-items: center;
  gap: var(--gx-space-10);
}

.gx-header__logo { flex: none; width: 235px; }
.gx-header__logo img { width: 100%; height: auto; }

/* [FIX] Figma positions these absolutely with gaps of 65-160px.
   One even gap instead — see BUILD-SPEC §2. */
.gx-nav__list {
  display: flex; align-items: center;
  gap: var(--gx-nav-gap);
  margin: 0; padding: 0; list-style: none;
}

.gx-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gx-text-nav);
  font-size: var(--gx-fs-nav);          /* [DEV] 10px -> 12px */
  font-weight: var(--gx-fw-medium);
  letter-spacing: var(--gx-ls-nav);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--gx-dur-fast) var(--gx-ease-out);
}
.gx-nav__link:hover,
.gx-nav__link[aria-current="page"],
.gx-nav__link[aria-expanded="true"] { color: var(--gx-lime); }

.gx-nav__caret { flex: none; width: 12px; height: 7px; transition: transform var(--gx-dur-fast) var(--gx-ease-out); }
.gx-nav__link[aria-expanded="true"] .gx-nav__caret { transform: rotate(180deg); }

.gx-header__cta { margin-left: auto; flex: none; }

/* ---------- HERO --------------------------------------------------- */

.gx-hero {
  position: relative;
  min-height: 790px;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--gx-bg);
}

/* Lives inside .gx-hero__inner so the mobile frame can stack it between the
   body copy and the CTAs. .gx-hero__inner is the 1512-frame wrap, so right:0
   is the same edge the absolute rule used to pin to. */
.gx-hero__media {
  position: absolute; top: -40px; right: 0;
  width: 822px; max-width: 60%;
  pointer-events: none;
}
.gx-hero__media img { width: 100%; height: auto; }
/* The photograph carries its own ground rather than transparency, so its
   rectangle could show — but measured, that ground is rgb(0,9,19) against the
   page's rgb(5,11,18), which is the same colour to the eye, and the box does
   not read as one. An edge fade was tried here and removed: it covered the
   picture rather than its border, and chasing it was not worth the risk of
   leaving the hero worse than it is. If a seam ever shows on a brighter
   screen, fade the media's outer 90px rather than washing the whole box. */

/* Figma "Hero Left Gradient": 360px wide, ground -> transparent */
.gx-hero__scrim {
  position: absolute; inset-block: 0;
  left: max(34.4%, calc((100% - var(--gx-shell)) / 2 + 520px));
  width: 360px;
  background: linear-gradient(to right, var(--gx-bg), rgb(from var(--gx-bg) r g b / 0));
  pointer-events: none;
}

.gx-hero__inner { position: relative; z-index: 2; padding-block: var(--gx-space-24); }

.gx-hero__title {
  margin-top: var(--gx-space-6);
  max-width: 690px;
  color: var(--gx-text);
  font-size: var(--gx-fs-display);
  font-weight: var(--gx-fw-semibold);
  line-height: var(--gx-lh-display);
  letter-spacing: var(--gx-ls-display);
  text-transform: uppercase;
}
.gx-hero__title em { font-style: normal; color: var(--gx-accent); }

.gx-hero__lead {
  margin-top: var(--gx-space-8);
  max-width: 569px;
  font-size: 20px;
  line-height: 1.5;
}

.gx-hero__actions {
  margin-top: var(--gx-space-10);
  display: flex; flex-wrap: wrap; gap: var(--gx-space-4);
}

.gx-hero__meta {
  margin-top: var(--gx-space-16);
  display: flex; flex-wrap: wrap; gap: var(--gx-space-3) var(--gx-space-6);
  font-size: var(--gx-fs-sm);
  letter-spacing: var(--gx-ls-label);
  text-transform: uppercase;
}
/* The ISO credential leads this line rather than sitting level with the
   services beside it. The review asked for it to carry roughly twice the
   presence it had: at the same 14px as the list that follows, it read as one
   more item rather than as the certification the company holds. 24px against
   the 14px beside it, with the tracking eased back — letter-spacing tuned for
   a small uppercase label is too loose once the label is this size. One
   number to change if it wants more or less.

   flex-basis: 100% keeps it on its own line, so the services read as a
   caption under it instead of competing along the same baseline. */
.gx-hero__meta b {
  flex-basis: 100%;
  color: var(--gx-accent);
  font-size: 24px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .6px;
}
.gx-hero__meta span { color: var(--gx-text-3); font-weight: var(--gx-fw-medium); }

/* ---------- TRUST STRIP -------------------------------------------- */

.gx-trust { background: var(--gx-gradient-strip); }
.gx-trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: var(--gx-space-12);
}
.gx-trust__item {
  display: flex; gap: var(--gx-space-5);
  padding-inline: var(--gx-space-8);
}
.gx-trust__item + .gx-trust__item { border-left: 1px solid var(--gx-divider); }
.gx-trust__item:first-child { padding-left: 0; }
.gx-trust__icon { flex: none; width: 34px; height: 34px; }
/* The four trust-strip icons were never supplied (assets/ASSETS-NEEDED.md), so
   these slots are empty — and an empty slot still reserves its width and the
   flex gap beside it. On mobile that left every line of the strip indented
   44px into blank space while every other section on the page started at the
   gutter; the client saw it as the section being inset further than the rest.
   Collapsed while empty, and the moment an icon is put in one it comes back. */
.gx-trust__icon:empty { display: none; }
.gx-trust__title {
  color: var(--gx-text);
  font-size: var(--gx-fs-label);
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-trust__body {
  margin-top: var(--gx-space-2);
  color: var(--gx-text-3);
  font-size: 20px;
  line-height: 1.5;
}

/* ---------- M2: hero fade-in-up stagger ---------------------------- */

.gx-reveal > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--gx-dur-slow) var(--gx-ease-out),
              transform var(--gx-dur-slow) var(--gx-ease-out);
}
.gx-reveal.is-in > * { opacity: 1; transform: none; }
.gx-reveal.is-in > *:nth-child(1) { transition-delay: calc(var(--gx-stagger) * 0); }
.gx-reveal.is-in > *:nth-child(2) { transition-delay: calc(var(--gx-stagger) * 1); }
.gx-reveal.is-in > *:nth-child(3) { transition-delay: calc(var(--gx-stagger) * 2); }
.gx-reveal.is-in > *:nth-child(4) { transition-delay: calc(var(--gx-stagger) * 3); }
.gx-reveal.is-in > *:nth-child(5) { transition-delay: calc(var(--gx-stagger) * 4); }

/* No JS: content is visible, never gated behind a class. */
.no-js .gx-reveal > *,
html:not(.js) .gx-reveal > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gx-reveal > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- Breakpoints -------------------------------------------- */

@media (max-width: 1200px) {
  :root { --gx-gutter: var(--gx-space-10); --gx-nav-gap: var(--gx-space-6); }
  .gx-hero__media { max-width: 50%; opacity: 0.55; }
  .gx-hero__scrim { display: none; }
}

@media (max-width: 900px) {
  .gx-trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gx-space-8); }
  .gx-trust__item:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 768px) {
  :root {
    --gx-gutter: var(--gx-space-5);
    --gx-fs-display: 34px;
    --gx-lh-display: 38px;
    --gx-ls-display: -1px;
  }
  .gx-hero { min-height: 0; }
  .gx-hero__media { position: static; width: 100%; max-width: none; opacity: 1; margin-top: var(--gx-space-8); }
  .gx-hero__inner { padding-block: var(--gx-space-12); }
  .gx-trust__grid { grid-template-columns: 1fr; }
  .gx-trust__item { padding-inline: 0; border-left: 0 !important; }
}

/* ---------- C1: header mega menu ------------------------------------
   Figma runs a lot of this panel at 9-11px. The 12px floor from the client's
   feedback applies here too, so the panel is taller than the 650px in the
   design — it grows to fit rather than shrinking the type back down. That is a
   deliberate consequence of the floor, flagged in BUILD-SPEC §2.
   -------------------------------------------------------------------- */

.gx-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--gx-bg);
  border-top: 1px solid var(--gx-map-border);
  box-shadow: 0 10px 30px -4px rgb(from var(--gx-shadow) r g b / 0.14);
}
.gx-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 592px;
  gap: var(--gx-space-16) 60px;
  /* Block padding only. The panel is a .gx-wrap, so its inline padding is the
     page gutter — a shorthand here would override that and the panel content
     would sit 32px left of the logo it is meant to line up with. The client
     reported exactly that. This file is the transfer script's input, so the
     fix belongs here: made in the theme's copy alone it is reverted the next
     time theme_assets.py runs, which is how it came back once already. */
  padding-block: 33px 0;
}
/* the accent bar that closes the panel */
.gx-mega::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, rgb(from var(--gx-accent) r g b / 0) 0%, rgb(from var(--gx-accent) r g b / 0.75) 45%,
                              rgb(from var(--gx-lime) r g b / 0.9) 72%, rgb(from var(--gx-lime) r g b / 0) 100%);
}
.gx-mega__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.gx-mega__title {
  margin-top: var(--gx-space-4);
  color: var(--gx-text);
  font-size: 30px; letter-spacing: -.5px;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-mega__lead {
  margin-top: var(--gx-space-4);
  max-width: 631px;
  color: var(--gx-text-3);
  font-size: var(--gx-fs-label); line-height: 23px;
}

.gx-mega__cols { margin-top: var(--gx-space-10); display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 50px; }
.gx-mega__colhead {
  color: var(--gx-lime);
  font-size: var(--gx-fs-micro);
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.gx-mega__list { margin: var(--gx-space-5) 0 0; padding: 0; list-style: none; }
.gx-mega__list li + li { border-top: 1px solid rgb(from var(--gx-divider-mega) r g b / 0.75); }
.gx-mega__item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  padding-block: var(--gx-space-4);
  text-decoration: none;
}
.gx-mega__item:hover .gx-mega__name { color: var(--gx-lime); }
.gx-mega__num { color: var(--gx-accent); font-size: var(--gx-fs-micro); font-weight: var(--gx-fw-medium); }
.gx-mega__name {
  color: var(--gx-text); font-size: var(--gx-fs-micro);
  font-weight: var(--gx-fw-medium); letter-spacing: .15px; text-transform: uppercase;
  transition: color var(--gx-dur-fast) var(--gx-ease-out);
}
.gx-mega__desc { grid-column: 2; margin-top: 2px; color: var(--gx-text-3); font-size: var(--gx-fs-micro); }

/* right-hand support panel */
.gx-mega__panel {
  align-self: start;
  background: linear-gradient(90deg, var(--gx-surface-1), var(--gx-bg));
  border: 1px solid rgb(from var(--gx-border-mega) r g b / 0.7);
  border-radius: 4px;
  padding: 40px 38px;
}
.gx-mega__panel h3 {
  margin-top: var(--gx-space-5);
  color: var(--gx-text);
  font-size: 25px; letter-spacing: -.4px; line-height: 1.2;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-mega__panel > p { margin-top: var(--gx-space-5); color: var(--gx-text-footer); font-size: var(--gx-fs-sm); }
.gx-mega__steps { margin: var(--gx-space-10) 0 0; padding: 0; list-style: none; }
.gx-mega__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding-block: var(--gx-space-3); }
.gx-mega__steps b { color: var(--gx-lime); font-size: var(--gx-fs-micro); font-weight: var(--gx-fw-bold); }
.gx-mega__steps strong {
  color: var(--gx-text); font-size: var(--gx-fs-micro);
  font-weight: var(--gx-fw-semibold); letter-spacing: .35px; text-transform: uppercase;
}
.gx-mega__steps span { grid-column: 2; margin-top: 2px; color: var(--gx-text-footer); font-size: var(--gx-fs-micro); }
.gx-mega__actions { margin-top: var(--gx-space-10); display: flex; flex-wrap: wrap; gap: var(--gx-space-4); }
.gx-mega__actions .gx-btn { height: 50px; font-size: var(--gx-fs-micro); letter-spacing: .8px; }

.gx-mega__quick {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: var(--gx-space-10);
  padding-block: var(--gx-space-8) var(--gx-space-10);
}
.gx-mega__quick a {
  color: var(--gx-text-footer); font-size: var(--gx-fs-micro);
  font-weight: var(--gx-fw-semibold); letter-spacing: .8px;
  text-transform: uppercase; text-decoration: none;
}
.gx-mega__quick a:hover { color: var(--gx-lime); }

/* the small Engineering Data panel keeps the simple list layout */
/* Client revision, 8 Sep 2026. This panel used to be three bare uppercase
   links sitting in a row — "just some small links", which is how the client
   described the whole of Engineering Data. Each child is now a card with the
   name and the line that explains it, matching the three boxes on the
   Engineering Data page so the menu and the page agree. */
.gx-mega--simple .gx-mega__inner {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gx-space-6);
  padding-block: var(--gx-space-10);
}
.gx-megacard {
  display: block;
  padding: var(--gx-space-6);
  border: 1px solid var(--gx-card-border);
  border-radius: var(--gx-card-radius);
  background: var(--gx-card-bg);
  text-decoration: none;
  transition: border-color var(--gx-dur-fast) var(--gx-ease-out),
              background var(--gx-dur-fast) var(--gx-ease-out);
}
.gx-megacard:hover { border-color: var(--gx-accent); background: var(--gx-surface-1); }
.gx-megacard__name {
  display: block;
  color: var(--gx-text);
  font-size: var(--gx-fs-label);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-label);
  text-transform: uppercase;
}
.gx-megacard:hover .gx-megacard__name { color: var(--gx-lime); }
.gx-megacard__desc {
  display: block;
  margin-top: var(--gx-space-2);
  color: var(--gx-text-3);
  font-size: var(--gx-fs-body);
  line-height: 24px;
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 1200px) {
  .gx-mega__inner { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .gx-mega__cols { grid-template-columns: 1fr; gap: var(--gx-space-8); }
}

/* ---------- M3: scroll reveal, side-aware --------------------------- */

[data-reveal] {
  opacity: 0;
  transition: opacity var(--gx-dur-slow) var(--gx-ease-out),
              transform var(--gx-dur-slow) var(--gx-ease-out);
}
[data-reveal="left"]  { transform: translateX(calc(var(--gx-reveal-x) * -1)); }
[data-reveal="right"] { transform: translateX(var(--gx-reveal-x)); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* On a phone the columns are stacked, so a sideways entrance has nothing to
   say — and a 40px offset pushed the page into a horizontal scroll before
   the element animated in. It becomes a short lift instead. */
@media (max-width: 768px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(24px); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- M1 · Entrance overlay ----------------------------------
   SEO contract: the page HTML is fully rendered and readable underneath.
   The overlay is decorative (aria-hidden), never gates content, and
   dismisses itself with a CSS animation — so even if main.js never
   loads it disappears on time. No JS at all => it never shows.
   Home only, once per browsing session.                              */

.gx-entrance { display: none; }

.gx-intro-on .gx-entrance {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: radial-gradient(ellipse 58.8% 58.8% at 49.4% 44.7%,
              var(--gx-map-bg) 0%, var(--gx-bg) 55%, var(--gx-surface-deep) 100%);
  /* A fade, not a push: the review asked for the opening image to fade out
     and the home page to fade in. The scale that rode along with it read as
     the overlay lunging forward. Longer, on a gentler curve, so the ending is
     soft rather than abrupt. */
  animation: gx-entrance-out 1100ms cubic-bezier(0.22, 1, 0.36, 1)
             var(--gx-intro-hold) forwards;
}
.gx-entrance.is-done { display: none !important; }

@keyframes gx-entrance-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Home content lifts in as the overlay clears. fill-mode both guarantees
   it ends at opacity 1 whatever happens to the animation. */
.gx-intro-on .gx-header,
.gx-intro-on #main,
.gx-intro-on .gx-footer {
  /* Overlaps the tail of the fade-out on purpose, so one hands over to the
     other instead of leaving a blank beat between them. */
  animation: gx-entrance-page 1000ms var(--gx-ease-out, ease-out)
             calc(var(--gx-intro-hold) + 420ms) both;
}
@keyframes gx-entrance-page {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Stage. 1512x982 Figma frame mapped to the viewport: the gear stack
   scales, every position stays proportional to the drawn layout. */
.gx-entrance__stage {
  position: absolute;
  inset: 0;
  --gx-gear: min(720px, 66vw, 76vh);
}
.gx-entrance__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.9;
}

/* Axes and ticks — drawn at 1512 wide, held to that ratio. */
.gx-entrance__axis-v {
  position: absolute;
  animation: gx-entrance-line 700ms var(--gx-ease-out, ease-out) 120ms both;
}
.gx-entrance__axis-v {
  left: 50%; top: 2.4%; height: 77.4%;
  width: 1px; background: rgb(from var(--gx-intro-axis) r g b / 0.18);
}
@keyframes gx-entrance-line { from { opacity: 0; } to { opacity: 1; } }

/* Gear stack — three concentric outlines on one centre, counter-rotating. */
.gx-entrance__gears {
  position: absolute;
  left: 50%; top: 37.9%;
  width: var(--gx-gear); height: var(--gx-gear);
  transform: translate(-50%, -50%);
  animation: gx-entrance-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gx-entrance-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.gx-entrance__gear {
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: 50% 50%;
  will-change: transform;
}
.gx-entrance__gear--outer {
  width: 100%; height: 100%; margin: -50% 0 0 -50%;
  animation: gx-spin-cw 9s linear infinite;
}
.gx-entrance__gear--mid {
  width: 72.2%; height: 72.2%; margin: -36.1% 0 0 -36.1%;
  animation: gx-spin-ccw 7s linear infinite;
}
.gx-entrance__gear--inner {
  width: 47.2%; height: 47.2%; margin: -23.6% 0 0 -23.6%;
  animation: gx-spin-cw 15s linear infinite;
}
@keyframes gx-spin-cw  { to { transform: rotate(360deg); } }
@keyframes gx-spin-ccw { to { transform: rotate(-360deg); } }

/* Metal light sweep across the plate. */
.gx-entrance__sweep {
  position: absolute;
  left: 14.29%; width: 71.43%; top: 61.5%; height: 2px;
  opacity: 0.58;
  background: linear-gradient(90deg, rgb(from var(--gx-intro-sweep) r g b / 0) 0%,
              rgb(from var(--gx-intro-sweep-peak) r g b / 0.8) 50%, rgb(from var(--gx-intro-sweep) r g b / 0) 100%);
  animation: gx-entrance-sweep 1100ms cubic-bezier(0.16, 1, 0.3, 1) 320ms both;
}
@keyframes gx-entrance-sweep {
  from { opacity: 0; transform: scaleX(0.2); }
  to   { opacity: 0.58; transform: scaleX(1); }
}

/* Wordmark. Figma 107.743px on a 1512 frame. */
.gx-entrance__title {
  position: absolute;
  left: 0; right: 0; top: 75.4%;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: clamp(28px, 7.13vw, 108px);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* Figma paints one bright band across the middle of the wordmark. Here the
     gradient is drawn 2.6x wider than the text and its position is animated,
     so that band travels along the letters instead of sitting still — right
     to left, then back, for as long as the intro is on screen. */
  background: linear-gradient(96deg,
              var(--gx-wordmark-1) 0%,   var(--gx-wordmark-2) 26%,  var(--gx-wordmark-3) 42%,
              var(--gx-white) 50%,  var(--gx-wordmark-3) 58%,  var(--gx-wordmark-2) 74%,  var(--gx-wordmark-1) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gx-entrance-title 800ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both,
             gx-entrance-sheen 2000ms ease-in-out 300ms infinite alternate;
}
@keyframes gx-entrance-sheen {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
.gx-entrance__title::before {
  content: "";
  position: absolute;
  left: 15.6%; right: 15.6%; top: -0.4%;
  height: 138px;
  z-index: -1;
  background: linear-gradient(90deg, rgb(from var(--gx-ink-deep) r g b / 0) 0%, rgb(from var(--gx-ink-deep) r g b / 0.72) 25%,
              rgb(from var(--gx-ink-deep) r g b / 0.72) 75%, rgb(from var(--gx-ink-deep) r g b / 0) 100%);
}
@keyframes gx-entrance-title {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .gx-entrance__stage { --gx-gear: min(360px, 84vw); }
  .gx-entrance__gears { top: 36%; }
  .gx-entrance__title { top: 66%; font-size: clamp(26px, 7.7vw, 44px); }
  .gx-entrance__title::before { left: 6%; right: 6%; height: 90px; }
  .gx-entrance__axis-v { top: 12%; height: 46%; }
  .gx-entrance__sweep { display: none; }
}

/* Motion off: no overlay at all, page renders straight away. */
@media (prefers-reduced-motion: reduce) {
  .gx-intro-on .gx-entrance { display: none; }
  .gx-entrance__title { animation: none; background-position: 50% 0; }
  .gx-intro-on .gx-header,
  .gx-intro-on #main,
  .gx-intro-on .gx-footer { animation: none; }
}

/* ---------- Mobile navigation (Figma 160:317 / 160:352) -------------
   The same WordPress menu is rendered twice — desktop bar with mega
   panels, mobile panel with an accordion. One nav_menu location, two
   render callbacks; note 11 (no ACF repeater) is unaffected.        */

.gx-header__burger { display: none; }

/* The desktop bar needs about 1075px for the logo, seven items and the CTA,
   before any gap between them: at a 40px gap it wants 1459px. The switch to
   the mobile panel used to sit at 1080px, so between 1081 and roughly 1300 the
   bar did not fit and the CTA was pushed off the side — a horizontal
   scrollbar at 1280, one of the commonest laptop widths. Neither breakpoint
   the design was drawn at (1024 and 1512) falls in that band, which is why
   nobody saw it. Measured with 13px labels the bar needs about 1342px of
   content column, which it only has from 1440 up — so that is where it
   appears, and the panel covers everything below.

   So the bar now appears only where it fits, and the gaps close as the window
   narrows rather than the content overflowing. */
@media (min-width: 1440px) and (max-width: 1511px) {
  :root { --gx-nav-gap: 16px; --gx-gutter: 56px; }
}

@media (max-width: 1439px) {
  /* buttons.css loads after this file, so .gx-btn's display would win on
     equal specificity — the header scope is what makes this stick. */
  .gx-header .gx-nav,
  .gx-header .gx-header__cta { display: none; }

  .gx-header .gx-header__burger {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    margin-right: -10px;
    padding: 0 9px;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
  }
  .gx-header__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--gx-text);
    border-radius: 2px;
    transition: transform var(--gx-dur) var(--gx-ease-out),
                opacity var(--gx-dur) var(--gx-ease-out);
  }
  .gx-header__burger span:nth-child(2) { width: 70%; }
  .gx-header__inner { justify-content: space-between; }
}

.gx-mobnav {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: none;
  flex-direction: column;
  background: var(--gx-bg);
  overscroll-behavior: contain;
}
.gx-mobnav.is-open { display: flex; }

/* No JS: the panel can never open, so it must never be reachable. */
html:not(.js) .gx-mobnav,
html:not(.js) .gx-header__burger { display: none !important; }
html:not(.js) .gx-nav { display: flex !important; }

.gx-mobnav__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gx-space-4) var(--gx-space-6);
  border-bottom: 1px solid rgb(from var(--gx-map-border) r g b / 0.6);
}
.gx-mobnav__bar img { width: 190px; height: auto; }
.gx-mobnav__close {
  width: 44px; height: 44px;
  margin-right: -10px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--gx-text);
}
.gx-mobnav__close svg { width: 20px; height: 20px; }

.gx-mobnav__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--gx-space-8) var(--gx-space-6) var(--gx-space-12);
}
.gx-mobnav__list { list-style: none; margin: 0; padding: 0; }
.gx-mobnav__list > li + li { margin-top: var(--gx-space-1); }

.gx-mobnav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gx-text-nav);
  text-decoration: none;
  background: none; border: 0; width: 100%;
  text-align: left;
  cursor: pointer;
  transition: color var(--gx-dur) var(--gx-ease-out);
}
.gx-mobnav__link:hover,
.gx-mobnav__link:focus-visible { color: var(--gx-text); }
.gx-mobnav__link[aria-current="page"] { color: var(--gx-text); }

/* Gear Types row: lime, with the +/− the Figma frames show. */
.gx-mobnav__link--accordion { color: var(--gx-lime); }
.gx-mobnav__sign {
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: var(--gx-lime);
}
.gx-mobnav__link--accordion[aria-expanded="true"] .gx-mobnav__sign::after { content: "\2212"; }
.gx-mobnav__link--accordion[aria-expanded="false"] .gx-mobnav__sign::after { content: "+"; }

.gx-mobnav__sub { list-style: none; margin: 0 0 var(--gx-space-3); padding: 0; }
.gx-mobnav__sub[hidden] { display: none; }
.gx-mobnav__sublink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0 11px 2px;
  font-size: var(--gx-fs-micro);      /* [DEV] Figma 11px — 12px floor */
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gx-text-2);
  text-decoration: none;
}
.gx-mobnav__sublink:hover { color: var(--gx-text); }
.gx-mobnav__arrow {
  flex: none;
  width: 11px; height: 11px;
  color: var(--gx-text-3);
}

/* Engineering Data children sit open, as drawn. */
.gx-mobnav__sub--plain .gx-mobnav__sublink {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
  padding: 12px 0;
  color: var(--gx-text-2);
}

.gx-mobnav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--gx-space-6);
  width: 100%;
  height: 56px;
  font-size: var(--gx-fs-cta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .gx-header__burger span { transition: none; }
}