.wp-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: currentColor;
  vertical-align: -0.125em;
}

.wp-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.woodpunch-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--ds-header-separator);
  background-color: var(--brand-surface);
  background-image: none;
  box-shadow: none;
  color: var(--ds-brand-navy);
  transition: transform 150ms ease-out;
}

.woodpunch-header.is-hidden {
  transform: translateY(-100%);
}

.woodpunch-header__top,
.woodpunch-header__nav,
.woodpunch-footer__inner,
.woodpunch-footer__bottom {
  width: min(100%, 1260px);
  margin-inline: auto;
  padding-inline: 52.5px;
}

.woodpunch-header__top {
  display: grid;
  grid-template-areas: "left logo utilities";
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  min-height: 160.7656px;
  padding-top: 20px;
  background-color: var(--brand-surface);
  background-image: none;
  box-shadow: none;
}

.woodpunch-header__left {
  grid-area: left;
  justify-self: start;
  display: flex;
  align-items: center;
  padding-top: 42.875px;
}

.woodpunch-header__logo {
  grid-area: logo;
  justify-self: center;
  display: inline-flex;
  padding: 7.875px;
  line-height: 0;
}

.woodpunch-header__logo img {
  display: block;
  width: 250px;
  height: 114px;
  object-fit: contain;
}

.woodpunch-header__utilities {
  grid-area: utilities;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 42.875px;
}

.woodpunch-header__icon,
.woodpunch-header__toggle {
  display: inline-grid;
  place-items: center;
  width: 46.2px;
  height: 46.2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ds-brand-navy);
  text-decoration: none;
  cursor: pointer;
  transform-origin: center;
}

.woodpunch-header__icon:hover {
  color: var(--ds-brand-navy);
}

.woodpunch-header__toggle:hover {
  color: var(--ds-brand-navy);
}

.woodpunch-header__icon:focus-visible,
.woodpunch-header__toggle:focus-visible,
.woodpunch-drawer a:focus-visible,
.woodpunch-drawer button:focus-visible {
  outline: 2px solid var(--ds-brand-700);
  outline-offset: 3px;
  box-shadow: none;
}

.woodpunch-header__icon .wp-icon,
.woodpunch-header__toggle .wp-icon {
  width: 21px;
  height: 21px;
  transform-origin: center;
  transition: transform var(--ds-duration-default) var(--ds-ease-out-slow);
}

.woodpunch-header__icon:hover .wp-icon,
.woodpunch-header__icon:focus-visible .wp-icon {
  transform: scale(1.07);
}

.woodpunch-header__toggle {
  display: none;
}

.woodpunch-header__toggle .wp-icon--xmark,
.woodpunch-header__toggle[aria-expanded="true"] .wp-icon--bars {
  display: none;
}

.woodpunch-header__toggle[aria-expanded="true"] .wp-icon--xmark {
  display: inline-block;
}

.woodpunch-header__language {
  position: relative;
  display: inline-block;
}

.woodpunch-header__language > .woodpunch-disclosure__trigger {
  display: flex;
  align-items: center;
  min-height: 39.9px;
  padding: 0 28.35px 0 12.6px;
  border: 0;
  background: transparent;
  color: var(--ds-brand-navy);
  font: inherit;
  font-size: 14.7px;
  line-height: 21.7px;
  letter-spacing: 0.63px;
  cursor: pointer;
  list-style: none;
}

.woodpunch-header__language > .woodpunch-disclosure__trigger .wp-icon {
  position: absolute;
  right: 8.4px;
  width: 14.7px;
  height: 16.8px;
  transition: transform var(--ds-duration-default) var(--ds-ease-out-slow);
}

.woodpunch-header__language.is-open > .woodpunch-disclosure__trigger .wp-icon {
  transform: rotate(180deg);
}

.woodpunch-disclosure__options {
  margin: 0;
  padding: 5.25px 0;
  border: 1px solid var(--ds-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--brand-surface);
  box-shadow: none;
  list-style: none;
}

