/* ============================================================
   Shared sections: CTA band, footer, product gallery + lightbox
   ============================================================ */

/* ---------- CTA band (gxg/cta-band) ---------------------------------
   One block, four copy variants. Figma names it four different ways
   ("06 — FINAL CTA", "Quality / Requirements CTA", "Steel Equivalents /
   Project CTA", "CTA / Gear enquiry") but all four are 348px and
   identical — see SECTION-INVENTORY.md. */

.gx-cta {
  background: var(--gx-gradient-cta);
  min-height: 348px;
  display: flex;
  align-items: center;
}
.gx-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gx-space-12);
  padding-block: var(--gx-space-16);
}
.gx-cta__eyebrow {
  color: var(--gx-accent-pale);
  font-size: var(--gx-fs-micro);        /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-eyebrow);
  text-transform: uppercase;
}
.gx-cta__title {
  margin-top: var(--gx-space-5);
  max-width: 850px;
  color: var(--gx-text);
  font-size: var(--gx-fs-h2-band);
  font-weight: var(--gx-fw-semibold);
  line-height: 37px;
  letter-spacing: -1px;
  text-transform: uppercase;
}
.gx-cta__body {
  margin-top: var(--gx-space-5);
  max-width: 810px;
  color: var(--gx-text-cta);
  font-size: 20px; line-height: 1.5;}
.gx-cta__meta {
  margin-top: var(--gx-space-8);
  color: var(--gx-text-cta-meta);
  font-size: var(--gx-fs-micro);        /* [DEV] Figma 10px -> 12px floor */
  font-weight: var(--gx-fw-medium);
  letter-spacing: var(--gx-ls-cta);
  text-transform: uppercase;
}
.gx-cta .gx-btn { min-width: 330px; height: 64px; }

@media (max-width: 900px) {
  .gx-cta__inner { grid-template-columns: 1fr; gap: var(--gx-space-8); }
  .gx-cta .gx-btn { min-width: 0; width: 100%; }
}

/* ---------- Footer --------------------------------------------------
   Menus come from WordPress nav menus, never ACF (BUILD-SPEC §4). */

/* Client feedback: the footer read too small. Every size inside the footer
   — brand, column headings, menu links, contact, credit line, map chip —
   is the shared token + 2px. Scoped here so nothing else on the site moves. */
.gx-footer {
  background: var(--gx-gradient-footer);
  --gx-fs-footer:       calc(var(--gx-fs-micro) + 2px);   /* 12 -> 14 */
  --gx-fs-footer-lead:  calc(var(--gx-fs-label) + 2px);   /* 14 -> 16 */
  --gx-fs-footer-brand: calc(var(--gx-fs-lead)  + 2px);   /* 18 -> 20 */
}
.gx-footer__inner {
  display: grid;
  /* the contact column carries a four-line address, and at the larger
     footer size it needs more room than an even 1fr gives it */
  grid-template-columns: 300px repeat(3, minmax(0, 1fr)) 215px;
  /* tighter column gap buys the nav columns back the width the larger
     type needs — "Sprockets & Timing Gears" is the widest item */
  gap: var(--gx-space-10) var(--gx-space-8);
  padding-block: var(--gx-space-20) var(--gx-space-10);
}
.gx-footer__brand {
  color: var(--gx-text);
  font-size: var(--gx-fs-footer-brand);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.gx-footer__tagline { margin-top: var(--gx-space-5); color: var(--gx-text-footer); font-size: var(--gx-fs-footer-lead); }
/* Client feedback: doubled from the drawn 78x60. */
.gx-footer__iso { margin-top: var(--gx-space-8); width: 156px; height: 120px; }

/* Membership marks (client, post-Figma). Both are full-colour artwork whose
   owners' guidelines forbid recolouring, so each keeps its own light plate
   instead of being knocked out to white for the near-black footer.
   [DEV] Not in Figma — added on client request. */
/* Client revision, 8 Sep 2026: "Move logos (badges) to 2 lines". The three
   marks ran down three lines — ISO, then MPMA with its caption, then BCC.
   The two membership marks now share a line, so the set reads as two.

   Side by side they are 460px and the brand column is 300, so the row runs on
   into the column beside it. That is deliberate and safe: Capabilities is the
   shortest column in the footer and its last link sits ~130px above where this
   row starts, so the space is genuinely empty. Below 1100px the grid is two
   wide columns and the row fits inside its own column with room to spare. */
.gx-footer__badges {
  margin-top: var(--gx-space-6);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gx-space-5) var(--gx-space-6);
  width: max-content;
  max-width: 100%;
}
@media (min-width: 1450px) {
  /* only the widest layout needs to reach past its own column */
  .gx-footer__badges { max-width: 498px; }
}
.gx-footer__badge {
  display: block;
  background: var(--gx-white);
  border-radius: 4px;
  padding: 10px;
}
/* the mark is one <img> inside a <span>; the span needs a box of its own */
.gx-footer__badge img { display: block; width: 100%; height: auto; }
/* MPMA already carries a green rule around white, so it needs less padding
   than the transparent BCC mark or the frame reads doubled. */
.gx-footer__badge--mpma { width: 260px; padding: 7px; }
.gx-footer__badge--bcc  { width: 176px; }
/* Client's required wording, verbatim, under the first mark. */
.gx-footer__badge-note {
  margin-top: var(--gx-space-3);
  max-width: 260px;
  color: var(--gx-text-footer);
  font-size: var(--gx-fs-footer);
  line-height: 1.45;
}
.gx-footer__badge-note strong {
  display: block;
  color: var(--gx-text);
  font-weight: var(--gx-fw-medium);
  letter-spacing: var(--gx-ls-nav);
  text-transform: uppercase;
}

.gx-footer__col h2 {
  color: var(--gx-text);
  font-size: var(--gx-fs-footer);
  font-weight: var(--gx-fw-medium);
  letter-spacing: var(--gx-ls-nav);
  text-transform: uppercase;
}
.gx-footer__col ul { margin: var(--gx-space-3) 0 0; padding: 0; list-style: none; }
.gx-footer__col li + li { margin-top: 6px; }
/* Figma runs these at 12 / 11.5 / 12 / 12px across the four columns —
   copy drift, normalised to one size. */
.gx-footer__col a {
  color: var(--gx-text-footer);
  font-size: var(--gx-fs-footer);
  font-weight: var(--gx-fw-medium);
  text-decoration: none;
  transition: color var(--gx-dur-fast) var(--gx-ease-out);
}
.gx-footer__col a:hover { color: var(--gx-lime); }

.gx-footer__bottom a { color: inherit; text-decoration: none; }
.gx-footer__bottom a:hover { color: var(--gx-text); }
.gx-credit-mark { color: var(--gx-credit-accent); }

.gx-footer__bottom {
  border-top: 1px solid var(--gx-rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gx-space-4);
  padding-block: var(--gx-space-10);
  color: var(--gx-text-footer);
  font-size: var(--gx-fs-footer);       /* [DEV] Figma 10-11px -> 12px floor, +2 */
  font-weight: var(--gx-fw-medium);
  letter-spacing: var(--gx-ls-label);
}
/* The client asked for the map to go (8 Sep 2026), and with it went the reason
   the nav columns were being crushed. They are the flexible ones, and the fixed
   columns either side of them used to be 300 brand + 215 contact + 180 map plus
   five gaps — 855px of the row spoken for before the three menus got any of it,
   which left them 88px at 1280 and 66px at 1150, the two commonest laptop
   widths, with "Sprockets & Timing Gears" wrapping onto four lines.

   Without the map the same row gives them 236px at 1512 and 164px at 1280.
   That is also the answer to "move text to the right": the four columns reach
   the content edge on their own now, because the space the map held is theirs. */
@media (max-width: 1449px) {
  /* Same six columns, tightened rather than rearranged: narrower fixed
     columns and a 24px gap give the nav columns 135px at 1280 and 190px at
     1440, where before they had 88px. The two membership marks come down with
     them so they still sit two-up. */
  .gx-footer__inner {
    grid-template-columns: 260px repeat(3, minmax(0, 1fr)) 200px;
    gap: var(--gx-space-10) var(--gx-space-6);
  }  .gx-footer__iso { width: 130px; height: 100px; }
  .gx-footer__badges { max-width: 420px; }
  .gx-footer__badge--mpma { width: 220px; }
  .gx-footer__badge--bcc  { width: 150px; }
  .gx-footer__badge-note  { max-width: 220px; }
}
/* 1264 is where the tightened layout runs out: below it the three nav
   columns fall under 130px. 1280 and 1366 both stay six columns. */
@media (max-width: 1264px) {
  .gx-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gx-space-10) var(--gx-space-8);
  }
  .gx-footer__iso { width: 156px; height: 120px; }
  .gx-footer__badges { max-width: 100%; }
  .gx-footer__badge--mpma { width: 260px; }
  .gx-footer__badge--bcc  { width: 176px; }
  .gx-footer__badge-note  { max-width: 260px; }
}
@media (max-width: 640px) {
  .gx-footer__inner { grid-template-columns: 1fr; }
}

/* ---------- Product gallery (C3) ------------------------------------
   Card frame is CSS; the blue glow lives inside the image. */

.gx-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gx-space-8);
}
.gx-gallery__item {
  position: relative;
  display: block;
  padding: 0; border: 1px solid var(--gx-card-border);
  border-radius: var(--gx-card-radius);
  background: var(--gx-card-bg);
  overflow: hidden;
  cursor: zoom-in;
}
.gx-gallery__item img {
  width: 100%; height: auto;
  aspect-ratio: 410 / 330;              /* reserved: no layout shift */
  object-fit: cover;
  transition: transform var(--gx-dur-slow) var(--gx-ease-out);
}
.gx-gallery__item:hover img { transform: scale(1.03); }
.gx-gallery__label {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--gx-space-12) var(--gx-space-5) var(--gx-space-4);
  background: linear-gradient(to bottom, transparent, var(--gx-card-fade));
  color: var(--gx-text);
  font-size: var(--gx-fs-micro);        /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-medium);
  letter-spacing: 0.5px;
}

/* ---------- Lightbox ------------------------------------------------ */

.gx-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgb(from var(--gx-bg-header) r g b / 0.94);
  padding: var(--gx-space-6);
}
.gx-lightbox img {
  max-width: min(1845px, 94vw);
  max-height: 88vh;
  width: auto; height: auto;
  border-radius: var(--gx-card-radius);
}
.gx-lightbox__cap {
  margin-top: var(--gx-space-5); text-align: center;
  color: var(--gx-text-2); font-size: var(--gx-fs-sm); letter-spacing: var(--gx-ls-label);
}
.gx-lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgb(from var(--gx-bg-ink) r g b / 0.6);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius);
  color: var(--gx-text); cursor: pointer;
}
.gx-lightbox__btn--prev { left: var(--gx-space-6); }
.gx-lightbox__btn--next { right: var(--gx-space-6); }
.gx-lightbox__close { position: absolute; top: var(--gx-space-6); right: var(--gx-space-6); }

/* ---------- Category detail: product hero --------------------------- */

.gx-phero {
  position: relative;
  background: var(--gx-surface-page);
  min-height: 760px;
  display: flex; align-items: center;
  overflow: hidden;
}
/* The image is inset by the page gutter, never flush to the window.
   It used to be max(0px, …), which is 0 at and below the shell width — so on
   every ordinary screen it ran to the very edge while the heading beside it
   respected the 72px gutter, and it read as sitting outside the container.
   Only the RIGHT edge moves: the width is reduced by the same gutter so the
   left edge, and with it the designed overlap with the heading and its fade,
   stays exactly where Figma put it. The photo is object-fit: cover, so it
   crops rather than distorts. */
