/* ==========================================================================
   MTech Engineering — HOME reimagined: "Blueprint"
   A light, daylight-studio, technical-engineering design layer for the home
   page: paper-white surfaces, hairline drafting rules, and a full-colour
   engineering model rendered in sunlight.

   Scope:  ONLY the home page (index.html links this instead of
           3d-override.css). Every other page keeps its own theme.
   Depends: assets/css/main.css (base grid, header/footer, buttons, animations)
   Author:  redesign layer — .hx namespace, applied via body.hx
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
.hx {
  --hx-bg:      #f3f7fc;
  --hx-bg-2:    #e9f0f9;
  --hx-panel:   rgba(255, 255, 255, 0.86);
  --hx-panel-2: rgba(255, 255, 255, 0.96);
  --hx-line:    rgba(12, 42, 84, 0.14);
  --hx-line-2:  rgba(12, 42, 84, 0.30);
  --hx-blue:    #0b5fbf;
  --hx-blue-2:  #0d5cb0;
  --hx-navy:    #003078;
  --hx-red:     #d81f3c;
  --hx-ink:     #0c1b30;
  --hx-mute:    #4a5f7d;
  --hx-dim:     #7a8ca6;
  --hx-mono:    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;
  --hx-r:       14px;
  --hx-shadow:  0 22px 50px -30px rgba(12, 42, 84, 0.38);
  --hx-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --hx-header:  74px;

  background: var(--hx-bg);
  color: var(--hx-ink);
  padding-top: 0;
  font-feature-settings: "ss01" 1;
}

.hx { scroll-behavior: smooth; }
.hx body, body.hx { overflow-x: clip; }

/* --------------------------------------------------------------------------
   2. THE 3D CANVAS + ATMOSPHERE LAYERS
   The scene is a fixed cinematic backdrop; content floats above it.
   -------------------------------------------------------------------------- */
.hx #gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* horizon glow + paper falloff, above the canvas, below content */
.hx::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 42%, rgba(47, 143, 255, 0.06), transparent 62%),
    radial-gradient(160% 120% at 50% 110%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(150% 120% at 50% 50%, transparent 52%, rgba(232, 239, 248, 0.5) 100%);
}

.hx::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(12, 42, 84, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 42, 84, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 20%, transparent 78%);
}

/* the header stays position:fixed (it owns its own z-index); only main and the
   footer need stacking above the canvas */
.hx main, .hx .site-footer { position: relative; z-index: 2; }

/* section surfaces: nothing opaque — the world shows through */
.hx .section,
.hx .section--paper,
.hx .section--dark,
.hx .showcase { background: transparent !important; }

/* compact vertical rhythm: chapters butt up against each other so the eye
   travels a short distance between blocks of content */
.hx .section { padding: clamp(46px, 4.8vw, 78px) 0; position: relative; }

/* hairline separators between chapters */
.hx main > section + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1180px, 92vw);
  transform: translateX(-50%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hx-line-2) 18%, var(--hx-line-2) 82%, transparent);
}

.hx .container { width: min(1240px, 92vw); }

/* --------------------------------------------------------------------------
   3. HEADER / NAV on dark
   -------------------------------------------------------------------------- */
.hx .site-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0));
  backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--hx-ease), border-color 0.4s, backdrop-filter 0.4s;
}
.hx .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom-color: var(--hx-line);
  box-shadow: 0 14px 34px -28px rgba(12, 42, 84, 0.55);
}
.hx .nav-link { color: #22375a; font-size: 16px; letter-spacing: 0.01em; }
.hx .nav-link:hover, .hx .nav-link[aria-current="page"] { color: var(--hx-navy); }
.hx .nav-link::after { background: var(--hx-blue); height: 1.5px; }
.hx .caret { opacity: 0.6; }
.hx .dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--hx-line);
  box-shadow: var(--hx-shadow);
  backdrop-filter: blur(11px);
}
.hx .dropdown a { color: #22375a; }
.hx .dropdown a:hover { background: rgba(11, 95, 191, 0.09); color: var(--hx-navy); }
.hx .dropdown svg { color: var(--hx-blue); }
.hx .burger span { background: var(--hx-navy); }
.hx .mobile-nav { background: #f6f9fd; }
.hx .mobile-nav a { color: #22375a; border-color: var(--hx-line); }
.hx .mobile-nav a.sub { color: var(--hx-dim); }

/* --------------------------------------------------------------------------
   4. BUTTONS — machined, technical
   -------------------------------------------------------------------------- */
.hx .btn {
  border-radius: 4px;
  padding: 15px 26px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-family: var(--hx-mono);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.hx .btn--red {
  background: linear-gradient(135deg, #e02040, #a2001a);
  box-shadow: 0 14px 34px -14px rgba(224, 32, 64, 0.75);
}
.hx .btn--primary {
  background: linear-gradient(135deg, #0b5fbf, #003078);
  box-shadow: 0 14px 34px -16px rgba(47, 143, 255, 0.8);
}
.hx .btn--ghost {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px var(--hx-line-2);
  color: var(--hx-navy);
}
.hx .btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--hx-blue); }
.hx .btn--outline { background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px var(--hx-line-2); color: var(--hx-navy); }
.hx .btn--outline:hover { box-shadow: inset 0 0 0 1px var(--hx-blue); color: var(--hx-blue); }
.hx .btn__sheen { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent); }

/* --------------------------------------------------------------------------
   5. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */
.hx .eyebrow {
  font-family: var(--hx-mono);
  font-size: 14.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hx-blue);
  gap: 12px;
}
.hx .eyebrow::before { width: 22px; height: 1px; background: var(--hx-red); border-radius: 0; }
.hx .h-2, .hx .hero__title {
  letter-spacing: -0.032em;
  font-weight: 700;
  color: var(--hx-ink);
}
/* Type scale: headlines, titles, card headings and body copy all sit a step
   larger than the first light-theme pass — the engineering-plate look was
   reading a size too small at 1440. Mono micro-labels (indices, codes, HUD)
   stay small on purpose: they are instrumentation, not reading copy. */
.hx .h-2 { font-size: clamp(1.9rem, 3.45vw, 2.85rem); line-height: 1.08; }
.hx .lead { color: var(--hx-mute); font-size: clamp(1.06rem, 1.3vw, 1.18rem); line-height: 1.68; }
.hx .section--dark .lead, .hx .section--dark .card p, .hx .section--dark .checks li { color: var(--hx-mute); }
.hx .text-grad { background: linear-gradient(100deg, #0b5fbf, #0d5cb0 60%, #2f8fff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* chapter head: index + label + rule */
/* chapter plate: headings sit on a soft dark plate so the live render reads
   AROUND the copy instead of washing through it */
.hx .section-head {
  position: relative;
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 28px);
  margin-bottom: clamp(20px, 2.4vw, 30px);
  max-width: 860px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.66)) !important;
  border: 1px solid var(--hx-line) !important;
  border-left: 2px solid var(--hx-blue) !important;
  border-radius: 4px;
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px -34px rgba(12, 42, 84, 0.5);
}
.hx .section-head .h-2 { margin-top: 10px; margin-bottom: 10px; }
.hx .section-head .lead { max-width: 68ch; margin: 0; }
.hx .hx-idx {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hx-dim);
  margin-bottom: 12px;
}
.hx .hx-idx b { color: var(--hx-blue); font-weight: 600; letter-spacing: 0.16em; }
.hx .hx-idx::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 320px;
  background: linear-gradient(90deg, var(--hx-line-2), transparent);
}