.woodpunch-disclosure__options a,
.woodpunch-disclosure__options button[role="option"] {
  display: grid;
  grid-template-columns: 12.6px minmax(0, 1fr);
  align-items: center;
  gap: 5.25px;
  width: 100%;
  min-height: 44.77px;
  padding: 9.45px 15.75px;
  border: 0;
  background: transparent;
  color: var(--ds-brand-navy-muted);
  font: inherit;
  font-size: 14.7px;
  line-height: 25.9px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.woodpunch-disclosure__options a:hover,
.woodpunch-disclosure__options a:focus-visible,
.woodpunch-disclosure__options button[role="option"]:hover,
.woodpunch-disclosure__options button[role="option"]:focus-visible {
  background: transparent;
  color: var(--ds-brand-navy);
}

.woodpunch-header__language-options {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 25;
  width: 202px;
  transform-origin: top right;
  animation: woodpunch-menu-open var(--ds-duration-default) ease;
}

.woodpunch-disclosure__check {
  display: inline-flex;
  width: 12.6px;
  height: 12.6px;
  align-items: center;
  justify-content: center;
}

.woodpunch-disclosure__check .wp-icon {
  width: 10.5px;
  height: 14.7px;
  margin-right: 2.1px;
}

.woodpunch-header__nav {
  display: flex;
  justify-content: center;
  gap: 0;
  min-height: 70.375px;
  align-items: flex-start;
}

.woodpunch-header__nav-item,
.woodpunch-header__nav > a,
.woodpunch-header__nav-disclosure > .woodpunch-disclosure__trigger {
  display: inline-flex;
  align-items: center;
  min-height: 50.375px;
  padding: 12.6px;
  border: 0;
  background: transparent;
  color: var(--ds-brand-navy-muted);
  font-size: 14.7px;
  line-height: 18.9px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.woodpunch-header__nav-disclosure {
  position: relative;
}

.woodpunch-header__nav-disclosure > .woodpunch-disclosure__trigger {
  padding-right: 28.35px;
}

.woodpunch-header__nav-item:hover,
.woodpunch-header__nav-item:focus-visible,
.woodpunch-header__nav-item[aria-current="page"],
.woodpunch-header__nav-disclosure.is-open > .woodpunch-disclosure__trigger,
.woodpunch-header__nav-disclosure.is-current > .woodpunch-disclosure__trigger {
  color: var(--ds-brand-navy-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 100ms ease, text-decoration-thickness 100ms ease;
}

.woodpunch-header__nav-item:hover,
.woodpunch-header__nav-item:focus-visible,
.woodpunch-header__nav-disclosure > .woodpunch-disclosure__trigger:hover,
.woodpunch-header__nav-disclosure > .woodpunch-disclosure__trigger:focus-visible {
  color: var(--ds-brand-navy);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.woodpunch-nav-icon {
  display: inline-grid;
  place-items: center;
  width: 25.2px;
  height: 25.2px;
  margin-right: 8.4px;
  border-radius: 50%;
  background: var(--ds-brand-100);
  color: var(--ds-brand-700);
  flex: 0 0 25.2px;
}

.woodpunch-nav-icon .wp-icon {
  width: 14.2px;
  height: 14.2px;
}

.woodpunch-header__caret {
  width: 11.016px;
  height: 12.594px;
  margin-left: 8.4px;
  transition: transform var(--ds-duration-default) var(--ds-ease-out-slow);
}

.woodpunch-header__nav-disclosure.is-open .woodpunch-header__caret {
  transform: rotate(180deg);
}

.woodpunch-header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 24;
  width: max-content;
  min-width: 273px;
  max-width: min(357px, calc(100vw - 42px));
  transform-origin: top left;
  animation: woodpunch-menu-open var(--ds-duration-default) ease;
}

.woodpunch-header__dropdown a {
  display: flex;
  min-height: 44px;
  padding: 8.4px 21px;
  color: var(--ds-brand-navy-muted);
  line-height: 25.9px;
  white-space: nowrap;
}

.woodpunch-header__dropdown a:hover,
.woodpunch-header__dropdown a:focus-visible,
.woodpunch-header__dropdown a[aria-current="page"] {
  color: var(--ds-brand-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 100ms ease, text-decoration-thickness 100ms ease;
}

.woodpunch-header__dropdown a:hover,
.woodpunch-header__dropdown a:focus-visible {
  text-decoration-thickness: 2px;
}

.woodpunch-drawer-backdrop {
  position: fixed;
  inset: var(--woodpunch-header-mobile-height, 96.6px) 0 0;
  z-index: 18;
  border: 0;
  background: var(--ds-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-duration-default) var(--ds-ease-out-slow);
}

.woodpunch-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.woodpunch-drawer {
  position: fixed;
  top: var(--woodpunch-header-mobile-height, 96.6px);
  bottom: 0;
  left: 0;
  z-index: 19;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(420px, 100%);
  border-top: 0;
  background: var(--brand-surface);
  box-shadow: none;
  overflow: hidden;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform var(--ds-duration-default) var(--ds-ease-out-slow), visibility 0s linear var(--ds-duration-default);
}

.woodpunch-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.woodpunch-drawer__navigation {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 31.5px 0;
}

.woodpunch-drawer__navigation.has-open-panel {
  overflow: clip;
}

.woodpunch-drawer__navigation > a,
.woodpunch-drawer__menu-item,
.woodpunch-drawer__submenu a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48.3px;
  margin-bottom: 2.1px;
  padding: 11.55px 31.5px;
  border: 0;
  background: transparent;
  color: var(--ds-brand-navy);
  font-size: 18.9px;
  line-height: 24.3px;
  text-decoration: none;
  cursor: pointer;
}

.woodpunch-drawer__menu-item {
  border: 0;
  background: transparent;
  text-align: left;
}

.woodpunch-drawer__menu-item {
  position: relative;
  padding-right: 54.6px;
}

.woodpunch-drawer__arrow {
  position: absolute;
  top: 50%;
  right: 31.5px;
  display: inline-flex;
  width: 15px;
  transform: translateY(-50%);
}

.woodpunch-drawer__arrow .wp-icon {
  width: 17.85px;
  height: 14.7px;
}

.woodpunch-drawer__panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding-top: 18px;
  background: var(--brand-surface);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--ds-duration-default) var(--ds-ease-out-slow), visibility 0s linear var(--ds-duration-default);
}

.woodpunch-drawer__panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.woodpunch-drawer__back {
  display: flex;
  align-items: center;
  gap: 10.5px;
  width: 100%;
  min-height: 49.9px;
  margin-top: 15.75px;
  padding: 12.6px 27.3px 12.6px 31.5px;
  border: 0;
  background: transparent;
  color: var(--ds-brand-navy);
  font: inherit;
  font-size: 14.7px;
  line-height: 18.9px;
  cursor: pointer;
}

.woodpunch-drawer__back .wp-icon {
  width: 17.85px;
  height: 14.7px;
  transform: rotate(180deg);
}

.woodpunch-drawer__submenu {
  padding: 0 0 8px 26px;
}

.woodpunch-drawer__submenu a {
  min-height: 46px;
  padding-block: 7px;
  font-size: 16.8px;
}

.woodpunch-drawer a:hover,
.woodpunch-drawer button:hover,
.woodpunch-drawer a[aria-current="page"] {
  background: var(--ds-drawer-hover-surface);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 100ms ease, text-decoration-thickness 100ms ease;
}

.woodpunch-drawer a:hover,
.woodpunch-drawer button:hover,
.woodpunch-drawer a:focus-visible,
.woodpunch-drawer button:focus-visible {
  color: var(--ds-brand-navy);
  text-decoration-thickness: 2px;
}

.woodpunch-drawer__utility {
  display: grid;
  gap: 8px;
  padding: 21px 31.5px;
  background: var(--ds-drawer-utility-bg);
}

.woodpunch-drawer__utility a,
.woodpunch-drawer__utility button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-brand-navy);
  text-decoration: none;
}

