/* ==========================================================================
   Gastops Brand Layer — single source of truth for brand colour & type
   --------------------------------------------------------------------------
   Source: Gastops Brand Identity Guidelines (Style Guide 2022), page 4.
           reference/Gastops_Style_Guide-FINAL.pdf
   Brief:  reference/Gmail - MetalSCAN CBA Design Feedback.pdf (2026-08-26)

   LOAD ORDER MATTERS: this file must be linked AFTER Bootstrap and BEFORE
   style.css. It remaps Bootstrap's own custom properties, which rebrands the
   ~700 semantic class usages across tpl/ without touching any markup.

   ⚠️ ACCESSIBILITY RULE — do not "simplify" these into one cyan token.
   The style guide is explicit that #00AEEF is for black/dark-grey backgrounds
   and #0077A3 is the variant "to ensure accessibility for the web ... for
   white/light grey backgrounds". #00AEEF on white is ~2.1:1 and FAILS WCAG AA.
     - Cyan TEXT on a light surface  -> --brand-cyan-on-light (#0077A3)
     - Dark surfaces, fills, borders,
       icons, chart marks             -> --brand-cyan (#00AEEF)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typeface — Avenir Next (licensed; see reference/README.md)
   --------------------------------------------------------------------------
   Commercial Linotype face. Served same-origin from assets/fonts/ only.
   Never hotlink and never redistribute these files.

   NOTE: the vendor kit (reference/Avenir-Web/stylesheet.css) declares Demi as
   `font-weight: normal`, which collides with Regular and makes Demi
   unreachable. We remap it to 600 here so all four weights are addressable.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Avenir Next W1G';
  src: url('../fonts/AvenirNextW1G-Regular.woff2') format('woff2'),
       url('../fonts/AvenirNextW1G-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Next W1G';
  src: url('../fonts/AvenirNextW1G-Medium.woff2') format('woff2'),
       url('../fonts/AvenirNextW1G-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Next W1G';
  src: url('../fonts/AvenirNextW1G-Demi.woff2') format('woff2'),
       url('../fonts/AvenirNextW1G-Demi.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Next W1G';
  src: url('../fonts/AvenirNextW1G-Bold.woff2') format('woff2'),
       url('../fonts/AvenirNextW1G-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Brand tokens
   -------------------------------------------------------------------------- */
