@charset "UTF-8";
/*
 * Web Fonts from colophon-foundry.org
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased from Colophon Foundry. The fonts are protected under domestic and international trademark and copyright law. You are prohibited from modifying, reverse engineering, duplicating, or distributing this font software.
 *
 * (c) 2017 Colophon Foundry
 *
 * Licenced to Mateusz Piekarski Gunter Piekarski Ltd
 */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

svg {
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0 none;
  border-radius: 0;
  background: none;
}

/* Reset headings for custom fonts */
h1, h2, h3, h4, h5 {
  font-weight: normal;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Remove _all_ animations and transitions for people that prefer not to see them */
/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* ---- draggable ---- */
.flickity-enabled.is-draggable {
  tap-highlight-color: transparent;
  user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

/* ---- flickity-button ---- */
.flickity-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}
.flickity-button:hover {
  cursor: pointer;
}
.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}
.flickity-button:active {
  opacity: 0.6;
}
.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  width: 1.5rem;
  height: 1.5rem;
}
.flickity-prev-next-button.previous {
  order: 2;
}
.flickity-rtl .flickity-prev-next-button.previous {
  order: 4;
}
.flickity-prev-next-button.next {
  order: 4;
}
.flickity-rtl .flickity-prev-next-button.next {
  order: 2;
}
.flickity-prev-next-button .flickity-button-icon {
  fill: currentColor;
}

/* ---- page dots ---- */
.flickity-page-dots {
  order: 3;
  bottom: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}
.flickity-rtl .flickity-page-dots {
  direction: rtl;
}
.flickity-page-dots .dot {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.25rem;
  opacity: 0.25;
  cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
  opacity: 1;
}
.flickity-page-dots .dot:after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.button-base {
  position: relative;
  display: inline-block;
  color: inherit;
  border: 1px solid var(--black);
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
}
.button-base:link, .button-base:visited {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .button-base:is(button) {
    cursor: pointer;
  }
}

.button {
  position: relative;
  display: inline-block;
  color: inherit;
  border: 1px solid var(--black);
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
  font-family: "aktiv-grotesk";
  font-size: 0.625rem;
  letter-spacing: 1.2px;
  line-height: 1rem;
  --mb: 1rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}
.button:link, .button:visited {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .button {
    font-size: 0.75rem;
    line-height: 1.125rem;
    --mb: 1.125rem;
  }
}
.button--alt {
  background-color: var(--black);
  color: var(--white);
}
@media only screen and (min-width: 768px) {
  .button {
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
  }
  .button:hover {
    background-color: var(--black);
    color: var(--white);
    transition: all 0s ease;
  }
}

.button-small {
  position: relative;
  display: inline-block;
  color: inherit;
  border: 1px solid var(--black);
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
  font-family: "aktiv-grotesk";
  font-size: 0.625rem;
  letter-spacing: 1.2px;
  line-height: 1rem;
  --mb: 1rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}
.button-small:link, .button-small:visited {
  text-decoration: none;
}
.button-small--alt {
  background-color: var(--black);
  color: var(--white);
}

