@media (max-width: 860px) {
  .hud__tr,
  .hud__bl,
  .hud__edge {
    display: none !important;
  }

  .hud {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .hud__corner {
    gap: 0.22rem;
  }

  .hud__tl,
  .hud__tr {
    top: calc(0.9rem + env(safe-area-inset-top, 0px)) !important;
  }

  .hud__tl,
  .hud__bl {
    left: calc(0.9rem + env(safe-area-inset-left, 0px)) !important;
  }

  .hud__tr,
  .hud__br {
    right: calc(0.9rem + env(safe-area-inset-right, 0px)) !important;
  }

  .hud__br,
  .sound-toggle {
    bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hud__logo {
    height: 16px !important;
    width: auto;
    display: block;
  }

  .hud__tl {
    z-index: 72;
  }

  .hud,
  .hud__corner,
  .hud__tl,
  .hud__brand-link {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hud__brand-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.42rem 0.52rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px) saturate(1.02);
    -webkit-backdrop-filter: blur(8px) saturate(1.02);
    pointer-events: auto;
  }

  .hud__tl .hud__row--muted:last-child {
    display: none !important;
  }

  .hud__tl .hud__row--muted {
    font-size: 0.54rem;
    letter-spacing: 0.16em;
  }

  .hud__br .hud__row:not(.hud__row--accent) {
    display: none !important;
  }

  .hud__row--accent {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }

  .sound-toggle {
    left: auto !important;
    right: calc(0.9rem + env(safe-area-inset-right, 0px)) !important;
    transform: none !important;
    padding: 0.45rem 0.55rem !important;
    gap: 0.22rem !important;
    min-width: 0;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(0, 0, 0, 0.32) !important;
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
  }

  .sound-toggle__label {
    display: none !important;
  }

  .sound-toggle__bar {
    height: 7px !important;
  }

  .sound-toggle__bar:nth-child(2) {
    height: 11px !important;
  }

  .sound-toggle__bar:nth-child(3) {
    height: 5px !important;
  }

  .section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .section--hero,
  .srv-hero,
  .case-hero {
    padding-top: calc(12vh + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(10vh + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hero__meta,
  .srv-hero__meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
    margin-top: 1.35rem !important;
  }

  .hero__meta span,
  .srv-hero__meta span {
    max-width: 24rem;
  }

  .contact-grid {
    gap: 1.4rem !important;
    padding: 1.3rem 1rem !important;
    margin-top: 1rem !important;
  }

  .contact-grid:before {
    top: -0.35rem !important;
    right: -0.4rem !important;
    bottom: -0.35rem !important;
    left: -0.4rem !important;
    border-radius: 12px !important;
  }

  .contact-grid__left {
    gap: 1.15rem !important;
  }

  .contact__mail,
  .case-link {
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  .case-main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .case-archive__grid,
  .cases-grid {
    margin-top: 1.5rem !important;
    gap: 1rem !important;
  }

  .case-card__inner {
    padding: 0.9rem !important;
  }
}

@media (max-width: 640px) {
  .loader {
    padding: 1rem !important;
  }

  .loader__hud {
    font-size: 0.56rem !important;
    letter-spacing: 0.12em !important;
  }

  .loader__tag {
    font-size: 0.58rem !important;
    letter-spacing: 0.18em !important;
  }

  .hero__sub,
  .srv-hero__sub,
  .case-hero__sub {
    font-size: 0.74rem !important;
    letter-spacing: 0.12em !important;
  }

  .srv-section__label,
  .case-hero__kicker,
  .section__label {
    font-size: 0.58rem !important;
    letter-spacing: 0.18em !important;
  }

  .contact-form__foot {
    gap: 0.8rem !important;
  }

  .contact-form__submit {
    width: 100%;
  }

  .footer {
    margin-top: 2rem !important;
  }
}