.hlhh-shell {
  width: min(calc(100% - (var(--hlhh-gutter) * 2)), var(--hlhh-shell-width));
  margin-inline: auto;
}

.hlhh-section { padding-block: var(--hlhh-space-6); }
.hlhh-section--dark { color: var(--hlhh-clean-paper); background: var(--hlhh-mission-night); }
.hlhh-section--graphite { color: var(--hlhh-clean-paper); background: var(--hlhh-control-graphite); }
.hlhh-section--silver { background: var(--hlhh-instrument-silver); }

.hlhh-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hlhh-space-3);
}

.hlhh-grid > * { min-width: 0; }
.hlhh-span-12 { grid-column: span 12; }
.hlhh-span-8 { grid-column: span 8; }
.hlhh-span-6 { grid-column: span 6; }
.hlhh-span-4 { grid-column: span 4; }
.hlhh-span-3 { grid-column: span 3; }

.hlhh-hero {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: var(--hlhh-clean-paper);
  background: var(--hlhh-mission-night);
}

.hlhh-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.52; }
.hlhh-hero__content { position: relative; z-index: 1; padding-block: 96px; max-width: 760px; }
.hlhh-hero h1 { margin: 0 0 var(--hlhh-space-3); font-size: 56px; }
.hlhh-hero p { max-width: 660px; font-size: 20px; }

.hlhh-trust-strip { border-block: 1px solid rgba(255,255,255,.18); background: var(--hlhh-control-graphite); color: var(--hlhh-clean-paper); }
.hlhh-trust-strip__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hlhh-space-3); padding-block: var(--hlhh-space-3); }

.hlhh-capability-matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hlhh-capability-matrix table { width: 100%; min-width: 640px; border-collapse: collapse; }
.hlhh-capability-matrix th, .hlhh-capability-matrix td { padding: var(--hlhh-space-2); text-align: left; border-bottom: 1px solid var(--hlhh-line); vertical-align: top; }

.hlhh-control-gates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: gate; }
.hlhh-control-gates__item { position: relative; padding: var(--hlhh-space-3); border-top: 3px solid var(--hlhh-calibration-cyan); }
.hlhh-control-gates__item::before { counter-increment: gate; content: counter(gate, decimal-leading-zero); display: block; color: var(--hlhh-calibration-cyan); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; }

.hlhh-rfq { padding: var(--hlhh-space-5); background: var(--hlhh-clean-paper); border: 1px solid var(--hlhh-line); border-radius: var(--hlhh-radius-md); }
.hlhh-site-footer { padding-block: var(--hlhh-space-6); color: var(--hlhh-clean-paper); background: var(--hlhh-mission-night); }

@media (max-width: 900px) {
  .hlhh-hero h1 { font-size: 44px; }
  .hlhh-span-8, .hlhh-span-6 { grid-column: span 12; }
  .hlhh-span-4, .hlhh-span-3 { grid-column: span 6; }
  .hlhh-trust-strip__items, .hlhh-control-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  :root { --hlhh-gutter: 16px; }
  .hlhh-section { padding-block: var(--hlhh-space-5); }
  .hlhh-hero { min-height: 460px; }
  .hlhh-hero__content { padding-block: 72px; }
  .hlhh-hero h1 { font-size: 38px; }
  .hlhh-hero p { font-size: 17px; }
  .hlhh-span-4, .hlhh-span-3 { grid-column: span 12; }
  .hlhh-trust-strip__items, .hlhh-control-gates { grid-template-columns: 1fr; }
  .hlhh-rfq { padding: var(--hlhh-space-3); }
}