/* --------------------------------------------------------------------------
   6. HERO — cinematic, full height, model-led
   -------------------------------------------------------------------------- */
.hx .hx-hero {
  position: relative;
  /* one screen, but capped. An unconstrained 100svh left a deep band of empty
     sky above the copy on tall displays — the headline should land high. */
  min-height: min(100svh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--hx-header) + 16px) 0 0;
  overflow: hidden;
}
/* daylight scrim: keeps the ink-dark copy legible over a bright render while
   still letting the model read on the right of the frame */
.hx .hx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(247, 251, 255, 0.96) 0%, rgba(247, 251, 255, 0.9) 26%, rgba(247, 251, 255, 0.34) 54%, rgba(247, 251, 255, 0) 72%),
    linear-gradient(180deg, rgba(247, 251, 255, 0.5) 0%, rgba(247, 251, 255, 0) 26%);
}
.hx .hx-hero > .container { position: relative; z-index: 2; }
/* No entrance animation on the hero: the copy and the HUD are painted in the
   very first frame. (There used to be a delayed rise here, timed to a boot
   overlay and a camera fly-in — both removed, so nothing waits on anything and
   nothing is hidden at opacity 0 while a script catches up.) */
/* the copy sits in the space the ticker leaves over, centred but biased upward
   (the padding below it is the bias) so the type starts in the upper half of
   the first screen instead of hugging the bottom edge */
.hx .hx-hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(40px, 11vh, 112px);
}
.hx .hx-hero__copy { margin-block: auto; }
.hx .hx-hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-rows: repeat(5, auto);   /* 5 copy rows — makes 1 / -1 resolvable */
  column-gap: clamp(24px, 4vw, 60px);
  row-gap: 0;
  align-items: end;
}
/* the copy stack owns column 1; the telemetry panel owns column 2 for the
   full height (auto-placement would otherwise scatter them across cells) */
.hx .hx-hero__copy > * { grid-column: 1; }
.hx .hx-hero__copy > .hx-panel { grid-column: 2; grid-row: 1 / -1; align-self: end; }

/* coordinate strip above the eyebrow — instrument-panel flavour */
.hx .hx-coord {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hx-dim);
  margin-bottom: 18px;
}
.hx .hx-coord i { width: 5px; height: 5px; border-radius: 50%; background: var(--hx-red); box-shadow: 0 0 0 0 rgba(216, 31, 60, 0.6); animation: hx-pulse 2.4s infinite; font-style: normal; }
.hx .hx-coord span + span::before { content: "/"; margin-right: 16px; color: rgba(12, 42, 84, 0.28); }
@keyframes hx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216, 31, 60, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(216, 31, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 31, 60, 0); }
}

.hx .hx-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hx-navy);
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--hx-line);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  margin-bottom: 16px;
}
.hx .hx-chip::before { content: ""; width: 16px; height: 1px; background: var(--hx-red); }

.hx .hx-title {
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin: 0 0 16px;
}
.hx .hx-title em {
  font-style: normal;
  display: block;
  background: linear-gradient(96deg, #0b3f8f 0%, #0b5fbf 52%, #2f8fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hx .hx-title .hx-tick {
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-left: 0.12em;
  border: 2px solid var(--hx-red);
  vertical-align: 0.08em;
}
.hx .hx-lead {
  color: var(--hx-mute);
  font-size: clamp(1.07rem, 1.32vw, 1.2rem);
  line-height: 1.66;
  max-width: 56ch;
  margin: 0 0 22px;
}
.hx .hx-lead b { color: var(--hx-ink); font-weight: 600; }
.hx .hx-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hx .hx-cta small {
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hx-dim);
  margin-left: 6px;
}

