/* Phone layout, November 11, 2026. Presentation only: the navigation markup is unchanged.
   1. Phone header in two rows: the firm name on one line, then the call button and the menu button.
      Its height is 80px (81px on pages whose header has a hairline border), so page tops can clear it.
   2. Page tops that had been set for the earlier, taller phone header.
   3. The courtroom band uses the phone-size photograph on phones. */

@media (max-width: 639.98px) {
  body > header.bg-gray-900.text-white.w-full > nav {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    column-gap: 0.5rem;
    padding: 0.5rem 1rem !important;
  }

  body > header.bg-gray-900.text-white.w-full > nav > a:first-child {
    flex: 0 0 100%;
    font-size: min(4.5vw, 1.125rem) !important;
    line-height: 1.25rem !important;
  }

  body > header.bg-gray-900.text-white.w-full > nav > div:last-child {
    flex: 0 0 100%;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.5rem;
  }

  body
    > header.bg-gray-900.text-white.w-full
    > nav
    > div:last-child
    > a[href^="tel:"] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  /* Page tops. */
  body.site-refinement main,
  body.site-refinement .stories-main {
    margin-top: 80px;
  }

  body.contact-page .contact-main {
    padding-top: 80px;
  }

  .hero .hero__layout {
    padding-top: 6rem;
  }

  main > section.page-hero.py-20:first-child,
  main > article > section.py-8:first-child {
    padding-top: 6rem;
  }
}

@media (max-width: 768px) {
  section.relative.bg-gray-900[style*="hero-courtroom-fresno.jpg"] {
    background-image:
      linear-gradient(rgba(17, 24, 39, 0.8), rgba(17, 24, 39, 0.9)),
      url("/images/hero-courtroom-fresno-mobile.jpg") !important;
  }
}