@font-face {
  font-family: "Marcellus";
  src: url("Marcellus.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Roobert";
  src: url("Roobert-Light.woff2") format("woff2");
  font-display: swap;
  font-weight: 300;
}

.feature-slider, .feature-slider * { box-sizing: border-box; }
.feature-slider button, .feature-slider a { -webkit-tap-highlight-color: transparent; }
.feature-slider button { font: inherit; cursor: pointer; }

.feature-slider {
  --edge: clamp(26px, 5vw, 88px);
  /* Extra room below the controls for cards on every screen size. */
  --card-space: 60px;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: calc(650px + var(--card-space));
  min-height: 0;
  overflow: hidden;
  background: #263135;
  color: #fff;
  font: 300 18px/1.45 "Roobert", Arial, sans-serif;
  touch-action: pan-y;
}
.feature-slider:focus { outline: none; }
.feature-slider :is(a, button):focus-visible,
.feature-slider:focus-visible { outline: 2px solid #c5e6d8; outline-offset: 5px; }

.feature-slider__visuals, .feature-slider__visual, .feature-slider__visual picture,
.feature-slider__visual img { position: absolute; inset: 0; width: 100%; height: 100%; }
.feature-slider__visuals { z-index: -1; pointer-events: none; }
.feature-slider__visual {
  opacity: 0;
  transition: opacity .8s ease;
  overflow: hidden;
  background: #354249;
}
.feature-slider__visual.is-visible { opacity: 1; z-index: 1; }
.feature-slider__visual img {
  display: block;
  max-width: none;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.07);
  transition: transform 16s linear;
}
.feature-slider__visual.is-visible img { transform: scale(1); }
.feature-slider__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 14, 17, .61) 0%, rgba(8, 16, 18, .24) 67%, rgba(0, 0, 0, .15) 100%),
              linear-gradient(0deg, rgba(1, 8, 11, .33), transparent 44%);
}
.feature-slider__visual--light::after {
  background: linear-gradient(90deg, rgba(5, 14, 17, .48), rgba(6, 15, 17, .12) 75%),
              linear-gradient(0deg, rgba(1, 8, 11, .28), transparent 50%);
}