/* right side: live telemetry panel */
.hx .hx-panel {
  justify-self: end;
  width: min(400px, 100%);
  border: 1px solid var(--hx-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 251, 255, 0.76));
  backdrop-filter: blur(8px);
  border-radius: var(--hx-r);
  padding: 14px 16px 16px;
  box-shadow: var(--hx-shadow);
}
.hx .hx-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hx-dim);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hx-line);
}
.hx .hx-panel__head b { color: var(--hx-blue); font-weight: 600; }
.hx .hx-panel__tag { color: var(--hx-navy); }
.hx .hx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hx-line); margin-top: 1px; }
.hx .hx-stats .hx-stat {
  background: rgba(255, 255, 255, 0.9);
  padding: 12px 12px 10px;
}
.hx .hx-stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.35vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  color: var(--hx-ink);
  letter-spacing: -0.03em;
}
.hx .hx-stat__num i { font-style: normal; color: var(--hx-red); }
.hx .hx-stat__label {
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hx-dim);
  margin-top: 6px;
  line-height: 1.45;
}


/* HUD frame drawn over the 3D viewport */
/* the HUD sits above the hero scrim (::after is the last child, so equal
   z-index would dim the frame, reticle, legend and hint) */
.hx .hx-hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hx .hx-hud__frame {
  position: absolute;
  inset: calc(var(--hx-header) + 22px) clamp(18px, 3vw, 46px) 132px;
  border: 1px solid rgba(12, 42, 84, 0.09);
}
.hx .hx-hud__frame::before,
.hx .hx-hud__frame::after {
  content: "";
  position: absolute;
  width: 1px; height: 68px;
  background: linear-gradient(var(--hx-line-2), transparent);
}
.hx .hx-hud__frame::before { top: 0; left: 50%; }
.hx .hx-hud__frame::after { bottom: 0; left: 50%; background: linear-gradient(transparent, var(--hx-line-2)); }
.hx .hx-hud__corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid var(--hx-line-2);
}
.hx .hx-hud__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hx .hx-hud__corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.hx .hx-hud__corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.hx .hx-hud__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hx .hx-hud__reticle {
  position: absolute;
  top: 46%; left: 63%;
  width: 210px; height: 210px;
  margin: -105px 0 0 -105px;
  border: 1px solid rgba(12, 42, 84, 0.13);
  border-radius: 50%;
}
.hx .hx-hud__reticle::before {
  content: "";
  position: absolute;
  inset: 44%;
  border: 1px solid rgba(12, 42, 84, 0.2);
  border-radius: 50%;
}
.hx .hx-hud__reticle span {
  position: absolute;
  background: rgba(12, 42, 84, 0.22);
}
.hx .hx-hud__reticle span:nth-child(1) { top: -7px; left: 50%; width: 1px; height: 14px; }
.hx .hx-hud__reticle span:nth-child(2) { bottom: -7px; left: 50%; width: 1px; height: 14px; }
.hx .hx-hud__reticle span:nth-child(3) { left: -7px; top: 50%; height: 1px; width: 14px; }
.hx .hx-hud__reticle span:nth-child(4) { right: -7px; top: 50%; height: 1px; width: 14px; }

.hx .hx-hud__fig {
  position: absolute;
  top: calc(var(--hx-header) + 40px);
  left: clamp(18px, 3vw, 46px);
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hx-dim);
  display: flex;
  gap: 12px;
  align-items: center;
}
.hx .hx-hud__fig b { color: var(--hx-blue); font-weight: 600; }
.hx .hx-hud__fig i { width: 30px; height: 1px; background: var(--hx-line-2); font-style: normal; }

/* module legend (bottom-right of the hero) */
.hx .hx-hud__legend {
  position: absolute;
  right: clamp(18px, 3vw, 46px);
  bottom: 150px;
  display: grid;
  gap: 7px;
  text-align: right;
}
.hx .hx-hud__legend li {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hx-dim);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  transition: color 0.4s;
}
.hx .hx-hud__legend li::after { content: ""; width: 14px; height: 1px; background: rgba(12, 42, 84, 0.28); }
.hx .hx-hud__legend li.is-active { color: var(--hx-blue); }
.hx .hx-hud__legend li.is-active::after { background: var(--hx-blue); width: 26px; }

.hx .hx-hud__hint {
  position: absolute;
  left: 50%;
  bottom: 116px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hx-dim);
  border: 1px solid var(--hx-line);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 7px 15px;
  transition: opacity 0.6s;
}
.hx .hx-hud__hint.is-gone { opacity: 0; }
.hx .hx-hud__hint svg { width: 13px; height: 13px; opacity: 0.75; }

/* standards ticker */
.hx .hx-ticker {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hx-line);
  border-bottom: 1px solid var(--hx-line);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(7px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hx .hx-ticker__row {
  display: flex;
  gap: 0;
  width: max-content;
  animation: hx-marquee 46s linear infinite;
}
.hx .hx-ticker__row span {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hx-dim);
  padding: 12px 26px;
  border-right: 1px solid var(--hx-line);
  white-space: nowrap;
}
.hx .hx-ticker__row span b { color: var(--hx-navy); font-weight: 500; }
@keyframes hx-marquee { to { transform: translateX(-50%); } }

