/* Sitewide banner sizing: compact title banners without changing type scale. */
#site-root .site-page-hero > .site-layout {
  min-height: 360px !important;
  --min-height: 360px !important;
}

/* Keep the homepage product eyebrow readable on its dark green section. */
#site-root .site-scope-100 .site-products-section .site-eyebrow p.site-heading-title {
  color: var(--site-accent, #b3e2a2) !important;
}

/* Mobile/tablet navigation: preserve the brand's mint control color and wrap
   expertise labels cleanly beside their icons. */
@media (max-width: 1024px) {
  #site-root :is(.site-template-header, .site-header) button.site-nav-toggle,
  #site-root :is(.site-template-header, .site-header) button.site-nav-toggle:hover,
  #site-root :is(.site-template-header, .site-header) button.site-nav-toggle:active,
  #site-root :is(.site-template-header, .site-header) button.site-nav-toggle:focus,
  #site-root :is(.site-template-header, .site-header) button.site-nav-toggle:focus-visible {
    background: #b3e2a2 !important;
    color: #001505 !important;
    border-color: #b3e2a2 !important;
    box-shadow: none !important;
  }

  #site-root :is(.site-template-header, .site-header) button.site-nav-toggle span {
    background: #001505 !important;
  }

  #site-root :is(.site-template-header, .site-header) .site-expertise-links {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
  }

  #site-root :is(.site-template-header, .site-header) .site-expertise-links a {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.25 !important;
  }

  #site-root :is(.site-template-header, .site-header) .site-expertise-links .site-menu-icon {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }
}

/* Mobile type scale: keep the desktop hierarchy while reducing its sizes by 1/6.
   This maps 18px copy to 15px and scales headings proportionally. */
@media (max-width: 767px) {
  :root {
    --site-body-size: 15px;
    --site-h1-size: 33.333px;
    --site-h2-size: 25px;
    --site-h3-size: 18.75px;
    --site-h4-size: 14.0625px;
    --site-h5-size: 10.546875px;
    --site-h6-size: 7.910156px;
  }

  #site-root#site-root main :is(p, li, blockquote, td, th, a, button, label, input, textarea, select,
      .site-heading-description, .site-caption, .site-icon-box-description,
      .site-info-box-description, .site-node p.site-heading-title,
      .site-node .site-grid > .site-node .box-body),
  #site-root#site-root footer :is(p, li, blockquote, td, th, a, button, label) {
    font-size: 15px !important;
  }

  #site-root#site-root :is(h1, .site-node h1.site-heading-title) {
    font-size: var(--site-h1-size) !important;
  }

  #site-root#site-root :is(h2, .site-node h2.site-heading-title) {
    font-size: var(--site-h2-size) !important;
  }

  #site-root#site-root :is(h3, h3.site-heading-title, .site-info-box-title) {
    font-size: var(--site-h3-size) !important;
  }

  #site-root#site-root main .site-node .site-grid > .site-node :is(h3, h4).site-heading-title,
  #site-root#site-root main .site-node :is(h4, h5).site-heading-title,
  #site-root#site-root main :is(.steam-card, .steam-explore-card, .steam-parameter-card,
      .site-stack-card, .site-icon-card, .site-direction-card, .site-post-card,
      .site-post-card-body, .site-infobox) :is(h3, h4, h5, .site-info-box-title) {
    font-size: 18.75px !important;
  }

  #site-root#site-root main :is(h6, h6.site-heading-title) {
    font-size: 15px !important;
  }
}

@media (max-width: 767px) {
  /* Add consistent contrast over changing video frames and factory imagery. */
  #site-root .site-home-hero > .site-node-id-27fc60cd {
    position: relative !important;
    isolation: isolate;
  }

  #site-root .site-home-hero > .site-node-id-27fc60cd::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(0, 13, 5, .42), rgba(0, 13, 5, .56));
    pointer-events: none;
  }

  #site-root .site-home-hero .site-node-id-70fc71ba {
    position: relative !important;
    z-index: 2 !important;
  }

  /* All content CTAs share full-width, centered geometry on phones. */
  #site-root main .site-component.site-component-button,
  #site-root main .site-component-button .site-component-content,
  #site-root main .site-component-button .site-button-wrapper {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    justify-content: center !important;
    margin-inline: auto !important;
  }

  #site-root main :is(a.site-button, button.site-button, .site-button, .site-blog-button,
      .steam-button, .site-button-link, .site-read-post, .site-enquiry-actions a,
      button[type="submit"], input[type="submit"]) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
    align-self: stretch !important;
    justify-content: center !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  #site-root main .steam-actions {
    align-items: stretch !important;
  }

  #site-root main .steam-actions > :is(a, button) {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

#site-root .site-home-hero > .site-layout {
  min-height: min(726px, 86vh) !important;
  --min-height: min(726px, 86vh) !important;
}

.site-blog-hero {
  padding-top: 138px !important;
  padding-bottom: 48px !important;
}

