/*
 * Layout fixes (loaded after the page's own styles).
 */

/*
 * Manufacturing pictures: the description sits on the picture and slides in when the picture
 * scrolls into view - at the top for the three unit pictures, at the bottom for the two
 * large pictures above them.
 */
.gg-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px;
}

.gg-cap {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding: 24px 24px 72px !important;
  z-index: 3;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;

  /* before the card is seen: pushed up and invisible */
  transform: translateY(-40px) !important;
  opacity: 0 !important;
  transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.9s ease !important;
  transition-delay: calc(var(--gg-i, 0) * 0.15s) !important;
}

/* entry animation, played once when the picture scrolls into view */
.gg-card.gg-in .gg-cap {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.gg-cap,
.gg-cap * {
  color: #fff !important;
}

.gg-cap p {
  margin: 0 !important;
  text-align: left !important;
}

/* one size for every word in the description, including the bold parts */
.gg-cap p,
.gg-cap p * {
  font-size: 14px !important;
  line-height: 1.45 !important;
  letter-spacing: -0.1px !important;
}

@media (max-width: 809px) {
  .gg-cap p,
  .gg-cap p * { font-size: 13px !important; }
  .gg-cap { padding: 18px 18px 56px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .gg-cap { transition: none !important; transform: none !important; opacity: 1 !important; }
  .gg-card img { transition: none !important; }
}

/* Why Us header: stack the "Why Us" pill, heading and paragraph, centred (same as the other sections). */
@media (min-width: 810px) {
  .framer-1yp58xi {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    height: auto !important;
  }

  .framer-1yp58xi .framer-cmpw4o {
    width: 100% !important;
    max-width: 860px;
    align-items: center !important;
  }

  .framer-1yp58xi .framer-awxfce,
  .framer-1yp58xi .framer-cmpw4o > div {
    width: 100% !important;
  }

  .framer-1yp58xi h2,
  .framer-1yp58xi p {
    text-align: center !important;
  }
}

/* Why Us: give the three card titles equal height so the paragraphs below start on the same line. */
@media (min-width: 810px) {
  .framer-1iipicg {
    min-height: 48px;
  }
}

/* "View full picture" button in the corner of each Manufacturing picture */
.gg-expand {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display: none; /* flex */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.gg-expand:hover,
.gg-expand:focus-visible {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.08);
  outline: 0;
}

/* full-picture viewer: just the picture on a dark backdrop - no card, border or frame */
.gg-viewer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: zoom-out;
}

.gg-viewer.gg-open { opacity: 1; }

.gg-viewer-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  cursor: default;
  transform: scale(0.97);
  transition: transform 0.3s ease;
}

.gg-viewer.gg-open .gg-viewer-img { transform: scale(1); }

.gg-viewer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gg-viewer-close:hover,
.gg-viewer-close:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  outline: 0;
}

html.gg-viewer-open,
html.gg-viewer-open body { overflow: hidden !important; }

/* the two large pictures: text at the bottom, button at the top */
.gg-card.gg-bottom .gg-cap {
  top: auto !important;
  bottom: 0 !important;
  padding: 72px 24px 24px !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%);
  transform: translateY(40px) !important;
}

.gg-card.gg-bottom.gg-in .gg-cap {
  transform: translateY(0) !important;
}

.gg-card.gg-bottom .gg-expand {
  bottom: auto;
  top: 14px;
}

@media (max-width: 809px) {
  .gg-card.gg-bottom .gg-cap { padding: 56px 18px 18px !important; }
}