: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;
}

/* Never remove Framer-owned nodes: its responsive runtime still needs to
   reconcile them when the viewport crosses a component breakpoint. */
#main [data-zaka-hidden="true"] {
  display: none !important;
}

/* Framer's exported page shell defaults to #f9f9f9. Keep it black while the
   hero grows into place during the first refresh paint. */
#main > [data-layout-template="true"] {
  background-color: #000 !important;
}

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

/* Overseas wordmark: keep the original Framer layout box, but replace the
   mainland company lockup without depending on the export's remote srcset. */
#main nav img[src*="ubp1DDuDL59OyEfuvgCHe3JV0"],
#main nav img[src*="timebreak-inc-logo.svg"] {
  content: url("./assets/timebreak-inc-logo.svg") !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* Hide obsolete Framer navigation before and after runtime hydration. */
#main nav[data-framer-name] [data-framer-name="Menu Wrapper"],
#main nav[data-framer-name] .framer-1bdh7zm-container,
#main nav[data-framer-name] [data-framer-name="Link group"]:has(a[href$="#services"]) {
  display: none !important;
}

/* Keep text alignment consistent without changing component positioning. */
#main .framer-text,
#main input,
#main textarea {
  --framer-text-alignment: left !important;
  text-align: left !important;
}

/* Match the header link hover treatment to the footer's red accent. */
#main nav[data-framer-name] .framer-whlxnv a [data-framer-name="Hover link"],
#main nav[data-framer-name] .framer-whlxnv a [data-framer-name="Hover link"] .framer-text {
  --framer-text-color: #ff4400 !important;
  color: #ff4400 !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;
}

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

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

#main [data-framer-name="Brand display"],
#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;
}

/* Anchor the two primary copy blocks to their section's left content edge. */
#main [data-zaka-copy-align="hero"] {
  left: var(--zaka-hero-copy-offset-x, 0px) !important;
  position: relative !important;
  z-index: 2 !important;
}

#main [data-zaka-hero-overflow="visible"] {
  overflow: visible !important;
}

@media (min-width: 810px) {
  #main [data-zaka-copy-align="hero"] {
    padding-left: 0 !important;
  }

  /* Framer overscans this container to 101%, which places its left edge
     outside the clipped hero section and cuts off flush-left copy. */
  #main [data-framer-name="Container"]:has(> [data-zaka-copy-align="hero"]) {
    width: 100% !important;
  }
}

#main [data-zaka-copy-align="team"] {
  width: 100% !important;
  max-width: 1300px !important;
  align-items: flex-start !important;
}

#main [data-zaka-copy-align="team"] > h3 {
  width: 100% !important;
  max-width: 1040px !important;
}

/* Center the copy inside the three team member cards without affecting other text. */
#main [data-zaka-team-card="centered"] .framer-text {
  --framer-text-alignment: center !important;
  text-align: center !important;
}

/* Let the supplied portrait stickers extend beyond their circular artwork. */
#main [data-zaka-team-portrait-frame] {
  overflow: visible !important;
}

#main img[data-zaka-team-portrait] {
  border-radius: 0 !important;
  clip-path: none !important;
}

#main [data-zaka-product-copy="wide"],
#main [data-zaka-product-copy="wide"] > p {
  width: 100% !important;
  max-width: none !important;
}

@media (min-width: 1200px) {
  #main [data-zaka-team-row="equal"] {
    width: 100% !important;
    max-width: none !important;
  }

  #main [data-zaka-team-row-shell="full"] {
    left: var(--zaka-home-gutter) !important;
    right: var(--zaka-home-gutter) !important;
    width: auto !important;
    max-width: none !important;
  }

  #main [data-zaka-team-row="equal"] {
    --zaka-team-card-gap: clamp(64px, 6vw, 120px);
    gap: var(--zaka-team-card-gap) !important;
    justify-content: center !important;
  }

  #main [data-zaka-team-row="equal"] > [data-zaka-team-card="centered"] {
    flex: 1 1 0 !important;
    width: calc((100% - 2 * var(--zaka-team-card-gap)) / 3) !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  #main [data-zaka-product-copy="wide"] > p {
    white-space: pre !important;
  }
}

