/* The Audio Box — phone refinements (≤640px). Desktop is untouched. */
@media (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* ── WhatsApp button: smaller, out of the way, never hides the footer text ── */
  a[aria-label^="Message The Audio Box"] {
    width: 46px !important; height: 46px !important; padding: 0 !important; justify-content: center !important;
    right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; opacity: .94;
  }
  a[aria-label^="Message The Audio Box"] { transition: opacity .25s, transform .25s !important; }
  html[data-scrolling] a[aria-label^="Message The Audio Box"] { opacity: .22 !important; transform: scale(.85); }
  html[data-ab-page="contact"] a[aria-label^="Message The Audio Box"] { display: none !important; }
  a[aria-label^="Message The Audio Box"] svg { width: 24px !important; height: 24px !important; }
  footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }

  /* ── small decorations pinned inside cards collide with titles on a narrow screen ── */
  [data-m~="deco"] { display: none !important; }
  #mix-time { white-space: nowrap; }

  /* ── readable, calmer labels ── */
  [data-m~="mono"] { letter-spacing: .13em !important; }
  [data-m~="tiny"] { font-size: 12px !important; line-height: 1.35 !important; }

  /* ── tighter rhythm ── */
  [data-m~="sec"] { padding-top: 46px !important; padding-bottom: 46px !important; }
  [data-m~="card"] { padding: 20px 18px !important; min-height: 0 !important; border-radius: 16px !important; }

  /* ── home hero: no collisions, less furniture ── */
  #top { min-height: 0 !important; }
  #top > div:nth-child(7) { height: 74px !important; padding-bottom: 10px !important; }               /* top letterbox sits under the menu bar */
  #top > div:nth-child(7) span:first-child { display: none !important; }
  #top > div:nth-child(8) { padding: 26px 20px 34px !important; }
  #top > div:nth-child(8) > span[aria-hidden="true"] { display: none !important; }                  /* viewfinder corners */
  #top div:has(> #tab-hero-vid) { margin: 0 0 14px !important; }
  #top h1 { margin-top: 4px !important; }
  #top > div:nth-child(9) { display: none !important; }                                              /* bottom ticker (hidden under the button anyway) */
  #top p { margin-top: 16px !important; }
  #top > div:nth-child(8) > div:last-of-type { margin-top: 26px !important; }

  /* ── Toolkit card on the home page: picture above the words, not under them ── */
  #toolkit { justify-content: flex-start !important; }
  #toolkit > img {
    position: relative !important; right: auto !important; top: auto !important; transform: none !important;
    width: 100% !important; margin: 0 0 18px !important; order: -1; opacity: 1 !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }

  /* ── footer: one slim bar — logo, social icons, a few links, copyright ── */
  html body footer { padding: 26px 20px calc(70px + env(safe-area-inset-bottom)) !important; }
  html body footer > div:first-child { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 16px 14px !important; margin: 0 auto !important; }
  html body footer > div:first-child > div:nth-child(2),
  html body footer > div:first-child > div:nth-child(3) { display: none !important; }            /* Studio / Academy / Acoustics / Toolkit lists: the menu has them */
  html body footer > div:first-child > div:first-child { flex: 1 1 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
  html body footer > div:first-child > div:first-child > p { display: none !important; }
  html body footer > div:first-child > div:first-child > img { margin: 0 !important; height: 30px !important; }
  html body footer > div:first-child > div:first-child > div a { width: 34px !important; height: 34px !important; font-size: 11px !important; }
  html body footer > div:first-child > div:first-child > div { gap: 8px !important; }
  html body footer > div:first-child > div:last-child { flex: 1 1 100% !important; min-width: 0 !important; }
  html body footer > div:first-child > div:last-child > div:first-child { display: none !important; }   /* "COMPANY" title */
  html body footer > div:first-child > div:last-child > div:last-child { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px 18px !important; }
  html body footer a { font-size: 13.5px !important; }
  html body footer > div:last-child { margin-top: 18px !important; padding-top: 14px !important; gap: 6px !important; }
  html body footer > div:last-child > span:last-child { display: none !important; }                    /* tagline line */

  /* ── section tabs (Overview · Services · Portfolio …) pinned under the menu bar ── */
  html body nav .nav-sub {
    display: flex !important; flex-wrap: nowrap !important; justify-content: stretch !important; align-items: stretch !important;
    gap: 6px !important; padding: 8px 12px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    background: rgba(12,12,15,.96) !important;
  }
  html body nav .nav-sub::-webkit-scrollbar { display: none; }
  html body nav .nav-sub a {
    flex: 1 1 0 !important; min-width: max-content; text-align: center !important; padding: 10px 12px !important;
    font-size: 13.5px !important; border-radius: 12px !important; white-space: nowrap;
  }

  /* ── small decorations pinned inside cards collide with titles on a narrow screen ── */
  [data-m~="deco"] { display: none !important; }
  #mix-time { white-space: nowrap; }

  /* ── readable, calmer labels ── */
  [data-m~="mono"] { letter-spacing: .13em !important; }
  [data-m~="tiny"] { font-size: 12px !important; line-height: 1.35 !important; }

  /* ── tighter rhythm ── */
  [data-m~="sec"] { padding-top: 46px !important; padding-bottom: 46px !important; }
  [data-m~="card"] { padding: 20px 18px !important; min-height: 0 !important; border-radius: 16px !important; }

  /* ── home hero: no collisions, less furniture ── */
  #top { min-height: 0 !important; }
  #top > div:nth-child(7) { height: 74px !important; padding-bottom: 10px !important; }               /* top letterbox sits under the menu bar */
  #top > div:nth-child(7) span:first-child { display: none !important; }
  #top > div:nth-child(8) { padding: 26px 20px 34px !important; }
  #top > div:nth-child(8) > span[aria-hidden="true"] { display: none !important; }                  /* viewfinder corners */
  #top div:has(> #tab-hero-vid) { margin: 0 0 14px !important; }
  #top h1 { margin-top: 4px !important; }
  #top > div:nth-child(9) { display: none !important; }                                              /* bottom ticker (hidden under the button anyway) */
  #top p { margin-top: 16px !important; }
  #top > div:nth-child(8) > div:last-of-type { margin-top: 26px !important; }

  /* ── Toolkit card on the home page: picture above the words, not under them ── */
  #toolkit { justify-content: flex-start !important; }
  #toolkit > img {
    position: relative !important; right: auto !important; top: auto !important; transform: none !important;
    width: 100% !important; margin: 0 0 18px !important; order: -1; opacity: 1 !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }

  /* ── footers: two tidy columns instead of one endless list ── */
  html body footer > div:first-child, html body #tab-foot { grid-template-columns: 1fr 1fr !important; gap: 30px 18px !important; }
  html body footer > div:first-child > div:first-child, html body #tab-foot > div:first-child { grid-column: 1 / -1 !important; }
  footer a, #tab-foot a { font-size: 14px !important; }

  /* ── long stacks: first few cards, button for the rest ── */
  :not([data-mopen]) > [data-m~="more"] { display: none !important; }
  .m-more-btn {
    display: block; width: 100%; margin: 14px 0 0; padding: 15px 18px; border-radius: 100px; cursor: pointer;
    font: 700 14px 'Manrope', sans-serif; color: #fff; background: rgba(200,16,46,.16); border: 1px solid rgba(200,16,46,.5);
  }

  /* ── empty photo frames stay compact until a photo is added ── */
  [data-mframe] { height: 150px !important; min-height: 0 !important; aspect-ratio: auto !important; }

  /* ── Studio film card: picture first, only the essentials on top of it ── */
  .m-film-stage { aspect-ratio: 3 / 2 !important; }
  .m-film-eyebrow, .m-film-chips, .m-film-press { display: none !important; }

  /* ── portfolio: two columns, like a video app, instead of 19 full-width cards ── */
  .m-pf-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .m-pf-grid > * { min-width: 0; }
  .m-pf-grid [data-m~="tiny"], .m-pf-grid [data-m~="mono"] { letter-spacing: .06em !important; }

  html[data-has-sub] #dc-root { padding-top: var(--ab-sub-h, 56px); }
}

/* ── home intro: on a phone the hero appears at once instead of building up over two seconds ── */
#top, #top * { animation-delay: .08s !important; }