:root {
  /* --- Primary brand colours (Style Guide p.4) --- */
  --brand-gunmetal:       #323E48;
  --brand-cyan:           #00AEEF;  /* DARK backgrounds / fills / icons only */
  --brand-cyan-on-light:  #0077A3;  /* REQUIRED for cyan text on light bg     */
  --brand-cyan-on-tint:   #006A91;  /* cyan text on a 10-25% tinted fill      */

  /* --- Support colours --- */
  --brand-grey:           #B5B5B5;
  --brand-pale-blue:      #C5CEDB;
  --brand-snow:           #F0F4F6;

  /* --- Status indicator colours --- */
  --brand-yellow:         #F9ED32;
  --brand-orange:         #FDC140;
  --brand-alarm:          #EC1C24;

  /* --- Derived tints/shades (used for hovers, subtle fills) --- */
  --brand-gunmetal-dark:  #232C33;
  --brand-gunmetal-light: #4A5A67;
  --brand-cyan-dark:      #005E80;
  --brand-cyan-tint:      #E6F6FD;
  --brand-alarm-dark:     #C4151C;
  --brand-alarm-tint:     #FDECED;

  /* --- Semantic aliases: prefer these in application CSS --- */
  --brand-positive:           var(--brand-cyan);
  --brand-positive-on-light:  var(--brand-cyan-on-light);
  --brand-negative:           var(--brand-alarm);
  --brand-surface:            var(--brand-snow);
  --brand-text:               var(--brand-gunmetal);
  --brand-text-muted:         #63707A;   /* gunmetal-derived, AA on white */
  --brand-border:             #D6DEE3;

  /* --- Typography --- */
  --brand-font: 'Avenir Next W1G', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   3. Bootstrap 5.3 remap — the high-leverage block
   --------------------------------------------------------------------------
   Bootstrap reads these custom properties for its utility classes, so every
   existing text-, bg- and border- utility usage picks up brand colour
   automatically.
   The -rgb triplets are required by bg-opacity-* and border utilities.

   --bs-success resolves to the ACCESSIBLE cyan (#0077A3), not #00AEEF:
   text-success is used overwhelmingly on light cards (51x in result-card.php
   alone), so the light-safe variant must be the default. Use .on-dark below
   where success sits on a dark surface.
   -------------------------------------------------------------------------- */
:root {
  --bs-primary:        #323E48;
  --bs-primary-rgb:    50, 62, 72;
  --bs-secondary:      #63707A;
  --bs-secondary-rgb:  99, 112, 122;
  --bs-success:        #0077A3;   /* cyan replaces green, per brief */
  --bs-success-rgb:    0, 119, 163;
  --bs-danger:         #EC1C24;   /* brand Alarm red */
  --bs-danger-rgb:     236, 28, 36;
  --bs-warning:        #FDC140;   /* brand Orange */
  --bs-warning-rgb:    253, 193, 64;
  --bs-info:           #0077A3;   /* light-safe; .bg-info flips to #00AEEF below */
  --bs-info-rgb:       0, 119, 163;
  --bs-light:          #F0F4F6;   /* Snow */
  --bs-light-rgb:      240, 244, 246;
  --bs-dark:           #323E48;
  --bs-dark-rgb:       50, 62, 72;

  --bs-body-color:     #323E48;
  --bs-body-color-rgb: 50, 62, 72;
  --bs-body-bg:        #F0F4F6;
  --bs-body-bg-rgb:    240, 244, 246;
  --bs-body-font-family: var(--brand-font);

  --bs-emphasis-color: #323E48;
  --bs-border-color:   #D6DEE3;

  --bs-link-color:           #0077A3;
  --bs-link-color-rgb:       0, 119, 163;
  --bs-link-hover-color:     #005E80;
  --bs-link-hover-color-rgb: 0, 94, 128;
}

/* Solid FILLS use the vivid cyan, per the guide's reservation of that tone
   for fills and dark surfaces.

   CONTRAST CAVEAT: white text on #00AEEF is only 2.53:1 and FAILS WCAG AA.
   Several templates pair `bg-info` with `text-white` (the "Auto-Calculated"
   badge and two card headers). Rather than edit each call site, force those
   fills to darken to the accessible cyan whenever white text sits on them —
   white on #0077A3 is 5.04:1 and passes. A bare .bg-info (no white text,
   e.g. bg-opacity-10 tints) keeps the vivid brand tone.

   OPACITY: Bootstrap composes these fills as
   rgba(var(--bs-*-rgb), var(--bs-bg-opacity)). Overriding background-color
   with a flat value discards that alpha channel, so `bg-opacity-10` tints
   collapse to a solid fill. Redefine the -rgb triplet instead and let
   Bootstrap's own rgba() composition stand. */
.bg-info { --bs-info-rgb: 0, 174, 239; }
.bg-info.text-white,
.card-header.bg-info,
.badge.bg-info { --bs-info-rgb: 0, 119, 163; }

/* Cyan TEXT on a tinted fill needs to go darker, not lighter: the tint is
   light, so contrast improves as the ink deepens. The hero figures on the
   results cards (`.text-success` on `bg-success bg-opacity-10`) measure
   4.39:1 with --brand-cyan-on-light, just under the 4.5:1 AA floor for
   normal text. Deepen to #006A91 in that context only (5.27:1 on the
   success tint, 5.50:1 on the info tint) so cyan text elsewhere is
   unaffected. */
.bg-opacity-10 .text-success,
.bg-opacity-10 .text-info,
.bg-opacity-25 .text-success,
.bg-opacity-25 .text-info { color: var(--brand-cyan-on-tint) !important; }

/* Muted text: Bootstrap's default is too light against Snow. */
.text-muted { color: var(--brand-text-muted) !important; }

/* --------------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------------
   Bootstrap 5.3 derives .btn-* from per-component --bs-btn-* properties, NOT
   from --bs-success/--bs-primary. They must be set explicitly or buttons keep
   their stock green/blue.
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--brand-gunmetal);
  --bs-btn-border-color: var(--brand-gunmetal);
  --bs-btn-hover-bg: var(--brand-gunmetal-dark);
  --bs-btn-hover-border-color: var(--brand-gunmetal-dark);
  --bs-btn-active-bg: var(--brand-gunmetal-dark);
  --bs-btn-active-border-color: var(--brand-gunmetal-dark);
  --bs-btn-disabled-bg: var(--brand-gunmetal);
  --bs-btn-disabled-border-color: var(--brand-gunmetal);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}
.btn-success {
  --bs-btn-bg: var(--brand-cyan-on-light);
  --bs-btn-border-color: var(--brand-cyan-on-light);
  --bs-btn-hover-bg: var(--brand-cyan-dark);
  --bs-btn-hover-border-color: var(--brand-cyan-dark);
  --bs-btn-active-bg: var(--brand-cyan-dark);
  --bs-btn-active-border-color: var(--brand-cyan-dark);
  --bs-btn-disabled-bg: var(--brand-cyan-on-light);
  --bs-btn-disabled-border-color: var(--brand-cyan-on-light);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}
.btn-info {
  --bs-btn-bg: var(--brand-cyan);
  --bs-btn-border-color: var(--brand-cyan);
  --bs-btn-hover-bg: var(--brand-cyan-on-light);
  --bs-btn-hover-border-color: var(--brand-cyan-on-light);
  --bs-btn-active-bg: var(--brand-cyan-on-light);
  --bs-btn-active-border-color: var(--brand-cyan-on-light);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.btn-danger {
  --bs-btn-bg: var(--brand-alarm);
  --bs-btn-border-color: var(--brand-alarm);
  --bs-btn-hover-bg: var(--brand-alarm-dark);
  --bs-btn-hover-border-color: var(--brand-alarm-dark);
  --bs-btn-active-bg: var(--brand-alarm-dark);
  --bs-btn-active-border-color: var(--brand-alarm-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.btn-warning {
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-bg: #E9A92A;
  --bs-btn-hover-border-color: #E9A92A;
  --bs-btn-active-bg: #E9A92A;
  --bs-btn-active-border-color: #E9A92A;
  --bs-btn-color: var(--brand-gunmetal);
  --bs-btn-hover-color: var(--brand-gunmetal);
  --bs-btn-active-color: var(--brand-gunmetal);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-gunmetal);
  --bs-btn-border-color: var(--brand-gunmetal);
  --bs-btn-hover-bg: var(--brand-gunmetal);
  --bs-btn-hover-border-color: var(--brand-gunmetal);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--brand-gunmetal);
  --bs-btn-active-border-color: var(--brand-gunmetal);
  --bs-btn-active-color: #fff;
}
.btn-outline-secondary {
  --bs-btn-color: var(--brand-gunmetal);
  --bs-btn-border-color: var(--brand-border);
  --bs-btn-hover-bg: var(--brand-gunmetal);
  --bs-btn-hover-border-color: var(--brand-gunmetal);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--brand-gunmetal);
  --bs-btn-active-border-color: var(--brand-gunmetal);
  --bs-btn-active-color: #fff;
}

/* Focus rings inherit the brand rather than Bootstrap blue. */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-cyan-on-light);
  box-shadow: 0 0 0 0.2rem rgba(0, 119, 163, 0.25);
}
.form-check-input:checked {
  background-color: var(--brand-cyan-on-light);
  border-color: var(--brand-cyan-on-light);
}