.steam-hero {
  min-height: 370px !important;
  max-height: 480px;
  padding-top: 130px !important;
  padding-bottom: 46px !important;
}

@media (min-width: 768px) and (max-width: 1050px) {
  #site-root .site-page-hero > .site-layout { min-height: 330px !important; --min-height: 330px !important; }
  #site-root .site-home-hero > .site-layout { min-height: 660px !important; --min-height: 660px !important; }
  .steam-hero { min-height: 340px !important; }
}

@media (max-width: 767px) {
  #site-root .site-page-hero > .site-layout { min-height: 280px !important; --min-height: 280px !important; }
  #site-root .site-home-hero > .site-layout { min-height: min(560px, 68vh) !important; --min-height: min(560px, 68vh) !important; }
  .site-blog-hero { padding-top: 106px !important; padding-bottom: 30px !important; }
  .steam-hero { min-height: 310px !important; max-height: none; padding: 110px 22px 34px !important; }
}
#site-root .site-home-hero > .site-layout {
  height: min(726px, 86vh) !important;
  box-sizing: border-box !important;
}

/* Keep the homepage hero video covering its complete frame on desktop and mobile. */
#site-root .site-home-hero > .site-layout > .site-background-video-container {
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden !important;
}

#site-root .site-home-hero > .site-layout > .site-background-video-container > .site-background-video-hosted {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

#site-root .site-home-hero > .site-layout > .site-node-id-70fc71ba {
  position: relative !important;
  z-index: 2 !important;
}

@media (min-width: 768px) and (max-width: 1050px) {
  #site-root .site-home-hero > .site-layout { height: 660px !important; }
}
@media (max-width: 767px) {
  #site-root .site-home-hero > .site-layout { height: min(560px, 68vh) !important; }
}

/* Tighten only the homepage title on phones, preserving its existing mobile
   scale while reducing it by five percent. */
@media (max-width: 767px) {
  #site-root#site-root .site-home-hero .site-node-id-530c4e23 .site-heading-title {
    font-size: calc(var(--site-h1-size, 33.333px) * .95) !important;
    line-height: 1em !important;
  }
}

/* Mobile homepage trust column: center the panel and keep both proof points
   in balanced, equal-height columns. */
@media (max-width: 767px) {
  #site-root .site-node-id-156d45bb > .site-node-id-3cf6ef36 {
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    max-width: 440px !important;
    margin: -30px auto 0 !important;
    padding: 10px !important;
    border-radius: 22px !important;
  }

  #site-root .site-node-id-3cf6ef36 > .site-node-id-6fc1470f {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #site-root .site-node-id-6fc1470f > .site-node-id-7028c467 {
    display: none !important;
  }

  #site-root .site-node-id-6fc1470f > .site-node-id-6dfabfb {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  #site-root .site-node-id-6dfabfb > .site-node-id-4e1f97d5 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #site-root .site-node-id-4e1f97d5 > .site-node-id-69c852b3,
  #site-root .site-node-id-4e1f97d5 > .site-node-id-6f8c5dbb {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 112px !important;
    text-align: center !important;
  }

  #site-root .site-node-id-69c852b3 .site-counter-number-wrapper,
  #site-root .site-node-id-69c852b3 .site-counter-number {
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  #site-root .site-node-id-6f8c5dbb .site-component-image,
  #site-root .site-node-id-6f8c5dbb img {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    object-fit: contain !important;
  }

  #site-root .site-node-id-69c852b3 :is(p, span),
  #site-root .site-node-id-6f8c5dbb :is(p, span) {
    min-width: 0 !important;
    text-align: center !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
  }
}

/* Mobile homepage: fit the entire introduction instead of clipping its heading. */
@media (max-width: 767px) {
  #site-root .site-home-hero > .site-layout {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    --min-height: 0px !important;
    justify-content: flex-start !important;
    padding-top: calc(84px + env(safe-area-inset-top)) !important;
    padding-bottom: 20px !important;
  }

  #site-root .site-home-hero .site-node-id-70fc71ba,
  #site-root .site-home-hero .site-node-id-336f8ea {
    height: auto !important;
    min-height: 0 !important;
  }
  #site-root .site-home-hero .site-node-id-cdf08fd p {
    line-height: 1.3 !important;
  }

  /* The shared mobile nav inherited a half-width from its theme node. */
  #site-root :is(.site-template-header, .site-header) nav.site-navigation {
    box-sizing: border-box !important;
    position: fixed !important;
    top: calc(100px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
}

/* Anchor the Industries We Serve overlay at the lower-left on phones. */
@media (max-width: 767px) {
  #site-root #industries .site-node-id-1be2b2d {
    box-sizing: border-box !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 24px 20px 28px !important;
    background-position: center center !important;
  }

  #site-root #industries .site-node-id-1be2b2d > .site-component {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    margin-inline: 0 auto !important;
    text-align: left !important;
  }

  #site-root #industries .site-node-id-1be2b2d :is(.site-heading-title, p) {
    width: 100% !important;
    margin-inline: 0 auto !important;
    text-align: left !important;
  }
}