.gx-phero {
  /* The image's right edge belongs on the CONTENT column, not on the shell.
     The shell is the 1512px band the page sits in; the content column is that
     band minus the page gutter, and it is where the heading, the buttons and
     the header's own CTA all end. Insetting by the shell alone left the photo
     72px further right than everything else on the page — which is exactly
     what it looked like, and what the client reported twice. So the inset is
     the shell's own offset PLUS the gutter, and never less than the gutter.

     The width goes back to the drawn 722px capped at 48%: reducing it by a
     gutter (the earlier attempt at this) also pulled the left edge in and cost
     the designed overlap between the photo and the end of the heading, which
     the fade beside it exists to soften. */
  --phero-inset: max(var(--gx-gutter), calc((100% - var(--gx-shell)) / 2 + var(--gx-gutter)));
  --phero-media: min(722px, 48%);
}
.gx-phero__media {
  position: absolute; top: 60px;
  right: var(--phero-inset);
  width: var(--phero-media); height: 620px;
  /* A little more present than a card edge — this one has to hold a 620px
     photograph away from the background, not outline a small surface. */
  border: 1px solid rgb(from var(--gx-card-border) r g b / 0.85);
}
.gx-phero__media img { width: 100%; height: 100%; object-fit: cover; }
.gx-phero__fade {
  position: absolute; top: 60px; height: 620px; width: 250px;
  right: calc(var(--phero-inset) + var(--phero-media) - 16px);
  background: linear-gradient(to right, var(--gx-surface-page), rgb(from var(--gx-surface-page) r g b / 0));
  opacity: .48; pointer-events: none;
}
.gx-phero__inner { position: relative; z-index: 2; padding-block: var(--gx-space-24); }
.gx-phero__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-eyebrow);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: 2.56px;
  text-transform: uppercase;
}
.gx-phero__title {
  margin-top: var(--gx-space-8);
  max-width: 720px;
  color: var(--gx-text);
  font-size: var(--gx-fs-hero-xl);
  font-weight: var(--gx-fw-semibold);
  line-height: 74px;
  text-transform: uppercase;
}
.gx-phero__sub {
  margin-top: var(--gx-space-10);
  max-width: 560px;
  color: var(--gx-text-3);
  font-size: var(--gx-fs-subtitle);
  line-height: 32px;
  text-transform: uppercase;
}
.gx-phero__actions { margin-top: var(--gx-space-16); display: flex; flex-wrap: wrap; gap: var(--gx-space-4); }
.gx-phero .gx-btn { height: 54px; }
/* Figma "Upload button": own surface, not the standard ghost */
.gx-btn--upload {
  --btn-bg: var(--gx-surface-4); --btn-fg: var(--gx-text); --btn-sweep: var(--gx-lime);
  border: 1px solid var(--gx-map-border);
  font-size: var(--gx-fs-micro);        /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-semibold);
}
.gx-btn--upload:hover, .gx-btn--upload:focus-visible { --btn-fg: var(--gx-bg-ink); }

.gx-section { padding-block: var(--gx-space-24); }
.gx-section__title {
  color: var(--gx-text); font-size: var(--gx-fs-h2);
  font-weight: var(--gx-fw-semibold); text-transform: uppercase;
}
.gx-todo {
  border: 1px dashed var(--gx-border);
  border-radius: var(--gx-radius-card);
  padding: var(--gx-space-8);
  color: var(--gx-text-3); font-size: var(--gx-fs-sm);
}

@media (max-width: 1100px) {
  .gx-phero { min-height: 0; }
  .gx-phero__media { position: static; width: 100%; max-width: none; height: auto; aspect-ratio: 722/620; margin-top: var(--gx-space-8); }
  .gx-phero__fade { display: none; }
}
@media (max-width: 768px) {
  :root { --gx-fs-hero-xl: 40px; --gx-fs-subtitle: 17px; }
  .gx-phero__title { line-height: 44px; }
  .gx-phero__sub { line-height: 26px; }
}

/* ---------- Category detail: overview ------------------------------- */

.gx-overview { background: var(--gx-surface-4); }
.gx-overview__inner {
  display: grid;
  grid-template-columns: 500px minmax(0, 620px);
  gap: var(--gx-space-16) var(--gx-space-20);
  justify-content: space-between;
  padding-block: var(--gx-space-24);
}
.gx-overview__title {
  color: var(--gx-text);
  font-size: 42px; line-height: 48px;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-overview__body > p { color: var(--gx-text-3); font-size: var(--gx-fs-lead); line-height: 29px; }
.gx-overview__body > p + p { margin-top: var(--gx-space-8); }
.gx-overview__meta {
  grid-column: 1;
  color: var(--gx-lime);
  font-size: var(--gx-fs-micro);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: 1.44px;
  text-transform: uppercase;
}

/* ---------- Category detail: applications --------------------------- */

.gx-apps { background: var(--gx-surface-page); }
.gx-apps__inner {
  display: grid;
  grid-template-columns: 600px minmax(0, 600px);
  gap: var(--gx-space-16) var(--gx-space-20);
  justify-content: space-between;
  padding-block: var(--gx-space-24);
}
.gx-apps__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-sm);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: 1.95px;
  text-transform: uppercase;
}
.gx-apps__title {
  margin-top: var(--gx-space-5);
  color: var(--gx-text);
  font-size: 45px; line-height: 52px;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-apps__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px));
  gap: var(--gx-space-10);
}
.gx-app-card {
  background: var(--gx-surface-4);
  border-radius: 8px;
  min-height: 170px;
  padding: var(--gx-space-6);
}
/* Figma paints the first card #0d303a and the other three #09232c.
   Kept 1:1 — flag if that was accidental. */
.gx-app-card--lead { background: var(--gx-surface-lead); }
.gx-app-card__icon {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--gx-accent);
  /* TODO asset: the four ellipse icons are not exported yet */
}
.gx-app-card__title {
  margin-top: var(--gx-space-4);
  color: var(--gx-text);
  font-size: var(--gx-fs-label);
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-app-card__body {
  margin-top: var(--gx-space-3);
  color: var(--gx-text-3);
  font-size: var(--gx-fs-sm);
  line-height: 20px;
}

@media (max-width: 1200px) {
  .gx-overview__inner,
  .gx-apps__inner { grid-template-columns: 1fr; }
  .gx-overview__meta { grid-column: auto; }
}
@media (max-width: 768px) {
  .gx-overview__title { font-size: 28px; line-height: 34px; }
  .gx-apps__title { font-size: 30px; line-height: 36px; }
  .gx-apps__grid { grid-template-columns: 1fr; }
}

/* ---------- Category detail: manufacturing options ------------------ */

.gx-mfg { background: var(--gx-surface-4); }
.gx-mfg__inner {
  display: grid;
  grid-template-columns: 620px minmax(0, 585px);
  gap: var(--gx-space-16) var(--gx-space-20);
  justify-content: space-between;
  padding-block: var(--gx-space-24);
}
.gx-mfg__eyebrow {
  color: var(--gx-lime);
  font-size: var(--gx-fs-sm);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: 1.95px;
  text-transform: uppercase;
}
.gx-mfg__title {
  margin-top: var(--gx-space-5);
  color: var(--gx-text);
  font-size: 44px; line-height: 51px;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-mfg__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 270px));
  gap: var(--gx-space-16) var(--gx-space-12);
  margin: 0; padding: 0; list-style: none;
}
.gx-mfg__item { border-bottom: 1px solid var(--gx-map-border); padding-bottom: var(--gx-space-10); }
.gx-mfg__num {
  color: var(--gx-accent);
  font-size: 22px;
  font-weight: var(--gx-fw-semibold);
}
.gx-mfg__name {
  margin-top: var(--gx-space-4);
  color: var(--gx-text);
  font-size: 16px;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-mfg__desc {
  margin-top: var(--gx-space-3);
  color: var(--gx-text-3);
  font-size: var(--gx-fs-sm);
  line-height: 21px;
}

/* ---------- Category detail: production scope ----------------------- */

.gx-scope { background: var(--gx-surface-page); }
.gx-scope__inner {
  display: grid;
  grid-template-columns: 900px minmax(0, 530px);
  gap: var(--gx-space-12) var(--gx-space-16);
  justify-content: space-between;
  align-items: start;
  padding-block: var(--gx-space-20);
}
.gx-scope__title {
  color: var(--gx-text);
  font-size: 34px; line-height: 44px;
  font-weight: var(--gx-fw-medium);
  text-transform: uppercase;
}
.gx-scope__body { color: var(--gx-text-3); font-size: var(--gx-fs-body); padding-top: var(--gx-space-5); }

@media (max-width: 1200px) {
  .gx-mfg__inner, .gx-scope__inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gx-mfg__title { font-size: 30px; line-height: 36px; }
  .gx-mfg__list { grid-template-columns: 1fr; gap: var(--gx-space-10); }
  .gx-scope__title { font-size: 24px; line-height: 32px; }
}

/* ============================================================
   C2 — Centered product carousel (home)

   Cards are ABSOLUTELY positioned and moved with transform, not laid out
   in a scrolling flex row. Three reasons:
     * resizing an absolutely positioned card reflows nothing, so the tier
       change no longer nudges its neighbours — that was the jump;
     * offsets can wrap, so the track loops forever with no end stop;
     * autoplay is just "advance the index".
   Offsets are the real Figma centres: 0, +/-416, +/-717 from x=756.
   Arrows only, no bullets (Arif's note 7).
   ============================================================ */

.gx-showcase {
  background: linear-gradient(to right, var(--gx-bg-ink), var(--gx-surface-2));
  padding-block: var(--gx-space-20);
  overflow: hidden;
}
.gx-showcase__head { text-align: center; max-width: 1000px; margin-inline: auto; }
.gx-showcase__eyebrow {
  color: var(--gx-accent);
  font-size: 16px; font-weight: var(--gx-fw-semibold);
  letter-spacing: 2.4px; text-transform: uppercase;
}
.gx-showcase__title {
  margin-top: var(--gx-space-6);
  color: var(--gx-text);
  font-size: 44px; line-height: 52px;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-showcase__title em { font-style: normal; color: var(--gx-lime); }
.gx-showcase__lead {
  margin: var(--gx-space-8) auto 0; max-width: 700px;
  color: var(--gx-text-3); font-size: 20px; line-height: 1.5;
}
.gx-showcase__note {
  margin-top: var(--gx-space-10);
  text-align: center;
  color: var(--gx-text-4);
  font-size: var(--gx-fs-micro);        /* [DEV] Figma 10px -> 12px floor */
  font-weight: var(--gx-fw-medium);
  letter-spacing: var(--gx-ls-label);
  text-transform: uppercase;
}

.gx-carousel {
  --step-near: 416px;                   /* Figma: 756 - 340 */
  --step-far:  717px;                   /* Figma: 756 - 39  */
  position: relative;
  margin-top: var(--gx-space-16);
  height: 640px;
  /* Off-ring cards park at +/-900px; clip them so they never widen the page. */
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
.gx-carousel__track { position: absolute; inset: 0; cursor: grab; }
.gx-carousel__track.is-dragging { cursor: grabbing; }
.gx-carousel__track.is-dragging .gx-pcard { transition: none; }

.gx-pcard {
  position: absolute; left: 50%; top: 50%;
  width: 250px; height: 390px;
  margin-left: -125px; margin-top: -195px;
  border: 1px solid rgb(from var(--gx-divider) r g b / 0.9);
  border-radius: 24px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  /* Figma card ground. Kept as CSS rather than the exported card.svg: that
     file is fixed at 460x600 rx=28, so scaling it to the 250 and 300 tiers
     would distort the corners and double-draw its baked-in stroke. Same
     colour stops, resolution independent. */
  background: radial-gradient(ellipse 50% 53% at 50% 53%,
    var(--gx-carousel-top) 0%, var(--gx-bg-ink) 55%, var(--gx-ink-deep) 100%);
  transition: transform var(--gx-dur-slow) var(--gx-ease-out),
              width var(--gx-dur-slow) var(--gx-ease-out),
              height var(--gx-dur-slow) var(--gx-ease-out),
              margin var(--gx-dur-slow) var(--gx-ease-out),
              opacity var(--gx-dur-slow) var(--gx-ease-out),
              border-radius var(--gx-dur-slow) var(--gx-ease-out);
  will-change: transform;
}
.gx-pcard[data-pos] { pointer-events: auto; }
.gx-pcard[data-pos="-2"] { opacity: .68; transform: translateX(calc(-1 * var(--step-far))); }
.gx-pcard[data-pos="2"]  { opacity: .68; transform: translateX(var(--step-far)); }
.gx-pcard[data-pos="-1"],
.gx-pcard[data-pos="1"] {
  width: 300px; height: 460px; margin-left: -150px; margin-top: -230px; opacity: .88;
}
.gx-pcard[data-pos="-1"] { transform: translateX(calc(-1 * var(--step-near))); }
.gx-pcard[data-pos="1"]  { transform: translateX(var(--step-near)); }
.gx-pcard[data-pos="0"] {
  width: 460px; height: 600px; margin-left: -230px; margin-top: -300px;
  opacity: 1; border-radius: 28px; transform: translateX(0); z-index: 2;
}

/* Product photo. NOT screen-blended: the treated images already carry their
   own dark ground, so blending would erase them. Figma blends because its
   layers are masked cut-outs on transparent. */
.gx-pcard__img { position: absolute; inset: 0; overflow: hidden; }
/* Portrait card artwork on a transparent ground, generated by
   _design/tools/portrait_card.py. The card's radial gradient shows through and
   the blue-smoke layer sits above, so the smoke is never baked into the file. */
.gx-pcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* "Blue Smoke / Soft Atmospheric Wisps" — the SVG is not exported yet, so this
   is a CSS stand-in with the same role: soft blue haze, screen-blended.
   In Figma it sits UNDER the product because those layers are masked cut-outs
   on transparent. Our treated images are opaque and full-bleed, so a layer
   beneath them would never show — it goes over the photo instead, at a lower
   opacity, which reads the same. Swap for the asset when it lands. */
.gx-pcard__smoke {
  position: absolute;
  left: 0; right: 0;
  top: -5.17%;                          /* Figma: -31px on a 600px card */
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  /* The file carries opacity 0.32 on its group and 0.35 on its path — about
     0.11 once multiplied, which is nearly invisible over a dark photograph.
     It was painted twice for a while, to about 0.21, because the product
     photographs underneath were very dark. Once those were lifted, two layers
     over a brighter photograph washed the glow out and gave it a visible
     edge — which is what "the smoke effect got damaged" was describing. Back
     to one layer now that the photograph carries its own light. */
  background: url("../assets/icons/blue-smoke.svg") center / 100% 100% no-repeat;
}

.gx-pcard::after {                      /* Figma "Text Gradient": 288 of 600px */
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 48%;
  background: linear-gradient(to top, rgb(from var(--gx-bg-ink) r g b / 0.98), rgb(from var(--gx-bg-ink) r g b / 0));
}
.gx-pcard__body { position: absolute; inset-inline: 21px; bottom: 22px; z-index: 2; }
.gx-pcard__name {
  display: block;
  color: var(--gx-text);
  font-size: var(--gx-fs-micro);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .48px;
  text-transform: uppercase;
}
.gx-pcard__sub {
  display: block;
  margin-top: var(--gx-space-2);
  color: var(--gx-text-accent);
  font-size: var(--gx-fs-micro);        /* [DEV] Figma 10px -> 12px floor */
}
.gx-pcard[data-pos="0"] .gx-pcard__name { font-size: var(--gx-fs-lead); letter-spacing: .72px; }
.gx-pcard[data-pos="0"] .gx-pcard__sub  { font-size: var(--gx-fs-label); }

.gx-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgb(from var(--gx-bg-ink) r g b / 0.72);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius);
  color: var(--gx-text);
  cursor: pointer;
  transition: background var(--gx-dur-fast) var(--gx-ease-out),
              border-color var(--gx-dur-fast) var(--gx-ease-out);
}
.gx-carousel__btn:hover { background: var(--gx-lime); border-color: var(--gx-lime); color: var(--gx-bg-ink); }
.gx-carousel__btn--prev { left: 28px; }    /* 48px, moved 20px further left */
.gx-carousel__btn--next { right: 28px; }   /* 48px, moved 20px further right */
.gx-carousel__btn svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .gx-pcard { transition: opacity 1ms linear; }
}
@media (max-width: 1100px) {
  .gx-carousel { --step-near: 300px; --step-far: 520px; height: 520px; }
  .gx-pcard[data-pos="0"] { width: 360px; height: 470px; margin-left: -180px; margin-top: -235px; }
}
@media (max-width: 768px) {
  .gx-showcase__title { font-size: 28px; line-height: 34px; }
  .gx-carousel { --step-near: 190px; --step-far: 330px; height: 420px; }
  .gx-pcard { width: 150px; height: 234px; margin-left: -75px; margin-top: -117px; }
  .gx-pcard[data-pos="-1"], .gx-pcard[data-pos="1"] { width: 180px; height: 276px; margin-left: -90px; margin-top: -138px; }
  .gx-pcard[data-pos="0"] { width: 260px; height: 340px; margin-left: -130px; margin-top: -170px; }
  .gx-carousel__btn { width: 44px; height: 44px; }
  .gx-carousel__btn--prev { left: var(--gx-space-2); }
  .gx-carousel__btn--next { right: var(--gx-space-2); }
}

