/* Shared small-screen rules for the homepage and every service page. */
.wrap > *, .nav .wrap > *, .form > *, .scope > *, .steps > *,
.contact-grid > *, .split > *, .intro-grid > *, .areas-grid > * {
  min-width: 0;
}
h1, h2, h3, .contact-line, .contact-card, .footer-row, .btn,
.portfolio-dialog-title { overflow-wrap: anywhere; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; max-width: 100%; font-size: 1rem;
}
.logo-mark { flex-shrink: 0; }
.mobile-menu { flex-shrink: 0; }
.service-menu-panel { overscroll-behavior: contain; }
.portfolio-dialog-top {
  position: sticky; top: 0; z-index: 1; background: #101820;
}
.portfolio-dialog-bottom > * { min-width: 0; }
.portfolio-dialog-controls { flex-wrap: wrap; }

@media (max-width: 900px) {
  .nav .navlinks { display: none; }
  .nav .mobile-menu { display: block; }
  .nav { height: auto; min-height: 68px; padding-block: 10px; }
  .nav .logo small { font-size: .7rem; }
  .nav .wrap { gap: 12px; }
}

@media (max-width: 560px) {
  .wrap {
    width: auto;
    margin-left: max(14px, env(safe-area-inset-left));
    margin-right: max(14px, env(safe-area-inset-right));
  }
  h1 { font-size: clamp(2.3rem, 9vw, 3.2rem); line-height: 1.1; }
  h2 { font-size: clamp(1.9rem, 7.5vw, 2.6rem); line-height: 1.12; }
  .portfolio-head h2 { font-size: clamp(1.9rem, 7.5vw, 2.25rem); }
  .hero { padding-block: 48px; min-height: 0; }
  .side-card, .contact-card, .contact-info { padding: 24px; }
  .split, .contact-grid, .intro-grid { gap: 32px; }
  .mobile-cta { background: #111820; }
  .mobile-cta a {
    display: flex; align-items: center; justify-content: center;
    min-height: 54px; padding: 14px 8px calc(14px + env(safe-area-inset-bottom));
    font-size: .875rem; line-height: 1.4;
  }
  footer { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  .portfolio-dialog {
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

@media (max-height: 500px) and (max-width: 900px) {
  .nav { position: relative; }
  .service-menu-panel { max-height: calc(100dvh - 100px); }
  .hero { padding-block: 40px; min-height: 0; }
}