/* ==========================================================================
   INDUSTRIAL — Build with it (Design Completion Campaign, 2026-09-29).
   A site panel: one stripe band at its head (a real boundary), then three
   zones divided by rules of three weights. Steel ground, safety yellow and
   black, no third accent. Faces are the room's own (BigShouldersStencilIX,
   BigShouldersIX, BarlowCondensedIX, declared in x-industrial.css). Every
   class is gix- or scoped to .gm--industrial. Nothing moves.
   Contrast: yellow on ground 5.8 · on plate 3.9 (display only) ·
   #E8EAEC on plate 5.3 · black on yellow 11.3 · #C4C8CD on ground 5.6.
   ========================================================================== */
.gm--industrial {
  --gm-tag-inverse: var(--gm-color-black);
  width: min(1180px, 100% - 2 * clamp(12px, 3vw, 40px));
  margin: clamp(24px, 5vw, 56px) auto;
  padding: 0;
  background: var(--gm-color-ground); color: var(--gm-color-text);
  font: 500 18px/1.5 var(--gm-font-text);
}
.gm--industrial * { transition: none !important; animation: none !important; }
.gm--industrial .gm__head { padding: clamp(16px, 3vw, 28px) 0 0; margin-bottom: 20px; }
.gm--industrial .gm__title { font: 900 clamp(38px, 6vw, 72px)/0.9 var(--gm-font); text-transform: uppercase; letter-spacing: 0.02em; color: var(--gm-color-yellow); }
.gm--industrial .gm__key, .gm--industrial .gm__get { color: var(--gm-color-steel-light); opacity: 1; }
.gm--industrial a { color: var(--gm-color-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gm--industrial .gm-t { color: var(--gm-color-yellow); border-width: 2px; font-family: var(--gm-font-support); letter-spacing: 0.04em; text-transform: uppercase; }
.gm--industrial .gm-f__n { display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.7rem; background: var(--gm-color-black); color: var(--gm-color-yellow); font: 800 15px/1 var(--gm-font-support); }
.gm--industrial .gm-f__name { font: 900 clamp(24px, 3vw, 32px)/0.95 var(--gm-font); text-transform: uppercase; color: var(--gm-color-yellow); }
.gm--industrial .gm-more summary { color: var(--gm-color-yellow); font-family: var(--gm-font-support); text-transform: uppercase; letter-spacing: 0.04em; }
.gm--industrial .gm-ls li { border-top-color: rgba(196, 200, 205, 0.3); }
.gm--industrial .gm-f__note { color: var(--gm-color-steel-light); opacity: 1; }
.gm--industrial :focus-visible { outline: 4px solid var(--gm-color-yellow); outline-offset: 2px; }
.gix-cap { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--gm-color-steel-light); }

/* ---- the panel -------------------------------------------------------- */
.gix-band { height: 28px; background: repeating-linear-gradient(-45deg, var(--gm-color-yellow) 0 22px, var(--gm-color-black) 22px 44px); }
.gix-panel { border: 4px solid var(--gm-color-black); border-top: 0; border-radius: 0 0 8px 8px; background: var(--gm-color-plate); }
.gix-zone { padding: clamp(16px, 3vw, 28px); }
.gix-zone--heavy { border-bottom: 10px solid var(--gm-color-black); }
.gix-zone--mid { border-bottom: 6px solid var(--gm-color-black); }
.gix-zl { margin: 0 0 18px; display: inline-flex; gap: 10px; padding: 4px 12px; background: var(--gm-color-black); color: var(--gm-color-yellow); font: 800 15px/1.4 var(--gm-font-support); text-transform: uppercase; letter-spacing: 0.04em; }
.gix-zg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 32px; }
.gix-zone--light .gix-zg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gix-f--ui { grid-column: 1 / -1; grid-row: 2; }
.gix-f { min-width: 0; color: #FFFFFF; }

/* colour */
.gix-sws { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 14px; }
.gix-sws li { display: grid; gap: 2px; min-width: 0; }
.gix-sws span { height: 40px; border: 3px solid var(--gm-color-black); border-radius: 4px; }
.gix-sws b { font: 800 14px/1.2 var(--gm-font-support); text-transform: uppercase; }
.gix-sws code { font-size: 12px; }

/* type */
.gix-disp { margin: 0; font: 900 var(--gm-size-display)/var(--gm-leading-display) var(--gm-font); text-transform: uppercase; color: var(--gm-color-yellow); }
.gix-sup { margin: 8px 0 0; font: 800 var(--gm-size-support)/1.2 var(--gm-font-support); text-transform: uppercase; }
.gix-text { margin: 8px 0 0; font-size: 17px; }

/* shape */
.gix-stripe { height: 44px; border: 4px solid var(--gm-color-black); background: repeating-linear-gradient(-45deg, var(--gm-color-yellow) 0 18px, var(--gm-color-black) 18px 36px); }
.gix-caution { margin-top: 12px; padding: 10px; background: var(--gm-color-yellow); border: 4px solid var(--gm-color-black); border-radius: 12px; color: var(--gm-color-black); }
.gix-caution span { display: block; padding: 6px 10px 2px; background: var(--gm-color-black); color: var(--gm-color-yellow); border-radius: 5px; font: 900 34px/0.9 var(--gm-font); text-transform: uppercase; text-align: center; }
.gix-caution b { display: block; margin-top: 8px; font: 800 17px/1.2 var(--gm-font-support); text-transform: uppercase; text-align: center; }

/* imagery */
.gix-pic { display: grid; place-items: center; padding: 16px; background: var(--gm-color-yellow); border: 4px solid var(--gm-color-black); border-radius: 12px; }
.gix-picto { width: 110px; height: auto; }
.gix-picto__tri { fill: var(--gm-color-black); }
.gix-picto__in { fill: var(--gm-color-yellow); }
.gix-picto rect, .gix-picto circle { fill: var(--gm-color-black); }

/* marking */
.gix-can { margin: 0; padding: 14px; border: 4px solid var(--gm-color-black); border-radius: 12px; background: var(--gm-color-ground); color: var(--gm-color-yellow); font: 900 clamp(32px, 4vw, 44px)/1 var(--gm-font); text-transform: uppercase; text-align: center; }

/* layout */
.gix-rules { display: grid; gap: 14px; padding: 16px; border: 3px solid var(--gm-color-black); border-radius: 6px; background: var(--gm-color-ground); }
.gix-rules i { display: block; background: var(--gm-color-black); }
.gix-r10 { height: 10px; } .gix-r6 { height: 6px; width: 70%; } .gix-r3 { height: 3px; width: 45%; }

/* components */
.gix-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 12px 16px; background: var(--gm-color-black); margin-bottom: 20px; }
.gix-nav a { color: var(--gm-color-text); text-decoration: none; font: 800 18px/1.4 var(--gm-font-support); text-transform: uppercase; padding-bottom: 2px; border-bottom: 6px solid transparent; }
.gix-nav a:hover { color: var(--gm-color-yellow); }
.gix-nav a[aria-current] { border-bottom-color: var(--gm-color-yellow); }
.gix-ui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.gix-card { position: relative; display: grid; gap: 6px; padding: 30px 28px 26px; background: var(--gm-color-plate); border: 4px solid var(--gm-color-black); border-top-width: 10px; border-radius: 6px; color: #FFFFFF; text-decoration: none; }
.gix-card:hover { border-top-color: var(--gm-color-yellow); }
.gix-card b { font: 900 30px/0.95 var(--gm-font); text-transform: uppercase; color: var(--gm-color-yellow); }
.gix-fx { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #D7DADE, #555A61 70%); box-shadow: 0 0 0 2px #222; }
.gix-fx1 { left: 8px; top: 8px; } .gix-fx2 { right: 8px; top: 8px; } .gix-fx3 { left: 8px; bottom: 8px; } .gix-fx4 { right: 8px; bottom: 8px; }
.gix-form { display: grid; gap: 8px; justify-items: start; }
.gix-form label { font: 800 16px/1.3 var(--gm-font-support); text-transform: uppercase; }
.gix-form input { width: 100%; height: 2.75rem; padding: 0 10px; background: var(--gm-color-black); color: var(--gm-color-text); border: 3px solid var(--gm-color-steel-light); border-radius: 4px; }
.gix-form input:focus-visible { border-color: var(--gm-color-yellow); }
.gix-err { margin: 0; padding: 6px 10px; background: var(--gm-color-black); color: var(--gm-color-yellow); border-radius: 4px; font-size: 16px; }
.gix-btn { min-height: 44px; padding: 0 22px; background: var(--gm-color-yellow); color: var(--gm-color-black); border: 3px solid var(--gm-color-black); border-radius: 6px; font: 800 18px/1 var(--gm-font-support) !important; text-transform: uppercase; cursor: pointer; }
.gix-btn:hover, .gix-btn:active { background: var(--gm-color-black); color: var(--gm-color-yellow); }

.gix-still { margin: 0; font: 900 clamp(28px, 3.6vw, 40px)/0.95 var(--gm-font); text-transform: uppercase; color: var(--gm-color-yellow); }

@media (max-width: 720px) {
  .gix-zone--light .gix-zg, .gix-ui { grid-template-columns: 1fr; }
  .gix-f--ui { grid-row: auto; }
  .gm--industrial .gm__head { display: block; }
  .gm--industrial .gm__head > * + * { margin-top: 10px; }
  .gm--industrial .gm-ls li { grid-template-columns: 1fr; gap: 0.3rem; }
}
/* Small text on the plate is white (6.4:1); steel-light is for the ground only. */
.gix-f .gix-cap, .gm--industrial .gix-f .gm-f__note { color: #FFFFFF; }
/* Yellow on the plate is 3.9:1, display size only: small yellow text there turns white. */
.gm--industrial .gix-f .gm-more summary, .gm--industrial .gix-f .gm-t, .gix-card span { color: #FFFFFF; }