/* ---------- Home 01 — Positioning ----------------------------------- */

.gx-intro {
  position: relative;
  background: linear-gradient(106.33deg, var(--gx-bg-ink) 2%, var(--gx-surface-1) 54%, var(--gx-surface-page) 100%);
  padding-block: var(--gx-space-16) var(--gx-space-20);
  overflow: hidden;
}
/* TODO asset: "Background Pattern / Precision Rings" (two SVG groups, 8% opacity) */
.gx-intro__head {
  display: grid;
  grid-template-columns: minmax(0, 970px) minmax(0, 600px);
  gap: var(--gx-space-12) var(--gx-space-16);
  align-items: start;
}
.gx-intro__eyebrow {
  grid-column: 1 / -1;
  color: var(--gx-accent);
  font-size: var(--gx-fs-sm);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-eyebrow);
  text-transform: uppercase;
}
.gx-intro__title {
  color: var(--gx-text);
  font-size: 48px; line-height: 56px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1.4px;
  text-transform: uppercase;
}
.gx-intro__body {
  color: var(--gx-text-footer);
  font-size: 20px; line-height: 1.5;
  padding-top: var(--gx-space-16);
}

.gx-process {
  margin-top: var(--gx-space-20);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 300px));
  gap: 42px;
  justify-content: space-between;
}
.gx-process__card {
  position: relative;
  min-height: 184px;
  background: var(--gx-surface-page);
  border: 1px solid rgb(from var(--gx-border-step) r g b / 0.95);
  border-radius: var(--gx-radius);
  padding: 21px 23px;
  overflow: hidden;
}
/* Figma alternates the card ground and the accent bar colour: cyan, lime,
   cyan, lime. */
.gx-process__card:nth-child(even) { background: var(--gx-surface-3); }
.gx-process__card::before {
  content: ""; position: absolute; left: 0; top: 23px;
  width: 3px; height: 42px;
  background: var(--gx-accent-bar);
}
.gx-process__card:nth-child(even)::before { background: var(--gx-lime-bar); }
.gx-process__icon { width: 38px; height: 38px; }
.gx-process__icon img { width: 100%; height: 100%; }
.gx-process__title {
  margin-top: var(--gx-space-4);
  color: var(--gx-text);
  font-size: var(--gx-fs-label);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .56px;
  text-transform: uppercase;
}
/* Client revision, 8 Sep 2026: "Same minimum size text as in About and Why
   GlobalXGears pages". Those two pages carry their prose at 19-20px while
   the rest of the site ran 13-17px, which is what the client was comparing.
   Body copy now sits on two steps and nothing else moved: 18px (--gx-fs-lead)
   for a section's prose, 16px (--gx-fs-body) for prose inside a card or tile,
   where the box sets the measure. Eyebrows, labels and meta lines are left
   where they are — About runs those at 13px too, so raising them would have
   made the site differ from the page it is being matched to. */
.gx-process__body {
  margin-top: var(--gx-space-3);
  color: var(--gx-text-3);
  font-size: 20px;
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .gx-intro__head { grid-template-columns: 1fr; }
  .gx-intro__body { padding-top: 0; }
  .gx-process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gx-space-8); }
}
@media (max-width: 768px) {
  .gx-intro__title { font-size: 30px; line-height: 36px; letter-spacing: -.6px; }
  .gx-process { grid-template-columns: 1fr; }
}

/* ---------- Home 03 — Process (timeline) ---------------------------- */

.gx-why {
  background: linear-gradient(106.77deg, var(--gx-surface-page) 2%, var(--gx-map-bg) 54%, var(--gx-surface-page) 100%);
  padding-block: var(--gx-space-16) var(--gx-space-20);
}
.gx-why__head {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 560px);
  gap: var(--gx-space-10) var(--gx-space-16);
  align-items: start;
  justify-content: space-between;
}
.gx-why__eyebrow {
  grid-column: 1 / -1;
  color: var(--gx-accent);
  font-size: var(--gx-fs-sm);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-eyebrow);
  text-transform: uppercase;
}
.gx-why__title {
  color: var(--gx-text);
  font-size: 44px; line-height: 1.15;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1px;
  text-transform: uppercase;
}
.gx-why__title em { font-style: normal; color: var(--gx-accent); }
.gx-why__body { color: var(--gx-text-footer); font-size: 20px; padding-top: var(--gx-space-5); line-height: 1.5;}

/* The rule is drawn on the list, so it always spans exactly the steps —
   no absolutely positioned 1368px bar to keep in sync. */
.gx-steps {
  margin: var(--gx-space-24) 0 0;
  padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gx-space-6);
}
.gx-step { position: relative; padding-top: 48px; }
.gx-step::before {                      /* the connecting rule */
  content: ""; position: absolute; left: 0; right: calc(-1 * var(--gx-space-6));
  top: 7px; height: 1px; background: var(--gx-divider);
}
.gx-step:last-child::before { right: 0; }
.gx-step::after {                       /* the dot */
  content: ""; position: absolute; left: 0; top: 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--gx-accent);
}
.gx-step:last-child::after { background: var(--gx-lime); }
/* Process step numbers, marked up. The review asked for them to be made
   markedly more prominent: at the caption size they read as footnotes rather
   than as the spine of a numbered sequence. 22px is roughly twice their
   drawn presence and is the one place a size deliberately leaves the design.
   All four sequences move together — the review also asked for consistency,
   and they were four different sections using the same caption token. */
.gx-step__num {
  color: var(--gx-accent);
  font-size: 22px;
  font-weight: var(--gx-fw-bold);
}
.gx-step__name {
  margin-top: var(--gx-space-4);
  color: var(--gx-text);
  font-size: var(--gx-fs-body);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .8px;
  text-transform: uppercase;
}
.gx-step__body {
  margin-top: var(--gx-space-3);
  color: var(--gx-text-footer);
  font-size: var(--gx-fs-label);
}

@media (max-width: 1100px) {
  .gx-why__head { grid-template-columns: 1fr; }
  .gx-why__body { padding-top: 0; }
  .gx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gx-space-10); }
  .gx-step::before { display: none; }
}
@media (max-width: 768px) {
  .gx-why__title { font-size: 28px; }
  .gx-steps { grid-template-columns: 1fr; }
}

/* ---------- Home 04 — Quality --------------------------------------- */

