/* Final cross-page consistency layer and shared hero imagery. */
:root {
  --font-primary: Roboto, Helvetica, Arial, Verdana, sans-serif;
  --font-global: Roboto, Helvetica, Arial, Verdana, sans-serif;
  --font-sans: Roboto, Helvetica, Arial, Verdana, sans-serif;
  --container: 1440px;
}

html {
  max-width: 100%;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
  font-family: var(--font-global);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-primary);
}

.container {
  width: min(calc(100% - 64px), var(--container));
  margin-inline: auto;
}

main,
main > section,
main .container,
.header-inner,
.footer-top {
  min-width: 0;
}

img,
svg {
  max-width: 100%;
}

/* Every page's leading section receives a real laboratory background image.
   Layered gradients preserve text contrast and keep the visual language quiet. */
.about-hero,
.contact-hero {
  background-color: #eef2f2;
  background-image:
    linear-gradient(90deg, rgba(246, 248, 248, .98) 0%, rgba(246, 248, 248, .93) 50%, rgba(238, 243, 243, .72) 100%),
    url("https://images.pexels.com/photos/3861457/pexels-photo-3861457.jpeg?auto=compress&cs=tinysrgb&w=2000");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.inner-hero,
.verify-simple {
  background-color: #e9eeee;
  background-image:
    linear-gradient(90deg, rgba(238, 242, 242, .98) 0%, rgba(238, 242, 242, .94) 54%, rgba(231, 237, 237, .72) 100%),
    url("https://images.pexels.com/photos/3735780/pexels-photo-3735780.jpeg?auto=compress&cs=tinysrgb&w=2000");
  background-repeat: no-repeat;
  background-position: center 46%;
  background-size: cover;
}

.catalog-hero,
.product-hero {
  background-color: #e9eeee;
  background-image:
    linear-gradient(90deg, rgba(238, 242, 242, .98) 0%, rgba(238, 242, 242, .92) 52%, rgba(226, 234, 234, .68) 100%),
    url("https://images.pexels.com/photos/4031522/pexels-photo-4031522.jpeg?auto=compress&cs=tinysrgb&w=2000");
  background-repeat: no-repeat;
  background-position: center 42%;
  background-size: cover;
}

.status-page {
  background-color: #e9eeee;
  background-image:
    linear-gradient(rgba(238, 242, 242, .88), rgba(238, 242, 242, .88)),
    url("https://images.pexels.com/photos/3735780/pexels-photo-3735780.jpeg?auto=compress&cs=tinysrgb&w=2000");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.inner-hero::before,
.catalog-hero::before,
.product-hero::before,
.contact-hero::before,
.about-hero::before,
.verify-simple::before {
  display: none;
}

.inner-hero-grid,
.catalog-hero-inner,
.product-hero-grid,
.contact-hero-grid,
.about-hero-grid,
.verify-simple-grid,
.hero-grid {
  position: relative;
  z-index: 1;
}

.hero-side-note,
.catalog-index,
.route-board,
.verify-simple-note {
  backdrop-filter: blur(8px);
}

@media (max-width: 1119px) {
  .container {
    width: min(calc(100% - 48px), var(--container));
  }
}

@media (max-width: 767px) {
  .container {
    width: min(calc(100% - 32px), var(--container));
  }

  .about-hero,
  .contact-hero,
  .inner-hero,
  .verify-simple,
  .catalog-hero,
  .product-hero {
    background-position: 62% center;
  }
}

@media (max-width: 390px) {
  .container {
    width: min(calc(100% - 26px), var(--container));
  }
}

@media (prefers-reduced-data: reduce) {
  .about-hero,
  .contact-hero,
  .inner-hero,
  .verify-simple,
  .catalog-hero,
  .product-hero,
  .status-page {
    background-image: none;
  }
}