/* ------------------------- Scaling System by Osmo [https://osmo.supply/] ------------------------- */

:root {
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

body {
  font-size: var(--size-font);
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;
}

html {
  scrollbar-width: none;
}

/* ------------------------- Base Styles -------------------------------------------------- */

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: initial;
  height: 100vh;
  background-color: var(--primary);
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

button {
  padding: 0px;
  background: transparent;
  text-align: inherit;
}

::selection {
  background-color: black;
  color: white;
  text-shadow: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
button {
  cursor: pointer;
}

textarea {
  resize: none;
}

.is-eyebrow.is-black > .eyebrow-s {
  color: var(--white);
}

.section_hero .body-xl {
  opacity: 0;
}

.section_safety {
  padding-top: 0rem;
}

.svg-text {
  width: 100%;
  height: 100%;
}

.section_values > .intro.p-top {
  border: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.w-webflow-badge {
  display: none !important;
  visibility: hidden;
}

.navlink_label,
.stat_number {
  text-box: trim-both cap alphabetic;
}

.navlink-locale .navlink_label {
  color: inherit;
}

.machines-grid_close-button_row:nth-child(1) {
  padding-left: 1.5em;
}

.machines-grid_close-button_row:nth-child(2) {
  padding-right: 1.5em;
}

/* ------------------------- Animations & UI Components ------------------------- */

.video-inner {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.toggle.is-green > .toggle-option > .toggle-id {
  color: var(--primary);
}

.toggle.is-green > .toggle-option > .toggle-id.is-active {
  color: var(--white);
}

.toggle.is-white > .toggle-option > .toggle-id,
.toggle.is-black > .toggle-option > .toggle-id.is-active {
  color: var(--primary);
}

.toggle.is-white > .toggle-option > .toggle-id.is-active,
.toggle.is-black > .toggle-option > .toggle-id {
  color: var(--white);
}

.toggle.is-white > .toggle-indicator {
  background-color: var(--primary);
}

.toggle.is-black > .toggle-indicator {
  background-color: var(--white);
}

.toggle.is-white,
.toggle.is-black {
  width: 8.75em;
}

.toggle.is-white > .toggle-option,
.toggle.is-white > .toggle-indicator,
.toggle.is-black > .toggle-option,
.toggle.is-black > .toggle-indicator {
  width: 4em;
}

html.wf-design-mode > body > div.page-wrap > div > div.section_latest-technology > div.content > div {
  overflow: hidden;
}

html.wf-design-mode > body > div.page-wrap .is-h1-span,
html.wf-design-mode > body > div.page-wrap .content_right-row .eyebrow-l,
html.wf-design-mode > body > div.page-wrap .card {
  opacity: 1;
}

html.wf-design-mode > body > .loader {
  display: none;
}

.section_positions .sissmac_inner > .sissmac-row:last-child {
  padding-bottom: 0em;
}

.scroll-item-h .body-xxl {
  opacity: 0.15;
}

.scroll-item-h .body-s {
  opacity: 0;
}

.scroll-item-h.is-active .body-xxl {
  opacity: 1;
}

.scroll-item-h.is-active .body-s {
  opacity: 1;
}

.section_safety-2 .body-xl.is-black .word:first-of-type > .char:first-of-type {
  margin-right: -0.125em;
}

.sticky-wrap .body-m {
  position: sticky;
  top: 2em;
}

.section_minerals:has(.minerals-slider_sequence canvas) .minerals-slider_sequence:has(canvas) .minerals_canvas {
  filter: brightness(1.1);
}

.story_intro_inner .mask-fill.is-w-l {
  background-color: var(--white);
}

/* ------------------------- Responsive Media Queries ------------------------- */

@media screen and (max-width: 991px) {
  .section_values .body-xxl {
    font-size: 4em;
  }

  .workshops .body-xl {
    font-size: 3.5em;
  }

  .workshops .body-s {
    font-size: 1em;
  }

  .section_projects .intro {
    padding-right: 1em;
    padding-left: 1em;
  }

  .section_projects .content {
    position: relative;
  }

  .minerals-inner .eyebrows {
    padding-left: 1em;
    padding-top: 1em;
  }
}

@media (max-width: 767px) {
  .section_services .card-inner {
    gap: 1em;
  }

  .section_services .body-s {
    opacity: 0.5;
    font-weight: 500;
  }

  .section_services .service-card {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .services-viewer .button {
    margin-top: 3em;
  }

  .minerals_right .button {
    display: none;
  }

  .minerals_left .body-xl {
    font-size: 3.5em;
  }

  .section_safety .content > .content_column:nth-of-type(2) {
    order: 2;
  }

  .section_technology .text-button {
    padding: 0 1em;
  }

  .footer .is-eyebrow {
    padding: 0.25em;
  }

  .footer-links_col .eyebrow-s {
    font-size: 0.75em;
  }

  .section_about .button {
    margin-bottom: 5em;
  }

  .workshops .body-xl {
    font-size: 2em;
  }

  .workshops .body-s {
    font-size: 0.875em;
    font-weight: 500;
  }

  .machine-grid_mobile .machine_button {
    background-color: var(--light-green);
  }

  .workshops-sm-wrap .body-xl,
  .workshops-sm-wrap p {
    text-align: left;
  }

  .workshops-sm-wrap .body-xl {
    font-size: 2em;
  }

  .workshops-sm-wrap .body-s {
    font-size: 0.75em;
  }

  .minerals-inner .col-3:nth-child(2) {
    order: 3;
  }

  .minerals-inner .col-6 {
    order: 2;
    flex: 1;
  }

  .minerals-inner .col-3:last-of-type {
    order: 1;
  }

  .minerals-names .body-xl {
    padding-bottom: 0.125em;
  }

  .section_partners > .content.is-12-col {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .section_work-team > .content.is-12-col {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0em;
  }

  .is-stat > .eyebrow-m {
    font-size: 13px;
  }

  .processes .process:nth-child(10) {
    height: auto;
  }

  .section_positions .sissmac_p-wrap {
    padding-left: 0;
  }

  .section_positions .sissmac_title {
    padding-bottom: 1em;
  }

  .section_work-team .body-xxl {
    font-size: 3.5em;
  }

  .section_about-us .intro.p-2 {
    padding-bottom: 12em;
  }

  .section_about-us .image-wrapper {
    width: 100%;
  }

  .section_improvement .body-s {
    font-weight: 500;
    opacity: 50%;
  }

  .minerals-inner .col-6 {
    padding: 2em;
  }

  .minerals-list .eyebrow-wrapper {
    padding-left: 1em;
  }

  .content.is-base .content_column {
    display: none;
  }
}

@media (max-width: 767px) and (min-width: 479px) {
  .equity-inner {
    display: flex;
    justify-content: space-between;
  }
}

@media (max-width: 479px) {
  .workshops-sm-wrap .body-xl,
  .workshops-sm-wrap p {
    text-align: center;
  }

  .section_work-team .body-xxl {
    font-size: 2.5em;
  }

  .section_safety-2 {
    padding-bottom: 4em;
  }

  .section_safety-2 .image-p {
    height: 29.625em;
  }

  .image-wrapper.is-w-5 {
    width: 100%;
  }

  .story_intro_inner .body-4xl {
    font-size: 4em;
  }

  .story_intro_inner .mask-fill.is-w-r > .eyebrow-m {
    text-align: right;
  }

  .map-wrapper {
    width: 120%;
  }

  .equity-inner .col-6 {
    flex: 0;
    width: 100%;
  }

  .workshops_left_bottom .body-s {
    font-size: 14px;
  }

  .section_improvement .content-bottom {
    margin-top: 10em;
  }

  .story_video-infos_desc .body-s {
    font-size: 0.813em;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 768px) {
  .workshops {
    height: 250vh;
  }
}