/* Device layout contract: phones <768px; tablets 768–1199px; desktop >=1200px.
   Loaded after page styles. Never rescale the live website-preview iframe here. */
@media (max-width: 1199px) {
  #scroll-top :is(.mm-home-wrap,.mm-wrap,.mm-sc-container,.wd,.gd,.ap,.vp) {
    --device-gap: 20px;
  }
  #scroll-top :is(.mm-services-feature-grid,.mm-services-compact-grid,.mm-hero-layout,
      .mm-portfolio-grid,.mm-video-client-grid,.mm-work-grid,.mm-post-grid,
      .mm-services-page-grid,.mm-contact-grid,.mm-form-pair,.wd-hero,.wd-service-grid,
      .gd-service-grid,.gd-project-grid,.gd-story,.ap-story,.vp-content-section) > * {
    min-width: 0;
    box-sizing: border-box;
  }
  #scroll-top :is(.mm-form-card,.wd-form,.gd-enquiry,.vp-enquiry,.ap) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea),
  #scroll-top #contact :is(input,select,textarea) {
    min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 16px !important;
  }
  #scroll-top :is(.wd-button,.gd-button,.ap-pill,.vp-button) {
    max-width: 100%; white-space: normal; min-height: 48px; line-height: 1.4; text-align: center;
  }
  #scroll-top .mm-service-chrome .mm-sc-desktop-nav { display: none; }
  #scroll-top .mm-service-chrome .mm-sc-menu { display: block; }
  #scroll-top .mm-service-chrome .mm-sc-menu-panel {
    max-height: calc(100dvh - 116px); overflow-y: auto; overscroll-behavior: contain;
  }
  #scroll-top .mm-service-chrome .mm-sc-footer-row { flex-wrap: wrap; gap: 20px; }
  #scroll-top .mm-service-chrome .mm-sc-footer-row nav { flex-wrap: wrap; gap: 8px 24px; }
  #scroll-top :is(.mm-home-nav-links,.mm-nav-links) {
    position: absolute !important; top: 66px !important; right: var(--mm-shell-pad) !important;
    left: auto !important; width: min(360px,calc(100vw - 32px)) !important;
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    gap: 4px !important; padding: 12px !important; border: 1px solid #ffffff26;
    border-radius: 16px; background: #1b1b23 !important; box-shadow: 0 18px 48px #0004;
    opacity: 0; visibility: hidden; pointer-events: none;
    max-height: calc(100dvh - 100px); overflow-y: auto;
  }
  #scroll-top :is(.mm-home-nav-links,.mm-nav-links).is-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  #scroll-top :is(.mm-home-nav-links,.mm-nav-links) :is(a,button) {
    min-height: 44px; width: 100%; padding: 12px !important;
    font-size: 16px !important; text-align: left !important;
  }
  #scroll-top :is(.mm-home-menu,.mm-menu) {
    display: grid !important; place-items: center; width: 44px !important; height: 44px !important; flex-shrink: 0;
  }
  #scroll-top .mm-home-nav .mm-home-wrap > a:last-of-type,
  #scroll-top .mm-nav-actions > button:first-child { display: none !important; }
  #scroll-top :is(.mm-home-nav + section#top,.mm-home-nav + section#top > .mm-home-wrap:first-of-type) { min-height: 0; }

  /* Long cinematic pins cannot contain the full copy on touch-sized screens. */
  #scroll-top .vp .vp-hero { position: relative; height: auto; min-height: 0; }
  #scroll-top .vp .vp-hero-content { position: relative; inset: auto; padding: 128px var(--gutter) 40px; }
  #scroll-top .vp .vp-hero-bottom { position: relative; inset: auto; padding: 0 var(--gutter) 28px; gap: 16px; flex-wrap: wrap; }
  #scroll-top .vp .vp-films-anchor { top: auto; bottom: 0; }
  #scroll-top .vp .vp-featured { height: auto; }
  #scroll-top .vp .vp-edit-visual { position: relative; top: auto; height: 360px; }
  #scroll-top .vp .vp-enquiry-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  #scroll-top :is(.mm-video-project-visual,.mm-video-featured-card,.gd-project-art,
      .ap-studio-image,.ap-space-images .ap-photo) > :is(img,video) { height: 100%; object-fit: cover; }
  #scroll-top .mm-portfolio-preview--collection img,
  #scroll-top .mm-portfolio-preview--video img { height: 100%; object-fit: cover; }
  #scroll-top .gdp-image img { height: 100%; object-fit: contain; }
  #scroll-top :is(.mm-portfolio-toolbar,.mm-portfolio-service-head,.gd-section-heading) { flex-wrap: wrap; gap: 16px; }
  #scroll-top :is(.mm-portfolio-filters,.gdp-filters) { max-width: 100%; flex-wrap: wrap; }
  #scroll-top :is(.mm-portfolio-filters,.gdp-filters) button { min-height: 44px; white-space: normal; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  #scroll-top .vp .vp-featured { min-height: 420px; aspect-ratio: 16 / 10; }
  :root { --mm-shell-pad: 32px; --mm-section-space: 72px; }
  #scroll-top .mm-home-wrap, #scroll-top #services > .mm-home-wrap {
    box-sizing: border-box !important; width: 100% !important; max-width: 1100px !important;
    margin-inline: auto !important; padding-inline: 32px !important;
  }
  #scroll-top .mm-wrap { width: calc(100% - 64px) !important; max-width: 1036px !important; }
  #scroll-top :is(.wd,.gd,.ap,.vp) { --wd-pad: 32px; --gd-pad: 32px; --pad: 32px; --gutter: 32px; }
  #scroll-top .mm-service-chrome .mm-sc-container { padding-inline: 32px; }
  #scroll-top .mm-home-nav + section#top > .mm-hero-layout {
    grid-template-columns: minmax(0,1fr) !important; gap: 36px !important; padding-block: 56px !important;
  }
  #scroll-top #top h1 { font-size: clamp(44px,5.4vw,60px) !important; max-width: 18ch; line-height: 1.1 !important; }
  #scroll-top #top h1 + p { max-width: 64ch !important; font-size: 17px !important; text-align: left !important; }
  #scroll-top #top > .mm-hero-layout > div:last-child { justify-content: flex-start !important; }
  #scroll-top #top > .mm-hero-layout > div:last-child > div { width: 100% !important; max-width: 680px; }
  #scroll-top #services > .mm-home-wrap > .mm-services-intro { display: block; max-width: 760px !important; }
  #scroll-top #services > .mm-home-wrap > .mm-services-intro p { margin-top: 20px !important; max-width: 64ch; }
  #scroll-top #services > .mm-home-wrap > :is(.mm-services-feature-grid,.mm-services-compact-grid) {
    display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 20px !important; width: 100% !important; padding-inline: 0 !important;
    margin-inline: 0 !important; justify-items: stretch !important; align-items: stretch !important;
  }
  #scroll-top #services > .mm-home-wrap > .mm-services-compact-grid { margin-top: 20px !important; }
  #scroll-top #services :is(.mm-home-feature-card,.mm-home-small-service) {
    grid-column: auto !important; width: 100% !important; max-width: 100% !important;
    height: auto !important; min-height: 0 !important; margin: 0 !important; inset: auto !important;
    transform: none !important; translate: none !important; padding: 24px !important; border-radius: 22px !important;
  }
  #scroll-top #services .mm-home-feature-card > div:nth-child(2) > div:nth-of-type(1) { grid-template-columns: minmax(0,1fr) !important; }
  #scroll-top #services .mm-home-feature-card h3 { font-size: 26px !important; }
  #scroll-top #services .mm-home-small-service { flex-direction: column; gap: 18px !important; }
  #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: repeat(2,minmax(0,1fr)) !important; gap: 20px !important; }
  #scroll-top #work .mm-home-portfolio-card { grid-column: auto !important; min-height: 290px !important; padding: 24px !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: 36px !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) {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 20px !important;
  }
  #scroll-top :is(.mm-home-footer .mm-home-wrap > div:first-child,.mm-footer-top) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 32px !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-footer) a { min-height: 44px; display: inline-flex; align-items: center; }
  #scroll-top :is(.mm-page-hero,.mm-section-pad) { padding-block: 64px !important; }
  #scroll-top #contact > .mm-home-wrap > div { padding: 36px !important; }

  #scroll-top :is(.wd-hero,.gd-hero) { grid-template-columns: minmax(0,1fr); min-height: 0; gap: 28px; }
  #scroll-top .wd-hero { padding-block: 40px; }
  #scroll-top .gd-hero-copy { padding: 40px 32px 0; }
  #scroll-top .gd-hero-art { padding-inline: 32px; max-width: 920px; margin-inline: auto; }
  #scroll-top .gd-hero-art img { min-height: 0; aspect-ratio: 1.9; border-radius: 20px; }
  #scroll-top .wd-hero-visual { width: 100%; max-width: 720px; margin-inline: auto; }
  #scroll-top :is(.wd h1,.gd .gd-hero h1,.ap .ap-hero h1,.vp .vp-hero h1) { font-size: clamp(40px,5.2vw,60px); line-height: 1.12; }
  #scroll-top :is(.wd-service-grid,.gd-service-grid,.gd-project-grid,.gd-step-grid,.gd-benefit-grid,
      .ap-process-grid,.vp-steps,.vp-marketing-grid,.wd-process ol) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
  #scroll-top :is(.wd-service-grid,.gd-service-grid) > * { min-height: 0; }
  #scroll-top .wd-service strong { font-size: 17px; }
  #scroll-top .wd-service > span:nth-child(2) > span { font-size: 14px; }
  #scroll-top :is(.wd-capabilities,.gd-capabilities) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  #scroll-top .wd-capabilities > div { justify-content: flex-start; font-size: 14px; }
  #scroll-top .wd-work-chapters { grid-template-columns: minmax(0,1fr); gap: 24px; }
  #scroll-top .wd-work-chapter { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; }
  #scroll-top .wd .wd-chapter-copy h3 { font-size: 32px; }
  #scroll-top :is(.wd-contact,.wd-scope,.wd-locations,.gd-story,.gd-reason,.ap-story,.ap-voice,.ap-faq,.vp-content-section) {
    grid-template-columns: minmax(0,1fr); gap: 32px; padding-block: 56px;
  }
  #scroll-top :is(.wd-form-grid,.gd-form-grid,.mm-form-pair,.mm-contact-form-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  #scroll-top .wd-form label { font-size: 13px; }
  #scroll-top .wd .wd-button { font-size: 14px; }
  #scroll-top .vp-introduction, #scroll-top .vp-expertise-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  #scroll-top .ap-services { grid-template-columns: minmax(0,1fr); gap: 24px; }
  #scroll-top .ap-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; max-width: none; }
  #scroll-top .ap-demo-strip { gap: 20px; }
  #scroll-top .gdp-hero-row { grid-template-columns: minmax(0,1fr); gap: 24px; }
}

/* At tablet sizes the static chapter cards replace the desktop pinned gallery. */
@media (max-width: 1199px), (hover: none) {
  #scroll-top .wd-motion-ready .wd-work-story { display: block; }
  #scroll-top .wd-motion-ready .wd-work-chapters { display: grid; }
  #scroll-top .wd-motion-ready .wd-work-chapter { min-height: 0; background: #fff; border: 1px solid var(--wd-rule); border-radius: 10px; overflow: clip; }
  #scroll-top .wd-motion-ready .wd-chapter-image { display: block; }
  #scroll-top .wd-motion-ready .wd-chapter-copy { padding: 24px; }
  #scroll-top .wd-motion-ready .wd-story-stage { display: none; }
}