/* =========================================================================
   J.C FILTER SOLUTIONS - TECHWEAR ARCTIC EDITION (B2B STRUCTURAL PRESERVATION)
   ========================================================================= */

:root {
    /* Brand Colors - Based on J.C. Logo (lightened per review 29.07) */
    --bg-slate: #0B3055; /* Azul Marino, un punto más claro */
    --bg-darker: #082744; /* Slightly darker naval blue */
    --bg-darkest: #061E35; /* Darkest */
    --bg-card: rgba(0, 206, 209, 0.08); /* Slight turquoise tint for cards */

    --text-pure: #ffffff; /* Blanco */
    --text-silver: #F8F9FA; /* Gris Muy Claro */
    --text-muted: #DCE6F0; /* Gris Medio-Claro, más legible */
    --text-dark: #121921;

    --brand-turquoise: #00CED1; /* Azul Turquesa Brillante */
    --brand-lime: #BFFF00; /* Amarillo Lima (CTA Fresco) */
    --brand-gold: #DAA520; /* Oro/Amarillo Mostaza (CTA Calidad) */
    --brand-cyan: #00BFFF; /* Cian Profundo (Enlaces) */
    --brand-alert: #FF6B5A; /* Rojo coral: campos de formulario sin rellenar o mal rellenados */
    
    --font-heading: 'Oswald', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --font-body: 'Inter', sans-serif;

    --border-dim: rgba(0, 206, 209, 0.3); /* Líneas Divisoras: Turquesa en baja opacidad */
    --border-light: rgba(0, 206, 209, 0.55);

    --transition: all 0.3s ease-in-out;

    /* Solution cards and their thumbnails */
    --thumb-ratio: 4 / 3;
    --caption-min-h: 4.25rem; /* three lines of a 12px caption plus its padding */
    --chamfer: 48px;          /* fixed cut, so every card shows the same angle */
    --card-gap: 1.5rem;
    
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 90px; }

/* clip, not hidden: hidden turns body into a scroll container and breaks position: sticky */
html, body { overflow-x: clip; }
body {
    background-color: var(--bg-slate);
    color: var(--text-pure);
    font-family: var(--font-body);
}

a { text-decoration: none; color: var(--brand-cyan); transition: var(--transition); }
a:hover { color: var(--brand-lime); }
img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 5%; }
.text-center { text-align: center; }
.bg-light { background-color: var(--bg-darker); }
.section-padding { padding: 6rem 0; }
/* Two sections on the same background read as one: don't stack both paddings (Sterile -> Equipment) */
.bg-light.section-padding + .bg-light.section-padding { padding-top: 0; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    color: var(--text-pure);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

h2 { font-size: 3.5rem; margin-bottom: 1.5rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.5rem; letter-spacing: 0.05em; }

/* Running text in Inter, sentence case. Space Mono + capitals is kept for labels, badges, dt and buttons. */
p { font-family: var(--font-body); font-size: 1rem; color: var(--text-silver); line-height: 1.6; margin-bottom: 1rem; }
.nowrap { white-space: nowrap; }
.no-caps { text-transform: none; }

/* Utilities */
.btn {
    display: inline-flex; justify-content: center; align-items: center;
    padding: 0.75rem 2rem; font-family: var(--font-mono); font-size: 0.8125rem;
    font-weight: 700; border-radius: 0; text-transform: uppercase;
    transition: var(--transition); cursor: pointer; letter-spacing: 0.1em;
}
.btn-lg { padding: 1rem 2.5rem; }
.btn-emerald { background: rgba(6, 30, 53, 0.55); border: 1px solid var(--brand-turquoise); color: var(--brand-turquoise); }
.btn-emerald:hover { background: var(--brand-lime); border-color: var(--brand-lime); color: var(--bg-darkest); }
.btn-outline { background: rgba(0,0,0,0.2); border: 1px solid var(--border-dim); color: var(--text-pure); }
.btn-outline:hover { border-color: var(--text-pure); }
.btn-full { width: 100%; }

.accent-line, .accent-line.center { display: none; } /* Remove colorful accents */

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-dim);
    border-top: none; padding: 3rem;
    position: relative; overflow: hidden;
}
/* Fake tech annotations on cards */
.glass-card::before {
    content: '[ SYS_DATA ]'; position: absolute; top: 1rem; right: 1.5rem;
    font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-muted);
}

.badge {
    background: var(--brand-gold); color: var(--bg-darkest); font-weight: bold;
    padding: 0.25rem 0.6rem; font-family: var(--font-mono); line-height: 1rem;
    font-size: 0.6875rem; border-radius: 0; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Keyboard users: skip the navigation, and always see where the focus is */
.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 2000;
    background: var(--brand-turquoise); color: var(--bg-darkest);
    padding: 0.75rem 1.2rem; font-family: var(--font-mono); font-size: 0.8125rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.skip-link:focus { top: 1rem; color: var(--bg-darkest); }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand-turquoise); outline-offset: 3px; }
