@keyframes SiteBanner_fIn__MLcEV {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@property --background-color {
  syntax       : "<color>";
  initial-value: var(--color-green-50);
  inherits     : false
}

.SiteBanner_siteBanner__XcmVh {
  --background-color: var(--color-orange-50);
  --background-hover: var(--color-orange-60);
  background-color  : var(--background-color);
  color             : var(--color-white);
  position          : relative;
  z-index           : 10000;
  transition        : color var(--timing-fade) var(--easing-fade)
}

.SiteBanner_siteBanner__XcmVh a span {
  display : inline-block;
  padding : var(--space-8) var(--space-32);
  position: relative
}

.SiteBanner_siteBanner__XcmVh a span:before {
  content         : "";
  display         : inline-block;
  width           : .75em;
  height          : .75em;
  background-color: var(--background-hover);
  border-radius   : 50px;
  position        : absolute;
  top             : calc(50%);
  left            : 0;
  transform       : translate(-50%, -50%)
}

.SiteBanner_siteBanner__XcmVh a {
  display: block;
  height : 2rem;
  color  : currentColor
}

.SiteBanner_siteBanner__XcmVh a.SiteBanner_mounted__0vBHr {
  animation: SiteBanner_fIn__MLcEV var(--timing-fade) var(--easing-fade) both
}

.SiteBanner_siteBannerClosed__gRQvH {
  display: none
}

.SiteBanner_container__moGWm {
  position: relative
}

.SiteBanner_close__57lhr {
  position        : absolute;
  top             : 0;
  right           : 0;
  height          : 100%;
  z-index         : 100;
  padding         : 0 .2rem 0 var(--space-48);
  background-image: linear-gradient(to left, var(--background-color) 50%, transparent);
  display         : flex;
  align-items     : center;
  justify-content : center
}

.SiteBanner_container__moGWm button {
  background: none;
  outline   : none;
  border    : none;
  padding   : .4rem
}

.SiteBanner_container__moGWm button .SiteBanner_inner__nuvwD {
  z-index         : 3;
  border          : none;
  background-color: var(--color-white);
  width           : 1rem;
  height          : 1rem;
  border-radius   : var(--space-24);
  padding         : .1em;
  cursor          : pointer;
  flex            : 0 0 auto;
  transition      : background-color var(--easing-fade) var(--timing-fade)
}

.SiteBanner_container__moGWm button:focus .SiteBanner_inner__nuvwD,
.SiteBanner_container__moGWm button:hover .SiteBanner_inner__nuvwD {
  background-color: var(--color-pale-blue-50)
}

.SiteBanner_container__moGWm button svg {
  width : 100%;
  height: 100%
}

.SiteBanner_container__moGWm path {
  stroke      : var(--background-color);
  stroke-width: 2px
}

.SiteFooter_wrapper__klQR_ {
  --max-height       : max(min(75vh, 100vw), 30rem);
  --footer-inner-min : 2.5rem;
  --footer-inner-max : 16rem;
  --footer-min-size  : calc(var(--footer-inner-min) + 2 * var(--space-16));
  --footer-max-size  : calc(var(--footer-inner-max) + 2 * var(--space-16));
  --footer-top-row   : var(--footer-inner-min);
  --footer-bottom-row: 2rem;
  position           : relative;
  z-index            : 0;
  background-color   : var(--color-pale-blue-50)
}

.SiteFooter_siteFooter__ggnN2 {
  background-color       : var(--glass-color);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter        : blur(var(--glass-blur));
  border-radius          : var(--space-24);
  padding                : var(--space-24) var(--space-24);
  margin                 : var(--space-32) 0;
  pointer-events         : auto;
  transition             : height var(--timing-movement) var(--easing-movement), background-color var(--timing-fade) var(--easing-fade);
  box-shadow             : var(--elevation-medium);
  overflow               : clip;
  display                : grid;
  grid-auto-flow         : dense;
  align-items            : start;
  grid-gap               : var(--space-24);
  gap                    : var(--space-24);
  font-size              : var(--font-size-body)
}

.SiteFooter_siteFooter__ggnN2:focus,
.SiteFooter_siteFooter__ggnN2:hover {
  background-color: var(--color-white)
}

.SiteFooter_logo___4XY3 svg {
  height: 1.5em
}

.SiteFooter_logo___4XY3 path {
  fill: var(--color-blue)
}

.SiteFooter_logoSizer__zKYF7 {
  max-width: 120px;
  height   : var(--footer-top-row)
}

.SiteFooter_nav__nFJ__ {
  display : grid;
  grid-gap: var(--space-16);
  gap     : var(--space-16)
}

.SiteFooter_nav__nFJ__ h4 {
  height     : var(--footer-top-row);
  line-height: var(--footer-top-row)
}

.SiteFooter_nav__nFJ__ nav {
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
  gap           : var(--space-8)
}

.SiteFooter_copywrite__elM1L {
  display    : none;
  align-items: center
}

.SiteFooter_socials__TI9kV {
  display    : flex;
  align-items: center;
  gap        : 1rem
}

.SiteFooter_socials__TI9kV svg {
  height: 1em
}

.SiteFooter_socials__TI9kV a path {
  transition: fill var(--timing-fade) var(--easing-fade)
}

.SiteFooter_socials__TI9kV a:focus path,
.SiteFooter_socials__TI9kV a:hover path {
  fill: var(--color-grey-90)
}

.SiteFooter_ballPoolContainer__wilRc {
  display : none;
  position: relative;
  height  : 100%
}

.SiteFooter_ballPool__GP_w7 {
  width   : 100%;
  height  : var(--max-height);
  position: fixed;
  bottom  : 0;
  z-index : 0
}

.SiteFooter_ballPool__GP_w7 canvas {
  width : 100%;
  height: 100%
}

@media screen and (min-width:56rem) {
  .SiteFooter_wrapper__klQR_ {
    height: var(--max-height)
  }

  .SiteFooter_sticky__fQdHn {
    position      : fixed;
    bottom        : 0;
    left          : 0;
    width         : 100%;
    pointer-events: none
  }

  .SiteFooter_expander__tgYR0 {
    height: 100%
  }

  .SiteFooter_siteFooter__ggnN2 {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows   : calc(var(--footer-inner-max) - var(--space-24) - var(--footer-bottom-row)) var(--footer-bottom-row);
    height               : var(--footer-min-size)
  }

  .SiteFooter_expander__tgYR0.SiteFooter_expanded__mP_3w .SiteFooter_siteFooter__ggnN2 {
    height: var(--footer-max-size)
  }

  .SiteFooter_logo___4XY3 {
    grid-column: 1/span 3
  }

  .SiteFooter_nav__nFJ__ {
    grid-column: span 3
  }

  .SiteFooter_copywrite__elM1L {
    display    : flex;
    grid-row   : 2;
    grid-column: 1/span 4
  }

  .SiteFooter_socials__TI9kV {
    grid-row   : 2;
    grid-column: 7/-1
  }

  .SiteFooter_ballPoolContainer__wilRc {
    display: block
  }

  .SiteFooter_copywrite__elM1L,
  .SiteFooter_socials__TI9kV {
    height: 2rem
  }

  .SiteFooter_copywrite__elM1L,
  .SiteFooter_nav__nFJ__ nav,
  .SiteFooter_socials__TI9kV {
    opacity   : 0;
    transition: opacity .4s ease .1ms
  }

  .SiteFooter_expander__tgYR0.SiteFooter_expanded__mP_3w .SiteFooter_copywrite__elM1L,
  .SiteFooter_expander__tgYR0.SiteFooter_expanded__mP_3w .SiteFooter_nav__nFJ__ nav,
  .SiteFooter_expander__tgYR0.SiteFooter_expanded__mP_3w .SiteFooter_socials__TI9kV {
    opacity         : 1;
    transition-delay: .8s
  }

  .SiteFooter_expander__tgYR0.SiteFooter_expanded__mP_3w .SiteFooter_nav__nFJ__ nav {
    transition-delay: .4s
  }
}

@media screen and (min-width:72rem) {
  .SiteFooter_wrapper__klQR_ {
    --footer-inner-min: 2.5rem
  }

  .SiteFooter_logo___4XY3 {
    grid-column: 1/span 6
  }

  .SiteFooter_nav__nFJ__ {
    grid-column: span 2
  }

  .SiteFooter_socials__TI9kV {
    grid-column: 11/-1
  }
}

@media (prefers-reduced-motion:reduce) {
  .SiteFooter_sticky__fQdHn {
    position: relative
  }

  .SiteFooter_expander__tgYR0 {
    height: auto
  }

  .SiteFooter_ballPoolContainer__wilRc {
    display: none
  }

  .SiteFooter_copywrite__elM1L,
  .SiteFooter_nav__nFJ__ nav,
  .SiteFooter_socials__TI9kV {
    opacity: 1
  }

  @media screen and (min-width:56rem) {
    .SiteFooter_wrapper__klQR_ {
      height: calc(2 * var(--space-32) + var(--footer-max-size))
    }

    .SiteFooter_siteFooter__ggnN2 {
      height: var(--footer-max-size)
    }
  }
}