/* Phone-first refinements: comfortable reading, touch targets, and fluid layouts. */
@media (max-width: 800px) {
  .site-header, .page-header { padding-inline: 5%; }
  .menu-toggle { min-width: 48px; min-height: 48px; align-items: center; border-radius: 12px; }
  .mobile-nav:not([hidden]) { max-height: calc(100dvh - 86px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-nav a { min-height: 48px; display: flex; align-items: center; }
  .mobile-menu summary { min-height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: flex-end; }
  .mobile-menu nav { width: min(280px, calc(100vw - 10vw)); max-height: calc(100dvh - 100px); overflow-y: auto; gap: 0; padding: 10px 18px; }
  .mobile-menu nav a { min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
  .mobile-menu nav a:last-child { border-bottom: 0; }
  .hero-bottom p, .intro-copy p, .services-heading > p, .process-top > p, .contact-copy { max-width: 42ch; }
  .service-copy li { padding: 0; }
  .service-copy li a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; }
  .detail-page-link { display: inline-flex; align-items: center; min-height: 44px; }
  .intake-field input, .intake-field textarea, .intake-fallback textarea { font-size: 16px; }
  .intake-checks label { min-height: 44px; align-items: center; }
  .intake-submit, .contact-button, .pill, .outline-button { min-height: 48px; }
  .contact-details a, .closing-bottom a { overflow-wrap: anywhere; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 14px 22px; }
  .motion-control { min-height: 44px; width: fit-content; }
}
@media (max-width: 520px) {
  .hero { padding-inline: 6%; padding-bottom: 42px; }
  .hero h1 { font-size: clamp(45px, 12.5vw, 66px); line-height: 1; letter-spacing: -.05em; }
  .hero-art { min-height: 0; aspect-ratio: 1.32; margin-bottom: 26px; }
  .hero-bottom { gap: 18px; padding-top: 22px; }
  .round-link { gap: 14px; min-height: 48px; }
  .section-pad { padding: 65px 6% 72px; }
  .intro h2, .services h2, .process h2, .statement h2 { font-size: clamp(38px, 10.4vw, 53px); line-height: 1.06; }
  .intro-grid { margin-top: 44px; }
  .intro-copy { gap: 20px; }
  .services-heading, .process-top { margin: 48px 0 38px; }
  .service-row { grid-template-columns: 30px minmax(0,1fr) auto; padding: 22px 18px; gap: 10px; }
  .service-title h3 { font-size: clamp(42px, 11.2vw, 58px); }
  .service-copy ul { gap: 8px; }
  .service-copy li { max-width: 100%; }
  .statement { padding-inline: 6%; }
  .statement-inner { min-height: 345px; padding: 25px; }
  .statement h2 { margin: 60px 0; }
  .process-grid { gap: 14px; }
  .process-grid article { padding: 22px; }
  .process-grid h3 { margin-top: 24px; }
  .contact { padding-inline: 6%; }
  .contact h2 { font-size: clamp(52px, 13.5vw, 72px); line-height: 1; }
  .contact-main { padding: 58px 0; }
  .intake-wrap { padding: 48px 0 60px; }
  .intake-intro h3 { font-size: clamp(34px, 9vw, 46px); line-height: 1.08; }
  .intake-form { padding: 24px 18px; }
  .intake-field { margin-bottom: 20px; }
  .intake-checks { gap: 2px; }
  .intake-submit { width: 100%; }
  .contact-details { gap: 22px; }
  footer { gap: 16px; padding-block: 28px; }
  .service-hero { min-height: 0; padding: 112px 6% 30px; }
  .service-hero h1 { font-size: clamp(40px, 11vw, 60px); line-height: 1.05; overflow-wrap: normal; hyphens: auto; }
  .breadcrumbs { margin-bottom: 38px; line-height: 1.6; }
  .hero-copy { font-size: 16px; }
  .hero-actions { gap: 12px 20px; margin-top: 26px; }
  .hero-caption { position: relative; left: auto; right: auto; bottom: auto; margin-top: 54px; }
  .service-detail, .more-services, .approach, .closing, .sample-reviews { padding: 64px 6%; }
  .detail-heading, .more-heading, .sample-heading { margin: 44px 0 32px; }
  .detail-heading h2, .approach h2, .more-heading h2, .closing h2, .sample-heading h2 { font-size: clamp(38px, 10vw, 52px); line-height: 1.08; }
  .approach-layout { margin-top: 50px; }
  .orbit-card { padding: 24px; }
  .more-links a { gap: 10px 14px; padding: 20px 0; }
  .more-links a strong { font-size: clamp(20px, 5.6vw, 25px); line-height: 1.2; }
  .closing-bottom { margin-top: 36px; }
}