/* ==========================================================================
   MTech Engineering — HOME: "Digital Facility"
   The home page presents the engineered facility itself as the interface: a
   night-shift control-room palette (deep facility green, blueprint cyan,
   signal lime), hairline instrumentation chrome and mono telemetry labels.

   Scope: ONLY the home page. index.html carries body.hx-home and links this
          sheet after home3d.css; every rule below is scoped to .hx.hx-home,
          so the 13 other pages that share home3d.css keep their light
          "Blueprint" theme untouched. home3d.css itself is unmodified.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   The base sheet's --hx-* names are load-bearing (rules all through
   home3d.css read them) so they are remapped here instead of renamed. One
   extra class out-specifies the .hx block they are declared in.
   -------------------------------------------------------------------------- */
.hx.hx-home {
  --hx-bg:      #061a15;
  --hx-bg-2:    #04110f;
  --hx-panel:   rgba(8, 38, 31, 0.72);
  --hx-panel-2: rgba(8, 38, 31, 0.92);
  --hx-line:    rgba(151, 231, 203, 0.16);
  --hx-line-2:  rgba(151, 231, 203, 0.34);
  --hx-blue:    #68e1c5;
  --hx-blue-2:  #8ff0d8;
  --hx-navy:    #eef8f2;
  --hx-red:     #d8f36b;
  --hx-ink:     #eef8f2;
  --hx-mute:    #9ab8aa;
  --hx-dim:     #6f8c81;
  --hx-r:       4px;
  --hx-shadow:  0 26px 60px -34px rgba(0, 0, 0, 0.72);
}

/* ==========================================================================
   FACILITY LAYER — the design language of the home page.
   Everything below is the page's look: palette, instrumentation chrome,
   buttons, the discipline-card animation and the section anatomy. It is
   appended last so it outranks the earlier Blueprint rules without needing
   !important, and it re-states the mobile behaviour it changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   F1. SEMANTIC TOKENS
   -------------------------------------------------------------------------- */
.hx.hx-home {
  --fac-bg:      #061a15;
  --fac-deep:    #04110f;
  --fac-cyan:    #68e1c5;
  --fac-lime:    #d8f36b;
  --fac-coral:   #ff755c;
  --fac-ink:     #eef8f2;
  --fac-mute:    #9ab8aa;
  --fac-dim:     #6f8c81;
  --fac-hair:    rgba(151, 231, 203, 0.16);
  --fac-hair-2:  rgba(151, 231, 203, 0.34);
  --fac-panel:   rgba(8, 38, 31, 0.78);
  --fac-panel-2: rgba(10, 46, 38, 0.94);
  --fac-pad:     clamp(20px, 5vw, 96px);
  /* home3d.css is the only sheet that declares this, and the two About pages
     that carry 3d-override.css do not load it — without it every
     calc(var(--hx-header) + n) in the hero falls back to no padding at all
     and the copy sits under the fixed header. */
  --hx-header:   74px;

  /* --- the wide palette. Dark green alone flattens the page and swallows
     light-weight copy, so each of these has a job rather than decorating:
     mint carries prose that has to read over the lit model, steel is the
     neutral for micro-labels, mid-green and teal build card depth, amber is
     reserved for text links, and laser cyan is the fine instrument accent. */
  --fac-mint:    #c9e8d8;   /* light sage — body copy and leads */
  --fac-steel:   #a9b8b3;   /* galvanized grey — neutral micro-labels */
  --fac-mid:     #12493b;   /* structural mid-green — card surfaces */
  --fac-mid-2:   #0d3a30;
  --fac-teal:    #0c3a3f;   /* blueprint deep teal — panel depth */
  --fac-teal-2:  #083036;
  --fac-amber:   #ffb057;   /* signal amber — text links */
  --fac-laser:   #7ff0ff;   /* laser cyan — fine instrument accents */
  /* the vertical grade was nearly transparent across the middle, which is
     exactly where the hero copy sits — it now holds a readable base there */
  --fac-scrim:   linear-gradient(180deg, rgba(6, 26, 21, 0.74), rgba(6, 26, 21, 0.46) 40%, rgba(6, 26, 21, 0.96));
}

/* --------------------------------------------------------------------------
   F2. ATMOSPHERE — the dark instrument room the model sits in
   -------------------------------------------------------------------------- */
.hx.hx-home::before {
  background:
    radial-gradient(110% 80% at 82% 34%, rgba(104, 225, 197, 0.11), transparent 60%),
    radial-gradient(120% 90% at 12% 88%, rgba(216, 243, 107, 0.05), transparent 62%),
    radial-gradient(150% 120% at 50% 45%, transparent 46%, rgba(4, 17, 15, 0.72) 100%);
}
.hx.hx-home::after {
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(151, 231, 203, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 231, 203, 0.055) 1px, transparent 1px);
  background-size: 96px 96px;
}
.hx.hx-home .hx-nogl {
  background:
    radial-gradient(90% 60% at 74% 28%, rgba(104, 225, 197, 0.1), transparent 60%),
    radial-gradient(120% 90% at 18% 82%, rgba(4, 17, 15, 0.9), transparent 60%),
    var(--fac-bg);
}

/* --------------------------------------------------------------------------
   F3. HEADER — night-shift glass, logo inverted so it survives the dark
   -------------------------------------------------------------------------- */
.hx.hx-home .site-header {
  background: linear-gradient(180deg, rgba(6, 26, 21, 0.94), rgba(6, 26, 21, 0.62));
  backdrop-filter: blur(9px) saturate(130%);
  -webkit-backdrop-filter: blur(9px) saturate(130%);
  border-bottom: 1px solid transparent;
}
.hx.hx-home .site-header.is-scrolled {
  background: rgba(6, 26, 21, 0.96);
  border-bottom-color: var(--fac-hair);
  box-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.9);
}
/* The company logo keeps its original colours. It is a navy mark on
   transparency (~97% dark pixels), so it needs a light ground — but a hard
   white chip reads as a sticker on this page. The ground is therefore a
   feathered mint-tinted halo: opaque under the mark, gone by the edge, so it
   blends into the header instead of sitting on it. */
.hx.hx-home .brand {
  padding: 9px 16px;
  border-radius: 6px;
  background: radial-gradient(130% 150% at 50% 50%,
    rgba(241, 250, 246, 0.97) 0%,
    rgba(219, 240, 231, 0.78) 48%,
    rgba(186, 222, 208, 0.26) 74%,
    rgba(186, 222, 208, 0) 100%);
  box-shadow: none;
}
.hx.hx-home .brand img { filter: none; }
.hx.hx-home .nav-link { color: var(--fac-ink); font-size: 16px; }
.hx.hx-home .nav-link:hover, .hx.hx-home .nav-link[aria-current="page"] { color: var(--fac-lime); }
.hx.hx-home .nav-link::after { background: var(--fac-lime); height: 2px; }
.hx.hx-home .caret { opacity: 0.55; }
.hx.hx-home .dropdown {
  background: rgba(6, 26, 21, 0.97);
  border: 1px solid var(--fac-hair);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.9);
}
.hx.hx-home .dropdown a { color: var(--fac-mute); }
.hx.hx-home .dropdown a:hover { background: rgba(104, 225, 197, 0.1); color: var(--fac-ink); }
.hx.hx-home .dropdown svg { color: var(--fac-cyan); }
.hx.hx-home .burger span { background: var(--fac-ink); }
.hx.hx-home .mobile-nav { background: #04110f; }
.hx.hx-home .mobile-nav a { color: var(--fac-ink); border-color: var(--fac-hair); }
.hx.hx-home .mobile-nav a.sub { color: var(--fac-dim); }

/* --------------------------------------------------------------------------
   F4. BUTTONS — square, signals-coloured, no pill geometry
   -------------------------------------------------------------------------- */
.hx.hx-home .btn {
  border-radius: 3px;
  padding: 15px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  box-shadow: none;
  transition: transform 0.25s var(--hx-ease), box-shadow 0.25s var(--hx-ease),
              background 0.25s, border-color 0.25s, color 0.25s;
}
.hx.hx-home .btn--red,
.hx.hx-home .btn--primary {
  background: var(--fac-lime);
  color: var(--fac-bg);
  box-shadow: 0 14px 34px -22px rgba(216, 243, 107, 0.8);
}
.hx.hx-home .btn--red:hover,
.hx.hx-home .btn--primary:hover { color: var(--fac-bg); background: #e6ff86; transform: translateY(-2px); }
/* secondary buttons carry a real surface (structural mid-green) instead of
   sitting on the background, so the pair reads as two actions not one */
.hx.hx-home .btn--ghost,
.hx.hx-home .btn--outline {
  color: var(--fac-mint);
  background: linear-gradient(180deg, var(--fac-mid), var(--fac-mid-2));
  box-shadow: inset 0 0 0 1px rgba(127, 240, 255, 0.32), 0 16px 34px -26px rgba(0, 0, 0, 0.9);
}
.hx.hx-home .btn--ghost:hover,
.hx.hx-home .btn--outline:hover {
  color: var(--fac-ink);
  background: linear-gradient(180deg, #165944, var(--fac-mid));
  box-shadow: inset 0 0 0 1px var(--fac-laser), 0 16px 34px -26px rgba(0, 0, 0, 0.9);
  transform: translateY(-2px);
}
.hx.hx-home .btn__sheen { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); }
.hx.hx-home .site-header .nav-cta { border-radius: 3px; background: var(--fac-lime); color: var(--fac-bg); box-shadow: none; }
.hx.hx-home .site-header .nav-cta:hover { background: #e6ff86; color: var(--fac-bg); }

/* --------------------------------------------------------------------------
   F5. TYPE — telemetry labels in mono, headlines set tight
   -------------------------------------------------------------------------- */
.hx.hx-home .hx-idx {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fac-lime);
}
.hx.hx-home .hx-idx b { color: var(--fac-lime); font-weight: 500; }
.hx.hx-home .hx-idx::after {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  max-width: none;
  height: 1px;
  background: linear-gradient(90deg, rgba(151, 231, 203, 0.5), transparent);
}
.hx.hx-home .eyebrow {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fac-steel);
  margin: 0 0 14px;
}
.hx.hx-home .eyebrow::before { display: none; }
.hx.hx-home .h-2 {
  color: var(--fac-ink);
  font-size: clamp(2.05rem, 4.4vw, 3.5rem);
  font-weight: 700;
  /* 1.06 and not tighter: these headlines are split into masked lines by
     anim.js, and an overflow-hidden line box at <1 clips descenders */
  line-height: 1.06;
  letter-spacing: -0.045em;
  margin: 12px 0 15px;
}
.hx.hx-home .h-3 { color: var(--fac-ink); }
/* prose is mint, not the muted green: the muted tone is reserved for HUD
   micro-labels, and body copy at this size needs the extra contrast */
.hx.hx-home .lead { color: var(--fac-mint); }
.hx.hx-home .section--dark .lead, .hx.hx-home .section--paper .lead { color: var(--fac-mute); }
.hx.hx-home .card h3, .hx.hx-home .card p, .hx.hx-home .checks li, .hx.hx-home .checks li span { color: var(--fac-mute); }
.hx.hx-home .card h3 { color: var(--fac-ink); }
/* the Blueprint layer put a near-white plate behind every section head, which
   glares on the dark page — it is now the same instrument glass as the cards */
.hx.hx-home .section-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto clamp(28px, 4vw, 52px);
  padding: 22px 26px 24px;
  border: 1px solid var(--fac-hair);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(12, 58, 63, 0.82), rgba(8, 48, 54, 0.68));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 30px 70px -50px rgba(0, 0, 0, 0.95);
}
.hx.hx-home .section-head .lead { margin-inline: auto; max-width: 640px; }
.hx.hx-home .section-head .hx-idx { margin-bottom: 8px; }
.hx.hx-home .checks svg { color: var(--fac-cyan); }