/* scroll cue */
.hx .hx-cue {
  position: absolute;
  z-index: 3;
  right: clamp(18px, 3vw, 46px);
  bottom: 62px;
  display: grid;
  justify-items: center;
  gap: 10px;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hx-dim);
}
.hx .hx-cue i {
  width: 1px; height: 44px;
  background: linear-gradient(var(--hx-line-2), transparent);
  animation: hx-scrollhint 2.4s var(--hx-ease) infinite;
  transform-origin: top;
}
@keyframes hx-scrollhint {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

/* 3D callouts projected from the scene */
.hx .hx-callouts { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.hx .hx-callout {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s;
  will-change: transform, opacity;
}
.hx .hx-callout.is-on { opacity: 1; }
.hx .hx-callout__box {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 11px;
  border: 1px solid var(--hx-line-2);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px);
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 10px 26px -20px rgba(12, 42, 84, 0.6);
}
.hx .hx-callout__box b {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  color: var(--hx-red);
  font-weight: 600;
}
.hx .hx-callout__box span {
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hx-ink);
}
.hx .hx-callout__box em {
  font-family: var(--hx-mono);
  font-size: 13.5px;
  font-style: normal;
  letter-spacing: 0.14em;
  color: var(--hx-dim);
}
.hx .hx-callout__dot {
  position: absolute;
  left: -5px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border: 1px solid var(--hx-blue);
  background: rgba(47, 143, 255, 0.25);
  border-radius: 50%;
}

/* fixed chapter rail */
.hx .hx-rail {
  position: fixed;
  right: clamp(10px, 1.6vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  gap: 14px;
  justify-items: end;
}
.hx .hx-rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hx-dim);
  opacity: 0.6;
  transition: opacity 0.3s;
}
.hx .hx-rail a b {
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.35s var(--hx-ease), transform 0.35s var(--hx-ease);
}
.hx .hx-rail a i { width: 20px; height: 1px; background: currentColor; transition: width 0.35s var(--hx-ease); }
.hx .hx-rail a:hover, .hx .hx-rail a.is-on { opacity: 1; color: var(--hx-navy); }
.hx .hx-rail a:hover b, .hx .hx-rail a.is-on b { opacity: 1; transform: none; }
.hx .hx-rail a.is-on i { width: 34px; background: var(--hx-red); }

/* --------------------------------------------------------------------------
   7. PANELS — the shared paper surface for cards / tiles / split media
   -------------------------------------------------------------------------- */
.hx .card,
.hx .info-tile,
.hx .meta-tile,
.hx .rel-card,
.hx .std-chip,
.hx .member,
.hx .team-card,
.hx .faq-item,
.hx .dl-card,
.hx .partner-chip,
.hx .link-card,
.hx .svc {
  background: var(--hx-panel) !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: var(--hx-r) !important;
  color: var(--hx-ink) !important;
  backdrop-filter: none;
}
.hx .card h3, .hx .info-tile h3, .hx .card p, .hx .info-tile p { color: inherit !important; }

/* capability matrix — 7 disciplines as numbered tiles */
.hx .hx-matrix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1px; background: var(--hx-line); border: 1px solid var(--hx-line); border-radius: var(--hx-r); overflow: hidden; counter-reset: cap; }
.hx .hx-matrix .card {
  counter-increment: cap;
  position: relative;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  /* 0.95 still let the live render read through the tiles; 0.985 keeps the
     hairline of the model over them without touching legibility */
  background: rgba(255, 255, 255, 0.985) !important;
  padding: 20px 20px 18px;
  min-height: 178px;
  display: flex;
  flex-direction: column;
  transform: none;
  box-shadow: none;
  transition: background 0.45s var(--hx-ease);
}
/* main.css paints a 4px gradient accent bar in this pseudo-element and reveals
   it with transform: scaleX(0) -> scaleX(1) on hover. That is the "line" that
   appeared over the service cards on hover (and it also kept the corner number
   invisible until hover, since the whole box was scaled to zero). Every one of
   those declarations is reset here. */
.hx .hx-matrix .card::before {
  content: "0" counter(cap);
  position: absolute;
  inset: 18px 20px auto auto;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  font-family: var(--hx-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: rgba(12, 42, 84, 0.26);
  transition: color 0.4s;
}
/* no underline sweep on hover. 'content: none' also kills main.css's radial
   card spotlight, so the only hover feedback left is the surface lift, the
   corner number turning blue and the link arrow sliding. */
.hx .hx-matrix .card::after { content: none; }
.hx .hx-matrix .card:hover { background: #fff !important; }
.hx .hx-matrix .card:hover::before { color: var(--hx-blue); }
.hx .hx-matrix .card__icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(11, 95, 191, 0.08) !important;
  border: 1px solid rgba(11, 95, 191, 0.18);
  color: var(--hx-blue) !important;
  margin-bottom: 14px;
}
.hx .hx-matrix .card__icon svg { width: 20px; height: 20px; }
.hx .hx-matrix .card h3 {
  font-size: 1.15rem;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--hx-ink) !important;
  margin-bottom: 8px;
}
.hx .hx-matrix .card p { color: var(--hx-mute) !important; font-size: 15.5px; line-height: 1.58; margin-bottom: 14px; }
.hx .hx-matrix .card__link {
  margin-top: auto;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hx-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hx .hx-matrix .card__link svg { width: 14px; height: 14px; transition: transform 0.3s; }
.hx .hx-matrix .card:hover .card__link svg { transform: translateX(4px); }
/* 8th cell: "all capabilities" lead-out */
.hx .hx-matrix__more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 22px 22px;
  /* solid tints: the old gradient ran from 16% alpha, so the 3D behind it showed
     straight through and the lead-out link sat on a busy, moving background */
  background: linear-gradient(150deg, #e4eefb, #ffffff 78%);
  border: 0;
}
.hx .hx-matrix__more b { font-family: var(--hx-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hx-blue); }
/* the lead-out link carries the accent colour so it reads at a glance */
.hx .hx-matrix__more a {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  color: #c8102e;
  letter-spacing: -0.02em;
  line-height: 1.2;
  border-bottom: 2px solid rgba(200, 16, 46, 0.28);
  padding-bottom: 2px;
  transition: color 0.35s var(--hx-ease), border-color 0.35s var(--hx-ease);
}
.hx .hx-matrix__more a:hover { color: #96001f; border-bottom-color: rgba(150, 0, 31, 0.55); }

/* --------------------------------------------------------------------------
   8. WHO WE ARE — split media block
   -------------------------------------------------------------------------- */
/* minmax(0, 1fr) on BOTH tracks: making the media column a flex container gave
   it a large automatic minimum, which skewed the two columns (646/554 instead
   of 600/600) and pushed the copy card narrow. */
.hx .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); align-items: stretch; }
/* the paper plate: the translucent surface a block of copy sits on when the
   render behind it is too busy to read against. It was only ever reachable by
   asking for it indirectly (being the right-hand column of a .grid-2); it is
   now a component in its own right, so any page family can put copy on one
   without copying the surface. */
