/* Hallmark · genre: modern-minimal · macrostructure: Catalogue · theme: studied-DNA (source: Website Oksan 2026 six-page PNG set) · tone: technical · anchor hue: Oksan blue · enrichment: supplied industrial photography · nav: N9 · footer: Ft2 · contrast: pass (40–41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57) · icons: pass (30) */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V3 */
@import url("../../tokens.css");

/* The supplied PNG compositions are the authority for section order, density, and component treatment. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-md)); }
body { color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a, label { -webkit-tap-highlight-color: var(--color-transparent); }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin-block-start: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; line-height: 1.25; overflow-wrap: anywhere; min-width: 0; }
p { margin-block-end: var(--space-md); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 1000; top: var(--space-sm); left: var(--space-sm); transform: translateY(-200%); background: var(--color-paper); color: var(--color-navy); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; min-width: 0; }
.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--soft { background: var(--color-paper-soft); }
.section-heading { color: var(--color-navy); font-size: var(--text-2xl); margin-bottom: var(--space-xl); text-align: center; text-transform: uppercase; letter-spacing: -0.015em; }
.section-heading--sentence { color: var(--color-ink); text-transform: none; }
.section-heading--left { text-align: left; }
.eyebrow--hero { color: var(--color-paper); }
.eyebrow--spaced { margin-top: var(--space-xl); }
.eyebrow--center { text-align: center; }
.section-intro { max-width: 45rem; margin: calc(var(--space-md) * -1) auto var(--space-xl); color: var(--color-ink-soft); text-align: center; }
.eyebrow { color: var(--color-navy); font-weight: 700; letter-spacing: 0.035em; margin-bottom: var(--space-xs); text-transform: uppercase; }
.muted { color: var(--color-ink-soft); }
.text-link { border: 0; background: none; color: var(--color-navy); font-weight: 700; padding: var(--space-xs) 0; white-space: nowrap; }
.text-link:hover { color: var(--color-blue); }
.text-link--on-dark { color: var(--color-paper); }
.btn { align-items: center; border: var(--rule-thin) solid var(--color-line-strong); border-radius: var(--radius-sm); display: inline-flex; font-size: var(--text-sm); font-weight: 700; gap: var(--space-xs); justify-content: center; min-height: 2.85rem; padding: var(--space-sm) var(--space-lg); transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-loading { cursor: not-allowed; opacity: 0.56; transform: none; }
.btn--primary { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-blue-hover); }
.btn--outline { background: var(--color-transparent); border-color: var(--color-white-alpha); color: var(--color-paper); }
.btn--outline:hover { background: var(--color-white-alpha); color: var(--color-navy-deep); }
.btn--light-outline { background: var(--color-paper); border-color: var(--color-navy); color: var(--color-navy); }
.btn--light-outline:hover { background: var(--color-paper-blue); }

.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-height); background: color-mix(in srgb, var(--color-paper) 94%, transparent); border-bottom: var(--rule-thin) solid var(--color-line); box-shadow: 0 0.35rem 1.2rem color-mix(in srgb, var(--color-navy-deep) 8%, transparent); backdrop-filter: blur(0.75rem); }
.admin-bar .site-header { top: 32px; }
.site-header__inner { align-items: center; display: grid; gap: var(--space-md); grid-template-columns: auto minmax(0, 1fr) auto auto auto; height: 100%; }
.brand { display: inline-flex; width: 12rem; }
.brand img { max-height: 3rem; object-fit: contain; }
.brand-lockup { align-items: center; gap: var(--space-xs); }
.brand-lockup .brand-mark { flex: 0 0 2.6rem; height: 2.6rem; max-height: 2.6rem; object-fit: contain; width: 2.6rem; }
.brand-wordmark { color: var(--color-navy); display: flex; flex-direction: column; font-family: var(--font-display); line-height: 0.95; white-space: nowrap; }
.brand-wordmark strong { font-size: 1.05rem; letter-spacing: 0.01em; }
.brand-wordmark small { font-family: var(--font-body); font-size: 0.46rem; font-weight: 700; letter-spacing: 0.08em; margin-top: 0.2rem; }
.brand-lockup--footer .brand-wordmark { color: var(--color-paper); }
.site-nav { align-items: stretch; display: flex; height: 100%; justify-content: center; min-width: 0; }
.site-nav ul { align-items: stretch; display: flex; height: 100%; list-style: none; margin: 0; padding: 0; }
.site-nav li { display: flex; margin: 0; padding: 0; }
.site-nav a { align-items: center; display: inline-flex; font-size: var(--text-sm); padding-inline: clamp(0.28rem, 0.5vw, 0.45rem); position: relative; text-transform: uppercase; white-space: nowrap; }
.site-nav a::after { background: var(--color-blue); bottom: var(--space-xs); content: ""; height: var(--rule-strong); left: 50%; position: absolute; right: 50%; transition: left var(--dur-base) var(--ease-out), right var(--dur-base) var(--ease-out); }
.site-nav a:hover, .site-nav a.is-current, .site-nav a[aria-current="page"], .site-nav .current-menu-item > a, .site-nav .current_page_item > a { color: var(--color-navy); }
.site-nav a:hover::after, .site-nav a.is-current::after, .site-nav a[aria-current="page"]::after, .site-nav .current-menu-item > a::after, .site-nav .current_page_item > a::after { left: var(--space-sm); right: var(--space-sm); }
.language-demo { align-items: center; color: var(--color-muted); display: flex; font-size: var(--text-xs); gap: var(--space-xs); white-space: nowrap; }
.language-demo ul { align-items: center; display: flex; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.language-demo li { margin: 0; padding: 0; }
.language-demo .current-lang a, .language-demo .is-current { color: var(--color-navy); font-weight: 700; }
.language-demo .is-current { color: var(--color-navy); font-weight: 700; }
.language-switcher a { color: var(--color-muted); display: inline-flex; padding: 0.25rem 0.2rem; position: relative; text-transform: uppercase; transition: color var(--dur-fast) var(--ease-out); }
.language-switcher a:hover, .language-switcher .current-lang a { color: var(--color-navy); }
.language-switcher .current-lang a::after { background: var(--color-blue); bottom: 0; content: ""; height: var(--rule-strong); left: 0.2rem; position: absolute; right: 0.2rem; }
.site-header__phone { align-items: flex-end; display: flex; flex-direction: column; font-size: var(--text-xs); line-height: 1.05; white-space: nowrap; }
.site-header__phone span { color: var(--color-muted); font-size: 0.68rem; }
.site-header__phone strong { color: var(--color-navy); font-size: var(--text-sm); }
.menu-toggle { align-items: center; background: var(--color-paper); border: var(--rule-thin) solid var(--color-line-strong); border-radius: var(--radius-sm); display: none; height: 2.75rem; justify-content: center; padding: 0; width: 2.75rem; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { background: var(--color-navy); content: ""; display: block; height: var(--rule-strong); transition: transform var(--dur-base) var(--ease-out); width: 1.25rem; }
.menu-toggle__bars::before { transform: translateY(calc(var(--space-xs) * -1)); }
.menu-toggle__bars::after { transform: translateY(var(--space-2xs)); }

.hero { background-color: var(--color-navy-deep); color: var(--color-paper); min-height: 23rem; position: relative; overflow: clip; }
.hero::after { background: linear-gradient(90deg, var(--color-overlay) 0%, var(--color-overlay) 29%, var(--color-transparent) 78%); content: ""; inset: 0; position: absolute; }
.hero__media { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
/* The clip sits over the still, which shows through until it can play. */
.hero__video { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__content { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; min-height: 23rem; padding-block: var(--space-2xl) var(--space-3xl); position: relative; z-index: 1; animation: oksan-fade-up var(--dur-slow) var(--ease-out) both; }
.reveal-item { opacity: 0; transform: translateY(1rem); transition: opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms), transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms); }
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }
.hero h1 { font-size: var(--text-display); max-width: 42rem; margin-bottom: var(--space-md); letter-spacing: -0.03em; }
.hero--compact h1 { font-size: var(--text-display-sm); }
.hero__lede { font-size: var(--text-lg); max-width: 38rem; margin-bottom: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.breadcrumbs { align-items: center; display: flex; flex-wrap: wrap; font-size: var(--text-sm); gap: var(--space-xs); margin-top: var(--space-sm); }
.breadcrumbs a { white-space: nowrap; }

.card { background: var(--color-paper); border: var(--rule-thin) solid var(--color-line); border-radius: var(--radius-md); min-width: 0; overflow: clip; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.card--padded { padding: var(--space-lg); }
.card-media { aspect-ratio: 16 / 10; background: var(--color-paper-soft); object-fit: cover; width: 100%; }
.feature-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-card { align-items: center; display: grid; gap: var(--space-md); grid-template-columns: minmax(7rem, 0.85fr) minmax(0, 1.5fr); padding: var(--space-md); }
.feature-card img { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); object-fit: cover; width: 100%; }
.feature-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.feature-card p { color: var(--color-ink-soft); font-size: var(--text-sm); margin-bottom: 0; }
.feature-number { color: var(--color-navy); }

.stats-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { align-items: center; display: flex; gap: var(--space-sm); justify-content: center; min-height: 5.5rem; padding: var(--space-md); position: relative; }
.stat > div { min-width: 0; }
.stat + .stat::before { background: var(--color-line); content: ""; height: 55%; left: 0; position: absolute; top: 22.5%; width: var(--rule-thin); }
.stat__mark { align-items: center; border: var(--rule-strong) solid var(--color-navy); border-radius: var(--radius-pill); color: var(--color-navy); display: flex; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; height: 3rem; justify-content: center; min-width: 3rem; }
.stat strong { color: var(--color-navy); display: block; font-family: var(--font-display); font-size: var(--text-xl); }
.stat span { font-size: var(--text-sm); }
.stat--long strong { font-size: var(--text-lg); }

.process-rail { display: flex; min-width: max-content; padding: var(--space-sm) 0; }
.process-scroll { overflow-x: auto; scrollbar-color: var(--color-line-strong) var(--color-paper-soft); }
.process-step { align-items: center; display: flex; flex: 1 0 8rem; flex-direction: column; gap: var(--space-xs); justify-content: flex-start; max-width: 11rem; min-width: 8rem; padding-inline: var(--space-sm); text-align: center; }
.process-step + .process-step::before { color: var(--color-line-strong); content: "→"; font-size: var(--text-xl); margin-left: calc(var(--space-lg) * -1); position: absolute; transform: translateY(1.4rem); }
.process-step { position: relative; }
.line-icon { color: var(--color-navy); height: 3.25rem; width: 3.25rem; }
.line-icon * { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.process-step span { font-size: var(--text-sm); font-weight: 600; max-width: 9rem; }
.process-step__number { align-items: center; background: var(--color-blue); border-radius: var(--radius-pill); color: var(--color-accent-ink); display: flex; font-weight: 700; height: 1.8rem; justify-content: center; width: 1.8rem; }

.tabs { display: grid; gap: var(--space-xs); grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: var(--space-xl); }
.tab { align-items: center; background: var(--color-paper); border: var(--rule-thin) solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-ink); display: flex; gap: var(--space-xs); justify-content: center; min-height: 3.25rem; padding: var(--space-xs) var(--space-md); white-space: nowrap; }
.tab:hover { border-color: var(--color-blue); color: var(--color-navy); }
.tab[aria-selected="true"] { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-accent-ink); font-weight: 700; }
.product-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.product-grid--large { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card { display: flex; flex-direction: column; position: relative; }
.product-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--space-md); }
.product-card h3 { font-size: var(--text-base); margin-bottom: var(--space-xs); }
.product-card p { font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.product-card .text-link { margin-top: auto; align-self: flex-start; }
.product-detail-page { overflow: clip; }
.product-detail-back { display: inline-flex; margin-bottom: var(--space-lg); }
.product-detail-layout { align-items: center; display: grid; gap: clamp(var(--space-xl), 5vw, 5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.product-detail-gallery { min-width: 0; }
.product-detail-main-image { background: var(--color-paper-soft); border: var(--rule-thin) solid var(--color-line); margin: 0; overflow: hidden; }
.product-detail-main-image img { aspect-ratio: 4 / 3; display: block; object-fit: cover; width: 100%; }
.lightbox-trigger { background: transparent; border: 0; cursor: zoom-in; display: block; padding: 0; text-align: left; width: 100%; }
.lightbox-trigger:focus-visible { outline: var(--rule-strong) solid var(--color-blue); outline-offset: 3px; }
.product-detail-thumbs { display: grid; gap: var(--space-sm); grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--space-sm); }
.product-detail-thumbs .lightbox-trigger { border: var(--rule-thin) solid var(--color-line); overflow: hidden; }
.product-detail-thumbs img { aspect-ratio: 1; display: block; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); width: 100%; }
.product-detail-thumbs .lightbox-trigger:hover img { transform: scale(1.04); }
.lightbox-video-thumb { align-items: center; background: var(--color-navy); color: var(--color-paper); display: flex; flex-direction: column; font-size: var(--text-xs); gap: var(--space-xs); justify-content: center; min-height: 3rem; text-align: center; }
.lightbox-video-thumb span:first-child { font-size: var(--text-lg); }
.product-detail-summary h1 { font-size: clamp(2.4rem, 5vw, 4.75rem); line-height: 0.98; margin-bottom: var(--space-md); max-width: 12ch; }
.product-detail-lede { color: var(--color-muted); font-size: var(--text-lg); max-width: 34rem; }
.product-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block: var(--space-xl); }
.product-detail-facts { border-top: var(--rule-thin) solid var(--color-line); display: grid; gap: var(--space-md); grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: var(--space-md); }
.product-detail-facts span, .product-detail-facts strong { display: block; }
.product-detail-facts span { color: var(--color-muted); font-size: var(--text-xs); margin-bottom: var(--space-xs); text-transform: uppercase; }
.product-detail-facts strong { font-size: var(--text-sm); }
.product-detail-content { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr); }
.product-detail-description h2, .product-detail-specs h2 { margin-top: 0; }
.product-detail-description .entry-content { color: var(--color-muted); font-size: var(--text-lg); max-width: 44rem; }
.product-detail-specs dl { margin: 0; }
.product-detail-specs dl > div { border-top: var(--rule-thin) solid var(--color-line); display: flex; gap: var(--space-md); justify-content: space-between; padding-block: var(--space-sm); }
.product-detail-specs dt { color: var(--color-muted); }
.product-detail-specs dd { font-weight: 700; margin: 0; text-align: right; }
.section-heading-row { align-items: end; display: flex; justify-content: space-between; margin-bottom: var(--space-lg); }
.section-heading-row .section-heading { margin-bottom: 0; }
.related-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section--navy { background: var(--color-navy); color: var(--color-paper); }
.section--navy .eyebrow, .section--navy p { color: var(--color-white-alpha); }
.media-lightbox { background: var(--color-paper); border: 0; border-radius: var(--radius-md); color: var(--color-navy); max-height: 92vh; max-width: min(72rem, calc(100% - 2rem)); padding: var(--space-md); width: 100%; }
.media-lightbox::backdrop { background: rgb(4 15 32 / 0.86); }
.media-lightbox__bar { align-items: center; display: flex; justify-content: space-between; }
.media-lightbox__bar button { background: transparent; border: 0; color: var(--color-navy); cursor: pointer; font-size: 2rem; line-height: 1; padding: var(--space-xs); }
.media-lightbox__stage { align-items: center; background: var(--color-paper); display: flex; justify-content: center; margin: var(--space-sm) auto; min-height: 12rem; }
.media-lightbox__stage img, .media-lightbox__stage video, .media-lightbox__stage iframe { border: 0; height: min(72vh, 42rem); max-height: 72vh; max-width: 100%; object-fit: contain; width: min(100%, 64rem); }
.media-lightbox > p { color: var(--color-ink-soft); margin: 0; text-align: center; }
.media-lightbox__controls { display: flex; gap: var(--space-sm); justify-content: center; margin-top: var(--space-sm); }
.media-lightbox__controls button { background: var(--color-paper); border: 0; border-radius: var(--radius-pill); color: var(--color-navy); cursor: pointer; font-size: var(--text-lg); min-height: 2.5rem; min-width: 3.5rem; }
.editor-page .entry-content { max-width: 72rem; }
.page-editor-title { margin-bottom: var(--space-xl); }
.badge { background: var(--color-navy); border-radius: var(--radius-sm); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 700; left: var(--space-sm); padding: var(--space-2xs) var(--space-xs); position: absolute; top: var(--space-sm); z-index: 1; }
.empty-state { border: var(--rule-thin) dashed var(--color-line-strong); border-radius: var(--radius-md); color: var(--color-ink-soft); grid-column: 1 / -1; padding: var(--space-2xl); text-align: center; }

