/* Shared type scale, loaded after the legacy page styles. Brand wordmarks retain their own fonts. */
@font-face {
  font-family: Inter;
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-body: Inter, Arial, sans-serif;
  --type-home: 48px;
  --type-h1: 42px;
  --type-h2: 30px;
  --type-h3: 20px;
  --type-body: 16px;
  --type-small: 14px;
}
html body { font-family: var(--font-body); font-size: var(--type-body) !important; line-height: 1.7 !important; }
body h1, body h2, body h3, body button, body input, body select, body textarea, body pre { font-family: var(--font-body); }
/* Heading sizes intentionally override every legacy page and breakpoint rule. */
body h1 { font-size: var(--type-h1) !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -.035em !important; }
body[data-view=home] h1 { font-size: var(--type-home) !important; }
body h2 { font-size: var(--type-h2) !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -.025em !important; }
body h3 { font-size: var(--type-h3) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -.015em !important; }
body main p, body main li, body main dl, body main dl>div,
body #products .product-card p, body .about-copy .content-disclosure p,
body .contact-copy>p:not(.eyebrow), body .about-copy>.large-copy,
body .oem .large-copy, body .company-line>strong, body .contact-details {
  font-size: var(--type-body) !important; font-weight: 400 !important; line-height: 1.75 !important;
}
body header nav>a, body .section-nav a { font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important; }
body .button, body .text-link, body #products .product-card .text-link,
body .category-tabs button, body .variant-controls button, body .download-button,
body .published-documents .document-slot { font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important; }
body .contact label, body .variant-controls label, body .variant-controls legend {
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important;
}
body .contact input, body .contact select, body .contact textarea,
body .variant-controls select { font-size: 16px !important; font-weight: 400 !important; line-height: 1.5 !important; }
body .detail-grid .detail-sub { font-size: var(--type-h2) !important; font-weight: 600 !important; line-height: 1.3 !important; }
body .detail-grid dt { font-size: 14px !important; font-weight: 500 !important; }
body .detail-grid dd { font-size: 16px !important; font-weight: 400 !important; }
body main .eyebrow, body #products .product-card .eyebrow,
body main .caption, body .detail-image>p, body #carton figcaption,
body .facility-grid figcaption>span, body .about-photo-main figcaption span,
body .about-photo-pair figcaption, body .about-photo-strip figcaption,
body .company-line>span, body .language-picker select, body .document-slot span {
  font-size: var(--type-small) !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: .02em !important;
}
body .contact .form-note, body .contact form>p:last-child { font-size: var(--type-small) !important; line-height: 1.6 !important; }
body .about-copy>p:not(.eyebrow), body .about-copy details p,
body .oem p:not(.eyebrow), body .oem details p {
  max-width: 65ch; line-height: 1.8 !important; margin-block: 0 1.25em;
}
body .content-disclosure summary, body .technical-disclosure summary { font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important; }
body .facility-grid p { font-size: 16px !important; line-height: 1.75 !important; }
body .overview-card p { font-size: 16px !important; line-height: 1.75 !important; }
@media(max-width:720px) {
  :root { --type-home: 44px; --type-h1: 40px; --type-h2: 28px; }
  body header nav { flex-wrap: wrap; justify-content: flex-start; gap: 8px 18px; overflow: visible; }
  body header nav>a { font-size: 16px !important; }
  body .hero h1 { overflow-wrap: anywhere; }
  body .home-overview { grid-template-columns: 1fr; }
}

/* Supplied brand emblem beside the existing, unchanged wordmark. */
header .wordmark { position: relative; padding-inline-start: 68px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; }
header .wordmark .brand-icon { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; object-fit: cover; border-radius: 0; }
@media(max-width:720px) {
  header .wordmark { padding-inline-start: 54px; min-height: 44px; }
  header .wordmark .brand-icon { width: 44px; height: 44px; }
}

/* Homepage refinements: preserve all other type sizes and colors. */
body[data-view=home] .overview-card h2 { font-size: 28px !important; font-weight: 600 !important; }
@media(min-width:721px) {
  body[data-view=home] .hero { align-items: start; }
  body[data-view=home] .hero-visual.company-photos { align-self: start; }
}
/* Align Home with the image column on wide desktop layouts. */
@media(min-width:1200px) {
  body[data-view=home] { --home-right-width: max(640px, 43vw); --home-gutter: clamp(24px, 3vw, 48px); }
  body[data-view=home] header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 140px;
    column-gap: 20px;
    padding-inline: var(--home-gutter);
  }
  body[data-view=home] header nav {
    width: calc(var(--home-right-width) - 160px);
    margin: 0;
    gap: 16px;
    justify-content: space-between;
  }
  body[data-view=home] header .language-picker { width: 140px; }
  body[data-view=home] .hero {
    padding-inline: var(--home-gutter);
    max-width: none;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) var(--home-right-width);
    column-gap: 4%;
  }
  body[data-view=home] .home-overview { padding-inline: var(--home-gutter); max-width: none; width: 100%; }
  body[data-view=home] .hero-copy { justify-self: start; width: 100%; margin-inline-start: 0; }
}

/* Footer uses the same transparent emblem as the header. */
footer .wordmark { position: relative; padding-inline-start: 54px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
footer .wordmark .brand-icon { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; object-fit: cover; }
/* English inner-page columns share the Home navigation start. */
@media(min-width:1200px) {
  html[lang=en] body:is([data-view=oem], [data-view=contact]) header nav {
    width: 486px;
    flex: 0 0 486px;
  }
  html[lang=en] body:is([data-view=oem], [data-view=contact]) header .language-picker {
    width: 140px;
    flex: 0 0 140px;
  }
  html[lang=en] body:is([data-view=oem], [data-view=contact]) :is(.oem, .contact) {
    max-width: none;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 646px;
    column-gap: 4%;
  }
  body[data-view=products] .section-heading>p { margin-inline-end: 48px; }
}

/* Packaging examples supplied by the customer, shown without cropping. */
.pack-card .packaging-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; margin-bottom: 24px; }

body[data-route="/packaging/"] .pack-card { background: #fff; }
/* Keep each English product introduction sentence on one desktop line. */
@media(min-width:1200px) {
  html[lang=en] body[data-route="/products/"] .section-heading>p {
    max-width: none;
    width: max-content;
    flex-shrink: 0;
    white-space: nowrap;
  }
  html[lang=en] body[data-route="/products/"] .section-heading>div { min-width: 0; }
}