.hx .grid-2 > div[data-reveal="right"],
.hx .hx-plate {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66));
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r);
  padding: clamp(20px, 2.2vw, 30px);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px -36px rgba(12, 42, 84, 0.5);
}
/* The media column is sized by the PHOTO, never by the row: it must not stretch
   to the copy card's height, because a stretched portrait frame re-crops the
   picture (at 820px the frame used to be 365x948 — 42% of the photo's width cut
   away and the rest zoomed). With the frame locked to the source's own 2:3 the
   photo is always shown whole, and on desktop the frame (900 tall) is what sets
   the row, so the copy card still ends on the same line as the picture.
   align-self: center keeps the column exactly as tall as the picture, which is
   also what the two inset photos are positioned against — stretched, they were
   anchored to a 948px column and floated 188px above the top of the photo. */
.hx .split-media { position: relative; display: flex; min-height: 0; align-self: center; }
/* the collage is anchored INSIDE the main frame: the inset detail photos and the
   badge both sit on the image's own margins. main.css places them with negative
   offsets (left/top -14/-22, right -4%, bottom -9%) which pushed them out of the
   column and made the pair read as two stacked pictures — and this file's
   'position: relative' on __sub took it out of the collage altogether. */
/* one detail photo per bottom corner. main.css anchors .split-media__sub off
   the column with negative offsets (right -4%, bottom -9%), sizes it from the
   image height and hides it below 900px — all three are reset here. */
.hx .split-media__sub,
.hx .split-media__sub--b {
  display: block;
  position: absolute;
  top: auto;
  bottom: 12px;
  width: min(33%, 172px);
  aspect-ratio: 1 / 1;
  border: 3px solid #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 38px -18px rgba(12, 42, 84, 0.55);
}
/* two opposite corners: bottom-left and top-right */
.hx .split-media__sub { left: 12px; right: auto; bottom: 12px; top: auto; }
.hx .split-media__sub--b { right: 12px; left: auto; top: 12px; bottom: auto; }
.hx .split-media__sub img,
.hx .split-media__sub--b img { width: 100%; height: 100%; object-fit: cover; }
/* true-colour photography: no grayscale, no blue multiply wash */
.hx .split-media__main img,
.hx .split-media__sub img,
.hx .split-media__sub--b img { filter: none; }
/* portrait primary: the frame is taller than it is wide so the media column
   occupies the same block as the copy card beside it, instead of a short
   landscape strip with dead space under it. 3/4 lands on the card's height. */
.hx .split-media__main {
  flex: 1 1 auto;
  border-radius: var(--hx-r);
  overflow: hidden;
  border: 1px solid var(--hx-line);
  box-shadow: var(--hx-shadow);
  position: relative;
  /* the source photo is a genuine portrait (1280x1919 = 2:3), so the frame uses
     that exact ratio: cover then has nothing left to crop or zoom */
  aspect-ratio: 2 / 3;
  align-self: flex-start;
  max-height: none;
}
/* height:100% here beats main.css's `height: clamp(380px, 46vw, 560px)`, which
   forced the portrait photo into a landscape band (and the 760px block below
   used to shrink it to 210-300px — a 2.5x zoomed slice on every phone). */
.hx .split-media__main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
  transition: none;
}
/* no hover zoom either — the brief was "show the photo, don't crop or zoom it" */
.hx .split-media__main:hover img { transform: none; }
.hx .split-media__main::after { content: none; }
.hx .split-media__sub::after { content: none; }
.hx .split-media__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  bottom: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 15px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.89));
  border: 1px solid var(--hx-line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 36px -22px rgba(12, 42, 84, 0.55);
  color: var(--hx-ink);
  text-align: left;
}
.hx .split-media__badge b { display: inline; font-family: var(--hx-mono); font-size: 1.05rem; line-height: 1; color: var(--hx-blue); letter-spacing: -0.02em; }
.hx .split-media__badge span { font-family: var(--hx-mono); font-size: 13.5px!important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hx-dim); }

.hx .checks li { color: var(--hx-mute) !important; display: flex; gap: 12px; align-items: flex-start; }
.hx .checks li + li { margin-top: 14px; }
.hx .checks svg { color: var(--hx-blue) !important; flex: none; margin-top: 3px; }
.hx .checks li span { line-height: 1.6; }

/* spec strip: a technical definition list */
.hx .hx-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hx-line); border: 1px solid var(--hx-line); border-radius: var(--hx-r); margin: 20px 0 0; overflow: hidden; }
.hx .hx-facts div { background: rgba(255, 255, 255, 0.84); padding: 14px 16px 13px; }
.hx .hx-facts dt { font-family: var(--hx-mono); font-size: 13.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hx-dim); margin-bottom: 6px; }
.hx .hx-facts dd { margin: 0; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; color: var(--hx-ink); letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   9. SECTORS — image-led technical cards
   -------------------------------------------------------------------------- */
/* sectors: 3 columns x 2 rows of landscape tiles — the whole set is one
   screenful instead of a long scroll, sharing the matrix border treatment */
.hx .ind-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--hx-line);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r);
  overflow: hidden;
}
.hx .ind-card {
  counter-increment: sec;
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  background: #1a2434 !important;
  aspect-ratio: 4 / 3;          /* main.css ships 4 / 4.6 — too tall here */
  min-height: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  transform: none;
}
.hx .ind-grid { counter-reset: sec; }
/* original image lighting: the photos were being dulled by a grayscale filter
   plus a navy wash that started at the very top of every tile. The scrim is now
   confined to the foot of the frame — enough for the caption to read, nothing
   over the picture itself. */