.feature-slider__layout {
  display: flex;
  flex-direction: column;
  width: min(100%, 1600px);
  height: 100%;
  margin-inline: auto;
  padding: 48px var(--edge) calc(75px + var(--card-space));
}
.feature-slider__header { display: flex; align-items: center; gap: 30px; flex: none; }
.feature-slider__identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.feature-slider__labels { min-width: 0; }
.feature-slider__label { display: none; margin: 0; color: inherit; font: inherit; font-size: 15px; line-height: 1.3; letter-spacing: .035em; white-space: nowrap; }
.feature-slider__label.is-visible { display: block; }
.feature-slider__play {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  color: white;
  border: 0;
  background: transparent;
  transition: opacity .2s;
}
.feature-slider__play:hover { opacity: .65; }
.feature-slider__play-icon { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.feature-slider__play.is-paused .feature-slider__play-icon { width: 0; height: 0; border-block: 7px solid transparent; border-left: 10px solid currentColor; border-right: 0; margin-left: 3px; }
.feature-slider__steps { display: flex; gap: 6px; width: min(417px, 35vw); }
.feature-slider__step {
  position: relative;
  display: block;
  flex: 1;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}
.feature-slider__step::before, .feature-slider__meter {
  position: absolute;
  display: block;
  left: 0;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
}
.feature-slider__step::before { content: ""; width: 100%; background: rgba(255, 255, 255, .44); transition: background .2s; }
.feature-slider__step:hover::before { background: rgba(255, 255, 255, .82); }
.feature-slider__meter { width: 0; background: #d5efe3; z-index: 1; }
.feature-slider__step.is-complete .feature-slider__meter { width: 100%; }

.feature-slider__stories { display: grid; grid-template-areas: "story"; flex: 1; min-height: 0; }
.feature-slider__story {
  grid-area: story;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 58px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease, visibility .6s;
}
/* Keep the desktop/tablet heading, description and CTA together near the middle. */
@media (min-width: 768px) {
  .feature-slider__story { justify-content: center; gap: clamp(20px, 3vw, 32px); padding-top: 0; }
  .feature-slider__actions { padding-top: 20px; }
}
.feature-slider__story.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.feature-slider__headline { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* Navigation follows the bubble (or leads the heading when there is no bubble). */
.feature-slider__story-navigation { display: flex; align-items: center; gap: 14px; max-width: 100%; }
.feature-slider__story-navigation .feature-slider__steps { width: min(417px, 35vw); }
.feature-slider__cta-anchor { position: relative; display: inline-flex; align-items: center; flex: none; min-height: 45px; }
@media (min-width: 1025px) {
  .feature-slider__bubble--hide-desktop, .feature-slider__steps--hide-desktop, .feature-slider__play--hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .feature-slider__bubble--hide-tablet, .feature-slider__steps--hide-tablet, .feature-slider__play--hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
  .feature-slider__bubble--hide-mobile, .feature-slider__steps--hide-mobile, .feature-slider__play--hide-mobile { display: none !important; }
  .feature-slider__story-navigation { width: 100%; }
  .feature-slider__story-navigation .feature-slider__steps { flex: 1; width: auto; margin-top: 0; }
  .feature-slider__cta-anchor { flex: 1 1 0; min-width: 0; justify-content: center; }
  .feature-slider__cta-anchor .feature-slider__link { flex: 1; min-width: 0; }
}
.feature-slider__bubble {
  display: inline-block;
  max-width: 100%;
  padding: 7px 18px;
  border-radius: 24px;
  background-color: #fff;
  color: #131d37;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}
.feature-slider .fs-text-shadow { text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.feature-slider .fs-box-shadow { box-shadow: 0 5px 18px rgba(0, 0, 0, .35); }
.feature-slider__story h1, .feature-slider__story h2 {
  width: min(100%, 980px);
  margin: 0;
  color: #fff;
  font: 400 clamp(52px, 5vw, 68px)/1.09 "Marcellus", Georgia, serif;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-transform: none;
}
.feature-slider__story h2 { max-width: none; }
.feature-slider__footer { width: 100%; }
.feature-slider__footer p { max-width: 545px; margin: 0 0 16px; font-size: 18px; line-height: 1.3; letter-spacing: .015em; }
.feature-slider__footer .feature-slider__description--mobile { display: none; }
.feature-slider__actions { display: flex; align-items: center; }
.feature-slider .feature-slider__link {
  --icon-font-size: 1em;
  --btn-pt: 8px;
  --btn-pe: 25px;
  --btn-pb: 8px;
  --btn-ps: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 150px;
  min-height: 45px;
  padding: 8px 25px 8px 25px;
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 10px 10px 10px 10px;
  color: #131D37;
  fill: #131D37;
  font: 300 16px/1.2 "Marcellus", Sans-serif;
  text-align: center;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.feature-slider .feature-slider__link:hover { background-color: #FFFFFF; color: #131D37; }
.feature-slider__link-icon {
  display: block;
  flex: none;
  width: var(--icon-font-size);
  height: var(--icon-font-size);
  color: #A6735C;
  fill: none;
}
.feature-slider__arrow { display: none; place-items: center; width: 40px; height: 44px; padding: 2px; background: none; border: 0; color: #fff; }
.feature-slider__arrow svg { display: block; width: 32px; height: 32px; }
.feature-slider__arrow:hover { opacity: .68; }

@media (max-width: 1050px) {
  .feature-slider__header { gap: 20px; }
  .feature-slider__label { font-size: 13px; }
  .feature-slider__steps { width: min(350px, 34vw); }
  .feature-slider__story h1, .feature-slider__story h2 { font-size: clamp(52px, 6vw, 64px); }
}
@media (max-width: 767px) {
  .feature-slider {
    --edge: clamp(22px, 5vw, 40px);
  }
  .feature-slider__layout { padding-top: 31px; }
  .feature-slider__visual img { object-position: center; }
  .feature-slider__visual::after {
    background: linear-gradient(0deg, rgba(4, 10, 13, .42), rgba(7, 15, 18, .14) 55%, rgba(5, 11, 15, .38)),
                linear-gradient(90deg, rgba(3, 10, 14, .24), transparent 90%);
  }
  .feature-slider__header { display: block; }
  .feature-slider__identity { justify-content: space-between; gap: 10px; }
  .feature-slider__label { font-size: 12px; white-space: normal; letter-spacing: .02em; }
  .feature-slider__label span { display: block; }
  .feature-slider__play { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; }
  .feature-slider__steps { width: 100%; margin-top: 11px; gap: 6px; }
  .feature-slider__step { height: 21px; }
  .feature-slider__story { padding-top: clamp(110px, 19svh, 175px); }
  .feature-slider__story.has-mobile-description { padding-top: clamp(32px, 7svh, 85px); }
  .feature-slider__story h1, .feature-slider__story h2 { font-size: clamp(40px, 10vw, 65px); line-height: 1.15; letter-spacing: -.03em; margin-inline: auto; text-align: center; }
  .feature-slider__headline { align-items: center; }
  .feature-slider__footer .feature-slider__description--desktop { display: none; }
  .feature-slider__footer .feature-slider__description--mobile { display: block; margin-inline: auto; text-align: center; font-size: 15px; }
  .feature-slider__actions { justify-content: space-between; gap: clamp(6px, 3vw, 18px); }
  .feature-slider__link { flex: 1; min-width: 0; max-width: 350px; min-height: 45px; }
  .feature-slider__link-icon { display: none; }
  .feature-slider__arrow { display: grid; flex: none; }
}
@media (max-width: 360px) {
  .feature-slider__story h1, .feature-slider__story h2 { font-size: 37px; }
  .feature-slider__link { padding-inline: 8px; }
  .feature-slider__arrow { width: 32px; }
}
@media (max-height: 760px) and (min-width: 768px) {
  .feature-slider__layout { padding-bottom: calc(75px + var(--card-space)); }
  .feature-slider__story h1, .feature-slider__story h2 { font-size: clamp(44px, 8.5svh, 68px); }
  .feature-slider__footer p { font-size: 18px; line-height: 1.25; margin-bottom: 16px; }
}
@media (max-height: 500px) and (max-width: 767px) {
  .feature-slider__story h1, .feature-slider__story h2 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-slider__visual, .feature-slider__visual img, .feature-slider__story,
  .feature-slider__link, .feature-slider__play, .feature-slider__step::before { transition-duration: 0s; }
  .feature-slider__visual img { transform: none; }
}