@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");

#numbers.section-band {
  background-color: var(--band);
  background-image: radial-gradient(rgba(11, 11, 12, 0.13) 1px, transparent 1.6px);
  background-size: 6px 6px;
  clip-path: polygon(0.0% 9px, 2.2% 9px, 4.3% 9px, 6.5% 8px, 8.7% 5px, 10.9% 9px, 13.0% 5px, 15.2% 2px, 17.4% 9px, 19.6% 11px, 21.7% 5px, 23.9% 2px, 26.1% 0px, 28.3% 3px, 30.4% 9px, 32.6% 5px, 34.8% 0px, 37.0% 2px, 39.1% 0px, 41.3% 0px, 43.5% 8px, 45.7% 8px, 47.8% 0px, 50.0% 9px, 52.2% 14px, 54.3% 9px, 56.5% 8px, 58.7% 8px, 60.9% 11px, 63.0% 9px, 65.2% 0px, 67.4% 2px, 69.6% 9px, 71.7% 11px, 73.9% 3px, 76.1% 2px, 78.3% 11px, 80.4% 14px, 82.6% 8px, 84.8% 11px, 87.0% 0px, 89.1% 2px, 91.3% 2px, 93.5% 3px, 95.7% 2px, 97.8% 11px, 100.0% 3px, 100.0% calc(100% - 0px), 97.8% calc(100% - 2px), 95.7% calc(100% - 3px), 93.5% calc(100% - 5px), 91.3% calc(100% - 8px), 89.1% calc(100% - 0px), 87.0% calc(100% - 11px), 84.8% calc(100% - 11px), 82.6% calc(100% - 0px), 80.4% calc(100% - 8px), 78.3% calc(100% - 3px), 76.1% calc(100% - 3px), 73.9% calc(100% - 2px), 71.7% calc(100% - 3px), 69.6% calc(100% - 3px), 67.4% calc(100% - 5px), 65.2% calc(100% - 8px), 63.0% calc(100% - 9px), 60.9% calc(100% - 8px), 58.7% calc(100% - 5px), 56.5% calc(100% - 9px), 54.3% calc(100% - 9px), 52.2% calc(100% - 0px), 50.0% calc(100% - 0px), 47.8% calc(100% - 2px), 45.7% calc(100% - 8px), 43.5% calc(100% - 5px), 41.3% calc(100% - 2px), 39.1% calc(100% - 3px), 37.0% calc(100% - 0px), 34.8% calc(100% - 14px), 32.6% calc(100% - 11px), 30.4% calc(100% - 2px), 28.3% calc(100% - 14px), 26.1% calc(100% - 11px), 23.9% calc(100% - 8px), 21.7% calc(100% - 2px), 19.6% calc(100% - 3px), 17.4% calc(100% - 3px), 15.2% calc(100% - 3px), 13.0% calc(100% - 9px), 10.9% calc(100% - 0px), 8.7% calc(100% - 8px), 6.5% calc(100% - 8px), 4.3% calc(100% - 0px), 2.2% calc(100% - 0px), 0.0% calc(100% - 2px));
  padding-top: 126px;
  padding-bottom: 126px;
  margin-top: 70px;
}

#numbers .stats dt { filter: url(#rough); }
#numbers .stats > div { position: relative; }
#numbers .stats > div:nth-child(1) { transform: rotate(-1.4deg); }
#numbers .stats > div:nth-child(2) { transform: rotate(0.9deg); }
#numbers .stats > div:nth-child(3) { transform: rotate(-0.6deg); }
#numbers .stats > div:nth-child(4) { transform: rotate(1.2deg); }
#numbers .stats > div:first-child::after {
  content: "PROMISE";
  position: absolute;
  top: -16px;
  right: -8%;
  padding: 2px 12px 0;
  border: 3px solid var(--red);
  border-radius: 4px;
  color: var(--red);
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: 0.1em;
  line-height: 1.25;
  opacity: 0.82;
  transform: rotate(-10deg);
  filter: url(#rough);
  mix-blend-mode: multiply;
}

#studio .section-title .lead,
.section-cta h2 .lead {
  padding-bottom: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M2 9 C 60 3, 120 12, 180 6 S 280 8, 298 4' stroke='%23bf001d' stroke-width='3.4' fill='none' stroke-linecap='round'/></svg>") no-repeat 0 100% / 100% 12px;
}