.gx-quality {
  position: relative;
  background: linear-gradient(104.77deg, var(--gx-surface-1) 2%, var(--gx-surface-2) 54%, var(--gx-surface-1) 100%);
  padding-block: var(--gx-space-20);
  overflow: hidden;
}
.gx-quality__inner {
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(0, 560px);
  gap: var(--gx-space-16) var(--gx-space-16);
  align-items: start;
  justify-content: space-between;
}
.gx-quality__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-sm);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-eyebrow);
  text-transform: uppercase;
}
.gx-quality__title {
  margin-top: var(--gx-space-10);
  color: var(--gx-text);
  font-size: 44px; line-height: 1.15;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1px;
  text-transform: uppercase;
}
.gx-quality__title em { font-style: normal; color: var(--gx-lime); }
.gx-quality__body {
  margin-top: var(--gx-space-8);
  max-width: 610px;
  color: var(--gx-text-footer);
  font-size: 20px; line-height: 1.5;
}

.gx-qgrid {
  margin: var(--gx-space-16) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 270px));
  gap: var(--gx-space-16) 40px;
}
.gx-qitem { position: relative; padding-left: 20px; }
.gx-qitem::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 4px; height: 48px; border-radius: 1px;
  background: var(--gx-accent);
}
/* Figma marks the first item lime, the rest cyan */
.gx-qitem:first-child::before { background: var(--gx-lime); }
.gx-qitem__name {
  color: var(--gx-text);
  font-size: var(--gx-fs-body);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .7px;
  text-transform: uppercase;
}
.gx-qitem__body {
  margin-top: var(--gx-space-2);
  color: var(--gx-text-footer);
  font-size: var(--gx-fs-label);
  line-height: 18px;
}
.gx-quality__link {
  display: inline-block;
  margin-top: var(--gx-space-16);
  color: var(--gx-lime);
  font-size: var(--gx-fs-label);
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-decoration: none;
}
.gx-quality__link:hover { text-decoration: underline; }

.gx-quality__media { position: relative; }
.gx-quality__media::before,
.gx-quality__media::after {
  content: ""; position: absolute; pointer-events: none;
}
/* Both layers are taller than the 450px frame, so they are centred on it
   vertically rather than pinned to its top. */
.gx-quality__media::before {          /* atmospheric glow, behind everything */
  left: -14%; top: 50%; transform: translateY(-50%);
  width: 766px; height: 688px; z-index: 0;
  background: url("../assets/icons/quality-glow.svg") 0 0 / 100% 100% no-repeat;
}
.gx-quality__media::after {           /* Mixed Outline Grid / Large Cells */
  left: -18%; top: 50%; transform: translateY(-50%);
  width: 752px; height: 650px; z-index: 1;
  background: url("../assets/icons/quality-grid.svg") 0 0 / 100% 100% no-repeat;
}
.gx-quality__frame, .gx-quality__badge { position: relative; z-index: 2; }
.gx-quality__frame {
  position: relative;
  border: 1px solid rgb(from var(--gx-accent-2) r g b / 0.26);
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 560 / 450;
  filter: drop-shadow(0 20px 22px rgb(from var(--gx-shadow-deep) r g b / 0.48));
}
.gx-quality__frame img { width: 100%; height: 100%; object-fit: cover; }
.gx-quality__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(from var(--gx-bg-ink) r g b / 0.02), rgb(from var(--gx-bg-ink) r g b / 0.04) 60%, rgb(from var(--gx-bg-ink) r g b / 0.45));
}
.gx-quality__badge {
  position: absolute; left: 30px; bottom: 26px; z-index: 2;
  color: var(--gx-lime);
  font-size: 24px; font-weight: var(--gx-fw-bold);
  letter-spacing: 1px;
}

@media (max-width: 1100px) {
  .gx-quality__inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gx-quality__title { font-size: 28px; }
  .gx-qgrid { grid-template-columns: 1fr; gap: var(--gx-space-10); }
}

/* ---------- Home 05 — Engineering Data ------------------------------
   Mirror of 04 Quality: image left, copy right. Same frame treatment, same
   glow + grid backdrop, flipped. */

.gx-engdata {
  position: relative;
  background: linear-gradient(109.37deg, var(--gx-bg-ink) 2%, var(--gx-surface-4) 54%, var(--gx-surface-page) 100%);
  padding-block: var(--gx-space-16) var(--gx-space-20);
  overflow: hidden;
}
.gx-engdata__inner {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 654px);
  gap: var(--gx-space-16);
  align-items: start;
  justify-content: space-between;
}
.gx-engdata__media { position: relative; }
.gx-engdata__media::before,
.gx-engdata__media::after { content: ""; position: absolute; pointer-events: none; }
.gx-engdata__media::before {
  left: -18%; top: 50%; transform: translateY(-50%);
  width: 782px; height: 590px; z-index: 0;
  background: url("../assets/icons/quality-glow.svg") 0 0 / 100% 100% no-repeat;
}
.gx-engdata__media::after {
  left: -20%; top: 50%; transform: translateY(-50%);
  width: 710px; height: 580px; z-index: 1;
  background: url("../assets/icons/quality-grid.svg") 0 0 / 100% 100% no-repeat;
}
.gx-engdata__frame {
  position: relative; z-index: 2;
  border: 1px solid rgb(from var(--gx-accent-2) r g b / 0.24);
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 560 / 450;
  filter: drop-shadow(0 18px 20px rgb(from var(--gx-shadow-deep) r g b / 0.44));
}
.gx-engdata__frame img { width: 100%; height: 100%; object-fit: cover; }
.gx-engdata__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(from var(--gx-bg-ink) r g b / 0.02), rgb(from var(--gx-bg-ink) r g b / 0.04) 60%, rgb(from var(--gx-bg-ink) r g b / 0.45));
}

.gx-engdata__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-sm);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-eyebrow);
  text-transform: uppercase;
}
.gx-engdata__title {
  margin-top: var(--gx-space-8);
  color: var(--gx-text);
  font-size: 38px; line-height: 1.15;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1px;
  text-transform: uppercase;
}
.gx-engdata__title em { font-style: normal; color: var(--gx-accent); }
.gx-engdata__body {
  margin-top: var(--gx-space-8);
  color: var(--gx-text-footer);
  font-size: 20px; line-height: 1.5;}

.gx-resources {
  margin: var(--gx-space-16) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 314px));
  gap: var(--gx-space-6);
}
.gx-resource {
  display: block;
  min-height: 102px;
  background: var(--gx-surface-page);
  border: 1px solid var(--gx-divider);
  border-radius: 3px;
  padding: var(--gx-space-6) 18px;
  text-decoration: none;
  transition: border-color var(--gx-dur-fast) var(--gx-ease-out),
              background var(--gx-dur-fast) var(--gx-ease-out);
}
.gx-resource:hover { border-color: var(--gx-accent); background: var(--gx-map-bg); }
.gx-resource__name {
  display: block;                       /* Figma: title y651, desc y678 */
  color: var(--gx-text);
  font-size: var(--gx-fs-micro);
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-resource__body {
  display: block;
  margin-top: var(--gx-space-3);
  color: var(--gx-text-footer);
  font-size: var(--gx-fs-micro);        /* [DEV] Figma 10px -> 12px floor */
}

@media (max-width: 1100px) {
  .gx-engdata__inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gx-engdata__title { font-size: 26px; }
  .gx-resources { grid-template-columns: 1fr; }
}

/* ---------- Gear Types archive -------------------------------------- */

.gx-arch-hero {
  position: relative;
  background: var(--gx-surface-page);
  min-height: 620px;
  display: flex; align-items: center;
  overflow: hidden;
  padding-block: var(--gx-space-20);
}
/* TODO asset: "Ambient cyan glow" (700x700) not exported */
.gx-arch-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 820px) minmax(0, 570px);
  gap: var(--gx-space-16);
  align-items: start;
  justify-content: space-between;
}
.gx-arch-hero__eyebrow {
  grid-column: 1 / -1;
  color: var(--gx-accent);
  font-size: var(--gx-fs-eyebrow);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: 2.88px;
  text-transform: uppercase;
}
.gx-arch-hero__title {
  margin-top: var(--gx-space-6);
  color: var(--gx-text);
  font-size: 64px; line-height: 68px;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-arch-hero__body {
  color: var(--gx-text-3);
  font-size: 20px; line-height: 1.5;
  padding-top: var(--gx-space-16);
}
.gx-arch-hero .gx-btn { margin-top: var(--gx-space-10); height: 52px; }

.gx-listing-intro {
  background: var(--gx-surface-page);
  border-top: 1px solid rgb(from var(--gx-divider) r g b / 0.45);
}
.gx-listing-intro__inner {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--gx-space-12);
  padding-block: var(--gx-space-16);
}
.gx-listing-intro h2 {
  color: var(--gx-accent);
  font-size: var(--gx-fs-sm);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-eyebrow);
  text-transform: uppercase;
}
.gx-listing-intro p { color: var(--gx-text-3); font-size: 20px; line-height: 1.5; }

.gx-catalogue { background: var(--gx-surface-page); padding-block: var(--gx-space-16) var(--gx-space-24); }
.gx-catalogue__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.gx-cat-card {
  position: relative;
  display: block;
  background: var(--gx-surface-4);
  border-radius: 10px;
  overflow: hidden;
  min-height: 420px;
  text-decoration: none;
}
/* Both wrappers are <span> in the markup (the whole card is one <a>), so they
   need display:block or height/padding are ignored, the media takes the card's
   full 420px and overflow:hidden eats the entire text block. */
/* overflow:hidden matters on hover: the photo scales to 1.04 about its centre,
   so its bottom edge drops 5px past the media box — past the fade that
   dissolves it into the card ground, which ends with the box. That left a
   thin strip of hard-edged, un-faded photograph between the image and the
   text for as long as the pointer was over the card. Clipped to the box, the
   fade always has the last word. */
.gx-cat-card__media { display: block; position: relative; height: 252px; overflow: hidden; }
.gx-cat-card__media img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
  transition: transform var(--gx-dur-slow) var(--gx-ease-out);
}
.gx-cat-card:hover .gx-cat-card__media img { transform: scale(1.04); }
/* Figma "Image fade" — the exported asset rather than a CSS approximation:
   646x150 sitting at y=102, so the photo dissolves into the card ground. */
.gx-cat-card__media::after {
  content: ""; position: absolute; inset-inline: 0; top: 102px; height: 150px;
  background: url("../assets/icons/image-fade.png") 0 0 / 100% 100% no-repeat;
}

/* Text block spaced to land on Figma's own y positions measured from the card
   top: 272 / 304 / 342 / 374. */
