/* Bump header breakpoint: show burger before nav wraps */
@media screen and (max-width: 1200px) {
  .header-display-desktop {
    display: none !important;
  }
  .header-display-mobile {
    display: flex !important;
  }
}

/* Ensure content clears fixed header when mobile nav kicks in */
@media screen and (max-width: 1200px) {
  #header + #page,
  #page {
    padding-top: 0 !important;
  }
  #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
  }
}

/* Fix mobile grid: collapse to single stacked column with gutters */
/* Exclude footer sections which need grid for logo positioning */
@media (max-width: 767px) {
  #page [data-fluid-engine] .fluid-engine {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 6vw !important;
  }
  #page [data-fluid-engine] .fluid-engine > .fe-block {
    width: 100% !important;
  }
  /* Restore height for images inside flexbox layout */
  #page [data-fluid-engine] .fluid-engine .fluid-image-container {
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
  }
  #page [data-fluid-engine] .fluid-engine .sqs-block-image .sqs-block-content,
  #page [data-fluid-engine] .fluid-engine .sqs-block-image .image-block-outer-wrapper,
  #page [data-fluid-engine] .fluid-engine .sqs-block-image .sqs-image {
    height: auto !important;
  }
}

/* Kill all top spacing on first page section (hero) */
@media (max-width: 1200px) {
  #page .page-section:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  #page .page-section:first-child .content-wrapper {
    padding-top: 0 !important;
  }
  /* Ensure hero sections with background images still have height */
  #page .page-section.has-background:first-child {
    min-height: 50vh !important;
  }
}

/* Ensure hero sections have adequate height */
@media (max-width: 1200px) {
  .page-section .section-background {
    min-height: 40vh !important;
  }
  .page-section .section-background img {
    min-height: 40vh !important;
    object-fit: cover !important;
  }
}

/* Fix squished buttons in flexbox layout */
@media (max-width: 767px) {
  #page .sqs-block-button {
    margin-top: 2em !important;
  }
  #page .sqs-block-button-container {
    display: flex !important;
    justify-content: flex-start !important;
  }
  #page .sqs-block-button-container.sqs-stretched .sqs-block-button-element {
    flex: none !important;
  }
  #page .sqs-block-button-element {
    padding: 1.2em 3em !important;
    width: auto !important;
    white-space: nowrap !important;
  }
}

/* Homepage: space between intro and Recent Work, pad title inside section */
section[data-section-id="69a761d20523e578f4171b2c"] {
  margin-top: 8rem !important;
  padding-top: 2rem !important;
}

/* Make header scroll with page on mobile (not fixed) */
@media (max-width: 1200px) {
  #header {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html, body, #siteWrapper, #header, #floatingCart {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  #floatingCart {
    display: none !important;
  }
  /* Compact header bar on mobile */
  #header .header-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }
  #header .header-display-mobile {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #header .header-title-nav-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Hide logo/text when menu is open — phone only */
@media (max-width: 767px) {
  #header.header--menu-open .header-title {
    display: none !important;
  }
}

/* Min gap between logo and nav */
.header-title {
  margin-right: 2vw !important;
}

/* Prevent nav wrap on desktop */
.header-nav-list {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}