/* clip-path would cut an outside outline off, so these get it drawn inside */
.industry-card:focus-visible, .client-logo:focus-visible, .solution-card:focus-visible,
.gallery-item:focus-visible { outline-offset: -4px; }

/* Navbar */
.navbar {
    position: fixed; top: 0; width: 100%; z-index: 1000; height: 76px;
    display: flex; align-items: center; border-bottom: 1px solid var(--border-dim);
    background: linear-gradient(180deg, rgba(6, 30, 53, 0.92) 0%, rgba(6, 30, 53, 0.55) 100%);
    transition: var(--transition);
}
.navbar.scrolled {
    background: rgba(6, 30, 53, 0.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.logo img {
    height: 56px;
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
}
.logo-text { display: flex; flex-direction: column; justify-content: center; }
/* The globe Jan puts on every logo (23.09), cut from his e-mail signature */
.logo .logo-globe { height: 40px; width: auto; }
.logo-title { font-family: var(--font-heading); font-size: 1.6rem; letter-spacing: 2px; line-height: 1.1; color: var(--text-pure); white-space: nowrap; }
.logo-sub { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 4px; color: var(--text-silver); }
.mobile-menu-btn {
    display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--border-dim); color: var(--text-pure);
    font-size: 1.5rem; padding: 0; cursor: pointer; transition: var(--transition); border-radius: 0;
}
.mobile-menu-btn:hover { background: var(--text-pure); color: var(--bg-darkest); }
.nav-links { display: flex; gap: 1.1rem; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
.nav-links .btn { padding: 0.6rem 1.2rem; }
.nav-links a:not(.btn) { font-family: var(--font-mono); font-size: 0.8125rem; white-space: nowrap; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; }
.nav-links a:not(.btn):hover, .navbar.scrolled .nav-links a:not(.btn):hover { color: var(--brand-turquoise); }

.lang-switcher { display: flex; gap: 0.8rem; margin-left: 0.3rem; border-left: 1px solid var(--border-dim); padding-left: 1.1rem; }
.lang-switcher a { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); opacity: 0.6; transition: var(--transition); letter-spacing: 1px; text-decoration: none; }
.lang-switcher a:hover, .lang-switcher a.active { color: var(--text-pure); opacity: 1; }

/* Hero */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 10vh; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(55%) contrast(1.08) brightness(0.78); }
.hero-overlay {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(6, 30, 53, 0.80) 0%, rgba(6, 30, 53, 0.35) 55%, rgba(6, 30, 53, 0.15) 100%),
        linear-gradient(180deg,
            rgba(6, 30, 53, 0.85) 0%,
            rgba(9, 40, 70, 0.58) 30%,
            rgba(6, 30, 53, 0.80) 100%);
}
.hero-text-box {
    max-width: 1000px; color: var(--text-pure);
    background: transparent; border: none; padding: 0;
}
.hero-title { font-size: 5vw; line-height: 1.02; letter-spacing: -0.01em; margin-bottom: 2rem; text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.hero-title .hero-line { display: block; }
.hero-title .hero-amp {
    display: block; color: var(--brand-turquoise);
    font-size: 1em; line-height: 1.1; margin: 0.05em 0 0.05em 0.15em;
}
.hero-subtitle { font-family: var(--font-body); color: var(--text-pure); font-size: 1.1rem; line-height: 1.7; max-width: 700px; margin-bottom: 3rem; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }

/* About */
.about { position: relative; }
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: center; }
.highlight-text { font-size: 0.9rem; color: var(--text-pure); border-top: 1px solid var(--border-dim); padding-top: 2rem; margin-top: 2rem; }

/* "HQ filter solutions, by combining ..." block */
.combine-block { border-top: 1px solid var(--border-dim); padding-top: 2rem; margin-top: 2rem; }
/* Lead, list and foot read as one sentence: the list and its last line share one indent */
.combine-lead { font-size: 1.1rem; color: var(--text-pure); margin-bottom: 0.6rem; }
.combine-list { list-style: none; padding: 0 0 0 1rem; margin: 0; }
.combine-list li { font-size: 1.05rem; color: var(--brand-turquoise); line-height: 1.7; }
.combine-list li:last-child { color: var(--text-silver); }
.combine-foot { font-size: 1.05rem; color: var(--text-silver); margin: 0; padding-left: 1rem; }

.about-visual { display: flex; justify-content: center; align-items: center; }
.experience-shield {
    width: 100%; max-width: 340px; height: auto;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
}

/* Industries Grid - icon buttons; on hover the icon grows and the name slides in underneath (Jan, 15.09) */
/* 11 icons laid out symmetrically (Jan, 17.09): 6-5 on desktop, 4-3-4 on tablet, 2 per row + 1 centred on phones.
   Each card spans 2 tracks of a 12 (or 8 / 4) track grid; nudging the first card of a short row by one track centres it. */
