/* Phone-only refinements. Desktop styles and assets remain unchanged. */
@media (max-width: 600px) {
  /* Center the island, illuminated stone backsplash and tall kitchen cabinetry. */
  .hero-photo img {
    object-position: 73% center;
  }

  /* Separate the words even though the original desktop line break is hidden. */
  #faq-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .2em;
  }

  /* Remove decorative text glyphs; keep recognizable SVG contact icons. */
  .header-cta > span,
  .mobile-nav a[href="#contato"] > span,
  .button > span[aria-hidden="true"],
  .hero-secondary > span,
  .text-link > span,
  .project-open,
  .option-arrow,
  .statement-strip > div > span,
  .step-number > span,
  .contact-phone > span,
  .footer-social > span,
  .note-cross,
  .scroll-cue {
    display: none;
  }

  /* Essential controls use clean CSS lines instead of emoji-capable glyphs. */
  .faq-list summary > span {
    position: relative;
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    font-size: 0;
    transform: none;
  }

  .faq-list summary > span::before,
  .faq-list summary > span::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 6px;
    width: 12px;
    height: 1px;
    background: currentColor;
  }

  .faq-list summary > span::after {
    transform: rotate(90deg);
    transition: opacity .2s;
  }

  .faq-list details[open] summary > span {
    transform: none;
  }

  .faq-list details[open] summary > span::after {
    opacity: 0;
  }

  .back-top,
  .lightbox-close,
  .lightbox-nav {
    font-size: 0;
  }

  .back-top {
    position: relative;
  }

  .back-top::before,
  .lightbox-nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
  }

  .back-top::before {
    transform: translate(-50%, -25%) rotate(-135deg);
  }

  .lightbox-prev::before {
    transform: translate(-25%, -50%) rotate(135deg);
  }

  .lightbox-next::before {
    transform: translate(-75%, -50%) rotate(-45deg);
  }

  .lightbox-close::before,
  .lightbox-close::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 19px;
    height: 1px;
    width: 16px;
    background: currentColor;
    transform: rotate(45deg);
  }

  .lightbox-close::after {
    transform: rotate(-45deg);
  }
}