/* ==== SCSS Utils ==== */
/* ========== Layout & Grid ========== */
/* ========== Fonts ========== */
/* ========== Elderplan Color Palette ========== */
/* Based on Figma designs - 2026-05-18 */
/* ========== Semantic Color Aliases ========== */
/* ========== Spacing ========== */
/* ========== Borders ========== */
/* ========== Z-Index ========== */
/* ========== SVGS ========== */
/* ==== SCSS Utils ==== */
/* ========== Font Weights ========== */
/* ========== Font Sizes ========== */
/* ========== Breakpoints for Mixins ========== */
/* ======= Media Queries ======= */
/* Mobile */
/* Tablet */
/* Desktop */
/* Desktop XL */
/* Desktop XXL */
/* Desktop Wide */
/* Custom media queries */
/* ==== SCSS Utils ==== */
/* ==== SCSS Utils ==== */
/* ======= Media ======= */
/* ======= SVG ======= */
/* ======= Typography ======= */
/* ======= Storybook Goodies ======= */
/* ======= Form Spacing ======= */
/* ======= Input Styles ======= */
/* ==== SCSS Utils ==== */
/* ======= Buttons ======= */
/* Base button styles */
/* Primary button styles */
/* Secondary button styles */
/* Blue button styles */
/* Green button styles */
/* Link button styles */
/* Button Icon styles */
/* Button Icon styles */
/* ==== SCSS Utils ==== */
/* ======= Layout ======= */
/* ======= FLEXBOX MIXINS ======= */
/* ======= GRID MIXINS ======= */
/* ==== SCSS Utils ==== */
/* MJ 7.17.24: Only call utilites like variable definitions and mixins.
* ! Do not add any class or ID selects, or it will render output into EVERY .css file.
* Add styles to global.scss instead to add styles globally.
*/
.h1-huge {
  font-family: "Open Sans", sans-serif;
  font-size: 184px;
  line-height: 1;
  font-weight: 500;
  color: #0075B6;
  font-size: clamp(4rem, 14vw, 14rem);
  text-transform: uppercase;
}

.hero {
  position: relative;
  z-index: 1;
  padding-top: 145px;
  padding-bottom: 48px;
  text-align: center;
}
@media (min-width: 821px) {
  .hero {
    padding-top: 170px;
    padding-bottom: 58px;
  }
}
.hero .ihmec-container {
  position: relative;
  z-index: 1;
}
.hero h1 {
  margin: 0;
  margin-bottom: 16px;
}
@media (min-width: 821px) {
  .hero h1 {
    margin-bottom: 32px;
  }
}
.hero p {
  max-width: 710px;
  margin: 0 auto;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
}
@media (min-width: 821px) {
  .hero p {
    font-size: 22px;
  }
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-image: url("/wp-content/themes/sd_base/dist/images/homepage-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hero-landing {
  position: relative;
  padding-top: 120px;
  padding-bottom: 16px;
  overflow: visible;
}
@media (min-width: 821px) {
  .hero-landing {
    padding-top: 178px;
  }
}
.hero-landing::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 550px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF 100%);
}
.hero-landing::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 550px;
  background-repeat: no-repeat;
  background-image: url("/wp-content/themes/sd_base/dist/images/homepage-bg.jpg");
  background-size: cover;
  background-position: center;
}
.hero-landing h1 {
  color: #333333;
}
.hero-landing .ihmec-container {
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 1200px) {
  .hero-landing .ihmec-container {
    display: flex;
    gap: 50px;
  }
}
.hero-landing__copy {
  max-width: 720px;
}
.hero-landing__copy p {
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 120%;
  color: #454B4E;
}
.hero-landing__copy p.type {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 120%;
  color: #454B4E;
}
.hero-landing__actions {
  padding-top: 24px;
}
.hero-landing__survivors {
  display: flex;
  align-items: center;
  margin-top: 24px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  color: #454B4E;
}
@media screen and (min-width: 1200px) {
  .hero-landing__survivors {
    margin-left: auto;
    align-self: flex-end;
    margin-top: 0;
    margin-bottom: -30px;
  }
}
.hero-landing__survivors .hero-landing__survivors-row {
  display: flex;
}
.hero-landing__survivors .hero-landing__survivors-row a {
  flex: none;
}
.hero-landing__survivors span {
  display: block;
  margin-right: 12px;
}
.hero-landing__survivors img {
  width: 48px;
  height: 48px;
}
.hero-landing__survivors a {
  position: relative;
  margin-left: -12px;
}
.hero-landing__survivors a:first-child {
  margin-left: 0;
}
.hero-landing__survivors a:hover, .hero-landing__survivors a:focus-visible {
  text-decoration: none;
}
.hero-landing__survivors a:hover .tooltip, .hero-landing__survivors a:focus-visible .tooltip {
  display: block;
}
.hero-landing__survivors .tooltip {
  position: absolute;
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  padding: 8px 16px;
  color: #333333;
  background: #ffffff;
  left: 50%;
  transform: translateX(-50%);
  top: -48px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  display: none;
  white-space: nowrap;
}
.hero-landing__survivors .tooltip::before {
  content: "";
  position: absolute;
  border-top: 8px solid #ffffff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.hero-landing__survivors .tooltip::after {
  content: "";
  position: absolute;
  border-top: 9px solid #cccccc;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (min-width: 992px) {
  .survivor-page .hero-landing .ihmec-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }
  .survivor-page .hero-landing .ihmec-container .hero-landing__copy {
    max-width: 100%;
    width: 100%;
  }
  .survivor-page .hero-landing .ihmec-container .hero-landing__actions,
  .survivor-page .hero-landing .ihmec-container .hero-landing__survivors {
    width: 50%;
  }
  .survivor-page .hero-landing .ihmec-container .hero-landing__survivors {
    margin-bottom: 0;
  }
  .survivor-page .hero-landing .ihmec-container .hero-landing__survivors span {
    margin-left: auto;
  }
}
/*# sourceMappingURL=hero.css.map */