/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1150px) {
  :root {
    --page-pad: 28px;
  }

  .nav-links {
    gap: 22px;
    margin-right: 22px;
  }

  .command-card {
    right: 18%;
  }

  .askari-card {
    right: 3%;
  }
}

@media (max-width: 980px) {
  .nav-links {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .nav-actions .button-ghost {
    display: none;
  }

  .guardian {
    min-height: 760px;
  }

  .facility {
    inset: 12% -25% 12%;
  }

  .node-camera {
    left: 18%;
  }

  .node-officer {
    left: 68%;
  }

  .node-vehicle {
    left: 82%;
  }

  .command-card {
    right: 10%;
    top: 45%;
  }

  .askari-card {
    right: 3%;
    top: 22%;
  }

  .hero-copy {
    max-width: 86%;
  }

  .interactive-hint {
    display: none;
  }
}

@media (max-width: 720px) {
  :root {
    --nav-height: 74px;
    --page-pad: 18px;
  }

  .site-nav {
    height: var(--nav-height);
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .brand-copy small {
    display: none;
  }

  .nav-actions .button-light {
    display: none;
  }

  .guardian {
    min-height: 100svh;
    height: 100svh;
  }

  .facility {
    inset: 20% -55% 12%;
    transform:
      perspective(900px)
      rotateX(64deg)
      rotateZ(-16deg)
      scale(1.1);
  }

  .system-status {
    top: 92px;
  }

  .incident-id {
    display: none;
  }

  .skip-intro {
    top: 97px;
  }

  .security-node {
    transform: scale(0.9);
  }

  .node-camera {
    left: 12%;
    top: 34%;
  }

  .node-gate {
    left: 41%;
    top: 58%;
  }

  .node-officer {
    left: 67%;
    top: 59%;
  }

  .node-vehicle {
    left: 79%;
    top: 48%;
  }

  .hud-card {
    left: 18px !important;
    right: 18px !important;
    top: auto !important;
    bottom: 92px !important;
    width: auto !important;
    max-width: none;
  }

  .cctv-card,
  .askari-card,
  .command-card,
  .officer-card,
  .response-card {
    max-height: 310px;
  }

  .client-notification {
    left: 18px;
    right: 18px;
    top: auto;
    bottom: 98px;
    width: auto;
  }

  .contained-panel {
    width: calc(100% - 36px);
    min-width: 0;
  }

  .incident-progress {
    display: none;
  }

  .hero-copy {
    left: 18px;
    right: 18px;
    bottom: 92px;
    max-width: none;
  }

  .hero-copy > small {
    margin-bottom: 13px;
    font-size: 6px;
  }

  .hero-copy h1 {
    font-size: clamp(40px, 12vw, 62px);
  }

  #heroDescription {
    margin-top: 18px;
    font-size: 12px;
  }

  .hero-actions {
    flex-wrap: wrap;
  }

  .hero-actions .button {
    flex: 1 1 150px;
  }

  .system-strip {
    height: 68px;
  }

  .system-strip > div {
    padding: 0 12px;
  }

  .system-strip > div:nth-child(3),
  .system-strip > div:nth-child(4) {
    display: none;
  }

  .system-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .node-drawer {
    padding: 106px 24px 28px;
  }

  .drawer-close {
    top: 88px;
    right: 20px;
  }

  .node-drawer h2 {
    font-size: 34px;
  }

  .network-bridge {
    min-height: 720px;
    padding: 110px 18px;
  }

  .network-diagram {
    width: 100%;
    max-width: 390px;
    height: 310px;
  }

  .network-node {
    width: 90px;
  }

  .network-line {
    width: 120px;
  }

  .line-officer,
  .line-hq {
    width: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}