/* 81 Fragments home: three related, angular section seams. */
.pattern-seam.hero-to-tools {
  --seam-before: var(--hero-bg, var(--bg));
  --seam-after: var(--tools-bg, var(--studio));
}
.pattern-seam.tools-to-contact {
  --seam-before: var(--tools-bg, var(--studio));
  --seam-after: var(--contact-bg, var(--accent));
}
.pattern-seam.contact-to-footer {
  --seam-before: var(--contact-bg, var(--accent));
  --seam-after: var(--footer-bg, var(--studio));
}
.pattern-seam {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: clamp(92px, 10.5vw, 156px);
  margin: -1px 0;
  overflow: hidden;
  background: var(--seam-after) !important;
  isolation: isolate;
  pointer-events: none;
  line-height: 0;
  --home-seam-scale: .78;
  --home-seam-drop: 0px;
  --home-seam-opacity: .96;
}
.pattern-seam > svg {
  display: block;
  width: 100%;
  min-width: 100%;
  height: 100% !important;
  max-width: none;
  overflow: hidden;
  transform: none !important;
}
.pattern-seam > svg .seam-shape {
  fill: var(--seam-before) !important;
  stroke: none;
}
.pattern-seam > svg path { fill: var(--seam-before) !important; }
.pattern-seam > svg .seam-base {
  fill: var(--seam-before) !important;
}
.pattern-seam > svg .seam-tooth {
  transform-box: view-box;
  transform-origin: 50% 0;
  transform: scaleY(var(--home-seam-scale));
}
.pattern-seam > svg .seam-drop {
  opacity: var(--home-seam-opacity);
  transform: translateY(var(--home-seam-drop));
}
@media (max-width: 540px) {
  .pattern-seam { height: 94px; }
}
@media (prefers-reduced-motion: reduce) {
  .pattern-seam > svg .seam-tooth { transform: none; }
  .pattern-seam > svg .seam-drop { transform: none !important; opacity: .75 !important; }
}

/* Let falling shapes cross the seam above the following section. */
.pattern-seam{overflow:visible;z-index:20}
.pattern-seam>svg{overflow:visible}