/* - - - - - - - - - - - - - - - - - -

Strata
Building blocks framework

Designed + developed by Mike at Slate
https://slateapp.com/studio

// - - - - - - - - - - - - - - - - - - */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

strong, b, mark {
  font-weight: 700;
  font-style: inherit;
}

em, i, cite, q, address, dfn, var {
  font-style: italic;
  font-weight: inherit;
}

abbr[title], dfn[title] {
  cursor: help;
  border-bottom: 1px dotted;
}

ins {
  border-bottom: 1px solid;
}

a, u, ins {
  text-decoration: none;
}

del, s {
  text-decoration: line-through;
}

pre, code, samp, kbd {
  font-family: monospace;
}

small {
  font-size: 0.75em;
}

img {
  border: 0;
  font-style: italic;
}

input, select, option, optgroup, textarea {
  font: inherit;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block;
}

audio[controls], canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

html {
  font-size: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  text-rendering: optimizeLegibility;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  display: block;
}

img, object, embed {
  max-width: 100%;
  height: auto;
}

input {
  -webkit-appearance: none;
}

@keyframes draw_line {
  to {
    stroke-dashoffset: 0;
  }
}
:root {
  --dark: #212027;
  --black: #282E2F;
  --grey: #54645E;
  --silver: #EDF3F4;
  --green: #AAFFDB;
  --yellow: #FFEC8A;
  --cyan: #75FBFB;
  --purple: #CABCFF;
  --orange: #FFC398;
  --red: #FFABB5;
  --pink: #FFA8F6;
  --lime: #DBFFA8;
  --accent: var(--green);
  --font-heading: "Pangram Sans", sans-serif;
  --font-compact: "Pangram Sans Compact", sans-serif;
  --font-body: "Adelle", serif;
  --font-note: "Hazard", sans-serif;
}

body {
  background: white;
  overscroll-behavior: none;
}

body, header, footer, section, .page {
  position: relative;
}

.wrap {
  position: relative;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
  max-width: 452px;
}
@media only screen and (min-width: 688px) {
  .wrap {
    padding: 0 32px;
    max-width: 688px;
  }
}
@media only screen and (min-width: 992px) {
  .wrap {
    max-width: 992px;
  }
}
@media only screen and (min-width: 1312px) {
  .wrap {
    max-width: 1312px;
  }
}
.wrap--medium {
  max-width: 452px;
}
@media only screen and (min-width: 688px) {
  .wrap--medium {
    max-width: 688px;
  }
}
@media only screen and (min-width: 992px) {
  .wrap--medium {
    max-width: 832px;
  }
}
@media only screen and (min-width: 1312px) {
  .wrap--medium {
    max-width: 1088px;
  }
}
.wrap--grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 24px;
}
@media only screen and (min-width: 1312px) {
  .wrap--grid {
    column-gap: 32px;
  }
}
@media only screen and (min-width: 992px) {
  .wrap--grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.section-wrap {
  display: grid;
  margin-top: 72px;
  padding-bottom: 72px;
}
@media only screen and (min-width: 688px) {
  .section-wrap {
    margin-top: 96px;
    padding-bottom: 96px;
  }
}
@media only screen and (min-width: 992px) {
  .section-wrap {
    margin-top: 96px;
    padding-bottom: 96px;
  }
}
@media only screen and (min-width: 1312px) {
  .section-wrap {
    margin-top: 96px;
    padding-bottom: 96px;
  }
}
.section-wrap--no-margin {
  margin-top: 0;
}
.section-wrap--silver {
  background: var(--silver);
}

@font-face {
  font-family: "Pangram Sans";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/4994b964-cddb-4d24-a9ac-57361c7b83c4/pppangramsans-medium-webfont.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Pangram Sans";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/3741517f-6714-42c2-80af-884ba53e7cba/pppangramsans-semibold-webfont.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Pangram Sans";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/9fd13fa7-efad-4743-99dc-8d532234e8b2/pppangramsans-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Pangram Sans Compact";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/43f5f300-778b-41c0-b923-419c5e6e0cdf/pppangramsans-compactbold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Adelle";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/43466c93-cc38-4385-bd24-3e38b531e95f/adelle-light-webfont.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Adelle";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/7b39b049-c75d-4b89-a6b1-ee532ff19291/adelle-light-italic-webfont.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Adelle";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/d3196c7c-452f-4492-8bc7-1aa9fe83ec59/adelle-regular-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Adelle";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/67976e14-3ecd-4a81-8af0-7e68a7bfdf50/adelle-italic-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Adelle";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/bf0ab1ac-a81a-40fa-88bd-11a36c5df83e/adelle-semi-bold-webfont.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Adelle";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/15bc3281-b6b6-4163-a777-7711bc66d3d6/adelle-semi-bold-italic-webfont.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Hazard";
  src: url("https://s3-us-west-1.amazonaws.com/media-us-westslateappcom/shotsnew/production/clips/6cd7476b-9a1c-479b-af37-36586124002d/hazard-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  color: var(--black);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1, .h1 {
  font-size: 32px;
}
@media only screen and (min-width: 688px) {
  h1, .h1 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) {
  h1, .h1 {
    font-size: 48px;
  }
}
@media only screen and (min-width: 1312px) {
  h1, .h1 {
    font-size: 56px;
  }
}

h2, .h2 {
  font-size: 24px;
}
@media only screen and (min-width: 688px) {
  h2, .h2 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 992px) {
  h2, .h2 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1312px) {
  h2, .h2 {
    font-size: 48px;
  }
}

h3, .h3 {
  font-size: 20px;
}
@media only screen and (min-width: 688px) {
  h3, .h3 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) {
  h3, .h3 {
    font-size: 28px;
  }
}
@media only screen and (min-width: 1312px) {
  h3, .h3 {
    font-size: 32px;
  }
}

p, ul, ol {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.4;
}
p strong, ul strong, ol strong {
  font-weight: 400;
}
p:first-child, ul:first-child, ol:first-child {
  margin-top: 0;
}

ul, ol {
  list-style-position: inside;
}

a {
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.2, 0.3, 0, 1), text-decoration-color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}

::selection {
  background: var(--accent);
  color: var(--black);
}

::-moz-selection {
  background: var(--accent);
  color: var(--black);
}

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  height: 48px;
  padding: 0 20px;
  border-radius: 0;
  background: var(--accent);
  font-size: 16px;
  line-height: 1;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
  cursor: pointer;
}
.button:focus,
button:focus {
  outline: none;
}
.button svg,
button svg {
  height: 16px;
  width: auto;
  fill: currentColor;
}
.button--small,
button--small {
  height: 40px;
  font-size: 14px;
  padding: 0 16px;
}
.button--large,
button--large {
  height: 64px;
  padding: 0 32px;
}
.button--xl,
button--xl {
  height: 64px;
  padding: 0 32px;
}
@media only screen and (min-width: 1312px) {
  .button--xl,
button--xl {
    height: 80px;
    padding: 0 48px;
    gap: 10px;
    font-size: 20px;
  }
  .button--xl svg,
button--xl svg {
    height: 20px;
  }
}
.button--black,
button--black {
  background: var(--black);
  color: white;
}
.button--yellow,
button--yellow {
  background: var(--yellow);
}
.button--orange,
button--orange {
  background: var(--orange);
}
.button--transparent,
button--transparent {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  -webkit-font-smoothing: antialiased;
}
.button--transparent:hover,
button--transparent:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
.button--hover-accent:hover,
button--hover-accent:hover {
  background: var(--accent);
  color: var(--black);
}
.button--hover-inverse:hover,
button--hover-inverse:hover {
  background: white;
  color: var(--black);
}
.button--action > svg:last-child,
button--action > svg:last-child {
  transition: transform 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.button--action:hover > svg:last-child,
button--action:hover > svg:last-child {
  transform: translate(4px, 0);
}

.span-highlight {
  position: relative;
  display: inline-block;
}
.span-highlight:before {
  content: "";
  position: absolute;
  left: 10%;
  width: 0;
  bottom: -0.05em;
  height: 0.45em;
  width: 0;
  opacity: 0;
  transform: rotate(-2deg);
  transform-origin: bottom left;
  transition: opacity 0.2s cubic-bezier(0.2, 0.3, 0, 1), width 0.6s cubic-bezier(0.2, 0.3, 0, 1);
}
.span-highlight--active:before {
  opacity: 1;
  width: 80%;
}
.span-highlight--accent:before {
  background: var(--accent);
  mix-blend-mode: multiply;
}
.span-highlight--white40:before {
  background: rgba(255, 255, 255, 0.4);
}
.span-highlight--right:before {
  bottom: 0.05em;
  transform: rotate(2deg);
}
.span-highlight--long:before {
  left: 5%;
  transform: rotate(-1deg);
  transition: opacity 0.2s cubic-bezier(0.2, 0.3, 0, 1), width 0.8s cubic-bezier(0.2, 0.3, 0, 1);
}
.span-highlight--long.span-highlight--right:before {
  transform: rotate(1deg);
}
.span-highlight--long.span-highlight--active:before {
  width: 90%;
}

/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

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

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

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */
.flickity-button {
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  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;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  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-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

:root {
  --header-height: 80px;
}
@media only screen and (min-width: 688px) {
  :root {
    --header-height: 128px;
  }
}

.logo path {
  transition: fill 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.logo__box, .logo__inner, .logo__text {
  fill: var(--black);
}
.logo__shots {
  fill: var(--grey);
}
.logo__highlight {
  fill: var(--accent);
}
.logo__overlay {
  fill: white;
}
.logo__highlight-americas {
  fill: var(--red);
}
.logo__highlight-emea {
  fill: var(--cyan);
}
.logo__highlight-ap {
  fill: var(--purple);
}
.logo--white .logo__box,
.logo--white .logo__inner,
.logo--white .logo__text {
  fill: white;
}
.logo--white .logo__shots {
  fill: rgba(255, 255, 255, 0.8);
}
.logo--white .logo__highlight {
  fill: rgba(255, 255, 255, 0.4);
}
.logo--white .logo__highlight-awards,
.logo--white .logo__highlight-americas,
.logo--white .logo__highlight-emea,
.logo--white .logo__highlight-ap, .logo--white.logo--shots .logo__highlight {
  fill: rgba(255, 255, 255, 0.2);
}
.logo--white .logo__overlay {
  fill: var(--black);
}

.logo-animated {
  position: relative;
}
.logo-animated svg {
  height: 72px;
}

.mobile-header {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1), opacity 0.6s cubic-bezier(0.2, 0.3, 0, 1), visibility 0.6s cubic-bezier(0.2, 0.3, 0, 1);
}
@media only screen and (min-width: 688px) {
  .mobile-header {
    top: 16px;
    left: 16px;
    right: 16px;
    padding: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .mobile-header {
    display: none;
  }
}
.mobile-header__logo {
  padding: 8px;
}
@media only screen and (min-width: 688px) {
  .mobile-header__logo {
    padding: 0;
  }
}
.mobile-header__logo svg {
  height: 48px;
}
@media only screen and (min-width: 688px) {
  .mobile-header__logo svg {
    height: 64px;
  }
}
.mobile-header__buttons {
  margin-left: auto;
  display: flex;
  gap: 16px;
}
@media only screen and (max-width: 687px) {
  .mobile-header__buttons .button {
    display: none;
  }
}
.mobile-header__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding-bottom: 1px;
  background: var(--black);
  color: white;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
  cursor: pointer;
}
.mobile-header__toggle div {
  width: 32px;
  height: 3px;
  background: currentColor;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}

.mobile-nav {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
@media only screen and (min-width: 992px) {
  .mobile-nav {
    display: none;
  }
}
.mobile-nav__inner {
  position: relative;
  padding-top: var(--header-height);
  padding-bottom: 112px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mobile-nav ul li a,
.mobile-nav ul li > div {
  display: block;
  padding: 6px;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  cursor: pointer;
}
@media only screen and (min-width: 688px) {
  .mobile-nav ul li a,
.mobile-nav ul li > div {
    font-size: 48px;
  }
}
.mobile-nav__products {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  height: 96px;
  display: flex;
  flex-direction: column;
  transition: height 0.2s cubic-bezier(0.2, 0.3, 0, 1), background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
  overflow: hidden;
}
@media only screen and (min-width: 688px) {
  .mobile-nav__products {
    padding: 32px;
    height: 128px;
  }
}
.mobile-nav__products .button {
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 8px);
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1), transform 0s linear 0.4s;
  flex-shrink: 0;
}
.mobile-nav__products .button .shots-text {
  height: 14px;
  margin: 0 2px -1px;
}
.mobile-nav__products .button > svg:last-child {
  transition: transform 0.2s cubic-bezier(0.2, 0.3, 0, 1) 0.2s;
}
.mobile-nav__products__list {
  margin: auto;
}
.mobile-nav__products__list ul {
  padding: 32px 0;
}
.mobile-nav__products__list ul li a {
  padding: 2px 6px;
  font-size: 48px;
  color: var(--silver);
  font-family: var(--font-compact);
}
@media only screen and (min-width: 688px) {
  .mobile-nav__products__list ul li a {
    font-size: 56px;
  }
}

@media only screen and (max-width: 991px) {
  .state--menu-open {
    overflow: hidden;
  }
  .state--menu-open .mobile-header {
    background: transparent;
  }
  .state--menu-open .mobile-header__toggle div:first-child {
    transform: translate(0, 7px) rotate(45deg);
  }
  .state--menu-open .mobile-header__toggle div:nth-child(2) {
    opacity: 0;
  }
  .state--menu-open .mobile-header__toggle div:last-child {
    transform: translate(0, -7px) rotate(-45deg);
  }
  .state--menu-open .mobile-nav {
    opacity: 1;
    visibility: visible;
  }
  .state--menu-open .mobile-nav__products .button {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    transition: all 0.6s cubic-bezier(0.2, 0.3, 0, 1);
  }
}
@media only screen and (max-width: 687px) {
  .state--menu-open .mobile-header {
    background: transparent;
  }
  .state--menu-open .mobile-header__toggle {
    transform: scale(0.75);
  }
}

.state--menu-products .mobile-header {
  opacity: 0;
  visibility: hidden;
  transition: background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1), opacity 0.2s cubic-bezier(0.2, 0.3, 0, 1), visibility 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.state--menu-products .mobile-nav {
  overflow: hidden;
}
.state--menu-products .mobile-nav__products {
  height: 100%;
  background: var(--black);
  overflow: auto;
  position: fixed;
}
.state--menu-products .mobile-nav__products .button {
  background: var(--accent);
  color: var(--black);
}
.state--menu-products .mobile-nav__products .button > svg:last-child {
  transform: scaleY(-1);
}

.header {
  position: fixed;
  z-index: 100;
  top: 16px;
  right: 0;
  left: 0;
  padding: 0 16px;
}
@media only screen and (max-width: 991px) {
  .header {
    display: none;
  }
}
.header__wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
}
.header__bg {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  transition: opacity 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.header__brand {
  position: relative;
  z-index: 2;
  padding: 12px 78px 12px 12px;
  display: flex;
  min-width: 258px;
  flex-shrink: 0;
  align-items: center;
  cursor: pointer;
  background: white;
  box-shadow: 0px 8px 48px 0 rgba(33, 32, 39, 0.1);
  transition: background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.header__brand .header__logo {
  margin: 4px;
}
.header__brand .header__logo svg {
  height: 64px;
}
.header__brand:hover .header__toggle__dropdown {
  background: var(--black);
}
.header__brand:hover .header__toggle__dropdown svg {
  transform: translate(0, 2px);
}
.header__brand--animated .header__toggle {
  opacity: 1;
}
.header__brand--animated .header__toggle__dropdown svg {
  transform: translate(0, 0);
}
.header__brand--shots .header__toggle {
  opacity: 1;
}
.header__brand--shots .header__toggle span {
  opacity: 1;
  transform: unset;
}
.header__brand--shots .header__toggle__dropdown svg {
  transform: translate(0, 0);
}
.header__brand--bounce .header__toggle {
  animation: toggleBounce 1s cubic-bezier(0.2, 0.3, 0, 1) forwards;
}
.header__toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.header__toggle span {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  opacity: 0;
  transform: translate(0, 8px);
  transition: color 0.2s cubic-bezier(0.2, 0.3, 0, 1), opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s, transform 0s linear 0.8s;
}
.header__toggle__dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 64px;
  background: var(--grey);
  color: white;
  transition: background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1), color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.header__toggle__dropdown svg {
  fill: currentColor;
  height: 10px;
  transform: translate(0, 8px);
  transition: transform 0.6s cubic-bezier(0.2, 0.3, 0, 1);
}
.header__tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 16px;
  background: var(--accent);
  color: var(--black);
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.state--mega-tooltip .header__tooltip {
  opacity: 1;
  visibility: visible;
  animation: toggleBounce 1s cubic-bezier(0.2, 0.3, 0, 1) 3 forwards;
  animation-delay: 1s;
}
.header__tooltip:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(170, 255, 219, 0);
  border-bottom-color: #AAFFDB;
  border-width: 12px;
  margin-left: -12px;
}
.header__nav {
  position: relative;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 16px;
  z-index: 2;
}
.header__nav--actions {
  gap: 16px;
  justify-content: flex-end;
}
.header__nav li {
  position: relative;
}
.header__nav li a {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 16px;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  transition: background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1), color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
  white-space: nowrap;
  cursor: pointer;
}
.header__nav li a svg {
  height: 16px;
  fill: currentColor;
}
.header__nav li a.active {
  background: var(--black);
  color: white;
}
.header__nav li a.button {
  padding: 0 32px;
}
.header__nav:hover li a:not(.button) {
  background: transparent;
  color: var(--black);
}
.header__nav:hover li a:not(.button):hover {
  background: var(--black);
  color: white;
}
.header__nav__more {
  display: none;
}
.header__nav__more > span {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  transition: background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1), color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
  white-space: nowrap;
  cursor: default;
}
.header__nav__more > span svg {
  height: 16px;
  fill: currentColor;
}
.header__nav__more:hover > span {
  background: var(--black);
  color: white;
}
.header__nav__more:hover .header__nav__dropdown {
  opacity: 1;
  visibility: visible;
}
.header__nav__more:hover .header__nav__dropdown > ul {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.header__nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 242px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: var(--black);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.header__nav__dropdown > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
  transform: translate(0, -8px);
}
.header__nav__dropdown > ul li a {
  height: auto;
  padding: 12px;
  color: var(--silver) !important;
}
.header__nav__dropdown > ul li a:hover {
  background: rgba(237, 243, 244, 0.1) !important;
  color: white !important;
}
.header__mega {
  position: absolute;
  top: -20px;
  right: -16px;
  left: -16px;
  padding: 132px 16px 16px;
  background: rgba(33, 32, 39, 0.98);
  backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(0, -16px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.3, 0, 1), visibility 0.6s cubic-bezier(0.2, 0.3, 0, 1), transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.header__mega__close {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
  visibility: hidden;
}
.header__mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
}
.header__mega__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 140px;
  background: rgba(237, 243, 244, 0.1);
  color: white;
  padding: 20px;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