/* --------------------------------------------------------------------------
   F6. HERO — status lines, centred copy, metrics rail, ticker, cue
   -------------------------------------------------------------------------- */
.hx.hx-home .hx-hero {
  min-height: 100svh;
  padding-top: calc(var(--hx-header) + 34px);
  padding-bottom: 92px;
}
/* two scrims: the vertical one grades the whole chapter, the radial one sits
   behind the centred copy so the lead stays readable over the lit roof */
.hx.hx-home .hx-hero::before {
  /* deep enough to read copy across, and wide enough to hold the whole
     centred column — the model still shows through the outer thirds */
  background:
    radial-gradient(80% 60% at 50% 52%, rgba(4, 17, 15, 0.97), rgba(4, 17, 15, 0.82) 58%, transparent 86%),
    var(--fac-scrim);
}
/* A second, tighter vignette sits directly behind the copy column. Measured
   against the rendered model, the widest scrim alone still left the lead at
   3.6:1 where a lit truss crossed it; this lifts the whole column clear of
   that band without dimming the rest of the frame. */
.hx.hx-home .hx-hero__copy { position: relative; }
.hx.hx-home .hx-hero__copy::before {
  content: "";
  position: absolute;
  inset: -8% -14%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 62% at 50% 48%, rgba(4, 17, 15, 0.92), rgba(4, 17, 15, 0.66) 62%, transparent 100%);
}
/* the Blueprint layer's daylight scrim would wash the model out of the dark
   page — the facility hero uses the single cinematic scrim above instead */
.hx.hx-home .hx-hero::after { background: none; }
.fac-status {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 0 var(--fac-pad);
  font-family: var(--hx-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fac-mute);
}
.fac-status--live { margin-top: 22px; color: var(--fac-cyan); }
.fac-status--live span:first-child::before {
  content: "●";
  margin-right: 9px;
  color: var(--fac-lime);
  animation: fac-pulse 2.6s ease-in-out infinite;
}
@keyframes fac-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.32; } }
.hx.hx-home .hx-hero__inner { position: relative; z-index: 3; padding: 0 var(--fac-pad); }
.hx.hx-home .hx-hero__copy {
  display: block;
  max-width: 980px;
  margin: clamp(18px, 3.4vh, 54px) auto 0;
  text-align: center;
}
.hx.hx-home .hx-coord { justify-content: center; color: var(--fac-mute); font-family: var(--hx-mono); }
.hx.hx-home .hx-coord span + span::before { color: rgba(151, 231, 203, 0.45); }
.hx.hx-home .hx-coord i { background: var(--fac-lime); }
.hx.hx-home .hx-chip {
  margin: 18px auto 0;
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fac-mute);
  background: rgba(8, 38, 31, 0.6);
  border-color: var(--fac-hair);
}
.hx.hx-home .hx-chip::before { background: var(--fac-cyan); }
.hx.hx-home .hx-title {
  margin: 18px 0 20px;
  color: var(--fac-ink);
  font-size: clamp(2.5rem, 6.2vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: -0.055em;
  font-weight: 700;
}
.hx.hx-home .hx-title em { color: var(--fac-cyan); font-style: normal; }
.hx.hx-home .hx-lead {
  max-width: 660px;
  margin: 0 auto;
  color: var(--fac-mint);
  font-size: clamp(1.05rem, 1.35vw, 1.14rem);
  line-height: 1.62;
  /* the hero lead sits over the lit structure: the scrim does most of the
     work, the shadow carries the few pixels where a truss crosses the text */
  text-shadow: 0 1px 3px rgba(4, 17, 15, 0.95), 0 3px 22px rgba(4, 17, 15, 0.9);
}
.hx.hx-home .hx-lead b { color: #ffffff; }
.hx.hx-home .hx-hero .hx-title { text-shadow: 0 2px 6px rgba(4, 17, 15, 0.9), 0 6px 30px rgba(4, 17, 15, 0.86); }
.hx.hx-home .hx-hero .hx-coord,
.hx.hx-home .fac-status { text-shadow: 0 1px 8px rgba(4, 17, 15, 0.95); }
.hx.hx-home .hx-cta { justify-content: center; margin-top: 30px; gap: 12px; }

.fac-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 940px;
  margin: clamp(22px, 3.4vh, 40px) auto 0;
  background: var(--fac-hair);
  border: 1px solid var(--fac-hair);
}
.fac-metric {
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(12, 58, 63, 0.62), rgba(6, 26, 21, 0.88));
  text-align: left;
}
/* one accent per metric, so the rail reads as four instruments not four
   copies of the same readout */
.fac-metric:nth-child(1) strong i { color: var(--fac-lime); }
.fac-metric:nth-child(2) strong i { color: var(--fac-laser); }
.fac-metric:nth-child(3) strong i { color: var(--fac-amber); }
.fac-metric:nth-child(4) strong i { color: var(--fac-mint); }
.fac-metric strong {
  display: block;
  font-family: var(--hx-mono);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--fac-ink);
}
.fac-metric strong i { color: var(--fac-lime); font-style: normal; }
.fac-metric > span {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--fac-mute);
}
.hx.hx-home .hx-panel { display: none; }

.hx.hx-home .hx-ticker {
  margin-top: clamp(20px, 3vh, 40px);
  border-top: 1px solid var(--fac-hair);
  border-bottom: 1px solid rgba(127, 240, 255, 0.22);
  background: linear-gradient(90deg, rgba(12, 58, 63, 0.55), rgba(6, 26, 21, 0.6));
  color: var(--fac-steel);
}
.hx.hx-home .hx-ticker__row { font-family: var(--hx-mono); letter-spacing: 0.14em; }
.hx.hx-home .hx-ticker__row span { color: var(--fac-steel); }
.hx.hx-home .hx-cue {
  color: var(--fac-mute);
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hx.hx-home .hx-cue i { width: 44px; height: 1px; background: var(--fac-lime); }

/* HUD chrome: blueprint corners + mono figure caption + module legend */
.hx.hx-home .hx-hud__frame { border-color: var(--fac-hair); }
.hx.hx-home .hx-hud__corner { border-color: var(--fac-hair-2); }
/* the FIG.00 caption said the same thing as the status line above it, and the
   two collided at the top of the hero — the status line wins */
.hx.hx-home .hx-hud__fig { display: none; }
.hx.hx-home .hx-hud__fig { font-family: var(--hx-mono); color: var(--fac-mute); }
.hx.hx-home .hx-hud__fig b { color: var(--fac-lime); }
.hx.hx-home .hx-hud__fig i { background: var(--fac-hair-2); }
.hx.hx-home .hx-hud__reticle span { border-color: var(--fac-hair-2); }
.hx.hx-home .hx-hud__legend li {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fac-dim);
  border-color: var(--fac-hair);
  background: rgba(6, 26, 21, 0.55);
}
.hx.hx-home .hx-hud__legend li.is-active { color: var(--fac-lime); border-color: rgba(216, 243, 107, 0.5); }
.hx.hx-home .hx-hud__hint {
  /* the standards ticker now owns the bottom strip of the hero, so the drag
     hint is lifted clear of it (it used to sit behind it) */
  bottom: 158px;
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fac-mute);
  background: rgba(6, 26, 21, 0.66);
  border: 1px solid var(--fac-hair);
}

/* --------------------------------------------------------------------------
   F7. DISCIPLINE CARDS — the "System stack" pattern
   Hover/focus: the card lifts, the frame turns cyan and a lime rule sweeps
   in from the left. The selection is mirrored by the readout and by the 3D
   module of the same discipline.
   -------------------------------------------------------------------------- */
.fac-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.fac-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 138px;
  padding: 15px 16px 17px;
  overflow: hidden;
  border: 1px solid var(--fac-hair);
  border-radius: 4px;
  background: var(--fac-panel);
  color: var(--fac-ink);
  transition: transform 0.25s var(--hx-ease), border-color 0.25s, background 0.25s;
}
.fac-card::after {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 2px;
  background: var(--fac-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--hx-ease);
}
/* NOTE: the lift uses the `translate` property, not `transform` — the reveal
   animations leave an inline transform on these elements, which would win over
   any CSS transform. `translate` composes with it instead. */
