/* Custom overrides applied after the Webflow CSS. */

/* Hero H1 — bumped size + leading and widened constraint so the first line
   on the homepage breaks at "Designs,". Applies to all hero H1s for parity. */
.h1-heading {
  font-size: 58px;
  line-height: 1.2;
}

.h1-heading._850px-width {
  width: 1100px;
  max-width: 95%;
}

@media screen and (max-width: 991px) {
  .h1-heading { font-size: 50px; }
}

@media screen and (max-width: 767px) {
  .h1-heading { font-size: 42px; }
}

@media screen and (max-width: 479px) {
  .h1-heading { font-size: 32px; }
}

/* Contact map popup — mimics the original Elfsight info card. */
.xe-mappopup-wrap .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
.xe-mappopup-wrap .leaflet-popup-content {
  margin: 0;
  width: 300px !important;
  font-family: Poppins, sans-serif;
}
.xe-mappopup-wrap .leaflet-popup-tip {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}
/* Reposition Leaflet's close button over the photo, white on translucent. */
.xe-mappopup-wrap .leaflet-popup-close-button {
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  text-indent: 0;
  padding: 0;
  z-index: 2;
}
.xe-mappopup-wrap .leaflet-popup-close-button:hover {
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}
.xe-mappopup__photo {
  width: 100%;
  height: 170px;
  overflow: hidden;
  background: #f3f3f3;
}
.xe-mappopup__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.xe-mappopup__title {
  background: #221f1f;
  color: #fff;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.xe-mappopup__body {
  padding: 14px 18px 16px;
  background: #fff;
  color: #221f1f;
  font-size: 13px;
  line-height: 1.5;
}
.xe-mappopup__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.xe-mappopup__row:last-child { margin-bottom: 0; }
.xe-mappopup__icon {
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #221f1f;
  margin-top: 1px;
}
.xe-mappopup__body a {
  color: #221f1f;
  text-decoration: none;
}
.xe-mappopup__body a:hover {
  text-decoration: underline;
}
.xe-mappopup__desc {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  color: #555;
  font-size: 13px;
  line-height: 1.5;
}
.xe-pin { background: transparent; border: none; }

/* Mobile (≤479px) — keep text away from screen edges. The exported Webflow
   CSS resets `.section` horizontal padding to 0 here for several variants;
   restore a uniform 20px gutter on every section that contains text, and
   only let true full-bleed media sections (hero video, map, coming-soon,
   service page banner background) stay edge-to-edge. */