@media only screen and (min-width: 1312px) {
  .header__mega__item {
    height: 160px;
    padding: 28px 30px 32px;
  }
}
.header__mega__item:not(.header__mega__item--signup):hover {
  background: white;
  color: var(--black);
}
.header__mega__item__heading {
  font-family: var(--font-compact);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
@media only screen and (min-width: 1312px) {
  .header__mega__item__heading {
    font-size: 38px;
  }
}
.header__mega__item__text {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}
@media only screen and (min-width: 1312px) {
  .header__mega__item__text {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1311px) {
  .header__mega__item__text span {
    display: none;
  }
}
.header__mega__item--signup {
  background: transparent;
  border: 2px solid rgba(237, 243, 244, 0.1);
}
@media only screen and (min-width: 1312px) {
  .header__mega__item--signup {
    padding: 24px 28px 32px;
  }
}
.header__mega__item__form {
  position: relative;
}
.header__mega__item__form > svg {
  position: absolute;
  top: 16px;
  left: 16px;
  fill: white;
  height: 16px;
  pointer-events: none;
}
.header__mega__item__form input {
  width: 100%;
  height: 48px;
  padding: 0 48px 2px 40px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  font-family: var(--font-heading);
  font-weight: 600;
  color: white;
  outline: none;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.header__mega__item__form input:focus {
  border-color: white;
  background: transparent;
}
.header__mega__item__form .button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
}
.header__mega__tagline {
  padding: 16px 0 32px;
  display: flex;
  pointer-events: none;
  justify-content: center;
}
.header__mega__tagline .flickity-viewport {
  width: 100%;
}
.header__mega__tagline span {
  margin: 0 16px;
  font-size: 24px;
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  white-space: nowrap;
}

.state--logo-transition .header__brand,
.state--logo-transition .header__mega__close {
  pointer-events: none;
}

.state--mega-open .header__brand .logo .logo__box,
.state--mega-open .header__brand .logo .logo__inner,
.state--mega-open .header__brand .logo .logo__text {
  fill: white;
}
.state--mega-open .header__brand .logo .logo__shots {
  fill: rgba(255, 255, 255, 0.8);
}
.state--mega-open .header__brand .logo .logo__highlight {
  fill: rgba(255, 255, 255, 0.4);
}
.state--mega-open .header__brand .logo .logo__highlight-awards,
.state--mega-open .header__brand .logo .logo__highlight-americas,
.state--mega-open .header__brand .logo .logo__highlight-emea,
.state--mega-open .header__brand .logo .logo__highlight-ap, .state--mega-open .header__brand .logo.logo--shots .logo__highlight {
  fill: rgba(255, 255, 255, 0.2);
}
.state--mega-open .header__brand .logo .logo__overlay {
  fill: var(--black);
}
.state--mega-open .header__bg {
  opacity: 0;
}
.state--mega-open .header__brand {
  background: rgba(237, 243, 244, 0.1);
}
.state--mega-open .header__brand:hover .header__toggle__dropdown {
  background: white;
}
.state--mega-open .header__brand:hover .header__toggle__dropdown svg {
  transform: scaleY(-1) translate(0, 2px) !important;
}
.state--mega-open .header__toggle span {
  opacity: 1;
  transform: translate(0, 0);
  color: white;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 1s, transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 1s;
}
.state--mega-open .header__toggle__dropdown {
  background: white;
  color: var(--black);
}
.state--mega-open .header__toggle__dropdown svg {
  transform: scaleY(-1) translate(0, 0px) !important;
}
.state--mega-open .header__nav li a:not(.button) {
  background: transparent;
  color: rgba(237, 243, 244, 0.6);
}
.state--mega-open .header__nav li a:not(.button):hover {
  background: white;
  color: var(--black);
}
.state--mega-open .header__nav__more > span {
  color: rgba(237, 243, 244, 0.6);
}
.state--mega-open .header__nav__more:hover > span {
  background: white;
  color: var(--black);
}
.state--mega-open .header__nav__dropdown {
  background: white;
}
.state--mega-open .header__nav__dropdown li a {
  color: var(--grey) !important;
}
.state--mega-open .header__nav__dropdown li a:hover {
  background: var(--silver) !important;
  color: var(--black) !important;
}
.state--mega-open .header__mega {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), visibility 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 1s cubic-bezier(0.14, 1.14, 0.39, 1.16);
  pointer-events: all;
}
.state--mega-open .header__mega__close {
  visibility: visible;
}
.state--mega-open .header__mega__tagline {
  background: linear-gradient(to right, var(--dark) 0%, var(--accent) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 3s ease-in-out forwards;
}

@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes toggleBounce {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0, -8px);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(0, -6px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.shots-promo {
  display: none;
  position: fixed;
  z-index: 95;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--dark);
  color: white;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), visibility 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
@media only screen and (min-width: 992px) {
  .shots-promo {
    display: flex;
  }
}
.shots-promo__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.shots-promo__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
}
.shots-promo__content {
  grid-column: 3/7;
  margin-top: auto;
  margin-bottom: 58px;
}
.shots-promo__content .logo {
  height: 48px;
  flex-shrink: 0;
}
@media only screen and (min-width: 1312px) {
  .shots-promo__content .logo {
    height: 64px;
  }
}
.shots-promo__title {
  margin-top: 22px;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media only screen and (min-width: 1312px) {
  .shots-promo__title {
    font-size: 48px;
  }
}
.shots-promo__title span {
  position: relative;
  display: inline-block;
}
.shots-promo__title span:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 10%;
  width: 0;
  bottom: -4px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(-1deg);
  opacity: 0;
  transform-origin: bottom left;
  transition: opacity 0.2s cubic-bezier(0.2, 0.3, 0, 1), width 0.6s cubic-bezier(0.2, 0.3, 0, 1);
}
.shots-promo__text {
  margin-top: 18px;
  text-wrap: balance;
  font-size: 16px;
  line-height: 1.4;
  max-width: 600px;
}
.shots-promo--active {
  opacity: 1;
  visibility: visible;
  z-index: 96;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), visibility 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.shots-promo--active .shots-promo__title span:before {
  opacity: 1;
  width: 80%;
  transition: opacity 0.2s cubic-bezier(0.2, 0.3, 0, 1) 0.4s, width 0.6s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
}

body:has(.shots-promo--active) {
  overflow: hidden;
}
@media only screen and (min-width: 992px) {
  body:has(.shots-promo--active) .header__bg {
    background: transparent;
    backdrop-filter: unset;
    transition: all 0.4s cubic-bezier(0.2, 0.3, 0, 1);
  }
}

.shots-promo__magazine {
  position: absolute;
  bottom: max(380px, 45%);
  left: -10px;
  right: -10px;
  opacity: 0;
  transform: translate(0, 64px) rotate(-1deg);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
}
.shots-promo--active .shots-promo__magazine {
  opacity: 1;
  transform: translate(0, 0px) rotate(-1deg);
  transition: opacity 1s cubic-bezier(0.2, 0.3, 0, 1), transform 1s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.shots-promo__magazine:after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 520px;
  background: linear-gradient(90deg, #212027 25%, rgba(33, 32, 39, 0.75) 60%, rgba(33, 32, 39, 0) 100%);
}

.shots-promo__mag-post {
  width: 240px;
  flex-shrink: 0;
  background: white;
  padding: 16px;
  margin-right: 8px;
}
@media only screen and (min-width: 1312px) {
  .shots-promo__mag-post {
    width: 320px;
  }
}
.shots-promo__mag-post img {
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.shots-promo__mag-post__date {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 3px;
  background: var(--black);
  color: white;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
@media only screen and (min-width: 1312px) {
  .shots-promo__mag-post__date {
    margin-top: 20px;
    font-size: 12px;
  }
}
.shots-promo__mag-post__title {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--black);
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (min-width: 1312px) {
  .shots-promo__mag-post__title {
    font-size: 24px;
  }
}

.shots-promo__vault__image {
  position: absolute;
  aspect-ratio: 1440/940;
  background: var(--black);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
  -webkit-backface-visibility: hidden;
}
.shots-promo__vault__image--one {
  bottom: max(354px, 40%);
  left: calc(50% - 300px);
  height: 376px;
  border: 8px solid white;
  opacity: 0;
  transform: translate(0, 32px) rotate(0deg);
  box-shadow: 0px 6px 48px rgba(255, 255, 255, 0.25);
}
.shots-promo--active .shots-promo__vault__image--one {
  opacity: 1;
  transform: translate(0, 0) rotate(-2deg);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 1s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.shots-promo__vault__image--two {
  bottom: max(320px, 35%);
  left: calc(50% + 200px);
  height: 300px;
  opacity: 0;
  transform: translate(0, 32px) rotate(0deg);
}
.shots-promo--active .shots-promo__vault__image--two {
  opacity: 1;
  transform: translate(0, 0) rotate(2deg);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.2s, transform 1s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.2s;
}
.shots-promo__vault__image--two img,
.shots-promo__vault__image--two video {
  opacity: 0.8;
}
.shots-promo__vault__image img,
.shots-promo__vault__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shots-promo__treatments {
  position: absolute;
  bottom: max(354px, 40%);
  left: calc(50% - 240px);
}
.shots-promo__treatments__main {
  aspect-ratio: 1600/960;
  width: 560px;
  border: 8px solid white;
  background: var(--black);
  -webkit-backface-visibility: hidden;
  opacity: 0;
  transform: translate(0, 32px) rotate(0deg);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
  box-shadow: 0px 6px 48px rgba(255, 255, 255, 0.25);
}
.shots-promo--active .shots-promo__treatments__main {
  opacity: 1;
  transform: translate(0, 0) rotate(-2deg);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 1s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.shots-promo__treatments__image {
  position: absolute;
  background: var(--dark);
  -webkit-backface-visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
}
.shots-promo__treatments__image img {
  height: 240px;
}
.shots-promo__treatments__image--1 {
  top: 80px;
  left: -120px;
  transform: scale(0.6) rotate(0);
}
.shots-promo__treatments__image--1 img {
  opacity: 0.2;
}
.shots-promo--active .shots-promo__treatments__image--1 {
  opacity: 1;
  transform: scale(1) rotate(2deg);
  transition: all 0.8s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.1s;
}
.shots-promo__treatments__image--2 {
  top: -120px;
  left: -80px;
  transform: scale(0.6) rotate(0);
}
.shots-promo__treatments__image--2 img {
  opacity: 0.6;
}
.shots-promo--active .shots-promo__treatments__image--2 {
  opacity: 1;
  transform: scale(1) rotate(-2deg);
  transition: all 0.8s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.2s;
}
.shots-promo__treatments__image--3 {
  top: -80px;
  right: -200px;
  transform: scale(0.6) rotate(0);
}
.shots-promo__treatments__image--3 img {
  opacity: 0.4;
}
.shots-promo--active .shots-promo__treatments__image--3 {
  opacity: 1;
  transform: scale(1) rotate(4deg);
  transition: all 0.8s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.3s;
}
.shots-promo__treatments__image--4 {
  top: 180px;
  right: -240px;
  transform: scale(0.6) rotate(0);
}
.shots-promo__treatments__image--4 img {
  opacity: 0.6;
}
.shots-promo--active .shots-promo__treatments__image--4 {
  opacity: 1;
  transform: scale(1) rotate(2deg);
  transition: all 0.8s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.4s;
}

.shots-promo__reels__image {
  position: absolute;
  background: var(--black);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
  -webkit-backface-visibility: hidden;
}
.shots-promo__reels__image--one {
  bottom: max(354px, 40%);
  left: calc(50% - 300px);
  opacity: 0;
  transform: translate(0, 32px) rotate(0deg);
}
.shots-promo--active .shots-promo__reels__image--one {
  opacity: 1;
  transform: translate(0, 0) rotate(-2deg);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 1s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.shots-promo__reels__image--one img {
  height: 360px;
}
.shots-promo__reels__image--two {
  bottom: max(320px, 35%);
  left: calc(50% + 60px);
  border: 8px solid white;
  box-shadow: 0px 6px 48px rgba(255, 255, 255, 0.25);
  opacity: 0;
  transform: translate(0, 32px) rotate(0deg);
}
.shots-promo--active .shots-promo__reels__image--two {
  opacity: 1;
  transform: translate(0, 0) rotate(2deg);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.2s, transform 1s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.2s;
}
.shots-promo__reels__image--two img {
  height: 300px;
}

.shots-promo__awards {
  position: absolute;
  bottom: max(180px, 25%);
  left: calc(50% - 300px);
  aspect-ratio: 912/587;
}
.shots-promo__awards img {
  width: 912px;
}
.shots-promo__awards__location {
  position: absolute;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: white;
  color: var(--black);
  box-shadow: 0px 8px 64px rgba(17, 17, 17, 0.6);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
}
.shots-promo__awards__location:after {
  top: calc(100% - 1px);
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: white;
  border-width: 16px;
  margin-left: -16px;
}
.shots-promo__awards__location svg {
  height: 48px;
  flex-shrink: 0;
}
.shots-promo__awards__location span {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
.shots-promo__awards__location--americas {
  top: 36%;
  left: 8%;
}
.shots-promo--active .shots-promo__awards__location--americas {
  opacity: 1;
  transform: scale(1) rotate(-2deg);
  transition: all 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.1s;
}
.shots-promo__awards__location--emea {
  top: 22%;
  left: 40%;
}
.shots-promo--active .shots-promo__awards__location--emea {
  opacity: 1;
  transform: scale(1) rotate(3deg);
  transition: all 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.2s;
}
.shots-promo__awards__location--ap {
  top: 46%;
  left: 70%;
}
.shots-promo--active .shots-promo__awards__location--ap {
  opacity: 1;
  transform: scale(1) rotate(1deg);
  transition: all 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.3s;
}

.shots-promo[data-promo="out of the box"] .shots-promo__content .logo {
  height: 84px;
  margin-left: -20px;
}
@media only screen and (min-width: 1312px) {
  .shots-promo[data-promo="out of the box"] .shots-promo__content .logo {
    height: 108px;
    margin-left: -26px;
  }
}

.shots-promo__ootb {
  position: absolute;
  bottom: max(340px, 40%);
  left: -10px;
  right: -10px;
  opacity: 0;
  transform: translate(0, 64px) rotate(1deg);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
  display: flex;
  height: 360px;
  align-items: center;
  flex-flow: nowrap;
  gap: 8px;
}
.shots-promo--active .shots-promo__ootb {
  opacity: 1;
  transform: translate(0, 0px) rotate(1deg);
  transition: opacity 1s cubic-bezier(0.2, 0.3, 0, 1), transform 1s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.shots-promo__ootb:after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 520px;
  background: linear-gradient(90deg, #212027 25%, rgba(33, 32, 39, 0.75) 60%, rgba(33, 32, 39, 0) 100%);
}
.shots-promo__ootb__image {
  flex-shrink: 0;
  padding: 16px;
  background: white;
}
.shots-promo__ootb__image img {
  height: 200px;
}
.shots-promo__ootb__image:nth-child(1) {
  margin-left: -100px;
}
.shots-promo__ootb__image:nth-child(2) img {
  height: 240px;
}
.shots-promo__ootb__image:nth-child(3) img {
  height: 400px;
}
.shots-promo__ootb__image:nth-child(4) img {
  height: 280px;
}
.shots-promo__ootb__image:nth-child(5) img {
  height: 240px;
}

.shots-promo__unsigned {
  position: absolute;
  bottom: max(300px, 35%);
  left: calc(50% - 80px);
}
.shots-promo__unsigned__showcase {
  aspect-ratio: 1440/1880;
  width: 320px;
  background: var(--black);
  opacity: 0;
  transform: translate(0, 32px) rotate(0deg);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
}
.shots-promo__unsigned__showcase img {
  opacity: 0.8;
}
.shots-promo--active .shots-promo__unsigned__showcase {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 1s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.shots-promo__unsigned__image {
  position: absolute;
  background: var(--dark);
  border: 8px solid white;
  box-shadow: 0px 6px 48px rgba(255, 255, 255, 0.25);
  -webkit-backface-visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
}
.shots-promo__unsigned__image img {
  height: 120px;
}
.shots-promo__unsigned__image--1 {
  top: 160px;
  left: -140px;
  transform: scale(0.6) rotate(0);
}
.shots-promo__unsigned__image--1 img {
  height: 160px;
}
.shots-promo--active .shots-promo__unsigned__image--1 {
  opacity: 1;
  transform: scale(1) rotate(2deg);
  transition: all 0.8s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.1s;
}
.shots-promo__unsigned__image--2 {
  top: -30px;
  right: -80px;
  transform: scale(0.6) rotate(0);
}
.shots-promo--active .shots-promo__unsigned__image--2 {
  opacity: 1;
  transform: scale(1) rotate(-2deg);
  transition: all 0.8s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.2s;
}
.shots-promo__unsigned__image--3 {
  bottom: -40px;
  right: -60px;
  transform: scale(0.6) rotate(0);
}
.shots-promo--active .shots-promo__unsigned__image--3 {
  opacity: 1;
  transform: scale(1) rotate(4deg);
  transition: all 0.8s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.3s;
}
.shots-promo__unsigned__image--4 {
  top: -40px;
  left: -180px;
  transform: scale(0.6) rotate(0);
}
.shots-promo--active .shots-promo__unsigned__image--4 {
  opacity: 1;
  transform: scale(1) rotate(-2deg);
  transition: all 0.8s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.4s;
}
.shots-promo__unsigned__image--5 {
  top: 130px;
  right: -220px;
  transform: scale(0.6) rotate(0);
}
.shots-promo__unsigned__image--5 img {
  height: 160px;
}
.shots-promo--active .shots-promo__unsigned__image--5 {
  opacity: 1;
  transform: scale(1) rotate(2deg);
  transition: all 0.8s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.5s;
}

.footer {
  position: relative;
  overflow: hidden;
  z-index: 101;
  color: white;
  display: flex;
  min-height: 100vh;
  padding: 32px 0;
  background-color: var(--dark);
  background-image: radial-gradient(at 66% 96%, rgba(197, 184, 255, 0.3) 0px, transparent 50%), radial-gradient(at 39% 39%, rgba(168, 255, 217, 0.2) 0px, transparent 50%);
  -webkit-font-smoothing: antialiased;
}
.footer__wrap {
  max-width: 1632px;
  margin: auto;
  padding: 0 16px;
  height: 100%;
}
@media only screen and (min-width: 688px) {
  .footer__wrap {
    padding: 0 32px;
  }
}
.footer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__header__logo svg {
  height: 48px;
}
@media only screen and (min-width: 688px) {
  .footer__header__logo svg {
    height: 64px;
  }
}
.footer__header__offset {
  height: 64px;
  width: 64px;
}
@media only screen and (max-width: 991px) {
  .footer__header__offset {
    display: none;
  }
}
.footer__header__text {
  color: white;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}
@media only screen and (min-width: 688px) {
  .footer__header__text {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1312px) {
  .footer__header__text {
    font-size: 32px;
  }
}
.footer__mega {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
}
@media only screen and (min-width: 688px) {
  .footer__mega {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 992px) {
  .footer__mega {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.footer__mega__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  background: rgba(237, 243, 244, 0.1);
  color: white;
  padding: 20px;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
  position: relative;
}
@media only screen and (min-width: 992px) {
  .footer__mega__item {
    height: 280px;
  }
}
@media only screen and (min-width: 1312px) {
  .footer__mega__item {
    height: 320px;
    padding: 32px;
  }
}
.footer__mega__item .logo {
  height: 48px;
  flex-shrink: 0;
}
.footer__mega__item .logo .logo__box,
.footer__mega__item .logo .logo__inner,
.footer__mega__item .logo .logo__text {
  fill: white;
}
.footer__mega__item .logo .logo__shots {
  fill: rgba(255, 255, 255, 0.8);
}
.footer__mega__item .logo .logo__highlight {
  fill: rgba(255, 255, 255, 0.4);
}
.footer__mega__item .logo .logo__overlay {
  fill: var(--black);
}
.footer__mega__item__text {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
  font-size: 20px;
}
@media only screen and (min-width: 1312px) {
  .footer__mega__item__text {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1600px) {
  .footer__mega__item__text {
    font-size: 28px;
  }
}
.footer__mega__item .button {
  margin-top: auto;
  flex-shrink: 0;
}
.footer__mega__item .button:not(.footer__mega__item--signup .button) {
  opacity: 0;
  transform: translate(0, 8px);
  transition: opacity 0.1s cubic-bezier(0.2, 0.3, 0, 1), transform 0.2s cubic-bezier(0.2, 0.3, 0, 1) 0.2s;
}
@media only screen and (max-width: 991px) {
  .footer__mega__item .button:not(.footer__mega__item--signup .button) {
    display: none;
  }
}
.footer__mega__item:not(.footer__mega__item--signup):hover {
  background: white;
  color: var(--black);
}
.footer__mega__item:not(.footer__mega__item--signup):hover .button {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.2s;
}
.footer__mega__item:not(.footer__mega__item--signup):hover .logo__box,
.footer__mega__item:not(.footer__mega__item--signup):hover .logo__inner,
.footer__mega__item:not(.footer__mega__item--signup):hover .logo__text {
  fill: var(--black);
}
.footer__mega__item:not(.footer__mega__item--signup):hover .logo__shots {
  fill: var(--grey);
}
.footer__mega__item:not(.footer__mega__item--signup):hover .logo__highlight {
  fill: var(--accent);
}
.footer__mega__item:not(.footer__mega__item--signup):hover .logo__overlay {
  fill: white;
}
.footer__mega__item--signup {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.footer__mega__item__form {
  position: relative;
  width: 100%;
}
.footer__mega__item__form__input {
  position: relative;
  margin-bottom: 8px;
}
.footer__mega__item__form__input > svg {
  position: absolute;
  top: 16px;
  left: 16px;
  fill: white;
  height: 16px;
  pointer-events: none;
}
.footer__mega__item__form__input input {
  color: white;
  width: 100%;
  height: 48px;
  padding: 0 48px 2px 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  font-family: var(--font-heading);
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.2, 0.3, 0, 1), background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
@media only screen and (min-width: 992px) {
  .footer__mega__item__form__input input {
    padding: 0 14px 2px 40px;
  }
}
.footer__mega__item__form__input input::placeholder {
  color: var(--silver);
}
.footer__mega__item__form__input input:focus {
  border-color: white;
  background: transparent;
}
@media only screen and (max-width: 991px) {
  .footer__mega__item__form .button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  .footer__mega__item__form .button span {
    display: none;
  }
}
.footer__lower {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
@media only screen and (min-width: 1312px) {
  .footer__lower {
    flex-direction: row;
    justify-content: space-between;
    padding-right: 64px;
  }
}
.footer__lower__logo svg {
  height: 26px;
  fill: white;
}
.footer__lower__logo p {
  margin-top: 8px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  color: var(--silver);
}
.footer__legal {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 14px;
}
.footer__legal span, .footer__legal a, .footer__legal div {
  font-family: var(--font-heading);
  text-decoration: none;
  font-weight: 500;
  color: var(--silver);
}
.footer__legal span:hover, .footer__legal a:hover, .footer__legal div:hover {
  color: white;
}
.footer__socials {
  display: flex;
  gap: 8px;
}
.footer__socials a {
  display: flex;
  width: 64px;
  height: 64px;
  background: rgba(237, 243, 244, 0.1);
  color: white;
  transition: color 0.2s cubic-bezier(0.2, 0.3, 0, 1), background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.footer__socials a svg {
  margin: auto;
  height: 16px;
  fill: currentColor;
}
.footer__socials a:hover {
  background: white;
  color: var(--black);
}

.cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: var(--background-alt-color);
  display: flex;
  align-items: center;
  transform: translate(0, 20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.2, 0.3, 0, 1);
}
.cookies__message {
  font-size: 13px;
  line-height: 1.5;
  padding-right: 15px;
}
.cookies__message a {
  color: var(--text-strong-color);
  text-decoration: underline;
  text-decoration-color: var(--accent-color);
}
.cookies__message a:hover {
  color: var(--accent-color);
}
@media only screen and (min-width: 992px) {
  .cookies {
    bottom: 10px;
    left: 10px;
    right: auto;
    width: 540px;
    border-radius: 4px;
  }
}

.state--cookies .cookies {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

.form {
  position: fixed;
  z-index: 200;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  padding: var(--header-height) 16px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.form__bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(33, 32, 39, 0.95);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.form__content {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 564px;
  background: white;
  padding: 32px;
  box-shadow: 0px 8px 64px rgba(17, 17, 17, 0.6);
  opacity: 0;
  transform: translate(0, 32px);
  transition: all 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
}
@media only screen and (min-width: 992px) {
  .form__content {
    padding: 48px;
    max-width: 960px;
  }
}
@media only screen and (min-width: 1312px) {
  .form__content {
    padding: 64px;
    max-width: 992px;
  }
}
.form__content--success {
  display: none;
}
.form__content--fail {
  display: none;
}
.form__content--fail .h2 {
  color: #dd4958;
}
.form--success .form__content--form {
  display: none;
}
.form--success .form__content--success {
  display: block;
}
.form--fail .form__content--form {
  display: none;
}
.form--fail .form__content--fail {
  display: block;
}
.form__header p {
  text-wrap: balance;
}
.form__header p a {
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
}
.form form {
  margin-top: 24px;
  display: grid;
  row-gap: 24px;
  column-gap: 32px;
}
@media only screen and (min-width: 992px) {
  .form form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: flex-start;
  }
}
.form__col {
  display: grid;
  row-gap: 24px;
}
.form__item label {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--grey);
  transition: color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.form__item:focus-within label {
  color: var(--black);
}
.form__item input,
.form__item textarea {
  margin-top: 8px;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 2px solid var(--silver);
  background: transparent;
  font-family: var(--font-heading);
  font-size: 20px;
  letter-spacing: -0.02em;
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.form__item input::placeholder,
.form__item textarea::placeholder {
  color: rgba(84, 100, 94, 0.4);
}
.form__item input:focus,
.form__item textarea:focus {
  border-color: var(--accent);
}
.form__item textarea {
  resize: none;
  height: 155px;
  padding: 16px;
}
.form__item .button {
  width: 100%;
}
.form__check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.form__check input {
  position: absolute;
  opacity: 0;
}
.form__check__box {
  display: flex;
  width: 24px;
  height: 24px;
  border: 2px solid var(--grey);
  color: transparent;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.form__check__box svg {
  height: 14px;
  margin: auto;
  fill: currentColor;
}
.form__check input:checked ~ .form__check__box {
  background: var(--accent);
  color: var(--black);
}
.form__check span {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--grey);
  transition: color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.form__close {
  position: fixed;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--grey);
  color: white;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
  cursor: pointer;
}
@media only screen and (min-width: 688px) {
  .form__close {
    top: 32px;
    right: 32px;
  }
}
.form__close div {
  position: absolute;
  top: calc(50% - 2px);
  left: calc(50% - 16px);
  width: 32px;
  height: 3px;
  background: currentColor;
}
.form__close div:first-child {
  transform: rotate(45deg);
}
.form__close div:last-child {
  transform: rotate(-45deg);
}
@media only screen and (max-width: 687px) {
  .form__close {
    transform: scale(0.75);
  }
}
.form__close:hover {
  background: white;
  color: var(--black);
}

.state--demo-form {
  overflow: hidden;
  opacity: 1;
  visibility: visible;
}
.state--demo-form .form {
  opacity: 1;
  visibility: visible;
}
.state--demo-form .form__content {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.2s;
}

.hero {
  position: relative;
  height: 780px;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-height) + 72px) 0 64px;
  background-color: #1f1e24;
  background-image: radial-gradient(at 66% 96%, rgba(197, 184, 255, 0.3) 0px, transparent 50%), radial-gradient(at 39% 39%, rgba(168, 255, 217, 0.2) 0px, transparent 50%);
  overflow: hidden;
}
@media only screen and (min-width: 688px) {
  .hero {
    height: 960px;
  }
}
@media only screen and (min-width: 992px) {
  .hero {
    height: calc(100vh - 152px);
    min-height: 720px;
    padding: calc(var(--header-height) + 72px) 0 96px;
    align-items: center;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1311px) {
  .hero .wrap {
    max-width: 100%;
  }
}
.hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.hero__content {
  color: white;
  max-width: 430px;
  -webkit-font-smoothing: antialiased;
  text-wrap: balance;
}
@media only screen and (min-width: 688px) {
  .hero__content {
    max-width: 600px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__content {
    max-width: 680px;
  }
}
@media only screen and (min-width: 1312px) {
  .hero__content {
    max-width: 780px;
  }
}
.hero__content p {
  margin-top: 12px;
}
@media only screen and (min-width: 688px) {
  .hero__content p {
    margin-top: 16px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__content p {
    margin-top: 14px;
    font-size: 18px;
  }
}
@media only screen and (min-width: 1312px) {
  .hero__content p {
    margin-top: 24px;
    font-size: 20px;
    max-width: 760px;
  }
}
.hero__content p strong {
  font-weight: 600;
}
.hero__content p a {
  color: white;
  text-decoration: underline;
}
.hero__content p a:hover {
  text-decoration-color: var(--accent);
}
.hero__buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
}
@media only screen and (min-width: 688px) {
  .hero__buttons {
    flex-direction: row;
    margin-top: 26px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__buttons {
    margin-top: 34px;
    gap: 16px;
  }
}
@media only screen and (min-width: 1312px) {
  .hero__buttons {
    margin-top: 32px;
  }
}
.hero__scribble {
  position: absolute;
  bottom: -56px;
  right: 12px;
}
@media only screen and (min-width: 688px) {
  .hero__scribble {
    bottom: -60px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__scribble {
    bottom: -40px;
  }
}
.hero__scribble .scribble-arrow-squirly {
  position: absolute;
  top: 0;
  right: calc(100% - 6px);
  color: var(--orange);
  height: 120px;
}
@media only screen and (min-width: 688px) {
  .hero__scribble .scribble-arrow-squirly {
    top: -22px;
    right: calc(100% - 20px);
    height: 200px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__scribble .scribble-arrow-squirly {
    top: -14px;
    height: 232px;
  }
}
@media only screen and (min-width: 1312px) {
  .hero__scribble .scribble-arrow-squirly {
    top: -16px;
    height: 260px;
  }
}
.hero__scribble .scribble-arrow-squirly__line {
  stroke-dasharray: 470;
  stroke-dashoffset: 470;
}
.hero__scribble .scribble-arrow-squirly__head-left {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.hero__scribble .scribble-arrow-squirly__head-right {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.hero__scribble span {
  display: block;
  font-family: var(--font-note);
  font-size: 24px;
  line-height: 0.9;
  white-space: pre-line;
  color: var(--orange);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: translate(0, 8px) rotate(0deg);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media only screen and (min-width: 992px) {
  .hero__scribble span {
    font-size: 28px;
  }
}
@media only screen and (min-width: 1312px) {
  .hero__scribble span {
    font-size: 32px;
  }
}
.hero__scribble.js-scribble-animate span {
  opacity: 1;
  transform: translate(0, 0) rotate(4deg);
}
.hero__scribble.js-scribble-animate .scribble-arrow-squirly__line {
  animation: draw_line 0.4s cubic-bezier(0.06, 0.66, 0.99, 0.52) forwards;
}
.hero__scribble.js-scribble-animate .scribble-arrow-squirly__head-left {
  animation: draw_line 0.2s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.5s;
}
.hero__scribble.js-scribble-animate .scribble-arrow-squirly__head-right {
  animation: draw_line 0.2s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.6s;
}

.section-title {
  margin-top: 58px;
  text-align: center;
}
@media only screen and (min-width: 688px) {
  .section-title {
    margin-top: 74px;
  }
}
@media only screen and (min-width: 992px) {
  .section-title {
    margin-top: 72px;
  }
}
@media only screen and (min-width: 1312px) {
  .section-title {
    margin-top: 88px;
  }
}
.section-title h2 {
  margin-bottom: -5px;
  text-wrap: balance;
}
@media only screen and (min-width: 688px) {
  .section-title h2 {
    margin-bottom: -6px;
  }
}
@media only screen and (min-width: 992px) {
  .section-title h2 {
    margin-bottom: -7px;
  }
}
@media only screen and (min-width: 1312px) {
  .section-title h2 {
    margin-bottom: -9px;
  }
}

.image-text {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .image-text {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 992px) {
  .image-text {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 1312px) {
  .image-text {
    margin-top: 96px;
  }
}
.image-text .wrap--grid {
  row-gap: 40px;
  align-items: center;
}
@media only screen and (min-width: 688px) {
  .image-text .wrap--grid {
    row-gap: 48px;
  }
}
.image-text__image {
  grid-column: span 6;
}
@media only screen and (min-width: 992px) {
  .image-text__image {
    grid-column: span 3;
  }
  .wrap--grid--12 .image-text__image {
    grid-column: span 7;
  }
}
.image-text__image:not(:has(.image-text__image__frame)) {
  aspect-ratio: 4/3;
  background: var(--grey);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.image-text__image__frame {
  aspect-ratio: 1440/940;
  outline: 8px solid white;
  box-shadow: 0px 8px 64px 8px rgba(40, 46, 47, 0.12);
  background: var(--silver);
}
.image-text__image__frame img,
.image-text__image__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: blur(0.1px);
}
.image-text__image__carousel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.image-text__image__carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(0.1px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.image-text__image__carousel img.active {
  opacity: 1;
}
.image-text__quote {
  grid-column: span 6;
}
@media only screen and (min-width: 992px) {
  .image-text__quote {
    grid-column: span 3;
  }
  .wrap--grid--12 .image-text__quote {
    grid-column: span 7;
  }
}
.image-text__quote__text {
  padding: 40px 20px;
  background: var(--yellow);
  text-align: center;
  transform: rotate(-1deg);
}
@media only screen and (min-width: 1312px) {
  .image-text__quote__text {
    padding: 56px 32px;
  }
}
.image-text__text {
  grid-column: span 6;
  text-wrap: balance;
}
@media only screen and (min-width: 992px) {
  .image-text__text {
    grid-column: span 3;
    padding-left: 32px;
  }
  .wrap--grid--12 .image-text__text {
    grid-column: span 5;
  }
}
@media only screen and (min-width: 1312px) {
  .image-text__text {
    padding-left: 64px;
  }
}
.image-text__text__subtitle {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 3px;
  background: var(--silver);
  font-size: 10px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--black);
  white-space: nowrap;
  transform: rotate(-1deg);
}
@media only screen and (min-width: 1312px) {
  .image-text__text__subtitle {
    height: 20px;
    padding: 0 4px;
    font-size: 12px;
  }
}
.image-text__text__subtitle--dark {
  background: var(--grey);
  color: white;
}
.image-text__text__logo svg {
  height: 64px;
}
.image-text__text h2:not(:first-child),
.image-text__text h3:not(:first-child) {
  margin-top: 16px;
}
@media only screen and (min-width: 992px) {
  .image-text__text h2:not(:first-child),
.image-text__text h3:not(:first-child) {
    margin-top: 22px;
  }
}
.image-text__text p {
  margin-top: 14px;
}
@media only screen and (min-width: 688px) {
  .image-text__text p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .image-text__text p {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 1312px) {
  .image-text__text p {
    font-size: 20px;
  }
}
.image-text__text p a {
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}
.image-text__text p a:hover {
  text-decoration-color: var(--black);
}
.image-text__text ul {
  list-style: none;
  margin-top: 14px;
}
@media only screen and (min-width: 688px) {
  .image-text__text ul {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .image-text__text ul {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 1312px) {
  .image-text__text ul {
    font-size: 20px;
  }
}
.image-text__text ul .image-text__bullet {
  width: 10px;
  height: 10px;
  background: var(--grey);
  flex-shrink: 0;
}
.image-text__text ul li {
  display: flex;
  align-items: baseline;
  border-top: 2px solid rgba(40, 46, 47, 0.12);
  padding: 12px 0;
  gap: 12px;
  text-wrap: pretty;
}
.image-text__text .button {
  margin-top: 14px;
}
@media only screen and (min-width: 992px) {
  .image-text__text .button {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 992px) {
  .image-text--alt .image-text__image {
    order: 2;
  }
  .image-text--alt .image-text__text {
    order: 1;
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) {
  .image-text--text-only .image-text__text {
    grid-column: 2/6;
    text-align: center;
    padding: 32px 0;
  }
}
@media only screen and (min-width: 1312px) {
  .image-text--text-only .image-text__text {
    padding: 48px 0;
  }
}
@media only screen and (min-width: 992px) {
  .image-text--text-only-tight .image-text__text {
    padding: 0;
  }
}
@media only screen and (min-width: 992px) {
  .image-text--text-only-wide .image-text__text {
    grid-column: 1/7;
  }
}

.image-text-stack {
  margin-top: 72px;
}
@media only screen and (min-width: 992px) {
  .image-text-stack {
    padding-bottom: 16px;
  }
}
@media only screen and (min-width: 1312px) {
  .image-text-stack {
    padding-bottom: 32px;
  }
}
.image-text-stack .wrap--grid {
  align-items: center;
}
.image-text-stack__image {
  grid-column: span 12;
  aspect-ratio: 1440/940;
  outline: 8px solid white;
  box-shadow: 0px 8px 64px 8px rgba(40, 46, 47, 0.12);
}
.image-text-stack__image img,
.image-text-stack__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.image-text-stack__image__mobile {
  position: absolute;
  top: 22%;
  right: 10%;
  width: 32%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 8px 32px 0 rgba(40, 46, 47, 0.2);
  padding: 4px;
  background: var(--dark);
  opacity: 0;
  transform: translate(0, 32px) rotate(3deg);
  transition: opacity 0.25s cubic-bezier(0.2, 0.3, 0, 1), transform 0.25s cubic-bezier(0.2, 0.3, 0, 1);
}
.image-text-stack__image__mobile img {
  border-radius: 16px;
}
@media only screen and (min-width: 992px) {
  .image-text-stack__image {
    display: none;
    position: relative;
    opacity: 0;
    transform: scale(0.8) rotate(2deg);
    transition: opacity 0.25s cubic-bezier(0.2, 0.3, 0, 1), transform 0.25s cubic-bezier(0.2, 0.3, 0, 1);
  }
  .image-text-stack__image--active {
    z-index: 1;
    opacity: 1;
    transform: scale(1) rotate(1deg);
    transition: opacity 0.25s cubic-bezier(0.2, 0.3, 0, 1) 0.2s, transform 0.4s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.2s;
  }
  .image-text-stack__image--active:nth-child(2n) {
    transform: scale(1) rotate(-1deg);
  }
  .image-text-stack__image--active .image-text-stack__image__mobile {
    opacity: 1;
    transform: translate(0, 0) rotate(3deg);
    transition: opacity 0.25s cubic-bezier(0.2, 0.3, 0, 1) 0.5s, transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.5s;
  }
}
.image-text-stack__text {
  grid-column: span 12;
  text-wrap: balance;
  padding: 32px 0 68px;
}
@media only screen and (min-width: 688px) {
  .image-text-stack__text {
    padding-bottom: 88px;
  }
}
@media only screen and (max-width: 991px) {
  .image-text-stack__text:last-child {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 992px) {
  .image-text-stack__text {
    grid-column: 1/4;
    padding: 0;
    aspect-ratio: 940/1080;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.image-text-stack__text h2,
.image-text-stack__text h3 {
  font-size: 24px;
}
@media only screen and (min-width: 688px) {
  .image-text-stack__text h2,
.image-text-stack__text h3 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .image-text-stack__text h2,
.image-text-stack__text h3 {
    font-size: 40px;
  }
}
.image-text-stack__text h2:not(:first-child),
.image-text-stack__text h3:not(:first-child) {
  margin-top: 16px;
}
@media only screen and (min-width: 992px) {
  .image-text-stack__text h2:not(:first-child),
.image-text-stack__text h3:not(:first-child) {
    margin-top: 22px;
  }
}
.image-text-stack__text p {
  margin-top: 14px;
}
@media only screen and (min-width: 688px) {
  .image-text-stack__text p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .image-text-stack__text p {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 1312px) {
  .image-text-stack__text p {
    font-size: 20px;
  }
}
.image-text-stack__stack {
  display: none;
}
@media only screen and (min-width: 992px) {
  .image-text-stack__stack {
    display: flex;
    grid-column: 5/13;
    position: sticky;
    top: calc(50% - (100vh * 0.3));
    aspect-ratio: 1440/940;
  }
  .image-text-stack__stack .image-text-stack__image {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
@media only screen and (min-width: 992px) {
  .image-text-stack--alt .image-text-stack__text {
    order: 2;
    grid-column: 8/13;
    padding-left: 40px;
  }
}
@media only screen and (min-width: 1312px) {
  .image-text-stack--alt .image-text-stack__text {
    padding-left: 64px;
  }
}
@media only screen and (min-width: 992px) {
  .image-text-stack--alt .image-text-stack__stack {
    order: 1;
    grid-column: 1/8;
  }
}
@media only screen and (min-width: 992px) {
  .image-text-stack--alt .image-text-stack__image--active {
    transform: scale(1) rotate(-1deg);
  }
  .image-text-stack--alt .image-text-stack__image--active:nth-child(2n) {
    transform: scale(1) rotate(1deg);
  }
}

.testimonial {
  background: var(--dark);
  padding: 80px 0;
}
@media only screen and (min-width: 1312px) {
  .testimonial {
    padding: 96px 0;
  }
}
.testimonial--accent-cyan {
  --testimonial-accent: var(--cyan);
}
.testimonial--accent-cyan .testimonial__box {
  background: rgba(117, 251, 251, 0.8);
}
.testimonial--accent-lime {
  --testimonial-accent: var(--lime);
}
.testimonial--accent-lime .testimonial__box {
  background: rgba(219, 255, 168, 0.8);
}
.testimonial--accent-purple {
  --testimonial-accent: var(--purple);
}
.testimonial--accent-purple .testimonial__box {
  background: rgba(202, 188, 255, 0.8);
}
.testimonial--accent-green {
  --testimonial-accent: var(--green);
}
.testimonial--accent-green .testimonial__box {
  background: rgba(170, 255, 219, 0.8);
}
.testimonial__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.3;
}
.testimonial__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial__mark {
  position: absolute;
}
.testimonial__mark svg {
  fill: var(--testimonial-accent);
  height: 32px;
}
@media only screen and (min-width: 992px) {
  .testimonial__mark svg {
    height: 48px;
  }
}
@media only screen and (min-width: 1312px) {
  .testimonial__mark svg {
    height: 64px;
  }
}
.testimonial__mark--open {
  top: -48px;
  left: 32px;
}
@media only screen and (min-width: 992px) {
  .testimonial__mark--open {
    top: 0;
  }
}
.testimonial__mark--close {
  bottom: -48px;
  right: 32px;
}
@media only screen and (min-width: 992px) {
  .testimonial__mark--close {
    bottom: 0;
  }
}
.testimonial__box {
  grid-column: 1/7;
  padding: 32px;
  transform: rotate(-1deg);
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .testimonial__box {
    grid-column: 2/6;
    margin: 0 -32px;
  }
}
@media only screen and (min-width: 1312px) {
  .testimonial__box {
    padding: 40px;
  }
}
.testimonial__box--alt {
  transform: rotate(1deg);
}
.testimonial__author {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
}
.testimonial__author__image {
  width: 104px;
  height: 104px;
  border: 4px solid var(--black);
  background: var(--grey);
  flex-shrink: 0;
}
.testimonial__author__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial__author__name {
  display: flex;
  align-items: center;
  margin-left: -24px;
  padding: 4px 6px;
  background: var(--black);
  font-size: 10px;
  line-height: 1.2;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: white;
  text-align: left;
}
@media only screen and (min-width: 1312px) {
  .testimonial__author__name {
    top: calc(50% - 10px);
    font-size: 12px;
  }
}
.testimonial__text {
  text-wrap: pretty;
}

.cta {
  text-align: center;
  padding: 128px 0;
  text-align: center;
}
@media only screen and (min-width: 688px) {
  .cta {
    padding: 140px 0;
  }
}
@media only screen and (min-width: 992px) {
  .cta {
    padding: 176px 0;
  }
}
@media only screen and (min-width: 1312px) {
  .cta {
    padding: 192px 0;
  }
}
.cta__label {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 3px;
  background: var(--silver);
  font-size: 10px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--black);
  white-space: nowrap;
  transform: rotate(-1deg);
}
@media only screen and (min-width: 1312px) {
  .cta__label {
    height: 20px;
    padding: 0 4px;
    font-size: 12px;
  }
}
.cta__text {
  margin-top: 20px;
  text-wrap: balance;
  font-size: 40px;
}
@media only screen and (min-width: 688px) {
  .cta__text {
    margin-top: 30px;
    font-size: 48px;
  }
}
@media only screen and (min-width: 992px) {
  .cta__text {
    font-size: 56px;
  }
}
@media only screen and (min-width: 1312px) {
  .cta__text {
    margin-top: 38px;
    font-size: 64px;
  }
}
.cta .button {
  margin-top: 26px;
}
@media only screen and (min-width: 688px) {
  .cta .button {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 1312px) {
  .cta .button {
    margin-top: 38px;
  }
}

.inline-media-text {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .inline-media-text {
    margin-top: 96px;
    text-align: center;
  }
}
@media only screen and (min-width: 992px) {
  .inline-media-text {
    margin-top: 112px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1311px) {
  .inline-media-text .wrap {
    max-width: 900px;
  }
}
.inline-media-text__content {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: 32px;
  text-wrap: pretty;
}
@media only screen and (min-width: 688px) {
  .inline-media-text__content {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .inline-media-text__content {
    font-size: 48px;
  }
}
@media only screen and (min-width: 1312px) {
  .inline-media-text__content {
    font-size: 56px;
  }
}
.inline-media-text__image {
  position: relative;
  z-index: 1;
  display: inline-block;
  vertical-align: middle;
  width: 74px;
  height: 20px;
  margin: 0 4px;
}
@media only screen and (min-width: 688px) {
  .inline-media-text__image {
    height: 24px;
    margin: 0 6px;
  }
}
@media only screen and (min-width: 992px) {
  .inline-media-text__image {
    width: 88px;
  }
}
@media only screen and (min-width: 1312px) {
  .inline-media-text__image {
    width: 118px;
    height: 32px;
    margin: 0 6px;
  }
}
.inline-media-text__image img,
.inline-media-text__image video {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 74px;
  border-radius: 4px;
  outline: 2px solid white;
  box-shadow: 0px 4px 16px 4px rgba(40, 46, 47, 0.12);
}
@media only screen and (min-width: 992px) {
  .inline-media-text__image img,
.inline-media-text__image video {
    width: 88px;
    outline: 3px solid white;
  }
}
@media only screen and (min-width: 1312px) {
  .inline-media-text__image img,
.inline-media-text__image video {
    width: 118px;
    outline: 4px solid white;
  }
}
.inline-media-text__image--images img {
  transform: translate(0, -34%) rotate(1.52deg) scale(0.9);
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
  will-change: transform;
}
.inline-media-text__image--images img.inline-media-text__image--active {
  transform: translate(0, -34%) rotate(1.52deg) scale(1);
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.inline-media-text__image--video video {
  transform: translate(0, -34%) rotate(-2.35deg);
}
.inline-media-text__note {
  margin-top: 20px;
  text-wrap: balance;
}
@media only screen and (min-width: 992px) {
  .inline-media-text__note {
    margin-top: 26px;
  }
}
@media only screen and (min-width: 1312px) {
  .inline-media-text__note {
    margin-top: 32px;
  }
}
@media only screen and (min-width: 688px) {
  .inline-media-text__note p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1312px) {
  .inline-media-text__note p {
    font-size: 20px;
  }
}

.feature-grid {
  overflow: hidden;
  padding-bottom: 40px;
  margin-bottom: -40px;
}
.feature-grid__scribble {
  position: relative;
  display: inline-flex;
  color: var(--orange);
  margin: 0 0 32px 32px;
}
@media only screen and (min-width: 688px) {
  .feature-grid__scribble {
    margin: 0 0 48px 64px;
  }
}
.feature-grid__scribble .scribble-arrow-angle-clockwise {
  position: absolute;
  top: -26px;
  left: 110px;
  height: 82px;
  transform: rotate(-115deg);
}
.feature-grid__scribble .scribble-arrow-angle-clockwise__line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}
.feature-grid__scribble .scribble-arrow-angle-clockwise__head-left {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}
.feature-grid__scribble .scribble-arrow-angle-clockwise__head-right {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}
.feature-grid__scribble span {
  display: block;
  width: 100px;
  font-family: var(--font-note);
  font-size: 22px;
  line-height: 0.9;
  white-space: pre-line;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: translate(0, 8px) rotate(0deg);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media only screen and (min-width: 1312px) {
  .feature-grid__scribble span {
    font-size: 24px;
  }
}
.feature-grid__scribble.js-scribble-animate span {
  opacity: 1;
  transform: translate(0, 0) rotate(-4deg);
}
.feature-grid__scribble.js-scribble-animate .scribble-arrow-angle-clockwise__line {
  animation: draw_line 0.3s cubic-bezier(0.06, 0.66, 0.99, 0.52) forwards;
}
.feature-grid__scribble.js-scribble-animate .scribble-arrow-angle-clockwise__head-left {
  animation: draw_line 0.3s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.3s;
}
.feature-grid__scribble.js-scribble-animate .scribble-arrow-angle-clockwise__head-right {
  animation: draw_line 0.3s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.4s;
}
.feature-grid__grid {
  display: grid;
  column-gap: 16px;
  row-gap: 16px;
}
@media only screen and (min-width: 688px) {
  .feature-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 1312px) {
  .feature-grid__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.feature-grid__feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 12px;
  background: var(--silver);
  text-align: center;
  text-wrap: balance;
}
.feature-grid__feature span {
  white-space: pre-line;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
@media only screen and (min-width: 1312px) {
  .feature-grid__feature span {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-grid__feature {
    transition: all 0.4s cubic-bezier(0.2, 0.3, 0, 1);
  }
  .feature-grid__feature:hover {
    transform: scale(1.2) rotate(-0.5deg);
    z-index: 1;
    box-shadow: 0px 4px 32px rgba(40, 46, 47, 0.08);
    background: var(--cyan);
  }
  .feature-grid__feature:hover:nth-child(2n) {
    transform: scale(1.2) rotate(0.5deg);
  }
}

.client-logos .wrap {
  height: 32px;
  margin-top: -32px;
}
@media only screen and (min-width: 992px) {
  .client-logos .wrap {
    height: 40px;
    margin-top: -40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1311px) {
  .client-logos .wrap {
    max-width: 100%;
  }
}
.client-logos__scribble {
  position: relative;
  display: inline-flex;
  color: var(--orange);
}
.client-logos__scribble .scribble-arrow-angle-clockwise {
  position: absolute;
  top: -10px;
  left: 84px;
  height: 72px;
  transform: rotate(-96deg);
}
@media only screen and (min-width: 992px) {
  .client-logos__scribble .scribble-arrow-angle-clockwise {
    height: 82px;
  }
}
@media only screen and (min-width: 1312px) {
  .client-logos__scribble .scribble-arrow-angle-clockwise {
    left: 90px;
  }
}
.client-logos__scribble .scribble-arrow-angle-clockwise__line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}
.client-logos__scribble .scribble-arrow-angle-clockwise__head-left {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}
.client-logos__scribble .scribble-arrow-angle-clockwise__head-right {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}
.client-logos__scribble span {
  display: block;
  font-family: var(--font-note);
  font-size: 22px;
  line-height: 0.9;
  white-space: pre-line;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: translate(0, 8px) rotate(0deg);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media only screen and (min-width: 1312px) {
  .client-logos__scribble span {
    font-size: 24px;
  }
}
.client-logos__scribble.js-scribble-animate span {
  opacity: 1;
  transform: translate(0, 0) rotate(-4deg);
}
.client-logos__scribble.js-scribble-animate .scribble-arrow-angle-clockwise__line {
  animation: draw_line 0.3s cubic-bezier(0.06, 0.66, 0.99, 0.52) forwards;
}
.client-logos__scribble.js-scribble-animate .scribble-arrow-angle-clockwise__head-left {
  animation: draw_line 0.3s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.3s;
}
.client-logos__scribble.js-scribble-animate .scribble-arrow-angle-clockwise__head-right {
  animation: draw_line 0.3s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.4s;
}
.client-logos__carousel {
  display: flex;
  flex-flow: nowrap;
  padding-top: 32px;
}
@media only screen and (min-width: 1312px) {
  .client-logos__carousel {
    padding-top: 40px;
  }
}
.client-logos__carousel .flickity-viewport {
  width: 100%;
}
.client-logos__item {
  height: 60px;
  aspect-ratio: 4/3;
  margin-left: 24px;
}
@media only screen and (min-width: 992px) {
  .client-logos__item {
    height: 80px;
  }
}
.client-logos__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.extra-quotes {
  padding-bottom: 72px;
}
@media only screen and (min-width: 688px) {
  .extra-quotes {
    padding-bottom: 96px;
  }
}
.extra-quotes__grid {
  display: grid;
  column-gap: 24px;
  row-gap: 24px;
}
@media only screen and (min-width: 992px) {
  .extra-quotes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.extra-quotes__item {
  padding: 32px;
  background: var(--silver);
}
.extra-quotes__quote {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.extra-quotes__author {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.extra-quotes__author__image {
  width: 44px;
  height: 44px;
  border: 2px solid var(--black);
  background: var(--grey);
  flex-shrink: 0;
}
.extra-quotes__author span {
  text-wrap: balance;
  font-size: 10px;
  line-height: 1.2;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.body--home .outer-wrapper {
  overflow-x: hidden;
}

.home-hero {
  position: relative;
  display: flex;
  background: linear-gradient(180deg, var(--silver), transparent);
  padding-top: calc(var(--header-height) + 72px);
}
@media only screen and (min-width: 688px) {
  .home-hero {
    height: 600px;
  }
}
@media only screen and (min-width: 992px) {
  .home-hero {
    height: calc(100vh - 258px);
    min-height: 600px;
    margin-bottom: 164px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-hero {
    height: calc(100vh - 274px);
    margin-bottom: 196px;
  }
}
.home-hero__gradient {
  position: absolute;
  top: -25%;
  left: 50%;
  width: 100vw;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(202, 188, 255, 0.4) 0%, rgba(202, 188, 255, 0) 70%);
  z-index: -1;
}
.home-hero__gradient-two {
  position: absolute;
  top: -50%;
  right: 50%;
  width: 100vw;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(255, 195, 152, 0.3) 0%, rgba(255, 195, 152, 0) 70%);
  z-index: -1;
}
.home-hero .wrap {
  margin: auto;
}
.home-hero__image {
  position: absolute;
}
.home-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
@media only screen and (max-width: 687px) {
  .home-hero__image {
    display: none;
  }
}
.home-hero__image--one {
  top: -20%;
  right: 84%;
  width: 200px;
  transform: rotate(-2deg);
  aspect-ratio: 1440/940;
}
@media only screen and (min-width: 992px) {
  .home-hero__image--one {
    top: -9%;
    right: 84%;
    width: 200px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-hero__image--one {
    top: -5%;
    right: 82%;
    width: 240px;
  }
}
.home-hero__image--two {
  bottom: -18%;
  right: 81%;
  width: 270px;
  transform: rotate(-1deg);
  box-shadow: 0px 8px 64px rgba(40, 46, 47, 0.08);
  aspect-ratio: 1440/940;
}
@media only screen and (min-width: 992px) {
  .home-hero__image--two {
    bottom: -17%;
    right: 76%;
    width: 340px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-hero__image--two {
    bottom: -18%;
    right: 74%;
    width: 400px;
  }
}
.home-hero__image--three {
  top: -38%;
  left: 80%;
  width: 280px;
}
@media only screen and (min-width: 992px) {
  .home-hero__image--three {
    top: -24%;
    left: 78%;
    width: 320px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-hero__image--three {
    top: -24%;
    left: 76%;
    width: 400px;
  }
}
.home-hero__image--four {
  bottom: -8%;
  left: 89%;
  width: 260px;
  transform: rotate(2deg);
  box-shadow: 0px 8px 64px rgba(40, 46, 47, 0.08);
  aspect-ratio: 1440/940;
}
@media only screen and (min-width: 992px) {
  .home-hero__image--four {
    bottom: -8%;
    left: 82%;
    width: 260px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-hero__image--four {
    bottom: -5%;
    left: 82%;
    width: 280px;
  }
}
.home-hero__content {
  -webkit-font-smoothing: antialiased;
  text-align: center;
}
.home-hero__content h1 {
  white-space: pre-line;
  font-size: 48px;
  line-height: 0.95;
  margin-bottom: 32px;
}
@media only screen and (min-width: 688px) {
  .home-hero__content h1 {
    font-size: 64px;
  }
}
@media only screen and (min-width: 992px) {
  .home-hero__content h1 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-hero__content h1 {
    font-size: 96px;
  }
}
.home-hero__content p {
  margin: 10px auto 0;
  text-wrap: balance;
}
@media only screen and (min-width: 688px) {
  .home-hero__content p {
    max-width: 500px;
  }
}
@media only screen and (min-width: 992px) {
  .home-hero__content p {
    font-size: 18px;
    max-width: 560px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-hero__content p {
    font-size: 20px;
    max-width: 660px;
  }
}
.home-hero__content p strong {
  font-weight: 600;
}
.home-hero__content p svg {
  height: 18px;
  vertical-align: middle;
}
@media only screen and (min-width: 992px) {
  .home-hero__content p svg {
    height: 20px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-hero__content p svg {
    height: 22px;
  }
}
.home-hero__content p a {
  color: white;
  text-decoration: underline;
}
.home-hero__content p a:hover {
  text-decoration-color: var(--accent);
}
.home-hero__scribble {
  position: absolute;
  bottom: 60px;
  right: 26px;
  color: var(--orange);
}
@media only screen and (min-width: 992px) {
  .home-hero__scribble {
    display: none;
  }
}
.home-hero__scribble .scribble-arrow-angle {
  position: absolute;
  bottom: -40px;
  left: -66px;
  height: 75px;
}
.home-hero__scribble span {
  display: block;
  width: 100px;
  font-family: var(--font-note);
  font-size: 22px;
  line-height: 0.9;
  white-space: pre-line;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  transform: rotate(2deg);
}

.home-changes {
  margin-top: 56px;
}
@media only screen and (min-width: 688px) {
  .home-changes {
    margin-top: 72px;
  }
}
@media only screen and (min-width: 992px) {
  .home-changes {
    margin-top: 0;
    position: fixed;
    bottom: 16px;
    left: 0;
    right: 0;
    z-index: 100;
  }
}
.home-changes__box {
  padding: 24px;
  background: var(--lime);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media only screen and (min-width: 688px) {
  .home-changes__box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    animation: changesBounce 5s cubic-bezier(0.2, 0.3, 0, 1) infinite;
  }
  .home-changes__box:hover {
    animation: none;
  }
}
.home-changes__text {
  text-wrap: balance;
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media only screen and (min-width: 992px) {
  .home-changes__text {
    font-size: 24px;
  }
}
.home-changes__text a {
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

@keyframes changesBounce {
  0% {
    transform: translate(0, 0);
  }
  5% {
    transform: translate(0, -6px);
  }
  10% {
    transform: translate(0, 4px);
  }
  15% {
    transform: translate(0, -4px);
  }
  20% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
.body--home .image-text--text-only {
  text-align: center;
}
.body--home .image-text--text-only .wrap {
  max-width: 840px;
}

.home-products {
  margin-top: 56px;
}
@media only screen and (min-width: 688px) {
  .home-products {
    margin-top: 72px;
  }
}
@media only screen and (min-width: 992px) {
  .home-products {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-products {
    margin-top: 96px;
  }
}
.home-products .wrap--grid {
  row-gap: 56px;
}
@media only screen and (min-width: 688px) {
  .home-products .wrap--grid {
    row-gap: 72px;
  }
}

.home-product {
  position: relative;
  background: linear-gradient(215deg, var(--silver) 0%, #FAFCFD 75%, var(--silver) 100%);
  grid-column: span 6;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media only screen and (min-width: 688px) {
  .home-product {
    padding: 48px 0;
    gap: 48px;
  }
}
@media only screen and (min-width: 992px) {
  .home-product {
    grid-column: span 3;
    padding: 32px 0;
    gap: 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-product {
    padding: 64px 0;
    gap: 58px;
  }
}
.home-product--overflow-hidden {
  overflow: hidden;
}
.home-product--background-only {
  aspect-ratio: 3/4;
}
@media only screen and (min-width: 688px) {
  .home-product--background-only {
    aspect-ratio: 4/3;
  }
}
@media only screen and (min-width: 992px) {
  .home-product--background-only {
    aspect-ratio: unset;
    min-height: 600px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-product--background-only {
    min-height: 720px;
  }
}
.home-product--inverse {
  background: var(--black);
  color: white;
}
.home-product--inverse .home-product__screen {
  box-shadow: 0px 8px 64px rgba(0, 0, 0, 0.5);
}
.home-product--inverse .home-product__screen__top {
  background: var(--silver);
}
.home-product--inverse .home-product__content h2 {
  -webkit-font-smoothing: antialiased;
}
.home-product__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.home-product__bg img,
.home-product__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-product__bg:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(209deg, rgba(33, 32, 39, 0) 50%, rgba(33, 32, 39, 0.6) 80%);
}
.home-product__logo svg {
  height: 48px;
}
.home-product__logo .logo--unsigned {
  height: 51px;
}
.home-product__content {
  position: relative;
  padding: 0 32px;
  text-wrap: balance;
}
@media only screen and (min-width: 688px) {
  .home-product__content {
    padding: 0 48px;
  }
}
@media only screen and (min-width: 992px) {
  .home-product__content {
    padding: 0 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-product__content {
    padding: 0 64px;
  }
}
.home-product__content:last-child {
  margin-top: auto;
}
.home-product__content h2 {
  margin-top: 20px;
}
@media only screen and (min-width: 1312px) {
  .home-product__content h2 {
    margin-top: 24px;
  }
}
.home-product__content h2:first-child {
  margin-top: 0;
}
.home-product__content .button {
  margin-top: 24px;
}
.home-product__magazine {
  margin: 0 32px;
  box-shadow: 0px 8px 64px rgba(40, 46, 47, 0.08);
  transform: rotate(1deg);
}
@media only screen and (min-width: 688px) {
  .home-product__magazine {
    margin: 0 48px;
  }
}
@media only screen and (min-width: 992px) {
  .home-product__magazine {
    margin: 0 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-product__magazine {
    margin: 0 64px;
  }
}
.home-product__carousel {
  width: 100%;
  padding: 0 32px;
  margin: auto;
}
@media only screen and (min-width: 688px) {
  .home-product__carousel {
    padding: 0 48px;
  }
}
@media only screen and (min-width: 992px) {
  .home-product__carousel {
    padding: 0 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-product__carousel {
    padding: 0 64px;
  }
}
.home-product__carousel__inner {
  transform: rotate(-1deg);
}
.home-product__carousel__inner .flickity-viewport {
  overflow: visible;
}
.home-product__mag-post {
  width: 240px;
  flex-shrink: 0;
  background: white;
  padding: 16px;
  margin-right: 8px;
  transition: box-shadow 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
@media only screen and (min-width: 1312px) {
  .home-product__mag-post {
    width: 320px;
  }
}
.home-product__mag-post.is-selected {
  box-shadow: 0px 8px 64px rgba(40, 46, 47, 0.08);
}
.home-product__mag-post img {
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.home-product__mag-post__date {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 3px;
  background: var(--black);
  color: white;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
@media only screen and (min-width: 1312px) {
  .home-product__mag-post__date {
    margin-top: 20px;
    font-size: 12px;
  }
}
.home-product__mag-post__title {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (min-width: 1312px) {
  .home-product__mag-post__title {
    font-size: 24px;
  }
}
.home-product__vault {
  position: relative;
  aspect-ratio: 10/6.5;
  margin: 0 32px;
}
@media only screen and (min-width: 688px) {
  .home-product__vault {
    margin: 0 48px;
  }
}
@media only screen and (min-width: 992px) {
  .home-product__vault {
    margin: 0 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-product__vault {
    margin: 0 64px;
  }
}
.home-product__vault__item {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  width: 50%;
}
.home-product__vault__item img,
.home-product__vault__item video {
  width: 100%;
  aspect-ratio: 340/382;
  filter: blur(0.1px);
}
.home-product__vault__item--1 {
  right: 0;
  bottom: 5%;
  background: var(--dark);
  transform: rotate(3deg);
}
.home-product__vault__item--1 img {
  opacity: 0.8;
}
.home-product__vault__item--2 {
  bottom: 0%;
  left: 0;
  background: var(--dark);
  transform: rotate(-3deg);
}
.home-product__vault__item--2 img {
  opacity: 0.4;
}
.home-product__vault__item--3 {
  bottom: 15%;
  left: 25%;
  border: 4px solid white;
  border-radius: 6px;
  box-shadow: 0px 6px 48px rgba(255, 255, 255, 0.25);
  background: white;
  transform: rotate(-1deg);
}
.home-product__reels {
  position: relative;
  aspect-ratio: 10/8;
  margin: 0 32px;
}
@media only screen and (min-width: 688px) {
  .home-product__reels {
    margin: 0 48px;
  }
}
@media only screen and (min-width: 992px) {
  .home-product__reels {
    margin: 0 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-product__reels {
    margin: 0 64px;
  }
}
.home-product__reels img {
  position: absolute;
  width: 50%;
}
.home-product__reels img:first-child {
  top: 0;
  left: 0;
  transform: rotate(-2deg);
}
.home-product__reels img:last-child {
  top: 5%;
  left: 40%;
  width: 60%;
  outline: 6px solid white;
  box-shadow: 0px 6px 48px rgba(40, 46, 47, 0.12);
  transform: rotate(1deg);
}
.home-product__screen {
  margin: 0 32px;
  box-shadow: 0px 8px 64px rgba(40, 46, 47, 0.08);
  transform: rotate(1deg);
  -webkit-backface-visibility: hidden;
}
@media only screen and (min-width: 688px) {
  .home-product__screen {
    margin: 0 48px;
  }
}
@media only screen and (min-width: 992px) {
  .home-product__screen {
    margin: 0 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-product__screen {
    margin: 0 64px;
  }
}
.home-product__screen__top {
  height: 32px;
  padding: 12px;
  display: flex;
  gap: 4px;
  background: white;
}
.home-product__screen__top div {
  width: 8px;
  height: 8px;
  background: rgba(84, 100, 94, 0.2);
}
.home-product__screen__shot {
  aspect-ratio: 1440/940;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-product__screen__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.home-product__2-images {
  position: relative;
  aspect-ratio: 1440/940;
  margin: auto 32px -16px;
}
@media only screen and (min-width: 688px) {
  .home-product__2-images {
    margin: auto 24px -24px;
  }
}
@media only screen and (min-width: 992px) {
  .home-product__2-images {
    margin: auto 32px -32px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-product__2-images {
    margin: auto 32px -32px 32px;
  }
}
.home-product__2-images__image {
  position: absolute;
  width: 70%;
  aspect-ratio: 1440/940;
  box-shadow: 0px 8px 64px rgba(40, 46, 47, 0.08);
}
.home-product__2-images__image img,
.home-product__2-images__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.home-product__2-images__image--one {
  top: 0;
  left: 0;
  transform: rotate(-2deg);
}
.home-product__2-images__image--two {
  bottom: 0;
  right: 0;
  transform: rotate(2deg);
}

.home-products-small {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media only screen and (min-width: 992px) {
  .home-products-small {
    grid-column: span 3;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1311px) {
  .home-products-small {
    gap: 24px;
  }
}

.home-product-small {
  position: relative;
  padding: 32px;
  background: var(--silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  flex-grow: 1;
}
@media only screen and (min-width: 688px) {
  .home-product-small {
    flex-direction: row;
  }
}
.home-product-small__image {
  width: 100%;
  aspect-ratio: 16/9;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0px 8px 32px rgba(40, 46, 47, 0.12);
}
@media only screen and (min-width: 688px) {
  .home-product-small__image {
    width: 160px;
    aspect-ratio: 3/4;
  }
}
@media only screen and (min-width: 992px) {
  .home-product-small__image {
    transform: rotate(-1deg);
  }
}
@media only screen and (min-width: 1312px) {
  .home-product-small__image {
    width: 200px;
  }
}
.home-product-small__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.home-product-small__content h2 {
  margin-top: 16px;
  text-wrap: balance;
}
@media only screen and (min-width: 992px) and (max-width: 1311px) {
  .home-product-small__content h2 {
    font-size: 24px;
  }
}
.home-product-small__content .button {
  margin-top: 16px;
}
.home-product-small:first-child {
  background: var(--purple);
}
.home-product-small:first-child .home-product__logo {
  margin-left: -14px;
}
.home-product-small:first-child .home-product__logo svg {
  height: 64px;
}
.home-product-small:first-child .home-product-small__image {
  box-shadow: 0px 8px 32px rgba(40, 46, 47, 0.24);
}
@media only screen and (min-width: 992px) {
  .home-product-small:last-child .home-product-small__content {
    order: 1;
  }
  .home-product-small:last-child .home-product-small__image {
    order: 2;
    transform: rotate(1deg);
  }
}
.home-product-small .home-product--ootb__side {
  width: 48px;
  height: 3px;
  background: var(--black);
  position: absolute;
  bottom: 22px;
  right: -8px;
  transform: rotate(-58deg);
}

.home-treatments__scribble {
  position: absolute;
  top: -30px;
  right: 16px;
  color: var(--orange);
}
@media only screen and (min-width: 688px) {
  .home-treatments__scribble {
    top: -36px;
    right: 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-treatments__scribble {
    top: -40px;
    right: 48px;
  }
}
.home-treatments__scribble .scribble-arrow-angle {
  position: absolute;
  top: -18px;
  right: 104px;
  height: 84px;
}
@media only screen and (min-width: 688px) {
  .home-treatments__scribble .scribble-arrow-angle {
    top: -20px;
    right: 114px;
    height: 96px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-treatments__scribble .scribble-arrow-angle {
    top: -24px;
    right: 126px;
    height: 115px;
  }
}
.home-treatments__scribble .scribble-arrow-angle__line {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
}
.home-treatments__scribble .scribble-arrow-angle__head-left {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.home-treatments__scribble .scribble-arrow-angle__head-right {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.home-treatments__scribble span {
  display: block;
  font-family: var(--font-note);
  font-size: 20px;
  line-height: 0.9;
  white-space: pre-line;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: translate(0, 8px) rotate(0deg);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media only screen and (min-width: 688px) {
  .home-treatments__scribble span {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-treatments__scribble span {
    font-size: 24px;
  }
}
.home-treatments__scribble.js-scribble-animate span {
  opacity: 1;
  transform: translate(0, 0) rotate(4deg);
}
.home-treatments__scribble.js-scribble-animate .scribble-arrow-angle__line {
  animation: draw_line 0.3s cubic-bezier(0.06, 0.66, 0.99, 0.52) forwards;
}
.home-treatments__scribble.js-scribble-animate .scribble-arrow-angle__head-left {
  animation: draw_line 0.2s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.2s;
}
.home-treatments__scribble.js-scribble-animate .scribble-arrow-angle__head-right {
  animation: draw_line 0.2s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.3s;
}

.home-testimonial {
  margin-top: 56px;
}
@media only screen and (min-width: 688px) {
  .home-testimonial {
    margin-top: 72px;
  }
}
@media only screen and (min-width: 992px) {
  .home-testimonial {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 1312px) {
  .home-testimonial {
    margin-top: 96px;
  }
}

.hero__vault-carousel {
  position: absolute;
  top: var(--header-height);
  right: 0;
  bottom: 45%;
  left: 50%;
  margin-left: -200px;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel {
    bottom: 28%;
    margin-left: -340px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__vault-carousel {
    left: 50%;
    margin-left: unset;
    bottom: 5%;
  }
}
.hero__vault-carousel__spots {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 400px;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__spots {
    width: 680px;
  }
}
.hero__vault-carousel__spots__item {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
}
.hero__vault-carousel__spots__item img,
.hero__vault-carousel__spots__item video {
  width: 200px;
  aspect-ratio: 340/382;
  filter: blur(0.1px);
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__spots__item img,
.hero__vault-carousel__spots__item video {
    width: 340px;
  }
}
.hero__vault-carousel__spots__item--1 {
  bottom: 40px;
  left: 46%;
  background: var(--dark);
  opacity: 0;
  transform: rotate(3deg) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.1s linear 0.4s;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__spots__item--1 {
    left: 50%;
    bottom: 110px;
  }
}
.hero__vault-carousel__spots__item--1 img {
  opacity: 0.8;
}
.active .hero__vault-carousel__spots__item--1 {
  transform: rotate(3deg) translateY(0);
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.hero__vault-carousel__spots__item--2 {
  bottom: 20px;
  left: 7%;
  background: var(--dark);
  opacity: 0;
  transform: rotate(-3deg) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.1s linear 0.4s;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__spots__item--2 {
    bottom: 80px;
    left: 0;
  }
}
.hero__vault-carousel__spots__item--2 img {
  opacity: 0.4;
}
.active .hero__vault-carousel__spots__item--2 {
  transform: rotate(-3deg) translateY(0);
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.1s, transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.1s;
}
.hero__vault-carousel__spots__item--3 {
  bottom: 70px;
  left: 25%;
  border: 4px solid white;
  border-radius: 6px;
  box-shadow: 0px 6px 48px rgba(255, 255, 255, 0.25);
  background: white;
  opacity: 0;
  transform: rotate(-1deg) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.1s linear 0.4s;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__spots__item--3 {
    bottom: 140px;
    left: 25%;
    border-width: 8px;
  }
}
.active .hero__vault-carousel__spots__item--3 {
  transform: rotate(-1deg) translateY(0);
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.2s, transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.2s;
}
.hero__vault-carousel__companies {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 400px;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__companies {
    width: 680px;
  }
}
.hero__vault-carousel__companies__profile {
  position: absolute;
  bottom: 140px;
  left: 25%;
  border: 4px solid white;
  background: white;
  opacity: 0;
  transform: rotate(1deg) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.1s linear 0.4s;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__companies__profile {
    bottom: 180px;
    left: 25%;
    border-width: 8px;
  }
}
.active .hero__vault-carousel__companies__profile {
  transform: rotate(1deg) translateY(0);
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.hero__vault-carousel__companies__card {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0px 6px 48px rgba(33, 32, 39, 0.25);
}
.hero__vault-carousel__companies__card img,
.hero__vault-carousel__companies__card video {
  height: 100px;
  filter: blur(0.1px);
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__companies__card img,
.hero__vault-carousel__companies__card video {
    height: 140px;
  }
}
.hero__vault-carousel__companies__card--1 {
  bottom: 10px;
  left: 20%;
  opacity: 0;
  transform: rotate(2deg) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.1s linear 0.4s;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__companies__card--1 {
    bottom: 80px;
    left: 30%;
  }
}
.active .hero__vault-carousel__companies__card--1 {
  transform: rotate(2deg) translateY(0);
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.2s, transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.2s;
}
.hero__vault-carousel__companies__card--2 {
  bottom: 80px;
  left: 8%;
  transform: rotate(-1deg);
  opacity: 0;
  transform: rotate(-1deg) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.1s linear 0.4s;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__companies__card--2 {
    bottom: 170px;
    left: 15%;
  }
}
.active .hero__vault-carousel__companies__card--2 {
  transform: rotate(-1deg) translateY(0);
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.3s, transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.3s;
}
.hero__vault-carousel__directors {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 400px;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__directors {
    width: 680px;
  }
}
.hero__vault-carousel__directors__item {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
}
.hero__vault-carousel__directors__item img,
.hero__vault-carousel__directors__item video {
  height: 240px;
  aspect-ratio: 496/888;
  filter: blur(0.1px);
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__directors__item img,
.hero__vault-carousel__directors__item video {
    height: 340px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__vault-carousel__directors__item img,
.hero__vault-carousel__directors__item video {
    height: 444px;
  }
}
.hero__vault-carousel__directors__item--1 {
  bottom: 24px;
  left: 54%;
  background: var(--dark);
  opacity: 0;
  transform: rotate(3deg) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.1s linear 0.4s;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__directors__item--1 {
    left: 50%;
    bottom: 80px;
  }
}
.hero__vault-carousel__directors__item--1 img {
  opacity: 0.8;
}
.active .hero__vault-carousel__directors__item--1 {
  transform: rotate(3deg) translateY(0);
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.hero__vault-carousel__directors__item--2 {
  bottom: 10px;
  left: 10%;
  background: var(--dark);
  opacity: 0;
  transform: rotate(-3deg) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.1s linear 0.4s;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__directors__item--2 {
    bottom: 60px;
    left: 5%;
  }
}
.hero__vault-carousel__directors__item--2 img {
  opacity: 0.4;
}
.active .hero__vault-carousel__directors__item--2 {
  transform: rotate(-3deg) translateY(0);
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.1s, transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.1s;
}
.hero__vault-carousel__directors__item--3 {
  bottom: 50px;
  left: 30%;
  border: 4px solid white;
  border-radius: 6px;
  box-shadow: 0px 6px 48px rgba(255, 255, 255, 0.25);
  background: white;
  opacity: 0;
  transform: rotate(-1deg) translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.1s linear 0.4s;
}
@media only screen and (min-width: 688px) {
  .hero__vault-carousel__directors__item--3 {
    bottom: 100px;
    left: 25%;
    border-width: 8px;
  }
}
.active .hero__vault-carousel__directors__item--3 {
  transform: rotate(-1deg) translateY(0);
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.2s, transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.2s;
}

.body--vault .image-text .image-text__image {
  transform: rotate(-1deg);
}
.body--vault .image-text--alt .image-text__image {
  transform: rotate(1deg);
}
.body--vault .image-text h2, .body--vault .image-text h3 {
  font-size: 24px;
}
@media only screen and (min-width: 688px) {
  .body--vault .image-text h2, .body--vault .image-text h3 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 992px) {
  .body--vault .image-text h2, .body--vault .image-text h3 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .body--vault .image-text h2, .body--vault .image-text h3 {
    font-size: 40px;
  }
}

.vault-downloads {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .vault-downloads {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 992px) {
  .vault-downloads {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 1312px) {
  .vault-downloads {
    margin-top: 96px;
  }
}
.vault-downloads .wrap--grid {
  row-gap: 40px;
  align-items: center;
}
@media only screen and (min-width: 688px) {
  .vault-downloads .wrap--grid {
    row-gap: 48px;
  }
}
.vault-downloads__download {
  grid-column: span 6;
  text-wrap: balance;
  padding: 40px;
}
@media only screen and (min-width: 992px) {
  .vault-downloads__download {
    grid-column: span 3;
  }
}
@media only screen and (min-width: 1312px) {
  .vault-downloads__download {
    padding: 64px;
  }
}
.vault-downloads__download__image {
  margin-top: 32px;
}
.vault-downloads__move {
  grid-column: span 6;
  text-wrap: balance;
  background: var(--silver);
  padding: 40px;
}
@media only screen and (min-width: 992px) {
  .vault-downloads__move {
    grid-column: span 3;
  }
}
@media only screen and (min-width: 1312px) {
  .vault-downloads__move {
    padding: 64px;
  }
}
.vault-downloads__move svg {
  height: 32px;
  position: absolute;
}
@media only screen and (min-width: 688px) {
  .vault-downloads__move svg {
    height: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .vault-downloads__move svg {
    height: 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .vault-downloads__move svg {
    height: 40px;
  }
}
.vault-downloads__move__reels {
  top: 20px;
  right: calc(60% + 20px);
  transform: rotate(-1deg);
}
@media only screen and (min-width: 688px) {
  .vault-downloads__move__reels {
    right: calc(65% + 20px);
  }
}
@media only screen and (min-width: 1312px) {
  .vault-downloads__move__reels {
    right: calc(70% + 20px);
  }
}
.vault-downloads__move__treatments {
  bottom: 20px;
  left: calc(60% + 20px);
  transform: rotate(1deg);
}
@media only screen and (min-width: 688px) {
  .vault-downloads__move__treatments {
    left: calc(65% + 20px);
  }
}
@media only screen and (min-width: 1312px) {
  .vault-downloads__move__treatments {
    left: calc(70% + 20px);
  }
}
.vault-downloads__move__images {
  position: relative;
  aspect-ratio: 3/2;
  margin-bottom: 32px;
  margin: 0 -20px 32px;
}
@media only screen and (min-width: 688px) {
  .vault-downloads__move__images {
    margin: 0 0 32px;
  }
}
.vault-downloads__move__images img {
  position: absolute;
  width: 60%;
  border: 4px solid white;
  box-shadow: 0px 6px 48px rgba(33, 32, 39, 0.1);
}
@media only screen and (min-width: 688px) {
  .vault-downloads__move__images img {
    width: 65%;
  }
}
@media only screen and (min-width: 1312px) {
  .vault-downloads__move__images img {
    width: 70%;
  }
}
.vault-downloads__move__images img:first-of-type {
  top: 0;
  right: 0;
  transform: rotate(-1deg);
}
.vault-downloads__move__images img:last-of-type {
  bottom: 0;
  left: 0;
  transform: rotate(1deg);
}
.vault-downloads p {
  margin-top: 14px;
}
@media only screen and (min-width: 688px) {
  .vault-downloads p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .vault-downloads p {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 1312px) {
  .vault-downloads p {
    font-size: 20px;
  }
}
.vault-downloads p a {
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}
.vault-downloads p a:hover {
  text-decoration-color: var(--black);
}

.testimonial--vault {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .testimonial--vault {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial--vault {
    margin-top: 112px;
  }
}
@media only screen and (min-width: 1312px) {
  .testimonial--vault {
    margin-top: 128px;
  }
}

.feature-grid--vault {
  margin-bottom: 40px;
}
@media only screen and (min-width: 688px) {
  .feature-grid--vault {
    margin-bottom: 48px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-grid--vault {
    margin-bottom: 56px;
  }
}
@media only screen and (min-width: 1312px) {
  .feature-grid--vault {
    margin-bottom: 64px;
  }
}

@media only screen and (max-width: 991px) {
  .hero--treatments {
    flex-direction: column;
    height: auto;
    padding: var(--header-height) 0 64px;
  }
}
@media only screen and (min-width: 992px) {
  .hero--treatments .hero__content {
    max-width: 400px;
  }
}
@media only screen and (min-width: 1312px) {
  .hero--treatments .hero__content {
    max-width: 450px;
  }
}
@media only screen and (min-width: 992px) {
  .hero--treatments .hero__content p {
    text-wrap: auto;
  }
}
.hero--treatments .treatments-slideshow {
  position: relative;
  aspect-ratio: 1440/940;
  width: calc(100vw - 32px);
  max-width: 452px;
  margin: 32px auto;
  background: var(--silver);
  outline: 4px solid white;
  box-shadow: 0px 6px 48px 8px rgba(255, 255, 255, 0.25);
}
@media only screen and (min-width: 688px) {
  .hero--treatments .treatments-slideshow {
    width: calc(100vw - 64px);
    max-width: 688px;
    outline-width: 8px;
    margin: 40px auto;
  }
}
@media only screen and (min-width: 992px) {
  .hero--treatments .treatments-slideshow {
    position: absolute;
    left: 45vw;
    width: 720px;
    max-width: none;
    transform: rotate(1deg);
  }
}
@media only screen and (min-width: 1312px) {
  .hero--treatments .treatments-slideshow {
    left: 42vw;
  }
}
.hero--treatments .treatments-slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(0.1px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.hero--treatments .treatments-slideshow img.active {
  opacity: 1;
}

.body--treatments .image-text .image-text__image {
  transform: rotate(-1deg);
}
.body--treatments .image-text--alt .image-text__image {
  transform: rotate(1deg);
}
.body--treatments .image-text h2, .body--treatments .image-text .h2 {
  font-size: 24px;
}
@media only screen and (min-width: 688px) {
  .body--treatments .image-text h2, .body--treatments .image-text .h2 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .body--treatments .image-text h2, .body--treatments .image-text .h2 {
    font-size: 40px;
  }
}

.treatments-video {
  margin-top: 72px;
  background: var(--black);
  padding: 72px 0;
}
@media only screen and (min-width: 688px) {
  .treatments-video {
    margin-top: 96px;
    padding: 96px 0;
  }
}
.treatments-video__heading {
  color: white;
}
.treatments-video__heading h2 {
  display: grid;
  row-gap: 24px;
  font-size: 24px;
}
@media only screen and (min-width: 688px) {
  .treatments-video__heading h2 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 992px) {
  .treatments-video__heading h2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 1312px) {
  .treatments-video__heading h2 {
    font-size: 40px;
  }
}
.treatments-video__heading h2 span {
  text-wrap: balance;
}
.treatments-video__heading h2 span:last-child {
  text-align: right;
}
.treatments-video .wrap--grid {
  margin-top: 40px;
  row-gap: 16px;
  column-gap: 16px;
}
@media only screen and (min-width: 1312px) {
  .treatments-video .wrap--grid {
    margin-top: 56px;
  }
}
.treatments-video__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: var(--silver);
  grid-column: span 6;
  text-align: center;
  text-wrap: balance;
  transition: background-color 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
@media only screen and (min-width: 688px) {
  .treatments-video__item {
    padding: 40px;
  }
}
@media only screen and (min-width: 992px) {
  .treatments-video__item {
    grid-column: span 2;
    padding: 40px;
  }
}
@media only screen and (min-width: 1312px) {
  .treatments-video__item {
    gap: 32px;
    padding: 48px;
  }
}
.treatments-video__item span {
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}
@media only screen and (min-width: 1312px) {
  .treatments-video__item span {
    font-size: 20px;
  }
}
.treatments-video__item:not(.treatments-video__item--small):hover {
  background: white;
}
.treatments-video__item:not(.treatments-video__item--small):hover .treatments-video__item__image {
  transform: scale(1.1);
  transition: transform 0.4s cubic-bezier(0.14, 1.14, 0.39, 1.16);
}
.treatments-video__item--small {
  background: rgba(237, 243, 244, 0.1);
  color: var(--silver);
}
.treatments-video__item--small .logo__overlay {
  fill: var(--grey);
}
.treatments-video__item__image {
  margin: auto;
  padding: 32px 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.treatments-video__item__image video {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0px 4px 40px 0 rgba(40, 46, 47, 0.12);
}
.treatments-video__item__icon svg {
  height: 64px;
  max-width: 100%;
}
.treatments-video__item__hover {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 80%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-1deg) scale(1.2);
  transition: all 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.treatments-video__item__hover img {
  height: 100%;
  object-fit: contain;
}
.treatments-video__item:has(.treatments-video__item__hover) {
  cursor: pointer;
}
.treatments-video__item:has(.treatments-video__item__hover) .treatments-video__item__icon,
.treatments-video__item:has(.treatments-video__item__hover) span {
  transition: opacity 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.treatments-video__item:has(.treatments-video__item__hover):hover .treatments-video__item__icon,
.treatments-video__item:has(.treatments-video__item__hover):hover span {
  opacity: 0.4;
  transition: opacity 0.2s cubic-bezier(0.2, 0.3, 0, 1) 2s;
}
.treatments-video__item:has(.treatments-video__item__hover):hover .treatments-video__item__hover {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-2deg) scale(1);
  transition: opacity 0.2s cubic-bezier(0.2, 0.3, 0, 1) 2s, transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16) 2s;
}

.treatments-preview {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .treatments-preview {
    margin-top: 96px;
  }
}
.treatments-preview-arrow {
  position: absolute;
  top: calc(100% - 80px);
  right: 0;
  color: var(--orange);
}
@media only screen and (min-width: 1312px) {
  .treatments-preview-arrow {
    top: calc(100% - 120px);
  }
}
@media only screen and (max-width: 991px) {
  .treatments-preview-arrow {
    display: none;
  }
}
.treatments-preview-arrow svg {
  height: 200px;
  transform: scalex(-1);
}
@media only screen and (min-width: 1312px) {
  .treatments-preview-arrow svg {
    height: 280px;
  }
}
.treatments-preview-arrow .scribble-arrow-swooshy {
  height: 200px;
  transform: scalex(-1);
}
@media only screen and (min-width: 1312px) {
  .treatments-preview-arrow .scribble-arrow-swooshy {
    height: 280px;
  }
}
.treatments-preview-arrow .scribble-arrow-swooshy__line {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
}
.treatments-preview-arrow .scribble-arrow-swooshy__head-left {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
}
.treatments-preview-arrow .scribble-arrow-swooshy__head-right {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
}
.treatments-preview-arrow.js-scribble-animate .scribble-arrow-swooshy__line {
  animation: draw_line 0.3s cubic-bezier(0.06, 0.66, 0.99, 0.52) forwards;
}
.treatments-preview-arrow.js-scribble-animate .scribble-arrow-swooshy__head-left {
  animation: draw_line 0.3s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.3s;
}
.treatments-preview-arrow.js-scribble-animate .scribble-arrow-swooshy__head-right {
  animation: draw_line 0.3s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.4s;
}
.treatments-preview h2 {
  text-align: center;
  text-wrap: balance;
}
.treatments-preview__iframe {
  margin-top: 32px;
  width: 100%;
  aspect-ratio: 1440/940;
  background: var(--grey);
  box-shadow: 0px 8px 64px 0 rgba(40, 46, 47, 0.12);
}
.treatments-preview__iframe iframe {
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 688px) {
  .treatments-preview__iframe {
    margin-top: 56px;
  }
}
.treatments-preview__thumbs {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
@media only screen and (min-width: 688px) {
  .treatments-preview__thumbs {
    margin-top: 32px;
    gap: 16px;
  }
}
.treatments-preview__thumb {
  aspect-ratio: 1440/940;
  height: 64px;
  background: var(--grey);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.treatments-preview__thumb:hover {
  opacity: 0.6;
}
.treatments-preview__thumb--active {
  opacity: 1;
  pointer-events: none;
}
@media only screen and (min-width: 688px) {
  .treatments-preview__thumb {
    height: 112px;
  }
}

.testimonial--treatments {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .testimonial--treatments {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial--treatments {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 1312px) {
  .testimonial--treatments {
    margin-top: 96px;
  }
}

.hero--reels {
  background-image: radial-gradient(at 40% 20%, rgba(31, 30, 36, 0.25) 0px, transparent 50%), radial-gradient(at 78% 49%, rgba(168, 255, 217, 0.4) 0px, transparent 50%), radial-gradient(at 5% 62%, rgba(255, 193, 148, 0.25) 0px, transparent 50%), radial-gradient(at 80% 50%, rgba(31, 30, 36, 0.25) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(31, 30, 36, 0.25) 0px, transparent 50%), radial-gradient(at 78% 85%, rgba(31, 30, 36, 0.25) 0px, transparent 50%), radial-gradient(at 0% 0%, rgba(198, 184, 255, 0.25) 0px, transparent 50%);
  padding-top: calc(var(--header-height) + 32px);
}
@media only screen and (max-width: 991px) {
  .hero--reels {
    align-items: flex-start;
    flex-direction: column;
    height: auto;
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 992px) {
  .hero--reels {
    max-height: 800px;
    padding-top: calc(var(--header-height) + 64px);
  }
}
.hero--reels .wrap {
  z-index: 1;
}
@media only screen and (min-width: 992px) {
  .hero--reels .hero__content {
    max-width: 500px;
  }
}
@media only screen and (min-width: 1312px) {
  .hero--reels .hero__content {
    max-width: 540px;
  }
}

@media only screen and (max-width: 991px) {
  .hero__reels-carousel {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 40px auto 0;
    order: 2;
    height: 600px;
  }
}
@media only screen and (max-width: 687px) {
  .hero__reels-carousel {
    height: 380px;
    max-width: 340px;
  }
}
@media only screen and (min-width: 992px) {
  .hero__reels-carousel {
    position: absolute;
    bottom: 0;
    left: 48%;
    right: 0;
    top: 0;
  }
}
.hero__reels-carousel__item {
  position: absolute;
  width: 100%;
  height: 100%;
}
.hero__reels-carousel__item img {
  width: 400px;
  position: absolute;
  filter: blur(0.1px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.1s linear 0.4s;
}
@media only screen and (max-width: 687px) {
  .hero__reels-carousel__item img {
    width: 200px;
  }
}
.hero__reels-carousel__item img:last-child {
  outline: 8px solid white;
  box-shadow: 0px 6px 48px rgba(255, 255, 255, 0.25);
}
.hero__reels-carousel__item.active img:first-child {
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.6s cubic-bezier(0.14, 1.14, 0.39, 1.16);
  opacity: 0.8;
}
.hero__reels-carousel__item.active img:last-child {
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.1s, transform 1s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.1s;
  opacity: 1;
}
.hero__reels-carousel__item--1 img:first-child {
  bottom: -60px;
  transform: rotate(-2deg) translateY(32px);
}
@media only screen and (max-width: 687px) {
  .hero__reels-carousel__item--1 img:first-child {
    bottom: -10px;
  }
}
.hero__reels-carousel__item--1 img:last-child {
  left: 30%;
  bottom: 10%;
  transform: rotate(1deg) translateY(32px);
}
@media only screen and (max-width: 687px) {
  .hero__reels-carousel__item--1 img:last-child {
    bottom: 30%;
  }
}
.hero__reels-carousel__item--1.active img:first-child {
  transform: rotate(-2deg) translateY(0);
}
.hero__reels-carousel__item--1.active img:last-child {
  transform: rotate(1deg) translateY(0);
}
.hero__reels-carousel__item--2 img:first-child {
  bottom: -60px;
  left: 30%;
  transform: rotate(2deg) translateY(32px);
}
@media only screen and (max-width: 687px) {
  .hero__reels-carousel__item--2 img:first-child {
    bottom: -20px;
    left: 38%;
  }
}
.hero__reels-carousel__item--2 img:last-child {
  width: 300px;
  left: 2%;
  bottom: 8%;
  transform: rotate(-1deg) translateY(32px);
}
@media only screen and (max-width: 687px) {
  .hero__reels-carousel__item--2 img:last-child {
    width: 200px;
  }
}
.hero__reels-carousel__item--2.active img:first-child {
  transform: rotate(2deg) translateY(0);
}
.hero__reels-carousel__item--2.active img:last-child {
  transform: rotate(-1deg) translateY(0);
}
.hero__reels-carousel__item--3 img:first-child {
  bottom: -60px;
  transform: rotate(-2deg) translateY(32px);
}
.hero__reels-carousel__item--3 img:last-child {
  width: 300px;
  left: 45%;
  bottom: 7%;
  transform: rotate(1deg) translateY(32px);
}
@media only screen and (max-width: 687px) {
  .hero__reels-carousel__item--3 img:last-child {
    width: 200px;
    left: 35%;
  }
}
.hero__reels-carousel__item--3.active img:first-child {
  transform: rotate(-2deg) translateY(0);
}
.hero__reels-carousel__item--3.active img:last-child {
  transform: rotate(1deg) translateY(0);
}

@media only screen and (max-width: 991px) {
  .body--reels .client-logos .wrap {
    margin-top: 8px;
    margin-bottom: -32px;
  }
  .body--reels .client-logos .wrap svg {
    display: none;
  }
}

.reel-building {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .reel-building {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 992px) {
  .reel-building {
    padding-bottom: 16px;
  }
}
@media only screen and (min-width: 1312px) {
  .reel-building {
    padding-bottom: 32px;
  }
}
.reel-building .wrap--grid {
  align-items: center;
}
.reel-building__list {
  margin-top: 32px;
  grid-column: span 6;
  text-wrap: balance;
}
@media only screen and (min-width: 992px) {
  .reel-building__list {
    grid-column: 1/3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 1;
    margin-top: 0;
    padding-right: 32px;
  }
}
.reel-building__list__item {
  position: relative;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(40, 46, 47, 0.4);
  border-top: 4px solid var(--silver);
  padding: 16px 0;
  text-align: center;
  transition: color 0.4s cubic-bezier(0.2, 0.3, 0, 1);
  cursor: pointer;
}
@media only screen and (min-width: 688px) {
  .reel-building__list__item {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) {
  .reel-building__list__item {
    text-align: left;
  }
}
@media only screen and (min-width: 1312px) {
  .reel-building__list__item {
    font-size: 28px;
  }
}
.reel-building__list__item:hover {
  color: rgba(40, 46, 47, 0.6);
}
.reel-building__list__item__progress {
  position: absolute;
  bottom: 100%;
  left: 0;
  height: 4px;
  background: var(--grey);
  opacity: 0;
  transition: all 0.25s linear;
}
.reel-building__list__item--active {
  color: var(--black) !important;
}
.reel-building__list__item--active .reel-building__list__item__progress {
  opacity: 1;
}
.reel-building__video-wrap {
  display: flex;
  grid-column: span 6;
}
@media only screen and (min-width: 992px) {
  .reel-building__video-wrap {
    grid-column: 3/7;
    order: 2;
  }
}
.reel-building__video {
  width: 100%;
  outline: 8px solid white;
  box-shadow: 0px 8px 64px 8px rgba(40, 46, 47, 0.12);
  aspect-ratio: 1440/940;
}
.reel-building__video img,
.reel-building__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: blur(0.1px);
}
@media only screen and (min-width: 992px) {
  .reel-building__video {
    transform: rotate(1deg);
  }
}

.reel-demos {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .reel-demos {
    margin-top: 96px;
  }
}
.reel-demos .wrap {
  row-gap: 24px;
}
.reel-demos__reel {
  grid-column: span 3;
  transition: transform 0.4s cubic-bezier(0.2, 0.3, 0, 1), box-shadow 0.4s cubic-bezier(0.2, 0.3, 0, 1);
}
.reel-demos__reel:hover {
  transform: scale(1.1) rotate(-1deg);
  z-index: 1;
  box-shadow: 0px 8px 64px rgba(40, 46, 47, 0.12);
}
.reel-demos__scribble {
  position: relative;
  display: inline-flex;
  color: var(--orange);
  margin-bottom: 32px;
  margin-left: 32px;
}
@media only screen and (min-width: 1312px) {
  .reel-demos__scribble {
    margin-left: 90px;
  }
}
@media only screen and (min-width: 1312px) {
  .reel-demos__scribble {
    margin-left: 160px;
  }
}
.reel-demos__scribble .scribble-arrow-angle-clockwise {
  position: absolute;
  top: -10px;
  left: 118px;
  height: 72px;
  transform: rotate(-106deg);
}
@media only screen and (min-width: 992px) {
  .reel-demos__scribble .scribble-arrow-angle-clockwise {
    height: 82px;
  }
}
@media only screen and (min-width: 1312px) {
  .reel-demos__scribble .scribble-arrow-angle-clockwise {
    left: 130px;
  }
}
.reel-demos__scribble .scribble-arrow-angle-clockwise__line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}
.reel-demos__scribble .scribble-arrow-angle-clockwise__head-left {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}
.reel-demos__scribble .scribble-arrow-angle-clockwise__head-right {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}
.reel-demos__scribble span {
  display: block;
  font-family: var(--font-note);
  font-size: 22px;
  line-height: 0.9;
  white-space: pre-line;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: translate(0, 8px) rotate(0deg);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media only screen and (min-width: 1312px) {
  .reel-demos__scribble span {
    font-size: 24px;
  }
}
.reel-demos__scribble.js-scribble-animate span {
  opacity: 1;
  transform: translate(0, 0) rotate(-4deg);
}
.reel-demos__scribble.js-scribble-animate .scribble-arrow-angle-clockwise__line {
  animation: draw_line 0.3s cubic-bezier(0.06, 0.66, 0.99, 0.52) forwards;
}
.reel-demos__scribble.js-scribble-animate .scribble-arrow-angle-clockwise__head-left {
  animation: draw_line 0.3s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.3s;
}
.reel-demos__scribble.js-scribble-animate .scribble-arrow-angle-clockwise__head-right {
  animation: draw_line 0.3s cubic-bezier(0.2, 0.3, 0, 1) forwards 0.4s;
}

.body--reels .image-text__image__frame video {
  width: 100.5%;
  object-position: center;
}
.body--reels .image-text .image-text__image {
  transform: rotate(-1deg);
}
.body--reels .image-text--alt .image-text__image {
  transform: rotate(1deg);
}

.testimonial--reels {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .testimonial--reels {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 992px) {
  .testimonial--reels {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 1312px) {
  .testimonial--reels {
    margin-top: 96px;
  }
}

.feature-grid--reels {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .feature-grid--reels {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 992px) {
  .feature-grid--reels {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 1312px) {
  .feature-grid--reels {
    margin-top: 96px;
  }
}

.reels-carousel {
  position: relative;
  overflow: hidden;
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .reels-carousel {
    margin-top: 96px;
  }
}
@media only screen and (min-width: 1312px) {
  .reels-carousel {
    margin-top: 112px;
  }
}
.reels-carousel--active .reels-carousel__inner {
  opacity: 1;
  transition: opacity 1s cubic-bezier(0.2, 0.3, 0, 1);
}
.reels-carousel__inner {
  transition: opacity 0.4s cubic-bezier(0.2, 0.3, 0, 1), transform 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s;
  transform: rotate(-1deg);
  margin: 40px 0;
}
@media only screen and (min-width: 688px) {
  .reels-carousel__inner {
    margin: 64px 0;
  }
}
.reels-carousel__inner .flickity-viewport {
  overflow: visible;
}
.reels-carousel:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 160px;
  background: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0) 100%);
}
@media only screen and (max-width: 991px) {
  .reels-carousel:before {
    display: none;
  }
}
@media only screen and (min-width: 1312px) {
  .reels-carousel:before {
    width: 240px;
  }
}
.reels-carousel:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -4px;
  bottom: -4px;
  right: 0;
  width: 160px;
  background: linear-gradient(-90deg, white 0%, rgba(255, 255, 255, 0) 100%);
}
@media only screen and (max-width: 991px) {
  .reels-carousel:after {
    display: none;
  }
}
@media only screen and (min-width: 1312px) {
  .reels-carousel:after {
    width: 240px;
  }
}
.reels-carousel__item {
  aspect-ratio: 1440/940;
  width: 260px;
  margin-right: 8px;
}
@media only screen and (min-width: 688px) {
  .reels-carousel__item {
    width: 360px;
  }
}
@media only screen and (min-width: 992px) {
  .reels-carousel__item {
    width: 400px;
    margin-right: 16px;
  }
}
@media only screen and (min-width: 1312px) {
  .reels-carousel__item {
    width: 480px;
  }
}
.reels-carousel__item img,
.reels-carousel__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: box-shadow 0.2s cubic-bezier(0.2, 0.3, 0, 1), transform 0.2s cubic-bezier(0.2, 0.3, 0, 1), border-color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
  border: 8px solid transparent;
  -webkit-backface-visibility: hidden;
}
.reels-carousel__item.is-selected {
  z-index: 1;
}
.reels-carousel__item.is-selected img,
.reels-carousel__item.is-selected video {
  box-shadow: 0px 6px 32px rgba(33, 32, 39, 0.1);
  border-color: white;
  transform: scale(1.2);
  transition: box-shadow 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s, border-color 0.4s cubic-bezier(0.2, 0.3, 0, 1) 0.4s, transform 0.8s cubic-bezier(0.14, 1.14, 0.39, 1.16) 0.4s;
}
@media only screen and (min-width: 992px) {
  .reels-carousel .image-text__text {
    grid-column: 2/6;
    text-align: center;
  }
}

.features-bento {
  margin-top: 72px;
  padding: 32px 0;
  overflow: hidden;
}
@media only screen and (min-width: 688px) {
  .features-bento {
    margin-top: 96px;
  }
}
.features-bento__title {
  text-wrap: balance;
}
@media only screen and (min-width: 992px) {
  .features-bento__title {
    max-width: 600px;
    text-align: center;
  }
}
.features-bento__grid {
  margin-top: 32px;
  display: grid;
  column-gap: 8px;
  row-gap: 8px;
  grid-auto-rows: min(37vw, 160px);
}
@media only screen and (min-width: 688px) {
  .features-bento__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 136px;
  }
}
@media only screen and (min-width: 1312px) {
  .features-bento__grid {
    grid-auto-rows: 160px;
  }
}
.features-bento__col {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media only screen and (min-width: 992px) {
  .features-bento__col {
    grid-column: span 4;
  }
}
.features-bento__item {
  position: relative;
  background: var(--silver);
  padding: 32px;
  flex-grow: 1;
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (min-width: 992px) {
  .features-bento__item {
    grid-column: span 4;
    transition: transform 0.4s cubic-bezier(0.2, 0.3, 0, 1);
    will-change: transform;
  }
  .features-bento__item:hover {
    z-index: 1;
    transform: scale(1.1) rotate(1deg);
  }
  .features-bento__item:hover:nth-child(2n) {
    transform: scale(1.1) rotate(-1deg);
  }
}
@media only screen and (min-width: 1312px) {
  .features-bento__item {
    padding: 48px;
  }
}
.features-bento__item__text {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-align: center;
}
.features-bento__item--layouts {
  grid-row: span 2;
  background: var(--grey);
  color: white;
  justify-content: flex-end;
}
.features-bento__item--layouts .features-bento__item__image {
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
}
@media only screen and (min-width: 1312px) {
  .features-bento__item--layouts .features-bento__item__image {
    top: -40px;
  }
}
.features-bento__item--layouts .features-bento__item__image img {
  width: 100%;
}
.features-bento__item--offices {
  grid-row: span 1;
  justify-content: center;
  background: var(--cyan);
}
.features-bento__item--profiles {
  grid-row: span 3;
}
.features-bento__item--profiles .features-bento__item__image {
  width: 115%;
  outline: 8px solid white;
  box-shadow: 0px 8px 64px 8px rgba(40, 46, 47, 0.12);
  transform: rotate(1deg);
}
@media only screen and (min-width: 688px) {
  .features-bento__item--profiles .features-bento__item__image {
    width: 125%;
  }
}
@media only screen and (min-width: 1312px) {
  .features-bento__item--profiles .features-bento__item__image {
    width: 115%;
    margin-left: 10px;
  }
}
.features-bento__item--customize {
  grid-row: span 3;
  background: var(--black);
  color: white;
  justify-content: space-around;
}
.features-bento__item--brands {
  grid-row: span 2;
  background: var(--green);
}
.features-bento__item--brands .features-bento__item__image {
  transform: rotate(-1deg);
  box-shadow: 0px 8px 64px 8px rgba(40, 46, 47, 0.12);
}
.features-bento__item--credits {
  grid-row: span 1;
  justify-content: center;
  background: var(--purple);
}

.projects-import {
  margin-top: 72px;
}
@media only screen and (min-width: 688px) {
  .projects-import {
    margin-top: 96px;
  }
}
.projects-import .wrap {
  row-gap: 96px;
}
@media only screen and (min-width: 992px) {
  .projects-import .wrap {
    grid-column: span 3;
    column-gap: 96px;
    align-items: center;
  }
}
@media only screen and (min-width: 1312px) {
  .projects-import .wrap {
    column-gap: 128px;
  }
}
.projects-import__projects {
  grid-column: span 6;
}
@media only screen and (min-width: 992px) {
  .projects-import__projects {
    grid-column: span 3;
  }
}
.projects-import__projects__images {
  aspect-ratio: 4/3;
  position: relative;
  display: flex;
  align-items: center;
}
.projects-import__projects__images img {
  filter: blur(0.1px);
}
.projects-import__projects__images img:first-child {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  transform: rotate(1deg);
}
.projects-import__projects__images img:last-child {
  position: relative;
  width: 70%;
  outline: 8px solid white;
  box-shadow: 0px 8px 64px 8px rgba(40, 46, 47, 0.12);
  transform: rotate(-2deg);
}
.projects-import__projects h3 {
  margin-top: 32px;
}
.projects-import__projects p {
  margin-top: 8px;
}
@media only screen and (min-width: 688px) {
  .projects-import__projects p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .projects-import__projects p {
    margin-top: 14px;
  }
}
@media only screen and (min-width: 1312px) {
  .projects-import__projects p {
    font-size: 20px;
  }
}
.projects-import__projects p a {
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}
.projects-import__projects p a:hover {
  text-decoration-color: var(--black);
}
.projects-import__import {
  grid-column: span 6;
}
@media only screen and (min-width: 992px) {
  .projects-import__import {
    grid-column: span 3;
  }
}
.projects-import__import__wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  text-align: center;
  background: var(--black);
  color: var(--silver);
  padding: 48px 32px;
}
@media only screen and (min-width: 688px) {
  .projects-import__import__wrap {
    padding: 64px 40px;
    gap: 48px;
  }
}
.projects-import__import__title {
  line-height: 1.2;
  text-wrap: balance;
}
.projects-import__import__text {
  margin-top: 20px;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.projects-import__import__text strong {
  font-weight: 700;
}
.projects-import__import__item__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.projects-import__import__item__logos svg {
  height: 20px;
}
@media only screen and (min-width: 688px) {
  .projects-import__import__item__logos svg {
    height: 24px;
  }
}
.projects-import__import__item__logos svg:not(.logo) {
  fill: var(--grey);
}
.projects-import__import__item__logos svg.logo {
  height: 40px;
}
@media only screen and (min-width: 688px) {
  .projects-import__import__item__logos svg.logo {
    height: 48px;
  }
}

.customer-support {
  margin-top: 72px;
  background: var(--black);
  color: white;
  padding: 96px 0;
  overflow: hidden;
}
@media only screen and (min-width: 688px) {
  .customer-support {
    margin-top: 96px;
  }
}
.customer-support .wrap {
  row-gap: 40px;
  align-items: center;
}
@media only screen and (min-width: 992px) {
  .customer-support .wrap {
    column-gap: 96px;
  }
}
@media only screen and (min-width: 1312px) {
  .customer-support .wrap {
    column-gap: 128px;
  }
}
.customer-support__quote {
  grid-column: span 6;
}
@media only screen and (min-width: 992px) {
  .customer-support__quote {
    grid-column: span 3;
  }
}
.customer-support__quote .testimonial__author {
  margin-top: 0;
  transform: rotate(-1deg);
}
.customer-support__quote .testimonial__author__image {
  border-color: var(--purple);
}
.customer-support__quote .testimonial__author__name {
  background: var(--purple);
  color: var(--black);
}
.customer-support__quote .h2 {
  margin-top: 32px;
}
.customer-support__info {
  grid-column: span 6;
  text-wrap: balance;
}
@media only screen and (min-width: 992px) {
  .customer-support__info {
    grid-column: span 3;
  }
}
.customer-support__info p {
  margin-top: 14px;
}
@media only screen and (min-width: 688px) {
  .customer-support__info p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .customer-support__info p {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 1312px) {
  .customer-support__info p {
    font-size: 20px;
  }
}
.customer-support__info p a {
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}
.customer-support__info p a:hover {
  text-decoration-color: var(--black);
}
.customer-support__info p.customer-support__info__note {
  font-size: 16px;
  font-style: italic;
  color: var(--silver);
}
.customer-support__info__avatars {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.customer-support__info__avatar {
  width: 104px;
  height: 104px;
  border: 4px solid var(--silver);
  background: var(--grey);
  flex-shrink: 0;
}
.customer-support__info__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.membership-hero {
  padding-top: calc(var(--header-height) + 72px);
  background: linear-gradient(180deg, var(--silver), transparent);
}
@media only screen and (min-width: 992px) {
  .membership-hero {
    text-align: center;
  }
}
.membership-hero h1 {
  text-wrap: balance;
}

.membership {
  padding: 72px 0;
}
@media only screen and (min-width: 688px) {
  .membership {
    padding: 96px 0 72px;
  }
}
@media only screen and (min-width: 992px) {
  .membership {
    padding: 96px 0 64px;
  }
}
.membership .wrap--grid {
  column-gap: 48px;
  row-gap: 64px;
  align-items: flex-start;
}
@media only screen and (min-width: 1312px) {
  .membership .wrap--grid {
    column-gap: 64px;
  }
}
.membership__info {
  grid-column: span 6;
}
@media only screen and (min-width: 992px) {
  .membership__info {
    grid-column: span 3;
    padding-top: 48px;
  }
}
.membership__list {
  list-style: none;
  margin-top: 24px;
}
.membership__list__bullet {
  width: 10px;
  height: 10px;
  background: var(--accent);
  flex-shrink: 0;
}
.membership__list li {
  display: flex;
  align-items: baseline;
  border-top: 2px solid var(--silver);
  padding: 16px 0;
  gap: 12px;
  font-size: 16px;
  text-wrap: balance;
}
@media only screen and (min-width: 688px) {
  .membership__list li {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1312px) {
  .membership__list li {
    font-size: 20px;
  }
}
.membership__quote {
  position: relative;
  margin-top: 64px;
}
.membership__quote .testimonial__text svg {
  display: inline-block;
  height: 32px;
  fill: var(--cyan);
}
.membership__quote .testimonial__text svg:first-child {
  vertical-align: text-top;
  margin-right: 8px;
}
.membership__quote .testimonial__text svg:last-child {
  vertical-align: text-bottom;
  margin-left: 8px;
}
.membership__form {
  grid-column: span 6;
}
@media only screen and (min-width: 688px) {
  .membership__form {
    background: var(--silver);
    padding: 32px;
  }
}
@media only screen and (min-width: 992px) {
  .membership__form {
    grid-column: span 3;
  }
}
@media only screen and (min-width: 1312px) {
  .membership__form {
    padding: 48px;
  }
}
.membership__form h3 {
  margin-bottom: 32px;
}
.membership__form .form {
  position: relative;
  z-index: unset;
  top: unset;
  right: unset;
  bottom: unset;
  left: unset;
  opacity: unset;
  visibility: unset;
  padding: 0;
}
.membership__form .form__content {
  opacity: unset;
  visibility: unset;
  padding: 0;
  background: unset;
  box-shadow: unset;
  transform: unset;
  max-width: unset;
}
.membership__form .form form {
  grid-template-columns: unset;
}
.membership__form .form__item input,
.membership__form .form__item textarea {
  border-color: var(--black);
  background: rgba(255, 255, 255, 0.8);
}
.membership__form .form__item input:focus,
.membership__form .form__item textarea:focus {
  border-color: var(--accent);
  background: white;
}

.body--membership .client-logos {
  padding-bottom: 72px;
}
@media only screen and (min-width: 688px) {
  .body--membership .client-logos {
    padding-bottom: 96px;
  }
}

.contact-hero {
  padding-top: calc(var(--header-height) + 72px);
  text-align: center;
  background: linear-gradient(180deg, var(--silver), transparent);
}
.contact-hero h1 {
  text-wrap: balance;
}
.contact-hero h1 a {
  color: var(--black);
}
.contact-hero h1 a .span-highlight:before {
  transition: opacity 0.2s cubic-bezier(0.2, 0.3, 0, 1), background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1), width 0.6s cubic-bezier(0.2, 0.3, 0, 1);
}
.contact-hero h1 a:hover .span-highlight:before {
  background: var(--cyan);
}
.contact-hero p {
  margin: 10px auto 0;
  text-wrap: balance;
}
@media only screen and (min-width: 688px) {
  .contact-hero p {
    max-width: 500px;
  }
}
@media only screen and (min-width: 992px) {
  .contact-hero p {
    font-size: 18px;
    max-width: 560px;
  }
}
@media only screen and (min-width: 1312px) {
  .contact-hero p {
    font-size: 20px;
    max-width: 660px;
  }
}
.contact-hero p strong {
  font-weight: 600;
}
.contact-hero .button {
  margin-top: 24px;
}

.contact-grid {
  margin-top: 56px;
}
@media only screen and (min-width: 688px) {
  .contact-grid {
    margin-top: 72px;
  }
}
@media only screen and (min-width: 992px) {
  .contact-grid {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 1312px) {
  .contact-grid {
    margin-top: 96px;
  }
}
.contact-grid .wrap {
  row-gap: 24px;
}
@media only screen and (min-width: 1312px) {
  .contact-grid .wrap {
    row-gap: 32px;
  }
}
.contact-grid__header {
  grid-column: span 6;
  text-align: center;
}
.contact-grid__item {
  padding: 32px;
  background: var(--silver);
  grid-column: span 6;
  text-align: center;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (min-width: 992px) {
  .contact-grid__item {
    grid-column: span 2;
  }
}
@media only screen and (min-width: 992px) {
  .contact-grid__item--wide {
    grid-column: span 4;
  }
  .contact-grid__item--wide .contact-grid__item__text {
    max-width: 600px;
    margin: 20px auto 0;
  }
}
.contact-grid__item svg {
  height: 40px;
}
.contact-grid__item__text {
  margin-top: 20px;
  line-height: 1.4;
}
.contact-grid__item__text a {
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.contact-grid__item__text a:hover {
  background: var(--accent);
}
.contact-grid__item__live {
  margin: 10px auto 0;
  max-width: 200px;
  color: var(--grey);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.contact-details {
  padding: 56px 0;
}
@media only screen and (min-width: 688px) {
  .contact-details {
    padding: 72px 0;
  }
}
@media only screen and (min-width: 992px) {
  .contact-details {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 1312px) {
  .contact-details {
    padding: 96px 0;
  }
}
.contact-details .wrap {
  row-gap: 40px;
}
.contact-details__social {
  grid-column: span 6;
}
@media only screen and (min-width: 992px) {
  .contact-details__social {
    grid-column: span 2;
  }
}
.contact-details__office {
  grid-column: span 6;
}
@media only screen and (min-width: 992px) {
  .contact-details__office {
    grid-column: span 2;
  }
}
.contact-details__socials {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.contact-details__socials a {
  display: flex;
  width: 64px;
  height: 64px;
  background: var(--silver);
  color: var(--grey);
  transition: color 0.2s cubic-bezier(0.2, 0.3, 0, 1), background-color 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.contact-details__socials a svg {
  margin: auto;
  height: 16px;
  fill: currentColor;
}
.contact-details__socials a:hover {
  background: var(--black);
  color: white;
}

.body--legal {
  overflow-x: hidden;
}

.legal {
  padding: calc(var(--header-height) + 72px) 0 128px;
}
.legal .wrap {
  max-width: 800px;
}
.legal h1 {
  text-align: center;
}
.legal__content {
  margin-top: 64px;
}
.legal__content h2, .legal__content h3 {
  font-size: 20px;
}
@media only screen and (min-width: 688px) {
  .legal__content h2, .legal__content h3 {
    font-size: 24px;
  }
}
@media only screen and (min-width: 992px) {
  .legal__content h2, .legal__content h3 {
    font-size: 28px;
  }
}
@media only screen and (min-width: 1312px) {
  .legal__content h2, .legal__content h3 {
    font-size: 32px;
  }
}
.legal__content h2:not(:first-child), .legal__content h3:not(:first-child) {
  margin-top: 64px;
}
.legal__content p {
  line-height: 1.75;
}
.legal__content p a {
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0, 1);
}
.legal__content p a:hover {
  background: var(--accent);
}

.email-sig {
  padding: 96px 0;
}
.email-sig__form {
  grid-column: span 3;
  border: 2px solid var(--black);
  padding: 40px;
}
.email-sig__form .form__item,
.email-sig__form .button {
  margin-top: 24px;
}
.email-sig__preview {
  grid-column: span 3;
  border: 2px solid var(--black);
  padding: 40px;
}

.body--welcome .mobile-header__toggle {
  display: none;
}
.body--welcome .footer {
  margin-top: 56px;
  min-height: unset;
}
.body--welcome .footer__wrap {
  width: 100%;
}
.body--welcome .footer__lower {
  margin-top: 0;
}
@media only screen and (min-width: 688px) {
  .body--welcome .footer {
    margin-top: 72px;
  }
}
@media only screen and (min-width: 992px) {
  .body--welcome .footer {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 1312px) {
  .body--welcome .footer {
    margin-top: 96px;
  }
}
.body--welcome .image-text .image-text__image {
  transform: rotate(-1deg);
}
.body--welcome .image-text--alt .image-text__image {
  transform: rotate(1deg);
}
@media only screen and (min-width: 992px) {
  .body--welcome .image-text--alt .image-text__text {
    padding-right: 32px;
  }
}
@media only screen and (min-width: 1312px) {
  .body--welcome .image-text--alt .image-text__text {
    padding-right: 64px;
  }
}
.body--welcome .customer-support {
  margin-top: 0;
}

.welcome-alt {
  background: var(--silver);
  margin-top: 72px;
  padding: 72px 0;
}
@media only screen and (min-width: 688px) {
  .welcome-alt {
    margin-top: 96px;
    padding: 96px 0;
  }
}
.welcome-alt .image-text {
  margin-top: 0;
}

.welcome-hero {
  padding-top: calc(var(--header-height) + 72px);
  text-align: center;
  background: linear-gradient(180deg, var(--silver), transparent);
}
.welcome-hero h1 {
  white-space: pre-line;
  font-size: 48px;
  line-height: 0.95;
  margin-bottom: 24px;
}
@media only screen and (min-width: 688px) {
  .welcome-hero h1 {
    font-size: 64px;
  }
}
@media only screen and (min-width: 992px) {
  .welcome-hero h1 {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1312px) {
  .welcome-hero h1 {
    font-size: 96px;
  }
}
.welcome-hero p {
  margin: 10px auto 0;
  text-wrap: balance;
}
@media only screen and (min-width: 688px) {
  .welcome-hero p {
    max-width: 500px;
  }
}
@media only screen and (min-width: 992px) {
  .welcome-hero p {
    font-size: 18px;
    max-width: 560px;
  }
}
@media only screen and (min-width: 1312px) {
  .welcome-hero p {
    font-size: 20px;
    max-width: 660px;
  }
}
.welcome-hero p strong {
  font-weight: 600;
}
.welcome-hero .button {
  margin-top: 24px;
}

.body--welcome .image-text--text-only {
  text-align: center;
}