.fac-card:hover, .fac-card:focus-visible, .fac-card.is-active {
  background: rgba(22, 74, 61, 0.86);
  border-color: var(--fac-cyan);
  translate: 0 -5px;
  color: var(--fac-ink);
}
.fac-card:hover::after, .fac-card:focus-visible::after, .fac-card.is-active::after { transform: scaleX(1); }
.fac-card b {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fac-lime);
}
.fac-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.fac-card small { font-size: 14px; line-height: 1.45; color: var(--fac-mute); }
.fac-card__go {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fac-cyan);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s;
}
.fac-card:hover .fac-card__go, .fac-card:focus-visible .fac-card__go, .fac-card.is-active .fac-card__go { opacity: 1; transform: none; }

.fac-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  margin-top: 12px;
  padding: 15px 18px;
  border-left: 2px solid var(--fac-coral);
  background: var(--fac-panel);
}
.fac-readout__label {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fac-coral);
}
.fac-readout strong { font-family: var(--font-display); font-size: 16px; color: var(--fac-ink); }
.fac-readout__text { font-size: 14.5px; line-height: 1.5; color: var(--fac-mute); flex: 1 1 320px; }
.fac-readout__link {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fac-cyan);
  white-space: nowrap;
}
.fac-readout__link:hover { color: var(--fac-laser); }
.fac-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--fac-hair);
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fac-mute);
}
.fac-more b { color: var(--fac-ink); font-weight: 500; }
.fac-more a { color: var(--fac-amber); }
.fac-more a:hover { color: var(--fac-laser); }

/* the same pattern applied to the site's own <article class="card"> markup:
   mono code, name, description, service link — so the disciplines keep their
   icons, their copy and their links while the animation is identical */
.hx.hx-home .fac-grid .card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 198px;
  padding: 15px 16px 17px;
  overflow: hidden;
  border: 1px solid var(--fac-hair);
  border-radius: 4px;
  background: var(--fac-panel);
  box-shadow: none;
  transition: border-color 0.25s, background 0.25s, translate 0.25s var(--hx-ease);
}
.hx.hx-home .fac-grid .card::before {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 2px;
  border: 0;
  background: var(--fac-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--hx-ease);
}
.hx.hx-home .fac-grid .card::after { display: none; }
.hx.hx-home .fac-grid .card:hover,
.hx.hx-home .fac-grid .card:focus-within,
.hx.hx-home .fac-grid .card.is-active {
  background: rgba(22, 74, 61, 0.86);
  border-color: var(--fac-cyan);
  translate: 0 -5px;
}
.hx.hx-home .fac-grid .card:hover::before,
.hx.hx-home .fac-grid .card:focus-within::before,
.hx.hx-home .fac-grid .card.is-active::before { transform: scaleX(1); }
.hx.hx-home .fac-grid .card:hover .card__icon { transform: none; background: none; color: var(--fac-cyan); }
.hx.hx-home .fac-code {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fac-lime);
}
.hx.hx-home .fac-grid .card h3 {
  margin: 0;
  padding-right: 36px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--fac-ink);
}
.hx.hx-home .fac-grid .card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--fac-mute); }
.hx.hx-home .fac-grid .card .card__icon {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 26px;
  height: 26px;
  background: none;
  color: var(--fac-cyan);
  opacity: 0.6;
}
.hx.hx-home .fac-grid .card .card__icon svg { width: 26px; height: 26px; }
.hx.hx-home .fac-grid .card .card__link {
  margin-top: auto;
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fac-amber);
  opacity: 0.85;
  transition: opacity 0.25s, color 0.25s;
}
.hx.hx-home .fac-grid .card .card__link svg { width: 14px; height: 14px; }
.hx.hx-home .fac-grid .card:hover .card__link,
.hx.hx-home .fac-grid .card.is-active .card__link { color: var(--fac-laser); opacity: 1; }
.hx.hx-home .fac-readout { grid-column: 1 / -1; }
.hx.hx-home .fac-metrics__head {
  display: flex;
  justify-content: space-between;
  max-width: 940px;
  margin: clamp(22px, 3.4vh, 40px) auto 0;
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fac-mute);
}
.hx.hx-home .fac-metrics__head + .fac-metrics { margin-top: 10px; }

/* --------------------------------------------------------------------------
   F8. PANELS / SECTORS / STUDIO — dark instrument surfaces
   -------------------------------------------------------------------------- */
.hx.hx-home .card, .hx.hx-home .info-tile, .hx.hx-home .dl-card, .hx.hx-home .faq-item {
  background: var(--fac-panel);
  border-color: var(--fac-hair);
  color: var(--fac-mute);
}
.hx.hx-home .hx-matrix { gap: 8px; }
.hx.hx-home .split-media__badge {
  z-index: 2; /* the slider track follows it in the DOM and would paint over it */
  padding: 9px 13px;
  border-radius: 3px;
  background: linear-gradient(160deg, #10474f, #072e34);
  border: 1px solid rgba(127, 240, 255, 0.3);
  box-shadow: 0 22px 50px -34px rgba(0, 0, 0, 0.95);
  color: var(--fac-ink);
}
.hx.hx-home .split-media__badge b { color: var(--fac-laser); }
.hx.hx-home .split-media__badge span { color: var(--fac-steel); }
/* --------------------------------------------------------------------------
   F8a. STUDIO BAND
   Section 02 is transparent again — the 3D world shows through the whole
   section. Only the written part (the grid column that carries the copy) gets
   a surface, because that is where long prose sits over the moving scene; the
   photo column stays directly on the model.
   -------------------------------------------------------------------------- */
.hx.hx-home #who {
  background: transparent !important;
  border-top: 0;
  border-bottom: 0;
}
/* The copy column of section 02: a dark instrument panel in the same finish as
   the cards and section heads, so the prose and checklist never sit on the
   moving 3D scene. (The base sheet's white paper-plate rule for this element
   needs a `.hx` ancestor that only <body> provides, so it never painted on the
   home page — this panel is the home page's own surface.) */
.hx.hx-home #who .grid-2 > div[data-reveal="right"] {
  /* the column stretches to the photo's height (the base grid sets
     align-items: stretch), so the copy centres itself in the tall panel */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, rgba(12, 58, 63, 0.94), rgba(8, 48, 54, 0.96)) !important;
  border: 1px solid var(--fac-hair) !important;
  border-radius: 4px;
  padding: clamp(20px, 2.2vw, 30px) !important;
  box-shadow: 0 30px 74px -52px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Prose and checklist in the column go mint, not the muted green: body copy at
   this size needs the extra contrast over the panel. */
.hx.hx-home #who .lead { color: var(--fac-mint); }

/* --------------------------------------------------------------------------
   F8b. STUDIO SLIDER
   The studio section used to be a collage: one tall photo with two small ones
   in opposite corners. It is now a single tall frame carrying three portrait
   photographs on an 18 s cycle, 6 s each, with the corner badge held over it.
   Pure CSS: no timer to get out of step with a hidden tab.
   -------------------------------------------------------------------------- */
.studio-slider {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
}
.studio-slider__track {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--fac-hair);
  border-radius: 4px;
  background: var(--fac-teal-2);
  box-shadow: 0 46px 100px -66px rgba(0, 0, 0, 0.95);
}
.studio-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}
.studio-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Positive delays, not negative: a negative delay would start every frame
   mid-cycle, which leaves all three transparent on the first paint. Each
   frame fades in over the first 0.3 s of its own 6 s window and the next one
   fades in as it leaves, so the change reads as a dissolve. */
.studio-slide:nth-child(1) { animation: studio-slide 18s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.studio-slide:nth-child(2) { animation: studio-slide 18s cubic-bezier(0.4, 0, 0.2, 1) 6s infinite; }
.studio-slide:nth-child(3) { animation: studio-slide 18s cubic-bezier(0.4, 0, 0.2, 1) 12s infinite; }
@keyframes studio-slide {
  0%      { opacity: 0; transform: scale(1.06); }
  1.7%    { opacity: 1; }
  31.6%   { opacity: 1; transform: scale(1); }
  33.33%  { opacity: 0; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1); }
}
/* the three ticks double as the progress readout for the cycle */
.studio-slider__bars { display: flex; gap: 6px; margin-top: 10px; }
.studio-slider__bars i {
  position: relative;
  flex: 1 1 0;
  height: 2px;
  overflow: hidden;
  background: rgba(151, 231, 203, 0.18);
}
.studio-slider__bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fac-laser);
  transform: scaleX(0);
  transform-origin: left;
  animation: studio-bar 18s linear infinite;
}
.studio-slider__bars i:nth-child(2)::after { animation-delay: 6s; }
.studio-slider__bars i:nth-child(3)::after { animation-delay: 12s; }
@keyframes studio-bar {
  0%      { transform: scaleX(0); }
  33.33%  { transform: scaleX(1); }
  100%    { transform: scaleX(1); }
}
.hx.hx-home .ind-card {
  border: 1px solid var(--fac-hair);
  border-radius: 4px;
  background: var(--fac-deep);
  transition: transform 0.25s var(--hx-ease), border-color 0.25s;
}
.hx.hx-home .ind-card:hover { translate: 0 -5px; border-color: var(--fac-cyan); }
.hx.hx-home .ind-card__body { background: linear-gradient(180deg, rgba(4, 17, 15, 0.18), rgba(6, 42, 44, 0.94)); }
.hx.hx-home .ind-card__body small {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fac-lime);
}
.hx.hx-home .ind-card__body h3 { color: #fff; font-size: 19px; letter-spacing: -0.02em; }
.hx.hx-home .ind-card__body p { color: #cfe4da; }

/* --------------------------------------------------------------------------
   F9. PROCESS — delivery gates, not five boxes
   -------------------------------------------------------------------------- */
.hx.hx-home .steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  border-top: 0;
  border-bottom: 0;
}
/* each gate is a card: mid-green surface, teal shadow depth, and the stage
   number kept as the one bright instrument mark on it */
.hx.hx-home .step {
  position: relative;
  min-height: 206px;
  padding: 20px 18px 22px;
  border: 1px solid var(--fac-hair);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 73, 59, 0.92), rgba(8, 48, 54, 0.94));
  box-shadow: 0 24px 54px -42px rgba(0, 0, 0, 0.95);
  transition: border-color 0.25s, background 0.25s, translate 0.25s var(--hx-ease);
}
/* the base sheet numbers these tiles with its own blue "P-0n" pill; the page
   labels them "Gate / 0n" now, so the duplicate is switched off */