.industries-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-top: 3rem; }
.industry-card { grid-column: span 2; }
.industry-card:nth-child(7) { grid-column: 2 / span 2; }
.industry-card {
    background: var(--bg-card); padding: 1.5rem 0.75rem; border-radius: 0;
    text-align: center; border: 1px solid var(--border-dim); transition: var(--transition);
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 176px; cursor: pointer;
}
.industry-card img,
.industry-card .industry-icon {
    width: 78px; height: 78px; object-fit: contain;
    transition: transform 0.35s ease-out; will-change: transform;
}
.industry-card .industry-icon { fill: var(--brand-turquoise); }
.industry-card .industry-name {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0.6rem 0.5rem; background: var(--brand-turquoise); color: var(--bg-darkest);
    font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.3;
    opacity: 0; transform: translateY(100%); transition: var(--transition); pointer-events: none;
}
.industry-card:hover, .industry-card:focus-visible { transform: translateY(-5px); border-color: var(--brand-turquoise); z-index: 2; }
/* Lift the icon so the enlarged artwork clears the name band */
.industry-card:hover img, .industry-card:hover .industry-icon,
.industry-card:focus-visible img, .industry-card:focus-visible .industry-icon { transform: translateY(-20px) scale(1.4); }
.industry-card:hover .industry-name,
.industry-card:focus-visible .industry-name { opacity: 1; transform: translateY(0); }
/* No hover on touch screens, and small tiles: the name is always shown, the icon sits above it */
@media (hover: none), (max-width: 1024px) {
    .industry-card { padding-bottom: 3.4rem; }
    .industry-card .industry-name { opacity: 1; transform: none; }
    .industry-card:hover, .industry-card:focus-visible { transform: none; }
    .industry-card:hover img, .industry-card:hover .industry-icon,
    .industry-card:focus-visible img, .industry-card:focus-visible .industry-icon { transform: none; }
}

/* Pending-asset notes (visible reminder, low key) */
.pending-note {
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);
    opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em;
    margin-top: 1.5rem; text-align: center;
}
.pending-note.inline { text-align: left; margin-top: 1rem; }
.pending-note code { font-family: var(--font-mono); color: var(--brand-turquoise); }

/* Solutions Grid */
/* align-items: start so a short card is not stretched to its neighbour's height */
.solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); margin-top: 3rem; align-items: start; }
.solution-card {
    background: var(--bg-card); padding: 2.5rem 2rem; border-radius: 0; border: 1px solid var(--border-dim);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
    display: flex; flex-direction: column; position: relative; overflow: hidden;
    transition: var(--transition);
}
.solution-card.has-bg::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: url('images/filters/tailormade-bg.png') center/cover no-repeat;
    opacity: 0.10; filter: grayscale(35%);
    pointer-events: none;
}
/* Card order: badge + title, then the pictures, then lists and specs */
.solution-head .badge { display: inline-block; margin-bottom: 1rem; }
.solution-head h3 { font-size: 1.8rem; margin-bottom: 1.5rem; }
.solution-card > * { position: relative; z-index: 1; }
.solution-card:hover { transform: translateY(-5px); }

/* Product thumbnails inside a solution card. Flex, not grid, so an odd last thumb is centred
   at the same width as the others instead of being left hanging on the left. */
.solution-thumbs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 2rem;
}
.solution-thumbs .thumb {
    flex: 0 1 calc((100% - 0.75rem) / 2); min-width: 0;
    margin: 0; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-dim);
    padding: 0; text-align: center; transition: var(--transition); overflow: hidden;
}
.solution-thumbs .thumb img {
    display: block; width: 100%; height: 115px; object-fit: contain;
    background: #ffffff; padding: 0.5rem;
    transition: transform 0.5s ease-out;
}
/* A panoramic shot (e.g. a full product range) gets the whole card width, by content, not to fill a gap */
.solution-thumbs .thumb.wide { flex-basis: 100%; }
.solution-thumbs .thumb.wide img { height: 150px; object-fit: contain; }
.solution-thumbs .thumb:hover { border-color: var(--border-light); }
.solution-thumbs .thumb:hover img { transform: scale(1.06); }
.solution-thumbs figcaption {
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.4;
    padding: 0.55rem 0.4rem;
}
/* A feature card spans the whole grid: thumbs on the left, title and text on the right (the hydrogen block).
   The same layout is reused for an odd last card in a two-column grid (see the 769-1024px block). */
.solution-card.feature-card {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "thumbs head" "thumbs content" "toggle content"; grid-template-rows: auto auto 1fr;
    column-gap: 3rem; align-items: start;
}
.solution-card.feature-card .solution-head { grid-area: head; }
.solution-card.feature-card .solution-thumbs { grid-area: thumbs; margin-bottom: 0; }
.solution-card.feature-card .solution-content { grid-area: content; }
.solution-card.feature-card .solution-thumbs .thumb.wide img { height: 220px; }
.solution-card.feature-card .solution-thumbs .thumb img { height: 140px; }
.border-emerald { background: rgba(255,255,255,0.07); border: 1px solid var(--border-light); }
.solution-content ul { list-style: square; padding-left: 1.1rem; margin-top: 0; }
.solution-content li { font-size: 0.9375rem; color: var(--text-silver); margin-bottom: 0.7rem; line-height: 1.6; }
.solution-content .sub-list { list-style: '– '; margin-top: 0.5rem; padding-left: 0.9rem; }
.solution-content .sub-list li { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 0.4rem; }
/* Plain digits as super/subscripts (Jan, 16.09: the ³ glyph read badly) */
.solution-content sup, .solution-content sub { font-size: 0.75em; line-height: 0; }

