@charset "UTF-8";

/* Hero images */

:root {
  /* Shared with main.css */
  --hero-test-gradient: radial-gradient(271.91% 141.42% at 100% 0%, var(--color-pink) 0%, var(--color-magenta) 50%, var(--color-plum-900) 100%);

  /* Home hero, base tier */
  --hero-home-image:
    image-set(
      url("../images/hero/home/hero-home-375.webp") type("image/webp"),
      url("../images/hero/home/hero-home-375.png") type("image/png")
    );
  --hero-home-ratio: 375 / 568;

  /* Lift below hero image */
  --hero-content-lift: -52px;
  --hero-home-content-max: 280px;
  --hero-home-content-bottom: 60px;
}

@media (min-width: 376px) {
  :root {
    --hero-home-content-max: 320px;
  }
}

@media (min-width: 480px) {
  :root {
    --hero-home-content-max: 869px;
  }
}

@media (min-width: 768px) {
  :root {
    --hero-home-image:
      image-set(
        url("../images/hero/home/hero-home-768.webp") type("image/webp"),
        url("../images/hero/home/hero-home-768.png") type("image/png")
      );
    --hero-home-ratio: 768 / 659;
    --hero-content-lift: 72px;
    --hero-home-content-bottom: 96px;
  }
}

@media (min-width: 1024px) {
  :root {
    --hero-home-image:
      image-set(
        url("../images/hero/home/hero-home-1024.webp") type("image/webp"),
        url("../images/hero/home/hero-home-1024.png") type("image/png")
      );
    --hero-home-ratio: 1024 / 724;
  }
}

@media (min-width: 1440px) {
  :root {
    --hero-home-image:
      image-set(
        url("../images/hero/home/hero-home-1440.webp") type("image/webp"),
        url("../images/hero/home/hero-home-1440.png") type("image/png")
      );
    --hero-home-ratio: 1440 / 1018;
    /* No overlap from 1440 */
    --hero-content-lift: 0px;
    --hero-home-content-bottom: 160px;
  }
}

@media (min-width: 1920px) {
  :root {
    --hero-home-image:
      image-set(
        url("../images/hero/home/hero-home-1920.webp") type("image/webp"),
        url("../images/hero/home/hero-home-1920.png") type("image/png")
      );
    --hero-home-ratio: 1920 / 1020;
  }
}

/* Home combined hero */

main .row.hero-combined-row {
  width: 100%;
  max-width: none !important;
  margin: 0;
  padding: 0 !important;
  background: transparent;
  overflow: visible;
}

main .row.hero-combined-row > .hero-combined {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

main .hero-combined {
  position: relative;
  width: 100%;
  background: var(--hero-test-gradient);
  overflow: visible;
}

main .hero-combined__media-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
}

main .hero-combined .hero-image__media {
  width: 100%;
  max-width: none;
  aspect-ratio: var(--hero-home-ratio);
  /* Beats inline background-image */
  background-image: var(--hero-home-image) !important;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* Lock-up baked into artwork */
main .hero-combined .hero-image__mark {
  display: none;
}

main .hero-combined__content-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max-wide);
  margin: calc(var(--hero-content-lift) * -1) auto 0;
  padding: 0 var(--container-padding-wide) var(--hero-home-content-bottom);
}

main .hero-combined .hero-content {
  width: 100%;
  max-width: var(--hero-home-content-max);
  margin: 0;
  padding: 0;
}

main .hero-combined .hero-content-title {
  margin: 0 0 40px !important;
  color: var(--color-white);
  font-family: "acumin-variable", sans-serif;
  font-stretch: semi-condensed;
  font-size: 34px !important;
  font-style: normal;
  font-weight: 800;
  line-height: 42px !important;
  letter-spacing: -1.02px !important;
}

main .hero-combined .hero-content-body {
  margin: 0;
  color: var(--color-white);
  font-family: "Lato", sans-serif;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 24px !important;
  text-align: left;
}

main .hero-combined .hero-content-body + .hero-content-body {
  margin-top: 12px;
}

main .hero-combined .hero-content-body strong,
main .hero-combined .hero-content-accent {
  font-weight: 700;
}

main .hero-combined .hero-content-accent {
  color: var(--color-pink);
}

main .hero-combined .wp-block-cherry-button.hero-content-button,
main .hero-combined .button.button__white.hero-content-button,
main .hero-combined a.button.button__white.hero-content-button {
  display: inline-flex;
  margin-top: 40px !important;
  height: auto !important;
}

main .hero-combined .wp-block-cherry-button.hero-content-button span,
main .hero-combined .button.button__white.hero-content-button span,
main .hero-combined a.button.button__white.hero-content-button span {
  color: var(--color-black) !important;
}