.equipment-thumbs { display: grid; gap: var(--space-md); grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: var(--space-lg); }
.thumb-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.thumb-card strong { display: block; font-size: var(--text-sm); padding: var(--space-sm); text-align: center; }
.proof-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-card { display: grid; gap: var(--space-md); grid-template-columns: auto minmax(0, 1fr); padding: var(--space-lg); }
.proof-card h3 { font-size: var(--text-base); margin-bottom: var(--space-xs); }
.proof-card p { color: var(--color-ink-soft); font-size: var(--text-sm); margin: 0; }
.proof-mark { color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; }
.proof-card__thumbnail { aspect-ratio: 1; border-radius: var(--radius-sm); height: 5rem; object-fit: cover; width: 5rem; }
.logo-rail { align-items: center; display: grid; gap: var(--space-lg) var(--space-xl); grid-template-columns: repeat(6, minmax(0, 1fr)); padding: var(--space-lg); }
.logo-rail img { filter: grayscale(1); margin: auto; max-height: 2.2rem; max-width: 8.5rem; opacity: 0.63; object-fit: contain; transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.logo-rail img:hover { filter: grayscale(0); opacity: 1; }
.logo-word { color: var(--color-muted); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; text-align: center; }

.split-panel { display: grid; grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 1.25fr); }
.split-panel > * { min-width: 0; padding: var(--space-xl); }
.split-panel > * + * { border-left: var(--rule-thin) solid var(--color-line); }
.contact-list { display: grid; gap: var(--space-md); font-size: var(--text-sm); }
.contact-list__item { display: grid; gap: var(--space-xs); grid-template-columns: 2rem minmax(0, 1fr); padding-bottom: var(--space-md); }
.contact-list__item + .contact-list__item { border-top: var(--rule-thin) solid var(--color-line); padding-top: var(--space-md); }
.contact-list__icon { align-items: center; background: var(--color-blue); border-radius: var(--radius-pill); color: var(--color-paper); display: flex; font-weight: 700; height: 2rem; justify-content: center; width: 2rem; }
.contact-list address { font-style: normal; }
.qr-row { align-items: center; display: flex; gap: var(--space-md); margin-top: var(--space-lg); }
.qr-row img { height: 6.75rem; object-fit: contain; width: 6.75rem; }
.line-badge { align-items: center; display: inline-flex; font-weight: 700; gap: var(--space-xs); }
.line-dot { align-items: center; background: var(--color-success); border-radius: var(--radius-md); color: var(--color-paper); display: inline-flex; font-size: var(--text-xs); height: 2.25rem; justify-content: center; width: 2.25rem; }