.woodpunch-drawer__utility .wp-icon {
  width: 18px;
  height: 18px;
  margin-right: 12px;
}

.woodpunch-mobile-language {
  position: relative;
}

.woodpunch-mobile-language > .woodpunch-disclosure__trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 10.5px 37.8px 10.5px 0;
  border: 0;
  background: transparent;
  color: var(--ds-brand-navy);
  font-family: inherit;
  font-size: 14.7px;
  line-height: 21.7px;
  letter-spacing: 0.63px;
  cursor: pointer;
  list-style: none;
}

.woodpunch-mobile-language > .woodpunch-disclosure__trigger .wp-icon {
  position: absolute;
  right: 8.4px;
  width: 14.7px;
  height: 16.8px;
  margin: 0;
  transition: transform var(--ds-duration-default) var(--ds-ease-out-slow);
}

.woodpunch-mobile-language.is-open > .woodpunch-disclosure__trigger .wp-icon {
  transform: rotate(180deg);
}

.woodpunch-mobile-language__options {
  position: absolute;
  bottom: calc(100% + 10.5px);
  left: 0;
  z-index: 25;
  width: 202px;
  animation: woodpunch-localization-open var(--ds-duration-default) ease;
}

.woodpunch-mobile-language__options .woodpunch-disclosure__check .wp-icon {
  width: 10.5px;
  height: 14.7px;
  margin: 0 2.1px 0 0;
}

.woodpunch-version-menu {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 100%;
}

.woodpunch-version-menu > .woodpunch-disclosure__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: max-content;
  min-height: 39.9px;
  padding: 0 28.35px 0 12.6px;
  border: 0;
  background: transparent;
  color: var(--ds-brand-navy);
  font: inherit;
  font-weight: 400;
  line-height: 21.7px;
  letter-spacing: 0.63px;
  cursor: pointer;
  list-style: none;
}

.woodpunch-version-menu > .woodpunch-disclosure__trigger .wp-icon {
  position: absolute;
  top: 50%;
  right: 8.4px;
  z-index: 1;
  width: 14.7px;
  height: 16.8px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform var(--ds-duration-default) var(--ds-ease-out-slow);
}

