/* Homepage palette: pale mint light fading into lake-green, from the supplied reference. */
.reference-design .hero {
  background: #90c8c4;
  color: #153e3c;
}
.reference-design .hero-slide { isolation: isolate; }
.reference-design .hero-image {
  filter: hue-rotate(-28deg) saturate(.7);
}
.reference-design .hero-shade,
.reference-design .dark-slide .hero-shade {
  background:
    linear-gradient(90deg, rgba(231,243,238,.98) 0%, rgba(220,240,233,.91) 23%, rgba(188,224,215,.56) 47%, rgba(60,147,143,.18) 76%, rgba(22,99,96,.26) 100%),
    linear-gradient(0deg, rgba(69,158,156,.64), rgba(80,167,159,.16) 63%, rgba(56,149,144,.25));
}
.reference-design .dark-slide .hero-image {
  filter: hue-rotate(-37deg) saturate(.62) brightness(1.25);
}
.reference-design .dark-slide .hero-shade {
  background:
    linear-gradient(90deg, #e7f3ee 0%, rgba(220,240,233,.98) 25%, rgba(177,219,208,.79) 46%, rgba(54,145,137,.32) 70%, rgba(25,102,94,.28)),
    linear-gradient(0deg, rgba(69,158,156,.72), rgba(96,177,163,.22));
}
.reference-design .hero h1,
.reference-design .hero h2,
.reference-design .dark-slide { color: #153e3c; }
.reference-design .hero-content > p,
.reference-design .dark-slide .hero-content > p { color: #365e57; }
.reference-design .hero .eyebrow { color: #087f79; }
.reference-design .hero .eyebrow > span { background: #087f79; }
.reference-design .hero-actions .button,
.reference-design .dark-slide .hero-actions .button {
  color: #174d46;
  border-color: #388e84;
}
.reference-design .hero-actions .text-link,
.reference-design .dark-slide .hero-actions .text-link { color: #31695f; }
.reference-design .hero .slide-tab,
.reference-design .hero.is-dark .slide-tab { color: #365f59; }
.reference-design .hero .slide-tab.active,
.reference-design .hero.is-dark .slide-tab.active { color: #006f69; }
.reference-design .hero .slide-tab i,
.reference-design .hero.is-dark .slide-tab i { background: #80b5ab; }
.reference-design .hero .slide-tab.active i,
.reference-design .hero.is-dark .slide-tab.active i { background: #00867d; }
.reference-design .hero .hero-controls button,
.reference-design .hero.is-dark .hero-controls button {
  color: #174d46;
  border-color: #77aaa1;
  background: rgba(225,242,234,.62);
}
.reference-design .hero .creative-note,
.reference-design .hero.is-dark .creative-note,
.reference-design .hero .scroll-cue,
.reference-design .hero.is-dark .scroll-cue {
  color: #234e47;
  text-shadow: 0 1px 8px #e7f3ee;
}
@media (max-width: 760px) {
  .reference-design .hero-shade,
  .reference-design .dark-slide .hero-shade {
    background:
      linear-gradient(90deg, rgba(228,242,236,.98), rgba(216,237,228,.91) 48%, rgba(108,180,162,.32)),
      linear-gradient(0deg, rgba(69,158,156,.78), rgba(80,167,159,.13) 70%);
  }
}