/* --------------------------------------------------------------------------
   5. Alerts — Bootstrap 5.3 derives these from --bs-*-bg-subtle etc.
   -------------------------------------------------------------------------- */
.alert-success {
  --bs-alert-color: #005E80;
  --bs-alert-bg: var(--brand-cyan-tint);
  --bs-alert-border-color: #B8E4F7;
}
.alert-info {
  --bs-alert-color: #005E80;
  --bs-alert-bg: var(--brand-cyan-tint);
  --bs-alert-border-color: #B8E4F7;
}
.alert-danger {
  --bs-alert-color: #A51218;
  --bs-alert-bg: var(--brand-alarm-tint);
  --bs-alert-border-color: #F8C3C5;
}
.alert-warning {
  --bs-alert-color: #7A5405;
  --bs-alert-bg: #FEF4E2;
  --bs-alert-border-color: #FDE3B4;
}

/* --------------------------------------------------------------------------
   6. Brand utility classes
   --------------------------------------------------------------------------
   .bg-gastops-navy / .text-gastops-navy are used 17x across panel-wind.php
   and panel-aero.php but were never defined anywhere — those card headers
   rendered white-on-transparent. Defining them here fixes that live bug.
   -------------------------------------------------------------------------- */
.bg-gastops-navy   { background-color: var(--brand-gunmetal) !important; }
.text-gastops-navy { color: var(--brand-gunmetal) !important; }
.bg-gastops-cyan   { background-color: var(--brand-cyan) !important; }
.text-gastops-cyan { color: var(--brand-cyan-on-light) !important; }
.bg-gastops-snow   { background-color: var(--brand-snow) !important; }
.bg-gastops-pale   { background-color: var(--brand-pale-blue) !important; }

