/* Outerscope identity layer. The source layout and motion system stay intact. */

html {
  scroll-padding-top: 7vw;
}

#about,
#systems,
#process,
#proof {
  scroll-margin-top: 7vw;
}

.header .logo img,
.header .logo .logo-bright,
.header .logo .logo-dark {
  width: 14.5vw;
  max-width: none;
}

.hero-content > h1 {
  max-width: 76vw;
  text-wrap: balance;
}

.hero-3d .hero-model-static {
  object-fit: contain;
  filter: saturate(0.94) contrast(1.04);
}

html body .hero-3d:not(.outerscope-live-model-ready) .hero-lcp-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .hero-3d:not(.outerscope-live-model-ready) model-viewer,
html body .hero-3d:not(.outerscope-live-model-ready) .model-wrapper {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .hero-3d.outerscope-live-model-ready .hero-lcp-image {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.hero-glow {
  background: radial-gradient(
    ellipse at center,
    rgba(200, 96, 61, 0.22) 0,
    rgba(97, 80, 72, 0.2) 38%,
    transparent 70%
  );
}

.os-about-badge {
  position: absolute;
  right: -4.8vw;
  bottom: -2.1vw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
  color: var(--dark-blue);
  transform: rotate(-5deg);
}

.os-about-badge strong {
  font-size: 1.25vw;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.os-about-badge span {
  font-size: 0.66vw;
  font-weight: 550;
  letter-spacing: 0.08em;
}

.product-image img,
.blog-image img,
.about .img-block img,
.four-five .image-block img,
.boxes-grid .box-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.product-image img {
  transform: scale(1.01);
  transition: transform 0.7s var(--standard-easing);
}

.products-grid .column:hover .product-image img {
  transform: scale(1.045);
}

.product-name span {
  letter-spacing: -0.025em;
}

#proof .testimonial-text h4 {
  text-wrap: balance;
}

#proof .testimonial-author strong {
  font-weight: 600;
}

#proof .testimonial-author span {
  color: var(--grey-beige);
}

.footer-logo {
  width: 14.5vw;
  max-width: none;
}

.footer a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

a:focus-visible,
button:focus-visible,
.underline-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: 18vw;
  }

  #about,
  #systems,
  #process,
  #proof {
    scroll-margin-top: 18vw;
  }

  .header .logo img,
  .header .logo .logo-bright,
  .header .logo .logo-dark {
    width: 39vw;
  }

  .hero-content > h1 {
    max-width: 94vw;
    font-size: 13.2vw;
    line-height: 0.92;
  }

  .hero-3d .hero-model-static {
    width: 118vw;
    max-width: none;
  }

  .os-about-badge {
    right: -1vw;
    bottom: 3.5vw;
    gap: 0.8vw;
  }

  .os-about-badge strong {
    font-size: 4.1vw;
  }

  .os-about-badge span {
    font-size: 2.1vw;
  }

  .footer-logo {
    width: 42vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-image img,
  .products-grid .column:hover .product-image img {
    transform: none;
    transition: none;
  }
}