.woodpunch-version-menu.is-open > .woodpunch-disclosure__trigger .wp-icon {
  transform: translateY(-50%) rotate(180deg);
}

.woodpunch-version-menu__options {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: 202px;
  transform-origin: top left;
  animation: woodpunch-menu-open var(--ds-duration-default) ease;
}

.woodpunch-disclosure__trigger:focus-visible,
.woodpunch-disclosure__options a:focus-visible,
.woodpunch-disclosure__options button[role="option"]:focus-visible {
  outline: 2.1px solid var(--ds-focus-soft);
  outline-offset: -2.1px;
  box-shadow: 0 0 2.1px var(--ds-focus-shadow);
}

@keyframes woodpunch-menu-open {
  from { opacity: 0; transform: translateY(-15.75px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes woodpunch-localization-open {
  from { opacity: 0; transform: translateY(10.5px); }
  to { opacity: 1; transform: translateY(0); }
}

.woodpunch-footer {
  margin-top: 64px;
  padding: 44px 0 60px;
  background: var(--ds-shell-footer-bg);
  color: var(--ds-inverse-text);
}

.woodpunch-footer--minimal {
  padding: 31.5px 0;
}

.woodpunch-footer__minimal {
  width: min(100%, 1260px);
  margin-inline: auto;
  padding-inline: 52.5px;
  color: var(--ds-inverse-muted);
  text-align: center;
}

.woodpunch-footer__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding-bottom: 52.5px;
}

.woodpunch-footer__brand img {
  width: 190px;
  height: auto;
  filter: brightness(0) invert(1);
}

.woodpunch-footer__brand p {
  max-width: 448px;
  color: var(--ds-inverse-muted);
}

.woodpunch-footer h2 {
  margin: 0 0 21px;
  color: var(--ds-inverse-text);
  font-size: 19.8px;
  line-height: 25.47px;
}

.woodpunch-footer a {
  display: block;
  width: fit-content;
  min-height: 25.9px;
  color: var(--ds-inverse-muted);
  font-size: 14.7px;
  line-height: 25.9px;
  text-decoration: none;
}

.woodpunch-footer a:hover,
.woodpunch-footer a:focus-visible {
  color: var(--ds-inverse-text);
  text-decoration: underline;
}

.woodpunch-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 31.5px;
  border-top: 1px solid var(--ds-inverse-overlay);
  color: var(--ds-inverse-muted);
}

.woodpunch-footer__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.woodpunch-footer__bottom a {
  min-height: auto;
}

body.woodpunch-drawer-open {
  overflow: hidden;
}

@media (max-width: 1199.98px) {
  .woodpunch-header {
    --woodpunch-header-mobile-height: 169.75px;
  }

  .woodpunch-header__top {
    grid-template-columns: 1fr 2fr 1fr;
    min-height: 0;
    height: var(--woodpunch-header-mobile-height);
    padding: 20px 52.5px;
    align-items: center;
  }

  .woodpunch-header__left {
    padding-top: 0;
  }

  .woodpunch-header__logo img {
    width: 250px;
    max-width: 100%;
    height: 114px;
  }

  .woodpunch-header__toggle {
    display: inline-grid;
    margin-left: -12.6px;
  }

  .woodpunch-header__nav,
  .woodpunch-header__language,
  .woodpunch-header__desktop-only {
    display: none;
  }

  .woodpunch-header__utilities {
    gap: 0;
    padding-top: 0;
    margin-right: -12.6px;
  }
}

@media (max-width: 989.98px) {
  .woodpunch-header {
    --woodpunch-header-mobile-height: 149.75px;
  }

  .woodpunch-header__top {
    padding-block: 10px;
    padding-inline: 33.6px;
  }
}

@media (max-width: 749.98px) {
  .woodpunch-header {
    --woodpunch-header-mobile-height: clamp(75.33px, calc(30.4vw - 17.39px), 149.75px);
  }

  .woodpunch-header__top {
    padding-inline: 31.5px;
  }

  .woodpunch-header__logo img {
    width: clamp(86.813px, calc(66.6514vw - 116.471px), 250px);
    height: clamp(39.578px, calc(30.4014vw - 53.146px), 114px);
  }

  .woodpunch-drawer {
    width: 100%;
  }

  .woodpunch-footer__inner {
    grid-template-columns: 1fr;
    padding-inline: 40px;
  }

  .woodpunch-footer__brand {
    grid-column: auto;
  }

  .woodpunch-footer__bottom {
    display: grid;
    padding-inline: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woodpunch-header,
  .woodpunch-drawer,
  .woodpunch-drawer-backdrop {
    transition: none;
  }

  .woodpunch-disclosure__options {
    animation: none;
  }
}