.hx .ind-card img { transition: transform 1.4s var(--hx-ease), filter 0.6s; filter: none; }
.hx .ind-card:hover img { transform: scale(1.05); filter: saturate(1.06) contrast(1.02); }
.hx .ind-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 14, 28, 0) 40%, rgba(6, 14, 28, 0.34) 58%, rgba(5, 12, 24, 0.9) 92%);
}
.hx .ind-card::before {
  content: "SEC-" counter(sec, decimal-leading-zero);
  position: absolute;
  top: 14px; left: 16px;
  z-index: 1;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.86);
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(6, 10, 19, 0.5);
  backdrop-filter: blur(3px);
  border-radius: 3px;
}
.hx .ind-card__body { padding: 18px 20px 16px; }
.hx .ind-card__body small {
  display: block;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8fc4ff !important;
  margin-bottom: 8px;
}
.hx .ind-card__body h3 { font-size: 1.24rem; color: #fff; margin-bottom: 5px; letter-spacing: -0.02em; }
.hx .ind-card__body p { color: rgba(233, 241, 251, 0.86) !important; font-size: 15.5px; line-height: 1.55; margin: 0; max-height: none !important; opacity: 1 !important; }
.hx .ind-card::before, .hx .ind-card__body { transition: transform 0.5s var(--hx-ease); }

/* --------------------------------------------------------------------------
   10. PROCESS — a phase rail, not five boxes
   -------------------------------------------------------------------------- */
/* process: each stage is a ticket card with its own surface. This copy has to
   stay readable over the live model behind it, and flat type over a render does
   not hold — so the steps get a real panel, deliberately unlike the flat
   capability matrix: numbered chip, accent head, lift on hover. */
.hx .steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  padding-top: 4px;
  counter-reset: step;
}
.hx .steps::before { content: none; }
.hx .step {
  counter-increment: step;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(243, 248, 255, 0.9)) !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: var(--hx-r) !important;
  padding: 20px 18px 22px !important;
  min-height: 0;
  transform: none !important;
  box-shadow: 0 20px 44px -34px rgba(12, 42, 84, 0.55);
  transition: transform 0.4s var(--hx-ease), box-shadow 0.4s, border-color 0.4s, background 0.4s;
}
/* stage chip, in flow at the top of the card */
.hx .step::before {
  content: "P-0" counter(step);
  position: static;
  display: inline-block;
  font-family: var(--hx-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--hx-blue);
  background: rgba(11, 95, 191, 0.07);
  background-clip: border-box;
  -webkit-background-clip: border-box;
  border: 1px solid rgba(11, 95, 191, 0.24);
  border-radius: 999px;
  padding: 3px 9px 3px 10px;
  margin: 0 0 12px;
  width: auto; height: auto;
  -webkit-text-stroke: 0;
  box-shadow: none;
}
/* static accent head (main.css uses this pseudo-element for a hover spotlight) */
.hx .step::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--hx-blue), rgba(11, 95, 191, 0.05));
  opacity: 1;
}
.hx .step h3 { font-size: 1.14rem; color: var(--hx-ink); margin: 0 0 8px; letter-spacing: -0.015em; }
.hx .step p { color: var(--hx-mute) !important; font-size: 15.5px; line-height: 1.58; margin: 0; }
.hx .step:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(11, 95, 191, 0.4) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 26px 50px -30px rgba(12, 42, 84, 0.5);
}

/* --------------------------------------------------------------------------
   11. SHARED PAGE COMPONENTS — anything more than one family renders
   The home, service and About pages all draw these: the three-across tile
   matrix and its lead-out band, the standards strip, the related-card list and
   the four-column facts variant. They live here rather than in a family sheet
   so each has exactly one owner. (The About pages shipped a second copy of the
   matrix rules, did not load the file the original lived in, and their
   five-card matrix silently fell back to four columns.) A family sheet keeps
   only what is scoped to its own body class — .hx-svc…, .hx-abt… — or what no
   other family uses.
   -------------------------------------------------------------------------- */

/* deliverables matrix: the home tile treatment, three across */
.hx .hx-matrix--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the lead-out row spans the full matrix: three cards, then one wide band */
.hx .hx-matrix__more--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
}
.hx .hx-matrix__more--wide a { font-size: 1.24rem; }
.hx .hx-matrix--3 .card { min-height: 196px; }
.hx .hx-matrix--3 .card p { margin-bottom: 8px; }
.hx .hx-matrix--3 .card__icon { margin-bottom: 16px; }

/* the facts strip, four across */
.hx .hx-facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* standards strip: the chip, laid out as a tight grid */
.hx .std-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hx-line); border: 1px solid var(--hx-line); border-radius: var(--hx-r); overflow: hidden; }
.hx .std-chip {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  padding: 16px 18px;
  display: block !important;
  transition: background 0.4s var(--hx-ease);
}
.hx .std-chip:hover { background: #fff !important; }
.hx .std-chip b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--hx-navy) !important; letter-spacing: -0.01em; margin-bottom: 5px; }
.hx .std-chip small { display: block; font-size: 14.5px; line-height: 1.5; color: var(--hx-mute) !important; }

