@media (max-width: 1380px) {
  .desktop-nav {
    gap: 24px;
  }

  .hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(430px, 0.8fr);

    gap: 58px;
  }

  .hero__title {
    font-size:
      clamp(
        54px,
        5.8vw,
        84px
      );
  }

  .selected-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


@media (max-width: 1180px) {
  .header__inner {
    grid-template-columns:
      auto
      1fr
      auto;
  }

  .desktop-nav {
    justify-self: center;
    gap: 18px;
  }

  .desktop-nav a {
    font-size: 12px;
  }

  .hero__grid {
    gap: 44px;
  }

  .hero__visual-stage {
    width:
      min(
        100%,
        580px
      );
  }

  .industries-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .engineering-process,
  .security-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .exception-engine {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .exception-engine__critical {
    grid-column:
      span 2;
  }
}


@media (max-width: 1050px) {
  :root {
    --header-h:
      74px;
  }

  .container {
    width:
      min(
        calc(100% - 40px),
        var(--container)
      );
  }

  .desktop-nav,
  .command-trigger,
  .button--header {
    display:
      none;
  }

  .mobile-toggle {
    display:
      inline-block;
  }

  .header__inner {
    grid-template-columns:
      1fr
      auto;
  }

  .section--hero {
    padding-top:
      calc(
        var(--header-h)
        + 72px
      );
  }

  .hero__grid {
    grid-template-columns:
      1fr;

    gap:
      72px;
  }

  .hero__content {
    max-width:
      820px;
  }

  .hero__visual-stage {
    width:
      min(
        100%,
        620px
      );

    justify-self:
      center;
  }

  .hero__lower {
    margin-top:
      78px;
  }

  .genome {
    grid-template-columns:
      1fr;

    gap:
      28px;
  }

  .genome__core {
    order:
      -1;
  }

  .genome__inputs,
  .genome__outputs {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .capability-environment {
    grid-template-columns:
      1fr;

    gap:
      38px;
  }

  .capability-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    border:
      1px
      solid
      var(--line);
  }

  .capability-item {
    border:
      0;

    border-bottom:
      1px
      solid
      var(--line);

    border-right:
      1px
      solid
      var(--line);
  }

  .capability-stage {
    min-height:
      560px;
  }

  .chaos-control {
    grid-template-columns:
      1fr;

    gap:
      28px;
  }

  .chaos-control__core {
    width:
      220px;

    justify-self:
      center;
  }

  .event-engine {
    grid-template-columns:
      1fr;
  }

  .command-demo__workspace {
    grid-template-columns:
      1fr;

    grid-template-rows:
      auto;
  }

  .command-demo__map {
    grid-row:
      auto;

    border-right:
      0;

    border-bottom:
      1px
      solid
      var(--line);
  }

  .command-demo__feed {
    border-bottom:
      1px
      solid
      var(--line);
  }

  .global-environment {
    grid-template-columns:
      1fr;
  }

  .builder-layout {
    grid-template-columns:
      1fr;
  }

  .company-layout {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }

  .project-configurator {
    grid-template-columns:
      1fr;
  }

  .project-platforms,
  .project-result,
  .project-field:nth-last-of-type(2),
  .project-field:nth-last-of-type(1),
  .project-configurator > .button {
    grid-column:
      auto;
  }

  .site-footer__inner {
    grid-template-columns:
      1fr;

    gap:
      26px;
  }

  .site-footer__inner nav {
    flex-wrap:
      wrap;
  }

  .site-footer__system {
    justify-self:
      start;

    align-items:
      flex-start;
  }
}


@media (max-width: 860px) {
  .hero__title {
    font-size:
      clamp(
        50px,
        8.2vw,
        72px
      );
  }

  .section-heading h2,
  .company-layout h2 {
    font-size:
      clamp(
        44px,
        8vw,
        68px
      );
  }

  .exception-engine {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .exception-engine__critical {
    grid-column:
      auto;
  }

  .command-demo__stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .industries-grid,
  .engineering-process,
  .security-grid,
  .selected-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .industries-beyond {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }

  .world-map {
    min-height:
      460px;
  }
}


@media (max-width: 720px) {
  .container {
    width:
      min(
        calc(100% - 28px),
        var(--container)
      );
  }

  .section {
    padding:
      88px
      0;
  }

  .brand__descriptor {
    display:
      none;
  }

  .brand__mark {
    width:
      34px;

    height:
      34px;

    font-size:
      19px;
  }

  .brand__name {
    font-size:
      14px;
  }

  .section--hero {
    min-height:
      auto;

    padding-top:
      calc(
        var(--header-h)
        + 54px
      );

    padding-bottom:
      34px;
  }

  .hero__title {
    margin-top:
      20px;

    font-size:
      clamp(
        44px,
        12.5vw,
        60px
      );

    line-height:
      0.98;

    letter-spacing:
      -0.05em;
  }

  .hero__lead {
    margin-top:
      22px;

    font-size:
      16px;

    line-height:
      1.65;
  }

  .hero__meta {
    margin-top:
      24px;

    gap:
      8px
      14px;
  }

  .hero__meta span {
    font-size:
      11px;
  }

  .hero__actions {
    margin-top:
      30px;

    flex-direction:
      column;
  }

  .hero__actions .button {
    width:
      100%;
  }

  .hero__trustline {
    margin-top:
      32px;

    gap:
      9px
      15px;

    font-size:
      9px;
  }

  .hero__grid {
    gap:
      56px;
  }

  .hero__visual-stage {
    width:
      min(
        100%,
        470px
      );
  }

  .system-core {
    width:
      122px;
  }

  .system-core__mark {
    font-size:
      52px;
  }

  .system-node {
    padding:
      6px
      8px;
  }

  .system-node__label {
    font-size:
      7px;

    letter-spacing:
      0.1em;
  }

  .system-node--people {
    left:
      8%;

    top:
      16%;
  }

  .system-node--assets {
    left:
      0;

    top:
      54%;
  }

  .system-node--data {
    left:
      24%;

    bottom:
      4%;
  }

  .system-node--operations {
    right:
      0;

    top:
      24%;
  }

  .system-node--automation {
    right:
      -1%;

    bottom:
      21%;
  }

  .visual-caption {
    display:
      none;
  }

  .hero__lower {
    margin-top:
      58px;

    flex-direction:
      column;

    align-items:
      stretch;
  }

  .telemetry {
    width:
      100%;
  }

  .telemetry__grid {
    grid-template-columns:
      1fr
      1fr;
  }

  .telemetry__grid > div:last-child {
    display:
      none;
  }

  .scroll-cue {
    align-items:
      flex-start;
  }

  .section-heading h2,
  .company-layout h2 {
    font-size:
      clamp(
        40px,
        12vw,
        58px
      );
  }

  .section-heading p,
  .company-copy p {
    font-size:
      16px;
  }

  .genome__inputs,
  .genome__outputs {
    grid-template-columns:
      1fr;
  }

  .genome__core {
    width:
      150px;
  }

  .capability-list {
    grid-template-columns:
      1fr;
  }

  .capability-item {
    border-right:
      0;
  }

  .capability-stage {
    min-height:
      460px;
  }

  .device-phone {
    width:
      min(
        220px,
        68%
      );
  }

  .demo-monitor {
    width:
      min(
        500px,
        92%
      );
  }

  .demo-vehicle {
    width:
      min(
        440px,
        90%
      );

    height:
      190px;
  }

  .demo-network,
  .demo-integration,
  .demo-analytics,
  .demo-document,
  .demo-security {
    width:
      min(
        480px,
        92%
      );
  }

  .exception-engine,
  .command-demo__stats,
  .industries-grid,
  .engineering-process,
  .security-grid,
  .selected-grid,
  .scanner-results {
    grid-template-columns:
      1fr;
  }

  .industry-card {
    min-height:
      220px;
  }

  .industry-card h3 {
    margin-top:
      42px;
  }

  .world-map {
    min-height:
      400px;
  }

  .builder-options {
    grid-template-columns:
      1fr;
  }

  .builder-blueprint {
    min-height:
      430px;
  }

  .scanner {
    gap:
      28px;
  }

  .project-platforms {
    flex-direction:
      column;
  }

  .project-platforms label {
    width:
      100%;
  }

  .final-section {
    min-height:
      62vh;
  }

  .final-section h2 {
    font-size:
      clamp(
        48px,
        13vw,
        72px
      );
  }

  .site-footer__inner nav {
    display:
      grid;

    gap:
      12px;
  }

  .command-panel {
    padding-top:
      9vh;
  }
}


@media (max-width: 520px) {
  .eyebrow {
    font-size:
      8px;

    letter-spacing:
      0.1em;
  }

  .hero__title {
    font-size:
      clamp(
        42px,
        12.6vw,
        54px
      );
  }

  .hero__meta {
    flex-direction:
      column;

    gap:
      5px;
  }

  .hero__meta span:not(:last-child)::after {
    display:
      none;
  }

  .telemetry__heading {
    flex-direction:
      column;

    gap:
      7px;
  }

  .system-core {
    width:
      108px;
  }

  .system-core__mark {
    font-size:
      46px;
  }

  .system-node__label {
    font-size:
      6px;
  }

  .capability-stage {
    min-height:
      400px;
  }

  .device-phone {
    width:
      min(
        200px,
        72%
      );
  }

  .demo-vehicle::before {
    left:
      44px;
  }

  .demo-vehicle::after {
    right:
      44px;
  }

  .world-map {
    min-height:
      340px;
  }

  .global-session > strong {
    font-size:
      28px;
  }

  .builder-blueprint {
    min-height:
      390px;
  }

  .command-panel__dialog {
    width:
      min(
        calc(100% - 20px),
        700px
      );
  }
}


@media (max-width: 390px) {
  .container {
    width:
      calc(100% - 22px);
  }

  .hero__title {
    font-size:
      40px;
  }

  .section-heading h2,
  .company-layout h2 {
    font-size:
      38px;
  }

  .button {
    padding:
      0
      16px;
  }

  .system-node--automation {
    right:
      -5%;
  }

  .system-node--assets {
    left:
      -4%;
  }

  .capability-stage {
    min-height:
      370px;
  }
}


@media (hover: none) {
  .button:hover,
  .industry-card:hover,
  .xray-stack > div:hover {
    transform:
      none;
  }

  .industry-card::after {
    display:
      none;
  }
}


@media (prefers-reduced-motion: reduce) {
  .hero__visual-stage {
    transform:
      none !important;
  }
}