/* On a dark surface, cyan text may use the vivid tone. */
.on-dark .text-success,
.text-cyan-on-dark { color: var(--brand-cyan) !important; }

/* Style guide: main headings are Bold, ALL CAPS only. */
.brand-heading {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-gunmetal);
  letter-spacing: 0.02em;
}
/* Secondary headings / emphasised paragraphs: Demi-bold, cyan. */
.brand-subheading {
  font-weight: 600;
  color: var(--brand-cyan-on-light);
}

/* --------------------------------------------------------------------------
   8. Gastops brand icons
   --------------------------------------------------------------------------
   Source: reference/Gastops_Icons_PNG (extracted from Gastops_Master_Icons.pptx).

   The source PNGs are a single flat #00AEEF ink over a clean alpha channel,
   so the alpha doubles as a mask. Driving them through `mask-image` rather
   than `<img>` means they inherit `currentColor` exactly like the Font
   Awesome glyphs they replace — which is what lets the same icon render Cyan
   when highlighted and Snow when it is not, per the brand feedback.

   Sizing follows font-size (1em) so an icon swapped into existing markup
   keeps the optical weight of the text beside it. */
.gi {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex: none;
}
.gi-aero-cycle            { -webkit-mask-image: url('../img/icons/gastops-aero-cycle.png'); mask-image: url('../img/icons/gastops-aero-cycle.png'); }
.gi-ai-model              { -webkit-mask-image: url('../img/icons/gastops-ai-model.png'); mask-image: url('../img/icons/gastops-ai-model.png'); }
.gi-aircraft              { -webkit-mask-image: url('../img/icons/gastops-aircraft.png'); mask-image: url('../img/icons/gastops-aircraft.png'); }
.gi-alert                 { -webkit-mask-image: url('../img/icons/gastops-alert.png'); mask-image: url('../img/icons/gastops-alert.png'); }
.gi-analysis              { -webkit-mask-image: url('../img/icons/gastops-analysis.png'); mask-image: url('../img/icons/gastops-analysis.png'); }
.gi-analyst               { -webkit-mask-image: url('../img/icons/gastops-analyst.png'); mask-image: url('../img/icons/gastops-analyst.png'); }
.gi-aviation              { -webkit-mask-image: url('../img/icons/gastops-aviation.png'); mask-image: url('../img/icons/gastops-aviation.png'); }
.gi-award                 { -webkit-mask-image: url('../img/icons/gastops-award.png'); mask-image: url('../img/icons/gastops-award.png'); }
.gi-connected-system      { -webkit-mask-image: url('../img/icons/gastops-connected-system.png'); mask-image: url('../img/icons/gastops-connected-system.png'); }
.gi-controls              { -webkit-mask-image: url('../img/icons/gastops-controls.png'); mask-image: url('../img/icons/gastops-controls.png'); }
.gi-cost-avoidance        { -webkit-mask-image: url('../img/icons/gastops-cost-avoidance.png'); mask-image: url('../img/icons/gastops-cost-avoidance.png'); }
.gi-costdown              { -webkit-mask-image: url('../img/icons/gastops-costdown.png'); mask-image: url('../img/icons/gastops-costdown.png'); }
.gi-credentials           { -webkit-mask-image: url('../img/icons/gastops-credentials.png'); mask-image: url('../img/icons/gastops-credentials.png'); }
.gi-data-report           { -webkit-mask-image: url('../img/icons/gastops-data-report.png'); mask-image: url('../img/icons/gastops-data-report.png'); }
.gi-diagnostics           { -webkit-mask-image: url('../img/icons/gastops-diagnostics.png'); mask-image: url('../img/icons/gastops-diagnostics.png'); }
.gi-engineering           { -webkit-mask-image: url('../img/icons/gastops-engineering.png'); mask-image: url('../img/icons/gastops-engineering.png'); }
.gi-equipment             { -webkit-mask-image: url('../img/icons/gastops-equipment.png'); mask-image: url('../img/icons/gastops-equipment.png'); }
.gi-expertise             { -webkit-mask-image: url('../img/icons/gastops-expertise.png'); mask-image: url('../img/icons/gastops-expertise.png'); }
.gi-facility-system       { -webkit-mask-image: url('../img/icons/gastops-facility-system.png'); mask-image: url('../img/icons/gastops-facility-system.png'); }
.gi-failure-risk          { -webkit-mask-image: url('../img/icons/gastops-failure-risk.png'); mask-image: url('../img/icons/gastops-failure-risk.png'); }
.gi-field-team            { -webkit-mask-image: url('../img/icons/gastops-field-team.png'); mask-image: url('../img/icons/gastops-field-team.png'); }
.gi-gauge                 { -webkit-mask-image: url('../img/icons/gastops-gauge.png'); mask-image: url('../img/icons/gastops-gauge.png'); }
.gi-global-reach          { -webkit-mask-image: url('../img/icons/gastops-global-reach.png'); mask-image: url('../img/icons/gastops-global-reach.png'); }
.gi-global-team           { -webkit-mask-image: url('../img/icons/gastops-global-team.png'); mask-image: url('../img/icons/gastops-global-team.png'); }
.gi-growth-forecast       { -webkit-mask-image: url('../img/icons/gastops-growth-forecast.png'); mask-image: url('../img/icons/gastops-growth-forecast.png'); }
.gi-helicopter-monitoring { -webkit-mask-image: url('../img/icons/gastops-helicopter-monitoring.png'); mask-image: url('../img/icons/gastops-helicopter-monitoring.png'); }
.gi-innovation            { -webkit-mask-image: url('../img/icons/gastops-innovation.png'); mask-image: url('../img/icons/gastops-innovation.png'); }
.gi-insight               { -webkit-mask-image: url('../img/icons/gastops-insight.png'); mask-image: url('../img/icons/gastops-insight.png'); }
.gi-inspection            { -webkit-mask-image: url('../img/icons/gastops-inspection.png'); mask-image: url('../img/icons/gastops-inspection.png'); }
.gi-lab-analysis          { -webkit-mask-image: url('../img/icons/gastops-lab-analysis.png'); mask-image: url('../img/icons/gastops-lab-analysis.png'); }
.gi-lifecycle             { -webkit-mask-image: url('../img/icons/gastops-lifecycle.png'); mask-image: url('../img/icons/gastops-lifecycle.png'); }
.gi-logistics             { -webkit-mask-image: url('../img/icons/gastops-logistics.png'); mask-image: url('../img/icons/gastops-logistics.png'); }
.gi-machine-learning      { -webkit-mask-image: url('../img/icons/gastops-machine-learning.png'); mask-image: url('../img/icons/gastops-machine-learning.png'); }
.gi-marine-monitoring     { -webkit-mask-image: url('../img/icons/gastops-marine-monitoring.png'); mask-image: url('../img/icons/gastops-marine-monitoring.png'); }
.gi-marine-vessel         { -webkit-mask-image: url('../img/icons/gastops-marine-vessel.png'); mask-image: url('../img/icons/gastops-marine-vessel.png'); }
.gi-mobile-service        { -webkit-mask-image: url('../img/icons/gastops-mobile-service.png'); mask-image: url('../img/icons/gastops-mobile-service.png'); }
.gi-monitoring            { -webkit-mask-image: url('../img/icons/gastops-monitoring.png'); mask-image: url('../img/icons/gastops-monitoring.png'); }
.gi-naval-vessel          { -webkit-mask-image: url('../img/icons/gastops-naval-vessel.png'); mask-image: url('../img/icons/gastops-naval-vessel.png'); }
.gi-network-grid          { -webkit-mask-image: url('../img/icons/gastops-network-grid.png'); mask-image: url('../img/icons/gastops-network-grid.png'); }
.gi-operator-support      { -webkit-mask-image: url('../img/icons/gastops-operator-support.png'); mask-image: url('../img/icons/gastops-operator-support.png'); }
.gi-people-group          { -webkit-mask-image: url('../img/icons/gastops-people-group.png'); mask-image: url('../img/icons/gastops-people-group.png'); }
.gi-precision             { -webkit-mask-image: url('../img/icons/gastops-precision.png'); mask-image: url('../img/icons/gastops-precision.png'); }
.gi-probe                 { -webkit-mask-image: url('../img/icons/gastops-probe.png'); mask-image: url('../img/icons/gastops-probe.png'); }
.gi-process-cycle         { -webkit-mask-image: url('../img/icons/gastops-process-cycle.png'); mask-image: url('../img/icons/gastops-process-cycle.png'); }
.gi-product               { -webkit-mask-image: url('../img/icons/gastops-product.png'); mask-image: url('../img/icons/gastops-product.png'); }
.gi-report                { -webkit-mask-image: url('../img/icons/gastops-report.png'); mask-image: url('../img/icons/gastops-report.png'); }
.gi-results               { -webkit-mask-image: url('../img/icons/gastops-results.png'); mask-image: url('../img/icons/gastops-results.png'); }
.gi-risk-cost-down        { -webkit-mask-image: url('../img/icons/gastops-risk-cost-down.png'); mask-image: url('../img/icons/gastops-risk-cost-down.png'); }
.gi-risk-notice           { -webkit-mask-image: url('../img/icons/gastops-risk-notice.png'); mask-image: url('../img/icons/gastops-risk-notice.png'); }
.gi-risk-reduction        { -webkit-mask-image: url('../img/icons/gastops-risk-reduction.png'); mask-image: url('../img/icons/gastops-risk-reduction.png'); }
.gi-satisfaction          { -webkit-mask-image: url('../img/icons/gastops-satisfaction.png'); mask-image: url('../img/icons/gastops-satisfaction.png'); }
.gi-savings               { -webkit-mask-image: url('../img/icons/gastops-savings.png'); mask-image: url('../img/icons/gastops-savings.png'); }
.gi-sensor                { -webkit-mask-image: url('../img/icons/gastops-sensor.png'); mask-image: url('../img/icons/gastops-sensor.png'); }
.gi-site-location         { -webkit-mask-image: url('../img/icons/gastops-site-location.png'); mask-image: url('../img/icons/gastops-site-location.png'); }
.gi-task-config           { -webkit-mask-image: url('../img/icons/gastops-task-config.png'); mask-image: url('../img/icons/gastops-task-config.png'); }
.gi-tools                 { -webkit-mask-image: url('../img/icons/gastops-tools.png'); mask-image: url('../img/icons/gastops-tools.png'); }
.gi-turbine               { -webkit-mask-image: url('../img/icons/gastops-turbine.png'); mask-image: url('../img/icons/gastops-turbine.png'); }
.gi-uptime-gain           { -webkit-mask-image: url('../img/icons/gastops-uptime-gain.png'); mask-image: url('../img/icons/gastops-uptime-gain.png'); }
.gi-vessel-cycle          { -webkit-mask-image: url('../img/icons/gastops-vessel-cycle.png'); mask-image: url('../img/icons/gastops-vessel-cycle.png'); }
.gi-wind-fleet            { -webkit-mask-image: url('../img/icons/gastops-wind-fleet.png'); mask-image: url('../img/icons/gastops-wind-fleet.png'); }

