:root {
  --zaka-home-gutter: clamp(20px, 5vw, 80px);
  --zaka-home-section-space: clamp(40px, 6.25vw, 100px);
  --zaka-home-hero-top: clamp(48px, 8vw, 120px);
}

html,
body {
  overflow-x: clip;
  background-color: #000 !important;
}

#__framer-badge-container,
.__framer-badge,
a[data-nosnippet="true"][href*="framer.com"],
a[href*="framer.com"][title*="Create a free website"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#main {
  background-color: #000 !important;
}

#main nav[data-framer-name] {
  background-color: #000 !important;
}

#main main[data-framer-name="Main"] {
  background-color: #000;
}

#main main[data-framer-name="Main"] section[data-framer-name="Phone-light"],
#main main[data-framer-name="Main"] > :first-child section[data-framer-name="Desktop"] {
  background-color: #000 !important;
}

#studio,
#works,
#main [data-framer-name="Hero"] {
  padding-right: var(--zaka-home-gutter) !important;
  padding-left: var(--zaka-home-gutter) !important;
}

#studio,
#works {
  padding-top: var(--zaka-home-section-space) !important;
  padding-bottom: var(--zaka-home-section-space) !important;
}

#main [data-framer-name="Client logos"] {
  padding: clamp(32px, 3.125vw, 50px) var(--zaka-home-gutter) !important;
}

#main [data-framer-name="Hero"] {
  padding-top: var(--zaka-home-hero-top) !important;
  padding-bottom: var(--zaka-home-section-space) !important;
}

#main h1.framer-text {
  font-size: clamp(72px, calc(57px + 2.5vw), 88px) !important;
  line-height: 1.1 !important;
}

#main h2.framer-text {
  font-size: clamp(50px, calc(31px + 4vw), 100px) !important;
  line-height: 1 !important;
}

#main h3.framer-text {
  font-size: clamp(34px, calc(25px + 2.2vw), 60px) !important;
  line-height: 1.1 !important;
}

html::after {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  background: #000;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.zaka-layout-changing::after {
  opacity: 0.18;
  transition-duration: 80ms;
}

@media (prefers-reduced-motion: reduce) {
  html::after {
    transition: none;
  }
}