.gx-cat-card__body { display: block; padding: 20px 28px 28px; }
.gx-cat-card__num {
  display: block; line-height: 15px;
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);        /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-semibold);
}
.gx-cat-card__name {
  display: block;
  margin-top: 17px; line-height: 27px;
  color: var(--gx-text);
  font-size: 22px;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-cat-card__desc {
  display: block;
  margin-top: 11px;
  max-width: 500px;
  color: var(--gx-text-3);
  font-size: 20px;
  line-height: 1.5;
}
.gx-cat-card__more {
  display: block;
  margin-top: 11px;
  text-align: right;
  color: var(--gx-lime);
  font-size: var(--gx-fs-micro);        /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .gx-arch-hero__inner,
  .gx-listing-intro__inner { grid-template-columns: 1fr; }
  .gx-arch-hero__body { padding-top: 0; }
  .gx-catalogue__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gx-arch-hero__title { font-size: 34px; line-height: 40px; }
  .gx-cat-card__name { font-size: 18px; }
}

/* ============================================================
   gxg/page-hero + gxg/media-text
   One block covers the alternating sections on About, Why, Quality and
   Industries: heading + copy + an optional image on either side, an optional
   accent list, an optional outline-grid backdrop. 16 near-identical Figma
   sections collapse into this. M3 (fade in from the image's side) lives here.
   ============================================================ */

.gx-phero-page {
  position: relative;
  min-height: 730px;
  display: flex; align-items: center;
  background: var(--gx-bg);
  overflow: hidden;
}
.gx-phero-page__bg { position: absolute; inset: 0; }
.gx-phero-page__bg img { width: 100%; height: 100%; object-fit: cover; }
.gx-phero-page__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gx-bg-header) 0%, rgb(from var(--gx-bg-header) r g b / 0.96) 34%,
                              rgb(from var(--gx-bg-header) r g b / 0.5) 63%, rgb(from var(--gx-bg-header) r g b / 0.08) 100%);
}
.gx-phero-page__inner { position: relative; z-index: 1; padding-block: var(--gx-space-16); }
.gx-crumbs {
  color: var(--gx-accent);
  font-size: var(--gx-fs-eyebrow);
  text-transform: uppercase;
}
.gx-phero-page__title {
  margin-top: var(--gx-space-12);
  max-width: 900px;
  color: var(--gx-text-bright);
  font-size: 74px; line-height: 1.12;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-phero-page__title em { font-style: normal; color: var(--gx-accent); }
.gx-phero-page__lead {
  margin-top: var(--gx-space-12);
  max-width: 590px;
  color: var(--gx-text-2);
  font-size: 22px; line-height: 1.5;
}
.gx-phero-page__meta {
  margin-top: var(--gx-space-12);
  display: flex; flex-wrap: wrap; gap: var(--gx-space-3) var(--gx-space-6);
  color: var(--gx-text-bright);
  font-size: var(--gx-fs-label);
  text-transform: uppercase;
}
/* Where this line leads with the certification — About does, the others carry
   a tagline instead — it gets the same treatment as the home page hero: the
   credential on its own line, at twice the size of what follows it. Marked up
   as <b> + <span> on both pages, so one rule serves both. */
.gx-phero-page__meta b {
  flex-basis: 100%;
  color: var(--gx-accent);
  font-size: 24px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .6px;
}
.gx-phero-page__meta span { color: var(--gx-text-3); font-weight: var(--gx-fw-medium); }

.gx-mt { position: relative; background: var(--gx-bg); padding-block: var(--gx-space-20); overflow: hidden; }
.gx-mt--tint {
  background: linear-gradient(105.9deg, var(--gx-surface-1) 2%, var(--gx-surface-2) 54%, var(--gx-surface-1) 100%);
}
.gx-mt__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gx-space-16) var(--gx-space-20);
  align-items: center;
}
/* image on the right by default; --flip puts it first */
.gx-mt--flip .gx-mt__media { order: -1; }
.gx-mt--wide .gx-mt__inner { grid-template-columns: 750px minmax(0, 538px); }
.gx-mt--solo .gx-mt__inner { grid-template-columns: minmax(0, 900px) minmax(0, 320px); align-items: start; }

.gx-mt__media { position: relative; }
.gx-mt__media img { width: 100%; height: auto; border-radius: 20px; display: block; }
/* optional outline-grid backdrop, offset behind the photo */
.gx-mt--grid .gx-mt__media::before {
  content: ""; position: absolute; z-index: -1;
  left: -8%; top: 50%; transform: translateY(-50%);
  width: 720px; height: 616px;
  background: url("../assets/icons/quality-grid.svg") 0 0 / 100% 100% no-repeat;
}
.gx-mt--flip.gx-mt--grid .gx-mt__media::before { left: auto; right: -8%; }

.gx-mt__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-label);
  text-transform: uppercase;
}
.gx-mt__title {
  margin-top: var(--gx-space-6);
  color: var(--gx-text-bright);
  font-size: 48px; line-height: 1.12;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-mt__body { margin-top: var(--gx-space-8); color: var(--gx-text-2); font-size: 20px; line-height: 1.5; }
.gx-mt__body--sm { font-size: 19px; }
.gx-mt__note { margin-top: var(--gx-space-8); color: var(--gx-text-2); font-size: var(--gx-fs-lead); line-height: 1.5; }

.gx-mt__lists { margin-top: var(--gx-space-12); display: flex; flex-wrap: wrap; gap: var(--gx-space-12) 44px; }
.gx-mt__list { margin: 0; padding: 0; list-style: none; color: var(--gx-accent); font-size: 21px; line-height: 1.5; }
.gx-mt__list--lime { color: var(--gx-lime); font-weight: var(--gx-fw-semibold); text-transform: uppercase; }
.gx-mt__kicker {
  margin-top: var(--gx-space-12);
  color: var(--gx-lime);
  font-size: 29px; font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-mt__stamp {
  color: var(--gx-lime);
  font-size: 26px; line-height: 1.5;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-mt__link {
  display: inline-block; margin-top: var(--gx-space-12);
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-label);
  text-transform: uppercase; text-decoration: none;
}
.gx-mt__link:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .gx-mt__inner,
  .gx-mt--wide .gx-mt__inner,
  .gx-mt--solo .gx-mt__inner { grid-template-columns: 1fr; }
  .gx-mt--flip .gx-mt__media { order: 0; }
  .gx-mt--grid .gx-mt__media::before { display: none; }
}
@media (max-width: 768px) {
  .gx-phero-page { min-height: 0; }
  .gx-phero-page__title { font-size: 36px; }
  .gx-phero-page__lead { font-size: 18px; }
  .gx-mt__title { font-size: 28px; }
  .gx-mt__body { font-size: 17px; }
  .gx-mt__list, .gx-mt__stamp { font-size: 18px; }
  .gx-mt__kicker { font-size: 22px; }

  /* Client revision, 8 Sep 2026, second pass. The first pass read the
     instruction as a floor and set body copy on two steps, 18px and 16px. The
     client's answer was that they still could not read it without glasses, and
     that the instruction was parity, not a floor: the same size as About and
     Why. Those two pages run their prose at 20px with a 1.5 line, and drop to
     17px below 768. Every other piece of prose on the site now does the same,
     at both widths, so there is one body size rather than a scale.

     The one exception the client named is the steel equivalents comparison
     table on Engineering Data — a 32-row material reference where 20px would
     cost more in legibility than it gains. Its own type is untouched. */
  .gx-process__body, .gx-startcard__body, .gx-cstep__body, .gx-pcap__body,
  .gx-qstep__body, .gx-intro__body, .gx-engdata__body, .gx-indgrid__lead,
  .gx-yourind__copy, .gx-talk__body, .gx-qdocs__copy, .gx-qconf__body,
  .gx-prop__body, .gx-pcaps__lead, .gx-ihero__lead, .gx-quality__body,
  .gx-cta__body, .gx-iso__copy, .gx-qprocess__lead, .gx-showcase__lead,
  .gx-why__body, .gx-steelnote__body, .gx-cat-card__desc, .gx-trust__body,
  .gx-hero__lead, .gx-phero-page--band .gx-phero-page__lead,
  .gx-htrow__body p, .gx-listing-intro p, .gx-htselect__body,
  .gx-htselect__note, .gx-arch-hero__body, .gx-steelhero__lead,
  .gx-htintro__body p {
    font-size: 17px;
  }
}

/* ---- media-text: three more variants the Why page needs -------------
   --banner  two-column header, then a full-width image, then a kicker
   --scrim   full-bleed photo with the left scrim, copy over it
   --centre  centred copy, no image
   --defs    two columns of term / definition pairs                     */

.gx-mt--banner .gx-mt__inner { align-items: start; }
.gx-mt__banner {
  margin-top: var(--gx-space-16);
  border-radius: 20px; overflow: hidden;
}
.gx-mt__banner img { width: 100%; height: 310px; object-fit: cover; display: block; }
.gx-mt__kicker--sm { font-size: 17px; margin-top: var(--gx-space-10); }

.gx-mt--scrim { position: relative; padding-block: 0; min-height: 600px; display: flex; align-items: center; }
.gx-mt--scrim .gx-mt__photo { position: absolute; inset: 0; }
.gx-mt--scrim .gx-mt__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.gx-mt--scrim .gx-mt__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gx-bg-header) 0%, rgb(from var(--gx-bg-header) r g b / 0.96) 34%,
                              rgb(from var(--gx-bg-header) r g b / 0.5) 63%, rgb(from var(--gx-bg-header) r g b / 0.08) 100%);
}
.gx-mt--scrim .gx-mt__inner {
  position: relative; z-index: 1;
  grid-template-columns: minmax(0, 640px);
  padding-block: var(--gx-space-16);
}

.gx-mt--centre { text-align: center; }
.gx-mt--centre .gx-mt__inner { grid-template-columns: minmax(0, 1060px); justify-content: center; }
.gx-mt--centre .gx-mt__body { margin-inline: auto; }

.gx-mt__defs {
  margin: var(--gx-space-12) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 634px));
  gap: var(--gx-space-10) 100px;
}
.gx-mt__defs dt {
  color: var(--gx-accent);
  font-size: 21px; line-height: 1.5;
  font-weight: var(--gx-fw-semibold);
  text-transform: uppercase;
}
.gx-mt__defs dd { margin: 0 0 var(--gx-space-8); color: var(--gx-text-2); font-size: 21px; line-height: 1.5; }
.gx-mt__defs dd:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  .gx-mt__defs { grid-template-columns: 1fr; gap: var(--gx-space-8); }
  .gx-mt--scrim { min-height: 0; }
}
@media (max-width: 768px) {
  .gx-mt__banner img { height: 200px; }
  .gx-mt__defs dt, .gx-mt__defs dd { font-size: 17px; }
}

/* ==================== QUALITY PAGE ==================================
   Figma 392:3. Hero and CTA band reuse .gx-phero-page / .gx-cta; these
   are the four sections the page adds.                                */

/* ---- 392:30 ISO certification band (1512x432) --------------------- */
.gx-iso {
  background: linear-gradient(102deg, var(--gx-surface-1) 0%, var(--gx-surface-2) 52%, var(--gx-surface-page) 100%);
  padding-block: var(--gx-space-20);
}
.gx-iso__inner {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 788px);
  gap: var(--gx-space-12) var(--gx-space-20);
  align-items: start;
  justify-content: space-between;
}
.gx-iso__mark {                          /* Figma: x72, 480x240, two lines */
  color: var(--gx-lime);
  font-size: 74px; line-height: 120px;
  font-weight: var(--gx-fw-bold);
  letter-spacing: -1.5px;
}
.gx-iso__title {
  color: var(--gx-text-2);
  font-size: 19px; line-height: 30px;
  font-weight: var(--gx-fw-medium);
  letter-spacing: .4px;
  text-transform: uppercase;
}
.gx-iso__copy {
  margin-top: var(--gx-space-8);
  max-width: 660px;
  color: var(--gx-text-2);
  font-size: 20px; line-height: 1.5;
}

/* ---- 392:33 quality throughout every project (1512x723) ----------- */
.gx-qprocess { background: var(--gx-bg); padding-block: var(--gx-space-20) var(--gx-space-24); }
.gx-qprocess__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.gx-qprocess__title {
  margin-top: var(--gx-space-6);
  max-width: 1100px;
  color: var(--gx-text);
  font-size: 46px; line-height: 67px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1px;
  text-transform: uppercase;
}
.gx-qprocess__lead {
  margin-top: var(--gx-space-6);
  max-width: 1000px;
  color: var(--gx-text-2);
  font-size: 20px; line-height: 1.5;
}

/* Six items, three per column. Figma orders them DOWN each column
   (Engineering Review / Material Verification / Manufacturing Planning
   on the left), so the grid flows by column, not by row. */
.gx-qsteps {
  margin: var(--gx-space-16) 0 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 639px));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: var(--gx-space-10) 90px;
  justify-content: space-between;
}
.gx-qstep__name {
  color: var(--gx-accent);
  font-size: 16px; line-height: 24px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .4px;
  text-transform: uppercase;
}
.gx-qstep__body {
  margin-top: var(--gx-space-2);
  color: var(--gx-text-accent-2);
  font-size: 20px; line-height: 1.5;
}

/* ---- 392:40 quality documentation (1512x820) ---------------------- */
.gx-qdocs { background: var(--gx-bg-ink); padding-block: var(--gx-space-20); }
.gx-qdocs__inner {
  display: grid;
  grid-template-columns: minmax(0, 848px) minmax(0, 452px);
  gap: var(--gx-space-16) var(--gx-space-16);
  align-items: start;
  justify-content: space-between;
}
/* Figma: 520x560 at (72,84); 300x260 at (620,84); 300x272 at (620,372).
   Kept as ratios so the collage scales with the column. */
