:root {
  --grid-bg: #07090b;
  --grid-surface: #0d1014;
  --grid-surface-2: #12161b;
  --grid-line: rgba(255, 255, 255, 0.10);
  --grid-line-strong: rgba(255, 255, 255, 0.18);
  --grid-text: #f6f7f4;
  --grid-muted: #8f98a3;
  --grid-yellow: #ffd400;
  --grid-blue: #4d7cff;
  --grid-orange: #ff6a1a;
  --grid-red: #ff4655;
  --grid-green: #8aa05a;
}

.honor-grid-page {
  background: var(--grid-bg);
  color: var(--grid-text);
}

.honor-grid-page .site-header,
.our-story-page .site-header,
.home-page .site-header {
  min-height: 78px;
}

.honor-grid-page .site-header nav,
.our-story-page .site-header nav,
.home-page .site-header nav {
  gap: 12px 20px;
}

.honor-grid-page .site-header nav a,
.our-story-page .site-header nav a,
.home-page .site-header nav a {
  letter-spacing: .04em;
}

.grid-hero {
  position: relative;
  min-height: calc(100vh - 78px);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 75% 35%, rgba(255,212,0,.08), transparent 33%),
    var(--grid-bg);
  background-size: 72px 72px, 72px 72px, auto, auto;
}

.grid-hero-intro {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, .8fr);
  gap: 60px;
  align-items: end;
  padding: 76px 7vw 28px;
}

.grid-system-label,
.grid-kicker,
.deployment-seq,
.deployment-coordinate,
.deployment-category,
.grid-terminal-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.grid-system-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--grid-muted);
  font-size: 11px;
  font-weight: 800;
}

.grid-system-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grid-yellow);
  box-shadow: 0 0 18px rgba(255,212,0,.9);
  animation: systemPulse 2.4s ease-in-out infinite;
}

@keyframes systemPulse {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

.grid-hero h1 {
  margin: 0;
  max-width: 850px;
  color: var(--grid-text);
  font-size: clamp(64px, 10vw, 142px);
  line-height: .82;
  letter-spacing: -.065em;
}

.grid-hero-copy > p:last-child {
  max-width: 690px;
  margin: 0;
  color: #cbd0d5;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.55;
}

.grid-map-frame {
  position: relative;
  min-height: 560px;
  margin: 0 4vw 4vw;
  border: 1px solid var(--grid-line-strong);
  overflow: hidden;
  background: #090b0e;
}

.grid-map-frame::before,
.grid-map-frame::after {
  content: "";
  position: absolute;
  z-index: 500;
  pointer-events: none;
}

.grid-map-frame::before {
  inset: 0;
  border: 14px solid rgba(7,9,11,.28);
  box-shadow: inset 0 0 120px rgba(0,0,0,.65);
}

.grid-map-frame::after {
  top: 18px;
  right: 18px;
  width: 74px;
  height: 28px;
  border-top: 1px solid rgba(255,212,0,.75);
  border-right: 1px solid rgba(255,212,0,.75);
}

#honor-grid-map,
#honor-grid-mini-map {
  width: 100%;
  height: 100%;
  background: #090b0e;
}

#honor-grid-map {
  min-height: 560px;
}

.leaflet-container {
  font-family: Arial, Helvetica, sans-serif;
  background: #090b0e;
}

.leaflet-tile-pane {
  filter: grayscale(1) invert(.92) sepia(.08) hue-rotate(175deg) brightness(.35) contrast(1.45);
  opacity: .72;
}

.leaflet-control-attribution {
  background: rgba(7,9,11,.78) !important;
  color: #77808a !important;
  font-size: 9px !important;
}

.leaflet-control-attribution a { color: #aeb5bc !important; }
.leaflet-bar a {
  background: #0d1014 !important;
  color: #fff !important;
  border-color: var(--grid-line) !important;
}

.honor-marker-wrap { background: transparent; border: 0; }
.honor-marker {
  --marker: var(--grid-yellow);
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--marker) 75%, white 25%);
  border-radius: 50%;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--marker) 10%, transparent), 0 0 28px color-mix(in srgb, var(--marker) 65%, transparent);
  animation: markerBreath 2.8s ease-in-out infinite;
}

.honor-marker.compact { width: 22px; height: 22px; }
.honor-marker i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marker);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 18px var(--marker);
}