/* related list: one plate per row */
.hx .related { display: grid; gap: 1px; background: var(--hx-line); border: 1px solid var(--hx-line); border-radius: var(--hx-r); overflow: hidden; }
.hx .rel-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  transform: none !important;
  box-shadow: none !important;
  transition: background 0.4s var(--hx-ease);
}
.hx .rel-card:hover { background: #fff !important; }
.hx .rel-card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(11, 95, 191, 0.08);
  border: 1px solid rgba(11, 95, 191, 0.18);
  color: var(--hx-blue);
}
.hx .rel-card__icon svg { width: 21px; height: 21px; }
.hx .rel-card b { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--hx-ink); letter-spacing: -0.015em; margin-bottom: 4px; }
.hx .rel-card small { display: block; font-size: 15px; line-height: 1.55; color: var(--hx-mute); }
.hx .rel-card .arrow { width: 20px; height: 20px; color: var(--hx-blue); transition: transform 0.35s var(--hx-ease); }
.hx .rel-card:hover .arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   12. CTA BAND
   -------------------------------------------------------------------------- */
.hx .cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hx-line);
  border-radius: calc(var(--hx-r) + 6px);
  background:
    radial-gradient(120% 140% at 88% 10%, rgba(11, 95, 191, 0.1), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(240, 246, 253, 0.94));
  box-shadow: var(--hx-shadow);
  padding: clamp(24px, 2.8vw, 38px) clamp(24px, 3vw, 42px);
}
/* main.css paints a dark navy gradient in .cta-band::after for the old dark
   theme. Because the band is an isolated stacking context, that overlay stacked
   between the band's own background and its content — so the "Brief" card
   rendered as a dark slab carrying dark ink text. It must not paint here. */
.hx .cta-band::after { content: none; }
.hx .cta-band__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.1; }
.hx .cta-band__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) contrast(1.05); }
.hx .cta-band__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 42%, rgba(255, 255, 255, 0.5) 100%);
}
.hx .cta-band__inner {
  position: relative;
  z-index: 1;
  /* main.css ships clamp(48px, 7vw, 88px) of padding on this element, which
     stacked on top of the band's own padding — double padding is why this card
     was so much taller than its content. */
  padding: 0;
  justify-content: normal;
  display: grid;
  /* the buttons used to sit in an auto column whose max-content width (~690px)
     squeezed the copy into 3 narrow lines. Now the copy gets the room and the
     two actions stack in a fixed side column. */
  grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}
.hx .cta-band .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
.hx .cta-band .hero__cta .btn { justify-content: center; }
/* main.css pre-hides the old dark-theme hero intro: `html.js-ok .hero__cta .btn
   { opacity: 0 }`, cleared by a GSAP timeline that only the old `.hero` ran. No
   redesigned page has that hero, but the Brief band reuses .hero__cta for its
   button row — so its buttons sat at opacity 0: invisible, yet still hit-testable
   and still announcing a pointer cursor. Nothing animates them here, so show
   them. Scoped to .hx so any page that does animate a hero CTA keeps its intro. */