.hx.hx-home .step::before { content: none; }
.hx.hx-home .step b {
  display: block;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fac-laser);
}
.hx.hx-home .step h3 { margin: 14px 0 9px; font-size: 18px; color: var(--fac-ink); }
.hx.hx-home .step p { color: var(--fac-mint); font-size: 14.5px; line-height: 1.56; }
.hx.hx-home .step:hover {
  translate: 0 -5px;
  border-color: var(--fac-laser);
  background: linear-gradient(180deg, rgba(22, 86, 70, 0.95), rgba(9, 54, 60, 0.96));
}

/* --------------------------------------------------------------------------
   F10. CTA — one instrument panel, centred
   -------------------------------------------------------------------------- */
.hx.hx-home .cta-band {
  display: block;
  padding: clamp(34px, 6vw, 78px);
  border: 1px solid var(--fac-hair);
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(12, 58, 63, 0.94), rgba(8, 48, 54, 0.96));
  box-shadow: 0 40px 110px -50px rgba(0, 0, 0, 0.9);
  text-align: center;
}
/* the two closing actions were full-width-feeling bars; they are compact now,
   so the pair reads as a choice rather than two banners */
.hx.hx-home .cta-band .btn { padding: 12px 17px; font-size: 15px; gap: 9px; }
.hx.hx-home .cta-band .btn svg { width: 17px; height: 17px; }
.hx.hx-home .cta-band__inner { display: block; padding: 0; }
.hx.hx-home .cta-band__bg { opacity: 0.16; }
.hx.hx-home .cta-band__bg::after { background: linear-gradient(180deg, rgba(6, 26, 21, 0.72), rgba(4, 17, 15, 0.96)); }
/* about/company-profile/ and about/team/ do not load home3d.css, so its
   `.hx .cta-band::after { content: none }` — the rule that retired main.css's
   old dark-theme navy gradient — never reached them. That overlay sits at
   z-index -1 inside the band's own stacking context, i.e. straight on top of
   the band's dark green surface, which is why the closing section still read
   blue. */
.hx.hx-home .cta-band::after { content: none !important; }
/* base-band size: at the facility scale the headline wrapped to three lines in
   the 640px column — at the base band's scale it holds one row */
.hx.hx-home .cta-band h2 { color: var(--fac-ink); font-size: clamp(1.4rem, 2.6vw, 2.3rem); letter-spacing: -0.03em; }
.hx.hx-home .cta-band p { color: var(--fac-mute); max-width: 600px; margin-inline: auto; }
.hx.hx-home .cta-band .hx-idx { margin-bottom: 6px; }
/* The band is centred, but its copy column was a block-level child of a
   1017px row with an inline max-width — so it hugged the left edge and every
   line inside it sat 208px left of centre. Centring the column is the fix
   (measured centre offset: -208px → 0). */
/* :not(.hero__cta) matters — that row is also a direct child, and it carries an
   inline style="margin:0", so inheriting the column's max-width pushed the
   buttons off centre instead. */
.hx.hx-home .cta-band__inner > div:not(.hero__cta) { max-width: 640px; margin-inline: auto; }
/* the kicker and the eyebrow are inline-flex siblings sharing one centred
   line — "06 Brief · Ready when you are" reads as a single instrument row */
.hx.hx-home .hx-cta-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 0; }
.hx.hx-home .hx-cta-list li {
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fac-mute);
}
/* the 01/02/03 counters keep their numbers but lose the lime highlight this
   layer painted behind them; they carry the lime ink themselves instead */
.hx.hx-home .hx-cta-list li::before { background: none; color: var(--fac-lime); }
/* the row defaults to a stretched column, which made both buttons full-width
   bars; they are content-sized side by side now (they wrap on narrow screens) */
.hx.hx-home .cta-band .hero__cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px !important;
}
.hx.hx-home .cta-band .hero__cta .btn { width: auto; align-self: center; }

/* --------------------------------------------------------------------------
   F11. FOOTER + chapter rail + callouts
   -------------------------------------------------------------------------- */
.hx.hx-home .site-footer {
  background: var(--fac-deep) !important;
  border-top: 1px solid var(--fac-hair);
  color: var(--fac-mute);
}
.hx.hx-home .site-footer h4 {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fac-ink);
}
.hx.hx-home .site-footer p, .hx.hx-home .site-footer li, .hx.hx-home .site-footer span { color: var(--fac-mute); }
.hx.hx-home .footer-links a { color: var(--fac-mute); }
.hx.hx-home .footer-links a:hover { color: var(--fac-amber); }
.hx.hx-home .footer-social a { border-color: var(--fac-hair); color: var(--fac-steel); }
.hx.hx-home .footer-social a:hover { color: var(--fac-amber); border-color: var(--fac-amber); }
/* the footer logo keeps its original colours too (see the header note), on the
   same feathered halo, because the mark itself is navy on transparency */
.hx.hx-home .footer-logo {
  filter: none;
  opacity: 1;
  padding: 12px 18px;
  border-radius: 6px;
  background: radial-gradient(130% 150% at 50% 50%,
    rgba(241, 250, 246, 0.96) 0%,
    rgba(219, 240, 231, 0.76) 48%,
    rgba(186, 222, 208, 0.24) 74%,
    rgba(186, 222, 208, 0) 100%);
  box-shadow: none;
}
/* the route curtain carries the same mark on a dark ground */
.hx.hx-home .page-curtain__logo {
  padding: 18px 24px;
  border-radius: 8px;
  background: radial-gradient(130% 150% at 50% 50%,
    rgba(241, 250, 246, 0.96) 0%,
    rgba(219, 240, 231, 0.74) 48%,
    rgba(186, 222, 208, 0.22) 74%,
    rgba(186, 222, 208, 0) 100%);
}
.hx.hx-home .footer-bottom { border-top: 1px solid var(--fac-hair); color: var(--fac-dim); }
.hx.hx-home .hx-rail a { color: var(--fac-dim); }
.hx.hx-home .hx-rail a b { font-family: var(--hx-mono); letter-spacing: 0.1em; }
.hx.hx-home .hx-rail a i { background: var(--fac-hair-2); }
.hx.hx-home .hx-rail a.is-on { color: var(--fac-lime); }
.hx.hx-home .hx-rail a.is-on i { background: var(--fac-lime); }
.hx.hx-home .hx-callout__box {
  background: rgba(4, 17, 15, 0.9);
  border: 1px solid var(--fac-hair-2);
  color: var(--fac-ink);
}
.hx.hx-home .hx-callout__box b { color: var(--fac-lime); font-family: var(--hx-mono); }
.hx.hx-home .hx-callout__box em { color: var(--fac-mute); }
.hx.hx-home .hx-callout__dot { background: var(--fac-cyan); }
.hx.hx-home .cursor-glow { background: radial-gradient(circle, rgba(104, 225, 197, 0.14), transparent 70%); }
.hx.hx-home .page-curtain { background: var(--grad-ink); }
.hx.hx-home ::selection { background: var(--fac-lime); color: var(--fac-bg); }

