/* Spacing */
/* Grid settings */
/* Useful calculation variabls */
/* Row inner box */
/* Columns in px - this is to set max-widths and should correspond to the widths set in the theme's image options */
/* Breakpoint options */
/* Calculated variables - do not edit unless you are a space cowboy */
/**
    Colours also need to be updated in:
    - functions-template-helpers.php 158-162
    - functions-template-helpers.php 190-230
    - acf-layout-selector/class-uu-acf-field-layout-selector.php 180
    - In the colour selector component
*/
/* Split colours - set colours when using .row.split */
/* Overlays - for modals, cookie popups */
/* Type */
/* Quotes */
/* Icons - see font-awesome.scss for more info */
/* Buttons */ /* Woocommerce */ /* Notifications */ /* Pagination */ /* Logo */ /* Header */
/* Header navigation */
/* Footer */
/* Mobile menu */ /* Cookie bar */ /* Social links */ /* Transitions */ /* Loader */ /* Modals */ /* Dots */
/* Tables */
.hero-homepage {
  overflow: hidden;
  text-align: center;
  min-height: calc(100vh - 103px);
}
body.admin-bar .hero-homepage {
  min-height: calc(100vh - 103px - 32px);
}
.hero-homepage .row-inner {
  padding: var(--space-l) 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero-homepage .hero-homepage-headline {
  width: 100%;
  max-width: 1350px;
  margin: 4em 0;
  padding: 0.05em var(--space-m);
  position: relative;
  align-self: flex-start;
  z-index: 2;
}
.hero-homepage .hero-homepage-headline h1, .hero-homepage .hero-homepage-headline h2, .hero-homepage .hero-homepage-headline .h1, .hero-homepage .hero-homepage-headline .h2, .hero-homepage .hero-homepage-headline p {
  font-family: "Upside Grotesque", sans-serif;
  font-weight: 700;
  font-size: 6.125em;
  line-height: 0.8;
  padding-bottom: 0.1em !important;
  margin-bottom: -0.1em !important;
  text-transform: none;
  background: linear-gradient(to bottom, var(--orange), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 768px) {
  .hero-homepage .hero-homepage-headline h1, .hero-homepage .hero-homepage-headline h2, .hero-homepage .hero-homepage-headline .h1, .hero-homepage .hero-homepage-headline .h2, .hero-homepage .hero-homepage-headline p {
    font-size: var(--step-5);
  }
}
.hero-homepage .hero-homepage-image-wrap {
  position: relative;
  z-index: 2;
  overflow: visible;
  margin-top: -210px;
  max-width: 1300px;
  width: 100%;
  aspect-ratio: 12/5;
}
@media (max-width: 768px) {
  .hero-homepage .hero-homepage-image-wrap {
    margin-top: -100px;
    width: 118vw;
    margin-left: calc(-51.5vw + 50%);
  }
}
.hero-homepage img.hero-homepage-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 56%;
     object-position: center 56%;
}
@media (max-width: 768px) {
  .hero-homepage img.hero-homepage-image {
    transform: scale(2);
  }
}