/* Phone-first finishing layer: Android, iPhone, and small tablets. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
body { min-width: 0; overflow-x: clip; }
img, video, canvas { max-width: 100%; }

@media (max-width: 768px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .site-header { padding-top: env(safe-area-inset-top); }
  .site-nav { min-height: 4.45rem; padding: 0.7rem max(0.85rem, env(safe-area-inset-right)) 0.7rem max(0.85rem, env(safe-area-inset-left)); gap: 0.55rem; }
  .site-brand { min-width: 0; gap: 0.35rem; font-size: 0.64rem; letter-spacing: 0.075em; white-space: nowrap; }
  .site-brand img { width: 2.65rem; height: 2.65rem; margin: -0.5rem; transform: scale(1.2); }
  .site-actions { gap: 0.4rem; }
  .site-actions .site-cta { padding: 0.62rem 0.7rem; font-size: 0.64rem; white-space: nowrap; }
  .site-menu { width: 2.55rem; height: 2.55rem; font-size: 1rem; }
  .site-mobile.open { max-height: calc(100dvh - 4.5rem); overflow-y: auto; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  .site-mobile a { min-height: 2.75rem; display: flex; align-items: center; }

  #home { min-height: 100svh !important; min-height: 100dvh !important; padding-top: 5rem !important; }
  #home .mx-auto { padding-top: 4.5rem !important; padding-bottom: 3.25rem !important; }
  #home h1 { font-size: clamp(2.35rem, 12.5vw, 3.45rem) !important; line-height: 1.02 !important; }
  #home .mt-9 { width: 100%; gap: 0.7rem; }
  #home .btn-primary, #home .btn-secondary { justify-content: center; min-height: 3rem; }

  .page-hero { padding: 7rem max(1rem, env(safe-area-inset-right)) 3rem max(1rem, env(safe-area-inset-left)); }
  .page-hero h1 { font-size: clamp(2.35rem, 12vw, 3.35rem); }
  .page-hero > span { font-size: 0.92rem; }
  .work-card, .portfolio-card { min-height: 16.5rem; }
  .full-gallery { column-gap: 0.7rem; }
  .gallery-photo { margin-bottom: 0.7rem; border-radius: 0.6rem; }
  .photo-viewer { padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }
  .photo-viewer img { max-height: 78dvh; }
  .photo-viewer button { top: max(0.85rem, env(safe-area-inset-top)); right: 0.85rem; }

  input, textarea, select { font-size: 16px !important; }
  input, select { min-height: 3rem; }
  textarea { min-height: 7.5rem; }
  button, .btn-primary, .btn-secondary, .site-cta, .text-button { min-height: 2.75rem; }
  .premium-form, .contact-aside { padding: 1.25rem !important; }
  .contact-aside a { min-height: 2.9rem; }
  .classic-service-grid article { min-height: 0; padding: 1.5rem 1.15rem; }
  .page-cta { align-items: stretch; padding: 1.35rem; }
  .page-cta .btn-primary { justify-content: center; }
  .footer-inner { gap: 1.7rem; padding-top: 2.4rem; }
  .footer-brand .site-brand img { width: 3rem; height: 3rem; margin: -0.65rem; }

  .admin-shell { min-height: 100dvh; padding-left: max(0.85rem, env(safe-area-inset-left)) !important; padding-right: max(0.85rem, env(safe-area-inset-right)) !important; }
  #login-panel.login-card { width: min(100%, 22.5rem); }
  .login-mark { width: 6.5rem; height: 6.5rem; }
  .admin-dashboard .admin-card { padding: 1.1rem; }
  main > section, .about-copy, .experience-copy, .contact-aside, .premium-form, .page-cta { text-align: center; }
  .about-copy > p, .experience-copy > p, .contact-aside > p { margin-left: auto; margin-right: auto; }
  .contact-aside a, .contact-link { text-align: left; }
  .premium-form label { text-align: left; }
  .premium-form button, .page-cta .btn-primary { margin-left: auto; margin-right: auto; }
}

@media (max-width: 390px) {
  .site-brand { font-size: 0.57rem; letter-spacing: 0.05em; }
  .site-brand img { width: 2.3rem; height: 2.3rem; }
  .site-actions .site-cta { padding: 0.58rem 0.55rem; font-size: 0.58rem; }
  .site-menu { width: 2.35rem; height: 2.35rem; }
  #home h1 { font-size: clamp(2.15rem, 11.5vw, 2.85rem) !important; }
}