/* Technical spec pairs inside a solution card */
.spec-list {
    margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border-dim);
    display: flex; flex-direction: column; gap: 0.8rem;
}
.spec-list > div { display: flex; flex-direction: column; gap: 0.2rem; }
.spec-list dt {
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--brand-turquoise);
    text-transform: uppercase; letter-spacing: 0.1em;
}
.spec-list dd {
    margin: 0; font-size: 0.9375rem;
    color: var(--text-silver); line-height: 1.5;
}

/* Sterile Air, Steam & Liquid Filtration */
.sterile .section-header p { max-width: 720px; margin-left: auto; margin-right: auto; }
/* Most sterile products are white or polished steel: a plain white plate washes them out */
.sterile .solution-thumbs .thumb img { background: #EEF2F5; }
/* Spec pairs in two columns inside a horizontal card */
.feature-card .spec-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
@media (max-width: 768px) {
    .feature-card .spec-list { grid-template-columns: 1fr; }
}
/* Filter Spares: the two cartridges the spec list describes sit right above that list (Jan, 18.09) */
.solution-content .spares-thumbs { margin-bottom: 1.5rem; }

.applications-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    margin-top: 3rem; border-top: 1px solid var(--border-dim); padding-top: 3rem;
}
.application-block h4 {
    font-family: var(--font-heading); font-size: 1.1rem; color: var(--brand-turquoise);
    letter-spacing: 0.06em; margin-bottom: 1.2rem;
}
.tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-list li {
    border: 1px solid var(--border-dim); background: rgba(255, 255, 255, 0.05);
    color: var(--text-silver); padding: 0.35rem 0.8rem;
    font-family: var(--font-mono); font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

/* PDF Gallery */
.pdf-gallery { border-top: 1px solid var(--border-dim); margin-top: 4rem; padding-top: 3rem; }
.pdf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pdf-item { background: transparent; padding: 0; border: none; border-radius: 0; }
.pdf-placeholder {
    width: 100%; height: 220px; background: #FFFFFF; overflow: hidden;
    color: var(--text-muted); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 0.8rem; margin-bottom: 1rem;
    border: 1px solid var(--border-dim); letter-spacing: 2px; transition: var(--transition);
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
}
.pdf-placeholder img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
    transition: transform 0.5s ease-out;
}
.pdf-item a:hover .pdf-placeholder img { transform: scale(1.04); }
.pdf-name { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-pure); text-transform: uppercase; display: block; text-align: center; }
.pdf-item a { text-decoration: none; display: block; }
.pdf-item a:hover .pdf-placeholder { background: var(--text-pure); color: var(--bg-darkest); }

/* Equipment */
.equipment-header { border-top: none; background: transparent; padding: 2.5rem 3rem; margin-bottom: 4rem; }
.certs { border-top: 1px solid var(--border-dim); margin-top: 2rem; padding-top: 2rem; }
.certs strong { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-pure); text-transform: uppercase; font-weight: 400; }
.cert-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.cert-tags span { background: transparent; border: 1px solid var(--border-dim); color: var(--text-silver); padding: 0.3rem 0.8rem; font-family: var(--font-mono); font-size: 0.75rem; border-radius: 0; letter-spacing: 0.1em; }

.how-block { border-top: 1px solid var(--border-dim); margin-top: 2rem; padding-top: 2rem; }
.how-block strong { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-pure); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 400; }
.how-list { list-style: '– '; padding-left: 1rem; margin-top: 1rem; }
.how-list li { font-size: 0.9375rem; color: var(--text-silver); line-height: 1.6; margin-bottom: 0.5rem; }

.equip-category { margin-bottom: 5rem; }
.equip-category .sub-heading { font-size: 1.15rem; margin-top: 3rem; color: var(--brand-turquoise); }
.equip-category p.subtitle { color: var(--text-muted); margin-bottom: 1.5rem; }
/* 3 per row on desktop so the 3- and 5-photo sets land as 3 and 3+2; an incomplete last row is centred */
.equip-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.gallery-item {
    flex: 0 1 calc((100% - 2 * 1.5rem) / 3); min-width: 0;
    height: 250px; border-radius: 0; 
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); 
    background: var(--bg-darker); position: relative; 
    display: flex; flex-direction: column; overflow: hidden;
}
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(25%) contrast(1.05) brightness(1.05);
    position: absolute; top: 0; left: 0; z-index: 0;
    transition: transform 0.5s ease-out, filter 0.5s ease, opacity 0.5s ease;
}
.gallery-item:hover img {
    filter: grayscale(0%) contrast(1.05);
    mix-blend-mode: normal;
    opacity: 1;
    transform: scale(1.08);
}
.gallery-item .caption { 
    background: rgba(6, 30, 53, 0.88); font-family: var(--font-mono);
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; 
    padding: 1rem; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; box-sizing: border-box;
}

