/* Customer v12: the approved scene and book retain their existing behavior. */
html[data-variant="customer-v12"] {
  --customer-header-height: calc(60px + clamp(1.5rem, 3.6vh, 2.4rem));
}

html[data-variant="customer-v12"] .site-header {
  padding-block: clamp(0.75rem, 1.8vh, 1.2rem);
}

html[data-variant="customer-v12"].is-reading-content .site-header,
html[data-variant="customer-v12"]:not(.is-enhanced) .site-header {
  background: #090908;
}

html[data-variant="customer-v12"] .content-nav {
  top: var(--customer-header-height);
}

html[data-variant="customer-v12"].book-motion-ready .content-book__pages {
  top: calc(var(--customer-header-height) + 3.75rem);
}

html[data-variant="customer-v12"] .content-section,
html[data-variant="customer-v12"] #vision {
  scroll-margin-top: calc(var(--customer-header-height) + 4.5rem);
}

html[data-variant="customer-v12"] .monogram,
html[data-variant="customer-v12"] .motto {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

html[data-variant="customer-v12"] .monogram {
  gap: 0.85rem;
}

html[data-variant="customer-v12"] .customer-logo {
  display: block;
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  object-fit: contain;
}

html[data-variant="customer-v12"] .corner-teaser:is(:hover, :focus-visible),
html[data-variant="customer-v12"] .monogram:is(:hover, :focus-visible) {
  color: #fff;
}

/* Leave the existing scroll-pulse animation on its original span. */
html[data-variant="customer-v12"] .scroll-hint {
  gap: 0;
}

@media (max-width: 700px) {
  html[data-variant="customer-v12"] {
    --customer-header-height: calc(40px + clamp(1.5rem, 3.6vh, 2.4rem));
  }

  html[data-variant="customer-v12"] .customer-logo {
    width: 40px;
    height: 40px;
  }

  html[data-variant="customer-v12"] .monogram {
    max-width: none;
    gap: 0.65rem;
  }
}

@media (max-aspect-ratio: 4 / 5) {
  html[data-variant="customer-v12"] .motto {
    font-size: clamp(0.68rem, 2.85vw, 1rem);
    line-height: 1.55;
  }
}