@property --subpage-gradient-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* Shared subpage navigation */
#sb-navigation > .sb-section {
  background-color: #f7941e !important;
  box-shadow: 0 4px 16px rgba(70, 32, 0, 0.12);
  opacity: 1 !important;
  padding: 8px 20px;
  transform: none !important;
  transition: padding 280ms ease, background-color 280ms ease, box-shadow 280ms ease !important;
}

#sb-navigation .sb-top-header__brand,
#sb-navigation .sb-top-header__brand .logo {
  height: 88px;
  width: 88px;
}

#sb-navigation .sb-top-header__brand .logo {
  max-height: none;
  max-width: none;
  object-fit: contain;
  transition: width 280ms ease, height 280ms ease, transform 280ms ease;
}

#sb-navigation .sb-nav__link:not(.sb-button) {
  position: relative;
  transform: translateY(0);
  transition: color 240ms ease, transform 240ms ease;
}

#sb-navigation .sb-nav__link:not(.sb-button)::after {
  background: #fff;
  border-radius: 2px;
  bottom: 1px;
  content: '';
  height: 2px;
  left: 50%;
  opacity: 0;
  position: absolute;
  right: 50%;
  transition: right 240ms ease, left 240ms ease, opacity 180ms ease;
}

#sb-navigation .sb-nav__link:not(.sb-button):hover,
#sb-navigation .sb-nav__link:not(.sb-button):focus-visible {
  color: #fff !important;
  transform: translateY(-2px);
}

#sb-navigation .sb-nav__link:not(.sb-button):hover::after,
#sb-navigation .sb-nav__link:not(.sb-button):focus-visible::after {
  left: 0;
  opacity: 1;
  right: 0;
}

#sb-navigation .sb-button--nav,
#sb-navigation .sb-button--nav:link,
#sb-navigation .sb-button--nav:visited {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
}

#sb-navigation .sb-button--nav:hover,
#sb-navigation .sb-button--nav:focus-visible,
#sb-navigation .sb-button--nav:active {
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 8px 20px rgba(88, 40, 0, 0.18);
  color: #d76e00 !important;
  transform: translateY(-2px);
}

#sb-navigation.sb-nav--fixed > .sb-section {
  background-color: #f7941e !important;
  box-shadow: 0 6px 20px rgba(70, 32, 0, 0.16);
  padding-bottom: 5px;
  padding-top: 5px;
}

#sb-navigation.sb-nav--fixed .sb-top-header__brand,
#sb-navigation.sb-nav--fixed .sb-top-header__brand .logo {
  height: 60px;
  width: 60px;
}

#sb-navigation.sb-nav--fixed .sb-button--nav {
  padding: 8px 24px;
}

/* Shared photo sections */
#sb-page-structure .has-background .sb-background {
  animation: subpage-gradient-drift 18s ease-in-out infinite alternate;
  background-position: var(--subpage-gradient-x) 50%, center center !important;
  background-size: 108% 100%, cover !important;
}

#sb-page-structure .has-background .sb-hero__content-wrapper {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
}

@keyframes subpage-gradient-drift {
  from {
    --subpage-gradient-x: 0%;
  }

  to {
    --subpage-gradient-x: 6%;
  }
}

/* Shared content button motion */
#sb-page-structure .sb-button {
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
}

#sb-page-structure .sb-button:hover,
#sb-page-structure .sb-button:focus-visible {
  box-shadow: 0 8px 20px rgba(88, 40, 0, 0.16);
  transform: translateY(-2px);
}

#sb-page-structure .sb-button--primary:hover,
#sb-page-structure .sb-button--primary:focus-visible {
  background-color: #e57d0b !important;
  border-color: #e57d0b !important;
  color: #fff !important;
}

@media (max-width: 767px) {
  #sb-navigation > .sb-section {
    padding: 8px 16px;
  }

  #sb-navigation .sb-top-header__brand,
  #sb-navigation .sb-top-header__brand .logo {
    height: 54px;
    width: 54px;
  }

  #sb-navigation.sb-nav--fixed > .sb-section {
    padding-bottom: 6px;
    padding-top: 6px;
  }

  #sb-navigation.sb-nav--fixed .sb-top-header__brand,
  #sb-navigation.sb-nav--fixed .sb-top-header__brand .logo {
    height: 44px;
    width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sb-page-structure .has-background .sb-background {
    animation: none;
  }

  #sb-navigation *,
  #sb-page-structure .sb-button {
    transition-duration: 0.01ms !important;
  }
}