.button-large {
  position: relative;
  display: inline-block;
  color: inherit;
  border: 1px solid var(--black);
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
  font-family: "aktiv-grotesk";
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  --mb: 1.125rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}
.button-large:link, .button-large:visited {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .button-large {
    padding: 0.875rem 1.5rem 0.6875rem;
  }
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

:root {
  --black: #1A1A1A;
  --black_rgb: 26, 26, 26;
  --white: #FFFFFF;
  --white_rgb: 255, 255, 255;
  --offwhite: #F6F6F5;
  --offwhite_rgb: 246, 246, 245;
  --cream: #FFF9EE;
  --cream_rgb: 255, 249, 238;
  --grey: #8C8C8C;
  --grey_rgb: 140, 140, 140;
  --blue: #518FCC;
  --blue_rgb: 81, 143, 204;
  --placeholder: #C5C5C5;
  --placeholder_rgb: 197, 197, 197;
  --yellow: #FFD32F;
  --yellow_rgb: 255, 211, 47;
  --lightbeige: #ECEAE6;
  --lightbeige_rgb: 236, 234, 230;
  --green: #616B55;
  --green_rgb: 97, 107, 85;
  --red: #AB2A09;
  --red_rgb: 171, 42, 9;
  --beige: #DBD5CD;
  --beige_rgb: 219, 213, 205;
  --error: #D10000;
  --error_rgb: 209, 0, 0;
  --adminbg: #DBD5CD;
  --adminbg_rgb: 219, 213, 205;
}

body {
  background: var(--offwhite);
  font-family: "aktiv-grotesk";
  font-size: 0.875rem;
  line-height: 1.125rem;
  --mb: 1.125rem;
}
@media only screen and (min-width: 768px) {
  body {
    font-size: 1rem;
    line-height: 1.25rem;
    --mb: 1.25rem;
  }
}
body.page-care {
  background: var(--cream);
}

.shop {
  background-color: var(--white);
  padding: 8rem 0 3rem;
}
@media only screen and (min-width: 768px) {
  .shop {
    padding: 5rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    column-gap: 1rem;
  }
}

.news {
  padding-top: 8rem;
}
@media only screen and (min-width: 768px) {
  .news {
    padding-top: 5rem;
  }
}

.modules {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 3rem;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}
@media only screen and (min-width: 768px) {
  .modules {
    row-gap: 6rem;
    padding-top: 0;
    padding-bottom: 6rem;
  }
  .modules:not(.first-hero) {
    display: grid;
  }
  .modules:not(.first-hero)::before {
    content: "";
    display: block;
  }
}
.modules + .modules {
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .modules + .modules {
    margin-top: 6rem;
  }
}
.cart__form + .modules {
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .cart__form + .modules {
    margin-top: 6rem;
  }
}
.modules .simple-text--h2 + .module,
.modules .product-featured-title + .module {
  margin-top: -1.5rem;
}
@media only screen and (min-width: 768px) {
  .modules .simple-text--h2 + .module,
  .modules .product-featured-title + .module {
    margin-top: -3rem;
  }
}
.modules + .cart-footer {
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .modules + .cart-footer {
    margin-top: 6rem;
  }
}

.ratio-box {
  padding-bottom: var(--pad);
  position: relative;
}
.ratio-box > *:not(mute-state) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ratio-box.rb-video {
  background-color: var(--black);
}

:link,
:visited {
  color: currentColor;
  text-decoration-color: var(--placeholder);
  text-underline-offset: 2px;
}

.link:link,
.link:visited {
  text-underline-offset: 5px;
}

.pagination {
  font-family: "plantin";
  font-size: 0.875rem;
  letter-spacing: 1px;
  line-height: 1.3125rem;
  --mb: 1.3125rem;
  padding: 0 1rem;
  margin: 2.5rem 0;
}
@media only screen and (min-width: 768px) {
  .pagination {
    padding: 0 1.5rem;
  }
}
.pagination nav {
  border-top: 1px solid var(--placeholder);
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pagination__prev, .pagination__next {
  flex-grow: 1;
}
.pagination__prev:not(a), .pagination__next:not(a) {
  opacity: 0.25;
}
.pagination__prev:before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: no-repeat 50% url("data:image/svg+xml,%3Csvg width='8' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 1.41 6 0 0 6l6 6 1.41-1.41L2.83 6z' fill='%231A1A1A' fill-rule='nonzero'/%3E%3C/svg%3E");
  vertical-align: middle;
}
.pagination__nums {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pagination__nums {
    display: flex;
    justify-content: center;
  }
  .pagination__nums a, .pagination__nums span, .pagination__nums i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    padding-top: 3px;
  }
  .pagination__nums span {
    border: 1px solid;
    border-radius: 50%;
  }
}
.pagination__next {
  text-align: right;
}
.pagination__next:after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: no-repeat 50% url("data:image/svg+xml,%3Csvg width='8' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 0 .59 1.41 5.17 6 .59 10.59 2 12l6-6z' fill='%231A1A1A' fill-rule='nonzero'/%3E%3C/svg%3E");
  vertical-align: middle;
}
.pagination :link,
.pagination :visited {
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  .tape {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
  }
  .tape-unit {
    height: calc(100% / var(--units));
  }
  .tape-unit.seen {
    background-color: red;
  }
}

@media only screen and (min-width: 768px) {
  .flash-notices {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: 1rem;
    padding-bottom: 1rem;
  }
}
.flash-notices__notice {
  color: var(--green);
}
@media only screen and (min-width: 768px) {
  .flash-notices__notice {
    grid-column: 2/span 6;
  }
}
.flash-notices__notice--error {
  color: var(--red);
}

