/* Shared fixes and conversion components. Loaded after the legacy cascade. */
@media (max-width: 860px) {
  .page-shell > .site-header .nav-wrap { display: flex; flex-wrap: wrap; }
  .page-shell > .site-header .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    flex: initial;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 18px 18px;
    background: #f8fcff;
    border-top: 1px solid #d7e9f5;
    border-bottom: 1px solid #d7e9f5;
  }
  .page-shell > .site-header .site-nav.is-open { display: flex; }
  .page-shell > .site-header .site-nav a {
    width: 100%;
    padding: 9px 12px;
    color: #16496f;
    background: #edf7fd;
    border-color: #d7e9f5;
    text-align: left;
  }
  .page-shell > .site-header .menu-toggle span { background: #16496f; }
}

.rfq-form {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(13, 102, 163, 0.18);
  border-radius: 16px;
  background: #f8fcff;
}
.rfq-form h2 { margin: 0; color: #103a5e; font-size: 24px; }
.rfq-form p { margin: 0; color: #557188; line-height: 1.6; }
.rfq-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rfq-form label { display: grid; gap: 6px; color: #284b67; font-size: 14px; font-weight: 700; }
.rfq-form input, .rfq-form textarea, .rfq-form select {
  width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #c9dce9; border-radius: 9px;
  color: #173b5d; background: #fff; font: inherit;
}
.rfq-form textarea { min-height: 100px; resize: vertical; }
.rfq-form .rfq-form-full { grid-column: 1 / -1; }
.rfq-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rfq-form-status { color: #0d72b8; font-size: 14px; }

/* Contact page: keep the request form primary and the follow-up explanation compact. */
.contact-steps .contact-rfq-form { margin: 0 0 24px; }
.contact-steps .contact-rfq-form h2 { font-size: 24px; }
.contact-steps .contact-rfq-form p { color: #557188 !important; }
.contact-steps .contact-rfq-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-steps .contact-rfq-form-actions .btn { flex: 1 1 180px; text-align: center; }
.contact-rfq-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-rfq-form-actions .btn { flex: 1 1 180px; text-align: center; }
.section-page-grid > .section.contact .contact-actions {
  width: min(50vw, 900px);
  max-width: 100%;
  margin-inline: auto;
}
.contact-steps > .contact-steps-label { margin-top: 4px; }

/* Contact page order: request first, contact details last. */
.section-page-grid > .section.contact .contact-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.section-page-grid > .section.contact .contact-rfq-form {
  order: 1;
  width: 100%;
  grid-column: 1;
}
.section-page-grid > .section.contact .contact-copy {
  order: 3;
  width: 100%;
  grid-column: 1 / -1;
}
.section-page-grid > .section.contact .contact-steps {
  order: 2;
  width: 100%;
  grid-column: 2;
}
.section-page-grid > .section.contact .contact-rfq-form,
.section-page-grid > .section.contact .contact-steps {
  align-self: stretch;
  height: 100%;
  box-sizing: border-box;
}
@media (max-width: 760px) {
  .section-page-grid > .section.contact .contact-layout {
    grid-template-columns: 1fr;
  }
  .section-page-grid > .section.contact .contact-rfq-form,
  .section-page-grid > .section.contact .contact-steps,
  .section-page-grid > .section.contact .contact-copy {
    grid-column: 1;
  }
  .section-page-grid > .section.contact .contact-actions {
    width: 100%;
  }
}

.product-spec-table { width: 100%; border-collapse: collapse; margin-top: 18px; background: #fff; }
.product-spec-table th, .product-spec-table td { padding: 10px 12px; border: 1px solid #dce6ef; text-align: left; vertical-align: top; }
.product-spec-table th { width: 34%; color: #173b5d; background: #edf7fd; }
@media (max-width: 560px) {
  .rfq-form-grid { grid-template-columns: 1fr; }
  .rfq-form .rfq-form-full { grid-column: auto; }
  .rfq-form { padding: 18px; }
  .product-spec-table { font-size: 14px; }
}

.hero-visual { margin: clamp(42px, 5vw, 78px) 0 0; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: #123b5a; box-shadow: 0 20px 42px rgba(5,25,42,.22); align-self: start; }
.hero-visual-card { margin: 0; padding: 0; }
.hero-visual img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-visual figcaption { display: none; }
@media (min-width: 861px) { .hero-grid:has(.hero-visual) { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 42px; align-items: start; } }
@media (max-width: 860px) { .hero-visual { margin-top: 24px; } }

/* Show the manufacturing bases as two equal cards per row on the strengths page. */
.section-page-grid > .section.campuses .campus-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.section-page-grid > .section.campuses .campus-media,
.section-page-grid > .section.campuses .campus-media-tall {
  height: clamp(220px, 24vw, 320px);
}
@media (max-width: 680px) {
  .section-page-grid > .section.campuses .campus-grid {
    grid-template-columns: 1fr;
  }
}

/* Homepage hero: balanced columns and fluid metric cards across screen sizes. */
@media (min-width: 861px) {
  .hero-grid:has(.hero-visual) {
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr);
    gap: clamp(24px, 3.5vw, 56px);
    align-items: center;
  }
  .hero-grid:has(.hero-visual) .hero-copy {
    max-width: min(100%, 760px);
  }
  .hero-grid:has(.hero-visual) .hero-visual {
    width: 100%;
    max-width: 680px;
    justify-self: end;
    align-self: center;
  }
}

.hero-metrics {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
}
.hero-metrics article {
  min-width: 0;
  padding: clamp(12px, 1.5vw, 20px);
}
.hero-metrics strong {
  display: block;
  max-width: 100%;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.12;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero-metrics span {
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.45;
}
@media (min-width: 1600px) {
  .hero-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-metrics article:nth-child(2) strong { font-size: clamp(20px, 1.9vw, 30px); }
}
@media (max-width: 1080px) {
  .hero-grid:has(.hero-visual) { grid-template-columns: 1fr; }
  .hero-grid:has(.hero-visual) .hero-copy { max-width: 100%; }
  .hero-grid:has(.hero-visual) .hero-visual { width: 100%; max-width: none; margin-top: 28px; }
}
.content-cluster { width: min(calc(100% - (var(--page-gutter) * 2)), var(--container)); margin: 34px auto 0; padding: 22px 24px; border: 1px solid #dce6ef; border-radius: 12px; background: #fff; }
.content-cluster h2 { margin: 0 0 14px; color: #173b5d; font-size: 20px; }
.content-cluster-links { display: flex; flex-wrap: wrap; gap: 10px; }
.content-cluster .btn { min-height: 38px; padding: 8px 12px; }
@media (max-width: 560px) { .content-cluster { width: calc(100% - 28px); padding: 18px; } .content-cluster .btn { width: 100%; justify-content: center; } }

/* The selector is a primary navigation surface. Keep it rendered after
   anchor navigation and delayed localized-content layout shifts. */
#products { content-visibility: visible !important; contain: none !important; }
#products .product-selector { display: block !important; visibility: visible !important; opacity: 1 !important; }
#products, #products .product-grid, #products .product-card, #products .product-media, #products .product-media img {
  content-visibility: visible !important;
  contain: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#products .product-grid { display: grid !important; }
#products .product-selector { display: block !important; visibility: visible !important; opacity: 1 !important; }
#products .product-filter, #products [data-product-filter] { display: none !important; }
.product-filter, [data-product-filter] { display: none !important; }

/* Defer below-the-fold painting while reserving stable space for scrolling. */
@media (min-width: 861px) {
  body:not([data-section]) main > .section:not(.hero) {
    content-visibility: auto;
    contain-intrinsic-size: 680px;
  }
}

/* The products page already starts immediately below the shared header. */
body[data-section="products"] .section-page-main { padding-top: 0 !important; }
body[data-section="products"] .section-page-grid > .section.products { padding-top: 0 !important; }

/* Improve text contrast on the light content surfaces. */
.section:not(.hero) p,
.section:not(.hero) li,
.section:not(.hero) .product-card p,
.section:not(.hero) .technical-card p,
.section:not(.hero) .faq-card p,
.section:not(.hero) .about-layout p,
.section:not(.hero) .section-heading > p:not(.eyebrow),
.section-page-hero > p:not(.eyebrow) {
  color: #334e68 !important;
}
.section:not(.hero) .eyebrow,
.section-page-hero .eyebrow,
.product-card .product-index {
  color: #0b6da8 !important;
}
.selector-keyword::placeholder,
input::placeholder,
textarea::placeholder {
  color: #526b82 !important;
  opacity: 1;
}
.site-nav a,
.page-shell > .site-header .site-nav a {
  color: #123b5d !important;
}

.home-scenarios { background: #f5f8fb; }
.home-scenarios-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px; }
.home-scenario-card { position: relative; display: block; aspect-ratio: 16 / 7; min-height: 0; overflow: hidden; border-radius: 10px; background: #123653; box-shadow: 0 8px 24px rgba(18,54,83,.12); }
.home-scenario-card img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform .35s ease; }
.home-scenario-card:hover img { transform: scale(1.03); }
.home-scenario-caption { position: absolute; inset: auto 0 0; padding: 58px 22px 20px; color: #fff; background: linear-gradient(transparent, rgba(4,22,37,.9)); }
.home-scenario-caption strong { display: block; font-size: 26px; line-height: 1.25; }
.home-scenario-caption em { display: block; margin-top: 6px; color: #d9edf8; font-size: 15px; font-style: normal; }
.home-scenario-caption em { display: none !important; }
.home-scenario-cta { display: block; margin-top: 8px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: underline; }
@media (max-width: 700px) {
  .home-scenarios-grid { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .home-scenario-card { flex: 0 0 86%; aspect-ratio: 4 / 3; min-height: 0; scroll-snap-align: start; }
  .home-scenario-card img { min-height: 0; }
  .home-scenario-caption { padding: 72px 18px 18px; }
  .home-scenario-caption strong { font-size: 24px; }
  .home-scenario-caption em { font-size: 14px; }
  .home-scenario-cta { margin-top: 6px; font-size: 14px; }
}

/* Keep the two contact panels level and let the information cards reflow by width. */
.section-page-grid > .section.contact .contact-layout {
  align-items: stretch;
}

.section-page-grid > .section.contact .contact-rfq-form,
.section-page-grid > .section.contact .contact-steps {
  box-sizing: border-box;
  height: 100%;
}

.section-page-grid > .section.contact .contact-rfq-form {
  display: flex;
  flex-direction: column;
}

.section-page-grid > .section.contact .contact-rfq-form-actions {
  margin-top: auto;
}

.section-page-grid > .section.contact .contact-steps {
  display: flex;
  flex-direction: column;
}

.section-page-grid > .section.contact .contact-steps-note + .btn-block {
  margin-top: auto;
}

.section-page-grid > .section.contact .contact-info {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: stretch;
}

.section-page-grid > .section.contact .contact-info article {
  height: 100%;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .section-page-grid > .section.contact .contact-info {
    grid-template-columns: 1fr;
  }
}