/* Mobile layout repairs. Desktop styles and live-preview scaling stay intact.
   Load after all page styles; use component classes, not element-tag assumptions. */
/* One mobile column: override the legacy first/last-child stagger rules. */
@media (max-width: 767px) {
  #scroll-top #services > .mm-home-wrap > :is(.mm-services-feature-grid,.mm-services-compact-grid) {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    justify-items: stretch !important;
  }
  #scroll-top #services > .mm-home-wrap > .mm-services-compact-grid {
    margin-top: 16px !important;
  }
  #scroll-top #services :is(.mm-home-feature-card,.mm-home-small-service) {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 991px) {
  #work .mm-home-portfolio-card {
    grid-column: auto !important;
    min-width: 0;
    width: 100%;
    min-height: 250px !important;
  }
  #work .mm-home-portfolio-card:first-child { grid-column: 1 / -1 !important; }
  .mm-home-nav-links, .mm-nav-links {
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 767px) {
  /* Allow grid/flex children to shrink rather than widen their parent. */
  :is(.mm-hero-grid,.mm-two-col,.mm-contact-grid,.mm-feature-grid,
      .mm-portfolio-grid,.mm-video-client-grid,.wd-hero,.wd-service-grid,
      .wd-form-grid,.gd-service-grid,.gd-form-grid,.gd-step-grid,
      .vp-expertise-grid,.vp-enquiry-grid,.ap-story,.ap-console-face) > * {
    min-width: 0;
    max-width: 100%;
  }
  :is(.wd,.gd,.ap,.vp) :is(h1,h2,h3,p,a,button,label,summary) {
    overflow-wrap: break-word;
  }
  :is(.wd,.gd,.ap,.vp) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea),
  .mm-form-card :is(input,select,textarea), #contact :is(input,select,textarea) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
  }
  :is(.wd-button,.gd-button,.ap-pill,.vp-button) {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    min-height: 48px;
  }
  .mm-home-portfolio-card:focus-visible { outline: 3px solid var(--mm-lime); outline-offset: 4px; }
  .mm-service-chrome .mm-sc-header-inner { gap: 8px; }
  .mm-service-chrome .mm-sc-header-actions { min-width: 0; }
  .mm-service-chrome .mm-sc-footer-row nav { flex-wrap: wrap; gap: 8px 20px; }
  .mm-service-chrome .mm-sc-footer-label { overflow-wrap: anywhere; }
  .mm-service-chrome .mm-sc-menu-panel a { min-height: 44px; }
  .mm-contact-options a { gap: 12px; overflow-wrap: anywhere; }
  .mm-contact-options a svg { flex-shrink: 0; }
  .mm-footer-top > div:last-child { grid-column: auto; }

  /* The generic #scroll-top image reset must not collapse framed media. */
  #scroll-top :is(.mm-video-project-visual,.mm-video-featured-card,
      .mm-portfolio-preview--collection,.mm-portfolio-preview--video,
      .gd-project-art,.gdp-card-art,.ap-studio-image,.ap-space-images .ap-photo,
      .vp-media,.vp-bts,.vp-edit-visual) > :is(img,video) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #scroll-top .mm-portfolio-preview--collection img,
  #scroll-top .mm-portfolio-preview--video img { height: 100%; object-fit: cover; }
  .mm-portfolio-toolbar { align-items: stretch; flex-wrap: wrap; }
  .mm-portfolio-filters { width: 100%; max-width: 100%; min-width: 0; margin: 0; }
  .mm-portfolio-service-tag { align-self: flex-start; max-width: 100%; white-space: normal; }
  .mm-portfolio-card-copy h2 { overflow-wrap: anywhere; }
  .mm-video-modal-backdrop,.mm-portfolio-modal-backdrop { padding: 12px; }
  .mm-video-modal,.mm-portfolio-modal { max-width: 100%; max-height: 90dvh; overflow-y: auto; }
  .mm-portfolio-gallery-controls { flex-wrap: wrap; gap: 10px; }

  /* Content-led hero heights: longer mobile copy must remain in normal flow. */
  .mm-home-nav + section#top,
  .mm-home-nav + section#top > .mm-home-wrap:first-of-type { min-height: 0; }
  .vp .vp-hero { min-height: 0; height: auto; }
  .vp .vp-hero-content {
    position: relative; inset: auto;
    padding: 128px var(--gutter) 40px;
  }
  .vp .vp-hero-bottom { position: relative; inset: auto; padding: 0 var(--gutter) 28px; }
  .vp-introduction,.vp-expertise-grid { grid-template-columns: minmax(0,1fr); }
  .vp-edit-visual { position: relative; top: auto; min-height: 0; height: 310px; }
  .vp .vp-hero h1 { font-size: clamp(30px,7.8vw,48px); line-height: 1.1; }
  .gd-section-heading { flex-wrap: wrap; align-items: flex-start; }
  .gd .gd-contact h2,.gdp h1 { font-size: clamp(32px,8vw,48px); }
  .wd-form-grid { grid-template-columns: minmax(0,1fr); }
  .wd-form-grid > label { grid-column: 1 / -1; }
  .wd .wd-button { font-size: 14px; }
  .wd-section-head,.ap-inside-heading { flex-wrap: wrap; }
  .wd-note { white-space: normal; }
  .wd-service-grid,.gd-service-grid { grid-template-columns: minmax(0,1fr); }
  .gd-service-grid article { min-height: 0; }
  .gd-step-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .ap-tones { flex-wrap: wrap; }
  .ap-voice-row { grid-template-columns: minmax(68px,.8fr) 44px minmax(0,1fr); gap: 12px; }
  .ap-demo-strip { grid-template-columns: minmax(0,1fr); gap: 0; }
  .ap-demo-strip > div { padding: 16px 0; border-right: 0; border-bottom: 1px solid #ffffff26; }
  .ap-demo-strip > div:last-child { border-bottom: 0; }
  .ap-demo-strip .ap-wave { display: block; flex: 1; min-width: 0; max-width: 130px; }
  .gdp-toolbar,.gdp-search,.gdp-results-bar { min-width: 0; }
  .gdp-filters button { min-width: 0; white-space: normal; }
  #scroll-top .gdp-image img { height: 100%; object-fit: contain; }
}

