/* Step 1: mobile header and hero only. Load after the existing styles.
   Existing dress photo is a temporary preview choice, pending owner selection. */
@media (max-width: 900px) {
  .nav { height: 64px; padding: 0 20px; background: #f8f5ef; color: #24211e; opacity: 1; pointer-events: auto; }
  .nav .logo { font-size: clamp(22px, 6vw, 29px); white-space: nowrap; }
  .nav .hamb { flex: 0 0 44px; min-height: 44px; padding: 0; }
  .mobile { overflow-y: auto; }
  .hero { width: 100%; height: auto; min-height: 100svh; padding: 64px 0 0; background: linear-gradient(180deg, #0003, #0009), url('assets/dress-roenne.jpg') 50% center / cover no-repeat; grid-template-columns: minmax(0, 1fr); }
  .hero > div:first-child { width: 100%; min-width: 0; padding: 72px 20px 60px; }
  .hero .kicker { max-width: 32em; margin: 0 auto; font-size: 10px; line-height: 1.8; letter-spacing: .12em; overflow-wrap: anywhere; }
  .hero h1 { font-size: clamp(32px, 10vw, 68px); line-height: 1.2; letter-spacing: .025em; margin: 22px 0 18px; white-space: nowrap; }
  .hero p { font-size: clamp(15px, 4vw, 18px); line-height: 1.8; word-break: keep-all; overflow-wrap: break-word; }
  .hero .actions { width: 100% !important; max-width: 320px; margin: 28px auto 0 !important; padding: 0; gap: 12px; transform: none; }
  .hero .actions .btn { display: flex !important; align-items: center; justify-content: center; min-height: 48px; height: auto; width: 100%; padding: 13px 16px !important; border: 1px solid #ffffffb3 !important; color: #fff !important; background: #0003 !important; }
  .hero .actions .btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; }
  .hero .actions .btn.light { color: #24211e !important; background: #f8f5ef !important; border-color: #f8f5ef; }
  .hero .film, .hero .scroll { display: none; }
  #consult, #dresses, #branches { scroll-margin-top: 80px; }
}