/* --------------------------------------------------------------------------
   F12. RESPONSIVE (restates what the facility layer changes)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .fac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .hx.hx-home .hx-hero__inner { padding-bottom: 26px; }
  .hx.hx-home .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fac-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hx.hx-home .hx-hero { min-height: auto; padding-top: calc(var(--hx-header) + 22px); }
  .hx.hx-home .hx-hero::before {
    background: linear-gradient(180deg, rgba(6, 26, 21, 0.72), rgba(6, 26, 21, 0.9) 55%, rgba(6, 26, 21, 0.97));
  }
  .hx.hx-home .hx-title { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .fac-status { font-size: 13.5px; letter-spacing: 0.1em; }
  .fac-status span:last-child { display: none; }
  .fac-metric { padding: 12px 13px; }
  .fac-metric strong { font-size: 22px; }
  .fac-grid { grid-template-columns: 1fr; }
  .fac-card { min-height: 0; }
  .hx.hx-home .steps { grid-template-columns: 1fr; }
  .hx.hx-home .step { min-height: 0; border-right: 0; }
  .hx.hx-home .step h3 { margin-top: 14px; }
  .hx.hx-home #gl { opacity: 0.5; }
  .hx.hx-home .ind-card { border-radius: 3px; }
  .hx.hx-home .hx-hud__hint { bottom: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .fac-status--live span:first-child::before { animation: none; }
  .hx.hx-home .hx-rail a.is-on i { background: var(--fac-lime); }
  /* the studio slider stops on its first frame rather than cycling */
  .studio-slide { animation: none; }
  .studio-slide:nth-child(1) { opacity: 1; }
  .studio-slider__bars i::after { animation: none; transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   F13. FORCED COLOURS / PRINT — keep the page legible outside the theme
   -------------------------------------------------------------------------- */
@media print {
  .hx.hx-home #gl, .hx.hx-home .hx-hud, .hx.hx-home .hx-ticker, .hx.hx-home .hx-rail, .hx.hx-home .hx-callouts { display: none !important; }
  .hx.hx-home, .hx.hx-home .section, .hx.hx-home .section--dark { background: #fff !important; color: #111 !important; }
  .hx.hx-home .h-2, .hx.hx-home .hx-title, .fac-card strong { color: #111 !important; }
  .hx.hx-home .lead, .fac-card small, .hx.hx-home .step p { color: #333 !important; }
}


/* --------------------------------------------------------------------------
   F14. READABILITY
   The instrument type was sized like a poster: card copy at 12.5px and mono
   labels at 10px are below what an older reader can scan without effort. Copy
   moves to 15-16px and the mono labels to 12-13px, which is the floor for
   this typeface at these contrasts. Spacing is nudged with the sizes so the
   larger text keeps its rhythm.
   -------------------------------------------------------------------------- */
.hx.hx-home .hx-lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.66; }
.hx.hx-home .section-head .lead { font-size: 1.06rem; }
.hx.hx-home .fac-grid .card h3 { font-size: 18px; }
.hx.hx-home .fac-grid .card p { font-size: 16px; line-height: 1.6; }
.hx.hx-home .fac-code { font-size: 14px; }
.hx.hx-home .fac-grid .card .card__link { font-size: 14.5px; }
.hx.hx-home .fac-readout__label { font-size: 14px; }
.hx.hx-home .fac-readout strong { font-size: 17px; }
.hx.hx-home .fac-readout__text { font-size: 16px; line-height: 1.6; }
.hx.hx-home .fac-readout__link { font-size: 14.5px; }
.hx.hx-home .fac-metric > span { font-size: 15px; line-height: 1.5; }
.hx.hx-home .fac-metrics__head { font-size: 14px; }
.hx.hx-home .fac-status { font-size: 14px; }
.hx.hx-home .hx-chip { font-size: 14px; }
.hx.hx-home .hx-coord { font-size: 14px; }
.hx.hx-home .eyebrow,
.hx.hx-home .hx-idx { font-size: 14.5px; }
.hx.hx-home .step b { font-size: 14.5px; }
.hx.hx-home .step h3 { font-size: 19.5px; }
.hx.hx-home .step p { font-size: 16px; line-height: 1.6; }
.hx.hx-home .ind-card__body small { font-size: 14px; }
.hx.hx-home .ind-card__body h3 { font-size: 20px; }
.hx.hx-home .ind-card__body p { font-size: 16.5px; }
.hx.hx-home .hx-cta-list li { font-size: 14.5px; }
.hx.hx-home .cta-band .btn { font-size: 16px; padding: 13px 20px; }
.hx.hx-home .hx-ticker__row { font-size: 14.5px; }
.hx.hx-home .site-footer h4 { font-size: 14.5px; }
.hx.hx-home .footer-links a,
.hx.hx-home .site-footer p { font-size: 16px; }
.hx.hx-home .checks li span { font-size: 17px; }
/* the checklist was inheriting the muted green from the base sheet, which was
   the least readable text in the band; the base sheet pins the li with
   !important, and the span carries its own colour rule that would otherwise
   keep the muted tone whatever the li says */
.hx.hx-home .checks li,
.hx.hx-home .checks li span { color: var(--fac-mint) !important; }
.hx.hx-home .split-media__badge span { font-size: 14px !important; } /* the base sheet pins this one at 10px */

/* ==========================================================================
   3. !IMPORTANT OVERRIDES
   The Blueprint sheet protects a handful of its light surfaces with
   !important — the section-head plate, card panels, the step tiles, the
   footer, the sector tiles. An extra class alone cannot beat those, so the
   home values are restated here with matching !important. Every one is
   scoped to body.hx-home, so nothing below leaves the home page.
   ========================================================================== */

/* the near-white plate behind every section head */
.hx.hx-home .section-head {
  background: linear-gradient(180deg, rgba(12, 58, 63, 0.8), rgba(8, 48, 54, 0.66)) !important;
  border-color: var(--fac-hair) !important;
  border-left-color: var(--fac-cyan) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 30px 74px -52px rgba(0, 0, 0, 0.95);
}

/* panel surfaces, and the discipline-card state change — the page's main
   interaction. The base sheet pins the resting background with !important,
   which would otherwise swallow the hover/focus/active colour. */
.hx.hx-home .card,
.hx.hx-home .info-tile,
.hx.hx-home .dl-card,
.hx.hx-home .faq-item {
  /* a mid-green surface, one step off the page background and one step
     toward teal, so panels are legible as objects without a hard edge */
  background: linear-gradient(180deg, rgba(18, 73, 59, 0.8), rgba(9, 46, 52, 0.86)) !important;
  border-color: var(--fac-hair) !important;
}
.hx.hx-home .fac-grid .card:hover,
.hx.hx-home .fac-grid .card:focus-within,
.hx.hx-home .fac-grid .card.is-active {
  /* a full gradient rather than a colour swap: the resting gradient is a
     background-image, so a background-color change alone barely shows */
  background: linear-gradient(180deg, rgba(28, 96, 78, 0.94), rgba(14, 62, 66, 0.96)) !important;
  border-color: var(--fac-cyan) !important;
  /* !important on the lift: GSAP's reveal tween writes an inline
     `translate: none` on every [data-reveal] target, so a plain CSS
     translate would never move these cards. */
  translate: 0 -5px !important;
}
/* the base sheet sets card copy to `inherit !important`, which flattens the
   code / name / description hierarchy the card pattern depends on */
.hx.hx-home .card h3 { color: var(--fac-ink) !important; }
.hx.hx-home .card p { color: var(--fac-mute) !important; }
.hx.hx-home .fac-grid .card .card__icon { background: none; border: 0; }

/* delivery gates: hairline columns ruled top and bottom, not five light tiles */
.hx.hx-home .step {
  background: linear-gradient(180deg, rgba(18, 73, 59, 0.92), rgba(8, 48, 54, 0.94)) !important;
  border: 1px solid var(--fac-hair) !important;
  border-radius: 4px !important;
  padding: 20px 18px 22px !important;
  box-shadow: 0 24px 54px -42px rgba(0, 0, 0, 0.95) !important;
  transform: none !important;
}
.hx.hx-home .step:last-child { border-right: 1px solid var(--fac-hair) !important; }
.hx.hx-home .step:hover {
  background: linear-gradient(180deg, rgba(22, 86, 70, 0.95), rgba(9, 54, 60, 0.96)) !important;
  border-color: var(--fac-laser) !important;
  transform: none !important;
}
.hx.hx-home .step p { color: var(--fac-mint) !important; }
/* main.css paints a lighter-theme navy spotlight (--mx/--my) on the step
   tiles; on the dark page it reads as a blue stain, so it is re-tinted */
.hx.hx-home .step::after {
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(104, 225, 197, 0.1), transparent 62%);
}

/* footer: the base sheet pins a white gradient on it */
.hx.hx-home .site-footer {
  background: var(--fac-deep) !important;
  border-top: 1px solid var(--fac-hair) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* sector tiles: base pins #1a2434 with no border */
.hx.hx-home .ind-card {
  background: var(--fac-deep) !important;
  border: 1px solid var(--fac-hair) !important;
  border-radius: 4px !important;
}
.hx.hx-home .ind-card__body small { color: var(--fac-lime) !important; }
.hx.hx-home .ind-card__body p { color: #cfe4da !important; }
/* same inline-`translate: none` caveat as the discipline cards above */
.hx.hx-home .ind-card:hover { translate: 0 -5px !important; border-color: var(--fac-cyan) !important; }

/* floating actions + the route curtain, which the base sheet leaves light */
.hx.hx-home .fab {
  background: rgba(8, 38, 31, 0.94);
  border-color: var(--fac-hair);
  color: var(--fac-mute);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9);
}
.hx.hx-home .fab:hover { color: var(--fac-lime); }
.hx.hx-home .page-curtain { background: var(--fac-deep); }

/* No-WebGL / data-saver fallback. The base sheet declares its backdrop as
   `.hx .hx-nogl`, a DESCENDANT of body — but the engine sets hx-nogl on
   <html>, so that rule never matches anywhere. Re-anchored on html here, for
   the home page only, so the fallback the port describes actually paints. */
html.hx-nogl .hx.hx-home {
  background:
    radial-gradient(90% 60% at 74% 28%, rgba(104, 225, 197, 0.1), transparent 60%),
    radial-gradient(120% 90% at 18% 82%, rgba(4, 17, 15, 0.9), transparent 60%),
    var(--fac-bg);
}

/* ==========================================================================
   ABOUT FAMILY — the same facility language on the hx-abt pages
   about/ and ceo-message/ carry body.hx-abt and link this sheet after
   about3d.css; the tokens above are remapped for them too, so every
   var(--hx-*) the base and About sheets read resolves dark. The rules here
   cover what is About-specific: the daylight hero veil, the signed letter,
   the title block, portraits and the studio columns.
   ========================================================================== */

/* the About hero wore a daylight veil; on the dark pages the model shows
   through a night scrim instead, weighted to the copy column's side */
.hx.hx-home .hx-hero::after, .hx.hx-abt .hx-hero::after { background: none; }
.hx.hx-abt .hx-hero::before {
  background:
    radial-gradient(76% 62% at 32% 42%, rgba(4, 17, 15, 0.94), rgba(4, 17, 15, 0.72) 58%, transparent 88%),
    linear-gradient(180deg, rgba(4, 17, 15, 0.55), rgba(4, 17, 15, 0.12) 52%, rgba(4, 17, 15, 0.66));
}

/* --------------------------------------------------------------------------
   THE HERO'S DAYLIGHT VEIL
The About hero keeps turning white across the top. It is about3d.css:

    body.hx[data-abt="model"] .hx-hero::after { ... !important }

two white layers — a 0.52 veil over the top quarter of the frame and a
0.90 -> 0 wash from the left. That selector carries an attribute, so it
resolves at (0,3,2) and outranked the (0,3,1) reset written above, which is
why the veil survived every previous pass. It is a light-theme device; on the
dark page it is exactly the white band that shows at the top of the hero.
What holds the copy here is the facility hero's own `::before` scrim plus the
`.hx-hero__copy` vignette, both of which are still in place.
   -------------------------------------------------------------------------- */
body.hx[data-abt].hx-home .hx-hero::after { background: none !important; }

/* --------------------------------------------------------------------------
   CARD HOVER, THE WAY 05 DELIVERY ANSWERS ONE
home3d.css answers a hovered matrix card with a flat #fff at !important — a
white flash on a dark page. The home page's delivery tiles already answer a
hover the way this design wants: the same mid-green surface a step lighter,
the laser-cyan edge, and no lift. Same treatment, every card, so the mandate,
principles, profile and team grids all behave alike.
   -------------------------------------------------------------------------- */
/* the card's icon chip and the 4px rule the base sheet sweeps across its top
   on hover are both inked with the brand blue; on a dark card they read as a
   foreign colour, so they take the instrument accents the home cards wear */
.hx.hx-home .card__icon { background: none; border: 0; color: var(--fac-cyan); }
.hx.hx-home .card:hover .card__icon { background: none; color: var(--fac-cyan); transform: none; }
.hx.hx-home .card::before { background: var(--fac-laser); }

.hx.hx-home .card:hover,
.hx.hx-home .hx-matrix .card:hover,
.hx.hx-home .info-tile:hover,
.hx.hx-home .dl-card:hover,
.hx.hx-home .team-card:hover {
  background: linear-gradient(180deg, rgba(22, 86, 70, 0.95), rgba(9, 54, 60, 0.96)) !important;
  border-color: var(--fac-laser) !important;
  transform: none !important;
}

/* the signed letter / title block plates: the same instrument finish the home
   cards wear, replacing the base sheet's white --hx-panel */
.hx.hx-abt .abt-letter, .hx.hx-abt .abt-tblock {
  background: linear-gradient(180deg, rgba(12, 58, 63, 0.94), rgba(8, 48, 54, 0.96));
  border-color: var(--fac-hair);
  box-shadow: 0 30px 74px -52px rgba(0, 0, 0, 0.95);
}
.hx.hx-abt .abt-letter__salute, .hx.hx-abt .abt-tblock__head,
.hx.hx-abt .abt-tblock__rows dt, .hx.hx-abt .abt-portrait figcaption span { color: var(--fac-steel); }
.hx.hx-abt .abt-letter .abt-quote, .hx.hx-abt .abt-tblock__note p { color: var(--fac-mint); }
.hx.hx-abt .abt-quote::before, .hx.hx-abt .abt-letter .abt-quote::before { background: var(--fac-cyan); }
/* the ruled key/value sheet inside the title block reads as a page on the desk */
.hx.hx-abt .abt-tblock__sheet {
  background: linear-gradient(180deg, rgba(9, 46, 52, 0.92), rgba(6, 34, 38, 0.95));
  border-color: var(--fac-hair);
}
.hx.hx-abt .abt-tblock__head { border-color: var(--fac-hair); background: rgba(127, 240, 255, 0.05); }
.hx.hx-abt .abt-tblock__rows > div { border-color: var(--fac-hair); }
.hx.hx-abt .abt-tblock__rows dd { color: var(--fac-ink); }
.hx.hx-abt .abt-portrait { border-color: var(--fac-hair); background: rgba(9, 46, 52, 0.85); }
.hx.hx-abt .abt-portrait figcaption b { color: var(--fac-cyan); }
/* the studio columns: prose plates on the model */
.hx.hx-abt .abt-studio {
  background: linear-gradient(180deg, rgba(12, 58, 63, 0.9), rgba(8, 48, 54, 0.93));
  border-color: var(--fac-hair);
  box-shadow: 0 30px 74px -52px rgba(0, 0, 0, 0.95);
}
.hx.hx-abt .abt-studio__story p { color: var(--fac-mint); }
.hx.hx-abt .abt-studio__story p:first-child::first-letter { color: var(--fac-lime); }
/* the letter's signature column keeps its hairline, re-inked */
.hx.hx-abt .abt-letter__sig { border-left-color: var(--fac-hair); }
.hx.hx-abt .abt-sig__rule { background: var(--fac-hair-2); }
.hx.hx-abt .abt-sig b, .hx.hx-abt .abt-sig span { color: var(--fac-ink); }
/* the What we stand for facts strip and the standards strip */
.hx.hx-abt .hx-facts, .hx.hx-abt .std-strip { background: var(--fac-hair); border-color: var(--fac-hair); }
.hx.hx-abt .hx-facts > div, .hx.hx-abt .std-strip > * { background: var(--fac-panel-2); }
.hx.hx-abt .hx-facts b { color: var(--fac-ink); }
.hx.hx-abt .hx-facts small, .hx.hx-abt .std-strip small { color: var(--fac-steel); }
/* checklists and any remaining body copy in plates */
.hx.hx-abt .checks li, .hx.hx-abt .checks li span { color: var(--fac-mint) !important; }
.hx.hx-abt .checks svg { color: var(--fac-cyan); }

/* --------------------------------------------------------------------------
   THE ABOUT PLATES.
home3d.css gives .hx-plate and a .grid-2's right-hand column a white paper
plate (0.92 / 0.66). about3d.css §5 used to re-ink them per scroll for
body[data-plate-fade], and a rule nested that deep cannot be beaten from here
without carrying the same :is() argument list (its specificity lands at 0,3,2
because the list contains an attribute selector). The two About pages
accordingly no longer opt into plate-fade at all: their copy now stands on the
same static instrument glass the home page wears, which is what "the home page
design" means. about3d.css §5 simply never matches, and the plate is re-inked
here instead — a class cheaper than a specificity fight, and no row of text is
left sitting on the model.
   -------------------------------------------------------------------------- */
.hx.hx-abt .hx-plate,
.hx.hx-abt .grid-2 > div[data-reveal="right"] {
  background: linear-gradient(100deg, rgba(12, 58, 63, 0.94), rgba(8, 48, 54, 0.96));
  border-color: var(--fac-hair);
  box-shadow: 0 30px 74px -52px rgba(0, 0, 0, 0.95);
}
.hx.hx-abt .hx-matrix__more {
  background: linear-gradient(180deg, rgba(12, 58, 63, 0.92), rgba(8, 48, 54, 0.95));
  border-color: var(--fac-hair);
}

/* TWO LINKS THE BASE SHEETS INK WITH THE BRAND COLOURS — the hero coordinate
   nav's crumb wears the print blue (#0060a8) and the card matrix's lead-out
   wears the press red (#c8102e). Both are unreadable on the dark page, and both
   are plain text links, so they take the amber the home page reserves for that
   job. Scoped to .hx.hx-home so the home page's own crumbs and matrix get the
   same fix rather than only the About family. */
.hx.hx-home .hx-coord a { color: var(--fac-steel); }
.hx.hx-home .hx-coord a:hover { color: var(--fac-amber); }
/* home3d.css only separates `span + span`, but the About family's breadcrumb
   is <a>…<a><span> — so the slashes never rendered. Cover the real markup. */
.hx.hx-home .hx-coord a + a::before,
.hx.hx-home .hx-coord a + span::before { content: "/"; margin-right: 16px; color: rgba(151, 231, 203, 0.45); }
.hx.hx-home .hx-matrix__more a {
  color: var(--fac-amber);
  border-bottom-color: rgba(255, 176, 87, 0.4);
}
.hx.hx-home .hx-matrix__more a:hover {
  color: var(--fac-laser);
  border-bottom-color: rgba(127, 240, 255, 0.5);
}

/* ==========================================================================
   THE TWO LEAN ABOUT PAGES — team/ and company-profile/
   Both carry a fraction of the copy the About page does, and neither loads
   about3d.css — which is where the About rhythm lives:

     .hx-abt .section { padding: clamp(26px, 2.4vw, 38px) 0 }

   Without that sheet they fell through to main.css's clamp(46px, 6vw, 78px),
   so every chapter had better than twice the breathing room the rest of the
   family has, on top of a full-height hero on a page with four lines of copy.
   Compact means the gaps, not the content: the rules below take the slack out
   of every layer the measured gap was hiding — section padding, head
   plate padding and margin, grid pitch, card padding, and the margins
   between the stacked blocks inside the cards. The rule order mirrors the
   cascade: the !important surfaces keep their place against 3d-override.css,
   and everything after them just tightens the boxes.
   ========================================================================== */
.hx.hx-abt.hx-lean .hx-hero {
  min-height: auto;
  padding-top: calc(var(--hx-header) + 26px);
  padding-bottom: 34px;
}
.hx.hx-abt.hx-lean .section { padding: clamp(18px, 1.7vw, 26px) 0; }
.hx.hx-abt.hx-lean .section-head { margin-bottom: clamp(14px, 1.8vw, 22px); }
.hx.hx-abt.hx-lean .team-grid { gap: 14px; }
.hx.hx-abt.hx-lean .team-card { padding: 18px 16px; }
.hx.hx-abt.hx-lean .team-card__photo { margin: 0 auto 10px; }
.hx.hx-abt.hx-lean .team-card__bullets { margin-top: 7px; }
.hx.hx-abt.hx-lean .cta-band { padding: clamp(22px, 3vw, 34px); }
/* --- the second pass: what the first one could not reach ---------------
   .section-head is a padded instrument plate (22px 26px 24px) holding a
   one-row kicker, a headline and a lead — on a compact page that is the
   height of a whole card of copy. And every block inside it (and inside the
   dl-cards and the band) adds its own margin on top of the box padding, so
   the space doubles at each nesting level. */
.hx.hx-abt.hx-lean .section-head { padding: 16px 22px 15px; }
.hx.hx-abt.hx-lean .section-head .h-2 { margin-bottom: 6px; }
.hx.hx-abt.hx-lean .section-head .lead { margin-bottom: 0; }
.hx.hx-abt.hx-lean .section-head .eyebrow { margin: 0 0 6px; }
.hx.hx-abt.hx-lean .team-card { padding: 13px 13px 12px; }
.hx.hx-abt.hx-lean .team-card__photo { margin-bottom: 8px; }
.hx.hx-abt.hx-lean .team-card__name { margin-bottom: 2px; }
.hx.hx-abt.hx-lean .team-card__role { margin: 0 0 5px; }
.hx.hx-abt.hx-lean .team-card__creds { margin: 0; }
.hx.hx-abt.hx-lean .team-card__bullets { margin-top: 6px; }
.hx.hx-abt.hx-lean .team-card__bullets li { margin-bottom: 3px; }
.hx.hx-abt.hx-lean h3.h-3 { margin: 0 0 10px; }
/* company-profile: the dl-cards and the download feature card */
.hx.hx-abt.hx-lean .card { padding: 16px 18px; }
.hx.hx-abt.hx-lean .card__icon { margin-bottom: 8px; }
.hx.hx-abt.hx-lean .card h3 { margin-bottom: 4px; }
.hx.hx-abt.hx-lean .card p:last-child { margin-bottom: 0; }
.hx.hx-abt.hx-lean .dl-card { padding: 18px 20px; gap: 14px; }
.hx.hx-abt.hx-lean .cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.hx.hx-abt.hx-lean .cta-band .h-2 { margin-bottom: 0; }
.hx.hx-abt.hx-lean .cta-band .hero__cta { margin-top: 0; }

/* ==========================================================================
   THE 3D-OVERRIDE LIGHT THEME, RE-INKED
   about/company-profile/ and about/team/ were plain <body> pages carrying
   3d-override.css — the light "glass card" layer the 3D pages were built on.
   It paints its tiles a 0.1 white wash and inks every one of them with the
   print navy (#0c1d38 / #35496b / #4a6284 / #0e63c4) at !important, which is
   invisible the moment the page goes dark. Both now carry
   body.hx-abt.hx-home and load this sheet after that one, so the same inks are
   restated here on the facility palette.

   3d-override.css is deliberately left alone: 404/ and thank-you/ are still
   light pages and still depend on every rule in it. The services family
   followed the home page this round and left that sheet behind — see the
   SERVICES FAMILY block at the end of this file.
   ========================================================================== */

/* the page hero panel — 3d-override paints it rgba(255, 255, 255, 0.2) */
.hx.hx-home .page-hero .container {
  background: linear-gradient(180deg, rgba(12, 58, 63, 0.88), rgba(8, 48, 54, 0.94)) !important;
  border-color: var(--fac-hair) !important;
}
.hx.hx-home .page-hero .h-display,
.hx.hx-home .page-hero .h-display .wline { color: var(--fac-ink) !important; }
.hx.hx-home .page-hero .lead { color: var(--fac-mint) !important; }

/* 3d-override.css pins the primary button's label white for the light theme.
   On the lime facility CTA that reads as a different button from every other
   page's — everywhere else the label is the page's own background green. */
.hx.hx-home .site-header .nav-cta { color: var(--fac-bg) !important; }
.hx.hx-home .site-header .nav-cta:hover { background: #e6ff86 !important; color: var(--fac-bg) !important; }

/* section anatomy and the micro-labels */
.hx.hx-home .section-head .h-2 { color: var(--fac-ink) !important; }
.hx.hx-home .section-head .lead { color: var(--fac-mute) !important; }
.hx.hx-home .eyebrow { color: var(--fac-steel) !important; }
.hx.hx-home .h-3 { color: var(--fac-ink) !important; }
.hx.hx-home .checks li,
.hx.hx-home .scope-item p { color: var(--fac-mint) !important; }
.hx.hx-home .checks svg,
.hx.hx-home .checklist-icon,
.hx.hx-home .scope-item svg { color: var(--fac-cyan) !important; }
.hx.hx-home .card__icon,
.hx.hx-home .info-tile__icon,
.hx.hx-home .rel-card .arrow { color: var(--fac-cyan) !important; }

/* tiles: 3d-override washes them white at 0.1, home3d.css pins the standards
   strip and the related list flat #fff at 0.94 — all of it at !important */
.hx.hx-home .std-chip,
.hx.hx-home .rel-card,
.hx.hx-home .team-card,
.hx.hx-home .dl-card {
  background: linear-gradient(180deg, rgba(18, 73, 59, 0.8), rgba(9, 46, 52, 0.86)) !important;
  border-color: var(--fac-hair) !important;
}
.hx.hx-home .std-chip:hover,
.hx.hx-home .rel-card:hover,
.hx.hx-home .team-card:hover {
  background: linear-gradient(180deg, rgba(28, 96, 78, 0.94), rgba(14, 62, 66, 0.96)) !important;
  border-color: var(--fac-laser) !important;
  transform: none !important;
}
.hx.hx-home .std-chip b,
.hx.hx-home .rel-card b { color: var(--fac-ink) !important; }
.hx.hx-home .std-chip small,
.hx.hx-home .rel-card small,
.hx.hx-home .dl-card p,
.hx.hx-home .dl-card__meta span { color: var(--fac-mute) !important; }
.hx.hx-home .rel-card__icon {
  background: none;
  border: 1px solid var(--fac-hair);
  color: var(--fac-cyan);
}

/* the people grid */
.hx.hx-home .team-card__name { color: var(--fac-ink) !important; }
.hx.hx-home .team-card__role { color: var(--fac-cyan) !important; }
.hx.hx-home .team-card__creds,
.hx.hx-home .team-card__spec,
.hx.hx-home .team-card__bullets li,
.hx.hx-home .team-card__bio { color: var(--fac-mute) !important; }
.hx.hx-home .team-card__photo,
.hx.hx-home .team-card__photo--init {
  background: rgba(9, 46, 52, 0.85);
  border-color: var(--fac-hair);
}
.hx.hx-home .team-card__photo--init span { color: var(--fac-cyan) !important; }

/* ==========================================================================
   SERVICES FAMILY — the same facility language on the hx-svc pages
   services/ and its seven discipline pages now carry body.hx-home (plus
   hx-svc) and link this sheet after home3d.css + service3d.css — the same
   stack the home page itself runs. Everything above therefore reaches them:
   tokens remapped, hero, panels, cards, steps, standards chips, related
   cards, the CTA band, the footer. What is left here is the small set of
   components that exist ONLY on service pages (service3d.css), which were
   drawn for the light blueprint and pin white surfaces or navy ink there.
   ========================================================================== */

/* 1. THE ENGAGEMENT PANEL — label/value rows in the hero aside */
.hx.hx-home.hx-svc .hx-rows,
.hx.hx-home.hx-svc .hx-rows div { border-color: var(--fac-hair); }
.hx.hx-home.hx-svc .hx-rows dt,
.hx.hx-home.hx-svc .hx-rows b { color: var(--fac-steel); }
.hx.hx-home.hx-svc .hx-rows span { color: var(--fac-mint); }
.hx.hx-home.hx-svc .hx-panel__note { color: var(--fac-cyan); }
.hx.hx-home.hx-svc .hx-panel__note i { background: var(--fac-lime); }

/* 2. THE SCOPE FIGURE PLATE — white caption pill, white caption strip */
.hx.hx-home.hx-svc .scope-media__frame {
  border-color: var(--fac-hair);
  background: var(--fac-panel);
}
.hx.hx-home.hx-svc .scope-media__tag {
  background: rgba(4, 17, 15, 0.86);
  border-color: var(--fac-hair);
  color: var(--fac-steel);
}
.hx.hx-home.hx-svc .scope-media__strip { border-color: var(--fac-hair); background: var(--fac-hair); }
.hx.hx-home.hx-svc .scope-media__strip > div { background: rgba(10, 46, 38, 0.94); }
.hx.hx-home.hx-svc .scope-media__strip b { color: var(--fac-steel); }
.hx.hx-home.hx-svc .scope-media__strip span { color: var(--fac-ink); }

/* 3. NEXT-DISCIPLINE BAND — drawn as a light blue gradient */
.hx.hx-home.hx-svc .next-band {
  background: linear-gradient(150deg, rgba(18, 73, 59, 0.86), rgba(8, 48, 54, 0.94));
  border-color: var(--fac-hair);
  box-shadow: 0 26px 60px -40px rgba(0, 0, 0, 0.9);
}
.hx.hx-home.hx-svc .next-band:hover { border-color: var(--fac-cyan); }
.hx.hx-home.hx-svc .next-band small { color: var(--fac-steel); }
.hx.hx-home.hx-svc .next-band h3 { color: var(--fac-ink); }
.hx.hx-home.hx-svc .next-band svg { color: var(--fac-cyan); }

/* 4. THE COPY PLATE AND THE MATRIX LEAD-OUT
   home3d.css gives the right-hand column of EVERY .grid-2 a translucent paper
   plate and .hx-matrix__more a light tile. On the About pages both were
   re-inked above; the service pages put their scope copy on the same plate, so
   it takes the same instrument glass instead of a sheet of white paper. */
.hx.hx-home.hx-svc .hx-plate,
.hx.hx-home.hx-svc .grid-2 > div[data-reveal="right"] {
  background: linear-gradient(100deg, rgba(12, 58, 63, 0.94), rgba(8, 48, 54, 0.96));
  border-color: var(--fac-hair);
  box-shadow: 0 30px 74px -52px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hx.hx-home.hx-svc .hx-matrix__more,
.hx.hx-home.hx-svc .hx-matrix__more--wide {
  background: linear-gradient(180deg, rgba(12, 58, 63, 0.92), rgba(8, 48, 54, 0.95));
  border-color: var(--fac-hair);
}

/* 5. BREADCRUMB SLASHES — inked with the print navy, invisible on dark */
.hx.hx-home.hx-svc .hx-coord > a + a::before,
.hx.hx-home.hx-svc .hx-coord > a + span::before { color: var(--fac-hair-2); }
.hx.hx-home.hx-svc .hx-coord a { color: var(--fac-mint); }
.hx.hx-home.hx-svc .hx-coord a:hover { color: var(--fac-lime); }

/* 6. HUD COLLISION — the module legend is anchored to the hero (bottom 150px)
   while the chapter rail is fixed to the viewport centre; on short windows
   (heights under ~830px) the legend's five rows climb into the rail's labels
   and the two print over each other. The rail is the persistent, always-visible
   instrument, so it wins: on short windows the legend simply bows out. */
@media (max-height: 829px) {
  .hx.hx-home .hx-hud__legend { display: none; }
}

/* ==========================================================================
   THE LAST FAMILY — contact, clients, faq, projects, 404, thank-you
   The final six daylight pages join the facility. Their bodies already carry
   .hx.hx-home, so every earlier scope in this sheet — tokens, header, buttons,
   cards, hero, HUD, footer — lands on them without a new rule. What follows is
   only what is unique to these pages: the contact form's fields, the projects
   experience table, and 3d-override.css's pinned light skins on 404/thank-you.
   ========================================================================== */

/* -- THE CONTACT FORM. main.css skins the fields white with dark ink; on the
   night page they become instrument glass — dark field, mint caret text, and
   the floating label's white chip re-inked to the panel colour. Focus takes
   the facility laser line instead of the print blue. */
.hx.hx-home .field input,
.hx.hx-home .field textarea,
.hx.hx-home .field select {
  background: rgba(6, 26, 21, 0.72);
  border-color: var(--fac-hair-2);
  color: var(--fac-ink);
}
.hx.hx-home .field input::placeholder,
.hx.hx-home .field textarea::placeholder { color: var(--fac-dim); }
.hx.hx-home .field input:focus,
.hx.hx-home .field textarea:focus,
.hx.hx-home .field select:focus {
  border-color: var(--fac-laser);
  box-shadow: 0 0 0 4px rgba(127, 240, 255, 0.14);
}
.hx.hx-home .field input:focus + label,
.hx.hx-home .field input:not(:placeholder-shown) + label,
.hx.hx-home .field textarea:focus + label,
.hx.hx-home .field textarea:not(:placeholder-shown) + label {
  color: var(--fac-cyan);
  background: var(--fac-bg);
}
.hx.hx-home .field label { color: var(--fac-dim); }
.hx.hx-home .form__note, .hx.hx-home .form__status { color: var(--fac-mute); }
/* the desk scene's letterhead blocks were re-inked for the About family; the
   contact page carries the same blocks, so it inherits that treatment */

/* -- THE PROJECTS EXPERIENCE TABLE. A white paper table would be a searchlight
   on this page: the wrap becomes a panel, the striped rows read hairlines, and
   the status chips take the facility's own signal colours (done = mint glass,
   in progress = amber glass). */
.hx.hx-home .exp-tablewrap {
  background: var(--fac-panel-2);
  border-color: var(--fac-hair);
  box-shadow: 0 30px 74px -52px rgba(0, 0, 0, 0.95);
}
.hx.hx-home .exp-table th { background: rgba(4, 17, 15, 0.92); color: var(--fac-mint); }
.hx.hx-home .exp-table td { border-top-color: var(--fac-hair); color: var(--fac-mint); }
.hx.hx-home .exp-table tbody tr:nth-child(odd) { background: rgba(10, 46, 38, 0.6); }
.hx.hx-home .exp-work { color: var(--fac-ink); }
.hx.hx-home .exp-place, .hx.hx-home .exp-client { color: var(--fac-steel); }
.hx.hx-home .exp-caption b { color: var(--fac-ink); border-left-color: var(--fac-lime); }
.hx.hx-home .exp-caption span { color: var(--fac-dim); }
.hx.hx-home .exp-note {
  background: linear-gradient(180deg, rgba(12, 58, 63, 0.92), rgba(8, 48, 54, 0.95));
  color: var(--fac-mint);
  border: 1px solid var(--fac-hair);
}
.hx.hx-home .exp-note svg { color: var(--fac-cyan); }
.hx.hx-home .exp-note b { color: var(--fac-ink); }
.hx.hx-home .eng-status {
  color: var(--fac-cyan);
  background: rgba(104, 225, 197, 0.1);
  border-color: rgba(104, 225, 197, 0.4);
}
.hx.hx-home .eng-status--wip {
  color: var(--fac-amber);
  background: rgba(255, 176, 87, 0.1);
  border-color: rgba(255, 176, 87, 0.4);
}

/* -- FAQ FILTER CHIPS. 3d-override.css pins these glass pills with !important,
   so the re-ink carries the same weight at a deeper scope. */
.hx.hx-home .faq-chip {
  background: rgba(8, 38, 31, 0.72) !important;
  color: var(--fac-mint) !important;
  box-shadow: inset 0 0 0 1.5px rgba(151, 231, 203, 0.34) !important;
}
.hx.hx-home .faq-chip:hover { background: rgba(12, 58, 63, 0.9) !important; }
.hx.hx-home .faq-chip.is-active {
  background: var(--fac-lime) !important;
  color: var(--fac-bg) !important;
  box-shadow: 0 8px 22px rgba(216, 243, 107, 0.2) !important;
}

/* -- 404 + THANK-YOU. Their ghost button is pinned white-glass by
   3d-override.css; the home family's own ghost rule is softer and darker, so
   it needs the same !important weight at the deeper scope to win. */
.hx.hx-home .btn--ghost,
.hx.hx-home .btn--outline {
  color: var(--fac-mint) !important;
  border-color: rgba(151, 231, 203, 0.34) !important;
  background: linear-gradient(180deg, rgba(8, 38, 31, 0.72), rgba(6, 30, 24, 0.86)) !important;
}
.hx.hx-home .btn--ghost:hover,
.hx.hx-home .btn--outline:hover {
  color: var(--fac-ink) !important;
  background: linear-gradient(180deg, #165944, rgba(8, 38, 31, 0.9)) !important;
}
.hx.hx-home .btn--primary { color: var(--fac-bg) !important; }

/* -- THE 404/THANK-YOU PROSE. These two pages have no section wrappers — just
   a lead and a sub line straight on the page — so they take the hero ink
   directly. */
.hx.hx-home main .lead, .hx.hx-home main .sub { color: var(--fac-mint); }

/* -- THE QUIET RAIL. The four chaptered content pages (contact, clients, faq,
   projects) run dense right margins — facts tables, status chips, sheet
   columns — and the rail's labels print straight over them at reading depth.
   Wayfinding survives without the words: the chapter number and its tick stay
   put — the active chapter's tick runs lime — and the label text steps out of
   the margin, returning only when the visitor reaches for the rail. */
.hx .hx-rail--wide a b { opacity: 0 !important; transform: translateX(14px) !important; transition: opacity 0.3s var(--hx-ease, ease), transform 0.3s var(--hx-ease, ease); }
.hx .hx-rail--wide a:hover b,
.hx .hx-rail--wide a:focus-visible b { opacity: 1 !important; transform: none !important; }
.hx .hx-rail--wide a { padding: 6px 0; }

/* -- THE CONTACT COLUMNS, BOTTOM-ALIGNED (take three). Whichever column is
   taller sets the row height and the grid stretches the other to match; both
   columns therefore pin their CONTENT to that shared bottom edge: the form
   column anchors its whole block (Full name through the note) at the bottom,
   and the facts column pins its tile stack to the bottom edge too, so the
   Visit tile's last line and the form's last line are the same line at every
   width. The heading stays at the top of its column; the spare height in the
   facts column simply becomes air the model shows through. */
.hx.hx-home #contact .contact-grid > [data-reveal] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hx.hx-home #contact .contact-grid > [data-reveal="left"] > div:last-child { margin-top: auto; }
.hx.hx-home #contact .contact-grid form.form { flex: 0 0 auto; margin-top: 0; }

/* -- THE CONTACT PILOT — the model first. The user reads the layer stack as
   model at the bottom, a dark-green layer over it, the content on top — and
   asks for the green moved to the very bottom. The stack is already body
   (green) < canvas (model) < content; what sits "in the middle" is this
   sheet's own night scrims painted over the hero. On this page they come out:
   the canvas shows at full strength against the green body, and the copy
   stands on its own opaque plates (the tblock sheet, the form fields) with no
   scrim behind it. */
.hx.hx-home.hx-ct .hx-hero::before { background: none; }
.hx.hx-home.hx-ct .hx-hero__copy::before { display: none; }
/* about3d.css pins a fixed white radial page veil on body[data-abt] (0,3,2 with
   !important); it flattens the model, so the pilot buys it out at depth */
body.hx[data-abt].hx-home.hx-ct::before { background: none !important; }
/* The pilot now runs on every 3D page, and most of them carry hx-home WITHOUT
   a data-abt attribute (the home page, the whole services family, 404/ and
   thank-you/), so the rule above never matched them and the page-wide night
   vignette stayed on top of the canvas. Stating it on hx-ct alone covers the
   attribute-less pages too and subsumes the data-abt case. */
body.hx.hx-home.hx-ct::before { background: none !important; }

/* --------------------------------------------------------------------------
   F-LAST. THE DAYLIGHT SCENE — the sky runs uncovered
   The engine now renders the About page's scene: its blue-to-cream sky dome,
   its bright PMREM environment, a concrete yard and its light rig, all at
   exposure 1.0. An earlier pass fenced that daylight off with two big scrims —
   a 94%-opaque radial behind the copy column and an opaque plate under the
   status lines — because a 10.5px mono label over a lit sky reads at about
   1.3:1. The home hero has to sit under the same daylight as the About hero,
   so both scrims come out and the type leans on the shadow this sheet already
   gives it. The small floating chrome further down keeps its glass: those are
   the labels with no shadow to fall back on.
   Scoped to hx-day — the class the home page carries for this scene — because
   every other pilot page loads this sheet and still runs a dark engine, where
   a plate on the cue and the rail would be chrome nobody asked for.
   -------------------------------------------------------------------------- */
/* the copy column: no scrim. The About hero puts its 83px headline straight on
   the daylight, and the canvas behind this column is already a dark mid-tone,
   so the title reads without one. */
body.hx.hx-home.hx-ct.hx-day .hx-hero__copy::before { display: none; }
/* the two status lines keep their second-row position but lose the plate: the
   sky shows through, and the labels stand on the text-shadow that
   .hx.hx-home .fac-status already carries */
body.hx.hx-home.hx-ct.hx-day .fac-status {
  padding: 8px var(--fac-pad);
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.hx.hx-home.hx-ct.hx-day .fac-status--live { margin-top: 0; }
body.hx.hx-home.hx-ct.hx-day .hx-ticker {
  background: linear-gradient(90deg, rgba(12, 58, 63, 0.88), rgba(6, 26, 21, 0.9));
}
/* the floating instrument chrome — module legend, drag hint, scroll cue and
   the chapter rail: all small mono type, so each keeps a plate opaque enough
   to hold it against the lit sky and the concrete */
body.hx.hx-home.hx-ct.hx-day .hx-hud__legend li { background: rgba(6, 26, 21, 0.84); }
body.hx.hx-home.hx-ct.hx-day .hx-hud__hint { background: rgba(6, 26, 21, 0.84); }
body.hx.hx-home.hx-ct.hx-day .hx-cue {
  padding: 7px 13px;
  background: var(--hx-panel);
  border: 1px solid var(--fac-hair);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.hx.hx-home.hx-ct.hx-day .hx-rail {
  padding: 12px 14px;
  background: rgba(6, 26, 21, 0.72);
  border: 1px solid var(--fac-hair);
  border-radius: 4px;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}