/* Site-wide mobile layout — loaded last so it wins over layered theme CSS */

html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

img,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

/* —— Banner videos: cover the frame on every phone, including iOS —— */
.hero,
.page-hero {
  overflow: hidden;
  max-width: 100%;
}

.hero {
  clip-path: none;
}

.hero__media,
.page-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  transform: none !important;
}

.hero__video,
.page-hero__video,
.page-hero__bg video,
.loader__video {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 0;
}

.hero-mark {
  display: none;
}

.loader__video-wrap {
  overflow: hidden;
}

@media (max-width: 900px) {
  :root {
    --page-gutter: 1.05rem;
  }

  .hero {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0;
    right: 0;
    clip-path: none !important;
    border-radius: 0 !important;
    height: calc(100svh - var(--header-height, 4.25rem)) !important;
    min-height: calc(100svh - var(--header-height, 4.25rem)) !important;
    max-height: calc(100dvh - var(--header-height, 4.25rem));
    animation: none !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .hero__media,
  .hero__overlay {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .page-hero {
    width: 100% !important;
    margin-inline: 0 !important;
    min-height: min(62svh, 28rem);
  }

  .hero__video,
  .page-hero__video,
  .page-hero__bg video,
  .loader__video {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
  }

  .header__inner {
    min-width: 0;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }

  .wordmark,
  .wordmark img {
    min-width: 0;
  }

  .container,
  .container--narrow {
    width: min(100% - 1.6rem, var(--page-max, 1280px));
  }

  .btn-row {
    width: 100%;
    flex-wrap: wrap;
  }

  .btn-row .btn {
    flex: 1 1 auto;
  }

  .nav-mobile {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-mobile__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .manifesto,
  .feeling,
  .director,
  .home-blog-grid,
  .footer__grid,
  .island-mosaic,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .clip-frame--lg {
    width: 100%;
    max-width: 100%;
    height: min(58vw, 22rem);
    margin: 0;
  }

  .clip-frame--sm {
    display: none;
  }

  .feeling__image,
  .director__portrait {
    height: min(52vw, 20rem);
  }

  .cta-band {
    width: 100%;
    margin-inline: 0;
    padding-inline: 1.25rem;
  }

  .cta-band .btn-row .btn,
  .contact-form .btn,
  .contact-form-wrap .btn {
    width: 100%;
    justify-content: center;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px;
  }

  .gallery-filters {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }

  .gallery-filters button {
    flex: 0 0 auto;
  }

  .page-gallery .gallery-item--featured,
  .page-gallery .gallery-item--wide,
  .page-gallery .gallery-item--tall,
  .page-gallery .gallery-item--square {
    grid-column: span 12;
  }

  .estimator-layout,
  .service-card,
  .service-card--reverse {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .header .btn--ink {
    padding: 0.42rem 0.6rem;
  }

  .hero {
    height: calc(100svh - var(--header-height, 4rem)) !important;
    min-height: calc(100svh - var(--header-height, 4rem)) !important;
    max-height: calc(100dvh - var(--header-height, 4rem));
  }

  .world {
    height: 14rem;
    min-height: 14rem;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    height: calc(100svh - var(--header-height, 4rem)) !important;
    min-height: 16rem !important;
    max-height: calc(100dvh - var(--header-height, 4rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video,
  .page-hero__video,
  .loader__video {
    transform: none !important;
    -webkit-transform: none !important;
  }
}