.mobile-menu { display: none; }

@media (max-width: 670px) {
  .mobile-menu:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 7px 12px;
    border: 1px solid currentColor;
    border-radius: 7px;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
  }
  .mobile-menu span {
    width: 7px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg);
  }
  .mobile-menu[aria-expanded=true] span { transform: translateY(2px) rotate(225deg); }
  .mobile-menu:not([hidden])[aria-expanded=false] + #site-navigation { display: none; }
  #site-navigation {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    width: 100%;
    padding: 6px 0 10px;
    border-top: 1px solid var(--mobile-nav-line);
  }
  #site-navigation a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    padding: 6px 0;
    border: 0;
    font-size: .9rem;
  }
  .contact-fields { grid-template-columns: minmax(0, 1fr); }
  .form-actions .button { width: 100%; }
  .contact-form textarea { min-height: 104px; }
}

@media (max-width: 670px) {
  .header { --brand-panel-width: 223px; --mobile-nav-line: var(--line); }
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 0;
    min-height: 62px;
  }
  .brand-color img { width: 156px; }
  .hero-copy { padding-top: 36px; }
  .hero-inner { gap: 18px; }
  .hero h1 { font-size: clamp(2rem, 9.4vw, 3.6rem); text-wrap: initial; }
  .hero h1 em { display: inline-block; }
  .hero .lead { margin-top: 16px; line-height: 1.55; }
  .hero .actions { gap: 6px 14px; margin-top: 20px; }
  .hero .text-button { padding-inline: 0; }
  .radar { width: min(48%, 164px); margin-block: 0 24px; }
  .point { width: 5px; height: 5px; }
  .section { padding-block: 38px; }
  h2 { font-size: clamp(1.9rem, 7.5vw, 2.75rem); }
  .section-lead { margin-top: 12px; font-size: 1rem; }
  .product-grid { margin-top: 18px; }
  .product-copy, .product-preview { padding: 18px; }
  .product .button { margin-top: 18px; }
  .services-header { gap: 14px; }
  .service-list { gap: 10px; margin-top: 18px; }
  .service-list article { padding: 16px 18px; }
  .service-list p { margin-top: 8px; }
  .footer-inner { display: grid; grid-template-columns: 1fr auto; }
  .footer-inner p { grid-row: 2; grid-column: 1 / -1; }
}