/* Keep the supplied hero artwork local instead of relying on Framer's CDN. */
#main img[src*="OSSwGzPhbX1IzA5ilkjoZEBP4uo"],
#main img[src*="hero-grid-tv.webp"] {
  content: url("https://zaoka-home.tos-cn-shanghai.volces.com/assets/hero-grid-tv.webp") !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#main #product img[src*="2KyUJWQsOKwQ33JtnPh8ccvwkEM"],
#main #product img[src*="product-team-workshop.png"],
#main #studio img[src*="2KyUJWQsOKwQ33JtnPh8ccvwkEM"],
#main #studio img[src*="product-team-workshop.png"] {
  content: url("https://zaoka-home.tos-cn-shanghai.volces.com/assets/product-team-workshop.png") !important;
}

#main .zaka-open-font {
  --framer-font-family: "Geist", "Geist Placeholder", sans-serif !important;
  font-family: "Geist", "Geist Placeholder", sans-serif !important;
}

#main .zaka-join-us {
  background-color: #fff !important;
  scroll-margin-top: 116px;
}

#main .zaka-join-us h1,
#main .zaka-join-us h2,
#main .zaka-join-us h3,
#main .zaka-join-us h4,
#main .zaka-join-us h5,
#main .zaka-join-us h6,
#main .zaka-join-us p,
#main .zaka-join-us li,
#main .zaka-join-us a {
  --framer-text-color: #000 !important;
  color: #000 !important;
}

#main .zaka-product-experience {
  width: 100% !important;
  background-color: #000 !important;
  scroll-margin-top: 116px;
}

#main .zaka-product-experience > header[data-framer-name="Header"] {
  width: min(calc(100% - (2 * var(--zaka-home-gutter))), 1300px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Preserve the dark input treatment when the browser autofills an email. */
#main .zaka-product-experience input[type="email"][name="Email"] {
  background-color: transparent !important;
  color: #fff !important;
  caret-color: #fff !important;
}

#main .zaka-product-experience input[type="email"][name="Email"]:autofill,
#main .zaka-product-experience input[type="email"][name="Email"]:-webkit-autofill,
#main .zaka-product-experience input[type="email"][name="Email"]:-webkit-autofill:hover,
#main .zaka-product-experience input[type="email"][name="Email"]:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #000 inset !important;
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  -webkit-text-fill-color: #fff !important;
  background-color: #000 !important;
  color: #fff !important;
  caret-color: #fff !important;
}

#main [data-zaka-product-trigger="true"] {
  cursor: pointer !important;
}

#main [data-zaka-product-trigger="true"]:focus-visible {
  outline: 3px solid #ff4400;
  outline-offset: 4px;
}

/* Keep the legal links at the left edge after the empty copyright text is removed. */
@media (min-width: 810px) {
  #main footer [data-framer-name="Others"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
    display: grid !important;
  }

  #main footer [data-framer-name="All rights reserved©Florent 2025"] {
    display: none !important;
  }

  #main footer [data-framer-name="Links"] {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  #main footer [data-framer-name="Scroll to top"] {
    grid-column: 2 !important;
    justify-self: end !important;
    width: auto !important;
  }
}

@media (max-width: 809.98px) {
  #main footer [data-framer-name="Links"] {
    align-content: flex-start !important;
    align-items: flex-start !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 809.98px) {
  #main .zaka-join-us,
  #main .zaka-product-experience {
    scroll-margin-top: 70px;
  }
}

#main h1.framer-text {
  font-size: clamp(64px, calc(48px + 2.2vw), 78px) !important;
  line-height: 1.1 !important;
  text-wrap: balance;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  /* The tablet hero copy column is fixed at 515px by the Framer component.
     Cap the heading at the largest size that keeps its intended two lines. */
  #main h1.framer-text {
    font-size: clamp(50px, 5.4vw, 64px) !important;
  }
}

@media (max-width: 809.98px) {
  #main h1.framer-text {
    width: calc(100vw - 40px) !important;
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  /* The mobile artwork places the ZAKA sticker over the original intro slot.
     Move the longer English paragraph beneath the sticker. */
  #main [data-zaka-hero-intro="true"] {
    width: calc(100vw - 40px) !important;
    transform: translateY(80px) !important;
  }

  #main [data-zaka-hero-intro="true"] > p {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.4 !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;
  }
}