/* SIZING FLOOR: these are presentation-scale line drawings, not UI glyphs.
   Measured on the alpha channel, the strokes retain only 0-2% strong ink at
   18px but recover by ~32px. Font Awesome glyphs are hinted for small sizes
   and these are not, so anywhere a Gastops icon stands alone it is given a
   larger box than the glyph it replaced, and the stroke is allowed to breathe.
   Do not drop these below 28px. */
.gi-lg { width: 2em; height: 2em; vertical-align: -0.55em; }

/* Stepper labels: the icon sits beside 0.95rem text, so 1em would render
   ~15px and vanish. Pin to an absolute size instead of an em multiple.
   The larger icon costs horizontal room, so the label is kept on one line
   and given a little more width to prevent a two-line wrap that would
   misalign the row. */
.stepper-label .gi { width: 32px; height: 32px; vertical-align: -0.62em; margin-right: 6px; }
.stepper-label { white-space: nowrap; }
@media (max-width: 1399.98px) {
  .stepper-label .gi { width: 28px; height: 28px; vertical-align: -0.52em; }
}
@media (max-width: 1199.98px) {
  .stepper-label .gi { width: 24px; height: 24px; vertical-align: -0.4em; }
  .stepper-label { white-space: normal; }
}

/* Stat bar: the icon is the visual anchor of each stat, so it carries more
   weight than the figure beside it. */
#trustBar .gi { width: 32px; height: 32px; vertical-align: -0.6em; }