/* 182 West v2: shared mobile / tablet responsiveness */

/* Avoid overflow-x on html/body; it breaks position:sticky ancestors */
img,
video,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

/* Kill leftover Webflow mobile chrome — real nav is .n-nav-bar + .mobile-nav-toggle */
.mobile-nav-wrapper,
.mobile-link,
.mobile-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  inset: auto !important;
}

/* -- Mobile nav drawer -- */
.mobile-nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.45rem;
  margin: 0;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  z-index: 102;
  color: #f5f2ea;
}
.mobile-nav-toggle__bars {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  position: relative;
}
.mobile-nav-toggle__bars::before,
.mobile-nav-toggle__bars::after,
.mobile-nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}
.mobile-nav-toggle__bars span {
  top: 50%;
  transform: translateY(-50%);
}
.mobile-nav-toggle__bars::before { top: 0.15rem; }
.mobile-nav-toggle__bars::after { bottom: 0.15rem; }
.n-nav-bar.is-mobile-open .mobile-nav-toggle__bars span { opacity: 0; }
.n-nav-bar.is-mobile-open .mobile-nav-toggle__bars::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.n-nav-bar.is-mobile-open .mobile-nav-toggle__bars::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: inline-flex !important;
  }

  .n-nav__lay {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.75rem;
  }

  .n-nav__branding-area {
    flex: 0 0 auto;
  }

  .n-nav__nav-area {
    position: static !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto;
  }

  /* Hide Webflow ham icons if present; we use our toggle */
  .n-nav__icons {
    display: none !important;
  }

  .n-nav-menu {
    display: none !important;
    position: fixed !important;
    top: calc(var(--chrome-nav-height, 84px) + 0.5rem) !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 101 !important;
    background: rgba(28, 36, 30, 0.97) !important;
    border: 1px solid rgba(245, 242, 234, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.65rem 0 !important;
    box-sizing: border-box;
  }

  .n-nav-bar.is-mobile-open .n-nav-menu {
    display: block !important;
  }

  .n-nav-menu__list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .n-nav-menu__list .n-nav-social {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    padding: 0.75rem 1.15rem !important;
  }

  .n-nav-menu__list .contact-cluster__sep {
    display: none !important;
  }

  .n-nav__link {
    display: block !important;
    width: 100% !important;
    padding: 0.9rem 1.15rem !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid rgba(245, 242, 234, 0.1);
    box-sizing: border-box;
  }

  .n-nav__link:last-child {
    border-bottom: 0;
  }

  /* Footer layout owned by footer.css — do not override here */

  .main-wrapper,
  body.body-insights,
  .seo-faq,
  .a16-latest,
  .insight-article {
    padding-bottom: 5rem !important;
  }

  /* Home / team / sections */
  .wraplistteam {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section.team .w-layout-blockcontainer.container,
  .main-wrapper > .section > .w-layout-blockcontainer.container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .seo-faq {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Portfolio */
  .portfolio-split {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    max-width: 100% !important;
  }

  .hero-portfolio {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    min-height: auto !important;
  }

  .portfolio-modal {
    padding: 0.75rem !important;
    align-items: flex-end !important;
  }

  .portfolio-modal__panel {
    width: calc(100vw - 1.5rem) !important;
    max-height: min(78vh, 34rem) !important;
  }

  /* Decorative Webflow canvases / lottie: clip, don't scroll the page */
  .p5Canvas,
  canvas.p5Canvas {
    max-width: 100vw !important;
  }

  /* Do NOT set overflow on .section.sticky; it breaks position:sticky */
  .section.sticky.mobile .lottie,
  .section.sticky.mobile .scrollie-wrap {
    max-width: 100%;
  }

  .n-post-rich-text img,
  .insight-article__cover {
    width: 100% !important;
    height: auto !important;
  }

  .n-post-rich-text table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  .a16-hero {
    padding: 5.25rem 1rem 1.75rem !important;
  }

  .a16-hero__bar {
    font-size: clamp(0.92rem, 5.2vw, 1.35rem) !important;
    letter-spacing: 0.04em !important;
    padding: 0.35rem 0.5rem !important;
    max-width: 100%;
    white-space: normal;
  }

  .a16-featured,
  .a16-latest {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .a16-feat-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .a16-latest__head {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .insight-article {
    padding: 5.25rem 1rem 5.5rem !important;
  }

  .insight-article__title {
    font-size: clamp(1.35rem, 6vw, 1.85rem) !important;
  }

  .a16-brief__form {
    flex-direction: column;
  }

  .a16-brief__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 992px) {
  .mobile-nav-toggle {
    display: none !important;
  }
}

/* Reduce pointer-field cost on small screens */
@media (max-width: 991px) {
  #page-mouse-fx {
    display: none !important;
  }
}

body.nav-lock {
  overflow: hidden;
}