/* Responsive safeguards for compact phones, tablets and wide displays. */
html,
body,
.site-shell {
  width: 100%;
  max-width: 100%;
}

/* Chrome 109 is the last Chrome version for Windows 7 and does not support
   Tailwind's oklab() colors. Keep explicit RGB fallbacks after site.css. */
.site-header {
  background-color: #20272a !important;
}

.bg-\[\#1b2124\]\/80 {
  background-color: rgba(27, 33, 36, 0.8);
}

.bg-\[\#1c2225\]\/85 {
  background-color: rgba(28, 34, 37, 0.85);
}

.border-\[\#c99542\]\/50 {
  border-color: rgba(201, 149, 66, 0.5);
}

.max-w-\[1380px\] {
  width: 100%;
}

.product-spec-title,
.request-title {
  min-width: 0;
  max-width: 100%;
}

.product-spec-title > span,
.request-title > span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .section-title {
    font-size: clamp(2.35rem, 13vw, 4rem);
  }

  .product-spec-title {
    font-size: clamp(1.95rem, 10.5vw, 3.35rem);
  }
}

@media (max-width: 390px) {
  .request-title {
    font-size: clamp(1.6rem, 9.2vw, 2rem);
  }

  .product-spec-title {
    font-size: clamp(1.7rem, 9.6vw, 2.3rem);
  }

  .section-pad {
    padding-block: clamp(4.25rem, 18vw, 5rem);
  }

  .site-header .brand-symbol {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .site-header .brand-link {
    gap: 0.5rem;
  }

  .site-header .brand-link > span {
    min-width: 0;
    max-width: min(190px, calc(100vw - 112px));
  }

  .site-header .brand-link > span > span:first-child {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .site-header .brand-link > span > span:last-child {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-button {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-\[\.75fr_1\.25fr\] {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }

  .lg\:grid-cols-\[\.95fr_1\.05fr\] {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .product-spec-title {
    font-size: clamp(2.35rem, 3.85vw, 4rem);
  }

  .request-title {
    font-size: clamp(2.35rem, 3.55vw, 3.85rem);
  }
}

@media (min-width: 1800px) {
  .max-w-\[1380px\] {
    max-width: 1600px;
  }
}

@media (min-width: 2400px) {
  .max-w-\[1380px\] {
    max-width: 1840px;
  }
}