.rfq-form { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: var(--text-sm); font-weight: 600; }
.field input, .field select, .field textarea { background: var(--color-paper); border: var(--rule-thin) solid var(--color-line-strong); border-radius: var(--radius-sm); min-height: 3rem; padding: var(--space-sm) var(--space-md); width: 100%; }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-blue); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field-error { color: var(--color-error); font-size: var(--text-xs); min-height: 1.1rem; }
.field-hint { color: var(--color-ink-soft); font-size: var(--text-xs); }
.textarea-meta { display: flex; justify-content: flex-end; }
.project-types { border: 0; grid-column: 1 / -1; margin: 0; padding: 0; }
.project-type-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-sm); }
.project-type { align-items: center; border: var(--rule-thin) solid var(--color-line-strong); border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; font-size: var(--text-sm); gap: var(--space-xs); justify-content: center; min-height: 7rem; padding: var(--space-md); text-align: center; }
.project-type:has(input:checked) { background: var(--color-paper-blue); border-color: var(--color-blue); color: var(--color-navy); }
.project-type input { height: 1px; min-height: 1px; opacity: 0; padding: 0; position: absolute; width: 1px; }
.project-type__icon { color: var(--color-navy); font-family: var(--font-display); font-size: var(--text-xl); }
.dropzone { align-items: center; border: var(--rule-thin) dashed var(--color-line-strong); border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; gap: var(--space-xs); justify-content: center; min-height: 10rem; padding: var(--space-lg); text-align: center; }
.dropzone:hover, .dropzone.is-dragging { background: var(--color-paper-blue); border-color: var(--color-blue); }
.dropzone input { height: 1px; min-height: 1px; opacity: 0; padding: 0; position: absolute; width: 1px; }
.security-note { align-items: center; background: var(--color-paper-blue); border: var(--rule-thin) solid var(--color-line); border-radius: var(--radius-sm); display: grid; font-size: var(--text-sm); gap: var(--space-md); grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); padding: var(--space-md); }
.security-note__icon { color: var(--color-navy); font-size: var(--text-xl); }
.form-status { border-radius: var(--radius-sm); display: none; font-size: var(--text-sm); grid-column: 1 / -1; padding: var(--space-md); }
.form-status.is-success { background: var(--color-paper-blue); color: var(--color-success); display: block; }
.form-status.is-error { background: var(--color-paper-soft); border: var(--rule-thin) solid var(--color-error); color: var(--color-error); display: block; }
.rfq-form .btn[type="submit"] { grid-column: 1 / -1; width: 100%; }
.forminator-ui.forminator-custom-form { color: var(--color-ink); font-family: var(--font-body); }
.forminator-ui.forminator-custom-form .forminator-label { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.forminator-ui.forminator-custom-form .forminator-input, .forminator-ui.forminator-custom-form .forminator-textarea, .forminator-ui.forminator-custom-form .forminator-select2 { background: var(--color-paper); border: var(--rule-thin) solid var(--color-line-strong); border-radius: var(--radius-sm); min-height: 3rem; }
.forminator-ui.forminator-custom-form .forminator-button-submit { background: var(--color-blue); border: 0; border-radius: var(--radius-sm); color: var(--color-accent-ink); font-weight: 700; min-height: 2.85rem; padding: var(--space-sm) var(--space-lg); }
.forminator-ui.forminator-custom-form .forminator-button-submit:hover { background: var(--color-blue-hover); transform: translateY(-1px); }

.detail-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); margin-top: var(--space-xl); }
.detail-panel__media { height: 100%; min-height: 22rem; object-fit: cover; width: 100%; }
.detail-panel__body { padding: var(--space-xl); }
.spec-table { border-collapse: collapse; font-size: var(--text-sm); width: 100%; }
.spec-table th, .spec-table td { border-top: var(--rule-thin) solid var(--color-line); padding: var(--space-sm); text-align: left; vertical-align: top; }
.spec-table th { color: var(--color-ink); font-weight: 700; width: 34%; }
.equipment-layout { align-items: start; display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 0.92fr); }
.equipment-stack { align-content: start; display: grid; gap: var(--space-lg); }
.equipment-card { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.15fr); }
.equipment-card > img { height: 100%; min-height: 17rem; object-fit: cover; width: 100%; }
.equipment-card__body { padding: var(--space-lg); }
.equipment-card--stacked { display: block; }
.equipment-card h2, .featured-equipment h2 { color: var(--color-navy); font-size: var(--text-xl); margin-bottom: var(--space-md); text-transform: uppercase; }
.featured-equipment { align-self: start; background: var(--color-navy-deep); color: var(--color-paper); padding: var(--space-lg); position: sticky; top: calc(var(--header-height) + var(--space-md)); }
.featured-equipment h2 { color: var(--color-paper); }
.featured-equipment img:not(.oksan-icon) { aspect-ratio: 4 / 3; border: var(--rule-thin) solid var(--color-white-alpha); border-radius: var(--radius-sm); object-fit: cover; width: 100%; }
.featured-equipment .spec-table th, .featured-equipment .spec-table td { border-color: var(--color-white-alpha); }
.equipment-bottom { display: grid; gap: var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-lg); }
.inventory-card { background: var(--color-paper-blue); padding: var(--space-lg); }
.inventory-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