@media (max-width: 767px) {
  main .hero-combined__content-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 768px) {
  main .hero-combined .hero-content-title {
    font-size: clamp(40px, 5.625vw, 72px) !important;
    line-height: clamp(48px, 6.25vw, 80px) !important;
    letter-spacing: clamp(-2.16px, -0.169vw, -1.2px) !important;
    margin-bottom: clamp(32px, 3.125vw, 40px) !important;
  }

  main .hero-combined .hero-content-body {
    max-width: 869px;
    font-size: clamp(18px, 1.719vw, 22px) !important;
    line-height: clamp(28px, 2.344vw, 30px) !important;
  }

  main .hero-combined .wp-block-cherry-button.hero-content-button,
  main .hero-combined .button.button__white.hero-content-button,
  main .hero-combined a.button.button__white.hero-content-button {
    margin-top: clamp(40px, 5vw, 64px) !important;
  }
}

@media (min-width: 1440px) {
  main .hero-combined .hero-content-title {
    font-size: 72px !important;
    line-height: 80px !important;
    letter-spacing: -2.16px !important;
    margin-bottom: 40px !important;
  }

  main .hero-combined .hero-content-body {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  main .hero-combined .wp-block-cherry-button.hero-content-button,
  main .hero-combined .button.button__white.hero-content-button,
  main .hero-combined a.button.button__white.hero-content-button {
    margin-top: 64px !important;
  }
}

/* About / Approach hero */

.wp-block-cherry-hero-section.simple-page-hero {
  /* Base tier, per-page below */
  --page-hero-ratio: 375 / 568;
  --page-hero-heading-x: 4.2667%;
  --page-hero-heading-w: 91.4667%;
  --page-hero-heading-size: 34px;
  --page-hero-heading-leading: 42px;
  --page-hero-heading-tracking: -1.02px;

  position: relative;
  display: block;
  min-height: 0;
  height: auto;
  aspect-ratio: var(--page-hero-ratio);
  background-image: var(--page-hero-image);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.wp-block-cherry-hero-section.simple-page-hero::after {
  content: none;
}

.wp-block-cherry-hero-section.simple-page-hero .hero-text-overlay {
  position: absolute;
  top: var(--page-hero-heading-y);
  left: var(--page-hero-heading-x);
  right: auto;
  bottom: auto;
  z-index: 2;
  display: block;
  width: var(--page-hero-heading-w);
  max-width: calc(100% - (var(--page-hero-heading-x) * 2));
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  text-align: left;
}

.wp-block-cherry-hero-section.simple-page-hero .hero-text-overlay > div {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* Drop authored line break */
@media (max-width: 1023px) {
  .wp-block-cherry-hero-section.simple-page-hero .hero-text-overlay .hero-heading br {
    display: contents;
  }
}

.wp-block-cherry-hero-section.simple-page-hero .hero-text-overlay .hero-heading {
  margin: 0;
  display: block;
  color: var(--White, var(--color-white));
  text-shadow: 0 0 100px var(--color-black);
  font-family: "acumin-variable", sans-serif;
  font-size: var(--page-hero-heading-size);
  font-style: normal;
  font-weight: 800;
  line-height: var(--page-hero-heading-leading);
  letter-spacing: var(--page-hero-heading-tracking);
}

.wp-block-cherry-hero-section.simple-page-hero .hero-text-overlay .hero-heading .hero-color {
  color: var(--color-pink) !important;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.wp-block-cherry-hero-section.simple-page-hero .hero-text-overlay .hero-paragraph {
  max-width: min(700px, 100%);
  margin-top: 40px;
}

@media (min-width: 768px) {
  .wp-block-cherry-hero-section.simple-page-hero {
    --page-hero-ratio: 768 / 659;
    --page-hero-heading-x: 10.4167%;
    --page-hero-heading-w: 44.6615%;
  }
}

@media (min-width: 1024px) {
  .wp-block-cherry-hero-section.simple-page-hero {
    --page-hero-ratio: 1024 / 724;
    --page-hero-heading-x: 7.8125%;
    /* Wider box keeps break */
    --page-hero-heading-w: 900px;
    --page-hero-heading-size: 72px;
    --page-hero-heading-leading: 80px;
    --page-hero-heading-tracking: -2.16px;
  }
}

@media (min-width: 1440px) {
  .wp-block-cherry-hero-section.simple-page-hero {
    --page-hero-ratio: 1440 / 1018;
    --page-hero-heading-x: 5.5556%;
  }
}

@media (min-width: 1920px) {
  .wp-block-cherry-hero-section.simple-page-hero {
    --page-hero-ratio: 1920 / 1020;
    --page-hero-heading-x: 17.7604%;
  }
}

main .about-hero-combined .row.hero-content-row {
  margin-top: calc(var(--hero-content-lift) * -1) !important;
}

/* About: artwork and heading */

.page-hero--about {
  --page-hero-image:
    image-set(
      url("../images/hero/about/hero-about-375.webp") type("image/webp"),
      url("../images/hero/about/hero-about-375.png") type("image/png")
    );
  --page-hero-heading-y: 65.493%;
}

@media (min-width: 768px) {
  .page-hero--about {
    --page-hero-image:
      image-set(
        url("../images/hero/about/hero-about-768.webp") type("image/webp"),
        url("../images/hero/about/hero-about-768.png") type("image/png")
      );
    --page-hero-heading-y: 56.4492%;
  }
}

@media (min-width: 1024px) {
  .page-hero--about {
    --page-hero-image:
      image-set(
        url("../images/hero/about/hero-about-1024.webp") type("image/webp"),
        url("../images/hero/about/hero-about-1024.png") type("image/png")
      );
    --page-hero-heading-y: 36.8785%;
  }
}

@media (min-width: 1440px) {
  .page-hero--about {
    --page-hero-image:
      image-set(
        url("../images/hero/about/hero-about-1440.webp") type("image/webp"),
        url("../images/hero/about/hero-about-1440.png") type("image/png")
      );
    --page-hero-heading-y: 26.2279%;
  }
}

@media (min-width: 1920px) {
  .page-hero--about {
    --page-hero-image:
      image-set(
        url("../images/hero/about/hero-about-1920.webp") type("image/webp"),
        url("../images/hero/about/hero-about-1920.png") type("image/png")
      );
    --page-hero-heading-y: 26.1765%;
  }
}

/* Approach: artwork and heading */

.page-hero--approach {
  --page-hero-image:
    image-set(
      url("../images/hero/approach/hero-approach-375.webp") type("image/webp"),
      url("../images/hero/approach/hero-approach-375.png") type("image/png")
    );
  --page-hero-heading-y: 58.0986%;
}

@media (min-width: 768px) {
  .page-hero--approach {
    --page-hero-image:
      image-set(
        url("../images/hero/approach/hero-approach-768.webp") type("image/webp"),
        url("../images/hero/approach/hero-approach-768.png") type("image/png")
      );
    --page-hero-heading-y: 50.0759%;
  }
}

@media (min-width: 1024px) {
  .page-hero--approach {
    --page-hero-image:
      image-set(
        url("../images/hero/approach/hero-approach-1024.webp") type("image/webp"),
        url("../images/hero/approach/hero-approach-1024.png") type("image/png")
      );
    --page-hero-heading-y: 36.8785%;
  }
}

@media (min-width: 1440px) {
  .page-hero--approach {
    --page-hero-image:
      image-set(
        url("../images/hero/approach/hero-approach-1440.webp") type("image/webp"),
        url("../images/hero/approach/hero-approach-1440.png") type("image/png")
      );
    --page-hero-heading-y: 26.2279%;
  }
}

@media (min-width: 1920px) {
  .page-hero--approach {
    --page-hero-image:
      image-set(
        url("../images/hero/approach/hero-approach-1920.webp") type("image/webp"),
        url("../images/hero/approach/hero-approach-1920.png") type("image/png")
      );
    --page-hero-heading-y: 26.1765%;
  }
}

/* image-set() fallback */

@supports not (background-image: image-set(url("../images/hero/home/hero-home-375.webp") type("image/webp"))) {
  :root {
    --hero-home-image: url("../images/hero/home/hero-home-375.png");
  }
  .page-hero--about {
    --page-hero-image: url("../images/hero/about/hero-about-375.png");
  }
  .page-hero--approach {
    --page-hero-image: url("../images/hero/approach/hero-approach-375.png");
  }

  @media (min-width: 768px) {
    :root {
      --hero-home-image: url("../images/hero/home/hero-home-768.png");
    }
    .page-hero--about {
      --page-hero-image: url("../images/hero/about/hero-about-768.png");
    }
    .page-hero--approach {
      --page-hero-image: url("../images/hero/approach/hero-approach-768.png");
    }
  }

  @media (min-width: 1024px) {
    :root {
      --hero-home-image: url("../images/hero/home/hero-home-1024.png");
    }
    .page-hero--about {
      --page-hero-image: url("../images/hero/about/hero-about-1024.png");
    }
    .page-hero--approach {
      --page-hero-image: url("../images/hero/approach/hero-approach-1024.png");
    }
  }

  @media (min-width: 1440px) {
    :root {
      --hero-home-image: url("../images/hero/home/hero-home-1440.png");
    }
    .page-hero--about {
      --page-hero-image: url("../images/hero/about/hero-about-1440.png");
    }
    .page-hero--approach {
      --page-hero-image: url("../images/hero/approach/hero-approach-1440.png");
    }
  }

  @media (min-width: 1920px) {
    :root {
      --hero-home-image: url("../images/hero/home/hero-home-1920.png");
    }
    .page-hero--about {
      --page-hero-image: url("../images/hero/about/hero-about-1920.png");
    }
    .page-hero--approach {
      --page-hero-image: url("../images/hero/approach/hero-approach-1920.png");
    }
  }
}
