/*
* EOM Brand Color System
* ----------------------------------------------------------------------
* Two-color brand, driven entirely by the CSS custom properties below so
* the palette can be re-tuned in ONE place:
*
* --eom-blue #173D5C PRIMARY / structural (header, nav, dark
* sections, footer strip, breadcrumb banner)
* --eom-red #DE2021 ACCENT (buttons, links, icons,
* badges, CTAs, borders, highlights, decorative)
*
* The base theme stylesheet loaded before this file is now
* `style-red.css`, so the red accent is inherited automatically. This
* file only (a) repaints structural elements with the darker EOM blue,
* (b) adds the single-line header layout, and (c) styles the custom
* page components (divisions, services, timeline, culture, media, etc.).
*
* To swap in official brand hex values later, edit the :root block only.
*/
:root {
--eom-blue: #173D5C; /* primary / structural */
--eom-blue-dark: #0F2A42; /* deeper blue for gradients / hovers */
--eom-blue-deep: #12314F;
--eom-red: #DE2021; /* accent */
--eom-red-dark: #B71A1B; /* accent hover */
--eom-ink: #1E293B; /* headings */
--eom-body: #334155; /* body copy */
--eom-muted: #64748B; /* muted text */
--eom-light: #EDF0F2; /* off-white surfaces */
--eom-border: #e4eaee;
/* One rounding for every photo frame and card surface on the site. The
.eom-media frame is the reference: a placeholder and the real photo that
replaces it must round identically, and a card that clips its own media
has to match the frame it clips. Deliberate exceptions, which do NOT read
from this: 50% avatars, the 30px pill, the 3px type badge and the 1px
spec-list dot. */
--eom-radius: 6px;
}
/* ═══════════════════════════════════════════════════════════════
1. STRUCTURAL — darker EOM blue (primary)
═══════════════════════════════════════════════════════════════ */
/* Top bar */
.header-top-area {
background-color: var(--eom-blue) !important;
}
.topbar-menu--bold li a {
color: #ffffff !important;
}
.topbar-menu--bold li a:hover {
color: var(--eom-light) !important;
}
/* Main navigation bar */
.header-navigation-area,
.header-area__desktop .header-navigation-area {
background-color: var(--eom-blue) !important;
padding: 0;
}
.header-navigation__nav--transparent > nav > ul > li > a {
color: #ffffff !important;
}
.header-navigation__nav--transparent > nav > ul > li > a:hover,
.header-navigation__nav--transparent > nav > ul > li.active > a {
color: var(--eom-light) !important;
}
.header-navigation__icon--transparent .header-navigation__icon__search a {
color: #ffffff !important;
}
/* Dropdown submenu */
.header-navigation .submenu {
border-top-color: var(--eom-red);
}
.header-navigation .submenu li a:hover {
color: var(--eom-red);
}
/* Sticky header — stay blue */
.header-sticky.is-sticky,
.header-sticky.is-sticky .header-navigation-area {
background-color: var(--eom-blue) !important;
box-shadow: 0 2px 12px rgba(15, 42, 66, 0.28);
}
.header-sticky.is-sticky .header-navigation__nav > nav > ul > li > a {
color: #ffffff !important;
}
.header-sticky.is-sticky .header-navigation__nav > nav > ul > li > a:hover {
color: var(--eom-light) !important;
}
/* Header CTA "Contact Us" — accent red */
.get-quote-btn-wrapper .ht-btn--default,
.get-quote-btn-wrapper .ht-btn--default:visited {
background-color: var(--eom-red) !important;
border-color: var(--eom-red) !important;
color: #ffffff !important;
}
.get-quote-btn-wrapper .ht-btn--default:hover {
background-color: var(--eom-red-dark) !important;
border-color: var(--eom-red-dark) !important;
color: #ffffff !important;
}
/* Breadcrumb / inner-page banner — blue gradient
(style-red.css never defines .breadcrumb-area-bg, so without this the
banner falls back to raw stock placeholder photos). */
.breadcrumb-area-bg {
background: linear-gradient(135deg, var(--eom-blue-dark) 0%, var(--eom-blue) 55%, #24557a 100%);
position: relative;
min-height: 280px;
display: flex;
align-items: center;
/* extra top padding clears the absolute/transparent site header so the
page title + breadcrumb trail + back-home pill are never clipped */
padding: 125px 0 55px;
}
@media (max-width: 767px) {
.breadcrumb-area-bg { min-height: 200px; padding: 100px 0 40px; }
}
.breadcrumb-area-bg .container { width: 100%; }
.breadcrumb-page-title {
color: #ffffff;
font-weight: 700;
margin: 0;
text-align: center;
}
/* ── Photo hero variant ─────────────────────────────────────────────
Layers a plant photograph BEHIND the navy gradient so the white page
title and section nav keep their contrast. Markup:
…
The photo is a real ![]()
, NOT a CSS background: a relative url() inside
a custom property resolves against the stylesheet holding the var()
(assets/css/), not the page, so the background approach 404s. An ![]()
resolves against the document, survives deployment in a subdirectory,
and is discoverable by the browser's preload scanner. With no ![]()
present the banner degrades to the plain navy gradient. */
.breadcrumb-area-bg--photo {
/* Taller than the plain gradient banner so the photograph has room to
read as an image rather than a tint. */
min-height: 380px;
background: var(--eom-blue-dark);
overflow: hidden;
}
@media (max-width: 767px) {
.breadcrumb-area-bg--photo { min-height: 280px; }
}
.breadcrumb-area-bg__photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
z-index: 0;
border: 0;
}
/* Tinting scrim. Kept light enough for the plant to read, with the
vertical pass darkening the top and bottom edges where the title,
section nav and the sticky header sit. */
.breadcrumb-area-bg--photo::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-image:
/* centred pool of shade under the title + section nav, so contrast
comes from behind the type rather than from flattening the photo */
radial-gradient(ellipse 58% 58% at 50% 52%, rgba(8, 22, 36, 0.78) 0%, rgba(8, 22, 36, 0.42) 55%, rgba(8, 22, 36, 0) 100%),
linear-gradient(180deg, rgba(10, 28, 46, 0.70) 0%, rgba(10, 28, 46, 0.22) 45%, rgba(10, 28, 46, 0.62) 100%),
linear-gradient(135deg, rgba(15, 42, 66, 0.50) 0%, rgba(23, 61, 92, 0.26) 50%, rgba(36, 85, 122, 0.18) 100%);
}
.breadcrumb-area-bg--photo .container {
position: relative;
z-index: 2;
}
/* Lift the type off the photo's brighter hotspots (overhead lighting,
cutting arcs) without lightening the overlay any further. */
.breadcrumb-area-bg--photo .breadcrumb-page-title {
text-shadow: 0 2px 18px rgba(8, 22, 36, 0.55);
}
.breadcrumb-area-bg--photo .eom-breadcrumb-nav a,
.breadcrumb-area-bg--photo .eom-breadcrumb-nav .sep {
text-shadow: 0 1px 10px rgba(8, 22, 36, 0.5);
}
/* Red keyline closing the banner — echoes the accent border already used
by the service and division cards. */
.breadcrumb-area-bg--photo::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
z-index: 3; /* above the photo and the scrim */
background-color: var(--eom-red);
}
/* Grey sections (e.g. "Our Vision", "Services") — repainted deep blue.
Text colors are set explicitly with enough specificity to guarantee
contrast on the navy background regardless of the base theme cascade. */
.grey-bg {
background-color: var(--eom-blue);
}
/* Headings sitting DIRECTLY on the navy background → white.
Scoped to section titles / cta content so component cards placed inside
a navy section (service cards, culture cards) keep their own dark text. */
.grey-bg .section-title-area .title,
.grey-bg .cta-video-content .title,
.grey-bg .cta-video-content h2,
.grey-bg .cta-video-content h3,
.grey-bg .cta-video-content h4 {
color: #ffffff !important;
}
/* Intro / body paragraphs directly on the navy background → light */
.grey-bg .section-title-area p,
.grey-bg .cta-video-content p {
color: #dbe4ec !important;
}
/* Eyebrow label on dark sections — light red tint, beats the theme's
.section-title-area--middle--style2 .subtitle (#999) override */
.grey-bg .section-title-area .subtitle {
color: #ff9d9e !important;
}
.grey-bg .section-title-area--middle--style2 .subtitle::before,
.grey-bg .section-title-area--middle--style2 .subtitle::after {
background-color: rgba(255, 255, 255, 0.25);
}
/* Support-footer strips */
.support-footer__single {
background-color: var(--eom-blue);
background-image: none !important;
color: var(--eom-light);
padding: 35px 50px;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
}
.support-footer__single--dark {
background-color: var(--eom-red);
background-image: none !important;
color: #ffffff;
}
/* ═══════════════════════════════════════════════════════════════
2. ACCENT — EOM red (mostly inherited from style-red.css; these
rules cover custom components + a few overrides)
═══════════════════════════════════════════════════════════════ */
/* Section eyebrow labels */
.subtitle { color: var(--eom-red); }
.subtitle::before { background-color: var(--eom-red); }
/* Section-title underline */
.section-title-area .title::after { background-color: var(--eom-red); }
.section-title-area .title { color: var(--eom-ink); }
/* See-more links */
.see-more-link--dark { color: var(--eom-red); }
.see-more-link--dark:hover { color: var(--eom-red-dark); }
/* Division cards — red top accent */
.industry-two-slider__single-item {
border-top: 4px solid var(--eom-red);
}
.industry-two-slider__single-item__content h3.title a { color: var(--eom-ink); }
.industry-two-slider__single-item__content h3.title a:hover { color: var(--eom-red); }
/* Left-accent on mission/vision content blocks */
.cta-video-content {
border-left: 4px solid var(--eom-red);
padding-left: 28px;
}
.cta-video-area { background-color: #f7fafc; }
/* Buttons — red (inherited, restated for certainty) */
.ht-btn, .ht-btn--default, .ht-btn--default:visited,
input[type="submit"], button[type="submit"] {
background-color: var(--eom-red) !important;
border-color: var(--eom-red) !important;
color: #ffffff !important;
}
.ht-btn:hover, .ht-btn--default:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
background-color: var(--eom-red-dark) !important;
border-color: var(--eom-red-dark) !important;
}
/* re-assert header CTA red-on-hover after the generic rule above */
.get-quote-btn-wrapper .ht-btn--default:hover {
background-color: var(--eom-red-dark) !important;
border-color: var(--eom-red-dark) !important;
}
/* Revolution slider flat buttons */
.TM-Button-flat-01.primary-background-color-important {
background-color: var(--eom-red) !important;
}
.TM-Button-flat-01.secondary-background-color-hover-important:hover {
background-color: var(--eom-red-dark) !important;
}
/* Generic links */
a:hover, a:focus { color: var(--eom-red); }
/* Icons */
.fxt-icon-box-layout-1 .fxt-icon i,
.fxt-icon-box-layout-2 .fxt-icon i,
.feature-icon-box .feature-icon i,
.contact-info-single__icon i {
color: var(--eom-red) !important;
}
/* Scroll-to-top */
.scroll-top { background-color: var(--eom-red); }
.scroll-top:hover { background-color: var(--eom-red-dark); }
/* Mobile menu accents */
.offcanvas-navigation > ul > li > a { color: var(--eom-ink); }
.offcanvas-navigation > ul > li > a:hover { color: var(--eom-red); }
/* Sidebar page-nav active/hover — blue block, white text */
.sidebar-other-page__single:hover,
.sidebar-other-page__single.active,
.default-bg {
background-color: var(--eom-blue) !important;
}
.sidebar-other-page__single:hover .page-title,
.sidebar-other-page__single.active .page-title,
.sidebar-other-page__single:hover .icon i,
.sidebar-other-page__single.active .icon i {
color: #ffffff !important;
}
/* Counter numbers */
.project-counter-single-content__project-count,
.project-counter-single-content__project-count ~ span {
color: var(--eom-red) !important;
}
/* Breadcrumb list items */
.breadcrumb-page-list li a,
.breadcrumb-page-list li.has-children a:hover { color: var(--eom-red) !important; }
.has-border-left { border-left-color: var(--eom-red) !important; }
/* ═══════════════════════════════════════════════════════════════
3. HEADER LAYOUT — single-line (logo | nav | CTA)
═══════════════════════════════════════════════════════════════ */
.header-area__desktop .header-navigation-area { padding: 0; }
.eom-oneline-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
min-height: 90px;
padding: 14px 0;
}
.eom-oneline-header__logo {
flex-shrink: 0;
display: flex;
align-items: center;
text-decoration: none;
z-index: 2;
}
.eom-oneline-header__logo img {
width: 250px !important;
max-height: none !important;
height: auto !important;
display: block;
flex-shrink: 0;
/* Placeholder EOM wordmark is dark; render it white on the navy header
for contrast. Swap for an official reversed logo when available. */
filter: brightness(0) invert(1);
}
.eom-oneline-header__nav {
flex: 1 1 auto;
min-width: 0;
display: flex !important;
align-items: center;
justify-content: center;
}
.header-navigation.eom-oneline-header__nav {
align-items: center;
min-height: unset;
padding: 0;
background: none !important;
}
.eom-oneline-header__nav .header-navigation__nav {
display: flex !important;
align-items: center;
justify-content: center;
flex: 0 0 auto !important;
padding: 0;
}
.eom-oneline-header__nav .header-navigation__nav > nav > ul {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
white-space: nowrap;
}
.eom-oneline-header__nav .header-navigation__nav > nav > ul > li > a {
padding: 8px 18px;
line-height: 1.2;
}
.eom-oneline-header__cta {
flex-shrink: 0;
display: flex;
align-items: center;
z-index: 2;
}
.header-sticky.is-sticky .eom-oneline-header {
min-height: 90px;
padding: 14px 0;
}
/* ═══════════════════════════════════════════════════════════════
4. INNER-PAGE COMPONENTS
═══════════════════════════════════════════════════════════════ */
/* Common page content typography */
.common-page-content h2 {
font-size: 1.75rem;
color: var(--eom-ink);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid var(--eom-red);
display: inline-block;
}
.common-page-content p {
color: var(--eom-body);
line-height: 1.8;
margin-bottom: 16px;
}
.common-page-content h4,
.service-details-content h4 {
font-size: 1.05rem;
color: var(--eom-ink);
font-weight: 600;
margin-bottom: 10px;
margin-top: 30px;
}
/* Check list (DNS / TMS pages) */
.check-list { list-style: none; padding-left: 0; margin: 12px 0 0; }
.check-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid #edf1f4;
color: var(--eom-body);
line-height: 1.6;
font-size: 0.95rem;
}
.check-list li:last-child { border-bottom: 0; }
.check-list li i {
color: var(--eom-red);
font-size: 1.15rem;
flex-shrink: 0;
margin-top: 2px;
}
/* Mission callout — blue block with red accent bar */
.mission-callout {
background-color: var(--eom-blue);
border-left: 6px solid var(--eom-red);
border-radius: var(--eom-radius);
padding: 24px 28px;
margin: 30px 0;
}
.mission-callout p {
color: #ffffff;
margin: 0;
font-size: 1rem;
line-height: 1.75;
font-weight: 500;
}
/* Stats counter */
.project-counter-area.eom-counter {
background-color: #f4f8fa;
border-radius: var(--eom-radius);
padding: 32px 20px;
margin: 0 0 10px;
}
/* Leadership / team rows (legacy component, retained) */
.leadership__single {
display: flex;
padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: 1px solid var(--eom-border);
}
@media (max-width: 575px) { .leadership__single { flex-direction: column; } }
.leadership__single:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
/* No .image slot: about.php renders only the .no-image variant, and the four
rules that sized and rounded a headshot here were the last photo rounding on
the site that was not .eom-media's. A headshot added later belongs in an
.eom-media--1x1 frame like every other photo. */
.leadership__single .content { flex: 1; min-width: 0; }
.leadership__single.no-image .content { flex-basis: 100%; }
.leadership__single .content .identity-wrapper { margin-bottom: 14px; }
.leadership__single .content .identity-wrapper.has-border-left {
border-left: 4px solid var(--eom-red);
padding-left: 16px;
padding-top: 4px;
padding-bottom: 4px;
}
.leadership__single .content .identity-wrapper .name {
font-size: 1.2rem; line-height: 1.25; color: var(--eom-ink);
margin-bottom: 4px; font-weight: 600;
}
.leadership__single .content .identity-wrapper .designation {
display: block; color: var(--eom-red); font-size: 0.825rem;
font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px;
}
.leadership__single .content .brief-desc,
.leadership__single .content > p { color: var(--eom-body); line-height: 1.8; margin-bottom: 0; }
/* ═══════════════════════════════════════════════════════════════
5. SWAPPABLE MEDIA — consistent sizing so real photos can replace
stock images without any layout change.
═══════════════════════════════════════════════════════════════ */
.eom-media {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--eom-radius);
background-color: #e9eef2; /* neutral placeholder tone */
}
.eom-media > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Some images must not be cover-cropped at all: award plaques, badges and
anything with type or a border in it, where trimming an edge destroys the
content. These letterbox against the frame's own neutral tone instead. */
.eom-media--contain > img { object-fit: contain; }
/* Aspect-ratio variants keep the frame identical regardless of source.
The ladder is deliberately short and evenly spaced so every photo on
the site can be given the frame NEAREST its own native ratio and the
crop stays shallow:
1x1 1.0 square inset
4x3 1.333 tall-ish block
3x2 1.5 the ratio most of the plant photography ships in
16x9 1.778 card / grid rhythm
2x1 2.0 wide half-column band
Rule of thumb when placing a new photo: divide its pixel width by its
height and pick the closest variant above. Cover-cropping more than
about a third of a photo (source ratio / frame ratio > 1.4) means the
wrong frame — or the wrong photo — has been chosen.
The grey images under assets/img/ are dimension-faithful placeholders:
each was generated at the exact pixel size of the real photograph it
stands in for (originals kept in assets/img/_backup-images-20260904/).
So a frame fitted to a placeholder is fitted to the real photo too, and
dropping the real photography back in needs no CSS change.
That is also why the two divisions use different frames: D&S photography
is 1.5-1.7, TMS photography is uniformly 1110x401 (2.77). The TMS page
therefore runs on 2x1 frames and the D&S page on 16x9. */
.eom-media--16x9 { aspect-ratio: 16 / 9; }
.eom-media--2x1 { aspect-ratio: 2 / 1; }
.eom-media--3x2 { aspect-ratio: 3 / 2; }
.eom-media--4x3 { aspect-ratio: 4 / 3; }
.eom-media--1x1 { aspect-ratio: 1 / 1; }
/* Fallback for browsers without aspect-ratio support. Percentages are
height/width to one decimal, matching the ladder above. */
@supports not (aspect-ratio: 16 / 9) {
.eom-media--16x9 { height: 0; padding-bottom: 56.3%; }
.eom-media--2x1 { height: 0; padding-bottom: 50%; }
.eom-media--3x2 { height: 0; padding-bottom: 66.7%; }
.eom-media--4x3 { height: 0; padding-bottom: 75%; }
.eom-media--1x1 { height: 0; padding-bottom: 100%; }
.eom-media--16x9 > img,
.eom-media--2x1 > img,
.eom-media--3x2 > img,
.eom-media--4x3 > img,
.eom-media--1x1 > img { position: absolute; top: 0; left: 0; }
}
/* NOTE: a frame used as a flex child must not have its height stretched by
the parent's default `align-items: stretch` — that silently defeats
aspect-ratio and the frame stops matching its variant. Fixed at the one
place it happens (the timeline row) rather than globally, because
`align-self` on a COLUMN flex parent would shrink the frame's width
instead of its height. */
/* ═══════════════════════════════════════════════════════════════
6. DIVISION CARDS — type badge + swappable vector logo
═══════════════════════════════════════════════════════════════ */
.eom-division-logo {
height: 46px;
width: auto;
max-width: 180px;
margin-bottom: 14px;
display: block;
}
.eom-division-type {
display: inline-block;
background-color: var(--eom-blue);
color: #ffffff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 3px;
margin-bottom: 12px;
}
.eom-division-spec {
color: var(--eom-muted);
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 10px;
}
.industry-two-slider__single-item__content .eom-division-spec {
font-size: 0.85rem;
}
/* Division card body copy — dark, readable (NOT the red eyebrow color) */
.eom-division-blurb {
color: var(--eom-body);
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 16px;
}
/* Readable body copy in the light content sections (Mission / spotlight /
the D&S Quality block). Scoped to the light wrappers so it never darkens
text on the navy sections (those are .grey-bg, handled above). */
.cta-video-area .cta-video-content p,
.page-content-wrapper .cta-video-content p {
color: var(--eom-body);
}
/* ═══════════════════════════════════════════════════════════════
7. SERVICES SECTION — extensible responsive grid
═══════════════════════════════════════════════════════════════ */
.eom-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 991px) {
.eom-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
.eom-services-grid { grid-template-columns: 1fr; }
}
.eom-service-card {
background-color: #ffffff;
border: 1px solid var(--eom-border);
border-top: 3px solid var(--eom-red);
border-radius: var(--eom-radius);
padding: 30px 26px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.eom-service-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(23, 61, 92, 0.12);
}
.eom-service-card__icon {
width: 54px; height: 54px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background-color: rgba(222, 32, 33, 0.10);
color: var(--eom-red);
font-size: 1.5rem;
margin-bottom: 18px;
}
.eom-service-card__title {
font-size: 1.1rem; font-weight: 700; color: var(--eom-ink); margin-bottom: 10px;
}
.eom-service-card__desc { color: var(--eom-body); font-size: 0.92rem; line-height: 1.7; margin: 0; }
.eom-service-card--soon { opacity: 0.85; }
.eom-service-card--soon .eom-service-card__badge {
display: inline-block;
margin-top: 12px;
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
color: var(--eom-blue);
background-color: rgba(23, 61, 92, 0.10);
padding: 3px 9px; border-radius: 3px;
}
/* ═══════════════════════════════════════════════════════════════
8. CULTURE / LEADERSHIP (About page — no individual photos)
═══════════════════════════════════════════════════════════════ */
.eom-culture-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 10px;
}
@media (max-width: 575px) {
.eom-culture-grid { grid-template-columns: 1fr; }
}
.eom-culture-card {
background-color: #f7fafc;
border-radius: var(--eom-radius);
padding: 28px 26px;
border-left: 4px solid var(--eom-red);
}
.eom-culture-card__icon { color: var(--eom-red); font-size: 1.9rem; margin-bottom: 14px; display: block; }
.eom-culture-card__title { font-size: 1.05rem; font-weight: 700; color: var(--eom-ink); margin-bottom: 8px; }
.eom-culture-card__desc { color: var(--eom-body); font-size: 0.92rem; line-height: 1.7; margin: 0; }
/* ═══════════════════════════════════════════════════════════════
9. TIMELINE — image + title + short description, extensible
═══════════════════════════════════════════════════════════════ */
.eom-timeline { position: relative; margin-top: 20px; }
.eom-timeline::before {
content: "";
position: absolute;
left: 130px;
top: 8px;
bottom: 8px;
width: 2px;
background-color: #d7e0e8;
}
.eom-timeline__item {
position: relative;
display: grid;
grid-template-columns: 110px 60px 1fr;
align-items: start;
gap: 0;
margin-bottom: 34px;
}
.eom-timeline__item:last-child { margin-bottom: 0; }
.eom-timeline__year {
text-align: right;
padding-right: 20px;
font-weight: 700;
color: var(--eom-blue);
font-size: 1.05rem;
padding-top: 2px;
}
.eom-timeline__marker { position: relative; }
.eom-timeline__marker::before {
content: "";
position: absolute;
left: 14px;
top: 6px;
width: 14px; height: 14px;
border-radius: 50%;
background-color: var(--eom-red);
box-shadow: 0 0 0 4px rgba(222, 32, 33, 0.15);
}
.eom-timeline__content {
display: flex;
gap: 18px;
background-color: #ffffff;
border: 1px solid var(--eom-border);
border-radius: var(--eom-radius);
padding: 16px;
}
/* Thumbnail box. `align-self` is required: .eom-timeline__content is a flex
row, whose default `align-items: stretch` would stretch the frame to the
height of the text beside it and override its aspect-ratio — which is why
thumbnails used to come out at a different ratio per row. */
.eom-timeline__content .eom-media { flex: 0 0 160px; width: 160px; align-self: flex-start; }
@media (max-width: 991px) {
.eom-timeline__content .eom-media { flex: 0 0 130px; width: 130px; }
}
.eom-timeline__text h4 { font-size: 1.05rem; font-weight: 700; color: var(--eom-ink); margin: 2px 0 6px; }
.eom-timeline__text p { color: var(--eom-body); font-size: 0.92rem; line-height: 1.65; margin: 0; }
@media (max-width: 767px) {
.eom-timeline::before { left: 7px; }
.eom-timeline__item { grid-template-columns: 20px 1fr; gap: 10px; }
.eom-timeline__year { grid-column: 2; text-align: left; padding: 0 0 6px; }
.eom-timeline__marker { grid-row: 1 / span 2; grid-column: 1; }
.eom-timeline__marker::before { left: 0; }
.eom-timeline__content { grid-column: 2; flex-direction: column; }
.eom-timeline__content .eom-media { flex: 0 0 auto; width: 100%; align-self: stretch; }
}
/* ═══════════════════════════════════════════════════════════════
10. SECTION HEADINGS on About single-page + breadcrumb back-link
═══════════════════════════════════════════════════════════════ */
.eom-section-anchor { scroll-margin-top: 110px; }
.eom-breadcrumb-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 14px;
font-size: 0.9rem;
}
.eom-breadcrumb-nav a { color: #ffffff; opacity: 0.9; text-decoration: none; }
.eom-breadcrumb-nav a:hover { color: var(--eom-light); opacity: 1; }
.eom-breadcrumb-nav .sep { color: rgba(255, 255, 255, 0.55); }
.eom-breadcrumb-nav .current { color: var(--eom-light); font-weight: 600; }
/* Back-to-home pill (used on division pages) */
.eom-back-home {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
padding: 8px 18px;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.4px;
text-decoration: none;
transition: background-color 0.2s ease;
margin-top: 16px;
}
.eom-back-home:hover { background-color: var(--eom-red); border-color: var(--eom-red); color: #ffffff; }
/* ═══════════════════════════════════════════════════════════════
11. FOOTER — light surface, red hovers
═══════════════════════════════════════════════════════════════ */
.footer-area.dark-bg {
background-color: var(--eom-light);
padding-top: 60px;
padding-bottom: 0;
overflow: hidden;
}
.footer-content-wrapper { padding-bottom: 40px; }
.footer-widget { margin-bottom: 30px; }
.footer-widget__title { margin-bottom: 16px; color: var(--eom-red); }
.footer-widget__navigation li { padding: 4px 0; }
.footer-widget__navigation li a { color: #5C5E60; }
.footer-widget__navigation li a:hover { color: var(--eom-red); }
/* Mobile header bar and the mobile-menu-overlay share the theme's bare .logo
class. Their widths were inline style="width:…" on the ![]()
, which the
470x80 attributes then had to be read around; the attributes stay for the
intrinsic ratio and the display width is set here. .img-fluid supplies
height:auto for both. */
.header-area__mobile .logo img { width: 200px; }
.mobile-menu-overlay__header .logo img { width: 160px; }
.footer-logo img {
filter: none;
width: 160px !important;
max-height: none !important;
height: auto !important;
margin-bottom: 20px;
}
.footer-intro-wrapper .footer-desc { color: #5C5E60; }
.footer-intro-wrapper .social-links ul li a { color: #5C5E60; border-color: #c3d0da; }
.footer-intro-wrapper .social-links ul li a:hover {
color: #ffffff; background-color: var(--eom-red); border-color: var(--eom-red);
}
/* Copyright bar — full-width blue */
.footer-copyright-wrapper {
background-color: var(--eom-blue);
padding: 16px 9999px;
margin: 0 -9999px;
border-top: none !important;
}
.footer-copyright-left,
.footer-copyright-right__navigation li a { color: #ffffff !important; }
.footer-copyright-right__navigation li a:hover { color: var(--eom-light) !important; }
/* ═══════════════════════════════════════════════════════════════
12. IMAGE STACK — overlapping two-photo composition
(Homepage Mission / Vision). Reuses .eom-media for both
photos so object-fit/aspect-ratio behavior stays identical
to the rest of the site. Must sit directly inside
.cta-video-image (NOT .cta-video-image__image, which clips
overflow — see eom-media-stack__secondary bleed below).
═══════════════════════════════════════════════════════════════ */
.eom-media-stack {
position: relative;
max-width: 440px;
}
.eom-media-stack--right { margin-left: auto; }
.eom-media-stack--left { margin-right: auto; }
.eom-media-stack__primary { position: relative; z-index: 1; }
.eom-media-stack__secondary {
position: absolute;
z-index: 2;
width: 46%;
max-width: 210px;
bottom: -28px;
/* content-box, NOT border-box: aspect-ratio applies to whichever box
box-sizing selects, so with border-box the 6px mat was eating into the
ratio and a 2x1 inset actually rendered at 2.14. The mat now sits
outside the frame and the photo keeps the ratio its class declares. */
box-sizing: content-box;
border: 6px solid #ffffff;
box-shadow: 0 16px 34px rgba(15, 42, 66, 0.24);
}
.eom-media-stack--right .eom-media-stack__secondary { right: -28px; }
.eom-media-stack--left .eom-media-stack__secondary { left: -28px; }
/* A 130x130 red accent block used to sit here, behind the secondary photo.
It never actually rendered: the secondary was a 1:1 frame (202px at
desktop, 140px at tablet) pulled 8px further out on both axes, so it
covered the block completely at every breakpoint. Now that each inset is
fitted to its own photo the insets are shorter, and the block would show
as a stray pink rectangle above them — so it is removed rather than
resized to stay hidden. Nothing about the rendered design changes. */
/* Mobile — collapses to a vertical mini-stack: full-width primary,
secondary centered underneath in normal flow (no absolute
positioning, so there is no clipping risk at narrow widths). */
@media (max-width: 767px) {
.eom-media-stack { max-width: 100%; margin: 0 0 20px; }
.eom-media-stack__secondary {
position: static;
display: block;
width: 60%;
max-width: 220px;
margin: -34px auto 0;
}
}
/* ═══════════════════════════════════════════════════════════════
13. STAT BADGE — small overlay chip for the D&S spotlight photo.
Sits INSET inside .eom-media (which already clips overflow),
so it never bleeds outside the photo frame.
═══════════════════════════════════════════════════════════════ */
.eom-stat-badge {
position: absolute;
left: 20px;
bottom: 20px;
z-index: 2;
display: block;
max-width: 190px;
background-color: var(--eom-blue);
border-left: 4px solid var(--eom-red);
border-radius: var(--eom-radius);
padding: 14px 18px;
box-shadow: 0 10px 26px rgba(15, 42, 66, 0.3);
}
.eom-stat-badge__num {
display: block;
font-size: 1.7rem;
font-weight: 800;
line-height: 1;
color: #ffffff;
margin-bottom: 4px;
}
.eom-stat-badge__label {
display: block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
color: #dbe4ec;
}
/* In a left-hung stack the secondary photo sits over the primary's
bottom-LEFT corner, which is exactly where the badge lives — so flip the
badge to the opposite corner there (About Vision, D&S and TMS ownership
sections all use this variant). */
.eom-media-stack--left .eom-stat-badge { left: auto; right: 20px; }
@media (max-width: 767px) {
.eom-stat-badge { left: 14px; bottom: 14px; padding: 10px 14px; max-width: 160px; }
.eom-media-stack--left .eom-stat-badge { left: auto; right: 14px; }
.eom-stat-badge__num { font-size: 1.35rem; }
}
/* Hero slide photos — darken slightly so the white Revolution Slider
captions stay legible over bright hotspots (welding sparks, machine
housings, floor lighting) without touching the slider's own
hand-tuned caption z-index/positioning. */
.rev-slidebg { filter: brightness(0.78); }
/* Caption scrim. brightness(0.78) alone is not enough on the real
photography: on the "Serving with Excellence" slide the headline sits over
a sunlit wall and bandsaw, which measures ~1.7:1 against white 80px type
(45% of the headline box below 4.5:1). Dimming every slide harder would
mute the two darker photos, so the scrim is local to the caption side.
Mobile first: the caption spans ~90% of the 480 grid there, so the scrim
runs the full width and only becomes left-weighted once the layout is wide
enough for the photo to breathe on the right.
z-index 2 sits above .rev-slidebg and below the tp-caption layers (5+). */
.hero-slider-area .tp-revslider-mainul > li::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
pointer-events: none;
z-index: 2;
background: linear-gradient(90deg,
rgba(11, 31, 51, 0.78) 0%,
rgba(11, 31, 51, 0.70) 60%,
rgba(11, 31, 51, 0.55) 100%);
}
@media (min-width: 992px) {
.hero-slider-area .tp-revslider-mainul > li::after {
background: linear-gradient(90deg,
rgba(11, 31, 51, 0.82) 0%,
rgba(11, 31, 51, 0.66) 42%,
rgba(11, 31, 51, 0.18) 72%,
rgba(11, 31, 51, 0) 100%);
}
}
/* ═══════════════════════════════════════════════════════════════
14. CERTIFICATION TRUST STRIP (About page)
Pairs the ISO 9001:2015 badge with supporting quality copy.
═══════════════════════════════════════════════════════════════ */
.eom-cert-strip {
display: flex;
align-items: center;
gap: 26px;
background-color: #f7fafc;
border: 1px solid var(--eom-border);
border-left: 4px solid var(--eom-red);
border-radius: var(--eom-radius);
padding: 24px 28px;
margin-top: 20px;
}
.eom-cert-strip__badge {
flex: 0 0 auto;
width: 84px;
height: auto;
}
.eom-cert-strip__text h4 {
font-size: 1.05rem;
font-weight: 700;
color: var(--eom-ink);
margin: 0 0 8px;
}
.eom-cert-strip__text p {
color: var(--eom-body);
font-size: 0.92rem;
line-height: 1.7;
margin: 0;
}
@media (max-width: 575px) {
.eom-cert-strip { flex-direction: column; text-align: center; gap: 18px; padding: 24px 20px; }
}
/* ═══════════════════════════════════════════════════════════════
15. IMAGE POLISH — applies to the real plant photography now used
across the site (sourced from the division sites).
═══════════════════════════════════════════════════════════════ */
/* Division / portfolio card photos — subtle zoom on hover, matching the
lift already used by .eom-service-card. */
.industry-two-slider__single-item__image .eom-media > img {
transition: transform 0.45s ease;
}
.industry-two-slider__single-item:hover .eom-media > img {
transform: scale(1.05);
}
/* Culture cards — match the service-card hover so the two grids behave
consistently. */
.eom-culture-card {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.eom-culture-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(23, 61, 92, 0.12);
}
/* ═══════════════════════════════════════════════════════════════
16. DIVISION PAGES — overview intro block
Used by dns.php / tns.php above the fold: division logo, type
badge, spec line and lede sitting beside a photo stack.
═══════════════════════════════════════════════════════════════ */
.eom-division-intro__logo {
height: 64px;
width: auto;
max-width: 220px;
display: block;
margin-bottom: 18px;
}
/* .common-page-content h2 is display:inline-block, so an inline-block badge
before it shares the same line. `display: table` keeps the badge shrink-to-
fit while forcing the heading onto its own line. */
.eom-division-intro .eom-division-type { display: table; }
.eom-division-intro h2 {
/* .common-page-content h2 already carries the red underline; this only
tightens the rhythm when a logo + badge sit above it. */
margin-top: 4px;
}
.eom-division-lede {
font-size: 1.05rem;
line-height: 1.85;
color: var(--eom-body);
}
/* ── Fact strip ────────────────────────────────────────────────────
Navy band of headline numbers. Wraps down to 3 / 2 columns; the
dividers are drawn with a grid gap + background so wrapped rows never
leave a dangling border. */
.eom-fact-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1px;
background-color: rgba(255, 255, 255, 0.14);
border-radius: var(--eom-radius);
overflow: hidden;
box-shadow: 0 14px 34px rgba(15, 42, 66, 0.16);
}
.eom-fact {
background-color: var(--eom-blue);
padding: 28px 16px;
text-align: center;
}
.eom-fact__num {
display: block;
font-size: 1.85rem;
font-weight: 800;
line-height: 1.05;
color: #ffffff;
margin-bottom: 6px;
}
.eom-fact__num .unit { font-size: 0.95rem; font-weight: 700; }
.eom-fact__label {
display: block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #b9cbdb;
line-height: 1.4;
}
@media (max-width: 991px) {
.eom-fact-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 479px) {
.eom-fact-strip { grid-template-columns: repeat(2, 1fr); }
.eom-fact { padding: 20px 10px; }
.eom-fact__num { font-size: 1.45rem; }
}
/* ═══════════════════════════════════════════════════════════════
17. CAPABILITY CARDS — photo + description + spec bullets
Extensible: append a card, the grid reflows. Cards stretch to
equal height so mixed-length bullet lists stay aligned.
═══════════════════════════════════════════════════════════════ */
.eom-cap-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
@media (max-width: 991px) { .eom-cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .eom-cap-grid { grid-template-columns: 1fr; } }
.eom-cap-card {
display: flex;
flex-direction: column;
background-color: #ffffff;
border: 1px solid var(--eom-border);
border-radius: var(--eom-radius);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.eom-cap-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(23, 61, 92, 0.14);
}
.eom-cap-card .eom-media { border-radius: 0; }
.eom-cap-card .eom-media > img { transition: transform 0.45s ease; }
.eom-cap-card:hover .eom-media > img { transform: scale(1.05); }
.eom-cap-card__body {
flex: 1 1 auto;
padding: 24px 24px 26px;
border-top: 3px solid var(--eom-red);
}
.eom-cap-card__title {
font-size: 1.1rem;
font-weight: 700;
color: var(--eom-ink);
margin: 0 0 10px;
}
.eom-cap-card__desc {
color: var(--eom-body);
font-size: 0.92rem;
line-height: 1.7;
margin: 0 0 14px;
}
/* Compact spec bullets — a lighter sibling of .check-list for use
inside cards, where the full row dividers would read as clutter. */
.eom-spec-list { list-style: none; padding: 0; margin: 0; }
.eom-spec-list li {
position: relative;
padding: 5px 0 5px 18px;
color: var(--eom-body);
font-size: 0.875rem;
line-height: 1.6;
}
.eom-spec-list li::before {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 6px;
height: 6px;
border-radius: 1px;
background-color: var(--eom-red);
}
/* ═══════════════════════════════════════════════════════════════
18. EQUIPMENT SPEC TABLES — white cards on the navy section
═══════════════════════════════════════════════════════════════ */
.eom-spec-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (max-width: 767px) { .eom-spec-grid { grid-template-columns: 1fr; } }
.eom-spec-card {
background-color: #ffffff;
border-radius: var(--eom-radius);
border-top: 3px solid var(--eom-red);
padding: 24px 26px 20px;
}
.eom-spec-card__title {
font-size: 1rem;
font-weight: 700;
color: var(--eom-ink);
margin: 0 0 14px;
letter-spacing: 0.2px;
}
/* Same card on a WHITE section — the navy-section version relies on the
background for its edges, so a light surface needs a real border. */
.eom-spec-card--bordered {
border: 1px solid var(--eom-border);
border-top: 3px solid var(--eom-red);
background-color: #f7fafc;
}
.eom-spec-table {
width: 100%;
border-collapse: collapse;
font-size: 0.86rem;
}
.eom-spec-table th {
text-align: left;
font-weight: 600;
color: var(--eom-ink);
padding: 8px 12px 8px 0;
border-bottom: 1px solid #edf1f4;
vertical-align: top;
width: 46%;
}
.eom-spec-table td {
color: var(--eom-body);
padding: 8px 0;
border-bottom: 1px solid #edf1f4;
vertical-align: top;
line-height: 1.55;
}
.eom-spec-table tr:last-child th,
.eom-spec-table tr:last-child td { border-bottom: 0; }
/* Narrow screens: stack the label above its value so long equipment
names never squeeze the spec column into a single character per line. */
@media (max-width: 479px) {
.eom-spec-table, .eom-spec-table tbody, .eom-spec-table tr,
.eom-spec-table th, .eom-spec-table td { display: block; width: auto; }
.eom-spec-table th { border-bottom: 0; padding-bottom: 2px; }
.eom-spec-table td { padding-top: 0; }
}
.eom-spec-note {
color: #b9cbdb;
font-size: 0.86rem;
line-height: 1.7;
margin: 24px 0 0;
text-align: center;
}
/* Red-on-navy fails contrast, so the inline link goes white + underlined. */
.eom-spec-note a { color: #ffffff; text-decoration: underline; }
.eom-spec-note a:hover { color: #ffffff; text-decoration: none; }
/* ═══════════════════════════════════════════════════════════════
19. INDUSTRIES SERVED — icon chips
═══════════════════════════════════════════════════════════════ */
.eom-industry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
.eom-industry {
display: flex;
align-items: center;
gap: 14px;
background-color: #f7fafc;
border: 1px solid var(--eom-border);
border-left: 3px solid var(--eom-red);
border-radius: var(--eom-radius);
padding: 16px 18px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.eom-industry:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(23, 61, 92, 0.10);
}
.eom-industry i {
color: var(--eom-red);
font-size: 1.5rem;
flex-shrink: 0;
line-height: 1;
}
.eom-industry span {
color: var(--eom-ink);
font-size: 0.92rem;
font-weight: 600;
line-height: 1.4;
}
/* ═══════════════════════════════════════════════════════════════
20. PULL QUOTE — customer testimonial
═══════════════════════════════════════════════════════════════ */
.eom-quote {
background-color: #f7fafc;
border: 1px solid var(--eom-border);
border-left: 4px solid var(--eom-red);
border-radius: var(--eom-radius);
padding: 30px 32px;
margin: 0;
}
.eom-quote p {
color: var(--eom-ink);
font-size: 1.05rem;
line-height: 1.8;
font-style: italic;
margin: 0 0 14px;
}
.eom-quote footer {
color: var(--eom-red);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
font-style: normal;
}
@media (max-width: 575px) { .eom-quote { padding: 24px 22px; } }
/* ═══════════════════════════════════════════════════════════════
21. CTA BAND + CROSS-PAGE LINKS (division page footer)
═══════════════════════════════════════════════════════════════ */
.eom-cta-band {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
background: linear-gradient(135deg, var(--eom-blue-dark) 0%, var(--eom-blue) 100%);
border-left: 6px solid var(--eom-red);
border-radius: var(--eom-radius);
padding: 38px 42px;
}
.eom-cta-band__text h3 {
color: #ffffff;
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 8px;
}
.eom-cta-band__text p {
color: #c7d6e2;
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
max-width: 620px;
}
.eom-cta-band__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
flex-shrink: 0;
}
/* Outlined companion button so the two CTAs read as primary + secondary
rather than two competing red blocks. */
/* .ht-btn declares no border-style, so a border-color alone paints nothing —
the style and width have to be set here. box-sizing keeps the 40px button
height identical to the solid CTA sitting beside it. */
.ht-btn--outline-light,
.ht-btn--outline-light:visited {
background-color: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
box-sizing: border-box;
color: #ffffff !important;
}
.ht-btn--outline-light:hover {
background-color: #ffffff !important;
border-color: #ffffff !important;
color: var(--eom-blue) !important;
}
@media (max-width: 991px) {
.eom-cta-band { flex-direction: column; align-items: flex-start; padding: 30px 26px; }
}
.eom-page-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 20px;
}
.eom-page-link {
display: block;
text-align: center;
background-color: #ffffff;
border: 1px solid var(--eom-border);
border-radius: var(--eom-radius);
padding: 26px 16px;
text-decoration: none;
transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.eom-page-link i {
display: block;
font-size: 34px;
color: var(--eom-red);
margin-bottom: 10px;
transition: color 0.25s ease;
}
.eom-page-link span {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: var(--eom-ink);
line-height: 1.35;
transition: color 0.25s ease;
}
.eom-page-link:hover {
background-color: var(--eom-blue);
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(23, 61, 92, 0.16);
}
.eom-page-link:hover i,
.eom-page-link:hover span { color: #ffffff; }
/* ═══════════════════════════════════════════════════════════════
404 — the small amount the rebuilt page needs beyond the shared
.breadcrumb-area / .section-title-area / .ht-btn components. The
old page carried the theme's .not-found__* classes, which neither
style-red.css nor this file defines, so they styled nothing.
═══════════════════════════════════════════════════════════════ */
.eom-404-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 12px;
list-style: none;
padding: 0;
margin: 0 0 36px;
}
.eom-404-links a {
display: block;
/* 44px tap target: 13px + 13px padding on a 18px line box. */
padding: 13px 20px;
border: 1px solid var(--eom-border);
border-radius: var(--eom-radius);
background-color: #ffffff;
color: var(--eom-ink);
font-weight: 600;
line-height: 18px;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.eom-404-links a:hover,
.eom-404-links a:focus {
border-color: var(--eom-red);
color: var(--eom-red);
box-shadow: 0 6px 18px rgba(23, 61, 92, 0.1);
}
.eom-404-actions {
text-align: center;
margin: 0 0 26px;
}
.eom-404-help {
text-align: center;
color: var(--eom-muted);
margin: 0;
}
.eom-404-help a { color: var(--eom-red); }