.quality-steps { display: grid; gap: var(--space-md); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.quality-step { display: flex; flex-direction: column; overflow: visible; padding: var(--space-md); text-align: center; }
.quality-step .process-step__number { margin: calc(var(--space-xl) * -1) auto var(--space-sm); }
.quality-step .line-icon { margin: 0 auto var(--space-sm); }
.quality-step h3 { flex: 1; font-size: var(--text-sm); min-height: 3.2rem; }
/* :not(.oksan-icon) because a replaced icon is an <img> too, and this rule
   is written for the card's photograph: without it the icon is stretched to
   the card width and cropped to 4/3. The step icons on the Quality page were
   coming out 281x52 in a 52x52 slot. */
.quality-step img:not(.oksan-icon) { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); object-fit: cover; width: 100%; }
.quality-feature { padding: var(--space-lg); }
.quality-feature h3, .report-card h3 { color: var(--color-navy); font-size: var(--text-xl); }
.quality-video { margin: var(--space-lg) 0; }
.quality-video video { aspect-ratio: 16 / 9; background: var(--color-navy); display: block; width: 100%; }
.quality-video figcaption { color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-xs); }
.quality-thumbs { display: grid; gap: var(--space-sm); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-md); }
.quality-thumbs figure { margin: 0; text-align: center; }
.quality-thumbs img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.quality-thumbs figcaption { font-size: var(--text-xs); margin-top: var(--space-xs); }
.report-card { padding: var(--space-lg); }
/* The two drawings are wide and covered in callout boxes, so they are shown
   whole rather than cropped to a shared height: a crop would cut the readings
   off, and the readings are the point of the picture. */
