/* Source of truth for tunable defaults. Run `npm run webflow:embed` after edits. */
.about-grid-hero {
  --about-grid-background: #7b34ce;
  --about-grid-bubble-background: #ffffff;
  --about-grid-bubble-text: #000000;
  --about-grid-card-back: #7b34ce;
  --about-grid-card-text: #ffffff;
  --about-grid-photo-tile-color: transparent;
  --about-grid-font-rooftop: var(--_typography---font--rooftop, 'About Grid Rooftop', Arial, sans-serif);
  --about-grid-font-cofo: var(--_typography---font--cofo, 'About Grid Mono', monospace);
  --about-grid-stage-height: 335svh;
  --about-grid-viewport-height: 100vh;
  --about-grid-cell-size: 320px;
  --about-grid-card-radius: 0;
  --about-grid-hover-response: .63s;
  --about-grid-photo-reveal-duration: .8s;
  --about-grid-photo-reveal-delay: .2s;
  --about-grid-photo-reveal-start-scale: 1.04;
  --about-grid-message-width: 38.7rem;
  --about-grid-message-padding-y: 3rem;
  --about-grid-message-padding-x: 3.1rem;
  --about-grid-message-radius: 3.8rem;
  --about-grid-message-font-size: 2.3rem;
  --about-grid-message-line-height: 1.38;
  --about-grid-message-gap: .8rem;
  --about-grid-message-entrance-duration: .75s;
  --about-grid-message-stagger: .63s;
  --about-grid-message-delay: .25s;
  --about-grid-message-offset-y: 14px;
  --about-grid-message-start-scale: .96;
  --about-grid-secondary-padding-y: 1.638rem;
  --about-grid-secondary-padding-x: 2.184rem;
  --about-grid-secondary-radius: 2.73rem;
  --about-grid-secondary-font-size: 1.638rem;
  --about-grid-secondary-line-height: 2.184rem;
  --about-grid-stats-padding: clamp(1.6rem, calc(var(--about-grid-cell-size) * .075), 5.6rem);
  --about-grid-stats-number-size: clamp(1.2rem, calc(var(--about-grid-cell-size) * .052), 4.4rem);
  --about-grid-stats-label-size: clamp(1.2rem, calc(var(--about-grid-cell-size) * .048), 4rem);
  --about-grid-stats-gap: clamp(.35rem, calc(var(--about-grid-cell-size) * .008), .9rem);
  --about-grid-stats-column-gap: clamp(.55rem, calc(var(--about-grid-cell-size) * .028), 2.8rem);
  --about-grid-stats-label-color: rgba(255, 255, 255, .48);
  --about-grid-drift-distance: 5rem;
  --about-grid-drift-duration: 16s;
  --about-grid-motion-duration: .35s;
}

@font-face {
  font-family: 'About Grid Rooftop';
  src: url(https://code-components.website-files.com/6a79833c488253901ca82a3f%2Fmodule%2Fe9dfb135ea5de4f863bd-Rooftop-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'About Grid Mono';
  src: url(https://code-components.website-files.com/6a79833c488253901ca82a3f%2Fmodule%2F9b463e1f9fc87b1b5f4f-CoFoSansMono-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.about-grid-hero,
.about-grid-hero *,
.about-grid-hero *::before,
.about-grid-hero *::after {
  box-sizing: border-box;
}

.about-grid-hero {
  position: relative;
  width: 100%;
  height: var(--about-grid-stage-height);
  margin: 0;
  background: var(--about-grid-background);
}

.about-grid-hero button {
  padding: 0;
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.about-grid-hero__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.about-grid-hero__sticky {
  position: sticky;
  top: 0;
  height: var(--about-grid-viewport-height);
  overflow: hidden;
  background: var(--about-grid-background);
}

.about-grid-hero__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: default;
  touch-action: pan-y;
  user-select: none;
}

@media (min-width: 1024px) {
  .about-grid-hero__canvas {
    cursor: grab;
    touch-action: none;
  }

  .about-grid-hero.is-holding .about-grid-hero__canvas { cursor: grabbing; }
}

.about-grid-hero__collection {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--about-grid-tile-width);
  height: var(--about-grid-tile-height);
  opacity: 0;
  transform-origin: 50vw 50svh;
  will-change: transform;
}

.about-grid-hero.is-grid-ready .about-grid-hero__collection { opacity: 1; }

.about-grid-hero__tile {
  --about-grid-tile-x: 0%;
  --about-grid-tile-y: 0%;
  position: absolute;
  width: var(--about-grid-tile-width);
  height: var(--about-grid-tile-height);
  display: grid;
  grid-template-columns: repeat(var(--about-grid-columns), var(--about-grid-cell-size));
  grid-auto-rows: var(--about-grid-cell-size);
  transform: translate(var(--about-grid-tile-x), var(--about-grid-tile-y));
}

.about-grid-hero__tile--right { --about-grid-tile-x: 100%; }
.about-grid-hero__tile--bottom { --about-grid-tile-y: 100%; }

.about-grid-hero__cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  contain: paint;
  overflow: hidden;
  overflow: clip;
  transform: scale(var(--about-grid-tile-press-scale, 1));
  transition: transform var(--about-grid-motion-duration) ease;
}

.about-grid-hero__card {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--about-grid-card-radius);
  transform: scale(var(--about-grid-hover-scale, 1)) scale(var(--about-grid-press-scale, 1));
  transition: transform var(--about-grid-hover-response) cubic-bezier(.16, 1, .3, 1);
}