.gx-qdocs__collage {
  display: grid;
  grid-template-columns: 520fr 300fr;
  grid-template-rows: 260fr 272fr;
  gap: 12px 28px;
}
.gx-qdocs__shot {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--gx-card-bg);
}
.gx-qdocs__shot--tall { grid-row: 1 / span 2; }
.gx-qdocs__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gx-qdocs__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.gx-qdocs__title {
  margin-top: var(--gx-space-6);
  color: var(--gx-text);
  font-size: 40px; line-height: 62px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -.8px;
  text-transform: uppercase;
}
.gx-qdocs__copy {
  margin-top: var(--gx-space-6);
  color: var(--gx-text-2);
  font-size: 20px; line-height: 1.5;
}
.gx-qdocs__note {
  margin-top: var(--gx-space-16);
  color: var(--gx-lime);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

/* ---- 392:48 engineering confidence (1512x535) --------------------- */
.gx-qconf {
  position: relative;
  background:
    radial-gradient(ellipse 62% 120% at 50% 50%, rgb(from var(--gx-surface-lead) r g b / 0.85) 0%, rgb(from var(--gx-bg-ink) r g b / 0) 72%),
    var(--gx-bg-ink);
  padding-block: var(--gx-space-20);
  text-align: center;
}
.gx-qconf__inner { max-width: 1152px; margin-inline: auto; }
.gx-qconf__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.gx-qconf__title {
  margin-top: var(--gx-space-8);
  color: var(--gx-text);
  font-size: 46px; line-height: 67px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1px;
  text-transform: uppercase;
}
.gx-qconf__chain {
  margin-top: var(--gx-space-8);
  color: var(--gx-lime);
  font-size: 18px; line-height: 28px;
  font-weight: var(--gx-fw-semibold);
}
.gx-qconf__body {
  margin: var(--gx-space-8) auto 0;
  max-width: 920px;
  color: var(--gx-text-2);
  font-size: 20px; line-height: 1.5;
}

/* ---- 392:53 continual improvement: the page hero as a short band -- */
.gx-phero-page--band { min-height: 650px; }
.gx-phero-page--band .gx-phero-page__title { font-size: 46px; line-height: 58px; }
.gx-phero-page--band .gx-phero-page__lead  { font-size: 20px; line-height: 1.5; }
.gx-phero-page--band .gx-phero-page__meta  { font-size: var(--gx-fs-micro); }
/* photo sits right, copy left — mirror of the page hero's scrim */
.gx-phero-page--band .gx-phero-page__bg::after {
  background: linear-gradient(90deg, var(--gx-ink-deep) 0%, rgb(from var(--gx-ink-deep) r g b / 0.94) 30%,
                              rgb(from var(--gx-ink-deep) r g b / 0.55) 58%, rgb(from var(--gx-ink-deep) r g b / 0.12) 100%);
}

@media (max-width: 1100px) {
  .gx-iso__inner,
  .gx-qdocs__inner { grid-template-columns: 1fr; }
  .gx-qsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gx-space-8) 40px; }
}
@media (max-width: 768px) {
  .gx-iso__mark    { font-size: 46px; line-height: 62px; }
  .gx-iso__title   { font-size: 17px; line-height: 26px; }
  .gx-qprocess__title,
  .gx-qconf__title { font-size: 28px; line-height: 38px; }
  .gx-qdocs__title { font-size: 30px; line-height: 42px; }
  .gx-qconf__chain { font-size: 16px; line-height: 26px; }
  .gx-qsteps { grid-template-columns: 1fr; grid-auto-flow: row; gap: var(--gx-space-8); }
  .gx-qdocs__collage { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .gx-qdocs__shot--tall { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 11; }
  .gx-phero-page--band { min-height: 0; }
  .gx-phero-page--band .gx-phero-page__title { font-size: 30px; line-height: 40px; }
}

/* ==================== INDUSTRIES PAGE ===============================
   Figma 568:2. All four sections are new; header, footer and buttons
   are the shared chrome.                                             */

/* ---- 568:22 hero (1512x760) -------------------------------------- */
/* This page sits on a 96px content gutter, not the 72px the rest of the
   site uses — Figma puts every Industries section at x96 while the header
   logo stays at x72. */
.gx-ihero, .gx-indgrid, .gx-yourind, .gx-talk { --gx-gutter: var(--gx-space-24); }

.gx-ihero {
  position: relative;
  background: var(--gx-bg);
  padding-block: var(--gx-space-24) var(--gx-space-20);
  overflow: hidden;
}
/* "Technical Grid Band": 1512x330 across the lower part of the hero */
.gx-ihero::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 330px;
  background:
    url("../assets/intro/technical-grid.svg") center / cover no-repeat,
    linear-gradient(180deg, rgb(from var(--gx-map-bg) r g b / 0) 0%, rgb(from var(--gx-map-bg) r g b / 0.55) 40%, rgb(from var(--gx-map-bg) r g b / 0.75) 100%);
  pointer-events: none;
}
.gx-ihero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(0, 620px);
  gap: var(--gx-space-16) var(--gx-space-20);
  align-items: start;                    /* Figma: copy and photo both start at y100 */
  justify-content: space-between;
}
.gx-ihero__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.gx-ihero__title {
  margin-top: var(--gx-space-10);
  color: var(--gx-text);
  font-size: 54px; line-height: 68px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1.4px;
  text-transform: uppercase;
}
.gx-ihero__lead {
  margin-top: var(--gx-space-12);
  max-width: 570px;
  color: var(--gx-text-2);
  font-size: 20px; line-height: 1.5;
}
/* Figma puts a 3px cyan rail 27px to the left of the photo */
/* No overflow:hidden here — the cyan rail is a ::before sitting 27px
   outside the frame, and clipping would eat it. object-fit does the crop. */