.report-card__drawings { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-lg); }
.report-card__drawings img { display: block; height: auto; width: 100%; }
@media (max-width: 48rem) { .report-card__drawings { grid-template-columns: minmax(0, 1fr); } }

/* CAE, now that it has the row to itself: the clip beside its results, as the
   slide lays them out, stacking once the pair would be too narrow to read. */
/* A gallery tile is a button, so it needs the picture's own shape restated;
   the strip itself is the same three-to-a-row grid the default results use, and
   a fourth picture starts a second row rather than narrowing the first. */
.quality-thumbs .lightbox-trigger { background: none; border: 0; cursor: pointer; display: block; padding: 0; width: 100%; }
.quality-thumbs--gallery img { border-radius: var(--radius-sm); }
/* A clip with no poster frame has nothing to give the tile its height, so it
   keeps the same box as its neighbours instead of collapsing to its caption. */
.quality-thumbs .lightbox-video-thumb { aspect-ratio: 4 / 3; background: var(--color-navy); border-radius: var(--radius-sm); display: flex; min-height: 0; }
@media (max-width: 48rem) { .quality-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iso-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iso-card { align-items: center; display: grid; gap: var(--space-lg); grid-template-columns: 5rem minmax(0, 1fr); padding: var(--space-lg); }
.iso-mark { align-items: center; border: 0.35rem double var(--color-navy); border-radius: var(--radius-pill); color: var(--color-navy); display: flex; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; height: 5rem; justify-content: center; width: 5rem; }
.value-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.value-strip > div { padding: var(--space-lg); }
.value-strip > div + div { border-left: var(--rule-thin) solid var(--color-line); }
.value-strip strong { color: var(--color-navy); display: block; }
.evidence-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.evidence-item { background: none; border: 0; padding: 0; text-align: center; }
.evidence-item img { aspect-ratio: 4 / 3; border: var(--rule-thin) solid var(--color-line); border-radius: var(--radius-sm); object-fit: cover; transition: transform var(--dur-base) var(--ease-out); width: 100%; }
.evidence-item:hover img { transform: translateY(-2px); }
.evidence-item span { display: block; font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-xs); }

.glance-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.glance-card { align-items: center; display: flex; flex-direction: column; min-height: 10rem; padding: var(--space-lg) var(--space-sm); text-align: center; }
.glance-card strong { color: var(--color-navy); display: block; font-family: var(--font-display); font-size: var(--text-xl); margin-top: var(--space-xs); }
.timeline { display: flex; min-width: 70rem; padding: var(--space-lg) 0; position: relative; }
.timeline::before { background: var(--color-blue); content: ""; height: var(--rule-strong); left: 4rem; position: absolute; right: 4rem; top: 4.7rem; }
.timeline-item { flex: 1; min-width: 10rem; padding-inline: var(--space-sm); position: relative; text-align: center; }
.timeline-item::after { background: var(--color-paper); border: var(--rule-strong) solid var(--color-blue); border-radius: var(--radius-pill); content: ""; height: 0.8rem; left: calc(50% - 0.4rem); position: absolute; top: 2.95rem; width: 0.8rem; }
.timeline-item .line-icon { margin: 0 auto var(--space-lg); }
.timeline-item strong { color: var(--color-navy); display: block; font-size: var(--text-lg); }
.timeline-item p { color: var(--color-ink-soft); font-size: var(--text-xs); margin: var(--space-xs) 0 0; }
/* The diagram is a single wide picture (about 5:1). Below the width where its
   own lettering would drop under roughly 11px it is allowed to scroll sideways
   instead of shrinking further, which is the difference between a reader
   sliding a legible strip and squinting at 6px type. */
.network-figure { margin: 0; overflow-x: auto; }
.network-figure img { display: block; height: auto; margin: 0 auto; max-width: 100%; }
@media (max-width: 48rem) {
  .network-figure img { max-width: none; width: 40rem; }
}
.story-panel { display: grid; gap: var(--space-xl); grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-xl); }
.story-panel h3 { color: var(--color-navy); font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.story-panel p { color: var(--color-ink-soft); margin: 0; max-width: 34rem; }
.manufacturing-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.manufacturing-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.manufacturing-card__body { padding: var(--space-md); text-align: center; }
.manufacturing-card h3 { color: var(--color-navy); font-size: var(--text-base); }
.manufacturing-card p { color: var(--color-ink-soft); font-size: var(--text-xs); margin: 0; }
.cert-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cert-card { align-items: center; display: grid; gap: var(--space-lg); grid-template-columns: 8rem minmax(0, 1fr); padding: var(--space-lg); }
.cert-card img { max-height: 10rem; object-fit: contain; width: 100%; }

.map-placeholder { aspect-ratio: 4 / 3; background: linear-gradient(145deg, var(--color-paper-soft), var(--color-paper-blue)); border-radius: var(--radius-sm); margin-top: var(--space-md); overflow: hidden; position: relative; }
.map-placeholder::before, .map-placeholder::after { background: var(--color-line-strong); content: ""; height: var(--rule-thin); left: -10%; position: absolute; top: 50%; transform: rotate(-23deg); width: 120%; }
.map-placeholder::after { transform: rotate(32deg); }
.map-pin { align-items: center; background: var(--color-blue); border-radius: var(--radius-pill) var(--radius-pill) var(--radius-pill) 0; color: var(--color-paper); display: flex; height: 3rem; justify-content: center; left: 49%; position: absolute; top: 34%; transform: rotate(-45deg); width: 3rem; }
.map-pin span { transform: rotate(45deg); }
.map-label { background: var(--color-paper); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); font-size: var(--text-xs); left: 25%; padding: var(--space-sm); position: absolute; top: 51%; z-index: 1; }
.contact-map { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); margin-top: var(--space-md); overflow: hidden; }
.contact-map iframe { border: 0; display: block; height: 100%; width: 100%; }
.qr-placeholder { color: var(--color-navy); }
.rfq-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rfq-flow__item { padding: var(--space-md); position: relative; text-align: center; }
.rfq-flow__item + .rfq-flow__item::before { color: var(--color-line-strong); content: "→"; font-size: var(--text-2xl); left: -0.8rem; position: absolute; top: 2.5rem; }
.rfq-flow__icon { align-items: center; background: var(--color-paper-blue); border: var(--rule-thin) solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-navy); display: flex; font-family: var(--font-display); font-size: var(--text-xl); height: 5rem; justify-content: center; margin: 0 auto var(--space-md); width: 5rem; }
.rfq-flow p { color: var(--color-ink-soft); font-size: var(--text-sm); }

