/** Shopify CDN: Minification failed

Line 243:0 Expected "}" to go with "{"

**/
/*
  section-hero-finder.css

  The palette is fixed rather than taken from a colour scheme: the section is one dark
  panel with a photograph bleeding into it, and the theme schemes are all light-on-white
  or white-on-navy, so a scheme would only ever be able to break it.

  The green is darker than the one in the mock-up because white sits on it: the brighter
  green reaches 2.9:1 against white, which is unreadable, while this one reaches 5.1:1.
  The brighter green is kept for icons and for the second heading line, where it sits on
  the dark background at 6.7:1.
*/

.hero-finder {
  --hero-finder-bg: #0b0e12;
  --hero-finder-panel: #202935;
  --hero-finder-accent: #4faa62;
  --hero-finder-button: #2f7d42;
  --hero-finder-button-hover: #276b39;
  --hero-finder-text: #c7ced8;
  --hero-finder-muted: #aab4c0;
  --hero-finder-hairline: rgba(255, 255, 255, 0.12);

  background-color: var(--hero-finder-bg);
  color: #ffffff;
  padding-bottom: 2.4rem;
}

.hero-finder__banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 42rem;
  padding: 4.8rem 0;
}

.hero-finder__media {
  position: absolute;
  inset: 0;
}

.hero-finder__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

/*
  The photograph is behind the copy on small screens and beside it on large ones, so the
  scrim has to change direction with it: a vertical fade under the text on mobile, a
  horizontal one that hands the right half of the banner to the image on desktop.
*/
.hero-finder__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 14, 18, 0.86) 0%,
    rgba(11, 14, 18, 0.76) 55%,
    var(--hero-finder-bg) 100%
  );
}

.hero-finder__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-finder__copy {
  max-width: 58rem;
}

.hero-finder__heading {
  margin: 0;
  /*
    base.css sets a colour on every h1 from the theme's foreground token, and that rule
    beats the white this section inherits, so the first line has to say white itself.
  */
  color: #ffffff;
  font-size: clamp(3.2rem, 5.4vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 800;
}

.hero-finder__heading-line {
  display: block;
}

.hero-finder__heading-line--accent {
  color: var(--hero-finder-accent);
}

.hero-finder__text {
  margin: 1.8rem 0 0;
  max-width: 46ch;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--hero-finder-text);
}

.hero-finder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.8rem;
}

.hero-finder__button {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.2rem 2.4rem;
  border-radius: 999px;
  border: 0.1rem solid transparent;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero-finder__button--primary {
  background-color: var(--hero-finder-button);
  color: #ffffff;
}

.hero-finder__button--primary:hover {
  background-color: var(--hero-finder-button-hover);
}

.hero-finder__button--secondary {
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.hero-finder__button--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

.hero-finder__button:focus-visible {
  outline: 0.2rem solid var(--hero-finder-accent);
  outline-offset: 0.3rem;
}

.hero-finder__button-icon {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

.hero-finder__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4rem;
  margin: 3.6rem 0 0;
  padding: 0;
  list-style: none;
}

.hero-finder__badge {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.hero-finder__badge-icon {
  width: 3.4rem;
  height: 3.4rem;
  flex-shrink: 0;
  color: var(--hero-finder-accent);
}

.hero-finder__badge-text {
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--hero-finder-muted);
}

.hero-finder__badge-text strong {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  color: #ffffff;
}

@media screen and (min-width: 750px) {
  @media screen and (min-width: 990px) {
  .hero-finder__banner {
    min-height: 52rem;
    padding: 6.4rem 0 4.8rem;
  }

  .hero-finder__media {
    left: 40%;
  }

  /*
    Two scrims: one that hands the copy its half of the banner, and one that dissolves the
    bottom of the photograph into the background so the cards below it sit on flat colour
    instead of on the edge of the image.
  */
  .hero-finder__media::after {
    background:
      linear-gradient(to bottom, rgba(11, 14, 18, 0.55) 0%, rgba(11, 14, 18, 0) 34%),
      linear-gradient(to bottom, rgba(11, 14, 18, 0) 45%, rgba(11, 14, 18, 0.8) 85%, var(--hero-finder-bg) 100%),
      linear-gradient(
        to right,
        var(--hero-finder-bg) 0%,
        rgba(11, 14, 18, 0.7) 26%,
        rgba(11, 14, 18, 0.25) 62%,
        rgba(11, 14, 18, 0.45) 100%
      );
  }

  .hero-finder__copy {
    max-width: 50%;
  }

  /*
    Los distintivos son mas grandes que la columna de texto que los contiene, asi que
    esa fila -y solo ella- se sale hasta donde le hace falta. Sigue quedando por
    delante del degradado, que a esa altura ya ha tapado la foto.
  */
  .hero-finder__badges {
    width: 76vw;
    max-width: 96rem;
  }
}