@media (max-width: 599px) {
  #work .mm-home-portfolio-card,
  #work .mm-home-portfolio-card:first-child { grid-column: 1 / -1 !important; min-height: 230px !important; padding: 22px !important; }
  #work .mm-home-portfolio-card > div:last-child > div { gap: 12px; }
  #work .mm-home-portfolio-card > div:last-child > div > div { min-width: 0; }
  #work .mm-home-portfolio-card > div:last-child > div > span { flex-shrink: 0; }
  #work .mm-home-portfolio-card > div:last-child > div > div > div:first-child {
    font-size: clamp(24px,6.5vw,30px) !important; line-height: 1.15;
  }
  #scroll-top .mm-home-nav + section#top > .mm-hero-layout {
    padding-top: 36px !important; padding-bottom: 40px !important;
  }
  #scroll-top .mm-home-nav + section#top h1 { font-size: clamp(30px,8.5vw,42px) !important; }
  .mm-home-footer .mm-home-wrap > div:first-child { grid-template-columns: minmax(0,1fr) !important; }
  .mm-home-footer .mm-home-wrap > div:first-child > div { grid-column: auto !important; }
  .mm-cta { padding-block: 48px; }
  .mm-cta h2 { font-size: clamp(30px,8vw,42px); line-height: 1.12; }
  .mm-portfolio-section .mm-cta > .mm-wrap { width: calc(100% - 32px) !important; }
  .mm-service-dropdown-menu { max-height: min(300px,50dvh); overflow-y: auto; }
  .wd { --wd-pad: 16px; }
  .gd { --gd-pad: 16px; }
  .ap { --pad: 16px; }
  .vp { --gutter: 16px; }
  .wd h1,.gd .gd-hero h1,.ap .ap-hero h1 { font-size: clamp(30px,8.5vw,42px); line-height: 1.12; }
  .wd :is(.wd-actions,.wd-hero .wd-actions),
  .gd-hero .gd-actions,.gd-contact .gd-actions,
  .ap-hero > .ap-actions,.ap-final .ap-actions,.vp-hero-actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  }
  .ap-final .ap-actions .ap-pill { min-width: 0; width: 100%; }
  .wd-process ol { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .wd-benefits { grid-template-columns: minmax(0,1fr); }
  .gd-enquiry { padding: 20px 16px; }
  .gd-service-grid article { padding: 24px 20px; }
  .vp-field { grid-template-columns: minmax(0,1fr); }
  .vp .vp-submit { margin-left: 0; width: 100%; }
  .vp .vp-form-note { margin-left: 0 !important; }
  .mm-service-chrome .mm-sc-footer-row { align-items: flex-start; }
  .mm-service-chrome .mm-sc-footer-label { width: 100%; max-width: none; text-align: left; }
  .mm-service-chrome .mm-sc-cta { max-width: 155px; white-space: normal; text-align: center; line-height: 1.3; }
  .mm-service-chrome .mm-sc-logo { flex-shrink: 0; }
  .mm-video-featured-grid { height: auto; grid-template-columns: minmax(0,1fr); grid-template-rows: none; }
  .mm-video-featured-card { aspect-ratio: 16 / 10; }
  .mm-video-featured-card--1 { grid-row: auto; }
  .mm-video-showcase-intro h1,.mm-graphic-showcase-intro h1 { font-size: clamp(30px,8.5vw,42px); line-height: 1.12; }
  .mm-graphic-overview { grid-template-columns: minmax(0,1fr); grid-template-rows: none; height: auto; }
  .mm-graphic-overview-item { aspect-ratio: 4 / 3; }
  .mm-graphic-overview-item--1 { grid-row: auto; }
}