/* Logos */
.references { background: var(--bg-darkest); padding: 4rem 0; }
.references h2 { text-align: center; margin-bottom: 0.5rem; }
.references p { text-align: center; margin-bottom: 4rem; }
.client-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* Emblem buttons: logo visible, company name on hover */
.client-logo {
    position: relative; width: 172px; height: 86px;
    border: 1px solid var(--border-dim); background: #FFFFFF;
    display: flex; align-items: center; justify-content: center; padding: 0.9rem;
    transition: var(--transition);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    cursor: default;
}
/* The tile has a fixed size and the image fills it, so nothing moves when a lazy logo arrives */
.client-logo img { width: 100%; height: 100%; object-fit: contain; transition: var(--transition); }
.client-logo .client-name {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 0.5rem; text-align: center;
    background: var(--brand-turquoise); color: var(--bg-darkest);
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.3;
    opacity: 0; transition: var(--transition); pointer-events: none;
}
.client-logo:hover { border-color: var(--brand-turquoise); }
.client-logo:hover .client-name { opacity: 1; }

/* Safety net if an emblem file is ever missing: show the name plate instead */
.client-logo.no-logo { background: rgba(255, 255, 255, 0.05); }
.client-logo.no-logo img { display: none; }
.client-logo.no-logo .client-name {
    opacity: 1; background: transparent; color: var(--text-silver); font-weight: 400;
}
.client-logo.no-logo:hover .client-name { background: var(--brand-turquoise); color: var(--bg-darkest); }

/* Form Area */
.contact { background: var(--bg-darker); }
.contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; }
.contact-info { padding: 3rem 2rem; }
.contact-info h2 { font-size: 2.2rem; line-height: 1.1; margin-bottom: 2rem; }
.expert-profile h3 { font-size: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-bottom: 2rem; }
.expert-profile .badge { margin: 0; }
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.contact-list li { display: flex; flex-direction: column; gap: 0.3rem; border-bottom: 1px solid var(--border-dim); padding-bottom: 1rem; color: var(--text-silver); font-size: 0.9rem; }
.contact-list li:last-child { border-bottom: none; }
.contact-list li strong { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
/* 44px tall so the phone number and address are easy to tap */
.contact-list a {
    display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start;
    font-family: var(--font-mono); color: var(--brand-cyan); font-size: 0.875rem;
    word-break: break-all; text-decoration: none; transition: var(--transition);
}
.contact-list a:hover { color: var(--brand-lime); }

.inquiry-form-wrapper { background: #0E3A63; border-top: none; padding: 3rem; position: relative; }
.inquiry-form-wrapper::before { content: '[ INQUIRY_NODE ]'; position: absolute; top: 1rem; right: 1.5rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-muted); }
.inquiry-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.75rem; }
.inquiry-form .form-row.single { grid-template-columns: 1fr; }
.inquiry-form .form-row:last-child { margin-bottom: 0; }

/* Numbered blocks: 1) Coordinates ... 4) Filter Solution Requirements */
.form-block { border: none; border-top: 1px solid var(--border-light); padding: 0; margin: 0 0 2.5rem; }
.form-block:first-of-type { border-top: none; }
.form-block legend {
    font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-pure);
    text-transform: uppercase; letter-spacing: 0.06em;
    display: flex; align-items: center; gap: 0.7rem; padding: 0 0.9rem 0 0; margin-bottom: 1.5rem;
}
.form-block legend .step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; background: var(--brand-turquoise); color: var(--bg-darkest);
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
}

.form-group label,
.form-group .pseudo-label { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-pure); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--border-dim);
    color: var(--text-pure); font-family: var(--font-mono); font-size: 0.8rem;
    padding: 0.7rem 0.8rem; border-radius: 0; outline: none; transition: var(--transition);
}
.form-group textarea { resize: vertical; line-height: 1.7; }
.form-group select { appearance: none; cursor: pointer; }
.form-group select option { background: var(--bg-darkest); color: var(--text-pure); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--brand-turquoise); background: rgba(255, 255, 255, 0.12); }
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible { outline: 2px solid var(--brand-turquoise); outline-offset: 2px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.45); }

/* A required field left empty or filled in wrongly */
.form-group.invalid label,
.form-group.invalid .pseudo-label { color: var(--brand-alert); }
.form-group.invalid input,
.form-group.invalid textarea,
.form-group.invalid select {
    border-color: var(--brand-alert);
    background: rgba(255, 107, 90, 0.12);
    box-shadow: inset 3px 0 0 var(--brand-alert);
}
.form-group.invalid input:focus,
.form-group.invalid textarea:focus,
.form-group.invalid select:focus { border-color: var(--brand-alert); }
.form-group .field-hint {
    display: none; margin: 0.45rem 0 0;
    font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em;
    color: var(--brand-alert); text-transform: uppercase;
}
.form-group.invalid .field-hint { display: block; }

