/* Shared visual theme. Content and imagery remain managed by the existing CMS. */

/* Fonts: Manrope (headings) + Inter (text), self-hosted variable woff2, SIL OFL. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/css/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/css/fonts/manrope-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/css/fonts/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/css/fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --green: #80b600; --green-dark: #5f8a00; --green-ink: #4d7300; --green-soft: #f2f8e8;
    --ink: #161a19; --text: #3a4145; --muted: #6b7378; --line: #e3e8e1; --surface: #f5f7f3;
    --font-head: 'Manrope', 'Segoe UI', Arial, sans-serif;
    --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
    --radius: 14px; --shadow-card: 0 8px 28px #22301a0f; --shadow-hover: 0 16px 40px #22301a1c;
}
html { background: #fff; scroll-behavior: smooth; }
body { max-width: none; box-shadow: none; color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, .stat strong, .design-button, #mainMenu a { font-family: var(--font-head); }
a { text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.page { background: #fff; }

/* ---------- Header ---------- */
header { position: relative; z-index: 20; display: flex; align-items: center; gap: 28px; width: 100%; margin: 0; padding: 18px max(8%, calc((100% - 1120px) / 2)); background: #fffffff2; backdrop-filter: blur(8px); border-bottom: 1px solid #e6ebe2; box-shadow: 0 6px 24px #25351910; }
header > .clear, #mainMenu + .clear { display: none; }
#logo { float: none; flex: 0 0 165px; margin: 0 !important; }
#logo img { display: block; width: 165px; height: auto; }
#languages { order: 3; display: flex; flex-shrink: 0; float: none; margin: 0 0 0 auto; gap: 10px; }
#languages a, #languages a:hover, #languages a.active { float: none; box-sizing: content-box; margin: 0; border: 1px solid #dfe3dd; border-radius: 3px; opacity: .55; transition: opacity .15s; }
#languages a:hover, #languages a.active { opacity: 1; }
#mainMenu { flex: 1; }
#mainMenu ul { list-style: none; margin: 0; padding: 0; }
#mainMenu > ul { display: flex; align-items: center; justify-content: center; gap: 4px; }
#mainMenu li { position: relative; }
#mainMenu a { display: block; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .1px; white-space: nowrap; padding: 10px 12px; border-radius: 8px; transition: color .15s, background-color .15s; }
#mainMenu a:hover { color: var(--green-ink); background: var(--green-soft); }
#mainMenu > ul > li > a::after { content: ''; position: absolute; height: 3px; bottom: 0; left: 12px; right: 12px; border-radius: 2px; background: var(--green); transform: scaleX(0); transition: transform .18s; }
#mainMenu > ul > li.active > a::after, #mainMenu a:focus-visible::after { transform: scaleX(1); }
#mainMenu > ul > .legal-link { display: none; }
#mainMenu li ul { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; padding: 10px; border-radius: 12px; background: white; box-shadow: 0 14px 40px #1c261c22; }
#mainMenu li.is-open > ul { display: block; }
#mainMenu li ul a { font-weight: 500; }
#mainMenuResponsive { display: none; }

/* ---------- Content shell ---------- */
main { display: block; }
section#mainContent { float: none; left: auto; width: calc(100% - 112px); max-width: 1120px; margin: 0 auto 56px; background: transparent; }
#mainContent h2 { font-size: 32px; line-height: 1.15; letter-spacing: -.7px; font-weight: 800; padding: 0; margin: 0 0 22px; }
#mainContent h3 { font-weight: 700; }
#mainContent p {/* text-align: justify; */line-height: 1.65;letter-spacing: 0;color: var(--text);}
#mainContent a { color: var(--green-ink); }
#mainContent a:hover { color: #344e00; }
#mainContent .eyebrow { color: var(--green-dark); font-family: var(--font-body); font-size: 12px; font-weight: 700; text-transform: uppercase; line-height: 1.3; letter-spacing: 1.8px; margin: 0 0 10px; }

/* Homepage proportions follow the supplied 935px-wide visual reference. */
.homepage .page { overflow: clip; }
.homepage section#mainContent { width: 84%; max-width: 1120px; margin-bottom: 0; }

/* ---------- Hero ---------- */
.home-hero { position: relative; isolation: isolate; min-height: 500px; display: flex; align-items: center; padding: 56px 0 64px; }
/* Photo is toned down by a 20 % white veil (same look as opacity .8, but independent of what sits behind). */
.home-hero::before { content: ''; position: absolute; z-index: -2; inset: 0 calc((100% - 100vw) / 2); background: linear-gradient(#fff3, #fff3), #fff url('/images/hero-electronics.jpg') calc(62% + 30px) center / cover no-repeat; }
/* Soft green light on the left balances the photo, which fades to plain white there. */
.home-hero::after { content: ''; position: absolute; z-index: -1; inset: 0 calc((100% - 100vw) / 2); pointer-events: none; background: radial-gradient(ellipse 55% 90% at 12% 55%, #d8ebb4cc, #eaf3d800 70%), radial-gradient(ellipse 30% 45% at 2% 5%, #80b60033, #80b60000 70%), linear-gradient(180deg, #fff0, #fff 100%) bottom / 100% 90px no-repeat; }
.hero-copy { position: relative; width: 51%; }
/* Own white backdrop behind the text: bleeds to the left viewport edge, fades out to the right over the photo, softened top/bottom by the mask. */
.hero-copy::before { content: ''; position: absolute; z-index: -1; inset: -130px -180px -130px -50vw; pointer-events: none; background: linear-gradient(90deg, #fff calc(100% - 320px), #fffc calc(100% - 200px), #fff0 100%); -webkit-mask-image: linear-gradient(180deg, #0000, #000 18%, #000 82%, #0000); mask-image: linear-gradient(180deg, #0000, #000 18%, #000 82%, #0000); }
/* Photo stops scaling past Full HD; wider viewports get plain white beyond it. */
@media (min-width: 1921px) { .home-hero::before { background-size: 1920px auto; background-position: center center; -webkit-mask-image: linear-gradient(90deg, #000 calc(50% + 620px), #0000 calc(50% + 960px)); mask-image: linear-gradient(90deg, #000 calc(50% + 620px), #0000 calc(50% + 960px)); } }
#mainContent .hero-copy .eyebrow { font-size: 14px; letter-spacing: 2.4px; margin-bottom: 14px; }
h1 { float: none; padding: 0; margin: 0 !important; border: 0; font-family: var(--font-body); font-size: clamp(46px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -2.2px; font-weight: 800; text-transform: none; color: var(--ink); }
h1 span { display: block; color: var(--green); }
#mainContent .hero-lead { margin: 22px 0 30px; color: #2f3538; font-size: 16px; line-height: 1.55; max-width: 470px; }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#mainContent .design-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 46px; padding: 11px 26px; border-radius: 10px; background: linear-gradient(110deg, #8cc410, #74ae00); color: #fff; text-decoration: none; font-size: 14px; line-height: 1.3; font-weight: 700; letter-spacing: .1px; border: 1px solid #74ae00; box-shadow: 0 6px 18px #80b60040; transition: transform .15s, box-shadow .15s, background-color .15s; }
#mainContent .design-button:hover { color: #fff; background: #6aa000; transform: translateY(-1px); box-shadow: 0 10px 22px #80b60055; }
.design-button span { font-size: 22px; font-weight: 400; line-height: 14px; }
#mainContent .design-button.secondary { background: #fff; color: #1f2427; border: 1px solid #dfe3e0; box-shadow: 0 3px 10px #18221814; }
#mainContent .design-button.secondary:hover { background: #fff; color: var(--green-ink); border-color: #b9d585; }
.hero-aside::before { content: ''; position: absolute; z-index: -1; inset: -60px -90px -60px -100px; border-radius: 50%; background: radial-gradient(ellipse at center, #ffffffd2 32%, #ffffff00 70%); }
.hero-aside { position: absolute; display: block; text-align: left; text-transform: uppercase; font-family: var(--font-head); font-weight: 700; letter-spacing: 3px; font-size: 13px; line-height: 1.7; color: var(--ink); }
.hero-aside::after { content: ''; display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--green); margin-top: 10px; }
.hero-aside.top { top: 36px; right: 6%; }
.hero-aside.bottom { bottom: 40px; right: 0; font-size: 12px; letter-spacing: 2.2px; }
.hero-aside.bottom strong { font-weight: 800; color: var(--ink); }

/* ---------- About ---------- */
.home-about { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; padding: 48px 0 56px; }
#mainContent .home-about h2 { font-size: 32px; margin-bottom: 16px; }
#mainContent .about-text p { color: var(--text); line-height: 1.6; font-size: 15px; margin-bottom: 16px; }
.about-text strong { font-weight: 500; color: var(--ink); }
.about-media { position: relative; min-width: 0; }
#mainContent .about-caption { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 0 0 14px; font-family: var(--font-head); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 2.2px; text-transform: uppercase; color: #5c6469; }
.about-caption::after { content: ''; flex-shrink: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--green); }
#homeSlider { min-width: 0; padding-bottom: 14px; }
#homeSlider .bx-wrapper { margin: 0; border-radius: var(--radius); box-shadow: var(--shadow-card); }
#homeSlider .bx-viewport { left: 0; border: 0; border-radius: var(--radius); transform: none; -webkit-transform: none; clip-path: inset(0 round var(--radius)); }
#homeSlider .bx-wrapper img { width: calc(100% + 1px); max-width: calc(100% + 1px); }
#homeSlider .bx-wrapper .bx-pager { bottom: -26px; padding-top: 0; }
#homeSlider .bx-wrapper .bx-pager a { width: 7px; height: 7px; background: #d4dfc6; }
#homeSlider .bx-wrapper .bx-pager a.active { background: var(--green); }
#homeSlider .bx-controls-direction a { transform: scale(.6); opacity: 0; transition: opacity .2s; }
#homeSlider:hover .bx-controls-direction a { opacity: 1; }

/* ---------- Benefits ---------- */
.home-benefits { position: relative; isolation: isolate; padding: 48px 0 56px; }
.home-benefits::before { content: ''; position: absolute; inset: 0 calc((100% - 100vw) / 2); z-index: -1; background: linear-gradient(180deg, #f6f8f3, #f1f4ee); }
#mainContent .checkList h2 { text-transform: uppercase; letter-spacing: -.3px; margin: 0 0 30px; }
#mainContent .checkList > ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
#mainContent .checkList > ul > li { position: relative; padding: 90px 28px 0 0; margin: 0 28px 0 0; line-height: 1.55; background: none; color: var(--text); font-size: 14px; }
#mainContent .checkList > ul > li::after { content: ''; position: absolute; right: 0; top: 18px; bottom: 0; border-right: 1px solid #dde3d8; }
#mainContent .checkList > ul > li:last-child { margin: 0; padding-right: 0; }
#mainContent .checkList > ul > li:last-child::after { display: none; }
#mainContent .checkList > ul > li::before { content: ''; position: absolute; top: 0; left: 0; width: 68px; height: 68px; border-radius: 50%; background: #fff url('/images/design-people.svg') center / 42px no-repeat; box-shadow: 0 6px 18px #22301a14; }
#mainContent .checkList > ul > li:nth-child(2)::before { background-image: url('/images/design-gear.svg'); }
#mainContent .checkList > ul > li:nth-child(3)::before { background-image: url('/images/design-chip.svg'); }
#mainContent .checkList > ul > li:nth-child(4)::before { background-image: url('/images/design-cap.svg'); }
#mainContent .checkList > ul > li strong { font-weight: 500; color: var(--ink); }
#mainContent .checkList > ul > li a { font-weight: 600; }
.service-symbol svg, .stat-icon svg, .footer-contact svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#mainContent .benefit-title { display: block; color: var(--ink); font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px; margin: 0 0 10px; }

/* ---------- Product / service sections ---------- */
.home-section { padding-top: 52px; }
.home-section:last-child { padding-bottom: 56px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
#mainContent .section-heading h2 { text-transform: uppercase; letter-spacing: -.3px; margin: 0; }
#mainContent .section-heading .eyebrow { margin-bottom: 8px; }
#mainContent .section-link { white-space: nowrap; font-size: 14px; font-weight: 600; text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid transparent; transition: border-color .15s; }
#mainContent .section-link:hover { border-color: var(--green); }
.section-link span { display: inline-block; margin-left: 8px; transition: transform .15s; }
.section-link:hover span { transform: translateX(3px); }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.homepageCategory, .homepageCategory.first, .homepageCategory.last, .homepageCategory.second.last { display: flex; flex-direction: column; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; }
.homepageCategory:hover { border-color: #c4dca1; transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.homepageCategory .homepageCategoryImgRef { position: relative; overflow: hidden; text-decoration: none; line-height: 0; font-size: 0; float: none; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: calc(100% + 40px); height: 128px; margin: -18px -20px 16px; border-radius: 0; background: linear-gradient(180deg, #f7f9f4, #fff); border-bottom: 1px solid #eef1ea; }
.homepageCategory .homepageCategoryImgRef:hover { background: linear-gradient(180deg, #f2f7ea, #fff); }
.product-cutout { display: block; width: auto; max-width: 70%; height: 96px; object-fit: contain; }
.homepageCategory .ico { width: 100%; height: 100%; background-size: auto 70px; background-position: center; filter: brightness(0) saturate(100%) invert(56%) sepia(70%) saturate(700%) hue-rotate(40deg); opacity: .95; }
#mainContent .homepageCategory h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.25; }
#mainContent .homepageCategory h3 a { font-size: 17px; color: var(--ink); text-decoration: none; text-transform: none; letter-spacing: -.2px; overflow-wrap: anywhere; }
#mainContent .homepageCategory h3 a { display: block; text-transform: lowercase; }
#mainContent .homepageCategory h3 a::first-letter { text-transform: uppercase; }
#mainContent .homepageCategory h3 a:hover { color: var(--green-ink); }
#products .homepageCategory:first-child h3 a { color: var(--green-ink); text-transform: none; }
#mainContent .homepageCategory p { font-size: 14px; line-height: 1.55; margin: 0 0 10px !important; text-align: left !important; color: var(--text); }
.homepageCategory p strong { font-weight: 600; color: var(--ink); }
#mainContent .card-more { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; text-decoration: none; }
.card-more span { font-size: 20px; line-height: 12px; transition: transform .15s; }
.card-more:hover span { transform: translateX(3px); }
.homepageCategory.second { padding: 0 22px 20px; }
.homepageCategory.second .homepageCategoryImgRef { width: calc(100% + 44px); margin: 0 -22px 14px; height: 150px; border: 0; background: #fff; }
/* No filter/transform on the photo: with the card's hover transform Chrome would promote it to its own layer and its clip rounds differently from the overlay (1px hairline). */
.service-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* White behind covers: any sub-pixel gap between photo/overlay and the clip edge then stays invisible. */
.homepageCategory .homepageCategoryImgRef:has(.service-cover), .homepageCategory .homepageCategoryImgRef:has(.service-cover):hover { background: #fff; }

.homepageCategory .homepageCategoryImgRef:has(.service-cover)::after { content: ''; position: absolute; inset: 0 0 -2px; background: linear-gradient(0deg, #fff 8%, #ffffff00 55%), linear-gradient(90deg, #80b60022, #80b60000 60%); }
.service-symbol { position: absolute; z-index: 1; bottom: 16px; left: 22px; display: block; background: linear-gradient(135deg, #8cc410, #6ea600); border: 3px solid #fff; border-radius: 50%; width: 64px; height: 64px; padding: 15px; color: #fff; box-shadow: 0 8px 20px #6ea60040; }

/* ---------- Stats band ---------- */
.company-note { background: var(--green-soft); border-top: 1px solid #e3ecd6; padding: 34px 0; }
.stats-inner { width: 84%; max-width: 1120px; margin: auto; display: grid; grid-template-columns: 1fr 1.2fr 1.2fr .5fr; align-items: center; gap: 28px; }
.stat { display: flex; align-items: center; gap: 20px; border-right: 1px solid #dbe6cc; min-height: 66px; }
.stat-icon { display: block; flex-shrink: 0; width: 68px; height: 68px; background: #fff; border-radius: 50%; padding: 17px; color: var(--green); box-shadow: 0 6px 18px #22301a12; }
.stat strong { display: block; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.8px; color: var(--ink); }
.stat p { font-size: 14px; line-height: 1.4; color: var(--text); margin-top: 3px; }
.stats-motto { color: #8a9285; text-transform: uppercase; font-family: var(--font-head); font-weight: 700; font-size: 12px; line-height: 1.7; letter-spacing: 3px; }
.stats-motto::after { content: ''; display: block; width: 30px; height: 3px; border-radius: 2px; background: var(--green); margin-top: 10px; }
.stats-fallback { display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Footer ---------- */
footer { background: linear-gradient(120deg, #262a27, #1c201d); padding: 40px 0 24px; color: #c9cec7; }
.footer-inner { width: 84%; max-width: 1120px; margin: auto; display: grid; grid-template-columns: 1.1fr 1.25fr 1.05fr .7fr; gap: 24px 30px; align-items: start; }
#footerLogo { float: none; margin: 0 0 14px; }
#footerLogo img { width: 205px; height: auto; }
footer p { font-size: 13px; line-height: 1.6; }
.footer-brand > p { max-width: 220px; }
footer h2 { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
footer nav { float: none; height: auto; padding: 0; margin: 0; text-align: left; }
footer nav ul { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 18px; }
footer nav ul li, footer nav ul li.first { float: none; display: block; margin: 0; padding: 0; border: 0; font-size: 13px; line-height: 1.5; }
footer a { color: #c9cec7; text-decoration: none; transition: color .15s; }
footer a:hover { color: #b4d94a; }
.footer-contact, .footer-language { border-left: 1px solid #3c423b; padding-left: 26px; }
.footer-contact p { display: flex; gap: 12px; margin-bottom: 6px; align-items: center; }
.footer-contact svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--green); }
.footer-flags { display: flex; gap: 14px; margin: 3px 0 16px; }
.footer-flags a { display: block; width: 31px; height: 17px; opacity: .8; }
.footer-flags a:hover { opacity: 1; }
.footer-flags span { display: block; width: 31px; height: 17px; background: url('/images/flags.png') no-repeat; }
.footer-flags .en span { background-position: -87px 0; }
.footer-flags .fr span { background-position: -44px 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; grid-column: 1 / -1; border-top: 1px solid #3c423b; margin-top: 10px; padding-top: 16px; }
.footer-bottom p, .footer-bottom li { font-size: 12px; color: #9aa197; }
.footer-bottom nav ul { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-bottom a { color: #9aa197; text-decoration: underline; text-decoration-color: #4b524a; }
footer .social { grid-column: 1 / -1; float: none; margin: 0; }
footer .social:has(ul:empty), .footer-inner > .clear { display: none; }

/* ---------- Subpages ---------- */
body:not(.homepage) #mainContent { padding-top: 40px; }
#mainContent .site-tagline { color: var(--green-dark); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; margin-bottom: 20px; }
#categoryHeader, #categoryHeader.withLine { height: auto; min-height: 100px; border: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; padding: 0 0 24px; }
#categoryHeader h2 { margin-bottom: 10px; }
#categoryHeader .categoryIcoImg { margin-right: 20px; }
#categoryBigImage, #pageBigImage { display: block; border-radius: var(--radius); margin: 0 0 26px; }
.productItem, .referenceItem, .grantItem, .categoryDescription { border-color: var(--line); }
.inbox { border-radius: 8px; }
/* References: header is a grid – logo box (12em wide, as tall as heading + subheading) left, texts right, green line under both; content full width. */
.referenceHeader { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: start; border-bottom: 0; padding-bottom: 0; }
.referenceItem .referenceImageWrapper { grid-row: 1 / span 2; float: none; position: relative; width: 12em; align-self: stretch; margin: 0; }
/* absolutely positioned: the logo never inflates the header rows, only shrinks to fit the box */
.referenceItem .referenceImageWrapper img { position: absolute; inset: 0; margin: 0 auto auto; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.referenceHeader h3, #mainContent .referenceHeader p.subHeader { grid-column: 2; }
.referenceHeader::after { content: ''; grid-column: 2; height: 3px; background: linear-gradient(90deg, #a9cb41 40%, #a9cb4100); }
#mainContent table { max-width: 100%; }
#mapPlaceholder { margin-top: 32px; }
#mainContent .map-title { font-size: 18px; margin: 0 0 12px; }
#map { height: 320px; border-radius: var(--radius); overflow: hidden; }

@media (max-width: 1150px) {
    header { gap: 18px; padding-top: 12px; padding-bottom: 12px; }
    #mainMenu > ul { gap: 0; }
    #mainMenu a { font-size: 12px; padding: 8px 8px; }
    .home-hero { min-height: 360px; padding: 36px 0; }
    #mainContent .hero-copy .eyebrow { font-size: 12px; }
    #mainContent .hero-lead { font-size: 14px; margin: 14px 0 24px; }
    #mainContent .design-button { min-height: 38px; font-size: 12px; }
    .hero-aside { font-size: 10px; letter-spacing: 2px; }
    .hero-aside.top { top: 24px; right: 8%; }
    .hero-aside.bottom { bottom: 26px; right: 0; }
    #mainContent h2, #mainContent .home-about h2 { font-size: 26px; }
    #mainContent .about-text p { font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
    #mainContent .home-about h2 { font-size: 24px; margin-bottom: 10px; }
    #mainContent .home-about .design-button { min-height: 34px; padding: 8px 18px; }
    .home-about { gap: 28px; grid-template-columns: 1.2fr 1fr; padding: 32px 0; }
    #mainContent .about-caption { font-size: 9.5px; letter-spacing: 1.5px; }
    #mainContent .checkList > ul > li, #mainContent .homepageCategory p { font-size: 12.5px; line-height: 1.5; }
    #mainContent .benefit-title, #mainContent .homepageCategory h3, #mainContent .homepageCategory h3 a { font-size: 14px; }
    .homepageCategory { padding: 14px 16px 16px; }
    .homepageCategory .homepageCategoryImgRef { width: calc(100% + 32px); margin: -14px -16px 12px; height: 100px; }
    .product-cutout { height: 76px; }
    .homepageCategory .ico { background-size: auto 56px; }
    #mainContent .eyebrow { font-size: 11px; margin-bottom: 6px; }
    #mainContent .checkList > ul > li { padding: 72px 18px 0 0; margin-right: 18px; }
    #mainContent .checkList > ul > li::before { width: 56px; height: 56px; background-size: 36px; }
    .home-benefits { padding: 32px 0 36px; }
    .home-section { padding-top: 36px; }
    .company-note { padding: 26px 0; }
    .stat-icon { width: 58px; height: 58px; padding: 15px; }
    .stat strong { font-size: 26px; }
    .stat p, footer p, footer nav ul li { font-size: 12px; }
    footer { padding: 28px 0 18px; }
    .footer-inner { row-gap: 14px; gap: 20px; }
    #footerLogo img { width: 160px; }
    footer h2 { font-size: 12px; margin-bottom: 10px; }
    .footer-contact p { font-size: 11.5px; }
    .footer-bottom { padding-top: 12px; }
    .services-grid { gap: 16px; }
    .homepageCategory.second { padding-left: 16px; padding-right: 16px; }
    .homepageCategory.second .homepageCategoryImgRef { width: calc(100% + 32px); margin: 0 -16px 12px; height: 120px; }
    .service-symbol { width: 54px; height: 54px; padding: 12px; left: 16px; }
    #mainContent .design-button { padding: 10px 18px; gap: 12px; }
    .hero-actions { gap: 12px; }
    .footer-contact, .footer-language { padding-left: 15px; }
    .stat { gap: 14px; }
}
@media (max-width: 800px) {
    header { flex-wrap: wrap; padding-left: 24px; padding-right: 24px; }
    #mainMenu { display: none; }
    /* Mobile menu: icon-only hamburger sits in the header row next to the flags; the nav drops down under the header. */
    #mainMenuResponsive { display: block; order: 4; margin: 0; flex-shrink: 0; }
    .slicknav_menu { position: static; background: none; padding: 0; }
    .slicknav_menu::before, .slicknav_menu::after { display: none; }
    .slicknav_btn, .slicknav_btn:hover, .slicknav_btn.actived { float: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 !important; padding: 0; border: 1px solid #dfe3dd; border-radius: 10px; background: #fff; box-shadow: none; text-shadow: none; filter: none; transition: background-color .15s, border-color .15s; }
    .slicknav_btn:hover, .slicknav_btn.slicknav_open { background: var(--green-soft); border-color: #c9dba6; }
    .slicknav_menu .slicknav_menutxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .slicknav_menu .slicknav_icon { position: relative; float: none; width: 20px; height: 14px; margin: 0; }
    .slicknav_menu .slicknav_icon::before { display: none; }
    .slicknav_menu .slicknav_icon-bar { position: absolute; left: 0; width: 20px; height: 2px; margin: 0 !important; border-radius: 2px; background: var(--ink); box-shadow: none; transition: transform .2s, opacity .2s, top .2s; }
    .slicknav_icon-bar:nth-child(1) { top: 0; }
    .slicknav_icon-bar:nth-child(2) { top: 6px; }
    .slicknav_icon-bar:nth-child(3) { top: 12px; }
    .slicknav_open .slicknav_icon-bar:nth-child(1) { top: 6px; transform: rotate(45deg); }
    .slicknav_open .slicknav_icon-bar:nth-child(2) { opacity: 0; }
    .slicknav_open .slicknav_icon-bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }
    .slicknav_nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; clear: both; margin: 0; padding: 8px 12px 12px; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 18px 36px #25351918; }
    .slicknav_nav > ul > li + li { border-top: 1px solid var(--line); }
    .slicknav_nav ul li ul { background: var(--surface); border-radius: 8px; margin: 0 0 8px; }
    .slicknav_nav a, .slicknav_nav .slicknav_row { color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 15px; padding: 12px 10px; border-radius: 8px; }
    .slicknav_nav ul li ul a { font-weight: 500; font-size: 14px; padding-left: 20px; background-image: none; }
    .slicknav_nav li.active > a:not(.slicknav_item):not(.withSubmenu) { background: var(--green-soft); color: var(--green-ink); }
    .slicknav_nav a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a.actived, .slicknav_nav a.slicknav_row.actived, .slicknav_nav a.withSubmenu:hover, .slicknav_nav a.withSubmenu.actived { background: var(--green-soft); color: var(--green-ink); }
    .slicknav_nav .slicknav_item a, .slicknav_nav .slicknav_parent-link a { padding: 0; margin: 0; background: none; }
    #mainMenuResponsive .slicknav_arrow, #mainMenuResponsive a.slicknav_row:hover .slicknav_arrow, #mainMenuResponsive li.slicknav_open a.slicknav_row .slicknav_arrow { background: none; color: var(--green-ink); font-size: 18px; line-height: 15px; text-align: center; }
    .slicknav_arrow::before { content: '+'; }
    .slicknav_open > a > .slicknav_arrow::before { content: '−'; }
    section#mainContent, .homepage section#mainContent { width: calc(100% - 48px); }
    .stats-inner, .footer-inner { width: calc(100% - 48px); }
    .hero-copy { width: 58%; }
    .hero-aside { display: none; }
    .home-hero::before { background-position: 45% center; }
    .home-about { gap: 25px; }
    #mainContent .home-about h2 { font-size: 24px; }
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    #mainContent .checkList > ul > li { padding-right: 15px; margin-right: 15px; }
    .stats-inner { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .stat { flex-direction: column; text-align: center; border: 0; }
    .stats-motto { display: none; }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-contact, .footer-language { padding: 0; border: 0; }
}
@media (max-width: 600px) {
    header { padding: 14px 18px; gap: 14px; }
    #logo { flex-basis: 135px; }
    #logo img { width: 135px; }
    #languages { gap: 6px; }
    section#mainContent, .homepage section#mainContent { width: calc(100% - 36px); }
    /* Hero keeps the ≤800px look; the copy takes the full width, so its white backdrop must end at the copy edge and fade over the last 260px instead of overhanging 180px past it (that turned the whole hero white). */
    .hero-copy { width: 100%; }
    .hero-copy::before { inset: -130px 0 -130px -50vw; background: linear-gradient(90deg, #fff calc(100% - 260px), #fffc calc(100% - 160px), #fff0 100%); }
    /* Phones: stronger veil over the photo (50 % white, same look as opacity .5). */
    .home-hero::before { background-image: linear-gradient(#fff8, #fff8), url('/images/hero-electronics.jpg'); }
    h1 { font-size: 48px; letter-spacing: -1.8px; }
    #mainContent .hero-copy .eyebrow { font-size: 12px; }
    #mainContent .hero-lead { margin: 16px 0 20px; font-size: 14px; }
    .hero-actions { gap: 10px; }
    #mainContent .design-button { font-size: 12px; padding: 10px 15px; }
    .home-about { grid-template-columns: 1fr; padding: 28px 0; gap: 28px; }
    #mainContent .about-caption { justify-content: flex-start; }
    #mainContent h2, #mainContent .home-about h2 { font-size: 26px; }
    #mainContent .about-text p, #mainContent .homepageCategory p { font-size: 14px; line-height: 1.55; }
    #mainContent .homepageCategory h3 a { font-size: 16px; }
    #mainContent .checkList > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
    #mainContent .checkList > ul > li { padding-right: 0; margin: 0; font-size: 13px; }
    #mainContent .checkList > ul > li::after { display: none; }
    #mainContent .benefit-title { font-size: 15px; }
    .section-heading { align-items: end; gap: 12px; }
    #mainContent .section-link { font-size: 12px; }
    .section-link span { margin-left: 3px; }
    .category-grid, .services-grid { grid-template-columns: 1fr; }
    .homepageCategory { padding: 16px 20px 20px; }
    .homepageCategory .homepageCategoryImgRef { width: calc(100% + 40px); margin: -16px -20px 14px; height: 130px; }
    .homepageCategory.second .homepageCategoryImgRef { width: calc(100% + 44px); margin: 0 -22px 14px; height: 150px; }
    .stats-inner { grid-template-columns: 1fr; width: calc(100% - 48px); gap: 20px; }
    .stat { flex-direction: row; text-align: left; border: 0; }
    .footer-inner { width: calc(100% - 48px); gap: 26px 16px; }
    .footer-brand, .footer-links, .footer-bottom { grid-column: 1 / -1; }
    .footer-bottom { display: block; }
    .footer-bottom nav { margin-top: 10px; }
    #categoryHeader .categoryIcoImg { width: 60px; height: 60px; }
    #mainContent table { display: block; overflow-x: auto; }
    .supportForm { width: 100%; padding: 20px 14px; }
    form input[type=text], form input[type=password] { width: 100%; }
    .contactItem .contactDetails.left, .contactItem .contactDetails.right, .contactItem.thirds .middle, .contactItem.thirds .right { float: none; width: 100%; max-width: none; }
    .referenceHeader { column-gap: 16px; }
    .referenceItem .referenceImageWrapper { width: 7em; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}