@media (max-width: 480px) {
  /* Keep MIDI controls usable instead of squeezing three banks into a phone. */
  .ap-console-face { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .ap-master { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 260px; margin-inline: auto; }
  .ap-master > .ap-hardware-label { max-width: none; min-height: 0; }
  .ap .ap-jog { width: 120px; }
  .ap-transport { flex-direction: row; justify-content: center; }
  .ap-transport button { flex: 1; min-width: 0; }
  .ap-pad-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ap-mobile-controls > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ap .ap-note-pad { min-height: 48px; }
  .ap-voice-row h3 { font-size: 17px; }
  .gdp-filters { grid-template-columns: minmax(0,1fr); }
}

/* Phone composition: content-led stacks, one shared gutter, comfortable controls. */
@media (max-width: 767px) {
  :root { --mm-shell-pad: 20px; --mm-section-space: 56px; }
  #scroll-top .mm-home-wrap, #scroll-top #services > .mm-home-wrap {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    margin-inline: auto !important; padding-inline: 20px !important;
  }
  #scroll-top .mm-wrap { width: calc(100% - 40px) !important; margin-inline: auto !important; }
  #scroll-top :is(.wd,.gd,.ap,.vp) { --wd-pad: 20px; --gd-pad: 20px; --pad: 20px; --gutter: 20px; }
  #scroll-top .mm-service-chrome .mm-sc-container { padding-inline: 20px; }
  #scroll-top .mm-home-nav + section#top > .mm-hero-layout {
    grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; padding-block: 40px !important;
  }
  #scroll-top .mm-home-nav + section#top h1 { font-size: clamp(32px,7.8vw,46px) !important; line-height: 1.12 !important; }
  #scroll-top #top h1 + p { font-size: 16px !important; line-height: 1.65 !important; text-align: left !important; }
  #scroll-top #top > .mm-hero-layout > div:last-child > div { width: 100% !important; max-width: 540px; }
  #scroll-top #services > .mm-home-wrap > .mm-services-intro { display: block; }
  #scroll-top :is(#services,#work,#why,#process,.mm-home-testimonials,#clients) { padding-block: 56px !important; }
  #scroll-top :is(.mm-home-grid,.mm-hero-grid,.mm-two-col,.mm-contact-grid,.mm-case-body),
  #scroll-top #why > .mm-home-wrap, #scroll-top #faq > .mm-home-wrap,
  #scroll-top #contact > .mm-home-wrap > div > div { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  #scroll-top :is(.mm-portfolio-grid,.mm-work-grid,.mm-post-grid,.mm-value-grid,.mm-team-grid,
      .mm-mini-grid,.mm-services-page-grid,.mm-process-grid,.mm-video-client-grid,.gdp-grid),
  #scroll-top #work > .mm-home-wrap > div:nth-child(2),
  #scroll-top #process .mm-home-wrap > div:nth-child(2),
  #scroll-top .mm-home-testimonials .mm-home-wrap > div:nth-child(2) {
    grid-template-columns: minmax(0,1fr) !important; gap: 16px !important;
  }
  #scroll-top #work .mm-home-portfolio-card { grid-column: 1 / -1 !important; min-height: 240px !important; padding: 24px !important; }
  #scroll-top .mm-home-testimonials .mm-home-wrap > div:nth-child(2) > div { grid-column: auto !important; }
  #scroll-top #services .mm-home-feature-card { padding: 24px !important; }
  #scroll-top #services .mm-home-feature-card > div:nth-child(2) > div:nth-of-type(1) { grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; }
  #scroll-top #services .mm-home-feature-card h3 { font-size: 25px !important; line-height: 1.2; }
  #scroll-top #services :is(.mm-home-feature-card,.mm-home-small-service) p { font-size: 16px !important; line-height: 1.6 !important; }
  #scroll-top #services .mm-home-small-service { padding: 24px !important; gap: 16px !important; }
  #scroll-top :is(.mm-page-hero,.mm-section-pad) { padding-block: 48px !important; }
  #scroll-top :is(.mm-home-grid,.mm-page-hero) h1 { font-size: clamp(32px,7.8vw,46px) !important; line-height: 1.12 !important; }
  #scroll-top :is(.mm-section-head,.mm-portfolio-service-head) { flex-direction: column; align-items: flex-start; gap: 16px; }
  #scroll-top .mm-portfolio-grid > .mm-portfolio-card--collection:only-child { display: flex; grid-column: auto; }
  #scroll-top .mm-portfolio-card-copy h2 { font-size: clamp(23px,5.8vw,30px); line-height: 1.2; overflow-wrap: break-word; }
  #scroll-top .mm-video-featured-grid, #scroll-top .mm-graphic-overview {
    grid-template-columns: minmax(0,1fr); grid-template-rows: none; height: auto; gap: 16px;
  }
  #scroll-top :is(.mm-video-featured-card,.mm-graphic-overview-item) { grid-row: auto; aspect-ratio: 16 / 11; }
  #scroll-top :is(.mm-home-footer .mm-home-wrap > div:first-child,.mm-footer-top) { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  #scroll-top :is(.mm-home-footer .mm-home-wrap > div:first-child,.mm-footer-top) > div { grid-column: auto !important; }
  #scroll-top :is(.mm-home-footer .mm-home-wrap > div:last-child,.mm-footer-bottom) { flex-direction: column !important; align-items: flex-start !important; gap: 16px; }
  #scroll-top :is(.mm-home-footer,.mm-footer) a { min-height: 44px; display: inline-flex; align-items: center; }
  #scroll-top :is(.mm-form-pair,.mm-contact-form-grid,.wd-form-grid,.gd-form-grid) { grid-template-columns: minmax(0,1fr) !important; gap: 18px; }
  #scroll-top #contact > .mm-home-wrap > div { padding: 28px 20px !important; }
  #scroll-top #contact > .mm-home-wrap > div > div > div:last-child { padding: 20px 16px !important; }
  #scroll-top .mm-cta h2 { font-size: clamp(30px,7.5vw,42px) !important; }
  #scroll-top .mm-service-chrome .mm-sc-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

  #scroll-top :is(.wd-hero,.gd-hero,.wd-work-chapters,.wd-performance,.wd-contact,.wd-faq-grid,
      .wd-scope,.wd-locations,.gd-story,.gd-reason,.ap-story,.ap-voice,.ap-faq,.vp-content-section,
      .vp-introduction,.vp-expertise-grid,.gdp-hero-row) { grid-template-columns: minmax(0,1fr); gap: 28px; }
  #scroll-top :is(.wd-service-grid,.gd-service-grid,.gd-project-grid,.gd-step-grid,.gd-benefit-grid,
      .ap-service-grid,.ap-process-grid,.vp-steps,.vp-marketing-grid,.wd-process ol) { grid-template-columns: minmax(0,1fr); gap: 24px; }
  #scroll-top .wd-work-chapter { display: block; }
  #scroll-top .wd-performance-art, #scroll-top .wd-benefits { grid-row: auto; grid-column: auto; }
  #scroll-top .wd-benefits { display: grid; grid-template-columns: minmax(0,1fr); }
  #scroll-top .wd-faq-featured { grid-row: auto; }
  #scroll-top .wd-form-grid > label { grid-column: 1 / -1; }
  #scroll-top .wd-service { flex-wrap: nowrap; position: relative; padding: 22px 20px; }
  #scroll-top .wd-service > span:nth-child(2) { flex-basis: auto; padding-right: 18px; }
  #scroll-top .wd-service > span:last-child { position: static; }
  #scroll-top .wd-service strong { font-size: 17px; }
  #scroll-top .wd-service > span:nth-child(2) > span { font-size: 15px; line-height: 1.6; }
  #scroll-top :is(.wd h1,.gd .gd-hero h1,.ap .ap-hero h1,.vp .vp-hero h1) { font-size: clamp(32px,7.8vw,46px); line-height: 1.12; }
  #scroll-top .gd-hero-copy { padding: 32px 20px 0; }
  #scroll-top .gd-hero-art { padding-inline: 20px; }
  #scroll-top .gd-hero-art img { min-height: 0; border-radius: 16px; }
  #scroll-top :is(.wd-actions,.gd-actions,.ap-hero > .ap-actions,.ap-final .ap-actions,.vp-hero-actions) {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  }
  #scroll-top :is(.wd-actions,.gd-actions,.ap-actions,.vp-hero-actions) > :is(a,button) { width: 100%; min-width: 0; }
  #scroll-top .vp .vp-support-films { grid-template-columns: minmax(0,1fr); gap: 16px; }
  #scroll-top .vp .vp-featured { min-height: 360px; aspect-ratio: 4 / 5; }
  #scroll-top .vp .vp-field { grid-template-columns: minmax(0,1fr); gap: 8px; }
  #scroll-top .vp .vp-submit { margin-left: 0; width: 100%; }
  #scroll-top .vp .vp-form-note { margin-left: 0 !important; }
  #scroll-top .gdp-toolbar-top { flex-direction: column; align-items: stretch; }
  #scroll-top .gdp-hero-note { grid-template-columns: minmax(0,1fr); }
  #scroll-top .mm-portfolio-section > .mm-wrap { padding-bottom: 48px; }
}

@media (max-width: 359px) {
  :root { --mm-shell-pad: 16px; }
  #scroll-top .mm-home-wrap, #scroll-top #services > .mm-home-wrap { padding-inline: 16px !important; }
  #scroll-top .mm-wrap { width: calc(100% - 32px) !important; }
  #scroll-top .mm-service-chrome .mm-sc-header-inner { flex-wrap: wrap; padding-block: 12px; }
  #scroll-top .mm-service-chrome .mm-sc-header-actions { gap: 6px; }
  #scroll-top .mm-service-chrome .mm-sc-cta { max-width: 134px; }
  #scroll-top .mm-service-chrome .mm-sc-menu summary { padding-inline: 8px; }
  #scroll-top #services .mm-home-small-service { flex-direction: column; }
}