/* Mobile typography and spacing; desktop styles apply at 768px and above. */
@media (max-width: 767px) {
  body section { line-break: strict; }
  body section p { text-wrap: pretty; }
  body section .text-lg,
  body section .text-xl { font-size: 1rem; line-height: 1.8; }
  body section .text-2xl { font-size: 1.25rem; line-height: 1.5; }
  body section .text-3xl,
  body section .text-4xl { font-size: 1.5rem; line-height: 1.5; }
  body section .text-5xl { font-size: clamp(1.75rem, 7.5vw, 2.25rem); line-height: 1.5; }
  body section h2.flex { flex-wrap: wrap; gap: .5rem 1rem; }
  body section h2,
  body section h3 { word-break: normal; }
  .mobile-phrase { display: inline-block; }

  body section.py-32 { padding-top: 6rem; padding-bottom: 6rem; }
  body section.py-24 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  body #recruit-intro { padding-bottom: 2.25rem; }
  body #recruit-philosophy { padding-top: 2.25rem; }
  body section .gap-20 { gap: 4rem; }
  body section .mb-20 { margin-bottom: 3rem; }
  body section .mt-24 { margin-top: 4.5rem; }

  body #home { min-height: auto; padding-top: 3rem; padding-bottom: 5rem; }
  body #home .hero-catchphrase { height: min(53vh, 527px); max-width: 85%; }
  body #home p { letter-spacing: .04em; }
  body section .px-12 { padding-left: 1.5rem; padding-right: 1.5rem; }
  body section .p-8,
  body section .p-10 { padding: 1.5rem; }
  body #concept .owner-caption { left: 1rem; right: 1rem; bottom: 1.5rem; }
  body #concept .owner-caption > p:first-child { font-size: 1.75rem; }
  body #concept .concept-feature { padding: 1rem; gap: .75rem; }
  body #concept .concept-feature span { font-size: 1rem; line-height: 1.7; }
  body .awards-grid { gap: .75rem; }
  body .awards-grid .p-6 { padding: 1rem .75rem; }
  body #shop .w-32.shrink-0 { width: 5rem; }
  body .salary-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  body .salary-grid > div { padding: 1rem 1.5rem; }
}