html.js-ok .hx .hero__cta .btn,
html.js-ok .hx.cta-band .hero__cta { opacity: 1; transform: none; }
.hx .cta-band h2 { color: var(--hx-ink); font-size: clamp(1.65rem, 2.6vw, 2.3rem); letter-spacing: -0.03em; margin-bottom: 8px; }
.hx .cta-band p { color: var(--hx-mute); max-width: 76ch; }
/* what to send — the band earns its height instead of padding it out */
.hx .hx-cta-list {
  display: grid;
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--hx-line);
  counter-reset: brief;
}
.hx .hx-cta-list li {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--hx-mute);
  counter-increment: brief;
  white-space: nowrap;
}
.hx .hx-cta-list li::before {
  content: counter(brief, decimal-leading-zero);
  font-weight: 600;
  color: var(--hx-blue);
  flex: none;
}
.hx .cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(12, 42, 84, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 42, 84, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(90% 120% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
.hx .hx-cta-side { display: grid; gap: 10px; border-left: 1px solid var(--hx-line); padding-left: clamp(18px, 3vw, 32px); }
.hx .hx-cta-side div { display: flex; justify-content: space-between; gap: 14px; font-family: var(--hx-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-dim); padding-bottom: 9px; border-bottom: 1px solid var(--hx-line); }
.hx .hx-cta-side div b { color: var(--hx-navy); font-weight: 600; }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.hx .site-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(233, 240, 249, 0.96)) !important;
  border-top: 1px solid var(--hx-line) !important;
  backdrop-filter: blur(8px);
}
.hx .ft p, .hx .ft a, .hx .ft span, .hx .ft__addr { color: var(--hx-mute) !important; }
.hx .ft h4 { color: var(--hx-navy) !important; font-family: var(--hx-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.hx .ft a:hover { color: var(--hx-blue) !important; }
.hx .ft__base span { color: var(--hx-dim) !important; }
.hx .site-footer a[aria-label] {
  border-color: var(--hx-line) !important;
  color: var(--hx-mute);
}
.hx .site-footer a[aria-label]:hover { border-color: var(--hx-blue); color: var(--hx-blue); }

/* floating action buttons */
.hx .fab {
  border: 1px solid var(--hx-line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--hx-mute);
  backdrop-filter: blur(7px);
  box-shadow: 0 14px 30px -22px rgba(12, 42, 84, 0.5);
}
.hx .fab--wa { background: linear-gradient(140deg, #128c7e, #075e54); color: #fff; border-color: transparent; }
.hx .fab:hover { color: var(--hx-blue); }

/* --------------------------------------------------------------------------
   14. MISC PRIMITIVES
   -------------------------------------------------------------------------- */
.hx .scroll-progress { background: linear-gradient(90deg, var(--hx-red), var(--hx-blue)); }
.hx .cursor-glow { background: radial-gradient(circle, rgba(47, 143, 255, 0.16), transparent 70%) !important; }
.hx .page-curtain { background: var(--hx-bg); }
.hx .skip-link { background: var(--hx-blue); }

/* The boot overlay is gone: no loader markup, no progress bar, nothing to keep
   in sync with the engine. The copy paints immediately; the canvas is held
   invisible until the renderer has drawn a real frame (an undrawn WebGL canvas
   composites opaque black and would flash over this light page), then it fades
   in underneath. Nothing is ever blocked on it. */
.hx #gl { visibility: hidden; transition: opacity 0.45s ease; }
/* the engine puts hx-3d-on on <html>, while .hx sits on <body> — so this has to
   anchor on html, not on .hx, or it never matches */
html.hx-3d-on #gl { visibility: visible; }

/* no-WebGL / reduced-motion: give the page a static engineered backdrop */
.hx .hx-nogl #gl { display: none; }
.hx .hx-nogl {
  background:
    radial-gradient(90% 60% at 72% 30%, rgba(11, 95, 191, 0.1), transparent 60%),
    radial-gradient(120% 90% at 20% 80%, rgba(0, 48, 120, 0.12), transparent 60%),
    var(--hx-bg);
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .hx .hx-hud__frame { inset: calc(var(--hx-header) + 16px) 16px 118px; }
  .hx .hx-rail { display: none; }
}
@media (max-width: 1024px) {
  .hx .hx-hero__inner { padding-bottom: 26px; }
  .hx .hx-panel { justify-self: stretch; width: 100%; }
  .hx .hx-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx .hx-matrix--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx .hx-matrix--3 .card { min-height: 0; }
  .hx .std-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hx .ind-card { aspect-ratio: 4 / 2.9; }
  .hx .hx-hero__copy { grid-template-columns: 1fr; gap: 22px; }
  /* reset the desktop column placement, or the panel would create an implicit
     second track and squeeze the copy on tablets/phones */
  .hx .hx-hero__copy > .hx-panel { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .hx .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 4px; }
  .hx .hx-cta-list { grid-template-columns: 1fr; gap: 9px; }
  .hx .hx-facts { grid-template-columns: repeat(2, 1fr); }
  /* the grid is on __inner, not on .cta-band (the old selector never matched) */
  .hx .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
  .hx .cta-band .hero__cta { flex-direction: row; flex-wrap: wrap; }
  .hx .hx-cta-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--hx-line); padding-top: 16px; }
}
@media (max-width: 760px) {
  .hx .hx-hero { min-height: auto; padding-top: calc(var(--hx-header) + 16px); }
  .hx .hx-hero__inner { padding-bottom: 18px; }
  /* stack the studio block on phones — main.css only does this at 640 */
  .hx .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .hx .hx-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.72), rgba(247, 251, 255, 0.88) 55%, rgba(247, 251, 255, 0.97));
  }
  .hx .hx-hero__copy { position: relative; z-index: 2; }
  .hx .hx-title { font-size: clamp(2.15rem, 9.9vw, 3rem); }
  .hx .hx-matrix { grid-template-columns: 1fr; }
  .hx .hx-matrix--3 { grid-template-columns: 1fr; }
  .hx .hx-matrix .card { min-height: 0; }
  .hx .std-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx .rel-card { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 14px; padding: 16px; }
  .hx .rel-card__icon { width: 40px; height: 40px; }
  .hx .rel-card small { font-size: 14.5px; }
  .hx .hx-hud__reticle, .hx .hx-hud__legend { display: none; }
  .hx .hx-hud__frame { inset: calc(var(--hx-header) + 10px) 10px 96px; }
  .hx .hx-cue { bottom: 92px; }
  .hx .hx-hud__hint { bottom: 58px; }
  .hx .steps { grid-template-columns: 1fr; }
  .hx .hx-facts { grid-template-columns: 1fr; }
  .hx .ind-card { aspect-ratio: 4 / 2.5; }
  .hx .ind-grid { grid-template-columns: 1fr; }
  /* the frame keeps its own ratio at every width — no height clamp on the photo */
  .hx .split-media__main img { height: 100%; }
  .hx .split-media__sub,
  .hx .split-media__sub--b { width: min(30%, 118px); }
  .hx .hx-callout__box span { font-size: 13.5px; }
  /* the model must not fight the type on small screens */
  .hx #gl { opacity: 0.42; }
  .hx::after { background-size: 48px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx .hx-ticker__row { animation: none; }
  .hx .hx-cue i, .hx .hx-coord i { animation: none; }
}

/* --------------------------------------------------------------------------
   READABILITY PASS — 2026-09-27
   Facility theme: the same weight floors so small print reads clearly on the
   dark sheet too (colours stay with home-facility.css).
   -------------------------------------------------------------------------- */
.hx .hx-cue, .hx .hx-idx, .hx .hx-hud__hint, .hx .hx-facts dt,
.hx .split-media__badge span, .hx .hx-matrix__more b, .hx .hx-cta-side div,
.hx .std-chip small, .hx .rel-card small, .hx .ft__base span,
.hx .crumbs, .hx .crumbs a { font-size: 13.5px !important; }
.hx small, .hx dt, .hx .hx-idx, .hx .hx-facts dt, .hx .split-media__badge span,
.hx .ft__base span, .hx .crumbs, .hx .hx-cta-side div { font-weight: 600; }

/* READABILITY PASS (cont.) — legend and callout labels carry weight too. */
.hx .hx-hud__legend li, .hx .hx-callout__box em, .hx .hx-callout__box b,
.hx .hx-hud__legend span { font-weight: 600; font-size: 13.5px; }