/* ==========================================================================
Electro Nerves Control Systems — main stylesheet
Hand-written, mobile-first, custom-property tokens per the Brand & Style Guide.
========================================================================== */
/* ---- 1. Fonts (self-hosted variable woff2, latin + latin-ext) ---- */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/assets/fonts/inter-var-latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Saira';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/assets/fonts/saira-var-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
font-family: 'Saira';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/assets/fonts/saira-var-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Saira';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/assets/fonts/saira-var-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
font-family: 'Saira';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/assets/fonts/saira-var-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---- 2. Tokens ---- */
:root {
/* Brand palette — see Brand & Style Guide for full rationale */
--brand-primary: #0A7C44;
--brand-primary-dark: #0B4D2C;
--brand-dark: #0D2118;
--brand-lime: #E9DE56; /* dark-ground accent only — fails AA on white */
--brand-spring: #7CBF4C; /* dark-ground accent only — fails AA on white */
--ink: #21282C;
--muted: #5B6669;
--mist: #F4F8F8;
--white: #FFFFFF;
--border: #E3E9E8;
/* On dark grounds, body copy needs a lighter muted tone than --muted (which is tuned
for light backgrounds) — used in hero/footer/dark bands only. */
--muted-on-dark: #AEBFB8;
--border-on-dark: rgba(255, 255, 255, .14);
--font-heading: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Explicit client request — the old fixed 1280px cap read as a small, centered
column with huge dead margins on a real desktop monitor (1600px+). This scales
with the viewport up to a much higher ceiling instead of stopping early. */
--container-w: min(1680px, 92vw);
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--section-pad-y: clamp(3.5rem, 7vw, 6rem);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 24px;
--shadow-sm: 0 2px 8px rgba(13, 33, 24, .08);
--shadow-md: 0 12px 32px rgba(13, 33, 24, .14);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--dur-fast: 180ms;
--header-h: 128px; /* used by the cinematic hero to sit the photo behind the overlay header — matches the header's larger at-rest size */
--header-dur: 420ms; /* header-only — slower than --dur-fast so the minimize-on-scroll reads as a deliberate glide, not a snap */
}
/* ---- 3. Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
color: var(--ink);
background: var(--white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, picture, video { max-width: 100%; display: block; }
/* Every "media box" sitewide (about-split__media, product-card__media, why-card__media,
industry-tile__media, manufacturing panels, etc.) follows the same pattern: a container
with an aspect-ratio or a stretched grid/flex height, plus `... img { width:100%;
height:100%; object-fit:cover }` to fill it. render_picture() wraps every ![]()
in a
bare , and that wrapper has no height of its own — so the img's height:100%
has no definite containing-block height to resolve against, computes to auto instead,
and the image falls back to its intrinsic aspect ratio, landing short of the box (a
real, confirmed gap: about-split__media's photo stopped ~94px above the box's own
bottom edge). Giving the same 100%/100% here closes that percentage chain
for every media box at once, and degrades harmlessly to auto where a parent has no
definite height to give it. */
picture { width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; margin: 0; color: var(--ink); }
/* Real bug this fixes: h2 had no sitewide default size. Three sections (Industries,
Products, Why Choose) happened to set one via .section-head h2; About, Manufacturing,
Certifications and Sustainability didn't, so their h2 silently fell back to the
browser's UA-stylesheet default (24px) instead of the brand scale (36px at this
width) — same font-weight/family, visibly smaller size, no CSS rule to blame it on
in either of those four sections specifically. Setting it here means every future
h2 gets this by default instead of needing to remember to add it per section;
.hero__copy h1 and .cta-band h2 stay their own explicit sizes, both already more
specific than this and unaffected. */
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
/* Same fix, same reason, applied ahead of time instead of after the next report —
h1/h3/h4 had the identical gap (no sitewide default size) waiting to happen on
the very next page that used one without a component-specific override. More
specific rules already in use (.hero__copy h1, .industry-tile h3, etc.) still win
over these — this only fills in where nothing else does. */
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 1000;
background: var(--brand-dark); color: var(--white); padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
/* ---- 4. Layout primitives ---- */
.container { max-width: var(--container-w); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad-y); }
.section--mist { background: var(--mist); }
.section--dark { background: var(--brand-dark); color: var(--white); }
.section--dark .muted { color: var(--muted-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
/* Dual-color heading — the one pattern every section h2 follows: an upright accent
phrase inside the heading, never a whole-heading color change. Default is
brand-primary (light grounds); dark sections swap to brand-spring so it still
reads as an accent, not body text. More specific per-section rules (hero's h1,
the CTA band) still win over this default where they intentionally differ. */
h1 em, h2 em, h3 em { font-style: normal; color: var(--brand-primary); }
.section--dark h1 em, .section--dark h2 em, .section--dark h3 em { color: var(--brand-spring); }
.eyebrow {
display: inline-flex; align-items: center; gap: .6rem;
font-family: var(--font-heading); font-weight: 700; font-size: .8rem;
letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary);
margin-bottom: .9rem;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--brand-primary); display: inline-block; }
.section--dark .eyebrow { color: var(--brand-spring); }
.section--dark .eyebrow::before { background: var(--brand-spring); }
/* Optional icon variant (Industries hub — one eyebrow per industry, icon instead of
the plain dash) — same slot, same sizing rules apply either way. */
.eyebrow__icon { width: 16px; height: 16px; }
.eyebrow:has(.eyebrow__icon)::before { display: none; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.section-head h2 { max-width: 34ch; }
.section-head .section-head__aside { max-width: 42ch; color: var(--muted); }
.section--dark .section-head .section-head__aside { color: var(--muted-on-dark); }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--brand-primary); white-space: nowrap; }
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }
.section--dark .link-arrow { color: var(--brand-spring); }
.breadcrumb { font-size: .85rem; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: .4rem; color: var(--border); }
.breadcrumb a:hover { color: var(--brand-primary); }
/* ---- 5. Buttons ---- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .85rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem;
white-space: nowrap; flex: none;
border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Real bug, found while adding a new .btn icon (brochure download): a bare svg_icon()
has no width/height attribute (viewBox only), and outside of .link-arrow/.btn-ghost
nothing ever sized it — so every plain .btn with an inline arrow (header/footer/CTA-
band "Get a Quote →", every product page's closing CTA, etc.) has been rendering
that icon at 0×0 this whole build: invisible, not just small. Confirmed by measuring
the header's own "Get a Quote" button's icon via getBoundingClientRect(). One rule
here fixes it sitewide instead of hunting down every call site individually. */
.btn .icon { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--brand-primary); color: var(--white); }
.btn-primary:hover { background: var(--brand-primary-dark); }
.btn-ghost { color: inherit; }
.btn-ghost .icon { width: 16px; height: 16px; }
.btn-outline { border-color: var(--border-on-dark); color: var(--white); }
.btn-outline:hover { background: rgba(255, 255, 255, .08); }
.btn-outline-light { background: var(--white); color: var(--ink); border-color: var(--border); }
.btn-outline-light:hover { background: var(--mist); border-color: var(--ink); }
/* ---- 6. Header / Nav ---- */
.site-header {
position: sticky; top: 0; z-index: 100; background: var(--white);
border-bottom: 1px solid var(--border);
transition: background-color var(--header-dur) var(--ease-out), border-color var(--header-dur) var(--ease-out);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem; transition: padding-block var(--header-dur) var(--ease-out); }
.brand { display: flex; align-items: center; gap: .6rem; flex: none; }
.brand img { height: 92px; width: auto; transition: height var(--header-dur) var(--ease-out); }
/* Large on first paint (readable, confident); compacts once scrolled — the
"header minimizes" behaviour applies site-wide, not just over the hero. */
.site-header.is-scrolled .container { padding-block: .55rem; }
.site-header.is-scrolled .brand img { height: 44px; }
/* Full wordmark lockup normally; swap to the icon-only mark (same graphic as the
favicon) once scrolled/compact — the wordmark stops being legible at 44px tall. */
.brand__mark { display: none; }
.site-header.is-scrolled .brand__full { display: none; }
.site-header.is-scrolled .brand__mark { display: block; }
/* Transparent-over-hero variant (homepage only) — solidifies once main.js adds
.is-scrolled, at which point it's identical to the plain .site-header above. */
.site-header--overlay:not(.is-scrolled) {
background: linear-gradient(180deg, rgba(4, 12, 8, .55) 0%, rgba(4, 12, 8, 0) 100%);
border-bottom-color: transparent;
}
.site-header--overlay:not(.is-scrolled) .nav-links > a,
.site-header--overlay:not(.is-scrolled) .nav-item__trigger { color: var(--white); }
.site-header--overlay:not(.is-scrolled) .nav-toggle { border-color: rgba(255, 255, 255, .4); color: var(--white); }
/* Logo stays original color at rest too (client's call) — the header's own scrim
gradient above is what keeps it legible over the photo, not a white silhouette. */
.nav-links { display: none; }
.nav-actions { display: none; }
.nav-toggle {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 42px; height: 42px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none;
}
.nav-toggle .icon { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (min-width: 960px) {
.nav-links { display: flex; align-items: center; gap: 2.5rem; flex-wrap: nowrap; }
.nav-links > a {
position: relative; font-weight: 500; font-size: .95rem; color: var(--ink); white-space: nowrap;
padding-block: .35rem; transition: color var(--dur-fast) var(--ease-out);
}
.nav-links > a:hover { color: var(--brand-primary); }
/* Premium hover state: a thin rule grows in under the label instead of a color-only swap. */
.nav-links > a::after {
content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
background: currentColor; transition: right var(--dur-fast) var(--ease-out);
}
.nav-links > a:hover::after { right: 0; }
/* position:relative, not static — the panel needs ITS OWN box (the trigger's
tight little rect) as the positioning parent, not the whole .site-header.
static let the panel center on the full header for a wider look, but the
header itself is taller than the trigger (padding above/below the nav row),
so the trigger's own hit-test box stopped ~2.5rem short of where the panel
actually started — a real dead zone the mouse had to cross with nothing
hoverable under it, which is why the panel kept closing before a submenu
item could be reached. Flush beats wider-but-broken. */
.nav-item--dropdown { position: relative; display: flex; align-items: center; }
.nav-item__trigger {
position: relative; display: inline-flex; align-items: center; gap: .3rem;
font-weight: 500; font-size: .95rem; color: var(--ink); white-space: nowrap;
padding-block: .35rem; transition: color var(--dur-fast) var(--ease-out);
}
.nav-item__trigger::after {
content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
background: currentColor; transition: right var(--dur-fast) var(--ease-out);
}
.nav-item--dropdown:hover .nav-item__trigger,
.nav-item--dropdown:focus-within .nav-item__trigger { color: var(--brand-primary); }
.nav-item--dropdown:hover .nav-item__trigger::after,
.nav-item--dropdown:focus-within .nav-item__trigger::after { right: 0; }
.nav-item__chevron { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.nav-item--dropdown:hover .nav-item__chevron,
.nav-item--dropdown:focus-within .nav-item__chevron { transform: rotate(180deg); }
/* Mega panel — positioned relative to .nav-item--dropdown (the trigger's own
tight wrapper), so top:100% touches the trigger's own bottom edge exactly.
An earlier version positioned this against .site-header instead (to center
it on the whole header, a wider look) — but the header is taller than the
trigger (padding above/below the nav row), so the trigger's hoverable box
stopped noticeably short of where the panel actually started. That gap had
nothing hoverable in it, so moving the mouse from the trigger down toward
the panel broke :hover before the cursor ever reached it and the panel
closed itself — confirmed the real bug, not a one-off. Flush against the
trigger fixes it structurally; the visual breathing room instead comes from
padding-top on the panel itself, which — since the panel is a descendant of
.nav-item--dropdown — keeps the ancestor's :hover alive the whole time the
mouse is over it. Hover AND focus-within, so it's reachable by keyboard (tab
into any link inside it) as well as a mouse, no JS needed either way. */
.nav-panel {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
padding: 2.5rem 1.5rem 1.5rem; opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
z-index: 10;
}
.nav-item--dropdown:hover .nav-panel,
.nav-item--dropdown:focus-within .nav-panel {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-panel--rich { width: min(640px, 90vw); }
.nav-panel__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; }
.nav-panel__item {
display: flex; align-items: center; gap: .85rem; padding: .8rem; border-radius: var(--radius-sm);
transition: background var(--dur-fast) var(--ease-out); text-align: left;
}
.nav-panel__item:hover { background: var(--mist); }
.nav-panel__icon {
width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--mist); color: var(--brand-primary);
display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out);
}
.nav-panel__item:hover .nav-panel__icon { background: rgba(10, 124, 68, .14); }
.nav-panel__icon .icon { width: 20px; height: 20px; }
.nav-panel__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.nav-panel__title { font-size: .92rem; color: var(--ink); font-weight: 700; }
.nav-panel__desc { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.nav-panel__chevron { width: 16px; height: 16px; flex: none; color: var(--muted); }
.nav-panel__promo {
display: flex; align-items: center; gap: .85rem; margin-top: 1rem; padding: 1.1rem 1.25rem;
border-radius: var(--radius-md); background: var(--mist); transition: background var(--dur-fast) var(--ease-out);
}
.nav-panel__promo:hover { background: rgba(10, 124, 68, .1); }
.nav-panel__promo-icon {
width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--white); color: var(--brand-primary);
display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.nav-panel__promo-icon .icon { width: 20px; height: 20px; }
.nav-panel--simple { width: 240px; display: flex; flex-direction: column; gap: .15rem; }
.nav-panel--simple .nav-panel__item { justify-content: flex-start; }
.nav-panel--simple .nav-panel__icon { width: 32px; height: 32px; }
.nav-panel--simple .nav-panel__icon .icon { width: 16px; height: 16px; }
.nav-panel__label { flex: 1; font-size: .92rem; color: var(--ink); font-weight: 500; }
.nav-actions { display: flex; align-items: center; gap: 1.75rem; flex: none; }
/* Desktop uses the inline nav, not the slide-out menu — this is the fix for the
hamburger showing up on desktop (a later unconditional rule was re-enabling
it after this same media query turned it off). */
.nav-toggle { display: none; }
}
.mobile-nav {
display: none; position: fixed; inset: 0; z-index: 99; background: var(--white);
padding: 6rem var(--gutter) 2rem; overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav__list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.5rem; }
/* Plain nav rows (Home, About, Manufacturing, Quality, Contact) — explicit class,
not a bare `.mobile-nav a` descendant selector: that pattern has already caused
real bugs elsewhere this session (it reaches every nested too — the mega-menu
product links, the accordion's own children — not just the rows it's meant for). */
.mobile-nav__link {
display: flex; align-items: center; gap: .85rem; font-family: var(--font-heading); font-weight: 700;
font-size: 1.15rem; color: var(--ink); padding: .9rem 1rem; border-radius: var(--radius-md);
}
.mobile-nav__link .icon { width: 22px; height: 22px; color: var(--brand-primary); flex: none; }
.mobile-nav__link.is-active { background: var(--mist); }
/* Products/Industries accordion — native , no JS, matches the FAQ pattern. */
.mobile-nav__group summary {
display: flex; align-items: center; gap: .85rem; cursor: pointer;
font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--ink);
padding: .9rem 1rem; list-style: none;
}
.mobile-nav__group summary::-webkit-details-marker { display: none; }
.mobile-nav__group summary .icon:first-child { width: 22px; height: 22px; color: var(--brand-primary); flex: none; }
.mobile-nav__group-chevron { width: 18px; height: 18px; flex: none; margin-left: auto; transition: transform var(--dur-fast) var(--ease-out); }
.mobile-nav__group[open] .mobile-nav__group-chevron { transform: rotate(180deg); }
.mobile-nav__group a {
display: flex; align-items: center; gap: .65rem; font-family: inherit; font-weight: 500; font-size: 1rem;
color: var(--ink); padding: .6rem 1rem .6rem 2.85rem;
}
.mobile-nav__group a .icon { width: 18px; height: 18px; color: var(--brand-primary); flex: none; }
.mobile-nav__group .mobile-nav__view-all { color: var(--brand-primary); font-weight: 700; padding-top: .75rem; }
.mobile-nav__cta { width: 100%; justify-content: space-between; padding-right: .5rem; }
.mobile-nav__cta-icon {
width: 32px; height: 32px; border-radius: 50%; background: var(--brand-primary-dark);
display: flex; align-items: center; justify-content: center; flex: none;
}
.mobile-nav__cta-icon .icon { width: 16px; height: 16px; }
.mobile-nav__promo, .mobile-nav__help {
display: flex; gap: .85rem; margin-top: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-md);
}
.mobile-nav__promo { background: var(--mist); align-items: flex-start; }
.mobile-nav__promo-icon { width: 22px; height: 22px; color: var(--brand-primary); flex: none; margin-top: .1rem; }
.mobile-nav__promo strong, .mobile-nav__help strong { display: block; font-size: .95rem; color: var(--ink); }
.mobile-nav__promo p, .mobile-nav__help p { font-size: .85rem; color: var(--muted); margin: .3rem 0 0; }
.mobile-nav__help { background: var(--mist); flex-direction: column; }
.mobile-nav__help a { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-weight: 700; color: var(--ink); }
.mobile-nav__help a .icon { width: 16px; height: 16px; color: var(--brand-primary); }
.mobile-nav__social { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.mobile-nav__social a {
width: 46px; height: 46px; border-radius: 50%; background: var(--brand-dark); color: var(--white);
display: flex; align-items: center; justify-content: center;
}
.mobile-nav__social a .icon { width: 20px; height: 20px; }
@media (min-width: 960px) { .mobile-nav { display: none !important; } }
/* Sticky mobile utility bar — mobile only, see header.php comment. */
body { padding-bottom: 70px; }
.mobile-cta-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
display: flex; align-items: center; gap: 1rem; padding: .65rem var(--gutter);
background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(13, 33, 24, .08);
}
.mobile-cta-bar__phone { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .85rem; color: var(--ink); flex: 1; min-width: 0; }
.mobile-cta-bar__phone .icon { width: 18px; height: 18px; color: var(--brand-primary); flex: none; }
.mobile-cta-bar__phone span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-cta-bar .btn { flex: none; padding-block: .65rem; }
@media (min-width: 960px) {
body { padding-bottom: 76px; }
.mobile-cta-bar { display: none; }
}
/* Desktop sticky utility bar — ≥960px only, see header.php comment. Hidden below
that (the mobile-cta-bar above covers <960px instead). */
.desktop-cta-bar { display: none; }
@media (min-width: 960px) {
.desktop-cta-bar {
display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(13, 33, 24, .08);
}
}
.desktop-cta-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: .85rem; }
.desktop-cta-bar__item { display: flex; align-items: center; gap: .75rem; }
.desktop-cta-bar__item--hours { justify-content: flex-end; text-align: right; }
.desktop-cta-bar__icon {
flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--mist);
color: var(--brand-primary); display: flex; align-items: center; justify-content: center;
}
.desktop-cta-bar__icon .icon { width: 19px; height: 19px; }
.desktop-cta-bar__text { display: flex; flex-direction: column; }
.desktop-cta-bar__item--hours .desktop-cta-bar__text { align-items: flex-end; }
.desktop-cta-bar__text small { font-size: .78rem; color: var(--muted); }
.desktop-cta-bar__text strong { font-family: var(--font-heading); font-size: 1rem; color: var(--ink); }
/* ---- 7. Hero — cinematic 35/65, art direction pass 2026-09-06 ---- */
/* Dark-ground copy left, full-bleed photo right, no diagonal. Header overlays this
section transparently (see .site-header--overlay above); the negative margin here
pulls the section up underneath it so the photo runs full-height behind the nav,
while .hero__inner's own padding keeps the actual copy clear of the nav row. */
.hero--cinematic {
position: relative; overflow: hidden; color: var(--white);
background: linear-gradient(155deg, var(--brand-dark) 0%, #0A1710 55%, var(--brand-primary-dark) 140%);
margin-top: calc(-1 * var(--header-h));
}
/* Mobile-first: the photo is a full-bleed BACKGROUND behind the copy (absolute,
inset:0), not a separate block stacked above it. It used to be position:relative
with its own aspect-ratio (a normal-flow block), which stacked a ~600px photo
above the actual hero content instead of behind it — nearly doubling the
section's real height on mobile and leaving the image serving no purpose (no
text ever sat on it). Desktop's 65%-width side-panel treatment below is just an
override of this same absolute positioning, not a different mechanism. */
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media-overlay {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(0deg, rgba(4, 12, 8, .95) 0%, rgba(4, 12, 8, .8) 45%, rgba(4, 12, 8, .55) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: calc(var(--header-h) + clamp(2rem, 6vw, 3.5rem)) clamp(3.5rem, 7vw, 5rem); }
.hero__copy { max-width: 480px; }
.hero__copy h1 {
font-weight: 800; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.14;
margin-block: .7rem 1.1rem; color: var(--white);
}
.hero__copy h1 em { font-style: normal; color: var(--brand-spring); }
.hero__body { color: var(--muted-on-dark); font-size: 1.05rem; max-width: 42ch; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin-top: 2rem; }
.hero__secondary-link { color: var(--white); }
.hero__secondary-link .icon { color: var(--brand-spring); }
/* Certification row — monochrome, minimal, no badge/card treatment. */
.hero__certs { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border-on-dark); }
.hero__certs li {
display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--muted-on-dark);
}
.hero__certs .icon { width: 15px; height: 15px; }
/* Small pill badge above the eyebrow — borrowed from the client's reference site,
built from tokens already in use elsewhere (same circular-chip language as the
cert badges), not a new rounded system. */
.hero__pill {
display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1rem;
border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid var(--border-on-dark);
font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--white); margin-bottom: 1.1rem;
}
.hero__pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-spring); flex: none; }
@media (min-width: 860px) {
.hero__media { position: absolute; inset: 0 0 0 auto; width: 65%; aspect-ratio: auto; }
.hero__media-overlay { background: linear-gradient(90deg, var(--brand-dark) 0%, rgba(13, 33, 24, 0) 30%), linear-gradient(0deg, rgba(4, 12, 8, .85) 0%, transparent 32%); }
}
/* ---- 7b. Floating hero stat card — layout idea from pestmanagementindia.com,
kept inside existing tokens (white, --radius-lg, --shadow-md, brand-primary icons). */
.hero-stats-float { position: relative; z-index: 3; margin-top: -40px; margin-bottom: clamp(2rem, 5vw, 3.5rem); padding-inline: var(--gutter); }
.hero-stats-float__grid {
background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
display: grid; grid-template-columns: repeat(2, 1fr); max-width: var(--container-w); margin-inline: auto;
}
.hero-stats-float__item {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: .5rem; padding: 1.1rem .75rem;
border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.hero-stats-float__item .icon { width: 22px; height: 22px; color: var(--brand-primary); flex: none; }
/* Real root cause of the "25+" vs "ISO 9001:2015"/"Global"/"Custom" size mismatch,
found by measuring computed font-size on the actual nested elements: the label
rule below used to be `span:last-child` — a descendant selector, so it matched
not only the intended label span but ALSO the count-up (it's
strong's only, and therefore last, child). That span rule (.78rem, higher
specificity than `.hero-stats-float__item strong`) shrank the digits directly,
which no amount of styling `strong` could override since a rule matched on an
element itself always beats an inherited value from its parent. Fixed by giving
the label span its own class instead of relying on structural position. */
.hero-stats-float__item strong { display: flex; align-items: center; justify-content: center; min-height: 1.5em; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.hero-stats-float__label { display: block; font-size: .74rem; color: var(--muted); }
.hero-stats-float__item:nth-child(2n) { border-right: none; }
.hero-stats-float__item:nth-last-child(-n+2) { border-bottom: none; }
/* >=720px reverts to the original horizontal layout (icon left, text right) — the
column stack above is a mobile-only fix for "ISO 9001:2015"/"Custom Engineering
Solutions" wrapping badly in the cramped 2-col mobile grid; at 4-across desktop
each item has room to spare and the side-by-side layout reads better. */
@media (min-width: 720px) {
.hero-stats-float { margin-top: -44px; }
.hero-stats-float__grid { grid-template-columns: repeat(4, 1fr); }
.hero-stats-float__item { flex-direction: row; align-items: center; text-align: left; gap: .85rem; padding: 1.5rem; border-bottom: none; }
.hero-stats-float__item .icon { width: 26px; height: 26px; }
.hero-stats-float__item strong { justify-content: flex-start; font-size: 1.15rem; }
.hero-stats-float__label { font-size: .78rem; }
.hero-stats-float__item:nth-child(2n) { border-right: 1px solid var(--border); }
.hero-stats-float__item:last-child { border-right: none; }
}
/* ---- 8. Industries — editorial photo-tile grid, art direction pass v2 2026-09-06 ---- */
.industries-section { padding-bottom: 0; }
/* Six numbered tiles, zero gap — one continuous photo wall, not a card grid.
1 col on mobile (full-width stacked), 2 at tablet, 3×2 from 960px. */
.industry-grid { display: grid; grid-template-columns: 1fr; }
.industry-tile {
position: relative; display: flex; aspect-ratio: 4/3; overflow: hidden; color: var(--white);
}
/* Real photography (assets/img/industries/) as of 2026-09-06 — background-color is
just the load-in/decode-delay fallback now, not the visual itself; .industry-tile
__overlay (below) is what keeps the number/title legible over whatever photo. */
.industry-tile__media { position: absolute; inset: 0; overflow: hidden; background: var(--brand-dark); }
.industry-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.industry-tile__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 12, 8, .75) 0%, rgba(4, 12, 8, .15) 60%, transparent 100%); transition: background var(--dur-fast) var(--ease-out); }
.industry-tile__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-self: flex-end; width: 100%; padding: 1.75rem; }
.industry-tile__num { display: block; font-family: var(--font-heading); font-weight: 700; font-size: .85rem; letter-spacing: .06em; color: var(--muted-on-dark); }
.industry-tile__rule { display: block; width: 24px; height: 2px; background: var(--brand-spring); margin-block: .9rem .9rem; }
.industry-tile h3 { font-size: 1.2rem; margin-bottom: .5rem; color: var(--white); }
.industry-tile p { font-size: .85rem; color: var(--muted-on-dark); max-width: 32ch; margin-bottom: 1rem; }
.industry-tile .link-arrow { color: var(--white); font-size: .85rem; }
.industry-tile .link-arrow .icon { color: var(--brand-spring); }
.industry-tile:hover .industry-tile__overlay { background: linear-gradient(0deg, rgba(4, 12, 8, .85) 0%, rgba(4, 12, 8, .25) 60%, transparent 100%); }
@media (min-width: 640px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
/* Desktop: break the uniform 3×2 grid — the first tile becomes a 2×2 anchor
(dense packing backfills the other 5 around it), not six identical boxes. */
@media (min-width: 960px) {
.industry-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(240px, 1fr); grid-auto-flow: dense; }
.industry-tile { aspect-ratio: auto; }
.industry-tile:first-child { grid-column: span 2; grid-row: span 2; }
.industry-tile:first-child .industry-tile__content { padding: 2.5rem; }
.industry-tile:first-child h3 { font-size: 1.7rem; }
.industry-tile:first-child p { font-size: .95rem; max-width: 40ch; }
}
/* ---- 9. About ENCS — editorial split + feature strip, art direction pass 2026-09-06 ---- */
/* Zero section padding on both edges, not just the bottom — the default top padding
(--section-pad-y, ~96px) was leaving the photo short of the section's actual top
edge even though it filled its grid row exactly. The row's own height (driven by
.about-copy's padding-block) is what gives this section its size now; there's no
additional inset on top of that, so the image genuinely touches where this
section starts and where it ends. Its own feature strip needs the same treatment
— the strip's default margin-top (used elsewhere to separate it from a card grid
above) would otherwise reopen the same gap right below the image. */
.about-section { padding-block: 0; }
.about-section .feature-strip { margin-top: 0; }
.about-copy { max-width: 46ch; padding-block: clamp(2rem, 5vw, 3rem) 0; }
.about-copy h2 { margin-block: .6rem 1.25rem; }
.about-copy p { color: var(--muted); margin-bottom: 1.25rem; }
.about-copy .btn { margin-top: .5rem; }
/* Mobile: image follows the text, full-width, own aspect-ratio — no side column
for it to stretch into yet. */
.about-split__media { aspect-ratio: 4/3; margin-top: clamp(2rem, 5vw, 3rem); overflow: hidden; }
.about-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 960px) {
/* CSS Grid, not an absolutely-positioned overlay — the media column stretches to
match whatever height the text column's content needs, guaranteed, with no
dependency on a containing-block height calculation staying in sync. That
absolute-overlay approach was the previous implementation here and could
under-report the split's height in edge cases, leaving the image short of
the section's actual top/bottom edges. Grid's stretch alignment can't do that:
the row height IS the taller column's content height, full stop. */
.about-split { display: grid; grid-template-columns: minmax(0, 1fr) 58%; column-gap: clamp(2.5rem, 5vw, 4rem); align-items: stretch; }
.about-split .container { align-self: center; padding-right: 0; }
.about-split__media { aspect-ratio: auto; margin-top: 0; box-shadow: -32px 0 48px -32px rgba(13, 33, 24, .18); }
.about-copy { padding-block: clamp(3rem, 7vw, 4.5rem); }
}
/* ---- 9b. Feature strip — shared by Industries, About + Products (includes/feature-strip.php).
.section--dark (existing global class) supplies the dark background + heading
color; this block only adds the strip's own layout. __cta is optional (Products only). */
.feature-strip { margin-top: clamp(2.5rem, 5vw, 4rem); }
.feature-strip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.feature-strip__grid { flex: 1 1 480px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
.feature-strip__cta { flex: none; }
.feature-item { display: flex; gap: 1rem; padding-right: 1rem; border-right: 1px solid var(--border-on-dark); }
.feature-item:last-child, .feature-item:nth-child(2n) { border-right: none; }
.feature-item__icon { width: 30px; height: 30px; flex: none; color: var(--brand-spring); }
.feature-item h3 { font-size: 1rem; margin-bottom: .3rem; }
.feature-item p { font-size: .85rem; color: var(--muted-on-dark); margin: 0; }
@media (min-width: 720px) {
.feature-strip__grid { grid-template-columns: repeat(4, 1fr); }
.feature-item:nth-child(2n) { border-right: 1px solid var(--border-on-dark); }
.feature-item:last-child { border-right: none; }
}
/* ---- 10. Products — curated showcase carousel, art direction pass 2026-09-06 ---- */
.products-section { padding-bottom: 0; }
.product-carousel { position: relative; margin-top: 2.5rem; }
.product-carousel__viewport { padding-bottom: .5rem; }
/* The scroll container has to be the same element main.js calls scrollBy() on
(#product-track) — overflow on an ancestor of the scrolled element is a no-op. */
.product-carousel__track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.product-carousel__track::-webkit-scrollbar { display: none; }
/* "More product, less UI" — no border, the photo runs larger (5:4 not 4:3), body
padding trimmed so the image reads as the point of the card, not the text under it. */
.product-card {
flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column;
background: var(--white); border-radius: var(--radius-md); overflow: hidden;
box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-card__media { aspect-ratio: 5/4; background: var(--mist); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .65rem; flex: 1; }
.product-card__body h3 { font-size: 1.1rem; }
.product-card__body > p { color: var(--muted); font-size: .88rem; margin: 0; }
.product-card__apps { display: flex; flex-direction: column; gap: .5rem; margin: .25rem 0; padding-top: .9rem; border-top: 1px solid var(--border); }
.product-card__apps li { display: flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--muted); }
.product-card__apps .icon { width: 16px; height: 16px; color: var(--brand-primary); flex: none; }
.product-card .link-arrow { margin-top: auto; font-size: .88rem; padding-top: .5rem; }
/* Circular nav buttons — desktop only; mobile relies on native swipe. */
.carousel-nav {
display: none; position: absolute; top: 38%; transform: translateY(-50%); z-index: 2;
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--white);
align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
transition: box-shadow var(--dur-fast) var(--ease-out);
}
.carousel-nav:hover { box-shadow: var(--shadow-md); }
.carousel-nav .icon { width: 18px; height: 18px; color: var(--ink); }
.carousel-nav__icon--prev { transform: rotate(180deg); }
@media (min-width: 540px) { .product-card { flex-basis: 46%; } }
@media (min-width: 860px) { .product-card { flex-basis: 31%; } }
@media (min-width: 960px) {
.carousel-nav { display: flex; }
.carousel-nav--prev { left: -22px; }
.carousel-nav--next { right: -22px; }
}
@media (min-width: 1200px) { .product-card { flex-basis: 23%; } }
@media (min-width: 1520px) { .product-card { flex-basis: 18.4%; } }
/* Mobile carousel controls — single arrow either side + position dots, replacing the
old partial-next-card peek. Desktop already has room for several cards at once plus
the edge-mounted .carousel-nav buttons, so this whole row hides at the same ≥960px
point those buttons appear. */
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.carousel-controls__arrow {
flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
background: var(--white); display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-fast) var(--ease-out);
}
.carousel-controls__arrow:hover { box-shadow: var(--shadow-md); }
.carousel-controls__icon { width: 16px; height: 16px; color: var(--ink); }
.carousel-controls__icon--prev { transform: rotate(180deg); }
.carousel-dots { display: flex; align-items: center; gap: .4rem; }
.carousel-dots__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: var(--border); transition: width var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.carousel-dots__dot.is-active { width: 22px; background: var(--brand-primary); }
@media (min-width: 960px) { .carousel-controls { display: none; } }
/* ---- 11. Manufacturing — cinematic full-bleed band, art direction pass 2026-09-06 ---- */
.manufacturing { position: relative; overflow: hidden; padding-bottom: 0; }
.manufacturing__bg { position: absolute; inset: 0; z-index: 0; }
.manufacturing__bg img { width: 100%; height: 100%; object-fit: cover; }
.manufacturing__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,33,24,.94) 0%, rgba(13,33,24,.82) 55%, rgba(13,33,24,.55) 100%); }
.manufacturing .container { position: relative; z-index: 1; }
.manufacturing__inner { display: flex; flex-direction: column; gap: 2.5rem; padding-block: clamp(3rem, 7vw, 5rem); }
.manufacturing__copy { max-width: 42ch; }
.manufacturing__copy p { color: var(--muted-on-dark); margin-block: 1.1rem 2rem; }
/* Capability stack embedded in the photo — horizontal swipe on mobile, a fixed-width
vertical stack pinned to the image's right edge from 960px. */
.manufacturing__panels { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.manufacturing__panels::-webkit-scrollbar { display: none; }
.manufacturing__panel {
position: relative; display: block; flex: 0 0 72%; aspect-ratio: 16/10; scroll-snap-align: start;
border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md);
}
.manufacturing__panel-media { position: absolute; inset: 0; }
.manufacturing__panel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.manufacturing__panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 12, 8, .88) 0%, rgba(4, 12, 8, .1) 65%); }
.manufacturing__panel-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.15rem; }
.manufacturing__panel-foot h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin: 0; line-height: 1.3; }
.manufacturing__panel .link-arrow { flex: none; color: var(--brand-spring); }
.manufacturing__panel:hover .manufacturing__panel-media img { transform: scale(1.08); }
@media (min-width: 960px) {
/* Flex with a capped gap, not a grid "1fr" track — 1fr greedily fills whatever is
left of the (now much wider, see --container-w) container, which is exactly
what was stranding the panel stack far from the text with a dead gap between.
A fixed gap keeps them as one composed group regardless of viewport; any
leftover container width just becomes trailing space after the panels, not a
gap inside the layout. Panels also scale up with the viewport instead of
staying pinned at a small fixed width that reads as an afterthought. */
.manufacturing__inner { flex-direction: row; align-items: center; gap: clamp(3rem, 6vw, 6rem); }
.manufacturing__copy { flex: none; }
.manufacturing__panels { flex-direction: column; overflow: visible; margin-inline: 0; padding-inline: 0; flex: none; }
.manufacturing__panel { flex: none; width: clamp(240px, 20vw, 320px); }
}
/* ---- 11b. Why Choose ENCS — editorial 4-card layout, 2026-09-06 ---- */
.why-choose-section { padding-bottom: 0; }
.why-choose-section h2 em { font-style: normal; color: var(--brand-primary); }
.why-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.why-card {
display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Reverted the alternating-aspect-ratio idea (2026-09-06) — a taller image on the
even cards forced every card in the row to match that height (same grid row),
which left the odd cards with a big dead gap between their (shorter) description
and the "Learn More" link pinned to the bottom. Uniform height fixes that
directly; consistency won over the rhythm experiment here. */
.why-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--mist); }
.why-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.why-card:hover .why-card__media img { transform: scale(1.05); }
.why-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.why-card__body h3 { font-size: 1.1rem; }
.why-card__body > p { color: var(--muted); font-size: .9rem; margin: 0; }
.why-card .link-arrow { margin-top: auto; padding-top: .5rem; font-size: .88rem; }
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
/* ---- 11c. Certifications — deliberately not a badge grid, 2026-09-06 ---- */
/* Taller than its neighbors on purpose (clamp caps well above --section-pad-y) —
varying section height is the point, not an oversight. */
.certifications-section { padding-block: clamp(5rem, 11vw, 8rem); }
.certifications__grid { display: grid; gap: 3rem; align-items: center; }
.certifications__media { aspect-ratio: 4/3; }
.certifications__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* no radius, no border, no shadow — minimal framing is the framing */
.certifications__copy { max-width: 46ch; }
.certifications__copy h2 { margin-block: .6rem 1.25rem; }
.certifications__copy > p { color: var(--muted); margin-bottom: 0; }
.certifications__iso { border-block: 1px solid var(--border); padding-block: 1.5rem; margin-block: 2.25rem 1.5rem; }
.certifications__iso-label { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--ink); }
.certifications__iso-caption { display: block; font-size: .85rem; color: var(--muted); margin-top: .35rem; }
.certifications__others { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.75rem; }
@media (min-width: 960px) { .certifications__grid { grid-template-columns: 1.15fr 1fr; } }
/* ---- 12. Sustainability band ---- */
.sustain-grid { display: grid; gap: 2.5rem; }
/* No licensed nature photography exists yet (see content/home.php note) — an
illustrative gradient panel stands in for a real photo until a shoot is budgeted. */
.sustain-media {
position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3;
background: linear-gradient(160deg, var(--brand-dark) 0%, var(--brand-primary-dark) 55%, var(--brand-primary) 100%);
display: flex; align-items: center; justify-content: center;
}
.sustain-media__icon { width: 35%; height: 35%; color: var(--brand-spring); stroke-width: 1.1; }
.sustain-copy p { color: var(--muted); margin-block: 1.1rem 1.75rem; max-width: 40ch; }
.sustain-cards { display: flex; flex-direction: column; gap: 1.5rem; }
.sustain-card { display: flex; gap: 1rem; }
.sustain-card .icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--mist); display: flex; align-items: center; justify-content: center; color: var(--brand-primary); flex: none; }
.sustain-card .icon { width: 22px; height: 22px; }
.sustain-card h3 { font-size: 1rem; margin-bottom: .3rem; }
.sustain-card p { color: var(--muted); font-size: .9rem; margin: 0; max-width: 46ch; }
@media (min-width: 860px) {
.sustain-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.sustain-media { grid-column: 1; }
.sustain-copy { grid-column: 2; }
.sustain-cards { grid-column: 3; }
}
/* ---- 13. Global CTA band (includes/cta-band.php) — one component, every page ---- */
/* Hand-built repeating circuit-trace tile (SVG data-uri, not a photo, not AI
imagery) — a faint lattice of traces + solder-pad dots, barely visible, shared
by the CTA band and the footer so the two read as one continuous dark surface. */
.circuit-bg {
background-color: var(--brand-dark);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.5'%3E%3Cpath d='M0 70H40M100 70H140M70 0V40M70 100V140M40 70L70 40M70 100L100 70'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Ccircle cx='40' cy='70' r='3'/%3E%3Ccircle cx='100' cy='70' r='3'/%3E%3Ccircle cx='70' cy='40' r='3'/%3E%3Ccircle cx='70' cy='100' r='3'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
}
.global-cta { position: relative; overflow: hidden; text-align: center; }
.global-cta__inner { max-width: 640px; padding-block: clamp(3rem, 7vw, 4.5rem); }
.global-cta h2 { color: var(--white); font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.global-cta h2 em { font-style: normal; color: var(--brand-spring); }
.global-cta p { color: var(--muted-on-dark); margin-top: .85rem; }
.global-cta .btn { margin-top: 1.75rem; }
.global-cta__note { font-size: .82rem; color: var(--muted-on-dark); opacity: .8; margin-top: 1rem; }
@media (min-width: 960px) {
/* Wide enough at desktop for the CTA body copy to sit on one line instead of
wrapping — the 640px mobile/tablet max-width is still right for those sizes. */
.global-cta__inner { max-width: 900px; }
.global-cta p { white-space: nowrap; }
}
/* Pill variant — additive, scoped to this one CTA; every other button on the site
keeps its existing --radius-sm corners untouched. */
.btn-pill { border-radius: 999px; padding-inline: 2rem; }
/* ---- 14. Footer ---- */
.site-footer { color: var(--muted-on-dark); }
.footer-grid { display: grid; gap: 2.5rem; padding-block: 4rem 2.5rem; }
.footer-brand img { height: 80px; width: auto; margin-bottom: 1rem; }
.footer-brand p { max-width: 32ch; font-size: .9rem; }
.footer-col h4 { color: var(--white); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer-col a { font-size: .9rem; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--white); }
.footer-contact li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.footer-contact .icon { width: 18px; height: 18px; color: var(--brand-spring); flex: none; margin-top: .15rem; }
.footer-social { display: flex; gap: .75rem; margin-top: 1.25rem; }
.footer-social a { width: 38px; height: 38px; border: 1px solid var(--border-on-dark); border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.footer-social .icon { width: 17px; height: 17px; }
/* Certification badges — plain initials in a ring, not fabricated seal graphics;
CLAUDE.md §12 already flags that we don't have verified certificate numbers/
expiry, so the footer states the marks themselves, nothing more specific. */
.footer-cert-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.footer-cert-badge {
width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-on-dark);
display: flex; align-items: center; justify-content: center; text-align: center;
font-family: var(--font-heading); font-weight: 700; font-size: .62rem; line-height: 1.05;
color: var(--brand-spring); flex: none;
}
.footer-certs p { font-size: .85rem; }
.footer-bottom { border-top: 1px solid var(--border-on-dark); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem; }
.footer-bottom ul { display: flex; gap: 1.5rem; }
.footer-credit a { color: var(--brand-spring); transition: color var(--dur-fast) var(--ease-out); }
.footer-credit a:hover { color: var(--white); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.3fr .8fr 1fr 1fr; } }
/* ---- 14b. Page hero — shared by every inner page (includes/page-header.php).
Layout idea from pestmanagementindia.com's service-page hero (rounded photo card,
pill badge, breadcrumb under the H1) — tokens, fonts and radius are all our own,
nothing copied from their palette. Reuses .hero__pill/.hero__pill-dot as-is (same
dark-ground chip already defined for the homepage hero) and .breadcrumb's own
markup/separator, just recolored for a dark ground here. */
.page-hero {
position: relative; overflow: hidden; color: var(--white);
/* Same box model as .container (max-width + auto-center), not var(--gutter)
side margins — those two were computing to different insets on wide screens
(gutter caps at 2.5rem while .container's centering can leave 100px+ on
either side past ~1750px), so the hero's edges drifted out of line with
every section below it. Matching .container's math keeps them flush at
any viewport width. */
max-width: var(--container-w); margin: 1rem auto 0; border-radius: var(--radius-lg);
background: var(--brand-dark);
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero__media::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(4,12,8,.92) 0%, rgba(4,12,8,.55) 55%, rgba(4,12,8,.35) 100%);
}
.page-hero__inner { position: relative; z-index: 1; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem) clamp(1.75rem, 4vw, 2.5rem); }
.page-hero h1 {
font-style: italic; font-weight: 800; color: var(--white); max-width: 26ch;
margin-block: 0 .9rem; font-size: clamp(2rem, 4.5vw, 3.1rem);
}
.page-hero h1 em { font-style: italic; color: var(--brand-spring); }
.page-hero__intro { color: var(--muted-on-dark); max-width: 60ch; margin-bottom: 1.5rem; font-size: 1.05rem; }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.page-hero .breadcrumb { color: var(--muted-on-dark); font-size: .85rem; margin-top: 1.25rem; padding-block: 0; }
.page-hero .breadcrumb a { color: var(--muted-on-dark); }
.page-hero .breadcrumb a:hover { color: var(--white); }
.page-hero .breadcrumb li:not(:last-child)::after { color: var(--border-on-dark); }
.page-hero .breadcrumb [aria-current] { color: var(--brand-spring); }
/* ---- 15. Inner-page detail components — shared by every product detail page
(includes/product-page.php) and reusable on any future inner page (Quality,
Manufacturing, About) that needs the same media+copy / feature-list / checklist
shapes. Deliberately generic names, not "product-*" — the whole point is one
definition reused everywhere instead of near-duplicate rules drifting apart
per page (the H2 bug this rebuild is working to avoid repeating). ---- */
.split { display: grid; gap: 2.5rem; align-items: start; }
.split__media { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split__media iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Small caption overlay in a photo's corner (Industries hub) — needs a scrim under
it for legibility since the photo underneath varies. */
.split__media-caption {
position: absolute; right: 0; bottom: 0; left: 0; padding: 2.5rem 1.5rem 1.25rem;
background: linear-gradient(0deg, rgba(4,12,8,.75) 0%, transparent 100%);
color: var(--white); text-align: right; font-size: .78rem; line-height: 1.5;
letter-spacing: .03em; text-transform: uppercase;
}
.split__media-caption::before { content: ''; display: block; width: 22px; height: 2px; background: var(--brand-spring); margin: 0 0 .5rem auto; }
.contact-info { display: grid; gap: 1.25rem; margin-top: 2rem; }
.contact-info__item { display: flex; gap: 1rem; align-items: center; }
.contact-info__item h3 { font-size: 1rem; margin-bottom: .25rem; }
.contact-info__item p, .contact-info__item a { color: var(--muted); }
.contact-info__item a:hover { color: var(--brand-primary); }
.contact-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin-top: 2rem; }
/* Reach Us column — art direction pass 2026-09-06, layout idea from a client
reference (dot-grid texture standing in for a literal world map, kept simple/
hand-built rather than sourcing actual map art). */
.contact-reach {
position: relative; max-width: 56ch;
background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
background-size: 18px 18px; background-position: -9px 40px;
}
.contact-reach p { color: var(--muted); margin-bottom: 1.1rem; }
.contact-form-col h3 { margin-block: .6rem 1.5rem; }
.contact-map { position: relative; aspect-ratio: 16/11; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Full-width variant — the map now runs the width of the whole section (client
asked the form to take its old, narrower split-column slot instead), so a
photo-split aspect-ratio would make it absurdly tall; a wide banner ratio reads
right at full container width. */
.contact-map--wide { aspect-ratio: 21/9; }
@media (min-width: 900px) { .contact-map--wide { aspect-ratio: 3/1; } }
/* Bottom-right, not top-left — Google's own embed renders its native place card
(name, address, rating) top-left whenever the query matches a real listing, and
our pill was sitting directly on top of it, hiding the business name. */
.contact-map__larger {
position: absolute; bottom: 2.75rem; right: 1rem; z-index: 1; background: var(--white); color: #1A73E8;
font-size: .82rem; font-weight: 600; padding: .55rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.contact-map__larger:hover { background: var(--mist); }
.contact-map-features { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .contact-map-features { grid-template-columns: repeat(3, 1fr); } }
.split__copy { max-width: 56ch; }
.split__copy p { color: var(--muted); margin-bottom: 1.1rem; }
@media (min-width: 900px) {
.split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
/* Contact page: the right column is a map + a 3-card row stacked under it, taller
than the copy column — top-align instead of the default vertical centering. */
.contact-split { align-items: start; }
}
.detail-features { display: grid; gap: 1.75rem; margin-top: 2.5rem; }
.detail-feature { display: flex; gap: 1rem; }
.detail-feature__icon {
width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm); background: var(--mist); color: var(--brand-primary);
}
.detail-feature__icon .icon { width: 22px; height: 22px; }
/* Text-badge variant (Quality page's CE/UL/RoHS/... glossary) — same slot, a short
label instead of an svg icon. */
.detail-feature__icon--text { font-size: .8rem; font-weight: 700; font-family: var(--font-heading); }
.detail-feature h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.detail-feature p { color: var(--muted); font-size: .92rem; margin: 0; }
@media (min-width: 720px) { .detail-features { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } }
.check-list { display: grid; gap: 1rem; margin-top: 2rem; list-style: none; padding: 0; }
.check-list li { display: flex; align-items: flex-start; gap: .75rem; color: var(--ink); }
.check-list .icon { width: 20px; height: 20px; flex: none; color: var(--brand-primary); margin-top: .15rem; }
.section--dark .check-list li { color: var(--white); }
.section--dark .check-list .icon { color: var(--brand-spring); }
@media (min-width: 720px) { .check-list { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } }
.check-list--single { grid-template-columns: 1fr !important; }
/* ---- 15c. Product detail page — spec-sheet layout, art direction pass 2026-09-06.
Reference: electronerves.in's own control-panel-assembly.html, which the client
specifically asked to match — a dense single main column (photo, intro, then
Key Features / Applications / Why Choose as solid-color bar headings over plain
checklists) next to a sticky sidebar that links every other product, standing in
for a separate "related products" grid. Real content in a real layout, not a
spread of alternating full-bleed bands. */
.product-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) {
.product-layout { grid-template-columns: 260px 1fr; }
.product-sidebar { position: sticky; top: 6rem; }
}
.product-sidebar { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.product-sidebar__head {
background: var(--brand-primary); color: var(--white); font-family: var(--font-heading);
font-weight: 700; font-size: 1rem; padding: 1rem 1.25rem;
}
.product-sidebar__list a {
display: flex; align-items: center; gap: .65rem; padding: .85rem 1.25rem;
border-bottom: 1px solid var(--border); font-size: .92rem; color: var(--ink);
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.product-sidebar__list a:last-child { border-bottom: none; }
.product-sidebar__list a .icon { width: 13px; height: 13px; flex: none; color: var(--brand-primary); }
.product-sidebar__list a:hover { background: var(--mist); color: var(--brand-primary); }
.product-sidebar__list a.is-active { background: var(--mist); color: var(--brand-primary); font-weight: 600; }
.product-sidebar__foot { padding: 1.1rem 1.25rem; border-top: 1px solid var(--border); background: var(--mist); font-size: .85rem; color: var(--muted); }
.product-sidebar__foot a { color: var(--brand-primary); font-weight: 600; }
/* Solid-color bar heading — a deliberate, documented exception to the sitewide
dual-color h2 rule (main.css §"Dual-color heading" comment already carves out
room for a section that intentionally differs, same as the CTA band). Real h2s
for outline/schema purposes, styled as a label banner instead of display type. */
h2.spec-bar {
background: var(--brand-primary); color: var(--white); font-size: 1.05rem;
padding: .75rem 1.25rem; border-radius: var(--radius-sm); margin: 2.5rem 0 1.25rem;
}
h2.spec-bar:first-child { margin-top: 0; }
.spec-callout {
background: var(--mist); border-left: 3px solid var(--brand-primary); border-radius: var(--radius-sm);
padding: 1.25rem 1.5rem; margin-top: 2rem; color: var(--muted); max-width: 68ch;
}
/* Related-products strip reuses .product-card as-is (includes/... carousel component,
---- 10 above) in a plain wrapping flex row instead of a scroll-snap track. */
.related-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; }
.related-grid .product-card { flex: 0 0 100%; }
@media (min-width: 600px) { .related-grid .product-card { flex-basis: 46%; } }
@media (min-width: 960px) { .related-grid .product-card { flex-basis: 31%; } }
@media (min-width: 1300px) { .related-grid .product-card { flex-basis: 23%; } }
/* FAQ accordion — native /, no JS needed. Products hub only, so far. */
.faq-list { display: grid; gap: 1rem; margin-top: 2.5rem; max-width: 78ch; }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.1rem 1.4rem; }
.faq-item summary {
cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; color: var(--ink);
list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--brand-primary); flex: none; }
.faq-item[open] summary::after { content: '\2013'; }
.faq-item p { color: var(--muted); margin-top: .85rem; margin-bottom: 0; }
/* ---- 15b. Get a Quote form (includes/quote-form.php) — compact card redesign,
art direction pass 2026-09-06 (client reference). ---- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert {
background: #FDECEC; border: 1px solid #F3B9B9; color: #7A2626; border-radius: var(--radius-sm);
padding: .9rem 1.1rem; margin-bottom: 1.5rem; font-size: .92rem;
}
.form-alert a { color: inherit; text-decoration: underline; }
/* The whole form as one rounded card, not just bare fields on the section bg. */
.quote-form { background: var(--mist); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.25rem); }
.form-grid { display: grid; gap: 1.5rem; margin-bottom: 1.75rem; }
.form-field { display: flex; flex-direction: column; gap: .5rem; }
.form-field label { font-size: .92rem; font-weight: 700; color: var(--ink); }
.form-field__required { color: #C0392B; }
/* Leading icon inside the field — one wrapper, icon absolutely placed over the
control's own left padding. */
.form-field__control { position: relative; }
.form-field__icon {
position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); z-index: 1;
width: 20px; height: 20px; color: var(--muted); pointer-events: none;
}
.form-field__control--textarea .form-field__icon { top: 1.1rem; transform: none; }
.form-field input, .form-field select, .form-field textarea {
width: 100%; font: inherit; font-size: .95rem; padding: .9rem 1rem .9rem 2.75rem;
border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); color: var(--ink);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); opacity: .8; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
outline: 2px solid var(--brand-primary); outline-offset: 1px;
}
.form-field select { appearance: none; background-image: none; }
.form-field textarea { resize: vertical; padding-bottom: 1.75rem; }
.form-field__counter { position: absolute; right: 1rem; bottom: .75rem; font-size: .78rem; color: var(--muted); }
.form-field__error { font-size: .82rem; color: #C0392B; }
@media (min-width: 720px) {
.form-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 1.5rem; }
.form-field--full { grid-column: 1 / -1; }
}
/* File drop zone — a dashed-border card replacing the bare native input; the
input itself still fills the zone, transparent, so the whole area stays
clickable (opens the file picker) with zero extra JS, plus real drag-and-drop
handled in assets/js/main.js. */
.file-drop {
position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
gap: .4rem; padding: 2rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius-md);
background: var(--white); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.file-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop--dragover, .file-drop:has(input:focus-visible) { border-color: var(--brand-primary); background: var(--mist); }
.file-drop__icon { width: 26px; height: 26px; color: var(--muted); }
.file-drop__text { font-size: .95rem; color: var(--ink); }
.file-drop__text strong { color: var(--brand-primary); }
.file-drop--has-file .file-drop__text { font-weight: 600; color: var(--brand-primary); }
.file-drop__hint { font-size: .78rem; color: var(--muted); }
.form-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.form-submit-note { font-size: .85rem; color: var(--muted); margin: 0; }
/* ---- 15e. Industries hub — per-industry hero + application cards, art direction
pass 2026-09-06 (industries/index.php). Reuses .split/.split--reverse (copy left,
photo right) and .eyebrow's icon variant as-is; the pieces below are new. ---- */
.industry-name { font-size: clamp(2.1rem, 4.5vw, 3rem); margin-block: .5rem 1.1rem; }
.mini-features { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin: 1.75rem 0 2rem; }
.mini-feature { display: flex; align-items: center; gap: .75rem; }
/* .mini-feature .mini-feature__icon, not just .mini-feature__icon — the icon span
is itself a and a descendant of .mini-feature, so the plain-text rule
below (.mini-feature span, specificity 0,1,1) was also matching it and its
display:block was beating this rule's display:flex (0,1,0 alone loses that
fight even though it's the only rule setting align/justify-content, which is
exactly why the icon rendered top-left instead of centered — the same class of
selector-collision bug as the earlier hero-stats-float fix). Compounding the
selector to 0,2,0 wins outright instead of relying on any specific class order. */
.mini-feature .mini-feature__icon {
width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: var(--mist); color: var(--brand-primary);
}
.mini-feature__icon .icon { width: 20px; height: 20px; }
.mini-feature span { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); line-height: 1.3; }
/* Title/desc variant (About page's values row) — explicit classes, not the bare
`span` selector above, on purpose: that selector is a descendant match and would
otherwise also catch a nested inner span here (the exact class of bug the
hero-stats-float fix earlier this session was about). */
.mini-feature__title { display: block; font-weight: 700; color: var(--ink); font-size: .95rem; }
.mini-feature__desc { display: block; font-size: .82rem; color: var(--muted); font-weight: 400; margin-top: .15rem; }
/* Divider variant — vertical rules between items instead of wrapping gaps. */
/* flex:1 1 0 + wrap is a single-row technique — on a narrow screen letting the
items wrap while still fighting over equal flex-basis staggered the icons and
overlapped the two-line descriptions. Below 640px this is just a plain stacked
list instead; the divided single-row layout only kicks in once there's a full
row's width to divide. */
.mini-features--divided { flex-direction: column; gap: 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
@media (min-width: 640px) {
.mini-features--divided { flex-direction: row; gap: 0; }
.mini-features--divided .mini-feature { flex: 1 1 0; padding-inline: 1.5rem; }
.mini-features--divided .mini-feature:first-child { padding-left: 0; }
.mini-features--divided .mini-feature:not(:last-child) { border-right: 1px solid var(--border); }
}
/* ---- 15f. About page "What Drives Us" — diagonal photo split + mission/vision
cards, art direction pass 2026-09-06 (client reference). ---- */
.mv-split { display: grid; gap: 2.5rem; }
.mv-intro { color: var(--muted); margin-top: .85rem; max-width: 52ch; }
.mv-cards { display: grid; gap: 1.25rem; margin-top: 2rem; }
.mv-card { background: var(--mist); border-radius: var(--radius-md); padding: 1.5rem; }
.mv-card__icon {
width: 56px; height: 56px; border-radius: 50%; background: rgba(10, 124, 68, .12); color: var(--brand-primary);
display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
}
.mv-card__icon .icon { width: 26px; height: 26px; }
.mv-card h3 { font-size: 1.1rem; }
.mv-card__rule { display: block; width: 22px; height: 2px; background: var(--brand-primary); margin: .6rem 0 .85rem; }
.mv-card p { color: var(--muted); font-size: .92rem; margin: 0; }
.mv-media { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-md); }
.mv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-media__caption {
position: absolute; top: 1.5rem; right: 1.5rem; text-align: right; color: var(--ink);
font-size: .78rem; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase;
}
.mv-media__caption::before { content: ''; display: block; width: 22px; height: 2px; background: var(--brand-primary); margin: 0 0 .5rem auto; }
@media (min-width: 640px) { .mv-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
.mv-split { grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: stretch; }
.mv-copy { padding-right: 1rem; }
/* No rounded corners once it's clipped to a diagonal — a border-radius on a
clipped edge just looks like a rendering glitch. */
.mv-media { aspect-ratio: auto; border-radius: 0; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); }
}
.industry-applications { display: grid; gap: 2rem; }
.industry-applications__intro { max-width: 40ch; }
.industry-applications__intro h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: .6rem; }
.industry-applications__intro p { color: var(--muted); margin-top: .85rem; }
.app-card h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.app-card p { color: var(--muted); font-size: .92rem; margin: 0; }
.app-card__icon {
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: var(--white); color: var(--brand-primary); box-shadow: var(--shadow-sm);
}
.app-card__icon .icon { width: 22px; height: 22px; }
@media (min-width: 960px) {
.industry-applications { grid-template-columns: 1.1fr repeat(3, 1fr); gap: 2.5rem; align-items: start; }
}
/* ---- 15g. Legal pages (privacy-policy.php, terms-of-use.php) — plain long-form
typography, not the marketing dual-color heading pattern: no in these
headings at all, so they just render in the sitewide default h2 color with zero
CSS override needed — a deliberate, minimal exception in the same spirit as
h2.spec-bar's, documented there. ---- */
.legal-content { max-width: 68ch; }
.legal-content__updated { color: var(--muted); font-size: .88rem; margin-bottom: 2.5rem; }
.legal-content h2 { margin-top: 2.5rem; margin-bottom: .85rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--muted); margin-bottom: 1.1rem; }
.legal-content ul { display: grid; gap: .5rem; margin: 0 0 1.1rem; padding-left: 1.25rem; list-style: disc; }
.legal-content li { color: var(--muted); }
.legal-content a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: .15em; }
.legal-content a:hover { color: var(--brand-primary-dark); }
.legal-content strong { color: var(--ink); }
/* ---- 16. Utility ---- */
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Inline text link within a paragraph — a{color:inherit;text-decoration:none} in the
base reset means a plain in body copy is otherwise invisible against its
surrounding text. */
.link-inline { color: var(--brand-primary); text-decoration: underline; text-underline-offset: .15em; }
.link-inline:hover { color: var(--brand-primary-dark); }
.mt-0 { margin-top: 0; }