.about-grid-hero__card--relaxed {
  transform: translate(var(--about-grid-card-shift-x), var(--about-grid-card-shift-y)) rotate(var(--about-grid-card-rotation)) scale(var(--about-grid-hover-scale, 1)) scale(var(--about-grid-press-scale, 1));
}

.about-grid-hero.is-holding .about-grid-hero__cell {
  --about-grid-tile-press-scale: var(--about-grid-hold-scale);
}

.about-grid-hero__card-body {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: inherit;
}

.about-grid-hero__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: inherit;
  background: var(--about-grid-photo-tile-color);
}

.about-grid-hero__media {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(var(--about-grid-photo-reveal-start-scale));
  transform-origin: center;
  will-change: opacity, transform;
}

.about-grid-hero.is-grid-ready .about-grid-hero__media {
  animation: about-grid-photo-enter var(--about-grid-photo-reveal-duration) cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: var(--about-grid-photo-reveal-delay);
}

.about-grid-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
}

.about-grid-hero__messages {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--about-grid-message-gap);
  width: min(var(--about-grid-message-width), calc(100vw - 4rem));
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.about-grid-hero__message {
  margin: 0;
  color: var(--about-grid-bubble-text);
  background: var(--about-grid-bubble-background);
  font-family: var(--about-grid-font-rooftop);
  font-weight: 400;
  animation: about-grid-message-enter var(--about-grid-message-entrance-duration) cubic-bezier(.2, .8, .2, 1) both;
}

.about-grid-hero__message--primary { animation-delay: var(--about-grid-message-delay); }
.about-grid-hero__message--secondary { animation-delay: calc(var(--about-grid-message-delay) + var(--about-grid-message-stagger)); }

.about-grid-hero__message--primary {
  width: 100%;
  padding: var(--about-grid-message-padding-y) var(--about-grid-message-padding-x);
  border-radius: var(--about-grid-message-radius);
  font-size: var(--about-grid-message-font-size);
  line-height: var(--about-grid-message-line-height);
}

.about-grid-hero__message--secondary {
  width: max-content;
  max-width: 100%;
  padding: var(--about-grid-secondary-padding-y) var(--about-grid-secondary-padding-x);
  border-radius: var(--about-grid-secondary-radius);
  border-bottom-right-radius: .8rem;
  font-size: var(--about-grid-secondary-font-size);
  line-height: var(--about-grid-secondary-line-height);
}

@media (max-width: 640px) {
  .about-grid-hero__messages { width: min(88vw, 52rem); }
  .about-grid-hero__message--primary {
    padding: 2.4rem 2.6rem;
    border-radius: 3.4rem;
    font-size: 2rem;
    line-height: 1.34;
  }

  .about-grid-hero__message--secondary { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-grid-hero__card,
  .about-grid-hero__image { transition: none; }

  .about-grid-hero__media {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .about-grid-hero__message { animation: none; }
}

@keyframes about-grid-photo-enter {
  from {
    opacity: 0;
    transform: scale(var(--about-grid-photo-reveal-start-scale));
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes about-grid-message-enter {
  from {
    opacity: 0;
    transform: translateY(var(--about-grid-message-offset-y)) scale(var(--about-grid-message-start-scale));
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}