.cta-banner { align-items: center; background: var(--color-navy-deep); border-radius: var(--radius-md); color: var(--color-paper); display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1.4fr) auto; padding: var(--space-xl); }
.cta-banner--light { background: var(--color-paper-blue); border: var(--rule-thin) solid var(--color-line); color: var(--color-navy); }
.cta-banner h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.cta-banner p { margin: 0; }
.cta-banner__actions { display: flex; gap: var(--space-md); }

.site-footer { background: var(--color-navy-deep); color: var(--color-paper); padding-block: var(--space-lg); }
.site-footer__base { align-items: center; display: grid; gap: var(--space-lg); grid-template-columns: auto minmax(0, 1fr) auto; }
.site-footer .brand { width: 11rem; }
.site-footer small { color: var(--color-white-alpha); }
.footer-links { display: flex; gap: var(--space-lg); }
.footer-links a { font-size: var(--text-xs); white-space: nowrap; }
.footer-links a + a { border-left: var(--rule-thin) solid var(--color-white-alpha); padding-left: var(--space-lg); }

dialog { background: var(--color-paper); border: var(--rule-thin) solid var(--color-line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-card); color: var(--color-ink); max-height: 88vh; max-width: min(42rem, calc(100% - 2rem)); padding: 0; width: 100%; }
dialog::backdrop { background: var(--color-overlay); }
.dialog__header { align-items: center; border-bottom: var(--rule-thin) solid var(--color-line); display: flex; justify-content: space-between; padding: var(--space-lg); }
.dialog__header h2 { margin: 0; }
.dialog__close { align-items: center; background: var(--color-paper); border: var(--rule-thin) solid var(--color-line); border-radius: var(--radius-pill); display: flex; font-size: var(--text-lg); height: 2.5rem; justify-content: center; width: 2.5rem; }
.dialog__body { padding: var(--space-lg); }
.dialog__body img { max-height: 55vh; object-fit: contain; width: 100%; }
@keyframes oksan-fade-up { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 68rem) {
  .site-header__inner { gap: var(--space-sm); grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
  .site-nav a { padding-inline: 0.3rem; }
  .brand { width: 10.5rem; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .equipment-thumbs, .manufacturing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quality-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  .glance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 75rem) {
  .site-header__inner { grid-template-columns: minmax(9rem, 1fr) auto auto; }
  .site-header__quote { display: none; }
  .site-header__phone { display: none; }
  .menu-toggle { display: flex; }
  .site-nav { background: var(--color-paper); border-bottom: var(--rule-thin) solid var(--color-line); box-shadow: var(--shadow-card); flex-direction: column; height: auto; left: 0; opacity: 0; padding: var(--space-md); pointer-events: none; position: absolute; right: 0; top: var(--header-height); transform: translateY(-0.75rem); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  .site-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-nav a { min-height: 3rem; padding-inline: var(--space-md); }
  .site-nav a::after { bottom: 0.15rem; }
  .feature-grid, .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-strip, .value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3)::before, .value-strip > div:nth-child(3) { border-left: 0; }
  .tabs { display: flex; overflow-x: auto; padding-bottom: var(--space-xs); }
  .tab { flex: 0 0 auto; }
  .product-grid, .product-grid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-panel, .detail-panel, .equipment-layout, .story-panel { grid-template-columns: minmax(0, 1fr); }
  .product-detail-layout, .product-detail-content { grid-template-columns: minmax(0, 1fr); }
  .split-panel > * + * { border-left: 0; border-top: var(--rule-thin) solid var(--color-line); }
  .featured-equipment { position: static; }
  .equipment-bottom { grid-template-columns: minmax(0, 1fr); }
  .cert-grid, .iso-grid { grid-template-columns: minmax(0, 1fr); }
  .evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta-banner { grid-template-columns: minmax(0, 1fr); }
  .cta-banner__actions { flex-wrap: wrap; }
  .site-footer__expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  :root { --header-height: 4rem; }
  .container { width: min(calc(100% - 1.25rem), var(--container)); }
  .section { padding-block: var(--space-xl); }
  .site-header__inner { grid-template-columns: minmax(7rem, 1fr) auto auto; }
  .brand { width: 8.5rem; }
  .language-demo { display: flex; }
  .language-demo ul { gap: 0.1rem; }
  .language-switcher a { font-size: 0.68rem; padding-inline: 0.12rem; }
  .hero, .hero__content { min-height: 27rem; }
  .hero::after { background: linear-gradient(90deg, var(--color-overlay), var(--color-overlay)); }
  .hero__content { justify-content: flex-end; }
  .hero h1 { font-size: clamp(2.1rem, 10vw, 3.1rem); }
  .hero__lede { font-size: var(--text-base); }
  .hero__actions { align-items: stretch; flex-direction: column; width: 100%; }
  .feature-grid, .proof-grid, .product-grid, .product-grid--large, .equipment-thumbs, .glance-grid, .manufacturing-grid, .quality-steps, .evidence-grid { grid-template-columns: minmax(0, 1fr); }
  .related-products { grid-template-columns: minmax(0, 1fr); }
  .section-heading-row { align-items: flex-start; flex-direction: column; gap: var(--space-sm); }
  .product-detail-summary h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
  .product-detail-facts { grid-template-columns: minmax(0, 1fr); }
  .feature-card { grid-template-columns: minmax(6.5rem, 0.8fr) minmax(0, 1.3fr); }
  .stats-strip, .value-strip { grid-template-columns: minmax(0, 1fr); }
  .stat { align-items: flex-start; justify-content: flex-start; min-height: 0; padding: var(--space-md) var(--space-lg); }
  .stat__mark { flex: 0 0 3rem; }
  .stat strong { font-size: clamp(1.15rem, 5vw, 1.5rem); line-height: 1.1; overflow-wrap: anywhere; }
  .stat span { line-height: 1.35; }
  .stat + .stat::before, .value-strip > div + div { height: var(--rule-thin); left: 10%; top: 0; width: 80%; }
  .process-step { flex-basis: 7rem; min-width: 7rem; }
  .rfq-form { grid-template-columns: minmax(0, 1fr); }
  .field, .field--full, .project-types, .security-note, .rfq-form .btn[type="submit"], .form-status { grid-column: 1; }
  .project-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-card { grid-template-columns: minmax(0, 1fr); }
  .equipment-card > img { min-height: 13rem; }
  .quality-step h3 { min-height: 0; }
  .cert-card { grid-template-columns: 5rem minmax(0, 1fr); }
  .site-footer__base { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .site-footer .brand { margin-inline: auto; }
  .footer-links { justify-content: center; }
  .site-footer__expanded { grid-template-columns: minmax(0, 1fr); }
  .rfq-flow { grid-template-columns: minmax(0, 1fr); }
  .rfq-flow__item + .rfq-flow__item::before { content: "↓"; left: 50%; top: -1rem; transform: translateX(-50%); }
  .cta-banner__actions { align-items: stretch; flex-direction: column; }
  .logo-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
}

/* Equipment and project catalogues use the established OKSAN studied-DNA tokens and supplied industrial media. */
.equipment-process-section { border-bottom: var(--rule-thin) solid var(--color-line); }
.process-rail--equipment { justify-content: center; margin: 0; list-style: none; min-width: 100%; padding: var(--space-sm) 0; }
.process-rail--equipment .process-step { flex-basis: 8.6rem; }
.catalogue-section { overflow: clip; }
.catalogue-heading { margin-bottom: var(--space-xl); text-align: center; }
.catalogue-heading > p:last-child { color: var(--color-muted); margin: 0 auto; max-width: 42rem; }
/* The reference sets this one heading in title case, unlike every other section. */
.section-heading--plain { text-transform: none; }
.eyebrow--ruled { align-items: center; display: flex; gap: var(--space-md); justify-content: center; }
.eyebrow--ruled::before, .eyebrow--ruled::after { background: var(--color-line); content: ""; flex: 0 0 2.5rem; height: var(--rule-thin); }
.catalogue-heading .section-heading { margin-bottom: var(--space-sm); }
.capability-masonry, .project-masonry { column-count: 3; column-gap: var(--space-md); }
.capability-card, .project-card { break-inside: avoid; display: inline-block; margin-bottom: var(--space-md); vertical-align: top; width: 100%; }
.capability-card__link, .project-card__link { display: block; height: 100%; }
.capability-card__media, .project-card__media { background: var(--color-paper-soft); display: grid; gap: var(--rule-thin); grid-template-columns: minmax(0, 1fr); overflow: hidden; position: relative; }
.capability-card__media img, .project-card__media img { display: block; min-height: 12rem; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); width: 100%; }
.capability-card__media img + img, .project-card__media img + img { min-height: 7rem; }
.capability-card:hover img, .project-card:hover img { transform: scale(1.025); }
.capability-card:nth-child(3n + 2) .capability-card__media img:first-child, .project-card:nth-child(3n + 2) .project-card__media img:first-child { min-height: 18rem; }
.capability-card__video { align-items: center; background: var(--color-navy); bottom: var(--space-sm); color: var(--color-paper); display: inline-flex; font-size: var(--text-xs); font-weight: 700; gap: var(--space-xs); left: var(--space-sm); min-height: 2.2rem; padding: var(--space-xs) var(--space-sm); position: absolute; }
.capability-card__body, .project-card__body { padding: var(--space-md); }
.capability-card__body .eyebrow, .project-card__body .eyebrow { color: var(--color-muted); font-size: var(--text-xs); margin-bottom: var(--space-xs); }
.capability-card__body h3, .project-card__body h3 { color: var(--color-navy); font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.capability-card__body p:not(.eyebrow), .project-card__body p:not(.eyebrow) { color: var(--color-ink-soft); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.capability-card__body .text-link, .project-card__body .text-link { display: inline-flex; }
.product-spec-list { display: grid; gap: var(--space-sm); margin: 0; }
.product-spec-list > div { border-top: var(--rule-thin) solid var(--color-line); display: grid; gap: var(--space-2xs); padding-top: var(--space-sm); }
.product-spec-list > div:first-child { border-top: 0; padding-top: 0; }
.product-spec-list dt { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.product-spec-list dd { color: var(--color-navy); font-size: var(--text-sm); font-weight: 700; margin: 0; }
.catalogue-section .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.detail-media-masonry { column-count: 3; column-gap: var(--space-sm); margin-top: var(--space-sm); }
.detail-media-masonry .lightbox-trigger { break-inside: avoid; border: var(--rule-thin) solid var(--color-line); display: inline-flex; margin-bottom: var(--space-sm); overflow: hidden; vertical-align: top; }
.detail-media-masonry img { display: block; min-height: 7rem; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); width: 100%; }
.detail-media-masonry .lightbox-trigger:hover img { transform: scale(1.04); }
.detail-media-masonry .lightbox-video-thumb { min-height: 8rem; width: 100%; }

@media (max-width: 68rem) {
  .catalogue-section .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capability-masonry, .project-masonry { column-count: 2; }
}

@media (max-width: 75rem) {
  .process-rail--equipment { justify-content: flex-start; }
  .catalogue-section .tabs { display: flex; }
}

@media (max-width: 40rem) {
  .capability-masonry, .project-masonry { column-count: 1; }
  .capability-card__media, .project-card__media { grid-template-columns: minmax(0, 1fr); }
  .capability-card__media img, .project-card__media img, .capability-card:nth-child(3n + 2) .capability-card__media img:first-child, .project-card:nth-child(3n + 2) .project-card__media img:first-child { min-height: 14rem; }
  .detail-media-masonry { column-count: 2; }
}

/* Equipment reference layout: capability cards at left, featured heat treatment at right. */
.equipment-reference-section { background: var(--color-paper); }
.equipment-reference-layout { align-items: start; display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.95fr); }
.equipment-reference-stack { display: grid; gap: var(--space-md); }
.equipment-spec-card__link { align-items: stretch; display: grid; grid-template-columns: minmax(11rem, 0.92fr) minmax(0, 1.08fr); height: 100%; }
.equipment-spec-card__link > img { height: 100%; min-height: 13rem; object-fit: cover; width: 100%; }
.equipment-spec-card__link > div { padding: var(--space-md); }
.equipment-spec-card h2, .equipment-bottom-card h2 { color: var(--color-navy); font-size: var(--text-lg); margin-bottom: var(--space-sm); text-transform: uppercase; }
.equipment-spec-card .text-link, .equipment-bottom-card .text-link, .featured-equipment--reference .text-link { display: inline-flex; margin-top: var(--space-sm); }
.featured-equipment--reference { margin: 0; padding: var(--space-lg); }
.featured-equipment--reference h2 { font-size: var(--text-lg); }
.featured-equipment__heading { align-items: flex-start; display: flex; gap: var(--space-sm); justify-content: space-between; }
.equipment-badge { background: var(--color-paper); color: var(--color-navy); flex: 0 0 2.1rem; padding: var(--space-2xs); width: 2.1rem; }
.featured-equipment--reference .spec-table th { color: var(--color-paper); }
.featured-equipment--reference .text-link { color: var(--color-paper); }
.equipment-bottom-reference { display: grid; gap: var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-lg); }
.equipment-bottom-card { padding: var(--space-md); }
.equipment-bottom-card > a { display: block; height: 100%; }
.equipment-bottom-card img { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); object-fit: cover; width: 100%; }
.equipment-stock-card { background: var(--color-paper-soft); }
.equipment-stock-card p { color: var(--color-ink-soft); font-size: var(--text-sm); margin: var(--space-md) 0; }
.equipment-stock-card strong { color: var(--color-navy); display: block; line-height: 1.25; }
.equipment-cta { grid-template-columns: auto minmax(0, 1.1fr) auto; }
.equipment-cta__icon { color: var(--color-paper); height: 4.5rem; width: 6rem; }
.stat__icon { height: 1.65rem; width: 1.65rem; }
.contact-list__icon { flex: 0 0 2rem; padding: 0.42rem; }
.map-pin__icon { height: 1.45rem; transform: rotate(45deg); width: 1.45rem; }
.rfq-flow__icon { padding: 1.25rem; }

/* Reference icon proportions and explicit SVG paint, including external symbols. */
svg.oksan-icon, svg.line-icon, svg.equipment-badge, svg.equipment-cta__icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.process-step + .process-step::before { left: 0; margin-left: 0; transform: translate(-50%, 1rem); }
.rfq-flow__icon { padding: .9rem; }
.icon-copy { display: flex; align-items: center; gap: var(--space-lg); }
.icon-copy > .oksan-icon { width: 3.5rem; height: 3.5rem; }
.icon-copy > div { min-width: 0; }
.oksan-icon { object-fit: contain; flex-shrink: 0; }
.proof-mark.oksan-icon { width: 3rem; height: 3rem; }
.stat__mark.oksan-icon, .stat__mark:has(.oksan-icon) { border: 0; border-radius: 0; padding: 0; }
/* A replacement picture is an <img> carrying its own width attribute, so the
   circle's height alone does not hold it: without a width it stretches to the
   uploaded size and squeezes the figure beside it. */
.stat__mark.oksan-icon { flex: 0 0 3rem; height: 3rem; width: 3rem; }
.stat__icon { height: 2.75rem; width: 2.75rem; }
.process-step .line-icon { height: 3.5rem; width: 3.5rem; }
.tab__icon { width: 1.65rem; height: 1.65rem; }
.equipment-badge { background: transparent; color: var(--color-paper); padding: 0; width: 2.25rem; height: 2.75rem; }
.equipment-stock-card .oksan-icon { float: left; width: 3rem; height: 3rem; margin: var(--space-md) var(--space-sm) 0 0; color: var(--color-navy); }
.process-rail--equipment .process-step { flex: 1 0 0; min-width: 0; }
.process-rail--equipment .process-step + .process-step::before { left: 0; margin-left: 0; transform: translate(-50%, 1rem); }
@media (max-width: 75rem) { .process-rail--equipment .process-step { flex: 0 0 7rem; } }
@media (max-width: 75rem) { .equipment-cta__icon { display: block; width: 5rem; height: 4rem; } }

/* Project cards return to a consistent equal-height grid on the archive page. */
.project-grid-reference { align-items: stretch; display: grid; gap: var(--space-md); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-grid-reference .project-card { break-inside: auto; display: flex; margin-bottom: 0; }
.project-grid-reference .project-card__link { display: flex; flex-direction: column; width: 100%; }
.project-grid-reference .project-card__media { flex: 0 0 auto; }
.project-grid-reference .project-card__body { display: flex; flex: 1; flex-direction: column; }
.project-grid-reference .project-card__body .text-link { margin-top: auto; }

@media (max-width: 68rem) { .project-grid-reference { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .project-grid-reference { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 75rem) {
  .equipment-reference-layout { grid-template-columns: minmax(0, 1fr); }
  .equipment-bottom-reference { grid-template-columns: minmax(0, 1fr); }
  .featured-equipment--reference { position: static; }
  .equipment-cta { grid-template-columns: minmax(0, 1fr); }
  .equipment-cta__icon { display: none; }
}

/* WordPress editor gallery selector. */
.oksan-gallery-admin { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0; }
.oksan-gallery-admin img { height: 4rem; object-fit: cover; width: 4rem; }

@media (max-width: 40rem) {
  .equipment-spec-card__link { grid-template-columns: minmax(0, 1fr); }
  .equipment-spec-card__link > img { min-height: 12rem; }
}

/* Contrast corrections verified against the desktop reference preview. */
.hero .eyebrow { color: var(--color-paper); }
.featured-equipment .spec-table th { color: var(--color-paper); }

/* Home: 6-step quality strip and 8-column product category tabs. */
.process-rail--numbered { justify-content: space-between; margin-bottom: var(--space-lg); min-width: 100%; padding: var(--space-lg) var(--space-sm); }
.process-rail--numbered .process-step { flex-basis: 9rem; gap: var(--space-sm); }
.home-product-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .process-rail--numbered { justify-content: flex-start; min-width: max-content; }
  .home-product-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .home-product-tabs { display: flex; overflow-x: auto; padding-bottom: var(--space-xs); }
  .home-product-tabs .tab { flex: 0 0 auto; }
}

/* Reference grid: uniform card media, overriding the masonry variation above. */
.project-grid-reference .project-card__media img,
.project-grid-reference .project-card:nth-child(3n + 2) .project-card__media img:first-child { aspect-ratio: 16 / 10; min-height: 0; }
.line-badge--link { text-decoration: none; transition: opacity 0.15s ease; }
.line-badge--link:hover, .line-badge--link:focus-visible { opacity: 0.75; text-decoration: underline; }
/* The first frame leads, as the handoff deck draws this section. */