#studio .accordion { border-top: 3px solid var(--ink); }
#studio .accordion details { border-bottom: 2px dashed rgba(11, 11, 12, 0.35); }
#studio .accordion summary { filter: url(#rough); }
#studio .accordion summary::after { border-radius: 2px; transform: rotate(-4deg); }
#studio .accordion details[open] summary::after { transform: rotate(3deg); }

.footer {
  padding-top: 84px;
  clip-path: polygon(0.0% 5px, 2.2% 8px, 4.3% 9px, 6.5% 11px, 8.7% 0px, 10.9% 14px, 13.0% 11px, 15.2% 3px, 17.4% 2px, 19.6% 2px, 21.7% 2px, 23.9% 8px, 26.1% 8px, 28.3% 0px, 30.4% 14px, 32.6% 14px, 34.8% 9px, 37.0% 5px, 39.1% 9px, 41.3% 5px, 43.5% 3px, 45.7% 5px, 47.8% 5px, 50.0% 11px, 52.2% 8px, 54.3% 8px, 56.5% 8px, 58.7% 5px, 60.9% 8px, 63.0% 3px, 65.2% 9px, 67.4% 2px, 69.6% 3px, 71.7% 0px, 73.9% 2px, 76.1% 2px, 78.3% 0px, 80.4% 11px, 82.6% 8px, 84.8% 3px, 87.0% 11px, 89.1% 3px, 91.3% 9px, 93.5% 11px, 95.7% 5px, 97.8% 2px, 100.0% 5px, 100% 100%, 0 100%);
}
.footer li a { border-bottom: 1px dashed transparent; }
.footer li a:hover { border-bottom-color: var(--red); }


#numbers.section-band { position: relative; }
#numbers.section-band::before {
  content: "";
  position: absolute;
  top: 120px;
  right: 7%;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 7px solid rgba(92, 56, 22, 0.22);
  box-shadow: inset 0 0 0 3px rgba(92, 56, 22, 0.1), 0 0 0 2px rgba(92, 56, 22, 0.08);
  filter: url(#rough) blur(0.4px);
  transform: rotate(14deg) scaleY(0.94);
  pointer-events: none;
}
#numbers.section-band::after {
  content: "NO ANIMALS HARMED";
  position: absolute;
  left: 6%;
  bottom: 96px;
  padding: 7px 16px 3px;
  border: 4px double var(--red);
  border-radius: 6px;
  color: var(--red);
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0.09em;
  line-height: 1.2;
  opacity: 0.78;
  transform: rotate(-4deg);
  filter: url(#rough);
  mix-blend-mode: multiply;
  pointer-events: none;
}

#studio .studio-lead { position: relative; }
#studio .studio-lead::after {
  content: "we mean it. <--";
  position: absolute;
  left: 4px;
  bottom: -40px;
  font-family: "Permanent Marker", "Comic Sans MS", cursive;
  font-size: 22px;
  color: var(--red);
  transform: rotate(-4deg);
}

.section-cta { position: relative; }
.section-cta::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 96px;
  right: 24px;
  border-top: 2px dashed rgba(11, 11, 12, 0.4);
}
.section-cta::after {
  content: "cut here";
  position: absolute;
  top: 6px;
  left: 20px;
  font-family: "Permanent Marker", "Comic Sans MS", cursive;
  font-size: 13px;
  color: rgba(11, 11, 12, 0.62);
  transform: rotate(-3deg);
}
.section-cta .cta { position: relative; }
.section-cta .cta .btn {
  -webkit-mask-image: radial-gradient(circle 15px at 100% 0, transparent 14px, #000 15px);
  mask-image: radial-gradient(circle 15px at 100% 0, transparent 14px, #000 15px);
}

.footer { position: relative; overflow: hidden; }
.footer .wrap { position: relative; z-index: 1; }

@media (max-width: 960px) {
  #numbers.section-band::after { left: 50%; bottom: 52px; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; }
  #numbers.section-band::before { right: 4%; top: 90px; width: 84px; height: 84px; }
  #numbers .stats > div:first-child::after { right: -2%; }
}

@media (max-width: 560px) {
  #numbers .stats > div:first-child::after { top: -36px; right: auto; left: 6px; }
}