/* Confirmation and error panels shown in place of leaving the site */
.form-status {
    border: 1px solid var(--brand-turquoise);
    background: rgba(0, 206, 209, 0.08);
    padding: 2.5rem 2rem;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
}
.form-status h4 {
    font-family: var(--font-heading); font-size: 1.4rem; color: var(--text-pure);
    letter-spacing: 0.04em; margin-bottom: 1rem; line-height: 1.2;
}
.form-status p { color: var(--text-silver); margin-bottom: 1.5rem; }
.form-status a { color: var(--brand-turquoise); }
.form-status a:hover { color: var(--brand-lime); }
.form-status-error { border-color: var(--brand-gold); background: rgba(218, 165, 32, 0.10); }
.form-status-error p:last-child { margin-bottom: 0; }
#inquiry-submit:disabled { opacity: 0.6; cursor: progress; }
.form-privacy { margin: 1rem 0 0; font-size: 0.875rem; color: var(--text-muted); text-align: center; }
.form-privacy a { color: var(--brand-turquoise); text-decoration: underline; text-underline-offset: 2px; }

.radio-row { display: flex; flex-wrap: wrap; gap: 1.2rem; padding-top: 0.4rem; }
.radio-row label {
    display: flex; align-items: center; gap: 0.5rem; margin: 0;
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-silver);
    text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
}
.radio-row input[type="radio"] {
    appearance: none; width: 14px; height: 14px; border: 1px solid var(--border-light);
    border-radius: 50%; background: transparent; cursor: pointer; padding: 0; flex-shrink: 0;
}
.radio-row input[type="radio"]:checked { background: var(--brand-turquoise); box-shadow: inset 0 0 0 2px #0E3A63; }

.checkbox-section { margin-bottom: 2.5rem; }
.checkbox-section h4 { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-pure); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.checkbox-grid label { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-silver); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; }
.checkbox-grid input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border: 1px solid var(--border-light); border-radius: 0; background: transparent; position: relative; cursor: pointer; }
.checkbox-grid input[type="checkbox"]:checked { background: var(--brand-turquoise); }
.checkbox-grid input[type="checkbox"]:focus { outline: none; }

