/* iPhone and touch layouts, including landscape safe areas. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.section-pad,
.header,
.mobile-nav {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.footer {
  padding-bottom: max(30px, env(safe-area-inset-bottom));
}
.contact-action { color-scheme: light; }
#project-type {
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;
  height: 48px;
  min-height: 48px;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23141414' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px;
}

@media (pointer: coarse), (max-width: 760px) {
  .menu-toggle { flex: 0 0 44px; width: 44px; height: 44px; padding-inline: 7px; }
  .header-cta { min-height: 44px; white-space: nowrap; }
  .work-filters button,
  .motion-toggle,
  .clients-motion-toggle,
  .method-nav button,
  .dialog-close,
  .dialog-image-controls > button { min-width: 44px; min-height: 44px; }
  .method-nav button,
  .dialog-close,
  .dialog-image-controls > button { width: 44px; height: 44px; }
  .clients-motion-toggle { justify-content: center; }
  .text-link { min-height: 44px; align-items: center; }
  .service-item summary { touch-action: manipulation; }
  .project-dialog { overscroll-behavior: contain; }
}

@media (max-width: 760px) {
  .header { height: calc(76px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .hero { padding-top: calc(101px + env(safe-area-inset-top)); }
  .mobile-nav { top: calc(76px + env(safe-area-inset-top)); padding-bottom: max(28px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 76px - env(safe-area-inset-top)); overflow-y: auto; }
  .header-cta { margin-right: 10px; }
  .dialog-close { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
  .dialog-copy { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .service-content .text-link { min-width: 0; flex-wrap: wrap; }
  .orbit-bottom .text-link { flex-shrink: 0; }
}

@media (max-width: 360px) {
  .header .wordmark { font-size: 22px; }
  .header .brand-symbol { width: 22px; height: 22px; }
  .header-cta { font-size: 9px; padding-inline: 8px; gap: 5px; margin-right: 6px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .mobile-nav { max-height: calc(100dvh - 76px); }
  .project-dialog { max-height: 94dvh; }
}