@media screen and (max-width: 479px) {
  .section,
  .section[class] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Full-bleed exceptions (media-heavy, no body text). */
  .section.homepage,
  .section.homepage.about,
  .section.no-padding,
  .section.no-padding.map-height,
  .section.coming-soon,
  .sections.is--header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Service page header — banner stays full-bleed but inner text gets gutter. */
  .sections.is--header .containers.is--header {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Footer container — the original used 30px; uniform 20px now. */
  .section.footer .footer__container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Sections whose visible bottom on mobile is an image (after column /
     column-reverse layout) — give them a uniform 40px padding-bottom so every
     image-to-next-section transition has consistent breathing room. Top
     padding is intentionally NOT changed, per spec. */
  .section.home,
  .section.about,
  .section._0-right-padding,
  .section._0-right-padding.bottom,
  .section._0-left-padding {
    padding-bottom: 40px !important;
  }
  /* The Webflow slider containers are still 650px tall on mobile (a desktop
     value the export never scaled down). That single 650px image alone fills
     most of the screen — and combined with section padding it creates the
     huge gap visible between image bottom and the next section's heading.
     Cap them at a mobile-appropriate height. */
  .slider-container,
  .slider-container._1,
  .slider-container._2,
  .slider-container._3,
  .slider-container._4,
  .slider-container._5,
  .slider-container._6,
  .slider-container._7,
  .slider-container._8,
  .slider-container._9,
  .slider-container._10,
  .slider-container._11,
  .slider-container._12,
  .photo-block,
  .photo-block.about,
  .photo-block.manufacturing,
  .photo-block._3,
  .photo-block._4,
  .photo-block._5,
  .photo-block._6,
  .photo-block._7,
  .photo-block._8,
  .photo-block._2,
  .photo-block._2.last {
    height: 280px !important;
  }

  /* Testimonials slider — fix the cascade so the card displays correctly on
     mobile and arrows can be cleanly placed below it. */
  /* 1. One slide visible at a time at full width (was 40-60% from desktop). */
  .testimonials-slide,
  .testimonials-slide._40,
  .testimonials-slide._60 {
    width: 100% !important;
  }
  /* 2. Cap slider/mask/slide at a fixed mobile height — short testimonials no
     longer leave huge empty whitespace, long ones scroll inside the card. */
  .testimonials-slider,
  .testimonials-mask,
  .testimonials-mask.w-slider-mask,
  .testimonials-slide {
    height: 500px !important;
  }
  .testimonials-block {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }
  /* 3. Anchor both arrows to the slider's BOTTOM-LEFT (aligned to the left
     edge of the card), placed next to each other with the same bottom offset
     so they share a horizontal baseline. The exported Webflow CSS uses
     `position: relative` + `inset: …` here, which puts them in flex-column
     flow and stacks them vertically — override back to absolute. */
  .t-left-arrow,
  .t-right-arrow {
    position: absolute !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: -10px !important; /* small gap below the card */
    margin: 0 !important;
    transform: translateY(100%); /* move below the slider, just below card */
  }
  .t-left-arrow {
    left: 20px !important; /* aligned with the card's left edge */
    height: 55px !important;
  }
  .t-right-arrow {
    left: 85px !important; /* 20px + 55px (left arrow width) + 10px gap */
    height: 55px !important;
  }
  /* 4. Section padding-bottom: clearance for the arrows that overflow ~65px
     below the slider, plus a generous gap to the next ("black box") section. */
  .section:has(> .container.testimonials) {
    padding-bottom: 160px !important;
  }

  /* Projects page — 2 columns of fixed-size, identically-shaped tiles
     (was 4 cramped columns at every breakpoint). */
  .project-images-container {
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 8px !important;
    grid-row-gap: 8px !important;
  }
  .project-images-container .lightbox-link {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important; /* same width AND height for every tile */
    height: auto !important;
    max-height: 180px !important;
    overflow: hidden !important;
  }
  .project-images-container .lightbox-link .product-images,
  .project-images-container .lightbox-link img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* "BECAUSE CUSTOM FITS" sections — left-align eyebrow, headline, and body
     copy. Buttons stack vertically and center on the page like the hero CTAs. */
  .xe-custom-fits,
  .xe-custom-fits .h3,
  .xe-custom-fits .h2,
  .xe-custom-fits h1,
  .xe-custom-fits h2,
  .xe-custom-fits .paragraph,
  .xe-custom-fits p {
    text-align: left;
  }
  /* When `.xe-custom-fits` lives inside a flex column with `align-items:
     center`, short single-line headings would otherwise be centered as blocks.
     Force them to fill the column width so text-align: left actually pushes
     them to the left edge. */
  .xe-custom-fits .h3,
  .xe-custom-fits .h2,
  .xe-custom-fits h1,
  .xe-custom-fits h2,
  .xe-custom-fits .paragraph,
  .xe-custom-fits p {
    width: 100%;
    align-self: stretch;
  }
  /* Top icon (e.g., couch / "we're with you" SVG) stays horizontally centered
     above the left-aligned text. */
  .xe-custom-fits .top-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .xe-custom-fits .button-container {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
  }
  /* Equalize the two buttons: same width, same internal padding, no leftover
     side margins from desktop layout. Targets both homepage CTAs (.button-2,
     .work-with-us) and service-page CTAs (.buttons). */
  .xe-custom-fits .button-container > a,
  .xe-custom-fits .button-container > .button-2,
  .xe-custom-fits .button-container > .work-with-us,
  .xe-custom-fits .button-container > .buttons {
    margin: 0 !important;
    width: 280px;
    max-width: 100%;
    text-align: center;
  }
  /* Match the gap below the CTAs (text-block → next image) to the gap above
     the CTAs (body copy → first CTA, ~40px from button-container margin-top).
     The exported Webflow CSS uses 60px bottom padding here plus 40px sibling
     margin, which creates ~100px of visual whitespace between the bottom CTA
     and the image that follows. */
  .xe-custom-fits {
    padding-bottom: 40px !important;
  }
  /* Zero the parent flex item's margin so the only gap below the CTAs is the
     text-block's padding-bottom (40px) — the same as the top CTA gap. */
  ._50-width._45-padding.flex:has(.xe-custom-fits),
  ._50-width._25-padding.home:has(.xe-custom-fits),
  ._50-width._45-padding.flex._45-margin:has(.xe-custom-fits) {
    margin-bottom: 0 !important;
  }
}