.footer { background: #1a242d; border-top: 1px solid var(--border-dim); }
.footer-inner { padding-top: 1.75rem; padding-bottom: 1.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.footer p { font-size: 0.8125rem; color: var(--text-muted); margin: 0; }
.footer-legal a { color: var(--brand-turquoise); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================= */

@media (max-width: 1200px) {
    /* Industries: 4-3-4 */
    .industries-grid { grid-template-columns: repeat(8, 1fr); }
    .industry-card:nth-child(7) { grid-column: span 2; }
    .industry-card:nth-child(5) { grid-column: 2 / span 2; }
    .industry-card:nth-child(8) { grid-column: 1 / span 2; }
}

/* Navigation: below 1240px the links no longer fit on one row with the logo, its globe and the language
   switcher (Dutch is the longest), so they fold into the menu */
@media (max-width: 1239px) {
    .mobile-menu-btn { display: inline-flex; }
    .nav-links {
        display: none; flex-direction: column; width: 100%;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--bg-darkest); padding: 1rem 5% 1.5rem;
        border-bottom: 1px solid var(--border-light); z-index: 1000;
        text-align: center; gap: 0.25rem;
        transform-origin: top; animation: slideDown 0.3s ease forwards;
    }
    @keyframes slideDown { from { opacity: 0; transform: scaleY(0.9); } to { opacity: 1; transform: scaleY(1); } }
    .nav-links.active { display: flex; }
    .nav-links a:not(.btn) { display: flex; align-items: center; justify-content: center; min-height: 44px; }
    .nav-links .btn { margin: 0.5rem 0; min-height: 44px; }
    .lang-switcher { border-left: none; padding-left: 0; margin-left: 0; border-top: 1px solid var(--border-dim); width: 100%; justify-content: center; gap: 1.5rem; padding-top: 0.5rem; margin-top: 0.25rem; }
    .lang-switcher a { min-width: 44px; }
}

@media (max-width: 1024px) {
    h2 { font-size: 2.8rem; }
    .about-grid { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
    .about-visual { display: flex; justify-content: center; }
    /* The big watermark only fits on a wide screen */
    .about::after { display: none; }
    .combine-list, .combine-foot { padding-left: 0; }

    .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
    .solutions-grid { grid-template-columns: repeat(2, 1fr); }
    .pdf-grid { grid-template-columns: repeat(2, 1fr); }
    .applications-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .gallery-item { flex-basis: calc((100% - 1.5rem) / 2); }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .solution-card.feature-card { column-gap: 2.5rem; }
}

@media (max-width: 768px) {
    .section-padding { padding: 4rem 0; }
    h2 { font-size: 2.2rem; margin-bottom: 1rem; }
    h3 { font-size: 1.3rem; }
    .solution-head h3 { font-size: 1.5rem; }

    /* Hero */
    .hero { padding-top: 20vh; align-items: flex-start; }
    .hero-title { font-size: 2.2rem; line-height: 1.12; margin-bottom: 1rem; }
    .hero-subtitle { font-size: 1rem; }

    /* Logo */
    .navbar { height: 68px; }
    .logo img { height: 48px; }
    .logo .logo-globe { height: 34px; }
    .logo-title { font-size: 1.35rem; }
    .logo-sub { font-size: 0.6875rem; letter-spacing: 3px; }

    /* Solutions: one column, stacked as title, pictures, text */
    .solution-card { padding: 2rem 1.25rem; }
    .solution-card.feature-card { grid-template-columns: 1fr; grid-template-areas: "head" "thumbs" "toggle" "content"; grid-template-rows: auto; }
    .solution-card.feature-card .solution-thumbs { margin-bottom: 2rem; }
    .solution-thumbs .thumb img { height: 90px; }
    .solution-card.feature-card .solution-thumbs .thumb img { height: 110px; }
    .solution-card.feature-card .solution-thumbs .thumb.wide img { height: 170px; }

    /* Industries: 2 per row, the odd one out centred */
    .industries-grid { grid-template-columns: repeat(4, 1fr); }
    .industry-card:nth-child(5), .industry-card:nth-child(8) { grid-column: span 2; }
    .industry-card:nth-child(11) { grid-column: 2 / span 2; }
    .industry-card { min-height: 150px; }
    .industry-card img, .industry-card .industry-icon { width: 62px; height: 62px; }
    .industry-card .industry-name { font-size: 0.75rem; padding: 0.5rem 0.4rem; }

    /* Equipment: each category scrolls sideways; the next photo peeks in to show there is more */
    .equip-category { margin-bottom: 3rem; }
    .equip-category .sub-heading { margin-top: 2rem; }
    .equip-gallery {
        flex-wrap: nowrap; justify-content: flex-start; gap: 0.75rem; margin-top: 1rem;
        overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        padding-bottom: 0.75rem; scrollbar-width: thin; scrollbar-color: var(--brand-turquoise) rgba(255, 255, 255, 0.08);
    }
    .equip-gallery::-webkit-scrollbar { height: 4px; }
    .equip-gallery::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); }
    .equip-gallery::-webkit-scrollbar-thumb { background: var(--brand-turquoise); }
    .gallery-item { flex: 0 0 85%; height: 220px; scroll-snap-align: start; }

    /* Client emblems: three per row, as large as the row allows */
    .references p { margin-bottom: 2rem; }
    .client-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding: 0 5%; }
    .client-logo { width: auto; height: auto; aspect-ratio: 2 / 1; padding: 0.4rem; }
    .hero-actions { display: flex; flex-direction: column; gap: 1rem; }
    .hero-actions .btn { width: 100%; }

    /* Solutions & PDF Grid */
    .solutions-grid { grid-template-columns: 1fr; }
    .pdf-grid { grid-template-columns: 1fr; }

    /* Form Area */
    .inquiry-form .form-row { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
    /* 16px or iOS zooms in on focus */
    .form-group input, .form-group textarea, .form-group select { font-size: 1rem; }
    .contact-info, .inquiry-form-wrapper, .equipment-header { padding: 2rem 1.5rem; }
    .checkbox-grid { grid-template-columns: 1fr; gap: 0.5rem; }

    /* Experience Badge */
    .experience-badge { width: 160px; height: 160px; }
    .experience-badge .number { font-size: 3rem; }
}

/* Still wide enough on a small tablet: the cards stay horizontal, pictures left and text right,
   instead of a tall stack with the photos squeezed into a narrow strip. Stacked only on a phone. */
@media (min-width: 600px) and (max-width: 768px) {
    #solutions .solutions-grid > .solution-card:not(.sterile-group),
    .sterile-group > .solution-card {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "thumbs head" "thumbs content" "toggle content"; grid-template-rows: auto auto 1fr;
        column-gap: 1.5rem; align-items: start;
    }
    #solutions .solutions-grid > .solution-card:not(.sterile-group) > .solution-thumbs,
    .sterile-group > .solution-card > .solution-thumbs { margin-bottom: 0; }
}

@media (max-width: 480px) {
    h2 { font-size: 1.8rem; }
    /* The title runs as one sentence, the "&" in line with the words */
    .hero-title { font-size: 2rem; }
    .hero-title .hero-line, .hero-title .hero-amp { display: inline; }
    .hero-title .hero-amp { margin: 0; }
    .hero-subtitle br { display: none; }

    .gallery-item { height: 200px; }
    .solution-thumbs .thumb img { height: 84px; }
}

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

/* =========================================================================
   FILTER SOLUTIONS + STERILE: every card horizontal, pictures left and text right,
   one under the other (Jan, 23.09), with one thumbnail format throughout.
   ========================================================================= */
#solutions .solutions-grid { grid-template-columns: 1fr; }

/* Every tile the same size: a 4:3 picture and a caption box that fits 3 lines.
   Two per row; the two big galleries (the ones with "Show all") get three per row on a wide screen. */
:is(#solutions, #sterile) .solution-thumbs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr;
    gap: 0.75rem; align-content: start;
}
:is(#solutions, #sterile) .solution-thumbs .thumb { display: flex; flex-direction: column; }
:is(#solutions, #sterile) .solution-thumbs .thumb img { width: 100%; height: auto; aspect-ratio: var(--thumb-ratio); object-fit: contain; }
:is(#solutions, #sterile) .solution-thumbs figcaption {
    flex: 1; min-height: var(--caption-min-h);
    display: flex; align-items: center; justify-content: center;
}
/* An odd last tile is centred at the same width, never left hanging on the left */
:is(#solutions, #sterile) .solution-thumbs > .thumb:last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - 0.75rem) / 2);
}
@media (min-width: 1240px) {
    /* Six tracks, each tile spans two; a short last row is nudged to the centre */
    :is(#solutions, #sterile) .solution-thumbs:has(+ .thumbs-toggle) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    :is(#solutions, #sterile) .solution-thumbs:has(+ .thumbs-toggle) > .thumb { grid-column: span 2; width: auto; justify-self: stretch; }
    :is(#solutions, #sterile) .solution-thumbs:has(+ .thumbs-toggle) > .thumb:last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
    :is(#solutions, #sterile) .solution-thumbs:has(+ .thumbs-toggle) > .thumb:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
}
/* Sterile Air, Steam & Liquid Filtration: one rectangle inside Filter Solutions, with Filter Housings and
   Skids & Manifolds as sub-blocks separated by a line rather than boxes inside a box (Jan, 23.09) */
#sterile { scroll-margin-top: 90px; }
.sterile-group:hover { transform: none; }
.sterile-group > .solution-head h3 { margin-bottom: 0.75rem; }
.sterile-group .group-intro { color: var(--text-muted); margin: 0; }
@media (max-width: 768px) { .sterile-group .group-intro br { display: none; } }
.sterile-group .solution-card {
    background: none; border: 0; border-top: 1px solid var(--border-dim);
    clip-path: none; padding: 2rem 0 0; margin-top: 2rem;
}
.sterile-group .solution-card:hover { transform: none; }
.sterile-group .solution-card .solution-head h4 { font-size: 1.4rem; margin-bottom: 1.25rem; }
.sterile-group .applications-grid { margin-top: 2.5rem; padding-top: 2.5rem; }

/* Filter Spares photos were flattened onto the pale plate the sterile cards use */
#filter-spares .solution-thumbs .thumb img { background: #EEF2F5; }

/* Long galleries: 6 tiles, the rest behind "Show all" (the script adds .is-collapsed) */
#solutions .solution-thumbs.is-collapsed > .thumb:nth-child(n+7) { display: none; }
#solutions .solution-thumbs:has(+ .thumbs-toggle:not([hidden])) { margin-bottom: 0.75rem; }
.thumbs-toggle { width: 100%; min-height: 44px; margin-bottom: 2rem; }
.thumbs-toggle[hidden] { display: none; }
.solution-card.feature-card .thumbs-toggle { grid-area: toggle; margin: 0.75rem 0 0; }

/* Filter Spares: a small title over the two cartridges the bullets and specs describe (Jan, 23.09) */
.spares-subtitle {
    font-family: var(--font-heading); font-size: 1.1rem; color: var(--brand-turquoise);
    letter-spacing: 0.06em; margin: 0 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border-dim);
}
#filter-spares .solution-content > .spares-thumbs.solution-thumbs { margin-bottom: 1.75rem; }
/* One turquoise line heading the specs, in Jan's words (23.09) */
.spec-list-title {
    margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--border-dim);
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--brand-turquoise);
    text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.6;
}
.spec-list-title + .spec-list { margin-top: 0.8rem; padding-top: 0; border-top: 0; }

/* Privacy policy pages */
.legal-page { padding-top: calc(76px + 4rem); }
.legal-container { max-width: 820px; }
.legal-page h1 { font-size: 2.6rem; margin-bottom: 0.5rem; }
.legal-page h2 { font-size: 1.4rem; margin: 2.5rem 0 0.75rem; color: var(--brand-turquoise); }
.legal-updated { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.legal-page a { text-decoration: underline; text-underline-offset: 2px; }
.legal-page .todo { background: rgba(218, 165, 32, 0.18); color: var(--brand-gold); padding: 0 0.25rem; }
.legal-back { padding: 0.6rem 1rem; min-height: 44px; }
@media (max-width: 768px) {
    .legal-page { padding-top: calc(68px + 2.5rem); }
    .legal-page h1 { font-size: 2rem; }
    .legal-back { padding: 0.5rem 0.75rem; min-width: 44px; }
    .legal-back .legal-back-text { display: none; }
}