.sale-banner {
  font-family: "aktiv-grotesk";
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  --mb: 1.125rem;
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--lightbeige);
  width: 2.625rem;
  height: 2.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 1;
  border-radius: 50%;
  padding-left: 1.2px;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (min-width: 1024px) {
  .sale-banner {
    font-family: "plantin";
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 1.3125rem;
    --mb: 1.3125rem;
    letter-spacing: 4px;
    padding-left: 4px;
    top: 1.25rem;
    right: 1.25rem;
    width: 3.75rem;
    height: 3.75rem;
  }
}

mute-state {
  display: none;
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.25rem;
  padding: 0.5rem;
  border-radius: 50%;
  background-color: rgba(var(--white_rgb), 0.5);
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  mute-state {
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.2s ease;
  }
  mute-state:hover {
    opacity: 0.8;
  }
}
mute-state svg {
  pointer-events: none;
  display: none;
  width: 100%;
  height: auto;
}
mute-state svg.active {
  display: block;
}

.header {
  position: fixed;
  top: 0;
  transition: top 0.3s ease, padding-top 0.3s ease;
  width: 100%;
  z-index: 5;
}
@media only screen and (min-width: 768px) {
  .header {
    padding: 0rem;
    position: sticky;
    top: 0;
  }
}
.header.open-sub:before {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 1;
}
.header.open-sub .nav__item:not([open]),
.header.open-sub .menu-sheet-search:not([open]),
.header.open-sub .header__cart,
.header.open-sub .header__book {
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.header__wrapper {
  background-color: var(--black, #000);
  padding: 0.5rem 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1rem;
  align-items: center;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .header__wrapper {
    row-gap: 1.125rem;
    padding: 0.5rem 1.5rem;
    grid-template-columns: repeat(16, 1fr);
  }
}
.header h1 {
  grid-column: 2/span 2;
}
@media only screen and (min-width: 768px) {
  .header h1 {
    grid-column: 7/span 4;
  }
}
.header h1 svg {
  width: 100%;
  max-width: 9.125rem;
  height: auto;
  margin: auto;
}
.header__menu-drawer {
  grid-row: 1;
  grid-column: 1;
}
@media only screen and (min-width: 768px) {
  .header__menu-drawer {
    display: none;
  }
}
.header__cart {
  grid-column: 4;
  justify-self: end;
  display: block;
  width: 1.5625rem;
  height: 1.5625rem;
  border-radius: 100%;
  font-family: "aktiv-grotesk";
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  --mb: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .header__cart {
    grid-column: 16;
    background: var(--black);
    width: 1.75rem;
    height: 1.75rem;
    transition: opacity 0s;
  }
}
.header__cart:link, .header__cart:visited {
  text-decoration: none;
  color: currentColor;
}
@media only screen and (min-width: 768px) {
  .header__cart:link, .header__cart:visited {
    color: var(--white);
  }
}
.header__cart svg {
  width: 100%;
}
.header__cart svg path {
  fill: var(--white);
}
@media only screen and (min-width: 768px) {
  .header__cart svg path {
    fill: var(--white);
  }
}
.header__cart-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hamburger {
  display: block;
  width: 1.5625rem;
  cursor: pointer;
  color: inherit;
  border: 0;
  margin: 0;
  color: var(--white);
}
.hamburger::-webkit-details-marker {
  display: none;
}
.hamburger__box {
  display: block;
  height: 1.5625rem;
  position: relative;
}
.hamburger__inner {
  display: block;
  top: 50%;
  margin-top: -0.5px;
}
.hamburger__inner, .hamburger__inner::before, .hamburger__inner::after {
  content: "";
  display: block;
  width: 1.5625rem;
  height: 1px;
  background-color: currentColor;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.menu-drawer[open] .hamburger__inner, .menu-drawer[open] .hamburger__inner::before, .menu-drawer[open] .hamburger__inner::after {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger__inner::before {
  top: -7px;
  transition: top 0.075s 0.12s ease;
}
.menu-drawer[open] .hamburger__inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease;
}
.hamburger__inner::after {
  bottom: -7px;
  transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.menu-drawer[open] .hamburger__inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media only screen and (min-width: 768px) {
  .menu-drawer {
    height: auto;
  }
}
.menu-drawer__contents {
  position: fixed;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  background-color: var(--black);
  color: var(--white);
  padding: var(--header-ip);
  transition: height 0.195s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  padding-top: 2.5rem;
  z-index: -1;
}
.menu-drawer[open] .menu-drawer__contents {
  height: calc(100 * var(--vhs));
}
.menu-drawer__contents nav {
  margin: auto 0;
}
@media only screen and (max-width: 767px) {
  .menu-drawer ul li, .menu-drawer li li {
    font-family: "aktiv-grotesk";
    font-size: 2rem;
    letter-spacing: 6px;
    line-height: 2rem;
    --mb: 2rem;
    text-transform: uppercase;
    padding: 1rem 1rem 0.8125rem;
    border-top: 1px solid var(--placeholder);
  }
  .menu-drawer ul li:first-child, .menu-drawer li li:first-child {
    border-top: 0 none;
  }
}
.menu-drawer__footer {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 1rem;
}
.menu-drawer :link,
.menu-drawer :visited {
  color: currentColor;
  text-decoration: none;
}
.menu-inline {
  display: none;
  font-family: "aktiv-grotesk";
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  --mb: 1.125rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (min-width: 768px) {
  .menu-inline {
    display: block;
    grid-column: 1/span 4;
    grid-row: 1;
  }
}
.menu-inline__top-nav {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--white);
}
@media only screen and (min-width: 768px) {
  .menu-inline__top-nav {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1.125rem;
  }
}
.menu-inline__item {
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid var(--grey);
}
.menu-inline__item:first-child {
  border-top: 1px solid var(--grey);
}
@media only screen and (min-width: 768px) {
  .menu-inline__item {
    display: flex;
    transition: opacity 0s;
    padding: 0;
    border: 0 none;
    margin: 0 12px;
  }
  .menu-inline__item:first-child {
    border: 0 none;
  }
  .menu-inline__item.util-link {
    font-family: "aktiv-grotesk";
    font-size: 0.75rem;
    letter-spacing: 1.2px;
    line-height: 1.125rem;
    --mb: 1.125rem;
    position: absolute;
    bottom: 1.1875rem;
    left: 1.5rem;
  }
}
.menu-inline :link,
.menu-inline :visited {
  color: currentColor;
  text-decoration: none;
}
.menu-inline :link.util-link,
.menu-inline :visited.util-link {
  color: var(--grey);
}
.footer {
  position: relative;
  background: var(--white);
  font-family: "aktiv-grotesk";
  font-size: 0.875rem;
  line-height: 1.125rem;
  --mb: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .footer {
    font-size: 1rem;
    line-height: 1.25rem;
    --mb: 1.25rem;
  }
}
@media only screen and (min-width: 768px) {
  .footer {
    padding: 0 0.5rem;
  }
}
.footer__info {
  padding: 1.5rem 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem;
  row-gap: 1.5rem;
  align-items: start;
}
@media only screen and (min-width: 768px) {
  .footer__info {
    grid-template-columns: repeat(16, 1fr);
  }
}
.footer__block h4 {
  font-family: "plantin";
  font-size: 0.875rem;
  letter-spacing: 1px;
  line-height: 1.3125rem;
  --mb: 1.3125rem;
  color: var(--grey);
}
.footer__block nav {
  font-family: "plantin";
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1.3125rem;
  --mb: 1.3125rem;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.25rem;
}
.footer__block nav :link,
.footer__block nav :visited {
  display: inline-block;
  text-decoration: none;
}
.footer__block--crest {
  grid-column: span 2;
  font-family: "plantin";
  font-size: 1.125rem;
  line-height: 1.375rem;
  --mb: 1.375rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .footer__block--crest {
    grid-column: 1/span 3;
    grid-row: 1;
    margin-bottom: 0;
  }
}
.footer__block--crest svg {
  width: 50%;
  margin: auto;
}
@media only screen and (min-width: 768px) {
  .footer__block--crest svg {
    width: 100%;
    max-width: 16.875rem;
  }
}
.footer__block--crest svg * {
  fill: var(--black);
}
@media only screen and (min-width: 768px) {
  .footer__block--contact {
    grid-column: 9/span 4;
  }
}
@media only screen and (min-width: 768px) {
  .footer__block--nav {
    grid-column: 13/span 4;
  }
}
.footer__h1 {
  font-family: "aktiv-grotesk";
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  --mb: 1.125rem;
  margin-bottom: 1rem;
}
.footer__h2 {
  font-family: "aktiv-grotesk";
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  --mb: 1.125rem;
  margin-bottom: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .footer__h2 {
    margin-bottom: 1rem;
  }
}
.footer__foot {
  padding: 1.5rem 1rem 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--black);
  align-items: start;
  column-gap: 1rem;
  row-gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .footer__foot {
    grid-template-columns: repeat(16, 1fr);
    padding: 1rem;
    align-items: center;
  }
}
.footer__copy {
  font-family: "aktiv-grotesk";
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  line-height: 1.125rem;
  --mb: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .footer__copy {
    grid-row: 1;
    grid-column: 1/span 3;
  }
}
.footer__gp {
  font-family: "aktiv-grotesk";
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  line-height: 1.125rem;
  --mb: 1.125rem;
  color: var(--grey);
  justify-self: end;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .footer__gp {
    grid-row: 1;
    grid-column: -3/span 2;
  }
}

to-top {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  top: 1.5rem;
  right: 1.5rem;
  opacity: 0;
  transform: rotate(135deg);
  transition: all 1s ease;
  cursor: pointer;
}
to-top.show {
  opacity: 1;
  transform: rotate(0deg);
}

@keyframes blink {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.features {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
  border-left: 1px solid var(--grey);
  border-right: 1px solid var(--grey);
}
@media only screen and (min-width: 768px) {
  .features {
    grid-column: 8/span 9;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    column-gap: 1rem;
    margin: 0;
    border: 0 none;
  }
}
.features__feature {
  position: relative;
  width: 73.7%;
  font-family: "aktiv-grotesk";
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  line-height: 1.125rem;
  --mb: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .features__feature {
    grid-column: span 3;
    width: auto;
    transform: translateY(-10%);
    opacity: 0;
    transition: all 0s;
  }
  .open .features__feature {
    transition: all 0.75s ease calc(0.1s * var(--loop));
    transform: translateY(0%);
    opacity: 1;
  }
}
.features__feature:not(:first-child) {
  display: none;
}
@media only screen and (min-width: 768px) {
  .features__feature:not(:first-child) {
    display: block;
  }
}
.features__feature a, .features__feature span {
  display: block;
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.25rem;
  padding: 0.75rem 0.5rem 0.6875rem;
  text-align: center;
  background: var(--white);
}

.sidebar {
  display: none;
}
@media only screen and (min-width: 768px) {
  .sidebar {
    display: block;
    grid-column: span 3;
  }
}
.sidebar__wrap {
  font-family: "aktiv-grotesk";
  font-size: 0.875rem;
  line-height: 1.125rem;
  --mb: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .sidebar__wrap {
    font-size: 1rem;
    line-height: 1.25rem;
    --mb: 1.25rem;
  }
}
@media only screen and (min-width: 768px) {
  .sidebar__wrap {
    position: sticky;
    top: 4rem;
  }
}
.sidebar__wrap > a {
  font-family: "aktiv-grotesk";
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  --mb: 1.125rem;
  display: block;
  border-bottom: 1px solid var(--placeholder);
  padding: 1rem 2.5rem 0.875rem 0;
}
.sidebar details {
  border-bottom: 1px solid var(--placeholder);
  background: no-repeat calc(100% - 6px) 20.59px url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z' fill='%231A1A1A' fill-rule='nonzero'/%3E%3C/svg%3E");
}
.sidebar details[open] {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 7.41 6 2.83l4.59 4.58L12 6 6 0 0 6z' fill='%231A1A1A' fill-rule='nonzero'/%3E%3C/svg%3E");
}
.sidebar details li {
  margin-bottom: 0.5rem;
}
.sidebar details li :link,
.sidebar details li :visited {
  color: var(--grey);
}
.sidebar summary {
  font-family: "aktiv-grotesk";
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  --mb: 1.125rem;
  display: block;
  padding: 1rem 2.5rem 0.875rem 0;
}
@media only screen and (min-width: 768px) {
  .sidebar summary {
    cursor: pointer;
  }
}
.sidebar :link,
.sidebar :visited {
  text-decoration: none;
}

.product-popup__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--black_rgb), 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate3d(0, 0, 0);
  z-index: 99;
}
.product-popup__container {
  background-color: var(--white);
  padding: 2rem;
  width: 100%;
  max-width: 90%;
  max-height: calc(90 * var(--vh));
  overflow-y: auto;
  box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
  .product-popup__container {
    max-width: 33%;
  }
}
.product-popup__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}
.product-popup__close {
  background: transparent;
  border: 0;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
}
.product-popup__close:before {
  content: "✕";
}
.product-popup__content {
  font-family: "plantin";
  font-size: 1.125rem;
  line-height: 1.375rem;
  --mb: 1.375rem;
}
.product-popup__content p:not(:last-child) {
  margin-bottom: var(--mb);
}
.product-popup__field input, .product-popup__field textarea {
  padding-right: 3rem;
}
.product-popup__field:after {
  font-family: "aktiv-grotesk";
  font-size: 0.875rem;
  line-height: 1.125rem;
  --mb: 1.125rem;
  color: var(--placeholder);
  content: attr(data-maxlength);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 3rem;
}
@media only screen and (min-width: 768px) {
  .product-popup__field:after {
    font-size: 1rem;
    line-height: 1.25rem;
    --mb: 1.25rem;
  }
}
.product-popup__field {
  border: 1px solid var(--grey);
  border-radius: 0.25rem;
  position: relative;
  -webkit-font-smothing: antialiased;
}
.product-popup__field:not(:last-child) {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .product-popup__field {
    grid-column: span 7;
  }
}
.product-popup__field--email label, .product-popup__field--text label, .product-popup__field--textarea label {
  font-family: "aktiv-grotesk";
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  line-height: 1.125rem;
  --mb: 1.125rem;
  position: absolute;
  pointer-events: none;
  transform-origin: 0 50%;
  transition: transform 200ms, color 200ms;
  top: 1rem;
  left: 1rem;
}
.product-popup__field--email input,
.product-popup__field--email select,
.product-popup__field--email textarea, .product-popup__field--text input,
.product-popup__field--text select,
.product-popup__field--text textarea, .product-popup__field--textarea input,
.product-popup__field--textarea select,
.product-popup__field--textarea textarea {
  font-family: "aktiv-grotesk";
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  line-height: 1.125rem;
  --mb: 1.125rem;
  display: block;
  width: 100%;
  padding: 1rem 1rem 0.875rem 1rem;
}
.product-popup__field--email input::placeholder,
.product-popup__field--email select::placeholder,
.product-popup__field--email textarea::placeholder, .product-popup__field--text input::placeholder,
.product-popup__field--text select::placeholder,
.product-popup__field--text textarea::placeholder, .product-popup__field--textarea input::placeholder,
.product-popup__field--textarea select::placeholder,
.product-popup__field--textarea textarea::placeholder {
  opacity: 0;
}
.product-popup__field--email input:focus ~ label, .product-popup__field--email input:not(:placeholder-shown) ~ label,
.product-popup__field--email select:focus ~ label,
.product-popup__field--email select:not(:placeholder-shown) ~ label,
.product-popup__field--email textarea:focus ~ label,
.product-popup__field--email textarea:not(:placeholder-shown) ~ label, .product-popup__field--text input:focus ~ label, .product-popup__field--text input:not(:placeholder-shown) ~ label,
.product-popup__field--text select:focus ~ label,
.product-popup__field--text select:not(:placeholder-shown) ~ label,
.product-popup__field--text textarea:focus ~ label,
.product-popup__field--text textarea:not(:placeholder-shown) ~ label, .product-popup__field--textarea input:focus ~ label, .product-popup__field--textarea input:not(:placeholder-shown) ~ label,
.product-popup__field--textarea select:focus ~ label,
.product-popup__field--textarea select:not(:placeholder-shown) ~ label,
.product-popup__field--textarea textarea:focus ~ label,
.product-popup__field--textarea textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-1rem) scale(0.75);
  color: var(--grey);
}

.popup-message__buttons {
  display: flex;
  justify-content: space-between;
}
.popup-message__save {
  background: var(--black);
  color: var(--white);
}

/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.popup-slide {
  display: none;
}
.popup-slide.is-open {
  display: block;
}
.popup-slide[aria-hidden=false] .product-popup__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.popup-slide[aria-hidden=false] .product-popup__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.popup-slide[aria-hidden=true] .product-popup__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.popup-slide[aria-hidden=true] .product-popup__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.popup-slide .product-popup__container,
.popup-slide .product-popup__overlay {
  will-change: transform;
}