.gx-ihero__media {
  position: relative;
  margin: 0 0 0 27px;
  aspect-ratio: 620 / 560;
}
.gx-ihero__media::before {
  content: "";
  position: absolute; left: -27px; top: 0; bottom: 0; width: 3px;
  background: var(--gx-accent);
}
.gx-ihero__media::after {                /* "Industries / Image Gradient" */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgb(from var(--gx-bg) r g b / 0) 30%, rgb(from var(--gx-bg) r g b / 0.55) 100%);
}
.gx-ihero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 570:2 industry grid (1512x1530) ----------------------------- */
.gx-indgrid { background: var(--gx-bg-ink); padding-block: var(--gx-space-20) var(--gx-space-24); }
.gx-rule { display: block; width: 96px; height: 3px; background: var(--gx-accent); }
.gx-indgrid__head {
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(0, 560px);
  gap: var(--gx-space-10) var(--gx-space-20);
  align-items: end;
  justify-content: space-between;
}
.gx-indgrid__eyebrow {
  margin-top: var(--gx-space-6);
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.gx-indgrid__title {
  margin-top: var(--gx-space-5);
  color: var(--gx-text);
  font-size: 44px; line-height: 58px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1.1px;
  text-transform: uppercase;
}
.gx-indgrid__lead { color: var(--gx-text-2); font-size: 20px; line-height: 1.5; }

.gx-indgrid__list {
  margin: var(--gx-space-16) 0 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 400px));
  gap: 24px;                             /* Figma pitch 424/214 on 400x190 */
  justify-content: space-between;
}
.gx-ind-card {
  position: relative;
  min-height: 190px;
  padding: 28px;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--gx-map-bg) 0%, var(--gx-bg-ink) 100%);
  border: 1px solid rgb(from var(--gx-map-border) r g b / 0.8);
  border-radius: 4px;
  transition: border-color var(--gx-dur-fast) var(--gx-ease-out),
              transform var(--gx-dur-fast) var(--gx-ease-out);
}
.gx-ind-card:hover { border-color: var(--gx-accent); transform: translateY(-2px); }
.gx-ind-card::before {                   /* accent bar, 54x3 */
  content: ""; position: absolute; left: 28px; top: 28px;
  width: 54px; height: 3px; background: var(--gx-accent);
}
.gx-ind-card::after {                    /* corner mark, 22x1 */
  content: ""; position: absolute; right: 28px; bottom: 29px;
  width: 22px; height: 1px; background: rgb(from var(--gx-text-3) r g b / 0.55);
}
.gx-ind-card--lime::before { background: var(--gx-lime); }
.gx-ind-card__num {
  margin-top: 22px;
  color: var(--gx-text-3);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-medium);
  letter-spacing: .8px;
}
.gx-ind-card__name {
  margin-top: 22px;
  color: var(--gx-text);
  font-size: 17px; line-height: 26px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ---- 572:2 not on the list (1512x500) ---------------------------- */
.gx-yourind { background: var(--gx-bg); padding-block: var(--gx-space-20); }
.gx-yourind__inner {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 600px);
  gap: var(--gx-space-16) var(--gx-space-20);
  align-items: start;
  justify-content: space-between;
}
.gx-yourind__body {
  padding-left: 32px;
  border-left: 4px solid var(--gx-lime);
}
.gx-yourind__eyebrow {
  color: var(--gx-lime);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.gx-yourind__title {
  margin-top: var(--gx-space-6);
  color: var(--gx-text);
  font-size: 42px; line-height: 54px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1px;
  text-transform: uppercase;
}
.gx-yourind__copy {
  margin-top: var(--gx-space-8);
  max-width: 570px;
  color: var(--gx-text-2);
  font-size: 20px; line-height: 1.5;
}

.gx-startpoints {
  position: relative;
  padding: 32px;
  background: linear-gradient(150deg, var(--gx-surface-5) 0%, var(--gx-bg-ink) 100%);
  border: 1px solid rgb(from var(--gx-map-border) r g b / 0.8);
  border-radius: 4px;
}
.gx-startpoints__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.gx-startpoints__list li {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: baseline;
  padding-block: var(--gx-space-4) var(--gx-space-5);
  border-bottom: 1px solid rgb(from var(--gx-map-border) r g b / 0.8);
}
.gx-startpoints__list li:last-child { border-bottom: 0; }
.gx-startpoints__num {
  color: var(--gx-accent);
  font-size: 22px;
  font-weight: var(--gx-fw-medium);
}
.gx-startpoints__name {
  color: var(--gx-text);
  font-size: 16px; line-height: 26px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.gx-startpoints__accent {
  display: block; margin: var(--gx-space-10) 0 0 auto;
  width: 120px; height: 4px; background: var(--gx-lime);
}

/* ---- 572:18 talk to our team (1512x510) -------------------------- */
.gx-talk {
  background: linear-gradient(102deg, var(--gx-map-bg) 0%, var(--gx-surface-5) 55%, var(--gx-bg-ink) 100%);
  padding-block: var(--gx-space-20);
}
.gx-talk__inner {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(0, 596px);
  gap: var(--gx-space-12) var(--gx-space-20);
  align-items: start;
  justify-content: space-between;
}
.gx-talk__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.gx-talk__title {
  margin-top: var(--gx-space-6);
  color: var(--gx-text);
  font-size: 46px; line-height: 60px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1.1px;
  text-transform: uppercase;
}
.gx-talk__body { color: var(--gx-text-2); font-size: 20px; line-height: 1.5; }
.gx-talk__actions {
  margin-top: var(--gx-space-16);
  display: flex; align-items: center; gap: var(--gx-space-4);
}
.gx-talk__actions .gx-btn { flex: none; height: 56px; }
.gx-talk__rule { flex: 1 1 auto; height: 2px; background: rgb(from var(--gx-accent) r g b / 0.5); }

@media (max-width: 1200px) {
  .gx-indgrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .gx-ihero__inner,
  .gx-indgrid__head,
  .gx-yourind__inner,
  .gx-talk__inner { grid-template-columns: 1fr; }
  .gx-indgrid__head { align-items: start; }
}
@media (max-width: 768px) {
  .gx-ihero { padding-block: var(--gx-space-12) var(--gx-space-16); }
  .gx-ihero__title  { font-size: 34px; line-height: 44px; }
  .gx-ihero__media  { margin-left: 20px; }
  .gx-ihero__media::before { left: -20px; }
  .gx-indgrid__title { font-size: 30px; line-height: 40px; }
  .gx-indgrid__list  { grid-template-columns: 1fr; gap: 14px; }
  .gx-ind-card { min-height: 0; padding: 22px; }
  .gx-ind-card::before { left: 22px; top: 22px; }
  .gx-ind-card::after  { right: 22px; bottom: 22px; }
  .gx-ind-card__num  { margin-top: 18px; }
  .gx-ind-card__name { margin-top: 14px; font-size: 16px; line-height: 24px; }
  .gx-yourind__body  { padding-left: 20px; }
  .gx-yourind__title { font-size: 30px; line-height: 40px; }
  .gx-startpoints    { padding: 22px; }
  .gx-talk__title    { font-size: 30px; line-height: 40px; }
  .gx-talk__actions  { flex-direction: column; align-items: stretch; }
  .gx-talk__rule     { display: none; }
}

/* ============ CUSTOM ENGINEERED PRODUCTS PAGE =======================
   Figma 426:2. The hero is the Industries hero with one modifier; the
   rest is new. Same 96px content gutter.                             */

.gx-prop, .gx-croute, .gx-pcaps, .gx-starts { --gx-gutter: var(--gx-space-24); }

.gx-ihero--rule .gx-ihero__media { aspect-ratio: 555 / 570; }
.gx-ihero--rule .gx-ihero__body { padding-top: 15px; }
/* "Technical Top Rule" (564:5): 185x2 sitting 20px above the photo's top
   left corner. Its own element — a pseudo would collide with the rail. */
.gx-ihero__toprule {
  position: absolute; left: 0; top: -20px;
  width: 185px; height: 2px;
  background: var(--gx-accent);
}

/* ---- 426:30 every project is different (1512x470) ----------------- */
.gx-prop { background: var(--gx-bg-ink); padding-block: var(--gx-space-20); }
.gx-prop__inner {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 640px);
  gap: var(--gx-space-10) var(--gx-space-16);
  align-items: start;
  justify-content: space-between;
}
.gx-prop__title {
  color: var(--gx-text);
  font-size: 34px; line-height: 46px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -.8px;
  text-transform: uppercase;
}
.gx-prop__body { color: var(--gx-text-2); font-size: 20px; line-height: 1.5; }
.gx-prop__chain {
  margin-top: var(--gx-space-16);
  color: var(--gx-lime);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ---- 426:34 a controlled route (1512x720) ------------------------ */
.gx-croute { background: var(--gx-bg); padding-block: var(--gx-space-20) var(--gx-space-24); }
.gx-croute__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.gx-croute__title {
  margin-top: var(--gx-space-6);
  max-width: 590px;
  color: var(--gx-text);
  font-size: 34px; line-height: 46px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -.8px;
  text-transform: uppercase;
}
.gx-croute__list {
  margin: var(--gx-space-20) 0 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 294px));
  gap: 36px;                             /* Figma pitch 330 on 294 */
  justify-content: space-between;
}
.gx-cstep {
  min-height: 205px;
  padding: 24px;
  background: var(--gx-surface-1);
  border: 1px solid rgb(from var(--gx-border-card) r g b / 0.8);
  border-radius: 4px;
}
.gx-cstep--lime { background: var(--gx-map-bg); border-color: rgb(from var(--gx-lime-border) r g b / 0.35); }
.gx-cstep__num {
  display: block;
  color: var(--gx-accent);
  font-size: 22px;         /* [DEV] Figma 11px; raised after the first-draft review */
  font-weight: var(--gx-fw-bold);
  letter-spacing: .8px;
}
.gx-cstep--lime .gx-cstep__num { color: var(--gx-lime); }
.gx-cstep__name {
  margin-top: var(--gx-space-8);
  color: var(--gx-text);
  font-size: 16px; line-height: 24px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.gx-cstep__body {
  margin-top: var(--gx-space-4);
  color: var(--gx-text-3);
  font-size: 20px; line-height: 1.5;
}

/* ---- 426:53 products (1512x950) ---------------------------------- */
.gx-pcaps { background: var(--gx-bg-ink); padding-block: var(--gx-space-20) var(--gx-space-24); }
.gx-pcaps__head {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 580px);
  gap: var(--gx-space-8) var(--gx-space-16);
  align-items: start;
  justify-content: space-between;
}
.gx-pcaps__eyebrow {
  color: var(--gx-lime);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.gx-pcaps__title {
  margin-top: var(--gx-space-5);
  color: var(--gx-text);
  font-size: 38px; line-height: 52px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1px;
  text-transform: uppercase;
}
.gx-pcaps__lead { color: var(--gx-text-2); font-size: 20px; line-height: 1.5; }
.gx-pcaps__list {
  margin: var(--gx-space-20) 0 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 410px));
  gap: 40px 30px;                        /* Figma pitch 440 / 220 on 410x180 */
  justify-content: space-between;
}
.gx-pcap {
  position: relative;
  min-height: 180px;
  padding: 28px 28px 28px 48px;
  background: var(--gx-bg-ink);
  border: 1px solid rgb(from var(--gx-border-card) r g b / 0.8);
  border-radius: 4px;
}
.gx-pcap::before {                       /* 4x36 accent bar */
  content: ""; position: absolute; left: 24px; top: 28px;
  width: 4px; height: 36px; background: var(--gx-accent);
}
.gx-pcap--lime::before { background: var(--gx-lime); }
.gx-pcap__name {
  color: var(--gx-text);
  font-size: 16px; line-height: 24px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.gx-pcap__body {
  margin-top: var(--gx-space-6);
  color: var(--gx-text-3);
  font-size: 20px; line-height: 1.5;
}

/* ---- 426:81 start with what you have (1512x510) ------------------ */
.gx-starts { background: var(--gx-bg); padding-block: var(--gx-space-20) var(--gx-space-24); }
.gx-starts__title {
  color: var(--gx-text);
  font-size: 34px; line-height: 46px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -.8px;
  text-transform: uppercase;
}
.gx-starts__list {
  margin: var(--gx-space-16) 0 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 410px));
  gap: 30px;
  justify-content: space-between;
}
.gx-startcard {
  display: flex; flex-direction: column;
  min-height: 220px;
  padding: 34px 26px 26px;
  background: var(--gx-surface-1);
  border: 1px solid rgb(from var(--gx-border-card) r g b / 0.8);
  border-radius: 4px;
}
.gx-startcard__name {
  color: var(--gx-text);
  font-size: 16px; line-height: 24px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.gx-startcard__body {
  margin-top: var(--gx-space-6);
  color: var(--gx-text-3);
  font-size: 20px; line-height: 1.5;
}
.gx-startcard__link {
  margin-top: auto;
  padding-top: var(--gx-space-10);
  color: var(--gx-lime);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-decoration: none;
}
.gx-startcard__link:hover { text-decoration: underline; }
/* Figma inverts the third card — light card, dark type */
.gx-startcard--invert {
  background: var(--gx-invert-bg);
  border-color: var(--gx-invert-bg);
}
.gx-startcard--invert .gx-startcard__name { color: var(--gx-surface-page); }
.gx-startcard--invert .gx-startcard__body { color: var(--gx-invert-text); }
.gx-startcard--invert .gx-startcard__link { color: var(--gx-surface-page); }

@media (max-width: 1200px) {
  .gx-croute__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .gx-pcaps__list,
  .gx-starts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 1100px) {
  .gx-prop__inner, .gx-pcaps__head { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gx-prop__title,
  .gx-croute__title,
  .gx-starts__title { font-size: 26px; line-height: 36px; }
  .gx-pcaps__title  { font-size: 28px; line-height: 38px; }
  .gx-croute__list,
  .gx-pcaps__list,
  .gx-starts__list  { grid-template-columns: 1fr; gap: 14px; }
  .gx-cstep, .gx-pcap, .gx-startcard { min-height: 0; }
  .gx-startcard__link { padding-top: var(--gx-space-8); }
}

/* ==================== HEAT TREATMENT PAGE ===========================
   Figma 197:110. Hero and CTA reuse the shared blocks. The eleven
   process sections are structurally identical — title left (470px),
   copy right (798px) — so they are ONE block repeated. In WordPress
   that is a single ACF repeater of {title, body}; nothing about the
   layout changes when a row is added or removed.                     */

/* Figma gives this hero's heading a 1000px text box, not the 870 the
   About and Quality heroes use — "ENGINEERED STRENGTH." sits on one line. */
.gx-phero-page--wide .gx-phero-page__title { max-width: 1010px; }

/* ---- 197:137 introduction (1512x432) ----------------------------- */
.gx-htintro {
  background: linear-gradient(102deg, var(--gx-surface-page) 0%, var(--gx-map-bg) 55%, var(--gx-bg-ink) 100%);
  padding-block: var(--gx-space-20);
}
.gx-htintro__inner {
  display: grid;
  grid-template-columns: minmax(0, 530px) minmax(0, 738px);
  gap: var(--gx-space-10) var(--gx-space-16);
  align-items: start;
  justify-content: space-between;
}
.gx-htintro__title {
  color: var(--gx-text);
  font-size: 34px; line-height: 50px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -.6px;
  text-transform: uppercase;
}
.gx-htintro__body p { color: var(--gx-text-2); font-size: 20px; line-height: 1.5; }
.gx-htintro__body p + p { margin-top: var(--gx-space-6); }

/* ---- 197:140-197:170 the repeatable process row ------------------- */
/* The rows are full-bleed and carry data-reveal="right", so before they
   animate in each one sits 40px past the right edge and pushes a
   horizontal scrollbar onto the page. Clip rather than scroll: `clip`
   (not `hidden`) so no scroll container is created. */
.gx-htlist { background: var(--gx-bg); overflow-x: clip; }
.gx-htrow { padding-block: var(--gx-space-12); }
.gx-htrow + .gx-htrow { border-top: 1px solid rgb(from var(--gx-border-step) r g b / 0.7); }
.gx-htrow__inner {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 798px);
  gap: var(--gx-space-6) var(--gx-space-16);
  align-items: start;
  justify-content: space-between;
}
.gx-htrow__name {
  color: var(--gx-accent);
  font-size: 26px; line-height: 34px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -.3px;
}
.gx-htrow__body p { color: var(--gx-text-2); font-size: 20px; line-height: 1.5; }
.gx-htrow__body p + p { margin-top: var(--gx-space-5); }

/* ---- 197:173 selecting the correct heat treatment (1512x654) ------ */
.gx-htselect {
  background: linear-gradient(180deg, var(--gx-surface-2) 0%, var(--gx-map-bg) 60%, var(--gx-surface-3) 100%);
  padding-block: var(--gx-space-20) var(--gx-space-24);
}
.gx-htselect__inner { max-width: 1192px; margin-inline: auto; }
.gx-htselect__title {
  color: var(--gx-text);
  font-size: 34px; line-height: 50px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -.6px;
  text-transform: uppercase;
}
.gx-htselect__body {
  margin-top: var(--gx-space-8);
  color: var(--gx-text-2);
  font-size: 20px; line-height: 1.5;
}
.gx-htselect__note {
  margin-top: var(--gx-space-8);
  color: var(--gx-lime);
  font-size: 20px; line-height: 1.5;
}
.gx-htselect__note strong { font-weight: var(--gx-fw-semibold); }

@media (max-width: 1100px) {
  .gx-htintro__inner,
  .gx-htrow__inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gx-htintro__title,
  .gx-htselect__title { font-size: 26px; line-height: 38px; }
  .gx-htrow { padding-block: var(--gx-space-12); }   /* Figma 249:21 — 48px */
  .gx-htrow__name { font-size: 21px; line-height: 29px; }
}

/* ==================== STEEL EQUIVALENTS PAGE ========================
   Figma 249:74. The table is a real <table> — 32 data rows, four
   columns, Chinese grades highlighted. In WordPress it is one ACF
   repeater of {grade, composition, country, notes, is_chinese}.     */

.gx-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- 272:20 hero (1512x502) -------------------------------------- */
.gx-steelhero {
  background: linear-gradient(160deg, var(--gx-surface-5) 0%, var(--gx-bg-ink) 55%, var(--gx-bg) 100%);
  padding-block: var(--gx-space-16) var(--gx-space-20);
}
.gx-steelhero__eyebrow {
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.gx-steelhero__title {
  margin-top: var(--gx-space-8);
  color: var(--gx-text);
  font-size: 46px; line-height: 66px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -1.2px;
  text-transform: uppercase;
}
.gx-steelhero__title em { font-style: normal; color: var(--gx-accent); }
.gx-steelhero__lead {
  margin-top: var(--gx-space-8);
  max-width: 980px;
  color: var(--gx-text-2);
  font-size: 20px; line-height: 1.5;
}
.gx-steelhero__meta {
  margin-top: var(--gx-space-10);
  color: var(--gx-lime);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 10px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ---- 272:25 the reference table (1512x3186) ---------------------- */
.gx-steel { background: var(--gx-bg); padding-block: var(--gx-space-16) var(--gx-space-24); }
.gx-steel__title {
  color: var(--gx-text);
  font-size: 32px; line-height: 44px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -.7px;
  text-transform: uppercase;
}
.gx-steel__note {
  margin-top: var(--gx-space-5);
  max-width: 1160px;
  color: var(--gx-text-3);
  font-size: 15px; line-height: 26px;
}

/* A wide technical table has to be allowed to scroll on its own rather
   than forcing the page sideways. tabindex makes it keyboard-scrollable. */
.gx-steel__scroll {
  margin-top: var(--gx-space-10);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgb(from var(--gx-border-card) r g b / 0.8);
  border-radius: 4px;
}
.gx-steel__scroll:focus-visible { outline: 2px solid var(--gx-accent); outline-offset: 2px; }

.gx-steel__table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  text-align: left;
}
.gx-steel__table thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 20px 24px;
  background: var(--gx-row-highlight);
  color: var(--gx-text);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 11px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Figma column widths on a 1368 table: 316 / 480 / 180 / 272 */
.gx-steel__table th:nth-child(1), .gx-steel__table td:nth-child(1) { width: 24%; }
.gx-steel__table th:nth-child(2), .gx-steel__table td:nth-child(2) { width: 37%; }
.gx-steel__table th:nth-child(3), .gx-steel__table td:nth-child(3) { width: 15%; }
.gx-steel__table th:nth-child(4), .gx-steel__table td:nth-child(4) { width: 24%; }

.gx-steel__table tbody th,
.gx-steel__table tbody td {
  padding: 20px 24px;
  vertical-align: top;
  border-top: 1px solid rgb(from var(--gx-rule-2) r g b / 0.9);
  font-weight: var(--gx-fw-regular);
}
.gx-steel__table tbody th { font-weight: var(--gx-fw-medium); }

/* Chinese grade rows are the highlighted anchor of each block */
.gx-steel__row--cn { background: var(--gx-row-highlight); }
.gx-steel__row--cn th {
  color: var(--gx-lime);
  font-size: 19px; line-height: 28px;
  font-weight: var(--gx-fw-bold);
}
.gx-steel__row--cn td {
  color: var(--gx-text);
  font-size: 15px; line-height: 24px;
}
/* Needs the table scope: `.gx-steel__table tbody th` above is (0,1,2) and
   would otherwise win the padding shorthand against a bare (0,1,1). */
.gx-steel__table .gx-steel__row--ref th {
  padding-left: 40px;                    /* Figma indents the references */
  color: var(--gx-text-2);
  font-size: 15px; line-height: 24px;
}
.gx-steel__row--ref td {
  color: var(--gx-text-3);
  font-size: 14px; line-height: 23px;
}
.gx-steel__row--ref:hover { background: rgb(from var(--gx-row-highlight) r g b / 0.45); }

/* ---- 272:194 important technical note (1512x313) ----------------- */
.gx-steelnote {
  background: linear-gradient(102deg, var(--gx-map-bg) 0%, var(--gx-surface-1) 55%, var(--gx-bg-ink) 100%);
  padding-block: var(--gx-space-16);
}
.gx-steelnote__title {
  color: var(--gx-text);
  font-size: 30px; line-height: 42px;
  font-weight: var(--gx-fw-semibold);
  letter-spacing: -.6px;
  text-transform: uppercase;
}
.gx-steelnote__body {
  margin-top: var(--gx-space-6);
  max-width: 1150px;
  color: var(--gx-text-2);
  font-size: 20px; line-height: 1.5;
}

@media (max-width: 768px) {
  .gx-steelhero__title { font-size: 28px; line-height: 40px; }
  .gx-steel__title,
  .gx-steelnote__title { font-size: 24px; line-height: 34px; }

  /* Below 768 the four-column table becomes stacked records: each row is
     its own card with the column name printed as a label. No sideways
     scrolling on a phone, and the reading order still makes sense. */
  .gx-steel__scroll { border: 0; overflow-x: visible; }
  .gx-steel__table { min-width: 0; display: block; }
  .gx-steel__table thead { display: none; }
  .gx-steel__table tbody { display: block; }
  .gx-steel__table tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid rgb(from var(--gx-border-card) r g b / 0.8);
    border-radius: 4px;
  }
  /* The percentage column widths above still apply once the cells become
     blocks and would squeeze each field into a 37%-wide sliver. They are
     written as :nth-child, so the reset has to match that specificity. */
  .gx-steel__table tbody th:nth-child(n),
  .gx-steel__table tbody td:nth-child(n) {
    display: block;
    width: auto;
    padding: 0;
    border-top: 0;
  }
  .gx-steel__table tbody th { margin-bottom: 10px; }
  .gx-steel__table .gx-steel__row--ref th { padding-left: 0; }
  .gx-steel__table tbody td + td { margin-top: 10px; }
  .gx-steel__table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--gx-accent);
    font-size: var(--gx-fs-micro);
    font-weight: var(--gx-fw-semibold);
    letter-spacing: .6px;
    text-transform: uppercase;
  }
  /* A lone em dash in a cell carries nothing on mobile. Needs to out-rank
     the :nth-child(n) display:block reset above. */
  .gx-steel__table tbody .gx-steel__row--ref td:last-child { display: none; }
}