@keyframes markerBreath {
  0%, 100% { transform: scale(.92); opacity: .8; }
  50% { transform: scale(1.08); opacity: 1; }
}

.grid-overlay-top {
  position: absolute;
  z-index: 650;
  top: 22px;
  left: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
}

.grid-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--grid-line);
  background: rgba(7,9,11,.82);
  color: #b9c0c7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.grid-legend-item i { width: 6px; height: 6px; border-radius: 50%; background: var(--legend); box-shadow: 0 0 10px var(--legend); }

.grid-metrics {
  position: absolute;
  z-index: 650;
  right: 22px;
  bottom: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  border: 1px solid var(--grid-line-strong);
  background: rgba(7,9,11,.88);
  backdrop-filter: blur(14px);
}

.grid-metric {
  min-width: 0;
  padding: 15px 17px;
  border-right: 1px solid var(--grid-line);
}
.grid-metric:last-child { border-right: 0; }
.grid-metric strong {
  display: block;
  color: var(--grid-text);
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -.04em;
}
.grid-metric span {
  display: block;
  margin-top: 7px;
  color: var(--grid-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.deployment-panel {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  width: min(500px, 94vw);
  height: 100vh;
  overflow-y: auto;
  background: #0b0e11;
  border-left: 1px solid var(--grid-line-strong);
  color: var(--grid-text);
  transform: translateX(102%);
  transition: transform .38s cubic-bezier(.2,.8,.2,1);
  box-shadow: -30px 0 80px rgba(0,0,0,.48);
}
.deployment-panel.is-open { transform: translateX(0); }
.deployment-close {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  background: rgba(7,9,11,.72);
  color: white;
  font-size: 24px;
  cursor: pointer;
}
.deployment-image { height: 36vh; min-height: 280px; background: #111; }
.deployment-image img { width: 100%; height: 100%; object-fit: cover; }
.deployment-panel-body { padding: 38px; }
.deployment-coordinate { color: #6f7781; font-size: 10px; }
.deployment-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 14px;
  color: var(--category);
  font-size: 10px;
  font-weight: 900;
}
.deployment-category::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--category); box-shadow: 0 0 12px var(--category); }
.deployment-panel h2 { margin-bottom: 15px; color: white; font-size: clamp(42px, 6vw, 66px); letter-spacing: -.04em; }
.deployment-operation { margin-bottom: 6px; color: #f2f2ee; font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: .05em; }
.deployment-date { color: var(--grid-muted); font-size: 13px; }
.deployment-summary { margin: 28px 0; color: #c7cdd2; font-size: 17px; line-height: 1.65; }
.deployment-numbers { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 0; border: 1px solid var(--grid-line); }
.deployment-numbers div { padding: 18px; border-right: 1px solid var(--grid-line); }
.deployment-numbers div:last-child { border-right: 0; }
.deployment-numbers strong { display: block; font-size: 32px; }
.deployment-numbers span { color: var(--grid-muted); font-size: 11px; text-transform: uppercase; }
.deployment-partners { padding-top: 18px; border-top: 1px solid var(--grid-line); color: #d8dde1; font-size: 13px; }
.grid-link { display: inline-flex; gap: 9px; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid var(--grid-yellow); color: white; font-weight: 900; }

.grid-section {
  padding: 108px 7vw;
  border-top: 1px solid var(--grid-line);
  background: var(--grid-bg);
}
.grid-section.alt { background: #0a0d10; }
.grid-section-head {
  display: grid;
  grid-template-columns: minmax(260px,.7fr) minmax(360px,1.3fr);
  gap: 80px;
  margin-bottom: 56px;
  align-items: end;
}
.grid-kicker { margin-bottom: 12px; color: var(--grid-yellow); font-size: 10px; font-weight: 900; }
.grid-section h2 { margin: 0; color: white; font-size: clamp(42px, 6vw, 82px); letter-spacing: -.04em; }
.grid-section-head > p:last-child { margin: 0; color: #aeb6be; font-size: 18px; line-height: 1.7; }

.deployment-log { border-top: 1px solid var(--grid-line-strong); }
.deployment-log-item {
  width: 100%;
  display: grid;
  grid-template-columns: 150px 1fr 1.4fr 150px 40px;
  gap: 22px;
  align-items: center;
  padding: 25px 18px;
  border: 0;
  border-bottom: 1px solid var(--grid-line);
  background: transparent;
  color: white;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
}
.deployment-log-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--category); box-shadow: 0 0 12px var(--category); position: absolute; }
.deployment-log-item:hover { background: rgba(255,255,255,.035); }
.deployment-seq { padding-left: 18px; color: #6e7680; font-size: 9px; }
.deployment-place { font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 700; }
.deployment-type, .deployment-log-date { color: #aab2ba; font-size: 13px; }
.deployment-arrow { justify-self: end; color: var(--grid-yellow); font-size: 20px; }

.partner-layer {
  display: grid;
  grid-template-columns: minmax(320px,1fr) minmax(320px,1fr);
  gap: 1px;
  border: 1px solid var(--grid-line);
  background: var(--grid-line);
}
.partner-layer-copy, .partner-layer-demo { padding: 48px; background: var(--grid-surface); }
.partner-layer-copy p { color: #aeb6be; font-size: 17px; line-height: 1.7; }
.partner-layer-demo { display: flex; flex-direction: column; justify-content: space-between; min-height: 340px; background:
  radial-gradient(circle at 76% 22%, rgba(255,212,0,.08), transparent 30%), var(--grid-surface-2); }
.grid-terminal-label { color: #69717a; font-size: 9px; }
.partner-layer-demo strong { max-width: 600px; font-size: clamp(34px, 4vw, 58px); line-height: 1.04; letter-spacing: -.04em; }
.partner-layer-demo p { max-width: 500px; margin: 18px 0 0; color: #9fa7af; }

.grid-cta {
  padding: 120px 7vw;
  background: var(--grid-yellow);
  color: #080a0c;
}
.grid-cta-inner { display: grid; grid-template-columns: minmax(320px,1fr) auto; gap: 50px; align-items: end; }
.grid-cta h2 { margin: 0; max-width: 880px; color: #080a0c; font-size: clamp(54px, 8vw, 110px); line-height: .9; letter-spacing: -.06em; }
.grid-cta p { max-width: 720px; margin: 24px 0 0; font-size: 19px; line-height: 1.6; }
.grid-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.grid-cta .button { min-height: 54px; border: 1px solid #080a0c; }
.grid-cta .button.primary { background: #080a0c; color: white; }
.grid-cta .button.secondary-dark { background: transparent; color: #080a0c; }

@media (prefers-reduced-motion: reduce) {
  .honor-marker, .grid-system-label::before { animation: none; }
  .deployment-panel { transition: none; }
}

@media (max-width: 1000px) {
  .grid-hero-intro, .grid-section-head, .partner-layer, .grid-cta-inner { grid-template-columns: 1fr; gap: 30px; }
  .grid-metrics { grid-template-columns: repeat(2, minmax(110px,1fr)); }
  .grid-metric:nth-child(2) { border-right: 0; }
  .grid-metric:nth-child(-n+2) { border-bottom: 1px solid var(--grid-line); }
  .deployment-log-item { grid-template-columns: 120px 1fr 1fr 30px; }
  .deployment-log-date { display: none; }
}

@media (max-width: 700px) {
  .grid-hero-intro { padding: 58px 6vw 24px; }
  .grid-hero h1 { font-size: clamp(60px, 22vw, 92px); }
  .grid-map-frame { margin: 0 0 0; min-height: 580px; border-right: 0; border-left: 0; }
  #honor-grid-map { min-height: 580px; }
  .grid-overlay-top { top: 14px; left: 14px; right: 14px; }
  .grid-legend-item:nth-child(n+4) { display: none; }
  .grid-metrics { left: 14px; right: 14px; bottom: 14px; }
  .grid-section { padding: 76px 6vw; }
  .deployment-log-item { grid-template-columns: 1fr 34px; gap: 8px; padding: 22px 8px; }
  .deployment-log-item::before { display: none; }
  .deployment-seq, .deployment-type { grid-column: 1 / 2; padding-left: 0; }
  .deployment-place { grid-column: 1 / 2; font-size: 28px; }
  .deployment-arrow { grid-column: 2 / 3; grid-row: 1 / 4; align-self: center; }
  .partner-layer-copy, .partner-layer-demo { padding: 30px; }
  .grid-cta { padding: 86px 6vw; }
  .grid-cta-actions { flex-direction: column; align-items: stretch; }
  .grid-cta-actions .button { width: 100%; }
}
