/* Layout only. Existing copy, palette, images, inputs and event handlers stay intact. */
@media (max-width: 767px) {
  /* Bring the first action and the next section closer without changing their order. */
  .brand-hero.intro-refined .brand-hero-poster { min-height: 480px; }
  .intro-refined .intro-hero-copy { padding-block: 40px; }
  .intro-refined { --intro-section-space: 40px; }
  .brand-hero.intro-refined .brand-hero-quote-entry,
  .brand-hero.intro-refined .hero-main-quote-btn,
  .intro-refined .approved-price-contact .hero-main-quote-btn { width: 100%; }

  /* Recover space lost to nested gutters; keep all guidance and options visible. */
  #quoteModal.quote-steps-enhanced .quote-modal-dialog {
    padding: calc(12px + env(safe-area-inset-top, 0px))
      calc(12px + env(safe-area-inset-right, 0px))
      calc(24px + env(safe-area-inset-bottom, 0px))
      calc(12px + env(safe-area-inset-left, 0px));
    scroll-padding-top: calc(100px + env(safe-area-inset-top, 0px));
  }
  #quoteModal.quote-steps-enhanced .quote-step-panel { padding: 16px 12px; }
  #quoteModal.quote-steps-enhanced .quote-steps-progress { padding: 12px; }
  #quoteModal .choice { min-height: 44px; }
  #quoteModal #py { min-height: 44px; margin-block: 0; }

  /* A persistent close target, using the existing dialog header and handler. */
  #quoteModal.quote-steps-enhanced .quote-modal-top {
    position: sticky;
    top: calc(-12px - env(safe-area-inset-top, 0px));
    z-index: 4;
    margin: calc(-12px - env(safe-area-inset-top, 0px))
      calc(-12px - env(safe-area-inset-right, 0px)) 12px
      calc(-12px - env(safe-area-inset-left, 0px));
    padding: calc(12px + env(safe-area-inset-top, 0px))
      calc(12px + env(safe-area-inset-right, 0px)) 12px
      calc(12px + env(safe-area-inset-left, 0px));
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
  }
}