/* ==================== REQUEST A QUOTE PAGE ==========================
   Figma 542:2. Hero, proposition, supporting-information cards and the
   "what happens next" cards all reuse blocks built for Industries and
   Custom Engineered Products. The form is the only new component.    */

.gx-form { --gx-gutter: var(--gx-space-24); }

/* hero: 690x520 photo with a technical border and a lime action rail */
/* The 620/690 split is the desktop proportion and must say so. Unqualified it
   outranks the max-width:1100px rule that folds every gx-ihero to one column —
   specificity wins whatever the viewport — so this hero stayed a two-column
   grid at 390px, the breadcrumb broken one word per line beside a thumbnail. */
@media (min-width: 1101px) {
  .gx-ihero--wide .gx-ihero__inner { grid-template-columns: minmax(0, 620px) minmax(0, 690px); }
}

/* A hero with no photograph must not keep the column that held it. The grid
   above reserves 690px for the figure, so clearing the image field — a thing
   an editor does, and the reason this page once showed a void beside its
   heading — left half the band empty. §8 asks that emptying a field leave the
   layout standing; this is the rule that makes it true for every gx-ihero. */
.gx-ihero__inner:not(:has(.gx-ihero__media)) { grid-template-columns: minmax(0, 760px); }
.gx-ihero__media--framed {
  margin-left: 0;
  aspect-ratio: 690 / 520;
  border: 1px solid rgb(from var(--gx-accent-2) r g b / 0.3);
}
.gx-ihero__media--framed::before { content: none; }     /* no cyan rail here */
.gx-ihero__actionrail {
  position: absolute; right: 0; bottom: -25px;
  width: 170px; height: 5px;
  background: var(--gx-lime);
}

/* ---- 548:2 the enquiry form -------------------------------------- */
.gx-form { margin-top: var(--gx-space-12); }
/* Figma rows on a 1320 grid: 260 + 1036 | 648 + 648 | 648 + 648 | 1320.
   A three-column grid cannot express both the 260/1036 row and the 50/50
   rows, so this wraps as flex and each field states its own basis. */
.gx-form__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;                             /* Figma row pitch 102 on 82 fields */
}
.gx-field { margin: 0; display: flex; flex-direction: column; }
.gx-field--title { flex: 0 0 260px; }
.gx-field--name  { flex: 1 1 380px; }
.gx-field--half  { flex: 1 1 calc(50% - 12px); }
.gx-field--full  { flex: 1 1 100%; }

.gx-field__label {
  margin-bottom: 10px;
  color: var(--gx-accent);
  font-size: var(--gx-fs-micro);         /* [DEV] Figma 10px -> 12px floor */
  font-weight: var(--gx-fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gx-field__label span { color: var(--gx-text-3); font-weight: var(--gx-fw-medium); }

.gx-field__input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: var(--gx-surface-page);
  border: 1px solid var(--gx-map-border);
  border-radius: 2px;
  color: var(--gx-text);
  font: inherit;
  font-size: 16px;
  transition: border-color var(--gx-dur-fast) var(--gx-ease-out),
              background var(--gx-dur-fast) var(--gx-ease-out);
}
.gx-field__input::placeholder { color: var(--gx-text-placeholder); }
.gx-field__input:hover { border-color: var(--gx-border-hover); }
.gx-field__input:focus-visible {
  outline: none;
  border-color: var(--gx-accent);
  background: var(--gx-map-bg);
  box-shadow: 0 0 0 3px rgb(from var(--gx-accent) r g b / 0.18);
}
.gx-field__input--area {
  height: auto;
  min-height: 150px;
  padding: 16px;
  line-height: 25px;
  resize: vertical;
}

/* ADDITION (not in Figma): the result of a submission.
   The form was never wired when the prototype was signed off, so the design
   draws no success or error state. It reuses the band the CTA already has
   rather than introducing a colour: lime for received, the credit accent for
   a problem — the only two roles those colours carry on this site. */
.gx-form__result {
  margin-bottom: var(--gx-space-8);
  padding: var(--gx-space-5) var(--gx-space-6);
  border-left: 3px solid var(--gx-lime);
  background: var(--gx-surface-1);
  color: var(--gx-text);
  font-size: var(--gx-fs-lead);
  line-height: var(--gx-lh-body);
}
.gx-form__result--error { border-left-color: var(--gx-credit-accent); }

.gx-form__foot {
  margin-top: var(--gx-space-10);
  display: flex; align-items: center; gap: var(--gx-space-8);
  flex-wrap: wrap;
}
.gx-form__foot .gx-btn { flex: none; height: 56px; min-width: 250px; }
/* ADDITION (not in Figma): Submit is off while the enquiry is on its way, and
   after it has gone until a field changes (client, 29 Sep 2026) — the fields
   keep what was sent, so pressing it again would send it twice. Without this
   a disabled button would look exactly like one that works. */
.gx-form__foot .gx-btn:disabled { opacity: .55; cursor: not-allowed; }
.gx-form__foot .gx-btn[aria-busy="true"] { cursor: progress; }
.gx-form__note { color: var(--gx-text-3); font-size: var(--gx-fs-lead); line-height: 1.5; }

@media (max-width: 900px) {
  .gx-field--half { flex-basis: 100%; }
}
@media (max-width: 768px) {
  .gx-ihero__media--framed { aspect-ratio: 4 / 3; }
  .gx-ihero__actionrail { width: 120px; bottom: -18px; }
  .gx-form__grid { gap: 18px; }
  .gx-field--title, .gx-field--name { flex-basis: 100%; }
  .gx-form__foot { flex-direction: column; align-items: stretch; }
  .gx-form__foot .gx-btn { width: 100%; min-width: 0; }
}